/* Official Smart Teacher mobile background. Scope to modern mobile/PWA root only. */
.st-mobile-shell {
  --st-bg-0: #050817;
  --st-bg-1: #080B24;
  --st-bg-2: #0E1236;
  min-height: 100dvh;
  background:
    radial-gradient(72rem 72rem at 12% 14%, rgba(124,92,255,.20), transparent 56%),
    radial-gradient(66rem 66rem at 92% 48%, rgba(57,120,255,.16), transparent 58%),
    radial-gradient(52rem 34rem at 50% 92%, rgba(56,217,255,.08), transparent 62%),
    linear-gradient(180deg, var(--st-bg-0) 0%, var(--st-bg-1) 36%, #090D2B 72%, var(--st-bg-0) 100%);
  position: relative;
  isolation: isolate;
  overflow-x: clip;
}
.st-mobile-shell::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: url('./official-particles.svg') repeat;
  background-size: 480px 720px;
  opacity: .48;
  animation: st-stars-drift 24s linear infinite alternate;
}
.st-mobile-shell::after {
  content: "";
  position: fixed;
  left: -16%; right: -16%; bottom: -11%; height: 34vh;
  z-index: -1;
  pointer-events: none;
  border-radius: 50% 50% 0 0;
  background:
    radial-gradient(ellipse at 50% 4%, rgba(56,217,255,.16), transparent 45%),
    radial-gradient(ellipse at 42% 2%, rgba(124,92,255,.22), transparent 55%);
  filter: blur(14px);
}
@keyframes st-stars-drift {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-10px,18px,0); }
}
@media (prefers-reduced-motion: reduce) {
  .st-mobile-shell::before { animation: none; }
}