/* NexStackVM — deep navy cloud identity on NexStackCP panel.css */

:root {
  --nexstackvm-navy: #0a1628;
  --nexstackvm-navy-deep: #020617;
  --nexstackvm-navy-mid: #0f2744;
  --nexstackvm-navy-blue: #1e3a8a;
  --nexstackvm-navy-accent: #2563eb;
  --nexstackvm-navy-sky: #3b82f6;
  --nexstackvm-navy-cloud: #0ea5e9;
  --nexstackvm-navy-soft: #eef4ff;
  --nexstackvm-navy-soft-2: #dbeafe;
  --nexstackvm-navy-border: #93c5fd;
  --nexstackvm-navy-border-soft: #bfdbfe;
}

/* Shift CP orange → navy in main/topbar only (sidebar untouched) */
.nexstackvm-panel .main {
  --primary: #1e3a8a;
  --primary-hover: #0a1628;
  --primary-light: #eef4ff;
  --primary-lighter: #dbeafe;
  --primary-border: #bfdbfe;
  --primary-border-strong: #93c5fd;
  --primary-text: #1e3a8a;
  --primary-text-dark: #0a1628;
  --primary-ring: rgba(30, 58, 138, 0.18);
  --primary-shadow: rgba(10, 22, 40, 0.28);
  --primary-shadow-soft: rgba(30, 58, 138, 0.1);
  --gradient-primary: linear-gradient(135deg, #1e40af, #0f2744);
  --gradient-primary-strong: linear-gradient(135deg, #0f2744, #020617);
  --gradient-surface: linear-gradient(180deg, #ffffff, #eef4ff);
}

/* ── Base tint — cool cloud page background ── */
.nexstackvm-panel.admin-body {
  background: #eef2f9;
}

.nexstackvm-panel .content {
  background: linear-gradient(180deg, rgba(219, 234, 254, 0.45) 0%, transparent 240px);
}

/* ── Topbar ── */
.nexstackvm-panel .topbar {
  border-bottom-color: var(--nexstackvm-navy-border-soft);
  background: linear-gradient(180deg, #ffffff 0%, #f5f8ff 100%);
}

.nexstackvm-product-badge {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.32rem 0.62rem;
  border-radius: 999px;
  color: #dbeafe;
  background: linear-gradient(135deg, var(--nexstackvm-navy-mid), var(--nexstackvm-navy-blue));
  border: 1px solid rgba(147, 197, 253, 0.45);
  box-shadow: 0 2px 8px rgba(10, 22, 40, 0.18);
}

.nexstackvm-panel-user .nexstackvm-product-badge {
  color: #eff6ff;
  background: linear-gradient(135deg, #0f2744, #1e40af);
  border-color: rgba(147, 197, 253, 0.5);
}

.nexstackvm-panel .host-chip {
  background: var(--nexstackvm-navy-soft);
  border: 1px solid var(--nexstackvm-navy-border-soft);
  color: var(--nexstackvm-navy-blue);
}

/* ── Cards & headings ── */
.nexstackvm-panel .card {
  border-color: var(--nexstackvm-navy-border-soft);
  background: linear-gradient(180deg, #ffffff, #f8fafc 58%, var(--nexstackvm-navy-soft) 100%);
  box-shadow: 0 12px 30px rgba(10, 22, 40, 0.08);
}

.nexstackvm-panel .card h4,
.nexstackvm-panel .page-head h3 {
  color: var(--nexstackvm-navy-blue);
}

.nexstackvm-panel .breadcrumbs strong {
  color: var(--nexstackvm-navy-accent);
}

/* Stat cards — keep original NexStackCP colours (not navy theme) */
.nexstackvm-panel .counter-card:nth-child(1) {
  background: linear-gradient(135deg, #ea580c, #f97316);
  box-shadow: 0 14px 30px rgba(234, 88, 12, 0.35);
}

.nexstackvm-panel .counter-card:nth-child(2) {
  background: linear-gradient(135deg, #0ea5e9, #06b6d4);
  box-shadow: 0 14px 30px rgba(14, 165, 233, 0.35);
}

.nexstackvm-panel .counter-card:nth-child(3) {
  background: linear-gradient(135deg, #8b5cf6, #a855f7);
  box-shadow: 0 14px 30px rgba(139, 92, 246, 0.35);
}

.nexstackvm-panel .counter-card:nth-child(4) {
  background: linear-gradient(135deg, #059669, #10b981);
  box-shadow: 0 14px 30px rgba(16, 185, 129, 0.35);
}

/* ── Tabs & buttons ── */
a.backup-tab { text-decoration: none; color: inherit; }
.backup-tab.is-active { pointer-events: none; }

.nexstackvm-panel .backup-tab.is-active {
  background: linear-gradient(135deg, var(--nexstackvm-navy-blue), var(--nexstackvm-navy-accent));
  color: #fff;
  box-shadow: 0 4px 14px rgba(30, 58, 138, 0.28);
}

.nexstackvm-panel .btn-primary {
  background: linear-gradient(135deg, var(--nexstackvm-navy-blue), var(--nexstackvm-navy-mid));
  border-color: var(--nexstackvm-navy-mid);
  box-shadow: 0 4px 14px rgba(10, 22, 40, 0.24);
}

.nexstackvm-panel .btn-primary:hover {
  background: linear-gradient(135deg, var(--nexstackvm-navy-mid), var(--nexstackvm-navy-deep));
}

.nexstackvm-panel .action-btn:hover {
  background: linear-gradient(180deg, var(--nexstackvm-navy-soft), var(--nexstackvm-navy-soft-2));
  border-color: var(--nexstackvm-navy-border-soft);
}

/* ── Usage rings — cool cloud palette ── */
.nexstackvm-panel .usage-tile {
  border-color: var(--nexstackvm-navy-border-soft);
  background: linear-gradient(180deg, #fcfdff 0%, #f0f4ff 100%);
}

/* ── Layout helpers ── */
body.sidebar-collapsed .sidebar { transform: translateX(calc(-1 * var(--sidebar-w, 300px))); }
body.sidebar-collapsed .main { margin-left: 0; }
.sidebar { transition: transform 0.2s ease; }

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  padding: 0 1.5rem 1rem;
}

.form-grid label > span {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
  color: #334155;
}

.form-grid input,
.form-grid select,
.form-grid textarea {
  width: 100%;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.9rem;
}

.form-grid-full {
  grid-column: 1 / -1;
}

.nexstackvm-ip-pool-subnet-fields[hidden] {
  display: none !important;
}

.nexstackvm-ip-pool-subnet-fields {
  margin-top: 0;
}

.nexstackvm-ip-pool-routed-note {
  margin: 0;
  padding: 0.65rem 0.85rem;
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.84rem;
  line-height: 1.45;
}

.nexstackvm-ip-pool-routed-note strong {
  font-weight: 600;
  color: #0f172a;
}

.nexstackvm-ip-pool-mac-hint {
  margin: -0.35rem 0 0;
  font-size: 0.8rem;
  line-height: 1.4;
}

.template-path {
  font-size: 0.78rem;
  word-break: break-all;
  color: #475569;
}

.form-group label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
  color: #334155;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.9rem;
}

.form-actions-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
  padding: 0 1.5rem 1.25rem;
}

.pkg-table .pkg-actions-col {
  width: 1%;
  white-space: nowrap;
  text-align: right;
}

.pkg-action-menu {
  position: relative;
  display: inline-flex;
  justify-content: flex-end;
}

.pkg-action-menu-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 2rem;
  padding: 0.35rem 0.75rem;
  border-radius: 8px;
  border: 1px solid var(--primary-lighter);
  background: #f8fafc;
  color: #334155;
  font-size: 0.78rem;
  font-weight: 600;
  font-family: inherit;
  line-height: 1.15;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.pkg-action-menu-trigger:hover {
  background: #fff;
  border-color: #94a3b8;
  color: #0f172a;
}

.pkg-action-menu-trigger i {
  font-size: 0.95rem;
  line-height: 1;
}

.pkg-action-menu-panel {
  position: fixed;
  z-index: 1200;
  min-width: 10.5rem;
  padding: 0.35rem;
  border-radius: 10px;
  border: 1px solid rgba(203, 213, 225, 0.95);
  background: #fff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
}

.pkg-action-menu.is-open {
  z-index: 2;
}

.vps-list-card .pkg-table tbody tr:has(.pkg-action-menu.is-open) {
  position: relative;
  z-index: 5;
}

.pkg-action-menu-panel[hidden] {
  display: none !important;
}

.pkg-action-menu-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  padding: 0.52rem 0.65rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #334155;
  font-size: 0.8rem;
  font-weight: 600;
  font-family: inherit;
  line-height: 1.2;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.pkg-action-menu-item:hover {
  background: #f8fafc;
  color: #0f172a;
}

.pkg-action-menu-item i {
  font-size: 0.95rem;
  line-height: 1;
}

.pkg-action-menu-item:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  pointer-events: none;
}

.pkg-action-menu-item--success i { color: #16a34a; }
.pkg-action-menu-item--warn i { color: #d97706; }
.pkg-action-menu-item--manage i { color: #2563eb; }
.pkg-action-menu-item--danger i { color: #dc2626; }

.vps-table .pkg-actions-col {
  width: 5.75rem;
}

.vps-list-manage-btn {
  min-width: 4.75rem;
  padding: 0.3rem 0.65rem;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.2;
}

.pkg-table .pkg-actions {
  justify-content: flex-end;
  min-width: 0;
  flex-wrap: nowrap;
}

.customers-flash-card {
  margin-bottom: 1rem;
  padding: 0.85rem 1.25rem;
  color: #166534;
  background: #ecfdf5;
  border-color: #bbf7d0;
}

.customers-list-card .list-toolbar {
  padding: 1rem 1.25rem 0;
}

.nexstackvm-customer-view-grid {
  padding: 0.25rem 0.5rem 0.75rem;
}

.customer-modal-errors ul {
  margin: 0;
  padding-left: 1.1rem;
}

.customer-view-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  padding: 0 1.5rem 1.5rem;
}

.customer-view-item span {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.customer-view-item strong {
  display: block;
  font-size: 0.92rem;
  color: #0f172a;
  font-weight: 600;
}

.customer-modal-errors {
  margin-bottom: 1rem;
  padding: 0.85rem 1rem;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 10px;
  color: #991b1b;
  font-size: 0.85rem;
}

.customer-modal-errors ul {
  margin: 0;
  padding-left: 1.1rem;
}

.customer-modal-form {
  padding: 0;
}

.pkg-edit-modal {
  width: min(640px, calc(100vw - 2rem));
}

button.pkg-action-link {
  font-family: inherit;
}

/* Confirm sheets must sit above sheet/provision modals (1300–1350) */
.modal.confirm-modal {
  z-index: 2000;
}

.provision-modal {
  z-index: 1400;
}

/* 2026 sheet modal — IP pool add/edit */
.nexstackvm-sheet-modal {
  z-index: 1300;
}

.nexstackvm-sheet-modal:not(.is-edit-mode) #ip_pool_status_wrap {
  display: none !important;
}

.nexstackvm-sheet-modal.is-edit-mode #ip_pool_status_wrap {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

#ipPoolModal .nexstackvm-sheet {
  max-height: min(96vh, 900px);
}

#ipPoolModal .nexstackvm-sheet-body {
  overflow-y: visible;
}

#ipPoolModal .nexstackvm-sheet-form.form-grid {
  gap: 0.85rem;
  padding-bottom: 0.35rem;
}

.nexstackvm-sheet-modal.is-open {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}

.nexstackvm-sheet-backdrop {
  background: rgba(15, 23, 42, 0.68);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.nexstackvm-sheet {
  position: relative;
  z-index: 1;
  width: min(620px, calc(100vw - 1.5rem));
  max-height: min(92vh, 760px);
  display: flex;
  flex-direction: column;
  background: linear-gradient(165deg, #ffffff 0%, #f8fafc 52%, #f1f5f9 100%);
  border-radius: 22px;
  border: 1px solid rgba(148, 163, 184, 0.42);
  box-shadow:
    0 32px 64px rgba(15, 23, 42, 0.24),
    0 0 0 1px rgba(255, 255, 255, 0.88) inset;
  overflow: hidden;
  transform: scale(0.96) translateY(14px);
  opacity: 0;
  transition:
    transform 0.28s cubic-bezier(0.34, 1.25, 0.64, 1),
    opacity 0.22s ease;
}

.nexstackvm-sheet-modal.nexstackvm-sheet-visible .nexstackvm-sheet,
.nexstackvm-sheet-modal.is-open.nexstackvm-sheet-visible .nexstackvm-sheet {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.nexstackvm-sheet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.35rem 1.4rem 1rem;
  border-bottom: 1px solid rgba(226, 232, 240, 0.95);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.65));
}

.nexstackvm-sheet-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--primary, #1e3a5f);
  margin-bottom: 0.35rem;
}

.nexstackvm-sheet-head h4 {
  margin: 0;
  font-size: 1.22rem;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.02em;
}

.nexstackvm-sheet-sub {
  margin: 0.35rem 0 0;
  font-size: 0.86rem;
  color: #64748b;
}

.nexstackvm-sheet-close {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(203, 213, 225, 0.9);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: #64748b;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.nexstackvm-sheet-close:hover {
  background: #fff;
  color: #0f172a;
  border-color: #94a3b8;
}

.nexstackvm-sheet-body {
  overflow-y: auto;
  padding: 0 0 0.25rem;
}

.folder-browser-sheet .folder-browser-body,
#folderBrowserModal .nexstackvm-sheet-body {
  padding: 1rem 1.4rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.folder-browser-create.nexstackvm-sheet-card {
  margin-bottom: 0;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(203, 213, 225, 0.95);
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.9);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.folder-browser-create .nexstackvm-sheet-card-head {
  margin-bottom: 0.65rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #475569;
}

.folder-browser-create .nexstackvm-sheet-card-head i {
  color: var(--primary, #1e3a5f);
}

.folder-browser-create .nexstackvm-field span {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: #475569;
}

.folder-browser-create .nexstackvm-path-picker {
  display: flex;
  gap: 0.55rem;
  align-items: stretch;
}

.folder-browser-create .nexstackvm-path-picker input {
  flex: 1;
  min-width: 0;
  width: 100%;
  padding: 0.62rem 0.8rem;
  border: 1px solid rgba(203, 213, 225, 0.95);
  border-radius: 10px;
  font-size: 0.84rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color: #0f172a;
  background: #fff !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.folder-browser-create .nexstackvm-path-picker input:focus {
  outline: none;
  border-color: var(--primary, #1e3a5f);
  box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.12);
}

.folder-browser-create .nexstackvm-path-picker .btn {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 2.45rem;
  padding-inline: 0.95rem;
  border-radius: 10px;
  border: 1px solid rgba(203, 213, 225, 0.95);
  background: #fff;
  color: #0f172a;
  font-size: 0.875rem;
  font-weight: 600;
}

.folder-browser-create .nexstackvm-path-picker .btn:hover {
  background: #f8fafc;
  border-color: #94a3b8;
  color: #0f172a;
}

.folder-browser-create .nexstackvm-field-hint {
  margin: 0.5rem 0 0;
  font-size: 0.78rem;
  color: #64748b;
  line-height: 1.45;
}

/* Settings → Storage tab */
.storage-intro {
  margin: 0 0 1rem;
}

.storage-card + .storage-card {
  margin-top: 1.25rem;
}

.nexstackvm-sheet-form {
  padding: 1.15rem 1.4rem 0.5rem;
}

.nexstackvm-sheet-errors {
  margin: 1rem 1.4rem 0;
  padding: 0.85rem 1rem;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 12px;
  color: #991b1b;
  font-size: 0.85rem;
}

.nexstackvm-sheet-errors ul {
  margin: 0;
  padding-left: 1.1rem;
}

.nexstackvm-sheet-foot {
  display: flex;
  justify-content: flex-end;
  gap: 0.65rem;
  padding: 1rem 1.4rem 1.35rem;
  border-top: 1px solid rgba(226, 232, 240, 0.95);
  background: rgba(248, 250, 252, 0.75);
}

.nexstackvm-sheet-foot .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.nexstackvm-sheet-form input,
.nexstackvm-sheet-form select {
  border-radius: 10px;
  border-color: rgba(203, 213, 225, 0.95);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.nexstackvm-sheet-form input:focus,
.nexstackvm-sheet-form select:focus {
  outline: none;
  border-color: var(--primary, #1e3a5f);
  box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.12);
}

/* Plans list + sheet modal */
.plans-flash-card {
  margin-bottom: 1rem;
  padding: 0.85rem 1.25rem;
  color: #166534;
  background: #ecfdf5;
  border-color: #bbf7d0;
}

.plans-list-card .list-toolbar {
  border-bottom: none;
  padding-bottom: 0.35rem;
}

.plans-filter-bar {
  padding: 0 1.25rem 1rem;
  border-bottom: 1px solid rgba(226, 232, 240, 0.95);
}

.plans-slug {
  font-size: 0.78rem;
  padding: 0.12rem 0.45rem;
  border-radius: 6px;
  background: rgba(241, 245, 249, 0.95);
  color: #475569;
  border: 1px solid rgba(226, 232, 240, 0.9);
}

.plans-cpu-policy {
  font-size: 0.82rem;
  color: #64748b;
  max-width: 14rem;
  line-height: 1.35;
}

#planModal.nexstackvm-sheet-modal .nexstackvm-sheet {
  overflow: visible;
}

#planModal .nexstackvm-sheet {
  width: min(1320px, calc(100vw - 2rem));
  max-height: none;
}

#planModal .nexstackvm-sheet-head {
  padding: 1rem 1.15rem 0.85rem;
}

#planModal .nexstackvm-sheet-body.nexstackvm-plan-sheet-body {
  padding: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: visible;
}

#planModal .nexstackvm-plan-sheet-form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

#planModal .nexstackvm-plan-sheet-scroll {
  flex: 0 0 auto;
  overflow: visible;
  padding: 0.85rem 1.15rem 0.35rem;
}

#planModal #planModalErrors {
  display: none !important;
}

#planModal .nexstackvm-plan-field-error {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.68rem;
  font-weight: 500;
  line-height: 1.35;
  color: #dc2626;
}

#planModal .nexstackvm-plan-field-error[hidden] {
  display: none;
}

