/*
 * Visual version registry.
 * v1 has no overrides (production).
 * v2 is Figma gaming-page-layout v3 (PC 228:170) + mobile v2 (276:5827).
 */
.design-v2-horizontal-menu {
  display: none;
}

.design-version-switcher {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 11000;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  border: 1px solid rgba(135, 157, 204, .26);
  border-radius: 999px;
  background: rgba(12, 18, 34, .9);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .3);
  backdrop-filter: blur(12px);
}

.design-version-switcher__label {
  padding: 0 6px 0 9px;
  color: #9cabca;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.design-version-switcher button {
  min-width: 36px;
  border: 0;
  border-radius: 999px;
  padding: 6px 9px;
  background: transparent;
  color: #b7c5e2;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.design-version-switcher button:hover,
.design-version-switcher button:focus-visible {
  background: rgba(87, 118, 185, .24);
  color: #fff;
  outline: none;
}

.design-version-switcher button.is-active {
  background: #3977d8;
  color: #fff;
  box-shadow: 0 4px 10px rgba(57, 119, 216, .35);
}

body[data-design-version="v2"] .design-version-switcher {
  border-color: rgba(199, 248, 1, .38);
  background: rgba(16, 9, 63, .93);
}

body[data-design-version="v2"] .design-version-switcher button.is-active {
  background: #c7f801;
  color: #020117;
  box-shadow: 0 4px 10px rgba(199, 248, 1, .3);
}

/* ===== V2 tokens from Figma ===== */
body[data-design-version="v2"] {
  --v2-bg: #02011f;
  --v2-panel: #10093f;
  --v2-panel-dark: #050116;
  --v2-border: #161b50;
  --v2-border-blue: #3360ff;
  --v2-border-soft: #1e2f6b;
  --v2-cyan: #35ddf9;
  --v2-pink: #e875ff;
  --v2-pink-text: #faa1ff;
  --v2-magenta: #fb1aff;
  --v2-lime: #c7f801;
  --v2-mint: #01edbc;
  --v2-blue: #0052ff;
  --v2-text: #fff;
  --v2-muted: #9397b2;
  --v2-search: #4f739f;
  --v2-ink: #020117;
  --v2-chip-active-bg: #19093f;
  --v2-glow-pink: 0 0 16px rgba(198, 94, 242, .33), inset 0 0 8px rgba(198, 94, 242, .33);
  --v2-glow-lime: 0 2px 8px rgba(199, 248, 1, .33);
  --bs-body-bg: #02011f;
  --bs-body-color: #ffffff;
  --bs-body-bg-rgb: 2, 1, 31;
  --bs-primary: #c7f801;
  --bs-primary-rgb: 199, 248, 1;
  --bs-primary-active: #d9ff36;
  --bs-primary-inverse: #020117;
  --bs-primary-light: #19093f;
  --bs-primary-clarity: rgba(199, 248, 1, .2);
  --bs-light: #10093f;
  --bs-light-active: #19093f;
  --bs-light-light: #10093f;
  --bs-light-inverse: #faa1ff;
  --bs-secondary: #10093f;
  --bs-secondary-active: #19093f;
  --bs-secondary-light: #10093f;
  --bs-secondary-inverse: #faa1ff;
  --bs-dark: #050116;
  --bs-dark-active: #19093f;
  --bs-dark-light: #10093f;
  --bs-dark-inverse: #ffffff;
  --bs-text-primary: #faa1ff;
  --bs-link-color: #35ddf9;
  --bs-link-hover-color: #faa1ff;
  --bs-border-color: #161b50;
  --bs-secondary-color: #9397b2;
  --bs-emphasis-color: #ffffff;
  --bs-tertiary-bg: #10093f;
  --bs-gray-100: #10093f;
  --bs-gray-200: #161b50;
  --bs-gray-300: #1e2f6b;
  --bs-gray-400: #4f739f;
  --bs-gray-500: #9397b2;
  --bs-gray-600: #9397b2;
  --bs-gray-700: #ffffff;
  --bs-gray-800: #ffffff;
  --bs-gray-900: #ffffff;
  --bs-text-gray-400: #9397b2;
  --bs-text-gray-500: #9397b2;
  --bs-text-gray-600: #9397b2;
  --bs-text-gray-700: #ffffff;
  --bs-text-gray-800: #ffffff;
  --bs-text-gray-900: #ffffff;
  --bs-app-bg-color: #02011f;
  --bs-app-blank-bg-color: #02011f;
  --bs-app-header-base-bg-color: transparent;
  --bs-app-footer-bg-color: transparent;
  --kt-primary: #c7f801;
  --kt-primary-active: #d9ff36;
  --kt-text-gray-500: #9397b2;
  --kt-text-gray-600: #9397b2;
  --kt-text-gray-700: #ffffff;
  font-family: Inter, sans-serif;
  color-scheme: dark;
  color: var(--v2-text);
  background-color: var(--v2-bg);
  isolation: isolate;
}

body[data-design-version="v2"]::before {
  content: '';
  position: fixed;
  z-index: -2;
  inset: 0;
  pointer-events: none;
  background: url('/public/img/design-v2/ui/page-bg.png') center 488px / 1920px auto no-repeat;
  opacity: .1;
}

body[data-design-version="v2"]::after {
  content: '';
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, var(--v2-bg) 0%, rgba(2, 1, 31, 0) 50%),
    linear-gradient(180deg, rgba(2, 1, 31, 0) 42%, var(--v2-bg) 100%);
}

body[data-design-version="v2"] #kt_app_root,
body[data-design-version="v2"] #kt_app_page,
body[data-design-version="v2"] #kt_app_wrapper {
  min-height: 100vh;
  background: transparent;
}

/* Lobby boot loader — Figma v2 tokens */
body[data-design-version="v2"] .v2-page-loader,
body[data-design-version="v2"] #pageLoader.v2-page-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--v2-bg);
}

body[data-design-version="v2"] #pageLoader.v2-page-loader.is-hidden {
  pointer-events: none;
}

body[data-design-version="v2"] .v2-page-loader__glow {
  position: absolute;
  inset: -18%;
  pointer-events: none;
  background:
    radial-gradient(ellipse 52% 42% at 50% 38%, rgba(53, 221, 249, .22), transparent 58%),
    radial-gradient(ellipse 46% 38% at 62% 62%, rgba(232, 117, 255, .16), transparent 62%),
    radial-gradient(ellipse 40% 34% at 32% 68%, rgba(199, 248, 1, .08), transparent 58%);
}

body[data-design-version="v2"] .v2-page-loader__orbs {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

body[data-design-version="v2"] .v2-page-loader__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  opacity: .55;
  animation: v2LoaderOrb 6.4s ease-in-out infinite;
}

body[data-design-version="v2"] .v2-page-loader__orb--cyan {
  top: 18%;
  left: 22%;
  width: 12px;
  height: 12px;
  background: var(--v2-cyan);
  box-shadow: 0 0 18px rgba(53, 221, 249, .8);
}

body[data-design-version="v2"] .v2-page-loader__orb--pink {
  top: 62%;
  right: 20%;
  width: 10px;
  height: 10px;
  background: var(--v2-pink);
  box-shadow: 0 0 18px rgba(232, 117, 255, .8);
  animation-delay: -2.2s;
}

body[data-design-version="v2"] .v2-page-loader__orb--lime {
  bottom: 22%;
  left: 46%;
  width: 8px;
  height: 8px;
  background: var(--v2-lime);
  box-shadow: 0 0 16px rgba(199, 248, 1, .75);
  animation-delay: -4.1s;
}

body[data-design-version="v2"] .v2-page-loader__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(420px, calc(100% - 48px));
  padding: 8px 16px;
  text-align: center;
}

body[data-design-version="v2"] .v2-page-loader__mark {
  position: relative;
  width: 132px;
  height: 132px;
  margin: 0 0 28px;
}

body[data-design-version="v2"] .v2-page-loader__halo {
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(16, 9, 63, .2) 42%, transparent 72%);
  box-shadow:
    0 0 28px rgba(53, 221, 249, .28),
    0 0 48px rgba(232, 117, 255, .16);
  animation: v2LoaderPulse 2.2s ease-in-out infinite;
}

body[data-design-version="v2"] .v2-page-loader__ring {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    var(--v2-cyan) 0%,
    var(--v2-lime) 28%,
    transparent 42%,
    var(--v2-pink) 72%,
    var(--v2-cyan) 100%
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  animation: v2LoaderSpin 1.35s linear infinite;
  filter: drop-shadow(0 0 8px rgba(53, 221, 249, .45));
}

body[data-design-version="v2"] .v2-page-loader__logo {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid rgba(53, 221, 249, .28);
  background: #050116;
  box-shadow: 0 8px 28px rgba(2, 1, 31, .55);
}

body[data-design-version="v2"] .v2-page-loader__title {
  margin: 0 0 18px;
  color: var(--v2-text);
  font-family: Inter, sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.3;
}

body[data-design-version="v2"] .v2-page-loader__track {
  position: relative;
  width: min(280px, 100%);
  height: 6px;
  overflow: hidden;
  margin: 0 0 16px;
  border: 1px solid rgba(53, 221, 249, .28);
  border-radius: 999px;
  background: rgba(16, 9, 63, .92);
  box-shadow: inset 0 0 10px rgba(2, 1, 31, .85), 0 0 12px rgba(53, 221, 249, .12);
}

body[data-design-version="v2"] .v2-page-loader__bar,
body[data-design-version="v2"] #pageLoader.v2-page-loader #pageLoaderBar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 38%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--v2-cyan) 0%, var(--v2-lime) 52%, var(--v2-pink) 100%);
  box-shadow: 0 0 12px rgba(199, 248, 1, .55), 0 0 18px rgba(53, 221, 249, .35);
  animation: v2LoaderBar 1.35s ease-in-out infinite;
}

body[data-design-version="v2"] .v2-page-loader__hint {
  margin: 0;
  color: var(--v2-muted);
  font-family: Inter, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1.45;
}

@keyframes v2LoaderSpin {
  to { transform: rotate(360deg); }
}

@keyframes v2LoaderPulse {
  0%, 100% { opacity: .7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.04); }
}

@keyframes v2LoaderOrb {
  0%, 100% { transform: translate3d(0, 0, 0); opacity: .4; }
  50% { transform: translate3d(10px, -14px, 0); opacity: .8; }
}

@keyframes v2LoaderBar {
  0% { transform: translateX(-130%); opacity: .45; }
  50% { opacity: 1; }
  100% { transform: translateX(280%); opacity: .45; }
}

@media (max-width: 575.98px) {
  body[data-design-version="v2"] .v2-page-loader__mark {
    width: 108px;
    height: 108px;
    margin-bottom: 22px;
  }

  body[data-design-version="v2"] .v2-page-loader__title {
    font-size: 17px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-design-version="v2"] .v2-page-loader__ring,
  body[data-design-version="v2"] .v2-page-loader__halo,
  body[data-design-version="v2"] .v2-page-loader__orb,
  body[data-design-version="v2"] .v2-page-loader__bar,
  body[data-design-version="v2"] #pageLoader.v2-page-loader #pageLoaderBar {
    animation: none;
  }

  body[data-design-version="v2"] .v2-page-loader__bar,
  body[data-design-version="v2"] #pageLoader.v2-page-loader #pageLoaderBar {
    left: 18%;
    width: 64%;
    opacity: .9;
    transform: none;
  }
}

/* In-app notification center */
body[data-design-version="v2"] .v2-notifications-trigger { position: relative; }
body[data-design-version="v2"] .v2-notifications-badge {
  position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; padding: 0 4px;
  border: 1px solid #02011f; border-radius: 999px; background: var(--v2-pink);
  box-shadow: 0 0 9px rgba(232, 117, 255, .72); color: #fff; font-size: 10px; font-weight: 800;
  line-height: 14px; text-align: center;
}
body[data-design-version="v2"] .v2-notifications-panel {
  --notif-top: 74px;
  --notif-left: auto;
  --notif-right: 12px;
  --notif-width: min(390px, calc(100vw - 24px));
  --notif-caret-x: calc(100% - 28px);
  position: fixed;
  top: var(--notif-top);
  left: var(--notif-left);
  right: var(--notif-right);
  z-index: 12000;
  width: var(--notif-width);
  overflow: visible;
  border: 1px solid var(--v2-border-soft);
  border-radius: 14px;
  background: #090329;
  box-shadow: 0 20px 48px rgba(0, 0, 0, .55), 0 0 26px rgba(53, 221, 249, .10);
  color: #fff;
}
body[data-design-version="v2"] .v2-notifications-panel::before {
  content: "";
  position: absolute;
  top: -6px;
  left: var(--notif-caret-x);
  width: 12px;
  height: 12px;
  border: 1px solid var(--v2-border-soft);
  border-right: 0;
  border-bottom: 0;
  background: #090329;
  transform: translateX(-50%) rotate(45deg);
  pointer-events: none;
}
body[data-design-version="v2"] .v2-notifications-panel__header {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 12px 14px;
  border-bottom: 1px solid var(--v2-border); border-radius: 14px 14px 0 0;
  background: linear-gradient(90deg, rgba(16, 9, 63, .98), rgba(6, 3, 31, .98));
}
body[data-design-version="v2"] .v2-notifications-panel__header strong { flex: 1; font-size: 15px; }
body[data-design-version="v2"] .v2-notifications-panel__read-all,
body[data-design-version="v2"] .v2-notifications-panel__close { border: 0; background: transparent; color: var(--v2-cyan); font: inherit; cursor: pointer; }
body[data-design-version="v2"] .v2-notifications-panel__read-all { font-size: 12px; font-weight: 700; }
body[data-design-version="v2"] .v2-notifications-panel__close { width: 26px; height: 26px; padding: 0; color: var(--v2-muted); font-size: 24px; line-height: 22px; }
body[data-design-version="v2"] .v2-notifications-panel__list {
  max-height: min(520px, var(--notif-max-height, calc(100vh - 150px)));
  overflow-y: auto;
  border-radius: 0 0 14px 14px;
}
body[data-design-version="v2"] .v2-notification {
  display: flex; width: 100%; gap: 10px; border: 0; border-bottom: 1px solid rgba(22, 27, 80, .76); padding: 13px 14px;
  background: transparent; color: #fff; font: inherit; text-align: left; cursor: pointer;
}
body[data-design-version="v2"] .v2-notification:hover { background: rgba(25, 9, 63, .92); }
body[data-design-version="v2"] .v2-notification.is-unread { background: linear-gradient(90deg, rgba(53, 221, 249, .10), rgba(16, 9, 63, .1)); }
body[data-design-version="v2"] .v2-notification__icon { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid rgba(53, 221, 249, .35); border-radius: 9px; color: var(--v2-cyan); font-size: 14px; font-weight: 800; }
body[data-design-version="v2"] .v2-notification--bonus .v2-notification__icon { border-color: rgba(199, 248, 1, .45); color: var(--v2-lime); }
body[data-design-version="v2"] .v2-notification--payment .v2-notification__icon { border-color: rgba(232, 117, 255, .45); color: var(--v2-pink-text); }
body[data-design-version="v2"] .v2-notification__content { min-width: 0; display: flex; flex: 1; flex-direction: column; gap: 3px; }
body[data-design-version="v2"] .v2-notification__content strong { color: #fff; font-size: 13px; line-height: 1.25; }
body[data-design-version="v2"] .v2-notification__body { color: var(--v2-muted); font-size: 12px; line-height: 1.35; }
body[data-design-version="v2"] .v2-notification time { color: #747998; font-size: 11px; }
body[data-design-version="v2"] .v2-notifications-panel__empty { padding: 36px 18px; color: var(--v2-muted); font-size: 13px; text-align: center; }
@media (max-width: 767.98px) {
  body[data-design-version="v2"].v2-sheet-open {
    overflow: hidden;
  }
  body[data-design-version="v2"] .v2-notifications-panel:not([hidden]) {
    display: flex;
    flex-direction: column;
    top: var(--v2-app-header-bottom, 52px) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: auto !important;
    max-height: none;
    border-radius: 0;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    box-shadow: none;
  }
  body[data-design-version="v2"] .v2-notifications-panel::before { display: none; }
  body[data-design-version="v2"] .v2-notifications-panel__header {
    flex: 0 0 auto;
    min-height: 48px;
    padding: 10px 12px;
    border-radius: 0;
  }
  body[data-design-version="v2"] .v2-notifications-panel__header strong { font-size: 14px; }
  body[data-design-version="v2"] .v2-notifications-panel__list {
    flex: 1 1 auto;
    max-height: none !important;
    height: auto;
    border-radius: 0;
  }
  body[data-design-version="v2"] .v2-notification { padding: 12px; }
}

/* PWA install banner — Figma #171541 / #0052ff */
body[data-design-version="v2"] .pwa-install-banner {
  /* body is a column flexbox here, so the banner must not be squeezed
     below its content - otherwise long text spills over the header */
  flex: 0 0 auto;
  min-height: 48px;
  gap: 12px;
  padding: 10px 16px;
  border: 0;
  border-bottom: 1px solid var(--v2-border);
  background: var(--v2-panel) !important;
  box-shadow: none;
  backdrop-filter: none;
}

body[data-design-version="v2"] .pwa-install-banner__text {
  min-width: 0;
  margin: 0;
  color: #fff;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.35;
}

body[data-design-version="v2"] .pwa-install-banner__install {
  height: 32px;
  border-radius: 8px;
  padding: 6px 16px;
  background: var(--v2-lime) !important;
  box-shadow: var(--v2-glow-lime);
  color: var(--v2-ink) !important;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

body[data-design-version="v2"] .pwa-install-banner__install:hover {
  background: var(--bs-primary-active) !important;
  box-shadow: 0 2px 12px rgba(199, 248, 1, .45);
}

body[data-design-version="v2"] .pwa-install-banner__close {
  width: 32px;
  height: 32px;
  border: 1px solid var(--v2-border-soft);
  border-radius: 8px;
  background: var(--v2-panel-dark);
  color: var(--v2-muted);
}

body[data-design-version="v2"] .pwa-install-banner__close:hover {
  border-color: var(--v2-pink);
  background: var(--v2-chip-active-bg);
  box-shadow: var(--v2-glow-pink);
  color: var(--v2-pink-text);
}

/* narrow screens: keep it a single tidy row instead of wrapping into 3+ lines */
@media (max-width: 575.98px) {
  body[data-design-version="v2"] .pwa-install-banner {
    gap: 10px;
    padding: 8px 12px;
  }

  body[data-design-version="v2"] .pwa-install-banner__text {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    font-size: 12px;
  }

  body[data-design-version="v2"] .pwa-install-banner__install {
    height: 30px;
    padding: 6px 12px;
    font-size: 11px;
  }

  body[data-design-version="v2"] .pwa-install-banner__close {
    width: 30px;
    height: 30px;
  }
}


/* Kill leftover KeenThemes / Metronic palette on V2 */
body[data-design-version="v2"] .text-gray-400,
body[data-design-version="v2"] .text-gray-500,
body[data-design-version="v2"] .text-gray-600,
body[data-design-version="v2"] .text-muted,
body[data-design-version="v2"] .text-secondary {
  color: var(--v2-muted) !important;
}

body[data-design-version="v2"] .text-gray-700,
body[data-design-version="v2"] .text-gray-800,
body[data-design-version="v2"] .text-gray-900,
body[data-design-version="v2"] .text-dark,
body[data-design-version="v2"] .text-white {
  color: #fff !important;
}

body[data-design-version="v2"] .text-primary,
body[data-design-version="v2"] .link-primary {
  color: var(--v2-cyan) !important;
}

body[data-design-version="v2"] .bg-light,
body[data-design-version="v2"] .bg-body,
body[data-design-version="v2"] .bg-gray-100,
body[data-design-version="v2"] .bg-gray-200,
body[data-design-version="v2"] .hover-elevate-up {
  background-color: var(--v2-panel) !important;
}

body[data-design-version="v2"] .card {
  border-color: var(--v2-border) !important;
  background: var(--v2-panel) !important;
  color: #fff !important;
}

body[data-design-version="v2"] .separator,
body[data-design-version="v2"] .border,
body[data-design-version="v2"] .border-top,
body[data-design-version="v2"] .border-bottom {
  border-color: var(--v2-border) !important;
}

body[data-design-version="v2"] .form-control,
body[data-design-version="v2"] .form-select {
  border-color: var(--v2-border) !important;
  background: var(--v2-panel-dark) !important;
  color: #fff !important;
}

body[data-design-version="v2"] .btn-light-primary,
body[data-design-version="v2"] .btn-color-primary {
  border: 1px solid var(--v2-border-soft) !important;
  background: var(--v2-panel) !important;
  color: var(--v2-cyan) !important;
}

body[data-design-version="v2"] .btn-light:hover,
body[data-design-version="v2"] .btn-bg-light:hover,
body[data-design-version="v2"] .btn-bg-secondary:hover,
body[data-design-version="v2"] .btn-light-primary:hover,
body[data-design-version="v2"] .btn-active-color-primary:hover,
body[data-design-version="v2"] .btn-active-color-primary:focus,
body[data-design-version="v2"] .btn-active-color-primary:active,
body[data-design-version="v2"] .btn-light-primary:focus {
  border-color: var(--v2-pink) !important;
  background: var(--v2-chip-active-bg) !important;
  box-shadow: var(--v2-glow-pink) !important;
  color: var(--v2-pink-text) !important;
}

body[data-design-version="v2"] .btn-light:hover i,
body[data-design-version="v2"] .btn-bg-light:hover i,
body[data-design-version="v2"] .btn-light-primary:hover i,
body[data-design-version="v2"] .btn-active-color-primary:hover i,
body[data-design-version="v2"] .btn-active-color-primary:hover .svg-icon {
  color: var(--v2-pink-text) !important;
}

body[data-design-version="v2"] .loading-overlay .spinner {
  border-color: var(--v2-border);
  border-top-color: var(--v2-lime);
}

body[data-design-version="v2"] .support-chat-fab {
  width: 48px;
  height: 48px;
  border: 1px solid #e9ff91;
  border-radius: 12px;
  background: var(--v2-lime);
  box-shadow: var(--v2-glow-lime);
  color: var(--v2-ink);
  font-size: 18px;
}

body[data-design-version="v2"] .support-chat-fab:hover {
  border-color: #f9ffe2;
  background: var(--v2-lime);
  box-shadow: 0 2px 12px rgba(199, 248, 1, .5);
  color: var(--v2-ink);
  transform: none;
}

body[data-design-version="v2"] .support-chat-fab__badge {
  top: -5px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  border: 1px solid #ff8a4a;
  background: #ff6b1a !important;
  color: #fff !important;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
}

body[data-design-version="v2"] .pwa-push-prompt {
  border-color: var(--v2-border);
  background: var(--v2-panel);
  color: #fff;
}

/* Header */
body[data-design-version="v2"] .landing-header {
  position: sticky !important;
  top: 0;
  z-index: 1040;
  min-height: 90px;
  border-bottom: 1px solid var(--v2-border);
  background: linear-gradient(0deg, #0b0837 0%, rgba(11, 8, 55, 0) 100%), #0d0f1e;
  box-shadow: 0 4px 6px rgba(0, 0, 0, .33);
  backdrop-filter: none;
}

body[data-design-version="v2"] .landing-header .app-container {
  max-width: none !important;
  padding: 0 48px !important;
}

body[data-design-version="v2"] .v2-header-row {
  min-height: 90px;
  gap: 24px;
}

body[data-design-version="v2"] .landing-header .logo-default {
  width: 210px;
  max-height: 84px;
  object-fit: contain;
  filter: drop-shadow(0 2px 10px rgba(232, 117, 255, .22));
}

body[data-design-version="v2"] .landing-header .logo-sticky,
body[data-design-version="v2"] #kt_landing_menu_toggle {
  display: none !important;
}

/* the sticky header swaps to .logo-sticky, which v2 hides, so keep the main one */
body[data-design-version="v2"][data-kt-sticky-landing-header="on"] .landing-header .logo-default {
  display: block !important;
}

body[data-design-version="v2"] #kt_header_nav_wrapper {
  display: block !important;
  flex: 1 1 auto;
}

body[data-design-version="v2"] #kt_landing_menu {
  display: flex !important;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

body[data-design-version="v2"] #kt_landing_menu .menu-item {
  margin: 0;
}

body[data-design-version="v2"] #kt_landing_menu .menu-link {
  display: inline-flex !important;
  min-height: 42px;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--v2-border-blue) !important;
  border-radius: 8px;
  padding: 9px 12px !important;
  background: var(--v2-panel) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .25);
  color: var(--v2-cyan) !important;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
}

