:root {
  color-scheme: dark;
  --bg: #07100f;
  --surface: #0d1917;
  --surface-2: #11211e;
  --surface-3: #162a26;
  --line: rgba(152, 211, 195, 0.14);
  --line-strong: rgba(152, 211, 195, 0.26);
  --text: #eef9f5;
  --muted: #8ea49e;
  --green: #59e0ad;
  --cyan: #54d7e5;
  --violet: #b49cff;
  --amber: #f1bd62;
  --red: #ff756f;
  --shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
  --radius: 14px;
}

* { box-sizing: border-box; }

html { min-width: 320px; background: var(--bg); }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 12% -10%, rgba(45, 193, 145, 0.16), transparent 30rem),
    radial-gradient(circle at 92% 8%, rgba(77, 171, 196, 0.12), transparent 34rem),
    var(--bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-variant-numeric: tabular-nums;
}

button { font: inherit; }

.skip-link {
  position: fixed;
  left: 16px;
  top: 10px;
  z-index: 100;
  padding: 10px 14px;
  border: 1px solid var(--green);
  border-radius: 10px;
  color: #04110e;
  background: var(--green);
  font-weight: 800;
  text-decoration: none;
  transform: translateY(-150%);
  transition: transform .16s ease;
}
.skip-link:focus { transform: translateY(0); }

.topbar {
  min-height: 66px;
  padding: 10px clamp(14px, 2.5vw, 36px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid var(--line);
  background: rgba(7, 16, 15, 0.78);
  backdrop-filter: blur(18px);
  position: sticky;
  top: 0;
  z-index: 20;
}

.brand, .topbar-actions, .column-title, .panel-heading, .node-heading, .state-pill, .backend-chip {
  display: flex;
  align-items: center;
}

.brand { gap: 13px; }

.brand-mark {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(89, 224, 173, 0.48);
  border-radius: 11px;
  background: linear-gradient(145deg, rgba(89, 224, 173, 0.22), rgba(84, 215, 229, 0.06));
  color: var(--green);
  font-weight: 850;
  font-size: 1.05rem;
  box-shadow: inset 0 0 24px rgba(89, 224, 173, 0.08);
}

h1, h2, p { margin: 0; }

.brand h1 { font-size: 1rem; letter-spacing: -0.015em; }
.brand p { color: var(--muted); font-size: .76rem; margin-top: 2px; }
.workspace-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(255, 255, 255, .018);
}
.workspace-nav a {
  min-height: 34px;
  padding: 8px 11px;
  border-radius: 8px;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 750;
  text-decoration: none;
}
.workspace-nav a:hover, .workspace-nav a:focus-visible {
  color: var(--text);
  background: rgba(89, 224, 173, .08);
  outline: none;
}
.workspace-nav a.is-active,
.workspace-nav a[aria-current="page"] {
  color: #04110e;
  background: var(--green);
  box-shadow: 0 5px 16px rgba(89, 224, 173, .16);
}
.workspace-section-hidden { display: none !important; }
.topbar-actions { gap: 7px; }
.topbar-actions form { margin: 0; }

.global-state, .refresh-button {
  height: 34px;
  border-radius: 9px;
  border: 1px solid var(--line-strong);
}

.global-state {
  display: inline-flex;
  align-items: center;
  padding: 0 11px;
  gap: 7px;
  background: rgba(255, 255, 255, 0.025);
  color: var(--muted);
  font-size: .78rem;
  font-weight: 700;
}

.global-state.is-healthy { color: var(--green); border-color: rgba(89, 224, 173, .34); }
.global-state.is-warning { color: var(--amber); border-color: rgba(241, 189, 98, .36); }
.global-state.is-critical { color: var(--red); border-color: rgba(255, 117, 111, .38); }

.pulse {
  flex: 0 0 8px;
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 14%, transparent);
}

.is-loading .pulse { animation: blink 1.25s ease-in-out infinite; }

@keyframes blink { 50% { opacity: .32; } }

