/* 客户库（/library?tab=customers）独有的样式。骨架（三栏、左树、表格、分页、抽屉）
   全部复用 library.css 的 lb-*；这里只写客户库特有的：节奏胶囊、复盘抽屉里的小表和时间线。
   零裸色值、零 :root，只引用 tokens.css 的语义层（tests/test_ui_standard.py 守着）。 */

/* 复盘抽屉里有一张 7 列的小表，360 的窄抽屉塞不下，用 640 那一档 */
.cu-body.with-detail { grid-template-columns: var(--w-nav-panel) 1fr var(--drawer-lg); }

.cu-note {
  font-size: var(--fs-xs); color: var(--text-muted); line-height: var(--lh-xs);
  padding: var(--sp-2) var(--sp-3); background: var(--surface-sunken); border-radius: var(--radius-sm);
}
.cu-note a { color: var(--accent); }

.cu-group-title { margin: var(--sp-3) var(--sp-2) var(--sp-1); }
.cu-more {
  border: 0; background: none; color: var(--accent); font-size: var(--fs-xs); cursor: pointer;
  padding: var(--sp-1) var(--sp-3); text-align: left; width: 100%;
}
.cu-more:hover { text-decoration: underline; }

/* 节奏 / 品状态胶囊：颜色只表达「要不要管」——绿=不用管，黄=该动手，红=快丢了，蓝=刚发生，灰=没信息 */
.cu-pill {
  display: inline-block; padding: 1px var(--sp-2); border-radius: var(--radius-full);
  font-size: var(--fs-xs); line-height: var(--lh-xs); border: 1px solid var(--border); white-space: nowrap;
  background: var(--surface-sunken); color: var(--text-secondary);
}
.cu-pill[data-rhythm="new"],  .cu-pill[data-product="shipped"] { background: var(--info-bg);    color: var(--info-fg);    border-color: var(--info-border); }
.cu-pill[data-rhythm="active"], .cu-pill[data-product="repeat"] { background: var(--success-bg); color: var(--success-fg); border-color: var(--success-border); }
.cu-pill[data-rhythm="due"],  .cu-pill[data-product="pending"] { background: var(--warning-bg); color: var(--warning-fg); border-color: var(--warning-border); }
.cu-pill[data-rhythm="gone"], .cu-pill[data-product="stopped"] { background: var(--danger-bg);  color: var(--danger-fg);  border-color: var(--danger-border); }

.cu-reason { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; white-space: nowrap; }
/* 名单「关注」格的理由（10-24 带了和前 12 个月比，变长）：折行、最多三行，全文在悬停里 */
.cu-reason.cu-freason { white-space: normal; min-width: 24ch; max-width: 36ch; display: -webkit-box; -webkit-line-clamp: 3;
  -webkit-box-orient: vertical; overflow: hidden; }
.cu-name { max-width: 22ch; }
.cu-top { max-width: 24ch; color: var(--text-secondary); }
.cu-flag {
  display: inline-block; margin-left: var(--sp-1); font-size: var(--fs-xs); color: var(--warning-fg);
  background: var(--warning-bg); border: 1px solid var(--warning-border); border-radius: var(--radius-full); padding: 0 var(--sp-2);
}
.cu-sup { color: var(--warning-fg); font-size: var(--fs-xs); }

/* 抽屉：节奏卡 */
.cu-rhythm-card[data-rhythm="due"]  { border-color: var(--warning-border); background: var(--warning-bg); }
.cu-rhythm-card[data-rhythm="gone"] { border-color: var(--danger-border);  background: var(--danger-bg); }
.cu-rhythm-line { margin: 0 0 var(--sp-2); font-size: var(--fs-sm); display: flex; gap: var(--sp-2); align-items: center; }
.cu-advice { margin: 0; font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--text-primary); }
.cu-advice + .cu-advice { margin-top: var(--sp-1); }