body[data-design-version="v2"] #kt_landing_menu .menu-link .menu-title,
body[data-design-version="v2"] #kt_landing_menu .menu-link .menu-icon,
body[data-design-version="v2"] #kt_landing_menu .menu-link .menu-icon i {
  color: inherit !important;
}

/* the legacy icon slot is 2rem wide with its own margin, which stacks on top of
   the flex gap and pushes the label away from the glyph */
body[data-design-version="v2"] #kt_landing_menu .menu-link .menu-icon {
  flex: 0 0 20px;
  width: 20px;
  min-width: 20px;
  margin-right: 0 !important;
  padding: 0;
}

body[data-design-version="v2"] #kt_landing_menu .menu-link .menu-icon i {
  font-size: 20px;
  line-height: 1;
}

body[data-design-version="v2"] #kt_landing_menu .menu-item:first-child .menu-link,
body[data-design-version="v2"] #kt_landing_menu .menu-link.active,
body[data-design-version="v2"] #kt_landing_menu .menu-link:hover {
  border-color: var(--v2-pink) !important;
  background: var(--v2-chip-active-bg) !important;
  box-shadow: var(--v2-glow-pink);
  color: var(--v2-pink-text) !important;
}

body[data-design-version="v2"] .v2-legacy-header-actions {
  display: none !important;
}

body[data-design-version="v2"] .v2-header-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

body[data-design-version="v2"] .v2-btn {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  padding: 12px 20px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}

body[data-design-version="v2"] .v2-btn--lime {
  border: 1px solid #e9ff91;
  background: var(--v2-lime);
  box-shadow: var(--v2-glow-lime);
  color: var(--v2-ink);
}

body[data-design-version="v2"] .v2-btn--ghost {
  border: 1px solid var(--v2-border-blue);
  background: var(--v2-panel);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .25);
  color: var(--v2-cyan);
}

body[data-design-version="v2"] .v2-btn--ghost:hover,
body[data-design-version="v2"] .v2-icon-btn:hover {
  border-color: var(--v2-pink);
  background: var(--v2-chip-active-bg);
  box-shadow: var(--v2-glow-pink);
  color: var(--v2-pink-text);
}

body[data-design-version="v2"] .v2-icon-btn {
  display: inline-flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--v2-border-blue);
  border-radius: 8px;
  background: var(--v2-panel);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
  cursor: pointer;
}

body[data-design-version="v2"] .v2-icon-btn img {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
}

body[data-design-version="v2"] .v2-deposit-group {
  display: flex;
  height: 42px;
  align-items: center;
}

body[data-design-version="v2"] .v2-balance-pill {
  display: flex;
  width: 145px;
  height: 42px;
  align-items: center;
  gap: 12px;
  margin-right: -10px;
  border: 1px solid #1f2244;
  border-radius: 8px;
  padding: 6px 6px 6px 8px;
  background: var(--v2-panel-dark);
  color: var(--v2-cyan);
  font-size: 16px;
  font-weight: 500;
}

body[data-design-version="v2"] .v2-btn--deposit {
  position: relative;
  z-index: 1;
  min-width: 102px;
}

body[data-design-version="v2"] .v2-btn--deposit-plus {
  display: none;
}

body[data-design-version="v2"] .v2-avatar {
  display: inline-flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  align-self: center;
  overflow: hidden;
  border: 0;
  border-radius: 70px;
  padding: 0;
  background: #09051f;
  cursor: pointer;
  flex-shrink: 0;
}

body[data-design-version="v2"] .v2-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Buttons globally — Figma primary is lime, blue is reserved for telegram/support/install */
body[data-design-version="v2"] .btn-primary {
  border: 1px solid #e9ff91 !important;
  border-radius: 8px !important;
  background: var(--v2-lime) !important;
  box-shadow: var(--v2-glow-lime) !important;
  color: var(--v2-ink) !important;
}

body[data-design-version="v2"] .btn-primary:hover,
body[data-design-version="v2"] .btn-primary:focus,
body[data-design-version="v2"] .btn-primary:active {
  border-color: #f9ffe2 !important;
  background: var(--v2-lime) !important;
  box-shadow: 0 2px 12px rgba(199, 248, 1, .5) !important;
  color: var(--v2-ink) !important;
}

body[data-design-version="v2"] .btn-primary i,
body[data-design-version="v2"] .btn-primary .svg-icon {
  color: var(--v2-ink) !important;
}

body[data-design-version="v2"] [data-toggle-group] .btn {
  border: 1px solid var(--v2-border-blue) !important;
  background: var(--v2-panel) !important;
  box-shadow: none !important;
  color: var(--v2-cyan) !important;
}

body[data-design-version="v2"] [data-toggle-group] .btn.active,
body[data-design-version="v2"] [data-toggle-group] .btn.btn-primary {
  border-color: var(--v2-pink) !important;
  background: var(--v2-chip-active-bg) !important;
  box-shadow: var(--v2-glow-pink) !important;
  color: var(--v2-pink-text) !important;
}

body[data-design-version="v2"] .btn-light,
body[data-design-version="v2"] .btn-bg-light,
body[data-design-version="v2"] .btn-bg-secondary {
  border: 1px solid var(--v2-border-soft) !important;
  background: var(--v2-panel) !important;
  color: var(--v2-cyan) !important;
}

/* Hero + promo cards — Figma 228:749 / 228:254 */
body[data-design-version="v2"] #kt_app_hero {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 40px 48px 0;
}

body[data-design-version="v2"] .v2-hero {
  position: relative;
  display: flex;
  height: 440px;
  min-height: 440px;
  overflow: hidden;
  border: 1px solid var(--v2-border);
  border-radius: 12px;
  background: #010005;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .33);
  cursor: pointer;
}

/* Art layer — Figma node 228:752 sits at 282/-71 and is 1558x575 inside the
   1824x440 banner, so the illustration is never stretched to the full card. */
body[data-design-version="v2"] .v2-hero:before {
  content: '';
  position: absolute;
  z-index: 0;
  top: -16.14%;
  left: 15.46%;
  width: 85.42%;
  height: 130.68%;
  /* Sized off the banner height only, so the art keeps the same scale while
     the banner width is fluid instead of blowing up like `cover` does. */
  background: url('/public/img/design-v2/hero-figma-wide.jpg') center bottom / auto 100% no-repeat;
}

/* Scrim over the art — Figma nodes 228:753 (left) and 228:755 (bottom). */
body[data-design-version="v2"] .v2-hero:after {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(90deg, #040128 0%, rgba(4, 1, 40, .92) 24%, rgba(4, 1, 40, .45) 40%, rgba(4, 1, 40, 0) 54%),
    linear-gradient(180deg, rgba(4, 1, 40, 0) 48%, rgba(4, 1, 40, .5) 100%);
  pointer-events: none;
}

body[data-design-version="v2"] .v2-hero:hover {
  box-shadow: 0 0 24px rgba(1, 237, 188, .18), 0 4px 12px rgba(0, 0, 0, .33);
}

body[data-design-version="v2"] .v2-hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  width: min(760px, 55%);
  min-height: 360px;
  flex-direction: column;
  justify-content: center;
  gap: 32px;
  padding: 40px;
}

body[data-design-version="v2"] .v2-hero__title {
  color: var(--v2-mint);
  font-size: clamp(32px, 2.9vw, 48px);
  font-style: italic;
  font-weight: 800;
  line-height: 1.05;
  text-transform: uppercase;
  text-shadow: 0 0 12px #00d1a9;
}

body[data-design-version="v2"] .v2-hero__desc {
  margin-top: 12px;
  max-width: 620px;
  color: #fff;
  font-size: 24px;
  font-style: italic;
  font-weight: 500;
  line-height: 1.25;
}

body[data-design-version="v2"] .v2-hero .mtr-banner__actions {
  flex-wrap: nowrap;
}

body[data-design-version="v2"] .mtr-banner__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
}

body[data-design-version="v2"] .v2-hero-cta {
  display: inline-flex;
  width: 240px;
  min-height: 55px;
  align-items: center;
  justify-content: center;
  border: 1px solid #f9ffe2;
  border-radius: 8px;
  background: var(--v2-lime);
  box-shadow: 0 0 12px rgba(199, 248, 1, .4);
  color: var(--v2-ink);
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
}

body[data-design-version="v2"] .v2-hero-more {
  display: inline-flex;
  width: 188px;
  min-height: 55px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--v2-pink);
  border-radius: 8px;
  background: var(--v2-chip-active-bg);
  box-shadow: var(--v2-glow-pink);
  color: #fff;
  font-size: 20px;
  text-transform: uppercase;
  cursor: pointer;
}

body[data-design-version="v2"] .v2-hero-more img {
  width: 16px;
  height: 16px;
  transform: rotate(-90deg);
}

body[data-design-version="v2"] .v2-bender-says {
  position: absolute;
  z-index: 3;
  top: 40px;
  right: 40px;
  width: 292px;
  height: 160px;
  overflow: hidden;
  border: 1px solid #b331df;
  border-radius: 16px;
  padding: 16px;
  background: linear-gradient(90deg, rgba(179, 49, 223, .75), rgba(81, 28, 196, .75));
  box-shadow: 0 6px 10px rgba(81, 28, 196, .2), inset 0 4px 2px rgba(255, 255, 255, .2);
  backdrop-filter: blur(3px);
  pointer-events: none;
}

body[data-design-version="v2"] .v2-bender-says__kicker {
  margin: 0;
  color: #c65ef2;
  font-size: 20px;
  font-style: italic;
  font-weight: 600;
  text-transform: uppercase;
}

body[data-design-version="v2"] .v2-bender-says__text {
  margin: 4px 0 0;
  color: #fff;
  font-size: 28px;
  font-style: italic;
  font-weight: 800;
  line-height: 1.05;
  text-transform: uppercase;
}

body[data-design-version="v2"] .v2-bender-says__art {
  position: absolute;
  right: 8px;
  bottom: -8px;
  width: 106px;
  height: 180px;
  object-fit: contain;
  pointer-events: none;
}

body[data-design-version="v2"] .v2-promo-carousel {
  --v2-promo-card-h: 154px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 36px;
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-items: center;
  max-width: none;
  padding: 0 !important;
}

body[data-design-version="v2"] .v2-promo-carousel .mtr-track {
  grid-column: 2;
  grid-row: 1;
  gap: 12px !important;
  padding-top: 6px;
  padding-bottom: 6px;
}

body[data-design-version="v2"] .v2-promo-carousel.is-disabled .mtr-track {
  justify-content: flex-start !important;
}

body[data-design-version="v2"] .v2-promo-carousel .mtr-prev,
body[data-design-version="v2"] .v2-promo-carousel .mtr-next,
body[data-design-version="v2"] .v2-promo-carousel.is-disabled .mtr-prev,
body[data-design-version="v2"] .v2-promo-carousel.is-disabled .mtr-next {
  position: relative !important;
  top: auto !important;
  bottom: auto !important;
  display: flex !important;
  grid-row: 1;
  align-self: center;
  width: 36px !important;
  min-width: 36px;
  height: 36px !important;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  border: 1px solid var(--v2-border-soft) !important;
  border-radius: 8px !important;
  background: var(--v2-panel) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .25) !important;
  color: #fff !important;
  transform: none !important;
  backdrop-filter: none;
}

body[data-design-version="v2"] .v2-promo-carousel .mtr-prev { grid-column: 1; left: auto !important; right: auto !important; }
body[data-design-version="v2"] .v2-promo-carousel .mtr-next { grid-column: 3; left: auto !important; right: auto !important; }

body[data-design-version="v2"] .v2-promo-carousel .v2-promo-chevron {
  display: block;
  width: 14px;
  height: 14px;
  background: #fff;
  -webkit-mask: url('/public/img/design-v2/ui/chevron-right.svg') center / contain no-repeat;
  mask: url('/public/img/design-v2/ui/chevron-right.svg') center / contain no-repeat;
}

body[data-design-version="v2"] .v2-promo-carousel .mtr-prev .v2-promo-chevron {
  transform: rotate(180deg);
}

body[data-design-version="v2"] .v2-promo-carousel .mtr-prev:hover,
body[data-design-version="v2"] .v2-promo-carousel .mtr-next:hover {
  border-color: var(--v2-border-blue) !important;
  background: var(--v2-panel) !important;
  box-shadow: 0 2px 8px rgba(51, 96, 255, .35) !important;
  color: #fff !important;
}

body[data-design-version="v2"] .v2-promo-carousel .mtr-dots {
  grid-column: 1 / -1;
  grid-row: 2;
  align-self: start;
  gap: 8px;
  margin: 16px 0 24px;
}

body[data-design-version="v2"] .v2-promo-carousel .mtr-dot {
  width: 10px;
  height: 10px;
  background: #1d2456;
}

