.mobile-guide{display:none}@media(max-width:768px){.mobile-guide{display:flex;position:fixed;bottom:0;left:0;width:100%;background:#fff;padding:16px;justify-content:center;gap:8px;border-top:1px solid #e2e8f0;z-index:100}}*{box-sizing:border-box}.canvas-layout{display:flex;height:calc(100vh - 80px);margin-top:80px;background:#f8fafc;min-height:500px}@media(max-width:768px){.canvas-layout{height:calc(100vh - 60px);margin-top:60px;min-height:400px}}.sidebar{width:320px;background:#fff;border-right:1px solid #e2e8f0;display:flex;flex-direction:column;transition:all .3s ease;z-index:100}.sidebar.collapsed{width:60px}.sidebar-header{padding:20px;border-bottom:1px solid #e2e8f0;display:flex;align-items:center;justify-content:space-between;background:#f8fafc}.sidebar-header h3{font-size:18px;font-weight:600;color:#1e293b;margin:0}.sidebar-toggle-btn{background:none;border:none;color:#64748b;cursor:pointer;padding:4px;border-radius:4px;transition:all .2s ease}.sidebar-toggle-btn:hover{background:#e2e8f0;color:#334155}.sidebar-content{flex:1;overflow-y:auto;padding:20px}.search-section{margin-bottom:24px}.search-input{width:100%;padding:12px 16px;border:1px solid #e2e8f0;border-radius:8px;font-size:14px;background:#f8fafc;transition:all .2s ease}.search-input:focus{outline:none;border-color:#8b7cf6;background:#fff;box-shadow:0 0 0 3px #8b7cf61a}@media(max-width:768px){.search-section{margin-bottom:16px}.search-input{padding:10px 14px;font-size:13px}}@media(max-width:480px){.search-section{margin-bottom:12px}.search-input{padding:9px 12px;font-size:12px;border-radius:6px}}.models-section{margin-bottom:24px}.section-header{margin-bottom:16px;padding:16px;background:linear-gradient(135deg,#8b7cf6,#7c3aed);border-radius:12px;color:#fff}.section-title{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:600;margin:0 0 8px}.models-count{font-size:12px;color:#fffc;font-weight:500}.models-list{display:flex;flex-direction:column;gap:12px}.model-item{background:linear-gradient(135deg,#fff,#f8fafc);border:1px solid #e2e8f0;border-radius:12px;padding:16px;cursor:grab;transition:all .3s ease;position:relative;box-shadow:0 2px 8px #0000000a}.model-item:hover{border-color:#8b7cf6;box-shadow:0 8px 24px #8b7cf633;transform:translateY(-2px);background:linear-gradient(135deg,#fff,#faf5ff)}.model-item:active{cursor:grabbing;transform:scale(.98)}.model-item.dragging{opacity:.7;transform:rotate(3deg) scale(1.05);box-shadow:0 12px 32px #8b7cf666}.model-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:8px}.model-name{font-size:14px;font-weight:600;color:#1e293b;line-height:1.3;max-width:180px}.model-type{padding:2px 8px;background:linear-gradient(135deg,#10b981,#059669);color:#fff;border-radius:6px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.model-category{font-size:12px;color:#64748b;margin-bottom:8px}.model-tokens{display:flex;align-items:center;gap:6px;padding:6px 10px;background:linear-gradient(135deg,#ecfdf5,#d1fae5);border:1px solid #a7f3d0;border-radius:6px;font-size:12px;color:#065f46;font-weight:600}.model-tokens svg{width:12px;height:12px;color:#10b981}.canvas-area{flex:1;display:flex;flex-direction:column;background:#f8fafc}.canvas-header{padding:20px 24px;background:#fff;border-bottom:1px solid #e2e8f0;display:flex;align-items:center;justify-content:space-between}.canvas-title h2{font-size:24px;font-weight:700;color:#1e293b;margin:0 0 4px}.canvas-subtitle{font-size:14px;color:#64748b;margin:0}.canvas-controls{display:flex;gap:12px}.control-btn{padding:8px 12px;border:1px solid #e2e8f0;background:#fff;color:#64748b;border-radius:6px;font-size:14px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:6px;font-weight:500}.control-btn:hover{border-color:#8b7cf6;color:#8b7cf6;background:#faf5ff}.control-btn.primary{background:#8b7cf6;color:#fff;border-color:#8b7cf6}.control-btn.primary:hover{background:#7c3aed;border-color:#7c3aed}.control-btn.success{background:#10b981;color:#fff;border-color:#10b981}.control-btn.success:hover{background:#059669;border-color:#059669}.control-btn.save-run-btn{background:linear-gradient(135deg,#8b7cf6,#10b981);color:#fff;border-color:#8b7cf6;font-weight:600;padding:10px 16px}.control-btn.save-run-btn:hover{background:linear-gradient(135deg,#7c3aed,#059669);border-color:#7c3aed;transform:translateY(-1px);box-shadow:0 4px 12px #8b7cf64d}.control-btn.run-btn{background:linear-gradient(135deg,#10b981,#059669);color:#fff;border-color:#10b981;font-weight:600;padding:10px 16px}.control-btn.run-btn:hover{background:linear-gradient(135deg,#059669,#047857);border-color:#059669;transform:translateY(-1px);box-shadow:0 4px 12px #10b9814d}.canvas-workspace{flex:1;position:relative;overflow:auto;-webkit-overflow-scrolling:touch;min-width:100%;min-height:100%;background:radial-gradient(circle at 1px 1px,#cbd5e1 1px,transparent 1px);background-size:20px 20px;background-color:#f1f5f9}@media(max-width:768px){.canvas-workspace{transform-origin:0 0;transform:scale(.6);width:166.67%;height:166.67%}#connectionsSvg{transform:scale(1.667);transform-origin:0 0;width:60%;height:60%}}@media(max-width:480px){.canvas-workspace{transform-origin:0 0;transform:scale(.5);width:200%;height:200%}#connectionsSvg{transform:scale(2);transform-origin:0 0;width:50%;height:50%}}.drop-zone{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border:3px dashed rgba(139,124,246,.6);border-radius:16px;background:#ffffffe6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:40px;text-align:center;transition:all .3s ease;min-width:300px;box-shadow:0 8px 32px #0000001a}.drop-zone.active{border-color:#8b7cf6;background:#8b7cf61a;transform:translate(-50%,-50%) scale(1.05);box-shadow:0 20px 40px #8b7cf633}.drop-zone-content{color:#475569}.drop-zone-content svg{color:#8b7cf6;margin-bottom:16px;filter:drop-shadow(0 2px 4px rgba(139,124,246,.3))}.drop-zone-content h3{font-size:20px;font-weight:600;margin:0 0 8px;color:#1e293b}.drop-zone-content p{font-size:14px;margin:0;opacity:.8;color:#64748b}.connections-svg{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1}.connection-line{stroke:#8b7cf6;stroke-width:3;fill:none;marker-end:url(#arrowhead);filter:drop-shadow(0 2px 4px rgba(139,124,246,.3));transition:all .2s ease}.connection-line:hover{stroke:#7c3aed;stroke-width:4}.connection-line.temporary{stroke:#10b981;stroke-width:4;stroke-dasharray:8,4;animation:dashMove .8s linear infinite;filter:drop-shadow(0 2px 4px rgba(16,185,129,.4))}@keyframes dashMove{0%{stroke-dashoffset:0}to{stroke-dashoffset:10}}.workflow-nodes{position:relative;width:100%;height:100%;z-index:10}.workflow-node{position:absolute;width:280px;background:#fff;border:2px solid #e2e8f0;border-radius:12px;padding:20px;cursor:move;transition:all .2s ease;box-shadow:0 8px 24px #0000001a}.workflow-node:hover{border-color:#8b7cf6;box-shadow:0 12px 32px #8b7cf633;transform:translateY(-2px)}.workflow-node.dragging{transform:scale(1.05);z-index:1000;box-shadow:0 16px 40px #8b7cf64d}.node-header{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}.node-title{font-size:16px;font-weight:600;color:#1e293b;line-height:1.2}.node-priority{display:flex;align-items:center;gap:8px;font-size:13px;background:linear-gradient(135deg,#f8fafc,#f1f5f9);border:1px solid #e2e8f0;border-radius:10px;padding:8px 12px;box-shadow:0 2px 4px #0000000d}.priority-label{color:#475569;font-weight:600}.priority-input{width:70px;height:32px;border:2px solid #cbd5e1;border-radius:8px;text-align:center;font-size:14px;font-weight:700;color:#1e293b;background:#fff;padding:0 10px;cursor:text;transition:all .2s ease;box-shadow:0 1px 3px #0000001a}.priority-input:hover{border-color:#8b7cf6;background:#fff;box-shadow:0 2px 6px #8b7cf626;transform:translateY(-1px)}.priority-input:focus{outline:none;border-color:#8b7cf6;box-shadow:0 0 0 3px #8b7cf633,0 2px 8px #8b7cf61a;background:#fff;transform:translateY(-1px)}.priority-percent{color:#475569;font-weight:600;font-size:13px}.priority-input::-webkit-outer-spin-button,.priority-input::-webkit-inner-spin-button{height:32px;opacity:.8}.node-controls{display:flex;gap:4px}.node-control{background:#f8fafc;border:1px solid #e2e8f0;color:#64748b;border-radius:4px;padding:4px;cursor:pointer;transition:all .2s ease}.node-control:hover{background:#e2e8f0;border-color:#cbd5e1;color:#475569}.node-control.delete:hover{background:#fef2f2;border-color:#fecaca;color:#dc2626}.node-category{font-size:12px;color:#64748b;margin-bottom:8px}.node-tokens{display:flex;align-items:center;gap:6px;padding:6px 10px;background:#ecfdf5;border:1px solid #a7f3d0;border-radius:6px;font-size:12px;color:#065f46;font-weight:600;margin-bottom:12px}.node-tokens svg{width:12px;height:12px;color:#10b981}.connection-point{position:absolute;width:14px;height:14px;border:2px solid #8b7cf6;border-radius:50%;background:#fff;cursor:pointer;transition:all .2s ease;top:50%;transform:translateY(-50%);z-index:20}.connection-point:hover{transform:translateY(-50%) scale(1.3);border-color:#7c3aed;background:#8b7cf6;box-shadow:0 0 0 4px #8b7cf633}.connection-point.left{left:-7px}.connection-point.right{right:-7px}.connection-point.top{top:-7px;left:50%;transform:translate(-50%)}.connection-point.bottom{bottom:-7px;top:auto;left:50%;transform:translate(-50%)}.connection-point.top:hover,.connection-point.bottom:hover{transform:translate(-50%) scale(1.3)}.connection-point.top.connecting,.connection-point.bottom.connecting{transform:translate(-50%) scale(1.2)}.connection-point.top.target,.connection-point.bottom.target{transform:translate(-50%) scale(1.4)}.connection-point.connecting{border-color:#10b981;background:#10b981;box-shadow:0 0 0 4px #10b9814d;animation:pulse 1s ease-in-out infinite;transform:translateY(-50%) scale(1.2)}.connection-point.target{border-color:#f59e0b;background:#f59e0b;transform:translateY(-50%) scale(1.4);box-shadow:0 0 0 6px #f59e0b4d;animation:targetPulse .5s ease-in-out infinite}@keyframes targetPulse{0%,to{transform:translateY(-50%) scale(1.4);box-shadow:0 0 0 6px #f59e0b4d}50%{transform:translateY(-50%) scale(1.6);box-shadow:0 0 0 8px #f59e0b80}}@keyframes pulse{0%,to{box-shadow:0 0 #10b981b3}50%{box-shadow:0 0 0 8px #10b98100}}.selection-box{position:absolute;border:2px solid #3b82f6;background:#3b82f614;pointer-events:none;z-index:1000;border-radius:2px;box-shadow:0 0 0 1px #3b82f633}.workflow-node.selection-preview{border-color:#f59e0b;background:#f59e0b1a;transform:translateY(-2px)}.workflow-node.selected{border-color:#10b981;background:#10b9811a;box-shadow:0 0 0 2px #10b9814d}.connection-line.selection-preview{stroke:#f59e0b;stroke-width:4;filter:drop-shadow(0 2px 4px rgba(245,158,11,.3))}.connection-line.selected{stroke:#10b981;stroke-width:4;filter:drop-shadow(0 2px 4px rgba(16,185,129,.3))}.connection-mode-indicator{position:fixed;top:20px;right:20px;background:linear-gradient(135deg,#10b981,#059669);color:#fff;padding:12px 20px;border-radius:8px;box-shadow:0 4px 12px #10b9814d;z-index:10000;font-size:14px;font-weight:500;animation:slideIn .3s ease-out}.indicator-content{display:flex;align-items:center;gap:8px}.indicator-icon{font-size:16px}.indicator-text{white-space:nowrap}@keyframes slideIn{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}.workflow-guide{position:absolute;bottom:24px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:16px;background:#fffffff2;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);padding:12px 20px;border-radius:12px;box-shadow:0 8px 32px #0000001a;border:1px solid rgba(139,124,246,.2)}.guide-step{display:flex;align-items:center;gap:8px;color:#475569;font-size:14px}.step-number{width:20px;height:20px;background:#8b7cf6;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600}.guide-arrow{color:#94a3b8;font-size:16px}@media(max-width:1024px){.sidebar{width:280px}.sidebar-header{padding:16px}.sidebar-header h3{font-size:16px}.sidebar-content{padding:16px}.model-item{padding:14px}.workflow-node{width:200px;padding:12px}}@media(max-width:768px){.canvas-layout{position:relative}.sidebar{position:fixed;left:-100%;top:60px;width:85%;max-width:320px;height:calc(100vh - 60px);z-index:200;transition:left .3s ease;box-shadow:2px 0 12px #0000001a}.sidebar.open,.sidebar.mobile-open{left:0}.canvas-area{width:100%}.canvas-header{padding:12px 16px;flex-direction:column;align-items:flex-start;gap:10px}.canvas-title h2{font-size:18px}.canvas-subtitle{font-size:12px}.canvas-controls{width:100%;flex-wrap:wrap;gap:8px}.control-btn{flex:1 1 calc(50% - 4px);padding:10px 8px;font-size:12px;justify-content:center}.control-btn.save-run-btn,.control-btn.run-btn{flex:1 1 100%;padding:12px;font-size:14px}.sidebar-content{padding:16px}.models-section{margin-bottom:16px}.section-header{padding:12px;margin-bottom:12px}.section-title{font-size:14px}.models-count{font-size:11px}.models-list{max-height:350px;overflow-y:auto}.model-item{padding:12px}.model-name{font-size:13px;max-width:160px}.workflow-node{min-width:180px;max-width:200px;padding:14px;font-size:13px}.node-title{font-size:13px}.node-type{font-size:9px;padding:3px 6px}.node-description{font-size:11px}.node-tokens{font-size:11px;padding:6px 8px}.input-port,.output-port{width:14px;height:14px}.node-btn{padding:6px 10px;font-size:11px;min-height:36px}.drop-zone{padding:24px 16px;min-width:200px;max-width:280px}.drop-zone-content svg{width:36px;height:36px}.drop-zone-content h3{font-size:16px;margin-bottom:6px}.drop-zone-content p{font-size:12px;line-height:1.4}}@media(max-width:480px){.canvas-layout{margin-top:56px;height:calc(100vh - 56px)}.sidebar{max-height:220px}.sidebar-header{padding:10px 12px}.sidebar-header h3{font-size:14px}.sidebar-content{padding:10px 12px}.section-header{padding:10px;border-radius:8px}.section-title{font-size:13px;gap:6px}.models-count{font-size:10px}.models-list{gap:8px}.model-item{min-width:180px;max-width:180px;padding:10px;border-radius:10px}.model-name{font-size:12px;max-width:140px}.model-type{font-size:9px;padding:2px 6px}.model-category{font-size:10px;margin-bottom:6px}.model-tokens{padding:5px 7px;font-size:10px}.model-tokens svg{width:10px;height:10px}.canvas-header{padding:12px}.canvas-title h2{font-size:18px;margin-bottom:2px}.canvas-subtitle{font-size:12px}.canvas-controls{flex-wrap:wrap;gap:6px}.control-btn{padding:7px 10px;font-size:12px;flex:1;min-width:0;justify-content:center}.control-btn svg{width:14px;height:14px}.control-btn span{display:none}.control-btn.save-run-btn span,.control-btn.run-btn span{display:inline}.control-btn.save-run-btn,.control-btn.run-btn{flex:1 1 100%;font-size:13px}.canvas-workspace{background-size:15px 15px}.workflow-node{min-width:160px;max-width:180px;padding:12px;font-size:12px}.node-header{flex-direction:column;align-items:flex-start;gap:6px}.node-title{font-size:12px}.node-type{font-size:8px;padding:2px 5px}.node-description{font-size:10px;line-height:1.3}.mobile-sidebar-toggle{left:12px;top:90px;padding:10px}.sidebar{width:85%}.node-footer{gap:6px}.node-btn{padding:5px 8px;font-size:10px}.input-port,.output-port{width:12px;height:12px}.input-port:after,.output-port:after{font-size:8px}.drop-zone{padding:24px 20px;min-width:250px;max-width:90%;border-width:2px}.drop-zone-content svg{width:40px;height:40px;margin-bottom:12px}.drop-zone-content h3{font-size:16px;margin-bottom:6px}.drop-zone-content p{font-size:12px}.workflow-guide{display:none}.connection-mode-indicator{top:8px;right:8px;padding:8px 12px;font-size:12px}.indicator-icon{font-size:14px}}@media(max-width:360px){body{font-size:13px}.sidebar{max-height:200px}.canvas-workspace{background-size:15px 15px}.model-item{min-width:160px;max-width:160px}.model-name{font-size:12px}.model-tokens{font-size:10px;padding:4px 8px}.canvas-title h2{font-size:16px}.workflow-node{width:140px;padding:8px}.node-title{font-size:11px}.drop-zone{padding:16px;min-width:180px}.drop-zone-content h3{font-size:14px}.drop-zone-content p{font-size:11px}}@keyframes nodeAppear{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.workflow-node.appear{animation:nodeAppear .3s ease-out}.workflow-node.selected{border-color:#f59e0b;box-shadow:0 0 0 2px #f59e0b80}.connection-line.selected{stroke:#f59e0b;stroke-width:4}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:none;align-items:center;justify-content:center;z-index:10000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.modal-overlay.show{display:flex}.modal-content{background:#fff;border-radius:12px;box-shadow:0 20px 40px #0003;width:90%;max-width:500px;max-height:90vh;overflow-y:auto;animation:modalSlideIn .3s ease-out}@keyframes modalSlideIn{0%{opacity:0;transform:translateY(-20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.modal-header{padding:24px 24px 16px;border-bottom:1px solid #e2e8f0;display:flex;align-items:center;justify-content:space-between}.modal-header h2{margin:0;font-size:20px;font-weight:600;color:#1e293b}.close-btn{background:none;border:none;font-size:24px;color:#64748b;cursor:pointer;padding:4px;border-radius:4px;transition:all .2s ease}.close-btn:hover{background:#f1f5f9;color:#334155}.modal-body{padding:24px}.form-group{margin-bottom:20px}.form-group label{display:block;margin-bottom:8px;font-weight:500;color:#374151;font-size:14px}.form-group input[type=text],.form-group textarea{width:100%;padding:12px 16px;border:1px solid #d1d5db;border-radius:8px;font-size:14px;transition:all .2s ease;background:#f9fafb}.form-group input[type=text]:focus,.form-group textarea:focus{outline:none;border-color:#8b7cf6;background:#fff;box-shadow:0 0 0 3px #8b7cf61a}.form-group textarea{resize:vertical;min-height:80px;font-family:inherit}.radio-group{display:flex;gap:20px;margin-top:8px}.radio-group input[type=radio]{margin-right:8px}.radio-group label{display:inline;margin-bottom:0;cursor:pointer;font-weight:400}.modal-footer{padding:16px 24px 24px;border-top:1px solid #e2e8f0;display:flex;gap:12px;justify-content:flex-end}.action-btn{padding:10px 20px;border:none;border-radius:8px;font-weight:500;font-size:14px;cursor:pointer;transition:all .2s ease}.action-btn.cancel-btn{background:#f1f5f9;color:#64748b}.action-btn.cancel-btn:hover{background:#e2e8f0;color:#334155}.action-btn.save-btn{background:linear-gradient(135deg,#8b7cf6,#10b981);color:#fff}.action-btn.save-btn:hover{background:linear-gradient(135deg,#7c3aed,#059669);transform:translateY(-1px);box-shadow:0 4px 12px #8b7cf64d}@media(max-width:768px){.modal-content{width:95%;max-height:85vh}.modal-header{padding:20px 20px 14px}.modal-header h2{font-size:18px}.modal-body{padding:20px}.form-group{margin-bottom:16px}.form-group label{font-size:13px}.form-group input[type=text],.form-group textarea{padding:10px 14px;font-size:13px}.modal-footer{padding:14px 20px 20px;gap:10px}.action-btn{padding:9px 16px;font-size:13px}}@media(max-width:480px){.modal-content{width:95%;max-height:90vh;border-radius:10px}.modal-header{padding:16px}.modal-header h2{font-size:16px}.close-btn{font-size:20px}.modal-body{padding:16px}.form-group{margin-bottom:14px}.form-group label{font-size:12px;margin-bottom:6px}.form-group input[type=text],.form-group textarea{padding:10px 12px;font-size:13px}.form-group textarea{min-height:60px}.radio-group{gap:16px;flex-direction:column;align-items:flex-start}.modal-footer{padding:12px 16px 16px;gap:8px;flex-direction:column}.action-btn{width:100%;padding:10px;font-size:13px}}.header-right{display:flex;align-items:center;gap:12px}@media(hover:none)and (pointer:coarse){.model-item{padding:18px}.control-btn{min-height:44px;min-width:44px}.node-btn{min-height:36px;min-width:36px}.model-item:hover,.control-btn:hover,.workflow-node:hover{transform:none}}.mobile-sidebar-toggle{position:fixed;right:16px;bottom:100px;left:auto;width:56px;height:56px;border-radius:50%;z-index:180;background:linear-gradient(135deg,#8b7cf6,#10b981);color:#fff;border:none;padding:0;box-shadow:0 4px 12px #8b7cf666;cursor:pointer;display:none;align-items:center;justify-content:center;transition:all .2s ease}.mobile-sidebar-toggle:active{transform:scale(.95)}.mobile-sidebar-toggle svg{width:24px;height:24px}.sidebar-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;z-index:190}.sidebar-overlay.show{display:block}@media(max-width:768px){.mobile-sidebar-toggle{display:flex}}