.diagram-editor{display:flex;flex-direction:column;background:#fafbf9;color:#24332e;font-family:var(--font-body,Arial,sans-serif);min-height:700px}
.code-editor.diagram-editor{position:relative;inset:auto;height:auto}.editor-body:has(.diagram-editor){height:auto;min-height:700px}
.diagram-editor [hidden]{display:none!important}
.flow-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid #d8e0d6;background:#f4f6ef}
.flow-toolbar strong{display:block;font-size:14px}.flow-toolbar span{display:block;margin-top:5px;font-size:11px;color:#627367}
.flow-file-actions{display:flex;gap:6px;flex-wrap:wrap}
.flow-controls{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;padding:10px 14px;border-bottom:1px solid #d8e0d6}
.flow-views,.flow-tools{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.flow-views [aria-pressed=true]{background:#193c32;color:white;opacity:1}.flow-views span{font-size:10px;color:#617169}
.flow-tools button,.flow-zoom button{border:1px solid #cdd7cf;border-radius:5px;background:#fff;color:#27483b;padding:6px 9px;cursor:pointer;font:11px Arial,sans-serif;min-height:30px}
.flow-tools button:disabled{opacity:.35;cursor:default}.flow-tools button:hover:not(:disabled),.flow-zoom button:hover{background:#e9f1e4}
.flow-hint{font-size:11px;padding:9px 16px;margin:0;color:#627367;border-bottom:1px solid #e5eae3}
.flow-stage{position:relative;height:530px;min-height:300px;flex:1}
.flow-canvas{height:100%;width:100%;overflow:auto;overscroll-behavior:contain;touch-action:none;background-color:#fff;background-image:radial-gradient(#cdd7d2 .8px,transparent .8px);background-size:18px 18px;cursor:grab}
.flow-canvas.is-panning{cursor:grabbing;user-select:none}.flow-canvas svg{display:block;margin:0 auto;max-width:none}
.flow-edge{fill:none;stroke:#687875;stroke-width:1.6}.flow-canvas marker path{fill:#687875}
.flow-node{cursor:grab;outline:none;touch-action:none;user-select:none}.flow-node>rect,.flow-node>polygon{stroke-width:1.6;stroke:#a58d3c;fill:#fff0ab}
.flow-canvas.is-dragging,.flow-canvas.is-dragging *{cursor:grabbing!important}
.flow-node.is-drag-source{opacity:.35}.flow-canvas.is-readonly .flow-node{cursor:default;touch-action:auto}
.flow-insert.is-drop-target circle{fill:#b7ee86;stroke:#3b7b27;stroke-width:4}
.flow-insert.is-drop-invalid circle{fill:#ffd6d6;stroke:#b83e3e;stroke-width:4}
.flow-drag-preview{position:fixed;z-index:1100;max-width:260px;padding:12px 16px;border:2px solid #517d37;border-radius:8px;background:#f1fae7;box-shadow:0 6px 24px #14242133;color:#233d2e;font:12px/1.6 Consolas,monospace;pointer-events:none;white-space:normal;overflow-wrap:anywhere}
.flow-drag-preview.is-invalid{border-color:#b83e3e;background:#fff1ef}
.flow-inner{fill:none;stroke:#8369ac;stroke-width:1.4}
.flow-call>rect{fill:#e9dbfc;stroke:#9878bd}.flow-declare>rect{fill:#fff1a8;stroke:#b79c45}.flow-assign>rect{fill:#fff3c0;stroke:#b79c45}
.flow-if>polygon{fill:#fbd9df;stroke:#bd8090}.flow-while>polygon,.flow-for>polygon{fill:#ffe0b2;stroke:#bb9357}
.flow-do>polygon{fill:#ffe0b2;stroke:#bb9357}.flow-input>polygon{fill:#cde8fc;stroke:#6a9dbd}.flow-output>polygon{fill:#d8efbd;stroke:#87a765}
.flow-comment>rect{fill:#f4f6f4;stroke:#91a198;stroke-dasharray:5 4}
.flow-node:hover>rect,.flow-node:hover>polygon,.flow-node:focus>rect,.flow-node:focus>polygon{stroke:#254d9a;stroke-width:3}
.flow-node.is-selected>rect,.flow-node.is-selected>polygon{stroke:#355fc5;stroke-width:3;filter:drop-shadow(0 2px 3px #355fc533)}
.flow-node.is-current>rect,.flow-node.is-current>polygon{stroke:#278742;stroke-width:4;fill:#ccf3b2}
.flow-node text,.flow-terminal text{pointer-events:none;text-anchor:middle;font-family:"Cascadia Code",Consolas,monospace;fill:#293932}
.flow-node-kind{font-size:10px;font-weight:700;opacity:.65;text-transform:uppercase;letter-spacing:1px}.flow-node-caption{font-size:12px}
.flow-branch-label{font:11px Arial,sans-serif;fill:#51675a;text-anchor:middle}
.flow-terminal rect{fill:#d8c6f1;stroke:#8c74aa;stroke-width:1.5}.flow-terminal text{font-size:14px;font-weight:bold}
.flow-insert{cursor:pointer;outline:none}.flow-insert circle{fill:#fff;stroke:#9bb2a6;stroke-width:1.2}.flow-insert path{stroke:#769486;stroke-width:1.5;pointer-events:none}
.flow-insert:hover circle,.flow-insert:focus circle{fill:#dceccd;stroke:#517d37;stroke-width:2}
.flow-zoom{position:absolute;right:12px;bottom:12px;display:flex;align-items:center;gap:4px;padding:5px;border:1px solid #d9e1d6;border-radius:8px;background:#f9fcf5ee;box-shadow:0 2px 12px #183a2312}
.flow-zoom output{min-width:38px;font:10px monospace;text-align:center}
.flow-code{height:530px;min-height:300px;position:relative;font:13px/1.6 monospace}
.flow-code .ace_tooltip{pointer-events:none!important}
.flow-status{margin:0;padding:10px 16px;border-top:1px solid #d8e0d6;font-size:11px;line-height:1.5;color:#617169}
.flow-status.error{color:#a33535;background:#fff0ee}
dialog.flow-dialog{position:fixed;inset:0;margin:auto;border:1px solid #c7d4c9;border-radius:12px;padding:26px;width:min(660px,calc(100vw - 24px));max-width:none;max-height:90dvh;overflow:auto;background:#fcfdf9;box-shadow:0 20px 80px #14242155;color:#233d2e;font-family:Arial,sans-serif}
.flow-dialog::backdrop{background:#14242180}.flow-dialog h2{font-size:22px;margin:0 25px 10px 0}.flow-dialog>p{font-size:12px;line-height:1.7;margin:0 0 18px;color:#617169}
.flow-dialog-close{position:absolute;top:12px;right:15px;border:0;background:transparent;color:#617169;font-size:24px;cursor:pointer}
.flow-shape-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.flow-shape-picker button{border:1px solid #d7dfd2;border-radius:8px;display:flex;flex-direction:column;align-items:center;text-align:center;padding:15px 10px;background:white;cursor:pointer;gap:7px}
.flow-shape-picker button:hover,.flow-shape-picker button:focus{border-color:#718fbd;background:#f0f5ff}
.flow-shape-picker strong{font-size:12px}.flow-shape-picker small{font-size:10px;line-height:1.5;color:#67776b}
.flow-shape-icon{display:block;width:40px;height:26px;border:1px solid #aa9240;border-radius:4px;background:#fff0ab;margin:4px}
.flow-pick-call .flow-shape-icon{background:#e9dbfc;border-color:#9878bd;border-left-width:5px;border-right-width:5px}
.flow-pick-if .flow-shape-icon{background:#fbd9df;border-color:#bd8090;transform:rotate(45deg);width:23px;height:23px}
.flow-pick-while .flow-shape-icon,.flow-pick-for .flow-shape-icon{background:#ffe0b2;border-color:#bb9357;transform:rotate(45deg);width:23px;height:23px}
.flow-pick-do .flow-shape-icon{background:#ffe0b2;border-color:#bb9357;transform:rotate(45deg);width:23px;height:23px}
.flow-pick-input .flow-shape-icon{background:#cde8fc;border-color:#6a9dbd;transform:skewX(-15deg)}.flow-pick-output .flow-shape-icon{background:#d8efbd;border-color:#87a765;transform:skewX(-15deg)}
.flow-pick-comment .flow-shape-icon{background:#f4f6f4;border:1px dashed #91a198}
.flow-field{display:flex;flex-direction:column;gap:6px;font-size:12px;margin:13px 0;font-weight:bold}
.flow-field input,.flow-field select,.flow-api-picker input{width:100%;box-sizing:border-box;border:1px solid #c6d3c8;border-radius:5px;padding:10px;background:white;color:#233d2e;font:13px/1.5 "Cascadia Code",Consolas,monospace}
.flow-field input:focus{outline:2px solid #718fbd;outline-offset:1px}
.flow-api-picker{margin-top:18px;border:1px solid #d7dfd2;border-radius:6px;padding:12px}
.flow-api-picker summary{font-size:12px;font-weight:bold;cursor:pointer}.flow-api-picker input{margin:12px 0;font-size:12px}
.flow-api-list{max-height:180px;overflow:auto;display:grid;gap:5px}
.flow-api-list button{display:grid;grid-template-columns:1fr auto;gap:4px;border:1px solid #e3e9df;border-radius:5px;padding:8px;text-align:left;background:white;cursor:pointer}
.flow-api-list strong{font:12px monospace}.flow-api-list span{font-size:9px;color:#627367}.flow-api-list small{grid-column:1/-1;font-size:10px;color:#627367}
.flow-api-picker>small{display:block;font-size:10px;line-height:1.7;margin-top:10px;color:#627367}
.flow-form-error{font-size:12px;color:#ad3939;line-height:1.6}.flow-form-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}
.editor-expanded .code-editor.diagram-editor{position:absolute;inset:0;height:100%;min-height:0}
.editor-expanded>.editor-body:has(.diagram-editor){min-height:260px}
.editor-expanded .flow-stage,.editor-expanded .flow-code{flex:1;height:auto;min-height:0}
.editor-expanded .flow-hint{display:none}.editor-expanded .flow-toolbar{padding:8px 16px}.editor-expanded .flow-status{padding:6px 16px}
@media(max-height:850px){
 .editor-expanded:has(.diagram-editor)>.editor-head,.editor-expanded:has(.diagram-editor)>.editor-footer{padding:6px 16px}
 .editor-expanded:has(.diagram-editor)>.console:not(.error){display:none}
 .editor-expanded:has(.diagram-editor)>.execution-indicator{padding:6px 16px;display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:center;flex-shrink:0}
 .editor-expanded:has(.diagram-editor) .execution-heading>.eyebrow{display:none}
 .editor-expanded:has(.diagram-editor) [data-execution-status]{margin:0;font-size:9px}
 .editor-expanded:has(.diagram-editor) .execution-path{grid-column:1/-1;max-height:40px;overflow:auto;margin:0}
 .editor-expanded:has(.diagram-editor) .execution-path:empty{display:none}
 .editor-expanded:has(.diagram-editor)>.step-controls{padding:6px 16px;gap:8px;flex-shrink:0}
 .editor-expanded:has(.diagram-editor)>.step-controls .eyebrow{display:none}
 .editor-expanded:has(.diagram-editor) [data-step-status]{margin:0;font-size:9px}
 .editor-expanded:has(.diagram-editor)>.step-controls .btn{padding:8px 12px;font-size:10px}
 .editor-expanded:has(.diagram-editor)>.editor-policy{font-size:9px;margin:2px 16px}
 .editor-expanded:has(.diagram-editor)>.editor-footer select{padding:7px 10px}
 .editor-expanded:has(.diagram-editor)>.editor-footer .btn{padding:8px 12px}
 .editor-expanded .flow-toolbar{padding:6px 16px}.editor-expanded .flow-toolbar span{display:none}
 .editor-expanded .flow-controls{padding:6px 14px}
}
@media(max-width:700px){.flow-toolbar{align-items:flex-start;flex-direction:column}.flow-stage,.flow-code{height:500px}.flow-controls{gap:10px}.flow-tools{gap:4px}.flow-shape-picker{grid-template-columns:repeat(2,minmax(0,1fr))}.flow-dialog{padding:20px}.flow-api-list button{grid-template-columns:1fr}.flow-zoom{right:6px;bottom:6px}}