/* Page shell. Inside the wrappers the web view runs under the status bar and the home indicator (iOS) or the system bars (Android 15 draws edge to edge), so the page pads itself with the safe areas. */
html, body { margin: 0; padding: 0; background: #eef3fd; background: var(--og-bg, #eef3fd); color: #0e2a52; color: var(--og-ink, #0e2a52); font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
body {
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  min-height: 100vh;
  min-height: 100dvh;
  box-sizing: border-box;
}
/* Android: Capacitor's SystemBars plugin sets --safe-area-inset-* on <html> (the WebView's env() values only come with newer WebViews); the build adds data-target="android". */
html[data-target="android"] body {
  padding-top: var(--safe-area-inset-top, env(safe-area-inset-top));
  padding-right: var(--safe-area-inset-right, env(safe-area-inset-right));
  padding-bottom: var(--safe-area-inset-bottom, env(safe-area-inset-bottom));
  padding-left: var(--safe-area-inset-left, env(safe-area-inset-left));
}
.app-panel[hidden] { display: none; }
.ak-title:focus { outline: none; }

/* The splash: shown from the first paint until the first screen is ready. Same background as the iOS launch screen, so nothing flashes. */
.app-splash {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: #eef3fd;
  background: var(--ak-splash-bg, #eef3fd);
  color: #0e2a52;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  text-align: center;
}
.app-splash[hidden] { display: none; }
.app-splash-name { margin: 0; font-size: 1.5rem; font-weight: 600; }
.app-splash-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid rgba(26, 95, 208, 0.2);
  border-top-color: #1a5fd0;
  border-radius: 50%;
  animation: app-spin 0.9s linear infinite;
}
@keyframes app-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .app-splash-spinner { animation: none; border-top-color: rgba(26, 95, 208, 0.6); } }
.app-version { margin: 0; font-size: 0.8125rem; color: #4a5d7c; }
.app-version-footer { padding: 16px; text-align: center; }

/* The boot error screen (app/boot.js): plain, readable, above everything. */
.app-boot-error {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  background: #ffffff;
  color: #0e2a52;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  text-align: center;
}
.app-boot-title { margin: 0; font-size: 1.5rem; font-weight: 600; }
.app-boot-text { margin: 0; max-width: 24rem; }
.app-boot-code { margin: 0; font-size: 0.8125rem; color: #4a5d7c; }
.app-boot-retry {
  min-height: 44px;
  padding: 0 24px;
  border: 0;
  border-radius: 8px;
  background: #1a5fd0;
  color: #ffffff;
  font: inherit;
  font-weight: 600;
}