/* 抽屉：买过的品（小表）*/
.cu-mini { width: 100%; border-collapse: collapse; font-size: var(--fs-xs); }
.cu-mini th {
  text-align: left; color: var(--text-muted); font-weight: 500; padding: var(--sp-1) var(--sp-2);
  border-bottom: 1px solid var(--border-subtle); white-space: nowrap;
}
.cu-mini td { padding: var(--sp-2); border-bottom: 1px solid var(--border-subtle); vertical-align: top; }
.cu-mini tr:last-child td { border-bottom: 0; }
.cu-mini .lb-num { text-align: right; }
.cu-mini a { color: var(--accent); }
.cu-pname { display: block; max-width: 20ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cu-sub { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; }
/* 判定依据直接摆在页面上（2026-09-26 老板：光悬停不够）：状态下面一行事实、标题下可展开的规则原文，文字都来自后端 */
.cu-why { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; white-space: normal; min-width: 9em; }
.cu-rules { margin: 0 0 var(--sp-2); font-size: var(--fs-xs); color: var(--text-secondary); }
.cu-rules summary { cursor: pointer; color: var(--accent); width: max-content; }
.cu-rules ul { margin: var(--sp-1) 0 0; padding-left: var(--sp-4); display: grid; gap: var(--sp-1); line-height: var(--lh-sm); }
.cu-p-stopped .cu-pname { color: var(--danger-fg); }

/* 抽屉：订单时间线 */
.cu-orders { list-style: none; margin: 0; padding: 0; }
.cu-order { padding: var(--sp-2) 0; border-bottom: 1px solid var(--border-subtle); font-size: var(--fs-sm); }
.cu-order:last-child { border-bottom: 0; }
.cu-order-head { display: flex; gap: var(--sp-3); align-items: baseline; flex-wrap: wrap; }
.cu-order-ship { color: var(--text-secondary); }
.cu-order-amt { margin-left: auto; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- 第二轮（2026-09-23）：关注列 / 分层 / 缩略图 / 总览
   零裸色值、零 :root（tests/test_ui_standard.py 守着）。图表色只用 tokens.css 里的 --chart-*。 */

.lb-toolbar-left { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; flex: none; }
/* 抽屉开着时中栏只剩五百来像素：搜索框让位，别把「总览 / 名单」挤成两行 */
#cu-tools { flex: 1; min-width: 0; justify-content: flex-end; }
#cu-tools .lb-search { flex: 1; min-width: 120px; max-width: 260px; }
.cu-views { width: 132px; flex: none; }
.cu-views button { padding: 0 var(--sp-3); }

/* 关注胶囊：黄=该动手（复购窗口），红=快丢了（流失风险）。群动态按类型上色，只在文字上 */
.cu-pill[data-focus="repurchase"] { background: var(--warning-bg); color: var(--warning-fg); border-color: var(--warning-border); }
.cu-pill[data-focus="churn"]      { background: var(--danger-bg);  color: var(--danger-fg);  border-color: var(--danger-border); }
/* 还在下·部分停了（10-24 Edmond）：不算流失，用中性底 + 黄字——比复购窗口轻、比流失红轻 */
.cu-pill[data-focus="partial"]    { background: var(--surface-sunken); color: var(--warning-fg); border-color: var(--warning-border); }
.cu-pill[data-kind="risk"]    { background: var(--danger-bg);  color: var(--danger-fg);  border-color: var(--danger-border); }
.cu-pill[data-kind="intent"]  { background: var(--success-bg); color: var(--success-fg); border-color: var(--success-border); }
.cu-pill[data-kind="order"]   { background: var(--info-bg);    color: var(--info-fg);    border-color: var(--info-border); }
.cu-rhythm-line .cu-pill + .cu-pill { margin-left: var(--sp-1); }

.cu-sig { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 26ch; }
.cu-sig[data-kind="risk"]   { color: var(--danger-fg); }
.cu-sig[data-kind="intent"] { color: var(--success-fg); }
.cu-advice-sig { border-left: 3px solid var(--border-strong); padding-left: var(--sp-2); }
.cu-advice-sig[data-kind="risk"]   { border-left-color: var(--danger-fg); }
.cu-advice-sig[data-kind="intent"] { border-left-color: var(--success-fg); }
/* 同名档还在下单、这个档不报流失（10-24 反馈 #91） */
.cu-advice-same { border-left: 3px solid var(--info-fg); padding-left: var(--sp-2); }
.cu-same-open { color: var(--accent); white-space: nowrap; }
.cu-same { color: var(--info-fg); cursor: help; }

/* 分层角标：A 用主色软底，B 用中性底，C 不显示（长尾不需要被强调） */
.cu-name-cell { display: flex; align-items: center; gap: var(--sp-1); min-width: 0; }
.cu-tier {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 18px; height: 18px; border-radius: var(--radius-sm); font-size: var(--fs-xs); font-weight: 700;
  border: 1px solid var(--neutral-border); background: var(--neutral-bg); color: var(--neutral-fg);
}
.cu-tier[data-tier="A"] { background: var(--accent-soft-bg); color: var(--accent-soft-fg); border-color: var(--accent-soft-border); }

/* 缩略图：与商品库 lb-thumb 同尺寸；抽屉里放大一档 */
.cu-thumb {
  width: 24px; height: 24px; object-fit: cover; flex: none; cursor: zoom-in;
  border-radius: 3px; border: 1px solid var(--border-subtle); background: var(--surface-sunken); display: inline-block; vertical-align: middle;
}
.cu-thumb-none {
  width: 24px; height: 24px; flex: none; display: inline-block; vertical-align: middle;
  border-radius: 3px; border: 1px dashed var(--border); background: var(--surface-sunken);
}
.cu-thumb.cu-thumb-lg, .cu-thumb-none.cu-thumb-lg { width: 40px; height: 40px; }
.cu-col-thumb { width: 1%; padding-right: 0 !important; }
.cu-items { display: flex; gap: var(--sp-2); align-items: center; min-width: 0; }
.cu-item { display: inline-flex; align-items: center; gap: var(--sp-1); min-width: 0; }
.cu-item-name { max-width: 9ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary); }

/* 看大图：点任意处关 */
.cu-lightbox {
  position: fixed; inset: 0; z-index: var(--z-modal); background: var(--overlay);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-3); cursor: zoom-out;
}
.cu-lightbox img { max-width: min(90vw, 900px); max-height: 80vh; object-fit: contain; background: var(--surface); border-radius: var(--radius-md); box-shadow: var(--shadow-3); }
.cu-lightbox p { margin: 0; color: var(--text-on-accent); font-size: var(--fs-sm); }

