:root{--bg:#05070d;--panel:#0b1020;--line:#1a2340;--txt:#d6def5;--dim:#7d89ab;--cy:#3ee0ff;--vi:#b36bff;--go:#ffcc33;--rd:#ff4d6d;--gr:#4dff9a;--or:#ff9d3b;--vh:100vh;--toph:48px}
@supports (height:100dvh){:root{--vh:100dvh}}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--txt);font:13px/1.45 -apple-system,"PingFang SC","Hiragino Sans GB","Hiragino Sans","Microsoft YaHei",sans-serif}
body{overflow:hidden}
#app{display:flex;flex-direction:column;height:var(--vh)}
#top{flex:0 0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:8px 14px;border-bottom:1px solid var(--line);background:linear-gradient(90deg,#070b18,#0a0f22)}
#top h1{font-size:18px;margin:0 6px 0 0;letter-spacing:1px;color:var(--cy)}
#top .sp1{flex:1 1 0}
.chip{padding:3px 9px;border:1px solid var(--line);border-radius:12px;background:#0d1428;white-space:nowrap;font-variant-numeric:tabular-nums;font-size:12px}
.chip i{font-style:normal;color:var(--dim);margin-right:4px}
button.chip{color:var(--txt);cursor:pointer;font:inherit;font-size:12px}button.chip:hover{border-color:#3a4c88}
#modeBtn{color:var(--gr)}
#conn.ok{color:var(--gr)}#conn.bad{color:var(--rd)}
#c-self{border-color:#5a4a10}#c-selfv{color:#ffe066}
.c-ai{color:#b4ff3c}#t-models td:nth-child(1){width:40%}#t-models td:nth-child(2){width:26%}#t-models td:nth-child(3){width:15%}#t-models td:nth-child(4){width:19%}.c-load{color:var(--go)}
#main{flex:1 1 auto;min-height:0;display:flex}
#stage{position:relative;flex:1 1 auto;min-width:0;min-height:0;overflow:hidden;background:radial-gradient(ellipse at 44% 47%,#0b1430 0%,#060a16 55%,#04060c 100%)}
#stage::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(60,90,160,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(60,90,160,.06) 1px,transparent 1px);background-size:40px 40px}
#cv{position:absolute;left:0;top:0;display:block}
#now{position:absolute;left:10px;top:8px;z-index:4;max-width:62%;padding:3px 12px;border-radius:14px;background:rgba(10,16,34,.82);border:1px solid #233063;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12.5px;pointer-events:none}
#now .k{color:var(--dim);margin-right:6px}
#focusChip{position:absolute;left:10px;top:38px;z-index:4;padding:3px 10px;border-radius:14px;background:rgba(40,32,6,.9);border:1px solid var(--go);color:#ffe9a0;font-size:12px;cursor:pointer;display:none;max-width:50%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#side{flex:0 0 400px;width:400px;min-width:0;border-left:1px solid var(--line);background:var(--panel);overflow-y:auto;padding:4px 12px 30px}
body.noside #side{display:none}
section{min-width:0;break-inside:avoid}
#side h3{margin:12px 0 6px;font-size:12px;color:var(--dim);font-weight:600;letter-spacing:1px;border-bottom:1px solid var(--line);padding-bottom:3px}
.sp{display:grid;grid-template-columns:84px minmax(0,1fr) 100px;align-items:center;gap:6px;margin:3px 0}
.sp .n{color:var(--dim);font-size:12px}.sp .v{text-align:right;font-variant-numeric:tabular-nums;font-size:12px}
.sp canvas{width:100%;height:30px;display:block}
#cores{display:flex;gap:2px;height:30px;align-items:stretch;margin:6px 0 2px}
#cores div{flex:1 1 0;min-width:0;background:#18213d;position:relative;border-radius:2px;overflow:hidden}
#cores div i{position:absolute;left:0;right:0;bottom:0;background:var(--c)}
#corelab{display:flex;gap:2px;font-size:9px;color:var(--dim)}#corelab span{flex:1 1 0;min-width:0;text-align:center;overflow:hidden}
table{width:100%;border-collapse:collapse;font-size:12px;font-variant-numeric:tabular-nums;table-layout:fixed}
td{padding:2px 4px;border-bottom:1px solid #121a33;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
td.r{text-align:right}td.d{color:var(--dim)}
td.nm{width:48%}td.nm small{color:var(--dim);margin-left:5px;font-size:10.5px}
tr[data-fk]{cursor:pointer}tr[data-fk]:hover td{background:#111a36}
tr.fdim{opacity:.25}tr.fhl td{background:rgba(255,204,51,.08)}tr.fsel td{background:rgba(255,204,51,.18)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;vertical-align:middle}
.badge{font-size:10px;padding:0 5px;border-radius:7px;margin-left:4px;border:1px solid}
.b-exit{color:var(--go);border-color:var(--go)}.b-act{color:var(--vi);border-color:var(--vi)}.b-self{color:#ffe066;border-color:#ffe066}
.selfbox{background:#0e1530;border:1px solid #233063;border-radius:8px;padding:5px 8px;margin:4px 0}
#alerts .a{padding:3px 6px;margin:3px 0;border-left:3px solid var(--or);background:#0e1530;border-radius:3px;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#alerts .a.crit{border-color:var(--rd)}#alerts .a.info{border-color:var(--cy)}
#alerts .a .t{color:var(--dim);font-size:11px;margin-right:6px}
#toasts{position:absolute;top:40px;left:50%;transform:translateX(-50%);z-index:5;display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:none}
.toast{padding:7px 16px;border-radius:10px;background:rgba(30,10,20,.92);border:1px solid var(--rd);box-shadow:0 0 24px rgba(255,77,109,.5);animation:pop .35s ease-out;font-size:14px;font-weight:600;white-space:nowrap}
.toast.warn{border-color:var(--or);box-shadow:0 0 24px rgba(255,157,59,.45);background:rgba(30,20,8,.92)}
.toast.info{border-color:var(--cy);box-shadow:0 0 24px rgba(62,224,255,.4);background:rgba(6,22,30,.92)}
.toast small{color:var(--dim);font-weight:400;margin-left:8px}
.toast.out{opacity:0;transition:opacity .6s}
@keyframes pop{0%{transform:scale(.6) translateY(-20px);opacity:0}70%{transform:scale(1.04)}100%{transform:scale(1);opacity:1}}
#legend{position:absolute;left:8px;bottom:6px;right:8px;font-size:10.5px;color:var(--dim);pointer-events:none}
#legend span{margin-right:10px;white-space:nowrap}
#tip{position:absolute;pointer-events:none;background:rgba(10,14,30,.95);border:1px solid #2a3a6a;padding:4px 8px;border-radius:6px;font-size:12px;display:none;z-index:6;max-width:320px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#perf{position:absolute;right:10px;top:8px;font-size:10px;color:#4a5578;pointer-events:none}
/* icons: one set, 24-unit grid, 1.75 stroke, round caps/joins, currentColor */
.ic{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;vertical-align:-4px;color:var(--dim);overflow:visible}
.ic.f{fill:currentColor;stroke:none}
td .ic,.sp .ic,#alerts .ic{margin-right:6px}td .ic.tr{margin:0 0 0 5px}
#side h3{display:flex;align-items:center;gap:6px}
.c-lan{color:var(--cy)}.c-inet{color:#5b8cff}.c-ts{color:var(--vi)}.c-ok{color:var(--gr)}.c-exit{color:var(--go)}.c-off{color:#3a4260}.c-warn{color:var(--or)}.c-crit{color:var(--rd)}.c-info{color:var(--cy)}.c-self{color:#ffe066}
#top{position:relative;z-index:10}
#top .ib{display:inline-flex;align-items:center;justify-content:center;gap:5px;height:26px;min-width:30px;padding:0 7px;line-height:1}
#top .ib .ic{width:18px;height:18px;color:inherit;vertical-align:0}
#top .ib:hover{color:var(--cy)}
#conn{display:inline-flex;align-items:center;gap:5px}#conn .ic{width:10px;height:10px;color:inherit;vertical-align:0}
#legend .ic{width:10px;height:10px;color:inherit;vertical-align:-1px;margin-right:4px}
.toast .ic{width:16px;height:16px;color:inherit;margin-right:7px;vertical-align:-3px}
.toast.crit .ic,.toast:not(.warn):not(.info) .ic{color:var(--rd)}.toast.warn .ic{color:var(--or)}.toast.info .ic{color:var(--cy)}
td.ind{padding-left:26px}
#langWrap{position:relative;display:inline-flex}
#langMenu{position:absolute;right:0;top:calc(100% + 6px);z-index:20;min-width:136px;padding:4px;background:rgba(12,18,38,.98);border:1px solid #2a3a6a;border-radius:10px;box-shadow:0 10px 28px rgba(0,0,0,.55)}
#langMenu[hidden]{display:none}
#langMenu button{display:flex;align-items:center;gap:8px;width:100%;padding:6px 10px 6px 8px;border:0;border-radius:6px;background:none;color:var(--txt);font:inherit;font-size:12.5px;cursor:pointer;text-align:left;white-space:nowrap}
#langMenu button:hover{background:#16214a}
#langMenu button .ic{color:var(--cy);visibility:hidden;vertical-align:0}
#langMenu button.on{color:var(--cy)}#langMenu button.on .ic{visibility:visible}
#clock{display:inline-block;width:calc(8.4ch + 20px);text-align:center;font-variant-numeric:tabular-nums}
#exitBtn{color:var(--dim)}#exitBtn #exitN{font-size:11px;font-variant-numeric:tabular-nums}#exitBtn #exitN:empty{display:none}#exitBtn.on{color:var(--go);border-color:#5a4a10}#exitBtn.on .ic{color:var(--go)}
#langBtn[aria-expanded="true"]{border-color:#3a4c88;color:var(--cy)}
/* scrollbars: WebKit/Blink */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track,::-webkit-scrollbar-corner{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.25)}
/* scrollbars: Firefox */
@supports not selector(::-webkit-scrollbar){*{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.12) transparent}*:hover{scrollbar-color:rgba(255,255,255,.25) transparent}}
#rbar{display:flex;align-items:center;gap:2px;margin-right:4px}
.rb{display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 7px;border:1px solid transparent;border-radius:8px;background:none;color:var(--txt);cursor:pointer;font:inherit;font-size:11.5px;font-variant-numeric:tabular-nums;line-height:1}
.rb .ic{width:18px;height:18px;vertical-align:0}
.rb:hover{background:#111a36}.rb:hover .ic{color:var(--txt)}
.rb.on{background:rgba(62,224,255,.12);border-color:rgba(62,224,255,.45)}.rb.on .ic{color:var(--cy)}
.rv{display:inline-block;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.rv[data-w=p]{width:4.4ch}.rv[data-w=r]{width:4.9ch}.rv[data-w=n]{width:2.2ch}.rv[data-w=ms]{width:5.8ch}.rv[data-w=sp]{width:5.4ch}.rv[data-w=a]{width:18px}
.rv.hot{color:var(--or)}.rv.crit{color:var(--rd)}
.rv.bd{height:16px;padding:0;border-radius:8px;background:var(--or);color:#140a00;font-size:10px;font-weight:700;line-height:16px;text-align:center}
#side{flex:0 0 360px;width:360px;padding:0 10px 20px}
#side .sh{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:8px;background:var(--panel);padding:10px 0 6px;border-bottom:1px solid var(--line)}
#side .sh h3{flex:1 1 auto;margin:0;border:0;padding:0}
#side .hc{color:#4a5578;font-weight:400;margin-left:2px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.seg button{display:inline-flex;align-items:center;justify-content:center;width:28px;height:22px;border:0;background:none;color:var(--dim);cursor:pointer;padding:0}
.seg button+button{border-left:1px solid var(--line)}.seg button .ic{width:16px;height:16px;vertical-align:0;color:inherit}
.seg button:hover{color:var(--txt)}.seg button.on{background:rgba(62,224,255,.12);color:var(--cy)}
.hr{position:relative;padding:6px 6px 7px;border-bottom:1px solid #121a33;cursor:pointer}
.hr:hover{background:#111a36}
.hr .h1{display:flex;align-items:center;font-size:12.5px;white-space:nowrap}
.hr .h1 .ic{margin-right:6px}
.hr .hn{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.hr .q{flex:0 0 74px;text-align:right;font-variant-numeric:tabular-nums;font-size:12px}
.hr .q.tx{color:var(--dim)}
.hr .h2{display:flex;gap:8px;padding-left:22px;margin-top:1px;font-size:11px;color:var(--dim);white-space:nowrap;overflow:hidden}
.hr .hip{flex:0 0 auto;color:#5d6889}.hr .hps{min-width:0;overflow:hidden;text-overflow:ellipsis}
.pp{color:#9fb0dc}.pp:hover{color:var(--cy)}
.hr .hb{position:absolute;left:28px;bottom:1px;height:2px;border-radius:1px;opacity:.55}
.hr.fdim{opacity:.25}.hr.fhl{background:rgba(255,204,51,.08)}.hr.fsel{background:rgba(255,204,51,.18)}
#pop{position:fixed;z-index:15;width:420px;max-width:calc(100vw - 16px);display:flex;flex-direction:column;background:rgba(9,13,28,.985);border:1px solid #263463;border-radius:12px;box-shadow:0 14px 40px rgba(0,0,0,.55)}
#pop[hidden]{display:none}
#pop .ph{display:flex;align-items:center;gap:8px;padding:8px 8px 7px 12px;cursor:grab;user-select:none;-webkit-user-select:none;border-bottom:1px solid #1a2446;flex:none}
#pop .ph.drag{cursor:grabbing}
#pop .ph .ic{width:18px;height:18px;color:var(--cy);vertical-align:0}
#pop .ph b{font-size:13px}#pop .pv{color:var(--dim);font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}
#pop .sp1{flex:1 1 0}
#pop .px{border:0;background:none;color:var(--dim);cursor:pointer;padding:3px;display:inline-flex;border-radius:6px}#pop .px:hover{color:var(--txt);background:#16214a}
#pop .px .ic{width:18px;height:18px;color:inherit}
#pop .pb{overflow-y:auto;padding:10px 12px 12px;min-height:0}
.pane{display:none}.pane.on{display:block}
.chw{position:relative;margin:0 0 8px}
.chw canvas{display:block;width:100%;height:110px;border-radius:6px;background:#0c1328}
.chw.s canvas{height:64px}
.chw .cl{position:absolute;left:8px;top:5px;font-size:11px;color:var(--dim);pointer-events:none}
.chw .cv{position:absolute;right:8px;top:5px;font-size:11.5px;font-variant-numeric:tabular-nums;text-align:right;pointer-events:none;text-shadow:0 0 3px #000}
.kv{display:flex;flex-wrap:wrap;gap:3px 14px;font-size:12px;margin:6px 0 8px;font-variant-numeric:tabular-nums}.kv i{font-style:normal;color:var(--dim);margin-right:4px}
#pop #cores{height:40px}
#pop #alerts .a{white-space:nowrap}
@media (max-width:1199px){
 body{overflow-x:hidden;overflow-y:auto}
 #app{height:auto;min-height:var(--vh)}
 #main{display:block}
 #stage{height:calc(var(--vh) - var(--toph));min-height:420px}
 #side{width:auto;border-left:0;border-top:1px solid var(--line);overflow:visible;display:block;padding:0 14px 30px}
}
[hidden]{display:none!important}
#cv.grab{cursor:grabbing!important}
.lc-3ee0ff{color:#3ee0ff}.lc-4dff9a{color:#4dff9a}.lc-5b8cff{color:#5b8cff}.lc-b36bff{color:#b36bff}.lc-b4ff3c{color:#b4ff3c}.lc-ff5ca8{color:#ff5ca8}.lc-ff9d3b{color:#ff9d3b}.lc-ffcc33{color:#ffcc33}.lc-ffe066{color:#ffe066}
.sprite{position:absolute}
#logo{display:block;width:22px;height:22px;margin-right:-2px}
#fleet{flex:0 0 112px;width:112px;display:flex;flex-direction:column;gap:6px;padding:12px 10px;border-right:1px solid var(--line);background:var(--panel)}
.fm{display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;border:1px solid transparent;border-radius:10px;background:transparent;color:var(--dim);font:inherit;font-size:13px;letter-spacing:.5px;cursor:pointer;text-align:left}
.fm:hover{color:var(--txt);border-color:var(--line)}
.fm.on{color:var(--txt);background:#0d1428;border-color:#26335e}
.fd{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:#3a4466;box-shadow:none}
.fm.up .fd{background:var(--gr);box-shadow:0 0 8px rgba(77,255,154,.55)}
#off{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:3;color:#4a5578;font-size:13px;letter-spacing:3px;text-transform:lowercase;pointer-events:none}
#off[hidden]{display:none}
.rb[data-p=self],.rb[data-p=alert],#exitBtn,.hip,#t-ping td.d{display:none!important}
@media (max-width:1199px){
 #fleet{flex-direction:row;width:auto;border-right:0;border-bottom:1px solid var(--line);padding:8px 10px;justify-content:center}
 .fm{width:auto;flex:0 1 120px;justify-content:center}
}