body[data-design-version="v2"] .v2-promo-carousel .mtr-dot:hover {
  background: #2a3480;
}

body[data-design-version="v2"] .v2-promo-carousel .mtr-dot.is-active {
  background: var(--v2-lime);
  box-shadow: 0 0 8px rgba(199, 248, 1, .45);
}

body[data-design-version="v2"] .v2-promo-card {
  height: var(--v2-promo-card-h, 154px);
  min-height: var(--v2-promo-card-h, 154px);
  padding: 0;
  overflow: hidden;
  border-radius: 12px;
  background: #0b0932;
  cursor: pointer;
  transition: transform .2s ease;
}

body[data-design-version="v2"] .v2-promo-card:before {
  display: none;
}

body[data-design-version="v2"] .v2-promo-card.mtr-banner--with-image:after {
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(2, 1, 31, .45) 0%, rgba(2, 1, 31, .82) 58%, rgba(2, 1, 31, .95) 100%),
    linear-gradient(90deg, rgba(2, 1, 31, .88) 0%, rgba(2, 1, 31, .5) 55%, rgba(2, 1, 31, .3) 100%);
}

body[data-design-version="v2"] .v2-promo-card .mtr-banner__bg-image {
  inset: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  opacity: 1;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

body[data-design-version="v2"] .v2-promo-card .mtr-banner__content {
  position: relative;
  z-index: 3;
  display: flex;
  width: 100%;
  min-height: var(--v2-promo-card-h, 154px);
  flex-direction: column;
  justify-content: space-between;
  padding: 14px 16px;
}

body[data-design-version="v2"] .v2-promo-card .mtr-banner__title {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 20px;
  font-style: italic;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: .02em;
  text-transform: uppercase;
}

body[data-design-version="v2"] .v2-promo-card .mtr-banner__desc {
  display: -webkit-box;
  overflow: hidden;
  margin-top: 6px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--v2-mint) !important;
  font-size: 12px;
  font-style: italic;
  font-weight: 500;
  line-height: 1.3;
  opacity: 1;
  text-shadow: 0 1px 6px rgba(2, 1, 31, .9);
}

body[data-design-version="v2"] .v2-promo-cta {
  display: inline-flex;
  width: 96px;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: #fff;
  font-size: 13px;
  font-style: italic;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  pointer-events: none;
}

body[data-design-version="v2"] .v2-promo-card--magenta {
  border: 1px solid #7b237d;
  box-shadow: 0 4px 20px rgba(251, 26, 255, .15);
}
body[data-design-version="v2"] .v2-promo-card--magenta .mtr-banner__title {
  color: var(--v2-magenta);
  text-shadow: 0 0 16px rgba(251, 26, 255, .6);
}
body[data-design-version="v2"] .v2-promo-card--magenta .v2-promo-cta {
  border: 1px solid #ffa9fc;
  background: var(--v2-magenta);
  box-shadow: 0 0 6px rgba(198, 94, 242, .66);
}

body[data-design-version="v2"] .v2-promo-card--gold {
  border: 1px solid #7d5a23;
  box-shadow: 0 4px 20px rgba(255, 202, 26, .18);
}
body[data-design-version="v2"] .v2-promo-card--gold .mtr-banner__title {
  color: #ffa71a;
  text-shadow: 0 0 16px rgba(255, 121, 26, .6);
}
body[data-design-version="v2"] .v2-promo-card--gold .v2-promo-cta {
  border: 1px solid #ffebb4;
  background: #faa316;
  box-shadow: 0 0 6px rgba(242, 220, 94, .66);
  color: var(--v2-ink);
}

body[data-design-version="v2"] .v2-promo-card--cyan {
  border: 1px solid #3589a1;
  box-shadow: 0 4px 20px rgba(103, 255, 255, .2);
}
body[data-design-version="v2"] .v2-promo-card--cyan .mtr-banner__title {
  color: #1acdff;
  text-shadow: 0 0 16px rgba(26, 160, 255, .6);
}
body[data-design-version="v2"] .v2-promo-card--cyan .v2-promo-cta {
  border: 1px solid #aaedff;
  background: #14c7f9;
  box-shadow: 0 0 6px #35ddf9;
  color: var(--v2-ink);
}

body[data-design-version="v2"] .v2-promo-card--rose {
  border: 1px solid #963c5d;
  box-shadow: 0 4px 20px rgba(255, 85, 122, .2);
}
body[data-design-version="v2"] .v2-promo-card--rose .mtr-banner__title {
  color: #f80181;
  text-shadow: 0 0 16px rgba(255, 26, 110, .6);
}
body[data-design-version="v2"] .v2-promo-card--rose .v2-promo-cta {
  border: 1px solid #ff80c1;
  background: #f80181;
  box-shadow: 0 0 6px rgba(242, 94, 141, .66);
}

body[data-design-version="v2"] .v2-promo-card:hover {
  transform: translateY(-2px);
}

body[data-design-version="v2"] .v2-hero-cta,
body[data-design-version="v2"] .v2-hero-more,
body[data-design-version="v2"] .v2-promo-cta {
  pointer-events: none;
}

/* Main / filters */
body[data-design-version="v2"] #kt_app_main {
  padding: 0 48px 48px;
}

body[data-design-version="v2"] #kt_app_main:not(:has(#gamesWrap)) {
  padding-top: 16px;
}

body[data-design-version="v2"] #kt_app_content,
body[data-design-version="v2"] #kt_app_content_container {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

@media (min-width: 992px) {
  body[data-design-version="v2"] .v2-search-filter-bar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px !important;
    height: auto;
    min-height: 42px;
    margin: 16px 0 32px !important;
  padding: 0;
    background: transparent;
    box-shadow: none;
  }

  body[data-design-version="v2"] .v2-search-filter-bar__actions {
    order: 2;
    gap: 12px !important;
    margin: 0 !important;
  }

  body[data-design-version="v2"] .v2-category-tabs {
    order: 1;
    flex: 1 1 auto;
    padding: 0 !important;
  }

  body[data-design-version="v2"] .v2-search-filter-bar__actions .rhRNRwJY {
    width: 320px !important;
    min-width: 320px;
  }
}

/* The base icon button clips its content. A notification counter must sit
   outside the bell's frame, otherwise two-digit counters become unreadable. */
body[data-design-version="v2"] .v2-icon-btn.v2-notifications-trigger {
  position: relative;
  overflow: visible;
}

body[data-design-version="v2"] .v2-icon-btn.v2-notifications-trigger .v2-notifications-badge {
  top: -7px;
  right: -7px;
  z-index: 2;
  display: inline-flex;
  min-width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 1px solid #e9ff91;
  background: var(--v2-lime);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .38);
  color: #5d7100;
  font-size: 11px;
  font-weight: 900;
  text-shadow: none;
  line-height: 1;
  pointer-events: none;
}

body[data-design-version="v2"] .v2-search-filter-bar__actions .btn,
body[data-design-version="v2"] .v2-category-tabs .mtr-cat-btn {
  height: 42px !important;
  min-height: 42px !important;
  padding: 9px 12px !important;
  border: 1px solid var(--v2-border-blue) !important;
  border-radius: 8px !important;
  background: var(--v2-panel) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .25) !important;
  color: var(--v2-cyan) !important;
  font-size: 16px;
  font-weight: 500;
}

/* `.btn.mtr-cat-btn` keeps this above the global `.btn-primary i` ink rule —
   the active tab carries `btn-primary` and its icon would go black. */
body[data-design-version="v2"] .v2-search-filter-bar__actions .btn i,
body[data-design-version="v2"] .v2-search-filter-bar__actions .btn .svg-icon,
body[data-design-version="v2"] .v2-category-tabs .btn.mtr-cat-btn i,
body[data-design-version="v2"] .v2-category-tabs .btn.mtr-cat-btn .svg-icon,
body[data-design-version="v2"] .footer-providers .provider-pill i,
body[data-design-version="v2"] #gamesGrid [data-v2-section-title] i {
  color: inherit !important;
}

body[data-design-version="v2"] .v2-search-filter-bar__actions .rhRNRwJY {
  justify-content: flex-start;
  border-color: var(--v2-border-soft) !important;
  background: var(--v2-panel-dark) !important;
  color: var(--v2-search) !important;
}

body[data-design-version="v2"] .v2-category-tabs .mtr-cat-btn.active,
body[data-design-version="v2"] .v2-category-tabs .mtr-cat-btn:hover {
  border-color: var(--v2-pink) !important;
  background: var(--v2-chip-active-bg) !important;
  color: var(--v2-pink-text) !important;
  box-shadow: var(--v2-glow-pink) !important;
}

body[data-design-version="v2"] .v2-category-tabs .mtr-list__btn {
  display: none !important;
}

body[data-design-version="v2"] .v2-search-filter-bar__actions #btnProviders {
  /* never shrink, otherwise long labels eat the right padding */
  flex: 0 0 auto;
  min-width: 140px;
}

body[data-design-version="v2"] .v2-search-filter-bar__actions #btnProviders:hover,
body[data-design-version="v2"] .v2-search-filter-bar__actions #btnProviders:focus-visible {
  border-color: var(--v2-pink) !important;
  background: var(--v2-chip-active-bg) !important;
  color: var(--v2-pink-text) !important;
  box-shadow: var(--v2-glow-pink) !important;
}

body[data-design-version="v2"] .v2-category-tabs {
  padding: 0 !important;
}

body[data-design-version="v2"] .v2-category-tabs .mtr-list__track {
  display: flex !important;
  flex-wrap: wrap;
  width: 100% !important;
  overflow: visible !important;
  transform: none !important;
  gap: 12px;
}

body[data-design-version="v2"] .v2-category-tabs .mtr-list__item {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
}

body[data-design-version="v2"] .v2-category-tabs .mtr-cat-text {
  max-width: none;
}

/* Games */
body[data-design-version="v2"] #gamesGrid {
  --bs-gutter-x: 0;
  --bs-gutter-y: 0;
  display: grid !important;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 16px;
  margin: 0 !important;
  width: 100%;
}

body[data-design-version="v2"] #gamesGrid > [data-v2-section-title],
body[data-design-version="v2"] #gamesGrid > .v2-game-section-grid,
body[data-design-version="v2"] #gamesGrid > .row,
body[data-design-version="v2"] #gamesGrid > .col-12,
body[data-design-version="v2"] #gamesGrid > .d-flex,
body[data-design-version="v2"] #gamesGrid > .games-empty-state,
body[data-design-version="v2"] #gamesGrid > [data-kt-search-element="empty"],
body[data-design-version="v2"] #gamesGrid .games-empty-state {
  grid-column: 1 / -1;
  width: 100%;
  max-width: none;
}

body[data-design-version="v2"] .games-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 280px;
  margin: 4px 0 8px;
  padding: 40px 24px;
  border: 1px solid var(--v2-border);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(16, 9, 63, .78) 0%, rgba(5, 1, 22, .58) 100%);
  text-align: center;
}

body[data-design-version="v2"] .games-empty-state__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin: 0 0 18px;
  padding: 0;
  border: 1px solid rgba(199, 248, 1, .38);
  border-radius: 16px;
  background: rgba(199, 248, 1, .08);
  box-shadow: inset 0 0 16px rgba(199, 248, 1, .12);
}

body[data-design-version="v2"] .games-empty-state__icon i,
body[data-design-version="v2"] .games-empty-state__icon i:before {
  margin: 0;
  font-size: 28px !important;
  line-height: 1 !important;
  opacity: 1 !important;
  color: var(--v2-lime);
}

body[data-design-version="v2"] .games-empty-state__copy {
  max-width: 420px;
  padding: 0;
}

body[data-design-version="v2"] .games-empty-state__title,
body[data-design-version="v2"] .games-empty-state h3 {
  margin-bottom: 8px !important;
  color: #fff !important;
  font-size: 20px !important;
  font-weight: 700;
  line-height: 1.3;
}

body[data-design-version="v2"] .games-empty-state__text,
body[data-design-version="v2"] .games-empty-state .text-muted {
  color: var(--v2-muted) !important;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
}

body[data-design-version="v2"] #gamesGrid > .d-flex[data-v2-section-title] {
  min-height: 32px;
  margin-top: 16px !important;
  margin-bottom: 4px !important;
}

body[data-design-version="v2"] #gamesGrid > .d-flex[data-v2-section-title]:first-child {
  margin-top: 0 !important;
}

body[data-design-version="v2"] #gamesGrid > .d-flex[data-v2-section-title] .fw-bold.fs-3 {
  color: #fff !important;
  font-size: 24px !important;
  font-weight: 700;
}

body[data-design-version="v2"] #gamesGrid > .d-flex[data-v2-section-title] .btn-primary,
body[data-design-version="v2"] #gamesMore,
body[data-design-version="v2"] .mtr-game-play-btn {
  min-height: 32px;
  border: 1px solid #e9ff91 !important;
  border-radius: 6px !important;
  background: var(--v2-lime) !important;
  box-shadow: 0 2px 4px rgba(199, 248, 1, .33) !important;
  color: var(--v2-ink) !important;
  font-size: 13px;
  font-weight: 600;
}

body[data-design-version="v2"] #gamesGrid > .v2-game-section-grid,
body[data-design-version="v2"] #gamesGrid > .row:not(#gamesSkelInner) {
  --bs-gutter-x: 0;
  --bs-gutter-y: 0;
  display: grid !important;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 16px;
  margin: 0 !important;
}

body[data-design-version="v2"] #gamesGrid .mtr-game-grid-col {
  width: auto !important;
  max-width: none !important;
  min-width: 0;
  padding: 0 !important;
  flex: none !important;
}

body[data-design-version="v2"] .mtr-game-card {
  overflow: hidden;
  border: 1px solid var(--v2-border) !important;
  border-radius: 12px !important;
  aspect-ratio: 168 / 114;
  height: auto !important;
  background: #161935 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .33) !important;
}

/* Mosaic rows — Figma slots-section 228:381.
   A row is 5 cells two columns wide; a cell holds one enlarged game or a 2x2 pack. */
body[data-design-version="v2"] .v2-mosaic-row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}

body[data-design-version="v2"] .v2-mosaic-slot {
  display: grid;
  min-width: 0;
  aspect-ratio: 352 / 244;
}

body[data-design-version="v2"] .v2-mosaic-slot--pack {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

body[data-design-version="v2"] .v2-mosaic-slot .mtr-game-card {
  aspect-ratio: auto !important;
  height: 100% !important;
  min-height: 0;
}

body[data-design-version="v2"] .mtr-game-card--big .mtr-game-overlay-title {
  font-size: 18px;
  margin-bottom: 16px !important;
}

body[data-design-version="v2"] .mtr-game-card img {
  width: 100%;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center;
}

body[data-design-version="v2"] .mtr-game-card:hover {
  border-color: #7f2da0 !important;
  box-shadow: 0 0 16px rgba(198, 94, 242, .33) !important;
}

body[data-design-version="v2"] .mtr-game-overlay {
  background: rgba(2, 1, 23, .76);
}

/* Lobby / games skeleton overlay */
body[data-design-version="v2"] #gamesSkel {
  background: rgba(2, 1, 31, .62) !important;
  backdrop-filter: blur(4px);
}

body[data-design-version="v2"] #gamesSkelInner {
  --bs-gutter-x: 0;
  --bs-gutter-y: 0;
  display: grid !important;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 16px;
  margin: 0 !important;
  width: 100%;
}

body[data-design-version="v2"] #gamesSkelInner .v2-skel-heading,
body[data-design-version="v2"] #gamesSkelInner .v2-skel-heading-wrap {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 32px;
  margin: 4px 0;
}

body[data-design-version="v2"] #gamesSkelInner .v2-skel-heading-wrap:first-child {
  margin-top: 0;
}

body[data-design-version="v2"] #gamesSkelInner .v2-skel-line {
  display: block;
  height: 22px;
  border-radius: 6px;
  background: linear-gradient(
    90deg,
    rgba(22, 27, 80, .95) 0%,
    rgba(53, 221, 249, .16) 42%,
    rgba(199, 248, 1, .14) 58%,
    rgba(22, 27, 80, .95) 100%
  );
  background-size: 180% 100%;
  animation: v2SkelShine 1.5s ease-in-out infinite;
}

body[data-design-version="v2"] #gamesSkelInner .v2-skel-line--title {
  width: min(220px, 46%);
  height: 24px;
}

body[data-design-version="v2"] #gamesSkelInner .v2-skel-line--btn {
  width: 92px;
  height: 32px;
  border-radius: 6px;
  background: linear-gradient(
    90deg,
    rgba(199, 248, 1, .18) 0%,
    rgba(199, 248, 1, .38) 50%,
    rgba(199, 248, 1, .18) 100%
  );
  background-size: 180% 100%;
}

body[data-design-version="v2"] #gamesSkelInner .v2-skel-col {
  min-width: 0;
}

body[data-design-version="v2"] #gamesSkelInner .v2-skel-card {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 168 / 114;
  border: 1px solid var(--v2-border);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(16, 9, 63, .55) 0%, rgba(22, 25, 53, .95) 100%),
    #161935;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .33);
}

body[data-design-version="v2"] #gamesSkelInner .v2-skel-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 18%,
    rgba(53, 221, 249, .10) 38%,
    rgba(199, 248, 1, .12) 50%,
    rgba(232, 117, 255, .10) 62%,
    transparent 82%
  );
  transform: translateX(-70%);
  animation: v2SkelSweep 1.6s ease-in-out infinite;
}

@keyframes v2SkelShine {
  0% { background-position: 100% 0; }
  100% { background-position: -80% 0; }
}

@keyframes v2SkelSweep {
  0% { transform: translateX(-80%); }
  100% { transform: translateX(80%); }
}

@media (prefers-reduced-motion: reduce) {
  body[data-design-version="v2"] #gamesSkelInner .v2-skel-line,
  body[data-design-version="v2"] #gamesSkelInner .v2-skel-card::after {
    animation: none;
  }
}

body[data-design-version="v2"] #gamesGrid > .d-flex[data-v2-section-title] .btn-primary:hover,
body[data-design-version="v2"] #gamesMore:hover,
body[data-design-version="v2"] .mtr-game-play-btn:hover,
body[data-design-version="v2"] .v2-btn--lime:hover,
body[data-design-version="v2"] .footer-providers .v2-providers-all:hover,
body[data-design-version="v2"] .footer-providers .v2-providers-all:focus {
  border-color: #e9ff91 !important;
  background: var(--v2-lime) !important;
  box-shadow: 0 2px 8px rgba(199, 248, 1, .45) !important;
  color: var(--v2-ink) !important;
}

body[data-design-version="v2"] .mtr-game-overlay {
  background: rgba(2, 1, 23, .76);
}

