/* ServerDeck — compat layer: maps existing screen class names to the new
   design-system tokens so all screens work without rewriting them.          */

/* ── Universal input / select / textarea ────────────────────────────────
   Applies design-system styles to ALL bare form elements — no class needed.
   Smaller, crisper than the design default (10px pad vs 11px, 13px font).  */
:root {
  --inp-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%238A92A9' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="range"]):not([type="file"]):not(.al-input),
select:not(.al-input),
textarea:not(.al-input) {
  background: var(--surface);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-md);
  padding: 9px 12px;
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  width: 100%;
  transition: border-color .14s, box-shadow .14s;
  box-sizing: border-box;
  -webkit-appearance: none;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="range"]):not([type="file"]):not(.al-input)::placeholder,
textarea:not(.al-input)::placeholder { color: var(--text-3); }

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="range"]):not([type="file"]):not(.al-input):hover,
select:not(.al-input):hover,
textarea:not(.al-input):hover {
  border-color: color-mix(in srgb,var(--accent) 35%,var(--line-strong));
}
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="range"]):not([type="file"]):not(.al-input):focus,
select:not(.al-input):focus,
textarea:not(.al-input):focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* kill browser autofill blue/yellow tint globally */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--surface) inset !important;
  -webkit-text-fill-color: var(--text) !important;
  caret-color: var(--text);
  transition: background-color 9999s ease-in-out 0s;
}

select:not(.al-input) {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 36px;
  background-image: var(--inp-arrow);
  background-repeat: no-repeat; background-position: right 12px center;
}
textarea:not(.al-input) { resize: vertical; line-height: 1.5; min-height: 80px; }

/* Auth ──────────────────────────────────────────────────────────────────── */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--bg); background-image: var(--bg-grad); background-attachment: fixed; }
html[data-mock="on"] .auth-wrap { min-height: calc(100vh - 30px); }
.auth-card { width: 100%; max-width: 400px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 36px 32px; box-shadow: var(--shadow-lg); }
.auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
.auth-brand-mark { width: 44px; height: 44px; border-radius: 12px; background: var(--accent); display: grid; place-items: center; }
.auth-brand-mark img { width: 26px; height: 26px; filter: brightness(0) invert(1); }
.auth-title { font-size: 20px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 4px; }
.auth-sub { font-size: 13px; color: var(--text-2); margin-bottom: 22px; }
.auth-error { background: var(--danger-soft); color: var(--danger); border: 1px solid color-mix(in srgb,var(--danger) 30%,transparent); border-radius: var(--r-sm); padding: 10px 13px; font-size: 13px; font-weight: 500; margin-bottom: 16px; }
.auth-footer { font-size: 12px; color: var(--text-3); text-align: center; margin-top: 20px; }
.auth-locked { background: var(--warning-soft); color: var(--warning); border: 1px solid color-mix(in srgb,var(--warning) 30%,transparent); border-radius: var(--r-sm); padding: 10px 13px; font-size: 13px; margin-bottom: 16px; }
.mfa-field input { letter-spacing: .22em; text-align: center; font-family: var(--font-mono); font-size: 22px; font-weight: 700; }
.backup-code input { font-family: var(--font-mono); letter-spacing: .1em; }
.pass-wrap { position: relative; display: flex; align-items: center; }
.pass-wrap input { width: 100%; }
.pass-toggle { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--text-3); padding: 4px; background: none; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; }

/* ── Stat cards (summary) ──────────────────────────────────────────────── */

/* ── Login screen (scoped al- prefix, no conflicts) ────────────────────── */
.al-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: var(--bg); background-image: var(--bg-grad);
  background-attachment: fixed;
}
html[data-mock="on"] .al-wrap { padding-top: 54px; }

.al-card {
  width: 100%; max-width: 380px;
  background: var(--surface); border-radius: 20px;
  box-shadow: 0 8px 32px rgba(16,18,40,.10), 0 1px 4px rgba(16,18,40,.07);
  border: 1px solid var(--line); padding: 34px 30px 28px;
}
[data-theme="dark"] .al-card {
  box-shadow: 0 8px 40px rgba(0,0,0,.45), 0 1px 4px rgba(0,0,0,.3);
}
.al-brand { display: flex; align-items: center; gap: 14px; }
.al-mark {
  width: 48px; height: 48px; border-radius: 14px; flex-shrink: 0;
  background: linear-gradient(140deg, var(--accent), color-mix(in srgb,var(--accent) 70%,var(--accent-2)));
  display: grid; place-items: center;
  box-shadow: 0 2px 8px color-mix(in srgb,var(--accent) 40%,transparent);
}
.al-mark img { width: 26px; height: 26px; filter: brightness(0) invert(1); }
[data-theme="dark"] .al-mark img { filter: none; }
.al-name { font-size: 19px; font-weight: 700; letter-spacing: -.025em; color: var(--text); }
.al-name strong { color: var(--accent); }
.al-sub { font-size: 12.5px; color: var(--text-3); margin-top: 2px; }
.al-divider { height: 1px; background: var(--line); margin: 22px 0; }
.al-alert {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 10px 13px; border-radius: var(--r-sm); font-size: 12.5px;
  font-weight: 500; margin-bottom: 16px; line-height: 1.45;
}
.al-alert .ic { width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px; }
.al-alert-err    { background: var(--danger-soft); color: var(--danger); border: 1px solid color-mix(in srgb,var(--danger) 22%,transparent); }
.al-alert-locked { background: var(--warning-soft); color: var(--warning); border: 1px solid color-mix(in srgb,var(--warning) 22%,transparent); }
.al-hint { font-size: 13px; color: var(--text-2); margin: 0 0 18px; line-height: 1.5; }
.al-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.al-label { font-size: 12px; font-weight: 600; color: var(--text); letter-spacing: -.005em; }
.al-input {
  width: 100%; box-sizing: border-box;
  background: var(--surface); color: var(--text);
  border: 1.5px solid var(--line-strong); border-radius: var(--r-md);
  padding: 9px 13px; font-size: 13px; font-family: inherit;
  outline: none; -webkit-appearance: none;
  transition: border-color .14s, box-shadow .14s;
}
.al-input::placeholder { color: var(--text-3); }
.al-input:hover { border-color: color-mix(in srgb,var(--accent) 38%,var(--line-strong)); }
.al-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.al-input:-webkit-autofill,
.al-input:-webkit-autofill:hover,
.al-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--surface) inset !important;
  -webkit-text-fill-color: var(--text) !important;
  caret-color: var(--text); border-color: var(--line-strong) !important;
  transition: background-color 9999s ease-in-out 0s;
}
.al-otp  { font-family: var(--font-mono); font-size: 20px; font-weight: 700; letter-spacing: .18em; text-align: center; }
.al-mono { font-family: var(--font-mono); letter-spacing: .09em; }
.al-pass { position: relative; }
.al-pass .al-input { padding-right: 42px; }
.al-eye {
  position: absolute; right: 11px; top: 50%; transform: translateY(-50%);
  background: none; border: none; padding: 4px; cursor: pointer;
  color: var(--text-3); display: flex; align-items: center; transition: color .12s;
}
.al-eye:hover { color: var(--text-2); }
.al-eye .ic { width: 16px; height: 16px; }
.al-btn {
  width: 100%; margin-top: 6px;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 11px 18px; border-radius: var(--r-md);
  background: var(--accent); color: var(--accent-on);
  border: none; font-family: inherit; font-size: 14px; font-weight: 700;
  letter-spacing: -.01em; cursor: pointer;
  box-shadow: 0 2px 8px color-mix(in srgb,var(--accent) 38%,transparent);
  transition: background .14s, transform .12s, box-shadow .14s;
}
.al-btn:hover  { background: var(--accent-press); transform: translateY(-1px); }
.al-btn:active { transform: none; }
.al-btn:disabled { opacity: .65; cursor: not-allowed; transform: none; }
.al-btn .ic { width: 17px; height: 17px; }
.al-spinner {
  width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid rgba(255,255,255,.35); border-top-color: #fff;
  animation: al-spin .7s linear infinite;
}
@keyframes al-spin { to { transform: rotate(360deg); } }
.al-footer { font-size: 12px; color: var(--text-3); text-align: center; margin: 20px 0 0; }
.al-link { color: var(--accent); cursor: pointer; font-weight: 500; }
.al-link:hover { text-decoration: underline; }

