/* ============================================================
   全球服务驾驶舱 · 深空 FUI 指挥大屏
   设计语言：暗底冷蓝灰 / 细字宽字距 / 留白 / 色彩只给数据
   单一 token 体系（唯一 :root，勿再新增覆盖层）
   ============================================================ */
:root{
  --sans:"Inter",-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --bg0:#070a10; --bg1:#0a0e15;
  --panel:rgba(11,15,23,.52); --panel2:rgba(15,20,29,.5);
  --line:rgba(170,200,240,.07); --bd:rgba(175,205,245,.12);
  --tx:#e8edf5; --dim:#94a1b3; --faint:#62708a;
  --cyan:#56cfe1; --cyan-rgb:86,207,225;
  --amber:#efb227; --red:#e24b4a; --green:#43d6a5; --orange:#e0744f; --purple:#9f93e8;
  --accent:#56cfe1;
  /* 刻度：圆角 / 缓动 */
  --r-lg:14px; --r-md:10px; --r-sm:8px; --r-xs:6px;
  --ease:cubic-bezier(.2,.7,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;width:100%;overflow:hidden;background:var(--bg0);color:var(--tx);font-family:var(--sans);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
#map{position:absolute;inset:0;background:var(--bg0)}
.maplibregl-ctrl-attrib,.maplibregl-ctrl-bottom-left,.maplibregl-ctrl-bottom-right{opacity:.3;font-size:9px}
.mono{font-family:var(--mono)}
.label{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);font-weight:500}
/* 细滚动条（全局） */
*{scrollbar-width:thin;scrollbar-color:rgba(170,200,240,.18) transparent}
::-webkit-scrollbar{width:7px;height:7px}
::-webkit-scrollbar-thumb{background:rgba(170,200,240,.16);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:rgba(170,200,240,.28)}
::-webkit-scrollbar-track{background:transparent}

/* ============ 玻璃 + 卡片 ============ */
.glass{
  background:var(--panel);
  background-image:linear-gradient(180deg,rgba(7,10,16,.16),rgba(7,10,16,.04));
  backdrop-filter:blur(28px) saturate(150%);-webkit-backdrop-filter:blur(28px) saturate(150%);
  border:1px solid var(--bd);border-radius:var(--r-lg);
  box-shadow:0 16px 48px rgba(0,0,0,.5),inset 0 1px 0 rgba(220,235,255,.05);
}
.card{display:flex;flex-direction:column;overflow:hidden}
.card.hidden{display:none}
.ch{display:flex;align-items:center;justify-content:space-between;padding:10px 13px;border-bottom:1px solid var(--line);flex-shrink:0;cursor:move}
.ch .tt{line-height:1.2}
.ch .tt b{font-size:12px;font-weight:500;letter-spacing:.02em}
.ch .tt span{display:block;font-size:8px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);font-weight:500;margin-top:1.5px}
.ch .ops{display:flex;gap:7px;align-items:center;color:var(--faint)}
.ch .ops span{cursor:pointer;font-size:14px;line-height:1;width:18px;text-align:center;transition:color .15s}
.ch .ops .x:hover{color:var(--red)}
.cb{padding:11px 13px;overflow-y:auto}