#planModal .nexstackvm-plan-field--invalid input,
#planModal .nexstackvm-plan-field--invalid select {
  border-color: #f87171;
  box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.35);
}

#planModal .nexstackvm-input-suffix {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  border: 1px solid #cbd5e1;
  border-radius: 9px;
  background: #fff;
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#planModal .nexstackvm-input-suffix:focus-within {
  border-color: var(--primary, #1e3a5f);
  box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.12);
}

#planModal .nexstackvm-input-suffix input {
  flex: 1 1 auto;
  min-width: 0;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent;
}

#planModal .nexstackvm-input-suffix input:focus {
  border: none !important;
  box-shadow: none !important;
}

#planModal .nexstackvm-input-suffix-addon {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 0 0.62rem;
  border-left: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #94a3b8;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  user-select: none;
}

#planModal .nexstackvm-plan-field--invalid .nexstackvm-input-suffix {
  border-color: #f87171;
  box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.35);
}

#planModal .nexstackvm-plan-field--invalid .nexstackvm-input-suffix input {
  border: none !important;
  box-shadow: none !important;
}

#planModal .nexstackvm-plan-form-columns {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.7rem;
  align-items: stretch;
}

#planModal .nexstackvm-plan-form-column-stack {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  min-width: 0;
  height: 100%;
}

#planModal .nexstackvm-plan-form-column-stack .nexstackvm-plan-form-section {
  flex: 0 0 auto;
  height: auto;
}

#planModal .nexstackvm-plan-form-section {
  margin-bottom: 0;
  padding: 0.85rem 0.8rem 0.75rem;
  border-radius: 14px;
  border: 1px solid rgba(203, 213, 225, 0.85);
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
}

#planModal .nexstackvm-plan-form-section--last {
  margin-bottom: 0;
}

#planModal .nexstackvm-plan-form-section-head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.7rem;
}

#planModal .nexstackvm-plan-form-section-head h5 {
  margin: 0;
  font-size: 0.84rem;
  font-weight: 700;
  color: #0f172a;
}

#planModal .nexstackvm-plan-form-section-head p {
  display: none;
}

#planModal .nexstackvm-plan-field-label {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

#planModal .nexstackvm-field-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  padding: 0;
  border: none;
  background: none;
  color: #94a3b8;
  cursor: help;
  line-height: 1;
  font-size: 0.82rem;
  border-radius: 4px;
  position: relative;
  flex-shrink: 0;
}

#planModal .nexstackvm-field-hint:hover,
#planModal .nexstackvm-field-hint:focus-visible {
  color: #475569;
  outline: none;
}

#planModal .nexstackvm-field-hint[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 7px);
  transform: translateX(-50%);
  z-index: 20;
  width: max-content;
  max-width: 220px;
  padding: 0.45rem 0.55rem;
  border-radius: 8px;
  background: #0f172a;
  color: #f8fafc;
  font-size: 0.68rem;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  white-space: normal;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.22);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.12s ease, visibility 0.12s ease;
}

#planModal .nexstackvm-field-hint[data-tooltip]:hover::after,
#planModal .nexstackvm-field-hint[data-tooltip]:focus-visible::after {
  opacity: 1;
  visibility: visible;
}

#planModal .nexstackvm-plan-form-section-icon {
  flex-shrink: 0;
  width: 1.9rem;
  height: 1.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: rgba(30, 58, 95, 0.09);
  color: var(--primary, #1e3a5f);
  font-size: 0.95rem;
}

#planModal .nexstackvm-plan-form-section-icon--cpu {
  background: rgba(59, 130, 246, 0.1);
  color: #2563eb;
}

#planModal .nexstackvm-plan-form-section-icon--ram {
  background: rgba(168, 85, 247, 0.1);
  color: #7c3aed;
}

#planModal .nexstackvm-plan-ram-preview {
  background: rgba(245, 243, 255, 0.9);
  border-color: rgba(221, 214, 254, 0.9);
  color: #5b21b6;
}

#planModal .nexstackvm-plan-form-section-icon--network {
  background: rgba(14, 165, 233, 0.12);
  color: #0284c7;
}

#planModal .nexstackvm-plan-form-section--network {
  gap: 0.55rem;
}

#planModal .nexstackvm-plan-net-subs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
  min-width: 0;
  flex: 1 1 auto;
}

#planModal .nexstackvm-plan-net-sub {
  margin: 0;
  padding: 0.55rem 0.45rem 0.45rem;
  border-radius: 10px;
  border: 1px solid rgba(203, 213, 225, 0.9);
  background: #f8fafc;
  min-width: 0;
}

#planModal .nexstackvm-plan-net-sub-title {
  margin: 0 0 0.5rem;
  padding: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
}

#planModal .nexstackvm-plan-net-sub .nexstackvm-plan-form-grid {
  gap: 0.45rem;
}

#planModal .nexstackvm-plan-net-sub .nexstackvm-input-suffix-addon {
  padding-left: 0.4rem;
  padding-right: 0.4rem;
  font-size: 0.68rem;
}

@media (max-width: 900px) {
  #planModal .nexstackvm-plan-net-subs,
  .vps-create-net-subs {
    grid-template-columns: 1fr;
  }
}

#planModal .nexstackvm-plan-net-preview {
  background: rgba(240, 249, 255, 0.9);
  border-color: rgba(186, 230, 253, 0.9);
  color: #0369a1;
}

#planModal .nexstackvm-plan-form-section-icon--storage {
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
}

#planModal .nexstackvm-plan-form-section-icon--settings {
  background: rgba(100, 116, 139, 0.12);
  color: #475569;
}

#planModal .nexstackvm-plan-form-grid .nexstackvm-plan-field-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: #475569;
  line-height: 1.2;
}

#planModal .nexstackvm-plan-form-grid,
#planModal .nexstackvm-plan-form-grid--stack {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.6rem;
  flex: 1;
}

#planModal .nexstackvm-plan-form-grid--3 {
  grid-template-columns: 1fr;
}

#planModal .nexstackvm-plan-form-grid label {
  display: flex;
  flex-direction: column;
  gap: 0.38rem;
  min-width: 0;
}

#planModal .nexstackvm-plan-form-grid input,
#planModal .nexstackvm-plan-form-grid select {
  display: block;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 0.52rem 0.65rem;
  border: 1px solid #cbd5e1;
  border-radius: 9px;
  font-size: 0.82rem;
  font-family: inherit;
  line-height: 1.35;
  color: #0f172a;
  background-color: #fff;
  background-image: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#planModal .nexstackvm-plan-form-grid input:focus,
#planModal .nexstackvm-plan-form-grid select:focus {
  outline: none;
  border-color: var(--primary, #1e3a5f);
  box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.12);
}

#planModal .nexstackvm-plan-form-grid input::placeholder {
  color: #94a3b8;
  opacity: 1;
}

#planModal .nexstackvm-plan-form-grid input[type="number"] {
  -moz-appearance: textfield;
}

#planModal .nexstackvm-plan-form-grid input[type="number"]::-webkit-outer-spin-button,
#planModal .nexstackvm-plan-form-grid input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#planModal .nexstackvm-plan-form-grid select {
  padding-right: 2.1rem;
  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='%2364748b' 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 0.7rem center;
  background-size: 14px;
  cursor: pointer;
}

#planModal .nexstackvm-plan-form-grid small {
  display: none;
}

#planModal .nexstackvm-plan-form-grid small code {
  font-size: 0.7rem;
  padding: 0.05rem 0.25rem;
  border-radius: 4px;
  background: #f1f5f9;
  border: none;
}

#planModal .nexstackvm-plan-cpu-preview {
  margin: 0.75rem 0 0;
  padding: 0.55rem 0.7rem;
  border-radius: 10px;
  font-size: 0.76rem;
  line-height: 1.4;
  background: rgba(239, 246, 255, 0.85);
  border: 1px solid rgba(191, 219, 254, 0.85);
  color: #1e40af;
}

#planModal .nexstackvm-plan-modal-save-error {
  flex: 1 1 100%;
  width: 100%;
  margin: 0 0 0.55rem;
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.35;
  color: #dc2626;
  text-align: left;
}

#planModal .nexstackvm-plan-modal-save-error[hidden] {
  display: none;
}

#planModal .nexstackvm-sheet-foot {
  flex-wrap: wrap;
  flex-shrink: 0;
  margin: 0;
  padding: 0.85rem 1.15rem 1rem;
  border-top: 1px solid rgba(226, 232, 240, 0.95);
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.65) 0%, rgba(255, 255, 255, 0.98) 100%);
}

@media (max-width: 1180px) {
  #planModal .nexstackvm-sheet {
    width: min(100vw - 1rem, 100%);
  }

  #planModal .nexstackvm-plan-form-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  #planModal .nexstackvm-plan-form-columns {
    grid-template-columns: 1fr;
  }
}

/* IP pool list — filters, selection, pagination */
.ippool-list-card .list-toolbar {
  border-bottom: none;
  padding-bottom: 0.35rem;
}

.ippool-filter-bar {
  padding: 0 1.25rem 1rem;
  border-bottom: 1px solid rgba(226, 232, 240, 0.95);
}

.ippool-filter-row {
  display: flex;
  align-items: flex-end;
  gap: 0.65rem;
  flex-wrap: nowrap;
}

.ippool-filter-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.82rem;
  color: #334155;
  flex: 0 0 auto;
  min-width: 0;
}

.ippool-filter-search {
  flex: 1 1 180px;
  min-width: 140px;
}

.ippool-filter-status {
  width: 9.5rem;
}

.ippool-filter-assigned {
  width: 10.5rem;
}

.ippool-filter-perpage {
  width: 5.5rem;
}

.ippool-filter-field > span {
  font-weight: 600;
  white-space: nowrap;
}

.ippool-filter-field input,
.ippool-filter-field select {
  width: 100%;
  border: 1px solid #dbe3ef;
  border-radius: 8px;
  padding: 0.55rem 0.65rem;
  font: inherit;
  background: #fff;
}

.ippool-filter-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 0 0 auto;
  padding-bottom: 1px;
}

.ippool-filter-count {
  margin-left: auto;
  font-size: 0.82rem;
  white-space: nowrap;
  flex: 0 0 auto;
  padding-bottom: 0.6rem;
}

.ippool-bulk-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 1.25rem 0.75rem;
  padding: 0.55rem 0.85rem;
  border-radius: 10px;
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  font-size: 0.85rem;
  color: #1e3a8a;
}

.ippool-bulk-bar[hidden] {
  display: none !important;
}

.ippool-check-col {
  width: 42px;
  text-align: center;
  vertical-align: middle;
}

.ippool-check {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--primary, #1e3a5f);
}

.ippool-table tbody tr.is-selected {
  background: rgba(239, 246, 255, 0.85);
}

.ippool-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.85rem 1.25rem 1rem;
  border-top: 1px solid rgba(226, 232, 240, 0.95);
}

.ippool-pager-summary {
  font-size: 0.82rem;
}

.ippool-pager-btns {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: wrap;
}

.ippool-pager-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 0.45rem;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  color: #334155;
  font-size: 0.82rem;
  text-decoration: none;
}

.ippool-pager-btn:hover {
  border-color: #94a3b8;
  background: #f8fafc;
}

.ippool-pager-btn.is-active {
  border-color: var(--primary, #1e3a5f);
  background: var(--primary, #1e3a5f);
  color: #fff;
}

.ippool-pager-btn.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}

.ippool-pager-ellipsis {
  color: #94a3b8;
  padding: 0 0.15rem;
}

.nexstackvm-combobox {
  position: relative;
}

.nexstackvm-combobox-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  width: 100%;
  border: 1px solid #dbe3ef;
  border-radius: 8px;
  padding: 0.55rem 0.65rem;
  background: #fff;
  color: #0f172a;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.nexstackvm-combobox-trigger:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  background: #f8fafc;
}

.nexstackvm-combobox-trigger i {
  color: #64748b;
  font-size: 1.1rem;
  flex: 0 0 auto;
}

.nexstackvm-combobox-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nexstackvm-combobox-label.muted {
  color: #64748b;
}

.nexstackvm-combobox-panel {
  position: absolute;
  z-index: 1200;
  left: 0;
  right: 0;
  top: calc(100% + 0.35rem);
  border: 1px solid #dbe3ef;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
  overflow: hidden;
}

.nexstackvm-combobox-panel[hidden] {
  display: none !important;
}

.nexstackvm-combobox-search-wrap {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.65rem;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
}

.nexstackvm-combobox-search-wrap i {
  color: #64748b;
}

.nexstackvm-combobox-search {
  width: 100%;
  border: 0;
  background: transparent;
  font: inherit;
  color: #0f172a;
  outline: none;
}

.nexstackvm-combobox-list {
  list-style: none;
  margin: 0;
  padding: 0.35rem 0;
  max-height: 220px;
  overflow-y: auto;
}

.nexstackvm-combobox-list li {
  padding: 0.55rem 0.75rem;
  cursor: pointer;
  font-size: 0.92rem;
  color: #0f172a;
}

.nexstackvm-combobox-list li:hover,
.nexstackvm-combobox-list li.is-active {
  background: #eff6ff;
  color: #1e3a8a;
}

.nexstackvm-combobox-meta {
  margin: 0;
  padding: 0.75rem;
  font-size: 0.82rem;
}

@media (max-width: 1100px) {
  .ippool-filter-row {
    flex-wrap: wrap;
    align-items: flex-end;
  }

  .ippool-filter-search {
    flex: 1 1 100%;
  }

  .ippool-filter-count {
    margin-left: 0;
    width: 100%;
    padding-bottom: 0;
  }
}

/* ══════════════════════════════════════════
   Customer dashboard — VPS performance focus
   (admin dashboard unchanged)
   ══════════════════════════════════════════ */
.nexstackvm-panel-user .user-dash-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.85rem;
  margin-bottom: 1.25rem;
}

.nexstackvm-panel-user .user-dash-chip {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.95rem 1.05rem;
  border-radius: 16px;
  border: none;
  color: #fff;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.18);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.nexstackvm-panel-user .user-dash-chip:hover {
  transform: translateY(-3px);
}

