.site-toast-region {
    position: fixed;
    z-index: 120;
    right: max(1rem, env(safe-area-inset-right));
    bottom: max(1rem, env(safe-area-inset-bottom));
    display: grid;
    width: min(390px, calc(100vw - 2rem));
    gap: .65rem;
    pointer-events: none;
}

.site-toast {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: .75rem;
    padding: .85rem .8rem .85rem .9rem;
    overflow: hidden;
    border: 1px solid #315d80;
    border-radius: 1rem;
    background: rgb(10 39 66 / 97%);
    color: #f5fbff;
    box-shadow: 0 18px 45px rgb(2 18 34 / 34%);
    opacity: 0;
    pointer-events: auto;
    transform: translateY(12px) scale(.98);
    transition: opacity .18s ease, transform .18s ease;
}
.site-toast::before { position: absolute; width: 4px; inset: 0 auto 0 0; background: #69b8ea; content: ""; }
.site-toast.is-visible { opacity: 1; transform: translateY(0) scale(1); }
.site-toast.is-leaving { opacity: 0; transform: translateY(8px) scale(.98); }
.site-toast--success::before { background: #40bd81; }
.site-toast--warning::before { background: #f0b84b; }
.site-toast--error::before { background: #f06475; }
.site-toast__icon {
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border-radius: .65rem;
    background: rgb(105 184 234 / 16%);
    color: #9edcff;
    font-size: .85rem;
    font-weight: 900;
}
.site-toast--success .site-toast__icon { background: rgb(64 189 129 / 16%); color: #82e0af; }
.site-toast--warning .site-toast__icon { background: rgb(240 184 75 / 16%); color: #ffd77d; }
.site-toast--error .site-toast__icon { background: rgb(240 100 117 / 16%); color: #ff9ca8; }
.site-toast__copy { min-width: 0; }
.site-toast__copy strong { display: block; color: #fff; font-size: .78rem; }
.site-toast__copy p { margin: .18rem 0 0; color: #c8ddeb; font-size: .72rem; line-height: 1.45; overflow-wrap: anywhere; }
.site-toast__close {
    display: grid;
    width: 1.8rem;
    height: 1.8rem;
    min-height: 0;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: .55rem;
    background: transparent;
    color: #aec7d8;
    box-shadow: none;
    font: inherit;
    font-size: 1.15rem;
    cursor: pointer;
}
.site-toast__close:hover { background: rgb(255 255 255 / 10%); color: #fff; transform: none; }
.site-toast__close:focus-visible { outline: 2px solid #82cef8; outline-offset: 2px; }

@media (max-width: 620px) {
    .site-toast-region { right: .65rem; bottom: .65rem; left: .65rem; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
    .site-toast { transition-duration: .01ms; }
}