/* Upload Area Styling (if different from common) */
#upload-area-jpg.drag-over {
    border-color: #2ecc71;
    /* Tailwind secondary color */
    background-color: rgba(46, 204, 113, 0.05);
}

/* Image Preview Styling */
#preview-area-jpg img {
    max-width: 100%;
    max-height: 300px;
    /* Limit preview height */
    border: 2px solid #e2e8f0;
    /* Tailwind gray-200 */
    border-radius: 0.5rem;
    /* Tailwind rounded-lg */
    margin: 0 auto;
    /* Center the image if its container is wider */
    display: block;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    /* Tailwind shadow-md */
}

#preview-area-jpg .image-info {
    font-size: 0.875rem;
    /* Tailwind text-sm */
    color: #4a5568;
    /* Tailwind gray-700 */
    margin-top: 0.5rem;
    /* Tailwind mt-2 */
}

/* Tool Interface Responsiveness (If needed beyond Tailwind) */
@media (max-width: 640px) {
    #upload-area-jpg {
        padding: 1.5rem;
        /* Slightly less padding on small screens */
    }

    h1 {
        font-size: 1.8rem;
        /* Tailwind text-2xl or text-3xl */
    }

    #convert-btn-jpg {
        font-size: 1.125rem;
        /* Tailwind text-lg */
        padding: 0.75rem 2rem;
        /* Adjust padding */
    }
}