*,*:before,*:after{box-sizing:border-box}body{margin:0;padding:0;min-width:320px;min-height:100vh;overflow:hidden;background:#eef4f8}.auth-screen{min-height:100vh;display:grid;place-items:center;padding:24px;background:linear-gradient(135deg,#edf7f6 0%,#f7fbfd 46%,#eef4f8 100%);color:#17262b;font-family:Inter,Microsoft YaHei,PingFang SC,Segoe UI,Arial,sans-serif}.auth-panel{width:min(420px,100%);display:flex;flex-direction:column;gap:14px;padding:28px;border:1px solid #d8e5e8;border-radius:8px;background:rgba(255,255,255,.92);box-shadow:0 18px 46px #2140481f}.auth-panel h1{margin:0;font-size:1.45rem;line-height:1.25;letter-spacing:0}.auth-panel p{margin:0;color:#64757c}.auth-panel label{display:flex;flex-direction:column;gap:7px;color:#365057;font-weight:800}.auth-panel input,.management-card input,.management-card select{width:100%;height:38px;padding:0 10px;border:1px solid #cfe2e5;border-radius:7px;outline:none;background:#fff;color:#17262b}.auth-panel input:focus,.management-card input:focus,.management-card select:focus{border-color:#0f9f8f;box-shadow:0 0 0 3px #0f9f8f24}.brand-mark.large{width:52px;height:52px;border-radius:12px;font-size:1.1rem}.auth-submit{width:100%;margin-top:4px}.form-error{margin:0;color:#c93c3c;font-weight:800}.auth-modal{position:absolute;top:0;right:0;bottom:0;left:0;z-index:60;display:grid;place-items:center;padding:24px;background:rgba(12,25,31,.28);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.auth-modal .auth-panel{width:min(380px,calc(100vw - 32px));padding:20px;background:#fff}.modal-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.modal-header h1{margin:0;font-size:1.15rem;letter-spacing:0}.login-panel{gap:18px!important;padding:24px!important}.modal-title-group{min-width:0;display:flex;align-items:center;gap:10px}.modal-title-group>div:last-child{min-width:0;display:flex;flex-direction:column;gap:3px}.modal-title-group p{color:#64757c;font-size:.84rem;font-weight:700;line-height:1.35}.modal-brand-mark{width:38px;height:38px;display:grid;place-items:center;flex:0 0 auto;border-radius:10px;background:linear-gradient(135deg,#0f9f8f,#2d7dd2);color:#fff;font-size:.83rem;font-weight:900;box-shadow:0 7px 16px #0f9f8f38}.confirm-modal{z-index:70;background:rgba(12,25,31,.38)}.confirm-panel{width:min(440px,calc(100vw - 32px))!important;padding:24px!important;gap:16px!important;border-color:#f3d7aa!important;box-shadow:0 24px 56px #21404838!important}.confirmation-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:#fff4dd;color:#c97910;font-size:1.35rem;font-weight:900;line-height:1;box-shadow:inset 0 0 0 1px #f3d7aa}.success-confirmation-icon{background:#e6f6f1;color:#0c846f;box-shadow:inset 0 0 0 1px #aee0d3}.confirm-copy{display:flex;flex-direction:column;gap:7px}.confirm-copy h1{margin:0;color:#17262b;font-size:1.2rem;line-height:1.25}.confirm-copy p{margin:0;color:#4f6268;font-weight:700;line-height:1.55}.confirm-copy .confirm-warning{padding:9px 10px;border-radius:7px;background:#fff8ec;color:#9a5e13;font-size:.88rem;font-weight:800}.confirm-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:4px}.confirm-actions .cancel-confirm-btn{width:auto;height:38px;padding:0 14px;border:1px solid #d5e4e7;background:#fff;color:#486168;font-size:.94rem}.confirm-actions .cancel-confirm-btn:hover{border-color:#b6cfd3;background:#f5f9fa;color:#17262b}.confirm-save-btn{min-width:116px;height:38px;padding:0 14px;font-size:.94rem}.user-created-panel{border-color:#b9ded6!important}.user-credentials{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0}.user-credentials>div{min-width:0;padding:10px;border:1px solid #d7e9e5;border-radius:7px;background:#f5fbfa}.user-credentials dt{margin:0 0 5px;color:#6d8287;font-size:.75rem;font-weight:800}.user-credentials dd{margin:0;overflow:hidden;color:#1b4d4b;font-size:.92rem;font-weight:850;text-overflow:ellipsis;white-space:nowrap}.danger-confirm-panel{border-color:#efc2c2!important}.danger-confirmation-icon{background:#fff0f0;color:#cf4141;box-shadow:inset 0 0 0 1px #efc2c2}.danger-confirm-panel .danger-warning{background:#fff3f3;color:#b53737}.danger-confirm-btn{min-width:116px;height:38px;padding:0 14px;background:linear-gradient(135deg,#ef6262,#d84141);box-shadow:0 8px 18px #d841413d;font-size:.94rem}.danger-confirm-btn:hover:not(:disabled){background:linear-gradient(135deg,#f47777,#c83838);box-shadow:0 11px 22px #d841414d}.app-toast{position:absolute;top:62px;left:50%;z-index:30;max-width:min(520px,calc(100vw - 32px));min-height:38px;display:flex;align-items:center;gap:10px;padding:8px 10px 8px 14px;border:1px solid #9fcfd0;border-radius:8px;background:#effaf8;color:#0c746b;font-weight:800;transform:translate(-50%);box-shadow:0 10px 24px #1c363d1f}.app-toast.error{border-color:#f0b8b8;background:#fff0f0;color:#c93c3c}.app-toast span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.toast-close{width:24px;height:24px;flex:0 0 auto;border:0;border-radius:6px;background:transparent;color:inherit;cursor:pointer;font-size:1rem;line-height:1}.toast-close:hover{background:rgba(15,159,143,.12)}.management-panel{position:absolute;top:62px;right:12px;left:12px;z-index:25;height:calc(100vh - 86px);display:flex;flex-direction:column;overflow:hidden;border:1px solid #d8e5e8;border-radius:8px;background:#fff;box-shadow:0 20px 50px #1b333a33}.projects-panel{position:absolute;top:62px;right:12px;z-index:26;width:min(560px,calc(100vw - 24px));max-height:calc(100vh - 86px);overflow:auto;padding:14px;border:1px solid #d8e5e8;border-radius:8px;background:#fff;box-shadow:0 20px 50px #1b333a33}.management-header{min-height:34px;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;color:#17262b}.management-header strong{font-size:1rem}.management-panel .management-header{min-height:64px;margin:0;padding:12px 16px;border-bottom:1px solid #e1ecee}.management-title-group{display:flex;flex-direction:column;gap:3px}.management-title-group strong{font-size:1.08rem}.management-title-group span{color:#72868b;font-size:.82rem;font-weight:700}.management-panel>.form-error{padding:8px 16px 0}.management-tabs{display:flex;gap:6px;padding:10px 16px;border-bottom:1px solid #e1ecee;background:#f8fbfb}.management-tab{min-height:34px;padding:0 13px;display:inline-flex;align-items:center;gap:7px;border:1px solid transparent;border-radius:7px;background:transparent;color:#64757c;cursor:pointer;font-family:inherit;font-size:.9rem;font-weight:850}.management-tab span{min-width:20px;padding:2px 6px;border-radius:999px;background:#e7eff0;color:#71858a;font-size:.72rem;line-height:1.1}.management-tab:hover{background:#edf7f5;color:#0c746b}.management-tab.active{border-color:#b7ddd7;background:#e6f5f1;color:#08766c}.management-tab.active span{background:#bfe4dc;color:#08766c}.management-content{flex:1;min-height:0;padding:16px;overflow:hidden}.management-users-layout,.management-project-layout{height:100%;min-height:0}.management-users-layout{display:grid;grid-template-columns:minmax(250px,300px) minmax(0,1fr);gap:16px}.management-card{min-width:0;display:flex;flex-direction:column;gap:10px;padding:12px;border:1px solid #d8e5e8;border-radius:8px;background:#f7fbfc}.management-card h2{margin:0 0 2px;color:#17262b;font-size:.95rem;letter-spacing:0}.card-heading{display:flex;flex-direction:column;gap:3px}.card-heading p{margin:0;color:#72868b;font-size:.8rem;font-weight:650;line-height:1.35}.inline-heading{flex-direction:row;align-items:flex-start;justify-content:space-between;gap:12px}.list-count{flex:0 0 auto;padding:4px 8px;border-radius:999px;background:#e7f2f1;color:#28776d;font-size:.76rem;font-weight:800}.management-card .management-search{width:min(250px,42%);height:34px;flex:0 1 250px}.user-list-tools{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0}.user-list-tools .management-search{width:220px;min-width:0}.back-to-users-btn{min-height:34px;padding:0 11px;flex:0 0 auto;border:1px solid #c6ded9;border-radius:7px;background:#fff;color:#16776b;cursor:pointer;font-family:inherit;font-size:.84rem;font-weight:800}.back-to-users-btn:hover{border-color:#8ec5bb;background:#edf8f6}.create-user-card{align-self:start}.small-btn{width:100%;min-width:0;height:38px;margin-top:4px;font-size:.94rem}.user-list-card,.projects-card{min-height:0}.user-list-card{overflow:hidden}.user-table-head,.management-user-row{display:grid;grid-template-columns:minmax(160px,1fr) 132px minmax(280px,.9fr);gap:12px;align-items:center}.user-table-head{padding:0 9px;color:#768a8f;font-size:.76rem;font-weight:800}.user-list-scroll{display:flex;flex:1;min-height:0;flex-direction:column;gap:8px;overflow:auto;padding-right:3px}.management-user-row{min-width:0;padding:10px;border:1px solid #e2ecef;border-radius:7px;background:#fff}.user-identity{min-width:0;display:flex;flex-direction:column;gap:3px;padding:0;border:0;background:transparent;color:inherit;cursor:pointer;font-family:inherit;text-align:left}.user-identity strong,.user-identity span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.user-identity strong{color:#223e45;font-size:.92rem}.user-identity span,.role-label{color:#72868b;font-size:.78rem}.user-identity:hover strong{color:#08766c;text-decoration:underline}.user-identity:focus-visible{outline:3px solid rgba(15,159,143,.22);outline-offset:3px;border-radius:4px}.management-user-row select{height:36px}.role-label{font-weight:800}.user-actions{display:flex;align-items:center;justify-content:flex-end;gap:6px;min-width:0}.delete-user-btn{border-color:#efc3c3;color:#bf4545}.delete-user-btn:hover{border-color:#e69d9d;background:#fff2f2;color:#a93434}.projects-card{height:100%;overflow:hidden}.management-project-list{flex:1;min-height:0;overflow:auto;padding-right:3px}.project-list{display:flex;flex-direction:column;gap:8px}.empty-state{padding:18px;border:1px dashed #cfe2e5;border-radius:8px;color:#64757c;text-align:center;background:#f7fbfc}.list-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px;border:1px solid #e2ecef;border-radius:7px;background:#fff}.list-row>div:first-child{min-width:0;display:flex;flex-direction:column;gap:2px}.list-row strong,.list-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.list-row span,.muted-text{color:#64757c;font-size:.82rem}.reset-row{display:flex;align-items:center;gap:6px}.reset-row input{width:100%;min-width:0}.project-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}.project-row .header-icon-btn{flex:0 0 auto}.danger-btn{border-color:#f0b8b8;color:#c93c3c}.danger-btn:hover{background:#fff0f0;color:#b72f2f}.app-container{--surface:#fff;--surface-soft:#f6fafb;--line:#d8e5e8;--text:#17262b;--muted:#64757c;--primary:#0f9f8f;--primary-dark:#08766c;--accent:#ffb84d;--terminal:#122027;--terminal-line:#20343d;--code-bg:#fbfdff;display:flex;flex-direction:column;height:100vh;min-width:0;font-family:Inter,Microsoft YaHei,PingFang SC,Segoe UI,Arial,sans-serif;background:radial-gradient(circle at 14% 12%,rgba(255,184,77,.16),transparent 24%),linear-gradient(135deg,#edf7f6 0%,#f7fbfd 45%,#eef4f8 100%);color:var(--text)}.app-header{min-height:56px;padding:7px 18px;display:grid;grid-template-columns:minmax(260px,1fr) auto;align-items:center;gap:16px;background:rgba(255,255,255,.9);border-bottom:1px solid rgba(184,205,211,.72);box-shadow:0 8px 20px #2140480f;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);z-index:20}.header-left,.file-controls,.header-controls,.font-size-controls,.canvas-controls{display:flex;align-items:center}.icon-sprite{position:absolute;width:0;height:0;overflow:hidden}.svg-icon{width:20px;height:20px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.header-left{gap:10px;min-width:0;justify-content:flex-start}.brand-mark{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;background:linear-gradient(135deg,#0f9f8f,#2d7dd2);color:#fff;font-weight:900;letter-spacing:0;box-shadow:0 8px 18px #0f9f8f3d}.brand-copy{min-width:0}.brand-title-row{display:flex;align-items:center;gap:12px;min-width:0}.logo{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:1.1rem;line-height:1.2;font-weight:850;letter-spacing:0;color:var(--text)}.user-line{display:flex;align-items:center;gap:10px;flex:0 0 auto;min-width:0;color:#50666d;font-size:.9rem;font-weight:800;line-height:1.1}.user-line span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.user-line>span+span:before{content:"";display:inline-block;width:4px;height:4px;margin:0 8px 1px 0;border-radius:999px;background:#a8b6bc;vertical-align:middle}.user-line button{padding:0;border:0;background:transparent;color:#0c746b;cursor:pointer;font:inherit}.user-line button:hover{color:#095e57;text-decoration:underline}.account-summary{display:flex;flex-direction:column;gap:3px;min-width:0}.user-line .account-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#27464d;font-size:1rem;font-weight:850;line-height:1.05}.user-line .account-role{color:#71858a;font-size:.76rem;font-weight:750;line-height:1}.user-line .login-entry-btn{min-width:76px;min-height:36px;padding:0 18px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;border:1px solid #abd9d0;border-radius:8px;background:#e4f5f1;color:#147568;cursor:pointer;font-family:inherit;font-size:1rem;font-weight:850;line-height:1;letter-spacing:.04em;text-decoration:none;box-shadow:0 2px 5px #18716714}.user-line .login-entry-btn:hover{border-color:#83c7ba;background:#d5efe9;color:#0c665a;text-decoration:none;box-shadow:0 4px 9px #1871671f}.user-line .login-entry-btn:focus-visible{outline:3px solid rgba(15,159,143,.25);outline-offset:2px}.file-controls,.header-controls{gap:6px}.header-controls{justify-content:flex-end}.icon-btn,.run-btn,.tab-create-btn,.tab-close-btn{font-family:inherit;border:0;cursor:pointer;transition:background-color .18s ease,border-color .18s ease,color .18s ease,transform .18s ease,box-shadow .18s ease}.icon-btn{width:37px;height:37px;padding:0;display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--muted);font-size:1.1rem;font-weight:800;line-height:1}.icon-btn .icon{font-size:.72rem;letter-spacing:0}.icon-btn .svg-icon{width:19px;height:19px}.icon-btn:hover{background:#e8f2f3;color:var(--text)}.theme-toggle{border-color:transparent;background:transparent;color:#4d6970}.theme-emoji{font-size:1.23rem;line-height:1;filter:saturate(.95)}.theme-toggle:hover{border-color:transparent;background:#eef6f7;color:var(--primary-dark);box-shadow:none}.icon-btn:active,.tab-create-btn:active,.run-btn:active:not(:disabled){transform:translateY(1px)}.header-icon-btn{width:auto;height:36px;gap:7px;padding:0 10px;border-color:transparent;background:transparent;color:#365057;font-size:.98rem;box-shadow:none}.header-icon-btn:hover{border-color:#d5e4e7;background:#f3fbfa;color:#0c746b}.btn-text,.run-symbol{font-weight:800}.run-btn .svg-icon{width:21px;height:21px;stroke-width:2.4}.run-btn{min-width:124px;height:40px;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:0 16px;border-radius:9px;background:linear-gradient(135deg,#13ad91,#0f8f83);color:#fff;font-size:1rem;font-weight:850;box-shadow:0 9px 20px #0f8f833d}.run-btn:hover:not(:disabled){background:linear-gradient(135deg,#16bfa0,#0c7d73);box-shadow:0 14px 30px #0f8f8357}.stop-btn{background:linear-gradient(135deg,#f06464,#d94747);box-shadow:0 12px 26px #d947473d}.stop-btn:hover:not(:disabled){background:linear-gradient(135deg,#f47777,#c83838)}.stop-btn .svg-icon{width:23px;height:23px}.run-btn:disabled{cursor:not-allowed;opacity:.62;box-shadow:none}.small-btn{min-width:90px;height:33px;padding:0 11px;border-radius:8px;font-size:.92rem}.main-content{flex:1;min-height:0;display:flex;position:relative;gap:8px;padding:6px 8px 8px;overflow:hidden}.editor-pane,.preview-pane{min-width:0;overflow:hidden;border:1px solid rgba(184,205,211,.75);border-radius:7px;background:var(--surface);box-shadow:0 12px 28px #1c363d14}.editor-pane{display:flex;flex-direction:column;transition:width .1s ease}.preview-pane{display:flex;flex-direction:column;transition:width .1s ease;background:#f7fbfc}.pane-header{min-height:34px;padding:4px 12px;display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--surface-soft);border-bottom:1px solid var(--line);-webkit-user-select:none;user-select:none}.pane-title{min-width:0;display:flex;align-items:center}.pane-title strong{color:var(--text);font-size:.94rem;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pane-kicker{color:var(--primary-dark);font-size:.72rem;font-weight:850;letter-spacing:0}.font-size-controls,.canvas-controls{gap:5px;flex:0 0 auto}.divider{width:1px;height:18px;margin:0 1px;background:var(--line)}.tab-create-btn{height:33px;display:inline-flex;align-items:center;gap:7px;padding:0 11px;border:1px solid #cfe2e5;border-radius:7px;background:#fff;color:#24494f;font-size:.95rem;font-weight:850}.tab-create-btn .svg-icon{width:18px;height:18px;stroke-width:2.4}.tab-create-btn:hover{border-color:#9fcfd0;background:#effaf8;color:var(--primary-dark)}.tab-create-icon{font-size:1.05rem;line-height:1}.editor-tabs{min-height:38px;padding:4px 8px 0;display:flex;align-items:flex-end;gap:8px;background:#eaf3f5;border-bottom:1px solid var(--line)}.tabs-scroll{flex:1;min-width:0;display:flex;align-items:flex-end;gap:7px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}.tabs-scroll::-webkit-scrollbar{display:none}.editor-tab-actions{align-self:center;padding-bottom:2px}.editor-tab-actions .icon-btn{width:33px;height:33px;border-radius:7px;font-size:1.05rem}.editor-tab-actions .icon-btn .svg-icon{width:18px;height:18px}.editor-tab{height:29px;max-width:220px;min-width:88px;margin-bottom:-1px;padding:0 8px;display:inline-flex;align-items:center;gap:7px;border:1px solid #cddfe3;border-bottom-color:var(--line);border-radius:7px 7px 0 0;background:#dfecef;color:#4f6570;cursor:pointer}.editor-tab:hover{background:#edf6f7;color:var(--text)}.editor-tab.active{height:33px;background:var(--code-bg);border-color:#aecfd3;border-bottom-color:var(--code-bg);color:var(--text);box-shadow:0 -4px 12px #325c680f}.file-dot{width:7px;height:7px;flex:0 0 auto;border-radius:999px;background:#a8b6bc}.editor-tab.active .file-dot{background:var(--primary)}.tab-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.88rem;font-weight:750}.tab-rename-input{width:128px;min-width:0;padding:5px 7px;border:1px solid #98c7cc;border-radius:7px;outline:none;background:#fff;color:var(--text);font-size:.86rem;font-weight:700}.tab-close-btn{width:22px;height:22px;flex:0 0 auto;display:inline-grid;place-items:center;border-radius:6px;background:transparent;color:inherit;font-size:1.16rem;line-height:1}.tab-close-btn:hover{background:rgba(226,85,85,.12);color:#bc3333}.editor-wrapper{flex:1;min-height:0;position:relative;overflow:hidden;background:var(--code-bg)}.editor-wrapper>div,.cm-editor{width:100%!important;height:100%!important}.cm-scroller{overflow:auto}body:not(.dark-mode) .cm-editor .cm-selectionLayer{display:none!important}body:not(.dark-mode) .cm-editor .cm-line::selection,body:not(.dark-mode) .cm-editor .cm-line ::selection,body:not(.dark-mode) .cm-editor .cm-content::selection,body:not(.dark-mode) .cm-editor .cm-content ::selection{background:#b7d8ff!important;background-color:#b7d8ff!important}.resizer{position:absolute;top:6px;bottom:8px;width:10px;margin-left:-5px;cursor:col-resize;z-index:10}.resizer:after{content:"";position:absolute;top:50%;left:50%;width:4px;height:54px;border-radius:999px;background:#b8ced3;transform:translate(-50%,-50%)}.resizer:hover:after{background:var(--primary)}body.resizing,body.resizing-v{-webkit-user-select:none;user-select:none}body.resizing{cursor:col-resize}body.resizing-v{cursor:row-resize}.console-container,.canvas-container{min-height:120px;display:flex;flex-direction:column}.console-container{background:var(--terminal);color:#d7e4e7}.console-header{background:#182932;border-bottom-color:var(--terminal-line)}.console-header .pane-title strong,.console-header .pane-kicker{color:#e8f7f4}.console-header .clear-btn{color:#9eb3ba;opacity:.95}.console-header .clear-btn .svg-icon{width:20px;height:20px;stroke-width:2.25}.console-header .clear-btn:hover{background:rgba(255,255,255,.08)!important;color:#e8f7f4!important}.console-wrapper{flex:1;min-height:0;padding:10px 12px;overflow-y:auto;outline:none;font-family:Cascadia Mono,Consolas,Monaco,Courier New,monospace;line-height:1.22;letter-spacing:0;background:var(--terminal)}.console-wrapper pre{color:#d7e4e7;font-family:inherit;font-size:inherit;line-height:inherit}.terminal-output{margin:0;display:inline;color:#d7e4e7;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word}.terminal-input-line{display:inline-flex;align-items:baseline;max-width:100%;color:#9df0dd;vertical-align:middle}.terminal-input-field{width:14ch;min-width:120px;flex:1 1 14ch;margin:0;padding:0;border:none;outline:none;background:transparent;color:#9df0dd;caret-color:#fff;font-family:inherit;font-size:inherit;font-weight:800}.error-text{color:#ff8585!important}.input-text{color:#9df0dd}.vertical-resizer{height:7px;flex:0 0 7px;position:relative;cursor:row-resize;background:#e8f2f4;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.vertical-resizer:after{content:"";position:absolute;top:50%;left:50%;width:44px;height:4px;border-radius:999px;background:#b8ced3;transform:translate(-50%,-50%)}.vertical-resizer:hover:after{background:var(--primary)}.canvas-container{position:relative;background:#fff;transition:all .25s ease}.canvas-container.fullscreen{position:fixed;top:0;right:0;bottom:0;left:0;width:100vw;height:100vh!important;z-index:2000;border-radius:0;background:#fff}.canvas-container.collapsed{height:52px!important;min-height:52px;flex:0 0 52px;overflow:hidden}.canvas-container.collapsed .canvas-wrapper{display:none}.canvas-wrapper{flex:1;min-height:0;position:relative;display:flex;justify-content:center;align-items:center;overflow:hidden;padding:4px;background:linear-gradient(90deg,rgba(15,159,143,.07) 1px,transparent 1px),linear-gradient(rgba(15,159,143,.07) 1px,transparent 1px),#fbfdfd;background-size:28px 28px}#turtle-canvas-container{display:none;position:relative;z-index:1;overflow:hidden;border:1px solid #cddfe3;border-radius:4px;background:#fff;box-shadow:0 8px 20px #1d3e451a}#turtle-canvas-container:not(:empty){display:block}#turtle-canvas-container canvas{display:block;border:0;border-radius:0;max-width:none;max-height:none;background:transparent!important}.custom-context-menu{position:fixed;z-index:9999;min-width:172px;margin:0;padding:6px;list-style:none;border:1px solid #d7e4e7;border-radius:8px;background:#fff;box-shadow:0 18px 40px #1b333a2e}.custom-context-menu li{min-height:34px;padding:0 10px;display:flex;align-items:center;gap:9px;border-radius:7px;color:#263f46;cursor:pointer;font-size:.9rem}.custom-context-menu li:hover{background:#eef8f7}.custom-context-menu .menu-icon{width:18px;height:18px;color:var(--primary-dark)}.custom-context-menu .menu-text{flex:1}.custom-context-menu .menu-shortcut{color:#8a9aa0;font-size:.78rem}.custom-context-menu .menu-divider{min-height:1px;height:1px;margin:5px 2px;padding:0;background:#e2ecef;cursor:default}.clear-btn:hover{background:#ffecec!important;color:#c93c3c!important}body.dark-mode .app-container{--surface:#16232b;--surface-soft:#1d2c35;--line:#304650;--text:#edf7f8;--muted:#9fb3ba;--primary:#49d2bf;--primary-dark:#72e0d0;--code-bg:#111a20;--terminal:#071115;--terminal-line:#1b313a;background:linear-gradient(135deg,#0d171c 0%,#12222a 54%,#17262c 100%);color:var(--text)}body.dark-mode .app-header,body.dark-mode .editor-pane,body.dark-mode .preview-pane{background:rgba(22,35,43,.94);border-color:#304650;box-shadow:0 18px 42px #00000038}body.dark-mode .logo,body.dark-mode .pane-title strong{color:var(--text)}body.dark-mode .icon-btn{color:var(--muted)}body.dark-mode .header-icon-btn,body.dark-mode .tab-create-btn{background:#1c2c35;border-color:#38525d;color:#dceff2}body.dark-mode .header-icon-btn:hover,body.dark-mode .tab-create-btn:hover,body.dark-mode .icon-btn:hover{background:#243944;color:#fff}body.dark-mode .theme-toggle{border-color:transparent;background:transparent;color:#ffcf70;box-shadow:none}body.dark-mode .theme-toggle:hover{border-color:transparent;background:#243944;color:#ffe0a0;box-shadow:none}body.dark-mode .editor-tabs,body.dark-mode .vertical-resizer{background:#1a2a33;border-color:var(--line)}body.dark-mode .editor-tab{background:#243640;border-color:#38525d;color:#b8cbd1}body.dark-mode .editor-tab.active{background:var(--code-bg);border-color:#4c6d78;border-bottom-color:var(--code-bg);color:#f5fbfc}body.dark-mode .tab-rename-input,body.dark-mode .custom-context-menu{background:#111a20;border-color:#38525d;color:#edf7f8}body.dark-mode .custom-context-menu li{color:#dceff2}body.dark-mode .custom-context-menu li:hover{background:#213640}body.dark-mode .custom-context-menu .menu-divider{background:#304650}body.dark-mode .canvas-container,body.dark-mode .canvas-wrapper{background-color:#111a20}body.dark-mode .canvas-wrapper{background:linear-gradient(90deg,rgba(73,210,191,.08) 1px,transparent 1px),linear-gradient(rgba(73,210,191,.08) 1px,transparent 1px),#111a20;background-size:28px 28px}body.dark-mode #turtle-canvas-container{border-color:#42636d;background:#fff}@media (max-width:760px){.app-header{grid-template-columns:1fr auto}.file-controls{grid-column:1 / -1;justify-content:flex-start}.main-content{flex-direction:column;overflow-y:auto}.editor-pane,.preview-pane{width:100%!important;min-height:380px}.preview-pane{min-height:460px}.resizer{display:none}}@media (max-width:620px){.app-header{min-height:auto;grid-template-columns:1fr;gap:8px;padding:8px}.header-controls,.file-controls{justify-content:stretch}.run-btn,.header-icon-btn{flex:1}.pane-header{align-items:flex-start;flex-direction:column}.editor-tabs{align-items:flex-start;flex-direction:column;padding:6px 8px 0}.editor-tab-actions{align-self:flex-start;padding-bottom:6px}.font-size-controls,.canvas-controls{max-width:100%;flex-wrap:wrap}}:root{font-family:Inter,Microsoft YaHei,PingFang SC,Segoe UI,Arial,sans-serif;color:#17262b;background:#eef4f8;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html,body,#app{width:100%;height:100%}body{margin:0;min-width:320px;min-height:100vh}button,input{font:inherit}