*{box-sizing:border-box}html,body{height:100%;margin:0}#app{width:100%;max-width:none;margin:0;padding:0}:root{--bg1:#0b1220;--bg2:#0a0f18;--panel: rgba(255,255,255,.06);--panel2: rgba(255,255,255,.04);--text:#eef3ff;--muted: rgba(238,243,255,.72);--cell: 96px;--grid-line: rgba(255,255,255,.35);--grid-line-strong: rgba(255,255,255,.55);--board-bg: rgba(255,255,255,.04);--board-border: rgba(255,255,255,.18);--dirt: #fbbf24;--clean: #34d399;--robot: #7dd3fc;--obs: #fb7185}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);background:radial-gradient(900px 500px at 20% 0%,rgba(125,211,252,.18) 0%,transparent 60%),radial-gradient(900px 500px at 80% 0%,rgba(251,191,36,.14) 0%,transparent 60%),linear-gradient(180deg,var(--bg1),var(--bg2))}.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.14);background:linear-gradient(180deg,#ffffff14,#ffffff08)}.topbar h1{margin:0;font-size:18px;letter-spacing:.2px}.controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap}select,button{font-size:14px;padding:10px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.22);background:#ffffff0f;color:var(--text);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}button{cursor:pointer}button:hover{border-color:#ffffff5c}button:active{transform:translateY(1px)}button:disabled{opacity:.5;cursor:not-allowed;transform:none}main{padding:18px;display:flex;justify-content:center}.boardWrap{width:min(1200px,100%);overflow:auto;padding:16px;border-radius:18px;border:1px solid var(--board-border);background:linear-gradient(180deg,var(--panel),var(--panel2));box-shadow:0 18px 60px #00000059,0 1px #ffffff0d inset}.board{display:grid;justify-content:center}.cell{width:var(--cell);height:var(--cell);border-radius:16px;background:linear-gradient(180deg,#ffffff14,#ffffff08);border:2px solid var(--grid-line);box-shadow:0 6px 16px #00000040,0 1px #ffffff0f inset;display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;transition:transform .06s ease,border-color .12s ease}.cell:hover{border-color:var(--grid-line-strong);transform:translateY(-1px)}.cell.dropTarget{outline:3px solid rgba(125,211,252,.85);outline-offset:2px}.cell.dirt{background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.28),transparent 55%),linear-gradient(180deg,#fbbf24d9,#fbbf248c);border-color:#fbbf248c}.cell.cleaned{background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.25),transparent 55%),linear-gradient(180deg,#34d399cc,#34d39973);border-color:#34d3998c}.piece{width:calc(100% - 10px);height:calc(100% - 10px);border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:76px;cursor:grab;box-shadow:0 10px 24px #00000047,0 1px #ffffff1a inset}.piece:active{cursor:grabbing}.piece.robot{background:linear-gradient(180deg,#7dd3fc8c,#7dd3fc38);border:1px solid rgba(125,211,252,.55)}.piece.obstacle{background:linear-gradient(180deg,#fb718573,#fb71852e);border:1px solid rgba(251,113,133,.55)}select{color:#0b1220;background:#fff;border-color:#ffffff59}main{padding:18px;display:grid;grid-template-columns:1fr 320px;gap:16px;align-items:start;justify-content:center}@media(max-width:980px){main{grid-template-columns:1fr}}.sidebar{border-radius:18px;border:1px solid rgba(255,255,255,.18);background:linear-gradient(180deg,#ffffff0f,#ffffff08);box-shadow:0 18px 60px #00000040;padding:14px}.sidebar h2{margin:0 0 10px;font-size:14px;letter-spacing:.2px}.sidebar p,.sidebar li{color:var(--muted);font-size:13px;line-height:1.35}.sidebar ul{margin:8px 0 0;padding-left:18px}