.summary-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); margin-bottom: var(--gap); }
@media (max-width: 760px) { .summary-cards { grid-template-columns: repeat(2,1fr); } }
/* map .stat-card to .stat styles */
.stat-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 16px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; transition: transform .16s var(--ease), border-color .16s, box-shadow .16s; }
.stat-card:hover { transform: translateY(-2px); border-color: var(--line-strong); box-shadow: var(--shadow-md); }
.stat-card.stat-card-danger { border-color: color-mix(in srgb,var(--danger) 35%,var(--line)); }
.stat-card.stat-card-warn   { border-color: color-mix(in srgb,var(--warning) 35%,var(--line)); }
.stat-label { font-size: 11.5px; color: var(--text-2); font-weight: 600; display: flex; align-items: center; gap: 7px; }
.stat-label .ic { width: 15px; height: 15px; opacity: .8; }
.stat-value { font-size: 28px; font-weight: 800; letter-spacing: -.03em; margin-top: 7px; font-variant-numeric: tabular-nums; }
[data-density="compact"] .stat-value { font-size: 23px; }
.stat-value small { font-size: 13px; font-weight: 600; color: var(--text-3); letter-spacing: 0; }

/* ── Meters ─────────────────────────────────────────────────────────────── */
.meter-row { display: flex; align-items: center; gap: 8px; }
.meter-bar { flex: 1; height: 6px; border-radius: 6px; background: var(--meter-track); overflow: hidden; }
.meter-fill { height: 100%; border-radius: 6px; transition: width .8s var(--ease), background .4s; }
.meter-fill.lo  { background: var(--success); }
.meter-fill.mid { background: var(--warning); }
.meter-fill.hi  { background: var(--danger); }
.meter-label { font-family: var(--font-mono); font-size: 11px; color: var(--text-2); font-weight: 700; min-width: 32px; text-align: right; flex-shrink: 0; }

/* ── Tables ─────────────────────────────────────────────────────────────── */
.table-wrapper { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); margin-top: 4px; }
.data-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; }
.data-table thead { background: var(--surface-2); }
.data-table th { text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); padding: 11px 16px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.data-table td { padding: 0 16px; height: var(--row-h); border-bottom: 1px solid var(--line); vertical-align: middle; }
.data-table tbody tr { transition: background .12s; cursor: pointer; }
.data-table tbody tr:hover { background: var(--accent-soft); }
.data-table tbody tr:last-child td { border-bottom: none; }

/* ── Badges / pills ─────────────────────────────────────────────────────── */
.badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: 600; background: var(--surface-2); color: var(--text-2); white-space: nowrap; }
.badge-success { background: var(--success-soft); color: var(--success); }
.badge-danger  { background: var(--danger-soft);  color: var(--danger); }
.badge-info    { background: color-mix(in srgb,var(--accent-2) 13%,transparent); color: var(--accent-2); }
.badge-warn    { background: var(--warning-soft); color: var(--warning); }

/* ── Alert cards ────────────────────────────────────────────────────────── */
.alert-list { display: flex; flex-direction: column; gap: 8px; }
.alert-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 16px; }
.alert-card.alert-card-danger { border-color: color-mix(in srgb,var(--danger) 40%,var(--line)); background: var(--danger-soft); }
.alert-card.alert-card-warning { border-color: color-mix(in srgb,var(--warning) 40%,var(--line)); background: var(--warning-soft); }
.alert-card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.alert-card-title { font-weight: 700; font-size: 13.5px; flex: 1; }
.alert-card-meta  { font-size: 11.5px; color: var(--text-2); }
.alert-restore-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.alert-restore-row:last-child { border-bottom: none; }

/* ── KV grids ───────────────────────────────────────────────────────────── */
.kv-grid  { display: grid; grid-template-columns: 1fr 1fr; column-gap: 36px; }
@media (max-width: 760px) { .kv-grid { grid-template-columns: 1fr; column-gap: 0; } }
.kv-row   { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.kv-row:last-child { border-bottom: none; }
.kv-row span { color: var(--text-2); font-weight: 500; }
.kv-row strong { font-family: var(--font-mono); font-weight: 600; text-align: right; }

/* ── Score chip (capacity score) ────────────────────────────────────────── */
.score-chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 8px; }
.score-chip.good { color: var(--success); background: var(--success-soft); }
.score-chip.mid  { color: var(--warning); background: var(--warning-soft); }
.score-chip.bad  { color: var(--danger);  background: var(--danger-soft); }

/* ── Info callout ───────────────────────────────────────────────────────── */
.info-callout { display: flex; gap: 11px; padding: 13px 15px; border-radius: var(--r-md); background: var(--accent-soft); border: 1px solid color-mix(in srgb,var(--accent) 22%,transparent); }
.info-callout .ic { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; margin-top: 1px; }
.info-callout b   { display: block; font-size: 13px; font-weight: 700; color: var(--accent); }
.info-callout p   { font-size: 12px; color: color-mix(in srgb,var(--accent) 72%,var(--text)); margin: 3px 0 0; line-height: 1.5; }

