/* =======================================================
   GameStores background video + bubbles + monitoring fix
   ======================================================= */

html,
body{
  min-height: 100%;
  background: transparent !important;
  overflow-x: hidden !important;
}

body{
  position: relative !important;
}

/* фон */
#gsCustomBgWrap{
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: #06111d;
}

#gsCustomBgVideo{
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
  filter: brightness(.38) saturate(1.08) contrast(1.05);
  transform: scale(1.04);
}

#gsCustomBgOverlay{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 450px at 20% -10%, rgba(59,213,255,.14), transparent 60%),
    radial-gradient(800px 420px at 85% 10%, rgba(42,111,216,.13), transparent 55%),
    linear-gradient(180deg, rgba(4,12,24,.35), rgba(4,12,24,.68));
}

/* пузырики */
#gsBubbleLayer{
  position: absolute;
  inset: 0;
  overflow: hidden;
}

#gsBubbleLayer span{
  position: absolute;
  bottom: -120px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%,
      rgba(255,255,255,.38),
      rgba(255,255,255,.14) 16%,
      rgba(59,213,255,.14) 40%,
      rgba(59,213,255,.05) 62%,
      transparent 74%);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow:
    inset 0 0 14px rgba(255,255,255,.08),
    0 0 12px rgba(59,213,255,.08);
  animation: gsBubbleRise linear infinite;
}

#gsBubbleLayer span::before{
  content: "";
  position: absolute;
  top: 18%;
  left: 22%;
  width: 28%;
  height: 28%;
  border-radius: 50%;
  background: rgba(255,255,255,.24);
  filter: blur(1px);
}

@keyframes gsBubbleRise{
  0%{
    transform: translate3d(0, 0, 0) scale(.7);
    opacity: 0;
  }
  10%{
    opacity: inherit;
  }
  50%{
    transform: translate3d(var(--drift, 0px), -50vh, 0) scale(1);
  }
  100%{
    transform: translate3d(calc(var(--drift, 0px) * -1), -115vh, 0) scale(1.12);
    opacity: 0;
  }
}

/* делаем блоки чуть прозрачнее, чтобы было видно видео */
.Header-module__wrapper,
.Product-module__wrapper,
.ModalLayout-module__modal,
.MonitoringServer-module__wrapper,
.ProfileContent-module__infoWrapper.ProfileContent-module__box,
.boxBody,
.boxFooter,
.Search-module__wrapper,
.ProfileContent-module__inputWrapper,
.PlayerBalanceModal-module__inputWrapper,
.TotalSum-module__inputWrapper,
.Servers-module__server,
.Categories-module__category{
  background: rgba(10,29,51,.62) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* если старый css задаёт body фон — жёстко убираем */
body,
.body,
.app,
#app,
main{
  background-color: transparent !important;
}

/* ===== мониторинг: чтобы не вылазило ===== */

.MonitoringServer-module__wrapper{
  position: relative !important;
  overflow: hidden !important;
  border-radius: 16px !important;
  padding: 14px 42px 14px 14px !important;
}

.MonitoringServer-module__wrapper *{
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.MonitoringServer-module__name{
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
  margin-bottom: 6px !important;
}

.MonitoringServer-module__progressWrapper,
.MonitoringServer-module__progressBarWrapper,
.MonitoringServer-module__info{
  max-width: 100% !important;
  overflow: hidden !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}

.MonitoringServer-module__progressBar,
.MonitoringServer-module__progressBarAnim{
  max-width: 100% !important;
  border-radius: 999px !important;
}

.MonitoringServer-module__info{
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

.MonitoringServer-module__wrapper a,
.MonitoringServer-module__link{
  position: absolute !important;
  right: 14px !important;
  bottom: 14px !important;
  width: 18px !important;
  height: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* скрыть возможные старые снежинки */
.snowflakes,
.snowflake,
#snow,
#snowflakes{
  display: none !important;
}

@media (max-width: 768px){
  #gsBubbleLayer span:nth-child(n+18){
    display: none;
  }

  #gsCustomBgVideo{
    filter: brightness(.32) saturate(1.04) contrast(1.02);
  }
}
/* =======================================================
   HYDRA RUST — OCEAN BLUE REWORK
   вставить В САМЫЙ КОНЕЦ CSS
   ======================================================= */

:root{
  --gs-ocean-1: rgba(4, 18, 39, .96);
  --gs-ocean-2: rgba(7, 28, 58, .94);
  --gs-ocean-3: rgba(10, 47, 91, .88);
  --gs-ocean-4: rgba(19, 96, 165, .92);

  --gs-cyan: #79deff;
  --gs-blue: #55a9ff;
  --gs-blue-2: #2d7fe8;

  --gs-text: #edf8ff;
  --gs-text-soft: #9fcbff;
  --gs-text-dim: #7ea9d8;

  --gs-line: rgba(120,205,255,.16);
  --gs-line-strong: rgba(120,205,255,.34);

  --gs-shadow:
    0 14px 36px rgba(0,0,0,.26),
    0 0 24px rgba(41,137,255,.10);

  --gs-glow:
    0 0 0 1px rgba(255,255,255,.02) inset,
    0 0 18px rgba(68,168,255,.10);
}

/* ===== фон делаем чуть глубже и "морским" ===== */

#gsCustomBgVideo{
  filter: brightness(.28) saturate(1.12) contrast(1.08) !important;
}

