.pipe-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; align-items: center; margin: 8px 0 12px; }
.pipe-top .badge { border: 1px solid currentColor; padding: 3px 8px; font: 11px Consolas, monospace; letter-spacing: .12em; }
.pipe-top .badge.shadow { color: var(--muted); }
.pipe-top .badge.demo { color: var(--gold); box-shadow: 0 0 12px #ffc85733; }
.pipe-top .badge.live { color: var(--red); box-shadow: 0 0 12px #ff557833; }
.pipe-stats { display: flex; gap: 14px; color: var(--muted); font: 12px Consolas, monospace; }
.pipe-layout { position: relative; display: grid; grid-template-columns: 190px 1fr; gap: 72px; min-height: 280px; }
.pipe-layout .wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: visible; }
.pipe-layout .wire { fill: none; stroke: #35f3ff; stroke-width: 1.4; opacity: .8; filter: drop-shadow(0 0 4px #35f3ff); }
html.qd-motion .pipe-layout .wire { stroke-dasharray: 5 8; animation: pipe-flow 1.15s linear infinite; }
@keyframes pipe-flow { to { stroke-dashoffset: -26; } }
.pipe-stages, .pipe-lane { position: relative; z-index: 1; }
.pipe-stages { display: grid; gap: 10px; align-content: start; }
.pipe-stage { position: relative; border: 1px solid var(--line); padding: 10px 10px 10px 16px; background: #071018; }
.pipe-stage::before { content: ""; position: absolute; left: 6px; top: 14px; width: 6px; height: 6px; border-radius: 50%; background: #244056; }
.pipe-stage strong { display: block; font: 10px Consolas, monospace; letter-spacing: .08em; color: var(--cyan); }
.pipe-stage span { color: var(--muted); font-size: 12px; }
.pipe-stage.hot { border-color: #1d6d7a; box-shadow: inset 3px 0 var(--cyan), 0 0 14px #35f3ff22; }
.pipe-stage.hot::before { background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.pipe-lane { display: grid; gap: 10px; align-content: start; }
.pipe-node { display: grid; grid-template-columns: 92px 1fr auto; gap: 8px; border: 1px solid var(--line); padding: 10px; background: #071018; }
.pipe-node p { margin: 4px 0 0; color: var(--muted); }
.pipe-node.filtered b:first-child { color: var(--muted); }
.pipe-node.passed b:first-child { color: var(--cyan); }
.pipe-node.sized b:first-child { color: var(--gold); }
.pipe-node.sent b:first-child { color: var(--green); }
.pipe-node.closed b:first-child { color: var(--green); }
.pipe-node .chip { font: 10px Consolas, monospace; letter-spacing: .08em; color: var(--gold); }
.pipe-idle { border-left: 3px solid var(--gold); background: #221c12; color: #f0d7a4; padding: 10px 12px; }
html.qd-motion .pipe-node { animation: pipe-in .4s ease; }
html.qd-motion .pipe-stage.hot { animation: pipe-glow 2.4s ease-in-out infinite; }
@keyframes pipe-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes pipe-glow { 50% { box-shadow: inset 3px 0 var(--cyan), 0 0 16px #35f3ff44; } }
@media (max-width: 720px) { .pipe-layout { grid-template-columns: 1fr; } .pipe-node { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  html.qd-motion .pipe-node, html.qd-motion .pipe-stage.hot, html.qd-motion .pipe-layout .wire { animation: none; }
}