html,
body {
  margin: 0;
}

/* Lock scroll only while splash is visible */
body:not(.app-ready) {
  overflow: hidden;
}

html.app-ready,
body.app-ready {
  overflow: auto;
}

#app-splash {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #ffffff;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

#app-splash.app-splash--hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#app-splash .app-splash-spinner {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  border: 2px solid #e2e8f0;
  border-top-color: #2563eb;
  animation: app-splash-spin 0.75s linear infinite;
  margin-bottom: 1rem;
}

#app-splash .app-splash-title {
  font-family: Outfit, Inter, system-ui, -apple-system, sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  color: #1e293b;
  letter-spacing: -0.01em;
}

#app-splash .app-splash-sub {
  margin-top: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #64748b;
}

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