/* Full-page loader (curtain) */
#page-loader {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.5s ease;
}

/* Default spinner (will be overridden by theme) */
.loader {
  width: 50px;
  aspect-ratio: 1;
  display: grid;
  border: 4px solid #0000;
  border-radius: 50%;
  border-color: #000 #0000;
  animation: l16 1s infinite linear;
}
.loader::before,
.loader::after {    
  content: "";
  grid-area: 1/1;
  margin: 2px;
  border: inherit;
  border-radius: 50%;
}
.loader::before { animation: inherit; animation-duration: .5s; animation-direction: reverse; }
.loader::after { margin: 8px; }
@keyframes l16 { 100% { transform: rotate(1turn); } }

/* Fade-out */
#page-loader.hidden { opacity: 0; pointer-events: none; }

/* Theme backgrounds */
body.light-mode #page-loader { background: #fff; }
body.dark-mode #page-loader { background: #121212; }

/* Spinner colors by theme */
body.light-mode .loader { border-color: #000 #0000; } /* outer black */
body.light-mode .loader::before { border-color: #f03333 #0000; } /* inner red */

body.dark-mode .loader { border-color: #fff #0000; } /* outer white */
body.dark-mode .loader::before { border-color: #f03333 #0000; } /* inner red */