:root, html[data-theme='dark'] {
  color-scheme: dark;
  --bg: #111217;
  --bg-2: #16181e;
  --bg-3: #181b1f;
  --elev: #1f2228;
  --gold: #3d71d9;
  --gold-2: #6e9fff;
  --gold-dim: rgba(61, 113, 217, 0.16);
  --text: #d8d9da;
  --muted: #8e8e8e;
  --line: #22252b;
  --line-2: #2d3139;
  --ok: #73bf69;
  --good: #32b478;
  --bad: #f2495c;
  --warn: #ff9830;
  --cyan: #5794f2;
  --purple: #b877d9;
  --yellow: #fade2a;
  --shadow: 0 1px 2px rgba(8, 10, 16, 0.24);
  --shadow-lg: 0 6px 22px rgba(8, 10, 16, 0.28);
  --radius: 8px;
  --radius-lg: 12px;
  --radius-xl: 14px;
  --rail: #111217;
  --bar: #16181e;
  --on: #1c2536;
  --console: #0b0c0e;
  --canvas: #000000;
  --input: #111217;
  --dot: #3a3f48;
  --table-line: #1c1f25;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --sans: Inter, 'Helvetica Neue', Arial, sans-serif;
  --serif: Inter, 'Helvetica Neue', Arial, sans-serif;
  --code-bg: #12141a;
  --code-fg: #d8d9da;
}

html[data-theme='light'] {
  color-scheme: light;
  --bg: #f3f6fb;
  --bg-2: #ffffff;
  --bg-3: #ffffff;
  --elev: #f1f5fb;
  --gold: #4f63e9;
  --gold-2: #3449c7;
  --gold-dim: rgba(79, 99, 233, 0.12);
  --text: #172033;
  --muted: #667085;
  --line: #e3e8f1;
  --line-2: #d6deea;
  --ok: #3f8f46;
  --good: #1f9d55;
  --bad: #d13b4c;
  --warn: #c26a12;
  --cyan: #2f6fd6;
  --purple: #7e5af0;
  --yellow: #b8860b;
  --shadow: 0 1px 2px rgba(31, 42, 68, 0.04), 0 8px 24px rgba(31, 42, 68, 0.04);
  --shadow-lg: 0 18px 50px rgba(31, 42, 68, 0.10);
  --rail: #ffffff;
  --bar: #ffffff;
  --on: #eef3ff;
  --console: #111217;
  --canvas: #111217;
  --input: #ffffff;
  --dot: #b4b8c0;
  --table-line: #eef0f4;
  --code-bg: #eef0f4;
  --code-fg: #1c1f24;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font: 14px/1.5 var(--sans);
  color: var(--text);
  background: var(--bg);
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }

.btn-gold, .gate-card button[type='submit'] {
  background: var(--gold);
  color: #fff;
  border: 0;
  border-radius: var(--radius);
  font-weight: 600;
  letter-spacing: 0;
  padding: 8px 14px;
  box-shadow: none;
}
.btn-gold:hover, .gate-card button[type='submit']:hover { filter: brightness(1.08); }
.btn-ghost {
  background: var(--bg-3);
  color: var(--text);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: 6px 12px;
  font-size: 13px;
}
.btn-ghost:hover { background: var(--elev); }
.btn-danger {
  background: transparent;
  color: var(--bad);
  border: 1px solid rgba(242, 73, 92, 0.35);
  border-radius: var(--radius);
  padding: 6px 12px;
  margin-left: auto;
}
.wide { width: 100%; }
.gf-btn-outline {
  background: var(--bg-3);
  color: var(--text);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: 6px 12px;
  font-size: 13px;
}
.gf-btn-outline:hover { background: var(--elev); }
.gf-btn-blue {
  background: var(--gold);
  color: #fff;
  border: 0;
  border-radius: var(--radius);
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
}
.gf-btn-blue:hover { filter: brightness(1.08); }
#btn-connect:disabled { opacity: 0.45; cursor: not-allowed; }
.gf-time {
  background: var(--elev);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: 5px 10px;
  color: var(--text);
  font-size: 12px;
}

.gate {
  min-height: 100%;
  display: grid;
  place-items: center;
  background: var(--bg);
  color: var(--text);
}
.gate-card {
  width: min(400px, calc(100% - 32px));
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: 28px 24px;
  box-shadow: var(--shadow-lg);
}
.gate-logo {
  display: block;
  width: min(220px, 72%);
  height: auto;
  margin: 0 auto 4px;
}
.mark { display: flex; gap: 14px; align-items: center; }
.mark-kicker {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--gold-2);
  font-weight: 600;
}
.mark-title { font-size: 22px; font-weight: 600; line-height: 1.2; }
.gate-copy { color: var(--muted); margin: 8px 0 22px; text-align: center; }
.gate-card label, .drawer-panel label {
  display: grid;
  gap: 6px;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  margin-bottom: 12px;
}
.gate-card input, .drawer-panel input, .drawer-panel select, .rail-tools input, .exec input, .play-machine input, .play-machine select, .play-release select {
  background: var(--input);
  border: 1px solid var(--line-2);
  color: var(--text);
  border-radius: var(--radius);
  padding: 8px 10px;
  outline: none;
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
}
.gate-card input:focus, .drawer-panel input:focus, .drawer-panel select:focus, .exec input:focus, .play-machine input:focus, .play-release select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold);
}
.gate-card button { width: 100%; margin-top: 8px; }
.error { color: var(--bad); font-size: 13px; margin-top: 10px; text-transform: none; letter-spacing: 0; }

.shell {
  height: 100%;
  display: grid;
  grid-template-columns: 244px minmax(0, 1fr);
}
.rail {
  background: var(--rail);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-height: 0;
  box-shadow: 10px 0 32px rgba(31, 42, 68, 0.035);
  z-index: 2;
}
.rail-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100% - 16px);
  margin: 8px 8px 4px;
  padding: 8px 6px 6px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}
