.upload-area {
    border: 2px dashed var(--bs-secondary);
    transition: all 0.3s ease;
    cursor: pointer;
}

.upload-area:hover {
    border-color: var(--bs-primary);
    background-color: rgba(var(--bs-primary-rgb), 0.1);
}

#previewCanvas {
    max-width: 100%;
    cursor: crosshair;
}

.cursor-pointer {
    cursor: pointer;
}

#instructions {
    color: var(--bs-info);
    font-size: 0.9rem;
}

#resultGif {
    max-width: 100%;
    max-height: 500px;
}

.progress {
    height: 25px;
    background-color: var(--bs-dark);
}

.progress-bar {
    background-color: var(--bs-primary);
    transition: width 0.3s ease-in-out;
}

#progressText {
    color: var(--bs-info);
    font-size: 0.9rem;
}

/* Smooth scroll behavior */
html {
    scroll-behavior: smooth;
}