*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:#1a1a1a;color:#e0e0e0;overflow:hidden}.app-container{position:relative;width:100vw;height:100vh}#canvas{display:block;background-color:#2a2a2a;border:1px solid #404040;cursor:grab;width:100%;height:100%}#canvas:active{cursor:grabbing}.toolbar-btn{background:#0d7377;color:#fff;border:none;border-radius:6px;padding:8px 16px;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.toolbar-btn:hover{background:#14a085}.toolbar-btn:active{transform:translateY(1px)}.toolbar-btn:disabled{background:#555555;cursor:not-allowed;opacity:.7}.canvas-controls{position:fixed;bottom:20px;right:20px;background:#333333;border:1px solid #505050;border-radius:8px;box-shadow:0 4px 12px #0006;padding:8px;display:flex;flex-direction:column;gap:4px;z-index:1000}.control-btn{background:#444444;color:#e0e0e0;border:1px solid #666666;border-radius:4px;width:36px;height:36px;font-size:18px;font-weight:700;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;padding:0}.control-icon{width:20px;height:20px;filter:brightness(0) saturate(100%) invert(88%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(88%) contrast(88%);transition:filter .2s ease}.control-btn:hover{background:#555555;border-color:#777}.control-btn:hover .control-icon{filter:brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%)}.control-btn:active{transform:translateY(1px)}.control-separator{height:1px;background-color:#666;margin:4px 0}.control-btn:disabled{background-color:#2a2a2a;color:#666;cursor:not-allowed;opacity:.6}.control-btn:disabled .control-icon{filter:brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(40%) contrast(40%)}.control-btn:disabled:hover{background-color:#2a2a2a;border-color:#444}.control-btn:disabled:hover .control-icon{filter:brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(40%) contrast(40%)}.node-input{position:absolute;border:2px solid #0d7377;border-radius:4px;padding:8px;font-family:inherit;background:#2a2a2a;color:#e0e0e0;outline:none;z-index:2000}.generate-ideas-tooltip{position:absolute;z-index:2000;pointer-events:none;transition:opacity .2s ease;display:flex;gap:8px}.generate-ideas-tooltip.hidden{display:none}.generate-ideas-btn,.expand-content-btn{background:#0d7377;color:#fff;border:none;border-radius:6px;padding:8px 12px;font-size:16px;font-weight:500;cursor:pointer;transition:all .2s ease;box-shadow:0 4px 12px #0006;pointer-events:auto;position:relative;min-width:40px;height:40px;display:flex;align-items:center;justify-content:center}.expand-content-btn{background:#6c5ce7}.generate-ideas-btn:hover{background:#14a085;transform:translateY(-2px);box-shadow:0 6px 16px #00000080}.expand-content-btn:hover{background:#a29bfe;transform:translateY(-2px);box-shadow:0 6px 16px #00000080}.generate-ideas-btn:active,.expand-content-btn:active{transform:translateY(0)}.generate-ideas-btn:disabled{background:#555555;cursor:not-allowed;opacity:.7}.generate-ideas-btn:after{content:"";position:absolute;top:100%;left:50%;transform:translate(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid #0d7377}.generate-ideas-btn:hover:after{border-top-color:#14a085}.content-modal{position:fixed;top:0;left:0;width:100%;height:100%;z-index:3000;display:flex;align-items:center;justify-content:center}.content-modal.hidden{display:none}.modal-backdrop{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.7);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.modal-container{position:relative;background:#2a2a2a;border-radius:12px;box-shadow:0 20px 60px #000c;max-width:80vw;max-height:80vh;width:800px;display:flex;flex-direction:column;overflow:hidden}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid #444;background:#333}.modal-header-buttons{display:flex;gap:8px;align-items:center}.modal-header h3{margin:0;color:#fff;font-size:18px;font-weight:600}.edit-modal-btn{background:#0d7377;border:none;color:#fff;font-size:16px;cursor:pointer;padding:6px 10px;border-radius:4px;transition:all .2s ease;display:flex;align-items:center;justify-content:center;min-width:32px;height:32px}.edit-modal-btn:hover{background:#14a085;transform:translateY(-1px)}.edit-modal-btn:active{transform:translateY(0)}.close-modal-btn{background:none;border:none;color:#fff;font-size:24px;cursor:pointer;padding:4px 8px;border-radius:4px;transition:background .2s ease}.close-modal-btn:hover{background:#555}.modal-body{flex:1;overflow:auto;padding:24px}.modal-content-text{color:#fff;font-size:16px;line-height:1.6;white-space:pre-wrap;word-wrap:break-word}.modal-content-text h1,.modal-content-text h2,.modal-content-text h3{color:#fff;margin:0 0 16px;font-weight:700}.modal-content-text h1{font-size:24px}.modal-content-text h2{font-size:20px}.modal-content-text h3{font-size:18px}.modal-content-text p{margin:0 0 12px;color:#fff}.modal-content-text ul{margin:0 0 12px;padding-left:20px}.modal-content-text li{margin:4px 0;color:#fff}.modal-content-text strong{font-weight:700;color:#fff}.modal-content-text em{font-style:italic;color:#fff}.modal-content-text code{background:#444;color:gold;padding:2px 6px;border-radius:4px;font-family:Courier New,monospace;font-size:14px}.modal-edit-textarea{width:100%;min-height:200px;max-height:400px;background:#1a1a1a;color:#fff;border:2px solid #0d7377;border-radius:6px;padding:16px;font-family:inherit;font-size:16px;line-height:1.6;resize:vertical;outline:none;transition:border-color .2s ease}.modal-edit-textarea:focus{border-color:#14a085;box-shadow:0 0 0 3px #0d73771a}.modal-edit-controls{display:flex;gap:8px;justify-content:flex-end;margin-top:16px;padding-top:16px;border-top:1px solid #444}.modal-save-btn,.modal-cancel-btn{background:#0d7377;color:#fff;border:none;border-radius:6px;padding:8px 16px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease}.modal-cancel-btn{background:#666}.modal-save-btn:hover{background:#14a085}.modal-cancel-btn:hover{background:#777}.modal-save-btn:active,.modal-cancel-btn:active{transform:translateY(1px)}.selection-status{position:fixed;top:20px;right:20px;background:rgba(0,0,0,.8);color:#fff;padding:8px 12px;border-radius:6px;font-size:14px;font-weight:500;z-index:1500;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);transition:all .2s ease}.selection-status.hidden{display:none}.selection-hint{display:block;margin-top:4px;font-size:12px;color:#9ca3af;font-weight:400}.navigation-help{position:fixed;bottom:20px;left:20px;background:rgba(0,0,0,.8);color:#fff;padding:12px 16px;border-radius:8px;font-size:12px;z-index:1500;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);transition:opacity .3s ease}.help-item{margin:4px 0;display:flex;align-items:center;gap:8px}.navigation-help:hover{opacity:.7}.hidden{display:none}.no-select{user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.api-key-modal{position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,.8);display:none;align-items:center;justify-content:center;z-index:10000}.modal-content{background:#333333;border:1px solid #505050;border-radius:12px;padding:24px;max-width:500px;width:90%;max-height:80vh;overflow-y:auto;box-shadow:0 8px 32px #0009}.modal-content h3{color:#e0e0e0;margin-bottom:12px;font-size:18px;font-weight:600}.modal-content p{color:#b0b0b0;margin-bottom:16px;font-size:14px;line-height:1.5}.modal-content label{color:#e0e0e0;font-size:14px;font-weight:500;margin-bottom:6px;margin-top:12px;display:block}.modal-content label:first-of-type{margin-top:0}.modal-content input{width:100%;padding:12px;border:1px solid #666666;border-radius:6px;background:#2a2a2a;color:#e0e0e0;font-size:14px;margin-bottom:16px;outline:none;transition:border-color .2s ease}.modal-content input:focus{border-color:#0d7377}.modal-buttons{display:flex;gap:12px;margin-bottom:12px}.modal-buttons button{flex:1;padding:10px 16px;border:none;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.modal-buttons button:first-child{background:#0d7377;color:#fff}.modal-buttons button:first-child:hover{background:#14a085}.modal-buttons button:last-child{background:#666666;color:#e0e0e0}.modal-buttons button:last-child:hover{background:#777777}.modal-content small{color:#888;font-size:12px}.demo-mode-section{background:#2a2a2a;border:1px solid #404040;border-radius:8px;padding:16px;margin-bottom:20px}.demo-toggle{display:flex;align-items:center;cursor:pointer;margin-bottom:8px}.demo-toggle input[type=checkbox]{margin-right:10px;transform:scale(1.2)}.demo-toggle-text{color:#e0e0e0;font-weight:500;font-size:14px}.demo-description{color:#b0b0b0;font-size:13px;margin:0;line-height:1.4}#apiConfigSection{transition:opacity .3s ease}#apiConfigSection[style*=none]{opacity:0}.notification{position:fixed;top:20px;right:20px;padding:12px 16px;border-radius:6px;font-size:14px;font-weight:500;z-index:10000;max-width:300px;box-shadow:0 4px 12px #0006;animation:slideIn .3s ease-out}.notification-success{background:#0d7377;color:#fff}.notification-error{background:#dc3545;color:#fff}.notification-warning{background:#ffc107;color:#000}.notification-info{background:#17a2b8;color:#fff}@keyframes slideIn{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}.model-selector-panel{position:fixed;top:20px;left:20px;width:300px;background:#333333;border:1px solid #505050;border-radius:8px;box-shadow:0 4px 12px #0006;z-index:1000;color:#e0e0e0;transition:all .3s ease;animation:slideInLeft .4s ease-out}.model-selector-panel.dragging{box-shadow:0 8px 24px #0009;transform:scale(1.02);z-index:1001}@keyframes slideInLeft{0%{transform:translate(-100%);opacity:0}to{transform:translate(0);opacity:1}}.model-selector-panel .panel-header{padding:12px 16px;display:flex;justify-content:space-between;align-items:center;background:#404040;border-top-left-radius:8px;border-top-right-radius:8px;border-bottom:1px solid #505050;-webkit-user-select:none;user-select:none;position:relative}.drag-handle{position:absolute;left:8px;top:50%;transform:translateY(-50%);cursor:grab;padding:4px;border-radius:3px;transition:all .2s ease;opacity:.6}.drag-handle:hover{background:rgba(255,255,255,.1);opacity:1}.drag-handle:active{cursor:grabbing;background:rgba(255,255,255,.2)}.drag-icon{font-size:14px;color:#e0e0e0;font-weight:700;line-height:1;letter-spacing:-2px}.model-selector-panel .header-controls{display:flex;align-items:center;gap:10px}.model-selector-panel .active-count{font-size:11px;color:#4ade80;font-weight:500;background:rgba(74,222,128,.1);padding:2px 6px;border-radius:10px;border:1px solid rgba(74,222,128,.3)}.model-selector-panel .panel-header:hover{background:#454545}.model-selector-panel .panel-header h5{margin:0 0 0 32px;font-size:14px;font-weight:600;color:#fff;display:flex;align-items:center;gap:8px;flex:1}.model-selector-panel .toggle-btn{background:none;border:none;color:#e0e0e0;font-size:12px;cursor:pointer;padding:2px 6px;border-radius:3px;transition:all .2s ease}.model-selector-panel .toggle-btn:hover{background:#555555;color:#fff}.model-selector-panel .panel-content{padding:12px;max-height:220px;overflow-y:auto;transition:all .3s ease}.model-selector-panel .panel-content.collapsed{max-height:0;padding:0 12px;overflow:hidden}.model-selector-panel .panel-footer{padding:12px;border-top:1px solid #505050;background:#3a3a3a;border-bottom-left-radius:8px;border-bottom-right-radius:8px;display:flex;justify-content:center}.model-selector-panel .manage-btn{padding:6px 12px;background:#0d7377;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:12px;font-weight:500;transition:all .2s ease}.model-selector-panel .manage-btn:hover{background:#0a5d61;transform:translateY(-1px)}.section-header{display:flex;align-items:center;gap:8px;padding:8px 0;margin:8px 0 6px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid #505050}.section-header.active-section{color:#4ade80}.section-header.inactive-section{color:#9ca3af}.section-header .section-icon{font-size:14px}.model-checkbox-item{display:flex;align-items:center;margin-bottom:8px;padding:8px 10px;border-radius:6px;transition:all .2s ease;border:1px solid transparent}.model-checkbox-item.active{background:rgba(74,222,128,.1);border-color:#4ade804d}.model-checkbox-item.inactive{background:rgba(156,163,175,.05);border-color:#9ca3af33}.model-checkbox-item:hover{transform:translateY(-1px);box-shadow:0 2px 8px #0003}.model-checkbox-item.active:hover{background:rgba(74,222,128,.15);border-color:#4ade8066}.model-checkbox-item.inactive:hover{background:rgba(156,163,175,.1);border-color:#9ca3af4d}.model-checkbox-item:last-child{margin-bottom:6px}.model-checkbox-item input[type=checkbox]{margin:0 10px 0 0;transform:scale(1.1);cursor:pointer}.model-checkbox-item label{cursor:pointer;flex:1;font-size:13px;color:#e0e0e0;display:flex;align-items:center;gap:8px;line-height:1.3}.model-name{font-weight:500;color:#fff}.model-tag{font-size:10px;padding:2px 6px;border-radius:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}.model-tag.thinking{background:#ffc107;color:#000}.model-tag.free{background:#28a745;color:#fff}.model-panel-actions{margin-top:12px;padding-top:12px;border-top:1px solid #505050;display:flex;gap:8px}.model-panel-btn{flex:1;padding:8px 12px;border:none;border-radius:5px;cursor:pointer;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;transition:all .2s ease}.model-panel-btn.primary{background:#4ade80;color:#000}.model-panel-btn.primary:hover{background:#22c55e;transform:translateY(-1px);box-shadow:0 2px 8px #4ade804d}.model-panel-btn.secondary{background:#6b7280;color:#fff}.model-panel-btn.secondary:hover{background:#4b5563;transform:translateY(-1px);box-shadow:0 2px 8px #6b72804d}@media (max-width: 768px){.model-selector-panel{width:280px;left:10px;top:10px}.model-selector-panel .panel-content{max-height:180px}}.modal-section{margin-bottom:20px;padding:15px;border:1px solid #444;border-radius:6px;background:#2a2a2a}.modal-section h4{margin:0 0 12px;color:#fff;font-size:16px;font-weight:600}.config-subsection{margin-top:20px;padding:15px;border:1px solid #555;border-radius:6px;background:#252525}.config-subsection h5{margin:0 0 15px;color:#f0f0f0;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;border-bottom:2px solid #0d7377;padding-bottom:6px;display:inline-block}.modal-section:first-of-type{border-left:4px solid #4a90e2;background:linear-gradient(135deg,#2a2a2a 0%,#2e3440 100%)}.modal-section:nth-of-type(2){border-left:4px solid #e24a90;background:linear-gradient(135deg,#2a2a2a 0%,#402e34 100%)}.modal-action-buttons{display:flex;gap:10px;flex-wrap:wrap}.modal-action-btn{background:#0d7377;color:#fff;border:none;border-radius:6px;padding:8px 16px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease}.modal-action-btn:hover{background:#14a085;transform:translateY(-1px)}.modal-action-btn:active{transform:translateY(0)}.generate-ideas-btn:hover:after{opacity:1}.aspect-ratio-selector{position:absolute;z-index:2001;background:#333333;border:1px solid #555555;border-radius:8px;padding:8px;box-shadow:0 4px 12px #0006;min-width:120px;transition:opacity .2s ease}.aspect-ratio-selector:before{content:"";position:absolute;top:-10px;left:-10px;right:-10px;bottom:-10px;z-index:-1}.aspect-ratio-selector.hidden{display:none}.aspect-ratio-header{font-size:12px;font-weight:600;color:#bbb;margin-bottom:6px;text-align:center}.aspect-ratio-options{display:flex;gap:4px}.aspect-ratio-option{background:#444444;color:#e0e0e0;border:1px solid #666666;border-radius:4px;padding:6px 10px;font-size:11px;font-weight:500;cursor:pointer;transition:all .2s ease;flex:1;text-align:center}.aspect-ratio-option:hover{background:#555555;border-color:#777}.aspect-ratio-option.active{background:#0d7377;border-color:#0d7377;color:#fff}.aspect-ratio-option.active:hover{background:#14a085;border-color:#14a085}