static/styles.css

.gradient-bg {
    background: linear-gradient(135deg, #dbeafe 0%, #ffffff 50%, #e0e7ff 100%);
}
.header-gradient {
    background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%); /* Light gray gradient */
}
.button-gradient {
    background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);
}
.animate-spin {
    animation: spin 1s linear infinite;
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.hidden { display: none; }
.drag-over {
    border-color: #3b82f6 !important;
    background-color: #dbeafe !important;
}
.uploaded {
    border-color: #10b981 !important;
    background-color: #ecfdf5 !important;
}

/* Custom responsive styles */
@media (max-width: 640px) {
    .gradient-bg {
        background: linear-gradient(135deg, #dbeafe 0%, #ffffff 100%);
    }
    .header-gradient {
        padding: 0.5rem;
    }
    .button-gradient {
        padding: 0.75rem 1rem;
    }
    #uploadArea {
        padding: 1.5rem;
    }
    #uploadedImage, #gradcamOriginal, #gradcamHeatmap {
        max-height: 12rem;
    }
    .grid-cols-2 {
        grid-template-columns: 1fr;
    }
    #threshold {
        max-width: 8rem;
    }
    #thresholdValue {
        font-size: 0.75rem;
    }
}

@media (min-width: 641px) and (max-width: 1023px) {
    #uploadArea {
        padding: 2rem;
    }
    #uploadedImage, #gradcamOriginal, #gradcamHeatmap {
        max-height: 16rem;
    }
    .grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}