/* 悬浮提示（总览的柱子和热力格用） */
.cu-tip {
  position: fixed; z-index: var(--z-toast); pointer-events: none;
  background: var(--text-primary); color: var(--surface); font-size: var(--fs-xs); line-height: var(--lh-xs);
  padding: var(--sp-1) var(--sp-2); border-radius: var(--radius-sm); box-shadow: var(--shadow-2); white-space: nowrap;
}

/* ---------------------------------------------------------------- 总览 */

.cu-board { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: var(--sp-4); padding-bottom: var(--sp-4); }
.cu-card { background: var(--surface); }
.cu-card h3 .lb-dim { font-weight: 400; }
.cu-hint { margin: var(--sp-2) 0 0; font-size: var(--fs-xs); color: var(--text-muted); line-height: var(--lh-xs); }

/* 10-24 加了「还在下·部分停了」一块，九块要在 1600 宽的屏上排一行：最小宽 150 → 124 */
.cu-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(124px, 1fr)); gap: var(--sp-3); }
.cu-tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--sp-3); min-width: 0; }
.cu-tile.is-link { cursor: pointer; }
.cu-tile.is-link:hover { background: var(--surface-hover); }
.cu-tile-label { font-size: var(--fs-xs); color: var(--text-muted); }
.cu-tile-value { font-size: var(--fs-xl); font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 2px; }
.cu-tile-sub { font-size: var(--fs-xs); color: var(--text-secondary); margin-top: 2px; }
.cu-tile[data-tone="warning"] { border-color: var(--warning-border); background: var(--warning-bg); }
.cu-tile[data-tone="warning"] .cu-tile-value { color: var(--warning-fg); }
.cu-tile[data-tone="danger"]  { border-color: var(--danger-border);  background: var(--danger-bg); }
.cu-tile[data-tone="danger"] .cu-tile-value { color: var(--danger-fg); }
.cu-tile[data-tone="info"]    { border-color: var(--info-border);    background: var(--info-bg); }
.cu-tile[data-tone="info"] .cu-tile-value { color: var(--info-fg); }

