/* App backdrop layer — switch presets via AppBackground + config.js */

#app-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

#app-backdrop-gradient {
  position: absolute;
  inset: 0;
  transition: background 0.35s ease;
}

#star-container {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

#star-container .star {
  position: absolute;
  background: #fff;
  border-radius: 50%;
  opacity: 0.8;
  animation: appStarTwinkle var(--duration, 3s) infinite ease-in-out;
  will-change: transform, opacity;
}

@keyframes appStarTwinkle {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.2); }
}

body.app-bg-managed {
  background: var(--app-bg-base, #0b0f14);
}

body.app-bg-managed #loader {
  background: var(--app-bg-base, #0b0f14);
}

body.app-bg-managed .page {
  position: relative;
  z-index: 1;
}

body.app-bg-stars-warp #page-dashboard .phone-wrap {
  background: none;
}


/* hide leftover stars after classic background */
#star-container .star {
  display: none !important;
  animation: none !important;
}