/* FlowCanvas overrides load after the global theme so every palette stays readable. */
#flowStudio .flow-canvas-controls{display:flex;align-items:center;gap:5px;flex-wrap:wrap;padding:11px 16px;background:var(--surface-alt);border-bottom:1px solid var(--line);color:var(--ink);font-size:11px;min-width:0}
#flowStudio .flow-canvas-controls-label{font-weight:650;color:var(--muted);margin-right:7px;letter-spacing:.04em}
#flowStudio .flow-canvas-zoom-btn,#flowStudio .flow-canvas-zoom-preset{display:grid;place-items:center;height:28px;min-width:28px;padding:0 8px;background:var(--surface);border:1px solid var(--line);border-radius:7px;color:var(--ink);cursor:pointer;font-family:inherit;font-size:11px;font-weight:600;line-height:1;white-space:nowrap;box-shadow:none}
#flowStudio .flow-canvas-zoom-btn{font-size:17px;font-weight:400;padding:0 5px}
#flowStudio .flow-canvas-zoom-btn:hover,#flowStudio .flow-canvas-zoom-preset:hover{border-color:var(--blue);color:var(--blue)}
#flowStudio .flow-canvas-zoom-btn:disabled{opacity:.4;cursor:default}
#flowStudio .flow-canvas-zoom-preset.is-active{background:var(--accent-soft);border-color:var(--accent-line);color:var(--blue)}
#flowStudio .flow-canvas-percent-field{display:flex;align-items:center;height:28px;border:1px solid var(--line);background:var(--surface);border-radius:7px;padding-right:7px;color:var(--muted)}
#flowStudio .flow-canvas-percent-field:focus-within{outline:2px solid var(--accent-line);border-color:var(--blue)}
#flowStudio .flow-canvas-zoom-input{width:40px;min-width:0;border:0;outline:0;padding:5px 0 5px 4px;font:600 11px ui-monospace,Consolas,monospace;text-align:right;background:transparent;color:var(--ink);appearance:textfield}
#flowStudio .flow-canvas-zoom-input::-webkit-inner-spin-button,#flowStudio .flow-canvas-zoom-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
#flowStudio .flow-canvas-percent-field>span{font-size:10px;margin-left:3px}
#flowStudio .flow-canvas-zoom-range{width:108px;min-width:65px;height:22px;accent-color:var(--accent);margin:0 9px;cursor:pointer}
#flowStudio .flow-canvas-zoom-hint{margin-left:auto;color:var(--muted);font-size:10px;white-space:nowrap}
#flowStudio .flow-scroll{max-height:640px;min-height:160px;overscroll-behavior:contain;scrollbar-gutter:stable;background:var(--bg)}
#flowStudio .flow-canvas{background-size:24px 24px;will-change:transform}
#flowStudio .flow-connection .flow-edge-line{fill:none;stroke:color-mix(in srgb,var(--blue) 53%,var(--page-muted));stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;transition:stroke .15s ease,stroke-width .15s ease;filter:none}
#flowStudio .flow-edge-layer .flow-connection.is-traversed .flow-edge-line{stroke:var(--green);stroke-width:2.4}
#flowStudio .flow-edge-layer .flow-connection.is-selected .flow-edge-line,#flowStudio .flow-edge-layer .flow-connection:hover .flow-edge-line{stroke:var(--blue);stroke-width:2.5}
#flowStudio .flow-edge-layer .flow-connection .flow-edge-hit{fill:none;stroke:transparent;stroke-width:19;vector-effect:non-scaling-stroke;pointer-events:stroke;filter:none}
#flowStudio .flow-svg #flowArrow path{fill:none;stroke:color-mix(in srgb,var(--blue) 53%,var(--page-muted));stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
#flowStudio .flow-svg #flowArrowActive path{fill:none;stroke:var(--green);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
#flowStudio .flow-svg #flowArrowSelected path{fill:none;stroke:var(--blue);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
#flowStudio .flow-edge-layer .flow-connection .flow-label-leader{fill:none;stroke:var(--page-muted);stroke-width:1;stroke-dasharray:2 4;stroke-linecap:round;opacity:.32;vector-effect:non-scaling-stroke;pointer-events:none;filter:none}
#flowStudio .flow-edge-layer .flow-connection .flow-label-anchor{fill:var(--page-muted);stroke:var(--surface);stroke-width:1;opacity:.6;pointer-events:none}
#flowStudio .flow-edge-label{max-width:176px;padding:5px 10px;border-radius:7px;background:var(--surface);border:1px solid color-mix(in srgb,var(--line) 77%,var(--blue));box-shadow:0 2px 6px var(--shadow);color:var(--sub);font-size:10px;line-height:17px;transition:border-color .15s,color .15s}
#flowStudio .flow-edge-label:hover,#flowStudio .flow-label-layer .flow-edge-label.is-selected{border-color:var(--blue);color:var(--blue);box-shadow:0 0 0 2px var(--accent-soft)}
#flowStudio .flow-label-layer .flow-edge-label.is-traversed{border-color:var(--green);color:var(--green)}
#flowStudio .flow-port:after{inset:6.5px;border-width:1.75px;box-shadow:0 0 0 2px var(--surface)}
#flowStudio .flow-draft-path{vector-effect:non-scaling-stroke;stroke-width:2.4;stroke-dasharray:6 5}
#flowStudio .flow-draft-path.has-target{stroke-dasharray:none;filter:drop-shadow(0 1px 4px var(--green-soft))}
@media(max-width:620px){#flowStudio .flow-canvas-controls{gap:4px;padding:10px 12px}#flowStudio .flow-canvas-zoom-hint{display:none}#flowStudio .flow-canvas-controls-label{margin-right:3px}#flowStudio .flow-canvas-zoom-range{width:74px;margin:0 4px}#flowStudio .flow-canvas-zoom-preset{padding:0 6px}#flowStudio .flow-scroll{max-height:510px}}
@media(prefers-reduced-motion:reduce){#flowStudio .flow-edge-label,#flowStudio .flow-connection .flow-edge-line{transition:none}}