/* Providers */
body[data-design-version="v2"] .footer-providers {
  margin-top: 48px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body[data-design-version="v2"] .footer-providers .providers-wrap {
  padding: 0;
  border: 0;
  background: transparent;
}

body[data-design-version="v2"] .footer-providers .text-white.fw-bolder {
  color: #fff !important;
  font-size: 24px !important;
  font-weight: 700;
}

body[data-design-version="v2"] .footer-providers .v2-providers-all,
body[data-design-version="v2"] .footer-providers .btn-primary,
body[data-design-version="v2"] .footer-providers .btn-bg-light {
  min-height: 32px !important;
  border: 1px solid #e9ff91 !important;
  border-radius: 6px !important;
  background: var(--v2-lime) !important;
  box-shadow: 0 2px 4px rgba(199, 248, 1, .33) !important;
  color: var(--v2-ink) !important;
  font-size: 13px !important;
  font-weight: 600;
}

/* "All games" chips — one shared shape for section headers and providers */
body[data-design-version="v2"] #gamesGrid > .d-flex[data-v2-section-title] .btn-primary,
body[data-design-version="v2"] .footer-providers .v2-providers-all {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 13px !important;
  gap: 8px;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1;
}

body[data-design-version="v2"] #gamesGrid > .d-flex[data-v2-section-title] .btn-primary i,
body[data-design-version="v2"] #gamesGrid > .d-flex[data-v2-section-title] .btn-primary .svg-icon,
body[data-design-version="v2"] .footer-providers .v2-providers-all i,
body[data-design-version="v2"] .footer-providers .v2-providers-all .svg-icon {
  margin: 0 !important;
  padding: 0 !important;
  color: var(--v2-ink) !important;
  font-size: 14px !important;
}

body[data-design-version="v2"] .footer-providers .mtr-list {
  position: relative;
  padding: 0 24px;
}

body[data-design-version="v2"] .footer-providers .mtr-list__track {
  gap: 12px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  justify-content: flex-start !important;
  scrollbar-width: none;
}

body[data-design-version="v2"] .footer-providers .mtr-list__track::-webkit-scrollbar {
  display: none;
}

body[data-design-version="v2"] .footer-providers .mtr-list.is-disabled .mtr-list__track {
  justify-content: flex-start !important;
  overflow-x: auto !important;
}

body[data-design-version="v2"] .footer-providers .mtr-list__item {
  flex: 0 0 137px !important;
  width: 137px !important;
  max-width: 137px !important;
  min-width: 137px !important;
}

body[data-design-version="v2"] .footer-providers .provider-pill {
  width: 137px !important;
  height: 85px !important;
  min-height: 85px !important;
  border: 1px solid var(--v2-border-soft) !important;
  border-radius: 8px !important;
  background: var(--v2-panel) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .25);
  color: var(--v2-cyan) !important;
  gap: 8px;
  padding: 12px 8px 8px !important;
}

body[data-design-version="v2"] .footer-providers .provider-pill:hover,
body[data-design-version="v2"] .footer-providers .provider-pill.active {
  border-color: #7f2da0 !important;
  background: var(--v2-chip-active-bg) !important;
  box-shadow: 0 0 16px rgba(198, 94, 242, .33), inset 0 0 8px rgba(198, 94, 242, .33) !important;
  color: var(--v2-pink-text) !important;
}

body[data-design-version="v2"] .footer-providers .provider-pill__logo-wrap {
  width: 28px !important;
  height: 28px !important;
}

body[data-design-version="v2"] .footer-providers .provider-pill__logo-wrap img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

body[data-design-version="v2"] .footer-providers .provider-pill__name {
  max-width: 105px;
  color: inherit;
    font-size: 14px;
  font-weight: 500;
}

body[data-design-version="v2"] .footer-providers .mtr-list .mtr-list__btn,
body[data-design-version="v2"] .footer-providers .mtr-list.is-disabled .mtr-list__btn {
  display: flex !important;
  width: 36px;
  height: 36px;
  border: 1px solid var(--v2-border-soft) !important;
  border-radius: 8px !important;
  background: var(--v2-panel) !important;
  color: var(--v2-cyan) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .25);
  opacity: 1 !important;
  pointer-events: auto !important;
}

body[data-design-version="v2"] .footer-providers .mtr-list .mtr-list__btn--prev { left: 12px !important; }
body[data-design-version="v2"] .footer-providers .mtr-list .mtr-list__btn--next { right: 12px !important; }

body[data-design-version="v2"] .footer-providers .mtr-list .mtr-list__btn:hover {
  border-color: var(--v2-pink) !important;
  background: var(--v2-chip-active-bg) !important;
  box-shadow: var(--v2-glow-pink) !important;
  color: var(--v2-pink-text) !important;
}

/* Footer */
body[data-design-version="v2"] .footer-section {
  margin-top: 64px !important;
  padding: 0 0 16px !important;
}

body[data-design-version="v2"] .footer-section .container-fluid {
  position: relative;
  z-index: 0;
  overflow: hidden;
  width: 100% !important;
  max-width: none !important;
  padding: 32px 40px 24px !important;
  border: 1px solid var(--v2-border) !important;
  border-radius: 12px !important;
  background: #121429 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .33);
}

body[data-design-version="v2"] .footer-section .container-fluid::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background: url('/public/img/design-v2/ui/footer-bg.png') center / cover no-repeat;
  opacity: .08;
}

body[data-design-version="v2"] .footer-section .container-fluid::after {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(11, 8, 55, 0) 0%, #0b0837 100%);
}

body[data-design-version="v2"] .footer-section .container-fluid > * {
  position: relative;
  z-index: 1;
}

body[data-design-version="v2"] .footer-section .card,
body[data-design-version="v2"] .footer-section .card-body,
body[data-design-version="v2"] .footer-section .bg-light {
  border: 0 !important;
  background: transparent !important;
}

/* Bootstrap's card padding stacks on top of the panel padding and pushed the
   nav row 67px down; Figma leaves ~36px above it. */
body[data-design-version="v2"] .footer-section > .container-fluid > .row > div > .card > .card-body {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

body[data-design-version="v2"] .footer-section .footer-nav {
  gap: 12px !important;
}

body[data-design-version="v2"] .footer-section .footer-nav .btn {
  min-height: 42px;
  border: 1px solid var(--v2-border-soft) !important;
  border-radius: 8px !important;
  background: var(--v2-panel) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .25);
  color: var(--v2-cyan) !important;
  font-size: 16px;
  font-weight: 500;
}

body[data-design-version="v2"] .footer-section .footer-nav > a.btn:first-child,
body[data-design-version="v2"] .footer-section .footer-nav > a.btn:first-child:hover {
  border-color: #7f2da0 !important;
  background: var(--v2-chip-active-bg) !important;
  box-shadow: var(--v2-glow-pink);
  color: var(--v2-pink-text) !important;
}

body[data-design-version="v2"] .footer-section .footer-nav .btn:hover,
body[data-design-version="v2"] .footer-section .footer-nav .btn:focus-visible {
  border-color: var(--v2-pink) !important;
  background: var(--v2-chip-active-bg) !important;
  box-shadow: var(--v2-glow-pink) !important;
  color: var(--v2-pink-text) !important;
}

/* `btn-color-white` paints the icons white while the label is cyan/pink, so
   icons follow the button colour instead. */
body[data-design-version="v2"] .footer-section .footer-nav .btn i,
body[data-design-version="v2"] .footer-section .footer-nav .btn .svg-icon,
body[data-design-version="v2"] .footer-section .footer-nav .btn:hover i,
body[data-design-version="v2"] .footer-section .footer-lang-wrap .btn i,
body[data-design-version="v2"] .footer-section .footer-lang-wrap .btn .svg-icon {
  color: inherit !important;
}

/* language + scroll sit as a compact utility pair, not as extra nav rows */
body[data-design-version="v2"] .footer-section .footer-utils {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

body[data-design-version="v2"] .footer-section .footer-lang-wrap {
  position: relative;
  flex: 0 1 auto;
  min-width: 0;
}

body[data-design-version="v2"] .footer-section .footer-nav .footer-lang-trigger {
  min-width: 0;
  width: auto !important;
  min-height: 42px;
  height: 42px;
  padding: 0 12px !important;
  font-size: 13px !important;
  font-weight: 600;
}

body[data-design-version="v2"] .footer-section .footer-lang-current {
  gap: 8px;
  font-size: 13px !important;
  font-weight: 600;
  color: inherit;
}

body[data-design-version="v2"] .footer-section .footer-lang-current:after {
  content: '';
  flex: 0 0 10px;
  width: 10px;
  height: 10px;
  background: currentColor;
  -webkit-mask: url('/public/img/design-v2/ui/chevron-right.svg') center / contain no-repeat;
  mask: url('/public/img/design-v2/ui/chevron-right.svg') center / contain no-repeat;
  transform: rotate(90deg);
  opacity: .75;
}

body[data-design-version="v2"] .footer-section .footer-lang-flag {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: cover;
}

body[data-design-version="v2"] .footer-section .footer-lang-wrap.is-open .footer-lang-current:after {
  transform: rotate(-90deg);
}

body[data-design-version="v2"] .footer-lang-popover {
  position: fixed;
  z-index: 12050;
  display: none;
  flex-direction: column;
  box-sizing: border-box;
  width: max-content;
  min-width: 260px;
  max-width: min(320px, calc(100vw - 24px));
  max-height: min(420px, calc(100vh - 24px));
  isolation: isolate;
  border: 1px solid var(--v2-border);
  border-radius: 16px;
  background: var(--v2-panel);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
}

body[data-design-version="v2"] .footer-lang-popover.is-open,
body[data-design-version="v2"] .footer-lang-wrap.is-open .footer-lang-popover,
body[data-design-version="v2"] .footer-lang-popover:not([hidden]) {
  display: flex;
}

body[data-design-version="v2"] .footer-lang-popover[hidden] {
  display: none !important;
}

body[data-design-version="v2"] .footer-lang-popover__arrow {
  position: absolute;
  left: var(--footer-lang-arrow, 22px);
  bottom: -6px;
  width: 12px;
  height: 12px;
  border-right: 1px solid var(--v2-border);
  border-bottom: 1px solid var(--v2-border);
  background: var(--v2-panel);
  transform: rotate(45deg);
}

body[data-design-version="v2"] .footer-lang-popover.is-below .footer-lang-popover__arrow,
body[data-design-version="v2"] .footer-lang-wrap.is-below .footer-lang-popover__arrow {
  top: -6px;
  bottom: auto;
  border-right: 0;
  border-bottom: 0;
  border-top: 1px solid var(--v2-border);
  border-left: 1px solid var(--v2-border);
}

body[data-design-version="v2"] .footer-lang-popover__head {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 14px 10px;
}

body[data-design-version="v2"] .footer-lang-popover__title {
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
}

body[data-design-version="v2"] .footer-section .footer-nav .footer-lang-popover__close,
body[data-design-version="v2"] .footer-lang-popover__close {
  display: inline-flex;
  flex: 0 0 28px;
  width: 28px !important;
  min-width: 28px;
  height: 28px;
  min-height: 28px !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  border: 1px solid var(--v2-border) !important;
  border-radius: 8px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--v2-muted) !important;
  cursor: pointer;
}

body[data-design-version="v2"] .footer-lang-popover__close i,
body[data-design-version="v2"] .footer-lang-popover__close i:before {
  margin: 0;
  font-size: 14px !important;
  line-height: 1 !important;
}

body[data-design-version="v2"] .footer-section .footer-nav .footer-lang-popover__close:hover,
body[data-design-version="v2"] .footer-lang-popover__close:hover {
  border-color: var(--v2-lime) !important;
  background: transparent !important;
  color: var(--v2-lime) !important;
}

body[data-design-version="v2"] .footer-lang-popover__body {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0 8px 10px;
  scrollbar-width: thin;
  scrollbar-color: #2a3480 transparent;
}

body[data-design-version="v2"] .footer-lang-popover__label {
  padding: 8px 10px 4px;
  color: var(--v2-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

body[data-design-version="v2"] .footer-lang-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(22, 27, 80, .85);
  border-radius: 0;
  color: #fff;
  text-decoration: none;
}

body[data-design-version="v2"] .footer-lang-popover__section .footer-lang-row:last-child {
  border-bottom: 0;
}

body[data-design-version="v2"] .footer-lang-row:hover {
  background: rgba(199, 248, 1, .06);
  border-radius: 10px;
  color: #fff;
}

body[data-design-version="v2"] .footer-lang-row.is-active {
  background: rgba(199, 248, 1, .08);
  border-radius: 10px;
}

body[data-design-version="v2"] .footer-lang-row__flag {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}

body[data-design-version="v2"] .footer-lang-row__text {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
}

body[data-design-version="v2"] .footer-lang-row__native {
  overflow: hidden;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-design-version="v2"] .footer-lang-row__local {
  overflow: hidden;
  color: var(--v2-muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-design-version="v2"] .footer-lang-row__check {
  display: inline-flex;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--v2-lime);
  color: var(--v2-ink);
  box-shadow: 0 0 8px rgba(199, 248, 1, .35);
}

body[data-design-version="v2"] .footer-lang-row__check i,
body[data-design-version="v2"] .footer-lang-row__check i:before {
  margin: 0;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 800;
}

body[data-design-version="v2"] .footer-section .footer-nav .footer-scrolltop {
  flex: 0 0 42px;
  width: 42px !important;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 0 !important;
  border: 1px solid #e9ff91 !important;
  background: var(--v2-lime) !important;
  box-shadow: var(--v2-glow-lime) !important;
  color: var(--v2-ink) !important;
}

body[data-design-version="v2"] .footer-section .footer-nav .footer-scrolltop:hover,
body[data-design-version="v2"] .footer-section .footer-nav .footer-scrolltop:focus-visible {
  border-color: #f9ffe2 !important;
  background: var(--v2-lime) !important;
  box-shadow: 0 2px 12px rgba(199, 248, 1, .5) !important;
  color: var(--v2-ink) !important;
}

body[data-design-version="v2"] .footer-section .footer-nav .footer-scrolltop i {
  margin: 0 !important;
  font-size: 18px !important;
  color: inherit !important;
}

/* Footer bottom row: brand, socials/payments and the support card share
   one top and bottom line (Figma footer 228:615). */
body[data-design-version="v2"] .v2-footer-row {
  align-items: stretch !important;
  gap: 24px !important;
}

body[data-design-version="v2"] .v2-footer-left {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 24px 40px !important;
  align-content: center;
  align-items: center !important;
  width: 100%;
}

/* Mascot height matches the Telegram button + payments stack (36 + 24 + 42)
   so both columns start and end on the same line. */
body[data-design-version="v2"] .v2-footer-brand {
  display: flex;
  grid-row: 1 / span 2;
  align-self: center;
  align-items: center;
  gap: 14px;
}

body[data-design-version="v2"] .v2-footer-mascot {
  display: flex;
  width: 78px;
  height: 102px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
}

body[data-design-version="v2"] .v2-footer-mascot img {
  display: block;
  width: auto;
  max-width: 100%;
  height: 100%;
  margin: 0;
  object-fit: contain;
  filter: drop-shadow(0 0 16px rgba(0, 166, 198, .7));
}

body[data-design-version="v2"] .v2-footer-quote {
  align-self: center;
}

body[data-design-version="v2"] .v2-footer-quote {
  color: var(--v2-cyan);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.15;
  text-transform: uppercase;
  text-shadow: 0 0 6px #00a6c6;
}

body[data-design-version="v2"] .v2-telegram-btn {
  display: inline-flex !important;
  grid-column: 2;
  width: fit-content;
  height: 36px;
  align-items: center;
  gap: 8px;
  border-radius: 6px;
  padding: 10px 16px;
  background: var(--v2-blue) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .25);
  color: #fff !important;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

body[data-design-version="v2"] .v2-telegram-btn svg {
  width: 19px;
  height: 16px;
}

body[data-design-version="v2"] .v2-telegram-btn svg path:first-child {
  fill: transparent;
}

body[data-design-version="v2"] .footer-section .footer-payments {
  grid-column: 2;
  gap: 10px !important;
  margin-top: 0 !important;
}

body[data-design-version="v2"] .footer-section .footer-payments .pay-pill {
  min-height: 40px;
  gap: 6px;
  border: 1px solid var(--v2-border-soft) !important;
  border-radius: 8px !important;
  padding: 10px 12px;
  background: var(--v2-panel) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .25);
  color: var(--v2-muted) !important;
  font-size: 12px;
  font-weight: 700;
}

body[data-design-version="v2"] .footer-section .footer-payments .pay-logo {
  width: 20px;
  height: 20px;
}

body[data-design-version="v2"] .footer-section .min-w-30 {
  flex: 0 0 540px;
  max-width: 540px;
  min-width: 0;
}

body[data-design-version="v2"] .footer-section .footer-support-cardbody {
  display: flex !important;
  height: 100%;
  min-height: 0;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  overflow: hidden;
  border: 1px solid var(--v2-border-soft) !important;
  border-radius: 12px !important;
  padding: 24px !important;
  background: var(--v2-panel) !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, .33) !important;
}

body[data-design-version="v2"] .footer-section .footer-support-cardbody .footer-support__content {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  min-width: 0;
  border: 0 !important;
  background: transparent !important;
}

body[data-design-version="v2"] .footer-section .footer-support-cardbody .fs-4 {
  margin-bottom: 4px !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 700;
}

body[data-design-version="v2"] .footer-section .footer-support-cardbody .text-opacity-75 {
  max-width: none !important;
  margin-bottom: 12px !important;
  color: #fff !important;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  opacity: .5 !important;
}

body[data-design-version="v2"] .footer-section .footer-support-cardbody .btn-light-primary {
  min-height: 35px;
  border: 0 !important;
  border-radius: 6px;
  padding: 10px 16px;
  background: var(--v2-blue) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .25);
  color: #fff !important;
  font-size: 12px;
  font-weight: 700;
}

body[data-design-version="v2"] .footer-section .footer-support-cardbody .btn-light-primary:hover,
body[data-design-version="v2"] .footer-section .footer-support-cardbody .btn-light-primary:focus,
body[data-design-version="v2"] .v2-telegram-btn:hover {
  border: 0 !important;
  background: var(--v2-blue) !important;
  box-shadow: 0 2px 8px rgba(0, 82, 255, .45) !important;
  color: #fff !important;
}

body[data-design-version="v2"] .footer-section .footer-support__art {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: auto !important;
  height: auto !important;
  flex: 0 0 auto;
  border-radius: 0 !important;
  margin: 0 !important;
  background: none !important;
  backdrop-filter: none !important;
  pointer-events: none;
}

/* The translation carries a hard <br>; Figma keeps the line intact. */
body[data-design-version="v2"] .footer-section .footer-support-cardbody .text-opacity-75 br {
  display: none;
}

