/* 样式基座 —— 唯一 UI 基线 ＝ 已验收 demo 的【B 版主题覆盖层】
 * 基线文件：dev/demo/hotel-conversion-demo-approval.html
 *   第 8~217 行 ＝ A 版基座（中式墨青 / 铜金 / 宋体）⛔ 不是验收态
 *   第 219~366 行 ＝ B 版主题覆盖层（审批中心「温润专业」风格）✅ 验收态
 * 取值一律以 B 版为准；B 版未覆写的属性才回落 A 版（如 .kpis 栅格、.kpi .val 字号）。
 * 每条规则后的 demo:N 是基准取值行号。
 * ⚠️ 能力边界如实声明：本文件注释里的 demo:N 标注多于门禁实际比对面——
 *    形态门禁 tests/W2-S1/js/test-design-tokens.mjs 的基准表【只覆盖其中 45 条】
 *    （AC29 的 16 条令牌 + AC30 的 29 条组件规则，共 90 个属性比对）。
 *    未进基准表的标注仅为人工溯源用，⛔ 不受自动门禁保护、⛔ 不得读成「逐条都在比对」。
 *
 * 归属：W2-S1 独占全局段（:root 令牌、组件基类、全站通用规则）。
 * W2-S2 / W2-S3 只在各自视图作用域选择器（#view-xxx .yyy）内追加，
 * ⛔ 不改全局基类与 :root 变量，⛔ 不得写死自创色值（AC31 静态检查会判 fail）。 */

/* ============ tokens ============ B 版 :root ＝ demo:221-231（16 条）*/
:root{
  --ink:#23262b;          /* demo:222 */
  --ink-2:#454b53;        /* demo:222 */
  --paper:#f6f4ef;        /* demo:223 暖米白底 */
  --card:#fffefb;         /* demo:223 */
  --line:#e8e6e1;         /* demo:223 */
  --brass:#3370ff;        /* demo:224 品牌蓝（⛔ 非 A 版铜金） */
  --seal:#f53f3f;         /* demo:224 */
  --pine:#00b42a;         /* demo:224 */
  --txt:#23262b;          /* demo:225 */
  --txt-2:#5d636b;        /* demo:225 */
  --txt-3:#7c828b;        /* demo:225 */
  --serif:'PingFang SC','Hiragino Sans GB',-apple-system,BlinkMacSystemFont,sans-serif;   /* demo:226 */
  --mono:'PingFang SC','Hiragino Sans GB',-apple-system,BlinkMacSystemFont,sans-serif;    /* demo:227 */
  --sans:'PingFang SC','Hiragino Sans GB',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; /* demo:228 */
  --sh1:0 1px 2px rgba(60,50,30,.05),0 1px 3px rgba(60,50,30,.04);   /* demo:229 */
  --sh3:0 8px 24px rgba(60,50,30,.10),0 2px 6px rgba(60,50,30,.06);  /* demo:230 */
}
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:14px}
body{font-family:var(--sans);background:var(--paper);color:var(--txt);line-height:1.55}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit;font-size:13px;color:var(--txt)}
:focus-visible{outline:2px solid #3370ff;outline-offset:2px}   /* demo:314 */
[hidden]{display:none !important}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}

/* 数字等宽走 tnum 而非等宽字体（B 版三个字体栈统一为 PingFang 系统栈，⛔ 不用 A 版的等宽栈）—— demo:232 */
.num,.stamps,.corp-no,.pf-kpi .val,.kpi .val{font-variant-numeric:tabular-nums;font-feature-settings:"tnum";font-family:var(--mono);font-family:var(--mono);font-family:var(--mono);font-family:var(--mono);white-space:nowrap}

/* ============ 页头 ============ */
.hd{background:var(--card);border-bottom:1px solid var(--line);padding:0 22px;
    display:flex;align-items:center;gap:18px;height:58px;position:sticky;top:0;z-index:40;
    box-shadow:var(--sh1)}                                   /* demo:233 */
