/* ======================================================
   NIPOS design system — глобальный слой поверх neo_remastered.
   Подключается в app/page/general/head.php ПОСЛЕ палитры colors.json,
   поэтому переопределяет её нейтральные цвета и шрифт заголовков.
   Токены дизайн-системы — с префиксом --np-, чтобы не пересекаться
   с --bg / --red / --green палитры шаблона.
   ====================================================== */

:root {
  /* поверхности и текст */
  --np-bg: #0a0a0a;
  --np-surface: #121212;
  --np-surface-2: #1a1a1a;
  --np-surface-3: #242424;
  --np-input: #0d0d0d;
  --np-line: #262626;
  --np-line-input: #5c5c5c;
  --np-ink: #f2f2f2;
  --np-ink-2: #a6a6a6;
  --np-ink-3: #7a7a7a;

  /* фирменные */
  --np-red: #ff233b;
  --np-red-fill: #e5162e;
  --np-red-fill-hover: #cc1027;
  --np-red-soft: #2a1215;
  --np-red-text: #ff233b;
  --np-gold: #e9bf6f;
  --np-gold-soft: #2a2214;
  --np-green: #5fc97e;
  --np-green-soft: #13261a;
  --np-amber: #f0a53a;
  --np-amber-soft: #2b2011;
  --np-team-t: #e0b24d;
  --np-team-ct: #7b9be0;

  /* редкость CS2 */
  --np-rarity-consumer: #b0c3d9;
  --np-rarity-industrial: #5e98d9;
  --np-rarity-milspec: #4b69ff;
  --np-rarity-restricted: #8847ff;
  --np-rarity-classified: #d32ce6;
  --np-rarity-covert: #eb4b4b;
  --np-rarity-contraband: #e4ae39;

  --np-radius-xs: 4px;
  --np-radius-sm: 6px;
  --np-radius-md: 8px;
  --np-radius-lg: 12px;
  --np-shadow-overlay: 0 24px 64px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .04);

  /* штрих — метка активного элемента, наклон диагонали N из логотипа */
  --np-stroke-skew: -39deg;
  --np-stroke-w: 16px;
  --np-stroke-h: 3px;

  --np-font-display: "Days One", "SF Pro Display", "Segoe UI", sans-serif;
  --np-font-sans: "SF Pro Display", -apple-system, "Segoe UI", Roboto, sans-serif;

  /* палитра шаблона → нейтрали дизайн-системы */
  --font-family-1: "Days One";
  --bg: var(--np-bg);
  --card: var(--np-surface);
  --button: var(--np-surface-2);
  --button-hover: var(--np-surface-3);
  --input-form: var(--np-input);
  --navbar: var(--np-bg);
  --tooltip: rgba(18, 18, 18, .96);
  --text-default: var(--np-ink);
  --text-custom: var(--np-ink-2);
  --text-secondary: var(--np-ink-3);
  --money: var(--np-gold);
  --money-bg: var(--np-gold-soft);
  --green: var(--np-green);
  --bg-thead: var(--np-surface-2);
  --bg-tr-odd: var(--np-surface);
  --bg-tr-hover: var(--np-surface-2);
  --bottom-line-table: var(--np-line);
}

/* Days One — одна насыщенность: не даём браузеру рисовать фальшивый жирный */
html {
  font-synthesis-weight: none;
}

body {
  -webkit-font-smoothing: antialiased;
}

/* ширина контента как в макете: 1280 + поля */
@media (min-width: 1080px) {
  .container-fluid {
    max-width: 1314px;
    padding-top: 0;
  }
}

/* ---------- штрих ---------- */
.np-stroke {
  display: block;
  width: var(--np-stroke-w);
  height: var(--np-stroke-h);
  background: var(--np-red);
  transform: skewX(var(--np-stroke-skew));
}

/* ---------- заголовок секции (общий для блоков главной) ---------- */
.np-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 20px;
}

.np-section-head__title {
  margin: 0;
  font-family: var(--np-font-display);
  font-size: 20px;
  line-height: 26px;
  font-weight: 400;
  color: var(--np-ink);
  letter-spacing: 0;
  text-transform: none;
}

.np-section-head__meta {
  margin-left: 10px;
  font-family: var(--np-font-sans);
  font-size: 14px;
  color: var(--np-ink-3);
  font-variant-numeric: tabular-nums;
}

.np-sep {
  color: var(--np-ink-3);
  margin: 0 6px;
}

.np-section-head__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--np-ink-2);
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
  height: auto;
  cursor: pointer;
  white-space: nowrap;
}

.np-section-head__link:hover {
  color: var(--np-ink);
  background: none;
}

.np-section-head__link span {
  color: var(--np-red);
}

/* ---------- бейдж ---------- */
.np-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--np-radius-xs);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  white-space: nowrap;
  background: var(--np-surface-3);
  color: var(--np-ink-2);
}

.np-badge__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.np-badge--online {
  background: var(--np-green-soft);
  color: var(--np-green);
}

.np-badge--gold {
  background: var(--np-gold-soft);
  color: var(--np-gold);
}

.np-badge--red {
  background: var(--np-red-soft);
  color: var(--np-red-text);
}

/* ======================================================
   Навбар
   ====================================================== */
@media (min-width: 1080px) {
  .navbar,
  .navbar.row {
    height: 64px !important;
    margin: 0 0 32px !important;
    padding-inline: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* фон и линия навбара — на всю ширину окна */
  .navbar::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    background: var(--np-bg);
    border-bottom: 1px solid var(--np-line);
    pointer-events: none;
  }

  .navbar_menu_left {
    gap: 24px !important;
    height: 100%;
  }

  .site_logo_neo img {
    height: 30px !important;
  }

  .online__counter {
    padding: 0 !important;
  }

  .online__count {
    font-size: 13px !important;
    color: var(--np-ink-3) !important;
  }

  .drpdwn_menu {
    gap: 22px !important;
    height: 100% !important;
    align-items: stretch !important;
  }

  .dropdown {
    height: 100% !important;
    display: flex !important;
    align-items: stretch;
  }

  .dropbtn,
  .dropbtn:hover,
  .dropbtn.active_btn,
  .dropbtn.active_btn:hover {
    position: relative;
    height: 100% !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    filter: none !important;
  }

  span.desc_nav_item,
  .dropbtn .desc_nav_item {
    font-family: var(--np-font-sans);
    font-size: 15px !important;
    line-height: 20px;
    font-weight: 500 !important;
    color: var(--np-ink-2) !important;
    transition: color .15s ease;
  }

  .dropbtn:hover .desc_nav_item,
  .dropbtn.active_btn .desc_nav_item,
  .dropdown:hover .dropbtn .desc_nav_item {
    color: var(--np-ink) !important;
  }

  .dropbtn.active_btn::after {
    content: "";
    position: absolute;
    left: 3px;
    bottom: 0;
    width: var(--np-stroke-w);
    height: var(--np-stroke-h);
    background: var(--np-red);
    transform: skewX(var(--np-stroke-skew));
  }

  .dropdown_block {
    top: calc(100% + 1px) !important;
    background: var(--np-surface) !important;
    border: 1px solid var(--np-line) !important;
    border-radius: var(--np-radius-lg) !important;
    box-shadow: var(--np-shadow-overlay) !important;
  }

  .drpdwn_menu .dropdown_block.dropdown_show::before {
    top: -2px !important;
    height: 2px !important;
  }

  /* правая часть */
  .navbar_usermenu {
    gap: 8px !important;
  }

  .navbar_usermenu > button,
  .navbar_usermenu .pay_button,
  .navbar_usermenu .button-icon,
  #profMenuOpen .user__avatar {
    height: 36px !important;
    min-height: 36px !important;
    border-radius: var(--np-radius-md) !important;
    font-family: var(--np-font-sans);
    font-size: 14px !important;
    font-weight: 600 !important;
  }

  .navbar_usermenu .button-icon {
    width: 36px !important;
    min-width: 36px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
  }

  .navbar_usermenu .button-icon:hover {
    background: var(--np-surface-2) !important;
  }

  .navbar_usermenu .button-icon svg {
    width: 18px !important;
    height: 18px !important;
    fill: var(--np-ink-2) !important;
  }

  .navbar_usermenu .button-icon:hover svg {
    fill: var(--np-ink) !important;
  }

  .navbar_usermenu .pay_button {
    padding: 0 12px !important;
    gap: 8px;
    background: var(--np-gold-soft) !important;
    border: 1px solid rgba(233, 191, 111, .28) !important;
  }

  .navbar_usermenu .pay_button:hover {
    border-color: rgba(233, 191, 111, .5) !important;
    background: var(--np-gold-soft) !important;
  }

  .navbar_usermenu .pay_button svg {
    width: 16px !important;
    height: 16px !important;
    fill: var(--np-gold) !important;
  }

  .navbar_usermenu .pay_button .hide_balance_text {
    color: var(--np-gold) !important;
    font-weight: 600;
  }

  /* «Войти» для гостя — главное действие, красная кнопка */
  .navbar > .navbar_usermenu > button:not(.button-icon):not(.pay_button) {
    padding: 0 14px !important;
    gap: 8px;
    background: var(--np-red-fill) !important;
    color: #fff !important;
    border: 0 !important;
  }

  .navbar > .navbar_usermenu > button:not(.button-icon):not(.pay_button):hover {
    background: var(--np-red-fill-hover) !important;
  }

  .navbar > .navbar_usermenu > button:not(.button-icon):not(.pay_button) svg {
    width: 16px !important;
    height: 16px !important;
    fill: #fff !important;
  }

  #profMenuOpen .user__avatar {
    width: 36px !important;
    overflow: hidden;
  }

  #profMenuOpen .user__avatar img {
    border-radius: var(--np-radius-sm) !important;
  }

  /* поиск игрока */
  .search_players .search-input-block {
    height: 36px !important;
    width: 200px;
    border-radius: var(--np-radius-sm) !important;
    background: var(--np-input) !important;
    border: 1px solid var(--np-line) !important;
    color: var(--np-ink) !important;
    font-size: 13px !important;
  }

  .search_players .search-input-block:focus {
    border-color: var(--np-line-input) !important;
  }

  .search_players .search-input-block::placeholder {
    color: var(--np-ink-3);
  }
}

/* выпадающие окна справа: уведомления, профиль, язык */
.notification-wrapper,
.user__menu,
.language__modal,
.online__wrapper {
  background: var(--np-surface) !important;
  border: 1px solid var(--np-line) !important;
  border-radius: var(--np-radius-lg) !important;
  box-shadow: var(--np-shadow-overlay) !important;
}

/* ======================================================
   Футер: строка под линией, без карточки
   ====================================================== */
@media (min-width: 1080px) {
  .footer_fluid {
    max-width: 1314px;
    width: 100%;
    margin-inline: auto;
    padding-inline: 17px;
  }

  .footer_global {
    background: transparent !important;
    border: 0 !important;
    border-top: 1px solid var(--np-line) !important;
    border-radius: 0 !important;
    padding: 24px 0 32px !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .footer_global .footer-top {
    justify-content: space-between !important;
    align-items: center;
  }

  .footer_global .footer_sitename {
    font-family: var(--np-font-display);
    font-size: 15px !important;
    font-weight: 400 !important;
    color: var(--np-ink) !important;
  }

  .footer_global .footer_links a {
    font-size: 13px !important;
    color: var(--np-ink-2) !important;
  }

  .footer_global .footer_links a:hover {
    color: var(--np-ink) !important;
  }

  .footer_global .footer-bottom {
    justify-content: flex-start !important;
    padding: 0 !important;
  }

  .footer_global .footer-description {
    max-width: 90ch !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    font-size: 12px !important;
    line-height: 18px !important;
    color: var(--np-ink-3) !important;
  }

  .footer_global .footer-watermark {
    font-size: 12px;
    color: var(--np-ink-3);
  }
}

/* ======================================================
   Кнопка (дизайн-система). Классы не пересекаются с .button шаблона.
   ====================================================== */
.np-btn {
  font: inherit;
  font-family: var(--np-font-sans);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  height: 40px;
  min-height: 0;
  padding: 0 16px;
  border-radius: var(--np-radius-md);
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.np-btn svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  fill: currentColor;
}

.np-btn--primary { background: var(--np-red-fill); color: #fff; }
.np-btn--primary:hover { background: var(--np-red-fill-hover); color: #fff; }
.np-btn--secondary { background: var(--np-surface-2); color: var(--np-ink); border-color: var(--np-line-input); }
.np-btn--secondary:hover { background: var(--np-surface-3); color: var(--np-ink); }
.np-btn--ghost { background: transparent; color: var(--np-ink-2); padding: 0 12px; }
.np-btn--ghost:hover { background: var(--np-surface-2); color: var(--np-ink); }
.np-btn--money { background: var(--np-gold-soft); color: var(--np-gold); border-color: rgba(233, 191, 111, .28); }
.np-btn--money:hover { border-color: rgba(233, 191, 111, .5); }
.np-btn--sm { height: 32px; padding: 0 12px; font-size: 13px; }
.np-btn--icon { width: 40px; padding: 0; }
.np-btn--icon svg { width: 18px; height: 18px; }
.np-btn--block { width: 100%; }

.np-btn:disabled,
.np-btn[aria-disabled="true"] {
  background: var(--np-surface-2);
  color: var(--np-ink-3);
  border-color: var(--np-line);
  cursor: not-allowed;
}

/* ======================================================
   Компоненты страниц: заголовок, вкладки, панель, уведомление,
   аккордеон, список, шаги, код. Общие для FAQ / правил / инвентаря / скинов.
   ====================================================== */
.np-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.np-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--np-line);
}

.np-page-head__crumbs {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 18px;
  color: var(--np-ink-3);
}

.np-page-head__crumbs a {
  color: var(--np-ink-2);
  text-decoration: none;
}

.np-page-head__crumbs a:hover {
  color: var(--np-ink);
}

.np-page-head__crumbs .np-sep {
  margin: 0 6px;
}

.np-page-head__title {
  margin: 0;
  font-family: var(--np-font-display);
  font-size: 28px;
  line-height: 36px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--np-ink);
  text-transform: none;
}

