:root{--bg:#020e1c;--panel:#061b31;--panel2:#092641;--line:#087fd0;--cyan:#19bfff;--text:#d9edff;--muted:#7698b6;--green:#40e87b;--red:#ff4d4f;--amber:#ffc928;--steel:#9099a0}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:"Microsoft YaHei","Segoe UI",sans-serif;letter-spacing:0}button,input,select{font:inherit}button{cursor:pointer}.app{min-height:100vh;background:radial-gradient(circle at 55% 10%,#08305855,transparent 32%),linear-gradient(180deg,#031426,#020b15)}
.topbar{height:58px;padding:0 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #0c609a;background:#031426;gap:14px}.brand{font-size:24px;font-weight:800;color:#9fd7ff;white-space:nowrap}.brand b{color:#25adff}.top-actions,.conn-tools{display:flex;align-items:center;gap:8px}.clock,.state-pill{padding:7px 12px;border:1px solid #17486b;background:#051b2f;border-radius:5px;font-size:13px;white-space:nowrap}.state-pill.ok{color:var(--green)}.state-pill.bad{color:var(--red)}.top-actions button,.conn-tools button,.conn-tools select{height:34px;padding:0 11px;color:#cdeaff;border:1px solid #17679d;background:#09243c;border-radius:4px}.top-actions button:disabled{opacity:.4}.main{display:grid;grid-template-columns:minmax(365px,31%) 1fr;gap:12px;padding:12px;max-width:1920px;margin:auto}.cabinet{min-height:820px;border:5px solid #47515a;border-radius:8px;background:linear-gradient(100deg,#7e878d,#c1c6c9 8%,#939ba0 50%,#c4c8ca 92%,#697177);box-shadow:inset 0 0 0 2px #dce0e2,0 8px 24px #0009;color:#15202a;padding:11px}.cab-title{text-align:center;font-size:20px;font-weight:700;padding:7px;background:linear-gradient(#cfd3d5,#9da4a8);border:2px solid #4e565b;box-shadow:inset 0 1px #fff}.meter-row{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;padding:18px 10px 12px}.meter{background:linear-gradient(#313b43,#11171c);border:3px solid #48525a;border-radius:4px;padding:6px;text-align:center;box-shadow:inset 0 0 8px #000}.meter label{display:block;color:#e7edf0;font-size:11px;margin-bottom:5px;white-space:nowrap}.meter strong{display:block;background:#080b0d;color:#ff3939;font-family:Consolas,monospace;font-size:25px;line-height:38px;text-shadow:0 0 8px #f22}.meter small{font-size:12px;color:#d4d8db;margin-left:2px}.lamp-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;border:2px solid #515b61;padding:15px 8px;background:#8c9498}.lamp-box{text-align:center;font-size:12px}.lamp{width:30px;height:30px;margin:0 auto 7px;border-radius:50%;border:3px solid #62676a;background:#42484a;box-shadow:inset 0 -5px 8px #0008}.lamp.on.red{background:#ff3131;box-shadow:0 0 13px #f22,inset 0 -5px 8px #8b0000}.lamp.on.green{background:#35ef68;box-shadow:0 0 13px #22e95b,inset 0 -5px 8px #087826}.lamp.on.amber{background:#ffd335;box-shadow:0 0 13px #ffc400,inset 0 -5px 8px #a76c00}.cab-screen{margin:14px 16px;border:10px solid #343d43;background:#021a31;min-height:178px;position:relative;overflow:hidden}.mini-topology{height:100%;min-height:158px;padding:12px;color:#c8e8ff}.mini-flow{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;height:110px;text-align:center}.mini-node{border:1px solid #268ed1;padding:10px 4px;background:#06233d}.mini-arrow{height:3px;background:#37baff;position:relative}.mini-arrow:after{content:"";position:absolute;right:-1px;top:-5px;border-left:9px solid #37baff;border-top:6px solid transparent;border-bottom:6px solid transparent}.module-title{text-align:center;border-top:2px solid #555f64;padding:8px 0 4px;font-size:13px}.modules{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:4px 10px 12px}.module{height:180px;background:linear-gradient(100deg,#667077,#aeb4b8 45%,#687279);border:2px solid #4c555a;border-radius:3px;text-align:center;padding:8px 7px;box-shadow:inset 0 0 0 1px #ccd0d2}.module .run{font-size:11px;color:#183020}.module .run:before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#555;margin-right:5px}.module.active .run:before{background:#54f77e;box-shadow:0 0 7px #29e45c}.module-num{margin:8px auto;background:#090b0c;color:#ff2828;border:3px inset #475057;font:700 29px/42px Consolas;width:74%;text-shadow:0 0 7px #d00}.module-grill{height:73px;background:repeating-linear-gradient(0deg,#1b2429 0 4px,#687177 5px 8px);border-radius:0 0 40px 40px}.workspace{min-width:0;display:grid;grid-template-rows:minmax(430px,1fr) auto;gap:10px}.panel{border:1px solid #075f9d;background:linear-gradient(145deg,#041a2f,#06172a);box-shadow:inset 0 0 25px #005a9625;border-radius:7px}.panel-title{font-size:17px;font-weight:700;color:#b8ddfb;padding:12px 16px;border-bottom:1px solid #164565;display:flex;justify-content:space-between;align-items:center}.topology{position:relative;min-height:390px;padding:36px 26px 20px;background-image:linear-gradient(#0878b710 1px,transparent 1px),linear-gradient(90deg,#0878b710 1px,transparent 1px);background-size:24px 24px}.flow-grid{display:grid;grid-template-columns:1fr 1.2fr 1fr 1fr;align-items:center;gap:45px;min-height:235px}.topo-col{display:flex;flex-direction:column;gap:38px}.node{position:relative;border:1px solid #188cd4;background:#06223b;padding:15px 10px;text-align:center;border-radius:4px;min-height:90px}.node h4{margin:0 0 7px;font-size:15px}.node strong{font-size:21px;color:#eaf7ff}.node small{display:block;color:#67a7d2;margin-top:5px}.node.main{min-height:145px;display:flex;flex-direction:column;justify-content:center}.node .device-icon{font-size:35px;color:#9ed4ff;margin-bottom:6px}.wire{position:absolute;height:3px;background:#21aef5;box-shadow:0 0 7px #008de0}.wire.active{background:#60ee91;box-shadow:0 0 9px #42e87a}.wire.h1{left:17%;right:10%;top:50%}.wire.v1{width:3px;height:39%;left:54%;top:50%}.wire-dot{position:absolute;width:11px;height:11px;border-radius:50%;background:#94e7ff;border:2px solid #0872b6;animation:pulse 1.4s infinite}@keyframes pulse{50%{box-shadow:0 0 14px #3fd4ff}}.topo-summary{display:grid;grid-template-columns:repeat(8,1fr);gap:8px;padding:10px 14px 14px}.kpi{border:1px solid #176da5;background:#07243e;padding:9px;text-align:center;min-width:0}.kpi label{display:block;font-size:11px;color:#9dbad1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kpi strong{font-size:18px;color:#64caff;display:block;margin-top:5px}.details{min-height:285px}.tabs{display:flex;gap:2px;padding:9px 12px 0;overflow-x:auto}.tabs button{color:#83add0;background:#061a2d;border:1px solid #164d74;padding:8px 16px;border-radius:3px 3px 0 0;white-space:nowrap}.tabs button.active{color:#dff3ff;background:#0b4774;border-color:#168fd7}.tab{display:none;padding:12px}.tab.active{display:block}.overview-grid{display:grid;grid-template-columns:1fr 1.35fr;gap:12px}.status-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.status-item{background:#07223a;border:1px solid #113f60;padding:8px;font-size:12px}.status-item:before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--green);margin-right:7px;box-shadow:0 0 7px #2ee66a}.status-item.alarm:before{background:var(--red);box-shadow:0 0 7px #f33}.data-table{width:100%;border-collapse:collapse;font-size:12px}.data-table th,.data-table td{border:1px solid #123e5d;padding:7px;text-align:left}.data-table th{color:#76a8cd;background:#05192a}.data-table td{color:#d0e8f8}.data-table .good{color:var(--green)}.data-table .alarm{color:var(--red)}.debugbar{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:8px}.debugbar input{width:330px}.debugbar input,.debugbar select{background:#031321;color:#d2eaff;border:1px solid #17577e;padding:7px}.log{height:145px;overflow:auto;background:#010913;border:1px solid #12334c;padding:8px;font:11px/1.5 Consolas;color:#76a9c8}.log .rx{color:#64dc85}.log .er{color:#ff6c6c}.bottom-nav{display:flex;gap:8px;padding:10px 12px;border-top:1px solid #10466b}.bottom-nav button{flex:1;min-height:50px;border:1px solid #1474ad;background:#082945;color:#ccecff;border-radius:4px;font-size:15px}.tcp-pop{position:fixed;right:18px;top:62px;z-index:50;width:270px;background:#061b2e;border:1px solid #1684c6;padding:14px;box-shadow:0 10px 30px #000b;display:none}.tcp-pop.show{display:block}.tcp-pop label{font-size:12px;color:#82add0;display:block;margin:7px 0 3px}.tcp-pop input{width:100%;padding:7px;background:#020e19;color:white;border:1px solid #17557c}.tcp-pop button{width:100%;margin-top:10px;padding:8px;background:#0b5688;color:white;border:1px solid #1ba5f7}
body.v1 .main{grid-template-columns:30% 1fr}body.v1 .details{border-radius:0 0 7px 7px}body.v1 .cab-screen{background-image:url('直流屏屏柜正面元器件分布照片.jpg');background-size:cover;background-position:center 47%}body.v1 .mini-topology{background:#021b32dd}
body.v2{--cyan:#21d0ff;--green:#20e98c}body.v2 .cabinet{background:linear-gradient(100deg,#26313a,#65727a 8%,#343f47 50%,#6a747a 92%,#202931);color:#eef7ff}body.v2 .cab-title{background:#172631;color:#edf7ff}body.v2 .workspace{grid-template-rows:minmax(480px,1fr) auto}body.v2 .topology{min-height:450px}body.v2 .modules{padding-bottom:18px}body.v2 .cab-screen{min-height:110px;margin:5px 16px}body.v2 .mini-flow{height:90px}body.v2 .details{min-height:245px}
body.v3{--line:#167ccc;--panel:#04172a}body.v3 .main{grid-template-columns:35% 1fr}body.v3 .cabinet{min-height:850px;background:linear-gradient(100deg,#747d81,#b1b6b8 8%,#7e878b 50%,#b4b9bb 92%,#5f686d)}body.v3 .workspace{grid-template-rows:minmax(500px,1fr) auto}body.v3 .topology{min-height:475px}body.v3 .topo-summary{display:none}body.v3 .details{min-height:320px}body.v3 .overview-grid{grid-template-columns:1fr 1.1fr}body.v3 .bottom-nav{position:absolute;right:18px;bottom:18px;top:70px;width:155px;flex-direction:column;border:0;background:#061a2e;padding:10px}body.v3 .details{position:relative;padding-right:175px}body.v3 .bottom-nav button{min-height:42px}body.v3 .module{height:150px}.cab-photo-strip{display:none}body.v3 .cab-screen{min-height:230px;background-image:url('直流屏屏柜正面元器件分布照片.jpg');background-size:cover;background-position:center 43%}body.v3 .mini-topology{background:#021b3290;min-height:210px}
body.v4 .main{grid-template-columns:31% 1fr}body.v4 .workspace{grid-template-rows:minmax(380px,auto) auto}body.v4 .topology{min-height:315px;padding-top:22px}body.v4 .flow-grid{min-height:180px}.body.v4 .details{min-height:330px}body.v4 .cab-screen{min-height:185px}body.v4 .module{height:205px}body.v4 .topo-summary{grid-template-columns:repeat(8,1fr)}body.v4 .status-grid{grid-template-columns:repeat(3,1fr)}
@media(max-width:1100px){.main,body.v1 .main,body.v3 .main,body.v4 .main{grid-template-columns:1fr}.cabinet{min-height:auto}.workspace{grid-template-rows:auto auto}.topo-summary{grid-template-columns:repeat(4,1fr)}body.v3 .details{padding-right:0}body.v3 .bottom-nav{position:static;width:auto;flex-direction:row}.cabinet{max-width:720px;margin:auto;width:100%}}
@media(max-width:700px){.topbar{height:auto;min-height:58px;flex-wrap:wrap;padding:9px 12px}.brand{font-size:18px}.clock{display:none}.main{padding:6px}.meter-row{gap:4px;padding-left:2px;padding-right:2px}.meter{padding:4px 2px}.meter label{font-size:9px}.meter strong{font-size:18px}.modules{gap:5px;padding-left:2px;padding-right:2px}.module{height:145px}.flow-grid{grid-template-columns:1fr 1fr;gap:18px}.topology{padding:18px 10px}.wire{display:none}.topo-summary{grid-template-columns:repeat(2,1fr)}.overview-grid{grid-template-columns:1fr}.status-grid{grid-template-columns:repeat(2,1fr)}.bottom-nav{overflow-x:auto}.bottom-nav button{min-width:110px}.conn-tools{width:100%;overflow-x:auto}}
.meter{min-width:0;overflow:hidden}.meter label{overflow:hidden;text-overflow:ellipsis}.meter strong{white-space:nowrap}body.v4 .details{min-height:330px}
body.v1 .brand:after{content:"方案一"}body.v2 .brand:after{content:"方案二"}body.v3 .brand:after{content:"方案三"}body.v4 .brand:after{content:"方案四"}.brand:after{font-size:12px;font-weight:400;border:1px solid #1679b5;border-radius:3px;padding:4px 7px;margin-left:10px;vertical-align:middle;color:#49bfff}
@media(max-width:1400px) and (min-width:1101px){body.v1 .meter-row,body.v2 .meter-row,body.v4 .meter-row{gap:5px;padding-left:3px;padding-right:3px}.meter{padding-left:2px;padding-right:2px}.meter label{font-size:9px}.meter strong{font-size:19px}}
@media(max-width:700px){.workspace,.panel{width:100%;max-width:100%;min-width:0;overflow:hidden}.flow-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.flow-grid>*,.topo-col,.node{min-width:0}.status-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tabs,.bottom-nav{max-width:100%;overflow-x:auto}.panel-title{min-width:0;gap:8px}.panel-title .state-pill{white-space:normal;text-align:right}}
.lamp{position:relative;background:#24292b!important;border:2px solid #565d60;box-shadow:inset 0 2px 7px #000,0 1px 1px #dfe5e655!important;opacity:1;width:34px;height:34px;border-radius:50%;transition:.25s}.lamp:after{content:"无电";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:9px;font-weight:700;color:#ff4d4f;text-shadow:0 0 3px #000;white-space:nowrap}.lamp.on:after{content:"亮";color:#fff;font-weight:700;text-shadow:0 1px 3px #000}.lamp.on.red{background:#ff2525!important;box-shadow:0 0 8px #fff,0 0 24px #ff2020,inset 0 -6px 10px #790000!important;border-color:#ff8888}.lamp.on.green{background:#22ef5c!important;box-shadow:0 0 8px #fff,0 0 24px #20ec59,inset 0 -6px 10px #056b20!important;border-color:#88ffaa}.lamp.on.amber{background:#ffd027!important;box-shadow:0 0 8px #fff,0 0 24px #ffc400,inset 0 -6px 10px #8e6200!important;border-color:#ffe488}.lamp:not(.on).red{border-color:#ff4d4f;background:#3a1515!important;box-shadow:inset 0 2px 8px #000!important}.lamp:not(.on).green{border-color:#40e87b;background:#0f2e1a!important;box-shadow:inset 0 2px 8px #000!important}.lamp:not(.on).amber{border-color:#ffc928;background:#3d2f0b!important;box-shadow:inset 0 2px 8px #000!important}
.bottom-nav button.active{background:#0b5c91;border-color:#37bfff;color:#fff;box-shadow:inset 0 -3px #28c7ff}.battery-tools{display:flex;align-items:center;gap:9px;margin-bottom:10px;flex-wrap:wrap}.battery-tools label{color:#86afd0;font-size:12px}.battery-tools select{background:#04192b;color:#d9efff;border:1px solid #17638f;padding:6px 9px}.battery-grid{display:grid;grid-template-columns:repeat(6,minmax(105px,1fr));gap:5px}.battery-cell{display:flex;justify-content:space-between;gap:8px;border:1px solid #123e5d;background:#062038;padding:7px 8px;font-size:12px}.battery-cell b{color:#3cff8a;font-family:Consolas}.battery-cell.missing b{color:#6d8799}.alarm-summary{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:9px}.alarm-chip{padding:6px 9px;border:1px solid #244a63;background:#071b2b;color:#7894a8;font-size:12px}.alarm-chip.on{border-color:#b83b3b;background:#3c151b;color:#ff7777}.history-note{color:#79a0bc;font-size:12px;margin-bottom:8px}.lamp-box .lamp-state{display:block;font-size:10px;font-weight:700;margin-top:2px}.lamp-box .lamp-state.on{color:#075f25}.lamp-box .lamp-state.off{color:#4a5154}
@media(max-width:1200px){.battery-grid{grid-template-columns:repeat(4,minmax(100px,1fr))}}@media(max-width:700px){.battery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){body{min-width:0}.topbar{align-items:flex-start}.brand{font-size:16px;white-space:normal}.top-actions{margin-left:auto}.state-pill{padding:6px 8px}.conn-tools{padding:7px 6px!important;gap:5px}.conn-tools button,.conn-tools select{height:32px;padding:0 8px;font-size:12px;flex:0 0 auto}.main{display:block}.cabinet{padding:7px;border-width:3px}.cab-title{font-size:17px}.meter-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;padding:10px 4px}.meter label{font-size:10px}.meter strong{font-size:20px}.lamp-row{gap:4px;padding:10px 3px}.lamp-box{font-size:10px}.cab-screen{margin:10px 5px;border-width:6px}.modules{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.module{height:128px}.module-grill{height:48px}.workspace{margin-top:8px}.panel-title{font-size:15px;padding:10px}.topology{min-height:0}.flow-grid{grid-template-columns:1fr;gap:9px;min-height:0}.topo-col{gap:9px}.node,.node.main{min-height:76px}.topo-summary{grid-template-columns:repeat(2,minmax(0,1fr));padding:7px}.tabs{padding-left:6px}.tab{padding:7px}.bottom-nav{padding:7px}.tcp-pop{left:10px;right:10px;top:112px;width:auto}.data-table{font-size:11px;min-width:560px}.tab{overflow-x:auto}}
.backend-health{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 14px;border-bottom:1px solid #17445f;background:#061a2b}.backend-health-main{display:flex;align-items:center;gap:14px;min-width:0}.backend-health b{font-size:14px;white-space:nowrap}.backend-health span{font-size:12px;color:#9bb9ce;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.backend-health:before{content:"";width:10px;height:10px;border-radius:50%;flex:0 0 auto}.backend-health.ok:before{background:#36ef78;box-shadow:0 0 9px #36ef78}.backend-health.warn:before{background:#ffc342;box-shadow:0 0 9px #ffc342}.backend-health.bad:before{background:#ff4c4c;box-shadow:0 0 9px #ff4c4c}.backend-health.ok b{color:#54ef8b}.backend-health.warn b{color:#ffd26a}.backend-health.bad b{color:#ff7373}.backend-health button{padding:7px 12px;border:1px solid #df6c38;background:#552713;color:#ffd8c7;border-radius:4px;white-space:nowrap}.backend-health button:disabled{opacity:.45}@media(max-width:700px){.backend-health{align-items:flex-start;padding:8px}.backend-health-main{display:block;flex:1}.backend-health b,.backend-health span{display:block;white-space:normal}.backend-health span{margin-top:3px}.backend-health button{font-size:12px;padding:6px 8px}}
.panel{min-width:0;overflow:hidden}