:root {
  --bg: #0a0e14;
  --bg-1: #0f141d;
  --bg-2: #161d28;
  --bg-3: #1d2632;
  --line: #232d3b;
  --txt: #c9d4e2;
  --txt-dim: #6b7a8d;
  --txt-bright: #eef3f9;
  --accent: #4ea1ff;
  --ok: #35c46b;
  --idle: #3a4658;
  --warn: #e8b339;
  --crit: #ff5f56;
  --loaded: #4ea1ff;
  --gap: #b06cf0;
  --shadow: 0 4px 18px rgba(0,0,0,.45);
  --mono: "JetBrains Mono", "Cascadia Code", "Consolas", ui-monospace, monospace;
  --sans: "Inter", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(1200px 600px at 70% -10%, #12202f 0%, var(--bg) 55%) fixed;
  color: var(--txt);
  font-family: var(--sans);
  font-size: 13px;
  -webkit-font-smoothing: antialiased;
}

/* ---------- topbar ---------- */
#topbar {
  display: flex; align-items: center; gap: 24px;
  padding: 10px 18px; border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--bg-1), rgba(15,20,29,.6));
  position: sticky; top: 0; z-index: 20; backdrop-filter: blur(6px);
}
.brand { display: flex; align-items: center; gap: 11px; min-width: 190px; }
/* Inline SVG wordmark; fill=currentColor so it inherits the theme text color
   (#eef3f9 dark / #0d121b light) - no filter, no external file, themes automatically. */
.logo { height: 30px; width: auto; display: block; flex: none; color: var(--txt-bright); }
.title { font-weight: 700; letter-spacing: .5px; color: var(--txt-bright); font-size: 15px; }
.subtitle { color: var(--txt-dim); font-size: 11px; }

.summary { display: flex; gap: 12px 18px; flex-wrap: wrap; }
/* The summary outgrew the single-row topbar (~20 tiles since the power-intent
   work): it always takes its own full-width second row; row 1 keeps brand +
   DISC CONTROL + status cluster. Kills the 200px vertical-crush at ~1450px. */
#topbar { flex-wrap: wrap; }
.summary { order: 4; flex-basis: 100%; }
.metric { display: flex; flex-direction: column; line-height: 1.15; }
.metric .v { font-family: var(--mono); font-size: 18px; font-weight: 600; color: var(--txt-bright); }
.metric .v small { font-size: 11px; color: var(--txt-dim); font-weight: 400; }
.metric .k { font-size: 10px; text-transform: uppercase; letter-spacing: .7px; color: var(--txt-dim); }
.metric .v.crit { color: var(--crit); }
.metric .v.warn { color: var(--warn); }
.metric .v.ok { color: var(--ok); }

.status-cluster { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.sources { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.src {
  font-family: var(--mono); font-size: 10px; padding: 2px 7px; border-radius: 4px;
  border: 1px solid var(--line); display: flex; align-items: center; gap: 5px;
}
.src .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--idle); }
.src.live .dot { background: var(--ok); box-shadow: 0 0 6px var(--ok); }
.src.sim .dot, .src.sim-fallback .dot { background: var(--warn); }
.src.error .dot { background: var(--crit); }
.src.sim, .src.sim-fallback { color: var(--warn); }
.src.error { color: var(--crit); }

.clock { display: flex; align-items: center; gap: 9px; }
.updated { font-family: var(--mono); font-size: 11px; color: var(--txt-dim); }
.pill {
  font-family: var(--mono); font-size: 10px; text-transform: uppercase;
  padding: 2px 8px; border-radius: 20px; border: 1px solid var(--line); letter-spacing: .5px;
}
.pill.live { color: var(--ok); border-color: var(--ok); }
.pill.sim, .pill.auto { color: var(--warn); border-color: var(--warn); }

