:root{color-scheme:light;--ink:#17243a;--muted:#7b8799;--line:#e5eaf1;--blue:#3b71dc;--soft:#f5f7fb;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--soft);color:var(--ink);height:100dvh;display:flex;flex-direction:column}.topbar{height:58px;flex:0 0 58px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 22px;gap:20px}.back{text-decoration:none;color:#6f7d92;font-size:15px}.back span{font-size:13px}.brand{display:flex;align-items:center;gap:10px;font-weight:700}.brand-mark{background:#e8efff;color:#345fbd;border-radius:8px;padding:5px 7px;font-size:12px}.account{margin-left:auto;display:flex;align-items:center;gap:14px;color:var(--muted);font-size:12px}.account a{color:#345fbd;text-decoration:none;font-weight:600}.ide-shell{display:flex;min-height:0;flex:1;padding:14px;gap:14px}.sidebar,.workspace{border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden}.sidebar{width:250px;flex:0 0 250px;display:flex;flex-direction:column}.sidebar[hidden]{display:none}.side-head{height:64px;padding:12px 14px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.side-head strong{font-size:13px;display:block}.side-head small{display:block;color:var(--muted);font-size:11px;margin-top:3px}.side-head button,.side-actions button,.quiet,.console-head button{border:1px solid var(--line);background:#fff;border-radius:7px;color:#5e6b7d;padding:7px 9px;font-size:11px;cursor:pointer}.file-tree{padding:9px 7px;overflow:auto;flex:1}.tree-row{display:flex;align-items:center;gap:7px;padding:7px 7px;border-radius:6px;font-size:12px;cursor:pointer;user-select:none}.tree-row:hover,.tree-row.active{background:#edf3ff;color:#2858af}.tree-row .tree-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tree-row .tree-icon{width:15px;text-align:center;color:#6e8bc4}.tree-row .tree-spacer{width:0}.side-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:9px;border-top:1px solid var(--line)}.side-actions button:first-child{grid-column:span 2;color:#345fbd}.side-actions button:disabled{opacity:.45;cursor:not-allowed}.side-actions .danger{color:#c43d48}.workspace{flex:1;min-width:0;display:flex;flex-direction:column}.editor-head{height:52px;flex:0 0 52px;padding:0 14px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:10px}.current-file{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;min-width:0}.file-icon{width:18px;height:20px;display:grid;place-items:center;border-radius:4px;background:#e8efff;color:#416bbd;font-size:10px}.save-state{font-weight:400;font-size:10px;color:#8a96a7;white-space:nowrap}.save-state.saving{color:#b7791f}.save-state.saved{color:#23936b}.save-state.error{color:#c43d48}.editor-actions{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted)}select{border:1px solid var(--line);background:#fff;border-radius:6px;padding:6px;color:#49576b;font-size:11px}.run,.stop{border:0;border-radius:7px;padding:8px 13px;font-size:11px;font-weight:650;cursor:pointer}.run{background:#336ed9;color:#fff}.run:disabled{opacity:.65;cursor:wait}.stop{background:#fff0f0;color:#be3944;border:1px solid #f5d2d5}.quiet{padding:7px 10px}.editor-wrap{min-height:250px;flex:1;display:flex;overflow:auto;background:#fbfcfe;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:var(--editor-font-size,13px);line-height:1.65}.line-numbers{flex:0 0 46px;text-align:right;padding:14px 10px;color:#a3adbb;background:#f7f9fc;border-right:1px solid #edf0f5;white-space:pre;user-select:none}.editor-wrap textarea{resize:none;flex:1;min-width:0;border:0;outline:0;padding:14px 16px;background:transparent;color:#202a39;font:inherit;tab-size:4;white-space:pre;overflow:auto}.console-panel{height:242px;flex:0 0 242px;background:#111820;color:#dbe5f2;display:flex;flex-direction:column}.console-head{height:37px;flex:0 0 37px;padding:0 12px;border-bottom:1px solid #27313d;display:flex;align-items:center;justify-content:space-between;font-size:11px}.console-head>div{display:flex;align-items:center;gap:8px}.terminal-dot{width:7px;height:7px;background:#64c99c;border-radius:50%}.console-head #consoleHint{color:#78889a;font-size:10px}.console-head button{border-color:#374351;background:#202a35;color:#9eacbc;padding:4px 8px}.console-panel pre{margin:0;padding:12px 14px;flex:1;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;color:#d4deea;font:12px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.terminal-input-row{height:42px;flex:0 0 42px;border-top:1px solid #27313d;display:flex;align-items:center;gap:8px;padding:5px 12px;background:#151e28}.terminal-input-row[hidden]{display:none}.terminal-prompt{color:#64c99c;font:14px ui-monospace,monospace}.terminal-input-row input{height:29px;min-width:0;flex:1;background:transparent;border:0;color:#e7eef7;padding:0 2px;outline:none;font:12px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;caret-color:#64c99c}.terminal-input-row input::placeholder{color:#657588}.terminal-input-row input:focus{outline:none}.toast{position:fixed;bottom:18px;left:50%;transform:translate(-50%,12px);opacity:0;pointer-events:none;background:#243248;color:white;padding:9px 14px;border-radius:8px;font-size:12px;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:760px){body{height:100dvh}.topbar{height:52px;flex-basis:52px;padding:0 12px;gap:12px}.brand{font-size:13px}.account{gap:8px;font-size:10px}.account a{white-space:nowrap}.ide-shell{padding:8px;gap:8px}.sidebar{width:190px;flex-basis:190px}.editor-head{height:auto;min-height:56px;flex-basis:auto;padding:8px 10px;align-items:flex-start;flex-direction:column}.editor-actions{width:100%;gap:6px}.editor-actions label{display:none}.editor-actions .quiet{margin-left:auto}.run,.stop{padding:8px}.console-panel{height:220px;flex-basis:220px}.console-head #consoleHint{display:none}}
@media(max-width:560px){.ide-shell{position:relative;flex-direction:column}.sidebar{width:100%;max-height:38vh;flex:0 0 38vh}.workspace{min-height:0}.sidebar[hidden]+.workspace{height:100%}.editor-wrap{min-height:180px}.account #accountLabel{display:none}.editor-actions select{max-width:87px}}

.side-create{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:10px;border-bottom:1px solid var(--line)}
.side-create button{min-height:34px;border:1px solid var(--line);background:#fff;border-radius:7px;color:#53637a;padding:6px;font-size:11px;cursor:pointer}
.side-create button.primary-small{background:#eef4ff;border-color:#dbe7ff;color:#315fae}
.file-tree{padding:8px 7px}
.tree-row{min-height:31px}
.tree-row .tree-toggle{width:14px;flex:0 0 14px;border:0;background:transparent;color:#75849a;padding:0;font-size:11px;cursor:pointer}
.tree-row .tree-toggle.spacer{visibility:hidden}
.side-actions{grid-template-columns:1fr 1fr 1fr}
.side-actions button:first-child{grid-column:auto;color:#5e6b7d}
.side-actions button:disabled{opacity:.45;cursor:not-allowed}
.tree-empty{padding:30px 12px;text-align:center;color:#637187;font-size:12px;line-height:1.8}
.tree-empty[hidden]{display:none}
.tree-empty small{color:#919cad;font-size:11px}
.save-state{max-width:210px;overflow:hidden;text-overflow:ellipsis}
.dialog-layer{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:18px;background:rgba(15,25,40,.42);backdrop-filter:blur(3px)}
.dialog-layer[hidden]{display:none}
.app-dialog{width:min(440px,100%);max-height:min(90vh,680px);overflow:auto;background:#fff;border:1px solid #e3e8f0;border-radius:14px;box-shadow:0 24px 70px rgba(19,34,56,.25);padding:0}
.dialog-head{display:flex;align-items:center;justify-content:space-between;padding:17px 20px;border-bottom:1px solid var(--line)}
.dialog-head h2{margin:0;font-size:16px;color:var(--ink)}
.dialog-close{width:28px;height:28px;border:0;border-radius:7px;background:#f3f5f8;color:#657389;font-size:20px;cursor:pointer}
.dialog-body{padding:18px 20px;display:grid;gap:15px}
.dialog-message{margin:0;color:#536176;font-size:13px;line-height:1.7;overflow-wrap:anywhere}
.dialog-field{display:grid;gap:7px;color:#46546a;font-size:12px;font-weight:600}
.dialog-field input,.dialog-field select{width:100%;height:39px;border:1px solid #dce3ed;border-radius:7px;background:#fff;padding:0 10px;color:#202d42;font:13px inherit;outline:none}
.dialog-field input:focus,.dialog-field select:focus{border-color:#6b91dc;box-shadow:0 0 0 3px rgba(59,113,220,.12)}
.dialog-help{margin:-5px 0 0;color:#8793a4;font-size:11px;line-height:1.6}
.dialog-path{padding:9px 10px;border-radius:7px;background:#f4f7fb;color:#56657b;font-size:12px;overflow-wrap:anywhere}
.dialog-error{padding:0 20px;color:#bf3945;font-size:12px}
.dialog-error:not([hidden]){padding-bottom:8px}
.dialog-actions{display:flex;justify-content:flex-end;gap:8px;padding:12px 20px 18px}
.dialog-actions button{min-width:80px;min-height:36px;cursor:pointer}
.dialog-actions .run{font-size:12px}
@media(max-width:560px){
 .topbar{height:52px;flex-basis:52px;padding:0 10px;gap:8px}
 .brand{gap:6px;font-size:13px}.brand-mark{padding:4px 5px}
 .account{gap:6px;font-size:10px;min-width:0;max-width:48%}
 .account #accountLabel{display:block;max-width:105px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .account a{white-space:nowrap}
 .ide-shell{padding:8px;gap:8px}
 .sidebar{max-height:34vh;flex-basis:auto}
 .editor-head{height:auto;min-height:56px;flex:0 0 auto;padding:8px;align-items:flex-start;flex-direction:column}
 .editor-actions{width:100%;gap:5px;flex-wrap:wrap}
 .editor-actions label{display:none}
 .editor-actions button{padding:7px 8px;font-size:10px}
 .editor-actions select{max-width:86px}
 .console-panel{height:225px;flex-basis:225px}
 .save-state{max-width:135px}
}
.file-path{min-width:0;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#8b97a8;font-size:10px;font-weight:400}
.dialog-field input,.dialog-field select{font:inherit;font-size:13px}
.dialog-actions .danger-action{background:#c8424b;color:#fff}
.side-create button:hover,.side-actions button:hover:not(:disabled){border-color:#b9c9e4;background:#f5f8fd}
@media(max-width:760px){.file-path{display:none}}
.account #accountLabel{max-width:min(34vw,320px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account #accountLabel[hidden]{display:none}

/* File tree controls and local drafts */
.side-create button{background:#fff!important;border-color:var(--line)!important;color:#53637a!important}
.side-create button:hover{border-color:#b9c9e4!important;background:#f5f8fd!important}
.side-actions{grid-template-columns:1fr 1fr 1fr;padding:7px 9px;border-top:0;border-bottom:1px solid var(--line)}
.side-actions{display:none!important}
.code-editor{position:relative;flex:1;min-width:0;min-height:100%;height:100%;overflow:hidden}
.syntax-highlight{position:absolute;inset:0 auto auto 0;z-index:0;width:max-content;min-width:100%;min-height:100%;margin:0;padding:14px 16px;white-space:pre;font:inherit;line-height:inherit;pointer-events:none;color:#27364b}
.code-editor textarea{position:absolute;inset:0;z-index:1;width:100%;height:100%;min-width:0;resize:none;overflow:auto;border:0;outline:0;padding:14px 16px;background:transparent;color:transparent;-webkit-text-fill-color:transparent;caret-color:#202a39;font:inherit;line-height:inherit;tab-size:4;white-space:pre}
.code-editor textarea::selection{background:rgba(92,137,221,.28)}
.syntax-keyword{color:#8051bd;font-weight:600}.syntax-builtin{color:#1d6f9f;font-weight:600}.syntax-preprocessor{color:#c17b18}.syntax-string{color:#278351}.syntax-number{color:#bd5b38}.syntax-comment{color:#8a94a3;font-style:italic}.syntax-function{color:#315fbd;font-weight:600}
.side-actions button:first-child{grid-column:auto;color:#5e6b7d}
.side-actions[hidden]{display:none}
.tree-row{position:relative}
.tree-row.local-root{font-weight:650;color:#315fae}
.tree-row .tree-more{display:grid;place-items:center;width:26px;height:25px;flex:0 0 26px;margin-left:auto;border:0;border-radius:5px;background:transparent;color:#6f7e93;font-size:16px;line-height:1;cursor:pointer;opacity:0}
.tree-row:hover .tree-more,.tree-row:focus-within .tree-more,.tree-more:focus-visible{opacity:1}
.tree-row .tree-more:hover{background:#e5edfb;color:#315fae}
.file-context-menu{position:fixed;z-index:1000;min-width:176px;padding:5px;border:1px solid #dfe5ee;border-radius:9px;background:#fff;box-shadow:0 12px 32px #1b2b431f}
.file-context-menu[hidden]{display:none}
.file-context-menu button{display:block;width:100%;padding:8px 10px;border:0;border-radius:6px;background:#fff;color:#344156;text-align:left;font:inherit;font-size:12px;cursor:pointer}
.file-context-menu button:hover,.file-context-menu button:focus-visible{outline:0;background:#f0f4fb}
.file-context-menu button.danger{color:#bd3e49}
.file-context-menu .menu-divider{height:1px;margin:4px 5px;background:var(--line)}
@media(max-width:560px){
 .tree-row .tree-more{opacity:1;width:32px;height:30px;flex-basis:32px}
 .side-actions{padding:6px 8px}
 .file-context-menu{min-width:190px}
}

.font-controls{display:inline-flex;align-items:center;gap:3px;padding:2px;border:1px solid var(--line);border-radius:7px;background:#fff}
.font-controls button{height:25px;min-width:29px;padding:0 5px;border:0;border-radius:5px;background:transparent;color:#52627a;font-size:11px;font-weight:650;cursor:pointer}
.font-controls button:hover:not(:disabled){background:#edf3ff;color:#315fbd}
.font-controls button:disabled{opacity:.4;cursor:not-allowed}
.font-controls #fontReset{min-width:42px;font-size:10px;font-weight:500}
@media(max-width:760px){.font-controls button{height:27px}.editor-actions{row-gap:5px}}
.download-progress{flex:0 0 auto;padding:9px 14px 4px;border-bottom:1px solid #27313d;color:#9eacbc;font-size:10px}.download-progress[hidden]{display:none}.download-progress-caption{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}.download-progress-caption strong{color:#dbe5f2;font-variant-numeric:tabular-nums}.download-progress-track{height:6px;overflow:hidden;border-radius:999px;background:#2a3542}.download-progress-fill{width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#3b71dc,#69a4ff);transition:width .16s ease}.download-progress small{display:block;margin-top:5px;color:#78889a;font-size:9px}


 /* Editor header: separate file context from actions on desktop and mobile. */
.editor-head{height:auto;min-height:88px;flex:0 0 auto;flex-direction:column;align-items:stretch;justify-content:center;gap:7px;padding:9px 14px}
.current-file{width:100%;min-width:0}
.current-file #fileName{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-path{max-width:min(28vw,360px)}
.editor-actions{width:100%;justify-content:flex-end;flex-wrap:wrap;row-gap:5px}
@media(max-width:760px){
 .editor-head{min-height:0;padding:8px 10px}
 .editor-actions{justify-content:flex-start}
 .editor-actions .quiet{margin-left:0}
}

/* Compact file context: keep the path available as a tooltip and the save state by its action. */
.current-file .file-path{display:none}
.editor-actions #saveState{flex:0 0 auto;margin:0 2px;color:#7b8799;font-size:10px;white-space:nowrap}
.editor-actions #saveState.saved{color:#23936b}
.editor-actions #saveState.saving{color:#b7791f}
.editor-actions #saveState.error{color:#c43d48}