.mark{font-family:var(--serif);font-size:17px!important;font-weight:700}

.lv-green{--sev:var(--brand-2);--sev-bg:var(--brand-soft)}
.lv-amber{--sev:var(--gold);--sev-bg:var(--gold-soft)}
.lv-red{--sev:var(--alert);--sev-bg:var(--alert-soft)}
.lv-done{--sev:#9bb3a8;--sev-bg:var(--canvas)}

/* ═══ KPI ═══ */
.kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.kpi{padding:15px 17px;background:var(--paper);display:flex;flex-direction:column;gap:2px;
  border-top:3px solid var(--sev)}
.kpi-n{display:flex;align-items:baseline;gap:4px}
.kpi-n b{font-family:var(--mono);font-size:27px;line-height:1;color:var(--sev);
  font-variant-numeric:tabular-nums}
.kpi-u{font-size:12.5px;color:var(--ink-3)}
.kpi-t{font-size:12.5px;color:var(--ink);font-weight:700}
.kpi-s{font-size:11.5px;color:var(--ink-3)}

/* ═══ 订单流转 ═══ */
.fwrap{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);padding:24px 20px 18px;overflow-x:auto}
.flow{display:flex;align-items:flex-end;gap:6px;min-width:720px}
.fstage{flex:1;min-width:88px;display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:8px 6px 10px;border:1.5px solid transparent;border-radius:10px;
  background:none;cursor:pointer;font-family:inherit;transition:all .2s}
.fstage:hover{background:var(--brand-soft-2);border-color:var(--line)}
.fstage.on{background:var(--sev-bg);border-color:var(--sev)}
.fstage:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

.fbar{position:relative;width:100%;height:132px;display:flex;align-items:flex-end;
  justify-content:center;margin-bottom:4px}
.ffill{display:block;width:52px;border-radius:6px 6px 3px 3px;background:var(--sev);
  opacity:.9;animation:grow .5s cubic-bezier(.2,.8,.3,1) backwards}
@keyframes grow{from{height:0!important;opacity:0}}
.frisk{position:absolute;top:-2px;left:50%;transform:translateX(-50%);
  padding:1px 8px;border-radius:99px;background:var(--gold);color:#052f20;
  font-family:var(--sans);font-size:10.5px;font-weight:700;white-space:nowrap}
.forders{display:flex;align-items:baseline;gap:2px}
.forders b{font-family:var(--mono);font-size:21px;color:var(--sev);font-variant-numeric:tabular-nums}
.forders span{font-size:11px;color:var(--ink-3)}
.fpcs{font-family:var(--mono);font-size:11.5px;color:var(--ink-2)}
.fname{font-size:13px;font-weight:700;color:var(--ink);margin-top:1px}
.farrow{align-self:center;margin-bottom:52px;color:var(--ink-3);font-size:19px;flex:none}

/* ═══ 交期风险 ═══ */
.tip{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px;
  padding:10px 16px;background:var(--brand-soft);border-radius:var(--r);
  font-size:13.5px;color:var(--brand)}
.tip button{padding:5px 13px;border:1px solid var(--brand-2);border-radius:99px;
  background:transparent;color:var(--brand-2);font-family:var(--sans);font-size:12.5px;cursor:pointer}
.tip button:hover{background:var(--brand-2);color:var(--on-brand)}
.tip[hidden]{display:none}

.bcard{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);overflow:hidden}
.risk{list-style:none;margin:0;padding:0}
.ritem{display:flex;gap:18px;align-items:center;padding:15px 20px;
  border-bottom:1px solid var(--line);border-left:3px solid var(--sev);
  cursor:pointer;transition:background .18s}
