.flow-layout { display: grid; grid-template-columns: minmax(0,1fr) 245px; gap: 16px; }
#flow-viewport { height: 580px; overflow: auto; border: 1px solid #c8d7c9; border-radius: 14px; background: #eaf0e8; }
#flow-space { position: relative; }#flow-board { position: relative; width: 2400px; height: 1600px; transform-origin: 0 0;
  background-image: radial-gradient(#bfd0be 1px,transparent 1px); background-size: 22px 22px; }
#flow-lines { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
.wire { stroke: #628a75; stroke-width: 5px; fill: none; pointer-events: stroke; cursor: pointer; }
.wire:hover,.wire.selected { stroke: #ab6d13; stroke-width: 7px; }
.flow-node { position: absolute; width: 230px; height: 160px; border: 1px solid #bccfbe; border-radius: 12px; background: #fff; box-shadow: 0 5px 14px #183e3510; }
.flow-node.selected { border: 2px solid #2c765b; box-shadow: 0 0 0 3px #d3e7c1; }
.drag-handle { display: block; width: 100%; background: #e0ecdb; color: #244e3b; padding: 11px 14px; border-radius: 11px 11px 0 0;
  text-align: left; cursor: grab; touch-action: none; font-size: 12px; font-weight: 600; }
.drag-handle:active { cursor: grabbing; }.node-copy { padding: 13px 22px; pointer-events: none; }
.node-copy strong { display: block; font-size: 14px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.node-copy p { font-size: 12px; line-height: 1.45; margin: 8px 0; max-height: 52px; overflow: hidden; overflow-wrap: anywhere; }
.port { position: absolute; width: 32px; height: 32px; border: 7px solid white; border-radius: 50%; padding: 0; background: #256749; top: 64px; z-index: 2; }
.port:hover,.port:focus { background: #a96918; }.port.in { left: -16px; }.port.out { right: -16px; }
.port.pending { background: #ac6112; box-shadow: 0 0 0 3px #e4b558; }
.port.yes { top: 44px; }.port.no { top: 104px; }.port span { position: absolute; right: 24px; top: -1px; color: #28533e; font-size: 11px; }
#flow-inspector { padding: 18px; align-self: start; }#flow-inspector p { font-size: 12px; }
#edit-node { display: grid; gap: 13px; }#flow-result { white-space: pre-wrap; overflow-wrap: anywhere; font: 13px/1.8 system-ui; }
#flow-feedback { min-height: 24px; font-size: 13px; color: #4e6034; }.file-action { max-width: 205px; }
.file-action input { font-size: 11px; padding: 6px; width: 100%; }
@media(max-width:1100px) { .flow-layout { grid-template-columns: 1fr; }#flow-inspector { max-width: none; }#flow-viewport { height: 500px; } }
@media(pointer:coarse) { .port { width: 44px; height: 44px; border-width: 13px; top: 58px; }.port.in { left: -22px; }
  .port.out { right: -22px; }.port.yes { top: 38px; }.port.no { top: 98px; } }