*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;background:linear-gradient(135deg,#667eea 0,#764ba2 100%);min-height:100vh;overflow-x:hidden}.top-bar{position:fixed;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#667eea,#764ba2,#f093fb,#4facfe,#667eea);background-size:400% 100%;animation:gradientFlow 8s ease infinite;z-index:10000}@keyframes gradientFlow{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}.top-toolbar{position:fixed;top:4px;left:0;right:0;background:rgba(255,255,255,0.95);backdrop-filter:blur(10px);padding:6px 12px;box-shadow:0 2px 8px rgba(0,0,0,0.1);z-index:1000;display:flex;gap:6px;flex-wrap:wrap;align-items:center;transition:all 0.3s ease}.flowchart-container{display:flex;height:100vh;padding-top:50px;gap:0;padding-left:8px;padding-right:8px;padding-bottom:8px;position:relative;transition:padding 0.3s ease}.code-panel{flex:0 0 40%;min-width:200px;max-width:80%;background:rgba(30,30,45,0.95);backdrop-filter:blur(10px);border-radius:16px;box-shadow:0 8px 32px rgba(0,0,0,0.3);display:flex;flex-direction:column;overflow:hidden;transition:box-shadow 0.3s ease}.code-panel:hover{box-shadow:0 12px 48px rgba(0,0,0,0.4)}.panel-header{background:linear-gradient(135deg,#667eea 0,#764ba2 100%);color:white;padding:10px 16px;font-size:15px;font-weight:600;display:flex;align-items:center;justify-content:space-between}.panel-title{display:flex;align-items:center;gap:10px}.panel-actions{display:flex;gap:8px}.code-editor{flex:1;background:#1e1e2e;color:#e0e0e0;border:none;padding:20px;font-family:'Consolas','Monaco','Courier New',monospace;font-size:14px;line-height:1.6;resize:none;outline:none;transition:background 0.3s ease}.code-editor:focus{background:#252538}.code-editor::-webkit-scrollbar{width:8px}.code-editor::-webkit-scrollbar-track{background:#2a2a3e}.code-editor::-webkit-scrollbar-thumb{background:#667eea;border-radius:4px}.canvas-panel{flex:1;min-width:300px;background:rgba(255,255,255,0.98);backdrop-filter:blur(10px);border-radius:16px;box-shadow:0 8px 32px rgba(0,0,0,0.3);display:flex;flex-direction:column;overflow:hidden;transition:box-shadow 0.3s ease;margin-left:20px}.canvas-panel:hover{box-shadow:0 12px 48px rgba(0,0,0,0.4)}.canvas-container{flex:1;position:relative;overflow:auto;background:#f8f9fa}.canvas-container.dragging{cursor:grabbing}.canvas-wrapper{min-width:100%;min-height:100%;display:flex;align-items:center;justify-content:center;padding:40px;transition:transform 0.2s ease}#flowchartCanvas{width:auto;max-width:100%;display:inline-block;transition:opacity 0.3s ease}#flowchartCanvas svg{max-width:100%;height:auto}.resizer{position:absolute;width:10px;height:100%;cursor:col-resize;z-index:100;background:transparent;transition:background 0.2s ease}.resizer:hover{background:rgba(102,126,234,0.2)}.resizer::before{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:3px;height:40px;background:rgba(102,126,234,0.5);border-radius:2px;opacity:0;transition:opacity 0.2s ease}.resizer:hover::before{opacity:1}.resizer.resizing{background:rgba(102,126,234,0.3)}.resizer.resizing::before{opacity:1;background:#667eea}.toolbar{display:none}.btn{padding:6px 12px;border:none;border-radius:8px;font-size:13px;font-weight:500;cursor:pointer;transition:all 0.3s ease;display:flex;align-items:center;gap:4px;position:relative;overflow:hidden}.btn span:first-child{font-size:16px;line-height:1;width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center}.btn::before{content:'';position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:rgba(255,255,255,0.5);transform:translate(-50%,-50%);transition:width 0.6s,height 0.6s}.btn:active::before{width:300px;height:300px}.btn-primary{background:linear-gradient(135deg,#667eea 0,#764ba2 100%);color:white;box-shadow:0 4px 12px rgba(102,126,234,0.4)}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(102,126,234,0.6)}.btn-secondary{background:white;color:#667eea;border:2px solid #667eea}.btn-secondary:hover{background:#667eea;color:white;transform:translateY(-2px)}.btn-success{background:linear-gradient(135deg,#48bb78 0,#38a169 100%);color:white;box-shadow:0 4px 12px rgba(72,187,120,0.4)}.btn-success:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(72,187,120,0.6)}.btn-danger{background:linear-gradient(135deg,#f56565 0,#e53e3e 100%);color:white;box-shadow:0 4px 12px rgba(245,101,101,0.4)}.btn-danger:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(245,101,101,0.6)}.btn:disabled{opacity:0.5;cursor:not-allowed;transform:none}body.dark-mode .btn:disabled{opacity:0.3}body.dark-mode .btn-secondary{background:rgba(102,126,234,0.1);color:#a0aec0;border:2px solid rgba(102,126,234,0.3)}body.dark-mode .btn-secondary:hover{background:linear-gradient(135deg,#667eea 0,#764ba2 100%);color:white;border-color:transparent}body.dark-mode{background:linear-gradient(135deg,#1a1a2e 0,#16213e 100%)}body.dark-mode .canvas-panel{background:rgba(30,30,45,0.98)}body.dark-mode .canvas-container{background:#2a2a3e}body.dark-mode .top-toolbar{background:rgba(30,30,45,0.95);border-bottom:1px solid rgba(255,255,255,0.1)}body.dark-mode .toolbar{background:rgba(30,30,45,0.9);border-bottom:1px solid rgba(255,255,255,0.1)}.modal{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.75);backdrop-filter:blur(10px);z-index:9999;align-items:center;justify-content:center;animation:fadeIn 0.3s ease}.modal.active{display:flex}@keyframes fadeIn{from{opacity:0}to{opacity:1}}.modal-content{background:white;border-radius:24px;padding:32px;max-width:700px;width:90%;max-height:85vh;overflow-y:auto;box-shadow:0 25px 80px rgba(0,0,0,0.4),0 0 1px rgba(102,126,234,0.5);border:1px solid rgba(102,126,234,0.1);animation:slideUp 0.4s cubic-bezier(0.34,1.56,0.64,1)}.modal-content::-webkit-scrollbar{width:10px}.modal-content::-webkit-scrollbar-track{background:rgba(102,126,234,0.05);border-radius:12px}.modal-content::-webkit-scrollbar-thumb{background:linear-gradient(135deg,#667eea 0,#764ba2 100%);border-radius:12px;border:2px solid transparent;background-clip:padding-box}.modal-content::-webkit-scrollbar-thumb:hover{background:linear-gradient(135deg,#764ba2 0,#667eea 100%);background-clip:padding-box}@keyframes slideUp{from{transform:translateY(60px) scale(0.95);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}body.dark-mode .modal-content{background:linear-gradient(135deg,#1e1e2e 0,#252538 100%);color:#e0e0e0;border:1px solid rgba(102,126,234,0.3)}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;padding-bottom:20px;border-bottom:3px solid transparent;background:linear-gradient(to right,#667eea,#764ba2) bottom / 100% 3px no-repeat}.modal-header h2{font-size:28px;font-weight:700;background:linear-gradient(135deg,#667eea 0,#764ba2 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-0.5px}.close-btn{background:none;border:none;font-size:32px;cursor:pointer;color:#a0aec0;transition:all 0.3s cubic-bezier(0.34,1.56,0.64,1);width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;line-height:1}.close-btn:hover{background:linear-gradient(135deg,#667eea15 0,#764ba215 100%);color:#667eea;transform:rotate(90deg) scale(1.1)}.template-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;margin-top:12px}.template-item{background:linear-gradient(135deg,#fff 0,#f8f9fb 100%);border-radius:10px;padding:14px 12px;cursor:pointer;transition:all 0.4s cubic-bezier(0.34,1.56,0.64,1);border:2px solid rgba(102,126,234,0.12);box-shadow:0 3px 10px rgba(102,126,234,0.12),0 1px 4px rgba(0,0,0,0.04);position:relative;overflow:hidden}.template-item::after{content:'✓';position:absolute;top:6px;right:6px;width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg,#667eea 0,#764ba2 100%);color:white;display:flex;align-items:center;justify-content:center;font-size:7px;font-weight:bold;opacity:0;transform:scale(0) rotate(-180deg);transition:all 0.4s cubic-bezier(0.34,1.56,0.64,1)}.template-item:hover{transform:translateY(-4px) scale(1.03);box-shadow:0 8px 24px rgba(102,126,234,0.3),0 4px 12px rgba(102,126,234,0.15),0 0 0 2px #667eea;border-color:transparent}.template-item:hover::after{opacity:1;transform:scale(1) rotate(0deg)}.template-item::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(102,126,234,0.08) 0,transparent 70%);transform:scale(0);transition:transform 0.6s ease}.template-item:hover::before{transform:scale(1)}body.dark-mode .template-item{background:linear-gradient(135deg,#2a2a3e 0,#323248 100%);border-color:rgba(102,126,234,0.25);box-shadow:0 4px 12px rgba(0,0,0,0.3)}.template-item h4{font-size:14px;font-weight:700;background:linear-gradient(135deg,#667eea 0,#764ba2 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:6px;position:relative;letter-spacing:-0.15px}.template-item h4::after{content:'';position:absolute;bottom:-3px;left:0;width:0;height:2px;background:linear-gradient(90deg,#667eea,#764ba2);border-radius:1px;transition:width 0.4s cubic-bezier(0.34,1.56,0.64,1)}.template-item:hover h4::after{width:100%}.template-item p{color:#64748b;font-size:11px;line-height:1.7;margin:0}body.dark-mode .template-item p{color:#aaa}.theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:12px;margin-top:12px}.theme-item{background:linear-gradient(135deg,#fff 0,#f8f9fb 100%);border-radius:10px;padding:12px 10px;cursor:pointer;transition:all 0.4s cubic-bezier(0.34,1.56,0.64,1);border:2px solid rgba(102,126,234,0.12);box-shadow:0 3px 10px rgba(102,126,234,0.12),0 1px 4px rgba(0,0,0,0.04);text-align:center;position:relative;overflow:hidden}.theme-item::after{content:'✓';position:absolute;top:6px;right:6px;width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg,#667eea 0,#764ba2 100%);color:white;display:flex;align-items:center;justify-content:center;font-size:7px;font-weight:bold;opacity:0;transform:scale(0) rotate(-180deg);transition:all 0.4s cubic-bezier(0.34,1.56,0.64,1)}.theme-item:hover{transform:translateY(-4px) scale(1.03);box-shadow:0 8px 24px rgba(102,126,234,0.3),0 4px 12px rgba(102,126,234,0.15),0 0 0 2px #667eea;border-color:transparent}.theme-item:hover::after{opacity:1;transform:scale(1) rotate(0deg)}.theme-item::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(102,126,234,0.08) 0,transparent 70%);transform:scale(0);transition:transform 0.6s ease}.theme-item:hover::before{transform:scale(1)}body.dark-mode .theme-item{background:linear-gradient(135deg,#2a2a3e 0,#323248 100%);border-color:rgba(102,126,234,0.25);box-shadow:0 4px 12px rgba(0,0,0,0.3)}.theme-item h4{font-size:13px;font-weight:700;background:linear-gradient(135deg,#667eea 0,#764ba2 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin:8px 0 5px 0;letter-spacing:-0.15px}.theme-item p{color:#64748b;font-size:10px;line-height:1.6;margin:0}body.dark-mode .theme-item p{color:#aaa}.theme-preview{width:100%;height:50px;border-radius:7px;position:relative;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,0.15),inset 0 0 0 1px rgba(255,255,255,0.2);transition:all 0.4s cubic-bezier(0.34,1.56,0.64,1)}.theme-item:hover .theme-preview{transform:scale(1.08) translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,0.25),inset 0 0 0 2px rgba(255,255,255,0.3)}.theme-preview::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;opacity:0.15;background:repeating-linear-gradient( -45deg,transparent,transparent 15px,rgba(255,255,255,0.4) 15px,rgba(255,255,255,0.4) 30px )}.theme-preview::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,0.3);backdrop-filter:blur(5px);opacity:0;transition:opacity 0.3s ease}.theme-item:hover .theme-preview::after{opacity:1}.theme-preview-default{background:linear-gradient(135deg,#667eea 0,#764ba2 100%)}.theme-preview-dark{background:linear-gradient(135deg,#1a1a2e 0,#16213e 100%)}.theme-preview-forest{background:linear-gradient(135deg,#38a169 0,#2f855a 100%)}.theme-preview-neutral{background:linear-gradient(135deg,#718096 0,#4a5568 100%)}.theme-preview-ocean{background:linear-gradient(135deg,#4299e1 0,#3182ce 100%)}.theme-preview-sunset{background:linear-gradient(135deg,#ed8936 0,#dd6b20 100%)}.theme-preview-purple{background:linear-gradient(135deg,#9d4edd 0,#c77dff 100%)}.theme-preview-mint{background:linear-gradient(135deg,#06d6a0 0,#1de9b6 100%)}.theme-preview-rose{background:linear-gradient(135deg,#f43f5e 0,#e11d48 100%)}.theme-preview-sky{background:linear-gradient(135deg,#38bdf8 0,#0ea5e9 100%)}.theme-preview-lavender{background:linear-gradient(135deg,#a78bfa 0,#8b5cf6 100%)}.theme-preview-golden{background:linear-gradient(135deg,#fbbf24 0,#f59e0b 100%)}.theme-preview-emerald{background:linear-gradient(135deg,#10b981 0,#059669 100%)}.theme-preview-coral{background:linear-gradient(135deg,#fb7185 0,#fb923c 100%)}.theme-preview-midnight{background:linear-gradient(135deg,#1e3a8a 0,#1e40af 100%)}body.theme-forest{background:linear-gradient(135deg,#38a169 0,#2f855a 100%)}body.theme-forest .top-bar{background:linear-gradient(90deg,#38a169,#2f855a,#48bb78,#68d391,#38a169)}body.theme-forest .panel-header{background:linear-gradient(135deg,#38a169 0,#2f855a 100%)}body.theme-forest .btn-primary{background:linear-gradient(135deg,#38a169 0,#2f855a 100%);box-shadow:0 4px 12px rgba(56,161,105,0.4)}body.theme-forest .btn-primary:hover{box-shadow:0 6px 20px rgba(56,161,105,0.6)}body.theme-neutral{background:linear-gradient(135deg,#718096 0,#4a5568 100%)}body.theme-neutral .top-bar{background:linear-gradient(90deg,#718096,#4a5568,#a0aec0,#cbd5e0,#718096)}body.theme-neutral .panel-header{background:linear-gradient(135deg,#718096 0,#4a5568 100%)}body.theme-neutral .btn-primary{background:linear-gradient(135deg,#718096 0,#4a5568 100%);box-shadow:0 4px 12px rgba(113,128,150,0.4)}body.theme-neutral .btn-primary:hover{box-shadow:0 6px 20px rgba(113,128,150,0.6)}body.theme-ocean{background:linear-gradient(135deg,#4299e1 0,#3182ce 100%)}body.theme-ocean .top-bar{background:linear-gradient(90deg,#4299e1,#3182ce,#63b3ed,#90cdf4,#4299e1)}body.theme-ocean .panel-header{background:linear-gradient(135deg,#4299e1 0,#3182ce 100%)}body.theme-ocean .btn-primary{background:linear-gradient(135deg,#4299e1 0,#3182ce 100%);box-shadow:0 4px 12px rgba(66,153,225,0.4)}body.theme-ocean .btn-primary:hover{box-shadow:0 6px 20px rgba(66,153,225,0.6)}body.theme-sunset{background:linear-gradient(135deg,#ed8936 0,#dd6b20 100%)}body.theme-sunset .top-bar{background:linear-gradient(90deg,#ed8936,#dd6b20,#f6ad55,#fbd38d,#ed8936)}body.theme-sunset .panel-header{background:linear-gradient(135deg,#ed8936 0,#dd6b20 100%)}body.theme-sunset .btn-primary{background:linear-gradient(135deg,#ed8936 0,#dd6b20 100%);box-shadow:0 4px 12px rgba(237,137,54,0.4)}body.theme-sunset .btn-primary:hover{box-shadow:0 6px 20px rgba(237,137,54,0.6)}body.theme-purple{background:linear-gradient(135deg,#9d4edd 0,#7b2cbf 100%)}body.theme-purple .top-bar{background:linear-gradient(90deg,#9d4edd,#7b2cbf,#c77dff,#e0aaff,#9d4edd)}body.theme-purple .panel-header{background:linear-gradient(135deg,#9d4edd 0,#7b2cbf 100%)}body.theme-purple .btn-primary{background:linear-gradient(135deg,#9d4edd 0,#7b2cbf 100%);box-shadow:0 4px 12px rgba(157,78,221,0.4)}body.theme-purple .btn-primary:hover{box-shadow:0 6px 20px rgba(157,78,221,0.6)}body.theme-purple .code-editor{background:#2d1b4e;color:#e0aaff}body.theme-purple .code-editor:focus{background:#3d2657}body.theme-mint{background:linear-gradient(135deg,#06d6a0 0,#00b894 100%)}body.theme-mint .top-bar{background:linear-gradient(90deg,#06d6a0,#00b894,#1de9b6,#64ffda,#06d6a0)}body.theme-mint .panel-header{background:linear-gradient(135deg,#06d6a0 0,#00b894 100%)}body.theme-mint .btn-primary{background:linear-gradient(135deg,#06d6a0 0,#00b894 100%);box-shadow:0 4px 12px rgba(6,214,160,0.4)}body.theme-mint .btn-primary:hover{box-shadow:0 6px 20px rgba(6,214,160,0.6)}body.theme-rose{background:linear-gradient(135deg,#f43f5e 0,#e11d48 100%)}body.theme-rose .top-bar{background:linear-gradient(90deg,#f43f5e,#e11d48,#fb7185,#fda4af,#f43f5e)}body.theme-rose .panel-header{background:linear-gradient(135deg,#f43f5e 0,#e11d48 100%)}body.theme-rose .btn-primary{background:linear-gradient(135deg,#f43f5e 0,#e11d48 100%);box-shadow:0 4px 12px rgba(244,63,94,0.4)}body.theme-rose .btn-primary:hover{box-shadow:0 6px 20px rgba(244,63,94,0.6)}body.theme-sky{background:linear-gradient(135deg,#38bdf8 0,#0ea5e9 100%)}body.theme-sky .top-bar{background:linear-gradient(90deg,#38bdf8,#0ea5e9,#7dd3fc,#bae6fd,#38bdf8)}body.theme-sky .panel-header{background:linear-gradient(135deg,#38bdf8 0,#0ea5e9 100%)}body.theme-sky .btn-primary{background:linear-gradient(135deg,#38bdf8 0,#0ea5e9 100%);box-shadow:0 4px 12px rgba(56,189,248,0.4)}body.theme-sky .btn-primary:hover{box-shadow:0 6px 20px rgba(56,189,248,0.6)}body.theme-lavender{background:linear-gradient(135deg,#a78bfa 0,#8b5cf6 100%)}body.theme-lavender .top-bar{background:linear-gradient(90deg,#a78bfa,#8b5cf6,#c4b5fd,#ddd6fe,#a78bfa)}body.theme-lavender .panel-header{background:linear-gradient(135deg,#a78bfa 0,#8b5cf6 100%)}body.theme-lavender .btn-primary{background:linear-gradient(135deg,#a78bfa 0,#8b5cf6 100%);box-shadow:0 4px 12px rgba(167,139,250,0.4)}body.theme-lavender .btn-primary:hover{box-shadow:0 6px 20px rgba(167,139,250,0.6)}body.theme-golden{background:linear-gradient(135deg,#fbbf24 0,#f59e0b 100%)}body.theme-golden .top-bar{background:linear-gradient(90deg,#fbbf24,#f59e0b,#fcd34d,#fde68a,#fbbf24)}body.theme-golden .panel-header{background:linear-gradient(135deg,#fbbf24 0,#f59e0b 100%)}body.theme-golden .btn-primary{background:linear-gradient(135deg,#fbbf24 0,#f59e0b 100%);box-shadow:0 4px 12px rgba(251,191,36,0.4)}body.theme-golden .btn-primary:hover{box-shadow:0 6px 20px rgba(251,191,36,0.6)}body.theme-emerald{background:linear-gradient(135deg,#10b981 0,#059669 100%)}body.theme-emerald .top-bar{background:linear-gradient(90deg,#10b981,#059669,#34d399,#6ee7b7,#10b981)}body.theme-emerald .panel-header{background:linear-gradient(135deg,#10b981 0,#059669 100%)}body.theme-emerald .btn-primary{background:linear-gradient(135deg,#10b981 0,#059669 100%);box-shadow:0 4px 12px rgba(16,185,129,0.4)}body.theme-emerald .btn-primary:hover{box-shadow:0 6px 20px rgba(16,185,129,0.6)}body.theme-coral{background:linear-gradient(135deg,#fb7185 0,#fb923c 100%)}body.theme-coral .top-bar{background:linear-gradient(90deg,#fb7185,#fb923c,#fdba74,#fcd34d,#fb7185)}body.theme-coral .panel-header{background:linear-gradient(135deg,#fb7185 0,#fb923c 100%)}body.theme-coral .btn-primary{background:linear-gradient(135deg,#fb7185 0,#fb923c 100%);box-shadow:0 4px 12px rgba(251,113,133,0.4)}body.theme-coral .btn-primary:hover{box-shadow:0 6px 20px rgba(251,113,133,0.6)}body.theme-midnight{background:linear-gradient(135deg,#1e3a8a 0,#1e40af 100%)}body.theme-midnight .top-bar{background:linear-gradient(90deg,#1e3a8a,#1e40af,#3b82f6,#60a5fa,#1e3a8a)}body.theme-midnight .panel-header{background:linear-gradient(135deg,#1e3a8a 0,#1e40af 100%)}body.theme-midnight .btn-primary{background:linear-gradient(135deg,#1e3a8a 0,#1e40af 100%);box-shadow:0 4px 12px rgba(30,58,138,0.4)}body.theme-midnight .btn-primary:hover{box-shadow:0 6px 20px rgba(30,58,138,0.6)}body.theme-midnight .code-editor{background:#1e293b;color:#e2e8f0}body.theme-midnight .code-editor:focus{background:#0f172a}.shortcut-list{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:8px}.shortcut-item{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:linear-gradient(135deg,#f8f9fa 0,#e9ecef 100%);border-radius:12px;border:2px solid rgba(102,126,234,0.15);box-shadow:0 2px 8px rgba(0,0,0,0.06);transition:all 0.3s cubic-bezier(0.34,1.56,0.64,1);position:relative;overflow:hidden}.shortcut-item::before{content:'';position:absolute;left:0;top:0;height:100%;width:4px;background:linear-gradient(135deg,#667eea 0,#764ba2 100%);border-radius:12px 0 0 12px}.shortcut-item:hover{transform:translateX(4px);box-shadow:0 4px 16px rgba(102,126,234,0.25);border-color:#667eea}.shortcut-item span:first-child{color:#2d3748;font-weight:500;font-size:15px}body.dark-mode .shortcut-item{background:linear-gradient(135deg,#2a2a3e 0,#323248 100%);border-color:rgba(102,126,234,0.25)}body.dark-mode .shortcut-item span:first-child{color:#e0e0e0}.shortcut-key{background:linear-gradient(135deg,#667eea 0,#764ba2 100%);color:white;padding:6px 16px;border-radius:8px;font-family:'Consolas','Monaco',monospace;font-size:13px;font-weight:600;box-shadow:0 2px 8px rgba(102,126,234,0.3),inset 0 -2px 4px rgba(0,0,0,0.2);letter-spacing:0.5px;border:1px solid rgba(255,255,255,0.2)}@media (max-width:1024px){.flowchart-container{flex-direction:column;padding-top:50px}.code-panel{flex:0 0 300px;min-width:100%;max-width:100%;margin-bottom:8px}.canvas-panel{flex:1;min-height:400px;margin-left:0}.resizer{display:none}}@media (max-width:768px){.top-toolbar{padding:4px 8px;gap:4px}.btn{font-size:11px;padding:4px 8px;gap:3px}.btn span:first-child{font-size:14px;width:14px;height:14px}.template-grid{grid-template-columns:1fr}.flowchart-container{padding:4px;padding-top:46px}.code-panel{border-radius:12px}.canvas-panel{border-radius:12px}}.fullscreen{position:fixed;top:0;left:0;right:0;bottom:0;z-index:9998;margin:0;padding:0;border-radius:0}.fullscreen .flowchart-container{margin:0;padding:0;border-radius:0;height:100vh}.loading{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,0.3);border-radius:50%;border-top-color:white;animation:spin 0.8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}@keyframes fadeOut{from{opacity:1}to{opacity:0}}.status-bar{padding:10px 20px;background:rgba(102,126,234,0.08);color:#667eea;font-size:13px;display:flex;align-items:center;gap:16px;border-top:1px solid rgba(102,126,234,0.15)}.status-bar span{display:flex;align-items:center;gap:6px}body.dark-mode .status-bar{background:rgba(0,0,0,0.3);color:#a0aec0;border-top:1px solid rgba(255,255,255,0.05)}#historyList{max-height:450px;overflow-y:auto;padding:8px 0}#historyList::-webkit-scrollbar{width:8px}#historyList::-webkit-scrollbar-track{background:rgba(102,126,234,0.05);border-radius:8px}#historyList::-webkit-scrollbar-thumb{background:linear-gradient(135deg,#667eea 0,#764ba2 100%);border-radius:8px}.history-item{background:linear-gradient(135deg,#f8f9fa 0,#e9ecef 100%);border-radius:12px;padding:16px;margin-bottom:12px;cursor:pointer;transition:all 0.3s cubic-bezier(0.34,1.56,0.64,1);border:2px solid rgba(102,126,234,0.1);position:relative;overflow:hidden}.history-item::before{content:'';position:absolute;left:0;top:0;height:100%;width:4px;background:linear-gradient(135deg,#667eea 0,#764ba2 100%);border-radius:12px 0 0 12px}.history-item:hover{transform:translateX(6px);box-shadow:0 6px 20px rgba(102,126,234,0.25);border-color:#667eea}body.dark-mode .history-item{background:linear-gradient(135deg,#2a2a3e 0,#323248 100%);border-color:rgba(102,126,234,0.25)}.zoom-controls{position:absolute;right:20px;bottom:20px;display:flex;flex-direction:column;gap:8px;z-index:10}.zoom-btn{background:rgba(255,255,255,0.95);border:2px solid rgba(102,126,234,0.3);border-radius:8px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;color:#667eea;transition:all 0.3s ease;box-shadow:0 2px 8px rgba(0,0,0,0.1)}.zoom-btn:hover{background:#667eea;color:white;transform:scale(1.1);box-shadow:0 4px 12px rgba(102,126,234,0.4)}body.dark-mode .zoom-btn{background:rgba(42,42,62,0.95);border-color:rgba(102,126,234,0.5);color:#a0aec0}body.dark-mode .zoom-btn:hover{background:#667eea;color:white}body.fullscreen .top-bar,body.fullscreen .header,body.fullscreen .head-nav{display:none}body.fullscreen .top-toolbar{top:0;padding:4px 8px;height:36px;gap:4px}body.fullscreen .flowchart-container{padding-top:36px;height:100vh;padding-left:2px;padding-right:2px;padding-bottom:2px;gap:2px}body.fullscreen .panel-header{display:none}body.fullscreen .status-bar{display:none}body.fullscreen .btn{font-size:12px;padding:4px 8px;gap:3px}body.fullscreen .btn span:first-child{font-size:14px;width:14px;height:14px}body.fullscreen .zoom-controls{display:flex;bottom:12px;right:12px}body.fullscreen .code-panel,body.fullscreen .canvas-panel{border-radius:8px}body.fullscreen .code-editor{border-radius:8px}body.fullscreen .canvas-container{border-radius:8px}.fullscreen-icon::before{content:'⛶'}body.fullscreen .fullscreen-icon::before{content:'⛝'}