.flow-builder-page-wrapper{width:100%;height:100%;position:relative;background:#f9fafb;border-radius:.75rem;overflow:hidden;transition:all .3s ease}.flow-builder-page-wrapper.flow-fullscreen{position:fixed!important;top:0!important;left:0!important;right:0!important;bottom:0!important;width:100vw!important;height:100vh!important;z-index:9999!important;border-radius:0!important;background:#f9fafb}.flow-builder-container{display:flex;flex-direction:column;height:100%;width:100%;background:#f9fafb;position:relative}.flow-builder-container.flow-fullscreen-active{height:100vh;width:100vw}.flow-builder-container.flow-minimized .flow-main{display:none}.flow-header{display:flex;align-items:center;justify-content:space-between;background:#fff;border-bottom:1px solid #e5e7eb;padding:.75rem 1rem;box-shadow:0 1px 3px #0000001a;z-index:100;flex-shrink:0}.flow-header-left{display:flex;align-items:center;gap:1rem;flex:1;overflow-x:auto}.flow-preset-button{padding:.5rem 1rem;background:#3b82f6;color:#fff;border:none;border-radius:6px;cursor:pointer;font-weight:500;font-size:.875rem;white-space:nowrap;transition:all .2s ease}.flow-preset-button:hover{background:#2563eb}@keyframes gradientShift{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}.flow-node-palette{display:flex;align-items:center;gap:.5rem;overflow-x:auto;flex:1}.flow-palette-button{display:flex;flex-direction:column;align-items:center;justify-content:center;width:60px;height:60px;border-radius:8px;background:#fff;border:1px solid #e5e7eb;cursor:pointer;transition:all .2s ease;box-shadow:0 1px 2px #0000000d;flex-shrink:0}.flow-palette-button:hover{transform:translateY(-2px);border-color:#3b82f6;box-shadow:0 4px 6px -1px #0000001a;background:#f8fafc}.flow-palette-icon{font-size:1.5rem;margin-bottom:.25rem;display:flex;align-items:center;justify-content:center;color:#374151}.flow-palette-label{font-size:.625rem;color:#374151;font-weight:600;text-align:center}.flow-header-actions{display:flex;align-items:center;gap:.5rem;margin-left:1rem}.flow-action-button{padding:.5rem 1rem;background:#fff;border:1px solid #e5e7eb;border-radius:6px;cursor:pointer;font-weight:500;color:#374151;transition:all .2s ease;font-size:.875rem;display:flex;align-items:center;gap:.25rem}.flow-action-button:hover{background:#f9fafb;border-color:#d1d5db;color:#111827}.flow-save-button{background:#10b981;color:#fff;border-color:#10b981}.flow-save-button:hover{background:#059669;border-color:#059669;color:#fff}.flow-main{display:flex;flex:1;overflow:hidden;height:calc(100% - 80px);min-height:0}.flow-config-panel{width:320px;background:#fff;border-right:1px solid #e5e7eb;flex-shrink:0;overflow-y:auto;padding:1.5rem}.flow-config-panel-empty{padding:1.25rem}.flow-config-panel-content{height:100%}.flow-config-panel-header{margin-bottom:1rem}.flow-config-panel-body{flex:1}.flow-config-panel-footer{border-top:1px solid #e5e7eb;padding-top:1rem}.flow-canvas-wrapper{flex:1;position:relative;background:#fff;border-left:1px solid #e5e7eb}.flow-canvas{width:100%;height:100%}.flow-node{transition:all .2s ease;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.flow-node-header{display:flex;align-items:center;gap:.75rem;margin-bottom:.75rem}.flow-node-icon{width:3rem;height:3rem;border-radius:.75rem;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.5rem;box-shadow:0 4px 6px -1px #0000001a;flex-shrink:0}.flow-node-title{flex:1;min-width:0}.flow-node-title .font-bold{font-weight:700;color:#111827;font-size:1rem}.flow-node-preview{padding:.5rem 0;font-size:.875rem;color:#6b7280;line-height:1.4;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.flow-handle{width:12px;height:12px;border-radius:50%;background:#3b82f6;border:2px solid white;box-shadow:0 2px 4px #0003}.flow-handle:hover{width:16px;height:16px;background:#2563eb}.react-flow__node{cursor:move}.react-flow__node.selected .flow-node{border-color:#3b82f6!important;box-shadow:0 0 0 3px #3b82f626!important;transform:translateY(-1px)}.react-flow__edge{cursor:pointer}.react-flow__edge.selected{stroke:#ef4444;stroke-width:3}.react-flow__edge-path{stroke:#3b82f6;stroke-width:2}.react-flow__controls{background:#fff;border:1px solid #e5e7eb;border-radius:6px;box-shadow:0 1px 3px #0000001a}.react-flow__controls-button{border-bottom:1px solid #e5e7eb}.react-flow__controls-button:hover{background:#f9fafb}.react-flow__minimap{background:#fff;border:1px solid #e5e7eb;border-radius:6px;box-shadow:0 1px 3px #0000001a;overflow:hidden}.react-flow__attribution{display:none!important}.flow-context-menu{background:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;min-width:200px;padding:4px 0;z-index:10000}.flow-context-menu-header{padding:8px 12px;font-size:.75rem;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid #e5e7eb;margin-bottom:4px}.flow-context-menu-item{display:flex;align-items:center;width:100%;padding:8px 12px;text-align:left;background:none;border:none;cursor:pointer;font-size:.875rem;color:#374151;transition:background-color .15s}.flow-context-menu-item:hover{background-color:#f3f4f6}.flow-context-menu-item-danger{color:#dc2626}.flow-context-menu-item-danger:hover{background-color:#fee2e2;color:#991b1b}.flow-context-menu-icon{margin-right:8px;font-size:1rem}.flow-context-menu-divider{height:1px;background:#e5e7eb;margin:4px 0}.flow-preset-modal{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:10000;padding:2rem}.flow-preset-modal-content{background:#fff;border-radius:12px;max-width:900px;width:100%;max-height:80vh;overflow-y:auto;box-shadow:0 20px 25px -5px #0000001a}.flow-preset-modal-header{display:flex;align-items:center;justify-content:space-between;padding:1.5rem;border-bottom:1px solid #e5e7eb}.flow-preset-modal-header h3{margin:0;font-size:1.25rem;font-weight:600;color:#111827}.flow-preset-close{background:none;border:none;font-size:1.5rem;color:#6b7280;cursor:pointer;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:6px;transition:all .2s ease}.flow-preset-close:hover{background:#f3f4f6;color:#111827}.flow-preset-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1rem;padding:1.5rem}.flow-preset-card{border:1px solid #e5e7eb;border-radius:8px;padding:1rem;cursor:pointer;transition:all .2s ease;background:#fff}.flow-preset-card:hover{border-color:#3b82f6;box-shadow:0 4px 6px -1px #0000001a;transform:translateY(-2px)}.flow-preset-card-header{margin-bottom:.5rem}.flow-preset-card-header h4{margin:0;font-size:1rem;font-weight:600;color:#111827}.flow-preset-description{margin:.5rem 0;font-size:.875rem;color:#6b7280;line-height:1.5}.flow-preset-stats{display:flex;gap:1rem;margin-top:.75rem;font-size:.75rem;color:#9ca3af}@media (prefers-color-scheme: dark){.flow-builder-container{background:#111827}.flow-header,.flow-palette-button{background:#1f2937;border-color:#374151}.flow-palette-button:hover{background:#374151;border-color:#4b5563}.flow-action-button{background:#1f2937;border-color:#374151;color:#f9fafb}.flow-action-button:hover{background:#374151;border-color:#4b5563}.flow-config-panel{background:#1f2937;border-color:#374151}.flow-canvas-wrapper{background:#111827;border-color:#374151}.flow-node-title .font-bold{color:#f9fafb}.flow-node-preview{color:#9ca3af}.react-flow__controls,.react-flow__minimap{background:#1f2937;border-color:#374151}}@media (max-width: 1024px){.flow-config-panel{width:320px}.flow-palette-button{width:56px;height:56px}.flow-palette-icon{font-size:1.25rem}}@media (max-width: 768px){.flow-header{flex-direction:column;gap:.75rem;padding:.75rem}.flow-node-palette{width:100%;justify-content:flex-start}.flow-header-actions{width:100%;justify-content:space-between;margin-left:0}.flow-config-panel{position:absolute;left:0;top:0;bottom:0;width:85%;max-width:350px;z-index:200;box-shadow:4px 0 6px -1px #0000001a}}.flow-config-panel::-webkit-scrollbar{width:6px}.flow-config-panel::-webkit-scrollbar-track{background:transparent}.flow-config-panel::-webkit-scrollbar-thumb{background-color:#9ca3af80;border-radius:3px}.flow-config-panel::-webkit-scrollbar-thumb:hover{background-color:#9ca3afb3}