.np-page-head__lead {
  margin: 8px 0 0;
  max-width: 60ch;
  font-size: 15px;
  line-height: 22px;
  color: var(--np-ink-2);
}

.np-page-head__aside {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

/* вкладки со штрихом */
.np-tabs {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 4px;
  border-bottom: 1px solid var(--np-line);
  overflow-x: auto;
  scrollbar-width: none;
  /* тема задаёт [role="tablist"] колонкой */
  flex-direction: row;
  width: auto;
  flex: none;
}

.np-tabs::-webkit-scrollbar {
  display: none;
}

.np-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: auto;
  min-height: 0;
  padding: 10px 0 12px;
  border: 0;
  border-radius: 0;
  background: none;
  font-family: var(--np-font-sans);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--np-ink-2);
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none;
  width: auto;
}

.np-tab:hover {
  color: var(--np-ink);
  background: none;
}

.np-tab.is-active,
.np-tab[aria-selected="true"] {
  color: var(--np-ink);
  background: none;
  border: 0;
}

.np-tab.is-active::after,
.np-tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: 3px;
  bottom: -1px;
  width: var(--np-stroke-w);
  height: var(--np-stroke-h);
  background: var(--np-red);
  transform: skewX(var(--np-stroke-skew));
}

.np-tab__count {
  font-size: 12px;
  font-weight: 600;
  color: var(--np-ink-3);
  font-variant-numeric: tabular-nums;
}

/* панель */
.np-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  border-radius: var(--np-radius-lg);
  background: var(--np-surface);
  border: 1px solid var(--np-line);
}

.np-panel__title {
  margin: 0;
  font-family: var(--np-font-display);
  font-size: 16px;
  line-height: 22px;
  font-weight: 400;
  color: var(--np-ink);
  text-transform: none;
  letter-spacing: 0;
}

/* уведомление */
.np-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--np-radius-md);
  background: var(--np-surface-2);
  border: 1px solid var(--np-line);
}

.np-notice__icon {
  width: 20px !important;
  height: 20px !important;
  flex: 0 0 auto;
  margin-top: 1px;
  fill: var(--np-ink-2) !important;
}

.np-notice__body {
  flex: 1;
  min-width: 0;
}

.np-notice__title {
  font-size: 15px;
  line-height: 22px;
  font-weight: 600;
  color: var(--np-ink);
}

.np-notice__text {
  margin-top: 2px;
  font-size: 14px;
  line-height: 20px;
  color: var(--np-ink-2);
}

.np-notice__body .np-btn {
  margin-top: 12px;
}

.np-notice--warning {
  background: var(--np-amber-soft);
  border-color: rgba(240, 165, 58, .22);
}

.np-notice--danger {
  background: var(--np-red-soft);
  border-color: rgba(255, 35, 59, .25);
}

/* аккордеон */
.np-acc {
  border-top: 1px solid var(--np-line);
}

.np-acc__item {
  border-bottom: 1px solid var(--np-line);
}

.np-acc__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 16px 4px;
  list-style: none;
  cursor: pointer;
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
  color: var(--np-ink);
}

.np-acc__q::-webkit-details-marker {
  display: none;
}

.np-acc__q::marker {
  content: "";
}

.np-acc__q:hover {
  background: linear-gradient(90deg, var(--np-surface-2), transparent);
}

.np-acc__title {
  flex: 1;
  min-width: 0;
}

.np-acc__sign {
  position: relative;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

.np-acc__sign::before,
.np-acc__sign::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  top: 9px;
  height: 2px;
  background: var(--np-ink-3);
  transition: transform .2s ease;
}

.np-acc__sign::after {
  transform: rotate(90deg);
}

.np-acc__item[open] .np-acc__sign::after {
  transform: rotate(0);
}

.np-acc__a {
  max-width: 70ch;
  padding: 0 4px 20px;
  font-size: 15px;
  line-height: 22px;
  color: var(--np-ink-2);
}

.np-acc__a p {
  margin: 0 0 8px;
  color: var(--np-ink-2);
  font-size: 15px;
  line-height: 22px;
}

.np-acc__a a {
  color: var(--np-ink);
  text-decoration: underline;
  text-decoration-color: var(--np-line-input);
  text-underline-offset: 3px;
}

/* список-ссылки */
.np-list {
  display: flex;
  flex-direction: column;
}

.np-list__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--np-line);
  font-size: 14px;
  line-height: 20px;
  color: var(--np-ink);
  text-decoration: none;
}

.np-list__row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.np-list__row:hover {
  color: var(--np-ink);
}

.np-list__row i {
  font-style: normal;
  color: var(--np-red);
}

/* шаги */
.np-step {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.np-step__n {
  font-family: var(--np-font-display);
  font-size: 24px;
  line-height: 28px;
  font-weight: 400;
  color: var(--np-red);
  font-variant-numeric: tabular-nums;
}

.np-step__t {
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
  color: var(--np-ink);
}

.np-step__d {
  font-size: 14px;
  line-height: 20px;
  color: var(--np-ink-2);
}

.np-code {
  padding: 1px 6px;
  border-radius: var(--np-radius-xs);
  background: var(--np-surface-3);
  color: var(--np-ink);
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 13px;
  line-height: 20px;
  white-space: nowrap;
  /* тема делает code флекс-плашкой */
  display: inline;
  width: auto;
  border: 0;
  cursor: text;
  font-weight: 500;
}

/* ряд «контент + боковая колонка» */
.np-layout {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

.np-layout__main {
  flex: 1 1 auto;
  min-width: 0;
}

.np-layout__side {
  width: 340px;
  flex: 0 0 340px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ======================================================
   ItemTile: предмет на подсветке цвета редкости (--rarity)
   ====================================================== */
.np-item {
  --rarity: var(--np-rarity-covert);
  min-width: 0;
  border-radius: var(--np-radius-md);
  background: var(--np-surface);
  border: 1px solid var(--np-line);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .15s ease;
}

.np-item:hover {
  border-color: var(--np-line-input);
}

.np-item__art {
  position: relative;
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--np-surface-2);
  border-bottom: 2px solid var(--rarity);
  overflow: hidden;
  isolation: isolate;
}

.np-item__art::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 15%;
  right: 15%;
  bottom: -40%;
  height: 90%;
  border-radius: 50%;
  background: var(--rarity);
  opacity: .22;
  filter: blur(28px);
  pointer-events: none;
}

.np-item__art img {
  width: 78%;
  max-height: 104px;
  object-fit: contain;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .55));
}

.np-item__art > svg {
  width: 44px !important;
  height: 44px !important;
  fill: var(--rarity) !important;
}

.np-item__tag {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1;
}

.np-badge--rarity {
  background: var(--np-surface-3);
  color: var(--np-ink);
}

.np-badge--rarity .np-badge__dot {
  width: 8px;
  height: 8px;
  border-radius: 1px;
  background: var(--rarity, var(--np-ink-3));
}

.np-item__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px;
}