body[data-design-version="v2"] .v2-support-photo {
  display: flex;
  width: 96px;
  height: 100px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0;
  background: none;
}

body[data-design-version="v2"] .v2-support-photo img {
  display: block;
  width: auto;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

body[data-design-version="v2"] .footer-section .separator,
body[data-design-version="v2"] .footer-section .border-top {
  border-color: var(--v2-border) !important;
}

body[data-design-version="v2"] .footer-section .border-top {
  padding: 0 !important;
  border: 0 !important;
}

body[data-design-version="v2"] .footer-section .border-top .text-gray-500 {
  color: #fff !important;
  font-size: 12px;
  font-weight: 400;
  opacity: .5;
}

body[data-design-version="v2"] .footer-section .border-top .text-gray-600 {
  border-radius: 4px;
  padding: 4px 8px;
  background: #1e2f6b;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 800;
}

/* breathing room between the footer cards and the legal line */
body[data-design-version="v2"] .footer-section .border-top.v2-footer-legal {
  padding-top: 24px !important;
}

body[data-design-version="v2"] .v2-footer-legal > .d-flex {
  position: relative;
  justify-content: center !important;
}

body[data-design-version="v2"] .v2-footer-legal__copy {
  text-align: center;
}

/* keep the copyright centred on the page while 18+ stays pinned right */
@media (min-width: 768px) {
  body[data-design-version="v2"] .v2-footer-legal__age {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
  }
}

body[data-design-version="v2"] .modal-content,
body[data-design-version="v2"] .mtr-uimodal__panel,
body[data-design-version="v2"] .support-chat-panel {
  border: 1px solid var(--v2-border) !important;
  border-radius: 12px !important;
  background: var(--v2-panel) !important;
  color: #fff !important;
}

body[data-design-version="v2"] .support-chat-panel {
  right: 18px;
  bottom: 78px;
  overflow: hidden;
  border: 1px solid var(--v2-border-soft) !important;
  border-radius: 16px !important;
  background: #02011b !important;
  box-shadow: 0 16px 40px rgba(2, 1, 27, .65);
}

body[data-design-version="v2"] .support-chat-panel__header {
  align-items: center;
  padding: 14px 12px 12px;
  border-bottom: 1px solid var(--v2-border);
  background: transparent;
}

body[data-design-version="v2"] .support-chat-panel__title {
  color: #fff;
  font-size: 16px;
  font-weight: 700;
}

body[data-design-version="v2"] .support-chat-panel__subtitle {
  color: var(--v2-muted);
  font-size: 11px;
  font-weight: 500;
}

body[data-design-version="v2"] .support-chat-panel__close {
  display: inline-flex;
  flex: 0 0 28px;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #2e325c;
  color: #fff;
  line-height: 0;
}

body[data-design-version="v2"] .support-chat-panel__close:hover {
  background: #3c4180;
  color: #fff;
}

body[data-design-version="v2"] .support-chat-panel__close i,
body[data-design-version="v2"] .support-chat-panel__close i:before {
  display: block;
  margin: 0;
  padding: 0;
  font-size: 14px !important;
  line-height: 1 !important;
}

body[data-design-version="v2"] .support-chat-panel__messages {
  padding: 12px;
  background: transparent;
}

body[data-design-version="v2"] .support-chat-panel__empty {
  color: var(--v2-muted);
}

body[data-design-version="v2"] .support-chat-panel__notice {
  border: 1px solid rgba(255, 167, 26, .35);
  border-radius: 10px;
  background: rgba(255, 167, 26, .08);
  color: #ffa71a;
}

body[data-design-version="v2"] .support-chat-msg__bubble {
  border: 1px solid var(--v2-border);
  border-radius: 12px;
  padding: 8px 10px;
}

body[data-design-version="v2"] .support-chat-msg.is-mine .support-chat-msg__bubble {
  border-color: rgba(199, 248, 1, .35);
  background: #19093f;
  box-shadow: inset 0 0 8px rgba(199, 248, 1, .12);
}

body[data-design-version="v2"] .support-chat-msg.is-theirs .support-chat-msg__bubble {
  border-color: var(--v2-border);
  background: linear-gradient(0deg, #0b0837 0%, rgba(11, 8, 55, 0) 100%), #0d0f1e;
}

body[data-design-version="v2"] .support-chat-msg__name {
  color: var(--v2-cyan);
}

body[data-design-version="v2"] .support-chat-msg.is-mine .support-chat-msg__name {
  color: var(--v2-lime);
}

body[data-design-version="v2"] .support-chat-msg__text {
  color: #fff;
}

body[data-design-version="v2"] .support-chat-msg__time {
  color: var(--v2-muted);
}

body[data-design-version="v2"] .support-chat-panel__form {
  gap: 8px;
  padding: 10px 12px 12px;
  border-top: 1px solid var(--v2-border);
  background: transparent;
}

body[data-design-version="v2"] .support-chat-panel__form textarea {
  min-height: 42px;
  border: 1px solid var(--v2-border-soft) !important;
  border-radius: 8px !important;
  background: var(--v2-panel-dark) !important;
  color: #fff !important;
}

body[data-design-version="v2"] .support-chat-panel__form textarea:focus {
  border-color: var(--v2-pink) !important;
  box-shadow: var(--v2-glow-pink) !important;
}

body[data-design-version="v2"] .support-chat-panel__form .btn-primary {
  min-height: 42px;
  padding: 0 14px !important;
  font-size: 13px;
  font-weight: 700;
}

body[data-design-version="v2"] #supportModal .mtr-chat-pill {
  gap: 12px !important;
  margin-bottom: 10px !important;
  border: 1px solid var(--v2-border) !important;
  border-radius: 12px !important;
  padding: 12px !important;
  background: linear-gradient(0deg, #0b0837 0%, rgba(11, 8, 55, 0) 100%), #0d0f1e !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .25);
}

body[data-design-version="v2"] #supportModal .mtr-chat-pill .fw-semibold {
  color: #fff !important;
}

body[data-design-version="v2"] #supportModal .mtr-chat-pill .text-opacity-75,
body[data-design-version="v2"] #supportModal .mtr-chat-pill .text-opacity-75 a {
  color: var(--v2-muted) !important;
}

body[data-design-version="v2"] #supportModal .mtr-chat-pill .btn-icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 8px !important;
}

body[data-design-version="v2"] .modal-content .btn-primary,
body[data-design-version="v2"] .mtr-uimodal__panel .btn-primary,
body[data-design-version="v2"] .support-chat-panel .btn-primary {
  border: 1px solid #e9ff91 !important;
  background: var(--v2-lime) !important;
  color: var(--v2-ink) !important;
}

/* checkboxes and radios on the lime accent instead of the legacy blue */
body[data-design-version="v2"] .form-check-input {
  border: 1px solid var(--v2-border-soft) !important;
  background-color: var(--v2-panel-dark) !important;
}

body[data-design-version="v2"] .form-check-input:hover {
  border-color: var(--v2-border-blue) !important;
}

body[data-design-version="v2"] .form-check-input:focus {
  border-color: var(--v2-lime) !important;
  box-shadow: 0 0 0 3px rgba(199, 248, 1, .16) !important;
}

body[data-design-version="v2"] .form-check-input:checked {
  border-color: var(--v2-lime) !important;
  background-color: var(--v2-lime) !important;
}

body[data-design-version="v2"] .form-check-input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 11' width='13' height='11' fill='none'%3e%3cpath d='M1.5 5.6 4.8 8.9 11.5 2.2' stroke='%23020117' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e") !important;
}

body[data-design-version="v2"] .form-check-input[type="radio"]:checked {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23020117'/%3e%3c/svg%3e") !important;
}

/* switches keep their knob, only the track follows the accent */
body[data-design-version="v2"] .form-switch .form-check-input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23020117'/%3e%3c/svg%3e") !important;
}

body[data-design-version="v2"] .modal-content .form-control,
body[data-design-version="v2"] .mtr-uimodal__panel .form-control {
  border: 1px solid var(--v2-border) !important;
  border-radius: 6px !important;
  background: var(--v2-panel-dark) !important;
  color: #fff !important;
}

/* currency picker in the sign up modal: separate chips instead of a joined group */
body[data-design-version="v2"] #register_modal .btn-group[data-kt-buttons] {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

body[data-design-version="v2"] #register_modal .btn-group[data-kt-buttons] > [data-kt-button] {
  margin: 0 !important;
  border: 1px solid var(--v2-border-blue) !important;
  border-radius: 8px !important;
  background: var(--v2-panel) !important;
  color: var(--v2-cyan) !important;
  font-weight: 600;
}

body[data-design-version="v2"] #register_modal .btn-group[data-kt-buttons] > [data-kt-button] i {
  color: inherit !important;
}

body[data-design-version="v2"] #register_modal .btn-group[data-kt-buttons] > [data-kt-button]:hover {
  border-color: var(--v2-cyan) !important;
  color: #fff !important;
}

body[data-design-version="v2"] #register_modal .btn-group[data-kt-buttons] > [data-kt-button].active {
  border-color: var(--v2-pink) !important;
  background: var(--v2-chip-active-bg) !important;
  box-shadow: var(--v2-glow-pink);
  color: var(--v2-pink-text) !important;
}

body[data-design-version="v2"] .menu-sub-dropdown,
body[data-design-version="v2"] .dropdown-menu {
  border: 1px solid var(--v2-border) !important;
  background: var(--v2-panel) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}

body[data-design-version="v2"] .menu-sub-dropdown .menu-link,
body[data-design-version="v2"] .dropdown-item {
  color: var(--v2-cyan) !important;
}

body[data-design-version="v2"] .menu-sub-dropdown .menu-link:hover,
body[data-design-version="v2"] .dropdown-item:hover {
  background: var(--v2-chip-active-bg) !important;
  color: var(--v2-pink-text) !important;
}

/* ===== Personal cabinet (#lkModal) + shared modal internals ===== */
/* the shell follows the page background instead of the saturated indigo panel,
   so the cabinet reads in the same palette as the rest of v2 */
body[data-design-version="v2"] #lkModal .modal-content {
  border: 1px solid var(--v2-border) !important;
  border-radius: 12px !important;
  background: #02011b !important;
  color: #fff !important;
}

body[data-design-version="v2"] #lkModal .bg-sidebar,
body[data-design-version="v2"] #lkModal .app-sidebar {
  border-color: var(--v2-border) !important;
  background: #02011b !important;
}

body[data-design-version="v2"] #lkModal .bg-main,
body[data-design-version="v2"] #lkModal .lk-modal-main {
  background: #02011b !important;
  color: #fff !important;
}

body[data-design-version="v2"] #lkModal .modal-header {
  border-color: var(--v2-border) !important;
  background: transparent !important;
}

/* content blocks use the same card surface as the rest of v2 */
body[data-design-version="v2"] #lkModal .bg-body,
body[data-design-version="v2"] #lkModal .bg-white,
body[data-design-version="v2"] #lkModal .bg-light,
body[data-design-version="v2"] #lkModal .bg-light-light,
body[data-design-version="v2"] #lkModal .card,
body[data-design-version="v2"] #lkModal .card-body,
body[data-design-version="v2"] #lkModal .card-header,
body[data-design-version="v2"] #lkModal .symbol-label {
  border-color: var(--v2-border) !important;
  border-radius: 12px;
  background: linear-gradient(0deg, #0b0837 0%, rgba(11, 8, 55, 0) 100%), #0d0f1e !important;
  color: #fff !important;
}

/* nested body/header must not stack the gradient on top of the card again */
body[data-design-version="v2"] #lkModal .card > .card-body,
body[data-design-version="v2"] #lkModal .card > .card-header,
body[data-design-version="v2"] #lkModal .card > .card-footer {
  border-radius: 0;
  background: transparent !important;
}

/* the offers tab ships its own blue-gray surface from v1 */
body[data-design-version="v2"] #lkOffersPage .mtr-offer-card-surface,
body[data-design-version="v2"] #lkOffersPage .mtr-offer-card-locked {
  border-color: var(--v2-border) !important;
  background: linear-gradient(0deg, #0b0837 0%, rgba(11, 8, 55, 0) 100%), #0d0f1e !important;
  box-shadow: 0 12px 28px rgba(2, 1, 27, .55) !important;
}

body[data-design-version="v2"] #lkOffersPage .mtr-offer-card-surface::after {
  background: linear-gradient(115deg, transparent 28%, rgba(53, 221, 249, .18) 52%, transparent 76%);
}

body[data-design-version="v2"] #lkOffersPage .mtr-offer-card-surface .text-gray-900,
body[data-design-version="v2"] #lkOffersPage .mtr-offer-card-surface .text-gray-800,
body[data-design-version="v2"] #lkOffersPage .mtr-offer-card-locked .text-gray-900 {
  color: #fff !important;
}

body[data-design-version="v2"] #lkOffersPage .mtr-offer-card-surface .text-muted,
body[data-design-version="v2"] #lkOffersPage .mtr-offer-card-locked .text-muted {
  color: var(--v2-muted) !important;
}

body[data-design-version="v2"] #lkModal .card-title,
body[data-design-version="v2"] #lkModal .modal-title,
body[data-design-version="v2"] #lkModal .fw-bold,
body[data-design-version="v2"] #lkModal .fw-bolder {
  color: #fff !important;
}

body[data-design-version="v2"] #lkModal .text-muted,
body[data-design-version="v2"] #lkModal .form-label,
body[data-design-version="v2"] #lkModal .form-text,
body[data-design-version="v2"] #lkModal .menu-content {
  color: var(--v2-muted) !important;
}

body[data-design-version="v2"] #lkModal .menu-link {
  border-radius: 8px;
  color: var(--v2-cyan) !important;
}

/* cabinet avatar: the v1 logo-user.png is replaced by the Figma bender head,
   kept different from the head used in the header and the profile sheet */
body[data-design-version="v2"] #lk_app_sidebar .symbol {
  overflow: hidden;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border: 1px solid #90dcff;
  border-radius: 70px;
  background: #09051f url('/public/img/design-v2/ui/bender-head.png') center 72% / 140% no-repeat;
}

body[data-design-version="v2"] #lk_app_sidebar .symbol img {
  display: none;
}

/* .app-sidebar paints the icon slot itself with a legacy gray, and the glyph
   inherits from that slot — both have to follow the link colour */
body[data-design-version="v2"] #lkModal .menu-link .menu-title,
body[data-design-version="v2"] #lkModal .menu-link .menu-icon,
body[data-design-version="v2"] #lkModal .menu-link .menu-icon i,
body[data-design-version="v2"] #lkModal .menu-link .menu-icon .svg-icon,
body[data-design-version="v2"] #lkModal .menu-link .menu-bullet,
body[data-design-version="v2"] #lkModal .menu-link .menu-bullet span,
body[data-design-version="v2"] #lkModal .menu-link .menu-arrow {
  color: inherit !important;
}

body[data-design-version="v2"] #lkModal .menu-link:hover,
body[data-design-version="v2"] #lkModal .menu-link.active,
body[data-design-version="v2"] #lkModal .menu-item.here > .menu-link {
  background: var(--v2-chip-active-bg) !important;
  box-shadow: inset 0 0 8px rgba(198, 94, 242, .33);
  color: var(--v2-pink-text) !important;
}

body[data-design-version="v2"] #lkModal .form-control,
body[data-design-version="v2"] #lkModal .form-select,
body[data-design-version="v2"] #lkModal .form-control-solid,
body[data-design-version="v2"] #lkModal .form-select-solid,
body[data-design-version="v2"] #lkModal .input-group-text,
body[data-design-version="v2"] #lkModal .pin-input {
  border: 1px solid var(--v2-border-soft) !important;
  border-radius: 8px !important;
  background: var(--v2-panel-dark) !important;
  color: #fff !important;
}

body[data-design-version="v2"] #lkModal .form-control:focus,
body[data-design-version="v2"] #lkModal .form-select:focus,
body[data-design-version="v2"] #lkModal .pin-input:focus {
  border-color: var(--v2-pink) !important;
  box-shadow: var(--v2-glow-pink) !important;
}

body[data-design-version="v2"] #lkModal .input-group-text i {
  color: var(--v2-cyan) !important;
}

body[data-design-version="v2"] #lkModal .table,
body[data-design-version="v2"] #lkModal .table > :not(caption) > * > * {
  border-color: var(--v2-border) !important;
  background: transparent !important;
  color: #fff !important;
}

body[data-design-version="v2"] #lkModal .table thead th {
  color: var(--v2-muted) !important;
}

body[data-design-version="v2"] #lkModal .separator {
  border-color: var(--v2-border) !important;
}

body[data-design-version="v2"] #lkModal .progress {
  background: var(--v2-panel-dark) !important;
}

body[data-design-version="v2"] #lkModal .progress-bar,
body[data-design-version="v2"] #lkModal .bg-success {
  background: var(--v2-lime) !important;
}

body[data-design-version="v2"] #lkModal .page-link {
  border-color: var(--v2-border-soft) !important;
  background: var(--v2-panel) !important;
  color: var(--v2-cyan) !important;
}

body[data-design-version="v2"] #lkModal .page-item.active .page-link {
  border-color: var(--v2-pink) !important;
  background: var(--v2-chip-active-bg) !important;
  color: var(--v2-pink-text) !important;
}

/* Status colors: keep meaning, move to Figma neon palette */
body[data-design-version="v2"] #lkModal .badge,
body[data-design-version="v2"] .modal .badge,
body[data-design-version="v2"] .mtr-uimodal__panel .badge {
  border: 1px solid var(--v2-border-soft);
  border-radius: 6px;
  background: var(--v2-panel-dark);
  color: var(--v2-cyan);
  font-weight: 600;
}

body[data-design-version="v2"] .badge-light-success,
body[data-design-version="v2"] .badge-success,
body[data-design-version="v2"] .text-success {
  border-color: rgba(1, 237, 188, .45) !important;
  color: var(--v2-mint) !important;
}

body[data-design-version="v2"] .badge-light-warning,
body[data-design-version="v2"] .badge-warning,
body[data-design-version="v2"] .text-warning {
  border-color: rgba(255, 167, 26, .45) !important;
  color: #ffa71a !important;
}

body[data-design-version="v2"] .badge-light-danger,
body[data-design-version="v2"] .badge-danger,
body[data-design-version="v2"] .text-danger {
  border-color: rgba(248, 1, 129, .45) !important;
  color: #ff5a95 !important;
}

body[data-design-version="v2"] .badge-light-primary,
body[data-design-version="v2"] .badge-light-info,
body[data-design-version="v2"] .badge-primary {
  border-color: rgba(232, 117, 255, .45) !important;
  color: var(--v2-pink-text) !important;
}

