.workspace { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; touch-action: none; outline: none; }
.workspace.pan-ready, .workspace.pan-ready * { cursor: grab !important; }
.workspace.panning, .workspace.panning * { cursor: grabbing !important; }
.workspace.wiring { cursor: crosshair; }

.empty-state { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; color: var(--muted); pointer-events: none; }
.empty-title { font-size: 16px; color: #aab4c2; margin-bottom: 2px; }
.ws-status { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 18px; padding: 4px 12px; font: 11px var(--mono); color: var(--muted); background: linear-gradient(transparent, rgba(14, 17, 21, .75)); pointer-events: none; }
.ws-status span:last-child { margin-left: auto; }

.sel-box { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1; stroke-dasharray: 4 3; pointer-events: none; }

.wire-hit { fill: none; stroke: transparent; stroke-width: 12; cursor: pointer; pointer-events: stroke; }
.wire-line { fill: none; stroke: var(--wire); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; pointer-events: none; }
.wire:hover .wire-line { stroke: #efc269; }
.wire.selected .wire-line { stroke: var(--accent); stroke-width: 3; }
.wire-temp { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 6 4; pointer-events: none; }

.wire-point{fill:var(--bg-app);stroke:var(--accent);stroke-width:2;cursor:grab}.wire-point:hover{fill:var(--accent)}


/* Current flow: glowing dots moving along the wire (animated from js/currentFlow.js) */
.wire-flow { pointer-events: none; --wire-c: var(--wire-color, #4aa3df); }
.wire-flow path { fill: none; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.wire-flow .flow-halo { stroke: var(--wire-c); stroke-width: 7; stroke-opacity: .25; }   /* soft glow */
.wire-flow .flow-dot  { stroke: #fff; stroke-width: 3.6; }                               /* fallback */
@supports (color: color-mix(in srgb, red, blue)) {
  .wire-flow .flow-dot { stroke: color-mix(in srgb, var(--wire-c) 40%, #fff); }          /* lighter than the wire */
}
@media (prefers-reduced-motion: reduce) { .wire-flow .flow-halo { stroke-opacity: .15; } }