:root{--ink:#172033;--muted:#64748b;--blue:#2563eb;--green:#059669;--bg:#f3f6fb;--card:#fff;--line:#dbe3ef;--red:#dc2626}
*{box-sizing:border-box}body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;color:var(--ink);background:var(--bg)}
header{min-height:92px;padding:18px clamp(18px,4vw,56px);display:flex;align-items:center;gap:18px;color:#fff;background:linear-gradient(120deg,#143b73,#2563eb)}
.brand{background:#fff;color:#17458a;text-decoration:none;font-weight:800;padding:12px;border-radius:12px}h1{font-size:clamp(22px,3vw,32px);margin:0}header p{margin:4px 0 0;opacity:.85}header button{margin-left:auto}
button{border:0;border-radius:9px;padding:11px 15px;font-weight:700;cursor:pointer;background:#dce8fa;color:#17345c}button:hover{filter:brightness(.97)}button:disabled{opacity:.55;cursor:not-allowed}.primary{background:var(--green);color:#fff}.secondary{background:#fff;color:#17458a}.ghost{background:transparent;border:1px solid var(--line)}
.loading{padding:10px;text-align:center;background:#fff5cc;color:#704b00;font-weight:700}.loading.ready{background:#dff8ed;color:#075d43}.loading.error{background:#fee2e2;color:#991b1b}.loading span{display:inline-block;width:12px;height:12px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
main{display:grid;grid-template-columns:280px 1fr;max-width:1500px;margin:auto;min-height:calc(100vh - 160px)}aside{background:#fff;border-right:1px solid var(--line);padding:24px 18px}label{display:block;font-size:13px;font-weight:800;margin-bottom:7px}input{width:100%;padding:12px;border:1px solid #bac7d8;border-radius:9px;font-size:15px}.progress-wrap{margin:22px 0}.progress-text{display:flex;justify-content:space-between;font-size:13px}.progress{height:8px;background:#e5eaf2;border-radius:8px;margin-top:8px;overflow:hidden}.progress i{display:block;height:100%;width:0;background:var(--green);transition:.3s}
.chapter{margin:9px 0}.chapter-title{font-size:12px;font-weight:800;color:var(--muted);text-transform:uppercase;margin:16px 7px 5px}.problem-link{display:flex;width:100%;text-align:left;background:transparent;padding:9px 8px;gap:8px}.problem-link.active{background:#e9f1ff;color:#174c9a}.problem-link.done:before{content:"✓";color:var(--green);font-weight:900}.problem-link:not(.done):before{content:"○";color:#94a3b8}.privacy{margin-top:24px;font-size:12px;line-height:1.5;color:var(--muted)}
.workspace{padding:clamp(20px,3vw,42px);min-width:0}.problem-head{display:flex;justify-content:space-between;gap:15px;align-items:start}.problem-head h2{margin:5px 0 15px}.tag{font-size:12px;color:var(--blue);font-weight:800;text-transform:uppercase}.score{white-space:nowrap;background:#e8edf5;padding:10px 14px;border-radius:20px;font-weight:800}.score.full{background:#dff8ed;color:#067052}.statement{background:var(--card);border:1px solid var(--line);padding:18px;border-radius:12px;line-height:1.58}.statement pre,.io{background:#f5f7fa;padding:10px;border-radius:7px;overflow:auto}.io-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}details{margin:13px 0 20px;background:#fff8dc;padding:12px 15px;border-radius:9px}summary{cursor:pointer;font-weight:750}
.editor-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:18px}.panel-title{font-size:13px;font-weight:800;margin-bottom:7px}textarea,pre#console{width:100%;height:320px;margin:0;border-radius:10px;border:1px solid #273449;background:#101827;color:#e6edf7;padding:15px;font:14px/1.55 Consolas,monospace;tab-size:4}textarea{resize:vertical}.actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}#results{margin-top:12px}.test{border-left:5px solid #94a3b8;background:#fff;padding:10px 12px;margin:7px 0;border-radius:7px;font-size:13px}.test.ok{border-color:var(--green)}.test.bad{border-color:var(--red)}.test b{display:block;margin-bottom:3px}.pager{display:flex;justify-content:space-between;margin-top:25px}
footer{text-align:center;padding:20px;color:var(--muted);background:#fff;border-top:1px solid var(--line)}footer a{color:var(--blue)}
.ad{max-width:1180px;min-height:90px;margin:18px auto;overflow:hidden;padding:0 12px}
@media(max-width:900px){main{grid-template-columns:1fr}aside{border-right:0;border-bottom:1px solid var(--line)}#chapters{columns:2}.editor-grid{grid-template-columns:1fr}header{flex-wrap:wrap}header button{margin-left:0}.io-grid{grid-template-columns:1fr}}
@media(max-width:560px){#chapters{columns:1}.workspace{padding:18px}header{align-items:flex-start}.secondary{width:100%}}