.nexstackvm-panel-user .user-dash-chip:nth-child(1) {
  background: linear-gradient(135deg, #ea580c, #f97316);
  box-shadow: 0 14px 30px rgba(234, 88, 12, 0.35);
}

.nexstackvm-panel-user .user-dash-chip:nth-child(2) {
  background: linear-gradient(135deg, #0ea5e9, #06b6d4);
  box-shadow: 0 14px 30px rgba(14, 165, 233, 0.35);
}

.nexstackvm-panel-user .user-dash-chip:nth-child(3) {
  background: linear-gradient(135deg, #8b5cf6, #a855f7);
  box-shadow: 0 14px 30px rgba(139, 92, 246, 0.35);
}

.nexstackvm-panel-user .user-dash-chip:nth-child(4) {
  background: linear-gradient(135deg, #334155, #1e293b);
  box-shadow: 0 14px 30px rgba(30, 41, 59, 0.35);
}

.nexstackvm-panel-user .user-dash-chip-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  color: #fff;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.35);
  flex-shrink: 0;
}

.nexstackvm-panel-user .user-dash-chip-label {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.82);
  font-weight: 600;
}

.nexstackvm-panel-user .user-dash-chip strong {
  display: block;
  font-size: 1.35rem;
  color: #fff;
  margin-top: 0.1rem;
}

.nexstackvm-panel-user .user-dash-chip small {
  display: block;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 0.15rem;
}

.nexstackvm-panel-user .user-dash-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 1rem;
  align-items: start;
}

.nexstackvm-panel-user .user-dash-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.nexstackvm-panel-user .user-dash-section-head h3 {
  margin: 0;
  font-size: 1.15rem;
  color: var(--nexstackvm-navy-blue);
}

.nexstackvm-panel-user .user-dash-section-head p {
  margin: 0.2rem 0 0;
  font-size: 0.82rem;
  color: #64748b;
}

.nexstackvm-panel-user .user-vps-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.nexstackvm-panel-user .user-vps-card {
  border: 1px solid var(--nexstackvm-navy-border-soft);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(10, 22, 40, 0.06);
  overflow: hidden;
}

.nexstackvm-panel-user .user-vps-card--down {
  opacity: 0.88;
}

.nexstackvm-panel-user .user-vps-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1.1rem 0.9rem;
  border-bottom: 1px solid #eef2f7;
  background: linear-gradient(180deg, #fafbff, #fff);
}

.nexstackvm-panel-user .user-vps-card-title strong {
  display: block;
  font-size: 1rem;
  color: #0f172a;
  line-height: 1.25;
}

.nexstackvm-panel-user .user-vps-card-title span {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.76rem;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nexstackvm-panel-user .user-vps-card-meta {
  flex-shrink: 0;
}

.nexstackvm-panel-user .user-vps-card-meta .status-pill {
  font-size: 0.68rem;
  padding: 0.22rem 0.5rem;
}

.nexstackvm-panel-user .user-vps-ip {
  font-size: 0.76rem;
  background: #f1f5f9;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  color: #334155;
}

.nexstackvm-panel-user .user-vps-metrics {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
  padding: 1rem 0.9rem;
  min-height: 7.5rem;
}

.nexstackvm-panel-user .user-metric {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
}

.nexstackvm-panel-user .user-metric-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.3rem;
  font-size: 0.76rem;
}

.nexstackvm-panel-user .user-metric-head span {
  color: #475569;
  font-weight: 600;
}

.nexstackvm-panel-user .user-metric-head strong {
  color: #0f172a;
  font-size: 0.8rem;
}

.nexstackvm-panel-user .user-metric-track {
  height: 10px;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
}

.nexstackvm-panel-user .user-metric-track span {
  display: block;
  height: 100%;
  border-radius: 999px;
  transition: width 0.35s ease;
}

.nexstackvm-panel-user .user-metric small {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.72rem;
  color: #64748b;
  line-height: 1.25;
}

.nexstackvm-panel-user .user-metric-cpu span { background: linear-gradient(90deg, #ea580c, #f97316); }
.nexstackvm-panel-user .user-metric-ram span { background: linear-gradient(90deg, #6366f1, #818cf8); }
.nexstackvm-panel-user .user-metric-disk span { background: linear-gradient(90deg, #0d9488, #14b8a6); }
.nexstackvm-panel-user .user-metric-bw span { background: linear-gradient(90deg, #2563eb, #38bdf8); }

.nexstackvm-panel-user .user-vps-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 0.9rem;
  border-top: 1px solid #eef2f7;
  background: #f8fafc;
}

.nexstackvm-panel-user .user-vps-card-foot .btn-sm {
  padding: 0.4rem 0.75rem;
  font-size: 0.78rem;
  line-height: 1.25;
}

.nexstackvm-panel-user .user-dash-side {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.nexstackvm-panel-user .user-dash-side-card {
  padding-bottom: 0.5rem;
}

.nexstackvm-panel-user .user-dash-side-card h4 {
  margin-bottom: 0.75rem;
}

@media (max-width: 1100px) {
  .nexstackvm-panel-user .user-dash-layout {
    grid-template-columns: 1fr;
  }

  .nexstackvm-panel-user .user-dash-side {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }

  .nexstackvm-panel-user .user-vps-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .nexstackvm-panel-user .user-dash-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nexstackvm-panel-user .user-dash-section-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .nexstackvm-panel-user .user-vps-grid {
    grid-template-columns: 1fr;
  }
}

/* ── VPS manage (Virtualizor-style full page) ── */
.nexstackvm-vps-manage {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.nexstackvm-vps-crumb {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.84rem;
  color: #64748b;
}

.nexstackvm-vps-crumb a {
  color: var(--nexstackvm-navy-accent);
  text-decoration: none;
}

.nexstackvm-vps-crumb strong {
  color: var(--nexstackvm-navy-blue);
}

.nexstackvm-vps-hero {
  padding: 1.15rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border: 1px solid var(--nexstackvm-navy-border-soft);
  background: linear-gradient(135deg, #ffffff 0%, #f8fbff 55%, #eef4ff 100%);
}

.nexstackvm-vps-hero-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  flex: 1 1 420px;
}

.nexstackvm-vps-hero-title {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.nexstackvm-vps-hero-title h2 {
  margin: 0;
  font-size: 1.35rem;
  color: var(--nexstackvm-navy-blue);
}

.nexstackvm-vps-status-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #94a3b8;
  box-shadow: 0 0 0 4px rgba(148, 163, 184, 0.2);
  flex-shrink: 0;
}

.nexstackvm-vps-status-dot.is-on {
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.22);
}

.nexstackvm-vps-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: #64748b;
  margin-top: 0.2rem;
}

.nexstackvm-vps-hero-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.nexstackvm-vps-os-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1d4ed8;
}

.nexstackvm-vps-powerbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.nexstackvm-vps-powerbar form {
  margin: 0;
}

.nexstackvm-vps-powerbtn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: none;
  border-radius: 10px;
  padding: 0.55rem 0.9rem;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s;
}

.nexstackvm-vps-powerbtn:hover {
  transform: translateY(-1px);
}

.nexstackvm-vps-powerbtn--start {
  background: linear-gradient(135deg, #16a34a, #15803d);
  color: #fff;
  box-shadow: 0 8px 18px rgba(22, 163, 74, 0.28);
}

.nexstackvm-vps-powerbtn--stop {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff;
  box-shadow: 0 8px 18px rgba(239, 68, 68, 0.25);
}

.nexstackvm-vps-powerbtn--reboot {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  box-shadow: 0 8px 18px rgba(245, 158, 11, 0.25);
}

.nexstackvm-vps-powerbtn--ghost {
  background: #fff;
  color: #334155;
  border: 1px solid #cbd5e1;
}

.nexstackvm-vps-live-banner {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.85rem 1rem;
  background: #fffbeb;
  border-color: #fde68a;
  color: #92400e;
}

.nexstackvm-vps-live-banner i {
  font-size: 1.2rem;
  margin-top: 0.1rem;
}

.nexstackvm-vps-live-banner p {
  margin: 0.2rem 0 0;
  font-size: 0.84rem;
}

.nexstackvm-vps-stat-grid {
  margin: 0;
}

.nexstackvm-vps-manage-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 1rem;
  align-items: start;
}

.nexstackvm-vps-manage-side {
  position: sticky;
  top: 1rem;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.nexstackvm-vps-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  align-items: stretch;
}

.nexstackvm-vps-section-card--full {
  grid-column: 1 / -1;
}

.nexstackvm-vps-log-card .nexstackvm-vps-log-body {
  padding: 0.85rem 1rem 1rem;
}

.nexstackvm-vps-log-empty {
  margin: 0;
  color: var(--muted, #64748b);
  font-size: 0.92rem;
}

.nexstackvm-vps-log-table-wrap {
  overflow-x: auto;
  overflow-y: visible;
}

.nexstackvm-vps-log-table {
  width: 100%;
  min-width: 640px;
}

.nexstackvm-vps-log-table th {
  white-space: nowrap;
}

.nexstackvm-vps-log-when {
  white-space: nowrap;
  width: 11rem;
  font-variant-numeric: tabular-nums;
}

.nexstackvm-vps-log-type {
  white-space: nowrap;
  width: 9rem;
}

.nexstackvm-vps-log-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
}

.nexstackvm-vps-log-badge--danger {
  color: #991b1b;
  background: #fee2e2;
}

.nexstackvm-vps-log-badge--warn {
  color: #92400e;
  background: #fef3c7;
}

.nexstackvm-vps-log-badge--success {
  color: #166534;
  background: #dcfce7;
}

.nexstackvm-vps-log-badge--neutral {
  color: #334155;
  background: #e2e8f0;
}

.nexstackvm-vps-log-reason {
  min-width: 0;
}

.nexstackvm-vps-log-reason-main {
  line-height: 1.45;
  word-break: break-word;
}

.nexstackvm-vps-log-file {
  min-width: 12rem;
  max-width: 28rem;
}

.nexstackvm-vps-log-file-path {
  display: inline;
  font-size: 0.84rem;
  word-break: break-all;
  line-height: 1.4;
}

.nexstackvm-vps-log-file-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nexstackvm-vps-log-file-list li + li {
  margin-top: 0.35rem;
}

.nexstackvm-vps-log-file-empty {
  color: var(--muted, #64748b);
}

.nexstackvm-vps-log-offenders {
  margin: 0.45rem 0 0;
  padding-left: 1rem;
  color: var(--muted, #64748b);
  font-size: 0.84rem;
}

.nexstackvm-vps-log-offenders li + li {
  margin-top: 0.2rem;
}

.nexstackvm-vps-log-offenders code {
  font-size: 0.82rem;
  word-break: break-all;
}

.nexstackvm-vps-log-offender-meta {
  margin-left: 0.35rem;
}

.nexstackvm-auto-suspend-sheet {
  position: relative;
  max-width: 520px;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid rgba(251, 191, 36, 0.35);
  box-shadow:
    0 24px 48px rgba(15, 23, 42, 0.18),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}

.nexstackvm-auto-suspend-accent {
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, #f59e0b 0%, #ef4444 52%, #dc2626 100%);
}

.nexstackvm-auto-suspend-head {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.35rem 1.35rem 0.85rem;
}

.nexstackvm-auto-suspend-icon-wrap {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
  background: linear-gradient(145deg, #f59e0b 0%, #dc2626 100%);
  box-shadow: 0 10px 24px rgba(220, 38, 38, 0.28);
  font-size: 1.45rem;
}

.nexstackvm-auto-suspend-icon-pulse {
  position: absolute;
  inset: -6px;
  border-radius: 20px;
  border: 2px solid rgba(245, 158, 11, 0.45);
  animation: nexstackvm-auto-suspend-pulse 2s ease-out infinite;
}

@keyframes nexstackvm-auto-suspend-pulse {
  0% {
    transform: scale(0.92);
    opacity: 0.85;
  }
  100% {
    transform: scale(1.12);
    opacity: 0;
  }
}

.nexstackvm-auto-suspend-head-copy {
  min-width: 0;
}

.nexstackvm-auto-suspend-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #92400e;
  background: #fef3c7;
}

.nexstackvm-auto-suspend-head-copy h4 {
  margin: 0.45rem 0 0;
  font-size: 1.2rem;
  line-height: 1.25;
  color: #0f172a;
}

.nexstackvm-auto-suspend-sub {
  margin: 0.35rem 0 0;
  font-size: 0.88rem;
  line-height: 1.45;
  color: #64748b;
}

.nexstackvm-auto-suspend-reason-card {
  margin: 0 1.35rem 1rem;
  padding: 0.85rem 1rem;
  border-radius: 14px;
  border: 1px solid #fecaca;
  background: linear-gradient(180deg, #fff7ed 0%, #fff1f2 100%);
}

.nexstackvm-auto-suspend-reason-label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #b45309;
}

.nexstackvm-auto-suspend-reason-card p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: #7f1d1d;
  word-break: break-word;
}

.nexstackvm-auto-suspend-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem 1rem;
  margin: 0 1.35rem 1rem;
  padding: 1rem 1.05rem;
  border-radius: 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

.nexstackvm-auto-suspend-facts-wide {
  grid-column: 1 / -1;
}

.nexstackvm-auto-suspend-facts dt {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
}

.nexstackvm-auto-suspend-facts dd {
  margin: 0.15rem 0 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: #0f172a;
  word-break: break-word;
}

.nexstackvm-auto-suspend-facts dd code {
  font-size: 0.84rem;
  font-weight: 500;
  word-break: break-all;
}

.nexstackvm-auto-suspend-foot {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 0 1.35rem 1.35rem;
}

.nexstackvm-auto-suspend-foot-note {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: #64748b;
}

.nexstackvm-auto-suspend-foot-note i {
  margin-top: 0.1rem;
  flex-shrink: 0;
}

.nexstackvm-auto-suspend-reload-btn {
  width: 100%;
  justify-content: center;
  gap: 0.45rem;
}

#vpsStatusChangeModal.provision-visible .provision-sheet {
  transform: translateY(0);
  opacity: 1;
}

@media (max-width: 560px) {
  .nexstackvm-auto-suspend-facts {
    grid-template-columns: 1fr;
  }

  .nexstackvm-auto-suspend-head {
    flex-direction: column;
  }
}

.nexstackvm-vps-section-card {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.nexstackvm-vps-usage-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0.85rem 1rem 1rem;
}

.nexstackvm-vps-gauge-grid {
  flex: 1;
  gap: 0.75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  min-height: 100%;
}

.nexstackvm-vps-gauge-grid .usage-tile {
  min-height: 188px;
  height: 100%;
  padding: 0.85rem 0.75rem;
}

.nexstackvm-vps-gauge-grid .usage-ring {
  width: 104px;
  height: 104px;
}

.nexstackvm-vps-gauge-grid .usage-ring::before {
  inset: 12px;
}

.nexstackvm-vps-gauge-grid .usage-ring-inner strong {
  font-size: 1.1rem;
}

.nexstackvm-vps-gauge-grid .usage-ring-inner span {
  font-size: 0.62rem;
}

.nexstackvm-vps-gauge-grid .usage-detail {
  font-size: 0.68rem;
  line-height: 1.35;
}

.nexstackvm-vps-gauge-grid .usage-badge {
  max-width: 9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nexstackvm-vps-section-head {
  padding: 0.65rem 1rem;
  font-size: 0.88rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #1e40af, #1d4ed8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.nexstackvm-vps-log-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.nexstackvm-vps-log-clear-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}

.nexstackvm-vps-log-clear-btn:hover {
  background: rgba(255, 255, 255, 0.22);
}

.nexstackvm-vps-log-actions-col {
  width: 4rem;
  text-align: center;
  white-space: nowrap;
}

.nexstackvm-vps-log-delete-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
}

.nexstackvm-vps-log-delete-btn:hover {
  background: #fee2e2;
}

.nexstackvm-vps-log-delete-target {
  margin: 0;
  padding: 0.75rem 0.85rem;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  font-size: 0.9rem;
  color: #0f172a;
}

.nexstackvm-vps-log-clear-host {
  margin: 0 0 0.75rem;
  font-size: 0.92rem;
  color: #334155;
}

/* Activity log action modals (delete / clear all) */
.nexstackvm-log-action-sheet {
  position: relative;
  width: min(500px, calc(100vw - 1.5rem));
  max-height: min(90vh, 680px);
  border-radius: 20px;
  border: 1px solid rgba(248, 113, 113, 0.28);
  box-shadow:
    0 24px 48px rgba(15, 23, 42, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.06) inset;
  overflow: hidden;
}

.nexstackvm-log-action-accent {
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  z-index: 2;
}

.nexstackvm-log-action-accent--danger {
  background: linear-gradient(90deg, #f87171 0%, #ef4444 50%, #dc2626 100%);
}

.nexstackvm-log-action-head {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 1.35rem 1.5rem 1rem;
  border-bottom: 1px solid #e2e8f0;
  background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
}

.nexstackvm-log-action-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.25rem;
  color: #fff;
  box-shadow: 0 8px 20px rgba(220, 38, 38, 0.22);
}

.nexstackvm-log-action-icon--danger {
  background: linear-gradient(145deg, #f87171 0%, #dc2626 100%);
}

.nexstackvm-log-action-head-copy {
  flex: 1;
  min-width: 0;
  padding-right: 0.25rem;
}

.nexstackvm-log-action-close {
  margin-top: -0.15rem;
}

.nexstackvm-log-action-eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #991b1b;
  background: #fee2e2;
}

.nexstackvm-log-action-head-copy h4 {
  margin: 0.45rem 0 0;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.25;
  color: #0f172a;
  letter-spacing: -0.02em;
}

.nexstackvm-log-action-sub {
  margin: 0.35rem 0 0;
  font-size: 0.86rem;
  line-height: 1.45;
  color: #64748b;
}

.nexstackvm-log-action-body {
  padding: 1.15rem 1.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow-y: auto;
}

.nexstackvm-log-action-target-card {
  padding: 0.85rem 1rem;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
}

.nexstackvm-log-action-target-label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
}

.nexstackvm-log-action-target-value {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.45;
  color: #0f172a;
  word-break: break-word;
}

.nexstackvm-log-action-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem 1rem;
  margin: 0;
  padding: 1rem 1.05rem;
  border-radius: 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

.nexstackvm-log-action-facts-wide {
  grid-column: 1 / -1;
}

.nexstackvm-log-action-facts dt {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
}

.nexstackvm-log-action-facts dd {
  margin: 0.12rem 0 0;
  font-size: 0.88rem;
  font-weight: 600;
  color: #0f172a;
  word-break: break-word;
}

.nexstackvm-log-action-facts dd code {
  font-size: 0.84rem;
  font-weight: 600;
}

.nexstackvm-log-action-confirm-block {
  padding: 1rem 1.05rem;
  border-radius: 14px;
  border: 1px solid #fecaca;
  background: linear-gradient(180deg, #fff7ed 0%, #fff1f2 100%);
}

.nexstackvm-log-action-confirm-lead {
  margin: 0 0 0.65rem;
  font-size: 0.84rem;
  line-height: 1.45;
  color: #475569;
}

.nexstackvm-log-action-confirm-token {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 0.85rem;
  padding: 0.7rem 0.85rem;
  border-radius: 12px;
  border: 1px solid #fca5a5;
  background: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #991b1b;
  text-align: center;
}

.nexstackvm-log-action-field {
  display: block;
}

.nexstackvm-log-action-field span {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: #475569;
}

.nexstackvm-log-action-field input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.68rem 0.85rem;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  font-size: 0.92rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color: #0f172a;
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.nexstackvm-log-action-field input:focus {
  outline: none;
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

.nexstackvm-log-action-foot {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.65rem;
  padding: 1rem 1.5rem 1.35rem;
  border-top: 1px solid #e2e8f0;
  background: rgba(248, 250, 252, 0.9);
}

.nexstackvm-log-action-danger-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

#vpsLogDeleteModal .nexstackvm-sheet-errors,
#vpsLogClearAllModal .nexstackvm-sheet-errors {
  margin: 0;
}

@media (max-width: 520px) {
  .nexstackvm-log-action-head {
    padding: 1.15rem 1.15rem 0.9rem;
  }

  .nexstackvm-log-action-body {
    padding: 1rem 1.15rem 1.1rem;
  }

  .nexstackvm-log-action-foot {
    padding: 0.9rem 1.15rem 1.15rem;
  }

  .nexstackvm-log-action-facts {
    grid-template-columns: 1fr;
  }
}

.nexstackvm-vps-log-more-wrap {
  display: flex;
  justify-content: center;
  padding: 0.85rem 0 0.25rem;
}

.nexstackvm-vps-log-more-wrap[hidden] {
  display: none !important;
}

.nexstackvm-vps-log-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 9rem;
  justify-content: center;
}

.nexstackvm-vps-log-more-btn.is-loading {
  opacity: 0.7;
  pointer-events: none;
}

.nexstackvm-vps-section-body {
  padding: 1rem 1.05rem;
}

.nexstackvm-vps-action-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.35rem;
  padding: 0.85rem;
  flex: 1;
  align-content: start;
}

.nexstackvm-vps-action-tile {
  margin: 0;
}

.nexstackvm-vps-action-form {
  width: 100%;
  margin: 0;
}

.nexstackvm-vps-action-tile button,
.nexstackvm-vps-action-tile .nexstackvm-vps-action-form button {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 5.5rem;
  padding: 0.65rem 0.4rem;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #64748b;
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.nexstackvm-vps-action-tile button i,
.nexstackvm-vps-action-tile .nexstackvm-vps-action-form button i {
  font-size: 1.65rem;
  line-height: 1;
}

.nexstackvm-vps-action-tile--power button i { color: #ef4444; }
.nexstackvm-vps-action-tile--power button[data-action="start"] i,
.nexstackvm-vps-action-tile--unsuspend button i { color: #22c55e; }
.nexstackvm-vps-action-tile--restart button i { color: #f97316; }
.nexstackvm-vps-action-tile--suspend button i { color: #eab308; }
.nexstackvm-vps-action-tile--backup button i { color: #8b5cf6; }
.nexstackvm-vps-action-tile--snapshot button i { color: #6366f1; }
.nexstackvm-vps-action-tile--password button i { color: #0ea5e9; }
.nexstackvm-vps-action-tile--reinstall button i { color: #f43f5e; }
.nexstackvm-vps-action-tile--rescue button i { color: #fb923c; }
.nexstackvm-vps-action-tile--network button i { color: #06b6d4; }
.nexstackvm-vps-action-tile--bandwidth button i { color: #ec4899; }
.nexstackvm-vps-action-tile--vnc button i { color: #64748b; }
.nexstackvm-vps-action-tile--ssh button i { color: #14b8a6; }

.nexstackvm-vps-action-tile:not(.is-disabled) button:hover {
  background: #f8fafc;
}

.nexstackvm-vps-action-tile.is-disabled button {
  color: #94a3b8;
  cursor: not-allowed;
}

.nexstackvm-vps-action-tile.is-disabled button i {
  color: #cbd5e1;
}

.nexstackvm-vps-meter-grid {
  display: grid;
  gap: 0.85rem;
  margin-bottom: 1rem;
}

.nexstackvm-vps-meter-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
  margin-bottom: 0.35rem;
}

.nexstackvm-vps-meter-track {
  height: 8px;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
}

.nexstackvm-vps-meter-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2563eb, #0ea5e9);
}

.nexstackvm-vps-info-table-wrap {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  overflow: hidden;
}

.nexstackvm-vps-info-table th {
  width: 34%;
  font-weight: 600;
  color: #475569;
  background: #f8fafc;
}

.nexstackvm-vps-info-table td,
.nexstackvm-vps-info-table th {
  padding: 0.65rem 0.85rem;
  font-size: 0.84rem;
  vertical-align: middle;
}

.nexstackvm-vps-code-block {
  word-break: break-all;
  font-size: 0.78rem;
}

.nexstackvm-vps-coming-soon {
  display: grid;
  gap: 0.65rem;
  margin-top: 1rem;
}

.nexstackvm-vps-coming-soon > div {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.15rem 0.65rem;
  align-items: center;
  padding: 0.75rem 0.85rem;
  border-radius: 10px;
  border: 1px dashed #cbd5e1;
  background: #f8fafc;
  font-size: 0.82rem;
}

.nexstackvm-vps-coming-soon i {
  grid-row: span 2;
  font-size: 1.2rem;
  color: #64748b;
}

.nexstackvm-vps-coming-soon span {
  grid-column: 2;
  color: #64748b;
  font-size: 0.78rem;
}

.nexstackvm-vps-power-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.nexstackvm-vps-power-grid form {
  margin: 0;
}

.nexstackvm-vps-danger-zone {
  margin-top: 1.25rem;
  padding: 0.9rem 1rem;
  border-radius: 10px;
  border: 1px solid #fecaca;
  background: #fef2f2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.nexstackvm-vps-danger-zone p {
  margin: 0.25rem 0 0;
  font-size: 0.8rem;
}

.nexstackvm-vps-danger-btn {
  border-color: #fca5a5 !important;
  color: #b91c1c !important;
}

.nexstackvm-vps-option-list {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: grid;
  gap: 0.65rem;
}

.nexstackvm-vps-advanced-card {
  overflow: hidden;
}

.nexstackvm-vps-advanced-shell {
  display: flex;
  flex-direction: column;
}

.nexstackvm-vps-network-shell {
  display: flex;
  flex-direction: column;
}

.nexstackvm-network-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.nexstackvm-network-empty-hint {
  margin: 0.75rem 0 0;
}

.nexstackvm-checkbox-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: #334155;
}

.nexstackvm-checkbox-inline input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
}

.nexstackvm-ip-pick-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 0.85rem;
  align-items: center;
}

.nexstackvm-ip-pick-col label {
  display: block;
  margin-bottom: 0.35rem;
  font-weight: 600;
  color: #334155;
}

.nexstackvm-ip-pick-select {
  width: 100%;
  min-height: 14rem;
  border: 1px solid #cbd5e1;
  border-radius: 0.75rem;
  padding: 0.35rem;
  background: #fff;
}

.nexstackvm-ip-pick-controls {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.nexstackvm-ip-pick-controls .btn {
  min-width: 2.4rem;
  padding: 0.45rem 0.55rem;
}

.nexstackvm-adv-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  overflow-x: auto;
  border-bottom: 1px solid #dbeafe;
  background: #fff;
}

.nexstackvm-adv-tab {
  flex: 0 0 auto;
  border: none;
  background: transparent;
  padding: 0.72rem 0.95rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.nexstackvm-adv-tab:hover {
  color: #334155;
}

.nexstackvm-adv-tab.is-active {
  color: #2563eb;
  border-bottom-color: #2563eb;
}

.nexstackvm-adv-panel {
  padding: 0.85rem 1rem 0.35rem;
}

.nexstackvm-adv-panel[hidden] {
  display: none !important;
}

.nexstackvm-adv-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(8.5rem, 12rem);
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid #f1f5f9;
}

.nexstackvm-adv-row:last-child {
  border-bottom: none;
}

.nexstackvm-adv-row--boot {
  align-items: start;
}

.nexstackvm-adv-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: #334155;
}

.nexstackvm-adv-label i {
  color: #2563eb;
  font-size: 0.9rem;
}

.nexstackvm-adv-row input[type="text"],
.nexstackvm-adv-row input[type="number"],
.nexstackvm-adv-row select,
.nexstackvm-adv-boot-select {
  width: 100%;
  padding: 0.45rem 0.6rem;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 0.8rem;
  background: #fff;
}

.nexstackvm-adv-row input:disabled,
.nexstackvm-adv-row select:disabled {
  background: #f8fafc;
  color: #475569;
}

.nexstackvm-adv-boot-select {
  min-height: 4.8rem;
}

.nexstackvm-adv-input-unit {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: stretch;
}

.nexstackvm-adv-input-unit span {
  display: inline-flex;
  align-items: center;
  padding: 0 0.55rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: #64748b;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-left: none;
  border-radius: 0 6px 6px 0;
}

.nexstackvm-adv-input-unit input {
  border-radius: 6px 0 0 6px;
}

.nexstackvm-adv-inline-group {
  display: grid;
  gap: 0.45rem;
}

.nexstackvm-adv-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  font-size: 0.78rem;
  color: #475569;
}

.nexstackvm-adv-radio-group label {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.nexstackvm-adv-footnote {
  margin: 0;
  padding: 0.55rem 1rem 0.85rem;
  font-size: 0.72rem;
  border-top: 1px solid #f1f5f9;
}

@media (max-width: 900px) {
  .nexstackvm-adv-row {
    grid-template-columns: 1fr;
  }
}

.nexstackvm-vps-option-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
}

.nexstackvm-vps-option-list li strong {
  display: block;
  font-size: 0.82rem;
  color: #1e293b;
  margin-bottom: 0.15rem;
}

.nexstackvm-vps-option-list li span {
  font-size: 0.74rem;
  color: #64748b;
}

.nexstackvm-vps-option-state {
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}

.nexstackvm-vps-option-state.muted {
  background: #f1f5f9;
  color: #64748b;
  border-color: #e2e8f0;
}

.nexstackvm-vps-edit-form {
  display: grid;
  gap: 0.85rem;
}

.nexstackvm-vps-edit-form label,
.nexstackvm-vps-edit-form .nexstackvm-vps-edit-row {
  display: grid;
  gap: 0.35rem;
  margin: 0;
}

.nexstackvm-vps-edit-form label span,
.nexstackvm-vps-edit-form .nexstackvm-vps-edit-row span {
  font-size: 0.78rem;
  font-weight: 600;
  color: #475569;
}

.nexstackvm-vps-edit-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 12rem;
  align-items: stretch;
  gap: 0.65rem;
}

.nexstackvm-vps-edit-control--field-only {
  grid-template-columns: 1fr;
}

.nexstackvm-vps-edit-control input,
.nexstackvm-vps-edit-control select {
  width: 100%;
  min-width: 0;
  min-height: 2.35rem;
}

.nexstackvm-vps-edit-field-wrap {
  position: relative;
  min-width: 0;
}

.nexstackvm-vps-edit-field-wrap input {
  width: 100%;
}

.nexstackvm-vps-edit-field-wrap.has-status input {
  padding-right: 5.25rem;
}

.nexstackvm-vps-edit-status {
  position: absolute;
  top: 50%;
  right: 0.55rem;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.2;
  pointer-events: none;
}

.nexstackvm-vps-edit-status--pending {
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #fde68a;
}

.nexstackvm-vps-edit-action {
  width: 100%;
  min-height: 2.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  white-space: nowrap;
  padding-left: 0.55rem;
  padding-right: 0.55rem;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  color: #0f172a;
  font-size: 0.8125rem;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  transition: background 0.15s ease, border-color 0.15s ease;
}

.nexstackvm-vps-edit-action i {
  font-size: 0.95rem;
  line-height: 1;
}

.nexstackvm-vps-edit-action:hover {
  background: #f8fafc;
  border-color: #94a3b8;
}

.nexstackvm-vps-edit-action--hostname {
  border-color: #bae6fd;
  background: #f0f9ff;
  color: #0284c7;
}

.nexstackvm-vps-edit-action--hostname:hover {
  background: #e0f2fe;
  border-color: #7dd3fc;
}

.nexstackvm-vps-edit-action--hostname-cancel {
  border-color: #fecaca;
  background: #fef2f2;
  color: #dc2626;
}

.nexstackvm-vps-edit-action--hostname-cancel:hover {
  background: #fee2e2;
  border-color: #fca5a5;
}

.nexstackvm-vps-edit-action--customer {
  border-color: #99f6e4;
  background: #f0fdfa;
  color: #0f766e;
}

.nexstackvm-vps-edit-action--customer:hover {
  background: #ccfbf1;
  border-color: #5eead4;
}

.nexstackvm-vps-edit-action--plan {
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #1e40af;
}

.nexstackvm-vps-edit-action--plan:hover {
  background: #dbeafe;
  border-color: #93c5fd;
}

.nexstackvm-vps-edit-action--plan-cancel {
  border-color: #fecaca;
  background: #fef2f2;
  color: #dc2626;
}

.nexstackvm-vps-edit-action--plan-cancel:hover {
  background: #fee2e2;
  border-color: #fca5a5;
}

.nexstackvm-vps-edit-action--template {
  border-color: #fecaca;
  background: #fff1f2;
  color: #e11d48;
}

.nexstackvm-vps-edit-action--template:hover {
  background: #ffe4e6;
  border-color: #fca5a5;
}

.nexstackvm-vps-edit-action--vmid {
  border-color: #ddd6fe;
  background: #f5f3ff;
  color: #4f46e5;
}

.nexstackvm-vps-edit-action--vmid:hover {
  background: #ede9fe;
  border-color: #c4b5fd;
}

.nexstackvm-vps-edit-action--label {
  border-color: #fde68a;
  background: #fffbeb;
  color: #b45309;
}

.nexstackvm-vps-edit-action--label:hover {
  background: #fef3c7;
  border-color: #fcd34d;
}

#vpsTransferOwnershipModal .nexstackvm-sheet-body {
  padding: 0;
}

#vpsTransferOwnershipModal .nexstackvm-sheet-form.form-grid {
  padding: 1.15rem 1.4rem 0.35rem;
}

#vpsTransferOwnershipModal .nexstackvm-sheet-errors {
  margin: 1rem 1.4rem 0;
}

#vpsTransferOwnershipModal .nexstackvm-field-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
  color: #334155;
}

#vpsChangeHostnameModal .nexstackvm-sheet-body {
  padding: 0;
}

#vpsChangeHostnameModal .nexstackvm-sheet-form.form-grid {
  padding: 1.15rem 1.4rem 0.35rem;
}

#vpsChangeHostnameModal .nexstackvm-sheet-errors {
  margin: 1rem 1.4rem 0;
}

#vpsChangePasswordModal .nexstackvm-sheet-body {
  padding: 0;
}

#vpsChangePasswordModal .nexstackvm-sheet-form.form-grid {
  padding: 1.15rem 1.4rem 0.35rem;
}

#vpsChangePasswordModal .nexstackvm-sheet-errors {
  margin: 1rem 1.4rem 0;
}

.nexstackvm-autofill-trap {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.nexstackvm-bank-secret-form {
  position: relative;
}

.nexstackvm-bank-secret-input {
  -webkit-text-security: disc;
  text-security: disc;
  font-family: inherit;
}

.nexstackvm-bank-secret-input.is-revealed {
  -webkit-text-security: none;
  text-security: none;
}

#vpsChangeLabelModal .nexstackvm-sheet-body {
  padding: 0;
}

#vpsChangeLabelModal .nexstackvm-sheet-form.form-grid {
  padding: 1.15rem 1.4rem 0.35rem;
}

