/* ===============================
   Toasts / Notifications
   =============================== */

.toasts {
  position: fixed;
  left: 50%; transform: translateX(-50%);
  bottom: 16px;
  display: grid; gap: 8px;
  z-index: 1100;
  width: min(92vw, 520px);
  pointer-events: none; /* clicks pass through */
}

.toast {
  pointer-events: auto;
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  box-shadow: 0 6px 24px rgba(0,0,0,.12);
  animation: toast-in .18s ease-out;
  font-family: var(--font-ui);
  font-weight: 600;
}

.toast--success {
  border-color: color-mix(in oklch, var(--accent-300), white 30%);
  background: color-mix(in oklch, var(--accent-100), white 70%);
}
.toast--error {
  border-color: oklch(0.70 0.20 20);
  background: oklch(0.94 0.04 20);
}
.toast__close {
  background: none; border: none; cursor: pointer; font-size: 18px; color: var(--text);
}

@keyframes toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}