html.app-loading, html.app-loading body { overflow: hidden; }
#app-loader {
  position: fixed;
  inset: 0;
  z-index: 11000;
  display: grid;
  place-items: center;
  padding: max(24px, env(safe-area-inset-top)) 24px;
  background: var(--bg-base, #F5F7FA);
  color: var(--text-main, #140B28);
  opacity: 1;
  transition: opacity 240ms ease;
}
#app-loader[hidden] { display: none; }
#app-loader.is-leaving { opacity: 0; pointer-events: none; }
.loading-content { width: min(100%, 360px); text-align: center; }
.loading-mark { width: 104px; height: 100px; object-fit: contain; display: block; margin: 0 auto 24px; }
.loading-brand { font-family: 'Manrope', sans-serif; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 16px; }
#app-loader-title { font-size: clamp(1.4rem, 4vw, 1.8rem); letter-spacing: -.035em; margin-bottom: 12px; }
#app-loader-church { color: var(--brand-gold); font-weight: 600; min-height: 1.6em; }
#app-loader-detail { color: var(--text-muted); font-size: .88rem; margin-top: 8px; }
.loading-spinner { display: block; width: 26px; height: 26px; margin: 28px auto 0; border: 2px solid var(--bg-surface-hover); border-top-color: var(--accent-primary); border-radius: 50%; animation: loading-spin .8s linear infinite; }
#app-loader.has-error .loading-spinner { display: none; }
#app-loader-retry { width: auto; margin: 24px auto 0; }
html.app-loading body > header,
html.app-loading #app-content,
html.app-loading body > nav { opacity: 0; filter: blur(6px); pointer-events: none; }
body > header, #app-content, body > nav { transition: opacity 240ms ease, filter 240ms ease; }
header .brand-logo { height: 64px; width: 70px; object-fit: contain; flex-shrink: 0; }
.dark-mode .brand-logo, .dark-mode .loading-mark { filter: drop-shadow(0 0 .7px rgba(255, 255, 255, .75)); }
@keyframes loading-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  #app-loader, body > header, #app-content, body > nav, .view { transition: none; animation: none; }
  .loading-spinner { animation: none; }
}