:root{--font-system: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", system-ui, sans-serif;--font-mono: "SF Mono", "Fira Code", "Cascadia Code", Consolas, monospace;--bg-darkest: #12141a;--bg-main: #1a1d24;--bg-sidebar: #21252e;--bg-activity: #2a2e39;--bg-header: rgba(26, 29, 36, .92);--bg-hover: rgba(255, 255, 255, .08);--bg-active: rgba(0, 122, 204, .25);--accent: #007ACC;--accent-hover: #0098FF;--accent-light: #4FC1FF;--accent-green: #4EC9B0;--accent-orange: #CE9178;--accent-red: #F14C4C;--accent-yellow: #DCDCAA;--accent-purple: #C586C0;--text-primary: #CCCCCC;--text-bright: #FFFFFF;--text-muted: #8A92A0;--text-subtle: #5A606E;--border-light: rgba(255, 255, 255, .09);--border-active: #007ACC;--touch-target: 44px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;--space-xl: 24px;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--shadow-lg: 0 12px 32px rgba(0, 0, 0, .45);--backdrop-blur: blur(20px)}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;user-select:none}html,body,#root{width:100%;height:100%;overflow:hidden;background-color:var(--bg-darkest);color:var(--text-primary);font-family:var(--font-system);-webkit-font-smoothing:antialiased;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}input,textarea,button,select{font-family:inherit;font-size:inherit;color:inherit;touch-action:manipulation}button,.icon-btn,.header-action-btn,.tree-item,.brand-badge{touch-action:manipulation}@keyframes fadeInUp{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInRight{0%{opacity:0;transform:translate(8px)}to{opacity:1;transform:translate(0)}}@keyframes softPulse{0%,to{box-shadow:0 0 #007acc00}50%{box-shadow:0 0 0 4px #007acc0d}}.icon-btn,.header-action-btn,.btn-primary,.tab-item,.tree-item,.preview-iframe,.drawer-collapsed-bar,.output-drawer,.modal-card,.command-palette,.sidebar,.preview-container,.brand-badge{transition:transform .18s cubic-bezier(.16,1,.3,1),background .18s cubic-bezier(.16,1,.3,1),border-color .18s cubic-bezier(.16,1,.3,1),box-shadow .18s cubic-bezier(.16,1,.3,1),opacity .18s cubic-bezier(.16,1,.3,1),color .18s cubic-bezier(.16,1,.3,1),width .24s cubic-bezier(.16,1,.3,1)}.icon-btn:hover,.header-action-btn:hover,.btn-primary:hover,.tab-item:hover,.tree-item:hover,.drawer-collapsed-bar:hover{transform:translateY(-1px)}.icon-btn:active,.header-action-btn:active,.btn-primary:active,.tab-item:active,.tree-item:active{transform:scale(.98)}.modal-card,.command-palette,.output-drawer,.preview-container,.sidebar{animation:fadeInUp .22s cubic-bezier(.16,1,.3,1)}.preview-iframe{animation:fadeInRight .22s cubic-bezier(.16,1,.3,1)}.btn-primary.running{animation:softPulse 1.4s ease-in-out infinite}.app-container{display:flex;flex-direction:column;height:100%;width:100vw;background-color:var(--bg-main);position:relative}.header-nav{height:48px;min-height:48px;background:var(--bg-header);backdrop-filter:var(--backdrop-blur);-webkit-backdrop-filter:var(--backdrop-blur);border-bottom:.5px solid var(--border-light);display:flex;align-items:center;justify-content:space-between;padding:0 var(--space-md);z-index:50;gap:8px}.project-switcher-wrap{min-width:0;flex:1 1 auto}.project-switcher-btn{min-width:0;overflow:hidden}.project-rename-btn{flex-shrink:0}.brand-badge{display:flex;align-items:center;gap:var(--space-sm);font-weight:700;font-size:15px;color:var(--text-bright)}.brand-icon{width:28px;height:28px;background:linear-gradient(135deg,#007acc,#004f80);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 2px 8px #007acc66}.nav-actions{display:flex;align-items:center;gap:var(--space-xs)}.icon-btn{min-width:34px;min-height:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:var(--radius-sm);color:var(--text-primary);cursor:pointer;transition:background .15s ease,color .15s ease,transform .1s ease}.icon-btn:active{transform:scale(.94);background:var(--bg-hover)}.icon-btn.active{background:var(--bg-active);color:var(--accent-light)}.header-action-btn{display:inline-flex;align-items:center;gap:5px;height:32px;padding:0 10px;background:transparent;border:1px solid var(--border-light);border-radius:var(--radius-sm);color:var(--text-primary);font-size:12px;font-weight:500;cursor:pointer;transition:background .15s,border-color .15s,color .15s;white-space:nowrap}@media(hover:hover)and (pointer:fine){.header-action-btn:hover{background:var(--bg-hover);border-color:#ffffff2e;color:var(--text-bright)}}.header-action-btn:active{transform:scale(.95)}.header-action-btn.active{background:var(--bg-active);border-color:var(--accent);color:var(--accent-light)}@media(max-width:768px){.header-nav{gap:6px;padding:0 8px}.nav-actions{flex-shrink:0;gap:6px}.project-switcher-wrap{flex:1 1 auto;min-width:0}.project-switcher-btn{max-width:140px}.project-rename-btn,.action-label{display:none}.header-action-btn{padding:0 10px;gap:0;min-height:40px;min-width:40px;border:1px solid var(--border-light)}.icon-btn{min-width:40px;min-height:40px;height:40px}.btn-primary{min-height:40px;padding:0 12px}}.btn-primary{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;background:linear-gradient(180deg,#007acc,#005a96);border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-sm);color:#fff;font-weight:600;font-size:13px;cursor:pointer;box-shadow:0 2px 6px #007acc4d;transition:all .15s ease}.btn-primary:active{transform:scale(.96);opacity:.9}.mobile-more-btn{display:none!important}@media(max-width:768px){.desktop-actions{display:none!important}.mobile-more-btn{display:inline-flex!important}.brand-title,.run-label{display:none}.run-btn{min-width:38px;padding:0 8px}}.main-layout{display:flex;flex:1;min-height:0;position:relative;overflow:hidden}.sidebar-backdrop{display:none}@media(max-width:768px){.sidebar-backdrop{display:block;position:fixed;inset:0;background:#0000008c;z-index:39;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}}.sidebar{width:250px;background:var(--bg-sidebar);border-right:.5px solid var(--border-light);display:flex;flex-direction:column;z-index:40;flex-shrink:0;transition:width .25s cubic-bezier(.16,1,.3,1)}@media(max-width:768px){.sidebar{position:absolute;top:0;bottom:0;left:0;width:min(82vw,290px);box-shadow:6px 0 28px #0009}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}.sidebar.collapsed{display:none}.sidebar-header{height:38px;padding:0 var(--space-md);display:flex;align-items:center;justify-content:space-between;border-bottom:.5px solid var(--border-light);font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--text-muted)}.file-tree{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:var(--space-xs) 0}.tree-item{display:flex;align-items:center;gap:8px;height:34px;padding:0 var(--space-md);font-size:13px;color:var(--text-primary);cursor:pointer;border-radius:var(--radius-sm);margin:1px 6px;transition:background .1s ease}.tree-item:hover,.tree-item:active{background:var(--bg-hover)}.tree-item.selected{background:var(--bg-active);color:var(--text-bright);font-weight:500}.workspace-split{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;position:relative;overflow:hidden}.split-container{flex:1;min-height:0;display:flex;overflow:hidden}@media(max-width:768px){.split-container.split-mode{flex-direction:column}}.split-resizer{width:6px;background:var(--border-light);cursor:col-resize;z-index:20;flex-shrink:0;transition:background .15s}.split-resizer:hover,.split-resizer:active{background:var(--accent)}.editor-wrapper{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;position:relative;overflow:hidden}.tab-bar-container{height:36px;min-height:36px;background:var(--bg-darkest);border-bottom:.5px solid var(--border-light);display:flex;align-items:center;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}.tab-bar-container::-webkit-scrollbar{height:2px}.tab-bar-container::-webkit-scrollbar-thumb{background:#ffffff26}.tab-item{display:flex;align-items:center;gap:6px;height:36px;padding:0 12px;background:var(--bg-darkest);border-right:.5px solid var(--border-light);color:var(--text-muted);font-size:13px;cursor:pointer;transition:all .12s ease;user-select:none}.tab-item:hover{background:var(--bg-hover);color:var(--text-bright)}.tab-item.active{background:var(--bg-main);color:var(--text-bright);border-top:2px solid var(--accent)}.add-tab-btn{display:flex;align-items:center;justify-content:center;width:32px;height:36px;background:transparent;border:none;color:var(--text-muted);cursor:pointer;transition:color .15s,background .15s;flex-shrink:0}.add-tab-btn:hover{background:var(--bg-hover);color:var(--accent-light)}.touch-toolbar{height:38px;min-height:38px;background:var(--bg-sidebar);border-top:.5px solid var(--border-light);display:flex;align-items:center;gap:4px;padding:0 8px;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;z-index:30}.touch-toolbar::-webkit-scrollbar{display:none}.touch-key{min-width:34px;height:30px;display:inline-flex;align-items:center;justify-content:center;background:var(--bg-activity);border:1px solid var(--border-light);border-radius:6px;font-family:var(--font-mono);font-size:13px;font-weight:600;color:var(--text-bright);cursor:pointer;padding:0 8px;transition:background .1s ease}.touch-key:active{background:var(--accent);color:#fff}.drawer-collapsed-bar{height:28px;min-height:28px;background:var(--bg-sidebar);border-top:.5px solid var(--border-light);display:flex;align-items:center;justify-content:space-between;padding:0 12px;font-size:11px;font-weight:600;color:var(--text-muted);cursor:pointer;z-index:25;transition:background .15s}.drawer-collapsed-bar:hover{background:var(--bg-activity);color:var(--text-bright)}.output-drawer{background:var(--bg-darkest);border-top:.5px solid var(--border-light);display:flex;flex-direction:column;z-index:25;flex-shrink:0;height:220px;transition:height .22s cubic-bezier(.16,1,.3,1)}.drawer-header{height:32px;padding:0 var(--space-md);background:var(--bg-sidebar);display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:600;border-bottom:.5px solid var(--border-light)}.console-output{flex:1;padding:var(--space-sm) var(--space-md);font-family:var(--font-mono);font-size:12px;line-height:1.5;overflow-y:auto;user-select:text;background:#101216}.log-line{margin-bottom:3px;word-break:break-all}.log-line.stdout{color:#d4d4d4}.log-line.stderr{color:#f14c4c}.log-line.info{color:#4fc1ff}.log-line.success{color:#4ec9b0}.preview-container{flex:1;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden;border-left:.5px solid var(--border-light)}.preview-toolbar{width:100%;height:36px;background:var(--bg-sidebar);border-bottom:.5px solid var(--border-light);display:flex;align-items:center;justify-content:space-between;padding:0 var(--space-md)}.frame-switcher{display:flex;gap:4px;background:var(--bg-darkest);padding:2px;border-radius:var(--radius-sm)}.frame-btn{padding:3px 8px;font-size:11px;border:none;background:transparent;color:var(--text-muted);border-radius:4px;cursor:pointer}.frame-btn.active{background:var(--accent);color:#fff;font-weight:600}.preview-iframe-wrapper{flex:1;width:100%;display:flex;align-items:center;justify-content:center;padding:var(--space-sm);background:#0f0f0f}.preview-iframe{border:none;background:#fff;transition:all .3s cubic-bezier(.16,1,.3,1);box-shadow:var(--shadow-lg);border-radius:var(--radius-sm)}.modal-overlay{position:fixed;inset:0;background:#000000b8;backdrop-filter:var(--backdrop-blur);display:flex;align-items:center;justify-content:center;z-index:100;padding:var(--space-md)}.modal-card{width:100%;max-width:520px;background:var(--bg-sidebar);border:.5px solid var(--border-light);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);overflow:hidden;display:flex;flex-direction:column}.modal-header{padding:var(--space-md) var(--space-lg);border-bottom:.5px solid var(--border-light);display:flex;align-items:center;justify-content:space-between;font-weight:600;font-size:15px;color:var(--text-bright)}.modal-body{padding:var(--space-lg);overflow-y:auto;max-height:70vh}.modal-footer{padding:var(--space-md) var(--space-lg);border-top:.5px solid var(--border-light);display:flex;justify-content:flex-end;gap:var(--space-sm)}.command-palette{width:100%;max-width:580px;background:var(--bg-sidebar);border:.5px solid var(--border-light);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);overflow:hidden;margin-top:40px}.command-input-wrapper{padding:var(--space-md);border-bottom:.5px solid var(--border-light);display:flex;align-items:center;gap:var(--space-md)}.command-input{flex:1;background:transparent;border:none;outline:none;font-size:15px;color:var(--text-bright)}.command-list{max-height:320px;overflow-y:auto;padding:var(--space-xs)}.command-item{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-radius:var(--radius-sm);font-size:13px;cursor:pointer;gap:10px;color:var(--text-primary)}.command-item:hover,.command-item.selected{background:var(--bg-active);color:var(--text-bright)}.kbd-shortcut{font-family:var(--font-mono);font-size:11px;padding:2px 6px;background:var(--bg-darkest);border:1px solid var(--border-light);border-radius:4px;color:var(--text-muted)}@media(max-width:768px){.header-nav{height:44px;min-height:44px;padding:0 6px}.editor-settings-bar{display:none!important}.output-drawer{height:180px}}