/* Flow Studio — dark, theme-aware workflow editor */
#flowStudio{--flow-grid:rgba(104,139,193,.13);color:var(--ink,#d9e5f5)}
#flowStudio .flow-tabs{display:flex;gap:8px;margin:0 0 18px;padding:5px;border:1px solid var(--line,#2a405f);border-radius:13px;background:var(--surface-alt,#122039);width:max-content}
#flowStudio .flow-tabs button{border:0;border-radius:9px;background:transparent;color:var(--muted,#93a6bf);padding:9px 14px;font:600 12px inherit;cursor:pointer}
#flowStudio .flow-tabs button.active{background:var(--blue,#5188dd);color:#fff;box-shadow:0 4px 14px #173a70aa}
#flowStudio .flow-tabs button span{opacity:.72;margin-left:4px}
#flowStudio .flow-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:16px;align-items:start}
#flowStudio .flow-editor{overflow:hidden;padding:0}
#flowStudio .flow-editor-top{padding:18px 20px 15px;display:flex;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line,#2a405f)}
#flowStudio .flow-title-row{display:flex;align-items:center;gap:10px}.flow-title-row h2{font-size:16px;margin:0}
#flowStudio .flow-editor-top p{color:var(--muted,#93a6bf);font-size:11px;margin:7px 0 0}.flow-save-note{color:#70c6a0;margin-left:8px}
#flowStudio .flow-text-button{border:0;background:none;color:var(--blue,#65a0f0);cursor:pointer;font-size:11px}
#flowStudio .flow-tools{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
#flowStudio .flow-scroll{overflow:auto;max-width:100%;background:var(--bg,#081323);border-bottom:1px solid var(--line,#2a405f);scrollbar-color:var(--blue,#5188dd) var(--surface-alt,#122039)}
#flowStudio .flow-canvas{position:relative;background-image:linear-gradient(var(--flow-grid) 1px,transparent 1px),linear-gradient(90deg,var(--flow-grid) 1px,transparent 1px);background-size:28px 28px;min-width:1180px}
#flowStudio .flow-svg{position:absolute;inset:0;overflow:visible;pointer-events:none}
#flowStudio .flow-edge-layer path{fill:none;stroke:#6287b7;stroke-width:2;stroke-linecap:round}
#flowStudio .flow-edge-layer path.flow-edge-hit{stroke:transparent;stroke-width:15;pointer-events:stroke;cursor:pointer}
#flowStudio .flow-edge-layer .is-traversed path:not(.flow-edge-hit){stroke:#6bdbb0;stroke-width:3}
#flowStudio .flow-edge-layer marker path{fill:#6287b7;stroke:none}.flow-edge-layer .is-traversed marker path{fill:#6bdbb0}
#flowStudio .flow-label-layer{position:absolute;inset:0;pointer-events:none}
#flowStudio .flow-edge-label{position:absolute;transform:translate(-50%,-50%);max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:1px solid #35557e;border-radius:8px;background:var(--surface,#101f36);color:#b7cae8;padding:5px 8px;font-size:10px;cursor:pointer;pointer-events:auto;box-shadow:0 2px 8px #06101e99}
#flowStudio .flow-edge-label:hover,.flow-edge-label.is-traversed{border-color:#65d7aa;color:#d8fff0}
#flowStudio .flow-node{position:absolute;transform:translate(-50%,-50%);width:158px;min-height:76px;padding:11px 13px 10px;text-align:left;border:1px solid #385a86;border-radius:12px;background:var(--surface,#101f36);color:var(--ink,#d9e5f5);box-shadow:0 8px 22px #030a15aa;cursor:grab;z-index:3}
#flowStudio .flow-node:active{cursor:grabbing}.flow-node.is-dragging{opacity:.82;box-shadow:0 12px 28px #000b}
#flowStudio .flow-node.flow-action-node{display:flex;flex-direction:column;gap:5px}.flow-node.flow-action-node strong{font-size:13px;line-height:1.15}.flow-node.flow-action-node small{color:var(--muted,#93a6bf);font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#flowStudio .flow-node-kicker{display:flex;align-items:center;gap:5px;color:#72a6ee;font-size:9px;letter-spacing:.08em;text-transform:uppercase}.flow-node-kicker>span:last-child{margin-left:auto;color:#7891af}
#flowStudio .flow-node-icon{width:17px;height:17px;display:grid;place-items:center;border-radius:5px;background:#31588e44}.flow-node-icon .icon{width:12px;height:12px}
#flowStudio .flow-terminal-node{width:72px;height:72px;min-height:72px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;border-radius:50%;padding:8px;background:var(--surface-alt,#142641);border:2px solid #638ec6;box-shadow:0 8px 24px #030a15aa}
#flowStudio .flow-terminal-node.is-end{border-color:#8393ad}.flow-terminal-mark{font-size:12px;color:#75aef0;margin-bottom:3px}.flow-terminal-node.is-end .flow-terminal-mark{color:#94a4ba}
#flowStudio .flow-terminal-node strong{font-size:11px}.flow-node.is-current{border-color:#71dcb3;box-shadow:0 0 0 3px #4dd69f2b,0 10px 25px #030a15aa}.flow-node.is-visited{border-color:#5e9c84}
#flowStudio .flow-current-dot{position:absolute;width:8px;height:8px;border-radius:50%;background:#72deb1;right:7px;top:7px;box-shadow:0 0 0 4px #72deb133}
#flowStudio .flow-test-panel{padding:0;overflow:hidden}.flow-test-panel .panel-head{padding:17px 18px}.flow-run-state{font-size:10px;color:#97aaca}.flow-run-state.active{color:#6cdbad}
#flowStudio .flow-test-body{padding:17px 18px;border-top:1px solid var(--line,#2a405f);border-bottom:1px solid var(--line,#2a405f)}
#flowStudio .flow-test-current small{color:var(--muted,#93a6bf);font-size:10px}.flow-test-current strong{display:block;font-size:17px;margin-top:6px}.flow-test-current p{font-size:11px;color:var(--muted,#93a6bf);line-height:1.5;margin:7px 0 15px}
#flowStudio .flow-events{display:flex;flex-direction:column;gap:7px}.flow-event-btn{border:1px solid #35557e;border-radius:9px;background:var(--surface-alt,#142641);color:var(--ink,#d9e5f5);padding:9px 10px;text-align:left;display:grid;grid-template-columns:1fr auto;gap:4px 8px;cursor:pointer}.flow-event-btn:hover{border-color:#72dcb1}.flow-event-btn small{color:var(--muted,#93a6bf);font-size:9px;grid-column:1}.flow-event-btn .icon{grid-column:2;grid-row:1/3;align-self:center;color:#70a9ed}
#flowStudio .flow-events-empty{border:1px dashed #385579;padding:13px 10px;border-radius:9px;color:var(--muted,#93a6bf);font-size:11px;text-align:center}
#flowStudio .flow-custom-event{margin:14px 18px;color:var(--muted,#93a6bf);font-size:11px}.flow-custom-event summary{cursor:pointer}.flow-event-form{display:flex;gap:7px;margin-top:9px}.flow-event-form .input{min-width:0;flex:1;font-size:11px}
#flowStudio .flow-trace{margin:0 18px 18px;padding:10px;border-radius:8px;background:var(--bg,#081323);min-height:65px;font:10px/1.55 ui-monospace,Consolas,monospace;color:#a6bad7}.flow-trace>div{display:flex;gap:8px}.flow-trace time{color:#6684aa}.flow-trace-muted{color:#bf9c9c}.flow-trace-empty{color:#58718f}
#flowStudio .flow-legend{display:flex;align-items:center;gap:15px;flex-wrap:wrap;padding:12px 18px;color:var(--muted,#93a6bf);font-size:10px}.flow-legend i{display:inline-block;margin-right:5px;vertical-align:middle}.flow-legend-circle{width:10px;height:10px;border:1px solid #638ec6;border-radius:50%}.flow-legend-rect{width:15px;height:10px;border:1px solid #638ec6;border-radius:3px}.flow-hint{margin-left:auto}
#flowStudio .flow-validation,.flow-simulation-note{display:flex;gap:8px;align-items:flex-start;margin-top:12px;padding:11px 14px;border-radius:9px;border:1px solid #5f4d2c;background:#291f12;color:#d8bd7e;font-size:11px}.flow-simulation-note{border-color:#294b67;background:#10263c;color:#96b9db}
#flowStudio .flow-validation .icon,.flow-simulation-note .icon{width:14px;flex:none}
#flowStudio .flow-modal-footer{justify-content:space-between}.flow-modal-footer #flowDialogCancel{margin-left:auto}
@media(max-width:900px){#flowStudio .flow-layout{grid-template-columns:1fr}.flow-test-panel{max-width:100%}}
@media(max-width:560px){#flowStudio .flow-editor-top{padding:15px;display:block}.flow-tools{margin-top:13px}.flow-hint{width:100%;margin-left:0}.flow-event-form{flex-wrap:wrap}.flow-event-form .input{min-width:120px}.flow-event-form .btn{width:100%}}


#flowStudio #flowArrow path{fill:#6287b7;stroke:none}
#flowStudio #flowArrowActive path{fill:#6bdbb0;stroke:none}
#flowStudio .flow-tabs button{font-family:inherit;font-size:12px;font-weight:600}
#flowStudio .flow-action-node,#flowStudio .flow-terminal-node{touch-action:none}
#flowStudio .flow-test-panel .panel-head{display:block}
#flowStudio .flow-run-state{display:block;margin-top:7px}
/* Keep the whole example visible before the test controls. */
#flowStudio .flow-layout{grid-template-columns:minmax(0,1fr)}
#flowStudio .flow-canvas-box{position:relative}
#flowStudio .flow-canvas{position:absolute;left:0;top:0}
#flowStudio .flow-test-panel{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
#flowStudio .flow-test-panel>.panel-head{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center}
#flowStudio .flow-test-panel .flow-run-state{margin-top:0}
#flowStudio .flow-test-body{grid-column:1;display:grid;grid-template-columns:minmax(140px,.8fr) minmax(0,1fr);gap:20px;border-bottom:0}
#flowStudio .flow-custom-event{grid-column:1;margin-top:0}
#flowStudio .flow-trace{grid-column:2;grid-row:2/4;margin-top:17px;min-height:110px;border:1px solid var(--line,#2a405f)}
#flowStudio .flow-trace>div{padding:3px 0}
@media(max-width:760px){#flowStudio .flow-test-panel{display:block}#flowStudio .flow-test-panel>.panel-head{display:block}#flowStudio .flow-test-panel .flow-run-state{margin-top:7px}#flowStudio .flow-trace{margin-top:14px}#flowStudio .flow-test-body{display:block}}
#flowStudio .flow-node strong{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Four-side connections and clear, rounded workflow paths. */
#flowStudio .flow-action-node{height:86px;min-height:86px;box-sizing:border-box}
#flowStudio .flow-connection .flow-edge-line{stroke-width:2.2;stroke-linejoin:round}
#flowStudio .flow-connection:hover .flow-edge-line{stroke:var(--blue);stroke-width:2.6}
#flowStudio .flow-edge-layer .flow-connection.is-selected .flow-edge-line{stroke:var(--blue);stroke-width:2.8}
#flowStudio .flow-svg #flowArrow path{fill:none;stroke:var(--page-muted);stroke-width:2}
#flowStudio .flow-svg #flowArrowActive path{fill:none;stroke:var(--green);stroke-width:2}
#flowStudio .flow-svg #flowArrowSelected path{fill:none;stroke:var(--blue);stroke-width:2}
#flowStudio .flow-label-layer{z-index:2}
#flowStudio .flow-edge-label{max-width:170px;padding:5px 9px;border-radius:20px;font-weight:500}
#flowStudio .flow-label-layer .flow-edge-label.is-selected{border-color:var(--blue);color:var(--blue);background:var(--surface)}
#flowStudio .flow-port-layer,#flowStudio .flow-handle-layer{position:absolute;inset:0;pointer-events:none;z-index:5}
#flowStudio .flow-handle-layer{z-index:6}
#flowStudio .flow-port{position:absolute;width:22px;height:22px;transform:translate(-50%,-50%);border:0;padding:0;background:transparent;pointer-events:auto;cursor:crosshair;touch-action:none;border-radius:50%}
#flowStudio .flow-port:after{content:'';position:absolute;inset:6px;border:2px solid var(--page-muted);background:var(--surface);border-radius:50%;transition:background .12s,transform .12s,border-color .12s}
#flowStudio .flow-port:hover:after,#flowStudio .flow-port:focus-visible:after,#flowStudio .flow-port.is-port-target:after{background:var(--blue);border-color:var(--blue);transform:scale(1.35);box-shadow:0 0 0 4px var(--accent-soft)}
#flowStudio .flow-port:disabled{pointer-events:none;opacity:.35}
#flowStudio.is-connecting .flow-port:after{border-color:var(--blue)}
#flowStudio .flow-connector-handle{position:absolute;width:22px;height:22px;transform:translate(-50%,-50%);padding:0;border:2px solid var(--blue);border-radius:50%;background:var(--surface);color:var(--blue);box-shadow:0 0 0 4px var(--accent-soft);font-size:13px;line-height:16px;cursor:crosshair;pointer-events:auto;touch-action:none;font-weight:700}
#flowStudio .flow-connector-handle:hover{background:var(--blue);color:var(--accent-text)}
#flowStudio .flow-draft-path{fill:none;stroke:var(--blue);stroke-width:2.5;stroke-dasharray:7 5;stroke-linecap:round;pointer-events:none}
#flowStudio .flow-draft-path.has-target{stroke:var(--green);stroke-dasharray:none}
#flowStudio .flow-draft-path[hidden]{display:none}
#flowStudio .flow-selection-bar{display:flex;gap:10px;align-items:center;min-height:46px;padding:9px 18px;border-bottom:1px solid var(--line);background:var(--surface-alt);color:var(--muted);font-size:11px}
#flowStudio .flow-selection-text{flex:1;line-height:1.6}
#flowStudio .flow-selection-bar [hidden]{display:none}
#flowStudio .flow-test-body{grid-template-columns:minmax(175px,.9fr) minmax(0,1fr)}
#flowStudio .flow-test-section-title{display:block;margin:0 0 8px;color:var(--muted);font-size:10px;letter-spacing:.04em;font-weight:700}
#flowStudio .flow-manual-test{border-top:1px solid var(--line);padding-top:12px;margin-top:16px}
#flowStudio .flow-next-button{width:100%;justify-content:center}
#flowStudio .flow-next-button small{font-size:9px;opacity:.75;font-weight:400}
#flowStudio .flow-manual-test p{margin:8px 0 0;font-size:10px;line-height:1.6}
#flowStudio .flow-branch-picker{margin-top:12px;padding:10px;border:1px solid var(--accent-line);border-radius:10px;background:var(--accent-soft);display:flex;gap:7px;flex-direction:column}
#flowStudio .flow-branch-picker>strong{font-size:11px;margin-bottom:2px;color:var(--ink)}
#flowStudio .flow-branch-option{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 8px;padding:9px;border:1px solid var(--line);border-radius:8px;background:var(--surface);text-align:left;color:var(--ink);cursor:pointer;font-family:inherit}
#flowStudio .flow-branch-option:hover{border-color:var(--blue)}
#flowStudio .flow-branch-option>span{font-size:11px;font-weight:600}
#flowStudio .flow-branch-option small{grid-column:1;font-size:9px;color:var(--muted);line-height:1.5}
#flowStudio .flow-branch-option .icon{grid-column:2;grid-row:1/3;align-self:center;width:13px;color:var(--blue)}
#flowStudio .flow-event-btn:disabled{opacity:.5;cursor:wait}
#flowStudio .flow-trace .flow-trace-manual{color:var(--blue)}
@media(max-width:760px){#flowStudio .flow-events{margin-top:18px}#flowStudio .flow-selection-bar{flex-wrap:wrap}#flowStudio .flow-selection-text{flex-basis:100%}#flowStudio .flow-selection-bar .btn{font-size:10px}}

/* Keep labels attached to short arrow segments without covering node contents. */
#flowStudio .flow-canvas{background-image:radial-gradient(circle,color-mix(in srgb,var(--page-muted) 25%,transparent) .8px,transparent 1px);background-size:22px 22px}
#flowStudio .flow-edge-layer .flow-connection .flow-label-leader{stroke:var(--page-muted);stroke-width:1;stroke-dasharray:2 4;opacity:.42;pointer-events:none}
#flowStudio .flow-edge-layer .flow-connection .flow-label-anchor{fill:var(--page-muted);stroke:var(--bg);stroke-width:1.5;opacity:.8;pointer-events:none}

#flowStudio .flow-next-button small{color:inherit}
/* Execution checkpoints are separate from editable graph history. */
#flowStudio .flow-history{padding:0;overflow:hidden}
#flowStudio .flow-history .panel-head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
#flowStudio .flow-history-body{padding:16px 18px}
#flowStudio .flow-history-body>p{font-size:11px;color:var(--muted);line-height:1.8;margin:0 0 15px}
#flowStudio .flow-history-list{display:flex;gap:10px;overflow-x:auto;padding:3px 2px 9px}
#flowStudio .flow-history-item{display:flex;align-items:center;gap:9px;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface-alt);flex:none;min-width:230px}
#flowStudio .flow-history-item.is-current{border-color:var(--accent);background:var(--accent-soft)}
#flowStudio .flow-history-number{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line);color:var(--accent);font-size:10px}
#flowStudio .flow-history-item>div{flex:1;min-width:0}
#flowStudio .flow-history-item strong{display:block;font-size:12px;max-width:145px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#flowStudio .flow-history-item small{display:block;font-size:10px;color:var(--muted);margin-top:4px}
#flowStudio .flow-history-item .btn{padding:5px 7px;font-size:10px}
#flowStudio .flow-editor-top{flex-wrap:wrap}
#flowStudio .flow-tools{justify-content:flex-end;max-width:100%}
@media(max-width:760px){#flowStudio .flow-tools{justify-content:flex-start}#flowStudio .flow-history-body{padding:13px}}
/* Ports appear only while explicitly creating or reconnecting a link. */
#flowStudio .flow-port{visibility:hidden;pointer-events:none}
#flowStudio.is-linking .flow-port:not(:disabled),#flowStudio.is-connecting .flow-port:not(:disabled){visibility:visible;pointer-events:auto}
#flowStudio.is-linking .flow-scroll{outline:1px solid var(--accent-line);outline-offset:-1px}
#flowStudio .flow-entry-selector{display:flex;align-items:center;gap:8px;min-width:0;color:var(--muted);font-size:11px}
#flowStudio .flow-entry-selector>span{white-space:nowrap}
#flowStudio .flow-entry-selector .input{width:160px;min-width:0;max-width:100%;font-size:11px;padding:8px 10px}
@media(max-width:620px){#flowStudio .flow-entry-selector{flex-basis:100%;width:100%}#flowStudio .flow-entry-selector .input{flex:1;width:auto}}

#flowStudio .heading-actions{flex-wrap:wrap;justify-content:flex-end;max-width:100%}
#flowStudio .page-heading{flex-wrap:wrap}
@media(max-width:620px){#flowStudio .heading-actions{justify-content:flex-start}}