.upload-zone {
    border: 2px dashed #cfd7ff;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: 0.2s;
    display: flex;
    flex-direction: column;
}

    .upload-zone:hover {
        background: #f5f7ff;
    }

    .upload-zone.drag {
        background: #eef2ff;
        border-color: #1E5EFF;
    }

.upload-icon {
    font-size: 28px;
}

.upload-text {
    font-size: 13px;
    color: #666;
}

    .upload-text .link {
        color: #1E5EFF;
        text-decoration: underline;
    }

.sortable-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
    .sortable-list > * {
        transition: transform 0.15s ease;
    }

.sortable-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 8px 10px;
    transition: box-shadow 0.2s, transform 0.15s;
}

    .sortable-item:hover {
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    }

.drag-handle {
    cursor: grab;
    color: #9ca3af;
    font-size: 14px;
    padding: 0 4px;
}

    .drag-handle:active {
        cursor: grabbing;
    }

.sortable-chosen {
    background: #eef2ff;
}

.sortable-ghost {
    opacity: 0.4;
    background: #dbeafe;
    border: 1px dashed #1E5EFF;
}

.sortable-drag {
    background: #fff;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    transform: rotate(1deg);
}

.sortable-item.sortable-ghost::after {
    content: '';
    display: block;
    height: 100%;
}