:root{
  --bg:#06111d;--bg2:#0b1d2d;--panel:#10283b;--panel2:#17374e;--border:#2a5771;
  --text:#f7fbff;--muted:#93b2c6;--accent:#22c55e;--blue:#2563eb;--cyan:#0891b2;
  --purple:#7c3aed;--orange:#c2410c;--yellow:#facc15;--danger:#ef4444;
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:linear-gradient(180deg,var(--bg),var(--bg2));color:var(--text)}
button,a{font:inherit}button{cursor:pointer}
.topbar{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:22px max(18px,calc((100% - 1560px)/2));border-bottom:1px solid var(--border);background:#081724}
.topbar h1{margin:4px 0 6px;font-size:clamp(26px,4vw,40px)}.topbar p{margin:0;color:var(--muted)}
.eyebrow,.mini{font-size:11px;letter-spacing:.14em;color:#93c5fd;font-weight:800}
.levels{display:flex;gap:8px;flex-wrap:wrap}.levels a{text-decoration:none;color:var(--text);padding:9px 12px;border:1px solid var(--border);border-radius:9px;background:var(--panel)}.levels a.active{border-color:#93c5fd;color:#bfdbfe}
.app-shell{max-width:1560px;margin:auto;display:grid;grid-template-columns:290px minmax(0,1fr) 360px;gap:18px;padding:18px}
.panel{background:rgba(16,40,59,.97);border:1px solid var(--border);border-radius:18px;padding:17px}
.toolbox,.program-panel{align-self:start}.panel-title{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}.panel-title h2{margin:4px 0 10px}
.group{display:grid;gap:8px;margin-top:16px}.group h3{margin:0 0 4px;font-size:13px;color:var(--muted)}
.block{border:1px solid transparent;color:white;padding:11px 12px;border-radius:10px;text-align:left;font-weight:800}.block.move{background:var(--blue)}.block.turn{background:#0f766e}.block.logic{background:var(--purple)}.block.logic.alt{background:#6d28d9}.block.loop{background:var(--orange)}
.concept-card,.lesson-card{margin-top:17px;padding:12px;background:#0c1d2b;border:1px solid var(--border);border-radius:11px}.concept-card span,.lesson-card span{display:block;font-size:10px;color:var(--muted);text-transform:uppercase}.concept-card strong{display:block;margin-top:4px}.concept-card p,.lesson-card p{color:var(--muted);font-size:12px;line-height:1.45;margin-bottom:0}
.center{display:grid;gap:14px;min-width:0}.challenge-top{display:flex;justify-content:space-between;gap:15px;align-items:flex-start}.challenge h2{margin:4px 0 5px}.challenge p{color:var(--muted);margin:0}.score-box{min-width:110px;background:var(--panel2);border:1px solid var(--border);border-radius:10px;padding:10px;text-align:center}.score-box span{display:block;color:var(--muted);font-size:10px}.score-box strong{display:block;font-size:28px;color:#86efac}
.progress{margin-top:14px}.progress-labels{display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}.bar{height:9px;background:#0b1b29;border-radius:99px;overflow:hidden;margin-top:6px}.bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#22c55e,#84cc16);transition:.25s}
.maze-head{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}.status span{display:block;font-size:10px;color:var(--muted)}.status strong{display:block;margin-top:3px}.telemetry{display:flex;gap:15px;color:var(--muted);font-size:12px}
.maze-wrap{display:flex;justify-content:center;background:#061018;border:1px solid var(--border);border-radius:14px;padding:12px;overflow:auto;margin-top:12px}
canvas{display:block;width:min(100%,640px);height:auto;border-radius:10px;background:#061017}
.legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:11px;color:var(--muted);font-size:12px}
.feedback h2{margin:4px 0 5px}.feedback p{margin:0;color:var(--muted);line-height:1.5}
.start-block{padding:10px 12px;border-radius:10px;background:var(--accent);color:#052e16;font-weight:900;margin-bottom:8px}
.program-list{margin:0;padding-left:24px;display:grid;gap:7px;max-height:460px;overflow:auto}
.program-list li{padding:9px 10px;border-radius:9px;background:var(--panel2);border:1px solid var(--border);font-size:13px;cursor:pointer}.program-list li.active{border-color:var(--yellow);box-shadow:0 0 0 1px var(--yellow) inset}.program-list li.logic{border-left:4px solid var(--purple)}.program-list li.loop{border-left:4px solid var(--orange)}
.empty-program{padding:14px;text-align:center;color:var(--muted);font-size:12px;border:1px dashed var(--border);border-radius:10px}
.program-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}.program-actions button{border:1px solid var(--border);background:var(--panel2);color:var(--text);padding:10px;border-radius:9px}.program-actions .run{grid-column:1/-1;background:var(--accent);color:#052e16;border-color:transparent;font-weight:900}
.execution{margin-top:14px;padding:11px;background:#0b1b29;border:1px solid var(--border);border-radius:10px}.execution span{display:block;font-size:10px;color:var(--muted);text-transform:uppercase}.execution strong{display:block;margin-top:4px;font-size:12px;line-height:1.45}
footer{text-align:center;padding:20px;color:var(--muted);font-size:12px}
@media(max-width:1180px){.app-shell{grid-template-columns:280px 1fr}.program-panel{grid-column:1/-1}}
@media(max-width:800px){.app-shell{grid-template-columns:1fr}.program-panel{grid-column:auto}}
@media(max-width:520px){.app-shell{padding:10px}.panel{padding:13px}.program-actions{grid-template-columns:1fr}.program-actions .run{grid-column:auto}.levels{width:100%}.levels a{flex:1;text-align:center}}