#vpsChangeLabelModal .nexstackvm-sheet-errors {
  margin: 1rem 1.4rem 0;
}

.nexstackvm-plan-change-sheet {
  width: min(1120px, calc(100vw - 2rem));
  max-height: min(92vh, 960px);
}

#vpsChangePlanModal .nexstackvm-sheet-head {
  padding: 1rem 1.4rem 0.75rem;
}

#vpsChangePlanModal .nexstackvm-sheet-head h4 {
  font-size: 1.05rem;
}

#vpsChangePlanModal .nexstackvm-sheet-sub {
  margin-top: 0.2rem;
  font-size: 0.78rem;
}

.nexstackvm-plan-change-sheet .nexstackvm-sheet-body {
  padding: 0;
  overflow-y: auto;
}

#vpsChangePlanModal .nexstackvm-sheet-errors,
#vpsChangePlanModal .nexstackvm-plan-change-modal-alert {
  margin: 0.65rem 1.4rem 0;
}

.nexstackvm-plan-change-modal-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid #fde68a;
  border-radius: 8px;
  background: #fffbeb;
  color: #92400e;
  font-size: 0.78rem;
  line-height: 1.4;
}

.nexstackvm-plan-change-modal-alert i {
  flex: 0 0 auto;
  margin-top: 0.05rem;
  font-size: 0.9rem;
}

.nexstackvm-plan-change-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(200px, 240px) minmax(0, 1fr);
  gap: 0.75rem;
  padding: 0.65rem 1.4rem 0;
  align-items: stretch;
}

.nexstackvm-plan-change-col:not(.nexstackvm-plan-change-col--select) {
  display: flex;
  min-width: 0;
}

.nexstackvm-plan-change-col--select {
  display: flex;
  align-items: flex-start;
  padding-top: 0.1rem;
}

