:root{
  --bg:#0a0e14; --panel:#10161f; --panel2:#0d131b; --line:#1d2733;
  --txt:#c6d3e2; --txt-bright:#eaf2fb; --dim:#5b6b7d; --dimmer:#3a4654;
  --acc:#36e0a4; --acc-d:#1a9d6f; --acc2:#ff4d6d; --amber:#ffb454;
  --glow:rgba(54,224,164,.22);
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--bg); color:var(--txt); font-family:'Sora',sans-serif;
  font-size:14px; min-height:100vh;
  background-image:
    radial-gradient(circle at 85% -5%, rgba(54,224,164,.05), transparent 35%),
    radial-gradient(circle at 5% 105%, rgba(255,77,109,.04), transparent 35%);
}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:5px}
::-webkit-scrollbar-track{background:transparent}

header{
  display:flex;justify-content:space-between;align-items:center;
  padding:16px 26px;border-bottom:1px solid var(--line);
  position:sticky;top:0;background:rgba(10,14,20,.85);
  backdrop-filter:blur(12px);z-index:1000;
}
.brand{display:flex;align-items:center;gap:11px}
.dot{width:10px;height:10px;border-radius:50%;background:var(--acc);
  box-shadow:0 0 13px var(--glow);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.logo{font-weight:800;letter-spacing:.02em;font-size:1.15rem;color:var(--txt-bright)}
.tag{font-family:'Space Mono',monospace;color:var(--dim);font-size:.72rem}
.head-right{display:flex;align-items:center;gap:18px}
.clock{font-family:'Space Mono',monospace;color:var(--dim);font-size:.8rem}
.ghost{background:transparent;border:1px solid var(--line);color:var(--dim);
  padding:7px 14px;border-radius:7px;cursor:pointer;font-family:'Space Mono';
  font-size:.72rem;letter-spacing:.08em;transition:all .15s}
.ghost:hover{border-color:var(--acc2);color:var(--acc2)}

main{padding:22px 26px 60px;max-width:1500px;margin:0 auto}

.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:18px 20px;position:relative;overflow:hidden}
.kpi::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(var(--acc),var(--acc-d))}
.kpi-label{font-family:'Space Mono';font-size:.66rem;color:var(--dim);
  letter-spacing:.14em;margin-bottom:10px}
.kpi-val{font-size:2.3rem;font-weight:800;color:var(--txt-bright);
  line-height:1;font-variant-numeric:tabular-nums}
.kpi-spark{font-family:'Space Mono';font-size:.68rem;color:var(--dimmer);
  margin-top:8px}

.grid{display:grid;grid-template-columns:2fr 1fr;gap:14px;margin-bottom:18px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:18px 20px}
.map-panel{grid-row:span 2}
.panel-head{display:flex;justify-content:space-between;align-items:center;
  margin-bottom:16px;gap:14px;flex-wrap:wrap}
.panel-head h2{font-size:.78rem;font-weight:700;letter-spacing:.13em;
  color:var(--txt-bright);font-family:'Space Mono'}
.panel-meta{font-family:'Space Mono';font-size:.68rem;color:var(--acc);
  display:flex;align-items:center;gap:6px}
.panel-meta::before{content:'';width:6px;height:6px;border-radius:50%;
  background:var(--acc);box-shadow:0 0 8px var(--glow);
  animation:pulse 1.6s infinite}

#map{height:520px;border-radius:9px;overflow:hidden;background:#070b10;
  border:1px solid var(--line)}
.leaflet-container{background:#070b10}
.leaflet-tile{filter:grayscale(1) brightness(.55) contrast(1.1)}
.leaflet-control-attribution{background:rgba(10,14,20,.7)!important;
  color:var(--dimmer)!important;font-size:9px!important}
.leaflet-control-attribution a{color:var(--dim)!important}
.pulse-marker{border-radius:50%;background:var(--acc2);
  box-shadow:0 0 0 rgba(255,77,109,.5);animation:ring 2s infinite}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(255,77,109,.5)}
  70%{box-shadow:0 0 0 12px rgba(255,77,109,0)}
  100%{box-shadow:0 0 0 0 rgba(255,77,109,0)}}

.bars{display:flex;flex-direction:column;gap:10px}
.bar-row{display:flex;flex-direction:column;gap:5px}
.bar-top{display:flex;justify-content:space-between;font-size:.8rem}
.bar-top .name{color:var(--txt)}
.bar-top .num{font-family:'Space Mono';color:var(--acc);font-weight:700}
.bar-track{height:6px;background:var(--panel2);border-radius:4px;overflow:hidden}
.bar-fill{height:100%;background:linear-gradient(90deg,var(--acc-d),var(--acc));
  border-radius:4px;transition:width .6s cubic-bezier(.2,.8,.2,1)}
.empty{color:var(--dimmer);font-family:'Space Mono';font-size:.78rem;
  text-align:center;padding:18px 0}

.fleet{display:flex;flex-direction:column;gap:9px}
.node{display:flex;align-items:center;gap:11px;padding:10px 12px;
  background:var(--panel2);border:1px solid var(--line);border-radius:8px}
.node .nstat{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.node.on .nstat{background:var(--acc);box-shadow:0 0 8px var(--glow)}
.node.off .nstat{background:var(--dimmer)}
.node .nname{font-weight:600;color:var(--txt-bright)}
.node .ncaps{font-family:'Space Mono';font-size:.66rem;color:var(--dim);
  margin-left:auto}

.manual{display:flex;gap:8px;flex-wrap:wrap}
.manual input{background:var(--panel2);border:1px solid var(--line);
  color:var(--txt);padding:8px 11px;border-radius:7px;font-family:'Space Mono';
  font-size:.78rem;width:170px}
.manual input:focus{outline:none;border-color:var(--acc)}
.danger{background:var(--acc2);color:#fff;border:none;padding:8px 16px;
  border-radius:7px;font-weight:700;cursor:pointer;font-family:'Space Mono';
  font-size:.74rem;letter-spacing:.06em}
.danger:hover{filter:brightness(1.1)}

.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.82rem}
th{text-align:left;font-family:'Space Mono';font-size:.64rem;color:var(--dim);
  letter-spacing:.1em;padding:9px 12px;border-bottom:1px solid var(--line)}
td{padding:11px 12px;border-bottom:1px solid var(--panel2);color:var(--txt)}
tr:hover td{background:var(--panel2)}
.ip-cell{font-family:'Space Mono';color:var(--txt-bright);font-weight:700}
.chip{display:inline-block;padding:3px 9px;border-radius:20px;font-size:.68rem;
  font-family:'Space Mono';background:rgba(54,224,164,.1);color:var(--acc);
  border:1px solid rgba(54,224,164,.2)}
.chip.manual{background:rgba(255,180,84,.1);color:var(--amber);
  border-color:rgba(255,180,84,.2)}
.exp{font-family:'Space Mono';color:var(--dim);font-size:.76rem}
.unban{background:transparent;border:1px solid var(--line);color:var(--dim);
  padding:5px 11px;border-radius:6px;cursor:pointer;font-family:'Space Mono';
  font-size:.68rem}
.unban:hover{border-color:var(--acc);color:var(--acc)}

@media(max-width:980px){
  .kpis{grid-template-columns:repeat(2,1fr)}
  .grid{grid-template-columns:1fr}
  .map-panel{grid-row:auto}
  #map{height:340px}
}