/* ── Scan / terminal log ────────────────────────────────────────────────── */
.scan-log, .log-viewer { background: #0C0E14; color: #cfd6e6; border-radius: var(--r-md); border: 1px solid var(--line); font-family: var(--font-mono); font-size: 12px; line-height: 1.85; padding: 14px 16px; max-height: 360px; overflow: auto; white-space: pre-wrap; word-break: break-word; margin-top: 12px; }
.scan-log-line { padding: 1px 0; }
.scan-log-line.ok   { color: #34d27b; }
.scan-log-line.warn { color: #f2b23e; }
.scan-log-line.err  { color: #ff5c5c; }

/* ── Findings ───────────────────────────────────────────────────────────── */
.findings-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.finding-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); }
.finding-type { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px; border-radius: 5px; background: var(--danger-soft); color: var(--danger); flex-shrink: 0; }
.finding-file { font-family: var(--font-mono); font-size: 12px; color: var(--text); font-weight: 600; }
.finding-more { font-size: 11.5px; color: var(--text-2); margin-top: 3px; }

/* ── Topo (Failover) ────────────────────────────────────────────────────── */
.topo-container  { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--gap); }
.topo-sync-server{ background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.topo-sync-header{ display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--surface-2); border-bottom: 1px solid var(--line); font-weight: 700; font-size: 13.5px; font-family: var(--font-mono); }
.topo-sync-header .ic { width: 17px; height: 17px; color: var(--accent); }
.topo-web-list   { padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.topo-web-item   { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--r-sm); background: var(--surface-2); font-size: 13px; }
.topo-web-item .ic { width: 16px; height: 16px; color: var(--text-3); flex-shrink: 0; }
.topo-web-item .t2 { font-size: 11.5px; color: var(--text-3); flex-shrink: 0; }

/* ── Steps list ─────────────────────────────────────────────────────────── */
.steps-list { display: flex; flex-direction: column; gap: 4px; margin: 12px 0; }
.step-item  { display: flex; align-items: center; gap: 10px; padding: 9px 13px; border-radius: var(--r-sm); background: var(--surface-2); font-size: 13px; }
.estimate-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px; }
.estimate-card h4 { font-size: 14px; font-weight: 700; margin-bottom: 12px; }

/* ── Form helpers ───────────────────────────────────────────────────────── */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }
.form-group { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.form-group label { font-size: 12px; font-weight: 600; color: var(--text); }
.form-actions { display: flex; align-items: center; gap: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.form-check { display: flex; align-items: flex-start; gap: 10px; }
.form-check-input { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--accent); }
.form-check-label { font-size: 13px; color: var(--text); }
.field-hint { font-size: 11.5px; color: var(--text-3); line-height: 1.4; }
.required { color: var(--danger); font-weight: 700; }
.input-error { border-color: var(--danger) !important; box-shadow: 0 0 0 3px var(--danger-soft) !important; }

/* ── Provisions / plan grid ─────────────────────────────────────────────── */
.ns-grid   { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
@media (max-width: 800px) { .ns-grid { grid-template-columns: repeat(2, 1fr); } }
.ns-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.ns-sec-lbl{ font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); margin-bottom: 10px; }
.ns-sticky { position: sticky; top: 14px; }
.ns-summary{ background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px; }
.pick-card { border: 1.5px solid var(--line); border-radius: var(--r-md); padding: 13px 14px; cursor: pointer; transition: border-color .14s, background .14s; background: var(--surface); text-align: left; width: 100%; }
.pick-card:hover { border-color: var(--line-strong); }
.pick-card.sel { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.pick-name { font-weight: 700; font-size: 13.5px; display: block; margin-bottom: 3px; }
.pick-sub  { font-size: 11.5px; color: var(--text-2); }
.pick-card.sel .pick-sub { color: color-mix(in srgb,var(--accent) 72%,var(--text)); }
.pick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.plan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.plan-card { border: 1.5px solid var(--line); border-radius: var(--r-md); padding: 14px; cursor: pointer; transition: border-color .14s; background: var(--surface); text-align: left; width: 100%; }
.plan-card:hover { border-color: var(--line-strong); }
.plan-card.sel { border-color: var(--accent); background: var(--accent-soft); }
.plan-price { font-size: 18px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 8px; }
.plan-cpu, .plan-ram, .plan-disk { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-2); }

/* ── Account / MFA ──────────────────────────────────────────────────────── */
.account-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: start; }
@media (max-width: 860px) { .account-grid { grid-template-columns: 1fr; } }
.mfa-setup { text-align: center; padding: 20px; }
.qr-code { width: 160px; height: 160px; border-radius: var(--r-md); background: #fff; display: inline-grid; place-items: center; border: 1px solid var(--line); margin: 14px auto; }
.backup-codes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0; }
.backup-codes-bo { font-family: var(--font-mono); font-size: 13px; font-weight: 600; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 14px; text-align: center; letter-spacing: .1em; }
.manual-key { font-family: var(--font-mono); font-size: 11.5px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 13px; word-break: break-all; letter-spacing: .04em; }
.reveal-row  { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.reveal-row:last-child { border-bottom: none; }
.reveal-label{ width: 140px; flex-shrink: 0; font-size: 12px; font-weight: 600; color: var(--text-2); }
.reveal-val  { flex: 1; font-family: var(--font-mono); font-size: 12.5px; }
.reveal-btn  { background: none; border: 1px solid var(--line); border-radius: var(--r-xs); padding: 4px 10px; font-size: 11.5px; font-weight: 600; color: var(--text-2); cursor: pointer; transition: border-color .14s, color .14s; }
.reveal-btn:hover { border-color: var(--accent); color: var(--accent); }
.user-display { display: flex; align-items: center; gap: 12px; }
.user-avatar-sm { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg,var(--accent),var(--accent-2)); display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 12px; flex-shrink: 0; }

/* ── Plesk ──────────────────────────────────────────────────────────────── */
.plesk-sites-panel { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; margin-top: 14px; }
.plesk-sites-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.plesk-sites-table th { text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); padding: 10px 14px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.plesk-sites-table td { padding: 9px 14px; border-bottom: 1px solid var(--line); }
.plesk-sites-table tr:last-child td { border-bottom: none; }
.test-detail { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.test-label  { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-3); }
.test-result { font-size: 13px; display: flex; align-items: center; gap: 8px; }

/* ── DNS ────────────────────────────────────────────────────────────────── */
.dns-match { color: var(--success); font-weight: 600; }
.dns-mismatch { color: var(--danger); font-weight: 600; }

/* ── Legacy button aliases ──────────────────────────────────────────────── */
.btn-primary { background: var(--accent); color: var(--accent-on); border: none; display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: var(--r-sm); font-weight: 600; font-size: 12.5px; cursor: pointer; }
.btn-ghost   { background: transparent; border: 1px solid var(--line); color: var(--text-2); display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: var(--r-sm); font-weight: 600; font-size: 12.5px; cursor: pointer; }
.btn-xs      { padding: 4px 9px; font-size: 11px; border-radius: var(--r-xs); }
.full        { width: 100%; justify-content: center; }
.lg          { padding: 11px 20px; font-size: 13.5px; }

