/* Pre-mount splash, shown until Vue replaces #app. Colours mirror the
   canvas/foreground tokens in src/assets/main.css. */
html { background: #f6f7f9; color: #111827; }
html.dark { background: #0b0d12; color: #e8eaf0; }
body { margin: 0; }

#loading-bg {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
}

#loading-bg .loading-bar {
  position: relative;
  overflow: hidden;
  width: 120px;
  height: 3px;
  border-radius: 999px;
  background: rgb(127 127 127 / 0.18);
}

#loading-bg .loading-bar span {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #497fff, #7367f0);
  animation: vs-loader 1.2s ease-in-out infinite;
}

@keyframes vs-loader {
  0% { transform: translateX(-100%) scaleX(0.5); }
  100% { transform: translateX(100%) scaleX(0.5); }
}