@import"https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&display=swap";:root{--bg: #0d0d11;--surface: #13131a;--surface2: #1a1a24;--border: #23232f;--border2: #2e2e3e;--accent: #e8433a;--accent2: #3a9de8;--green: #3ae87a;--yellow: #e8c43a;--text: #d4d4e0;--muted: #5a5a72;--muted2: #3a3a4e;--ease-out: cubic-bezier(.23, 1, .32, 1)}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:DM Sans,sans-serif;font-size:13px;-webkit-font-smoothing:antialiased}button{cursor:pointer;border:none;background:none;color:inherit;font-family:inherit}.ide{display:flex;flex-direction:column;height:100vh;overflow:hidden}.topbar{display:flex;align-items:center;height:40px;background:var(--surface);border-bottom:1px solid var(--border);padding:0 8px;gap:8px;flex-shrink:0;-webkit-user-select:none;user-select:none}.topbar-left{display:flex;align-items:center;gap:8px;min-width:160px}.sidebar-toggle{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:5px;color:var(--muted);font-size:15px;transition:color .15s var(--ease-out),background .15s var(--ease-out)}.sidebar-toggle:hover{color:var(--text);background:var(--surface2)}.logo-mark{font-size:14px;background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-weight:700}.app-name{font-size:12px;font-weight:600;color:var(--muted);letter-spacing:.02em}.topbar-center{display:flex;align-items:center;gap:1px;flex:1;overflow-x:auto;scrollbar-width:none}.tab-file{display:flex;align-items:center;gap:5px;padding:0 14px;height:36px;font-size:12px;color:var(--muted);border-bottom:2px solid transparent;white-space:nowrap;transition:color .15s var(--ease-out),border-color .15s var(--ease-out)}.tab-file:hover{color:var(--text)}.tab-file.active{color:var(--text);border-bottom-color:var(--accent2);background:var(--surface2)}.file-badge{font-size:9px;padding:1px 5px;border-radius:3px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}.file-badge.server{background:#e8433a26;color:var(--accent)}.file-badge.client{background:#3a9de826;color:var(--accent2)}.file-badge.module{background:#3ae87a26;color:var(--green)}.topbar-right{display:flex;align-items:center;gap:6px;min-width:180px;justify-content:flex-end}.btn-icon{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:5px;color:var(--muted);font-size:14px;transition:color .15s var(--ease-out),background .15s var(--ease-out)}.btn-icon:hover{color:var(--text);background:var(--surface2)}.btn-preview{display:flex;align-items:center;gap:5px;padding:5px 12px;border-radius:6px;font-size:12px;font-weight:600;background:#3ae87a1a;color:var(--green);border:1px solid rgba(58,232,122,.2);transition:all .15s var(--ease-out)}.btn-preview:hover{background:#3ae87a2e;border-color:#3ae87a66}.btn-preview.active{background:#3ae87a38;border-color:var(--green)}.main-area{display:flex;flex:1;overflow:hidden}.sidebar{width:220px;background:var(--surface);border-right:1px solid var(--border);overflow-y:auto;flex-shrink:0;scrollbar-width:thin;scrollbar-color:var(--border2) transparent}.sidebar-section{padding:10px 12px 6px;font-size:10px;font-weight:700;letter-spacing:.1em;color:var(--muted);text-transform:uppercase}.sidebar-folder{display:flex;align-items:center;gap:4px;padding:4px 12px;font-size:12px;color:var(--muted);-webkit-user-select:none;user-select:none}.folder-icon{font-size:10px}.sidebar-file{display:flex;align-items:center;gap:6px;width:100%;padding:4px 12px 4px 24px;font-size:12px;color:var(--muted);text-align:left;transition:color .12s,background .12s;border-radius:0}.sidebar-file:hover{color:var(--text);background:var(--surface2)}.sidebar-file.active{color:var(--text);background:#3a9de81a}.editor-area{display:flex;flex-direction:column;flex:1;overflow:hidden}.editor-preview-split{flex:1;overflow:hidden;display:flex}.editor-pane{flex:1;overflow:hidden}.preview-pane{width:380px;flex-shrink:0;border-left:1px solid var(--border);background:var(--surface);display:flex;flex-direction:column;overflow:hidden}.preview-header{display:flex;justify-content:space-between;align-items:center;padding:8px 14px;border-bottom:1px solid var(--border);font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--muted);flex-shrink:0}.preview-note{font-size:10px;font-weight:400;color:var(--muted2)}.preview-body{flex:1;display:flex;align-items:center;justify-content:center;padding:24px}.preview-placeholder{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}.preview-icon{font-size:40px}.preview-title{font-size:15px;font-weight:700;color:var(--text)}.preview-sub{font-size:12px;color:var(--muted);max-width:240px;line-height:1.5}.preview-input{width:100%;background:var(--surface2);border:1px solid var(--border2);border-radius:6px;padding:8px 12px;color:var(--text);font-family:JetBrains Mono,monospace;font-size:12px;text-align:center;margin-top:6px;transition:border-color .15s var(--ease-out)}.preview-input:focus{outline:none;border-color:var(--accent2)}.preview-hint{font-size:11px;color:var(--muted2)}.bottom-panel{height:260px;border-top:1px solid var(--border);background:var(--surface);display:flex;flex-direction:column;flex-shrink:0}.bottom-tabs{display:flex;border-bottom:1px solid var(--border);flex-shrink:0}.bottom-tab{padding:6px 16px;font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--muted);border-bottom:2px solid transparent;transition:color .15s var(--ease-out),border-color .15s var(--ease-out)}.bottom-tab:hover{color:var(--text)}.bottom-tab.active{color:var(--accent2);border-bottom-color:var(--accent2)}.bottom-content{flex:1;overflow:hidden;display:flex;flex-direction:column}.terminal-container{width:100%;height:100%;overflow:hidden}.terminal-container .xterm{height:100%;padding:6px 10px}.panel-loading{padding:16px;color:var(--muted);font-family:JetBrains Mono,monospace;font-size:12px}.ai-panel{display:flex;flex-direction:column;gap:8px;padding:10px 12px;height:100%;overflow-y:auto}.ai-modes{display:flex;gap:6px}.ai-mode{padding:4px 12px;border-radius:5px;font-size:11px;font-weight:600;color:var(--muted);border:1px solid var(--border2);transition:all .15s var(--ease-out)}.ai-mode:hover{color:var(--text);border-color:var(--border)}.ai-mode.active{color:var(--accent2);border-color:var(--accent2);background:#3a9de814}.ai-input-row{display:flex;gap:8px;align-items:flex-end}.ai-input{flex:1;background:var(--surface2);border:1px solid var(--border2);border-radius:6px;padding:8px 10px;color:var(--text);font-family:DM Sans,sans-serif;font-size:12px;resize:none;line-height:1.4;transition:border-color .15s var(--ease-out)}.ai-input:focus{outline:none;border-color:var(--accent2)}.ai-input::placeholder{color:var(--muted2)}.ai-send{width:36px;height:36px;border-radius:6px;background:var(--accent2);color:#fff;font-size:11px;font-weight:700;flex-shrink:0;transition:opacity .15s}.ai-send:disabled{opacity:.4;cursor:wait}.ai-send:hover:not(:disabled){opacity:.85}.ai-output{background:var(--surface2);border:1px solid var(--border2);border-radius:6px;padding:10px;overflow-y:auto;flex:1}.ai-output pre{font-family:JetBrains Mono,monospace;font-size:11px;line-height:1.6;color:var(--text);white-space:pre-wrap;word-break:break-word}.ai-status{font-size:11px;color:var(--green);padding:4px 0}.statusbar{display:flex;align-items:center;height:24px;background:var(--accent2);padding:0 10px;gap:16px;flex-shrink:0}.status-item{font-size:11px;color:#ffffffbf;font-weight:500;white-space:nowrap}.status-branch{font-weight:600;color:#fff}.status-spacer{flex:1}.status-dot.ready{color:#ffffffe6}.status-dot.loading{color:#fff;animation:pulse 1s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--muted2)}@media (max-width: 768px){.sidebar{width:180px}.preview-pane{width:280px}.app-name,.tab-file .file-badge{display:none}.bottom-panel{height:220px}}