:root{
  --bg:#030B19;--c1:#1FE0FF;--c2:#2B7BFF;--c3:#7DF9C4;--warn:#FFB547;--red:#FF4D5E;
  --t1:#E6F4FF;--t2:#8FB3D9;--t3:#58799E;--line:rgba(31,224,255,.18);
  --panel:linear-gradient(180deg,rgba(10,36,70,.72),rgba(6,22,46,.62));
  --font:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC","WenQuanYi Zen Hei",sans-serif;
  --num:"DIN Alternate","Bahnschrift","DIN Condensed","Roboto Condensed","Arial Narrow",ui-monospace,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;background:var(--bg);overflow:hidden;font-family:var(--font);color:var(--t1)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.ic{display:inline-block;vertical-align:middle;flex:none}
#viewport{position:fixed;inset:0;background:linear-gradient(rgba(31,224,255,.035) 1px,transparent 1px) 0 0/40px 40px,linear-gradient(90deg,rgba(31,224,255,.035) 1px,transparent 1px) 0 0/40px 40px,#03102A}
#stage{position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0;overflow:hidden;
  background:
    radial-gradient(ellipse 60% 50% at 50% 55%,rgba(20,90,170,.25),transparent 70%),
    linear-gradient(rgba(31,224,255,.035) 1px,transparent 1px) 0 0/40px 40px,
    linear-gradient(90deg,rgba(31,224,255,.035) 1px,transparent 1px) 0 0/40px 40px,
    #03102A}
.num{font-family:var(--num);font-variant-numeric:tabular-nums}

/* header */
.hd{position:absolute;left:0;top:0;width:1920px;height:92px}
.hd::before{content:"";position:absolute;left:0;right:0;top:0;height:92px;background:linear-gradient(180deg,rgba(8,40,86,.9),rgba(3,16,42,0));}
.hd-title{position:absolute;left:560px;width:800px;top:0;height:78px;text-align:center;
  background:linear-gradient(180deg,rgba(18,80,160,.55),rgba(8,40,90,.25));clip-path:polygon(0 0,100% 0,92% 100%,8% 100%)}
.hd-title::after{content:"";position:absolute;left:8%;right:8%;bottom:0;height:2px;background:linear-gradient(90deg,transparent,var(--c1),transparent)}
.hd-title h1{font-size:36px;letter-spacing:6px;line-height:62px;font-weight:700;background:linear-gradient(180deg,#fff 20%,#8FE9FF 100%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 18px rgba(31,224,255,.25)}
.hd-sub{font-size:14px;color:var(--c1);letter-spacing:8px;margin-top:-10px;opacity:.85}
.hd-l{position:absolute;left:32px;top:24px;display:flex;align-items:center;gap:18px;color:var(--t2);font-size:16px}
.hd-l .clock{font-family:var(--num);font-size:30px;color:var(--t1);letter-spacing:1px}
.hd-l .weather{display:flex;align-items:center;gap:6px;padding-left:18px;border-left:1px solid var(--line)}
.hd-nav{position:absolute;right:28px;top:22px;display:flex;gap:10px;align-items:center}
.hd-nav a{display:block;width:132px;height:40px;line-height:40px;text-align:center;color:var(--t2);font-size:17px;text-decoration:none;letter-spacing:2px;
  background:linear-gradient(180deg,rgba(20,70,140,.35),rgba(10,40,90,.35));border:1px solid rgba(31,224,255,.2);clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%);transition:.2s}
.hd-nav a:hover{color:#fff}
.hd-nav a.on{color:#fff;background:linear-gradient(180deg,rgba(31,160,255,.6),rgba(20,90,200,.35));border-color:var(--c1);text-shadow:0 0 8px rgba(31,224,255,.8)}
.hd-nav button{width:40px;height:40px;color:var(--t2);display:grid;place-items:center;border:1px solid rgba(31,224,255,.2);margin-left:6px}
.hd-nav button:hover{color:#fff;border-color:var(--c1)}

/* layout */
#main{position:absolute;left:0;top:92px;width:1920px;height:988px;padding:8px 24px 24px}
#main.enter{animation:enter .5s ease both}
@keyframes enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.col{position:absolute;top:8px;bottom:24px;display:flex;flex-direction:column;gap:16px}
.col.l{left:24px;width:468px}.col.r{right:24px;width:468px}
.col.c{left:512px;width:896px}
.pn{position:relative;background:var(--panel);border:1px solid rgba(31,224,255,.14);flex:none;display:flex;flex-direction:column}
.pn::before,.pn::after{content:"";position:absolute;width:14px;height:14px;border:2px solid var(--c1);pointer-events:none}
.pn::before{left:-1px;top:-1px;border-right:0;border-bottom:0}
.pn::after{right:-1px;bottom:-1px;border-left:0;border-top:0}
.pn-h{height:42px;display:flex;align-items:center;padding:0 16px 0 14px;position:relative;
  background:linear-gradient(90deg,rgba(31,140,255,.35),rgba(31,140,255,0) 70%);border-bottom:1px solid rgba(31,224,255,.16)}
.pn-h h3{font-size:18px;font-weight:600;letter-spacing:2px;display:flex;align-items:center;gap:10px}
.pn-h h3::before{content:"";width:5px;height:18px;background:linear-gradient(180deg,var(--c1),var(--c2));box-shadow:0 0 8px var(--c1)}
.pn-h .x{margin-left:auto;font-size:13px;color:var(--t3)}
.pn-h .x b{color:var(--c1);font-weight:400}
.pn-b{flex:1;position:relative;min-height:0}
.ch{position:absolute;inset:0}

/* tiles */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:14px 16px}
.tile{display:flex;align-items:center;gap:12px;padding:10px 12px;background:rgba(31,140,255,.07);border:1px solid rgba(31,224,255,.1)}
.tile .ti{width:46px;height:46px;display:grid;place-items:center;color:var(--c1);background:radial-gradient(circle,rgba(31,224,255,.25),rgba(31,224,255,.02) 70%);border:1px solid rgba(31,224,255,.35);transform:rotate(45deg);flex:none}
.tile .ti .ic{transform:rotate(-45deg)}
.tile .tl{font-size:13px;color:var(--t2)}
.tile .tv{font-family:var(--num);font-size:26px;font-weight:700;color:#fff;line-height:1.2}
.tile .tv small{font-size:13px;color:var(--t2);font-family:var(--font);font-weight:400;margin-left:3px}

.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;height:124px;flex:none}
.kpi{position:relative;padding:12px 18px;background:linear-gradient(180deg,rgba(31,140,255,.18),rgba(31,140,255,.03));border:1px solid rgba(31,224,255,.2);overflow:hidden}
.kpi::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,transparent,var(--kc,var(--c1)),transparent)}
.kpi .kl{font-size:15px;color:var(--t2);display:flex;align-items:center;gap:8px}
.kpi .kl .ic{color:var(--kc,var(--c1))}
.kpi .kv{font-family:var(--num);font-size:40px;font-weight:700;letter-spacing:1px;line-height:1.25;color:#fff;text-shadow:0 0 14px var(--kc,var(--c1))}
.kpi .kv small{font-size:15px;color:var(--t2);font-weight:400;margin-left:4px;text-shadow:none;font-family:var(--font)}
.kpi .kd{font-size:13px;color:var(--t3);margin-top:-2px}
.kpi .kd b{color:var(--t2)}
.kpi .kd b{font-weight:400;font-family:var(--num)}
.up{color:#FF7A7A}.dn{color:var(--c3)}

.map{position:relative;flex:1;min-height:0}
.map svg{position:absolute;inset:0;width:100%;height:100%}
.map-legend{position:absolute;left:12px;bottom:10px;display:flex;gap:16px;font-size:13px;color:var(--t2);background:rgba(3,16,42,.6);padding:6px 12px;border:1px solid var(--line)}
.map-legend span{display:flex;align-items:center;gap:6px}
.map-legend i{width:10px;height:10px;border-radius:50%;display:inline-block}
.map-title{position:absolute;left:14px;top:8px;font-size:14px;color:var(--t2);letter-spacing:1px}
.map-title b{color:var(--c1);font-weight:400}
.bld{cursor:pointer}
.bld:hover .top{fill-opacity:.75}
.bld .lbl,.lbls .lbl{font-size:13px;fill:#CFEFFF;pointer-events:none}
.pulse{animation:pls 2s ease-out infinite;transform-box:fill-box;transform-origin:center}
.pulse.d2{animation-delay:1s}
@keyframes pls{0%{transform:scale(.3);opacity:.95}100%{transform:scale(2.4);opacity:0}}
.flow{stroke-dasharray:10 14;animation:flow 1.4s linear infinite}
@keyframes flow{to{stroke-dashoffset:-24}}
.blink{animation:blink 1.2s ease-in-out infinite}
@keyframes blink{50%{opacity:.35}}
.scan{animation:scan 3s linear infinite;transform-box:fill-box;transform-origin:50% 100%}
@keyframes scan{0%{transform:rotate(-35deg)}50%{transform:rotate(35deg)}100%{transform:rotate(-35deg)}}

/* list */
.alist{position:absolute;inset:0;overflow:hidden;padding:0 12px;-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 34px),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 34px),transparent)}
.alist-in{transition:transform .6s ease}
.arow{display:grid;grid-template-columns:56px 1fr 64px;gap:10px;align-items:center;height:52px;border-bottom:1px dashed rgba(31,224,255,.12);font-size:14px;cursor:pointer}
.arow:hover{background:rgba(31,224,255,.06)}
.arow .lv{font-size:12px;text-align:center;padding:2px 0;border:1px solid}
.lv.l1{color:var(--red);border-color:rgba(255,77,94,.6);background:rgba(255,77,94,.12)}
.lv.l2{color:var(--warn);border-color:rgba(255,181,71,.5);background:rgba(255,181,71,.1)}
.lv.l3{color:var(--c1);border-color:rgba(31,224,255,.4);background:rgba(31,224,255,.08)}
.arow .am{min-width:0}
.arow .am b{display:block;font-weight:400;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arow .am span{font-size:12px;color:var(--t3)}
.arow .as{font-size:12px;text-align:right}
.st0{color:var(--red)}.st1{color:var(--warn)}.st2{color:var(--c3)}
.arow.new{animation:newrow 1.6s ease}
@keyframes newrow{0%,40%{background:rgba(255,77,94,.25)}100%{background:transparent}}
.thead{display:grid;grid-template-columns:56px 1fr 64px;gap:10px;font-size:13px;color:var(--t3);padding:8px 12px 6px}

.rank{padding:14px 16px;display:flex;flex-direction:column;gap:16px}
.rk{display:grid;grid-template-columns:28px 92px 1fr 72px;align-items:center;gap:8px;font-size:14px}
.rk .no{width:24px;height:20px;text-align:center;font-family:var(--num);font-size:13px;background:rgba(31,224,255,.12);color:var(--c1);clip-path:polygon(4px 0,100% 0,calc(100% - 4px) 100%,0 100%)}
.rk:nth-child(-n+3) .no{background:linear-gradient(90deg,#FF8A3D,#FFB547);color:#1b0f00}
.rk .bar{height:8px;background:rgba(31,224,255,.08);position:relative}
.rk .bar i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,rgba(31,120,255,.6),var(--c1));box-shadow:0 0 8px rgba(31,224,255,.5);transition:width 1.2s ease}
.rk .bar i::after{content:"";position:absolute;right:-2px;top:-3px;width:4px;height:14px;background:#fff;box-shadow:0 0 8px #fff}
.rk .v{text-align:right;font-family:var(--num);color:#fff}

.rings{display:grid;grid-template-columns:repeat(3,1fr);height:100%}
.ring{position:relative}
.ring .rt{position:absolute;left:0;right:0;bottom:12px;text-align:center;font-size:13px;color:var(--t2)}
.ring .rt b{display:block;font-family:var(--num);font-size:15px;color:var(--t1);font-weight:400}

.patrol{padding:8px 16px;display:flex;flex-direction:column;gap:12px}
.pt{font-size:14px}
.pt .ptt{display:flex;justify-content:space-between;margin-bottom:6px}
.pt .ptt span{color:var(--t3);font-size:12px}
.pt .pb{height:6px;background:rgba(31,224,255,.08)}
.pt .pb i{display:block;height:100%;background:linear-gradient(90deg,var(--c2),var(--c1))}
.pt.done .pb i{background:linear-gradient(90deg,#1FAF7A,var(--c3))}

.fire{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:12px 16px}
.fz{padding:10px;border:1px solid rgba(31,224,255,.14);background:rgba(31,140,255,.06);text-align:center}
.fz b{display:block;font-family:var(--num);font-size:24px}
.fz span{font-size:12px;color:var(--t2)}

/* tooltip & dialog */
.tip{position:absolute;z-index:40;pointer-events:none;min-width:220px;padding:12px 14px;background:rgba(4,24,54,.94);border:1px solid var(--c1);box-shadow:0 0 20px rgba(31,224,255,.25);font-size:14px;opacity:0;transition:opacity .15s}
.tip.on{opacity:1}
.tip h4{font-size:16px;color:var(--c1);margin-bottom:6px}
.tip div{display:flex;justify-content:space-between;gap:16px;line-height:1.8;color:var(--t2)}
.tip div b{color:#fff;font-weight:400;font-family:var(--num)}
.dlg-mask{position:absolute;inset:0;z-index:50;background:rgba(1,6,16,.6);display:none;align-items:center;justify-content:center}
.dlg-mask.on{display:flex}
.dlg{width:560px;background:linear-gradient(180deg,#0A2750,#061a38);border:1px solid var(--c1);box-shadow:0 0 40px rgba(31,224,255,.25);animation:enter .25s ease both}
.dlg-h{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line);font-size:20px}
.dlg-b{padding:18px 20px;font-size:15px;display:grid;grid-template-columns:96px 1fr;gap:12px 10px;color:var(--t2)}
.dlg-b b{color:var(--t1);font-weight:400}
.dlg-f{padding:14px 20px;display:flex;justify-content:flex-end;gap:12px;border-top:1px solid var(--line)}
.sbtn{height:38px;padding:0 22px;border:1px solid rgba(31,224,255,.4);color:var(--t1);font-size:15px;background:rgba(31,140,255,.12)}
.sbtn:hover{border-color:var(--c1)}
.sbtn.pri{background:linear-gradient(180deg,#1FA8FF,#1560D8);border-color:#3FC6FF}
.sbtn[disabled]{opacity:.5;pointer-events:none}
.cam{position:relative;height:150px;margin:0 20px 6px;background:linear-gradient(180deg,#0b1c33,#050d1a);border:1px solid var(--line);overflow:hidden}
.cam .rec{position:absolute;left:10px;top:8px;font-size:12px;color:#fff;display:flex;gap:6px;align-items:center}
.cam .rec i{width:8px;height:8px;border-radius:50%;background:var(--red)}
.cam .ts{position:absolute;right:10px;top:8px;font-size:12px;font-family:var(--num);color:#cfe}
.demo-mark{position:absolute;right:24px;bottom:4px;font-size:13px;color:var(--t3);letter-spacing:1px;z-index:30}
.toast{position:absolute;left:50%;top:110px;transform:translateX(-50%);z-index:60;padding:10px 22px;background:rgba(4,40,80,.95);border:1px solid var(--c1);font-size:16px;animation:enter .25s ease both}
#rotHint{position:absolute;left:24px;right:24px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;color:#8FB4E6;font-size:13px;line-height:1.6}
#rotHint svg{color:#3FA9FF;animation:rotHint 2.4s ease-in-out infinite}
#rotHint b{color:#E6F1FF;font-size:15px;font-weight:600}
@keyframes rotHint{0%,30%{transform:rotate(0)}55%,85%{transform:rotate(-90deg)}100%{transform:rotate(0)}}
/* a11y: visible keyboard focus */
:focus-visible:not(input):not(select):not(textarea){outline:2px solid var(--c1)!important;outline-offset:2px!important}