/* ══════════════════════════════════════════════════════════════════════
   theme-quiet.css — 「极简高级感」浅色皮肤（2026-10-19）
   对标：抖音「酷炫后台管理(已开源)」wbr664393425-lgtm/scaffold-master
        实测帧 10s / 26s：白底、大留白、1px 极浅边框、无重色块、紫色点缀、
        状态用圆点不用色块、组织树用直角连线 + 光点沿层级流动。

   加载：styles.css → theme-v2.css → theme-quiet.css（仅浅色生效，dark 仍走 neon）
   回滚：删 index.html 里对应 <link>。
   ────────────────────────────────────────────────────────────────────── */

/* ── 1. token：把「深蓝商务」换成「近白 + 紫灰」────────────────────── */
:root{
  --bg:#f7f8fa;
  --card:#ffffff;
  --ink:#15171c;
  --sub:#5f6673;
  --faint:#9aa1ac;
  --muted:#7b8290;

  --line:#ebedf1;
  --line2:#e2e5ea;

  /* 强调色：紫蓝。视频里按钮是蓝，正文点缀偏紫，取中间 */
  --accent:#4a5cf5;
  --accent-bg:#eef0ff;
  --accent-line:#d6dbff;

  --green:#16a34a; --green-bg:#ecfdf3; --green-line:#c7f0d7;
  --teal:#0d9488;  --teal-bg:#ecfdf9;  --teal-line:#c6f0e9;
  --amber:#b45309; --amber-bg:#fff8ec; --amber-line:#f6e3c3;
  --red:#dc2626;   --red-bg:#fef2f2;   --red-line:#fbd5d5;

  /* 圆角更大、阴影几乎不用 —— 高级感主要来自「1px 细边 + 留白」 */
  --r-sm:8px; --r-md:12px; --r-lg:16px;
  --sh-1:none;
  --sh-2:0 1px 2px rgba(17,20,28,.06);
  --sh-3:0 12px 32px -12px rgba(17,20,28,.18);
  --focus:0 0 0 3px rgba(74,92,245,.18);
}

/* ── 2. 底与字：去掉渐变/毛玻璃，回到纯色大留白 ─────────────────── */
body{background:var(--bg); color:var(--ink); letter-spacing:0}
.view{padding:30px 32px 40px}
.sec{margin-bottom:28px}

/* ── 3. 侧栏：白色 + 细右边框；激活项用「浅底 + 黑字 + 小竖条」──── */
.side{
  width:212px;background:var(--card);border-right:1px solid var(--line);
  padding:18px 14px;
}
.brand{padding:2px 6px 20px}
.brand .logo{width:36px;height:36px;border-radius:10px;box-shadow:none;background:transparent}
.bn{font-size:14.5px;font-weight:600;letter-spacing:-.01em}
.bs{font-size:11.5px;color:var(--faint)}

.ngrp{margin-top:18px}
.ngrp-t{
  font-size:10.5px;font-weight:500;letter-spacing:.08em;color:var(--faint);
  padding:0 8px 6px;text-transform:uppercase;
}
.nv{
  padding:7px 10px;border-radius:var(--r-sm);font-size:13.5px;color:var(--sub);gap:9px;
  transition:background .18s cubic-bezier(.4,0,.2,1), color .18s;
}
.nv:hover{background:#f4f5f7;color:var(--ink)}
.nv.on{
  background:#f2f3f6;color:var(--ink);font-weight:600;
}
.nv.on::before{
  content:"";position:absolute;left:-7px;top:50%;transform:translateY(-50%);
  width:2px;height:16px;border-radius:2px;background:var(--accent);
  /* 光点流动：参考视频「光点从根节点一路递过去」，这里只做一次入场扫描 */
  animation:quiet-scan .45s cubic-bezier(.4,0,.2,1) 1;
}
@keyframes quiet-scan{
  from{height:0;opacity:0}
  to{height:16px;opacity:1}
}
.nv.on .ic{opacity:.85}
.nv .ct{
  font-size:11px;background:#f0f1f4;color:var(--faint);
  padding:0 6px;border-radius:999px;min-width:20px;text-align:center;
}
.nv.on .ct{background:#e8eaff;color:var(--accent)}

.side-foot{border-top:1px solid var(--line);padding-top:14px;margin-top:14px}
.sf-line{font-size:11.5px;padding:3px 8px;color:var(--faint)}
.sf-line b{color:var(--sub);font-weight:600}
.sf-note{font-size:11px;color:var(--faint);border-top:1px dashed var(--line)}

/* ── 4. 顶栏：白底细线，去掉模糊与半透明 ───────────────────────── */
.top{
  height:60px;background:var(--card);border-bottom:1px solid var(--line);
  backdrop-filter:none;padding:0 28px;
}
.crumb{font-size:20px;font-weight:650;letter-spacing:-.025em;white-space:nowrap}
/* ⛔ select 不能用 inline-flex：theme-v2 把 .sel 设了 display:inline-flex，
   Chrome 会把 <select> 的选中项文本渲染成空（实测顶栏账期下拉变空壳）。 */
select.sel, .daysel, .rolesel{
  display:inline-block; line-height:32px; padding-top:0; padding-bottom:0;
  text-align:left;
}
/* 账期串很长（20261011_20261017），不限宽会把右侧「刷新」挤出可视区 */
.daysel{max-width:168px;text-overflow:ellipsis}
.rolsel{max-width:132px;text-overflow:ellipsis}
.top-right{gap:8px}
.top-logo{width:22px;height:22px;border-radius:7px}

#gsearch{
  height:36px;background:#f5f6f8;border:1px solid transparent;
  border-radius:10px;font-size:13px;padding:0 14px;
}
#gsearch:focus{background:var(--card);border-color:var(--accent-line);box-shadow:var(--focus)}

/* 控件：白底细边，高度 34；主操作才用实心 */
.sel,.btn,.top-right .btn.sm{
  height:34px;border-radius:10px;border:1px solid var(--line2);
  background:var(--card);color:var(--ink);font-size:12.5px;padding:0 12px;
  box-shadow:none;
}
.sel:hover,.btn:hover{background:#fafbfc;border-color:#d6dae1}
#refreshBtn,.btn.primary{
  background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600;
  box-shadow:none;
}
#refreshBtn:hover,.btn.primary:hover{
  background:#3f50e8;border-color:#3f50e8;color:#fff;
}
.btn.icon{width:34px;padding:0}

