.app-toast-region {
    position: fixed;
    top: max(1rem, env(safe-area-inset-top));
    right: max(1rem, env(safe-area-inset-right));
    z-index: 1095;
    display: grid;
    gap: .75rem;
    width: min(26rem, calc(100vw - 2rem));
    pointer-events: none;
}

.app-toast {
    --toast-accent: #2563eb;
    --toast-soft: #eff6ff;
    position: relative;
    display: grid;
    grid-template-columns: 2.35rem minmax(0, 1fr) 2rem;
    gap: .75rem;
    align-items: start;
    overflow: hidden;
    padding: .95rem .9rem .85rem;
    border: 1px solid color-mix(in srgb, var(--toast-accent) 22%, #dbe3ee 78%);
    border-radius: 1rem;
    background: rgba(255, 255, 255, .98);
    color: #24324a;
    box-shadow: 0 18px 48px rgba(15, 23, 42, .18), 0 4px 12px rgba(15, 23, 42, .08);
    pointer-events: auto;
    animation: app-toast-enter .24s ease-out both;
}

.app-toast--success {
    --toast-accent: #16805d;
    --toast-soft: #e9f8f1;
}

.app-toast--error {
    --toast-accent: #c83c46;
    --toast-soft: #fff0f1;
}

.app-toast--warning {
    --toast-accent: #b66a08;
    --toast-soft: #fff7e7;
}

.app-toast--info {
    --toast-accent: #2472c8;
    --toast-soft: #edf6ff;
}

.app-toast.is-leaving {
    animation: app-toast-leave .18s ease-in both;
}

.app-toast__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: .75rem;
    background: var(--toast-soft);
    color: var(--toast-accent);
    font-size: 1rem;
}

.app-toast__content {
    display: grid;
    gap: .22rem;
    min-width: 0;
    padding-top: .08rem;
}

.app-toast__title,
.app-toast__message {
    display: block;
}

.app-toast__title {
    color: #1f2d44;
    font-size: .9rem;
    font-weight: 800;
    line-height: 1.25;
}

.app-toast__message {
    color: #5d6c84;
    font-size: .83rem;
    line-height: 1.42;
    overflow-wrap: anywhere;
}

.app-toast__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin: -.2rem -.2rem 0 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #75839a;
    transition: color .16s ease, background .16s ease;
}

.app-toast__close:hover,
.app-toast__close:focus-visible {
    background: #f1f4f8;
    color: #24324a;
}

.app-toast__close:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--toast-accent) 45%, transparent);
    outline-offset: 1px;
}

.app-toast__timer {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    background: var(--toast-accent);
    transform-origin: left center;
    animation: app-toast-timer var(--toast-timeout, 6s) linear forwards;
}

.app-toast:hover .app-toast__timer,
.app-toast:focus-within .app-toast__timer {
    animation-play-state: paused;
}

@keyframes app-toast-enter {
    from { opacity: 0; transform: translate3d(1.25rem, -.35rem, 0) scale(.98); }
    to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes app-toast-leave {
    from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
    to { opacity: 0; transform: translate3d(1rem, -.2rem, 0) scale(.98); }
}

@keyframes app-toast-timer {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}

@media (max-width: 575.98px) {
    .app-toast-region {
        top: max(.75rem, env(safe-area-inset-top));
        right: .75rem;
        left: .75rem;
        width: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-toast,
    .app-toast.is-leaving,
    .app-toast__timer {
        animation: none;
    }
}