*{box-sizing:border-box;margin:0;padding:0}:root{--bg:#020914;--blue:#00cfff;--green:#00ff9d;--red:#ff5577;--yellow:#ffc966;--line:#07527a;--text:#dff6ff;--dim:#5d8499;--panel:linear-gradient(145deg,#071c31,#03101d)}html,body,#app{height:100%}body{background:var(--bg);color:var(--text);font-family:Microsoft YaHei,Arial,sans-serif;overflow-x:hidden}.num-font{font-family:Consolas,Microsoft YaHei,monospace}#bg{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none}.grid-bg{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none;background:linear-gradient(rgba(0,180,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(0,180,255,.05) 1px,transparent 1px);background-size:45px 45px;mask-image:radial-gradient(ellipse at 50% 30%,#000 30%,transparent 80%);-webkit-mask-image:radial-gradient(ellipse at 50% 30%,#000 30%,transparent 80%)}.scan{position:fixed;left:0;right:0;height:140px;z-index:1;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(0,207,255,.05),transparent);animation:scan 9s linear infinite}@keyframes scan{0%{top:-140px}to{top:100%}}.header{height:84px;padding:0 44px;display:flex;align-items:center;justify-content:space-between;background:#000f1ee0;border-bottom:1px solid var(--line);box-shadow:0 0 30px #008cff59;position:sticky;top:0;z-index:20}.brand{display:flex;align-items:center;gap:16px;cursor:pointer}.logo{width:44px;height:44px;border-radius:12px;border:1px solid var(--blue);display:flex;align-items:center;justify-content:center;font-size:22px;color:var(--blue);box-shadow:0 0 18px #00cfff80,inset 0 0 12px #00cfff40;animation:pulse 3s ease-in-out infinite}@keyframes pulse{0%,to{box-shadow:0 0 12px #00cfff66,inset 0 0 8px #00cfff33}50%{box-shadow:0 0 28px #00cfffcc,inset 0 0 14px #00cfff59}}.title{font-size:26px;font-weight:700;letter-spacing:5px;text-shadow:0 0 20px var(--blue),0 0 45px rgba(0,102,170,.35)}.subtitle{font-size:11px;color:var(--blue);letter-spacing:4px;margin-top:4px;opacity:.85}.clock{font-size:15px;color:#80b8d0;text-align:right;text-shadow:0 0 12px rgba(0,207,255,.3);letter-spacing:1px}.clock small{display:block;font-size:10px;color:var(--dim);letter-spacing:2px;margin-top:3px}.wrap{max-width:1680px;margin:auto;padding:22px 44px 44px;position:relative;z-index:2}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:26px}.stat{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px 24px;cursor:pointer;transition:.25s;box-shadow:0 0 20px #07a3;position:relative;overflow:hidden}.stat:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,transparent,var(--blue),transparent);opacity:0;transition:.25s}.stat:hover{transform:translateY(-4px);box-shadow:0 0 30px #00cfff59}.stat:hover:after{opacity:.6}.stat.active{border-color:var(--blue);box-shadow:0 0 30px #00cfff80,0 0 60px #00cfff2e;transform:translateY(-4px)}.stat.active:after{opacity:1}.stat .label{font-size:13px;color:#7ea7bd;letter-spacing:3px;margin-bottom:8px}.stat .num{font-size:44px;font-weight:700;color:var(--blue);text-shadow:0 0 18px rgba(0,207,255,.55)}.stat.online .num{color:var(--green);text-shadow:0 0 18px rgba(0,255,157,.55)}.stat.offline .num{color:var(--red);text-shadow:0 0 18px rgba(255,85,119,.55)}.stat.disabled .num{color:#8a9bab;text-shadow:none}.section-title{display:flex;justify-content:space-between;align-items:center;margin:14px 0 16px}.section-title h2{font-size:17px;font-weight:700;color:#e0f4ff;text-shadow:0 0 15px rgba(0,207,255,.3);padding-left:14px;position:relative;letter-spacing:2px}.section-title h2:before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:4px;height:18px;border-radius:2px;background:linear-gradient(180deg,var(--blue),#0066aa);box-shadow:0 0 10px var(--blue)}.section-title small{color:var(--dim);font-size:12px;letter-spacing:1px}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;flex:1}.cards-wrap{display:flex;gap:16px;align-items:stretch}.pager{width:54px;min-height:390px;background:var(--panel);border:1px solid var(--line);border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:14px 0;gap:10px;box-shadow:0 0 20px #07a3}.pager button{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:#003c6459;color:var(--blue);font-size:16px;cursor:pointer;transition:.2s;display:flex;align-items:center;justify-content:center}.pager button:hover:not(:disabled){border-color:var(--blue);background:#00cfff2e;box-shadow:0 0 16px #00cfff73}.pager button:disabled{color:#3b5a6d;border-color:#183345;background:#04162666;cursor:not-allowed}.pg-info{writing-mode:vertical-rl;text-orientation:mixed;letter-spacing:2px;font-size:11px;color:var(--dim);padding:4px 0}.pg-dots{display:flex;flex-direction:column;gap:8px;align-items:center}.pg-dot{width:8px;height:8px;border-radius:50%;background:#5d84994d;transition:.2s;cursor:pointer}.pg-dot.on{background:var(--blue);box-shadow:0 0 10px var(--blue)}.card{background:var(--panel);border:1px solid var(--line);border-radius:15px;padding:18px;min-height:390px;cursor:pointer;transition:.25s;box-shadow:0 0 22px #006b9926;position:relative;overflow:hidden}.card:hover{border-color:var(--blue);transform:translateY(-3px);box-shadow:0 0 36px #00cfff4d,0 0 70px #0066ff1f}.card-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px}.card-name{font-size:19px;font-weight:700;color:#e8f6ff;text-shadow:0 0 12px rgba(0,207,255,.3)}.card-mid{font-size:10px;color:var(--dim);margin-top:4px;letter-spacing:1px}.card-right{display:flex;align-items:center;gap:8px}.badge{font-size:10px;padding:4px 9px;border-radius:20px;letter-spacing:1px;font-family:Consolas,monospace;font-weight:600}.badge.on{color:var(--green);border:1px solid rgba(0,255,157,.5);background:#00ff9d12;text-shadow:0 0 8px rgba(0,255,157,.5)}.badge.off{color:var(--red);border:1px solid rgba(255,85,119,.5);background:#ff557714;text-shadow:0 0 8px rgba(255,85,119,.5)}.badge.dis{color:#8a9bab;border:1px solid #3b4852;background:#8a9bab14}.gear{border:0;background:#07527a66;color:#80b8d0;width:29px;height:29px;border-radius:8px;cursor:pointer;font-size:14px;transition:.2s}.gear:hover{color:#fff;background:#00cfff4d;box-shadow:0 0 14px #00cfff73}.gauge{height:96px;margin:2px 0 4px}.metric{margin:9px 0}.metric .row{display:flex;justify-content:space-between;font-size:12px;color:#6b96ad;margin-bottom:5px}.metric .row b{color:var(--text);font-weight:600}.bar{height:7px;border-radius:10px;overflow:hidden;background:#102d42a6;border:1px solid rgba(7,82,122,.3)}.bar i{display:block;height:100%;border-radius:10px;background:linear-gradient(90deg,#0066aa,var(--blue));box-shadow:0 0 8px var(--blue);transition:width .5s}.bar i.warn{background:linear-gradient(90deg,#a87200,var(--yellow));box-shadow:0 0 8px var(--yellow)}.net{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-top:13px;padding:12px 8px 10px;border:1px solid rgba(0,207,255,.28);border-radius:11px;background:linear-gradient(180deg,#003c6438,#00192d47);box-shadow:inset 0 0 18px #006eb41f}.net div{font-size:10px;color:#6b96ad;text-align:center;letter-spacing:1px}.net b{display:block;margin-top:5px;text-align:center;font-size:17px;font-weight:700;letter-spacing:.5px}.net .v-down{color:var(--blue);text-shadow:0 0 12px rgba(0,207,255,.6)}.net .v-up{color:#9d7bff;text-shadow:0 0 12px rgba(157,123,255,.6)}.net .v-ping{color:var(--green);text-shadow:0 0 12px rgba(0,255,157,.6)}.net .v-ping.slow{color:var(--yellow);text-shadow:0 0 12px rgba(255,201,102,.6)}.last{font-size:10px;color:var(--dim);margin-top:13px;letter-spacing:.4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}.duo{display:grid;grid-template-columns:2fr 1fr;gap:18px;margin-top:26px}.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px;box-shadow:0 0 22px #006b9926;transition:.25s}.panel:hover{border-color:#00cfff80;box-shadow:0 0 30px #00cfff2e}.panel h3{font-size:14px;margin:0 0 14px;color:#c8e8ff;letter-spacing:2px;text-shadow:0 0 10px rgba(0,207,255,.25)}.chart-lg{height:280px}.topo{margin-top:26px;box-shadow:none}.topo:hover{border-color:var(--line);box-shadow:none}.topo svg{width:100%;height:auto;display:block}.topo .link{stroke:#0096dc47;stroke-width:1.2;fill:none}.topo .flow{stroke:var(--blue);stroke-width:1.6;fill:none;stroke-dasharray:5 14;animation:dash 1.1s linear infinite;filter:drop-shadow(0 0 3px var(--blue))}.topo .flow.dead{stroke:var(--red);filter:drop-shadow(0 0 3px var(--red));animation-duration:2.4s}.topo .flow.gray{stroke:#5c7590;animation:none;stroke-dasharray:none;filter:none}@keyframes dash{to{stroke-dashoffset:-19}}.topo text{fill:#8fb8d0;font-size:11px;font-family:Microsoft YaHei}.topo .node-lb{fill:#c8e8ff;font-size:12px}.node-g{cursor:pointer}.node-g circle.core{animation:nodePulse 2.6s ease-in-out infinite}@keyframes nodePulse{0%,to{opacity:.75}50%{opacity:1}}.events{height:280px;overflow-y:auto;padding-right:4px}.events::-webkit-scrollbar{width:4px}.events::-webkit-scrollbar-thumb{background:#0096dc59;border-radius:4px}.evt{display:flex;gap:10px;padding:9px 10px;margin-bottom:8px;border-radius:9px;border-left:3px solid var(--blue);background:#04192a8c;font-size:12.5px;animation:evtIn .4s ease}@keyframes evtIn{0%{opacity:0;transform:translate(14px)}to{opacity:1;transform:none}}.evt time{color:var(--dim);font-family:Consolas,monospace;flex-shrink:0;padding-top:1px}.evt.ok{border-left-color:var(--green)}.evt.ok .msg{color:#9fe8c8}.evt.warn{border-left-color:var(--yellow)}.evt.warn .msg{color:var(--yellow)}.evt.err{border-left-color:var(--red)}.evt.err .msg{color:#ff92a7}.evt.info{border-left-color:var(--blue)}.evt.info .msg{color:#9fd8f0}.config{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:26px}.cfg{background:#03121fcc;border:1px solid var(--line);padding:14px 16px;border-radius:10px;transition:.2s}.cfg:hover{border-color:var(--blue);box-shadow:0 0 16px #00cfff33}.cfg span{display:block;color:var(--dim);font-size:11px;letter-spacing:1px}.cfg b{display:block;margin-top:6px;font-size:14px;color:#e0f4ff}.detail{display:block}.back{color:var(--blue);cursor:pointer;font-size:14px;margin-bottom:18px;text-shadow:0 0 10px rgba(0,207,255,.3);transition:.2s;display:inline-block;letter-spacing:1px}.back:hover{color:#5fe3ff;text-shadow:0 0 16px var(--blue)}.rt-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:26px}.rt-box{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px;box-shadow:0 0 22px #006b9926;text-align:center}.rt-box h4{font-size:12px;color:#7ea7bd;letter-spacing:3px;margin-bottom:6px}.rt-gauge{height:110px}.rt-net b{font-size:26px;font-weight:700;display:block;margin-top:8px}.rt-net small{color:var(--dim);font-size:11px}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px}.chart-sm{height:250px}.ranges{display:flex;gap:8px}.rbtn{padding:6px 16px;border-radius:20px;cursor:pointer;font-size:12px;border:1px solid var(--line);color:#80b8d0;background:#04192a99;transition:.2s;letter-spacing:1px}.rbtn:hover{border-color:var(--blue);color:#fff}.rbtn.on{border-color:var(--blue);color:var(--blue);background:#00cfff1a;box-shadow:0 0 14px #00cfff4d;text-shadow:0 0 8px rgba(0,207,255,.5)}.modal{display:none;position:fixed;top:0;right:0;bottom:0;left:0;z-index:60;background:#00050fd1;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);align-items:center;justify-content:center}.modal.show{display:flex}.modalbox{width:460px;background:linear-gradient(145deg,#071c31,#03101d);border:1px solid var(--blue);border-radius:16px;padding:26px 28px;box-shadow:0 0 50px #00cfff4d,0 20px 70px #000;animation:evtIn .3s ease}.modalbox h3{margin:0 0 14px;color:#c8e8ff;font-size:18px;letter-spacing:2px;text-shadow:0 0 12px rgba(0,207,255,.35)}.modalbox .st-line{color:#8098aa;font-size:14px;line-height:2}.modalbox .st-line b{color:var(--text)}.modalbox .warn-points{color:#90a8ba;font-size:13px;line-height:2.1;margin-top:10px;padding-left:2px}.modalbox .warn-points li{list-style:none}.modalbox .warn-points li:before{content:"› ";color:var(--yellow)}.actions{display:flex;justify-content:flex-end;gap:12px;margin-top:24px}.btn{padding:10px 22px;border-radius:8px;cursor:pointer;font-size:14px;border:1px solid #27465d;background:#07283b99;color:#bdd3e2;transition:.2s;letter-spacing:1px}.btn:hover{border-color:var(--blue);box-shadow:0 0 15px #00cfff40;color:#fff}.btn.danger{background:#5b202b8c;border-color:#873443;color:#ffdbe0}.btn.danger:hover{border-color:var(--red);box-shadow:0 0 15px #ff557759}.btn.primary{background:#0078b459;border-color:var(--blue);color:#aee9ff}.btn.primary:hover{box-shadow:0 0 15px #00cfff66}.toast{position:fixed;top:100px;left:50%;transform:translate(-50%);padding:10px 26px;border-radius:10px;z-index:80;background:#03121ff2;border:1px solid var(--green);color:var(--green);font-size:14px;letter-spacing:1px;box-shadow:0 0 25px #00ff9d4d;opacity:0;pointer-events:none;transition:.3s}.toast.show{opacity:1;transform:translate(-50%) translateY(6px)}@media (max-width:1200px){.cards,.config{grid-template-columns:repeat(3,1fr)}.rt-grid{grid-template-columns:repeat(2,1fr)}.cards-wrap{flex-direction:column}.pager{width:100%;min-height:auto;flex-direction:row;padding:12px 16px}.pg-info{writing-mode:horizontal-tb}.pg-dots{flex-direction:row}}@media (max-width:1000px){.duo,.grid3{grid-template-columns:1fr}}@media (max-width:760px){.wrap{padding:14px 16px}.cards,.stats{grid-template-columns:repeat(2,1fr)}.header{padding:0 16px;height:64px}.title{font-size:19px;letter-spacing:2px}.clock{display:none}.config,.rt-grid{grid-template-columns:1fr}}