/* =========================================================================
   Design tokens
   Fog background, white surfaces, slate ink (text + sidebar), one signal
   blue for actions, and status colours that mean the same thing everywhere.
   ========================================================================= */
:root {
  --bg: #eef2f6;
  --surface: #ffffff;
  --surface-2: #f6f8fb;
  --ink: #172230;
  --muted: #5a6878;
  --line: #d9e0e8;
  --signal: #3558e6;
  --signal-ink: #ffffff;
  --run: #1f9d6b;
  --warn: #e09b2d;
  --danger: #d14343;

  --side: #172230;
  --side-ink: #e6ecf3;
  --side-muted: #93a2b5;
  --side-hover: rgb(255 255 255 / 0.07);
  --side-active: rgb(255 255 255 / 0.11);

  /* aliases used by older markup and the console page */
  --signal-soft: #7c94ff;      /* accent on dark backgrounds (sign-in graphic) */
  --accent: var(--signal);
  --accent-ink: var(--signal-ink);
  --idle: #9aa6b2;
  --chart-a: var(--signal);
  --chart-b: var(--run);

  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1720;
    --surface: #16212d;
    --surface-2: #1b2836;
    --ink: #e4eaf1;
    --muted: #93a2b5;
    --line: #2a3848;
    --signal: #7c94ff;
    --signal-ink: #0f1720;
    --run: #3ccb8c;
    --warn: #f0b04d;
    --danger: #f07171;
    --side: #0b121a;
    --idle: #5d6d7d;
  }
}

/* =========================================================================
   Base
   ========================================================================= */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 400 15px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
h1, h2, h3 { line-height: 1.2; }
.mono { font-family: var(--mono); font-size: 0.9em; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.nowrap { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.icon { flex: none; display: block; }
.os-img { display: block; object-fit: contain; }

/* =========================================================================
   Controls
   ========================================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 14px/1 var(--sans);
  padding: 10px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.btn:hover:not(:disabled) { border-color: color-mix(in srgb, var(--ink) 35%, var(--line)); }
.btn:disabled { opacity: 0.42; cursor: not-allowed; }
/* Inactive main/danger buttons: neutral and readable instead of a faded color */
.btn.primary:disabled, .btn.danger:disabled {
  opacity: 1; background: var(--surface-2); color: var(--muted);
  border-color: var(--line); box-shadow: none;
}
.btn.primary { background: var(--signal); border-color: var(--signal); color: var(--signal-ink); }
.btn.primary:hover:not(:disabled) { background: color-mix(in srgb, var(--signal) 88%, var(--ink)); }
.btn.danger { color: var(--danger); }
.btn.danger:hover:not(:disabled) { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 6%, var(--surface)); }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost:hover:not(:disabled) { background: var(--surface-2); border-color: transparent; }
.btn.wide { width: 100%; padding: 12px 14px; }
.icon-btn {
  display: inline-grid; place-items: center; width: 38px; height: 38px;
  border-radius: var(--r-sm); border: 0; background: transparent; color: inherit; cursor: pointer;
}
.link-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font: 500 14px var(--sans); color: var(--muted);
  background: none; border: 0; padding: 4px 0; cursor: pointer;
}
.link-btn:hover { color: var(--ink); }
.linklike {
  font: inherit; color: var(--signal); background: none; border: 0; padding: 0;
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}

input, textarea, select {
  font: inherit; color: inherit;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  transition: border-color .15s, box-shadow .15s;
}
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--signal);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 18%, transparent);
}
input:disabled, select:disabled { opacity: 0.55; }
textarea { font-family: var(--mono); font-size: 13px; resize: vertical; }
/* Placeholders count as text: the browser default is too faint, use the muted color */
::placeholder { color: var(--muted); opacity: 1; }
label { display: grid; gap: 6px; font-weight: 600; font-size: 14px; }
.hint { font-weight: 400; font-size: 13px; color: var(--muted); }
.form-error { color: var(--danger); min-height: 1.4em; margin: 0; font-size: 14px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.row.end { justify-content: flex-end; }
.with-button { display: flex; gap: 8px; }
.check { grid-column: 1 / -1; display: flex; gap: 10px; align-items: flex-start; font-weight: 600; }
.check input { width: auto; margin-top: 4px; accent-color: var(--signal); }
.check .muted { display: block; font-weight: 400; font-size: 13px; max-width: 70ch; }

/* Status: the LED dot and the pill share one colour language */
.led { display: inline-block; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--idle); }
.led.running { background: var(--run); box-shadow: 0 0 0 3px color-mix(in srgb, var(--run) 22%, transparent); }
.led.busy { background: var(--warn); }
.led.failed { background: var(--danger); }

.pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 10px 4px 9px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
  background: color-mix(in srgb, var(--idle) 16%, transparent);
  color: var(--muted);
}
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill-running { background: color-mix(in srgb, var(--run) 14%, transparent); color: color-mix(in srgb, var(--run) 55%, var(--ink)); }
.pill-busy { background: color-mix(in srgb, var(--warn) 18%, transparent); color: color-mix(in srgb, var(--warn) 45%, var(--ink)); }
.pill-failed { background: color-mix(in srgb, var(--danger) 13%, transparent); color: var(--danger); }

.meter { display: block; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--line) 80%, transparent); overflow: hidden; }
.meter > i { display: block; height: 100%; border-radius: 3px; background: var(--signal); }

.spinner {
  width: 14px; height: 14px; flex: none; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--warn) 30%, transparent); border-top-color: var(--warn);
  animation: spin .9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* =========================================================================
   Sign-in: the network picture on the left, the form on the right
   ========================================================================= */
