/* Loading screen shown until Flutter paints (same look as SplashView). */
:root {
  --bg: #f3f5fa;
  --brand: #4c4fd6;
  --on-brand: #ffffff;
  --track: #e2e5ee;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e1022;
    --brand: #8f92ff;
    --on-brand: #0e1022;
    --track: #2a2e4d;
  }
}
html,
body {
  margin: 0;
  height: 100%;
  background: var(--bg);
}
#splash {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  background: var(--bg);
  transition: opacity 0.2s ease-out;
}
#splash.done {
  opacity: 0;
  pointer-events: none;
}
.splash-logo .bubble {
  fill: var(--brand);
}
.splash-logo .bar {
  fill: var(--on-brand);
}
.splash-track {
  width: 120px;
  height: 3px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--track);
}
.splash-progress {
  width: 40%;
  height: 100%;
  border-radius: 3px;
  background: var(--brand);
  animation: splash-slide 1.1s ease-in-out infinite;
}
@keyframes splash-slide {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(250%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .splash-progress {
    animation: none;
    width: 100%;
    opacity: 0.4;
  }
}