*{margin:0;padding:0;box-sizing:border-box}:root{--bg-dark: #1a1a2e;--bg-darker: #0f0f1a;--bg-panel: #16213e;--border: #2a2a4a;--text: #e4e4e4;--text-dim: #8888aa;--accent: #4a9eff;--accent-hover: #6ab0ff;--success: #4ade80;--error: #f87171;--warning: #fbbf24;--bg-primary: var(--bg-darker);--bg-secondary: var(--bg-panel);--bg-tertiary: var(--bg-dark);--border-color: var(--border);--text-primary: var(--text);--text-secondary: var(--text-dim);--accent-blue: var(--accent);--accent-green: var(--success);--accent-red: var(--error);--accent-yellow: var(--warning);--port-string: #4ade80;--port-number: #60a5fa;--port-boolean: #f472b6;--port-array: #c084fc;--port-object: #fb923c;--port-any: #94a3b8}body{background:var(--bg-darker);color:var(--text);font-family:SF Pro Display,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;height:100vh;overflow:hidden}#app{display:flex;flex-direction:column;height:100%}.flow-forge-editor{display:flex;flex-direction:column;width:100vw;height:100vh;background:var(--bg-primary)}.editor-main{display:flex;flex:1;overflow:hidden}.app-footer{display:flex;justify-content:center;align-items:center;padding:10px 16px;border-top:1px solid var(--border);background:var(--bg-dark);color:var(--text-dim);font-size:12px}.app-footer a{color:var(--accent);text-decoration:none}.app-footer a:hover{text-decoration:underline}.toolbar{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;background:var(--bg-dark);border-bottom:1px solid var(--border)}.toolbar-brand{display:flex;align-items:center;gap:8px}.brand-icon{font-size:24px}.brand-text{font-size:16px;font-weight:600;letter-spacing:2px}.toolbar-actions{display:flex;align-items:center;gap:12px}.btn{background:#ffffff0d;border:1px solid var(--border);color:var(--text);padding:8px 16px;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s}.btn:hover{background:#ffffff1a;border-color:var(--accent)}.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}.btn-primary:hover:not(:disabled){filter:brightness(1.1)}.btn-primary:disabled{opacity:.7;cursor:not-allowed}.btn-primary.running{background:var(--accent-hover)}.btn-secondary{background:#ffffff0d;color:var(--text);border:1px solid var(--border)}.btn-secondary:hover{background:#ffffff1a;border-color:var(--accent)}.dropdown{position:relative}.dropdown-menu{display:none;position:absolute;top:100%;left:0;margin-top:4px;background:var(--bg-panel);border:1px solid var(--border);border-radius:6px;min-width:150px;z-index:100}.dropdown:hover .dropdown-menu{display:block}.dropdown-item{display:block;width:100%;padding:8px 12px;text-align:left;background:none;border:none;color:var(--text);cursor:pointer}.dropdown-item:hover{background:var(--bg-dark)}.sidebar{width:200px;background:var(--bg-panel);border-right:1px solid var(--border);overflow-y:auto;display:flex;flex-direction:column}.sidebar-section{padding:16px;border-bottom:1px solid var(--border)}.section-title{font-size:12px;font-weight:600;text-transform:uppercase;color:var(--text-dim);margin-bottom:12px;letter-spacing:1px}.node-palette{display:flex;flex-direction:column;gap:12px}.category-group{display:flex;flex-direction:column;gap:8px}.category-label{font-size:10px;font-weight:600;text-transform:uppercase;color:var(--text-dim);margin-bottom:4px;letter-spacing:1px}.palette-node{background:var(--bg-dark);border:1px solid var(--border);padding:8px 12px;border-radius:6px;cursor:grab;transition:all .2s;-webkit-user-select:none;user-select:none;font-size:12px}.node-label{font-size:12px;color:var(--text)}.properties-panel{display:flex;flex-direction:column;gap:12px}.property-row{display:flex;flex-direction:column;gap:4px}.property-row label{font-size:11px;font-weight:500;text-transform:uppercase;color:var(--text-secondary)}.property-value{font-size:14px;color:var(--text-primary)}.property-value.id{font-family:monospace;font-size:11px;color:var(--text-secondary);word-break:break-all}.field-input{width:100%;padding:8px 10px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:4px;color:var(--text-primary);font-size:13px;font-family:inherit}.field-input:focus{outline:none;border-color:var(--accent-blue)}.field-textarea{min-height:80px;resize:vertical;font-family:monospace;font-size:12px}.field-select{cursor:pointer}.node-canvas{flex:1;position:relative;overflow:hidden;touch-action:none;background:radial-gradient(circle at center,var(--bg-dark) 0%,var(--bg-darker) 100%),repeating-linear-gradient(0deg,transparent,transparent 19px,var(--border) 19px,var(--border) 20px),repeating-linear-gradient(90deg,transparent,transparent 19px,var(--border) 19px,var(--border) 20px);background-size:100% 100%,20px 20px,20px 20px}.connections-layer{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:auto;z-index:1}.connection-path{fill:none;stroke:var(--accent-blue);stroke-width:3;pointer-events:stroke}.connection-path:hover{stroke-width:5}.connection-path.pending{stroke-dasharray:5,5;opacity:.7;pointer-events:none}.nodes-layer{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;transform-origin:0 0}.flow-node{position:absolute;min-width:180px;background:var(--bg-panel);border:2px solid var(--border);border-radius:8px;cursor:move;-webkit-user-select:none;user-select:none;box-shadow:0 4px 12px #0000004d;transition:box-shadow .2s,border-color .2s}.flow-node:hover{border-color:#4a9eff80}.flow-node.selected{border-color:var(--accent);box-shadow:0 0 0 2px #4a9eff4d,0 4px 12px #0000004d}.flow-node.status-success{border-color:var(--accent-green)}.flow-node.status-error{border-color:var(--accent-red)}.flow-node.status-running{border-color:var(--accent-yellow);animation:pulse 1s infinite}.node-title{font-size:13px;font-weight:500;color:var(--text);flex:1}.ports-in .port{flex-direction:row}.port-dot{width:12px;height:12px;background:var(--port-any);border:2px solid var(--bg-panel);border-radius:50%;transition:transform .15s}.port[data-port-type=string] .port-dot{background:var(--port-string)}.port[data-port-type=number] .port-dot{background:var(--port-number)}.port[data-port-type=boolean] .port-dot{background:var(--port-boolean)}.port[data-port-type=array] .port-dot{background:var(--port-array)}.port[data-port-type=object] .port-dot{background:var(--port-object)}.port[data-port-type=any] .port-dot{background:var(--port-any)}.port-label{font-size:10px;color:var(--text-dim);text-transform:lowercase}#header{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;background:var(--bg-dark);border-bottom:1px solid var(--border);z-index:100}#header h1{font-size:16px;font-weight:600;letter-spacing:2px}.header-actions{display:flex;gap:8px;align-items:center}.header-actions button{background:#ffffff0d;border:1px solid var(--border);color:var(--text);padding:8px 16px;border-radius:6px;cursor:pointer;font-size:13px;transition:all .2s}.header-actions button:hover{background:#ffffff1a;border-color:var(--accent)}.header-actions button.primary{background:var(--accent);border-color:var(--accent);color:#fff}.header-actions button.primary:hover{background:var(--accent-hover)}.divider{width:1px;height:24px;background:var(--border);margin:0 8px}#main{display:flex;flex:1;overflow:hidden}#palette{width:200px;background:var(--bg-panel);border-right:1px solid var(--border);overflow-y:auto;flex-shrink:0}.palette-section{padding:16px;border-bottom:1px solid var(--border)}.palette-header{font-size:12px;font-weight:600;color:var(--text-dim);margin-bottom:12px;text-transform:uppercase;letter-spacing:1px}.palette-nodes{display:flex;flex-wrap:wrap;gap:8px}.palette-node{background:var(--bg-dark);border:1px solid var(--border);padding:8px 12px;border-radius:6px;font-size:12px;cursor:grab;transition:all .2s;-webkit-user-select:none;user-select:none}.palette-node:hover{border-color:var(--accent);transform:translateY(-1px)}.palette-node:active{cursor:grabbing}.palette-examples{display:flex;flex-direction:column;gap:6px}.example-btn{background:transparent;border:1px dashed var(--border);color:var(--text-dim);padding:8px;border-radius:6px;font-size:11px;cursor:pointer;text-align:left;transition:all .2s}.example-btn:hover{border-color:var(--accent);color:var(--text)}.palette-help{margin-top:12px;padding:10px;background:#7c3aed1a;border-radius:6px;border:1px solid rgba(124,58,237,.2)}.palette-help small{color:var(--text-dim);font-size:10px;line-height:1.5}#canvas-container{flex:1;position:relative;overflow:hidden;background:radial-gradient(circle at center,var(--bg-dark) 0%,var(--bg-darker) 100%),repeating-linear-gradient(0deg,transparent,transparent 19px,var(--border) 19px,var(--border) 20px),repeating-linear-gradient(90deg,transparent,transparent 19px,var(--border) 19px,var(--border) 20px);background-size:100% 100%,20px 20px,20px 20px}#canvas{position:absolute;width:4000px;height:4000px;transform-origin:0 0}#connections{position:absolute;width:4000px;height:4000px;pointer-events:none;z-index:1}#connections path{fill:none;stroke-width:3;pointer-events:stroke}#connections path:hover{stroke-width:5}.node{position:absolute;background:var(--bg-panel);border:2px solid var(--border);border-radius:8px;min-width:180px;box-shadow:0 4px 12px #0000004d;z-index:10;transition:box-shadow .2s,border-color .2s}.node:hover{border-color:#4a9eff80}.node.selected{border-color:var(--accent);box-shadow:0 0 0 2px #4a9eff4d,0 4px 12px #0000004d}.node.running{border-color:var(--warning);animation:pulse 1s infinite}.node.success{border-color:var(--success)}.node.error{border-color:var(--error)}@keyframes pulse{0%,to{box-shadow:0 0 0 2px #fbbf244d}50%{box-shadow:0 0 0 6px #fbbf241a}}.node-header{display:flex;align-items:center;gap:8px;padding:10px 12px;background:#0003;border-radius:6px 6px 0 0;cursor:move}.node-icon{font-size:14px}.node-title{font-size:13px;font-weight:500;flex:1}.node-body{padding:12px}.node-field{margin-bottom:10px}.node-field:last-child{margin-bottom:0}.node-field label{display:block;font-size:10px;color:var(--text-dim);margin-bottom:4px;text-transform:uppercase}.node-field input,.node-field textarea,.node-field select{width:100%;background:var(--bg-dark);border:1px solid var(--border);color:var(--text);padding:8px;border-radius:4px;font-size:12px;font-family:SF Mono,Monaco,monospace}.node-field textarea{min-height:60px;resize:vertical}.node-field input:focus,.node-field textarea:focus,.node-field select:focus{outline:none;border-color:var(--accent)}.node-ports{display:flex;justify-content:space-between;padding:8px 0}.ports-in,.ports-out{display:flex;flex-direction:column;gap:6px}.port{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text-dim);cursor:crosshair;touch-action:none;-webkit-user-select:none;user-select:none}.ports-out .port{flex-direction:row-reverse}.port-dot{width:12px;height:12px;border-radius:50%;background:var(--port-any);border:2px solid var(--bg-panel);transition:transform .15s}.port:hover .port-dot{transform:scale(1.3)}.port-dot.string{background:var(--port-string)}.port-dot.number{background:var(--port-number)}.port-dot.boolean{background:var(--port-boolean)}.port-dot.array{background:var(--port-array)}.port-dot.object{background:var(--port-object)}.port-dot.any{background:var(--port-any)}.port-dot.connected{box-shadow:0 0 6px currentColor}.ports-in{margin-left:-6px}.ports-out{margin-right:-6px}.node-result{position:absolute;top:-8px;right:-8px;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;background:var(--success);color:#fff}.node-result.error{background:var(--error)}#minimap{position:absolute;bottom:20px;right:20px;width:150px;height:100px;background:#00000080;border:1px solid var(--border);border-radius:6px;overflow:hidden}#minimap-canvas{width:100%;height:100%}#preview-panel{width:280px;background:var(--bg-panel);border-left:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0}.icon-btn{background:none;border:none;color:var(--text-dim);font-size:18px;cursor:pointer;padding:0;line-height:1}.icon-btn:hover{color:var(--text)}#preview-content{flex:1;overflow-y:auto;padding:16px}.preview-label{font-size:10px;background:var(--bg-panel);border-left:1px solid var(--border);margin-bottom:6px}#context-menu{position:fixed;background:var(--bg-panel);border:1px solid var(--border);border-radius:6px;box-shadow:0 4px 12px #0006;z-index:1000;min-width:150px}#context-menu.hidden{display:none}.context-item{padding:10px 16px;font-size:13px;cursor:pointer;transition:background .15s}.context-item:hover{background:#ffffff0d}.context-item:first-child{border-radius:6px 6px 0 0}.context-item:last-child{border-radius:0 0 6px 6px}.modal{position:fixed;inset:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000}.modal.hidden{display:none}.modal-content{background:var(--bg-panel);border:1px solid var(--border);border-radius:12px;width:400px;max-height:500px}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--border)}.modal-header h2{font-size:16px;font-weight:500}.close-btn{background:none;border:none;color:var(--text-dim);font-size:24px;cursor:pointer;line-height:1}.close-btn:hover{color:var(--text)}.modal-body{padding:20px}.modal-body label{display:block;font-size:12px;color:var(--text-dim);margin-bottom:8px}.modal-body input{width:100%;background:var(--bg-dark);border:1px solid var(--border);color:var(--text);padding:12px;border-radius:6px;font-size:14px;margin-bottom:16px}.modal-body input:focus{outline:none;border-color:var(--accent)}.modal-body button{width:100%}.saved-flow-item{display:flex;justify-content:space-between;align-items:center;padding:12px;background:var(--bg-dark);border-radius:6px;margin-bottom:8px;cursor:pointer;transition:background .2s}.saved-flow-item:hover{background:#4a9eff1a}.saved-flow-name{font-size:14px}.saved-flow-date{font-size:11px;color:var(--text-dim)}.saved-flow-delete{background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:16px}.saved-flow-delete:hover{color:var(--error)}#toast{position:fixed;bottom:30px;left:50%;transform:translate(-50%);background:var(--accent);color:#fff;padding:12px 24px;border-radius:8px;font-size:14px;z-index:1001;transition:opacity .3s}#toast.hidden{opacity:0;pointer-events:none}#toast.error{background:var(--error)}#toast.success{background:var(--success)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}.preview-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--border);font-size:11px;font-weight:600;letter-spacing:1px;color:var(--text-dim)}.preview-content{flex:1;overflow-y:auto;padding:16px}.preview-empty{color:var(--text-dim);font-size:13px;text-align:center;padding:20px}.preview-node-name{font-weight:600;margin-bottom:12px;color:var(--accent)}.preview-section{margin-bottom:16px}.preview-label{font-size:10px;color:var(--text-dim);text-transform:uppercase;margin-bottom:6px}.preview-data{background:var(--bg-dark);border-radius:4px;padding:10px;font-family:SF Mono,Monaco,monospace;font-size:11px;white-space:pre-wrap;word-break:break-all;max-height:200px;overflow-y:auto}