html, body { margin: 0; height: 100%; background: #121212; }
@media (prefers-color-scheme: light) { html, body { background: #f7f7fb; } }
#loading {
  position: fixed; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 28px;
  transition: opacity 200ms ease-out;
}
#loading.done { opacity: 0; pointer-events: none; }
#loading img { border-radius: 22px; }
#loading .bar {
  width: 120px; height: 4px; border-radius: 2px; overflow: hidden;
  background: rgba(102, 126, 234, 0.25);
}
#loading .bar div {
  width: 40%; height: 100%; border-radius: 2px; background: #667eea;
  animation: rp-loading 1.1s ease-in-out infinite;
}
@keyframes rp-loading {
  from { transform: translateX(-100%); }
  to { transform: translateX(250%); }
}
@media (prefers-reduced-motion: reduce) {
  #loading .bar div { animation: none; width: 100%; opacity: 0.6; }
}