.refresh-button {
  min-width: 44px;
  padding: 0 12px;
  color: var(--text);
  background: var(--surface-2);
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.refresh-button:hover { border-color: rgba(89, 224, 173, .5); background: var(--surface-3); }
.refresh-button:active { transform: translateY(1px); }
.refresh-button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.logout-button { color: var(--muted); background: transparent; }

main { width: min(1660px, calc(100% - 24px)); margin: 0 auto; padding: 14px 0 36px; }
.anchor-section { scroll-margin-top: 86px; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.summary-card, .panel, .network-map, .collector-strip {
  border: 1px solid var(--line);
  background: linear-gradient(145deg, rgba(17, 33, 30, .92), rgba(10, 22, 20, .94));
  box-shadow: var(--shadow);
}

.summary-card {
  min-height: 92px;
  padding: 13px 15px;
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
}

.summary-card::after {
  content: "";
  position: absolute;
  width: 82px;
  height: 82px;
  right: -32px;
  top: -36px;
  border-radius: 50%;
  background: currentColor;
  opacity: .075;
  filter: blur(2px);
}

.accent-green { color: var(--green); }
.accent-cyan { color: var(--cyan); }
.accent-violet { color: var(--violet); }
.accent-amber { color: var(--amber); }

.eyebrow {
  display: block;
  color: var(--muted);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.summary-card strong {
  display: block;
  margin: 8px 0 3px;
  color: var(--text);
  font-size: clamp(1.45rem, 2.2vw, 2rem);
  line-height: 1;
  letter-spacing: -.05em;
}

.summary-card small { color: var(--muted); font-size: .76rem; }

.collector-strip {
  margin-top: 8px;
  min-height: 44px;
  border-radius: 11px;
  padding: 8px 13px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  align-items: center;
  box-shadow: none;
}

.collector-strip > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.collector-strip > div:not(:last-child) { padding-right: 12px; border-right: 1px solid var(--line); }
.soft-label { color: var(--muted); font-size: .74rem; }
.collector-strip strong { font-size: .76rem; }

.freshness-banner {
  margin-top: 8px;
  min-height: 52px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid rgba(84, 215, 229, .24);
  border-radius: 12px;
  color: var(--cyan);
  background: rgba(84, 215, 229, .055);
}
.freshness-banner[hidden] { display: none; }
.freshness-banner.is-ok { color: var(--green); border-color: rgba(89, 224, 173, .25); background: rgba(89, 224, 173, .045); }
.freshness-banner.is-warning { color: var(--amber); border-color: rgba(241, 189, 98, .32); background: rgba(241, 189, 98, .07); }
.freshness-banner.is-critical { color: var(--red); border-color: rgba(255, 117, 111, .36); background: rgba(255, 117, 111, .075); }
.freshness-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: color-mix(in srgb, currentColor 12%, transparent); font-weight: 900; }
.freshness-banner.is-loading .freshness-icon { animation: spin 1.1s linear infinite; }
.freshness-banner strong, .freshness-banner span { display: block; }
.freshness-banner strong { color: var(--text); font-size: .8rem; }
.freshness-banner div span { margin-top: 3px; color: var(--muted); font-size: .74rem; line-height: 1.35; }
.freshness-banner.is-ok #freshness-retry { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

.automation-launcher {
  margin-top: 10px;
  display: grid;
  grid-template-columns: minmax(270px, .9fr) minmax(520px, 1.7fr) minmax(220px, .7fr);
  gap: 14px;
  align-items: center;
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background:
    linear-gradient(115deg, rgba(89, 224, 173, .08), transparent 32%),
    linear-gradient(145deg, rgba(17, 33, 30, .94), rgba(10, 22, 20, .96));
  box-shadow: var(--shadow);
}
.automation-intro h2 { margin-top: 4px; font-size: 1.12rem; }
.automation-intro p { max-width: 520px; margin-top: 7px; color: var(--muted); font-size: .78rem; line-height: 1.55; }
.automation-intro .primary-action { margin-top: 12px; }
.automation-readiness { min-width: 0; padding-left: 14px; border-left: 1px solid var(--line); }
.automation-readiness strong, .automation-readiness span { display: block; }
.automation-readiness strong { margin-top: 6px; font-size: .84rem; }
.automation-readiness #automation-copy { margin-top: 5px; color: var(--muted); font-size: .78rem; line-height: 1.45; }

.section-heading {
  margin: 18px 2px 9px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
}

.section-heading h2, .panel h2 { margin-top: 3px; font-size: 1.1rem; letter-spacing: -.025em; }
.section-heading p { max-width: 670px; color: var(--muted); font-size: .78rem; line-height: 1.5; text-align: right; }
.map-heading-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }

.network-map {
  position: relative;
  isolation: isolate;
  padding: 11px;
  border-radius: 15px;
  display: grid;
  grid-template-columns: minmax(390px, 1.45fr) 52px minmax(225px, .72fr) 52px minmax(270px, .86fr);
  gap: 8px;
}

.topology-links {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.topology-link {
  fill: none;
  stroke: rgba(89, 224, 173, .48);
  stroke-width: 1.6;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 4px rgba(89, 224, 173, .18));
  transition: opacity .18s ease, stroke-width .18s ease, stroke .18s ease;
}
.topology-link.is-primary { stroke: var(--cyan); stroke-width: 2.6; }
.topology-link.is-backup { stroke: var(--violet); stroke-dasharray: 7 6; }
.topology-link.is-warning { stroke: var(--amber); opacity: .62; stroke-dasharray: 5 5; }
.topology-link.is-problem { stroke: var(--red); opacity: .72; }
.topology-link.is-muted { opacity: .09; }
.topology-link.is-focused { opacity: 1; stroke-width: 3.2; }
.node-card.is-draft { border-style: dashed; border-color: rgba(241,189,98,.38); background: linear-gradient(145deg, rgba(45,39,23,.48), rgba(10,22,20,.9)); box-shadow: none; }
.node-card.is-draft:hover, .node-card.is-draft:focus-visible { border-color: rgba(241,189,98,.7); }
.node-card.is-draft .node-title strong { color: var(--amber); }
.node-card.is-lifecycle-inactive { border-style: dashed; border-color: rgba(180,156,255,.36); background: linear-gradient(145deg, rgba(34,27,57,.34), rgba(10,22,20,.9)); }
.map-card-actions { width: 100%; margin-top: auto; padding-top: 10px; flex-wrap: wrap; }
.map-card-actions .lifecycle-action { flex: 1 1 150px; }
.network-map .map-column, .network-map .route-lanes { position: relative; z-index: 2; }
.network-map.is-editing .node-card { cursor: default; }
.network-map.is-editing .node-card.is-route-source { cursor: grab; }
.network-map.is-editing .node-card.is-route-source:active { cursor: grabbing; }
.network-map.is-editing .node-card.is-route-selected { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(84, 215, 229, .14); }
.network-map.is-editing .node-card.is-drop-target { border-color: rgba(89, 224, 173, .65); background: rgba(89, 224, 173, .09); cursor: copy; }
.network-map.is-editing .node-card.is-drop-hover { transform: translateY(-2px); border-color: var(--green); box-shadow: 0 0 0 4px rgba(89, 224, 173, .17); }
.network-map.is-editing .node-card.is-route-disabled { opacity: .48; }

.map-column { min-width: 0; }
.column-title { justify-content: space-between; margin: 1px 2px 7px; }
.column-title span { color: var(--text); font-size: .8rem; font-weight: 750; }
.column-title b { color: var(--muted); font-size: .68rem; font-weight: 600; }
.ingress-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.relay-grid { display: grid; gap: 7px; height: calc(100% - 24px); }
.egress-grid { display: grid; gap: 7px; height: calc(100% - 24px); }

.node-card {
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(7, 17, 15, .66);
  transition: border-color .2s ease, transform .2s ease;
}

.node-card:hover { transform: translateY(-1px); border-color: var(--line-strong); }
.node-card.state-down { border-color: rgba(255, 117, 111, .42); background: rgba(68, 21, 20, .22); }
.node-card.state-degraded { border-color: rgba(241, 189, 98, .36); }
.node-card.state-up { border-color: rgba(89, 224, 173, .20); }
.egress-card { min-height: 152px; display: flex; flex-direction: column; }
.relay-card { min-height: 112px; display: flex; flex-direction: column; justify-content: space-between; }

.node-heading { justify-content: space-between; gap: 10px; }
.node-title { min-width: 0; }
.node-title strong { display: block; font-size: .84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.node-title code { display: block; margin-top: 3px; color: var(--muted); font: 600 .7rem ui-monospace, SFMono-Regular, Consolas, monospace; }

.state-pill {
  flex: 0 0 auto;
  gap: 6px;
  border-radius: 999px;
  padding: 4px 7px;
  font-size: .66rem;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, .035);
}

.state-pill::before, .dot {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.pill-up { color: var(--green); }
.pill-degraded, .pill-unknown { color: var(--amber); }
.pill-down { color: var(--red); }

.node-role { margin-top: 7px; min-height: 15px; color: var(--muted); font-size: .7rem; }
.node-reason { margin-top: 5px; color: var(--amber); font-size: .7rem; line-height: 1.4; }
.node-warning { margin-top: 4px; color: var(--cyan); font-size: .68rem; line-height: 1.4; }

.metric-row {
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}

.metric { min-width: 0; }
.metric span { display: block; color: var(--muted); font-size: .64rem; margin-bottom: 3px; }
.metric strong { display: block; font-size: .74rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.backend-row { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px; }
.backend-chip { gap: 5px; padding: 4px 7px; border-radius: 7px; background: rgba(255,255,255,.035); color: var(--muted); font-size: .65rem; }
.backend-chip::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.backend-chip.is-up { color: var(--green); }
.backend-chip.is-down { color: var(--red); }
.backend-chip.is-unknown { color: var(--amber); }
.backend-chip.is-configured { color: var(--cyan); }
.backend-chip.is-backup { border: 1px dashed rgba(180,156,255,.34); }

.egress-lead { margin: 9px 0 7px; display: flex; align-items: baseline; gap: 6px; }
.egress-lead strong { font-size: 1.45rem; letter-spacing: -.045em; }
.egress-lead span { color: var(--muted); font-size: .7rem; }
.resource { margin-top: 6px; }
.resource-head { margin-bottom: 5px; display: flex; justify-content: space-between; color: var(--muted); font-size: .7rem; }
.meter { display: block; width: 100%; height: 5px; border: 0; border-radius: 999px; overflow: hidden; appearance: none; background: rgba(255,255,255,.055); }
.meter::-webkit-progress-bar { border-radius: inherit; background: rgba(255,255,255,.055); }
.meter::-webkit-progress-value { border-radius: inherit; background: var(--green); transition: width .35s ease; }
.meter::-moz-progress-bar { border-radius: inherit; background: var(--green); transition: width .35s ease; }
.resource.warn .meter::-webkit-progress-value { background: var(--amber); }
.resource.warn .meter::-moz-progress-bar { background: var(--amber); }
.resource.critical .meter::-webkit-progress-value { background: var(--red); }
.resource.critical .meter::-moz-progress-bar { background: var(--red); }

.route-lanes { position: relative; min-height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 42px; }
.route-line { height: 1px; background: linear-gradient(90deg, rgba(89,224,173,.14), rgba(89,224,173,.72)); position: relative; }
.route-line::before { content: ""; position: absolute; left: -4px; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 13px rgba(89,224,173,.68); }
.route-line::after { content: ""; position: absolute; right: -1px; top: -4px; border-left: 7px solid var(--green); border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
.route-line-b { background: linear-gradient(90deg, rgba(84,215,229,.14), rgba(84,215,229,.72)); }
.route-line-b::before { background: var(--cyan); box-shadow: 0 0 13px rgba(84,215,229,.68); }
.route-line-b::after { border-left-color: var(--cyan); }
.route-line-c { background: linear-gradient(90deg, rgba(180,156,255,.14), rgba(180,156,255,.72)); }
.route-line-c::before { background: var(--violet); box-shadow: 0 0 13px rgba(180,156,255,.68); }
.route-line-c::after { border-left-color: var(--violet); }
.route-label { position: absolute; top: calc(50% - 66px); width: 100%; text-align: center; color: var(--muted); font-size: .64rem; letter-spacing: .08em; }
.route-label.bottom { top: auto; bottom: calc(50% - 68px); }

.route-editor-panel {
  margin-top: 8px;
  display: grid;
  grid-template-columns: minmax(260px, .9fr) minmax(380px, 1.5fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid rgba(84, 215, 229, .3);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(13, 31, 28, .98), rgba(8, 22, 20, .98));
  box-shadow: 0 16px 42px rgba(0, 0, 0, .2);
}
.route-editor-panel[hidden] { display: none; }
.route-editor-guide h3 { margin: 4px 0 0; font-size: .95rem; }
.route-editor-guide p { margin-top: 5px; color: var(--muted); font-size: .75rem; line-height: 1.45; }
.route-draft-options { min-width: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.route-draft-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 6px 8px 6px 10px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255, 255, 255, .025); }
.route-draft-chip span { font-size: .74rem; font-weight: 750; }
.route-draft-chip small { color: var(--muted); font-size: .68rem; }
.route-draft-chip button { width: 28px; height: 28px; border: 0; border-radius: 8px; color: var(--muted); background: rgba(255,255,255,.05); cursor: pointer; }
.route-draft-chip button:hover { color: var(--red); background: rgba(255,117,111,.08); }
.route-draft-chip.is-primary { border-color: rgba(34, 211, 238, .34); background: rgba(34, 211, 238, .05); }
.route-draft-chip.is-backup { border-color: rgba(139, 124, 255, .24); }
.route-draft-chip button.route-draft-promote { width: auto; padding: 0 9px; color: var(--muted); font: inherit; font-size: .66rem; font-weight: 750; }
.route-draft-chip button.route-draft-promote:hover:not(:disabled) { color: var(--cyan); background: rgba(34, 211, 238, .1); }
.route-draft-chip button.route-draft-promote:disabled { opacity: .45; cursor: default; }
.route-draft-distribution { flex: 1 0 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.route-draft-distribution > span { color: var(--muted); font-size: .68rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.route-draft-distribution .filter-chip:disabled { opacity: .45; cursor: default; }
.dns-settings-panel { display: grid; gap: 14px; }
.fleet-maintenance-panel { display: grid; gap: 14px; }
.fleet-maintenance-actions { margin-top: 2px; }
.dns-settings-form { display: grid; gap: 12px; }
.dns-settings-form .field-grid { max-width: 780px; }
.dns-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.dns-zones-heading { margin-top: 4px; }
.dns-zones-list { display: grid; gap: 6px; }
.dns-zone-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.02); }
.dns-zone-row strong { font-size: .78rem; font-weight: 750; }
.dns-zone-row span { color: var(--muted); font-size: .7rem; }
.dns-zone-row .dns-zone-managed { color: var(--cyan); }
.delete-domain-choice { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.02); }
.delete-domain-choice[hidden] { display: none; }
.acme-panel { display: grid; gap: 14px; }
.acme-certificate-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); align-items: start; }
.acme-cert-card { display: grid; gap: 6px; min-width: 0; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.02); }
.acme-cert-card.is-issuing { border-color: rgba(34, 211, 238, .34); }
.acme-cert-card.is-failed { border-color: rgba(255, 117, 111, .34); }
.acme-cert-top { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.acme-cert-top strong { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .78rem; font-weight: 750; }
.acme-cert-life { flex: 0 0 auto; color: var(--muted); font-size: .66rem; white-space: nowrap; }
.acme-cert-life.acme-expiry-soon { color: var(--amber, #f0b429); }
.acme-cert-life.acme-expiry-past { color: var(--red); }
.acme-cert-meta { display: flex; flex-wrap: wrap; gap: 6px; color: var(--muted); font-size: .64rem; }
.acme-cert-meta .acme-staging { color: var(--violet); }
.acme-cert-nodes { display: flex; flex-wrap: wrap; gap: 4px; }
.acme-node-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.02); color: var(--muted); font-size: .62rem; font-weight: 700; }
.acme-node-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }
.acme-node-chip small { font-weight: 600; font-size: .6rem; }
.acme-node-chip.is-ok { color: var(--green, #3ddc97); border-color: rgba(89,224,173,.32); }
.acme-node-chip.is-ok::before { background: var(--green, #3ddc97); }
.acme-node-chip.is-busy { color: var(--cyan); border-color: rgba(84,215,229,.32); }
.acme-node-chip.is-busy::before { background: var(--cyan); }
.acme-node-chip.is-warn { color: var(--amber, #f0b429); border-color: rgba(240,180,41,.34); }
.acme-node-chip.is-warn::before { background: var(--amber, #f0b429); }
.acme-node-chip.is-bad { color: var(--red); border-color: rgba(255,117,111,.34); }
.acme-node-chip.is-bad::before { background: var(--red); }
.acme-cert-problem { display: grid; gap: 5px; padding: 7px 8px; border: 1px solid rgba(255,117,111,.28); border-radius: 8px; background: rgba(255,117,111,.06); color: #ffaaa6; font-size: .64rem; line-height: 1.4; }
.acme-problem-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.acme-cert-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.acme-cert-actions button, .acme-problem-actions button { min-height: 28px; padding: 4px 9px; border: 1px solid var(--line); border-radius: 8px; color: var(--text); background: rgba(255,255,255,.04); font: inherit; font-size: .64rem; font-weight: 700; cursor: pointer; }
.acme-cert-actions button:disabled, .acme-problem-actions button:disabled { opacity: .46; cursor: not-allowed; }
.acme-issue-inline { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.acme-issue-inline > div { flex: 1 1 260px; max-width: 380px; min-width: 0; }
.acme-issue-inline > div > label { display: block; margin-bottom: 6px; color: #bac2cb; font-size: .82rem; }
.acme-issue-inline input { width: 100%; box-sizing: border-box; min-height: 42px; }

.route-editor-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }

.details-grid { margin-top: 10px; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(310px, .75fr); gap: 10px; }
.panel { border-radius: var(--radius); padding: 14px; }
.panel-heading { justify-content: space-between; gap: 14px; }
.legend { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: .62rem; }
.dot { display: inline-block; margin-left: 5px; }
.dot.up { color: var(--green); }
.dot.degraded { color: var(--amber); }
.dot.down { color: var(--red); }

.events-list { margin-top: 9px; }
.event-row { display: grid; grid-template-columns: 122px 88px minmax(0, 1fr); align-items: center; gap: 8px; padding: 8px 3px; border-top: 1px solid var(--line); font-size: .74rem; }
.event-row time, .event-node { color: var(--muted); }
.event-state { justify-self: start; }
.empty-state { padding: 15px 0 7px; color: var(--muted); font-size: .7rem; }

.node-card[role="button"] { cursor: pointer; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.node-card[role="button"]:hover { transform: translateY(-1px); border-color: rgba(96, 230, 190, .38); box-shadow: 0 14px 35px rgba(0,0,0,.18); }
.node-card[role="button"]:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.node-dialog { width: min(900px, calc(100vw - 24px)); max-height: calc(100vh - 24px); padding: 0; border: 1px solid rgba(105, 226, 190, .24); border-radius: 16px; color: var(--text); background: rgba(10, 24, 21, .98); box-shadow: 0 24px 70px rgba(0,0,0,.58); }
.node-dialog::backdrop { background: rgba(1, 9, 8, .76); backdrop-filter: blur(7px); }
.dialog-shell { padding: 17px; overflow: auto; max-height: calc(100vh - 26px); }
.dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.dialog-heading h2 { margin-top: 3px; font-size: clamp(1.05rem, 2vw, 1.4rem); }
.dialog-close { width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.04); color: var(--text); font-size: 1.35rem; line-height: 1; cursor: pointer; }
.dialog-overview { display: flex; align-items: center; gap: 10px; margin: 12px 0; }
.dialog-overview p { color: var(--muted); line-height: 1.5; }
.dialog-overview-copy { min-width: 0; }
.dialog-overview-copy .node-warning { color: var(--cyan); }
.signals-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.signal-item { display: flex; gap: 8px; min-height: 54px; padding: 9px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.025); }
.signal-item .dot { flex: 0 0 auto; margin-top: 5px; }
.signal-item strong, .signal-item span { display: block; }
.signal-item strong { font-size: .7rem; }
.signal-item span { margin-top: 3px; color: var(--muted); font-size: .7rem; overflow-wrap: anywhere; }
.detail-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin: 10px 0 3px; }
.detail-facts .metric { min-width: 0; padding: 9px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.02); }
.detail-facts .metric strong { overflow-wrap: anywhere; }
.charts-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 11px; }
.charts-grid .history-chart:only-child { grid-column: 1 / -1; }
.history-chart { min-width: 0; padding: 9px; border: 1px solid var(--line); border-radius: 11px; background: rgba(2, 15, 13, .38); }
.history-head, .history-bounds { display: flex; justify-content: space-between; gap: 10px; }
.history-head { align-items: baseline; font-size: .74rem; }
.history-head span, .history-bounds { color: var(--muted); }
.history-chart svg { display: block; width: 100%; height: 72px; margin: 6px 0 2px; }
.history-chart polyline { stroke: var(--cyan); stroke-width: 2; filter: drop-shadow(0 0 5px rgba(72, 215, 224, .35)); }
.history-bounds { font-size: .61rem; }
.chart-empty, .chart-loading { color: var(--muted); font-size: .72rem; padding: 24px 0; text-align: center; }

.inventory-panel { margin-top: 10px; padding: 14px; }
.inventory-heading { align-items: flex-end; }
.inventory-heading-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.compact-action { min-height: 38px; padding: 7px 11px; border-radius: 9px; font-size: .72rem; }
.inventory-add { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.inventory-access-note { margin-top: 5px; color: var(--muted); font-size: .66rem; line-height: 1.4; }
.operation-status { margin-top: 8px; padding: 8px 10px; border: 1px solid rgba(84,215,229,.3); border-radius: 9px; color: var(--cyan); background: rgba(84,215,229,.06); font-size: .67rem; line-height: 1.4; }
.global-operation-status { margin: 0 0 10px; }
.operation-status.is-error { border-color: rgba(255,117,111,.34); color: #ffaaa6; background: rgba(255,117,111,.07); }
.operation-status.is-success { border-color: rgba(89,224,173,.34); color: var(--green); background: rgba(89,224,173,.07); }
.inventory-tools { margin-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.inventory-search { flex: 1 1 340px; max-width: 520px; }
.inventory-search input { width: 100%; min-height: 40px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--text); background: rgba(2, 15, 13, .55); font: inherit; font-size: .78rem; outline: none; }
.inventory-search input:focus { border-color: rgba(84, 215, 229, .52); box-shadow: 0 0 0 3px rgba(84, 215, 229, .08); }
.filter-group { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.filter-chip { min-height: 38px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: rgba(255,255,255,.02); font: inherit; font-size: .72rem; font-weight: 750; cursor: pointer; }
.filter-chip:hover, .filter-chip:focus-visible { color: var(--text); border-color: var(--line-strong); outline: none; }
.filter-chip.is-active { color: var(--green); border-color: rgba(89,224,173,.36); background: rgba(89,224,173,.08); }
.inventory-list { margin-top: 9px; border-top: 1px solid var(--line); }
.inventory-row { display: grid; grid-template-columns: minmax(190px, 1.1fr) minmax(112px, .55fr) minmax(220px, 1.5fr) auto; align-items: center; gap: 9px; min-height: 54px; padding: 7px 2px; border-bottom: 1px solid var(--line); }
.inventory-row.is-disabled { opacity: .7; }
.inventory-row.is-lifecycle-guarded { margin-inline: -7px; padding-inline: 9px; border-left: 3px solid rgba(180,156,255,.48); background: rgba(180,156,255,.035); }
.inventory-identity, .inventory-route-copy { min-width: 0; }
.inventory-identity strong, .inventory-identity span, .inventory-route-copy strong, .inventory-route-copy span { display: block; }
.inventory-identity strong { font-size: .78rem; }
.inventory-identity span, .inventory-route-copy span { margin-top: 4px; color: var(--muted); font-size: .67rem; overflow-wrap: anywhere; }
.inventory-route-copy strong { color: var(--muted); font-size: .66rem; font-weight: 700; }
.inventory-state { display: flex; align-items: center; gap: 7px; }
.inventory-state .state-pill { flex: 0 0 auto; }
.inventory-actions, .dialog-actions, .detail-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.inventory-actions { max-width: 590px; flex-wrap: wrap; }
.inventory-action { min-height: 38px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px; color: var(--text); background: rgba(255,255,255,.035); font-size: .7rem; font-weight: 750; cursor: pointer; }
.inventory-action:hover { border-color: rgba(89,224,173,.44); background: rgba(89,224,173,.06); }
.inventory-action.is-danger { color: #ffaaa6; border-color: rgba(255,117,111,.28); }
.inventory-action:disabled { opacity: .42; cursor: not-allowed; }
.detail-actions { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }

.operations-panel { margin-top: 10px; }
.operations-heading { align-items: center; }
.operations-copy { margin-top: 6px; color: var(--muted); font-size: .76rem; line-height: 1.5; }
.operations-list { margin-top: 10px; display: grid; gap: 7px; }
.operation-row { width: 100%; display: grid; grid-template-columns: minmax(200px, 1.2fr) minmax(150px, .8fr) minmax(180px, 1fr) auto; align-items: center; gap: 10px; min-height: 56px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 11px; color: var(--text); background: rgba(2, 15, 13, .34); font: inherit; text-align: left; cursor: pointer; }
.operation-row.is-active { border-color: rgba(84,215,229,.3); background: rgba(84,215,229,.045); }
.operation-row.is-failed { border-color: rgba(255,117,111,.3); background: rgba(255,117,111,.045); }
.operation-row:hover { border-color: rgba(89,224,173,.42); background: rgba(89,224,173,.055); }
.operation-row:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.operation-main strong, .operation-main span, .operation-progress span, .operation-progress small { display: block; }
.operation-main strong { font-size: .78rem; }
.operation-main span { margin-top: 3px; color: var(--muted); font-size: .7rem; }
.operation-progress span { font-size: .72rem; }
.operation-progress small { margin-top: 3px; color: var(--muted); font-size: .67rem; }
.operation-time { color: var(--muted); font-size: .7rem; }

.operation-dialog { width: min(840px, calc(100vw - 24px)); }
.operation-dialog-shell { min-height: min(570px, calc(100vh - 26px)); }
.operation-dialog-description { margin-top: 8px; color: var(--muted); font-size: .76rem; line-height: 1.5; }
.operation-dialog-live { min-height: 21px; margin-top: 8px; color: var(--muted); font-size: .72rem; line-height: 1.45; }
.operation-dialog-live.is-success { color: var(--green); }
.operation-dialog-live.is-warning { color: var(--amber); }
.operation-dialog-live.is-error { color: #ffaaa6; }
.operation-detail-overview { margin-top: 5px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 13px; background: rgba(2,15,13,.42); }
.operation-detail-state { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.operation-detail-state > span:last-child { color: var(--muted); font-size: .72rem; }
.operation-mutation-note { margin-top: 10px; padding-left: 10px; border-left: 3px solid var(--amber); color: var(--amber); font-size: .7rem; line-height: 1.5; }
.operation-detail-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.operation-detail-fact { min-width: 0; padding: 10px 11px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.018); }
.operation-detail-fact:last-child { grid-column: span 3; }
.operation-detail-fact dt, .operation-detail-fact dd { margin: 0; }
.operation-detail-fact dt { color: var(--muted); font-size: .65rem; }
.operation-detail-fact dd { margin-top: 4px; color: var(--text); font-size: .72rem; overflow-wrap: anywhere; }
.operation-detail-fact code { color: #bce7dc; font-size: .68rem; }
.operation-detail-section { margin-top: 17px; }
.operation-detail-section h3 { font-size: .82rem; }
.operation-detail-timeline { display: grid; gap: 7px; margin: 10px 0 0; padding: 0; list-style: none; }
.operation-detail-step { display: grid; grid-template-columns: 25px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 11px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.018); }
.operation-detail-step-marker { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; color: var(--muted); background: rgba(255,255,255,.055); font-size: .65rem; font-weight: 850; }
.operation-detail-step.is-done .operation-detail-step-marker { color: #04110e; background: var(--green); }
.operation-detail-step.is-active { border-color: rgba(84,215,229,.28); background: rgba(84,215,229,.045); }
.operation-detail-step.is-active .operation-detail-step-marker { color: #051512; background: var(--cyan); }
.operation-detail-step.is-failed { border-color: rgba(255,117,111,.3); background: rgba(255,117,111,.045); }
.operation-detail-step.is-failed .operation-detail-step-marker { color: white; background: var(--red); }
.operation-detail-step.is-skipped .operation-detail-step-marker { color: var(--amber); background: rgba(255,187,82,.11); }
.operation-detail-step-copy strong, .operation-detail-step-copy span { display: block; }
.operation-detail-step-copy strong { font-size: .73rem; }
.operation-detail-step-copy span { margin-top: 3px; color: var(--muted); font-size: .66rem; line-height: 1.35; }
.operation-detail-step-state { color: var(--muted); font-size: .66rem; white-space: nowrap; }
.operation-detail-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.operation-detail-section-heading > span { color: var(--muted); font-size: .68rem; white-space: nowrap; }
.operation-node-list { display: grid; gap: 7px; margin: 10px 0 0; padding: 0; list-style: none; }
.operation-node-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto minmax(105px, auto); align-items: center; gap: 10px; min-height: 58px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.018); }
.operation-node-row.is-active { border-color: rgba(84,215,229,.28); background: rgba(84,215,229,.045); }
.operation-node-row.is-failed { border-color: rgba(255,117,111,.3); background: rgba(255,117,111,.045); }
.operation-node-marker { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 9px; color: var(--muted); background: rgba(255,255,255,.055); font-size: .72rem; font-weight: 900; }
.operation-node-row.is-done .operation-node-marker { color: #04110e; background: var(--green); }
.operation-node-row.is-active .operation-node-marker { color: #051512; background: var(--cyan); }
.operation-node-row.is-failed .operation-node-marker { color: white; background: var(--red); }
.operation-node-row.is-skipped .operation-node-marker { color: var(--amber); background: rgba(255,187,82,.11); }
.operation-node-copy { min-width: 0; }
.operation-node-copy strong, .operation-node-copy span { display: block; }
.operation-node-copy strong { overflow: hidden; color: var(--text); font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.operation-node-copy span { margin-top: 3px; color: var(--muted); font-size: .66rem; line-height: 1.35; }
.operation-node-counter { min-width: 38px; color: var(--muted); font-size: .67rem; font-variant-numeric: tabular-nums; text-align: right; }
.operation-node-state { min-width: 105px; color: var(--muted); font-size: .67rem; font-weight: 750; text-align: right; }
.operation-node-row.is-done .operation-node-state { color: var(--green); }
.operation-node-row.is-active .operation-node-state { color: var(--cyan); }
.operation-node-row.is-failed .operation-node-state { color: var(--red); }
.operation-detail-technical { margin-top: 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.012); }
.operation-detail-technical > summary { padding: 11px 13px; color: var(--muted); font-size: .7rem; font-weight: 750; cursor: pointer; }
.operation-detail-technical[open] > summary { color: var(--text); border-bottom: 1px solid var(--line); }
.operation-detail-technical-body { padding: 0 12px 12px; }
.operation-detail-error, .operation-next-action { margin-top: 14px; padding: 12px 13px; border-radius: 12px; font-size: .71rem; line-height: 1.55; }
.operation-detail-error { border: 1px solid rgba(255,117,111,.3); color: #ffaaa6; background: rgba(255,117,111,.055); }
.operation-detail-error strong, .operation-detail-error p, .operation-detail-error code { display: block; }
.operation-detail-error p { margin-top: 4px; }
.operation-detail-error code { margin-top: 7px; color: #ffc1bd; font-size: .65rem; overflow-wrap: anywhere; }
.operation-next-action { border: 1px solid rgba(84,215,229,.24); background: rgba(84,215,229,.045); }
.operation-next-action p { margin-top: 5px; color: var(--text); }
.operation-next-action .operation-unknown-note { margin-top: 9px; padding-top: 9px; border-top: 1px solid rgba(255,187,82,.2); color: var(--amber); }
.operation-cancel-confirm { margin-top: 14px; padding: 13px 14px; border: 1px solid rgba(255,187,82,.35); border-radius: 13px; background: rgba(255,187,82,.06); }
.operation-cancel-confirm strong { color: var(--amber); font-size: .76rem; }
.operation-cancel-confirm p { margin-top: 5px; color: var(--muted); font-size: .7rem; line-height: 1.5; }
.operation-cancel-confirm-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 11px; }
.operation-dialog-actions { flex-wrap: wrap; }
.operation-dialog-actions #operation-dialog-cancel,
.operation-dialog-actions #operation-dialog-resolve { margin-right: auto; }

.node-safety-dialog { width: min(760px, calc(100vw - 24px)); }
.node-safety-dialog-shell { min-height: min(520px, calc(100vh - 26px)); }
.node-safety-dialog-node { margin-top: 6px; color: var(--muted); font-size: .75rem; line-height: 1.45; overflow-wrap: anywhere; }
.node-safety-dialog-live { min-height: 22px; margin-top: 9px; color: var(--muted); font-size: .75rem; line-height: 1.5; }
.node-safety-dialog-live.is-locked { color: var(--amber); }
.node-safety-dialog-live.is-error { color: #ffaaa6; }
.node-safety-loading, .node-safety-summary { margin-top: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.025); font-size: .76rem; line-height: 1.55; }
.node-safety-summary.is-locked { border-color: rgba(241,189,98,.28); background: rgba(241,189,98,.045); }
.node-safety-summary.is-error { border-color: rgba(255,117,111,.3); color: #ffaaa6; background: rgba(255,117,111,.05); }
.node-safety-summary strong, .node-safety-summary p { display: block; }
.node-safety-summary p { margin-top: 5px; color: var(--muted); }
.node-safety-sequence { display: grid; gap: 8px; margin: 13px 0 0; padding: 0; list-style: none; }
.node-safety-sequence li { display: grid; grid-template-columns: 30px minmax(0,1fr); align-items: start; gap: 10px; padding: 11px 12px; border: 1px solid rgba(89,224,173,.25); border-radius: 11px; background: rgba(89,224,173,.035); }
.node-safety-sequence li.is-blocked { border-color: rgba(241,189,98,.22); background: rgba(241,189,98,.025); }
.node-safety-number { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; color: #04110e; background: var(--green); font-size: .7rem; font-weight: 850; }
.node-safety-sequence li.is-blocked .node-safety-number { color: var(--amber); background: rgba(241,189,98,.12); }
.node-safety-sequence strong, .node-safety-sequence small { display: block; }
.node-safety-sequence strong { font-size: .75rem; }
.node-safety-sequence small { margin-top: 4px; color: var(--muted); font-size: .69rem; line-height: 1.45; }
.node-safety-blockers { margin-top: 14px; padding: 13px 14px; border: 1px solid rgba(241,189,98,.28); border-radius: 12px; background: rgba(241,189,98,.045); }
.node-safety-blockers strong { font-size: .75rem; }
.node-safety-blockers ul { margin: 8px 0 0; padding-left: 19px; color: #f4d699; font-size: .7rem; line-height: 1.5; }
.node-safety-blockers li + li { margin-top: 4px; }
.node-safety-note { margin-top: 14px; padding-left: 11px; border-left: 3px solid var(--cyan); color: var(--muted); font-size: .71rem; line-height: 1.55; }
.node-safety-dialog-actions { position: sticky; bottom: -17px; margin: 18px -17px -17px; padding: 12px 17px 17px; border-top: 1px solid var(--line); background: rgba(10,24,21,.98); }

.lifecycle-action { min-height: 44px; padding: 9px 12px; font-size: .875rem; }

#dashboard-main.is-stale .summary-grid,
#dashboard-main.is-stale .network-map,
#dashboard-main.is-stale .collector-strip { filter: saturate(.68); }
#dashboard-main.is-stale .network-map::after {
  content: "Показаны последние полученные данные";
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: start center;
  padding-top: 10px;
  color: var(--amber);
  background: linear-gradient(rgba(7,16,15,.5), transparent 70px);
  pointer-events: none;
  font-size: .75rem;
  font-weight: 800;
}

.inventory-edit-form label, .route-editor legend { display: block; margin: 9px 0 5px; color: var(--muted); font-size: .67rem; font-weight: 700; letter-spacing: .02em; }
.inventory-edit-fields { min-width: 0; margin: 0; padding: 0; border: 0; }
.inventory-edit-fields:disabled { opacity: .7; }
.inventory-edit-fields:disabled .check-field, .inventory-edit-fields:disabled summary { cursor: not-allowed; }
.inventory-edit-form input:not([type="checkbox"]):not([type="radio"]), .inventory-edit-form select { width: 100%; border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; color: var(--text); background: rgba(2,15,13,.62); font: inherit; font-size: .75rem; outline: none; }
.inventory-edit-form input:focus, .inventory-edit-form select:focus { border-color: rgba(77,220,190,.58); box-shadow: 0 0 0 3px rgba(77,220,190,.08); }
.inventory-edit-form input:disabled { color: var(--muted); background: rgba(255,255,255,.025); }
.inventory-edit-form select option { background: #10201d; }
.check-field { display: flex !important; align-items: center; gap: 10px; padding: 12px 0 2px; color: var(--text) !important; cursor: pointer; }
.check-field input { width: 18px; height: 18px; accent-color: var(--green); }
.route-editor { margin: 10px 0 0; padding: 0; border: 0; }
.route-editor-options { display: grid; gap: 8px; }
.route-editor-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px 9px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.018); }
.route-editor-row.is-locked { background: linear-gradient(90deg, rgba(84,215,229,.045), rgba(255,255,255,.018)); }
.route-editor-row.is-locked > span > span { color: var(--cyan); }
.route-editor-row > input { width: 18px; height: 18px; accent-color: var(--green); }
.route-editor-row strong, .route-editor-row span { display: block; }
.route-editor-row strong { font-size: .73rem; }
.route-editor-row span { margin-top: 3px; color: var(--muted); font-size: .65rem; }
.route-primary { display: flex !important; align-items: center; gap: 7px; margin: 0 !important; color: var(--cyan) !important; }
.route-primary input { width: 17px; height: 17px; accent-color: var(--cyan); }
.haproxy-settings { margin-top: 16px; padding: 15px; border: 1px solid var(--line); border-radius: 14px; background: rgba(2,15,13,.32); }
.haproxy-settings summary { cursor: pointer; font-size: .76rem; font-weight: 800; }
.haproxy-settings .form-hint { margin-bottom: 2px; }
.dialog-actions { margin-top: 13px; padding-top: 11px; border-top: 1px solid var(--line); }
.node-management { margin-top: 18px; }
.node-management .deployment-actions { margin-top: 11px; }
.node-management .form-hint { margin-top: 9px; }
.node-management { padding: 15px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, .022); }
.node-management-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; }
.node-management-heading h3 { margin: 3px 0 0; font-size: 1rem; }
.node-management-note { color: var(--muted); font-size: .68rem; }
.node-management .inventory-actions { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.node-management .inventory-action { min-width: 104px; min-height: 42px; padding: 9px 14px; font-size: .74rem; }
.node-agent-upgrade { margin-top: 13px; padding: 14px; border: 1px solid rgba(34, 211, 238, .16); border-radius: 13px; background: rgba(34, 211, 238, .035); }
.agent-upgrade-body { min-width: 0; }
.agent-upgrade-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.agent-upgrade-title strong { font-size: .83rem; }
.agent-upgrade-title span { color: var(--muted); font-size: .66rem; }
.agent-upgrade-versions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 11px; }
.agent-upgrade-version { min-width: 0; padding: 10px 11px; border: 1px solid var(--line); border-radius: 10px; background: rgba(6, 11, 22, .42); }
.agent-upgrade-version span, .agent-upgrade-version strong, .agent-upgrade-version small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-upgrade-version span { color: var(--muted); font-size: .62rem; }
.agent-upgrade-version strong { margin-top: 3px; font-size: .86rem; }
.agent-upgrade-version small { margin-top: 3px; color: #7f8ba3; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .6rem; }
.agent-upgrade-status { margin: 11px 0 0; color: #aeb9cc; font-size: .72rem; line-height: 1.55; overflow-wrap: anywhere; }
.agent-upgrade-status.is-success { color: var(--green); }
.agent-upgrade-status.is-warning { color: var(--amber); }
.agent-upgrade-status.is-error { color: #ff97a9; }
.agent-upgrade-status.is-busy { color: var(--cyan); }
.agent-upgrade-body > .inventory-action { margin-top: 11px; }
.agent-upgrade-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.agent-upgrade-actions .inventory-action.is-primary,
.agent-upgrade-body > .inventory-action.is-primary { color: #071116; border-color: rgba(34, 211, 238, .72); background: var(--cyan); }
.agent-upgrade-confirm { margin-top: 11px; display: flex; align-items: flex-start; gap: 9px; padding: 10px 11px; border: 1px solid rgba(251, 191, 36, .25); border-radius: 10px; color: #e9d49a; background: rgba(251, 191, 36, .055); font-size: .7rem; line-height: 1.45; cursor: pointer; }
.agent-upgrade-confirm input { flex: 0 0 auto; margin-top: 2px; accent-color: var(--cyan); }
.agent-upgrade-stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin: 11px 0 0; padding: 0; list-style: none; counter-reset: agent-stage; }
.agent-upgrade-stages li { min-width: 0; padding: 8px 8px 8px 27px; position: relative; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); font-size: .62rem; line-height: 1.35; counter-increment: agent-stage; }
.agent-upgrade-stages li::before { content: counter(agent-stage); position: absolute; left: 8px; top: 7px; width: 14px; height: 14px; display: grid; place-items: center; border-radius: 50%; color: #79869d; background: rgba(255,255,255,.06); font-size: .55rem; }
.agent-upgrade-stages li.is-current { color: var(--cyan); border-color: rgba(34, 211, 238, .34); background: rgba(34, 211, 238, .055); }
.agent-upgrade-stages li.is-done { color: var(--green); border-color: rgba(52, 211, 153, .26); background: rgba(52, 211, 153, .04); }
.agent-upgrade-stages li.is-failed { color: #ff97a9; border-color: rgba(255, 117, 111, .36); background: rgba(255, 117, 111, .045); }
.agent-upgrade-stages[hidden] { display: none; }
.inventory-stale-note { margin-top: 15px; padding: 11px 13px; border: 1px solid rgba(255, 187, 82, .36); border-radius: 11px; color: var(--amber); background: rgba(255, 181, 67, .08); font-size: .72rem; line-height: 1.5; }
.inventory-save-note { margin-bottom: 0; }
.destructive-action { border: 1px solid rgba(255,117,111,.52); border-radius: 12px; padding: 11px 15px; color: #210806; background: var(--red); font: inherit; font-size: .73rem; font-weight: 850; cursor: pointer; }
.destructive-action:disabled { opacity: .46; cursor: not-allowed; }
.confirm-dialog { width: min(570px, calc(100vw - 28px)); }
.confirm-dialog button { min-height: 44px; }
.delete-dialog-node { margin-top: 8px; color: var(--text); font: 750 .875rem ui-monospace, SFMono-Regular, Consolas, monospace; overflow-wrap: anywhere; }
.confirm-copy { padding: 12px 0 0; color: var(--muted); font-size: .875rem; line-height: 1.55; }
.delete-dialog-warning { margin-top: 10px; padding: 12px 13px; border: 1px solid rgba(255,117,111,.34); border-radius: 11px; color: #ffc1bd; background: rgba(255,117,111,.065); font-size: .875rem; font-weight: 720; line-height: 1.5; }
.delete-operation-progress { margin-top: 12px; padding: 12px 13px; border: 1px solid rgba(84,215,229,.28); border-radius: 11px; background: rgba(84,215,229,.045); }
.delete-operation-progress.is-blocked { border-color: rgba(255,187,82,.36); background: rgba(255,187,82,.06); }
.delete-operation-progress strong, .delete-operation-progress p { display: block; font-size: .875rem; }
.delete-operation-progress p { margin-top: 4px; color: var(--muted); line-height: 1.5; }
.delete-technical-details { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.018); }
.delete-technical-details summary { min-height: 32px; display: flex; align-items: center; color: var(--muted); font-size: .875rem; font-weight: 750; cursor: pointer; }
.delete-operation-steps { display: grid; gap: 7px; margin: 8px 0 0; padding: 0; list-style: none; }
.delete-operation-step { padding: 8px 9px; border-left: 3px solid var(--line); color: var(--muted); }
.delete-operation-step strong, .delete-operation-step span { display: block; font-size: .8125rem; line-height: 1.4; }
.delete-operation-step span { margin-top: 2px; overflow-wrap: anywhere; }
.delete-operation-step.is-active { border-color: var(--cyan); color: var(--text); }
.delete-operation-step.is-done { border-color: var(--green); }
.delete-operation-step.is-blocked { border-color: var(--amber); color: var(--amber); }

.node-wizard-dialog { width: min(980px, calc(100vw - 24px)); }
.node-wizard-form { min-height: min(690px, calc(100vh - 26px)); display: flex; flex-direction: column; }
.wizard-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.wizard-steps li { min-width: 0; display: flex; align-items: center; gap: 8px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 11px; color: var(--muted); background: rgba(255,255,255,.018); }
.wizard-steps b { flex: 0 0 auto; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; color: inherit; background: rgba(255,255,255,.05); font-size: .68rem; }
.wizard-steps span { min-width: 0; overflow: hidden; font-size: .69rem; font-weight: 760; text-overflow: ellipsis; white-space: nowrap; }
.wizard-steps li.is-active { color: var(--text); border-color: rgba(84,215,229,.42); background: rgba(84,215,229,.075); }
.wizard-steps li.is-active b { color: #04110e; background: var(--cyan); }
.wizard-steps li.is-done { color: var(--green); border-color: rgba(89,224,173,.24); }
.wizard-steps li.is-done b { color: #04110e; background: var(--green); }
.wizard-status { min-height: 38px; margin-top: 10px; padding: 10px 12px; border-left: 3px solid var(--cyan); color: var(--muted); background: rgba(84,215,229,.045); font-size: .72rem; line-height: 1.5; }
.wizard-status.is-busy { color: var(--text); border-color: var(--amber); background: rgba(241,189,98,.06); }
.wizard-status.is-success { color: var(--green); border-color: var(--green); background: rgba(89,224,173,.055); }
.wizard-stage { min-width: 0; margin: 15px 0 0; padding: 0; border: 0; }
.wizard-stage[hidden] { display: none; }
.wizard-stage > legend { margin-bottom: 4px; color: var(--text); font-size: .93rem; font-weight: 850; }
.wizard-lead { max-width: 760px; color: var(--muted); font-size: .73rem; line-height: 1.55; }
.wizard-field-grid { margin-top: 9px; }
.wizard-field-grid > div > label, .credential-card label { display: block; margin: 9px 0 6px; color: var(--muted); font-size: .68rem; font-weight: 720; }
.node-wizard-form input:not([type="checkbox"]), .node-wizard-form select, .node-wizard-form textarea { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 10px 11px; color: var(--text); background: rgba(2,15,13,.62); font: inherit; font-size: .76rem; outline: none; }
.node-wizard-form textarea { resize: vertical; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .67rem; line-height: 1.45; }
.node-wizard-form input:focus, .node-wizard-form select:focus, .node-wizard-form textarea:focus { border-color: rgba(84,215,229,.58); box-shadow: 0 0 0 3px rgba(84,215,229,.08); }
.node-wizard-form select option { background: #10201d; }
.wizard-route-field { margin-top: 15px; }
.wizard-route-field > legend { color: var(--muted); font-size: .68rem; font-weight: 720; }
.wizard-advanced { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.016); }
.wizard-advanced summary { cursor: pointer; color: var(--muted); font-size: .71rem; font-weight: 760; }
.wizard-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.wizard-summary > div { min-width: 0; padding: 11px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.018); }
.wizard-summary span, .wizard-summary strong { display: block; }
.wizard-summary span { color: var(--muted); font-size: .63rem; }
.wizard-summary strong { margin-top: 5px; overflow-wrap: anywhere; font-size: .74rem; }
.wizard-enrollment-source { max-width: 520px; margin-top: 14px; }
.wizard-enrollment-source > label { display: block; margin-bottom: 6px; color: var(--muted); font-size: .7rem; font-weight: 720; }
.wizard-command-empty, .wizard-command-card, .wizard-agent-wait, .wizard-ready-card { margin-top: 14px; border: 1px solid var(--line); border-radius: 13px; background: rgba(2,15,13,.34); }
.wizard-command-empty { display: grid; gap: 5px; max-width: 760px; padding: 15px; }
.wizard-command-empty[hidden], .wizard-command-card[hidden] { display: none; }
.wizard-command-empty strong { font-size: .8rem; }
.wizard-command-empty span { color: var(--muted); font-size: .72rem; line-height: 1.5; }
.wizard-command-card { max-width: 820px; padding: 15px; border-color: rgba(84,215,229,.27); background: rgba(84,215,229,.035); }
.wizard-command-card > label { display: block; margin: 10px 0 6px; color: var(--muted); font-size: .68rem; font-weight: 720; }
.wizard-command-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.wizard-command-heading > div { min-width: 0; }
.wizard-command-heading strong, .wizard-command-heading span { display: block; }
.wizard-command-heading strong { font-size: .79rem; }
.wizard-command-heading span { margin-top: 4px; color: var(--muted); font-size: .67rem; line-height: 1.4; }
.wizard-code-heading { margin-top: 15px; padding-top: 14px; border-top: 1px solid var(--line); }
.wizard-command-card #wizard-install-command, .wizard-command-card #wizard-enrollment-code { border-color: rgba(84,215,229,.3); color: var(--cyan); background: rgba(1,11,10,.72); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.wizard-command-card #wizard-install-command { min-height: 82px; resize: none; }
.wizard-command-card #wizard-enrollment-code { letter-spacing: .035em; }
.wizard-command-actions { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.wizard-command-actions > span { color: var(--muted); font-size: .68rem; line-height: 1.4; }
.wizard-command-card button { min-height: 44px; }
.wizard-agent-wait, .wizard-ready-card { display: flex; align-items: center; gap: 12px; max-width: 720px; padding: 16px; }
.wizard-agent-wait { border-color: rgba(241,189,98,.28); }
.wizard-agent-wait.is-ready, .wizard-ready-card { border-color: rgba(89,224,173,.3); background: rgba(89,224,173,.045); }
.wizard-agent-wait > div, .wizard-ready-card > div { min-width: 0; }
.wizard-agent-wait strong, .wizard-agent-wait small, .wizard-ready-card strong, .wizard-ready-card small { display: block; }
.wizard-agent-wait strong, .wizard-ready-card strong { font-size: .8rem; }
.wizard-agent-wait small, .wizard-ready-card small { margin-top: 4px; color: var(--muted); font-size: .7rem; line-height: 1.45; }
.wizard-ready-card > span { display: grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; color: #04110e; background: var(--green); font-weight: 900; }
.fingerprint-card { margin-top: 14px; padding: 14px; border: 1px solid rgba(84,215,229,.27); border-radius: 12px; background: rgba(84,215,229,.055); }
.fingerprint-card span, .fingerprint-card code, .fingerprint-card small { display: block; }
.fingerprint-card span { color: var(--muted); font-size: .64rem; }
.fingerprint-card code { margin-top: 7px; overflow-wrap: anywhere; color: var(--cyan); font-size: clamp(.72rem, 2vw, .9rem); font-weight: 780; }
.fingerprint-card small { margin-top: 6px; color: var(--muted); font-size: .64rem; }
.wizard-confirm { margin-top: 12px; }
.wizard-confirm label { display: block; margin-bottom: 6px; color: var(--muted); font-size: .68rem; font-weight: 720; }
.credential-card { max-width: 720px; margin-top: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 13px; background: rgba(2,15,13,.34); }
.secret-note { margin-top: 10px; color: var(--amber); font-size: .67rem; line-height: 1.5; }
.inspection-result { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.inspection-check { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 9px; align-items: start; padding: 11px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.018); }
.inspection-check i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; color: #04110e; background: var(--green); font-style: normal; font-size: .69rem; font-weight: 900; }
.inspection-check.is-warning i { color: #171005; background: var(--amber); }
.inspection-check.is-failed i { color: white; background: var(--red); }
.inspection-check strong, .inspection-check span { display: block; }
.inspection-check strong { font-size: .71rem; }
.inspection-check span { margin-top: 3px; color: var(--muted); font-size: .65rem; line-height: 1.4; }
.wizard-complete { padding: 22px 14px; text-align: center; }
.wizard-success-mark { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto; border: 1px solid rgba(89,224,173,.42); border-radius: 17px; color: #04110e; background: var(--green); box-shadow: 0 12px 30px rgba(89,224,173,.14); font-size: 1.35rem; font-weight: 900; }
.wizard-success-mark.is-planning { border-color: rgba(84,215,229,.4); background: var(--cyan); box-shadow: 0 12px 30px rgba(84,215,229,.12); }
.wizard-complete h3 { margin: 13px 0 0; font-size: 1.05rem; }
.wizard-complete > p { max-width: 620px; margin: 7px auto 0; color: var(--muted); font-size: .73rem; line-height: 1.55; }
.wizard-agent-state { width: fit-content; margin: 16px auto 0; display: flex; align-items: center; gap: 9px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 11px; color: var(--amber); background: rgba(241,189,98,.05); }
.wizard-agent-state.is-ready { color: var(--green); border-color: rgba(89,224,173,.3); background: rgba(89,224,173,.055); }
.wizard-agent-state strong { font-size: .72rem; }
.wizard-safety-note { padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.025); }
.wizard-deployment-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 9px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
}
.wizard-deployment-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 18px; text-align: left; }
.wizard-deployment-heading strong { font-size: .78rem; }
.wizard-deployment-heading span { color: var(--muted); font-size: .68rem; text-align: right; }
.wizard-deployment-list > li {
  min-width: 0;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: start;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(255,255,255,.018);
}
.wizard-check-number {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  color: var(--muted);
  background: rgba(255,255,255,.055);
  font-size: .75rem;
  font-weight: 850;
}
.wizard-deployment-list > li > div > strong, .wizard-deployment-list > li > div > small { display: block; }
.wizard-deployment-list > li > div > strong { font-size: .78rem; }
.wizard-deployment-list > li > div > small { margin-top: 3px; color: var(--muted); font-size: .69rem; line-height: 1.4; }
.wizard-check-state { grid-column: 3; color: var(--muted); font-size: .7rem; font-weight: 780; text-align: right; }
.wizard-deployment-list > li.is-current { border-color: rgba(84,215,229,.42); background: rgba(84,215,229,.05); }
.wizard-deployment-list > li.is-current .wizard-check-number { color: #04110e; background: var(--cyan); }
.wizard-deployment-list > li.is-current > .wizard-check-state { color: var(--cyan); }
.wizard-deployment-list > li.is-done { border-color: rgba(89,224,173,.32); background: rgba(89,224,173,.045); }
.wizard-deployment-list > li.is-done .wizard-check-number { color: #04110e; background: var(--green); }
.wizard-deployment-list > li.is-done > .wizard-check-state { color: var(--green); }
.wizard-deployment-list > li.is-failed { border-color: rgba(255,117,111,.4); background: rgba(255,117,111,.05); }
.wizard-deployment-list > li.is-failed .wizard-check-number { color: white; background: var(--red); }
.wizard-deployment-list > li.is-failed > .wizard-check-state { color: #ffaaa6; }
.wizard-deployment-list > li.is-blocked { border-color: rgba(241,189,98,.3); }
.wizard-deployment-list > li.is-blocked > .wizard-check-state { color: var(--amber); }
.wizard-relay-progress {
  grid-column: 2 / -1;
  display: grid;
  gap: 6px;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}
.wizard-relay-progress[hidden] { display: none; }
.wizard-relay-progress li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; background: rgba(2,15,13,.28); }
.wizard-relay-progress strong, .wizard-relay-progress small, .wizard-relay-progress b { display: block; }
.wizard-relay-progress strong { overflow: hidden; font-size: .71rem; text-overflow: ellipsis; white-space: nowrap; }
.wizard-relay-progress small { grid-column: 1; color: var(--muted); font-size: .64rem; }
.wizard-relay-progress b { grid-column: 2; grid-row: 1 / 3; color: var(--muted); font-size: .67rem; font-weight: 800; text-align: right; }
.wizard-relay-progress li.is-checking { border-color: rgba(84,215,229,.34); }
.wizard-relay-progress li.is-checking b { color: var(--cyan); }
.wizard-relay-progress li.is-connected { border-color: rgba(89,224,173,.3); background: rgba(89,224,173,.035); }
.wizard-relay-progress li.is-connected b { color: var(--green); }
.wizard-relay-progress li.is-error { border-color: rgba(255,117,111,.38); background: rgba(255,117,111,.035); }
.wizard-relay-progress li.is-error b { color: #ffaaa6; }
.wizard-role-progress {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: 10px;
  text-align: left;
}
.wizard-role-progress[hidden] { display: none; }
.wizard-role-progress > div { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); font-size: .69rem; }
.wizard-role-progress i { display: grid; place-items: center; flex: 0 0 auto; width: 22px; height: 22px; border-radius: 7px; background: rgba(255,255,255,.055); font-style: normal; font-weight: 850; }
.wizard-role-progress .is-current { color: var(--cyan); border-color: rgba(84,215,229,.34); }
.wizard-role-progress .is-current i { color: #04110e; background: var(--cyan); }
.wizard-role-progress .is-done { color: var(--green); border-color: rgba(89,224,173,.27); }
.wizard-role-progress .is-done i { color: #04110e; background: var(--green); }
.wizard-role-progress .is-failed { color: #ffaaa6; border-color: rgba(255,117,111,.36); }
.wizard-role-progress .is-failed i { color: white; background: var(--red); }
.wizard-activation-review {
  margin-top: 13px;
  padding: 15px;
  border: 1px solid rgba(84,215,229,.3);
  border-radius: 13px;
  background: rgba(84,215,229,.045);
  text-align: left;
}
.wizard-activation-review h4 { margin: 4px 0 0; font-size: .9rem; }
.wizard-activation-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 10px; }
.wizard-activation-summary > div { min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: rgba(2,15,13,.28); }
.wizard-activation-summary span, .wizard-activation-summary strong { display: block; }
.wizard-activation-summary span { color: var(--muted); font-size: .66rem; }
.wizard-activation-summary strong { margin-top: 4px; overflow-wrap: anywhere; font-size: .74rem; line-height: 1.4; }
.wizard-activation-confirm { margin-top: 11px; padding: 11px; border-color: rgba(89,224,173,.28); background: rgba(89,224,173,.045); }
.field-help { display: block; margin-top: 5px; color: var(--muted); font-size: .75rem; line-height: 1.4; }
.wizard-egress-flow {
  margin-top: 14px;
  padding: 16px;
  border: 1px solid rgba(84,215,229,.28);
  border-radius: 15px;
  background: rgba(84,215,229,.035);
  text-align: left;
}
.wizard-egress-flow[hidden] { display: none; }
.wizard-egress-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.wizard-egress-heading h4 { margin: 4px 0 0; font-size: .94rem; }
.compact-action { min-height: 40px; padding: 9px 12px; font-size: .8rem; }
.wizard-egress-capability {
  margin-top: 13px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--cyan);
  border-radius: 11px;
  background: rgba(2,15,13,.36);
}
.wizard-egress-capability strong, .wizard-egress-capability p { display: block; }
.wizard-egress-capability strong { color: var(--text); font-size: .86rem; }
.wizard-egress-capability p { margin: 5px 0 0; color: var(--muted); font-size: .8rem; line-height: 1.5; }
.wizard-egress-capability.is-ready { border-left-color: var(--green); }
.wizard-egress-capability.is-ready strong { color: var(--green); }
.wizard-egress-capability.is-blocked { border-left-color: var(--amber); background: rgba(241,189,98,.045); }
.wizard-egress-capability.is-blocked strong { color: var(--amber); }
.wizard-egress-capability.is-error { border-left-color: var(--red); background: rgba(255,117,111,.045); }
.wizard-egress-capability.is-error strong { color: #ffaaa6; }
.wizard-egress-reservation-fields { min-width: 0; margin: 15px 0 0; padding: 0; border: 0; }
.wizard-egress-reservation-fields:disabled { opacity: .64; }
.wizard-egress-reservation-fields > legend { color: var(--text); font-size: .86rem; font-weight: 820; }
.wizard-egress-intro { margin: 5px 0 0; color: var(--muted); font-size: .8rem; line-height: 1.5; }
.wizard-egress-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; margin-top: 9px; }
.wizard-egress-options label { display: block; margin: 0 0 6px; color: var(--muted); font-size: .8rem; font-weight: 720; }
.wizard-egress-review {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgba(89,224,173,.25);
  border-radius: 13px;
  background: rgba(89,224,173,.035);
}
.wizard-egress-review > strong { font-size: .88rem; }
.wizard-egress-review-facts, .wizard-egress-receipt-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.wizard-egress-review-facts > div, .wizard-egress-receipt-facts > div { min-width: 0; padding: 10px 11px; border: 1px solid var(--line); border-radius: 10px; background: rgba(2,15,13,.3); }
.wizard-egress-review-facts span, .wizard-egress-review-facts strong, .wizard-egress-receipt-facts span, .wizard-egress-receipt-facts strong, .wizard-egress-receipt-facts code { display: block; }
.wizard-egress-review-facts span, .wizard-egress-receipt-facts span { color: var(--muted); font-size: .75rem; }
.wizard-egress-review-facts strong, .wizard-egress-receipt-facts strong, .wizard-egress-receipt-facts code { margin-top: 4px; overflow-wrap: anywhere; font-size: .82rem; line-height: 1.4; }
.wizard-egress-boundary { display: grid; gap: 5px; margin-top: 10px; padding: 10px 12px; border-left: 3px solid var(--cyan); color: var(--muted); background: rgba(84,215,229,.045); font-size: .78rem; line-height: 1.5; }
.wizard-egress-boundary b { color: var(--text); }
.wizard-egress-confirm { margin-top: 10px; padding: 11px; border-color: rgba(89,224,173,.28); background: rgba(89,224,173,.045); }
.wizard-egress-receipt { position: relative; margin-top: 14px; padding: 14px; border: 1px solid rgba(89,224,173,.3); border-radius: 13px; background: rgba(89,224,173,.045); }
.wizard-egress-receipt[hidden] { display: none; }
.wizard-egress-receipt h5 { margin: 4px 0 0; font-size: .92rem; }
.wizard-egress-receipt > button { margin-top: 12px; }
.wizard-egress-cancel-warning { margin: 11px 0 0; padding: 10px 12px; border-left: 3px solid var(--amber); color: var(--muted); background: rgba(241,189,98,.055); font-size: .78rem; line-height: 1.5; }
.wizard-egress-activation-gate { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 11px; align-items: start; margin-top: 14px; padding: 13px; border: 1px solid rgba(241,189,98,.26); border-radius: 13px; background: rgba(241,189,98,.045); }
.wizard-egress-activation-gate > span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; color: var(--amber); background: rgba(241,189,98,.12); font-size: .82rem; font-weight: 900; }
.wizard-egress-activation-gate strong, .wizard-egress-activation-gate p { display: block; }
.wizard-egress-activation-gate strong { color: var(--amber); font-size: .86rem; }
.wizard-egress-activation-gate p { margin: 4px 0 0; color: var(--muted); font-size: .8rem; line-height: 1.5; }
.wizard-actions { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 9px; }
.wizard-actions #node-wizard-cancel { margin-right: auto; }

@media (max-width: 760px) {
  .signals-grid, .detail-facts, .charts-grid { grid-template-columns: 1fr 1fr; }
  .charts-grid .history-chart:last-child { grid-column: 1 / -1; }
  .inventory-row { grid-template-columns: 1fr auto; }
  .inventory-route-copy { grid-column: 1 / -1; grid-row: 2; }
  .inventory-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .inventory-heading { align-items: flex-start; }
  .inventory-heading-actions { align-items: flex-end; flex-direction: column; }
  .wizard-steps { grid-template-columns: repeat(5, 40px); justify-content: space-between; }
  .wizard-steps li { justify-content: center; padding: 8px; }
  .wizard-steps span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .wizard-summary, .inspection-result { grid-template-columns: 1fr; }
  .wizard-command-heading, .wizard-command-actions { align-items: stretch; flex-direction: column; }
  .wizard-command-heading button, .wizard-command-actions button { width: 100%; }
  .wizard-deployment-list, .wizard-role-progress { grid-template-columns: 1fr; }
  .wizard-activation-summary, .wizard-egress-options, .wizard-egress-review-facts, .wizard-egress-receipt-facts { grid-template-columns: 1fr; }
  .wizard-egress-heading { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 480px) {
  .dialog-shell { padding: 18px; }
  .signals-grid, .detail-facts, .charts-grid { grid-template-columns: 1fr; }
  .charts-grid .history-chart:last-child { grid-column: auto; }
  .dialog-overview { align-items: flex-start; flex-direction: column; }
  .inventory-row { grid-template-columns: 1fr; }
  .inventory-route-copy, .inventory-actions { grid-column: auto; }
  .inventory-actions, .dialog-actions, .detail-actions { align-items: stretch; flex-direction: column; }
  .inventory-action, .dialog-actions button, .detail-actions button { width: 100%; }
  .route-editor-row { grid-template-columns: auto minmax(0, 1fr); }
  .wizard-deployment-heading { align-items: flex-start; flex-direction: column; }
  .wizard-deployment-heading span { text-align: left; }
  .wizard-deployment-list > li { grid-template-columns: 30px minmax(0, 1fr); }
  .wizard-check-state { grid-column: 2; text-align: left; }
  .wizard-relay-progress { grid-column: 1 / -1; }
  .wizard-relay-progress li { grid-template-columns: minmax(0, 1fr); }
  .wizard-relay-progress b { grid-column: 1; grid-row: auto; text-align: left; }
  .route-editor-row > .route-mode { grid-column: 2 / -1; min-width: 0; }
  .route-primary { grid-column: 2; }
  .wizard-actions { align-items: stretch; flex-direction: column; }
  .wizard-actions #node-wizard-cancel { margin-right: 0; order: 3; }
  .wizard-actions button { width: 100%; }
}

.nav-button { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.manage-main { max-width: 1500px; }
.manage-layout { display: grid; grid-template-columns: minmax(360px, .92fr) minmax(420px, 1.08fr); gap: 18px; align-items: start; }
.manage-form, .plan-panel { padding: 22px; }
.manage-form label, .exit-picker legend { display: block; margin: 14px 0 7px; color: var(--muted); font-size: .72rem; font-weight: 700; letter-spacing: .02em; }
.manage-form input, .manage-form select, .manage-form textarea { width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 11px 12px; color: var(--text); background: rgba(2, 15, 13, .62); font: inherit; outline: none; }
.manage-form input:focus, .manage-form select:focus, .manage-form textarea:focus { border-color: rgba(77, 220, 190, .58); box-shadow: 0 0 0 3px rgba(77, 220, 190, .08); }
.manage-form select option { background: #10201d; }
.form-section { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: end; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.form-step { display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: 5px; border-radius: 10px; color: var(--cyan); background: rgba(70, 220, 196, .1); font-weight: 800; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.exit-picker { border: 0; padding: 0; margin: 5px 0 0; }
.exit-options { display: grid; gap: 8px; }
.exit-option { display: flex !important; align-items: center; gap: 10px; margin: 0 !important; padding: 11px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; background: rgba(255,255,255,.018); }
.exit-option input { width: 17px; height: 17px; accent-color: var(--green); }
.exit-option span, .exit-option strong, .exit-option code { display: block; }
.exit-option strong { color: var(--text); font-size: .74rem; }
.exit-option code { margin-top: 3px; color: var(--muted); font-size: .66rem; }
.form-hint { margin-top: 10px; color: var(--muted); font-size: .7rem; line-height: 1.55; }
.secret-label { color: var(--amber); font-weight: 700; }
.form-error { margin-top: 15px; padding: 11px 13px; border: 1px solid rgba(255, 96, 116, .36); border-radius: 11px; color: #ff9bac; background: rgba(255, 68, 94, .08); font-size: .72rem; }
.form-actions { display: flex; gap: 10px; margin-top: 19px; }
.primary-action, .secondary-action { border-radius: 12px; padding: 11px 15px; font: inherit; font-size: .73rem; font-weight: 800; cursor: pointer; }
.primary-action { border: 1px solid rgba(71, 226, 184, .5); color: #04110e; background: var(--green); }
.secondary-action { border: 1px solid var(--line); color: var(--text); background: rgba(255,255,255,.04); }
.primary-action:disabled, .secondary-action:disabled { opacity: .46; cursor: not-allowed; }
.plan-empty { min-height: 340px; display: grid; align-content: center; justify-items: center; padding: 35px; text-align: center; color: var(--muted); }
.plan-empty strong { color: var(--text); }
.plan-empty p { max-width: 420px; margin-top: 8px; font-size: .75rem; line-height: 1.6; }
.plan-meta { display: grid; grid-template-columns: .7fr 1.3fr; gap: 10px; margin: 16px 0; }
.plan-meta > div { min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.plan-meta span, .plan-meta strong, .plan-meta code { display: block; }
.plan-meta span { color: var(--muted); font-size: .65rem; }
.plan-meta strong, .plan-meta code { margin-top: 5px; font-size: .72rem; overflow-wrap: anywhere; }
.plan-files { display: grid; gap: 12px; }
.plan-file { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; }
.plan-file > div { display: flex; justify-content: space-between; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.025); }
.plan-file code, .plan-file span { font-size: .65rem; overflow-wrap: anywhere; }
.plan-file span { color: var(--muted); text-align: right; }
.plan-file pre { max-height: 360px; overflow: auto; margin: 0; padding: 13px; color: #bce7dc; background: rgba(1, 10, 9, .54); font-size: .65rem; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.deployment-note { margin-top: 15px; padding: 14px; border: 1px solid rgba(255, 187, 82, .25); border-radius: 13px; background: rgba(255, 181, 67, .06); }
.deployment-note strong { color: var(--amber); font-size: .74rem; }
.deployment-note p { margin-top: 5px; color: var(--muted); font-size: .69rem; line-height: 1.55; }
.deployment-note.is-ready { border-color: rgba(89, 224, 173, .3); background: rgba(89, 224, 173, .065); }
.deployment-note.is-ready strong { color: var(--green); }
.agent-connection { margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line); }
.agent-connection > span:first-child { color: var(--text); font-size: .72rem; font-weight: 700; }
.deployment-actions { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 12px; }
.role-inspection { margin-top: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(2, 15, 13, .34); }
.role-inspection .panel-heading { align-items: center; }
.role-inspection .panel-heading strong { color: var(--text); }
.inspection-details { display: grid; gap: 6px; margin: 10px 0 0; padding-left: 18px; color: var(--muted); font-size: .67rem; line-height: 1.45; }
.egress-reservation { margin-top: 18px; }
.egress-reservation-fields { min-width: 0; margin: 5px 0 0; padding: 0; border: 0; }
.egress-reservation-fields:disabled { opacity: .62; }
.reservation-facts { display: grid; grid-template-columns: 1.2fr .65fr 1.6fr; gap: 8px; margin-top: 13px; }
.reservation-facts > div { min-width: 0; padding: 11px; border: 1px solid var(--line); border-radius: 11px; background: rgba(2, 15, 13, .34); }
.reservation-facts span, .reservation-facts strong, .reservation-facts code { display: block; }
.reservation-facts span { color: var(--muted); font-size: .64rem; }
.reservation-facts strong, .reservation-facts code { margin-top: 5px; font-size: .68rem; overflow-wrap: anywhere; }
.egress-reservation-actions { grid-template-columns: 1fr 1fr; }
.reservation-safety-note { margin-top: 12px; padding: 10px 12px; border-left: 3px solid var(--cyan); color: var(--muted); background: rgba(84, 215, 229, .055); font-size: .69rem; line-height: 1.55; }
.reservation-safety-note strong { color: var(--cyan); }
.danger-action { border: 1px solid rgba(255, 187, 82, .5); border-radius: 12px; padding: 11px 15px; color: #171005; background: var(--amber); font: inherit; font-size: .73rem; font-weight: 800; cursor: pointer; }
.danger-action:disabled { opacity: .46; cursor: not-allowed; }
.rollout-panel { margin-top: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: rgba(2, 15, 13, .42); }
.rollout-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rollout-heading h3 { margin: 3px 0 0; font-size: .86rem; }
.rollout-summary { margin-top: 11px; color: var(--muted); font-size: .7rem; line-height: 1.55; }
.rollout-steps { display: grid; gap: 7px; margin: 13px 0 0; padding: 0; list-style: none; }
.rollout-step { display: grid; grid-template-columns: 21px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.018); }
.rollout-step-marker { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: var(--muted); background: rgba(255,255,255,.06); font-size: .62rem; font-weight: 900; }
.rollout-step.is-done .rollout-step-marker { color: #04110e; background: var(--green); }
.rollout-step.is-active .rollout-step-marker { color: #171005; background: var(--amber); }
.rollout-step.is-failed .rollout-step-marker { color: white; background: var(--red); }
.rollout-step-copy strong, .rollout-step-copy span { display: block; }
.rollout-step-copy strong { font-size: .7rem; }
.rollout-step-copy span { margin-top: 2px; color: var(--muted); font-size: .63rem; }
.rollout-step-state { color: var(--muted); font-size: .63rem; white-space: nowrap; }
.rollout-actions { display: flex; justify-content: flex-end; margin-top: 11px; }
.rollout-actions button { padding: 8px 11px; font-size: .66rem; }
.jobs-panel { margin-top: 18px; }
.jobs-list { margin-top: 13px; }
.job-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 4px; border-top: 1px solid var(--line); }
.job-row > div { min-width: 0; }
.job-row strong, .job-row span { display: block; }
.job-row strong { font-size: .75rem; }
.job-row div span { margin-top: 4px; color: var(--muted); font-size: .66rem; }
.job-actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; }
.job-actions .state-pill { flex: 0 0 auto; }
.job-cancel { padding: 7px 10px; font-size: .65rem; }

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

@media (max-width: 620px) {
  .field-grid, .plan-meta, .reservation-facts { grid-template-columns: 1fr; }
  .form-actions { flex-direction: column; }
  .deployment-actions, .egress-reservation-actions { grid-template-columns: 1fr; }
  .job-row { align-items: flex-start; }
  .job-actions { flex-direction: column; align-items: flex-end; }
  .rollout-heading { align-items: flex-start; }
  .rollout-step { grid-template-columns: 21px minmax(0, 1fr); }
  .rollout-step-state { grid-column: 2; }
}
.route-badge { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; font-size: .65rem; font-weight: 900; }
.route-badge.active { color: var(--green); background: rgba(89,224,173,.12); }
.route-badge.primary { color: var(--cyan); background: rgba(84,215,229,.12); }
.route-badge.backup { color: var(--violet); background: rgba(180,156,255,.12); }

footer { width: min(1540px, calc(100% - 40px)); margin: 0 auto; padding: 17px 2px 28px; border-top: 1px solid var(--line); color: var(--muted); display: flex; justify-content: space-between; font-size: .65rem; }

.login-page {
  display: grid;
  place-items: center;
  overflow: hidden;
}

.login-page::before,
.login-page::after {
  content: "";
  position: fixed;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .15;
  pointer-events: none;
}

.login-page::before { left: -180px; top: -180px; background: var(--green); }
.login-page::after { right: -180px; bottom: -180px; background: var(--cyan); }
.login-shell { width: min(100% - 32px, 430px); margin: 0; padding: 30px 0; position: relative; z-index: 1; }

.login-card {
  padding: clamp(26px, 6vw, 38px);
  border: 1px solid var(--line-strong);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(17, 33, 30, .97), rgba(8, 19, 17, .98));
  box-shadow: 0 28px 80px rgba(0, 0, 0, .42);
}

.login-brand { margin-bottom: 36px; display: flex; align-items: center; gap: 12px; font-size: .82rem; font-weight: 800; }
.login-card h1 { margin-top: 8px; font-size: clamp(1.7rem, 6vw, 2.25rem); letter-spacing: -.045em; }
.login-copy { margin-top: 10px; color: var(--muted); font-size: .8rem; line-height: 1.55; }
.login-error { margin-top: 18px; padding: 10px 12px; border: 1px solid rgba(255,117,111,.35); border-radius: 10px; color: #ffaaa6; background: rgba(255,117,111,.08); font-size: .72rem; }
.login-form { margin-top: 24px; display: grid; gap: 9px; }
.login-form label { margin-top: 7px; color: var(--muted); font-size: .7rem; font-weight: 700; }
.login-form input {
  width: 100%;
  height: 46px;
  padding: 0 13px;
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  outline: none;
  background: rgba(4, 12, 10, .72);
  color: var(--text);
  font-family: inherit;
  font-size: .88rem;
  font-weight: 600;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.login-form input:focus { border-color: rgba(89,224,173,.72); box-shadow: 0 0 0 3px rgba(89,224,173,.09); }
.login-form button {
  height: 48px;
  margin-top: 12px;
  border: 0;
  border-radius: 11px;
  color: #061510;
  background: linear-gradient(135deg, #67e6b7, #52d0c7);
  font-weight: 850;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(73, 211, 169, .15);
  transition: filter .18s ease, transform .18s ease;
}
.login-form button:hover { filter: brightness(1.07); }
.login-form button:active { transform: translateY(1px); }
.login-form button:focus-visible { outline: 2px solid white; outline-offset: 3px; }
.login-foot { margin-top: 25px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: .64rem; }
.login-foot .pulse { color: var(--green); }

@media (max-width: 1320px) {
  .topbar { flex-wrap: wrap; }
  .workspace-nav { order: 3; width: 100%; overflow-x: auto; justify-content: flex-start; }
  .summary-grid { grid-template-columns: repeat(2, 1fr); }
  .automation-launcher { grid-template-columns: minmax(260px, .8fr) minmax(520px, 1.5fr); }
  .automation-readiness { grid-column: 1 / -1; padding: 10px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .network-map { grid-template-columns: 1fr; }
  .route-lanes { min-height: 58px; flex-direction: row; gap: 22px; align-items: center; }
  .route-line { flex: 1; min-width: 42px; }
  .route-label { top: 6px; }
  .route-label.bottom { bottom: 5px; }
  .relay-grid, .egress-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .topology-links { display: none; }
  .route-editor-panel { grid-template-columns: 1fr; }
  .route-editor-actions { justify-content: flex-start; }
}

@media (max-width: 760px) {
  .topbar { align-items: flex-start; position: relative; }
  .brand { flex: 1 1 auto; }
  .topbar-actions { flex: 0 1 auto; flex-wrap: wrap; justify-content: flex-end; }
  .brand p { display: none; }
  .global-state { max-width: 145px; }
  #dashboard-role { display: none; }
  #refresh { min-width: 44px; padding: 0 10px; font-size: 0; }
  #refresh::before { content: "↻"; font-size: 1.05rem; }
  .workspace-nav { margin-top: 2px; }
  .workspace-nav a { min-height: 44px; display: inline-flex; align-items: center; }
  main { width: min(100% - 18px, 1540px); padding-top: 10px; }
  .summary-grid { gap: 7px; }
  .summary-card { min-height: 88px; padding: 12px; }
  .collector-strip { grid-template-columns: 1fr; gap: 8px; }
  .collector-strip > div:not(:last-child) { border-right: 0; padding-right: 0; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
  .freshness-banner { grid-template-columns: 30px minmax(0, 1fr); }
  .freshness-banner button { grid-column: 2; justify-self: start; }
  .automation-launcher { grid-template-columns: 1fr; padding: 14px; }
  .automation-readiness { grid-column: auto; }
  .section-heading { align-items: start; flex-direction: column; gap: 9px; }
  .section-heading p { text-align: left; }
  .map-heading-actions { width: 100%; align-items: flex-start; flex-direction: column; }
  .network-map { padding: 8px; }
  .ingress-grid, .relay-grid, .egress-grid { grid-template-columns: 1fr; }
  .details-grid { grid-template-columns: 1fr; }
  .inventory-tools { align-items: stretch; flex-direction: column; }
  .inventory-search { flex-basis: auto; max-width: none; }
  .filter-group { justify-content: flex-start; }
  .filter-chip, .compact-action, .inventory-action, .primary-action, .secondary-action { min-height: 44px; }
  .operation-row { grid-template-columns: 1fr auto; }
  .operation-progress { grid-column: 1 / -1; }
  .operation-detail-facts { grid-template-columns: 1fr 1fr; }
  .operation-detail-fact:last-child { grid-column: 1 / -1; }
  .operation-node-row { grid-template-columns: 28px minmax(0, 1fr) auto; }
  .operation-node-state { grid-column: 2 / -1; min-width: 0; text-align: left; }
  .operation-dialog-actions #operation-dialog-cancel,
  .operation-dialog-actions #operation-dialog-resolve { margin-right: 0; }
  .legend { display: none; }
  .event-row { grid-template-columns: 105px 72px minmax(0, 1fr); gap: 7px; }
  footer { width: calc(100% - 24px); }
}

@media (max-width: 420px) {
  .topbar-actions form { display: none; }
  .summary-grid { grid-template-columns: 1fr; }
  .route-editor-actions { align-items: stretch; flex-direction: column; }
  .route-editor-actions button { width: 100%; }
  .operation-row { grid-template-columns: 1fr; }
  .operation-time { grid-column: auto; }
  .operation-detail-facts { grid-template-columns: 1fr; }
  .operation-detail-fact:last-child { grid-column: auto; }
  .operation-detail-step { grid-template-columns: 25px minmax(0, 1fr); }
  .operation-detail-step-state { grid-column: 2; }
  .operation-detail-section-heading { align-items: flex-start; flex-direction: column; gap: 4px; }
  .operation-node-row { grid-template-columns: 26px minmax(0, 1fr); }
  .operation-node-counter, .operation-node-state { grid-column: 2; justify-self: start; text-align: left; }
  .operation-dialog-actions, .operation-cancel-confirm-actions { align-items: stretch; flex-direction: column; }
  .operation-dialog-actions button, .operation-cancel-confirm-actions button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* AURORA VISUAL SYSTEM ---------------------------------------------------- */
:root {
  --bg: #070a12;
  --surface: #0e1424;
  --surface-2: #131b2e;
  --surface-3: #19243b;
  --line: rgba(226, 232, 255, .09);
  --line-strong: rgba(226, 232, 255, .17);
  --text: #f4f7ff;
  --muted: #98a4bd;
  --green: #34d399;
  --cyan: #22d3ee;
  --violet: #8b7cff;
  --amber: #fbbf24;
  --red: #fb7185;
  --shadow: 0 24px 70px rgba(0, 0, 0, .28), 0 1px 0 rgba(255, 255, 255, .025) inset;
  --radius: 22px;
}

html {
  scroll-behavior: smooth;
  background: var(--bg);
}

body {
  position: relative;
  overflow-x: hidden;
  color: var(--text);
  background:
    radial-gradient(circle at 8% 0%, rgba(124, 92, 252, .14), transparent 32rem),
    radial-gradient(circle at 92% 4%, rgba(34, 211, 238, .09), transparent 34rem),
    linear-gradient(180deg, #080b14 0%, #070a12 58%, #090d18 100%);
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .16;
  background-image:
    linear-gradient(rgba(255, 255, 255, .018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .018) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(to bottom, black, transparent 78%);
}

::selection { color: #fff; background: rgba(124, 92, 252, .7); }

button, input, select { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 2px solid #75e8f8;
  outline-offset: 3px;
}

section[data-workspace-section][tabindex="-1"]:focus { outline: none; }

.skip-link {
  border-color: var(--cyan);
  color: #061018;
  background: var(--cyan);
}

.topbar {
  min-height: 78px;
  padding: 12px clamp(18px, 2.5vw, 40px);
  gap: 18px;
  flex-wrap: nowrap;
  border-color: rgba(255, 255, 255, .075);
  background: #080c16;
  box-shadow: 0 10px 38px rgba(0, 0, 0, .16);
  backdrop-filter: none;
}

.brand { min-width: max-content; gap: 13px; }

.brand-mark {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(139, 124, 255, .45);
  border-radius: 14px;
  color: #b9afff;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .18), transparent 42%),
    linear-gradient(145deg, rgba(124, 92, 252, .38), rgba(34, 211, 238, .08));
  box-shadow: 0 14px 34px rgba(89, 66, 205, .2), inset 0 0 26px rgba(139, 124, 255, .09);
}

.brand-mark svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.brand-copy { min-width: 0; }
.brand-kicker { display: block; margin-bottom: 1px; color: #7d8aa5; font-size: .64rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.brand h1 { font-size: 1.04rem; font-weight: 780; letter-spacing: -.025em; }
.brand p { color: #8490a8; font-size: .74rem; }

.workspace-nav {
  min-width: max-content;
  gap: 5px;
  padding: 5px;
  border-color: rgba(255, 255, 255, .08);
  border-radius: 14px;
  background: rgba(255, 255, 255, .025);
}

.workspace-nav a {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 13px;
  border-radius: 10px;
  color: #9aa7c0;
  font-size: .82rem;
  font-weight: 720;
  transition: color .18s ease, background .18s ease, transform .18s ease;
}

.nav-glyph {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  color: #8290aa;
  font-size: .96rem;
}

.workspace-nav a:hover,
.workspace-nav a:focus-visible { color: #fff; background: rgba(139, 124, 255, .1); }

.workspace-nav a.is-active,
.workspace-nav a[aria-current="page"] {
  color: #fff;
  background: linear-gradient(135deg, #725bfa, #8f78ff);
  box-shadow: 0 8px 22px rgba(104, 79, 230, .28), inset 0 1px rgba(255, 255, 255, .18);
}

.workspace-nav a.is-active .nav-glyph,
.workspace-nav a[aria-current="page"] .nav-glyph { color: #fff; }

.topbar-actions { min-width: max-content; gap: 8px; }
.global-state, .refresh-button { min-height: 40px; height: 40px; border-radius: 11px; }
.global-state { padding-inline: 12px; border-color: var(--line); background: rgba(255, 255, 255, .028); font-size: .78rem; }
.refresh-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding-inline: 13px; border-color: var(--line); background: rgba(255, 255, 255, .035); font-size: .78rem; font-weight: 720; }
.refresh-button:hover { border-color: rgba(139, 124, 255, .48); background: rgba(139, 124, 255, .1); }
.logout-button { color: #8f9bb3; background: transparent; }

main {
  width: min(1600px, calc(100% - 40px));
  padding: clamp(18px, 2.2vw, 34px) 0 52px;
}

.anchor-section { scroll-margin-top: 100px; }
.overview-workspace { min-width: 0; }

.overview-heading {
  min-height: 74px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 22px;
  padding: 2px 4px 14px;
}

.overview-heading h2 {
  margin-top: 5px;
  font-size: clamp(1.65rem, 2.4vw, 2.3rem);
  line-height: 1.08;
  letter-spacing: -.05em;
}

.overview-heading p { margin-top: 8px; color: #8f9bb2; font-size: .82rem; }

.overview-health {
  min-width: 230px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--amber);
  background: rgba(255, 255, 255, .025);
}

.overview-health > span:last-child,
.overview-health strong,
.overview-health small { min-width: 0; display: block; }
.overview-health strong { color: #eef3ff; font-size: .8rem; }
.overview-health small { margin-top: 2px; color: #8592aa; font-size: .68rem; }
.overview-health.is-healthy { color: var(--green); border-color: rgba(52, 211, 153, .2); background: rgba(52, 211, 153, .045); }
.overview-health.is-warning { color: var(--amber); border-color: rgba(251, 191, 36, .22); background: rgba(251, 191, 36, .045); }
.overview-health.is-critical { color: var(--red); border-color: rgba(251, 113, 133, .26); background: rgba(251, 113, 133, .05); }

.overview-data-grid {
  display: grid;
  grid-template-columns: minmax(560px, 1.25fr) minmax(390px, .75fr);
  gap: 14px;
}

.overview-data-grid .summary-grid {
  margin-top: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.overview-data-grid .summary-card { min-height: 168px; }

.overview-route-card {
  position: relative;
  min-width: 0;
  min-height: 348px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 24px;
  background: #080e1e;
  box-shadow: var(--shadow);
}

.overview-route-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 10, 21, .15), rgba(6, 10, 21, .74) 52%, rgba(6, 10, 21, .98));
}

.overview-route-card > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% center;
  filter: saturate(1.05) contrast(1.04);
}

.overview-route-content {
  position: relative;
  z-index: 1;
  min-height: 348px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
}

.overview-route-heading strong,
.overview-route-heading small { display: block; }
.overview-route-heading strong { margin-top: 6px; font-size: 1.18rem; letter-spacing: -.025em; }
.overview-route-heading small { margin-top: 4px; color: #8996af; font-size: .7rem; }

.overview-route-stats {
  margin-top: 20px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr) 22px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.overview-route-stats > span { min-width: 0; padding: 12px; border: 1px solid rgba(255, 255, 255, .11); border-radius: 13px; background: rgba(10, 17, 33, .68); backdrop-filter: blur(10px); }
.overview-route-stats b, .overview-route-stats small { display: block; }
.overview-route-stats b { color: #f4f7ff; font-size: 1.35rem; line-height: 1; }
.overview-route-stats small { margin-top: 5px; color: #92a0b8; font-size: .66rem; }
.overview-route-stats > i { height: 1px; background: linear-gradient(90deg, rgba(139, 124, 255, .35), var(--cyan)); }

.overview-route-transport { margin-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .1); }
.overview-route-transport span { color: #8390a8; font-size: .69rem; }
.overview-route-transport strong { min-width: 0; overflow: hidden; color: #c9d4e8; font-size: .71rem; text-align: right; text-overflow: ellipsis; white-space: nowrap; }

.overview-hero {
  position: relative;
  min-height: 350px;
  display: grid;
  grid-template-columns: minmax(360px, .85fr) minmax(460px, 1.15fr);
  align-items: stretch;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 30px;
  background:
    radial-gradient(circle at 18% 20%, rgba(124, 92, 252, .2), transparent 38%),
    linear-gradient(118deg, rgba(14, 20, 36, .99) 0%, rgba(9, 14, 28, .96) 47%, rgba(8, 13, 26, .74) 100%);
  box-shadow: 0 34px 90px rgba(0, 0, 0, .34), inset 0 1px rgba(255, 255, 255, .05);
}

.overview-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(8, 11, 20, .2), transparent 40%, rgba(8, 11, 20, .05));
  box-shadow: inset 0 -90px 100px rgba(6, 9, 17, .24);
}

.hero-copy {
  position: relative;
  z-index: 3;
  align-self: center;
  max-width: 660px;
  padding: clamp(34px, 5vw, 70px);
  padding-right: 20px;
}

.hero-copy .eyebrow { color: #9b8dff; }

.hero-copy h2 {
  margin-top: 13px;
  max-width: 620px;
  font-size: clamp(2.15rem, 4.1vw, 4rem);
  font-weight: 790;
  line-height: .98;
  letter-spacing: -.06em;
}

.hero-copy h2 span {
  color: transparent;
  background: linear-gradient(90deg, #d6d0ff 0%, #75e8f8 90%);
  background-clip: text;
  -webkit-background-clip: text;
}

.hero-copy > p {
  max-width: 570px;
  margin-top: 22px;
  color: #a6b1c8;
  font-size: clamp(.94rem, 1.2vw, 1.08rem);
  line-height: 1.65;
}

.hero-pills { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 9px; }
.hero-pills span { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 7px 11px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 999px; color: #c0c9db; background: rgba(255, 255, 255, .045); font-size: .73rem; font-weight: 680; backdrop-filter: blur(10px); }
.hero-pills i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(52, 211, 153, .1); }

.hero-art { position: relative; min-width: 0; overflow: hidden; }
.hero-art::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(90deg, #0b1020 0%, rgba(11, 16, 32, .52) 14%, transparent 50%), linear-gradient(0deg, rgba(7, 10, 18, .7), transparent 35%); }
.hero-art img { position: absolute; inset: -8% -4% -8% -10%; width: 118%; height: 116%; object-fit: cover; object-position: 60% center; filter: saturate(1.08) contrast(1.04); }

.hero-role {
  position: absolute;
  z-index: 4;
  min-width: 82px;
  padding: 8px 12px 8px 27px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  color: #eef3ff;
  background: rgba(11, 17, 33, .68);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .26);
  backdrop-filter: blur(12px);
  font-size: .7rem;
  font-weight: 760;
}

.hero-role::before { content: ""; position: absolute; left: 11px; top: 50%; width: 7px; height: 7px; border-radius: 50%; background: currentColor; transform: translateY(-50%); box-shadow: 0 0 12px currentColor; }
.hero-role-edge { left: 18%; top: 30%; color: #77e9fb; }
.hero-role-relay { left: 48%; top: 48%; color: #b8adff; }
.hero-role-exit { right: 9%; bottom: 22%; color: #61e6b3; }

.summary-grid { margin-top: 14px; gap: 12px; }

.summary-card,
.panel,
.network-map,
.collector-strip {
  border-color: var(--line);
  background: linear-gradient(145deg, rgba(18, 26, 45, .91), rgba(11, 17, 31, .94));
  box-shadow: var(--shadow);
}

.summary-card {
  min-height: 132px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px;
  border-radius: 20px;
}

.summary-card::after { width: 120px; height: 120px; right: -48px; top: -58px; opacity: .07; filter: blur(8px); }

.summary-icon {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
  border-radius: 15px;
  background: color-mix(in srgb, currentColor 10%, transparent);
  box-shadow: inset 0 1px rgba(255, 255, 255, .06);
}

.summary-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.summary-copy { min-width: 0; }
.summary-card .eyebrow { color: #8996af; font-size: .68rem; }
.summary-card strong { margin: 8px 0 5px; font-size: clamp(2rem, 2.5vw, 2.75rem); }
.summary-card small { color: #909db5; font-size: .78rem; }

.collector-strip {
  min-height: 64px;
  margin-top: 12px;
  padding: 11px 18px;
  border-radius: 16px;
  box-shadow: 0 16px 45px rgba(0, 0, 0, .14);
}

.collector-strip > div:not(:last-child) { padding-right: 18px; border-color: var(--line); }
.soft-label { color: #7f8ca6; font-size: .74rem; }
.collector-strip strong { font-size: .8rem; }

.freshness-banner {
  min-height: 66px;
  margin-top: 12px;
  padding: 11px 15px;
  border-radius: 16px;
  color: var(--cyan);
  background: rgba(34, 211, 238, .055);
}

.freshness-icon { width: 36px; height: 36px; border-radius: 11px; }
.freshness-banner > div { min-width: 0; }
.freshness-banner strong { font-size: .84rem; }
.freshness-banner div span { overflow-wrap: anywhere; font-size: .77rem; }

.eyebrow { color: #8491aa; font-size: .68rem; letter-spacing: .15em; }
.section-heading { margin: 30px 4px 14px; }
.section-heading h2, .panel h2 { margin-top: 5px; font-size: clamp(1.4rem, 2vw, 1.8rem); letter-spacing: -.045em; }
.section-heading p { color: #909db5; font-size: .82rem; }

.primary-action,
.secondary-action,
.compact-action,
.inventory-action,
.filter-chip,
.dialog-close {
  transition: transform .16s ease, border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease;
}

.primary-action {
  border-color: transparent;
  color: #fff;
  background: linear-gradient(135deg, #725bfa, #8f78ff);
  box-shadow: 0 10px 28px rgba(103, 78, 226, .24), inset 0 1px rgba(255, 255, 255, .16);
}

.primary-action:hover { filter: none; transform: translateY(-1px); box-shadow: 0 14px 34px rgba(103, 78, 226, .32); }
.secondary-action { border-color: var(--line-strong); color: #dce3f2; background: rgba(255, 255, 255, .045); }
.secondary-action:hover { border-color: rgba(139, 124, 255, .5); background: rgba(139, 124, 255, .1); }

.automation-launcher {
  position: relative;
  scroll-margin-top: 100px;
  min-height: 270px;
  margin-top: 0;
  grid-template-columns: minmax(310px, .95fr) minmax(470px, 1.5fr) minmax(210px, .62fr);
  gap: 22px;
  overflow: hidden;
  padding: 30px;
  border-color: var(--line);
  border-radius: 26px;
  background:
    linear-gradient(90deg, rgba(11, 17, 31, .98) 0%, rgba(11, 17, 31, .94) 60%, rgba(11, 17, 31, .72) 100%),
    #0d1425;
  box-shadow: var(--shadow);
}

.automation-launcher::after { content: ""; position: absolute; right: -70px; bottom: -95px; width: 310px; height: 310px; border-radius: 50%; background: rgba(34, 211, 238, .08); filter: blur(12px); pointer-events: none; }
.automation-launcher > :not(.sr-only) { position: relative; z-index: 1; }
.automation-intro h2 { margin-top: 7px; font-size: clamp(1.5rem, 2.2vw, 2.05rem); letter-spacing: -.045em; }
.automation-intro p { margin-top: 12px; color: #a0acc2; font-size: .85rem; line-height: 1.65; }
.automation-intro .primary-action { min-height: 46px; margin-top: 18px; padding-inline: 18px; border-radius: 12px; }
.automation-readiness { padding: 18px; border: 1px solid rgba(255, 255, 255, .09); border-radius: 16px; background: rgba(7, 12, 24, .66); backdrop-filter: blur(10px); }
.automation-readiness strong { margin-top: 8px; font-size: .92rem; }
.automation-readiness #automation-copy { color: #96a2b9; font-size: .78rem; }

.topology-flow {
  position: relative;
  z-index: 3;
  grid-column: 1 / -1;
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(24px, 1fr) auto minmax(24px, 1fr) auto minmax(24px, 1fr) auto minmax(24px, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding: 15px 18px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 18px;
  background: rgba(7, 12, 24, .74);
  box-shadow: inset 0 1px rgba(255, 255, 255, .025);
}

.flow-endpoint,
.flow-stage { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 8px; }
.flow-stage small { grid-column: 2; color: #77849e; font-size: .64rem; white-space: nowrap; }
.flow-endpoint i,
.flow-stage i { grid-row: 1 / 3; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; color: #c2b9ff; background: rgba(139, 124, 255, .12); font-style: normal; }
.flow-endpoint b,
.flow-stage b { overflow: hidden; color: #dce4f5; font-size: .73rem; text-overflow: ellipsis; white-space: nowrap; }
.flow-stage-edge i { color: #64e2f5; background: rgba(34, 211, 238, .11); }
.flow-stage-relay i { color: #b7adff; }
.flow-stage-exit i { color: #58dfa9; background: rgba(52, 211, 153, .11); }
.flow-connector { position: relative; height: 1px; background: linear-gradient(90deg, rgba(139, 124, 255, .3), rgba(34, 211, 238, .65)); }
.flow-connector::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid #69deed; border-right: 1px solid #69deed; transform: rotate(45deg); }

.network-map {
  padding: 14px;
  border-radius: 24px;
  grid-template-columns: minmax(350px, 1.35fr) 44px minmax(220px, .78fr) 44px minmax(250px, .9fr);
  gap: 10px;
  background: linear-gradient(145deg, rgba(15, 22, 39, .96), rgba(9, 15, 28, .98));
}

.topology-link { opacity: .24; stroke: rgba(34, 211, 238, .58); stroke-width: 1.35; filter: drop-shadow(0 0 5px rgba(34, 211, 238, .12)); }
.topology-link.is-primary { opacity: .42; stroke: var(--cyan); }
.topology-link.is-backup { opacity: .35; stroke: var(--violet); }
.topology-link.is-focused { opacity: 1; stroke-width: 3; }

.map-column { padding: 10px; border: 1px solid rgba(255, 255, 255, .055); border-radius: 18px; background: rgba(5, 10, 21, .38); }
.column-title { min-height: 34px; margin: 0 2px 10px; }
.column-title span { font-size: .79rem; }
.column-title b { color: #7f8ca4; font-size: .66rem; }
.ingress-grid, .relay-grid, .egress-grid { gap: 9px; }

.node-card {
  padding: 13px;
  border-color: rgba(255, 255, 255, .075);
  border-radius: 15px;
  background: linear-gradient(145deg, rgba(18, 27, 47, .92), rgba(11, 18, 32, .96));
  box-shadow: 0 10px 26px rgba(0, 0, 0, .14), inset 0 1px rgba(255, 255, 255, .025);
}

.node-card:hover { border-color: rgba(139, 124, 255, .32); }
.node-card.state-up { border-color: rgba(52, 211, 153, .17); }
.node-card.state-degraded { border-color: rgba(251, 191, 36, .28); }
.node-card.state-down { border-color: rgba(251, 113, 133, .35); background: linear-gradient(145deg, rgba(49, 22, 36, .8), rgba(15, 18, 33, .95)); }
.node-card.is-draft { border-color: rgba(251, 191, 36, .34); background: linear-gradient(145deg, rgba(51, 40, 21, .55), rgba(13, 18, 32, .95)); }
.node-card.is-lifecycle-inactive { border-color: rgba(139, 124, 255, .32); background: linear-gradient(145deg, rgba(35, 28, 68, .45), rgba(12, 18, 32, .96)); }
.node-title strong { font-size: .83rem; }
.node-title code { color: #8290a9; font-size: .68rem; }
.node-role, .node-reason { font-size: .72rem; }
.node-warning { font-size: .7rem; }
.metric-row { margin-top: 9px; padding-top: 9px; border-color: var(--line); }
.metric span { color: #7f8ca4; font-size: .63rem; }
.metric strong { font-size: .73rem; }
.backend-chip { padding: 5px 7px; border: 1px solid rgba(255, 255, 255, .04); border-radius: 8px; background: rgba(255, 255, 255, .035); font-size: .65rem; }
.backend-chip-more { color: #b8adff; border-color: rgba(139, 124, 255, .2); background: rgba(139, 124, 255, .08); }
.network-map .metric-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; }
.egress-card { min-height: 162px; }
.relay-card { min-height: 122px; }

.route-lanes { gap: 38px; }
.route-line { background: linear-gradient(90deg, rgba(139, 124, 255, .16), rgba(34, 211, 238, .68)); }
.route-label { color: #77849c; font-size: .6rem; }

.map-card-actions {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  gap: 6px;
  overflow-x: auto;
  padding-top: 10px;
  scrollbar-width: thin;
}

.map-card-actions .lifecycle-action {
  flex: 0 0 38px;
  width: 38px;
  min-width: 38px;
  min-height: 38px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 10px;
  font-size: 0;
}

.map-card-actions .lifecycle-action::before { font-size: .94rem; line-height: 1; }
.map-card-actions [data-node-action="edit"]::before { content: "✦"; }
.map-card-actions [data-node-action="wizard"]::before { content: "➜"; }
.map-card-actions [data-node-action="connections"]::before { content: "⌁"; }
.map-card-actions [data-node-action="delete"]::before { content: "×"; }

.route-editor-panel {
  margin-top: 12px;
  padding: 18px;
  border-color: rgba(34, 211, 238, .28);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(12, 30, 43, .96), rgba(12, 18, 34, .98));
  box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
}

.panel { padding: 22px; border-radius: 24px; }
.inventory-panel { margin-top: 0; padding: 24px; }
.inventory-access-note, .operations-copy, .form-hint { color: #8e9bb3; font-size: .78rem; }
.inventory-heading-actions { flex-wrap: wrap; }
.inventory-tools { margin-top: 18px; gap: 12px; }
.inventory-search input { min-height: 46px; padding: 10px 14px 10px 42px; border-color: var(--line); border-radius: 13px; color: var(--text); background: rgba(6, 11, 22, .68); font-size: .83rem; }
.inventory-search { position: relative; }
.inventory-search::before { content: "⌕"; position: absolute; z-index: 1; left: 15px; top: 50%; color: #78859e; font-size: 1.1rem; transform: translateY(-50%); }
.inventory-search input:focus { border-color: rgba(139, 124, 255, .58); box-shadow: 0 0 0 4px rgba(139, 124, 255, .09); }
.filter-group { padding: 4px; border: 1px solid var(--line); border-radius: 13px; background: rgba(6, 11, 22, .45); }
.filter-chip { min-height: 38px; border: 0; border-radius: 9px; color: #8e9bb3; background: transparent; font-size: .75rem; }
.filter-chip.is-active { color: #fff; background: rgba(139, 124, 255, .18); box-shadow: inset 0 0 0 1px rgba(139, 124, 255, .22); }

.inventory-list {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  border-top: 0;
}

.inventory-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "identity state"
    "route route"
    "actions actions";
  align-content: start;
  gap: 13px 12px;
  min-height: 218px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(18, 27, 47, .88), rgba(10, 16, 29, .96));
  box-shadow: 0 14px 34px rgba(0, 0, 0, .14), inset 0 1px rgba(255, 255, 255, .025);
}

.inventory-row.is-disabled { opacity: .74; }
.inventory-row.is-lifecycle-guarded { margin-inline: 0; padding-inline: 18px; border-left: 3px solid rgba(139, 124, 255, .55); background: linear-gradient(145deg, rgba(33, 27, 61, .55), rgba(10, 16, 29, .96)); }
.inventory-identity { grid-area: identity; position: relative; min-width: 0; min-height: 58px; padding-left: 58px; display: flex; flex-direction: column; justify-content: center; }
.inventory-identity::before { content: "◇"; position: absolute; left: 0; top: 0; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(139, 124, 255, .24); border-radius: 13px; color: #aa9eff; background: rgba(139, 124, 255, .1); font-size: 1rem; }
.inventory-row[data-node-role="edge"] .inventory-identity::before { content: "↘"; color: #63e3f6; border-color: rgba(34, 211, 238, .24); background: rgba(34, 211, 238, .08); }
.inventory-row[data-node-role="exit"] .inventory-identity::before { content: "↗"; color: #57dda7; border-color: rgba(52, 211, 153, .23); background: rgba(52, 211, 153, .08); }
.inventory-identity strong { font-size: .94rem; letter-spacing: -.015em; }
.inventory-identity span { margin-top: 3px; color: #7f8ca5; font-size: .72rem; }
.inventory-identity .inventory-description { max-width: 100%; overflow: hidden; color: #b0bad0; font-size: .74rem; text-overflow: ellipsis; white-space: nowrap; }
.inventory-state { grid-area: state; align-self: start; }
.inventory-route-copy { grid-area: route; min-height: 49px; padding: 11px 12px; border: 1px solid rgba(255, 255, 255, .055); border-radius: 12px; background: rgba(5, 10, 21, .42); }
.inventory-route-copy strong { color: #74819a; font-size: .65rem; letter-spacing: .07em; text-transform: uppercase; }
.inventory-route-copy span { display: -webkit-box; margin-top: 5px; overflow: hidden; color: #a3aec2; font-size: .75rem; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.inventory-actions { grid-area: actions; max-width: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.inventory-action { min-height: 42px; padding: 8px 10px; border-color: var(--line); border-radius: 11px; color: #cbd3e2; background: rgba(255, 255, 255, .035); font-size: .7rem; font-weight: 720; }
.inventory-action:hover { border-color: rgba(139, 124, 255, .42); background: rgba(139, 124, 255, .09); }
.inventory-action[data-node-action="edit"], .inventory-action[data-node-action="wizard"] { grid-column: span 2; color: #fff; border-color: rgba(139, 124, 255, .38); background: rgba(139, 124, 255, .16); }
.inventory-action.is-danger { color: #ff9aac; border-color: rgba(251, 113, 133, .25); background: rgba(251, 113, 133, .045); }

.operations-panel { margin-top: 0; }
.operations-list { position: relative; margin-top: 18px; gap: 10px; }
.operations-list::before { content: ""; position: absolute; left: 18px; top: 12px; bottom: 12px; width: 1px; background: linear-gradient(var(--violet), rgba(139, 124, 255, .05)); }
.operation-row { position: relative; grid-template-columns: minmax(210px, 1.15fr) auto minmax(220px, 1fr) auto; min-height: 78px; gap: 14px; padding: 13px 15px 13px 42px; border-color: var(--line); border-radius: 15px; background: rgba(8, 14, 27, .7); }
.operation-row::before { content: ""; position: absolute; z-index: 1; left: 13px; top: 50%; width: 11px; height: 11px; border: 3px solid #111a2d; border-radius: 50%; background: #7e8aa2; transform: translateY(-50%); box-shadow: 0 0 0 1px rgba(255, 255, 255, .12); }
.operation-row.is-active { border-color: rgba(34, 211, 238, .24); background: rgba(34, 211, 238, .045); }
.operation-row.is-active::before { background: var(--cyan); box-shadow: 0 0 16px rgba(34, 211, 238, .65); }
.operation-row.is-failed { border-color: rgba(251, 113, 133, .28); background: rgba(251, 113, 133, .04); }
.operation-row.is-failed::before { background: var(--red); box-shadow: 0 0 14px rgba(251, 113, 133, .48); }
.operation-row:hover { border-color: rgba(139, 124, 255, .38); background: rgba(139, 124, 255, .055); }
.operation-main strong { font-size: .84rem; }
.operation-main, .operation-progress { min-width: 0; }
.operation-main span, .operation-progress small { color: #8592aa; font-size: .72rem; }
.operation-progress small { overflow-wrap: anywhere; }
.operation-progress > span { font-size: .76rem; }
.operation-time { color: #7b88a1; font-size: .7rem; }

/* Суммарная скорость роли рядом с её названием: вопрос «сколько сейчас тянут
   все входы» решался сложением полутора десятков карточек глазами. */
.inventory-role-traffic { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 5px; }
.inventory-role-traffic-item { display: inline-flex; align-items: baseline; gap: 5px; color: #9aa6bd; font-size: .64rem; }
.inventory-role-traffic-item i { font-style: normal; letter-spacing: .08em; }
.inventory-role-traffic-item b { color: #dce5ee; font-size: .72rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* --- Плотность: те же данные на меньшей высоте --------------------------
   Панель на 22px отступов и поля в 44px давали экран, по которому надо
   прокручивать, чтобы увидеть четыре блока.  Ниже — компактный ритм, тот же
   для «Изменений» и «Настроек». */
#settings, #certificates, #telegram, #fleet-maintenance, #changes { padding: 16px; border-radius: 18px; }
#settings .panel-heading, #certificates .panel-heading, #telegram .panel-heading,
#fleet-maintenance .panel-heading, #changes .panel-heading { gap: 10px; }
#settings h2, #certificates h2, #telegram h2, #fleet-maintenance h2, #changes h2 { font-size: 1.12rem; }
#settings .operations-copy, #certificates .operations-copy, #telegram .operations-copy,
#fleet-maintenance .operations-copy, #changes .operations-copy { margin-top: 4px; font-size: .72rem; line-height: 1.45; }
.settings-grid, .settings-column { gap: 10px; }

/* Список операций: 78px на строку — это полторы строки воздуха вокруг двух
   строк текста. */
.operations-list { margin-top: 10px; gap: 6px; }
.operation-row { min-height: 58px; padding: 9px 13px 9px 38px; gap: 12px; border-radius: 12px; }
.operation-row::before { left: 11px; width: 9px; height: 9px; }
.operations-list::before { left: 15px; }
.operation-main strong { font-size: .8rem; }
.operation-main span, .operation-progress small { font-size: .7rem; }
.operation-progress > span { font-size: .73rem; }
.operation-meter { height: 3px; margin-top: 5px; }
.operations-tallies { margin-top: 10px; gap: 6px; }
.operations-tally { padding: 5px 11px 5px 9px; font-size: .7rem; }
.operations-tally-count { font-size: .8rem; }

/* --- Изменения и Настройки: правки этой волны -----------------------------
   Слой выше («DENSE CONTROL ROOM») перебивает базовые правила, поэтому всё
   новое живёт здесь, после него: иначе правило выглядит применённым, а на
   экране его нет. */

/* Счётчики над списком — они же фильтр: цифра отвечает на вопрос «есть ли
   что-то срочное», не заставляя прочитать дюжину строк. */
.operations-tallies { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.operations-tally { display: inline-flex; align-items: baseline; gap: 7px; padding: 7px 13px 7px 11px; border: 1px solid var(--line); border-radius: 999px; color: #8592aa; background: rgba(8, 14, 27, .7); font: inherit; font-size: .72rem; cursor: pointer; }
.operations-tally:hover { border-color: rgba(139, 124, 255, .38); color: var(--text); }
.operations-tally:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.operations-tally-count { font-size: .88rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.operations-tally.is-attention { border-color: rgba(251, 113, 133, .3); }
.operations-tally.is-attention .operations-tally-count { color: var(--red); }
.operations-tally.is-active { border-color: rgba(34, 211, 238, .24); }
.operations-tally.is-active .operations-tally-count { color: var(--cyan); }
.operations-tally.is-done .operations-tally-count { color: var(--green); }
.operations-tally[aria-pressed="true"] { color: var(--text); border-color: rgba(139, 124, 255, .5); background: rgba(139, 124, 255, .12); }

/* Завершённую операцию видно по точке: серая осталась бы неотличимой от
   «состояние неизвестно», а это разные новости. */
.operation-row.is-done::before { background: rgba(89, 224, 173, .8); }

/* «Сколько осталось» — это про длину, а не про чтение цифр. */
.operation-meter { display: block; height: 4px; margin-top: 6px; border-radius: 999px; background: rgba(226, 232, 255, .1); overflow: hidden; }
.operation-meter i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cyan), var(--violet)); }
.operation-row.is-done .operation-meter i { background: linear-gradient(90deg, var(--green), rgba(89, 224, 173, .45)); }

/* Код отказа набран моноширинным: его переписывают в поиск и в переписку.  До
   этого он лежал в сером `small` под словом «Не удалось», которое и так стоит
   в pill рядом — то есть самое нужное было набрано самым мелким. */
.operation-progress > .operation-code { color: #ff9aac; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .74rem; overflow-wrap: anywhere; }

/* Поля «Настроек» не имели НИКАКОГО стиля: браузер рисовал их серыми
   прямоугольниками с рамкой 2px и нулевым радиусом — рядом с остальной
   панелью это выглядело как чужая страница.  Здесь они получают тот же вид,
   что поиск по нодам и формы редактора.  Флажки не трогаем: у них свои
   правила и свой размер. */
.dns-settings-form input:not([type="checkbox"]):not([type="radio"]),
.dns-settings-form select,
.dns-settings-form textarea {
  width: 100%;
  min-height: 38px;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  background: rgba(6, 11, 22, .68);
  font: inherit;
  font-size: .8rem;
}
.dns-settings-form textarea { min-height: 78px; padding: 9px 11px; line-height: 1.45; resize: vertical; }
.dns-settings-form select { padding-right: 34px; appearance: none; background-image: linear-gradient(45deg, transparent 50%, #8592aa 50%), linear-gradient(135deg, #8592aa 50%, transparent 50%); background-position: calc(100% - 19px) 50%, calc(100% - 13px) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
.dns-settings-form select option { background: #11182a; }
.dns-settings-form input::placeholder, .dns-settings-form textarea::placeholder { color: #66718c; }
.dns-settings-form input:hover:not(:disabled),
.dns-settings-form select:hover:not(:disabled) { border-color: var(--line-strong); }
.dns-settings-form input:focus,
.dns-settings-form select:focus,
.dns-settings-form textarea:focus {
  border-color: rgba(139, 124, 255, .58);
  outline: none;
  box-shadow: 0 0 0 4px rgba(139, 124, 255, .09);
}
.dns-settings-form input:disabled,
.dns-settings-form select:disabled { color: #7c869c; background: rgba(6, 11, 22, .4); cursor: not-allowed; }
/* Подпись над полем и подсказка под ним — один ритм на все три формы. */
.dns-settings-form label { display: block; margin-bottom: 5px; color: #b9c2d6; font-size: .75rem; }
.dns-settings-form .field-help { display: block; margin-top: 5px; color: #8592aa; font-size: .7rem; line-height: 1.4; }

/* Сохранённый секрет: пустое поле ввода не отличается от «токена нет», а это
   разные вещи, и вторая означает, что половина панели не работает. */
.secret-stored { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 10px; background: rgba(8, 14, 27, .7); }
/* Авторский display перебивает браузерное правило для [hidden]; без этой
   строки плашка и поле ввода видны одновременно. */
.secret-stored[hidden], input[hidden] { display: none; }
.secret-mask { flex: 0 1 auto; min-width: 0; color: #8592aa; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .8rem; letter-spacing: .06em; white-space: nowrap; overflow: hidden; }
.secret-replace { flex: 0 0 auto; margin-left: auto; }
.secret-known { flex: 1 0 100%; min-width: 0; color: var(--text); font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.secret-known:empty { display: none; }
.details-grid { margin-top: 14px; gap: 14px; }
.event-row { min-height: 45px; border-color: var(--line); }

.node-dialog {
  width: min(1120px, calc(100vw - 32px));
  border-color: rgba(139, 124, 255, .25);
  border-radius: 24px;
  background: rgba(12, 18, 33, .98);
  box-shadow: 0 34px 110px rgba(0, 0, 0, .64), inset 0 1px rgba(255, 255, 255, .05);
}

.node-dialog::backdrop { background: rgba(3, 6, 13, .78); backdrop-filter: blur(12px); }
.dialog-shell { max-height: calc(100dvh - 30px); padding: 24px; }
.dialog-heading { padding-bottom: 17px; border-color: var(--line); }
.dialog-heading h2 { font-size: clamp(1.28rem, 2vw, 1.65rem); }
.dialog-close { width: 40px; height: 40px; border-color: var(--line); border-radius: 12px; background: rgba(255, 255, 255, .04); }
.dialog-close:hover { border-color: rgba(139, 124, 255, .48); background: rgba(139, 124, 255, .11); }
.dialog-overview { margin: 18px 0; }
.dialog-overview p { font-size: .84rem; }
.signals-grid { gap: 10px; }
.signal-item { min-height: 68px; padding: 12px; border-color: var(--line); border-radius: 13px; background: rgba(255, 255, 255, .025); }
.signal-item strong { font-size: .74rem; }
.signal-item span { font-size: .72rem; }
.detail-facts { gap: 10px; margin-top: 13px; }
.detail-facts .metric { padding: 12px; border-color: var(--line); border-radius: 13px; }
.history-chart { padding: 13px; border-color: var(--line); border-radius: 14px; background: rgba(6, 11, 22, .56); }
.inventory-edit-form label, .route-editor legend { color: #95a1b7; font-size: .74rem; }
.inventory-edit-form input:not([type="checkbox"]):not([type="radio"]), .inventory-edit-form select { min-height: 44px; padding: 10px 12px; border-color: var(--line); border-radius: 11px; background: rgba(6, 11, 22, .72); font-size: .82rem; }
.inventory-edit-form input:focus, .inventory-edit-form select:focus { border-color: rgba(139, 124, 255, .6); box-shadow: 0 0 0 4px rgba(139, 124, 255, .09); }
.inventory-edit-form select option { background: #11182a; }
.check-field, .haproxy-settings, .route-editor { border-color: var(--line); background: rgba(6, 11, 22, .46); }
.operation-detail-step, .delete-operation-step { border-color: var(--line); background: rgba(6, 11, 22, .48); }

footer { width: min(1600px, calc(100% - 40px)); padding-block: 20px 34px; border-color: var(--line); color: #748099; font-size: .7rem; }

/* The public sign-in stays intentionally neutral and does not disclose the console. */
.login-page {
  min-height: 100dvh;
  padding: 24px;
  background:
    radial-gradient(circle at 15% 10%, rgba(177, 119, 101, .18), transparent 28rem),
    radial-gradient(circle at 88% 86%, rgba(101, 88, 137, .2), transparent 30rem),
    #0d0d11;
}

.login-page::before { left: -120px; top: -170px; width: 520px; height: 520px; background: #b97968; opacity: .13; }
.login-page::after { right: -130px; bottom: -180px; width: 520px; height: 520px; background: #7663a7; opacity: .14; }
.login-shell { width: min(1080px, calc(100vw - 48px)); min-height: min(680px, calc(100dvh - 48px)); display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 430px); margin: auto; padding: 0; overflow: hidden; border: 1px solid rgba(255, 255, 255, .1); border-radius: 30px; background: #121218; box-shadow: 0 42px 120px rgba(0, 0, 0, .48); }
.login-showcase { position: relative; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; padding: clamp(34px, 5vw, 66px); background: radial-gradient(circle at 74% 42%, rgba(202, 153, 133, .22), transparent 18rem), linear-gradient(145deg, #18171e, #111117); }
.login-showcase::before { content: ""; position: absolute; inset: 12% -18% -22% 18%; border: 1px solid rgba(225, 188, 170, .18); border-radius: 50%; transform: rotate(-17deg); box-shadow: 0 0 0 42px rgba(255, 255, 255, .012), 0 0 0 90px rgba(255, 255, 255, .008); }
.login-showcase-mark { position: relative; z-index: 2; width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid rgba(235, 199, 183, .3); border-radius: 50%; color: #e9c4b3; font-family: Georgia, serif; font-size: .88rem; letter-spacing: .13em; }
.login-showcase-copy { position: relative; z-index: 2; max-width: 520px; }
.login-showcase-copy > span { color: #b98976; font-size: .68rem; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; }
.login-showcase-copy strong { display: block; margin-top: 14px; color: #f4eee9; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.15rem, 4.4vw, 4.1rem); font-weight: 400; line-height: 1.03; letter-spacing: -.045em; }
.login-showcase-copy p { max-width: 430px; margin-top: 20px; color: #a9a1a1; font-size: .9rem; line-height: 1.7; }
.login-orbits { position: absolute; inset: 0; pointer-events: none; }
.login-orbits i { position: absolute; display: block; border: 1px solid rgba(231, 195, 179, .19); border-radius: 50%; }
.login-orbits i:nth-child(1) { width: 280px; height: 280px; right: -40px; top: 95px; }
.login-orbits i:nth-child(2) { width: 15px; height: 15px; right: 92px; top: 120px; border: 0; background: #d7a18b; box-shadow: 0 0 30px rgba(215, 161, 139, .46); }
.login-orbits i:nth-child(3) { width: 9px; height: 9px; right: 12px; top: 280px; border: 0; background: #8f7bab; }
.login-card { align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding: clamp(34px, 4.5vw, 58px); border: 0; border-left: 1px solid rgba(255, 255, 255, .08); border-radius: 0; background: linear-gradient(155deg, rgba(26, 25, 32, .99), rgba(16, 16, 22, .99)); box-shadow: none; }
.login-brand { margin-bottom: 52px; color: #e5dcd7; font-size: .78rem; letter-spacing: .02em; }
.login-brand .brand-mark { width: 38px; height: 38px; border-color: rgba(220, 177, 158, .28); border-radius: 50%; color: #e0ac95; background: rgba(190, 132, 107, .09); box-shadow: none; font-family: Georgia, serif; }
.login-card .eyebrow { color: #b88b78; }
.login-card h1 { margin-top: 10px; color: #f3eeeb; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.05rem, 4vw, 3rem); font-weight: 400; letter-spacing: -.045em; }
.login-copy { max-width: 320px; margin-top: 13px; color: #938d90; font-size: .82rem; line-height: 1.65; }
.login-error { border-color: rgba(251, 113, 133, .3); color: #ffabb9; background: rgba(251, 113, 133, .07); font-size: .76rem; }
.login-form { margin-top: 30px; gap: 10px; }
.login-form label { margin-top: 8px; color: #aaa2a4; font-size: .72rem; }
.login-form input { height: 50px; padding-inline: 15px; border-color: rgba(255, 255, 255, .1); border-radius: 12px; color: #f5eff0; background: rgba(7, 7, 11, .48); font-size: .86rem; }
.login-form input:focus { border-color: rgba(216, 164, 142, .58); box-shadow: 0 0 0 4px rgba(216, 164, 142, .08); }
.login-form button { height: 52px; display: flex; align-items: center; justify-content: space-between; padding-inline: 18px; border-radius: 12px; color: #211713; background: linear-gradient(135deg, #e7baa6, #c99179); box-shadow: 0 16px 35px rgba(191, 126, 99, .18); font-size: .82rem; }
.login-foot { margin-top: 30px; border-color: rgba(255, 255, 255, .075); color: #837d80; font-size: .68rem; }
.login-foot .pulse { color: #b9917f; }

@media (min-width: 1480px) {
  .topbar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 264px;
    height: 100dvh;
    min-height: 640px;
    padding: 26px 18px 22px;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    border-right: 1px solid rgba(255, 255, 255, .075);
    border-bottom: 0;
    background: #080c16;
  }
  .topbar .brand { width: 100%; min-width: 0; align-items: flex-start; }
  .topbar .brand-mark { flex: 0 0 44px; }
  .brand-copy { min-width: 0; flex: 1 1 auto; padding-top: 2px; }
  .brand p { width: 100%; max-width: 100%; display: -webkit-box; overflow: hidden; line-height: 1.45; text-overflow: ellipsis; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .workspace-nav { width: 100%; margin-top: 32px; padding: 6px; flex-direction: column; align-items: stretch; }
  .workspace-nav a { justify-content: flex-start; min-height: 46px; padding-inline: 12px; }
  .nav-glyph { margin-right: 2px; }
  .topbar-actions { width: 100%; margin-top: auto; display: grid; grid-template-columns: 1fr auto; gap: 8px; }
  .topbar-actions #dashboard-role, .topbar-actions .global-state { grid-column: 1 / -1; justify-content: flex-start; }
  .topbar-actions .global-state { min-width: 0; }
  .topbar-actions form { width: 100%; }
  .topbar-actions form .logout-button { width: 100%; }
  main { width: min(1580px, calc(100% - 310px)); margin-right: 24px; margin-left: 286px; padding-top: 24px; }
  footer { width: min(1580px, calc(100% - 310px)); margin-right: 24px; margin-left: 286px; }
  .anchor-section { scroll-margin-top: 26px; }
  #nodes { scroll-margin-top: 26px; }
  .network-map { grid-template-columns: minmax(330px, 1.32fr) 40px minmax(205px, .78fr) 40px minmax(235px, .9fr); }
}

@media (min-width: 981px) and (max-width: 1320px) {
  .topbar { flex-wrap: nowrap; }
  #dashboard-role { display: none; }
  .workspace-nav { order: initial; width: auto; }
  .network-map { grid-template-columns: minmax(320px, 1.28fr) 34px minmax(195px, .78fr) 34px minmax(225px, .9fr); }
  .topology-links { display: block; }
  .route-lanes { min-height: 100%; flex-direction: column; gap: 38px; }
  .route-label { top: calc(50% - 64px); }
  .route-label.bottom { top: auto; bottom: calc(50% - 66px); }
  .relay-grid, .egress-grid { grid-template-columns: 1fr; }
  .automation-launcher { grid-template-columns: minmax(280px, .9fr) minmax(440px, 1.35fr); }
  .automation-readiness { grid-column: 1 / -1; padding: 14px 16px; border: 1px solid var(--line); }
  .flow-stage small { display: none; }
}

@media (max-width: 1180px) {
  .brand p { display: none; }
  .topbar { padding-inline: 18px; }
  .workspace-nav a { padding-inline: 10px; }
  .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .overview-data-grid { grid-template-columns: 1fr; }
  .overview-data-grid .summary-card { min-height: 138px; }
  .overview-route-card, .overview-route-content { min-height: 310px; }
  .inventory-list { grid-template-columns: 1fr; }
}

@media (max-width: 1020px) {
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .login-page { padding-bottom: 24px; }
  .topbar { min-height: 70px; padding-block: 10px; background: #070a12; backdrop-filter: none; }
  .brand-kicker { display: none; }
  .workspace-nav {
    position: fixed;
    z-index: 40;
    left: 12px;
    right: 12px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    width: auto;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    order: initial;
    padding: 6px;
    border-color: rgba(255, 255, 255, .11);
    border-radius: 18px;
    background: rgba(12, 17, 31, .92);
    box-shadow: 0 20px 55px rgba(0, 0, 0, .48);
    backdrop-filter: blur(22px) saturate(140%);
  }
  .workspace-nav a { min-width: 0; min-height: 48px; justify-content: center; padding: 7px 8px; }
  .workspace-nav a span:last-child { font-size: .7rem; }
  #dashboard-role { display: none; }
  .topbar-actions { margin-left: auto; }
  .overview-hero { min-height: 330px; grid-template-columns: minmax(330px, .9fr) minmax(300px, 1.1fr); }
  .hero-copy { padding: 38px; padding-right: 12px; }
  .hero-copy h2 { font-size: clamp(2.2rem, 6vw, 3.3rem); }
  .hero-role { display: none; }
  .topology-flow { overflow-x: auto; grid-template-columns: repeat(9, max-content); }
}

@media (max-width: 980px) {
  .network-map { grid-template-columns: 1fr; }
  .topology-links { display: none; }
  .route-lanes { display: none; }
  .topology-flow { grid-column: 1; margin-bottom: 2px; }
  .automation-launcher { grid-template-columns: 1fr; }
  .automation-readiness { grid-column: auto; border: 1px solid var(--line); }
  .login-shell { grid-template-columns: minmax(0, .9fr) minmax(350px, 410px); }
  .login-showcase { padding: 42px; }
  .signals-grid, .detail-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  body { font-size: 14px; }
  .topbar { position: sticky; top: 0; align-items: center; padding: 9px 12px; }
  .brand { flex: 0 1 auto; min-width: 0; }
  .brand-mark { width: 40px; height: 40px; }
  .brand h1 { font-size: .9rem; }
  .global-state { max-width: 150px; padding-inline: 9px; font-size: .69rem; }
  #refresh { min-width: 42px; padding: 0; font-size: 0; }
  #refresh::before { content: none; }
  #refresh > span:first-child { font-size: 1rem; }
  .logout-button { width: 42px; min-width: 42px; padding: 0; font-size: 0; }
  .logout-button::before { content: "⇥"; font-size: 1rem; }
  .topbar-actions form { display: block; }
  main { width: min(100% - 20px, 1600px); padding-top: 12px; }
  .overview-heading { min-height: 0; align-items: flex-start; flex-direction: column; padding: 4px 2px 12px; }
  .overview-heading h2 { font-size: 1.7rem; }
  .overview-health { width: 100%; min-width: 0; }
  .overview-data-grid { gap: 10px; }
  .overview-data-grid .summary-card { min-height: 120px; }
  .overview-route-card, .overview-route-content { min-height: 270px; }
  .overview-route-content { padding: 18px; }
  .overview-route-stats { margin-top: 14px; gap: 5px; }
  .overview-route-stats > span { padding: 10px; }
  .overview-hero { min-height: 440px; display: block; }
  .hero-copy { max-width: 620px; padding: 34px 26px 190px; }
  .hero-copy h2 { font-size: clamp(2.25rem, 11vw, 3.35rem); }
  .hero-copy > p { margin-top: 17px; font-size: .9rem; }
  .hero-pills { margin-top: 20px; gap: 7px; }
  .hero-pills span { min-height: 31px; font-size: .67rem; }
  .hero-art { position: absolute; inset: auto 0 0 0; height: 235px; }
  .hero-art::before { background: linear-gradient(180deg, #0b1020 0%, transparent 40%), linear-gradient(0deg, rgba(7, 10, 18, .32), transparent 50%); }
  .hero-art img { inset: -40% -4% -12% -4%; width: 108%; height: 150%; object-position: 65% center; opacity: .85; }
  .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .summary-card { min-height: 120px; gap: 12px; padding: 16px; }
  .summary-icon { width: 42px; height: 42px; border-radius: 13px; }
  .summary-icon svg { width: 21px; height: 21px; }
  .summary-card strong { font-size: 1.95rem; }
  .collector-strip { grid-template-columns: 1fr; padding: 14px; }
  .collector-strip > div:not(:last-child) { padding: 0 0 10px; border-right: 0; border-bottom: 1px solid var(--line); }
  .freshness-banner { grid-template-columns: 38px minmax(0, 1fr); }
  .freshness-banner button { grid-column: 2; }
  .automation-launcher { min-height: 0; padding: 22px; background: linear-gradient(145deg, rgba(18, 26, 45, .96), rgba(10, 16, 29, .98)); }
  .section-heading { margin-top: 22px; }
  .section-heading h2, .panel h2 { font-size: 1.45rem; }
  .network-map { padding: 9px; }
  .topology-flow { scrollbar-width: none; }
  .topology-flow::-webkit-scrollbar { display: none; }
  .map-column { padding: 9px; }
  .ingress-grid, .relay-grid, .egress-grid { display: flex; grid-template-columns: none; gap: 9px; overflow-x: auto; padding: 1px 1px 8px; scroll-snap-type: x proximity; }
  .ingress-grid .node-card, .relay-grid .node-card, .egress-grid .node-card { flex: 0 0 min(82vw, 310px); scroll-snap-align: start; }
  .panel, .inventory-panel { padding: 17px; border-radius: 20px; }
  .inventory-heading, .inventory-heading-actions { align-items: flex-start; }
  .inventory-heading { gap: 12px; }
  .inventory-heading-actions { flex-direction: column; }
  .inventory-tools { align-items: stretch; }
  .inventory-list { gap: 10px; }
  .inventory-row { min-height: 0; padding: 16px; }
  .inventory-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inventory-action[data-node-action="edit"], .inventory-action[data-node-action="wizard"] { grid-column: 1 / -1; }
  .operation-row { grid-template-columns: minmax(0, 1fr) auto; padding: 14px 13px 14px 39px; }
  .operation-progress { grid-column: 1 / -1; }
  .operation-time { grid-column: 2; grid-row: 1; }
  .signals-grid, .detail-facts, .charts-grid { grid-template-columns: 1fr; }
  .node-dialog { width: 100vw; max-width: none; max-height: 100dvh; height: 100dvh; margin: 0; border: 0; border-radius: 0; }
  .dialog-shell { max-height: 100dvh; min-height: 100dvh; padding: 18px; padding-bottom: calc(22px + env(safe-area-inset-bottom)); }
  .dialog-heading { position: sticky; z-index: 3; top: -18px; margin: -18px -18px 16px; padding: 17px 18px 14px; background: rgba(12, 18, 33, .96); backdrop-filter: blur(18px); }
  footer { width: calc(100% - 24px); padding-bottom: 18px; }
  .login-page { padding: 14px; }
  .login-shell { width: min(100%, 470px); min-height: auto; grid-template-columns: 1fr; border-radius: 24px; }
  .login-showcase { min-height: 215px; padding: 26px; }
  .login-showcase-copy strong { margin-top: 9px; font-size: clamp(1.9rem, 10vw, 2.75rem); }
  .login-showcase-copy p { display: none; }
  .login-showcase-mark { width: 42px; height: 42px; }
  .login-card { padding: 30px 26px; border-top: 1px solid rgba(255, 255, 255, .08); border-left: 0; }
  .login-brand { display: none; }
}

@media (max-width: 480px) {
  .topbar-actions { gap: 5px; }
  .global-state { max-width: 124px; overflow: hidden; }
  .workspace-nav { left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); }
  .workspace-nav a { flex-direction: column; gap: 1px; padding: 5px 2px; }
  .workspace-nav a span:last-child { max-width: 100%; overflow: hidden; font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }
  .nav-glyph { height: 21px; }
  .overview-hero { min-height: 465px; border-radius: 24px; }
  .hero-copy { padding: 27px 20px 190px; }
  .hero-copy h2 { font-size: clamp(2.1rem, 11.7vw, 3rem); }
  .hero-pills span:nth-child(3) { display: none; }
  .summary-grid { grid-template-columns: 1fr; }
  .summary-card { min-height: 106px; }
  .summary-card strong { font-size: 2.1rem; }
  .topology-flow { padding: 12px; }
  .flow-endpoint i, .flow-stage i { width: 29px; height: 29px; }
  .inventory-row { grid-template-columns: 1fr; grid-template-areas: "identity" "state" "route" "actions"; }
  .inventory-state { justify-self: start; }
  .inventory-action { min-height: 44px; font-size: .69rem; }
  .route-editor-actions { align-items: stretch; }
  .operation-row { grid-template-columns: 1fr; }
  .operation-row .state-pill, .operation-time { grid-column: 1; grid-row: auto; justify-self: start; }
  .login-showcase { min-height: 185px; }
  .login-showcase-copy strong { font-size: 2rem; }
  .login-card { padding: 27px 22px; }
  .login-card h1 { font-size: 2.05rem; }
}

@media (max-width: 640px) {
  .agent-upgrade-title { align-items: flex-start; flex-direction: column; gap: 3px; }
  .agent-upgrade-versions, .agent-upgrade-stages { grid-template-columns: minmax(0, 1fr); }
  .agent-upgrade-actions { align-items: stretch; flex-direction: column; }
  .agent-upgrade-actions .inventory-action, .agent-upgrade-body > .inventory-action { width: 100%; }
}

@media (max-width: 390px) {
  .brand-copy { display: none; }
  .hero-copy h2 { font-size: 2.05rem; }
  .hero-pills { display: none; }
  .hero-copy { padding-bottom: 188px; }
  .filter-group { display: grid; grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* DENSE CONTROL ROOM ----------------------------------------------------- */
body:not(.login-page) {
  background: #161b22;
}

body:not(.login-page)::before {
  opacity: .08;
  background-image: radial-gradient(circle at 7% 4%, rgba(34, 211, 238, .15), transparent 30rem);
  mask-image: none;
}

.topbar {
  border-color: #2a313b;
  background: #0d141b;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .2);
}

.brand-mark {
  color: #4ad8ea;
  border-color: rgba(34, 211, 238, .34);
  background: linear-gradient(145deg, rgba(34, 211, 238, .16), rgba(20, 80, 91, .05));
  box-shadow: inset 0 0 24px rgba(34, 211, 238, .08);
}

.workspace-nav {
  border-color: transparent;
  background: transparent;
}

.workspace-nav a {
  position: relative;
  color: #9da7b3;
  border-radius: 8px;
  font-weight: 620;
}

.workspace-nav a:hover,
.workspace-nav a:focus-visible {
  color: #edf8fa;
  background: rgba(34, 211, 238, .055);
}

.workspace-nav a.is-active,
.workspace-nav a[aria-current="page"] {
  color: #62deed;
  background: rgba(34, 211, 238, .075);
  box-shadow: inset 3px 0 #22d3ee;
}

.workspace-nav a.is-active .nav-glyph,
.workspace-nav a[aria-current="page"] .nav-glyph { color: #62deed; }

.primary-action {
  color: #041317;
  background: linear-gradient(135deg, #37d5e8, #2fb9cd);
  box-shadow: 0 8px 22px rgba(34, 211, 238, .14), inset 0 1px rgba(255, 255, 255, .2);
}

.primary-action:hover { box-shadow: 0 11px 26px rgba(34, 211, 238, .22); }

.overview-heading {
  min-height: 58px;
  align-items: center;
  padding: 0 2px 12px;
}

.overview-heading h2 {
  margin-top: 3px;
  font-size: clamp(1.35rem, 1.8vw, 1.7rem);
  letter-spacing: -.035em;
}

.overview-heading p { margin-top: 4px; font-size: .76rem; }

.overview-health {
  min-width: 220px;
  padding: 8px 12px;
  border-radius: 10px;
  background: #1a2029;
}

.overview-data-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.overview-data-grid .summary-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px;
}

.overview-data-grid .summary-card,
.summary-card {
  min-height: 96px;
  gap: 13px;
  padding: 14px 16px;
  overflow: hidden;
  border-color: #2c333d;
  border-radius: 11px;
  background: #1a1f27;
  box-shadow: none;
}

.summary-card::after { display: none; }
.summary-icon { width: 44px; height: 44px; border-radius: 12px; }
.summary-icon svg { width: 22px; height: 22px; }
.summary-card .eyebrow { color: #929ca8; font-size: .75rem; font-weight: 540; letter-spacing: .01em; text-transform: none; }
.summary-card strong { margin: 2px 0 0; overflow: hidden; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: clamp(1.38rem, 1.75vw, 1.72rem); font-variant-numeric: tabular-nums; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.summary-card small { overflow: hidden; color: #7f8996; font-size: .66rem; text-overflow: ellipsis; white-space: nowrap; }

.overview-route-strip {
  min-width: 0;
  min-height: 72px;
  display: grid;
  grid-template-columns: minmax(145px, .75fr) minmax(280px, 1.3fr) minmax(140px, .72fr) minmax(140px, .72fr) minmax(190px, .9fr);
  align-items: center;
  gap: 14px;
  padding: 11px 15px;
  border: 1px solid #2c333d;
  border-radius: 11px;
  background: #151b22;
}

.overview-route-heading strong { display: block; margin-top: 2px; color: #dce5e9; font-size: .77rem; }
.overview-route-strip .overview-route-stats { margin: 0; }
.overview-route-strip .overview-route-stats > span { padding: 0; border: 0; background: transparent; backdrop-filter: none; }
.overview-route-strip .overview-route-stats b { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 1rem; font-variant-numeric: tabular-nums; }
.overview-route-strip .overview-route-stats small { margin-top: 2px; font-size: .62rem; }
.overview-route-strip .overview-route-stats > i { background: linear-gradient(90deg, rgba(34, 211, 238, .18), rgba(34, 211, 238, .62)); }

.overview-inline-signal,
.overview-route-strip .overview-route-transport {
  min-width: 0;
  margin: 0;
  padding: 0 0 0 14px;
  border: 0;
  border-left: 1px solid #2c333d;
}

.overview-inline-signal > span,
.overview-inline-signal > strong,
.overview-inline-signal > small { min-width: 0; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.overview-inline-signal > span,
.overview-route-strip .overview-route-transport span { color: #7f8996; font-size: .64rem; }
.overview-inline-signal > strong { margin-top: 1px; color: #edf2f5; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .9rem; font-variant-numeric: tabular-nums; }
.overview-inline-signal > small { margin-top: 1px; color: #747f8c; font-size: .58rem; }
.overview-route-strip .overview-route-transport { display: block; }
.overview-route-strip .overview-route-transport strong { display: block; margin-top: 3px; color: #c2ccd2; font-size: .68rem; text-align: left; }

.collector-strip,
.freshness-banner {
  border-radius: 11px;
  box-shadow: none;
}

.automation-launcher {
  min-height: 0;
  grid-template-columns: minmax(340px, 1fr) minmax(270px, .42fr);
  gap: 18px;
  padding: 18px;
  border-color: #2c333d;
  border-radius: 12px;
  background:
    linear-gradient(90deg, rgba(20, 27, 35, .99) 0%, rgba(20, 27, 35, .97) 68%, rgba(20, 27, 35, .78) 100%),
    url("/media/network-hero-v1.png") right 38% / 360px auto no-repeat,
    #141b23;
  box-shadow: none;
}

.automation-launcher::after { display: none; }
.automation-intro { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "eyebrow button" "title button" "copy button"; align-items: center; column-gap: 18px; }
.automation-intro > .eyebrow { grid-area: eyebrow; }
.automation-intro h2 { grid-area: title; margin-top: 3px; font-size: 1.3rem; }
.automation-intro p { grid-area: copy; max-width: 720px; margin-top: 4px; overflow: hidden; font-size: .73rem; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.automation-intro .primary-action { grid-area: button; min-height: 42px; margin-top: 0; white-space: nowrap; }
.automation-readiness { min-width: 0; padding: 12px 14px; border-color: #303841; border-radius: 10px; background: rgba(11, 18, 24, .88); backdrop-filter: none; }
.automation-readiness strong { margin-top: 4px; overflow: hidden; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.automation-readiness #automation-copy { display: -webkit-box; margin-top: 3px; overflow: hidden; font-size: .66rem; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

.node-metrics-strip {
  display: grid;
  min-height: 0;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px;
  margin-top: 10px;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.node-metrics-strip .summary-card { min-width: 0; }

.panel,
.network-map {
  border-color: #2c333d;
  background: #161c24;
  box-shadow: none;
}

.inventory-panel { padding: 18px; border-radius: 12px; }
.inventory-tools { margin-top: 13px; }
.inventory-search input,
.filter-group { border-color: #303741; border-radius: 9px; background: #11171e; }
.filter-chip { border-radius: 7px; }
.filter-chip.is-active { color: #64deed; background: rgba(34, 211, 238, .08); box-shadow: inset 0 0 0 1px rgba(34, 211, 238, .18); }

.inventory-columns {
  display: grid;
  grid-template-columns: minmax(250px, 1.25fr) 110px minmax(165px, .72fr) minmax(280px, 1.25fr) 92px;
  gap: 12px;
  margin-top: 14px;
  padding: 0 13px 6px;
  color: #697481;
  font-size: .61rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.inventory-columns span:last-child { text-align: right; }

.inventory-list {
  margin-top: 0;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

.inventory-role-group { min-width: 0; }
.inventory-role-heading { min-height: 42px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 0 4px 8px; border-bottom: 1px solid #303741; }
.inventory-role-heading h3 { margin: 0; color: #dce5ee; font-size: .8rem; letter-spacing: -.01em; }
.inventory-role-heading p { margin: 3px 0 0; color: #6f7b89; font-size: .62rem; }
.inventory-role-count { min-width: 28px; height: 24px; display: grid; place-items: center; padding-inline: 7px; border: 1px solid rgba(34, 211, 238, .2); border-radius: 999px; color: #70ddea; background: rgba(34, 211, 238, .055); font-size: .63rem; font-weight: 760; }
.inventory-role-items { min-width: 0; display: grid; gap: 8px; padding-top: 8px; }
.inventory-list-item { min-width: 0; }
.inventory-row-surface { position: relative; min-width: 0; }

.inventory-row {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(250px, 1.25fr) 110px minmax(165px, .72fr) minmax(280px, 1.25fr) 92px;
  grid-template-areas: "identity state live route actions";
  align-items: center;
  align-content: center;
  gap: 12px;
  min-height: 88px;
  padding: 10px 12px;
  border: 1px solid #303741;
  border-radius: 11px;
  color: inherit;
  background: linear-gradient(135deg, rgba(29, 36, 45, .96), rgba(22, 28, 36, .98));
  box-shadow: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.inventory-row[data-node-state="up"] { border-color: rgba(45, 212, 191, .3); background: linear-gradient(135deg, rgba(26, 59, 59, .46), rgba(22, 29, 36, .98)); }
.inventory-row[data-node-state="degraded"] { border-color: rgba(251, 191, 36, .3); background: linear-gradient(135deg, rgba(68, 56, 24, .28), rgba(22, 29, 36, .98)); }
.inventory-row[data-node-state="down"] { border-color: rgba(251, 113, 133, .34); background: linear-gradient(135deg, rgba(70, 31, 42, .3), rgba(22, 29, 36, .98)); }
.inventory-row:hover { border-color: rgba(34, 211, 238, .5); background: linear-gradient(135deg, rgba(25, 67, 72, .52), rgba(24, 32, 40, .99)); }
.inventory-row:focus-visible { outline: 2px solid #57dceb; outline-offset: 2px; }
.inventory-row.is-disabled { opacity: 1; }
.inventory-row.is-lifecycle-guarded { margin-inline: 0; padding-inline: 12px; }

.inventory-identity {
  min-height: 54px;
  padding-left: 49px;
}

.inventory-identity::before {
  top: 50%;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  transform: translateY(-50%);
}

.inventory-identity strong { overflow: hidden; font-size: .88rem; text-overflow: ellipsis; white-space: nowrap; }
.inventory-identity .inventory-description { margin-top: 2px; display: -webkit-box; overflow: hidden; color: #c0c8d0; font-size: .71rem; line-height: 1.35; white-space: normal; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.inventory-identity .inventory-meta { margin-top: 2px; overflow: hidden; color: #77828f; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .62rem; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.inventory-state { align-self: center; }
.inventory-state .state-pill { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inventory-agent-version {
  display: block;
  margin-top: 6px;
  overflow: hidden;
  color: #9eabb8;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: .72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inventory-agent-version.is-current { color: var(--green); }
.inventory-agent-version.is-connected { color: #59d4c5; }
.inventory-agent-version.is-outdated { color: var(--amber); }
.inventory-agent-version.is-stale { color: var(--amber); }
.inventory-agent-version.is-unknown { color: #707b88; font-family: inherit; font-weight: 620; }

.inventory-live-metrics {
  grid-area: live;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 8px;
}

.inventory-live-metric { min-width: 0; }
.inventory-live-metric small,
.inventory-live-metric strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inventory-live-metric small { color: #6e7986; font-size: .57rem; font-weight: 720; letter-spacing: .08em; }
.inventory-live-metric strong { margin-top: 3px; color: #aeb8c3; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .66rem; font-variant-numeric: tabular-nums; }

.inventory-route-copy {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
}

.inventory-route-copy strong { font-size: .58rem; }
.inventory-route-links {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 0 4px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  scrollbar-color: #3b4652 transparent;
}

.inventory-route-links::-webkit-scrollbar { height: 4px; }
.inventory-route-links::-webkit-scrollbar-track { background: transparent; }
.inventory-route-links::-webkit-scrollbar-thumb { border-radius: 999px; background: #3b4652; }

.inventory-route-copy .inventory-route-chip {
  flex: 0 0 auto;
  min-width: 0;
  max-width: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  padding: 4px 7px;
  overflow: visible;
  border: 1px solid rgba(45, 212, 191, .2);
  border-radius: 7px;
  color: #9fd8cf;
  background: rgba(45, 212, 191, .07);
  font-size: .59rem;
  line-height: 1.2;
  text-overflow: clip;
  white-space: nowrap;
  -webkit-box-orient: initial;
  -webkit-line-clamp: initial;
}

.inventory-route-copy .inventory-route-chip::before { content: ""; flex: 0 0 5px; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.inventory-route-copy .inventory-route-chip.is-backup { color: #b5a7ee; border-color: rgba(139, 124, 255, .2); background: rgba(139, 124, 255, .07); }
.inventory-route-copy .inventory-route-chip.is-empty { color: #7d8793; border-color: #343b44; background: rgba(255, 255, 255, .025); }
.inventory-route-copy .inventory-route-chip.is-more { flex: 0 0 auto; color: #a7b2bd; border-color: #343b44; background: rgba(255, 255, 255, .035); }

.inventory-open-hint {
  grid-area: actions;
  align-self: start;
  justify-self: end;
  margin-top: 6px;
  color: #71dce8;
  font-size: .67rem;
  font-weight: 760;
  white-space: nowrap;
}

.inventory-quick-edit-open {
  position: absolute;
  right: 10px;
  bottom: 9px;
  z-index: 2;
  min-height: 27px;
  padding: 4px 8px;
  border: 1px solid rgba(34, 211, 238, .24);
  border-radius: 8px;
  color: #9eeaf1;
  background: rgba(10, 22, 30, .92);
  font: inherit;
  font-size: .62rem;
  font-weight: 750;
  cursor: pointer;
}
.inventory-quick-edit-open:hover { border-color: rgba(34, 211, 238, .5); background: rgba(21, 47, 54, .96); }
.inventory-quick-edit-open:focus-visible { outline: 2px solid #57dceb; outline-offset: 2px; }
.inventory-quick-edit-open:disabled { cursor: not-allowed; opacity: .45; }
.inventory-quick-edit {
  display: grid;
  grid-template-columns: minmax(180px, .8fr) minmax(260px, 1.2fr) auto;
  align-items: end;
  gap: 10px 12px;
  margin-top: 7px;
  padding: 12px;
  border: 1px solid rgba(34, 211, 238, .32);
  border-radius: 11px;
  background: linear-gradient(135deg, rgba(15, 31, 39, .98), rgba(18, 24, 32, .99));
  box-shadow: 0 12px 28px rgba(0, 0, 0, .16);
}
.inventory-quick-edit-field { min-width: 0; display: grid; gap: 5px; color: #9aa7b4; font-size: .68rem; font-weight: 700; }
.inventory-quick-edit-field input { width: 100%; min-height: 38px; padding: 8px 10px; border: 1px solid #3a4651; border-radius: 8px; color: #e7eef3; background: #111923; font: inherit; font-size: .78rem; }
.inventory-quick-edit-field input:focus { border-color: #42cfdf; outline: 0; box-shadow: 0 0 0 3px rgba(34, 211, 238, .1); }
.inventory-quick-edit-actions { display: flex; gap: 7px; }
.inventory-quick-edit-actions button { min-height: 38px; padding: 8px 11px; white-space: nowrap; }
.inventory-quick-edit-status { grid-column: 1 / -1; margin: -2px 0 0; color: #83909d; font-size: .65rem; line-height: 1.4; }
.inventory-quick-edit-status.is-error { color: #ff9ea5; }

@media (min-width: 1480px) {
  .topbar {
    inset: 12px auto 12px 12px;
    width: 276px;
    height: auto;
    min-height: 0;
    padding: 22px 16px 18px;
    border: 1px solid #29313a;
    border-radius: 18px;
    background: #0d171e;
  }
  .workspace-nav { padding: 0; }
  .workspace-nav a { min-height: 44px; }
  main { width: min(1700px, calc(100% - 320px)); margin-right: 16px; margin-left: 304px; padding-top: 16px; }
  footer { width: min(1700px, calc(100% - 320px)); margin-right: 16px; margin-left: 304px; }
}

@media (max-width: 1320px) {
  .overview-route-strip { grid-template-columns: minmax(135px, .7fr) minmax(260px, 1.25fr) minmax(130px, .65fr) minmax(130px, .65fr); }
  .overview-route-strip .overview-route-transport { grid-column: 1 / -1; padding: 9px 0 0; border-top: 1px solid #2c333d; border-left: 0; }
  .overview-route-strip .overview-route-transport strong { display: inline; margin-left: 8px; }
  .inventory-columns { display: none; }
  .inventory-row {
    grid-template-columns: minmax(240px, 1.2fr) auto minmax(170px, .8fr) 92px;
    grid-template-areas: "identity state live actions" "route route route route";
    min-height: 112px;
  }
  .inventory-route-copy { padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, .055); }
}

@media (max-width: 1180px) {
  .overview-data-grid .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .node-metrics-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1020px) {
  .topbar { background: #0d141b; }
  .workspace-nav { grid-template-columns: repeat(5, minmax(0, 1fr)); background: #101820; backdrop-filter: none; }
  .workspace-nav a.is-active,
  .workspace-nav a[aria-current="page"] { box-shadow: inset 0 2px #22d3ee; }
  .automation-launcher { grid-template-columns: minmax(0, 1fr); }
  .inventory-row {
    grid-template-columns: minmax(230px, 1fr) auto 92px;
    grid-template-areas: "identity state actions" "live live live" "route route route";
  }
}

@media (max-width: 760px) {
  .inventory-quick-edit { grid-template-columns: minmax(0, 1fr); }
  .inventory-quick-edit-actions { justify-content: flex-end; }
  .overview-heading { align-items: flex-start; }
  .overview-data-grid .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .overview-data-grid .summary-card { min-height: 92px; padding: 12px; }
  .summary-icon { width: 38px; height: 38px; }
  .summary-card strong { font-size: 1.22rem; }
  .overview-route-strip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 11px; }
  .overview-route-strip .overview-inline-signal { padding: 9px 0 0; border-top: 1px solid #2c333d; border-left: 0; }
  .overview-route-strip .overview-route-transport { grid-column: 1 / -1; }
  .automation-intro { display: block; }
  .automation-intro p { white-space: normal; }
  .automation-intro .primary-action { width: 100%; margin-top: 12px; }
  .inventory-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "identity state" "live live" "route route" "actions actions";
    min-height: 0;
    padding: 12px;
  }
  .inventory-live-metrics { padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, .055); }
  .inventory-open-hint { justify-self: start; }
}

@media (max-width: 480px) {
  .overview-data-grid .summary-grid { grid-template-columns: minmax(0, 1fr); }
  .node-metrics-strip { grid-template-columns: minmax(0, 1fr); }
  .overview-data-grid .summary-card { min-height: 84px; }
  .overview-route-strip { grid-template-columns: minmax(0, 1fr); }
  .overview-route-strip .overview-route-stats { width: 100%; }
  .overview-route-strip .overview-inline-signal,
  .overview-route-strip .overview-route-transport { grid-column: 1; }
  .inventory-row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "identity" "state" "live" "route" "actions"; }
  .inventory-open-hint { font-size: .72rem; }
}

.node-role-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, .48fr) auto;
  align-items: end;
  gap: 10px 12px;
  margin-top: 14px;
  padding: 13px;
  border: 1px solid rgba(139, 124, 255, .2);
  border-radius: 12px;
  background: rgba(8, 13, 25, .54);
}

.node-role-control-copy { min-width: 0; align-self: center; }
.node-role-control-copy strong,
.node-role-control-copy span { display: block; }
.node-role-control-copy strong { color: #e7ebf3; font-size: .78rem; }
.node-role-control-copy span { margin-top: 4px; color: #8995aa; font-size: .69rem; line-height: 1.45; }
.node-role-field label { display: block; margin-bottom: 5px; color: #95a1b7; font-size: .68rem; font-weight: 720; }
.node-role-select {
  width: 100%;
  min-height: 44px;
  padding: 9px 34px 9px 11px;
  border: 1px solid #343d50;
  border-radius: 10px;
  color: #e7ebf3;
  background: #0a1020;
  font: inherit;
  font-size: .76rem;
}

.node-role-action { min-width: 148px; min-height: 44px; }
.node-role-hint { grid-column: 2 / -1; margin: -1px 0 0; font-size: .68rem; line-height: 1.45; }
.node-role-hint.is-ready { color: #74d9c5; }
.node-role-hint.is-blocked { color: #9ba6b9; }

@media (max-width: 760px) {
  .node-role-control { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .node-role-control-copy { grid-column: 1 / -1; }
  .node-role-hint { grid-column: 1 / -1; }
}

@media (max-width: 480px) {
  .node-role-control { grid-template-columns: minmax(0, 1fr); }
  .node-role-control-copy,
  .node-role-hint { grid-column: 1; }
  .node-role-action { width: 100%; }
}

/* Unified node editor, modelled after the Remnawave node workspace. */
.node-editor-dialog {
  width: min(1480px, calc(100vw - 40px));
  max-width: none;
  max-height: calc(100dvh - 28px);
  overflow: hidden;
  border-color: #313943;
  border-radius: 15px;
  background: #151b22;
}

.node-editor-shell {
  width: 100%;
  height: min(980px, calc(100dvh - 40px));
  max-height: calc(100dvh - 28px);
  min-height: min(620px, calc(100dvh - 28px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: 0;
  overflow: hidden;
  background: #151b22;
}

.node-editor-heading {
  position: relative;
  z-index: 4;
  top: auto;
  margin: 0;
  padding: 16px 20px;
  border-bottom: 1px solid #2d343d;
  background: rgba(21, 27, 34, .98);
}

.node-editor-heading-copy {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 13px;
}

.node-editor-heading-copy > div { min-width: 0; }
.node-editor-heading-copy h2 {
  max-width: min(680px, 68vw);
  margin-top: 2px;
  overflow: hidden;
  font-size: 1.42rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.node-editor-mark,
.node-editor-section-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid rgba(45, 212, 191, .3);
  color: #45dac1;
  background: rgba(16, 185, 129, .1);
}

.node-editor-mark { width: 42px; height: 42px; border-radius: 11px; font-size: 1.35rem; }
.node-editor-subtitle {
  max-width: min(760px, 72vw);
  margin-top: 3px;
  overflow: hidden;
  color: #8d98a5;
  font-size: .82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.node-editor-scroll {
  min-height: 0;
  padding: 17px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: #3b4651 transparent;
}

.node-editor-layout {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(320px, .82fr);
  align-items: start;
  gap: 14px;
}

.node-editor-primary,
.node-editor-sidebar { min-width: 0; display: grid; gap: 14px; }
.node-editor-sidebar { position: sticky; top: 0; }

.node-editor-summary {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.node-editor-metric {
  min-width: 0;
  min-height: 76px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 11px 12px;
  border: 1px solid #303842;
  border-radius: 10px;
  background: #1a2129;
}

.node-editor-metric > span,
.node-editor-metric > strong,
.node-editor-metric > small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.node-editor-metric > span { color: #8b96a2; font-size: .78rem; }
.node-editor-metric > strong { margin-top: 5px; color: #e5eaf0; font-size: 1rem; font-variant-numeric: tabular-nums; }
.node-editor-metric > small { margin-top: 3px; color: #717d89; font-size: .71rem; }

.node-editor-section {
  min-width: 0;
  padding: 15px;
  border: 1px solid #303842;
  border-radius: 11px;
  background: #1a2028;
}

.node-editor-section[hidden] { display: none; }
.node-editor-section-heading {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 39px;
  padding-bottom: 12px;
  border-bottom: 1px solid #2d343d;
}

.node-editor-section-icon { width: 35px; height: 35px; border-radius: 9px; font-size: .86rem; }
.node-editor-section-icon.is-cyan { color: #55dcec; border-color: rgba(34, 211, 238, .28); background: rgba(34, 211, 238, .08); }
.node-editor-section-icon.is-violet { color: #a893ff; border-color: rgba(139, 124, 255, .3); background: rgba(139, 124, 255, .1); }
.node-editor-section-icon.is-amber { color: #f6c74d; border-color: rgba(245, 183, 30, .3); background: rgba(245, 183, 30, .09); letter-spacing: .1em; }
.node-editor-section-heading h3 { margin: 0; color: #edf1f5; font-size: 1.04rem; }
.node-editor-section-heading p { margin-top: 2px; color: #84909c; font-size: .76rem; }

.node-editor-main-section .inventory-edit-fields {
  min-width: 0;
  margin: 0;
  padding: 14px 0 0;
  border: 0;
  background: transparent;
}

.node-editor-main-section .field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.node-editor-main-section .field-grid > div { min-width: 0; }
.node-editor-main-section .field-span { grid-column: 1 / -1; }
.node-editor-main-section label,
.node-editor-main-section .route-editor legend { color: #bac2cb; font-size: .82rem; }
.node-editor-main-section input:not([type="checkbox"]):not([type="radio"]),
.node-editor-main-section select,
.node-editor-replacement-select {
  min-width: 0;
  min-height: 42px;
  border-color: #414a55;
  border-radius: 9px;
  color: #e1e6eb;
  background: #202730;
  font-size: .86rem;
}

.node-editor-main-section input:disabled,
.node-editor-main-section select:disabled { color: #89939e; opacity: .78; background: #181e25; }
.node-editor-main-section .field-help { display: block; min-height: 16px; margin-top: 4px; color: #808c98; font-size: .72rem; line-height: 1.4; }
.node-editor-routes,
.node-editor-main-section .haproxy-settings,
.node-editor-main-section .check-field { border-color: #333c46; background: #171d24; }
.node-editor-routes { margin-top: 14px; }

.node-editor-health { display: grid; gap: 8px; padding-top: 12px; }
.node-editor-health .signal-item { min-height: 57px; padding: 10px 11px; border-color: #313a44; border-radius: 9px; background: #161c23; }
.node-editor-health .signal-item strong { font-size: .84rem; }
.node-editor-health .signal-item span { margin-top: 2px; font-size: .76rem; }

.node-editor-system-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  padding-top: 2px;
}
.node-editor-system-grid .node-editor-metric { min-height: 62px; padding: 8px 9px; }
.node-editor-system-grid .node-editor-metric > span { font-size: .69rem; }
.node-editor-system-grid .node-editor-metric > strong { font-size: .82rem; }

.node-editor-connections { display: grid; gap: 7px; padding-top: 12px; }
.node-editor-connection {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 10px 11px;
  border: 1px solid rgba(45, 212, 191, .22);
  border-radius: 8px;
  background: rgba(45, 212, 191, .055);
}
.node-editor-connection.is-backup { border-color: rgba(139, 124, 255, .24); background: rgba(139, 124, 255, .065); }
.node-editor-connection.is-incoming { border-color: rgba(34, 211, 238, .24); background: rgba(34, 211, 238, .055); }
.node-editor-connection strong { min-width: 0; overflow: hidden; color: #dce5e6; font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }
.node-editor-connection span { color: #91a6a4; font-size: .74rem; white-space: nowrap; }
.node-editor-empty { margin: 12px 0 0; color: #8e99a5; font-size: .8rem; line-height: 1.5; }
.node-editor-history { min-width: 0; padding-top: 12px; }
.node-editor-history .charts-grid { grid-template-columns: minmax(0, 1fr); gap: 9px; }
.node-editor-history .history-chart { min-width: 0; padding: 10px; }
.node-editor-history .history-chart svg { min-height: 74px; }

.node-editor-actions { display: grid; gap: 8px; padding-top: 12px; }
.node-editor-action {
  width: 100%;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid rgba(34, 211, 238, .34);
  border-radius: 9px;
  color: #07171c;
  background: #42cadd;
  font: inherit;
  font-size: .82rem;
  font-weight: 800;
  cursor: pointer;
}
.node-editor-action:hover { filter: brightness(1.08); }
.node-editor-action:focus-visible { outline: 2px solid #63e4ef; outline-offset: 2px; }
.node-editor-action.is-secondary { color: #dce2e8; border-color: #3a434e; background: #222932; }
.node-editor-action.is-danger { color: #ff9aab; border-color: rgba(251, 113, 133, .28); background: rgba(127, 29, 47, .17); }
.node-editor-action:disabled { cursor: not-allowed; opacity: .45; filter: none; }
.node-editor-replacement { display: grid; gap: 5px; padding: 11px; border: 1px solid #353d47; border-radius: 9px; background: #161c23; }
.node-editor-replacement > strong { color: #e2e7ec; font-size: .85rem; }
.node-editor-replacement > span { color: #909ba6; font-size: .75rem; line-height: 1.45; }
.node-editor-replacement-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; margin-top: 5px; }
.node-editor-replacement-controls .node-editor-action { width: auto; white-space: nowrap; }

.inventory-editor-footer {
  z-index: 5;
  justify-content: flex-end;
  gap: 9px;
  margin: 0;
  padding: 12px 17px;
  border-top: 1px solid #2d343d;
  background: rgba(21, 27, 34, .98);
  box-shadow: 0 -12px 28px rgba(0, 0, 0, .16);
}
.inventory-editor-footer button { min-width: 145px; min-height: 42px; }
.node-editor-more { position: relative; margin-right: auto; }
.node-editor-more[hidden] { display: none; }
.node-editor-more > summary {
  min-width: 190px;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 18px;
  border: 1px solid #3a434e;
  border-radius: 9px;
  color: #dce2e8;
  background: #222932;
  font-size: .82rem;
  font-weight: 780;
  list-style: none;
  cursor: pointer;
}
.node-editor-more > summary::-webkit-details-marker { display: none; }
.node-editor-more > summary:hover { filter: brightness(1.08); }
.node-editor-more > summary:focus-visible { outline: 2px solid #63e4ef; outline-offset: 2px; }
.node-editor-more[open] > summary { border-color: rgba(34, 211, 238, .4); color: #ecfbfd; }
.node-editor-more .node-editor-actions {
  position: absolute;
  z-index: 20;
  bottom: calc(100% + 10px);
  left: 0;
  width: min(390px, calc(100vw - 48px));
  max-height: min(430px, calc(100dvh - 150px));
  overflow: auto;
  padding: 12px;
  border: 1px solid #3a434e;
  border-radius: 12px;
  background: #171d24;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .42);
}
.node-editor-scroll > .inventory-stale-note,
.node-editor-scroll > .form-error,
.node-editor-scroll > .inventory-save-note { margin: 12px 0 0; }

.inventory-identity strong { font-size: .96rem; }
.inventory-identity .inventory-description { font-size: .82rem; }
.inventory-identity .inventory-meta { font-size: .73rem; }
.inventory-live-metric small { font-size: .65rem; }
.inventory-live-metric strong { font-size: .82rem; }
.inventory-route-copy strong { font-size: .67rem; }
.inventory-route-copy .inventory-route-chip { font-size: .74rem; }
.inventory-open-hint { font-size: .74rem; }
.inventory-route-links { overflow: hidden; scrollbar-width: none; }

@media (max-width: 980px) {
  .node-editor-layout { grid-template-columns: minmax(0, 1fr); }
  .node-editor-sidebar { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .node-editor-sidebar > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .node-editor-dialog { width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; }
  .node-editor-shell { height: 100dvh; min-height: 100dvh; max-height: 100dvh; padding: 0; }
  .node-editor-heading { top: auto; margin: 0; padding: 13px 14px; }
  .node-editor-heading-copy { gap: 10px; }
  .node-editor-mark { width: 38px; height: 38px; }
  .node-editor-heading-copy h2 { max-width: calc(100vw - 120px); font-size: 1.08rem; }
  .node-editor-subtitle { max-width: calc(100vw - 120px); }
  .node-editor-scroll { padding: 11px; }
  .node-editor-layout,
  .node-editor-primary,
  .node-editor-sidebar { gap: 10px; }
  .node-editor-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .node-editor-sidebar { grid-template-columns: minmax(0, 1fr); }
  .node-editor-sidebar > :last-child:nth-child(odd) { grid-column: auto; }
  .node-editor-section { padding: 13px; }
  .inventory-editor-footer { padding: 10px 11px calc(10px + env(safe-area-inset-bottom)); }
  .inventory-editor-footer button { min-width: 0; }
}

@media (max-width: 480px) {
  .node-editor-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .node-editor-metric { min-height: 64px; }
  .node-editor-main-section .field-grid { grid-template-columns: minmax(0, 1fr); }
  .node-editor-main-section .field-span { grid-column: 1; }
  .node-editor-replacement-controls { grid-template-columns: minmax(0, 1fr); }
  .node-editor-replacement-controls .node-editor-action { width: 100%; }
  .node-editor-system-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inventory-editor-footer { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); }
  .node-editor-more { grid-column: 1 / -1; margin-right: 0; }
  .node-editor-more > summary { width: 100%; }
  .node-editor-more .node-editor-actions { width: calc(100vw - 22px); }
}

/* Batch topology editor: a dense route matrix on desktop and readable node groups on mobile. */
.links-workspace { min-width: 0; }

.topology-batch-panel {
  position: relative;
  margin-top: 0;
  padding: 0;
  overflow: clip;
  border-color: rgba(84, 215, 229, .2);
  background: linear-gradient(145deg, rgba(16, 28, 40, .98), rgba(11, 18, 30, .99));
}
.topology-batch-panel[hidden] { display: none; }

.topology-batch-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.topology-batch-heading h2 { margin-top: 3px; font-size: 1.38rem; letter-spacing: -.025em; }
.topology-batch-heading p {
  max-width: 760px;
  margin-top: 6px;
  color: #929fb1;
  font-size: .875rem;
  line-height: 1.5;
}
.topology-batch-close {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 11px;
  color: #dce4ed;
  background: rgba(255, 255, 255, .035);
  font-size: 1.45rem;
  line-height: 1;
  cursor: pointer;
}

.topology-batch-toolbar,
.topology-batch-meta,
.topology-batch-footer,
.topology-batch-actions,
.topology-batch-tabs,
.topology-batch-legend {
  display: flex;
  align-items: center;
}
.topology-batch-toolbar {
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .055);
  background: rgba(5, 11, 22, .36);
}
.topology-batch-tabs {
  min-width: 0;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 11px;
  background: rgba(3, 8, 18, .52);
}
.topology-batch-tab {
  min-height: 44px;
  padding: 9px 14px;
  border: 0;
  border-radius: 8px;
  color: #929eb2;
  background: transparent;
  font-size: .82rem;
  font-weight: 780;
  white-space: nowrap;
  cursor: pointer;
}
.topology-batch-tab:hover { color: #e9eef5; background: rgba(255, 255, 255, .04); }
.topology-batch-tab.is-active,
.topology-batch-tab[aria-selected="true"] {
  color: #071419;
  background: #54d7e5;
  box-shadow: 0 7px 18px rgba(34, 211, 238, .17);
}
.topology-batch-link-all { min-height: 44px; white-space: nowrap; }

.topology-batch-meta {
  justify-content: space-between;
  gap: 14px;
  padding: 10px 18px;
}
.topology-batch-legend { flex-wrap: wrap; gap: 8px 16px; color: #929eae; font-size: .75rem; }
.topology-batch-legend > span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.topology-batch-key {
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #3a434e;
  border-radius: 6px;
  color: #a9b4c1;
  background: rgba(255, 255, 255, .035);
  font-style: normal;
  font-weight: 850;
}
.topology-batch-key.is-linked { color: #59e0ad; border-color: rgba(89, 224, 173, .3); background: rgba(89, 224, 173, .08); }
.topology-batch-key.is-added { color: #65e6f2; border-color: rgba(84, 215, 229, .34); background: rgba(84, 215, 229, .09); }
.topology-batch-key.is-removed { color: #ff8e88; border-color: rgba(255, 117, 111, .3); background: rgba(255, 117, 111, .07); }
.topology-batch-key.is-offline { color: #f1bd62; border-color: rgba(241, 189, 98, .34); background: rgba(241, 189, 98, .08); }
.topology-batch-status { color: #9eabba; font-size: .78rem; text-align: right; }
.topology-batch-notice {
  margin: 0 18px 10px;
  padding: 10px 12px;
  border: 1px solid rgba(241, 189, 98, .3);
  border-radius: 10px;
  color: #edc77c;
  background: rgba(241, 189, 98, .075);
  font-size: .82rem;
  line-height: 1.45;
}
.topology-batch-notice.is-error { color: #ffaaa6; border-color: rgba(255, 117, 111, .32); background: rgba(255, 117, 111, .07); }
.topology-batch-notice.is-success { color: #76e6bb; border-color: rgba(89, 224, 173, .32); background: rgba(89, 224, 173, .07); }
.topology-batch-notice[hidden] { display: none; }

.topology-batch-table-wrap {
  max-height: min(58vh, 640px);
  margin: 0 18px;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px;
  background: rgba(4, 9, 18, .45);
  scrollbar-color: #46515e transparent;
}
.topology-batch-table { min-width: 0; }
.topology-batch-grid {
  width: 100%;
  min-width: 760px;
  border-spacing: 0;
  border-collapse: separate;
  color: #dce4ec;
  font-size: .78rem;
}
.topology-batch-table th,
.topology-batch-table td {
  min-width: 72px;
  height: 58px;
  padding: 7px;
  border-right: 1px solid rgba(255, 255, 255, .055);
  border-bottom: 1px solid rgba(255, 255, 255, .055);
  text-align: center;
}
.topology-batch-table thead th {
  position: sticky;
  z-index: 3;
  top: 0;
  color: #99a6b7;
  background: #161f2b;
  font-size: .72rem;
  font-weight: 800;
  line-height: 1.35;
  vertical-align: middle;
}
.topology-batch-table th:first-child {
  position: sticky;
  z-index: 2;
  left: 0;
  min-width: 230px;
  max-width: 270px;
  padding-inline: 12px;
  text-align: left;
  background: #121b26;
  box-shadow: 8px 0 16px rgba(0, 0, 0, .13);
}
.topology-batch-table thead th:first-child { z-index: 4; background: #18222f; }
.topology-batch-table tr:last-child th,
.topology-batch-table tr:last-child td { border-bottom: 0; }
.topology-batch-table th:last-child,
.topology-batch-table td:last-child { border-right: 0; }
.topology-batch-table tbody tr:hover td { background: rgba(84, 215, 229, .025); }
.topology-batch-table tbody tr:hover th:first-child { background: #17232e; }
.topology-batch-table .is-offline,
.topology-batch-table .is-warning { color: #f1c46e; }

.topology-batch-destination,
.topology-batch-target {
  display: grid;
  justify-items: center;
  gap: 3px;
}
.topology-batch-destination strong,
.topology-batch-target strong,
.topology-batch-source strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topology-batch-destination small,
.topology-batch-target small,
.topology-batch-source small { color: #758294; font-size: .68rem; font-weight: 650; }
.topology-batch-source { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.topology-batch-source-copy { min-width: 0; display: grid; gap: 3px; }
.topology-batch-source strong { display: block; color: #e5ebf1; font-size: .82rem; }

.topology-batch-cell-button,
.topology-batch-cell {
  position: relative;
  width: 44px;
  min-width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  border: 1px solid #394451;
  border-radius: 10px;
  color: #7f8b99;
  background: rgba(255, 255, 255, .025);
  font-size: 1rem;
  font-weight: 900;
  cursor: pointer;
}
.topology-batch-cell input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
.topology-batch-cell-marker { pointer-events: none; }
.topology-batch-cell-button:hover,
.topology-batch-cell:hover { color: #dce8ef; border-color: rgba(84, 215, 229, .45); background: rgba(84, 215, 229, .07); }
.topology-batch-cell-button.is-linked,
.topology-batch-cell-button[aria-pressed="true"],
.topology-batch-cell.is-linked { color: #59e0ad; border-color: rgba(89, 224, 173, .38); background: rgba(89, 224, 173, .09); }
.topology-batch-cell-button.is-added,
.topology-batch-cell.is-added { color: #071419; border-color: #54d7e5; background: #54d7e5; }
.topology-batch-cell-button.is-removed,
.topology-batch-cell.is-removed { color: #ff8e88; border-color: rgba(255, 117, 111, .42); background: rgba(255, 117, 111, .08); }
.topology-batch-cell-button.is-offline::after,
.topology-batch-cell-button.has-warning::after,
.topology-batch-cell.is-warning::after {
  content: "!";
  position: absolute;
  top: -5px;
  right: -5px;
  width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  border: 2px solid #111a25;
  border-radius: 50%;
  color: #161006;
  background: #f1bd62;
  font-size: .62rem;
}
.topology-batch-cell-button:disabled { cursor: not-allowed; opacity: .42; }
.topology-batch-cell:has(input:disabled) { cursor: not-allowed; opacity: .42; }
.topology-batch-row-all {
  min-height: 44px;
  padding: 7px 10px;
  border: 1px solid #384350;
  border-radius: 9px;
  color: #aeb9c6;
  background: rgba(255, 255, 255, .03);
  font-size: .72rem;
  font-weight: 760;
  cursor: pointer;
}

.topology-batch-empty { padding: 24px !important; color: #8491a1; line-height: 1.5; text-align: center !important; }
.topology-batch-mobile { display: none; }
.topology-batch-stale {
  margin: 12px 18px 0;
  padding: 11px 13px;
  border: 1px solid rgba(241, 189, 98, .32);
  border-radius: 10px;
  color: #f1c775;
  background: rgba(241, 189, 98, .075);
  font-size: .82rem;
  line-height: 1.45;
}
.topology-batch-stale[hidden] { display: none; }

.topology-batch-footer {
  position: sticky;
  z-index: 6;
  bottom: 0;
  justify-content: space-between;
  gap: 16px;
  min-height: 70px;
  margin-top: 14px;
  padding: 12px 18px;
  border-top: 1px solid rgba(255, 255, 255, .075);
  background: rgba(16, 23, 34, .97);
  box-shadow: 0 -14px 30px rgba(0, 0, 0, .2);
  backdrop-filter: blur(14px);
}
.topology-batch-footer > p { color: #a8b3c0; font-size: .82rem; font-weight: 720; }
.topology-batch-actions { flex: 0 0 auto; justify-content: flex-end; gap: 8px; }
.topology-batch-actions button { min-height: 44px; }

.topology-batch-close:hover,
.topology-batch-row-all:hover { color: #fff; border-color: rgba(84, 215, 229, .42); background: rgba(84, 215, 229, .08); }
.topology-batch-close:focus-visible,
.topology-batch-tab:focus-visible,
.topology-batch-cell-button:focus-visible,
.topology-batch-cell:focus-within,
.topology-batch-row-all:focus-visible,
.topology-batch-table-wrap:focus-visible {
  outline: 2px solid #63e4ef;
  outline-offset: 2px;
}

@media (max-width: 760px) {
  .topology-batch-heading { padding: 15px; }
  .topology-batch-heading p { font-size: .84rem; }
  .topology-batch-toolbar { align-items: stretch; flex-direction: column; padding: 12px 15px; }
  .topology-batch-tabs { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .topology-batch-tab { min-width: 0; padding-inline: 9px; white-space: normal; }
  .topology-batch-link-all { width: 100%; }
  .topology-batch-meta { align-items: flex-start; flex-direction: column; padding: 10px 15px; }
  .topology-batch-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 8px; }
  .topology-batch-status { text-align: left; }
  .topology-batch-notice { margin-inline: 15px; }
  .topology-batch-table-wrap { display: none; }
  .topology-batch-mobile { display: grid; gap: 9px; padding: 0 15px; }
  .topology-batch-mobile-group,
  .topology-batch-mobile-row {
    overflow: clip;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 11px;
    background: rgba(5, 11, 21, .46);
  }
  .topology-batch-mobile-group > summary,
  .topology-batch-mobile-row > summary {
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    color: #e2e8ee;
    font-size: .86rem;
    font-weight: 780;
    cursor: pointer;
  }
  .topology-batch-mobile-group > summary::marker,
  .topology-batch-mobile-row > summary::marker { color: #65dce9; }
  .topology-batch-mobile-row > summary::after { content: "⌄"; flex: 0 0 auto; margin-left: auto; color: #65dce9; font-size: 1rem; }
  .topology-batch-mobile-row[open] > summary::after { content: "⌃"; }
  .topology-batch-mobile-row > summary small { color: #8290a1; font-size: .73rem; font-weight: 720; }
  .topology-batch-mobile-row > .topology-batch-source { padding: 9px 10px 9px 12px; border-top: 1px solid rgba(255, 255, 255, .065); background: #141e29; }
  .topology-batch-mobile-links,
  .topology-batch-mobile-options { display: grid; gap: 1px; border-top: 1px solid rgba(255, 255, 255, .065); background: rgba(255, 255, 255, .045); }
  .topology-batch-mobile-link,
  .topology-batch-mobile-option {
    min-height: 58px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    align-items: center;
    gap: 10px;
    padding: 7px 10px 7px 12px;
    background: #111a25;
  }
  .topology-batch-mobile-link strong,
  .topology-batch-mobile-link small,
  .topology-batch-mobile-option strong,
  .topology-batch-mobile-option small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topology-batch-mobile-link strong,
  .topology-batch-mobile-option strong { color: #dce4eb; font-size: .82rem; }
  .topology-batch-mobile-link small,
  .topology-batch-mobile-option small { margin-top: 3px; color: #788596; font-size: .71rem; }
  .topology-batch-mobile-option .topology-batch-target { min-width: 0; justify-items: start; }
  .topology-batch-mobile-option.is-warning { background: rgba(241, 189, 98, .055); }
  .topology-batch-stale { margin-inline: 15px; }
  .topology-batch-footer { align-items: stretch; flex-direction: column; gap: 10px; padding: 11px 15px calc(11px + env(safe-area-inset-bottom)); }
  .topology-batch-actions { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); width: 100%; }
  .topology-batch-actions button { min-width: 0; }
}

@media (max-width: 420px) {
  .topology-batch-heading { gap: 10px; }
  .topology-batch-heading h2 { font-size: 1.18rem; }
  .topology-batch-legend { grid-template-columns: minmax(0, 1fr); }
  .topology-batch-actions { grid-template-columns: minmax(0, 1fr); }
  .topology-batch-actions button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .topology-batch-tab,
  .topology-batch-cell-button,
  .topology-batch-cell,
  .topology-batch-close,
  .topology-batch-row-all { scroll-behavior: auto; transition: none; }
}
/* Durable, fleet-wide agent rollout */
.agent-fleet-upgrade-dialog { width: min(1120px, calc(100vw - 32px)); }
.agent-fleet-upgrade-shell {
  max-height: calc(100dvh - 32px);
  display: flex;
  flex-direction: column;
  padding: 0;
}
.agent-fleet-upgrade-shell > .dialog-heading {
  flex: 0 0 auto;
  padding: 22px 24px 17px;
  border-bottom: 1px solid var(--line);
}
.agent-fleet-upgrade-description {
  flex: 0 0 auto;
  margin: 0;
  padding: 15px 24px 0;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.55;
}
.agent-fleet-upgrade-live {
  flex: 0 0 auto;
  min-height: 0;
  margin: 12px 24px 0;
  padding: 10px 12px;
  border-left: 3px solid var(--cyan);
  color: #b8c3d0;
  background: rgba(84, 215, 229, .045);
  font-size: .75rem;
  line-height: 1.45;
}
.agent-fleet-upgrade-live:empty { display: none; }
.agent-fleet-upgrade-live.is-busy { border-color: var(--cyan); color: #dceaf0; }
.agent-fleet-upgrade-live.is-success { border-color: var(--green); color: var(--green); background: rgba(89, 224, 173, .05); }
.agent-fleet-upgrade-live.is-warning { border-color: var(--amber); color: #f1cb80; background: rgba(241, 189, 98, .055); }
.agent-fleet-upgrade-live.is-error { border-color: var(--red); color: #ffaaa6; background: rgba(255, 117, 111, .055); }
.agent-fleet-upgrade-body {
  min-height: 240px;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 18px 24px 22px;
}
.agent-fleet-upgrade-body[aria-busy="true"] { cursor: progress; }
.agent-fleet-upgrade-empty,
.agent-fleet-upgrade-intro {
  display: grid;
  gap: 9px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(255, 255, 255, .018);
}
.agent-fleet-upgrade-empty strong,
.agent-fleet-upgrade-intro strong { font-size: .9rem; }
.agent-fleet-upgrade-empty p,
.agent-fleet-upgrade-intro p { margin: 0; color: var(--muted); font-size: .76rem; line-height: 1.5; }
.agent-fleet-upgrade-empty .primary-action,
.agent-fleet-upgrade-intro .primary-action { width: fit-content; margin-top: 4px; }
.agent-fleet-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.agent-fleet-summary > div,
.agent-fleet-target {
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(255, 255, 255, .018);
}
.agent-fleet-summary span,
.agent-fleet-summary strong,
.agent-fleet-target span,
.agent-fleet-target strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-fleet-summary span,
.agent-fleet-target span { color: var(--muted); font-size: .64rem; }
.agent-fleet-summary strong,
.agent-fleet-target strong { margin-top: 5px; color: var(--text); font-size: .8rem; font-variant-numeric: tabular-nums; }
.agent-fleet-targets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.agent-fleet-progress { margin-top: 12px; }
.agent-fleet-progress-copy { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); font-size: .7rem; }
.agent-fleet-progress-copy strong { color: var(--text); font-size: .76rem; }
.agent-fleet-progress-track { display: block; width: 100%; height: 7px; margin-top: 7px; overflow: hidden; border: 0; border-radius: 999px; appearance: none; color: var(--green); background: rgba(255, 255, 255, .07); }
.agent-fleet-progress-track::-webkit-progress-bar { border-radius: inherit; background: rgba(255, 255, 255, .07); }
.agent-fleet-progress-track::-webkit-progress-value { border-radius: inherit; background: linear-gradient(90deg, var(--cyan), var(--green)); }
.agent-fleet-progress-track::-moz-progress-bar { border-radius: inherit; background: linear-gradient(90deg, var(--cyan), var(--green)); }
.agent-fleet-blockers { display: grid; gap: 7px; margin: 12px 0 0; padding: 0; list-style: none; }
.agent-fleet-blockers li { padding: 10px 12px; border: 1px solid rgba(241, 189, 98, .28); border-radius: 10px; color: #e7c985; background: rgba(241, 189, 98, .045); font-size: .72rem; line-height: 1.45; }
.agent-fleet-waves { display: grid; gap: 12px; margin-top: 14px; }
.agent-fleet-wave { overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: rgba(3, 10, 19, .32); }
.agent-fleet-wave > summary { min-height: 50px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 13px; color: #dce5ed; font-size: .78rem; font-weight: 790; cursor: pointer; }
.agent-fleet-wave > summary small { color: var(--muted); font-size: .68rem; font-weight: 650; }
.agent-fleet-wave-list { display: grid; gap: 1px; border-top: 1px solid var(--line); background: var(--line); }
.agent-fleet-node {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(170px, 1fr) minmax(125px, .65fr) 22px minmax(125px, .65fr) minmax(130px, .7fr);
  align-items: center;
  gap: 9px;
  min-height: 58px;
  padding: 9px 12px;
  background: #111925;
}
.agent-fleet-node-identity strong,
.agent-fleet-node-identity small,
.agent-fleet-node-version span,
.agent-fleet-node-version strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-fleet-node-identity strong { font-size: .75rem; }
.agent-fleet-node-identity small,
.agent-fleet-node-version span { margin-top: 3px; color: var(--muted); font-size: .63rem; }
.agent-fleet-node-version strong { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .7rem; font-variant-numeric: tabular-nums; }
.agent-fleet-node-arrow { color: #647180; text-align: center; }
.agent-fleet-node-state { justify-self: end; max-width: 100%; display: grid; justify-items: end; gap: 4px; }
.agent-fleet-node-state .state-pill { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-fleet-node-detail { max-width: 210px; color: #f1a39f; font-size: .61rem; line-height: 1.35; text-align: right; overflow-wrap: anywhere; }
.agent-fleet-plan-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 15px; padding-top: 14px; border-top: 1px solid var(--line); }
.agent-fleet-confirm { min-width: 0; display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: start; gap: 9px; color: #d7dee7; font-size: .73rem; line-height: 1.45; cursor: pointer; }
.agent-fleet-confirm input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--cyan); }
.agent-fleet-plan-actions .primary-action { flex: 0 0 auto; }
.agent-fleet-plan-buttons { flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.agent-fleet-upgrade-actions {
  flex: 0 0 auto;
  margin: 0;
  padding: 13px 24px calc(13px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: rgba(14, 21, 31, .98);
  box-shadow: 0 -12px 30px rgba(0, 0, 0, .2);
}
.agent-fleet-upgrade-actions #agent-fleet-upgrade-cancel { margin-right: auto; }

@media (max-width: 860px) {
  .agent-fleet-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agent-fleet-node { grid-template-columns: minmax(0, 1fr) minmax(120px, auto); grid-template-areas: "identity state" "current current" "target target"; }
  .agent-fleet-node-identity { grid-area: identity; }
  .agent-fleet-node-state { grid-area: state; }
  .agent-fleet-node-version.is-current { grid-area: current; }
  .agent-fleet-node-version.is-target { grid-area: target; }
  .agent-fleet-node-arrow { display: none; }
}

@media (max-width: 600px) {
  .agent-fleet-upgrade-dialog { width: 100vw; }
  .agent-fleet-upgrade-shell > .dialog-heading { padding: 17px 16px 14px; }
  .agent-fleet-upgrade-description { padding: 13px 16px 0; }
  .agent-fleet-upgrade-live { margin-inline: 16px; }
  .agent-fleet-upgrade-body { padding: 15px 16px 18px; }
  .agent-fleet-summary,
  .agent-fleet-targets { grid-template-columns: minmax(0, 1fr); }
  .agent-fleet-plan-actions,
  .agent-fleet-upgrade-actions { align-items: stretch; flex-direction: column; }
  .agent-fleet-plan-actions .primary-action,
  .agent-fleet-upgrade-actions button { width: 100%; }
  .agent-fleet-plan-buttons { width: 100%; align-items: stretch; flex-direction: column-reverse; }
  .agent-fleet-plan-buttons button { width: 100%; }
  .agent-fleet-upgrade-actions #agent-fleet-upgrade-cancel { margin-right: 0; }
}

/* PANEL SERVER HOME ----------------------------------------------------- */
.home-workspace,
.nodes-workspace { min-width: 0; }

.home-heading {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 2px 12px;
}
.home-heading h2 { margin-top: 3px; font-size: clamp(1.35rem, 1.8vw, 1.7rem); letter-spacing: -.035em; }
.home-heading p { margin-top: 4px; color: #8f9ba8; font-size: .76rem; }

.panel-server-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px;
}
.panel-server-metrics .panel-metric-card { min-width: 0; }
.panel-server-metrics .summary-copy { min-width: 0; flex: 1; }
.panel-server-metrics #panel-network-rx {
  overflow: visible;
  font-size: clamp(1rem, 1.25vw, 1.35rem);
  letter-spacing: -.035em;
  text-overflow: clip;
}
.panel-server-metrics progress {
  width: 100%;
  height: 5px;
  display: block;
  margin-top: 9px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  appearance: none;
  color: #34d399;
  background: #303946;
}
.panel-server-metrics progress::-webkit-progress-bar { border-radius: inherit; background: #303946; }
.panel-server-metrics progress::-webkit-progress-value { border-radius: inherit; background: linear-gradient(90deg, #22d3ee, #34d399); }
.panel-server-metrics progress::-moz-progress-bar { border-radius: inherit; background: linear-gradient(90deg, #22d3ee, #34d399); }
.panel-server-metrics progress.is-warning::-webkit-progress-value { background: #f2c14e; }
.panel-server-metrics progress.is-warning::-moz-progress-bar { background: #f2c14e; }
.panel-server-metrics progress.is-critical::-webkit-progress-value { background: #fb7185; }
.panel-server-metrics progress.is-critical::-moz-progress-bar { background: #fb7185; }

.panel-server-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  gap: 10px;
  margin-top: 10px;
}
.panel-server-card {
  min-width: 0;
  padding: 17px;
  border: 1px solid #2c333d;
  border-radius: 12px;
  background: #151b22;
}
.panel-server-card > header { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid #2c333d; }
.panel-server-card > header > div { min-width: 0; }
.panel-server-card h3 { color: #edf3f6; font-size: .95rem; }
.panel-server-card header p { margin-top: 3px; overflow: hidden; color: #7f8996; font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.panel-card-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  color: #55dff0;
  border: 1px solid rgba(34, 211, 238, .3);
  border-radius: 11px;
  background: rgba(34, 211, 238, .08);
  font-size: 1rem;
}
.panel-card-icon.is-green { color: #50ddb0; border-color: rgba(52, 211, 153, .28); background: rgba(52, 211, 153, .075); }
.panel-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-top: 12px; overflow: hidden; border: 1px solid #2a323d; border-radius: 10px; background: #2a323d; }
.panel-facts > div { min-width: 0; padding: 11px 12px; background: #182029; }
.panel-facts dt { color: #7f8996; font-size: .65rem; }
.panel-facts dd { margin: 4px 0 0; overflow: hidden; color: #dce5e9; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .73rem; text-overflow: ellipsis; white-space: nowrap; }
.panel-services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.panel-service { min-width: 0; display: grid; grid-template-columns: 9px minmax(0, 1fr); align-items: center; gap: 9px; min-height: 54px; padding: 9px 11px; border: 1px solid #29333e; border-radius: 10px; background: #182029; }
.panel-service-dot { width: 8px; height: 8px; border-radius: 50%; background: #768292; box-shadow: 0 0 0 4px rgba(118, 130, 146, .08); }
.panel-service.is-ok .panel-service-dot { background: #34d399; box-shadow: 0 0 0 4px rgba(52, 211, 153, .08); }
.panel-service.is-down .panel-service-dot { background: #fb7185; box-shadow: 0 0 0 4px rgba(251, 113, 133, .08); }
.panel-service-copy { min-width: 0; }
.panel-service strong,
.panel-service small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-service strong { color: #e5edf1; font-size: .72rem; }
.panel-service small { margin-top: 3px; color: #7f8996; font-size: .61rem; }

@media (max-width: 1180px) {
  .panel-server-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .panel-server-metrics .panel-metric-card:last-child { grid-column: 1 / -1; }
}

@media (max-width: 1020px) {
  .workspace-nav { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .panel-server-detail-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .home-heading { align-items: flex-start; flex-direction: column; }
  .home-heading .overview-health { width: 100%; min-width: 0; }
  .panel-services { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 480px) {
  .panel-server-metrics { grid-template-columns: minmax(0, 1fr); }
  .panel-server-metrics .panel-metric-card:last-child { grid-column: auto; }
  .panel-facts { grid-template-columns: minmax(0, 1fr); }
  .panel-server-card { padding: 13px; }
}

/* ---- node cards: compact layout (2026-09-14) ------------------------------ */
.node-card { padding: 9px 11px 10px; border-radius: 10px; }
.node-heading { align-items: center; gap: 8px; }
.node-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.node-title strong { font-size: .86rem; flex: 0 1 auto; }
.node-title code { margin: 0; font-size: .68rem; white-space: nowrap; flex: 0 0 auto; }
.node-tag { flex: 0 1 auto; min-width: 0; max-width: 46%; padding: 2px 7px; border-radius: 999px; font-size: .62rem; font-weight: 750; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: hsl(var(--tag-h) 85% 84%); background: hsl(var(--tag-h) 55% 32% / .42); border: 1px solid hsl(var(--tag-h) 65% 58% / .5); }
.node-card .state-pill { padding: 3px 7px; font-size: .62rem; }
.node-card > .node-reason, .node-card > .node-warning { margin-top: 5px; }
.stat-strip { margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat { min-width: 0; padding-right: 8px; }
.stat + .stat { padding-left: 8px; border-left: 1px solid var(--line); }
.stat b { display: block; font-size: .84rem; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat b small { margin-left: 3px; color: var(--muted); font-size: .66rem; font-weight: 600; }
.stat span { display: block; margin-top: 1px; color: var(--muted); font-size: .6rem; letter-spacing: .05em; text-transform: uppercase; }
.links { margin-top: 7px; display: flex; align-items: center; gap: 6px; min-width: 0; }
.links .sum { flex: 0 0 auto; color: var(--muted); font-size: .62rem; letter-spacing: .04em; text-transform: uppercase; }
.links .dots { flex: 0 0 auto; display: inline-flex; gap: 4px; }
.links .dots i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px rgba(89,224,173,.45); transition: transform .12s ease; }
.links .dots i.down { background: var(--red); box-shadow: 0 0 6px rgba(255,117,111,.45); }
.links .dots i.unknown { background: var(--amber); box-shadow: none; }
.links .dots i.backup { box-shadow: none; outline: 1px dashed rgba(180,156,255,.6); outline-offset: 1px; }
.links .dots i.is-link { cursor: pointer; }
.links .dots i:hover { transform: scale(1.35); }
.links .names { flex: 1 1 auto; min-width: 0; color: var(--muted); font-size: .64rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.links .names.is-problem { color: var(--red); }
.links .names.is-hover { color: var(--text); }
.egress-card .egress-lead { margin: 7px 0 0; gap: 8px; }
.egress-card .egress-lead strong { font-size: 1.55rem; letter-spacing: -.05em; }
.egress-card .egress-lead span { font-size: .66rem; }
.meters { margin-top: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.meters .resource { margin: 0; }
.meters .resource-head { margin-bottom: 4px; font-size: .62rem; letter-spacing: .05em; text-transform: uppercase; }
.egress-card, .relay-card { min-height: 0; }

/* ---- inventory list: role switcher + collapsible groups (2026-09-14) ------ */
.inventory-tools { flex-wrap: wrap; row-gap: 8px; }
#inventory-role-filters .filter-chip b { margin-left: 6px; padding: 1px 6px; border-radius: 999px; background: rgba(255,255,255,.07); color: inherit; font-size: .64rem; font-weight: 800; }
details.inventory-role-group { min-width: 0; }
details.inventory-role-group > summary.inventory-role-heading { list-style: none; cursor: pointer; position: sticky; top: 0; z-index: 3; background: var(--surface); }
details.inventory-role-group > summary.inventory-role-heading::-webkit-details-marker { display: none; }
details.inventory-role-group > summary.inventory-role-heading::after { content: ""; flex: 0 0 auto; width: 8px; height: 8px; margin: 0 4px 6px 10px; border-right: 2px solid #70ddea; border-bottom: 2px solid #70ddea; transform: rotate(-45deg); transition: transform .15s ease; }
details.inventory-role-group[open] > summary.inventory-role-heading::after { transform: rotate(45deg); }
details.inventory-role-group > summary.inventory-role-heading:hover h3 { color: #fff; }
details.inventory-role-group:not([open]) > summary.inventory-role-heading { border-bottom-color: transparent; }
details.inventory-role-group + details.inventory-role-group { margin-top: 10px; }

/* ---- inventory list rows: compact at every width (2026-09-14) ------------ */
.inventory-columns { display: none; }
.inventory-row.is-compact { display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-height: 0; padding: 10px 12px 11px; }
.inventory-row.is-compact.is-lifecycle-guarded { padding-inline: 12px; }
.inventory-row.is-compact .inv-head { display: flex; align-items: center; gap: 8px; min-width: 0; padding-right: 30px; }
.inventory-row.is-compact .inv-label { flex: 0 1 auto; min-width: 0; overflow: hidden; font-size: .9rem; letter-spacing: -.01em; text-overflow: ellipsis; white-space: nowrap; }
.inventory-row.is-compact .node-tag { flex: 0 1 auto; max-width: 34%; }
.inventory-row.is-compact .inv-version { flex: 0 0 auto; margin: 0; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .64rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.inventory-row.is-compact .inventory-state { flex: 0 0 auto; margin-left: auto; align-self: center; }
.inventory-row.is-compact .inventory-state .state-pill { max-width: 150px; padding: 3px 7px; font-size: .6rem; }
.inventory-row.is-compact .inv-open { flex: 0 0 auto; color: #63e3f6; font-size: 1.1rem; font-weight: 800; line-height: 1; }
.inventory-row.is-compact .inv-meta { display: block; min-width: 0; overflow: hidden; color: #77828f; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .64rem; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.inventory-row.is-compact .inv-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding-top: 6px; border-top: 1px solid rgba(255,255,255,.06); }
.inventory-row.is-compact .inv-stats .stat { display: block; min-width: 0; padding-right: 8px; }
.inventory-row.is-compact .inv-stats .stat + .stat { padding-left: 8px; border-left: 1px solid rgba(255,255,255,.06); }
.inventory-row.is-compact .inv-stats .stat b { display: block; font-size: .86rem; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.inventory-row.is-compact .inv-stats .stat b small { margin-left: 3px; color: var(--muted); font-size: .64rem; font-weight: 600; }
.inventory-row.is-compact .inv-stats .stat > span { display: block; margin-top: 1px; color: var(--muted); font-size: .58rem; letter-spacing: .06em; text-transform: uppercase; }
.inventory-row.is-compact .inv-links { display: flex; align-items: center; gap: 6px; min-width: 0; }
.inventory-row.is-compact .inv-links .sum { flex: 0 0 auto; color: var(--muted); font-size: .6rem; letter-spacing: .06em; text-transform: uppercase; }
.inventory-row.is-compact .inv-links .dots { flex: 0 0 auto; display: inline-flex; gap: 4px; }
.inventory-row.is-compact .inv-links .dots i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px rgba(89,224,173,.4); transition: transform .12s ease; }
.inventory-row.is-compact .inv-links .dots i.backup { background: var(--violet); box-shadow: none; }
.inventory-row.is-compact .inv-links .dots i.is-link { cursor: pointer; }
.inventory-row.is-compact .inv-links .dots i:hover { transform: scale(1.35); }
.inventory-row.is-compact .inv-links .names { flex: 1 1 auto; min-width: 0; overflow: hidden; color: var(--muted); font-size: .66rem; text-overflow: ellipsis; white-space: nowrap; }
.inventory-row.is-compact .inv-links .names.is-hover { color: var(--text); }
.inventory-row-surface .inventory-quick-edit-open { position: absolute; top: 8px; right: 36px; z-index: 2; width: auto; min-height: 0; margin: 0; padding: 3px 7px; border-radius: 7px; font-size: .62rem; line-height: 1.4; }
@media (max-width: 480px) {
  .inventory-row.is-compact .inv-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 6px; }
  .inventory-row.is-compact .inv-stats .stat:nth-child(3) { padding-left: 0; border-left: 0; }
  .inventory-row.is-compact .node-tag { max-width: 28%; }
}

/* ---- layout pass: phone «Ноды» header/filters, two-column desktop (2026-09-14) ---- */
.only-narrow { display: none; }
.btn-count { margin-left: 6px; padding: 1px 6px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: inherit; font-size: .64rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.primary-action .btn-count { background: rgba(4, 19, 23, .16); }
.settings-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.settings-grid > .panel { margin-top: 0; }
/* The short panels stack inside their own column, so the tall one next to them
   does not push them apart: a grid row is as tall as its tallest item. */
.settings-column { min-width: 0; display: grid; gap: 14px; align-content: start; }
.settings-column > .panel { margin-top: 0; }
.telegram-panel { display: grid; gap: 14px; }
.telegram-targets { display: grid; gap: 6px; }
.telegram-target { display: grid; gap: 6px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.02); }
.telegram-target.is-off { opacity: .62; }
.telegram-target-top { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.telegram-target-top strong { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .78rem; font-weight: 750; }
.telegram-target-where { flex: 0 0 auto; color: var(--muted); font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .64rem; }
.telegram-target-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.telegram-chip { display: inline-flex; align-items: center; padding: 2px 7px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.02); color: var(--muted); font-size: .62rem; font-weight: 700; }
.telegram-chip.is-kind { color: var(--cyan); border-color: rgba(84,215,229,.32); }
.telegram-chip.is-role { color: var(--violet); border-color: rgba(139,124,255,.32); }
.telegram-target-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.telegram-target-actions button { min-height: 28px; padding: 4px 9px; border: 1px solid var(--line); border-radius: 8px; color: var(--text); background: rgba(255,255,255,.04); font: inherit; font-size: .64rem; font-weight: 700; cursor: pointer; }
.telegram-target-actions button:disabled { opacity: .46; cursor: not-allowed; }
.telegram-target-actions button.is-danger { color: #ffaaa6; border-color: rgba(255,117,111,.32); }
.telegram-choices { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.telegram-choice { min-width: 0; display: grid; gap: 4px; margin: 0; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; }
.telegram-choice legend { padding: 0 4px; color: var(--muted); font-size: .64rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
/* rows1 left `bottom: 9px` from the base rule in force, so the pencil button stretched from top to bottom */
.inventory-row-surface .inventory-quick-edit-open { bottom: auto; }
@media (min-width: 1180px) {
  .inventory-role-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
@media (max-width: 760px) {
  .only-wide { display: none; }
  .only-narrow { display: inline; }
  .inventory-heading { flex-direction: column; align-items: stretch; gap: 10px; }
  .inventory-heading-actions { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-items: stretch; }
  .inventory-heading-actions #automation-state { grid-column: 1 / -1; justify-self: start; max-width: 100%; padding: 4px 9px; font-size: .72rem; font-weight: 700; letter-spacing: 0; text-transform: none; }
  .inventory-heading-actions #node-wizard-open { grid-column: 1 / -1; }
  .inventory-heading-actions button { width: 100%; min-width: 0; min-height: 44px; margin: 0; padding-inline: 6px; font-size: .74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .inventory-heading-actions .btn-count { margin-left: 4px; padding: 1px 5px; font-size: .6rem; }
  .inventory-heading-actions button[hidden] { display: none; }
  .inventory-panel > .form-hint { display: none; }
  #inventory-access-note { margin-top: 10px; overflow: hidden; color: #77828f; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .66rem; text-overflow: ellipsis; white-space: nowrap; }
  .inventory-tools { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 12px; }
  .inventory-search input { min-height: 44px; }
  #inventory-filters, #inventory-role-filters { width: 100%; display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; }
  #inventory-filters .filter-chip, #inventory-role-filters .filter-chip { min-width: 0; min-height: 36px; justify-content: center; padding: 0 6px; font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #inventory-role-filters .filter-chip b { margin-left: 4px; padding: 1px 5px; }
  details.inventory-role-group > summary.inventory-role-heading { top: 70px; align-items: center; padding: 6px 4px 8px; }
  .inventory-row.is-compact .inv-label { flex: 1 1 auto; }
  /* pencil only on phones, and keep the state pill clear of it */
  .inventory-row-surface .inventory-quick-edit-open { width: 26px; height: 26px; padding: 0; display: grid; place-items: center; font-size: 0; }
  .inventory-row-surface .inventory-quick-edit-open::before { content: "✎"; font-size: .8rem; line-height: 1; }
  .inventory-row-surface:has(> .inventory-quick-edit-open) .inventory-row.is-compact .inv-head { padding-right: 66px; }
  .node-metrics-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .node-metrics-strip .summary-card:last-child { grid-column: 1 / -1; }
  .node-metrics-strip .summary-card { min-height: 0; gap: 10px; padding: 11px 12px; }
  .node-metrics-strip .summary-icon { width: 36px; height: 36px; border-radius: 10px; }
  .node-metrics-strip .summary-card strong { font-size: 1.12rem; }
  .node-metrics-strip .summary-card .eyebrow { font-size: .68rem; }
  .panel-server-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .panel-server-metrics .panel-metric-card:last-child { grid-column: 1 / -1; }
  .freshness-banner { min-height: 0; padding: 9px 12px; }
  .topology-batch-mobile-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 0 10px 10px; }
  .topology-batch-mobile-option { min-height: 50px; grid-template-columns: minmax(0, 1fr) 40px; gap: 6px; padding: 6px 6px 6px 9px; border: 1px solid rgba(255, 255, 255, .07); border-radius: 9px; }
  .dns-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dns-actions button { min-width: 0; }
  .dns-actions button:only-child { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .inventory-row.is-compact .inv-version { display: none; }
  .inventory-row.is-compact .node-tag { max-width: 22%; }
  .inventory-row.is-compact .inv-label { font-size: .86rem; }
  .inventory-row.is-compact .inventory-state .state-pill { padding: 2px 6px; font-size: .56rem; }
  .panel-server-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .panel-server-metrics .panel-metric-card:last-child { grid-column: 1 / -1; }
  .node-metrics-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 390px) {
  #inventory-filters, #inventory-role-filters { display: grid; grid-template-columns: none; }
}

/* ---- quick-edit pencil: icon at the far right on every width, head keeps clear (mobile2) ---- */
.inventory-row-surface .inventory-quick-edit-open { top: 9px; right: 10px; bottom: auto; width: 26px; height: 26px; min-height: 0; margin: 0; padding: 0; display: grid; place-items: center; border-radius: 7px; font-size: 0; line-height: 1; }
.inventory-row-surface .inventory-quick-edit-open::before { content: "\270E"; font-size: .8rem; line-height: 1; }
.inventory-row-surface:has(> .inventory-quick-edit-open) .inventory-row.is-compact .inv-head { padding-right: 42px; }

/* ---- phone fixes after the live walk-through (mobile3) ---- */
.compact-action:not(.primary-action):not(.secondary-action):not(.danger-action):not(.filter-chip) { border: 1px solid var(--line-strong); border-radius: 9px; color: #dce3f2; background: rgba(255, 255, 255, .045); font-weight: 720; cursor: pointer; white-space: nowrap; }
.compact-action:not(.primary-action):not(.secondary-action):not(.danger-action):not(.filter-chip):hover { border-color: rgba(34, 211, 238, .5); background: rgba(34, 211, 238, .08); }
.compact-action:not(.primary-action):not(.secondary-action):not(.danger-action):not(.filter-chip):disabled { opacity: .5; cursor: not-allowed; }
.dns-settings-form .field-grid > div > label:not(.check-field) { display: block; margin-bottom: 6px; color: #bac2cb; font-size: .82rem; }
.dns-settings-form .field-grid input:not([type="checkbox"]):not([type="radio"]),
.dns-settings-form .field-grid select { width: 100%; box-sizing: border-box; min-height: 42px; }
.node-metrics-strip .summary-copy { min-width: 0; flex: 1 1 auto; }
@media (max-width: 1020px) {
  .topology-batch-footer { bottom: calc(76px + env(safe-area-inset-bottom)); }
}
@media (max-width: 760px) {
  .panel > .panel-heading:not(.inventory-heading) { flex-direction: column; align-items: flex-start; gap: 8px; }
  .panel > .panel-heading:not(.inventory-heading) > .state-pill { max-width: 100%; }
  .panel > .panel-heading:not(.inventory-heading) .legend { flex-wrap: wrap; }
  #inventory-role-filters { grid-auto-flow: row; grid-template-columns: .8fr 1fr 1.3fr 1fr; }
  .dns-actions button { white-space: normal; line-height: 1.25; }
}
@media (max-width: 390px) {
  #inventory-role-filters { grid-template-columns: .8fr 1fr 1.3fr 1fr; }
}

/* ---- phone polish: role chips, editor footer, relay options (mobile4) ---- */
@media (max-width: 760px) {
  #inventory-role-filters { grid-template-columns: .75fr 1fr 1.25fr 1.1fr; }
  #inventory-role-filters .filter-chip { padding: 0 4px; }
  .inventory-editor-footer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .inventory-editor-footer > details, .inventory-editor-footer > .primary-action { grid-column: 1 / -1; }
  .inventory-editor-footer button { width: 100%; min-width: 0; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .inventory-editor-footer > details[hidden] { display: none; }
  .route-editor-options { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .route-editor-row { min-width: 0; padding: 8px; }
  .route-editor-row select { max-width: 100%; }
}
@media (max-width: 390px) {
  #inventory-role-filters { grid-template-columns: .75fr 1fr 1.25fr 1.1fr; }
}

/* ---- node editor: compact desktop card (editor1) ---- */
@media (min-width: 761px) {
  .node-editor-dialog { width: min(1060px, calc(100vw - 32px)); }
  /* the shell used to be stretched to min(980px, 100dvh - 40px); size it to content */
  .node-editor-shell { height: auto; min-height: 0; max-height: calc(100dvh - 28px); }
  .node-editor-heading { padding: 9px 16px; }
  .node-editor-heading-copy { gap: 10px; align-items: center; }
  .node-editor-mark { width: 32px; height: 32px; border-radius: 9px; font-size: 1rem; }
  .node-editor-heading .eyebrow { font-size: .6rem; letter-spacing: .12em; }
  .node-editor-heading-copy h2 { margin-top: 0; font-size: 1.05rem; line-height: 1.2; }
  .node-editor-subtitle { margin-top: 1px; font-size: .72rem; }
  .node-editor-heading .dialog-close { width: 32px; height: 32px; border-radius: 9px; font-size: 1.1rem; }
  .node-editor-scroll { padding: 12px 16px 14px; }
  .node-editor-layout { grid-template-columns: minmax(0, 1.3fr) minmax(300px, .7fr); gap: 10px; }
  .node-editor-primary, .node-editor-sidebar { gap: 10px; }

  /* summary: one strip instead of four cards */
  .node-editor-summary { display: flex; gap: 0; overflow: hidden; border: 1px solid #303842; border-radius: 9px; background: #1a2028; }
  .node-editor-summary .node-editor-metric { flex: 1 1 0; min-width: 0; min-height: 0; display: flex; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 7px; padding: 7px 11px; border: 0; border-right: 1px solid #303842; border-radius: 0; background: transparent; }
  .node-editor-summary .node-editor-metric:last-child { border-right: 0; }
  .node-editor-summary .node-editor-metric > span { width: 100%; font-size: .62rem; letter-spacing: .04em; text-transform: uppercase; }
  .node-editor-summary .node-editor-metric > strong { margin: 0; font-size: .9rem; }
  .node-editor-summary .node-editor-metric > small { margin: 0; font-size: .64rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* sections: title only, no icons, no subtitles */
  .node-editor-section { padding: 10px 13px 11px; border-radius: 9px; }
  .node-editor-section-heading { gap: 0; padding-bottom: 6px; }
  .node-editor-section-icon { display: none; }
  .node-editor-section-heading h3 { font-size: .86rem; }
  .node-editor-section-heading p { display: none; }
  /* explanatory copy goes away on desktop; errors and stale notes stay */
  .node-editor-main-section .field-help,
  .node-editor-main-section .form-hint,
  .node-editor-scroll > .inventory-save-note { display: none; }
  /* «Нода» duplicates the summary state, «Система» duplicates the CPU/RAM cells */
  .node-editor-health .signal-item:nth-child(1),
  .node-editor-health .signal-item:nth-child(4) { display: none; }

  /* form */
  .node-editor-main-section .inventory-edit-fields { padding-top: 8px; }
  .node-editor-main-section .field-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 8px; }
  .node-editor-main-section label,
  .node-editor-main-section .route-editor legend { margin-bottom: 3px; font-size: .7rem; }
  .node-editor-main-section input:not([type="checkbox"]):not([type="radio"]),
  .node-editor-main-section select { min-height: 32px; padding: 5px 9px; border-radius: 7px; font-size: .8rem; }
  .node-editor-main-section .field-help { min-height: 0; margin-top: 2px; font-size: .64rem; line-height: 1.3; }
  .node-editor-main-section .check-field { min-height: 0; margin-top: 6px; padding: 6px 9px; border-radius: 7px; font-size: .74rem; }
  .node-editor-main-section .check-field input { width: 15px; height: 15px; }
  .node-editor-main-section .form-hint { margin-top: 6px; font-size: .64rem; line-height: 1.35; }
  .node-editor-main-section .haproxy-settings { margin-top: 8px; padding: 7px 10px; border-radius: 7px; }
  .node-editor-main-section .haproxy-settings > summary { font-size: .74rem; }

  /* relays: two columns of one-line rows */
  .node-editor-routes { margin-top: 10px; }
  .node-editor-routes .route-editor-options { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
  .node-editor-routes .route-editor-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; min-height: 32px; margin: 0; gap: 7px; padding: 3px 6px 3px 8px; border-radius: 7px; }
  .node-editor-routes .route-editor-row > input { width: 15px; height: 15px; }
  .node-editor-routes .route-editor-row > span { min-width: 0; display: flex; align-items: baseline; gap: 6px; overflow: hidden; }
  .node-editor-routes .route-editor-row strong { display: inline; flex: 0 1 auto; min-width: 0; max-width: 64%; overflow: hidden; font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
  .node-editor-routes .route-editor-row > span > span { display: inline; flex: 1 1 auto; min-width: 0; overflow: hidden; color: #7f8b98; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .6rem; text-overflow: ellipsis; white-space: nowrap; }
  .node-editor-routes .route-editor-row .route-mode { width: auto; min-width: 0; min-height: 26px; padding: 2px 18px 2px 6px; font-size: .64rem; }

  /* sidebar */
  .node-editor-health { gap: 4px; padding-top: 6px; }
  .node-editor-health .signal-item { min-height: 0; display: grid; grid-template-columns: 8px minmax(0, 1fr); align-items: center; gap: 8px; padding: 5px 9px; border-radius: 7px; }
  .node-editor-health .signal-item > div { min-width: 0; display: flex; align-items: baseline; gap: 6px; overflow: hidden; }
  .node-editor-health .signal-item strong { flex: 0 0 auto; font-size: .74rem; }
  .node-editor-health .signal-item span { flex: 1 1 auto; min-width: 0; margin: 0; overflow: hidden; font-size: .68rem; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
  .node-editor-system-grid { gap: 4px; margin-top: 6px; }
  .node-editor-system-grid .node-editor-metric { min-height: 0; padding: 5px 8px; border-radius: 7px; }
  .node-editor-system-grid .node-editor-metric > span { font-size: .6rem; }
  .node-editor-system-grid .node-editor-metric > strong { margin-top: 1px; font-size: .76rem; }
  .node-editor-system-grid .node-editor-metric > small { display: none; }
  .node-editor-connections { gap: 4px; padding-top: 6px; }
  .node-editor-connection { padding: 5px 9px; border-radius: 7px; }
  .node-editor-connection strong { font-size: .74rem; }
  .node-editor-connection span { font-size: .66rem; }
  .node-editor-empty { margin-top: 6px; font-size: .72rem; }
  .node-editor-history { padding-top: 6px; }
  .node-editor-history .history-chart svg { min-height: 56px; }
  .node-editor-actions { gap: 6px; padding-top: 8px; }
  .node-editor-action { min-height: 34px; padding: 6px 10px; font-size: .74rem; }
  .node-editor-scroll > .inventory-save-note { margin-top: 8px; font-size: .64rem; }

  /* footer */
  .inventory-editor-footer { gap: 8px; padding: 9px 16px; }
  .inventory-editor-footer button { min-width: 0; min-height: 36px; padding: 7px 14px; font-size: .76rem; }
  .node-editor-more > summary { font-size: .76rem; }
}

/* ---- node editor: relay name never shrinks, the address does (editor2) ---- */
@media (min-width: 761px) {
  .node-editor-routes .route-editor-row strong { flex: 0 0 auto; max-width: 66%; }
  .node-editor-routes .route-editor-row > span > span { flex: 1 1 0; }
}

/* ---- node editor: history under the form, compact charts (editor3) ---- */
@media (min-width: 761px) {
  /* the two columns become one grid so «История» can span the full width */
  .node-editor-primary, .node-editor-sidebar { display: contents; }
  .node-editor-layout { grid-template-columns: minmax(0, 1.3fr) minmax(300px, .7fr); grid-template-rows: auto auto 1fr auto; grid-template-areas: "summary summary" "main health" "main connections" "history history"; align-items: start; gap: 10px; }
  #inventory-editor-summary { grid-area: summary; }
  .node-editor-main-section { grid-area: main; }
  .node-editor-section:has(> #inventory-editor-health) { grid-area: health; }
  .node-editor-section:has(> #inventory-editor-connections) { grid-area: connections; }
  #inventory-editor-history-section { grid-area: history; }
  #inventory-editor-history-section[hidden] { display: none; }
  /* charts: three per row, one-line head, short sparkline */
  .node-editor-history { padding-top: 4px; }
  .node-editor-history .charts-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 0; }
  .node-editor-history .charts-grid .history-chart:last-child { grid-column: auto; }
  .node-editor-history .history-chart { padding: 6px 9px 5px; border-radius: 8px; }
  .node-editor-history .history-head { align-items: baseline; gap: 8px; font-size: .7rem; }
  .node-editor-history .history-head strong { flex: 0 0 auto; white-space: nowrap; }
  .node-editor-history .history-head span { flex: 1 1 auto; min-width: 0; overflow: hidden; font-size: .62rem; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
  .node-editor-history .history-chart svg { height: 44px; min-height: 0; margin: 4px 0 1px; }
  .node-editor-history .history-bounds { font-size: .58rem; }
  .node-editor-history .chart-empty, .node-editor-history .chart-loading { padding: 10px 0; font-size: .66rem; }
}

/* ===== Дизайн-язык Mantine на наших цветах ================================

   Панель Remnawave, с которой просили взять вид, построена на Mantine (MIT).
   Её код под AGPL-3.0 и сюда не переносится: берётся сам язык — шкала
   радиусов, отступов, высот контролов и типографики, — а палитра остаётся
   наша.  Слой идёт последним: всё, что написано выше «DENSE CONTROL ROOM»,
   этим слоем перебивается.

   Шкалы Mantine, к которым всё приводится:
     радиусы   sm 6 · md 8 · lg 12 · xl 16
     отступы   xs 6 · sm 10 · md 14 · lg 18 · xl 24
     контролы  xs 28 · sm 34 · md 40
     текст     xs 11 · sm 12.5 · md 14 · lg 16
   ========================================================================= */

:root {
  --mn-radius-sm: 6px;
  --mn-radius-md: 8px;
  --mn-radius-lg: 12px;
  --mn-radius-xl: 16px;
  --mn-space-xs: 6px;
  --mn-space-sm: 10px;
  --mn-space-md: 14px;
  --mn-space-lg: 18px;
  --mn-space-xl: 24px;
  --mn-control-xs: 28px;
  --mn-control-sm: 34px;
  --mn-control-md: 40px;
  --mn-text-xs: .69rem;
  --mn-text-sm: .78rem;
  --mn-text-md: .875rem;
  --mn-text-lg: 1rem;
  /* Поверхности: фон → карточка → выделенная строка, каждая на ступень
     светлее предыдущей, граница одна на всех. */
  --mn-surface: rgba(255, 255, 255, .022);
  --mn-surface-strong: rgba(255, 255, 255, .045);
  --mn-border: rgba(226, 232, 255, .1);
  --mn-border-strong: rgba(226, 232, 255, .18);
  /* Кольцо фокуса — один приём на всю панель, цвет наш. */
  /* Кольцо должно быть видно: прежние .16 давали контраст 1.4:1 к фону. */
  --mn-ring: 0 0 0 3px rgba(117, 232, 248, .75);
  --mn-ring-cyan: 0 0 0 3px rgba(117, 232, 248, .75);
}

/* --- поверхности ------------------------------------------------------- */
.panel {
  padding: var(--mn-space-lg);
  border: 1px solid var(--mn-border);
  border-radius: var(--mn-radius-xl);
  background: rgba(8, 14, 27, .72);
}
.panel-heading { gap: var(--mn-space-sm); }
.panel h2 { font-size: 1.06rem; letter-spacing: -.01em; }
.panel h3 { font-size: var(--mn-text-md); }
.eyebrow { font-size: var(--mn-text-xs); letter-spacing: .14em; }

/* --- кнопки ------------------------------------------------------------
   Один силуэт на все виды: высота, радиус и типографика общие, разница
   только в заливке.  До этого каждая кнопка несла свои числа, и в одном
   ряду стояли контролы разной высоты. */
.primary-action,
.secondary-action,
.danger-action,
.compact-action,
.inventory-action {
  min-height: var(--mn-control-sm);
  padding: 0 var(--mn-space-md);
  border-radius: var(--mn-radius-md);
  font-size: var(--mn-text-sm);
  font-weight: 600;
  letter-spacing: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mn-space-xs);
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.primary-action { border: 1px solid transparent; color: #04231d; background: var(--green); }
.primary-action:hover:not(:disabled) { background: #6ae7ba; }
.secondary-action { border: 1px solid var(--mn-border-strong); color: var(--text); background: var(--mn-surface); }
.secondary-action:hover:not(:disabled) { border-color: rgba(89, 224, 173, .45); background: var(--mn-surface-strong); }
.compact-action:not(.primary-action):not(.secondary-action):not(.danger-action):not(.filter-chip) {
  min-height: var(--mn-control-xs);
  padding: 0 var(--mn-space-sm);
  border: 1px solid var(--mn-border);
  border-radius: var(--mn-radius-sm);
  color: var(--muted);
  background: var(--mn-surface);
  font-size: var(--mn-text-xs);
}
.compact-action:not(.primary-action):not(.secondary-action):not(.danger-action):not(.filter-chip):hover:not(:disabled) {
  border-color: var(--mn-border-strong);
  color: var(--text);
  background: var(--mn-surface-strong);
}
.danger-action { border: 1px solid rgba(255, 117, 111, .34); color: #ff9aac; background: rgba(255, 117, 111, .07); }
.danger-action:hover:not(:disabled) { border-color: rgba(255, 117, 111, .5); background: rgba(255, 117, 111, .12); }
.primary-action:focus-visible,
.secondary-action:focus-visible,
.danger-action:focus-visible,
.compact-action:focus-visible,
.inventory-action:focus-visible { outline: none; box-shadow: var(--mn-ring); }
.primary-action:disabled,
.secondary-action:disabled,
.danger-action:disabled,
.compact-action:disabled,
.inventory-action:disabled { opacity: .45; cursor: not-allowed; }

/* --- поля ---------------------------------------------------------------
   Правило одно на всю панель: раньше поля стилизовались по форме, и там, где
   форму забыли, браузер рисовал свой серый прямоугольник. */
.panel input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.panel select,
.panel textarea,
.dialog input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.dialog select,
.dialog textarea {
  min-height: var(--mn-control-sm);
  padding: 7px var(--mn-space-sm);
  border: 1px solid var(--mn-border);
  border-radius: var(--mn-radius-md);
  color: var(--text);
  background: rgba(4, 8, 16, .6);
  font: inherit;
  font-size: var(--mn-text-sm);
}
.panel textarea, .dialog textarea { min-height: 72px; padding: var(--mn-space-sm); line-height: 1.45; }
.panel input:hover:not(:disabled), .panel select:hover:not(:disabled),
.dialog input:hover:not(:disabled), .dialog select:hover:not(:disabled) { border-color: var(--mn-border-strong); }
.panel input:focus, .panel select:focus, .panel textarea:focus,
.dialog input:focus, .dialog select:focus, .dialog textarea:focus {
  border-color: rgba(89, 224, 173, .5);
  outline: none;
  box-shadow: var(--mn-ring);
}
.panel input::placeholder, .panel textarea::placeholder,
.dialog input::placeholder, .dialog textarea::placeholder { color: #66718c; }
.panel input:disabled, .panel select:disabled,
.dialog input:disabled, .dialog select:disabled { color: #79839a; background: rgba(4, 8, 16, .35); cursor: not-allowed; }
.panel label, .dialog label { font-size: var(--mn-text-sm); }
.field-help, .form-hint { font-size: var(--mn-text-xs); line-height: 1.45; }

/* --- бейджи -------------------------------------------------------------
   Badge: один рост, одна типографика, точка-индикатор слева. */
.state-pill {
  min-height: 22px;
  padding: 0 var(--mn-space-sm);
  border-radius: 999px;
  font-size: var(--mn-text-xs);
  font-weight: 650;
  letter-spacing: .02em;
  text-transform: none;
}
.filter-chip {
  min-height: var(--mn-control-xs);
  padding: 0 var(--mn-space-sm);
  border-radius: var(--mn-radius-sm);
  font-size: var(--mn-text-xs);
  font-weight: 600;
}

/* --- карточки и строки -------------------------------------------------- */
.acme-cert-card,
.telegram-target,
.operation-row,
.event-row,
.inventory-row {
  border-radius: var(--mn-radius-lg);
  border-color: var(--mn-border);
  background: var(--mn-surface);
}
.acme-cert-card, .telegram-target { padding: var(--mn-space-sm) var(--mn-space-md); }

/* --- диалоги ------------------------------------------------------------ */
.dialog, .node-dialog, .operation-dialog { border-radius: var(--mn-radius-xl); border-color: var(--mn-border); }
.dialog-shell { padding: var(--mn-space-xl); }
.dialog-heading h2 { font-size: 1.14rem; }
.dialog-close { width: var(--mn-control-md); height: var(--mn-control-md); border-radius: var(--mn-radius-md); }

/* --- мелочи ------------------------------------------------------------- */
.empty-state { padding: var(--mn-space-md) 0; font-size: var(--mn-text-sm); }
.form-error { border-radius: var(--mn-radius-md); font-size: var(--mn-text-sm); }

/* --- раздел «Ноды»: шапка одна, список не липнет к фильтрам -------------- */
/* Полосы показателей убраны совсем: заголовок раздела теперь единственный,
   в панели инвентаря остались только действия — прижимаем их вправо. */
.inventory-heading { justify-content: flex-end; }
.inventory-list { margin-top: var(--mn-space-lg); }

/* --- возврат к началу ---------------------------------------------------- */
/* Списки нод и операций длинные, а навигация — наверху: кнопка появляется
   после первого экрана и одинаково работает на телефоне и на десктопе. */
.scroll-top {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 40;
  width: var(--mn-control-md);
  height: var(--mn-control-md);
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--mn-border);
  border-radius: 999px;
  color: var(--text);
  background: var(--surface-2);
  box-shadow: var(--shadow);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, transform .15s ease;
}
.scroll-top:hover { border-color: var(--line-strong); color: #fff; transform: translateY(-1px); }
.scroll-top:focus-visible { outline: none; box-shadow: var(--mn-ring); }
.scroll-top[hidden] { display: none; }
@media (max-width: 760px) {
  .scroll-top { width: 44px; height: 44px; }
}

/* --- статистика выходов над списком нод ---------------------------------- */
/* Одна строка вместо пяти карточек: онлайн, трафик и соединения по выходам. */
.exit-stats {
  margin-top: var(--mn-space-md);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--mn-space-sm);
  padding: var(--mn-space-sm) var(--mn-space-md);
  border: 1px solid var(--mn-border);
  border-radius: var(--mn-radius-lg);
  background: var(--mn-surface);
}
.exit-stats > div { min-width: 0; display: grid; gap: 1px; }
.exit-stats span {
  color: var(--muted);
  font-size: var(--mn-text-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.exit-stats strong {
  color: var(--text);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.exit-stats small {
  overflow: hidden;
  color: var(--muted);
  font-size: .62rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.exit-stats.workspace-section-hidden { display: none; }
@media (max-width: 760px) {
  .exit-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--mn-space-sm); }
}

/* --- «История»: плотнее на один экран ------------------------------------ */
/* Раздел читают сверху вниз и целиком, поэтому здесь важнее сколько строк
   помещается, а не воздух между ними. */
.operations-panel, .details-grid > .panel { padding: var(--mn-space-md) var(--mn-space-lg); }
.operations-copy { margin-top: var(--mn-space-xs); font-size: var(--mn-text-xs); }
.operations-tallies { margin-top: var(--mn-space-sm); gap: var(--mn-space-xs); }
.operations-tally { padding: 3px var(--mn-space-sm); font-size: var(--mn-text-xs); }
.operations-list { margin-top: var(--mn-space-sm); gap: 4px; }
.operation-row { min-height: 0; padding: 7px 11px 7px 34px; gap: var(--mn-space-sm); }
.operation-row::before { left: 9px; }
.operation-meter { height: 3px; margin-top: 4px; }
.details-grid { margin-top: var(--mn-space-sm); gap: var(--mn-space-sm); }
.events-list { margin-top: var(--mn-space-sm); display: grid; gap: 4px; }
.event-row { min-height: 0; padding: 6px 11px; }

/* --- «История»: операции и диагностика рядом ----------------------------- */
/* На широком экране правая колонка с событиями стояла под списком операций,
   и до неё нужно было прокрутить весь список. Обёртка ставит их рядом; на
   узком — прежний порядок в одну колонку. */
.history-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--mn-space-sm);
  align-items: start;
}
.history-grid > .panel, .history-grid > .details-grid { margin-top: 0; }
@media (min-width: 1180px) {
  .history-grid { grid-template-columns: minmax(0, 1.5fr) minmax(320px, .9fr); }
  /* Внутри узкой колонки у «Диагностики» своя сетка не нужна. */
  .history-grid > .details-grid { grid-template-columns: minmax(0, 1fr); }
}

/* --- нижнее меню на телефоне: прижато к краю, кнопки крупнее ------------- */
/* Плавающая «таблетка» с отступом снизу прыгала при каждом изменении высоты
   вьюпорта — адресная строка браузера то появляется, то уходит. Прижатая к
   краю панель этого движения не показывает. */
@media (max-width: 1020px) {
  .workspace-nav {
    left: 0;
    right: 0;
    bottom: 0;
    padding: 5px 6px calc(5px + env(safe-area-inset-bottom));
    border-width: 1px 0 0;
    border-radius: 0;
    background: #0b1119;
    box-shadow: 0 -14px 34px rgba(0, 0, 0, .5);
    backdrop-filter: none;
  }
  .workspace-nav a {
    min-height: 54px;
    gap: 3px;
    padding: 6px 4px;
    border-radius: var(--mn-radius-md);
    font-weight: 700;
  }
  .workspace-nav a span:last-child { font-size: .76rem; font-weight: 700; }
  .workspace-nav .nav-glyph { font-size: 1.2rem; }
  body { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
  /* Кнопке возврата наверх нужно место над меню. */
  .scroll-top { bottom: calc(78px + env(safe-area-inset-bottom)); }
}
@media (max-width: 480px) {
  .workspace-nav a { min-height: 52px; padding: 5px 2px; }
  .workspace-nav a span:last-child { font-size: .7rem; }
}

/* --- вкладки внутри раздела ---------------------------------------------- */
/* «Настройки» — четыре панели подряд, и до DNS приходилось прокручивать мимо
   трёх других. Вкладки показывают по одной. */
.section-tabs {
  margin-top: var(--mn-space-md);
  display: flex;
  flex-wrap: wrap;
  gap: var(--mn-space-xs);
  padding: 4px;
  border: 1px solid var(--mn-border);
  border-radius: var(--mn-radius-lg);
  background: var(--mn-surface);
}
.section-tabs.workspace-section-hidden { display: none; }
.section-tab {
  min-height: var(--mn-control-sm);
  flex: 1 1 auto;
  padding: 0 var(--mn-space-md);
  border: 1px solid transparent;
  border-radius: var(--mn-radius-md);
  color: var(--muted);
  background: transparent;
  font: inherit;
  font-size: var(--mn-text-sm);
  font-weight: 650;
  cursor: pointer;
}
.section-tab:hover { color: var(--text); }
.section-tab:focus-visible { outline: none; box-shadow: var(--mn-ring-cyan); }
.section-tab.is-active {
  border-color: rgba(84, 215, 229, .28);
  color: var(--text);
  background: rgba(84, 215, 229, .09);
}
/* Панель вне выбранной вкладки скрыта, несмотря на собственный display: grid. */
.section-pane-hidden { display: none; }
/* С вкладками вторая колонка настроек не нужна: панель занимает всю ширину. */
.settings-grid { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 760px) {
  .section-tab { flex: 1 1 calc(50% - var(--mn-space-xs)); padding: 0 var(--mn-space-sm); font-size: var(--mn-text-xs); }
}

/* --- иконки нижнего меню -------------------------------------------------- */
/* Были типографские знаки (⌂ ▦ ⌁ ↗ ⚙): каждый со своей метрикой, на телефоне
   они стояли вразнобой и не читались. Теперь это один набор контурных иконок. */
.nav-glyph { width: 22px; height: 22px; }
.nav-glyph svg { width: 100%; height: 100%; display: block; }
@media (max-width: 1020px) {
  .workspace-nav .nav-glyph { width: 24px; height: 24px; }
  .workspace-nav a.is-active .nav-glyph,
  .workspace-nav a[aria-current="page"] .nav-glyph { color: #62deed; }
}

/* --- «История»: колонки занимают всё место ------------------------------- */
@media (min-width: 1180px) {
  .history-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    align-items: stretch;
    min-height: calc(100vh - 210px);
  }
  .history-grid > .panel,
  .history-grid > .details-grid,
  .history-grid > .details-grid > .panel { height: 100%; min-height: 0; }
  .history-grid > .panel,
  .history-grid > .details-grid > .panel { display: flex; flex-direction: column; }
  /* Списки тянутся до низа панели и прокручиваются внутри себя, а не уводят
     всю страницу вниз. */
  /* Растягивается сам список, но не строки внутри него: в гриде свободное
     место иначе расходится по строкам и события висят через пустоту. */
  .history-grid .operations-list,
  .history-grid .events-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; align-content: start; }
  .history-grid .operation-row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; }
  .history-grid .operation-progress { grid-column: 1 / -1; }
  .history-grid .operation-time { grid-column: 2; grid-row: 1; justify-self: end; }
  /* Строка события — время, нода, состояние: в узкой колонке ей нужны
     колонки поменьше, а не перенос. */
  .history-grid .event-row { grid-template-columns: 74px minmax(0, 1fr) auto; gap: 8px; font-size: .71rem; }
}

/* --- скрытая кнопка обязана исчезать ------------------------------------- */
/* У .primary-action и .secondary-action собственный display: inline-flex, и он
   перебивает браузерное правило для [hidden]: «Сохранить», «Отменить правки» и
   «Связать все» оставались на экране в режиме просмотра. */
.primary-action[hidden],
.secondary-action[hidden],
.compact-action[hidden],
.topology-batch-link-all[hidden] { display: none; }

/* --- нижнее меню: граница и вырез ---------------------------------------- */
.workspace-nav { border-top-color: var(--line); }
@media (max-width: 1020px) {
  .workspace-nav {
    padding-left: max(6px, env(safe-area-inset-left));
    padding-right: max(6px, env(safe-area-inset-right));
  }
  /* Липкий футер карты связей поднимается над меню, а кнопка возврата наверх
     в этом разделе не нужна: она попадала ровно в этот футер. */
  .links-workspace .topology-batch-footer { bottom: calc(70px + env(safe-area-inset-bottom)); }
  #dashboard-main[data-active-section="links"] ~ .scroll-top { display: none; }
}

/* --- счётчики операций: скрытый значит скрытый ---------------------------- */
/* .operations-tally объявлен как inline-flex, и это перебивает [hidden]:
   в «Истории» висели три нулевые плашки «0 требуют внимания / 0 выполняются /
   0 завершены», хотя скрипт их прятал. */
.operations-tally[hidden] { display: none; }

/* --- ответ на действие приходит туда, где действовали -------------------- */
/* #inventory-operation-status стоит первым элементом <main>: при списке из
   27 нод ответ на «Отключить» печатался за три экрана выше того места, где
   нажимали, и висел до следующей операции. */
#inventory-operation-status {
  position: fixed;
  z-index: 50;
  left: auto;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  width: min(420px, calc(100vw - 32px));
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: var(--mn-space-sm);
  padding: var(--mn-space-sm) var(--mn-space-md);
  border: 1px solid var(--mn-border);
  border-radius: var(--mn-radius-lg);
  background: var(--surface-2);
  box-shadow: var(--shadow);
  font-size: var(--mn-text-sm);
}
#inventory-operation-status[hidden] { display: none; }
.operation-status-text { min-width: 0; flex: 1 1 auto; }
.operation-status-close {
  flex: 0 0 auto;
  min-width: 32px;
  min-height: 32px;
  margin: -4px -6px -4px 0;
  border: 0;
  border-radius: var(--mn-radius-sm);
  color: inherit;
  background: none;
  font: inherit;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
}
.operation-status-close:hover { color: #fff; background: rgba(255, 255, 255, .06); }
@media (max-width: 1020px) {
  /* Слева от кнопки возврата наверх и выше нижнего меню. */
  #inventory-operation-status {
    left: max(12px, env(safe-area-inset-left));
    right: calc(max(16px, env(safe-area-inset-right)) + 56px);
    bottom: calc(78px + env(safe-area-inset-bottom));
    width: auto;
  }
  .operation-status-close { min-width: 44px; min-height: 44px; }
}

/* --- видимый фокус и пальцевые цели -------------------------------------- */
/* Само кольцо стало видимым в объявлении шкалы (--mn-ring), здесь — только
   то, что раньше гасило его совсем. */
.workspace-nav a:focus-visible { outline: 2px solid #75e8f8; outline-offset: -2px; }
.filter-chip:focus-visible,
.section-tab:focus-visible,
.inventory-role-heading:focus-visible { outline: 2px solid #75e8f8; outline-offset: 2px; box-shadow: none; }

@media (max-width: 1020px) {
  /* Палец попадает в 44px, а не в 28-34px: на телефоне шкала контролов другая. */
  :root {
    --mn-control-xs: 36px;
    --mn-control-sm: 44px;
    --mn-control-md: 48px;
  }
  /* Поле меньше 16px заставляет iOS Safari зумить страницу при фокусе. */
  .panel input, .panel select, .panel textarea,
  .dialog input, .dialog select, .dialog textarea,
  .node-dialog input, .node-dialog select, .node-dialog textarea,
  .inventory-search input { font-size: 16px; }
  /* Чипы фильтров прибиты к 36px правилом с id — перебиваем тем же весом. */
  .filter-chip,
  #inventory-filters .filter-chip,
  #inventory-role-filters .filter-chip { min-height: 44px; }
  .compact-action, .inventory-action { min-height: 40px; }
  /* Шапка: обновление и выход — тоже пальцевые цели. */
  .topbar #refresh, .topbar .logout-button { min-height: 44px; }
}

/* --- строка события кликабельна ------------------------------------------ */
/* Событие называет ноду, но открыть её оттуда было нельзя — приходилось идти
   в «Ноды» и искать руками. */
button.event-row {
  width: 100%;
  border-left: 0;
  border-right: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
button.event-row:hover { border-color: var(--line-strong); background: rgba(84, 215, 229, .05); }
button.event-row:focus-visible { outline: 2px solid #75e8f8; outline-offset: -2px; }

/* --- идущее обновление парка видно в «Истории» --------------------------- */
/* Раньше оно жило только внутри своего диалога: список операций про него не
   знает, а кнопка запуска — в другом разделе. */
.fleet-upgrade-banner {
  margin-top: var(--mn-space-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mn-space-md);
  padding: var(--mn-space-sm) var(--mn-space-md);
  border: 1px solid rgba(34, 211, 238, .24);
  border-radius: var(--mn-radius-lg);
  background: rgba(34, 211, 238, .06);
  font-size: var(--mn-text-sm);
}
.fleet-upgrade-banner[hidden] { display: none; }
.fleet-upgrade-banner > div { min-width: 0; display: grid; gap: 2px; }
.fleet-upgrade-banner strong { color: var(--text); }
.fleet-upgrade-banner span { color: var(--muted); font-size: var(--mn-text-xs); }

/* --- причина отказа видна, а не спрятана в title ------------------------- */
.route-editor-blocker { margin-top: var(--mn-space-xs); color: var(--amber); }
.route-editor-blocker[hidden] { display: none; }

/* --- следующий шаг черновика виден в строке ------------------------------ */
/* Раньше «Подключить агент» / «Развернуть и включить» лежали в свёрнутом
   «••• Ещё действия» внутри карточки ноды: из списка не было понятно, что
   делать дальше с черновиком. */
.inventory-row-surface .inventory-row-next-step {
  position: absolute;
  z-index: 2;
  top: 6px;
  right: 44px;
  min-height: 32px;
  padding: 0 11px;
  border-radius: var(--mn-radius-sm);
  font-size: var(--mn-text-xs);
}
.inventory-row-surface:has(> .inventory-row-next-step) .inventory-row.is-compact .inv-head { padding-right: 168px; }
@media (max-width: 760px) {
  .inventory-row-surface .inventory-row-next-step { top: 8px; right: 40px; min-height: 36px; }
  .inventory-row-surface:has(> .inventory-row-next-step) .inventory-row.is-compact .inv-head { padding-right: 150px; }
}

/* --- точки связей: зона нажатия и фокус ---------------------------------- */
/* Сама точка осталась 8px, но нажимать и попадать пальцем нужно было ровно в
   неё; клавиатура до них вовсе не доходила. */
.inventory-row.is-compact .inv-links .dots { gap: 0; }
.inventory-row.is-compact .inv-links .dots i {
  position: relative;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
}
.inventory-row.is-compact .inv-links .dots i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 6px rgba(89, 224, 173, .4);
  transform: translate(-50%, -50%);
  transition: transform .12s ease;
}
.inventory-row.is-compact .inv-links .dots i.backup::after { background: var(--violet); box-shadow: none; }
.inventory-row.is-compact .inv-links .dots i.is-link:hover::after { transform: translate(-50%, -50%) scale(1.35); }
.inventory-row.is-compact .inv-links .dots i.is-link:focus-visible { outline: 2px solid #75e8f8; outline-offset: -2px; }

/* --- подтверждения живут внутри панели ----------------------------------- */
/* Браузерный confirm() рисуется системой поверх страницы: чужая типографика,
   чужие кнопки и заголовок с адресом сайта. */
.confirm-dialog {
  width: min(460px, calc(100vw - 32px));
  border-color: var(--mn-border);
  border-radius: var(--mn-radius-xl);
  background: var(--surface-2);
}
.confirm-dialog::backdrop { background: rgba(4, 8, 16, .62); }
.confirm-dialog-shell { display: grid; gap: var(--mn-space-md); padding: var(--mn-space-xl); }
.confirm-dialog-copy { margin: 0; color: var(--muted); font-size: var(--mn-text-sm); line-height: 1.5; }
.confirm-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--mn-space-sm);
}
@media (max-width: 480px) {
  .confirm-dialog-actions { flex-direction: column-reverse; }
  .confirm-dialog-actions button { width: 100%; }
}

/* --- поля видно на фоне панели ------------------------------------------- */
/* Граница полей давала контраст 1.26:1 к подложке — поле было неотличимо от
   панели, пока в него не ткнёшь. */
.panel input:not([type="checkbox"]):not([type="radio"]),
.panel select,
.panel textarea,
.dialog input:not([type="checkbox"]):not([type="radio"]),
.dialog select,
.dialog textarea,
.node-dialog input:not([type="checkbox"]):not([type="radio"]),
.node-dialog select,
.node-dialog textarea {
  border-color: rgba(226, 232, 255, .34);
  background: rgba(2, 5, 12, .85);
}

/* --- операции над всем парком выглядят как операции над всем парком ------- */
#agent-fleet-upgrade-open {
  border-color: rgba(241, 189, 98, .42);
  color: #f6d79a;
}
#agent-fleet-upgrade-open:hover:not(:disabled) { border-color: rgba(241, 189, 98, .7); color: #ffe7b5; }

/* --- поле с ошибкой видно ------------------------------------------------ */
/* Текст ошибки лежал в отдельном контейнере: поле, из-за которого форма не
   отправилась, ничем не отличалось от соседних. */
.panel input.is-invalid,
.panel select.is-invalid,
.panel textarea.is-invalid,
.dialog input.is-invalid,
.node-dialog input.is-invalid {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(255, 117, 111, .14);
}

/* --- домены для сертификата подсказывает сама панель --------------------- */
.acme-issue-zone-chips {
  margin-top: var(--mn-space-xs);
  display: flex;
  flex-wrap: wrap;
  gap: var(--mn-space-xs);
}
.acme-issue-zone-chips[hidden] { display: none; }

/* --- полоса состояния: иконка в своей колонке ---------------------------- */
/* Сетка полосы отводила под иконку 30px, а сама иконка выросла до 36–46px:
   крутящаяся стрелка вылезала из колонки и наезжала на текст. */
.freshness-banner {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
}
.freshness-icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: var(--mn-radius-md);
  font-size: 1rem;
  line-height: 1;
}
@media (max-width: 760px) {
  .freshness-banner { grid-template-columns: auto minmax(0, 1fr); row-gap: 8px; }
  .freshness-banner button { grid-column: 1 / -1; justify-self: stretch; }
}

/* --- «Связи» на телефоне начинаются с карты ------------------------------ */
/* Липкая шапка, описание и легенда занимали весь первый экран: первая строка
   карты начиналась ниже окна. */
.topology-batch-help > summary {
  display: none;
  min-height: var(--mn-control-sm);
  align-items: center;
  gap: var(--mn-space-xs);
  color: var(--muted);
  font-size: var(--mn-text-xs);
  cursor: pointer;
  list-style: none;
}
.topology-batch-help > summary::-webkit-details-marker { display: none; }
.topology-batch-help > summary::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
}
.topology-batch-help[open] > summary::after { transform: rotate(45deg); }
@media (max-width: 760px) {
  .topology-batch-help > summary { display: flex; }
  #topology-batch-description[hidden] { display: none; }
}

/* --- индикатор ожидания: три точки -------------------------------------- */
/* Крутящаяся стрелка в плашке выглядела как вращающийся квадрат: вместе со
   стрелкой ехал её фон. Точки спокойнее и читаются в любом состоянии полосы. */
/* `.freshness-banner span { display: block }` специфичнее одного класса —
   поэтому селектор здесь такой же длины и стоит позже. */
.freshness-banner .freshness-icon {
  width: auto;
  min-width: 0;
  height: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 2px;
  border-radius: 0;
  background: none;
  animation: none;
}
.freshness-banner.is-loading .freshness-icon { animation: none; }
.freshness-banner .freshness-icon i {
  flex: 0 0 auto;
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: .45;
}
.freshness-banner.is-loading .freshness-icon i { animation: freshness-dots 1.1s ease-in-out infinite; }
.freshness-banner.is-loading .freshness-icon i:nth-child(2) { animation-delay: .16s; }
.freshness-banner.is-loading .freshness-icon i:nth-child(3) { animation-delay: .32s; }
@keyframes freshness-dots {
  0%, 70%, 100% { opacity: .3; transform: translateY(0); }
  35% { opacity: 1; transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .freshness-banner.is-loading .freshness-icon i { animation: none; opacity: .75; }
}

/* --- карточка ноды: сначала состояние, правка по кнопке ------------------- */
/* Клик по строке открывал форму с активными полями «IP-адрес» и «Роль в
   сети»: посмотреть ноду было нельзя, только править. */

/* --- связи в карточке: чипы вместо списка карточек ------------------------ */
/* У входа с семью прослойками и десятком входящих список занимал больше места,
   чем всё остальное окно. */
.node-editor-connection-group { display: grid; gap: var(--mn-space-xs); }
.node-editor-connection-group + .node-editor-connection-group { margin-top: var(--mn-space-sm); }
.node-editor-connection-heading {
  display: flex;
  align-items: baseline;
  gap: var(--mn-space-xs);
  color: var(--muted);
  font-size: var(--mn-text-xs);
}
.node-editor-connection-heading b {
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  color: var(--text);
  font-size: .62rem;
}
.node-link-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.node-link-chip {
  padding: 3px 8px;
  border: 1px solid rgba(34, 211, 238, .22);
  border-radius: var(--mn-radius-sm);
  background: rgba(34, 211, 238, .06);
  color: #cfe9ee;
  font-size: var(--mn-text-xs);
  white-space: nowrap;
}
.node-link-chip.is-backup { border-color: rgba(180, 156, 255, .28); background: rgba(180, 156, 255, .08); color: #ddd4ff; }
.node-link-chip.is-primary { border-color: rgba(89, 224, 173, .28); background: rgba(89, 224, 173, .08); color: #cdf3e4; }

/* --- карточка ноды на телефоне: состояние выше формы ---------------------- */
/* В одну колонку форма «Основное» шла первой, и состояние с связями уезжало
   под неё — на телефоне это половина экрана прокрутки до ответа на вопрос
   «что с нодой». */
@media (max-width: 760px) {
  .node-editor-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mn-space-sm); }
  .node-editor-primary, .node-editor-sidebar { display: contents; }
  .node-editor-summary { order: 1; }
  .node-editor-sidebar > section:nth-of-type(1) { order: 2; }
  .node-editor-sidebar > section:nth-of-type(2) { order: 3; }
  .node-editor-main-section { order: 4; }
  .node-editor-sidebar > section:nth-of-type(3) { order: 5; }
}

/* --- Сетевые лимиты -------------------------------------------------------
   Вкладка «Лимиты» в «Настройках»: список нод и мастер осмотр → план →
   применение. Правила дописаны в конец файла намеренно: выше лежат слои
   «DENSE CONTROL ROOM» и «Дизайн-язык Mantine», и всё, что написано до них,
   выглядит применённым, но не работает. */

.node-limits-list {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.node-limits-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) auto minmax(0, 1.2fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--mn-border);
  border-radius: var(--mn-radius-sm, 8px);
  background: var(--mn-surface-2, transparent);
}

.node-limits-row.is-busy {
  border-color: var(--mn-warning, #d9a441);
}

.node-limits-identity {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.node-limits-identity strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.node-limits-role {
  font-size: 12px;
  color: var(--mn-text-dim, #8a93a5);
}

.node-limits-detail {
  font-size: 12px;
  color: var(--mn-text-dim, #8a93a5);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.node-limits-fleet {
  margin: 8px 0 0;
  padding: 8px 10px;
  border-radius: var(--mn-radius-sm, 8px);
  border: 1px solid var(--mn-warning, #d9a441);
  font-size: 13px;
}

.node-limits-wizard {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--mn-border);
  border-radius: var(--mn-radius, 10px);
  background: var(--mn-surface-2, transparent);
}

.node-limits-wizard-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.node-limits-wizard-header strong { font-size: 15px; }
.node-limits-wizard-header .compact-action { margin-left: auto; }

.node-limits-steps {
  display: flex;
  gap: 8px;
  margin: 10px 0;
  padding: 0;
  list-style: none;
  counter-reset: node-limits-step;
}

.node-limits-steps li {
  counter-increment: node-limits-step;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--mn-border);
  font-size: 12px;
  color: var(--mn-text-dim, #8a93a5);
}

.node-limits-steps li::before { content: counter(node-limits-step) ". "; }
.node-limits-steps li.is-active { border-color: var(--mn-accent, #75e8f8); color: var(--mn-text, inherit); }
.node-limits-steps li.is-done { border-color: var(--mn-success, #4cc38a); color: var(--mn-text, inherit); }

.node-limits-block {
  margin: 12px 0;
  padding-top: 10px;
  border-top: 1px solid var(--mn-border);
}

.node-limits-block h4 {
  margin: 0 0 6px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--mn-text-dim, #8a93a5);
}

.node-limits-facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 2px 12px;
  margin: 0;
  font-size: 13px;
}

.node-limits-facts dt { color: var(--mn-text-dim, #8a93a5); }
.node-limits-facts dd { margin: 0; }

.node-limits-adopt {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  margin-top: 8px;
}

.node-limits-adopt label {
  font-family: var(--mn-mono, ui-monospace, monospace);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.node-limits-adopt input { width: 100%; }

.node-limits-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.node-limits-table th,
.node-limits-table td {
  padding: 3px 6px;
  text-align: left;
  border-bottom: 1px solid var(--mn-border);
  overflow-wrap: anywhere;
}

.node-limits-table th { color: var(--mn-text-dim, #8a93a5); font-weight: 600; }
.node-limits-table tr.is-same td { color: var(--mn-text-dim, #8a93a5); }
.node-limits-table tr.is-changed td:last-child { color: var(--mn-accent-strong, var(--mn-accent, #75e8f8)); font-weight: 600; }

.node-limits-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

@media (max-width: 720px) {
  .node-limits-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "identity state" "detail action";
    row-gap: 6px;
  }
  .node-limits-identity { grid-area: identity; }
  .node-limits-row > .state-pill { grid-area: state; }
  .node-limits-detail { grid-area: detail; white-space: normal; }
  .node-limits-row > .compact-action { grid-area: action; justify-self: end; }
  .node-limits-adopt { grid-template-columns: minmax(0, 1fr) auto; }
  .node-limits-adopt label { grid-column: 1 / -1; }
}

/* --- Массовое применение лимитов ------------------------------------------
   Блок стоит над списком нод: пока очередь идёт, это главное на экране. */

.node-limits-rollout {
  margin: 10px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--mn-border);
  border-radius: var(--mn-radius, 10px);
  background: var(--mn-surface-2, transparent);
}

.node-limits-rollout-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}

.node-limits-rollout .node-limits-facts { margin-top: 6px; }
.node-limits-rollout .node-limits-actions { margin-top: 10px; }

/* История бэкендов haproxy: несколько линий и легенда. Ниже слоя
   «DENSE CONTROL ROOM» намеренно — правила выше него не применяются. */
.history-chart-multi svg polyline { stroke-width: 1.6; }
.history-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; font-size: .61rem; color: var(--muted); }
.history-legend-item i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }

/* Свидетели по маршруту и состояние бота (волна 43).  Ниже слоя
   «DENSE CONTROL ROOM» намеренно — правила выше него не применяются. */
.node-witness { margin-top: 4px; color: var(--muted); font-size: .68rem; line-height: 1.4; }
.node-witness.is-problem { color: var(--red); }
.telegram-target-status { margin: 0; color: var(--muted); font-size: .64rem; line-height: 1.4; }
.telegram-target-status.is-problem { color: var(--red); }
.telegram-target-status.is-warn { color: var(--amber); }
#telegram-notifier-note.is-problem { color: var(--red); }

/* Рекомендация потолка соединений в диалоге ноды (волна 44). */
.maxconn-hint { display: block; margin-top: 4px; }
.maxconn-apply { margin-top: 6px; }

/* Потери на маршрутах (волна 45).  Ниже слоя «DENSE CONTROL ROOM»
   намеренно — правила выше него не применяются. */
.backend-chip.is-lossy { color: var(--amber); }
.links .dots i.lossy { background: var(--amber); box-shadow: 0 0 6px rgba(255, 190, 90, .45); }
.node-links { margin-top: 4px; color: var(--muted); font-size: .68rem; line-height: 1.4; }
.node-links.is-problem { color: var(--red); }
.node-links.is-warn { color: var(--amber); }
.link-section h3 { margin: 12px 0 2px; font-size: .74rem; }
.link-table { width: 100%; border-collapse: collapse; font-size: .68rem; margin-top: 6px; }
.link-table th, .link-table td { text-align: left; padding: 3px 6px; border-bottom: 1px solid rgba(255, 255, 255, .06); white-space: nowrap; }
.link-table th { color: var(--muted); font-weight: 500; }
.link-table tr.is-problem td { color: var(--red); }
.link-table tr.is-warn td { color: var(--amber); }
.link-note { margin: 6px 0 0; color: var(--muted); font-size: .62rem; line-height: 1.4; }

/* «Доступ к телеграм» (Telegram Fallback). */
.tga-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 18px; }
.tga-head h2 { margin: 2px 0 4px; }
.tga-snapshot { margin: 0; color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; }
.tga-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.tga-control { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: .8rem; }
.tga-control select { width: auto; min-width: 0; max-width: 220px; background: transparent; color: inherit; border: 1px solid var(--line-strong); border-radius: 8px; padding: 5px 8px; font: inherit; color: var(--text, inherit); }
.tga-control select option { color: #111; }
.tga-range { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tga-range[hidden] { display: none; }
.tga-control input[type="date"] { background: transparent; color: inherit; border: 1px solid var(--line-strong); border-radius: 8px; padding: 4px 8px; font: inherit; color-scheme: dark; }

.tga-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 22px; }
.tga-kpi { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--mn-surface, rgba(255, 255, 255, .02)); min-width: 0; }
.tga-kpi-label { color: var(--muted); font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; }
.tga-kpi-value { font-size: 1.9rem; line-height: 1.1; font-weight: 700; font-variant-numeric: tabular-nums; }
.tga-kpi-note { color: var(--muted); font-size: .78rem; }
.tga-kpi.is-good .tga-kpi-value { color: var(--green); }
.tga-kpi.is-accent { border-color: var(--mn-accent, #75e8f8); }
.tga-kpi.is-accent .tga-kpi-value { color: var(--mn-accent-strong, var(--mn-accent, #75e8f8)); }
.tga-kpi-split { display: flex; align-items: baseline; gap: 8px; }
.tga-kpi-split-value { min-width: 3.2em; font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--mn-accent-strong, var(--mn-accent, #75e8f8)); }
.tga-sample { color: var(--amber); }
.tga-early { margin: -12px 0 18px; color: var(--muted); font-size: .76rem; }
.tga-early[hidden] { display: none; }

.tga-block { margin-bottom: 22px; }
.tga-block h3 { margin: 0 0 10px; font-size: .95rem; }
.tga-block-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 10px; }
.tga-block-head h3 { margin: 0; }
.tga-scroll { overflow-x: auto; }

.tga-table { border-collapse: collapse; font-size: .86rem; font-variant-numeric: tabular-nums; width: 100%; max-width: 1180px; }
.tga-table th, .tga-table td { padding: 7px 14px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tga-table th { color: var(--muted); font-weight: 600; font-size: .76rem; }
.tga-table .is-num { text-align: right; }
.tga-table td.is-warn { color: var(--amber); }
.tga-table tr.is-total td { font-weight: 700; border-top: 1px solid var(--line-strong); border-bottom: none; }
.tga-table tbody tr:hover td { background: rgba(255, 255, 255, .025); }
.tga-table tr.tga-pick { cursor: pointer; }
.tga-table tr.tga-pick:focus-visible { outline: 2px solid var(--mn-accent, #75e8f8); outline-offset: -2px; }
.tga-table tr.is-selected td { background: rgba(117, 232, 248, .08); }
.tga-table tr.is-selected td:first-child { box-shadow: inset 3px 0 0 var(--mn-accent, #75e8f8); }
#tg-access-funnel { margin-bottom: 16px; }
.tga-bot { font-weight: 600; }
.tga-id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.tga-muted { color: var(--muted); }
.tga-rate { min-width: 150px; }
.tga-bar { display: inline-block; vertical-align: middle; width: 90px; height: 6px; margin-right: 8px; border-radius: 3px; background: var(--line); overflow: hidden; }
.tga-bar-fill { display: block; height: 100%; background: var(--green); }
.tga-rate-value { font-weight: 600; }

.tga-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 12px; }
.tga-search { width: 180px; background: transparent; color: inherit; border: 1px solid var(--line-strong); border-radius: 8px; padding: 6px 10px; font: inherit; font-size: .86rem; }
.tga-search:focus { outline: none; border-color: var(--mn-accent, #75e8f8); }
.tga-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--line-strong); border-radius: 999px; background: transparent; color: inherit; font: inherit; font-size: .78rem; cursor: pointer; }
.tga-chip:hover { border-color: var(--mn-accent, #75e8f8); }
.tga-chip.is-active { background: var(--mn-accent, #75e8f8); border-color: var(--mn-accent, #75e8f8); color: #0b1418; font-weight: 600; }
.tga-chip-count { opacity: .75; font-variant-numeric: tabular-nums; }

.tga-status-tag { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: .76rem; font-weight: 600; }
.tga-status-tag.is-good { color: var(--green); background: rgba(80, 200, 120, .1); }
.tga-status-tag.is-tg { color: #2AABEE; background: rgba(42, 171, 238, .14); }
.tga-status-tag.is-warn { color: var(--amber); background: rgba(240, 180, 60, .1); }
.tga-status-tag.is-muted { color: var(--muted); background: rgba(255, 255, 255, .05); }

.tga-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.tga-pager[hidden] { display: none; }
.tga-status { margin: 4px 0 0; padding-top: 12px; border-top: 1px solid var(--line); color: var(--amber); font-size: .76rem; }
.tga-status[hidden] { display: none; }
.tga-chart { max-width: 1180px; }
.tga-chart-svg { width: 100%; height: auto; display: block; }
.tga-grid { stroke: var(--line); stroke-width: 1; }
.tga-axis { fill: var(--muted); font-size: 10px; font-family: inherit; }
.tga-hit { fill: transparent; }
.tga-hit:hover { fill: rgba(255, 255, 255, .04); }
.tga-bar-renewed { fill: var(--green); }
.tga-bar-deleted { fill: rgba(160, 170, 185, .55); }
.tga-line-opened { fill: none; stroke: #2AABEE; stroke-width: 2; }
.tga-dot-opened { fill: #2AABEE; }
.tga-legend { display: flex; flex-wrap: wrap; gap: 14px; color: var(--muted); font-size: .76rem; }
.tga-legend-item::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 2px; vertical-align: -1px; }
.tga-legend-item.is-opened::before { background: #2AABEE; border-radius: 50%; }
.tga-legend-item.is-renewed::before { background: var(--green); }
.tga-legend-item.is-deleted::before { background: rgba(160, 170, 185, .55); }

@media (max-width: 900px) {
  .tga-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tga-kpi-value { font-size: 1.5rem; }
}
@media (max-width: 600px) {
  .tga-head { align-items: stretch; }
  .tga-controls { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .tga-controls .tga-control { flex-direction: column; align-items: stretch; gap: 4px; font-size: .72rem; }
  .tga-controls .tga-control select { max-width: none; width: 100%; }
  .tga-controls > .compact-action, .tga-range { grid-column: 1 / -1; }
  .tga-kpis { grid-template-columns: 1fr; gap: 8px; }
  .tga-kpi { padding: 12px 14px; }
  .tga-kpi-split { flex-direction: column; align-items: flex-start; gap: 0; margin-top: 4px; }
  .tga-filters { display: grid; grid-template-columns: 1fr; gap: 8px; }
  .tga-filters .tga-control { justify-content: space-between; }
  .tga-search { width: 100%; box-sizing: border-box; }
  .tga-table th, .tga-table td { padding: 6px 8px; }
}

/* Контуры: переключатель в шапке, виден только когда контуров больше одного. */
.contour-switch { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 6px 0 12px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255, 255, 255, .035); color: var(--muted); font-size: .78rem; font-weight: 720; }
.contour-switch[hidden] { display: none; }
.contour-switch select { height: 30px; min-width: 0; max-width: 180px; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface-2); color: var(--text); font: inherit; cursor: pointer; }
.contour-switch select:disabled { cursor: not-allowed; opacity: .6; }
@media (max-width: 620px) { .contour-switch > span { display: none; } .contour-switch { padding-left: 6px; } }
/* Включение выхода нового контура: проверки по данным агента. */
.exit-checks { display: grid; gap: 4px; margin: 8px 0; padding: 0; list-style: none; font-size: .82rem; }
.exit-checks li.is-ok::before { content: "✓ "; color: var(--green); font-weight: 800; }
.exit-checks li.is-fail::before { content: "✗ "; color: var(--red); font-weight: 800; }
.exit-checks li.is-fail { color: var(--muted); }
.acme-cert-actions button.is-danger { color: #ff9aac; border-color: rgba(251, 113, 133, .28); }
/* Записи входов в DNS: строка на имя, статус и действие. */
.dns-records-list { display: grid; gap: 6px; }
.dns-record-row { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1.2fr) auto; gap: 8px 12px; align-items: center; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.02); font-size: .78rem; }
.dns-record-row strong { font-weight: 750; overflow-wrap: anywhere; }
.dns-record-row small { display: block; color: var(--muted); }
.dns-record-row.is-ok .dns-record-state { color: var(--green); }
.dns-record-row.is-bad .dns-record-state { color: var(--red); }
.dns-record-row.is-orphan { border-style: dashed; }
@media (max-width: 720px) { .dns-record-row { grid-template-columns: 1fr; } }

/* --- телефон: меню-гамбургер в шапке ------------------------------------- */
/* Как в приложениях: ☰ слева в шапке, список разделов выпадает под ней на
   всю ширину, остальной экран затемняется. Нижней полосы на телефоне нет. */
.workspace-menu-toggle { display: none; }
@media (max-width: 1020px) {
  .workspace-menu-toggle {
    order: -1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    margin-right: 4px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(255, 255, 255, .03);
    color: #fff;
    cursor: pointer;
  }
  .workspace-menu-toggle:focus-visible { outline: 2px solid #75e8f8; outline-offset: 2px; }
  .workspace-menu-toggle[aria-expanded="true"] { background: rgba(98, 222, 237, .12); border-color: rgba(98, 222, 237, .4); }
  .workspace-menu-burger svg { display: block; width: 22px; height: 22px; }
  #workspace-menu-current, .workspace-menu-caret { display: none; }
  /* Логотип на телефоне уступает место кнопке меню. */
  .topbar > .brand { display: none; }
  /* Пока меню открыто, шапка со списком — поверх всей страницы. */
  body.workspace-menu-open .topbar { z-index: 70; }

  .workspace-nav { display: none; }
  .workspace-nav.is-open {
    position: fixed;
    z-index: 60;
    left: 0;
    right: 0;
    top: var(--workspace-menu-top, 70px);
    bottom: auto;
    width: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    max-height: calc(100vh - var(--workspace-menu-top, 70px) - 24px);
    overflow-y: auto;
    margin: 0;
    padding: 8px max(10px, env(safe-area-inset-right)) 10px max(10px, env(safe-area-inset-left));
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0 0 18px 18px;
    background: #0e1520;
    /* Затемнение всего, что под меню: тап по нему закрывает список. */
    box-shadow: 0 18px 40px rgba(0, 0, 0, .5), 0 0 0 100vmax rgba(3, 6, 12, .62);
    animation: workspace-menu-in .16s ease-out;
  }
  .workspace-nav.is-open a {
    width: auto;
    max-width: none;
    flex-direction: row;
    justify-content: flex-start;
    gap: 14px;
    min-height: 50px;
    padding: 10px 14px;
    border-radius: 12px;
    box-shadow: none;
  }
  .workspace-nav.is-open a span:last-child { max-width: none; overflow: visible; font-size: 1rem; font-weight: 650; white-space: normal; }
  .workspace-nav.is-open .nav-glyph { width: 22px; height: 22px; }
  body { padding-bottom: env(safe-area-inset-bottom); }
  .scroll-top { bottom: calc(16px + env(safe-area-inset-bottom)); }
  .links-workspace .topology-batch-footer { bottom: env(safe-area-inset-bottom); }
}
@media (max-width: 430px) {
  /* Узкий телефон: от плашки состояния остаётся точка, текст — в подсказке. */
  #global-state > span:last-child { display: none; }
  #global-state { padding-inline: 12px; }
}
@keyframes workspace-menu-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .workspace-nav.is-open { animation: none; } }

/* --- телефон: вкладки и фильтры — одна строка плашек ---------------------- */
@media (max-width: 760px) {
  .section-tabs,
  .topology-batch-tabs,
  #inventory-filters,
  #inventory-role-filters {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    grid-template-columns: none;
    grid-auto-flow: unset;
    width: 100%;
    gap: 6px;
    padding: 4px 28px 4px 4px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    /* Затухание справа: видно, что строка продолжается. */
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  }
  .section-tabs::-webkit-scrollbar,
  .topology-batch-tabs::-webkit-scrollbar,
  #inventory-filters::-webkit-scrollbar,
  #inventory-role-filters::-webkit-scrollbar { display: none; }
  .section-tab,
  .topology-batch-tab,
  #inventory-filters .filter-chip,
  #inventory-role-filters .filter-chip {
    flex: 0 0 auto;
    min-width: auto;
    min-height: 40px;
    padding: 0 16px;
    border-radius: 999px;
    font-size: .84rem;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
    scroll-snap-align: start;
  }
}

/* --- «Связи»: матрица во всю высоту окна ---------------------------------- */
/* Окошко в 58vh показывало 8 строк из 18, а прокрутка застревала внутри. */
.topology-batch-table-wrap { max-height: max(360px, calc(100vh - 190px)); overscroll-behavior: auto; }
.topology-batch-table th,
.topology-batch-table td { height: 46px; padding: 5px; }
.topology-batch-table th:first-child { padding-block: 6px; }
/* Массовые действия по столбцу. */
.topology-batch-col-actions { display: flex; justify-content: center; gap: 4px; margin-top: 5px; }
.topology-batch-col-action {
  min-height: 24px;
  padding: 0 7px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 7px;
  color: #b9c5d3;
  background: rgba(255, 255, 255, .03);
  font: inherit;
  font-size: .66rem;
  font-weight: 750;
  white-space: nowrap;
  cursor: pointer;
}
.topology-batch-col-action:hover:not(:disabled) { color: #fff; border-color: rgba(84, 215, 229, .42); background: rgba(84, 215, 229, .08); }
.topology-batch-col-action.is-remove:hover:not(:disabled) { border-color: rgba(251, 113, 133, .42); background: rgba(251, 113, 133, .08); }
.topology-batch-col-action:disabled { opacity: .45; cursor: default; }
.topology-batch-col-action:focus-visible { outline: 2px solid #63e4ef; outline-offset: 1px; }
.topology-batch-bulk { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid rgba(255, 255, 255, .09); border-radius: 11px; background: rgba(5, 11, 21, .46); }
.topology-batch-bulk > strong { font-size: .8rem; color: #99a6b7; }
.topology-batch-bulk-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; }
.topology-batch-bulk-row .topology-batch-col-actions { margin: 0; }
.topology-batch-bulk-row .topology-batch-col-action { min-height: 34px; padding: 0 12px; font-size: .78rem; }

/* --- шапка на средних экранах --------------------------------------------- */
/* При двух контурах правые кнопки уезжали за край окна ~1440 px. */
@media (min-width: 1021px) and (max-width: 1600px) {
  #dashboard-role { display: none; }
  #refresh > span:last-child { display: none; }
}