/* iOS safe area support */
body { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
.shell { padding-top: max(1.75rem, env(safe-area-inset-top)); }

/* App splash overlay — shows briefly on standalone launch */
#appSplash {
  position: fixed; inset: 0; z-index: 9999;
  background: #000000;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
  animation: splashFade 0.5s ease 1.4s forwards;
  pointer-events: none;
}
#appSplash.hidden { display: none; }
@keyframes splashFade { to { opacity: 0; visibility: hidden; pointer-events: none; } }

.splash-icon {
  width: 96px; height: 96px; border-radius: 22px;
  background: rgba(10,132,255,0.10);
  border: 1px solid rgba(10,132,255,0.22);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 32px rgba(10,132,255,0.18), 0 0 64px rgba(191,90,242,0.08);
  animation: splashIconPop 0.6s cubic-bezier(0.22,1,0.36,1) 0.1s both;
}
@keyframes splashIconPop {
  from { opacity: 0; transform: scale(0.7); }
  to   { opacity: 1; transform: scale(1); }
}
.splash-icon svg { width: 56px; height: 56px; }

.splash-title {
  font-family: var(--font-display);
  font-size: 28px; font-weight: 700; letter-spacing: -0.03em;
  background: linear-gradient(135deg, #f5f5f7 0%, #0a84ff 55%, #bf5af2 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  animation: splashTitleIn 0.5s cubic-bezier(0.22,1,0.36,1) 0.3s both;
}
.splash-sub {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase;
  color: rgba(255,255,255,0.3);
  animation: splashTitleIn 0.5s cubic-bezier(0.22,1,0.36,1) 0.45s both;
}
@keyframes splashTitleIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.splash-bar {
  width: 120px; height: 2px; border-radius: 2px;
  background: var(--border, rgba(255,255,255,0.06));
  overflow: hidden;
  animation: splashTitleIn 0.4s ease 0.55s both;
}
.splash-bar-fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, #0a84ff, #bf5af2);
  animation: splashBarFill 1s cubic-bezier(0.22,1,0.36,1) 0.6s forwards;
  box-shadow: 0 0 8px rgba(10,132,255,0.6);
}
@keyframes splashBarFill { to { width: 100%; } }