/* ─── Toast Notifications ───────────────────────────── */
#toast-container {
  position: fixed; top: 80px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  z-index: 9999; pointer-events: none;
}
.toast {
  padding: 12px 22px; border-radius: var(--radius);
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  letter-spacing: 0.05em; max-width: 420px; min-width: 240px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  pointer-events: all;
  animation: toastIn 220ms ease forwards;
}
.toast.out { animation: toastOut 220ms ease forwards; }
.toast-success { background: #f0fdf4; border: 1px solid #bbf7d0; color: #15803d; }
.toast-error   { background: #fff1f2; border: 1px solid #fecaca; color: #b91c1c; }
.toast-info    { background: #fffbeb; border: 1px solid #fde68a; color: #b45309; }
.toast-danger  { background: #b91c1c; border: 1px solid #991b1b; color: #fff; box-shadow: 0 4px 24px rgba(185,28,28,0.35); }

@keyframes toastIn  { from { opacity:0; transform:translateY(-10px); } to { opacity:1; transform:translateY(0); } }
@keyframes toastOut { from { opacity:1; transform:translateY(0);     } to { opacity:0; transform:translateY(-10px); } }

/* ─── Toast action buttons (confirm delete) ─────────── */
.toast-actions {
  display: flex; gap: 8px; justify-content: center; margin-top: 10px;
}
.toast-btn {
  padding: 5px 16px; border-radius: var(--radius-sm);
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  cursor: pointer; border: none; letter-spacing: 0.04em;
  transition: opacity 150ms;
}
.toast-btn:hover { opacity: 0.85; }
.toast-btn-cancel {
  background: rgba(255,255,255,0.2); color: #fff;
}
.toast-btn-ok {
  background: #fff; color: #b91c1c;
}