#toast-container {
  z-index: 1100;
}
.toast-container .toast {
  min-width: 280px;
  max-width: 420px;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  animation: toastIn .25s cubic-bezier(.25, 1, .5, 1);
}
@keyframes toastIn {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes toastFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .toast-container .toast { animation-name: toastFade; }
}
/* O JS aplica toast-<tipo> no toast e no header: a borda vai só no toast,
   a cor do status só no ícone do header. */
.toast.toast-success { border-color: #bbf7d0; }
.toast.toast-error,
.toast.toast-danger  { border-color: #fecaca; }
.toast.toast-warning { border-color: #fde68a; }
.toast.toast-info    { border-color: #bae6fd; }
.toast-header {
  color: var(--gray-900);
  border-bottom-color: var(--gray-100);
}
.toast-header.toast-success .bi { color: var(--success); }
.toast-header.toast-error .bi,
.toast-header.toast-danger .bi  { color: var(--danger); }
.toast-header.toast-warning .bi { color: var(--warning); }
.toast-header.toast-info .bi    { color: var(--info); }
.toast-header strong { font-weight: 600; }