#gsCustomBgOverlay{
  background:
    radial-gradient(1100px 600px at 18% -8%, rgba(80,221,255,.17), transparent 58%),
    radial-gradient(900px 520px at 88% 10%, rgba(48,117,230,.18), transparent 56%),
    radial-gradient(700px 400px at 50% 100%, rgba(18,78,145,.10), transparent 62%),
    linear-gradient(180deg, rgba(2,9,20,.28) 0%, rgba(2,14,30,.52) 42%, rgba(2,10,22,.80) 100%) !important;
}

/* ===== общие панели: вместо серого — глубокий морской синий ===== */

.Header-module__wrapper,
.ModalLayout-module__modal,
.MonitoringServer-module__wrapper,
.ProfileContent-module__infoWrapper.ProfileContent-module__box,
.boxBody,
.boxFooter,
.Search-module__wrapper,
.ProfileContent-module__inputWrapper,
.PlayerBalanceModal-module__inputWrapper,
.TotalSum-module__inputWrapper{
  position: relative !important;
  isolation: isolate !important;
  background:
    linear-gradient(180deg, rgba(17,73,134,.18) 0%, rgba(17,73,134,0) 18%),
    linear-gradient(180deg, var(--gs-ocean-2) 0%, var(--gs-ocean-1) 100%) !important;
  border: 1px solid var(--gs-line) !important;
  box-shadow: var(--gs-shadow), var(--gs-glow) !important;
  backdrop-filter: blur(14px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.08) !important;
  color: var(--gs-text) !important;
  border-radius: 18px !important;
}

