:root {
  --bg:        #04070a;
  --bg-2:      #060a0e;
  --panel:     #0a1014;
  --panel-2:   #0c1419;
  --border:    rgba(120, 175, 158, 0.14);
  --border-2:  rgba(120, 175, 158, 0.28);
  --text:      #cdded7;
  --muted:     #738a82;
  --dim:       #3f4f4a;

  --green:     #3ef2a4;
  --green-dim: #1c6b4c;
  --cyan:      #46d6ff;
  --amber:     #ffc24d;
  --red:       #ff5b6e;

  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --glow-green: 0 0 0.5px #3ef2a4, 0 0 14px rgba(62,242,164,0.55);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--mono);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

body {
  display: flex;
  flex-direction: column;
  position: relative;
}

/* ---------- background layers ---------- */
#particles {
  position: fixed; inset: 0; z-index: 0;
  display: block;
}
.bg-grid {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(62,242,164,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(62,242,164,0.035) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 38%, #000 30%, transparent 100%);
}
.bg-vignette {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 120% 100% at 50% -10%, rgba(62,242,164,0.07), transparent 55%),
              radial-gradient(ellipse 80% 70% at 50% 120%, rgba(70,214,255,0.05), transparent 60%);
}
.scanlines {
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0.16) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply; opacity: 0.5;
}

.app { position: relative; z-index: 2; display: flex; flex-direction: column; height: 100%; }

/* ---------- header ---------- */
header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  padding: 11px clamp(18px, 3vw, 40px);
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(10,16,20,0.7), transparent);
  flex: none;
}
.brand { display: flex; align-items: center; gap: 14px; }
.live-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--green); box-shadow: var(--glow-green);
  animation: blink 1.6s steps(1) infinite;
}
@keyframes blink { 0%,60% { opacity: 1; } 61%,100% { opacity: 0.25; } }
.brand h1 {
  font-size: clamp(13px, 1.3vw, 16px); font-weight: 700; letter-spacing: 0.04em;
}
.brand .sub { color: var(--muted); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; }
.brand .accent { color: var(--green); }

.metrics { display: flex; gap: clamp(10px, 1.8vw, 26px); }
.metric { text-align: right; min-width: 64px; }
.metric .val {
  font-size: clamp(15px, 1.7vw, 21px); font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--text);
}
.metric.is-confirmed .val { color: var(--red); }
.metric .lab { font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); margin-top: 5px; }

/* ---------- main grid ---------- */
main {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-rows: minmax(160px, 38%) minmax(0, 1fr);
  padding: clamp(12px, 1.8vw, 24px) clamp(18px, 3vw, 40px) clamp(14px, 2vw, 26px);
  gap: clamp(12px, 1.8vw, 22px);
}

/* ---------- pipeline ---------- */
.pipeline-wrap { position: relative; display: flex; flex-direction: column; min-height: 0; }
.pipeline-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.section-tag { font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
.section-tag b { color: var(--green); font-weight: 700; }
.controls { display: flex; align-items: center; gap: 12px; }
.ctl-btn {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
  color: var(--muted); background: rgba(62,242,164,0.04);
  border: 1px solid var(--border); border-radius: 4px;
  padding: 5px 11px; cursor: pointer; transition: .18s;
}
.ctl-btn:hover { color: var(--green); border-color: var(--border-2); }
.ctl-btn.active { color: var(--green); border-color: var(--green-dim); box-shadow: inset 0 0 12px rgba(62,242,164,0.08); }
.speed { display: flex; align-items: center; gap: 7px; color: var(--dim); font-size: 10px; letter-spacing: 0.1em; }
.speed input { accent-color: var(--green); width: 78px; }

.track {
  position: relative; flex: 1; min-height: 0;
  display: flex; align-items: center;
}
.rail {
  position: absolute; left: 0; right: 0; top: 50%; height: 2px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, transparent, rgba(120,175,158,0.18) 4%, rgba(120,175,158,0.18) 96%, transparent);
}
.rail-fill {
  position: absolute; left: 0; top: 50%; height: 2px; width: 0;
  transform: translateY(-50%);
  background: linear-gradient(90deg, rgba(62,242,164,0.1), var(--green));
  box-shadow: 0 0 10px rgba(62,242,164,0.6);
  transition: width .6s cubic-bezier(.5,0,.2,1);
}
.packet {
  position: absolute; top: 50%; left: 0; width: 12px; height: 12px;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: var(--green); box-shadow: 0 0 4px #fff, 0 0 16px var(--green), 0 0 30px var(--green);
  transition: left .6s cubic-bezier(.5,0,.2,1); z-index: 4;
}
.packet::after {
  content: ""; position: absolute; inset: -7px; border-radius: 50%;
  border: 1px solid rgba(62,242,164,0.6); animation: pulsering 1.4s ease-out infinite;
}
@keyframes pulsering { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(2.4); opacity: 0; } }