.nexstackvm-plan-change-select-field {
  display: grid;
  gap: 0.28rem;
  width: 100%;
  margin: 0;
}

.nexstackvm-plan-change-select-field span {
  font-size: 0.72rem;
  font-weight: 600;
  color: #475569;
}

.nexstackvm-plan-change-select-field select {
  width: 100%;
  min-height: 2rem;
  padding: 0.38rem 0.55rem;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 0.78rem;
  background: #fff;
}

.nexstackvm-plan-change-select-hint {
  margin: 0.35rem 0 0;
  font-size: 0.72rem;
  line-height: 1.45;
}

.nexstackvm-plan-change-card {
  flex: 1;
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 0.6rem 0.7rem;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  display: flex;
  flex-direction: column;
}

.nexstackvm-plan-change-card--current {
  border-color: #bfdbfe;
  background: linear-gradient(180deg, #ffffff, #eff6ff);
}

.nexstackvm-plan-change-card--preview {
  border-color: #cbd5e1;
}

.nexstackvm-plan-change-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  margin-bottom: 0.4rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid rgba(226, 232, 240, 0.9);
}

.nexstackvm-plan-change-card--current .nexstackvm-plan-change-card-head {
  border-bottom-color: rgba(191, 219, 254, 0.9);
}

.nexstackvm-plan-change-card-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
  white-space: nowrap;
}

.nexstackvm-plan-change-card-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--nexstackvm-navy-blue);
  text-align: right;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nexstackvm-plan-change-card--preview .nexstackvm-plan-change-card-name.is-empty {
  color: #94a3b8;
  font-weight: 600;
}

.nexstackvm-plan-change-card-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.08rem 0.38rem;
  border-radius: 999px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #1d4ed8;
  background: #dbeafe;
  border: 1px solid #bfdbfe;
}

.nexstackvm-plan-change-card-badge--preview {
  color: #475569;
  background: #f1f5f9;
  border-color: #e2e8f0;
}

.nexstackvm-plan-change-metrics {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.22rem;
}

.nexstackvm-plan-change-metrics li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.76rem;
  line-height: 1.3;
}

.nexstackvm-plan-change-metrics li span {
  color: #64748b;
}

.nexstackvm-plan-change-metrics li strong {
  color: #0f172a;
  text-align: right;
  font-size: 0.76rem;
  font-weight: 600;
}

.nexstackvm-plan-change-metrics li strong.is-placeholder {
  color: #94a3b8;
  font-weight: 500;
}

.nexstackvm-plan-change-diff strong {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: wrap;
  justify-content: flex-end;
  font-size: 0.76rem;
  font-weight: 600;
}

.nexstackvm-plan-change-diff li.is-up strong .nexstackvm-plan-diff-new {
  color: #15803d;
}

.nexstackvm-plan-change-diff li.is-down strong .nexstackvm-plan-diff-new {
  color: #dc2626;
}

.nexstackvm-plan-change-diff li.is-same strong .nexstackvm-plan-diff-new {
  color: #64748b;
}

.nexstackvm-plan-change-diff .nexstackvm-plan-diff-old {
  color: #64748b;
}

.nexstackvm-plan-change-diff strong i {
  font-size: 0.72rem;
}

.nexstackvm-plan-change-history {
  margin-top: 0.85rem;
  padding: 0 1.4rem 1rem;
}

.nexstackvm-plan-change-history-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.nexstackvm-plan-change-history-head h5 {
  margin: 0;
  font-size: 0.95rem;
  color: var(--nexstackvm-navy-blue);
}

.nexstackvm-plan-change-history-empty {
  margin: 0;
}

#vpsChangePlanModal .nexstackvm-sheet-foot {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin: 0;
  padding: 0.95rem 1.4rem 1.15rem;
  border-top: 1px solid #e2e8f0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), #ffffff);
  backdrop-filter: blur(6px);
}

@media (max-width: 980px) {
  .nexstackvm-plan-change-layout {
    grid-template-columns: 1fr;
  }

  .nexstackvm-plan-change-col--select {
    align-items: stretch;
  }
}

.nexstackvm-input-warning {
  color: #b45309;
  background: #fffbeb;
  border-color: #fcd34d;
}

.confirm-sheet-wide {
  width: min(520px, calc(100vw - 2rem));
}

.confirm-sheet.confirm-sheet-ack {
  width: min(380px, calc(100vw - 2rem));
  padding: 1.35rem 1.25rem 1.1rem;
}

.confirm-sheet.confirm-sheet-ack .confirm-icon-wrap {
  width: 58px;
  height: 58px;
  margin-bottom: 0.75rem;
  border-radius: 18px;
}

.confirm-sheet.confirm-sheet-ack .confirm-title {
  font-size: 1.05rem;
}

.confirm-sheet.confirm-sheet-ack .confirm-message {
  font-size: 0.84rem;
  line-height: 1.5;
}

.confirm-sheet.confirm-sheet-ack .confirm-actions {
  justify-content: center;
}

.confirm-sheet.confirm-sheet-ack .confirm-btn {
  min-width: 6.5rem;
}

.confirm-details-wrap {
  margin: 0 0 1rem;
  text-align: left;
}

.confirm-details {
  display: grid;
  gap: 0.65rem;
}

.confirm-details-row {
  padding: 0.75rem 0.85rem;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
}

.confirm-details-row.is-pending {
  border-color: #fde68a;
  background: #fffbeb;
}

.confirm-details-row.is-restore {
  border-color: #bbf7d0;
  background: #f0fdf4;
}

.confirm-details-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  margin-bottom: 0.35rem;
}

.confirm-details-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #64748b;
}

.confirm-details-label i {
  font-size: 0.95rem;
  color: #94a3b8;
}

.confirm-details-value {
  font-size: 0.92rem;
  font-weight: 600;
  color: #0f172a;
  word-break: break-word;
}

.confirm-details-value.is-muted {
  color: #b45309;
}

.confirm-details-note {
  margin: 0.35rem 0 0;
  font-size: 0.76rem;
  line-height: 1.45;
  color: #64748b;
}

.confirm-details-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.2;
  white-space: nowrap;
}

.confirm-details-badge--current {
  color: #0369a1;
  background: #e0f2fe;
  border: 1px solid #bae6fd;
}

.confirm-details-badge--pending {
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #fde68a;
}

.confirm-details-badge--restore {
  color: #166534;
  background: #dcfce7;
  border: 1px solid #bbf7d0;
}

#nexstackvmConfirmModal .confirm-message.confirm-message-list.is-multi {
  max-width: none;
}

.nexstackvm-hostname-change-sticky .nexstackvm-plan-change-sticky-text i {
  color: #0ea5e9;
}

.nexstackvm-hostname-change-sticky .nexstackvm-plan-change-sticky-action-btn {
  border-color: #fecaca;
  background: #fef2f2;
  color: #dc2626;
}

.nexstackvm-hostname-change-sticky .nexstackvm-plan-change-sticky-action-btn:hover:not(:disabled) {
  background: #fee2e2;
  border-color: #fca5a5;
}

#vpsPlanChangeSticky .nexstackvm-plan-change-sticky-action-btn {
  border-color: #fecaca;
  background: #fef2f2;
  color: #dc2626;
}

#vpsPlanChangeSticky .nexstackvm-plan-change-sticky-action-btn:hover:not(:disabled) {
  background: #fee2e2;
  border-color: #fca5a5;
}

#vpsPlanChangeSticky .nexstackvm-plan-change-sticky-action-btn--cancel {
  border-color: #cbd5e1;
  background: #fff;
  color: #475569;
}

#vpsPlanChangeSticky .nexstackvm-plan-change-sticky-action-btn--cancel:hover:not(:disabled) {
  background: #f8fafc;
  border-color: #94a3b8;
  color: #334155;
}

.nexstackvm-vps-edit-form input,
.nexstackvm-vps-edit-form select {
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 0.84rem;
  background: #fff;
}

.nexstackvm-vps-edit-form input:disabled {
  background: #f8fafc;
  color: #64748b;
}

.nexstackvm-vps-edit-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.25rem;
  padding-top: 0.85rem;
  border-top: 1px solid #e2e8f0;
}

.nexstackvm-vps-edit-foot p {
  margin: 0;
  font-size: 0.76rem;
  max-width: 18rem;
}

.nexstackvm-vps-form-errors {
  margin-bottom: 0.85rem;
  padding: 0.75rem 0.85rem;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 10px;
  color: #991b1b;
  font-size: 0.82rem;
}

.nexstackvm-vps-form-errors ul {
  margin: 0;
  padding-left: 1.1rem;
}

.nexstackvm-provision-foot-state[hidden] {
  display: none !important;
}

.nexstackvm-provision-foot-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  text-align: center;
  width: 100%;
}

.nexstackvm-provision-foot-actions {
  display: flex;
  justify-content: center;
  width: 100%;
}

.nexstackvm-provision-foot-actions .btn {
  min-width: 120px;
}

.nexstackvm-provision-foot .provision-foot-note {
  justify-content: center;
  max-width: 36ch;
}

.nexstackvm-vps-side-card {
  padding: 1rem 1.05rem;
}

.nexstackvm-vps-side-card h4 {
  margin: 0 0 0.75rem;
  font-size: 0.92rem;
  color: var(--nexstackvm-navy-blue);
}

.nexstackvm-vps-side-block {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.84rem;
}

.nexstackvm-vps-side-block span {
  color: #64748b;
}

.nexstackvm-vps-side-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.nexstackvm-vps-side-list li {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.82rem;
}

.nexstackvm-vps-side-list span {
  color: #64748b;
}

.nexstackvm-vps-side-btn {
  width: 100%;
  margin-top: 0.85rem;
  justify-content: center;
}

.nexstackvm-vps-side-delete {
  margin-top: 0.85rem;
}

.nexstackvm-vps-side-delete-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2.35rem;
  border: 1px solid #fecaca;
  border-radius: 8px;
  background: #fef2f2;
  color: #dc2626;
  font-size: 0.8125rem;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.nexstackvm-vps-side-delete-btn:hover {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #b91c1c;
}

.nexstackvm-sheet-eyebrow--danger {
  color: #dc2626;
}

.nexstackvm-sheet-eyebrow--warning {
  color: #b45309;
}

.nexstackvm-vps-delete-type-sheet {
  width: min(460px, calc(100vw - 2rem));
}

#vpsViewDeleteTypeModal .nexstackvm-sheet-body {
  padding: 1rem 1.4rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.nexstackvm-vps-delete-type-target {
  padding: 0.85rem 0.95rem;
  border: 1px solid #fecaca;
  border-radius: 12px;
  background: #fff;
}

.nexstackvm-vps-delete-type-target-head {
  margin-bottom: 0.55rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #991b1b;
}

.nexstackvm-vps-delete-type-target-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}

.nexstackvm-vps-delete-type-target-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.84rem;
  line-height: 1.4;
}

.nexstackvm-vps-delete-type-target-list span {
  flex: 0 0 auto;
  color: #64748b;
}

.nexstackvm-vps-delete-type-target-list strong {
  min-width: 0;
  text-align: right;
  color: #0f172a;
  font-weight: 600;
  word-break: break-word;
}

.nexstackvm-vps-delete-type-target-list code {
  font-size: 0.82rem;
}

.nexstackvm-vps-delete-type-copy p {
  margin: 0 0 0.55rem;
  font-size: 0.84rem;
  line-height: 1.45;
  color: #475569;
}

.nexstackvm-vps-delete-type-token {
  display: block;
  padding: 0.65rem 0.85rem;
  border-radius: 10px;
  border: 1px solid #fecaca;
  background: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #991b1b;
  text-align: center;
}

#vpsViewDeleteTypeModal .nexstackvm-field span {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: #475569;
}

#vpsViewDeleteTypeModal .nexstackvm-field input {
  width: 100%;
  padding: 0.62rem 0.8rem;
  border: 1px solid rgba(203, 213, 225, 0.95);
  border-radius: 10px;
  font-size: 0.92rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color: #0f172a;
  background: #fff;
}

#vpsViewDeleteTypeModal .nexstackvm-field input:focus {
  outline: none;
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

#vpsViewDeleteTypeModal .nexstackvm-sheet-foot .btn-danger {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

@media (max-width: 1100px) {
  .nexstackvm-vps-manage-layout {
    grid-template-columns: 1fr;
  }

  .nexstackvm-vps-manage-side {
    position: static;
    max-height: none;
    overflow: visible;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
  }

  .nexstackvm-vps-side-delete {
    grid-column: 1 / -1;
  }
}

@media (max-width: 900px) {
  .nexstackvm-vps-cards-grid {
    grid-template-columns: 1fr;
  }

  .nexstackvm-vps-section-card--full {
    grid-column: auto;
  }
}

@media (max-width: 768px) {
  .nexstackvm-vps-action-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nexstackvm-vps-hero {
    flex-direction: column;
    align-items: stretch;
  }

  .nexstackvm-vps-powerbar {
    width: 100%;
  }

  .nexstackvm-vps-edit-control {
    grid-template-columns: 1fr;
  }

  .nexstackvm-vps-powerbtn {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* VPS backup manager sheet */
.nexstackvm-backup-sheet {
  width: min(980px, calc(100vw - 2rem));
  max-height: min(88vh, 920px);
}

.nexstackvm-backup-sheet-body {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1rem 1.4rem 1.1rem;
}

.nexstackvm-backup-highlight {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.75rem 0.95rem;
  border-radius: 10px;
  background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 100%);
  border: 1px solid #bbf7d0;
  color: #166534;
  font-size: 0.88rem;
  line-height: 1.45;
}

.nexstackvm-backup-highlight.is-hidden {
  display: none !important;
}

.nexstackvm-backup-highlight i {
  font-size: 1rem;
  margin-top: 0.08rem;
  flex-shrink: 0;
}

.nexstackvm-backup-highlight strong {
  color: #14532d;
  font-weight: 700;
}

.nexstackvm-backup-highlight--empty {
  background: linear-gradient(135deg, #eff6ff 0%, #f8fafc 100%);
  border-color: #bfdbfe;
  color: #1e40af;
}

.nexstackvm-backup-toolbar {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
  padding: 0.75rem 0.95rem;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #f8fafc;
}

.nexstackvm-backup-toolbar-note {
  font-size: 0.82rem;
}

.nexstackvm-backup-table-toolbar {
  margin-bottom: 0;
  padding: 0;
}

.nexstackvm-backup-table-wrap {
  max-height: 340px;
  overflow: auto;
}

.nexstackvm-backup-table .pkg-actions {
  flex-wrap: nowrap;
  gap: 0.35rem;
}

.nexstackvm-backup-table .pkg-action-link {
  white-space: nowrap;
}

.nexstackvm-backup-row-latest {
  background: rgba(239, 106, 58, 0.05);
}

.nexstackvm-backup-type {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  vertical-align: middle;
}

.nexstackvm-backup-type--full {
  background: #dbeafe;
  color: #1d4ed8;
}

.nexstackvm-backup-type--incremental {
  background: #dcfce7;
  color: #15803d;
}

.nexstackvm-backup-source {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.nexstackvm-backup-source--system {
  background: #ede9fe;
  color: #6d28d9;
}

.nexstackvm-backup-source--customer {
  background: #ffedd5;
  color: #c2410c;
}

.nexstackvm-backup-source--admin {
  background: #e2e8f0;
  color: #475569;
}

.nexstackvm-backup-latest-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  margin-left: 0.35rem;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #ef6a3a;
  vertical-align: middle;
}

.nexstackvm-backup-filename {
  font-size: 0.8rem;
  color: #334155;
  word-break: break-all;
}

@media (max-width: 760px) {
  .nexstackvm-backup-table-wrap {
    overflow-x: auto;
  }

  .nexstackvm-backup-table {
    min-width: 640px;
  }
}

.nexstackvm-plan-change-sticky {
  position: sticky;
  top: 0.75rem;
  z-index: 60;
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid #fde68a;
  border-radius: 8px;
  background: #fffbeb;
  color: #92400e;
  font-size: 0.875rem;
  line-height: 1.4;
  box-shadow: none;
}

.nexstackvm-plan-change-sticky-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem 1rem;
  flex-wrap: wrap;
}

.nexstackvm-plan-change-sticky-actions {
  flex: 0 0 auto;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: nowrap;
}

.nexstackvm-plan-change-sticky-action-btn {
  min-width: 7.5rem;
  padding: 0.42rem 0.95rem;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  color: #0f172a;
  font-size: 0.8125rem;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

.nexstackvm-plan-change-sticky-action-btn:hover:not(:disabled) {
  background: #f8fafc;
  border-color: #94a3b8;
}

.nexstackvm-plan-change-sticky-action-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.nexstackvm-plan-change-sticky-text {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

.nexstackvm-plan-change-sticky-text i {
  flex: 0 0 auto;
  color: #d97706;
  font-size: 1rem;
}

.nexstackvm-plan-change-sticky-text strong {
  font-weight: 600;
  color: #78350f;
}

.nexstackvm-plan-cancel-btn {
  margin-top: 0.75rem;
}

.nexstackvm-plan-change-table {
  min-width: 980px;
}

.nexstackvm-plan-change-notes-row td {
  padding-top: 0;
  border-top: none;
}

.nexstackvm-plan-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.4rem;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
}

.nexstackvm-plan-flag--yes {
  background: #dcfce7;
  color: #166534;
}

.nexstackvm-plan-flag--no {
  background: #fee2e2;
  color: #991b1b;
}

@media (max-width: 760px) {
  .pkg-table-wrap:has(.nexstackvm-plan-change-table) {
    overflow-x: auto;
  }
}

/* ── Create VPS — split form + summary ── */
.vps-create-page {
  margin-top: -0.25rem;
  --vps-create-control-height: 2.375rem;
}

.vps-create-alert {
  margin-bottom: 1rem;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  font-size: 0.875rem;
}

.vps-create-alert-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
}

.vps-create-alert ul {
  margin: 0;
  padding-left: 1.1rem;
}

.vps-create-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
  gap: 1rem;
  align-items: start;
  width: 100%;
}