.login { min-height: 100%; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.login-art {
  background: var(--side); color: var(--side-ink);
  display: grid; grid-template-rows: auto 1fr auto; gap: 24px;
  padding: 40px clamp(24px, 5vw, 64px);
}
.login-brand { display: flex; align-items: center; gap: 12px; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.login-brand.small { display: none; color: var(--ink); }
.login-graphic { width: min(460px, 100%); height: auto; align-self: center; justify-self: center; }
.lg-edges path { stroke: var(--side-muted); stroke-width: 1.5; opacity: .5; fill: none; }
.lg-edges .lg-dash { stroke: var(--signal-soft); stroke-dasharray: 3 6; opacity: .9; }
.lg-hub { fill: var(--signal); }
.lg-node { fill: var(--side); stroke: var(--side-muted); stroke-width: 2; }
.lg-node.run { stroke: #3ccb8c; }
.lg-vpn { fill: var(--side); stroke: var(--signal-soft); stroke-width: 2; }
.login-claim { margin: 0; max-width: 34ch; font-size: 22px; line-height: 1.35; font-weight: 600; letter-spacing: -0.01em; }
.login-graphic .lg-node, .login-graphic .lg-vpn { animation: pop .5s both; }
.login-graphic .lg-node:nth-of-type(2) { animation-delay: .08s; }
.login-graphic .lg-node:nth-of-type(3) { animation-delay: .16s; }
.login-graphic .lg-node:nth-of-type(4) { animation-delay: .24s; }
.login-graphic .lg-node:nth-of-type(5) { animation-delay: .32s; }
.login-graphic .lg-node:nth-of-type(6) { animation-delay: .40s; }
.login-graphic .lg-vpn { animation-delay: .5s; }
.login-graphic circle, .login-graphic rect { transform-box: fill-box; transform-origin: center; }

.login-panel { display: grid; place-items: center; padding: 32px 24px; }
.login-box { width: min(380px, 100%); display: grid; gap: 18px; }
.login-box h1 { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 4px; }

/* =========================================================================
   Shell: dark sidebar + main area
   ========================================================================= */
.shell {
  min-height: 100%; display: grid; grid-template-columns: 264px minmax(0, 1fr);
  background: linear-gradient(to right, var(--side) 264px, var(--bg) 264px);
}
.sidebar {
  background: var(--side); color: var(--side-ink);
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column;
  padding: 20px 14px 16px;
}
.side-top { display: flex; align-items: center; justify-content: space-between; padding: 0 6px 20px; }
.brand { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.brand-mark { color: var(--side-ink); }
.login-panel .brand-mark, .admin-login .brand-mark { color: var(--ink); }
.side-toggle { display: none; color: var(--side-ink); }
.side-nav { display: flex; flex-direction: column; flex: 1; min-height: 0; }

.nav { display: grid; gap: 2px; }
.nav-item {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 9px 10px; border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--side-muted);
  font: 500 14.5px var(--sans); text-align: left; cursor: pointer;
}
.nav-item:hover { background: var(--side-hover); color: var(--side-ink); }
.nav-item[aria-current="true"] { background: var(--side-active); color: #fff; }
.nav-item[aria-current="true"] .icon { color: #9db0ff; }

.side-section { margin-top: 22px; display: flex; flex-direction: column; min-height: 0; flex: 1; }
.side-label {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 8px; padding: 0 10px;
  font-size: 13px; font-weight: 600; color: var(--side-muted);
}
.count { font-size: 12px; padding: 1px 7px; border-radius: 999px; background: var(--side-hover); }
.count:empty { display: none; }
.units { list-style: none; margin: 0; padding: 0; overflow-y: auto; display: grid; gap: 2px; align-content: start; }
.unit {
  width: 100%; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: center;
  padding: 7px 10px; border: 0; border-radius: var(--r-sm);
  background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.unit:hover { background: var(--side-hover); }
.unit[aria-current="true"] { background: var(--side-active); }
.unit-glyph {
  position: relative; width: 34px; height: 34px; border-radius: 9px;
  display: grid; place-items: center; background: var(--side-hover); color: var(--side-ink);
}
.unit-glyph .led {
  position: absolute; right: -2px; bottom: -2px; width: 11px; height: 11px;
  border: 2px solid var(--side); background: var(--idle); box-shadow: none;
}
.unit-glyph.status-running .led { background: var(--run); }
.unit-glyph.status-busy .led { background: var(--warn); }
.unit-glyph.status-failed .led { background: var(--danger); }
.unit-text { display: grid; min-width: 0; }
.unit-name { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.unit-meta { font-size: 12.5px; color: var(--side-muted); }
/* the highlighted row is lighter: keep its secondary text readable */
.unit[aria-current="true"] .unit-meta, .unit:hover .unit-meta { color: color-mix(in srgb, var(--side-muted) 65%, var(--side-ink)); }
.side-empty { padding: 6px 10px; font-size: 13.5px; color: var(--side-muted); }

.side-foot {
  margin-top: 12px; padding: 12px 10px 0; border-top: 1px solid var(--side-hover);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.account { font-size: 13px; color: var(--side-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-foot .link-btn { color: var(--side-muted); font-size: 13px; }
.side-foot .link-btn:hover { color: var(--side-ink); }

.main { min-width: 0; padding: 28px clamp(18px, 4vw, 48px) 64px; }
.page, .detail-inner { max-width: 1080px; }

/* =========================================================================
   Page headers
   ========================================================================= */
.page-head, .detail-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-bottom: 22px;
}
.page-head h1, .detail-head h1 { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; margin: 0; }
.lede { margin: 6px 0 0; color: var(--muted); font-size: 15.5px; max-width: 62ch; }
.plan-line { margin: 6px 0 0; color: var(--muted); max-width: 70ch; }
.crumbs { margin-bottom: 14px; }
.h2 { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; margin: 32px 0 12px; }
.h2:first-child { margin-top: 0; }
.section-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 28px 0 12px; }
.section-head h2 { font-size: 18px; font-weight: 700; margin: 0; }

/* =========================================================================
   Overview: the network map
   ========================================================================= */
.map-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 10px clamp(8px, 2vw, 24px) 16px;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--line) 70%, transparent) 1px, transparent 1.2px);
  background-size: 22px 22px;
}
.netmap { display: block; width: 100%; height: auto; font-family: var(--sans); overflow: visible; }
.map-note { margin: 4px auto 0; text-align: center; font-size: 13px; color: var(--muted); max-width: 64ch; }

.netmap .edge { stroke: var(--line); stroke-width: 1.6; }
.netmap .edge-running { stroke: color-mix(in srgb, var(--run) 55%, var(--line)); stroke-width: 2; }
.netmap .edge-stopped { stroke-dasharray: 3 5; }
.netmap .edge-busy { stroke: color-mix(in srgb, var(--warn) 70%, var(--line)); stroke-dasharray: 5 5; }
.netmap .edge-failed { stroke: color-mix(in srgb, var(--danger) 60%, var(--line)); stroke-dasharray: 5 5; }
.netmap .edge-vpn { stroke: var(--signal); stroke-dasharray: 2 6; stroke-width: 2; stroke-linecap: round; }

.netmap .hub rect { fill: var(--ink); }
.netmap .hub-name { fill: var(--surface); font-size: 14px; font-weight: 700; }
.netmap .hub-sub { fill: color-mix(in srgb, var(--surface) 72%, var(--ink)); font-size: 12.5px; font-family: var(--mono); }

.netmap .map-node { cursor: pointer; outline: none; }
.netmap .map-node .disc { fill: var(--surface); stroke: var(--line); stroke-width: 1.5; }
.netmap .map-node .halo { fill: transparent; stroke: transparent; stroke-width: 2; }
.netmap .map-node .glyph { color: var(--ink); }
.netmap .map-node .dot { fill: var(--idle); stroke: var(--surface); stroke-width: 2.5; }
.netmap .node-running .disc { stroke: color-mix(in srgb, var(--run) 60%, var(--line)); }
.netmap .node-running .dot { fill: var(--run); }
.netmap .node-busy .dot { fill: var(--warn); }
.netmap .node-failed .dot { fill: var(--danger); }
.netmap .node-name { fill: var(--ink); font-size: 13px; font-weight: 600; }
.netmap .node-more { cursor: default; }
.netmap .node-more .node-name { fill: var(--muted); }
.netmap .map-node:hover .halo,
.netmap .map-node:focus-visible .halo { fill: color-mix(in srgb, var(--signal) 10%, transparent); stroke: var(--signal); }
.netmap .map-node:focus-visible .disc { stroke: var(--signal); }

.netmap .node-vpn .disc { fill: var(--surface); stroke: var(--signal); stroke-width: 1.5; }
.netmap .node-vpn .glyph { color: var(--signal); }
.netmap .vpn-name { fill: var(--ink); font-size: 13px; font-weight: 700; }
.netmap .vpn-sub { fill: var(--muted); font-size: 11.5px; }
.netmap .node-vpn:hover .disc,
.netmap .node-vpn:focus-visible .disc { fill: color-mix(in srgb, var(--signal) 10%, var(--surface)); stroke-width: 2; }

/* The one orchestrated moment: the map draws itself in once per session */
.netmap.animate .edge { animation: fade .5s ease-out both; }
.netmap.animate .hub { animation: pop .45s ease-out both; }
.netmap.animate .map-node { animation: pop .45s ease-out both; animation-delay: calc(0.25s + var(--i, 0) * 70ms); }
.netmap .hub, .netmap .map-node { transform-box: fill-box; transform-origin: center; }
@keyframes pop { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .netmap.animate .edge, .netmap.animate .hub, .netmap.animate .map-node,
  .login-graphic .lg-node, .login-graphic .lg-vpn { animation: none; }
  .spinner { animation-duration: 3s; }
}

/* =========================================================================
   Server rows (overview list)
   ========================================================================= */
.rows { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.rows li + li { border-top: 1px solid var(--line); }
.server-row {
  width: 100%; display: grid; align-items: center; gap: 16px;
  grid-template-columns: 44px minmax(0, 1fr) auto 240px;
  padding: 14px 18px; border: 0; background: transparent; color: inherit;
  font: inherit; text-align: left; cursor: pointer;
}
.server-row:hover { background: var(--surface-2); }
.row-main { display: grid; min-width: 0; }
.row-name { font-weight: 700; font-size: 15.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-facts { font-size: 13.5px; color: var(--muted); }
.row-load { display: grid; gap: 6px; }
.load { display: grid; grid-template-columns: 60px 1fr 40px; align-items: center; gap: 10px; font-size: 12.5px; color: var(--muted); }
.load-val { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
.load:nth-child(2) .meter > i { background: var(--run); }

.os-tile {
  width: 44px; height: 44px; border-radius: var(--r-md);
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--idle) 16%, transparent); color: var(--muted);
}
.os-tile.big { width: 58px; height: 58px; border-radius: 14px; }
.os-windows { background: color-mix(in srgb, var(--signal) 13%, transparent); color: var(--signal); }
.os-linux { background: color-mix(in srgb, var(--run) 14%, transparent); color: color-mix(in srgb, var(--run) 78%, var(--ink)); }

/* =========================================================================
   Server page
   ========================================================================= */
.server-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.server-title { flex: 1; min-width: 220px; }
.server-title h1 { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 6px; }
.state-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; }
.power { display: flex; gap: 8px; flex-wrap: wrap; }

/* The bottom line is an inset shadow (not a border the tabs overlap), so the
   scrollable row never overflows vertically and shows no vertical scrollbar. */
.tabs {
  display: flex; gap: 4px; margin: 26px 0 24px;
  box-shadow: inset 0 -1px 0 var(--line);
  overflow-x: auto; overflow-y: hidden; scrollbar-width: thin;
}
.tab {
  display: inline-flex; align-items: center; gap: 7px;
  font: 600 14px var(--sans); color: var(--muted);
  background: none; border: 0; border-bottom: 2px solid transparent;
  padding: 10px 12px; cursor: pointer; white-space: nowrap;
}
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--signal); }
.tab[aria-selected="true"] .icon { color: var(--signal); }

.specs {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px; margin: 0 0 8px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
}
.specs > div { background: var(--surface); padding: 14px 18px; }
.specs dt { font-size: 13px; color: var(--muted); }
.specs dd { margin: 3px 0 0; font-weight: 600; overflow-wrap: anywhere; }
.specs .wide { grid-column: 1 / -1; }
.specs dd .muted { font-weight: 400; }
.specs.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.chart { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px 18px 12px; }
.chart h3 { font-size: 14px; font-weight: 600; margin: 0; display: flex; justify-content: space-between; gap: 8px; }
.chart h3 span { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.chart svg { width: 100%; height: 96px; display: block; margin-top: 10px; }
.legend { display: flex; gap: 14px; font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.legend i { display: inline-block; width: 12px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 6px; }

.segmented { display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px; background: color-mix(in srgb, var(--line) 60%, transparent); }
.segmented button { font: 600 13px var(--sans); border: 0; border-radius: 7px; background: transparent; color: var(--muted); padding: 6px 11px; cursor: pointer; }
.segmented button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgb(15 23 32 / 0.12); }

.pending { max-width: 64ch; margin-top: 24px; }
.pending p { margin: 0 0 12px; }
.progress-step { display: flex; gap: 10px; align-items: center; font-weight: 600; }
.error-box {
  font-size: 14px; padding: 12px 14px; border-radius: var(--r-md); overflow-wrap: anywhere;
  border: 1px solid color-mix(in srgb, var(--danger) 40%, var(--line));
  background: color-mix(in srgb, var(--danger) 6%, var(--surface));
}
.danger-zone {
  margin-top: 40px; padding: 18px 20px; border-radius: var(--r-lg);
  border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--line));
  display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap;
}
.danger-zone h2 { font-size: 16px; margin: 0 0 2px; }
.danger-zone p { margin: 0; font-size: 14px; }

.snap-list { list-style: none; padding: 0; margin: 0 0 28px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.snap-list li { display: flex; gap: 12px; align-items: center; padding: 14px 18px; flex-wrap: wrap; }
.snap-list li + li { border-top: 1px solid var(--line); }
.snap-list .grow { flex: 1; min-width: 180px; }
.snap-form { display: grid; grid-template-columns: 1fr 2fr auto; gap: 12px; align-items: end; }

/* =========================================================================
   Create server
   ========================================================================= */
.create-form { max-width: 760px; margin-top: 8px; display: grid; gap: 26px; }
.create-form fieldset {
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface);
  padding: 18px 20px 20px; margin: 0; display: grid; gap: 14px;
}
.create-form legend { font-size: 16px; font-weight: 700; padding: 0 6px; margin-left: -6px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.grid-2 > label, .grid-3 > label { align-content: start; }
.choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.choice {
  display: flex; gap: 10px; align-items: flex-start; font-weight: 400;
  padding: 14px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); cursor: pointer;
}
.choice input { width: auto; margin-top: 4px; accent-color: var(--signal); }
.choice strong { display: block; font-weight: 700; }
.choice .muted { font-size: 13px; }
.choice:has(input:checked) { border-color: var(--signal); box-shadow: inset 0 0 0 1px var(--signal); background: color-mix(in srgb, var(--signal) 5%, var(--surface)); }
.choice:has(input:disabled) { opacity: 0.5; cursor: not-allowed; }
.fixed-user { display: grid; gap: 6px; align-content: start; }
.fixed-user .label { font-weight: 600; font-size: 14px; }
.fixed-user .mono { padding: 10px 0; }

/* =========================================================================
   VPN
   ========================================================================= */
.vpn-form { display: flex; gap: 12px; align-items: end; max-width: 540px; }
.vpn-form label { flex: 1; }
.new-device {
  margin: 8px 0 8px; padding: 20px 22px; border-radius: var(--r-lg); max-width: 880px;
  border: 1px solid color-mix(in srgb, var(--run) 40%, var(--line));
  background: color-mix(in srgb, var(--run) 6%, var(--surface));
}
.new-device h2 { font-size: 18px; margin: 0 0 8px; }
.new-device p { margin: 0 0 14px; max-width: 70ch; }
.nd-grid { display: grid; grid-template-columns: 200px 1fr; gap: 22px; align-items: start; }
.qr { background: #fff; padding: 10px; border-radius: var(--r-md); border: 1px solid var(--line); line-height: 0; }
.qr svg { width: 100%; height: auto; }
.steps { margin: 0 0 16px; padding-left: 20px; display: grid; gap: 8px; }
.new-device details { margin-top: 14px; }
.new-device summary { cursor: pointer; color: var(--muted); font-size: 14px; }
.conf { font-family: var(--mono); font-size: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px 14px; overflow-x: auto; }

/* Tailscale (Remote access tab) */
.ts { max-width: 760px; }
.ts-lede { margin: -4px 0 18px; max-width: 64ch; }
.ts-form { display: grid; gap: 16px; }
.ts-howto { margin: 16px 0; max-width: 64ch; }
.ts .specs { margin-bottom: 16px; }
.notice.warn {
  border-color: color-mix(in srgb, var(--warn) 45%, var(--line));
  background: color-mix(in srgb, var(--warn) 9%, var(--surface));
  margin: 0 0 16px;
}
.notice.warn p { margin: 0; }

/* =========================================================================
   Tables (VPN devices, admin)
   ========================================================================= */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-weight: 600; color: var(--muted); font-size: 13px;
  padding: 11px 16px; border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--surface-2);
}
.table td { padding: 10px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table td .led { margin-right: 6px; vertical-align: 1px; }
.table input, .table select { min-width: 180px; padding: 7px 10px; }
.table input[type="checkbox"] { min-width: 0; width: auto; accent-color: var(--signal); }
.table input.narrow { min-width: 110px; width: 130px; }
.table .actions { text-align: right; white-space: nowrap; }
.table .actions .btn { padding: 7px 10px; font-size: 13px; }
.row-warn td { background: color-mix(in srgb, var(--warn) 8%, transparent); }
.tag {
  display: inline-block; margin-left: 6px; padding: 1px 8px;
  font-size: 12px; border-radius: 999px; background: var(--surface-2); color: var(--muted); border: 1px solid var(--line);
}
.tag.warn { color: var(--warn); border-color: currentColor; }

.empty { padding: 40px 0; max-width: 52ch; }
.empty h2 { font-size: 20px; margin: 0 0 6px; }
.notice {
  margin-top: 16px; max-width: 900px; padding: 16px 18px; border-radius: var(--r-md);
  border: 1px solid color-mix(in srgb, var(--run) 40%, var(--line));
  background: color-mix(in srgb, var(--run) 7%, var(--surface));
}
.notice p { margin: 0 0 10px; }
.selectable { user-select: all; font-family: var(--mono); background: var(--surface); padding: 1px 6px; border-radius: 5px; border: 1px solid var(--line); }

/* =========================================================================
   Admin interface
   ========================================================================= */
.admin-shell { display: block; min-height: 100%; background: var(--bg); }
.topbar {
  display: flex; align-items: center; gap: 12px; height: 60px;
  padding: 0 clamp(16px, 3vw, 32px);
  background: var(--side); color: var(--side-ink);
}
.topbar .spacer { flex: 1; }
.topbar .muted, .topbar #account-email { color: var(--side-muted); font-size: 13.5px; }
.topbar .btn.ghost { color: var(--side-ink); }
.topbar .btn.ghost:hover { background: var(--side-hover); }
.admin-badge {
  font-size: 12.5px; font-weight: 600; color: #b8c5ff;
  padding: 3px 10px; border-radius: 999px; background: rgb(124 148 255 / 0.16);
}
.admin { padding: 28px clamp(16px, 4vw, 48px) 56px; }
.admin-inner { max-width: 1360px; }
.admin h1 { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; margin: 0; }
.admin .tabs { margin-top: 18px; }
.filter { width: min(320px, 100%); }
.user-form { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(260px, 1fr) auto; gap: 12px; align-items: end; max-width: 900px; }
.limits-form { display: grid; gap: 16px; }
.limits-form .h2 { margin: 0; }

.admin-login { grid-template-columns: 1fr; }
.admin-login .login-box { margin: auto; }
.admin-login .login-brand { display: flex; }

.act-group { display: inline-flex; gap: 2px; }
.icon-btn.act { width: 32px; height: 32px; color: var(--muted); border: 1px solid transparent; }
.icon-btn.act:hover:not(:disabled) { color: var(--ink); background: var(--surface-2); border-color: var(--line); }
.icon-btn.act.danger:hover:not(:disabled) { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); }
.icon-btn:disabled { opacity: 0.3; cursor: not-allowed; }
dialog#delete-user { max-width: min(560px, calc(100vw - 32px)); }
.plan-list { margin: 0 0 4px; padding-left: 20px; display: grid; gap: 8px; }
.plan-list ul { margin: 6px 0 0; padding-left: 18px; color: var(--muted); }
#du-plan p { margin: 0 0 12px; }

