.header{flex-shrink:0;display:flex;justify-content:space-between;align-items:center;padding:12px 20px;background:#252526;border-bottom:1px solid #3e3e42;min-height:50px}.header-left{display:flex;align-items:center;gap:20px}.app-title{font-size:18px;font-weight:600;color:#fff}.cwd-indicator{font-size:12px;color:#858585;font-family:Courier New,monospace}.header-right{display:flex;align-items:center;gap:15px}.toggle-label{display:flex;align-items:center;gap:8px;color:#d4d4d4;font-size:14px;cursor:pointer}.toggle-label input[type=checkbox]{cursor:pointer}.header-button{padding:6px 12px;background:#0e639c;color:#fff;border:none;border-radius:3px;cursor:pointer;font-size:13px;transition:background .2s}.header-button:hover{background:#17b}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000}.modal-content{background:#252526;padding:24px;border-radius:4px;min-width:400px;border:1px solid #3e3e42}.modal-content h2{margin-bottom:20px;color:#fff}.modal-form{display:flex;flex-direction:column;gap:16px}.modal-form label{display:flex;flex-direction:column;gap:6px;color:#d4d4d4;font-size:14px}.modal-form input{padding:8px;background:#1e1e1e;border:1px solid #3e3e42;color:#d4d4d4;border-radius:3px;font-size:14px}.modal-form input:focus{outline:1px solid #0e639c;border-color:#0e639c}.modal-buttons{display:flex;gap:10px;justify-content:flex-end;margin-top:10px}.modal-buttons button{padding:8px 16px;border:none;border-radius:3px;cursor:pointer;font-size:14px}.modal-buttons button:first-child{background:#0e639c;color:#fff}.modal-buttons button:first-child:hover{background:#17b}.modal-buttons button:last-child{background:#3e3e42;color:#d4d4d4}.modal-buttons button:last-child:hover{background:#4e4e52}/**
 * Copyright (c) 2014 The xterm.js authors. All rights reserved.
 * Copyright (c) 2012-2013, Christopher Jeffrey (MIT License)
 * https://github.com/chjj/term.js
 * @license MIT
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 * THE SOFTWARE.
 *
 * Originally forked from (with the author's permission):
 *   Fabrice Bellard's javascript vt100 for jslinux:
 *   http://bellard.org/jslinux/
 *   Copyright (c) 2011 Fabrice Bellard
 *   The original design remains. The terminal itself
 *   has been extended to include xterm CSI codes, among
 *   other features.
 */.xterm{cursor:text;position:relative;user-select:none;-ms-user-select:none;-webkit-user-select:none}.xterm.focus,.xterm:focus{outline:none}.xterm .xterm-helpers{position:absolute;top:0;z-index:5}.xterm .xterm-helper-textarea{padding:0;border:0;margin:0;position:absolute;opacity:0;left:-9999em;top:0;width:0;height:0;z-index:-5;white-space:nowrap;overflow:hidden;resize:none}.xterm .composition-view{background:#000;color:#fff;display:none;position:absolute;white-space:nowrap;z-index:1}.xterm .composition-view.active{display:block}.xterm .xterm-viewport{background-color:#000;overflow-y:scroll;cursor:default;position:absolute;right:0;left:0;top:0;bottom:0}.xterm .xterm-screen{position:relative}.xterm .xterm-screen canvas{position:absolute;left:0;top:0}.xterm .xterm-scroll-area{visibility:hidden}.xterm-char-measure-element{display:inline-block;visibility:hidden;position:absolute;top:0;left:-9999em;line-height:normal}.xterm.enable-mouse-events{cursor:default}.xterm.xterm-cursor-pointer,.xterm .xterm-cursor-pointer{cursor:pointer}.xterm.column-select.focus{cursor:crosshair}.xterm .xterm-accessibility,.xterm .xterm-message{position:absolute;left:0;top:0;bottom:0;right:0;z-index:10;color:transparent;pointer-events:none}.xterm .live-region{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}.xterm-dim{opacity:1!important}.xterm-underline-1{text-decoration:underline}.xterm-underline-2{text-decoration:double underline}.xterm-underline-3{text-decoration:wavy underline}.xterm-underline-4{text-decoration:dotted underline}.xterm-underline-5{text-decoration:dashed underline}.xterm-overline{text-decoration:overline}.xterm-overline.xterm-underline-1{text-decoration:overline underline}.xterm-overline.xterm-underline-2{text-decoration:overline double underline}.xterm-overline.xterm-underline-3{text-decoration:overline wavy underline}.xterm-overline.xterm-underline-4{text-decoration:overline dotted underline}.xterm-overline.xterm-underline-5{text-decoration:overline dashed underline}.xterm-strikethrough{text-decoration:line-through}.xterm-screen .xterm-decoration-container .xterm-decoration{z-index:6;position:absolute}.xterm-screen .xterm-decoration-container .xterm-decoration.xterm-decoration-top-layer{z-index:7}.xterm-decoration-overview-ruler{z-index:8;position:absolute;top:0;right:0;pointer-events:none}.xterm-decoration-top{z-index:2;position:relative}.terminal-pane{display:flex;flex-direction:column;width:40%;min-width:0;min-height:0;border-right:1px solid #3e3e42;background:#1e1e1e;overflow:hidden}.terminal-header{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:#252526;border-bottom:1px solid #3e3e42;font-size:12px;color:#d4d4d4;flex-shrink:0}.terminal-buttons{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.connection-status{font-size:11px}.connection-status.connected{color:#4ec9b0}.connection-status.disconnected{color:#f48771}.terminal-ready-status{font-size:11px;font-weight:500;padding:2px 8px;border-radius:3px}.terminal-ready-status.ready{color:#4ec9b0;background:#4ec9b01a}.terminal-ready-status.initializing{color:#dcdcaa;background:#dcdcaa1a;animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.run-command-button{padding:4px 8px;color:#fff;border:none;border-radius:3px;cursor:pointer;font-size:11px;transition:all .2s}.run-command-button.run-button{background:#0e639c}.run-command-button.run-button:hover{background:#17b}.run-command-button.install-button{background:#d13438}.run-command-button.install-button:hover{background:#e84749}.terminal-container{flex:1;min-height:0;padding:8px;overflow:hidden;position:relative;display:block;box-sizing:border-box}.terminal-container .xterm{width:100%!important;height:calc(100% + -0px)!important;box-sizing:border-box;display:block}.terminal-container .xterm-screen{width:100%!important;box-sizing:border-box}.terminal-container .xterm-viewport{overflow-y:auto!important;box-sizing:border-box;width:100%!important}.terminal-container .xterm-scroll-area{box-sizing:border-box}.preview-pane{display:flex;flex-direction:column;width:60%;min-width:0;min-height:0;background:#1e1e1e;overflow:hidden}.preview-header{padding:8px 12px;background:#252526;border-bottom:1px solid #3e3e42;display:flex;justify-content:space-between;align-items:center;flex-shrink:0}.tabs{display:flex;gap:4px}.tab{padding:6px 12px;background:transparent;border:none;color:#858585;cursor:pointer;font-size:13px;border-bottom:2px solid transparent;transition:all .2s}.tab:hover{color:#d4d4d4}.tab.active{color:#fff;border-bottom-color:#0e639c}.device-selector{display:flex;gap:4px}.device-button{padding:4px 10px;background:transparent;border:1px solid #3e3e42;color:#858585;cursor:pointer;font-size:11px;border-radius:3px;transition:all .2s}.device-button:hover{color:#d4d4d4;border-color:#555;background:#2a2a2a}.device-button.active{color:#fff;border-color:#0e639c;background:#0e639c}.preview-content{flex:1;overflow:hidden;display:flex;flex-direction:column}.code-view{display:flex;flex:1;overflow:hidden;background:#1e1e1e}.file-explorer{display:flex;flex-direction:column;width:280px;min-width:200px;border-right:1px solid #3e3e42;background:#252526;overflow:hidden}.file-explorer-header{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:#2d2d30;border-bottom:1px solid #3e3e42;font-size:11px;font-weight:600;color:#fff;text-transform:uppercase;letter-spacing:.5px}.file-explorer-title{flex:1}.file-explorer-actions{display:flex;gap:4px}.file-explorer-icon{background:transparent;border:none;color:#ccc;cursor:pointer;padding:4px;border-radius:2px;transition:all .2s;display:flex;align-items:center;justify-content:center;width:20px;height:20px}.file-explorer-icon:hover{background:#3e3e42;color:#fff}.file-explorer-icon svg{width:14px;height:14px}.file-tree{flex:1;overflow-y:auto;overflow-x:hidden;padding:4px 0}.file-tree::-webkit-scrollbar{width:10px}.file-tree::-webkit-scrollbar-track{background:#252526}.file-tree::-webkit-scrollbar-thumb{background:#424242;border-radius:5px}.file-tree::-webkit-scrollbar-thumb:hover{background:#4e4e4e}.folder-children{margin-left:0}.file-item{display:flex;align-items:center;padding:4px 8px 4px 12px;cursor:pointer;font-size:13px;color:#fff;transition:background .15s;-webkit-user-select:none;user-select:none}.file-item:hover{background:#2a2d2e}.file-item.selected{background:#37373d;color:#fff}.file-item.directory{font-weight:500}.file-icon-container{margin-right:6px;display:flex;align-items:center;justify-content:center;gap:2px;flex-shrink:0}.file-icon-container svg{width:16px;height:16px}.folder-chevron{color:#858585;width:12px;height:12px}.file-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.code-editor{display:flex;flex-direction:column;flex:1;overflow:hidden;background:#1e1e1e}.editor-tabs{display:flex;background:#2d2d30;border-bottom:1px solid #3e3e42;overflow-x:auto;overflow-y:hidden;flex-shrink:0}.editor-tab{display:flex;align-items:center;padding:8px 16px;background:#2d2d30;border-right:1px solid #3e3e42;color:#858585;cursor:pointer;font-size:13px;white-space:nowrap;transition:all .2s;-webkit-user-select:none;user-select:none;position:relative}.editor-tab:hover{background:#37373d;color:#ccc}.editor-tab.active{background:#1e1e1e;color:#fff}.editor-tab.active:after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background:#0e639c}.tab-name{margin-right:8px;max-width:200px;overflow:hidden;text-overflow:ellipsis}.tab-close{background:transparent;border:none;color:#858585;cursor:pointer;font-size:18px;line-height:1;padding:0 4px;border-radius:2px;transition:all .2s;width:18px;height:18px;display:flex;align-items:center;justify-content:center}.tab-close:hover{background:#3e3e42;color:#fff}.file-content{display:flex;flex-direction:column;flex:1;overflow:hidden;background:#1e1e1e}.file-content-header{padding:8px 16px;background:#252526;border-bottom:1px solid #3e3e42;font-size:12px;color:#858585;flex-shrink:0;display:none}.file-name-display{font-weight:500;color:#ccc}.code-editor-content{flex:1;overflow:auto;position:relative}.code-block{color:#d4d4d4;font-family:Courier New,monospace;font-size:13px;line-height:1.5;white-space:pre-wrap;word-wrap:break-word}.preview-view{flex:1;display:flex;flex-direction:column;overflow:hidden;background:#1e1e1e}.preview-iframe{flex:1;width:100%;height:100%;border:none;background:#fff;display:block}.preview-empty{flex:1;display:flex;align-items:center;justify-content:center;background:#1e1e1e;color:#d4d4d4}.empty-state{text-align:center;color:#858585;padding:40px;background:transparent}.empty-state p{margin-bottom:12px}.empty-hint{font-size:12px;color:#6a6a6a}.app{display:flex;flex-direction:column;height:100vh;max-height:100vh;overflow:hidden;background:#1e1e1e;color:#d4d4d4}.app-content{display:flex;flex:1;min-height:0;overflow:hidden}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;height:100vh;overflow:hidden}#root{height:100vh;display:flex;flex-direction:column}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}