body[data-design-version="v2"] .badge-warning,
body[data-design-version="v2"] .badge-success,
body[data-design-version="v2"] .badge-danger,
body[data-design-version="v2"] .badge-primary {
  background: var(--v2-chip-active-bg) !important;
}

body[data-design-version="v2"] .alert,
body[data-design-version="v2"] .alert-light-primary,
body[data-design-version="v2"] .alert-light-info,
body[data-design-version="v2"] .alert-light-warning,
body[data-design-version="v2"] .alert-light-danger,
body[data-design-version="v2"] .alert-primary,
body[data-design-version="v2"] .alert-success,
body[data-design-version="v2"] .alert-warning,
body[data-design-version="v2"] .alert-danger {
  border: 1px solid var(--v2-border-soft) !important;
  border-radius: 10px !important;
  background: var(--v2-panel-dark) !important;
  color: #fff !important;
}

body[data-design-version="v2"] #lkModal .lk-security-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body[data-design-version="v2"] #lkModal .lk-security-group > .lk-security-choice {
  flex: 1 1 0;
  min-width: 0;
  margin: 0 !important;
  border: 1px solid var(--v2-border-soft) !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
  background: var(--v2-panel) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .25) !important;
  color: var(--v2-cyan) !important;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}

body[data-design-version="v2"] #lkModal .lk-security-group > .lk-security-choice:hover {
  border-color: var(--v2-pink) !important;
  background: var(--v2-chip-active-bg) !important;
  box-shadow: var(--v2-glow-pink) !important;
  color: var(--v2-pink-text) !important;
}

body[data-design-version="v2"] #lkModal .lk-security-group > .lk-security-choice.active,
body[data-design-version="v2"] #lkModal .lk-security-group > .lk-security-choice.active:hover,
body[data-design-version="v2"] #lkModal .lk-security-group > .lk-security-choice.btn-active-success.active {
  border: 1px solid #e9ff91 !important;
  background: var(--v2-lime) !important;
  box-shadow: var(--v2-glow-lime) !important;
  color: var(--v2-ink) !important;
}

body[data-design-version="v2"] #lkModal .btn-light-danger,
body[data-design-version="v2"] #lkModal .btn-warning,
body[data-design-version="v2"] #lkModal .btn-dark,
body[data-design-version="v2"] #lkModal .btn-outline {
  border: 1px solid var(--v2-border-soft) !important;
  background: var(--v2-panel) !important;
  color: var(--v2-cyan) !important;
}

body[data-design-version="v2"] #lkModal .btn-light-danger:hover,
body[data-design-version="v2"] #lkModal .btn-warning:hover,
body[data-design-version="v2"] #lkModal .btn-dark:hover,
body[data-design-version="v2"] #lkModal .btn-outline:hover {
  border-color: var(--v2-pink) !important;
  background: var(--v2-chip-active-bg) !important;
  box-shadow: var(--v2-glow-pink) !important;
  color: var(--v2-pink-text) !important;
}

body[data-design-version="v2"] #lkModal .lk-modal-banner {
  border: 1px solid var(--v2-border-soft) !important;
  border-radius: 10px;
  background: var(--v2-panel-dark) !important;
  color: #fff !important;
}

body[data-design-version="v2"] #lkModal .lk-loader {
  background: rgba(2, 1, 31, .78) !important;
  color: var(--v2-cyan) !important;
}

/* password / pin dialogs from the security tab */
body[data-design-version="v2"] .LvIskCObBqiNKbBOhq {
  --bs-modal-width: 420px;
}

body[data-design-version="v2"] .LvIskCObBqiNKbBOhq .modal-dialog {
  max-width: 420px;
  margin: 1.25rem auto;
}

body[data-design-version="v2"] .LvIskCObBqiNKbBOhq .modal-content {
  overflow: hidden;
  border: 1px solid var(--v2-border-soft) !important;
  border-radius: 16px !important;
  background: #02011b !important;
  color: #fff !important;
}

body[data-design-version="v2"] .LvIskCObBqiNKbBOhq .modal-header {
  align-items: center;
  padding: 16px 16px 8px !important;
  border-bottom: 0 !important;
  background: transparent !important;
}

body[data-design-version="v2"] .LvIskCObBqiNKbBOhq .modal-title {
  color: #fff !important;
  font-size: 20px;
  font-weight: 700;
}

body[data-design-version="v2"] .LvIskCObBqiNKbBOhq .btn-close {
  width: 28px;
  height: 28px;
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: 50%;
  opacity: 1;
  background-color: #2e325c;
  background-size: 10px;
  filter: none;
}

body[data-design-version="v2"] .LvIskCObBqiNKbBOhq .modal-body {
  padding: 8px 16px 20px !important;
}

body[data-design-version="v2"] .LvIskCObBqiNKbBOhq .form-label {
  color: var(--v2-muted) !important;
  font-size: 12px;
  font-weight: 500;
}

body[data-design-version="v2"] .LvIskCObBqiNKbBOhq .form-control,
body[data-design-version="v2"] .LvIskCObBqiNKbBOhq .form-control-solid,
body[data-design-version="v2"] .LvIskCObBqiNKbBOhq .input-group-text,
body[data-design-version="v2"] .LvIskCObBqiNKbBOhq .pin-input {
  border: 1px solid var(--v2-border-soft) !important;
  border-radius: 8px !important;
  background: var(--v2-panel-dark) !important;
  color: #fff !important;
}

body[data-design-version="v2"] .LvIskCObBqiNKbBOhq .form-control:focus,
body[data-design-version="v2"] .LvIskCObBqiNKbBOhq .pin-input:focus {
  border-color: var(--v2-pink) !important;
  box-shadow: var(--v2-glow-pink) !important;
}

body[data-design-version="v2"] .LvIskCObBqiNKbBOhq .input-group-text i {
  color: var(--v2-cyan) !important;
}

body[data-design-version="v2"] .LvIskCObBqiNKbBOhq .pin-wrapper {
  max-width: 280px;
  margin-left: auto;
  margin-right: auto;
  --bs-gutter-x: 8px;
  --bs-gutter-y: 8px;
}

body[data-design-version="v2"] .LvIskCObBqiNKbBOhq .pin-input {
  height: 48px;
  padding: 0;
  font-size: 20px;
  font-weight: 700;
}

body[data-design-version="v2"] .LvIskCObBqiNKbBOhq .alert {
  margin-bottom: 16px !important;
  padding: 12px !important;
}

body[data-design-version="v2"] .LvIskCObBqiNKbBOhq form .btn-primary {
  float: none !important;
    width: 100% !important;
  min-height: 42px;
  margin-top: 8px !important;
}

body[data-design-version="v2"] .mtr-uimodal__panel a:not(.btn):not(.v2-btn),
body[data-design-version="v2"] .modal-content a:not(.btn):not(.v2-btn),
body[data-design-version="v2"] .support-chat-panel a:not(.btn) {
  color: var(--v2-cyan) !important;
}

body[data-design-version="v2"] .mtr-uimodal__panel a:not(.btn):hover,
body[data-design-version="v2"] .modal-content a:not(.btn):hover {
  color: var(--v2-pink-text) !important;
}

body[data-design-version="v2"] .mtr-uimodal__close {
  border: 1px solid var(--v2-border-soft) !important;
  background: var(--v2-panel) !important;
  color: var(--v2-cyan) !important;
}

body[data-design-version="v2"] .mtr-uimodal__close:hover {
  border-color: var(--v2-pink) !important;
  background: var(--v2-chip-active-bg) !important;
  color: var(--v2-pink-text) !important;
}

/* ===== Promo details modal (#promoCardModal) ===== */
body[data-design-version="v2"] #promoCardModal .mtr-uimodal__panel {
  border: 1px solid var(--v2-border) !important;
  border-radius: 12px !important;
  background: var(--v2-panel) !important;
  box-shadow: 0 18px 45px rgba(0, 0, 0, .45) !important;
}

/* the legacy blue starfield/shimmer layers have no place in the v2 palette */
body[data-design-version="v2"] #promoCardModal .mtr-uimodal__panel:before,
body[data-design-version="v2"] #promoCardModal .mtr-uimodal__panel:after,
body[data-design-version="v2"] #promoCardModal .mtr-promo-modal__content:before,
body[data-design-version="v2"] #promoCardModal .mtr-promo-modal__content:after {
  display: none !important;
}

body[data-design-version="v2"] #promoCardModal .mtr-promo-modal__header .mtr-uimodal__close {
  border: 1px solid var(--v2-border-soft) !important;
  border-radius: 10px !important;
  background: var(--v2-panel-dark) !important;
  color: var(--v2-cyan) !important;
}

body[data-design-version="v2"] #promoCardModal .mtr-promo-modal__header .mtr-uimodal__close:hover {
  border-color: var(--v2-pink) !important;
  background: var(--v2-chip-active-bg) !important;
  color: var(--v2-pink-text) !important;
}

body[data-design-version="v2"] #promoCardModal .mtr-promo-modal__hero {
  border-bottom: 1px solid var(--v2-border) !important;
}

body[data-design-version="v2"] #promoCardModal .mtr-promo-modal__hero:after {
  background: linear-gradient(180deg, rgba(16, 9, 63, 0) 0%, rgba(16, 9, 63, .55) 62%, var(--v2-panel) 100%) !important;
}

body[data-design-version="v2"] #promoCardModal .mtr-promo-modal__hero-skeleton,
body[data-design-version="v2"] #promoCardModal .mtr-promo-modal__hero.is-fallback {
  background: linear-gradient(160deg, #1b1466 0%, #10093f 55%, var(--v2-panel-dark) 100%) !important;
}

body[data-design-version="v2"] #promoCardModal .mtr-promo-modal__content {
  background: var(--v2-panel) !important;
}

body[data-design-version="v2"] #promoCardModal .mtr-promo-modal__head {
  border-bottom: 1px solid var(--v2-border) !important;
}

body[data-design-version="v2"] #promoCardModal .mtr-promo-modal__title {
  color: #fff !important;
}

body[data-design-version="v2"] #promoCardModal .mtr-promo-modal__cta {
  border: 1px solid #e9ff91 !important;
  border-radius: 8px !important;
  background: var(--v2-lime) !important;
  box-shadow: var(--v2-glow-lime) !important;
  color: var(--v2-ink) !important;
  font-weight: 800 !important;
}

body[data-design-version="v2"] #promoCardModal .mtr-promo-modal__cta:hover {
  background: #d8ff2e !important;
  box-shadow: 0 4px 14px rgba(199, 248, 1, .45) !important;
}

body[data-design-version="v2"] #promoCardModal .mtr-promo-modal__pill {
  border: 1px solid var(--v2-border-blue) !important;
  border-radius: 8px !important;
  background: rgba(5, 1, 22, .78) !important;
  color: #fff !important;
}

/* body copy */
body[data-design-version="v2"] #promoCardModal [data-promo-modal-body],
body[data-design-version="v2"] #promoCardModal .promo-modal-rich p,
body[data-design-version="v2"] #promoCardModal .promo-modal-rich ul,
body[data-design-version="v2"] #promoCardModal .promo-modal-rich ol,
body[data-design-version="v2"] #promoCardModal .promo-modal-rich__meta,
body[data-design-version="v2"] #promoCardModal .promo-modal-rich__meta-box,
body[data-design-version="v2"] #promoCardModal .promo-modal-rich__hero-code {
  color: var(--v2-muted) !important;
}

body[data-design-version="v2"] #promoCardModal .promo-modal-rich__label,
body[data-design-version="v2"] #promoCardModal .promo-modal-rich__hero-label {
  color: var(--v2-cyan) !important;
}

body[data-design-version="v2"] #promoCardModal .promo-modal-rich__value,
body[data-design-version="v2"] #promoCardModal .promo-modal-rich__hero-value,
body[data-design-version="v2"] #promoCardModal .promo-modal-rich__notes-text,
body[data-design-version="v2"] #promoCardModal .promo-modal-rich__hero-code span {
  color: #fff !important;
}

body[data-design-version="v2"] #promoCardModal .promo-modal-rich__value--accent {
  color: var(--v2-lime) !important;
}

body[data-design-version="v2"] #promoCardModal .promo-modal-rich__row {
  border: 1px solid var(--v2-border) !important;
  border-radius: 8px !important;
  background: var(--v2-panel-dark) !important;
}

body[data-design-version="v2"] #promoCardModal .promo-modal-rich__chip,
body[data-design-version="v2"] #promoCardModal .promo-modal-rich__flag {
  border: 1px solid var(--v2-border-soft) !important;
  border-radius: 999px !important;
  background: var(--v2-panel-dark) !important;
  color: var(--v2-cyan) !important;
}

body[data-design-version="v2"] #promoCardModal .promo-modal-rich__chip--accent {
  border-color: var(--v2-pink) !important;
  background: var(--v2-chip-active-bg) !important;
  color: var(--v2-pink-text) !important;
}

body[data-design-version="v2"] #promoCardModal [data-promo-modal-body] a {
  color: var(--v2-cyan) !important;
  text-decoration-color: rgba(53, 221, 249, .5) !important;
}

body[data-design-version="v2"] #promoCardModal [data-promo-modal-body] a:hover {
  color: var(--v2-pink-text) !important;
  text-decoration-color: rgba(250, 161, 255, .6) !important;
}

/* ===== Profile sheet (#profileMenuModal, Figma 276:5233) ===== */
body[data-design-version="v2"] #profileMenuModal .mtr-uimodal__panel {
  border: 1px solid var(--v2-border-soft) !important;
  border-radius: 16px !important;
  background: #02011b !important;
}

body[data-design-version="v2"] #profileMenuModal .mtr-uimodal__header {
  padding: 16px 12px 4px !important;
  align-items: flex-end;
}

body[data-design-version="v2"] #profileMenuModal .mtr-uimodal__title {
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0;
}

body[data-design-version="v2"] #profileMenuModal .mtr-uimodal__close {
  width: 28px;
  height: 28px;
  border: 0 !important;
  border-radius: 50% !important;
  background: #2e325c !important;
  color: #fff !important;
}

body[data-design-version="v2"] #profileMenuModal .mtr-uimodal__close i {
  color: inherit !important;
  font-size: 14px !important;
}

body[data-design-version="v2"] #profileMenuModal .mtr-uimodal__close:hover {
  background: #3c4180 !important;
  color: #fff !important;
}

body[data-design-version="v2"] #profileMenuModal .mtr-uimodal__body {
  padding: 12px !important;
}

body[data-design-version="v2"] #profileMenuModal .mtr-profile-menu__card {
  border: 1px solid var(--v2-border);
  border-radius: 12px;
  padding: 12px;
  background: linear-gradient(0deg, #0b0837 0%, rgba(11, 8, 55, 0) 100%), #0d0f1e;
}

/* --- account card --- */
body[data-design-version="v2"] #profileMenuModal .mtr-profile-menu__card > .d-flex:first-child {
  margin-bottom: 12px !important;
  gap: 8px;
}

body[data-design-version="v2"] #profileMenuModal .mtr-profile-menu__card > .d-flex:first-child > .d-flex {
  flex: 1 1 auto;
  min-width: 0;
  gap: 8px !important;
}

body[data-design-version="v2"] #profileMenuModal .mtr-profile-menu__card .symbol {
  overflow: hidden;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border: 1px solid #90dcff;
  border-radius: 70px;
  background: #09051f url('/public/img/design-v2/ui/avatar.png') center / cover no-repeat;
}

body[data-design-version="v2"] #profileMenuModal .mtr-profile-menu__card .symbol img {
  display: none;
}

body[data-design-version="v2"] #profileMenuModal .mtr-profile-menu__card > .d-flex:first-child .flex-column {
  min-width: 0;
  gap: 2px;
}

body[data-design-version="v2"] #profileMenuModal .mtr-profile-menu__name {
  overflow: hidden;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-design-version="v2"] #profileMenuModal .mtr-profile-menu__role {
  color: var(--v2-muted);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.25;
  text-transform: capitalize;
}

body[data-design-version="v2"] #profileMenuModal .mtr-profile-menu__balance-label {
  display: none;
}

body[data-design-version="v2"] #profileMenuModal .mtr-profile-menu__status {
  border: 1px solid #1289ff !important;
  border-radius: 8px;
  padding: 2px 6px;
  background: transparent;
  box-shadow: 0 0 6px #1289ff;
  color: #1289ff;
  font-size: 12px;
  font-weight: 500;
  text-shadow: 0 0 6px #1289ff;
}

body[data-design-version="v2"] #profileMenuModal .mtr-profile-menu__status.is-banned {
  border-color: var(--v2-pink) !important;
  box-shadow: 0 0 6px rgba(232, 117, 255, .8);
  color: var(--v2-pink-text);
  text-shadow: 0 0 6px rgba(232, 117, 255, .8);
}

body[data-design-version="v2"] #profileMenuModal .mtr-profile-menu__status.is-unverified,
body[data-design-version="v2"] #profileMenuModal .mtr-profile-menu__status.is-kyc-pending {
  border-color: var(--v2-lime) !important;
  box-shadow: 0 0 6px rgba(199, 248, 1, .6);
  color: var(--v2-lime);
  text-shadow: 0 0 6px rgba(199, 248, 1, .6);
}

/* balance turns into the same field as the header pill */
body[data-design-version="v2"] #profileMenuModal .mtr-profile-menu__balance-value {
  display: flex;
  height: 42px;
  align-items: center;
  /* no flex gap: the currency symbol is a separate text node and has to stay
     glued to the amount, so only the coin gets the spacing */
  gap: 0;
  margin-top: 0;
  border: 1px solid #1f2244;
  border-radius: 8px;
  padding: 6px 6px 6px 8px;
  background: var(--v2-panel-dark);
  color: var(--v2-cyan);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
}

body[data-design-version="v2"] #profileMenuModal .mtr-profile-menu__balance-value:before {
  content: '';
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  margin-right: 12px;
  background: url('/public/img/design-v2/ui/coin.svg') center / contain no-repeat;
}

body[data-design-version="v2"] #profileMenuModal .mtr-profile-menu__card > .d-flex.gap-2 {
  gap: 8px !important;
  margin-top: 12px !important;
}

body[data-design-version="v2"] #profileMenuModal .mtr-profile-menu__card .open-lk[data-target-tab="finance-deposit"],
body[data-design-version="v2"] #profileMenuModal .mtr-profile-menu__card .open-lk[data-target-tab="finance-withdraw"] {
  min-height: 0;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
}

/* Figma puts withdraw first as the outlined option */
body[data-design-version="v2"] #profileMenuModal .mtr-profile-menu__card .open-lk[data-target-tab="finance-withdraw"] {
  order: 1;
  border: 1px solid var(--v2-lime) !important;
  background: rgba(255, 255, 255, .05) !important;
  box-shadow: inset 0 2px 8px rgba(199, 248, 1, .33);
  color: var(--v2-lime) !important;
}