/* Passkeys */
.passkey-btn { padding: 12px 14px; gap: 10px; font-size: 15px; }
.account-section { margin-top: 16px; }
.passkey-list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 8px; }
.passkey-list li { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); }
.passkey-list li > div:first-child { display: grid; gap: 2px; }

/* Single sign-on */
.sso-btn { text-decoration: none; padding: 12px 14px; gap: 10px; font-size: 15px; }
.or-divider { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; }
.or-divider::before, .or-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.small-head { font-size: 14px; font-weight: 700; margin: 4px 0 -6px; }

/* Two-factor authentication */
.twofa { display: grid; gap: 14px; }
.twofa-title { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.twofa .muted { margin: 0; }
.twofa-steps { margin: 0; padding-left: 20px; display: grid; gap: 14px; }
.twofa-qr { width: 190px; margin-top: 10px; background: #fff; padding: 8px; border-radius: var(--r-md); border: 1px solid var(--line); line-height: 0; }
.twofa-qr svg { width: 100%; height: auto; }
.twofa-manual { margin-top: 8px; font-size: 14px; }
.twofa-manual summary { cursor: pointer; color: var(--muted); }
.twofa-manual .selectable { display: inline-block; margin: 8px 0 4px; font-size: 15px; letter-spacing: 0.04em; }
.code-input {
  font-family: var(--mono); font-size: 26px; letter-spacing: 0.3em; text-align: center;
  max-width: 240px; padding: 10px 12px; margin-top: 8px;
}
.code-input.small-code { font-size: 20px; letter-spacing: 0.12em; }
.twofa-links { justify-content: space-between; }
.recovery-grid {
  list-style: none; margin: 0; padding: 14px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 16px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md);
}
.recovery-grid li { font-size: 15px; letter-spacing: 0.04em; }
.saved-check { font-weight: 600; }
.security-card {
  display: flex; gap: 20px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap;
  max-width: 820px; padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface);
}
.security-card > div:first-child { flex: 1; min-width: 260px; display: grid; gap: 8px; }
.security-card p { margin: 0; max-width: 62ch; }
.warn-text { color: color-mix(in srgb, var(--warn) 50%, var(--ink)); font-weight: 600; }
.reset-box { padding: 14px; border: 1px solid color-mix(in srgb, var(--danger) 30%, var(--line)); border-radius: var(--r-md); display: grid; gap: 10px; justify-items: start; }
.reset-box p { margin: 0; }
#ta-state { margin: 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
dialog#twofa-admin { max-width: min(540px, calc(100vw - 32px)); }
.account-btn {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  background: none; border: 0; padding: 4px 6px; margin-left: -6px; border-radius: 6px;
  color: var(--side-muted); font: inherit; cursor: pointer;
}
.account-btn:hover { background: var(--side-hover); color: var(--side-ink); }
.account-btn .account { color: inherit; }

