*{box-sizing:border-box}html,body,#root{margin:0;width:100%;height:100%;background:#030713;color:#dff8ff;font-family:PingFang SC,Microsoft YaHei,Arial,sans-serif}button{border:0;cursor:pointer;font:inherit}.boot,.login{height:100%;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 20%,rgba(0,213,255,.28),transparent 36%),#030713}.grid{position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(rgba(0,213,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(0,213,255,.08) 1px,transparent 1px);background-size:42px 42px}.loginCard{position:relative;width:460px;padding:44px;border:1px solid rgba(0,213,255,.28);border-radius:30px;background:#07142db8;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 0 80px #00d5ff2e}.logo{width:86px;height:86px;border-radius:26px;background:linear-gradient(135deg,#00d5ff,#05f);display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:900;box-shadow:0 0 35px #00d5ff7a}.loginCard h1{font-size:26px;margin:24px 0 8px}.loginCard p{color:#8edbea}.loginCard button{width:100%;height:54px;margin-top:24px;border-radius:16px;background:linear-gradient(90deg,#00d5ff,#0fa);font-weight:900;color:#00141c}.shell{height:100%;display:flex;background:radial-gradient(circle at 75% 0,rgba(0,86,255,.24),transparent 35%),#030713;overflow:hidden}aside{width:230px;padding:24px 14px;border-right:1px solid rgba(0,213,255,.14);background:#061022e6}.brand{height:58px;font-size:24px;font-weight:900;color:#00d5ff;letter-spacing:2px}.menu{height:44px;margin:8px 0;padding:12px 14px;border-radius:14px;color:#b7d8e2;background:linear-gradient(90deg,rgba(0,213,255,.08),transparent);border:1px solid rgba(0,213,255,.08);-webkit-user-select:none;user-select:none}.menu:hover,.menu.active{color:#fff;border-color:#00d5ff5c;box-shadow:inset 0 0 28px #00d5ff14}main{flex:1;padding:18px;overflow:auto}header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px}.kicker{color:#00d5ff;font-size:11px;letter-spacing:3px}h1{margin:4px 0 0;font-size:30px}h2{margin:0 0 14px;font-size:20px}.right{display:flex;gap:9px;align-items:center}.right span,.right button{padding:9px 12px;border-radius:12px;background:#00d5ff14;border:1px solid rgba(0,213,255,.18);color:#dff8ff}.cockpit{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:14px}.dashGauge{height:156px;border-radius:18px;border:1px solid rgba(0,213,255,.16);background:linear-gradient(145deg,#0d2448b8,#061023b8);position:relative;overflow:hidden;padding:12px;box-shadow:inset 0 0 45px #00d5ff0d}.dashGauge:after{content:"";position:absolute;right:-35px;top:-35px;width:120px;height:120px;border-radius:50%;background:#00d5ff1f;filter:blur(18px)}.gaugeTitle{text-align:center;font-weight:800;color:#dff8ff;font-size:13px}.meter{width:124px;height:92px;margin:8px auto 0;position:relative;overflow:hidden}.meterArc{position:absolute;left:0;top:0;width:124px;height:124px;border-radius:50%;border:13px solid rgba(128,150,165,.3);border-bottom-color:transparent;border-left-color:#8096a54d;transform:rotate(45deg)}.meterNeedle{position:absolute;left:60px;top:38px;width:3px;height:45px;background:#fff;border-radius:5px;transform-origin:50% 38px;box-shadow:0 0 8px #fffc}.meterCenter{position:absolute;left:0;right:0;top:38px;text-align:center}.meterCenter b{display:block;font-size:30px;color:#fff;line-height:30px}.meterCenter span{display:block;color:#96b6c8;font-size:12px;margin-top:2px}.meterStatus{position:absolute;left:14px;right:14px;bottom:10px;text-align:center;color:#9ed8e7;font-size:12px}.meterStatus i{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:6px;background:#2fffb4}.dashGauge.warn .meterStatus i{background:#ffd335}.dashGauge.danger .meterStatus i{background:#ff4d5c}.dashboardGrid{display:grid;grid-template-columns:minmax(820px,1fr) 290px;gap:14px}.panel{border:1px solid rgba(0,213,255,.16);border-radius:18px;background:#061228ad;padding:16px;overflow:hidden;box-shadow:inset 0 0 40px #00d5ff0a}.topologyPanel{height:730px}.svgTopo{width:100%;height:680px;background:radial-gradient(circle at center,rgba(0,213,255,.11),transparent 45%)}.layerLine{stroke:#00d5ff24;stroke-width:1;stroke-dasharray:8 10}.layerText{fill:#00d5ff;font-size:13px;font-weight:900}.linkBase{fill:none;stroke:#00d5ff38;stroke-width:2}.linkFlow{fill:none;stroke:url(#linkFlow);stroke-width:2.6;stroke-dasharray:14 16;animation:dash 1.4s linear infinite}.linkText{fill:#8ff2ff;font-size:11px;font-weight:800}@keyframes dash{to{stroke-dashoffset:-60}}.topoNode{height:122px;padding:9px 10px;border-radius:12px;border:1px solid rgba(0,213,255,.36);background:linear-gradient(145deg,#0b2146f2,#040e1ee6);box-shadow:0 0 18px #00d5ff29;cursor:pointer;position:relative;overflow:hidden}.topoNode .dot{position:absolute;left:8px;top:9px;width:8px;height:8px;border-radius:50%;background:#2fffb4;box-shadow:0 0 8px #2fffb4}.topoNode.normal{border-color:#00d5ff61}.topoNode.warn{border-color:#ffd335;box-shadow:0 0 18px #ffd33552}.topoNode.warn .dot{background:#ffd335;box-shadow:0 0 8px #ffd335}.topoNode.alarm{border-color:#ff4d5c;box-shadow:0 0 22px #ff4d5c7a}.topoNode.alarm .dot{background:#ff4d5c;box-shadow:0 0 8px #ff4d5c}.nodeName{font-size:13px;line-height:16px;font-weight:900;color:#fff;padding-left:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nodeIp{font-size:11px;color:#7deaff;margin-top:4px}.nodeMeta{margin-top:5px;display:flex;flex-direction:column;gap:1px;font-size:10px;line-height:13px;color:#d4e9f0}.nodeMeta .mid{color:#ffd335}.nodeMeta .bad{color:#ff4d5c}.legend rect{fill:#071226bf;stroke:#00d5ff24}.legend text{fill:#dff8ff;font-size:12px}.normalFill{fill:#2fffb4}.warnFill{fill:#ffd335}.alarmFill{fill:#ff4d5c}.legendLine{stroke:#00d5ff;stroke-width:2}.sidePanels{display:flex;flex-direction:column;gap:14px}.healthPanel{height:260px}.healthItem{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid rgba(100,160,190,.14);color:#b9d0df}.healthItem b{font-size:22px;color:#fff}.statusList{display:flex;flex-direction:column;gap:8px;max-height:330px;overflow:auto}.statusRow{display:grid;grid-template-columns:18px 1fr 54px;align-items:center;padding:10px;border-radius:12px;background:#ffffff0b;cursor:pointer}.statusRow b{color:#2fffb4;text-align:right}i{display:inline-block;width:8px;height:8px;border-radius:50%;background:#2fffb4;box-shadow:0 0 8px #2fffb4}i.warn{background:#ffd335;box-shadow:0 0 8px #ffd335}i.alarm{background:#ff4d5c;box-shadow:0 0 8px #ff4d5c}.table{display:flex;flex-direction:column;gap:8px}.tr{display:grid;grid-template-columns:110px 1fr 140px 80px 80px 80px 1.5fr;gap:12px;align-items:center;padding:12px 14px;border-radius:14px;background:#ffffff0a;color:#dff8ff;cursor:pointer}.tr:hover{background:#00d5ff1a}.tr.head{color:#78e9ff;background:#00d5ff1a;cursor:default}.drawerMask{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000073;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);z-index:50;display:flex;justify-content:flex-end}.drawer{width:560px;height:100%;overflow:auto;padding:28px;background:#061022;border-left:1px solid rgba(0,213,255,.28);box-shadow:-20px 0 60px #00000059}.close{float:right;width:36px;height:36px;border-radius:12px;background:#ffffff14;color:#fff;font-size:24px}.muted{color:#8aaebe}.detailKpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:18px 0}.detailKpis>div{position:relative;padding:12px;border-radius:12px;background:#101d35;border:1px solid transparent}.detailKpis span{display:block;font-size:12px;color:#8ca5c8}.detailKpis b{display:block;font-size:22px;margin-top:5px}.detailKpis small{display:block;margin-top:5px}.warnBox{border-color:#ffd335!important;box-shadow:0 0 15px #ffd33559}.warnBox b{color:#ffd335}.alarmBox{border-color:#ff4d5c!important;box-shadow:0 0 15px #ff4d5c8c}.alarmBox b{color:#ff4d5c}.drawer h3{margin-top:24px;color:#00d5ff}.empty{height:260px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;color:#8fb8c7}@media(max-width:1500px){.cockpit{grid-template-columns:repeat(5,1fr)}.dashGauge{height:145px}.dashboardGrid{grid-template-columns:1fr 280px}.topologyPanel{height:620px}.svgTopo{height:565px}.meter{transform:scale(.9);transform-origin:center top}}.meter{width:150px;height:90px;margin:4px auto 0;position:relative;overflow:hidden}.meterArc{position:absolute;width:150px;height:150px;left:0;top:0;border-radius:50%;border:14px solid rgba(120,150,170,.25);border-bottom-color:transparent;border-left-color:transparent;transform:rotate(-45deg)}.dashGauge.normal .meterArc{border-top-color:#2fffb4;border-right-color:#2fffb4}.dashGauge.warn .meterArc{border-top-color:#ffd335;border-right-color:#ffd335}.dashGauge.danger .meterArc{border-top-color:#ff4d5c;border-right-color:#ff4d5c}.meterNeedle{position:absolute;left:73px;top:64px;width:3px;height:45px;background:#fff;border-radius:5px;transform-origin:50% 45px;box-shadow:0 0 12px #fff}.meterCenter{position:absolute;left:0;right:0;top:40px;text-align:center;z-index:2}.meterCenter b{font-size:32px;line-height:32px}.meterCenter span{font-size:11px;color:#8da9bb}.meterNeedle{left:73px;top:48px;height:52px;transform-origin:50% 52px}.meterNeedle{left:60px!important;top:34px!important;height:42px!important;transform-origin:50% 38px!important}.dashGauge.normal .meterStatus i{background:#2fffb4!important;box-shadow:0 0 8px #2fffb4!important}.meterNeedle{left:66px!important;top:34px!important;height:42px!important;transform-origin:50% 38px!important}.svgNode{cursor:pointer}.svgNodeRect{fill:#081836eb;stroke:#00d5ff6b;stroke-width:1.4;filter:url(#nodeGlow)}.svgNode.normal .svgNodeRect{stroke:#00d5ff7a}.svgNode.warn .svgNodeRect{stroke:#ffd335;stroke-width:2}.svgNode.alarm .svgNodeRect{stroke:#ff4d5c;stroke-width:2}.svgNodeDot{fill:#2fffb4;filter:url(#nodeGlow)}.svgNode.warn .svgNodeDot{fill:#ffd335}.svgNode.alarm .svgNodeDot{fill:#ff4d5c}.svgNodeName{fill:#fff;font-size:13px;font-weight:900}.svgNodeIp{fill:#7deaff;font-size:11px}.svgNodeMetric{fill:#d4e9f0;font-size:10px}.svgNodeMetric.mid{fill:#ffd335}.svgNodeMetric.bad{fill:#ff4d5c}.svgNodeName{font-size:11px!important;font-weight:900}.svgNodeIp{font-size:10px!important}.svgNodeMetric{font-size:9.5px!important}.linkText{font-size:9.5px!important;font-weight:900}.accessPanel{min-height:720px}.accessHeader{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:18px}.accessHeader p{margin:8px 0 0;color:#8fb8c7;line-height:1.7}.primaryBtn{padding:11px 18px;border-radius:14px;background:linear-gradient(90deg,#00d5ff,#0fa);color:#00141c;font-weight:900;box-shadow:0 0 22px #00d5ff40}.accessTools{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:14px}.accessTools input{flex:1;height:46px;border-radius:14px;border:1px solid rgba(0,213,255,.22);background:#ffffff0e;color:#e9fbff;padding:0 14px;outline:none}.accessTools input:focus{border-color:#00d5ff;box-shadow:0 0 16px #00d5ff2e}.accessTools span{color:#8fb8c7}.accessList{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-height:520px;overflow:auto;padding-right:6px}.accessUser{display:grid;grid-template-columns:34px 42px 1fr 96px;gap:10px;align-items:center;padding:12px;border-radius:16px;background:#ffffff0b;border:1px solid rgba(0,213,255,.08);cursor:pointer;-webkit-user-select:none;user-select:none}.accessUser:hover{border-color:#00d5ff61;background:#00d5ff14}.accessUser.checked{border-color:#2fffb47a;box-shadow:inset 0 0 22px #2fffb40d}.fakeCheck{width:26px;height:26px;border-radius:9px;border:1px solid rgba(0,213,255,.38);display:flex;align-items:center;justify-content:center;color:#00141c;font-weight:900;background:#ffffff0a}.accessUser.checked .fakeCheck{background:#2fffb4;border-color:#2fffb4}.accessAvatar{width:42px;height:42px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#0a2a58,#00d5ff);font-weight:900}.accessInfo b{display:block;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.accessInfo span{display:block;color:#8fb8c7;font-size:12px;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.roleTag{text-align:center;font-size:12px;padding:6px;border-radius:999px;color:#9ed8e7;background:#00d5ff14}.roleTag.super{color:#00141c;background:#2fffb4;font-weight:900}.accessFooter{display:flex;justify-content:flex-end;margin-top:18px}.interfaceTable{display:flex;flex-direction:column;gap:6px;margin-top:10px}.interfaceRow{display:grid;grid-template-columns:2.5fr .8fr .8fr 1fr 1fr 1fr;gap:8px;padding:8px;background:#ffffff0a;border-radius:6px;font-size:13px}.up{color:#00d084}.down{color:#ff5b5b}