/* === БАЗОВЫЕ ПЕРЕМЕННЫЕ (светло-серые) === */
:root {
  --bg-deep: #1e1e1e;
  --bg-surface: #2b2b2b;
  --bg-elevated: #3a3a3a;
  --bg-hover: #4a4a4a;
  --text-primary: #e8e8e8;
  --text-secondary: #b0b0b0;
  --border: #4a4a4a;
  --accent: #888888;
  --accent-hover: #aaaaaa;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --transition: 0.25s ease;
}

/* =========================================
       ИСПРАВЛЕНИЕ: РАСТЯГИВАЕМ И ФИКСИРУЕМ ФОН
========================================= */
html, body {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 100vh !important;
  background: radial-gradient(circle at 15% 20%,#505050 0%,transparent 35%),
              radial-gradient(circle at 85% 10%,#424242 0%,transparent 35%),
              radial-gradient(circle at 50% 90%,#363636 0%,transparent 45%),
              linear-gradient(180deg, #262626, #1d1d1d) !important;
  background-size: 160% 160% !important;
  animation: backgroundMove 22s ease infinite !important;
  overflow-x: hidden;
}

body, .gs-body {
  color: var(--text-primary);
}

/* Объединяем все эффекты (шум + виньетка) в один слой */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  /* Шум */
  background-image: radial-gradient(rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.08;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
  /* Виньетка */
  background: radial-gradient(circle, transparent 45%, rgba(0,0,0,.30));
}

@keyframes backgroundMove{
    0%{ background-position: 0% 0%, 100% 0%, 50% 100%, center; }
    50%{ background-position: 25% 20%, 75% 10%, 45% 80%, center; }
    100%{ background-position: 0% 0%, 100% 0%, 50% 100%, center; }
}

/* --- ЕДИНЫЙ ФОН ДЛЯ ВСЕХ ОСНОВНЫХ БЛОКОВ --- */
.Widgets-module__wrapper,
.Shop-module__wrapper,
.boxHeader,
.boxBody,
.boxFooter,
.MonitoringWidget-module__body,
.MonitoringWidget-module__updatingLoaderWrapper,
.PlayerMenuMobile-module__menu,
.PlayerMenuMobile-module__body {
  background: var(--bg-surface) !important;
  background-color: var(--bg-surface) !important;
}
.MonitoringWidget-module__header,
.Shop-module__header,
.boxHeader {
  background: var(--bg-surface) !important;
}

/* --- СКРУГЛЕНИЕ И ОБНУЛЕНИЕ ОТСТУПОВ СНИЗУ --- */
div, section, article, header, footer, nav, aside,
.card, .panel, .widget, .product-card, .gs-product, .shop-item,
.info-box, .alert, .modal-content, .dropdown-menu,
.server-block, .server-info, .monitoring-row, .status-box,
.Widgets-module__wrapper, .Widgets-module__widgetWrapper,
.MonitoringWidget-module__header, .MonitoringWidget-module__body,
.MonitoringWidget-module__updatingLoaderWrapper,
.boxHeader, .boxBody, .boxFooter {
  border-radius: var(--radius-md) !important;
}
.Widgets-module__wrapper, .Shop-module__wrapper {
  margin-bottom: 0 !important;
}

/* --- КАРТОЧКИ ТОВАРОВ (с анимацией наведения) --- */
.Product-module__wrapper {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  will-change: transform;
  transform-style:preserve-3d;
  perspective:1400px;
}
.Product-module__wrapper:hover {
  transform: perspective(1400px) rotateX(4deg) rotateY(-4deg) translateY(-12px) scale(1.05);
  box-shadow: 0 35px 60px rgba(0,0,0,.45), 0 0 35px rgba(255,255,255,.05), inset 0 1px rgba(255,255,255,.04);
  z-index: 10;
}
.Product-module__wrapper img {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
}

/* --- ЦЕНА ТОВАРА --- */
.Product-module__price {
  background: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  padding: 4px 12px !important;
  display: inline-block;
}
.Product-module__discount {
  background: var(--accent) !important;
  color: #1a1a1a !important;
  border-radius: var(--radius-sm) !important;
  padding: 2px 8px !important;
}
.Product-module__oldPrice {
  color: var(--text-secondary) !important;
}
span:contains("RUB") { color: var(--text-primary) !important; }

/* --- КАРТОЧКИ (общие) --- */
.product-card, .gs-product, .card {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.product-card:hover, .gs-product:hover, .card:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}
.product-card img, .gs-product img, .card img {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
}

/* --- ВСЕ КНОПКИ --- */
button, .btn, .gs-btn, input[type="submit"], input[type="button"],
a.btn, .search-btn, .btn-search,
button[type="button"], button[type="submit"],
[class*="btn"], [class*="Button"] {
  background: var(--accent) !important;
  color: #1a1a1a !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  padding: 8px 18px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  transition: all var(--transition);
  cursor: pointer;
  overflow:hidden;
  position:relative;
}
button::before, .btn::before {
  content:""; position:absolute; left:-120%; top:0; width:70%; height:100%;
  background: linear-gradient(110deg, transparent, rgba(255,255,255,.18), transparent);
  transition:left .7s;
}
button:hover::before, .btn:hover::before { left:160%; }
button:hover, .btn:hover, .gs-btn:hover,
.MonitoringWidget-module__updateBtn:hover,
.Button-module__btn:hover,
button[type="submit"]:hover,
[class*="btn"]:hover, [class*="Button"]:hover {
  background: var(--accent-hover) !important;
  color: #1a1a1a !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0,0,0,.35);
}

/* --- КНОПКА «ОБНОВИТЬ» --- */
.MonitoringWidget-module__updateBtn {
  padding: 6px 16px !important;
  font-size: 13px !important;
  border-radius: 20px !important;
}
.Button-module__btn.MonitoringWidget-module__updateBtn { padding: 6px 14px !important; }

/* --- ИКОНКА ПОИСКА --- */
.Search-module__iconWrapper {
  background: var(--bg-surface) !important;
  background-color: var(--bg-surface) !important;
  border-radius: var(--radius-md) 0 0 var(--radius-md) !important;
  padding: 0 10px !important;
}
.Search-module__icon { color: var(--text-secondary) !important; stroke: var(--text-secondary) !important; fill: var(--text-secondary) !important; }
svg, [class*="icon"], [class*="Icon"] { color: var(--text-secondary) !important; stroke: var(--text-secondary) !important; fill: var(--text-secondary) !important; }

/* --- ПОЛЯ ВВОДА --- */
input[type="text"], input[type="email"], input[type="password"],
textarea, select, .Search-module__input, .search-input {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  color: var(--text-primary) !important;
  padding: 10px 16px !important;
  transition: border-color var(--transition), box-shadow var(--transition);
}
input:focus, textarea:focus, select:focus, .Search-module__input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(136, 136, 136, 0.2);
  outline: none;
}

/* --- СТАТУСЫ СЕРВЕРОВ --- */
.MonitoringServer-module__progressBar, .MonitoringServer-module__progressBarAnim {
  background: var(--accent) !important;
  color: #1a1a1a !important;
}
.MonitoringServer-module__progressBarAnim { border-radius:20px; overflow:hidden; }
.MonitoringServer-module__progressBarAnim::after {
  content:""; position:absolute; inset:0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
  animation: manulProgress 2.4s linear infinite;
}
@keyframes manulProgress {
  from{ transform:translateX(-100%); }
  to{ transform:translateX(100%); }
}

.badge-status, .status-indicator, [class*="status"] {
  background: var(--accent) !important;
  color: #1a1a1a !important;
  border-radius: 20px !important;
  padding: 2px 12px !important;
}

/* --- ОПАСНЫЕ КНОПКИ --- */
.btn-danger, .btn-outline-danger, .danger-btn, [class*="danger"], [class*="Danger"] {
  background: var(--accent) !important;
  color: #1a1a1a !important;
  border: 1px solid var(--border) !important;
}
.btn-danger:hover { background: var(--accent-hover) !important; }

/* --- АЛАРМЫ --- */
.alert-danger, .danger, .text-danger, [class*="alert"], [class*="error"] {
  background-color: var(--bg-elevated) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border) !important;
}
.text-danger { color: var(--text-secondary) !important; }

/* --- ХЕДЕР --- */
.Header-module__wrapper, .navbar, .header {
  background: var(--bg-surface) !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  backdrop-filter:blur(18px);
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.Header-module__logo {
  font-size: 2.2rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px;
  color: var(--text-primary) !important;
  text-decoration: none;
  transition: letter-spacing .35s, transform .35s;
}
.Header-module__logo:hover{ transform:scale(1.04); letter-spacing:1px; }

/* =========================================
      ИСПРАВЛЕНИЕ: ФУТЕР (скруглен со всех сторон, убраны отступы)
========================================= */
.gs-footer, .footer, .ShopFooter-module__wrapper {
  background: var(--bg-surface) !important;
  border-top: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  margin-bottom: 0 !important;
}
.ShopFooter-module__text, .ShopFooter-module__link { opacity:.82; transition: opacity .3s, color .3s; }
.ShopFooter-module__link:hover{ opacity:1; color:#fff!important; }

/* --- СКРОЛЛБАР --- */
::-webkit-scrollbar { width: 9px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb { background: linear-gradient(#666, #444); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(#888, #555); }

/* --- АНИМАЦИЯ КАРТИНОК И ЦЕН --- */
.Product-module__img {
  transition: transform .6s cubic-bezier(.17,.84,.44,1), filter .45s;
  will-change:transform;
}
.Product-module__wrapper:hover .Product-module__img { transform:scale(1.08); filter:brightness(1.08) contrast(1.06); }
.Product-module__price{ backdrop-filter:blur(8px); transition:.35s; }
.Product-module__wrapper:hover .Product-module__price{ transform: translateY(-2px) scale(1.05); }
.Product-module__wrapper:hover .Product-module__name{ letter-spacing:.4px; color:#ffffff; }

/* --- КАТЕГОРИИ --- */
.Categories-module__category{ transition: all .35s; overflow:hidden; position:relative; }
.Categories-module__category:hover{ transform:translateY(-2px); background:#707070!important; box-shadow:0 8px 18px rgba(0,0,0,.35); }
.Categories-module__active{ background:linear-gradient(135deg,#7d7d7d,#5b5b5b)!important; color:#fff!important; box-shadow:0 0 25px rgba(180,180,180,.20), inset 0 1px rgba(255,255,255,.08); }
.Categories-module__active::after{ content:""; position:absolute; inset:0; background:linear-gradient(120deg, transparent, rgba(255,255,255,.15), transparent); animation:activeSweep 2.5s linear infinite; }
@keyframes activeSweep { from{transform:translateX(-120%);} to{transform:translateX(220%);} }

/* --- КНОПКА НАВЕРХ --- */
#topBtn {
  position: fixed; bottom: 30px; right: 30px; z-index: 9999; width: 48px; height: 48px; border-radius: 50%;
  background: #3d3d3d; color: #e0e0e0; border: none; font-size: 24px;
  cursor: pointer; opacity: 0; transform: translateY(20px);
  transition: opacity 0.3s, transform 0.3s, background 0.2s; box-shadow: 0 4px 12px rgba(0,0,0,0.7);
}
#topBtn:hover { background: #5a5a5a; }
#topBtn.show { opacity: 1; transform: translateY(0); }

/* --- ПЛАВНОСТЬ И ПРОЧЕЕ --- */
*{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
.Product-module__wrapper, .Product-module__img, .Product-module__price, .Product-module__name, button { backface-visibility:hidden; }
.Product-module__wrapper, .Product-module__img, .Product-module__price, .Product-module__name, .Shop-module__wrapper, .Widgets-module__wrapper, button{ transition-duration:.45s!important; }

/* --- GLASSMORPHISM --- */
.Shop-module__wrapper, .Widgets-module__wrapper, .boxHeader, .boxBody, .boxFooter, .MonitoringWidget-module__body, .PlayerMenuMobile-module__body {
  background: rgba(45,45,45,.72)!important;
  backdrop-filter: blur(22px) saturate(130%);
  -webkit-backdrop-filter: blur(22px) saturate(130%);
  border: 1px solid rgba(255,255,255,.05)!important;
  box-shadow: inset 0 1px rgba(255,255,255,.04), 0 20px 45px rgba(0,0,0,.35);
}

/* Анимированная рамка карточек товаров */
.Product-module__wrapper::before{
  content:""; position:absolute; inset:-2px; border-radius:inherit;
  background: linear-gradient(130deg, transparent, rgba(255,255,255,.18), transparent, rgba(255,255,255,.08), transparent);
  background-size:350% 350%; animation: borderMove 7s linear infinite;
  opacity:0; z-index:-1; transition:.35s;
}
.Product-module__wrapper:hover::before{ opacity:1; }
@keyframes borderMove{ 0%{ background-position:0% 50%; } 100%{ background-position:300% 50%; } }

/* Плавная загрузка */
.Product-module__wrapper { animation: premiumAppear .8s cubic-bezier(.2,.8,.2,1) both; }
.Product-module__wrapper:nth-child(1){animation-delay:.05s;}
.Product-module__wrapper:nth-child(2){animation-delay:.10s;}
.Product-module__wrapper:nth-child(3){animation-delay:.15s;}
.Product-module__wrapper:nth-child(4){animation-delay:.20s;}
.Product-module__wrapper:nth-child(5){animation-delay:.25s;}
.Product-module__wrapper:nth-child(6){animation-delay:.30s;}
.Product-module__wrapper:nth-child(7){animation-delay:.35s;}
.Product-module__wrapper:nth-child(8){animation-delay:.40s;}
.Product-module__wrapper:nth-child(9){animation-delay:.45s;}
.Product-module__wrapper:nth-child(10){animation-delay:.50s;}
.Product-module__wrapper:nth-child(11){animation-delay:.55s;}
.Product-module__wrapper:nth-child(12){animation-delay:.60s;}

@keyframes premiumAppear {
  from{ opacity:0; transform: translateY(60px) scale(.92); filter: blur(8px); }
  to{ opacity:1; transform: translateY(0) scale(1); filter: blur(0); }
}