:root{
    --mf-toast-width:min(390px,calc(100vw - 28px));
    --mf-toast-radius:4px;
    --mf-toast-duration:320ms;
    --mf-toast-ease:cubic-bezier(.22,1,.36,1);
    --mf-toast-z:2147482500;
}

.mf-toast-region{
    position:fixed;
    inset:auto 18px 18px auto;
    z-index:var(--mf-toast-z);
    width:var(--mf-toast-width);
    display:grid;
    gap:9px;
    pointer-events:none;
    direction:rtl;
}

.mf-toast{
    display:grid;
    grid-template-columns:34px minmax(0,1fr) 28px;
    align-items:center;
    gap:10px;
    min-height:58px;
    padding:10px 11px;
    border:1px solid #dce7f4;
    border-radius:var(--mf-toast-radius);
    background:rgba(255,255,255,.97);
    box-shadow:0 16px 44px rgba(34,72,112,.16);
    color:#18263a;
    opacity:0;
    transform:translateY(14px) scale(.985);
    transition:opacity var(--mf-toast-duration) var(--mf-toast-ease),transform var(--mf-toast-duration) var(--mf-toast-ease);
    pointer-events:auto;
    overflow:hidden;
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
}

.mf-toast.is-visible{opacity:1;transform:none}
.mf-toast.is-leaving{opacity:0;transform:translateY(8px) scale(.99)}
.mf-toast__icon{
    width:34px;height:34px;display:grid;place-items:center;
    border-radius:3px;background:#edf6ff;color:#147cff;font-size:15px;
}
.mf-toast__content{min-width:0}
.mf-toast__title{display:block;font-size:13px;font-weight:800;line-height:1.3}
.mf-toast__message{display:block;margin-top:2px;font-size:12px;line-height:1.45;color:#65748a;overflow-wrap:anywhere}
.mf-toast__close{width:28px;height:28px;border:0;background:transparent;color:#8a98aa;cursor:pointer;border-radius:3px}
.mf-toast__close:hover{background:#f1f5f9;color:#31445c}
.mf-toast--success .mf-toast__icon{background:#eaf9f1;color:#148454}
.mf-toast--error .mf-toast__icon{background:#fff0f0;color:#d83a3a}
.mf-toast--warning .mf-toast__icon{background:#fff7df;color:#a66a00}
.mf-toast--info .mf-toast__icon{background:#edf6ff;color:#147cff}

@media (max-width:640px){
    .mf-toast-region{inset:auto 12px calc(12px + env(safe-area-inset-bottom)) 12px;width:auto}
    .mf-toast{grid-template-columns:32px minmax(0,1fr) 26px;min-height:54px;padding:9px 10px}
    .mf-toast__icon{width:32px;height:32px}
}

@media (prefers-reduced-motion:reduce){
    .mf-toast{transition:none;transform:none}
}