.toast-wrap{position:fixed;bottom:24px;right:24px;z-index:var(--z-toast);
  display:flex;flex-direction:column;gap:10px}
.toast{display:flex;align-items:center;gap:10px;background:var(--gray-900);color:#fff;
  padding:12px 18px;border-radius:var(--radius-md);box-shadow:var(--shadow-lg);
  font-size:13.5px;animation:toastIn .25s cubic-bezier(.22,1,.36,1);max-width:340px}
.toast.success{background:var(--success)}
.toast.error{background:var(--red-600)}
.toast.out{animation:toastOut .25s forwards}
@keyframes toastIn{from{opacity:0;transform:translateX(30px)}}
@keyframes toastOut{to{opacity:0;transform:translateX(30px)}}
@media (max-width:640px){
  .toast-wrap{left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom))}
  .toast{max-width:none;width:100%}
}