/* 经营数据模块样式（从 test-business-data.html 的内联 <style> 抽出）
 *
 * **每条选择器都带 `.view-business ` 前缀，这不是风格，是必需。**
 * 这个模块要并进 index.html，而两边共引 css/main.css + css/components.css，
 * 有 14 条选择器逐字同名（.store-card / dist-* / order-* / distribution-section）。
 * 其中 `.store-card` 是真冲突：
 *     components.css:328  background: var(--slate-800)  8px 圆角   ← 组织架构页在用
 *     本模块              background: var(--navy)        12px 圆角
 * 加一层容器前缀把特异性从 (0,1,0) 抬到 (0,2,0)——既压过 components.css 的同名规则，
 * 又不会漏进组织架构页（那边没有 .view-business 祖先）。
 *
 * **改这个文件时别把前缀去掉**，去掉就会同时污染组织架构页的门店卡。
 *
 * 页面侧要求：模块 DOM 必须挂在一个带 class="view-business" 的元素里。
 *     test-business-data.html → <div class="container view-business">
 *     index.html              → 计划挂 #page-data
 *
 * 已挪走的两处：
 *   · `body { background: var(--slate-900) }` —— css/main.css:25 有逐字相同的一条，删掉
 *   · `:root { --rate-*, --text-muted }` —— 挪到 .view-business 上，作用域跟着模块走
 *     （这五个变量在模块外零引用）
 * 留在 test-business-data.html 内联的：.container / .header / .header-content /
 * .logo / .header-actions —— 测试页家具，不是模块样式，加前缀反而会失效。
 */

    









    

    /* ===== 语义色系统 =====
       净完成率四档，阈值在 businessDataStore.rateBands 配置：
         good 达标 / near 接近达标 / warn 偏低 / bad 严重偏低
       语义色只用于「数字」，进度条一律中性蓝，业务线只用小圆点。 */
    .view-business {
      --rate-good: #4FD1C5;   /* 达标 —— 青绿 */
      --rate-near: #94A3B8;   /* 接近 —— 中性灰，明确表达"未达标但在区间内" */
      --rate-warn: #F59E0B;   /* 偏低 —— 琥珀 */
      --rate-bad:  #EF4444;   /* 严重 —— 红 */
      --text-muted: #7A8699;  /* 三级说明文字：比 slate-300 弱，比 slate-600 可读 */
      /* 本模块的三级文字统一用 --text-muted，不要用 --slate-400：
         css/main.css 从来没定义过它（只有 900/800/700/600/300/100），
         引用会静默回落到继承色。css/components.css 里还剩一处引用，
         但那个文件属于组织架构页，按文件边界不能改，别照着它抄。 */
    }

    .view-business .rate-good { color: var(--rate-good); }
    .view-business .rate-near { color: var(--rate-near); }
    .view-business .rate-warn { color: var(--rate-warn); }
    .view-business .rate-bad  { color: var(--rate-bad); }
    .view-business .rate-none { color: var(--slate-600); }

    /* 业务线小圆点（低视觉权重的分类标识） */
    .view-business .line-dot {
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      margin-right: 0.5rem;
      flex-shrink: 0;
      vertical-align: 1px;
    }

    .view-business .dot-sky     { background: var(--sky); }
    .view-business .dot-cyan    { background: var(--cyan); }
    .view-business .dot-orange  { background: var(--orange); }
    .view-business .dot-amber   { background: var(--amber); }
    .view-business .dot-neutral { background: var(--slate-600); }

    /* L1: 核心 KPI 横条 —— 四张卡可点开，展开区在下方通栏 */
    .view-business .kpi-overview {
      margin-bottom: 2rem;
    }

    /* ---------- 顶部数字条 ----------
       原先这里是五张可展开的 KPI 卡。卡取消后这条只剩「常驻显示当前 scope 的关键数」
       一个职责，所以刻意做成一行文字而不是卡：不可点、无展开角标、无渐变底色。
       做成卡会让人以为能点开，而导航已经交给下面的模块条了。 */
    .view-business .scope-strip {
      background: var(--slate-800);
      border: 1px solid var(--slate-700);
      border-radius: 10px;
      padding: 0.75rem 1.125rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1.5rem;
      flex-wrap: wrap;
    }

    .view-business .scope-strip-title {
      font-size: 0.8125rem;
      color: var(--text-muted);
      font-weight: 500;
      flex-shrink: 0;
    }

    .view-business .scope-strip-items {
      display: flex;
      align-items: baseline;
      gap: 1.75rem;
      flex-wrap: wrap;
    }

    .view-business .scope-strip-item {
      display: flex;
      align-items: baseline;
      gap: 0.5rem;
    }

    .view-business .scope-strip-label {
      font-size: 0.75rem;
      color: var(--text-muted);
    }

    .view-business .scope-strip-value {
      font-size: 1.0625rem;
      font-weight: 700;
      color: var(--off-white);
      font-variant-numeric: tabular-nums;
    }

    /* ---------- 模块条（页面主轴）----------
       五个模块在三个视角下都全部显示，不按有没有数据过滤——模块条是导航骨架，
       逐个 scope 变形状会让人以为页面坏了。代价是每个模块都必须有实心空态。 */
    .view-business .module-nav {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 0.625rem;
      margin: 2rem 0 1.25rem;
    }

    .view-business .module-tab {
      position: relative;
      background: var(--slate-800);
      border: 1px solid var(--slate-700);
      border-radius: 10px;
      padding: 0.875rem 1rem 0.75rem;
      cursor: pointer;
      text-align: left;
      display: flex;
      flex-direction: column;
      gap: 0.3125rem;
      overflow: hidden;
      font-family: inherit;
      transition: border-color 0.15s ease, background 0.15s ease;
    }

    .view-business .module-tab::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 3px;
      background: var(--slate-600);
    }

    .view-business .module-tab:hover {
      border-color: var(--slate-600);
      background: var(--navy);
    }

    .view-business .module-tab.active {
      border-color: var(--sky);
      background: var(--navy);
    }

    .view-business .module-tab.active::before { background: var(--sky); }
    .view-business .module-tab.rate-good::before { background: var(--rate-good); }
    .view-business .module-tab.rate-near::before { background: var(--rate-near); }
    .view-business .module-tab.rate-warn::before { background: var(--rate-warn); }
    .view-business .module-tab.rate-bad::before  { background: var(--rate-bad); }

    .view-business .module-tab-label {
      font-size: 0.875rem;
      font-weight: 600;
      color: var(--off-white);
    }

    .view-business .module-tab-value {
      font-size: 1.25rem;
      font-weight: 700;
      color: var(--off-white);
      line-height: 1;
      font-variant-numeric: tabular-nums;
    }

    .view-business .module-tab-hint {
      font-size: 0.6875rem;
      color: var(--text-muted);
      line-height: 1.4;
    }

    .view-business .module-tab:not(.active) .module-tab-value { color: var(--slate-300); }

    /* ---------- 锁着的模块（角色 × 模块权限，2026-09-30 加） ---------- */
    /* 存在理由同 .module-empty 那几句：光灰不说明，看的人会以为页面坏了。 */
    /* 这里用「压暗 + 锁图标 + 一句短提示」三件事同时说，而不是只靠颜色—— */
    /* 只靠颜色的话，色觉差异的人看到的就是一张普通卡。 */
    .view-business .module-tab.locked {
      cursor: not-allowed;
      opacity: 0.45;
      border-style: dashed;
      background: var(--slate-900, var(--slate-800));
    }
    /* 锁着的卡不参与 hover 反馈——hover 变亮等于承诺「能点」。 */
    .view-business .module-tab.locked:hover {
      border-color: var(--slate-700);
      background: var(--slate-900, var(--slate-800));
    }
    /* 锁着的卡顶条不套完成率色阶：它没有数据可言，套上去等于用颜色说「这个数很差」。 */
    .view-business .module-tab.locked::before { background: transparent; }
    .view-business .module-tab.locked .module-tab-label,
    .view-business .module-tab.locked .module-tab-value { color: var(--text-muted); }
    /* 锁定提示要比普通 hint 更显眼一点，否则压暗之后最先看不清的就是它。 */
    .view-business .module-tab.locked .module-tab-hint {
      color: var(--rate-warn);
      font-weight: 600;
    }

    @media (max-width: 1200px) {
      .view-business .module-nav { grid-template-columns: repeat(3, 1fr); }
    }

    /* ---------- 模块体 ---------- */
    .view-business .module-body {
      background: var(--navy);
      border: 1px solid var(--slate-700);
      border-radius: 12px;
      padding: 1.25rem 1.375rem;
    }

    .view-business .module-section {
      margin: 1.5rem 0 0.875rem;
    }

    .view-business .module-section:first-child { margin-top: 0; }

    .view-business .module-section-title {
      font-size: 1rem;
      font-weight: 600;
      color: var(--off-white);
      padding-bottom: 0.4375rem;
      border-bottom: 1px solid var(--slate-700);
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    /* ①团队四节的编号圆点，方便讨论时对照第几节。其余模块的小节不传 seq，不出圆点 */
    .view-business .section-seq {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: var(--sky);
      color: var(--navy);
      font-size: 0.75rem;
      font-weight: 700;
      flex-shrink: 0;
    }

    .view-business .module-section-note {
      font-size: 0.75rem;
      color: var(--text-muted);
      margin-top: 0.375rem;
      line-height: 1.5;
    }

    /* ①业绩进度翻页条（2026-09-22 从竖排改横向翻页）。
       .progress-pager-title 复用 .module-section-title 的 flex 布局，
       只加 justify-content 把标题推左、‹1/N› 推右——不新起一层容器，
       避免标题行和翻页行分成两条视觉线。 */
    .view-business .module-section-title.progress-pager-title {
      justify-content: space-between;
    }

    .view-business .progress-pager-nav {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.8125rem;
      color: var(--text-muted);
      font-weight: 400;
    }

    .view-business .progress-pager-btn {
      background: var(--slate-800);
      border: 1px solid var(--slate-700);
      color: var(--off-white);
      border-radius: 6px;
      width: 26px;
      height: 26px;
      cursor: pointer;
      font-size: 0.9375rem;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s, border-color 0.15s;
      padding: 0;
    }

    .view-business .progress-pager-btn:hover {
      background: var(--slate-700);
      border-color: var(--sky);
    }

    .view-business .progress-pager-label {
      min-width: 3.25em;
      text-align: center;
      font-variant-numeric: tabular-nums;
    }

    /* 页码点：可直接跳页，不用一路翻。放在这一节内容体下方，
       和上面的翻页箭头呼应，方便在「不点箭头」时也能定位到具体第几节。 */
    .view-business .progress-pager-dots {
      display: flex;
      gap: 6px;
      justify-content: center;
      margin: 0.75rem 0 0.25rem;
    }

    .view-business .progress-pager-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--slate-700);
      border: none;
      cursor: pointer;
      padding: 0;
      transition: background 0.15s, width 0.15s;
    }

    .view-business .progress-pager-dot:hover { background: var(--slate-600); }
    .view-business .progress-pager-dot.active { background: var(--sky); width: 16px; border-radius: 3px; }

    /* 实心空态：「这个层级没登记」。必须带分母，否则读不出是没登记还是真的是 0 */
    .view-business .module-empty {
      background: var(--slate-800);
      border: 1px dashed var(--slate-700);
      border-radius: 8px;
      padding: 1.125rem 1.25rem;
    }

    .view-business .module-empty-title {
      font-size: 0.9375rem;
      font-weight: 600;
      color: var(--slate-300);
      margin-bottom: 0.4375rem;
    }

    .view-business .module-empty-why {
      font-size: 0.8125rem;
      color: var(--text-muted);
      line-height: 1.6;
    }

    .view-business .module-empty-denom {
      font-size: 0.8125rem;
      color: var(--slate-300);
      margin-top: 0.5rem;
      font-variant-numeric: tabular-nums;
    }

    /* 缺数据占位：「整个源文件里就没有这份数据」。和 .module-empty 不同——
       这个同时是向公司要数据的清单，所以用橙色描边，视觉上和「本层级没有」区分 */
    .view-business .module-pending {
      background: rgba(251, 146, 60, 0.06);
      border: 1px dashed rgba(251, 146, 60, 0.35);
      border-radius: 8px;
      padding: 1rem 1.125rem;
      margin-top: 1.25rem;
    }

    .view-business .module-pending-title {
      font-size: 0.875rem;
      font-weight: 600;
      color: var(--orange);
      margin-bottom: 0.4375rem;
    }

    .view-business .module-pending-need,
    .view-business .module-pending-unlocks {
      font-size: 0.8125rem;
      color: var(--text-muted);
      line-height: 1.6;
    }

    .view-business .module-stat-row {
      display: flex;
      gap: 2rem;
      flex-wrap: wrap;
      padding: 0.875rem 1rem;
      background: var(--slate-800);
      border: 1px solid var(--slate-700);
      border-radius: 8px;
      margin-bottom: 0.875rem;
    }

    /* 切换条上的角标（①业绩进度的「个人」tab 显示人数） */
    .view-business .switch-badge {
      display: inline-block;
      margin-left: 0.375rem;
      font-size: 0.6875rem;
      font-weight: 600;
      color: var(--text-muted);
      background: var(--slate-900);
      border-radius: 999px;
      padding: 0.0625rem 0.375rem;
      vertical-align: middle;
    }

    .view-business .kpi-row {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 0.75rem;
    }

    @media (max-width: 1400px) {
      .view-business .kpi-row { grid-template-columns: repeat(3, 1fr); }
    }

    .view-business .kpi-card {
      background: linear-gradient(135deg, var(--navy) 0%, var(--slate-800) 100%);
      border: 1px solid var(--slate-700);
      border-radius: 12px;
      padding: 1rem 1.125rem 0.875rem;
      position: relative;
      overflow: hidden;
      cursor: pointer;
      transition: border-color 0.15s ease, transform 0.15s ease;
    }

    .view-business .kpi-card:hover {
      border-color: var(--slate-600);
      transform: translateY(-2px);
    }

    .view-business .kpi-card.is-open {
      border-color: var(--sky);
    }

    /* 展开态指向下方展开区的小三角 */
    .view-business .kpi-card.is-open::after {
      content: '';
      position: absolute;
      bottom: -1px;
      left: 50%;
      transform: translateX(-50%);
      border-left: 7px solid transparent;
      border-right: 7px solid transparent;
      border-bottom: 7px solid var(--sky);
    }

    .view-business .kpi-expand {
      position: absolute;
      top: 0.875rem;
      right: 1rem;
      font-size: 0.6875rem;
      color: var(--text-muted);
      opacity: 0;
      transition: opacity 0.15s ease;
    }

    .view-business .kpi-card:hover .kpi-expand,
    .view-business .kpi-card.is-open .kpi-expand { opacity: 1; }
    .view-business .kpi-card.is-open .kpi-expand { color: var(--sky); }

    /* 不可展开的 KPI 卡（中台三张）。JS 那边已经不输出 data-kpi 和「展开」角标，
       这里再把 cursor 和 hover 上浮撤掉——只去掉角标不够，
       手型指针和抬起动画本身就是「这里能点」的信号。
       写法与 .data-card.is-static 保持一致。 */
    .view-business .kpi-card.is-static {
      cursor: default;
    }

    .view-business .kpi-card.is-static:hover {
      border-color: var(--slate-700);
      transform: none;
    }

    /* 迷你趋势线：无轴无标签，纯形状，兼作「可点击」提示 */
    .view-business .kpi-spark {
      display: flex;
      align-items: flex-end;
      gap: 1px;
      height: 22px;
      margin-top: 0.5rem;
      opacity: 0.5;
      transition: opacity 0.15s ease;
    }

    .view-business .kpi-card:hover .kpi-spark,
    .view-business .kpi-card.is-open .kpi-spark { opacity: 0.9; }

    .view-business .kpi-spark-bar {
      background: var(--sky);
      border-radius: 1px 1px 0 0;
      min-height: 1px;
    }

    .view-business .kpi-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 4px;
      height: 100%;
      background: var(--sky);
    }

    .view-business .kpi-card.rate-good::before {
      background: var(--rate-good);
    }

    .view-business .kpi-card.rate-near::before {
      background: var(--rate-near);
    }

    .view-business .kpi-card.rate-warn::before {
      background: var(--rate-warn);
    }

    .view-business .kpi-card.rate-bad::before {
      background: var(--rate-bad);
    }

    .view-business .kpi-label {
      font-size: 0.8125rem;
      color: var(--slate-300);
      margin-bottom: 0.5rem;
      font-weight: 500;
    }

    .view-business .kpi-value {
      font-size: 1.75rem;
      font-weight: 700;
      color: var(--off-white);
      line-height: 1;
      margin-bottom: 0.375rem;
      white-space: nowrap;
      font-variant-numeric: tabular-nums;
    }

    .view-business .kpi-trend {
      display: flex;
      align-items: center;
      gap: 0.375rem;
      font-size: 0.75rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .view-business .kpi-trend.up {
      color: var(--teal);
    }

    .view-business .kpi-trend.down {
      color: var(--orange);
    }

    .view-business .kpi-trend-arrow {
      font-size: 1rem;
    }

    /* L2: 控制栏 */
    .view-business .dashboard-controls {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 2rem;
      padding: 1.5rem;
      background: var(--navy);
      border: 1px solid var(--slate-700);
      border-radius: 12px;
    }

    .view-business .view-switcher {
      display: flex;
      gap: 0.5rem;
    }

    .view-business .view-btn {
      padding: 0.625rem 1.25rem;
      background: var(--slate-800);
      border: 1px solid var(--slate-700);
      color: var(--slate-300);
      border-radius: 8px;
      font-size: 0.875rem;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s;
    }

    .view-business .view-btn:hover {
      border-color: var(--sky);
      color: var(--off-white);
      background: rgba(56, 189, 248, 0.08);
    }

    .view-business .view-btn.active {
      background: var(--sky);
      color: var(--navy);
      border-color: var(--sky);
    }

    .view-business .breadcrumb {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.875rem;
      color: var(--slate-300);
    }

    .view-business .breadcrumb-item {
      cursor: pointer;
      transition: color 0.2s;
    }

    .view-business .breadcrumb-item:hover {
      color: var(--sky);
    }

    .view-business .breadcrumb-item.current {
      color: var(--off-white);
      font-weight: 600;
    }

    .view-business .breadcrumb-separator {
      color: var(--slate-600);
    }

    /* ===== 首页：三块入口 =====
       需求图的第一层。刻意和下面所有卡片长得不一样——它不是数据卡，是导航：
       图标在最上、主值大一号、底部有「进入 ›」，hover 时整块抬起。 */
    .view-business .home-hero {
      margin-bottom: 2rem;
    }

    .view-business .home-hero-title {
      font-size: 1.75rem;
      font-weight: 700;
      color: var(--off-white);
      letter-spacing: -0.02em;
    }

    .view-business .home-hero-sub {
      margin-top: 0.375rem;
      font-size: 0.875rem;
      color: var(--text-muted);
    }

    .view-business .home-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.25rem;
      margin-bottom: 1.75rem;
    }

    .view-business .home-entry {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 0.375rem;
      padding: 1.75rem 1.5rem 1.25rem;
      background: var(--navy);
      border: 1px solid var(--slate-700);
      border-radius: 14px;
      cursor: pointer;
      text-align: left;
      font-family: inherit;
      transition: all 0.2s;
    }

    .view-business .home-entry:hover {
      border-color: var(--sky);
      transform: translateY(-3px);
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.35);
    }

    .view-business .home-entry-icon {
      font-size: 1.75rem;
      line-height: 1;
      margin-bottom: 0.25rem;
    }

    .view-business .home-entry-label {
      font-size: 1.125rem;
      font-weight: 600;
      color: var(--off-white);
    }

    .view-business .home-entry-value {
      font-size: 1.875rem;
      font-weight: 700;
      color: var(--sky);
      line-height: 1.1;
      font-variant-numeric: tabular-nums;
    }

    .view-business .home-entry-value-sub {
      font-size: 0.8125rem;
      color: var(--slate-300);
    }

    .view-business .home-entry-hint {
      margin-top: 0.5rem;
      padding-top: 0.75rem;
      border-top: 1px solid var(--slate-700);
      width: 100%;
      font-size: 0.75rem;
      color: var(--text-muted);
      line-height: 1.5;
    }

    .view-business .home-entry-go {
      margin-top: 0.5rem;
      font-size: 0.8125rem;
      font-weight: 500;
      color: var(--sky);
    }

    /* ---------- 锁着的视角入口（2026-09-30 加） ---------- */
    /* 和 .module-tab.locked 同一套语言（压暗 + 虚线 + 锁图标 + 一句理由）， */
    /* 两处一致才不会让人以为是两种不同的故障。 */
    /* **不显示任何数据**：value 那句写的是固定文案「无权查看」， */
    /* 不是把真实数字压暗——压暗的数字仍然读得出来。 */
    .view-business .home-entry.is-locked {
      cursor: not-allowed;
      opacity: 0.5;
      border-style: dashed;
      background: var(--slate-800);
    }
    /* 锁着的卡不参与 hover 反馈——浮起来+发光等于承诺「能点」。 */
    .view-business .home-entry.is-locked:hover {
      border-color: var(--slate-700);
      transform: none;
      box-shadow: none;
    }
    .view-business .home-entry.is-locked .home-entry-icon { filter: grayscale(1); }
    .view-business .home-entry.is-locked .home-entry-label { color: var(--slate-300); }
    .view-business .home-entry.is-locked .home-entry-value {
      font-size: 1.125rem;          /* 文案比数字短，字号降一档免得挤爆卡片 */
      color: var(--text-muted);
      font-weight: 600;
    }
    .view-business .home-entry.is-locked .home-entry-go {
      color: var(--rate-warn);      /* 「申请查看」是行动指引，要比别的灰字显眼 */
      font-weight: 600;
    }

    .view-business .home-note {
      padding: 1rem 1.25rem;
      background: var(--slate-800);
      border: 1px solid var(--slate-700);
      border-radius: 10px;
      font-size: 0.8125rem;
      line-height: 1.7;
      color: var(--slate-300);
    }

    .view-business .home-aside {
      margin-top: 1.5rem;
      padding-top: 1.25rem;
      border-top: 1px solid var(--slate-700);
      display: flex;
      align-items: baseline;
      gap: 0.75rem;
      flex-wrap: wrap;
    }

    .view-business .home-aside-link {
      font-size: 0.875rem;
      font-weight: 500;
      color: var(--slate-300);
      cursor: pointer;
      transition: color 0.2s;
    }

    .view-business .home-aside-link:hover {
      color: var(--sky);
    }

    .view-business .home-aside-hint {
      font-size: 0.75rem;
      color: var(--text-muted);
    }

    /* ===== 权限（层次A）相关的两块样式 =====
       登录闸门（未登录时整页只有这一块）和「有身份但范围内没有东西」的提示。
       两块刻意长得不一样：前者要引导动作（去登录），后者要引导排查（找管理员）。
       都不走 moduleEmpty——那个说的是「这一层没有数据」，跟「你还不知道是谁」
       是两回事，下一步动作完全不同。 */

    .view-business .login-gate {
      max-width: 560px;
      margin: 3rem auto 0;
      padding: 2rem 1.75rem;
      background: var(--navy);
      border: 1px solid var(--slate-700);
      border-radius: 14px;
      text-align: center;
    }

    .view-business .login-gate-icon {
      font-size: 2.25rem;
      line-height: 1;
      margin-bottom: 0.875rem;
    }

    .view-business .login-gate-title {
      font-size: 1.125rem;
      font-weight: 600;
      color: var(--off-white);
      margin-bottom: 0.625rem;
    }

    .view-business .login-gate-why {
      font-size: 0.8125rem;
      line-height: 1.8;
      color: var(--slate-300);
      margin-bottom: 1.5rem;
    }

    .view-business .login-gate-btn {
      padding: 0.625rem 1.5rem;
      background: var(--sky);
      border: 1px solid var(--sky);
      color: var(--navy);
      border-radius: 8px;
      font-size: 0.875rem;
      font-weight: 600;
      font-family: inherit;
      cursor: pointer;
      transition: all 0.2s;
    }

    .view-business .login-gate-btn:hover {
      background: #7dd3fc;
      border-color: #7dd3fc;
    }

    /* 失败原因。空的时候不占高度，别让闸门块高度跳一下。 */
    .view-business .login-gate-hint:not(:empty) {
      margin-top: 1rem;
      font-size: 0.75rem;
      line-height: 1.6;
      color: var(--text-muted);
      word-break: break-all;
    }

    /* 「有身份但范围内没有东西」。不用告警色（红/橙）——这不是错误，
       是配置没对齐，用中性色，靠文案说清下一步找谁。 */
    .view-business .home-entry-empty {
      padding: 2rem 1.75rem;
      background: var(--slate-800);
      border: 1px solid var(--slate-700);
      border-radius: 14px;
      text-align: center;
    }

    .view-business .home-entry-empty-title {
      font-size: 1rem;
      font-weight: 600;
      color: var(--off-white);
      margin-bottom: 0.625rem;
    }

    .view-business .home-entry-empty-why {
      font-size: 0.8125rem;
      line-height: 1.8;
      color: var(--slate-300);
      max-width: 520px;
      margin: 0 auto;
    }

    /* 顶部视角条里被权限藏掉的按钮。用属性选择器，和 syncViewButtons()
       写的 hidden 属性配套——不用改 JS 或加 class。 */
    .view-business .view-btn[hidden] {
      display: none;
    }

    /* 单店列表里待录入城市那一行小条。4 个 pending 城市金额全 0，
       发整张卡会和常州平级并排、白占首屏，压成一行。 */
    .view-business .pending-store-strip {
      display: flex;
      align-items: center;
      gap: 0.875rem;
      padding: 0.75rem 1.125rem;
      margin-bottom: 0.5rem;
      background: var(--slate-800);
      border: 1px solid var(--slate-700);
      border-radius: 8px;
      font-size: 0.8125rem;
    }

    .view-business .pending-store-city {
      font-weight: 600;
      color: var(--slate-300);
      min-width: 4.5rem;
    }

    .view-business .pending-store-names {
      flex: 1;
      color: var(--text-muted);
    }

    .view-business .pending-store-tag {
      font-size: 0.75rem;
      color: var(--text-muted);
      padding: 0.125rem 0.5rem;
      border: 1px solid var(--slate-700);
      border-radius: 4px;
    }

    @media (max-width: 900px) {
      .view-business .home-grid { grid-template-columns: 1fr; }
    }

    /* L3: 左右分栏布局 */
    .view-business .content-layout {
      display: grid;
      grid-template-columns: 1fr 320px;
      gap: 1.5rem;
      align-items: start;
    }

    .view-business .main-area {
      min-width: 0;
    }

    .view-business .sidebar-area {
      position: sticky;
      top: 100px;
    }

    /* 排行榜 */
    .view-business .ranking-card {
      background: var(--navy);
      border: 1px solid var(--slate-700);
      border-radius: 12px;
      padding: 1rem 1.125rem;
    }

    .view-business .ranking-title {
      font-size: 0.9375rem;
      font-weight: 600;
      color: var(--off-white);
      margin-bottom: 0.75rem;
      display: flex;
      align-items: baseline;
      flex-wrap: wrap;
      gap: 0.5rem;
    }

    .view-business .ranking-metric {
      font-size: 0.6875rem;
      font-weight: 400;
      color: var(--text-muted);
      padding-left: 0.125rem;
    }

    .view-business .ranking-list {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }

    .view-business .ranking-item {
      display: flex;
      align-items: center;
      gap: 0.625rem;
      padding: 0.5rem 0.625rem;
      background: var(--slate-800);
      border: 1px solid var(--slate-700);
      border-radius: 8px;
      transition: all 0.2s;
    }

    /* 「不参与排名」区块：跟上面的排名视觉上明确分开，无奖牌、无名次 */
    .view-business .ranking-aside {
      margin-top: 0.75rem;
      padding-top: 0.75rem;
      border-top: 1px dashed var(--slate-700);
    }

    .view-business .ranking-aside-title {
      font-size: 0.75rem;
      font-weight: 600;
      color: var(--text-muted);
    }

    .view-business .ranking-aside-note {
      font-size: 0.6875rem;
      color: var(--text-muted);
      margin-top: 0.125rem;
      line-height: 1.4;
    }

    .view-business .ranking-aside-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.5rem;
      margin-top: 0.5rem;
      padding: 0.375rem 0.625rem;
      background: var(--slate-800);
      border: 1px dashed var(--slate-700);
      border-radius: 6px;
    }

    .view-business .ranking-aside-name {
      font-size: 0.75rem;
      color: var(--slate-300);
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .view-business .ranking-aside-item .ranking-rate {
      flex-shrink: 0;
    }

    .view-business .ranking-item:hover {
      border-color: var(--sky);
      transform: translateX(4px);
    }

    .view-business .ranking-number {
      font-size: 1rem;
      font-weight: 700;
      color: var(--text-muted);
      width: 22px;
      text-align: center;
    }

    .view-business .ranking-item:nth-child(1) .ranking-number {
      color: #FFD700;
    }

    .view-business .ranking-item:nth-child(2) .ranking-number {
      color: #C0C0C0;
    }

    .view-business .ranking-item:nth-child(3) .ranking-number {
      color: #CD7F32;
    }

    .view-business .ranking-info {
      flex: 1;
      min-width: 0;
    }

    .view-business .ranking-name {
      font-size: 0.8125rem;
      font-weight: 600;
      color: var(--off-white);
      margin-bottom: 0.1875rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .view-business .ranking-progress {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .view-business .progress-bar {
      flex: 1;
      height: 6px;
      background: var(--slate-700);
      border-radius: 999px;
      position: relative;
    }

    /* 进度条一律中性蓝：只表达「进度长度」，好坏由数字承担 */
    .view-business .progress-fill {
      height: 100%;
      background: var(--sky);
      border-radius: 999px;
      transition: width 0.3s ease;
    }

    /* 理论完成进度参照线（月中查看时标出"今天应该完成多少"） */
    .view-business .progress-pace {
      position: absolute;
      top: -3px;
      width: 2px;
      height: 12px;
      background: var(--slate-300);
      border-radius: 1px;
      transform: translateX(-1px);
    }

    .view-business .ranking-rate {
      font-size: 0.75rem;
      font-weight: 600;
      min-width: 44px;
      text-align: right;
      font-variant-numeric: tabular-nums;
    }

    /* ========== KPI 展开区 ========== */
    .view-business .kpi-drill:empty { display: none; }

    .view-business .drill-body {
      background: var(--navy);
      border: 1px solid var(--sky);
      border-radius: 12px;
      padding: 1.25rem 1.5rem;
      margin-top: 0.75rem;
      animation: drillIn 0.18s ease;
    }

    @keyframes drillIn {
      from { opacity: 0; transform: translateY(-6px); }
      to   { opacity: 1; transform: none; }
    }

    .view-business .drill-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 1rem;
      margin-bottom: 0.875rem;
    }

    .view-business .drill-title {
      font-size: 0.9375rem;
      font-weight: 600;
      color: var(--off-white);
    }

    .view-business .drill-note {
      font-size: 0.75rem;
      color: var(--text-muted);
      margin-top: 0.25rem;
    }

    .view-business .drill-total { text-align: right; }

    .view-business .drill-total-value {
      font-size: 1.375rem;
      font-weight: 700;
      color: var(--off-white);
      line-height: 1.1;
      white-space: nowrap;
      font-variant-numeric: tabular-nums;
    }

    .view-business .drill-total-label {
      font-size: 0.6875rem;
      color: var(--text-muted);
      margin-top: 0.1875rem;
    }

    .view-business .drill-empty {
      padding: 1.5rem;
      text-align: center;
      color: var(--text-muted);
      font-size: 0.8125rem;
    }

    /* 展开区内的通用表格 */
    .view-business .drill-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.75rem;
      margin-top: 0.875rem;
    }

    .view-business .drill-table th {
      text-align: left;
      padding: 0.375rem 0.5rem;
      color: var(--text-muted);
      font-weight: 500;
      border-bottom: 1px solid var(--slate-700);
      white-space: nowrap;
    }

    .view-business .drill-table td {
      padding: 0.4375rem 0.5rem;
      border-bottom: 1px solid var(--slate-800);
      color: var(--slate-300);
      white-space: nowrap;
    }

    .view-business .drill-table tr:last-child td { border-bottom: none; }
    .view-business .drill-table .num { text-align: right; font-variant-numeric: tabular-nums; }
    .view-business .drill-table .strong { font-weight: 600; }
    .view-business .drill-table .muted { color: var(--text-muted); }

    .view-business .bridge-title {
      font-size: 0.8125rem;
      font-weight: 600;
      color: var(--slate-300);
      margin: 1.125rem 0 0.5rem;
    }

    /* ---------- 卡1：目标分配 ---------- */
    .view-business .alloc-stack {
      display: flex;
      height: 12px;
      border-radius: 999px;
      overflow: hidden;
      background: var(--slate-800);
      margin-top: 0.25rem;
    }

    .view-business .alloc-seg { height: 100%; transition: opacity 0.15s ease; }
    .view-business .alloc-seg:hover { opacity: 0.7; }

    .view-business .seg-sky { background: var(--sky); }
    .view-business .seg-cyan { background: var(--cyan); }
    .view-business .seg-orange { background: var(--orange); }
    .view-business .seg-amber { background: var(--amber); }
    .view-business .seg-neutral { background: var(--slate-600); }

    /* 目标分配列表：一行一条，横条按完成率画长度（不是占比——占比已经在上面
       那条 .alloc-stack 堆叠条里表达过了，这里的条形回答的是「完成得怎样」）。
       字段和原表格一一对应（名称/净营收/目标/占比/完成率/缺口），没删任何字段。 */
    .view-business .alloc-list {
      display: flex;
      flex-direction: column;
    }

    .view-business .alloc-row {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      padding: 0.625rem 0;
      border-bottom: 1px solid var(--slate-800);
    }

    .view-business .alloc-row:last-child { border-bottom: none; }

    .view-business .alloc-name {
      width: 9.5rem;
      flex-shrink: 0;
      font-size: 0.8125rem;
      color: var(--slate-300);
      display: flex;
      align-items: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* 按部门维度拆时门店名+部门名各占一行（同缺口归因卡 .gap-name-lines
       那条思路），覆盖上面 .alloc-name 的单行截断设定。 */
    .view-business .alloc-name.alloc-name-lines {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 0.0625rem;
      line-height: 1.25;
      white-space: normal;
    }

    .view-business .alloc-name-line-store {
      display: flex;
      align-items: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
    }

    .view-business .alloc-name-line-dept {
      font-size: 0.6875rem;
      color: var(--text-muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
      /* 对齐上一行文字起点，不是圆点起点：同 .gap-name-dept 那条 */
      padding-left: calc(8px + 0.5rem);
    }

    .view-business .alloc-track-wrap {
      flex: 1;
      min-width: 0;
    }

    .view-business .alloc-track-nums {
      display: flex;
      justify-content: space-between;
      font-size: 0.6875rem;
      color: var(--text-muted);
      margin-bottom: 0.25rem;
    }

    .view-business .alloc-value {
      color: var(--slate-300);
      font-weight: 600;
    }

    .view-business .alloc-track {
      position: relative;
      height: 8px;
      border-radius: 999px;
      background: var(--slate-700);
      overflow: hidden;
    }

    /* 中性蓝：条形只表达「完成了多少」，好坏由旁边的完成率数字颜色承担
       （同 .progress-fill 那条「进度条一律中性色」的规矩）。 */
    .view-business .alloc-fill {
      height: 100%;
      border-radius: 999px;
      background: var(--sky);
    }

    .view-business .alloc-rate {
      width: 3.5rem;
      text-align: right;
      font-size: 0.875rem;
      font-variant-numeric: tabular-nums;
      flex-shrink: 0;
    }

    .view-business .alloc-gap {
      width: 4.5rem;
      text-align: right;
      font-size: 0.75rem;
      font-variant-numeric: tabular-nums;
      flex-shrink: 0;
    }

    /* 展开剩余门店/部门。原生 <details>，同 .note-fold 那条：折叠状态不进 JS
       状态机，不用改 resetModuleState/stateCombos，纯 DOM 折叠。 */
    .view-business .alloc-toggle {
      margin-top: 0.25rem;
      border-top: 1px dashed var(--slate-700);
      padding-top: 0.5rem;
    }

    .view-business .alloc-toggle > summary {
      cursor: pointer;
      font-size: 0.8125rem;
      color: var(--sky);
      list-style: none;
      text-align: center;
      padding: 0.25rem 0;
    }

    .view-business .alloc-toggle > summary::-webkit-details-marker { display: none; }
    .view-business .alloc-toggle > summary:hover { color: #7DD3FC; }
    .view-business .alloc-toggle[open] > summary { margin-bottom: 0.25rem; }

    /* 个人列表：姓名+门店·部门两行堆叠——部门名带门店前缀后比店名长，
       单行放不下（同团队 .alloc-name 单行，个人这里要宽一点高一点）。 */
    .view-business .alloc-name-stack {
      width: 10.5rem;
      flex-direction: column;
      align-items: flex-start;
      gap: 0.125rem;
      line-height: 1.3;
    }

    .view-business .alloc-name-stack > span:first-child {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
    }

    .view-business .alloc-name-sub {
      font-size: 0.6875rem;
      color: var(--text-muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
    }

    /* 个人环比/同比示例：每人一块，块内两张哑铃卡（环比/同比）。
       用哑铃图不用饼图——这是「前后两个值的对比」，不是「整体拆分」，
       2 切片饼图信息量还不如直接看数字（dataviz 技能的反面案例）。 */
    .view-business .person-mom-yoy-list {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    .view-business .person-mom-yoy-item {
      padding: 0.875rem 0;
      border-bottom: 1px solid var(--slate-800);
    }

    .view-business .person-mom-yoy-item:last-child { border-bottom: none; }

    .view-business .person-mom-yoy-item .alloc-name-stack {
      width: auto;
      margin-bottom: 0.75rem;
    }

    .view-business .dumbbell-card { margin-bottom: 0.75rem; }
    .view-business .dumbbell-card:last-child { margin-bottom: 0; }

    .view-business .dumbbell-card-head {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      font-size: 0.75rem;
      color: var(--text-muted);
      margin-bottom: 1.25rem;
    }

    .view-business .dumbbell-card-delta { font-size: 0.9375rem; }

    /* 哑铃图：一个点表示对比期，一个点表示当前期，中间连线表示涨跌方向。 */
    .view-business .dumbbell {
      position: relative;
      height: 14px;
      margin: 0 0.5rem;
    }

    .view-business .dumbbell-track {
      position: absolute;
      top: 6px;
      left: 0;
      right: 0;
      height: 2px;
      background: var(--slate-700);
    }

    .view-business .dumbbell-line {
      position: absolute;
      top: 6px;
      height: 2px;
      border-radius: 1px;
    }

    .view-business .dumbbell-dot {
      position: absolute;
      top: 0;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      border: 2px solid var(--slate-800);
      box-sizing: border-box;
      transform: translateX(-50%);
    }

    .view-business .dumbbell-dot.prev { background: var(--slate-600); }

    /* 一左一右：不管两点距离多近，左边点的标签往左展开、右边点的标签往右展开，
       文字永远往两边散开，不会互相覆盖——不用为了防碰撞另写「距离够近就
       上下错位」的分支（试过，撞了卡片标题，改成这套定死方向的方案）。 */
    .view-business .dumbbell-label {
      position: absolute;
      top: -22px;
      font-size: 0.75rem;
      font-weight: 600;
      color: var(--slate-300);
      white-space: nowrap;
      font-variant-numeric: tabular-nums;
    }

    .view-business .dumbbell-label.left-anchor { transform: translateX(-100%); padding-right: 6px; }
    .view-business .dumbbell-label.right-anchor { transform: translateX(0); padding-left: 6px; }

    /* .mini-bar span.fill-good/warn 那两条是嵌套选择器，管不到这里的
       .dumbbell-line/.dumbbell-dot，单独补一份。 */
    .view-business .dumbbell-line.fill-good, .view-business .dumbbell-dot.fill-good { background: var(--rate-good); }
    .view-business .dumbbell-line.fill-warn, .view-business .dumbbell-dot.fill-warn { background: var(--rate-warn); }

    .view-business .person-mom-yoy-note {
      margin-top: 0.625rem;
    }

    /* ---------- 卡2：口径对账 ---------- */
    .view-business .bridge {
      margin-top: 1rem;
      padding-top: 0.875rem;
      border-top: 1px solid var(--slate-800);
    }

    .view-business .bridge-rows {
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
    }

    .view-business .bridge-row {
      display: flex;
      align-items: baseline;
      gap: 0.5rem;
      font-size: 0.75rem;
      padding: 0.3125rem 0.5rem;
      border-radius: 6px;
    }

    .view-business .bridge-sign {
      width: 1rem;
      color: var(--text-muted);
      font-weight: 600;
      flex-shrink: 0;
    }

    .view-business .bridge-label {
      color: var(--slate-300);
      flex-shrink: 0;
      min-width: 6.5rem;
    }

    .view-business .bridge-note {
      color: var(--text-muted);
      font-size: 0.6875rem;
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .view-business .bridge-value {
      font-variant-numeric: tabular-nums;
      color: var(--slate-300);
      font-weight: 600;
      white-space: nowrap;
    }

    .view-business .bridge-row.sub,
    .view-business .bridge-row.final {
      background: var(--slate-800);
    }

    .view-business .bridge-row.final .bridge-label,
    .view-business .bridge-row.final .bridge-value {
      color: var(--off-white);
      font-weight: 700;
    }

    .view-business .bridge-row.minus .bridge-value { color: var(--rate-warn); }


    /* ---------- 趋势图（「实际净营收」展开内） ---------- */
    .view-business .trend-switch {
      display: inline-flex;
      gap: 0.25rem;
      background: var(--slate-800);
      border: 1px solid var(--slate-700);
      border-radius: 8px;
      padding: 0.1875rem;
      margin-bottom: 0.875rem;
    }

    .view-business .trend-switch-btn {
      background: transparent;
      border: none;
      color: var(--slate-300);
      font-size: 0.75rem;
      padding: 0.3125rem 0.75rem;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.15s ease;
      font-family: inherit;
    }

    .view-business .trend-switch-btn:hover { color: var(--off-white); }

    .view-business .trend-switch-btn.active {
      background: var(--sky);
      color: #fff;
      font-weight: 600;
    }

    .view-business .trend-chart-wrap {
      position: relative;
      padding-top: 0.5rem;
    }

    .view-business .trend-chart {
      display: flex;
      align-items: flex-end;
      gap: 0.5rem;
      height: 170px;
    }

    .view-business .trend-chart.dense { gap: 2px; }

    .view-business .trend-bar {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      height: 100%;
      cursor: default;
    }

    .view-business .trend-bar-value {
      font-size: 0.625rem;
      color: var(--text-muted);
      text-align: center;
      margin-bottom: 0.25rem;
      white-space: nowrap;
      overflow: hidden;
    }

    /* 日视图柱子太窄，数值藏起来，靠 hover tooltip */
    .view-business .trend-chart.dense .trend-bar-value { display: none; }

    .view-business .trend-bar-track {
      flex: 1;
      display: flex;
      align-items: flex-end;
      min-height: 0;
    }

    .view-business .trend-bar-fill {
      width: 100%;
      background: var(--sky);
      border-radius: 3px 3px 0 0;
      transition: height 0.25s ease;
      opacity: 0.55;
    }

    /* 高于均值的柱子加深，一眼看出强弱 */
    .view-business .trend-bar.above-avg .trend-bar-fill { opacity: 1; }

    /* 周末用青色区分，识别周末效应 */
    .view-business .trend-bar.is-weekend .trend-bar-fill { background: var(--cyan); }

    /* 不满整周的头尾柱打斜纹，避免「第1周只有21万」被误读成开月暴跌 */
    .view-business .trend-bar.is-partial .trend-bar-fill {
      background: repeating-linear-gradient(
        45deg, var(--slate-600) 0 4px, var(--slate-700) 4px 8px);
      opacity: 1;
    }

    .view-business .trend-bar:hover .trend-bar-fill { opacity: 1; filter: brightness(1.2); }

    .view-business .trend-bar-label {
      font-size: 0.625rem;
      color: var(--text-muted);
      text-align: center;
      margin-top: 0.375rem;
      white-space: nowrap;
      overflow: hidden;
    }

    .view-business .trend-chart.dense .trend-bar-label { font-size: 0.5625rem; }

    .view-business .trend-avg-line {
      position: absolute;
      left: 0;
      right: 0;
      height: 0;
      border-top: 1px dashed var(--slate-600);
      pointer-events: none;
      margin-bottom: 1.375rem;
    }

    .view-business .trend-avg-tag {
      position: absolute;
      right: 0;
      top: -0.875rem;
      font-size: 0.625rem;
      color: var(--text-muted);
      background: var(--navy);
      padding: 0 0.25rem;
    }

    .view-business .trend-foot {
      display: flex;
      flex-wrap: wrap;
      gap: 1.25rem;
      margin-top: 0.875rem;
      padding-top: 0.75rem;
      border-top: 1px solid var(--slate-800);
    }

    .view-business .trend-stat {
      font-size: 0.75rem;
      color: var(--slate-300);
    }

    .view-business .trend-stat em {
      font-style: normal;
      color: var(--text-muted);
      margin-right: 0.375rem;
    }

    /* ---------- 覆盖率提示 / 脚注 ---------- */
    .view-business .cover-note {
      font-size: 0.6875rem;
      color: var(--text-muted);
      background: var(--slate-800);
      border-left: 2px solid var(--rate-warn);
      border-radius: 0 6px 6px 0;
      padding: 0.4375rem 0.625rem;
      margin-bottom: 0.875rem;
      line-height: 1.5;
    }

    .view-business .drill-foot-note {
      font-size: 0.6875rem;
      color: var(--text-muted);
      margin-top: 0.625rem;
      padding-top: 0.5rem;
      border-top: 1px solid var(--slate-800);
      line-height: 1.5;
    }

    /* ---------- 性质分组卡（渠道性质 / 业务线退款率） ---------- */
    .view-business .kind-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: 0.625rem;
      margin-bottom: 1rem;
    }

    .view-business .kind-grid.line-grid {
      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    }

    .view-business .kind-card {
      background: var(--slate-800);
      border: 1px solid var(--slate-700);
      border-radius: 8px;
      padding: 0.625rem 0.75rem;
    }

    .view-business .kind-label {
      font-size: 0.6875rem;
      color: var(--slate-300);
      margin-bottom: 0.3125rem;
      display: flex;
      align-items: center;
      white-space: nowrap;
    }

    .view-business .kind-value {
      font-size: 1.125rem;
      font-weight: 700;
      color: var(--off-white);
      line-height: 1.1;
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }

    .view-business .kind-meta {
      font-size: 0.6875rem;
      color: var(--text-muted);
      margin-top: 0.25rem;
      white-space: nowrap;
    }

    .view-business .kind-note {
      font-size: 0.625rem;
      color: var(--text-muted);
      margin-top: 0.1875rem;
      opacity: 0.8;
    }

    /* ---------- 渠道明细：分面条形图，按性质分组，每组可折叠 ----------
       同上面 kind-grid 摘要卡呼应，性质分组和具体渠道成了同一张图的两层，
       零值渠道（高德/闲鱼这类）自然缩在组内最短的位置，不用再靠每行旁边
       一个小标签单独标注属于哪一类（原 .ch-name/.ch-kind 那套已废弃）。
       用原生 <details>，同项目里 .alloc-toggle 那条既有约定：折叠状态不进
       JS 状态机，纯 DOM 折叠。默认展开，第一次看要能看到全貌。 */
    .view-business .channel-facets { margin-top: 0.5rem; }

    .view-business .facet-group { margin-bottom: 0.75rem; }
    .view-business .facet-group:last-child { margin-bottom: 0; }

    .view-business .facet-group > summary {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      cursor: pointer;
      list-style: none;
      padding-bottom: 0.375rem;
      border-bottom: 1px solid var(--slate-700);
    }

    .view-business .facet-group > summary::-webkit-details-marker { display: none; }
    .view-business .facet-group[open] > summary { margin-bottom: 0.5rem; }

    .view-business .facet-header-left { display: flex; align-items: baseline; gap: 0.375rem; }

    .view-business .facet-chevron {
      display: inline-block;
      width: 0.625rem;
      height: 0.625rem;
      border-right: 1.5px solid var(--text-muted);
      border-bottom: 1.5px solid var(--text-muted);
      transform: rotate(-45deg);
      transition: transform 0.15s ease;
      margin-right: 0.125rem;
    }

    .view-business .facet-group[open] > summary .facet-chevron { transform: rotate(45deg); }

    .view-business .facet-title { font-size: 0.8125rem; font-weight: 600; color: var(--slate-300); }
    .view-business .facet-sub { font-size: 0.6875rem; color: var(--text-muted); font-weight: 400; margin-left: 0.375rem; }
    .view-business .facet-total {
      font-size: 0.875rem;
      font-weight: 700;
      color: var(--off-white);
      font-variant-numeric: tabular-nums;
    }
    .view-business .facet-count { font-size: 0.6875rem; color: var(--text-muted); font-weight: 400; margin-left: 0.375rem; }

    /* 每个渠道两行：主行（名称/条形/营收/占比）+ 副行（线索·成交·转化率·单均，
       小字）。原表格六个字段一个不少，只是营收从数字列换成条形主视觉。 */
    .view-business .facet-row { padding: 0.375rem 0; border-bottom: 1px solid var(--slate-800); }
    .view-business .facet-row:last-child { border-bottom: none; }

    .view-business .facet-row-main {
      display: flex;
      align-items: center;
      gap: 0.625rem;
      font-size: 0.75rem;
    }

    .view-business .facet-name {
      width: 5.5rem;
      flex-shrink: 0;
      color: var(--slate-300);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .view-business .facet-track {
      flex: 1;
      height: 10px;
      border-radius: 999px;
      background: var(--slate-800);
      overflow: hidden;
      min-width: 60px;
    }

    .view-business .facet-fill { height: 100%; border-radius: 999px; background: var(--sky); }

    .view-business .facet-value {
      width: 4rem;
      text-align: right;
      font-variant-numeric: tabular-nums;
      color: var(--slate-300);
      flex-shrink: 0;
      font-weight: 600;
    }

    .view-business .facet-share {
      width: 3rem;
      text-align: right;
      font-variant-numeric: tabular-nums;
      color: var(--text-muted);
      flex-shrink: 0;
    }

    .view-business .facet-row-sub {
      font-size: 0.6875rem;
      color: var(--text-muted);
      margin-top: 0.25rem;
      /* 对齐主行条形起点，不是名称起点 */
      padding-left: calc(5.5rem + 0.625rem);
    }

    /* 副行里嵌的转化率迷你条比表格版更窄——这里是行内小字说明，不是独立列 */
    .view-business .facet-row-sub .mini-bar-row { display: inline-flex; min-width: 0; gap: 0.25rem; vertical-align: middle; }
    .view-business .facet-row-sub .mini-bar { width: 2.5rem; height: 4px; min-width: 0; flex: none; }

    /* 表格内嵌的迷你条：让转化率/退款率可以横向比长度 */
    .view-business .mini-bar-row {
      display: flex;
      align-items: center;
      gap: 0.4375rem;
      min-width: 110px;
    }

    .view-business .mini-bar {
      flex: 1;
      height: 5px;
      background: var(--slate-800);
      border-radius: 999px;
      overflow: hidden;
      min-width: 40px;
    }

    .view-business .mini-bar span {
      display: block;
      height: 100%;
      background: var(--sky);
      border-radius: 999px;
    }

    .view-business .mini-bar span.fill-good { background: var(--rate-good); }
    .view-business .mini-bar span.fill-near { background: var(--rate-near); }
    .view-business .mini-bar span.fill-warn { background: var(--rate-warn); }
    .view-business .mini-bar span.fill-bad  { background: var(--rate-bad); }

    .view-business .mini-bar-num {
      font-size: 0.6875rem;
      font-variant-numeric: tabular-nums;
      color: var(--slate-300);
      min-width: 3rem;
      text-align: right;
      white-space: nowrap;
    }

    /* ---------- 告警块（净营收为负等） ---------- */
    .view-business .alert-block {
      margin-top: 1rem;
      padding: 0.75rem 0.875rem;
      background: rgba(239, 68, 68, 0.08);
      border: 1px solid rgba(239, 68, 68, 0.3);
      border-radius: 8px;
    }

    .view-business .alert-title {
      font-size: 0.75rem;
      font-weight: 600;
      color: var(--rate-bad);
      margin-bottom: 0.5rem;
    }

    .view-business .alert-row {
      display: flex;
      align-items: baseline;
      gap: 0.75rem;
      font-size: 0.75rem;
      color: var(--slate-300);
      padding: 0.1875rem 0;
    }

    .view-business .alert-row .muted { flex: 1; }

    .view-business .alert-note {
      font-size: 0.6875rem;
      color: var(--text-muted);
      margin-top: 0.375rem;
    }

    /* ---------- 卡3：缺口归因 ---------- */
    .view-business .gap-summary {
      display: flex;
      gap: 1.5rem;
      padding: 0.75rem 0.875rem;
      background: var(--slate-800);
      border-radius: 8px;
      margin-bottom: 0.875rem;
    }

    .view-business .gap-summary-item {
      display: flex;
      flex-direction: column;
      gap: 0.1875rem;
    }

    .view-business .gap-summary-label {
      font-size: 0.6875rem;
      color: var(--text-muted);
    }

    .view-business .gap-summary-value {
      font-size: 1rem;
      font-weight: 700;
      font-variant-numeric: tabular-nums;
    }

    .view-business .gap-list {
      display: flex;
      flex-direction: column;
      gap: 0.1875rem;
    }

    .view-business .gap-row {
      display: flex;
      align-items: center;
      gap: 0.625rem;
      font-size: 0.75rem;
      padding: 0.25rem 0;
    }

    .view-business .gap-name {
      width: 9.5rem;
      flex-shrink: 0;
      color: var(--slate-300);
      display: flex;
      align-items: center;
    }

    /* 门店名和部门名各占一行（joinStoreDept 判过前缀，两者不同才拆）。
       单行放不下「常州钟楼阿姨之家 常州钟楼保姆部」，拆两行比截断更完整。 */
    .view-business .gap-name-single,
    .view-business .gap-name-lines {
      flex: 1;
      min-width: 0;
    }

    .view-business .gap-name-single {
      display: flex;
      align-items: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .view-business .gap-name-lines {
      display: flex;
      flex-direction: column;
      gap: 0.0625rem;
      line-height: 1.25;
    }

    .view-business .gap-name-store {
      display: flex;
      align-items: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .view-business .gap-name-dept {
      font-size: 0.6875rem;
      color: var(--text-muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      /* 对齐上一行文字起点，不是圆点起点：圆点宽 8px + line-dot 右边距 0.5rem */
      padding-left: calc(8px + 0.5rem);
    }

    /* 缺口条以中线为零轴，欠账向左、超额向右 */
    .view-business .gap-track {
      flex: 1;
      position: relative;
      height: 14px;
      min-width: 120px;
    }

    .view-business .gap-axis {
      position: absolute;
      left: 50%;
      top: 0;
      bottom: 0;
      width: 1px;
      background: var(--slate-700);
    }

    .view-business .gap-bar {
      position: absolute;
      top: 3px;
      height: 8px;
      border-radius: 2px;
    }

    .view-business .gap-bar.neg { background: var(--rate-bad); border-radius: 2px 0 0 2px; }
    .view-business .gap-bar.pos { background: var(--rate-good); border-radius: 0 2px 2px 0; }

    .view-business .gap-value {
      width: 4.5rem;
      text-align: right;
      font-weight: 600;
      font-variant-numeric: tabular-nums;
      flex-shrink: 0;
    }

    .view-business .gap-rate {
      width: 3.5rem;
      text-align: right;
      font-variant-numeric: tabular-nums;
      flex-shrink: 0;
    }

    .view-business .gap-divider {
      font-size: 0.6875rem;
      color: var(--text-muted);
      margin: 0.5rem 0 0.25rem;
      padding-top: 0.5rem;
      border-top: 1px dashed var(--slate-700);
    }

    .view-business .dist-block {
      margin-top: 0.5rem;
      padding-top: 0.5rem;
      border-top: 1px solid var(--slate-800);
    }

    .view-business .dist-rows {
      display: flex;
      flex-direction: column;
      gap: 0.375rem;
    }

    .view-business .dist-row {
      display: flex;
      align-items: baseline;
      gap: 0.625rem;
      font-size: 0.75rem;
    }

    .view-business .rate-dist-label {
      width: 4.5rem;
      flex-shrink: 0;
      font-weight: 600;
      white-space: nowrap;
    }

    .view-business .dist-count {
      width: 1.5rem;
      text-align: right;
      color: var(--off-white);
      font-weight: 600;
      flex-shrink: 0;
    }

    .view-business .dist-names {
      color: var(--text-muted);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    /* ---------- 卡4：环比日对日 ---------- */
    .view-business .mom-legend {
      display: flex;
      gap: 1rem;
      font-size: 0.6875rem;
      color: var(--text-muted);
      margin-bottom: 0.5rem;
    }

    .view-business .mom-legend span { display: flex; align-items: center; gap: 0.3125rem; }

    .view-business .swatch {
      width: 10px;
      height: 10px;
      border-radius: 2px;
      display: inline-block;
    }

    .view-business .swatch.cur { background: var(--sky); }
    .view-business .swatch.prev { background: var(--slate-600); }

    .view-business .mom-chart {
      display: flex;
      align-items: flex-end;
      gap: 3px;
      height: 150px;
    }

    .view-business .mom-group {
      flex: 1;
      min-width: 0;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      gap: 1px;
      height: 100%;
      position: relative;
      padding-bottom: 1rem;
    }

    .view-business .mom-bar {
      flex: 1;
      min-width: 2px;
      border-radius: 2px 2px 0 0;
      transition: filter 0.15s ease;
    }

    .view-business .mom-bar.cur { background: var(--sky); }
    .view-business .mom-bar.prev { background: var(--slate-600); }
    .view-business .mom-group:hover .mom-bar { filter: brightness(1.3); }

    .view-business .mom-label {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      text-align: center;
      font-size: 0.5625rem;
      color: var(--text-muted);
    }

    .view-business .mom-weekday {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 0.5rem;
    }

    .view-business .mom-wd-item { text-align: center; }

    .view-business .mom-wd-bars {
      display: flex;
      align-items: flex-end;
      justify-content: center;
      gap: 2px;
      height: 60px;
      margin-bottom: 0.375rem;
    }

    .view-business .mom-wd-bars .mom-bar { width: 12px; flex: none; }

    .view-business .mom-wd-name {
      font-size: 0.6875rem;
      color: var(--slate-300);
    }

    .view-business .mom-wd-name.is-weekend { color: var(--cyan); }

    .view-business .mom-wd-delta {
      font-size: 0.6875rem;
      font-weight: 600;
      font-variant-numeric: tabular-nums;
      margin-top: 0.125rem;
    }

    /* 数据卡片网格 */
    .view-business .data-cards-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
      gap: 1.5rem;
      margin-bottom: 2rem;
    }

    .view-business .data-card {
      background: var(--navy);
      border: 1px solid var(--slate-700);
      border-radius: 12px;
      padding: 1.5rem;
      transition: all 0.2s;
      cursor: pointer;
      position: relative;
    }

    .view-business .data-card:hover {
      border-color: var(--sky);
      transform: translateY(-2px);
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    }

    .view-business .data-card-header {
      display: flex;
      justify-content: space-between;
      align-items: start;
      margin-bottom: 1.25rem;
    }

    .view-business .data-card-title {
      font-size: 1.5rem;
      font-weight: 600;
      color: var(--off-white);
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .view-business .card-icon {
      font-size: 1.25rem;
    }

    .view-business .data-card-badge {
      font-size: 0.75rem;
      padding: 0.25rem 0.625rem;
      border-radius: 4px;
      font-weight: 600;
    }

    .view-business .badge-city {
      background: var(--sky);
      color: var(--navy);
    }

    .view-business .badge-zone {
      background: var(--orange);
      color: var(--navy);
    }

    .view-business .badge-platform {
      background: var(--teal);
      color: var(--navy);
    }

    /* 指标网格 */
    .view-business .metrics-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1rem;
    }

    .view-business .metric-item {
      background: var(--slate-800);
      padding: 0.875rem;
      border-radius: 8px;
      border: 1px solid var(--slate-700);
    }

    .view-business .metric-label {
      font-size: 0.75rem;
      color: var(--slate-300);
      margin-bottom: 0.375rem;
    }

    .view-business .metric-value {
      font-size: 1.75rem;
      font-weight: 700;
      color: var(--off-white);
      display: flex;
      align-items: baseline;
      gap: 0.5rem;
    }

    .view-business .metric-value .unit {
      font-size: 0.875rem;
      font-weight: 500;
      color: var(--text-muted);
    }

    .view-business .metric-sub {
      font-size: 0.75rem;
      color: var(--text-muted);
      margin-top: 0.25rem;
    }

    /* 详情表格 */
    .view-business .detail-table {
      width: 100%;
      border-collapse: collapse;
      background: var(--navy);
      border: 1px solid var(--slate-700);
      border-radius: 12px;
      overflow: hidden;
    }

    .view-business .detail-table thead {
      background: var(--slate-800);
    }

    .view-business .detail-table th {
      padding: 1rem;
      text-align: left;
      font-size: 0.875rem;
      font-weight: 600;
      color: var(--slate-300);
      border-bottom: 1px solid var(--slate-700);
    }

    .view-business .detail-table td {
      padding: 1rem;
      font-size: 0.875rem;
      color: var(--off-white);
      border-bottom: 1px solid var(--slate-700);
    }

    .view-business .detail-table tbody tr {
      transition: background 0.2s;
      cursor: pointer;
    }

    .view-business .detail-table tbody tr:hover {
      background: rgba(56, 189, 248, 0.05);
    }

    .view-business .detail-table tbody tr:last-child td {
      border-bottom: none;
    }

    /* 占位符 */
    .view-business .placeholder-notice {
      text-align: center;
      padding: 3rem 2rem;
      background: var(--navy);
      border: 1px dashed var(--slate-700);
      border-radius: 12px;
      color: var(--text-muted);
      font-size: 0.875rem;
    }

    /* 门店卡片（方案A：部门业绩卡片） */
    .view-business .store-card {
      background: var(--navy);
      border: 1px solid var(--slate-700);
      border-radius: 12px;
      padding: 1.5rem;
      margin-bottom: 1.5rem;
      transition: all 0.2s;
    }

    .view-business .store-card:hover {
      border-color: var(--slate-600);
    }

    .view-business .store-card-header {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 1rem;
      margin-bottom: 1rem;
      padding-bottom: 1rem;
      border-bottom: 1px solid var(--slate-700);
    }

    .view-business .store-card-title {
      font-size: 1.75rem;
      font-weight: 600;
      color: var(--off-white);
      margin: 0;
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }

    /* 门店人数：规模属性，跟右侧金额指标区分开，用弱化的描边样式 */
    .view-business .store-staff-badge {
      font-size: 0.8125rem;
      font-weight: 600;
      color: var(--text-muted);
      background: var(--slate-800);
      border: 1px solid var(--slate-700);
      border-radius: 999px;
      padding: 0.1875rem 0.625rem;
      white-space: nowrap;
      vertical-align: middle;
    }

    /* 表头可点击进门店层。可点信号只加在表头，不加在整张 .store-card——
       卡里装着可点的部门卡，整张可点会让「点哪儿去哪儿」说不清，
       而且点部门时会冒泡命中两个 handler。 */
    .view-business .store-card-header.is-nav {
      cursor: pointer;
      margin: -0.25rem -0.5rem 1rem;
      padding: 0.25rem 0.5rem 1rem;
      border-radius: 8px;
      transition: background 0.15s;
    }

    .view-business .store-card-header.is-nav:hover {
      background: var(--slate-800);
    }

    /* 下钻提示：默认藏起来，hover 表头才出现——13 张门店卡each挂一个常驻
       「进入门店 ›」会把标题行搞得很吵，而这个信号只在要点的时候才需要 */
    .view-business .store-drill-hint {
      font-size: 0.8125rem;
      font-weight: 500;
      color: var(--sky);
      opacity: 0;
      transition: opacity 0.15s;
      white-space: nowrap;
    }

    .view-business .store-card-header.is-nav:hover .store-drill-hint {
      opacity: 1;
    }

    .view-business .store-total {
      font-size: 0.9375rem;
      color: var(--slate-300);
      text-align: right;
    }

    .view-business .store-total strong {
      font-size: 1.25rem;
      color: var(--off-white);
    }

    .view-business .store-total-sub {
      display: block;
      font-size: 0.8125rem;
      color: var(--text-muted);
      margin-top: 0.25rem;
    }

    /* 业务业绩卡片网格 */
    .view-business .business-metrics-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 0.75rem;
    }

    .view-business .business-metric-card {
      background: var(--slate-800);
      border: 1px solid var(--slate-700);
      border-radius: 8px;
      padding: 1rem;
      cursor: pointer;
      transition: all 0.2s;
      display: flex;
      flex-direction: column;
    }

    .view-business .business-metric-card:hover {
      border-color: var(--sky);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }

    /* 部门卡片改为上下两行：名称一行、金额一行，
       避免名称和金额挤在同一行导致「49.4」和「万」被拆到两行 */
    .view-business .business-metric-header {
      display: block;
      margin-bottom: 0.75rem;
    }

    .view-business .business-metric-name {
      font-size: 0.8125rem;
      font-weight: 600;
      color: var(--off-white);
      display: flex;
      align-items: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-bottom: 0.25rem;
    }

    .view-business .business-metric-value {
      font-size: 1.375rem;
      font-weight: 700;
      color: var(--off-white);
      white-space: nowrap;
      line-height: 1.15;
      font-variant-numeric: tabular-nums;
    }

    .view-business .business-metrics-grid.wide {
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }

    .view-business .business-metric-card.is-static {
      cursor: default;
    }

    .view-business .business-metric-card.is-static:hover {
      border-color: var(--slate-700);
      transform: none;
      box-shadow: none;
    }

    /* 只登记了归属、金额暂记 0 的部门 */
    .view-business .business-metric-card.is-pending {
      border-style: dashed;
    }

    .view-business .business-metric-meta {
      display: flex;
      align-items: baseline;
      gap: 0.5rem;
      margin-top: auto;        /* 贴卡片底部 */
      padding-top: 0.625rem;
      white-space: nowrap;
      font-size: 0.75rem;
      color: var(--text-muted);
    }

    .view-business .business-metric-meta .meta-count {
      margin-left: auto;       /* 人数始终靠右 */
    }

    /* 战区徽标。CLAUDE.md 早就记着它全项目搜不到样式规则、是没样式的裸文字
       （1e3ec05 就带进来了）。发现时不在改动范围内，这轮顺手补上。
       做成描边小标而不是纯文字：它和右侧的人数并排，两段都是灰色小字时
       分不出「哪个是战区、哪个是人数」。 */
    .view-business .business-metric-meta .meta-zone {
      color: var(--slate-300);
      background: var(--slate-900);
      border: 1px solid var(--slate-700);
      border-radius: 4px;
      padding: 0.0625rem 0.375rem;
      font-weight: 500;
    }

    /* 进度条通用块 */
    .view-business .progress-block {
      margin-top: 1rem;
    }

    .view-business .progress-block.compact {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin-top: 0;
    }

    .view-business .progress-block.compact .progress-bar {
      flex: 1;
    }

    .view-business .progress-label {
      font-size: 0.75rem;
      color: var(--slate-300);
      margin-bottom: 0.5rem;
      display: flex;
      align-items: baseline;
      gap: 0.5rem;
    }

    .view-business .progress-label strong {
      font-size: 0.875rem;
      font-weight: 700;
    }

    .view-business .progress-label em {
      font-style: normal;
      font-size: 0.6875rem;
      opacity: 0.85;
    }

    .view-business .progress-rate {
      font-size: 0.75rem;
      font-weight: 600;
      min-width: 2.875rem;
      text-align: right;
      white-space: nowrap;
      font-variant-numeric: tabular-nums;
    }

    /* 卡片底部 */
    .view-business .card-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 1rem;
      margin-top: 1rem;
      padding-top: 1rem;
      border-top: 1px solid var(--slate-700);
    }

    .view-business .card-footer-value {
      font-weight: 600;
      color: var(--sky);
      text-align: right;
    }

    .view-business .card-footer-value em {
      display: block;
      font-style: normal;
      font-size: 0.75rem;
      font-weight: 400;
      color: var(--text-muted);
      margin-top: 0.125rem;
    }

    .view-business .card-note {
      margin-top: 1rem;
      padding: 0.75rem;
      background: rgba(249, 115, 22, 0.08);
      border: 1px solid rgba(249, 115, 22, 0.2);
      border-radius: 6px;
      font-size: 0.75rem;
      color: var(--orange);
    }

    .view-business .card-note.muted {
      background: var(--slate-800);
      border-color: var(--slate-700);
      color: var(--text-muted);
    }

    .view-business .data-card.is-static {
      cursor: default;
    }

    .view-business .data-card.is-static:hover {
      border-color: var(--slate-700);
      transform: none;
      box-shadow: none;
    }

    /* 只登记了归属、金额暂记 0 的城市／战区 */
    .view-business .data-card.is-pending {
      border-style: dashed;
    }

    /* 层级标题栏 */
    .view-business .level-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 1.5rem;
      margin-bottom: 1.5rem;
      padding: 1.5rem;
      background: var(--navy);
      border: 1px solid var(--slate-700);
      border-radius: 12px;
    }

    .view-business .level-title {
      font-size: 2rem;
      font-weight: 600;
      color: var(--off-white);
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }

    .view-business .level-meta {
      font-size: 0.875rem;
      color: var(--slate-300);
      margin-top: 0.5rem;
    }

    .view-business .level-side {
      text-align: right;
      flex-shrink: 0;
    }

    .view-business .level-side-label {
      font-size: 0.75rem;
      color: var(--slate-300);
      margin-bottom: 0.25rem;
    }

    .view-business .level-side-value {
      font-size: 1.5rem;
      font-weight: 600;
      color: var(--sky);
    }

    /* 小节标题 */
    .view-business .section-heading {
      font-size: 1rem;
      font-weight: 600;
      color: var(--slate-300);
      margin: 1.5rem 0 1rem;
      padding-bottom: 0.625rem;
      border-bottom: 1px solid var(--slate-700);
    }

    .view-business .section-heading:first-child {
      margin-top: 0;
    }

    .view-business .section-sub {
      margin-left: 0.625rem;
      font-size: 0.75rem;
      font-weight: 400;
      color: var(--text-muted);
    }

    /* ===== 人员分析：四张摘要卡 =====
       必须和上面那五张钱的 KPI 卡长得不一样——切到人员分析页签时它们还在页面上，
       一页九张卡长得一样会分不清「钱」和「人」。三处区别：
         1. 扁平底色，不用 .kpi-card 那个 navy→slate-800 渐变
         2. 强调条在顶边，.kpi-card 是 4px 左边条
         3. 没有 sparkline——人的维度没有每日数据，画不出来，这个区别是天然的
       另外数字小一号（1.375rem vs 1.75rem），层级上让钱卡在前。 */
    .view-business .panel-cards {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0.75rem;
      margin-bottom: 0.875rem;
    }

    .view-business .panel-card {
      position: relative;
      background: var(--slate-800);
      border: 1px solid var(--slate-700);
      border-radius: 8px;
      padding: 0.875rem 1rem 0.75rem;
      cursor: pointer;
      overflow: hidden;
      transition: border-color 0.15s ease, background 0.15s ease;
    }

    .view-business .panel-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 3px;
      background: var(--slate-600);
    }

    .view-business .panel-card:hover {
      border-color: var(--slate-600);
      background: var(--navy);
    }

    .view-business .panel-card.is-open {
      border-color: var(--sky);
      background: var(--navy);
    }

    .view-business .panel-card.is-open::before { background: var(--sky); }
    .view-business .panel-card.rate-good::before { background: var(--rate-good); }
    .view-business .panel-card.rate-near::before { background: var(--rate-near); }
    .view-business .panel-card.rate-warn::before { background: var(--rate-warn); }
    .view-business .panel-card.rate-bad::before  { background: var(--rate-bad); }

    .view-business .panel-card-label {
      font-size: 0.8125rem;
      color: var(--slate-300);
      font-weight: 500;
      margin-bottom: 0.4375rem;
    }

    .view-business .panel-card-value {
      font-size: 1.375rem;
      font-weight: 700;
      color: var(--off-white);
      line-height: 1;
      margin-bottom: 0.375rem;
      font-variant-numeric: tabular-nums;
    }

    /* 副值要能换行：「思凡伴育 · 高度集中（前 3 人占比最高）」比卡宽 */
    .view-business .panel-card-sub {
      font-size: 0.6875rem;
      color: var(--text-muted);
      line-height: 1.5;
      min-height: 2rem;
    }

    .view-business .panel-card-expand {
      position: absolute;
      top: 0.75rem;
      right: 0.875rem;
      font-size: 0.6875rem;
      color: var(--text-muted);
      opacity: 0;
      transition: opacity 0.15s ease;
    }

    .view-business .panel-card:hover .panel-card-expand,
    .view-business .panel-card.is-open .panel-card-expand { opacity: 1; }
    .view-business .panel-card.is-open .panel-card-expand { color: var(--sky); }

    /* 卡片行下方那句常驻口径说明。四块全收起时页面上只剩这一句，
       所以它不能折叠（「金额以部门级为准」是本模块最容易被误读的一条）。 */
    .view-business .panel-caliber {
      font-size: 0.75rem;
      color: var(--text-muted);
      line-height: 1.7;
      padding: 0.75rem 0.875rem;
      background: var(--slate-800);
      border: 1px solid var(--slate-700);
      border-left: 3px solid var(--slate-600);
      border-radius: 6px;
      margin-bottom: 1.25rem;
    }

    .view-business .panel-caliber strong { color: var(--slate-300); font-weight: 600; }

    /* ②业务结构的条线卡。**必须和 .module-tab、.panel-card 都长得不一样**——
       切到②时三者同时在页面上（模块条在最上、条线卡在模块体里、④那三张摘要卡
       不在②所以不同屏，但模块条一定同屏）。区别：
         .module-tab   顶部 3px 色条 + active 描边高亮，label/value/hint 三行
         .panel-card   顶部 3px 色条 + 「展开／收起」角标，固定 4 列网格
         .line-card    **左侧 3px 色条**（不是顶部）+ 角标，flex 自适应宽度
       用 flex 而不是 4 列网格：条线数量随 scope 变（1~4 条），
       固定 4 列会在只有 2 条时留两个空格子。 */
    .view-business .line-card-row {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
      margin-bottom: 0.875rem;
    }

    .view-business .line-card {
      position: relative;
      flex: 1 1 11rem;
      min-width: 11rem;
      background: var(--slate-800);
      border: 1px solid var(--slate-700);
      border-left: 3px solid var(--slate-600);
      border-radius: 6px;
      padding: 0.75rem 0.875rem 0.6875rem;
      cursor: pointer;
      transition: border-color 0.15s ease, background 0.15s ease;
    }

    .view-business .line-card:hover {
      border-color: var(--slate-600);
      border-left-color: var(--sky);
      background: var(--navy);
    }

    .view-business .line-card.is-open {
      border-color: var(--sky);
      border-left-color: var(--sky);
      background: var(--navy);
    }

    .view-business .line-card-label {
      font-size: 0.8125rem;
      color: var(--slate-300);
      font-weight: 500;
      margin-bottom: 0.375rem;
    }

    .view-business .line-card-value {
      font-size: 1.25rem;
      font-weight: 700;
      color: var(--off-white);
      line-height: 1;
      margin-bottom: 0.3125rem;
      font-variant-numeric: tabular-nums;
    }

    /* 口径行：说清主值是什么。比 sub 亮一档（--slate-300 vs --text-muted），
       因为它回答的是「这个数是什么」，比「几个部门」重要一档。 */
    .view-business .line-card-caliber {
      font-size: 0.6875rem;
      color: var(--slate-300);
      line-height: 1.5;
      margin-bottom: 0.125rem;
    }

    .view-business .line-card-sub {
      font-size: 0.6875rem;
      color: var(--text-muted);
      line-height: 1.5;
    }

    .view-business .line-card-expand {
      position: absolute;
      top: 0.6875rem;
      right: 0.75rem;
      font-size: 0.6875rem;
      color: var(--text-muted);
      opacity: 0;
      transition: opacity 0.15s ease;
    }

    .view-business .line-card:hover .line-card-expand,
    .view-business .line-card.is-open .line-card-expand { opacity: 1; }
    .view-business .line-card.is-open .line-card-expand { color: var(--sky); }

    /* 全收起时那句提示。**不是空态**（数据在，只是没点开），
       所以用中性底色、不套 .module-empty 那套橙/灰描边。 */
    .view-business .line-hint {
      font-size: 0.75rem;
      color: var(--text-muted);
      line-height: 1.7;
      padding: 0.75rem 0.875rem;
      background: var(--slate-800);
      border: 1px dashed var(--slate-700);
      border-radius: 6px;
    }

    .view-business .line-minor-note {
      font-size: 0.6875rem;
      color: var(--text-muted);
      line-height: 1.6;
      margin-bottom: 0.75rem;
    }

    .view-business .line-hint strong { color: var(--slate-300); font-weight: 600; }

    /* ②的角度格（按来源 / 按客户两行）。**第四种卡**，前三种是：
         .module-tab  顶部 3px 色条，导航骨架，永远全显示
         .line-card   左侧 3px 色条，选业务线
         .panel-card  顶部 3px 色条 + 角标，④里那三张摘要卡
       切到②展开一条线时，模块条 + 条线卡 + 角度格三层同屏，必须一眼分得开。
       角度格的区别：**无色条**、底色更深、更矮更密（一行能放 4 个）。 */
    .view-business .angle-row {
      margin-bottom: 0.875rem;
    }

    .view-business .angle-row-head {
      display: flex;
      align-items: baseline;
      gap: 0.625rem;
      margin-bottom: 0.4375rem;
    }

    .view-business .angle-row-label {
      font-size: 0.8125rem;
      font-weight: 600;
      color: var(--slate-300);
    }

    .view-business .angle-row-note {
      font-size: 0.6875rem;
      color: var(--text-muted);
    }

    .view-business .angle-cards {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
    }

    .view-business .angle-card {
      position: relative;
      flex: 1 1 9rem;
      min-width: 9rem;
      background: var(--navy);
      border: 1px solid var(--slate-700);
      border-radius: 6px;
      padding: 0.5625rem 0.75rem 0.5rem;
      cursor: pointer;
      transition: border-color 0.15s ease, background 0.15s ease;
    }

    .view-business .angle-card:hover { border-color: var(--slate-600); }

    .view-business .angle-card.is-open {
      border-color: var(--sky);
      background: var(--slate-800);
    }

    .view-business .angle-card-label {
      font-size: 0.75rem;
      color: var(--slate-300);
      margin-bottom: 0.25rem;
    }

    .view-business .angle-card-value {
      font-size: 1.0625rem;
      font-weight: 700;
      color: var(--off-white);
      line-height: 1;
      margin-bottom: 0.25rem;
      font-variant-numeric: tabular-nums;
    }

    .view-business .angle-card-sub {
      font-size: 0.6875rem;
      color: var(--text-muted);
    }

    .view-business .angle-card-expand {
      position: absolute;
      top: 0.5rem;
      right: 0.625rem;
      font-size: 0.625rem;
      color: var(--text-muted);
      opacity: 0;
      transition: opacity 0.15s ease;
    }

    .view-business .angle-card:hover .angle-card-expand,
    .view-business .angle-card.is-open .angle-card-expand { opacity: 1; }
    .view-business .angle-card.is-open .angle-card-expand { color: var(--sky); }

    /* 代理口径说明。**常驻、不折叠**——「老客是按渠道名认的、不是真首单判定」
       是这两行最容易被误读的一条，折起来等于没说（同 .panel-caliber 那条）。 */
    .view-business .angle-caliber {
      font-size: 0.75rem;
      color: var(--text-muted);
      line-height: 1.7;
      padding: 0.6875rem 0.875rem;
      background: var(--slate-800);
      border: 1px solid var(--slate-700);
      border-left: 3px solid var(--rate-warn);
      border-radius: 6px;
      margin-bottom: 0.875rem;
    }

    .view-business .angle-caliber strong { color: var(--slate-300); font-weight: 600; }

    .view-business .angle-detail {
      background: var(--slate-800);
      border: 1px solid var(--slate-700);
      border-radius: 8px;
      padding: 0.875rem 1rem;
      margin-bottom: 1rem;
    }

    .view-business .angle-detail-head {
      font-size: 0.8125rem;
      color: var(--slate-300);
      line-height: 1.7;
      margin-bottom: 0.75rem;
    }

    .view-business .angle-detail-head strong { color: var(--off-white); }

    .view-business .angle-detail-ch {
      display: block;
      font-size: 0.6875rem;
      color: var(--text-muted);
    }

    .view-business .angle-sub-title {
      font-size: 0.75rem;
      font-weight: 600;
      color: var(--slate-300);
      margin: 0.875rem 0 0.4375rem;
    }

    .view-business .angle-sub-title:first-of-type { margin-top: 0; }

    .view-business .funnel {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
    }

    .view-business .funnel-step {
      flex: 1 1 7rem;
      min-width: 7rem;
      background: var(--navy);
      border: 1px solid var(--slate-700);
      border-radius: 6px;
      padding: 0.5625rem 0.75rem;
    }

    .view-business .funnel-label {
      font-size: 0.6875rem;
      color: var(--text-muted);
      margin-bottom: 0.25rem;
    }

    .view-business .funnel-value {
      font-size: 1.0625rem;
      font-weight: 700;
      color: var(--off-white);
      font-variant-numeric: tabular-nums;
    }

    .view-business .funnel-note {
      font-size: 0.625rem;
      color: var(--text-muted);
      line-height: 1.5;
      margin-top: 0.25rem;
    }

    .view-business .pie-chart-row {
      display: flex;
      align-items: center;
      gap: 1.25rem;
      flex-wrap: wrap;
      margin-bottom: 0.75rem;
    }

    .view-business .pie-chart {
      width: 8.5rem;
      height: 8.5rem;
      min-width: 8.5rem;
      border-radius: 50%;
      flex-shrink: 0;
    }

    .view-business .pie-legend {
      display: flex;
      flex-direction: column;
      gap: 0.375rem;
      flex: 1 1 12rem;
    }

    .view-business .pie-legend-item {
      display: flex;
      align-items: baseline;
      gap: 0.4375rem;
      font-size: 0.75rem;
    }

    .view-business .pie-legend-dot {
      width: 0.5rem;
      height: 0.5rem;
      border-radius: 50%;
      flex-shrink: 0;
    }

    .view-business .pie-legend-name {
      color: var(--slate-300);
      min-width: 5.5rem;
    }

    .view-business .pie-legend-val {
      color: var(--text-muted);
      font-variant-numeric: tabular-nums;
    }

    /* 折叠说明：原生 <details>，不需要 JS 状态 */
    .view-business .note-fold {
      margin-top: 0.875rem;
      border-top: 1px solid var(--slate-700);
      padding-top: 0.625rem;
    }

    .view-business .note-fold > summary {
      cursor: pointer;
      font-size: 0.75rem;
      color: var(--text-muted);
      list-style: none;
      display: flex;
      align-items: center;
      gap: 0.375rem;
    }

    .view-business .note-fold > summary::-webkit-details-marker { display: none; }

    .view-business .note-fold > summary::before {
      content: '▸';
      font-size: 0.625rem;
      transition: transform 0.15s ease;
    }

    .view-business .note-fold[open] > summary::before { transform: rotate(90deg); }
    .view-business .note-fold > summary:hover { color: var(--slate-300); }
    .view-business .note-fold .scope-note { margin-top: 0.5rem; }

    /* ===== 单人业绩：人效分布 ===== */
    .view-business .eff-panel {
      background: var(--slate-800);
      border: 1px solid var(--slate-700);
      border-radius: 8px;
      padding: 1.25rem;
    }

    .view-business .eff-stats {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
      gap: 0.75rem;
      margin-bottom: 1.25rem;
    }

    .view-business .eff-stat {
      padding: 0.75rem;
      background: var(--slate-900);
      border: 1px solid var(--slate-700);
      border-radius: 6px;
    }

    .view-business .eff-stat-label {
      font-size: 0.75rem;
      color: var(--text-muted);
      margin-bottom: 0.25rem;
    }

    .view-business .eff-stat-value {
      font-size: 1.125rem;
      font-weight: 600;
      color: var(--slate-100);
      font-variant-numeric: tabular-nums;
    }

    .view-business .eff-stat-note {
      margin-top: 0.25rem;
      font-size: 0.6875rem;
      color: var(--text-muted);
      line-height: 1.4;
    }

    .view-business .eff-bars {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }

    .view-business .eff-bar-row {
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }

    .view-business .eff-bar-label {
      width: 3.75rem;
      flex-shrink: 0;
      font-size: 0.8125rem;
      color: var(--slate-300);
      font-variant-numeric: tabular-nums;
    }

    .view-business .eff-bar-track {
      flex: 1;
      height: 1.25rem;
      background: var(--slate-900);
      border-radius: 3px;
      overflow: hidden;
    }

    /* 分布图是「人数」，不是完成率，所以一律中性蓝，不套 rate-* 语义色 */
    .view-business .eff-bar-fill {
      display: block;
      height: 100%;
      background: var(--sky);
      border-radius: 3px;
      transition: width 0.3s ease;
    }

    .view-business .eff-bar-fill.is-neg {
      background: var(--rate-bad);
    }

    .view-business .eff-bar-count {
      width: 3rem;
      flex-shrink: 0;
      text-align: right;
      font-size: 0.8125rem;
      color: var(--slate-300);
      font-variant-numeric: tabular-nums;
    }

    .view-business .eff-bar-marks {
      width: 8.5rem;
      flex-shrink: 0;
      display: flex;
      gap: 0.25rem;
    }

    .view-business .eff-mark {
      font-size: 0.625rem;
      font-style: normal;
      color: var(--text-muted);
      border: 1px solid var(--slate-600);
      border-radius: 3px;
      padding: 0.0625rem 0.3125rem;
      white-space: nowrap;
    }

    .view-business .eff-notes {
      display: flex;
      flex-wrap: wrap;
      gap: 1.25rem;
      margin-top: 1.125rem;
      padding-top: 0.875rem;
      border-top: 1px solid var(--slate-700);
      font-size: 0.8125rem;
      color: var(--text-muted);
    }

    .view-business .eff-notes strong {
      color: var(--slate-100);
      font-variant-numeric: tabular-nums;
    }

    .view-business .eff-notes .rate-bad strong {
      color: var(--rate-bad);
    }

    /* 口径说明：常驻，不折叠。员工级和部门级对不上是这个模块最容易被误用的点。 */
    .view-business .scope-note {
      margin-top: 1rem;
      padding: 0.75rem 0.875rem;
      background: var(--slate-900);
      border-left: 2px solid var(--slate-600);
      border-radius: 0 4px 4px 0;
      font-size: 0.75rem;
      line-height: 1.65;
      color: var(--text-muted);
    }

    .view-business .scope-note strong {
      color: var(--slate-300);
      font-weight: 600;
    }

    /* ===== 单人业绩：门店依赖风险 ===== */
    .view-business .conc-panel {
      background: var(--slate-800);
      border: 1px solid var(--slate-700);
      border-radius: 8px;
      padding: 1.25rem;
    }

    .view-business .conc-row {
      padding: 0.875rem 0;
      border-bottom: 1px solid var(--slate-700);
    }

    .view-business .conc-row:first-child { padding-top: 0; }
    .view-business .conc-row:last-child { border-bottom: none; padding-bottom: 0; }

    .view-business .conc-head {
      display: flex;
      align-items: baseline;
      gap: 0.5rem;
      margin-bottom: 0.5rem;
    }

    .view-business .conc-name {
      font-size: 0.9375rem;
      font-weight: 600;
      color: var(--slate-100);
    }

    .view-business .conc-count {
      font-size: 0.75rem;
      color: var(--text-muted);
    }

    .view-business .conc-meta {
      display: flex;
      align-items: baseline;
      flex-wrap: wrap;
      gap: 0.75rem;
      margin-top: 0.5rem;
      font-size: 0.75rem;
      color: var(--text-muted);
    }

    .view-business .conc-band {
      font-weight: 600;
    }

    .view-business .conc-names {
      flex: 1;
      min-width: 12rem;
      color: var(--slate-300);
    }

    .view-business .conc-names em {
      margin-left: 0.25rem;
      font-style: normal;
      color: var(--text-muted);
      font-variant-numeric: tabular-nums;
    }

    .view-business .conc-tail {
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }

    /* ===== 页面级切换条（门店经营 | 人员分析）=====
       和 .trend-switch 刻意不同：那个是 KPI 展开区内部的子视图开关，
       这个切的是整页主内容，做成下边框式页签以示层级更高。 */
    .view-business .page-tabs {
      display: flex;
      gap: 0.25rem;
      border-bottom: 1px solid var(--slate-700);
      margin-bottom: 1.25rem;
    }

    .view-business .page-tab {
      background: transparent;
      border: none;
      border-bottom: 2px solid transparent;
      color: var(--text-muted);
      font-size: 0.875rem;
      font-family: inherit;
      padding: 0.5rem 0.875rem;
      cursor: pointer;
      transition: color 0.15s ease, border-color 0.15s ease;
      margin-bottom: -1px;
    }

    .view-business .page-tab:hover { color: var(--slate-300); }

    .view-business .page-tab.active {
      color: var(--off-white);
      border-bottom-color: var(--sky);
      font-weight: 600;
    }

    .view-business .page-tab-badge {
      margin-left: 0.375rem;
      font-size: 0.6875rem;
      font-weight: 400;
      color: var(--text-muted);
      font-variant-numeric: tabular-nums;
    }

    /* ===== 目标合理性 ===== */
    .view-business .tier-panel {
      background: var(--slate-800);
      border: 1px solid var(--slate-700);
      border-radius: 8px;
      padding: 1.25rem;
    }

    .view-business .tier-verdict {
      font-size: 0.8125rem;
      line-height: 1.7;
      color: var(--slate-300);
      padding-bottom: 0.875rem;
      margin-bottom: 0.25rem;
      border-bottom: 1px solid var(--slate-700);
    }

    .view-business .tier-verdict .muted {
      color: var(--text-muted);
      margin-left: 0.375rem;
    }

    .view-business .tier-table .muted { color: var(--text-muted); }

    /* 样本不足的档位整行压暗：留着但不让它参与看趋势 */
    .view-business .tier-table tr.is-thin td { opacity: 0.55; }

    .view-business .thin-flag {
      margin-left: 0.25rem;
      font-size: 0.625rem;
      color: var(--text-muted);
      cursor: help;
    }

    /* 达标率条用中性色：它表示「这一档多少人过线」，档位本身不分好坏，
       套完成率四档色会让人以为高档位=达标。同 .eff-bar-fill 的处理。 */
    .view-business .mini-bar span.fill-neutral { background: var(--sky); }

    /* ===== 退款拖累 ===== */
    .view-business .drag-panel {
      background: var(--slate-800);
      border: 1px solid var(--slate-700);
      border-radius: 8px;
      padding: 1.25rem;
    }

    /* 面板里第一个 alert-block 不要再顶一段外边距 */
    .view-business .drag-panel .alert-block:first-child { margin-top: 0; }

    .view-business .drag-list {
      margin-top: 1rem;
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }

    .view-business .drag-row {
      display: grid;
      grid-template-columns: 5.5rem 1fr 6rem 3.5rem auto;
      align-items: center;
      gap: 0.625rem;
      font-size: 0.75rem;
      color: var(--slate-300);
    }

    .view-business .drag-name {
      font-weight: 600;
      color: var(--off-white);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .view-business .drag-dept {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .view-business .drag-row .muted { color: var(--text-muted); }

    .view-business .drag-rate {
      text-align: right;
      font-weight: 600;
      font-variant-numeric: tabular-nums;
    }

    .view-business .drag-amt {
      font-size: 0.6875rem;
      white-space: nowrap;
      font-variant-numeric: tabular-nums;
    }

    /* 窄屏时把部门名和金额收掉，保留姓名/条/比率三列 */
    @media (max-width: 900px) {
      .view-business .drag-row { grid-template-columns: 5rem 1fr 3.5rem; }
      .view-business .drag-dept, .view-business .drag-amt { display: none; }
      /* 四张卡挤到 900px 以下时副值会撑成四五行，改 2×2 */
      .view-business .panel-cards { grid-template-columns: repeat(2, 1fr); }
    }

    /* 表格辅助 */
    .view-business .staff-note {
      margin-left: 0.5rem;
      font-size: 0.6875rem;
      font-weight: 400;
      color: var(--text-muted);
      border: 1px solid var(--slate-600);
      border-radius: 4px;
      padding: 0.0625rem 0.375rem;
      cursor: help;
    }

    .view-business .team-chip {
      font-size: 0.75rem;
      padding: 0.125rem 0.5rem;
      border: 1px solid var(--slate-600);
      border-radius: 4px;
      color: var(--slate-300);
    }

    .view-business .detail-table .rank-cell {
      font-weight: 600;
      color: var(--slate-300);
    }

    .view-business .detail-table .strong {
      font-weight: 600;
    }

    .view-business .text-warn {
      color: var(--orange);
    }

    .view-business .text-muted {
      color: var(--slate-600);
    }

    .view-business .ranking-empty {
      text-align: center;
      padding: 1.25rem;
      color: var(--text-muted);
      font-size: 0.875rem;
    }

    /* ========== 签单明细面板 ========== */
    .view-business .order-details-panel {
      margin-top: 1rem;
    }

    .view-business .order-metrics-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1rem;
      margin-bottom: 1.5rem;
    }

    .view-business .order-metric-card {
      background: var(--slate-800);
      border: 1px solid var(--slate-700);
      border-radius: 8px;
      padding: 1rem;
      text-align: center;
    }

    .view-business .order-metric-label {
      font-size: 0.75rem;
      color: var(--text-muted);
      margin-bottom: 0.5rem;
    }

    .view-business .order-metric-value {
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--off-white);
      font-variant-numeric: tabular-nums;
    }

    /* 分布图区块 */
    .view-business .order-detail-note {
      font-size: 0.8125rem;
      color: var(--slate-500);
      text-align: center;
      margin: 1rem 0 1.25rem 0;
    }

    .view-business .course-category-note {
      font-size: 0.75rem;
      color: var(--slate-500);
      margin-top: 0.75rem;
      line-height: 1.5;
    }

    .view-business .distribution-section {
      margin-top: 1.5rem;
    }

    .view-business .distribution-section:first-child {
      margin-top: 0;
    }

    .view-business .dist-heading {
      font-size: 0.875rem;
      font-weight: 600;
      color: var(--off-white);
      margin-bottom: 0.75rem;
    }

    .view-business .dist-bar {
      display: grid;
      grid-template-columns: 5rem 1fr 8rem;
      align-items: center;
      gap: 0.75rem;
      margin-bottom: 0.5rem;
    }

    .view-business .dist-label {
      font-size: 0.8125rem;
      color: var(--slate-300);
      text-align: right;
    }

    .view-business .dist-track {
      height: 8px;
      background: var(--slate-800);
      border-radius: 999px;
      position: relative;
      overflow: hidden;
    }

    .view-business .dist-fill {
      height: 100%;
      border-radius: 999px;
      transition: width 0.3s ease;
    }

    /* 五种颜色：服务周期-天蓝、订单类型-翠绿、产品板块-琥珀、报课数量-紫、热门课程-玫红 */
    .view-business .dist-fill-sky {
      background: var(--sky);
    }

    .view-business .dist-fill-emerald {
      background: #10b981;
    }

    .view-business .dist-fill-amber {
      background: #f59e0b;
    }

    .view-business .dist-fill-violet {
      background: #8b5cf6;
    }

    .view-business .dist-fill-rose {
      background: #f43f5e;
    }

    .view-business .dist-value {
      font-size: 0.8125rem;
      color: var(--slate-400);
      text-align: right;
      font-variant-numeric: tabular-nums;
    }

    /* 折叠区域 */
    .view-business .dist-more {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease;
    }

    .view-business .dist-more.is-expanded {
      max-height: 1000px;
    }

    .view-business .dist-toggle {
      margin-top: 0.5rem;
      padding: 0.375rem 0.75rem;
      font-size: 0.75rem;
      color: var(--sky);
      background: transparent;
      border: 1px solid var(--slate-700);
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .view-business .dist-toggle:hover {
      background: var(--slate-800);
      border-color: var(--sky);
    }

    /* 响应式 */
    @media (max-width: 768px) {
      .view-business .data-cards-grid {
        grid-template-columns: 1fr;
      }

      .view-business .metrics-grid {
        grid-template-columns: 1fr;
      }

      .view-business .dashboard-controls {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
      }

      .view-business .order-metrics-grid {
        grid-template-columns: 1fr;
      }

      .view-business .dist-bar {
        grid-template-columns: 4rem 1fr 7rem;
        gap: 0.5rem;
      }

    }