:root{
  --bg:#0D0B14;
  --bg-raised:#141120;
  --bg-card:#171320;
  --bg-input:#1B1626;
  --line:#2A2438;
  --line-soft:#211C2E;
  --violet:#8B5CF6;
  --violet-dim:#5B3FA8;
  --pink:#EC4899;
  --green:#4ADE80;
  --danger:#F43F5E;
  --fg:#FAFAFA;
  --fg-dim:#9B95AC;
  --fg-faint:#635C77;
  --mono:'JetBrains Mono', monospace;
  --display:'Space Grotesk', sans-serif;
  --body:'Inter', sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0;}
/* Several elements (#dash-summary, #dash-toolbar, #account-authed, ...)
   carry the native [hidden] attribute AND a class that sets its own
   `display` -- a class selector ties with an attribute selector on
   specificity, so without this, the styled class silently wins and the
   element stays visible regardless of .hidden = true/false (confirmed by
   real testing: the zero-servers dashboard state showed "0 Total / 0
   Running / 0 Stopped" and the filter toolbar above the empty-state
   message instead of just the message). */
[hidden]{display:none !important;}
body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--body);
  line-height:1.5;
  min-height:100vh;
  position:relative;
}
body::before{
  content:'';
  position:fixed; top:-15%; left:20%;
  width:900px; height:900px;
  background:radial-gradient(circle, rgba(139,92,246,0.10) 0%, rgba(139,92,246,0) 60%);
  pointer-events:none; z-index:0;
}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer;}
.hidden{display:none !important;}

/* ---------- SHELL ---------- */
.shell{display:grid; grid-template-columns:232px 1fr; min-height:100vh; position:relative; z-index:1;}

.sidebar{
  border-right:1px solid var(--line);
  padding:22px 16px;
  display:flex; flex-direction:column;
  background:rgba(255,255,255,0.008);
}
.side-brand{display:flex; align-items:center; gap:9px; padding:6px 8px 26px;}
.side-brand svg{height:18px; width:auto;}
.side-brand svg path, .side-brand svg polygon{fill:var(--violet);}
.side-section{font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-faint); padding:16px 10px 8px;}
.side-link{
  display:flex; align-items:center; gap:11px;
  padding:9px 10px; border-radius:8px;
  font-size:13.5px; color:var(--fg-dim);
  margin-bottom:2px; cursor:pointer; border:none; background:none; width:100%; text-align:left;
}
.side-link svg{width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0;}
.side-link.active{background:rgba(139,92,246,0.12); color:var(--fg); box-shadow:inset 0 0 0 1px rgba(139,92,246,0.25);}
.side-link:not(.active):hover{background:rgba(255,255,255,0.03); color:var(--fg);}
.side-link.disabled{opacity:0.4; cursor:not-allowed;}
.side-foot{margin-top:auto; padding:14px 10px; border-top:1px solid var(--line); font-family:var(--mono); font-size:11px; color:var(--fg-faint);}

.main{padding:28px 40px 80px;}
.breadcrumb{font-family:var(--mono); font-size:12px; color:var(--fg-faint); margin-bottom:20px;}
.breadcrumb b{color:var(--fg-dim); font-weight:500;}

/* ---------- CARDS ---------- */
.card{
  background:var(--bg-card);
  border:1px solid var(--line);
  border-radius:16px;
}
.server-card{padding:28px 30px; margin-bottom:24px;}
.server-top{display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:6px; gap:14px; flex-wrap:wrap;}
.kicker{font-family:var(--mono); font-size:11px; color:var(--violet); letter-spacing:.09em; text-transform:uppercase; margin-bottom:8px; display:block;}
.server-name{font-family:var(--display); font-size:26px; font-weight:700; letter-spacing:-0.01em;}
.server-sub{font-family:var(--mono); font-size:12.5px; color:var(--fg-faint); margin-top:6px;}
.server-sub b{color:var(--fg-dim); font-weight:500;}

