/* ============================================
   4. FLASH MESSAGES
   ============================================ */
.flash {
  padding: 12px 16px;
  border-radius: var(--radius-md);
  margin-bottom: 24px;
  font-size: 0.875rem;
  font-weight: 500;
  animation: flash-slide-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes flash-slide-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.flash-notice {
  background-color: var(--green-100);
  color: #166534;
  border: 1px solid #bbf7d0;
}

.flash-alert {
  background-color: var(--red-100);
  color: #991B1B;
  border: 1px solid #fecaca;
}

/* ── Toast notifications ── */
.toast-container {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.toast-container .toast {
  pointer-events: auto;
  padding: 12px 20px;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  animation: toast-in 0.35s cubic-bezier(0.16,1,0.3,1) forwards;
  max-width: 380px;
}
.toast-container .toast-success { background: #166534; color: #fff; }
.toast-container .toast-error   { background: #991B1B; color: #fff; }
.toast-container .toast-info    { background: var(--gray-800); color: #fff; }
.toast-container .toast.toast-out { animation: toast-out 0.3s ease forwards; }
@keyframes toast-in { from { opacity:0; transform:translateX(40px); } to { opacity:1; transform:translateX(0); } }
@keyframes toast-out { from { opacity:1; transform:translateX(0); } to { opacity:0; transform:translateX(40px); } }