/* ================= 基础 ================= */
:root{
  --cy:#63e9ff;
  --cy-2:#2aa9d8;
  --cy-dim:rgba(99,233,255,.55);
  --line:rgba(74,197,238,.22);
  --line-2:rgba(74,197,238,.42);
  --panel-a:rgba(6,32,50,.86);
  --panel-b:rgba(3,16,27,.72);
  --txt:#d9f5ff;
  --dim:#84aec1;
  --ok:#39f5c0;
  --warn:#ffbd5e;
  --bad:#ff6470;
  --mono:"Bahnschrift","DIN Alternate",Consolas,"Microsoft YaHei",monospace;
  --nav-h:78px;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:#02080d}
body{
  font-family:"HarmonyOS Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  color:var(--txt);
  -webkit-font-smoothing:antialiased;
  user-select:none;
}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
canvas{display:block}
#app{position:fixed;inset:0;overflow:hidden;background:#02080d}
#scene{position:absolute;inset:0;width:100%;height:100%;outline:none}

/* ================= 环境特效 ================= */
.fx-vignette{position:absolute;inset:0;pointer-events:none;z-index:2;
  background:radial-gradient(ellipse 62% 55% at 50% 46%,transparent 30%,rgba(1,5,9,.35) 74%,rgba(1,4,8,.78) 100%);}
.fx-grid{position:absolute;inset:0;pointer-events:none;z-index:2;opacity:.35;
  background-image:radial-gradient(rgba(120,226,255,.28) .8px,transparent .9px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(ellipse 75% 70% at 50% 52%,#000 20%,transparent 78%);
  mask-image:radial-gradient(ellipse 75% 70% at 50% 52%,#000 20%,transparent 78%);}
.fx-scan{position:absolute;inset:0;pointer-events:none;z-index:3;opacity:.16;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.45) 0 1px,transparent 1px 3px);}
.hud{position:absolute;inset:0;z-index:5;pointer-events:none}
.hud > *{pointer-events:none}

/* ================= 顶栏 ================= */
.topbar{position:absolute;top:0;left:0;right:0;height:96px;display:flex;align-items:flex-start;
  padding:16px 26px 0;background:linear-gradient(180deg,rgba(3,18,30,.92),rgba(3,18,30,.28) 62%,transparent);}
.topbar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(99,233,255,.28) 18%,rgba(99,233,255,.5) 50%,rgba(99,233,255,.28) 82%,transparent);}
.brand{display:flex;align-items:center;gap:10px;width:228px;flex:none}
.brand-logo{width:40px;height:40px;filter:drop-shadow(0 0 9px rgba(80,220,255,.6))}
.brand-logo svg{width:100%;height:100%}
.brand-txt{display:flex;flex-direction:column;line-height:1.25}
.brand-txt b{font-size:17px;letter-spacing:.22em;color:#dff8ff;font-weight:700}
.brand-txt span{font-size:8.5px;letter-spacing:.16em;color:rgba(120,205,235,.62)}
.brand-txt em{font-style:normal;margin-top:3px;font-size:9px;letter-spacing:.02em;
  color:rgba(168,214,232,.8);white-space:nowrap;text-shadow:0 0 10px rgba(40,140,180,.45)}
.title-wrap{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;padding-top:0}
.title-wrap h1{font-size:clamp(26px,2.35vw,44px);font-weight:800;letter-spacing:.16em;line-height:1.1;
  background:linear-gradient(180deg,#ffffff 4%,#d6f6ff 34%,#54dcff 76%,#1897c8 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 16px rgba(70,210,255,.55)) drop-shadow(0 0 42px rgba(30,150,220,.35));
  white-space:nowrap}
.title-wrap h1::after{content:"";position:absolute;left:50%;top:6px;width:62%;height:34px;transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 0,rgba(64,205,255,.22),transparent 70%);filter:blur(6px);pointer-events:none}
.title-sub{margin-top:4px;font-size:9px;letter-spacing:.42em;color:rgba(124,205,232,.62);font-family:var(--mono)}
.t-deco{position:absolute;top:20px;width:210px;display:flex;align-items:center;gap:7px}
.t-deco.left{left:0;justify-content:flex-end}
.t-deco.right{right:0;justify-content:flex-start}
.t-deco i{height:1px;background:linear-gradient(90deg,transparent,rgba(99,233,255,.65));display:block}
.t-deco.left i:nth-child(1){width:130px}
.t-deco.left i:nth-child(2){width:8px;background:rgba(99,233,255,.9)}
.t-deco.left i:nth-child(3){width:36px;opacity:.5}
.t-deco.right{transform:scaleX(-1)}

.sys-info{width:430px;flex:none;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:7px 8px}
.sys-chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;font-size:11px;letter-spacing:.06em;
  color:#a8d8ea;border:1px solid rgba(74,197,238,.25);background:rgba(8,38,58,.55);clip-path:polygon(8px 0,100% 0,100% 100%,0 100%,0 8px)}
.sys-chip b{font-family:var(--mono);color:#8ff2ff;font-size:13px;margin:0 1px}
.sys-chip span{opacity:.55}
.clock{text-align:right;line-height:1.15;width:100%;display:flex;align-items:baseline;justify-content:flex-end;gap:10px;margin-top:1px}
.clock span{font-size:10.5px;color:rgba(140,200,222,.72);letter-spacing:.08em}
.clock b{display:inline-block;font-family:var(--mono);font-size:19px;letter-spacing:.09em;color:#e8fbff;
  text-shadow:0 0 14px rgba(80,215,255,.5);font-weight:500}
.dot{display:inline-block;width:6px;height:6px;border-radius:50%;flex:none;background:var(--ok);box-shadow:0 0 8px var(--ok)}
.dot.warn{background:var(--warn);box-shadow:0 0 8px var(--warn)}
.dot.bad{background:var(--bad);box-shadow:0 0 8px var(--bad)}
.dot.ok{background:var(--ok);box-shadow:0 0 8px var(--ok)}

/* ================= 面板通用 ================= */
.panel{position:relative;background:linear-gradient(158deg,var(--panel-a),var(--panel-b));
  border:1px solid var(--line);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  box-shadow:inset 0 0 34px rgba(24,140,200,.1),0 8px 30px rgba(0,0,0,.42);
  pointer-events:auto}
.panel::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,var(--cy),transparent) left top/22px 1.5px no-repeat,
    linear-gradient(180deg,var(--cy),transparent) left top/1.5px 22px no-repeat,
    linear-gradient(270deg,var(--cy),transparent) right bottom/22px 1.5px no-repeat,
    linear-gradient(0deg,var(--cy),transparent) right bottom/1.5px 22px no-repeat;
  opacity:.75}
.panel-hd{position:relative;display:flex;align-items:center;gap:8px;height:38px;padding:0 12px;
  background:linear-gradient(90deg,rgba(34,146,196,.26),rgba(34,146,196,.04) 62%,transparent);
  border-bottom:1px solid rgba(74,197,238,.16)}
.panel-hd::after{content:"";position:absolute;left:0;bottom:-1px;width:64px;height:1.5px;background:linear-gradient(90deg,var(--cy),transparent)}
.hd-mark{width:3px;height:13px;background:linear-gradient(180deg,#8ff6ff,#1594c4);box-shadow:0 0 7px rgba(99,233,255,.9)}
.panel-hd h2{font-size:13.5px;font-weight:600;letter-spacing:.14em;color:#e2f8ff;white-space:nowrap}
.hd-en{font-size:8px;letter-spacing:.14em;color:rgba(112,190,218,.55);font-family:var(--mono);margin-left:auto;white-space:nowrap}
.hd-badge{font-family:var(--mono);font-size:10px;color:#04202c;background:var(--warn);padding:0 5px;line-height:15px;
  box-shadow:0 0 10px rgba(255,189,94,.5)}

/* ================= 左列 ================= */
.left-col{position:absolute;left:112px;top:104px;width:296px;display:flex;flex-direction:column;gap:12px;
  transition:opacity .5s,transform .5s}
.flow-list{list-style:none;padding:9px 12px 4px}
.flow-list li{position:relative;display:flex;align-items:center;gap:8px;height:29px;font-size:12px;color:#a9cfdd}
.flow-list li::before{content:"";position:absolute;left:4px;top:-8px;bottom:19px;width:1px;background:linear-gradient(180deg,rgba(99,233,255,.4),rgba(99,233,255,.1))}
.flow-list li:first-child::before{display:none}
.fl-dot{width:9px;height:9px;flex:none;border:1px solid rgba(99,233,255,.7);border-radius:50%;background:rgba(6,32,50,.9);
  box-shadow:0 0 8px rgba(99,233,255,.4);position:relative;z-index:1}
.flow-list li:nth-child(1) .fl-dot,.flow-list li.out .fl-dot{background:var(--cy);box-shadow:0 0 12px var(--cy)}
.fl-name{flex:1;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.flow-list li b{font-family:var(--mono);font-size:12.5px;color:#9ef3ff;font-weight:500}
.flow-list li em{font-style:normal;font-size:9px;color:rgba(120,180,205,.6);width:52px;text-align:right;white-space:nowrap}
.flow-list li.out b{color:var(--ok);text-shadow:0 0 10px rgba(57,245,192,.4)}
.flow-foot{display:flex;justify-content:space-between;align-items:center;padding:7px 12px;border-top:1px solid rgba(74,197,238,.12);
  font-size:10.5px;color:#8fb8c9}
.flow-foot span{display:flex;align-items:center;gap:5px}
.flow-foot b{font-family:var(--mono);color:#a8eeff;font-weight:500}

.alarm-panel .alarm-list{list-style:none;padding:4px 10px;height:128px;overflow:hidden}
.alarm-list li{display:grid;grid-template-columns:7px 1fr auto;align-items:center;gap:7px;height:40px;
  border-bottom:1px dashed rgba(74,197,238,.1);font-size:11.5px;color:#a9c9d6;animation:fadeIn .5s}
.alarm-list li i{width:6px;height:6px;border-radius:50%;background:var(--warn);box-shadow:0 0 8px var(--warn)}
.alarm-list li.hi i{background:var(--bad);box-shadow:0 0 8px var(--bad)}
.alarm-list li .al-txt{display:flex;flex-direction:column;gap:2px;overflow:hidden}
.alarm-list li .al-txt b{font-weight:500;font-size:11.5px;color:#d3eef8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.alarm-list li .al-txt span{font-size:9.5px;color:rgba(130,185,205,.6)}
.alarm-list li em{font-style:normal;font-family:var(--mono);font-size:10px;color:rgba(255,189,94,.9)}
.quick-stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(74,197,238,.12);padding:9px 0}
.quick-stats div{text-align:center;border-right:1px solid rgba(74,197,238,.1)}
.quick-stats div:last-child{border:none}
.quick-stats b{display:block;font-family:var(--mono);font-size:17px;color:#9df3ff;font-weight:500;line-height:1.15}
.quick-stats span{font-size:9.5px;color:rgba(140,190,210,.62)}

/* ================= 左侧图标栏 ================= */
.left-rail{position:absolute;left:12px;top:50%;transform:translateY(-46%);width:94px;padding:8px 7px 9px;
  display:flex;flex-direction:column;gap:5px;pointer-events:auto;
  background:linear-gradient(180deg,rgba(5,28,44,.82),rgba(4,18,30,.42));
  border:1px solid rgba(74,197,238,.16);backdrop-filter:blur(6px);
  box-shadow:inset 0 0 26px rgba(20,140,200,.1),0 8px 26px rgba(0,0,0,.35)}
.left-rail::before{content:"";position:absolute;left:-1px;top:-1px;width:14px;height:14px;
  border-left:2px solid var(--cy);border-top:2px solid var(--cy);filter:drop-shadow(0 0 4px var(--cy))}
.left-rail::after{content:"";position:absolute;right:-1px;bottom:-1px;width:14px;height:14px;
  border-right:2px solid var(--cy);border-bottom:2px solid var(--cy);filter:drop-shadow(0 0 4px var(--cy))}
.rail-title{font-size:8px;letter-spacing:.22em;color:rgba(120,190,215,.6);text-align:center;
  padding:2px 0 6px;margin-bottom:1px;border-bottom:1px solid rgba(74,197,238,.14)}
.rail-btn{position:relative;display:flex;align-items:center;gap:6px;height:32px;padding:0 5px;width:100%;
  border:1px solid transparent;color:rgba(148,198,220,.72);transition:.22s;pointer-events:auto;text-align:left}
.rail-btn .ico{width:23px;height:23px;flex:none;display:grid;place-items:center;
  border:1px solid rgba(74,197,238,.22);background:rgba(9,36,54,.55);transition:.22s}
.rail-btn .ico svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.45;
  stroke-linecap:round;stroke-linejoin:round}
.rail-btn span{font-size:9.5px;letter-spacing:.01em;white-space:nowrap}
.rail-btn:hover{color:#cdf6ff;background:linear-gradient(90deg,rgba(40,160,210,.26),rgba(40,160,210,.02));
  border-color:rgba(74,197,238,.32);transform:translateX(1px)}
.rail-btn:hover .ico{border-color:rgba(99,233,255,.5);background:rgba(18,64,92,.7)}
.rail-btn.active{color:#f0feff;background:linear-gradient(90deg,rgba(48,182,232,.42),rgba(24,96,140,.1));
  border-color:rgba(99,233,255,.5);box-shadow:inset 0 0 16px rgba(99,233,255,.14)}
.rail-btn.active .ico{border-color:rgba(120,240,255,.8);background:rgba(30,120,168,.55);
  box-shadow:0 0 10px rgba(99,233,255,.35)}
.rail-btn.active::before{content:"";position:absolute;left:-1px;top:5px;bottom:5px;width:2px;
  background:var(--cy);box-shadow:0 0 10px var(--cy)}
.rail-btn.active svg{filter:drop-shadow(0 0 5px rgba(99,233,255,.9))}
.rail-sep{height:1px;margin:3px 2px;background:linear-gradient(90deg,transparent,rgba(74,197,238,.28),transparent)}

/* ================= 右列 ================= */
.right-col{position:absolute;right:22px;top:104px;width:336px;display:flex;flex-direction:column;gap:12px;
  transition:opacity .5s,transform .5s}
.seg{display:flex;gap:0;margin-left:10px;border:1px solid rgba(74,197,238,.3);height:22px;align-items:stretch}
.seg button{font-size:10px;padding:0 9px;color:rgba(150,205,225,.7);letter-spacing:.04em}
.seg button.on{background:linear-gradient(180deg,rgba(70,205,250,.45),rgba(30,140,190,.4));color:#f0feff;
  box-shadow:inset 0 0 10px rgba(99,233,255,.3)}
.q-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(74,197,238,.1);margin:10px 0 0}
.q-item{background:linear-gradient(160deg,rgba(8,38,58,.9),rgba(4,20,33,.82));padding:8px 10px 7px}
.q-name{display:flex;align-items:baseline;gap:5px;font-size:10.5px;color:#93bccd;letter-spacing:.03em}
.q-name small{font-size:8.5px;color:rgba(120,175,195,.55);transform:scale(.92);transform-origin:left}
.q-val{display:flex;align-items:baseline;gap:3px;margin:1px 0 4px}
.q-val b{font-family:var(--mono);font-size:23px;line-height:1.1;font-weight:500;color:#eafcff;letter-spacing:.01em;
  text-shadow:0 0 16px rgba(70,210,255,.35)}
.q-val em{font-style:normal;font-size:9px;color:rgba(130,185,205,.65)}
.q-item.small .q-val b{font-size:19px}
.q-foot{display:flex;align-items:center;gap:6px;font-size:8.5px;color:rgba(125,175,195,.55)}
.q-bar{flex:1;height:3px;background:rgba(120,200,225,.13);position:relative;overflow:hidden}
.q-bar u{position:absolute;left:0;top:0;bottom:0;width:40%;background:linear-gradient(90deg,#1d93bb,#6ceaff);
  box-shadow:0 0 8px rgba(99,233,255,.55);transition:width .6s}
.q-bar u.hot{background:linear-gradient(90deg,#b97a1e,#ffcb6d);box-shadow:0 0 8px rgba(255,189,94,.6)}
.q-bar.neutral u{background:linear-gradient(90deg,#1f9b7c,#4cf3c4)}
.q-chart{margin:8px 10px 10px;border-top:1px solid rgba(74,197,238,.12);padding-top:6px}
.qc-hd{display:flex;justify-content:space-between;font-size:9.5px;color:rgba(140,190,210,.7);margin-bottom:3px}
.qc-hd em{font-style:normal;font-family:var(--mono);font-size:8.5px;color:rgba(120,175,195,.45)}
#trendChart{width:100%;height:58px}

.perf-body{display:flex;align-items:center;gap:10px;padding:10px 12px 8px}
.ring{position:relative;width:104px;height:104px;flex:none}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.rg-bg{fill:none;stroke:rgba(74,197,238,.13);stroke-width:7}
.rg-fg{fill:none;stroke:url(#g) ;stroke:#4fe8d6;stroke-width:7;stroke-linecap:round;
  stroke-dasharray:301.6;stroke-dashoffset:2.4;filter:drop-shadow(0 0 7px rgba(79,232,214,.75));transition:stroke-dashoffset 1s}
.rg-in{fill:none;stroke:rgba(74,197,238,.12);stroke-width:.8;stroke-dasharray:2 4}
.ring-txt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0}
.ring-txt b{font-family:var(--mono);font-size:24px;color:#c9fff8;font-weight:500;line-height:1;text-shadow:0 0 16px rgba(79,232,214,.55)}
.ring-txt em{font-style:normal;font-size:9px;color:rgba(150,230,220,.8);margin-top:-2px}
.ring-txt span{font-size:8.5px;color:rgba(130,190,205,.6);margin-top:2px;letter-spacing:.04em}
.perf-list{list-style:none;flex:1;display:flex;flex-direction:column;gap:9px}
.perf-list li{display:grid;grid-template-columns:1fr auto auto;align-items:baseline;gap:3px;font-size:10.5px;color:#9ac3d4}
.perf-list li span{grid-column:1/2}
.perf-list li b{font-family:var(--mono);font-size:14px;color:#d5f8ff;font-weight:500}
.perf-list li em{font-style:normal;font-size:8.5px;color:rgba(120,175,195,.55)}
.pbar{grid-column:1/4;height:3px;background:rgba(120,200,225,.12);position:relative;overflow:hidden;margin-top:1px}
.pbar u{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,#1d93bb,#6ceaff);box-shadow:0 0 8px rgba(99,233,255,.5);transition:width .6s}
.perf-foot{display:flex;border-top:1px solid rgba(74,197,238,.12)}
.perf-foot div{flex:1;padding:7px 12px;display:flex;align-items:baseline;gap:4px;border-right:1px solid rgba(74,197,238,.1)}
.perf-foot div:last-child{border:none}
.perf-foot span{font-size:9.5px;color:rgba(130,185,205,.6)}
.perf-foot b{font-family:var(--mono);font-size:13px;color:#bff6ff;font-weight:500;margin-left:auto}
.perf-foot em{font-style:normal;font-size:8px;color:rgba(120,175,195,.5)}
.equip-list{list-style:none;padding:5px 12px 8px}
.equip-list li{display:flex;align-items:center;gap:8px;height:25px;font-size:11px;color:#a4c9d8;border-bottom:1px dashed rgba(74,197,238,.08)}
.equip-list li:last-child{border:none}
.equip-list li span{flex:1}
.equip-list li b{font-family:var(--mono);font-size:11.5px;color:#cdf6ff;font-weight:500}
.equip-list li em{font-style:normal;font-size:9px;color:rgba(130,185,205,.6);width:26px;text-align:right}

/* ================= 三维标签 ================= */
.tags,.markers,.leaders{position:absolute;inset:0;pointer-events:none}
.tags{overflow:hidden}
.tag{position:absolute;transform:translate(-50%,-50%);font-size:10.5px;letter-spacing:.1em;color:rgba(168,236,255,.8);
  white-space:nowrap;text-shadow:0 0 10px rgba(20,120,170,.9);transition:opacity .3s}
.tag::before{content:"";position:absolute;left:-9px;top:50%;width:4px;height:4px;transform:translateY(-50%) rotate(45deg);
  background:rgba(99,233,255,.9);box-shadow:0 0 7px rgba(99,233,255,.8)}
.tag::after{content:"";position:absolute;left:-24px;top:50%;width:14px;height:1px;background:linear-gradient(90deg,transparent,rgba(99,233,255,.6))}

.marker{position:absolute;width:198px;transform:translate(-50%,-100%);
  background:linear-gradient(158deg,rgba(7,42,66,.93),rgba(3,20,34,.8));
  border:1px solid rgba(86,215,255,.38);backdrop-filter:blur(5px);
  box-shadow:0 0 22px rgba(0,90,140,.4),inset 0 0 26px rgba(20,140,200,.16);
  pointer-events:auto;transition:box-shadow .25s,opacity .3s;will-change:left,top}
.marker::before{content:"";position:absolute;left:-1px;top:-1px;width:14px;height:14px;
  border-left:2px solid var(--cy);border-top:2px solid var(--cy);filter:drop-shadow(0 0 4px var(--cy))}
.marker::after{content:"";position:absolute;right:-1px;bottom:-1px;width:14px;height:14px;
  border-right:2px solid var(--cy);border-bottom:2px solid var(--cy);filter:drop-shadow(0 0 4px var(--cy))}
.marker:hover{box-shadow:0 0 30px rgba(60,200,255,.55),inset 0 0 34px rgba(30,160,220,.25)}
.mk-hd{display:flex;align-items:center;gap:6px;height:26px;padding:0 8px;
  background:linear-gradient(90deg,rgba(56,196,245,.3),rgba(56,196,245,.05));border-bottom:1px solid rgba(86,215,255,.2)}
.mk-hd .ic{width:6px;height:6px;background:var(--cy);transform:rotate(45deg);box-shadow:0 0 7px var(--cy)}
.mk-hd b{font-size:11px;font-weight:600;letter-spacing:.1em;color:#eafcff;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-hd em{font-style:normal;font-size:8px;color:rgba(150,210,230,.5);font-family:var(--mono);letter-spacing:.06em}
.mk-hd .x{font-size:11px;color:rgba(150,210,230,.5);line-height:1;padding:0 1px}
.mk-body{padding:6px 9px 7px;display:flex;flex-direction:column;gap:3px}
.mk-row{display:flex;align-items:baseline;font-size:10px;color:#93bccd}
.mk-row span{flex:1;white-space:nowrap}
.mk-row b{font-family:var(--mono);font-size:12px;color:#a9f2ff;font-weight:500;margin-right:2px}
.mk-row em{font-style:normal;font-size:8px;color:rgba(120,175,195,.55)}
.mk-status{display:flex;align-items:center;gap:5px;margin-top:2px;padding-top:4px;border-top:1px dashed rgba(86,215,255,.16);
  font-size:9px;color:rgba(140,200,220,.72)}
.mk-status i{width:5px;height:5px;border-radius:50%;background:var(--ok);box-shadow:0 0 6px var(--ok)}
.mk-status b{margin-left:auto;font-weight:500;color:#8ff5d8;font-size:9px}
.marker.hidden{opacity:0;pointer-events:none}
.leaders{overflow:visible}
.leaders line{stroke:rgba(95,225,255,.45);stroke-width:1}
.leaders circle{fill:#8ff6ff;filter:drop-shadow(0 0 5px #63e9ff)}

/* ================= 模式浮层 ================= */
.mode-layer{position:absolute;inset:0;z-index:6}
.mode-panel{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .45s;pointer-events:none}
.mode-panel .panel{pointer-events:auto}
#app[data-mode="forecast"] #mForecast,
#app[data-mode="ops"] #mOps,
#app[data-mode="safety"] #mSafety{opacity:1;visibility:visible}
#app:not([data-mode="overview"]) .left-col,
#app:not([data-mode="overview"]) .right-col{opacity:0;transform:translateX(-18px);pointer-events:none}
#app:not([data-mode="overview"]) .right-col{transform:translateX(18px)}
#app:not([data-mode="overview"]) .markers{display:none}
#app:not([data-mode="overview"]) .markers .marker,
#app:not([data-mode="overview"]) .tag{opacity:.35}

/* 预测分析 */
.fc-panel{position:absolute;left:50%;bottom:calc(var(--nav-h) + 24px);transform:translateX(-50%);width:min(1180px,82vw)}
.fc-body{display:flex;gap:14px;padding:12px 14px 6px}
.fc-chartwrap{flex:1;position:relative;min-width:0}
#fcChart{width:100%;height:238px}
.fc-legend{position:absolute;left:6px;top:2px;display:flex;align-items:center;gap:14px;font-size:9.5px;color:rgba(150,205,220,.72)}
.fc-legend i{display:inline-block;width:16px;height:2px;margin-right:5px;vertical-align:middle;background:#7ef0ff}
.fc-legend i.l2{background:repeating-linear-gradient(90deg,#ffd479 0 4px,transparent 4px 7px)}
.fc-legend i.l3{background:rgba(255,212,121,.22);height:8px;vertical-align:-2px}
.fc-side{width:216px;flex:none;border-left:1px solid rgba(74,197,238,.14);padding-left:14px;display:flex;flex-direction:column;gap:11px}
.fc-kpi{display:flex;align-items:baseline;gap:4px;flex-wrap:wrap}
.fc-kpi span{width:100%;font-size:10px;color:rgba(140,195,215,.7)}
.fc-kpi b{font-family:var(--mono);font-size:22px;color:#d8fbff;font-weight:500}
.fc-kpi em{font-style:normal;font-size:9px;color:rgba(120,175,195,.6)}
.fc-kpi b.okc{color:var(--ok)}
.fc-notes{list-style:none;margin-top:2px;display:flex;flex-direction:column;gap:5px;font-size:9px;color:rgba(130,185,205,.6);line-height:1.5}
.fc-notes li{padding-left:9px;position:relative}
.fc-notes li::before{content:"";position:absolute;left:0;top:6px;width:3px;height:3px;background:rgba(99,233,255,.6)}
.fc-bottom{display:flex;align-items:center;gap:8px;margin:6px 14px 12px;padding:8px 10px;font-size:10.5px;color:#ffd9a6;
  background:linear-gradient(90deg,rgba(255,180,80,.14),rgba(255,180,80,.02));border-left:2px solid rgba(255,190,100,.7)}
.warn-ic{width:14px;height:14px;flex:none;border-radius:50%;background:rgba(255,190,100,.9);color:#241000;font-style:normal;
  font-size:10px;line-height:14px;text-align:center;font-weight:700}

/* 业务操作 */
.ops-panel{position:absolute;left:112px;top:104px;width:404px}
.ops-side{position:absolute;right:22px;top:104px;width:318px}
.mode-tag{margin-left:auto;font-size:9px;color:#8ff5d8;border:1px solid rgba(57,245,192,.4);padding:1px 6px;
  background:rgba(57,245,192,.1);letter-spacing:.06em}
.ops-body{padding:12px 14px 6px;display:flex;flex-direction:column;gap:13px}
.slider-row{display:flex;flex-direction:column;gap:5px}
.sr-hd{display:flex;align-items:baseline;gap:5px;font-size:10.5px;color:#9cc4d4}
.sr-hd b{margin-left:auto;font-family:var(--mono);font-size:15px;color:#c9f7ff;font-weight:500}
.sr-hd em{font-style:normal;font-size:8.5px;color:rgba(120,175,195,.55);width:46px}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:14px;background:transparent;pointer-events:auto}
input[type=range]::-webkit-slider-runnable-track{height:3px;background:linear-gradient(90deg,rgba(99,233,255,.65),rgba(99,233,255,.12));border-radius:2px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;margin-top:-4.5px;border-radius:50%;
  background:#d8fbff;border:2px solid #35c9f0;box-shadow:0 0 10px rgba(99,233,255,.9)}
.sr-range{display:flex;justify-content:space-between;font-size:8px;color:rgba(120,175,195,.4);font-family:var(--mono)}
.ops-preview{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(74,197,238,.14);
  border-bottom:1px solid rgba(74,197,238,.14);margin-top:8px}
.ops-preview div{padding:8px 12px;border-right:1px solid rgba(74,197,238,.1);display:flex;flex-direction:column;gap:1px}
.ops-preview div:last-child{border:none}
.ops-preview span{font-size:9px;color:rgba(130,185,205,.65)}
.ops-preview b{font-family:var(--mono);font-size:17px;color:#a9f2ff;font-weight:500}
.ops-preview em{font-style:normal;font-size:8px;color:rgba(120,175,195,.5)}
.ops-actions{display:flex;gap:8px;justify-content:flex-end;padding:10px 14px 12px}
.btn{font-size:11px;padding:6px 16px;letter-spacing:.08em;border:1px solid rgba(74,197,238,.3);transition:.2s;pointer-events:auto}
.btn.ghost{color:#9fc9d9;background:rgba(10,40,60,.5)}
.btn.ghost:hover{color:#d6f8ff;border-color:rgba(99,233,255,.6)}
.btn.primary{color:#04222e;background:linear-gradient(180deg,#8cf4ff,#34c6ef);border-color:#8cf4ff;
  box-shadow:0 0 18px rgba(70,210,255,.45);font-weight:600}
.btn.primary:hover{box-shadow:0 0 26px rgba(70,210,255,.7)}
.equip-ctrl{list-style:none;padding:6px 12px 10px}
.equip-ctrl li{display:flex;align-items:center;gap:8px;height:38px;font-size:11px;color:#a4c9d8;border-bottom:1px dashed rgba(74,197,238,.1)}
.equip-ctrl li span{flex:1}
.toggle{font-size:9.5px;padding:3px 9px;border:1px solid rgba(120,180,200,.3);color:rgba(160,200,215,.7);background:rgba(10,30,44,.6);min-width:52px}
.toggle.on{color:#062018;background:linear-gradient(180deg,#5ff0c8,#25b892);border-color:#5ff0c8;box-shadow:0 0 10px rgba(57,245,192,.35)}
.interlock{margin:0 12px 12px;padding:8px 9px;font-size:9.5px;line-height:1.6;color:rgba(255,205,140,.8);
  background:rgba(255,180,80,.07);border:1px solid rgba(255,180,80,.2);display:flex;gap:6px}
.interlock i{font-style:normal;color:#ffcb6d}

/* 安全监控 */
.cams-panel{position:absolute;left:112px;top:104px;width:min(700px,48vw)}
.cam-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px}
.cam-tile{position:relative;aspect-ratio:16/9;background:#04121b;border:1px solid rgba(74,197,238,.2);overflow:hidden}
.cam-tile canvas{width:100%;height:100%;display:block}
.cam-tile .cam-hd{position:absolute;left:0;top:0;right:0;display:flex;align-items:center;gap:5px;padding:4px 6px;
  font-size:9px;color:rgba(200,240,255,.85);background:linear-gradient(180deg,rgba(2,12,20,.85),transparent)}
.cam-tile .cam-hd em{font-style:normal;font-size:8px;font-family:var(--mono);color:rgba(160,215,235,.6);margin-left:auto}
.cam-tile .cam-tag{position:absolute;left:6px;bottom:6px;font-size:8px;padding:1px 5px;color:#062018;
  background:rgba(57,245,192,.9);letter-spacing:.04em}
.cam-tile .cam-tag.warn{background:rgba(255,189,94,.92);color:#2a1600}
.live{display:flex;align-items:center;gap:4px;margin-left:4px;font-size:8px;color:#ff8b93;font-family:var(--mono);letter-spacing:.1em}
.live i{width:5px;height:5px;border-radius:50%;background:#ff5f6d;box-shadow:0 0 7px #ff5f6d;animation:blink 1.6s infinite}
.safety-side{position:absolute;right:22px;top:104px;width:336px}
.safety-body{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(74,197,238,.1);margin:10px}
.safety-kpi{background:rgba(6,30,46,.85);padding:9px 10px;display:flex;flex-wrap:wrap;align-items:baseline;gap:1px 4px}
.safety-kpi span{font-size:9.5px;color:rgba(140,195,215,.65);width:100%}
.safety-kpi b{font-family:var(--mono);font-size:20px;color:#d8fbff;font-weight:500}
.safety-kpi b.okc{color:var(--ok)}
.safety-kpi em{font-style:normal;font-size:8px;color:rgba(120,175,195,.5)}
.safety-list{list-style:none;padding:0 12px 12px}
.safety-list li{display:flex;align-items:center;gap:8px;height:30px;font-size:10.5px;color:#a4c9d8;
  border-bottom:1px dashed rgba(74,197,238,.1)}
.safety-list li span{flex:1}
.safety-list li b{font-family:var(--mono);font-weight:500;color:#bdf6ff;font-size:10px}

/* ================= 底部导航 ================= */
.bottom-nav{position:absolute;left:0;right:0;bottom:0;height:var(--nav-h);display:flex;align-items:center;
  justify-content:space-between;padding:0 26px 12px;background:linear-gradient(0deg,rgba(2,12,20,.92),rgba(2,12,20,.35) 60%,transparent)}
.bottom-nav::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(99,233,255,.24) 25%,rgba(99,233,255,.24) 75%,transparent)}
.bn-side{display:flex;align-items:center;gap:7px;font-size:9.5px;color:rgba(130,185,205,.6);width:250px}
.bn-side.right{justify-content:flex-end}
.bn-side b{font-family:var(--mono);color:#a9e9ff;font-weight:500;font-size:10px}
.bn-side b.okc{color:var(--ok)}
.bn-side b.warnc{color:var(--warn);text-shadow:0 0 8px rgba(255,189,94,.35)}
.bn-k::after{content:"·";margin-left:7px;color:rgba(99,233,255,.4)}
.nav-tabs{display:flex;align-items:center;gap:10px;margin-bottom:2px}
.tab{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  width:152px;height:46px;color:rgba(150,205,228,.68);
  background:linear-gradient(180deg,rgba(16,60,88,.42),rgba(8,26,40,.2));
  border:1px solid rgba(74,197,238,.18);transform:skewX(-14deg);transition:.28s;pointer-events:auto}
.tab span,.tab em,.tab i{transform:skewX(14deg)}
.tab span{font-size:14px;letter-spacing:.24em;font-weight:600}
.tab em{font-style:normal;font-size:7.5px;letter-spacing:.2em;font-family:var(--mono);color:rgba(120,180,205,.45)}
.tab i{position:absolute;left:14px;top:50%;width:5px;height:5px;margin-top:-2.5px;border:1px solid rgba(99,233,255,.5);transform:skewX(14deg) rotate(45deg)}
.tab::before,.tab::after{content:"";position:absolute;top:50%;width:7px;height:7px;border-top:1px solid var(--cy);border-right:1px solid var(--cy);
  opacity:0;transition:.28s;margin-top:-3.5px}
.tab::before{left:6px;transform:rotate(-135deg)}
.tab::after{right:6px;transform:rotate(45deg)}
.tab:hover{color:#d4f6ff;border-color:rgba(99,233,255,.42);background:linear-gradient(180deg,rgba(30,105,145,.5),rgba(10,40,60,.3))}
.tab.active{color:#fff;border-color:rgba(99,233,255,.72);
  background:linear-gradient(180deg,rgba(70,195,240,.5),rgba(16,90,130,.35));
  box-shadow:0 0 22px rgba(50,180,235,.35),inset 0 0 20px rgba(99,233,255,.22)}
.tab.active i{background:var(--cy);box-shadow:0 0 8px var(--cy)}
.tab.active::before,.tab.active::after{opacity:1}
.tab.active span{text-shadow:0 0 12px rgba(148,240,255,.7)}

/* ================= 角标 / 比例尺 ================= */
.corner{position:absolute;width:44px;height:44px;border:1px solid rgba(99,233,255,.3);opacity:.8}
.corner.tl{left:12px;top:12px;border-right:none;border-bottom:none}
.corner.tr{right:12px;top:12px;border-left:none;border-bottom:none}
.corner.bl{left:12px;bottom:12px;border-right:none;border-top:none}
.corner.br{right:12px;bottom:12px;border-left:none;border-top:none}
.scale-bar{position:absolute;left:18px;bottom:calc(var(--nav-h) + 10px);display:flex;align-items:center;gap:6px;
  font-size:8.5px;font-family:var(--mono);color:rgba(140,200,220,.55)}
.scale-bar i{display:block;width:64px;height:5px;border:1px solid rgba(99,233,255,.4);border-top:none;
  background:linear-gradient(90deg,rgba(99,233,255,.35),transparent)}

/* ================= 加载 ================= */
#boot{position:absolute;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  background:radial-gradient(ellipse at 50% 50%,#061e2e,#01080e 70%);transition:opacity .8s,visibility .8s}
#boot.done{opacity:0;visibility:hidden}
.boot-ring{width:74px;height:74px;border:1px solid rgba(99,233,255,.18);border-top-color:var(--cy);border-radius:50%;
  animation:spin 1.1s linear infinite;box-shadow:0 0 30px rgba(40,180,235,.25) inset}
.boot-txt{font-size:11px;letter-spacing:.24em;color:rgba(150,215,235,.75);display:flex;gap:8px;align-items:baseline}
.boot-txt b{font-family:var(--mono);color:#9ef3ff;font-size:12px}

@keyframes spin{to{transform:rotate(360deg)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes pulse{0%,100%{opacity:.55}50%{opacity:1}}

@media (max-width:1500px){
  .left-col{width:274px;left:104px}
  .right-col{width:312px}
  .flow-list li{height:29px}
  .brand{width:196px}
  .sys-info{width:340px}
  .tab{width:136px}
  .marker{width:184px}
}
@media (max-height:820px){
  .left-col{gap:6px}
  .flow-list{padding:7px 9px 3px}
  .flow-list li{height:22px;font-size:11px;gap:6px}
  .flow-list li em{width:42px;font-size:7.5px}
  .alarm-panel .alarm-list{height:92px}
  .alarm-list li{height:30px}
  .equip-list li{height:21px}
  .q-chart{display:none}
  .tab{height:42px}
  .nav-tabs{gap:8px}
}