:root{--primary:#2aa8b6;--secondary:#d38d38;--dark:#033a59;--bg-color:#f4f7f8;--panel-bg:#fff;--border-radius:8px;--grid-size:50px}*{box-sizing:border-box;margin:0;padding:0;font-family:Inter,sans-serif}body{background-color:var(--bg-color);color:var(--dark);flex-direction:column;height:100vh;display:flex}.app-header{border-bottom:3px solid var(--primary);background-color:#fff;align-items:center;padding:.5rem 1rem;display:flex;box-shadow:0 2px 5px #0000000d}.logo{height:35px;margin-right:1rem}.app-header h1{color:var(--dark);font-size:1.2rem}.app-container{flex-wrap:wrap;flex:1;gap:1rem;padding:1rem;display:flex;overflow:hidden auto}.panel{background:var(--panel-bg);border-radius:var(--border-radius);flex-direction:column;max-height:100%;padding:1.5rem;display:flex;box-shadow:0 4px 6px #0000000d}.palettes-panel{flex-shrink:0;width:250px;overflow-y:auto}.workspace-panel{flex-direction:column;flex-shrink:0;width:320px;display:flex}.simulation-panel{flex-direction:column;flex:1;min-width:400px;display:flex}.workspace-header,.simulation-controls{justify-content:space-between;align-items:center;margin-bottom:1rem;display:flex}.workspace-header h2,.simulation-controls h2{margin-bottom:0}h3{color:var(--dark);margin-bottom:1rem}.btn-group{gap:.5rem;display:flex}.btn-sm{padding:6px 12px;font-size:.9rem}.block-palette{border-bottom:2px dashed #ddd;margin-bottom:1.5rem;padding-bottom:1.5rem}.code-block{color:#fff;cursor:grab;-webkit-user-select:none;user-select:none;border-radius:6px;margin-bottom:8px;padding:10px 15px;font-weight:600;transition:transform .1s;box-shadow:0 2px 4px #0000001a}.code-block:active{cursor:grabbing}.code-block.dragging{opacity:.5}.start-block{background-color:#27ae60}.action-block{background-color:var(--primary)}.control-block{background-color:var(--secondary)}.step-input{text-align:center;width:40px;color:var(--dark);border:1px solid #ccc;border-radius:4px;margin:0 4px;padding:2px 4px;font-size:.9rem}.coding-workspace{border-radius:var(--border-radius);background-color:#fafafa;border:2px dashed #ccc;flex:1;min-height:200px;padding:1rem;overflow-y:auto}.coding-workspace.drag-over{border-color:var(--primary);background-color:#e8f7f9}.placeholder-text{color:#999;text-align:center;margin-bottom:10px;font-style:italic}.block-container{background-color:#0000001a;border:2px dashed #ffffffb3;border-radius:4px;min-height:50px;margin-top:10px;padding:10px}.block-container.drag-over{background-color:#0003}.workspace-block{position:relative}.delete-btn{color:#fff;cursor:pointer;background:#0000004d;border-radius:50%;justify-content:center;align-items:center;width:20px;height:20px;font-size:12px;font-weight:700;display:flex;position:absolute;top:8px;right:10px}.delete-btn:hover{background:#0009}.btn{cursor:pointer;color:#fff;border:none;border-radius:5px;padding:10px 20px;font-weight:700;transition:background .2s}.primary-btn{background-color:var(--primary)}.primary-btn:hover{background-color:#1f8591}.secondary-btn{background-color:var(--dark)}.danger-btn{background-color:#e74c3c}.simulation-palette{margin-bottom:1rem}.sim-items{flex-wrap:wrap;gap:1rem;display:flex}.draggable-sim-item{cursor:grab;transition:transform .2s}.draggable-sim-item:hover{transform:scale(1.1)}.grid-zoom-controls{justify-content:center;align-items:center;gap:.6rem;margin-bottom:.5rem;display:flex}.zoom-btn{border:2px solid var(--primary);width:30px;height:30px;color:var(--primary);cursor:pointer;background:#fff;border-radius:50%;justify-content:center;align-items:center;font-size:1.2rem;font-weight:700;line-height:1;transition:background .2s,color .2s;display:flex}.zoom-btn:hover{background:var(--primary);color:#fff}#zoom-level{color:var(--dark);text-align:center;min-width:38px;font-size:.85rem;font-weight:600}.grid-container{border-radius:var(--border-radius);background-color:#eee;flex:1;justify-content:center;align-items:center;display:flex;overflow:auto}#grid-scaler{transform-origin:50%;transition:transform .2s}.simulation-grid{grid-template-columns:repeat(10, var(--grid-size));grid-template-rows:repeat(10, var(--grid-size));background-color:#ccc;border:2px solid #aaa;gap:1px;display:grid}.grid-cell{width:var(--grid-size);height:var(--grid-size);background-color:#fff;position:relative}.grid-cell.drag-over{background-color:#e8f7f9}.grid-item{object-fit:contain;pointer-events:none;width:100%;height:100%;transition:all .3s;position:absolute;top:0;left:0}.robot-item{z-index:10}.cell-delete-btn{color:#fff;cursor:pointer;z-index:20;pointer-events:auto;background:#e74c3c;border-radius:50%;justify-content:center;align-items:center;width:20px;height:20px;font-size:12px;display:none;position:absolute;top:-5px;right:-5px}.grid-cell.has-item:hover .cell-delete-btn{display:flex}.modal-overlay{z-index:1000;background:#00000080;justify-content:center;align-items:center;display:none;position:fixed;inset:0}.modal-overlay.active{display:flex}.modal-content{border-radius:var(--border-radius);text-align:center;background:#fff;width:90%;max-width:400px;padding:2rem;box-shadow:0 10px 25px #0003}.modal-content h2{margin-bottom:.5rem}.modal-stats{justify-content:space-around;margin:1.5rem 0;display:flex}.stat-box{border-radius:var(--border-radius);background:#f4f7f8;flex:1;margin:0 .5rem;padding:1rem}.stat-box h4{color:#666;margin-bottom:.5rem;font-size:.9rem}.stat-box p{color:var(--secondary);font-size:1.5rem;font-weight:700}.modal-actions{justify-content:center;gap:1rem;display:flex}.sortable-ghost{opacity:.4;border:2px dashed #999}.sortable-drag{cursor:grabbing!important}