/* ── Utility spacing ────────────────────────────────────────────────────── */
.hstack      { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.spacer      { flex: 1; }
.t2          { color: var(--text-2); }
.t3          { color: var(--text-3); }
.muted       { color: var(--text-3); }
.mono        { font-family: var(--font-mono); }
.fw-600      { font-weight: 600; }
.mt-2        { margin-top: 8px; }
.mt-3        { margin-top: 14px; }
.mt-4        { margin-top: 22px; }
.mb-2        { margin-bottom: 8px; }
.mb-3        { margin-bottom: 14px; }
.mb-4        { margin-bottom: 22px; }
.gap-1       { gap: 4px; }
.gap-2       { gap: 8px; }
.wrap        { flex-wrap: wrap; }
.grow        { flex: 1; }
.col         { display: flex; flex-direction: column; }
.text-success{ color: var(--success); }
.text-warning{ color: var(--warning); }
.text-danger { color: var(--danger); }
.text-center { text-align: center; }
.font-mono   { font-family: var(--font-mono); }
.loading-state { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 48px; color: var(--text-3); }
.section-label { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.success-banner { background: var(--success-soft); color: var(--success); border: 1px solid color-mix(in srgb,var(--success) 30%,transparent); border-radius: var(--r-md); padding: 12px 15px; font-weight: 500; }

/* ── Mock banner offset ──────────────────────────────────────────────────── */
html[data-mock="on"] #app { margin-top: 30px; height: calc(100vh - 30px); }
html[data-mock="on"] .auth-wrap { padding-top: 54px; }

/* ── Filter bar ─────────────────────────────────────────────────────────── */
.filter-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.filter-bar .search { width: auto; flex: 1; max-width: 320px; }

/* ── User chip dropdown ──────────────────────────────────────────────────── */
.uc-wrap { position: relative; flex: none; }
.uc-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 80;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--shadow-lg);
  min-width: 200px; overflow: hidden;
  animation: ucpop .15s var(--ease);
}
.uc-menu.hidden { display: none; }
@keyframes ucpop { from { opacity:0; transform:translateY(-6px) scale(.98); } to { opacity:1; transform:none; } }
.uc-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 15px; font-size: 13px; font-weight: 500; color: var(--text);
  background: none; border: none; cursor: pointer; text-align: left;
  font-family: inherit; transition: background .12s;
}
.uc-item:hover { background: var(--surface-2); }
.uc-item .ic { width: 16px; height: 16px; color: var(--text-3); flex-shrink: 0; }
.uc-item.danger { color: var(--danger); }
.uc-item.danger .ic { color: var(--danger); }
.uc-item.danger:hover { background: var(--danger-soft); }
.uc-sep { height: 1px; background: var(--line); margin: 2px 0; }

/* ── Constrain selects/inputs in table cells and inline contexts ────────── */
/* Prevents the global width:100% from making table-cell selects full-width  */
td select, td input,
.row select:not([style*="width"]), .hstack select:not([style*="width"]) {
  width: auto !important;
}
/* Selects inside small spaces get fit-content */
.row-actions select, .filter-bar select { width: auto !important; }

/* ── Hub compact search button (non-hub pages) ──────────────────────────── */
.hub-search-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--line);
  color: var(--text-3); font-size: 13px; font-family: inherit;
  cursor: pointer; transition: border-color .14s, background .14s;
  white-space: nowrap;
}
.hub-search-btn:hover { border-color: var(--line-strong); background: var(--surface); color: var(--text-2); }
.hub-search-btn .ic  { width: 15px; height: 15px; flex-shrink: 0; }
.hub-search-btn span { font-size: 13px; }