.brand{font-weight:650;font-size:17px;color:#23262b;letter-spacing:.02em;white-space:nowrap;font-family:var(--serif)}  /* demo:234 */
.hd-right{margin-left:auto;display:flex;align-items:center;gap:14px}
.gsearch{position:relative}
.gsearch input{border:1px solid #dcdad4;border-radius:9px;padding:6px 10px;width:262px;background:var(--paper)}           /* demo:315 */
.gsearch input:focus{border-color:#3370ff;box-shadow:0 0 0 3px #eef3ff;background:#fff;outline:none} /* demo:316 */
.who{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--txt-2)}
.who select{border:1px solid #dcdad4;border-radius:9px;padding:5px 8px;background:var(--card)} /* demo:315 */
.stamps{text-align:right;font-size:11px;color:var(--txt-3);line-height:1.5}
.stamps b{color:var(--txt-2);font-weight:500}

/* ============ 按钮 ============ demo:236-242 */
.btn{border:1px solid #3370ff;background:#3370ff;color:#fff;border-radius:9px;
     padding:7px 14px;font-size:13px;font-weight:600}
.btn:hover{background:#2b5dd4;border-color:#2b5dd4;box-shadow:0 2px 8px rgba(60,50,30,.07)}
.btn.ghost{background:var(--card);color:#5d636b;border:1px solid #dcdad4}
.btn.ghost:hover{background:#f0f5ff;color:#3370ff;border-color:#3370ff}
.btn.sm{padding:3px 9px;font-size:12px}
.btn.danger{background:var(--card);border:1px solid #dcdad4;color:#5d636b}
.btn.danger:hover{border-color:#f53f3f;color:#f53f3f;background:#feecec}
.btn[disabled]{opacity:.55;cursor:not-allowed}

/* ============ 骨架布局 ============ */
/* 用户 2026-07-21 UAT 拍板：内容铺满屏幕宽、侧栏留左。
 * 去掉 demo 的居中定宽上限（.shell 1400 / .page 1280），改为随屏幕自适应。
 * 这两处对 demo 的偏离已登记进 tests/W2-S1/js/test-design-tokens.mjs 的
 * IMPL_DEMO_EXCEPTIONS（selector/prop/reason/owner 齐全），⛔ 非静默改基准。 */
.shell{display:flex;max-width:none;margin:0 auto;align-items:flex-start}
.side{width:196px;flex:none;padding:16px 10px;position:sticky;top:58px}   /* demo:293 */
.content{flex:1;min-width:0}
.page{padding:20px 22px 60px;max-width:none;margin:0 auto}
@media(max-width:900px){
  .shell{display:block}
  .side{position:static;width:auto;display:flex;flex-wrap:wrap;gap:4px;padding:10px 16px}
  .nav-group{padding:8px 6px 4px}
  .nav-sub{padding-left:11px}
}

/* ============ 侧栏分组导航 ============ demo:294-297 */
.nav-card{background:var(--card);border:1px solid var(--line);border-radius:12px;
          padding:5px;margin-bottom:10px;box-shadow:var(--sh1)}
.nav-group{font-size:11px;color:#7c828b;letter-spacing:.1em;padding:14px 12px 4px}  /* demo:246 字距 / demo:108 内边距 */
.nav-card .nav-group{padding:7px 11px 3px;font-size:11px;color:#7c828b;letter-spacing:.14em}  /* demo:295 */
.nav-item{display:block;width:100%;text-align:left;border:none;background:none;
          padding:9px 11px;border-radius:9px;font-size:13.5px;color:#23262b;
          font-weight:500;margin-bottom:1px}
.nav-item.on{background:#eef3ff;color:#3370ff;font-weight:600}   /* demo:244 */
.nav-item:hover:not(.on){background:#f4f1ea}                     /* demo:245 */
.nav-sub{padding-left:11px;font-size:13.5px}                     /* demo:297 */

/* ============ 提示条 ============
 * 两条提示条同属「提示 / 待办 / 降级」语义，取 B 版告警橙语义对（demo:253 / demo:318）。
 * ⛔ 实现侧自创的那组「土黄提示色」（含铜金描边）在 demo B 版中完全不存在，已整组清除；
 *    黑名单色值见 tests/W2-S1/js/test-design-tokens.mjs 的 FORBIDDEN_LEGACY_COLORS。 */
.fail-banner,.mode-banner{display:none;border-radius:9px;padding:8px 14px;
                          margin:16px 22px 0;font-size:13px;border:1px solid transparent}
.fail-banner{background:#fff3e8;border-color:#ffd7ad;color:#c75a00;margin-bottom:14px}   /* demo:318 */
.mode-banner{background:#fff3e8;border:none;color:#c75a00}
.fail-banner.show,.mode-banner.show{display:block}

.empty-state{color:var(--txt-2);font-size:14px}

/* ============ 轻提示 ============ 白卡左蓝条 —— demo:304 */
#toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);
       background:var(--card);color:#23262b;border-left:4px solid #3370ff;
       border-radius:12px;box-shadow:var(--sh3);padding:9px 18px;
       font-size:13px;z-index:200;max-width:80vw;opacity:0;pointer-events:none;transition:opacity .25s}
/* ⚠️ demo 用 .show 类控制显隐（demo:200 #toast.show{opacity:1}），
   本实现用 hidden 属性（index.html:74 与 toast() 的 box.hidden）。
   照抄 demo 的 opacity:0 而不补这条适配，轻提示会永远不可见 —— 属「对齐 demo 反而弄坏功能」，
   故补本条把两种显隐机制接上，⛔ 未改 demo 的取值本身。*/
#toast:not([hidden]){opacity:1}
#toast.err{background:var(--card);color:#cb2a2a;border-left-color:#f53f3f}   /* demo:305 */

/* ============ 卡片与表格基类 ============ */
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;
      padding:16px 18px;margin-bottom:16px;box-shadow:var(--sh1)}   /* demo:249 */
.card h3{font-size:13px;color:#23262b;letter-spacing:.08em;margin-bottom:10px;
         display:flex;align-items:center;gap:8px}
/* 蓝竖条节标题 —— demo:250 */
.card h3::before{content:"";display:inline-block;width:3px;height:13px;
                 background:#3370ff;border-radius:2px}
.card h3 .cnt{color:var(--txt-3);font-weight:400;font-variant-numeric:tabular-nums}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
@media(max-width:980px){.grid2,.grid3{grid-template-columns:1fr}}

.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px}
.toolbar input[type=text],.toolbar select{border:1px solid #dcdad4;border-radius:9px;
                                          padding:7px 10px;background:var(--card)}  /* demo:315 */
.toolbar input[type=text]{width:230px}
.toolbar input[type=text]:focus{border-color:#3370ff;box-shadow:0 0 0 3px #eef3ff;background:#fff;outline:none} /* demo:316 */
.seg{display:inline-flex;border:1px solid #dcdad4;border-radius:9px;
     overflow:hidden;background:var(--card)}                        /* demo:247 */
.seg button{border:none;background:none;padding:7px 12px;font-size:13px;color:var(--txt-2)}
.seg button.on{background:#3370ff;color:#fff}                       /* demo:248 */
.tl-label{font-size:12px;color:var(--txt-3)}

.tbl-wrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:13px}
th{font-size:11px;color:#5d636b;font-weight:600;letter-spacing:.05em;text-align:left;
   padding:8px 10px;border-bottom:1.5px solid #dcdad4;white-space:nowrap;
   background:var(--card);position:sticky;top:0}                    /* demo:260 */
td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:middle;white-space:nowrap}
tr:hover td{background:#f4f1ea}                                     /* demo:261 */
th.sortable{cursor:pointer;user-select:none}
th.sortable:hover{color:#3370ff}                                    /* demo:290 */
th .arr{color:var(--brass);font-size:10px;margin-left:2px}
.num{text-align:right;font-size:12.5px}
th.num{text-align:right}
.neg{color:#cb2a2a}                                                 /* demo:320 */
.pos{color:#009a23}                                                 /* demo:321 */
.dim{color:var(--txt-3)}
.corp-no{font-size:12px;color:var(--txt-2)}

/* ============ 胶囊与徽章 ============ 一律 999px —— demo:251-255 */
.pill{display:inline-block;border-radius:10px;padding:1px 9px;font-size:11px;font-weight:500}  /* demo:89 · B 版未覆写圆角，取 A 版基座值 */
.pill.tagged{background:#eaf8ec;color:#00781b}                      /* demo:251 */
.pill.off{background:#f0ede8;color:#5d636b}                         /* demo:252 */
.flat-tag{display:inline-block;border:none;background:#f0ede8;color:#5d636b;
          border-radius:999px;font-size:10.5px;padding:1px 8px;
          margin-left:4px;white-space:nowrap}                       /* demo:254 */
.scope-note{font-size:12px;border:none;background:#eaf8ec;color:#00781b;
            border-radius:999px;padding:3px 11px}                   /* demo:267 */
.role-tag{background:#f0ede8;color:#5d636b;border-radius:999px;font-size:11px;padding:0 6px;display:inline-block} /* demo:268 */

.bullet{display:inline-block;width:64px;height:7px;background:#f0ede8;border-radius:3px;
        overflow:hidden;margin-left:7px;vertical-align:1px}         /* demo:256 */
.bullet i{display:block;height:100%;background:#00b42a;border-radius:3px}  /* demo:257 */
.bullet i.low{background:#f53f3f}                                   /* demo:258 */
.bullet i.full{background:#009a23}                                  /* demo:259 */

/* ============ 遮罩与弹层 ============ demo:306-308 */
.mask{position:fixed;inset:0;background:rgba(35,30,20,.42);backdrop-filter:blur(1px);
      display:none;align-items:flex-start;justify-content:center;z-index:100;padding:60px 16px}
.mask.show{display:flex}
/* ⚠️ .modal 是 demo 的类名；实现侧渲染层用的是 .modal-box（render-customers.js:1384 /
   render-owners.js:436）。两者语义同一，故 demo:306 的取值同时作用到两个类名上，
   ⛔ 不得只给 demo 的名字设样式而真实元素落空（第 3 轮 ADV2-02）。*/
.modal,.modal-box{background:var(--card);border-radius:16px;max-width:720px;width:100%;
       max-height:80vh;overflow:auto;padding:20px 22px;box-shadow:0 18px 50px rgba(22,40,60,.35)}
.modal h4{font-weight:650;color:#23262b;font-size:16px;margin-bottom:12px;font-family:var(--serif)}  /* demo:307 */
.modal textarea{width:100%;min-height:120px;border:1px solid #dcdad4;border-radius:9px;
                padding:10px;font-size:12px;line-height:1.7;font-family:var(--mono)}       /* demo:315 */

/* ============ 图表悬浮提示浮层 ============ demo:299（元素本体由 W2-S2 交付）*/
#dtip{position:absolute;pointer-events:none;background:var(--card);color:#23262b;
      border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh3);
      padding:8px 12px;font-size:12px;line-height:1.6;display:none;z-index:50;min-width:190px}
#dtip .tt-h{color:#23262b;font-weight:600;margin-bottom:3px;font-family:var(--mono);font-variant-numeric:tabular-nums}
#dtip .tt-r{display:flex;justify-content:space-between;gap:14px;color:#5d636b;font-family:var(--mono);font-variant-numeric:tabular-nums}
#dtip .tt-r span:last-child{color:#23262b}
#dtip .tt-neg{color:#cb2a2a}

/* ============================================================
 * W1-S2 视图作用域样式（客户管理与分配 / 人员管理·权限）
 * ⛔ 页级 h2 大标题的规则已按 AC32 整条删除 —— demo 六个 <main class="page"> 内均无页级标题。
 * ========================================================== */

#view-customers .tl-spacer{flex:1}

/* 顶部小计行（契约锚 subtotal-row）：跨页求和，视觉上与数据行区分 —— demo:291 */
#view-customers tr.subtotal-row td{background:#f6f4ef;font-weight:600;color:var(--ink);
  border-bottom:1.5px solid #dcdad4}
#view-customers tr.subtotal-row:hover td{background:#f6f4ef}

#view-customers .cust-link{color:#3370ff;cursor:pointer}
#view-customers .cust-link:hover{color:#2b5dd4;text-decoration:underline}

/* ⚠️ W2-S2 按 demo:84 改正：原实现为 180px，demo 基准是 170px（决策 21 严格锁 demo）。
   该差异落在 W2-S1 的对账盲区里（作用域实现不在基准表覆盖面内），由 S1 复核路 2 查出。 */
#view-customers .note-cell{max-width:170px;overflow:hidden;text-overflow:ellipsis;
  color:var(--txt-2);cursor:pointer;font-size:12px}
#view-customers .note-cell:hover{color:#3370ff}
#view-customers .note-cell.empty{color:var(--txt-3)}

#view-customers .empty-tip{color:var(--txt-3);font-size:12.5px;padding:14px 0;text-align:center}

/* 分页器 —— demo:309-310 */
#view-customers .pager{display:flex;gap:6px;align-items:center;justify-content:flex-end;
  margin-top:12px;font-size:12.5px;color:var(--txt-2)}
#view-customers .pager button{border:1px solid var(--line);background:var(--card);
  border-radius:6px;padding:4px 10px;color:var(--txt-2)}
#view-customers .pager button:hover:not([disabled]){border-color:#3370ff;color:#3370ff}
#view-customers .pager button[disabled]{opacity:.4;cursor:default}
/* 当前页码按钮 —— B 版 demo:310 给底色与边框色；B 版未覆写 color，
   按决策 21 回落 A 版基座 demo:126 的 #fff。
   ⚠️ 必须写在【视图作用域内】：裸 `.pager button.on`（特异性 0,2,1）会被上面那条
   `#view-customers .pager button`（1,1,1）盖过，补了也不生效 —— 那正是 ADV3-03 判过的形状。
   本条为 (1,2,1)，压得住。配套的页码按钮本体由 render-customers.js 的 buildPager 渲染。 */
#view-customers .pager button.on{background:#3370ff;border-color:#3370ff;color:#fff}

/* 人工处理清单 / 预览确认页 / 数据异常清单 */
#view-customers .mini-list{font-size:12.5px}
/* ⚠️ W2-S2 按 demo:208 改正：原实现为 7px 2px，demo 基准是 6px 2px。
   ⚠️ 全局 .mini-list li（main.css 下方）本就忠实于 demo；真正在客户视图生效的是本条
   作用域规则（特异性更高），差异藏在这里 —— 由 S1 复核路 2 查出。 */
#view-customers .mini-list li{list-style:none;padding:6px 2px;border-bottom:1px dashed var(--line);
  display:flex;gap:8px;align-items:center;flex-wrap:wrap}
#view-customers .mini-list li:last-child{border-bottom:none}
#view-customers .mini-empty{color:var(--txt-3);font-size:12.5px;padding:12px 0}
/* 匹配状态标签（编号不存在 / 多命中 / 未命中）全属待人工处理 → B 版告警橙（demo:253）*/
#view-customers .pend-reason{border:none;background:#fff3e8;color:#c75a00;
  border-radius:999px;font-size:11px;padding:1px 8px;white-space:nowrap}
#view-customers .pend-raw{font-size:11.5px;color:var(--txt-2);
  max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#view-customers .pend-candidates{font-size:11.5px;color:var(--txt-3)}
#view-customers .pend-pick{border:1px solid #dcdad4;border-radius:9px;padding:4px 8px;
  background:var(--card);max-width:220px}
#view-customers .ano-reason{color:var(--txt-2);font-size:12px}

/* 数据异常清单区须能承载百条量级：清单主体固定高度可滚动，配合翻页 */
#view-customers #anomaly-list{max-height:320px;overflow-y:auto}
#view-customers #pending-list{max-height:320px;overflow-y:auto}

#view-customers .hint,
#view-owner-admin .hint{font-size:12px;color:var(--txt-3);margin:6px 0 10px;line-height:1.7}

/* 视图内内联消息位（含 .warn 变体）同属提示语义 → B 版告警橙（demo:318）*/
#view-customers .inline-msg,
#view-owner-admin .inline-msg{font-size:12.5px;color:#c75a00;background:#fff3e8;
  border:none;border-radius:9px;padding:7px 12px;margin-bottom:12px}
#view-customers .inline-msg.warn,
#view-owner-admin .inline-msg.warn{color:#c75a00;background:#fff3e8;border:none}
#view-customers .inline-msg:empty,
#view-owner-admin .inline-msg:empty{display:none}

/* 人员管理·权限 */
#view-owner-admin .frow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:14px}
#view-owner-admin .frow input,#view-owner-admin .frow select{border:1px solid #dcdad4;
  border-radius:9px;padding:6px 9px;background:var(--card)}
#view-owner-admin .owner-name{width:120px;border:1px solid #dcdad4;border-radius:9px;
  padding:4px 7px}
#view-owner-admin .owner-role{border:1px solid #dcdad4;border-radius:9px;padding:4px 7px;
  background:var(--card)}
#view-owner-admin .owner-scope{font-size:11.5px;color:var(--txt-2)}
#view-owner-admin .owner-openid{font-size:11.5px}

/* 弹层（备注编辑 / 删除二次确认）—— 走全局 .mask / .modal 口径 */
#view-customers .modal-mask,
#view-owner-admin .modal-mask{position:fixed;inset:0;background:rgba(35,30,20,.42);
  backdrop-filter:blur(1px);
  display:flex;align-items:flex-start;justify-content:center;z-index:100;padding:60px 16px}
/* 只留本视图特有的宽度约束；背景 / 圆角 / 阴影一律由全局 .modal-box 单点掌管，
   ⛔ 作用域内不得再声明圆角（那会让全局检查绿而真实渲染错）。*/
#view-customers .modal-box,
#view-owner-admin .modal-box{max-width:640px}
#view-customers .modal-box h4,
#view-owner-admin .modal-box h4{font-size:16px;color:#23262b;
  font-weight:650;margin-bottom:12px}
#view-customers .modal-box textarea{width:100%;min-height:120px;border:1px solid #dcdad4;
  border-radius:9px;padding:10px;font-size:12px;line-height:1.7}
#view-customers .modal-box .m-actions,
#view-owner-admin .modal-box .m-actions{display:flex;justify-content:flex-end;gap:10px;
  margin-top:14px}

/* ============================================================
 * W1-S3 监控看板视图群样式（视觉基线同为 demo B 版覆盖层 demo:323-365）
 * ============================================================ */

/* ── 驾驶舱栅格 ── demo:324-327 */
.ck-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px;margin-bottom:14px}
.ck-grid .card{margin-bottom:0}
.ck3{grid-column:span 3}.ck4{grid-column:span 4}.ck5{grid-column:span 5}
.ck6{grid-column:span 6}.ck12{grid-column:span 12}
@media(max-width:1100px){.ck3,.ck4,.ck5,.ck6{grid-column:span 12}}

/* ── 读数卡：品牌蓝只留给唯一主读数（本期达成），其余用深墨 ── demo:328-333 */
.ckcard .big{font-size:26px;font-weight:700;color:#3370ff;font-variant-numeric:tabular-nums}
.ckcard .big.ink{color:#23262b}
.ckcard .big.neg{color:#cb2a2a}
.ck-state{display:inline-block;font-size:11px;padding:1px 8px;border-radius:999px;
          margin-left:8px;vertical-align:3px}
.ck-state.pos{background:#eaf8ec;color:#00781b}
.ck-state.neg{background:#feecec;color:#cb2a2a}
.ck-state.mid{background:#f0f0ec;color:#5d636b}
.ck-sub{font-size:12px;color:#5d636b;line-height:1.7}
.ck-note{font-size:11px;color:#7c828b;margin-top:6px}
.ck-caps{display:flex;gap:18px;font-size:12px;color:#5d636b;margin-top:8px;flex-wrap:wrap}
.ck-caps b{font-variant-numeric:tabular-nums;color:#23262b}
.ck-foot{display:flex;gap:10px;margin-top:10px}

/* ── 子弹图：实际条＋目标刻度＋序时应达虚线 ── demo:334-339 */
.ckb{position:relative;height:16px;margin:10px 0 6px}
.ckb-rail{position:absolute;left:0;right:0;top:4px;bottom:4px;background:#ece7dd;border-radius:4px}
.ckb-bar{position:absolute;top:4px;bottom:4px;left:0;background:#23262b;
         border-radius:4px;min-width:2px}
.ckb-bar.ok{background:#00b42a}
.ckb-bar.bad{background:#f53f3f}
.ckb-t{position:absolute;top:0;bottom:0;width:2px;background:#23262b;box-shadow:0 0 0 2px #fffefb}
.ckb-p{position:absolute;top:-2px;bottom:-2px;width:0;border-left:2px dashed #7c828b}

/* ── 人员对比行 ── demo:341-347 */
.ckcrew-row{display:flex;align-items:center;gap:12px;padding:9px 6px;
            border-bottom:1px solid #f0ede6;cursor:pointer;border-radius:6px}
.ckcrew-row:hover{background:#f6f4ef}
.ckcrew-row:last-child{border-bottom:none}
.ckcrew-name{width:170px;flex:none;font-size:13px}
.ckcrew-mid{flex:1;min-width:0}
.ckcrew-val{width:138px;flex:none;text-align:right;font-size:13px;font-variant-numeric:tabular-nums}  /* demo:346 */
.ckcrew-val .pos{color:#00781b}
.ckcrew-val .neg{color:#cb2a2a}
.alert-badge{display:inline-block;margin-left:6px;font-size:11px;background:#fff3e8;
             color:#c75a00;border-radius:999px;padding:0 7px}     /* demo:348 */

/* ── 关注清单行：严重度竖条＋sparkline＋chevron ── demo:349-360 */
.ckal-row{display:flex;align-items:center;gap:10px;padding:8px 8px 8px 0;
          border-bottom:1px solid #f0ede6;cursor:pointer;border-radius:6px}
.ckal-row:hover{background:#f6f4ef}
.ckal-row:last-child{border-bottom:none}
.ckal-row:hover .ckal-go{color:#3370ff}
.ckal-sev{width:4px;align-self:stretch;border-radius:2px;flex:none}
.ckal-name{width:200px;flex:none;font-size:13px}
.ckal-owner{width:64px;flex:none;font-size:12px;color:#5d636b}
.ckal-why{flex:1;min-width:0;font-size:12px;color:#454b53}
.ckal-why .tag{display:inline-block;background:#f0ede6;border-radius:4px;padding:0 6px;margin:1px 4px 1px 0}
.ckal-num{width:118px;flex:none;text-align:right;font-size:12px;
          font-variant-numeric:tabular-nums;line-height:1.5}
.ckal-spark{width:96px;flex:none}
.ckal-go{width:16px;flex:none;color:#7c828b;font-size:15px}

/* ── 明细工作列表 ── demo:365 */
.detail-mode-bar{display:flex;align-items:center;gap:10px;margin-bottom:12px}

/* ── 人员工作台达成总账 ── demo:270-277（B 版把 A 版的深底金线总账改为白卡）*/
.ledger{background:var(--card);border:1px solid var(--line);border-radius:10px;
        color:#23262b;padding:22px 26px 18px;margin-bottom:18px;box-shadow:var(--sh1);position:relative;overflow:hidden}
.ledger::after{display:none}
.ledger .lg-title{color:#3370ff;font-weight:650;letter-spacing:.35em;font-size:13px;margin-bottom:16px;font-family:var(--serif)}
.ledger .seal-tag{border:none;background:#fff3e8;color:#c75a00}    /* demo:278 */
/* KPI 五列栅格与数字分级取自 demo:126/133（A 版版式，B 版未覆写该两项，只覆写配色）*/
.kpis{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:0}
.kpi{padding:0 22px;border-left:1px solid #f0ede8}                 /* demo:273 */
.kpi:first-child{border-left:none;padding-left:0}
.kpi .lab{font-size:11px;color:#7c828b;letter-spacing:.1em;margin-bottom:6px;white-space:nowrap}
.kpi .val{font-size:26px;font-weight:650;color:#23262b;white-space:nowrap}  /* demo:137 字号 / demo:275 配色 */
.kpi.main .val{font-size:38px;color:#3370ff}                       /* demo:138 字号 / demo:276 配色 */
.kpi .sub{font-size:11px;color:#7c828b;margin-top:4px;white-space:nowrap}
.kpi .val .u{font-size:14px;color:#7c828b;font-weight:400}
.diag-row{border-top:1px solid #f0ede8;margin-top:16px;padding-top:12px;
          display:flex;flex-wrap:wrap;gap:30px;font-size:12px;color:#5d636b;align-items:baseline}
.diag-row .dlab{color:#7c828b;font-size:11px;letter-spacing:.1em}
.diag-row .item{color:#5d636b;font-size:12.5px;font-family:var(--mono);font-variant-numeric:tabular-nums}
.diag-row .item b{color:#23262b;font-variant-numeric:tabular-nums;font-weight:600}

/* ── 客户分析 ── demo:283-289、demo:311-313 */
.crumbs{display:flex;align-items:center;gap:12px;margin-bottom:14px;font-size:13px;color:var(--txt-2)}
.crumbs b{color:#23262b;font-family:var(--serif)}
.profile .pf-name{font-size:20px;font-weight:650;color:#23262b;font-family:var(--serif)}
.pf-kpis{display:flex;flex-wrap:wrap;gap:0;margin-top:12px}
.pf-kpi{display:flex;flex-direction:column;padding:2px 22px;border-left:1px solid var(--line)}
.pf-kpi .lab{font-size:11px;color:var(--txt-3);letter-spacing:.08em;white-space:nowrap}
.pf-kpi .val{font-size:22px;font-weight:600;color:#23262b;margin-top:3px}  /* demo:162 */
.pf-kpi .val.neg{color:#cb2a2a}
.pnl{border:1px solid var(--line);border-radius:12px;background:var(--card);padding:10px 12px 6px;box-shadow:var(--sh1)}                      /* demo:285 */
.pnl-h{display:flex;justify-content:space-between;align-items:baseline;font-size:12.5px;
       color:#23262b;font-weight:600;margin-bottom:4px;gap:8px;flex-wrap:wrap}
.pnl-h .dlt{font-weight:400;color:var(--txt-2);font-variant-numeric:tabular-nums;font-size:11.5px;font-family:var(--mono)}
.pnl-h .dlt .pos{color:#009a23}
.pnl-h .dlt .neg{color:#cb2a2a}
.chips{display:inline-flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:3px 11px;font-size:12px;color:var(--txt-2);background:var(--card);cursor:pointer;align-items:center;gap:6px}
.chip.on{border-color:#3370ff;color:#245bbd;background:#eef3ff;font-weight:600}  /* demo:284 */
.chip[aria-disabled="true"]{opacity:.5}
.chart-note{font-size:11.5px;color:var(--txt-3);margin-top:6px}
.cust-link{color:#3370ff;cursor:pointer}                           /* demo:264 */
.cust-link:hover{color:#2b5dd4;text-decoration:underline}

/* ── 配置管理 · 指标与目标管理 ── */
.frow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;margin-top:6px;margin-bottom:8px}
.frow input,.frow select{border:1px solid #dcdad4;border-radius:9px;padding:6px 9px;background:var(--card)}
.frow input.w-s{width:90px}
.hint{font-size:12px;color:var(--txt-2);line-height:1.8}
.mini-list{list-style:none;margin-top:8px;font-size:12.5px}
.mini-list li{padding:6px 2px;border-bottom:1px dashed var(--line);
              display:flex;align-items:center;gap:8px;flex-wrap:wrap;list-style:none}
.mini-list li:last-child{border-bottom:none}
.seal-tag{display:inline-block;border:none;background:#fff3e8;color:#c75a00;border-radius:999px;
          padding:1px 8px;font-size:10.5px;font-weight:600;margin-left:4px;white-space:nowrap} /* demo:253 */
.empty-tip{color:#7c828b;font-size:12.5px;line-height:1.8;padding:14px 0;text-align:center}         /* demo:319 */

/* 不可用面板（数据源层面不具备，非加载失败）：灰底 + 明确状态标签 + 成句缘由。
   ⛔ 不用空白或转圈 —— 那两种都会被读成「还在加载」。 */
.pnl-na{background:#faf9f6;border-style:dashed}
.pnl-na .na-tag{font-size:11px;background:#f0ede8;color:#7c828b;
                border-radius:999px;padding:1px 9px;font-weight:500}
.pnl-na .na-body{font-size:12px;color:#7c828b;line-height:1.85;margin-top:6px}
.total-row td{border-top:1.5px solid #dcdad4;font-weight:600}       /* demo:263 */
.subtotal-row td{background:#f6f4ef;font-weight:600;color:#23262b;
                 border-bottom:1.5px solid #dcdad4}                 /* demo:291 */
tr.subtotal-row:hover td{background:#f6f4ef}                        /* demo:292 */
.grp-row td,tr.grp-row:hover td{background:#f6f4ef;color:#23262b;font-weight:600}   /* demo:262/288 */
.dot{background:#00b42a;display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px}.dot.bad{background:#f53f3f}                /* demo:317 */

/* ============================================================
 * W2-S2 视图作用域样式（客户分析）
 * ⚠️ 归属纪律：本段只写 #view-customer-analysis 作用域内的规则，
 *    ⛔ 不改全局基类与 :root（那是 W2-S1 独占面），
 *    取值一律取 demo B 版覆盖层（B 版未覆写的属性回落 A 版基座）。
 * ========================================================== */

/* 可点击的客户胶囊 —— demo:122（A 版基座给结构）＋ demo:269（B 版覆写底色与 999px 圆角）。
   落点：客户分析空态的「最近查看」（demo:2213 的 openDetail 穿透按钮）。 */
#view-customer-analysis .cust-pill{display:inline-block;border:none;cursor:pointer;
  background:#f0ede8;border-radius:999px;padding:1px 8px;font-size:11.5px;
  color:var(--txt-2);margin:2px 3px 2px 0;font-family:inherit}
#view-customer-analysis .cust-pill:hover{color:#3370ff}

/* 负数的红色括号记法 —— demo:186（A 版）＋ demo:320（B 版覆写为 #cb2a2a）。
   落点：分类明细表的净收入列与合计行（demo:1394 fmtParen）。
   ⚠️ W2-S3 前置依赖：决策 31 允许单日净额为负，缺此样式负值无法按 demo 形态呈现。 */
#view-customer-analysis .paren-neg{color:#cb2a2a}

/* 图表图例 —— demo:171-173。落点：四联面板下方的 #dlegend（demo:613）。 */
#view-customer-analysis .legend{display:flex;gap:16px;flex-wrap:wrap;
  font-size:12px;color:var(--txt-2);margin-top:8px}
#view-customer-analysis .legend .li{display:inline-flex;align-items:center;gap:6px}
#view-customer-analysis .legend .sw{width:10px;height:10px;border-radius:2px;display:inline-block}

/* 悬浮提示浮层的【定位上下文】（W2-S2 第 3 轮复核 CR2-01 / ADV3-02 / EC2-02）。
   ⚠️ 这是本 Story 唯一一条非 #view-xxx 作用域的追加规则，已在台账 ESC-11 登记：
     #dtip 是 position:absolute（A 版 demo:174，B 版未覆写故按决策 21 回落），
     而全仓 position:relative 只有 .gsearch / .ckb / .ledger 三处，无一是它的祖先，
     absolute 于是解析到页面原点，浮层落点偏掉约「一个侧栏宽 + 一个页头高」。
     demo 靠 demo:604 的 #dpanels（style="position:relative"）提供这个上下文。
   本层 fixed 铺满视口且 pointer-events:none（⛔ 不挡住底下图元的鼠标事件），
   故 #dtip 的 left/top 可直接用 clientX / clientY，⛔ 无需再做 rect 换算。 */
#dtip-layer{position:fixed;inset:0;pointer-events:none;z-index:50}