/* ============ TOPBAR ============ */
#topbar{position:absolute;top:0;left:0;right:0;height:60px;z-index:20;display:flex;align-items:center;gap:18px;padding:0 16px;background:linear-gradient(180deg,rgba(8,11,16,.92),rgba(8,11,16,.62));border-bottom:1px solid var(--line);backdrop-filter:blur(16px)}
.brand{display:flex;align-items:center;gap:11px;flex-shrink:0;min-width:0}
.brand-tt h1{font-size:14.5px;font-weight:600;white-space:nowrap}
.brand-tt h1 .demo-tag{color:var(--cyan);font-size:11px;font-weight:500;letter-spacing:.12em;margin-left:7px;vertical-align:1px}
.brand-tt span{display:block;font-size:8px;letter-spacing:.2em;color:var(--faint);font-weight:500;white-space:nowrap}
.kpis{display:flex;flex:1;justify-content:center;gap:0;min-width:0;overflow:hidden}
.kpi{display:flex;flex-direction:column;justify-content:center;padding:0 clamp(10px,1.4vw,20px);border-left:1px solid var(--line);min-width:0;flex:0 1 auto;cursor:pointer;transition:background-color .15s}
.kpi:first-child{border:none}
.kpi:hover{background:rgba(var(--cyan-rgb),.04)}
.kpi .k{font-size:9.5px;color:var(--faint);margin-bottom:3px;white-space:nowrap}
.kpi .k em{font-style:normal;color:var(--faint);font-size:8px;letter-spacing:.18em;display:block;text-transform:uppercase}
.kpi .kr{display:flex;align-items:flex-end;gap:8px}
.kpi .v{font-family:var(--mono);font-size:clamp(17px,1.55vw,24px);font-weight:300;line-height:.95;letter-spacing:0;white-space:nowrap;transition:color .15s}
.kpi .v small{font-size:11px;color:var(--dim);font-weight:400}
.kpi:hover .v{color:#fff}
.spark{display:inline-block;width:54px;height:22px;flex-shrink:0;opacity:.92}
.spark svg{width:100%;height:100%;display:block;overflow:visible}
.spark .spk-a{fill:rgba(var(--cyan-rgb),.09)}
.spark .spk-l{fill:none;stroke:var(--cyan);stroke-width:1;opacity:.65}
.spark .spk-d{fill:var(--cyan)}
.top-right{display:flex;align-items:center;gap:16px;flex-shrink:0}
.clock{text-align:right;line-height:1.3}.clock span:first-child{font-size:11px;color:var(--dim)}.clock .mono{display:block;font-size:12px;color:var(--tx)}
.top-icons{display:flex;align-items:center;gap:8px;color:var(--dim)}
.ti{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-sm);cursor:pointer;position:relative;transition:color .15s,background-color .15s}
.ti svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ti:hover{color:var(--cyan);background:rgba(var(--cyan-rgb),.08)}
.ti:active{transform:translateY(1px)}

/* ============ RAIL ============ */
#rail{position:absolute;left:0;top:60px;bottom:0;width:62px;z-index:19;display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 0;background:rgba(8,11,16,.55);border-right:1px solid var(--line);backdrop-filter:blur(16px)}
.rl{width:46px;padding:7px 0;border-radius:var(--r-sm);display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--dim);cursor:pointer;transition:color .15s,background-color .15s}
.rl svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.7}
.rl span{font-size:9px;font-weight:500}
.rl:hover{color:var(--tx);background:rgba(255,255,255,.04)}
.rl.on{color:var(--cyan)}
.rl.on svg{filter:drop-shadow(0 0 6px rgba(var(--cyan-rgb),.55))}
.rail-sp{flex:1}

/* ============ 列 ============ */
.col{position:absolute;top:68px;bottom:8px;z-index:12;display:flex;flex-direction:column;gap:8px}
#col-left{left:70px;width:300px}
#col-right{right:8px;width:344px}
.col .card{max-height:100%}

/* 风险排行 —— 胶囊行卡 */
.rank{display:flex;flex-direction:column;gap:5px}
.rk{display:grid;grid-template-columns:18px 1fr 74px;gap:9px;align-items:center;padding:7px 10px;border:1px solid var(--line);border-radius:var(--r-md);background:rgba(255,255,255,.018);cursor:pointer;transition:background-color .15s,border-color .15s}
.rk:hover{background:rgba(var(--cyan-rgb),.05);border-color:rgba(var(--cyan-rgb),.22)}
.rk .i{font-family:var(--mono);font-size:11px;color:var(--faint);text-align:center}
.rk .nm{font-size:12px;font-weight:500}
.rk .bar{height:3px;border-radius:2px;background:rgba(170,200,240,.1);overflow:hidden;margin-top:5px}
.rk .bar>span{display:block;height:100%;border-radius:2px;opacity:.85}
.rk .rt{text-align:right;display:flex;align-items:center;justify-content:flex-end;gap:7px}
.rk .sc{font-family:var(--mono);font-size:14px;font-weight:400;color:var(--tx)}
/* 标签 —— ghost 胶囊 + 前置彩点（色彩只在小元素上） */
.tag{font-size:9px;font-weight:500;padding:1px 8px 1px 6px;border-radius:99px;white-space:nowrap;color:var(--dim);background:transparent;border:1px solid var(--bd);display:inline-flex;align-items:center;gap:5px}
.tag::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--dim);flex-shrink:0}
.tag.high::before{background:var(--red)}.tag.mid::before{background:var(--amber)}.tag.low::before{background:var(--green)}

