/* ctrl. design system — client (RackNerd brand) */
:root {
  --brand: #0078BF;
  --brand-dark: #0066A3;
  --brand-soft: #e8f4fb;
  --brand-soft-strong: #d0e8f7;
  --bg: #ffffff;
  --panel: #f8fafc;
  --border: #e5e7eb;
  --text: #111827;
  --muted: #6b7280;
  --blue: var(--brand);
  --green: #16a34a;
  --danger: #dc2626;
  --danger-dark: #b91c1c;
  --font: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.08);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background: #fff;
  font-size: 14px;
}
a { color: inherit; text-decoration: none; }
a.text-link {
  color: var(--blue);
  font-weight: 600;
  text-decoration: underline;
}
a.text-link:hover { color: var(--brand-dark); }
button, input, select { font: inherit; }

.admin-impersonation-bar {
  background: #0f172a;
  color: #e2e8f0;
  border-bottom: 1px solid #1e293b;
  position: sticky;
  top: 0;
  z-index: 120;
}
.admin-impersonation-bar-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 10px 28px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.admin-impersonation-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fbbf24;
  flex-shrink: 0;
}
.admin-impersonation-text {
  flex: 1 1 240px;
  font-size: 13px;
  line-height: 1.4;
  color: #cbd5e1;
}
.btn-admin-return {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border-radius: 8px;
  background: #fbbf24;
  color: #111827;
  font-weight: 700;
  font-size: 13px;
  border: 0;
  flex-shrink: 0;
}
.btn-admin-return:hover {
  background: #f59e0b;
  color: #111827;
}