.vps-create-main {
  min-width: 0;
  width: 100%;
}

.vps-create-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.vps-create-section-card {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid var(--nexstackvm-navy-border-soft);
  border-radius: 14px;
  padding: 0.9rem 1rem 1rem;
  box-shadow: 0 4px 14px rgba(10, 22, 40, 0.05);
  min-width: 0;
}

.vps-create-section-card--wide {
  grid-column: 1 / -1;
}

.vps-create-section-head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.85rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(226, 232, 240, 0.9);
}

.vps-create-section-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--nexstackvm-navy-blue);
  background: linear-gradient(135deg, var(--nexstackvm-navy-soft), var(--nexstackvm-navy-soft-2));
  border: 1px solid var(--nexstackvm-navy-border-soft);
  font-size: 1rem;
}

.vps-create-section-icon--os {
  padding: 6px;
  background: #fff;
}

.nexstackvm-distro-logo {
  display: block;
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex-shrink: 0;
}

.nexstackvm-distro-logo[hidden],
.nexstackvm-distro-logo:not([src]),
.nexstackvm-distro-logo[src=""] {
  display: none !important;
}

.nexstackvm-distro-combobox {
  width: 100%;
}

.nexstackvm-distro-logo--section {
  width: 22px;
  height: 22px;
}

.nexstackvm-distro-logo--brand {
  width: 32px;
  height: 32px;
}

.nexstackvm-distro-logo--select {
  width: 20px;
  height: 20px;
}

.nexstackvm-distro-logo--option {
  width: 22px;
  height: 22px;
}

.nexstackvm-distro-combobox-value {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  flex: 1 1 auto;
}

.nexstackvm-distro-combobox-list li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.nexstackvm-distro-combobox-list li span {
  flex: 1;
  min-width: 0;
}

.nexstackvm-distro-logo--summary {
  width: 18px;
  height: 18px;
}

.nexstackvm-distro-logo--table {
  width: 18px;
  height: 18px;
}

.nexstackvm-distro-logo--badge {
  width: 16px;
  height: 16px;
}

.vps-create-summary-template {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
  text-align: right;
}

.nexstackvm-template-name-cell,
.nexstackvm-vps-os-cell {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.vps-create-section-head h4 {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--nexstackvm-navy-mid);
  line-height: 1.2;
}

.vps-create-section-head p {
  margin: 0.1rem 0 0;
  font-size: 0.74rem;
  color: #64748b;
}

.vps-create-wizard-head {
  margin-bottom: 0.85rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(226, 232, 240, 0.9);
  cursor: default;
  user-select: none;
}

.vps-create-wizard-head-text {
  flex: 1;
  min-width: 0;
}

.vps-create-step-badge {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 700;
  color: #64748b;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
}

.vps-create-step-status {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.85rem;
  color: transparent;
  background: transparent;
  border: 1.5px solid transparent;
}

.vps-create-wizard-step.is-complete .vps-create-step-badge {
  color: #fff;
  background: #16a34a;
  border-color: #16a34a;
}

.vps-create-wizard-step.is-complete .vps-create-step-status {
  color: #fff;
  background: #16a34a;
  border-color: #16a34a;
}

.vps-create-wizard-step.is-active .vps-create-step-badge {
  color: #fff;
  background: var(--nexstackvm-navy-accent);
  border-color: var(--nexstackvm-navy-accent);
}

.vps-create-wizard-step.is-locked {
  opacity: 0.45;
  filter: grayscale(0.2);
  pointer-events: none;
}

.vps-create-wizard-step.is-active {
  opacity: 1;
  filter: none;
  pointer-events: auto;
  box-shadow: 0 8px 22px rgba(37, 99, 235, 0.1);
  border-color: var(--nexstackvm-navy-border);
}

.vps-create-wizard-step.is-complete:not(.is-locked) {
  opacity: 1;
  filter: none;
  pointer-events: auto;
}

.vps-create-section-body .vps-create-input,
.vps-create-section-body .nexstackvm-combobox-trigger {
  box-sizing: border-box;
  height: var(--vps-create-control-height);
  min-height: var(--vps-create-control-height);
  padding: 0 0.75rem;
  line-height: 1.25;
}

.vps-create-section-body .nexstackvm-combobox-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 0.875rem;
  color: #0f172a;
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.vps-create-section-body .nexstackvm-combobox-trigger i {
  font-size: 1.1rem;
  line-height: 1;
  flex: 0 0 auto;
}

.vps-create-section-body .vps-create-select {
  padding-right: 2.25rem;
}

.vps-create-section-body .nexstackvm-combobox-trigger:focus {
  outline: none;
  border-color: var(--nexstackvm-navy-accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

.vps-create-section-body .nexstackvm-combobox-trigger:disabled {
  opacity: 1;
  color: #94a3b8;
  cursor: not-allowed;
  background: #f8fafc;
}

.vps-create-section-body .nexstackvm-combobox-panel {
  z-index: 1300;
}

.vps-create-section-body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.vps-create-section-body--stack {
  gap: 0.65rem;
}

.vps-create-section-body--inline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 0.75rem 1rem;
  align-items: end;
}

.vps-create-section-body--inline .vps-create-hint {
  margin: 0;
  align-self: center;
}

.vps-create-section-body.vps-create-section-body--os {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.vps-create-os-pickers {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0.85rem;
  width: 100%;
}

.vps-create-os-pickers > .vps-create-field,
.vps-create-os-pickers > #vpsCreateOsDistroWrap {
  flex: 1 1 0;
  min-width: 0;
}

.vps-create-os-pickers--windows .vps-create-field--os-version {
  flex: 1 1 100%;
  max-width: 100%;
}

#vpsCreateOsDistroWrap[hidden] {
  display: none !important;
}

.vps-create-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.vps-create-label {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #475569;
}

.vps-create-input {
  width: 100%;
  padding: 0.58rem 0.75rem;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 0.875rem;
  color: #0f172a;
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.vps-create-input:focus {
  outline: none;
  border-color: var(--nexstackvm-navy-accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

.vps-create-select-wrap {
  position: relative;
}

.vps-create-select {
  appearance: none;
  padding-right: 2.25rem;
}

.vps-create-select-chevron {
  position: absolute;
  right: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #64748b;
  font-size: 1.1rem;
}

.vps-create-hint {
  margin: 0;
  font-size: 0.76rem;
  color: #64748b;
  line-height: 1.45;
}

.vps-create-password-wrap {
  position: relative;
}

.vps-create-password-wrap .vps-create-input {
  padding-right: 2.75rem;
}

.vps-create-password-toggle {
  position: absolute;
  right: 0.35rem;
  top: 50%;
  transform: translateY(-50%);
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.vps-create-password-toggle:hover {
  background: #f1f5f9;
  color: var(--nexstackvm-navy-blue);
}

.vps-create-native-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.vps-plan-picker {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.5rem;
}

.vps-plan-card--custom {
  border-style: dashed;
  background: linear-gradient(180deg, #fafbff, #f1f5f9);
}

.vps-plan-card--custom.is-selected {
  border-style: solid;
  background: linear-gradient(180deg, #ffffff, var(--nexstackvm-navy-soft));
}

.vps-create-custom-plan {
  margin-top: 0.75rem;
  padding: 0.85rem;
  border-radius: 12px;
  border: 1px dashed var(--nexstackvm-navy-border);
  background: rgba(255, 255, 255, 0.85);
}

.vps-create-custom-plan[hidden] {
  display: none !important;
}

.vps-create-custom-plan-rows {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.vps-create-custom-plan-row {
  display: grid;
  gap: 0.65rem;
  min-width: 0;
}

.vps-create-custom-plan-row--compute,
.vps-create-custom-plan-row--pair {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.vps-create-custom-group {
  padding: 0.75rem 0.7rem 0.65rem;
  border-radius: 12px;
  border: 1px solid rgba(203, 213, 225, 0.9);
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  min-width: 0;
  height: 100%;
}

.vps-create-custom-group--network {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.vps-create-net-subs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
  min-width: 0;
}

.vps-create-net-sub {
  margin: 0;
  padding: 0.55rem 0.45rem 0.45rem;
  border-radius: 10px;
  border: 1px solid rgba(203, 213, 225, 0.9);
  background: #f8fafc;
  min-width: 0;
}

.vps-create-net-sub-title {
  margin: 0 0 0.45rem;
  padding: 0;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
}

.vps-create-net-sub .vps-create-custom-group-fields {
  margin: 0;
}

.vps-create-custom-group-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}

.vps-create-custom-group-head h5 {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 700;
  color: #0f172a;
}

.vps-create-custom-group-icon {
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(30, 58, 95, 0.09);
  color: var(--primary, #1e3a5f);
  font-size: 0.9rem;
}

.vps-create-custom-group-icon--cpu {
  background: rgba(59, 130, 246, 0.1);
  color: #2563eb;
}

.vps-create-custom-group-icon--ram {
  background: rgba(168, 85, 247, 0.1);
  color: #7c3aed;
}

.vps-create-custom-group-icon--storage {
  background: rgba(14, 165, 233, 0.1);
  color: #0284c7;
}

.vps-create-custom-group-icon--network {
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
}

.vps-create-custom-group-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem 0.55rem;
}

.vps-create-custom-group-fields--single {
  grid-template-columns: minmax(0, 1fr);
}

.vps-create-custom-group .vps-create-field {
  min-width: 0;
}

.vps-create-custom-group .vps-create-label {
  font-size: 0.72rem;
}

.vps-create-custom-group .vps-create-input {
  padding: 0.42rem 0.52rem;
  font-size: 0.8rem;
}

.vps-create-input-suffix {
  display: flex;
  align-items: stretch;
  min-width: 0;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.vps-create-input-suffix:focus-within {
  border-color: var(--primary, #1e3a5f);
  box-shadow: 0 0 0 2px rgba(30, 58, 95, 0.12);
}

.vps-create-input-suffix .vps-create-input {
  flex: 1 1 auto;
  min-width: 0;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0;
}

.vps-create-input-suffix-addon {
  display: inline-flex;
  align-items: center;
  padding: 0 0.45rem;
  font-size: 0.68rem;
  font-weight: 600;
  color: #64748b;
  background: #f8fafc;
  border-left: 1px solid #e2e8f0;
  white-space: nowrap;
}

@media (max-width: 960px) {
  .vps-create-custom-plan-row--compute,
  .vps-create-custom-plan-row--pair {
    grid-template-columns: 1fr;
  }

  .vps-create-custom-group-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .vps-create-custom-group-fields {
    grid-template-columns: 1fr;
  }
}

.vps-plan-card {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  align-items: start;
  gap: 0.35rem 0.45rem;
  width: 100%;
  min-width: 0;
  text-align: left;
  padding: 0.55rem 0.6rem;
  border-radius: 10px;
  border: 1.5px solid #dbeafe;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  font-family: inherit;
}

.vps-plan-card:hover {
  border-color: var(--nexstackvm-navy-border);
  box-shadow: 0 4px 12px rgba(30, 58, 138, 0.08);
}

.vps-plan-card.is-selected {
  border-color: var(--nexstackvm-navy-accent);
  background: linear-gradient(180deg, #ffffff, var(--nexstackvm-navy-soft));
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.12);
}

.vps-plan-card-top {
  display: contents;
}

.vps-plan-card-name {
  grid-column: 1;
  grid-row: 1;
  font-size: 0.82rem;
  color: var(--nexstackvm-navy-mid);
}

.vps-plan-card-check {
  grid-column: 2;
  grid-row: 1;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 1.5px solid #cbd5e1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.vps-plan-card.is-selected .vps-plan-card-check {
  border-color: var(--nexstackvm-navy-accent);
  background: var(--nexstackvm-navy-accent);
  color: #fff;
}

.vps-plan-card-specs {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.18rem;
  font-size: 0.72rem;
  color: #475569;
  min-width: 0;
}

.vps-plan-card-specs span {
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 1100px) {
  .vps-plan-picker {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .vps-plan-picker {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .vps-plan-picker {
    grid-template-columns: 1fr;
  }

  .vps-plan-card {
    padding: 0.72rem 0.85rem;
  }

  .vps-plan-card-name {
    font-size: 0.9rem;
  }

  .vps-plan-card-specs {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.35rem 0.85rem;
    font-size: 0.76rem;
  }
}

.vps-create-summary-col {
  position: relative;
}

.vps-create-summary-card {
  position: sticky;
  top: 1rem;
  border-radius: 18px;
  border: 1px solid var(--nexstackvm-navy-border-soft);
  background: linear-gradient(165deg, #ffffff 0%, #f0f4ff 42%, #e8f0fe 100%);
  box-shadow: 0 16px 40px rgba(10, 22, 40, 0.12);
  overflow: hidden;
}

.vps-create-summary-head {
  padding: 1.25rem 1.25rem 1rem;
  border-bottom: 1px solid rgba(147, 197, 253, 0.45);
}

.vps-create-summary-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.62rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #dbeafe;
  background: linear-gradient(135deg, var(--nexstackvm-navy-mid), var(--nexstackvm-navy-blue));
  margin-bottom: 0.65rem;
}

.vps-create-summary-head h4 {
  margin: 0 0 0.25rem;
  font-size: 1.15rem;
  color: var(--nexstackvm-navy-mid);
}

.vps-create-summary-head p {
  margin: 0;
  font-size: 0.82rem;
  color: #64748b;
}

.vps-create-summary-empty {
  padding: 1.5rem 1.25rem 0.5rem;
  text-align: center;
}

.vps-create-summary-empty-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 0.75rem;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--nexstackvm-navy-blue);
  background: rgba(255, 255, 255, 0.75);
  border: 1px dashed var(--nexstackvm-navy-border-soft);
}

.vps-create-summary-empty p {
  margin: 0;
  font-size: 0.84rem;
  color: #64748b;
}

.vps-create-summary-body {
  padding: 1rem 1.25rem 0.25rem;
}

.vps-create-summary-block {
  margin-bottom: 1rem;
}

.vps-create-summary-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 0.25rem;
}

.vps-create-summary-block strong {
  display: block;
  font-size: 0.95rem;
  color: #0f172a;
}

.vps-create-summary-sub {
  display: block;
  font-size: 0.8rem;
  color: #64748b;
  margin-top: 0.15rem;
}

.vps-create-summary-plan {
  margin-bottom: 1rem;
  padding: 0.85rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(147, 197, 253, 0.45);
}

.vps-create-summary-plan strong {
  display: block;
  font-size: 0.98rem;
  color: var(--nexstackvm-navy-blue);
  margin-bottom: 0.65rem;
}

.vps-create-summary-spec-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

.vps-create-summary-spec {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.55rem 0.6rem;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  font-size: 0.72rem;
  color: #64748b;
}

.vps-create-summary-spec i {
  color: var(--nexstackvm-navy-accent);
  font-size: 0.95rem;
  margin-bottom: 0.1rem;
}

.vps-create-summary-spec strong {
  font-size: 0.86rem;
  color: #0f172a;
}

.vps-create-summary-details {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.vps-create-summary-details li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid rgba(226, 232, 240, 0.9);
  font-size: 0.8rem;
}

.vps-create-summary-details li:last-child {
  border-bottom: none;
}

.vps-create-summary-details span {
  color: #64748b;
}

.vps-create-summary-details strong {
  text-align: right;
  font-size: 0.82rem;
  color: #0f172a;
  word-break: break-word;
}

.vps-create-summary-foot {
  padding: 1rem 1.25rem 1.25rem;
  border-top: 1px solid rgba(147, 197, 253, 0.45);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.vps-create-submit {
  width: 100%;
  gap: 0.4rem;
  padding: 0.78rem 1rem;
  font-size: 0.95rem;
}

.vps-create-submit:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}

.vps-create-cancel {
  width: 100%;
  text-align: center;
}

.vps-create-summary-note {
  margin: 0;
  font-size: 0.74rem;
  color: #64748b;
  text-align: center;
  line-height: 1.45;
}

@media (max-width: 1080px) {
  .vps-create-layout {
    grid-template-columns: 1fr;
  }

  .vps-create-summary-card {
    position: static;
  }
}

@media (max-width: 720px) {
  .vps-create-cards {
    grid-template-columns: 1fr;
  }

  .vps-create-section-card--wide {
    grid-column: auto;
  }

  .vps-create-section-body--inline {
    grid-template-columns: 1fr;
  }
}

.vps-list-card .list-toolbar {
  border-bottom: none;
  padding-bottom: 0.35rem;
}

.vps-filter-bar {
  padding: 0 1.25rem 1rem;
  border-bottom: 1px solid rgba(226, 232, 240, 0.95);
}

#vpsCreateModal.nexstackvm-sheet-modal .nexstackvm-sheet.vps-create-sheet {
  width: min(1180px, 96vw);
  max-height: 92vh;
}

#vpsCreateModal .vps-create-sheet-body {
  overflow: auto;
  padding: 0 1.25rem 1.25rem;
}

#vpsCreateModal .vps-create-page--modal {
  padding-top: 0.25rem;
}

#vpsCreateModal .vps-create-summary-card {
  position: sticky;
  top: 0;
}

@media (max-width: 960px) {
  #vpsCreateModal.nexstackvm-sheet-modal .nexstackvm-sheet.vps-create-sheet {
    width: 100vw;
    max-height: 100vh;
    border-radius: 0;
  }
}

/* Firewall listing + sheet modal (matches plan sheet UI) */
.firewall-list-card .list-toolbar .muted {
  max-width: 42rem;
}

.firewall-row-desc {
  font-size: 0.82rem;
  margin-top: 0.2rem;
}

#firewallModal.nexstackvm-sheet-modal .nexstackvm-sheet {
  overflow: visible;
}

#firewallModal .nexstackvm-sheet {
  width: min(872px, calc(100vw - 1.5rem));
  max-height: min(88vh, 760px);
}

#firewallModal .nexstackvm-sheet-head {
  padding: 0.75rem 1rem 0.65rem;
}

