/* ═══════════════════════════════════════════
   Components — Modal, Toast, Animations, Responsive
   ═══════════════════════════════════════════ */

/* ─── Modal ─── */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(45, 36, 32, .45);
  backdrop-filter: blur(4px); z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.modal {
  background: white; border-radius: 24px; padding: 2rem;
  max-width: 420px; width: 100%; box-shadow: var(--shadow-lg);
}
.modal-title { font-family: var(--serif); font-size: 1.5rem; margin-bottom: 1.5rem }
.modal-actions { display: flex; gap: .75rem; justify-content: flex-end; margin-top: 1.5rem }
.btn-modal-cancel {
  padding: .6rem 1.3rem; background: var(--cream); border: none;
  border-radius: 9px; font-size: .83rem; color: var(--mid); font-weight: 500;
}
.btn-modal-ok {
  padding: .6rem 1.5rem; background: var(--rose); color: white; border: none;
  border-radius: 9px; font-size: .83rem; font-weight: 600;
}

/* ─── Toast ─── */
.toast {
  position: fixed; bottom: 2rem; right: 2rem;
  background: var(--dark); color: white;
  border-radius: 12px; padding: .75rem 1.25rem;
  font-size: .83rem; font-weight: 500;
  box-shadow: var(--shadow-lg); z-index: 500;
  transform: translateY(100px); opacity: 0;
  transition: all .3s cubic-bezier(.34, 1.56, .64, 1);
}
.toast.show { transform: none; opacity: 1 }

/* ─── Animations ─── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px) }
  to { opacity: 1; transform: none }
}
.page-content > * { animation: fadeInUp .45s ease both }
.page-content > *:nth-child(2) { animation-delay: .05s }
.page-content > *:nth-child(3) { animation-delay: .1s }
.page-content > *:nth-child(4) { animation-delay: .15s }

/* ─── Responsive ─── */
@media (max-width: 900px) {
  .sidebar {
    transform: translateX(-100%); transition: transform .3s ease;
    z-index: 1000; box-shadow: none;
  }
  .sidebar.open { transform: none; box-shadow: 8px 0 30px rgba(45,36,32,.15) }
  .sidebar-close { display: flex }
  .main-content { margin-left: 0 }
  .topbar-menu { display: flex }
  .topbar { z-index: 40 }
  .dash-grid { grid-template-columns: 1fr 1fr }
  .dash-grid-2 { grid-template-columns: 1fr }
  .diet-layout { grid-template-columns: 1fr }
  .profile-grid { grid-template-columns: 1fr }
  .trim-banner { grid-template-columns: 1fr }
  .auth-left { display: none }
  .auth-right { width: 100% }
}
@media (max-width: 600px) {
  .dash-grid { grid-template-columns: 1fr }
  .page-content { padding: 1.5rem }
  .topbar { padding: 1rem 1.5rem }
}