:root{
  --bg0:#070a0f; --bg1:#0b111a;
  --panel:rgba(255,255,255,.04); --panel2:rgba(255,255,255,.06);
  --bd:rgba(255,255,255,.085); --bd2:rgba(255,255,255,.14);
  --txt:#eaf1f8; --muted:#8598ac; --faint:#5d6b7c;
  --teal:#2bd4a6; --teal2:#15a883; --violet:#8b7dff; --amber:#e6b450; --red:#ef6f6f;
  --shadow:0 18px 50px -12px rgba(0,0,0,.6);
  --r:16px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,system-ui,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:var(--bg0);color:var(--txt);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}
.bg-glow{position:fixed;inset:0;z-index:-1;
  background:
    radial-gradient(900px 520px at 8% -8%, rgba(43,212,166,.18), transparent 60%),
    radial-gradient(820px 480px at 105% 0%, rgba(139,125,255,.16), transparent 58%),
    radial-gradient(700px 700px at 50% 120%, rgba(43,212,166,.06), transparent 60%),
    linear-gradient(165deg,var(--bg0),var(--bg1));}
.hidden{display:none!important}
.muted{color:var(--muted)}
.small{font-size:12.5px}
.center{text-align:center}
.grow{flex:1}
.mono{font-variant-numeric:tabular-nums}
code{background:rgba(43,212,166,.12);color:var(--teal);padding:1px 6px;border-radius:6px;font-size:12.5px}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:8px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.18);background-clip:content-box}

/* ---------- buttons ---------- */
.btn{appearance:none;border:1px solid var(--bd);background:var(--panel2);color:var(--txt);
  padding:9px 16px;border-radius:11px;cursor:pointer;font-size:13.5px;font-weight:500;
  transition:.16s ease;white-space:nowrap}
.btn:hover{border-color:var(--bd2);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.primary{background:linear-gradient(180deg,rgba(43,212,166,.26),rgba(43,212,166,.12));
  border-color:rgba(43,212,166,.5);color:#d8fff4;font-weight:600;box-shadow:0 6px 20px -8px rgba(43,212,166,.5)}
.btn.primary:hover{border-color:var(--teal);box-shadow:0 8px 24px -8px rgba(43,212,166,.7)}
.btn.ghost{background:transparent}
.btn.danger{border-color:rgba(239,111,111,.35);color:#ffd9d9}
.btn.danger:hover{border-color:var(--red);background:rgba(239,111,111,.14)}
.btn.block{width:100%;justify-content:center;padding:11px}
.btn.tiny{padding:5px 11px;font-size:12px;border-radius:9px}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  border:1px solid var(--bd);background:var(--panel2);color:var(--muted);border-radius:11px;cursor:pointer;transition:.16s}
.icon-btn:hover{color:var(--txt);border-color:var(--bd2)}
.icon-btn.sm{width:30px;height:30px;border-radius:9px}

/* ---------- overlays / modals / login ---------- */
.overlay{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;
  background:rgba(3,6,10,.66);backdrop-filter:blur(7px);animation:fade .18s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal,.login-card{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025));
  border:1px solid var(--bd2);border-radius:20px;box-shadow:var(--shadow);backdrop-filter:blur(18px);
  width:min(460px,92vw);padding:28px;display:flex;flex-direction:column;gap:14px}
.login-card{align-items:stretch}
.modal h3{margin:0;font-size:18px}
.logo-lg{align-self:center;display:grid;place-items:center;width:74px;height:74px;border-radius:22px;
  background:rgba(43,212,166,.08);border:1px solid rgba(43,212,166,.25);
  box-shadow:0 0 40px -10px rgba(43,212,166,.6)}
.login-title{margin:6px 0 -4px;text-align:center;font-size:26px;font-weight:700;letter-spacing:.3px}
.field{display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--muted)}
input,textarea{background:rgba(0,0,0,.28);border:1px solid var(--bd);border-radius:11px;
  color:var(--txt);padding:11px 13px;font-size:14px;font-family:inherit;outline:none;transition:.16s}
select{background:#111822;border:1px solid var(--bd);border-radius:11px;color:var(--txt);
  padding:11px 13px;font-size:14px;font-family:inherit;outline:none}