#firewallModal .nexstackvm-sheet-head h4 {
  font-size: 1.05rem;
}

#firewallModal .nexstackvm-sheet-sub {
  font-size: 0.76rem;
}

#firewallModal .nexstackvm-sheet-body.nexstackvm-plan-sheet-body {
  padding: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

#firewallModal .nexstackvm-plan-sheet-form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* Firewall save review — 2026 confirmation sheet */
#firewallSaveReviewModal.nexstackvm-sheet-modal {
  z-index: 1400;
}

#firewallSaveReviewModal .nexstackvm-sheet-backdrop {
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

#firewallSaveReviewModal .nexstackvm-firewall-save-review-sheet {
  width: min(880px, calc(100vw - 1.5rem));
  max-height: min(92vh, 880px);
}

#firewallSaveReviewModal .nexstackvm-sheet-head {
  padding: 1.15rem 1.25rem 0.95rem;
}

#firewallSaveReviewModal .nexstackvm-sheet-body {
  padding: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

#firewallSaveReviewModal .nexstackvm-firewall-save-review-scroll {
  flex: 1 1 auto;
  overflow: auto;
  padding: 0.9rem 1.2rem 0.45rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

#firewallSaveReviewModal .nexstackvm-firewall-save-review-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem 0.95rem;
  border-radius: 14px;
  border: 1px solid rgba(251, 191, 36, 0.55);
  background: linear-gradient(135deg, rgba(255, 251, 235, 0.98) 0%, rgba(254, 243, 199, 0.65) 100%);
  box-shadow: 0 1px 2px rgba(180, 83, 9, 0.08);
}

#firewallSaveReviewModal .nexstackvm-firewall-save-review-alert-icon {
  width: 2rem;
  height: 2rem;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(245, 158, 11, 0.16);
  color: #b45309;
  font-size: 1.1rem;
}

#firewallSaveReviewModal .nexstackvm-firewall-save-review-alert-text strong {
  display: block;
  margin-bottom: 0.2rem;
  font-size: 0.82rem;
  color: #92400e;
}

#firewallSaveReviewModal .nexstackvm-firewall-save-review-alert-text p {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: #78350f;
}

#firewallSaveReviewModal .nexstackvm-firewall-save-review-section,
#firewallSaveReviewModal .nexstackvm-firewall-save-review-card {
  margin-bottom: 0;
  padding: 0.9rem 0.95rem 0.85rem;
  border-radius: 16px;
  border: 1px solid rgba(203, 213, 225, 0.9);
  background: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}

#firewallSaveReviewModal .nexstackvm-plan-form-section-head {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
}

#firewallSaveReviewModal .nexstackvm-firewall-save-review-section-head-text {
  flex: 1 1 auto;
  min-width: 0;
}

#firewallSaveReviewModal .nexstackvm-firewall-save-review-section-head-text h5 {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 700;
  color: #0f172a;
}

#firewallSaveReviewModal .nexstackvm-firewall-save-review-section-head-text p {
  margin: 0.15rem 0 0;
  font-size: 0.76rem;
  line-height: 1.35;
}

#firewallSaveReviewModal .nexstackvm-firewall-save-review-count {
  flex-shrink: 0;
  min-width: 1.65rem;
  height: 1.65rem;
  padding: 0 0.45rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: #1d4ed8;
  background: rgba(59, 130, 246, 0.12);
  border: 1px solid rgba(147, 197, 253, 0.85);
}

#firewallSaveReviewModal .nexstackvm-plan-form-section-icon {
  width: 2rem;
  height: 2rem;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid rgba(226, 232, 240, 0.95);
  background: rgba(241, 245, 249, 0.95);
  color: #475569;
}

#firewallSaveReviewModal .nexstackvm-plan-form-section-icon--inbound {
  background: rgba(219, 234, 254, 0.75);
  border-color: rgba(191, 219, 254, 0.95);
  color: #1d4ed8;
}

#firewallSaveReviewModal .nexstackvm-plan-form-section-icon--outbound {
  background: rgba(255, 237, 213, 0.8);
  border-color: rgba(254, 215, 170, 0.95);
  color: #c2410c;
}

#firewallSaveReviewModal .nexstackvm-plan-form-section-icon--vps {
  background: rgba(220, 252, 231, 0.8);
  border-color: rgba(187, 247, 208, 0.95);
  color: #15803d;
}

#firewallSaveReviewModal .nexstackvm-firewall-save-review-vps-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

#firewallSaveReviewModal .nexstackvm-firewall-save-review-vps-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.38rem 0.62rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 500;
  color: #0f172a;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1px solid rgba(203, 213, 225, 0.95);
}

#firewallSaveReviewModal .nexstackvm-firewall-save-review-vps-chip i {
  color: #64748b;
  font-size: 0.9rem;
}

#firewallSaveReviewModal .nexstackvm-firewall-save-review-empty {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: #64748b;
}

#firewallSaveReviewModal .nexstackvm-firewall-save-review-cards {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

#firewallSaveReviewModal .nexstackvm-firewall-save-review-card--inbound {
  border-color: rgba(191, 219, 254, 0.95);
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

#firewallSaveReviewModal .nexstackvm-firewall-save-review-card--outbound {
  border-color: rgba(254, 215, 170, 0.95);
  background: linear-gradient(180deg, #ffffff 0%, #fffbf7 100%);
}

#firewallSaveReviewModal .nexstackvm-firewall-save-review-outcome-box {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.75rem 0.8rem;
  border-radius: 12px;
  background: rgba(248, 250, 252, 0.95);
  border: 1px solid rgba(226, 232, 240, 0.95);
}

#firewallSaveReviewModal .nexstackvm-firewall-save-review-outcome-icon {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(59, 130, 246, 0.1);
  color: #2563eb;
}

#firewallSaveReviewModal .nexstackvm-firewall-save-review-outcome {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.58;
  color: #0f172a;
  font-weight: 500;
}

#firewallSaveReviewModal .nexstackvm-firewall-save-review-rule-list {
  margin-top: 0.8rem;
  padding-top: 0.75rem;
  border-top: 1px dashed rgba(203, 213, 225, 0.95);
}

#firewallSaveReviewModal .nexstackvm-firewall-save-review-rule-list-title {
  margin: 0 0 0.55rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #64748b;
}

#firewallSaveReviewModal .nexstackvm-firewall-save-review-rule-items {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

#firewallSaveReviewModal .nexstackvm-firewall-save-review-rule-item {
  padding: 0.6rem 0.7rem;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(226, 232, 240, 0.95);
}

#firewallSaveReviewModal .nexstackvm-firewall-save-review-rule-head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.35rem;
}

#firewallSaveReviewModal .nexstackvm-firewall-save-review-rule-index {
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 700;
  color: #475569;
  background: rgba(241, 245, 249, 0.95);
  border: 1px solid rgba(226, 232, 240, 0.95);
}

#firewallSaveReviewModal .nexstackvm-firewall-review-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

#firewallSaveReviewModal .nexstackvm-firewall-review-pill--allow {
  color: #166534;
  background: rgba(34, 197, 94, 0.14);
  border: 1px solid rgba(134, 239, 172, 0.85);
}

#firewallSaveReviewModal .nexstackvm-firewall-review-pill--deny {
  color: #991b1b;
  background: rgba(248, 113, 113, 0.14);
  border: 1px solid rgba(252, 165, 165, 0.85);
}

#firewallSaveReviewModal .nexstackvm-firewall-save-review-rule-text {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.48;
  color: #334155;
}

#firewallSaveReviewModal .nexstackvm-firewall-save-review-foot {
  flex-shrink: 0;
  margin: 0;
  padding: 0.85rem 1.2rem 1rem;
  border-top: 1px solid rgba(226, 232, 240, 0.95);
  background: rgba(255, 255, 255, 0.98);
  display: flex;
  justify-content: flex-end;
  gap: 0.55rem;
}

#firewallSaveReviewModal .nexstackvm-firewall-save-review-foot .btn-primary {
  min-width: 10.5rem;
}

@media (max-width: 640px) {
  #firewallSaveReviewModal .nexstackvm-firewall-save-review-sheet {
    width: 100vw;
    max-height: 100vh;
    border-radius: 0;
  }

  #firewallSaveReviewModal .nexstackvm-firewall-save-review-foot {
    flex-direction: column-reverse;
  }

  #firewallSaveReviewModal .nexstackvm-firewall-save-review-foot .btn {
    width: 100%;
  }
}

#firewallModal .nexstackvm-plan-sheet-scroll {
  flex: 1 1 auto;
  overflow: auto;
  padding: 0.65rem 0.85rem 0.3rem;
  background: #f8fafc;
}

#firewallModal .nexstackvm-firewall-form-columns {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

#firewallModal .nexstackvm-firewall-details-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.55rem 0.65rem;
  align-items: start;
}

#firewallModal .nexstackvm-firewall-field--description {
  grid-column: 1 / -1;
}

#firewallModal .nexstackvm-firewall-details-grid label,
#firewallModal .nexstackvm-firewall-field {
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  min-width: 0;
}

#firewallModal .nexstackvm-firewall-details-grid label > span,
#firewallModal .nexstackvm-firewall-field > span {
  font-size: 0.68rem;
  font-weight: 600;
  color: #475569;
}

#firewallModal .nexstackvm-firewall-details-grid input,
#firewallModal .nexstackvm-firewall-details-grid select,
#firewallModal .nexstackvm-firewall-details-grid textarea {
  width: 100%;
  min-width: 0;
  padding: 0.36rem 0.5rem;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background-color: #fff;
  font-family: inherit;
  font-size: 0.78rem;
  line-height: 1.3;
  color: #0f172a;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#firewallModal .nexstackvm-firewall-details-grid textarea {
  resize: vertical;
  min-height: 2.6rem;
  max-height: 5rem;
}

#firewallModal .nexstackvm-firewall-details-grid select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 1.75rem;
  min-height: 1.9rem;
  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='%2364748b' 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 0.5rem center;
  background-size: 12px;
  cursor: pointer;
}

#firewallModal .nexstackvm-firewall-field--customer.is-locked select,
#firewallModal .nexstackvm-firewall-details-grid select:disabled {
  background-color: #f1f5f9;
  color: #64748b;
  border-color: #e2e8f0;
  cursor: not-allowed;
  pointer-events: none;
  background-image: none;
  box-shadow: none;
}

#firewallModal .nexstackvm-firewall-field--customer.is-locked > span {
  color: #94a3b8;
}

#firewallModal .nexstackvm-firewall-field--customer.is-locked select:focus,
#firewallModal .nexstackvm-firewall-details-grid select:disabled:focus {
  border-color: #e2e8f0;
  box-shadow: none;
}

#firewallModal .nexstackvm-firewall-details-grid input:focus,
#firewallModal .nexstackvm-firewall-details-grid select:focus,
#firewallModal .nexstackvm-firewall-details-grid textarea:focus {
  outline: none;
  border-color: var(--primary, #1e3a5f);
  box-shadow: 0 0 0 2px rgba(30, 58, 95, 0.1);
}

#firewallModal #firewallModalErrors {
  display: none !important;
}

#firewallModal .nexstackvm-firewall-form-section--details {
  grid-column: 1 / -1;
}

@media (max-width: 960px) {
  #firewallModal .nexstackvm-firewall-details-grid {
    grid-template-columns: 1fr;
  }
}

#firewallModal .nexstackvm-plan-form-column-stack {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-width: 0;
}

#firewallModal .nexstackvm-plan-form-section {
  margin-bottom: 0;
  padding: 0.6rem 0.65rem 0.55rem;
  border-radius: 12px;
  border: 1px solid rgba(203, 213, 225, 0.85);
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
  display: flex;
  flex-direction: column;
  min-width: 0;
}

#firewallModal .nexstackvm-firewall-form-section--rules,
#firewallModal .nexstackvm-firewall-form-section--vps {
  grid-column: 1 / -1;
}

#firewallModal .nexstackvm-firewall-form-section--inbound,
#firewallModal .nexstackvm-firewall-form-section--outbound {
  grid-column: 1 / -1;
}

#firewallModal .nexstackvm-firewall-section-head-text {
  flex: 1 1 auto;
  min-width: 0;
}

#firewallModal .nexstackvm-firewall-section-head-text h5 {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 700;
  color: #0f172a;
}

#firewallModal .nexstackvm-firewall-section-head-text p {
  margin: 0.1rem 0 0;
  font-size: 0.7rem;
  line-height: 1.3;
}

#firewallModal .nexstackvm-firewall-rules-empty {
  margin: 0;
  padding: 0.75rem;
  font-size: 0.82rem;
}

#firewallModal .nexstackvm-firewall-rules-empty[hidden] {
  display: none;
}

#firewallModal .nexstackvm-plan-form-section-head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.5rem;
}

#firewallModal .nexstackvm-plan-form-section-head h5,
#firewallModal .nexstackvm-firewall-section-head-text h5 {
  font-size: 0.8rem;
}

#firewallModal .nexstackvm-firewall-section-head-text p {
  margin: 0.1rem 0 0;
  font-size: 0.7rem;
  line-height: 1.3;
}

#firewallModal .nexstackvm-firewall-section-head {
  align-items: flex-start;
}

#firewallModal .nexstackvm-firewall-section-head .nexstackvm-firewall-add-rule {
  margin-left: auto;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

#firewallModal .nexstackvm-firewall-section-head .nexstackvm-firewall-add-rule:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

#firewallModal .nexstackvm-plan-form-section-head h5 {
  margin: 0;
  font-size: 0.84rem;
  font-weight: 700;
  color: #0f172a;
}

#firewallModal .nexstackvm-plan-form-section-icon {
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 8px;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(241, 245, 249, 0.95);
  color: #475569;
  border: 1px solid rgba(226, 232, 240, 0.9);
}

#firewallModal .nexstackvm-plan-form-section-icon--network {
  background: rgba(239, 246, 255, 0.95);
  color: #2563eb;
  border-color: rgba(191, 219, 254, 0.85);
}

#firewallModal .nexstackvm-plan-form-section-icon--cpu {
  background: rgba(255, 247, 237, 0.95);
  color: #ea580c;
  border-color: rgba(254, 215, 170, 0.85);
}

#firewallModal .nexstackvm-plan-form-section-icon--storage {
  background: rgba(240, 253, 244, 0.95);
  color: #16a34a;
  border-color: rgba(187, 247, 208, 0.85);
}

#firewallModal .nexstackvm-plan-form-section-icon--settings {
  background: rgba(245, 243, 255, 0.95);
  color: #7c3aed;
  border-color: rgba(221, 214, 254, 0.85);
}

#firewallModal .nexstackvm-plan-form-grid,
#firewallModal .nexstackvm-plan-form-grid--stack {
  display: grid;
  gap: 0.65rem;
}

#firewallModal .nexstackvm-plan-form-grid label {
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
  min-width: 0;
}

#firewallModal .nexstackvm-plan-form-grid label > span {
  font-size: 0.72rem;
  font-weight: 600;
  color: #475569;
}

#firewallModal .nexstackvm-plan-form-grid input,
#firewallModal .nexstackvm-plan-form-grid select,
#firewallModal .nexstackvm-plan-form-grid textarea,
#firewallModal .nexstackvm-firewall-rules-table input,
#firewallModal .nexstackvm-firewall-rules-table select {
  width: 100%;
  min-width: 0;
  padding: 0.32rem 0.45rem;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  background-color: #fff;
  font-family: inherit;
  font-size: 0.76rem;
  line-height: 1.25;
  color: #0f172a;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#firewallModal .nexstackvm-plan-form-grid textarea {
  resize: vertical;
  min-height: 4.5rem;
}

#firewallModal .nexstackvm-plan-form-grid input:focus,
#firewallModal .nexstackvm-plan-form-grid select:focus,
#firewallModal .nexstackvm-plan-form-grid textarea:focus,
#firewallModal .nexstackvm-firewall-rules-table input:focus,
#firewallModal .nexstackvm-firewall-rules-table select:focus {
  outline: none;
  border-color: var(--primary, #1e3a5f);
  box-shadow: 0 0 0 2px rgba(30, 58, 95, 0.1);
}