/* Settings */
.settings { display: grid; gap: 16px; max-width: 880px; }
.settings-card { display: grid; gap: 16px; }
.settings-head { display: grid; gap: 6px; }
.settings-head p { margin: 0; }
.email-form { display: grid; gap: 14px; }
.inline-check { display: inline-flex; gap: 6px; align-items: center; font-weight: 400; }
.inline-check input { width: auto; }

/* Windows updates */
.updates { max-width: 760px; display: grid; gap: 14px; }
.updates .h2 { margin: 0; }
.updates-lede { margin: -6px 0 0; max-width: 64ch; }
.update-form { display: grid; gap: 14px; }
.update-bar { height: 8px; border-radius: 4px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; }
.update-bar span { display: block; height: 100%; background: var(--signal); transition: width .4s; }
.update-restart, .update-last { display: grid; gap: 8px; margin: 0; }
.update-restart { grid-template-columns: 1fr auto; align-items: center; }
.update-restart p, .update-last p { margin: 0; }
.update-list { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 4px; font-size: 14px; }
.update-details summary { cursor: pointer; color: var(--muted); font-size: 14px; }

/* Appearance: scheme tiles */
.scheme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.scheme-tile {
  display: grid; gap: 6px; align-content: start; text-align: left; padding: 10px; cursor: pointer; font: inherit; color: var(--ink);
  background: var(--surface); border: 2px solid var(--line); border-radius: var(--r-md);
}
.scheme-tile:hover { border-color: var(--muted); }
.scheme-tile[aria-checked="true"] { border-color: var(--signal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 20%, transparent); }
.scheme-preview { display: flex; height: 64px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); background: #eef1f4; }
.sp-side { width: 32%; display: grid; align-content: start; gap: 5px; padding: 8px 6px; }
.sp-side i { display: block; height: 4px; border-radius: 2px; background: rgb(255 255 255 / 0.35); }
.sp-main { flex: 1; display: grid; align-content: start; gap: 5px; padding: 8px; }
.sp-line { height: 5px; border-radius: 3px; background: #c9d1da; }
.sp-line.short { width: 60%; }
.sp-btn { width: 44%; height: 12px; border-radius: 4px; margin-top: 4px; }
.scheme-name { font-weight: 700; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* Version / About */
.side-foot { flex-wrap: wrap; }
.side-foot .account-btn { flex: 1 1 0; min-width: 0; }
.side-foot .account-btn .account { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-foot #logout { flex: none; }
.panel-version { flex-basis: 100%; font: 400 11.5px var(--mono); color: var(--side-muted); opacity: 0.75; padding: 2px 6px 0; }
.about-panel { margin-top: 16px; }
.reinstall-notice { margin: 0 0 20px; }
.expiry-banner { display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin: 4px 0 16px; }
.expiry-banner p { flex: 1; min-width: 260px; margin: 0; }
.expiry-banner p .icon { display: inline-block; vertical-align: -3px; margin-right: 4px; }
.tag.warn { color: color-mix(in srgb, var(--warn) 50%, var(--ink)); border-color: color-mix(in srgb, var(--warn) 45%, var(--line));
  background: color-mix(in srgb, var(--warn) 10%, var(--surface)); }
.size-pending { display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin: 14px 0 0; }
.size-pending p { flex: 1; min-width: 260px; }
.size-row { margin-top: 12px; }
.danger-zone + .danger-zone { margin-top: 12px; }
.version-badge {
  position: relative; font: 600 12.5px var(--mono); color: var(--side-muted);
  background: transparent; border: 1px solid var(--side-hover); border-radius: 999px;
  padding: 3px 10px; cursor: pointer;
}
.version-badge:hover { color: var(--side-ink); border-color: var(--side-muted); }
.version-badge.has-update { color: #ffd38a; border-color: rgb(240 176 77 / 0.5); }
.version-badge.has-update::after {
  content: ""; position: absolute; top: -2px; right: -2px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--warn); box-shadow: 0 0 0 2px var(--side);
}
.about { max-width: 880px; display: grid; gap: 16px; }
.about-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.about-version { font: 700 30px var(--mono); letter-spacing: -0.02em; }
.about-notice { margin: 0; }
.about-notice.ok { border-color: color-mix(in srgb, var(--run) 40%, var(--line)); }
.about .specs { margin: 0; }
.about .h2 { margin: 12px 0 0; }
.about-steps { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.about a { color: var(--signal); }

/* =========================================================================
   Toasts & dialogs
   ========================================================================= */
.toasts { position: fixed; right: 18px; bottom: 18px; display: grid; gap: 8px; z-index: 10; max-width: min(400px, calc(100% - 36px)); }
.toast {
  background: var(--ink); color: var(--bg); padding: 12px 16px; border-radius: var(--r-md);
  font-size: 14px; font-weight: 500; box-shadow: 0 8px 24px rgb(15 23 32 / 0.18);
  animation: toast-in .2s ease-out;
}
.toast.error { background: var(--danger); color: #fff; }
.toast.warn { background: var(--warn); color: #1d1406; }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } }

dialog {
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); color: var(--ink);
  padding: 24px; max-width: min(440px, calc(100vw - 32px));
  box-shadow: 0 20px 50px rgb(15 23 32 / 0.25);
}
dialog#limits { max-width: min(540px, calc(100vw - 32px)); }
dialog::backdrop { background: rgb(15 23 32 / 0.5); backdrop-filter: blur(2px); }
dialog p { margin: 0 0 20px; }
#prompt label { font-weight: 600; }
#prompt input { font-family: var(--mono); margin-top: 6px; min-width: min(340px, 70vw); }
#prompt-hint { margin: 8px 0 20px; font-size: 13px; }

/* =========================================================================
   Small screens
   ========================================================================= */
@media (max-width: 900px) {
  .server-row { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .row-load { display: none; }
}
@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: sticky; height: auto; padding: 12px 14px; z-index: 5; }
  .side-top { padding: 0 4px; }
  .side-toggle { display: inline-grid; }
  .side-nav { display: none; padding-top: 14px; max-height: calc(100vh - 64px); }
  .shell.nav-open .side-nav { display: flex; }
  .login { grid-template-columns: 1fr; }
  .login-art { display: none; }
  .login-brand.small { display: flex; }
  .snap-form, .user-form, .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .nd-grid { grid-template-columns: 1fr; }
  .qr { max-width: 220px; }
  .specs.cols-3 { grid-template-columns: 1fr; }
  .specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shell { background: var(--bg); }
  .map-card { overflow-x: auto; }
  .netmap { min-width: 600px; }
}

/* =========================================================================
   Color schemes (Settings → Appearance; set as data-scheme on <html>).
   "harbor" is the default above. Status colors (run/warn/danger) never change.
   ========================================================================= */
:root[data-scheme="forest"] {
  --chart-b: #b7701a;
  --ink: #132a20;
  --bg: #edf3ef;
  --surface-2: #f5f9f6;
  --line: #d6e2da;
  --muted: #566b5f;
  --signal: #1d7350;
  --side: #132a20;
  --side-ink: #e3efe8;
  --side-muted: #93ad9f;
  --signal-soft: #6fd9a8;
}
@media (prefers-color-scheme: dark) {
  :root[data-scheme="forest"] {
    --chart-b: #f0b04d;
    --ink: #e3efe8;
    --bg: #0d1713;
    --surface: #14221c;
    --surface-2: #192a22;
    --line: #27392f;
    --muted: #93ad9f;
    --signal: #4cc993;
    --signal-ink: #0c1712;
    --side: #09140f;
    --signal-soft: #6fd9a8;
  }
}

:root[data-scheme="ember"] {
  --ink: #2a1c15;
  --bg: #f6f1ed;
  --surface-2: #faf6f3;
  --line: #e7dbd3;
  --muted: #6e5d53;
  --signal: #b9400f;
  --side: #2a1c15;
  --side-ink: #f3e8e2;
  --side-muted: #b8a397;
  --signal-soft: #ffab7d;
}
@media (prefers-color-scheme: dark) {
  :root[data-scheme="ember"] {
    --ink: #f3e8e2;
    --bg: #16100c;
    --surface: #201813;
    --surface-2: #271e18;
    --line: #3b2e26;
    --muted: #b8a397;
    --signal: #ff8f57;
    --signal-ink: #1a110c;
    --side: #140d09;
    --signal-soft: #ffab7d;
  }
}

:root[data-scheme="orchid"] {
  --ink: #221836;
  --bg: #f2f0f8;
  --surface-2: #f8f6fc;
  --line: #ddd8ec;
  --muted: #62597a;
  --signal: #7339e0;
  --side: #221836;
  --side-ink: #ece6f6;
  --side-muted: #aa9dc6;
  --signal-soft: #c4b1ff;
}
@media (prefers-color-scheme: dark) {
  :root[data-scheme="orchid"] {
    --ink: #ece6f6;
    --bg: #130e1c;
    --surface: #1b1528;
    --surface-2: #221b31;
    --line: #362c4b;
    --muted: #aa9dc6;
    --signal: #b49cff;
    --signal-ink: #140f20;
    --side: #0f0a19;
    --signal-soft: #c4b1ff;
  }
}

:root[data-scheme="graphite"] {
  --chart-b: #8a4fd8;
  --ink: #202427;
  --bg: #f0f1f2;
  --surface-2: #f6f7f8;
  --line: #dcdfe2;
  --muted: #5b6368;
  --signal: #0d7068;
  --side: #202427;
  --side-ink: #e8ebed;
  --side-muted: #a0a8ad;
  --signal-soft: #5ee6d3;
}
@media (prefers-color-scheme: dark) {
  :root[data-scheme="graphite"] {
    --chart-b: #c4a7ff;
    --ink: #e8ebed;
    --bg: #111315;
    --surface: #181b1d;
    --surface-2: #1e2225;
    --line: #2f3438;
    --muted: #a0a8ad;
    --signal: #2fd3bd;
    --signal-ink: #0f1213;
    --side: #0b0d0e;
    --signal-soft: #5ee6d3;
  }
}

/* ---- Setup check (admin) ------------------------------------------------------------ */
.tab-count {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 10px; font-size: 12px; font-weight: 700;
  background: color-mix(in srgb, var(--danger) 12%, var(--surface)); color: color-mix(in srgb, var(--danger) 70%, var(--ink));
}
.setup-check { max-width: 980px; }
.setup-head { margin-top: 0; align-items: flex-start; }
.setup-verdict { margin: 0; font-size: 18px; font-weight: 700; }
.setup-verdict.bad { color: var(--danger); }
.setup-verdict.meh { color: color-mix(in srgb, var(--warn) 50%, var(--ink)); }
.setup-verdict.good { color: color-mix(in srgb, var(--run) 55%, var(--ink)); }
.setup-options { gap: 22px; flex-wrap: wrap; margin: 6px 0 8px; }
.setup-options .check { margin: 0; }
.check-group { margin-top: 22px; }
.check-group-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin: 0 0 8px; }
.check-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.check-item { display: grid; grid-template-columns: 26px 1fr; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.check-item:last-child { border-bottom: 0; }
.check-item.status-error { background: color-mix(in srgb, var(--danger) 5%, var(--surface)); }
.check-item.status-warn { background: color-mix(in srgb, var(--warn) 7%, var(--surface)); }
.check-mark {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font: 700 13px var(--sans); margin-top: 1px;
}
.status-ok .check-mark { background: color-mix(in srgb, var(--run) 16%, var(--surface)); color: color-mix(in srgb, var(--run) 55%, var(--ink)); }
.status-warn .check-mark { background: color-mix(in srgb, var(--warn) 22%, var(--surface)); color: color-mix(in srgb, var(--warn) 45%, var(--ink)); }
.status-error .check-mark { background: color-mix(in srgb, var(--danger) 16%, var(--surface)); color: color-mix(in srgb, var(--danger) 70%, var(--ink)); }
.status-info .check-mark { background: color-mix(in srgb, var(--signal) 13%, var(--surface)); color: color-mix(in srgb, var(--signal) 70%, var(--ink)); font-style: italic; font-family: Georgia, serif; }
.status-skipped .check-mark { background: var(--surface-2); color: var(--muted); border: 1px dashed var(--line); }
.check-body { min-width: 0; }
.check-title { margin: 0; font-weight: 600; }
.check-detail { margin: 3px 0 0; color: var(--muted); font-size: 14px; overflow-wrap: anywhere; }
.check-fix { margin-top: 8px; font-size: 14px; }
.check-fix summary { cursor: pointer; font-weight: 600; color: var(--signal); width: max-content; }
.check-fix[open] summary { margin-bottom: 6px; }
.check-fix p { margin: 0 0 8px; }
.cmd {
  display: flex; align-items: center; gap: 8px; margin: 0 0 6px; padding: 6px 6px 6px 12px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md);
}
.cmd code { flex: 1; font-family: var(--mono); font-size: 13px; color: var(--ink); overflow-wrap: anywhere; user-select: all; }
.cmd .cmd-copy { padding: 4px 10px; font-size: 12px; flex: none; }

/* Zoomi Cloud - alinhamento do cabeçalho */
.sidebar .brand {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  white-space: nowrap;
}

.sidebar .brand .brand-mark {
  display: block;
  width: 36px !important;
  height: 36px !important;
  flex: 0 0 36px;
  object-fit: contain;
}

/* Zoomi Cloud+ — logotipo das telas de login */

.zoomi-login-logo {
  display: block;
  width: 260px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.admin-login .zoomi-login-logo {
  width: 220px;
}

/* Zoomi Cloud+ — logotipo central do login */

.zoomi-center-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 320px;
}

.zoomi-center-logo img {
  display: block;
  width: min(480px, 85%);
  height: auto;
  object-fit: contain;
}

/* Zoomi Cloud+ - tabela de clientes */

.customers-table .actions {
  text-align: left;
  white-space: normal;
  min-width: 250px;
  max-width: 330px;
}

.customers-table .actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: normal;
  text-align: center;
  padding: 7px 9px;
  font-size: 12px;
  line-height: 1.2;
  margin: 2px;
}

.customers-table th,
.customers-table td {
  padding: 10px 12px;
}

.customers-table {
  width: 100%;
}

/* Customer support: separate form and history navigation. */
.support-subnav { display: grid; gap: 2px; }
.support-subnav .nav-item { padding-left: 40px; font-size: 13px; }
.support-recent { background: color-mix(in srgb, var(--signal) 8%, transparent); }

/* Shared activity and plan presentation. */
dialog.activities-dialog{width:min(1280px,calc(100vw - 40px));max-width:min(1280px,calc(100vw - 40px));max-height:calc(100dvh - 40px);box-sizing:border-box;overflow:auto;padding:24px}
.activities-surface{min-width:0;width:100%}.activities-surface .table-wrap{width:100%;overflow:auto}.activities-surface table{min-width:850px}.activities-surface th,.activities-surface td{vertical-align:top}.activities-surface td{overflow-wrap:anywhere}.activities-surface .section-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.h-plans table{min-width:1250px}.h-plans th,.h-plans td{white-space:nowrap}.h-plans th:first-child,.h-plans td:first-child{white-space:normal;min-width:190px}
@media(max-width:640px){dialog.activities-dialog{width:calc(100vw - 20px);max-width:calc(100vw - 20px);padding:14px}}

/* Shared table presentation, customer and administration. */
.system-table-wrap{max-width:100%;overflow-x:auto;}
.system-table{border-collapse:separate;border-spacing:0;}
.system-table th{position:relative;}
.system-table .system-table-sort{font:inherit;color:inherit;display:block;width:100%;padding:0 14px 0 0;border:0;background:transparent;text-align:inherit;white-space:normal;}
.system-table th[aria-sort="ascending"] .system-table-sort::after{content:' ↑';}
.system-table th[aria-sort="descending"] .system-table-sort::after{content:' ↓';}
.system-table-resize{position:absolute;right:0;top:5px;bottom:5px;width:9px;padding:0;border:0;border-right:2px solid var(--line);border-radius:0;background:transparent;cursor:col-resize;touch-action:none;z-index:5;}
.system-table-resize:hover{border-right-color:var(--ink);}
.system-table td{overflow-wrap:anywhere;}
.system-table .system-icon-action{display:inline-flex;align-items:center;justify-content:center;gap:5px;white-space:nowrap;}
.system-table.system-table-compact .system-icon-action>span{display:none;}
.system-table.system-table-compact .system-icon-action{min-width:30px;min-height:30px;padding:6px;}
.system-table .system-actions{white-space:nowrap;}
.system-table tbody tr[data-cloud-vm]:hover>td{background:color-mix(in srgb,var(--surface) 94%,var(--signal));}
.system-table tbody tr[data-cloud-vm]{cursor:pointer;}
@media(pointer:coarse){.system-table.system-table-compact .system-icon-action{min-width:44px;min-height:44px;}}

/* Dialogs shared by customer and administration: fit the viewport and keep actions reachable. */
.h-dialog{box-sizing:border-box;max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain}
.h-dialog>form{display:grid;gap:16px;min-width:0}
.h-dialog>form>h2{margin:0 0 4px}
.h-dialog label{display:grid;gap:6px;min-width:0}
.h-dialog label.check{display:flex;align-items:flex-start}
.h-dialog input:not([type=checkbox]):not([type=radio]),.h-dialog select,.h-dialog textarea{box-sizing:border-box;max-width:100%}
.h-dialog .h-actions{position:sticky;bottom:0;z-index:8;padding:14px 0;margin:0;background:var(--surface);border-top:1px solid var(--line)}
.h-dialog dl{display:grid;grid-template-columns:minmax(120px,auto) minmax(0,1fr);gap:10px 16px;margin:16px 0}
.h-dialog dt{color:var(--muted)}.h-dialog dd{margin:0;overflow-wrap:anywhere}
.h-dialog [data-provision-status]{overflow-wrap:anywhere}
@media(max-width:600px){.h-dialog{padding:16px;max-height:calc(100dvh - 20px)}.h-dialog .h-actions{bottom:0}.h-dialog dl{grid-template-columns:1fr;gap:5px}.h-dialog dd{margin-bottom:8px}}

.backup-protection-badge{display:inline-flex;align-items:center;padding:3px 8px;border:1px solid #b9dfca;border-radius:6px;background:#e3f4eb;color:#146548;font-size:12px;font-weight:600;line-height:1.4;white-space:nowrap}

.backup-vm-tabs{margin:0 0 12px;gap:12px}.backup-vm-tabs .tab[aria-selected="true"]{color:var(--ink);font-weight:700;border-bottom-color:var(--ink);background:transparent}.backup-service-embedded{padding:0}.backup-service-embedded .backup-toolbar{margin-top:12px}

/* Account-scoped navigation presentation and service plan cards. */
#rack-actions .nav-item,#support-actions .nav-item,.tabs>.tab,[role="tablist"]>[role="tab"]{touch-action:none}
.navigation-order-tools{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);z-index:1500;display:flex;align-items:center;gap:8px;padding:10px 14px;background:#fff;border:1px solid #cbd7e4;border-radius:10px;box-shadow:0 5px 24px #10243928;max-width:95vw;font-size:12px}.navigation-order-tools[hidden]{display:none}.navigation-order-editing .tab,.navigation-order-editing .nav-item{cursor:grab}.navigation-order-held{outline:2px solid #7db5a9!important;outline-offset:-2px;background:#e6f3ef!important;user-select:none}
.my-plan-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.my-plan-card{min-width:0;background:#fff;border:1px solid var(--line,#d5deea);border-radius:13px;padding:20px}.my-plan-card.wide{grid-column:1/-1}.my-plan-card header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}.my-plan-card h2{display:flex;align-items:center;gap:9px;margin:0;font-size:17px}.my-plan-metrics{display:flex;gap:32px;flex-wrap:wrap;margin-bottom:14px}.my-plan-metrics>div{display:grid;gap:4px}.my-plan-metrics strong{font-size:25px;line-height:1.2}.my-plan-metrics span{font-size:12px;color:#5e7592}.my-plan-progress{height:6px;border-radius:6px;background:#eef3f7;margin:15px 0}.my-plan-progress span{display:block;height:100%;border-radius:inherit;background:#7cbaad}.my-plan-card summary{cursor:pointer;font-size:13px;margin-top:16px}.my-plan-card details .table-wrap{margin-top:14px}.my-plan-card .table{min-width:0}.my-plan-card .table th,.my-plan-card .table td{padding:10px}.my-plan-card details{min-width:0}
@media(max-width:680px){.my-plan-grid{grid-template-columns:1fr}.my-plan-card{padding:16px}.my-plan-metrics{gap:20px}.my-plan-card h2{font-size:16px}.navigation-order-tools{flex-wrap:wrap;width:max-content}.navigation-order-tools span{width:100%}}

/* Compact, expandable Corporate plan. */
.email-plan-summary.email-plan-compact{display:block;padding:12px 14px;margin:12px 0 22px;background:var(--surface,var(--panel));border-radius:9px}
.email-plan-compact-line{display:flex;align-items:center;gap:20px;flex-wrap:wrap;font-size:12px}.email-plan-compact-line>strong{font-size:17px}.email-plan-compact-line>strong>.muted{font-size:12px;font-weight:400}.email-plan-compact-line>[data-plan-expand]{margin-left:auto}.email-plan-track{height:5px;border-radius:6px;background:color-mix(in srgb,var(--ink) 6%,var(--surface));overflow:hidden}.email-plan-track>span{display:block;height:100%;border-radius:inherit;background:#79b9aa}.email-plan-compact-line>.email-plan-track{width:110px}.email-plan-capacities{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;border-top:1px solid var(--line,var(--border));padding-top:12px;margin-top:12px}.email-plan-capacities[hidden]{display:none}.email-plan-tier-head{display:flex;justify-content:space-between;gap:8px;font-size:12px;margin-bottom:7px}.email-plan-capacities small{display:block;margin-top:5px}.email-plan-capacities>[data-email-view-plan]{justify-self:start;grid-column:1/-1}
@media(max-width:640px){.email-plan-capacities{grid-template-columns:1fr}.email-plan-compact-line{gap:12px}.email-plan-compact-line>.email-plan-track{display:none}}
.my-plan-progress-caption{display:flex;justify-content:space-between;gap:12px;font-size:11px;color:var(--muted);margin-top:-8px;margin-bottom:12px}

.backup-full-restore{width:620px;max-width:calc(100vw - 24px)}.backup-full-restore dl{display:grid;grid-template-columns:auto 1fr;gap:8px 16px}.backup-full-restore dd{margin:0;overflow-wrap:anywhere}.backup-full-restore .notice strong{display:flex;align-items:center;gap:8px}.backup-service .btn .icon,.backup-full-restore .btn .icon{flex:none}.customer-create-dialog{width:780px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 32px);overflow:auto;border:1px solid var(--line);border-radius:12px;background:var(--surface,#fff);color:var(--ink);padding:22px}.customer-create-dialog::backdrop{background:#10243970}.customer-create-dialog .detail-inner{padding:0}.customer-create-dialog .detail-head{margin-top:0}.customer-create-dialog>header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.customer-create-dialog .create-form{max-width:none}@media(max-width:560px){.backup-full-restore .grid-2{grid-template-columns:1fr}.customer-create-dialog{padding:16px}}

.iso-create-dialog{width:780px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);overflow:auto;padding:24px;box-sizing:border-box;border:1px solid var(--line);border-radius:12px;background:var(--surface,#fff);color:var(--ink)}.iso-create-dialog::backdrop{background:#10243970}.iso-create-dialog .section-head{gap:12px}.iso-create-dialog .section-head h2{margin:0}.iso-create-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px}.iso-create-grid.quick{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:18px}.iso-create-grid label{min-width:0}.iso-create-grid input:not([type=checkbox]),.iso-create-grid select{width:100%;min-width:0;box-sizing:border-box}.iso-create-grid .check{align-self:center}.iso-create-dialog fieldset{min-width:0;margin:16px 0;border:1px solid var(--line);border-radius:8px;padding:14px}.iso-create-dialog>form>details{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}.iso-create-dialog summary .icon{vertical-align:middle}.iso-create-extra{margin-top:14px}.iso-create-extra .iso-create-grid{margin-top:12px}.iso-auto{padding:12px 14px;margin-top:16px;border-radius:8px;background:var(--bg)}.iso-auto p{margin:4px 0 0;overflow-wrap:anywhere}.iso-device{border:1px solid var(--line);border-radius:8px;padding:12px;margin-top:12px}.iso-device-section{margin-top:18px}.iso-device-section h3{margin:0}.iso-create-actions{justify-content:flex-end;margin-top:18px}.iso-create-dialog [data-plan-reason][hidden]{display:none}@media(max-width:600px){.iso-create-dialog{padding:16px}.iso-create-grid,.iso-create-grid.quick{grid-template-columns:1fr}.iso-create-dialog .section-head{flex-wrap:wrap}}
.iso-create-dialog summary{display:flex;align-items:center;gap:7px;list-style:none;cursor:pointer}.iso-create-dialog summary::-webkit-details-marker{display:none}.iso-create-dialog summary::before{content:"›";display:inline-block;font-size:17px;line-height:1}.iso-create-dialog details[open]>summary::before{transform:rotate(90deg)}.iso-create-dialog summary>.icon{display:inline-block;flex:none}
/* Account cards fill the available viewport; content may grow naturally. */
.my-plan-grid{min-height:calc(100dvh - 154px);grid-auto-rows:minmax(min-content,1fr);align-content:stretch}
.my-plan-card{display:flex;flex-direction:column;padding:clamp(14px,1.2vw,22px)}
.my-plan-card header{margin-bottom:16px;justify-content:flex-start}
.my-plan-card header h2{margin-right:auto}.my-plan-card header>[data-my-plan-open]{margin-left:auto}
.my-plan-card .card-order-controls{margin-left:0}.card-order-controls .btn{padding:5px 8px;min-height:28px}
.my-plan-card>details{margin-top:auto}.my-plan-card .my-plan-progress-caption{margin-bottom:10px}
.spam-filter{display:flex;flex-wrap:wrap;align-items:end;gap:10px;margin:18px 0}
.spam-filter>label{display:flex;flex-direction:column;gap:6px;min-width:140px;flex:1 1 160px}
.spam-filter input,.spam-filter select{width:100%;box-sizing:border-box}
.spam-check{display:flex!important;flex-direction:row!important;align-items:center;gap:8px!important;margin:12px 0}
.spam-check input[type=checkbox]{width:14px!important;min-width:14px!important;flex:0 0 14px;margin:0}
.spam-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:18px 0}
.spam-metrics section,.spam-charts>section{border:1px solid var(--line);background:var(--surface,#fff);border-radius:12px;padding:18px;min-width:0}
.spam-metrics strong{display:block;font-size:28px;margin-top:8px}.spam-metrics span{font-size:13px;color:var(--muted)}
.spam-charts{display:grid;grid-template-columns:3fr 2fr;gap:16px}.spam-charts svg{width:100%;height:auto;min-height:170px}
.spam-distribution{display:grid;grid-template-columns:1fr auto;gap:6px;margin:12px 0}.spam-distribution>div{grid-column:1/-1;height:7px;background:#edf1f6;border-radius:4px;overflow:hidden}.spam-distribution i{display:block;height:100%}
.spam-policy{border:1px solid var(--line);border-radius:12px;background:var(--surface,#fff);margin:14px 0;padding:16px}
.spam-policy summary{font-weight:600;cursor:pointer}.spam-policy form{margin-top:18px;max-width:850px}.spam-policy form+form{border-top:1px solid var(--line);padding-top:15px}
.spam-policy label:not(.spam-check){display:block;margin:12px 0}.spam-policy label:not(.spam-check)>input,.spam-policy select{display:block;width:min(100%,400px);margin-top:6px}
.spam-source{border-top:1px solid var(--line);margin-top:12px}.spam-log-dialog{width:min(1000px,calc(100vw - 32px));max-height:90dvh;overflow:auto}.spam-log-dialog pre{white-space:pre-wrap;overflow-wrap:anywhere;max-height:60dvh;overflow:auto;font-size:12px}
@media(max-width:760px){.my-plan-grid{min-height:0;grid-template-columns:1fr;grid-auto-rows:auto}.spam-charts{grid-template-columns:1fr}.spam-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.spam-filter>label{min-width:0}}

/* Antispam: summaries remain readable on narrow screens. */
dialog.h-dialog.spam-log-dialog{width:min(1000px,calc(100vw - 32px))!important;max-width:calc(100vw - 32px)!important;box-sizing:border-box;padding:24px;overflow:auto}
.spam-trace-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 24px;overflow-wrap:anywhere}.spam-metrics small{display:block;margin-top:8px;color:var(--muted)}
.spam-pages{gap:10px;margin-top:14px;flex-wrap:wrap}.spam-filter details{min-width:180px}.spam-filter details label{display:block}.spam-policy form{display:grid;gap:12px;grid-template-columns:minmax(0,1fr);max-width:900px}.spam-check input{width:14px!important;min-width:14px;flex:0 0 14px}.spam-check{display:flex!important;align-items:center;gap:8px}
@media(max-width:600px){.spam-trace-summary{grid-template-columns:1fr}.spam-filter{flex-wrap:wrap}.spam-filter>label{flex:1 1 160px}}

/* Antispam: compact shared controls for both portals. */
.spam-query{margin:18px 0}.spam-query-bar{display:flex;align-items:end;gap:10px}.spam-query-bar>label{display:grid;gap:6px;width:min(300px,100%)}
.spam-advanced{margin-top:12px;border:1px solid var(--line);border-radius:10px;padding:12px;background:var(--surface,#fff)}.spam-advanced>summary{cursor:pointer;font-weight:600}
.spam-filter-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:14px;margin-top:16px}.spam-filter-grid>label{display:grid;gap:6px;min-width:0}.spam-filter-grid input,.spam-filter-grid select,.spam-query select{width:100%;box-sizing:border-box;min-width:0}
.spam-policy-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}.spam-security>.muted{font-size:12px}.spam-policy-grid>.spam-policy{margin:0;min-width:0}.spam-security .spam-policy form{max-width:none;margin-top:14px;gap:12px}.spam-security .spam-policy label:not(.spam-check){margin:0}.spam-security .spam-policy label:not(.spam-check)>input,.spam-security .spam-policy select{width:100%;box-sizing:border-box;min-width:0}.spam-security .spam-check{margin:0;line-height:1.5}.spam-policy-footer{display:flex;flex-wrap:wrap;align-items:center;gap:10px;border-top:1px solid var(--line);padding-top:14px;margin-top:6px}.spam-policy-footer>.spam-check,.spam-policy-footer>[data-error]{flex:1 0 100%;margin:0}.spam-policy-footer>button{width:auto!important}.spam-source-list{border:1px solid var(--line);border-radius:10px;padding:14px;min-width:0}.spam-source-list h3{margin:0 0 12px}.spam-source-list .spam-source{padding:10px 0}.spam-source-list .spam-source p{margin:6px 0}.spam-connection{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--surface,#fff);border:1px solid var(--line);border-radius:12px;padding:16px;margin:16px 0}.spam-connection h3,.spam-connection p{margin:0 0 6px}
.spam-policy-grid:has(form[data-area=dnsbl]){grid-template-columns:minmax(0,1fr)}.spam-policy-grid form[data-area=dnsbl]{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}.spam-policy-grid form[data-area=dnsbl]>.spam-source-list{grid-column:2;grid-row:1 / span 5}.spam-policy-grid form[data-area=dnsbl]>.spam-policy-footer{grid-column:1 / -1}
@media(max-width:800px){.spam-policy-grid{grid-template-columns:1fr}.spam-policy-grid form[data-area=dnsbl]{grid-template-columns:1fr}.spam-policy-grid form[data-area=dnsbl]>.spam-source-list{grid-column:auto;grid-row:auto}.spam-query-bar{flex-wrap:wrap}.spam-connection{flex-wrap:wrap}}

.spam-applied{background:#eef7f4;border:1px solid #cce4dc;border-radius:8px;padding:12px;line-height:1.7}.spam-level-card select{width:100%}.spam-level-card form{min-width:0}

/* Configuration cards flow without empty rows between unequal sections. */
.spam-configuration-grid{display:block;columns:2;column-gap:16px}
.spam-configuration-grid>.spam-policy{break-inside:avoid;display:inline-block;vertical-align:top;width:100%;box-sizing:border-box;margin:0 0 16px;padding:18px}
.spam-configuration-grid>.spam-policy>summary{font-size:14px;margin-bottom:14px}
.spam-configuration-grid>.spam-policy:not([open])>summary{margin-bottom:0}
.spam-security .spam-configuration-grid form{gap:10px;margin-top:12px}
.spam-configuration-grid p{margin:4px 0;line-height:1.5}
.spam-security .spam-configuration-grid label:not(.spam-check)>input{max-width:220px}
.spam-security .spam-configuration-grid select{max-width:380px}
.spam-configuration-grid .spam-applied{margin:0 0 14px;padding:10px 12px}
.spam-configuration-grid .spam-policy-footer{gap:8px;padding-top:12px;margin-top:4px}
.spam-configuration-grid [data-error]:empty{display:none}
.spam-configuration-grid form+form{margin-top:16px;padding-top:16px}
.spam-configuration-grid .spam-check{align-items:flex-start}
.spam-configuration-grid .spam-check input{margin-top:3px}
@media(max-width:900px){.spam-configuration-grid{columns:1}}

/* Keep expanded customer navigation inside the viewport at any desktop zoom. */
@media(min-width:861px){
 #app-view>.sidebar{height:100dvh;min-height:0;overflow:hidden}
 #app-view>.sidebar>.side-top,#app-view>.sidebar>.sidebar-brand-row{flex-shrink:0}
 #app-view #side-nav{min-height:0;overflow:hidden}
 #app-view #rack-actions{min-height:0;flex:0 1 auto;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#53697f transparent}
 #app-view #cloud-server-nav{flex:1 1 140px;min-height:100px;overflow:hidden}
 #app-view .side-foot{flex-shrink:0;margin-top:auto}
}