body[data-design-version="v2"] #profileMenuModal .mtr-profile-menu__card .open-lk[data-target-tab="finance-withdraw"]:hover {
  background: rgba(199, 248, 1, .12) !important;
}

body[data-design-version="v2"] #profileMenuModal .mtr-profile-menu__card .open-lk[data-target-tab="finance-deposit"] {
  order: 2;
  border: 1px solid #e9ff91 !important;
  background: var(--v2-lime) !important;
  box-shadow: var(--v2-glow-lime);
  color: var(--v2-ink) !important;
}

/* --- link rows --- */
body[data-design-version="v2"] #profileMenuModal .mtr-profile-menu__item {
  gap: 4px;
  border: 1px solid var(--v2-border);
  border-radius: 8px;
  padding: 6px;
  background: var(--v2-panel);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .25);
  color: #fff !important;
}

body[data-design-version="v2"] #profileMenuModal .mtr-profile-menu__item + .mtr-profile-menu__item {
  margin-top: 4px;
  border-top: 1px solid var(--v2-border);
}

body[data-design-version="v2"] #profileMenuModal .mtr-profile-menu__item:hover {
  border-color: var(--v2-border-blue);
  background: var(--v2-chip-active-bg);
}

body[data-design-version="v2"] #profileMenuModal .mtr-profile-menu__item-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  border-radius: 0;
  background: transparent;
}

/* Figma line icons, masked so the glyph keeps the neon blue of the design */
body[data-design-version="v2"] #profileMenuModal .mtr-profile-menu__item-icon i {
  width: 20px;
  height: 20px;
  background: #1289ff;
  filter: drop-shadow(0 0 3px rgba(18, 137, 255, .85));
  font-size: 0 !important;
  -webkit-mask: var(--v2-profile-ico, url('/public/img/design-v2/ui/nav-profile.svg')) center / 20px 20px no-repeat;
  mask: var(--v2-profile-ico, url('/public/img/design-v2/ui/nav-profile.svg')) center / 20px 20px no-repeat;
}

body[data-design-version="v2"] #profileMenuModal .mtr-profile-menu__item[data-target-tab="finance-history"] {
  --v2-profile-ico: url('/public/img/design-v2/ui/profile-history.svg');
}

body[data-design-version="v2"] #profileMenuModal .mtr-profile-menu__item[data-target-tab="settings-main"] {
  --v2-profile-ico: url('/public/img/design-v2/ui/profile-settings.svg');
}

body[data-design-version="v2"] #profileMenuModal .mtr-profile-menu__item[data-target-tab="settings-security"],
body[data-design-version="v2"] #profileMenuModal .mtr-profile-menu__item[data-target-tab="settings-kyc"] {
  --v2-profile-ico: url('/public/img/design-v2/ui/profile-safety.svg');
}

body[data-design-version="v2"] #profileMenuModal .mtr-profile-menu__item[data-target-tab="settings-promocode"] {
  --v2-profile-ico: url('/public/img/design-v2/ui/nav-gift.svg');
}

body[data-design-version="v2"] #profileMenuModal .mtr-profile-menu__item[data-target-tab="settings-offers"] {
  --v2-profile-ico: url('/public/img/design-v2/ui/nav-offers.svg');
}

body[data-design-version="v2"] #profileMenuModal .mtr-profile-menu__item[data-mtr-open="#supportModal"] {
  --v2-profile-ico: url('/public/img/design-v2/ui/profile-support.svg');
}

body[data-design-version="v2"] #profileMenuModal .mtr-profile-menu__item-text {
  flex-direction: row;
  align-items: center;
  gap: 6px;
}

body[data-design-version="v2"] #profileMenuModal .mtr-profile-menu__item-title {
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.25;
}

body[data-design-version="v2"] #profileMenuModal .mtr-profile-menu__item-subtitle {
  display: none;
}

body[data-design-version="v2"] #profileMenuModal .mtr-profile-menu__item-arrow {
  display: inline-flex;
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  align-items: center;
  justify-content: center;
}

body[data-design-version="v2"] #profileMenuModal .mtr-profile-menu__item-arrow i {
  width: 14px;
  height: 14px;
  background: #fff;
  font-size: 0 !important;
  -webkit-mask: url('/public/img/design-v2/ui/chevron-right.svg') center / 14px 14px no-repeat;
  mask: url('/public/img/design-v2/ui/chevron-right.svg') center / 14px 14px no-repeat;
}

/* --- language card --- */
body[data-design-version="v2"] #profileMenuModal .mtr-profile-menu__lang-title {
  color: #fff;
  font-size: 12px;
  font-weight: 500;
}

body[data-design-version="v2"] #profileMenuModal .mtr-profile-menu__lang-title i {
  display: none;
}

body[data-design-version="v2"] #profileMenuModal .mtr-profile-menu__lang-title + .d-flex {
  gap: 4px !important;
  margin-top: 8px !important;
}

body[data-design-version="v2"] #profileMenuModal .mtr-profile-menu__lang-pill {
  flex: 1 1 0;
  min-width: 0;
  gap: 8px;
  border: 1px solid var(--v2-border-soft);
  border-radius: 8px;
  padding: 4px;
  background: var(--v2-panel);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .25);
  color: #fff !important;
  font-size: 12px;
  font-weight: 500;
}

body[data-design-version="v2"] #profileMenuModal .mtr-profile-menu__lang-pill img {
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  border-radius: 100px !important;
  object-fit: cover;
}

body[data-design-version="v2"] #profileMenuModal .mtr-profile-menu__lang-pill:hover {
  border-color: var(--v2-border-blue);
}

body[data-design-version="v2"] #profileMenuModal .mtr-profile-menu__lang-pill.is-active {
  border-color: var(--v2-border-soft);
  background: var(--v2-panel);
  box-shadow: inset 0 0 6px #1289ff;
  color: var(--v2-cyan) !important;
}

/* --- log out --- */
body[data-design-version="v2"] #profileMenuModal .mtr-profile-menu > .btn {
  display: flex;
  min-height: 0;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  border: 1px solid var(--v2-border) !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  background: var(--v2-panel) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .25);
  color: #fff !important;
  font-size: 12px;
  font-weight: 500;
}

body[data-design-version="v2"] #profileMenuModal .mtr-profile-menu > .btn:hover {
  border-color: #ff1a12 !important;
  background: var(--v2-chip-active-bg) !important;
}

body[data-design-version="v2"] #profileMenuModal .mtr-profile-menu > .btn i {
  width: 20px;
  height: 20px;
  margin: 0 !important;
  background: #ff1a12;
  font-size: 0 !important;
  -webkit-mask: url('/public/img/design-v2/ui/profile-logout.svg') center / 20px 20px no-repeat;
  mask: url('/public/img/design-v2/ui/profile-logout.svg') center / 20px 20px no-repeat;
}

body[data-design-version="v2"] .lang-choice-card {
  border: 1px solid var(--v2-border-soft) !important;
  border-radius: 12px !important;
  background: var(--v2-panel) !important;
  color: #fff !important;
}

body[data-design-version="v2"] .lang-choice-card.is-active,
body[data-design-version="v2"] .lang-choice-card:hover {
  border-color: var(--v2-pink) !important;
  background: var(--v2-chip-active-bg) !important;
  box-shadow: var(--v2-glow-pink);
}

body[data-design-version="v2"] .lang-choice-modal__continue {
  min-height: 42px;
  border: 0 !important;
  border-radius: 8px !important;
  background: var(--v2-lime) !important;
  box-shadow: var(--v2-glow-lime) !important;
  color: var(--v2-ink) !important;
  font-weight: 700;
}

body[data-design-version="v2"] .lang-choice-modal__continue:hover,
body[data-design-version="v2"] .lang-choice-modal__continue:focus {
  border: 0 !important;
  background: var(--v2-lime) !important;
  color: var(--v2-ink) !important;
}

@media (max-width: 1199.98px) and (min-width: 992px) {
  body[data-design-version="v2"] .landing-header .app-container,
  body[data-design-version="v2"] #kt_app_hero,
  body[data-design-version="v2"] #kt_app_main {
    padding-right: 24px !important;
    padding-left: 24px !important;
  }

  body[data-design-version="v2"] #gamesGrid,
  body[data-design-version="v2"] #gamesGrid > .v2-game-section-grid,
  body[data-design-version="v2"] #gamesGrid > .row:not(#gamesSkelInner),
  body[data-design-version="v2"] #gamesSkelInner {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  body[data-design-version="v2"] .v2-mosaic-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body[data-design-version="v2"] .v2-bender-says {
    display: none;
  }

  body[data-design-version="v2"] .v2-hero__content {
    width: min(420px, 52%);
    padding: 32px;
  }
}

/* ===== Mobile 276:5827 ===== */
@media (max-width: 991.98px) {
  body[data-design-version="v2"] .landing-header {
    min-height: 52px;
  }

  body[data-design-version="v2"] .landing-header .app-container {
    padding: 0 12px !important;
  }

  body[data-design-version="v2"] .v2-header-row {
    min-height: 52px;
    gap: 8px;
  }

  body[data-design-version="v2"] .landing-header .logo-default {
    width: 148px;
    max-height: 50px;
  }

  /* v1 centres the logo absolutely on mobile; v2 keeps it inline on the left */
  body[data-design-version="v2"] .landing-header .lk-top-logo-link {
    position: static;
    left: auto;
    transform: none;
  }

  body[data-design-version="v2"] .v2-header-row > .d-flex.align-items-center {
    flex: 0 0 auto;
    margin-right: 0 !important;
  }

  body[data-design-version="v2"] #kt_header_nav_wrapper {
    display: none !important;
  }

  body[data-design-version="v2"] .v2-header-actions {
    gap: 8px;
  }

  body[data-design-version="v2"] .v2-btn {
    min-height: 36px;
    padding: 8px 12px;
    font-size: 13px;
  }

  body[data-design-version="v2"] .v2-btn--deposit {
    width: 42px;
    min-width: 42px;
    padding: 9px;
  }

  body[data-design-version="v2"] .v2-btn--deposit-label {
    display: none;
  }

  body[data-design-version="v2"] .v2-btn--deposit-plus {
    display: block;
  }

  body[data-design-version="v2"] #kt_app_hero,
  body[data-design-version="v2"] #kt_app_main {
    padding-right: 12px !important;
    padding-left: 12px !important;
  }

  body[data-design-version="v2"] .footer-section {
    margin-top: 32px !important;
    /* 24px design gap + room for the fixed tab bar (65px + 12px offset) */
    padding: 0 0 101px !important;
    padding-bottom: calc(101px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body[data-design-version="v2"] #kt_app_hero {
    padding-top: 12px;
  }

  body[data-design-version="v2"] .v2-hero {
    height: auto;
    min-height: 460px;
  }

  /* Phone layout (Figma 276:4223): the art sits in the lower half of the card
     and the copy stacks above it on a dark field. */
  body[data-design-version="v2"] .v2-hero:before {
    top: auto;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 62%;
    background-position: center bottom;
    background-size: cover;
  }

  body[data-design-version="v2"] .v2-hero:after {
    background:
      linear-gradient(180deg, #040128 0%, rgba(4, 1, 40, .88) 26%, rgba(4, 1, 40, .3) 44%, rgba(4, 1, 40, .1) 58%, rgba(4, 1, 40, .55) 100%);
  }

  body[data-design-version="v2"] .v2-hero__content {
    width: 100%;
    min-height: auto;
    padding: 16px 16px 132px;
    gap: 16px;
  }

  body[data-design-version="v2"] .v2-hero__title {
    font-size: 28px;
  }

  body[data-design-version="v2"] .v2-hero__desc {
    font-size: 16px;
  }

  body[data-design-version="v2"] .mtr-banner__actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 12px;
  }

  body[data-design-version="v2"] .v2-hero-cta {
    width: 100%;
  }

  body[data-design-version="v2"] .v2-hero-more {
    display: none;
  }

  body[data-design-version="v2"] .v2-bender-says {
    top: auto;
    right: 13px;
    bottom: 16px;
    left: 13px;
    width: auto;
    height: 104px;
  }

  body[data-design-version="v2"] .v2-bender-says__kicker { font-size: 15px; }
  body[data-design-version="v2"] .v2-bender-says__text { font-size: 18px; }
  body[data-design-version="v2"] .v2-bender-says__art { width: 68px; height: 116px; }

  body[data-design-version="v2"] .v2-promo-carousel {
    display: block;
    padding: 0 !important;
  }

  body[data-design-version="v2"] .v2-promo-carousel .mtr-prev,
  body[data-design-version="v2"] .v2-promo-carousel .mtr-next {
    display: none !important;
  }

  /* the filter bar has no top margin here, so the dots carry the spacing */
  body[data-design-version="v2"] .v2-promo-carousel .mtr-dots {
    margin: 14px 0 20px;
  }

  body[data-design-version="v2"] .v2-promo-card .mtr-banner__title {
    font-size: 18px;
  }

  body[data-design-version="v2"] .v2-search-filter-bar {
    flex-direction: column !important;
    gap: 12px !important;
    margin: 0 0 24px !important;
  }

  body[data-design-version="v2"] .v2-category-tabs .mtr-list__track {
    flex-wrap: nowrap;
    overflow-x: auto !important;
    padding-bottom: 2px;
  }

  body[data-design-version="v2"] #gamesGrid,
  body[data-design-version="v2"] #gamesGrid > .v2-game-section-grid,
  body[data-design-version="v2"] #gamesGrid > .row:not(#gamesSkelInner),
  body[data-design-version="v2"] #gamesSkelInner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  body[data-design-version="v2"] .games-empty-state {
    min-height: 220px;
    padding: 28px 16px;
    border-radius: 12px;
  }

  body[data-design-version="v2"] .games-empty-state__icon {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    margin-bottom: 14px;
  }

  body[data-design-version="v2"] .games-empty-state__title,
  body[data-design-version="v2"] .games-empty-state h3 {
    font-size: 17px !important;
  }

  /* Compact mosaic: one cell per row — a full-width feature card alternating
     with a 2x2 pack, so the rhythm survives on a phone. */
  body[data-design-version="v2"] .v2-mosaic-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  body[data-design-version="v2"] .v2-mosaic-slot {
    aspect-ratio: 344 / 238;
  }

  body[data-design-version="v2"] .v2-mosaic-slot--pack {
    gap: 12px;
  }

  /* Mobile tab bar (Figma 276:5218) */
  body[data-design-version="v2"] .mtr-mobile-nav {
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    height: 65px;
    gap: 4px;
    padding: 8px;
    border: 1px solid var(--v2-border);
    border-radius: 12px;
    background: linear-gradient(0deg, #0b0837 0%, rgba(11, 8, 55, 0) 100%), #0d0f1e;
    box-shadow: 0 0 12px rgba(18, 137, 255, .2), 0 4px 12px rgba(0, 0, 0, .33);
    backdrop-filter: none;
  }

  /* fades the page out under the bar, like the scrim in Figma */
  body[data-design-version="v2"] .mtr-mobile-nav:before {
    content: '';
    position: absolute;
    z-index: -1;
    top: -36px;
    right: -12px;
    bottom: calc(-12px - env(safe-area-inset-bottom, 0px));
    left: -12px;
    background: linear-gradient(180deg, rgba(6, 2, 35, 0) 0%, #060223 90%);
    pointer-events: none;
  }

  /* the spacer sits outside the scrolled wrapper in this layout, so the
     clearance under the fixed bar comes from the footer padding instead */
  body[data-design-version="v2"] .mtr-mobile-nav-spacer {
  display: none !important;
}

  body[data-design-version="v2"] .mtr-mobile-nav__item {
    min-width: 0;
    height: 49px;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--v2-border-blue);
    border-radius: 8px;
    background: var(--v2-panel);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .25);
    color: var(--v2-cyan);
  }

  body[data-design-version="v2"] .mtr-mobile-nav__item.is-active {
    border-color: var(--v2-pink);
    background: var(--v2-chip-active-bg);
    box-shadow: var(--v2-glow-pink);
    color: var(--v2-pink-text);
  }

  body[data-design-version="v2"] .mtr-mobile-nav .mtr-mobile-nav__item i,
  body[data-design-version="v2"] .mtr-mobile-nav .mtr-mobile-nav__item.is-active i {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    color: inherit !important;
    opacity: 1;
  }

  /* the V1 gold promo highlight has no place in the V2 palette */
  body[data-design-version="v2"] .mtr-mobile-nav .mtr-mobile-nav__item.mtr-mobile-tab-accent,
  body[data-design-version="v2"] .mtr-mobile-nav .mtr-mobile-nav__item.mtr-mobile-tab-accent .mtr-mobile-nav__text,
  body[data-design-version="v2"] .mtr-mobile-nav .mtr-mobile-nav__item.mtr-mobile-tab-accent i {
    border-color: var(--v2-border-blue);
    color: var(--v2-cyan) !important;
  }

  body[data-design-version="v2"] .mtr-mobile-nav .mtr-mobile-nav__item.mtr-mobile-tab-accent.is-active,
  body[data-design-version="v2"] .mtr-mobile-nav .mtr-mobile-nav__item.mtr-mobile-tab-accent.is-active .mtr-mobile-nav__text,
  body[data-design-version="v2"] .mtr-mobile-nav .mtr-mobile-nav__item.mtr-mobile-tab-accent.is-active i {
    border-color: var(--v2-pink);
    color: var(--v2-pink-text) !important;
  }

  /* Figma line icons instead of the solid FontAwesome glyphs;
     masked so they follow the item colour */
  body[data-design-version="v2"] .mtr-mobile-nav__item[data-nav="/"] i,
  body[data-design-version="v2"] .mtr-mobile-nav__item[data-nav="bonuses"] i,
  body[data-design-version="v2"] .mtr-mobile-nav__item[data-nav="offers"] i,
  body[data-design-version="v2"] .mtr-mobile-nav__item[data-nav="profile"] i {
    background: currentColor;
    font-size: 0 !important;
    -webkit-mask: var(--v2-nav-ico) center / 20px 20px no-repeat;
    mask: var(--v2-nav-ico) center / 20px 20px no-repeat;
  }

  body[data-design-version="v2"] .mtr-mobile-nav__item[data-nav="/"] {
    --v2-nav-ico: url('/public/img/design-v2/ui/nav-home.svg');
  }

  body[data-design-version="v2"] .mtr-mobile-nav__item[data-nav="bonuses"] {
    --v2-nav-ico: url('/public/img/design-v2/ui/nav-gift.svg');
  }

  body[data-design-version="v2"] .mtr-mobile-nav__item[data-nav="offers"] {
    --v2-nav-ico: url('/public/img/design-v2/ui/nav-offers.svg');
  }

  body[data-design-version="v2"] .mtr-mobile-nav__item[data-nav="profile"] {
    --v2-nav-ico: url('/public/img/design-v2/ui/nav-profile.svg');
  }

  body[data-design-version="v2"] .mtr-mobile-nav__text {
    max-width: 100%;
    overflow: hidden;
    color: inherit;
  font-size: 12px;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 1;
  }

  body[data-design-version="v2"] .mtr-mobile-nav__badge {
    top: -6px;
    right: -4px;
    border: 1px solid var(--v2-panel-dark);
    background: var(--v2-pink);
    color: var(--v2-ink);
  }

  /* every sheet keeps the same iOS corner radius on mobile */
  body[data-design-version="v2"] .mtr-uimodal__panel {
    border-radius: 18px 18px 0 0 !important;
  }

  /* promo sheet follows the same geometry as the other .mtr-uimodal sheets */
  body[data-design-version="v2"] #promoCardModal .mtr-uimodal__panel {
    position: absolute !important;
    top: var(--mtr-header-h, 64px) !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
  }

  body[data-design-version="v2"] #promoCardModal .mtr-uimodal__handle {
    position: absolute;
    top: 10px;
    left: 50%;
    z-index: 6;
    margin: 0;
    background: rgba(255, 255, 255, .55);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .45);
    transform: translateX(-50%);
  }

  /* profile sheet: same edge-to-edge geometry as the rest */
  body[data-design-version="v2"] #profileMenuModal .mtr-uimodal__panel {
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    border-radius: 18px 18px 0 0 !important;
  }

  body[data-design-version="v2"] .LvIskCObBqiNKbBOhq .modal-dialog {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    align-items: stretch;
    max-width: none !important;
    min-height: 0;
    margin: 0;
  }

  body[data-design-version="v2"] .LvIskCObBqiNKbBOhq.fade .modal-dialog {
    transform: translateY(110%);
    transition: transform .22s ease, opacity .18s ease;
  }

  body[data-design-version="v2"] .LvIskCObBqiNKbBOhq.show .modal-dialog {
    transform: none;
  }

  body[data-design-version="v2"] .LvIskCObBqiNKbBOhq .modal-content {
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    border-radius: 18px 18px 0 0 !important;
  }

  body[data-design-version="v2"] .LvIskCObBqiNKbBOhq .modal-content:before {
    content: '';
    display: block;
    width: 44px;
    height: 4px;
    margin: 10px auto 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .18);
  }

  body[data-design-version="v2"] .LvIskCObBqiNKbBOhq .modal-header {
    padding: 12px 16px 4px !important;
  }

  body[data-design-version="v2"] .LvIskCObBqiNKbBOhq .modal-body {
    padding: 12px 16px 24px !important;
  }

  body[data-design-version="v2"] #lkModal .lk-security-group {
    flex-direction: column;
  }

  body[data-design-version="v2"] #lkModal .lk-security-group > .lk-security-choice {
    width: 100%;
    flex: 0 0 auto;
  }

  /* Auth modals as the same iOS sheet as .mtr-uimodal (#SearchModal) */
  body[data-design-version="v2"] #autch_modal .modal-dialog,
  body[data-design-version="v2"] #register_modal .modal-dialog {
    position: fixed;
    top: var(--mtr-header-h, 64px);
    right: 0;
    bottom: 0;
    left: 0;
    align-items: stretch;
    max-width: none !important;
    min-height: 0;
    margin: 0;
  }

  body[data-design-version="v2"] #autch_modal.fade .modal-dialog,
  body[data-design-version="v2"] #register_modal.fade .modal-dialog {
    transform: translateY(110%);
    transition: transform .22s ease, opacity .18s ease;
  }

  body[data-design-version="v2"] #autch_modal.show .modal-dialog,
  body[data-design-version="v2"] #register_modal.show .modal-dialog {
    transform: none;
  }

  body[data-design-version="v2"] #autch_modal .modal-content,
  body[data-design-version="v2"] #register_modal .modal-content {
    height: 100% !important;
    padding-bottom: env(safe-area-inset-bottom);
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    border-radius: 18px 18px 0 0 !important;
  }

  /* grab handle */
  body[data-design-version="v2"] #autch_modal .modal-content:before,
  body[data-design-version="v2"] #register_modal .modal-content:before {
    content: '';
    flex: 0 0 auto;
    width: 44px;
    height: 4px;
    margin: 10px auto 2px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .18);
  }

  /* scroll inside the sheet so handle and close stay in place */
  body[data-design-version="v2"] #autch_modal .modal-content > .d-flex,
  body[data-design-version="v2"] #register_modal .modal-content > .d-flex {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
  }

  /* top padding keeps the content clear of the handle/close row */
  body[data-design-version="v2"] #autch_modal .modal-content > .d-flex > .w-100,
  body[data-design-version="v2"] #register_modal .modal-content > .d-flex > .w-100 {
    justify-content: flex-start !important;
    padding: 44px 20px 24px !important;
  }

  body[data-design-version="v2"] #autch_modal .modal-content > [data-bs-dismiss="modal"],
  body[data-design-version="v2"] #register_modal .modal-content > [data-bs-dismiss="modal"],
  body[data-design-version="v2"] #autch_modal #resset-login > [onclick] {
    top: 4px !important;
    min-height: 0 !important;
    height: 36px;
    margin: 6px 12px !important;
    border: 1px solid var(--v2-border-soft);
    border-radius: 10px;
    background: var(--v2-panel-dark);
    color: var(--v2-muted) !important;
  }

  body[data-design-version="v2"] #autch_modal .modal-content > [data-bs-dismiss="modal"],
  body[data-design-version="v2"] #register_modal .modal-content > [data-bs-dismiss="modal"] {
    width: 36px;
  }

  /* "back" in the recovery step is a labelled button, so it needs its own box */
  body[data-design-version="v2"] #autch_modal #resset-login > [onclick] {
    left: 0 !important;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    width: auto !important;
    padding: 0 12px 0 8px !important;
    font-size: 13px;
    font-weight: 600;
  }

  body[data-design-version="v2"] #autch_modal #resset-login > [onclick] i {
    font-size: 14px !important;
  }

  body[data-design-version="v2"] #autch_modal .modal-content > [data-bs-dismiss="modal"]:hover,
  body[data-design-version="v2"] #register_modal .modal-content > [data-bs-dismiss="modal"]:hover,
  body[data-design-version="v2"] #autch_modal #resset-login > [onclick]:hover {
    border-color: var(--v2-pink);
    background: var(--v2-chip-active-bg);
    color: var(--v2-pink-text) !important;
  }

  body[data-design-version="v2"] .v2-footer-left {
  display: flex !important;
    flex-direction: column;
    align-items: flex-start;
  gap: 16px !important;
}

  body[data-design-version="v2"] .v2-footer-brand,
  body[data-design-version="v2"] .v2-telegram-btn,
  body[data-design-version="v2"] .footer-section .footer-payments {
    grid-column: auto;
    grid-row: auto;
  }

  body[data-design-version="v2"] .footer-section .min-w-30 {
    flex: 1 1 auto;
    max-width: none;
  }

  body[data-design-version="v2"] .footer-section .footer-support-cardbody {
    min-height: 0;
    gap: 12px;
    padding: 16px !important;
  }

  body[data-design-version="v2"] .v2-support-photo {
    width: 78px;
    height: 86px;
  }

  body[data-design-version="v2"] .footer-section .footer-support-cardbody .btn-light-primary {
    white-space: nowrap;
  }

  body[data-design-version="v2"] #games-container .v2-search-game-grid,
  body[data-design-version="v2"] #games-container .v2-game-section-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  body[data-design-version="v2"] #games-container .row:not(.v2-game-section-grid):not(.v2-search-game-grid) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  body[data-design-version="v2"] #games-container > .d-flex[data-v2-section-title] .fw-bold.fs-3 {
    font-size: 16px !important;
  }

  body[data-design-version="v2"] .footer-section .footer-utils {
    justify-content: space-between;
    width: 100%;
    margin-left: 0;
  }

  body[data-design-version="v2"] .footer-section .footer-lang-wrap {
    flex: 0 1 auto;
  }

  body[data-design-version="v2"] .footer-section .footer-nav .footer-lang-trigger {
    width: auto !important;
  }

  /* sits above the fixed mobile tab bar */
  .design-version-switcher {
    right: 10px;
    bottom: 87px;
    bottom: calc(87px + env(safe-area-inset-bottom, 0px));
  }

  body[data-design-version="v2"] .support-chat-fab {
    right: auto;
    left: 12px;
    bottom: 87px;
    bottom: calc(87px + env(safe-area-inset-bottom, 0px));
  }

  body[data-design-version="v2"]:has(#supportChatPanel.is-open) .support-chat-fab {
    opacity: 0;
    pointer-events: none;
  }

  body[data-design-version="v2"] .support-chat-panel {
    top: var(--v2-app-header-bottom, 52px);
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: auto;
    max-height: none;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    border-radius: 0 !important;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  body[data-design-version="v2"] #gamesGrid,
  body[data-design-version="v2"] #gamesGrid > .v2-game-section-grid,
  body[data-design-version="v2"] #gamesGrid > .row:not(#gamesSkelInner),
  body[data-design-version="v2"] #gamesSkelInner {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  body[data-design-version="v2"] .v2-mosaic-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-design-version="v2"] .v2-mosaic-slot {
    aspect-ratio: 352 / 244;
  }
}

