/* Start screen shown before the app script runs (index.html, offline.html)
   and while the portal loads the profile (Splash in App.tsx). */
.splash { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  background: #fff; color: #303030; font: 14px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; z-index: 100;
  padding: env(safe-area-inset-top) 24px env(safe-area-inset-bottom); }
.splash-logo { width: 72px; height: 72px; border-radius: 18px; animation: splash-pulse 1.6s ease-in-out infinite; }
.splash-bar { width: 120px; height: 3px; border-radius: 2px; background: #ebebeb; overflow: hidden; }
.splash-bar::after { content: ""; display: block; width: 40%; height: 100%; border-radius: 2px; background: #303030; animation: splash-run 1.1s ease-in-out infinite; }
.splash-text { margin: -8px 0 0; color: #666; font-size: 13px; text-align: center; max-width: 320px; }
@keyframes splash-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.94); opacity: .82; } }
@keyframes splash-run { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@media (prefers-reduced-motion: reduce) { .splash-logo, .splash-bar::after { animation: none; } }

/* offline.html */
.offline { min-height: 100dvh; display: grid; place-items: center; margin: 0; background: #f7f7f7; color: #303030;
  font: 15px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif; padding: 24px; box-sizing: border-box; }
.offline main { max-width: 360px; text-align: center; }
.offline img { width: 64px; height: 64px; border-radius: 16px; }
.offline h1 { font-size: 20px; margin: 16px 0 6px; }
.offline p { margin: 0 0 20px; color: #666; }
.offline a { display: inline-block; padding: 11px 20px; border-radius: 8px; background: #303030; color: #fff; text-decoration: none; font-weight: 500; }

/* Shown only if the app has not replaced the start screen after 12 seconds. */
.splash-late { margin: 0; max-width: 300px; text-align: center; color: #666; font-size: 13px; opacity: 0; animation: splash-show .3s 12s forwards; }
@keyframes splash-show { to { opacity: 1; } }