/* Custom CSS for PNG Color Converter */
.drag-over {
    border-color: #38b6ff !important;
    background: linear-gradient(135deg, rgba(193, 255, 114, 0.1), rgba(56, 182, 255, 0.1)) !important;
}

.color-btn.selected {
    border-color: #c1ff72 !important;
    background: linear-gradient(135deg, rgba(193, 255, 114, 0.2), rgba(56, 182, 255, 0.2)) !important;
    box-shadow: 0 0 0 2px rgba(193, 255, 114, 0.5);
}

.gradient-btn {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(193, 255, 114, 0.1), rgba(56, 182, 255, 0.1));
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.gradient-btn:hover {
    background: linear-gradient(135deg, rgba(193, 255, 114, 0.2), rgba(56, 182, 255, 0.2));
    transform: translateY(-2px);
}

.gradient-btn.selected {
    border-color: #c1ff72 !important;
    box-shadow: 0 0 0 2px rgba(193, 255, 114, 0.5);
    background: linear-gradient(135deg, rgba(193, 255, 114, 0.2), rgba(56, 182, 255, 0.2));
}

/* Gradient preview styles */
.gradient-sunset { background: linear-gradient(135deg, #FF6B6B, #4ECDC4); }
.gradient-ocean { background: linear-gradient(135deg, #667eea, #764ba2); }
.gradient-forest { background: linear-gradient(135deg, #134E5E, #71B280); }
.gradient-fire { background: linear-gradient(135deg, #f12711, #f5af19); }
.gradient-purple_rain { background: linear-gradient(135deg, #8360c3, #2ebf91); }
.gradient-golden_hour { background: linear-gradient(135deg, #FFB75E, #ED8F03); }
.gradient-cool_blues { background: linear-gradient(135deg, #2196F3, #21CBF3); }
.gradient-warm_sunset { background: linear-gradient(135deg, #FA8072, #FFE4B5); }

/* Loading animations */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* Smooth transitions for all interactive elements */
* {
    transition: all 0.3s ease;
}