html[data-theme='dark'] .rail-brand {
  background: #111217;
}
.rail-brand:hover { filter: brightness(1.08); }
.rail-logo {
  display: block;
  width: auto;
  max-width: 146px;
  max-height: 78px;
  object-fit: contain;
  pointer-events: none;
}
.rail-nav {
  display: grid;
  gap: 1px;
  padding: 4px 8px 8px;
  border-bottom: 1px solid var(--line);
}
.rail-nav button {
  background: transparent;
  color: var(--muted);
  border: 0;
  border-radius: var(--radius);
  padding: 10px 12px;
  font-size: 13px;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 8px;
}
.rail-nav button svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  opacity: 0.85;
}
.rail-nav button.on {
  color: var(--text);
  background: var(--on);
  font-weight: 500;
}
.rail-nav button:hover { background: var(--elev); color: var(--text); }
.rail-badge {
  margin-left: auto;
  min-width: 18px;
  padding: 1px 6px;
  border-radius: 8px;
  background: var(--on);
  color: var(--ok);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.rail-nav button.on .rail-badge { background: var(--rail); }
.rail-tools-section {
  flex: 0 0 auto;
  min-height: 0;
  padding-top: 4px;
  border-bottom: 1px solid var(--line);
}
.rail-tools-section .rail-section-head {
  padding-bottom: 2px;
}
.rail-tools-section .rail-section-head button {
  background: transparent;
  border: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}
.rail-sub {
  display: grid;
  gap: 1px;
  padding: 0 8px 8px;
}
.rail-sub button {
  background: transparent;
  color: var(--muted);
  border: 0;
  border-radius: var(--radius);
  padding: 8px 10px;
  font-size: 13px;
  text-align: left;
}
.rail-sub button:hover { background: var(--elev); color: var(--text); }
.rail-sub button.on {
  color: var(--text);
  background: var(--on);
  font-weight: 500;
}
.rail-section {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding-top: 6px;
}
.rail-section.rail-tools-section { flex: 0 0 auto; }
.rail-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 6px 16px 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.rail-count {
  letter-spacing: 0;
  text-transform: none;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.rail-tools { display: grid; gap: 8px; padding: 4px 10px 8px; }
.rail-tools input { border-radius: var(--radius); padding: 7px 10px; }
.rail-scope, .rail-tenant {
  min-width: 0;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
}
.rail-scope > summary, .rail-tenant > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 8px 5px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.rail-tenant > summary {
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  padding-left: 16px;
  color: var(--text);
}
.rail-scope > summary::-webkit-details-marker,
.rail-tenant > summary::-webkit-details-marker { display: none; }
.rail-scope > summary::before,
.rail-tenant > summary::before {
  content: '▸';
  display: inline-block;
  width: 10px;
  margin-right: 4px;
  color: var(--muted);
}
.rail-scope[open] > summary::before,
.rail-tenant[open] > summary::before { content: '▾'; }
.rail-scope .rail-count, .rail-tenant .rail-count {
  margin-left: auto;
  font-weight: 500;
}
.rail-scope > .item, .rail-tenant > .item { margin-left: 6px; }
.rail-foot { padding: 10px 12px 14px; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.rail-foot .btn-ghost { width: 100%; }
.rail-foot #btn-logout-rail { color: var(--muted); }
.bar-meta #btn-logout { flex-shrink: 0; }
.fleet {
  overflow: auto;
  padding: 0 8px 12px;
  display: grid;
  gap: 2px;
  align-content: start;
}
.fleet button.item {
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 8px 10px;
  color: inherit;
  display: grid;
  gap: 2px;
  min-width: 0;
}
.fleet button.item:hover { background: var(--elev); }
.fleet button.item.active {
  background: var(--on);
  border-color: transparent;
}
.item-name { font-weight: 500; display: flex; align-items: center; gap: 8px; min-width: 0; }
.item-name span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-meta { color: var(--muted); font-size: 11px; padding-left: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-seen { color: var(--bad); font-size: 11px; padding-left: 15px; animation: blink-red 1.4s ease-in-out infinite; }
.dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--dot);
  flex: 0 0 auto;
}
.dot.on { background: var(--ok); box-shadow: 0 0 0 3px rgba(115,191,105,0.18); animation: blink-green 1.4s ease-in-out infinite; }
@keyframes blink-green {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 3px rgba(115,191,105,0.22); }
  50% { opacity: 0.28; box-shadow: 0 0 0 5px rgba(115,191,105,0.04); }
}
@keyframes blink-red {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.28; }
}
@media (prefers-reduced-motion: reduce) {
  .dot.on, .item-seen { animation: none; }
}
.fleet-empty { color: var(--muted); padding: 16px 8px; font-size: 13px; }

.stage {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background:
    radial-gradient(circle at 82% 8%, rgba(79, 99, 233, .08), transparent 25rem),
    var(--bg);
}
.stage > .gf,
.stage > .products-view,
.stage > .guide-view,
.stage > .detail,
.stage > .empty-stage,
.stage > .backup-view {
  width: 100%;
  min-width: 0;
  align-self: stretch;
}
.bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 24px;
  border-bottom: 1px solid var(--line);
  background: var(--bar);
  min-height: 52px;
  position: relative;
  z-index: 3;
}
.bar-crumb {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.bar-kicker, #bar-kicker {
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  font-weight: 400;
}
.crumb-sep { color: var(--muted); }
.bar h1 {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
}
.star { color: var(--yellow); font-size: 13px; }
.bar-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.chip {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--muted);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: 4px 8px;
  background: var(--elev);
}
#clock { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 12px; }

.empty-stage {
  margin: 0;
  text-align: left;
  max-width: none;
  padding: 0;
}
.empty-stage .backup-empty {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-3);
  box-shadow: var(--shadow);
}
.empty-stage h2 { font-weight: 650; font-size: 22px; margin: 0 0 10px; }
.empty-stage p { color: var(--muted); }

