*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{color-scheme:dark;--bg-app: #000;--bg-titlebar: #050505;--bg-rail: #030303;--bg-sidebar: #070707;--bg-panel: #080808;--bg-panel-alt: #0b0b0b;--bg-editor: #050506;--bg-elevated: #121212;--bg-hover: #151515;--bg-active: #1b1b1b;--bg-input: #0e0e0e;--border: #242424;--border-subtle: #171717;--border-strong: #343434;--text-primary: #f4f4f5;--text-secondary: #b8b8bb;--text-tertiary: #7d7d82;--text-muted: #505055;--accent: #f4f4f5;--accent-bright: #fff;--accent-ink: #09090b;--accent-soft: rgba(255, 255, 255, .075);--accent-hover: rgba(255, 255, 255, .12);--accent-border: rgba(255, 255, 255, .25);--success: #8bd5a4;--warning: #eed49f;--error: #ed8796;--info: #8aadf4;--success-soft: rgba(139, 213, 164, .1);--warning-soft: rgba(238, 212, 159, .09);--error-soft: rgba(237, 135, 150, .1);--info-soft: rgba(138, 173, 244, .09);--font-sans: "Ubuntu Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;--radius-xs: 4px;--radius-sm: 6px;--radius-md: 8px;--radius-lg: 12px;--shadow-popover: 0 18px 48px rgba(0, 0, 0, .44);--transition-fast: .12s cubic-bezier(.2, 0, 0, 1);--transition-base: .18s cubic-bezier(.2, 0, 0, 1);--header-height: 46px;--activity-width: 46px;--sidebar-width: 214px;--panel-header-height: 40px;--editor-status-height: 26px}html,body,#root{width:100%;height:100%}html,body{overflow:hidden}body{color:var(--text-primary);background:var(--bg-app);font-family:var(--font-sans);font-size:13px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}button,input,select,textarea{font:inherit}button{color:inherit}::selection{background:#ffffff54}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#292929;border:2px solid transparent;border-radius:999px;background-clip:padding-box}::-webkit-scrollbar-thumb:hover{background:#414141;border:2px solid transparent;background-clip:padding-box}.app{display:flex;flex-direction:column;width:100%;height:100vh;min-width:0;overflow:hidden;background:radial-gradient(circle at 50% -30%,rgba(255,255,255,.025),transparent 36%),var(--bg-app)}.header{position:relative;z-index:100;display:grid;grid-template-columns:minmax(250px,1fr) auto minmax(250px,1fr);align-items:center;min-height:var(--header-height);height:var(--header-height);padding:0 10px;gap:12px;background:#050505f5;border-bottom:1px solid var(--border);box-shadow:inset 0 1px #ffffff05;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.header-brand,.header-actions,.header-center,.header-product,.status-bar{display:flex;align-items:center}.header-brand{gap:9px;min-width:0}.sidebar-toggle{display:inline-grid;place-items:center;width:30px;height:30px;flex:0 0 auto;color:var(--text-muted);border:1px solid transparent;border-radius:var(--radius-sm);background:transparent;cursor:pointer;transition:all var(--transition-fast)}.sidebar-toggle:hover,.sidebar-toggle.active{color:var(--text-secondary);background:var(--bg-hover);border-color:var(--border)}.header-logo{width:27px;height:27px;object-fit:cover;border:1px solid var(--border-strong);border-radius:8px;box-shadow:inset 0 1px #ffffff1f,0 2px 8px #0000004d}.header-product{min-width:0;gap:7px;white-space:nowrap}.header-title{color:var(--text-primary);font-size:12.5px;font-weight:700;letter-spacing:-.01em}.header-separator{color:var(--text-muted)}.header-file{overflow:hidden;color:var(--text-tertiary);font-family:var(--font-mono);font-size:11.5px;text-overflow:ellipsis}.header-center{justify-content:center}.status-bar{min-width:176px;height:28px;justify-content:center;gap:7px;padding:0 10px;color:var(--text-tertiary);background:var(--bg-input);border:1px solid var(--border-subtle);border-radius:999px;transition:border-color var(--transition-base),background var(--transition-base)}.status-bar.running{background:var(--warning-soft);border-color:#eed49f33}.status-bar.error{background:var(--error-soft);border-color:#ed879638}.status-dot{width:6px;height:6px;flex:0 0 auto;border-radius:50%;background:var(--success);box-shadow:0 0 0 3px #8bd5a414}.status-dot.idle{background:var(--text-muted);box-shadow:none}.status-dot.running{background:var(--warning);box-shadow:0 0 0 3px #eed49f1a;animation:status-pulse 1.1s ease-in-out infinite}.status-dot.error{background:var(--error);box-shadow:0 0 0 3px #ed87961a}.status-text{color:var(--text-secondary);font-size:11px;font-weight:600}.autosave-label{padding-left:7px;color:var(--text-muted);border-left:1px solid var(--border);font-size:10px}@keyframes status-pulse{0%,to{opacity:1}50%{opacity:.34}}.header-actions{justify-content:flex-end;gap:5px}.header-divider{width:1px;height:18px;margin:0 3px;background:var(--border)}.btn{display:inline-flex;align-items:center;justify-content:center;height:30px;gap:7px;padding:0 11px;color:var(--text-secondary);background:transparent;border:1px solid transparent;border-radius:var(--radius-sm);outline:none;cursor:pointer;font-size:11.5px;font-weight:600;white-space:nowrap;transition:color var(--transition-fast),background var(--transition-fast),border-color var(--transition-fast),transform var(--transition-fast)}.btn:focus-visible,.activity-button:focus-visible,.panel-action-button:focus-visible,.viewport-switcher button:focus-visible,.console-filter:focus-visible,.console-toggle:focus-visible,.sidebar-close:focus-visible,.editor-settings-button:focus-visible{outline:2px solid var(--accent-border);outline-offset:1px}.btn-icon{width:30px;padding:0}.btn-ghost{color:var(--text-tertiary)}.btn-ghost:hover{color:var(--text-primary);background:var(--bg-hover);border-color:var(--border)}.btn-ghost:active{transform:scale(.96)}.btn-run{min-width:104px;color:var(--accent-ink);background:var(--accent);border-color:var(--accent);box-shadow:inset 0 1px #ffffff57,0 3px 12px #ffffff14}.btn-run:hover{background:var(--accent-bright);border-color:var(--accent-bright);transform:translateY(-1px)}.btn-run:active{transform:translateY(0) scale(.98)}.btn-run.running{color:var(--warning);background:var(--warning-soft);border-color:#eed49f33;box-shadow:none;transform:none}.btn-copy-flash{color:var(--success);background:var(--success-soft);border-color:#8bd5a438}.kbd,.console-shortcut{color:#09090b9e;font-family:var(--font-mono);font-size:9px;font-weight:500}.kbd{padding:1px 4px;background:#09090b14;border:1px solid rgba(9,9,11,.14);border-radius:var(--radius-xs)}.workbench{display:flex;flex:1;min-width:0;min-height:0;overflow:hidden}.activity-bar{position:relative;z-index:30;display:flex;width:var(--activity-width);flex:0 0 var(--activity-width);flex-direction:column;align-items:center;justify-content:space-between;padding:7px 0 10px;background:var(--bg-rail);border-right:1px solid var(--border)}.activity-bar-group{display:flex;width:100%;flex-direction:column;align-items:center;gap:3px}.activity-button{position:relative;display:grid;place-items:center;width:34px;height:34px;color:var(--text-muted);background:transparent;border:1px solid transparent;border-radius:var(--radius-sm);outline:none;cursor:pointer;transition:all var(--transition-fast)}.activity-button svg{width:17px;height:17px}.activity-button:hover{color:var(--text-secondary);background:var(--bg-hover)}.activity-button.active{color:var(--accent);background:var(--accent-soft);border-color:#ffffff1f}.activity-button.active:before{position:absolute;left:-6px;width:2px;height:17px;content:"";background:var(--accent);border-radius:0 2px 2px 0}.activity-language{display:block;width:27px;height:27px;object-fit:cover;border-radius:7px;box-shadow:inset 0 1px #ffffff40}.project-sidebar{display:flex;width:var(--sidebar-width);flex:0 0 var(--sidebar-width);min-height:0;flex-direction:column;overflow:hidden;background:var(--bg-sidebar);border-right:1px solid var(--border)}.sidebar-header{display:flex;height:var(--panel-header-height);min-height:var(--panel-header-height);align-items:center;justify-content:space-between;padding:0 9px 0 13px;color:var(--text-tertiary);border-bottom:1px solid var(--border-subtle);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.sidebar-close{display:grid;place-items:center;width:24px;height:24px;color:var(--text-muted);background:transparent;border:0;border-radius:var(--radius-xs);cursor:pointer}.sidebar-close:hover{color:var(--text-secondary);background:var(--bg-hover)}.sidebar-close svg{width:12px;height:12px}.project-tree{flex:1;min-height:0;padding:8px 6px}.project-root,.project-file{display:flex;width:100%;align-items:center;height:28px;gap:7px;white-space:nowrap}.project-root{padding:0 7px;overflow:hidden;color:var(--text-tertiary);font-size:10px;font-weight:700;letter-spacing:.035em;text-transform:uppercase;text-overflow:ellipsis}.project-root svg{width:12px;height:12px;flex:0 0 auto}.project-file{padding:0 8px 0 26px;color:var(--text-secondary);background:transparent;border:1px solid transparent;border-radius:var(--radius-sm);outline:none;cursor:default;font-size:11.5px;text-align:left}.project-file.active{color:var(--text-primary);background:var(--bg-active);border-color:#ffffff06}.file-type-icon{display:block;width:18px;height:18px;flex:0 0 auto;object-fit:cover;border:1px solid rgba(246,207,118,.2);border-radius:5px}.file-saved-dot,.tab-saved,.storage-status-dot,.context-dot,.status-branch-dot{display:block;flex:0 0 auto;border-radius:50%}.file-saved-dot{width:5px;height:5px;margin-left:auto;background:var(--text-muted)}.sidebar-footer{display:flex;align-items:flex-start;gap:9px;padding:12px;color:var(--text-muted);border-top:1px solid var(--border-subtle)}.storage-status-dot{width:6px;height:6px;margin-top:4px;background:var(--success);box-shadow:0 0 0 3px var(--success-soft)}.sidebar-footer div{display:flex;min-width:0;flex-direction:column;gap:2px}.sidebar-footer strong{color:var(--text-tertiary);font-size:10.5px;font-weight:600}.sidebar-footer span:last-child{overflow:hidden;font-size:9px;text-overflow:ellipsis;white-space:nowrap}.workspace{display:flex;flex:1;min-width:0;min-height:0;flex-direction:column;overflow:hidden;background:var(--bg-panel)}.workspace-panels{display:flex;flex:1;min-height:0;overflow:hidden}.editor-pane,.preview-pane{display:flex;min-width:0;min-height:0;overflow:hidden}.preview-pane{flex:1}.workspace-panels.preview-closed .editor-pane{width:100%!important;height:100%;flex:1 1 auto}.panel{display:flex;flex:1;min-width:0;min-height:0;flex-direction:column;overflow:hidden;background:var(--bg-panel)}.panel-header{display:flex;height:var(--panel-header-height);min-height:var(--panel-header-height);align-items:center;justify-content:space-between;padding:0 10px 0 12px;background:var(--bg-panel-alt);border-bottom:1px solid var(--border)}.panel-title,.panel-actions,.editor-tab,.editor-context,.editor-statusbar,.editor-status-left,.editor-status-right{display:flex;align-items:center}.panel-title{min-width:0;gap:7px;color:var(--text-secondary);font-size:11px;font-weight:600}.panel-title-icon{display:inline-flex;color:var(--text-tertiary)}.panel-actions{gap:6px}.editor-panel{background:var(--bg-editor)}.editor-tabs{display:flex;height:var(--panel-header-height);min-height:var(--panel-header-height);align-items:stretch;background:var(--bg-panel-alt);border-bottom:1px solid var(--border)}.editor-tab{position:relative;min-width:150px;gap:8px;padding:0 13px;color:var(--text-tertiary);border-right:1px solid var(--border);font-size:11.5px}.editor-tab.active{color:var(--text-primary);background:var(--bg-editor)}.editor-tab.active:before{position:absolute;top:0;right:0;left:0;height:1px;content:"";background:var(--accent)}.tab-saved{width:5px;height:5px;margin-left:auto;background:var(--text-muted)}.editor-tab-spacer{flex:1}.editor-toolbar{position:relative;display:flex;align-items:center;padding-right:7px}.editor-context{gap:6px;padding:0 12px;color:var(--text-muted);font-size:9.5px}.editor-settings-button{display:inline-grid;width:27px;height:27px;place-items:center;color:var(--text-muted);background:transparent;border:1px solid transparent;border-radius:var(--radius-sm);outline:none;cursor:pointer;transition:all var(--transition-fast)}.editor-settings-button:hover,.editor-settings-button.active{color:var(--text-primary);background:var(--bg-hover);border-color:var(--border)}.editor-settings-button svg{width:15px;height:15px}.editor-settings-popover{position:absolute;z-index:300;top:calc(100% + 7px);right:7px;display:flex;width:276px;flex-direction:column;gap:15px;padding:14px;background:#0f0f0ffa;border:1px solid var(--border-strong);border-radius:var(--radius-lg);box-shadow:var(--shadow-popover);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);animation:settings-popover-in .14s cubic-bezier(.2,.8,.2,1)}@keyframes settings-popover-in{0%{opacity:0;transform:translateY(-4px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}.settings-popover-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.settings-popover-header>div{display:flex;min-width:0;flex-direction:column;gap:2px}.settings-popover-header strong{color:var(--text-primary);font-size:11.5px;font-weight:700}.settings-popover-header span{color:var(--text-muted);font-size:9.5px}.settings-popover-header button{padding:2px 5px;color:var(--text-tertiary);background:transparent;border:0;border-radius:var(--radius-xs);cursor:pointer;font-size:9.5px}.settings-popover-header button:hover{color:var(--text-primary);background:var(--bg-hover)}.editor-setting-field{display:flex;flex-direction:column;gap:7px;color:var(--text-tertiary);font-size:10px}.editor-setting-field select{width:100%;height:32px;padding:0 9px;color:var(--text-secondary);background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);outline:none;cursor:pointer;font-size:11px}.editor-setting-field select:focus-visible{border-color:var(--accent-border);box-shadow:0 0 0 2px var(--accent-soft)}.font-size-label{display:flex;align-items:center;justify-content:space-between}.font-size-label output{color:var(--text-secondary);font-family:var(--font-mono);font-size:9.5px}.editor-setting-field input[type=range]{width:100%;accent-color:var(--accent);cursor:pointer}.font-preview{overflow:hidden;padding:10px;color:var(--text-secondary);background:var(--bg-editor);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);line-height:1.6;text-overflow:ellipsis;white-space:nowrap}.context-dot{width:5px;height:5px;background:var(--success)}.editor-body{position:relative;flex:1;min-width:0;min-height:0;overflow:hidden;background:var(--bg-editor)}.editor-watermark{position:absolute;z-index:0;inset:clamp(24px,8%,64px);pointer-events:none;background:url(/assets/nebula-BbpJF7LT.png) center / contain no-repeat;opacity:0;filter:grayscale(1) contrast(1.08);transform:scale(.97);transition:opacity .22s ease,transform .22s ease}.editor-body.with-nebula-background .editor-watermark{opacity:.14;transform:scale(1)}.editor-body .monaco-editor{position:absolute!important;top:0;right:0;bottom:0;left:0}.editor-body>section{position:relative;z-index:1}.editor-body>section,.editor-body>div:not(.editor-watermark){height:100%!important}@media (prefers-reduced-motion: reduce){.editor-watermark{transition:none}}.editor-loading{display:flex;width:100%;height:100%;align-items:center;justify-content:center;gap:12px;color:var(--text-muted);background:var(--bg-editor)}.editor-loading>div{display:flex;flex-direction:column;gap:2px}.editor-loading strong{color:var(--text-secondary);font-size:11px;font-weight:600}.editor-loading span:last-child{font-size:9.5px}.editor-loading-spinner{width:16px;height:16px;border:1.5px solid var(--border-strong);border-top-color:var(--accent);border-radius:50%;animation:editor-spin .7s linear infinite}@keyframes editor-spin{to{transform:rotate(360deg)}}.editor-statusbar{height:var(--editor-status-height);min-height:var(--editor-status-height);justify-content:space-between;padding:0 10px;color:var(--text-muted);background:var(--bg-titlebar);border-top:1px solid var(--border-subtle);font-family:var(--font-mono);font-size:9.5px}.editor-status-left,.editor-status-right{gap:13px}.status-branch-dot{width:5px;height:5px;background:var(--success)}.resize-handle-vertical,.resize-handle-horizontal{position:relative;z-index:20;flex:0 0 auto;outline:none;background:var(--border);transition:background var(--transition-fast)}.resize-handle-vertical{width:3px;cursor:col-resize}.resize-handle-horizontal{width:100%;height:3px;cursor:row-resize}.resize-handle-vertical:after,.resize-handle-horizontal:after{position:absolute;content:""}.resize-handle-vertical:after{top:0;right:-3px;bottom:0;left:-3px}.resize-handle-horizontal:after{top:-3px;right:0;bottom:-3px;left:0}.resize-handle-vertical:hover,.resize-handle-vertical:focus-visible,.resize-handle-horizontal:hover,.resize-handle-horizontal:focus-visible{background:var(--accent)}.preview-panel{background:var(--bg-panel)}.preview-address{display:inline-flex;max-width:160px;overflow:hidden;padding:2px 7px;color:var(--text-muted);background:var(--bg-input);border:1px solid var(--border-subtle);border-radius:999px;font-family:var(--font-mono);font-size:9px;font-weight:400;text-overflow:ellipsis;white-space:nowrap}.viewport-switcher{display:inline-flex;padding:2px;background:var(--bg-input);border:1px solid var(--border-subtle);border-radius:var(--radius-sm)}.viewport-switcher button,.panel-action-button{display:inline-grid;place-items:center;width:25px;height:23px;color:var(--text-muted);background:transparent;border:0;border-radius:4px;outline:none;cursor:pointer;transition:all var(--transition-fast)}.viewport-switcher button:hover,.viewport-switcher button.active,.panel-action-button:hover{color:var(--text-primary);background:var(--bg-active)}.viewport-switcher button.active{color:var(--accent)}.viewport-switcher svg,.panel-action-button svg{width:13px;height:13px}.panel-action-button{width:27px;height:27px;border:1px solid transparent}.panel-action-button:hover{border-color:var(--border)}.live-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 6px;color:var(--success);background:var(--success-soft);border:1px solid rgba(139,213,164,.12);border-radius:999px;font-size:8.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}.live-dot{width:5px;height:5px;background:var(--success);border-radius:50%;animation:status-pulse 2s ease-in-out infinite}.preview-body{position:relative;flex:1;min-height:0;overflow:hidden;background:linear-gradient(45deg,rgba(255,255,255,.012) 25%,transparent 25%),linear-gradient(-45deg,rgba(255,255,255,.012) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(255,255,255,.012) 75%),linear-gradient(-45deg,transparent 75%,rgba(255,255,255,.012) 75%),#050505;background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px}.preview-stage{display:flex;width:100%;height:100%;align-items:flex-start;justify-content:center;overflow:auto;padding:10px}.preview-frame{width:100%;height:100%;min-height:280px;overflow:hidden;background:#fff;border:1px solid var(--border-strong);border-radius:var(--radius-md);box-shadow:0 12px 30px #0000003d;transition:width var(--transition-base),border-radius var(--transition-base)}.preview-frame.tablet{width:min(768px,84%)}.preview-frame.mobile{width:min(390px,72%);border-radius:14px}.preview-iframe{display:block;width:100%;height:100%;border:0;background:#fff}.preview-placeholder{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px;padding:24px;color:var(--text-tertiary);text-align:center}.preview-placeholder-icon{display:grid;place-items:center;width:56px;height:56px;color:var(--accent);background:var(--accent-soft);border:1px solid rgba(255,255,255,.12);border-radius:16px;box-shadow:inset 0 1px #ffffff0a}.preview-placeholder-icon svg{width:25px;height:25px;opacity:.68;stroke:currentColor}.preview-placeholder strong,.console-empty strong{display:block;margin-bottom:3px;color:var(--text-secondary);font-size:12px;font-weight:600}.preview-placeholder p,.console-empty p{color:var(--text-muted);font-size:10.5px}.preview-run-button{display:inline-flex;height:30px;align-items:center;gap:7px;padding:0 11px;color:var(--text-secondary);background:var(--bg-elevated);border:1px solid var(--border-strong);border-radius:var(--radius-sm);cursor:pointer;font-size:11px;font-weight:600;transition:all var(--transition-fast)}.preview-run-button:hover{color:var(--text-primary);border-color:var(--accent-border);transform:translateY(-1px)}.preview-run-button svg{width:10px;height:10px}.console-panel{display:flex;flex-direction:column;min-height:0;overflow:hidden;background:var(--bg-titlebar);border-top:0}.console-header{display:flex;height:var(--panel-header-height);min-height:var(--panel-header-height);align-items:center;justify-content:space-between;padding:0 9px 0 12px;background:var(--bg-panel-alt);border-bottom:1px solid var(--border-subtle)}.console-header-left,.console-header-right,.console-title,.console-filters{display:flex;align-items:center}.console-header-left{min-width:0;gap:8px}.console-title{height:28px;gap:7px;padding:0;color:var(--text-secondary);background:transparent;border:0;cursor:pointer;font-size:11px;font-weight:600}.console-title-icon{display:inline-flex;color:var(--text-tertiary)}.console-count{display:inline-grid;min-width:18px;height:18px;place-items:center;padding:0 5px;color:var(--text-muted);background:var(--bg-input);border:1px solid var(--border);border-radius:999px;font-family:var(--font-mono);font-size:8.5px}.console-count.has-errors{color:var(--error);background:var(--error-soft);border-color:#ed87962e}.console-count.has-warnings{color:var(--warning);background:var(--warning-soft);border-color:#eed49f2e}.console-filters{gap:2px;padding-left:8px;border-left:1px solid var(--border)}.console-filters button{height:22px;padding:0 7px;color:var(--text-muted);background:transparent;border:0;border-radius:4px;cursor:pointer;font-size:9.5px}.console-filters button:hover,.console-filters button.active{color:var(--text-secondary);background:var(--bg-hover)}.console-filters button.error.active{color:var(--error);background:var(--error-soft)}.console-filters button.warn.active{color:var(--warning);background:var(--warning-soft)}.console-header-right{gap:6px}.console-shortcut{padding:2px 5px;color:var(--text-muted);background:var(--bg-input);border:1px solid var(--border-subtle);border-radius:4px}.console-toggle{display:inline-grid;width:24px;height:24px;place-items:center;color:var(--text-muted);background:transparent;border:0;border-radius:4px;cursor:pointer;transition:transform var(--transition-fast),color var(--transition-fast),background var(--transition-fast)}.console-toggle:hover{color:var(--text-secondary);background:var(--bg-hover)}.console-toggle.open{transform:rotate(180deg)}.console-body{flex:1;min-height:0;overflow:auto;padding:4px 0 8px;background:var(--bg-editor)}.console-empty{display:flex;min-height:92px;align-items:center;justify-content:center;gap:12px;color:var(--text-muted)}.console-empty>svg{width:22px;height:22px;opacity:.3}.console-entry{display:grid;grid-template-columns:16px minmax(0,1fr) auto;align-items:start;gap:8px;min-height:28px;padding:4px 13px;border-left:2px solid transparent;font-family:var(--font-mono);font-size:10.5px;line-height:1.65;transition:background var(--transition-fast)}.console-entry:hover{background:var(--bg-hover)}.console-entry.warn{background:var(--warning-soft);border-left-color:#eed49f80}.console-entry.error{background:var(--error-soft);border-left-color:#ed87968c}.console-entry.info{background:var(--info-soft);border-left-color:#8aadf480}.console-entry-icon{display:grid;width:16px;height:18px;place-items:center}.console-entry.log .console-entry-icon{color:var(--text-muted)}.console-entry.warn .console-entry-icon{color:var(--warning)}.console-entry.error .console-entry-icon{color:var(--error)}.console-entry.info .console-entry-icon{color:var(--info)}.console-entry-content{min-width:0;color:var(--text-secondary);white-space:pre-wrap;overflow-wrap:anywhere}.console-entry.warn .console-entry-content{color:var(--warning)}.console-entry.error .console-entry-content{color:var(--error)}.console-entry.info .console-entry-content{color:var(--info)}.console-entry-time{padding-top:1px;color:var(--text-muted);font-family:var(--font-mono);font-size:8.5px}[data-tooltip]{position:relative}[data-tooltip]:after{position:absolute;z-index:2000;top:calc(100% + 8px);left:50%;padding:5px 8px;content:attr(data-tooltip);color:var(--text-primary);background:#131313;border:1px solid var(--border-strong);border-radius:var(--radius-sm);box-shadow:var(--shadow-popover);font-size:10px;font-weight:500;opacity:0;pointer-events:none;transform:translate(-50%,-2px);transition:opacity var(--transition-fast),transform var(--transition-fast);white-space:nowrap}[data-tooltip]:hover:after,[data-tooltip]:focus-visible:after{opacity:1;transform:translate(-50%)}.activity-bar [data-tooltip]:after{top:50%;left:calc(100% + 9px);transform:translate(-2px,-50%)}.activity-bar [data-tooltip]:hover:after,.activity-bar [data-tooltip]:focus-visible:after{transform:translateY(-50%)}.toast-success{position:fixed;z-index:9999;bottom:24px;left:50%;display:inline-flex;align-items:center;gap:9px;padding:9px 13px;color:var(--text-primary);background:#0f0f0ff5;border:1px solid rgba(139,213,164,.26);border-radius:var(--radius-md);box-shadow:var(--shadow-popover);font-size:11px;font-weight:600;pointer-events:none;transform:translate(-50%);animation:toast-in .18s cubic-bezier(.2,.8,.2,1),toast-out .18s ease-in 1.8s forwards;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}@keyframes toast-in{0%{opacity:0;transform:translate(-50%,8px) scale(.98)}to{opacity:1;transform:translate(-50%) scale(1)}}@keyframes toast-out{to{opacity:0;transform:translate(-50%,6px) scale(.98)}}@keyframes shimmer{0%,to{opacity:.36}50%{opacity:.65}}.skeleton{background:#151515;border-radius:var(--radius-sm);animation:shimmer 1.5s ease-in-out infinite}.skeleton-header{display:flex;height:var(--header-height);align-items:center;gap:10px;padding:0 12px;background:var(--bg-titlebar);border-bottom:1px solid var(--border)}.skeleton-workspace{display:flex;flex:1;min-height:0;padding-left:calc(var(--activity-width) + var(--sidebar-width))}.skeleton-editor,.skeleton-preview,.skeleton-console{display:flex;flex-direction:column;gap:11px;padding:16px;background:var(--bg-panel)}.skeleton-editor{width:62%;border-right:1px solid var(--border)}.skeleton-preview{flex:1}.skeleton-console{height:180px;margin-left:calc(var(--activity-width) + var(--sidebar-width));border-top:1px solid var(--border)}.skeleton-line{height:10px;border-radius:3px}.skeleton-circle{width:27px;height:27px;border-radius:8px;flex:0 0 auto}.skeleton-btn{height:30px;border-radius:var(--radius-sm);flex:0 0 auto}@media (max-width: 1100px){:root{--sidebar-width: 190px}.header{grid-template-columns:minmax(210px,1fr) auto minmax(210px,1fr)}.autosave-label{display:none}.status-bar{min-width:94px}.preview-address{display:none}}@media (max-width: 880px){.project-sidebar,.sidebar-toggle,.activity-button:first-child{display:none}.header{grid-template-columns:1fr auto}.header-center{display:none}.editor-status-right span:nth-child(2),.editor-status-right span:nth-child(3){display:none}.skeleton-workspace{padding-left:var(--activity-width)}.skeleton-console{margin-left:var(--activity-width)}}@media (max-width: 700px){:root{--header-height: 44px;--activity-width: 40px}.header-product .header-separator,.header-product .header-file,.header-divider,.header-actions .btn-icon:first-child,.kbd{display:none}.header-logo{width:25px;height:25px}.btn-run{min-width:72px}.workspace-panels{flex-direction:column}.editor-pane{width:100%!important;height:57%;flex:0 0 57%}.preview-pane{width:100%;height:43%;flex:0 0 43%}.resize-handle-vertical{display:none}.editor-pane{border-bottom:1px solid var(--border)}.editor-context,.live-badge,.console-shortcut{display:none}.preview-stage{padding:7px}.preview-frame.mobile{width:min(390px,90%)}.console-filters{max-width:220px;overflow:auto}}@media (max-width: 500px){.header{padding:0 7px}.sidebar-toggle{display:none}.header-brand{gap:7px}.activity-button{width:31px;height:31px}.panel-header{padding-right:6px}.viewport-switcher button{width:23px}.panel-action-button{width:24px}.editor-status-right span:not(:first-child){display:none}.console-filters button{padding:0 5px}.console-entry{grid-template-columns:14px minmax(0,1fr)}.console-entry-time{display:none}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}