/* ============================================================
   Shared — colorful galaxies lottie on pastel-blue sky
   Used by About, QUICKI calculator, Wearables dashboard
   ============================================================ */
.gx-page {
  background: #cfe6ff;
  overflow-x: hidden;
}

.gx-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.gx-bg lottie-player {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  display: block;
}
.gx-bg-lighten {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(120% 80% at 50% -10%, rgba(255, 255, 255, 0.5) 0%, transparent 55%);
}
.gx-bg-scrim {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(214, 233, 255, 0.42) 0%, rgba(214, 233, 255, 0.58) 100%);
}

body.night-mode.gx-page {
  background: #0a1628;
}

body.night-mode.gx-page .gx-bg-scrim {
  background: linear-gradient(180deg, rgba(10, 22, 40, 0.72) 0%, rgba(15, 23, 42, 0.88) 100%);
}

body.night-mode.gx-page .gx-bg-lighten {
  background: radial-gradient(120% 80% at 50% -10%, rgba(255, 255, 255, 0.08) 0%, transparent 55%);
}

/* About + QUICKI — lottie only, no pastel veil or page tint */
.gx-page.gx-bare {
  background: transparent;
}

body.night-mode.gx-page.gx-bare {
  background: transparent;
}

/* ── Bright galaxies sky (About + Ika day) — warm white → amber under transparent lottie ── */
.clearli-gx-sky-bright {
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #fffef7 38%,
    #fffbeb 72%,
    #fef9c3 100%
  );
}

.clearli-gx-sky-bright-lighten {
  pointer-events: none;
  background: radial-gradient(
    120% 85% at 50% -5%,
    rgba(255, 255, 255, 0.85) 0%,
    rgba(255, 251, 235, 0.35) 42%,
    transparent 68%
  );
}

.about-page .about-gx-lighten.clearli-gx-sky-bright-lighten {
  position: fixed;
  inset: 0;
  z-index: 1;
}

.clearli-gx-sky-bright-lottie,
.gx-bg.clearli-gx-sky-bright lottie-player,
.premium-coach-bg.clearli-gx-sky-bright .premium-coach-lottie {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  display: block;
  opacity: 1;
  filter: none;
}

.premium-coach-bg .clearli-gx-sky-bright-lighten {
  position: absolute;
  inset: 0;
  z-index: 2;
}