/**
 * Stylesheet cho công cụ chuyển đổi màu sắc (Color Converter)
 */

#color-preview-box {
    transition: background-color 0.25s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

#color-preview-box:hover {
    transform: scale(1.02);
    box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.15);
}

#color-preview-box:active {
    transform: scale(0.98);
}

/* Kiểu dáng cho các ô chỉ báo độ tương phản */
#contrast-white, #contrast-black {
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

/* Các trường input màu sắc */
.color-input {
    letter-spacing: 0.025em;
    font-family: monospace;
}

.color-input:focus {
    border-color: transparent !important;
}

/* Kiểu dáng vùng kéo thả hình ảnh */
#image-dropzone {
    transition: all 0.25s ease;
}

#image-dropzone.drag-over {
    border-color: #ec4899 !important; /* pink-500 */
    background-color: rgba(253, 242, 248, 0.7) !important; /* pink-50 */
    transform: scale(1.01);
}