:root{--bg-primary:#0a0e27;--bg-secondary:#151933;--bg-tertiary:#1e2139;--bg-hover:#252a45;--text-primary:#e2e8f0;--text-secondary:#94a3b8;--text-muted:#64748b;--accent-primary:#6366f1;--accent-secondary:#8b5cf6;--accent-hover:#4f46e5;--accent-glow:rgba(99,102,241,0.3);--success:#10b981;--warning:#f59e0b;--error:#ef4444;--border-color:rgba(148,163,184,0.12);--shadow-sm:0 1px 3px rgba(0,0,0,0.3);--shadow-md:0 4px 12px rgba(0,0,0,0.4);--shadow-lg:0 10px 30px rgba(0,0,0,0.5);--shadow-xl:0 20px 50px rgba(0,0,0,0.6);--radius-sm:6px;--radius-md:10px;--radius-lg:14px;--transition:all 0.3s cubic-bezier(0.4,0,0.2,1)}body.light-mode{--bg-primary:#f8fafc;--bg-secondary:#fff;--bg-tertiary:#f1f5f9;--bg-hover:#e2e8f0;--text-primary:#1e293b;--text-secondary:#475569;--text-muted:#94a3b8;--accent-primary:#6366f1;--accent-secondary:#8b5cf6;--accent-hover:#4f46e5;--accent-glow:rgba(99,102,241,0.2);--border-color:rgba(15,23,42,0.15);--shadow-sm:0 1px 3px rgba(0,0,0,0.08);--shadow-md:0 4px 12px rgba(0,0,0,0.1);--shadow-lg:0 10px 30px rgba(0,0,0,0.12);--shadow-xl:0 20px 50px rgba(0,0,0,0.15)}body.theme-ocean{--bg-primary:#0c1e2e;--bg-secondary:#143447;--bg-tertiary:#1c4a61;--bg-hover:#24607a;--text-primary:#e0f2fe;--text-secondary:#7dd3fc;--text-muted:#38bdf8;--accent-primary:#06b6d4;--accent-secondary:#0891b2;--accent-hover:#0e7490;--accent-glow:rgba(6,182,212,0.3);--border-color:rgba(125,211,252,0.12);--shadow-sm:0 1px 3px rgba(0,0,0,0.3);--shadow-md:0 4px 12px rgba(0,0,0,0.4);--shadow-lg:0 10px 30px rgba(0,0,0,0.5);--shadow-xl:0 20px 50px rgba(0,0,0,0.6)}body.theme-forest{--bg-primary:#0a1f0f;--bg-secondary:#1a3a22;--bg-tertiary:#2a5535;--bg-hover:#3a7048;--text-primary:#dcfce7;--text-secondary:#86efac;--text-muted:#4ade80;--accent-primary:#22c55e;--accent-secondary:#16a34a;--accent-hover:#15803d;--accent-glow:rgba(34,197,94,0.3);--border-color:rgba(134,239,172,0.12);--shadow-sm:0 1px 3px rgba(0,0,0,0.3);--shadow-md:0 4px 12px rgba(0,0,0,0.4);--shadow-lg:0 10px 30px rgba(0,0,0,0.5);--shadow-xl:0 20px 50px rgba(0,0,0,0.6)}body.theme-sunset{--bg-primary:#2d1510;--bg-secondary:#4a2318;--bg-tertiary:#673120;--bg-hover:#843f28;--text-primary:#fed7aa;--text-secondary:#fdba74;--text-muted:#fb923c;--accent-primary:#f97316;--accent-secondary:#ea580c;--accent-hover:#c2410c;--accent-glow:rgba(249,115,22,0.3);--border-color:rgba(253,186,116,0.12);--shadow-sm:0 1px 3px rgba(0,0,0,0.3);--shadow-md:0 4px 12px rgba(0,0,0,0.4);--shadow-lg:0 10px 30px rgba(0,0,0,0.5);--shadow-xl:0 20px 50px rgba(0,0,0,0.6)}body.theme-purple{--bg-primary:#1e1030;--bg-secondary:#2e1845;--bg-tertiary:#3e205a;--bg-hover:#4e286f;--text-primary:#f3e8ff;--text-secondary:#d8b4fe;--text-muted:#c084fc;--accent-primary:#a855f7;--accent-secondary:#9333ea;--accent-hover:#7e22ce;--accent-glow:rgba(168,85,247,0.3);--border-color:rgba(216,180,254,0.12);--shadow-sm:0 1px 3px rgba(0,0,0,0.3);--shadow-md:0 4px 12px rgba(0,0,0,0.4);--shadow-lg:0 10px 30px rgba(0,0,0,0.5);--shadow-xl:0 20px 50px rgba(0,0,0,0.6)}body.theme-rose{--bg-primary:#2d1620;--bg-secondary:#4a1e31;--bg-tertiary:#672642;--bg-hover:#842e53;--text-primary:#fce7f3;--text-secondary:#fbcfe8;--text-muted:#f9a8d4;--accent-primary:#ec4899;--accent-secondary:#db2777;--accent-hover:#be185d;--accent-glow:rgba(236,72,153,0.3);--border-color:rgba(251,207,232,0.12);--shadow-sm:0 1px 3px rgba(0,0,0,0.3);--shadow-md:0 4px 12px rgba(0,0,0,0.4);--shadow-lg:0 10px 30px rgba(0,0,0,0.5);--shadow-xl:0 20px 50px rgba(0,0,0,0.6)}body.theme-midnight{--bg-primary:#0f1729;--bg-secondary:#1e293b;--bg-tertiary:#334155;--bg-hover:#475569;--text-primary:#e2e8f0;--text-secondary:#cbd5e1;--text-muted:#94a3b8;--accent-primary:#3b82f6;--accent-secondary:#2563eb;--accent-hover:#1d4ed8;--accent-glow:rgba(59,130,246,0.3);--border-color:rgba(203,213,225,0.12);--shadow-sm:0 1px 3px rgba(0,0,0,0.3);--shadow-md:0 4px 12px rgba(0,0,0,0.4);--shadow-lg:0 10px 30px rgba(0,0,0,0.5);--shadow-xl:0 20px 50px rgba(0,0,0,0.6)}body.theme-emerald{--bg-primary:#022c22;--bg-secondary:#064e3b;--bg-tertiary:#047857;--bg-hover:#059669;--text-primary:#d1fae5;--text-secondary:#6ee7b7;--text-muted:#34d399;--accent-primary:#10b981;--accent-secondary:#059669;--accent-hover:#047857;--accent-glow:rgba(16,185,129,0.3);--border-color:rgba(110,231,183,0.12);--shadow-sm:0 1px 3px rgba(0,0,0,0.3);--shadow-md:0 4px 12px rgba(0,0,0,0.4);--shadow-lg:0 10px 30px rgba(0,0,0,0.5);--shadow-xl:0 20px 50px rgba(0,0,0,0.6)}body.theme-amber{--bg-primary:#2d1f0a;--bg-secondary:#4a3410;--bg-tertiary:#674916;--bg-hover:#845e1c;--text-primary:#fef3c7;--text-secondary:#fde68a;--text-muted:#fbbf24;--accent-primary:#f59e0b;--accent-secondary:#d97706;--accent-hover:#b45309;--accent-glow:rgba(245,158,11,0.3);--border-color:rgba(253,230,138,0.12);--shadow-sm:0 1px 3px rgba(0,0,0,0.3);--shadow-md:0 4px 12px rgba(0,0,0,0.4);--shadow-lg:0 10px 30px rgba(0,0,0,0.5);--shadow-xl:0 20px 50px rgba(0,0,0,0.6)}body.theme-cyan{--bg-primary:#0a1f1f;--bg-secondary:#103535;--bg-tertiary:#164b4b;--bg-hover:#1c6161;--text-primary:#cffafe;--text-secondary:#67e8f9;--text-muted:#22d3ee;--accent-primary:#06b6d4;--accent-secondary:#0891b2;--accent-hover:#0e7490;--accent-glow:rgba(6,182,212,0.3);--border-color:rgba(103,232,249,0.12);--shadow-sm:0 1px 3px rgba(0,0,0,0.3);--shadow-md:0 4px 12px rgba(0,0,0,0.4);--shadow-lg:0 10px 30px rgba(0,0,0,0.5);--shadow-xl:0 20px 50px rgba(0,0,0,0.6)}body.theme-cherry{--bg-primary:#2d1520;--bg-secondary:#4a1e31;--bg-tertiary:#672742;--bg-hover:#843053;--text-primary:#fce7f3;--text-secondary:#f9a8d4;--text-muted:#f472b6;--accent-primary:#ec4899;--accent-secondary:#db2777;--accent-hover:#be185d;--accent-glow:rgba(236,72,153,0.3);--border-color:rgba(249,168,212,0.12);--shadow-sm:0 1px 3px rgba(0,0,0,0.3);--shadow-md:0 4px 12px rgba(0,0,0,0.4);--shadow-lg:0 10px 30px rgba(0,0,0,0.5);--shadow-xl:0 20px 50px rgba(0,0,0,0.6)}body.light-mode .node-item{border:1px solid #cbd5e1}body.light-mode .input-textarea,body.light-mode .property-item input[type="text"],body.light-mode .property-item textarea,body.light-mode .property-item select{border:1px solid #cbd5e1;background:#fff}body.light-mode .execution-result,body.light-mode .execution-steps{background:#fff;border:1px solid #e2e8f0}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Roboto','Helvetica','Arial',sans-serif;background:var(--bg-primary);color:var(--text-primary);transition:var(--transition)}body:has(#stringFlowComponent.fullscreen){overflow:hidden;height:100vh}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-secondary);border-radius:4px}::-webkit-scrollbar-thumb{background:var(--bg-tertiary);border-radius:4px;transition:background 0.2s ease}::-webkit-scrollbar-thumb:hover{background:var(--accent-primary)}.string-flow-container{display:flex;flex-direction:column;height:100vh}#stringFlowComponent{display:flex;flex-direction:column;height:100%}#stringFlowComponent.fullscreen{position:fixed;top:0;left:0;right:0;bottom:0;z-index:99999}.top-menu{display:flex;justify-content:space-between;align-items:center;padding:8px 14px;background:linear-gradient(135deg,#667eea 0,#764ba2 100%);gap:10px;box-shadow:0 2px 12px rgba(0,0,0,0.15);position:relative;z-index:100}.menu-section{display:flex;align-items:center;gap:6px}.menu-section-left{flex:0 0 auto}.menu-section-center{flex:0 0 auto}.menu-section-right{flex:0 0 auto;margin-left:auto}.menu-divider{width:1px;height:20px;background:rgba(255,255,255,0.25);margin:0 3px}.menu-group{display:flex;gap:3px;align-items:center;padding:2px;border-radius:6px}.menu-btn{padding:5px 10px;background:rgba(255,255,255,0.95);border:none;border-radius:6px;cursor:pointer;font-size:11px;font-weight:500;color:#667eea;transition:var(--transition);white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:4px;line-height:1.4;vertical-align:middle}.menu-btn:hover:not(:disabled){background:white;box-shadow:0 2px 8px rgba(0,0,0,0.15)}.menu-btn:disabled{opacity:0.5;cursor:not-allowed}.menu-btn.primary{background:linear-gradient(135deg,#667eea,#764ba2);color:white}.menu-btn.primary:hover:not(:disabled){background:linear-gradient(135deg,#7c8ef0,#8759b0);box-shadow:0 4px 12px rgba(102,126,234,0.4)}.menu-btn.secondary{background:rgba(255,255,255,0.85);border:2px solid transparent !important}.menu-btn.secondary:hover:not(:disabled){background:rgba(255,255,255,1);border:2px solid transparent !important}.menu-btn.success{background:linear-gradient(135deg,#10b981,#059669);color:white}.menu-btn.success:hover:not(:disabled){background:linear-gradient(135deg,#34d399,#10b981);box-shadow:0 4px 12px rgba(16,185,129,0.4)}.menu-btn.info{background:linear-gradient(135deg,#3b82f6,#2563eb);color:white}.menu-btn.info:hover:not(:disabled){background:linear-gradient(135deg,#60a5fa,#3b82f6);box-shadow:0 4px 12px rgba(59,130,246,0.4)}.menu-btn.small{font-size:11px;padding:5px 10px}.btn-icon{font-size:14px;line-height:1;display:inline-block;vertical-align:middle}#gridToggleBtn{font-size:14px}.zoom-menu-btn{padding:5px 8px;min-width:28px;font-size:16px;line-height:1}.zoom-menu-btn .btn-icon{font-size:16px}.workspace{display:flex;flex:1;overflow:hidden;position:relative}.left-panel{width:260px;background:var(--bg-secondary);border-right:1px solid var(--border-color);overflow-y:auto;overflow-x:hidden;padding:16px;display:flex;flex-direction:column;gap:16px;box-shadow:2px 0 6px rgba(0,0,0,0.05)}body.light-mode .left-panel{border-right:1px solid #cbd5e1;box-shadow:2px 0 8px rgba(0,0,0,0.08)}.right-panel{width:320px;min-width:280px;max-width:600px;background:var(--bg-secondary);border-left:1px solid var(--border-color);overflow-y:auto;overflow-x:hidden;padding:16px;display:flex;flex-direction:column;gap:16px;box-shadow:-2px 0 6px rgba(0,0,0,0.05);position:relative}body.light-mode .right-panel{border-left:1px solid #cbd5e1;box-shadow:-2px 0 8px rgba(0,0,0,0.08)}.resize-handle{position:absolute;left:0;top:0;bottom:0;width:5px;cursor:ew-resize;background:transparent;z-index:10;transition:background 0.2s ease}.resize-handle:hover{background:var(--accent-primary)}.resize-handle.resizing{background:var(--accent-primary)}.panel-section{background:var(--bg-tertiary);border-radius:var(--radius-md);padding:14px;box-shadow:var(--shadow-sm);overflow:visible;max-height:none}.panel-section h3{font-size:13px;font-weight:600;color:var(--text-primary);margin-bottom:10px;text-transform:uppercase;letter-spacing:0.5px;word-wrap:break-word;overflow-wrap:break-word}.left-panel .panel-section{max-height:fit-content}.left-panel .panel-section .node-grid{max-height:none;overflow-y:visible}.left-panel .collapsible-section{margin-bottom:12px}.left-panel .section-header{padding:8px 12px}.left-panel .section-header h3{font-size:12px;text-transform:uppercase;letter-spacing:0.5px}.collapsible-section{margin-bottom:10px;border-radius:var(--radius-md);overflow:visible;border:1px solid var(--border-color);background:var(--bg-secondary)}.section-header{display:flex;justify-content:space-between;align-items:center;padding:6px 10px;cursor:pointer;background:var(--bg-tertiary);transition:background 0.2s ease;user-select:none;gap:6px}.section-header:hover{background:var(--bg-hover)}.section-header h3{margin:0;font-size:12px;font-weight:600;color:var(--text-primary);text-transform:none;letter-spacing:normal;word-wrap:break-word;overflow-wrap:break-word;flex:1;min-width:0}.toggle-icon{font-size:9px;color:var(--text-muted);transition:transform 0.3s ease,color 0.2s ease;display:inline-block;width:14px;text-align:center;font-weight:bold;flex-shrink:0}.toggle-icon.collapsed{color:var(--text-secondary)}.section-content{padding:8px;max-height:none;overflow-y:visible;transition:max-height 0.3s ease,padding 0.3s ease,opacity 0.3s ease;opacity:1}.section-content.collapsed{max-height:0;padding:0 8px;opacity:0;overflow:hidden}.panel-section p{font-size:11px;color:var(--text-muted);margin-bottom:10px}.node-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;max-height:none;overflow-y:visible}.node-item{background:var(--bg-hover);padding:8px 6px;border-radius:var(--radius-sm);cursor:grab;font-size:10px;text-align:center;transition:var(--transition);border:1px solid var(--border-color);user-select:none;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}.node-item:active{cursor:grabbing}.node-item:hover{background:var(--accent-primary);color:white;transform:translateY(-2px);box-shadow:var(--shadow-md)}.input-textarea{width:100%;min-height:80px;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--radius-sm);padding:8px;color:var(--text-primary);font-size:12px;line-height:1.5;font-family:'Consolas','Monaco',monospace;resize:vertical;transition:var(--transition)}.input-textarea:focus{outline:none;border-color:var(--accent-primary);box-shadow:0 0 0 3px var(--accent-glow)}.canvas-container{flex:1;position:relative;background:var(--bg-primary);overflow:hidden}#stringFlowCanvas{width:100%;height:100%;display:block;cursor:grab}#stringFlowCanvas:active{cursor:grabbing}#stringFlowCanvas.connecting{cursor:crosshair}#stringFlowCanvas.dragging-node{cursor:move}#stringFlowCanvas.dragging-comment{cursor:move}.status-message{position:absolute;top:20px;left:50%;transform:translateX(-50%);background:var(--bg-tertiary);padding:12px 24px;border-radius:var(--radius-md);box-shadow:var(--shadow-lg);font-size:13px;z-index:5000;animation:fadeIn 0.3s ease;pointer-events:none}@keyframes fadeIn{from{opacity:0;transform:translateX(-50%) translateY(-10px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}.zoom-level-widget{position:absolute;bottom:20px;right:20px;z-index:900}.zoom-display{display:flex;align-items:center;gap:6px;background:var(--bg-tertiary);padding:6px 12px;border-radius:var(--radius-md);box-shadow:var(--shadow-md);cursor:pointer;transition:var(--transition);border:1px solid var(--border-color)}.zoom-display:hover{background:var(--bg-hover);box-shadow:var(--shadow-lg);border-color:var(--accent-primary);transform:translateY(-2px)}.zoom-icon{font-size:14px;color:var(--text-primary)}.zoom-value{font-size:12px;font-weight:600;color:var(--text-primary);min-width:40px;text-align:right}.zoom-dropdown{position:absolute;bottom:calc(100% + 8px);right:0;background:var(--bg-tertiary);border-radius:var(--radius-md);box-shadow:var(--shadow-xl);padding:6px;min-width:120px;animation:fadeIn 0.2s ease;border:1px solid var(--border-color);z-index:950}.zoom-dropdown-item{padding:8px 12px;border-radius:var(--radius-sm);cursor:pointer;font-size:12px;transition:var(--transition);color:var(--text-primary)}.zoom-dropdown-item:hover{background:var(--bg-hover);transform:translateX(4px)}.zoom-dropdown-item.active{background:var(--accent-primary);color:white;font-weight:600;box-shadow:0 2px 8px rgba(99,102,241,0.3)}.zoom-dropdown-divider{height:1px;background:var(--border-color);margin:4px 0}.menu-dropdown-wrapper{position:relative;display:inline-block}.menu-dropdown{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--bg-tertiary);border-radius:var(--radius-md);box-shadow:var(--shadow-xl);padding:8px;min-width:200px;animation:dropdownSlideIn 0.25s cubic-bezier(0.4,0,0.2,1);border:1px solid var(--border-color);z-index:1000}#themeDropdown{min-width:280px;max-height:400px;overflow-y:auto}@keyframes dropdownSlideIn{from{opacity:0;transform:translateX(-50%) translateY(-10px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}.dropdown-item{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:var(--radius-sm);cursor:pointer;font-size:13px;transition:all 0.2s cubic-bezier(0.4,0,0.2,1);color:var(--text-primary);position:relative;overflow:hidden}.dropdown-item::before{content:'';position:absolute;left:0;top:0;height:100%;width:0;background:linear-gradient(90deg,rgba(99,102,241,0.15),transparent);transition:width 0.3s cubic-bezier(0.4,0,0.2,1)}.dropdown-item:hover::before{width:100%}.dropdown-item:hover{background:var(--bg-hover);transform:translateX(4px);box-shadow:0 2px 8px rgba(0,0,0,0.1)}.dropdown-item.active{background:linear-gradient(135deg,rgba(99,102,241,0.25),rgba(139,92,246,0.25));border-left:3px solid var(--accent-primary);padding-left:11px;box-shadow:inset 0 0 20px rgba(99,102,241,0.1)}.dropdown-item.active::after{content:'✓';position:absolute;right:12px;font-size:14px;color:var(--accent-primary);font-weight:bold}.dropdown-item.active .dropdown-label{color:var(--accent-primary);font-weight:600}.dropdown-icon{font-size:16px;flex-shrink:0;display:flex;align-items:center;justify-content:center;width:24px;position:relative;z-index:1}.dropdown-label{flex:1;font-size:13px;font-weight:500;position:relative;z-index:1}.theme-preview{width:20px;height:20px;border-radius:50%;flex-shrink:0;border:2px solid var(--border-color);box-shadow:0 2px 4px rgba(0,0,0,0.2)}.dropdown-divider{height:1px;background:var(--border-color);margin:6px 0}#gridToggleBtn{min-width:36px;display:flex;align-items:center;justify-content:center;padding:5px 8px;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);position:relative}#gridToggleBtn::after{content:'▼';position:absolute;bottom:2px;right:2px;font-size:6px;opacity:0.6}#gridToggleBtn:hover{transform:scale(1.15) rotate(5deg)}#gridToggleBtn:active{transform:scale(0.95)}#propertyPanel{position:absolute;top:20px;right:20px;width:300px;min-width:280px;max-width:500px;background:var(--bg-tertiary);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);z-index:1000;border:2px solid var(--accent-primary)}#propertyPanel:not(.dragging):not([style*="left"]){animation:slideIn 0.3s ease}#propertyPanel.dragging{animation:none !important;transition:none !important}@keyframes slideIn{from{transform:translateX(100px);opacity:0}to{transform:translateX(0);opacity:1}}.property-panel{padding:10px;transition:max-height 0.3s ease,opacity 0.3s ease;max-height:600px;overflow-y:auto;opacity:1}.property-panel.collapsed{max-height:0;padding:0;opacity:0;overflow:hidden}.property-item{margin-bottom:12px}.property-item label{display:block;font-size:11px;font-weight:600;color:var(--text-secondary);margin-bottom:6px;text-transform:uppercase;letter-spacing:0.5px;word-wrap:break-word;overflow-wrap:break-word}.property-item input[type="text"],.property-item textarea,.property-item select{width:100%;min-width:0;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--radius-sm);padding:8px 10px;color:var(--text-primary);font-size:12px;transition:var(--transition);box-sizing:border-box;word-wrap:break-word;overflow-wrap:break-word}.node-description{background:var(--bg-hover);border-left:3px solid var(--accent-primary);padding:10px;margin-bottom:15px;border-radius:var(--radius-sm);display:flex;align-items:flex-start;gap:10px}.desc-icon{font-size:18px;flex-shrink:0}.desc-text{font-size:11px;color:var(--text-secondary);line-height:1.6}.output-type-info{background:linear-gradient(135deg,rgba(99,102,241,0.1),rgba(139,92,246,0.1));border:1px solid rgba(99,102,241,0.3);border-radius:var(--radius-sm);padding:10px 12px;margin-bottom:15px;display:flex;align-items:center;gap:10px}.output-type-label{font-size:11px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:0.5px;flex-shrink:0}.output-type-value{font-size:12px;font-weight:600;color:var(--accent-primary);background:rgba(99,102,241,0.15);padding:4px 10px;border-radius:12px;flex:1;text-align:center}.comment-edit-box{font-family:'Consolas','Monaco','Courier New',monospace;font-size:12px;line-height:1.5;padding:10px;background:rgba(255,255,255,0.98);border:2px solid var(--warning);border-radius:var(--radius-sm);color:#1e293b;resize:both;box-shadow:0 4px 12px rgba(0,0,0,0.2),0 0 0 4px rgba(245,158,11,0.2);z-index:2000;outline:none}.comment-edit-box:focus{border-color:var(--accent-primary);box-shadow:0 4px 16px rgba(0,0,0,0.3),0 0 0 4px rgba(99,102,241,0.3)}.enlarge-btn{background:none;border:none;font-size:14px;cursor:pointer;padding:4px 8px;color:var(--text-secondary);transition:transform 0.2s ease,color 0.2s ease;opacity:0.7}.enlarge-btn:hover{color:var(--accent-primary);transform:scale(1.2);opacity:1}.panel-enlarge-modal{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.75);z-index:100000;align-items:center;justify-content:center;padding:20px}.panel-enlarge-content{max-width:1200px;width:90%;max-height:90vh;display:flex;flex-direction:column}.panel-enlarge-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--border-color);background:var(--bg-tertiary);border-radius:var(--radius-lg) var(--radius-lg) 0 0}.panel-enlarge-header h3{margin:0;font-size:18px;font-weight:600;color:var(--text-primary)}.panel-enlarge-body{flex:1;padding:20px;overflow-y:auto;background:var(--bg-secondary);border-radius:0 0 var(--radius-lg) var(--radius-lg)}.enlarged-textarea{width:100%;font-family:'Consolas','Monaco',monospace;font-size:14px;line-height:1.6;padding:16px;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-primary);resize:vertical}.enlarged-result,.enlarged-steps{font-family:'Consolas','Monaco',monospace;font-size:14px;line-height:1.6;padding:16px;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-primary);min-height:400px;white-space:pre-wrap;word-wrap:break-word}.property-item input[readonly]{opacity:0.7;cursor:not-allowed}.property-item input:focus,.property-item textarea:focus,.property-item select:focus{outline:none;border-color:var(--accent-primary);box-shadow:0 0 0 3px var(--accent-glow)}.close-btn{background:linear-gradient(135deg,rgba(255,255,255,0.1),rgba(255,255,255,0.05));border:1px solid var(--border-color);color:var(--text-secondary);font-size:20px;font-weight:400;line-height:1;cursor:pointer;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:8px;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);opacity:0.8;box-shadow:0 2px 4px rgba(0,0,0,0.1);position:relative;overflow:hidden}.close-btn::before{content:'';position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:rgba(239,68,68,0.3);transform:translate(-50%,-50%);transition:width 0.3s,height 0.3s}.close-btn:hover::before{width:100%;height:100%}.close-btn:hover{background:linear-gradient(135deg,#ef4444,#dc2626);border-color:#dc2626;color:white;opacity:1;transform:scale(1.15) rotate(90deg);box-shadow:0 4px 12px rgba(239,68,68,0.4),0 0 0 3px rgba(239,68,68,0.1)}.close-btn:active{transform:scale(1.05) rotate(90deg)}.modal-close{background:linear-gradient(135deg,rgba(255,255,255,0.1),rgba(255,255,255,0.05));border:1px solid var(--border-color);color:var(--text-secondary);font-size:20px;font-weight:400;line-height:1;cursor:pointer;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:8px;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);opacity:0.8;box-shadow:0 2px 4px rgba(0,0,0,0.1);position:relative;overflow:hidden}.modal-close::before{content:'';position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:rgba(239,68,68,0.3);transform:translate(-50%,-50%);transition:width 0.3s,height 0.3s}.modal-close:hover::before{width:100%;height:100%}.modal-close:hover{background:linear-gradient(135deg,#ef4444,#dc2626);border-color:#dc2626;color:white;opacity:1;transform:scale(1.15) rotate(90deg);box-shadow:0 4px 12px rgba(239,68,68,0.4),0 0 0 3px rgba(239,68,68,0.1)}.modal-close:active{transform:scale(1.05) rotate(90deg)}.execution-result,.execution-steps{background:var(--bg-primary);border-radius:var(--radius-sm);padding:8px;min-height:60px;max-height:200px;overflow-y:auto;font-size:12px;line-height:1.5;font-family:'Consolas','Monaco',monospace;word-wrap:break-word;white-space:pre-wrap}.hint-text{color:var(--text-muted);font-style:italic;text-align:center;padding:15px 10px;font-size:11px}.step-item{background:var(--bg-tertiary);padding:8px 10px;border-radius:var(--radius-sm);margin-bottom:6px;border-left:3px solid var(--accent-primary);transition:var(--transition)}.step-item:hover{background:var(--bg-hover);transform:translateX(2px)}.step-title{font-weight:600;color:var(--accent-primary);margin-bottom:4px;font-size:11px}.step-detail{font-size:10px;color:var(--text-secondary);margin-top:4px;line-height:1.4}.context-menu{position:absolute;background:var(--bg-tertiary);border-radius:var(--radius-md);box-shadow:var(--shadow-xl);padding:6px;min-width:160px;z-index:100001;display:none;animation:fadeIn 0.15s ease;border:1px solid var(--border-color)}.context-menu-item{padding:8px 12px;cursor:pointer;font-size:12px;border-radius:var(--radius-sm);transition:var(--transition)}.context-menu-item:hover{background:var(--bg-hover)}.context-menu-divider{height:1px;background:var(--border-color);margin:4px 0}.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.75);backdrop-filter:blur(6px);z-index:100000;animation:fadeIn 0.3s ease}.modal.active{display:flex;align-items:center;justify-content:center}.modal-content{background:var(--bg-secondary);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl),0 0 0 1px var(--border-color);max-width:900px;max-height:85vh;width:90%;overflow-y:auto;animation:modalFadeIn 0.3s ease-out;border:2px solid var(--accent-primary)}body.light-mode .modal-content{border:2px solid var(--border-color);box-shadow:0 20px 60px rgba(0,0,0,0.2),0 0 0 1px rgba(0,0,0,0.05)}@keyframes modalFadeIn{from{opacity:0;transform:scale(0.9) translateY(-20px)}to{opacity:1;transform:scale(1) translateY(0)}}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:18px 24px;border-bottom:2px solid var(--border-color);background:linear-gradient(135deg,var(--bg-tertiary) 0,var(--bg-secondary) 100%);position:relative}.modal-header::after{content:'';position:absolute;bottom:-2px;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--accent-primary),var(--accent-secondary))}.modal-header h2{font-size:18px;font-weight:700;color:var(--accent-primary);display:flex;align-items:center;gap:8px}.template-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;padding:20px}.template-item{background:var(--bg-tertiary);padding:16px;border-radius:var(--radius-md);cursor:pointer;transition:var(--transition);border:2px solid transparent}.template-item:hover{border-color:var(--accent-primary);transform:translateY(-4px);box-shadow:var(--shadow-lg)}.template-item h4{font-size:14px;font-weight:600;margin-bottom:8px;color:var(--text-primary)}.template-item p{font-size:11px;color:var(--text-muted);line-height:1.5}.shortcuts-list{padding:20px 24px}.shortcut-item{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--border-color);transition:var(--transition);border-radius:var(--radius-sm)}.shortcut-item:hover{background:var(--bg-hover);border-bottom-color:transparent;transform:translateX(4px)}.shortcut-item:last-child{border-bottom:none}.shortcut-key{background:linear-gradient(135deg,var(--bg-tertiary),var(--bg-hover));padding:6px 12px;border-radius:var(--radius-sm);font-family:'Consolas','Monaco',monospace;font-size:12px;font-weight:700;color:var(--accent-primary);border:1px solid var(--border-color);box-shadow:0 2px 4px rgba(0,0,0,0.1),inset 0 -2px 0 rgba(0,0,0,0.1);letter-spacing:0.5px}.shortcut-desc{font-size:13px;color:var(--text-secondary);font-weight:500}.tutorial-section{margin-bottom:24px;padding:16px 20px;background:var(--bg-tertiary);border-radius:var(--radius-md);border-left:4px solid var(--accent-primary);transition:var(--transition)}.tutorial-section:hover{background:var(--bg-hover);box-shadow:var(--shadow-sm)}.tutorial-section h3{font-size:17px;font-weight:700;margin-bottom:12px;color:var(--accent-primary);display:flex;align-items:center;gap:10px}.tutorial-section p{font-size:13px;line-height:1.7;color:var(--text-secondary);margin-bottom:10px}.tutorial-section ul,.tutorial-section ol{padding-left:28px;color:var(--text-secondary);font-size:13px;line-height:1.6}.tutorial-section li{margin-bottom:10px}.tutorial-section li::marker{color:var(--accent-primary)}.tutorial-section table{font-size:13px;color:var(--text-secondary);width:100%;border-collapse:collapse}.tutorial-section table td,.tutorial-section table th{padding:8px;border:1px solid var(--border-color)}.template-category{margin-bottom:14px;padding:14px;background:var(--bg-tertiary);border-radius:var(--radius-md);border:1px solid var(--border-color)}.template-category:last-child{margin-bottom:0}body.light-mode .template-category{background:#f8fafc;border:1px solid #e2e8f0;box-shadow:0 2px 4px rgba(0,0,0,0.05)}.template-category-title{font-size:13px;font-weight:600;margin-bottom:10px;color:var(--text-primary);padding:6px 10px;background:linear-gradient(90deg,var(--accent-primary),var(--accent-secondary));border-radius:var(--radius-sm);display:flex;align-items:center;gap:6px;color:white}.template-icon{font-size:20px;margin-bottom:4px;text-align:center}.template-badge{display:inline-block;padding:2px 5px;border-radius:8px;font-size:8px;font-weight:600;margin-top:4px;background:var(--bg-tertiary);color:var(--text-secondary)}.template-badge.featured{background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));color:white;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.7}}.template-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:9px;padding:0}.template-item{background:var(--bg-secondary);padding:11px;border-radius:var(--radius-md);cursor:pointer;transition:all 0.2s ease;border:2px solid var(--border-color);text-align:center}.template-item:hover{border-color:var(--accent-primary);transform:translateY(-3px);box-shadow:0 4px 12px rgba(99,102,241,0.3);background:var(--bg-primary)}.template-item h4{font-size:12px;font-weight:600;margin-bottom:5px;color:var(--text-primary)}.template-item p{font-size:10px;color:var(--text-muted);line-height:1.5;margin:0}.execution-result,.execution-steps{background:var(--bg-secondary);border-radius:var(--radius-md);padding:15px;max-height:300px;overflow-y:auto}.step-item{background:var(--bg-tertiary);padding:12px;border-radius:var(--radius-sm);margin-bottom:10px;border-left:3px solid var(--accent-primary);transition:var(--transition)}.step-item:hover{transform:translateX(2px);box-shadow:var(--shadow-sm)}.step-item.success-item{border-left-color:var(--success);background:rgba(16,185,129,0.1)}.step-item.error-item{border-left-color:var(--error);background:rgba(239,68,68,0.1)}.step-item:last-child{margin-bottom:0}.step-title{font-size:12px;font-weight:600;color:var(--text-primary);margin-bottom:6px}.step-detail{font-size:11px;color:var(--text-secondary);line-height:1.5;word-break:break-all;margin-top:4px}.step-meta{font-size:10px;color:var(--text-muted);margin-top:6px;font-style:italic}.output-box{background:var(--bg-primary);padding:8px;border-radius:4px;font-family:'Consolas','Monaco',monospace;max-height:200px;overflow-y:auto}.hint-text{color:var(--text-muted);font-size:12px;text-align:center;padding:20px}@media (max-width:768px){.top-menu{padding:6px 8px;gap:6px;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}.menu-section{gap:4px;flex-shrink:0}.menu-section-center{margin-left:auto;margin-right:auto}.menu-btn{padding:8px 10px;font-size:12px;min-height:36px;touch-action:manipulation}.menu-btn.small{padding:8px 10px;font-size:12px}.zoom-menu-btn{padding:8px;min-width:36px;font-size:18px}.menu-divider{margin:0 2px}.menu-btn:not(.zoom-menu-btn) .btn-icon + *{display:none}.menu-btn:not(.zoom-menu-btn):not(:has(.btn-icon)){font-size:16px}.workspace{flex-direction:column}.left-panel{width:100%;max-height:200px;overflow-y:auto;border-right:none;border-bottom:1px solid var(--border-color);padding:10px;gap:10px}body.light-mode .left-panel{border-right:none;border-bottom:1px solid #cbd5e1}.left-panel.mobile-collapsed{max-height:0;padding:0;overflow:hidden;border-bottom:none}.right-panel{width:100%;max-width:100%;border-left:none;border-top:1px solid var(--border-color);padding:10px;gap:10px;max-height:40vh;overflow-y:auto}body.light-mode .right-panel{border-left:none;border-top:1px solid #cbd5e1}.resize-handle{display:none}.canvas-container{flex:1;min-height:300px}#propertyPanel{position:fixed;top:auto;bottom:10px;left:10px;right:10px;width:auto;max-width:100%;z-index:10000}#propertyPanel.dragging{pointer-events:auto}.property-panel{max-height:50vh;overflow-y:auto}.node-grid{grid-template-columns:repeat(2,1fr);gap:6px}.node-item{padding:10px 8px;font-size:11px;min-height:44px;display:flex;align-items:center;justify-content:center;text-align:center}.panel-section{padding:10px}.panel-section h3{font-size:12px;margin-bottom:8px}.section-header{padding:8px 10px;min-height:44px}.section-header h3{font-size:13px}.input-textarea{min-height:100px;font-size:13px}.execution-result,.execution-steps{min-height:80px;max-height:150px;font-size:12px}.modal-content{width:95%;max-width:95%;max-height:90vh;margin:10px}.modal-header h2{font-size:16px}.template-grid{grid-template-columns:repeat(2,1fr);gap:10px;padding:10px}.template-item{padding:12px 8px}.template-item h4{font-size:11px}.template-item p{font-size:9px}.template-icon{font-size:18px}.zoom-level-widget{bottom:10px;right:10px;z-index:900}.zoom-display{padding:8px 12px}.zoom-dropdown{bottom:calc(100% + 10px);min-width:100px}.menu-dropdown{min-width:150px;max-width:200px}.dropdown-item{padding:12px 10px;font-size:12px}.shortcut-item{padding:10px 8px;flex-direction:column;align-items:flex-start;gap:6px}.shortcut-key{font-size:12px;padding:6px 10px}.shortcut-desc{font-size:13px}.tutorial-section{margin-bottom:16px}.tutorial-section h3{font-size:15px}.tutorial-section p,.tutorial-section ul,.tutorial-section ol{font-size:13px}.property-item{margin-bottom:10px}.property-item label{font-size:12px;margin-bottom:6px}.property-item input[type="text"],.property-item textarea,.property-item select{font-size:13px;padding:10px;min-height:44px}.enlarge-btn{font-size:16px;padding:6px 10px;min-width:44px;min-height:44px}.status-message{top:10px;left:10px;right:10px;transform:none;font-size:12px;padding:10px 16px}@keyframes fadeIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.close-btn{width:36px;height:36px;font-size:28px}.step-item{padding:10px;margin-bottom:8px}.step-title{font-size:12px}.step-detail{font-size:11px}.template-category{padding:10px;margin-bottom:12px}.template-category-title{font-size:12px;padding:8px 10px}.panel-enlarge-modal{padding:10px}.panel-enlarge-content{width:100%;max-width:100%}.panel-enlarge-header{padding:12px 16px}.panel-enlarge-header h3{font-size:16px}.panel-enlarge-body{padding:12px}.enlarged-textarea,.enlarged-result,.enlarged-steps{font-size:13px;padding:12px}}@media (max-width:480px){.menu-btn{padding:6px 8px;min-height:32px}.menu-btn.small{padding:6px 8px}.zoom-menu-btn{padding:6px;min-width:32px;font-size:16px}.node-grid{grid-template-columns:1fr}.template-grid{grid-template-columns:1fr}#propertyPanel{left:5px;right:5px;bottom:5px}.property-panel{max-height:60vh}.modal-content{width:100%;max-width:100%;height:100%;max-height:100%;margin:0;border-radius:0}.zoom-level-widget{bottom:5px;right:5px}.zoom-display{padding:6px 10px}.zoom-icon{font-size:12px}.zoom-value{font-size:11px;min-width:35px}}@media (max-width:768px) and (orientation:landscape){.left-panel{max-height:150px}.right-panel{max-height:30vh}.property-panel{max-height:40vh}.canvas-container{min-height:200px}}@media (hover:none) and (pointer:coarse){.menu-btn,.node-item,.dropdown-item,.zoom-dropdown-item,.context-menu-item,.template-item,.section-header{min-height:44px;touch-action:manipulation}.menu-btn:hover,.node-item:hover,.dropdown-item:hover{transform:none}.close-btn,.enlarge-btn{min-width:44px;min-height:44px}.left-panel,.right-panel,.property-panel,.modal-content,.execution-result,.execution-steps{-webkit-overflow-scrolling:touch}}.component .logo img{opacity: 1;animation:none}