html {
  background-color: #F8F8FF;
}

#loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  overflow: hidden;
}

#loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1rem;
  box-sizing: border-box;
}

.loading-icon {
  width: 100px;
  height: 65px;
  animation: fadeInOut 2s infinite;
  content: url("icons/loading-light.png");
}

@keyframes fadeInOut {
  0%   { opacity: 0; }
  50%  { opacity: 1; }
  100% { opacity: 0; }
}

#loading p {
  margin-top: 1.2rem;
  font-size: 1.2rem;
  color: #1C1C20;
  font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  transition: opacity 0.5s ease;
}

/* Dark theme override */
@media (prefers-color-scheme: dark) {
  html {
    background-color: #1C1C20;
  }
  #loading p {
    color: #F8F8FF;
  }
  .loading-icon {
    content: url("icons/loading-dark.png");
  }
}