.detail {
  flex: 1;
  min-height: 0;
  overflow: auto;
  overflow-anchor: none;
  display: block;
  margin: 0;
  background: var(--bg-2);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.detail .backup-hero-actions.toolbar {
  flex: 1 1 420px;
  justify-content: flex-end;
  align-items: center;
  padding: 0;
  border: 0;
}
.detail .backup-hero-actions .btn-danger { margin-left: 0; }
.detail .access-care,
.detail .health-care,
.detail .ops-care {
  margin: 14px 0 0;
  padding: 14px 16px;
  background: var(--bg-3);
  border-radius: 12px;
}
.detail .win-boot {
  margin: 14px 0 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-3);
}
.detail .console-wrap {
  margin: 14px 0 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.detail #log.console {
  max-height: min(36vh, 320px);
  min-height: 180px;
  overflow-x: hidden;
  overflow-y: auto;
  overflow-anchor: none;
}
.detail.session {
  flex: 1;
}
.identity-main .btn-ghost {
  margin-bottom: 8px;
  padding: 4px 8px;
}
.identity {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 12px 14px 4px;
}
.identity-main h2 { margin: 6px 0 2px; font-size: 16px; font-weight: 600; }
.sub { margin: 0; color: var(--muted); font-size: 12px; }
.products-view .sub { max-width: 46ch; margin: 8px 0 0; }
.status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.status::before {
  content: '';
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--dot);
}
.status.online { color: var(--ok); }
.status.online::before { background: var(--ok); }
.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: 8px 16px;
  margin: 0;
  min-width: 240px;
}
.facts dt { color: var(--muted); font-size: 11px; letter-spacing: 0; text-transform: none; }
.facts dd { margin: 2px 0 0; }
.health-care {
  margin: 0 14px 8px;
  padding: 10px 12px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-2);
}
.health-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.health-head strong { font-size: 13px; font-weight: 600; }
.health-head-spacer { flex: 1; }
.health-body { min-height: 0; }
.health-empty { margin: 0; color: var(--muted); font-size: 12px; }
.ops-care {
  margin: 0 14px 8px;
  padding: 10px 12px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-2);
}
.ops-care .health-head > div { display: flex; align-items: baseline; gap: 8px; }
.ops-target {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) auto auto;
  gap: 8px;
  align-items: end;
}
.ops-target label { display: grid; gap: 4px; color: var(--muted); font-size: 11px; }
.ops-target input, .ops-target select {
  min-width: 0;
  background: var(--input);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: 7px 9px;
}
.ops-message { margin: 8px 0; color: var(--muted); font-size: 12px; }
.ops-message.ok { color: var(--ok); }
.ops-message.warn { color: var(--warn); }
.ops-message.bad { color: var(--bad); }
.ops-status {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
}
.ops-indicator {
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-3);
}
.ops-indicator span { display: block; color: var(--muted); font-size: 10px; }
.ops-indicator strong {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ops-indicator.ok strong { color: var(--ok); }
.ops-indicator.warn strong { color: var(--warn); }
.ops-indicator.bad strong { color: var(--bad); }
.ops-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.ops-actions .btn-danger { margin-left: auto; }
.tools-machine { margin-bottom: 0; min-width: 260px; }
.tools-machine select { width: min(100%, 380px); min-height: 42px; }
#view-tools.no-diamond .diamond-tool { display: none; }
.tools-lead, .tool-card p {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.tool-card {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--bg-3);
  box-shadow: var(--shadow);
}
.tool-card + .tool-card { margin-top: 16px; }
.tool-panel {
  margin-top: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.tool-panel > .backup-section-head { display: none; }
.tool-panel .tool-card { margin: 0 0 16px; }
.tool-panel > .ops-message { margin: 0 0 16px; }
.tool-version-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  margin: 0 0 16px;
}
.tool-version-split .tool-card { margin: 0; min-height: 100%; }
.maintain-findings { display: grid; gap: 8px; margin: 10px 0; }
.maintain-item {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
}
.maintain-item strong { display: block; font-size: 12px; }
.maintain-item span { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.maintain-item.ok strong { color: var(--ok); }
.maintain-item.warn strong { color: var(--warn); }
.maintain-item.bad strong { color: var(--bad); }
.tool-card h4 {
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 1.25;
}
.tool-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 16px 0;
}
.tool-grid label, .tool-check {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
}
.tool-grid input, .tool-grid select {
  min-width: 0;
  background: var(--input);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  min-height: 42px;
  padding: 10px 11px;
  color: var(--text);
}
.tools-machine-hint {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 16px;
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: var(--bg-3);
  font-size: 12px;
  overflow-wrap: anywhere;
}
.tools-home-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.tools-home-card {
  min-width: 0;
  min-height: 190px;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  gap: 18px;
  padding: 24px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 18px;
  color: var(--text);
  background: var(--bg-3);
  box-shadow: var(--shadow);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.tools-home-card:hover {
  transform: translateY(-2px);
  border-color: rgba(79, 99, 233, .34);
  box-shadow: var(--shadow-lg);
}
.tools-home-card > span:nth-child(2) { min-width: 0; display: grid; align-content: start; gap: 7px; }
.tools-home-card strong { font-size: 20px; line-height: 1.2; }
.tools-home-card small { color: var(--muted); font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }
.tools-home-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  color: #fff;
  background: linear-gradient(135deg, #6477f4, #4054d9);
  font-size: 17px;
  font-weight: 750;
  box-shadow: 0 10px 22px rgba(79, 99, 233, .22);
}
.tools-home-card.is-password .tools-home-icon { background: linear-gradient(135deg, #8a63e8, #6850c9); }
.tools-home-card.is-version .tools-home-icon { background: linear-gradient(135deg, #3e9bd8, #2b71bd); }
.tools-home-card.is-maintain .tools-home-icon { background: linear-gradient(135deg, #26a88b, #177b69); }
.tools-home-arrow { grid-column: 2; color: var(--cyan); font-size: 13px; font-weight: 650; }
#btn-tools-home { margin: 0 0 12px; }
.tool-hint {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}
.tool-ver-notes {
  margin: 0 0 10px;
  padding-left: 1.1rem;
  color: var(--muted);
  font-size: 12px;
}
.tool-ver-notes:empty { display: none; }
.tool-check {
  grid-template-columns: auto 1fr;
  align-items: center;
  margin: 4px 0 8px;
}
.health-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.health-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 10px;
  background: var(--bg-3);
  min-width: 0;
}
.health-card h4 {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.health-kv { margin: 0; font-size: 12px; line-height: 1.5; }
.health-kv dt { color: var(--muted); display: inline; }
.health-kv dt::after { content: ': '; }
.health-kv dd { display: inline; margin: 0 10px 0 0; }
.health-bar { display: flex; align-items: center; gap: 8px; font-size: 12px; margin: 4px 0; }
.health-bar .track {
  flex: 1;
  height: 6px;
  border-radius: var(--radius);
  background: var(--line);
  overflow: hidden;
}
.health-bar .track i {
  display: block;
  height: 100%;
  border-radius: var(--radius);
  background: var(--ok);
}
.health-bar.warn .track i { background: var(--warn); }
.health-bar.crit .track i { background: var(--bad); }
.health-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 12px; }
.health-list li { display: flex; justify-content: space-between; gap: 8px; }
.health-list .ok { color: var(--ok); }
.health-list .warn { color: var(--warn); }
.health-list .bad { color: var(--bad); }
.health-list .muted { color: var(--muted); }
.health-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
}
.health-pill.ok { color: var(--ok); border-color: rgba(115,191,105,0.35); }
.health-pill.warn { color: var(--warn); border-color: rgba(255,152,48,0.35); }
.health-pill.crit { color: var(--bad); border-color: rgba(242,73,92,0.35); }
.health-updates { max-height: 120px; overflow: auto; font-size: 11px; color: var(--muted); }
.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 6px 14px 10px;
  border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
}
.access-care {
  margin: 0 14px 8px;
  padding: 10px 12px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-2);
}
.access-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.access-head > div { display: grid; gap: 2px; }
.access-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}
.access-step {
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-3);
}
.access-step span { display: block; color: var(--muted); font-size: 10px; }
.access-step strong { display: block; margin-top: 2px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.access-step.ok strong { color: var(--ok); }
.access-step.warn strong { color: var(--warn); }
.access-step.bad strong { color: var(--bad); }
.access-summary { margin: 9px 0 0; color: var(--muted); font-size: 12px; }
.access-summary.ok { color: var(--ok); }
.access-summary.warn { color: var(--warn); }
.access-summary.bad { color: var(--bad); }
.bootstrap-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.win-boot {
  padding: 10px 14px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--on);
  flex: 0 0 auto;
}
.win-boot p { margin: 0 0 8px; color: var(--muted); }
.win-boot pre {
  margin: 0 0 8px;
  padding: 8px 10px;
  background: var(--console);
  color: #c7c8ca;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-all;
  font: 12px/1.45 var(--mono);
}
@media (max-width: 900px) {
  .access-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ops-target { grid-template-columns: 1fr 1fr; }
  .ops-status { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.console-wrap {
  min-height: 0;
  flex: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  margin: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background: var(--console);
}
.console-head {
  display: flex;
  justify-content: space-between;
  padding: 8px 12px;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.busy { color: var(--warn); }
.term {
  height: 340px;
  min-height: 240px;
  background: var(--console);
  padding: 8px;
}
.detail.session .term { height: 100%; }
.term-dumb {
  margin: 0;
  overflow: auto;
  font: 12px/1.5 var(--mono);
  color: #c7c8ca;
  white-space: pre-wrap;
  outline: none;
}
.term .xterm { height: 100%; }
.term .xterm-viewport { background: var(--console) !important; }
.shell.rd-full {
  grid-template-columns: 1fr;
}
.shell.rd-full .rail,
.shell.rd-full .bar,
.shell.rd-full .stage > :not(#view-rd) {
  display: none !important;
}
.shell.rd-full .stage {
  height: 100%;
}
.stage > .view-rd {
  width: 100%;
  min-width: 0;
  min-height: 0;
  flex: 1;
  align-self: stretch;
}
.view-rd {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--canvas);
}
.rd-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--bar);
  border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
}
.rd-bar strong { font-size: 14px; font-weight: 600; }
.rd-sub { color: var(--muted); font-size: 12px; }
.rd-bar-spacer { flex: 1; }
.rd-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
  background: var(--console);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rd-wrap canvas {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  cursor: none;
  outline: none;
  background: var(--canvas);
  touch-action: none;
}
.rd-cursor {
  position: absolute;
  left: 0;
  top: 0;
  width: 14px;
  height: 20px;
  pointer-events: none;
  z-index: 3;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='20'><path d='M1 1v16l4.2-4.2 2.6 6.2 2.2-.9-2.6-6.2H13z' fill='%23fff' stroke='%23111' stroke-width='1.2' stroke-linejoin='round'/></svg>") no-repeat;
}
.rd-hint {
  position: absolute;
  inset: 0;
  margin: auto;
  height: fit-content;
  max-width: 46ch;
  padding: 16px;
  color: var(--muted);
  text-align: center;
  pointer-events: none;
}
.console {
  margin: 0;
  padding: 12px;
  overflow: auto;
  font: 12px/1.5 var(--mono);
  color: #c7c8ca;
  white-space: pre-wrap;
}
.exec {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border-top: 1px solid var(--line);
  background: var(--console);
}
.exec .prompt { color: var(--ok); padding-left: 8px; font-weight: 600; }
.exec button {
  background: var(--gold);
  color: #fff;
  border: 0;
  border-radius: var(--radius);
  padding: 7px 12px;
}

.drawer {
  position: fixed;
  inset: 0;
  background: rgba(8, 9, 12, 0.72);
  backdrop-filter: blur(4px);
  display: grid;
  justify-items: end;
}
.drawer-panel {
  width: min(440px, 100%);
  height: 100%;
  background: var(--bar);
  border-left: 1px solid var(--line-2);
  padding: 20px;
  overflow: auto;
}
.drawer-panel header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.drawer-panel h2 { margin: 0; font-weight: 600; font-size: 18px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lab-guests { display: grid; gap: 8px; margin-bottom: 14px; }
.lab-guests-head { margin: 0; color: var(--muted); font-size: 11px; }
.lab-guest {
  display: grid;
  gap: 2px;
  text-align: left;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-2);
  color: inherit;
  cursor: pointer;
}
.lab-guest:hover { border-color: var(--gold); background: var(--on); }
.lab-guest small { color: var(--muted); font-size: 11px; }
.fp-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.fp-row input { width: 100%; min-width: 0; }
.fp-hint { display: block; margin-top: 6px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.form-hint { margin: -4px 0 2px; color: var(--muted); font-size: 11px; line-height: 1.45; }

.products-view, .guide-view {
  padding: 0;
  overflow: auto;
  min-height: 0;
  flex: 1 1 auto;
  width: 100%;
  background: var(--bg-2);
}
.guide-block {
  max-width: none;
  margin-top: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-3);
  box-shadow: var(--shadow);
}
.guide-block h3 {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 600;
}
.guide-block ul, .guide-block ol {
  margin: 0;
  padding-left: 1.2em;
  color: var(--muted);
}
.guide-block li { margin: 0 0 6px; }
.guide-block p { color: var(--muted); margin: 0 0 8px; }
.guide-block pre {
  margin: 0 0 8px;
  padding: 10px 12px;
  background: var(--console);
  color: #c7c8ca;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: auto;
  white-space: pre-wrap;
  font: 12px/1.45 var(--mono);
}
.guide-note { font-size: 12px; }
.guide-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0 14px;
}
.guide-next { margin: 12px 0 0; }
.guide-next li { margin: 0 0 8px; }
.prod-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 22px;
  max-width: 720px;
  width: 100%;
}
.os-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
  max-width: 720px;
  width: 100%;
}
.prod-grid, .os-grid { max-width: none; }
.prod-card, .os-card {
  text-align: left;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 18px 16px 16px;
  color: inherit;
  min-height: 140px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 8px;
  box-shadow: var(--shadow);
  transition: border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}
