html, body { margin: 0; background: #111923; }
#app-startup {
  position: fixed; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 24px;
  color: #e7edf5; background: #111923; font: 16px/1.5 system-ui, sans-serif;
  text-align: center;
}
#app-startup h1 { font-size: 24px; margin: 16px 0 0; }
#app-startup p { max-width: 32em; color: #b8c8d9; }
.startup-mark { color: #9bceff; font-size: 42px; font-weight: 700; }
.startup-spinner {
  width: 28px; height: 28px; margin: 16px; border: 3px solid #304456;
  border-top-color: #9bceff; border-radius: 50%; animation: loading 1s linear infinite;
}
#startup-retry { min-height: 48px; padding: 10px 20px; border: 1px solid #7baade;
  border-radius: 12px; color: #e7edf5; background: #253d50; font: inherit; }
@keyframes loading { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .startup-spinner { animation: none; } }