input::placeholder,textarea::placeholder{color:var(--faint)}
input:focus,textarea:focus{border-color:rgba(43,212,166,.6);box-shadow:0 0 0 3px rgba(43,212,166,.12)}
textarea{resize:vertical;word-break:break-all;line-height:1.5}
.err{color:#ff9b9b;font-size:13px;min-height:8px}
.row{display:flex;gap:10px;align-items:center}
.row.end{justify-content:flex-end;margin-top:4px}
.row.between{justify-content:space-between}.row.wrap{flex-wrap:wrap}
.no-margin{margin:2px 0 0}
.check{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:13px;cursor:pointer}
.check input{width:16px;height:16px;accent-color:var(--teal)}

/* ---------- top bar ---------- */
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:12px;
  padding:13px 24px;background:rgba(8,12,18,.7);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--bd)}
.brand{display:flex;align-items:center;gap:11px}
.logo{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;
  background:rgba(43,212,166,.08);border:1px solid rgba(43,212,166,.22)}
.brand-text{display:flex;flex-direction:column;line-height:1.1}
.brand-text b{font-size:16px;font-weight:700;letter-spacing:.3px}
.brand-text span{font-size:11px;color:var(--muted)}

/* ---------- summary tiles ---------- */
.summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;padding:22px 24px 6px}
.tile{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:var(--r);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  border:1px solid var(--bd);box-shadow:var(--shadow)}
.tile-ic{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;flex:none}
.tile.teal .tile-ic{background:rgba(43,212,166,.14);color:var(--teal)}
.tile.violet .tile-ic{background:rgba(139,125,255,.16);color:var(--violet)}
.tile.up .tile-ic{background:rgba(230,180,80,.14);color:var(--amber)}
.tile.down .tile-ic{background:rgba(43,212,166,.12);color:var(--teal)}
.tile-val{font-size:22px;font-weight:700;line-height:1.1}
.tile-val .unit{font-size:14px;color:var(--muted);font-weight:600}
.tile-lbl{font-size:12px;color:var(--muted);margin-top:2px}

/* ---------- server cards ---------- */
.servers{padding:14px 24px 24px;display:grid;gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,560px),1fr))}
.card{background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018));
  border:1px solid var(--bd);border-radius:18px;box-shadow:var(--shadow);overflow:hidden}