@media (max-width: 575.98px) {
  body[data-design-version="v2"] .v2-balance-pill {
    width: 128px;
    font-size: 14px;
  }

  body[data-design-version="v2"] .v2-hero {
    height: 400px;
    min-height: 400px;
  }

  body[data-design-version="v2"] .v2-hero:before {
    height: 58%;
    background-position: center 32%;
  }
}

/* ===== Interaction states: beat Metronic `.btn.btn-x:hover:not(.btn-active)` ===== */
body[data-design-version="v2"] .btn.btn-primary,
body[data-design-version="v2"] .btn.btn-primary:hover:not(.btn-active),
body[data-design-version="v2"] .btn.btn-primary:focus:not(.btn-active),
body[data-design-version="v2"] .btn.btn-primary:active:not(.btn-active),
body[data-design-version="v2"] .btn.btn-primary.show {
  border-color: #e9ff91 !important;
  background: var(--v2-lime) !important;
  color: var(--v2-ink) !important;
}

body[data-design-version="v2"] .btn.btn-primary:hover:not(.btn-active),
body[data-design-version="v2"] .btn.btn-primary:focus:not(.btn-active) {
  background: #d9ff36 !important;
  box-shadow: 0 2px 12px rgba(199, 248, 1, .5) !important;
}

body[data-design-version="v2"] .btn.btn-primary i,
body[data-design-version="v2"] .btn.btn-primary:hover:not(.btn-active) i,
body[data-design-version="v2"] .btn.btn-primary:hover:not(.btn-active) .svg-icon {
  color: var(--v2-ink) !important;
}

body[data-design-version="v2"] .btn.btn-light:hover:not(.btn-active),
body[data-design-version="v2"] .btn.btn-light:focus:not(.btn-active),
body[data-design-version="v2"] .btn.btn-secondary:hover:not(.btn-active),
body[data-design-version="v2"] .btn.btn-light-primary:hover:not(.btn-active),
body[data-design-version="v2"] .btn.btn-bg-light:hover:not(.btn-active) {
  border-color: var(--v2-pink) !important;
  background: var(--v2-chip-active-bg) !important;
  color: var(--v2-pink-text) !important;
  box-shadow: var(--v2-glow-pink) !important;
}

body[data-design-version="v2"] .btn.btn-light:hover:not(.btn-active) i,
body[data-design-version="v2"] .btn.btn-secondary:hover:not(.btn-active) i,
body[data-design-version="v2"] .btn.btn-light-primary:hover:not(.btn-active) i,
body[data-design-version="v2"] .btn.btn-bg-light:hover:not(.btn-active) i {
  color: var(--v2-pink-text) !important;
}

/* Toggle groups (search modal tabs, LK tabs) */
body[data-design-version="v2"] [data-toggle-group] .btn {
  border: 1px solid var(--v2-border-blue) !important;
  background: var(--v2-panel-dark) !important;
  color: var(--v2-cyan) !important;
  font-weight: 600;
  box-shadow: none !important;
}

body[data-design-version="v2"] [data-toggle-group] .btn:hover:not(.active) {
  border-color: var(--v2-cyan) !important;
  background: rgba(53, 221, 249, .1) !important;
  color: var(--v2-cyan) !important;
  box-shadow: 0 0 12px rgba(53, 221, 249, .22) !important;
}

body[data-design-version="v2"] [data-toggle-group] .btn.active,
body[data-design-version="v2"] [data-toggle-group] .btn.active:hover {
  border-color: var(--v2-pink) !important;
  background: var(--v2-chip-active-bg) !important;
  color: var(--v2-pink-text) !important;
  box-shadow: var(--v2-glow-pink) !important;
}

/* Game card play button */
body[data-design-version="v2"] .mtr-game-play-btn,
body[data-design-version="v2"] .mtr-game-play-btn:hover,
body[data-design-version="v2"] .mtr-game-play-btn:focus {
  border: 1px solid #e9ff91 !important;
  border-radius: 8px !important;
  padding: 8px 22px !important;
  background: var(--v2-lime) !important;
  color: var(--v2-ink) !important;
  font-weight: 700;
}

body[data-design-version="v2"] .mtr-game-play-btn:hover {
  background: #d9ff36 !important;
  box-shadow: 0 2px 12px rgba(199, 248, 1, .5) !important;
}

/* Inputs inside modals — same palette as the panel */
body[data-design-version="v2"] .mtr-uimodal__panel .form-control,
body[data-design-version="v2"] .mtr-uimodal__panel .form-select,
body[data-design-version="v2"] .modal-content .form-control,
body[data-design-version="v2"] .modal-content .form-select {
  border: 1px solid var(--v2-border-soft) !important;
  border-radius: 8px !important;
  background: var(--v2-panel-dark) !important;
  color: #fff !important;
  box-shadow: none !important;
}

body[data-design-version="v2"] .mtr-uimodal__panel .form-control:hover,
body[data-design-version="v2"] .modal-content .form-control:hover {
  border-color: var(--v2-border-blue) !important;
}

body[data-design-version="v2"] .mtr-uimodal__panel .form-control:focus,
body[data-design-version="v2"] .mtr-uimodal__panel .form-select:focus,
body[data-design-version="v2"] .modal-content .form-control:focus,
body[data-design-version="v2"] .modal-content .form-select:focus {
  border-color: var(--v2-pink) !important;
  background: var(--v2-panel-dark) !important;
  color: #fff !important;
  box-shadow: var(--v2-glow-pink) !important;
}

body[data-design-version="v2"] .mtr-uimodal__panel .form-control::placeholder,
body[data-design-version="v2"] .modal-content .form-control::placeholder {
  color: var(--v2-search) !important;
}

body[data-design-version="v2"] #SearchModal .btn-group[data-toggle-group] {
  gap: 12px;
}

body[data-design-version="v2"] #SearchModal [data-toggle-group] .btn {
  flex: 1 1 0;
  height: 42px;
  margin: 0 !important;
  border-radius: 8px !important;
}

body[data-design-version="v2"] #SearchModal .simpleSearch {
  height: 46px;
  font-size: 15px;
}

body[data-design-version="v2"] #SearchModal .simpleSearch + span i,
body[data-design-version="v2"] #SearchModal .search-clear i {
  color: var(--v2-search) !important;
}

body[data-design-version="v2"] #SearchModal .search-clear:hover i {
  color: var(--v2-pink-text) !important;
}

body[data-design-version="v2"] #SearchModal .mtr-uimodal__body {
  padding: 12px 16px 20px !important;
}

body[data-design-version="v2"] #games-container > .d-flex[data-v2-section-title] {
  min-height: 32px;
  margin-top: 20px !important;
  margin-bottom: 10px !important;
}

body[data-design-version="v2"] #games-container > .d-flex[data-v2-section-title]:first-child {
  margin-top: 4px !important;
}

body[data-design-version="v2"] #games-container > .d-flex[data-v2-section-title] .fw-bold.fs-3 {
  color: #fff !important;
  font-size: 18px !important;
  font-weight: 700;
}

body[data-design-version="v2"] #games-container > .d-flex[data-v2-section-title] .btn-primary {
  min-height: 32px;
  padding: 6px 12px !important;
  font-size: 12px;
}

body[data-design-version="v2"] #games-container .v2-search-game-grid,
body[data-design-version="v2"] #games-container .v2-game-section-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  margin: 0 !important;
}

body[data-design-version="v2"] #games-container .v2-game-section-grid .v2-search-game-grid {
  grid-column: 1 / -1;
}

/* category preview: exactly 2 full rows (3x2 on phone, 5x2 on desktop).
   text-search results stay unclipped — they are a bare .v2-search-game-grid */
body[data-design-version="v2"] #games-container .v2-game-section-grid .v2-search-game-grid > .mtr-game-grid-col:nth-child(n+7) {
  display: none;
}

body[data-design-version="v2"] #games-container .mtr-game-grid-col {
  width: auto !important;
  max-width: none !important;
  min-width: 0;
  padding: 0 !important;
}

body[data-design-version="v2"] #games-container .row:not(.v2-game-section-grid):not(.v2-search-game-grid) {
  --bs-gutter-x: 0;
  --bs-gutter-y: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 12px !important;
}

body[data-design-version="v2"] #games-container .row > [class*="col-"] {
  width: auto;
  max-width: none;
  padding: 0;
  flex: none;
}

@media (min-width: 992px) {
  body[data-design-version="v2"] #SearchModal .mtr-uimodal__pos {
    width: min(1180px, calc(100vw - 40px)) !important;
    max-width: min(1180px, calc(100vw - 40px)) !important;
    height: min(780px, calc(100vh - 24px)) !important;
    max-height: min(900px, calc(100vh - 24px)) !important;
  }

  body[data-design-version="v2"] #games-container .v2-search-game-grid,
  body[data-design-version="v2"] #games-container .v2-game-section-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
  }

  body[data-design-version="v2"] #games-container .v2-game-section-grid .v2-search-game-grid > .mtr-game-grid-col:nth-child(n+7) {
    display: block;
  }

  body[data-design-version="v2"] #games-container .v2-game-section-grid .v2-search-game-grid > .mtr-game-grid-col:nth-child(n+11) {
    display: none;
  }

  body[data-design-version="v2"] #games-container .row:not(.v2-game-section-grid):not(.v2-search-game-grid) {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
  }
}