/* 事件 */
.ev{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--line);cursor:pointer;border-radius:var(--r-sm);transition:background-color .15s}
.ev:last-child{border-bottom:none}
.ev:hover{background:rgba(var(--cyan-rgb),.05)}
.ev .ic{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:4px;font-size:0}
.ev.sev-hi .ic{animation:pulse 2.4s var(--ease) infinite}
.ev .m{flex:1;min-width:0}
.ev .t{font-size:11.5px;font-weight:500;line-height:1.35;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ev .s{font-size:9.5px;color:var(--dim);margin-top:2px}
.ev .r{text-align:right;flex-shrink:0}
.ev .r .ago{font-size:9px;color:var(--faint);margin-top:3px}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(226,75,74,.0)}50%{box-shadow:0 0 0 4px rgba(226,75,74,.16)}}

/* 健康度仪表 —— SVG 细环 */
.health{display:flex;gap:14px;align-items:center}
.gauge{width:94px;height:94px;flex-shrink:0;position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:filter .2s}
.gauge:hover{filter:brightness(1.12)}
.gauge svg{position:absolute;inset:0;width:100%;height:100%}
.gauge .g-in{position:relative;text-align:center}
.gauge .g-in b{font-family:var(--mono);font-size:29px;font-weight:300;display:block;line-height:1}
.gauge .g-in span{font-size:8px;color:var(--faint);letter-spacing:.08em}
.hmetrics{flex:1;display:flex;flex-direction:column;gap:1px}
.hm{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;padding:4.5px 0;border-bottom:1px solid var(--line);font-size:11px}
.hm:last-child{border:none}
.hm .hn{color:var(--dim)}.hm .hv{font-family:var(--mono);font-weight:500}
.dot{width:6px;height:6px;border-radius:50%;display:inline-block}
.st{font-size:9.5px;font-weight:500;color:var(--dim);display:inline-flex;align-items:center;gap:5px}

