@keyframes toast-in {
    from {
        opacity: 0;
        transform: translateY(-12px) scale(.92);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes toast-out {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(-8px) scale(.94);
    }
}

.toast-layer {
    position: fixed;
    z-index: 200;
    top: 18%;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: min(320px, calc(100vw - 48px));
}

.toast-item {
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    padding: 12px 22px;
    border-radius: 999px;
    background: rgba(28, 32, 44, .88);
    color: #fff;
    font-size: 14px;
    line-height: 1.45;
    text-align: center;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow:
        0 4px 12px rgba(15, 23, 42, .12),
        0 16px 40px rgba(15, 23, 42, .22);
    animation: toast-in .34s cubic-bezier(.34, 1.4, .64, 1) both;
}

.toast-item.leaving {
    animation: toast-out .28s ease both;
}