.pill{
  height:26px;background:#f4f5f7;color:var(--faint);border-radius:999px;font-size:11.5px;
}
.pill.fresh{background:transparent;border:1px solid var(--line2);color:var(--faint)}
.pill.fresh.stale{background:var(--amber-bg);border-color:var(--amber-line);color:var(--amber)}

.dry{height:32px;border-radius:999px;border:1px solid var(--line2);font-size:12px}
.dry:has(input:checked){background:var(--amber-bg);border-color:var(--amber-line);color:var(--amber)}

/* ── 5. 卡片：白 + 1px 细边 + 无阴影（高级感的根在这儿）───────── */
.card,.kpi,.asset,.alert,.todo{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:none;
}
.card{padding:22px 24px}
.kpi{padding:20px}
.asset{padding:18px 20px}

/* KPI：黑字大数 + 灰标签，去掉渐变/发光 */
.kpi .l{font-size:12px;color:var(--faint);margin-bottom:8px;letter-spacing:0}
.kpi .v{
  font-size:28px;font-weight:600;color:var(--ink);letter-spacing:-.03em;
  background:none;-webkit-text-fill-color:currentColor;text-shadow:none;
}
.kpi .s{font-size:11.5px;color:var(--faint);margin-top:6px}
.kpi:hover{border-color:#dfe2e8;box-shadow:none;transform:none}

/* 区块标题：22px 才是视频里那种「一屏一个主题」的分量 */
.sec-t{
  font-size:16px;font-weight:600;letter-spacing:-.01em;margin:0 0 14px;gap:10px;
}
.sec-t .hint{font-size:12px;color:var(--faint);font-weight:400}

.grid{gap:14px}

/* ── 6. 表格：无斑马线、极浅分隔、hover 才给底色 ──────────────── */
table{font-size:12.5px}
th,td{padding:10px 12px;border-bottom:1px solid #f1f2f5}
th{
  background:var(--card);color:var(--faint);font-weight:500;font-size:11.5px;
  letter-spacing:.02em;border-bottom:1px solid var(--line);
}
tbody tr:nth-child(even) td{background:transparent}
tbody tr:hover td{background:#fafbfc;box-shadow:none}
tbody tr:last-child td{border-bottom:none}

.tw,.tblwrap{
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--card);
  box-shadow:none;background-image:none;
}
th[data-sort]:hover{background:#fafbfc;color:var(--sub)}
th.sa::after,th.sd::after{font-size:10px;opacity:.55}

/* ── 7. 状态：用圆点 + 淡底，不用大色块 ───────────────────────── */
.tag,.chip{
  font-weight:500;border-radius:999px;padding:2px 9px;font-size:11px;
  background:#f4f5f7;color:var(--sub);border:1px solid transparent;
}
.chip.good,.L0,.L1{background:var(--green-bg);color:var(--green);border-color:var(--green-line)}
.chip.warn,.L3{background:var(--amber-bg);color:var(--amber);border-color:var(--amber-line)}
.chip.bad,.L4{background:var(--red-bg);color:var(--red);border-color:var(--red-line)}
.L2{background:var(--teal-bg);color:var(--teal);border-color:var(--teal-line)}
.sev{width:24px;border-radius:6px;font-size:10.5px;font-weight:600}
.sev.P0{background:var(--red-bg);color:var(--red)}
.sev.P1{background:var(--amber-bg);color:var(--amber)}
.sev.P2{background:#f4f5f7;color:var(--faint)}

/* 进度条：淡底 + 单色填充，无渐变无发光 */
.bar{height:5px;background:#f0f1f4;border-radius:999px}
.bar>i{background:var(--accent);border-radius:999px;box-shadow:none}
.bar.g>i{background:var(--green)} .bar.w>i{background:var(--amber)} .bar.b>i{background:var(--red)}

/* ── 8. 口径指纹条 / 提示条：极轻，不抢视线 ───────────────────── */
.fpbar{background:var(--card);border-bottom:1px solid var(--line);padding:8px 28px;gap:8px}
.fp{background:#f7f8fa;border:1px solid var(--line);color:var(--faint);border-radius:999px;padding:2px 10px;font-size:11px}
.fp.b-period{background:var(--green-bg);border-color:var(--green-line);color:var(--green)}
.fp.b-realtime{background:var(--amber-bg);border-color:var(--amber-line);color:var(--amber)}
.fp.b-snapshot{background:var(--accent-bg);border-color:var(--accent-line);color:var(--accent)}

.sb-in,.alert,.todo{border-radius:var(--r-md)}
.sb-in{background:var(--amber-bg);border:1px solid var(--amber-line);color:#8a5a12}
.todo:hover{box-shadow:none;border-color:#dfe2e8}
.todo .rk{background:#f2f3f6;color:var(--sub);font-weight:600}

/* ── 9. 浮层 ──────────────────────────────────────────────────── */
.drawer,.spop,.modal .mb,.toast{
  background:var(--card);border:1px solid var(--line);box-shadow:var(--sh-3);
  backdrop-filter:none;
}
.drawer{border-radius:var(--r-lg) 0 0 var(--r-lg)}
.modal .mb{border-radius:var(--r-lg)}
.toast{background:#1b1e25;color:#fff;border:none;border-radius:999px;padding:9px 18px}

/* ── 10. 滚动条：极细灰，不抢 ─────────────────────────────────── */
.view::-webkit-scrollbar,.tw::-webkit-scrollbar,.tblwrap::-webkit-scrollbar{width:10px;height:10px}
.view::-webkit-scrollbar-thumb,.tw::-webkit-scrollbar-thumb,
.tblwrap::-webkit-scrollbar-thumb{
  background:#dfe2e7;border-radius:999px;border:3px solid transparent;background-clip:content-box;
}
.view::-webkit-scrollbar-thumb:hover,.tw::-webkit-scrollbar-thumb:hover{
  background:#c9ced6;background-clip:content-box;
}

/* ── 11. 光点流动（视频里「光点从根节点一路递过去」的降噪版）───────
   只给「当前账期/当前筛选」这类状态条用，不铺满全站 */
.fp.b-period{position:relative;overflow:hidden}
.fp.b-period::after{
  content:"";position:absolute;top:0;left:-40%;width:40%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(22,163,74,.16),transparent);
  animation:quiet-flow 3.6s ease-in-out infinite;
}
@keyframes quiet-flow{0%{left:-40%}55%{left:110%}100%{left:110%}}
@media (prefers-reduced-motion:reduce){
  .fp.b-period::after,.nv.on::before{animation:none}
}

/* ── 12. 响应式微调 ──────────────────────────────────────────── */
@media(max-width:1440px){
  .view{padding:24px 24px 36px}
  .top{padding:0 20px}
}
@media(max-width:1100px){
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:820px){
  .side{background:var(--card)}
  .view{padding:18px 16px 28px}
  .crumb{font-size:17px}
  .kpi .v{font-size:24px}
}

/* ══════════════════════════════════════════════════════════════════
   13. 结构改造：窄图标栏 + 问候首屏（2026-10-19 第二轮）
   对标视频的「左侧 72px 图标栏 + 大字号问候 + 数据概览」
   ⚠ 只改布局表现，模块/路由/权限逻辑一律不动
   ══════════════════════════════════════════════════════════════════ */

/* ── 13.1 侧栏 → 窄图标栏 ─────────────────────────────────────── */
.side{
  width:76px; padding:14px 8px 10px; align-items:stretch;
  overflow:hidden;
  transition:width .22s cubic-bezier(.4,0,.2,1);
}
/* 悬停展开：视频里是固定窄栏，但 13 个模块纯图标不好认，展开一排更好用 */
.side:hover{width:196px}
.side:hover .nv{flex-direction:row; justify-content:flex-start; gap:10px; padding:7px 10px}
.side:hover .nv .nl{font-size:13px;opacity:1;height:auto}
.side:hover .ngrp-t{opacity:1;height:auto;padding:8px 10px 4px}
.side:hover .brand-txt{opacity:1;width:auto}
.side:hover .side-foot{opacity:1;height:auto}

.brand{
  padding:0 0 14px; justify-content:center; gap:0;
}
.side:hover .brand{justify-content:flex-start;gap:10px;padding-left:2px}
.brand .logo{width:34px;height:34px;border-radius:9px}
.brand-txt{opacity:0;width:0;overflow:hidden;transition:opacity .18s}
.brand .bn{font-size:13.5px}
.brand .bs{font-size:11px}

nav{gap:2px}
/* 分组标题在窄栏里换成一条极淡分隔线 */
.ngrp{margin-top:6px;padding-top:6px;border-top:1px solid var(--line)}
.ngrp:first-child{margin-top:0;padding-top:0;border-top:none}
.ngrp-t{
  opacity:0;height:0;overflow:hidden;padding:0 10px;
  font-size:10px;letter-spacing:.08em;color:var(--faint);
}

.nv{
  position:relative; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; padding:8px 2px; border-radius:10px; min-height:52px;
  transition:background .16s, color .16s, padding .2s;
}
.nv .ic{width:20px;height:20px;flex:none;opacity:.62;transition:opacity .16s}
.nv .nl{
  font-size:10px;line-height:1.15;letter-spacing:0;color:inherit;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
}
.nv:hover{background:#f4f5f7;color:var(--ink)}
.nv:hover .ic{opacity:.85}
.nv.on{background:#f2f3f6;color:var(--ink)}
.nv.on .ic{opacity:1;color:var(--accent)}
.nv.on .nl{font-weight:600}
/* 激活竖条贴在图标栏左缘 */
.nv.on::before{left:-8px;top:50%;height:18px;width:2px}

/* 计数角标：窄栏时挪到右上角，不占文字行 */
.nv .ct{
  position:absolute;top:4px;right:6px;
  font-size:9.5px;line-height:1;padding:2px 4px;border-radius:999px;
  background:#eceef2;color:var(--faint);min-width:0;
}
.side:hover .nv .ct{position:static;margin-left:auto;top:auto;right:auto;font-size:10.5px;padding:1px 6px}

.side-foot{opacity:0;height:0;overflow:hidden;transition:opacity .18s}

/* ── 13.2 问候首屏 ───────────────────────────────────────────── */
.hero{
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  padding:4px 0 22px;
}
.hero-hi{
  font-size:30px;font-weight:650;letter-spacing:-.035em;line-height:1.2;color:var(--ink);
}
.hero-hi b{font-weight:650}
.hero-sub{
  margin-top:8px;font-size:13px;color:var(--faint);letter-spacing:0;
}
.hero-sub b{color:var(--sub);font-weight:600}
.hero-day{
  font-size:11.5px;color:var(--faint);font-variant-numeric:tabular-nums;
  white-space:nowrap;padding-bottom:4px;
}

/* 首屏之后的第一块内容不要顶得太狠 */
.hero + .sec > .sec-t{margin-top:0}

/* ── 13.3 窄屏回到横向导航（窄栏在手机上不可用）──────────────── */
@media(max-width:820px){
  .side{width:100%;padding:6px 10px}
  .side:hover{width:100%}
  .nv{flex-direction:row;gap:6px;padding:6px 8px;min-height:0}
  .nv .ic{width:16px;height:16px}
  .nv .nl{font-size:12px}
  .nv .ct{position:static;margin-left:4px}
  .ngrp{border-top:none;margin-top:0;padding-top:0;display:flex}
  .hero{flex-direction:column;align-items:flex-start;gap:6px;padding-bottom:16px}
  .hero-hi{font-size:24px}
}

/* ── 13.4 窄栏与顶栏的两处修补（实测发现）───────────────────────── */
/* ① 侧栏 76px 时「履约看板」被挤成两行：字母间距 + 断词规则都要管住 */
.side{width:80px}
.nv .nl{
  white-space:nowrap; word-break:keep-all; letter-spacing:-.02em;
  font-size:10px; max-width:100%; display:block;
}
/* ② 顶栏「日期台账」被压成「日」：右组控件一律不收缩、不换行 */
.top-right > *{flex:0 0 auto}
#dayLedgerBtn, .top-right .btn, .top-right .sel, .top-right .pill{white-space:nowrap}
/* 搜索框让出一部分宽度，避免把右侧挤爆 */
.sbox{width:min(420px,100%)}

/* ③ 窄栏文字被压到 29px（实测）→ 明确占满宽度并居中，不再依赖 flex 的 intrinsic 宽度 */
.nv .nl{
  width:100%; display:block; text-align:center; font-size:9.5px;
  letter-spacing:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.side:hover .nv .nl{width:auto;text-align:left;font-size:13px}

/* ④ SVG 图标被基础样式染成色块：styles.css 里 `.nv .ic{background:currentColor}`
      本来是给「无图标的占位方块」用的，套到 SVG 上就成了实心圆点。 */
.nv svg.ic{background:none !important;border-radius:0;fill:none}
.ic-dot{display:block;width:14px;height:14px;border-radius:4px;background:currentColor;opacity:.45}

/* ⑤ 顶栏在 1440 以内仍被挤（「日期台账」直接被推出可视区）：
      搜索框让宽 + 账期串再收一点 */
@media(max-width:1440px){
  .top-mid{max-width:300px;flex:0 1 300px}
  .sbox{width:100%}
  .daysel{max-width:150px}
}

/* ── 14. 「数据体检」折叠条（首屏减负）──────────────────────────── */
.health-fold{
  margin:10px 0 4px;border:1px solid var(--line);border-radius:12px;
  background:var(--card);overflow:hidden;
}
.health-fold > summary{
  display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;
  font-size:12.5px;color:var(--sub);list-style:none;user-select:none;
}
.health-fold > summary::-webkit-details-marker{display:none}
.health-fold > summary:hover{background:#fafbfc}
.hf-ico{
  width:18px;height:18px;flex:none;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:11px;font-weight:700;
  background:var(--amber-bg);color:var(--amber);border:1px solid var(--amber-line);
}
.health-fold b{color:var(--ink);font-weight:600}
.hf-tags{color:var(--faint);font-size:12px}
.hf-hint{margin-left:auto;color:var(--faint);font-size:11.5px}
.health-fold > summary::after{
  content:"▾";color:var(--faint);font-size:10px;transition:transform .18s;
}
.health-fold[open] > summary::after{transform:rotate(180deg)}
.hf-body{padding:0 14px 8px}
.hf-body .sb-in{margin:6px 0}
/* 硬故障时图标换红 */
.health-fold.open .hf-ico{background:var(--red-bg);color:var(--red);border-color:var(--red-line)}

/* ══════════════════════════════════════════════════════════════════
   15. 门店「组织」视图（对标视频的部门管理）
   左侧汇总卡 + 城市清单 / 右侧 城市→门店 缩进树
   ══════════════════════════════════════════════════════════════════ */
.st-views{margin-left:auto;display:inline-flex;gap:2px;padding:2px;background:#f2f3f6;border-radius:9px}
.st-v{
  border:0;background:none;font-family:inherit;font-size:12px;color:var(--faint);
  padding:4px 12px;border-radius:7px;cursor:pointer;transition:background .16s,color .16s;
}
.st-v:hover{color:var(--sub)}
.st-v.on{background:var(--card);color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(17,20,28,.06)}

.org{display:flex;gap:16px;align-items:flex-start}
.org-side{width:236px;flex:none;display:flex;flex-direction:column;gap:10px}
.org-main{
  flex:1;min-width:0;background:var(--card);border:1px solid var(--line);
  border-radius:12px;padding:16px 18px;
}

/* 左侧：全司汇总卡 */
.org-card{
  background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px;
}
.ogc-t{font-size:12px;color:var(--faint);margin-bottom:8px}
.ogc-row{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:5px 0;font-size:12.5px;color:var(--sub);
}
.ogc-row + .ogc-row{border-top:1px solid #f4f5f8}
.ogc-row b{font-size:13.5px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.ogc-row b.neg{color:var(--red)}

/* 左侧：城市清单 */
.org-cities{display:flex;flex-direction:column;gap:4px;max-height:520px;overflow:auto}
.oc-item{
  display:grid;grid-template-columns:1fr auto;gap:2px 8px;align-items:baseline;
  text-align:left;border:1px solid transparent;background:none;border-radius:9px;
  padding:8px 10px;cursor:pointer;font-family:inherit;
  transition:background .16s,border-color .16s;
}
.oc-item:hover{background:#f7f8fa}
.oc-item.on{background:var(--accent-bg);border-color:var(--accent-line)}
.oc-n{font-size:12.5px;font-weight:600;color:var(--ink)}
.oc-m{grid-column:1;font-size:11px;color:var(--faint)}
.oc-v{grid-column:2;grid-row:1 / span 2;align-self:center;font-size:12px;
  font-variant-numeric:tabular-nums;color:var(--sub)}
.oc-v.neg{color:var(--red)}
.oc-item.on .oc-n{color:var(--accent)}

/* 右侧：树 */
.org-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding-bottom:12px;border-bottom:1px solid var(--line)}
.orh-l b{font-size:16px;font-weight:650;letter-spacing:-.01em}
.orh-l span{margin-left:8px;font-size:11.5px;color:var(--faint)}
.orh-r{font-size:12px;color:var(--sub);font-variant-numeric:tabular-nums}
.orh-r b.neg{color:var(--red)}

/* 根节点：胶囊 + 光点 */
.org-node{
  display:inline-flex;align-items:center;gap:8px;margin:14px 0 4px;
  padding:6px 14px 6px 12px;border:1px solid var(--line2);border-radius:999px;
  background:#fafbfc;font-size:13px;
}
.org-node b{font-weight:600}
.on-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 3px rgba(74,92,245,.14)}
.on-n{font-size:11px;color:var(--faint);background:var(--card);border:1px solid var(--line);
  border-radius:999px;padding:0 7px}

/* 子节点：缩进 + 直角连线（视频里那种折线） */
.org-children{position:relative;margin-left:14px;padding-left:18px}
.org-children::before{
  content:"";position:absolute;left:6px;top:0;bottom:14px;width:1px;background:var(--line2);
}
.org-leaf{
  position:relative;display:grid;
  grid-template-columns:minmax(180px,1.6fr) 130px 108px 62px;
  gap:12px;align-items:center;padding:9px 10px;border-radius:9px;cursor:pointer;
  transition:background .14s;
}
.org-leaf + .org-leaf{border-top:1px solid #f5f6f8}
.org-leaf::before{
  content:"";position:absolute;left:-12px;top:50%;width:12px;height:1px;background:var(--line2);
}
.org-leaf:hover{background:#fafbfc}
.org-leaf.on{background:var(--accent-bg);box-shadow:inset 0 0 0 1px var(--accent-line)}
.ol-dot{position:absolute;left:-15px;top:50%;transform:translateY(-50%);
  width:5px;height:5px;border-radius:50%;background:var(--green);box-shadow:0 0 0 2px var(--card)}
.ol-dot.neg{background:var(--red)}
.ol-n{font-size:12.5px;font-weight:500;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ol-m{font-size:11.5px;color:var(--faint);font-variant-numeric:tabular-nums}
.ol-v{font-size:12.5px;font-weight:600;text-align:right;font-variant-numeric:tabular-nums;color:var(--ink)}
.ol-v.neg{color:var(--red)}
.ol-r{font-size:11.5px;text-align:right;color:var(--faint);font-variant-numeric:tabular-nums}

@media(max-width:1100px){
  .org{flex-direction:column}
  .org-side{width:100%;flex-direction:row;overflow:auto}
  .org-card{min-width:220px}
  .org-cities{flex-direction:row;max-height:none}
  .org-leaf{grid-template-columns:minmax(140px,1fr) 110px 96px 54px}
}

/* 硬故障标：摘要里的红色小标签（默认折叠后靠它提醒） */
.hf-hard{
  font-size:10px;font-weight:600;padding:1px 6px;border-radius:999px;
  background:var(--red-bg);color:var(--red);border:1px solid var(--red-line);
}
.health-fold .hf-tags{color:var(--sub)}

/* ⑥ 顶栏最后一档收紧（1280 宽仍差 ~80px）：
      演练模式只留勾选框（文字进 title）、角色下拉限 96px、新鲜度 pill 限 112px */
@media(max-width:1440px){
  .dry{padding:0 8px}
  .dry .dry-txt{display:none}
  .rolsel{max-width:96px}
  .pill.fresh{max-width:112px;overflow:hidden;text-overflow:ellipsis}
  .top-right{gap:6px}
}

/* ── 16. 组织树第三层：门店 → 店员 ────────────────────────────────
   ⛔ 人员数据懒加载（点箭头才拉），不拖慢组织视图首屏 */
.org-leaf{grid-template-columns:16px minmax(160px,1.6fr) 130px 108px 62px}

/* 展开箭头：默认很淡，hover/展开时加深 */
.ol-car{
  width:16px;height:16px;padding:0;border:0;background:none;cursor:pointer;
  color:var(--faint);font-size:10px;line-height:16px;text-align:center;
  border-radius:4px;transition:color .14s,background .14s;
}
.ol-car:hover{background:#eef0f4;color:var(--sub)}
.ol-car.on{color:var(--accent)}
.org-leaf.open{background:#fbfbfd}
.org-leaf.open .ol-n{font-weight:600}
.ol-st{color:var(--accent);font-weight:500}

/* 店员子表：缩进 + 细左边线，与门店行对齐 */
.org-sub{
  position:relative;margin:2px 0 6px 34px;padding:2px 0 2px 14px;
  border-left:1px solid var(--line2);
}
.os-row{
  display:grid;
  grid-template-columns:minmax(96px,1.2fr) 92px 110px 118px 76px 84px;
  gap:10px;align-items:center;padding:5px 8px;border-radius:7px;
  font-size:11.5px;color:var(--sub);font-variant-numeric:tabular-nums;
}
.os-row:hover{background:#f6f7f9}
.os-n{font-size:12px;color:var(--ink);font-weight:500;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.os-e{font-family:ui-monospace,Menlo,monospace;font-size:10.5px;color:var(--faint)}
.os-m{white-space:nowrap;color:var(--faint)}
.os-m.bad{color:var(--red)}
.os-empty{padding:7px 10px;font-size:11.5px;color:var(--faint)}

@media(max-width:1100px){
  .org-leaf{grid-template-columns:16px minmax(130px,1fr) 110px 96px 54px}
  .os-row{grid-template-columns:minmax(80px,1fr) 84px 100px 84px}
  .os-row .os-m:nth-child(n+5){display:none}
}

/* ⑦ 门店行「7,018 单 · ¥206,090 · 7 人」在 130px 列里折成两行（截图实测「7 / 人」）
      → 列放宽 + 强制单行；人数字段单独上色不换行 */
.org-leaf{grid-template-columns:16px minmax(150px,1.6fr) 176px 108px 58px}
.ol-m{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ol-st{white-space:nowrap}
@media(max-width:1400px){
  .org-leaf{grid-template-columns:16px minmax(120px,1.4fr) 156px 96px 54px}
  .org-leaf .ol-m{font-size:11px}
}

/* ⑧ 店员行各列被 1.2fr 拉得太散（姓名到员工号之间 230px 空白）
      → 定宽列 + 左侧聚拢，读起来还是一条线 */
.os-row{
  grid-template-columns:132px 86px 108px 112px 66px 78px;
  justify-content:start;
}
.os-n{max-width:132px}
@media(max-width:1100px){
  .os-row{grid-template-columns:104px 78px 96px 96px}
}

/* ── 17. 组织树增强：UPH / 逐日 / 排序 / 导出（2026-10-19 第五轮）──── */

/* 店员行改成 8 列（多了展开箭头与 UPH） */
.os-row{
  grid-template-columns:14px 120px 82px 104px 62px 108px 60px 76px;
  justify-content:start;cursor:pointer;
}
.os-row:hover{background:#f2f4f8}
.os-row.open{background:#f7f8fb}
.os-n{max-width:120px}
/* UPH 是这个视图的核心比较项，加粗上色，不与其它灰字混在一起 */
.os-uph{color:var(--ink);font-weight:600}
.os-car{
  width:14px;height:14px;padding:0;border:0;background:none;cursor:pointer;
  color:var(--faint);font-size:9px;line-height:14px;text-align:center;border-radius:3px;
}
.os-car:hover{background:#e8ebf1;color:var(--sub)}
.os-car.on{color:var(--accent)}

/* 逐日：7 个小块横向排，一屏能看完全周波动 */
.os-days{
  display:flex;gap:6px;flex-wrap:wrap;margin:4px 0 8px 20px;padding-left:10px;
  border-left:1px solid var(--line2);
}
.osd{
  display:grid;grid-template-columns:auto auto;gap:0 5px;align-items:baseline;
  padding:5px 9px;border:1px solid var(--line);border-radius:8px;background:var(--card);
  font-size:10.5px;color:var(--faint);font-variant-numeric:tabular-nums;
}
.osd i{grid-column:1 / -1;font-style:normal;font-size:10px;color:var(--faint);margin-bottom:2px}
.osd b{font-size:12.5px;font-weight:600;color:var(--ink)}
.osd em{font-style:normal;font-size:10px;color:var(--faint)}
.osd b + span{font-size:10px}

/* 头部：排序 chips + 导出 */
.org-head{align-items:center;flex-wrap:wrap;gap:10px}
.org-head2{display:flex;justify-content:flex-end;padding:6px 0 0}
.orh-tools{margin-left:auto;display:flex;align-items:center;gap:10px}
.orh-sort{display:inline-flex;gap:2px;padding:2px;background:#f2f3f6;border-radius:9px}
.os-sort{
  border:0;background:none;font-family:inherit;font-size:11.5px;color:var(--faint);
  padding:3px 9px;border-radius:7px;cursor:pointer;white-space:nowrap;
  transition:background .16s,color .16s;
}
.os-sort:hover{color:var(--sub)}
.os-sort.on{background:var(--card);color:var(--ink);font-weight:600;
  box-shadow:0 1px 2px rgba(17,20,28,.06)}
.btn-sm{padding:3px 10px;font-size:11.5px;height:26px}

@media(max-width:1250px){
  .os-row{grid-template-columns:14px 104px 78px 96px 56px 96px}
  .os-row .os-m:nth-child(n+7){display:none}   /* 窄档先藏「错拣/超时」，UPH 保留 */
}

/* 缺席日：淡灰虚线块，与有数据的白块区分（不是 0 单，是没上班） */
.osd.off{background:#fafbfc;border-style:dashed;color:#b6bdc9}
.osd.off b{color:#b6bdc9;font-weight:500}

/* ── 18. 人效预警（2026-10-19 第六轮）──────────────────────────────
   规则集中在 stores.js 的 ORG_RULES；这里只管呈现 */
.ol-flag{
  display:inline-block;margin-left:5px;padding:0 5px;border-radius:4px;
  font-size:9.5px;font-style:normal;line-height:15px;font-weight:600;
  vertical-align:middle;white-space:nowrap;
}
.ol-flag.uph{background:var(--amber-bg);color:var(--amber);border:1px solid var(--amber-line)}
.ol-flag.to{background:var(--red-bg);color:var(--red);border:1px solid var(--red-line)}
/* 汇总行里的徽标稍大一点，方便扫 */
.orh-alert{font-size:11.5px;color:var(--faint);display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.orh-alert b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.orh-alert .ol-flag{font-size:10.5px;line-height:16px;margin-left:2px}
.orh-alert .dim{color:var(--faint)}

/* 城市清单上的黄点：该城有人效偏低门店 */
.oc-dot{
  display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--amber);vertical-align:middle;margin-left:2px;
}

/* 口径说明：常驻在树下方，不折叠（口径比数字重要） */
.org-note{
  margin-top:14px;padding-top:10px;border-top:1px solid var(--line);
  font-size:10.5px;line-height:1.7;color:var(--faint);
}
.org-note b{color:var(--sub);font-weight:600}

.org-head2{justify-content:space-between;align-items:center;gap:12px}
@media(max-width:1100px){
  .org-head2{flex-direction:column;align-items:flex-start;gap:4px}
}

/* ── 19. 预警列 / 下钻高亮 / 周内趋势（2026-10-19 第七轮）────────── */
.st-alert{white-space:nowrap}
.st-alert .ol-flag{margin-left:0;margin-right:3px}
/* 可点的徽标：给出手型与下划线暗示，否则没人知道能点 */
.st-jump{cursor:pointer}
.st-jump:hover{filter:brightness(.94);text-decoration:underline}

/* 下钻后闪一下最慢员工那一行，避免“滚过去了但没看见” */
.os-row.hi{
  animation:osHi 1.8s ease-out;
}
@keyframes osHi{
  0%{background:rgba(234,88,12,.22)}
  60%{background:rgba(234,88,12,.10)}
  100%{background:transparent}
}

/* 周内人效趋势：7 根小柱 + 后3天 vs 前3天 */
.org-trend{
  display:flex;align-items:flex-end;gap:10px;margin:10px 0 2px;
  padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:#fbfbfd;
}
.ot-l{font-size:10.5px;color:var(--faint);white-space:nowrap;align-self:center}
.ot-bar{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:26px}
.ot-bar b{
  display:block;width:18px;border-radius:3px 3px 0 0;
  background:linear-gradient(180deg,#b9bffb,#8e97f7);
}
.ot-bar:hover b{background:linear-gradient(180deg,#8e97f7,#5b68f0)}
.ot-bar i{font-style:normal;font-size:9px;color:var(--faint);font-variant-numeric:tabular-nums}
.ot-d{
  margin-left:auto;align-self:center;font-size:11.5px;font-weight:600;
  color:var(--sub);font-variant-numeric:tabular-nums;text-align:right;
}
.ot-d em{display:block;font-style:normal;font-size:9.5px;font-weight:400;color:var(--faint)}
.ot-d.down{color:var(--red)}
.ot-d.up{color:var(--green)}

/* ── 20. 侧栏品牌标（2026-10-19）───────────────────────────────────
   透明底红色图形标：不再是大红方块，面积只剩图形本身，
   在近白侧栏里是「品牌点缀」而不是「警报色块」。 */
.brand .logo{
  width:38px;height:38px;border-radius:0;background:transparent;
  box-shadow:none;object-fit:contain;
}
.side:hover .brand .logo{width:32px;height:32px}   /* 展开时文字为主，标小一点 */
.top-logo{width:20px;height:20px;border-radius:0;background:transparent}

/* ⑨ 品牌标最终定义（覆盖上面几处历史尺寸，避免 34/36/38 互相打架）
      —— 透明底图形标，尺寸固定 40px，不随侧栏 hover 变化（跳动很廉价） */
.brand .logo{
  width:40px;height:40px;border-radius:0;background:transparent;
  box-shadow:none;object-fit:contain;
  transition:none;
}
.side:hover .brand .logo{width:40px;height:40px}

/* ⑩ 品牌标（SVG 版）：颜色跟主题，尺寸固定，不再是大红方块 */
.brand .logo{
  width:30px;height:30px;flex:none;border-radius:0;background:transparent;
  box-shadow:none;color:#d8232a;               /* 品牌红 */
  transition:none;
}
.side:hover .brand .logo{width:30px;height:30px}
html.dark .brand .logo{color:#ff5a5f}          /* 深色底上提亮，否则红发闷 */

/* ⑪ 登录 / 账号页品牌标：图标用 SVG（清晰），名称交给文字（可读） */
.lg-logo{
  width:44px;height:44px;flex:none;border-radius:11px;color:#d8232a;
  background:rgba(216,35,42,.07);padding:6px;
}
.ad-logo{
  width:30px;height:30px;flex:none;color:#d8232a;vertical-align:middle;
  margin-right:8px;
}

/* ⑫ 顶栏品牌标：桌面隐藏（侧栏已有），≤820px 侧栏 .brand 被隐藏时补位。
      ⛔ 不能删：删了手机上就没有品牌标识（实测窄屏 visibleCount = 0）。 */
.top-logo{
  display:none;width:22px;height:22px;flex:none;border-radius:0;
  background:transparent;color:#d8232a;
}
@media(max-width:820px){
  .top-logo{display:block}
}

/* ⑬ 深色下基础样式给 logo 留了 box-shadow（rgba(0,0,0,.55)），
      在透明底 SVG 上会显出「暗框」。显式去掉。 */
html.dark .brand .logo{box-shadow:none;background:transparent}

/* ⑭ 品牌标尺寸微调：30px 在 80px 窄栏里偏小，34px 更稳（SVG 不会糊，放大无代价） */
.brand .logo,
.side:hover .brand .logo{width:34px;height:34px}

/* ══ 21. 品牌区定稿（2026-10-20）════════════════════════════════════
   老板要求：用回**原始 logo 图**（红底方块 + 白购物袋），名字用文字加上，
   不对图片做任何去底 / 改色 / 重绘。
   窄栏（80px）：图标在上、"嗨云购"小字在下；
   悬停展开（196px）：图标在左、名称 + 店铺数在右。 */
.brand{
  flex-direction:column;justify-content:center;align-items:center;
  gap:5px;padding:0 0 12px;
}
.brand .logo{
  width:36px;height:36px;flex:none;border-radius:10px;
  background:transparent;object-fit:contain;
  box-shadow:0 1px 3px rgba(208,2,23,.18);
}
.brand-nm{
  font-size:10px;line-height:1;color:var(--sub);letter-spacing:.02em;
  white-space:nowrap;
}
.side:hover .brand{
  flex-direction:row;justify-content:flex-start;align-items:center;
  gap:10px;padding:0 0 12px 2px;
}
.side:hover .brand .logo{width:34px;height:34px}
.side:hover .brand-nm{display:none}          /* 展开后名字由 brand-txt 承担 */
html.dark .brand .logo{box-shadow:0 1px 3px rgba(0,0,0,.5)}

/* 登录卡 / 账号页：原版完整标志原样显示（不做去底/改色），只控制尺寸与圆角 */
.lg-logo{
  width:64px;height:64px;flex:none;border-radius:14px;padding:0;background:transparent;
  object-fit:contain;box-shadow:0 2px 8px rgba(208,2,23,.16);
}
.ad-logo{
  width:30px;height:30px;flex:none;border-radius:8px;margin-right:8px;
  background:transparent;object-fit:contain;vertical-align:middle;
}

/* ⑮ 原图是「图形 + 品牌字标」一体的：尺寸太小字标会糊。
      登录卡放到 72px（卡片空间足够），账号页 34px，保证字标可辨。 */
.lg-logo{width:72px;height:72px;border-radius:16px}
.ad-logo{width:34px;height:34px;border-radius:9px}

/* ══ 22. 品牌区终版（2026-10-20）════════════════════════════════════
   老板指定：倒入这张原版完整 logo（红底 + 购物袋 + 嗨云购 + HI YUNGOU），
   **原样使用，不做任何修改**（不裁剪/不去底/不改色/不重绘）。
   名字在图里，所以不再另加文字。 */
.brand{
  flex-direction:column;justify-content:center;align-items:center;
  gap:0;padding:0 0 10px;
}
.brand .logo{
  width:72px;height:72px;flex:none;border-radius:14px;
  background:transparent;object-fit:contain;
  box-shadow:0 2px 8px rgba(200,16,46,.18);
}
.side:hover .brand{
  flex-direction:row;justify-content:flex-start;align-items:center;
  gap:11px;padding:0 0 10px 2px;
}
.side:hover .brand .logo{width:64px;height:64px}
html.dark .brand .logo{box-shadow:0 2px 8px rgba(0,0,0,.5)}

/* 登录卡：原图放大到 128（字标「HI YUNGOU」也能看清） */
.lg-logo{width:128px;height:128px;border-radius:26px;padding:0;background:transparent;
  object-fit:contain;box-shadow:0 6px 20px rgba(200,16,46,.18)}
/* 账号页 */
.ad-logo{width:40px;height:40px;border-radius:9px;margin-right:10px;
  background:transparent;object-fit:contain;vertical-align:middle}
/* 窄屏顶栏（侧栏品牌块在该断点隐藏，靠它补位） */
.top-logo{display:none;width:24px;height:24px;flex:none;border-radius:6px;
  background:transparent;object-fit:contain}
@media(max-width:820px){ .top-logo{display:block} }

/* 商品涨跌榜「数据陈旧」警示（303 窗口早于当前账期 >3 天时出现）
   用 token 变量而非硬编码色值；红色是因为误读代价高（把旧窗口当最近一周）。 */
.mv-stale{
  margin-left:8px;padding:1px 7px;border-radius:4px;
  color:var(--red);background:rgba(220,38,38,.08);
  font-weight:600;white-space:normal;
}

/* ══ 23. 修「logo 下方一大块空白」（2026-10-20 11:55）════════════════
   现象：窄栏收起态，logo(72px) 与第一个导航之间空了 ~159px。
   根因：`.brand-txt` 原本靠 `width:0` 隐藏（见本文件 287 行），
        那是**水平布局**下的写法。但第 21 段把 `.brand` 改成了
        `flex-direction:column`（logo 在上、文字在下）⇒ 竖排只看高度，
        `width:0` 完全失效；文字在 0 宽容器里一字一行撑出 **159px 高**，
        `opacity:0` 只是看不见，**照样占位**。
   修法：窄栏用 `display:none`（彻底不参与布局），悬停展开再 display:block。
        ⛔ 不要用 height:0 / max-height:0：内容仍会参与滚动与文字换行计算。 */
.brand-txt{display:none}
.side:hover .brand-txt{display:block;opacity:1;width:auto}