/* ==========================================================================
   3PH POWERFLOW — Load Flow Results HUD
   ========================================================================== */
:root {
  --bg: #03070d;
  --panel: #070c15;
  --panel-alt: #0b1220;
  --cyan: #1ee3ff;
  --cyan-2: #00d4ff;
  --cyan-dim: rgba(30, 227, 255, .35);
  --cyan-line: rgba(30, 227, 255, .14);
  --cyan-line-2: rgba(30, 227, 255, .28);
  --green: #41ffa0;
  --amber: #ffb020;
  --red: #ff4d5e;
  --orange: #ff9a1f;
  --text: #e6f4ff;
  --text-dim: #7d8ea3;
  --text-faint: #4a5568;
  --display: 'Orbitron', 'Rajdhani', 'Segoe UI', sans-serif;
  --body: 'Rajdhani', 'Barlow Semi Condensed', 'Segoe UI', sans-serif;
  --mono: 'Share Tech Mono', 'JetBrains Mono', 'SFMono-Regular', Menlo, monospace;
  --gap: 8px;
  --glow: 0 0 8px rgba(30, 227, 255, .55), 0 0 22px rgba(30, 227, 255, .25);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 13px;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  position: relative;
}
/* dotted grid + scanline texture across the whole page */
body::before {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    radial-gradient(rgba(30, 227, 255, .10) 1px, transparent 1px),
    linear-gradient(rgba(30, 227, 255, .03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 227, 255, .03) 1px, transparent 1px);
  background-size: 22px 22px, 110px 110px, 110px 110px;
}
body::after {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 50;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .16) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
  opacity: .7;
}

