:root {
  --logo-pink: 340 82% 55%;
  --logo-green: 145 65% 45%;
  --logo-blue: 200 85% 55%;
  --logo-yellow: 45 95% 50%;
  --logo-purple: 280 70% 55%;
  --logo-orange: 25 90% 55%;
  --logo-teal: 175 75% 42%;
}
#app-loader {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fbf6ef;
  z-index: 9999;
}
#app-loader .loader-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
#app-loader .loader-logo {
  font-family: "Just Another Hand", "Comic Sans MS", cursive;
  font-size: 52px;
  letter-spacing: 0.5px;
  line-height: 1;
}
#app-loader .loader-dots {
  display: flex;
  gap: 8px;
}
#app-loader .dot {
  width: 10px;
  height: 10px;
  border-radius: 9999px;
  background: #ff868e;
  animation: loader-bounce 1s ease-in-out infinite;
}
#app-loader .dot:nth-child(2) { animation-delay: 0.15s; background: #ffcfb2; }
#app-loader .dot:nth-child(3) { animation-delay: 0.3s; background: #ffb4a8; }
@keyframes loader-bounce {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50% { transform: translateY(-6px); opacity: 1; }
}