:root{
  --bg:#0f172a;
  --card:#0b1220;
  --muted:#94a3b8;
  --text:#e2e8f0;
  --accent:#38bdf8;
  --accent2:#a78bfa;
  --good:#22c55e;
  --bad:#ef4444;
  --border:rgba(148,163,184,.2);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;background:linear-gradient(180deg,#0b1020,#0f172a);color:var(--text)}

header{padding:24px 16px;text-align:center}
h1{margin:0;font-size:clamp(1.6rem,2.6vw,2.2rem);letter-spacing:.5px}
.subtitle{color:var(--muted);margin:.35rem 0 0}

main{max-width:1100px;margin:0 auto;padding:16px;display:grid;grid-template-columns:280px 1fr;gap:16px}
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px;display:none;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.card.visible{display:block}

.sidebar h2{margin-top:0}
.sidebar ul{list-style:none;padding:0;margin:0}
.sidebar li{padding:6px 0;color:var(--muted)}
.badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.badge{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid var(--border);background:#0d1628}
.badge svg{width:16px;height:16px;fill:var(--accent)}

.content{display:grid;gap:16px}

.level-head h2{margin:.2rem 0 .25rem}
.level-head p{color:var(--muted);margin:.2rem 0 1rem}

.dragdrop{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pool{display:grid;gap:10px;border:1px dashed var(--border);border-radius:12px;padding:10px;min-height:240px}
.piece{padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:#0f1a2f;cursor:grab;user-select:none}
.piece:active{cursor:grabbing}
.slots{display:grid;gap:10px}
.slot{padding:10px;border:1px dashed var(--border);border-radius:10px;min-height:48px;display:flex;align-items:center}
.slot.filled{background:#0d1628;border-style:solid}
.slot.correct{border-color:var(--good)}
.slot.wrong{border-color:var(--bad)}

.feedback{min-height:28px;margin-top:10px;font-weight:600}
.feedback.ok{color:var(--good)}
.feedback.err{color:var(--bad)}

.csslab{display:grid;gap:12px}
.objective{background:#0d1628;border:1px solid var(--border);padding:10px;border-radius:10px}
.stage{background:#0d1628;border:1px solid var(--border);padding:12px;border-radius:10px;display:grid;gap:6px}
.stage .box{border:1px solid var(--border);padding:8px;border-radius:8px}
.stage .__target{outline:2px solid var(--accent);background:rgba(56,189,248,.15)}

.editor{display:flex;gap:8px;align-items:center}
.editor input{flex:1;padding:10px;border-radius:10px;border:1px solid var(--border);background:#0f1a2f;color:var(--text)}

.jslab{display:grid;gap:12px}
.console{display:grid;gap:8px}
textarea#jsCode{min-height:140px;width:100%;padding:10px;border-radius:10px;border:1px solid var(--border);background:#0f1a2f;color:var(--text);font-family:ui-monospace,Consolas,monospace}
.output{min-height:80px;background:#0d1628;border:1px solid var(--border);padding:10px;border-radius:10px;white-space:pre-wrap}
.sandbox{background:#0d1628;border:1px solid var(--border);padding:12px;border-radius:10px;display:grid;gap:6px}

.actions{display:flex;gap:10px;justify-content:flex-end;margin-top:10px}
.btn{padding:10px 14px;border-radius:10px;border:1px solid var(--border);background:#0f1a2f;color:var(--text);cursor:pointer}
.btn.primary{background:linear-gradient(90deg,#38bdf8,#a78bfa);border:none}
.btn:disabled{opacity:.6;cursor:not-allowed}

footer{padding:24px 16px;text-align:center;color:var(--muted)}

dialog{border:none;border-radius:12px;padding:16px;background:#0b1220;color:var(--text);border:1px solid var(--border)}