style.css

*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#0f1117;color:#d8dee9;font:13px "Segoe UI Variable","Segoe UI",Arial,sans-serif}button,input,textarea,select{font:inherit;color:inherit}button{background:#252a34;border:1px solid #343b49;border-radius:6px;padding:6px 10px;cursor:pointer;transition:.12s ease}button:hover{background:#303746;border-color:#465064}.primary{background:#4f7cff;border-color:#648cff;color:#fff}.primary:hover{background:#638bff}header{height:44px;background:linear-gradient(90deg,#151922,#11151d);display:flex;align-items:center;gap:9px;padding:0 12px;border-bottom:1px solid #2a303c;-webkit-app-region:drag}.brandMark{width:25px;height:25px;border-radius:7px;background:linear-gradient(135deg,#6d5dfc,#35a7ff);display:grid;place-items:center;font-weight:800;color:#fff;box-shadow:0 4px 14px #4f7cff44}header b{font-size:14px;letter-spacing:.2px;color:#f2f5fa}header button{padding:5px 9px;-webkit-app-region:no-drag}.crumbSep{color:#4d5667}#workspace{flex:1;color:#8892a5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#layout{height:calc(100% - 44px);display:flex}nav{width:52px;background:#11151d;border-right:1px solid #282f3a;display:flex;flex-direction:column;align-items:center;padding:5px 0}nav button{width:44px;height:44px;border:0;background:transparent;border-radius:9px;font-size:22px;color:#707b8e;padding:0}nav button:hover{background:#202632;color:#cbd3df}nav button.active{background:#252d3a;color:#7ba2ff;box-shadow:inset 3px 0 #5d86ff}.navSpacer{flex:1}aside{width:280px;min-width:190px;max-width:480px;background:#151922;border-right:1px solid #282f3a;overflow:auto;resize:horizontal}.view{height:100%}.hidden{display:none!important}.head{height:39px;padding:12px 13px 8px;color:#aab3c4;font-size:11px;font-weight:650;letter-spacing:.7px;text-transform:uppercase;display:flex;justify-content:space-between}.node{padding:5px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;border-radius:5px;margin:1px 5px;color:#aeb7c6}.node:hover{background:#222834;color:#eef2f8}.node.folder{color:#c5ccda;font-weight:500}.problem,.symbolItem{padding:8px 10px;border-bottom:1px solid #222833;cursor:pointer}.problem:hover,.symbolItem:hover{background:#202632}.problem.error{border-left:3px solid #f05d6f}.problem.warning{border-left:3px solid #f0b45d}main{flex:1;min-width:0;display:grid;grid-template-rows:28px 36px 1fr 205px 24px;position:relative;background:#10131a}#breadcrumbs{background:#141820;border-bottom:1px solid #252b36;padding:6px 12px;color:#8792a4;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#tabs{background:#131720;display:flex;overflow-x:auto;border-bottom:1px solid #2a303b}.tab{min-width:125px;max-width:220px;padding:10px 11px 8px;background:#181d27;border-right:1px solid #292f3a;color:#98a3b5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}.tab:hover{background:#1d2330}.tab.active{background:#10131a;color:#f3f6fb;box-shadow:inset 0 2px #5d86ff}.tab .x{float:right;color:#647084}.tab .x:hover{color:#fff}.dirty{color:#78a0ff;margin-left:5px}#editor{min-height:0}#bottom{background:#0c0f14;border-top:1px solid #2a303b;min-height:110px;resize:vertical;overflow:hidden}.xterm{padding:7px}.paneltabs{height:31px;background:#12161e;border-bottom:1px solid #252b35;display:flex}.paneltabs button{border:0;background:transparent;border-radius:0;padding:7px 12px;color:#778296;font-size:11px}.paneltabs button.active{color:#e9edf5;border-bottom:2px solid #6088ff}footer{background:linear-gradient(90deg,#345fc9,#4d6ed0);color:#f7f9ff;padding:4px 9px;display:flex;gap:17px;font-size:12px}.overlay,#modal{position:fixed;inset:0;background:#080a0fcc;z-index:40;display:flex;justify-content:center;padding-top:75px}.dialog,#modal>div{width:min(700px,85vw);max-height:70vh;overflow:auto;background:#1a1f29;border:1px solid #343d4b;border-radius:10px;padding:11px;box-shadow:0 24px 70px #000b}#modal{display:block;inset:75px 22% auto;border-radius:10px;padding:10px;background:#1a1f29;border:1px solid #343d4b;box-shadow:0 24px 70px #000b}#modal input,.dialog input{width:100%;background:#10141b;border:1px solid #3a4555;border-radius:7px;padding:9px}.command{padding:9px;border-radius:6px;cursor:pointer}.command:hover{background:#2b3443}.muted{color:#707b8e;padding:10px}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:#343d4b;border:2px solid transparent;background-clip:padding-box;border-radius:8px}::-webkit-scrollbar-track{background:transparent}
/* v0.8.1 themes and welcome */
#themeToggle{width:34px;height:30px;padding:0;font-size:16px}.hero{display:flex;gap:18px;align-items:center;margin-bottom:34px}.heroLogo{width:64px;height:64px;border-radius:18px;background:linear-gradient(135deg,#6d5dfc,#35a7ff);display:grid;place-items:center;color:white;font-size:30px;font-weight:800;box-shadow:0 12px 34px #4f7cff40}.hero h1{margin:0;color:var(--fg,#f2f5fa);font-size:34px;font-weight:600}.hero p{color:var(--muted,#8892a5);font-size:15px;margin:5px 0}.welcomeGrid{display:grid;grid-template-columns:minmax(240px,340px) minmax(320px,620px);gap:24px}.welcomeCard{background:var(--card,#171c25);border:1px solid var(--border,#2b3340);border-radius:13px;padding:18px;box-shadow:0 12px 32px #0002}.welcomeCard h3{margin:0 0 14px;font-size:13px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted,#96a0b2)}.welcomeAction{display:block;width:100%;text-align:left;margin:8px 0;padding:10px 12px}.tip{font-size:12px;color:var(--muted,#7a8598);margin-top:18px;line-height:1.5}.recentHead{display:flex;align-items:center;justify-content:space-between}.recentHead button{border:0;background:transparent;color:var(--muted,#7a8598);padding:3px 6px}.recentProject{padding:10px 9px;border-radius:8px;display:grid;grid-template-columns:1fr auto;gap:6px;cursor:pointer}.recentProject:hover{background:var(--hover,#222a36)}.recentProject b{font-weight:550;color:var(--fg,#e9edf4)}.recentProject small{display:block;margin-top:3px;color:var(--muted,#7d8799);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.recentEmpty{color:var(--muted,#778296);padding:15px 8px}#welcome{position:absolute;inset:64px 0 24px;z-index:5;overflow:auto;background:var(--bg,#10131a);padding:55px max(45px,10vw)}
body.light{--bg:#f7f8fb;--fg:#20242c;--muted:#687386;--card:#ffffff;--border:#d8dee8;--hover:#edf1f7;background:#f7f8fb;color:#20242c}body.light header{background:#f4f6f9;border-color:#d7dde6}body.light header b{color:#20242c}body.light nav{background:#f1f3f7;border-color:#d8dee8}body.light nav button{color:#687386}body.light nav button:hover{background:#e5eaf2;color:#253047}body.light nav button.active{background:#dfe7f5;color:#315fce}body.light aside{background:#f4f6f9;border-color:#d8dee8}body.light main{background:#fff}body.light #breadcrumbs,body.light #tabs{background:#f6f8fb;border-color:#d9dfe8}body.light .tab{background:#eef1f6;border-color:#d9dfe8;color:#596476}body.light .tab.active{background:#fff;color:#20242c}body.light #bottom{background:#fbfcfe;border-color:#d8dee8}body.light .paneltabs{background:#f3f5f8;border-color:#d8dee8}body.light button,body.light input,body.light textarea,body.light select{background:#fff;color:#20242c;border-color:#cbd3df}body.light button:hover{background:#edf1f7}body.light .primary{background:#356fe3;color:#fff;border-color:#356fe3}body.light .node{color:#4c5769}body.light .node:hover{background:#e8edf5;color:#1f2937}body.light .problem:hover,body.light .symbolItem:hover{background:#e8edf5}body.light #modal{background:#fff;border-color:#d3dae5}body.light #modal input{background:#f8fafc;color:#20242c}body.light footer{background:#356bce}body.light ::-webkit-scrollbar-thumb{background:#bdc6d3;border:2px solid transparent;background-clip:padding-box}@media(max-width:900px){.welcomeGrid{grid-template-columns:1fr}#welcome{padding:35px}}

/* v0.9 workflow */
#workspaceEditors{min-height:0;display:flex;position:relative}.editorPane{flex:1;min-width:0;border-right:1px solid var(--border,#29313d)}#editor,#editor2{width:100%;height:100%}#diffHost{min-height:0;width:100%;height:100%}.markdownBody{min-height:0;overflow:auto;padding:28px max(35px,7vw);background:var(--bg,#10131a);color:var(--fg,#e8edf5);line-height:1.65}.markdownBody h1,.markdownBody h2{border-bottom:1px solid var(--border,#303744);padding-bottom:7px}.markdownBody code{background:var(--card,#1b202a);padding:2px 5px;border-radius:4px}.markdownBody pre{background:var(--card,#171c25);padding:14px;border-radius:8px;overflow:auto}.markdownBody a{color:#6e96ff}.dashCard{margin:8px;border:1px solid var(--border,#303744);background:var(--card,#191e28);border-radius:10px;padding:12px}.dashCard h4{margin:0 0 8px;color:var(--muted,#8e99aa);font-size:11px;letter-spacing:.6px}.metric{font-size:18px;font-weight:650;color:var(--fg,#eef2f8)}.dashRow{display:flex;justify-content:space-between;margin:6px 0;color:var(--muted,#8d98aa)}.profileBtn{width:calc(100% - 16px);margin:4px 8px;text-align:left}.gitFile{padding:7px 8px;margin:2px 5px;border-radius:6px;cursor:pointer}.gitFile:hover{background:var(--hover,#252c38)}.gitFile .gitCode{display:inline-block;width:25px;color:#e3b15d}.gitActions{float:right}.gitActions button{border:0;padding:1px 4px;background:transparent}.gitLog{font-size:11px;padding:6px 9px;border-bottom:1px solid var(--border,#29313b)}.explorerIcon{width:18px;display:inline-block;color:#7787a0}.split{display:flex!important}body.light .markdownBody{background:#fff;color:#20242c}

/* v0.10 debugging */
.debugToolbar{display:flex;gap:3px;padding:5px 8px;border-bottom:1px solid var(--border,#2b3340)}.debugToolbar button{flex:1;padding:5px}.debugSection{border-bottom:1px solid var(--border,#2b3340);padding:5px 8px}.debugSection h4{margin:4px 0 6px;font-size:10px;letter-spacing:.7px;color:var(--muted,#8b96a8)}.debugRow{padding:4px 3px;border-radius:4px;cursor:pointer;font-family:Consolas,monospace;font-size:12px}.debugRow:hover{background:var(--hover,#252c38)}.debugName{color:#86b6ff}.debugValue{color:#c5d5a5;margin-left:6px}.debugType{color:#77859b;margin-left:6px}.stackFrame{padding:6px;border-radius:5px;cursor:pointer}.stackFrame:hover{background:var(--hover,#252c38)}.stackFrame small{display:block;color:var(--muted,#7d899b)}.breakpointDot{color:#f05d6f;margin-right:7px}#debugConsole{position:absolute;left:0;right:0;bottom:24px;height:220px;background:#0c0f14;border-top:1px solid #2c3440;z-index:8}.debugConsoleBar{height:34px;padding:5px 9px;font-size:11px;color:#8792a4;display:flex;gap:12px;align-items:center}.debugConsoleBar input{flex:1;padding:5px 8px}#debugConsoleOut{height:calc(100% - 34px);margin:0;padding:8px 11px;overflow:auto;white-space:pre-wrap;font:12px Consolas,monospace}.debugLineBreakpoint{background:linear-gradient(90deg,#7220 0,#7225 5px,transparent 5px)!important}

/* v0.11 language intelligence */
.langServer{margin:7px;border:1px solid var(--border,#303744);border-radius:8px;padding:9px}.langServerHead{display:flex;justify-content:space-between;align-items:center}.langBadge{font-size:10px;padding:2px 6px;border-radius:9px;background:#293241;color:#90a6c7}.langBadge.ready{background:#173d2b;color:#7dd7a7}.langBadge.missing{background:#40262a;color:#e8a0aa}.langServer small{display:block;color:var(--muted,#7f8b9e);margin-top:4px}