.ritem:last-child{border-bottom:0}
.ritem:hover{background:var(--brand-soft-2)}
.rleft{flex:1;min-width:0}
.rtop{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.rtop b{font-size:15px}
.rno{font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}
.rwhat{font-size:13px;color:var(--ink-2);margin-top:3px}
.rwhy{margin-top:4px;font-size:12.5px;color:var(--sev);line-height:1.55}
.rright{flex:none;text-align:right;min-width:88px}
.rdays{display:block;font-family:var(--mono);font-size:16px;color:var(--sev);
  font-variant-numeric:tabular-nums}
.rlab{font-size:11px;color:var(--ink-3)}
.rempty{padding:22px 20px;text-align:center;color:var(--ink-3);font-size:13.5px}

/* ═══ 按型号 ═══ */
.sku{padding:18px 22px;display:flex;flex-direction:column;gap:12px}
.srow{display:grid;grid-template-columns:88px 1fr 52px;align-items:center;gap:12px}
.sname{font-family:var(--mono);font-size:12.5px;color:var(--ink)}
.strack{display:flex;height:17px;border-radius:4px;overflow:hidden;background:var(--canvas)}
.sseg{display:block;height:100%}
.s-done{background:var(--brand-2)}
.s-road{background:#5fae8b}
.s-make{background:var(--gold)}
.s-wait{background:#d9dedb}
.sval{font-family:var(--mono);font-size:12.5px;text-align:right;color:var(--ink);
  font-variant-numeric:tabular-nums}
.skulegend{display:flex;gap:16px;flex-wrap:wrap;padding:0 22px 18px;
  font-size:12px;color:var(--ink-3)}
.slg{display:inline-flex;align-items:center;gap:6px}
.sdot{width:11px;height:11px;border-radius:3px;flex:none}

.bnote{margin-top:14px;font-size:13.5px;color:var(--ink-2);line-height:1.75;max-width:74ch}

@media (max-width:640px){
  .fwrap{padding:18px 14px 12px}
  .ritem{flex-wrap:wrap;gap:8px;padding:13px 14px}
  .rright{text-align:left;min-width:0}
  .sku{padding:14px}
  .srow{grid-template-columns:74px 1fr 44px;gap:8px}
  .skulegend{padding:0 14px 14px;gap:12px}
  .kpi{padding:12px 14px}
  .kpi-n b{font-size:23px}
}

/* ═══ 痛点①：售后滞留 ═══ */
.asbanner{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:22px;
  align-items:center;padding:20px 24px;margin-bottom:16px;
  background:var(--alert-soft);border:1px solid rgba(180,69,55,.3);border-radius:var(--r)}
.asmain b{display:block;font-size:19px;color:var(--alert);line-height:1.45;margin-bottom:7px}
.asmain span{font-size:13.5px;color:var(--ink-2);line-height:1.7}
.asmain span b{display:inline;font-size:15px;color:var(--alert)}
.assum{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;align-items:end}
.ascell{display:flex;flex-direction:column;align-items:center;gap:3px}
.asbar{width:100%;height:56px;display:flex;align-items:flex-end;justify-content:center}
.asfill{display:block;width:26px;border-radius:4px 4px 2px 2px;background:var(--alert);opacity:.8}
.asn{font-family:var(--mono);font-size:16px;color:var(--alert);font-variant-numeric:tabular-nums}
.asname{font-size:11px;color:var(--ink-3);text-align:center;line-height:1.3}

.aslist{list-style:none;margin:0;padding:0}
.asitem{display:flex;gap:16px;align-items:center;padding:13px 20px;
  border-bottom:1px solid var(--line);border-left:3px solid var(--alert)}
.asitem:last-child{border-bottom:0}
.asleft{flex:1;min-width:0}
.astop{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.astop b{font-size:14.5px}
.assn{font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.aswhat{font-size:12.5px;color:var(--ink-2);margin-top:3px}
.asright{flex:none;text-align:right;min-width:74px}
.asdays{display:block;font-family:var(--mono);font-size:17px;color:var(--alert);
  font-variant-numeric:tabular-nums}
.aslab{font-size:11px;color:var(--ink-3)}

/* ═══ 痛点②：电芯去哪了 ═══ */
.chead{padding:14px 22px;border-bottom:1px solid var(--line);background:var(--brand-soft-2);
  font-family:var(--mono);font-size:13px;color:var(--brand)}
.cell{padding:18px 22px;display:flex;flex-direction:column;gap:13px}
.crow{display:grid;grid-template-columns:118px minmax(0,1fr) 62px minmax(0,150px);
  align-items:center;gap:12px}
.cname{font-size:13px;color:var(--ink);font-weight:600}
.ctrack{height:16px;border-radius:4px;background:var(--canvas);overflow:hidden}
.cfill{display:block;height:100%;border-radius:4px}
.crow.used .cfill{background:var(--brand-2)}
.crow.left .cfill{background:var(--gold);opacity:.75}
.crow.left .cname{color:var(--ink-2);font-weight:400}
.cval{display:flex;align-items:baseline;gap:2px;justify-content:flex-end}
.cval b{font-family:var(--mono);font-size:14px;font-variant-numeric:tabular-nums}
.cval span{font-size:10.5px;color:var(--ink-3)}
.csub{font-size:11.5px;color:var(--ink-3);line-height:1.45}

@media (max-width:760px){
  .asbanner{grid-template-columns:1fr;gap:16px}
  .crow{grid-template-columns:96px 1fr 54px;gap:9px}
  .csub{grid-column:1 / -1;padding-left:96px;margin-top:-6px}
}