body{font-family:system-ui;margin:0;background:#0b1220;color:#e8eefc} .wrap{max-width:1100px;margin:0 auto;padding:24px} .header{background:#121a2b;border:1px solid #24314d;border-radius:18px;padding:18px} .sub{color:#a8b3cf} .toolbar{display:flex;gap:10px;flex-wrap:wrap} .btn{border:1px solid #24314d;background:rgba(255,255,255,.03);color:#e8eefc;padding:10px 12px;border-radius:12px;cursor:pointer;font-weight:650} .btn.primary{border-color:rgba(59,130,246,.55);background:rgba(59,130,246,.15)} .status{margin-top:12px;padding:10px 12px;border-radius:12px;border:1px dashed rgba(168,179,207,.35);color:#a8b3cf} .status.good{border-color:rgba(31,143,95,.6);color:rgba(190,255,224,.95)} .status.bad{border-color:rgba(197,60,60,.6);color:rgba(255,210,210,.95)} .main{display:grid;grid-template-columns:1fr 1.4fr;gap:16px;margin-top:16px} @media(max-width:950px){.main{grid-template-columns:1fr}} .panel,.zone{background:rgba(18,26,43,.78);border:1px solid #24314d;border-radius:18px;padding:14px} .hint{color:#a8b3cf;font-size:13px} .pool,.drop{min-height:160px;padding:10px;border:1px dashed rgba(168,179,207,.35);border-radius:14px;background:rgba(15,23,38,.35);display:flex;flex-wrap:wrap;gap:10px;align-content:flex-start} .drop.over,.pool.over{outline:2px solid rgba(59,130,246,.45)} .zones{display:grid;gap:12px} .card{user-select:none;border:1px solid rgba(168,179,207,.25);background:rgba(255,255,255,.04);padding:9px 10px;border-radius:12px;cursor:grab;font-size:13px} .card.correct{border-color:rgba(31,143,95,.55);background:rgba(31,143,95,.12)} .card.wrong{border-color:rgba(197,60,60,.55);background:rgba(197,60,60,.12)} .card.dim{opacity:.7} .foot{margin-top:18px;color:#a8b3cf;font-size:12px;text-align:center}