.install-section {
  width: 100%;
  margin-top: 24px;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: color-mix(in srgb, var(--bg-3) 88%, transparent);
  box-shadow: var(--shadow);
}
.install-section + .install-section { margin-top: 22px; }
.install-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}
.install-section-head h3 {
  margin: 5px 0 0;
  color: var(--text);
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.install-section-head p {
  max-width: 680px;
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}
.install-section-kicker {
  color: var(--gold-2);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.install-section-count {
  flex: 0 0 auto;
  padding: 7px 11px;
  border-radius: 999px;
  background: var(--gold-dim);
  color: var(--gold-2);
  font-size: 11px;
  font-weight: 700;
}
.prod-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 0;
  min-height: 300px;
  padding: 22px;
  overflow: hidden;
}
.prod-card::after {
  position: absolute;
  inset: auto -28px -48px auto;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--gold-dim);
  content: '';
  opacity: 0.55;
  pointer-events: none;
}
.prod-icon {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  border-radius: 18px;
  background: var(--gold-dim);
  color: var(--gold-2);
}
.prod-icon svg { width: 34px; height: 34px; display: block; }
.prod-icon-pulse { color: var(--cyan); background: color-mix(in srgb, var(--cyan) 10%, transparent); }
.prod-icon-rafivo { color: var(--ok); background: color-mix(in srgb, var(--ok) 11%, transparent); }
.prod-card-copy { width: 100%; min-width: 0; display: flex; flex: 1; flex-direction: column; align-items: flex-start; }
.prod-card-copy > strong { margin-top: 18px; font-size: 18px; line-height: 1.3; }
.prod-card-copy .prod-version { margin-top: 8px; }
.prod-description {
  margin-top: 13px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.58;
  overflow-wrap: anywhere;
}
.prod-card-action {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  padding-top: 16px;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
}
.prod-card-action span { color: var(--gold-2); font-size: 16px; transition: transform 0.15s ease; }
.prod-card:hover .prod-card-action span { transform: translateX(3px); }
.prod-card:hover, .os-card:hover {
  border-color: var(--gold);
  background: var(--on);
}
.os-card:disabled { opacity: 0.38; cursor: not-allowed; }
.os-card strong {
  display: block;
  font-size: 16px;
  font-weight: 600;
}
.prod-version {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--gold-dim);
  color: var(--gold-2);
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.prod-version.muted {
  background: var(--bg-2);
  color: var(--muted);
  border: 1px solid var(--line);
}
.os-card span { color: var(--muted); font-size: 13px; }
.os-ico {
  width: 28px;
  height: 28px;
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  background: var(--gold-dim);
  color: var(--gold-2);
  margin-bottom: 4px;
}
.os-ico svg { display: block; }
.page-intro { max-width: 640px; }
.page-intro .btn-ghost { margin-bottom: 14px; }
.manual-install {
  width: 100%;
  max-width: none;
}
.manual-install > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.manual-install h3 { font-weight: 700; }
#manual-install-body { display: grid; gap: 18px; }
.manual-product {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-3);
  box-shadow: var(--shadow);
}
.manual-product summary {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 62px;
  padding: 15px 18px;
  cursor: pointer;
  list-style-position: inside;
}
.manual-product summary strong { font-size: 14px; }
.manual-product summary span { color: var(--muted); font-size: 12px; line-height: 1.45; }
.manual-product summary em {
  margin-left: auto;
  color: var(--gold-2);
  font-size: 12px;
  font-style: normal;
  font-weight: 650;
}
.manual-kind { display: grid; gap: 10px; margin: 12px 0 4px; }
.manual-kind > strong { font-size: 12px; }
.manual-steps {
  margin: 0;
  padding: 4px 14px 14px 42px;
}
.manual-steps > li {
  padding: 14px 0 14px 5px;
  border-top: 1px solid var(--line);
}
.manual-steps pre {
  margin: 10px 0 0;
  padding: 10px 12px;
  overflow-x: auto;
  font-size: 11px;
  line-height: 1.45;
  white-space: pre-wrap;
}
.manual-steps > li::marker { color: var(--gold-2); font-weight: 600; }
.manual-steps strong { font-size: 13px; }
.manual-steps p { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.manual-steps code, .manual-package code {
  font-family: var(--mono);
  color: var(--code-fg);
  background: var(--code-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1px 5px;
}
.manual-links, .manual-files {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.manual-links a, .manual-files a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  color: var(--text);
  background: var(--bg-3);
  font-size: 11px;
  text-decoration: none;
}
.manual-links a:hover, .manual-files a:hover { border-color: var(--gold); background: var(--on); }
.manual-files a.primary { border-color: var(--gold); }
.manual-files small { color: var(--muted); font-size: 10px; }
.manual-packages {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 8px;
}
.manual-packages.one { grid-template-columns: minmax(0, 1fr); }
.manual-package {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-3);
}
.manual-package > strong { font-size: 11px; }
.manual-package > code {
  display: block;
  overflow-wrap: anywhere;
  color: var(--code-fg);
  font-size: 11px;
  line-height: 1.45;
  white-space: normal;
}
.manual-package.missing span, .manual-unset, .manual-loading { color: var(--muted); font-size: 11px; }
.manual-error { color: var(--bad); font-size: 12px; }

.play-head { display: flex; gap: 14px; align-items: center; margin-bottom: 18px; }
.play-head h2 { margin: 0; font-size: 18px; }
.play-body { padding: 16px 18px 18px; }
.play-machine { display: grid; gap: 6px; max-width: none; margin-bottom: 0; color: var(--muted); font-size: 12px; letter-spacing: 0; text-transform: none; }
.play-machine select { width: min(100%, 560px); }
.play-machine-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  margin: 16px 0 18px;
}
.play-machine-actions .gf-btn-blue { margin: 0; }
.play-scan-summary { margin: 0; font-size: 12px; color: var(--muted); }
.play-scan-summary:empty { display: none; }
.play-scan-summary.is-ok { color: var(--ok); }
.play-scan-summary.is-bad { color: var(--bad); }
.play-scan-summary.is-busy { color: var(--cyan); }
.play-scan-bar { display: flex; gap: 12px; align-items: center; margin: 0 0 14px; }
.scan-list { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 6px; max-width: none; }
.scan-list li {
  display: flex; gap: 10px; align-items: baseline;
  font-size: 13px; color: var(--muted);
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-3);
}
.scan-list .mark { font-weight: 600; min-width: 36px; font-size: 11px; letter-spacing: 0.08em; }
.scan-list .var { color: var(--ok); }
.scan-list .yok { color: var(--bad); }
.steps {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}
.steps li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  align-items: start;
  padding: 12px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-3);
}
.steps li.now { border-color: var(--gold); background: var(--on); }
.steps li.ok { border-color: rgba(115,191,105,0.35); }
.steps li.err { border-color: rgba(242,73,92,0.45); }
.step-num {
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--elev);
  font-size: 11px;
  color: var(--cyan);
}
.steps li.ok .step-num { background: rgba(115,191,105,0.15); color: var(--ok); }
.play-ask {
  margin-top: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  background: var(--bg-3);
}
.play-release {
  width: 100%;
  display: grid;
  gap: 10px;
  margin: 8px 0;
  font-size: 13px;
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0;
}
.play-release h3 { margin: 8px 0 4px; color: var(--gold-2); font-size: 12px; letter-spacing: 0; text-transform: none; }
.play-release ul { margin: 0; padding-left: 18px; }
.release-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 2px 0 4px;
}
.release-flags:empty { display: none; }
.release-flags span {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(255, 152, 48, 0.35);
  border-radius: 999px;
  padding: 3px 8px;
  background: rgba(255, 152, 48, 0.1);
  color: var(--warn);
  font-size: 11px;
  font-weight: 600;
}
.play-done { color: var(--ok); }
#play-log {
  min-height: 160px;
  max-height: 280px;
  overflow: auto;
  background: var(--console);
  padding: 12px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  max-width: 920px;
}

