.container-bg {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    border: 2px solid #3a3a3a;
}
.layer-item {
    background: #c6c6c6;
    transition: all 0.3s ease;
    cursor: move;
    touch-action: none;
}
.layer-item:hover {
    background: #d6d6d6;
}
.layer-item.dragging {
    opacity: 0.5;
    transform: scale(1.05);
}
.layer-item.drag-over {
    border-top: 3px solid #7ead49;
}
.block-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    overflow-y: auto;
    height: 300px;
}

.layer-list{
    overflow-y: auto;
    height: 300px; 
}
.block-item {
    cursor: pointer;
    padding: 8px;
    background: white;
    border: 2px solid #ddd;
    border-radius: 4px;
    transition: all 0.2s;
    text-align: center;
    width: 100px;
}
.block-item:hover {
    border-color: #7ead49;
    transform: scale(1.05);
}
.block-item img {
    width: 48px;
    height: 48px;
    margin: 0 auto 4px;
    image-rendering: pixelated;
}
.arrow-btn {
    background: #4a5568;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    transition: all 0.2s;
}
.arrow-btn:hover {
    background: #2d3748;
}
.arrow-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}