/* ---------- tabs ---------- */
#tabs { display: flex; gap: 2px; padding: 0 16px; border-bottom: 1px solid var(--line); background: var(--bg-1); position: sticky; top: 57px; z-index: 15; }
.tab {
  background: none; border: none; color: var(--txt-dim); font-family: var(--sans);
  font-size: 13px; padding: 11px 16px; cursor: pointer; border-bottom: 2px solid transparent;
}
.tab:hover { color: var(--txt); }
.tab.active { color: var(--txt-bright); border-bottom-color: var(--accent); }
.badge { font-family: var(--mono); font-size: 10px; background: var(--crit); color: #fff; border-radius: 9px; padding: 0 6px; margin-left: 3px; }
.badge:empty { display: none; }

/* ---------- panels ---------- */
main { padding: 16px; }
.panel { display: none; }
.panel.active { display: block; animation: fade .18s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; } }
.panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.panel-head h2 { font-size: 14px; font-weight: 600; color: var(--txt-bright); margin: 0; }

/* ---------- legend ---------- */
.legend { display: flex; gap: 14px; font-size: 11px; color: var(--txt-dim); }
.legend span { display: flex; align-items: center; gap: 5px; }
.legend i { width: 11px; height: 11px; border-radius: 2px; display: inline-block; }
.head-right { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: flex-end; }
.metric-toggle { display: inline-flex; align-items: center; gap: 7px; }
.mt-label { font-size: 10px; text-transform: uppercase; letter-spacing: .6px; color: var(--txt-dim); }
.metric-btn { background: var(--bg-1); border: 1px solid var(--line); color: var(--txt-dim); font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .5px; padding: 3px 11px; cursor: pointer; }
.metric-btn:first-of-type { border-radius: 5px 0 0 5px; }
.metric-btn:last-of-type { border-radius: 0 5px 5px 0; border-left: none; }
.metric-btn:hover { color: var(--txt); }
.metric-btn.on { background: var(--accent); color: #04101f; border-color: var(--accent); font-weight: 600; }
.metric-btn.on:last-of-type { background: var(--ok); border-color: var(--ok); }
.util-num { color: var(--ok); }

/* ---------- fleet grid ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(186px, 1fr)); gap: 9px; }
.node {
  background: var(--bg-1); border: 1px solid var(--line); border-radius: 7px;
  padding: 8px 9px 9px; cursor: pointer; transition: border-color .12s, transform .12s;
  position: relative; overflow: hidden;
}
.node:hover { border-color: var(--accent); transform: translateY(-1px); }
.node.down {
  border-color: var(--crit);
  background: linear-gradient(180deg, rgba(255,95,86,.14), var(--bg-1) 70%);
  box-shadow: inset 0 0 0 1px rgba(255,95,86,.45), 0 0 14px rgba(255,95,86,.28);
  animation: downpulse 2s ease-in-out infinite;
}
.node.down:hover { border-color: var(--crit); }
.node.down .node-id, .node.down .node-vram { color: #ffb3ae; }
@keyframes downpulse {
  50% { box-shadow: inset 0 0 0 1px rgba(255,95,86,.7), 0 0 20px rgba(255,95,86,.5); }
}
.node.product { border-style: dashed; opacity: .6; }
.node-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-bottom: 3px; }
.node-id { font-family: var(--mono); font-weight: 600; color: var(--txt-bright); font-size: 12px; }
.node-id .ip { color: var(--txt-dim); font-weight: 400; font-size: 10px; margin-left: 4px; }
.node-tier { font-family: var(--mono); font-size: 9px; color: var(--txt-dim); }
/* Health dot: reflects actual node state (not just power). A flex item in
   .node-top so it never overlaps the GPU-type text. Green=active/loaded, amber=idle,
   red=down/powered-off/no-telemetry, grey=unknown. */
.health-dot { width: 8px; height: 8px; border-radius: 50%; border: 1px solid rgba(0,0,0,.3); flex: none; cursor: help; }
.health-dot.ok { background: var(--ok); box-shadow: 0 0 6px rgba(53,196,107,.6); }
.health-dot.idle { background: var(--warn); }
.health-dot.down { background: var(--crit); box-shadow: 0 0 6px rgba(255,95,86,.5); }
.health-dot.unk { background: var(--bg-3); border-color: var(--txt-dim); }
.node-model { font-size: 11px; color: var(--txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 6px; min-height: 14px; }
.node-model.empty { color: var(--txt-dim); font-style: italic; }
.node-model .grp { color: var(--accent); }

.gpus { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; }
.gpus.g6 { grid-template-columns: repeat(6, 1fr); }
.gpus.g7 { grid-template-columns: repeat(7, 1fr); }
.gpus.g5 { grid-template-columns: repeat(5, 1fr); }
.gpus.g4 { grid-template-columns: repeat(4, 1fr); }
.gpu {
  height: 26px; border-radius: 3px; background: var(--bg-3); position: relative;
  overflow: hidden; border: 1px solid #00000033;
}
.gpu .fill { position: absolute; bottom: 0; left: 0; right: 4px; background: var(--loaded); opacity: .9; transition: height .3s ease; }
.gpu .edge { position: absolute; bottom: 0; right: 0; width: 3px; opacity: .95; border-top-left-radius: 2px; transition: height .3s ease; }
.gpu .u { position: absolute; top: 1px; right: 2px; font-family: var(--mono); font-size: 7px; color: #fff; text-shadow: 0 0 2px #000; }
.gpu.nodata { background: repeating-linear-gradient(45deg, #20283400, #20283400 3px, #2c374788 3px, #2c374788 6px); }

.node-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; font-family: var(--mono); font-size: 10px; }
.node-vram { color: var(--txt-dim); }
.tag { font-size: 9px; text-transform: uppercase; letter-spacing: .4px; padding: 1px 6px; border-radius: 3px; font-family: var(--mono); }
.tag.loaded { background: rgba(78,161,255,.16); color: var(--loaded); }
.tag.idle { background: rgba(58,70,88,.5); color: var(--txt-dim); }
.tag.active { background: rgba(53,196,107,.16); color: var(--ok); }
.tag.down { background: var(--crit); color: #fff; font-weight: 700; box-shadow: 0 0 8px rgba(255,95,86,.6); }
.tag.telemetry-gap { background: rgba(176,108,240,.18); color: var(--gap); }
.tag.unknown { background: rgba(58,70,88,.3); color: var(--txt-dim); }
.flag-bmc { position: absolute; top: 6px; right: 7px; font-size: 9px; color: var(--warn); font-family: var(--mono); }
.flag-ws { position: absolute; top: 6px; right: 7px; font-size: 8px; color: var(--warn); font-family: var(--mono); background: rgba(232,179,57,.15); border: 1px solid rgba(232,179,57,.35); border-radius: 3px; padding: 0 4px; }

/* (health-dot is defined above with .node-top; the old absolute .pwr-dot that
   overlapped the GPU-type text is removed — the dot is now a flex item in .node-top) */

/* DISC membership badge (estate view; the control-API /fleet join) */
.ds-badge { font-size: 9px; text-transform: uppercase; letter-spacing: .4px; padding: 1px 6px; border-radius: 3px; font-family: var(--mono); white-space: nowrap; }
.ds-badge.ds-active   { background: rgba(53,196,107,.18); color: var(--ok); }
.ds-badge.ds-drained  { background: rgba(232,179,57,.18); color: var(--warn); }
.ds-badge.ds-idle     { background: rgba(78,161,255,.14); color: var(--loaded); }
.ds-badge.ds-standby  { background: rgba(93,211,200,.14); color: var(--accent); }
.ds-badge.ds-reserved { background: rgba(138,79,208,.20); color: #b789e8; }
.ds-badge.ds-off      { background: var(--crit); color: #fff; }
.ds-badge.ds-maas     { background: rgba(58,70,88,.4); color: var(--txt-dim); }
.ds-badge.ds-none     { display: none; }

/* infra-only nodes (control-plane / storage hosts from /fleet, no GPU skeleton):
   dimmer, no telemetry cells, shown last in the grid */
.node.infra { opacity: .65; }
.node.infra .gpus { opacity: .35; }

/* modal: DISC membership stat grid (reuses .ms / .ms-v / .ms-k) */
.ms-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px 12px; margin-top: 4px; }

/* modal: DISC actions (estate→DISC bridge) — dry-run-first, audited */
.ds-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.ds-act { font-family: var(--mono); font-size: 11px; padding: 6px 12px; border-radius: 5px;
  border: 1px solid var(--line); background: var(--bg-1); color: var(--txt); cursor: pointer; transition: background .15s; }
.ds-act:hover { background: var(--bg-3); }
.ds-act.primary { background: rgba(31,116,208,.18); border-color: var(--accent); color: var(--accent); }
.ds-act.warn { border-color: rgba(210,59,52,.5); color: var(--crit); }
.ds-act-msg { margin-top: 8px; font-size: 12px; line-height: 1.5; font-family: var(--mono); color: var(--txt); min-height: 16px; }
.ds-act-msg.ok { color: var(--ok); }
.ds-act-msg.err { color: var(--crit); }
.ds-plan { margin-bottom: 6px; }
.ds-ch { font-size: 11px; color: var(--txt-dim); padding-left: 6px; }
.ds-add-form { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.ds-add-row { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.ds-add-row > span { color: var(--txt-dim); width: 50px; flex: none; }
.ds-add-row select { background: var(--bg); border: 1px solid var(--line); color: var(--txt); border-radius: 4px; padding: 3px 6px; font-size: 12px; font-family: var(--mono); }
.ds-chks { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.ds-chk { display: flex; align-items: center; gap: 4px; font-size: 11px; font-family: var(--mono); color: var(--txt); cursor: pointer; }
.ds-chk input { margin: 0; }
.ds-add-btns { display: flex; gap: 8px; margin-top: 4px; }
.ds-act-note { margin-top: 6px; font-size: 10.5px; line-height: 1.45; color: var(--txt-dim); font-style: italic; }
.ws-callout { background: rgba(232,179,57,.1); border: 1px solid rgba(232,179,57,.35); border-radius: 7px; padding: 9px 12px; font-size: 12px; color: var(--txt); line-height: 1.5; margin-bottom: 14px; }
.ws-callout b { color: var(--warn); }

/* ---------- cards (models/queue/etc) ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
.card { background: var(--bg-1); border: 1px solid var(--line); border-radius: 8px; padding: 14px; }
.card h3 { margin: 0 0 4px; font-size: 14px; color: var(--txt-bright); display: flex; align-items: center; gap: 8px; }
.card .sub { color: var(--txt-dim); font-size: 11px; font-family: var(--mono); margin-bottom: 10px; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; font-size: 12px; }
.kv dt { color: var(--txt-dim); }
.kv dd { margin: 0; font-family: var(--mono); color: var(--txt); }
.chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.chip { font-family: var(--mono); font-size: 10px; background: var(--bg-3); border: 1px solid var(--line); border-radius: 4px; padding: 2px 6px; color: var(--txt); }
.chip.hot { border-color: var(--loaded); color: var(--loaded); }
.live-dot { font-size: 10px; color: var(--ok); }
.dead-dot { font-size: 10px; color: var(--txt-dim); }

/* ---------- tables ---------- */
table { width: 100%; border-collapse: collapse; font-size: 12px; }
th, td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--line); }
th { color: var(--txt-dim); font-weight: 500; font-size: 10px; text-transform: uppercase; letter-spacing: .6px; }
td { font-family: var(--mono); }
tr:hover td { background: var(--bg-1); }
.bar { height: 7px; background: var(--bg-3); border-radius: 4px; overflow: hidden; min-width: 80px; display: inline-block; vertical-align: middle; }
.bar > i { display: block; height: 100%; background: var(--accent); }
.bar.warn > i { background: var(--warn); }
.bar.crit > i { background: var(--crit); }

.notice { background: var(--bg-1); border: 1px dashed var(--line); border-radius: 8px; padding: 16px; color: var(--txt-dim); }
.notice b { color: var(--txt); }
.panel-controls { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.env-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.env-btn { background: var(--bg-1); border: none; color: var(--txt-dim); font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; padding: 5px 14px; cursor: pointer; border-right: 1px solid var(--line); }
.env-btn:last-child { border-right: none; }
.env-btn:hover { color: var(--txt); background: var(--bg-2); }
.env-btn.on { background: var(--accent); color: #04101f; font-weight: 600; }
.env-label { font-family: var(--mono); font-size: 11px; color: var(--txt-dim); }

.state-banner { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 6px; font-family: var(--mono); font-size: 12px; margin-bottom: 14px; }
.state-banner.off { background: rgba(232,179,57,.12); color: var(--warn); border: 1px solid rgba(232,179,57,.3); }
.state-banner.on { background: rgba(53,196,107,.12); color: var(--ok); border: 1px solid rgba(53,196,107,.3); }
.state-banner.dead { background: rgba(255,95,86,.12); color: var(--crit); border: 1px solid rgba(255,95,86,.3); }

/* ---------- alerts ---------- */
.alert-row { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-left: 3px solid var(--warn); background: var(--bg-1); border-radius: 0 6px 6px 0; margin-bottom: 6px; }
.alert-row.critical { border-left-color: var(--crit); }
.alert-row .an { font-weight: 600; color: var(--txt-bright); min-width: 180px; }
.alert-row .ai { font-family: var(--mono); color: var(--txt-dim); font-size: 11px; }
.alert-count { font-family: var(--mono); color: var(--txt-dim); margin-left: auto; }

/* ---------- modal ---------- */
.modal { position: fixed; inset: 0; background: rgba(4,7,11,.7); display: flex; align-items: center; justify-content: center; z-index: 50; }
.modal.hidden { display: none; }
.modal-card { background: var(--bg-1); border: 1px solid var(--line); border-radius: 10px; padding: 20px 22px; max-width: min(1140px, 95vw); width: 95%; box-shadow: var(--shadow); position: relative; max-height: 90vh; overflow: auto; }
.modal-card::-webkit-scrollbar { width: 8px; }
.modal-card::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 4px; }
.modal-card::-webkit-scrollbar-track { background: transparent; }
/* lower sections flow into two columns to use the width + cut scrolling */
.md-lower { column-count: 2; column-gap: 28px; margin-top: 2px; }
.md-lower > .md-sec, .md-lower > dl { break-inside: avoid; -webkit-column-break-inside: avoid; }
@media (max-width: 760px) { .md-lower { column-count: 1; } }

/* node detail modal */
.stat-strip { display: flex; flex-wrap: wrap; gap: 18px; padding: 12px 0 4px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.ms { display: flex; flex-direction: column; gap: 2px; }
.ms-v { font-family: var(--mono); font-size: 17px; font-weight: 600; color: var(--txt-bright); }
.ms-v.ok { color: var(--ok); } .ms-v.crit { color: var(--crit); }
.ms-k { font-size: 10px; text-transform: uppercase; letter-spacing: .6px; color: var(--txt-dim); }
.md-sec { margin-bottom: 14px; }
.md-h { font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--txt-dim); margin-bottom: 7px; }
.gpu-detail { display: flex; flex-direction: column; gap: 4px; }
.gd-head, .gd-row { display: grid; grid-template-columns: 48px 1fr 70px 1fr 42px; gap: 8px; align-items: center; }
.gd-head { font-size: 9px; text-transform: uppercase; letter-spacing: .5px; color: var(--txt-dim); }
.gd-lbl { font-family: var(--mono); font-size: 11px; color: var(--txt); }
.gd-bar { height: 9px; background: var(--bg-3); border-radius: 4px; overflow: hidden; }
.gd-bar > i { display: block; height: 100%; border-radius: 4px; transition: width .3s ease; }
.gd-val { font-family: var(--mono); font-size: 11px; color: var(--txt-dim); text-align: right; }
/* host telemetry graphic */
.ht-body { padding-top: 2px; }
.rings { display: flex; gap: 26px; padding: 4px 0 12px; }
.ring { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ring-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--txt); margin-top: 3px; }
.ring-sub { font-family: var(--mono); font-size: 10px; color: var(--txt-dim); text-align: center; }
.ht-disks { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }
.ht-disk { display: grid; grid-template-columns: 92px 1fr auto; gap: 10px; align-items: center; }
.ht-mnt { font-family: var(--mono); font-size: 11px; color: var(--txt); }
.ht-dval { font-family: var(--mono); font-size: 10px; color: var(--txt-dim); white-space: nowrap; }
.ht-line { display: flex; gap: 8px; align-items: baseline; font-size: 12px; color: var(--txt-dim); padding: 3px 0; }
.ht-line span:first-child { min-width: 92px; text-transform: uppercase; font-size: 10px; letter-spacing: .5px; }
.ht-line b { color: var(--txt); font-family: var(--mono); }
/* CloudWatch-style trend charts */
.trends-h { display: flex; justify-content: space-between; align-items: center; }
.win-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 5px; overflow: hidden; }
.win-btn { background: var(--bg-1); border: none; border-right: 1px solid var(--line); color: var(--txt-dim); font-family: var(--mono); font-size: 10px; padding: 3px 9px; cursor: pointer; }
.win-btn:last-child { border-right: none; }
.win-btn:hover { color: var(--txt); }
.win-btn.on { background: var(--accent); color: #04101f; font-weight: 600; }
.ts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.ts-chart { background: var(--bg); border: 1px solid var(--line); border-radius: 7px; padding: 8px 9px 5px; position: relative; }
.ts-cross { position: absolute; width: 1px; background: var(--txt); opacity: .45; pointer-events: none; display: none; }
.ts-dot { position: absolute; width: 6px; height: 6px; border-radius: 50%; box-shadow: 0 0 0 2px var(--bg); pointer-events: none; display: none; }
.ts-tip { position: absolute; background: var(--bg-3); border: 1px solid var(--line); border-radius: 4px; padding: 2px 7px; font-family: var(--mono); font-size: 10px; color: var(--txt-bright); white-space: nowrap; pointer-events: none; display: none; z-index: 6; box-shadow: var(--shadow); }
.ts-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 2px; }
.ts-title { font-size: 11px; color: var(--txt-dim); text-transform: uppercase; letter-spacing: .4px; }
.ts-now { font-family: var(--mono); font-size: 15px; font-weight: 600; }
.ts-now small { font-size: 9px; color: var(--txt-dim); margin-left: 1px; }
.ts-svg { width: 100%; height: 46px; display: block; }
.ts-foot { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 9px; color: var(--txt-dim); margin-top: 1px; }
.ts-empty { height: 46px; display: flex; align-items: center; justify-content: center; color: var(--txt-dim); font-size: 11px; }
.modal-close { position: absolute; top: 12px; right: 12px; background: none; border: none; color: var(--txt-dim); font-size: 16px; cursor: pointer; }
.modal-close:hover { color: var(--txt-bright); }

#footer { text-align: center; color: var(--txt-dim); font-size: 11px; padding: 18px; border-top: 1px solid var(--line); margin-top: 20px; }

.stale { animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .55; } }

/* ---------- power & cost tab ---------- */
.pstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.pstat { background: var(--bg-1); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; }
.pstat .v { font-family: var(--mono); font-size: 22px; font-weight: 700; color: var(--txt-bright); }
.pstat .v small { font-size: 11px; color: var(--txt-dim); font-weight: 400; }
.pstat .k { font-size: 10px; text-transform: uppercase; letter-spacing: .7px; color: var(--txt-dim); margin-top: 3px; }
.pcols { display: grid; grid-template-columns: 3fr 2fr; gap: 12px; }
@media (max-width: 980px) { .pcols { grid-template-columns: 1fr; } }
.pcard { background: var(--bg-1); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; }
.pcard h3 { margin: 0 0 10px; font-size: 12px; text-transform: uppercase; letter-spacing: .7px; color: var(--txt-dim); }
.pcard h3 .hint { text-transform: none; letter-spacing: 0; font-weight: 400; }
.hint { color: var(--txt-dim); font-size: 11px; }
.prange { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.prange button { background: var(--bg-2); border: 1px solid var(--line); color: var(--txt); border-radius: 5px; padding: 3px 10px; font-family: var(--mono); font-size: 11px; cursor: pointer; }
.prange button.active { background: var(--accent); color: #04101f; font-weight: 600; }
.prange input[type="datetime-local"] { background: var(--bg-2); border: 1px solid var(--line); color: var(--txt); border-radius: 5px; padding: 2px 6px; font-family: var(--mono); font-size: 11px; color-scheme: dark; }
.pchart { width: 100%; display: block; background: var(--bg); border: 1px solid var(--line); border-radius: 7px; }
.cgrid { stroke: var(--line); stroke-width: .5; }
.clab { fill: var(--txt-dim); font-size: 9px; font-family: var(--mono); }
.ccross { stroke: var(--txt); stroke-width: 1; opacity: .4; }
.plegend { display: flex; gap: 14px; align-items: center; margin-top: 7px; flex-wrap: wrap; }
.pleg { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--txt-dim); font-family: var(--mono); }
.pleg .dot { width: 8px; height: 8px; border-radius: 50%; }
.pleg.warn { color: var(--warn); }
.pwindow { margin-top: 8px; font-size: 11.5px; color: var(--txt-dim); font-family: var(--mono); }
.pwindow b { color: var(--txt-bright); }
.prow { display: grid; grid-template-columns: 110px 1fr 70px; gap: 9px; align-items: center; margin: 8px 0; }
.pname { font-size: 11.5px; color: var(--txt); }
.ptrack { background: var(--bg); border: 1px solid var(--line); border-radius: 4px; height: 16px; overflow: hidden; display: block; }
.pfill { display: block; height: 100%; border-radius: 3px 0 0 3px; }
.pkw { font-family: var(--mono); font-size: 11.5px; text-align: right; color: var(--txt-bright); }
.pexplain { margin-top: 12px; font-size: 12px; line-height: 1.5; color: var(--txt); }
.pexplain p { margin: 0 0 9px; }
.pexplain b { color: var(--txt-bright); }

/* ---------- mobile / small screens (Galaxy Fold cover + phones) ----------
   The topbar is a desktop-first flex row (brand + DISC CONTROL link + summary
   metrics + status cluster, no wrap). On < 760px it wraps to a 2-row layout,
   the tabs scroll horizontally with a fade indicator, the logo shrinks, and the
   summary collapses to its top metrics. The fleet grid and cards already reflow
   (auto-fill minmax) so they need no help. */
@media (max-width: 760px) {
  #topbar { flex-wrap: wrap; gap: 10px 14px; padding: 8px 12px; }
  .brand { min-width: 0; gap: 8px; }
  .logo { height: 22px; }
  .title { font-size: 13px; }
  .subtitle { display: none; }            /* "Danucore fleet" is redundant next to the logo */
  .status-cluster { order: 2; align-items: flex-end; }  /* theme + clock sit with brand on row 1 */
  .clock { gap: 6px; }
  .disc-link { order: 3; margin-left: 0; }   /* DISC CONTROL link wraps to row 2 */
  .summary { order: 4; width: 100%; gap: 14px; }  /* metrics wrap onto their own row(s) */
  .summary .metric { min-width: 0; }
  .summary .metric .v { font-size: 15px; }

  /* scrollable tabs with a fade indicator on the right edge */
  #tabs {
    overflow-x: auto; flex-wrap: nowrap; padding: 0 8px;
    position: sticky; top: 57px; z-index: 15;
    -webkit-overflow-scrolling: touch;
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 24px), transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 24px), transparent 100%);
  }
  #tabs::-webkit-scrollbar { height: 0; }   /* hide the scrollbar, keep scrollability */
  .tab { padding: 10px 12px; font-size: 12px; white-space: nowrap; flex: none; }

  main { padding: 10px; }
  .panel-head { flex-wrap: wrap; gap: 6px; }
  .panel-head h2 { font-size: 13px; }
  .head-right { gap: 10px; }

  /* node cards: 2 per row on phones, denser */
  .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 7px; }
  .cards { grid-template-columns: 1fr; }     /* model/queue cards stack full-width */
  .modal-card { width: 98%; max-height: 92vh; padding: 14px; }
  .md-lower { column-count: 1; }
  .stat-strip { gap: 12px; }
  .pcols { grid-template-columns: 1fr; }
}

/* asleep-on-purpose: neutral card, never the red down border (2026-08-04) */
.node.asleep { border-color: rgba(93,211,200,.35); background: rgba(93,211,200,.04); }
.node.asleep .node-model { color: var(--txt-dim); }

/* labelled grid sections (2026-08-04) */
.grid-section { grid-column: 1 / -1; margin: 14px 0 2px; padding: 4px 10px;
  font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--txt-dim); border-left: 3px solid var(--accent); }
.grid-section-asleep { color: var(--accent); border-left-color: var(--accent);
  background: rgba(93,211,200,.06); }
/* louder asleep cards */
.node.asleep { border-color: rgba(93,211,200,.55); background: rgba(93,211,200,.07); }