/* ── Provisioning live view ─────────────────────────────────────────────── */
.prov-wrap {
  max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px;
}
.prov-head {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 22px 24px; border-radius: 14px;
  background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
}
.prov-spinner {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; margin-top: 2px;
  border: 3px solid color-mix(in srgb, var(--accent) 20%, transparent);
  border-top-color: var(--accent);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.prov-title { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.prov-title .ic { width: 18px; height: 18px; color: var(--accent); }
.prov-sub { font-size: 12px; color: var(--text-3); }

.prov-steps {
  display: flex; flex-direction: column; gap: 0;
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
}
.prov-step {
  padding: 10px 16px; font-size: 13px; font-weight: 500; color: var(--text-3);
  border-bottom: 1px solid var(--line); background: var(--surface-2);
  position: relative; padding-left: 38px;
}
.prov-step:last-child { border-bottom: none; }
.prov-step::before {
  content: '○'; position: absolute; left: 14px; color: var(--line-strong);
}
.prov-step.active {
  color: var(--accent); background: var(--accent-soft); font-weight: 600;
}
.prov-step.active::before { content: '◉'; color: var(--accent); }
.prov-step.done { color: var(--success); }
.prov-step.done::before { content: '✓'; color: var(--success); }
.prov-step.failed { color: var(--danger); background: var(--danger-soft); font-weight: 600; }
.prov-step.failed::before { content: '✗'; color: var(--danger); }
.prov-wrap.failed .prov-spinner { animation: none; border-top-color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
.prov-fail { margin-top: 14px; border: 1px solid color-mix(in srgb, var(--danger) 40%, var(--line)); background: var(--danger-soft); border-radius: 12px; padding: 14px 16px; }
.prov-fail .pf-title { font-weight: 700; color: var(--danger); font-size: 14px; }
.prov-fail .pf-msg { font-size: 12.5px; color: var(--text-2); margin: 6px 0 12px; font-family: var(--font-mono); word-break: break-word; }
.prov-fail .pf-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.prov-log-wrap {
  border: 1px solid #2a2d3a; border-radius: 12px; overflow: hidden;
}
.prov-log-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px; font-size: 11px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: #8b949e; background: #161b22;
  border-bottom: 1px solid #2a2d3a;
}
.prov-log-head-dots { display: flex; gap: 6px; }
.prov-log-head-dots span { width: 12px; height: 12px; border-radius: 50%; }
.prov-log-head-dots span:nth-child(1) { background: #ff5f57; }
.prov-log-head-dots span:nth-child(2) { background: #ffbd2e; }
.prov-log-head-dots span:nth-child(3) { background: #28c840; }
.prov-log {
  background: #0d1117; padding: 14px 16px;
  height: 420px; overflow-y: auto; scroll-behavior: smooth;
  font-family: var(--font-mono); font-size: 11.5px; line-height: 1.75;
  color: #c9d1d9; display: flex; flex-direction: column; gap: 1px;
}
.prov-log-line { word-break: break-all; white-space: pre-wrap; }
.prov-log-line.ok   { color: #7ee787; }
.prov-log-line.err  { color: #f85149; }
.prov-log-line.warn { color: #e3b341; }
.prov-log-line.info { color: #58a6ff; }
.prov-log-line.dim  { color: #484f58; }
.prov-check { color: #7ee787; margin-right: 6px; }
.prov-out   { color: #c9d1d9; }
.prov-done  { color: #7ee787; }
.prov-err   { color: #f85149; }
.prov-cursor { color: #58a6ff; animation: blink 1s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }


/* ── Empty states ────────────────────────────────────────────── */
.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 80px 24px; text-align: center; gap: 12px;
}
.empty-ic { width: 56px; height: 56px; border-radius: 16px; background: var(--accent-soft);
  display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.empty-ic .ic { width: 28px; height: 28px; color: var(--accent); }
.empty-state h2 { font-size: 20px; font-weight: 700; color: var(--text); margin: 0; }
.empty-state p  { font-size: 14px; color: var(--text-3); margin: 0; max-width: 300px; }

/* ── DB Console ─────────────────────────────────────────────── */
.db-console { display:flex; flex-direction:column; gap:12px; padding:16px; }
.db-console-bar { display:flex; align-items:center; gap:12px; }
.db-console-label { font-size:12px; font-weight:600; color:var(--text-3); display:flex; align-items:center; gap:6px; }
.db-console-label .ic { width:14px; height:14px; }
.db-console-input-wrap { display:flex; gap:10px; align-items:flex-start; }
.db-console-input {
  flex:1; min-height:80px; padding:10px 12px; border-radius:var(--r-sm);
  border:1px solid var(--line-strong); background:var(--surface-2);
  font-family:var(--font-mono); font-size:12px; color:var(--text); resize:vertical;
}
.db-console-input:focus { outline:none; border-color:var(--accent); }
.db-console-result { border:1px solid var(--line); border-radius:var(--r-sm); overflow:auto; max-height:360px; }
.db-err { padding:14px 16px; color:var(--danger); font-size:13px; display:flex; align-items:center; gap:8px; }
.db-err .ic { width:16px; height:16px; }
.log-pre { font-family:var(--font-mono); font-size:11px; line-height:1.7; padding:16px; color:var(--text-2); white-space:pre-wrap; word-break:break-all; }

/* ── File Manager ───────────────────────────────────────────── */
.file-manager { display:flex; flex-direction:column; }
.fm-bar { display:flex; align-items:center; gap:10px; padding:10px 16px; border-bottom:1px solid var(--line); background:var(--surface-2); }
.fm-path { font-family:var(--font-mono); font-size:12px; color:var(--accent); flex:1; }
.fm-body { padding:8px; min-height:200px; }
.fm-list { display:flex; flex-direction:column; gap:1px; }
.fm-item { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:6px; font-size:13px; cursor:default; }
.fm-item.dir { cursor:pointer; }
.fm-item:hover { background:var(--surface-2); }
.fm-item .ic { width:16px; height:16px; flex-shrink:0; color:var(--text-3); }
.fm-item.dir .ic { color:var(--accent); }
.fm-name { flex:1; font-weight:500; }
.fm-meta { font-size:11px; color:var(--text-3); font-family:var(--font-mono); }
.fm-date { font-size:11px; color:var(--text-3); min-width:120px; text-align:right; }

/* ── TV mode ────────────────────────────────────────────────── */
body.tv-mode .hub-top,
body.tv-mode .topbar,
body.tv-mode .bottom-nav,
body.tv-mode .breadcrumb,
body.tv-mode .user-cluster,
body.tv-mode .cog-fab { display:none !important; }
body.tv-mode #app { padding:0; }

/* ── Servers empty state cards ───────────────────────────────── */
.srv-empty-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 8px;
}
@media (max-width: 700px) { .srv-empty-grid { grid-template-columns: 1fr; } }

.srv-empty-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 10px; padding: 36px 24px;
  border: 1.5px dashed var(--line-strong); border-radius: var(--r-lg);
  background: var(--surface-2); transition: border-color .15s, background .15s;
}
.srv-empty-card:hover { border-color: var(--accent); background: var(--accent-soft); }
.srv-empty-card .ic { width: 32px; height: 32px; color: var(--accent); opacity: .7; }
.srv-empty-card b { font-size: 15px; font-weight: 700; color: var(--text); }
.srv-empty-card span { font-size: 12px; color: var(--text-3); line-height: 1.5; }
.btn.sm { padding: 6px 14px; font-size: 12px; }

/* ═══════════════════════════════════════════════════
   FEATURE CSS v2 — Document Root, CF, DB Console,
   File Manager (Monaco), Subdomains, DB Import
   ═══════════════════════════════════════════════════ */

.docroot-badge{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;background:var(--surface-2,#f4f5f7);border:1px solid var(--line,#e2e4ea);border-radius:4px;font-size:11px;font-family:monospace;color:var(--text-2)}
.cf-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:500}
.cf-badge.active{background:#fff7ed;color:#92400e}
.cf-account-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:.5px solid var(--line)}
.cf-account-row:last-child{border-bottom:none}
.cf-zone-chip{padding:2px 8px;background:var(--surface-2);border-radius:10px;font-size:11px;color:var(--text-2)}
.db-console-full{display:grid;grid-template-columns:220px 1fr;height:520px;border:1px solid var(--line);border-radius:var(--r,8px);overflow:hidden}
.db-sidebar{border-right:1px solid var(--line);overflow-y:auto;background:var(--surface-2)}
.db-sidebar-hd{padding:10px 12px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--text-3);border-bottom:1px solid var(--line)}
.db-tbl-item{padding:8px 12px;cursor:pointer;font-size:12px;display:flex;align-items:center;justify-content:space-between;border-bottom:.5px solid var(--line)}
.db-tbl-item:hover,.db-tbl-item.active{background:var(--accent-10,rgba(79,70,229,.08))}
.db-tbl-item.active{color:var(--accent)}
.db-tbl-count{font-size:10px;color:var(--text-3);font-family:monospace}
.db-main{display:flex;flex-direction:column;overflow:hidden}
.db-tabs-bar{display:flex;border-bottom:1px solid var(--line);background:var(--surface-2);padding:0 8px;flex-shrink:0}
.db-tabs-bar button{padding:8px 12px;font-size:12px;background:none;border:none;border-bottom:2px solid transparent;color:var(--text-2);cursor:pointer;white-space:nowrap}
.db-tabs-bar button.active{border-bottom-color:var(--accent);color:var(--text);font-weight:500}
.db-tab-body{flex:1;overflow:auto;padding:12px;display:flex;flex-direction:column;gap:8px}
.db-results-tbl{width:100%;border-collapse:collapse;font-size:12px}
.db-results-tbl th{background:var(--surface-2);padding:6px 10px;text-align:left;font-weight:500;border-bottom:1px solid var(--line);position:sticky;top:0;white-space:nowrap}
.db-results-tbl td{padding:5px 10px;border-bottom:.5px solid var(--line);font-family:monospace;white-space:nowrap;max-width:260px;overflow:hidden;text-overflow:ellipsis}
.db-results-tbl tr:hover td{background:var(--surface-2)}
.db-query-area{resize:none;font-family:monospace;font-size:12px;line-height:1.6;padding:10px;border:1px solid var(--line);border-radius:6px;outline:none;background:var(--surface);color:var(--text);width:100%;min-height:90px}
.db-run-bar{display:flex;align-items:flex-end;gap:8px;padding:8px 0;flex-shrink:0}
.db-row-nav{display:flex;align-items:center;gap:8px;padding:8px 0;font-size:12px;color:var(--text-2)}
.db-struct-row{display:grid;grid-template-columns:160px 120px 80px 1fr;padding:6px 10px;font-size:12px;border-bottom:.5px solid var(--line);font-family:monospace}
.db-struct-hd{background:var(--surface-2);font-weight:500;font-family:inherit}
.fm-wrap{display:grid;grid-template-columns:240px 1fr;height:540px;border:1px solid var(--line);border-radius:var(--r,8px);overflow:hidden}
.fm-tree{border-right:1px solid var(--line);overflow-y:auto;background:var(--surface-2);display:flex;flex-direction:column}
.fm-tree-hd{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid var(--line);flex-shrink:0}
.fm-tree-hd button{padding:3px 7px;background:none;border:1px solid var(--line);border-radius:4px;cursor:pointer;font-size:11px;color:var(--text-2)}
.fm-tree-hd button:hover{background:var(--surface)}
.fm-item{display:flex;align-items:center;gap:5px;padding:5px 12px;cursor:pointer;font-size:12px;user-select:none;white-space:nowrap;overflow:hidden}
.fm-item:hover{background:var(--surface)}
.fm-item.active{background:var(--accent-10);color:var(--accent)}
.fm-item.dir{font-weight:500}
.fm-editor{display:flex;flex-direction:column;overflow:hidden;background:var(--surface)}
.fm-editor-bar{display:flex;align-items:center;gap:8px;padding:6px 12px;border-bottom:1px solid var(--line);background:var(--surface-2);font-size:12px;flex-shrink:0}
.fm-editor-bar .fm-path{color:var(--text-3);font-family:monospace;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fm-monaco-wrap{flex:1;overflow:hidden;min-height:0}
.fm-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--text-3);gap:8px;font-size:13px}
.subdomain-badge{display:inline-flex;align-items:center;gap:3px;padding:1px 7px;background:var(--surface-2);border-radius:10px;font-size:10px;color:var(--text-3);margin-left:6px}
.shared-db-tag{display:inline-block;padding:1px 6px;background:#ede9fe;color:#5b21b6;border-radius:8px;font-size:10px;margin-left:4px}
.import-tabs{display:flex;border-bottom:1px solid var(--line)}
.import-tabs button{padding:10px 16px;background:none;border:none;border-bottom:2px solid transparent;font-size:13px;cursor:pointer;color:var(--text-2)}
.import-tabs button.active{border-bottom-color:var(--accent);color:var(--text);font-weight:500}
.import-body{padding:16px}
.import-drop{border:2px dashed var(--line);border-radius:var(--r,8px);padding:32px;text-align:center;cursor:pointer;transition:border-color .15s;display:block}
.import-drop:hover{border-color:var(--accent)}
.import-progress-bar-wrap{height:8px;background:var(--surface-2);border-radius:4px;overflow:hidden;margin:8px 0}
.import-progress-bar{height:100%;background:var(--accent);transition:width .3s;border-radius:4px}
.import-err-row{display:grid;grid-template-columns:60px 1fr 1fr;gap:8px;padding:5px 8px;font-size:11px;border-bottom:.5px solid var(--line);font-family:monospace}
.import-err-row.bad{color:#dc2626;background:#fef2f2}
.import-history-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:.5px solid var(--line);font-size:12px}
.import-history-row:last-child{border-bottom:none}

/* ── Grouped size selector ── */
.ns-grouped { max-height: 440px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--r,8px); }
.ns-group { border-bottom: 1px solid var(--line); }
.ns-group:last-child { border-bottom: none; }
.ns-group-hd {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; background: var(--surface-2);
  cursor: pointer; user-select: none;
  position: sticky; top: 0; z-index: 1;
  transition: background .12s;
}
.ns-group-hd:hover { background: var(--surface); }
.ns-group-label { font-size: 12px; font-weight: 600; flex: 1; letter-spacing: .01em; }
.ns-group-count { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 1px 8px; font-size: 10px; color: var(--text-3); }
.ns-group-chevron { font-size: 9px; color: var(--text-3); margin-left: 2px; }
.ns-group-body { overflow: hidden; }
.ns-size-list.ns-grouped .ns-size-row { border-bottom: .5px solid var(--line); margin: 0; border-radius: 0; }
.ns-size-list.ns-grouped .ns-size-row:last-child { border-bottom: none; }
.ns-group.open .ns-group-hd { background: var(--surface); }

/* ── Screen module compat — maps legacy class names to design system ─────────
   These screens pre-date the unified design. All classes below are aliases
   so every table, card, badge, and meter renders identically site-wide.    */

/* Badges (→ pills) */
.badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600;letter-spacing:.03em;line-height:1.4}
.badge-success,.badge.badge-success{background:rgba(34,197,94,.15);color:#15803d}
.badge-danger,.badge.badge-danger{background:rgba(239,68,68,.12);color:#b91c1c}
.badge-warning,.badge.badge-warning{background:rgba(245,158,11,.15);color:#b45309}
.badge-info,.badge.badge-info{background:rgba(14,165,233,.12);color:#0369a1}
.badge-secondary,.badge.badge-secondary{background:var(--surface-2);color:var(--text-2)}

/* Stat cards (pool / users / monitor summary) */
.summary-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--gap,16px);margin-bottom:var(--gap,16px)}
.stat-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius,10px);padding:20px 24px}
.stat-card-danger{border-top:3px solid var(--danger)}
.stat-card-warn{border-top:3px solid #f59e0b}
.stat-value{font-size:28px;font-weight:700;color:var(--text);line-height:1;margin:8px 0 4px}
.stat-label{font-size:12px;font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:.05em}
.text-danger,.stat-value.text-danger{color:var(--danger)!important}
.text-success,.stat-value.text-success{color:#22c55e!important}
.text-warning,.stat-value.text-warning{color:#f59e0b!important}

/* KV rows (account / server config) */
.kv-grid{display:flex;flex-direction:column}
.kv-row{display:flex;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--line);gap:12px;font-size:13px}
.kv-row:last-child{border-bottom:none}
.kv-row>span:first-child{color:var(--text-3);font-weight:500;min-width:130px;flex-shrink:0}
.kv-row>strong{color:var(--text);font-weight:600}

/* Meters (pool health) */
.meter-row{display:flex;align-items:center;gap:8px;margin:3px 0}
.meter-bar{flex:1;height:6px;background:var(--surface-2);border-radius:3px;overflow:hidden}
.meter-fill{height:100%;border-radius:3px;transition:width .3s;background:var(--accent)}
.meter-fill.success{background:#22c55e}
.meter-fill.warning{background:#f59e0b}
.meter-fill.danger{background:var(--danger)}
.meter-label{font-size:11px;font-weight:600;color:var(--text-2);min-width:32px;text-align:right}

/* Alert cards (monitor) */
.alert-list{display:flex;flex-direction:column;gap:8px}
.alert-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius,10px);padding:16px}
.alert-card-danger{border-left:3px solid var(--danger)}
.alert-card-warn{border-left:3px solid #f59e0b}
.alert-card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.alert-card-title{font-size:14px;font-weight:600;color:var(--text)}
.alert-card-meta{font-size:12px;color:var(--text-3);margin-top:3px}

/* Tables (data-table / table-wrapper) */
.table-wrapper{border-radius:var(--radius,10px);overflow:hidden;border:1px solid var(--line)}
.data-table{width:100%;border-collapse:collapse}
.data-table th{padding:10px 14px;background:var(--surface-2);font-size:11.5px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--line);text-align:left}
.data-table td{padding:10px 14px;font-size:13px;border-bottom:1px solid var(--line);color:var(--text)}
.data-table tr:last-child td{border-bottom:none}
.data-table tbody tr:hover td{background:var(--surface-2)}

/* Button compat (Bootstrap-style → design system) */
.btn.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn.btn-ghost{background:transparent;color:var(--text);border-color:var(--line)}
.btn.btn-warning{background:rgba(245,158,11,.12);color:#b45309;border-color:rgba(245,158,11,.3)}
.btn.btn-xs{font-size:11px;padding:2px 8px;height:24px;min-height:0}

/* Info callout */
.info-callout{background:var(--accent-tint,rgba(14,165,233,.07));border:1px solid rgba(14,165,233,.2);border-radius:var(--radius,10px);padding:12px 16px;font-size:13px;color:var(--text-2)}

/* Scan / live log */
.scan-log{font-family:var(--font-mono);font-size:12px;background:#0f172a;color:#a1fac8;padding:16px;border-radius:var(--radius,10px);max-height:260px;overflow-y:auto;line-height:1.7}

/* Section title (→ section-label) */
.section-title{font-size:11px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.07em;margin:24px 0 10px}

/* Account grid */
.account-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--gap,16px)}

/* Topology (failover screen) */
.topo-container{display:flex;flex-direction:column;gap:16px}
.topo-sync-server{background:var(--surface);border:1px solid rgba(14,165,233,.25);border-radius:var(--radius,10px);padding:16px}
.topo-sync-header{font-weight:600;font-size:14px;margin-bottom:10px}
.topo-web-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.topo-web-item{background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:6px 12px;font-size:12px}

/* Server list (failover / pool) */
.server-list{display:flex;flex-direction:column;gap:8px}
.server-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius,10px);padding:14px 16px}
.server-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.server-card-title{font-size:14px;font-weight:600;color:var(--text)}
.server-card-meta{font-size:12px;color:var(--text-3)}

/* User display */
.user-display{display:flex;align-items:center;gap:8px}
.user-avatar-sm{width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0}

/* MFA / backup codes */
.mfa-setup{display:flex;flex-direction:column;align-items:center;gap:16px;padding:16px 0;text-align:center}
.backup-codes-box{background:var(--surface-2);border-radius:var(--radius,10px);padding:14px 16px}
.backup-codes-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin:12px 0}
.backup-code{font-family:var(--font-mono);font-size:13px;font-weight:600;color:var(--text);letter-spacing:.08em}
.manual-key{font-family:var(--font-mono);font-size:11px;background:var(--surface-2);padding:8px 12px;border-radius:6px;word-break:break-all;margin:8px 0}

/* Steps list (migrations) */
.steps-list{display:flex;flex-direction:column;gap:0}
.step-item{display:flex;align-items:center;gap:10px;font-size:13px;padding:8px 0;border-bottom:1px solid var(--line)}
.step-item:last-child{border-bottom:none}

/* Estimate card (migrations) */
.estimate-card{background:var(--surface-2);border-radius:var(--radius,10px);padding:16px;margin-bottom:16px}

/* Plesk */
.plesk-sites-panel{margin-top:16px}
.plesk-sites-table{width:100%;border-collapse:collapse}

/* Success banner */
.success-banner{background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.3);border-radius:var(--radius,10px);padding:12px 16px;font-size:13px;color:#15803d;font-weight:500}

/* Text / spacing utilities */
.text-muted,.t3{color:var(--text-3)}
.text-sm{font-size:12px}
.font-mono,.mono{font-family:var(--font-mono,monospace)}
.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:20px}
.mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}.mb-4{margin-bottom:20px}
.hstack{display:flex;align-items:center}
.gap-1{gap:4px}.gap-2{gap:8px}.gap-3{gap:12px}
.flex-wrap{flex-wrap:wrap}
.col{flex:1;min-width:0}
.form-group,.form-row{margin-bottom:14px}
.form-check-input{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}
.form-check-label{font-size:13px;margin-left:6px;cursor:pointer}
.required::after{content:" *";color:var(--danger);font-weight:700}
.score-chip.good{background:rgba(34,197,94,.15);color:#15803d}
.score-chip.mid{background:rgba(245,158,11,.15);color:#b45309}
.score-chip.bad{background:rgba(239,68,68,.12);color:#b91c1c}

/* ── Hub activity feed ───────────────────────────────────────────────────── */
.live-feed { padding:4px 16px 8px; }
.act-row { display:flex; align-items:flex-start; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); }
.act-row:last-child { border-bottom:none; }
.act-ic { width:30px; height:30px; border-radius:8px; background:var(--surface-2); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px; }
.act-ic .ic { width:15px; height:15px; color:var(--text-2); }
.act-body { flex:1; min-width:0; }
.act-title { font-size:13px; font-weight:600; color:var(--text); display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.act-meta { font-size:11.5px; color:var(--text-3); margin-top:2px; }
.act-label { font-family:var(--font-mono); font-size:11px; font-weight:500; color:var(--accent); background:var(--accent-soft); padding:1px 7px; border-radius:5px; }
.act-dur { font-size:11px; color:var(--text-3); }
.act-dur.running { color:var(--accent); font-weight:600; }
.act-detail { color:var(--text-2); }
.act-dot { display:inline-block; width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.act-dot.running { background:var(--accent); box-shadow:0 0 0 0 var(--accent); animation:act-pulse 1.4s ease infinite; }
.act-dot.done { background:var(--success); }
.act-dot.failed { background:var(--danger); }
@keyframes act-pulse {
  0%   { box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 60%,transparent); }
  70%  { box-shadow:0 0 0 6px transparent; }
  100% { box-shadow:0 0 0 0 transparent; }
}

/* ── Provisioning live view — granular step + substep checklist (pass 2) ─── */
.prov-bar { height: 3px; background: var(--surface-2); border-radius: 2px; overflow: hidden; }
.prov-bar > i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .3s; }

.prov-step { display: block; padding: 0; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.prov-step::before { content: none; }
.prov-step:last-child { border-bottom: none; }
.prov-step-row { display: flex; align-items: center; gap: 10px; padding: 11px 16px; }
.prov-step.clk .prov-step-row { cursor: pointer; }
.prov-step.clk:hover .prov-step-row { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.prov-step-ic { width: 18px; flex: 0 0 18px; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.prov-step-label { flex: 1; font-size: 13px; font-weight: 500; color: var(--text-2); }
.prov-step.run  .prov-step-label { color: var(--text); font-weight: 600; }
.prov-step.fail .prov-step-label { color: var(--danger); font-weight: 600; }
.prov-step-meta { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); }
.prov-step.run  .prov-step-meta { color: var(--accent); }
.prov-step.fail .prov-step-meta { color: var(--danger); }

.prov-spin { display: inline-block; width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--accent) 25%, transparent); border-top-color: var(--accent);
  animation: spin .8s linear infinite; }
.prov-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--line-strong); }
.prov-ic-ok   { color: var(--success); }
.prov-ic-warn { color: var(--warning); }
.prov-ic-fail { color: var(--danger); }

.prov-subs { padding: 0 16px 8px 44px; display: flex; flex-direction: column; }
.prov-subs .prov-sub { display: flex; align-items: baseline; gap: 8px; padding: 3px 0; font-size: 12px; color: var(--text-3); }
.prov-subs .prov-sub .pmark { flex: 0 0 14px; color: var(--success); }
.prov-subs .prov-sub.fail .pmark { color: var(--danger); }
.prov-subs .prov-sub .ptxt { flex: 1; }
.prov-subs .prov-sub.fail .ptxt { color: var(--danger); }
.prov-subs .prov-sub .ptime { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); }

.prov-rawwrap { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.prov-rawwrap > summary.prov-rawsum { cursor: pointer; font-size: 12px; font-weight: 600; color: var(--text-3);
  padding: 10px 16px; list-style: none; background: var(--surface-2); }
.prov-rawwrap > summary.prov-rawsum::-webkit-details-marker { display: none; }
.prov-rawwrap[open] > summary.prov-rawsum { border-bottom: 1px solid var(--line); }
.prov-rawwrap .prov-log-wrap { border: none; border-radius: 0; }
.ov-body .prov-rawwrap .prov-log { height: 240px; }

/* ── Provisioning full-page layout ─────────────────────────── */
.page.prov-active {
  padding: 0 !important;
  overflow: hidden !important;
}
.prov-full-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 12px 16px 8px;
  overflow: hidden;
}
.prov-head {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 16px; border-radius: 12px;
  flex-shrink: 0; margin-bottom: 10px;
  background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
}
.prov-body {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 12px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.prov-left-col {
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
.prov-right-col {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-radius: 12px;
  overflow: hidden;
}

/* Override fixed terminal height for full-page layout */
.prov-right-col .prov-log-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.prov-right-col .prov-log {
  flex: 1;
  height: auto;
}

/* ── Stack tab ─────────────────────────────────────────────── */
.stack-body { padding: 20px; display: flex; flex-direction: column; gap: 20px; }
.stack-section {
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e2e5ef);
  border-radius: 10px;
  padding: 18px 20px;
  display: flex; flex-direction: column; gap: 14px;
}
.stack-section-head { display: flex; align-items: center; justify-content: space-between; }
.stack-section-title { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 6px; }
.stack-info-row { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.stack-label { min-width: 130px; color: var(--color-muted, #6b7280); font-size: 13px; }
.stack-note  { font-size: 11px; color: var(--color-muted, #6b7280); }
.stack-ver-list  { display: flex; flex-direction: column; gap: 6px; }
.stack-ver-row   { display: flex; align-items: center; gap: 8px; }
.stack-ver-empty { font-size: 12px; color: var(--color-muted, #6b7280); }
.stack-ver-badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--color-bg, #f5f7fb);
  border: 1px solid var(--color-border, #e2e5ef);
  border-radius: 6px; padding: 2px 10px; font-size: 12px;
  font-family: var(--font-mono, monospace);
}
.stack-ver-badge.active { border-color: var(--accent, #3b82f6); background: color-mix(in srgb, var(--accent,#3b82f6) 8%, transparent); }
.stack-ver-badge.system { border-color: var(--color-muted, #6b7280); opacity: .7; }
.stack-install-row { display: flex; align-items: center; gap: 10px; }
.stack-log {
  background: #0d1117; border-radius: 8px; padding: 12px 14px;
  font-family: var(--font-mono,'JetBrains Mono',monospace);
  font-size: 12px; line-height: 1.6; color: #c9d1d9;
  max-height: 220px; overflow-y: auto;
}
.stack-log-title { color: #58a6ff; margin-bottom: 6px; }
.stack-log-line.ok  { color: #3fb950; }
.stack-log-line.err { color: #f85149; }
.tag.xs { font-size: 10px; padding: 1px 5px; }
.tag.xs.green { background: color-mix(in srgb, #22c55e 15%, transparent); color: #16a34a; border-color: #86efac; }

/* ── Provisioning drawer two-column split ──────────────────── */
.prov-drawer { display: flex; flex-direction: column; height: 100%; }
.prov-split {
  display: flex; flex: 1; min-height: 0;
  gap: 0; overflow: hidden;
  border: 1px solid var(--color-border, #e2e5ef);
  border-radius: 10px;
  margin-top: 12px;
}
.prov-split-left {
  width: 220px; flex-shrink: 0;
  border-right: 1px solid var(--color-border, #e2e5ef);
  overflow-y: auto;
  padding: 8px 0;
}
.prov-split-right {
  flex: 1; min-width: 0; display: flex; flex-direction: column;
  background: #0d1117;
  border-radius: 0 10px 10px 0;
}
.prov-log-fill { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.prov-log-fill .prov-log-head {
  background: #161b22; padding: 8px 14px;
  border-bottom: 1px solid #30363d;
  color: #8b949e; font-size: 11px; flex-shrink: 0;
  border-radius: 0 10px 0 0;
}
.prov-log-fill .prov-log {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 10px 14px;
  font-family: var(--font-mono,'JetBrains Mono',monospace);
  font-size: 12px; line-height: 1.65; color: #c9d1d9;
}
/* Keep step items compact in the left column */
.prov-split-left .prov-step { padding: 7px 14px; }
.prov-split-left .prov-step-label { font-size: 12.5px; }
.prov-split-left .prov-subs { padding: 4px 0 4px 28px; }

/* ── Make ov-body fill when showing provisioning split ─────── */
.ov-panel.drawer.xl .ov-body:has(.prov-drawer) {
  display: flex; flex-direction: column; overflow: hidden;
}
.ov-panel.drawer.xl .ov-body:has(.prov-drawer) .prov-drawer {
  flex: 1; min-height: 0;
}

/* ── Provisioning floating pip ─────────────────────────────── */
#prov-pip {
  position: fixed; bottom: 20px; right: 20px; z-index: 9999;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e2e5ef);
  border-left: 3px solid var(--accent, #3b82f6);
  border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,.15);
  cursor: pointer; min-width: 260px; max-width: 320px;
  transition: box-shadow .2s;
}
#prov-pip:hover { box-shadow: 0 6px 28px rgba(0,0,0,.2); }
.prov-pip-inner {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
}
.prov-pip-spinner {
  width: 18px; height: 18px; flex-shrink: 0;
  border: 2px solid var(--color-border, #e2e5ef);
  border-top-color: var(--accent, #3b82f6);
  border-radius: 50%; animation: spin .7s linear infinite;
}
.prov-pip-info { flex: 1; min-width: 0; cursor: pointer; }
.prov-pip-name { font-size: 12px; font-weight: 600; color: var(--color-fg, #111); truncate; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.prov-pip-step { font-size: 11px; color: var(--color-muted, #6b7280); margin-top: 2px; }
.prov-pip-elapsed { font-size: 11px; font-family: var(--font-mono); color: var(--accent, #3b82f6); font-weight: 600; flex-shrink: 0; }
.prov-pip-x {
  background: none; border: none; cursor: pointer; padding: 2px 4px;
  color: var(--color-muted, #6b7280); font-size: 12px; line-height: 1;
  border-radius: 4px; flex-shrink: 0;
}
.prov-pip-x:hover { background: var(--color-border, #e2e5ef); color: var(--color-fg, #111); }
@keyframes spin { to { transform: rotate(360deg); } }