.status-pill{
  display:flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:12px; font-weight:500;
  padding:7px 14px; border-radius:100px;
  background:rgba(74,222,128,0.09); border:1px solid rgba(74,222,128,0.28); color:var(--green);
  white-space:nowrap;
}
.status-pill[data-state="stopped"]{ background:rgba(244,63,94,0.09); border-color:rgba(244,63,94,0.28); color:var(--danger); }
.status-pill[data-state="transition"], .status-pill[data-state="unavailable"]{ background:rgba(155,149,172,0.09); border-color:rgba(155,149,172,0.28); color:var(--fg-dim); }
.status-pill .dot{width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green); animation:pulse 1.8s ease-in-out infinite;}
.status-pill[data-state="stopped"] .dot{ background:var(--danger); box-shadow:0 0 8px var(--danger); animation:none; }
.status-pill[data-state="transition"] .dot, .status-pill[data-state="unavailable"] .dot{ background:var(--fg-faint); box-shadow:none; }

/* Read-only identifier display -- violet-accented mono chip, same family as .status-pill but for a fixed value rather than live status. */
.id-chip-row{display:flex; align-items:center; gap:8px;}
.id-chip{
  flex:1; display:flex; align-items:center;
  font-family:var(--mono); font-size:13px; font-weight:500; letter-spacing:0.2px;
  padding:10px 14px; border-radius:10px;
  background:rgba(139,92,246,0.09); border:1px solid rgba(139,92,246,0.28); color:var(--violet);
  overflow-x:auto; white-space:nowrap;
}
@keyframes pulse{0%,100%{opacity:1;} 50%{opacity:.4;}}

.stats{display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden; margin:24px 0 26px;}
.stat{background:var(--bg-raised); padding:16px 18px; min-width:0;}
.stat-label{font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--fg-faint); margin-bottom:8px;}
.stat-val{font-family:var(--display); font-size:19px; font-weight:600; overflow-wrap:anywhere;}
.stat-val.mono{font-family:var(--mono); font-size:15px; font-weight:500;}
.stat-val.dim{color:var(--fg-faint); font-family:var(--mono); font-size:15px; font-weight:500;}
.stat-sub{font-family:var(--mono); font-size:11px; color:var(--fg-faint); margin-top:2px;}

