/* ============================================================
   panels.css —— 各业务面板内部构件
   ============================================================ */

/* ---------- 通用小件 ---------- */
.kv{display:flex;flex-direction:column;justify-content:center;gap:3px}
.kv u{font-size:11px;text-decoration:none;letter-spacing:.06em;color:var(--tx-2);white-space:nowrap}
.kv b{font:700 20px/1 var(--f-num);color:var(--num);letter-spacing:.02em}
.kv b i{font-style:normal;font-size:11px;color:var(--tx-2);margin-left:3px;letter-spacing:.06em}

.bar{height:5px;background:rgba(255,255,255,.055);position:relative;overflow:hidden}
.bar>span{position:absolute;left:0;top:0;bottom:0;transition:width .8s cubic-bezier(.3,.9,.3,1);
  background:linear-gradient(90deg,var(--c1,var(--cy-2)),var(--c2,var(--cy)));
  box-shadow:0 0 9px color-mix(in srgb,var(--c2,var(--cy)) 55%,transparent)}
.bar.am{--c1:var(--am-2);--c2:var(--am)}
.bar.gr{--c1:#12996E;--c2:var(--grn)}
.bar.rd{--c1:#B22B3A;--c2:var(--red)}
/* 分段刻度感 */
.bar::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0 5px,rgba(3,10,20,.65) 5px 6px)}

.num{font-family:var(--f-num);font-weight:700;color:var(--num)}

/* ---------- 左1 人员在岗 ---------- */
#pnPeople{gap:10px;align-items:center}
.ppl-icon{position:relative;width:58px;flex:none;display:flex;flex-direction:column;align-items:center;gap:4px}
.ppl-icon svg{width:27px;height:27px;position:absolute;left:50%;top:17px;transform:translate(-50%,-50%);color:var(--am);
  filter:drop-shadow(0 0 8px rgba(255,172,51,.55))}
.ppl-icon.cy svg{color:var(--cy);filter:drop-shadow(0 0 8px rgba(53,224,255,.55))}
.ppl-icon .ec{width:56px;height:40px}
.ppl-icon u{font-size:11px;text-decoration:none;color:var(--tx-2);letter-spacing:.06em}
.ppl-grid{flex:1;display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:1fr;gap:2px 3px;align-content:center}
.ppl-grid svg{width:100%;height:100%;color:var(--cy-3);transition:color .4s}
.ppl-grid svg.on{color:var(--cy);filter:drop-shadow(0 0 4px rgba(53,224,255,.55))}
.ppl-grid svg.am{color:var(--am);filter:drop-shadow(0 0 4px rgba(255,172,51,.5))}
.ppl-side{flex:none;width:74px;display:flex;flex-direction:column;justify-content:center;gap:5px;
  padding-left:9px;border-left:1px solid var(--line)}

/* ---------- 左2 安全预警 ---------- */
#pnSafety{gap:9px;align-items:center}
.sf-mark{flex:none;width:46px;height:46px;display:grid;place-items:center;position:relative}
.sf-mark svg{width:26px;height:26px;color:var(--red);filter:drop-shadow(0 0 9px rgba(255,77,94,.7));z-index:1}
.sf-mark::before,.sf-mark::after{content:'';position:absolute;inset:0;border:1px solid var(--red);border-radius:50%;opacity:.5}
.sf-mark::after{animation:pulse2 2.2s ease-out infinite}
@keyframes pulse2{0%{transform:scale(.7);opacity:.8}100%{transform:scale(1.35);opacity:0}}
.sf-rows{flex:1;display:flex;flex-direction:column;justify-content:center;gap:5px}
.sf-row{display:grid;grid-template-columns:62px 1fr 40px;align-items:center;gap:7px;font-size:11px;color:var(--tx-2)}
.sf-row b{font-family:var(--f-num);font-size:14px;font-weight:700;color:var(--num);text-align:right}
.sf-tags{flex:none;width:112px;display:flex;flex-direction:column;justify-content:center;gap:4px;
  padding-left:9px;border-left:1px solid var(--line)}
