html, body {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
}

body {
  font-family: var(--font);
  background-color: var(--color-bg);
  color: var(--color-text);
  font-size: 14px;
  line-height: 1.5;
}

#app {
  min-height: 100dvh;
  padding-bottom: var(--nav-height);
  position: relative;
}

#page-container {
  min-height: calc(100dvh - var(--nav-height));
  animation: fadeIn 0.25s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

#toast-container {
  position: fixed;
  bottom: calc(var(--nav-height) + 16px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 9000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
  pointer-events: none;
  width: calc(100vw - 48px);
  max-width: 360px;
}

.toast {
  background: var(--color-text);
  color: #fff;
  padding: 11px 20px;
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  white-space: normal;
  word-break: break-word;
  line-height: 1.4;
  animation: toastIn 0.3s ease forwards;
  pointer-events: auto;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  width: fit-content;
  max-width: 100%;
}

.toast.success { background: var(--color-primary); }
.toast.error   { background: var(--color-danger); }

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

/* Prevent iOS auto-zoom on input focus — inputs must be >= 16px */
input, textarea, select {
  font-size: 16px !important;
  -webkit-text-size-adjust: 100%;
}

/* ─── SKELETON SCREENS ────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, #e8e3d8 25%, #f0ebe0 50%, #e8e3d8 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: 8px;
}

@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton-text  { height: 14px; border-radius: 4px; margin-bottom: 8px; }
.skeleton-title { height: 20px; border-radius: 4px; margin-bottom: 12px; }
.skeleton-card  { height: 120px; border-radius: 14px; margin-bottom: 12px; }
.skeleton-avatar{ width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; }

/* ─── IMAGE LAZY LOADING ──────────────────────────────────────── */
img[loading="lazy"] { background: #e8e3d8; }
img { transition: opacity 0.3s ease; }
img.lazy-hidden { opacity: 0; }
img.lazy-loaded { opacity: 1; }

/* ─── PAGE TRANSITION ─────────────────────────────────────────── */
#page-container { will-change: opacity; }