:root{
  --bg:#1e1e1e; --title:#181818; --side:#252526; --activity:#333333; --editor:#1e1e1e; --tab:#2d2d2d; --tab-active:#1e1e1e; --line:#3c3c3c; --line2:#2a2a2a;
  --text:#cccccc; --muted:#8a8a8a; --blue:#007acc; --green:#89d185; --red:#f48771; --yellow:#dcdcaa; --sel:#264f78;
  --font-code:Consolas,"Cascadia Mono","JetBrains Mono","Microsoft YaHei Mono","SFMono-Regular",monospace;
  --editor-font-size:15px; --editor-line-height:1.55;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--text);font-family:"Segoe UI","Microsoft YaHei",Arial,sans-serif;font-size:13px;overflow:hidden}
button,select,textarea{font:inherit}button,select{background:#2d2d2d;color:var(--text);border:1px solid var(--line);height:26px;padding:0 9px;outline:0;border-radius:0}button{cursor:pointer}button:hover,select:hover{background:#37373d}button.primary{background:#0e639c;border-color:#0e639c;color:#fff}button.primary:hover{background:#1177bb}button:disabled{opacity:.45;cursor:not-allowed}
.ide-shell{height:100vh;display:flex;flex-direction:column}.titlebar{height:36px;background:var(--title);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding:0 8px}.window-title{font-size:12px;color:#c8c8c8;letter-spacing:.2px}.title-actions{display:flex;gap:6px;align-items:center}.encoding-label{display:flex;align-items:center;gap:6px;color:#aaa}.encoding-label select{width:86px}
.workbench{flex:1;min-height:0;display:flex}.activitybar{width:52px;background:var(--activity);border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:stretch;padding-top:0;flex:0 0 auto}.activity{height:46px;background:transparent;border:0;border-left:2px solid transparent;color:#bdbdbd;opacity:.75;padding:0;font-size:12px}.activity.active{opacity:1;border-left-color:#fff;background:#2a2a2a;color:#fff}.activity:hover{background:#37373d}
.sidebar{width:360px;background:var(--side);border-right:1px solid var(--line);display:flex;flex-direction:column;min-width:180px;max-width:760px;transition:none;flex:0 0 auto}.sidebar.collapsed{width:0!important;min-width:0;border-right:0;overflow:hidden}.sidebar-resizer{width:5px;cursor:col-resize;background:#1b1b1b;border-right:1px solid #111;flex:0 0 auto}.sidebar-resizer:hover,.sidebar-resizer.dragging{background:#3c3c3c}.sidebar.collapsed + .sidebar-resizer{background:#202020;cursor:e-resize}
.side-view{display:none;flex:1;min-height:0;flex-direction:column}.side-view.active{display:flex}.section-title{height:32px;line-height:32px;text-transform:uppercase;font-size:11px;color:#bbbbbb;padding:0 12px;letter-spacing:.4px;border-bottom:1px solid var(--line2)}.row-title{display:flex;align-items:center;justify-content:space-between}.mini-actions{display:flex;gap:4px}.mini-actions button{height:23px;padding:0 6px;font-size:12px}.hint-row{height:28px;line-height:28px;padding:0 12px;color:#858585;font-size:12px;border-bottom:1px solid var(--line2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-tree{flex:1;overflow:auto;padding:4px 0;font-family:"Segoe UI","Microsoft YaHei",Arial,sans-serif}.tree-dir,.tree-file{height:24px;line-height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;user-select:none}.tree-dir{color:#cccccc}.tree-file{display:flex;gap:7px;align-items:center;color:#cccccc}.tree-file:hover,.tree-dir:hover{background:#2a2d2e}.tree-file.active{background:#094771;color:white}.file-type{font-size:10px;min-width:28px;color:#4fc1ff;text-align:center}.folder-empty{color:#858585;font-style:italic;padding-left:24px;height:22px;line-height:22px}.context-menu{position:fixed;min-width:170px;background:#252526;border:1px solid #454545;box-shadow:0 4px 18px rgba(0,0,0,.45);z-index:9999;padding:4px 0}.context-menu button{display:block;width:100%;height:28px;text-align:left;border:0;background:transparent;color:#ddd;padding:0 12px}.context-menu button:hover{background:#094771;color:#fff}.context-sep{height:1px;background:#3c3c3c;margin:4px 0}
.io-view{background:#1e1e1e}.io-split{display:flex;flex-direction:column;border-bottom:1px solid var(--line);min-height:160px}.io-split:first-of-type{height:36%}.output-split{flex:1;min-height:0}.io-label{height:28px;line-height:28px;padding:0 10px;background:#202020;color:#bbb;border-bottom:1px solid var(--line2);font-size:12px}#stdinBox,#outputBox{flex:1;min-height:0;width:100%;resize:none;background:#1e1e1e;color:#d4d4d4;border:0;outline:0;padding:10px;font:13px/1.45 var(--font-code);overflow:auto;white-space:pre-wrap;margin:0}#stdinBox::placeholder{color:#666}#stdinBox.input-waiting{outline:1px solid #d7ba7d;animation:inputPulse 1s steps(2,start) infinite}@keyframes inputPulse{50%{background:#25231c}}#outputBox.error{color:#f48771}#outputBox.ok{color:#d4d4d4}#outputBox.wait{color:#d7ba7d}
.editor-area{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--editor)}.tabs{height:34px;display:flex;align-items:end;background:#252526;border-bottom:1px solid var(--line);overflow-x:auto}.tab{height:34px;display:flex;align-items:center;gap:8px;min-width:110px;max-width:230px;padding:0 8px;background:#2d2d2d;border-right:1px solid #1e1e1e;color:#bdbdbd;cursor:pointer}.tab.active{background:#1e1e1e;color:#fff}.tab span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tab button{border:0;background:transparent;color:#aaa;height:18px;width:18px;padding:0;line-height:16px}.tab button:hover{background:#444;color:#fff}.editor-toolbar{height:28px;background:#1e1e1e;border-bottom:1px solid var(--line2);display:flex;align-items:center;gap:14px;padding:0 12px;color:#c8c8c8}.editor-toolbar span{font-size:12px}#langBadge{color:#4fc1ff}#statusText{margin-left:auto;color:#8a8a8a}#statusText.ok{color:var(--green)}#statusText.err{color:var(--red)}#statusText.wait{color:#d7ba7d}
.editor-wrap{flex:1;min-height:0;display:flex;background:#1e1e1e;overflow:hidden}.line-numbers{width:58px;margin:0;padding:12px 8px 12px 0;text-align:right;color:#858585;background:#1e1e1e;border-right:1px solid #242424;font:var(--editor-font-size)/var(--editor-line-height) var(--font-code);user-select:none;overflow:hidden;white-space:pre}.code-layer{position:relative;flex:1;min-width:0;overflow:hidden}.highlight-layer,.code-editor{position:absolute;inset:0;margin:0;padding:12px 14px;border:0;outline:0;background:transparent;font:var(--editor-font-size)/var(--editor-line-height) var(--font-code);tab-size:4;white-space:pre-wrap;overflow:auto;overflow-wrap:anywhere}.highlight-layer{color:#d4d4d4;pointer-events:none;z-index:1}.code-editor{resize:none;color:rgba(212,212,212,.01);caret-color:#d4d4d4;-webkit-text-fill-color:rgba(212,212,212,.01);z-index:2}.code-editor::selection{background:#264f78;color:#ffffff;-webkit-text-fill-color:#ffffff}.code-editor::-moz-selection{background:#264f78;color:#ffffff}.diag-line{display:inline;background:rgba(244,135,113,.18);box-shadow:inset 0 -1px 0 #f48771}.diag-line.warn{background:rgba(215,186,125,.16);box-shadow:inset 0 -1px 0 #d7ba7d}.tok-comment{color:#6a9955}.tok-string{color:#ce9178}.tok-preproc{color:#c586c0}.tok-include{color:#d7ba7d}.tok-header{color:#ce9178}.tok-key{color:#569cd6}.tok-type{color:#4ec9b0}.tok-num{color:#b5cea8}.tok-fn{color:#dcdcaa}.tok-var{color:#9cdcfe}.tok-io{color:#4fc1ff}.tok-const{color:#dcdcaa}.tok-op{color:#d4d4d4}.br0{color:#ffd700}.br1{color:#da70d6}.br2{color:#179fff}.br3{color:#4ec9b0}.err-flash{animation:errorFlash 1.2s ease-out 1}@keyframes errorFlash{0%{background:#5a1d1d}100%{background:transparent}}
.statusbar{height:23px;background:#2d2d2d;border-top:1px solid #3c3c3c;color:#cccccc;display:flex;align-items:center;justify-content:flex-start;padding:0 10px;font-size:12px}.statusbar span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:900px){.sidebar{width:300px}.titlebar{height:auto;min-height:36px;align-items:flex-start;gap:8px;flex-direction:column;padding:6px}.title-actions{flex-wrap:wrap}.activitybar{width:46px}.activity{font-size:11px}}

/* v0.5 polish */
*{scrollbar-width:thin;scrollbar-color:rgba(121,121,121,.35) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:rgba(121,121,121,.28);border:3px solid transparent;background-clip:padding-box;border-radius:8px}
*::-webkit-scrollbar-thumb:hover{background:rgba(121,121,121,.55);border:2px solid transparent;background-clip:padding-box}
.titlebar .encoding-label,.titlebar #redecodeBtn{display:none}.statusbar{justify-content:space-between}.status-right{display:flex;align-items:center;gap:6px;margin-left:auto}.status-right button,.status-right select{height:20px;font-size:12px;background:#2b2b2b;border-color:#3c3c3c}.status-right .encoding-label{font-size:12px;color:#aaa;text-transform:none}.mini-actions button{min-width:56px;text-align:center;display:inline-flex;align-items:center;justify-content:center;padding:0 8px}.io-label-row{display:flex;align-items:center;justify-content:space-between}.io-label-row button{width:24px;height:22px;padding:0;text-align:center;border-color:#3c3c3c;background:#262626;color:#dcdcdc}
.highlight-layer,.code-editor{white-space:pre;overflow:auto;overflow-wrap:normal}.code-editor{color:transparent;-webkit-text-fill-color:transparent}.code-editor::selection{background:rgba(38,79,120,.85);color:transparent;-webkit-text-fill-color:transparent}.highlight-layer{z-index:3}.code-editor{z-index:4}.code-layer.selecting .highlight-layer{z-index:5}.code-layer.selecting .code-editor{z-index:4}.selection-mask{position:absolute;left:0;right:0;background:rgba(38,79,120,.8);z-index:2;pointer-events:none}.tok-shift{color:#d7ba7d}.tok-include{color:#c586c0}.diag-line{background:rgba(244,135,113,.22);box-shadow:inset 0 -2px 0 #f48771}.tree-dir.drag-over,.tree-file.drag-over{background:#37373d;outline:1px dashed #6a9955}.tree-inplace{height:22px;background:#1e1e1e;color:#d4d4d4;border:1px solid #007acc;outline:0;padding:0 4px;font:12px/22px var(--font-code);width:calc(100% - 8px)}.tab.drag-over{outline:1px dashed #6a9955}
.mini-prompt{position:fixed;z-index:10000;background:#252526;border:1px solid #454545;box-shadow:0 8px 28px rgba(0,0,0,.5);padding:10px;min-width:280px}.mini-prompt-title{font-size:12px;color:#ccc;margin-bottom:8px}.mini-prompt-input{width:100%;height:28px;background:#1e1e1e;color:#d4d4d4;border:1px solid #007acc;outline:0;padding:0 6px;font:13px var(--font-code)}.mini-prompt-actions{display:flex;justify-content:flex-end;gap:6px;margin-top:8px}
.terminal-window{position:fixed;left:18%;top:14%;width:720px;height:430px;z-index:9000;background:rgba(24,24,24,.76);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.13);border-radius:8px;box-shadow:0 22px 70px rgba(0,0,0,.62);overflow:hidden;display:flex;flex-direction:column}.terminal-window[hidden]{display:none}.terminal-header{height:34px;flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 10px;background:rgba(20,20,20,.68);border-bottom:1px solid rgba(255,255,255,.09);cursor:move;user-select:none}.terminal-header span{font-size:12px;color:#d4d4d4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.terminal-header button{border:0;background:transparent;color:#ddd;width:28px;height:28px;border-radius:4px;padding:0;font-size:18px}.terminal-header button:hover{background:rgba(255,255,255,.12)}.terminal-screen{flex:1;min-height:0;overflow:auto;padding:12px;background:rgba(5,5,5,.18);font:14px/1.55 var(--font-code);color:#e5e5e5;outline:0;white-space:pre-wrap;word-break:break-word}.terminal-screen .term-error{color:#ff8d7a}.terminal-screen .term-wait{color:#d7ba7d}.term-cursor{display:inline-block;width:8px;height:1.1em;background:#d4d4d4;vertical-align:-.15em;animation:termBlink 1s steps(2,start) infinite}@keyframes termBlink{50%{opacity:0}}.terminal-resizer{position:absolute;right:0;bottom:0;width:16px;height:16px;cursor:nwse-resize;background:linear-gradient(135deg,transparent 0 45%,rgba(255,255,255,.28) 46% 54%,transparent 55%)}
.highlight-layer{overflow:hidden}.code-editor{overflow:auto}

/* v0.6 fixes */
.window-title{white-space:nowrap}.row-title{gap:8px;overflow:hidden}.row-title>span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.mini-actions{flex:0 0 auto}.mini-actions .icon-btn{width:30px;min-width:30px;height:28px;padding:0;display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;color:#cfcfcf}.mini-actions .icon-btn:hover{background:#37373d}.ico-file-add,.ico-folder-add{display:inline-block;width:22px;height:22px;background:currentColor;opacity:.95}.ico-file-add{clip-path:path('M4 2 H13 L18 7 V20 H4 Z M13 3.5 V8 H17 M17 17 H14 V20 H12 V17 H9 V15 H12 V12 H14 V15 H17 Z')}.ico-folder-add{clip-path:path('M2 5 H8 L10 7 H20 V19 H2 Z M17 14 H14 V17 H12 V14 H9 V12 H12 V9 H14 V12 H17 Z')}
.terminal-window{background:rgba(24,24,24,.58);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.12);box-shadow:none;border-radius:7px}.terminal-header{background:rgba(18,18,18,.50)}.term-cursor{animation:termBlinkV06 1s step-end infinite}@keyframes termBlinkV06{0%,49%{visibility:visible}50%,100%{visibility:hidden}}
.code-layer{background-image:repeating-linear-gradient(to right, transparent 0 calc(4ch - 1px), rgba(255,255,255,.045) calc(4ch - 1px) 4ch);background-position:14px 0;background-repeat:repeat}.highlight-layer{background:transparent}.tok-key{color:#569cd6}.tok-io{color:#9cdcfe}.tok-var{color:#9cdcfe}.tok-type{color:#4ec9b0}.tok-shift{color:#d7ba7d}.tok-op{color:#d4d4d4}
.selection-layer{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}.selection-mask{position:absolute;background:rgba(38,79,120,.48);z-index:2;pointer-events:none}.highlight-layer{z-index:3}.code-editor{z-index:4;color:transparent;-webkit-text-fill-color:transparent;caret-color:#d4d4d4}.code-editor::selection{background:transparent;color:transparent;-webkit-text-fill-color:transparent}.code-editor::-moz-selection{background:transparent;color:transparent}.code-layer.selecting .highlight-layer{z-index:3}.code-layer.selecting .code-editor{z-index:4}
.line-numbers{background:#1e1e1e}.diag-line{background:rgba(244,135,113,.20);box-shadow:inset 0 -1px 0 #f48771}.diag-line.warn{background:rgba(215,186,125,.14);box-shadow:inset 0 -1px 0 #d7ba7d}
.icon-btn svg{width:22px;height:22px;display:block}.ico-file-add,.ico-folder-add{display:none!important}

/* v0.6 cache/save/folder tree fixes */
.tree-dir{display:flex;align-items:center;gap:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tree-dir .tree-tri{display:inline-block;width:14px;min-width:14px;text-align:center;color:#c5c5c5}
.tree-dir .tree-folder-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#saveBtn{min-width:48px}

/* v0.7 focused polish */
.code-layer{background-image:none!important;background-position:0 0!important;}
.tok-prim{color:#569cd6;}
.tok-io{color:#9cdcfe;}
#stdinBox.input-waiting{outline:1px solid #d7ba7d;animation:none!important;background:#1e1e1e;}
.io-label-row button{position:relative;width:28px;height:24px;color:transparent;font-size:0;border-color:#4a4a4a;background:#252526;display:inline-flex;align-items:center;justify-content:center;}
.io-label-row button::before{content:"";display:block;width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:10px solid #d4d4d4;margin-left:2px;}
.io-label-row button:hover{background:#303030;border-color:#666;}
.terminal-window{background:rgba(24,24,24,.66);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:none;}

/* v0.8 host navigation */
.window-title-group{display:flex;align-items:center;gap:12px;min-width:0}
.home-link{height:24px;padding:0 8px;display:inline-flex;align-items:center;border:0;color:#b8b8b8;text-decoration:none;font-size:12px}
.home-link:hover,.home-link:focus-visible{background:#37373d;color:#fff;outline:0}
.terminal-header{position:relative;padding:0 44px 0 10px;}
.terminal-header button{position:absolute;right:8px;top:3px;width:28px;height:28px;font-size:23px;line-height:25px;border-radius:3px;display:flex;align-items:center;justify-content:center;}
.terminal-screen .term-hint{color:#858585;}
.tree-inplace{padding-left:2px;}