.skeleton-wheel, .skeleton-list {
  border-radius: var(--r-lg);
  background: linear-gradient(100deg, color-mix(in srgb, var(--purple-glow) 6%, transparent) 30%,
    color-mix(in srgb, var(--purple-glow) 14%, transparent) 50%, color-mix(in srgb, var(--purple-glow) 6%, transparent) 70%), var(--surface-base, transparent);
  background-size: 220% 100%;
  animation: shimmer 1.5s infinite linear;
}
.skeleton-wheel { aspect-ratio: 1 / 1; border-radius: 50%; }
.skeleton-list { height: 300px; }
.strip-skeleton {
  height: 92px;
  width: 100%;
  border-radius: var(--r-md);
  background: linear-gradient(color-mix(in srgb, var(--purple-glow) 7%, transparent), color-mix(in srgb, var(--purple-glow) 7%, transparent)), var(--surface-base, transparent);
}

@keyframes shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}


.page-skeleton {
  position: fixed;
  z-index: 30;
  overflow: hidden;
  background: transparent;
}
#view[aria-busy="true"] { visibility: hidden; }
.page-loader {
  position: absolute;
  inset: 0 0 calc(var(--tabbar-h) + env(safe-area-inset-bottom)) 0;
  display: grid;
  place-items: center;
}
@media (min-width: 850px) { .page-loader { bottom: 0; } }