/* 表格（库存 / PO） */
.tbl{width:100%;font-size:11px;border-collapse:collapse}
.tbl th{font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);font-weight:500;text-align:left;padding:4px 6px;border-bottom:1px solid var(--bd);white-space:nowrap}
.tbl td{padding:6px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td.n,.tbl th.n{text-align:right;font-family:var(--mono)}
.tbl tr:last-child td{border:none}
.tbl .pn{font-weight:500;white-space:nowrap}
tr[data-sku]{cursor:pointer;transition:background-color .15s}
tr[data-sku]:hover td{background:rgba(var(--cyan-rgb),.05)}
.pager{display:flex;align-items:center;justify-content:flex-end;gap:8px;font-size:10px;color:var(--faint);margin-top:7px}
.pager .mono{color:var(--dim)}

/* 物流监控 */
.logi{display:flex;flex-direction:column;gap:7px}
.logi .lr{display:flex;align-items:center;justify-content:space-between;font-size:11.5px}
.logi .route{font-weight:500}
.logi .meta{font-size:10px;color:var(--dim);margin-top:3px;font-family:var(--mono)}
.logi .spark2{height:30px}

/* 系统状态 */
.sys .sr{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;padding:5px 0;border-bottom:1px solid var(--line);font-size:11px}
.sys .sr:last-child{border:none}
.sys .sn{color:var(--dim)}.sys .sv{font-family:var(--mono);font-weight:500}

/* ============ 地图叠加 ============ */
.map-title{position:absolute;left:382px;top:74px;z-index:8;pointer-events:none}
.map-title b{font-size:13px;font-weight:600;letter-spacing:.02em}
.map-title span{display:block;font-size:8.5px;letter-spacing:.2em;color:var(--faint);font-weight:500}
.zoomctl{position:absolute;right:360px;bottom:172px;z-index:8;display:flex;flex-direction:column;gap:4px}
.zoomctl button{width:30px;height:30px;border-radius:var(--r-sm);background:var(--panel);border:1px solid var(--bd);color:var(--tx);font-size:15px;cursor:pointer;backdrop-filter:blur(10px);transition:color .15s,border-color .15s}
.zoomctl button:hover{color:var(--cyan);border-color:rgba(var(--cyan-rgb),.5)}
.zoomctl button:active{transform:translateY(1px)}

/* ============ DOCK ============ */
#dock{position:absolute;bottom:8px;left:376px;right:360px;z-index:12;display:flex;gap:8px;align-items:stretch;height:150px}
.dock-card{display:flex;flex-direction:column}
#dk-layers{width:152px;padding:11px 12px;gap:7px}
#dk-layers .label{margin-bottom:2px}
.tg{display:flex;align-items:center;justify-content:space-between;font-size:11px;cursor:pointer;color:var(--dim);transition:color .15s}
.tg:hover{color:var(--tx)}
.tg.on{color:var(--tx)}
.tg .sw{width:30px;height:16px;border-radius:99px;background:rgba(255,255,255,.08);position:relative;transition:background-color .2s}
.tg .sw::after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:#cfdcef;transition:left .2s var(--ease)}
.tg.on .sw{background:rgba(var(--cyan-rgb),.85)}.tg.on .sw::after{left:16px;background:#fff}
#dk-trend{flex:1;padding:10px 14px;min-width:0}
.trend-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.trend-h .lg{display:flex;gap:12px;font-size:10px;color:var(--dim)}
.trend-h .lg b{display:flex;align-items:center;gap:5px;font-weight:400}
.trend-svg{width:100%;height:88px}
.trend-axis{display:flex;justify-content:space-between;font-size:9px;color:var(--faint);margin-top:3px;letter-spacing:.04em}
#dk-legend{width:210px;padding:10px 12px}
.lgl-i{display:flex;align-items:center;gap:7px;font-size:10.5px;color:var(--dim);padding:2.5px 0}
.lgl-i .ln{width:18px;height:2.5px;border-radius:2px}

/* loader */
.loader{position:absolute;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:var(--bg0);transition:opacity .6s}
.loader.hidden{opacity:0;pointer-events:none}
.ring{width:42px;height:42px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--cyan);animation:spin .9s linear infinite}
.lt{font-size:13px;color:var(--dim)}
@keyframes spin{to{transform:rotate(360deg)}}

/* 卡片可拖拽 */
.card.dragging{box-shadow:0 22px 64px rgba(0,0,0,.66);border-color:rgba(var(--cyan-rgb),.4)}

/* 地图浮动信息卡 */
#info-cards{position:absolute;inset:0;z-index:9;pointer-events:none}
.info-card{position:absolute;transform:translate(-50%,-100%);margin-top:-12px;width:172px;pointer-events:auto;cursor:move;animation:pop-in .22s var(--ease)}
.info-card .ic-h{display:flex;align-items:flex-start;justify-content:space-between;padding:7px 10px;border-bottom:1px solid var(--line)}
.info-card .ic-h b{font-size:11.5px;font-weight:500}
.info-card .ic-h span{display:block;font-size:8px;letter-spacing:.18em;color:var(--faint);text-transform:uppercase}
.info-card .ic-x{cursor:pointer;color:var(--faint);font-size:13px;line-height:1;transition:color .15s}
.info-card .ic-x:hover{color:var(--red)}
.info-card .ic-b{padding:7px 10px;display:flex;flex-direction:column;gap:4px}
.info-card .ir{display:flex;justify-content:space-between;font-size:10.5px}
.info-card .ir .k{color:var(--dim)}.info-card .ir .v{font-family:var(--mono);font-weight:500;color:var(--cyan)}
.info-card .ic-pin{position:absolute;left:50%;bottom:-5px;width:9px;height:9px;background:#0e131c;transform:translateX(-50%) rotate(45deg);border-right:1px solid var(--bd);border-bottom:1px solid var(--bd)}
.info-card.alert{border-color:rgba(159,147,232,.42)}
.info-card.alert .ir .v{color:var(--purple)}

/* 下钻检查器（浮动） */
#insp-float{position:fixed;right:362px;top:118px;width:322px;max-height:72vh;z-index:40;overflow-y:auto}
#insp-float:not(.hidden){animation:pop-in .22s var(--ease)}
#insp-float.hidden{display:none}
.insp-kicker{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan);font-weight:500}
.insp-title{font-size:17px;font-weight:600;margin:2px 0}
.insp-sub{font-size:11px;color:var(--dim)}
.insp-m{display:flex;gap:7px;margin:11px 0}
.insp-m .c{flex:1;padding:8px 10px;border-radius:var(--r-md);background:rgba(255,255,255,.03);border:1px solid var(--line)}
.insp-m .c .v{font-family:var(--mono);font-size:15px;font-weight:500}
.insp-m .c .k{font-size:9px;color:var(--faint);text-transform:uppercase;letter-spacing:.06em;margin-top:1px}
.insp-bars{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.bi .bh{display:flex;justify-content:space-between;font-size:11px;margin-bottom:3px}.bi .bh .n{font-family:var(--mono);font-weight:500}
/* 条码式负载条 */
.bt{height:9px;border-radius:2px;background:repeating-linear-gradient(90deg,rgba(170,200,240,.13) 0 1.5px,transparent 1.5px 4px);overflow:hidden}
.bt>span{display:block;height:100%;color:var(--cyan);background-image:repeating-linear-gradient(90deg,currentColor 0 1.5px,transparent 1.5px 4px);opacity:.95}
.pills{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}
.pill2{font-size:10px;padding:2px 8px;border-radius:99px;background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--dim)}
.insp-top{display:flex;align-items:center;gap:12px;margin-bottom:9px;cursor:move}
.insp-name{flex:1;min-width:0}
.insp-ico{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:100px;height:100px;background:radial-gradient(circle at 50% 47%,rgba(var(--cyan-rgb),.13),transparent 66%)}
.insp-ico img{width:96px;height:96px;object-fit:contain;display:block;filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))}
.insp-x{position:absolute;top:8px;right:9px;z-index:3;width:20px;height:20px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-xs);background:rgba(10,14,20,.5);color:var(--faint);font-size:14px;line-height:1;cursor:pointer;transition:color .15s}
.insp-x:hover{color:var(--red)}
.insp-prog{height:5px;border-radius:3px;background:rgba(255,255,255,.06);overflow:hidden;margin:9px 0 2px}
.insp-prog>span{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--cyan),var(--green))}
.insp-steps{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.insp-steps .stp{display:flex;align-items:center;gap:9px;font-size:11px;color:var(--faint)}
.insp-steps .stp .d{width:8px;height:8px;border-radius:50%;background:var(--line);flex-shrink:0}
.insp-steps .stp.done{color:var(--dim)}.insp-steps .stp.done .d{background:var(--green)}
.insp-steps .stp.cur{color:var(--tx);font-weight:500}.insp-steps .stp.cur .d{background:var(--cyan);box-shadow:0 0 8px var(--cyan)}
.insp-sites{display:flex;flex-direction:column;gap:5px;margin-top:7px;margin-bottom:4px}
.insp-sites .site{display:flex;justify-content:space-between;align-items:center;font-size:11.5px;padding:6px 9px;border:1px solid var(--line);border-radius:var(--r-sm);cursor:pointer;color:var(--dim);transition:color .15s,border-color .15s}
.insp-sites .site:hover{border-color:rgba(var(--cyan-rgb),.5);color:var(--tx)}
.insp-pos{font-size:11px;color:var(--dim);margin:6px 0 4px;line-height:1.7}
.insp-pos i{font-style:normal;color:var(--cyan)}
.gapflag{font-style:normal;color:var(--red);font-size:10px;font-weight:500}

/* 下钻可点提示：默认隐形，悬停卡片淡入 */
.hint-dz{font-size:9px;font-weight:500;color:var(--faint);border:1px solid var(--bd);border-radius:99px;padding:1px 8px;white-space:nowrap;cursor:default;opacity:0;transition:opacity .2s,color .2s,border-color .2s}
.card:hover .hint-dz{opacity:1}
.card:hover .hint-dz{color:var(--cyan);border-color:rgba(var(--cyan-rgb),.4)}

/* 处置中徽标 + 方案卡 */
.dz{display:inline-block;margin-left:6px;font-size:9px;font-weight:500;color:var(--green);border:1px solid rgba(67,214,165,.45);border-radius:99px;padding:0 6px;vertical-align:1px;white-space:nowrap}
.act{border:1px solid var(--line);border-radius:var(--r-md);padding:8px 10px;margin-top:7px;background:rgba(255,255,255,.02);transition:border-color .2s,background-color .2s}
.act.done{border-color:rgba(67,214,165,.5);background:rgba(67,214,165,.06)}
.act .ah{display:flex;justify-content:space-between;align-items:center;gap:8px}
.act .at{font-size:12px;font-weight:500;line-height:1.4}
.act .ab{flex-shrink:0;font:inherit;font-size:10.5px;font-weight:500;color:var(--cyan);background:rgba(var(--cyan-rgb),.08);border:1px solid rgba(var(--cyan-rgb),.4);border-radius:var(--r-sm);padding:3px 10px;cursor:pointer;transition:background-color .15s,color .15s}
.act .ab:hover{background:rgba(var(--cyan-rgb),.2);color:#fff}
.act .ab:active{transform:translateY(1px)}
.act .ad{flex-shrink:0;font-size:10.5px;font-weight:500;color:var(--green)}
.act .am{font-size:11px;color:var(--dim);margin-top:3px;line-height:1.45}
.act.done .am{color:var(--green)}

/* 顶部 KPI 下钻浮层 */
#kpi-pop{display:none;position:fixed;z-index:90;width:302px;padding:11px 13px}
#kpi-pop:not([style*="display: none"]){animation:pop-in .2s var(--ease)}
#kpi-pop .kp-h{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;margin-bottom:7px}
#kpi-pop .kp-h .x{cursor:pointer;color:var(--faint);font-size:14px;transition:color .15s}
#kpi-pop .kp-h .x:hover{color:var(--red)}
#kpi-pop .kp-axis{display:flex;justify-content:space-between;font-size:9px;color:var(--faint);margin:3px 0 7px}
#kpi-pop .kp-rows{display:grid;grid-template-columns:1fr 1fr;gap:3px 16px}
#kpi-pop .kp-r{display:flex;justify-content:space-between;font-size:10.5px;color:var(--dim)}
#kpi-pop .kp-r b{font-family:var(--mono);font-weight:500;color:var(--tx)}

/* 演示导览 */
#demo-btn{position:absolute;top:74px;left:50%;transform:translateX(-50%);z-index:14;background:rgba(var(--cyan-rgb),.1);border:1px solid rgba(var(--cyan-rgb),.35);color:var(--cyan);font-weight:500;font-size:12px;padding:7px 16px;border-radius:99px;cursor:pointer;backdrop-filter:blur(10px);transition:background-color .15s}
#demo-btn:hover{background:rgba(var(--cyan-rgb),.2)}
#demo-btn:active{transform:translateX(-50%) translateY(1px)}
#demo-btn.hidden{display:none}
#demo-panel{position:absolute;top:72px;left:50%;transform:translateX(-50%);z-index:15;width:540px;padding:13px 18px}
#demo-panel:not(.hidden){animation:pop-in .24s var(--ease)}
#demo-panel.hidden{display:none}
.dp-k{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan);font-weight:500}
.dp-t{font-size:13px;line-height:1.55;margin:5px 0 11px;color:var(--tx)}
.dp-ctl{display:flex;align-items:center;gap:9px}
.dp-ctl .step{font-family:var(--mono);font-size:11px;color:var(--faint);margin-right:auto}
.dp-ctl button{background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--tx);border-radius:var(--r-sm);padding:5px 12px;font-size:12px;cursor:pointer;transition:color .15s,border-color .15s}
.dp-ctl button:hover{border-color:rgba(var(--cyan-rgb),.5);color:var(--cyan)}
.dp-ctl button:active{transform:translateY(1px)}

/* deck tooltip */
.deck-tooltip{font-family:var(--sans)!important;background:rgba(11,15,23,.92)!important;color:var(--tx)!important;border:1px solid var(--bd)!important;border-radius:var(--r-sm)!important;padding:7px 10px!important;font-size:11.5px!important;box-shadow:0 8px 26px rgba(0,0,0,.5)!important}
.deck-tooltip b{color:var(--cyan)}

/* 通用入场动画 */
@keyframes pop-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
#info-card-dragged,.info-card[data-dragged] {animation:none}

/* ============ 窄屏降级 ============ */
@media (max-width:1500px){
  .kpi .k em{display:none}
  #col-right{width:312px}
  #dock{right:320px}
  #insp-float{right:322px}
  .zoomctl{right:320px}
  #demo-btn{right:320px}
}
@media (max-width:1320px){
  #dk-legend{display:none}
  .kpis .kpi:nth-child(1) .k em,.kpis .kpi .k em{display:none}
}