html.has-sky,
html.has-sky body,
html.has-sky #root,
body.has-sky {
  background: #06070c !important;
  background-color: #06070c !important;
  background-image: none !important;
}
body.has-sky .bg-glow.sky {
  z-index: 0;
  overflow: hidden;
  background:
    radial-gradient(900px 520px at 8% 12%, rgba(28, 34, 58, 0.45), transparent 70%),
    radial-gradient(800px 480px at 94% 88%, rgba(22, 18, 36, 0.4), transparent 68%),
    #06070c;
}
.sky-haze,
.sky-dust,
.sky-core {
  position: absolute;
  left: -24%;
  top: 10%;
  width: 148%;
  height: 52%;
  transform: rotate(-26deg);
  pointer-events: none;
}
.sky-haze {
  background:
    radial-gradient(ellipse 22% 55% at 18% 50%, rgba(168, 176, 210, 0.09), transparent 72%),
    radial-gradient(ellipse 28% 62% at 46% 51%, rgba(210, 200, 190, 0.11), transparent 74%),
    radial-gradient(ellipse 20% 58% at 64% 48%, rgba(255, 214, 168, 0.13), transparent 70%),
    radial-gradient(ellipse 26% 60% at 82% 52%, rgba(150, 168, 210, 0.08), transparent 74%),
    linear-gradient(
      to bottom,
      transparent 0%,
      rgba(190, 198, 220, 0.05) 38%,
      rgba(236, 224, 208, 0.1) 50%,
      rgba(190, 198, 220, 0.045) 62%,
      transparent 100%
    );
  filter: blur(28px);
  opacity: 0.9;
  animation: skyDrift 140s ease-in-out infinite;
}
.sky-core {
  background: radial-gradient(ellipse 16% 42% at 63% 49%, rgba(255, 206, 150, 0.16), transparent 70%);
  filter: blur(36px);
  opacity: 0.75;
  animation: skyDrift 140s ease-in-out infinite;
}
.sky-dust {
  background:
    radial-gradient(ellipse 12% 18% at 34% 47%, rgba(4, 3, 6, 0.55), transparent 70%),
    radial-gradient(ellipse 10% 22% at 52% 54%, rgba(6, 5, 8, 0.5), transparent 72%),
    radial-gradient(ellipse 14% 16% at 70% 46%, rgba(5, 4, 7, 0.48), transparent 70%),
    radial-gradient(ellipse 9% 20% at 78% 56%, rgba(4, 3, 6, 0.42), transparent 72%);
  filter: blur(18px);
  mix-blend-mode: multiply;
  opacity: 0.7;
  animation: skyDrift 140s ease-in-out infinite;
}
.sky-plane {
  position: absolute;
  left: -24%;
  top: 10%;
  width: 148%;
  height: 52%;
  transform: rotate(-26deg);
  overflow: hidden;
  animation: skyDrift 140s ease-in-out infinite;
}
.sky-stars,
.sky-stars-far,
.sky-stars-band {
  position: absolute;
  inset: 0;
}
.sky-stars,
.sky-stars-far {
  inset: -8%;
  width: 116%;
  height: 116%;
}
.sky-stars-far { animation: skyPan 180s linear infinite; }
.sky-stars { animation: skyPan 120s linear infinite reverse; }
.sky-dot {
  position: absolute;
  border-radius: 50%;
  background: #f4f6ff;
}
.sky-dot.twinkle {
  animation: skyTwinkle 5.4s ease-in-out infinite;
}
.sky-meteor {
  position: absolute;
  width: 88px;
  height: 1px;
  border-radius: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75) 70%, #e8f0ff);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.35);
  transform-origin: left center;
  animation: skyMeteor 0.95s ease-in forwards;
}
@keyframes skyDrift {
  0%, 100% { transform: rotate(-26deg) translateX(-1.2%); }
  50% { transform: rotate(-26deg) translateX(1.4%); }
}
@keyframes skyPan {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-4%, 2%, 0); }
}
@keyframes skyTwinkle {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.85; }
}
@keyframes skyMeteor {
  0% { opacity: 0; transform: rotate(var(--angle)) translateX(0); }
  14% { opacity: 0.85; }
  100% { opacity: 0; transform: rotate(var(--angle)) translateX(110vw); }
}
@media (prefers-reduced-motion: reduce) {
  .sky-haze,
  .sky-dust,
  .sky-core,
  .sky-plane,
  .sky-stars,
  .sky-stars-far,
  .sky-dot.twinkle { animation: none; }
  .sky-meteor { display: none; }
}

body.has-sky .glass {
  background: rgba(8, 10, 16, 0.58);
}
body.has-sky .featured {
  background:
    linear-gradient(180deg, rgba(159, 232, 214, 0.1), transparent 48%),
    rgba(8, 10, 16, 0.58);
}
body.has-sky .privacy-list li,
body.has-sky .hero-pills li {
  background: rgba(255, 255, 255, 0.05);
}
body.has-sky .wrap,
body.has-sky main,
body.has-sky .footer {
  position: relative;
  z-index: 1;
}
body.has-sky .cabinet .card,
body.has-sky .qr-account-card {
  background: rgba(8, 10, 16, 0.58) !important;
}
body.has-sky .email-login input,
body.has-sky .promo input {
  background: rgba(8, 10, 16, 0.45);
}
body.has-sky .btn.ghost {
  background: rgba(8, 10, 16, 0.4);
}
body.has-sky .chip,
body.has-sky .map-expand-btn {
  background: rgba(255, 255, 255, 0.06);
}
body.has-sky #map-stage[data-mode="full"] {
  background: rgba(6, 8, 12, 0.88);
}
body.has-sky .qr-bar-inner {
  background: rgba(8, 10, 16, 0.58);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}
body.has-sky .qr-lang-btn {
  background-color: rgba(8, 10, 16, 0.4);
}
body.has-sky .mantine-Card-root,
body.has-sky .mantine-Paper-root.mantine-Card-root {
  background: rgba(8, 10, 16, 0.58) !important;
  box-shadow: none !important;
}
body.has-sky .header-wrapper {
  background: rgba(8, 10, 16, 0.58) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body.has-sky .mantine-Modal-content {
  background: rgba(8, 10, 16, 0.82) !important;
}
body.has-sky #root {
  position: relative;
  z-index: 1;
  background: transparent !important;
}
