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

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font);
  font-weight: 600;
  line-height: 1.1;
}

#app {
  min-height: 100dvh;
}

#page-container {
  min-height: 100dvh;
  opacity: 1;
  transition: opacity 0.18s ease;
}

#page-container.fading {
  opacity: 0;
}

/* Toast */
#toast-container {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9000;
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
  pointer-events: none;
}

.toast {
  background: var(--text);
  color: #fff;
  padding: 10px 22px;
  border-radius: var(--r-full);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  animation: toastIn 0.3s ease forwards;
  pointer-events: auto;
}

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

/* Fade-up animation */
.fade-up {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}
.fade-up:nth-child(2) { transition-delay: 0.07s; }
.fade-up:nth-child(3) { transition-delay: 0.14s; }
.fade-up:nth-child(4) { transition-delay: 0.21s; }
.fade-up:nth-child(5) { transition-delay: 0.28s; }

/* Skeleton */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
  border-radius: var(--r-sm);
}

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