.sf-tag{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--tx-2);letter-spacing:.04em}
.sf-tag i{width:5px;height:5px;transform:rotate(45deg);flex:none;box-shadow:0 0 7px currentColor}
.sf-tag b{margin-left:auto;font-family:var(--f-num);font-size:13px;font-weight:700;color:var(--tx)}

/* ---------- 左4 作业机械 ---------- */
#pnMach{gap:9px;align-items:center}
.mach-hero{flex:none;width:96px;display:flex;flex-direction:column;align-items:center;gap:3px;position:relative}
.mach-hero svg{width:52px;height:38px;color:var(--am);filter:drop-shadow(0 0 10px rgba(255,172,51,.5))}
.mach-hero .orb{position:absolute;left:50%;top:22px;width:78px;height:78px;margin:-39px 0 0 -39px;
  border:1px solid rgba(255,172,51,.28);border-radius:50%;transform:rotateX(66deg);}
.mach-hero .orb::after{content:'';position:absolute;inset:9px;border:1px solid rgba(255,172,51,.18);border-radius:50%}
.mach-hero u{font-size:11px;text-decoration:none;color:var(--tx-2);letter-spacing:.06em;z-index:1}
.mach-hero b{font:700 20px/1 var(--f-num);color:var(--num);z-index:1}

/* ---------- 左5 能耗结构 ---------- */
.mini-bars{flex:0 0 116px;display:flex;flex-direction:column;justify-content:center;gap:6px}
.mb-row u{display:flex;justify-content:space-between;font-size:11px;text-decoration:none;color:var(--tx-2);margin-bottom:3px}
.mb-row u b{font-family:var(--f-num);font-size:12px;font-weight:700;color:var(--tx)}

/* ---------- 左6 实时告警 ---------- */
.alarm-vp{flex:1;min-height:0;overflow:hidden;position:relative;
  mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent)}
.alarm-track{display:flex;flex-direction:column;gap:3px;animation:roll 26s linear infinite}
.alarm-vp:hover .alarm-track{animation-play-state:paused}
@keyframes roll{from{transform:translateY(0)}to{transform:translateY(-50%)}}
.al{display:grid;grid-template-columns:15px 1fr auto auto;align-items:center;gap:6px;
  padding:3px 7px;font-size:11.5px;line-height:1.15;
  border:1px solid rgba(46,116,176,.2);border-left-width:2px;
  background:linear-gradient(90deg,rgba(30,90,150,.16),transparent 72%)}