.np-item__weapon {
  font-size: 12px;
  line-height: 16px;
  color: var(--np-ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.np-item__name {
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
  color: var(--np-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.np-item__meta {
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  line-height: 18px;
  color: var(--np-ink-2);
}

.np-item__meta span {
  color: inherit;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.np-item__action {
  margin-top: auto;
  padding-top: 12px;
}

/* ======================================================
   Пустое состояние
   ====================================================== */
.np-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 48px 24px;
  text-align: center;
  border: 1px dashed var(--np-line);
  border-radius: var(--np-radius-lg);
}

.np-empty__icon {
  width: 48px;
  height: 48px;
  margin-bottom: 8px;
  border-radius: 50%;
  background: var(--np-surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.np-empty__icon svg {
  width: 22px !important;
  height: 22px !important;
  fill: var(--np-ink-2) !important;
}

.np-empty__title {
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
  color: var(--np-ink);
}

.np-empty__text {
  max-width: 44ch;
  font-size: 14px;
  line-height: 20px;
  color: var(--np-ink-2);
}

.np-empty .np-btn {
  margin-top: 12px;
}

/* ======================================================
   Навбар: больше воздуха
   ====================================================== */
@media (min-width: 1080px) {
  .navbar,
  .navbar.row {
    height: 72px !important;
    margin-bottom: 28px !important;
  }

  .navbar_menu_left {
    gap: 32px !important;
  }

  .drpdwn_menu {
    gap: 28px !important;
  }

  .navbar_usermenu {
    gap: 12px !important;
  }

  .navbar_usermenu > button,
  .navbar_usermenu .pay_button,
  .nps-bonusnav-btn {
    padding-inline: 14px !important;
  }

  .navbar_usermenu .button-icon {
    padding-inline: 0 !important;
  }

  .search_players .search-input-block {
    width: 190px;
  }
}

/* ======================================================
   Навбар: закруглённая плашка по ширине контента (макет, вариант B)
   ====================================================== */
@media (min-width: 1080px) {
  .navbar,
  .navbar.row {
    height: 64px !important;
    margin: 12px 0 20px !important;
    padding-inline: 20px !important;
    background: var(--np-surface) !important;
    border: 1px solid var(--np-line) !important;
    border-radius: var(--np-radius-lg) !important;
  }

  .navbar::after {
    display: none !important;
  }

  .dropbtn.active_btn::after {
    bottom: -1px;
  }
}

/* счётчик онлайна в навбаре убран */
.navbar .online {
  display: none !important;
}

/* ======================================================
   Главная: слайдер и панель бонусов в две колонки
   ====================================================== */
@media (min-width: 1080px) {
  .container-fluid:has(> .nps-bonus):has(> .row .image-slider) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 420px;
    column-gap: 16px;
    align-items: start;
  }

  .container-fluid:has(> .nps-bonus):has(> .row .image-slider) > * {
    grid-column: 1 / -1;
  }

  .container-fluid:has(> .nps-bonus):has(> .row .image-slider) > .navbar {
    order: -3;
  }

  .container-fluid:has(> .nps-bonus):has(> .row .image-slider) > .row:has(.image-slider) {
    order: -2;
    grid-column: 1;
    align-self: stretch;
    margin: 0 0 32px;
  }

  .container-fluid:has(> .nps-bonus):has(> .row .image-slider) > .row:has(.image-slider) > .col-md-12 {
    padding: 0;
  }

  .container-fluid:has(> .nps-bonus):has(> .row .image-slider) > .nps-bonus {
    order: -2;
    grid-column: 2;
    align-self: stretch;
  }

  .container-fluid:has(> .nps-bonus) .image-slider {
    height: 312px;
    border-radius: var(--np-radius-lg);
  }
}

@media (min-width: 1080px) {
  /* слайдер тянется на высоту панели бонусов */
  .container-fluid:has(> .nps-bonus):has(> .row .image-slider) > .row:has(.image-slider) > .col-md-12 {
    display: flex;
    flex-direction: column;
  }

  .container-fluid:has(> .nps-bonus) .image-slider {
    height: auto;
    flex: 1;
    min-height: 312px;
  }

  .dropbtn.active_btn::after {
    bottom: 0;
  }
}

@media (min-width: 1080px) {
  /* слайдер заполняет ячейку целиком (высота = панель бонусов, но не меньше 312) */
  .container-fluid:has(> .nps-bonus):has(> .row .image-slider) > .row:has(.image-slider) > .col-md-12 {
    position: relative;
    min-height: 312px;
  }

  .container-fluid:has(> .nps-bonus) .image-slider {
    position: absolute;
    inset: 0;
    height: auto;
    min-height: 0;
  }
}
@media (min-width: 1080px) {
  .container-fluid:has(> .nps-bonus) .image-slider { margin: 0 !important; }
}

/* ======================================================
   Масштаб на широких мониторах: макет рассчитан на 1440,
   на больших экранах всё увеличиваем пропорционально.
   ====================================================== */
@media (min-width: 1600px) {
  html { zoom: 1.1; }
}

@media (min-width: 1850px) {
  html { zoom: 1.15; }
}

/* ======================================================
   V4: заголовки-плашки, единый ритм 12 / 16 / 24,
   карточки без рамок (только заливка), сетка главной в 3 колонки.
   ====================================================== */

/* плашка-заголовок секции */
.np-shead {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  margin: 0 0 12px;
  padding: 12px 16px;
  border-radius: var(--np-radius-lg);
  background: var(--np-surface);
}

.np-shead__ic,
.np-page-head__ic {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: var(--np-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--np-red-soft);
  color: var(--np-red-text);
}

.np-shead__ic svg,
.np-page-head__ic svg {
  width: 18px !important;
  height: 18px !important;
  fill: currentColor !important;
}

.np-shead__txt {
  flex: 1;
  min-width: 0;
}

.np-shead__title {
  margin: 0;
  font-family: var(--np-font-display);
  font-size: 17px;
  line-height: 22px;
  font-weight: 400;
  color: var(--np-ink);
  letter-spacing: 0;
  text-transform: none;
}

.np-shead__sub {
  margin: 2px 0 0;
  font-size: 13px;
  line-height: 18px;
  color: var(--np-ink-3);
}

.np-shead .nps-gw-nav,
.np-shead__aside {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}

/* шапка страницы — тоже плашка, с иконкой */
.np-page-head {
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 0;
  border-radius: var(--np-radius-lg);
  background: var(--np-surface);
}

.np-page-head > div:not(.np-page-head__aside):not(.np-page-head__ic) {
  flex: 1;
  min-width: 0;
}

.np-page-head__ic {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
}

.np-page-head__ic svg {
  width: 22px !important;
  height: 22px !important;
}

.np-page-head__crumbs {
  margin: 0 0 2px;
  font-size: 12px;
  line-height: 16px;
}

.np-page-head__title {
  font-size: 24px;
  line-height: 30px;
}

.np-page-head__lead {
  margin-top: 4px;
  font-size: 14px;
  line-height: 20px;
  max-width: 70ch;
}

/* вкладки — внутри плашки, штрих остаётся */
.np-tabs {
  padding: 0 20px;
  border-bottom: 0;
  border-radius: var(--np-radius-lg);
  background: var(--np-surface);
}

.np-tab {
  padding: 14px 0 16px;
}

.np-tab.is-active::after,
.np-tab[aria-selected="true"]::after {
  bottom: 0;
}

/* панели и плитки — только заливка */
.np-panel,
.np-item,
.np-notice:not(.np-notice--danger):not(.np-notice--warning) {
  border-color: transparent;
}

/* аккордеон — на заливке */
.np-acc {
  border-top: 0;
  padding: 0 18px;
  border-radius: var(--np-radius-lg);
  background: var(--np-surface);
}

.np-acc__item:last-child {
  border-bottom: 0;
}

.np-acc__q:hover {
  background: none;
}

@media (min-width: 1080px) {
  /* главная: три колонки, слайдер на две, панель бонусов ровно над третьим сервером */
  .container-fluid:has(> .nps-bonus):has(> .row .image-slider) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .container-fluid:has(> .nps-bonus):has(> .row .image-slider) > .row:has(.image-slider) {
    grid-column: 1 / span 2 !important;
    margin-bottom: 24px !important;
  }

  .container-fluid:has(> .nps-bonus):has(> .row .image-slider) > .nps-bonus {
    grid-column: 3 !important;
    margin-bottom: 24px !important;
  }
}

/* ======================================================
   V5: активный пункт — красная пилюля (меню и все вкладки),
   заголовки секций главной — крупно, подзаголовок под ним.
   Пилюля рисуется через ::after, поэтому размеры пунктов не меняются.
   ====================================================== */
@media (min-width: 1080px) {
  .dropbtn.active_btn {
    z-index: 0;
  }

  html body .dropbtn.active_btn::after {
    top: 50%;
    bottom: auto;
    left: -12px;
    right: -12px;
    width: auto;
    height: 34px;
    margin-top: -17px;
    border-radius: 999px;
    background: var(--np-red-soft);
    transform: none;
    z-index: -1;
  }

  html body .dropbtn.active_btn .desc_nav_item {
    color: var(--np-red-text) !important;
  }
}

html body .np-tab,
html body .nip-servers-tab,
html body .servers_button,
html body .admin_nav .admin-nav__btn {
  z-index: 0;
}

html body .np-tab.is-active::after,
html body .np-tab[aria-selected="true"]::after,
html body .np-servers-section .nip-servers-tab.chips_active::after,
html body .servers_button.server_buttons_active::after,
html body .admin_nav .admin-nav__btn.active::after {
  top: 50%;
  bottom: auto;
  left: -12px;
  right: -12px;
  width: auto;
  height: 32px;
  margin-top: -17px;
  border-radius: 999px;
  background: var(--np-red-soft);
  transform: none;
  z-index: -1;
}

html body .np-tab.is-active,
html body .np-tab[aria-selected="true"],
html body .np-servers-section .nip-servers-tab.chips_active,
html body .servers_wrap .servers_button.server_buttons_active b,
html body .admin_nav .admin-nav__btn.active {
  color: var(--np-red-text) !important;
}

/* пилюле нужно место по краям плашки вкладок */
.np-tabs {
  padding: 0 28px;
}

html body .servers_wrap {
  padding: 0 28px !important;
}

/* заголовок секции — текст на фоне, крупно, подзаголовок под ним */
.np-shead {
  align-items: flex-end;
  gap: 16px;
  min-height: 0;
  margin: 0 0 16px;
  padding: 0;
  border-radius: 0;
  background: none;
}

.np-shead .np-shead__ic {
  display: none;
}

.np-shead__title {
  font-size: 26px;
  line-height: 32px;
}

.np-shead__sub {
  margin: 2px 0 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--np-ink-2);
}

.nps-gw-head.np-shead {
  margin-bottom: 16px;
}

/* ======================================================
   V6: шапка страницы «только воздух» — без плашки, рамки и иконки,
   крупный заголовок; вкладки тоже без плашки, активная — красная пилюля.
   ====================================================== */
.np-page-head {
  align-items: flex-end;
  gap: 24px;
  padding: 16px 0 0;
  border: 0;
  border-radius: 0;
  background: none;
}

.np-page-head .np-page-head__ic {
  display: none;
}

.np-page-head__crumbs {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 18px;
}

.np-page-head__title {
  font-size: 40px;
  line-height: 46px;
}

.np-page-head__lead {
  margin-top: 8px;
  font-size: 15px;
  line-height: 22px;
}

.np-tabs {
  padding: 0 12px;
  border: 0;
  border-radius: 0;
  background: none;
  overflow: visible;
}

html body .servers_wrap,
html body .admin_nav {
  padding: 0 12px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
}

/* V6: ровные отступы между блоками главной — 40px */
@media (min-width: 1080px) {
  .container-fluid:has(> .nps-bonus):has(> .row .image-slider) > .row:has(.image-slider),
  .container-fluid:has(> .nps-bonus):has(> .row .image-slider) > .nps-bonus {
    margin-bottom: 40px !important;
  }
}

html body .np-servers-section {
  margin-bottom: 35px !important;
}

html body #giveaways.giveaways-section {
  margin-bottom: 35px !important;
}

/* V7: заголовки секций главной — в закруглённой обводке (как шапка магазина на макете) */
.np-shead,
.nps-gw-head.np-shead {
  align-items: center;
  padding: 18px 24px;
  margin-bottom: 16px;
  border: 1px solid var(--np-line);
  border-radius: 16px;
}

/* V7: полоска заголовка ниже — заголовок и подпись мельче */
.np-shead,
.nps-gw-head.np-shead {
  padding: 12px 20px;
}

.np-shead__title {
  font-size: 19px;
  line-height: 24px;
}

.np-shead__sub {
  margin-top: 1px;
  font-size: 13px;
  line-height: 18px;
}

/* V7: подсветка цветом раздела + живой статус справа (макет «Заголовки на главной», вариант 7) */
.np-shead--green {
  background: radial-gradient(460px 140px at 0 50%, rgba(95, 201, 126, .11), transparent 70%);
}

.np-shead--gold {
  background: radial-gradient(460px 140px at 0 50%, rgba(233, 191, 111, .11), transparent 70%);
}

.np-shead .np-shead__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: var(--np-surface-2);
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  white-space: nowrap;
}

.np-shead .np-shead__pill[hidden] {
  display: none !important;
}

.np-shead .np-shead__pill,
.np-shead .np-shead__pill span,
.np-shead .np-shead__pill strong {
  color: var(--np-ink) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}

.np-shead .np-shead__pill i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--np-green);
  box-shadow: 0 0 0 3px rgba(95, 201, 126, .18);
}

.np-shead .np-shead__pill.is-gold i {
  background: var(--np-gold);
  box-shadow: 0 0 0 3px rgba(233, 191, 111, .18);
}

.np-shead .np-shead__pill.urgent .countdown {
  animation: none;
}

/* V7: заголовки секций — на подложке, как панель бонусов, без обводки (свечение раздела поверх) */
.np-shead,
.nps-gw-head.np-shead {
  border-color: transparent;
  background-color: var(--np-surface);
}

/* V7: заголовки на подложке — блоки главной можно ставить плотнее: 24px между блоками, 12px от заголовка до карточек */
@media (min-width: 1080px) {
  .container-fluid:has(> .nps-bonus):has(> .row .image-slider) > .row:has(.image-slider),
  .container-fluid:has(> .nps-bonus):has(> .row .image-slider) > .nps-bonus {
    margin-bottom: 24px !important;
  }
}

html body .np-servers-section {
  margin-bottom: 19px !important;
}

html body #giveaways.giveaways-section {
  margin-bottom: 19px !important;
}

.np-shead,
.nps-gw-head.np-shead {
  margin-bottom: 12px;
}

/* ======================================================
   V7: навбар, правая часть (макет «Навбар», вариант 6):
   поиск и «Бонусы» — иконками, профиль — капсула с ником и балансом,
   «Пополнить» и язык — в меню профиля.
   ====================================================== */
@media (min-width: 1080px) {
  /* залогинен: пополнение и язык — в меню профиля */
  .navbar_usermenu:has(#profMenuOpen) .pay_button,
  .navbar_usermenu:has(#profMenuOpen) #openLanguage {
    display: none !important;
  }

  /* «Бонусы» — иконка с красной точкой */
  html body .nps-bonusnav-btn {
    width: 36px;
    padding: 0 !important;
    border: 0;
    background: transparent;
  }

  html body .nps-bonusnav-btn:hover,
  html body .nps-bonusnav.is-open .nps-bonusnav-btn {
    background: var(--np-surface-2);
  }

  html body .nps-bonusnav-btn svg {
    display: block;
    width: 18px;
    height: 18px;
    fill: var(--np-ink-2);
  }

  html body .nps-bonusnav-btn:hover svg {
    fill: var(--np-ink);
  }

  html body .nps-bonusnav-label {
    display: none;
  }

  html body .nps-bonusnav-dot {
    position: absolute;
    top: 7px;
    right: 7px;
    box-shadow: 0 0 0 2px var(--np-surface);
  }

  /* поиск — иконка, по клику раскрывается в поле */
  .search_players .search-input-block {
    width: 36px !important;
    padding: 0 !important;
    border-color: transparent !important;
    background: transparent !important;
    cursor: pointer;
    transition: width .2s ease, background-color .2s ease;
  }

  .search_players .search-input-block::placeholder {
    color: transparent;
  }

  .search_players .search-input-block:hover {
    background: var(--np-surface-2) !important;
  }

  .search_players .modal-searchcontent svg {
    top: 9px !important;
    right: 9px !important;
    width: 18px !important;
    height: 18px !important;
    opacity: 1 !important;
    fill: var(--np-ink-2) !important;
    pointer-events: none;
  }

  .search_players .search-input-block:focus,
  .search_players.users_found .search-input-block,
  .search_players.users_notfound .search-input-block {
    width: 220px !important;
    padding: 0 36px 0 12px !important;
    border-color: var(--np-line-input) !important;
    background: var(--np-input) !important;
    cursor: text;
  }

  .search_players .search-input-block:focus::placeholder {
    color: var(--np-ink-3);
  }

  /* профиль — капсула */
  #profMenuOpen.nps-prof {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    padding: 3px 12px 3px 3px;
    border-radius: 999px;
    background: var(--np-surface-2);
    cursor: pointer;
    transition: background-color .15s ease;
  }

  #profMenuOpen.nps-prof:hover {
    background: var(--np-surface-3);
  }

  #profMenuOpen.nps-prof .user__avatar {
    width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    border-radius: 50% !important;
    background: transparent !important;
  }

  #profMenuOpen.nps-prof .user__avatar img {
    border-radius: 50% !important;
  }

  .nps-prof-txt {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .nps-prof-txt b {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    line-height: 18px;
    font-weight: 600;
    color: var(--np-ink) !important;
  }

  .nps-prof-txt span {
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    color: var(--np-gold) !important;
  }

  .nps-prof-chev {
    width: 16px !important;
    height: 16px !important;
    fill: var(--np-ink-3) !important;
  }
}

/* пункты меню профиля: пополнить (золотой) и язык */
.user__menu .nps-menu-pay,
.user__menu .nps-menu-pay svg {
  color: var(--np-gold) !important;
  fill: var(--np-gold) !important;
}

.user__menu .nps-menu-lang em {
  margin-left: auto;
  font-style: normal;
  font-size: 12px;
  color: var(--np-ink-3);
}

/* V7: подсветка заголовков секций — единая красная слева (вместо зелёной и золотой) */
.np-shead--green,
.np-shead--gold {
  background-image: radial-gradient(460px 140px at 0 50%, rgba(255, 35, 59, .12), transparent 70%);
}
/* красная подсветка — еле заметная */
.np-shead--green,
.np-shead--gold {
  background-image: radial-gradient(460px 140px at 0 50%, rgba(255, 35, 59, .05), transparent 70%);
}

/* ======================================================
   V8: модальные окна — единый стиль (дизайн-система, компонент Modal):
   surface, скругление 16, рамка line, отступ 24, крестик 32px в углу,
   заголовок Days One 19px, действия внизу во всю ширину.
   ====================================================== */
