:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;color:#16243d;background:#f2f5fa;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button{cursor:pointer;border:0}button:disabled{opacity:.55;cursor:not-allowed}h1{font-size:27px;letter-spacing:-.025em;margin:0 0 24px}h2{font-size:18px;margin:0 0 12px}p{line-height:1.6}a{color:#286cbb}.muted{color:#718096;font-size:14px}.page{min-height:100vh}.topbar,.workspace-top{display:flex;align-items:center;justify-content:space-between;padding:0 28px;height:64px;background:#161f30;color:#fff;box-shadow:0 2px 16px #11182718}.brand{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:750;letter-spacing:-.025em}.brand-mark{background:#3e82f5;color:#fff;border-radius:7px;padding:5px 7px;font:750 13px monospace}.top-chip{font-size:10px;font-weight:750;color:#b1c1db;letter-spacing:.15em;background:#28364d;padding:5px 7px;border-radius:4px}.top-right{display:flex;align-items:center;gap:14px}.page-content{max-width:1100px;margin:50px auto;padding:0 24px}.panel{background:#fff;border:1px solid #e4eaf2;border-radius:13px;box-shadow:0 10px 27px #15223809;padding:24px}.login-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:24px;align-items:stretch}.intro{background:linear-gradient(130deg,#202f4b,#1e426d);color:#fff;min-height:440px;display:flex;flex-direction:column;justify-content:center}.illustration-code{font:15px/1.9 ui-monospace,Consolas,monospace;background:#0e1f38;border:1px solid #3e628d;padding:25px;border-radius:10px;color:#a7d5ff;margin-bottom:25px}.intro h2{font-size:26px;letter-spacing:-.03em}.intro p{color:#c6d7ee;margin:0}.intro-features{display:flex;gap:17px;margin-top:32px;flex-wrap:wrap;font-size:12px;color:#a8ebd3}.tabs{display:flex;margin:-2px 0 30px;padding:4px;background:#f0f3f8;border-radius:9px}.tabs button{flex:1;padding:10px;color:#67768d;background:transparent;border-radius:7px}.tabs button.active{color:#1e4e96;background:#fff;box-shadow:0 1px 5px #142c4e19;font-weight:700}.login label,.panel label{display:block;color:#4b5b71;font-size:13px;font-weight:600;margin:16px 0 0}.login label input,.panel label input:not([type=checkbox]),.inline-form input,.panel select,.student-row select{display:block;width:100%;border:1px solid #d9e1ed;border-radius:8px;background:#fff;color:#16243d;padding:11px 12px;margin:7px 0 0;outline:none}.login input:focus,.panel input:focus,.panel select:focus{border-color:#3381ed;box-shadow:0 0 0 3px #e1edff}button.primary,button.secondary,button.ghost{border-radius:8px;padding:11px 15px;font-size:13px;font-weight:700;white-space:nowrap}button.primary{background:#276de4;color:#fff}button.primary:hover{background:#205bc3}button.secondary{background:#eaf1ff;color:#205aa9}button.secondary:hover{background:#dce8fa}button.ghost{background:transparent;color:#7d90a9}button.ghost:hover{background:#e7eef9}.login .primary{margin-top:20px;width:100%}.subtle{margin-top:18px;padding:8px 0;background:none;color:#3475d0;text-align:left;font-size:13px}.narrow{max-width:570px;margin:auto;text-align:center}.success-circle{height:52px;width:52px;display:grid;place-items:center;background:#d7f8e5;border-radius:50%;color:#138a52;font-weight:700;font-size:24px;margin:0 auto 18px}.recovery-code{font:700 23px ui-monospace,monospace;background:#eff5ff;border:1px dashed #95b8ef;letter-spacing:1px;padding:19px;margin:24px auto;border-radius:10px;overflow-wrap:anywhere}.rowbtn{display:flex;gap:10px;flex-wrap:wrap;margin-top:13px}.narrow .rowbtn{justify-content:center}.dashboard-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.panel-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.panel-heading h2{margin:0}.tag{font-size:12px;border-radius:7px;background:#ebf2ff;padding:6px 9px;color:#426eb3}.inline-form{display:flex;gap:9px;margin-bottom:20px}.inline-form input{margin:0;flex:1;min-width:0}.code-block{background:#f1f6ff;border:1px solid #d6e6ff;border-radius:10px;padding:17px;margin:22px 0}.code-block span{font-size:12px;color:#59739c;display:block}.code-block strong{display:block;font:700 25px ui-monospace,Consolas,monospace;letter-spacing:.11em;margin:11px 0 15px}.small{font-size:12px!important;padding:7px 10px!important}.switch-line{display:flex!important;align-items:center;gap:9px}.group-list{display:flex;flex-direction:column;gap:9px;margin-top:15px}.group-card{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid #e2e9f3;border-radius:9px;padding:13px}.group-card strong{font-size:14px}.group-card small{display:block;color:#8492a5;margin-top:4px}.student-panel{margin-top:20px}.student-table{border:1px solid #e3e9f1;border-radius:9px;overflow:hidden}.student-row{display:grid;grid-template-columns:1fr 1fr;gap:15px;padding:10px 15px;align-items:center;border-top:1px solid #e3e9f1}.student-row.table-head{background:#f3f6fa;font-size:12px;font-weight:700;color:#718097;border-top:0}.student-row select{margin:0;max-width:320px;padding:7px}.student-welcome{max-width:760px;margin:auto}.student-welcome h2{margin-top:17px}.toast{position:fixed;bottom:24px;right:24px;padding:12px 18px;border-radius:9px;box-shadow:0 8px 28px #0003;z-index:20;font-size:13px}.toast.good{background:#e0f9e9;color:#176f41}.toast.bad{background:#ffe7e7;color:#a82525}.hidden{display:none}.workspace{height:100vh;display:flex;flex-direction:column;background:#191e27}.workspace-top{height:49px;flex-shrink:0;background:#202630;padding:0 16px;box-shadow:none}.workspace-top .brand{font-size:14px}.workspace-title{color:#b2bed1;font-size:12px}.workspace-top .ghost{color:#c0c9d9}.status-dot{font-size:11px;color:#d6b35c}.status-dot.online{color:#69dbac}.workbody{display:grid;grid-template-columns:minmax(170px,17%) minmax(270px,43%) minmax(280px,40%);flex:1;min-height:0}.sidebar{background:#262d39;color:#d0d8e4;display:flex;flex-direction:column;min-width:0;overflow:hidden}.sidehead,.pane-head{height:43px;flex-shrink:0;display:flex;justify-content:space-between;align-items:center;padding:0 12px;font-size:11px;letter-spacing:.08em;background:#252b35}.file-actions{display:flex;gap:5px}.file-actions button{font-size:10px;background:#344050;color:#d7e6f9;border-radius:4px;padding:5px}.file-actions button:hover{background:#405574}#file-tree{flex:1;min-height:0;overflow-y:auto;padding-top:9px}.file-node{display:flex;align-items:center;gap:9px;border:0;background:none;color:#cdd7e3;width:100%;padding:9px 8px;text-align:left;font:12px ui-monospace,Consolas,monospace;white-space:nowrap;overflow:hidden}.file-node:hover{background:#344358}.file-node.selected{background:#365a86}.file-icon{color:#94c2ff;font-size:13px}.sidefoot{display:flex;gap:2px;margin:10px 6px}.sidefoot button{font-size:10px!important;color:#9badc4}.side-note{font-size:10px;color:#8295af;padding:12px;border-top:1px solid #394458}.codepane{min-width:0;display:flex;flex-direction:column;background:#171c25}.codepane .pane-head{color:#e4e9f2;border-bottom:1px solid #394351}.codepane #presence{color:#78d6ae;letter-spacing:0}#monaco-editor{flex:1;min-height:0}.editor-foot,.preview-foot{font-size:10px;background:#202630;color:#91a3ba;padding:7px 11px;flex-shrink:0}.previewpane{display:flex;flex-direction:column;background:#fff;min-width:0}.previewpane .pane-head{color:#c5d0df;background:#293342;gap:10px}.previewpane .pane-head strong{font-size:12px;letter-spacing:0}.previewpane select{background:#1e2837;border:1px solid #44546b;color:#d8e4f3;font-size:11px;min-width:0;max-width:190px;border-radius:5px;padding:5px}.icon-btn{background:#3b4a5f;color:#fff;border-radius:5px;font-size:15px}#web-preview{flex:1;border:0;width:100%;background:#fff}.preview-foot{background:#f1f4f8;color:#70829a}.yRemoteSelection{background:#6cb2f33b}.yRemoteSelectionHead{border-left:2px solid #84c1ff}.errorbox{max-width:460px;margin:100px auto;padding:20px}.errorbox button{padding:10px;background:#215dbd;color:#fff;border-radius:6px}@media(max-width:950px){.workbody{grid-template-columns:180px 1fr;grid-template-rows:minmax(200px,1fr) minmax(260px,1fr)}.sidebar{grid-row:1/3}.previewpane{grid-column:2;grid-row:2}.codepane{grid-column:2;grid-row:1}.workspace-title{display:none}}@media(max-width:650px){.login-grid,.dashboard-grid{grid-template-columns:1fr}.page-content{margin:28px auto;padding:0 12px}.intro{min-height:unset}.workspace-top{gap:8px}.workspace-top .brand{font-size:12px}.workspace-top .top-right{gap:4px}.workbody{grid-template-columns:110px 1fr}.sidebar .file-actions{display:block}.sidehead{height:auto;padding:10px;display:block}.file-node{font-size:10px}.previewpane .pane-head{gap:2px}.previewpane select{max-width:110px}.group-card{align-items:flex-start;flex-direction:column}}.version-chip{font-size:9px;line-height:1;border:1px solid #586980;border-radius:4px;color:#9badc6;padding:4px 5px;font-weight:650;letter-spacing:.02em}.workspace-top .toolbar-btn{background:#334154;border:1px solid #485871;color:#dbe6f5;border-radius:6px;white-space:nowrap}.workspace-top .toolbar-btn:hover{background:#43546d}.workbody{grid-template-columns:var(--explorer-width,260px) 5px minmax(300px,var(--editor-width,620px)) 5px minmax(220px,1fr);grid-template-rows:minmax(0,1fr);overflow:hidden}.workbody.preview-hidden{grid-template-columns:var(--explorer-width,260px) 5px minmax(300px,1fr) 0 0}.workbody.preview-hidden #split-preview,.workbody.preview-hidden .previewpane{display:none}.workbody .sidebar{grid-column:1;grid-row:1}.workbody #split-explorer{grid-column:2;grid-row:1}.workbody .codepane{grid-column:3;grid-row:1}.workbody #split-preview{grid-column:4;grid-row:1}.workbody .previewpane{grid-column:5;grid-row:1}.pane-splitter{z-index:3;background:#17202c;border-left:1px solid #354150;border-right:1px solid #354150;cursor:col-resize;touch-action:none;position:relative}.pane-splitter:hover,.pane-splitter:focus-visible,.pane-splitter.dragging{background:#428df2;outline:none}.pane-splitter:after{content:"";position:absolute;inset:0 -3px}.sidebar .sidehead{height:47px}.file-node{min-height:31px;padding-top:7px;padding-bottom:7px}.file-node .file-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-node.context-selected:not(.selected){background:#344255}.file-icon{flex:0 0 13px;text-align:center}.sidebar #file-tree{padding-top:5px}.sidefoot{margin:8px 7px}.side-note{padding:10px 12px}.codepane .pane-head.editor-tabs-head{height:47px;background:#1f2630;padding:0;letter-spacing:0;position:relative;gap:5px;overflow:visible}#file-tabs{flex:1;min-width:0;height:100%;display:flex;align-items:stretch;overflow-x:auto;scrollbar-width:thin;scrollbar-color:#495b71 transparent}.file-tab{display:flex;align-items:center;gap:8px;max-width:220px;min-width:110px;padding:0 11px;cursor:pointer;background:#242d39;color:#bac8d8;border-right:1px solid #354151;border-top:2px solid transparent;flex-shrink:0;font:12px/1 system-ui,sans-serif}.file-tab:hover{background:#2e3845}.file-tab.active{border-top-color:#4a97fb;background:#171c25;color:#edf5ff}.file-tab:focus-visible{outline:2px solid #559ff0;outline-offset:-2px}.tab-icon{font-size:13px;color:#81b7fa}.tab-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tab-close{background:transparent;color:#9daabe;border-radius:4px;margin-left:auto;font:20px/1 system-ui,sans-serif;padding:0 3px}.tab-close:hover{background:#45536a;color:#fff}.presence-toggle{display:flex;align-items:center;gap:6px;background:#273141;border-left:1px solid #394351;color:#82d9bc;height:100%;padding:0 10px;font-size:11px;white-space:nowrap;flex-shrink:0}.presence-toggle:hover,.presence-toggle[aria-expanded=true]{background:#354358}.presence-avatars{display:flex;flex-direction:row-reverse;padding-left:8px}.presence-avatar{width:22px;height:22px;border:2px solid #273141;border-radius:50%;margin-left:-7px;background:var(--avatar-color);color:#172235;display:grid;place-items:center;font-size:10px;font-weight:800}.people-popover{position:absolute;top:42px;right:5px;z-index:20;width:245px;max-height:280px;overflow:auto;border:1px solid #435267;border-radius:8px;background:#253143;box-shadow:0 10px 34px #050b16aa;padding:12px;color:#f0f6fd;letter-spacing:0}.people-popover.hidden{display:none}.people-popover>strong{display:block;font-size:12px;font-weight:700;margin-bottom:9px}.person-row{display:flex;align-items:center;gap:10px;padding:7px 3px;border-top:1px solid #374357}.person-row b{font-weight:650;font-size:12px}.person-row small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:184px;color:#afbdd1;font-size:11px;margin-top:2px}.person-indicator{width:9px;height:9px;flex-shrink:0;border-radius:50%}.editor-foot{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.workspace-context-menu{position:fixed;z-index:1000;min-width:195px;max-width:270px;border:1px solid #56677f;border-radius:7px;box-shadow:0 14px 34px #05091099;background:#273243;padding:5px;display:flex;flex-direction:column;overflow:hidden}.workspace-context-menu.hidden{display:none}.workspace-context-menu button{background:transparent;text-align:left;color:#e6effb;font-size:12px;padding:9px 11px;border-radius:4px}.workspace-context-menu button:hover,.workspace-context-menu button:focus-visible{background:#4165a0;outline:none}.workspace-context-menu .context-title{font:11px ui-monospace,monospace;color:#9aafc9;padding:7px 10px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-bottom:1px solid #45566b;margin-bottom:4px}@media(max-width:950px){.workbody{grid-template-columns:180px minmax(0,0px) minmax(0,1fr) 0 minmax(0,0px);grid-template-rows:minmax(200px,1fr) minmax(200px,1fr)}.workbody .sidebar{grid-column:1;grid-row:1 / 3}.workbody .codepane{grid-column:3;grid-row:1}.workbody .previewpane{grid-column:3;grid-row:2}.workbody .pane-splitter{display:none}.workbody.preview-hidden{grid-template-columns:180px 0 minmax(0,1fr) 0 0;grid-template-rows:minmax(0,1fr)}.workbody.preview-hidden .codepane{grid-row:1}.presence-toggle{padding:0 8px}}@media(max-width:650px){.workbody,.workbody.preview-hidden{grid-template-columns:122px 0 minmax(0,1fr) 0 0}.workbody .sidebar .sidehead{display:block;padding:7px}.workbody .sidebar .sidehead span.file-actions{display:flex;flex-wrap:wrap;margin-top:5px}.file-tab{min-width:90px;max-width:140px;padding:0 6px}.presence-avatars{display:none}.workspace-top .top-right{gap:3px}.workspace-top .toolbar-btn{font-size:10px!important;padding:5px!important}.workspace-top .status-dot,.side-note{display:none}}.template-control{margin-top:22px;padding-top:13px;border-top:1px solid #e6eaf0}.template-control .muted{font-size:12px;line-height:1.5;margin:8px 0 0}.group-create{padding:0 0 15px;border-bottom:1px solid #edf1f6}.group-create .inline-form{margin-bottom:6px}.group-create label{font-size:12px;margin:7px 0 0}.template-library{margin-top:20px}.template-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:10px;margin-top:16px}.template-card{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0;background:#f8faff;border:1px solid #e1e9f3;border-radius:9px;padding:13px 15px}.template-card strong{font-size:13px;display:inline-block;margin-right:9px;overflow-wrap:anywhere}.template-card small{font-size:11px;display:block;color:#6c7d94;margin-top:6px}.template-card .tag{vertical-align:middle}.template-warning{font-size:12px;color:#607088;margin:16px 0 0}@media(max-width:950px){.workspace-top #save-template{font-size:10px;padding:6px 7px}}.group-buttons{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:5px}.group-card{flex-wrap:wrap}.group-card .group-buttons{margin-left:auto}.group-card .online-count{color:#14755e;font-weight:700}.group-card small{line-height:1.6}.group-card small+small{color:#2867ad}.admin-panel{margin-top:20px}.admin-panel .rowbtn{margin-top:15px}.text-action{color:#3864a2;font-size:11px;padding:3px 5px;background:#edf3fd;border:1px solid #d7e5fb;border-radius:4px;margin-left:6px}.text-action:hover{background:#dfeafa}.feedback-mini{color:#2266a3;font-size:12px;border-left:3px solid #6e9ee1;background:#f3f7fe;padding:8px 12px;margin:8px 0}.preview-viewport{display:flex;justify-content:center;align-items:stretch;flex:1;min-height:0;overflow:auto;background:#dce2ea}.preview-viewport iframe{height:100%;min-width:0;flex-shrink:0;max-width:100%;background:#fff;box-shadow:0 0 0 1px #c5cdd8}.workspace-top .top-right{gap:6px;min-width:0;overflow-x:auto;scrollbar-width:thin}.workspace-top .top-right button,.workspace-top .brand,.workspace-top .workspace-title{flex-shrink:0}.sidebar .file-actions{flex-wrap:wrap;justify-content:flex-end}.sidebar .file-actions button{font-size:10px}#preview-width{max-width:120px}.file-node[draggable=true]{cursor:grab}.file-node[draggable=true]:active{cursor:grabbing}@media(max-width:1050px){.workspace-top .brand{font-size:12px}.workspace-top .top-right{gap:3px}.workspace-top .toolbar-btn{font-size:10px;padding:6px}.group-card{align-items:flex-start}}.explorer-sidebar{background:#181818;color:#ccc;border-right:1px solid #2b2b2b;font-family:Segoe UI,system-ui,sans-serif}.explorer-sidebar .sidehead{height:35px;padding:0 12px 0 20px;background:transparent;font-size:11px;font-weight:400;letter-spacing:.02em}.explorer-sidebar .explorer-action{display:grid;place-items:center;width:22px;height:22px;flex:0 0 22px;padding:0;border-radius:4px;background:transparent;color:#ccc}.explorer-sidebar .explorer-action:hover{background:#ffffff14;color:#fff}.explorer-sidebar .explorer-action:focus-visible{outline:1px solid #007fd4;outline-offset:-1px;background:#ffffff14}.explorer-glyph{display:inline-block;font: 16px/1 codicon;text-rendering:auto;-webkit-font-smoothing:antialiased;flex:0 0 16px;-webkit-user-select:none;user-select:none}.explorer-project-head{display:flex;align-items:center;gap:2px;min-height:28px;padding:0 5px 0 4px;flex-shrink:0}.explorer-project-toggle{display:flex;align-items:center;gap:4px;flex:1;min-width:0;align-self:stretch;padding:0;background:transparent;color:#ccc;text-align:left;font-size:11px;font-weight:700;text-transform:uppercase}.explorer-project-toggle>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.explorer-project-toggle:focus-visible{outline:1px solid #007fd4;outline-offset:-1px}.explorer-sidebar .file-actions{display:flex;flex-wrap:nowrap;gap:0;opacity:.65}.explorer-project-head:hover .file-actions,.explorer-project-head:focus-within .file-actions{opacity:1}.explorer-sidebar #file-tree{padding-top:0;padding-bottom:16px;scrollbar-width:thin;scrollbar-color:#ffffff26 transparent;overflow-x:hidden}.explorer-sidebar #file-tree[hidden]{display:none}.explorer-sidebar .file-node{height:22px;min-height:22px;padding-top:0;padding-bottom:0;padding-right:12px;gap:4px;color:#ccc;font:13px/22px Segoe UI,system-ui,sans-serif;letter-spacing:0;cursor:default;outline:none;-webkit-user-select:none;user-select:none}.explorer-sidebar .file-node:hover{background:#2a2d2e}.explorer-sidebar .file-node.selected,.explorer-sidebar .file-node.context-selected:not(.selected){background:#37373d;color:#fff}.explorer-sidebar #file-tree:focus-within .file-node.selected{background:#04395e}.explorer-sidebar .file-node:focus-visible{outline:1px solid #007fd4;outline-offset:-1px}.explorer-sidebar .file-node.drop-target{background:#383b3d;outline:1px solid #007fd4;outline-offset:-1px}.tree-twistie{width:16px;flex:0 0 16px;display:flex;align-items:center;justify-content:center;color:#ccc}.explorer-sidebar .file-icon{display:flex;align-items:center;justify-content:center;width:16px;flex:0 0 16px;font-size:16px}.explorer-sidebar .file-icon-folder{color:#c6ad7e}.explorer-sidebar .file-icon-html{color:#e37933}.explorer-sidebar .file-icon-css{color:#75b8ef}.explorer-sidebar .file-icon-image{color:#b6a1d8}.file-tree-children{position:relative}.file-tree-children:before{content:"";position:absolute;top:0;bottom:0;left:var(--guide-left);border-left:1px solid #ffffff0e;pointer-events:none}.explorer-sidebar #file-tree:hover .file-tree-children:before{border-left-color:#fff2}.explorer-edit-row{display:flex;align-items:center;gap:4px;height:22px;padding-right:8px}.explorer-name-input{min-width:0;width:100%;height:22px;padding:0 4px;border:1px solid #007fd4;border-radius:0;outline:none;background:#313131;color:#fff;font:13px/20px Segoe UI,system-ui,sans-serif}.explorer-name-input:invalid{border-color:#be1100}.workspace-context-menu{border:1px solid #454545;border-radius:5px;background:#252526;padding:4px;box-shadow:0 2px 12px #0009}.workspace-context-menu button{padding:6px 12px;border-radius:3px;font:13px/20px Segoe UI,system-ui,sans-serif;color:#ccc}.workspace-context-menu button:hover,.workspace-context-menu button:focus-visible{background:#04395e}.workspace-context-menu .context-title{font:11px/18px Segoe UI,system-ui,sans-serif;color:#969696;border-bottom-color:#454545;padding:4px 12px 6px}@media(max-width:650px){.workbody .explorer-sidebar .sidehead{display:flex;padding:0 8px;height:35px}.explorer-project-head{flex-wrap:wrap;padding-bottom:3px}.explorer-project-toggle{flex-basis:100%;height:24px}.workbody .explorer-sidebar .file-actions{display:flex;flex-wrap:nowrap;margin-top:0;opacity:1}.explorer-sidebar .file-node{font-size:12px}}.workspace-top{height:44px;gap:12px;padding:0 12px;background:#181818;border-bottom:1px solid #2b2b2b;box-shadow:none;overflow:visible}.workspace-top .brand{font-size:13px;gap:8px}.workspace-top .brand-mark{border-radius:4px;background:#0078d4;padding:4px 5px}.workspace-top .workspace-title{display:block;flex:1;min-width:0;flex-shrink:1;color:#aaa;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px}.workspace-top .top-right{flex-shrink:0;gap:6px;overflow:visible}.workspace-top .toolbar-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:28px;padding:0 9px;border:1px solid #3c3c3c;border-radius:4px;background:#252526;color:#ccc;font-size:12px;font-weight:400}.workspace-top .toolbar-btn:hover{background:#333}.workspace-top .import-button{border-color:#0078d4;background:#0078d4;color:#fff}.workspace-top .import-button:hover{background:#1685d9}.workspace-icon-button{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;padding:0;border-radius:4px;background:transparent;color:#ccc;flex-shrink:0}.workspace-icon-button:hover{background:#ffffff14;color:#fff}.workspace-icon-button:focus-visible,.workspace-top .toolbar-btn:focus-visible{outline:1px solid #007fd4;outline-offset:2px}.workspace-tools{position:relative;flex-shrink:0}.workspace-tools>summary{list-style:none;cursor:pointer}.workspace-tools>summary::-webkit-details-marker{display:none}.workspace-tools-menu{position:absolute;right:0;top:32px;z-index:60;min-width:220px;padding:4px;border:1px solid #454545;border-radius:5px;background:#252526;box-shadow:0 2px 12px #0009}.workspace-tools-menu button{display:flex;align-items:center;gap:10px;width:100%;padding:7px 10px;border-radius:3px;background:transparent;color:#ccc;text-align:left;font-size:13px;white-space:nowrap}.workspace-tools-menu button:hover,.workspace-tools-menu button:focus-visible{background:#04395e;outline:none}.workspace-tools-menu button:disabled:hover{background:transparent}.codepane .pane-head.editor-tabs-head{height:35px;gap:0;background:#181818;border-bottom:1px solid #2b2b2b}#file-tabs{scrollbar-color:#ffffff26 transparent}.file-tab{max-width:280px;min-width:115px;padding:0;border-right-color:#2b2b2b;border-top:1px solid transparent;background:#181818;color:#969696}.file-tab:hover{background:#242424}.file-tab.active{border-top-color:#0078d4;background:#1e1e1e;color:#fff}.tab-open{display:flex;align-items:center;gap:7px;min-width:0;flex:1;align-self:stretch;padding:0 8px 0 10px;border-radius:0;background:transparent;color:inherit;text-align:left;font-size:13px;cursor:pointer}.tab-open:focus-visible{outline:1px solid #007fd4;outline-offset:-1px}.tab-icon{display:flex;flex-shrink:0}.tab-icon-html{color:#e37933}.tab-icon-css{color:#75b8ef}.tab-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tab-detail{min-width:0;max-width:105px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#969696;font-size:11px}.tab-close{display:flex;align-items:center;justify-content:center;width:22px;height:22px;flex:0 0 22px;margin:0 5px 0 0;padding:0;border-radius:4px;color:#ccc;opacity:0}.file-tab:hover .tab-close,.file-tab.active .tab-close,.file-tab:focus-within .tab-close{opacity:1}.tab-close:hover{background:#ffffff14;color:#fff}.tabs-menu-button{margin:0 4px}.workspace-context-menu button:disabled:hover{background:transparent}.workspace-dialog{position:fixed;width:min(600px,calc(100vw - 32px));max-height:calc(100vh - 48px);margin:auto;padding:0;overflow:auto;border:1px solid #454545;border-radius:7px;background:#252526;color:#ccc;box-shadow:0 12px 48px #0009;font-family:Segoe UI,system-ui,sans-serif}.workspace-dialog::backdrop{background:#0007}.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px 10px;margin:0}.dialog-heading h2{flex-shrink:0;margin:0;color:#eee;font-size:15px;font-weight:600}.dialog-description{padding:0 20px;margin:12px 0;color:#aaa;font-size:13px;line-height:1.5}.dialog-actions{display:flex;justify-content:flex-end;gap:8px;padding:14px 20px;border-top:1px solid #3c3c3c}.dialog-primary,.dialog-secondary{padding:7px 13px;border:1px solid transparent;border-radius:4px;background:#0078d4;color:#fff;font-size:13px}.dialog-primary:hover{background:#1685d9}.dialog-secondary{border-color:#454545;background:#333;color:#ccc}.dialog-secondary:hover{background:#404040}.file-picker-dialog{width:min(620px,calc(100vw - 32px))}.file-picker-search{display:flex;align-items:center;gap:10px;margin:0 12px 8px;padding:9px 10px;border:1px solid #007fd4;background:#313131;color:#aaa}.file-picker-search input{flex:1;min-width:0;padding:0;border:0;outline:none;background:transparent;color:#eee;font-size:14px}#quick-open-results{max-height:min(350px,50vh);overflow:auto;padding:0 4px 4px;scrollbar-width:thin}#quick-open-results button{display:flex;align-items:center;gap:9px;width:100%;min-height:28px;padding:4px 14px;border-radius:3px;background:transparent;color:#ccc;text-align:left;font-size:13px}#quick-open-results button:hover{background:#37373d}#quick-open-results button[aria-selected=true]{background:#04395e;color:#fff}.picker-file-icon{display:flex;flex-shrink:0}.picker-file-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.picker-file-path{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#969696;font-size:12px}.picker-empty{padding:12px 16px;color:#969696;font-size:13px}.dialog-hint{padding:10px 20px;border-top:1px solid #3c3c3c;color:#969696;font-size:11px}.workspace-top button.workspace-title{background:transparent;text-align:left;padding:6px 8px;border-radius:3px}.workspace-top button.workspace-title:hover{background:#ffffff0d;color:#eee}.workspace-top button.workspace-title:focus-visible{outline:1px solid #007fd4;outline-offset:1px}.project-name-field{display:block;margin:8px 20px 16px;font-size:13px;color:#ccc}.project-name-field input{display:block;width:100%;margin-top:7px;padding:8px 10px;border:1px solid #555;border-radius:3px;background:#313131;color:#eee;outline:none}.project-name-field input:focus{border-color:#007fd4}.project-name-error{color:#ffb4a9}.playground{height:100dvh;min-height:500px;display:flex;flex-direction:column;background:#1e1e1e;color:#ccc;font-family:Segoe UI,system-ui,sans-serif}.playground-top{flex-shrink:0}.playground-title{flex:1;color:#aaa;font-size:13px}.playground-intro{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 18px;border-bottom:1px solid #343434;background:#252526;font-size:13px}.playground-intro p{margin:0;line-height:1.5}#playground-draft-status{flex-shrink:0;color:#969696;font-size:11px}.playground-panes{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr 1fr}.playground-codepane,.playground-previewpane{display:flex;flex-direction:column;min-width:0;min-height:0;border-right:1px solid #343434}.playground-codepane .pane-head,.playground-previewpane .pane-head{height:38px;background:#181818;border-bottom:1px solid #343434}.playground .pane-head h2{margin:0;font-size:12px;font-weight:600;letter-spacing:0}.playground .pane-head h2 span{margin-left:8px;color:#888;font-size:11px;font-weight:400}.playground-format{padding:4px 6px;background:transparent;color:#aaa;border-radius:3px;font-size:11px}.playground-format:hover{background:#ffffff12;color:#eee}.playground-editor{flex:1;min-height:0;overflow:hidden}.playground-basic-editor{display:block;width:100%;height:100%;padding:12px 14px;resize:none;border:0;outline:none;background:#1e1e1e;color:#d4d4d4;tab-size:2;font:14px/1.5 Consolas,Menlo,monospace;white-space:pre;overflow:auto}.playground-basic-editor:focus-visible{box-shadow:inset 0 0 0 1px #007fd4}#playground-preview{width:100%;flex:1;min-height:0;border:0;background:#fff}.playground-foot{padding:7px 18px;background:#181818;color:#888;font-size:11px}.playground button:focus-visible{outline:1px solid #007fd4;outline-offset:2px}#back-to-playground{color:#b8c8de;text-decoration:none}#back-to-playground:hover{color:#fff}@media(max-width:1100px){.playground-panes{grid-template-columns:1fr 1fr;grid-template-rows:minmax(240px,1fr) minmax(220px,1fr)}.playground-previewpane{grid-column:1/-1;grid-row:2}.playground-intro{align-items:flex-start;gap:6px;flex-direction:column}}@media(max-width:650px){.playground{height:auto;min-height:100dvh}.playground-title{display:none}.playground-panes{display:flex;flex-direction:column;flex:none}.playground-codepane,.playground-previewpane{height:360px}.playground-intro{padding:10px 12px}.playground-foot{line-height:1.5}}.zip-archive-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#969696;font-size:12px}.zip-summary{display:flex;gap:8px;padding:0 20px;margin:16px 0}.zip-summary>span{flex:1;padding:10px;border:1px solid #3c3c3c;border-radius:4px;background:#1e1e1e;font-size:11px;color:#aaa}.zip-summary strong{display:block;margin-bottom:4px;color:#eee;font-size:20px;font-weight:500}.zip-entry-lists{max-height:300px;overflow:auto;padding:0 20px 16px;scrollbar-width:thin}.zip-entry-lists details{margin-top:10px;font-size:13px}.zip-entry-lists summary{cursor:pointer;color:#eee}.zip-entry-lists ul{list-style:none;margin:8px 0 0;padding:0}.zip-entry-lists li{display:flex;align-items:flex-start;gap:8px;padding:4px 0;font-size:12px;overflow-wrap:anywhere}.zip-entry-lists .zip-skipped{display:flex;flex-direction:column;gap:2px;color:#aaa}.zip-skipped small{color:#969696;font-size:11px}.zip-folder-icon{color:#c6ad7e}.zip-error{margin:12px 20px;padding:10px;border-left:3px solid #f48771;background:#f4877110;color:#f48771;font-size:13px;overflow-wrap:anywhere}#zip-progress{display:block;width:calc(100% - 40px);height:7px;margin:18px 20px 24px;accent-color:#0078d4}@media(max-width:850px){.workspace-top .brand-name{display:none}.workspace-top .top-right{gap:4px}.workspace-top .toolbar-btn{padding:0 7px;font-size:12px}}@media(max-width:650px){.workspace-top{height:auto;min-height:44px;flex-wrap:wrap;gap:6px;padding:7px 10px}.workspace-top .top-right{flex-basis:100%;justify-content:flex-end;flex-wrap:wrap}.workspace-top .brand-name{display:inline}.workspace-top #zip>span:last-child{display:none}.file-tab{min-width:105px;max-width:230px}.tab-detail{max-width:70px}.presence-toggle{font-size:10px}}.form-error{min-height:1.4em;color:#a82525;font-size:13px;line-height:1.5;margin:14px 0 6px}.login-help{border-top:1px solid #e4eaf2;padding-top:12px;margin-top:16px;font-size:13px}.login-help summary,details summary{cursor:pointer;color:#42628b;font-size:13px}.login-help p{color:#64748b}.step-label{font-size:12px;color:#64748b;letter-spacing:.03em}.registration-class{background:#eff5ff;padding:12px;border-radius:8px;color:#205aa9}.field-hint{font-size:12px;margin:7px 0}.access-setup{max-width:560px;margin:auto}.access-setup .primary{margin-top:10px}.dashboard-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:24px}.dashboard-heading h2{font-size:23px;margin:0}.dashboard-heading p{margin:8px 0 0}.dashboard-filters{display:flex;align-items:flex-end;gap:16px;margin:24px 0 16px}.dashboard-filters label{display:block;font-size:12px;color:#4b5b71;font-weight:600;flex:1;max-width:450px}.dashboard-filters label:last-child{max-width:230px}.dashboard-filters input,.dashboard-filters select,.learner-row select{display:block;width:100%;margin-top:7px;padding:10px 12px;border:1px solid #d9e1ed;border-radius:8px;background:#fff;color:#16243d;font:inherit}.teacher-dashboard :is(input,select,textarea):focus-visible{outline:2px solid #3381ed;outline-offset:2px}.teacher-dashboard button:focus-visible,.login button:focus-visible{outline:2px solid #3381ed;outline-offset:3px}.class-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.class-card{background:#fff;border:1px solid #e0e7f0;border-radius:13px;padding:22px;box-shadow:0 5px 18px #15223805}.class-card h3{font-size:18px;margin:18px 0 8px;overflow-wrap:anywhere}.class-card p{font-size:13px;color:#64748b;margin:12px 0 20px}.class-card-symbol{display:inline-flex;background:#edf4ff;color:#276de4;border-radius:9px;padding:10px;font:700 17px monospace}.class-card .open-class{width:100%;text-align:left}.empty-state{padding:25px 0;color:#64748b;font-size:14px;grid-column:1/-1}.pagination{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:24px;font-size:13px;color:#64748b}.dashboard-secondary{display:flex;gap:24px;border-top:1px solid #e0e7f0;margin-top:32px}.school-breadcrumb{display:flex;gap:12px;align-items:center;font-size:13px;color:#64748b;margin-bottom:20px}.school-breadcrumb .subtle{margin:0}.class-invite{flex-shrink:0;background:#eaf2ff;padding:14px 18px;border-radius:10px}.class-invite>span,.class-invite>small{display:block;color:#59739c;font-size:11px}.class-invite>div{display:flex;align-items:center;gap:18px;margin:8px 0}.class-invite strong{font:700 24px ui-monospace,monospace;letter-spacing:.12em}.class-tabs{display:flex;gap:6px;border-bottom:1px solid #d9e1ed;margin-bottom:24px}.class-tabs button{background:transparent;color:#64748b;padding:12px 18px;border-bottom:3px solid transparent;font-size:14px}.class-tabs button.active{border-color:#276de4;color:#205aa9;font-weight:700}.teacher-dashboard h3{font-size:16px;margin:0 0 16px}.teacher-dashboard .group-card{background:#fff;padding:20px}.teacher-dashboard .group-buttons{display:flex;gap:8px;flex-wrap:wrap}.group-feedback{font-size:12px;color:#64748b;max-width:440px;margin:10px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}.teacher-dashboard #group-start{margin-top:12px}.teacher-dashboard .settings-panel{max-width:760px;margin-bottom:20px}.settings-panel details{margin:20px 0}.learner-table{border:1px solid #e0e7f0;border-radius:10px;background:#fff;overflow:hidden}.learner-row{display:grid;grid-template-columns:minmax(120px,1fr) minmax(150px,1fr) minmax(230px,1.1fr);gap:16px;padding:16px;align-items:center;border-top:1px solid #e0e7f0;font-size:13px}.learner-row.table-head{border-top:0;background:#edf2f8;font-size:12px;color:#64748b;font-weight:600}.learner-row small{display:block;color:#64748b;font-size:11px;margin-top:5px;overflow-wrap:anywhere}.learner-row select{margin:0;font-size:13px}.learner-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.learner-actions .subtle{margin:0;font-size:12px}.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.school-dialog{width:min(560px,calc(100vw - 28px));max-height:90dvh;overflow:auto;color:#16243d}.school-dialog::backdrop{background:#10243d66;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.school-dialog textarea{display:block;width:100%;border:1px solid #d9e1ed;border-radius:8px;margin-top:7px;padding:10px;font:inherit;resize:vertical}.school-dialog .rowbtn{justify-content:flex-end}.school-dialog .temporary-password{padding:18px;border:1px dashed #95b8ef;border-radius:8px;background:#eff5ff;font:700 23px ui-monospace,monospace;overflow-wrap:anywhere}@media(max-width:950px){.class-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.learner-row{grid-template-columns:minmax(110px,1fr) minmax(130px,1fr) minmax(190px,1fr)}}@media(max-width:650px){.class-grid{grid-template-columns:1fr}.dashboard-heading{align-items:flex-start;flex-direction:column;gap:18px}.dashboard-filters{flex-direction:column;align-items:stretch;gap:12px}.dashboard-filters label,.dashboard-filters label:last-child{max-width:none}.class-tabs button{padding:12px 10px;font-size:13px}.class-invite{width:100%}.learner-row{display:flex;flex-direction:column;align-items:stretch;gap:12px}.learner-row.table-head{display:none}.dashboard-secondary{flex-wrap:wrap;gap:8px 20px}.teacher-dashboard .group-buttons{width:100%}.school-dialog .rowbtn{flex-wrap:wrap}.login-grid .intro{display:none}}