.nodes { position: relative; z-index: 3; display: flex; justify-content: space-between; width: 100%; }
.node {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  cursor: pointer; background: none; border: none; font-family: var(--mono);
  flex: 1; padding: 0 2px;
}
.node-dot {
  position: relative;
  width: clamp(46px, 5vw, 62px); height: clamp(46px, 5vw, 62px);
  border-radius: 13px;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 30%, #0e171b, #070c0f);
  border: 1px solid var(--border);
  color: var(--dim); transition: .35s;
}
.node-dot svg { width: 46%; height: 46%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.node-num {
  position: absolute; top: -7px; right: -7px;
  font-size: 9px; color: var(--dim); background: var(--bg-2);
  border: 1px solid var(--border); border-radius: 4px; padding: 1px 4px;
  transition: .3s;
}
.node-name { font-size: clamp(10px, 1.05vw, 12.5px); letter-spacing: 0.06em; color: var(--muted); transition: .3s; }
.node-role { font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); transition: .3s; }

.node:hover .node-dot { border-color: var(--border-2); color: var(--muted); }

/* active / passed states (accent driven by data-accent) */
.node.passed .node-dot { color: var(--green-dim); border-color: var(--green-dim); }
.node.active .node-dot {
  color: var(--ac); border-color: var(--ac);
  box-shadow: 0 0 0 1px var(--ac), 0 0 22px -2px var(--ac), inset 0 0 16px -6px var(--ac);
  transform: translateY(-3px) scale(1.06);
  background: radial-gradient(circle at 50% 30%, #102019, #070c0f);
}
.node.active .node-num { color: var(--ac); border-color: var(--ac); }
.node.active .node-name { color: var(--text); }
.node.active .node-role { color: var(--ac); }

/* ---------- bottom: detail + console ---------- */
.bottom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr); gap: clamp(14px, 2vw, 24px); min-height: 0; }

.panel {
  position: relative; min-height: 0;
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--border); border-radius: 10px;
  display: flex; flex-direction: column; overflow: hidden;
}
.panel-bar {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 16px; border-bottom: 1px solid var(--border);
  font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
  flex: none;
}
.panel-bar .dotrow { display: flex; gap: 6px; }
.panel-bar .dotrow i { width: 8px; height: 8px; border-radius: 50%; background: rgba(120,175,158,0.22); }
.panel-bar .spacer { flex: 1; }
.panel-bar .corner { color: var(--ac); font-size: 10px; }