.actions{display:flex; flex-wrap:wrap; gap:10px;}
.act-btn{
  display:flex; align-items:center; gap:8px;
  padding:11px 18px; border-radius:9px;
  font-size:13.5px; font-weight:500;
  border:1px solid var(--line); background:var(--bg-raised); color:var(--fg-dim);
  transition:all .15s ease;
}
.act-btn svg{width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;}
.act-btn:hover{border-color:var(--violet-dim); color:var(--fg); transform:translateY(-1px);}
.act-btn.primary{ background:linear-gradient(135deg, var(--violet), #7C3AED); color:#fff; border-color:transparent; }
.act-btn.primary:hover{box-shadow:0 6px 20px rgba(139,92,246,0.4);}
.act-btn:disabled{opacity:0.4; cursor:not-allowed; pointer-events:none;}
.act-btn.danger{color:var(--pink); border-color:rgba(236,72,153,0.3);}
.act-btn.danger:hover{background:rgba(236,72,153,0.08); border-color:var(--pink);}
.act-btn.danger-solid{color:#fff; border-color:transparent; background:linear-gradient(135deg,#DB2777,var(--pink));}
.act-btn.danger-solid:hover{box-shadow:0 6px 20px rgba(236,72,153,0.4);}

/* ---------- COLLAPSIBLE PANEL (reinstall + backups) ---------- */
.panel-card{padding:26px 32px;}
.panel-toggle-row{display:flex; align-items:flex-start; justify-content:space-between; gap:20px; flex-wrap:wrap;}
.panel-head h2{font-family:var(--display); font-size:19px; font-weight:600; margin-bottom:7px;}
.panel-head p{color:var(--fg-dim); font-size:13.5px; max-width:460px;}
.panel-open-btn{
  display:flex; align-items:center; gap:8px; flex-shrink:0;
  padding:11px 18px; border-radius:9px;
  font-size:13.5px; font-weight:600; color:var(--pink);
  background:rgba(236,72,153,0.07); border:1px solid rgba(236,72,153,0.28);
  transition:all .15s ease;
}
.panel-open-btn.violet{ color:var(--violet); background:rgba(139,92,246,0.07); border-color:rgba(139,92,246,0.28); }
.panel-open-btn svg{width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .25s ease;}
.panel-open-btn:hover{background:rgba(236,72,153,0.13); border-color:var(--pink);}
.panel-open-btn.violet:hover{background:rgba(139,92,246,0.13); border-color:var(--violet);}
.panel-card.open .panel-open-btn svg{transform:rotate(45deg);}

.panel-body{display:grid; grid-template-rows:0fr; opacity:0; transition:grid-template-rows .38s ease, opacity .3s ease .04s;}
.panel-card.open .panel-body{grid-template-rows:1fr; opacity:1;}
.panel-body-inner{overflow:hidden;}
.panel-body-content{padding-top:26px; margin-top:24px; border-top:1px solid var(--line);}

.warn-kicker{font-family:var(--mono); font-size:11px; color:var(--pink); letter-spacing:.09em; text-transform:uppercase; margin-bottom:8px; display:block;}
.tabs{display:flex; gap:28px; border-bottom:1px solid var(--line); margin-bottom:26px;}
.tab{font-family:var(--body); font-size:13.5px; font-weight:600; color:var(--fg-faint); padding-bottom:13px; position:relative; cursor:pointer; background:none; border:none;}
.tab.active{color:var(--fg);}
.tab.active::after{content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:linear-gradient(90deg,var(--violet),var(--pink)); border-radius:2px;}
.tab-panel.hidden{display:none;}

.form-hint{font-size:13.5px; color:var(--fg-dim); margin-bottom:24px;}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px 22px; margin-bottom:26px;}
.field{display:flex; flex-direction:column; gap:8px;}
.field.full{grid-column:1 / -1;}
.field label{font-size:13px; color:var(--fg-dim); font-weight:500;}
.field .optional{color:var(--fg-faint); font-weight:400;}
.field select, .field input, .field textarea{
  background:var(--bg-input); border:1px solid var(--line); border-radius:9px;
  padding:11px 14px; font-family:var(--mono); font-size:13px; color:var(--fg);
  outline:none; transition:border-color .15s ease; width:100%;
}
.field select:focus, .field input:focus, .field textarea:focus{border-color:var(--violet);}
.field input::placeholder, .field textarea::placeholder{color:var(--fg-faint); font-family:var(--body);}
.field textarea{resize:vertical; min-height:64px; font-family:var(--mono);}
.field select{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239B95AC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center;}

.erase-warning{
  display:flex; gap:12px; align-items:flex-start;
  background:rgba(236,72,153,0.06); border:1px solid rgba(236,72,153,0.22);
  border-radius:10px; padding:14px 16px; margin-bottom:22px;
}
.erase-warning svg{width:17px; height:17px; stroke:var(--pink); fill:none; stroke-width:2; flex-shrink:0; margin-top:1px;}
.erase-warning p{font-size:13px; color:var(--fg-dim); line-height:1.55;}
.erase-warning b{color:var(--pink); font-weight:600;}

.erase-btn{
  width:100%; padding:14px; border-radius:10px; border:none;
  background:linear-gradient(135deg,#DB2777,var(--pink));
  color:#fff; font-family:var(--body); font-weight:600; font-size:14px;
  transition:box-shadow .15s ease, transform .15s ease;
}
.erase-btn:hover{box-shadow:0 8px 26px rgba(236,72,153,0.4); transform:translateY(-1px);}
.erase-btn:disabled{opacity:0.5; cursor:not-allowed;}

/* ---------- ISO / BACKUP LIST ROWS ---------- */
.row-list{display:flex; flex-direction:column; gap:8px; margin-top:8px;}
.list-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 14px; border:1px solid var(--line); border-radius:10px;
  background:var(--bg-raised); font-size:13px;
}
.list-row .row-name{font-family:var(--mono); overflow-wrap:anywhere;}
.list-row .row-actions{display:flex; gap:8px; flex-shrink:0;}
.btn-sm{padding:7px 13px; font-size:12px;}

/* ---------- SUBSCRIPTION ADD-ONS (nested under a plan, billing page) ---------- */
.subscription-card{margin-bottom:14px;}
.subscription-card:last-child{margin-bottom:0;}
.addon-sublist{margin:8px 0 0 16px; padding-left:14px; border-left:2px solid var(--line); display:flex; flex-direction:column; gap:6px;}
.addon-row{display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:12px; color:var(--fg-dim);}
.addon-row .addon-name{font-family:var(--mono);}
.addon-row .addon-price{font-family:var(--mono); color:var(--fg-faint);}

/* ---------- BACKUPS UPSELL ---------- */
.upsell{
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding:20px 22px; border-radius:12px;
  background:linear-gradient(135deg, rgba(139,92,246,0.08), rgba(236,72,153,0.06));
  border:1px solid rgba(139,92,246,0.25);
}
.upsell-price{font-family:var(--display); font-size:22px; font-weight:700;}
.upsell-price span{font-family:var(--mono); font-size:12px; font-weight:500; color:var(--fg-dim);}
.upsell p{color:var(--fg-dim); font-size:13.5px; margin-top:4px; max-width:420px;}

/* ---------- MESSAGES ---------- */
.error-text{color:var(--danger); font-size:13px; margin-top:12px;}
.success-text{color:var(--green); font-size:13px; margin-top:12px;}
.suspended-banner{padding:16px 20px; margin-bottom:24px; border-color:rgba(244,63,94,0.4) !important; background:rgba(244,63,94,0.07) !important;}
.suspended-banner strong{color:var(--danger); display:block; margin-bottom:4px;}
.suspended-banner span{color:var(--fg-dim); font-size:13.5px;}

/* ---------- GENERIC POPOUT MODAL (reinstall, backups) ---------- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(5,3,9,0.85);
  display:flex; align-items:center; justify-content:center; padding:20px; z-index:65;
}
.modal-box{
  background:var(--bg-card); border:1px solid var(--line); border-radius:16px;
  width:100%; max-width:640px; max-height:88vh; overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow:0 24px 70px -24px rgba(139,92,246,0.4);
}
.modal-toolbar{
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding:20px 24px; border-bottom:1px solid var(--line); flex-shrink:0;
}
.modal-toolbar h2{font-family:var(--display); font-size:17px; font-weight:600;}
.modal-content{padding:24px; overflow-y:auto;}

/* ---------- CONSOLE MODAL ---------- */
.console-overlay{
  position:fixed; inset:0; background:rgba(5,3,9,0.88);
  display:flex; align-items:center; justify-content:center; padding:20px; z-index:60;
}
.console-box{
  background:#000; border:1px solid var(--line); border-radius:16px;
  width:100%; max-width:960px; overflow:hidden;
  box-shadow:0 20px 60px -20px rgba(139,92,246,0.4);
}
.console-toolbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; background:var(--bg-card); border-bottom:1px solid var(--line);
}
#console-screen{width:100%; aspect-ratio:4/3; background:#000;}
#console-screen canvas{width:100%; height:100%; display:block;}
.console-screen-terminal{padding:8px; overflow:hidden;}
.console-screen-terminal .xterm{height:100%;}

/* ---------- CONFIRM DIALOG ---------- */
/* Highest of the three overlays -- it's a blocking "are you sure?" prompt
   that can be triggered from inside a popout modal (z-index 65) or the
   console (z-index 60), and must always render on top of whichever one
   opened it. */
.confirm-overlay{
  position:fixed; inset:0; background:rgba(5,3,9,0.75);
  display:flex; align-items:center; justify-content:center; padding:20px; z-index:80;
}
.confirm-box{
  position:relative;
  background:var(--bg-card); border:1px solid var(--line); border-radius:16px;
  padding:24px; max-width:380px; width:100%;
  box-shadow:0 24px 70px -24px rgba(139,92,246,0.4);
}
.confirm-box h3{font-family:var(--display); font-size:17px; font-weight:600; margin-bottom:8px; padding-right:20px;}
.confirm-box p{color:var(--fg-dim); font-size:13.5px;}
.confirm-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:20px;}