.cu-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); align-items: start; }
.cu-grid2 > .cu-grid-main { grid-column: span 1; }
.cu-grid2:has(.cu-grid-main) { grid-template-columns: 3fr 2fr; }

/* 金字塔：三层居中、上窄下宽是示意（真实占比在层内的两条线上），层可点进名单 */
.cu-pyramid { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); }
.cu-layer {
  border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--sp-2) var(--sp-3);
  background: var(--surface-sunken); cursor: pointer; width: 100%;
}
.cu-layer:hover { background: var(--surface-hover); }
.cu-layer[data-tier="A"] { width: 72%; background: var(--accent-soft-bg); border-color: var(--accent-soft-border); }
.cu-layer[data-tier="B"] { width: 86%; }
.cu-layer-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2); }
.cu-layer-nums { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); margin-top: var(--sp-1); font-size: var(--fs-xs); color: var(--text-secondary); }
.cu-layer-nums b { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.cu-layer-nums i { font-style: normal; color: var(--text-muted); }
.cu-layer-bars { display: flex; flex-direction: column; gap: 2px; margin-top: var(--sp-2); }
.cu-bar-line { display: block; height: 4px; background: var(--chart-grid); border-radius: var(--radius-full); overflow: hidden; }
.cu-bar-line i { display: block; height: 100%; background: var(--chart-seq-3); border-radius: var(--radius-full); }
.cu-bar-line.cu-bar-amt { height: 8px; }
.cu-bar-line.cu-bar-amt i { background: var(--chart-1); }
.cu-layer-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); font-size: var(--fs-xs); }

.cu-chip {
  border: 1px solid var(--border-control); background: var(--surface); cursor: pointer; font-family: inherit;
  border-radius: var(--radius-full); padding: 0 var(--sp-2); font-size: var(--fs-xs); line-height: 18px; color: var(--text-secondary);
}
.cu-chip:hover { background: var(--surface-hover); }
.cu-chip[data-tone="danger"]  { background: var(--danger-bg);  color: var(--danger-fg);  border-color: var(--danger-border); }
.cu-chip[data-tone="warning"] { background: var(--warning-bg); color: var(--warning-fg); border-color: var(--warning-border); }
.cu-chip[data-tone="info"]    { background: var(--info-bg);    color: var(--info-fg);    border-color: var(--info-border); }
.cu-chip small { font-size: inherit; opacity: .8; }