html body .popup_modal {
  background: rgba(5, 5, 5, .72) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

html body .popup_modal_content {
  gap: 16px;
  padding: 24px !important;
  border: 1px solid var(--np-line) !important;
  border-radius: 16px !important;
  background: var(--np-surface) !important;
  box-shadow: var(--np-shadow-overlay) !important;
  color: var(--np-ink);
}

@media (min-width: 769px) {
  html body .popup_modal_content {
    min-width: 400px;
  }
}

html body .popup_modal_head {
  padding: 0 !important;
  gap: 16px;
  font-family: var(--np-font-display) !important;
  font-size: 19px !important;
  line-height: 24px !important;
  font-weight: 400 !important;
  color: var(--np-ink) !important;
}

html body .popup_modal_head + hr {
  display: none;
}

html body .popup_modal_head .popup_modal_close,
html body .popup_modal_content > .popup_modal_close {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border: 0;
  border-radius: var(--np-radius-md);
  background: transparent;
  transition: background-color .15s ease;
}

html body .popup_modal_head .popup_modal_close:hover,
html body .popup_modal_content > .popup_modal_close:hover {
  background: var(--np-surface-2);
}

html body .popup_modal_head .popup_modal_close svg,
html body .popup_modal_content > .popup_modal_close svg {
  width: 18px !important;
  height: 18px !important;
  fill: var(--np-ink-2) !important;
  color: var(--np-ink-2);
  opacity: 1 !important;
}

/* ---------- магазин: выбор сервера ---------- */
html body .wrapper_server_accept {
  box-sizing: border-box;
  width: 400px;
  max-width: calc(100vw - 32px);
  padding: 24px !important;
  border: 1px solid var(--np-line) !important;
  border-radius: 16px !important;
  background: var(--np-surface) !important;
  box-shadow: var(--np-shadow-overlay) !important;
}

html body .wrapper_server_accept .server_accept_title {
  margin: 0 0 16px;
  font-family: var(--np-font-display);
  font-size: 19px;
  line-height: 24px;
  font-weight: 400;
  color: var(--np-ink);
}

html body .wrapper_server_accept .servers_accept {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px !important;
}

html body .wrapper_server_accept .server_accept {
  display: flex !important;
  align-items: center;
  justify-content: center;
  height: 48px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-radius: var(--np-radius-md) !important;
  background: var(--np-surface-2) !important;
  color: var(--np-ink) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  transition: background-color .15s ease;
}

html body .wrapper_server_accept .server_accept:hover {
  background: var(--np-red-soft) !important;
  color: var(--np-red-text) !important;
}

/* ---------- наказания: подробности ---------- */
html body #punishModal .popup_modal_content,
html body #adminModal .popup_modal_content {
  width: 480px;
  max-width: calc(100vw - 32px);
}

html body .punish_body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

html body .punish_body > hr {
  display: none;
}

html body .punish_body .punish_info {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px !important;
  order: 1;
}

html body .punish_body .punish_subinfo {
  display: flex !important;
  align-items: center;
  gap: 12px !important;
  min-width: 0;
  padding: 12px !important;
  border: 0 !important;
  border-radius: var(--np-radius-md) !important;
  background: var(--np-surface-2) !important;
}

html body .punish_body .icon_subinfo {
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
}

html body .punish_body .icon_subinfo svg {
  width: 18px !important;
  height: 18px !important;
  fill: var(--np-ink-3) !important;
}

html body .punish_body .text_subinfo {
  min-width: 0;
}

html body .punish_body .text_subinfo p {
  margin: 0 !important;
  font-size: 12px !important;
  line-height: 16px !important;
  color: var(--np-ink-3) !important;
}

html body .punish_body .text_subinfo span,
html body .punish_body .text_subinfo span a {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px !important;
  line-height: 20px !important;
  font-weight: 600 !important;
  color: var(--np-ink) !important;
}

html body .punish_body .punish_take_admin {
  order: 2;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  text-align: left !important;
  font-size: 13px !important;
  line-height: 18px !important;
  color: var(--np-ink-2) !important;
}

html body .punish_body .punish_take_admin a {
  color: var(--np-red-text) !important;
  font-weight: 600;
}

html body .punish_body .punish_buttons,
html body .punish_body > button,
html body .punish_body > a.button {
  order: 3;
}

html body .punish_body .punish_buttons {
  display: flex !important;
  gap: 8px !important;
}

