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