/* ============================================================
   vh-net.css — loaded ONLY by network.html.
   Product-window mockups (traffic ops center + C2 detection
   console) in the VenusHawk app's deep-carbon dark theme with a
   cyan "wire" accent. Every selector is net- prefixed; no shared
   class is restyled, so no other page can be affected by this file.
   ============================================================ */

/* ---------- scoped product palette ---------- */
.net-win{--net-bg:#070709;--net-panel:#101014;--net-panel2:#17171C;--net-line:rgba(255,255,255,0.1);--net-line2:rgba(255,255,255,0.2);--net-cyan:#22D3EE;--net-cyanink:#67E8F9;--net-blue:#3B82F6;--net-mint:#22C55E;--net-mintink:#4ADE80;--net-purple:#8B5CF6;--net-crit:#EF4444;--net-high:#F97316;--net-amber:#EAB308;--net-gray:#8E8E97;--net-head:#F5F5F8;--net-txt:#C7C7CE;--net-mut:#8E8E97}

/* ---------- window frame ---------- */
.net-win{margin-top:var(--s-6);border:1px solid var(--line-2);border-radius:18px;background:var(--net-bg);overflow:hidden;color:var(--net-txt);box-shadow:0 30px 80px -30px rgba(0,0,0,0.85),0 0 70px -34px rgba(34,211,238,0.36)}
.net-win__chrome{display:flex;align-items:center;gap:0.8rem;padding:0.7rem var(--s-5);border-bottom:1px solid var(--net-line);background:#0A0A0D;font-family:var(--font-mono);font-size:var(--t-2xs);letter-spacing:0.1em;text-transform:uppercase;color:var(--net-mut)}
.net-dots{display:inline-flex;gap:0.34rem;flex:none}
.net-dots i{width:9px;height:9px;border-radius:50%}
.net-dots i:nth-child(1){background:#FE5F57}
.net-dots i:nth-child(2){background:#FEBC2E}
.net-dots i:nth-child(3){background:#28C840}
.net-url{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.net-live{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:0.45rem;color:var(--net-cyanink);font-family:var(--font-mono);font-size:var(--t-2xs);letter-spacing:0.14em;text-transform:uppercase}
.net-live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--net-cyanink);animation:net-pulse 2.2s ease-out infinite}
.net-note{margin-top:var(--s-3);font-family:var(--font-mono);font-size:var(--t-2xs);letter-spacing:0.16em;text-transform:uppercase;color:var(--txt-mut)}
.net-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@keyframes net-pulse{0%{box-shadow:0 0 0 0 rgba(103,232,249,0.5)}70%{box-shadow:0 0 0 7px rgba(103,232,249,0)}100%{box-shadow:0 0 0 0 rgba(103,232,249,0)}}

/* ---------- command band ---------- */
.net-hero{position:relative;display:grid;grid-template-columns:1fr auto;gap:var(--s-5);align-items:center;padding:var(--s-5);border-bottom:1px solid var(--net-line);overflow:hidden}
.net-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 120% at 8% 0%,rgba(34,211,238,0.08),transparent 60%),radial-gradient(50% 110% at 92% 100%,rgba(59,130,246,0.06),transparent 60%);pointer-events:none}
.net-hero__copy{position:relative;display:grid;gap:0.55rem}
.net-eyebrow{display:inline-flex;align-items:center;gap:0.5rem;font-family:var(--font-mono);font-size:var(--t-2xs);letter-spacing:0.16em;text-transform:uppercase;color:var(--net-mut)}
.net-livedot{width:6px;height:6px;border-radius:50%;background:var(--net-cyanink);animation:net-pulse 2.2s ease-out infinite}
.net-hero__t{margin:0;font-size:1.25rem;font-weight:600;letter-spacing:-0.02em;color:var(--net-head);max-width:36ch}
.net-hero__t em{font-style:normal;color:var(--net-high)}
.net-hero__sub{display:flex;flex-wrap:wrap;gap:var(--s-4);font-family:var(--font-mono);font-size:var(--t-2xs);letter-spacing:0.12em;text-transform:uppercase;color:var(--net-mut)}
.net-hero__sub b{color:var(--net-head);margin-right:0.35rem;font-size:0.85rem}

/* live throughput monitor (equalizer) */
.net-monitor{position:relative;z-index:1;display:grid;gap:0.5rem;width:236px;padding:var(--s-4);border:1px solid var(--net-line);border-radius:12px;background:rgba(34,211,238,0.03)}
.net-monitor__top{display:flex;justify-content:space-between;align-items:baseline;gap:0.5rem}
.net-monitor__l{font-family:var(--font-mono);font-size:var(--t-2xs);letter-spacing:0.14em;text-transform:uppercase;color:var(--net-mut)}
.net-monitor__n{font-family:var(--font-mono);font-size:1.05rem;font-weight:600;color:var(--net-cyanink);font-variant-numeric:tabular-nums}
.net-eq{display:flex;align-items:flex-end;gap:2px;height:52px}
.net-eq i{flex:1;min-width:2px;border-radius:2px 2px 0 0;background:linear-gradient(180deg,var(--net-cyanink),rgba(34,211,238,0.25));height:22%;transition:height 0.35s linear}
.net-threat{justify-self:start;font-family:var(--font-mono);font-size:var(--t-2xs);letter-spacing:0.14em;text-transform:uppercase;color:#ffd18a;border:1px solid rgba(234,179,8,0.38);background:rgba(234,179,8,0.1);border-radius:100px;padding:0.22rem 0.6rem}

/* ---------- KPI row ---------- */
.net-kpis{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--net-line)}
.net-kpi{position:relative;display:grid;gap:0.28rem;align-content:start;padding:var(--s-4) var(--s-5);border-right:1px solid var(--net-line);min-width:0}
.net-kpi:last-child{border-right:0}
.net-kpi::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--net-cyan),transparent 70%);opacity:0.6}
.net-kpi--blue::before{background:linear-gradient(90deg,var(--net-blue),transparent 70%)}
.net-kpi--mint::before{background:linear-gradient(90deg,var(--net-mint),transparent 70%)}
.net-kpi--hot::before{background:linear-gradient(90deg,var(--net-crit),transparent 70%)}
.net-kpi__l{font-family:var(--font-mono);font-size:var(--t-2xs);letter-spacing:0.14em;text-transform:uppercase;color:var(--net-mut)}
.net-kpi>b{font-family:var(--font-mono);font-size:1.5rem;font-weight:600;letter-spacing:-0.02em;color:var(--net-head);line-height:1.1;font-variant-numeric:tabular-nums}
.net-kpi--hot>b{color:#ffb3a6}
.net-kpi__d{position:absolute;top:calc(var(--s-4) - 0.1rem);right:var(--s-4);font-family:var(--font-mono);font-size:var(--t-2xs);padding:0.1rem 0.42rem;border-radius:100px;border:1px solid}
.net-bad{color:var(--net-crit);border-color:rgba(239,68,68,0.32);background:rgba(239,68,68,0.08)}
.net-kpi__f{font-size:var(--t-2xs);color:var(--net-mut)}
.net-spark{width:100%;height:20px;margin-top:0.25rem}
.net-spark polyline{fill:none;stroke:var(--net-cyan);stroke-width:1.6;opacity:0.75;stroke-dasharray:130;stroke-dashoffset:130}
.net-kpi--blue .net-spark polyline{stroke:var(--net-blue)}
.net-kpi--mint .net-spark polyline{stroke:var(--net-mint)}
.net-kpi--hot .net-spark polyline{stroke:var(--net-crit)}
.net-app.is-in .net-spark polyline{animation:net-draw130 1.2s var(--ease) forwards}
.net-kpi:nth-child(2) .net-spark polyline{animation-delay:0.1s}
.net-kpi:nth-child(3) .net-spark polyline{animation-delay:0.2s}
.net-kpi:nth-child(4) .net-spark polyline{animation-delay:0.3s}
@keyframes net-draw130{to{stroke-dashoffset:0}}

/* ---------- panel grid ---------- */
.net-grid{display:grid;grid-template-columns:1fr 1.15fr;grid-template-areas:"proto talkers" "proto flows" "tput tput"}
.net-panel{padding:var(--s-4) var(--s-5);border-right:1px solid var(--net-line);border-bottom:1px solid var(--net-line);min-width:0}
.net-panel--proto{grid-area:proto;border-bottom:0;display:flex;flex-direction:column}
.net-heat{margin-top:auto;padding-top:var(--s-4)}
.net-heat__h{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:var(--t-2xs);letter-spacing:0.14em;text-transform:uppercase;color:var(--net-mut);margin-bottom:0.5rem}
.net-heat__grid{display:grid;grid-template-columns:repeat(13,1fr);gap:3px}
.net-heat__grid i{aspect-ratio:1;border-radius:2px;background:rgba(34,211,238,0.05);transition:background 0.7s var(--ease)}
@media (prefers-reduced-motion:reduce){.net-heat__grid i{transition:none}}
.net-panel--talkers{grid-area:talkers;border-right:0}
.net-panel--flows{grid-area:flows;border-right:0;border-bottom:0;position:relative}
.net-panel--tput{grid-area:tput;border-right:0;border-bottom:0;border-top:1px solid var(--net-line)}
.net-panel__h{display:flex;justify-content:space-between;align-items:center;gap:0.6rem;flex-wrap:wrap;font-family:var(--font-mono);font-size:var(--t-2xs);letter-spacing:0.14em;text-transform:uppercase;color:#B4B4BC;margin-bottom:var(--s-3)}
.net-panel__m{color:var(--net-mut);letter-spacing:0.1em}

/* protocol donut */
.net-donutwrap{display:grid;grid-template-columns:auto 1fr;gap:var(--s-4);align-items:center}
.net-donut{position:relative;width:132px;flex:none}
.net-donut svg{width:100%;display:block}
.net-donut circle{fill:none;stroke-width:6.5;transition:opacity 0.3s var(--ease),stroke-width 0.3s var(--ease)}
.net-app.is-in .net-donut circle{animation:net-seg 1s var(--ease) both}
.net-donut circle:nth-of-type(2){animation-delay:0.09s}
.net-donut circle:nth-of-type(3){animation-delay:0.18s}
.net-donut circle:nth-of-type(4){animation-delay:0.27s}
.net-donut circle:nth-of-type(5){animation-delay:0.36s}
.net-donut circle:nth-of-type(6){animation-delay:0.45s}
@keyframes net-seg{from{stroke-dasharray:0 100}}
.net-donut[data-hl] circle{opacity:0.22}
.net-donut[data-hl="a"] circle[data-k="a"],.net-donut[data-hl="b"] circle[data-k="b"],.net-donut[data-hl="c"] circle[data-k="c"],.net-donut[data-hl="d"] circle[data-k="d"],.net-donut[data-hl="e"] circle[data-k="e"],.net-donut[data-hl="f"] circle[data-k="f"]{opacity:1;stroke-width:8.4}
.net-donut__c{position:absolute;inset:0;display:grid;place-content:center;text-align:center;gap:0.1rem}
.net-donut__c b{font-family:var(--font-mono);font-size:0.95rem;color:var(--net-head)}
.net-donut__c span{font-family:var(--font-mono);font-size:0.55rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--net-mut)}
.net-legend{list-style:none;margin:0;padding:0;display:grid;gap:0.4rem}
.net-legend li{display:grid;grid-template-columns:10px 1fr auto auto;gap:0.55rem;align-items:center;font-size:0.82rem;color:var(--net-txt);border-radius:6px;padding:0.1rem 0.25rem}
.net-legend li[data-k]{cursor:default}
.net-legend li:hover{background:rgba(255,255,255,0.05)}
.net-legend i{width:9px;height:9px;border-radius:3px}
.net-legend b{font-family:var(--font-mono);font-weight:500;color:var(--net-head)}
.net-legend .net-pct{font-family:var(--font-mono);color:var(--net-mut);font-size:var(--t-2xs)}

/* top talkers bars */
.net-bars{display:grid;gap:0.6rem}
.net-bar{display:grid;grid-template-columns:112px 1fr 52px;gap:0.6rem;align-items:center;font-family:var(--font-mono);font-size:0.78rem;color:var(--net-txt)}
.net-bar__t{height:8px;border-radius:100px;background:rgba(255,255,255,0.09);overflow:hidden}
.net-bar__t i{display:block;height:100%;width:0;border-radius:100px;background:linear-gradient(90deg,var(--net-cyan),var(--net-blue));transition:width 0.9s var(--ease)}
.net-bar--hot .net-bar__t i{background:linear-gradient(90deg,var(--net-crit),var(--net-high))}
.net-app.is-in .net-bar__t i{width:var(--w)}
.net-app.is-in .net-bar:nth-child(2) .net-bar__t i{transition-delay:0.08s}
.net-app.is-in .net-bar:nth-child(3) .net-bar__t i{transition-delay:0.16s}
.net-app.is-in .net-bar:nth-child(4) .net-bar__t i{transition-delay:0.24s}
.net-app.is-in .net-bar:nth-child(5) .net-bar__t i{transition-delay:0.32s}
.net-app.is-in .net-bar:nth-child(6) .net-bar__t i{transition-delay:0.4s}
.net-bar b{color:var(--net-head);text-align:right}
.net-bar--hot b{color:#ffb3a6}

/* live flow capture stream */
.net-flows{list-style:none;margin:0;padding:0;display:grid;gap:0.35rem;align-content:start;min-height:212px}
.net-flows li{display:grid;grid-template-columns:58px 1fr 56px 52px;gap:0.55rem;align-items:baseline;font-family:var(--font-mono);font-size:0.76rem;color:var(--net-txt);padding:0.34rem 0.45rem;border-radius:7px;background:rgba(255,255,255,0.03)}
.net-flows li.is-new{animation:net-slide 0.4s var(--ease)}
.net-flow{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--net-head)}
.net-flow .a{color:var(--net-cyanink)}
.net-ftime{color:var(--net-mut);font-size:var(--t-2xs)}
.net-proto{font-size:var(--t-2xs);letter-spacing:0.04em;text-transform:uppercase;text-align:center;padding:0.08rem 0.2rem;border-radius:5px;border:1px solid}
.net-proto--tls{color:#67e8f9;border-color:rgba(34,211,238,0.35);background:rgba(34,211,238,0.08)}
.net-proto--dns{color:#9cc0ff;border-color:rgba(59,130,246,0.35);background:rgba(59,130,246,0.08)}
.net-proto--smb{color:#c4b5fd;border-color:rgba(139,92,246,0.35);background:rgba(139,92,246,0.08)}
.net-proto--ssh{color:#7cf1c0;border-color:rgba(34,197,94,0.35);background:rgba(34,197,94,0.08)}
.net-proto--rdp{color:#fde047;border-color:rgba(234,179,8,0.35);background:rgba(234,179,8,0.08)}
.net-verd{font-size:var(--t-2xs);letter-spacing:0.04em;text-transform:uppercase;text-align:center;padding:0.08rem 0.2rem;border-radius:5px;border:1px solid}
.net-verd--ok{color:#7cf1c0;border-color:rgba(34,197,94,0.3);background:rgba(34,197,94,0.06)}
.net-verd--watch{color:#fde047;border-color:rgba(234,179,8,0.35);background:rgba(234,179,8,0.08)}
.net-verd--block{color:#fca5a5;border-color:rgba(239,68,68,0.4);background:rgba(239,68,68,0.1)}
@keyframes net-slide{from{opacity:0;transform:translateY(-8px)}}

/* throughput timeline */
.net-tput svg{width:100%;height:auto;display:block}
.net-tput__fill{opacity:0}
.net-app.is-in .net-tput__fill{animation:net-fadein 0.9s var(--ease) 0.9s forwards}
.net-tput__line{fill:none;stroke:var(--net-cyan);stroke-width:1.8;stroke-linejoin:round;stroke-dasharray:400;stroke-dashoffset:400}
.net-app.is-in .net-tput__line{animation:net-draw400 1.6s var(--ease) 0.2s forwards}
.net-tput__ax{font-family:var(--font-mono);font-size:4.2px;letter-spacing:0.08em;fill:var(--net-mut)}
.net-tput__gl{stroke:rgba(255,255,255,0.08);stroke-width:0.5}
@keyframes net-draw400{to{stroke-dashoffset:0}}
@keyframes net-fadein{to{opacity:1}}

/* ---------- C2 detection console ---------- */
.net-det__head{display:flex;flex-wrap:wrap;align-items:center;gap:0.6rem;padding:var(--s-4) var(--s-5);border-bottom:1px solid var(--net-line)}
.net-sev{font-family:var(--font-mono);font-size:var(--t-2xs);letter-spacing:0.1em;text-transform:uppercase;padding:0.18rem 0.5rem;border-radius:6px;border:1px solid}
.net-sev--crit{color:#fca5a5;border-color:rgba(239,68,68,0.45);background:rgba(239,68,68,0.12)}
.net-det__t{font-family:var(--font-mono);font-size:0.9rem;font-weight:600;color:var(--net-head)}
.net-det__t .a{color:var(--net-cyanink)}
.net-status{margin-left:auto;font-family:var(--font-mono);font-size:var(--t-2xs);letter-spacing:0.1em;text-transform:uppercase;padding:0.18rem 0.5rem;border-radius:6px;border:1px solid}
.net-status[data-st="active"]{color:#fca5a5;border-color:rgba(239,68,68,0.4);background:rgba(239,68,68,0.1)}
.net-status[data-st="isolating"]{color:#67e8f9;border-color:rgba(34,211,238,0.35);background:linear-gradient(90deg,rgba(34,211,238,0.06),rgba(34,211,238,0.22),rgba(34,211,238,0.06));background-size:200% 100%;animation:net-shim 1.1s linear infinite}
.net-status[data-st="isolated"]{color:var(--net-mintink);border-color:rgba(34,197,94,0.4);background:rgba(34,197,94,0.1)}
@keyframes net-shim{to{background-position:-200% 0}}
.net-det__body{display:grid;grid-template-columns:1.25fr 1fr}
.net-evid{border-right:1px solid var(--net-line);padding:var(--s-4) var(--s-5);min-width:0}

/* beacon rhythm strip */
.net-rhythm{margin-bottom:var(--s-4)}
.net-rhythm__l{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:var(--t-2xs);letter-spacing:0.1em;text-transform:uppercase;color:var(--net-mut);margin-bottom:0.4rem}
.net-rhythm__l b{color:#ffd18a}
.net-rhythm__ticks{display:flex;gap:4px;align-items:flex-end;height:26px}
.net-rhythm__ticks i{flex:1;height:100%;border-radius:2px;background:rgba(34,211,238,0.18)}
.net-rhythm__ticks i.on{background:var(--net-cyanink);box-shadow:0 0 8px rgba(103,232,249,0.7)}

/* evidence table */
.net-etable{display:grid;gap:0;border:1px solid var(--net-line);border-radius:10px;overflow:hidden;margin-bottom:var(--s-4)}
.net-erow{display:grid;grid-template-columns:96px 1fr;gap:0.6rem;padding:0.42rem 0.75rem;border-bottom:1px solid var(--net-line);font-size:0.8rem;background:rgba(255,255,255,0.025)}
.net-erow:last-child{border-bottom:0}
.net-erow dt{font-family:var(--font-mono);font-size:var(--t-2xs);letter-spacing:0.08em;text-transform:uppercase;color:var(--net-mut);margin:0}
.net-erow dd{margin:0;font-family:var(--font-mono);font-size:0.78rem;color:var(--net-txt)}
.net-erow dd .warn{color:#ffd18a}
.net-erow dd .bad{color:#fca5a5}
.net-mitre{display:flex;flex-wrap:wrap;gap:0.4rem}
.net-tag{font-family:var(--font-mono);font-size:var(--t-2xs);letter-spacing:0.05em;text-transform:uppercase;padding:0.14rem 0.4rem;border-radius:6px;border:1px solid}
.net-tag--red{color:#fca5a5;border-color:rgba(239,68,68,0.35);background:rgba(239,68,68,0.08)}
.net-tag--amber{color:#fde047;border-color:rgba(234,179,8,0.35);background:rgba(234,179,8,0.08)}

/* east-west blast radius side */
.net-side{padding:var(--s-4) var(--s-5);display:grid;gap:var(--s-4);align-content:start}
.net-side__l{font-family:var(--font-mono);font-size:var(--t-2xs);letter-spacing:0.12em;text-transform:uppercase;color:var(--net-mut)}
.net-det__stat{font-family:var(--font-mono);font-size:1.35rem;font-weight:600;color:#ffb3a6;letter-spacing:-0.01em}
.net-det__desc{font-size:0.82rem;color:var(--net-txt);line-height:1.5}
.net-targets{list-style:none;margin:0;padding:0;display:grid;gap:0.4rem}
.net-targets li{display:grid;grid-template-columns:1fr auto;gap:0.6rem;align-items:center;font-family:var(--font-mono);font-size:0.78rem;color:var(--net-txt);padding:0.32rem 0.5rem;border-radius:7px;background:rgba(255,255,255,0.03)}
.net-treach{font-size:var(--t-2xs);letter-spacing:0.05em;text-transform:uppercase;padding:0.1rem 0.32rem;border-radius:5px;border:1px solid;color:#fca5a5;border-color:rgba(239,68,68,0.35);background:rgba(239,68,68,0.08)}
.net-det.is-contained .net-targets li{opacity:0.5}
.net-det.is-contained .net-treach{color:var(--net-mintink);border-color:rgba(34,197,94,0.35);background:rgba(34,197,94,0.08)}
.net-isolate{justify-self:start;appearance:none;font-family:var(--font-mono);font-size:var(--t-2xs);letter-spacing:0.06em;text-transform:uppercase;color:#fca5a5;border:1px solid rgba(239,68,68,0.45);background:rgba(239,68,68,0.1);border-radius:8px;padding:0.34rem 0.7rem;cursor:pointer;transition:background 0.2s var(--ease),transform 0.2s var(--ease)}
.net-isolate:hover{background:rgba(239,68,68,0.2);transform:translateY(-1px)}
.net-isolate:disabled{cursor:default;color:var(--net-mintink);border-color:rgba(34,197,94,0.4);background:rgba(34,197,94,0.08);transform:none}

/* ---------- responsive ---------- */
@media (max-width:900px){
 .net-hero{grid-template-columns:1fr;justify-items:start}
 .net-monitor{justify-self:stretch;width:auto}
 .net-kpis{grid-template-columns:repeat(2,1fr)}
 .net-kpi{border-bottom:1px solid var(--net-line)}
 .net-kpi:nth-child(2n){border-right:0}
 .net-grid{grid-template-columns:1fr;grid-template-areas:"proto" "talkers" "flows" "tput"}
 .net-panel{border-right:0}
 .net-panel--proto{border-bottom:1px solid var(--net-line)}
 .net-panel--talkers{border-bottom:1px solid var(--net-line)}
 .net-flows{min-height:0}
 .net-det__body{grid-template-columns:1fr}
 .net-evid{border-right:0;border-bottom:1px solid var(--net-line)}
}
@media (max-width:640px){
 .net-url{display:none}
 .net-donutwrap{grid-template-columns:1fr;justify-items:center}
 .net-bar{grid-template-columns:92px 1fr 44px}
 .net-flows li{grid-template-columns:1fr 52px 48px}
 .net-ftime{display:none}
 .net-flow{white-space:normal}
 .net-status{margin-left:0}
}

/* ---------- reduced motion: render final states ---------- */
@media (prefers-reduced-motion:reduce){
 .net-live::before,.net-livedot{animation:none}
 .net-eq i{transition:none}
 .net-spark polyline{animation:none!important;stroke-dashoffset:0}
 .net-app.is-in .net-donut circle,.net-donut circle{animation:none}
 .net-app.is-in .net-bar__t i,.net-bar__t i{transition:none;width:var(--w)}
 .net-tput__line{animation:none!important;stroke-dashoffset:0}
 .net-tput__fill{animation:none!important;opacity:1}
 .net-flows li.is-new{animation:none}
 .net-status[data-st="isolating"]{animation:none}
 .net-isolate,.net-legend li,.net-bar__t i{transition:none}
}

/* ============================================================
   LIVE WIRE ANALYZER — flow waterfall + beacon scope + decode.
   A signal/PCAP style tool, deliberately distinct from the KPI +
   donut agent dashboards. Reuses the .net-win chrome + --net-*
   tokens. Dawn (#FF7A45) marks the selected flow.
   ============================================================ */
.net-wire{--net-dawn:#FF7A45;color:var(--net-txt)}

/* header stat bar */
.net-wire__bar{display:flex;flex-wrap:wrap;align-items:baseline;gap:0.4rem var(--s-5);padding:var(--s-4) var(--s-5);border-bottom:1px solid var(--net-line);background:linear-gradient(90deg,rgba(34,211,238,0.05),transparent 62%)}
.net-wire__stat{display:flex;align-items:baseline;gap:0.42rem;font-family:var(--font-mono)}
.net-wire__stat b{font-size:1.3rem;font-weight:600;color:var(--net-head);font-variant-numeric:tabular-nums;letter-spacing:-0.01em}
.net-wire__stat span{font-size:var(--t-2xs);letter-spacing:0.12em;text-transform:uppercase;color:var(--net-mut)}
.net-wire__stat--flag b{color:#ff9d84}
.net-wire__meta{margin-left:auto;font-family:var(--font-mono);font-size:var(--t-2xs);letter-spacing:0.12em;text-transform:uppercase;color:var(--net-mut)}

/* body split: waterfall + aside */
.net-wire__body{display:grid;grid-template-columns:1.4fr 1fr}
.net-wire__waterfall{border-right:1px solid var(--net-line);min-width:0;display:flex;flex-direction:column}
.net-wf__head{display:grid;grid-template-columns:52px 1fr 46px 60px 40px 90px;gap:0.5rem;padding:0.55rem var(--s-5);border-bottom:1px solid var(--net-line);font-family:var(--font-mono);font-size:var(--t-2xs);letter-spacing:0.1em;text-transform:uppercase;color:var(--net-mut);background:#0A0A0D}
.net-wf__head span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.net-wf__scroll{max-height:330px;overflow:auto;padding:0.4rem}
.net-wf__list{display:grid;gap:0.26rem;min-width:400px}

.net-wf__row{display:grid;grid-template-columns:52px 1fr 46px 60px 40px 90px;gap:0.5rem;align-items:center;width:100%;text-align:left;appearance:none;background:rgba(255,255,255,0.02);border:1px solid transparent;border-left:2px solid transparent;border-radius:7px;padding:0.4rem 0.5rem;font-family:var(--font-mono);font-size:0.76rem;color:var(--net-txt);cursor:pointer;transition:background 0.16s var(--ease),border-color 0.16s var(--ease)}
.net-wf__row:hover{background:rgba(255,255,255,0.055)}
.net-wf__row:focus-visible{outline:2px solid var(--net-cyanink);outline-offset:1px}
.net-wf__row[data-flag]{background:rgba(220,38,38,0.08)}
.net-wf__row[data-flag="high"]{background:rgba(249,115,22,0.08)}
.net-wf__row.is-sel{background:rgba(255,122,69,0.12);border-color:rgba(255,122,69,0.4);border-left-color:var(--net-dawn)}
.net-wf__row.is-new{animation:net-slide 0.4s var(--ease)}
.net-wf__time{color:var(--net-mut);font-size:var(--t-2xs)}
.net-wf__flow{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--net-head)}
.net-wf__flow .a{color:var(--net-cyanink)}
.net-wf__flow[data-flag] .a{color:#ff9d84}
.net-wf__bytes,.net-wf__dur{text-align:right;color:var(--net-txt);font-variant-numeric:tabular-nums;white-space:nowrap}
.net-wf__proto{font-family:var(--font-mono);font-size:var(--t-2xs);letter-spacing:0.03em;text-align:center;padding:0.06rem 0.15rem;border-radius:5px;border:1px solid;white-space:nowrap}
.net-wf__proto--tls{color:#67e8f9;border-color:rgba(34,211,238,0.35);background:rgba(34,211,238,0.1)}
.net-wf__proto--dns{color:#9cc0ff;border-color:rgba(59,130,246,0.4);background:rgba(59,130,246,0.12)}
.net-wf__proto--smb{color:#c4b5fd;border-color:rgba(139,92,246,0.4);background:rgba(139,92,246,0.12)}

/* severity / verdict chips: solid readable bg + explicit text */
.net-sevchip{font-family:var(--font-mono);font-size:var(--t-2xs);font-weight:600;letter-spacing:0.03em;text-transform:uppercase;text-align:center;padding:0.12rem 0.32rem;border-radius:5px;white-space:nowrap;border:1px solid transparent}
.net-sevchip--crit,.net-sevchip--high{background:#DC2626;color:#fff;border-color:#DC2626}
.net-sevchip--med{background:#EAB308;color:#101014;border-color:#EAB308}
.net-sevchip--ok{background:transparent;color:#4ADE80;border-color:rgba(74,222,128,0.4)}

/* aside: beacon scope + decode */
.net-wire__aside{display:grid;grid-template-rows:auto 1fr;min-width:0}
.net-scope{padding:var(--s-4) var(--s-5);border-bottom:1px solid var(--net-line)}
.net-scope__h{display:flex;justify-content:space-between;align-items:baseline;gap:0.5rem;font-family:var(--font-mono);font-size:var(--t-2xs);letter-spacing:0.1em;text-transform:uppercase;color:var(--net-mut);margin-bottom:0.7rem}
.net-scope__h b{color:#ff9d84;font-weight:600}
.net-scope__row{display:grid;grid-template-columns:74px 1fr;gap:0.6rem;align-items:center;margin-bottom:0.5rem}
.net-scope__tag{font-family:var(--font-mono);font-size:var(--t-2xs);color:var(--net-mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.net-scope__track{display:flex;align-items:flex-end;gap:3px;height:34px;padding:0 2px 2px;border-left:1px solid var(--net-line2);border-bottom:1px solid var(--net-line2)}
.net-scope__track i{flex:1;min-width:2px;border-radius:1px;background:rgba(255,255,255,0.14);transition:height 0.5s var(--ease),background 0.3s var(--ease)}
.net-scope__track i.pulse{background:var(--net-cyanink);box-shadow:0 0 7px rgba(103,232,249,0.55)}
.net-scope__track i.sweep{background:var(--net-dawn);box-shadow:0 0 9px rgba(255,122,69,0.7)}
.net-scope__row--noise .net-scope__track i{background:rgba(142,142,151,0.45)}
.net-scope__cap{margin:0.55rem 0 0;font-size:0.76rem;line-height:1.45;color:var(--net-mut)}

.net-decode{padding:var(--s-4) var(--s-5);display:grid;gap:0.7rem;align-content:start;min-width:0}
.net-decode__top{display:flex;align-items:center;gap:0.6rem}
.net-decode__id{margin-left:auto;font-family:var(--font-mono);font-size:var(--t-2xs);letter-spacing:0.1em;text-transform:uppercase;color:var(--net-mut)}
.net-decode__tuple{font-family:var(--font-mono);font-size:0.8rem;color:var(--net-head);word-break:break-word;line-height:1.4}
.net-decode__tuple .a{color:var(--net-cyanink)}
.net-decode__grid{display:grid;grid-template-columns:1fr 1fr;margin:0;border:1px solid var(--net-line);border-radius:9px;overflow:hidden}
.net-decode__grid>div{padding:0.42rem 0.6rem;border-right:1px solid var(--net-line);border-bottom:1px solid var(--net-line);background:rgba(255,255,255,0.02);min-width:0}
.net-decode__grid>div:nth-child(2n){border-right:0}
.net-decode__grid>div:nth-last-child(-n+2){border-bottom:0}
.net-decode__grid dt{margin:0 0 0.16rem;font-family:var(--font-mono);font-size:var(--t-2xs);letter-spacing:0.08em;text-transform:uppercase;color:var(--net-mut)}
.net-decode__grid dd{margin:0;font-family:var(--font-mono);font-size:0.76rem;color:var(--net-txt);word-break:break-word}
.net-decode__grid dd.bad{color:#ff9d84}
.net-decode__grid dd.ok{color:#4ADE80}
.net-decode__read{margin:0;font-size:0.83rem;line-height:1.5;color:var(--net-txt)}
.net-decode__foot{font-family:var(--font-mono);font-size:var(--t-2xs);letter-spacing:0.08em;text-transform:uppercase;color:var(--net-mut)}

/* responsive: stack panels, keep waterfall scrollable */
@media (max-width:760px){
 .net-wire__body{grid-template-columns:1fr}
 .net-wire__waterfall{border-right:0;border-bottom:1px solid var(--net-line)}
 .net-wf__head{grid-template-columns:1fr 46px 60px 90px}
 .net-wf__head span:nth-child(1),.net-wf__head span:nth-child(5){display:none}
 .net-wf__row{grid-template-columns:1fr 46px 60px 90px}
 .net-wf__time,.net-wf__dur{display:none}
 .net-decode__grid{grid-template-columns:1fr}
 .net-decode__grid>div{border-right:0;border-bottom:1px solid var(--net-line)}
 .net-decode__grid>div:last-child{border-bottom:0}
}
@media (max-width:420px){
 .net-wire__meta{margin-left:0;width:100%}
}
@media (prefers-reduced-motion:reduce){
 .net-wf__row,.net-scope__track i{transition:none}
 .net-wf__row.is-new{animation:none}
}