/* 复购到期：横条按客户数 */
.cu-rows { display: flex; flex-direction: column; gap: var(--sp-2); }
.cu-row { display: grid; grid-template-columns: 9em 1fr auto; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); padding: 2px 0; border-radius: var(--radius-sm); }
.cu-row.is-link { cursor: pointer; }
.cu-row.is-link:hover { background: var(--surface-hover); }
.cu-row-label { color: var(--text-secondary); }
.cu-row-bar { display: block; height: 10px; background: var(--chart-grid); border-radius: var(--radius-full); overflow: hidden; }
.cu-row-bar i { display: block; height: 100%; background: var(--chart-1); border-radius: var(--radius-full); min-width: 2px; }
.cu-row-val { color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cu-row-val b { color: var(--text-primary); }

/* 总览里的小表：行可点进名单 */
.cu-table-wrap { overflow: auto; }
/* 表头往下滚也一直在（2026-09-26）：customers.js 量过横向放得下的表加 .fits 去掉 overflow，表头贴在总览栏顶部；
   放不下的保持横向可滚、表头不跟。separate 是为了 sticky 的 th 不丢底边（抽屉里的 .cu-mini 小表不动）。 */
.cu-table-wrap.fits { overflow: visible; }
.cu-mini.cu-table { border-collapse: separate; border-spacing: 0; }
.cu-table-wrap.fits .cu-table th { position: sticky; top: 0; z-index: 1; background: var(--surface); }
.cu-table tbody tr.is-link { cursor: pointer; }
.cu-table tbody tr.is-link:hover td { background: var(--surface-hover); }
.cu-table td, .cu-table th { white-space: nowrap; }

/* 月度节奏：堆叠柱，复购在下（主色）、首单在上（中性），段间 2px 留白，顶端圆角 */
.cu-legend { display: flex; gap: var(--sp-4); font-size: var(--fs-xs); color: var(--text-secondary); margin-bottom: var(--sp-2); }
.cu-legend span { display: inline-flex; align-items: center; gap: var(--sp-1); }
.cu-sw { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.cu-sw-repeat { background: var(--chart-1); }
.cu-sw-first { background: var(--chart-8); }
.cu-chart { display: flex; align-items: flex-end; gap: 3px; height: 150px; border-bottom: 1px solid var(--chart-axis); padding-bottom: 18px; position: relative; }
.cu-col { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; position: relative; }
.cu-col:hover .cu-seg { opacity: .8; }
.cu-stack { flex: 1; display: flex; flex-direction: column-reverse; justify-content: flex-start; gap: 2px; min-height: 0; }
.cu-seg { display: block; width: 100%; min-height: 0; }
.cu-seg-repeat { background: var(--chart-1); }
.cu-seg-first { background: var(--chart-8); }
.cu-stack .cu-seg:last-child { border-radius: 4px 4px 0 0; }
/* 月份标签比柱子宽，居中放、允许溢出——裁掉就成了「25/0」 */
.cu-col-label { position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%); font-size: var(--fs-xs); color: var(--text-muted); white-space: nowrap; }
.cu-chart-season { height: 120px; }

/* 国家 × 月份热力：一色由浅到深（--chart-seq-*），空格子只有网格色 */
.cu-heatmap { margin-top: var(--sp-3); }
.cu-heatmap td { padding: 2px var(--sp-2); border-bottom: 0; }
.cu-heat-name { width: 1%; white-space: nowrap; color: var(--text-secondary); }
.cu-heat-row { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; }
.cu-heat { display: block; height: 14px; border-radius: 2px; background: var(--chart-grid); }
.cu-heat[data-step="1"] { background: var(--chart-seq-1); }
.cu-heat[data-step="2"] { background: var(--chart-seq-2); }
.cu-heat[data-step="3"] { background: var(--chart-seq-3); }
.cu-heat[data-step="4"] { background: var(--chart-seq-4); }
.cu-heat[data-step="5"] { background: var(--chart-seq-5); }

@media (max-width: 1100px) {
  .cu-grid2, .cu-grid2:has(.cu-grid-main) { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- 第三轮（2026-09-23 夜）：类型 / 平台 / 投入产出 / 今日提醒 */

.cu-views { width: auto; min-width: 228px; }
.cu-views button { white-space: nowrap; padding: 0 var(--sp-3); }
.cu-pill[data-focus="one_big"] { background: var(--info-bg); color: var(--info-fg); border-color: var(--info-border); }
.cu-tier[data-tier="B"] { background: var(--success-bg); color: var(--success-fg); border-color: var(--success-border); }
.cu-raw { font-size: var(--fs-xs); color: var(--text-muted); white-space: normal; }
.cu-layer-plats { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-1); font-size: var(--fs-xs); color: var(--text-muted); }

/* 投入产出：一行一年，投入是手填的 */
.cu-roi input {
  width: 120px; height: var(--ctl-h-sm); border: 1px solid var(--border-control); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text-primary); font-family: inherit; font-size: var(--fs-xs); padding: 0 var(--sp-2);
  text-align: right; font-variant-numeric: tabular-nums;
}
.cu-roi input:focus { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.cu-roi .lb-btn { height: var(--ctl-h-sm); font-size: var(--fs-xs); padding: 0 var(--sp-2); }
.cu-roi-big { font-size: var(--fs-md); font-weight: 600; }

/* 今日提醒：上面管理层一张表，下面每个业务员一组卡 */
.cu-mgr td.lb-num b { font-variant-numeric: tabular-nums; }
.cu-owner-block { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); padding: var(--sp-3); }
.cu-owner-head { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.cu-owner-head h3 { margin: 0; font-size: var(--fs-md); }
.cu-owner-head .lb-dim { font-size: var(--fs-xs); }
.cu-dcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: var(--sp-3); }
.cu-dcard { border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--sp-3); background: var(--surface-sunken); display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.cu-dcard[data-kind="risk"]   { border-color: var(--danger-border); background: var(--danger-bg); }
.cu-dcard[data-kind="churn"], .cu-dcard[data-kind="shrink"] { border-color: var(--warning-border); background: var(--warning-bg); }
.cu-dcard[data-kind="intent"] { border-color: var(--success-border); background: var(--success-bg); }
.cu-dcard-head { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.cu-dcard-head .cu-dname { font-weight: 600; font-size: var(--fs-sm); cursor: pointer; }
.cu-dcard-head .cu-dname:hover { color: var(--accent); text-decoration: underline; }
.cu-dmeta { font-size: var(--fs-xs); color: var(--text-muted); }
.cu-dreason { font-size: var(--fs-sm); color: var(--text-primary); margin: 0; }
.cu-dsec { font-size: var(--fs-xs); color: var(--text-secondary); }
.cu-dsec-title { color: var(--text-muted); margin-bottom: 2px; }
.cu-dsec ul { margin: 0; padding-left: var(--sp-4); }
.cu-dsec li { margin-bottom: 2px; }
.cu-dsec li b { color: var(--text-primary); font-weight: 600; }
.cu-dopener { font-size: var(--fs-sm); line-height: var(--lh-sm); border-left: 3px solid var(--accent); padding-left: var(--sp-2); margin: 0; background: var(--surface); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding-top: var(--sp-1); padding-bottom: var(--sp-1); }
.cu-drow { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.cu-drow .cu-item-name { max-width: 18ch; color: var(--text-primary); }
.cu-quote { border-left: 2px solid var(--border-strong); padding-left: var(--sp-2); color: var(--text-secondary); white-space: normal; }
.cu-dempty { border: 1px dashed var(--border); border-radius: var(--radius-md); padding: var(--sp-4); color: var(--text-muted); text-align: center; font-size: var(--fs-sm); }

/* 第四轮：投入产出按店铺、发样板面板 */
.cu-roi-total td { background: var(--surface-sunken); font-weight: 600; }
.cu-push-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-2); font-size: var(--fs-xs); }
.cu-push-opt { display: inline-flex; align-items: center; gap: var(--sp-1); }
.cu-push .lb-select { height: var(--ctl-h-sm); font-size: var(--fs-xs); }
.cu-push .lb-btn { height: var(--ctl-h-sm); font-size: var(--fs-xs); padding: 0 var(--sp-3); }
.cu-push-preview { white-space: pre-wrap; font-family: inherit; font-size: var(--fs-xs); line-height: var(--lh-sm); background: var(--surface-sunken); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--sp-3); margin: var(--sp-2) 0 0; max-height: 420px; overflow: auto; }

