#toast-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1050;
    display: flex;
    flex-direction: column-reverse;
    gap: 10px;
}
.toast {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.toast.show {
    opacity: 1;
    transform: translateX(0);
}
.toast.hide {
    opacity: 0;
    transform: translateX(100px);
    transition: opacity 0.4s ease-in, transform 0.4s ease-in;
}