#app-loader {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  background: #ffffff;
  z-index: 2147483647;
  /* System font stack only — avoids FOUT when Raleway loads via main.ts later. */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
  transition: opacity 300ms ease;
}

#app-loader.is-hiding {
  opacity: 0;
  pointer-events: none;
}

#app-loader .logo {
  width: 140px;
  height: 140px;
  background-image: url('/splash/aitutor-logo.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

#app-loader .spinner {
  /* Explicit box-sizing pins the 52+5+5=62px visual size. Without this, Tailwind's
     preflight (loaded later via main.ts) would switch us to border-box and the
     spinner would shrink to 52px, causing the whole flex stack to recenter. */
  box-sizing: content-box;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  /* Brand colors hardcoded per project to avoid a flash before main.ts sets --brand-800. */
  border: 5px solid rgba(102, 65, 242, 0.15);
  border-top-color: #6641f2;
  animation: app-loader-spin 0.9s linear infinite;
}

html[data-project='ALTIA'] #app-loader .spinner {
  border-color: rgba(17, 200, 141, 0.15);
  border-top-color: #11c88d;
}

#app-loader .message {
  /* Explicit line-height prevents a reflow when Tailwind's preflight later sets
     html { line-height: 1.5 } and the message height changes via inheritance. */
  margin: 0;
  color: #3a3a3a;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.2px;
  text-align: center;
  padding: 0 24px;
}

html[data-app-theme='dark'] #app-loader {
  background: #121212;
}

html[data-app-theme='dark'] #app-loader .message {
  color: #e8e8e8;
}

html[data-app-theme='dark'] #app-loader .logo {
  background-image: url('/splash/aitutor-logo-dark.svg');
}

html[data-project='ALTIA'] #app-loader .logo {
  background-image: url('/altia/logo-white.svg');
}

html[data-project='ALTIA'][data-app-theme='dark'] #app-loader .logo {
  background-image: url('/altia/logo-dark.svg');
}

@keyframes app-loader-spin {
  to {
    transform: rotate(360deg);
  }
}