.gf {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: auto;
  min-height: 0;
  flex: 1 1 auto;
  width: 100%;
  background: var(--bg-2);
}
.gf-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  padding: 0 0 16px;
}
.gf-filters label {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 12px;
  color: var(--muted);
}
.gf-filters select {
  background: var(--input);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: 8px 10px;
  color: var(--text);
  min-width: 140px;
}
.gf-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  margin-bottom: 18px;
}
.stat-tile {
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 15px;
  min-width: 0;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.stat-tile .label { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.stat-tile .value {
  font-size: 26px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.stat-tile .value.ok { color: var(--ok); }
.stat-tile .value.cyan { color: var(--cyan); }
.stat-tile .value.purple { color: var(--purple); }
.stat-tile .value.yellow { color: var(--yellow); }
.stat-tile .value.red { color: var(--bad); }
.spark-wrap {
  display: block;
  width: 100%;
  height: 28px;
  margin-top: 6px;
  overflow: hidden;
  line-height: 0;
}
.stat-tile .spark {
  display: block;
  width: 100%;
  height: 28px;
  max-height: 28px;
}
.gf-charts {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  width: 100%;
  min-width: 0;
}
.gf-bottom {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 12px;
  min-height: 200px;
  width: 100%;
  min-width: 0;
  margin-top: 12px;
}
.gf-panel {
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  min-height: 0;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow);
}
.gf-charts .gf-panel { min-height: 220px; }
.gf-panel header {
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  border-bottom: 1px solid var(--line);
}
.gf-body { padding: 10px 12px 12px; flex: 1; min-height: 0; }
.gf-scroll { overflow: auto; }
.gf-muted { color: var(--muted); font-size: 12px; padding: 18px 4px; }
.hbar {
  display: grid;
  grid-template-columns: minmax(72px, 34%) 1fr 42px;
  gap: 8px;
  align-items: center;
  margin: 8px 0;
  font-size: 12px;
}
.hbar .name { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar .track {
  height: 8px;
  background: var(--elev);
  border-radius: 999px;
  overflow: hidden;
}
.hbar .track i { display: block; height: 100%; }
.hbar b { text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; }
.gf-jobs-chart, #gf-jobs-chart { min-height: 0; overflow: hidden; }
.gf-chart { width: 100%; height: 168px; max-height: 168px; display: block; }
.gf-donut-wrap { display: flex; align-items: center; gap: 16px; }
.gf-donut-wrap svg { width: 140px; height: 140px; flex: 0 0 auto; }
.gf-legend { display: grid; gap: 6px; font-size: 12px; }
.gf-legend span { display: flex; gap: 8px; align-items: center; color: var(--muted); }
.gf-legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.gf-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.gf-table th {
  text-align: left;
  color: var(--muted);
  font-weight: 500;
  padding: 7px 8px;
  border-bottom: 1px solid var(--line);
}
.gf-table td { padding: 8px; border-bottom: 1px solid var(--table-line); }
.gf-table tr:hover { background: var(--elev); cursor: pointer; }
.gf-table tr.sel { background: var(--on); }
.gauge {
  height: 6px;
  background: var(--elev);
  border-radius: 2px;
  overflow: hidden;
  width: 72px;
}
.gauge > i { display: block; height: 100%; }
.gf-tabs {
  display: flex;
  gap: 0;
  padding: 0 !important;
}
.gf-tabs button {
  flex: 1;
  background: transparent;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  color: var(--muted);
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 500;
}
.gf-tabs button.on {
  color: var(--text);
  background: var(--on);
}
.gf-tabs button b {
  display: inline-block;
  min-width: 16px;
  margin-left: 6px;
  padding: 0 5px;
  border-radius: 8px;
  background: var(--rail);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.gf-side {
  min-height: 240px;
}
.gf-events-pane {
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.event-tools {
  display: flex;
  gap: 6px;
  padding: 8px 10px 0;
  flex: 0 0 auto;
}
.event-tools input, .event-tools select {
  background: var(--input);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: 4px 8px;
  color: var(--text);
  min-width: 0;
}
.event-tools input { flex: 1; }
.alert-item, .event-item {
  display: grid;
  gap: 8px;
  align-items: center;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--table-line);
  border-radius: 0;
  padding: 8px 2px;
  color: inherit;
  font: inherit;
}
.alert-item {
  grid-template-columns: 64px minmax(0, 1fr) auto;
}
.event-item {
  grid-template-columns: 64px 52px minmax(0, 1fr);
}
.alert-item:hover, .event-item:hover { background: var(--elev); }
.alert-copy {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.alert-copy b {
  font-weight: 600;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.alert-copy span, .event-copy span {
  color: var(--muted);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.event-copy {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.event-copy b {
  font-weight: 600;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.event-quiet {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}
.event-quiet input { margin: 0; }
.alert-item time, .event-item time {
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sev-info { background: rgba(87, 148, 242, 0.16); color: var(--cyan); }
.sev {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: var(--radius);
  text-align: center;
}
.sev-crit { background: rgba(242, 73, 92, 0.18); color: var(--bad); }
.sev-warn { background: rgba(255, 152, 48, 0.18); color: var(--warn); }

.backup-view { padding: 0; overflow: auto; background: var(--bg-2); }
.shell.page-mode .bar-meta #panel-url,
.shell.page-mode .bar-meta .gf-time,
.shell.page-mode .bar-meta #clock,
.shell.page-mode .bar-meta #btn-add-bar,
.shell.page-mode .bar-meta #btn-share { display: none; }
.page-shell, .backup-shell { width: min(1360px, calc(100% - 56px)); margin: 0 auto; padding: 28px 0 72px; }
.backup-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 20px;
  padding: 24px 26px;
  border: 1px solid rgba(79, 99, 233, .14);
  border-radius: 20px;
  background:
    linear-gradient(120deg, rgba(79, 99, 233, .11), rgba(74, 144, 226, .035) 58%, transparent),
    var(--bg-3);
  box-shadow: var(--shadow);
}
.backup-hero > div:first-child { min-width: 0; }
.backup-hero h2 { margin: 5px 0 7px; font-size: clamp(28px, 3vw, 38px); line-height: 1.05; letter-spacing: -.04em; }
.backup-hero p { max-width: 64ch; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.backup-eyebrow { color: var(--cyan); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.backup-hero-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.backup-hero-actions .btn-ghost, .backup-hero-actions .gf-btn-blue, .backup-hero-actions .gf-btn-outline { min-height: 40px; padding-inline: 16px; }
.backup-overview {
  display: grid;
  grid-template-columns: minmax(260px, 1.3fr) repeat(2, minmax(180px, 1fr));
  grid-template-rows: repeat(2, minmax(82px, auto));
  gap: 12px;
  margin-bottom: 20px;
}
.backup-overview:not(#machine-kpis) > .backup-metric-card:first-child { grid-row: 1 / span 2; }
#machine-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.backup-metric-card { min-width: 0; display: flex; align-items: center; gap: 14px; padding: 17px 18px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--bg-3); box-shadow: var(--shadow); }
.backup-overview:not(#machine-kpis) > .backup-metric-card:first-child {
  align-items: flex-start;
  padding: 22px;
  background: linear-gradient(145deg, rgba(79, 99, 233, .10), rgba(255,255,255,.4) 60%), var(--bg-3);
}
html[data-theme='dark'] .backup-overview:not(#machine-kpis) > .backup-metric-card:first-child {
  background: linear-gradient(145deg, rgba(87, 116, 242, .18), rgba(24,27,31,.32) 68%), var(--bg-3);
}
.backup-overview:not(#machine-kpis) > .backup-metric-card:first-child .backup-metric-icon { width: 42px; height: 42px; flex-basis: 42px; border-radius: 13px; }
.backup-overview:not(#machine-kpis) > .backup-metric-card:first-child strong { font-size: clamp(22px, 2.2vw, 30px); }
.backup-metric-card > div { min-width: 0; display: grid; gap: 2px; }
.backup-metric-card > div > span, .backup-metric-card small { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.backup-metric-card strong { min-width: 0; color: var(--text); font-size: 20px; font-weight: 700; line-height: 1.16; overflow-wrap: anywhere; }
.backup-metric-icon { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border-radius: 9px; background: var(--elev); color: var(--muted); font-weight: 700; }
.backup-metric-card.is-good .backup-metric-icon { color: var(--good); background: rgba(50, 180, 120, .12); }
.backup-metric-card.is-warn .backup-metric-icon { color: var(--warn); background: rgba(255, 152, 48, .14); }
.backup-metric-card.is-bad .backup-metric-icon { color: var(--bad); background: rgba(242, 73, 92, .12); }
.backup-metric-card.is-link { cursor: pointer; }
.backup-metric-card.is-link:hover { box-shadow: 0 2px 8px rgba(20, 30, 55, .08); }
.backup-metric-card.is-link:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.backup-ai-card { overflow: hidden; margin-bottom: 20px; border: 1px solid rgba(79, 99, 233, .18); border-radius: 20px; background: var(--bg-3); box-shadow: 0 16px 42px rgba(47, 64, 122, .08); }
.backup-ai-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; padding: 18px 20px; border-bottom: 1px solid var(--line); background: linear-gradient(90deg, rgba(79, 99, 233, .075), transparent 72%); }
.backup-ai-identity { min-width: 0; display: flex; align-items: center; gap: 12px; }
.backup-ai-identity > div { display: grid; gap: 2px; }
.backup-ai-identity strong { font-size: 15px; }
.backup-ai-identity span:not(.backup-ai-orb) { max-width: min(66vw, 720px); color: var(--muted); font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
.backup-ai-orb { width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center; border-radius: 13px; color: white; background: linear-gradient(135deg, #7957f7, #356fe2); box-shadow: 0 10px 24px rgba(79, 80, 230, .30); }
.backup-ai-head label { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; }
.backup-ai-head select, .backup-ai-form input { color: var(--text); background: var(--input); border: 1px solid var(--line-2); border-radius: 8px; padding: 9px 11px; }
.backup-ai-body { padding: 20px; }
.backup-ai-prompts { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 10px; }
.backup-ai-prompts button { border: 1px solid var(--line-2); border-radius: 999px; padding: 8px 12px; color: var(--muted); background: var(--bg-2); cursor: pointer; font: inherit; font-size: 12px; }
.backup-ai-prompts button:hover { color: var(--text); border-color: var(--cyan); background: var(--elev); }
.backup-ai-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; margin-bottom: 16px; }
.backup-ai-form input { min-width: 0; min-height: 42px; }
.backup-ai-form button { min-height: 42px; min-width: 64px; }
.backup-ai-result { min-height: 70px; }
.backup-ai-summary { padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-2); }
.backup-ai-answer { display: flex; gap: 11px; align-items: flex-start; }
.backup-ai-answer > div { min-width: 0; }
.backup-ai-answer-icon { color: var(--purple); font-size: 17px; }
.backup-ai-summary h3, .backup-ai-summary h4 { margin: 0 0 6px; }
.backup-ai-summary h3 { font-size: 15px; }
.backup-ai-summary p { margin: 0 0 12px; color: var(--text); font-size: 14px; line-height: 1.65; overflow-wrap: anywhere; }
.backup-ai-summary ul, .backup-ai-summary ol { margin: 0; padding-left: 18px; color: var(--muted); line-height: 1.55; }
.backup-ai-healthy { border-color: rgba(50, 180, 120, .35); }
.backup-ai-warning, .backup-ai-no_data { border-color: rgba(255, 152, 48, .4); }
.backup-ai-critical { border-color: rgba(242, 73, 92, .4); }
.backup-ai-numbers { display: flex; flex-wrap: wrap; gap: 7px; margin: 2px 0 10px 28px; }
.backup-ai-numbers span { padding: 6px 9px; border-radius: 8px; color: var(--muted); background: var(--elev); font-size: 12px; }
.backup-ai-numbers b { color: var(--text); }
.backup-ai-more { margin: 4px 0 0 28px; }
.backup-ai-more > summary { color: var(--cyan); cursor: pointer; font-size: 11px; font-weight: 600; }
.backup-ai-more > div { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding-top: 12px; }
.backup-ai-stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; border-top: 1px solid var(--line); background: var(--line); }
.backup-ai-stage { min-width: 0; border: 0; background: var(--bg-2); }
.backup-ai-stage summary { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 13px 15px; list-style: none; cursor: pointer; }
.backup-ai-stage summary::-webkit-details-marker { display: none; }
.backup-ai-stage summary strong { min-width: 0; font-size: 12px; font-weight: 650; overflow-wrap: anywhere; }
.backup-ai-stage p { margin: 0; padding: 0 15px 14px 32px; color: var(--muted); font-size: 12px; line-height: 1.55; overflow-wrap: anywhere; }
.backup-stage-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--muted); }
.backup-stage-dot.is-healthy { background: var(--good); }
.backup-stage-dot.is-warning { background: var(--warn); }
.backup-stage-dot.is-critical { background: var(--bad); }
.backup-stage-chevron { margin-left: auto; color: var(--muted); font-size: 10px; }
.backup-section, .backup-setup, .backup-history { margin-top: 16px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--bg-3); box-shadow: var(--shadow); }
.backup-section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 17px 19px; border-bottom: 1px solid var(--line); }
.backup-section-head > div { min-width: 0; }
.backup-section-head h3 { margin: 0 0 3px; font-size: 15px; }
.backup-section-head p { margin: 0; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.backup-setup > summary, .backup-history > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-width: 0; padding: 17px 19px; list-style: none; cursor: pointer; }
.backup-setup > summary::-webkit-details-marker, .backup-history > summary::-webkit-details-marker { display: none; }
.backup-setup > summary > span:first-child, .backup-history > summary > span:first-child { min-width: 0; display: grid; gap: 3px; }
.backup-setup summary strong, .backup-history summary strong { overflow-wrap: anywhere; }
.backup-setup summary small, .backup-history summary small { color: var(--muted); font-size: 12px; font-weight: 400; overflow-wrap: anywhere; }
.backup-chevron { color: var(--muted); transition: transform .2s ease; }
.backup-setup[open] > summary .backup-chevron, .backup-history[open] > summary .backup-chevron { transform: rotate(180deg); }
.backup-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 0 14px 14px; }
.backup-form-card { overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); }
.backup-form-card > header { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.backup-form-card > header > div { display: grid; gap: 2px; }
.backup-form-card header small { color: var(--muted); font-size: 10px; }
.backup-source-icon, .backup-source-mark { display: grid; place-items: center; border-radius: 7px; color: var(--cyan); background: rgba(87, 148, 242, .12); font-size: 10px; font-weight: 800; }
.backup-source-icon { width: 34px; height: 34px; }
.backup-source-icon.veeam { color: var(--purple); background: rgba(126, 90, 240, .12); }
.backup-form { display: grid; gap: 10px; padding: 14px; }
.backup-form label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; }
.backup-form input, .backup-form select, .backup-form textarea {
  width: 100%; min-width: 0; color: var(--text); background: var(--input); border: 1px solid var(--line-2); border-radius: 9px; padding: 10px 11px;
}
.backup-form textarea { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; resize: vertical; }
.ai-model-results { display: grid; gap: 8px; padding: 0 14px 14px; max-height: 320px; overflow: auto; }
.ai-model-pick { display: grid; gap: 4px; text-align: left; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-2); color: var(--text); cursor: pointer; }
.ai-model-pick:hover { border-color: var(--gold); background: var(--on); }
.ai-model-pick em { color: var(--warn); font-style: normal; font-size: 11px; }
.ai-endpoint a { color: var(--cyan); word-break: break-all; }
.ai-wizard-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 18px; }
.ai-wizard-card { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 18px; background: var(--bg-3); display: grid; gap: 10px; box-shadow: var(--shadow); }
.ai-wizard-card h3 { margin: 0; font-size: 16px; }
.ai-wizard-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.ai-wizard-card ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: 12px; }
.ai-wizard-card .gf-btn-blue { justify-self: start; }
.ai-wizard-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px; color: white; background: linear-gradient(135deg, #7147f8, #3478e5); font-size: 16px; }
.ai-wizard-mark.cloud { background: linear-gradient(135deg, #3478e5, #1aa7a1); }
.ai-wizard-panel { margin: 12px 0; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-3); box-shadow: var(--shadow); }
.wizard-stages {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-2);
}
.wizard-stages li {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 11px;
  border-right: 1px solid var(--line);
  background: transparent;
}
.wizard-stages li:last-child { border-right: 0; }
.wizard-stages li.now { background: var(--on); }
.wizard-stages li.ok .backup-stage-dot { background: var(--good); }
.wizard-stages li.now .backup-stage-dot { background: var(--warn); }
.wizard-stages strong { overflow: hidden; font-size: 11px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.wizard-stages .backup-stage-chevron { margin-left: auto; color: var(--muted); font-size: 10px; }
.backup-draft, .backup-stopped, .backup-destroyed { color: var(--muted); }
.backup-provisioning { color: var(--cyan); background: rgba(87, 148, 242, .16); }
.guide-block {
  max-width: none;
  margin-top: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-3);
  box-shadow: var(--shadow);
}
.guide-block pre { border-radius: var(--radius); }
.play-ask {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.drawer-panel { box-shadow: var(--shadow-lg); }
.ai-wizard-panel label { display: grid; gap: 5px; margin-bottom: 10px; color: var(--muted); font-size: 12px; }
.ai-wizard-panel input, .ai-wizard-panel select, .ai-wizard-panel textarea {
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--input); color: var(--text);
}
.ai-preflight-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 8px 0; }
.ai-review-box { font-family: var(--mono); font-size: 11px; white-space: pre-wrap; background: var(--code-bg); color: var(--code-fg); padding: 12px; border-radius: 6px; overflow: auto; max-height: 280px; }
@media (max-width: 900px) {
  .ai-wizard-cards { grid-template-columns: 1fr; }
  .ai-preflight-grid { grid-template-columns: 1fr; }
}
.backup-list { display: grid; }
.backup-row { display: grid; grid-template-columns: 38px minmax(220px, 1fr) auto 145px auto; gap: 12px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--table-line); }
.backup-row:first-child { border-top: 0; }
.backup-source-mark { width: 34px; height: 34px; }
.backup-source-copy { min-width: 0; display: grid; gap: 3px; }
.backup-source-copy strong { font-size: 12px; }
.backup-source-copy span { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.backup-meta { font-size: 11px; }
.backup-meta { min-width: 0; display: grid; gap: 3px; color: var(--muted); }
.backup-row-actions { display: flex; align-items: center; gap: 6px; }
.backup-icon-button { width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 7px; color: var(--muted); background: transparent; cursor: pointer; font-size: 17px; }
.backup-icon-button:hover { color: var(--bad); background: rgba(242, 73, 92, .1); }
.backup-state { display: inline-block; border-radius: 999px; padding: 3px 8px; text-align: center; font-size: 11px; font-weight: 600; background: var(--elev); }
.backup-protected, .backup-success { color: var(--good); background: rgba(50, 180, 120, .13); }
.backup-overdue, .backup-unverified, .backup-warning { color: var(--warn); background: rgba(255, 152, 48, .16); }
.backup-failed { color: var(--bad); background: rgba(242, 73, 92, .16); }
.backup-running { color: var(--cyan); background: rgba(87, 148, 242, .16); }
.backup-run { display: grid; grid-template-columns: 90px minmax(180px, 1fr) 100px 130px 90px; gap: 10px; align-items: center; padding: 10px 16px; border-top: 1px solid var(--table-line); font-size: 11px; }
.backup-run > span:not(.backup-state) { color: var(--muted); }
.backup-empty { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 22px 16px; }
.backup-empty > div { flex: 1; }
.backup-empty p { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; overflow-wrap: anywhere; }
.backup-empty-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px; color: var(--cyan); background: rgba(87, 148, 242, .12); font-size: 17px; }

/* Dense operational controls become one calm toolbar instead of loose fields. */
.gf-filters {
  gap: 10px;
  margin-bottom: 16px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.62);
  box-shadow: var(--shadow);
}
html[data-theme='dark'] .gf-filters { background: rgba(24,27,31,.78); }
.gf-filters label { min-width: 0; }
.gf-filters select { min-width: 0; width: clamp(130px, 14vw, 190px); }
.gf-panel { overflow: hidden; border-radius: 16px; }
.gf-panel header { padding: 16px 18px; }
.gf-body { padding: 13px 16px 16px; }
.gf-table { min-width: 620px; }
.gf-scroll { overflow: auto; }
.rail-nav button.on { box-shadow: inset 3px 0 0 var(--gold); }

/* Never let long tenant, endpoint, model or status text invade a neighbour. */
.backup-row > *, .backup-run > *, .ai-wizard-card > *, .ai-wizard-panel > *,
.play-ask > *, .guide-block > *, .gf-panel > * { min-width: 0; }
.backup-source-copy span, .ai-endpoint, .ai-review-box, .ops-message,
.play-scan-summary, .access-summary { overflow-wrap: anywhere; }

@media (max-width: 1280px) {
  .gf-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gf-charts, .gf-bottom { grid-template-columns: 1fr; }
  .backup-overview { grid-template-columns: minmax(240px, 1.25fr) repeat(2, minmax(160px, 1fr)); }
  #machine-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; }
  .wizard-stages { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .backup-ai-stages { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .tool-version-split { grid-template-columns: 1fr; }
  .os-grid, .prod-grid { grid-template-columns: 1fr; max-width: 420px; }
  .manual-packages { grid-template-columns: 1fr; }
  .backup-grid { grid-template-columns: 1fr; }
  .backup-row, .backup-run { grid-template-columns: 1fr; align-items: start; }
  .backup-row-actions { flex-wrap: wrap; }
  .backup-ai-stages, .backup-ai-form, .wizard-stages { grid-template-columns: 1fr; }
  .backup-ai-more > div { grid-template-columns: 1fr; }
  .tools-home-grid, .tool-version-split { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .shell { height: auto; min-height: 100%; grid-template-columns: 1fr; align-content: start; }
  .rail {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    max-height: none;
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr);
    align-items: center;
    align-self: start;
  }
  .rail-brand { width: 62px; margin: 5px 4px; padding: 2px; }
  .rail-logo { max-width: 54px; max-height: 52px; }
  .rail-nav {
    display: flex;
    gap: 4px;
    min-width: 0;
    overflow-x: auto;
    padding: 8px 10px 8px 2px;
    border-bottom: 0;
    scrollbar-width: none;
  }
  .rail-nav::-webkit-scrollbar { display: none; }
  .rail-nav button { flex: 0 0 auto; white-space: nowrap; padding: 8px 10px; }
  .rail-section, .rail-foot { display: none; }
  .rail-tools-section {
    display: flex;
    flex-direction: row;
    align-items: center;
    grid-column: 1 / -1;
    padding: 0 10px 8px;
    border-bottom: 1px solid var(--line);
  }
  .rail-tools-section .rail-section-head { padding: 0 10px 0 0; }
  .rail-tools-section .rail-sub {
    display: flex;
    gap: 4px;
    padding: 0;
  }
  .rail-sub button { flex: 0 0 auto; white-space: nowrap; }
  .identity, .bar { flex-direction: column; align-items: flex-start; }
  .facts { min-width: 0; width: 100%; }
  .health-grid { grid-template-columns: 1fr; }
  .alert-item, .event-item { grid-template-columns: 1fr auto; }
  .backup-shell, .page-shell { width: min(100% - 28px, 1280px); padding-top: 22px; }
  .backup-hero { align-items: flex-start; flex-direction: column; }
  .backup-overview, #machine-kpis { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .backup-overview:not(#machine-kpis) > .backup-metric-card:first-child { grid-column: 1 / -1; grid-row: auto; }
  .backup-ai-head { align-items: flex-start; }
  .backup-ai-identity span:not(.backup-ai-orb) { max-width: 70vw; }
  .gf-filters { align-items: stretch; }
  .gf-filters label { flex: 1 1 190px; display: grid; gap: 5px; }
  .gf-filters select { width: 100%; }
}
@media (max-width: 560px) {
  .install-section { margin-top: 16px; padding: 20px; border-radius: 18px; }
  .install-section-head { flex-direction: column; gap: 14px; }
  .install-section-head h3 { font-size: 18px; }
  .install-section-head > button { width: 100%; }
  .prod-grid { max-width: none; gap: 12px; margin-top: 18px; }
  .prod-card { min-height: 276px; padding: 18px; }
  .prod-icon { width: 54px; height: 54px; border-radius: 15px; }
  .prod-icon svg { width: 29px; height: 29px; }
  .prod-card-copy > strong { margin-top: 15px; }
  .prod-description { font-size: 12px; line-height: 1.55; }
  .manual-product summary { align-items: flex-start; flex-direction: column; gap: 5px; padding: 15px; }
  .manual-steps { padding-right: 15px; padding-left: 34px; }
  .backup-overview, #machine-kpis { grid-template-columns: 1fr; }
  .backup-ai-stages { grid-template-columns: 1fr; }
  .backup-empty { align-items: flex-start; flex-direction: column; }
  .backup-hero { padding: 20px; }
  .backup-hero-actions { width: 100%; justify-content: stretch; }
  .backup-hero-actions > button { flex: 1 1 auto; }
  .backup-ai-head label { width: 100%; justify-content: space-between; }
  .backup-ai-form { grid-template-columns: 1fr; }
  .backup-ai-form button { width: 100%; }
  .backup-ai-numbers, .backup-ai-more { margin-left: 0; }
  .bar { flex-direction: row; align-items: center; padding: 9px 14px; }
  .bar-crumb { flex: 1; align-items: center; overflow: hidden; }
  .bar-kicker, #bar-kicker, .crumb-sep { display: none; }
  .bar h1 { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
  .bar-meta { flex: 0 0 auto; }
  .bar-meta #btn-logout { display: inline-flex; }
  .play-ask > p { flex: 1 1 100%; margin: 0 0 4px; overflow-wrap: anywhere; }
  .play-ask > button { flex: 1 1 auto; }
  .tools-home-card { min-height: 0; padding: 20px; }
  .tool-card { padding: 18px; }
  .tool-grid { grid-template-columns: 1fr; }
  .tools-machine { width: 100%; min-width: 0; }
  .tools-machine select { width: 100%; }
}