.confirm-close{
  position:absolute; top:16px; right:16px;
  width:26px; height:26px; border-radius:7px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid transparent; background:none; color:var(--fg-faint);
  transition:all .15s ease;
}
.confirm-close svg{width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round;}
.confirm-close:hover{color:var(--fg); background:rgba(255,255,255,0.06); border-color:var(--line);}

/* ---------- SERVER LIST (dashboard) ---------- */
.page-header{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:24px;}
.page-header h1{font-family:var(--display); font-size:26px; font-weight:700; letter-spacing:-0.01em;}
.page-header p{color:var(--fg-dim); font-size:13.5px; margin-top:6px;}

.status-pill.sm{padding:5px 11px; font-size:11px;}
.suspended-chip{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; text-transform:uppercase;
  padding:4px 9px; border-radius:100px; color:var(--danger);
  background:rgba(244,63,94,0.09); border:1px solid rgba(244,63,94,0.28);
}
.empty-state{padding:60px 20px; text-align:center; color:var(--fg-dim); font-size:14px;}

/* ---------- DASHBOARD SUMMARY + TOOLBAR ---------- */
.dash-summary{display:flex; gap:22px; margin:0 0 28px; padding-bottom:24px; border-bottom:1px solid var(--line); flex-wrap:wrap;}
.dash-summary-item{display:flex; align-items:baseline; gap:8px;}
.dash-summary-item .num{font-family:var(--display); font-size:20px; font-weight:700;}
.dash-summary-item .lbl{font-size:12.5px; color:var(--fg-faint); text-transform:uppercase; letter-spacing:.06em;}
.dash-summary-dot{width:6px; height:6px; border-radius:50%; display:inline-block; margin-right:2px;}

