.code-editor-page{background-color:var(--color-bg-dark,#0d1117);width:100%;height:100%;color:var(--color-text-light,#c9d1d9);font-family:var(--font-sans,system-ui, sans-serif);flex-direction:column;display:flex;overflow:hidden}.ide-toolbar{box-sizing:border-box;background:#1e1e1e;border-bottom:1px solid #333;flex-shrink:0;justify-content:space-between;align-items:center;width:100%;padding:.5rem 1rem;display:flex}.ide-toolbar-left{align-items:center;gap:1rem;display:flex}.ide-toolbar-title{color:#fff;white-space:nowrap;align-items:center;gap:.5rem;font-weight:700;display:flex}.ide-project-selector{color:#58a6ff;background:#0d1117;border:1px solid #30363d;border-radius:4px;outline:none;padding:.3rem .6rem;font-weight:700}.ide-sync-badge{color:#fff;border-radius:4px;align-items:center;gap:.25rem;padding:.2rem .4rem;font-size:.75rem;display:flex}.ide-sync-badge.synced{background:#1f6feb}.ide-sync-badge.syncing{color:#000;background:#d29922}.ide-sync-badge.error{background:#f85149}.ide-sync-badge.local-changes{background:#8957e5}.ide-sync-badge.idle{background:#30363d}@keyframes spin{to{transform:rotate(360deg)}}.spinner{border:2px solid #0000004d;border-top-color:#000;border-radius:50%;width:10px;height:10px;animation:1s linear infinite spin;display:inline-block}@media (max-width:968px){.ide-toolbar.vertical-mode{flex-direction:column;align-items:stretch;height:auto;min-height:auto;padding:.5rem;overflow:auto hidden}.ide-toolbar.vertical-mode .ide-toolbar-left,.ide-toolbar.vertical-mode .ide-toolbar-right{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem;width:100%}.editor-workspace-container{flex-direction:column!important;display:flex!important}.editor-column{flex:auto;min-height:40vh}.console-wrapper,.preview-panel{flex:auto;min-height:30vh}.panel-resizer-x{display:none}}.ide-run-btn{color:#fff;cursor:pointer;background:#2ea043;border:none;border-radius:4px;align-items:center;gap:.2rem;padding:.3rem .8rem;font-size:.85rem;transition:background .2s;display:flex}.ide-run-btn:hover{background:#2c974b}.ide-settings-btn{color:#ccc;cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;transition:all .2s;display:flex}.ide-settings-btn:hover{color:#fff;background:#30363d!important}.ide-settings-btn.outlined{border:1px solid #30363d;border-radius:4px;gap:.4rem;padding:.3rem .6rem;font-size:.8rem}.ide-settings-btn.icon-only{border-radius:4px;flex-shrink:0;padding:.4rem}.editor-workspace-container{background-color:#0d1117;flex:1;grid-template-rows:100%;width:100%;height:calc(100vh - 50px);display:grid;overflow:hidden}@media (max-width:768px){.editor-workspace-container.is-mobile{height:calc(100vh - 50px);overflow:hidden;flex-direction:column!important;display:flex!important}.mobile-accordion-btn{color:#c9d1d9;cursor:pointer;text-align:left;background-color:#161b22;border:none;border-bottom:1px solid #30363d;outline:none;flex-shrink:0;justify-content:space-between;align-items:center;width:100%;padding:14px 18px;font-size:15px;font-weight:600;transition:background-color .2s;position:relative;display:flex!important}.mobile-accordion-btn:hover{background-color:#21262d}.mobile-accordion-btn.active{color:#fff;background-color:#0d1117;border-bottom:2px solid #238636}}.mobile-accordion-btn{display:none}.editor-tabs-bar{scrollbar-width:none;background-color:#161b22;border-bottom:1px solid #30363d;display:flex;overflow-x:auto}.editor-tabs-bar::-webkit-scrollbar{display:none}.editor-tab{color:#8b949e;cursor:pointer;-webkit-user-select:none;user-select:none;background-color:#161b22;border-top:2px solid #0000;border-right:1px solid #30363d;align-items:center;gap:.5rem;min-width:fit-content;padding:.4rem .8rem;font-size:.8rem;display:flex}.editor-tab:hover{background-color:#0d1117}.editor-tab.active{color:#c9d1d9;background-color:#0d1117;border-top:2px solid #58a6ff}.tab-close-btn{color:inherit;cursor:pointer;opacity:.6;background:0 0;border:none;padding:.1rem}.tab-close-btn:hover{opacity:1;color:#fff}.panel-resizer-x{cursor:col-resize;z-index:10;background-color:#30363d;width:4px;transition:background-color .2s}.panel-resizer-x:hover,.panel-resizer-x:active{background-color:#58a6ff}.panel-resizer-y{cursor:row-resize;z-index:10;background-color:#30363d;height:4px;transition:background-color .2s}.panel-resizer-y:hover,.panel-resizer-y:active{background-color:#58a6ff}.ide-toolbar-right{align-items:center;gap:.5rem;display:flex}.toolbar-divider{background:#30363d;width:1px;height:20px;margin:0 .5rem}.ide-settings-btn.dimmed{opacity:.5}.ide-settings-btn.active{background:#30363d}.editor-column{flex-direction:column;height:100%;display:flex;overflow:hidden}.empty-editor-message{color:#8b949e;flex:1;justify-content:center;align-items:center;display:flex}.console-wrapper{background:#0d1117;min-height:50px;overflow:hidden}@media (min-width:769px){.mobile-only-btn{display:none!important}}@media (max-width:768px){.ide-undo-redo-group{display:flex!important}}.ide-toast-notification{color:#c9d1d9;z-index:9999;background:#161b22;border:1px solid #30363d;border-left:4px solid #58a6ff;border-radius:6px;align-items:flex-start;gap:12px;padding:12px 16px;animation:.3s cubic-bezier(.16,1,.3,1) forwards slideInToast;display:flex;position:absolute;bottom:20px;right:20px;box-shadow:0 8px 24px #00000080}.toast-success{border-left-color:#238636}.toast-error{border-left-color:#f85149}.toast-info{border-left-color:#58a6ff}.toast-content strong{color:#fff;font-size:.9rem}.toast-content p{color:#8b949e;font-size:.8rem}.toast-close{color:#8b949e;cursor:pointer;background:0 0;border:none;margin-top:2px;padding:0}.toast-close:hover{color:#fff}@keyframes slideInToast{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}.icon-spin{animation:1s linear infinite spin}.icon-pulse{animation:2s infinite pulse}@keyframes pulse{0%{opacity:1}50%{opacity:.5}to{opacity:1}}@media (max-width:768px){.ide-toolbar{flex-wrap:wrap;gap:.5rem;padding:.25rem .5rem}.ide-toolbar-left,.ide-toolbar-right{flex-wrap:wrap;gap:.25rem}.ide-engine-selector,.ide-undo-redo-group,.toolbar-divider{display:none!important}.ide-project-selector{max-width:120px;font-size:.75rem}.ide-run-btn span{display:none}.ide-settings-btn:not(.icon-only){padding:.25rem;font-size:0}.ide-settings-btn:not(.icon-only) svg{margin-right:0}}
.file-explorer-panel{background-color:#161b22;flex-direction:column;height:100%;padding:1rem;display:flex;overflow:hidden auto}.file-explorer-header{text-transform:uppercase;color:#8b949e;justify-content:space-between;align-items:center;margin-bottom:1rem;font-size:.9rem;font-weight:600;display:flex}.file-list{flex-direction:column;gap:.25rem;margin:0;padding:0;list-style:none;display:flex}.file-item{cursor:pointer;white-space:nowrap;border-radius:4px;align-items:center;gap:.5rem;padding:.5rem;font-size:.85rem;transition:background-color .2s,color .2s;display:flex}.file-item:hover,.file-item.active{color:#58a6ff;background-color:#21262d}.folder-actions{opacity:0;transition:opacity .2s}.file-item:hover .folder-actions{opacity:1}
.editor-panel{background-color:#0d1117;flex-direction:column;height:100%;display:flex;overflow:hidden}.editor-header{color:#8b949e;background-color:#161b22;align-items:center;padding:.5rem 1rem;font-family:monospace;font-size:.85rem;display:flex}.editor-header-icon{margin-right:.5rem}.editor-header-title{font-size:inherit;margin:0;font-weight:400}.editor-wrapper{flex-grow:1;width:100%;overflow:hidden}
.mobile-wizard-trigger{cursor:pointer;background:linear-gradient(135deg,#8b5cf6,#3b82f6);border:none;border-radius:8px;justify-content:center;align-items:center;width:40px;height:40px;transition:transform .2s;display:flex;box-shadow:0 4px 10px #3b82f666}.mobile-wizard-trigger:active{transform:scale(.95)}.mobile-wizard-overlay{z-index:1000;background:#0009;justify-content:center;align-items:flex-end;display:flex;position:fixed;inset:0}.mobile-wizard-modal{background:#1e1e2e;border-top-left-radius:20px;border-top-right-radius:20px;width:100%;max-width:500px;padding:20px;animation:.3s ease-out forwards slideUp;box-shadow:0 -5px 20px #00000080}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.mobile-wizard-header{border-bottom:1px solid #333;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:10px;display:flex}.mobile-wizard-header h3{color:#fff;align-items:center;gap:8px;margin:0;font-size:16px;display:flex}.mobile-wizard-header button{color:#888;cursor:pointer;background:0 0;border:none;padding:4px}.mobile-wizard-menu{flex-direction:column;gap:12px;display:flex}.mobile-wizard-menu button{color:#fff;text-align:left;cursor:pointer;background:#2a2a3c;border:1px solid #444;border-radius:12px;padding:14px;font-size:15px;font-weight:500;transition:background .2s}.mobile-wizard-menu button:active{background:#3b82f6;border-color:#3b82f6}.mobile-wizard-form{flex-direction:column;gap:16px;display:flex}.mobile-wizard-form .back-btn{color:#3b82f6;text-align:left;cursor:pointer;background:0 0;border:none;margin-bottom:4px;padding:0;font-size:14px}.form-group{flex-direction:column;gap:6px;display:flex}.form-group label{color:#aaa;font-size:13px}.form-group input{color:#fff;background:#000;border:1px solid #444;border-radius:8px;padding:12px;font-size:15px}.form-group input:focus{border-color:#3b82f6;outline:none}.generate-btn{color:#fff;cursor:pointer;background:#3b82f6;border:none;border-radius:12px;justify-content:center;align-items:center;gap:8px;margin-top:10px;padding:14px;font-size:15px;font-weight:600;display:flex}
.preview-panel{background-color:#fff;flex-direction:column;height:100%;display:flex;overflow:hidden}.preview-frame-container{background-color:#fff;border-bottom:2px solid #30363d;flex-grow:1;width:100%}.preview-iframe{border:none;width:100%;height:100%}.console-container{background-color:#0d1117;border-top:1px solid #30363d;flex-direction:column;height:100%;display:flex}.console-header{color:#8b949e;background-color:#161b22;border-bottom:1px solid #30363d;align-items:center;padding:.5rem 1rem;font-family:monospace;font-size:.85rem;display:flex}.console-toggle-btn{color:#8b949e;cursor:pointer;background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;padding:.2rem;display:flex}.console-toggle-btn:hover{color:#fff;background-color:#ffffff1a}.console-container.collapsed{height:auto}.console-output{flex-grow:1;margin:0;padding:1.4rem;font-family:monospace;font-size:clamp(12px,1vw,16px);line-height:1.5;list-style:none;overflow-y:scroll}.console-output li{border-bottom:1px solid #ffffff0d;margin-bottom:.25rem;padding-bottom:.25rem}.console-log{color:#c9d1d9}.console-error{color:#f85149;background-color:#f851491a;border-radius:3px;padding:.1rem .3rem}.console-warn{color:#d29922;background-color:#d299221a;border-radius:3px;padding:.1rem .3rem}.console-info{color:#58a6ff;background-color:#58a6ff1a;border-radius:3px;padding:.1rem .3rem}