/* detail panel */
.detail { padding: clamp(14px, 1.6vw, 22px); display: flex; flex-direction: column; gap: clamp(8px, 1vw, 13px); overflow-y: auto; overflow-x: hidden; }
.detail::-webkit-scrollbar { width: 6px; }
.detail::-webkit-scrollbar-thumb { background: rgba(120,175,158,0.2); border-radius: 3px; }
.detail .num-tag {
  font-size: clamp(28px, 3.6vw, 50px); font-weight: 700; line-height: .8;
  color: var(--ac); opacity: 0.85; letter-spacing: -0.02em;
}
.detail h2 { font-size: clamp(17px, 1.9vw, 23px); font-weight: 700; letter-spacing: 0.01em; line-height: 1.1; }
.detail .role-line { font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ac); margin-top: 6px; }
.detail .tagline {
  color: var(--muted); font-size: clamp(11.5px, 1.2vw, 13.5px); line-height: 1.5; max-width: 46ch;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.mechanics { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }
.mech { display: grid; grid-template-columns: auto 1fr; gap: 11px; align-items: start; }
.mech .key {
  color: var(--ac); font-size: 11px; white-space: nowrap;
  border-left: 2px solid var(--ac); padding-left: 9px; padding-top: 1px;
}
.mech .desc { color: var(--muted); font-size: 11px; line-height: 1.45; }

/* tighten detail when a local schematic is present */
.detail.has-diagram .num-tag { font-size: clamp(24px, 3vw, 38px); }
.detail.has-diagram .mechanics { display: none; }   /* the diagram replaces the text list */
.detail.has-diagram .tagline {
  font-size: clamp(10.5px, 1vw, 12px); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---------- local schematics ---------- */
.diagram:empty { display: none; }
.dg {
  border: 1px solid var(--border); border-radius: 8px;
  background: rgba(3,7,9,0.45); padding: 11px 13px 13px;
}
.dg-label { font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dim); margin-bottom: 8px; }
.dg-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.dg-head .dg-label { margin-bottom: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.dg-toggle { display: flex; gap: 4px; flex: none; }
.dg-toggle button {
  font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); background: rgba(62,242,164,0.04); white-space: nowrap;
  border: 1px solid var(--border); border-radius: 4px; padding: 3px 8px; cursor: pointer; transition: .15s;
}
.dg-toggle button:hover { color: var(--text); border-color: var(--border-2); }
.dg-toggle button.on { color: var(--ac); border-color: var(--ac); box-shadow: inset 0 0 10px -4px var(--ac); }

/* funnel */
.dg-funnel { display: flex; align-items: center; gap: 7px; position: relative; overflow: hidden; }
.scanbeam {
  position: absolute; top: -4px; bottom: -4px; left: -16%; width: 44px; pointer-events: none; z-index: 0;
  background: linear-gradient(90deg, transparent, rgba(62,242,164,0.22), transparent);
  filter: blur(1px); animation: beamsweep 3.6s linear infinite;
}
@keyframes beamsweep { 0% { left: -16%; } 100% { left: 108%; } }
.fn-stage {
  flex: 1; text-align: center; padding: 8px 4px; border-radius: 6px; position: relative; z-index: 1;
  border: 1px solid var(--border); background: rgba(62,242,164,0.03);
}
.fn-stage:not(.hot) { animation: fnlite 3.6s ease-in-out infinite; animation-delay: calc(var(--i,0) * 0.42s); }
@keyframes fnlite {
  0%, 64%, 100% { border-color: var(--border); box-shadow: none; }
  16% { border-color: var(--border-2); box-shadow: 0 0 14px -6px var(--green); }
}
.fn-stage b { display: block; font-size: clamp(12px, 1.3vw, 15px); color: var(--text); font-variant-numeric: tabular-nums; }
.fn-stage span { font-size: 8px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.fn-stage.hot { border-color: var(--ac); background: rgba(62,242,164,0.06); animation: lockpulse 3.6s ease-in-out infinite; }
@keyframes lockpulse { 0%,100% { box-shadow: 0 0 16px -6px var(--ac); } 50% { box-shadow: 0 0 26px -2px var(--ac); } }
.fn-stage.hot b, .fn-stage.hot span { color: var(--ac); }
.fn-arrow { color: var(--dim); font-size: 11px; position: relative; z-index: 1; }

/* decompile · bytecode -> pseudo-solidity */
.dec { display: grid; grid-template-columns: 1fr auto 1.3fr; gap: 8px; align-items: stretch; margin-top: 5px; }
.dec-col { border: 1px solid var(--border); border-radius: 6px; background: rgba(3,7,9,0.5); overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.dec-h { font-size: 7.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); padding: 4px 8px; border-bottom: 1px solid var(--border); }
.dec-stream { position: relative; height: 58px; overflow: hidden; }
.dec-stream::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(6,11,14,0.9), transparent 22% 78%, rgba(6,11,14,0.9)); }
.dec-scroll { position: absolute; left: 0; right: 0; top: 0; padding: 5px 8px; display: flex; flex-direction: column; gap: 2px; animation: decroll 9s linear infinite; }
.dec-scroll code { font-size: 9px; white-space: nowrap; font-family: var(--mono); }
.dec-scroll .hx { color: var(--dim); }
.dec-scroll .op { color: #5fa3c9; }
@keyframes decroll { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.dec-mid { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.dec-arrow { color: var(--ac); font-size: 15px; animation: decarrow 1.5s ease-in-out infinite; }
@keyframes decarrow { 0%,100% { transform: translateX(-2px); opacity: 0.5; } 50% { transform: translateX(3px); opacity: 1; } }
.dec-eng { font-size: 7px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.dec-code { padding: 5px 8px; display: flex; flex-direction: column; gap: 2px; justify-content: center; flex: 1; }
.dec-code .dl { font-size: 9px; white-space: nowrap; font-family: var(--mono); color: var(--text); opacity: 0.4; animation: dlreveal 5.2s ease-in-out infinite; animation-delay: calc(var(--i,0) * 0.5s); }
.dec-code .dl .kw { color: var(--cyan); }
.dec-code .dl .warn { color: var(--amber); }
@keyframes dlreveal {
  0%, 12% { opacity: 0.4; }
  26% { opacity: 1; text-shadow: 0 0 8px rgba(62,242,164,0.45); }
  55%, 100% { opacity: 0.82; text-shadow: none; }
}

/* swarm fan-out */
.dg-swarm { display: flex; align-items: center; gap: 12px; }
.sw-src {
  flex: none; text-align: center; padding: 6px 9px; border-radius: 7px;
  border: 1px solid var(--ac); color: var(--ac); font-size: 10px;
  box-shadow: 0 0 18px -7px var(--ac);
}
.sw-src small { display: block; font-size: 8px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }
.sw-edge {
  width: 26px; height: 2px; flex: none;
  background: linear-gradient(90deg, var(--ac), rgba(70,214,255,0.1));
  box-shadow: 0 0 8px var(--ac);
}
.sw-fan { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sw-row { display: flex; align-items: center; gap: 8px; }
.sw-tag { flex: none; width: 44px; font-size: 9px; letter-spacing: 0.04em; font-weight: 700; }
.sw-cells { display: flex; gap: 4px; flex-wrap: nowrap; flex: 1; min-width: 0; overflow: hidden; }
.sw-leads { flex: none; font-size: 10px; color: var(--muted); white-space: nowrap; }
.sw-leads b { color: var(--ac); }
.sw-row i {
  width: 11px; height: 11px; border-radius: 3px; display: inline-block; flex: none;
  background: rgba(70,214,255,0.12); border: 1px solid var(--border);
  animation: swwork 1.7s ease-in-out infinite;
}
@keyframes swwork {
  0%, 100% { background: rgba(70,214,255,0.10); box-shadow: none; }
  50% { background: rgba(70,214,255,0.42); box-shadow: 0 0 8px rgba(70,214,255,0.5); }
}
.sw-row i.hit {
  background: var(--ac); border-color: var(--ac);
  box-shadow: 0 0 10px var(--ac); animation: swhit 1s ease-in-out infinite;
}
@keyframes swhit { 0%,100% { box-shadow: 0 0 8px var(--ac); } 50% { box-shadow: 0 0 16px var(--ac); } }
.sw-legend {
  display: flex; align-items: center; gap: 16px; margin-top: 9px;
  font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
}
.sw-legend span { display: flex; align-items: center; gap: 6px; }
.sw-legend i { width: 10px; height: 10px; border-radius: 2px; }
.sw-legend .lg-scan { background: rgba(70,214,255,0.35); }
.sw-legend .lg-hit { background: var(--ac); box-shadow: 0 0 8px var(--ac); }
.sw-legend .sw-stat { margin-left: auto; color: var(--ac); }

.detail.swarm-active .tagline { display: none; }   /* the block diagram fills the panel */
.detail.swarm-active .dg-label { margin-bottom: 3px; }
.detail.swarm-active .role-line { display: none; }
.detail.swarm-active .num-tag { font-size: 18px; }
.detail.swarm-active { gap: 3px; }

/* swarm connected block diagram (monochrome) */
.swsvg { width: 100%; height: auto; display: block; }
.swsvg .blk { fill: rgba(6,11,14,0.85); stroke: var(--ac); stroke-width: 1.2; }
.swsvg text { text-anchor: middle; font-family: var(--mono); fill: var(--ac); }
.swsvg .nm { font-size: 9.5px; font-weight: 700; }
.swsvg .sub { font-size: 7px; letter-spacing: 0.04em; fill: var(--muted); }
.swsvg .ml { font-size: 9px; font-weight: 700; text-anchor: end; fill: var(--ac); }
.swsvg .ag { fill: rgba(70,214,255,0.16); stroke: rgba(70,214,255,0.5); stroke-width: 0.5; animation: agscan 1.8s ease-in-out infinite; }
.swsvg .ag.hit { fill: #46d6ff; stroke: #46d6ff; animation: aghit 1.1s ease-in-out infinite; }
@keyframes agscan { 0%,100% { fill: rgba(70,214,255,0.12); } 50% { fill: rgba(70,214,255,0.32); } }
@keyframes aghit { 0%,100% { opacity: 0.7; } 50% { opacity: 1; } }
.swsvg .fan  { fill: none; stroke: #46d6ff; stroke-width: 1.3; stroke-dasharray: 4 5; marker-end: url(#ahC); animation: swflow 0.9s linear infinite; }
.swsvg .conv { fill: none; stroke: #46d6ff; stroke-width: 1.3; stroke-dasharray: 4 5; marker-end: url(#ahC); animation: swflow 0.9s linear infinite; }
.swsvg .xck  { fill: none; stroke: #ffc24d; stroke-width: 1.2; stroke-dasharray: 2 3; marker-start: url(#ahA); marker-end: url(#ahA); }
.swsvg .xtick { fill: #ffc24d; font-size: 9px; text-anchor: start; }
@keyframes swflow { to { stroke-dashoffset: -18; } }

.sw-legend2 {
  display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 3px;
  font-size: 8.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
}
.sw-legend2 span { display: flex; align-items: center; gap: 6px; }
.sw-legend2 .lg-ag { width: 8px; height: 8px; border-radius: 2px; background: #46d6ff; }
.sw-legend2 .lg-xck { width: 14px; height: 0; border-top: 2px dashed #ffc24d; }

/* per-function voting table (clear cross-validation view) */
.dg2 { margin-top: 7px; }
.vtab { display: flex; flex-direction: column; gap: 3px; }
.vtab-row {
  display: grid; grid-template-columns: 1fr 30px 30px 38px 58px;
  align-items: center; gap: 4px; font-size: 10.5px;
  padding: 2px 6px; border-radius: 5px;
}
.vtab-head {
  font-size: 8px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim);
  padding-bottom: 4px; border-bottom: 1px solid var(--border); border-radius: 0;
}
.vtab-head .mk { font-weight: 700; font-size: 8.5px; }
.vtab-head .vv { color: var(--dim); }
.vtab-row.kept { background: rgba(62,242,164,0.05); box-shadow: inset 0 0 0 1px rgba(62,242,164,0.18); }
.vfn { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk { text-align: center; font-weight: 700; }
.mk.no { color: var(--dim); }
.vv { text-align: right; font-size: 8.5px; letter-spacing: 0.04em; font-weight: 700; white-space: nowrap; }
.vv.keep { color: var(--green); }
.vv.drop { color: var(--dim); }
.vtab-more {
  text-align: center; color: var(--dim); font-size: 9px; letter-spacing: 0.04em;
  padding-top: 4px; margin-top: 1px; border-top: 1px dashed var(--border);
}

/* exploit · successful-attack animation (drain vault -> attacker) */
.xpl { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; margin-top: 5px; }
.xpl-side { text-align: center; }
.xpl-cap { font-size: 8px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
.xpl-tank {
  width: 48px; height: 42px; margin: 0 auto; position: relative; overflow: hidden;
  border: 1px solid var(--ac); border-radius: 5px; background: rgba(255,91,110,0.04);
}
.xpl-liquid {
  position: absolute; left: 0; right: 0; bottom: 0; height: 84%;
  background: linear-gradient(180deg, rgba(255,91,110,0.55), rgba(255,91,110,0.2));
  box-shadow: 0 0 14px rgba(255,91,110,0.4) inset;
  animation: xdrain 3.2s ease-in-out infinite;
}
@keyframes xdrain { 0% { height: 84%; } 65% { height: 9%; } 100% { height: 84%; } }
.xpl-sub { font-size: 7.5px; letter-spacing: 0.06em; color: var(--dim); margin-top: 4px; }
.xpl-sub.draining { color: var(--ac); }

.xpl-pipe {
  position: relative; height: 18px; align-self: center;
  border-top: 1px dashed rgba(255,91,110,0.3); border-bottom: 1px dashed rgba(255,91,110,0.3);
  overflow: hidden;
}
.xpl-pipe .eth {
  position: absolute; top: 1px; left: 0; font-size: 12px; font-weight: 700; color: var(--ac);
  text-shadow: 0 0 8px var(--ac); animation: xflow 1.7s linear infinite;
}
@keyframes xflow {
  0% { left: -6%; opacity: 0; transform: scale(0.7); }
  12% { opacity: 1; transform: scale(1); }
  88% { opacity: 1; }
  100% { left: 102%; opacity: 0; transform: scale(0.7); }
}
.xpl-delta {
  font-size: 15px; font-weight: 700; color: var(--ac); font-variant-numeric: tabular-nums;
  text-shadow: 0 0 12px rgba(255,91,110,0.6); animation: xpump 3.2s ease-in-out infinite;
}
@keyframes xpump { 0%,55% { transform: scale(1); } 72% { transform: scale(1.14); } 90%,100% { transform: scale(1); } }
.xpl-sub.up { color: var(--ac); }

.xpl-badge {
  margin-top: 4px; display: flex; align-items: center; justify-content: center; gap: 7px;
  font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ac);
  border: 1px dashed var(--ac); border-radius: 5px; padding: 5px; background: rgba(255,91,110,0.06);
  animation: xbadge 2s ease-in-out infinite;
}
@keyframes xbadge { 0%,100% { box-shadow: 0 0 0 rgba(255,91,110,0); } 50% { box-shadow: 0 0 16px -3px rgba(255,91,110,0.6); } }
.xpl-badge .blip { width: 7px; height: 7px; border-radius: 50%; background: var(--ac); box-shadow: 0 0 8px var(--ac); animation: xblip 1s steps(1) infinite; }
@keyframes xblip { 0%,60% { opacity: 1; } 61%,100% { opacity: 0.25; } }

/* agents cross-checking each other (one container, borderless rows) */
.xc {
  display: flex; flex-direction: column; gap: 1px; margin-top: 2px;
  border: 1px solid var(--border); border-radius: 7px; background: rgba(3,7,9,0.4); padding: 5px 9px;
}
.xc-title { font-size: 8.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); margin-bottom: 2px; }
.xc-step {
  display: flex; align-items: center; gap: 9px;
  padding: 1px 0; border: none; background: none;
}
.xc-step:first-child { margin-top: 0; }
.xc-model {
  flex: none; width: 46px; text-align: center; padding: 1px 0; border-radius: 4px;
  font-size: 9px; font-weight: 700; color: var(--mc);
  border: 1px solid var(--mc); box-shadow: inset 0 0 12px -6px var(--mc);
}
.xc-act { flex: 1; min-width: 0; font-size: 9.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xc-find { flex: none; font-size: 9px; color: var(--text); }
.xc-ok { flex: none; font-size: 9.5px; color: var(--green); font-weight: 700; white-space: nowrap; }
.xc-consensus {
  margin-top: 4px; padding-top: 4px; text-align: center; font-size: 9px; color: var(--muted);
  border-top: 1px dashed var(--border-2);
}
.xc-consensus b { color: var(--ac); }

/* validation triage — findings table */
.dg-table { display: flex; flex-direction: column; gap: 3px; position: relative; overflow: hidden; }
.tri-scan {
  position: absolute; left: 0; right: 0; top: -12%; height: 26px; pointer-events: none; z-index: 0;
  background: linear-gradient(180deg, transparent, rgba(255,194,77,0.13), transparent);
  animation: triscan 3.4s ease-in-out infinite;
}
@keyframes triscan { 0% { top: -14%; } 100% { top: 104%; } }
.vt {
  display: grid; grid-template-columns: 26px 1fr auto auto; gap: 9px; align-items: center;
  padding: 3px 8px; border-radius: 5px; font-size: 10.5px; position: relative; z-index: 1;
  border: 1px solid var(--border); background: rgba(3,7,9,0.4);
}
.vt-id { color: var(--muted); font-weight: 700; }
.vt-desc { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vt-verd { font-size: 8.5px; letter-spacing: 0.1em; font-weight: 700; }
.vt-why { font-size: 9px; color: var(--dim); white-space: nowrap; }
.vt.keep { border-color: var(--ac); background: rgba(255,194,77,0.06); animation: keepglow 2.8s ease-in-out infinite; }
@keyframes keepglow { 0%,100% { box-shadow: 0 0 14px -8px var(--ac); } 50% { box-shadow: 0 0 18px -3px var(--ac); } }
.vt.keep .vt-id, .vt.keep .vt-verd { color: var(--ac); }
.vt.keep .vt-why { color: var(--muted); }
.vt.drop { opacity: 0.62; }
.vt.drop .vt-verd { color: var(--dim); }
.vt.more {
  display: block; text-align: center; color: var(--dim); font-size: 9.5px;
  letter-spacing: 0.04em; border-style: dashed; background: none; padding: 4px;
}

/* console panel */
.console-body { display: grid; grid-template-rows: 1fr auto; min-height: 0; }
.log {
  padding: 14px 16px; overflow: hidden; min-height: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  font-size: 12px; line-height: 1.75;
}
.log-line { white-space: pre-wrap; word-break: break-word; }
.log-line .ts { color: var(--dim); }
.log-line .tag { color: var(--ac); }
.log-line .msg { color: var(--text); }
.log-line.sys .msg { color: var(--muted); }
.log-line .ok { color: var(--green); }
.log-line .warn { color: var(--amber); }
.log-line .crit { color: var(--red); }

.code {
  border-top: 1px solid var(--border);
  background: rgba(3,7,9,0.55);
  padding: 13px 16px 15px; font-size: 11.5px; line-height: 1.6;
  white-space: pre; overflow: hidden; min-height: 0;
}
.code .cmt { color: var(--dim); }
.code .kw  { color: var(--cyan); }
.code .str { color: var(--green); }
.code .num { color: var(--amber); }
.code .fn  { color: var(--text); }
.code .cursor {
  display: inline-block; width: 7px; height: 14px; vertical-align: -2px;
  background: var(--green); box-shadow: 0 0 8px var(--green);
  animation: caret 1s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }

/* alert flash on confirmed vuln */
.vuln-flash {
  position: fixed; inset: 0; z-index: 50; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(255,91,110,0.13), transparent 70%);
}
.vuln-flash.fire { animation: vflash 1.1s ease-out; }
@keyframes vflash { 0% { opacity: 0; } 18% { opacity: 1; } 100% { opacity: 0; } }

/* one-shot reveal — NO `both` fill, so the resting state is the visible base
   (CSS animations freeze at frame 0 when the iframe is not painting). */
.fade-in { animation: fadein .45s ease; }
@keyframes fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (max-width: 860px) {
  .node-role { display: none; }
  .bottom { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .packet::after, .live-dot, .cursor { animation: none; }
}