/* App loader container. Colors match the landing page (indigo scheme). React toggles
   #splash-screen with inline display: flex / none, so keep display rules out of here. */
body {
  margin: 0;
  padding: 0;
}

.splash-screen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(45% 35% at 50% 42%, rgba(99, 102, 241, 0.16) 0%, transparent 70%),
    radial-gradient(30% 25% at 62% 58%, rgba(34, 211, 238, 0.12) 0%, transparent 70%),
    #f6f7ff;
  color: #545e7c;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* dark theme: the app's midnight surface (DarkTheme.css --dk-bg) with a soft indigo glow */
[data-bs-theme='dark'] .splash-screen {
  background:
    radial-gradient(45% 35% at 50% 42%, rgba(99, 102, 241, 0.22) 0%, transparent 70%),
    radial-gradient(30% 25% at 62% 58%, rgba(34, 211, 238, 0.08) 0%, transparent 70%),
    #151521;
  color: #9ba4c4;
}