/* DEE installed-app splash overlay */
.dee-pwa-splash {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: max(1.5rem, env(safe-area-inset-top))
    max(1.5rem, env(safe-area-inset-right))
    max(1.5rem, env(safe-area-inset-bottom))
    max(1.5rem, env(safe-area-inset-left));
  background:
    radial-gradient(circle at 50% 35%, rgba(34, 197, 94, 0.16), transparent 38%),
    #ffffff;
  color: #0f172a;
  opacity: 0;
  visibility: hidden;
  transition: opacity 280ms ease, visibility 280ms ease;
}

.dee-pwa-splash.is-visible {
  opacity: 1;
  visibility: visible;
}

.dee-pwa-splash.is-leaving {
  opacity: 0;
  visibility: hidden;
}

.dee-pwa-splash__mark {
  width: 108px;
  height: 108px;
  display: grid;
  place-items: center;
  margin-bottom: 0.45rem;
  border-radius: 28px;
  background: #ffffff;
  box-shadow: 0 18px 45px rgba(22, 163, 74, 0.2);
}

.dee-pwa-splash__mark img {
  width: 88px;
  height: 88px;
  object-fit: contain;
}

.dee-pwa-splash strong {
  font: 800 clamp(1.2rem, 4vw, 1.55rem)/1.2 Inter, system-ui, sans-serif;
  letter-spacing: -0.025em;
}

.dee-pwa-splash > span {
  color: #64748b;
  font: 600 0.78rem/1.4 Inter, system-ui, sans-serif;
  text-align: center;
}

.dee-pwa-splash__loader {
  width: 34px;
  height: 3px;
  margin-top: 1.1rem;
  overflow: hidden;
  border-radius: 999px;
  background: #dcfce7;
}

.dee-pwa-splash__loader::after {
  content: '';
  display: block;
  width: 45%;
  height: 100%;
  border-radius: inherit;
  background: #16a34a;
  animation: deePwaSplashLoad 900ms ease-in-out infinite alternate;
}

@keyframes deePwaSplashLoad {
  from { transform: translateX(0); }
  to { transform: translateX(125%); }
}

@media (prefers-reduced-motion: reduce) {
  .dee-pwa-splash,
  .dee-pwa-splash__loader::after {
    animation: none;
    transition: none;
  }
}