html body .punish_body button.btn_unban,
html body .punish_body .punish_buttons button,
html body .punish_body .punish_buttons a {
  flex: 1;
  height: 44px !important;
  min-height: 0 !important;
  border: 1px solid var(--np-line-input) !important;
  border-radius: var(--np-radius-md) !important;
  background: var(--np-surface-2) !important;
  color: var(--np-red-text) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

html body .punish_body button.btn_unban:hover,
html body .punish_body .punish_buttons button:hover {
  background: var(--np-surface-3) !important;
}

/* ---------- сервер: окно игроков ---------- */
html body .modal-window-server {
  background: rgba(5, 5, 5, .72) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

html body .modal-window-server .modal-card {
  width: 640px !important;
  max-width: calc(100vw - 32px);
  padding: 0 24px 24px !important;
  border: 1px solid var(--np-line) !important;
  border-radius: 16px !important;
  background: var(--np-surface) !important;
  box-shadow: var(--np-shadow-overlay) !important;
  overflow: hidden;
}

html body .modal-window-server .modal-card__header {
  margin: 0 -24px 16px !important;
  border-radius: 16px 16px 0 0 !important;
}

html body .modal-window-server .server-modal__bg .shadow {
  background: linear-gradient(180deg, rgba(18, 18, 18, .15) 0%, var(--np-surface) 100%) !important;
}

html body .modal-window-server .server_map_now_play_text {
  font-size: 13px !important;
  color: var(--np-ink-2) !important;
}

html body .modal-window-server .server_map_name_second {
  font-family: var(--np-font-display) !important;
  font-size: 28px !important;
  line-height: 34px !important;
  font-weight: 400 !important;
}

html body .modal-window-server .modal-btn__close {
  width: 32px !important;
  height: 32px !important;
  border-radius: var(--np-radius-md) !important;
  background: rgba(10, 10, 10, .45) !important;
}

html body .modal-window-server .modal-btn__close svg {
  width: 18px !important;
  height: 18px !important;
  fill: var(--np-ink) !important;
}

html body .modal-window-server .mon_header {
  margin: 0 !important;
  padding: 10px 14px !important;
  border: 0 !important;
  border-radius: var(--np-radius-md) var(--np-radius-md) 0 0 !important;
  background: var(--np-surface-2) !important;
  font-size: 12px !important;
  color: var(--np-ink-3) !important;
}

html body .modal-window-server .mon_header .players_modal {
  color: var(--np-ink) !important;
  font-weight: 600;
}

html body .modal-window-server .mon_list_body {
  margin: 0 0 16px !important;
  border-radius: 0 0 var(--np-radius-md) var(--np-radius-md) !important;
  background: var(--np-surface-2) !important;
}

html body .modal-window-server .modal-card__footer {
  display: flex !important;
  gap: 8px !important;
  padding: 0 !important;
  border: 0 !important;
}

html body .modal-window-server .modal-card__footer .button {
  flex: 1;
  justify-content: center;
  height: 44px !important;
  min-height: 0 !important;
  border-radius: var(--np-radius-md) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

html body .modal-window-server .modal-card__footer .modal-btn_copy {
  border: 1px solid var(--np-line-input) !important;
  background: var(--np-surface-2) !important;
  color: var(--np-ink) !important;
}

html body .modal-window-server .modal-card__footer .modal-btn:not(.modal-btn_copy) {
  border: 0 !important;
  background: var(--np-red-fill) !important;
  color: #fff !important;
}

html body .modal-window-server .modal-card__footer .button svg {
  width: 16px !important;
  height: 16px !important;
  fill: currentColor !important;
}

/* ---------- инвентарь: кастомный приз и VIP ---------- */
html body .inventory-vip-modal-card {
  width: 480px !important;
  max-width: calc(100vw - 32px) !important;
  padding: 24px !important;
  border: 1px solid var(--np-line) !important;
  border-radius: 16px !important;
  background: var(--np-surface) !important;
  box-shadow: var(--np-shadow-overlay) !important;
}

html body .inventory-vip-modal-backdrop {
  background: rgba(5, 5, 5, .72) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

html body .inventory-vip-modal-close {
  top: 18px !important;
  right: 18px !important;
  width: 32px !important;
  height: 32px !important;
  border: 0 !important;
  border-radius: var(--np-radius-md) !important;
  background: transparent !important;
  color: var(--np-ink-2) !important;
  font-size: 22px !important;
}

html body .inventory-vip-modal-close:hover {
  background: var(--np-surface-2) !important;
  color: var(--np-ink) !important;
}

html body .inventory-vip-modal-head {
  gap: 14px !important;
  padding-right: 40px;
}

html body .inventory-vip-modal-head-icon {
  width: 44px !important;
  height: 44px !important;
  flex: 0 0 44px;
  border: 0 !important;
  border-radius: var(--np-radius-md) !important;
  background: var(--np-red-soft) !important;
  color: var(--np-red-text) !important;
  box-shadow: none !important;
}

html body .inventory-vip-modal-head h3 {
  margin: 0 !important;
  font-family: var(--np-font-display) !important;
  font-size: 19px !important;
  line-height: 24px !important;
  font-weight: 400 !important;
}

html body .inventory-custom-modal-text {
  font-size: 14px !important;
  line-height: 20px !important;
  color: var(--np-ink-2) !important;
}

html body .inventory-custom-modal-form label {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--np-ink-2) !important;
}

html body .inventory-custom-modal-form textarea {
  min-height: 96px;
  border: 1px solid var(--np-line-input) !important;
  border-radius: var(--np-radius-sm) !important;
  background: var(--np-input) !important;
  color: var(--np-ink) !important;
  font-size: 15px !important;
}

html body .inventory-vip-modal-actions {
  display: flex !important;
  gap: 8px !important;
}

html body .inventory-vip-modal-actions button {
  flex: 1;
  height: 44px !important;
  border-radius: var(--np-radius-md) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

html body .inventory-vip-modal-cancel {
  border: 1px solid var(--np-line-input) !important;
  background: var(--np-surface-2) !important;
  color: var(--np-ink) !important;
}

html body .inventory-vip-modal-submit {
  border: 0 !important;
  background: var(--np-red-fill) !important;
  color: #fff !important;
}

html body .inventory-vip-modal-submit:hover {
  background: var(--np-red-fill-hover) !important;
}

/* ---------- промокод ---------- */
html body .promo-compact-modal .promo-compact-content {
  width: min(480px, calc(100vw - 32px)) !important;
  padding: 24px !important;
  border: 1px solid var(--np-line) !important;
  border-radius: 16px !important;
  background: var(--np-surface) !important;
  box-shadow: var(--np-shadow-overlay) !important;
}

html body .promo-compact-modal .promo-compact-close {
  position: absolute !important;
  top: 18px !important;
  right: 18px !important;
}

html body .promo-compact-modal .promo-compact-head {
  gap: 14px !important;
  padding-right: 40px;
}

html body .promo-compact-modal .promo-compact-icon {
  width: 44px !important;
  height: 44px !important;
  border: 0 !important;
  border-radius: var(--np-radius-md) !important;
  background: var(--np-red-soft) !important;
  color: var(--np-red-text) !important;
  box-shadow: none !important;
}

html body .promo-compact-modal .promo-compact-head h3 {
  margin: 0 !important;
  font-family: var(--np-font-display) !important;
  font-size: 19px !important;
  line-height: 24px !important;
  font-weight: 400 !important;
}

html body .promo-compact-modal .promo-compact-head p {
  margin: 2px 0 0 !important;
  font-size: 13px !important;
  line-height: 18px !important;
  color: var(--np-ink-2) !important;
}

html body .promo-compact-modal .promo-compact-label {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--np-ink-2) !important;
}

html body .promo-compact-modal .promo-compact-input {
  height: 44px !important;
  border: 1px solid var(--np-line-input) !important;
  border-radius: var(--np-radius-sm) !important;
  background: var(--np-input) !important;
  box-shadow: none !important;
  color: var(--np-ink) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: .04em;
}

html body .promo-compact-modal .promo-compact-input:focus {
  border-color: var(--np-ink) !important;
}

html body .promo-compact-modal .promo-compact-note {
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  font-size: 13px !important;
  color: var(--np-ink-2) !important;
}

html body .promo-compact-modal .promo-compact-note svg {
  width: 16px !important;
  height: 16px !important;
  fill: var(--np-ink-3) !important;
  color: var(--np-ink-3) !important;
}

html body .promo-compact-modal .promo-compact-reward {
  flex-direction: row !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 12px !important;
  border: 0 !important;
  border-radius: var(--np-radius-md) !important;
  background: var(--np-surface-2) !important;
  text-align: left !important;
}

html body .promo-compact-modal .promo-compact-reward-icon {
  width: 44px !important;
  height: 44px !important;
  flex: 0 0 44px;
  margin: 0 !important;
  border: 0 !important;
  border-radius: var(--np-radius-md) !important;
  background: var(--np-surface-3) !important;
}

html body .promo-compact-modal .promo-compact-reward strong {
  font-size: 14px !important;
  line-height: 20px !important;
  font-weight: 600 !important;
  color: var(--np-ink) !important;
}

html body .promo-compact-modal .promo-compact-reward span {
  font-size: 13px !important;
  line-height: 18px !important;
  color: var(--np-ink-2) !important;
}

html body .promo-compact-modal .promo-compact-submit {
  height: 44px !important;
  border: 0 !important;
  border-radius: var(--np-radius-md) !important;
  background: var(--np-red-fill) !important;
  color: #fff !important;
  box-shadow: none !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

html body .promo-compact-modal .promo-compact-submit:hover {
  background: var(--np-red-fill-hover) !important;
}

html body .promo-compact-modal .promo-compact-submit svg {
  display: none;
}

/* ---------- ежедневная награда ---------- */
html body .daily-rewards-backdrop {
  background: rgba(5, 5, 5, .72) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

html body .daily-rewards-window {
  width: min(560px, calc(100vw - 32px)) !important;
  padding: 24px !important;
  border: 1px solid var(--np-line) !important;
  border-radius: 16px !important;
  background: var(--np-surface) !important;
  box-shadow: var(--np-shadow-overlay) !important;
}

html body .daily-rewards-close {
  top: 18px !important;
  right: 18px !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: var(--np-radius-md) !important;
  background: transparent !important;
  color: var(--np-ink-2) !important;
  font-size: 22px !important;
}

html body .daily-rewards-close:hover {
  background: var(--np-surface-2) !important;
  color: var(--np-ink) !important;
}

html body .daily-rewards-head {
  align-items: center !important;
  gap: 14px !important;
  margin-bottom: 16px !important;
  padding-right: 40px;
}

html body .daily-rewards-icon {
  width: 44px !important;
  height: 44px !important;
  flex: 0 0 44px;
  border: 0 !important;
  border-radius: var(--np-radius-md) !important;
  background: var(--np-green-soft) !important;
  color: var(--np-green) !important;
  box-shadow: none !important;
}

html body .daily-rewards-icon svg {
  width: 20px !important;
  height: 20px !important;
  fill: currentColor !important;
}

html body .daily-rewards-head h3 {
  margin: 0 !important;
  font-family: var(--np-font-display) !important;
  font-size: 19px !important;
  line-height: 24px !important;
  font-weight: 400 !important;
}

html body .daily-rewards-head p {
  margin: 2px 0 0 !important;
  font-size: 13px !important;
  line-height: 18px !important;
  color: var(--np-ink-2) !important;
}

html body .daily-rewards-btn {
  height: 44px !important;
  min-height: 0 !important;
  border-radius: var(--np-radius-md) !important;
  background: var(--np-green) !important;
  color: #0a0a0a !important;
  box-shadow: none !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

html body .daily-rewards-btn:disabled {
  background: var(--np-surface-2) !important;
  color: var(--np-ink-3) !important;
}

html body .wrapper_server_accept .server_accept {
  width: 100% !important;
  box-sizing: border-box;
}

/* ежедневная награда: дни серии зелёным, карточка «за сегодня» спокойная, кнопка «Забрать» — зелёная, «Войти» — основная красная */
html body .daily-rewards-window .daily-rewards-head {
  padding-bottom: 16px !important;
  border-bottom: 1px solid var(--np-line) !important;
}

html body .daily-reward-step .daily-reward-step-mark {
  border-color: var(--np-line-input) !important;
  background: var(--np-surface-2) !important;
  box-shadow: none !important;
}

html body .daily-reward-step .daily-reward-step-mark svg {
  fill: var(--np-ink-3) !important;
}

html body .daily-reward-step.is-done .daily-reward-step-mark {
  border-color: transparent !important;
  background: var(--np-green-soft) !important;
}

html body .daily-reward-step.is-done .daily-reward-step-mark svg {
  fill: var(--np-green) !important;
}

html body .daily-reward-step.is-current .daily-reward-step-mark {
  border-color: transparent !important;
  background: var(--np-green) !important;
  box-shadow: 0 0 0 4px rgba(95, 201, 126, .16) !important;
}

html body .daily-reward-step.is-current .daily-reward-step-mark svg {
  fill: #0a0a0a !important;
}

html body .daily-reward-step.is-current .daily-reward-step-status {
  color: var(--np-green) !important;
}

html body .daily-reward-step.is-current:before {
  display: none !important;
}

html body .daily-reward-step-day {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--np-ink-3) !important;
}

html body .daily-rewards-today-card {
  padding: 12px 12px 12px 16px !important;
  border: 0 !important;
  border-radius: var(--np-radius-md) !important;
  background: var(--np-surface-2) !important;
  box-shadow: none !important;
}

html body .daily-rewards-today-icon {
  width: 44px !important;
  height: 44px !important;
  border: 0 !important;
  border-radius: var(--np-radius-md) !important;
  background: var(--np-gold-soft) !important;
  box-shadow: none !important;
}

html body .daily-rewards-today-icon svg {
  width: 20px !important;
  height: 20px !important;
  fill: var(--np-gold) !important;
  color: var(--np-gold) !important;
}

html body .daily-rewards-today-value {
  font-family: var(--np-font-display) !important;
  font-size: 19px !important;
  line-height: 24px !important;
  font-weight: 400 !important;
  color: var(--np-gold) !important;
}

html body .daily-rewards-today-desc {
  font-size: 13px !important;
  color: var(--np-ink-2) !important;
}

html body a.daily-rewards-btn {
  background: var(--np-red-fill) !important;
  color: #fff !important;
}

html body a.daily-rewards-btn:hover {
  background: var(--np-red-fill-hover) !important;
}

html body .daily-rewards-footer-modern {
  border-top-color: var(--np-line) !important;
}

html body .daily-rewards-streak svg {
  fill: var(--np-ink-3) !important;
  color: var(--np-ink-3) !important;
}

html body .daily-rewards-streak strong {
  color: var(--np-ink) !important;
}

html body .punish_body .text_subinfo span a {
  margin: 0 !important;
  padding: 0 !important;
}

html body .daily-rewards-btn,
html body .daily-rewards-btn::before,
html body .daily-rewards-btn::after {
  box-shadow: none !important;
  filter: none !important;
}

/* V8: окна и серые кнопки в окнах — без обводки (кнопку отделяет подложка surface-2, окно — тень) */
html body .popup_modal_content,
html body .wrapper_server_accept,
html body .modal-window-server .modal-card,
html body .inventory-vip-modal-card,
html body .promo-compact-modal .promo-compact-content,
html body .daily-rewards-window {
  border-color: transparent !important;
}

html body .modal-window-server .modal-card__footer .modal-btn_copy,
html body .inventory-vip-modal-cancel,
html body .punish_body button.btn_unban,
html body .punish_body .punish_buttons button,
html body .punish_body .punish_buttons a {
  border-color: transparent !important;
}

html body .modal-window-server .modal-card__footer .modal-btn_copy:hover,
html body .inventory-vip-modal-cancel:hover {
  background: var(--np-surface-3) !important;
}

/* одиночная кнопка «Снять наказание» стоит прямо в колонке окна — без flex:1, иначе схлопывается по высоте */
html body .punish_body > button.btn_unban {
  flex: 0 0 auto !important;
  width: 100% !important;
}

html body .punish_body .text_subinfo,
html body .punish_body .text_subinfo * {
  text-align: left !important;
}

/* красный текст в окне наказания — фирменный red, как у кнопок, а не светлый red-text */
html body .punish_body button.btn_unban,
html body .punish_body .punish_buttons button,
html body .punish_body .punish_buttons a,
html body .punish_body .punish_take_admin a {
  color: var(--np-red) !important;
}

/* промокод: окно уже, заголовок не обрезается снизу, награда — компактная строка слева, а не блок по центру */
html body .promo-compact-modal .promo-compact-content {
  width: min(420px, calc(100vw - 32px)) !important;
}

html body .promo-compact-modal .promo-compact-head {
  grid-template-columns: 44px minmax(0, 1fr) !important;
  margin-bottom: 20px !important;
}

html body .promo-compact-modal .promo-compact-head h3 {
  padding-bottom: 2px;
  overflow: visible !important;
  line-height: 28px !important;
}

html body .promo-compact-modal .promo-compact-reward,
html body .promo-compact-modal .promo-compact-reward.is-muted,
html body .promo-compact-modal .promo-compact-reward.is-active {
  display: flex !important;
  flex-direction: row !important;
  justify-content: flex-start !important;
  align-items: center !important;
  min-height: 0 !important;
  text-align: left !important;
}

html body .promo-compact-modal .promo-compact-reward-icon,
html body .promo-compact-modal .promo-compact-reward-icon.muted {
  margin: 0 !important;
}

html body .promo-compact-modal .promo-compact-reward-icon svg {
  width: 20px !important;
  height: 20px !important;
}

html body .promo-compact-modal .promo-compact-reward strong {
  margin: 0 0 2px !important;
}

html body .promo-compact-modal .promo-compact-reward-wrap {
  margin: 0 0 16px !important;
}

/* ======================================================
   Окно ежедневной награды — как в макете: календарь недели, награда строкой, одна кнопка
   ====================================================== */
html body .nps-dm-window {
  display: flex !important;
  flex-direction: column;
  gap: 16px;
  width: min(480px, calc(100vw - 32px)) !important;
}

.nps-dm-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-right: 40px;
}

.nps-dm-ic {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: var(--np-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--np-green-soft);
  color: var(--np-green);
}

.nps-dm-ic.is-gold {
  background: var(--np-gold-soft);
  color: var(--np-gold);
}

.nps-dm-ic svg {
  width: 20px !important;
  height: 20px !important;
  fill: currentColor !important;
}

html body .nps-dm-title {
  margin: 0 !important;
  font-family: var(--np-font-display) !important;
  font-size: 19px !important;
  line-height: 26px !important;
  font-weight: 400 !important;
  color: var(--np-ink) !important;
}

.nps-dm-sub {
  margin: 2px 0 0;
  font-size: 13px;
  line-height: 18px;
  color: var(--np-ink-2);
}

.nps-dm-cal {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nps-dm-day {
  height: 58px;
  border-radius: var(--np-radius-md);
  background: var(--np-surface-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  color: var(--np-ink-3);
}

.nps-dm-day b {
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
  color: var(--np-ink-2);
}

.nps-dm-day span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  line-height: 14px;
  color: inherit !important;
}

.nps-dm-day svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.nps-dm-day.is-done {
  background: var(--np-green-soft);
  color: var(--np-green);
}

.nps-dm-day.is-done b {
  color: var(--np-green);
}

.nps-dm-day.is-cur {
  background: var(--np-green);
  color: #0a0a0a;
}

.nps-dm-day.is-cur b {
  color: #0a0a0a;
}

.nps-dm-day.is-prize {
  background: var(--np-gold-soft);
  color: var(--np-gold);
}

.nps-dm-today {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border-radius: var(--np-radius-md);
  background: var(--np-surface-2);
}

.nps-dm-today b {
  display: block;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--np-ink);
}

.nps-dm-today span {
  font-size: 13px;
  line-height: 18px;
  color: var(--np-ink-2) !important;
}

html body .nps-dm-btn,
html body .nps-dm-btn:hover {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  height: 44px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 16px !important;
  border: 0 !important;
  border-radius: var(--np-radius-md) !important;
  background: var(--np-green) !important;
  color: #0a0a0a !important;
  box-shadow: none !important;
  filter: none !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

html body .nps-dm-btn:hover {
  filter: brightness(1.06) !important;
}

html body .nps-dm-btn.is-login,
html body .nps-dm-btn.is-login:hover {
  background: var(--np-red-fill) !important;
  color: #fff !important;
  filter: none !important;
}

html body .nps-dm-btn:disabled {
  background: var(--np-surface-2) !important;
  color: var(--np-ink-3) !important;
  filter: none !important;
  cursor: default;
}

html body .nps-dm-window .daily-rewards-message {
  margin: -4px 0 0 !important;
  font-size: 13px !important;
  line-height: 18px !important;
  color: var(--np-ink-2) !important;
}

html body .nps-dm-window .daily-rewards-message:empty {
  display: none;
}

html body .nps-dm-window .daily-rewards-message.is-error {
  color: var(--np-amber) !important;
}

html body .nps-dm-window .daily-rewards-message.is-success {
  color: var(--np-green) !important;
}

/* магазин: выбор сервера — шапка с подписью и крестиком, нечётная последняя плитка на всю ширину */
html body .wrapper_server_accept .server_accept_head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

html body .wrapper_server_accept .server_accept_head .server_accept_title {
  margin: 0;
}

html body .wrapper_server_accept .server_accept_sub {
  margin-top: 2px;
  font-size: 13px;
  line-height: 18px;
  color: var(--np-ink-2);
}

html body .wrapper_server_accept .server_accept_close {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  margin: -6px -8px 0 0;
  padding: 0;
  border: 0;
  border-radius: var(--np-radius-md);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

html body .wrapper_server_accept .server_accept_close:hover {
  background: var(--np-surface-2);
}

html body .wrapper_server_accept .server_accept_close svg {
  width: 18px !important;
  height: 18px !important;
  fill: var(--np-ink-2) !important;
}

html body .wrapper_server_accept .server_accept:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

html body .wrapper_server_accept .server_accept_head {
  align-self: stretch;
  width: 100%;
  text-align: left;
}

html body .wrapper_server_accept .server_accept_head {
  margin-bottom: 0;
}

/* окно награды: сообщение после «Забрать» — плашка над кнопкой (предупреждение жёлтое, успех зелёный) */
html body .nps-dm-window .nps-dm-btn {
  order: 3;
}

html body .nps-dm-window .daily-rewards-message {
  order: 2;
}

html body .nps-dm-window .daily-rewards-message.is-error,
html body .nps-dm-window .daily-rewards-message.is-success {
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  margin: 0 !important;
  padding: 12px 14px !important;
  border-radius: var(--np-radius-md) !important;
  font-size: 13px !important;
  line-height: 18px !important;
  font-weight: 500;
}

html body .nps-dm-window .daily-rewards-message.is-error {
  background: var(--np-amber-soft) !important;
  color: var(--np-amber) !important;
}

html body .nps-dm-window .daily-rewards-message.is-success {
  background: var(--np-green-soft) !important;
  color: var(--np-green) !important;
}

html body .nps-dm-window .daily-rewards-message.is-error::before,
html body .nps-dm-window .daily-rewards-message.is-success::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  margin-top: 1px;
  background: currentColor;
  -webkit-mask: var(--nps-dm-ico) center / contain no-repeat;
  mask: var(--nps-dm-ico) center / contain no-repeat;
}

html body .nps-dm-window .daily-rewards-message.is-error {
  --nps-dm-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 1 21h22L12 2Zm1 15h-2v-2h2v2Zm0-4h-2V9h2v4Z'/%3E%3C/svg%3E");
}

html body .nps-dm-window .daily-rewards-message.is-success {
  --nps-dm-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm-1.2 13.6 6.1-6.1-1.4-1.4-4.7 4.7-2.3-2.3-1.4 1.4 3.7 3.7Z'/%3E%3C/svg%3E");
}

/* ======================================================
   Уведомления: пилюля по центру под навбаром (макет «Уведомления», вариант 5).
   Рисует noty() из assets/js/app.js.
   ====================================================== */
.nps-toasts {
  position: fixed;
  top: 88px;
  left: 50%;
  z-index: 10200;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: calc(100vw - 32px);
  transform: translateX(-50%);
  pointer-events: none;
}

.nps-toast {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 560px;
  min-height: 40px;
  box-sizing: border-box;
  padding: 10px 18px 10px 12px;
  border-radius: 999px;
  background: var(--np-surface-2);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .04);
  font-family: var(--np-font-sans);
  font-size: 13px;
  line-height: 18px;
  color: var(--np-ink-2);
  cursor: pointer;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(-8px) scale(.98);
  transition: opacity .18s ease, transform .18s ease;
}

.nps-toast.is-in {
  opacity: 1;
  transform: none;
}

.nps-toast.is-out {
  opacity: 0;
  transform: translateY(-6px);
}

.nps-toast svg {
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px;
  fill: var(--np-ink-2) !important;
}

.nps-toast.is-ok svg { fill: var(--np-green) !important; }
.nps-toast.is-err svg { fill: var(--np-red) !important; }
.nps-toast.is-warn svg { fill: var(--np-amber) !important; }

.nps-toast b {
  flex: 0 0 auto;
  font-weight: 600;
  color: var(--np-ink);
  white-space: nowrap;
}

.nps-toast span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* под модальным окном затемнение — пилюля всё равно поверх */
@media (max-width: 1079.9px) {
  .nps-toasts { top: 76px; }
  .nps-toast span { white-space: normal; }
  .nps-toast { border-radius: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .nps-toast { transition: none; }
}

/* длинный текст не обрезаем — переносим; пилюля остаётся скруглённой */
.nps-toast { max-width: min(640px, calc(100vw - 32px)); border-radius: 20px; }
.nps-toast b { align-self: flex-start; line-height: 20px; }
.nps-toast svg { align-self: flex-start; margin-top: 2px; }
.nps-toast span { white-space: normal; overflow: visible; line-height: 20px; }


/* ======================================================
   V9: меню профиля (макет «Меню профиля», вариант 7):
   без шапки с аватаром — пункты списком, «+» у баланса в капсуле, «Выйти» отдельной строкой.
   ====================================================== */
html body .user__menu {
  width: 272px !important;
  min-width: 0 !important;
  box-sizing: border-box;
  padding: 6px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: var(--np-surface) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .05) !important;
}

html body .user__menu .user_profile_wrapper {
  padding: 0 !important;
  background: none !important;
}

html body .user__menu .user__links {
  display: flex !important;
  flex-direction: column;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body .user__menu .user__links > a,
html body .user__menu .user__links > .button {
  display: flex !important;
  align-items: center;
  gap: 10px !important;
  width: 100% !important;
  height: 38px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: var(--np-radius-md) !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--np-ink) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: background-color .15s ease;
}

html body .user__menu .user__links > a:hover,
html body .user__menu .user__links > .button:hover {
  background: var(--np-surface-2) !important;
}

html body .user__menu .user__links > a svg {
  width: 17px !important;
  height: 17px !important;
  flex: 0 0 17px;
  fill: var(--np-ink-3) !important;
  color: var(--np-ink-3) !important;
}

html body .user__menu .user__links > a.pay-link,
html body .user__menu .user__links > a.pay-link svg {
  color: var(--np-ink) !important;
}

html body .user__menu .user__links > a.pay-link svg {
  fill: var(--np-ink-3) !important;
}

html body .user__menu .nps-menu-lang em {
  margin-left: auto;
  font-style: normal;
  font-size: 12px;
  color: var(--np-ink-3);
}

html body .user__menu .nps-menu-sep {
  display: block;
  height: 1px;
  margin: 6px 4px;
  background: var(--np-line);
}

/* две линии подряд (у игрока без админских пунктов) и линия в самом начале/конце — не рисуем */
html body .user__menu .nps-menu-sep + .nps-menu-sep,
html body .user__menu .nps-menu-sep:last-child {
  display: none;
}

html body .user__menu .user_profile_footer {
  margin: 6px 0 0 !important;
  padding: 6px 0 0 !important;
  border-top: 1px solid var(--np-line) !important;
  background: none !important;
}

html body .user__menu .user_profile_footer .nps-menu-out {
  display: flex !important;
  align-items: center;
  gap: 10px;
  width: 100% !important;
  height: 38px !important;
  box-sizing: border-box;
  padding: 0 10px !important;
  border-radius: var(--np-radius-md) !important;
  background: transparent !important;
  color: var(--np-ink-2) !important;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}

html body .user__menu .user_profile_footer .nps-menu-out:hover {
  background: var(--np-surface-2) !important;
  color: var(--np-red) !important;
}

html body .user__menu .user_profile_footer .nps-menu-out svg {
  width: 17px !important;
  height: 17px !important;
  fill: currentColor !important;
  opacity: 1 !important;
}

/* «+» у баланса в капсуле — пополнить */
.nps-prof-txt span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.nps-prof-plus {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--np-gold-soft);
  box-shadow: 0 0 0 1px rgba(233, 191, 111, .35);
  cursor: pointer;
  transition: background-color .15s ease, transform .15s ease;
}

.nps-prof-plus:hover {
  background: rgba(233, 191, 111, .25);
  transform: scale(1.1);
}

.nps-prof-plus svg {
  width: 11px !important;
  height: 11px !important;
  fill: var(--np-gold) !important;
}

html body .user__menu .user_profile_footer .nps-menu-out { text-transform: none !important; letter-spacing: 0 !important; opacity: 1 !important; justify-content: flex-start !important; }



/* ======================================================
   NIPOS: админки (макет «Админ-панель», вариант 1) — вкладки-пилюли, карточки, поля без обводки,
   переключатели, кнопки, таблицы, окна. Только на страницах с body.nps-admin (класс ставит app/page/general/head.php).
   Разметку и обработчики не трогаем.
   ====================================================== */
/* вкладки разделов */
body.nps-admin .admin_nav:not(.navbar *) { display: flex !important; flex-wrap: wrap; gap: 4px !important; margin-bottom: 16px !important; padding: 4px !important; border: 0 !important; border-radius: 12px !important; background: var(--np-surface, #121212) !important; }
body.nps-admin .admin_nav > button:not(.navbar *), body.nps-admin .admin_nav > a:not(.navbar *) { display: inline-flex !important; align-items: center; gap: 8px; height: 36px !important; min-height: 0 !important; margin: 0 !important; padding: 0 12px !important; border: 0 !important; border-radius: 8px !important; background: transparent !important; box-shadow: none !important; font-size: 13px !important; font-weight: 600 !important; color: var(--np-ink-2, #a6a6a6) !important; }
body.nps-admin .admin_nav > button:hover:not(.navbar *), body.nps-admin .admin_nav > a:hover:not(.navbar *) { background: var(--np-surface-2, #1a1a1a) !important; color: var(--np-ink, #f2f2f2) !important; }
body.nps-admin .admin_nav > button svg:not(.navbar *), body.nps-admin .admin_nav > a svg:not(.navbar *) { width: 16px !important; height: 16px !important; fill: currentColor !important; opacity: .8; }
body.nps-admin .admin_nav > .active:not(.navbar *) { background: var(--np-red-soft, #2a1215) !important; color: var(--np-red, #ff233b) !important; }
body.nps-admin .admin_nav > .active svg:not(.navbar *) { opacity: 1; }

/* карточки */
body.nps-admin .card:not(.navbar *) { border: 0 !important; border-radius: 14px !important; background: var(--np-surface, #121212) !important; box-shadow: none !important; }
body.nps-admin .card-header:not(.navbar *) { display: flex !important; align-items: center; gap: 10px; min-height: 0 !important; padding: 18px 20px 0 !important; border: 0 !important; background: none !important; }
body.nps-admin .card-header .badge:not(.navbar *), body.nps-admin .card-header h3:not(.navbar *), body.nps-admin .card-header h4:not(.navbar *), body.nps-admin .card-header h5:not(.navbar *) { margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; font-family: var(--np-font-sans) !important; font-size: 16px !important; line-height: 22px !important; font-weight: 700 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--np-ink, #f2f2f2) !important; }
body.nps-admin .card-container:not(.navbar *) { padding: 16px 20px 20px !important; }
body.nps-admin .card-bottom:not(.navbar *) { display: flex; justify-content: flex-end; gap: 8px; padding: 0 20px 20px !important; border: 0 !important; background: none !important; }
body.nps-admin hr:not(.navbar *) { height: 0; margin: 16px 0 !important; border: 0 !important; border-top: 1px solid var(--np-line, #262626) !important; opacity: 1 !important; background: none !important; }

/* подписи и поля */
body.nps-admin .inputs-inline > label:first-child:not(:last-child):not(.navbar *) { font-size: 12px !important; line-height: 16px !important; font-weight: 600 !important; color: var(--np-ink-2, #a6a6a6) !important; }
body.nps-admin input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not(.hide-input):not(.navbar *), body.nps-admin textarea:not(.navbar *), body.nps-admin select:not(.navbar *) { box-sizing: border-box; min-height: 40px; border: 0 !important; border-radius: 8px !important; background-color: var(--np-surface-2, #1a1a1a) !important; box-shadow: none !important; font-size: 13px !important; color: var(--np-ink, #f2f2f2) !important; outline: 0; }
body.nps-admin input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not(.hide-input):focus:not(.navbar *), body.nps-admin textarea:focus:not(.navbar *), body.nps-admin select:focus:not(.navbar *) { box-shadow: inset 0 0 0 1px var(--np-ink-3, #7a7a7a) !important; }
body.nps-admin input:not(.navbar *)::placeholder, body.nps-admin textarea:not(.navbar *)::placeholder { color: var(--np-ink-3, #7a7a7a) !important; }
body.nps-admin .eye-password svg:not(.navbar *) { fill: var(--np-ink-3, #7a7a7a) !important; }
/* выпадающий список шаблона */
body.nps-admin .adaptive-select:not(.navbar *) { box-sizing: border-box; min-height: 40px !important; padding: 0 12px !important; border: 0 !important; border-radius: 8px !important; background: var(--np-surface-2, #1a1a1a) !important; box-shadow: none !important; font-size: 13px !important; color: var(--np-ink, #f2f2f2) !important; }
body.nps-admin .adaptive-select__arrow svg:not(.navbar *) { width: 14px !important; height: 14px !important; fill: var(--np-ink-3, #7a7a7a) !important; }
body.nps-admin .adaptive-select__dropdown-list:not(.navbar *) { border: 0 !important; border-radius: 10px !important; background: var(--np-surface-3, #242424) !important; box-shadow: 0 16px 40px rgba(0, 0, 0, .5) !important; }
body.nps-admin .adaptive-select__label:hover:not(.navbar *) { background: rgba(255, 255, 255, .05) !important; }

/* переключатели, галочки, радио */
body.nps-admin input[type="checkbox"]:not(.navbar *), body.nps-admin input[type="radio"]:not(.navbar *) { --border: var(--np-line-input, #5c5c5c); --border-hover: var(--np-ink-3, #7a7a7a); --active: var(--np-red, #ff233b); --active-inner: #fff; --focus: 3px solid rgba(255, 255, 255, .06); }
body.nps-admin input[type="checkbox"].switch:not(.navbar *) { --background: var(--np-surface-3, #242424); --border: transparent; --active: rgba(255, 35, 59, .28); width: 34px !important; height: 20px !important; border: 0 !important; border-radius: 10px !important; flex: none; }
body.nps-admin input[type="checkbox"].switch:not(.navbar *):after { top: 3px !important; left: 3px !important; width: 14px !important; height: 14px !important; background: #7a7a7a !important; }
body.nps-admin input[type="checkbox"].switch:checked:not(.navbar *):after { background: var(--np-red, #ff233b) !important; transform: translateX(14px) !important; }
body.nps-admin input[type="checkbox"] + label:not(.navbar *), body.nps-admin input[type="radio"] + label:not(.navbar *) { font-size: 14px !important; line-height: 20px !important; color: var(--np-ink, #f2f2f2) !important; margin-left: 10px !important; }
body.nps-admin fieldset:not(.navbar *) { margin: 8px 0 !important; padding: 10px 14px 12px !important; border: 0 !important; border-radius: 10px !important; background: var(--np-surface-2, #1a1a1a) !important; }
body.nps-admin fieldset legend:not(.navbar *) { float: left; width: 100%; margin: 0 0 8px !important; padding: 0 !important; font-size: 12px !important; line-height: 16px; font-weight: 600 !important; color: var(--np-ink-2, #a6a6a6) !important; }
body.nps-admin fieldset legend + *:not(.navbar *) { clear: both; }

/* кнопки */
body.nps-admin button.width-100:not(.button-delete):not(.navbar *), body.nps-admin .card-bottom button:not(.button-delete):not(.navbar *), body.nps-admin button[type="submit"]:not(.button-delete):not(.navbar *) { display: flex !important; align-items: center; justify-content: center; gap: 8px; width: auto !important; min-width: 140px; height: 40px !important; min-height: 0 !important; margin-left: auto !important; padding: 0 18px !important; border: 0 !important; border-radius: 8px !important; background: var(--np-red-fill, #e5162e) !important; box-shadow: none !important; font-size: 13px !important; font-weight: 600 !important; color: #fff !important; }
body.nps-admin button.width-100:not(.button-delete):hover:not(.navbar *), body.nps-admin .card-bottom button:not(.button-delete):hover:not(.navbar *), body.nps-admin button[type="submit"]:not(.button-delete):hover:not(.navbar *) { background: var(--np-red-fill-hover, #cc1027) !important; }
body.nps-admin a.button:not(.navbar *), body.nps-admin button.filter:not(.navbar *), body.nps-admin button.mobile-button:not(.button-delete):not(.navbar *) { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px !important; min-height: 0 !important; padding: 0 12px !important; border: 0 !important; border-radius: 8px !important; background: var(--np-surface-2, #1a1a1a) !important; box-shadow: none !important; font-size: 12px !important; font-weight: 600 !important; color: var(--np-ink, #f2f2f2) !important; }
body.nps-admin a.button:hover:not(.navbar *), body.nps-admin button.filter:hover:not(.navbar *), body.nps-admin button.mobile-button:not(.button-delete):hover:not(.navbar *) { background: var(--np-surface-3, #242424) !important; }
body.nps-admin button.filter.active:not(.navbar *) { background: var(--np-red-soft, #2a1215) !important; color: var(--np-red, #ff233b) !important; }
body.nps-admin .button-delete:not(.navbar *) { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px !important; min-height: 0 !important; padding: 0 12px !important; border: 0 !important; border-radius: 8px !important; background: transparent !important; box-shadow: none !important; font-size: 12px !important; font-weight: 600 !important; color: var(--np-ink-3, #7a7a7a) !important; }
body.nps-admin .button-delete:hover:not(.navbar *) { background: var(--np-red-soft, #2a1215) !important; color: var(--np-red, #ff233b) !important; }
body.nps-admin .button-delete svg:not(.navbar *), body.nps-admin a.button svg:not(.navbar *) { width: 14px !important; height: 14px !important; fill: currentColor !important; }
body.nps-admin .button-delete.width-100:not(.navbar *) { width: 100% !important; }

/* таблицы */
body.nps-admin .table:not(.navbar *) { border-collapse: collapse; background: none !important; color: var(--np-ink, #f2f2f2); }
body.nps-admin .table th:not(.navbar *) { padding: 10px 12px !important; border: 0 !important; border-bottom: 1px solid var(--np-line, #262626) !important; background: none !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: .05em; text-transform: uppercase; color: var(--np-ink-3, #7a7a7a) !important; }
body.nps-admin .table td:not(.navbar *) { padding: 12px !important; border: 0 !important; border-top: 1px solid var(--np-line, #262626) !important; background: none !important; font-size: 13px !important; vertical-align: middle; }
body.nps-admin .table tbody tr:hover td:not(.navbar *) { background: rgba(255, 255, 255, .02) !important; }

/* окна */
body.nps-admin .popup_modal_content:not(.navbar *), body.nps-admin .modal-window:not(.navbar *) { border: 0 !important; border-radius: 16px !important; background: var(--np-surface, #121212) !important; box-shadow: 0 24px 64px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .05) !important; }
body.nps-admin .popup_modal_head:not(.navbar *) { font-family: var(--np-font-display) !important; font-weight: 400 !important; font-size: 19px !important; }
body.nps-admin .eye-password:not(.navbar *) { border: 0 !important; border-radius: 0 8px 8px 0 !important; background: var(--np-surface-2, #1a1a1a) !important; }
body.nps-admin .template_version:not(.navbar *) { display: inline-flex; align-items: center; height: 28px; margin: 0 0 12px !important; padding: 0 10px; border-radius: 8px; background: var(--np-surface-2, #1a1a1a); font-family: var(--np-font-sans) !important; font-size: 12px !important; line-height: 28px !important; font-weight: 600 !important; color: var(--np-ink-2, #a6a6a6) !important; }
body.nps-admin .template_version *:not(.navbar *) { font: inherit !important; color: inherit !important; margin: 0 !important; }
body.nps-admin .popup_modal:not(.navbar *) { z-index: 10080 !important; }


/* ---- админ-панель «Основные»: ближе к макету (вариант 1) ---- */
/* иконка в заголовке карточки */
body.nps-admin .card:has(#options_one) .card-header:not(.navbar *)::before, body.nps-admin .card:has(.template_version) .card-header:not(.navbar *)::before { content: ""; flex: none; width: 32px; height: 32px; border-radius: 8px; background: var(--np-surface-2, #1a1a1a) var(--nps-ico) center / 16px no-repeat; }
body.nps-admin .card:has(#options_one) .card-header:not(.navbar *) { --nps-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23a6a6a6'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm6.9 6h-3a15.7 15.7 0 0 0-1.4-3.6A8 8 0 0 1 18.9 8ZM12 4c.8 1.2 1.5 2.5 1.9 4h-3.8c.4-1.5 1.1-2.8 1.9-4ZM4.3 14a8.2 8.2 0 0 1 0-4h3.4a16.5 16.5 0 0 0 0 4H4.3Zm.8 2h3a15.7 15.7 0 0 0 1.4 3.6A8 8 0 0 1 5.1 16Zm3-8h-3a8 8 0 0 1 4.3-3.6C8.9 5.5 8.4 6.7 8.1 8ZM12 20c-.8-1.2-1.5-2.5-1.9-4h3.8c-.4 1.5-1.1 2.8-1.9 4Zm2.3-6H9.7a14.7 14.7 0 0 1 0-4h4.6a14.7 14.7 0 0 1 0 4Zm.3 5.6c.6-1.1 1.1-2.3 1.4-3.6h3a8 8 0 0 1-4.4 3.6Zm1.7-5.6a16.5 16.5 0 0 0 0-4h3.4a8.2 8.2 0 0 1 0 4h-3.4Z'/%3E%3C/svg%3E"); }
body.nps-admin .card:has(.template_version) .card-header:not(.navbar *) { --nps-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23a6a6a6'%3E%3Cpath d='M16 7V3h-2v4h-4V3H8v4H6v5a6 6 0 0 0 5 5.9V21h2v-3.1A6 6 0 0 0 18 12V7h-2Z'/%3E%3C/svg%3E"); }
/* версия шаблона — меткой в заголовке справа */
body.nps-admin .card:has(.template_version):not(.navbar *) { position: relative; }
body.nps-admin .card .template_version:not(.navbar *) { position: absolute; top: 20px; right: 20px; margin: 0 !important; }
/* поля и подписи — размер как в макете */
body.nps-admin .card-container .inputs-inline input:not([type="checkbox"]):not([type="radio"]):not(.hide-input):not(.navbar *), body.nps-admin .card-container .adaptive-select:not(.navbar *), body.nps-admin .card-container .adaptive-select__span_text:not(.navbar *) { font-size: 13px !important; }
body.nps-admin .card-container .inputs-inline input:not([type="checkbox"]):not([type="radio"]):not(.hide-input):not(.navbar *) { padding: 0 12px !important; }
body.nps-admin .card-container .inputs-inline:not(.navbar *) { margin-bottom: 4px; }
body.nps-admin .card-container input[type="checkbox"].switch + label:not(.navbar *) { font-size: 14px !important; }
body.nps-admin .card-container .inputs-inline:has(> input.switch):not(.navbar *) { flex-direction: row !important; align-items: center; gap: 0; min-height: 36px; margin: 0 !important; }
/* подпись над переключателем («Если выбран тип Навбар») */
body.nps-admin #options_one > label:not([for]):not(.navbar *) { display: block; margin: 12px 0 4px !important; font-size: 12px !important; line-height: 16px !important; font-weight: 600 !important; color: var(--np-ink-2, #a6a6a6) !important; }
/* «Навбар / Сайдбар» — сегментом вместо радиокнопок */
body.nps-admin #options_one fieldset:not(.navbar *) { margin: 12px 0 0 !important; padding: 0 !important; background: none !important; }
body.nps-admin #options_one fieldset legend:not(.navbar *) { margin: 0 0 6px !important; }
body.nps-admin #options_one fieldset .flex-inline:not(.navbar *) { display: grid !important; grid-template-columns: 1fr 1fr; gap: 2px !important; padding: 3px !important; border-radius: 9px; background: var(--np-surface-2, #1a1a1a); }
body.nps-admin #options_one fieldset .inputs-inline:not(.navbar *) { position: relative; display: block !important; margin: 0 !important; }
body.nps-admin #options_one fieldset input[type="radio"]:not(.navbar *) { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; margin: 0 !important; border: 0 !important; border-radius: 6px; opacity: 0; cursor: pointer; z-index: 1; }
body.nps-admin #options_one fieldset input[type="radio"] + label:not(.navbar *) { display: flex !important; align-items: center; justify-content: center; height: 34px; margin: 0 !important; border-radius: 6px; font-size: 13px !important; font-weight: 600 !important; color: var(--np-ink-3, #7a7a7a) !important; transition: background-color .15s ease, color .15s ease; }
body.nps-admin #options_one fieldset input[type="radio"]:hover + label:not(.navbar *) { color: var(--np-ink, #f2f2f2) !important; }
body.nps-admin #options_one fieldset input[type="radio"]:checked + label:not(.navbar *) { background: var(--np-surface-3, #242424); color: var(--np-ink, #f2f2f2) !important; }
/* низ карточки: подсказка слева, «Сохранить» справа */
body.nps-admin .card:has(#options_one) .card-bottom:not(.navbar *) { align-items: center; padding-top: 16px !important; }
body.nps-admin .card:has(#options_one) .card-bottom:not(.navbar *)::before { content: "Поля сохраняются кнопкой, переключатели — сразу"; flex: 1; font-size: 12px; line-height: 16px; color: var(--np-ink-3, #7a7a7a); }
body.nps-admin .card:has(#options_one) .card-bottom button:not(.navbar *) { margin-left: 0 !important; }
body.nps-admin .card-container .card-bottom:not(.navbar *) { padding: 16px 0 0 !important; }
body.nps-admin #options_one fieldset legend:not(.navbar *) { float: none !important; display: block; width: auto; }
body.nps-admin #options_one fieldset legend + *:not(.navbar *) { clear: none; }
body.nps-admin .card > .card-bottom:not(.navbar *) { margin: 0 !important; padding: 16px 20px 20px !important; }



/* ======================================================
   NIPOS: панель уведомлений под колокольчиком (макет «Уведомления», панель, вариант 1) — список строками.
   Строки .notify_body приходят с сервера (app/ext/Notifications.php); классы nps-nt-* и is-unread
   ставит storage/assets/js/app.js. Пилюли noty() — отдельно, здесь не трогаются.
   ====================================================== */
body .notification-wrapper { width: min(400px, calc(100vw - 24px)) !important; padding: 0 !important; border: 0 !important; border-radius: 14px !important; background: var(--np-surface, #121212) !important; box-shadow: 0 24px 64px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .06) !important; overflow: hidden !important; }
body .notification-wrapper .notifications__header { display: flex !important; align-items: center !important; justify-content: space-between; gap: 10px; margin: 0 !important; padding: 14px 16px 10px !important; border: 0 !important; background: none !important; }
body .notification-wrapper .notifications__title { font-family: var(--np-font-sans) !important; font-size: 15px !important; line-height: 20px !important; font-weight: 700 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--np-ink, #f2f2f2) !important; }
body .notification-wrapper .noty_clear_all { display: inline-flex !important; align-items: center; gap: 6px; height: 30px !important; padding: 0 10px !important; border: 0 !important; border-radius: 8px !important; background: transparent !important; font-size: 12px !important; font-weight: 600 !important; color: var(--np-ink-2, #a6a6a6) !important; cursor: pointer; }
body .notification-wrapper .noty_clear_all:hover { background: var(--np-red-soft, #2a1215) !important; color: var(--np-red, #ff233b) !important; }
body .notification-wrapper .noty_clear_all svg { width: 14px !important; height: 14px !important; fill: currentColor !important; }
body .notification-wrapper .notifications__main { max-height: min(460px, 70vh) !important; margin: 0 !important; padding: 0 0 8px !important; overflow-y: auto !important; background: none !important; }

/* строка */
body .notification-wrapper .notify_body { --nt-c: var(--np-red, #ff233b); position: relative !important; display: flex !important; align-items: flex-start !important; gap: 0 !important; margin: 0 !important; padding: 10px 16px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; transition: background-color .15s ease; }
body .notification-wrapper .notify_body:hover { background: var(--np-surface-2, #1a1a1a) !important; }
body .notification-wrapper .notify_body.is-unread { background: rgba(255, 255, 255, .025) !important; }
body .notification-wrapper .notify_body.is-unread:hover { background: var(--np-surface-2, #1a1a1a) !important; }
body .notification-wrapper .notify_body.is-unread::after { content: ""; position: absolute; right: 16px; top: 16px; width: 8px; height: 8px; border-radius: 50%; background: var(--np-red, #ff233b); transition: opacity .15s ease; }
body .notification-wrapper .notify_body.is-unread:hover::after { opacity: 0; }
body .notification-wrapper .notify_body.nps-nt-success { --nt-c: var(--np-green, #5fc97e); }
body .notification-wrapper .notify_body.nps-nt-gift { --nt-c: var(--np-gold, #e9bf6f); }
body .notification-wrapper .notify_body.nps-nt-info { --nt-c: #8ea2ff; }
body .notification-wrapper .notify_body.nps-nt-warn { --nt-c: var(--np-amber, #f0a53a); }
body .notification-wrapper .notify_content { flex: 1; min-width: 0; display: flex !important; align-items: flex-start !important; gap: 12px !important; margin: 0 !important; padding: 0 22px 0 0 !important; background: none !important; }
body .notification-wrapper .notify_image { flex: none !important; width: 32px !important; height: 32px !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 8px !important; display: flex !important; align-items: center; justify-content: center; background: color-mix(in srgb, var(--nt-c) 16%, transparent) !important; color: var(--nt-c) !important; }
body .notification-wrapper .notify_image svg { width: 16px !important; height: 16px !important; fill: currentColor !important; }
body .notification-wrapper .notify_image svg * { fill: currentColor !important; }
body .notification-wrapper .notify_image img { width: 100%; height: 100%; border-radius: 8px; object-fit: cover; }
body .notification-wrapper .notify_text { flex: 1; min-width: 0; display: block !important; margin: 0 !important; padding: 0 !important; }
body .notification-wrapper .notify_title { margin: 0 !important; font-size: 13px !important; line-height: 18px !important; font-weight: 700 !important; color: var(--np-ink, #f2f2f2) !important; }
body .notification-wrapper .notify_message { margin: 2px 0 0 !important; font-size: 12px !important; line-height: 16px !important; font-weight: 400 !important; color: var(--np-ink-2, #a6a6a6) !important; }
/* кнопка из уведомления — ссылкой «… →» */
body .notification-wrapper .notify_btn { display: inline-flex !important; align-items: center; gap: 4px; width: auto !important; height: auto !important; margin: 6px 0 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; font-size: 12px !important; line-height: 16px !important; font-weight: 700 !important; color: var(--np-red, #ff233b) !important; cursor: pointer; }
body .notification-wrapper .notify_btn::after { content: "→"; }
body .notification-wrapper .notify_btn:hover { text-decoration: underline; }
/* крестик — при наведении, на месте точки */
body .notification-wrapper .notify_closethis { position: absolute !important; top: 10px; right: 10px; width: 24px !important; height: 24px !important; margin: 0 !important; padding: 0 !important; border-radius: 6px !important; display: flex !important; align-items: center; justify-content: center; background: transparent !important; opacity: 0; cursor: pointer; transition: opacity .15s ease; }
body .notification-wrapper .notify_body:hover .notify_closethis { opacity: 1; }
body .notification-wrapper .notify_closethis:hover { background: var(--np-surface-3, #242424) !important; }
body .notification-wrapper .notify_closethis svg { width: 10px !important; height: 10px !important; fill: var(--np-ink-3, #7a7a7a) !important; }
/* пусто */
body .notification-wrapper .no_notify { margin: 0 !important; padding: 28px 16px 26px !important; border: 0 !important; background: none !important; font-size: 13px !important; line-height: 18px; text-align: center; color: var(--np-ink-3, #7a7a7a) !important; }


/* ======================================================
   NIPOS: мобильная версия (до 760px). Навбар — логотип, меню, бонусы, колокольчик, аватарка
   (баланс и язык есть в нижней панели и в меню профиля). Блоки главной — в одну колонку.
   ====================================================== */
@media (max-width: 760px) {
  /* навбар */
  body .navbar.row { min-height: 56px !important; height: auto !important; margin: 8px 0 0 !important; padding: 0 10px !important; gap: 8px !important; }
  body .navbar_usermenu { gap: 4px !important; margin-left: auto !important; min-width: 0; }
  body .navbar_usermenu > .pay_button,
  body .navbar_usermenu > .language { display: none !important; }
  body .navbar_usermenu .nps-prof-txt { display: none !important; }
  body .navbar_usermenu .nps-prof { padding: 0 !important; background: none !important; gap: 0 !important; min-width: 0 !important; }
  body .navbar_usermenu .nps-prof .user__avatar img { width: 34px !important; height: 34px !important; }
  body .navbar_usermenu .nps-bonusnav-label { display: none !important; }
  body .navbar_usermenu .nps-bonusnav-btn { width: 38px !important; height: 38px !important; padding: 0 !important; justify-content: center !important; }
  body .navbar_usermenu .user__notifications { width: 38px !important; height: 38px !important; }
  body .navbar_usermenu .notification-wrapper { position: fixed !important; left: 12px !important; right: 12px !important; top: 72px !important; width: auto !important; }
  body .navbar_usermenu .user__menu { position: fixed !important; left: auto !important; right: 12px !important; top: 72px !important; }

  /* бонусы: награда, промокод, бот — строками */
  body .nps-bonus.nps-bonus--rows { display: flex !important; flex-direction: column !important; gap: 0 !important; }
  body .nps-bonus--rows .nps-bonus-row { display: grid !important; grid-template-columns: 40px minmax(0, 1fr) auto !important; align-items: center !important; gap: 12px !important; width: auto !important; min-height: 0 !important; padding: 14px 16px !important; }
  body .nps-bonus--rows .nps-bonus-tx { min-width: 0 !important; }
  body .nps-bonus--rows .nps-bonus-tx * { white-space: normal !important; word-break: normal !important; overflow-wrap: normal !important; }
  body .nps-bonus--rows .nps-bonus-btn { white-space: nowrap !important; }
  body .nps-bonus--rows .nps-bonus-social { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 8px !important; padding: 12px 16px 14px !important; }

  /* серверы — по одному, карточка горизонтальная */
  body .np-servers { grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important; }
  body .np-servers > .np-server { width: auto !important; min-width: 0 !important; }

  /* статистика — плитки по две */
  body .container-fluid > .row:has(.statistics_container) { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; margin-left: 0 !important; margin-right: 0 !important; }
  body .container-fluid > .row:has(.statistics_container) > [class*="col-"] { width: auto !important; max-width: none !important; flex: none !important; padding: 0 !important; margin: 0 !important; }
  body .statistics_container { min-width: 0 !important; }
  body .statistics_container * { white-space: nowrap; }
}
@media (max-width: 760px) {
  html body .navbar_usermenu .nps-bonusnav-btn svg { display: block !important; width: 18px !important; height: 18px !important; }
  html body .navbar_usermenu .nps-bonusnav-btn { background: var(--np-surface-2, #1a1a1a) !important; border-radius: 10px !important; position: relative; }
  html body .navbar_usermenu .nps-prof { display: flex !important; align-items: center !important; }
  html body .navbar_usermenu .nps-prof > svg { display: none !important; }
  /* слайдер: стрелки прячем, листать — свайпом и точками */
  html body .swiper-buttons { display: none !important; }
}
@media (max-width: 760px) {
  html body .navbar_usermenu .user__notifications > svg { display: block !important; width: 18px !important; height: 18px !important; fill: var(--np-ink-2, #a6a6a6) !important; }
  html body .navbar_usermenu .nps-bonusnav-dot { position: absolute !important; top: 7px !important; right: 7px !important; left: auto !important; }
}
@media (max-width: 760px) {
  /* колонка + боковая панель → друг под другом */
  html body .np-layout, html body .np-faq__row { flex-direction: column !important; align-items: stretch !important; gap: 16px !important; }
  html body .np-layout > *, html body .np-faq__row > * { width: auto !important; min-width: 0 !important; max-width: none !important; flex: none !important; }
  html body .np-layout__side, html body .np-faq__side { position: static !important; top: auto !important; }
  /* шапка страницы: заголовок и правый блок — друг под другом, заголовок меньше */
  html body .np-page-head { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; }
  html body .np-page-head__aside { width: auto !important; max-width: 100% !important; margin: 0 !important; }
  html body .np-page-head__title { font-size: 30px !important; line-height: 36px !important; word-break: normal !important; }
  /* скины: оружие по 2 */
  html body #html-js.blocks-skins { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  /* магазин: тарифы по одному */
  html body .shop_wrapper_product { grid-template-columns: minmax(0, 1fr) !important; gap: 14px !important; }
  /* таблицы — горизонтальная прокрутка, а не обрезка */
  html body .table-responsive, html body .lb-table, html body [class*="table-wrap"], html body [class*="table-scroll"] { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
}
@media (max-width: 760px) {
  html body .np-inv__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  html body .np-faq__steps { grid-template-columns: minmax(0, 1fr) !important; gap: 14px !important; }
  html body .block-container > .np-skins__side { flex: none !important; width: 100% !important; position: static !important; }
}
@media (max-width: 760px) {
  html body .pf-hero { height: auto !important; min-height: 0 !important; }
  html body .pf-side { justify-content: space-between !important; }
  html body .navbar.row .navbar_usermenu button.user__notifications > svg { display: block !important; width: 18px !important; min-width: 18px !important; height: 18px !important; fill: var(--np-ink-2, #a6a6a6) !important; }
}
@media (max-width: 760px) {
  /* лидеры: на телефоне — место, игрок, очки */
  html body .lb-table { width: 100% !important; min-width: 0 !important; }
  html body .lb-table tr > :nth-child(3), html body .lb-table tr > :nth-child(n+5) { display: none !important; }
}
/* FAQ: админские «+ Вопрос / + Категория» — по ширине текста, справа от вкладок */
html body .np-tabs .faq-create-btn { width: auto !important; min-width: 0 !important; height: 32px !important; padding: 0 12px !important; white-space: nowrap !important; flex: none !important; }
html body .np-tabs .faq-create-btn:first-of-type { margin-left: auto !important; }
html body .np-faq__tools .np-tabs:has(.faq-create-btn) { flex-wrap: wrap !important; row-gap: 8px !important; overflow: visible !important; }
html body .np-tabs .faq-create-btn { border: 0 !important; box-shadow: none !important; border-radius: 8px !important; background: var(--np-surface-2, #1a1a1a) !important; font-size: 12px !important; font-weight: 600 !important; color: var(--np-ink-2, #a6a6a6) !important; }
html body .np-tabs .faq-create-btn:hover { background: var(--np-surface-3, #242424) !important; color: var(--np-ink, #f2f2f2) !important; }
@media (max-width: 760px) {
  /* баланс рядом с аватаркой (без ника) — с «+» для пополнения */
  html body .navbar_usermenu .nps-prof-txt { display: flex !important; align-items: center !important; margin-left: 6px !important; }
  html body .navbar_usermenu .nps-prof-txt > b { display: none !important; }
  html body .navbar_usermenu .nps-prof-txt > span { display: inline-flex !important; align-items: center !important; gap: 4px !important; font-size: 13px !important; font-weight: 700 !important; white-space: nowrap !important; }
  html body .navbar_usermenu .nps-prof { padding: 0 8px 0 0 !important; border-radius: 20px !important; background: var(--np-surface-2, #1a1a1a) !important; }
}
/* окна (пополнение и др.) — выше навбара и нижней панели */
html body .popup_modal { z-index: 10080 !important; }
/* пока открыто окно (пополнение и др.) — кнопку «Поддержка» прячем, чтобы не закрывала поля */
html body:has(.popup_modal.visible) .nps-support-chat { display: none !important; }
@media (max-width: 760px) {
  html body .navbar_usermenu .nps-prof .user__avatar, html body .navbar_usermenu .nps-prof .user__avatar img { border-radius: 50% !important; overflow: hidden; }
}

/* ======================================================
   NIPOS: навбар на средней ширине (761–1079px, в т.ч. при увеличении масштаба в браузере):
   тот же компактный вид — иконки бонусов и уведомлений, капсула «аватар + ник + баланс».
   ====================================================== */
@media (min-width: 761px) and (max-width: 1079.9px) {
  html body .navbar_usermenu { gap: 6px !important; margin-left: auto !important; min-width: 0; align-items: center !important; }
  html body .navbar_usermenu > .pay_button,
  html body .navbar_usermenu > .language,
  html body .navbar_usermenu > .search_players { display: none !important; }
  html body .navbar_usermenu .nps-bonusnav-label { display: none !important; }
  html body .navbar_usermenu .nps-bonusnav-btn { width: 38px !important; height: 38px !important; padding: 0 !important; justify-content: center !important; position: relative; border: 0 !important; border-radius: 10px !important; background: var(--np-surface-2, #1a1a1a) !important; }
  html body .navbar_usermenu .nps-bonusnav-btn svg { display: block !important; width: 18px !important; height: 18px !important; }
  html body .navbar_usermenu .nps-bonusnav-dot { position: absolute !important; top: 7px !important; right: 7px !important; left: auto !important; }
  html body .navbar.row .navbar_usermenu button.user__notifications { width: 38px !important; height: 38px !important; }
  html body .navbar.row .navbar_usermenu button.user__notifications > svg { display: block !important; width: 18px !important; min-width: 18px !important; height: 18px !important; fill: var(--np-ink-2, #a6a6a6) !important; }
  html body .navbar_usermenu .nps-prof { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 10px !important; height: 44px !important; padding: 0 10px 0 5px !important; border-radius: 22px !important; background: var(--np-surface-2, #1a1a1a) !important; }
  html body .navbar_usermenu .nps-prof .user__avatar, html body .navbar_usermenu .nps-prof .user__avatar img { width: 34px !important; height: 34px !important; border-radius: 50% !important; overflow: hidden; }
  html body .navbar_usermenu .nps-prof-txt { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 0 !important; line-height: 1.15 !important; }
  html body .navbar_usermenu .nps-prof-txt > b { display: block !important; font-size: 13px !important; }
  html body .navbar_usermenu .nps-prof-txt > span { display: inline-flex !important; align-items: center !important; gap: 4px !important; font-size: 12px !important; font-weight: 700 !important; white-space: nowrap !important; }
  html body .navbar_usermenu .user__menu { right: 0 !important; left: auto !important; }
}