.Header-module__wrapper::before,
.ModalLayout-module__modal::before,
.MonitoringServer-module__wrapper::before,
.ProfileContent-module__infoWrapper.ProfileContent-module__box::before,
.boxBody::before,
.boxFooter::before,
.Search-module__wrapper::before,
.ProfileContent-module__inputWrapper::before,
.PlayerBalanceModal-module__inputWrapper::before,
.TotalSum-module__inputWrapper::before{
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 56px;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(103,196,255,.10), rgba(103,196,255,.03) 42%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

.Header-module__wrapper > *,
.ModalLayout-module__modal > *,
.MonitoringServer-module__wrapper > *,
.ProfileContent-module__infoWrapper.ProfileContent-module__box > *,
.boxBody > *,
.boxFooter > *,
.Search-module__wrapper > *,
.ProfileContent-module__inputWrapper > *,
.PlayerBalanceModal-module__inputWrapper > *,
.TotalSum-module__inputWrapper > *{
  position: relative;
  z-index: 1;
}

/* ===== карточки товаров / серверов / категорий ===== */

.Product-module__wrapper,
.Servers-module__server,
.Categories-module__category{
  position: relative !important;
  isolation: isolate !important;
  background:
    linear-gradient(180deg, rgba(14,58,108,.15) 0%, rgba(14,58,108,0) 20%),
    linear-gradient(180deg, rgba(8,31,61,.96) 0%, rgba(5,21,43,.96) 100%) !important;
  border: 1px solid rgba(120,205,255,.14) !important;
  box-shadow:
    0 10px 26px rgba(0,0,0,.24),
    0 0 18px rgba(35,132,255,.08) !important;
  color: var(--gs-text-soft) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

.Product-module__wrapper{
  border-radius: 18px !important;
  overflow: hidden !important;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background .18s ease !important;
}

.Product-module__wrapper:hover{
  transform: translateY(-3px) !important;
  border-color: rgba(120,205,255,.26) !important;
  box-shadow:
    0 18px 32px rgba(0,0,0,.28),
    0 0 22px rgba(42,139,255,.14) !important;
  background:
    linear-gradient(180deg, rgba(18,74,136,.18) 0%, rgba(18,74,136,0) 22%),
    linear-gradient(180deg, rgba(9,38,74,.98) 0%, rgba(6,24,49,.98) 100%) !important;
}

.Servers-module__server,
.Categories-module__category{
  border-radius: 12px !important;
  transition:
    transform .16s ease,
    border-color .16s ease,
    box-shadow .16s ease,
    background .16s ease !important;
}

.Servers-module__server:hover,
.Categories-module__category:hover{
  transform: translateY(-1px) !important;
  border-color: rgba(120,205,255,.28) !important;
  box-shadow:
    0 12px 22px rgba(0,0,0,.22),
    0 0 18px rgba(42,139,255,.12) !important;
  background:
    linear-gradient(180deg, rgba(12,47,87,.98) 0%, rgba(7,28,53,.98) 100%) !important;
  color: #dff3ff !important;
}

/* активные вкладки / категории / режимы */
.Servers-module__server[class*="active"],
.Servers-module__server[class*="selected"],
.Servers-module__server[aria-selected="true"],
.Categories-module__category[class*="active"],
.Categories-module__category[class*="selected"],
.Categories-module__category[aria-selected="true"]{
  background:
    linear-gradient(135deg, rgba(37,118,214,.98), rgba(89,194,255,.92)) !important;
  border-color: rgba(166,230,255,.42) !important;
  color: #ffffff !important;
  box-shadow:
    0 14px 28px rgba(38,131,236,.28),
    inset 0 1px 0 rgba(255,255,255,.18) !important;
}

/* ===== мониторинг — делаем сочнее и ближе к референсу ===== */

.MonitoringServer-module__wrapper{
  position: relative !important;
  overflow: hidden !important;
  border-radius: 18px !important;
  padding: 16px 42px 16px 16px !important;
  background:
    radial-gradient(180px 100px at 88% 0%, rgba(115,222,255,.10), transparent 72%),
    linear-gradient(180deg, rgba(8,34,67,.98) 0%, rgba(5,22,45,.98) 100%) !important;
  border: 1px solid rgba(120,205,255,.16) !important;
}

.MonitoringServer-module__name{
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
  margin-bottom: 8px !important;
  color: #f3fbff !important;
  font-weight: 700 !important;
  letter-spacing: .2px !important;
  text-shadow: 0 0 10px rgba(105,194,255,.08) !important;
}

.MonitoringServer-module__progressWrapper,
.MonitoringServer-module__progressBarWrapper,
.MonitoringServer-module__info{
  max-width: 100% !important;
  overflow: hidden !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}

.MonitoringServer-module__progressBarWrapper{
  background: rgba(4,18,37,.86) !important;
  border: 1px solid rgba(120,205,255,.14) !important;
  border-radius: 999px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    inset 0 0 12px rgba(0,0,0,.18) !important;
}

.MonitoringServer-module__progressBar,
.MonitoringServer-module__progressBarAnim{
  max-width: 100% !important;
  border-radius: 999px !important;
  background:
    linear-gradient(90deg, #3f96ff 0%, #72ddff 100%),
    repeating-linear-gradient(-45deg,
      rgba(255,255,255,.16) 0 10px,
      rgba(255,255,255,0) 10px 20px) !important;
  background-blend-mode: overlay !important;
  box-shadow:
    0 0 16px rgba(76,167,255,.30),
    inset 0 1px 0 rgba(255,255,255,.14) !important;
}

.MonitoringServer-module__info{
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  color: var(--gs-text-soft) !important;
}

.MonitoringServer-module__wrapper a,
.MonitoringServer-module__link{
  position: absolute !important;
  right: 14px !important;
  bottom: 14px !important;
  width: 18px !important;
  height: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #8edfff !important;
  opacity: .95 !important;
}

/* ===== поиск / инпуты ===== */

.Search-module__wrapper,
.ProfileContent-module__inputWrapper,
.PlayerBalanceModal-module__inputWrapper,
.TotalSum-module__inputWrapper{
  border-radius: 14px !important;
}

.Search-module__wrapper input,
.ProfileContent-module__inputWrapper input,
.PlayerBalanceModal-module__inputWrapper input,
.TotalSum-module__inputWrapper input,
.Search-module__wrapper textarea,
.ProfileContent-module__inputWrapper textarea,
.PlayerBalanceModal-module__inputWrapper textarea,
.TotalSum-module__inputWrapper textarea{
  background: rgba(4,17,36,.72) !important;
  border: 1px solid rgba(120,205,255,.12) !important;
  color: #e4f6ff !important;
  border-radius: 12px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    inset 0 0 0 999px rgba(0,0,0,0) !important;
}

.Search-module__wrapper input::placeholder,
.ProfileContent-module__inputWrapper input::placeholder,
.PlayerBalanceModal-module__inputWrapper input::placeholder,
.TotalSum-module__inputWrapper input::placeholder{
  color: rgba(159,203,255,.54) !important;
}

/* ===== кнопки — вместо серо-синих делаем насыщенный голубой ===== */

button,
[class*="Button-module__button"],
a[class*="button"],
input[type="submit"],
input[type="button"]{
  background:
    linear-gradient(135deg, #2e82ea 0%, #5cc8ff 100%) !important;
  border: 1px solid rgba(172,232,255,.30) !important;
  color: #ffffff !important;
  border-radius: 12px !important;
  box-shadow:
    0 12px 26px rgba(37,128,233,.28),
    inset 0 1px 0 rgba(255,255,255,.18) !important;
  transition:
    transform .16s ease,
    filter .16s ease,
    box-shadow .16s ease !important;
}

button:hover,
[class*="Button-module__button"]:hover,
a[class*="button"]:hover,
input[type="submit"]:hover,
input[type="button"]:hover{
  transform: translateY(-1px) !important;
  filter: brightness(1.05) !important;
  box-shadow:
    0 16px 28px rgba(37,128,233,.34),
    inset 0 1px 0 rgba(255,255,255,.22) !important;
}

/* ===== текстовые акценты ===== */

body,
body *{
  scrollbar-color: rgba(95,179,255,.45) rgba(5,22,45,.55);
}

h1, h2, h3, h4, h5, h6{
  color: #f2fbff !important;
}

small,
span,
label,
p{
  color: inherit;
}

/* вторичный текст */
[class*="subtitle"],
[class*="description"],
[class*="hint"],
[class*="label"]{
  color: var(--gs-text-soft) !important;
}

/* ===== мягкие линии и внутренние разделители ===== */

.boxBody,
.boxFooter,
.Header-module__wrapper,
.ModalLayout-module__modal,
.Product-module__wrapper,
.MonitoringServer-module__wrapper{
  outline: 1px solid rgba(255,255,255,.015) !important;
}

/* ===== чуть более "уютные" пузырьки, не убирая их ===== */

#gsBubbleLayer span{
  background:
    radial-gradient(circle at 30% 30%,
      rgba(255,255,255,.40),
      rgba(255,255,255,.16) 16%,
      rgba(110,225,255,.18) 40%,
      rgba(72,152,255,.08) 62%,
      transparent 74%) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow:
    inset 0 0 14px rgba(255,255,255,.08),
    0 0 14px rgba(84,181,255,.10) !important;
}