#app-splash {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f2f2f7;
  transition: opacity 0.45s ease;
}

html.dark #app-splash { background: #050507; }

#app-splash::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(124, 58, 237, 0.18), transparent 70%);
}

#app-splash .as-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#app-splash .as-logo { display: block; width: 100px; height: 100px; overflow: visible; }
#app-splash .as-from { stop-color: #7c3aed; }
#app-splash .as-to { stop-color: #6366f1; }
html.dark #app-splash .as-from { stop-color: #ffffff; }
html.dark #app-splash .as-to { stop-color: #000dff; }
#app-splash .as-base { fill: #7c3aed; opacity: 0.12; }
html.dark #app-splash .as-base { fill: #ffffff; opacity: 0.10; }

#app-splash .as-px {
  animation: as-glow 1.6s ease-in-out infinite;
  fill: url("#as-logo-grad");
}

@keyframes as-glow {
  0%, 100% { fill-opacity: 0.18; }
  45% { fill-opacity: 1; }
}

#app-splash.as-hidden { opacity: 0; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  #app-splash .as-px { animation: none; fill-opacity: 0.85; }
}