.flowEditor{position:relative;display:flex;flex-direction:column;min-width:0;height:100%;min-height:420px;gap:4px;color:#d9e5f2}
.flowToolbar{display:flex;align-items:center;gap:6px;padding:4px}.flowToolbar select{flex:1;min-width:90px}.flowToolbar button,.flowToolbar select,.flowContext button{font:inherit;border:1px solid #3b4b61;border-radius:5px;background:#213047;color:#e4effa;padding:6px 10px}
.flowNodePicker{position:relative;flex:1 1 190px;min-width:170px}.flowNodePickerTrigger{display:grid!important;width:100%;min-height:36px;grid-template-columns:30px minmax(0,1fr) 14px;align-items:center;gap:8px;text-align:left}.flowNodePickerIcon,.flowNodePickerOptionIcon{display:grid;place-items:center;box-sizing:border-box;border:1px solid currentColor;border-radius:8px;background:#eef4fa}.flowNodePickerIcon{width:28px;height:28px}.flowNodePickerOptionIcon{width:36px;height:36px}.flowNodePickerIcon .factNodeTypeIcon{width:22px;height:22px}.flowNodePickerOptionIcon .factNodeTypeIcon{width:28px;height:28px}.flowNodePickerValue,.flowNodePickerOptionLabel,.flowNodePickerOptionDescription{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.flowNodePickerValue{font-weight:650}.flowNodePickerChevron{color:#a9bbcf;text-align:center;transition:transform .14s ease}.flowNodePicker.is-open .flowNodePickerChevron{transform:rotate(180deg)}.flowNodePicker.is-open .flowNodePickerTrigger,.flowNodePickerTrigger:focus-visible{border-color:#69aee7;outline:none;box-shadow:0 0 0 3px #4595d52b}.flowNodePickerList{position:absolute;z-index:40;top:calc(100% + 4px);right:0;display:grid;width:max(100%,310px);max-height:min(520px,calc(100vh - 120px));gap:4px;overflow-y:auto;overscroll-behavior:contain;box-sizing:border-box;padding:6px;border:1px solid #c8d3df;border-radius:9px;background:#fff;box-shadow:0 14px 34px #0f172a30}.flowNodePickerList[hidden]{display:none}.flowToolbar .flowNodePickerOption{display:grid;width:100%;height:auto;min-height:54px;grid-template-columns:38px minmax(0,1fr);align-items:center;gap:10px;padding:7px 9px;border:1px solid transparent;border-radius:7px;background:transparent;color:#1d2939;text-align:left;box-shadow:none}.flowToolbar .flowNodePickerOption:hover,.flowToolbar .flowNodePickerOption:focus-visible{border-color:#0071e32e;outline:none;background:#0071e312;color:#0068d1}.flowToolbar .flowNodePickerOption.is-selected{border-color:#0071e338;background:#0071e31a;color:#0068d1}.flowNodePickerOptionText{display:flex;min-width:0;flex-direction:column;justify-content:center;gap:3px;line-height:normal}.flowNodePickerOptionLabel{font-size:13px;font-weight:700;line-height:1.2}.flowNodePickerOptionDescription{display:block;color:#667085;font-size:11px;font-weight:500;line-height:1.3}.flowNodePickerOption:hover .flowNodePickerOptionDescription,.flowNodePickerOption:focus-visible .flowNodePickerOptionDescription,.flowNodePickerOption.is-selected .flowNodePickerOptionDescription{color:#3f6f9c}.flowNodePickerIcon[data-kind=inPort],.flowNodePickerOptionIcon[data-kind=inPort],.flowNodePickerIcon[data-kind=sourceSequence],.flowNodePickerOptionIcon[data-kind=sourceSequence]{color:#177245;background:#e4f5eb}.flowNodePickerIcon[data-kind=outPort],.flowNodePickerOptionIcon[data-kind=outPort],.flowNodePickerIcon[data-kind=entitySink],.flowNodePickerOptionIcon[data-kind=entitySink]{color:#a33a2d;background:#fbe9e6}.flowNodePickerIcon[data-kind=process],.flowNodePickerOptionIcon[data-kind=process]{color:#9a5b00;background:#fff1cf}.flowNodePickerIcon[data-kind=recovery],.flowNodePickerOptionIcon[data-kind=recovery]{color:#6b46a5;background:#f0e8ff}.flowNodePickerIcon[data-kind=join],.flowNodePickerOptionIcon[data-kind=join],.flowNodePickerIcon[data-kind=fork],.flowNodePickerOptionIcon[data-kind=fork],.flowNodePickerIcon[data-kind=entityRouter],.flowNodePickerOptionIcon[data-kind=entityRouter]{color:#176aa6;background:#e4f2fd}.flowNodePickerIcon[data-kind=syncroJudgment],.flowNodePickerOptionIcon[data-kind=syncroJudgment]{color:#7c4d00;background:#fff0d5}.flowNodePickerIcon[data-kind=sensor],.flowNodePickerOptionIcon[data-kind=sensor]{color:#08788c;background:#e1f6f8}.flowNodePickerIcon[data-kind=Palletizing],.flowNodePickerOptionIcon[data-kind=Palletizing],.flowNodePickerIcon[data-kind=DePalletizing],.flowNodePickerOptionIcon[data-kind=DePalletizing]{color:#8055a6;background:#f3eafa}
#selectionInspectorPanel .flowToolbar .flowNodePickerTrigger{height:38px;min-height:38px;padding:4px 9px}
#selectionInspectorPanel .flowToolbar .flowNodePickerOption{height:auto;min-height:54px;padding:7px 9px}
.flowViewport{flex:1;min-height:340px;overflow:hidden;background:#121c2b;position:relative;touch-action:none;border-radius:6px}.flowScene{position:absolute;left:0;top:0;transform-origin:0 0;width:1px;height:1px}.flowWires{position:absolute;overflow:visible;width:1px;height:1px;pointer-events:none}.flowWire{stroke:#789ac1;stroke-width:2;fill:none;pointer-events:stroke;cursor:pointer}.flowWire:hover{stroke:#f4bc78;stroke-width:4}
.flowNode{box-sizing:border-box;position:absolute;width:230px;min-height:112px;background:#223046;border:1px solid #435873;border-radius:8px;box-shadow:0 3px 8px #0004}.flowNode.is-occupied{border-color:#63c7c7}.flowNodeHeader{padding:7px 10px;font-size:13px;font-weight:600;border-bottom:1px solid #405169;cursor:grab;user-select:none}.flowNodeContent{padding:7px 9px;display:flex;flex-direction:column;gap:7px}.flowNodeContent:empty{padding:3px}.flowTime{display:flex;align-items:center;gap:7px}.flowTime input{width:100%;min-width:70px;box-sizing:border-box}.flowNode input,.flowNode select{background:#162235;color:#eff5fc;border:1px solid #576c86;border-radius:4px;padding:5px;font-size:13px;min-width:0;max-width:100%;box-sizing:border-box}.flowNode progress{width:100%;height:6px;accent-color:#60c8c8}.flowNode[data-kind=recovery] progress{accent-color:#c69bfa}.flowNodeIO{display:flex;justify-content:space-between;gap:8px;padding:4px 7px 8px}.flowPorts{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}.flowPorts.outputs{text-align:right}.flowPortRow{display:flex;flex-direction:column;gap:4px}.flowPort{background:none;color:#c9dbee;border:0;font:11px sans-serif;cursor:crosshair;padding:2px 0;white-space:nowrap;text-align:inherit}.flowPorts.inputs .flowPort:before{content:'●';color:#83b4d9;margin-right:5px}.flowPorts.outputs .flowPort:after{content:'●';color:#78d3bf;margin-left:5px}.flowNode.is-flipped .flowNodeIO{flex-direction:row-reverse}.flowNodeReason{font-size:11px;color:#f2c58e;padding:0 8px 6px;overflow-wrap:anywhere}.flowNodeReason:empty{display:none}.flowNotice{font-size:12px;line-height:1.45;color:#adc2d9;max-height:70px;overflow:auto;padding:2px 6px;border-radius:6px;transition:background .15s,border-color .15s,box-shadow .15s}.flowNotice.is-error{position:absolute;top:8px;left:10px;z-index:10;box-sizing:border-box;max-width:calc(100% - 20px);max-height:none;overflow:visible;color:#ff8a80;font-size:12px;font-weight:500;background:transparent;padding:0;border:0;border-radius:0;box-shadow:none;white-space:pre-line;overflow-wrap:anywhere;line-height:1.45;pointer-events:none}.flowNotice.is-error::before{content:none}.flowContext{position:absolute;z-index:20;display:flex;flex-direction:column;background:#172234;border:1px solid #51627b;padding:4px;border-radius:7px;box-shadow:0 4px 18px #0006;min-width:150px}.flowContext button{text-align:left;border:0;background:transparent}.flowContext button:hover{background:#334862}.flowContext button:disabled{opacity:.35}
.entityInspectorTabs{display:flex;gap:5px;margin-bottom:5px}.entityInspectorTab{padding:7px 12px;border:0;background:transparent;color:#a9bfd8;cursor:pointer}.entityInspectorTab.is-active{color:#e4f8ff;border-bottom:2px solid #69c7d2}.entityInspectorTabPanel{min-width:0;flex:1}.entityInspectorTabPanel[hidden]{display:none!important}.selectionInspectorRoot[data-entity-tab] .selectionInspectorLayout{display:block}.selectionInspectorRoot[data-entity-tab=flow]{padding:4px}.selectionInspectorMain.flowDetailsMain{min-width:0;display:flex;flex-direction:column;height:100%;gap:0}.flowDetailsMain .entityInspectorTabPanel[data-tab=flow]{height:calc(100% - 40px)}.flowAdvanced{padding:10px;display:flex;flex-direction:column;gap:10px}.flowAdvanced input{width:100%;box-sizing:border-box}.flowSourceRow{display:flex;gap:5px;margin:6px 0}.flowSourceRow select{flex:1;min-width:0}.flowSourceRow input{width:75px}.flowSyncGroups{font-size:12px;display:flex;flex-direction:column;gap:4px}
.flowSourceRows{display:flex;flex-direction:column;gap:4px}.flowSourceEmpty{margin:4px 0 10px;color:#65758a;font-size:12px;line-height:1.5}.flowSourceField{display:flex;flex-direction:column;gap:5px;margin-top:12px;color:#526176;font-size:12px}.flowSourceRepeat{display:flex;align-items:center;gap:8px;margin-top:10px;color:#334155;font-size:13px}.flowSourceRepeat input{width:auto;min-height:0}
.flowNode[data-kind=sourceSequence]{width:360px}.flowNode[data-kind=sourceSequence] .flowNodeContent{padding:10px}.flowSourceCompact{border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;overflow:visible!important}.flowSourceCompact .selectionInspectorSection{padding:0!important}.flowSourceCompact .flowSourceRow{align-items:center}.flowSourceCompact .flowSourceRow button,.flowSourceCompact>.selectionInspectorSection>button{flex:0 0 auto;min-height:32px;padding:5px 9px}.flowSourceCompact :is(input,select){min-height:34px!important;padding:6px 8px!important;font-size:12px!important}.flowNode[data-kind=sourceSequence] .flowNodeIO{border-top:1px solid #e5eaf0;border-bottom:1px solid #e5eaf0}.flowNode[data-kind=sourceSequence] .flowPorts.inputs:empty{display:none}.flowNode[data-kind=sourceSequence] .flowPorts.outputs{margin-left:auto}

.flowWire.is-completion{stroke:#b99cec;stroke-dasharray:6 4}.flowNode[data-kind=join] .flowNodeHeader,.flowNode[data-kind=fork] .flowNodeHeader{background:#30435a}
.flowNode[data-kind=sensor] .flowNodeHeader{background:#e7f0fb}.flowNode[data-kind=sensor] .flowNodeBadge{background:#cfe2f7;color:#2f5f8d}.flowNode[data-kind=sensor] .flowLive{min-height:76px}

.flowWire{pointer-events:none}.flowWireHit{fill:none;stroke:transparent;stroke-width:16;pointer-events:stroke;cursor:pointer;vector-effect:non-scaling-stroke}.flowWireHit:focus{outline:none;stroke:#4ba9eb55}.flowWire.is-selected{stroke:#ed9a35;stroke-width:4}.flowWire.is-preview{stroke:#338ddd;stroke-dasharray:6 4;stroke-width:3;pointer-events:none}
#selectionInspectorPanel .flowNode .flowPort{touch-action:none;user-select:none;cursor:crosshair;min-height:24px;height:24px;line-height:20px;border-radius:4px}
#selectionInspectorPanel .flowNode .flowPort:is(:hover,:focus-visible,.is-connect-target){background:#dceeff!important;outline:1px solid #76a9d3;outline-offset:1px}
#selectionInspectorPanel .flowNode .flowPort.is-connecting{background:#b9dcfb!important;outline:2px solid #338ddd}
.flowNode.is-flipped .flowPorts.inputs{text-align:right}.flowNode.is-flipped .flowPorts.outputs{text-align:left}
#selectionInspectorPanel .flowNode.is-flipped .flowPorts.inputs .flowPort:before,#selectionInspectorPanel .flowNode.is-flipped .flowPorts.outputs .flowPort:after{content:none}

/* Use the main canvas vocabulary: compact state-colored headers and round edge ports. */
#selectionInspectorPanel .flowViewport{background-color:#f5f7fb;background-image:linear-gradient(#dce3ed55 1px,transparent 1px),linear-gradient(90deg,#dce3ed55 1px,transparent 1px);background-size:24px 24px}
#selectionInspectorPanel .flowNode{border:1px solid #aab8c9;border-radius:5px;background:#fff;box-shadow:0 2px 5px #33445b18;overflow:visible}
#selectionInspectorPanel .flowNode .flowNodeHeader{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 9px;border-radius:4px 4px 0 0;background:#f3f1d8;border-bottom:1px solid #dce3eb;min-height:30px}
.flowNodeTitle{font-size:14px;font-weight:700;min-width:0}
.flowNodeBadge{font-size:9px;letter-spacing:.03em;border-radius:4px;padding:3px 5px;color:#685900;background:#ffef8a;white-space:nowrap}
#selectionInspectorPanel .flowNode[data-state=PROCESS] .flowNodeHeader,#selectionInspectorPanel .flowNode[data-state=READY] .flowNodeHeader,#selectionInspectorPanel .flowNode[data-state=DONE] .flowNodeHeader{background:#dcefe2}
#selectionInspectorPanel .flowNode[data-state=RECOVERY] .flowNodeHeader{background:#dcedf9}
#selectionInspectorPanel .flowNode[data-state=WAIT] .flowNodeHeader{background:#fff0d8}
#selectionInspectorPanel .flowNode[data-state=ERROR] .flowNodeHeader{background:#fbe0df}
.flowNode[data-state=PROCESS] .flowNodeBadge,.flowNode[data-state=READY] .flowNodeBadge,.flowNode[data-state=DONE] .flowNodeBadge{background:#bce6cc;color:#1a6741}
.flowNode[data-state=RECOVERY] .flowNodeBadge{background:#c3e5fc;color:#1f628b}.flowNode[data-state=WAIT] .flowNodeBadge{background:#ffe1a3;color:#865511}.flowNode[data-state=ERROR] .flowNodeBadge{background:#f8c3bf;color:#8d2821}
.flowNodeIO{padding:5px 10px;gap:18px;align-items:flex-start}.flowPorts{gap:3px}.flowPortRow{position:relative}
#selectionInspectorPanel .flowNode .flowPort{position:relative;box-sizing:border-box;display:flex;align-items:center;min-height:32px;height:32px;width:calc(100% + 26px);line-height:1.25;border:0!important;border-radius:4px;padding:4px 18px;background:transparent!important;font-size:11px;touch-action:none}
#selectionInspectorPanel .flowNode .flowPorts.inputs .flowPort{margin-left:-26px;justify-content:flex-start;padding-left:27px;text-align:left}
#selectionInspectorPanel .flowNode .flowPorts.outputs .flowPort{margin-right:-26px;justify-content:flex-end;padding-right:27px;text-align:right}
#selectionInspectorPanel .flowNode.is-flipped .flowPorts.inputs .flowPort{margin-left:0;margin-right:-26px;justify-content:flex-end;padding-left:18px;padding-right:27px;text-align:right}
#selectionInspectorPanel .flowNode.is-flipped .flowPorts.outputs .flowPort{margin-right:0;margin-left:-26px;justify-content:flex-start;padding-right:18px;padding-left:27px;text-align:left}
#selectionInspectorPanel .flowNode .flowPorts .flowPort::before,#selectionInspectorPanel .flowNode .flowPorts .flowPort::after{content:none!important}
.flowPortDot{position:absolute;left:8px;top:50%;transform:translateY(-50%);width:14px;height:14px;border-radius:50%;border:2px solid #fff;box-sizing:border-box;background:#6998c8;box-shadow:0 0 0 1px #51779f;pointer-events:none}
.flowPorts.outputs .flowPortDot{left:auto;right:8px;background:#529f8e;box-shadow:0 0 0 1px #397b6e}
.flowNode.is-flipped .flowPorts.inputs .flowPortDot{left:auto;right:8px}.flowNode.is-flipped .flowPorts.outputs .flowPortDot{right:auto;left:8px}
.flowPortLabel{pointer-events:none;overflow:hidden;text-overflow:ellipsis}.flowPort[data-ready=true] .flowPortDot{background:#27ae68;box-shadow:0 0 0 2px #b5ebce}
#selectionInspectorPanel .flowNode .flowPort:is(:hover,:focus-visible,.is-drop-target){background:#e5f1ff!important;outline:2px solid #5b9ee1;outline-offset:0}
#selectionInspectorPanel .flowNode .flowPort.is-connect-target{outline:0;background:#f1f7fd!important}
#selectionInspectorPanel .flowNode .flowPort.is-drop-target{outline:2px solid #2b83d2;background:#cee7ff!important}
.flowPort.is-drop-target .flowPortDot,.flowPort.is-connecting .flowPortDot{box-shadow:0 0 0 4px #65b4fc77;background:#2489dd}
.flowLive{border-top:1px solid #e5eaf0;padding:7px 9px;min-height:42px;display:flex;flex-direction:column;gap:5px;font-size:11px;color:#324962}
.flowNode[data-kind=process] .flowLive,.flowNode[data-kind=recovery] .flowLive{min-height:84px}
.flowLiveRow{display:flex;justify-content:space-between;gap:9px;line-height:1.3}.flowLiveLabel{color:#6d7b8b;flex-shrink:0}.flowLiveValue{text-align:right;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}.flowLiveRow[data-ready=true] .flowLiveValue{color:#19804a;font-weight:600}.flowLiveRow[data-ready=false] .flowLiveValue{color:#977136}
#selectionInspectorPanel .flowNode .flowTime input{flex:1;width:65px;min-width:40px}.flowTimeLabel{font-size:11px;color:#697c90}
.flowWire{vector-effect:non-scaling-stroke}.flowWireHit{stroke-width:20}.flowEditor:focus{outline:none}
.flowZoomReadout{font:11px ui-monospace,monospace;min-width:38px;text-align:center;color:#58708b}
.flowNotice{max-height:120px;white-space:pre-line}
#selectionInspectorPanel .flowEditor.is-expanded{position:fixed;inset:12px;z-index:10000;width:auto;height:auto;box-sizing:border-box;padding:12px;border:1px solid #a9bbd0;border-radius:9px;background:#f7f9fc;box-shadow:0 0 0 20px #26344b66,0 8px 40px #152b4f44}
#selectionInspectorPanel .flowEditor.is-expanded .flowViewport{min-height:0}
@media(max-width:760px){.flowToolbar{flex-wrap:wrap}.flowToolbar select{flex-basis:130px}.flowNodePicker{flex-basis:170px}#selectionInspectorPanel .flowEditor.is-expanded{inset:4px;padding:6px}}

.nodeDefinitionEditorOverlay{position:fixed;inset:0;z-index:12000;display:grid;place-items:center;padding:20px;background:rgba(15,23,42,.58);box-sizing:border-box}
.nodeDefinitionEditor{display:grid;grid-template-rows:auto auto minmax(360px,1fr) auto;width:min(1180px,96vw);height:min(860px,94vh);min-height:620px;overflow:hidden;border:1px solid #cbd5e1;border-radius:16px;background:#f7f9fc;color:#172033;box-shadow:0 28px 80px rgba(15,23,42,.35)}
.nodeDefinitionEditorHeader{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 18px;border-bottom:1px solid #dce3eb;background:#fff}
.nodeDefinitionEditorHeader span{display:block;color:#64748b;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.nodeDefinitionEditorHeader h2{margin:2px 0 0;font-size:20px}.nodeDefinitionEditorHeader button,.nodeDefinitionEditorFooter button{min-height:36px;padding:7px 14px;border:1px solid #c7d1dd;border-radius:9px;background:#fff;color:#27364a;font:inherit;cursor:pointer}.nodeDefinitionEditorFooter button.is-primary{border-color:#1f6fb2;background:#287fca;color:#fff}.nodeDefinitionEditorFooter button:disabled{opacity:.55;cursor:default}
.nodeDefinitionEditorSettings{display:grid;grid-template-columns:minmax(150px,.7fr) minmax(180px,1fr) minmax(180px,1fr) minmax(220px,1.5fr);gap:10px;padding:12px 18px;border-bottom:1px solid #dce3eb;background:#f9fbfd}.nodeDefinitionField{display:flex;min-width:0;flex-direction:column;gap:5px;color:#526176;font-size:11px;font-weight:650}.nodeDefinitionField input,.nodeDefinitionField textarea{box-sizing:border-box;width:100%;min-height:36px;padding:7px 9px;border:1px solid #c8d3df;border-radius:8px;background:#fff;color:#172033;font:13px system-ui,sans-serif}.nodeDefinitionField textarea{height:36px;resize:vertical}.nodeDefinitionField input[readonly]{background:#eef2f6;color:#66758a}
.nodeDefinitionEditorCanvas{min-height:0;padding:12px;overflow:hidden}.nodeDefinitionEditorCanvas>.flowEditor{height:100%;min-height:0}.nodeDefinitionUnsupported{display:grid;height:100%;place-items:center;padding:30px;border:1px dashed #b8c5d3;border-radius:12px;background:#fff;color:#56677c;text-align:center}
.nodeDefinitionEditorFooter{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 18px;border-top:1px solid #dce3eb;background:#fff}.nodeDefinitionEditorFooter>div:last-child{display:flex;gap:8px}.nodeDefinitionEditorStatus{min-width:0;color:#5a697d;font-size:12px;line-height:1.4}
@media(max-width:800px){.nodeDefinitionEditorOverlay{padding:4px}.nodeDefinitionEditor{width:100%;height:100%;min-height:0;border-radius:8px}.nodeDefinitionEditorSettings{grid-template-columns:1fr 1fr}.nodeDefinitionEditorFooter{align-items:flex-start;flex-direction:column}.nodeDefinitionEditorCanvas{padding:6px}}