.client-top {
  border-bottom: 1px solid var(--border);
  padding: 14px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 20;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 800; font-size: 22px; letter-spacing: -0.03em;
}
.brand .cube {
  width: 34px;
  height: 25px;
  display: block;
  flex-shrink: 0;
  object-fit: contain;
}
.nav { display: flex; gap: 22px; }
.nav a { color: #4b5563; font-weight: 600; padding-bottom: 16px; margin-bottom: -15px; border-bottom: 2px solid transparent; }
.nav a.active { color: var(--text); border-bottom-color: var(--brand); }
.right { display: flex; align-items: center; gap: 12px; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 22px 28px 40px; }
.crumbs { color: var(--blue); font-size: 13px; margin-bottom: 10px; }
.crumbs span { color: var(--muted); }
.head-row {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 16px;
}
.head-row h1 { margin: 0; font-size: 34px; letter-spacing: -0.04em; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  border-radius: 10px; padding: 10px 14px; border: 1px solid var(--border);
  background: #fff; color: var(--text); cursor: pointer; font-weight: 600;
}
.btn:hover { background: #f8fafc; color: var(--text); }
.btn:disabled,
.btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(0.15);
}
.btn-primary:disabled,
.btn-primary[disabled] {
  background: #9ca3af;
  border-color: #9ca3af;
  color: #fff;
  opacity: 1;
}
.btn-outline:disabled,
.btn-outline[disabled] {
  background: #f3f4f6;
  color: #9ca3af;
  border-color: #e5e7eb;
  opacity: 1;
}
.btn-primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.btn-blue:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.btn-red:hover { background: var(--danger-dark); border-color: var(--danger-dark); color: #fff; }
.btn-blue { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn-red { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-outline { background: #fff; }
.pill {
  display: inline-flex; align-items: center; border-radius: 999px;
  padding: 3px 10px; font-size: 12px; font-weight: 700; border: 1px solid transparent;
}
.pill.online { background: #ecfdf5; color: #067647; border-color: #a7f3d0; }
.pill.offline { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }
.pill.reinstalling, .pill.creating { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.pill.suspended { background: #f5f3ff; color: #6d28d9; border-color: #ddd6fe; }
.pill.unknown { background: #f3f4f6; color: #4b5563; border-color: #e5e7eb; }
.pill.firewall-on {
  background: #ecfdf5;
  color: #067647;
  border-color: #a7f3d0;
  font-weight: 700;
  vertical-align: middle;
  gap: 0;
}
.pill.firewall-on a {
  color: #067647;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 700;
  margin-left: 2px;
}
.pill.firewall-on a:hover { color: #055a38; }

.meta {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
  margin-bottom: 14px; background: #fff; box-shadow: var(--shadow);
}
.meta .cell { padding: 14px 16px; border-right: 1px solid var(--border); }
.meta .cell:last-child { border-right: 0; }
.meta .k { color: var(--muted); font-size: 12px; font-weight: 600; margin-bottom: 4px; }
.meta .v { font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 6px; }

.usage {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px;
}
.usage .card {
  border: 1px solid var(--border); border-radius: var(--radius); padding: 14px;
  background: #fff; box-shadow: var(--shadow);
}
.usage .top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.usage .pct { font-size: 28px; font-weight: 800; letter-spacing: -0.03em; }
.usage .label { color: var(--muted); font-weight: 600; font-size: 13px; }
.usage .detail { color: var(--muted); font-size: 12px; margin-bottom: 10px; }
.bar { height: 8px; background: #eef2f7; border-radius: 999px; overflow: hidden; }
.bar > span { display: block; height: 100%; background: #94a3b8; }
.bar.green > span { background: #22c55e; }

.tabs {
  display: flex; gap: 18px; border-bottom: 1px solid var(--border); margin-bottom: 16px;
}
.tabs a {
  padding: 10px 2px 12px; color: #6b7280; font-weight: 600;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabs a.active { color: var(--text); border-bottom-color: var(--brand); }

.split { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 14px; }
.panel {
  border: 1px solid var(--border); border-radius: var(--radius); background: #fff;
  box-shadow: var(--shadow); overflow: hidden;
}
.panel h3 {
  margin: 0; padding: 14px 16px; border-bottom: 1px solid var(--border); font-size: 15px;
}
.kv { padding: 6px 0; }
.kv .row {
  display: grid; grid-template-columns: 140px 1fr; gap: 10px;
  padding: 9px 16px; border-bottom: 1px solid #f3f4f6;
}
.kv .row:last-child { border-bottom: 0; }
.kv .k { color: var(--muted); font-weight: 600; }
.kv .v { font-weight: 600; word-break: break-all; }
.activity { padding: 8px 0; }
.activity .item {
  display: flex; gap: 10px; padding: 10px 16px; border-bottom: 1px solid #f3f4f6;
}
.activity .item:last-child { border-bottom: 0; }
.activity .dot {
  width: 22px; height: 22px; border-radius: 999px; display: inline-flex;
  align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0;
}
.dot.ok { background: #dcfce7; color: #15803d; }
.dot.info { background: var(--brand-soft-strong); color: var(--brand-dark); }
.activity .title { font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.activity .title .pill.via-api {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  background: #f3f4f6;
  color: #4b5563;
  border-color: #e5e7eb;
}
.activity .desc { color: var(--muted); font-size: 12px; margin-top: 2px; }
.empty { padding: 28px 16px; text-align: center; color: var(--muted); }
.flash { background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; padding: 10px 12px; border-radius: 10px; margin-bottom: 14px; font-weight: 600; }
.flash a { color: #1d4ed8; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.flash a:hover { color: #1e40af; }
.flash.flash-info {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1e3a8a;
  font-weight: 500;
}
.flash.flash-info strong { font-weight: 700; }
.flash.flash-info a { color: #1d4ed8; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.flash.flash-info a:hover { color: #1e40af; }
.error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; padding: 10px 12px; border-radius: 10px; margin-bottom: 14px; font-weight: 600; }
.field { margin-bottom: 12px; }
.field label { display: block; font-size: 13px; color: #374151; margin-bottom: 6px; font-weight: 600; }
.field input, .field select, .field textarea {
  width: 100%; max-width: 420px; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px;
}
.field textarea {
  max-width: 560px;
  min-height: 110px;
  resize: vertical;
  font: inherit;
}
.login-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #f3f4f6;
}
.login-card {
  width: min(400px, calc(100vw - 32px));
  background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 28px;
  box-shadow: var(--shadow);
}
.list-card {
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  background: #fff; box-shadow: var(--shadow);
}
.list-card table { width: 100%; border-collapse: collapse; min-width: 520px; }
.list-card th, .list-card td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.list-card th { color: var(--muted); background: #fafafa; font-size: 12px; }
#vs-table .cred-value code {
  background: none;
  padding: 0;
}
.vs-search-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: #fafafa;
}
.vs-search-label {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  flex-shrink: 0;
}
.vs-search-input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  font: inherit;
  background: #fff;
}
.vs-search-input:focus {
  outline: 2px solid #bfdbfe;
  border-color: #93c5fd;
}
.vs-search-empty { margin: 0; border-top: 0; }
.vs-per-page {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  font: inherit;
  background: #fff;
  min-width: 88px;
}
.vs-pagination {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: #fafafa;
}

.info-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px;
}
.info-table {
  width: 100%; border-collapse: collapse; border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; background: #fff; box-shadow: var(--shadow);
}
.info-table th, .info-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: left; }
.info-table tr:last-child th, .info-table tr:last-child td { border-bottom: 0; }
.info-table th {
  width: 42%; background: #f8fafc; color: var(--muted); font-weight: 600; font-size: 13px;
}
.info-table td { font-weight: 600; }

.usage-table {
  width: 100%; border-collapse: collapse; border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; background: #fff; box-shadow: var(--shadow);
  margin-bottom: 16px;
}
.usage-table td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.usage-table tr:last-child td { border-bottom: 0; }
.usage-table td:first-child { font-weight: 700; width: 160px; }
.usage-table .bar-cell { display: flex; align-items: center; gap: 10px; }
.usage-table .bar { flex: 1; height: 10px; }
.pct-label { font-weight: 700; min-width: 40px; color: var(--muted); font-size: 13px; }

.control-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 18px;
}
.control-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 88px; padding: 12px 8px; border: 1px solid var(--border);
  border-radius: var(--radius); background: #fff; cursor: pointer; font-weight: 600; font-size: 13px;
  text-align: center; box-shadow: var(--shadow); color: inherit;
}
.control-tile:hover { background: #f8fafc; border-color: #cbd5e1; }
.control-tile .ico {
  width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center;
  justify-content: center; background: #f1f5f9; font-size: 16px;
}
.control-tile.boot .ico { background: #dcfce7; color: #15803d; }
.control-tile.shutdown .ico, .control-tile.danger .ico { background: #fee2e2; color: var(--danger-dark); }
.control-tile.reboot .ico { background: var(--brand-soft-strong); color: var(--brand-dark); }
.control-tile.rescue .ico { background: #fef3c7; color: #b45309; }
form:has(.control-tile) { margin: 0; }

.vm-quick-grid {
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: 18px;
}

.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.settings-grid--main { grid-template-columns: 1fr 1fr; }
.inline-setting { margin-bottom: 14px; }
.inline-setting label { display: block; font-weight: 600; margin-bottom: 6px; color: #374151; }
.inline-setting select {
  width: 100%; max-width: 320px; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px;
}

.fw-rules-usage {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 0 0 12px;
}
.fw-rules-count {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-dark);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}
.fw-rules-count.is-cap {
  background: #fef2f2;
  color: var(--danger);
}
.fw-rules-usage-text {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  font-size: 13px;
}
.fw-rules-usage-text strong {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

/* Firewall: add-rule row — matched control heights (select was oversized vs inputs). */
.fw-add-rule { margin: 0 0 18px; }
.fw-add-rule-fields {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}
.fw-add-rule-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.fw-add-rule-field label {
  display: block;
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: #374151;
  line-height: 1.2;
}
.fw-add-rule-field select,
.fw-add-rule-field input {
  box-sizing: border-box;
  height: 40px;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0 12px;
  background: #fff;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  line-height: 1.2;
  max-width: none;
  appearance: none;
  -webkit-appearance: none;
}
.fw-add-rule-field select {
  width: 9.5rem;
  padding-right: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7280' d='M1.4.6 6 5.2 10.6.6 12 2 6 8 0 2z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 10px 7px;
}
.fw-add-rule-field input[type="number"] {
  width: 6.5rem;
  -moz-appearance: textfield;
}
.fw-add-rule-field--ports { min-width: 14rem; }
.fw-add-rule-ports {
  display: flex;
  align-items: center;
  gap: 8px;
}
.fw-add-rule-ports input[type="number"] { width: 6.5rem; }
.fw-add-rule-ports-to { font-size: 12px; font-weight: 600; flex: 0 0 auto; }
.fw-add-rule-field input[type="number"]::-webkit-outer-spin-button,
.fw-add-rule-field input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.fw-add-rule-field--note { flex: 1 1 12rem; max-width: 18rem; }
.fw-add-rule-field--note input { width: 100%; }
.fw-add-rule-field select:focus,
.fw-add-rule-field input:focus {
  outline: 2px solid #bfdbfe;
  outline-offset: 1px;
  border-color: #93c5fd;
}
.fw-add-rule-actions {
  display: flex;
  align-items: flex-end;
}
.fw-add-rule-actions .btn {
  height: 40px;
  padding: 0 16px;
  box-sizing: border-box;
}
@media (max-width: 640px) {
  .fw-add-rule-field,
  .fw-add-rule-field--note { flex: 1 1 100%; max-width: none; }
  .fw-add-rule-field select,
  .fw-add-rule-field input[type="number"] { width: 100%; }
  .fw-add-rule-ports { width: 100%; }
  .fw-add-rule-ports input[type="number"] { width: auto; flex: 1 1 0; min-width: 0; }
  .fw-add-rule-actions { width: 100%; }
  .fw-add-rule-actions .btn { width: 100%; }
}

.settings-advanced {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.settings-advanced > summary {
  cursor: pointer;
  font-weight: 700;
  color: #374151;
  user-select: none;
}
.settings-advanced-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 14px;
}
@media (max-width: 720px) {
  .settings-advanced-body { grid-template-columns: 1fr; }
}

.data-plain { width: 100%; border-collapse: collapse; }
.data-plain th, .data-plain td { padding: 10px 14px; border-bottom: 1px solid var(--border); text-align: left; }
.data-plain th { color: var(--muted); font-size: 12px; background: #fafafa; }
.fw-rules-table tbody tr {
  transition: background-color 0.12s ease;
}
.fw-rules-table tbody tr:hover td {
  background: #f3f4f6;
}
.fw-rules-table tbody tr:hover td:first-child {
  border-radius: 8px 0 0 8px;
}
.fw-rules-table tbody tr:hover td:last-child {
  border-radius: 0 8px 8px 0;
}
.rdns-current { margin-right: 8px; word-break: break-all; }
.rdns-edit-link {
  border: 0;
  background: none;
  padding: 0;
  color: var(--blue);
  cursor: pointer;
  font: inherit;
  font-weight: 600;
}
.rdns-edit-link:hover { text-decoration: underline; }
.rdns-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0; }
.rdns-row input {
  border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px;
}
.btn-sm { padding: 6px 10px; font-size: 12px; border-radius: 8px; }
.btn-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.muted { color: var(--muted); }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 12px; }

.client-api-docs-heading {
  margin: 22px 0 10px;
  font-size: 14px;
  font-weight: 700;
}
.client-api-docs-heading:first-of-type { margin-top: 0; }
.client-api-docs-list {
  margin: 0 0 4px;
  padding-left: 20px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}
.client-api-docs-list li + li { margin-top: 6px; }
.client-api-docs-table { margin-top: 8px; }
.client-api-docs-example-label {
  margin: 14px 0 6px;
  font-size: 13px;
}
.client-api-pre {
  margin: 0 0 4px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #f8fafc;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  line-height: 1.55;
  overflow-x: auto;
  white-space: pre;
}

.account-layout {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.account-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: sticky;
  top: 20px;
}
.account-nav a {
  display: block;
  padding: 10px 14px;
  border-radius: 10px;
  color: var(--muted);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.account-nav a:hover {
  background: #f1f5f9;
  color: var(--text);
}
.account-nav a.active {
  background: var(--brand-soft);
  color: var(--brand-dark);
}
.account-main { min-width: 0; }
.head-row-account { margin-bottom: 20px; }
.account-panel-body { padding: 18px 20px 22px; }
.account-panel-intro {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}
.account-form-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 8px;
}
.account-form-actions form { margin: 0; }
.account-checkbox label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-weight: 500;
  line-height: 1.45;
  cursor: pointer;
}
.account-checkbox input { width: auto; margin-top: 3px; flex-shrink: 0; }
.account-overview { display: grid; gap: 22px; }
.account-identity {
  padding: 22px 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(135deg, #fff 0%, #f8fafc 100%);
  box-shadow: var(--shadow);
}
.account-name {
  margin: 0;
  font-size: 20px;
  letter-spacing: -0.02em;
}
.account-email {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 14px;
}
.account-last-login {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}
.account-meta {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--muted);
}
.account-links {
  display: grid;
  gap: 12px;
}
.account-link-card {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 4px 12px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.account-link-card:hover {
  border-color: #93c5fd;
  box-shadow: 0 4px 14px rgba(29, 78, 216, .08);
}
.account-link-label {
  grid-column: 1;
  font-weight: 700;
  font-size: 15px;
}
.account-link-desc {
  grid-column: 1;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.account-link-arrow {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  color: #94a3b8;
  font-size: 18px;
}
.account-security-status {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.account-security-label {
  margin: 0 0 6px;
  font-weight: 700;
  font-size: 15px;
}
.account-twofa-setup {
  margin-top: 20px;
  padding-top: 4px;
}
.account-twofa-setup h4 {
  margin: 0 0 8px;
  font-size: 16px;
}
.account-twofa-confirm {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fafafa;
}
.account-twofa-confirm h4 {
  margin: 0 0 8px;
  font-size: 16px;
}
.account-recovery-codes {
  margin-top: 20px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fafafa;
}
.account-recovery-codes h4 {
  margin: 0 0 8px;
  font-size: 16px;
}
.recovery-code-list {
  margin: 14px 0 0;
  padding: 12px 16px;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 16px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 14px;
}
.recovery-code-list code {
  font: inherit;
}
@media (max-width: 560px) {
  .recovery-code-list { grid-template-columns: 1fr; }
}
.account-secret {
  margin: 12px 0 18px;
  font-size: 13px;
  color: var(--muted);
}
.account-secret code {
  font-size: 13px;
  word-break: break-all;
}
.account-login-history {
  margin-top: 16px;
}
.account-history-table th,
.account-history-table td {
  font-size: 13px;
}

/* Manage VM page */
.head-row-vm { margin-bottom: 18px; }
.vm-subtitle {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
}
.vm-subtitle .pill.firewall-on {
  margin-left: 2px;
  position: relative;
  top: -1px;
}
.vm-head-actions { align-items: center; }
.vm-creating-banner {
  margin: 0 0 10px;
  padding: 8px 14px;
  border: 1px solid #fcd34d;
  border-radius: var(--radius);
  background: #fffbeb;
  color: #92400e;
  font-size: 13px;
  line-height: 1.45;
}
.vm-toolbar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px;
  margin-bottom: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
}
.vm-toolbar-primary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.vm-action-form { margin: 0; }
.vm-act {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 11px;
  font-size: 13px;
  white-space: nowrap;
}
.vm-act-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: .92;
}
.oneclick-locked .vm-toolbar-primary,
.vm-toolbar.oneclick-locked .vm-toolbar-primary,
.control-grid.oneclick-locked {
  opacity: .48;
  filter: grayscale(.15);
}
.oneclick-locked .vm-act[aria-disabled="true"],
.oneclick-locked .control-tile[aria-disabled="true"],
.oneclick-locked .vm-act:disabled,
.oneclick-locked .control-tile:disabled {
  cursor: not-allowed;
  pointer-events: none;
}
.control-grid.oneclick-locked .control-tile {
  cursor: not-allowed;
  pointer-events: none;
}
.vm-toolbar.oneclick-locked .vm-act {
  cursor: not-allowed;
}
.vm-toolbar-secondary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  padding-top: 12px;
  border-top: 1px solid #f1f5f9;
}
.vm-link-act {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border: 0;
  background: none;
  color: #64748b;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  border-radius: 8px;
  transition: color .15s, background .15s;
}
.vm-link-act:hover {
  color: var(--text);
  background: #f8fafc;
}
.vm-link-act-danger { color: var(--danger); }
.vm-link-act-danger:hover {
  color: var(--danger-dark);
  background: #fef2f2;
}
.vm-toolbar-secondary .vm-action-form {
  display: inline-flex;
  align-items: center;
}
.vm-overview {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 14px;
  margin-bottom: 16px;
}
.vm-spec-card,
.vm-usage-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
}
.vm-card-title {
  margin: 0;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  font-weight: 700;
}
.vm-spec-header {
  padding: 18px 20px 14px;
  border-bottom: 1px solid #f1f5f9;
}
.vm-system-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.vm-system-os {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
  word-break: break-word;
}
.vm-system-meta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
}
.vm-system-meta strong {
  color: var(--text);
  font-weight: 700;
}
.vm-system-dot {
  color: #cbd5e1;
}
.vm-spec-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 16px 18px 18px;
}
.vm-metric {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid #f1f5f9;
  border-radius: 12px;
  background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
}
.vm-metric-icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vm-metric-icon svg {
  width: 22px;
  height: 22px;
}
.vm-metric-icon-ram { background: var(--brand-soft); color: var(--brand); }
.vm-metric-icon-disk { background: #f5f3ff; color: #7c3aed; }
.vm-metric-icon-bw { background: #ecfdf5; color: #059669; }
.vm-metric-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.vm-metric-value {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.vm-metric-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.vm-usage-stack {
  display: grid;
  gap: 12px;
}
.vm-usage-card { padding: 16px 18px; }
.vm-usage-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
}
.vm-usage-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
}
.vm-tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: #94a3b8;
  cursor: help;
  outline: none;
}
.vm-tip svg {
  width: 16px;
  height: 16px;
}
.vm-tip-text {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  width: max-content;
  max-width: 220px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #1e293b;
  color: #f8fafc;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.45;
  text-align: center;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .18);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .15s, visibility .15s;
  z-index: 5;
}
.vm-tip-text-wide {
  max-width: 300px;
  text-align: left;
}
.vm-tip-text::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #1e293b;
}
.vm-tip:hover .vm-tip-text,
.vm-tip:focus .vm-tip-text,
.vm-tip:focus-visible .vm-tip-text {
  opacity: 1;
  visibility: visible;
}
.vm-title {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.vm-note-tip {
  flex-shrink: 0;
  color: #64748b;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
  z-index: 30;
}
.vm-note-tip .vm-tip-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: min(360px, 80vw);
  z-index: 30;
}
/* Header sits under the sticky nav — open downward so a long note is not clipped. */
.vm-title .vm-note-tip .vm-tip-text {
  left: 0;
  transform: none;
  bottom: auto;
  top: calc(100% + 8px);
  text-align: left;
}
.vm-title .vm-note-tip .vm-tip-text::after {
  left: 10px;
  transform: none;
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: #1e293b;
}
.vs-hostname {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 400;
  letter-spacing: 0;
}
#vs-table .vm-note-tip .vm-tip-text {
  left: 0;
  transform: none;
  bottom: auto;
  top: calc(100% + 8px);
  text-align: left;
}
#vs-table .vm-note-tip .vm-tip-text::after {
  left: 10px;
  transform: none;
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: #1e293b;
}
.vm-usage-pct {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.vm-usage-detail {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.vm-usage-card-undetected .vm-usage-detail-undetected {
  margin-top: 4px;
  max-width: 42rem;
  font-size: 13px;
  line-height: 1.5;
}
.vm-usage-cmd {
  margin: 10px 0 0;
  padding: 8px 12px;
  max-width: 16rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #f1f5f9;
  color: var(--text);
  font-size: 13px;
  line-height: 1.4;
  overflow-x: auto;
}
.vm-usage-cmd code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: inherit;
  font-weight: 600;
  color: inherit;
  background: none;
  padding: 0;
}
.vm-layout {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.vm-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: sticky;
  top: 20px;
}
.vm-nav a {
  display: block;
  padding: 10px 14px;
  border-radius: 10px;
  color: var(--muted);
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.vm-nav a:hover {
  background: #f1f5f9;
  color: var(--text);
}
.vm-nav a.active {
  background: var(--brand-soft);
  color: var(--brand-dark);
}
.vm-main { min-width: 0; }
.vm-network-section {
  text-align: left !important;
  background: #f8fafc !important;
  font-size: 12px;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--muted);
}
.vm-network-table code {
  font-size: 13px;
}

/* Console page */
.console-notice {
  margin-bottom: 16px;
  background: var(--brand-soft);
  border-color: #9ec9e8;
}
.console-notice-body {
  padding: 16px 18px;
}
.console-notice-body p {
  margin: 0;
  line-height: 1.55;
  color: #1e3a5f;
}
.console-panel-body {
  padding: 18px 20px 22px;
}
.console-open-btn {
  font-size: 15px;
  padding: 11px 16px;
}
.console-open-icon {
  width: 16px;
  height: 16px;
}

.reconfigure-network-body {
  padding: 18px 20px 22px;
}
.reconfigure-network-body p {
  margin: 0 0 14px;
  line-height: 1.6;
  color: var(--text);
}
.reconfigure-network-body p:last-child {
  margin-bottom: 0;
}
.reconfigure-network-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 16px;
}

.modal-backdrop {
  position: fixed; inset: 0; background: rgba(15,23,42,.45);
  display: none; align-items: center; justify-content: center;
  z-index: 100; padding: 20px;
}
.modal-backdrop.is-open { display: flex; }
.modal-card {
  width: min(520px, 100%); background: #fff; border-radius: 14px;
  border: 1px solid var(--border);
  box-shadow: 0 20px 40px rgba(0,0,0,.18); overflow: hidden;
}
.modal-head { padding: 16px 18px; border-bottom: 1px solid var(--border); }
.modal-body { padding: 18px; color: var(--text); line-height: 1.5; }
.modal-foot {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 14px 18px 18px;
}
.modal-card h3 { margin: 0; font-size: 18px; }
/* .btn { display:inline-flex } beats the HTML [hidden] attribute */
#rdns-modal.rdns-modal--manual #rdns-modal-save { display: none !important; }
.twofa-qr-wrap {
  display: flex; justify-content: center; margin: 16px 0;
}
.twofa-qr-wrap img {
  display: block; border: 1px solid var(--border); border-radius: 10px;
  padding: 8px; background: #fff;
}
.maintenance-only {
  max-width: 720px;
  margin: 40px auto 60px;
}
.maintenance-only .error {
  font-size: 15px;
  line-height: 1.6;
  padding: 20px 22px;
}
.error a { color: var(--brand-dark); font-weight: 600; text-decoration: underline; }
.panel.pending-resource-panel {
  margin-bottom: 16px;
  padding: 18px 22px;
  background: #fffbeb;
  border: 1px solid #fde68a;
}
.panel.pending-resource-panel h3 {
  margin: 0 0 8px;
  padding: 0;
  border-bottom: 0;
  font-size: 15px;
}
.pending-resource-panel .pending-resource-body {
  margin: 0;
  line-height: 1.55;
}
.pending-resource-panel .pending-resource-actions {
  margin-top: 14px;
  gap: 8px;
  flex-wrap: wrap;
}
.pending-resource-panel .pending-resource-body ol {
  margin: 10px 0 0;
  padding-left: 1.35em;
}
.pending-resource-panel .pending-resource-body li {
  margin: 0 0 8px;
  padding-left: 0.2em;
}
.pending-resource-panel .pending-resource-body li:last-child {
  margin-bottom: 0;
}
.pending-resource-panel a {
  color: var(--blue);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pending-resource-panel a:hover {
  color: var(--brand-dark);
}

/* Header actions — visible on white background */
.client-top .right form { margin: 0; flex-shrink: 0; }
.client-top .right .btn {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: var(--text);
}

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}

@media (max-width: 980px) {
  .meta, .usage, .split, .info-grid, .settings-grid, .account-layout, .vm-overview, .vm-layout { grid-template-columns: 1fr; }
  .vm-toolbar-primary { gap: 8px; }
  .vm-act { flex: 1 1 calc(50% - 8px); justify-content: center; }
  .vm-toolbar-primary > .vm-action-form {
    flex: 1 1 calc(50% - 8px);
    display: flex;
  }
  .vm-toolbar-primary > .vm-action-form .vm-act {
    flex: 1 1 auto;
    width: 100%;
    justify-content: center;
  }
  .vm-nav {
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    position: static;
    padding-bottom: 4px;
  }
  .vm-nav a { white-space: nowrap; flex-shrink: 0; }
  .vm-spec-metrics { grid-template-columns: 1fr; }
  .vm-quick-grid { grid-template-columns: repeat(3, 1fr); }
  .account-nav {
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    position: static;
    padding-bottom: 4px;
  }
  .account-nav a { white-space: nowrap; flex-shrink: 0; }
  .control-grid { grid-template-columns: repeat(3, 1fr); }
  .head-row { flex-direction: column; align-items: stretch; }
  .actions { justify-content: flex-start; }
  .client-top { flex-wrap: wrap; padding: 12px 18px; }
  .wrap { padding: 18px; }
  .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .kv .row { grid-template-columns: 1fr; gap: 2px; }
}

@media (max-width: 768px) {
  .client-top {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "brand right"
      "nav nav";
    align-items: center;
    gap: 10px 12px;
  }
  .client-top .brand { grid-area: brand; font-size: 20px; }
  .client-top .right { grid-area: right; }
  .client-top .nav {
    grid-area: nav;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 18px;
    padding-bottom: 2px;
  }
  .client-top .nav a {
    white-space: nowrap;
    padding-bottom: 8px;
    margin-bottom: 0;
    flex-shrink: 0;
  }
  .head-row h1 { font-size: 26px; }
}

@media (max-width: 640px) {
  .control-grid { grid-template-columns: repeat(2, 1fr); }
  .vm-act { flex: 1 1 100%; }
  .vm-toolbar-primary > .vm-action-form { flex: 1 1 100%; }
  .wrap { padding: 14px 14px 32px; }
  .meta .cell { border-right: 0; border-bottom: 1px solid var(--border); }
  .meta .cell:last-child { border-bottom: 0; }

  /* VPS list: stack rows so Manage is always reachable */
  .list-card { overflow-x: visible; }
  .list-card table { min-width: 0; }
  .list-card thead { display: none; }
  .list-card tbody tr {
    display: block;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
  }
  .list-card tbody tr:last-child { border-bottom: 0; }
  .list-card td {
    display: block;
    border: 0;
    padding: 3px 0;
    text-align: left;
  }
  .list-card td:first-child { font-size: 16px; padding-top: 0; }
  .list-card td:last-child {
    padding-top: 12px;
    padding-bottom: 4px;
  }
  .list-card td:last-child .btn {
    width: 100%;
    justify-content: center;
  }
  .list-card .empty { display: block; padding: 28px 16px; }
  .vs-search-bar { flex-direction: column; align-items: stretch; gap: 8px; }
  .vs-search-label { font-size: 12px; }

  .info-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .data-plain { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .rdns-row input { flex: 1; min-width: 0; width: 100%; }
  .field input, .field select { max-width: none; }
  .inline-setting select { max-width: none; }
}

.alert {
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 18px;
  line-height: 1.5;
}
.alert-warning {
  background: #fffbeb;
  border: 1px solid #fcd34d;
  color: #92400e;
}

.head-row-home {
  margin-bottom: 20px;
}
.page-lead {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 15px;
  font-weight: 500;
}

.welcome-card {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 22px 24px;
  margin-bottom: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(135deg, #fff 0%, #f8fafc 100%);
  box-shadow: var(--shadow);
}
.welcome-card-icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow);
}
.welcome-card-icon .cube {
  width: 28px;
  height: 20px;
  display: block;
  object-fit: contain;
}
.welcome-card-content {
  min-width: 0;
  flex: 1;
}
.welcome-eyebrow {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand);
}
.welcome-title {
  margin: 0 0 10px;
  font-size: 22px;
  letter-spacing: -0.03em;
  line-height: 1.2;
}
.welcome-copy {
  margin: 0 0 12px;
  color: #4b5563;
  line-height: 1.65;
  text-align: justify;
  text-align-last: left;
  hyphens: manual;
}
.welcome-copy a {
  color: var(--blue);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.welcome-copy a:hover {
  color: var(--brand-dark);
}
.welcome-footnote {
  margin: 10px 0 12px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
  text-align: justify;
  text-align-last: left;
  hyphens: manual;
}
.welcome-footnote a {
  color: var(--blue);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.welcome-footnote a:hover {
  color: var(--brand-dark);
}

@media (max-width: 640px) {
  .welcome-card {
    flex-direction: column;
    padding: 18px;
  }
  .welcome-copy,
  .welcome-footnote {
    text-align: left;
    text-align-last: auto;
  }
}

.reinstall-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.reinstall-option {
  display: block;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.reinstall-option:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
}
.reinstall-option:has(input:checked) {
  border-color: var(--blue);
  box-shadow: 0 0 0 1px var(--blue);
  background: var(--brand-soft);
}
.reinstall-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.reinstall-option-body {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
}
.reinstall-option-text strong {
  display: block;
  font-size: 15px;
  margin-bottom: 4px;
}
.reinstall-desc {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  white-space: pre-wrap;
}
.reinstall-option-mark {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border: 2px solid #cbd5e1;
  border-radius: 999px;
  margin-top: 2px;
}
.reinstall-option:has(input:checked) .reinstall-option-mark {
  border-color: var(--blue);
  box-shadow: inset 0 0 0 4px var(--blue);
}
.reinstall-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 20px 0 8px;
}

@media (max-width: 640px) {
  .reinstall-actions { flex-direction: column; }
  .reinstall-actions .btn { justify-content: center; }
}

/* —— VPS Upgrade —— */
.upgrade-list {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 18px;
  overflow: hidden;
}
.upgrade-row {
  display: grid;
  grid-template-columns: 40px minmax(140px, 1.1fr) minmax(160px, 1.2fr) auto 72px;
  gap: 14px 16px;
  align-items: center;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  transition: background .12s ease;
}
.upgrade-row:last-child { border-bottom: 0; }
.upgrade-row.has-add { background: #f0fdf4; }
.upgrade-row-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: #f8fafc;
  color: #64748b;
  border: 1px solid var(--border);
}
.upgrade-row.has-add .upgrade-row-icon {
  background: #dcfce7;
  color: #15803d;
  border-color: #86efac;
}
.upgrade-row-icon svg { width: 20px; height: 20px; }
.upgrade-row-meta { min-width: 0; }
.upgrade-row-title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
}
.upgrade-row-rate {
  margin-top: 3px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.35;
}
.upgrade-row-change {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 14px;
  min-width: 0;
}
.upgrade-from {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.upgrade-arrow {
  color: #cbd5e1;
  font-weight: 600;
}
.upgrade-to {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.upgrade-row.has-add .upgrade-to { color: #15803d; }
.upgrade-stepper {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: end;
}
.upgrade-step {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  color: var(--text);
  flex-shrink: 0;
}
.upgrade-step:hover:not(:disabled) {
  border-color: #16a34a;
  color: #15803d;
  background: #f0fdf4;
}
.upgrade-step:disabled {
  opacity: .35;
  cursor: not-allowed;
}
.upgrade-delta {
  min-width: 72px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  white-space: nowrap;
}
.upgrade-row.has-add .upgrade-delta { color: #15803d; }
.upgrade-row-cost {
  text-align: right;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.upgrade-row.has-add .upgrade-row-cost { color: #15803d; }

.upgrade-summary { padding: 18px 20px; }
.upgrade-summary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.upgrade-total {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--text);
  line-height: 1;
}
.upgrade-total span {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  margin-left: 4px;
}
.upgrade-compare-wrap { overflow-x: auto; }
.upgrade-compare {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.upgrade-compare th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  padding: 0 10px 8px 0;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.upgrade-compare th:nth-child(5),
.upgrade-compare th:nth-child(6),
.upgrade-compare td:nth-child(5),
.upgrade-compare td:nth-child(6) { text-align: right; }
.upgrade-compare td {
  padding: 10px 10px 10px 0;
  border-bottom: 1px solid #f1f5f9;
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
}
.upgrade-compare tr:last-child td { border-bottom: 0; }
.upgrade-compare-arrow {
  color: #cbd5e1;
  width: 1.5em;
  text-align: center;
  padding-right: 6px !important;
}
.upgrade-compare tr.is-changed td:nth-child(4) {
  font-weight: 700;
  color: #15803d;
}
.upgrade-compare tr.is-changed td:nth-child(5),
.upgrade-compare tr.is-changed td:nth-child(6) {
  font-weight: 700;
  color: var(--text);
}
.upgrade-note {
  margin: 16px 0 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: #fffbeb;
  border: 1px solid #fcd34d;
  color: #78350f;
  font-size: 13px;
  line-height: 1.45;
}
#upgradeSubmit:disabled {
  opacity: .45;
  cursor: not-allowed;
}

@media (max-width: 860px) {
  .upgrade-row {
    grid-template-columns: 40px 1fr auto;
    grid-template-areas:
      "icon meta cost"
      "change change change"
      "step step step";
    gap: 10px 12px;
  }
  .upgrade-row-icon { grid-area: icon; }
  .upgrade-row-meta { grid-area: meta; }
  .upgrade-row-cost { grid-area: cost; align-self: start; }
  .upgrade-row-change { grid-area: change; }
  .upgrade-stepper { grid-area: step; justify-self: start; }
}
@media (max-width: 560px) {
  .upgrade-total { font-size: 24px; }
  .upgrade-compare th:nth-child(3),
  .upgrade-compare td:nth-child(3) { display: none; }
}