.srv{display:flex;flex-direction:column}
.srv-head{display:flex;align-items:center;gap:12px;padding:16px 18px}
.srv-id{min-width:0}
.srv-name{font-weight:650;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srv-meta{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srv-head .icon-btn{margin-left:auto}
.srv-head .maintenance-on{border-color:rgba(230,180,80,.55);color:#f7d78e;background:rgba(230,180,80,.12)}

.pill{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;
  font-size:12px;font-weight:600;flex:none}
.pill .pdot{width:7px;height:7px;border-radius:50%}
.pill.up{background:rgba(43,212,166,.13);color:var(--teal);border:1px solid rgba(43,212,166,.3)}
.pill.up .pdot{background:var(--teal);box-shadow:0 0 8px var(--teal);animation:pulse 2s infinite}
.pill.down{background:rgba(239,111,111,.12);color:#ff9b9b;border:1px solid rgba(239,111,111,.3)}
.pill.down .pdot{background:var(--red)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

.srv-kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--bd);
  border-top:1px solid var(--bd);border-bottom:1px solid var(--bd)}
.srv-kpi .kpi{background:rgba(8,12,18,.35);padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.srv-kpi .kpi b{font-size:16px;font-weight:700}
.srv-kpi .kpi span{font-size:11px;color:var(--muted)}
.srv-kpi.six{grid-template-columns:repeat(6,1fr)}
.srv-kpi .kpi.speed b,.live-rate{color:var(--teal);white-space:nowrap}

.seg{display:flex;gap:4px;padding:12px 14px 0}
.seg-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;
  padding:8px 12px;border-radius:10px;cursor:pointer;font-size:13px;font-weight:500;
  color:var(--muted);background:transparent;border:1px solid transparent;transition:.16s}
.seg-btn:hover{color:var(--txt)}
.seg-btn.active{color:var(--txt);background:var(--panel2);border-color:var(--bd)}
.seg-btn em{font-style:normal;font-size:11px;color:var(--muted);background:rgba(255,255,255,.07);
  padding:1px 7px;border-radius:999px}
.seg-btn.active em{color:var(--teal);background:rgba(43,212,166,.14)}

.srv-body{padding:12px 14px 16px}
.srv-body.offline{display:flex;align-items:center;gap:12px;color:var(--muted)}
.srv-body.offline svg{color:var(--red);flex:none}

.toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}

/* ---------- tables ---------- */
.tbl-wrap{border:1px solid var(--bd);border-radius:12px;overflow:hidden}
.scroll{max-height:340px;overflow:auto}
table{width:100%;border-collapse:collapse;font-size:13px}
thead th{position:sticky;top:0;z-index:1;text-align:left;color:var(--muted);font-weight:500;font-size:11.5px;
  text-transform:uppercase;letter-spacing:.4px;padding:9px 12px;
  background:rgba(11,17,26,.96);backdrop-filter:blur(6px);border-bottom:1px solid var(--bd)}
tbody td{padding:9px 12px;border-bottom:1px solid rgba(255,255,255,.045);vertical-align:middle}
.live-rate{min-width:78px}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover td{background:rgba(255,255,255,.025)}
td.right,th.right{text-align:right}
.acts{display:flex;gap:6px;justify-content:flex-end}

.udot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#3a4654;margin-right:9px;vertical-align:middle}
.udot.on{background:var(--teal);box-shadow:0 0 8px var(--teal)}
.uname{font-weight:550}
.tag{font-size:11px;color:var(--muted);background:rgba(255,255,255,.06);padding:1px 8px;border-radius:7px;margin-left:6px}
.tag.off{color:#ff9b9b;background:rgba(239,111,111,.12)}
.state{font-size:11px;padding:2px 9px;border-radius:7px;background:rgba(255,255,255,.06);color:var(--muted);text-transform:lowercase}
.pw{cursor:pointer;color:var(--faint);border-bottom:1px dotted var(--faint)}
.pw.mono{color:var(--teal);border:none}

.empty{color:var(--muted);text-align:center;padding:26px 16px;font-size:13.5px}
.empty.card{margin:0 24px}
.foot{padding:18px 24px 34px;text-align:center;font-size:12px}

/* ---------- credentials modal (link + QR + subscription) ---------- */
.modal.wide{width:min(520px,94vw)}
.row.between{justify-content:space-between}
.row.gap{gap:10px;flex-wrap:wrap;margin-top:2px}
.field-row{display:flex;gap:8px;align-items:center}
.field-row input{flex:1}
.creds-seg{margin:2px 0 6px}
.qr-wrap{display:flex;justify-content:center;margin:6px 0 12px}
.qr{width:236px;height:236px;background:#fff;border-radius:16px;padding:12px;box-sizing:border-box;
  box-shadow:0 10px 30px -12px rgba(0,0,0,.6);display:grid;place-items:center}
.qr svg{width:100%;height:100%;display:block}
.copybox{display:flex;gap:8px;align-items:center;background:rgba(0,0,0,.28);
  border:1px solid var(--bd);border-radius:12px;padding:8px 8px 8px 12px}
.copybox .link{flex:1;font-size:12px;line-height:1.45;word-break:break-all;color:var(--txt);
  max-height:64px;overflow:auto}
.copybox .btn{flex:none}
.config-code{margin:0;min-height:250px;max-height:420px;overflow:auto;padding:14px;border-radius:12px;
  border:1px solid var(--bd);background:rgba(0,0,0,.32);color:#cce9df;font:12px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:pre}

/* ---------- settings ---------- */
.settings-modal{width:min(920px,96vw);max-height:94vh;overflow:auto;padding:24px;gap:18px}
.settings-section{display:flex;flex-direction:column;gap:11px;padding:17px;border:1px solid var(--bd);border-radius:15px;background:rgba(0,0,0,.14)}
.settings-section h4{margin:0;font-size:15px}.settings-section p{margin:0}
.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
.settings-grid.compact{grid-template-columns:repeat(4,minmax(0,1fr))}
.release-summary{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-bottom:16px}
.release-kpi{padding:15px;border:1px solid var(--bd);border-radius:14px;background:var(--panel);min-height:72px}.release-kpi b{display:block;font-size:17px}.release-kpi span{display:block;margin-top:6px;color:var(--muted);font-size:12px}
.release-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.release-grid .panel,.release-ops{min-width:0}.release-build-status,.release-artifacts{display:grid;gap:7px;margin:12px 0}.release-target,.release-artifact,.release-provider{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 11px;border:1px solid var(--bd);border-radius:10px;background:rgba(255,255,255,.025);font-size:12px}.release-target.ready,.release-provider.ready{border-color:rgba(43,212,166,.4)}.release-target.missing,.release-provider.missing{border-color:rgba(239,183,111,.35)}.release-artifact small,.release-provider small{color:var(--muted)}.release-ops{margin-top:14px}
@media(max-width:1100px){.release-summary{grid-template-columns:repeat(3,minmax(0,1fr))}.release-grid{grid-template-columns:1fr}}
@media(max-width:600px){.release-summary{grid-template-columns:repeat(2,minmax(0,1fr))}}
.status-server-settings{display:grid;gap:10px}
.status-config{display:flex;flex-direction:column;gap:10px;padding:13px;border:1px solid var(--bd);border-radius:12px;background:rgba(255,255,255,.025)}
.check-grid{display:flex;flex-wrap:wrap;gap:8px 15px;padding:10px 12px;border:1px solid var(--bd);border-radius:11px;background:rgba(0,0,0,.2)}
.warning-check{color:#f7d78e}.security-note{color:#9fb9b2;font-size:12px;padding:9px 11px;border-left:3px solid var(--teal);background:rgba(43,212,166,.06)}
.sticky-actions{position:sticky;bottom:-24px;padding:14px 0 4px;background:linear-gradient(transparent,var(--bg1) 35%);z-index:2}

@media (max-width:560px){
  .topbar{padding:12px 14px}
  .summary,.servers{padding-left:14px;padding-right:14px}
  .brand-text{display:none}
  .qr{width:200px;height:200px}
}

@media (max-width:900px){
  .srv-kpi.six{grid-template-columns:repeat(3,1fr)}
  .settings-grid.compact{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:650px){
  .topbar{flex-wrap:wrap}.topbar .grow{display:none}.topbar .brand{margin-right:auto}
  .settings-grid,.settings-grid.compact{grid-template-columns:1fr}
  .srv-kpi.six{grid-template-columns:repeat(2,1fr)}
  .srv-head{flex-wrap:wrap}.srv-head .icon-btn{margin-left:0}
}

/* ---------- Network Control Center shell ---------- */
:root{--bg-primary:#080c11;--bg-secondary:#0b1117;--surface:#0d141b;--surface-elevated:#111a22;--surface-hover:#151f28;--border-subtle:rgba(255,255,255,.06);--border-medium:rgba(255,255,255,.1);--text-primary:#f4f7f8;--text-secondary:#9ba8b0;--text-muted:#64727c;--accent:#22d3ae;--accent-soft:rgba(34,211,174,.12);--success:#35d49a;--warning:#e6b64a;--danger:#ef6464;--info:#65a8ff}
#app{display:flex;min-height:100vh;background:var(--bg-primary)}
.sidebar{width:244px;flex:none;display:flex;flex-direction:column;padding:18px 13px;border-right:1px solid var(--border-subtle);background:rgba(11,17,23,.88);position:sticky;top:0;height:100vh;z-index:35}
.side-brand{display:flex;align-items:center;gap:10px;padding:2px 7px 24px}.side-brand>div{display:flex;flex-direction:column;min-width:0}.side-brand b{font-size:16px}.side-brand small{font-size:10px;color:var(--text-muted);white-space:nowrap}.side-brand .icon-btn{margin-left:auto}.side-brand .logo,.mobile-brand .logo{width:34px;height:34px;border-radius:10px;background:var(--accent-soft);border:1px solid rgba(34,211,174,.25);display:grid;place-items:center;color:var(--accent);font-weight:800}
.nav{display:flex;flex-direction:column;gap:3px}.nav-label{padding:15px 10px 5px;color:var(--text-muted);font-size:10px;text-transform:uppercase;letter-spacing:.09em}.nav-item{appearance:none;border:0;background:transparent;color:var(--text-secondary);display:flex;align-items:center;gap:11px;width:100%;padding:9px 11px;border-radius:9px;cursor:pointer;text-align:left;font:inherit;font-size:13px;transition:.15s}.nav-item span{width:18px;text-align:center;color:var(--text-muted);font-size:17px}.nav-item:hover{background:var(--surface-hover);color:var(--text-primary)}.nav-item.active{background:var(--accent-soft);color:var(--text-primary);box-shadow:inset 3px 0 0 var(--accent)}.nav-item.active span{color:var(--accent)}.side-bottom{margin-top:auto;display:flex;flex-direction:column;gap:13px}.control-state{display:flex;align-items:center;gap:9px;padding:10px;color:var(--text-secondary);font-size:11px;border-top:1px solid var(--border-subtle)}.control-state i{width:7px;height:7px;border-radius:50%;background:var(--success);box-shadow:0 0 9px var(--success)}.control-state small{color:var(--success)}.version{color:var(--text-muted);font-size:10px;padding:0 10px}.version a{color:var(--text-secondary)}.workspace{min-width:0;flex:1}.topbar{padding:18px 28px;min-height:76px;background:rgba(8,12,17,.82);border-bottom:1px solid var(--border-subtle)}.topbar h1{font-size:24px;line-height:1.1;margin:0;font-weight:700}.topbar p{margin:5px 0 0;color:var(--text-muted);font-size:12px}.mobile-brand{display:none;align-items:center;gap:8px}.search-wrap{display:flex;align-items:center;gap:8px;width:min(340px,30vw);background:var(--surface);border:1px solid var(--border-subtle);border-radius:9px;padding:0 9px;color:var(--text-muted)}.search-wrap input{border:0;background:transparent;padding:9px 0;min-width:0;width:100%;font-size:12px}.search-wrap input:focus{box-shadow:none}.search-wrap kbd{font:10px ui-monospace;color:var(--text-muted);border:1px solid var(--border-medium);padding:3px 5px;border-radius:4px;white-space:nowrap}.connection-banner{margin:14px 28px 0;padding:10px 13px;background:rgba(230,182,74,.1);border-left:3px solid var(--warning);color:#f2d38a;font-size:12px;border-radius:7px}.page{display:none;padding:26px 28px 0}.page.active{display:block}.page-intro{margin-bottom:22px}.page-intro h2,.section-head h2,.panel-head h2{font-size:17px;margin:0 0 4px;font-weight:650}.page-intro p,.section-head p,.panel-head p{margin:0;font-size:12px}.overview-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(280px,.8fr);gap:16px;margin-bottom:28px}.panel{background:var(--surface);border:1px solid var(--border-subtle);border-radius:12px;padding:18px}.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}.traffic-total{color:var(--accent);font:600 13px ui-monospace}.range-tabs,.view-switch,.filter-chips{display:flex;gap:4px;flex-wrap:wrap}.range-tabs button,.view-switch button,.filter-chips button{border:1px solid transparent;background:transparent;color:var(--text-muted);padding:6px 10px;border-radius:7px;cursor:pointer;font:11px inherit}.range-tabs button.active,.view-switch button.active,.filter-chips button.active{color:var(--text-primary);background:var(--surface-elevated);border-color:var(--border-medium)}.range-tabs button:hover,.view-switch button:hover,.filter-chips button:hover{color:var(--text-primary)}#trafficChart{width:100%;height:220px;display:block;margin-top:6px}.chart-meta{display:flex;gap:20px;color:var(--text-muted);font-size:11px;border-top:1px solid var(--border-subtle);padding-top:11px}.chart-meta b{display:block;color:var(--text-primary);font-size:13px;font-variant-numeric:tabular-nums}.chart-meta i{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px}.chart-meta .in i{background:var(--info)}.chart-meta .out i{background:var(--accent)}.session-preview{display:flex;flex-direction:column;gap:2px}.session-row{display:grid;grid-template-columns:1fr auto;gap:8px;padding:10px 0;border-bottom:1px solid var(--border-subtle);font-size:12px}.session-row:last-child{border-bottom:0}.session-row small{display:block;color:var(--text-muted);margin-top:3px}.session-row b{font-variant-numeric:tabular-nums;font-weight:600}.section-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:12px}.servers{padding:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,390px),1fr));margin-bottom:28px}.server-compact{background:var(--surface);border:1px solid var(--border-subtle);border-radius:12px;padding:16px;transition:.15s}.server-compact:hover{background:var(--surface-hover);border-color:var(--border-medium)}.server-compact .server-top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}.server-compact h3{font-size:15px;margin:0 0 4px}.server-compact .address{color:var(--text-muted);font:11px ui-monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.health{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--success)}.health i{width:6px;height:6px;border-radius:50%;background:currentColor}.health.down{color:var(--danger)}.health.warn{color:var(--warning)}.server-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:17px}.server-metrics span{display:block;color:var(--text-muted);font-size:10px;margin-bottom:3px}.server-metrics b{font:600 13px ui-monospace;color:var(--text-primary)}.server-metrics .live b{color:var(--accent)}.server-foot{display:flex;justify-content:space-between;align-items:center;margin-top:16px;padding-top:12px;border-top:1px solid var(--border-subtle);font-size:11px;color:var(--text-muted)}.server-foot button{color:var(--text-secondary)}.overview-bottom{display:grid;grid-template-columns:1fr 1fr;gap:16px}.compact-list,.activity-list{display:flex;flex-direction:column}.compact-row,.activity-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border-subtle);font-size:12px}.compact-row:last-child,.activity-row:last-child{border-bottom:0}.compact-row small,.activity-row small{display:block;color:var(--text-muted);margin-top:2px}.table-panel{padding:0;overflow:hidden}.table-panel .tbl-wrap{border:0;border-radius:0}.servers-full{grid-template-columns:1fr}.filter-chips{margin:-6px 0 13px}.compact-input{background:var(--surface);border:1px solid var(--border-medium);padding:9px 11px;border-radius:8px;color:var(--text-primary);font-size:12px;width:220px}.network-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}.network-node{padding:18px;background:var(--surface);border:1px solid var(--border-subtle);border-radius:12px}.network-node .node-line{display:flex;justify-content:space-between;align-items:center}.network-node .node-stat{display:flex;justify-content:space-between;color:var(--text-muted);font-size:12px;margin-top:16px}.unavailable{display:flex;gap:13px;align-items:flex-start;padding:20px;color:var(--text-secondary);background:rgba(101,168,255,.06);border-left:3px solid var(--info);border-radius:8px}.unavailable>span{font-size:21px;color:var(--info)}.unavailable b{color:var(--text-primary)}.unavailable p{margin:5px 0 0;color:var(--text-muted);font-size:12px;line-height:1.55}.page .empty{padding:20px}.page .srv{background:var(--surface);box-shadow:none}.page .srv-kpi{background:var(--border-subtle)}
@media(max-width:1050px){.sidebar{width:68px;padding:18px 8px}.side-brand>div,.side-brand .icon-btn,.nav-label,.nav-item:not(.active)::after,.side-bottom .control-state span,.version{display:none}.side-brand{justify-content:center;padding-left:0;padding-right:0}.nav-item{justify-content:center;padding-left:0;padding-right:0}.nav-item span{font-size:19px}.overview-grid{grid-template-columns:1fr}.search-wrap{width:220px}}
@media(max-width:700px){.page{padding:20px 14px 0}.topbar{padding:13px 14px;gap:8px}.topbar>div:nth-child(2){display:none}.mobile-brand{display:flex}.topbar .search-wrap{order:5;width:100%;flex-basis:100%}.topbar .btn.primary{font-size:0;padding:9px 12px}.topbar .btn.primary:first-letter{font-size:15px}.summary{padding:18px 0 5px}.overview-bottom{grid-template-columns:1fr}.section-head{align-items:flex-start;gap:10px;flex-direction:column}.server-metrics{grid-template-columns:repeat(2,1fr)}.compact-input{width:150px}.page-intro .row{align-items:flex-start}}
.sidebar.collapsed{width:68px;padding-left:8px;padding-right:8px}.sidebar.collapsed .side-brand>div,.sidebar.collapsed .side-brand .icon-btn,.sidebar.collapsed .nav-label,.sidebar.collapsed .side-bottom .control-state span,.sidebar.collapsed .version{display:none}.sidebar.collapsed .side-brand{justify-content:center;padding-left:0;padding-right:0}.sidebar.collapsed .nav-item{justify-content:center;padding-left:0;padding-right:0}.sidebar.collapsed .nav-item span{font-size:19px}
.server-compact small,.network-node .address,table td small{display:block;margin-top:3px}