/* BuzzLighter: фон кабинета. Подключается nginx через sub_filter (roles/cabinet).
   Светлая тема — большая мультяшная Земля, наполовину за левым краем, медленно вращается.
   Тёмная тема — стоковая (не трогаем). */

html.light #root, html.light #root > div { background: transparent !important; }

html.light body { background-color: #eef3fb !important; }

/* ---------- Земля (элемент вставляет nginx перед </body>) ---------- */
.bl-planet {
  --d: min(96vmin, 1000px);                /* диаметр планеты */
  position: fixed; left: calc(var(--d) * -0.4); top: 55%;   /* 40% шара за левым краем, край заходит под карточки */
  translate: 0 -50%;
  width: var(--d); height: var(--d); border-radius: 50%;
  overflow: hidden; z-index: -1; pointer-events: none;
  box-shadow:
    0 0 calc(var(--d) * .05) calc(var(--d) * .012) rgba(90, 180, 255, .55),
    0 0 calc(var(--d) * .2)  calc(var(--d) * .04)  rgba(90, 180, 255, .25);
}
.bl-planet__map {
  position: absolute; top: 0; left: 0; height: 100%;
  width: calc(var(--d) * 1.832 * 2);       /* две копии развёртки подряд (3048/1664 = 1.832) */
  background: url("/brand/earth-map-hd.webp") repeat-x 0 0 / 50% 100%;
  animation: bl-spin 160s linear infinite;
  will-change: transform;
}
@keyframes bl-spin { to { transform: translateX(-50%); } }

/* объём: блик, затемнение и голубая кромка атмосферы по краю */
.bl-planet::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background:
    radial-gradient(circle at 62% 30%, rgba(255,255,255,.34), rgba(255,255,255,0) 34%),
    radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 52%, rgba(10,45,120,.35) 76%, rgba(4,20,70,.7) 100%);
  box-shadow: inset 0 0 calc(var(--d) * .045) rgba(170, 225, 255, .9);
}

/* тёмная тема — стоковая, планета скрыта */
html:not(.light) .bl-planet { display: none; }

/* телефоны: Земля снизу по центру, видна верхняя половина — как горизонт */
@media (max-width: 900px) {
  .bl-planet { --d: 130vw; left: 50%; top: auto; bottom: calc(var(--d) * -0.5); translate: -50% 0; opacity: .9; }
}

/* «уменьшить движение» в системе — планета не крутится */
@media (prefers-reduced-motion: reduce) {
  .bl-planet__map { animation: none; }
}

/* ---------- «стекло» на карточках (светлая тема) ----------
   Классы — из сборки кабинета v1.82.0. Если после обновления кабинета
   карточки снова станут белыми, классы поменялись — найти заново. */

/* большие карточки (трафик и т.п.): фон задан инлайн-градиентом, перебиваем !important */
html.light .rounded-3xl.lg\:backdrop-blur-xl {
  background-image: linear-gradient(145deg, rgba(255,255,255,.74) 0%, rgba(255,255,255,.6) 100%) !important;
  border: 1px solid rgba(47, 128, 237, .14) !important;
  box-shadow: 0 12px 40px rgba(30, 60, 120, .12), inset 0 1px 0 rgba(255,255,255,.8) !important;
}

/* нижние карточки («Баланс», «Рефералы») */
html.light .rounded-\[14px\].p-3\.5.flex-1 {
  background: linear-gradient(145deg, rgba(255,255,255,.86), rgba(255,255,255,.7)) !important;
  border: 1px solid rgba(47, 128, 237, .14) !important;
  box-shadow: 0 10px 30px rgba(30, 60, 120, .13), inset 0 1px 0 rgba(255,255,255,.8) !important;
}

/* размытие под стеклом — только на больших экранах: на телефонах размытие
   поверх вращающейся планеты заметно греет и тормозит слабые устройства */
@media (min-width: 1024px) {
  html.light .rounded-3xl.lg\:backdrop-blur-xl,
  html.light .rounded-\[14px\].p-3\.5.flex-1 {
    -webkit-backdrop-filter: blur(18px) saturate(150%) !important;
    backdrop-filter: blur(18px) saturate(150%) !important;
  }
}
@media (max-width: 1023px) {
  html.light .rounded-3xl.lg\:backdrop-blur-xl { background-image: linear-gradient(145deg, rgba(255,255,255,.9), rgba(255,255,255,.82)) !important; }
  html.light .rounded-\[14px\].p-3\.5.flex-1 { background: rgba(255,255,255,.85) !important; }
}