.toast-container {
        position: fixed;
        z-index: 9999;
        pointer-events: none;
    }

    .toast-container.top-right {
        top: 20px;
        right: 20px;
    }

    .toast-container.top-left {
        top: 20px;
        left: 20px;
    }

    .toast-container.bottom-right {
        bottom: 20px;
        right: 20px;
    }

    .toast-container.bottom-left {
        bottom: 20px;
        left: 20px;
    }

    .toast-container.top-center {
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
    }

    .toast-container.bottom-center {
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
    }

    .toast {
        pointer-events: auto;
        min-width: 300px;
        max-width: 400px;
        margin-bottom: 10px;
        border-radius: 0.5rem;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        opacity: 0;
        transform: translateX(100%);
        transition: all 0.3s ease-out;
    }

    .toast.show {
        opacity: 1;
        transform: translateX(0);
    }

    .toast.hiding {
        opacity: 0;
        transform: translateX(100%);
    }

    .toast-container.top-left .toast,
    .toast-container.bottom-left .toast {
        transform: translateX(-100%);
    }

    .toast-container.top-left .toast.show,
    .toast-container.bottom-left .toast.show {
        transform: translateX(0);
    }

    .toast-container.top-left .toast.hiding,
    .toast-container.bottom-left .toast.hiding {
        transform: translateX(-100%);
    }

    .toast-container.top-center .toast,
    .toast-container.bottom-center .toast {
        transform: translateY(-100%);
    }

    .toast-container.top-center .toast.show,
    .toast-container.bottom-center .toast.show {
        transform: translateY(0);
    }

    .toast-container.top-center .toast.hiding,
    .toast-container.bottom-center .toast.hiding {
        transform: translateY(-100%);
    }

    .toast-progress {
        position: absolute;
        bottom: 0;
        left: 0;
        height: 4px;
        border-radius: 0 0 0.5rem 0.5rem;
        animation: progress linear;
    }

    @keyframes progress {
        from {
            width: 100%;
        }
        to {
            width: 0%;
        }
    }

    @keyframes slideInRight {
        from {
            transform: translateX(100%);
            opacity: 0;
        }
        to {
            transform: translateX(0);
            opacity: 1;
        }
    }

    @keyframes slideInLeft {
        from {
            transform: translateX(-100%);
            opacity: 0;
        }
        to {
            transform: translateX(0);
            opacity: 1;
        }
    }

    @keyframes bounceIn {
        0% {
            transform: scale(0.3);
            opacity: 0;
        }
        50% {
            transform: scale(1.05);
        }
        70% {
            transform: scale(0.9);
        }
        100% {
            transform: scale(1);
            opacity: 1;
        }
    }

    .toast.bounce {
        animation: bounceIn 0.5s ease-out;
    }