:root { color-scheme: dark; font-family: "Segoe UI", "Microsoft YaHei", system-ui, sans-serif; background:#181818; color:#d4d4d4; }
* { box-sizing:border-box; } body { margin:0; min-height:100vh; overflow:hidden; background:#181818; }
button,input,textarea { font:inherit; } button { border:0; color:inherit; cursor:pointer; } .hidden { display:none !important; }

.login-screen { min-height:100vh; display:grid; place-items:center; padding:24px; background:radial-gradient(circle at 25% 20%, #18375a 0, transparent 38%), radial-gradient(circle at 85% 85%, #27234d 0, transparent 35%), #101214; }
.login-card { width:min(420px,100%); padding:42px; border:1px solid #3b3f44; border-radius:14px; background:rgba(31,32,34,.94); box-shadow:0 28px 80px #0008; }
.login-mark,.brand-mark { display:grid; place-items:center; background:#007acc; color:#fff; font-weight:800; } .login-mark { width:46px; height:46px; border-radius:10px; font-size:15px; }
.login-kicker { margin:24px 0 6px; color:#5ac8fa; letter-spacing:.12em; font-size:12px; font-weight:700; } .login-card h1 { margin:0; color:#fff; font-size:29px; }.login-copy { margin:8px 0 28px; color:#9da5ae; }
.login-card label { display:grid; gap:8px; margin:16px 0; color:#c7cbd1; font-size:13px; }.login-card input { width:100%; padding:11px 12px; border:1px solid #4d5259; border-radius:6px; background:#181a1d; color:#f4f5f6; outline:0; }.login-card input:focus { border-color:#007fd4; box-shadow:0 0 0 1px #007fd4; }
.login-error { min-height:20px; margin:4px 0; color:#ff8080; font-size:13px; }.login-button { width:100%; display:flex; align-items:center; justify-content:center; gap:11px; margin-top:8px; padding:12px; border-radius:6px; background:#0e639c; color:#fff; font-weight:700; }.login-button:hover { background:#1177bb; }.login-card small { display:block; margin-top:18px; text-align:center; color:#777e87; }

.ide { height:100vh; display:grid; grid-template-rows:36px 1fr 23px; background:#1e1e1e; }.titlebar { display:flex; align-items:center; height:36px; background:#181818; border-bottom:1px solid #282828; user-select:none; }.brand { display:flex; align-items:center; gap:8px; min-width:165px; padding:0 12px; color:#e7e7e7; font-size:13px; font-weight:600; }.brand-mark { width:19px; height:19px; border-radius:4px; font-size:8px; }.menubar { display:flex; height:100%; }.menubar button { padding:0 9px; background:transparent; color:#bfc3c8; font-size:12px; }.menubar button:hover,.toolbar-button:hover { background:#2a2d2e; color:#fff; }.title-actions { display:flex; align-items:center; gap:13px; margin-left:auto; padding-right:9px; }.connection-state { color:#70bd8e; font-size:11px; }.connection-state.offline { color:#e0a35a; }.account { width:23px; height:23px; border-radius:50%; background:#4f82a8; color:#fff; font-size:13px; }
.ide-body { min-height:0; display:grid; grid-template-columns:48px 224px 1fr; }.activitybar { display:flex; flex-direction:column; align-items:center; gap:3px; padding:4px 0; background:#333333; }.activity { width:48px; height:47px; background:transparent; color:#b9b9b9; font-size:25px; border-left:2px solid transparent; }.activity:hover,.activity.active { color:#fff; }.activity.active { border-left-color:#fff; }.activity-spacer { flex:1; }
.explorer { overflow:auto; background:#252526; border-right:1px solid #1b1b1b; }.explorer-title { display:flex; align-items:center; justify-content:space-between; height:36px; padding:0 15px; color:#bbb; font-size:11px; letter-spacing:.07em; }.explorer-title button { background:transparent; color:#ccc; font-size:20px; }.workspace-name { padding:7px 13px; color:#ddd; font-size:12px; font-weight:700; }.file-item { display:flex; align-items:center; gap:8px; width:100%; padding:7px 15px 7px 24px; background:transparent; color:#ccc; text-align:left; font-size:13px; }.file-item:hover { background:#2a2d2e; }.file-item.active { background:#37373d; color:#fff; }.file-icon { color:#4db1ff; font-size:10px; font-weight:800; }.file-icon.text { color:#b2c5ce; font-size:14px; }
.workbench { min-width:0; min-height:0; display:grid; grid-template-rows:36px minmax(0,1fr) minmax(150px,30vh); }.tabs { display:flex; align-items:stretch; background:#252526; border-bottom:1px solid #1b1b1b; overflow:hidden; }.tab { display:flex; align-items:center; gap:8px; padding:0 13px; background:#2d2d2d; color:#a9a9a9; border-right:1px solid #1e1e1e; font-size:13px; }.tab.active { background:#1e1e1e; color:#fff; border-top:1px solid #007acc; }.close { color:#aaa; font-size:16px; }.tab-fill { flex:1; }.run-button,.toolbar-button { margin:4px 5px; padding:0 11px; border-radius:4px; background:#16825d; color:#fff; font-size:12px; }.run-button:hover { background:#1b9d70; }.toolbar-button { background:transparent; color:#c5c5c5; }
.editor-view { position:relative; min-height:0; display:flex; background:#1e1e1e; overflow:hidden; }.line-numbers { width:56px; flex:0 0 56px; padding:14px 10px 14px 0; overflow:hidden; background:#1e1e1e; color:#858585; font:13px/21px Consolas,"Cascadia Code",monospace; text-align:right; user-select:none; white-space:pre; }.code-editor { width:100%; min-height:0; resize:none; border:0; outline:0; padding:14px 18px; background:#1e1e1e; color:#d4d4d4; caret-color:#fff; font:13px/21px Consolas,"Cascadia Code","Microsoft YaHei Mono",monospace; tab-size:4; white-space:pre; overflow:auto; }.code-editor:focus { background:#1e1e1e; }.input-view { min-height:0; padding:16px; background:#1e1e1e; }.input-heading { margin-bottom:12px; color:#ddd; font-size:13px; }.input-view textarea { width:100%; height:calc(100% - 33px); min-height:130px; padding:12px; resize:none; border:1px solid #3c3c3c; border-radius:4px; outline:0; background:#181818; color:#ddd; font:13px/1.55 Consolas,"Microsoft YaHei Mono",monospace; }.input-view textarea:focus { border-color:#007fd4; }
.panel { min-height:0; border-top:1px solid #333; background:#181818; display:grid; grid-template-rows:35px 1fr; }.panel-tabs { display:flex; align-items:center; gap:2px; border-bottom:1px solid #2e2e2e; padding-left:10px; }.panel-tab { height:35px; padding:0 10px; background:transparent; color:#aaa; font-size:12px; }.panel-tab.active { color:#fff; border-bottom:1px solid #fff; }.panel-tabs #jobState { margin-left:auto; color:#9ca3aa; font-size:12px; }.clear-button { margin:0 10px; background:transparent; color:#9ca3aa; font-size:12px; }.clear-button:hover { color:#fff; }.panel pre { min-height:0; margin:0; padding:12px 16px; overflow:auto; white-space:pre-wrap; word-break:break-word; color:#ddd; font:12.5px/1.55 Consolas,"Cascadia Code","Microsoft YaHei Mono",monospace; }.terminal-muted { color:#7d848b; }
.statusbar { display:flex; align-items:center; gap:16px; padding:0 10px; overflow:hidden; background:#007acc; color:#fff; font-size:11px; }.statusbar span:nth-last-child(1) { margin-left:auto; }.statusbar i { display:inline-block; width:7px; height:7px; border-radius:50%; background:#7bd88f; }
@media (max-width:760px) { body { overflow:auto; }.ide { min-height:100vh; height:auto; grid-template-rows:42px auto 24px; }.titlebar { height:42px; }.brand { min-width:auto; }.menubar,.connection-state { display:none; }.ide-body { min-height:calc(100vh - 66px); grid-template-columns:42px 1fr; }.activitybar { background:#252526; }.activity { width:42px; height:43px; font-size:22px; }.explorer { display:none; }.workbench { grid-template-rows:40px minmax(360px,54vh) minmax(190px,30vh); }.tabs { overflow:auto; }.tab { min-width:max-content; }.tab-fill { min-width:0; }.run-button span,.toolbar-button { display:none; }.run-button { width:34px; padding:0; }.line-numbers { width:42px; flex-basis:42px; padding-right:7px; font-size:12px; }.code-editor { padding-left:10px; font-size:12px; }.login-card { padding:30px 24px; }.statusbar { gap:9px; font-size:10px; }.statusbar span:nth-child(2) { display:none; } }