#firewallModal .nexstackvm-plan-form-grid select,
#firewallModal .nexstackvm-firewall-rules-table select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 1.55rem;
  min-height: 1.8rem;
  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='%2364748b' 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 0.4rem center;
  background-size: 11px;
  cursor: pointer;
}

#firewallModal .nexstackvm-firewall-rules-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 0.75rem;
}

#firewallModal .nexstackvm-firewall-rules-table th:nth-child(1),
#firewallModal .nexstackvm-firewall-rules-table td:nth-child(1) {
  width: 4.5rem;
}

#firewallModal .nexstackvm-firewall-rules-table th:nth-child(2),
#firewallModal .nexstackvm-firewall-rules-table td:nth-child(2) {
  width: 9.5rem;
}

#firewallModal .nexstackvm-firewall-rules-table th:nth-child(3),
#firewallModal .nexstackvm-firewall-rules-table td:nth-child(3) {
  width: 9.75rem;
}

#firewallModal .nexstackvm-firewall-rules-table th:nth-child(4),
#firewallModal .nexstackvm-firewall-rules-table td:nth-child(4) {
  width: 4.75rem;
}

#firewallModal .nexstackvm-firewall-rules-table th:nth-child(5),
#firewallModal .nexstackvm-firewall-rules-table td:nth-child(5) {
  width: 6.5rem;
}

#firewallModal .nexstackvm-firewall-rules-table th:nth-child(6),
#firewallModal .nexstackvm-firewall-rules-table td:nth-child(6) {
  width: 2.75rem;
  padding-left: 0.2rem;
  padding-right: 0.25rem;
  text-align: center;
}

#firewallModal .nexstackvm-firewall-rule-remove-cell {
  overflow: visible;
}

#firewallModal .nexstackvm-firewall-rule-remove-cell .firewall-rule-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  min-height: 1.75rem;
  padding: 0.2rem;
}

#firewallModal .nexstackvm-firewall-rules-wrap {
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 8px;
  background: rgba(248, 250, 252, 0.85);
}

#firewallModal .nexstackvm-firewall-rules-table th,
#firewallModal .nexstackvm-firewall-rules-table td {
  padding: 0.32rem 0.3rem;
  border-bottom: 1px solid rgba(226, 232, 240, 0.95);
  vertical-align: middle;
}

#firewallModal .nexstackvm-firewall-rules-table th {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
  background: rgba(255, 255, 255, 0.9);
}

#firewallModal .nexstackvm-firewall-rules-table tbody tr:last-child td {
  border-bottom: none;
}

#firewallModal .nexstackvm-firewall-rule-ports {
  display: flex;
  align-items: center;
  gap: 0.22rem;
  min-width: 0;
}

#firewallModal .nexstackvm-firewall-rule-ports input {
  width: 4.35rem;
  max-width: 4.35rem;
  flex: 0 0 4.35rem;
  padding: 0.3rem 0.35rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
  appearance: textfield;
}

#firewallModal .nexstackvm-firewall-rule-ports input::-webkit-outer-spin-button,
#firewallModal .nexstackvm-firewall-rule-ports input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#firewallModal .nexstackvm-firewall-rule-peer input.firewall-rule-source {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.72rem;
  letter-spacing: -0.01em;
}

#firewallModal .nexstackvm-firewall-rule-notes input.firewall-rule-description {
  font-size: 0.72rem;
}

#firewallModal .nexstackvm-firewall-rule-ports.is-disabled {
  opacity: 0.45;
}

#firewallModal .nexstackvm-firewall-vps-list {
  display: grid;
  gap: 0.45rem;
}

#firewallModal .nexstackvm-firewall-vps-option {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.42rem 0.55rem;
  border: 1px solid rgba(203, 213, 225, 0.85);
  border-radius: 8px;
  background: #fff;
  font-size: 0.76rem;
}

#firewallModal .nexstackvm-firewall-vps-placeholder {
  margin: 0;
  font-size: 0.82rem;
}

#firewallModal .nexstackvm-firewall-apply-note {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  margin: 0.5rem 0 0;
  padding: 0.42rem 0.55rem;
  border-radius: 8px;
  background: rgba(239, 246, 255, 0.85);
  border: 1px solid rgba(191, 219, 254, 0.85);
  color: #1e40af;
}

#firewallModal .nexstackvm-plan-modal-save-error {
  flex: 1 1 100%;
  width: 100%;
  margin: 0 0 0.55rem;
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.35;
  color: #dc2626;
  text-align: left;
}

#firewallModal .nexstackvm-plan-modal-save-error[hidden] {
  display: none;
}

#firewallModal .nexstackvm-sheet-foot {
  flex-wrap: wrap;
  flex-shrink: 0;
  margin: 0;
  padding: 0.65rem 0.85rem 0.75rem;
  border-top: 1px solid rgba(226, 232, 240, 0.95);
  background: rgba(255, 255, 255, 0.98);
}

#firewallModal .nexstackvm-sheet-foot .btn-primary {
  min-width: 7.5rem;
}

@media (max-width: 960px) {
  #firewallModal .nexstackvm-sheet {
    width: 100vw;
    max-height: 100vh;
    border-radius: 0;
  }
}

/* Settings — Add Admin sheet + Customers add/edit sheet */
#adminModal .nexstackvm-sheet,
#customerModal .nexstackvm-sheet {
  width: min(560px, calc(100vw - 1.5rem));
  max-height: min(88vh, 640px);
}

#adminModal .nexstackvm-sheet-head,
#customerModal .nexstackvm-sheet-head {
  padding: 1rem 1.15rem 0.85rem;
}

#adminModal .nexstackvm-sheet-body.nexstackvm-plan-sheet-body,
#customerModal .nexstackvm-sheet-body.nexstackvm-plan-sheet-body {
  padding: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

#adminModal .nexstackvm-plan-sheet-form,
#customerModal .nexstackvm-plan-sheet-form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

#adminModal .nexstackvm-plan-sheet-scroll,
#customerModal .nexstackvm-plan-sheet-scroll {
  flex: 1 1 auto;
  overflow: auto;
  padding: 0.85rem 1.15rem 0.35rem;
}

#adminModal .nexstackvm-plan-form-section,
#customerModal .nexstackvm-plan-form-section {
  margin-bottom: 0;
  padding: 0.85rem 0.8rem 0.75rem;
  border-radius: 14px;
  border: 1px solid rgba(203, 213, 225, 0.85);
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

#adminModal .nexstackvm-plan-form-section-head,
#customerModal .nexstackvm-plan-form-section-head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.75rem;
}

#adminModal .nexstackvm-plan-form-section-head h5,
#customerModal .nexstackvm-plan-form-section-head h5 {
  margin: 0;
  font-size: 0.84rem;
  font-weight: 700;
  color: #0f172a;
}

#adminModal .nexstackvm-plan-form-section-icon,
#customerModal .nexstackvm-plan-form-section-icon {
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(241, 245, 249, 0.95);
  color: #475569;
  border: 1px solid rgba(226, 232, 240, 0.9);
}

#adminModal .nexstackvm-admin-form-grid,
#customerModal .nexstackvm-admin-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  align-items: start;
}

#adminModal .nexstackvm-admin-form-grid-span-all,
#customerModal .nexstackvm-admin-form-grid-span-all {
  grid-column: 1 / -1;
}

#adminModal .nexstackvm-admin-form-grid label,
#customerModal .nexstackvm-admin-form-grid label {
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
  min-width: 0;
}

#adminModal .nexstackvm-admin-form-grid label > span,
#customerModal .nexstackvm-admin-form-grid label > span {
  font-size: 0.72rem;
  font-weight: 600;
  color: #475569;
}

#adminModal .nexstackvm-admin-form-grid input,
#adminModal .nexstackvm-admin-form-grid select,
#customerModal .nexstackvm-admin-form-grid input,
#customerModal .nexstackvm-admin-form-grid select {
  width: 100%;
  min-width: 0;
  padding: 0.48rem 0.62rem;
  border: 1px solid #cbd5e1;
  border-radius: 9px;
  background-color: #fff;
  font-family: inherit;
  font-size: 0.82rem;
  line-height: 1.35;
  color: #0f172a;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#adminModal .nexstackvm-admin-form-grid input.nexstackvm-admin-readonly,
#customerModal .nexstackvm-admin-form-grid input.nexstackvm-admin-readonly {
  background-color: #f8fafc;
  color: #64748b;
  cursor: default;
}

#adminModal .nexstackvm-admin-form-grid select,
#customerModal .nexstackvm-admin-form-grid select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 2.1rem;
  min-height: 2.15rem;
  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='%2364748b' 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 0.65rem center;
  background-size: 14px;
  cursor: pointer;
}

#adminModal .nexstackvm-admin-form-grid input:focus,
#adminModal .nexstackvm-admin-form-grid select:focus,
#customerModal .nexstackvm-admin-form-grid input:focus,
#customerModal .nexstackvm-admin-form-grid select:focus {
  outline: none;
  border-color: var(--primary, #1e3a5f);
  box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.12);
}

#adminModal .nexstackvm-admin-form-grid input::placeholder,
#customerModal .nexstackvm-admin-form-grid input::placeholder {
  color: #94a3b8;
  opacity: 1;
}

#adminModal .nexstackvm-sheet-foot,
#customerModal .nexstackvm-sheet-foot {
  flex-shrink: 0;
  margin: 0;
  padding: 0.85rem 1.15rem 1rem;
  border-top: 1px solid rgba(226, 232, 240, 0.95);
  background: rgba(255, 255, 255, 0.98);
}

#adminModal .nexstackvm-sheet-foot .btn-primary,
#customerModal .nexstackvm-sheet-foot .btn-primary {
  min-width: 9rem;
}

#customerModal #customerModalErrors {
  margin-bottom: 0.75rem;
}

#customerModal #customerModalErrors:not([hidden]) {
  display: block;
}

@media (max-width: 640px) {
  #adminModal .nexstackvm-admin-form-grid,
  #customerModal .nexstackvm-admin-form-grid {
    grid-template-columns: 1fr;
  }

  #adminModal .nexstackvm-sheet,
  #customerModal .nexstackvm-sheet {
    width: 100vw;
    max-height: 100vh;
    border-radius: 0;
  }
}

#customerViewModal .nexstackvm-customer-view-sheet {
  width: min(560px, calc(100vw - 1.5rem));
  max-height: min(88vh, 640px);
}

#customerViewModal .nexstackvm-sheet-head {
  padding: 1rem 1.15rem 0.85rem;
}

#customerViewModal .nexstackvm-sheet-body.nexstackvm-plan-sheet-body {
  padding: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

#customerViewModal .nexstackvm-plan-sheet-scroll {
  flex: 1 1 auto;
  overflow: auto;
  padding: 0.85rem 1.15rem 0.35rem;
}

#customerViewModal .nexstackvm-customer-view-section {
  margin-bottom: 0;
  padding: 0.85rem 0.8rem 0.75rem;
  border-radius: 14px;
  border: 1px solid rgba(203, 213, 225, 0.85);
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

#customerViewModal .nexstackvm-customer-view-grid {
  padding: 0;
  gap: 0.85rem 1rem;
}

#customerViewModal .customer-view-item span {
  margin-bottom: 0.28rem;
}

#customerViewModal .nexstackvm-sheet-foot {
  flex-shrink: 0;
  margin: 0;
  padding: 0.85rem 1.15rem 1rem;
  border-top: 1px solid rgba(226, 232, 240, 0.95);
  background: rgba(255, 255, 255, 0.98);
}

@media (max-width: 640px) {
  #customerViewModal .nexstackvm-customer-view-sheet {
    width: 100vw;
    max-height: 100vh;
    border-radius: 0;
  }
}

.firewall-col-desc,
.firewall-desc-cell {
  width: 12rem;
  max-width: 12rem;
}

.firewall-desc-cell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #475569;
  font-size: 0.82rem;
}

#firewallViewModal .nexstackvm-firewall-view-sheet {
  width: min(720px, calc(100vw - 1.5rem));
  max-height: min(92vh, 820px);
}

#firewallViewModal .nexstackvm-sheet-head {
  padding: 1rem 1.15rem 0.85rem;
}

#firewallViewModal .nexstackvm-sheet-body.nexstackvm-plan-sheet-body {
  padding: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

#firewallViewModal .nexstackvm-plan-sheet-scroll {
  flex: 1 1 auto;
  overflow: auto;
  padding: 0.85rem 1.15rem 0.35rem;
}

#firewallViewModal .nexstackvm-sheet-foot {
  flex-shrink: 0;
  margin: 0;
  padding: 0.85rem 1.15rem 1rem;
  border-top: 1px solid rgba(226, 232, 240, 0.95);
  background: rgba(255, 255, 255, 0.98);
}

#firewallViewModal .nexstackvm-firewall-view-loading {
  margin: 0;
  padding: 1rem 0;
}

#firewallViewModal .nexstackvm-firewall-view-stack {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

#firewallViewModal .nexstackvm-plan-form-section {
  margin-bottom: 0;
  padding: 0.85rem 0.8rem 0.75rem;
  border-radius: 14px;
  border: 1px solid rgba(203, 213, 225, 0.85);
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

#firewallViewModal .nexstackvm-plan-form-section-head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.75rem;
}

#firewallViewModal .nexstackvm-plan-form-section-head h5 {
  margin: 0;
  font-size: 0.84rem;
  font-weight: 700;
  color: #0f172a;
}

#firewallViewModal .nexstackvm-plan-form-section-icon {
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(241, 245, 249, 0.95);
  color: #475569;
  border: 1px solid rgba(226, 232, 240, 0.9);
}

#firewallViewModal .nexstackvm-plan-form-section-icon--network {
  background: rgba(14, 165, 233, 0.1);
  color: #0284c7;
}

#firewallViewModal .nexstackvm-plan-form-section-icon--inbound {
  background: rgba(59, 130, 246, 0.1);
  color: #2563eb;
}

#firewallViewModal .nexstackvm-plan-form-section-icon--outbound {
  background: rgba(249, 115, 22, 0.1);
  color: #ea580c;
}

#firewallViewModal .nexstackvm-plan-form-section-icon--vps {
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
}

#firewallViewModal .nexstackvm-firewall-view-overview {
  padding-top: 0.15rem;
}

#firewallViewModal .nexstackvm-firewall-view-customer-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.85rem;
}

#firewallViewModal .nexstackvm-firewall-view-customer-name {
  flex: 1 1 auto;
  min-width: 0;
}

#firewallViewModal .nexstackvm-firewall-view-customer-email {
  flex: 0 1 auto;
  min-width: 0;
  text-align: right;
}

#firewallViewModal .nexstackvm-firewall-view-field-label {
  display: block;
  margin-bottom: 0.15rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
}

#firewallViewModal .nexstackvm-firewall-view-customer-name strong,
#firewallViewModal .nexstackvm-firewall-view-customer-email span {
  font-size: 0.84rem;
  color: #0f172a;
  word-break: break-word;
}

#firewallViewModal .nexstackvm-firewall-view-description p {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.45;
  color: #0f172a;
  word-break: break-word;
  white-space: pre-wrap;
}

#firewallViewModal .nexstackvm-firewall-view-rules-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}

#firewallViewModal .nexstackvm-firewall-view-rules-table th,
#firewallViewModal .nexstackvm-firewall-view-rules-table td {
  padding: 0.45rem 0.4rem;
  border-bottom: 1px solid rgba(226, 232, 240, 0.95);
  text-align: left;
  vertical-align: top;
}

#firewallViewModal .nexstackvm-firewall-view-rules-table th {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
}

#firewallViewModal .nexstackvm-firewall-view-rules-table tbody tr:last-child td {
  border-bottom: none;
}

#firewallViewModal .nexstackvm-firewall-view-action {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
}

#firewallViewModal .nexstackvm-firewall-view-action--allow {
  background: rgba(220, 252, 231, 0.95);
  color: #166534;
}

#firewallViewModal .nexstackvm-firewall-view-action--deny {
  background: rgba(254, 226, 226, 0.95);
  color: #991b1b;
}

#firewallViewModal .nexstackvm-firewall-view-vps-list {
  display: grid;
  gap: 0.45rem;
}

#firewallViewModal .nexstackvm-firewall-view-vps-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 10px;
  background: rgba(248, 250, 252, 0.75);
}

#firewallViewModal .nexstackvm-firewall-view-vps-item strong {
  font-size: 0.84rem;
}

#firewallViewModal .nexstackvm-firewall-view-vps-item span {
  font-size: 0.78rem;
  color: #64748b;
}

#firewallViewModal .nexstackvm-firewall-view-empty {
  margin: 0;
  font-size: 0.82rem;
}

@media (max-width: 640px) {
  #firewallViewModal .nexstackvm-firewall-view-customer-row {
    flex-direction: column;
    gap: 0.65rem;
  }

  #firewallViewModal .nexstackvm-firewall-view-customer-email {
    text-align: left;
  }

  #firewallViewModal .nexstackvm-firewall-view-sheet {
    width: 100vw;
    max-height: 100vh;
    border-radius: 0;
  }
}