.al svg{width:13px;height:13px}
.al .t{color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.al .p{font-size:10.5px;color:var(--tx-3);letter-spacing:.04em}
.al .m{font:600 11px var(--f-num);color:var(--tx-3);letter-spacing:.06em}
.al.h{border-left-color:var(--red);background:linear-gradient(90deg,rgba(255,77,94,.18),transparent 72%)}
.al.h svg{color:var(--red)}
.al.m2{border-left-color:var(--am);background:linear-gradient(90deg,rgba(255,172,51,.16),transparent 72%)}
.al.m2 svg{color:var(--am)}
.al.l{border-left-color:var(--cy);background:linear-gradient(90deg,rgba(53,224,255,.13),transparent 72%)}
.al.l svg{color:var(--cy)}
.lv-legend{display:flex;gap:9px;flex:none}
.lv-legend em{font-style:normal;font-size:10.5px;letter-spacing:.06em;display:flex;align-items:center;gap:4px}
.lv-legend em::before{content:'';width:5px;height:5px;transform:rotate(45deg);box-shadow:0 0 6px currentColor}
.lv-legend .l-h{color:var(--red)}.lv-legend .l-m{color:var(--am)}.lv-legend .l-l{color:var(--cy)}

/* ---------- 右1 原料库存 ---------- */
#pnStock{gap:7px}
.stk{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;position:relative}
.stk+.stk::before{content:'';position:absolute;left:-4px;top:12%;bottom:12%;width:1px;
  background:linear-gradient(180deg,transparent,var(--line),transparent)}
.stk svg{width:38px;height:27px;color:#7FA6C4;filter:drop-shadow(0 0 7px rgba(90,170,230,.35))}
.stk u{font-size:10.5px;text-decoration:none;color:var(--tx-2);letter-spacing:.04em}
.stk .bar{width:100%;height:4px}
.line-rows .bar{height:4px}
.stk .n{display:flex;justify-content:space-between;width:100%;gap:3px;font:600 10px var(--f-num);letter-spacing:.02em;white-space:nowrap}
.stk .n em{font-style:normal;color:var(--cy)}
.stk .n i{font-style:normal;color:var(--am)}

/* ---------- 右2 生产线 ---------- */
.line-rows{flex:0 0 84px;display:flex;flex-direction:column;justify-content:center;gap:5px;padding-top:2px}
.line-rows .lr{font-size:11px;color:var(--tx-2)}
.line-rows .lr u{display:flex;justify-content:space-between;text-decoration:none;margin-bottom:2px;line-height:1.1;font-size:10.5px}
.line-rows .lr u b{font-family:var(--f-num);font-size:12px;font-weight:700;color:var(--tx)}
.line-flow{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:4px}
.lf-track{display:flex;align-items:center;gap:3px}
.lf-node{flex:1;min-width:0;height:22px;position:relative;display:grid;place-items:center;
  border:1px solid rgba(46,116,176,.4);background:rgba(20,64,110,.28)}
.lf-node b{font-size:9.5px;color:var(--tx-2);letter-spacing:0;white-space:nowrap}
.lf-node.on{border-color:var(--cy-30);background:linear-gradient(180deg,rgba(53,224,255,.05),rgba(53,224,255,.22));
  box-shadow:inset 0 0 12px rgba(53,224,255,.25)}
.lf-node.on b{color:#DCF4FF}
.lf-node.warn{border-color:rgba(255,172,51,.5);background:linear-gradient(180deg,rgba(255,172,51,.05),rgba(255,172,51,.2))}
.lf-node.warn b{color:#FFDDA6}
.lf-link{flex:none;width:9px;height:1px;background:var(--cy-30);position:relative}
.lf-link::after{content:'';position:absolute;top:-1.5px;width:4px;height:4px;border-radius:50%;
  background:var(--cy);box-shadow:0 0 7px var(--cy);animation:flow 1.8s linear infinite;animation-delay:var(--d,0s)}
@keyframes flow{from{left:-2px;opacity:0}20%{opacity:1}80%{opacity:1}to{left:8px;opacity:0}}
.lf-meta{display:flex;justify-content:space-between;font-size:10.5px;color:var(--tx-3);letter-spacing:.04em}
.lf-meta b{font-family:var(--f-num);font-weight:700;color:var(--cy)}

/* ---------- 右5 物流 ---------- */
#pnLogi{gap:8px;align-items:center}
.lg-hero{flex:none;width:74px;display:flex;flex-direction:column;align-items:center;gap:2px}
.lg-hero svg{width:46px;height:30px;color:var(--am);filter:drop-shadow(0 0 9px rgba(255,172,51,.45))}
.lg-hero.cy svg{color:var(--cy);filter:drop-shadow(0 0 9px rgba(53,224,255,.45))}
.lg-hero b{font:700 18px/1 var(--f-num);color:var(--num)}
.lg-hero u{font-size:10.5px;text-decoration:none;color:var(--tx-2);letter-spacing:.04em}
.lg-rows{flex:1;display:flex;flex-direction:column;justify-content:center;gap:5px}
.lg-rows .lr{display:grid;grid-template-columns:52px 1fr 46px;align-items:center;gap:7px;font-size:11px;color:var(--tx-2)}
.lg-rows .lr b{font-family:var(--f-num);font-size:13px;font-weight:700;color:var(--num);text-align:right}

/* ---------- 右6 报警趋势 ---------- */
.alarm-sum{flex:0 0 116px;display:flex;flex-direction:column;justify-content:center;gap:4px}
.as{display:grid;grid-template-columns:14px 1fr auto;align-items:center;gap:6px;padding:3px 6px;
  font-size:11px;border:1px solid rgba(46,116,176,.2);border-left-width:2px}
.as svg{width:12px;height:12px}
.as b{font:700 13px var(--f-num)}
.as.h{border-left-color:var(--red);background:rgba(255,77,94,.1)}.as.h svg,.as.h b{color:var(--red)}
.as.m2{border-left-color:var(--am);background:rgba(255,172,51,.1)}.as.m2 svg,.as.m2 b{color:var(--am)}
.as.l{border-left-color:var(--cy);background:rgba(53,224,255,.09)}.as.l svg,.as.l b{color:var(--cy)}

/* ---------- 底1 工序指标榜 ---------- */
.rank{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:space-between;gap:2px}
.rk{display:grid;grid-template-columns:14px 1fr 54px;align-items:center;gap:6px;font-size:11px;color:var(--tx-2)}
.rk i{height:9px;width:9px;transform:rotate(45deg);box-shadow:0 0 7px currentColor;justify-self:center}
.rk .n{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rk b{font:700 13px var(--f-num);color:var(--num);text-align:right;letter-spacing:.02em}
.rk b em{font-style:normal;font-size:10px;color:var(--tx-3);margin-left:2px}

/* ---------- 底2 设备负载 ---------- */
.dev-strip{flex:0 0 82px;display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.dv{position:relative;display:flex;align-items:center;gap:5px;padding:5px 38px 5px 6px;
  border:1px solid rgba(46,116,176,.24);background:linear-gradient(160deg,rgba(20,58,98,.34),rgba(6,18,34,.18))}
.dv svg{width:26px;height:26px;color:#89B4D4;flex:none}
.dv.on svg{color:var(--cy);filter:drop-shadow(0 0 7px rgba(53,224,255,.45))}
.dv.warn svg{color:var(--am);filter:drop-shadow(0 0 7px rgba(255,172,51,.45))}
.dv-tx{min-width:0}
.dv-tx u{display:block;font-size:10.5px;text-decoration:none;color:var(--tx-2);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;letter-spacing:.02em}
.dv-tx b{display:block;font:700 17px/1.15 var(--f-num);color:var(--num)}
.dv-tx b i{font-style:normal;font-size:10px;color:var(--tx-3);margin-left:2px}
.dv .ec{position:absolute;right:4px;top:4px;width:26px;height:26px}
.dv-ring{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:32px;height:32px}

/* ---------- 底3 经营 ---------- */
.biz-hero{flex:0 0 96px;display:flex;flex-direction:column;justify-content:center;gap:5px;position:relative}
.biz-hero svg{width:30px;height:30px;color:var(--am);filter:drop-shadow(0 0 9px rgba(255,172,51,.5))}
.biz-hero .v{font:700 24px/1 var(--f-num);color:var(--num)}
.biz-hero .v u{font-size:11px;text-decoration:none;color:var(--tx-2);margin-left:3px}
.biz-hero .l{font-size:11px;color:var(--tx-2);letter-spacing:.06em}
.biz-tabs{flex:0 0 20px;display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.bt{display:flex;align-items:center;justify-content:center;gap:5px;font-size:10.5px;letter-spacing:.04em;
  color:var(--tx-2);border:1px solid rgba(46,116,176,.28);background:rgba(16,50,88,.3)}
.bt.on{color:#DCF4FF;border-color:var(--cy-30);background:linear-gradient(180deg,rgba(53,224,255,.04),rgba(53,224,255,.2))}
.bt svg{width:11px;height:11px;color:currentColor}
.bt em{font-style:normal;font-family:var(--f-num);font-weight:700;color:var(--am)}
.biz-rings{flex:0 0 152px;display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.biz-rings>div{min-width:0}

/* ---------- 底4 图例 ---------- */
.lgd{display:flex;gap:10px;flex:none}
.lgd em{font-style:normal;font-size:10.5px;letter-spacing:.06em;color:var(--tx-2);display:flex;align-items:center;gap:5px}
.lgd em::before{content:'';width:11px;height:2px;background:currentColor;box-shadow:0 0 7px currentColor}
.lgd .c1{color:var(--cy)}.lgd .c2{color:var(--am)}.lgd .c3{color:var(--vio)}