.react-flow__container{position:absolute;width:100%;height:100%;top:0;left:0}.react-flow__pane{z-index:1;cursor:-webkit-grab;cursor:grab}.react-flow__pane.selection{cursor:pointer}.react-flow__pane.dragging{cursor:-webkit-grabbing;cursor:grabbing}.react-flow__viewport{transform-origin:0 0;z-index:2;pointer-events:none}.react-flow__renderer{z-index:4}.react-flow__selection{z-index:6}.react-flow__nodesselection-rect:focus,.react-flow__nodesselection-rect:focus-visible{outline:none}.react-flow .react-flow__edges{pointer-events:none;overflow:visible}.react-flow__edge-path,.react-flow__connection-path{stroke:#b1b1b7;stroke-width:1;fill:none}.react-flow__edge{pointer-events:visibleStroke;cursor:pointer}.react-flow__edge.animated path{stroke-dasharray:5;-webkit-animation:dashdraw .5s linear infinite;animation:dashdraw .5s linear infinite}.react-flow__edge.animated path.react-flow__edge-interaction{stroke-dasharray:none;-webkit-animation:none;animation:none}.react-flow__edge.inactive{pointer-events:none}.react-flow__edge.selected,.react-flow__edge:focus,.react-flow__edge:focus-visible{outline:none}.react-flow__edge.selected .react-flow__edge-path,.react-flow__edge:focus .react-flow__edge-path,.react-flow__edge:focus-visible .react-flow__edge-path{stroke:#555}.react-flow__edge-textwrapper{pointer-events:all}.react-flow__edge-textbg{fill:#fff}.react-flow__edge .react-flow__edge-text{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.react-flow__connection{pointer-events:none}.react-flow__connection .animated{stroke-dasharray:5;-webkit-animation:dashdraw .5s linear infinite;animation:dashdraw .5s linear infinite}.react-flow__connectionline{z-index:1001}.react-flow__nodes{pointer-events:none;transform-origin:0 0}.react-flow__node{position:absolute;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:all;transform-origin:0 0;box-sizing:border-box;cursor:-webkit-grab;cursor:grab}.react-flow__node.dragging{cursor:-webkit-grabbing;cursor:grabbing}.react-flow__nodesselection{z-index:3;transform-origin:left top;pointer-events:none}.react-flow__nodesselection-rect{position:absolute;pointer-events:all;cursor:-webkit-grab;cursor:grab}.react-flow__handle{position:absolute;pointer-events:none;min-width:5px;min-height:5px;width:6px;height:6px;background:#1a192b;border:1px solid white;border-radius:100%}.react-flow__handle.connectionindicator{pointer-events:all;cursor:crosshair}.react-flow__handle-bottom{top:auto;left:50%;bottom:-4px;transform:translate(-50%)}.react-flow__handle-top{left:50%;top:-4px;transform:translate(-50%)}.react-flow__handle-left{top:50%;left:-4px;transform:translateY(-50%)}.react-flow__handle-right{right:-4px;top:50%;transform:translateY(-50%)}.react-flow__edgeupdater{cursor:move;pointer-events:all}.react-flow__panel{position:absolute;z-index:5;margin:15px}.react-flow__panel.top{top:0}.react-flow__panel.bottom{bottom:0}.react-flow__panel.left{left:0}.react-flow__panel.right{right:0}.react-flow__panel.center{left:50%;transform:translate(-50%)}.react-flow__attribution{font-size:10px;background:#ffffff80;padding:2px 3px;margin:0}.react-flow__attribution a{text-decoration:none;color:#999}@-webkit-keyframes dashdraw{0%{stroke-dashoffset:10}}@keyframes dashdraw{0%{stroke-dashoffset:10}}.react-flow__edgelabel-renderer{position:absolute;width:100%;height:100%;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.react-flow__edge.updating .react-flow__edge-path{stroke:#777}.react-flow__edge-text{font-size:10px}.react-flow__node.selectable:focus,.react-flow__node.selectable:focus-visible{outline:none}.react-flow__node-default,.react-flow__node-input,.react-flow__node-output,.react-flow__node-group{padding:10px;border-radius:3px;width:150px;font-size:12px;color:#222;text-align:center;border-width:1px;border-style:solid;border-color:#1a192b;background-color:#fff}.react-flow__node-default.selectable:hover,.react-flow__node-input.selectable:hover,.react-flow__node-output.selectable:hover,.react-flow__node-group.selectable:hover{box-shadow:0 1px 4px 1px #00000014}.react-flow__node-default.selectable.selected,.react-flow__node-default.selectable:focus,.react-flow__node-default.selectable:focus-visible,.react-flow__node-input.selectable.selected,.react-flow__node-input.selectable:focus,.react-flow__node-input.selectable:focus-visible,.react-flow__node-output.selectable.selected,.react-flow__node-output.selectable:focus,.react-flow__node-output.selectable:focus-visible,.react-flow__node-group.selectable.selected,.react-flow__node-group.selectable:focus,.react-flow__node-group.selectable:focus-visible{box-shadow:0 0 0 .5px #1a192b}.react-flow__node-group{background-color:#f0f0f040}.react-flow__nodesselection-rect,.react-flow__selection{background:#0059dc14;border:1px dotted rgba(0,89,220,.8)}.react-flow__nodesselection-rect:focus,.react-flow__nodesselection-rect:focus-visible,.react-flow__selection:focus,.react-flow__selection:focus-visible{outline:none}.react-flow__controls{box-shadow:0 0 2px 1px #00000014}.react-flow__controls-button{border:none;background:#fefefe;border-bottom:1px solid #eee;box-sizing:content-box;display:flex;justify-content:center;align-items:center;width:16px;height:16px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;padding:5px}.react-flow__controls-button:hover{background:#f4f4f4}.react-flow__controls-button svg{width:100%;max-width:12px;max-height:12px}.react-flow__minimap{background-color:#fff}.react-flow__resize-control{position:absolute}.react-flow__resize-control.left,.react-flow__resize-control.right{cursor:ew-resize}.react-flow__resize-control.top,.react-flow__resize-control.bottom{cursor:ns-resize}.react-flow__resize-control.top.left,.react-flow__resize-control.bottom.right{cursor:nwse-resize}.react-flow__resize-control.bottom.left,.react-flow__resize-control.top.right{cursor:nesw-resize}.react-flow__resize-control.handle{width:4px;height:4px;border:1px solid #fff;border-radius:1px;background-color:#3367d9;transform:translate(-50%,-50%)}.react-flow__resize-control.handle.left{left:0;top:50%}.react-flow__resize-control.handle.right{left:100%;top:50%}.react-flow__resize-control.handle.top{left:50%;top:0}.react-flow__resize-control.handle.bottom{left:50%;top:100%}.react-flow__resize-control.handle.top.left,.react-flow__resize-control.handle.bottom.left{left:0}.react-flow__resize-control.handle.top.right,.react-flow__resize-control.handle.bottom.right{left:100%}.react-flow__resize-control.line{border-color:#3367d9;border-width:0;border-style:solid}.react-flow__resize-control.line.left,.react-flow__resize-control.line.right{width:1px;transform:translate(-50%);top:0;height:100%}.react-flow__resize-control.line.left{left:0;border-left-width:1px}.react-flow__resize-control.line.right{left:100%;border-right-width:1px}.react-flow__resize-control.line.top,.react-flow__resize-control.line.bottom{height:1px;transform:translateY(-50%);left:0;width:100%}.react-flow__resize-control.line.top{top:0;border-top-width:1px}.react-flow__resize-control.line.bottom{border-bottom-width:1px;top:100%}.flow-canvas-wrapper{width:100%;height:100%;display:flex;flex-direction:column;background:#fafbfc;border-radius:8px;overflow:hidden;box-shadow:inset 0 1px 3px #0000001a}.canvas-toolbar{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;background:linear-gradient(135deg,#fff,#f8fafc);border-bottom:1px solid #e5e7eb;flex-shrink:0}.toolbar-btn{font-size:12px;font-weight:500;padding:8px 12px;background:linear-gradient(135deg,#fff,#f8fafc);border:1px solid #d1d5db;border-radius:6px;color:#374151;cursor:pointer;transition:all .2s ease;box-shadow:0 1px 2px #0000000d}.toolbar-btn:hover{background:linear-gradient(135deg,#f9fafb,#f3f4f6);border-color:#9ca3af;box-shadow:0 2px 4px #0000001a;transform:translateY(-1px)}.toolbar-btn:active{transform:translateY(0);box-shadow:0 1px 2px #0000000d}.canvas-hint{font-size:12px;color:#6b7280;font-style:italic;background:#3b82f60d;padding:6px 12px;border-radius:6px;border:1px solid rgba(59,130,246,.1)}.canvas-area{flex:1;width:100%;height:100%;position:relative;background:linear-gradient(135deg,#f8fafc,#f1f5f9,#e2e8f0);overflow:hidden}.canvas-area .react-flow,.canvas-area .react-flow__viewport{background:transparent}.canvas-area .react-flow__container{width:100%!important;height:100%!important;background:radial-gradient(circle at 50% 50%,rgba(59,130,246,.03) 0%,transparent 50%)}.canvas-area .react-flow__renderer{width:100%;height:100%}.canvas-area .react-flow__background{background-color:transparent}.canvas-area .react-flow__background svg{opacity:.4}.canvas-area .react-flow__background .react-flow__background-pattern{stroke:#e5e7eb;stroke-width:1}.canvas-area .react-flow__controls{background:#fffffff2;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(229,231,235,.8);border-radius:12px;box-shadow:0 8px 32px #0000001a;padding:4px}.canvas-area .react-flow__controls button{background:transparent;border:none;color:#6b7280;transition:all .2s ease;border-radius:6px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;margin:2px}.canvas-area .react-flow__controls button:hover{color:#374151;background:#3b82f61a;transform:scale(1.05)}.canvas-area .react-flow__controls button svg{width:16px;height:16px}.canvas-area .react-flow__node{border-radius:12px;box-shadow:0 4px 12px #0000001a;border:2px solid #e5e7eb;background:linear-gradient(135deg,#fff,#f8fafc);transition:all .3s ease;font-family:inherit;overflow:hidden}.canvas-area .react-flow__node:hover{box-shadow:0 8px 24px #00000026;transform:translateY(-2px);border-color:#cbd5e1}.canvas-area .react-flow__node.selected{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f633,0 8px 24px #3b82f626;transform:translateY(-2px)}.canvas-area .react-flow__node .react-flow__node-default{padding:12px 16px;font-size:14px;font-weight:500;color:#374151;text-align:center;min-width:120px}.custom-node{border-radius:12px;box-shadow:0 4px 12px #0000001a;border:2px solid #e5e7eb;background:linear-gradient(135deg,#fff,#f8fafc);transition:all .3s ease;font-family:inherit;min-width:140px;padding:0;overflow:hidden}.custom-node:hover{box-shadow:0 8px 24px #00000026;transform:translateY(-2px);border-color:#cbd5e1}.custom-node.selected{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f633,0 8px 24px #3b82f626}.node-content{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 20px}.node-icon{font-size:28px;line-height:1;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 2px 4px rgba(0,0,0,.1))}.node-label{font-size:13px;font-weight:600;color:#1f2937;text-align:center;line-height:1.4;word-wrap:break-word;max-width:120px}.custom-handle{width:10px;height:10px;background:linear-gradient(135deg,#3b82f6,#2563eb);border:3px solid white;box-shadow:0 2px 6px #3b82f64d;transition:all .2s ease}.custom-handle:hover{background:linear-gradient(135deg,#2563eb,#1d4ed8);transform:scale(1.3);box-shadow:0 4px 12px #3b82f666}.custom-handle.handle-true{background:linear-gradient(135deg,#10b981,#059669);border:3px solid white;box-shadow:0 2px 6px #10b9814d}.custom-handle.handle-true:hover{background:linear-gradient(135deg,#059669,#047857);transform:scale(1.4);box-shadow:0 4px 12px #10b98180}.custom-handle.handle-false{background:linear-gradient(135deg,#ef4444,#dc2626);border:3px solid white;box-shadow:0 2px 6px #ef44444d}.custom-handle.handle-false:hover{background:linear-gradient(135deg,#dc2626,#b91c1c);transform:scale(1.4);box-shadow:0 4px 12px #ef444480}.custom-node.conditional-node{border-color:#a855f7;background:linear-gradient(135deg,#faf5ff,#f3e8ff)}.custom-node.conditional-node:hover{border-color:#9333ea}.custom-node.conditional-node.selected{border-color:#a855f7;box-shadow:0 0 0 3px #a855f733,0 8px 24px #a855f726}.canvas-area .react-flow__edge{stroke:#9ca3af;stroke-width:2;transition:all .2s ease}.canvas-area .react-flow__edge:hover{stroke:#6b7280;stroke-width:3}.canvas-area .react-flow__edge.selected{stroke:#3b82f6;stroke-width:3;animation:dash 20s linear infinite}.canvas-area .react-flow__edge-path{stroke:inherit;stroke-width:inherit;stroke-dasharray:0}.canvas-area .react-flow__edge.selected .react-flow__edge-path{stroke-dasharray:5,5}@keyframes dash{to{stroke-dashoffset:-1000}}.canvas-area .react-flow__connectionline{stroke:#3b82f6;stroke-width:3;stroke-dasharray:8,4;animation:dash 2s linear infinite}.canvas-area .react-flow__handle{width:10px;height:10px;background:linear-gradient(135deg,#3b82f6,#2563eb);border:3px solid white;box-shadow:0 2px 6px #3b82f64d;transition:all .2s ease}.canvas-area .react-flow__handle:hover{background:linear-gradient(135deg,#2563eb,#1d4ed8);transform:scale(1.3);box-shadow:0 4px 12px #3b82f666}.canvas-area .react-flow__handle-top{top:-6px}.canvas-area .react-flow__handle-bottom{bottom:-6px}.canvas-area .react-flow__handle-left{left:-6px}.canvas-area .react-flow__handle-right{right:-6px}.canvas-area .react-flow__minimap{background:#ffffffe6;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(229,231,235,.8);border-radius:8px;box-shadow:0 4px 12px #0000001a}.canvas-area .react-flow__minimap-node{fill:#e5e7eb;stroke:#9ca3af}.canvas-area .react-flow__minimap-node.selected{fill:#3b82f6}.canvas-area .react-flow__selection{background:#3b82f61a;border:2px solid #3b82f6;border-radius:4px}.canvas-area .react-flow__attribution{background:#fffc;padding:4px 8px;border-radius:6px;font-size:10px;color:#9ca3af;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}@media (prefers-color-scheme: dark){.w-tc-editor{--color-fg-default: #c9d1d9;--color-canvas-subtle: #161b22;--color-prettylights-syntax-comment: #8b949e;--color-prettylights-syntax-entity-tag: #7ee787;--color-prettylights-syntax-entity: #d2a8ff;--color-prettylights-syntax-sublimelinter-gutter-mark: #484f58;--color-prettylights-syntax-constant: #79c0ff;--color-prettylights-syntax-string: #a5d6ff;--color-prettylights-syntax-keyword: #ff7b72;--color-prettylights-syntax-markup-bold: #c9d1d9}}@media (prefers-color-scheme: light){.w-tc-editor{--color-fg-default: #24292f;--color-canvas-subtle: #f6f8fa;--color-prettylights-syntax-comment: #6e7781;--color-prettylights-syntax-entity-tag: #116329;--color-prettylights-syntax-entity: #8250df;--color-prettylights-syntax-sublimelinter-gutter-mark: #8c959f;--color-prettylights-syntax-constant: #0550ae;--color-prettylights-syntax-string: #0a3069;--color-prettylights-syntax-keyword: #cf222e;--color-prettylights-syntax-markup-bold: #24292f}}.w-tc-editor[data-color-mode*=dark],[data-color-mode*=dark] .w-tc-editor,[data-color-mode*=dark] .w-tc-editor-var,body[data-color-mode*=dark]{--color-fg-default: #c9d1d9;--color-canvas-subtle: #161b22;--color-prettylights-syntax-comment: #8b949e;--color-prettylights-syntax-entity-tag: #7ee787;--color-prettylights-syntax-entity: #d2a8ff;--color-prettylights-syntax-sublimelinter-gutter-mark: #484f58;--color-prettylights-syntax-constant: #79c0ff;--color-prettylights-syntax-string: #a5d6ff;--color-prettylights-syntax-keyword: #ff7b72;--color-prettylights-syntax-markup-bold: #c9d1d9}.w-tc-editor[data-color-mode*=light],[data-color-mode*=light] .w-tc-editor,[data-color-mode*=light] .w-tc-editor-var,body[data-color-mode*=light]{--color-fg-default: #24292f;--color-canvas-subtle: #f6f8fa;--color-prettylights-syntax-comment: #6e7781;--color-prettylights-syntax-entity-tag: #116329;--color-prettylights-syntax-entity: #8250df;--color-prettylights-syntax-sublimelinter-gutter-mark: #8c959f;--color-prettylights-syntax-constant: #0550ae;--color-prettylights-syntax-string: #0a3069;--color-prettylights-syntax-keyword: #cf222e;--color-prettylights-syntax-markup-bold: #24292f}.w-tc-editor{font-family:inherit;font-size:12px;background-color:var(--color-canvas-subtle);color:var(--color-fg-default)}.w-tc-editor-text,.w-tc-editor-preview{min-height:16px}.w-tc-editor-preview pre{margin:0;padding:0;white-space:inherit;font-family:inherit;font-size:inherit}.w-tc-editor-preview pre code{font-family:inherit}.w-tc-editor code[class*=language-] .token.cdata,.w-tc-editor pre[class*=language-] .token.cdata,.w-tc-editor code[class*=language-] .token.comment,.w-tc-editor pre[class*=language-] .token.comment,.w-tc-editor code[class*=language-] .token.doctype,.w-tc-editor pre[class*=language-] .token.doctype,.w-tc-editor code[class*=language-] .token.prolog,.w-tc-editor pre[class*=language-] .token.prolog{color:var(--color-prettylights-syntax-comment)}.w-tc-editor code[class*=language-] .token.punctuation,.w-tc-editor pre[class*=language-] .token.punctuation{color:var(--color-prettylights-syntax-sublimelinter-gutter-mark)}.w-tc-editor code[class*=language-] .namespace,.w-tc-editor pre[class*=language-] .namespace{opacity:.7}.w-tc-editor code[class*=language-] .token.boolean,.w-tc-editor pre[class*=language-] .token.boolean,.w-tc-editor code[class*=language-] .token.constant,.w-tc-editor pre[class*=language-] .token.constant,.w-tc-editor code[class*=language-] .token.deleted,.w-tc-editor pre[class*=language-] .token.deleted,.w-tc-editor code[class*=language-] .token.number,.w-tc-editor pre[class*=language-] .token.number,.w-tc-editor code[class*=language-] .token.symbol,.w-tc-editor pre[class*=language-] .token.symbol{color:var(--color-prettylights-syntax-entity-tag)}.w-tc-editor code[class*=language-] .token.builtin,.w-tc-editor pre[class*=language-] .token.builtin,.w-tc-editor code[class*=language-] .token.char,.w-tc-editor pre[class*=language-] .token.char,.w-tc-editor code[class*=language-] .token.inserted,.w-tc-editor pre[class*=language-] .token.inserted,.w-tc-editor code[class*=language-] .token.selector,.w-tc-editor pre[class*=language-] .token.selector,.w-tc-editor code[class*=language-] .token.string,.w-tc-editor pre[class*=language-] .token.string,.w-tc-editor code[class*=language-] .style .token.string,.w-tc-editor pre[class*=language-] .style .token.string,.w-tc-editor code[class*=language-] .token.entity,.w-tc-editor pre[class*=language-] .token.entity,.w-tc-editor code[class*=language-] .token.property,.w-tc-editor pre[class*=language-] .token.property,.w-tc-editor code[class*=language-] .token.operator,.w-tc-editor pre[class*=language-] .token.operator,.w-tc-editor code[class*=language-] .token.url,.w-tc-editor pre[class*=language-] .token.url{color:var(--color-prettylights-syntax-constant)}.w-tc-editor code[class*=language-] .token.atrule,.w-tc-editor pre[class*=language-] .token.atrule,.w-tc-editor code[class*=language-] .token.property-access .token.method,.w-tc-editor pre[class*=language-] .token.property-access .token.method,.w-tc-editor code[class*=language-] .token.keyword,.w-tc-editor pre[class*=language-] .token.keyword{color:var(--color-prettylights-syntax-keyword)}.w-tc-editor code[class*=language-] .token.function,.w-tc-editor pre[class*=language-] .token.function{color:var(--color-prettylights-syntax-string)}.w-tc-editor code[class*=language-] .token.important,.w-tc-editor pre[class*=language-] .token.important,.w-tc-editor code[class*=language-] .token.regex,.w-tc-editor pre[class*=language-] .token.regex,.w-tc-editor code[class*=language-] .token.variable,.w-tc-editor pre[class*=language-] .token.variable{color:var(--color-prettylights-syntax-string-regexp)}.w-tc-editor code[class*=language-] .token.bold,.w-tc-editor pre[class*=language-] .token.bold,.w-tc-editor code[class*=language-] .token.important,.w-tc-editor pre[class*=language-] .token.important{color:var(--color-prettylights-syntax-markup-bold)}.w-tc-editor code[class*=language-] .token.tag,.w-tc-editor pre[class*=language-] .token.tag{color:var(--color-prettylights-syntax-entity-tag)}.w-tc-editor code[class*=language-] .token.attr-value,.w-tc-editor pre[class*=language-] .token.attr-value,.w-tc-editor code[class*=language-] .token.attr-name,.w-tc-editor pre[class*=language-] .token.attr-name{color:var(--color-prettylights-syntax-constant)}.w-tc-editor code[class*=language-] .token.selector .class,.w-tc-editor pre[class*=language-] .token.selector .class,.w-tc-editor code[class*=language-] .token.class-name,.w-tc-editor pre[class*=language-] .token.class-name{color:var(--color-prettylights-syntax-entity)}.flow-editor{width:100%;height:100vh;display:flex;flex-direction:column;background:#f8fafc;overflow:hidden}.flow-editor-toolbar{display:flex;justify-content:space-between;align-items:center;padding:8px 16px;background:#fff;border-bottom:1px solid #e5e7eb;box-shadow:0 1px 3px #0000000d;min-height:48px;flex-shrink:0}.toolbar-left{display:flex;align-items:center;gap:12px;flex:1}.toolbar-right{display:flex;align-items:center;gap:8px}.back-button{display:flex;align-items:center;justify-content:center;padding:8px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:6px;color:#475569;cursor:pointer;transition:all .2s ease}.back-button:hover{background:#f1f5f9;border-color:#cbd5e1;color:#334155}.workflow-quick-info{display:flex;align-items:center;gap:12px;flex:1}.workflow-name-input{font-size:16px;font-weight:600;border:none;background:transparent;color:#1e293b;padding:6px 8px;outline:none;border-radius:4px;transition:background-color .2s ease;min-width:200px;max-width:300px}.workflow-name-input:focus{background:#f8fafc}.workflow-name-input::placeholder{color:#94a3b8}.workflow-stats{font-size:12px;color:#64748b;background:#f1f5f9;padding:4px 8px;border-radius:12px;font-weight:500;white-space:nowrap}.status-indicator{min-width:80px;text-align:right}.status{font-size:11px;font-weight:500;padding:4px 8px;border-radius:4px;display:inline-flex;align-items:center;gap:4px}.status.saving{color:#d97706;background:#fef3c7}.status.saved{color:#059669;background:#d1fae5}.status.testing{color:#2563eb;background:#dbeafe}.status.test-success{color:#059669;background:#d1fae5}.status.test-error,.status.error{color:#dc2626;background:#fef2f2}.status.modified{color:#7c3aed;background:#f3e8ff}.spinner{width:12px;height:12px;border:2px solid transparent;border-top:2px solid currentColor;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.toolbar-button{display:flex;align-items:center;justify-content:center;padding:6px 8px;border:1px solid #e2e8f0;border-radius:6px;background:#fff;color:#475569;cursor:pointer;transition:all .2s ease;font-size:12px;min-width:32px}.toolbar-button:hover{background:#f8fafc;border-color:#cbd5e1}.toolbar-button:disabled{opacity:.5;cursor:not-allowed}.toolbar-button.primary{background:#3b82f6;border-color:#3b82f6;color:#fff}.toolbar-button.primary:hover:not(:disabled){background:#2563eb;border-color:#2563eb}.flow-editor-body{display:flex;flex:1;min-height:0;overflow:hidden}.node-palette-sidebar{width:200px;background:#fff;border-right:1px solid #e5e7eb;display:flex;flex-direction:column;overflow:hidden;flex-shrink:0}.palette-header{padding:12px 16px;border-bottom:1px solid #f1f5f9;display:flex;justify-content:space-between;align-items:center;background:#fafbfc}.palette-title{font-size:13px;font-weight:600;color:#374151}.palette-count{font-size:11px;color:#6b7280;background:#f3f4f6;padding:2px 6px;border-radius:8px}.palette-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 16px;text-align:center;color:#9ca3af}.palette-empty span{font-size:24px;margin-bottom:8px}.palette-empty p{font-size:12px;margin:0}.palette-items{flex:1;overflow-y:auto;padding:8px}.palette-item-compact{display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid #f3f4f6;border-radius:6px;margin-bottom:6px;cursor:grab;transition:all .2s ease;background:#fefefe}.palette-item-compact:hover{border-color:#3b82f6;box-shadow:0 2px 8px #3b82f61a;transform:translateY(-1px);background:#fff}.palette-item-compact:active{cursor:grabbing;transform:translateY(0)}.item-icon{font-size:16px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:#f8fafc;border-radius:4px;flex-shrink:0}.item-label{font-size:12px;font-weight:500;color:#374151;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.canvas-main{flex:1;background:#f8fafc;position:relative;overflow:hidden}.properties-panel{width:320px;background:#fff;border-left:1px solid #e5e7eb;display:flex;flex-direction:column;overflow:hidden;flex-shrink:0}.panel-resizer{position:absolute;left:-4px;top:0;width:8px;height:100%;cursor:col-resize;background:transparent;z-index:3}.panel-resizer:after{content:"";position:absolute;left:3px;top:0;width:2px;height:100%;background:#e2e8f0e6}.properties-panel{position:relative}.panel-header{padding:12px 16px;border-bottom:1px solid #f1f5f9;display:flex;justify-content:space-between;align-items:center;background:#fafbfc}.panel-node-info{display:flex;align-items:center;gap:10px;flex:1}.panel-node-icon{font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center}.panel-node-text{display:flex;flex-direction:column;gap:2px}.panel-node-title{font-size:13px;font-weight:600;color:#1f2937;line-height:1.3}.panel-title{font-size:11px;font-weight:500;color:#6b7280;text-transform:uppercase;letter-spacing:.5px}.panel-close{background:none;border:none;font-size:14px;color:#6b7280;cursor:pointer;padding:2px;border-radius:2px;line-height:1;transition:all .2s ease}.panel-close:hover{background:#f3f4f6;color:#374151}.panel-content{flex:1;overflow-y:auto;padding:16px}.property-group{margin-bottom:20px}.property-group label{display:block;font-size:12px;font-weight:600;color:#374151;margin-bottom:6px}.property-value{font-size:12px;color:#6b7280;background:#f9fafb;padding:8px 10px;border-radius:4px;border:1px solid #f3f4f6}.property-input{width:100%;font-size:12px;padding:8px 10px;border:1px solid #d1d5db;border-radius:4px;outline:none;transition:border-color .2s ease;box-sizing:border-box}.property-input:focus{border-color:#3b82f6}.config-item{margin-bottom:12px}.config-label{display:block;font-size:11px;font-weight:500;color:#6b7280;margin-bottom:4px}.config-type{font-weight:400;color:#9ca3af}.palette-empty .empty-icon{font-size:32px;margin-bottom:12px;opacity:.5}.palette-empty p{font-size:14px;font-weight:500;margin:0 0 4px;color:#475569}.palette-empty span{font-size:12px;color:#94a3b8}.palette-grid{flex:1;overflow-y:auto;padding:20px}.palette-item{display:flex;align-items:center;gap:12px;padding:16px;border:1px solid #f1f5f9;border-radius:12px;margin-bottom:12px;cursor:grab;transition:all .2s ease;background:#fefefe}.palette-item:hover{border-color:#3b82f6;box-shadow:0 4px 12px #3b82f61a;transform:translateY(-1px);background:#fff}.palette-item:active{cursor:grabbing;transform:translateY(0)}.palette-icon{font-size:18px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f8fafc,#f1f5f9);border-radius:8px;border:1px solid #e2e8f0;flex-shrink:0}.palette-content{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}.palette-label{font-weight:600;color:#1e293b;font-size:14px;line-height:1.2}.palette-description{font-size:12px;color:#64748b;line-height:1.3;word-wrap:break-word}.canvas-container{flex:1;background:#f8fafc;position:relative;border-left:1px solid #f1f5f9;border-right:1px solid #f1f5f9}.canvas-container .react-flow__container,.canvas-container .react-flow__viewport{width:100%;height:100%}.node-inspector{width:340px;background:#fff;border-left:1px solid #e2e8f0;display:flex;flex-direction:column;overflow:hidden;min-height:0}.inspector-header{padding:20px 20px 16px;border-bottom:1px solid #f1f5f9;display:flex;justify-content:space-between;align-items:center}.inspector-close{background:none;border:none;font-size:20px;color:#64748b;cursor:pointer;padding:4px;border-radius:4px;line-height:1;transition:all .2s ease}.inspector-close:hover{background:#f1f5f9;color:#334155}.inspector-header h4{font-size:16px;font-weight:600;color:#1e293b;margin:0;display:flex;align-items:center;gap:8px}.inspector-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center;color:#64748b}.inspector-empty .empty-icon{font-size:32px;margin-bottom:12px;opacity:.5}.inspector-empty p{font-size:14px;font-weight:500;margin:0 0 4px;color:#475569}.inspector-empty span{font-size:12px;color:#94a3b8}.inspector-content{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:20px}.node-header{padding-bottom:16px;border-bottom:1px solid #f1f5f9}.node-title h5{font-size:16px;font-weight:600;color:#1e293b;margin:0 0 6px}.node-type{font-size:11px;color:#64748b;background:#f1f5f9;padding:4px 8px;border-radius:6px;text-transform:uppercase;font-weight:600;letter-spacing:.5px}.node-description{font-size:13px;color:#64748b;margin:12px 0 0;line-height:1.4}.node-property{margin-bottom:20px}.node-property label{display:block;font-size:13px;font-weight:600;color:#374151;margin-bottom:8px}.property-type{font-size:11px;color:#64748b;font-weight:400;margin-left:8px;background:#f8fafc;padding:2px 6px;border-radius:4px}.property-input{width:100%;padding:10px 12px;border:1px solid #e2e8f0;border-radius:8px;font-size:14px;background:#fefefe;transition:all .2s ease}.property-input:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a;background:#fff}.property-input::placeholder{color:#94a3b8}.node-options h6{font-size:14px;font-weight:600;color:#1e293b;margin:24px 0 16px;padding-top:20px;border-top:1px solid #f1f5f9}@media (max-width: 1024px){.node-inspector{width:280px}.node-palette{width:240px}}@media (max-width: 768px){.flow-editor-header{flex-direction:column;gap:12px;align-items:stretch}.editor-header-left{flex-direction:column;align-items:stretch;gap:12px}.workflow-info{max-width:none}.flow-editor-body{flex-direction:column}.node-palette,.node-inspector{width:100%;max-height:200px;border:none;border-top:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb}.canvas-container{min-height:400px}}.auth-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.auth-modal{background:#fff;border-radius:12px;padding:0;min-width:400px;max-width:500px;width:90vw;max-height:90vh;overflow-y:auto;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;position:relative}.auth-modal-close{position:absolute;top:16px;right:16px;background:none;border:none;font-size:24px;cursor:pointer;color:#6b7280;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:6px;transition:all .2s;z-index:10}.auth-modal-close:hover{background-color:#f3f4f6;color:#374151}.auth-form{padding:32px}.auth-header{text-align:center;margin-bottom:32px}.auth-icon{width:48px;height:48px;color:#3b82f6;margin:0 auto 16px}.auth-header h2{font-size:24px;font-weight:700;color:#111827;margin:0 0 8px}.auth-header p{color:#6b7280;margin:0;font-size:14px}.auth-form-content{display:flex;flex-direction:column;gap:20px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}@media (max-width: 480px){.form-row{grid-template-columns:1fr;gap:20px}}.input-group{position:relative;display:flex;align-items:center}.input-icon{position:absolute;left:12px;width:18px;height:18px;color:#9ca3af;z-index:2}.input-group input{width:100%;padding:12px 12px 12px 42px;border:2px solid #e5e7eb;border-radius:8px;font-size:14px;transition:all .2s;background-color:#fff!important;color:#1f2937!important;-webkit-text-fill-color:#1f2937!important;-webkit-appearance:none;-moz-appearance:none;appearance:none}.input-group input:-webkit-autofill,.input-group input:-webkit-autofill:hover,.input-group input:-webkit-autofill:focus,.input-group input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 30px #ffffff inset!important;-webkit-text-fill-color:#1f2937!important;background-color:#fff!important;color:#1f2937!important}.input-group input::placeholder{color:#9ca3af!important;opacity:1}.input-group input:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a;background-color:#fff!important;color:#1f2937!important}.input-group input.error{border-color:#ef4444;background-color:#fff!important;color:#1f2937!important}.input-group input.error:focus{border-color:#ef4444;box-shadow:0 0 0 3px #ef44441a;background-color:#fff!important;color:#1f2937!important}.password-toggle{position:absolute;right:12px;background:none;border:none;cursor:pointer;color:#9ca3af;padding:4px;border-radius:4px;transition:color .2s}.password-toggle:hover{color:#6b7280}.password-toggle svg{width:18px;height:18px}.global-error{background-color:#fef2f2;border:1px solid #fecaca;border-radius:6px;padding:12px;font-size:14px;text-align:center}.auth-button{background-color:#3b82f6;color:#fff;border:none;padding:12px 24px;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s;margin-top:8px}.auth-button:hover:not(:disabled){background-color:#2563eb;transform:translateY(-1px);box-shadow:0 4px 12px #3b82f64d}.auth-button:disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none}.auth-footer{text-align:center;margin-top:24px;padding-top:24px;border-top:1px solid #e5e7eb}.auth-footer p{color:#6b7280;margin:0 0 8px;font-size:14px}.link-button{background:none;border:none;color:#3b82f6;font-size:14px;font-weight:600;cursor:pointer;text-decoration:underline;transition:color .2s}.link-button:hover{color:#2563eb}.user-menu{display:flex;align-items:center;gap:16px;padding:8px 16px;background-color:#f8fafc;border-radius:8px;border:1px solid #e2e8f0}.user-info{display:flex;align-items:center;gap:12px;flex:1}.user-icon{width:32px;height:32px;color:#3b82f6;background-color:#dbeafe;border-radius:50%;padding:6px}.user-details{display:flex;flex-direction:column;gap:2px}.user-name{font-size:14px;font-weight:600;color:#1e293b}.user-email{font-size:12px;color:#64748b}.logout-button{display:flex;align-items:center;gap:6px;background-color:#ef4444;color:#fff;border:none;padding:6px 12px;border-radius:6px;font-size:12px;font-weight:500;cursor:pointer;transition:all .2s}.logout-button:hover{background-color:#dc2626;transform:translateY(-1px)}@media (max-width: 480px){.auth-modal{min-width:auto;margin:16px}.auth-form{padding:24px}.user-menu{flex-direction:column;align-items:stretch;gap:12px}.user-info{justify-content:center}}.project-management{width:100%;max-width:100%;margin:0 auto;padding:24px;box-sizing:border-box;overflow-x:hidden}.project-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:32px;padding-bottom:16px;border-bottom:1px solid #e2e8f0}.header-title h2{font-size:2rem;font-weight:700;color:#1e293b;margin:0 0 8px}.header-title p{color:#64748b;margin:0;font-size:1rem}.refresh-button{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background-color:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;cursor:pointer;transition:all .2s;color:#64748b}.refresh-button:hover:not(:disabled){background-color:#f1f5f9;color:#475569}.refresh-button:disabled{opacity:.5;cursor:not-allowed}.create-project-button{display:flex;align-items:center;gap:8px;background:linear-gradient(135deg,#3b82f6,#1d4ed8);color:#fff;border:none;padding:10px 20px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s}.create-project-button:hover{transform:translateY(-1px);box-shadow:0 4px 12px #3b82f64d}.error-banner{display:flex;align-items:center;gap:12px;background-color:#fef2f2;border:1px solid #fecaca;border-radius:8px;padding:12px 16px;margin-bottom:24px;color:#dc2626;font-size:14px}.close-error{background:none;border:none;color:#dc2626;cursor:pointer;font-size:18px;margin-left:auto;padding:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center}.project-controls{margin-bottom:24px}.search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#9ca3af;width:18px;height:18px}.search-input{width:100%;padding:12px 12px 12px 42px;border:2px solid #e5e7eb;border-radius:8px;font-size:14px;transition:all .2s;background-color:#fff;color:#1f2937}.search-input:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.projects-content{width:100%;max-width:100%;margin-top:20px;overflow-x:hidden}.projects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;padding-bottom:40px;width:100%;max-width:100%;box-sizing:border-box}.project-card{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:20px;cursor:pointer;transition:all .2s;position:relative;max-width:100%;box-sizing:border-box;overflow:hidden}.project-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001a;border-color:#cbd5e1}.project-card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px}.project-info{display:flex;gap:12px;flex:1}.project-icon{width:24px;height:24px;color:#3b82f6;margin-top:2px}.project-details{flex:1}.project-name{font-size:18px;font-weight:600;color:#1e293b;margin:0 0 8px;line-height:1.3}.project-description{color:#64748b;margin:0;font-size:14px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.project-menu{position:relative}.menu-button{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:none;border:none;border-radius:6px;cursor:pointer;color:#64748b;transition:all .2s}.menu-button:hover{background-color:#f1f5f9;color:#475569}.menu-dropdown{position:absolute;top:100%;right:0;background:#fff;border:1px solid #e2e8f0;border-radius:8px;box-shadow:0 4px 6px -1px #0000001a;min-width:120px;z-index:10;overflow:hidden}.menu-item{display:flex;align-items:center;gap:8px;width:100%;padding:8px 12px;background:none;border:none;text-align:left;cursor:pointer;font-size:14px;color:#374151;transition:background-color .2s}.menu-item:hover{background-color:#f9fafb}.menu-item.danger:hover{background-color:#fef2f2}.project-card-body{margin-bottom:16px}.project-settings{display:flex;align-items:center;gap:8px;padding:8px 12px;background-color:#f8fafc;border-radius:6px;font-size:12px;color:#64748b}.project-card-footer{border-top:1px solid #f1f5f9;padding-top:12px;display:flex;justify-content:space-between;align-items:center}.project-meta{display:flex;flex-direction:column;gap:6px;flex:1}.project-actions{display:flex;gap:8px}.open-project-button{display:flex;align-items:center;gap:6px;padding:8px 16px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:6px;cursor:pointer;transition:all .2s ease;font-size:13px;font-weight:500}.open-project-button:hover{transform:translateY(-1px);box-shadow:0 4px 12px #667eea66}.meta-item{display:flex;align-items:center;gap:6px;font-size:12px;color:#64748b}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;text-align:center;min-height:400px}.empty-icon{width:64px;height:64px;color:#cbd5e1;margin-bottom:16px}.empty-state h3{font-size:20px;font-weight:600;color:#374151;margin:0 0 8px}.empty-state p{color:#6b7280;margin:0 0 24px;font-size:16px}.create-first-project-button,.clear-search-button{display:flex;align-items:center;gap:8px;background:linear-gradient(135deg,#3b82f6,#1d4ed8);color:#fff;border:none;padding:12px 24px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s}.clear-search-button{background:#6b7280}.create-first-project-button:hover,.clear-search-button:hover{transform:translateY(-1px);box-shadow:0 4px 12px #3b82f64d}.project-management-loading{display:flex;flex-direction:column;justify-content:center;align-items:center;height:calc(100vh - 120px)}.project-management-loading p{color:#64748b;font-size:16px;margin:0}.project-form-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.project-form-modal{background:#fff;border-radius:12px;padding:0;min-width:500px;max-width:600px;width:90vw;max-height:90vh;overflow-y:auto;box-shadow:0 20px 25px -5px #0000001a}.project-form-header{display:flex;justify-content:space-between;align-items:center;padding:24px 32px 16px;border-bottom:1px solid #e2e8f0}.project-form-header h3{font-size:20px;font-weight:600;color:#1e293b;margin:0}.close-button{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:none;border:none;border-radius:6px;cursor:pointer;color:#6b7280;transition:all .2s}.close-button:hover{background-color:#f3f4f6;color:#374151}.project-form-content{padding:24px 32px 32px;display:flex;flex-direction:column;gap:20px}.form-group{display:flex;flex-direction:column;gap:6px}.form-group label{font-size:14px;font-weight:600;color:#374151}.form-group input,.form-group textarea{padding:12px;border:2px solid #e5e7eb;border-radius:8px;font-size:14px;transition:all .2s;background-color:#fff!important;color:#1f2937!important;font-family:inherit}.form-group input.error,.form-group textarea.error{border-color:#ef4444}.form-group textarea{resize:vertical;min-height:80px}.form-hint{color:#6b7280;font-size:12px;margin-top:4px}.error-message{color:#ef4444;font-size:12px;font-weight:500}.global-error{display:flex;align-items:center;gap:8px;background-color:#fef2f2;border:1px solid #fecaca;border-radius:6px;padding:12px;font-size:14px;color:#dc2626}.form-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:8px}.cancel-button{padding:10px 20px;border:1px solid #d1d5db;background:#fff;color:#374151;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s}.cancel-button:hover{background-color:#f9fafb;border-color:#9ca3af}.save-button{display:flex;align-items:center;gap:8px;padding:10px 20px;background:linear-gradient(135deg,#3b82f6,#1d4ed8);color:#fff;border:none;border-radius:6px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s}.save-button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px #3b82f64d}.save-button:disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none}.delete-confirm-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1001}.delete-confirm-modal{background:#fff;border-radius:12px;padding:0;min-width:400px;max-width:500px;width:90vw;box-shadow:0 20px 25px -5px #0000001a}.delete-confirm-header{display:flex;align-items:center;gap:12px;padding:24px 24px 16px;border-bottom:1px solid #e2e8f0}.delete-icon{width:24px;height:24px;color:#dc2626}.delete-confirm-header h4{font-size:18px;font-weight:600;color:#1e293b;margin:0}.delete-confirm-body{padding:16px 24px 24px}.delete-confirm-body p{margin:0 0 12px;color:#374151;line-height:1.5}.delete-warning{color:#dc2626;font-size:14px;font-weight:500}.delete-confirm-actions{display:flex;justify-content:flex-end;gap:12px;padding:0 24px 24px}.delete-button{padding:8px 16px;background-color:#dc2626;color:#fff;border:none;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s}.delete-button:hover{background-color:#b91c1c}@media (max-width: 768px){.project-management{padding:16px}.project-header{flex-direction:column;gap:16px;align-items:stretch}.header-actions{justify-content:space-between}.projects-grid{grid-template-columns:1fr;gap:16px}.project-form-modal{min-width:auto;margin:16px}.project-form-content{padding:16px 24px 24px}.form-actions{flex-direction:column-reverse}.form-actions button{width:100%}}@media (max-width: 480px){.search-container{max-width:100%}.project-meta{flex-direction:column;align-items:flex-start;gap:4px}}.workflow-management{width:100%;max-width:100%;margin:0 auto;padding:20px;box-sizing:border-box;overflow-x:hidden}.workflow-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid #e5e7eb}.header-navigation{display:flex;align-items:center;gap:16px}.back-button{display:flex;align-items:center;gap:8px;padding:8px 16px;background:#f3f4f6;border:1px solid #d1d5db;border-radius:8px;color:#374151;cursor:pointer;transition:all .2s ease;font-size:14px}.back-button:hover{background:#e5e7eb;border-color:#9ca3af}.header-title h2{font-size:24px;font-weight:600;color:#111827;margin:0 0 4px}.header-title p{font-size:14px;color:#6b7280;margin:0}.header-actions{display:flex;gap:12px;align-items:center}.refresh-button{display:flex;align-items:center;justify-content:center;padding:10px;background:#f9fafb;border:1px solid #d1d5db;border-radius:8px;color:#374151;cursor:pointer;transition:all .2s ease}.refresh-button:hover{background:#f3f4f6}.refresh-button .spinning{animation:spin 1s linear infinite}.create-workflow-button{display:flex;align-items:center;gap:8px;padding:10px 20px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;cursor:pointer;transition:all .2s ease;font-weight:500}.create-workflow-button:hover{transform:translateY(-1px);box-shadow:0 4px 12px #667eea66}.workflow-controls{margin-bottom:24px}.search-container{position:relative;max-width:400px}.search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#9ca3af;width:16px;height:16px}.search-input{width:100%;padding:10px 12px 10px 40px;border:1px solid #d1d5db;border-radius:8px;font-size:14px;background:#fff;transition:border-color .2s ease}.search-input:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.workflows-content{width:100%;max-width:100%;margin-top:20px;overflow-x:hidden}.workflow-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 20px;color:#6b7280}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 20px;text-align:center;color:#6b7280}.empty-icon{width:48px;height:48px;margin-bottom:16px;color:#d1d5db}.empty-state h3{font-size:18px;font-weight:500;color:#374151;margin:0 0 8px}.empty-state p{font-size:14px;margin:0 0 20px;max-width:400px}.create-first-workflow-button,.clear-search-button{display:flex;align-items:center;gap:8px;padding:12px 24px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;cursor:pointer;transition:all .2s ease;font-weight:500}.clear-search-button{background:#f3f4f6;color:#374151;border:1px solid #d1d5db}.create-first-workflow-button:hover{transform:translateY(-1px);box-shadow:0 4px 12px #667eea66}.clear-search-button:hover{background:#e5e7eb}.workflows-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;padding-bottom:40px;width:100%;max-width:100%;box-sizing:border-box}.workflow-card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:20px;transition:all .2s ease;cursor:pointer;position:relative}.workflow-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001a;border-color:#d1d5db}.workflow-card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px}.workflow-info{display:flex;gap:12px;flex:1}.workflow-icon{width:20px;height:20px;color:#667eea;flex-shrink:0;margin-top:2px}.workflow-details{flex:1}.workflow-name{font-size:16px;font-weight:600;color:#111827;margin:0 0 4px}.workflow-description{font-size:14px;color:#6b7280;margin:0;line-height:1.4}.workflow-menu{position:relative}.menu-button{display:flex;align-items:center;justify-content:center;padding:6px;background:transparent;border:1px solid transparent;border-radius:6px;color:#6b7280;cursor:pointer;transition:all .2s ease}.menu-button:hover{background:#f3f4f6;border-color:#d1d5db}.menu-dropdown{position:absolute;top:100%;right:0;margin-top:4px;background:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 10px 25px #0000001a;z-index:10;min-width:120px}.menu-item{display:flex;align-items:center;gap:8px;width:100%;padding:10px 12px;background:none;border:none;text-align:left;cursor:pointer;font-size:14px;color:#374151;transition:background-color .2s ease}.menu-item:hover{background:#f3f4f6}.menu-item:first-child{border-radius:8px 8px 0 0}.menu-item:last-child{border-radius:0 0 8px 8px}.menu-item.danger{color:#dc2626}.menu-item.danger:hover{background:#fef2f2}.workflow-card-body{margin-bottom:16px}.workflow-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.stat-item{display:flex;flex-direction:column;gap:4px}.stat-label{font-size:12px;color:#6b7280;text-transform:uppercase;font-weight:500;letter-spacing:.5px}.stat-value{font-size:14px;color:#111827;font-weight:500}.status-badge{display:inline-block;padding:4px 8px;border-radius:12px;color:#fff;font-size:12px;font-weight:500;text-transform:capitalize}.workflow-card-footer{display:flex;gap:8px;padding-top:16px;border-top:1px solid #f3f4f6}.workflow-action-button{display:flex;align-items:center;gap:6px;padding:8px 16px;border:1px solid #d1d5db;border-radius:6px;cursor:pointer;transition:all .2s ease;font-size:13px;font-weight:500;flex:1;justify-content:center}.workflow-action-button.primary{background:#667eea;color:#fff;border-color:#667eea}.workflow-action-button.primary:hover{background:#5a6fd8;border-color:#5a6fd8}.workflow-action-button.secondary{background:#fff;color:#374151}.workflow-action-button.secondary:hover{background:#f9fafb;border-color:#9ca3af}.error-banner{display:flex;align-items:center;gap:8px;padding:12px 16px;background:#fef2f2;border:1px solid #fecaca;border-radius:8px;color:#dc2626;margin-bottom:20px}.close-error{margin-left:auto;background:none;border:none;color:#dc2626;cursor:pointer;font-size:18px;font-weight:700;padding:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center}.workflow-editor-container{height:100vh;display:flex;flex-direction:column}.workflow-editor-header{display:flex;align-items:center;gap:16px;padding:16px 20px;background:#fff;border-bottom:1px solid #e5e7eb}.workflow-editor-header h2{font-size:20px;font-weight:600;color:#111827;margin:0}.loading-spinner{width:32px;height:32px;border:3px solid #f3f4f6;border-top:3px solid #667eea;border-radius:50%;animation:spin 1s linear infinite}@media (max-width: 768px){.workflows-grid{grid-template-columns:1fr}.workflow-header{flex-direction:column;gap:16px;align-items:stretch}.header-navigation{flex-direction:column;align-items:flex-start;gap:12px}.workflow-stats{grid-template-columns:1fr}}.knowledge-base-form{display:flex;flex-direction:column;height:100%;background:#f8fafc;position:relative}.form-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem 2rem;background:#fff;border-bottom:1px solid #e2e8f0;box-shadow:0 1px 3px #0000001a}.title-section p{margin:.25rem 0 0;color:#64748b;font-size:.875rem}.save-button{display:flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;background:#3b82f6;color:#fff;border:none;border-radius:.5rem;cursor:pointer;font-weight:500;transition:all .2s}.save-button:hover:not(:disabled){background:#2563eb}.save-button:disabled{opacity:.5;cursor:not-allowed}.form-tabs{display:flex;background:#fff;border-bottom:1px solid #e2e8f0;padding:0 2rem}.tab-button{display:flex;align-items:center;gap:.5rem;padding:1rem 1.5rem;background:none;border:none;border-bottom:2px solid transparent;color:#64748b;cursor:pointer;font-size:.875rem;font-weight:500;transition:all .2s}.message{display:flex;align-items:center;gap:.5rem;margin:1rem 2rem 0;padding:.75rem 1rem;border-radius:.5rem;font-size:.875rem}.message.error{background:#fef2f2;border:1px solid #fecaca;color:#dc2626}.message.success{background:#f0fdf4;border:1px solid #bbf7d0;color:#16a34a}.message button{margin-left:auto;background:none;border:none;cursor:pointer;font-size:1.25rem;padding:0;width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;color:inherit}.form-content{flex:1;overflow-y:auto;overflow-x:hidden;padding:0;min-height:0}.form-content-inner{padding:2rem 2rem 4rem}.tab-panel{max-width:800px;margin:0 auto;padding-bottom:3rem}.form-section{background:#fff;padding:2rem;border-radius:.75rem;border:1px solid #e2e8f0;margin-bottom:2rem;box-sizing:border-box}.form-section h4{margin:0 0 1rem;font-size:1.125rem;font-weight:600;color:#1e293b}.form-section>p{margin:0 0 1.5rem;color:#64748b;font-size:.875rem}.form-group{margin-bottom:1.5rem}.form-group label{display:block;margin-bottom:.5rem;font-weight:500;color:#374151;font-size:.875rem}.form-group input,.form-group textarea{width:100%;padding:.75rem;border:1px solid #cbd5e1;border-radius:.5rem;font-size:.875rem;transition:border-color .2s}.form-group input:focus,.form-group textarea:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.form-group small{display:block;margin-top:.25rem;font-size:.75rem;color:#64748b}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.upload-area{position:relative;margin-bottom:1.5rem}.file-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.upload-label{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem 2rem;border:2px dashed #cbd5e1;border-radius:.75rem;cursor:pointer;transition:all .2s;text-align:center;background:#f8fafc}.upload-label:hover{border-color:#3b82f6;background:#f0f9ff}.upload-label span{margin:.5rem 0;font-weight:500;color:#374151}.upload-label small{color:#64748b;font-size:.75rem}.file-list{border:1px solid #e2e8f0;border-radius:.5rem;overflow:hidden}.file-list h5{margin:0;padding:.75rem 1rem;background:#f8fafc;border-bottom:1px solid #e2e8f0;font-size:.875rem;font-weight:600;color:#374151}.file-item{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;border-bottom:1px solid #f1f5f9}.file-item:last-child{border-bottom:none}.file-info{display:flex;align-items:center;gap:.75rem;flex:1}.file-info div{display:flex;flex-direction:column}.file-name{font-size:.875rem;color:#374151;font-weight:500}.file-size{font-size:.75rem;color:#64748b}.file-actions{display:flex;align-items:center;gap:.5rem}.upload-progress{display:flex;align-items:center;gap:.5rem;margin-right:.5rem}.progress-bar{width:60px;height:4px;background:#e2e8f0;border-radius:2px;overflow:hidden;position:relative}.progress-bar:before{content:"";position:absolute;top:0;left:0;height:100%;background:#3b82f6;transition:width .3s}.remove-file{padding:.25rem;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:.25rem;color:#64748b;cursor:pointer;transition:all .2s}.remove-file:hover{background:#fee2e2;border-color:#fecaca;color:#dc2626}.patterns-section{margin-top:1.5rem}.patterns-section h5{margin:0 0 .5rem;font-size:.875rem;font-weight:600;color:#374151}.patterns-section small{display:block;margin-bottom:1rem;color:#64748b;font-size:.75rem}.pattern-input{display:flex;gap:.5rem;margin-bottom:.75rem}.pattern-input input{flex:1;margin-bottom:0}.remove-pattern{padding:.75rem;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:.5rem;color:#64748b;cursor:pointer;transition:all .2s}.remove-pattern:hover{background:#fee2e2;border-color:#fecaca;color:#dc2626}.add-pattern{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:#f8fafc;border:1px dashed #cbd5e1;border-radius:.5rem;color:#64748b;cursor:pointer;transition:all .2s;font-size:.875rem}.add-pattern:hover{background:#f0f9ff;border-color:#3b82f6;color:#3b82f6}@media (max-width: 768px){.form-header{flex-direction:column;gap:1rem;align-items:stretch}.header-left{flex-direction:column;align-items:flex-start;gap:.75rem}.form-tabs{padding:0 1rem}.tab-button{padding:.75rem 1rem;font-size:.8rem}.form-content-inner{padding:1rem}.form-section{padding:1.5rem}.form-row{grid-template-columns:1fr}.file-item{flex-direction:column;align-items:flex-start;gap:.5rem}.file-actions{align-self:flex-end}}.knowledge-base-detail{display:flex;flex-direction:column;height:100vh;background:#f8fafc}.detail-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem 2rem;background:#fff;border-bottom:1px solid #e2e8f0;box-shadow:0 1px 3px #0000001a}.kb-info h3{margin:0;font-size:1.5rem;font-weight:600;color:#1e293b}.kb-info p{margin:.25rem 0 0;color:#64748b;font-size:.875rem}.refresh-btn:hover{background:#e2e8f0}.edit-btn{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:#3b82f6;color:#fff;border:none;border-radius:.5rem;cursor:pointer;font-weight:500;transition:all .2s}.edit-btn:hover{background:#2563eb}.delete-btn{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:#dc2626;color:#fff;border:none;border-radius:.5rem;cursor:pointer;font-weight:500;transition:all .2s}.delete-btn:hover{background:#b91c1c}.kb-stats-section{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;padding:1.5rem 2rem;background:#fff;border-bottom:1px solid #e2e8f0}.stat-card{padding:1rem;background:#f8fafc;border:1px solid #e2e8f0;border-radius:.5rem;text-align:center}.stat-card h4{margin:0 0 .5rem;font-size:.875rem;color:#64748b;font-weight:500}.stat-number{font-size:1.875rem;font-weight:700;color:#1e293b}.stat-text{font-size:.875rem;color:#374151;font-family:monospace;background:#f1f5f9;padding:.25rem .5rem;border-radius:.25rem}.detail-controls{padding:1rem 2rem;background:#fff;border-bottom:1px solid #e2e8f0}.sources-section{flex:1;overflow-y:auto;padding:2rem}.sources-section h4{margin:0 0 1.5rem;font-size:1.125rem;font-weight:600;color:#1e293b}.empty-state h5{margin:0 0 .5rem;font-size:1.125rem;color:#374151}.empty-state p{margin:0;font-size:.875rem;max-width:400px}.sources-list{display:flex;flex-direction:column;gap:1rem}.source-item{display:flex;justify-content:space-between;align-items:flex-start;padding:1.5rem;background:#fff;border:1px solid #e2e8f0;border-radius:.75rem;transition:all .2s}.source-item:hover{box-shadow:0 4px 12px #0000001a;border-color:#cbd5e1}.source-info{flex:1}.source-header{display:flex;align-items:center;gap:.75rem;margin-bottom:.75rem}.source-header h5{margin:0;font-size:1rem;font-weight:600;color:#1e293b;flex:1}.source-type{padding:.25rem .5rem;background:#f1f5f9;border-radius:.25rem;font-size:.75rem;color:#475569;text-transform:capitalize}.source-url{display:flex;align-items:center;gap:.5rem;margin-bottom:.75rem}.source-url a{color:#3b82f6;text-decoration:none;font-size:.875rem}.source-url a:hover{text-decoration:underline}.source-meta{display:flex;gap:1rem;font-size:.75rem;color:#64748b}.source-meta span{display:flex;align-items:center}.source-actions{display:flex;gap:.5rem}.delete-source{padding:.5rem;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:.5rem;color:#64748b;cursor:pointer;transition:all .2s}.delete-source:hover{background:#fee2e2;border-color:#fecaca;color:#dc2626}.error-message{position:fixed;bottom:1rem;right:1rem;padding:1rem;background:#fef2f2;border:1px solid #fecaca;border-radius:.5rem;color:#dc2626;font-size:.875rem;max-width:400px;box-shadow:0 4px 12px #00000026}@media (max-width: 768px){.detail-header{flex-direction:column;gap:1rem;align-items:stretch}.header-left{flex-direction:column;align-items:flex-start;gap:.75rem}.header-actions{justify-content:flex-end}.kb-stats-section{grid-template-columns:1fr;gap:.75rem;padding:1rem}.detail-controls,.sources-section{padding:1rem}.source-item{flex-direction:column;gap:1rem}.source-actions{align-self:flex-end}.source-meta{flex-direction:column;gap:.5rem}}.knowledge-base-management{display:flex;flex-direction:column;height:100%;background:#f8fafc}.kb-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem 2rem;background:#fff;border-bottom:1px solid #e2e8f0}.header-left .title-section{display:flex;align-items:center;gap:.75rem}.title-section h3{margin:0;font-size:1.25rem;font-weight:600;color:#1e293b}.title-section p{margin:0;font-size:.875rem;color:#64748b}.header-actions{display:flex;gap:.75rem}.refresh-btn{display:flex;align-items:center;padding:.5rem;background:#f1f5f9;border:1px solid #cbd5e1;border-radius:.5rem;color:#475569;cursor:pointer;transition:all .2s}.refresh-btn:hover:not(:disabled){background:#e2e8f0}.refresh-btn:disabled{opacity:.5;cursor:not-allowed}.create-kb-btn{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:#3b82f6;color:#fff;border:none;border-radius:.5rem;cursor:pointer;font-weight:500;transition:all .2s}.create-kb-btn:hover{background:#2563eb}.kb-controls{padding:1rem 2rem;background:#fff;border-bottom:1px solid #e2e8f0}.search-box{position:relative;display:flex;align-items:center;max-width:400px}.search-box svg{position:absolute;left:.75rem;color:#94a3b8}.search-box input{width:100%;padding:.5rem .75rem .5rem 2.5rem;border:1px solid #cbd5e1;border-radius:.5rem;font-size:.875rem;transition:border-color .2s}.search-box input:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.error-banner{display:flex;align-items:center;gap:.5rem;padding:.75rem 2rem;background:#fef2f2;border-bottom:1px solid #fecaca;color:#dc2626;font-size:.875rem}.error-banner button{margin-left:auto;background:none;border:none;color:#dc2626;cursor:pointer;font-size:1.25rem;padding:0;width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center}.kb-content{flex:1;overflow-y:auto;padding:2rem}.loading-state,.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem 2rem;text-align:center;color:#64748b}.loading-state svg,.empty-state svg{margin-bottom:1rem;color:#94a3b8}.empty-state h4{margin:0 0 .5rem;font-size:1.125rem;color:#374151}.empty-state p{margin:0 0 1.5rem;font-size:.875rem;max-width:400px}.create-first-kb-btn{display:flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;background:#3b82f6;color:#fff;border:none;border-radius:.5rem;cursor:pointer;font-weight:500;transition:all .2s}.create-first-kb-btn:hover{background:#2563eb}.kb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.5rem}.kb-card{background:#fff;border:1px solid #e2e8f0;border-radius:.75rem;padding:1.5rem;transition:all .2s;position:relative}.kb-card:hover{box-shadow:0 4px 12px #0000001a;border-color:#cbd5e1}.kb-card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1rem}.kb-info h4{margin:0 0 .25rem;font-size:1.125rem;font-weight:600;color:#1e293b;cursor:pointer;transition:color .2s}.kb-info h4:hover{color:#3b82f6}.kb-description{margin:0;font-size:.875rem;color:#64748b;line-height:1.4}.kb-menu{position:relative}.menu-trigger{padding:.25rem;background:none;border:none;border-radius:.25rem;color:#94a3b8;cursor:pointer;transition:all .2s}.menu-trigger:hover{background:#f1f5f9;color:#64748b}.menu-dropdown{position:absolute;top:100%;right:0;background:#fff;border:1px solid #e2e8f0;border-radius:.5rem;box-shadow:0 4px 12px #00000026;z-index:10;min-width:140px;overflow:hidden}.menu-dropdown button{display:flex;align-items:center;gap:.5rem;width:100%;padding:.75rem 1rem;background:none;border:none;text-align:left;cursor:pointer;font-size:.875rem;color:#374151;transition:background-color .2s}.menu-dropdown button:hover{background:#f9fafb}.menu-dropdown button.delete-action{color:#dc2626}.menu-dropdown button.delete-action:hover{background:#fef2f2}.kb-stats{display:flex;gap:1rem;margin-bottom:1rem;padding:1rem;background:#f8fafc;border-radius:.5rem}.stat{text-align:center}.stat-label{display:block;font-size:.75rem;color:#64748b;margin-bottom:.25rem}.stat-value{display:block;font-size:1.125rem;font-weight:600;color:#1e293b}.kb-meta{display:flex;justify-content:space-between;align-items:center}.source-types{display:flex;gap:.5rem}.source-type{display:flex;align-items:center;gap:.25rem;padding:.25rem .5rem;background:#f1f5f9;border-radius:.25rem;font-size:.75rem;color:#475569}.kb-date{display:flex;align-items:center;gap:.25rem;font-size:.75rem;color:#64748b}.spinning{animation:spin 1s linear infinite}@media (max-width: 768px){.kb-header{flex-direction:column;gap:1rem;align-items:stretch}.header-actions{justify-content:flex-end}.kb-controls,.kb-content{padding:1rem}.kb-grid{grid-template-columns:1fr}.kb-stats{flex-direction:column;gap:.5rem}.kb-meta{flex-direction:column;gap:.5rem;align-items:flex-start}}.project-detail{display:flex;flex-direction:column;height:100vh;background:#f8fafc}.project-detail-header{background:#fff;padding:1.5rem 2rem;border-bottom:1px solid #e2e8f0;box-shadow:0 1px 3px #0000001a}.header-left{display:flex;align-items:center;gap:1rem}.back-button{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:#f1f5f9;border:1px solid #cbd5e1;border-radius:.5rem;color:#475569;cursor:pointer;transition:all .2s;font-size:.875rem}.back-button:hover{background:#e2e8f0;border-color:#94a3b8}.project-info h2{margin:0;font-size:1.5rem;font-weight:600;color:#1e293b}.project-description{margin:.25rem 0 0;color:#64748b;font-size:.875rem}.tabs-navigation{display:flex;background:#fff;border-bottom:1px solid #e2e8f0;padding:0 2rem}.tab-button{display:flex;align-items:center;gap:.5rem;padding:1rem 1.5rem;background:none;border:none;border-bottom:2px solid transparent;color:#64748b;cursor:pointer;font-size:.875rem;font-weight:500;transition:all .2s;position:relative}.tab-button:hover{color:#3b82f6;background:#f8fafc}.tab-button.active{color:#3b82f6;border-bottom-color:#3b82f6}.tab-content{flex:1;overflow:hidden;min-height:0}@media (max-width: 768px){.project-detail-header{padding:1rem}.header-left{flex-direction:column;align-items:flex-start;gap:.75rem}.tabs-navigation{padding:0 1rem}.tab-button{padding:.75rem 1rem;font-size:.8rem}}:root{--space: 12px;--max-width: 1200px;--font-sans: -apple-system, BlinkMacSystemFont,"sans-serif", "Segoe UI", Roboto, "Helvetica Neue", Arial;--line-height: 1.5}*,*:before,*:after{box-sizing:border-box}html,body{height:100%;margin:0;padding:0;font-family:var(--font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:var(--line-height);color:#111827;font-family:Arial,Helvetica,sans-serif}.layout{display:grid;grid-template-columns:280px 1fr 360px;gap:var(--space)}.panel{border:1px solid #ddd;padding:8px;border-radius:6px;background:#fff}.flow-list-item{cursor:pointer;padding:6px;border-bottom:1px solid #eee}.flow-list-item:hover{background:#f7f7f7}.textarea{width:100%;height:160px}.app{width:100vw;min-height:100vh;background:#f8fafc;display:flex;flex-direction:column;padding:12px}.app-header{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:1rem 2rem;box-shadow:0 2px 10px #0000001a}.header-content{display:flex;justify-content:space-between;align-items:center;max-width:1200px;margin:0 auto}.header-title{text-align:left;display:flex;flex-direction:column;gap:8px}.navigation-breadcrumbs{display:flex;align-items:center;margin-top:8px}.breadcrumb-trail{display:flex;align-items:center;gap:8px}.breadcrumb{display:flex;align-items:center;gap:6px;color:#ffffffe6;font-size:14px;font-weight:500}.breadcrumb-link{display:flex;align-items:center;gap:6px;background:none;border:none;color:#fffc;cursor:pointer;padding:4px 8px;border-radius:4px;transition:all .2s ease;font-size:14px;font-weight:500}.breadcrumb-link:hover{background:#ffffff1a;color:#fff}.breadcrumb-separator{color:#fff9;font-size:16px;margin:0 4px}.app-header h1{margin:0 0 .5rem;font-size:2rem;font-weight:600}.app-header p{margin:0;opacity:.9;font-size:1rem}.header-auth{display:flex;align-items:center}.authenticated-header{display:flex;align-items:center;gap:12px}.nav-button{display:flex;align-items:center;gap:8px;background-color:#fff3;color:#fff;border:1px solid rgba(255,255,255,.3);padding:8px 16px;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.auth-trigger-button{display:flex;align-items:center;gap:8px;background-color:#fff3;color:#fff;border:1px solid rgba(255,255,255,.3);padding:8px 16px;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.auth-trigger-button:hover{background-color:#ffffff4d;transform:translateY(-1px)}.app-loading{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100vh;background:#f8fafc}.loading-spinner{width:40px;height:40px;border:4px solid #e2e8f0;border-top:4px solid #3b82f6;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:16px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.app-loading p{color:#64748b;font-size:16px;margin:0}.welcome-section{display:flex;justify-content:center;align-items:center;min-height:calc(100vh - 120px);background:linear-gradient(135deg,#f8fafc,#e2e8f0);padding:2rem}.welcome-content{text-align:center;max-width:600px;background:#fff;padding:3rem 2rem;border-radius:16px;box-shadow:0 10px 25px #0000001a}.welcome-content h2{font-size:2.5rem;font-weight:700;color:#1e293b;margin:0 0 1rem;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.welcome-content>p{font-size:1.125rem;color:#64748b;margin:0 0 2rem;line-height:1.6}.welcome-features{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin:2rem 0}.feature-item{display:flex;align-items:center;gap:12px;padding:1rem;background:#f8fafc;border-radius:8px;border:1px solid #e2e8f0;transition:all .2s}.feature-item:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.feature-icon{font-size:1.5rem}.feature-item span:last-child{font-weight:500;color:#374151}.welcome-cta-button{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:12px 32px;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s;margin-top:1rem}.welcome-cta-button:hover{transform:translateY(-2px);box-shadow:0 8px 25px #667eea4d}.authenticated-landing{display:flex;justify-content:center;align-items:center;min-height:calc(100vh - 120px);background:linear-gradient(135deg,#f8fafc,#e2e8f0);padding:2rem}.dashboard-welcome{text-align:center;max-width:500px;background:#fff;padding:3rem 2rem;border-radius:16px;box-shadow:0 10px 25px #0000001a}.dashboard-welcome h2{font-size:2rem;font-weight:600;color:#1e293b;margin:0 0 1rem}.dashboard-welcome p{font-size:1.125rem;color:#64748b;margin:0 0 2rem}.enter-workspace-button{display:inline-flex;align-items:center;gap:12px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:12px 32px;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s;text-decoration:none}.enter-workspace-button:hover{transform:translateY(-2px);box-shadow:0 8px 25px #667eea4d}.workflow-container{display:flex;height:calc(100vh - 120px);background:#f8fafc}.node-palette{width:280px;background:#fff;border-right:1px solid #e2e8f0;overflow-y:auto;padding:1rem}.workflow-canvas{flex:1;position:relative;background:#f8fafc}.config-panel{width:320px;background:#fff;border-left:1px solid #e2e8f0;overflow-y:auto;padding:1rem}.palette-title{font-size:1.25rem;font-weight:600;margin-bottom:1rem;color:#2d3748}.node-category{margin-bottom:1.5rem}.category-title{font-size:.875rem;font-weight:600;color:#4a5568;margin-bottom:.75rem;text-transform:uppercase;letter-spacing:.05em}.node-item{display:flex;align-items:center;padding:.75rem;margin-bottom:.5rem;border-radius:8px;cursor:grab;transition:all .2s ease;font-weight:500;color:#000;-webkit-user-select:none;user-select:none}.node-item:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00000026}.node-item:active{cursor:grabbing;transform:translateY(0)}.node-item.ai{background:linear-gradient(135deg,#667eea,#764ba2)}.node-item.data{background:linear-gradient(135deg,#38b2ac,#319795)}.node-item.logic{background:linear-gradient(135deg,#4299e1,#3182ce)}.node-item.api{background:linear-gradient(135deg,#ed8936,#dd6b20)}.config-title{font-size:1.25rem;font-weight:600;margin-bottom:1rem;color:#2d3748}.config-section{margin-bottom:1.5rem;padding:1rem;background:#f7fafc;border-radius:8px;border:1px solid #e2e8f0}.section-title{font-size:1rem;font-weight:600;color:#2d3748;margin-bottom:.75rem;display:flex;align-items:center;gap:.5rem}.form-group{margin-bottom:1rem}.form-label{display:block;font-size:.875rem;font-weight:500;color:#4a5568;margin-bottom:.25rem}.form-input,.form-select,.form-textarea{width:100%;padding:.5rem;border:1px solid #d1d5db;border-radius:6px;font-size:.875rem;transition:border-color .2s ease}.form-input:focus,.form-select:focus,.form-textarea:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.form-textarea{resize:vertical;min-height:80px}.form-help{font-size:.75rem;color:#6b7280;margin-top:.25rem}.btn{display:inline-flex;align-items:center;justify-content:center;padding:.5rem 1rem;border:none;border-radius:6px;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s ease;text-decoration:none;gap:.5rem}.btn-primary{background:#667eea;color:#fff}.btn-primary:hover{background:#5a67d8;transform:translateY(-1px)}.btn-secondary{background:#e2e8f0;color:#4a5568}.btn-secondary:hover{background:#cbd5e0}.btn-danger{background:#f56565;color:#fff}.btn-danger:hover{background:#e53e3e}.btn-saving{background-color:#f59e0b!important;color:#fff!important;opacity:.8;cursor:wait!important}.btn-saving:hover{background-color:#f59e0b!important;transform:none!important}.config-tabs{display:flex;border-bottom:1px solid #e2e8f0;margin-bottom:1rem}.config-tab{padding:.75rem 1rem;border:none;background:none;color:#6b7280;cursor:pointer;border-bottom:2px solid transparent;transition:all .2s ease}.config-tab.active{color:#667eea;border-bottom-color:#667eea}.config-tab:hover{color:#4a5568}.flow-editor .tab-content{display:none}.flow-editor .tab-content.active{display:block}.notification{position:fixed;top:20px;right:20px;padding:12px 20px;border-radius:6px;color:#fff;font-weight:500;z-index:1000;transition:all .3s ease}.notification.success{background:#48bb78}.notification.error{background:#f56565}.notification.info{background:#4299e1}.workflow-toolbar{display:flex;gap:8px;background:#fff;padding:8px;border-radius:8px;box-shadow:0 2px 8px #0000001a}.checkbox-label{display:flex;align-items:center;gap:8px;cursor:pointer}.checkbox-text{font-size:.875rem;color:#4a5568}.react-flow{background:#f8fafc}.react-flow__node{border-radius:8px;box-shadow:0 2px 8px #0000001a;border:2px solid #e2e8f0;background:#fff;font-size:12px}.react-flow__node.selected{border-color:#667eea}.react-flow__edge{stroke:#a0aec0;stroke-width:2}.react-flow__edge.selected{stroke:#667eea;stroke-width:3}.react-flow__handle{background:#667eea;border:2px solid white;width:10px;height:10px}.react-flow__controls{background:#fff;border:1px solid #e2e8f0;border-radius:8px}.react-flow__controls button{background:#fff;border:none;color:#4a5568}.react-flow__controls button:hover{background:#f7fafc}.app-main{flex:1;overflow:auto}.app-main-fullscreen{width:100vw;height:100vh;overflow:hidden}.authenticated-header{display:flex;align-items:center;gap:16px}.nav-button{display:flex;align-items:center;gap:8px;background-color:#fff3;color:#fff;border:1px solid rgba(255,255,255,.3);padding:6px 12px;border-radius:6px;font-size:12px;font-weight:500;cursor:pointer;transition:all .2s;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.nav-button:hover{background-color:#ffffff4d;transform:translateY(-1px)}.workflow-view{height:calc(100vh - 120px);display:flex;flex-direction:column}.workflow-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:#fff;border-bottom:1px solid #e5e7eb;gap:16px}.back-to-projects-button{display:flex;align-items:center;gap:8px;background:#f8fafc;color:#475569;border:1px solid #e2e8f0;padding:8px 16px;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s}.back-to-projects-button:hover{background:#f1f5f9;color:#334155;transform:translateY(-1px)}.current-project-info{display:flex;align-items:center;gap:8px;color:#64748b;font-size:14px;font-weight:500}.back-to-flows-button{display:flex;align-items:center;gap:8px;padding:8px 12px;background:transparent;border:1px solid #e1e5e9;border-radius:6px;color:#374151;cursor:pointer;font-size:14px;transition:all .2s ease}.back-to-flows-button:hover{background:#f3f4f6;border-color:#d1d5db}.current-flow-info{display:flex;align-items:center;gap:8px;padding:8px 16px;background:#3b82f61a;border:1px solid rgba(59,130,246,.2);border-radius:8px;font-weight:500;color:#1f2937}.current-flow-info .project-context{color:#6b7280;font-weight:400;font-size:14px}.authenticated-header .nav-button{display:flex;align-items:center;gap:6px;padding:8px 12px;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:6px;color:#fff;cursor:pointer;font-size:14px;transition:all .2s ease;text-decoration:none}.authenticated-header .nav-button:hover{background:#fff3;border-color:#ffffff4d;transform:translateY(-1px)}@media (max-width: 768px){.authenticated-header{gap:8px}.nav-button span,.current-flow-info .project-context{display:none}}