#upload-area-isr.drag-over {
    border-color: #2ecc71;
    /* Tailwind secondary color */
    background-color: rgba(46, 204, 113, 0.05);
}

#original-preview-isr,
#resized-preview-canvas-isr {
    display: block;
    /* Ensure it behaves like a block for centering */
}

#resized-preview-canvas-isr {
    background-color: #f0f0f0;
    /* Light background for canvas before drawing */
}

/* Style for the range input thumbs (cross-browser can be tricky) */
input[type="range"].accent-primary::-webkit-slider-thumb {
    background-color: #3498db;
    /* primary color from Tailwind config */
}

input[type="range"].accent-primary::-moz-range-thumb {
    background-color: #3498db;
    /* primary color */
}

input[type="range"].accent-primary::-ms-thumb {
    background-color: #3498db;
    /* primary color */
}

/* Ensure consistent height for preview containers if needed */
/* .preview-container { min-height: 250px; } */

/* Responsive adjustments if needed beyond Tailwind */
@media (max-width: 768px) {
    #processing-area-isr .grid.md\:grid-cols-2 {
        grid-template-columns: 1fr;
        /* Stack previews on mobile */
    }

    h1 {
        font-size: 1.8rem;
    }
}