.dash-toolbar{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:22px;}
.dash-toolbar-left{display:flex; gap:8px;}
.dash-chip{
  font-family:var(--mono); font-size:12px; padding:7px 14px; border-radius:8px;
  border:1px solid var(--line); color:var(--fg-dim); background:transparent;
  transition:all .15s ease;
}
.dash-chip.active{background:rgba(139,92,246,0.14); border-color:rgba(139,92,246,0.4); color:var(--violet);}
.dash-chip:not(.active):hover{border-color:rgba(139,92,246,0.45); color:var(--fg);}
.dash-search{
  font-family:var(--mono); font-size:12.5px; color:var(--fg); background:var(--bg-input);
  border:1px solid var(--line); border-radius:8px; padding:8px 14px; width:220px;
  outline:none; transition:border-color .15s ease;
}
.dash-search::placeholder{color:var(--fg-faint);}
.dash-search:focus{border-color:var(--violet);}

/* ---------- DASHBOARD SERVER ROWS ---------- */
.dash-list{display:flex; flex-direction:column; gap:16px;}

.server-row{
  position:relative; display:flex; align-items:center; gap:36px;
  background:linear-gradient(165deg, rgba(255,255,255,0.025), rgba(255,255,255,0) 40%), var(--bg-card);
  border:1px solid var(--line); border-radius:18px; padding:26px 32px;
  overflow:hidden; text-decoration:none; color:var(--fg);
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.server-row::before{content:''; position:absolute; left:0; top:0; bottom:0; width:3px;}
.server-row.running::before{background:var(--green);}
.server-row.stopped::before{background:var(--danger);}
.server-row:hover{transform:translateY(-3px); border-color:rgba(139,92,246,0.5); box-shadow:0 20px 40px -20px rgba(139,92,246,0.35);}

.row-status-block{display:flex; align-items:center; gap:10px; width:108px; flex-shrink:0;}
.row-status{
  display:flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.04em; text-transform:uppercase;
}
.row-status.running{color:var(--green);}
.row-status.stopped{color:var(--danger);}
.row-status.transition, .row-status.unavailable{color:var(--fg-dim);}

.row-dot{width:8px; height:8px; border-radius:50%; position:relative; flex-shrink:0;}
.row-dot.running{background:var(--green); animation:rowDotPulse 2s infinite;}
.row-dot.stopped{background:var(--danger); opacity:.85;}
.row-dot.transition, .row-dot.unavailable{background:var(--fg-faint);}
@keyframes rowDotPulse{
  0%{box-shadow:0 0 0 0 rgba(74,222,128,0.55);}
  70%{box-shadow:0 0 0 7px rgba(74,222,128,0);}
  100%{box-shadow:0 0 0 0 rgba(74,222,128,0);}
}

.row-divider{width:1px; align-self:stretch; background:var(--line); flex-shrink:0;}

.row-name-block{flex:1 1 220px; min-width:0;}
.row-name{
  font-family:var(--display); font-size:21px; font-weight:600; letter-spacing:-.01em;
  margin-bottom:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  display:flex; align-items:center; gap:10px;
}
.row-ip{font-family:var(--mono); font-size:13.5px; color:var(--fg-dim); display:flex; align-items:center; gap:8px;}
.row-ip.unavailable{color:var(--fg-faint); font-style:italic;}
.row-ip-dot{width:3px; height:3px; border-radius:50%; background:var(--fg-faint);}

.row-meters{display:flex; gap:24px; width:220px; flex-shrink:0;}
.row-meter{flex:1; min-width:0;}
.row-meter-label{
  font-family:var(--mono); font-size:10.5px; color:var(--fg-faint); text-transform:uppercase;
  letter-spacing:.05em; margin-bottom:8px; display:flex; justify-content:space-between;
}
.row-meter-track{height:5px; border-radius:2.5px; background:rgba(255,255,255,0.06); overflow:hidden;}
.row-meter-fill{height:100%; border-radius:2.5px; background:linear-gradient(90deg, var(--violet), var(--pink));}
.row-meter-fill.dim{background:rgba(255,255,255,0.10);}

.row-meta{width:168px; flex-shrink:0; font-family:var(--mono); font-size:12px; color:var(--fg-faint); line-height:1.6;}

.row-icon-actions{display:flex; gap:8px; flex-shrink:0; opacity:0; transition:opacity .15s ease;}
.server-row:hover .row-icon-actions{opacity:1;}
.row-icon-btn{
  width:32px; height:32px; border-radius:8px; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  color:var(--fg-dim); font-size:13px; background:none; transition:all .15s ease;
}
.row-icon-btn:hover{border-color:var(--violet); color:var(--violet); background:rgba(139,92,246,0.1);}
.row-icon-btn:disabled{opacity:.4; cursor:not-allowed; pointer-events:none;}

.add-row{
  border:1.5px dashed var(--line); border-radius:18px;
  display:flex; align-items:center; justify-content:center; gap:12px;
  padding:22px; color:var(--fg-faint); transition:all .18s ease; text-decoration:none;
}
.add-row:hover{border-color:var(--violet); color:var(--violet); background:rgba(139,92,246,0.04);}
.add-row-icon{
  width:30px; height:30px; border-radius:50%; border:1.5px solid currentColor;
  display:flex; align-items:center; justify-content:center; font-size:15px;
}
.add-row-label{font-family:var(--display); font-size:14.5px; font-weight:600;}

@media (max-width:920px){
  .server-row{flex-wrap:wrap; gap:16px;}
  .row-divider{display:none;}
  .row-meters, .row-meta{width:auto;}
  .row-icon-actions{opacity:1;}
}

@media (max-width:880px){
  .shell{grid-template-columns:1fr;}
  .sidebar{display:none;}
  .main{padding:24px 20px 60px;}
  .stats{grid-template-columns:repeat(2,1fr);}
  .form-grid{grid-template-columns:1fr;}
  .server-top{flex-direction:column; gap:14px;}
}