/* 老板 10-04：可视化——「今天没有要动的」换成空状态（shared/viz.css） */
.cu-dempty .sqv-empty { padding: 4px 0; }

/* 10-24 Edmond「对比一下过去的销售情况……让人更能够理解」：客户详情「和以前比」。
   一句结论（红 = 整个客户该下没下 / 黄 = 还在下·部分停了 / 绿 = 都还在下）→ 近 12 个月 vs 前 12 个月两根条 → 按型号分组 */
.cu-hverdict { margin: 0 0 var(--sp-2); font-size: var(--fs-sm); line-height: var(--lh-sm); font-weight: 600; padding: var(--sp-2);
  border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-sunken); color: var(--text-primary); }
.cu-hverdict[data-tone="danger"]  { background: var(--danger-bg);  border-color: var(--danger-border);  color: var(--danger-fg); }
.cu-hverdict[data-tone="warning"] { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning-fg); }
.cu-hverdict[data-tone="success"] { background: var(--success-bg); border-color: var(--success-border); color: var(--success-fg); }
.cu-hbars { display: flex; flex-direction: column; gap: var(--sp-1); }
.cu-hbar { display: grid; grid-template-columns: 6.5em 1fr auto; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); }
.cu-hbar-label { color: var(--text-secondary); }
.cu-hbar-track { display: block; height: 12px; background: var(--chart-grid); border-radius: var(--radius-full); overflow: hidden; }
.cu-hbar-track i { display: block; height: 100%; background: var(--chart-seq-3); border-radius: var(--radius-full); }
.cu-hbar.is-now .cu-hbar-track i { background: var(--chart-1); }
.cu-hbar-val { color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cu-hbar-val b { color: var(--text-primary); }
.cu-hchange[data-up="1"] { color: var(--success-fg); font-weight: 600; }
.cu-hchange[data-up="0"] { color: var(--danger-fg); font-weight: 600; }
.cu-hgroup { margin-top: var(--sp-3); border-left: 3px solid var(--border-strong); padding-left: var(--sp-2); }
.cu-hgroup[data-level="bad"]  { border-left-color: var(--danger-fg); }
.cu-hgroup[data-level="warn"] { border-left-color: var(--warning-fg); }
.cu-hgroup[data-level="info"] { border-left-color: var(--info-fg); }
.cu-hgroup-title { font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary); }
.cu-hgroup-hint { font-size: var(--fs-xs); color: var(--text-secondary); margin: 2px 0 0; }
.cu-hgroup ul { margin: var(--sp-1) 0 0; padding-left: var(--sp-4); font-size: var(--fs-xs); display: grid; gap: var(--sp-1); }
.cu-hgroup li b { color: var(--text-primary); }
.cu-hkeep { margin: var(--sp-3) 0 0; font-size: var(--fs-xs); color: var(--success-fg); }
.cu-hkeep[data-kind="churn"] { color: var(--text-secondary); }
.cu-hlink { display: inline-block; margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--accent); }
.cu-hist .cu-rules { margin-top: var(--sp-2); }
.cu-hist .cu-rules p { margin: var(--sp-1) 0 0; line-height: var(--lh-sm); }
/* 买过的品：「N 天没再买」后面跟返单页的判断（换代 = 蓝、同类在下别的 = 黄、真停了 = 红） */
.cu-verdict { display: inline-block; margin-top: 2px; font-size: var(--fs-xs); padding: 0 var(--sp-2); border-radius: var(--radius-full);
  border: 1px solid var(--border); color: var(--text-secondary); background: var(--surface-sunken); }
.cu-verdict[data-level="bad"]  { color: var(--danger-fg);  border-color: var(--danger-border);  background: var(--danger-bg); }
.cu-verdict[data-level="warn"] { color: var(--warning-fg); border-color: var(--warning-border); background: var(--warning-bg); }
.cu-verdict[data-level="info"] { color: var(--info-fg);    border-color: var(--info-border);    background: var(--info-bg); }
.cu-verdict[data-level="good"] { color: var(--success-fg); border-color: var(--success-border); background: var(--success-bg); }