h1, h2, h3 { margin: 0; font-weight: 600; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
button:focus-visible, input:focus-visible, a:focus-visible {
  outline: 1px solid var(--cyan); outline-offset: 2px;
}
.mono { font-family: var(--mono); letter-spacing: .02em; }
.dim { color: var(--text-dim); }
.green { color: var(--green); }
.amber { color: var(--amber); }
.red { color: var(--red); }
.display { font-family: var(--display); letter-spacing: .12em; text-transform: uppercase; }

/* --------------------------------------------------------------------------
   Bezel frame
   -------------------------------------------------------------------------- */
.bezel {
  position: relative; z-index: 1;
  height: 100vh;
  margin: 0;
  padding: 10px;
  display: flex; flex-direction: column; gap: var(--gap);
  border: 1px solid rgba(30, 227, 255, .22);
  outline: 1px solid rgba(30, 227, 255, .05);
  outline-offset: -6px;
  box-shadow: inset 0 0 60px rgba(30, 227, 255, .06), 0 0 40px rgba(30, 227, 255, .08);
  animation: bezel-in .9s ease-out both;
}
@keyframes bezel-in { from { opacity: 0; } to { opacity: 1; } }
.bezel-corner {
  position: absolute; width: 18px; height: 18px; pointer-events: none;
  border: 2px solid var(--cyan);
  filter: drop-shadow(0 0 4px rgba(30, 227, 255, .8));
}
.bezel-corner.tl { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.bezel-corner.tr { top: -1px; right: -1px; border-left: 0; border-bottom: 0; }
.bezel-corner.bl { bottom: -1px; left: -1px; border-right: 0; border-top: 0; }
.bezel-corner.br { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

/* --------------------------------------------------------------------------
   Top bar
   -------------------------------------------------------------------------- */
.topbar {
  flex: 0 0 64px;
  display: grid;
  grid-template-columns: 400px 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 0 14px 0 6px;
  border-bottom: 1px solid var(--cyan-line);
  background: linear-gradient(180deg, rgba(30, 227, 255, .04), transparent);
  animation: fade-down .7s .1s ease-out both;
}
@keyframes fade-down { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.brand { display: flex; align-items: center; gap: 12px; }
.logo { filter: drop-shadow(0 0 6px rgba(30, 227, 255, .6)); }
.wordmark-row { display: flex; align-items: center; gap: 10px; }
.wordmark h1 {
  font-family: var(--display); font-weight: 900; font-size: 20px; letter-spacing: .06em;
  color: #fff; text-shadow: 0 0 10px rgba(30, 227, 255, .55), 0 0 2px rgba(255, 255, 255, .6);
  line-height: 1;
}
.wordmark-sub {
  font-size: 10px; letter-spacing: .32em; color: var(--text-dim); margin-top: 4px; font-weight: 600;
}
.pill {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: var(--cyan);
  border: 1px solid var(--cyan-dim); padding: 1px 7px; border-radius: 2px; line-height: 1.4;
}
.nav { display: flex; gap: 22px; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; min-width: 0; }
.nav-item { color: var(--text-dim); transition: color .2s, text-shadow .2s; padding: 4px 0; white-space: nowrap; }
.nav-item:hover { color: var(--text); }
.nav-item.active { color: #fff; text-shadow: 0 0 8px rgba(30, 227, 255, .6); }

.top-right { display: flex; align-items: center; height: 100%; }
.top-cell {
  display: flex; align-items: center; gap: 10px; padding: 0 18px;
  border-left: 1px solid var(--cyan-line-2); height: 40px;
}
.top-cell svg { flex: none; filter: drop-shadow(0 0 3px rgba(30, 227, 255, .5)); }
.tc-label { font-size: 11px; color: var(--text-dim); letter-spacing: .04em; }
.tc-value { font-size: 13px; font-weight: 600; letter-spacing: .02em; }
.tc-label b, .tc-value b { color: var(--text); font-weight: 700; }
.clock { border-left: 1px solid var(--cyan-line-2); padding-left: 18px; text-align: right; height: 40px; display: flex; flex-direction: column; justify-content: center; }
.clock-time {
  font-family: var(--mono); font-size: 28px; color: #fff; line-height: 1; letter-spacing: .04em;
  text-shadow: 0 0 12px rgba(30, 227, 255, .5);
}
.clock-date { font-size: 11px; color: var(--text-dim); letter-spacing: .08em; margin-top: 3px; }

/* BUSY chip — visible only while a job runs */
.busy-chip {
  display: flex; align-items: center; gap: 7px; margin: 0 14px 0 4px; padding: 4px 10px;
  font-size: 10px; letter-spacing: .18em; color: var(--cyan);
  border: 1px solid var(--cyan-dim); background: rgba(30, 227, 255, .08);
  animation: chip-pulse 1.2s ease-in-out infinite;
}
.busy-chip[hidden] { display: none; }
.busy-chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
@keyframes chip-pulse {
  0%, 100% { box-shadow: 0 0 6px rgba(30, 227, 255, .2); }
  50% { box-shadow: 0 0 16px rgba(30, 227, 255, .7); background: rgba(30, 227, 255, .2); }
}

/* --------------------------------------------------------------------------
   HUD grid
   -------------------------------------------------------------------------- */
.hud {
  flex: 1 1 auto; min-height: 0;
  display: grid;
  grid-template-columns: 400px minmax(0, 1fr) 400px;
  gap: var(--gap);
}
.col { display: flex; flex-direction: column; gap: var(--gap); min-height: 0; min-width: 0; }
.col-right { overflow-y: auto; }
.col-left > .panel:nth-child(1) { animation-delay: .15s; }
.col-left > .panel:nth-child(2) { animation-delay: .25s; }
.col-left > .panel:nth-child(3) { animation-delay: .35s; }
.col-left > .panel:nth-child(4) { animation-delay: .45s; }
.col-right > .panel:nth-child(1) { animation-delay: .2s; }
.col-right > .panel:nth-child(2) { animation-delay: .3s; }
.col-right > .panel:nth-child(3) { animation-delay: .4s; }
.col-right > .panel:nth-child(4) { animation-delay: .5s; }
.col-right > .panel:nth-child(5) { animation-delay: .6s; }
.col-center > .panel-map { animation-delay: .1s; }
.strip > .panel { animation-delay: .55s; }

/* Panel slab with corner ticks */
.panel {
  position: relative;
  background: linear-gradient(180deg, var(--panel-alt) 0%, var(--panel) 100%);
  border: 1px solid var(--cyan-line);
  min-height: 0; min-width: 0;
  display: flex; flex-direction: column;
  animation: panel-in .6s ease-out both;
  overflow: hidden;
}
@keyframes panel-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.panel::before, .panel::after {
  content: ''; position: absolute; width: 9px; height: 9px; pointer-events: none;
  border: 1px solid var(--cyan); opacity: .8; z-index: 2;
}
.panel::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.panel::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
/* stale: a run is in progress and this panel still shows the previous solve */
.panel > * { transition: opacity .35s ease; }
.panel.stale > * { opacity: .5; }

.panel-head {
  flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 10px 6px;
  border-bottom: 1px solid var(--cyan-line);
}
.panel-head h2 { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; display: flex; align-items: center; gap: 7px; white-space: nowrap; min-width: 0; }
.hicon { font-family: var(--mono); color: var(--cyan); font-size: 11px; }
.hsub { font-size: 10px; color: var(--text-dim); letter-spacing: .08em; font-weight: 500; }

.toggle { display: flex; gap: 2px; font-family: var(--mono); font-size: 10px; }
.toggle button {
  padding: 2px 6px; color: var(--text-faint); border: 1px solid transparent; letter-spacing: .06em;
  transition: color .15s, border-color .15s, background .15s;
}
.toggle button:hover { color: var(--text-dim); }
.toggle button.on { color: var(--cyan); border-color: var(--cyan-dim); background: rgba(30, 227, 255, .06); text-shadow: 0 0 6px rgba(30, 227, 255, .5); }
.toggle button:active { transform: translateY(1px); }

.canvas-wrap { flex: 1 1 auto; min-height: 0; position: relative; }
.canvas-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* --------------------------------------------------------------------------
   Left column
   -------------------------------------------------------------------------- */
.panel-table { flex: 0 1 auto; min-height: 120px; overflow-y: auto; }
.bus-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; table-layout: fixed; }
.bus-table thead th { position: sticky; top: 0; background: var(--panel-alt); z-index: 1; }
.bus-table td .tag { font-family: var(--mono); font-size: 8px; letter-spacing: .1em; color: var(--cyan); border: 1px solid var(--cyan-dim); padding: 0 3px; margin-left: 5px; vertical-align: 1px; }
.bus-table td .tag.warn { color: var(--amber); border-color: rgba(255, 176, 32, .4); }
.bus-table td.empty { text-align: center; color: var(--text-faint); font-family: var(--mono); font-size: 10px; letter-spacing: .14em; padding: 14px 8px; }
.bus-table th:nth-child(1) { width: auto; }
.bus-table th:nth-child(2) { width: 58px; }
.bus-table th:nth-child(3) { width: 64px; }
.bus-table th:nth-child(4) { width: 56px; }
.bus-table th:nth-child(5) { width: 70px; }
.bus-table th {
  font-family: var(--mono); font-weight: 400; font-size: 10px; color: var(--text-dim); letter-spacing: .1em;
  text-align: left; padding: 6px 10px 4px; border-bottom: 1px solid var(--cyan-line); white-space: nowrap;
}
.bus-table th.num, .bus-table td.num { text-align: right; }
.bus-table tbody tr { cursor: pointer; transition: background .15s; }
.bus-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, .015); }
.bus-table tbody tr:hover { background: rgba(30, 227, 255, .06); }
.bus-table td { padding: 4px 8px; border-bottom: 1px solid rgba(255, 255, 255, .03); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bus-table th { padding-left: 8px; padding-right: 8px; }
.bus-table td:first-child { font-weight: 600; letter-spacing: .02em; }
.bus-table td.num { font-family: var(--mono); font-size: 12px; }
.bus-table tr.flag td { color: var(--text); }
.bus-table tr.flag td:first-child { box-shadow: inset 1px 0 0 var(--cyan), inset 0 1px 0 var(--cyan-dim), inset 0 -1px 0 var(--cyan-dim); }
.bus-table tr.flag td:not(:first-child):not(:last-child) { box-shadow: inset 0 1px 0 var(--cyan-dim), inset 0 -1px 0 var(--cyan-dim); }
.bus-table tr.flag td:last-child { box-shadow: inset -1px 0 0 var(--cyan), inset 0 1px 0 var(--cyan-dim), inset 0 -1px 0 var(--cyan-dim); }
.bus-table tr.sel td { background: rgba(30, 227, 255, .12); }
.bus-table tr.sel td:first-child { color: var(--cyan); text-shadow: 0 0 6px rgba(30, 227, 255, .5); }
.tri-up, .tri-down { display: inline-block; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; margin-left: 5px; vertical-align: 1px; }
.tri-up { border-bottom: 7px solid var(--cyan); filter: drop-shadow(0 0 3px rgba(30, 227, 255, .8)); }
.tri-down { border-top: 7px solid var(--text-faint); }
.v-low { color: var(--amber) !important; }
.v-crit { color: var(--red) !important; }
.v-high { color: var(--green) !important; }
.load-hi { color: var(--amber) !important; }

.panel-params { flex: 0 0 auto; }
.params { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.param { padding: 10px 12px 12px; }
.param + .param { border-left: 1px solid var(--cyan-line); }
.param-label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); }
.param-value { font-family: var(--display); font-weight: 700; font-size: 26px; color: #fff; margin: 4px 0 8px; letter-spacing: .02em; text-shadow: 0 0 10px rgba(30, 227, 255, .35); }
.param-value small { font-family: var(--body); font-size: 12px; color: var(--cyan); margin-left: 6px; font-weight: 600; letter-spacing: .08em; }
.eq { display: flex; gap: 3px; align-items: flex-end; height: 26px; }
.eq i { flex: 1; display: block; background: var(--cyan); box-shadow: 0 0 6px rgba(30, 227, 255, .5); height: var(--h); opacity: .9; transform-origin: bottom; animation: eq-pulse 2.6s ease-in-out infinite; animation-delay: var(--d); }
.eq i.g { background: var(--green); box-shadow: 0 0 6px rgba(65, 255, 160, .5); }
@keyframes eq-pulse { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.72); } }
.bars { display: flex; flex-direction: column; gap: 5px; margin-top: 4px; }
.bar { height: 5px; background: rgba(255, 255, 255, .06); position: relative; }
.bar i { position: absolute; inset: 0 auto 0 0; width: var(--w); animation: bar-in 1.2s .6s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes bar-in { from { width: 0; } }
.bar i.cyan { background: var(--cyan); box-shadow: 0 0 8px rgba(30, 227, 255, .6); }
.bar i.dim { background: var(--cyan-dim); }
.bar i.white { background: #dfe9f5; }

.panel-vprofile { flex: 1.5 1 0; min-height: 110px; }
.legend { display: flex; gap: 12px; font-size: 10px; letter-spacing: .08em; color: var(--text-dim); text-transform: uppercase; }
.legend span { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.panel-vprofile .hsub { display: none; }
.panel-vprofile .panel-head { flex-wrap: wrap; gap: 5px; }
.profile-engine-legend { display: flex; flex: none; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 3px 10px; color: var(--text-dim); font-size: 10px; line-height: 1.3; }
.profile-engine-legend[hidden] { display: none; }
.profile-engine-legend span { display: inline-flex; align-items: center; gap: 4px; }
.profile-engine-legend i { width: 14px; height: 0; border-top: 2px solid var(--text); }
.profile-engine-legend .dss { border-top-style: dashed; }
.profile-engine-legend .mc-power { border-color: var(--cyan); }
.profile-engine-legend .dss-power { border-color: var(--amber); }
.profile-engine-legend .delta { height: 7px; border: 1px solid rgba(255, 176, 32, .4); background: rgba(255, 176, 32, .24); }
.profile-engine-legend .voltage-delta { border-color: rgba(30, 227, 255, .4); background: linear-gradient(90deg, rgba(65, 255, 160, .35), rgba(30, 227, 255, .35), rgba(196, 164, 255, .35)); }
.profile-engine-legend .unavailable { color: var(--amber); }
.sq.cyan { background: var(--cyan); }
.sq.violet { background: #c4a4ff; }
.panel-demand .caption-bar { flex-wrap: wrap; gap: 2px 8px; padding-top: 4px; padding-bottom: 4px; font-size: 10px; letter-spacing: .02em; }
.sq { display: inline-block; width: 8px; height: 8px; }
.sq.orange { background: var(--orange); box-shadow: 0 0 5px var(--orange); }
.sq.green { background: var(--green); box-shadow: 0 0 5px var(--green); }
.sq.white { background: #e6f4ff; }
.bus-table abbr { text-decoration: underline dotted; text-underline-offset: 2px; cursor: help; }
.panel-hist { flex: 1 1 0; min-height: 90px; }

/* --------------------------------------------------------------------------
   Center — map + strip
   -------------------------------------------------------------------------- */
.col-center { display: flex; flex-direction: column; }
.panel-map {
  flex: 1 1 auto; min-height: 0;
  background:
    radial-gradient(ellipse at 50% 55%, rgba(14, 40, 70, .55), transparent 60%),
    radial-gradient(rgba(30, 227, 255, .12) .6px, transparent .6px) 0 0 / 14px 14px,
    linear-gradient(rgba(30, 227, 255, .045) 1px, transparent 1px) 0 0 / 60px 60px,
    linear-gradient(90deg, rgba(30, 227, 255, .045) 1px, transparent 1px) 0 0 / 60px 60px,
    #040a14;
  border-color: var(--cyan-line-2);
  box-shadow: inset 0 0 80px rgba(0, 0, 0, .6), inset 0 0 30px rgba(30, 227, 255, .04);
}
#c-map { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; }
.map-hud-tl, .map-hud-tr, .map-hud-bl { position: absolute; z-index: 3; font-size: 10px; letter-spacing: .12em; pointer-events: none; }
.map-hud-tl { top: 10px; left: 12px; display: flex; flex-direction: column; gap: 3px; color: var(--cyan); }
.map-hud-tl .dim { color: var(--text-dim); }
.map-hud-tr { top: 64px; left: 12px; right: 12px; display: flex; flex-wrap: wrap; gap: 6px 12px; }
.map-hud-bl { bottom: 10px; left: 12px; }
.map-hud-tl .amber { color: var(--amber); }
.map-empty {
  position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; pointer-events: none;
  color: var(--text-dim); font-size: 12px; letter-spacing: .22em; text-shadow: 0 0 10px rgba(30, 227, 255, .3);
}
.map-empty[hidden] { display: none; }
.map-key { display: flex; align-items: center; gap: 5px; color: var(--text-dim); font-family: var(--mono); }
.map-key i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 6px var(--c); }
.tooltip {
  position: absolute; z-index: 5; pointer-events: none;
  background: rgba(4, 10, 20, .92); border: 1px solid var(--cyan-dim);
  padding: 7px 10px; font-family: var(--mono); font-size: 11px; line-height: 1.5; color: var(--text);
  box-shadow: 0 0 14px rgba(30, 227, 255, .25); min-width: 150px;
  transform: translate(14px, -50%);
}
.tooltip[hidden] { display: none; }
.tooltip .tt-name { color: var(--cyan); font-family: var(--body); font-weight: 700; font-size: 13px; letter-spacing: .04em; margin-bottom: 3px; }
.tooltip .tt-row { display: flex; justify-content: space-between; gap: 14px; }
.tooltip .tt-row span:first-child { color: var(--text-dim); }

.strip {
  flex: 0 0 206px;
  display: grid;
  grid-template-columns: 180px 210px 210px minmax(0, 1fr);
  gap: var(--gap);
}
.block { padding: 10px 12px; }
.block-kicker { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; color: var(--cyan); }
.block-title { font-family: var(--display); font-weight: 900; font-size: 24px; letter-spacing: .08em; color: var(--cyan); text-shadow: var(--glow); margin: 2px 0 8px; white-space: nowrap; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; font-size: 11px; }
.kv dt { color: var(--text-dim); letter-spacing: .1em; }
.kv dd { margin: 0; text-align: right; color: var(--text); }
.block-cluster .kv { margin-top: 2px; }
.block-cluster .block-title { margin-bottom: 6px; }
.conv { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--cyan-line); }
.conv-head { display: flex; justify-content: space-between; font-size: 9px; letter-spacing: .14em; color: var(--cyan); flex: none; margin-bottom: 3px; }
.conv-wrap { flex: 1 1 auto; min-height: 30px; }

.readouts { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 8px; margin-top: 8px; font-size: 10px; letter-spacing: 0; color: var(--text-faint); line-height: 1.35; }
.readouts span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.readouts span b { color: var(--text-dim); font-weight: 400; margin-right: 6px; }
.readouts span.hot { color: var(--amber); }
.readouts span.hot b { color: var(--amber); }
.phase-bars { margin-top: auto; padding-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.pb { display: grid; grid-template-columns: 16px 1fr 26px; align-items: center; gap: 6px; font-size: 9px; color: var(--text-dim); }
.pb i { display: block; height: 4px; width: var(--w); background: var(--cyan); box-shadow: 0 0 6px rgba(30, 227, 255, .5); animation: bar-in 1.2s .7s cubic-bezier(.2, .8, .2, 1) both; }
.pb i.hot { background: var(--amber); box-shadow: 0 0 6px rgba(255, 176, 32, .6); }
.pb b { font-weight: 400; text-align: right; color: var(--text); }
.block-foot { display: flex; justify-content: space-between; margin-top: 6px; padding-top: 5px; border-top: 1px solid var(--cyan-line); font-size: 9px; letter-spacing: .1em; color: var(--text-dim); white-space: nowrap; }
.block-foot b { color: var(--text); font-weight: 400; }

.block-mismatch { align-items: flex-start; }
.giant {
  font-family: var(--display); font-weight: 900; font-size: 54px; line-height: 1; color: #fff; letter-spacing: -.01em;
  text-shadow: 0 0 18px rgba(255, 255, 255, .35), 0 0 40px rgba(30, 227, 255, .3); margin: 4px 0 1px;
  font-variant-numeric: tabular-nums;
}
.giant-label { font-size: 10px; letter-spacing: .18em; color: var(--text-dim); margin-bottom: 6px; }
.block-mismatch .kv { width: 100%; gap: 3px 8px; margin-top: auto; font-size: 10.5px; letter-spacing: 0; }
.block-mismatch .kv dt { white-space: nowrap; }
.block-mismatch .kv dd { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.block-gauges { padding: 8px 12px 6px; }
.gauges { display: flex; justify-content: space-between; gap: 6px; flex: none; min-width: 0; }
.gauge { margin: 0; display: flex; align-items: center; gap: 8px; min-width: 0; }
.gauge svg { width: 64px; height: 64px; flex: none; transform: rotate(-90deg); }
.g-track { fill: none; stroke: rgba(255, 255, 255, .07); stroke-width: 5; }
.g-arc { fill: none; stroke: var(--gc, var(--cyan)); stroke-width: 5; stroke-linecap: butt; stroke-dasharray: var(--dash, 0 1000); filter: drop-shadow(0 0 4px var(--gc, var(--cyan))); transition: stroke-dasharray 1.2s cubic-bezier(.2, .8, .2, 1); }
.g-inner { fill: none; stroke: rgba(30, 227, 255, .12); stroke-width: 1; stroke-dasharray: 2 3; }
.gauge figcaption { display: flex; flex-direction: column; white-space: nowrap; }
.g-tag { font-family: var(--mono); font-size: 10px; color: var(--cyan); letter-spacing: .08em; }
.g-name { font-size: 11px; color: var(--text-dim); letter-spacing: .1em; text-transform: uppercase; }
.g-val { font-family: var(--display); font-weight: 700; font-size: 20px; color: #fff; line-height: 1.1; }
.g-val small { font-size: 11px; margin-left: 2px; font-family: var(--body); }
.feeder-wrap { flex: 1 1 auto; margin-top: 4px; }
.seg-labels { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-dim); letter-spacing: .1em; padding-top: 4px; border-top: 1px solid var(--cyan-line); flex: none; }
.seg-labels b { color: var(--text); font-weight: 400; margin-left: 4px; }

/* --------------------------------------------------------------------------
   Right column
   -------------------------------------------------------------------------- */
.panel-model { flex: 0 0 auto; }
.model { display: grid; grid-template-columns: 1fr 128px; gap: 12px; padding: 12px; }
.model h2 { font-size: 18px; font-weight: 700; color: var(--cyan); text-shadow: var(--glow); margin-bottom: 10px; }
.model .kv { gap: 6px 10px; }
.thumb { position: relative; height: 128px; border: 1px solid var(--cyan-dim); background: #040a14; overflow: hidden; box-shadow: inset 0 0 20px rgba(30, 227, 255, .08); }
.thumb canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.thumb-tag { position: absolute; left: 5px; bottom: 3px; font-size: 8px; letter-spacing: .2em; color: var(--cyan-dim); }

/* Analysis panel — HUD form controls */
.panel-analysis { flex: 0 0 auto; }
.hud-select {
  -webkit-appearance: none; appearance: none;
  font-family: var(--mono); font-size: 10px; letter-spacing: .08em; color: var(--cyan);
  background: rgba(30, 227, 255, .06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%231ee3ff'/%3E%3C/svg%3E") no-repeat right 6px center;
  border: 1px solid var(--cyan-dim); padding: 2px 20px 2px 7px; cursor: pointer; outline: none;
  text-shadow: 0 0 6px rgba(30, 227, 255, .5); transition: border-color .15s, box-shadow .15s;
}
.hud-select:hover, .hud-select:focus-visible { border-color: var(--cyan); box-shadow: 0 0 8px rgba(30, 227, 255, .3); }
.hud-select option { background: var(--panel); color: var(--text); }
.an-progress {
  position: relative; flex: none; height: 18px; display: flex; align-items: center; padding: 0 10px; overflow: hidden;
  border-bottom: 1px solid var(--cyan-line); background: rgba(30, 227, 255, .04);
  font-size: 9px; letter-spacing: .16em; color: var(--cyan);
}
.an-progress[hidden] { display: none; }
.an-progress i { position: absolute; left: 0; right: 0; top: 0; height: 2px; overflow: hidden; }
.an-progress i::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent); box-shadow: 0 0 8px var(--cyan);
  animation: indet 1.3s linear infinite;
}
@keyframes indet { to { left: 100%; } }
.an-form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; padding: 9px 12px 11px; }
.field { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; font-family: var(--mono); font-size: 9px; letter-spacing: .12em; color: var(--text-dim); }
.field input[type=number] {
  width: 100%; min-width: 0; font: 12px var(--mono); color: var(--text); letter-spacing: .02em;
  background: rgba(4, 10, 20, .8); border: 1px solid var(--cyan-line-2); padding: 5px 7px; outline: none;
  -moz-appearance: textfield; transition: border-color .15s, box-shadow .15s;
}
.field input[type=number]::-webkit-inner-spin-button, .field input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.field input:focus { border-color: var(--cyan); box-shadow: 0 0 0 1px rgba(30, 227, 255, .35), 0 0 10px rgba(30, 227, 255, .25); }
.field input:invalid { border-color: rgba(255, 77, 94, .6); }
.hud-check { display: flex; align-items: center; gap: 8px; height: 27px; cursor: pointer; }
.hud-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.hud-check i { width: 14px; height: 14px; border: 1px solid var(--cyan-dim); display: grid; place-items: center; transition: border-color .15s, box-shadow .15s; }
.hud-check i::after { content: ''; width: 6px; height: 6px; background: transparent; transition: background .15s; }
.hud-check input:checked + i { border-color: var(--cyan); box-shadow: 0 0 8px rgba(30, 227, 255, .35); }
.hud-check input:checked + i::after { background: var(--cyan); box-shadow: 0 0 6px var(--cyan); }
.hud-check input:focus-visible + i { outline: 1px solid var(--cyan); outline-offset: 2px; }
.hud-check em { font-style: normal; font-size: 10px; letter-spacing: .1em; color: var(--text-faint); }
.hud-check input:checked ~ em { color: var(--cyan); }
.run-btn {
  grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 9px; height: 32px;
  border: 1px solid var(--cyan); color: var(--cyan); background: rgba(30, 227, 255, .06);
  font-family: var(--display); font-weight: 700; font-size: 12px; letter-spacing: .22em;
  box-shadow: 0 0 10px rgba(30, 227, 255, .15), inset 0 0 12px rgba(30, 227, 255, .05);
  transition: background .15s, box-shadow .15s, opacity .15s;
}
.run-btn:hover:not(:disabled) { background: rgba(30, 227, 255, .14); box-shadow: var(--glow); }
.run-btn:disabled { cursor: not-allowed; opacity: .4; border-color: var(--cyan-dim); box-shadow: none; }
.run-btn.busy { opacity: 1; border-color: var(--cyan); background: rgba(30, 227, 255, .1); box-shadow: 0 0 14px rgba(30, 227, 255, .3); }
.run-btn .spin { display: none; }
.run-btn.busy .spin { display: block; animation: spin 1.1s linear infinite; filter: drop-shadow(0 0 4px var(--cyan)); }
@keyframes spin { to { transform: rotate(360deg); } }
.an-error {
  grid-column: 1 / -1; color: var(--red); font-size: 10px; letter-spacing: .04em; line-height: 1.4;
  border: 1px solid rgba(255, 77, 94, .4); background: rgba(255, 77, 94, .06); padding: 5px 8px;
  white-space: pre-wrap; word-break: break-word; max-height: 64px; overflow: auto;
}
.an-error[hidden] { display: none; }

.panel-log { flex: 0 1 auto; min-height: 84px; overflow-y: auto; }
.log-table { width: 100%; border-collapse: collapse; font-size: 12px; table-layout: fixed; }
.log-table thead th { position: sticky; top: 0; background: var(--panel-alt); z-index: 1; }
.log-table td.empty { text-align: center; color: var(--text-faint); font-family: var(--mono); font-size: 10px; letter-spacing: .14em; padding: 12px; }
.log-table th { text-align: left; font-weight: 600; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; padding: 8px 12px 7px; border-bottom: 1px solid var(--cyan-line); color: var(--text); white-space: nowrap; }
.log-table th:last-child { text-align: right; width: 132px; color: var(--text-dim); }
.log-table tbody tr:nth-child(odd) { background: rgba(255, 255, 255, .02); }
.log-table td { padding: 5px 12px; border-bottom: 1px solid rgba(255, 255, 255, .03); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.log-table td:last-child { text-align: right; padding-left: 4px; }
.log-id { font-weight: 700; letter-spacing: .02em; }
.log-desc { color: var(--text-dim); }
.status { display: inline-flex; gap: 8px; align-items: center; justify-content: flex-end; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .025); padding: 2px 7px; color: var(--text-dim); width: 100%; }
.status b { font-weight: 400; }
.status.active b { color: var(--red); text-shadow: 0 0 6px rgba(255, 77, 94, .5); }
.status.cleared b { color: var(--green); }
.status.watch b { color: var(--amber); }

.panel-demand { flex: 1 1 0; min-height: 150px; max-height: 200px; }
.panel-violation-display { flex: 0 0 auto; }
.violation-options { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 9px 10px 6px; }
.violation-options label { position: relative; cursor: pointer; }
.violation-options input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.violation-options span { display: block; padding: 7px 8px; border: 1px solid var(--cyan-line); color: var(--text-dim); font-size: 12px; }
.violation-options input:checked + span { color: var(--cyan); border-color: var(--cyan); background: rgba(30, 227, 255, .08); }
.violation-options input:focus-visible + span { outline: 2px solid var(--text); outline-offset: 2px; }
.violation-options label:hover span { border-color: var(--cyan-dim); }
.violation-description { margin: 0; padding: 0 10px 6px; color: var(--text-dim); font-size: 11px; line-height: 1.3; min-height: 35px; }
.violation-status { margin: 0; padding: 6px 10px; border-top: 1px solid var(--cyan-line); color: var(--text-dim); font-size: 10px; line-height: 1.3; }
.caption-bar { flex: none; display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; border-top: 1px solid var(--cyan-line); background: rgba(30, 227, 255, .05); font-size: 11px; letter-spacing: .06em; }

.panel-kpi { flex: 0 0 auto; }
.kpi-row { display: grid; grid-template-columns: 52px 52px 1fr 1fr 1fr; gap: 10px; align-items: center; padding: 10px 12px 6px; }
.mini-gauge { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.mini-gauge svg { width: 44px; height: 44px; transform: rotate(-90deg); }
.mini-gauge .g-track { stroke-width: 3; }
.mini-gauge .g-arc { stroke-width: 3; }
.mini-gauge figcaption { font-family: var(--mono); font-size: 10px; color: var(--text-dim); letter-spacing: .1em; }
.mini-gauge figcaption b { color: var(--cyan); font-weight: 400; }
.kpi-label { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); white-space: nowrap; }
.kpi-val { font-family: var(--display); font-weight: 700; font-size: 20px; color: var(--cyan); text-shadow: 0 0 10px rgba(30, 227, 255, .45); margin-top: 2px; white-space: nowrap; }
.kpi-val small { font-size: 11px; margin-left: 2px; font-family: var(--body); }
.kpi-val.amber { color: var(--amber); text-shadow: 0 0 10px rgba(255, 176, 32, .45); }
.kpi-val.red { color: var(--red); text-shadow: 0 0 10px rgba(255, 77, 94, .45); }
.kpi-val.green { color: var(--green); text-shadow: 0 0 10px rgba(65, 255, 160, .45); }
.mini-gauge figcaption b.red { color: var(--red); }
.mini-gauge figcaption b.green { color: var(--green); }
.block-kicker .red { color: var(--red); }
.worst { display: flex; justify-content: space-between; align-items: flex-end; padding: 8px 12px; border-top: 1px solid var(--cyan-line); border-bottom: 1px solid var(--cyan-line); background: rgba(30, 227, 255, .03); }
.worst-id { color: var(--cyan); font-size: 15px; text-shadow: 0 0 8px rgba(30, 227, 255, .5); margin-top: 2px; display: flex; align-items: center; }
.worst-nums { display: flex; gap: 22px; text-align: right; }
.worst-num { font-family: var(--display); font-weight: 700; font-size: 18px; color: #fff; margin-top: 2px; }
.sliders { display: grid; grid-template-columns: 1fr 1fr auto; gap: 14px; align-items: center; padding: 10px 12px 12px; }
.slider { display: grid; grid-template-columns: 34px 1fr 40px; align-items: center; gap: 8px; font-size: 10px; letter-spacing: .14em; color: var(--text-dim); }
.slider output { text-align: right; color: var(--cyan); font-size: 11px; }
.slider input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 2px; background: linear-gradient(90deg, var(--cyan) 0 var(--p, 50%), rgba(255, 255, 255, .12) var(--p, 50%)); outline: none; margin: 0; cursor: pointer; }
.slider input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 10px; height: 10px; background: var(--cyan); border: 1px solid #fff; border-radius: 1px; box-shadow: 0 0 8px rgba(30, 227, 255, .8); transform: rotate(45deg); }
.slider input[type=range]::-moz-range-thumb { width: 10px; height: 10px; background: var(--cyan); border: 1px solid #fff; border-radius: 1px; box-shadow: 0 0 8px rgba(30, 227, 255, .8); }
.sq-toggles { display: flex; align-items: center; gap: 6px; }
.sq-toggles .sq { width: 18px; height: 18px; border: 1px solid var(--cyan-dim); display: grid; place-items: center; transition: background .15s, border-color .15s; }
.sq-toggles .sq i { width: 8px; height: 8px; background: transparent; border: 1px solid var(--text-faint); transition: background .15s, border-color .15s; }
.sq-toggles .sq.on { border-color: var(--cyan); box-shadow: 0 0 8px rgba(30, 227, 255, .35); }
.sq-toggles .sq.on i { background: var(--cyan); border-color: var(--cyan); }
.sq-toggles .sq:hover { background: rgba(30, 227, 255, .08); }
.eq-sign { font-family: var(--mono); color: var(--text-faint); font-size: 12px; }

/* --------------------------------------------------------------------------
   Import modal
   -------------------------------------------------------------------------- */
.modal {
  position: fixed; inset: 0; margin: 0; padding: 0; border: 0; background: transparent;
  width: 100vw; height: 100vh; max-width: none; max-height: none; display: none; z-index: 60;
  align-items: center; justify-content: center; color: var(--text);
}
.modal[open] { display: flex; }
.modal::backdrop { background: rgba(2, 6, 12, .74); backdrop-filter: blur(3px); }
.modal-panel {
  position: relative; width: min(580px, 92vw); max-height: 86vh; display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--panel-alt) 0%, var(--panel) 100%);
  border: 1px solid var(--cyan-line-2);
  box-shadow: 0 0 40px rgba(30, 227, 255, .18), 0 0 120px rgba(30, 227, 255, .08), inset 0 0 40px rgba(30, 227, 255, .04);
  animation: panel-in .3s ease-out both;
}
.modal-panel::before, .modal-panel::after {
  content: ''; position: absolute; width: 14px; height: 14px; pointer-events: none;
  border: 2px solid var(--cyan); filter: drop-shadow(0 0 4px rgba(30, 227, 255, .8));
}
.modal-panel::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.modal-panel::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--cyan-line); background: linear-gradient(180deg, rgba(30, 227, 255, .05), transparent); }
.modal-head h2 { font-size: 14px; font-weight: 700; color: var(--cyan); text-shadow: var(--glow); }
.modal-close { font-size: 11px; letter-spacing: .12em; color: var(--text-dim); padding: 4px 6px; transition: color .15s; }
.modal-close:hover { color: #fff; text-shadow: 0 0 8px rgba(30, 227, 255, .6); }
.modal-body { padding: 12px 14px 14px; overflow: auto; display: flex; flex-direction: column; gap: 10px; }
.modal-sub { display: flex; justify-content: space-between; gap: 12px; font-size: 9px; letter-spacing: .16em; color: var(--cyan); }
.modal-sub .dim { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: .02em; }
.net-list { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow: auto; border: 1px solid var(--cyan-line); background: rgba(4, 10, 20, .5); }
.net-list li {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 12px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .04em; cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, .03); transition: background .15s, color .15s; outline: none;
}
.net-list li:hover, .net-list li:focus-visible { background: rgba(30, 227, 255, .08); color: #fff; }
.net-list li.sel { background: rgba(30, 227, 255, .14); color: var(--cyan); text-shadow: 0 0 6px rgba(30, 227, 255, .5); }
.net-list li .size { color: var(--text-dim); font-size: 10px; white-space: nowrap; }
.net-list li .key::before { content: '▸ '; color: var(--cyan-dim); }
.net-list li.net-empty { cursor: default; justify-content: center; font-size: 10px; letter-spacing: .14em; padding: 14px; }
.net-list li.net-empty::before { content: none; }
.net-list.busy li { pointer-events: none; opacity: .5; }
.upload { position: relative; display: flex; align-items: center; gap: 12px; cursor: pointer; min-width: 0; }
.upload input { position: absolute; opacity: 0; width: 0; height: 0; }
.upload-btn { flex: none; border: 1px solid var(--cyan-dim); color: var(--cyan); padding: 6px 10px; font-size: 11px; letter-spacing: .12em; transition: background .15s, box-shadow .15s; }
.upload:hover .upload-btn, .upload:focus-within .upload-btn { background: rgba(30, 227, 255, .1); box-shadow: var(--glow); }
.upload-name { font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.job { display: flex; flex-direction: column; gap: 6px; padding-top: 4px; border-top: 1px solid var(--cyan-line); }
.job[hidden] { display: none; }
.job-bar { height: 3px; background: rgba(255, 255, 255, .06); position: relative; overflow: hidden; }
.job-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w, 0%); background: var(--cyan); box-shadow: 0 0 8px var(--cyan); transition: width .3s ease; }
.job-bar i.indet { width: 35%; animation: job-indet 1.3s linear infinite; }
@keyframes job-indet { from { left: -35%; } to { left: 100%; } }
.job-msg { font-size: 10px; letter-spacing: .12em; color: var(--cyan); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.job-msg.done { color: var(--green); }

/* --------------------------------------------------------------------------
   Responsive — degrade to stacked layout
   -------------------------------------------------------------------------- */
@media (max-height: 940px) {
  .sliders { display: none; }
  .thumb { height: 104px; }
  .model h2 { margin-bottom: 6px; }
  .an-form { gap: 6px 10px; padding: 8px 12px 10px; }
}
@media (max-width: 1600px) {
  .hud { grid-template-columns: 360px minmax(0, 1fr) 360px; }
  .topbar { grid-template-columns: 360px 1fr auto; }
  .top-cell:nth-child(2) { display: none; }
  /* strip becomes 2 rows: three telemetry blocks, then gauges full-width */
  .strip { flex-basis: 380px; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr) 174px; }
  .block-gauges { grid-column: 1 / -1; }
  .giant { font-size: 48px; }
  .model { grid-template-columns: 1fr 110px; }
  .model h2 { font-size: 15px; letter-spacing: .1em; }
  .thumb { height: 110px; }
  .kpi-val { font-size: 18px; }
}
/* 1100–1400: laptop / second-screen band */
@media (max-width: 1400px) {
  .topbar { grid-template-columns: auto 1fr auto; gap: 14px; }
  .wordmark h1 { white-space: nowrap; font-size: 18px; }
  .nav { gap: 12px; font-size: 11px; letter-spacing: .08em; }
  .block-foot { flex-direction: column; gap: 2px; }
  .top-cell { padding: 0 12px; }
  .clock { padding-left: 12px; }
  .clock-time { font-size: 24px; }
  .top-cell:nth-child(3) .tc-label { display: none; }
  .busy-chip { margin: 0 10px 0 2px; padding: 3px 7px; }
  .block-title { font-size: clamp(16px, 1.5vw, 26px); letter-spacing: .08em; }
  .block { padding: 8px 10px; }
  .giant { font-size: clamp(34px, 3.4vw, 48px); }
  /* currents block: single column so nothing truncates in a ~170px slab */
  .readouts { grid-template-columns: 1fr; gap: 1px 0; line-height: 1.3; }
  .readouts span:nth-child(n+9) { display: none; }
  .block-mismatch .kv dt:nth-of-type(4), .block-mismatch .kv dd:nth-of-type(4) { display: none; }
  .block-mismatch .kv { font-size: 10px; gap: 3px 6px; }
  .conv-head .dim { display: none; }
}
@media (max-width: 1100px) {
  body { overflow: auto; }
  .bezel { height: auto; min-height: 100vh; }
  .topbar { grid-template-columns: 1fr; grid-auto-rows: auto; height: auto; flex-basis: auto; padding: 10px 8px; gap: 10px; }
  .top-right { flex-wrap: wrap; justify-content: space-between; height: auto; gap: 6px 0; }
  .top-cell:first-child { border-left: 0; padding-left: 0; }
  .hud { grid-template-columns: 1fr; }
  .col-center { order: -1; }
  .panel-map { height: 460px; flex: none; }
  .strip { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto; flex-basis: auto; }
  .block-gauges { grid-column: 1 / -1; min-height: 220px; }
  .giant { font-size: 44px; }
  .panel-vprofile, .panel-hist { flex: none; height: 220px; }
  .panel-demand { flex: none; height: 150px; }
  .panel-table, .panel-log { max-height: 340px; }
  .bus-table td:first-child { max-width: none; }
  .sliders { display: grid; }
}
@media (max-width: 640px) {
  .strip { grid-template-columns: 1fr; }
  .map-hud-tr { top: 44px; right: auto; left: 12px; flex-wrap: wrap; gap: 6px 10px; }
  .seg-labels { flex-wrap: wrap; gap: 4px 12px; }
  .kpi-val { font-size: 16px; }
  .readouts span:nth-child(n+9) { display: inline; }
  .gauges { flex-direction: column; align-items: flex-start; gap: 12px; }
  .kpi-row { grid-template-columns: 52px 52px 1fr; }
  .sliders { grid-template-columns: 1fr; }
  .worst { flex-direction: column; align-items: flex-start; gap: 10px; }
  .clock-time { font-size: 22px; }
  .nav { flex-wrap: wrap; gap: 10px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* --------------------------------------------------------------------------
   Power-flow results console
   -------------------------------------------------------------------------- */
.hud[hidden], .results-view[hidden], .results-state[hidden], .results-tabpanel[hidden], .controller-dashboard[hidden],
.results-tab-rail[hidden], .state-actions[hidden], .state-actions button[hidden] { display: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.results-view {
  flex: 1 1 auto; min-width: 0; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column; gap: var(--gap);
  animation: results-enter .32s ease-out both;
}
@keyframes results-enter { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

.results-command {
  flex: none; min-width: 0; min-height: 90px; padding: 13px 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  border: 1px solid var(--cyan-line-2);
  background:
    linear-gradient(100deg, rgba(30, 227, 255, .09), transparent 34%),
    linear-gradient(180deg, var(--panel-alt), rgba(7, 12, 21, .93));
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
  box-shadow: inset 0 0 28px rgba(30, 227, 255, .035);
}
.results-heading { min-width: 0; }
.results-kicker { color: var(--cyan); font-size: 9px; letter-spacing: .19em; margin-bottom: 5px; }
.pulse-dot { display: inline-block; width: 5px; height: 5px; margin-right: 7px; background: var(--green); box-shadow: 0 0 8px var(--green); vertical-align: 1px; }
.results-heading h2 { color: #fff; font-size: clamp(19px, 1.8vw, 28px); font-weight: 900; text-shadow: 0 0 14px rgba(30, 227, 255, .34); }
.results-heading p { margin: 5px 0 0; color: var(--text-dim); font-size: 12px; letter-spacing: .055em; }
.results-command-meta { flex: none; display: flex; align-items: center; gap: 28px; }
.results-circuit { display: grid; grid-template-columns: auto auto; align-items: center; gap: 3px 12px; padding-left: 14px; border-left: 1px solid var(--cyan-line-2); }
.results-circuit-label { color: var(--text-dim); font-size: 9px; letter-spacing: .18em; }
.results-circuit strong { grid-column: 1; color: #fff; font-size: 13px; font-weight: 400; white-space: nowrap; }
.solve-badge { grid-row: 1 / span 2; grid-column: 2; padding: 4px 8px; font-size: 9px; letter-spacing: .12em; border: 1px solid var(--cyan-dim); color: var(--text-dim); white-space: nowrap; }
.solve-badge[data-status="complete"] { color: var(--green); border-color: rgba(65, 255, 160, .42); background: rgba(65, 255, 160, .06); box-shadow: inset 0 0 10px rgba(65, 255, 160, .05); }
.solve-badge[data-status="warning"] { color: var(--amber); border-color: rgba(255, 176, 32, .45); background: rgba(255, 176, 32, .06); }
.solve-badge[data-status="error"] { color: var(--red); border-color: rgba(255, 77, 94, .45); background: rgba(255, 77, 94, .06); }
.results-refresh-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.results-refresh-wrap > span { font-size: 9px; letter-spacing: .1em; white-space: nowrap; }
.refresh-btn {
  min-width: 112px; height: 30px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  color: var(--cyan); border: 1px solid var(--cyan); background: rgba(30, 227, 255, .06);
  font-family: var(--display); font-size: 10px; font-weight: 700; letter-spacing: .14em;
  transition: background .15s, box-shadow .15s, opacity .15s;
}
.refresh-btn:hover:not(:disabled) { background: rgba(30, 227, 255, .13); box-shadow: var(--glow); }
.refresh-btn:disabled { opacity: .55; cursor: wait; }
.refresh-btn.busy svg { animation: spin .8s linear infinite; }

.results-summary {
  flex: none; display: grid; grid-template-columns: 140px 170px 170px minmax(220px, 1fr) minmax(220px, auto);
  min-width: 0; border: 1px solid var(--cyan-line); background: rgba(7, 12, 21, .85);
}
.result-metric { min-width: 0; min-height: 47px; padding: 7px 13px; display: flex; flex-direction: column; justify-content: center; border-right: 1px solid var(--cyan-line); }
.result-metric:last-child { border-right: 0; }
.result-metric span { color: var(--text-dim); font-size: 9px; letter-spacing: .17em; }
.result-metric strong { margin-top: 3px; color: var(--cyan); font-size: 14px; font-weight: 400; text-shadow: 0 0 7px rgba(30, 227, 255, .32); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.result-metric-wide strong { color: var(--text); font-size: 11px; }
.result-metric-status strong { color: var(--green); font-size: 11px; }

.results-console { flex: 1 1 auto; min-width: 0; min-height: 0; overflow: hidden; }
.results-console::before { width: 15px; border-top-width: 2px; border-left-width: 2px; }
.results-console::after { width: 15px; border-bottom-width: 2px; border-right-width: 2px; }
.results-tab-rail {
  position: relative; z-index: 3; flex: none; min-width: 0; height: 48px;
  display: flex; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; scrollbar-color: var(--cyan-dim) transparent;
  border-bottom: 1px solid var(--cyan-line-2); background: #080f1b;
}
.results-tab-rail::after { content: ''; position: sticky; right: 0; flex: 0 0 34px; background: linear-gradient(90deg, transparent, #080f1b); pointer-events: none; }
.results-tab {
  position: relative; flex: 0 0 auto; min-width: 176px; height: 47px; padding: 0 15px;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  border-right: 1px solid var(--cyan-line); color: var(--text-dim); background: rgba(255, 255, 255, .01);
  font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  transition: color .15s, background .15s;
}
.results-tab b { min-width: 34px; padding: 2px 5px; color: var(--text-dim); font-size: 10px; font-weight: 400; text-align: right; border: 1px solid rgba(255, 255, 255, .06); }
.results-tab:hover { color: var(--text); background: rgba(30, 227, 255, .045); }
.results-tab.active { color: #fff; background: linear-gradient(180deg, rgba(30, 227, 255, .11), rgba(30, 227, 255, .025)); text-shadow: 0 0 8px rgba(30, 227, 255, .42); }
.results-tab.active b { color: var(--cyan); border-color: var(--cyan-dim); }
.results-tab.active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan), 0 -7px 18px rgba(30, 227, 255, .23);
  animation: tab-scan .28s ease-out both;
}
@keyframes tab-scan { from { transform: scaleX(.15); opacity: .3; } to { transform: scaleX(1); opacity: 1; } }

.results-state { flex: 1 1 auto; min-height: 280px; padding: 34px; display: grid; place-content: center; justify-items: center; text-align: center; background: radial-gradient(circle at center, rgba(30, 227, 255, .045), transparent 42%); }
.results-state::before { content: ''; width: 54px; height: 54px; margin-bottom: 18px; border: 1px solid var(--cyan-dim); transform: rotate(45deg); box-shadow: inset 0 0 18px rgba(30, 227, 255, .08), 0 0 15px rgba(30, 227, 255, .08); }
.results-state.loading::before { border-color: var(--cyan); border-style: dashed; animation: spin 2s linear infinite; }
.results-state.error::before { border-color: rgba(255, 77, 94, .7); box-shadow: inset 0 0 18px rgba(255, 77, 94, .1), 0 0 15px rgba(255, 77, 94, .1); }
.state-code { color: var(--cyan); font-size: 9px; letter-spacing: .2em; }
.results-state.error .state-code { color: var(--red); }
.results-state h3 { margin: 7px 0 4px; font-family: var(--display); font-size: 17px; letter-spacing: .1em; text-transform: uppercase; }
.results-state p { max-width: 600px; margin: 0; color: var(--text-dim); font-size: 13px; letter-spacing: .035em; line-height: 1.5; }
.state-actions { margin-top: 20px; display: flex; gap: 8px; }
.console-btn { height: 29px; padding: 0 12px; border: 1px solid var(--cyan-dim); color: var(--cyan); font-family: var(--mono); font-size: 10px; letter-spacing: .12em; background: rgba(30, 227, 255, .05); }
.console-btn.secondary { color: var(--text-dim); border-color: rgba(255, 255, 255, .12); background: transparent; }
.console-btn:hover { color: #fff; border-color: var(--cyan); background: rgba(30, 227, 255, .1); }

.results-tabpanel { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; outline: none; overflow: auto; }
.results-table-head { flex: none; min-height: 56px; padding: 8px 13px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--cyan-line); background: linear-gradient(90deg, rgba(30, 227, 255, .045), transparent 45%); }
.results-table-code { color: var(--cyan); font-size: 8px; letter-spacing: .18em; }
.results-table-head h3 { margin-top: 2px; font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.results-table-meta { display: flex; gap: 18px; color: var(--text-dim); font-size: 9px; letter-spacing: .12em; white-space: nowrap; }
.results-table-viewport { flex: 1 1 auto; min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--cyan-dim) #050a12; outline: none; }
.results-table-viewport:focus-visible { box-shadow: inset 0 0 0 1px var(--cyan-dim); }
.results-table { width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; table-layout: auto; font-family: var(--mono); font-size: 11px; line-height: 1.35; }
.results-table th {
  position: sticky; top: 0; z-index: 2; min-width: 106px; padding: 9px 11px 8px;
  color: var(--cyan); background: #0c1725; border-right: 1px solid rgba(30, 227, 255, .11); border-bottom: 1px solid rgba(30, 227, 255, .42);
  box-shadow: 0 5px 9px rgba(2, 6, 12, .68), inset 0 -1px rgba(30, 227, 255, .12);
  font-family: var(--body); font-size: 10px; font-weight: 700; letter-spacing: .11em; text-align: left; text-transform: uppercase; white-space: nowrap;
}
.results-table td { max-width: 440px; padding: 6px 11px; color: #c9d8e6; border-right: 1px solid rgba(30, 227, 255, .055); border-bottom: 1px solid rgba(255, 255, 255, .035); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.results-table td.num { text-align: right; color: var(--text); }
.results-table tbody tr:nth-child(even) td { background: rgba(30, 227, 255, .018); }
.results-table tbody tr:hover td { color: #fff; background: rgba(30, 227, 255, .065); }
.results-table td.empty { padding: 42px 18px; color: var(--text-faint); text-align: center; letter-spacing: .14em; }
/* Controller coverage is a visual summary of the captured audit rows. */
.controller-dashboard {
  flex: 1 1 auto; min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; scrollbar-width: thin; scrollbar-color: var(--cyan-dim) #050a12;
  outline: none;
  background:
    linear-gradient(rgba(30, 227, 255, .026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 227, 255, .026) 1px, transparent 1px),
    radial-gradient(circle at 12% 0, rgba(30, 227, 255, .075), transparent 32%),
    #060c15;
  background-size: 30px 30px, 30px 30px, auto, auto;
}
.controller-dashboard:focus-visible { box-shadow: inset 0 0 0 1px var(--cyan-dim); }
.controller-coverage-head {
  flex: none; min-height: 82px; padding: 14px 16px 12px; position: relative;
  border-bottom: 1px solid var(--cyan-line-2);
  background: linear-gradient(90deg, rgba(30, 227, 255, .07), transparent 48%);
}
.controller-coverage-head::after {
  content: ''; position: absolute; left: 16px; bottom: -1px; width: 110px; height: 2px;
  background: var(--cyan); box-shadow: 0 0 10px rgba(30, 227, 255, .7);
}
.controller-eyebrow { display: block; margin-bottom: 4px; color: var(--cyan); font-size: 8px; letter-spacing: .22em; }
.controller-coverage-head h3 {
  color: #fff; font-family: var(--display); font-size: clamp(17px, 1.5vw, 22px); font-weight: 800;
  letter-spacing: .045em; text-transform: uppercase; text-shadow: 0 0 13px rgba(30, 227, 255, .28);
}
.controller-coverage-head p { margin: 5px 0 0; color: var(--text-dim); font-size: 11px; letter-spacing: .045em; }

.controller-kpi-band {
  flex: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  border-bottom: 1px solid var(--cyan-line-2); background: rgba(3, 8, 15, .72);
}
.controller-kpi {
  min-width: 0; min-height: 102px; padding: 12px 13px 10px; position: relative;
  display: flex; flex-direction: column; justify-content: center;
  border-right: 1px solid var(--cyan-line);
  background: linear-gradient(180deg, rgba(30, 227, 255, .026), transparent);
}
.controller-kpi:last-child { border-right: 0; }
.controller-kpi::before {
  content: ''; position: absolute; top: 0; left: 12px; right: 70%; height: 1px;
  background: var(--cyan); opacity: .55;
}
.controller-kpi > span { min-height: 22px; color: var(--text-dim); font-family: var(--mono); font-size: 8px; letter-spacing: .15em; line-height: 1.35; }
.controller-kpi strong { margin: 3px 0 4px; color: var(--text); font-size: clamp(20px, 2vw, 28px); font-weight: 400; line-height: 1; text-shadow: 0 0 10px rgba(30, 227, 255, .25); }
.controller-kpi-voltage strong { color: var(--cyan); }
.controller-kpi-total strong { color: var(--green); text-shadow: 0 0 11px rgba(65, 255, 160, .26); }
.controller-kpi small { color: var(--text-faint); font-size: 9px; letter-spacing: .035em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.controller-kpi small b { color: var(--green); font-weight: 400; }

.controller-analysis {
  flex: 1 0 auto; min-width: 0; display: grid; grid-template-columns: minmax(360px, .9fr) minmax(460px, 1.1fr);
  border-bottom: 1px solid var(--cyan-line);
}
.controller-family-panel, .controller-chart-panel { min-width: 0; padding: 14px 16px 16px; }
.controller-family-panel { border-right: 1px solid var(--cyan-line-2); }
.controller-section-head {
  min-height: 39px; padding-bottom: 9px; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  border-bottom: 1px solid var(--cyan-line);
}
.controller-section-head span { color: var(--cyan); font-size: 7px; letter-spacing: .18em; }
.controller-section-head h4 { margin: 3px 0 0; color: var(--text); font-size: 14px; font-weight: 700; letter-spacing: .055em; text-transform: uppercase; }
.controller-legend { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; white-space: nowrap; }
.controller-legend i { width: 14px; height: 3px; background: var(--green); box-shadow: 0 0 6px rgba(65, 255, 160, .6); }
.controller-family-list { display: grid; }
.controller-family-row {
  min-height: 62px; padding: 9px 11px; display: grid; grid-template-columns: minmax(150px, 1fr) auto; align-items: center; gap: 18px;
  border-bottom: 1px solid var(--cyan-line); background: linear-gradient(90deg, rgba(30, 227, 255, .025), transparent 70%);
}
.controller-family-row:last-child { border-bottom-color: var(--cyan-line-2); }
.controller-family-row::before {
  content: ''; position: absolute; top: 20px; left: 0; width: 3px; height: 22px;
  background: var(--green); box-shadow: 0 0 7px rgba(65, 255, 160, .55);
}
.controller-family-row { position: relative; }
.controller-family-row.is-zero::before { background: transparent; border: 1px solid var(--text-faint); box-shadow: none; }
.controller-family-row > div:first-of-type { padding-left: 12px; }
.controller-family-code { color: var(--cyan); font-size: 7px; letter-spacing: .17em; }
.controller-family-row h5 { margin: 2px 0 0; color: var(--text); font-size: 13px; font-weight: 600; letter-spacing: .04em; }
.controller-family-row dl { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(72px, auto)); gap: 18px; }
.controller-family-row dl div { text-align: right; }
.controller-family-row dt { color: var(--text-faint); font-family: var(--mono); font-size: 7px; letter-spacing: .13em; }
.controller-family-row dd { margin: 2px 0 0; color: var(--text); font-size: 18px; }
.controller-family-row dl div:last-child dd { color: var(--green); text-shadow: 0 0 8px rgba(65, 255, 160, .25); }
.controller-family-row.is-zero dl div:last-child dd { color: var(--text-dim); text-shadow: none; }

.controller-chart-panel { display: flex; flex-direction: column; }
.controller-scale-max { margin-top: 4px; color: var(--text-dim) !important; white-space: nowrap; }
.controller-chart {
  flex: 1 1 auto; min-height: 186px; padding: 19px 0 5px; position: relative;
  display: grid; align-content: center; gap: 20px;
}
.controller-chart-grid {
  position: absolute; z-index: 0; top: 14px; right: 48px; bottom: 5px; left: 142px;
  display: grid; grid-template-columns: repeat(4, 1fr); pointer-events: none;
}
.controller-chart-grid i { border-left: 1px dashed rgba(30, 227, 255, .12); }
.controller-chart-grid i:last-child { border-right: 1px dashed rgba(30, 227, 255, .12); }
.controller-chart-row {
  position: relative; z-index: 1; min-width: 0; display: grid; grid-template-columns: 130px minmax(110px, 1fr) 36px; align-items: center; gap: 12px;
}
.controller-chart-label { color: #b8c9d9; font-size: 11px; text-align: right; letter-spacing: .025em; white-space: nowrap; }
.controller-chart-track {
  height: 13px; position: relative; border: 1px solid rgba(30, 227, 255, .13);
  background: rgba(2, 7, 13, .8); box-shadow: inset 0 0 8px rgba(0, 0, 0, .65);
}
.controller-chart-track::before { content: ''; position: absolute; top: 5px; right: 0; left: 0; height: 1px; background: rgba(30, 227, 255, .15); }
.controller-chart-bar {
  position: absolute; z-index: 1; top: 2px; bottom: 2px; left: 2px; width: var(--rail-fill, 0%); max-width: calc(100% - 4px);
  background: linear-gradient(90deg, var(--cyan-2), var(--green));
  box-shadow: 0 0 8px rgba(30, 227, 255, .52); transition: width .38s ease-out;
}
.controller-chart-bar::after { content: ''; position: absolute; top: -2px; right: -1px; width: 2px; height: 11px; background: #d6fff0; box-shadow: 0 0 7px var(--green); }
.controller-chart-bar.is-zero { width: 0; background: none; box-shadow: none; }
.controller-chart-bar.is-zero::after { right: auto; left: 0; width: 5px; height: 9px; background: #060c15; border: 1px solid var(--text-faint); box-shadow: none; }
.controller-chart-row strong { color: var(--green); font-size: 14px; font-weight: 400; text-align: right; }
.controller-chart-row.is-zero strong { color: var(--text-dim); }

.controller-telemetry-note {
  flex: none; min-height: 31px; padding: 8px 16px; display: flex; align-items: center; gap: 8px;
  color: var(--text-faint); font-size: 8px; letter-spacing: .1em;
  background: rgba(3, 8, 15, .84);
}
.controller-telemetry-note i { flex: none; width: 5px; height: 5px; border: 1px solid var(--cyan); transform: rotate(45deg); box-shadow: 0 0 5px rgba(30, 227, 255, .55); }

.results-footer { flex: none; height: 22px; padding: 0 7px; display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--text-dim); font-size: 8px; letter-spacing: .13em; white-space: nowrap; }
.results-footer span { overflow: hidden; text-overflow: ellipsis; }
.results-footer i { display: inline-block; width: 5px; height: 5px; margin-right: 7px; background: var(--green); box-shadow: 0 0 5px var(--green); }

@media (max-width: 1100px) {
  body { overflow-x: hidden; }
  .results-view { min-height: calc(100vh - 198px); overflow: visible; }
  .results-command { flex-wrap: wrap; }
  .results-command-meta { flex: 1 1 auto; justify-content: flex-end; }
  .results-summary { grid-template-columns: repeat(3, 1fr); }
  .result-metric:nth-child(3) { border-right: 0; }
  .result-metric-wide { grid-column: span 2; border-top: 1px solid var(--cyan-line); }
  .result-metric-status { border-top: 1px solid var(--cyan-line); }
  .results-console { flex: none; height: min(680px, 68vh); }
  .controller-kpi-band { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .controller-kpi:nth-child(3) { border-right: 0; }
  .controller-kpi:nth-child(n+4) { border-top: 1px solid var(--cyan-line); }
  .controller-analysis { grid-template-columns: minmax(330px, .9fr) minmax(390px, 1.1fr); }
}
@media (max-width: 640px) {
  .results-view { min-height: calc(100vh - 250px); }
  .results-command { padding: 12px; clip-path: none; }
  .results-heading { width: 100%; }
  .results-heading p { font-size: 11px; }
  .results-command-meta { width: 100%; justify-content: space-between; gap: 12px; }
  .results-circuit { padding-left: 0; border-left: 0; }
  .results-refresh-wrap > span { display: none; }
  .results-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .result-metric:nth-child(2), .result-metric-status { border-right: 0; }
  .result-metric:nth-child(3) { border-right: 1px solid var(--cyan-line); border-top: 1px solid var(--cyan-line); }
  .result-metric-wide { grid-column: auto; border-top: 1px solid var(--cyan-line); border-right: 0; }
  .result-metric-status { grid-column: 1 / -1; border-top: 1px solid var(--cyan-line); }
  .results-tab { min-width: 150px; padding: 0 11px; }
  .results-table-head { align-items: flex-start; }
  .results-table-meta { flex-direction: column; gap: 2px; text-align: right; }
  .results-state { min-height: 260px; padding: 24px 16px; }
  .results-console { height: 66vh; min-height: 460px; }
  .results-footer { height: auto; min-height: 24px; white-space: normal; }
  .results-footer span:last-child { display: none; }
  .controller-coverage-head { padding-inline: 12px; }
  .controller-kpi-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .controller-kpi { min-height: 92px; padding: 10px; }
  .controller-kpi:nth-child(2n) { border-right: 0; }
  .controller-kpi:nth-child(3) { border-right: 1px solid var(--cyan-line); }
  .controller-kpi:nth-child(n+3) { border-top: 1px solid var(--cyan-line); }
  .controller-analysis { display: block; }
  .controller-family-panel, .controller-chart-panel { padding: 12px; }
  .controller-family-panel { border-right: 0; border-bottom: 1px solid var(--cyan-line-2); }
  .controller-family-row { grid-template-columns: minmax(120px, 1fr) auto; gap: 10px; padding-inline: 7px; }
  .controller-family-row dl { gap: 10px; }
  .controller-chart { min-height: 205px; gap: 18px; }
  .controller-chart-grid { left: 112px; right: 35px; }
  .controller-chart-row { grid-template-columns: 100px minmax(70px, 1fr) 25px; gap: 7px; }
  .controller-chart-label { font-size: 9px; }
  .controller-telemetry-note { align-items: flex-start; line-height: 1.45; }
}

/* --------------------------------------------------------------------------
   Server-driven additions
   -------------------------------------------------------------------------- */
.map-hud-tl .amber[hidden] { display: none; }
#map-note { font-size: 9px; letter-spacing: .2em; }
.bus-table td.empty { text-align: center; color: var(--text-faint); font-family: var(--mono); font-size: 10px; letter-spacing: .14em; padding: 14px; }
.row-tag { display: inline-block; min-width: 34px; margin-right: 4px; padding: 0 4px; font-size: 8px; letter-spacing: .12em; color: var(--cyan); border: 1px solid var(--cyan-dim); background: rgba(30, 227, 255, .06); vertical-align: middle; text-align: center; }
.bus-table td:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.mini-gauge figcaption b.red { color: var(--red); }
.mini-gauge figcaption b.green { color: var(--green); }
#m-conv.red { color: var(--red); }
#m-conv.dim { color: var(--text-faint); }
.block-foot b.amber, #k-unbal.amber { color: var(--amber); }
/* scientific-notation readouts are 6 chars wide — never wrap */
.giant { white-space: nowrap; font-size: clamp(30px, 2.3vw, 46px); }
.block-mismatch { overflow: hidden; }
.panel-hist .panel-head { flex-wrap: nowrap; }
.panel-hist .panel-head h2 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#hist-range { white-space: nowrap; flex: none; }
@media (max-width: 1600px) { #hist-range { display: none; } }


/* ---------- Snowflake integration ---------- */
.modal-wide .modal-panel { width: min(760px, 94vw); }
.sf-row { display: flex; gap: 8px; align-items: center; }
.sf-row .hud-input { flex: 1; }
.hud-input {
  background: rgba(4, 10, 20, .7); border: 1px solid var(--cyan-line); color: var(--text);
  font-family: var(--mono); font-size: 11px; padding: 6px 8px; letter-spacing: .04em; min-width: 0;
}
.hud-input:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 1px rgba(30, 227, 255, .35); }
.sf-form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; }
.sf-form .field input[type=text], .sf-form .field select {
  background: rgba(4, 10, 20, .7); border: 1px solid var(--cyan-line); color: var(--text);
  font-family: var(--mono); font-size: 11px; padding: 6px 8px;
}
.sf-span2 { grid-column: span 2; }
.sf-checks { display: flex; flex-wrap: wrap; gap: 8px 16px; padding-top: 4px; }
.sf-actions { display: flex; gap: 8px; align-items: center; }
.sf-actions .run-btn { flex: 1; }
.sf-log {
  max-height: 140px; overflow: auto; font-size: 10px; line-height: 1.5; margin: 0; padding: 8px 10px;
  background: rgba(4, 10, 20, .6); border: 1px solid var(--cyan-line); color: var(--text-dim); white-space: pre-wrap;
}
.sf-log[hidden] { display: none; }
#results-source { margin-right: 6px; }
#results-study { width: 170px; margin-right: 6px; }
.net-list li .meta { color: var(--text-dim); font-size: 10px; white-space: nowrap; }


/* Native study controls and analysis result context. */
.an-description, .an-configure { grid-column: 1 / -1; }
.col-right { overflow-y: auto; }
.an-description { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin: 0; color: var(--text-dim); font: 12px/1.4 var(--mono); }
.panel-analysis .panel-head { flex-wrap: wrap; gap: 8px; }
.panel-analysis .hud-select { max-width: 100%; }
.study-dialog { width: 100vw; max-width: none; }
.study-dialog .modal-panel { width: min(800px, calc(100vw - 24px)); max-width: none; }
.study-dialog .modal-body { min-height: 0; flex: 1 1 auto; }
.study-dialog .modal-head, .study-footer { flex: none; }
.study-dialog .modal-body > * { flex-shrink: 0; }
.study-footer { padding: 12px 14px; border-top: 1px solid var(--cyan-line); }
.study-footer .console-btn { min-height: 36px; width: 100%; }
.study-dialog p { margin: 0; line-height: 1.5; }
.study-copy-note { color: var(--text-dim); font-size: 13px; }
.study-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; margin: 12px 0; }
.study-fields .field { font-size: 11px; letter-spacing: .06em; gap: 7px; }
.study-fields input, .study-fields input[type=number], .study-fields select { min-width: 0; max-width: 100%; width: 100%; font: 14px var(--mono); padding: 9px; color: var(--text); background: #070e19; border: 1px solid var(--cyan-line-2); }
.study-fields input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--cyan); }
.study-fields small { color: var(--text-dim); font: 12px/1.5 var(--mono); letter-spacing: 0; }
.study-banner { padding: 12px 18px; border: 1px solid var(--amber); color: var(--amber); font: 12px/1.5 var(--mono); }
.study-summary { padding: 18px; margin-bottom: 14px; }
.study-summary h3 { margin: 0 0 12px; color: var(--cyan); }
.study-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 0 0 14px; }
.study-metrics div { padding: 12px; border-left: 2px solid var(--cyan-line-2); background: rgba(30,227,255,.03); overflow-wrap: anywhere; }
.study-metrics dt { color: var(--text-dim); font: 11px/1.5 var(--mono); text-transform: uppercase; }
.study-metrics dd { margin: 5px 0 0; font: 15px/1.5 var(--mono); }
.study-summary details { color: var(--text-dim); font: 12px/1.5 var(--mono); }
.study-summary summary { cursor: pointer; }
.study-summary pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 240px; overflow: auto; }
.study-export { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 12px; }
.study-export a { text-decoration: none; }
.study-table-warning { margin: 0; padding: 10px 18px; color: var(--amber); font: 12px/1.5 var(--mono); }
.study-fields [hidden], .study-summary[hidden], .study-export[hidden], .study-banner[hidden], .an-description[hidden], .an-configure[hidden] { display: none; }
@media (max-width: 600px) { .study-fields { grid-template-columns: 1fr; } .study-metrics { grid-template-columns: 1fr; } }

/* Advanced studies need scrollable space for both their outcome and tables. */
.results-view.study-mode { overflow-y: auto; }
.study-mode .study-summary { flex: none; max-height: 320px; overflow-y: auto; }
.study-mode .study-export { flex: none; }
.study-mode .results-console { flex: 0 0 420px; min-height: 300px; }
.an-form .field[hidden] { display: none; }

/* Saved OpenDSS benchmark snapshots share the simulation HUD. */
.import-source-panel { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.import-source-panel p { margin: 0; font-size: 13px; line-height: 1.5; }
.import-source-label, .import-source-panel > label { font: 12px var(--mono); color: var(--text-dim); }
.benchmark-playback { margin: 0 12px 10px; padding: 12px 14px; border: 1px solid var(--cyan-line); background: #091423; font-size: 13px; }
.playback-context, .playback-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.playback-context { margin-bottom: 8px; }
.playback-context strong { color: var(--cyan); }
#playback-status { color: var(--text-dim); }
.playback-controls select { max-width: 360px; min-width: 180px; }
#import-source, #import-benchmarks select { width: 100%; min-width: 0; }
.import-source-panel[hidden], .benchmark-playback[hidden], #comparison-mode-option[hidden] { display: none; }
@media (max-width: 600px) {
  .benchmark-playback { margin: 0 6px 8px; padding: 10px; }
  .playback-controls { gap: 8px; }
  .playback-controls select { min-width: 0; flex: 1 1 140px; max-width: 100%; }
  .playback-controls label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .playback-controls > .dim { flex-basis: 100%; }
}

#import-benchmarks button:disabled, .playback-controls button:disabled { opacity: .45; cursor: default; }

#eq.unavailable { color: var(--text-dim); font: 12px var(--mono); align-items: center; }

/* Network diagnostics workspace */
.diag-view { --diag-cyan: #1ee3ff; --diag-green: #41ffa0; --diag-amber: #ffb020; --diag-red: #ff4d5e; --diag-ink: #020812; --diag-panel: rgba(3, 12, 25, .78); min-height: calc(100vh - 110px); padding: 12px 16px 28px; color: var(--text); background: radial-gradient(circle at 51% 28%, rgba(11, 54, 78, .18), transparent 28%), linear-gradient(rgba(4, 12, 23, .76), rgba(2, 7, 15, .94)), repeating-linear-gradient(0deg, transparent 0 39px, rgba(30, 227, 255, .018) 40px), repeating-linear-gradient(90deg, transparent 0 39px, rgba(30, 227, 255, .015) 40px); }
#diagnostics-view { overflow-y: auto; overscroll-behavior: contain; scrollbar-color: rgba(30, 227, 255, .55) rgba(3, 12, 25, .7); }
.diag-console-header { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding: 2px 4px 11px; border-bottom: 1px solid var(--cyan-line); }
.diag-console-header h1, .diag-workspace-title h2 { margin: 4px 0 0; color: var(--diag-cyan); font: 700 clamp(18px, 1.7vw, 26px)/1 var(--display); letter-spacing: .035em; text-transform: uppercase; text-shadow: 0 0 14px rgba(30, 227, 255, .26); }
.diag-kicker, .diag-header-readouts, .diag-panel-heading, .diag-workspace-title, .diag-panel dt, .diag-panel-heading span, .diag-source-drawer { font-family: var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.diag-kicker { margin: 0; color: var(--text-dim); font-size: 9px; }
.diag-header-readouts { display: flex; gap: 24px; justify-content: flex-end; color: var(--text-faint); font-size: 8px; text-align: right; }
.diag-header-readouts span { display: grid; gap: 4px; }.diag-header-readouts b { color: var(--diag-cyan); font-size: 10px; font-weight: 500; }
.diag-console-grid { display: grid; grid-template-columns: minmax(205px, .72fr) minmax(560px, 2.85fr) minmax(255px, .82fr); gap: 12px; padding-top: 12px; align-items: start; }
.diag-left-rail, .diag-right-stack, .diag-center-stage { min-width: 0; display: grid; gap: 12px; }
.diag-panel { min-width: 0; overflow: hidden; border: 1px solid rgba(30, 227, 255, .54); background: linear-gradient(130deg, rgba(3, 15, 29, .89), var(--diag-panel)); box-shadow: inset 0 1px 0 rgba(230, 244, 255, .045), 0 0 20px rgba(0, 0, 0, .16); }
.diag-panel-heading, .diag-workspace-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 28px; padding: 7px 10px; border-bottom: 1px solid rgba(30, 227, 255, .22); color: var(--text-dim); font-size: 8px; }
.diag-panel-heading h2 { margin: 0; color: var(--diag-cyan); font: 700 9px var(--mono); letter-spacing: .15em; text-transform: uppercase; }
.diag-panel-heading span { color: var(--text-dim); font-size: 7px; }.diag-panel-mark, .diag-runner-status { color: var(--diag-green) !important; }
.diag-violation-panel { min-height: 535px; }.diag-hist-panel { min-height: 190px; }
.diag-table { width: 100%; border-collapse: collapse; font: 9px var(--mono); }.diag-table th { padding: 7px 8px; color: var(--text-dim); font-size: 7px; font-weight: 400; letter-spacing: .09em; text-align: left; text-transform: uppercase; white-space: nowrap; }.diag-table td { padding: 7px 8px; border-top: 1px solid rgba(30, 227, 255, .09); color: #c2d6e6; vertical-align: top; }.diag-table tbody tr:hover { background: rgba(30, 227, 255, .065); }.diag-table input[type="checkbox"] { accent-color: var(--diag-cyan); }
.diag-empty { height: 110px; color: var(--text-faint) !important; font-size: 8px; letter-spacing: .12em; text-align: center; }.diag-empty-glyph { display: block; margin-bottom: 8px; color: var(--diag-cyan); font-size: 17px; opacity: .55; }
.diag-histogram { height: 105px; display: flex; align-items: end; gap: 2px; padding: 18px 14px 8px; border-bottom: 1px solid rgba(30, 227, 255, .16); background: repeating-linear-gradient(0deg, transparent 0 18px, rgba(30, 227, 255, .06) 19px); }.diag-histogram i { flex: 1; min-height: 3px; height: var(--h, 4px); background: rgba(30, 227, 255, .15); }.diag-histogram i:nth-child(1) { --h: 18px; }.diag-histogram i:nth-child(2) { --h: 38px; }.diag-histogram i:nth-child(3) { --h: 62px; }.diag-histogram i:nth-child(4) { --h: 79px; }.diag-histogram i:nth-child(5) { --h: 64px; }.diag-histogram i:nth-child(6) { --h: 42px; }.diag-histogram i:nth-child(7) { --h: 26px; }.diag-histogram i:nth-child(8) { --h: 14px; }.diag-histogram i:nth-child(9) { --h: 7px; }.diag-hist-axis { display: flex; justify-content: space-between; padding: 7px 9px; color: var(--text-faint); font-size: 7px; }
.diag-lenses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }.diag-lens { position: relative; min-width: 0; margin: 0; aspect-ratio: 1.04; display: grid; place-items: center; overflow: hidden; }.diag-lens::before { content: ''; position: absolute; inset: 5% 2%; background: radial-gradient(circle at 50% 48%, rgba(30, 227, 255, .1), transparent 56%); filter: blur(7px); }.diag-lens svg { position: relative; width: min(100%, 490px); height: auto; overflow: visible; }.diag-lens-fill { fill: url(#diagGlow); }.diag-lens-ring { fill: none; stroke: var(--diag-cyan); stroke-width: 2; opacity: .65; }.diag-lens-ring-dim { stroke-width: 1; opacity: .3; }.diag-lens-grid { fill: none; stroke: #0d9db6; stroke-width: 1; opacity: .32; }.diag-topology-trace { fill: none; stroke: #d5fcff; stroke-width: 2; filter: drop-shadow(0 0 4px rgba(30, 227, 255, .8)); }.diag-topology-trace circle { fill: var(--diag-cyan); stroke: #d5fcff; stroke-width: 1; }.diag-topology-trace circle:first-of-type { fill: none; stroke-width: 2; }.diag-svg-label, .diag-svg-caption, .diag-svg-axis { fill: #b7f6ff; font: 9px var(--mono); letter-spacing: .1em; }.diag-svg-caption { fill: var(--diag-cyan); font-size: 8px; }.diag-svg-axis { fill: var(--text-dim); font-size: 7px; }.diag-profile-limit { stroke: var(--diag-amber); stroke-width: 2; stroke-dasharray: 6 5; opacity: .72; }.diag-profile-pending { fill: none; stroke: rgba(30, 227, 255, .35); stroke-width: 3; stroke-dasharray: 7 6; }.diag-lens figcaption { position: absolute; z-index: 1; bottom: 5%; left: 0; right: 0; color: var(--diag-cyan); font: 9px var(--mono); letter-spacing: .12em; text-align: center; }.diag-lens figcaption span { color: var(--text-dim); }
.diag-telemetry-grid { display: grid; grid-template-columns: .95fr 1.25fr 1.05fr; gap: 9px; }.diag-telemetry { min-height: 150px; }.diag-telemetry > strong { display: block; padding: 12px 10px 5px; color: var(--diag-cyan); font: 700 13px var(--mono); letter-spacing: .05em; }.diag-telemetry dl, .diag-network-panel dl { margin: 0; }.diag-telemetry dl div, .diag-network-panel dl div { display: flex; justify-content: space-between; gap: 8px; padding: 6px 10px; border-top: 1px solid rgba(30, 227, 255, .1); }.diag-telemetry dt, .diag-network-panel dt { color: var(--text-dim); font-size: 7px; }.diag-telemetry dd, .diag-network-panel dd { margin: 0; color: #d2f8ff; font: 9px var(--mono); text-align: right; }.diag-mismatch-readout { color: var(--text) !important; font-size: 25px !important; }.diag-delta-bars { height: 69px; display: flex; align-items: end; gap: 5px; padding: 12px 10px 6px; border-bottom: 1px solid rgba(30, 227, 255, .14); }.diag-delta-bars i { flex: 1; height: var(--bar, 8px); background: rgba(30, 227, 255, .16); border: 1px solid rgba(30, 227, 255, .12); }.diag-delta-bars i:nth-child(1) { --bar: 55px; }.diag-delta-bars i:nth-child(2) { --bar: 44px; }.diag-delta-bars i:nth-child(3) { --bar: 36px; }.diag-delta-bars i:nth-child(4) { --bar: 26px; }.diag-delta-bars i:nth-child(5) { --bar: 18px; }.diag-delta-bars i:nth-child(6) { --bar: 11px; }.diag-delta-bars i:nth-child(7) { --bar: 5px; }.diag-delta-strip p { margin: 8px 10px; color: var(--text-faint); font: 8px var(--mono); letter-spacing: .12em; text-align: center; }
.diag-findings-grid { display: grid; grid-template-columns: minmax(270px, .96fr) minmax(400px, 1.55fr); gap: 9px; }.diag-findings-grid .diag-panel { min-height: 218px; }.diag-workspace-title { padding: 0 0 6px; border: 0; background: transparent; }.diag-workspace-title h2 { color: var(--diag-cyan); font-size: 16px; }.diag-workspace-title span { color: var(--text-dim); font: 8px var(--mono); letter-spacing: .1em; }.diag-workspace-title b { color: var(--diag-green); font-weight: 400; }.diag-recommendations-panel, .diag-issues-panel, .diag-summary-panel { border-top-color: rgba(30, 227, 255, .35); background: transparent; box-shadow: none; }.diag-results-wrap, .diag-circuit-table-wrap { overflow: auto; max-height: 260px; }.diag-priority-critical, .diag-priority-high { color: var(--diag-red) !important; }.diag-priority-medium { color: var(--diag-amber) !important; }.diag-priority-low, .diag-priority-info { color: var(--diag-green) !important; }
.diag-network-name { display: block; padding: 12px 10px; color: var(--diag-cyan); border-bottom: 1px solid rgba(30, 227, 255, .18); font: 700 14px var(--mono); letter-spacing: .04em; }.diag-green { color: var(--diag-green) !important; }.diag-analysis-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px; }.diag-analysis-fields label { display: grid; gap: 5px; color: var(--text-dim); font: 7px var(--mono); letter-spacing: .08em; }.diag-analysis-fields input, .diag-phase-mode { min-width: 0; height: 28px; box-sizing: border-box; padding: 7px; border: 1px solid rgba(30, 227, 255, .3); background: rgba(0, 6, 13, .75); color: var(--text); font: 10px var(--mono); }.diag-phase-mode { color: var(--text-dim); font-size: 8px; }.diag-phase-mode b { color: var(--diag-cyan); }.diag-runner-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding: 0 10px 11px; }.diag-button { min-height: 31px; border: 1px solid rgba(30, 227, 255, .7); border-radius: 0; cursor: pointer; background: rgba(5, 27, 42, .72); color: #c8fbff; font: 9px var(--mono); letter-spacing: .14em; text-transform: uppercase; transition: background .18s ease, color .18s ease, box-shadow .18s ease; }.diag-button:hover:not(:disabled), .diag-button:focus-visible { outline: 0; background: rgba(30, 227, 255, .16); color: #fff; box-shadow: 0 0 12px rgba(30, 227, 255, .28); }.diag-button:disabled { cursor: not-allowed; opacity: .38; }.diag-button-primary { grid-column: 1 / -1; background: rgba(30, 227, 255, .1); }.diag-button-fix { border-color: rgba(65, 255, 160, .55); color: #b7ffda; }.diag-runner-hint { grid-column: 1 / -1; color: var(--text-dim); font: 8px/1.45 var(--mono); letter-spacing: .04em; }.diag-kpi-grid { display: grid; grid-template-columns: 52px 52px 1fr; gap: 8px; padding: 10px; }.diag-dial, .diag-transformer-dial { position: relative; display: grid; place-items: center; aspect-ratio: 1; }.diag-dial i, .diag-transformer-dial i { position: absolute; inset: 4px; border: 3px solid rgba(30, 227, 255, .26); border-top-color: var(--diag-cyan); border-radius: 50%; }.diag-dial span { position: relative; color: var(--diag-cyan); font: 12px var(--mono); text-align: center; }.diag-dial small { display: block; color: var(--text-dim); font-size: 6px; }.diag-kpi-grid dl { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; margin: 0; }.diag-kpi-grid dl div { min-height: 40px; padding: 6px; border: 1px solid rgba(30, 227, 255, .15); }.diag-kpi-grid dt { color: var(--text-dim); font-size: 6px; }.diag-kpi-grid dd { margin: 4px 0 0; color: var(--diag-cyan); font: 10px var(--mono); }.diag-transformer-panel > div { display: grid; grid-template-columns: 1fr 1fr; padding: 11px 22px 7px; }.diag-transformer-dial { max-width: 67px; margin: auto; }.diag-transformer-dial i { border-color: rgba(30, 227, 255, .25); border-top-color: var(--diag-cyan); }.diag-transformer-dial b { position: relative; color: var(--diag-cyan); font: 13px var(--mono); }.diag-transformer-dial small { position: absolute; top: 100%; color: var(--text-dim); font: 7px var(--mono); white-space: nowrap; }.diag-transformer-panel p { margin: 11px 10px 9px; padding-top: 7px; border-top: 1px solid rgba(30, 227, 255, .13); color: var(--text-dim); font: 7px var(--mono); letter-spacing: .06em; }.diag-transformer-panel p b { color: var(--diag-cyan); }.diag-summary-panel .diag-workspace-title { padding: 0 0 5px; }.diag-summary-panel td { padding-block: 5px; }.diag-summary-panel td:last-child { color: var(--diag-cyan); text-align: right; }
.diag-source-drawer { margin-top: 12px; border: 1px solid rgba(30, 227, 255, .24); background: rgba(3, 12, 25, .54); color: var(--text-dim); font-size: 8px; }.diag-source-drawer summary { cursor: pointer; padding: 9px 11px; color: var(--diag-cyan); list-style: none; }.diag-source-drawer summary::-webkit-details-marker { display: none; }.diag-source-drawer summary span { float: right; color: var(--text-faint); }.diag-source-content { border-top: 1px solid rgba(30, 227, 255, .16); }.diag-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; padding: 10px; }.diag-fields label { color: var(--text-dim); font: 8px var(--mono); letter-spacing: .08em; text-transform: uppercase; }.diag-field-wide { grid-column: span 2; }.diag-fields input { width: 100%; box-sizing: border-box; margin-top: 5px; border: 1px solid rgba(30, 227, 255, .2); border-radius: 0; padding: 7px; outline: none; background: rgba(0, 8, 17, .8); color: var(--text); font: 9px var(--mono); }.diag-fields input:focus { border-color: var(--diag-cyan); box-shadow: 0 0 0 1px rgba(30, 227, 255, .2); }.diag-actions { display: flex; align-items: center; gap: 10px; padding: 0 10px 10px; }.diag-msg { min-height: 14px; margin: 0; color: var(--text-dim); font: 9px var(--mono); }.diag-msg[data-tone="success"] { color: var(--diag-green); }.diag-msg[data-tone="error"] { color: var(--diag-red); }.diag-run-row { justify-content: space-between; padding-top: 9px; border-top: 1px solid rgba(30, 227, 255, .12); font: 8px var(--mono); color: var(--text-dim); }.diag-run-hint { color: var(--text-faint); }.diag-sort { border: 0; padding: 0; cursor: pointer; background: transparent; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; }.diag-sort:hover { color: var(--diag-cyan); }.diag-sort span { color: var(--diag-cyan); }.diag-filter-row th { padding: 7px 11px 10px; }.diag-filter-row input { margin-top: 0; }
@media (max-width: 1320px) { .diag-console-grid { grid-template-columns: 190px minmax(500px, 1fr) 235px; }.diag-lenses { gap: 4px; }.diag-workspace-title h2 { font-size: 14px; } }
@media (max-width: 1060px) { .diag-console-grid { grid-template-columns: minmax(0, 1fr) 255px; }.diag-left-rail { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(230px, .42fr); }.diag-violation-panel { min-height: 180px; }.diag-hist-panel { min-height: auto; }.diag-findings-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .diag-view { padding: 10px; }.diag-console-header { align-items: start; flex-direction: column; }.diag-header-readouts { justify-content: start; text-align: left; }.diag-console-grid { grid-template-columns: 1fr; }.diag-right-stack { grid-template-columns: 1fr 1fr; }.diag-runner-panel, .diag-summary-panel { grid-column: 1 / -1; }.diag-left-rail { grid-column: auto; grid-template-columns: 1fr; }.diag-lenses, .diag-telemetry-grid { grid-template-columns: 1fr; }.diag-lens { max-height: 390px; }.diag-fields { grid-template-columns: 1fr 1fr; }.diag-field-wide { grid-column: span 2; } }
@media (max-width: 490px) { .diag-right-stack { grid-template-columns: 1fr; }.diag-network-panel, .diag-kpi-panel, .diag-transformer-panel { grid-column: auto; }.diag-header-readouts { gap: 12px; flex-wrap: wrap; }.diag-header-readouts span { text-align: left; }.diag-findings-grid { gap: 14px; }.diag-workspace-title { align-items: start; flex-direction: column; gap: 4px; }.diag-fields { grid-template-columns: 1fr; }.diag-field-wide { grid-column: auto; }.diag-source-drawer summary span { display: none; }.diag-runner-controls { grid-template-columns: 1fr; } }

/* Exact 3PH Powerflow desktop console: the upper solver workspace and the
   diagnostics band are independent grid rows so neither can displace the other. */
.diag-view { --diag-cyan: #1ee3ff; --diag-green: #41ffa0; --diag-amber: #ffb020; --diag-red: #ff4d5e; min-height: calc(100vh - 72px); padding: 14px 18px 42px; color: #e6f4ff; background-color: #02070f; background-image: radial-gradient(circle at 50% 19%, rgba(0, 124, 169, .13), transparent 27%), linear-gradient(rgba(2, 7, 15, .87), rgba(2, 7, 15, .97)), repeating-linear-gradient(90deg, transparent 0 28px, rgba(30, 227, 255, .018) 29px), repeating-linear-gradient(0deg, transparent 0 28px, rgba(30, 227, 255, .018) 29px); font-family: var(--mono); }
.diag-status-rail { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 0 4px 13px; border-bottom: 1px solid rgba(30,227,255,.18); }
.diag-brand { display: flex; align-items: center; gap: 13px; }.diag-logo { width: 43px; height: 43px; flex: 0 0 auto; }.diag-brand > div { padding-left: 13px; border-left: 2px solid var(--diag-cyan); }.diag-brand h1 { margin: 0; color: #b7f8ff; font: 700 18px/1 var(--display); letter-spacing: .075em; text-transform: uppercase; }.diag-brand p { margin: 6px 0 0; color: #99a8ba; font: 10px/1 var(--mono); letter-spacing: .17em; text-transform: uppercase; }
.diag-status-readout { display: flex; align-items: center; gap: 21px; color: #8798ad; font: 8px var(--mono); text-transform: uppercase; letter-spacing: .08em; }.diag-status-readout dl { display: flex; gap: 16px; margin: 0; }.diag-status-readout dt { color: #5c6a7c; font-size: 7px; }.diag-status-readout dd { margin: 3px 0 0; color: #aef6ff; font-size: 10px; }.diag-status-lights { display: flex; gap: 12px; }.diag-status-lights span { white-space: nowrap; }.diag-status-lights i { display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; background: var(--diag-green); box-shadow: 0 0 6px currentColor; }.diag-status-lights .secure { background: #468bdf; }.diag-status-lights .live { background: var(--diag-cyan); }.diag-status-readout time { color: #b8fbff; font-size: 12px; text-align: right; }.diag-status-readout time small { display: block; margin-top: 3px; color: #637084; font-size: 7px; }
.diag-console-grid { display: grid; grid-template-columns: 300px minmax(620px, 1fr) 320px; gap: 13px; padding-top: 13px; align-items: start; }.diag-left-rail, .diag-center-stage, .diag-right-stack { display: flex; min-width: 0; flex-direction: column; gap: 13px; }.diag-panel { border: 1px solid rgba(30,227,255,.5); border-radius: 0; background: rgba(3, 10, 21, .76); box-shadow: none; }.diag-panel-heading { min-height: 28px; padding: 7px 10px; border-bottom: 1px solid rgba(30,227,255,.23); background: rgba(2,8,18,.55); color: #8295aa; font-size: 8px; }.diag-panel-heading h2 { color: #acf6ff; font-size: 9px; }.diag-alert-count { padding: 2px 5px; border: 1px solid rgba(126,144,167,.45); color: #7f90a4; }.diag-violation-panel { min-height: 535px; }.diag-hist-panel { min-height: 190px; }.diag-table { font-size: 9px; }.diag-table th { padding: 7px 9px; color: #75869b; font-size: 7px; }.diag-table td { padding: 7px 9px; color: #c5d6e2; border-top-color: rgba(30,227,255,.1); }.diag-empty { color: #607087 !important; font-size: 9px; letter-spacing: .12em; }.diag-histogram { position: relative; height: 130px; overflow: hidden; padding: 0 15px; background: repeating-linear-gradient(0deg, transparent 0 23px, rgba(30,227,255,.06) 24px); }.diag-hist-readout { position: absolute; z-index: 1; top: 8px; left: 48%; color: #b3f9ff; font: 8px var(--mono); letter-spacing: .08em; }.diag-hist-bars { position: absolute; right: 15px; bottom: 0; left: 15px; height: 104px; display: flex; align-items: end; border-bottom: 1px solid rgba(30,227,255,.35); }.diag-hist-bars i { width: 9.09%; min-height: 5px; background: #32d8ef; box-shadow: 0 0 7px rgba(30,227,255,.45); }.diag-hist-bars i:nth-child(-n+2) { background: #ff5965; }.diag-hist-bars i:nth-child(3), .diag-hist-bars i:nth-child(4) { background: #ffb020; }.diag-hist-axis { display: flex; justify-content: space-between; padding: 8px 11px; color: #75869b; font: 7px var(--mono); }
.diag-lenses { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }.diag-lens { width: 100%; max-width: 420px; margin: 0 auto; aspect-ratio: 1; }.diag-lens::before { display: none; }.diag-lens-frame { position: relative; width: 100%; height: 100%; overflow: hidden; border: 2px solid rgba(30,227,255,.45); border-radius: 50%; background: rgba(3,11,22,.87); box-shadow: inset 0 0 55px rgba(0,124,167,.18), 0 0 22px rgba(0,150,205,.12); }.diag-lens-grid { position: absolute; inset: 0; opacity: .26; background-image: linear-gradient(to right, #1ee3ff 1px, transparent 1px), linear-gradient(to bottom, #1ee3ff 1px, transparent 1px); background-size: 20px 20px; }.diag-lens-frame::before, .diag-lens-frame::after { content: ''; position: absolute; inset: 9px; border: 1px solid rgba(30,227,255,.18); border-radius: 50%; pointer-events: none; }.diag-lens-frame::after { inset: 17px; border-color: rgba(30,227,255,.1); }.diag-lens svg { position: absolute; inset: 7%; width: 86%; height: 86%; overflow: visible; }.diag-lens-side { position: absolute; z-index: 2; top: 13px; left: 50%; transform: translateX(-50%); color: rgba(30,227,255,.4); font: 8px var(--mono); letter-spacing: .3em; }.diag-map-trace { fill: none; stroke: #c5fbff; stroke-width: 2; filter: drop-shadow(0 0 4px rgba(30,227,255,.75)); }.diag-map-trace circle { fill: var(--diag-cyan); stroke: #e6faff; stroke-width: 1; }.diag-source-mark { fill: rgba(30,227,255,.08); stroke: var(--diag-cyan); stroke-width: 1.5; }.diag-map-callouts { fill: #b9f5ff; font: 7px var(--mono); letter-spacing: .08em; }.diag-profile-axis { fill: none; stroke: rgba(30,227,255,.18); stroke-width: 1; }.diag-profile-axis text { fill: #778ba2; stroke: none; font: 7px var(--mono); }.diag-profile-limit { fill: none; stroke: var(--diag-amber); stroke-width: 1.4; stroke-dasharray: 5 5; opacity: .8; }.diag-profile-line { fill: none; stroke-width: 2.2; filter: drop-shadow(0 0 3px currentColor); }.diag-profile-line.phase-a { stroke: var(--diag-green); }.diag-profile-line.phase-b { stroke: #e8fbff; }.diag-profile-line.phase-c { stroke: var(--diag-cyan); }.diag-loading-line { fill: none; stroke: #ff9a1f; stroke-width: 1.5; stroke-dasharray: 5 4; }.diag-limit-label { fill: var(--diag-amber); font: 7px var(--mono); }.diag-lens-legend, .diag-profile-legend { position: absolute; z-index: 2; top: 21%; right: 10%; display: grid; gap: 4px; color: #9aa9ba; font: 7px var(--mono); }.diag-profile-legend { top: 11%; left: 31%; right: auto; display: flex; gap: 7px; }.diag-lens-legend i, .diag-profile-legend i { display: inline-block; width: 6px; height: 6px; margin-right: 3px; background: var(--diag-cyan); }.diag-lens-legend span:nth-child(2) i, .diag-profile-legend span:nth-child(1) i { background: var(--diag-green); }.diag-lens-legend span:nth-child(3) i { background: var(--diag-amber); }.diag-lens-legend span:nth-child(4) i { background: var(--diag-red); }.diag-profile-legend span:nth-child(2) i { background: #e8fbff; }.diag-profile-legend span:nth-child(3) i { background: #ff9a1f; }.diag-lens-caption { position: absolute; z-index: 2; right: 5%; bottom: 7%; left: 5%; text-align: center; text-transform: uppercase; }.diag-lens-caption b { display: block; color: #a9f6ff; font: 9px var(--mono); letter-spacing: .13em; }.diag-lens-caption small { display: block; margin-top: 5px; color: #647a92; font: 7px var(--mono); letter-spacing: .11em; }.diag-corner { position: absolute; z-index: 2; width: 22px; height: 22px; border-color: var(--diag-cyan); opacity: .58; }.diag-corner.tl { top: 16px; left: 16px; border-top: 1px solid; border-left: 1px solid; }.diag-corner.tr { top: 16px; right: 16px; border-top: 1px solid; border-right: 1px solid; }.diag-corner.bl { bottom: 16px; left: 16px; border-bottom: 1px solid; border-left: 1px solid; }.diag-corner.br { right: 16px; bottom: 16px; border-right: 1px solid; border-bottom: 1px solid; }
.diag-telemetry-grid { grid-template-columns: .95fr 1.1fr 1fr; gap: 9px; }.diag-telemetry { min-height: 177px; }.diag-telemetry > strong { padding: 11px 10px 6px; font-size: 13px; }.diag-telemetry dl div, .diag-network-panel dl div { padding: 6px 10px; }.diag-telemetry dt, .diag-network-panel dt { font-size: 7px; }.diag-telemetry dd, .diag-network-panel dd { font-size: 9px; }.diag-mismatch-readout { font-size: 27px !important; }.diag-readout-label { margin: 0 10px 5px; color: #687a90; font: 7px var(--mono); letter-spacing: .1em; text-transform: uppercase; }.diag-delta-bars { height: 97px; padding: 12px 10px 9px; }.diag-delta-bars i { background: rgba(30,227,255,.16); }.diag-delta-strip p { color: #66768b; }
.diag-lower-workspace { display: grid; grid-template-columns: 300px minmax(620px, 1fr) 320px; gap: 13px; align-items: start; margin-top: 13px; }.diag-findings-grid { display: grid; grid-template-columns: minmax(230px, .95fr) minmax(0, 1.7fr); gap: 9px; align-items: start; min-width: 0; }.diag-findings-grid .diag-panel { min-width: 0; min-height: 0; }.diag-recommendations-panel, .diag-issues-panel, .diag-summary-panel { border: 1px solid rgba(30,227,255,.5); background: rgba(3,10,21,.76); }.diag-workspace-title { min-height: 26px; padding: 6px 0; border-bottom: 0; background: transparent; }.diag-workspace-title h2 { font-size: 15px; }.diag-workspace-title span { font-size: 7px; }.diag-results-wrap { max-height: 168px; min-height: 104px; overflow: auto; border: 1px solid rgba(30,227,255,.25); scrollbar-color: rgba(30,227,255,.65) rgba(3,10,21,.85); }.diag-recommendation-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 9px 0 0; }.diag-button { min-height: 31px; font-size: 8px; }.diag-run-button { grid-column: 1 / -1; border-color: var(--diag-cyan); background: rgba(30,227,255,.08); }.diag-runner-hint { grid-column: 1 / -1; min-height: 17px; color: #74869a; font: 8px/1.35 var(--mono); }.diag-button-fix { border-color: rgba(65,255,160,.58); }.diag-priority-critical, .diag-priority-high { color: var(--diag-red) !important; }.diag-priority-medium { color: var(--diag-amber) !important; }.diag-priority-low, .diag-priority-info { color: var(--diag-green) !important; }
.diag-network-name { padding: 11px 10px; font-size: 14px; }.diag-analysis-panel { position: relative; }.diag-analysis-fields { padding: 10px; gap: 8px; }.diag-analysis-fields input, .diag-phase-mode { height: 27px; }.diag-control-enabled { display: flex; justify-content: space-between; padding: 0 10px 8px; color: #708197; font: 7px var(--mono); letter-spacing: .09em; text-transform: uppercase; }.diag-control-enabled b { color: #a8fce3; font-weight: 400; }.diag-analysis-run { display: block; width: calc(100% - 20px); min-height: 31px; margin: 0 10px 10px; border: 1px solid var(--diag-cyan); background: rgba(30,227,255,.07); color: #c4fbff; font: 9px var(--mono); letter-spacing: .18em; text-transform: uppercase; }.diag-runner-status { position: absolute; right: 10px; bottom: 0; transform: translateY(150%); font-size: 7px; }.diag-kpi-grid { padding: 10px; }.diag-summary-panel { margin-top: 0; min-height: 134px; }.diag-summary-panel .diag-workspace-title { padding: 6px 0; }.diag-summary-panel th, .diag-summary-panel td { padding: 6px 10px; }.diag-summary-panel td:last-child { text-align: right; color: var(--diag-cyan); }.diag-transformer-dial i { inset: 3px; border: 0; background: conic-gradient(var(--diag-cyan) 0 55%, rgba(30,227,255,.16) 55% 100%); mask: radial-gradient(circle, transparent 57%, #000 59%); -webkit-mask: radial-gradient(circle, transparent 57%, #000 59%); }.diag-transformer-dial-warn i { background: conic-gradient(var(--diag-amber) 0 82%, rgba(30,227,255,.16) 82% 100%); }.diag-transformer-dial-warn b { color: var(--diag-amber); }.diag-legacy-hooks { display: none; }
.diag-action-dock { display: grid; grid-template-columns: 300px minmax(620px, 1fr) 320px; margin-top: 26px; }.diag-action-dock nav { grid-column: 2; justify-self: center; display: flex; align-items: start; justify-content: center; gap: 10px; position: relative; padding-bottom: 25px; }.diag-dock-action { width: 76px; height: 62px; display: grid; place-content: center; gap: 5px; border: 1px solid rgba(30,227,255,.65); border-radius: 0; background: rgba(3,10,21,.65); color: #a9f6ff; cursor: pointer; font: 8px var(--mono); letter-spacing: .08em; text-transform: uppercase; }.diag-dock-action b { color: #b9f8ff; font: 21px/1 var(--mono); font-weight: 400; }.diag-dock-action:hover, .diag-dock-action:focus-visible { outline: 0; background: rgba(30,227,255,.12); box-shadow: 0 0 12px rgba(30,227,255,.22); }.diag-action-dock small { position: absolute; right: 0; bottom: 0; left: 0; color: #687b91; font: 7px var(--mono); letter-spacing: .09em; text-align: center; white-space: nowrap; }
@media (max-width: 1320px) { .diag-console-grid, .diag-lower-workspace, .diag-action-dock { grid-template-columns: 260px minmax(540px, 1fr) 280px; }.diag-lenses { gap: 12px; }.diag-status-readout { gap: 12px; } }
@media (max-width: 1060px) { .diag-console-grid { grid-template-columns: minmax(0, 1fr) 280px; }.diag-lower-workspace, .diag-action-dock { grid-template-columns: minmax(0, 1fr) 280px; }.diag-left-rail { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) 260px; }.diag-lower-spacer { display: none; }.diag-findings-grid { grid-column: 1; grid-template-columns: 1fr; }.diag-summary-panel { grid-column: 2; }.diag-violation-panel { min-height: 180px; }.diag-hist-panel { min-height: 180px; }.diag-action-dock nav { grid-column: 1 / -1; } }
@media (max-width: 760px) { .diag-view { padding: 10px 10px 40px; }.diag-status-rail { align-items: flex-start; flex-direction: column; }.diag-status-readout { flex-wrap: wrap; }.diag-console-grid, .diag-lower-workspace, .diag-action-dock, .diag-lenses, .diag-telemetry-grid { grid-template-columns: 1fr; }.diag-left-rail { display: flex; grid-column: auto; }.diag-right-stack { display: grid; grid-template-columns: 1fr 1fr; }.diag-lower-spacer { display: none; }.diag-findings-grid, .diag-summary-panel, .diag-action-dock nav { grid-column: auto; }.diag-summary-panel { margin-top: 13px; }.diag-lens { max-width: 420px; }.diag-findings-grid { grid-template-columns: minmax(540px, 1fr); overflow-x: auto; }.diag-action-dock nav { gap: 6px; }.diag-dock-action { width: 64px; height: 58px; } }
@media (max-width: 490px) { .diag-brand h1 { font-size: 15px; }.diag-status-readout dl, .diag-status-lights { gap: 8px; }.diag-right-stack { display: flex; }.diag-findings-grid { grid-template-columns: minmax(420px, 1fr); }.diag-recommendation-actions { grid-template-columns: 1fr; }.diag-button-fix { grid-column: 1 / -1; }.diag-action-dock nav { flex-wrap: wrap; }.diag-action-dock small { display: none; } }

/* Source-faithful solved console refinements. The upper console remains a
   fixed, compact visual readout; only the lower diagnostics tables are live. */
.diag-view { padding: 10px 16px 28px; }
.diag-console-grid { grid-template-columns: 300px 590px 320px; gap: 12px; max-width: 1240px; }
.diag-lenses { gap: 18px; }
.diag-lens { max-width: 278px; }
.diag-telemetry-grid { gap: 9px; }
.diag-telemetry { min-height: 184px; }
.diag-violation-panel { min-height: 535px; }
.diag-hist-panel { min-height: 190px; }
.diag-alert-active { color: #ff7380; border-color: rgba(255,77,94,.75); background: rgba(255,77,94,.09); }
.diag-v-critical { color: var(--diag-red) !important; }
.diag-v-low { color: var(--diag-amber) !important; }
.diag-v-selected td { background: rgba(30,227,255,.11); }
.diag-violation-panel .diag-table td { white-space: nowrap; }
.diag-delta-bars i:nth-child(1) { height: 82%; background: #32d8ef; }
.diag-delta-bars i:nth-child(2) { height: 69%; background: #32d8ef; }
.diag-delta-bars i:nth-child(3) { height: 58%; background: #32d8ef; }
.diag-delta-bars i:nth-child(4) { height: 48%; background: #32d8ef; }
.diag-delta-bars i:nth-child(5) { height: 37%; background: #32d8ef; }
.diag-delta-bars i:nth-child(6) { height: 25%; background: #32d8ef; }
.diag-delta-bars i:nth-child(7) { height: 10%; background: var(--diag-green); }
.diag-converged { color: var(--diag-green) !important; border: 1px solid rgba(65,255,160,.62); padding: 1px 4px; }
.diag-dial-ok i { border-color: rgba(65,255,160,.18); border-top-color: var(--diag-green); box-shadow: 0 0 10px rgba(65,255,160,.42); }
.diag-dial-ok span { color: var(--diag-green); }

/* The diagnostics band follows the solved console in the same workspace.
   It intentionally spans a broader center area than the compact top lenses. */
.diag-lower-workspace { grid-template-columns: 220px minmax(0, 1fr) 250px; gap: 12px; margin-top: 12px; }
.diag-findings-grid { grid-template-columns: minmax(340px, .9fr) minmax(0, 1.8fr); gap: 10px; }
.diag-results-wrap { max-height: 154px; min-height: 114px; }
.diag-results-wrap .diag-table { table-layout: auto; min-width: 100%; }
.diag-results-wrap .diag-table th, .diag-results-wrap .diag-table td { white-space: nowrap; overflow: visible; text-overflow: clip; }
.diag-results-wrap .diag-table th:nth-child(4), .diag-results-wrap .diag-table td:nth-child(4) { min-width: 230px; }
.diag-issues-panel .diag-results-wrap .diag-table th:last-child, .diag-issues-panel .diag-results-wrap .diag-table td:last-child { min-width: 190px; }
.diag-recommendations-panel .diag-results-wrap .diag-table { min-width: 640px; }
.diag-issues-panel .diag-results-wrap .diag-table { min-width: 1080px; }
.diag-results-wrap { max-height: 180px; min-height: 152px; }
.diag-results-wrap .diag-table th, .diag-results-wrap .diag-table td { padding: 4px 7px; font-size: 7px; }
.diag-results-wrap::-webkit-scrollbar { width: 7px; height: 7px; }
.diag-results-wrap::-webkit-scrollbar-thumb { background: rgba(30, 227, 255, .58); }
.diag-summary-panel { width: 250px; min-height: 132px; }
.diag-action-dock { grid-template-columns: 300px 590px 320px; max-width: 1240px; margin-top: 18px; }

@media (min-width: 1500px) {
  .diag-console-grid, .diag-action-dock { max-width: 1240px; }
  .diag-lower-workspace { grid-template-columns: 240px minmax(900px, 1fr) 270px; }
}
@media (max-width: 1320px) {
  .diag-console-grid, .diag-action-dock { grid-template-columns: 260px minmax(520px, 1fr) 280px; }
  .diag-lower-workspace { grid-template-columns: 180px minmax(0, 1fr) 220px; }
  .diag-findings-grid { grid-template-columns: minmax(300px, .9fr) minmax(0, 1.8fr); }
  .diag-summary-panel { width: 220px; }
}

/* The Hub retains its own top navigation, so the embedded source console is
   proportionally shorter than the standalone frame. This keeps the lower
   live-diagnostics band and the source dock in a single desktop workspace. */
@media (min-width: 1061px) {
  .diag-violation-panel { min-height: 455px; }
  .diag-hist-panel { min-height: 165px; }
  .diag-telemetry { min-height: 160px; }
  .diag-results-wrap { max-height: 116px; min-height: 92px; }
  .diag-recommendation-actions { padding-top: 6px; }
  .diag-runner-hint { min-height: 12px; }
  .diag-action-dock { margin-top: 12px; }
}

/* The Hub embeds this console beneath its own command strip. On short desktop
   canvases retain the full source hierarchy in one frame by compacting scale,
   never by hiding diagnostics or moving it to another route. */
@media (min-width: 1061px) and (max-height: 620px) {
  .diag-view { min-height: 0; padding: 6px 10px 10px; overflow: hidden; }
  #diagnostics-view { overflow: hidden; }
  .diag-status-rail { min-height: 31px; padding: 0 2px 6px; }
  .diag-logo { width: 28px; height: 28px; }
  .diag-brand { gap: 8px; }
  .diag-brand > div { padding-left: 8px; }
  .diag-brand h1 { font-size: 12px; }
  .diag-brand p { margin-top: 3px; font-size: 7px; }
  .diag-status-readout { gap: 10px; font-size: 6px; }
  .diag-status-readout dl { gap: 8px; }
  .diag-status-readout dt { font-size: 5px; }
  .diag-status-readout dd { margin-top: 1px; font-size: 7px; }
  .diag-status-lights { gap: 6px; }
  .diag-status-lights i { width: 5px; height: 5px; margin-right: 2px; }
  .diag-status-readout time { font-size: 8px; }
  .diag-status-readout time small { margin-top: 1px; font-size: 5px; }
  .diag-console-grid { gap: 7px; padding-top: 7px; grid-template-columns: 190px minmax(430px, 1fr) 210px; }
  .diag-left-rail, .diag-center-stage, .diag-right-stack { gap: 7px; }
  .diag-panel-heading { min-height: 17px; padding: 4px 6px; font-size: 5px; }
  .diag-panel-heading h2 { font-size: 6px; }
  .diag-violation-panel { min-height: 235px; }
  .diag-hist-panel { min-height: 104px; }
  .diag-table { font-size: 6px; }
  .diag-table th, .diag-table td { padding: 3px 5px; font-size: 5px; }
  .diag-histogram { height: 65px; }
  .diag-hist-bars { height: 52px; }
  .diag-hist-readout, .diag-hist-axis { font-size: 5px; }
  .diag-lenses { gap: 8px; }
  .diag-lens { max-width: 178px; }
  .diag-lens-side { top: 7px; font-size: 5px; }
  .diag-lens-caption b { font-size: 6px; }
  .diag-lens-caption small { margin-top: 2px; font-size: 5px; }
  .diag-lens-legend, .diag-profile-legend { font-size: 5px; }
  .diag-telemetry-grid { gap: 5px; }
  .diag-telemetry { min-height: 83px; }
  .diag-telemetry > strong { padding: 5px 6px 3px; font-size: 8px; }
  .diag-telemetry dl div, .diag-network-panel dl div { padding: 3px 6px; }
  .diag-telemetry dt, .diag-network-panel dt { font-size: 5px; }
  .diag-telemetry dd, .diag-network-panel dd { font-size: 6px; }
  .diag-mismatch-readout { font-size: 14px !important; }
  .diag-delta-bars { height: 43px; padding: 5px 6px; }
  .diag-delta-strip p { margin: 3px 6px; font-size: 5px; }
  .diag-network-name { padding: 6px; font-size: 8px; }
  .diag-analysis-fields { gap: 4px; padding: 6px; }
  .diag-analysis-fields label, .diag-control-enabled { font-size: 5px; }
  .diag-analysis-fields input, .diag-phase-mode { height: 18px; padding: 4px; font-size: 6px; }
  .diag-analysis-run { min-height: 20px; margin: 0 6px 6px; font-size: 6px; }
  .diag-kpi-grid { gap: 4px; padding: 6px; grid-template-columns: 32px 32px 1fr; }
  .diag-kpi-grid dl div { min-height: 23px; padding: 3px; }
  .diag-kpi-grid dt { font-size: 5px; }
  .diag-kpi-grid dd { margin-top: 2px; font-size: 6px; }
  .diag-transformer-panel > div { padding: 5px 14px 3px; }
  .diag-transformer-dial { max-width: 38px; }
  .diag-transformer-dial b { font-size: 8px; }
  .diag-transformer-dial small, .diag-transformer-panel p { font-size: 5px; }
  .diag-transformer-panel p { margin: 4px 6px; padding-top: 3px; }
  .diag-lower-workspace { grid-template-columns: 140px minmax(0, 1fr) 165px; gap: 7px; margin-top: 7px; }
  .diag-findings-grid { grid-template-columns: minmax(250px, .85fr) minmax(0, 1.9fr); gap: 6px; }
  .diag-workspace-title { min-height: 16px; padding: 3px 0; }
  .diag-workspace-title h2 { font-size: 9px; }
  .diag-workspace-title span { font-size: 5px; }
  .diag-results-wrap { min-height: 96px; max-height: 96px; }
  .diag-results-wrap .diag-table { line-height: 1; }
  .diag-results-wrap .diag-table th, .diag-results-wrap .diag-table td { height: 7px; padding: 1px 4px; font-size: 5px; }
  #diag-recommendations tr { height: 8px; }
  #diag-recommendations input[type="checkbox"] { appearance: none; width: 6px; height: 6px; margin: 0; border: 1px solid var(--diag-cyan); background: transparent; vertical-align: middle; }
  #diag-recommendations input[type="checkbox"]:checked { background: var(--diag-cyan); box-shadow: inset 0 0 0 1px #03101b; }
  .diag-recommendation-actions { gap: 3px; padding-top: 3px; }
  .diag-button { min-height: 17px; font-size: 5px; }
  .diag-runner-hint { min-height: 7px; font-size: 5px; }
  .diag-summary-panel { width: 165px; min-height: 70px; }
  .diag-summary-panel th, .diag-summary-panel td { padding: 3px 5px; }
  .diag-action-dock { grid-template-columns: 190px minmax(430px, 1fr) 210px; margin-top: 6px; }
  .diag-action-dock nav { gap: 4px; padding-bottom: 11px; }
  .diag-dock-action { width: 42px; height: 35px; gap: 2px; font-size: 5px; }
  .diag-dock-action b { font-size: 11px; }
  .diag-action-dock small { font-size: 5px; }
}

/* Diagnostics is a Simulation workspace: use the same rail geometry as the
   main HUD so headers, center content, and lower bands share one grid. */
@media (min-width: 1601px) {
  .diag-console-grid,
  .diag-lower-workspace,
  .diag-action-dock {
    grid-template-columns: 400px minmax(0, 1fr) 400px;
    max-width: none;
  }
}
@media (min-width: 1061px) and (max-width: 1600px) {
  .diag-console-grid,
  .diag-lower-workspace,
  .diag-action-dock {
    grid-template-columns: 360px minmax(0, 1fr) 360px;
    max-width: none;
  }
  .diag-lower-workspace { grid-template-columns: 360px minmax(0, 1fr) 360px; }
  .diag-summary-panel { width: auto; }
}
@media (min-width: 1061px) and (max-height: 620px) {
  .diag-console-grid,
  .diag-lower-workspace,
  .diag-action-dock { grid-template-columns: 360px minmax(0, 1fr) 360px; }
  .diag-lower-workspace { grid-template-columns: 360px minmax(0, 1fr) 360px; }
}

/* Native diagnostics south dock. The tables stay out of the simulation
   canvas until the operator explicitly expands this compact dock. */
#diag-south-dock {
  position: sticky;
  bottom: 0;
  z-index: 20;
  margin-top: 10px;
  border: 1px solid var(--cyan-line-2);
  background: rgba(2, 9, 18, .96);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, .35), inset 0 1px rgba(30, 227, 255, .12);
}
#diag-south-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 30px;
  padding: 6px 11px;
  color: var(--cyan);
  font: 9px var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
}
#diag-south-toggle::after { content: 'EXPAND'; color: var(--text-dim); font-size: 8px; }
#diag-south-dock[data-expanded="true"] #diag-south-toggle::after { content: 'COLLAPSE'; }
#diag-south-tabs {
  display: flex;
  gap: 0;
  border-top: 1px solid rgba(30, 227, 255, .2);
  border-bottom: 1px solid rgba(30, 227, 255, .2);
}
#diag-south-tabs button {
  min-width: 130px;
  padding: 7px 12px;
  border-right: 1px solid rgba(30, 227, 255, .16);
  color: var(--text-dim);
  font: 8px var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
#diag-south-tabs button[aria-selected="true"] { color: var(--cyan); background: rgba(30, 227, 255, .1); box-shadow: inset 0 -2px var(--cyan); }
#diag-south-dock[data-expanded="false"] #diag-south-tabs,
#diag-south-dock[data-expanded="false"] .diag-south-content { display: none; }
.south-dock:not([open]) .south-dock-tabs,
.south-dock:not([open]) .south-dock-panes { display: none; }
.south-dock[open] .south-dock-tabs,
.south-dock[open] .south-dock-panes { display: block; }
.south-dock[open] .south-dock-tabs { display: flex; }
.south-dock-handle { list-style: none; cursor: pointer; }
.south-dock-handle::-webkit-details-marker { display: none; }
.diag-solver-panel { margin-top: 0; }
.diag-south-content { padding: 8px 10px 10px; }
.diag-south-pane[hidden] { display: none; }
.diag-south-pane .diag-results-wrap { min-height: 180px; max-height: min(36vh, 310px); }
.diag-south-pane .diag-results-wrap .diag-table { min-width: max-content; width: 100%; }
.diag-south-pane .diag-summary-panel { width: min(520px, 100%); min-height: 0; }
.diag-action-dock nav { grid-column: 1 / -1; }
.diag-action-dock { grid-template-columns: 1fr; }