/* Eduson Kids design book: shared workspace components. */
body{background:var(--ek-bg);font-weight:400}
.p-head,.s-head{background:#fff;border-bottom:1px solid var(--line)}
.back,.s-side-toggle{font:700 13px var(--f-display);min-height:40px;border-radius:12px;background:var(--ek-bg);box-shadow:inset 0 0 0 1px var(--line)}
.back:hover,.s-side-toggle:hover{box-shadow:inset 0 0 0 1px var(--violet);color:var(--violet-ink)}
.p-head .wrap{max-width:1280px}.p-head .row{padding:17px 0}
.p-head .chip,.chip-age{font:600 12px var(--f-ui);background:var(--violet-soft);color:var(--violet-ink);border-radius:10px;padding:8px 12px}
.stepper{gap:9px;padding-bottom:15px}.step{min-height:42px;border-radius:12px;font-weight:700;background:var(--ek-bg);box-shadow:none;padding:8px 15px 8px 9px}.step:hover{box-shadow:inset 0 0 0 1px var(--violet)}.step.active{background:var(--violet);color:var(--ink);box-shadow:none}.step .s-ico{background:#fff;border-radius:8px}.step.active .s-ico{background:#ffffff50}
.p-main{padding-top:25px}.p-main>.wrap{max-width:1280px}.grid2{gap:20px}
.task-card,.panel-code,.out-stage,.sok-form,.sok-out{background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1);border-radius:24px}.task-card{padding:22px 24px}.task-card .t-ico{background:var(--mint);box-shadow:none;border-radius:13px}.task-card h2{font-size:25px;letter-spacing:-.02em}.task-card .t-chip{background:var(--ek-green-pale);color:var(--mint-ink);border-radius:8px;padding:7px 10px}
.task-intro{font-size:14px;line-height:1.7}.task-intro .tip{background:var(--violet-soft);color:var(--violet-ink);font-weight:500}.task-hint{background:var(--ek-bg);border:1px solid var(--line)}.task-hint summary{font-weight:700}.task-hint summary::after{border-radius:6px}
.code-head,.out-stage .stage-head{min-height:47px;background:#fff;padding:12px 18px}.code-head .dots i:nth-child(n){background:var(--violet);width:8px;height:8px}.code-head .fname{margin-left:5px;font-weight:500}.out-stage .stage-head .led{background:var(--mint);box-shadow:none;width:8px;height:8px}.toolbar{background:var(--ek-bg);padding:13px;gap:8px}.toolbar .btn{font-size:13px;padding:12px 14px}.toolbar #btn-run{background:var(--mint);color:var(--ink)}.toolbar #btn-run:hover{background:var(--ek-green-soft)}
.cm-editor,.cm-gutters{background:#fff!important}.cm-activeLine,.cm-activeLineGutter{background:var(--ek-violet-bg)!important}.cm-focused{outline:none!important}.cm-editor:focus-within{box-shadow:inset 0 0 0 2px var(--violet-soft)}
.sok-form,.sok-out{padding:25px}.sok-field input{border:1px solid var(--line);min-height:44px;border-radius:12px}.sok-form h3,.sok-out h3{font-size:20px}.sok-preview{background:var(--ink)}
.s-head{padding:12px 20px;gap:12px}.s-head .brand{margin-left:6px}.s-side{background:var(--ek-bg);padding:20px 14px;width:300px}.s-side .lead{font-size:20px;margin-bottom:4px}.s-task{border:2px solid var(--line);border-radius:18px;box-shadow:none;padding:16px 12px;background:#fff}.s-task:hover{box-shadow:none;border-color:var(--ek-violet-soft);transform:translateY(-1px)}.s-task.active{border-color:var(--violet);background:var(--violet-soft);box-shadow:none}.s-task .ico{background:var(--mint);box-shadow:none;border-radius:12px}.s-task .tt{font-size:15px}.s-task .ds{font-weight:400;line-height:1.5;margin-top:6px}.s-task.new .ico{background:var(--violet-soft)}.s-side-toggle[aria-expanded="true"]{background:var(--violet-soft);color:var(--violet-ink);box-shadow:inset 0 0 0 1px var(--violet)}.s-cam{background:var(--ek-gray-light);color:var(--ink-soft);border-radius:6px}.s-note{font-weight:400;font-size:12px}.s-stage{background:var(--ek-bg)}
@media(max-width:760px){.p-head .row{gap:10px;flex-wrap:wrap;padding:12px 0}.p-head .brand{margin-left:auto}.p-head .sp{display:none}.p-head .chip{display:none}.p-head .brand-mark{width:30px;height:30px;font-size:13px}.p-head .brand-text{font-size:16px}.task-card{padding:18px}.task-card h2{font-size:22px}.task-card .t-top{gap:9px;flex-wrap:wrap}.task-card .t-chip{margin-left:0}.p-main{padding-top:18px}.sok-form,.sok-out{padding:20px}}
@media(max-width:540px){.s-head{gap:7px;padding:10px}.s-head .brand-text{display:none}.s-head .brand{margin-left:auto}.s-head .sp{display:none}.s-head .brand-mark{width:32px;height:32px;font-size:14px}.s-head .back,.s-side-toggle{font-size:12px;padding:9px}.s-side-toggle>span:first-child{display:none}}

#toast{visibility:hidden}#toast.show{visibility:visible}