.toast-stack{
    position:fixed;
    bottom:24px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    flex-direction:column-reverse;
    align-items:center;
    gap:8px;
    z-index:2000;
    pointer-events:none;
}

.toast{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:240px;
    max-width:360px;
    padding:12px 16px;
    background:var(--bg);
    border:1px solid var(--border);
    border-radius:12px;
    box-shadow:var(--shadow);
    font-size:12px;
    font-weight:500;
    color:var(--text);
    pointer-events:auto;
    opacity:0;
    transform:translateY(10px) scale(.96);
    animation:toast-in .22s ease forwards;
}

.toast.leaving{
    animation:toast-out .18s ease forwards;
}

.toast-icon{
    display:grid;
    place-items:center;
    flex:none;
    width:20px;
    height:20px;
    border-radius:50%;
    font-size:11px;
}

.toast-success .toast-icon{background:rgba(47,122,82,.12);color:var(--success)}
.toast-error .toast-icon{background:rgba(192,57,43,.12);color:#c0392b}
.toast-info .toast-icon{background:var(--accent-soft);color:var(--accent)}

.toast-message{flex:1;line-height:1.4}

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

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

@media(prefers-reduced-motion:reduce){
    .toast{animation:none;opacity:1;transform:none}
}

@media(max-width:680px){
    .toast-stack{bottom:16px;width:calc(100% - 32px)}
    .toast{width:100%;max-width:none}
}