.toast-root
{
    position: fixed;
    inset: 0;
    z-index: 120;
    display: grid;
    align-items: start;
    justify-items: center;
    padding: 72px 24px 24px;
    pointer-events: none;
}

.toast-root[hidden]
{
    display: none;
}

.toast-root.anchored
{
    display: block;
    padding: 0;
}

.toast
{
    position: relative;
    box-sizing: border-box;
    max-width: min(360px, 100%);
    border: 1px solid rgba(190, 227, 236, 0.86);
    border-radius: 8px;
    padding: 13px 18px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;
    text-align: center;
    white-space: pre-line;
    overflow-wrap: anywhere;
    background: rgba(20, 96, 126, 0.94);
    box-shadow:
        0 18px 42px rgba(20, 96, 126, 0.24),
        0 0 0 1px rgba(255, 255, 255, 0.18) inset;
    animation: toast-slide-in 160ms ease;
}

.toast-root.anchored .toast
{
    position: absolute;
    max-width: min(520px, calc(100vw - 24px));
}

.toast-root.anchored.placement-top .toast
{
    animation-name: toast-slide-in-up;
}

.toast-root.anchored.placement-bottom .toast
{
    animation-name: toast-slide-in-down;
}

.toast.success
{
    padding: 18px 24px;
    color: #ffffff;
    border-radius: 0px;
    border-color: rgba(132, 232, 213, 0.88);
    background: linear-gradient(
        135deg,
        rgba(88, 214, 195, 0.98),
        rgba(31, 173, 154, 0.98)
    );
    box-shadow:
        0 14px 30px rgba(19, 139, 123, 0.24),
        0 0 0 1px rgba(255, 255, 255, 0.28) inset;
}

.toast.success::before
{
    content: "";
    position: absolute;
    pointer-events: none;
    inset: 1px;
    border: 1px solid rgba(240, 255, 252, 0.4);
    border-radius: 0px;
}

.toast.error
{
    border-color: rgba(254, 202, 202, 0.9);
    background: rgba(211, 76, 76, 0.94);
}

@keyframes toast-slide-in
{
    from
    {
        opacity: 0;
        transform: translateY(-10px) scale(0.98);
    }

    to
    {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes toast-slide-in-up
{
    from
    {
        opacity: 0;
        transform: translateY(10px) scale(0.98);
    }

    to
    {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes toast-slide-in-down
{
    from
    {
        opacity: 0;
        transform: translateY(-10px) scale(0.98);
    }

    to
    {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}