/* =========================================================
   SAPPHIRE — style.css
   Single stylesheet for all pages.
   Glass + glow aesthetic. Aggressive blue accent only.
   Order: variables в†’ reset в†’ utilities в†’ components в†’ sections в†’ media.
   ========================================================= */

/* ---------- 1. VARIABLES ---------- */
:root {
  /* Backgrounds */
  --gaming-bg: #060912;
  --gaming-bg-light: #0a0d17;
  --gaming-bg-lighter: #11151f;
  --gaming-bg-elev: #161b29;

  /* Accent — UI primary. Purple range, harmonises with the deep-blue scene. */
  --gaming-accent: #00CFFF;
  --gaming-accent-light: #66E0FF;
  --gaming-accent-dark: #0088BB;
  --gaming-accent-glow: rgba(0, 207, 255, 0.45);
  --gaming-accent-glow-strong: rgba(0, 207, 255, 0.7);
  --gaming-accent-soft: rgba(0, 207, 255, 0.14);
  --gaming-accent-tint: rgba(0, 207, 255, 0.06);

  /* CTA — The Two-Voices Rule: cyan speaks for the brand, indigo for the action */
  --gaming-cta: #6c63ff;
  --gaming-cta-dark: #4c3fd4;
  --gaming-cta-rgb: 108, 99, 255;

  /* Text */
  --gaming-text: #F4F4F8;
  --gaming-text-muted: rgba(255, 255, 255, 0.65);
  --gaming-text-dim: rgba(255, 255, 255, 0.6);

  /* Lines & states */
  --gaming-border: rgba(255, 255, 255, 0.08);
  --gaming-border-strong: rgba(255, 255, 255, 0.16);
  --gaming-success: #10D9A0;       /* mint — contrasts cleanly with violet/blue */
  --gaming-warning: #f59e0b;
  --gaming-error:   #FF4D6D;

  /* Glass — reusable layers */
  --glass-bg: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.015) 50%, rgba(0,207,255,0.06) 100%);
  --glass-bg-strong: linear-gradient(135deg, rgba(0,207,255,0.18) 0%, rgba(0,207,255,0.04) 50%, rgba(0,207,255,0.16) 100%);
  --glass-border: rgba(255, 255, 255, 0.14);
  --glass-shadow:
    0 1px 0 rgba(255,255,255,0.18) inset,
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 20px 50px -20px rgba(0,0,0,0.6),
    0 30px 80px -25px var(--gaming-accent-glow);
  --glass-shadow-hover:
    0 1px 0 rgba(255,255,255,0.28) inset,
    0 0 0 1px rgba(0,207,255,0.18) inset,
    0 30px 80px -20px rgba(0,0,0,0.7),
    0 40px 100px -20px var(--gaming-accent-glow-strong);

  /* Geometry */
  --radius-sm: 0.5rem;
  --radius: 0.85rem;
  --radius-lg: 1.5rem;
  --radius-pill: 9999px;

  /* Layout */
  --section-pad: clamp(50px, 6vw, 90px);
  --max-w: 1440px;

  /* Type scale — Unbounded for display (strict, geometric, distinctive),
     Manrope for body (refined, modern, neutral),
     Mortend for hero/CTA shouty headlines (chiseled, angular, dramatic) */
  --display: 'Black Ops One', 'Unbounded', sans-serif;
  --body: 'Manrope', system-ui, sans-serif;
  --mono: ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, Consolas, monospace;
  --hero-title: 'Mortend', 'Unbounded', 'Orbitron', sans-serif;
}

/* ---------- 2. RESET / BASE ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* Reserve space for the scrollbar at all times so the page does NOT
     jump horizontally when a modal locks scrolling (overflow:hidden). */
  scrollbar-gutter: stable;
  /* Firefox custom scrollbar */
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 207, 255, 0.5) transparent;
}

/* Global keyboard-focus fallback — component styles may override with their own ring */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible, select:focus-visible {
  outline: 2px solid var(--gaming-accent);
  outline-offset: 2px;
}

/* ---------- Custom scrollbar (WebKit / Chromium / Safari) ---------- */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(0,207,255,0.5), rgba(0,136,187,0.45));
  border-radius: 999px;
  border: 3px solid transparent;          /* transparent border + clip = floating pill with padding */
  background-clip: padding-box;
  transition: background 0.2s;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(102,224,255,0.8), rgba(0,207,255,0.65));
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:active {
  background: linear-gradient(180deg, rgba(102,224,255,0.95), rgba(0,207,255,0.8));
  background-clip: padding-box;
}
::-webkit-scrollbar-corner { background: transparent; }

body {
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--gaming-text);
  background-color: #000008;
  /* Deep Nebula gradient — page-tall vertical scroll transition.
     The linear layer scrolls with the document so colors progress as
     the user moves down. The radial layers stay fixed for atmosphere. */
  background-image:
    radial-gradient(1200px 700px at 85% 6%, rgba(0, 207, 255, 0.22), transparent 65%),
    radial-gradient(900px 700px at 5% 92%, rgba(38, 21, 152, 0.20), transparent 65%),
    radial-gradient(700px 500px at 50% 50%, rgba(1, 0, 148, 0.10), transparent 70%),
    linear-gradient(
      180deg,
      #000008  0%,
      #050315  10%,
      #080523  22%,
      #0a0d4a  38%,
      #0c1670  52%,
      #0a1340  68%,
      #060c2c  82%,
      #020414 100%
    );
  background-repeat: no-repeat;
  background-attachment: fixed, fixed, fixed, scroll;
  background-size: auto, auto, auto, 100% 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  /* body owns the propagated viewport scroll (because of overflow-x:hidden),
     so reserve the gutter here too — prevents the horizontal jump on modal open. */
  scrollbar-gutter: stable;
}

a { color: inherit; text-decoration: none; cursor: pointer; }
button { font-family: inherit; cursor: pointer; background: none; border: 0; color: inherit; }
img, svg { display: block; max-width: 100%; }
ul, ol { list-style: none; }

::selection { background: var(--gaming-accent); color: #fff; }

/* ---------- 3. UTILITIES ---------- */
.container-max { max-width: var(--max-w); margin: 0 auto; padding: 0 1.5rem; position: relative; }
.section { padding: var(--section-pad) 0; position: relative; }
/* Page offset for fixed navbar — replaces inline style="padding-top:72px" */
.main--offset-nav { padding-top: 72px; min-height: 100vh; }

/* .gradient-text removed — unused, and gradient text is banned by DESIGN.md */

.fade-in-up { opacity: 1; transform: translateY(0); transition: opacity 0.7s ease, transform 0.7s ease; }
.fade-in-up.visible { opacity: 1; transform: translateY(0); }

/* Faint overall grid texture */
.bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--gaming-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--gaming-border) 1px, transparent 1px);
  background-size: 80px 80px;
  background-position: -1px -1px;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 30%, transparent 80%);
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
}

/* ---------- 4. COMPONENTS ---------- */

/* === BUTTONS — glass + glow === */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.95rem 1.7rem;
  border-radius: var(--radius-pill);
  font-family: var(--body);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  position: relative;
  overflow: hidden;
  border: 1px solid transparent;
  white-space: nowrap;
  user-select: none;
  isolation: isolate;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, color 0.3s ease, background 0.3s ease;
}
.btn svg { width: 1rem; height: 1rem; transition: transform 0.25s ease; }
.btn:hover svg { transform: translateX(3px); }

/* shared glass top highlight */
.btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7), transparent);
  opacity: 0.85;
  z-index: 2;
}

.btn-primary {
  background: linear-gradient(135deg, var(--gaming-cta) 0%, var(--gaming-cta-dark) 100%);
  color: #fff;
  border-color: rgba(var(--gaming-cta-rgb), 0.6);
  box-shadow:
    0 0 0 1px rgba(var(--gaming-cta-rgb), 0.35),
    0 8px 32px -8px rgba(var(--gaming-cta-rgb), 0.55),
    inset 0 1px 0 rgba(255,255,255,0.18);
}
.btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 60%);
  pointer-events: none;
  z-index: 1;
}
.btn-primary:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #7b74ff 0%, #5a4de0 100%);
  border-color: rgba(var(--gaming-cta-rgb), 0.8);
  box-shadow:
    0 0 0 1px rgba(var(--gaming-cta-rgb), 0.5),
    0 16px 40px -8px rgba(var(--gaming-cta-rgb), 0.55),
    inset 0 1px 0 rgba(255,255,255,0.22);
}
.btn-primary:hover::after { opacity: 1; }

.btn-secondary {
  background: var(--glass-bg);
  color: #fff;
  border-color: var(--glass-border);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.16),
    0 12px 30px -15px rgba(0,0,0,0.5),
    0 20px 60px -25px var(--gaming-accent-glow);
}
.btn-secondary:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 207, 255, 0.5);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    0 0 0 1px rgba(0,207,255,0.3),
    0 18px 50px -15px rgba(0,0,0,0.6),
    0 30px 80px -25px var(--gaming-accent-glow-strong);
}

.btn-sm { padding: 0.6rem 1.05rem; font-size: 0.82rem; }
.btn-lg { padding: 1.1rem 2.1rem; font-size: 1.05rem; }

/* Icon button — round glass */
.btn-icon {
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 50%;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 0 0 1px rgba(0,207,255,0.18),
    0 12px 30px -10px var(--gaming-accent-glow);
  color: var(--gaming-accent-light);
}
.btn-icon::before { display: none; }

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.42rem 0.9rem;
  border-radius: var(--radius-pill);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid var(--gaming-border);
  background: rgba(255,255,255,0.03);
  color: var(--gaming-text-muted);
  font-family: var(--body);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.badge svg { width: 0.8rem; height: 0.8rem; }
.badge-success {
  background: rgba(16, 217, 160, 0.1);
  color: var(--gaming-success);
  border-color: rgba(16, 217, 160, 0.3);
}
.badge-accent {
  background: linear-gradient(135deg, rgba(0,207,255,0.22), rgba(0,207,255,0.06));
  color: var(--gaming-accent-light);
  border-color: rgba(0, 207, 255, 0.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 0 30px -8px var(--gaming-accent-glow);
}
.badge__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
  animation: pulse-dot 2.4s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.55; }
}

/* Status pill (used across pages) */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.42rem 0.95rem;
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1px solid var(--gaming-border);
  background: rgba(255,255,255,0.02);
  font-family: var(--body);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.status-pill__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
  animation: pulse-dot 2.4s ease-in-out infinite;
}
.status-pill.undetected { color: var(--gaming-success); border-color: rgba(16,217,160,0.32); background: rgba(16,217,160,0.08); }
.status-pill.testing    { color: var(--gaming-warning); border-color: rgba(245,158,11,0.32); background: rgba(245,158,11,0.08); }
.status-pill.updating   { color: var(--gaming-accent-light); border-color: rgba(0,207,255,0.4); background: var(--gaming-accent-soft); }
.status-pill.down       { color: var(--gaming-error); border-color: rgba(255,77,109,0.32); background: rgba(255,77,109,0.08); }

/* Card base — glass */
.card {
  position: relative;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow: var(--glass-shadow);
  transition: transform 0.5s cubic-bezier(.2,.8,.2,1), border-color 0.5s ease, box-shadow 0.5s ease, background 0.5s ease;
}
.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
  z-index: 2;
  pointer-events: none;
}
.card:hover {
  border-color: rgba(0, 207, 255, 0.45);
  box-shadow: var(--glass-shadow-hover);
  transform: translateY(-12px);
}

/* Section header */
.section__header {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: clamp(40px, 6vw, 80px);
  max-width: 720px;
}
.section__header--split {
  flex-direction: column;
  gap: 1.5rem;
  max-width: 100%;
}
.section__eyebrow {
  font-family: var(--display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--gaming-accent-light);
  text-transform: uppercase;
  text-shadow: 0 0 18px var(--gaming-accent-glow);
}
.section__title {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(2.4rem, 5.5vw, 4.5rem);
  line-height: 0.98;
  letter-spacing: -0.01em;
  color: #fff;
}
.section__title-dot { color: var(--gaming-accent); text-shadow: 0 0 24px var(--gaming-accent-glow); }
.section__sub {
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--gaming-text-muted);
  max-width: 560px;
}
.section__sub--right { text-align: left; }

/* ---------- 5. SECTIONS ---------- */

/* === NAVBAR === */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 1.1rem 0;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  border-bottom: 1px solid transparent;
}
.navbar.scrolled {
  padding: 0.7rem 0;
  background: rgba(6, 9, 18, 0.7);
  border-bottom-color: var(--glass-border);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 10px 30px -10px rgba(0,0,0,0.6);
}
.navbar__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.navbar__logo {
  display: inline-flex;
  align-items: center;
  gap: 0;
  color: #fff;
}
.navbar__logo-mark { display: none; }
.navbar__logo-text {
  font-family: var(--display);
  font-weight: 900;
  font-size: 1.05rem;
  letter-spacing: 0.22em;
}

/* в”Ђв”Ђ Sapphire logo mark (source: logo.svg, inlined; recolor via `color`) в”Ђв”Ђ */
.sapphire-mark {
  width: 1.3em;
  height: 1.3em;
  flex: none;
  margin-right: 0.45em;
  vertical-align: -0.26em;
  color: var(--gaming-accent-light);
}
.navbar__logo .sapphire-mark { color: var(--gaming-accent-light); }
.footer__tile--brand .sapphire-mark { color: rgba(var(--tile-rgb), 1); }
.auth-modal__logo .sapphire-mark {
  width: 26px;
  height: 26px;
  margin-right: 0;
  color: var(--gaming-accent-light);
}

/* в”Ђв”Ђ Brand watermarks (favicon.svg, very faint, decorative) в”Ђв”Ђв”Ђв”Ђ */
.hero::after {
  content: "";
  position: absolute;
  right: -60px;
  bottom: -60px;
  width: 360px;
  height: 360px;
  background: url("favicon.svg") center / contain no-repeat;
  opacity: 0.05;
  pointer-events: none;
  z-index: 2;
}
.cart-empty { position: relative; }
.cart-empty::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("favicon.svg") center / 96px no-repeat;
  opacity: 0.05;
  pointer-events: none;
}
.dash-txns__empty { position: relative; }
.dash-txns__empty::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("favicon.svg") center / 52px no-repeat;
  opacity: 0.06;
  pointer-events: none;
}
.navbar__nav {
  display: flex;
  gap: 2.2rem;
}
.nav-link {
  position: relative;
  font-family: var(--body);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--gaming-text-muted);
  letter-spacing: 0.02em;
  padding: 0.4rem 0;
  transition: color 0.25s ease;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -4px;
  width: 100%;
  height: 1px;
  background: var(--gaming-accent);
  box-shadow: 0 0 8px var(--gaming-accent-glow);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.nav-link:hover { color: #fff; }
.nav-link:hover::after { transform: scaleX(1); }
.nav-link.active { color: #fff; }
.nav-link.active::after { transform: scaleX(1); }
.navbar__actions { display: flex; align-items: center; gap: 0.6rem; }

/* Icon buttons — account + cart */
.navbar__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--gaming-border);
  background: rgba(255,255,255,0.04);
  color: var(--gaming-text-muted);
  transition: color 0.2s, border-color 0.2s, background 0.2s;
  position: relative;
}
.navbar__icon-btn svg { width: 17px; height: 17px; }
.navbar__icon-btn:hover { color: #fff; border-color: var(--gaming-accent); background: var(--gaming-accent-soft); }

/* Cart badge */
.navbar__cart-badge {
  position: absolute;
  top: -5px; right: -5px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  border-radius: 9999px;
  background: var(--gaming-accent);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}

/* Sign In ghost button */
.btn-ghost {
  background: transparent;
  color: var(--gaming-text-muted);
  border: 1px solid var(--gaming-border);
  padding: 0.6rem 1.1rem;
  font-size: 0.875rem;
}
.btn-ghost:hover { color: #fff; border-color: rgba(255,255,255,0.25); background: rgba(255,255,255,0.05); }

/* Mobile auth row */
.mobile_menu__auth { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.6rem; }

.menu__opener {
  display: none;
  width: 44px;
  height: 44px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16);
  transition: background 0.25s ease, border-color 0.25s ease;
}
.menu__opener span {
  width: 18px; height: 1.5px;
  background: #fff;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.menu__opener.active span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.menu__opener.active span:nth-child(2) { opacity: 0; }
.menu__opener.active span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile menu */
.mobile_menu {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: rgba(6, 9, 18, 0.94);
  background-image:
    radial-gradient(700px 400px at 50% 0%, rgba(0,207,255,0.18), transparent 60%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-12px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.mobile_menu.active { opacity: 1; pointer-events: auto; transform: translateY(0); }
.mobile_menu__nav {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  text-align: center;
}
.mobile_menu .nav-link {
  font-family: var(--display);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
}
.mobile_menu__cta { margin-top: 0.5rem; }
.mobile_menu__meta { margin-top: 1.5rem; }

/* === HERO === */
.hero {
  position: relative;
  min-height: 100vh;
  padding: 9rem 0 4rem;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--gaming-border);
}
/* Photographic background — drop hero-bg.jpg into the site folder */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('hero-bg.webp');
  background-image: image-set(url('hero-bg.webp') type('image/webp'), url('hero-bg.jpg') type('image/jpeg'));
  background-size: cover;
  background-position: center 35%;
  background-repeat: no-repeat;
  /* Mirror so the soldier sits on the right, away from the title */
  transform: scaleX(-1);
  /* Slow living motion */
  animation: hero-bg-drift 22s ease-in-out infinite;
  will-change: transform;
}
@keyframes hero-bg-drift {
  0%, 100% { transform: scaleX(-1) scale(1.00) translateY(0); }
  50%      { transform: scaleX(-1) scale(1.04) translateY(-1.2%); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__bg,
  .hero__bg-wrap,
  [class*="bg-drift"],
  [class*="hero-bg"] {
    animation: none !important;
  }
}

/* Glass + glow layer — mirrors the button/badge signature.
   Stack:
     1) horizontal darken (text-side heavy)
     2) vertical vignette
     3) violet brand tint (inherits the new accent palette)
   Plus inset highlights and an outer accent glow so it reads as a real
   piece of glass laid over the photo, not a flat tint. */
.hero__bg-glass {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    /* horizontal — readable left, photographic right */
    linear-gradient(
      90deg,
      rgba(0, 0, 8, 0.78) 0%,
      rgba(0, 0, 8, 0.55) 30%,
      rgba(0, 0, 8, 0.20) 55%,
      rgba(0, 0, 8, 0.40) 100%
    ),
    /* vertical vignette */
    linear-gradient(
      180deg,
      rgba(0, 0, 8, 0.30) 0%,
      transparent 40%,
      rgba(0, 0, 8, 0.55) 100%
    ),
    /* brand-side violet wash */
    linear-gradient(
      135deg,
      rgba(38, 21, 152, 0.22) 0%,
      rgba(0, 207, 255, 0.10) 45%,
      rgba(0, 207, 255, 0.04) 100%
    );
  backdrop-filter: blur(3px) saturate(130%);
  -webkit-backdrop-filter: blur(3px) saturate(130%);
  /* Glass edge — same family as buttons / badges */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),       /* top inner highlight */
    inset 0 -1px 0 rgba(0, 0, 0, 0.45),            /* bottom inner shadow */
    inset 1px 0 0 rgba(167, 139, 250, 0.06),       /* faint side rim */
    inset 0 0 120px -20px rgba(0, 207, 255, 0.30),/* accent inner glow */
    0 0 80px -10px rgba(0, 207, 255, 0.30);       /* outer halo */
}
/* Top highlight strip — identical pattern to .btn::before, scaled up */
.hero__bg-glass::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 100%
  );
  opacity: 0.9;
  pointer-events: none;
}
/* Soft accent sweep — adds lit-up corner like badge-accent's glow */
.hero__bg-glass::after {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  background:
    radial-gradient(800px 500px at 88% 18%, rgba(167, 139, 250, 0.18), transparent 70%),
    radial-gradient(600px 400px at 8% 92%,  rgba(0, 207, 255, 0.16), transparent 70%);
  mix-blend-mode: screen;
}

/* Canvas of breathing dots — sits ABOVE the photo + glass */
.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: auto;
  mix-blend-mode: screen;
  opacity: 0.85;
}

.hero__inner {
  position: relative;
  z-index: 3;
  width: 100%;
}
.hero__content { max-width: 1080px; }
.hero__badge { margin-bottom: 1.8rem; }

/* Animated counter inside hero badge — fast count up + glow.
   "active users" rendered in mint green and bold. */
.hero__count {
  display: inline-block;
  font-family: var(--display);
  font-weight: 700;
  color: var(--gaming-success);
  letter-spacing: 0.02em;
}
.hero__count-plus {
  font-family: var(--display);
  font-weight: 700;
  color: var(--gaming-success);
  margin-left: 1px;
}
.hero__count-label {
  color: var(--gaming-success);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.hero__title {
  font-family: var(--hero-title);
  font-weight: 700;
  font-size: clamp(3.2rem, 8.8vw, 8.4rem);
  line-height: 0.92;
  letter-spacing: -0.005em;
  color: #fff;
  text-transform: uppercase;
  margin-bottom: 1.6rem;
  text-shadow: 0 0 60px rgba(0,207,255,0.3);
}
.hero__title-line { display: block; }
.hero__title-accent {
  position: relative;
  color: var(--gaming-accent-light);
}
.hero__title-dot {
  color: var(--gaming-accent);
  -webkit-text-fill-color: var(--gaming-accent);
  text-shadow: 0 0 40px var(--gaming-accent-glow-strong);
}
.hero__sub {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1.55;
  color: var(--gaming-text-muted);
  max-width: 540px;
  margin-bottom: 2.4rem;
}
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-bottom: 4rem;
}
.hero__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.6rem;
}
.hero__meta-item { display: flex; flex-direction: column; gap: 0.25rem; }
.hero__meta-num {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.7rem;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1;
}
.hero__meta-sym { color: var(--gaming-accent-light); }
.hero__meta-label {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gaming-text-dim);
}
.hero__meta-divider {
  width: 1px;
  height: 32px;
  background: var(--gaming-border);
}
.hero__scroll {
  position: absolute;
  bottom: 1.5rem;
  right: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--display);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gaming-text-dim);
}
.hero__scroll svg {
  width: 14px; height: 14px;
  animation: bounce-down 2.4s ease-in-out infinite;
}
@keyframes bounce-down {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50% { transform: translateY(6px); opacity: 1; }
}

/* === PRODUCTS — fan carousel === */
.products { overflow: hidden; }
.products__stage {
  position: relative;
  padding: 2rem 0 1rem;
}
.products__stage::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 720px; height: 720px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(0,207,255,0.18), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.products__slider { position: relative; z-index: 1; }
.products__slider .owl-stage-outer { padding: 80px 0; overflow: visible; }

.products__slider .owl-item {
  transition: transform 0.6s cubic-bezier(.2,.8,.2,1), opacity 0.6s ease, filter 0.6s ease;
  transform: scale(0.78) translateY(20px);
  opacity: 0.45;
  filter: blur(0.5px);
}
.products__slider .owl-item.active { opacity: 0.6; }
.products__slider .owl-item.active.center {
  transform: scale(1) translateY(0);
  opacity: 1;
  filter: none;
  z-index: 5;
}
.products__slider .owl-item.active:not(.center) {
  transform: scale(0.86) translateY(20px);
  opacity: 0.55;
}

.product-card {
  display: flex;
  flex-direction: column;
  margin: 0 0.75rem;
  min-height: 520px;
  position: relative;
}
/* All glow layers (ring, halo, ::after tint, lightning) read --card-tint —
   set per card by site.js from the card's own --art-rgb; cyan fallback. */
.products__slider .owl-item.center .product-card {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.3),
    0 0 0 1px rgba(var(--card-tint, 0,207,255), 0.35),
    0 30px 80px -20px rgba(0,0,0,0.7),
    0 50px 120px -25px rgba(var(--card-tint, 0,207,255), 0.45),
    0 0 100px -10px rgba(var(--card-tint, 0,207,255), 0.32);
  border-color: rgba(var(--card-tint, 0,207,255), 0.45);
}
.products__slider .owl-item.center .product-card::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: var(--radius-lg);
  pointer-events: none;
  background: linear-gradient(180deg, rgba(var(--card-tint, 0,207,255), 0.25), transparent 30%, transparent 70%, rgba(var(--card-tint, 0,207,255), 0.18));
  opacity: 0.6;
  mix-blend-mode: screen;
}

/* ---------- Huly-style lightning border on active card, v2 ----------
   Four layers, same two-element markup (stroke + glow + two pseudos):
     1. ::before  — wide volumetric aura (blur 18px), breathes slowly
     2. glow      — mid halo (blur 8px), subtle irregular flicker
     3. stroke    — two comet arcs: long tail → bright core → white-hot tip
     4. stroke::before — three spark segments racing ahead of the arcs
   All conic-gradients; the arcs rotate via @property --lightning-angle,
   the sparks via their own faster --spark-angle. Color inherits from the
   card accent (--card-tint). v1 preserved in _archive/lightning-v1.css. */
@property --lightning-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: true;
}
@property --spark-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.product-card__lightning {
  position: absolute;
  inset: -1.5px;
  border-radius: calc(var(--radius-lg) + 1.5px);
  pointer-events: none;
  opacity: 0;
  z-index: 6;
  transition: opacity 0.6s ease;
  /* Lightning follows the card accent (--card-tint inherits from the card
     root); violet fallback for tint-less cards. */
  --lightning-rgb: var(--card-tint, 167, 139, 250);
  --lightning-hot: color-mix(in srgb, rgb(var(--lightning-rgb)) 35%, #fff);
  --lightning-angle: 0deg;
}

/* 1 — volumetric aura: the same comet arcs, fat ring, heavy blur.
   Paints under the halo/stroke (pseudo renders before children). */
.product-card__lightning::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: calc(var(--radius-lg) + 9px);
  padding: 10px;
  background: conic-gradient(
    from var(--lightning-angle),
    rgba(var(--lightning-rgb), 0.0)   0deg,
    rgba(var(--lightning-rgb), 0.28) 58deg,
    rgba(var(--lightning-rgb), 0.55) 76deg,
    rgba(var(--lightning-rgb), 0.0)  86deg,
    transparent 86deg,
    transparent 180deg,
    rgba(var(--lightning-rgb), 0.0)  180deg,
    rgba(var(--lightning-rgb), 0.28) 238deg,
    rgba(var(--lightning-rgb), 0.55) 256deg,
    rgba(var(--lightning-rgb), 0.0)  266deg,
    transparent 266deg
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  filter: blur(18px);
  opacity: 0.55;
}

/* 3 — stroke: comet arcs. Rotation runs clockwise (angle grows), so the
   leading edge is the high-degree end: slow tail build-up, saturated core,
   then a white-hot tip with a sharp cutoff — reads as a racing bolt head. */
.product-card__lightning-stroke {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  padding: 1.6px;
  background: conic-gradient(
    from var(--lightning-angle),
    rgba(var(--lightning-rgb), 0.0)   0deg,
    rgba(var(--lightning-rgb), 0.35) 52deg,
    rgba(var(--lightning-rgb), 1)    72deg,
    var(--lightning-hot)             80deg,
    rgba(var(--lightning-rgb), 0.0)  84deg,
    transparent 84deg,
    transparent 180deg,
    rgba(var(--lightning-rgb), 0.0)  180deg,
    rgba(var(--lightning-rgb), 0.35) 232deg,
    rgba(var(--lightning-rgb), 1)    252deg,
    var(--lightning-hot)             260deg,
    rgba(var(--lightning-rgb), 0.0)  264deg,
    transparent 264deg
  );
  /* Cutout the inner area so only the border ribbon is visible */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}

/* 4 — sparks: three narrow near-white segments on their own faster wheel;
   they overtake the arcs, reading as energy pulses along the rail. The
   parent's ring mask clips them, so no mask needed here. Uneven spacing
   (0/131/247deg) keeps the rhythm from looking mechanical. */
.product-card__lightning-stroke::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  --spark-angle: 0deg;
  background: conic-gradient(
    from var(--spark-angle),
    transparent 0deg,
    var(--lightning-hot) 1.2deg,
    var(--lightning-hot) 2.4deg,
    transparent 3.6deg,
    transparent 131deg,
    var(--lightning-hot) 132.2deg,
    var(--lightning-hot) 133.4deg,
    transparent 134.6deg,
    transparent 247deg,
    var(--lightning-hot) 248.2deg,
    var(--lightning-hot) 249.4deg,
    transparent 250.6deg
  );
  opacity: 0.9;
}

/* 2 — mid halo: blurred comet, synced to the arcs */
.product-card__lightning-glow {
  position: absolute;
  inset: -3px;
  border-radius: calc(var(--radius-lg) + 4px);
  pointer-events: none;
  padding: 4px;
  background: conic-gradient(
    from var(--lightning-angle),
    rgba(var(--lightning-rgb), 0.0)   0deg,
    rgba(var(--lightning-rgb), 0.3)  52deg,
    rgba(var(--lightning-rgb), 0.8)  74deg,
    rgba(var(--lightning-rgb), 0.0)  84deg,
    transparent 84deg,
    transparent 180deg,
    rgba(var(--lightning-rgb), 0.0)  180deg,
    rgba(var(--lightning-rgb), 0.3)  232deg,
    rgba(var(--lightning-rgb), 0.8)  254deg,
    rgba(var(--lightning-rgb), 0.0)  264deg,
    transparent 264deg
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  filter: blur(8px);
  opacity: 0.85;
}

/* Allow overflow ONLY on active card so the glow escapes the bounds */
.products__slider .owl-item.center .product-card {
  overflow: visible;
}
.products__slider .owl-item.center .product-card__lightning {
  opacity: 1;
  /* Slow, calm rotation — 10s for a full lap around the card */
  animation: lightning-rotate 10s linear infinite;
}
.products__slider .owl-item.center .product-card__lightning-stroke::before {
  animation: spark-rotate 4.6s linear infinite;
}
.products__slider .owl-item.center .product-card__lightning-glow {
  animation: lightning-flicker-mid 3.2s ease-in-out infinite;
}
.products__slider .owl-item.center .product-card__lightning::before {
  animation: lightning-flicker-aura 5.4s ease-in-out infinite -2.1s;
}
@keyframes lightning-rotate {
  to { --lightning-angle: 360deg; }
}
@keyframes spark-rotate {
  to { --spark-angle: 360deg; }
}
/* Irregular stops — even pulsing reads as a metronome, not electricity */
@keyframes lightning-flicker-mid {
  0%, 100% { opacity: 0.85; }
  13%      { opacity: 0.68; }
  19%      { opacity: 0.92; }
  44%      { opacity: 0.75; }
  56%      { opacity: 1; }
  77%      { opacity: 0.7; }
  88%      { opacity: 0.95; }
}
@keyframes lightning-flicker-aura {
  0%, 100% { opacity: 0.55; }
  16%      { opacity: 0.4; }
  33%      { opacity: 0.62; }
  61%      { opacity: 0.44; }
  82%      { opacity: 0.6; }
}

/* Reduced motion — static comet + sparks, no rotation, no flicker */
@media (prefers-reduced-motion: reduce) {
  .products__slider .owl-item.center .product-card__lightning,
  .products__slider .owl-item.center .product-card__lightning::before,
  .products__slider .owl-item.center .product-card__lightning-glow,
  .products__slider .owl-item.center .product-card__lightning-stroke::before {
    animation: none;
  }
}



.product-card__art {
  position: relative;
  aspect-ratio: 4 / 3;
  --art-rgb: 117, 72, 210; /* default — override per card via inline style */
  background:
    radial-gradient(circle at 50% 60%, rgba(var(--art-rgb), 0.22), transparent 60%),
    linear-gradient(160deg, rgba(255,255,255,0.04), rgba(var(--art-rgb), 0.04));
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--gaming-border);
  color: rgb(var(--art-rgb));
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.product-card__art-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 30%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 30%, transparent 90%);
}
.product-card__art-shape {
  position: relative;
  width: 58%;
  z-index: 2;
  filter:
    drop-shadow(0 0 12px rgba(var(--art-rgb), 0.70))
    drop-shadow(0 0 32px rgba(var(--art-rgb), 0.40));
  transition: transform 0.6s ease;
}
.product-card__art-stars {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.85;
}
.product-card__art-stars span {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px #fff, 0 0 16px var(--gaming-accent-light);
  opacity: 0.85;
  animation: twinkle 3.5s ease-in-out infinite;
}
.product-card__art-stars span:nth-child(1) { top: 14%; left: 14%; animation-delay: 0s; }
.product-card__art-stars span:nth-child(2) { top: 22%; right: 18%; animation-delay: 0.6s; }
.product-card__art-stars span:nth-child(3) { bottom: 26%; left: 22%; animation-delay: 1.2s; }
.product-card__art-stars span:nth-child(4) { bottom: 18%; right: 16%; animation-delay: 1.8s; }
@keyframes twinkle {
  0%, 100% { opacity: 0.25; transform: scale(0.7); }
  50% { opacity: 1; transform: scale(1); }
}
.products__slider .owl-item.center .product-card__art-shape {
  animation: card-float 5s ease-in-out infinite;
}
@keyframes card-float {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-10px) rotate(2deg); }
}

.product-card__art-tag {
  position: absolute;
  top: 1rem;
  right: 1.1rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: var(--gaming-text-dim);
  z-index: 3;
}

.product-card__body {
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.95rem;
}
.product-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.product-card__game {
  font-family: var(--display);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  padding: 2px 8px;
  white-space: nowrap;
}
.product-card__title {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.55rem;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: #fff;
}
.product-card__desc {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--gaming-text-muted);
  flex: 1;
}
.product-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--gaming-border);
}
.product-card__price {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.55rem;
  color: #fff;
  letter-spacing: -0.01em;
  text-shadow: 0 0 16px var(--gaming-accent-glow);
}
.product-card__price-unit {
  font-family: var(--body);
  font-weight: 500;
  font-size: 0.78rem;
  color: var(--gaming-text-dim);
  letter-spacing: 0;
  margin-left: 0.15rem;
}

/* Carousel controls */
.products__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  margin-top: 1.5rem;
  position: relative;
  z-index: 6;
}
.products__nav {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--gaming-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 0 0 1px rgba(0,207,255,0.15);
}
.products__nav:hover {
  transform: translateY(-2px);
  color: var(--gaming-accent-light);
  border-color: rgba(0,207,255,0.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 0 0 1px rgba(0,207,255,0.4), 0 0 30px var(--gaming-accent-glow);
}
.products__nav svg { width: 18px; height: 18px; }

.products__dots { display: flex; gap: 0.55rem; }
.products__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: 1px solid var(--gaming-border-strong);
  transition: all 0.3s ease;
  padding: 0;
}
.products__dot.active {
  width: 32px;
  border-radius: 9999px;
  background: linear-gradient(90deg, var(--gaming-accent), var(--gaming-accent-light));
  border-color: rgba(0,207,255,0.5);
  box-shadow: 0 0 12px var(--gaming-accent-glow);
}

.products__foot {
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
}

/* === WHY SAPPHIRE — node diagram === */
.why { position: relative; }
.why__diagram {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto auto;
  gap: 2.2rem 2.2rem;
  align-items: center;
  padding: 2rem 0;
}
.why__center {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  z-index: 2;
}
.why__center-orb {
  position: relative;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 22%, rgba(255,255,255,0.55), transparent 38%),
    radial-gradient(circle at 50% 50%, var(--gaming-accent-light) 0%, var(--gaming-accent) 38%, var(--gaming-accent-dark) 85%);
  box-shadow:
    inset 0 3px 0 rgba(255,255,255,0.55),
    inset 0 -14px 36px rgba(0,0,0,0.55),
    inset 0 0 50px rgba(255,255,255,0.10),
    0 0 0 1px rgba(255,255,255,0.20),
    0 0 80px var(--gaming-accent-glow-strong),
    0 0 180px var(--gaming-accent-glow);
  color: #fff;
  animation: orb-pulse 4s ease-in-out infinite;
}
@keyframes orb-pulse {
  0%, 100% {
    box-shadow:
      inset 0 3px 0 rgba(255,255,255,0.55),
      inset 0 -14px 36px rgba(0,0,0,0.55),
      inset 0 0 50px rgba(255,255,255,0.10),
      0 0 0 1px rgba(255,255,255,0.20),
      0 0 80px var(--gaming-accent-glow-strong),
      0 0 180px var(--gaming-accent-glow);
  }
  50% {
    box-shadow:
      inset 0 3px 0 rgba(255,255,255,0.65),
      inset 0 -14px 36px rgba(0,0,0,0.55),
      inset 0 0 60px rgba(255,255,255,0.16),
      0 0 0 1px rgba(255,255,255,0.28),
      0 0 110px var(--gaming-accent-glow-strong),
      0 0 240px var(--gaming-accent-glow);
  }
}
.why__center-orb::before,
.why__center-orb::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.12);
  pointer-events: none;
}
.why__center-orb::before {
  inset: -16px;
  border-color: rgba(0, 207, 255, 0.25);
}
.why__center-orb::after {
  inset: -32px;
  border-color: rgba(0, 207, 255, 0.12);
}
.why__center-orb svg { width: 56px; height: 56px; position: relative; z-index: 2; }

.why__center-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: 0.02em;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
  text-shadow: 0 0 30px var(--gaming-accent-glow);
}

.why__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}
.why__lines path {
  fill: none;
  stroke: url(#whyLineGrad);
  stroke-width: 1.5;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  filter: drop-shadow(0 0 6px var(--gaming-accent-glow));
  transition: stroke-dashoffset 1.4s ease;
}
.why__diagram.is-visible .why__lines path { stroke-dashoffset: 0; }

/* ====================================================================
   .why__node — proper "alive" glass.
   Treated like a curved glass plate floating over the scene:
   – low-opacity body so the gradient bleeds through
   – heavy backdrop blur for real frostiness
   – polished top rim (hard 1px highlight)
   – soft bottom rim (catches the dark behind the card)
   – animated specular streak that crosses the surface every cycle
   – perpetual gentle floating, each card phase-shifted
   ==================================================================== */
.why__node {
  position: relative;
  z-index: 2;
  padding: 2.4rem 1.9rem 1.9rem;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 22px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  /* Bevel + halo stack */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),       /* hard top rim */
    inset 0 -1px 0 rgba(255, 255, 255, 0.04),      /* faint bottom catch */
    inset 0 18px 32px -18px rgba(255, 255, 255, 0.18), /* upper inner glow */
    inset 0 -22px 40px -25px rgba(0, 0, 0, 0.55),  /* lower inner shade */
    inset 0 -32px 60px -30px rgba(167, 139, 250, 0.55), /* bottom inner accent — light strip from below */
    inset 0 0 90px -25px rgba(167, 139, 250, 0.30),/* violet inner spill */
    0 1px 0 rgba(255, 255, 255, 0.05),             /* outer top edge */
    0 24px 50px -22px rgba(0, 0, 0, 0.55),         /* drop shadow */
    0 50px 100px -35px rgba(167, 139, 250, 0.85),  /* bottom directional glow — bright strip */
    0 80px 160px -45px rgba(0, 207, 255, 0.55);   /* violet outer halo */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.95rem;
  isolation: isolate;
  /* Visible so the orb can pop OUT above the card top for a 3D effect.
     The sweep streak (::after) is contained via inset:0 so it stays
     within the card silhouette without needing clip-path. */
  overflow: visible;
  transition:
    transform 0.6s cubic-bezier(.2,.8,.2,1),
    border-color 0.45s ease,
    box-shadow 0.5s ease;
  animation: why-node-float 7s ease-in-out infinite;
}
/* Stagger floats — every card breathes on a different beat */
.why__node--top    { animation-delay: 0s;    }
.why__node--left   { animation-delay: -1.7s; }
.why__node--right  { animation-delay: -3.4s; }
.why__node--bottom { animation-delay: -5.1s; }

@keyframes why-node-float {
  0%, 100% { transform: translateY(0)    rotate(0); }
  50%      { transform: translateY(-6px) rotate(0); }
}

/* Polished top rim — bright thin highlight that fakes the edge of glass */
.why__node::before {
  content: "";
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.85) 50%,
    transparent 100%
  );
  opacity: 1;
  z-index: 3;
  pointer-events: none;
}

/* Specular streak — a slow diagonal light sweep that loops forever.
   Contained within the card via inset:0 + matching border-radius, so the
   parent can stay overflow:visible (orb pops out the top). The streak
   moves via background-position so its bounding box never escapes the card. */
.why__node::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 22px;
  background-image: linear-gradient(
    115deg,
    transparent 0%,
    transparent 38%,
    rgba(255, 255, 255, 0.10) 45%,
    rgba(255, 255, 255, 0.30) 50%,
    rgba(255, 255, 255, 0.10) 55%,
    transparent 62%,
    transparent 100%
  );
  background-size: 260% 100%;
  background-repeat: no-repeat;
  background-position: 180% 0%;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: overlay;
  animation: why-node-sweep 7s ease-in-out infinite;
  opacity: 0.95;
}
.why__node--top::after    { animation-delay: -0.5s; }
.why__node--left::after   { animation-delay: -2.2s; }
.why__node--right::after  { animation-delay: -3.9s; }
.why__node--bottom::after { animation-delay: -5.6s; }

@keyframes why-node-sweep {
  0%   { background-position:  180% 0%; }
  100% { background-position: -180% 0%; }
}

/* Soft accent wash painted under the children */
.why__node > .why__node-glow-bg {
  /* placeholder — we paint the accent corner sweep via an extra child */
}

/* Hover — lifts higher, brighter, accent rim ignites */
.why__node:hover {
  transform: translateY(-12px);
  animation-play-state: paused;
  border-color: rgba(167, 139, 250, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06),
    inset 0 18px 32px -16px rgba(255, 255, 255, 0.28),
    inset 0 -22px 40px -22px rgba(0, 0, 0, 0.6),
    inset 0 0 110px -20px rgba(167, 139, 250, 0.45),
    0 1px 0 rgba(255, 255, 255, 0.10),
    0 36px 70px -22px rgba(0, 0, 0, 0.7),
    0 60px 130px -28px rgba(0, 207, 255, 0.75);
}

/* Keep children above the streak + corner sweep */
.why__node > * { position: relative; z-index: 2; }

.why__orb {
  position: relative;
  width: 92px;
  height: 92px;
  margin-top: -3.1rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 22%, rgba(255,255,255,0.45), transparent 40%),
    radial-gradient(circle at 50% 50%, var(--gaming-accent-light) 0%, var(--gaming-accent) 45%, var(--gaming-accent-dark) 92%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.55),
    inset 0 -6px 16px rgba(0,0,0,0.45),
    inset 0 0 24px rgba(255,255,255,0.08),
    0 0 0 1px rgba(255,255,255,0.18),
    0 14px 30px -8px rgba(0,0,0,0.5),
    0 0 36px var(--gaming-accent-glow-strong),
    0 0 80px var(--gaming-accent-glow);
  color: #fff;
}
.why__orb::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1px solid rgba(167, 139, 250, 0.30);
  pointer-events: none;
  animation: orb-ring 5s ease-in-out infinite;
}
.why__orb::after {
  content: "";
  position: absolute;
  inset: -22px;
  border-radius: 50%;
  border: 1px solid rgba(167, 139, 250, 0.10);
  pointer-events: none;
}
@keyframes orb-ring {
  0%, 100% { transform: scale(1);    opacity: 0.85; }
  50%      { transform: scale(1.05); opacity: 0.45; }
}
.why__orb svg { width: 36px; height: 36px; position: relative; z-index: 2; }

/* Number chip — small, tracked, with hairlines on either side for an
   editorial feel. Each card uses Unbounded so it reads "engineered". */
.why__node-num {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--display);
  font-weight: 500;
  font-size: 0.68rem;
  letter-spacing: 0.32em;
  color: rgba(255, 255, 255, 0.55);
  padding: 0 0.1rem;
}
.why__node-num::before,
.why__node-num::after {
  content: "";
  width: 18px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(167, 139, 250, 0.6), transparent);
}

/* Title — Unbounded is geometric so it doesn't need extra letter-spacing.
   Slightly lighter weight than before, gradient fill for premium feel. */
.why__node-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.55rem;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: #ffffff;
}
.why__node-text {
  font-family: var(--body);
  font-size: 0.92rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.62);
  max-width: 28ch;
}

/* Node positions */
.why__node--top    { grid-column: 2; grid-row: 1; max-width: 360px; justify-self: center; }
.why__node--left   { grid-column: 1; grid-row: 2; max-width: 360px; justify-self: end; }
.why__node--right  { grid-column: 3; grid-row: 2; max-width: 360px; justify-self: start; }
.why__node--bottom { grid-column: 2; grid-row: 3; max-width: 360px; justify-self: center; }

/* === STATUS === */
.status .section__header--split {
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
}
.status__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--body);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--gaming-accent-light);
  transition: gap 0.3s ease;
}
.status__link svg { width: 1rem; height: 1rem; transition: transform 0.3s ease; }
.status__link:hover svg { transform: translateX(4px); }

.status-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.4rem;
  position: relative;
  padding: 1.5rem 0.5rem;
}
/* Soft halo of blue/violet glow behind the entire grid */
.status-grid::before {
  content: "";
  position: absolute;
  inset: -30px -20px;
  background:
    radial-gradient(60% 60% at 50% 50%, rgba(0, 207, 255, 0.22) 0%, transparent 65%),
    radial-gradient(50% 60% at 15% 100%, rgba(56, 96, 220, 0.14) 0%, transparent 65%),
    radial-gradient(50% 60% at 85% 0%, rgba(167, 139, 250, 0.12) 0%, transparent 65%);
  filter: blur(28px);
  z-index: 0;
  pointer-events: none;
}
.status-card {
  position: relative;
  z-index: 1;
  padding: 1.9rem 1.7rem;
  /* Layered glass — barely there body so the grid halo reads through */
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.05) 0%,
      rgba(255, 255, 255, 0.01) 60%,
      rgba(0, 207, 255, 0.025) 100%);
  border: 1px solid rgba(255, 255, 255, 0.085);
  border-radius: 18px;
  backdrop-filter: blur(26px) saturate(170%) brightness(105%);
  -webkit-backdrop-filter: blur(26px) saturate(170%) brightness(105%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(255, 255, 255, 0.03),
    inset 0 0 0 1px rgba(255, 255, 255, 0.02),
    0 18px 50px -22px rgba(0, 0, 0, 0.55),
    0 30px 70px -30px rgba(0, 207, 255, 0.35);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  overflow: hidden;
  transition: transform 0.45s cubic-bezier(.2,.8,.2,1), border-color 0.4s ease, box-shadow 0.45s ease;
}
/* Hairline top rim to fake a refractive glass edge */
.status-card::before {
  content: "";
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);
  pointer-events: none;
}
/* Subtle inner accent corner — soft violet wash */
.status-card::after {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 60%; height: 60%;
  background: radial-gradient(circle at 100% 0%, rgba(167, 139, 250, 0.18) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.status-card > * { position: relative; z-index: 1; }
.status-card:hover {
  transform: translateY(-6px);
  border-color: rgba(167, 139, 250, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05),
    inset 0 0 0 1px rgba(167, 139, 250, 0.10),
    0 30px 80px -22px rgba(0, 0, 0, 0.7),
    0 40px 100px -30px var(--gaming-accent-glow-strong);
}
.status-card__label {
  font-family: var(--display);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.status-card__value {
  font-family: var(--display);
  font-weight: 800;
  font-size: 3rem;
  line-height: 1;
  letter-spacing: -0.025em;
  color: #fff;
  text-shadow: 0 0 30px var(--gaming-accent-glow);
}
.status-card__sym { color: var(--gaming-accent-light); font-weight: 600; }
.status-card__hint {
  font-size: 0.82rem;
  color: var(--gaming-text-muted);
  margin-top: auto;
}
.status-card__bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 9999px;
  overflow: hidden;
  margin-top: 0.5rem;
}
.status-card__bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--gaming-accent-dark), var(--gaming-accent-light));
  border-radius: 9999px;
  box-shadow: 0 0 12px var(--gaming-accent-glow);
}
.status-card--live .status-card__pill { align-self: flex-start; margin-top: 0.4rem; font-size: 0.78rem; }

/* === CTA === */
.cta { padding: var(--section-pad) 0; }
.cta__inner {
  position: relative;
  padding: clamp(60px, 8vw, 110px) clamp(1.5rem, 4vw, 4rem);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 50% 100%, rgba(0,207,255,0.28), transparent 60%),
    var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow: var(--glass-shadow);
  overflow: hidden;
  text-align: center;
}
.cta__inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--gaming-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--gaming-border) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 100%, #000, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 100%, #000, transparent 70%);
}
/* CTA background layers — must come AFTER .cta__inner > * to override position */
.cta__inner > * { position: relative; z-index: 4; }

/* More-specific selectors so position/z-index don't fight the > * rule above */
.cta__inner > .cta__bg,
.cta__inner > .cta__bg-glass {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
}

/* Photo layer */
.cta__inner > .cta__bg {
  z-index: 0;
  background-image: url('second-bg.webp');
  background-image: image-set(url('second-bg.webp') type('image/webp'), url('second-bg.jpg') type('image/jpeg'));
  background-size: cover;
  background-position: center 40%;
  background-repeat: no-repeat;
  animation: cta-bg-drift 26s ease-in-out infinite;
  will-change: transform;
}
@keyframes cta-bg-drift {
  0%, 100% { transform: scale(1.00) translateY(0); }
  50%      { transform: scale(1.04) translateY(-1.2%); }
}

/* Glass + darkening overlay */
.cta__inner > .cta__bg-glass {
  z-index: 1;
  background:
    radial-gradient(ellipse 80% 90% at 50% 50%, transparent 20%, rgba(6,9,18,0.65) 100%),
    linear-gradient(to bottom,
      rgba(6,9,18,0.55) 0%,
      transparent 28%,
      transparent 72%,
      rgba(6,9,18,0.65) 100%
    ),
    linear-gradient(135deg, rgba(0,207,255,0.20) 0%, transparent 50%, rgba(38,21,152,0.15) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 0 100px -20px rgba(0,207,255,0.20);
}
.cta__bg-glass::before {
  content: "";
  position: absolute;
  top: 0; left: 8%; right: 8%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22) 40%, rgba(167,139,250,0.30) 60%, transparent);
  border-radius: 999px;
}

/* Grid dots — on top of glass, below content */
.cta__inner::before { z-index: 2; opacity: 0.35; }

.cta__badge { margin-bottom: 1.5rem; }
.cta__title {
  font-family: var(--hero-title);
  font-weight: 700;
  font-size: clamp(3.1rem, 8.4vw, 7.6rem);
  line-height: 0.9;
  letter-spacing: -0.005em;
  color: #fff;
  text-transform: uppercase;
  margin-bottom: 1.4rem;
  text-shadow: 0 0 60px var(--gaming-accent-glow);
}
.cta__title-dot { color: var(--gaming-accent); text-shadow: 0 0 40px var(--gaming-accent-glow-strong); }
.cta__sub {
  font-size: 1.1rem;
  color: var(--gaming-text-muted);
  margin-bottom: 2.4rem;
  max-width: 480px;
}
.cta__btn { margin: 0; }

/* === FOOTER === Premium-pack inspired tile grid.
   Each tile = black glassy rounded square with its own neon accent color
   (green, orange, magenta, cyan), a colored bottom-glow strip, hairline
   top edge, animated pulse, hover lift, and color-shift on link hover. */
.footer {
  position: relative;
  padding: 5.5rem 0 2.2rem;
  margin-top: 3rem;
  isolation: isolate;
  background:
    radial-gradient(80% 50% at 50% 0%, rgba(0, 207, 255, 0.10), transparent 70%),
    linear-gradient(180deg, #0a0815 0%, #06040f 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer__container {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 1.4rem;
  padding-bottom: 2.6rem;
  position: relative;
  z-index: 1;
}

/* === Tile body === */
.footer__tile {
  position: relative;
  padding: 1.9rem 1.6rem 1.7rem;
  border-radius: 24px;
  /* Black glassy body — like Premium pack tiles */
  background:
    linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.01) 30%, transparent 100%),
    linear-gradient(180deg, #0e0c1a 0%, #07050f 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  isolation: isolate;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 -1px 0 rgba(255, 255, 255, 0.02),
    inset 0 -32px 60px -28px rgba(var(--tile-rgb), 0.55),
    0 18px 40px -20px rgba(0, 0, 0, 0.6),
    0 30px 70px -25px rgba(var(--tile-rgb), 0.40);
  transition:
    transform 0.5s cubic-bezier(.2,.8,.2,1),
    box-shadow 0.5s ease,
    border-color 0.4s ease;
  animation: footer-tile-pulse 4.5s ease-in-out infinite;
}
.footer__tile--brand    { animation-delay:  0s;   }
.footer__tile--product  { animation-delay: -1.1s; }
.footer__tile--support  { animation-delay: -2.2s; }
.footer__tile--legal    { animation-delay: -3.3s; }

@keyframes footer-tile-pulse {
  0%, 100% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.10),
      inset 0 -1px 0 rgba(255, 255, 255, 0.02),
      inset 0 -32px 60px -28px rgba(var(--tile-rgb), 0.55),
      0 18px 40px -20px rgba(0, 0, 0, 0.6),
      0 30px 70px -25px rgba(var(--tile-rgb), 0.40);
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.14),
      inset 0 -1px 0 rgba(255, 255, 255, 0.03),
      inset 0 -36px 70px -25px rgba(var(--tile-rgb), 0.75),
      0 22px 50px -18px rgba(0, 0, 0, 0.65),
      0 40px 90px -22px rgba(var(--tile-rgb), 0.65);
  }
}

/* Top hairline — colored to match tile accent */
.footer__tile::before {
  content: "";
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--tile-rgb), 0.85), transparent);
  pointer-events: none;
  z-index: 3;
}

/* Inner colored radial glow rising from the bottom — like LED strip */
.footer__tile-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 80% at 50% 110%, rgba(var(--tile-rgb), 0.45) 0%, transparent 60%);
  filter: blur(6px);
  pointer-events: none;
  z-index: 0;
}

.footer__tile > * { position: relative; z-index: 2; }

.footer__tile:hover {
  transform: translateY(-5px);
  border-color: rgba(var(--tile-rgb), 0.50);
  animation-play-state: paused;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04),
    inset 0 -36px 70px -22px rgba(var(--tile-rgb), 0.85),
    0 30px 60px -20px rgba(0, 0, 0, 0.7),
    0 50px 110px -22px rgba(var(--tile-rgb), 0.75);
}

/* Numbered chip top-right corner */
.footer__tile-num {
  position: absolute;
  top: 1rem;
  right: 1.1rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.65rem;
  letter-spacing: 0.32em;
  color: rgba(var(--tile-rgb), 0.95);
  text-shadow: 0 0 12px rgba(var(--tile-rgb), 0.7);
  z-index: 3;
}

/* Section title — colored neon glow */
.footer__tile .footer__col-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  text-shadow:
    0 0 14px rgba(var(--tile-rgb), 0.85),
    0 0 28px rgba(var(--tile-rgb), 0.45);
  margin-bottom: 0.45rem;
}

/* Brand-tile specifics */
.footer__tile--brand {
  /* Wider brand tile so the logo + tagline + socials breathe */
  gap: 0.85rem;
}
.footer__tile--brand .footer__logo {
  padding: 0;
  margin-bottom: 0.2rem;
}
.footer__tile--brand .navbar__logo-text {
  color: rgba(var(--tile-rgb), 1);
  text-shadow:
    0 0 18px rgba(var(--tile-rgb), 0.85),
    0 0 36px rgba(var(--tile-rgb), 0.45);
  font-size: 1.1rem;
}
.footer__tile--brand .navbar__logo-mark { display: none; }
.footer__tag {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.5;
  font-weight: 500;
}

/* Animated indicator bar — like the 20000 mAh strip */
.footer__tile-bar {
  margin-top: auto;
  height: 6px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.05);
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.04);
}
.footer__tile-bar span {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 22%;
  background: linear-gradient(90deg,
    rgba(var(--tile-rgb), 0.6) 0%,
    rgba(var(--tile-rgb), 1) 100%);
  border-radius: 9999px;
  box-shadow:
    0 0 10px rgba(var(--tile-rgb), 0.85),
    0 0 22px rgba(var(--tile-rgb), 0.5);
  animation: footer-bar-fill 3.6s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes footer-bar-fill {
  0%, 100% { width: 22%; }
  50%      { width: 92%; }
}

/* Socials — inherit tile color */
.footer__socials { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.2rem; }
.footer__social {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid rgba(var(--tile-rgb), 0.35);
  border-radius: 9999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.01) 100%),
    rgba(var(--tile-rgb), 0.10);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  font-size: 0.82rem;
  font-weight: 600;
  color: #fff;
  transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 6px 18px -8px rgba(0, 0, 0, 0.5),
    0 0 14px rgba(var(--tile-rgb), 0.30);
}
.footer__social svg { width: 14px; height: 14px; }
.footer__social:hover {
  color: #fff;
  border-color: rgba(var(--tile-rgb), 0.7);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.02) 100%),
    rgba(var(--tile-rgb), 0.22);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.40),
    0 10px 26px -8px rgba(var(--tile-rgb), 0.85);
}

/* в”Ђв”Ђ Brand-colored social buttons в”Ђв”Ђ */

/* Discord — #5865F2 blurple */
.footer__social--discord {
  --social-rgb: 88, 101, 242;
  color: rgba(88, 101, 242, 0.9);
  border-color: rgba(88, 101, 242, 0.35);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.01) 100%),
    rgba(88, 101, 242, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 0 14px rgba(88,101,242,0.22);
}
.footer__social--discord:hover {
  color: #fff;
  border-color: rgba(88, 101, 242, 0.8);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.02) 100%),
    rgba(88, 101, 242, 0.38);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    0 8px 24px -6px rgba(88,101,242,0.75);
  transform: translateY(-2px);
}

/* Telegram — #2AABEE */
.footer__social--telegram {
  --social-rgb: 42, 171, 238;
  color: rgba(42, 171, 238, 0.9);
  border-color: rgba(42, 171, 238, 0.35);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.01) 100%),
    rgba(42, 171, 238, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 0 14px rgba(42,171,238,0.22);
}
.footer__social--telegram:hover {
  color: #fff;
  border-color: rgba(42, 171, 238, 0.8);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.02) 100%),
    rgba(42, 171, 238, 0.38);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    0 8px 24px -6px rgba(42,171,238,0.75);
  transform: translateY(-2px);
}

/* ElitePVPers — #C8922A gold/bronze */
.footer__social--epvp {
  --social-rgb: 200, 146, 42;
  color: rgba(220, 170, 60, 0.95);
  border-color: rgba(200, 146, 42, 0.45);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.01) 100%),
    rgba(200, 146, 42, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    0 0 16px rgba(200,146,42,0.28);
}
.footer__social--epvp:hover {
  color: #fff;
  border-color: rgba(200, 146, 42, 0.85);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.02) 100%),
    rgba(200, 146, 42, 0.40);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.38),
    0 8px 24px -6px rgba(200,146,42,0.80);
  transform: translateY(-2px);
}

/* Links — color-shift to tile color on hover */
.footer__tile .footer__link {
  display: inline-flex;
  align-items: center;
  font-size: 0.94rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.25s ease, transform 0.25s ease, text-shadow 0.25s ease;
  width: fit-content;
  position: relative;
}
.footer__tile .footer__link::before {
  content: "\203A";
  display: inline-block;
  margin-right: 0.45rem;
  color: rgba(var(--tile-rgb), 0.9);
  font-weight: 700;
  transform: translateX(0);
  transition: transform 0.25s ease, color 0.25s ease;
}
.footer__tile .footer__link:hover {
  color: rgba(var(--tile-rgb), 1);
  text-shadow: 0 0 10px rgba(var(--tile-rgb), 0.55);
  transform: translateX(2px);
}
.footer__tile .footer__link:hover::before {
  transform: translateX(2px);
}

.footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.45rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.82rem;
  color: var(--gaming-text-dim);
  font-family: var(--body);
  letter-spacing: 0.04em;
  position: relative;
  z-index: 2;
}
.footer__bottom-meta {
  font-family: var(--display);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

/* =====================================================
   BENTO GRID — Why Choose Sapphire
   6-column base grid — cards span 2 cols each = 3 per row
   Middle info row: 2+2+2 cols
   Stat row: 2+2+2 cols
   ===================================================== */
.whybento { padding: var(--section-pad) 0; }

.whybento__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
  margin-top: 2.5rem;
}

/* Top visual cards — 2 cols each = 3 per row */
.wbc--feat { grid-column: span 2; }

/* Info cards — 2 cols each = 3 per row; last 2 span 3 to fill row */
.wbc--info { grid-column: span 2; }
.wbc--info--wide { grid-column: span 3; }

/* Stat cards — 2 cols each = 3 per row */
.wbc--stat { grid-column: span 2; }

/* в”Ђв”Ђ Base card shell в”Ђв”Ђ */
.wbc {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(160deg, #0c1022 0%, #080d1c 60%, #070b18 100%);
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1), border-color 0.3s, box-shadow 0.4s;
}
.wbc:hover {
  transform: translateY(-6px);
  border-color: rgba(0,207,255,0.35);
  box-shadow: 0 24px 60px -20px rgba(38,21,152,0.50);
}
/* top highlight */
.wbc::before {
  content: "";
  position: absolute;
  top: 0; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18) 50%, transparent);
  pointer-events: none; z-index: 2;
}

/* в”Ђв”Ђ FEATURE CARD (top row) в”Ђв”Ђ */
.wbc--feat {
  display: flex;
  flex-direction: column;
}

/* Visual area — fills top ~55% */
.wbc__visual {
  position: relative;
  flex: 0 0 220px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Text area */
.wbc__body {
  padding: 1.6rem 1.8rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.wbc__title {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.45rem;
  line-height: 1.1;
  color: #fff;
  letter-spacing: -0.01em;
}
.wbc__text {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--gaming-text-muted);
}

/* в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ
   VISUAL 1 — Floating game tags
   в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.wbc__visual--tags {
  background: radial-gradient(ellipse 80% 70% at 50% 60%, rgba(38,21,152,0.30), transparent 70%);
  padding: 1.5rem;
}
.wbtag {
  position: absolute;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(255,255,255,0.75);
  white-space: nowrap;
  left: var(--x, 10%);
  top: var(--y, 10%);
  transform: rotate(var(--r, 0deg));
  transition: background 0.3s, color 0.3s;
}
.wbtag--dim { opacity: 0.5; }
.wbc:hover .wbtag { background: rgba(0,207,255,0.18); color: rgba(255,255,255,0.9); }

/* в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ
   VISUAL 2 — Glowing crosshair
   в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.wbc__visual--target {
  background: radial-gradient(ellipse 80% 80% at 50% 50%, rgba(0,207,255,0.12), transparent 65%);
}
.wbt__svg {
  width: 160px; height: 160px;
  filter: drop-shadow(0 0 12px rgba(167,139,250,0.5));
  animation: target-pulse 3.5s ease-in-out infinite;
}
@keyframes target-pulse {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(167,139,250,0.45)); }
  50%       { filter: drop-shadow(0 0 22px rgba(167,139,250,0.80)); }
}
.wbt__glow {
  position: absolute;
  width: 180px; height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,207,255,0.22) 0%, transparent 65%);
  pointer-events: none;
}

/* в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ
   VISUAL 3 — Concentric rings
   в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.wbc__visual--rings {
  background: radial-gradient(ellipse 80% 80% at 50% 50%, rgba(38,21,152,0.28), transparent 65%);
}
.wbr__ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(0,207,255,0.25);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
.wbr__ring--1 { width: 72px;  height: 72px;  border-color: rgba(167,139,250,0.55); }
.wbr__ring--2 { width: 106px; height: 106px; border-color: rgba(0,207,255,0.35); }
.wbr__ring--3 { width: 144px; height: 144px; border-color: rgba(0,207,255,0.20); }
.wbr__ring--4 { width: 185px; height: 185px; border-color: rgba(0,207,255,0.10); }
.wbr__ring--1 { animation: ring-breathe 4s ease-in-out infinite; }
.wbr__ring--2 { animation: ring-breathe 4s ease-in-out infinite 0.4s; }
.wbr__ring--3 { animation: ring-breathe 4s ease-in-out infinite 0.8s; }
.wbr__ring--4 { animation: ring-breathe 4s ease-in-out infinite 1.2s; }
@keyframes ring-breathe {
  0%, 100% { opacity: 1; transform: translate(-50%,-50%) scale(1); }
  50%       { opacity: 0.6; transform: translate(-50%,-50%) scale(1.04); }
}
.wbr__core {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 52px; height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(0,207,255,0.6), rgba(38,21,152,0.8));
  border: 1px solid rgba(167,139,250,0.4);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 24px rgba(0,207,255,0.6);
  color: #fff;
}
.wbr__core svg { width: 22px; height: 22px; }

/* в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ
   INFO CARD (middle row)
   в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.wbc--info {
  padding: 1.6rem 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.wbc__icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.wbc__icon svg { width: 20px; height: 20px; }
.wbc__icon--green  { background: rgba(16,217,160,0.14); color: #10D9A0; border: 1px solid rgba(16,217,160,0.25); }
.wbc__icon--blue   { background: rgba(26,106,255,0.14); color: #3d85ff; border: 1px solid rgba(26,106,255,0.25); }
.wbc__icon--purple { background: rgba(0,207,255,0.18); color: #A78BFA; border: 1px solid rgba(167,139,250,0.28); }
.wbc__icon--gold   { background: rgba(245,158,11,0.14); color: #FBBF24; border: 1px solid rgba(245,158,11,0.25); }
.wbc__icon--red    { background: rgba(255,77,109,0.14); color: #FF4D6D; border: 1px solid rgba(255,77,109,0.25); }
.wbc__icon--cyan   { background: rgba(34,211,238,0.13); color: #22D3EE; border: 1px solid rgba(34,211,238,0.25); }

/* в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ
   VISUAL 4 — Lightning bolt (Instant Delivery)
   в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.wbc__visual--bolt {
  background: radial-gradient(ellipse 80% 80% at 50% 50%, rgba(245,158,11,0.10), transparent 65%);
}
.wbb__svg {
  width: 160px; height: 160px;
  filter: drop-shadow(0 0 14px rgba(251,191,36,0.50));
  animation: bolt-pulse 3s ease-in-out infinite;
}
@keyframes bolt-pulse {
  0%, 100% { filter: drop-shadow(0 0 12px rgba(251,191,36,0.42)); }
  50%       { filter: drop-shadow(0 0 28px rgba(251,191,36,0.88)); }
}
.wbb__glow {
  position: absolute;
  width: 170px; height: 170px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245,158,11,0.15) 0%, transparent 65%);
  pointer-events: none;
}

/* в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ
   VISUAL 5 — Activity calendar (Daily Updates)
   в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.wbc__visual--cal {
  background: radial-gradient(ellipse 80% 80% at 50% 50%, rgba(16,217,160,0.07), transparent 65%);
}
.wbcal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 7px;
  padding: 1.2rem 1.4rem;
}
.wbcal__dot {
  width: 20px; height: 20px;
  border-radius: 5px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.07);
}
.wbcal__dot--on {
  background: rgba(16,217,160,0.20);
  border-color: rgba(16,217,160,0.38);
  box-shadow: 0 0 5px rgba(16,217,160,0.18);
}
.wbcal__dot--today {
  background: rgba(16,217,160,0.65);
  border-color: rgba(16,217,160,0.90);
  box-shadow: 0 0 10px rgba(16,217,160,0.55);
}

/* в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ
   VISUAL 6 — Price tags (Fair Pricing)
   в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.wbc__visual--price {
  background: radial-gradient(ellipse 80% 70% at 50% 60%, rgba(16,217,160,0.10), transparent 70%);
  padding: 1.5rem;
}
.wbprice {
  position: absolute;
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  background: rgba(16,217,160,0.09);
  border: 1px solid rgba(16,217,160,0.22);
  font-size: 0.82rem;
  font-weight: 700;
  font-family: var(--display);
  color: rgba(16,217,160,0.88);
  white-space: nowrap;
  left: var(--x, 10%);
  top: var(--y, 10%);
  transform: rotate(var(--r, 0deg));
  letter-spacing: -0.01em;
}
.wbprice span {
  font-family: var(--body);
  font-weight: 400;
  font-size: 0.70rem;
  opacity: 0.65;
  margin-left: 1px;
}
.wbprice--dim { opacity: 0.45; }
.wbc:hover .wbprice { background: rgba(16,217,160,0.16); border-color: rgba(16,217,160,0.42); }

/* в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ
   STAT CARD (bottom row)
   в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.wbc--stat {
  padding: 2.2rem 2rem 1.8rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.5rem;
  min-height: 160px;
}

/* Blue shimmer sweep background */
.wbc__shimmer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 120% 80% at 20% 110%, rgba(26,106,255,0.42), transparent 55%),
    radial-gradient(ellipse 80% 60% at 85% -10%, rgba(0,207,255,0.18), transparent 50%);
  animation: shimmer-drift 6s ease-in-out infinite;
}
.wbc--stat:nth-child(5) .wbc__shimmer { animation-delay: -2s; }
.wbc--stat:nth-child(6) .wbc__shimmer { animation-delay: -4s; }
@keyframes shimmer-drift {
  0%, 100% { opacity: 0.85; transform: scale(1) translateX(0); }
  50%       { opacity: 1;    transform: scale(1.05) translateX(4%); }
}

.wbc__num {
  position: relative; z-index: 1;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(2.6rem, 5vw, 4rem);
  line-height: 1;
  color: #fff;
  letter-spacing: -0.03em;
}
.wbc__num em {
  font-style: normal;
  font-size: 0.55em;
  font-weight: 700;
  color: rgba(255,255,255,0.65);
  vertical-align: super;
  margin-left: 2px;
}
.wbc__label {
  position: relative; z-index: 1;
  font-size: 0.82rem;
  color: var(--gaming-text-dim);
  line-height: 1.4;
}

/* === FEATURES GRID === Designed blocks, separation, glass + glow.
   Six guarantees in a 3Г—2 grid. Each card has a hero icon, accent ring,
   numbered chip, and bottom-aligned bottom glow strip. */
.features { padding: var(--section-pad) 0; }
.section__header--center {
  text-align: center;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
}
.section__header--center .section__sub { margin-left: auto; margin-right: auto; }

/* 4-column override for Why Choose section — combined selector beats .features__grid alone */
.features__grid.features__grid--4col {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1024px) { .features__grid.features__grid--4col { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .features__grid.features__grid--4col { grid-template-columns: 1fr; } }

.features__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
  margin-top: 3rem;
  position: relative;
}
/* Soft halo behind the entire grid */
.features__grid::before {
  content: "";
  position: absolute;
  inset: -40px -10px;
  background:
    radial-gradient(50% 50% at 50% 50%, rgba(0, 207, 255, 0.18) 0%, transparent 65%),
    radial-gradient(40% 50% at 15% 100%, rgba(56, 96, 220, 0.12) 0%, transparent 65%),
    radial-gradient(40% 50% at 85% 0%, rgba(167, 139, 250, 0.12) 0%, transparent 65%);
  filter: blur(36px);
  z-index: 0;
  pointer-events: none;
}

.feature-card {
  position: relative;
  z-index: 1;
  padding: 2.4rem 2rem 2.2rem;
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.08) 0%,
      rgba(255, 255, 255, 0.02) 40%,
      rgba(167, 139, 250, 0.04) 100%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 22px;
  backdrop-filter: blur(26px) saturate(170%) brightness(105%);
  -webkit-backdrop-filter: blur(26px) saturate(170%) brightness(105%);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  isolation: isolate;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04),
    inset 0 18px 32px -18px rgba(255, 255, 255, 0.20),
    inset 0 -32px 60px -30px rgba(167, 139, 250, 0.45),
    0 24px 50px -22px rgba(0, 0, 0, 0.55),
    0 50px 100px -38px rgba(167, 139, 250, 0.65);
  transition: transform 0.5s cubic-bezier(.2,.8,.2,1), border-color 0.4s ease, box-shadow 0.45s ease;
}
/* Hairline top edge + corner sweep */
.feature-card::before {
  content: "";
  position: absolute;
  top: 0; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65), transparent);
  pointer-events: none;
  z-index: 3;
}
.feature-card::after {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 60%; height: 60%;
  background: radial-gradient(circle at 100% 0%, rgba(167, 139, 250, 0.20) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.feature-card > * { position: relative; z-index: 2; }
.feature-card:hover {
  transform: translateY(-8px);
  border-color: rgba(167, 139, 250, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.40),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -32px 60px -30px rgba(167, 139, 250, 0.55),
    0 30px 70px -22px rgba(0, 0, 0, 0.7),
    0 70px 140px -40px var(--gaming-accent-glow-strong);
}
.feature-card__icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.45), transparent 50%),
    linear-gradient(140deg, var(--gaming-accent-light) 0%, var(--gaming-accent) 55%, var(--gaming-accent-dark) 100%);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -3px 10px rgba(0, 0, 0, 0.4),
    0 8px 24px -6px rgba(0, 0, 0, 0.5),
    0 0 28px var(--gaming-accent-glow-strong);
}
.feature-card__icon svg { width: 32px; height: 32px; }
.feature-card__num {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.66rem;
  letter-spacing: 0.32em;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
}
.feature-card__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.55rem;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: #fff;
  text-transform: uppercase;
  margin-top: 0.1rem;
}
.feature-card__text {
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.62);
  margin-top: 0.2rem;
}

/* === GLASS FEATURE CARD (Why Choose section) === */
.feature-card--glass {
  background: linear-gradient(160deg, rgba(255,255,255,0.065) 0%, rgba(255,255,255,0.018) 50%, rgba(0,207,255,0.07) 100%);
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 1.6rem 1.4rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.14) inset,
    0 20px 50px -20px rgba(0,0,0,0.55),
    0 30px 70px -30px rgba(0,207,255,0.18);
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1), border-color 0.3s, box-shadow 0.4s;
}
.feature-card--glass::after {
  content: "";
  position: absolute;
  bottom: 0; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,207,255,0.55), transparent);
  border-radius: 999px;
}
.feature-card--glass:hover {
  transform: translateY(-6px);
  border-color: rgba(167,139,250,0.35);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.2) inset,
    0 30px 70px -20px rgba(0,0,0,0.65),
    0 50px 100px -30px rgba(0,207,255,0.38);
}
.feature-card--glass .feature-card__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.15;
  color: #fff;
  letter-spacing: 0.01em;
  text-transform: none;
  margin-top: 0;
}
.feature-card--glass .feature-card__text {
  font-size: 0.84rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.5;
  margin-top: 0;
}

/* Visual area inside glass cards */
.feature-card__visual {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 72px;
}

/* Ring widget — 100% circle */
.feature-card__ring {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: conic-gradient(var(--gaming-success) 100%, rgba(255,255,255,0.1) 0%);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 20px rgba(16,217,160,0.45);
  position: relative;
}
.feature-card__ring::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: #0a0d17;
}
.feature-card__ring-pct {
  position: relative;
  z-index: 1;
  font-family: var(--display);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--gaming-success);
}

/* Icon wrap — default accent */
.feature-card__icon-wrap {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(0,207,255,0.5), rgba(0,207,255,0.2));
  border: 1px solid rgba(167,139,250,0.3);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 24px rgba(0,207,255,0.4);
  color: var(--gaming-accent-light);
}
.feature-card__icon-wrap svg { width: 22px; height: 22px; }
.feature-card__icon-wrap--blue {
  background: linear-gradient(135deg, rgba(26,106,255,0.5), rgba(26,106,255,0.2));
  border-color: rgba(61,133,255,0.35);
  box-shadow: 0 0 24px rgba(26,106,255,0.4);
  color: #3d85ff;
}

/* Dashboard visual */
.feature-card__visual--dash { flex-direction: column; gap: 0.45rem; align-items: flex-start; width: 100%; }
.fc-dash__bar {
  height: 8px;
  border-radius: 4px;
  background: rgba(255,255,255,0.12);
}
.fc-dash__bar--wide { width: 85%; background: var(--gaming-accent); opacity: 0.7; }
.fc-dash__bar--sm { width: 28%; }
.fc-dash__row { display: flex; gap: 0.4rem; }

/* Toggle list visual */
.fc-toggles { display: flex; flex-direction: column; gap: 0.3rem; width: 100%; }
.fc-toggle { display: flex; align-items: center; justify-content: space-between; font-size: 0.75rem; color: rgba(255,255,255,0.55); }
.fc-toggle--on { color: rgba(255,255,255,0.85); }
.fc-toggle__track {
  width: 28px; height: 15px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  position: relative;
  flex-shrink: 0;
}
.fc-toggle__track.on { background: var(--gaming-accent); }
.fc-toggle__track::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  transition: left 0.2s;
}
.fc-toggle__track.on::after { left: 15px; background: #fff; }

/* Payment badges visual */
.feature-card__visual--payments { flex-wrap: wrap; gap: 0.35rem; justify-content: flex-start; }
.fc-pay-badge {
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  font-size: 0.7rem;
  color: rgba(255,255,255,0.65);
}

/* Big percentage */
.feature-card__big-pct {
  font-family: var(--display);
  font-size: 2rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.03em;
  text-shadow: 0 0 30px rgba(255,255,255,0.3);
}

/* Pricing row */
.feature-card__visual--pricing { width: 100%; justify-content: flex-start; }
.fc-price-row { display: flex; gap: 0.3rem; width: 100%; }
.fc-price-opt {
  flex: 1;
  text-align: center;
  padding: 0.3rem 0.2rem;
  border-radius: 6px;
  font-size: 0.68rem;
  color: var(--gaming-text-dim);
  background: rgba(255,255,255,0.06);
  border: 1px solid transparent;
}
.fc-price-opt--active {
  background: var(--gaming-accent);
  color: #fff;
  border-color: rgba(167,139,250,0.4);
  font-weight: 700;
  position: relative;
}
.fc-price-opt--active em {
  display: block;
  font-style: normal;
  font-size: 0.6rem;
  opacity: 0.8;
}

/* === CATALOG GRID === Full library of games & spoofers.
   Each tile is colored by --tile-rgb, with: count badge, gradient icon block,
   game name in Mortend/Unbounded uppercase, type subtitle, and a › arrow.
   Hover lifts the tile and lights its accent border. */
.catalog { padding: var(--section-pad) 0 calc(var(--section-pad) - 30px); }
.catalog__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.1rem;
  margin-top: 3rem;
  position: relative;
}
.catalog__grid::before {
  content: "";
  position: absolute;
  inset: -40px -20px;
  background:
    radial-gradient(60% 50% at 30% 30%, rgba(167, 139, 250, 0.10), transparent 70%),
    radial-gradient(50% 50% at 80% 80%, rgba(56, 189, 248, 0.08), transparent 70%);
  filter: blur(18px);
  z-index: -1;
  pointer-events: none;
}

.game-tile {
  --tile-rgb: 167, 139, 250;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 1.4rem 1.4rem 1.5rem;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.012) 100%),
    rgba(15, 12, 30, 0.55);
  border: 1px solid rgba(var(--tile-rgb), 0.18);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  text-decoration: none;
  color: #fff;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
              border-color 0.35s ease,
              box-shadow 0.35s ease;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 8px 24px -16px rgba(0, 0, 0, 0.6);
}
.game-tile::before {
  /* Top accent strip */
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(var(--tile-rgb), 0.35) 20%,
    rgba(var(--tile-rgb), 0.95) 50%,
    rgba(var(--tile-rgb), 0.35) 80%,
    transparent 100%);
  opacity: 0.7;
  transition: opacity 0.35s ease;
}
.game-tile::after {
  /* Bottom radial glow that intensifies on hover */
  content: "";
  position: absolute;
  left: 50%;
  bottom: -40px;
  width: 70%;
  height: 70px;
  transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 0%, rgba(var(--tile-rgb), 0.45), transparent 70%);
  opacity: 0.55;
  filter: blur(8px);
  pointer-events: none;
  transition: opacity 0.4s ease, bottom 0.4s ease;
}
.game-tile:hover {
  transform: translateY(-6px);
  border-color: rgba(var(--tile-rgb), 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 18px 50px -22px rgba(var(--tile-rgb), 0.65),
    0 0 0 1px rgba(var(--tile-rgb), 0.18);
}
.game-tile:hover::before { opacity: 1; }
.game-tile:hover::after { opacity: 1; bottom: -20px; }

.game-tile__count {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-family: var(--display);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.32rem 0.65rem;
  border-radius: 999px;
  background: rgba(var(--tile-rgb), 0.14);
  color: rgba(var(--tile-rgb), 1);
  border: 1px solid rgba(var(--tile-rgb), 0.32);
  box-shadow: 0 0 14px -4px rgba(var(--tile-rgb), 0.55);
}
.game-tile__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background:
    linear-gradient(140deg, rgba(var(--tile-rgb), 0.32), rgba(var(--tile-rgb), 0.08) 60%, transparent),
    rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(var(--tile-rgb), 0.28);
  color: rgba(var(--tile-rgb), 1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 6px 20px -10px rgba(var(--tile-rgb), 0.55);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.game-tile__icon svg { width: 28px; height: 28px; }
.game-tile:hover .game-tile__icon {
  transform: rotate(-4deg) scale(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 12px 32px -10px rgba(var(--tile-rgb), 0.85);
}

.game-tile__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.08rem;
  line-height: 1.05;
  letter-spacing: -0.005em;
  color: #fff;
  text-transform: uppercase;
  margin-top: 0.25rem;
}
.game-tile__tags {
  font-size: 0.78rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.5);
}
.game-tile__arrow {
  position: absolute;
  right: 1.1rem;
  bottom: 1rem;
  font-family: var(--display);
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 1;
  color: rgba(var(--tile-rgb), 0.7);
  transition: transform 0.35s ease, color 0.35s ease;
}
.game-tile:hover .game-tile__arrow {
  color: rgba(var(--tile-rgb), 1);
  transform: translateX(4px);
}

/* Special tile — HWID Spoofers — heavier accent */
.game-tile--special {
  background:
    linear-gradient(180deg, rgba(var(--tile-rgb), 0.10) 0%, rgba(var(--tile-rgb), 0.03) 100%),
    rgba(15, 12, 30, 0.65);
  border-color: rgba(var(--tile-rgb), 0.32);
}
.game-tile--special .game-tile__icon {
  background:
    linear-gradient(140deg, rgba(var(--tile-rgb), 0.45), rgba(var(--tile-rgb), 0.12) 60%, transparent),
    rgba(255, 255, 255, 0.02);
}

.catalog__foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  margin-top: 2.6rem;
}
.catalog__foot-note {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gaming-text-dim);
}

/* OwlCarousel theme reset (we draw our own controls) */
.owl-nav, .owl-dots { display: none !important; /* legitimate — overrides OwlCarousel */ }

/* ---------- 6. MEDIA QUERIES ---------- */

@media (max-width: 1200px) {
  .navbar__nav,
  .navbar__cta,
  .navbar__signin { display: none; }
  .menu__opener { display: inline-flex; }
}

@media (max-width: 1024px) {
  .whybento__grid { grid-template-columns: repeat(4, 1fr); }
  .wbc--feat, .wbc--info, .wbc--stat { grid-column: span 2; }
  .wbc__visual { flex: 0 0 180px; }
  .status-grid { grid-template-columns: repeat(2, 1fr); }
  .features__grid { grid-template-columns: repeat(2, 1fr); }
  .catalog__grid { grid-template-columns: repeat(3, 1fr); }
  .footer__container { grid-template-columns: repeat(2, 1fr); }
  .footer__tile--brand { grid-column: 1 / -1; }
  .status .section__header--split { flex-direction: column; align-items: flex-start; gap: 1.2rem; }

  /* Why diagram в†’ vertical stack on tablet */
  .why__diagram {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto auto;
    gap: 1.6rem;
  }
  .why__center      { grid-column: 1; grid-row: 3; }
  .why__node--top   { grid-column: 1; grid-row: 1; max-width: 480px; justify-self: center; }
  .why__node--left  { grid-column: 1; grid-row: 2; max-width: 480px; justify-self: center; }
  .why__node--right  { grid-column: 1; grid-row: 4; max-width: 480px; justify-self: center; }
  .why__node--bottom { grid-column: 1; grid-row: 5; max-width: 480px; justify-self: center; }
  .why__lines { display: none; } /* desktop connector paths make no sense stacked */
}

/* =====================================================
   TRUST BAR
   ===================================================== */
.trust-bar {
  position: relative;
  z-index: 2;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background:
    linear-gradient(90deg, rgba(0,207,255,0.06) 0%, transparent 30%, transparent 70%, rgba(0,207,255,0.06) 100%),
    rgba(255,255,255,0.02);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.trust-bar__list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.trust-bar__list::-webkit-scrollbar { display: none; }
.trust-bar__item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 1.4rem;
  flex-shrink: 0;
  border-right: 1px solid rgba(255,255,255,0.06);
  flex: 1;
  justify-content: center;
}
.trust-bar__item:last-child { border-right: none; }
.trust-bar__item svg {
  width: 18px; height: 18px;
  color: var(--gaming-accent-light);
  flex-shrink: 0;
  opacity: 0.80;
}
.trust-bar__num {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.82rem;
  color: #fff;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.trust-bar__label {
  font-size: 0.75rem;
  color: var(--gaming-text-dim);
  white-space: nowrap;
}
.trust-bar__item--status .trust-bar__num { color: var(--gaming-success); }
.trust-bar__item--status .trust-bar__dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gaming-success);
  box-shadow: 0 0 8px rgba(16,217,160,0.7);
  animation: trust-pulse 2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes trust-pulse {
  0%, 100% { box-shadow: 0 0 6px rgba(16,217,160,0.6); }
  50%       { box-shadow: 0 0 14px rgba(16,217,160,1.0); }
}
@media (max-width: 900px) {
  .trust-bar__item { padding: 0.85rem 0.9rem; }
  .trust-bar__label { display: none; }
}
@media (max-width: 600px) {
  .trust-bar__list { justify-content: flex-start; }
  .trust-bar__item { padding: 0.75rem 0.9rem; flex: 0 0 auto; }
}

/* =====================================================
   HOW IT WORKS
   ===================================================== */
.howto { padding: var(--section-pad) 0; }
.howto__steps {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 1.2rem;
  margin-top: 3rem;
}
.howto__step {
  position: relative;
  padding: 2.2rem 2rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 40%, rgba(0,207,255,0.05) 100%);
  border: 1px solid rgba(255,255,255,0.09);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.20), 0 18px 50px -22px rgba(0,0,0,0.55), 0 28px 70px -28px rgba(0,207,255,0.28);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1), border-color 0.35s, box-shadow 0.4s;
}
.howto__step::before {
  content: "";
  position: absolute;
  top: 0; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
  pointer-events: none;
}
.howto__step:hover {
  transform: translateY(-6px);
  border-color: rgba(0,207,255,0.40);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 28px 70px -20px rgba(0,0,0,0.65), 0 40px 90px -24px rgba(0,207,255,0.50);
}
.howto__step-num {
  font-family: var(--display);
  font-weight: 900;
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gaming-accent-light);
  opacity: 0.70;
}
.howto__step-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: rgba(0,207,255,0.16);
  border: 1px solid rgba(167,139,250,0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gaming-accent-light);
  box-shadow: 0 0 18px rgba(0,207,255,0.25);
}
.howto__step-icon svg { width: 22px; height: 22px; }
.howto__step-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  color: #fff;
  line-height: 1.25;
}
.howto__step-text {
  font-size: 0.875rem;
  color: var(--gaming-text-muted);
  line-height: 1.6;
}
.howto__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(167,139,250,0.40);
  flex-shrink: 0;
}
.howto__arrow svg { width: 48px; height: 24px; }
@media (max-width: 900px) {
  .howto__steps { grid-template-columns: 1fr; gap: 0.8rem; }
  .howto__arrow { transform: rotate(90deg); margin: -0.2rem auto; }
  .howto__arrow svg { width: 32px; height: 16px; }
}

/* =====================================================
   REVIEWS
   ===================================================== */
.reviews { padding: var(--section-pad) 0; }
.reviews__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  margin-top: 3rem;
}
.review-card {
  position: relative;
  padding: 1.7rem 1.6rem;
  border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.015) 50%, rgba(0,207,255,0.04) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 14px 40px -18px rgba(0,0,0,0.50);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1), border-color 0.3s;
}
.review-card::before {
  content: "";
  position: absolute;
  top: 0; left: 8%; right: 8%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.40), transparent);
  pointer-events: none;
}
.review-card:hover { transform: translateY(-4px); border-color: rgba(0,207,255,0.30); }
.review-card__head { display: flex; align-items: flex-start; gap: 0.9rem; }
.review-card__avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.35), transparent 55%), linear-gradient(135deg, rgba(var(--av-rgb),0.8), rgba(var(--av-rgb),0.4));
  border: 1px solid rgba(var(--av-rgb),0.45);
  box-shadow: 0 0 16px rgba(var(--av-rgb),0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1rem;
  color: #fff;
  flex-shrink: 0;
}
.review-card__name { font-weight: 700; font-size: 0.92rem; color: #fff; line-height: 1.3; }
.review-card__game { font-size: 0.78rem; color: var(--gaming-text-dim); margin-top: 0.15rem; }
.review-card__stars { margin-left: auto; color: #FBBF24; font-size: 0.85rem; letter-spacing: 1px; flex-shrink: 0; }
.review-card__text { font-size: 0.875rem; color: rgba(255,255,255,0.72); line-height: 1.65; flex: 1; }
.review-card__foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
.review-card__source {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
}
.review-card__source--discord {
  background: rgba(88,101,242,0.16);
  border: 1px solid rgba(88,101,242,0.35);
  color: rgba(148,158,255,0.95);
}
.review-card__date { font-size: 0.75rem; color: var(--gaming-text-dim); }
.reviews__foot { margin-top: 2.2rem; text-align: center; }
.reviews__all-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--gaming-accent-light);
  border: 1px solid rgba(167,139,250,0.30);
  padding: 0.7rem 1.6rem;
  border-radius: 999px;
  background: rgba(0,207,255,0.08);
  backdrop-filter: blur(10px);
  transition: background 0.3s, border-color 0.3s, box-shadow 0.3s, transform 0.3s;
  text-decoration: none;
}
.reviews__all-link svg { width: 16px; height: 16px; transition: transform 0.3s; }
.reviews__all-link:hover {
  background: rgba(0,207,255,0.18);
  border-color: rgba(167,139,250,0.60);
  box-shadow: 0 0 28px rgba(0,207,255,0.35);
  transform: translateY(-2px);
}
.reviews__all-link:hover svg { transform: translateX(4px); }
@media (max-width: 1024px) { .reviews__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .reviews__grid { grid-template-columns: 1fr; } }

/* =====================================================
   DISCORD CTA
   ===================================================== */
.discord-section { padding: var(--section-pad) 0; }
.discord-inner {
  position: relative;
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3.5rem);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(ellipse 80% 100% at 10% 50%, rgba(88,101,242,0.16), transparent 55%),
    linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.01) 50%, rgba(88,101,242,0.07) 100%);
  border: 1px solid rgba(88,101,242,0.25);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 20px 60px -22px rgba(0,0,0,0.60), 0 30px 90px -28px rgba(88,101,242,0.40);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
}
.discord-inner::before {
  content: "";
  position: absolute;
  top: 0; left: 8%; right: 8%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(148,158,255,0.45) 40%, rgba(88,101,242,0.55) 60%, transparent);
  pointer-events: none;
}
.discord-inner__bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 80% at 90% 50%, rgba(88,101,242,0.10), transparent 60%),
    radial-gradient(ellipse 40% 60% at 5% 20%, rgba(0,207,255,0.12), transparent 55%);
}
.discord-inner__content { flex: 1; min-width: 0; }
.discord-inner__eyebrow {
  display: inline-block;
  font-family: var(--display);
  font-size: 0.70rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(148,158,255,0.85);
  margin-bottom: 0.85rem;
}
.discord-inner__title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  color: #fff;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 0.7rem;
}
.discord-inner__sub {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.60);
  max-width: 460px;
  line-height: 1.6;
  margin-bottom: 1.6rem;
}
.discord-inner__stats { display: flex; gap: 2rem; flex-wrap: wrap; }
.discord-stat { display: flex; flex-direction: column; gap: 0.15rem; }
.discord-stat__num {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.4rem;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1;
}
.discord-stat__label { font-size: 0.75rem; color: var(--gaming-text-dim); letter-spacing: 0.04em; }
.discord-inner__actions { display: flex; flex-direction: column; align-items: center; gap: 0.8rem; flex-shrink: 0; }
.btn-discord {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.9rem 1.8rem;
  border-radius: var(--radius-pill);
  font-family: var(--body);
  font-weight: 700;
  font-size: 0.95rem;
  color: #fff;
  background: linear-gradient(135deg, #5865F2 0%, #4752c4 100%);
  border: 1px solid rgba(148,158,255,0.40);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 8px 28px -8px rgba(88,101,242,0.70), 0 0 40px rgba(88,101,242,0.25);
  transition: transform 0.3s cubic-bezier(.2,.8,.2,1), box-shadow 0.3s;
  white-space: nowrap;
  text-decoration: none;
}
.btn-discord svg { width: 20px; height: 20px; flex-shrink: 0; }
.btn-discord:hover {
  transform: translateY(-3px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 14px 40px -8px rgba(88,101,242,0.85), 0 0 60px rgba(88,101,242,0.40);
}
.discord-inner__note { font-size: 0.78rem; color: var(--gaming-text-dim); text-align: center; }
@media (max-width: 860px) {
  .discord-inner { flex-direction: column; text-align: center; gap: 2rem; }
  .discord-inner__stats { justify-content: center; }
  .discord-inner__sub { margin-left: auto; margin-right: auto; }
}

/* =====================================================
   BENTO GRID tablet/mobile
   ===================================================== */
@media (max-width: 640px) {
  .wbc--feat, .wbc--info { grid-column: span 1; }
  .whybento__grid { grid-template-columns: 1fr; }
}

/* =====================================================
   GAME FILTER TABS
   ===================================================== */
.game-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.8rem 0 1.4rem;
}
.game-filter__btn {
  padding: 0.45rem 1.1rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.55);
  font-family: var(--body);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
  white-space: nowrap;
}
.game-filter__btn:hover {
  background: rgba(0,207,255,0.16);
  border-color: rgba(167,139,250,0.35);
  color: rgba(255,255,255,0.85);
}
.game-filter__btn.active {
  background: rgba(0,207,255,0.28);
  border-color: rgba(167,139,250,0.55);
  color: #fff;
  box-shadow: 0 0 18px rgba(0,207,255,0.35);
}

/* в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ
   GAME LIBRARY GRID
в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ */
.gamelibrary { background: transparent; }

.gamelibrary__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.85rem;
  margin-top: 2.8rem;
}

.gl-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 1.2rem 1.1rem 1rem;
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  text-decoration: none;
  color: #fff;
  cursor: pointer;
  transition: background 0.22s, border-color 0.22s, transform 0.22s, box-shadow 0.22s;
  overflow: hidden;
}

.gl-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg,
    rgba(var(--gl-rgb),0.12) 0%,
    transparent 60%);
  pointer-events: none;
}

.gl-tile::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  border-radius: inherit;
  background: linear-gradient(90deg,
    rgba(var(--gl-rgb),0.8),
    rgba(var(--gl-rgb),0.2));
  opacity: 0;
  transition: opacity 0.22s;
}

.gl-tile:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(var(--gl-rgb),0.35);
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(var(--gl-rgb),0.18);
}

.gl-tile:hover::after { opacity: 1; }

/* Icon */
.gl-tile__icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(var(--gl-rgb),0.18);
  border: 1px solid rgba(var(--gl-rgb),0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(var(--gl-rgb));
  flex-shrink: 0;
}

.gl-tile__icon svg {
  width: 20px;
  height: 20px;
}

/* Build count badge */
.gl-tile__badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-family: var(--body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: rgba(var(--gl-rgb),0.18);
  border: 1px solid rgba(var(--gl-rgb),0.30);
  color: rgb(var(--gl-rgb));
  text-transform: uppercase;
}

.gl-tile__badge--spoofer {
  background: rgba(0,207,255,0.25);
  border-color: rgba(167,139,250,0.40);
  color: #c4b5fd;
}

/* Body text */
.gl-tile__body { flex: 1; }

.gl-tile__name {
  font-family: var(--display);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 0.22rem;
}

.gl-tile__tags {
  font-family: var(--body);
  font-size: 0.72rem;
  color: var(--gaming-text-dim);
  margin: 0;
}

/* Chevron arrow */
.gl-tile__arrow {
  width: 16px;
  height: 16px;
  color: rgba(255,255,255,0.25);
  align-self: flex-end;
  transition: color 0.2s, transform 0.2s;
}

.gl-tile:hover .gl-tile__arrow {
  color: rgb(var(--gl-rgb));
  transform: translateX(3px);
}

/* Wide spoofer tile */
.gl-tile--spoofer {
  grid-column: span 1;
}

/* Responsive */
@media (max-width: 1024px) {
  .gamelibrary__grid { grid-template-columns: repeat(3, 1fr); }
  .gl-tile--spoofer  { grid-column: span 1; }
}

@media (max-width: 640px) {
  .gamelibrary__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 380px) {
  .gamelibrary__grid { grid-template-columns: 1fr; }
}/* в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ
   GAME LIBRARY GRID  — glassmorphism
в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ */
.gamelibrary { background: transparent; }

.gamelibrary__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 2.8rem;
}

/* в”Ђв”Ђ Tile base в”Ђв”Ђ */
.gl-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 1.15rem 1.1rem 1.1rem;
  border-radius: 16px;
  background: rgba(255,255,255,0.055);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow:
    0 2px 0 0 rgba(var(--gl-rgb),0.7) inset,
    0 0 0 0 rgba(var(--gl-rgb),0),
    0 4px 24px rgba(0,0,0,0.25);
  text-decoration: none;
  color: #fff;
  cursor: pointer;
  overflow: hidden;
  transition: background 0.25s, border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}

/* Top colour line */
.gl-tile::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  border-radius: 16px 16px 0 0;
  background: linear-gradient(90deg,
    rgb(var(--gl-rgb)) 0%,
    rgba(var(--gl-rgb),0.15) 100%);
}

/* Colour glow on hover */
.gl-tile:hover {
  background: rgba(255,255,255,0.085);
  border-color: rgba(var(--gl-rgb),0.30);
  transform: translateY(-4px);
  box-shadow:
    0 2px 0 0 rgba(var(--gl-rgb),0.9) inset,
    0 0 28px rgba(var(--gl-rgb),0.20),
    0 8px 32px rgba(0,0,0,0.30);
}

/* в”Ђв”Ђ Icon в”Ђв”Ђ */
.gl-tile__icon {
  width: 54px;
  height: 54px;
  border-radius: 12px;
  background: rgba(var(--gl-rgb),0.18);
  border: 1px solid rgba(var(--gl-rgb),0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(var(--gl-rgb));
  margin-bottom: 0.85rem;
  flex-shrink: 0;
  transition: background 0.25s;
}
.gl-tile:hover .gl-tile__icon {
  background: rgba(var(--gl-rgb),0.28);
}
.gl-tile__icon svg { width: 22px; height: 22px; }

/* в”Ђв”Ђ Build count badge в”Ђв”Ђ */
.gl-tile__badge {
  position: absolute;
  top: 1rem;
  right: 0.9rem;
  font-family: var(--body);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  background: rgba(var(--gl-rgb),0.20);
  border: 1px solid rgba(var(--gl-rgb),0.35);
  color: rgb(var(--gl-rgb));
  text-transform: uppercase;
}
.gl-tile__badge--spoofer {
  background: rgba(0,207,255,0.25);
  border-color: rgba(167,139,250,0.40);
  color: #c4b5fd;
}

/* в”Ђв”Ђ Name + tags в”Ђв”Ђ */
.gl-tile__body { flex: 1; }

.gl-tile__name {
  font-family: var(--display);
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 0.25rem;
  line-height: 1.2;
}
.gl-tile__tags {
  font-family: var(--body);
  font-size: 0.7rem;
  color: var(--gaming-text-dim);
  margin: 0;
  line-height: 1.5;
}

/* в”Ђв”Ђ Arrow в”Ђв”Ђ */
.gl-tile__arrow {
  width: 15px;
  height: 15px;
  color: rgba(var(--gl-rgb),0.45);
  align-self: flex-end;
  margin-top: 0.7rem;
  transition: color 0.2s, transform 0.2s;
}
.gl-tile:hover .gl-tile__arrow {
  color: rgb(var(--gl-rgb));
  transform: translateX(3px);
}

/* в”Ђв”Ђ Responsive в”Ђв”Ђ */
@media (max-width: 1024px) {
  .gamelibrary__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .gamelibrary__grid { grid-template-columns: repeat(2, 1fr); gap: 0.7rem; }
}
@media (max-width: 380px) {
  .gamelibrary__grid { grid-template-columns: 1fr; }
}

/* Owl adjacent item — pointer cursor to signal clickability */
.owl-item:not(.center) .product-card {
  cursor: pointer;
}
.owl-item:not(.center) .product-card:hover {
  border-color: rgba(255,255,255,0.18);
}
.products__slider .owl-item {
  pointer-events: none;
}
.products__slider .owl-item .product-card {
  pointer-events: auto;
}

/* в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ
   PRODUCTS PAGE
в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ */

.products-page { min-height: 100vh; padding-top: 72px; padding-bottom: 6rem; }

/* в”Ђв”Ђ Page Hero в”Ђв”Ђ */
.ppage-hero {
  padding: 2.5rem 0 3rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.ppage-hero__inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.ppage-hero__title {
  font-family: var(--display);
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0.5rem 0 0.75rem;
}
.ppage-hero__sub {
  font-family: var(--body);
  font-size: 1rem;
  color: rgba(255,255,255,0.55);
  max-width: 42ch;
  margin: 0;
}
.ppage-hero__stats {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-shrink: 0;
}
.ppage-stat { text-align: center; }
.ppage-stat__num {
  display: block;
  font-family: var(--display);
  font-size: 1.8rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}
.ppage-stat__label {
  display: block;
  font-family: var(--body);
  font-size: 0.72rem;
  color: rgba(255,255,255,0.6);
  margin-top: 0.2rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.ppage-stat__div {
  width: 1px;
  height: 2.5rem;
  background: rgba(255,255,255,0.12);
}

/* в”Ђв”Ђ Sticky filter bar в”Ђв”Ђ */
.pfilter-bar {
  position: sticky;
  top: 60px;
  z-index: 40;
  background: rgba(10,8,28,0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  padding: 0.75rem 0;
  transition: box-shadow 0.3s;
}
.pfilter-bar.is-stuck {
  box-shadow: 0 4px 32px rgba(0,0,0,0.5);
}
.pfilter-bar__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.pfilter-group {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  flex: 1;
}
.pfilter-pill {
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.55);
  font-family: var(--body);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.pfilter-pill:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
  border-color: rgba(255,255,255,0.2);
}
.pfilter-pill.active {
  background: rgba(0,207,255,0.30);
  border-color: rgba(167,139,250,0.55);
  color: #fff;
  box-shadow: 0 0 16px rgba(0,207,255,0.30);
}
.pfilter-pill--more { opacity: 0.7; }
.pfilter-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
.pfilter-select {
  appearance: none;
  -webkit-appearance: none;
  padding: 0.38rem 2rem 0.38rem 0.8rem;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='rgba(255,255,255,0.4)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 0.6rem center;
  color: rgba(255,255,255,0.7);
  font-family: var(--body);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  min-width: 130px;
}
.pfilter-select:hover, .pfilter-select:focus {
  border-color: rgba(167,139,250,0.4);
  outline: none;
}
.pfilter-select option { background: #13102a; color: #fff; }

/* More games panel */
.pfilter-more-games {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease, padding 0.3s ease;
  background: rgba(255,255,255,0.02);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.pfilter-more-games[aria-hidden="false"] {
  max-height: 80px;
  padding: 0.6rem 0;
}
.pfilter-more-games .container-max {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

/* в”Ђв”Ђ Results bar в”Ђв”Ђ */
.presults-bar {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1.2rem 0 0.6rem;
  flex-wrap: wrap;
}
.presults-count {
  font-family: var(--body);
  font-size: 0.82rem;
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.presults-tags { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.presults-chip {
  padding: 0.22rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(167,139,250,0.35);
  background: rgba(0,207,255,0.15);
  color: rgba(167,139,250,0.9);
  font-family: var(--body);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}
.presults-chip:hover { background: rgba(0,207,255,0.28); }

/* в”Ђв”Ђ Product grid в”Ђв”Ђ */
.pgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.1rem;
  padding-bottom: 1rem;
}

/* в”Ђв”Ђ Product grid card в”Ђв”Ђ */
.pgrid-card {
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
  text-decoration: none;
  color: #fff;
}
.pgrid-card:hover {
  transform: translateY(-5px);
  border-color: rgba(var(--art-rgb, 167,139,250), 0.35);
  box-shadow: 0 16px 48px rgba(0,0,0,0.35),
              0 0 0 1px rgba(var(--art-rgb, 167,139,250), 0.12);
}

/* Art area */
.pgrid-card__art {
  position: relative;
  height: 160px;
  overflow: hidden;
  background: radial-gradient(ellipse at 60% 30%,
    rgba(var(--art-rgb),0.22) 0%,
    rgba(var(--art-rgb),0.06) 50%,
    transparent 80%),
    linear-gradient(180deg, rgba(var(--art-rgb),0.08) 0%, transparent 100%);
  flex-shrink: 0;
}
.pgrid-card__cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  display: block;
}
.pgrid-card__art--cover::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(6, 9, 18, 0.12) 0%, rgba(6, 9, 18, 0.55) 100%),
    radial-gradient(ellipse 70% 70% at 50% 50%, transparent 35%, rgba(6, 9, 18, 0.35) 100%);
}
.pgrid-card__art--cover .product-card__art-grid,
.pgrid-card__art--cover .product-card__art-stars,
.pgrid-card__art--cover .product-card__art-shape {
  display: none;
}
.pgrid-card__art--cover .product-card__art-tag {
  z-index: 2;
}
.pgrid-card__art .product-card__art-shape {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: rgba(var(--art-rgb),0.65);
}
.pgrid-card__art .product-card__art-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(var(--art-rgb),0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--art-rgb),0.08) 1px, transparent 1px);
  background-size: 24px 24px;
}
.pgrid-card__art .product-card__art-stars {
  position: absolute;
  inset: 0;
}
.pgrid-card__art .product-card__art-stars span {
  position: absolute;
  width: 2px; height: 2px;
  border-radius: 50%;
  background: rgba(var(--art-rgb),0.7);
  animation: starPulse 3s ease-in-out infinite;
}
.pgrid-card__art .product-card__art-stars span:nth-child(1) { top: 18%; left: 22%; animation-delay: 0s; }
.pgrid-card__art .product-card__art-stars span:nth-child(2) { top: 32%; left: 72%; animation-delay: 0.7s; }
.pgrid-card__art .product-card__art-stars span:nth-child(3) { top: 68%; left: 18%; animation-delay: 1.4s; }
.pgrid-card__art .product-card__art-stars span:nth-child(4) { top: 75%; left: 80%; animation-delay: 2.1s; }
.pgrid-card__art .product-card__art-tag {
  position: absolute;
  top: 0.65rem;
  right: 0.75rem;
  font-family: var(--body);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: rgba(var(--art-rgb),0.85);
  background: rgba(var(--art-rgb),0.12);
  border: 1px solid rgba(var(--art-rgb),0.25);
  border-radius: 6px;
  padding: 0.15rem 0.45rem;
}

/* Card body */
.pgrid-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1rem 1.1rem 1.1rem;
  gap: 0.5rem;
}
.pgrid-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.pgrid-card__game {
  font-family: var(--body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--gaming-text-dim);
}
.pgrid-card__title {
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0;
}
.pgrid-card__desc {
  font-family: var(--body);
  font-size: 0.78rem;
  color: rgba(255,255,255,0.5);
  line-height: 1.55;
  margin: 0;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pgrid-card__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255,255,255,0.06);
  margin-top: auto;
}
.pgrid-card__price {
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 800;
  color: #fff;
}
.pgrid-card__price-unit {
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--gaming-text-dim);
  margin-left: 0.1rem;
}

/* Empty state */
.pgrid-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 5rem 1rem;
  text-align: center;
  color: var(--gaming-text-dim);
}
.pgrid-empty[aria-hidden="true"] { display: none; }
.pgrid-empty svg { width: 48px; height: 48px; opacity: 0.4; }
.pgrid-empty p { font-family: var(--body); font-size: 1rem; margin: 0; }

/* в”Ђв”Ђ Responsive в”Ђв”Ђ */
@media (max-width: 1400px) { .pgrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px)  { .pgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  {
  .pgrid { grid-template-columns: 1fr; }
  .ppage-hero__inner { flex-direction: column; align-items: flex-start; }
  .pfilter-bar__inner { gap: 0.5rem; }
  .pfilter-controls { width: 100%; }
  .pfilter-select { flex: 1; min-width: 0; }
}

/* в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ
   PRODUCT DETAIL PAGE
в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ */

.detail-page { min-height: 100vh; padding-top: 72px; }

/* Breadcrumb */
.detail-breadcrumb {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 1.4rem 0 0;
  font-family: var(--body); font-size: 0.75rem;
  color: var(--gaming-text-dim);
}
.detail-breadcrumb a { color: var(--gaming-text-dim); text-decoration: none; transition: color 0.2s; }
.detail-breadcrumb a:hover { color: #fff; }
.detail-breadcrumb span:last-child { color: rgba(255,255,255,0.7); }

/* в”Ђв”Ђ Hero в”Ђв”Ђ */
.detail-hero {
  position: relative;
  padding: 2.5rem 0 3rem;
  overflow: hidden;
}
.detail-hero__bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 70% 50%,
    rgba(var(--art-rgb),0.12) 0%, transparent 60%);
  pointer-events: none;
}
.detail-hero__inner {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 3rem;
  align-items: center;
}

/* Art panel */
.detail-hero__art {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 24px;
  overflow: hidden;
  background: radial-gradient(ellipse at 55% 35%,
    rgba(var(--art-rgb),0.25) 0%,
    rgba(var(--art-rgb),0.07) 55%,
    transparent 80%);
  border: 1px solid rgba(var(--art-rgb),0.2);
}
.product-cover__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  display: block;
}
.product-cover--has-image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(6, 9, 18, 0.1) 0%, rgba(6, 9, 18, 0.5) 100%),
    radial-gradient(ellipse 70% 70% at 50% 50%, transparent 30%, rgba(6, 9, 18, 0.4) 100%);
}
.product-cover--has-image .detail-art__grid,
.product-cover--has-image .detail-art__stars,
.product-cover--has-image .detail-art__shape,
.product-cover--has-image .detail-art__glow,
.product-cover--has-image .product-card__art-grid,
.product-cover--has-image > svg {
  display: none;
}
.product-cover--has-image .detail-art__tag {
  z-index: 2;
}
.detail-art__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(var(--art-rgb),0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--art-rgb),0.07) 1px, transparent 1px);
  background-size: 28px 28px;
}
.detail-art__shape {
  position: absolute; inset: 0; width: 100%; height: 100%;
  color: rgba(var(--art-rgb),0.65);
}
.detail-art__glow {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 55% 40%, rgba(var(--art-rgb),0.2) 0%, transparent 65%);
  animation: artGlow 4s ease-in-out infinite alternate;
}
@keyframes artGlow {
  from { opacity: 0.6; }
  to   { opacity: 1.0; }
}
.detail-art__stars { position: absolute; inset: 0; }
.detail-art__stars span {
  position: absolute; width: 2px; height: 2px;
  border-radius: 50%; background: rgba(var(--art-rgb),0.8);
  animation: starPulse 3s ease-in-out infinite;
}
.detail-art__stars span:nth-child(1) { top:12%; left:15%; animation-delay:0s; }
.detail-art__stars span:nth-child(2) { top:22%; left:78%; animation-delay:0.6s; }
.detail-art__stars span:nth-child(3) { top:55%; left:12%; animation-delay:1.2s; }
.detail-art__stars span:nth-child(4) { top:70%; left:82%; animation-delay:1.8s; }
.detail-art__stars span:nth-child(5) { top:85%; left:35%; animation-delay:2.4s; }
.detail-art__stars span:nth-child(6) { top:38%; left:60%; animation-delay:3.0s; }
.detail-art__tag {
  position: absolute; top: 1rem; right: 1rem;
  font-family: var(--body); font-size: 0.65rem; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(var(--art-rgb),0.9);
  background: rgba(var(--art-rgb),0.12);
  border: 1px solid rgba(var(--art-rgb),0.25);
  border-radius: 8px; padding: 0.2rem 0.55rem;
}

/* Info panel */
.detail-hero__badges { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 1rem; }
.detail-game-badge {
  font-family: var(--body); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  padding: 0.22rem 0.7rem; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
}
.detail-badge-hot {
  font-family: var(--body); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: #fbbf24;
  padding: 0.22rem 0.7rem; border-radius: 999px;
  border: 1px solid rgba(251,191,36,0.3);
  background: rgba(251,191,36,0.10);
}
.detail-hero__title {
  font-family: var(--display);
  font-size: clamp(2.2rem, 4vw, 3.6rem);
  font-weight: 900; line-height: 1.05;
  letter-spacing: -0.02em; margin: 0 0 1rem;
}
.detail-hero__tagline {
  font-family: var(--body); font-size: 1rem;
  color: rgba(255,255,255,0.55); line-height: 1.6;
  max-width: 44ch; margin: 0 0 1.5rem;
}
.detail-quick-stats {
  display: flex; flex-wrap: wrap; gap: 1rem 1.8rem;
}
.detail-qs {
  display: flex; align-items: center; gap: 0.45rem;
  font-family: var(--body); font-size: 0.8rem;
  color: rgba(255,255,255,0.5);
}
.detail-qs svg { width: 15px; height: 15px; color: rgba(167,139,250,0.7); flex-shrink: 0; }
.detail-buy-mobile { display: none; margin-top: 1.8rem; }

/* в”Ђв”Ђ Body layout в”Ђв”Ђ */
.detail-body {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 2.5rem;
  align-items: start;
  padding: 2.5rem 0 6rem;
}

/* в”Ђв”Ђ Tabs в”Ђв”Ђ */
.detail-tabs {
  display: flex; gap: 0; margin-bottom: 2rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.detail-tab {
  font-family: var(--body); font-size: 0.85rem; font-weight: 600;
  color: var(--gaming-text-dim);
  padding: 0.7rem 1.2rem;
  border: none; border-bottom: 2px solid transparent;
  background: none; cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
  margin-bottom: -1px;
}
.detail-tab:hover { color: rgba(255,255,255,0.8); }
.detail-tab.active { color: #fff; border-bottom-color: rgba(167,139,250,0.8); }
.detail-tab-panel { display: none; }
.detail-tab-panel.active { display: block; }

/* Description */
.detail-desc { color: rgba(255,255,255,0.6); font-family: var(--body); font-size: 0.92rem; line-height: 1.75; }
.detail-desc p { margin: 0 0 1rem; }
.detail-desc strong { color: rgba(255,255,255,0.9); }
.detail-section-title {
  font-family: var(--display); font-size: 1rem; font-weight: 700;
  letter-spacing: 0.04em; color: #fff;
  margin: 2.2rem 0 1rem;
}

/* Feature cards */
.detail-features-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem;
}
.dfeat-card {
  display: flex; align-items: flex-start; gap: 0.9rem;
  padding: 1.1rem; border-radius: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  transition: background 0.2s, border-color 0.2s;
}
.dfeat-card:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.12); }
.dfeat-card__icon {
  width: 38px; height: 38px; flex-shrink: 0;
  border-radius: 10px; display: flex; align-items: center; justify-content: center;
}
.dfeat-card__icon svg { width: 17px; height: 17px; }
.dfeat-card__icon--red    { background: rgba(239,68,95,0.15);  color: rgb(239,68,95); }
.dfeat-card__icon--blue   { background: rgba(56,189,248,0.15); color: rgb(56,189,248); }
.dfeat-card__icon--green  { background: rgba(34,197,94,0.15);  color: rgb(34,197,94); }
.dfeat-card__icon--purple { background: rgba(167,139,250,0.15);color: rgb(167,139,250); }
.dfeat-card__icon--gold   { background: rgba(251,191,36,0.15); color: rgb(251,191,36); }
.dfeat-card__icon--cyan   { background: rgba(34,211,238,0.15); color: rgb(34,211,238); }
.dfeat-card__title { font-family: var(--body); font-size: 0.82rem; font-weight: 700; color: #fff; margin: 0 0 0.25rem; }
.dfeat-card__text  { font-family: var(--body); font-size: 0.75rem; color: var(--gaming-text-dim); margin: 0; line-height: 1.5; }

/* Vouches */
.detail-vouches { display: flex; flex-direction: column; gap: 1rem; }
.dvouch {
  padding: 1.2rem; border-radius: 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
}
.dvouch__head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
.dvouch__avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: rgba(var(--av-rgb),0.2); border: 1px solid rgba(var(--av-rgb),0.3);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 0.85rem; font-weight: 700;
  color: rgb(var(--av-rgb));
}
.dvouch__name { font-family: var(--body); font-size: 0.82rem; font-weight: 700; color: #fff; margin: 0; }
.dvouch__meta { font-family: var(--body); font-size: 0.7rem; color: var(--gaming-text-dim); margin: 0; }
.dvouch__stars { font-size: 0.8rem; color: #fbbf24; margin-left: auto; letter-spacing: 1px; flex-shrink: 0; }
.dvouch__text { font-family: var(--body); font-size: 0.82rem; color: rgba(255,255,255,0.55); line-height: 1.6; margin: 0 0 0.6rem; }
.dvouch__source { display: flex; align-items: center; gap: 0.35rem; font-family: var(--body); font-size: 0.68rem; color: rgba(167,139,250,0.6); }

/* Feature table */
.detail-ftable { display: flex; flex-direction: column; gap: 2rem; }
.detail-ftable__group { }
.detail-ftable__heading { font-family: var(--body); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gaming-text-dim); margin: 0 0 0.6rem; }
.detail-ftable__row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.6rem 0; border-bottom: 1px solid rgba(255,255,255,0.05);
  font-family: var(--body); font-size: 0.82rem; color: rgba(255,255,255,0.5);
}
.detail-ftable__row:last-child { border-bottom: none; }
.dfeat-val { font-weight: 600; color: rgba(255,255,255,0.75); text-align: right; }
.dfeat-val--yes { color: rgb(34,197,94); }
.dfeat-val--no  { color: rgba(255,255,255,0.6); }

/* Requirements */
.detail-reqs { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; }
.detail-req-card {
  display: flex; align-items: flex-start; gap: 0.85rem;
  padding: 1rem 1.1rem; border-radius: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
}
.detail-req-card svg { width: 20px; height: 20px; color: rgba(167,139,250,0.7); flex-shrink: 0; margin-top: 2px; }
.detail-req__label { font-family: var(--body); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gaming-text-dim); margin: 0 0 0.25rem; }
.detail-req__val   { font-family: var(--body); font-size: 0.8rem; color: rgba(255,255,255,0.7); margin: 0; line-height: 1.45; }

/* Setup steps */
.detail-setup { display: flex; flex-direction: column; gap: 0; }
.detail-step {
  display: flex; align-items: flex-start; gap: 1.2rem;
  padding: 1.4rem 0;
}
.detail-step__num {
  font-family: var(--display); font-size: 1.6rem; font-weight: 900;
  color: rgba(167,139,250,0.25); line-height: 1; flex-shrink: 0; width: 3rem; text-align: center;
}
.detail-step__title { font-family: var(--body); font-size: 0.92rem; font-weight: 700; color: #fff; margin: 0 0 0.4rem; }
.detail-step__text  { font-family: var(--body); font-size: 0.82rem; color: rgba(255,255,255,0.5); line-height: 1.65; margin: 0; }
.detail-step__line {
  width: 1px; height: 1.5rem; background: rgba(167,139,250,0.15);
  margin-left: 1.7rem;
}
.detail-setup-note {
  display: flex; align-items: flex-start; gap: 0.75rem;
  padding: 1rem 1.2rem; border-radius: 14px; margin-top: 1.2rem;
  background: rgba(167,139,250,0.07); border: 1px solid rgba(167,139,250,0.18);
}
.detail-setup-note svg { width: 18px; height: 18px; color: rgba(167,139,250,0.7); flex-shrink: 0; margin-top: 2px; }
.detail-setup-note p { font-family: var(--body); font-size: 0.82rem; color: rgba(255,255,255,0.55); margin: 0; line-height: 1.55; }
.detail-setup-note a { color: rgba(167,139,250,0.9); text-decoration: none; }
.detail-setup-note a:hover { text-decoration: underline; }

/* в”Ђв”Ђ Sidebar / Buy box в”Ђв”Ђ */
.detail-sidebar { position: sticky; top: 80px; display: flex; flex-direction: column; gap: 1.2rem; }
.detail-buybox {
  padding: 1.4rem; border-radius: 20px;
  background: rgba(255,255,255,0.055);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.10);
}
.dbb__header { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 1.4rem; padding-bottom: 1.2rem; border-bottom: 1px solid rgba(255,255,255,0.07); }
.dbb__art {
  width: 52px; height: 52px; border-radius: 12px; flex-shrink: 0; position: relative; overflow: hidden;
  background: radial-gradient(ellipse at 55% 35%, rgba(var(--art-rgb),0.28) 0%, rgba(var(--art-rgb),0.07) 70%);
  border: 1px solid rgba(var(--art-rgb),0.2);
}
.dbb__art .product-cover__img {
  border-radius: inherit;
}
.dbb__art.product-cover--has-image::after {
  background: rgba(6, 9, 18, 0.35);
}
.dbb__art .product-card__art-grid {
  position: absolute; inset: 0; z-index: 2;
  background-image: linear-gradient(rgba(var(--art-rgb),0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--art-rgb),0.08) 1px, transparent 1px);
  background-size: 12px 12px;
}
.dbb__art svg { position: absolute; inset: 0; width: 100%; height: 100%; color: rgba(var(--art-rgb),0.7); z-index: 2; }
.dbb__game { font-family: var(--body); font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: rgba(255,255,255,0.6); margin: 0 0 0.15rem; }
.dbb__name { font-family: var(--display); font-size: 0.88rem; font-weight: 800; color: #fff; margin: 0; }
.dbb__plans-label { font-family: var(--body); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gaming-text-dim); margin: 0 0 0.65rem; }
.dbb__plan-list { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.2rem; }
.dbb__plan { cursor: pointer; }
.dbb__plan input[type="radio"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.dbb__plan { position: relative; }
.dbb__plan input:focus-visible + .dbb__plan__inner { outline: 2px solid var(--gaming-cta); outline-offset: 2px; }
.dbb__plan__inner {
  display: grid; grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  align-items: center; gap: 0.1rem 0.5rem;
  padding: 0.85rem 1rem; border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.09);
  background: rgba(255,255,255,0.04);
  transition: all 0.2s; cursor: pointer;
}
.dbb__plan input:checked + .dbb__plan__inner {
  border-color: rgba(167,139,250,0.55);
  background: rgba(0,207,255,0.18);
  box-shadow: 0 0 20px rgba(0,207,255,0.2);
}
.dbb__plan__dur { font-family: var(--body); font-size: 0.85rem; font-weight: 700; color: #fff; grid-column: 1; grid-row: 1; }
.dbb__plan__badge {
  font-family: var(--body); font-size: 0.63rem; font-weight: 700;
  letter-spacing: 0.03em; color: rgb(34,197,94);
  background: rgba(34,197,94,0.12); border-radius: 4px; padding: 0.1rem 0.4rem;
  grid-column: 1; grid-row: 2; justify-self: start;
}
.dbb__plan__badge--hot { color: #fbbf24; background: rgba(251,191,36,0.12); }
.dbb__plan--popular .dbb__plan__inner { border-color: rgba(167,139,250,0.3); }
.dbb__plan__price { font-family: var(--body); font-size: 1rem; font-weight: 800; color: #fff; grid-column: 2; grid-row: 1; text-align: right; }
.dbb__plan__ppd   { font-family: var(--body); font-size: 0.68rem; color: rgba(255,255,255,0.6); grid-column: 2; grid-row: 2; text-align: right; }
.dbb__total-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.85rem; }
.dbb__total-label { font-family: var(--body); font-size: 0.78rem; font-weight: 600; color: var(--gaming-text-dim); }
.dbb__total-price { font-family: var(--body); font-size: 1.5rem; font-weight: 800; color: #fff; }
.dbb__cta { width: 100%; justify-content: center; font-size: 0.92rem; }
.dbb__or {
  display: flex; align-items: center; gap: 0.5rem;
  margin: 0.35rem 0;
  font-family: var(--body); font-size: 0.68rem; color: var(--gaming-text-dim);
}
.dbb__or::before, .dbb__or::after {
  content: ''; flex: 1; height: 1px; background: rgba(255,255,255,0.06);
}
.dbb__cta--cart { font-size: 0.82rem !important; padding: 0.85rem 1.5rem !important; }
.dbb__delivery {
  display: flex; align-items: center; gap: 0.4rem; justify-content: center;
  font-family: var(--body); font-size: 0.72rem; color: rgba(34,197,94,0.8);
  margin: 0.65rem 0 1rem;
}
.dbb__payments { margin-bottom: 1rem; }
.dbb__pay-label { font-family: var(--body); font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--gaming-text-dim); display: block; margin-bottom: 0.5rem; }
.dbb__pay-icons { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.dbb__pay-chip {
  font-family: var(--body); font-size: 0.6rem; font-weight: 800;
  letter-spacing: 0.05em; padding: 0.2rem 0.55rem;
  border-radius: 6px; border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05); color: var(--gaming-text-dim);
}
.dbb__trust { display: flex; flex-direction: column; gap: 0.55rem; }
.dbb__trust-item { display: flex; align-items: center; gap: 0.55rem; font-family: var(--body); font-size: 0.75rem; color: rgba(255,255,255,0.6); }
.dbb__trust-item svg { width: 14px; height: 14px; color: rgba(167,139,250,0.55); flex-shrink: 0; }

/* Related products */
.detail-related { padding: 1.1rem; border-radius: 16px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); }
.detail-related__title { font-family: var(--body); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--gaming-text-dim); margin: 0 0 0.75rem; }
.detail-rel-card {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.6rem 0.8rem; border-radius: 10px; margin-bottom: 0.4rem;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
  text-decoration: none; transition: background 0.2s, border-color 0.2s;
}
.detail-rel-card:last-child { margin-bottom: 0; }
.detail-rel-card:hover { background: rgba(255,255,255,0.07); border-color: rgba(var(--art-rgb),0.3); }
.detail-rel-card__name { font-family: var(--body); font-size: 0.8rem; font-weight: 600; color: rgba(255,255,255,0.75); }
.detail-rel-card__price { font-family: var(--display); font-size: 0.78rem; font-weight: 700; color: var(--gaming-text-dim); }

/* в”Ђв”Ђ Responsive в”Ђв”Ђ */
@media (max-width: 1100px) {
  .detail-hero__inner { grid-template-columns: 260px 1fr; gap: 2rem; }
  .detail-body { grid-template-columns: 1fr 320px; gap: 2rem; }
}
@media (max-width: 860px) {
  .detail-hero__inner { grid-template-columns: 1fr; }
  .detail-hero__art { max-width: 280px; }
  .detail-body { grid-template-columns: 1fr; }
  .detail-sidebar { position: static; }
  .detail-buy-mobile { display: block; }
  .detail-features-grid { grid-template-columns: 1fr; }
  .detail-reqs { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
  .detail-tabs { overflow-x: auto; padding-bottom: 0; }
  .detail-tab { white-space: nowrap; font-size: 0.78rem; padding: 0.6rem 0.9rem; }
}

/* в”Ђв”Ђ MEDIA CAROUSEL (dmedia) в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.dmedia { margin-bottom: 1.8rem; }
.dmedia__stage {
  position: relative;
  background: #070910;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(255,255,255,0.08);
}
.dmedia__items { width: 100%; height: 100%; }
.dmedia__item {
  display: none;
  width: 100%; height: 100%;
}
.dmedia__item.active { display: flex; align-items: stretch; }
.dmedia__item svg { width: 100%; height: 100%; display: block; }
.dmedia__arrow {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.18s, opacity 0.18s, border-color 0.18s;
  z-index: 2; opacity: 0;
}
.dmedia__stage:hover .dmedia__arrow { opacity: 1; }
.dmedia__arrow:hover { background: rgba(0,0,0,0.85); border-color: rgba(255,255,255,0.25); }
.dmedia__arrow--prev { left: 10px; }
.dmedia__arrow--next { right: 10px; }
.dmedia__arrow svg { width: 16px; height: 16px; flex-shrink: 0; }
.dmedia__badge {
  position: absolute; bottom: 10px; left: 12px;
  font-family: var(--body); font-size: 0.7rem; font-weight: 600;
  color: rgba(255,255,255,0.7);
  background: rgba(0,0,0,0.55);
  padding: 2px 8px; border-radius: 20px;
  pointer-events: none;
  z-index: 2;
}
.dmedia__counter {
  position: absolute; bottom: 10px; right: 12px;
  font-family: var(--body); font-size: 0.7rem; font-weight: 600;
  color: var(--gaming-text-dim);
  background: rgba(0,0,0,0.45);
  padding: 2px 8px; border-radius: 20px;
  pointer-events: none;
  z-index: 2;
}
.dmedia__thumbs {
  display: flex; gap: 0.45rem;
  margin-top: 0.55rem;
  overflow-x: auto; scrollbar-width: none;
  padding-bottom: 2px;
}
.dmedia__thumbs::-webkit-scrollbar { display: none; }
.dmedia__thumb {
  flex-shrink: 0; position: relative;
  width: 88px; height: 52px;
  border-radius: 6px; overflow: hidden;
  border: 2px solid rgba(255,255,255,0.07);
  background: #070910; cursor: pointer;
  padding: 0;
  transition: border-color 0.18s, transform 0.15s;
}
.dmedia__thumb:hover { border-color: rgba(255,255,255,0.25); transform: translateY(-1px); }
.dmedia__thumb.active { border-color: rgba(167,139,250,0.85); }
.dmedia__thumb svg { width: 100%; height: 100%; display: block; }
.dmedia__thumb--video .dmedia__play-icon {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.3);
}
.dmedia__thumb--video .dmedia__play-icon svg {
  width: 22px; height: 22px;
}
.dmedia__item--video { position: relative; }

/* real media elements */
.dmedia__img  { width: 100%; height: 100%; object-fit: cover; display: block; }
.dmedia__video { width: 100%; height: 100%; display: block; background: #000; }
.dmedia__thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* placeholder — shown when src is empty (backend not yet configured) */
.dmedia__placeholder {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 0.65rem;
  background: #070910;
}
.dmedia__placeholder svg { width: 32px; height: 32px; color: var(--gaming-text-dim); }
.dmedia__placeholder-label {
  font-family: var(--body); font-size: 0.78rem; font-weight: 600;
  color: rgba(255,255,255,0.4); letter-spacing: 0.05em;
}
.dmedia__placeholder-hint {
  font-family: var(--body); font-size: 0.65rem;
  color: var(--gaming-text-dim);
}
.dmedia__thumb-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #0d0f1c 0%, #141828 100%);
}
.dmedia__thumb-placeholder span {
  font-family: var(--body); font-size: 0.6rem; font-weight: 700;
  color: rgba(255,255,255,0.35); text-transform: uppercase; letter-spacing: 0.1em;
}

/* expand button */
.dmedia__expand {
  position: absolute; top: 10px; right: 12px;
  width: 30px; height: 30px;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 7px;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.18s, opacity 0.18s, color 0.18s;
  z-index: 3; opacity: 0;
}
.dmedia__stage:hover .dmedia__expand { opacity: 1; }
.dmedia__expand:hover { background: rgba(0,0,0,0.85); color: #fff; border-color: rgba(255,255,255,0.25); }
.dmedia__expand svg { width: 14px; height: 14px; }

/* lightbox overlay */
.dmedia-lb {
  display: none;
  position: fixed; inset: 0; z-index: 9999;
}
.dmedia-lb.open { display: flex; align-items: center; justify-content: center; }
.dmedia-lb__backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.dmedia-lb__inner {
  position: relative; z-index: 1;
  width: 90vw; max-width: 1200px;
  aspect-ratio: 16 / 9;
  display: flex; align-items: stretch;
}
.dmedia-lb__content {
  width: 100%; height: 100%;
  border-radius: 12px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 24px 80px rgba(0,0,0,0.7);
}
.dmedia-lb__content .dmedia__item { display: flex; align-items: stretch; width: 100%; height: 100%; }
.dmedia-lb__content .dmedia__item svg { width: 100%; height: 100%; display: block; }
.dmedia-lb__close {
  position: absolute; top: -14px; right: -14px;
  width: 36px; height: 36px;
  background: rgba(30,32,50,0.95);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 50%; color: rgba(255,255,255,0.8);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s;
  z-index: 2;
}
.dmedia-lb__close:hover { background: rgba(60,62,80,0.98); color: #fff; }
.dmedia-lb__close svg { width: 16px; height: 16px; }
.dmedia-lb__arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px;
  background: rgba(0,0,0,0.6);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 50%; color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
  z-index: 2;
}
.dmedia-lb__arrow:hover { background: rgba(0,0,0,0.9); }
.dmedia-lb__arrow--prev { left: -54px; }
.dmedia-lb__arrow--next { right: -54px; }
.dmedia-lb__arrow svg { width: 18px; height: 18px; }
.dmedia-lb__badge {
  position: absolute; bottom: -34px; left: 0;
  font-family: var(--body); font-size: 0.78rem; font-weight: 600;
  color: rgba(255,255,255,0.6);
}
.dmedia-lb__counter {
  position: absolute; bottom: -34px; right: 0;
  font-family: var(--body); font-size: 0.75rem;
  color: var(--gaming-text-dim);
}
@media (max-width: 700px) {
  .dmedia-lb__inner { width: 96vw; }
  .dmedia-lb__arrow--prev { left: -10px; }
  .dmedia-lb__arrow--next { right: -10px; }
  .dmedia-lb__close { top: -12px; right: -8px; }
}

/* в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ
   STATUS PAGE
   в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ */

/* в”Ђв”Ђ Base в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.status-page {
  min-height: 100vh;
  padding-top: 72px;
}
.section--tight { padding: 1.5rem 0; }

/* в”Ђв”Ђ State color tokens в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
/* Used on .status-hero[data-state], .svc-card[data-state], .sprod-row[data-state] */
:root {
  --sc-ok:   34, 197, 94;
  --sc-warn: 251, 191, 36;
  --sc-bad:  239, 68, 68;
  --sc-info: 96, 165, 250;
  --sc-mnt:  167, 139, 250;
}

/* в”Ђв”Ђ 1. HERO в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.status-hero {
  position: relative;
  padding: 5rem 0 3.5rem;
  overflow: hidden;
}
.status-hero__bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(34,197,94,0.08) 0%, transparent 70%),
              radial-gradient(ellipse 40% 30% at 80% 20%, rgba(0,207,255,0.07) 0%, transparent 60%);
  pointer-events: none;
}
.status-hero[data-state="degraded"] .status-hero__bg {
  background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(251,191,36,0.10) 0%, transparent 70%);
}
.status-hero[data-state="outage"] .status-hero__bg {
  background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(239,68,68,0.10) 0%, transparent 70%);
}
.status-hero[data-state="maintenance"] .status-hero__bg {
  background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(96,165,250,0.10) 0%, transparent 70%);
}

.status-hero__inner {
  display: flex; flex-direction: column; align-items: center; gap: 2.5rem;
  text-align: center;
}

/* Pulse indicator */
.status-hero__indicator {
  display: flex; flex-direction: column; align-items: center; gap: 1.6rem;
}
.status-hero__pulse {
  position: relative; width: 80px; height: 80px;
  display: flex; align-items: center; justify-content: center;
}
.status-hero__ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(var(--sc-ok), 0.55);
  animation: s-ring-pulse 2.4s ease-out infinite;
}
.status-hero__ring--2 {
  animation-delay: 1.2s;
  border-color: rgba(var(--sc-ok), 0.3);
}
@keyframes s-ring-pulse {
  0%   { transform: scale(1);    opacity: 1; }
  100% { transform: scale(2.2);  opacity: 0; }
}
.status-hero[data-state="degraded"]   .status-hero__ring { border-color: rgba(var(--sc-warn), 0.55); }
.status-hero[data-state="outage"]     .status-hero__ring { border-color: rgba(var(--sc-bad), 0.55); }
.status-hero[data-state="maintenance"] .status-hero__ring { border-color: rgba(var(--sc-info), 0.55); }

.status-hero__icon {
  position: relative; z-index: 1;
  width: 36px; height: 36px;
  color: rgb(var(--sc-ok));
  filter: drop-shadow(0 0 10px rgba(var(--sc-ok),0.6));
}
.status-hero[data-state="degraded"]   .status-hero__icon { color: rgb(var(--sc-warn)); filter: drop-shadow(0 0 10px rgba(var(--sc-warn),0.6)); }
.status-hero[data-state="outage"]     .status-hero__icon { color: rgb(var(--sc-bad));  filter: drop-shadow(0 0 10px rgba(var(--sc-bad),0.6)); }
.status-hero[data-state="maintenance"] .status-hero__icon { color: rgb(var(--sc-info)); filter: drop-shadow(0 0 10px rgba(var(--sc-info),0.6)); }

.status-hero__text { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.status-hero__title {
  font-family: var(--display); font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 800; letter-spacing: -0.02em;
  color: #fff; margin: 0;
}
.status-hero__sub {
  font-family: var(--body); font-size: 1rem; font-weight: 400;
  color: rgba(255,255,255,0.5); margin: 0;
  max-width: 480px;
}

/* Meta row (last updated + refresh) */
.status-hero__meta {
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; justify-content: center;
}
.status-hero__updated {
  display: flex; align-items: center; gap: 0.45rem;
  font-family: var(--body); font-size: 0.78rem; color: var(--gaming-text-dim);
}
.status-hero__updated svg { width: 13px; height: 13px; flex-shrink: 0; }
.status-hero__updated time { color: rgba(255,255,255,0.5); }

.status-refresh-btn {
  display: flex; align-items: center; gap: 0.4rem;
  font-family: var(--body); font-size: 0.78rem; font-weight: 600;
  color: var(--gaming-text-dim); background: none; border: none; cursor: pointer;
  padding: 0.3rem 0.7rem; border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.07);
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.status-refresh-btn:hover { color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.15); }
.status-refresh-btn svg { width: 13px; height: 13px; transition: transform 0.9s; }
.status-refresh-btn.spinning svg { transform: rotate(360deg); }

/* в”Ђв”Ђ 2. STATS BAR в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.status-stats { border-top: 1px solid rgba(255,255,255,0.06); border-bottom: 1px solid rgba(255,255,255,0.06); }
.status-stats__row {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 0; padding: 1.25rem 0;
}
.status-stat {
  display: flex; flex-direction: column; align-items: center; gap: 0.25rem;
  padding: 0 2.5rem; text-align: center;
}
.status-stat__val {
  font-family: var(--display); font-size: 1.5rem; font-weight: 900; color: #fff;
}
.status-stat__val--green { color: rgb(var(--sc-ok)); }
.status-stat__label {
  font-family: var(--body); font-size: 0.72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--gaming-text-dim);
}
.status-stat__divider {
  width: 1px; height: 36px; background: rgba(255,255,255,0.08); flex-shrink: 0;
}
@media (max-width: 640px) {
  .status-stats__row { gap: 0.75rem; }
  .status-stat { padding: 0.75rem 1.25rem; }
  .status-stat__divider { display: none; }
}

/* в”Ђв”Ђ 3. SECTION WRAPPER в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.status-section .section { padding: 4rem 0; }
.status-section__head {
  display: flex; flex-direction: column; gap: 0.35rem;
  margin-bottom: 2.5rem;
}
.status-section__title {
  font-family: var(--display); font-size: 1.3rem; font-weight: 800; color: #fff;
  margin: 0; letter-spacing: -0.01em;
}
.status-section__desc {
  font-family: var(--body); font-size: 0.85rem; color: rgba(255,255,255,0.6); margin: 0;
}

/* в”Ђв”Ђ 4. INFRASTRUCTURE GRID в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.sinfra-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,0.03);
}
@media (max-width: 1100px) { .sinfra-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .sinfra-grid { grid-template-columns: 1fr; } }

.svc-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center; gap: 0 1rem;
  padding: 1.2rem 1.4rem;
  background: rgba(8,8,14,0.6);
  border-right: 1px solid rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: background 0.2s;
}
.svc-card:hover { background: rgba(255,255,255,0.04); }
.svc-card__icon {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
}
.svc-card__icon svg { width: 16px; height: 16px; color: var(--gaming-text-dim); }
.svc-card__body { min-width: 0; }
.svc-card__name {
  font-family: var(--body); font-size: 0.82rem; font-weight: 700; color: rgba(255,255,255,0.85);
  margin: 0 0 0.15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.svc-card__desc {
  font-family: var(--body); font-size: 0.68rem; color: var(--gaming-text-dim); margin: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.svc-card__status {
  display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0;
}
.svc-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgb(var(--sc-ok));
  box-shadow: 0 0 6px rgba(var(--sc-ok),0.7);
}
.svc-label {
  font-family: var(--body); font-size: 0.72rem; font-weight: 700;
  color: rgb(var(--sc-ok));
  white-space: nowrap;
}

/* State variations */
.svc-card[data-state="degraded"]    .svc-dot  { background: rgb(var(--sc-warn)); box-shadow: 0 0 6px rgba(var(--sc-warn),0.7); }
.svc-card[data-state="degraded"]    .svc-label { color: rgb(var(--sc-warn)); }
.svc-card[data-state="maintenance"] .svc-dot  { background: rgb(var(--sc-info)); box-shadow: 0 0 6px rgba(var(--sc-info),0.7); }
.svc-card[data-state="maintenance"] .svc-label { color: rgb(var(--sc-info)); }
.svc-card[data-state="outage"]      .svc-dot  { background: rgb(var(--sc-bad)); box-shadow: 0 0 6px rgba(var(--sc-bad),0.7); }
.svc-card[data-state="outage"]      .svc-label { color: rgb(var(--sc-bad)); }

/* в”Ђв”Ђ 5. PRODUCTS STATUS GRID в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.sprod-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
@media (max-width: 1100px) { .sprod-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .sprod-grid { grid-template-columns: 1fr; } }

.sprod-game {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-top: 2px solid rgba(var(--gr), var(--gg), var(--gb), 0.55);
  border-radius: 14px; padding: 1.2rem 1.3rem;
  transition: border-color 0.2s, background 0.2s;
  --gr: 167; --gg: 139; --gb: 250;
}
.sprod-game:hover {
  background: rgba(255,255,255,0.045);
  border-color: rgba(var(--gr), var(--gg), var(--gb), 0.25);
  border-top-color: rgba(var(--gr), var(--gg), var(--gb), 0.75);
}
.sprod-game--wide { grid-column: span 2; }
@media (max-width: 640px) { .sprod-game--wide { grid-column: span 1; } }

.sprod-game__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 0.85rem; padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.sprod-game__name {
  font-family: var(--display); font-size: 0.88rem; font-weight: 800;
  color: rgba(255,255,255,0.9); letter-spacing: -0.01em;
}
.sprod-game__count {
  font-family: var(--body); font-size: 0.68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--gaming-text-dim);
}

/* Product row */
.sprod-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.55rem 0; border-bottom: 1px solid rgba(255,255,255,0.04);
}
.sprod-row:last-of-type { border-bottom: none; }
/* Clickable product rows — link through to the product page */
.sprod-row[data-page] {
  cursor: pointer; margin: 0 -0.5rem; padding-left: 0.5rem; padding-right: 0.5rem;
  border-radius: 8px; transition: background 0.16s ease, transform 0.16s ease;
}
.sprod-row[data-page]:hover {
  background: rgba(255,255,255,0.04); transform: translateX(2px);
}
.sprod-row[data-page]:hover .sprod-row__name { color: rgba(255,255,255,0.92); }
.sprod-row[data-page]:focus-visible {
  outline: 2px solid var(--gaming-accent-light); outline-offset: 2px; background: rgba(255,255,255,0.04);
}
.sprod-row__name {
  font-family: var(--body); font-size: 0.8rem; font-weight: 500;
  color: rgba(255,255,255,0.6);
}
.sprod-row__badge {
  font-family: var(--body); font-size: 0.65rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.07em;
  padding: 0.2rem 0.6rem; border-radius: 20px;
}
.sprod-row[data-state="undetected"] .sprod-row__badge {
  color: rgb(var(--sc-ok)); background: rgba(var(--sc-ok),0.1);
  border: 1px solid rgba(var(--sc-ok),0.25);
}
.sprod-row[data-state="updating"] .sprod-row__badge {
  color: rgb(var(--sc-info)); background: rgba(var(--sc-info),0.1);
  border: 1px solid rgba(var(--sc-info),0.25);
}
.sprod-row[data-state="paused"] .sprod-row__badge {
  color: rgb(var(--sc-warn)); background: rgba(var(--sc-warn),0.1);
  border: 1px solid rgba(var(--sc-warn),0.25);
}
.sprod-row[data-state="detected"] .sprod-row__badge {
  color: rgb(var(--sc-bad)); background: rgba(var(--sc-bad),0.1);
  border: 1px solid rgba(var(--sc-bad),0.25);
}

/* Uptime bar */
.sprod-uptime { margin-top: 0.9rem; }
.suptime-bar {
  display: flex; gap: 2px; height: 20px;
  align-items: flex-end; overflow: hidden; border-radius: 4px;
}
.suptime-day {
  flex: 1; border-radius: 2px; min-width: 4px;
  height: 20px; transition: filter 0.2s;
}
.suptime-day:hover { filter: brightness(1.3); }
.suptime-day--ok   { background: rgba(var(--sc-ok),  0.55); }
.suptime-day--warn { background: rgba(var(--sc-warn), 0.7); }
.suptime-day--bad  { background: rgba(var(--sc-bad),  0.7); }

.suptime-labels {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 0.35rem;
  font-family: var(--body); font-size: 0.63rem; color: var(--gaming-text-dim);
}
.suptime-pct { color: var(--gaming-text-dim); font-weight: 700; }

/* в”Ђв”Ђ 6. INCIDENT LIST в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.sincident-list {
  display: flex; flex-direction: column; gap: 0;
  border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; overflow: hidden;
}
.sincident {
  display: grid; grid-template-columns: 140px 1fr auto;
  gap: 0 2rem; padding: 1.8rem 2rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.025);
  transition: background 0.2s;
}
.sincident:last-child { border-bottom: none; }
.sincident:hover { background: rgba(255,255,255,0.04); }

.sincident__meta {
  display: flex; flex-direction: column; gap: 0.4rem; align-items: flex-start; padding-top: 0.1rem;
}
.sincident__date {
  font-family: var(--body); font-size: 0.8rem; font-weight: 700; color: rgba(255,255,255,0.5);
}
.sincident__severity {
  font-family: var(--body); font-size: 0.62rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.07em;
  padding: 0.15rem 0.5rem; border-radius: 6px;
  color: rgb(var(--sc-warn)); background: rgba(var(--sc-warn),0.1);
  border: 1px solid rgba(var(--sc-warn),0.25);
}
.sincident__severity--major {
  color: rgb(var(--sc-bad)); background: rgba(var(--sc-bad),0.1);
  border-color: rgba(var(--sc-bad),0.25);
}

.sincident__body { min-width: 0; }
.sincident__title {
  font-family: var(--display); font-size: 0.95rem; font-weight: 800;
  color: rgba(255,255,255,0.9); margin: 0 0 0.5rem; letter-spacing: -0.01em;
}
.sincident__desc {
  font-family: var(--body); font-size: 0.8rem; line-height: 1.6;
  color: var(--gaming-text-dim); margin: 0 0 1rem;
}
.sincident__timeline {
  display: flex; flex-direction: column; gap: 0.5rem;
  border-left: 2px solid rgba(255,255,255,0.08); padding-left: 1rem;
}
.sincident__tl-item {
  display: flex; align-items: flex-start; gap: 0.75rem;
}
.sincident__tl-time {
  font-family: var(--body); font-size: 0.68rem; font-weight: 700;
  color: var(--gaming-text-dim); white-space: nowrap; padding-top: 0.05rem;
  min-width: 70px;
}
.sincident__tl-text {
  font-family: var(--body); font-size: 0.75rem; color: var(--gaming-text-dim); line-height: 1.5;
}

.sincident__resolve {
  display: flex; align-items: flex-start; gap: 0.35rem; flex-shrink: 0; padding-top: 0.1rem;
  font-family: var(--body); font-size: 0.72rem; font-weight: 700;
  color: rgb(var(--sc-ok)); white-space: nowrap;
}
.sincident__resolve svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 0.05rem; }

.sincident-empty {
  display: flex; flex-direction: column; align-items: center; gap: 0.75rem;
  padding: 3rem 2rem; text-align: center;
  font-family: var(--body); font-size: 0.9rem; color: var(--gaming-text-dim);
}
.sincident-empty svg { width: 36px; height: 36px; color: rgba(var(--sc-ok),0.5); }

@media (max-width: 900px) {
  .sincident { grid-template-columns: 1fr auto; }
  .sincident__meta { flex-direction: row; align-items: center; grid-column: 1 / -1; }
  .sincident__body { grid-column: 1; }
  .sincident__resolve { grid-column: 2; align-items: flex-start; }
}
@media (max-width: 540px) {
  .sincident { grid-template-columns: 1fr; padding: 1.2rem; }
  .sincident__resolve { display: none; }
}

/* в”Ђв”Ђ 7. SUBSCRIBE BANNER в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.status-subscribe { padding: 3rem 0 5rem; }
.status-subscribe__inner {
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09);
  border-radius: 18px; padding: 2rem 2.5rem;
  position: relative; overflow: hidden;
}
.status-subscribe__inner::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 50% 80% at 0% 50%, rgba(0,207,255,0.08) 0%, transparent 70%);
  pointer-events: none;
}

.status-subscribe__icon {
  width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(88,101,242,0.15); border: 1px solid rgba(88,101,242,0.3);
}
.status-subscribe__icon svg { width: 24px; height: 24px; color: rgba(88,101,242,0.9); }

.status-subscribe__text { flex: 1; min-width: 220px; }
.status-subscribe__title {
  font-family: var(--display); font-size: 1rem; font-weight: 800;
  color: #fff; margin: 0 0 0.3rem; letter-spacing: -0.01em;
}
.status-subscribe__desc {
  font-family: var(--body); font-size: 0.8rem; color: rgba(255,255,255,0.6); margin: 0;
}

.status-subscribe__btn { flex-shrink: 0; }

@media (max-width: 640px) {
  .status-subscribe__inner { padding: 1.5rem; }
  .status-subscribe__btn { width: 100%; justify-content: center; }
}

/* в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ
   HOWTO PAGE
   в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ */

.howto-page { min-height: 100vh; padding-top: 72px; }

/* в”Ђв”Ђ Hero в”Ђв”Ђ */
.howto-hero {
  position: relative; padding: 5rem 0 4rem; overflow: hidden;
}
.howto-hero__bg {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(0,207,255,0.10) 0%, transparent 65%),
              radial-gradient(ellipse 40% 30% at 10% 30%, rgba(34,197,94,0.06) 0%, transparent 60%);
}
.howto-hero__inner {
  display: flex; flex-direction: column; align-items: center; gap: 1.6rem;
  text-align: center; position: relative; z-index: 1;
}
.howto-hero__title {
  font-family: var(--display); font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 900; letter-spacing: -0.03em; color: #fff; margin: 0; line-height: 1.1;
}
.howto-hero__sub {
  font-family: var(--body); font-size: 1rem; color: var(--gaming-text-dim);
  max-width: 500px; margin: 0;
}

/* Step preview bar */
.howto-hero__steps-preview {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; justify-content: center;
  margin-top: 0.5rem;
}
.hwprev-step {
  display: flex; align-items: center; gap: 0.45rem;
  font-family: var(--body); font-size: 0.78rem; font-weight: 700;
  color: rgba(255,255,255,0.5);
}
.hwprev-step--win { color: rgb(34,197,94); }
.hwprev-num {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(167,139,250,0.15); border: 1px solid rgba(167,139,250,0.3);
  font-family: var(--display); font-size: 0.65rem; font-weight: 800; color: rgba(167,139,250,0.8);
}
.hwprev-step--win .hwprev-num { background: rgba(34,197,94,0.15); border-color: rgba(34,197,94,0.3); color: rgb(34,197,94); }
.hwprev-arrow { color: rgba(255,255,255,0.2); font-size: 0.85rem; }

/* в”Ђв”Ђ Section labels в”Ђв”Ђ */
.howto-section { padding: 0; }
.howto-sec-label {
  font-family: var(--body); font-size: 0.68rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.12em; color: rgba(167,139,250,0.7);
  margin-bottom: 0.5rem;
}
.howto-sec-title {
  font-family: var(--display); font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 900; color: #fff; margin: 0 0 0.5rem; letter-spacing: -0.02em;
}
.howto-sec-desc {
  font-family: var(--body); font-size: 0.88rem; color: rgba(255,255,255,0.6);
  max-width: 600px; margin: 0 0 2.5rem;
}

/* в”Ђв”Ђ Requirements grid в”Ђв”Ђ */
.howto-reqs-wrap { display: grid; grid-template-columns: 320px 1fr; gap: 3rem; align-items: start; }
@media (max-width: 900px) { .howto-reqs-wrap { grid-template-columns: 1fr; gap: 2rem; } }
.howto-reqs-head { position: sticky; top: 90px; }

.hwreq-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
}
@media (max-width: 1100px) { .hwreq-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .hwreq-grid { grid-template-columns: 1fr; } }

.hwreq-card {
  padding: 1.3rem 1.4rem; border-radius: 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-top-width: 2px;
  display: flex; flex-direction: column; gap: 0.4rem;
  transition: background 0.2s;
}
.hwreq-card:hover { background: rgba(255,255,255,0.05); }
.hwreq-card--ok  { border-top-color: rgba(34,197,94,0.6); }
.hwreq-card--warn { border-top-color: rgba(251,191,36,0.7); }
.hwreq-card__icon {
  width: 36px; height: 36px; border-radius: 10px; margin-bottom: 0.3rem;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
}
.hwreq-card--ok  .hwreq-card__icon { background: rgba(34,197,94,0.08); border-color: rgba(34,197,94,0.2); }
.hwreq-card--warn .hwreq-card__icon { background: rgba(251,191,36,0.08); border-color: rgba(251,191,36,0.2); }
.hwreq-card__icon svg { width: 16px; height: 16px; }
.hwreq-card--ok  .hwreq-card__icon svg { color: rgba(34,197,94,0.8); }
.hwreq-card--warn .hwreq-card__icon svg { color: rgba(251,191,36,0.8); }
.hwreq-card__label {
  font-family: var(--body); font-size: 0.68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--gaming-text-dim); margin: 0;
}
.hwreq-card__val {
  font-family: var(--display); font-size: 0.9rem; font-weight: 800; color: #fff; margin: 0;
}
.hwreq-card__note {
  font-family: var(--body); font-size: 0.73rem; color: var(--gaming-text-dim); margin: 0; line-height: 1.5;
}

/* в”Ђв”Ђ Steps в”Ђв”Ђ */
.hwsteps { display: flex; flex-direction: column; gap: 0; }
.hwstep {
  display: grid; grid-template-columns: 64px 1fr;
  gap: 0 2rem; padding: 2.5rem 0; position: relative;
}
.hwstep:not(:last-child)::before {
  content: ''; position: absolute;
  left: 30px; top: 88px; bottom: 0;
  width: 1px; background: rgba(255,255,255,0.06);
}
.hwstep__num {
  width: 60px; height: 60px; border-radius: 18px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,207,255,0.12); border: 1px solid rgba(167,139,250,0.2);
  font-family: var(--display); font-size: 1.1rem; font-weight: 900;
  color: rgba(167,139,250,0.8); letter-spacing: -0.02em;
  position: relative; z-index: 1;
}
.hwstep__num--done {
  background: rgba(34,197,94,0.12); border-color: rgba(34,197,94,0.3);
  color: rgb(34,197,94);
}
.hwstep__num--done svg { width: 24px; height: 24px; }

.hwstep__content { padding-top: 0.75rem; }
.hwstep__title {
  font-family: var(--display); font-size: 1.1rem; font-weight: 800;
  color: #fff; margin: 0 0 0.75rem; letter-spacing: -0.01em;
}
.hwstep__desc {
  font-family: var(--body); font-size: 0.875rem; line-height: 1.7;
  color: rgba(255,255,255,0.5); margin: 0 0 0.85rem;
}
.hwstep__desc strong { color: rgba(255,255,255,0.75); }
.hwstep__list {
  margin: 0 0 0.85rem; padding-left: 1.25rem;
  font-family: var(--body); font-size: 0.85rem; color: rgba(255,255,255,0.5); line-height: 1.8;
}
.hwstep__list li { margin-bottom: 0.2rem; }
code {
  font-family: var(--mono); font-size: 0.82em;
  background: rgba(255,255,255,0.08); padding: 0.1em 0.4em;
  border-radius: 4px; color: rgba(167,139,250,0.9);
}

.hwstep__tip {
  display: flex; align-items: flex-start; gap: 0.6rem;
  padding: 0.8rem 1rem; border-radius: 10px;
  background: rgba(34,197,94,0.06); border: 1px solid rgba(34,197,94,0.15);
  font-family: var(--body); font-size: 0.78rem; color: rgba(34,197,94,0.8); line-height: 1.55;
}
.hwstep__tip--warn {
  background: rgba(251,191,36,0.06); border-color: rgba(251,191,36,0.15);
  color: rgba(251,191,36,0.8);
}
.hwstep__tip svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 0.1rem; }

.hwstep__substeps { display: flex; flex-direction: column; gap: 1rem; margin: 0 0 1rem; }
.hwstep__sub {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1rem 1.2rem; border-radius: 12px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
}
.hwstep__sub-letter {
  width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(167,139,250,0.12); border: 1px solid rgba(167,139,250,0.2);
  font-family: var(--display); font-size: 0.72rem; font-weight: 900; color: rgba(167,139,250,0.8);
}
.hwstep__sub-title {
  font-family: var(--body); font-size: 0.83rem; font-weight: 700;
  color: rgba(255,255,255,0.8); margin: 0 0 0.3rem;
}
.hwstep__sub-desc {
  font-family: var(--body); font-size: 0.78rem; color: rgba(255,255,255,0.6);
  margin: 0; line-height: 1.6;
}
.hwstep__sub-desc strong { color: rgba(255,255,255,0.7); }

/* Hotkeys */
.hwstep__hotkeys { display: flex; flex-direction: column; gap: 0.6rem; }
.hwstep__hotkey {
  display: flex; align-items: center; gap: 0.85rem;
  font-family: var(--body); font-size: 0.8rem; color: var(--gaming-text-dim);
}
kbd {
  font-family: var(--body); font-size: 0.72rem; font-weight: 700;
  padding: 0.25rem 0.7rem; border-radius: 7px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14);
  border-bottom-width: 2px; color: rgba(255,255,255,0.7);
  white-space: nowrap;
}

/* в”Ђв”Ђ Game tabs в”Ђв”Ђ */
.hwgame-tabs {
  border-radius: 18px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.025);
}
.hwgame-tabbar {
  display: flex; overflow-x: auto; border-bottom: 1px solid rgba(255,255,255,0.07);
  scrollbar-width: none;
}
.hwgame-tabbar::-webkit-scrollbar { display: none; }
.hwgame-tab {
  flex-shrink: 0; padding: 0.85rem 1.4rem;
  font-family: var(--body); font-size: 0.8rem; font-weight: 700;
  color: rgba(255,255,255,0.6); background: none; border: none; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color 0.2s, border-color 0.2s;
  white-space: nowrap;
}
.hwgame-tab:hover { color: rgba(255,255,255,0.7); }
.hwgame-tab.active {
  color: rgba(167,139,250,0.9);
  border-bottom-color: rgba(167,139,250,0.7);
}
.hwgame-panel { display: none; padding: 1.5rem; }
.hwgame-panel.active { display: block; }
.hwgame-panel__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; align-content: start; }
@media (max-width: 700px) { .hwgame-panel__grid { grid-template-columns: 1fr; } }

.hwgame-note {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 0 1rem;
  padding: 1.1rem 1.25rem;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(8,8,14,0.55);
  transition: background 0.2s, border-color 0.2s;
}
.hwgame-note:hover { background: rgba(255,255,255,0.035); }

.hwgame-note > svg {
  width: 34px;
  height: 34px;
  display: block;
  flex-shrink: 0;
  padding: 9px;
  box-sizing: content-box;
  border-radius: 9px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.09);
  margin-top: 0;
}
.hwgame-note--info > svg { color: rgba(96,165,250,0.85);  background: rgba(96,165,250,0.07);  border-color: rgba(96,165,250,0.18); }
.hwgame-note--warn > svg { color: rgba(251,191,36,0.85);  background: rgba(251,191,36,0.07);  border-color: rgba(251,191,36,0.18); }
.hwgame-note--ok   > svg { color: rgba(34,197,94,0.85);   background: rgba(34,197,94,0.06);   border-color: rgba(34,197,94,0.18); }

.hwgame-note > div { min-width: 0; }
.hwgame-note__title {
  font-family: var(--body); font-size: 0.82rem; font-weight: 700;
  color: rgba(255,255,255,0.85); margin: 0 0 0.2rem;
  white-space: normal; overflow: visible; text-overflow: unset;
}
.hwgame-note__desc {
  font-family: var(--body); font-size: 0.72rem; color: var(--gaming-text-dim);
  margin: 0; line-height: 1.55;
}

.hwgame-note::after {
  display: flex; align-items: center; gap: 0.35rem;
  font-family: var(--body); font-size: 0.68rem; font-weight: 700;
  white-space: nowrap; flex-shrink: 0;
  margin-top: 0.15rem;
}
.hwgame-note--info::after {
  content: 'Info';
  color: rgba(96,165,250,0.85);
}
.hwgame-note--warn::after {
  content: 'Warning';
  color: rgba(251,191,36,0.85);
}
.hwgame-note--ok::after {
  content: 'Verified';
  color: rgba(34,197,94,0.85);
}

.hwgame-link { color: rgba(167,139,250,0.8); text-decoration: underline; }
.hwgame-link:hover { color: rgba(167,139,250,1); }

/* в”Ђв”Ђ Troubleshooting grid в”Ђв”Ђ */
.hwtrouble-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  border: 1px solid rgba(255,255,255,0.08); border-radius: 18px; overflow: hidden;
  background: rgba(255,255,255,0.025);
}
@media (max-width: 700px) { .hwtrouble-grid { grid-template-columns: 1fr; } }

.hwtrouble-card {
  padding: 1.5rem 1.6rem;
  background: rgba(8,8,14,0.6);
  border-right: 1px solid rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: background 0.2s;
}
.hwtrouble-card:hover { background: rgba(255,255,255,0.035); }
.hwtrouble-card__q {
  display: flex; align-items: flex-start; gap: 0.6rem;
  font-family: var(--body); font-size: 0.88rem; font-weight: 700;
  color: rgba(255,255,255,0.85); margin-bottom: 0.7rem;
}
.hwtrouble-card__q svg { width: 16px; height: 16px; color: rgba(251,191,36,0.7); flex-shrink: 0; margin-top: 0.15rem; }
.hwtrouble-card__a {
  font-family: var(--body); font-size: 0.8rem; color: var(--gaming-text-dim);
  line-height: 1.65; margin: 0;
}
.hwtrouble-card__a a { color: rgba(167,139,250,0.8); text-decoration: underline; }

/* в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ
   FAQ PAGE
   в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ */

.faq-page { min-height: 100vh; padding-top: 72px; }

/* в”Ђв”Ђ Hero в”Ђв”Ђ */
.faq-hero {
  position: relative; padding: 5rem 0 3.5rem; overflow: hidden;
}
.faq-hero__bg {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 55% at 50% 0%, rgba(0,207,255,0.09) 0%, transparent 65%),
              radial-gradient(ellipse 35% 25% at 90% 20%, rgba(34,211,238,0.06) 0%, transparent 55%);
}
.faq-hero__inner {
  display: flex; flex-direction: column; align-items: center; gap: 1.5rem;
  text-align: center; position: relative; z-index: 1;
}
.faq-hero__title {
  font-family: var(--display); font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 900; letter-spacing: -0.03em; color: #fff; margin: 0; line-height: 1.1;
}
.faq-hero__sub {
  font-family: var(--body); font-size: 1rem; color: var(--gaming-text-dim);
  max-width: 500px; margin: 0;
}

/* Category pills */
.faq-cats {
  display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center;
  margin-top: 0.5rem;
}
.faq-cat {
  font-family: var(--body); font-size: 0.78rem; font-weight: 700;
  padding: 0.45rem 1.1rem; border-radius: 20px; cursor: pointer;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09);
  color: var(--gaming-text-dim); transition: all 0.2s;
}
.faq-cat:hover { background: rgba(255,255,255,0.09); color: rgba(255,255,255,0.75); }
.faq-cat.active {
  background: rgba(0,207,255,0.18); border-color: rgba(167,139,250,0.45);
  color: rgba(167,139,250,0.95);
}

/* в”Ђв”Ђ Layout в”Ђв”Ђ */
.faq-body { padding-bottom: 0; }
.faq-layout {
  display: grid; grid-template-columns: 220px 1fr; gap: 4rem; align-items: start;
}
@media (max-width: 900px) { .faq-layout { grid-template-columns: 1fr; } .faq-sidebar { display: none; } }

/* Sidebar */
.faq-sidebar { position: sticky; top: 90px; }
.faq-sidebar__label {
  font-family: var(--body); font-size: 0.65rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--gaming-text-dim);
  margin-bottom: 0.75rem;
}
.faq-sidebar nav { display: flex; flex-direction: column; gap: 0.2rem; margin-bottom: 2rem; }
.faq-sidebar__link {
  font-family: var(--body); font-size: 0.8rem; font-weight: 600;
  color: var(--gaming-text-dim); padding: 0.45rem 0.7rem; border-radius: 8px;
  text-decoration: none; border-left: 2px solid transparent;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.faq-sidebar__link:hover { color: rgba(255,255,255,0.65); background: rgba(255,255,255,0.04); }
.faq-sidebar__link.active {
  color: rgba(167,139,250,0.9); background: rgba(0,207,255,0.08);
  border-left-color: rgba(167,139,250,0.55);
}
.faq-sidebar__cta {
  padding: 1rem 1.1rem; border-radius: 12px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07);
}
.faq-sidebar__cta p {
  font-family: var(--body); font-size: 0.75rem; color: var(--gaming-text-dim); margin: 0 0 0.75rem;
}
.btn-sm {
  padding: 0.5rem 1rem; font-size: 0.75rem; gap: 0.35rem;
}
.btn-sm svg { width: 13px; height: 13px; }

/* FAQ groups */
.faq-content { display: flex; flex-direction: column; gap: 3.5rem; padding-bottom: 4rem; }

.faq-group__head {
  display: flex; align-items: center; gap: 0.85rem; margin-bottom: 1.2rem;
  padding-bottom: 1rem; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.faq-group__icon {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,207,255,0.1); border: 1px solid rgba(167,139,250,0.2);
}
.faq-group__icon svg { width: 16px; height: 16px; color: rgba(167,139,250,0.7); }
.faq-group__title {
  font-family: var(--display); font-size: 1.05rem; font-weight: 800;
  color: #fff; margin: 0; flex: 1; letter-spacing: -0.01em;
}
.faq-group__count {
  font-family: var(--body); font-size: 0.68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em; color: var(--gaming-text-dim);
}

/* Accordion items */
.faq-item {
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.faq-item:last-child { border-bottom: none; }

.faq-item__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1.1rem 0; background: none; border: none; cursor: pointer; text-align: left;
  font-family: var(--body); font-size: 0.9rem; font-weight: 600;
  color: rgba(255,255,255,0.7); transition: color 0.2s;
}
.faq-item__q:hover { color: rgba(255,255,255,0.95); }
.faq-item.open .faq-item__q { color: #fff; }
.faq-item__chevron {
  width: 18px; height: 18px; flex-shrink: 0; color: var(--gaming-text-dim);
  transition: transform 0.25s ease, color 0.2s;
}
.faq-item.open .faq-item__chevron {
  transform: rotate(180deg);
  color: rgba(167,139,250,0.7);
}

.faq-item__a {
  padding-bottom: 1.2rem;
}
.faq-item__a p {
  font-family: var(--body); font-size: 0.85rem; line-height: 1.75;
  color: var(--gaming-text-dim); margin: 0 0 0.75rem;
}
.faq-item__a p:last-child { margin-bottom: 0; }
.faq-item__a ul {
  margin: 0 0 0.75rem; padding-left: 1.2rem;
  font-family: var(--body); font-size: 0.84rem; color: var(--gaming-text-dim); line-height: 1.75;
}
.faq-item__a li { margin-bottom: 0.25rem; }
.faq-item__a strong { color: rgba(255,255,255,0.75); }
.faq-item__a a { color: rgba(167,139,250,0.8); text-decoration: underline; }
.faq-item__a a:hover { color: rgba(167,139,250,1); }

/* Responsive */
@media (max-width: 540px) {
  .hwstep { grid-template-columns: 48px 1fr; gap: 0 1.2rem; padding: 1.75rem 0; }
  .hwstep::before { left: 22px; top: 72px; }
  .hwstep__num { width: 44px; height: 44px; border-radius: 13px; font-size: 0.9rem; }
  .hwstep__title { font-size: 0.95rem; }
  .hwtrouble-grid { grid-template-columns: 1fr; }
  .hwgame-panel { padding: 1.2rem; }
  .howto-reqs-head { position: static; }
}

/* в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ
   AUTH MODAL
   в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ */

/* Overlay */
.auth-modal {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  inset: 0;
  z-index: 1000;
  padding: 1rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.auth-modal.open {
  opacity: 1;
  pointer-events: all;
}

/* Backdrop */
.auth-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 6, 16, 0.82);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
}

/* Panel */
.auth-modal__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  background: rgba(12, 16, 32, 0.96);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 2.2rem 2.2rem 2rem;
  box-shadow: 0 32px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(var(--gaming-cta-rgb),0.12) inset;
  transform: translateY(18px) scale(0.97);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease;
}
.auth-modal.open .auth-modal__panel {
  transform: translateY(0) scale(1);
}

/* Close button */
.auth-modal__close {
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  color: rgba(255,255,255,0.5);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.auth-modal__close:hover { background: rgba(255,255,255,0.12); color: #fff; }
.auth-modal__close svg { width: 14px; height: 14px; }

/* Logo */
.auth-modal__logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.6rem;
}
.auth-modal__logo svg {
  width: 26px; height: 26px;
  color: var(--accent);
}
.auth-modal__logo span {
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #fff;
}

/* Tabs */
.auth-tabs {
  position: relative;
  display: flex;
  gap: 0;
  background: rgba(255,255,255,0.05);
  border-radius: 10px;
  padding: 3px;
  margin-bottom: 1.8rem;
}
.auth-tab {
  flex: 1;
  padding: 0.55rem 1rem;
  border-radius: 8px;
  font-family: var(--body);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gaming-text-dim);
  background: transparent;
  border: none;
  cursor: pointer;
  position: relative;
  z-index: 1;
  transition: color 0.2s;
}
.auth-tab.active { color: #fff; }
.auth-tab__indicator {
  position: absolute;
  top: 3px; left: 3px;
  width: calc(50% - 3px);
  height: calc(100% - 6px);
  background: rgba(var(--gaming-cta-rgb),0.28);
  border: 1px solid rgba(var(--gaming-cta-rgb),0.4);
  border-radius: 7px;
  transition: transform 0.25s cubic-bezier(0.22,1,0.36,1);
}
.auth-tabs.tab-right .auth-tab__indicator {
  transform: translateX(calc(100% + 3px));
}

/* Forms */
.auth-form { display: none; flex-direction: column; gap: 1rem; }
.auth-form.active { display: flex; }

/* Fields */
.auth-field { display: flex; flex-direction: column; gap: 0.45rem; }
.auth-field label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--body);
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.auth-forgot {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.8;
  transition: opacity 0.2s;
}
.auth-forgot:hover { opacity: 1; }

.auth-input-wrap { position: relative; }
.auth-field input,
.auth-input-wrap input {
  width: 100%;
  padding: 0.75rem 1rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  color: #fff;
  font-family: var(--body);
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}
.auth-input-wrap input { padding-right: 2.8rem; }
.auth-field input::placeholder,
.auth-input-wrap input::placeholder { color: rgba(255,255,255,0.5); }
.auth-field input:focus,
.auth-input-wrap input:focus {
  border-color: rgba(var(--gaming-cta-rgb),0.6);
  background: rgba(var(--gaming-cta-rgb),0.06);
  box-shadow: 0 0 0 3px rgba(var(--gaming-cta-rgb),0.12);
}

/* Eye toggle */
.auth-eye {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--gaming-text-dim);
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  transition: color 0.2s;
}
.auth-eye:hover { color: rgba(255,255,255,0.7); }
.auth-eye svg { width: 16px; height: 16px; }

/* Submit button */
.auth-submit {
  width: 100%;
  justify-content: center;
  margin-top: 0.25rem;
  padding: 0.85rem 1.5rem;
  font-size: 0.9rem;
}

/* Divider */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--gaming-text-dim);
  font-size: 0.75rem;
  font-family: var(--body);
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.08);
}

/* Discord button */
.auth-discord {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.75rem 1rem;
  background: #5865F2;
  border: none;
  border-radius: 10px;
  color: #fff;
  font-family: var(--body);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}
.auth-discord:hover { background: #4752c4; transform: translateY(-1px); }
.auth-discord:active { transform: translateY(0); }
.auth-discord svg { width: 18px; height: 18px; }

/* Switch link */
.auth-switch {
  text-align: center;
  font-family: var(--body);
  font-size: 0.8rem;
  color: var(--gaming-text-dim);
  margin: 0;
}
.auth-switch-btn {
  background: none;
  border: none;
  color: var(--accent);
  font-size: inherit;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  transition: opacity 0.2s;
}
.auth-switch-btn:hover { opacity: 0.8; }

/* Checkbox */
.auth-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  cursor: pointer;
  font-family: var(--body);
  font-size: 0.8rem;
  color: var(--gaming-text-dim);
  line-height: 1.5;
}
.auth-checkbox input[type="checkbox"] { display: none; }
.auth-checkbox__box {
  flex-shrink: 0;
  width: 16px; height: 16px;
  border: 1.5px solid rgba(255,255,255,0.2);
  border-radius: 4px;
  margin-top: 1px;
  transition: background 0.15s, border-color 0.15s;
  display: flex; align-items: center; justify-content: center;
}
.auth-checkbox input:checked ~ .auth-checkbox__box {
  background: var(--accent);
  border-color: var(--accent);
}
.auth-checkbox input:checked ~ .auth-checkbox__box::after {
  content: '';
  display: block;
  width: 8px; height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px);
}
.auth-checkbox a { color: var(--accent); text-decoration: none; }
.auth-checkbox a:hover { text-decoration: underline; }

/* Body lock when modal open */
body.auth-open { overflow: hidden; }

/* Mobile */
@media (max-width: 480px) {
  .auth-modal__panel { padding: 1.6rem 1.4rem 1.5rem; border-radius: 16px; }
}

/* в”Ђв”Ђ Auth field error state в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.auth-field__error {
  display: block;
  font-family: var(--body);
  font-size: 0.75rem;
  color: #f87171;
  margin-top: 0.3rem;
  min-height: 1em;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.auth-field__error.visible {
  opacity: 1;
  transform: translateY(0);
}
.auth-field.has-error input {
  border-color: rgba(248, 113, 113, 0.7);
  background: rgba(248, 113, 113, 0.06);
  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.12);
}
.auth-field.has-success input {
  border-color: rgba(52, 211, 153, 0.6);
  background: rgba(52, 211, 153, 0.05);
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.1);
}

/* в•ђв•ђ How-Steps strip (product detail) в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ */
.how-steps {
  padding: 4rem 0 5rem;
  background: linear-gradient(180deg, var(--gaming-bg) 0%, rgba(var(--gaming-cta-rgb),0.04) 50%, var(--gaming-bg) 100%);
  border-top: 1px solid rgba(255,255,255,0.04);
}
.how-steps__title {
  text-align: center;
  font-size: clamp(1.2rem, 2.5vw, 1.55rem);
  font-weight: 700;
  color: #fff;
  margin: 0 0 2.75rem;
  letter-spacing: -0.01em;
}
.how-steps__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
}
.how-steps__item {
  flex: 1;
  min-width: 180px;
  max-width: 240px;
  text-align: center;
  padding: 2rem 1.4rem 1.75rem;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  position: relative;
  transition: border-color 0.25s, background 0.25s, transform 0.25s;
}
.how-steps__item:hover {
  border-color: rgba(var(--gaming-cta-rgb),0.35);
  background: rgba(var(--gaming-cta-rgb),0.06);
  transform: translateY(-3px);
}
.how-steps__num {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(var(--gaming-cta-rgb),0.18);
  border: 1px solid rgba(var(--gaming-cta-rgb),0.4);
  color: var(--gaming-accent-light);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 2px 10px;
  border-radius: 20px;
  white-space: nowrap;
}
.how-steps__icon {
  width: 52px;
  height: 52px;
  margin: 0.6rem auto 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--gaming-cta-rgb),0.1);
  border: 1px solid rgba(var(--gaming-cta-rgb),0.22);
  border-radius: 14px;
  color: var(--gaming-accent-light);
  transition: background 0.25s, border-color 0.25s;
}
.how-steps__item:hover .how-steps__icon {
  background: rgba(var(--gaming-cta-rgb),0.18);
  border-color: rgba(var(--gaming-cta-rgb),0.4);
}
.how-steps__icon svg { width: 24px; height: 24px; }
.how-steps__label {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 0.45rem;
}
.how-steps__desc {
  font-size: 0.8rem;
  color: var(--gaming-text-muted);
  line-height: 1.55;
  margin: 0;
}
.how-steps__connector {
  flex: 0 0 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.8;
}
.how-steps__connector svg { width: 40px; height: 12px; }
@media (max-width: 680px) {
  .how-steps__row { flex-direction: column; align-items: center; gap: 1.5rem; }
  .how-steps__connector { transform: rotate(90deg); }
  .how-steps__item { max-width: 100%; width: 100%; }
}

/* в•ђв•ђ Catalog search bar в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ */
.pfilter-search-wrap {
  display: flex;
  align-items: center;
}
.pfilter-search {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  color: #fff;
  font-size: 0.82rem;
  padding: 0.44rem 0.9rem 0.44rem 2.1rem;
  min-width: 190px;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.35)' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 8px center;
}
.pfilter-search:focus {
  border-color: rgba(var(--gaming-cta-rgb),0.5);
  background-color: rgba(var(--gaming-cta-rgb),0.07);
  box-shadow: 0 0 0 2px rgba(var(--gaming-cta-rgb),0.12);
}
.pfilter-search::placeholder { color: rgba(255,255,255,0.5); }
.pfilter-search::-webkit-search-cancel-button { opacity: 0.4; cursor: pointer; }

/* в•ђв•ђ Footer payment icons в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ */
/* в”Ђв”Ђ Accepted Payment Methods panel в”Ђв”Ђ */
.footer__pay-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 1.1rem 1.5rem 0.9rem;
  margin-top: 1rem;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.footer__pay-panel-title {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gaming-text-dim);
}
.footer__pay-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0.65rem 1rem;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.025);
}
.footer__pay-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 30px;
  border-radius: 8px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  transition: background 0.18s, border-color 0.18s, transform 0.15s;
  cursor: default;
  flex-shrink: 0;
}
.footer__pay-chip:hover {
  background: rgba(255,255,255,0.09);
  border-color: rgba(255,255,255,0.16);
  transform: translateY(-1px);
}
.footer__pay-chip svg { display: block; max-width: 36px; max-height: 22px; }
.footer__pay-chip--more {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--gaming-text-dim);
  font-family: var(--body);
  letter-spacing: -0.01em;
}

/* ══ detail-updated-badge — inline pill ══════════════════════════ */
.detail-updated-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 500;
  color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  padding: 3px 10px;
  white-space: nowrap;
  line-height: 1;
}
.detail-updated-badge svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

/* ══ product-card__game — prevent overflow in carousel ═══════════ */
.product-card__head {
  flex-wrap: nowrap;
}
.product-card__head .status-pill {
  flex-shrink: 0;
}
.product-card__game {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex-shrink: 1;
  max-width: 50%;
}

/* ══ dbb__payment — buy box payment method ═══════════════════════ */
.dbb__payment {
  margin-bottom: 1rem;
}
.dbb__payment-label {
  font-size: 0.72rem;
  color: var(--gaming-text-muted);
  margin: 0 0 0.5rem;
}
.dbb__payment-icons {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.dbb__pay-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(255,255,255,0.6);
  background: rgba(var(--gaming-cta-rgb),0.08);
  border: 1px solid rgba(var(--gaming-cta-rgb),0.2);
  border-radius: 6px;
  padding: 0.3rem 0.65rem;
  white-space: nowrap;
}
.dbb__pay-badge svg { width: 13px; height: 13px; flex-shrink: 0; }
.dbb__pay-card {
  display: inline-flex;
  align-items: center;
  opacity: 0.7;
}
.dbb__pay-card svg { height: 18px; width: auto; display: block; }

    /* в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ
       BALANCE SYSTEM
    в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */

    /* Navbar balance chip */
    .navbar__balance {
      order: -1;                          /* sit left of account icon */
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      padding: 0 13px 0 10px;
      height: 38px;                       /* match .navbar__icon-btn */
      border-radius: var(--radius-sm);    /* match .navbar__icon-btn */
      background: rgba(16,217,160,0.08);
      border: 1px solid rgba(16,217,160,0.22);
      color: #10d9a0;
      font-size: 0.82rem;
      font-weight: 700;
      text-decoration: none;
      transition: all 0.2s;
      white-space: nowrap;
      font-family: var(--body);
      line-height: 1;
    }
    .navbar__balance:hover {
      background: rgba(16,217,160,0.15);
      border-color: rgba(16,217,160,0.42);
      color: #10d9a0;
      text-decoration: none;
    }

    /* Dashboard balance card */
    .dash-balance {
      background: linear-gradient(135deg,
        rgba(16,217,160,0.06) 0%,
        rgba(var(--gaming-cta-rgb),0.06) 100%);
      border: 1px solid rgba(16,217,160,0.18);
      border-radius: 16px;
      padding: 1.5rem 1.75rem;
      display: flex;
      align-items: center;
      gap: 1.25rem;
      margin-bottom: 2rem;
      transition: border-color 0.2s;
    }
    .dash-balance:hover { border-color: rgba(16,217,160,0.28); }
    .dash-balance__icon {
      width: 50px;
      height: 50px;
      border-radius: 14px;
      background: rgba(16,217,160,0.12);
      border: 1px solid rgba(16,217,160,0.25);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      color: #10d9a0;
    }
    .dash-balance__info { flex: 1; min-width: 0; }
    .dash-balance__label {
      font-size: 0.68rem;
      font-weight: 700;
      color: rgba(255,255,255,0.6);
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin: 0 0 0.25rem;
    }
    .dash-balance__amount {
      font-size: 1.8rem;
      font-weight: 800;
      color: #10d9a0;
      font-family: var(--display);
      margin: 0 0 0.2rem;
      line-height: 1.1;
    }
    .dash-balance__sub {
      font-size: 0.7rem;
      color: var(--gaming-text-dim);
      margin: 0;
    }
    .dash-balance__actions {
      display: flex;
      gap: 0.5rem;
      flex-shrink: 0;
    }
    .dash-balance__topup {
      background: rgba(16,217,160,0.15);
      border: 1px solid rgba(16,217,160,0.35);
      color: #10d9a0;
      font-size: 0.78rem;
      font-weight: 700;
      font-family: var(--body);
      padding: 0.6rem 1.1rem;
      border-radius: 10px;
      cursor: pointer;
      transition: all 0.2s;
      white-space: nowrap;
    }
    .dash-balance__topup:hover {
      background: rgba(16,217,160,0.25);
      border-color: rgba(16,217,160,0.55);
      color: #fff;
    }
    .dash-balance__history-btn {
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.09);
      color: var(--gaming-text-dim);
      font-size: 0.78rem;
      font-weight: 600;
      font-family: var(--body);
      padding: 0.6rem 1rem;
      border-radius: 10px;
      cursor: pointer;
      transition: all 0.2s;
      white-space: nowrap;
    }
    .dash-balance__history-btn:hover {
      background: rgba(255,255,255,0.07);
      color: #fff;
    }

    /* Transaction history table */
    .dash-txns {
      display: none;
      background: rgba(255,255,255,0.02);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: 14px;
      padding: 0.25rem 1.25rem;
      margin-bottom: 2rem;
    }
    .dash-txns.open { display: block; }
    .dash-txns__head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1rem 0 0.75rem;
      border-bottom: 1px solid rgba(255,255,255,0.05);
      margin-bottom: 0.25rem;
    }
    .dash-txns__title {
      font-size: 0.8rem;
      font-weight: 700;
      color: #fff;
      margin: 0;
    }
    .dash-txns__clear {
      background: none;
      border: none;
      color: var(--gaming-text-dim);
      font-size: 0.7rem;
      cursor: pointer;
      padding: 0;
      transition: color 0.2s;
    }
    .dash-txns__clear:hover { color: rgba(239,68,68,0.7); }
    .dash-txn {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      padding: 0.75rem 0;
      border-bottom: 1px solid rgba(255,255,255,0.04);
    }
    .dash-txn:last-child { border-bottom: none; }
    .dash-txn__icon {
      width: 34px;
      height: 34px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      font-size: 0.85rem;
    }
    .dash-txn__icon--in  { background: rgba(16,217,160,0.12); color: #10d9a0; }
    .dash-txn__icon--out { background: rgba(239,68,68,0.1);   color: rgba(239,68,68,0.8); }
    .dash-txn__icon--ref { background: rgba(var(--gaming-cta-rgb),0.12); color: #8b85ff; }
    .dash-txn__info { flex: 1; min-width: 0; }
    .dash-txn__name { font-size: 0.8rem; font-weight: 600; color: #fff; margin: 0 0 0.1rem; }
    .dash-txn__date { font-size: 0.67rem; color: var(--gaming-text-dim); margin: 0; }
    .dash-txn__amount { font-size: 0.85rem; font-weight: 700; white-space: nowrap; }
    .dash-txn__amount--in  { color: #10d9a0; }
    .dash-txn__amount--out { color: rgba(239,68,68,0.8); }
    .dash-txn__amount--ref { color: #8b85ff; }
    .dash-txns__empty {
      padding: 1.5rem 0;
      text-align: center;
      font-size: 0.78rem;
      color: var(--gaming-text-dim);
    }

    /* Top-up modal */
    .topup-modal-bg {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.75);
      backdrop-filter: blur(8px) saturate(120%);
      -webkit-backdrop-filter: blur(8px) saturate(120%);
      z-index: 10000;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.25s, visibility 0.25s;
    }
    .topup-modal-bg.open {
      opacity: 1;
      visibility: visible;
    }
    .topup-modal {
      background: rgba(13,12,22,0.98);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 20px;
      padding: 2rem;
      width: min(460px, 92vw);
      position: relative;
      box-shadow: 0 40px 100px -20px rgba(0,0,0,0.8),
                  0 0 0 1px rgba(255,255,255,0.04),
                  0 0 60px -20px rgba(16,217,160,0.08);
      transform: translateY(18px) scale(0.98);
      transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .topup-modal-bg.open .topup-modal { transform: translateY(0) scale(1); }
    .topup-modal__close {
      position: absolute;
      top: 1rem; right: 1rem;
      width: 30px; height: 30px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 8px;
      color: var(--gaming-text-dim);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s;
      padding: 0;
    }
    .topup-modal__close:hover { background: rgba(255,255,255,0.1); color: #fff; }
    .topup-modal__header { margin-bottom: 1.5rem; }
    .topup-modal__title {
      font-size: 1.1rem;
      font-weight: 800;
      color: #fff;
      font-family: var(--display);
      margin: 0 0 0.3rem;
    }
    .topup-modal__sub {
      font-size: 0.76rem;
      color: rgba(255,255,255,0.6);
      margin: 0;
    }
    .topup-modal__current {
      display: flex;
      align-items: center;
      gap: 0.6rem;
      background: rgba(16,217,160,0.06);
      border: 1px solid rgba(16,217,160,0.16);
      border-radius: 10px;
      padding: 0.7rem 1rem;
      margin-bottom: 1.25rem;
      font-size: 0.78rem;
      color: rgba(255,255,255,0.5);
    }
    .topup-modal__current strong { color: #10d9a0; font-size: 0.9rem; }
    .topup-presets {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0.45rem;
      margin-bottom: 0.9rem;
    }
    .topup-preset {
      padding: 0.65rem 0.5rem;
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,0.09);
      background: rgba(255,255,255,0.03);
      color: rgba(255,255,255,0.65);
      font-size: 0.82rem;
      font-weight: 700;
      font-family: var(--body);
      cursor: pointer;
      text-align: center;
      transition: all 0.18s;
    }
    .topup-preset:hover, .topup-preset.active {
      border-color: rgba(16,217,160,0.45);
      background: rgba(16,217,160,0.1);
      color: #10d9a0;
    }
    .topup-custom-row {
      display: flex;
      align-items: center;
      gap: 0;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 10px;
      overflow: hidden;
      margin-bottom: 1.1rem;
    }
    .topup-custom-row.focused { border-color: rgba(16,217,160,0.4); }
    .topup-custom__pfx {
      padding: 0 0.8rem;
      color: rgba(255,255,255,0.6);
      font-size: 0.9rem;
      font-weight: 700;
      border-right: 1px solid rgba(255,255,255,0.08);
      line-height: 1;
      user-select: none;
    }
    .topup-custom__input {
      flex: 1;
      background: transparent;
      border: none;
      color: #fff;
      font-size: 0.88rem;
      font-weight: 600;
      font-family: var(--body);
      padding: 0.7rem 0.75rem;
      outline: none;
    }
    .topup-custom__input::placeholder { color: rgba(255,255,255,0.5); }
    .topup-method-section { margin-bottom: 1.1rem; }
    .topup-method-label {
      font-size: 0.67rem;
      color: var(--gaming-text-dim);
      text-transform: uppercase;
      letter-spacing: 0.09em;
      margin-bottom: 0.45rem;
    }
    .topup-method-btns { display: flex; gap: 0.4rem; }
    .topup-method-btn {
      flex: 1;
      padding: 0.55rem;
      border-radius: 8px;
      border: 1px solid rgba(255,255,255,0.09);
      background: rgba(255,255,255,0.03);
      color: var(--gaming-text-dim);
      font-size: 0.72rem;
      font-weight: 600;
      font-family: var(--body);
      cursor: pointer;
      transition: all 0.18s;
      text-align: center;
    }
    .topup-method-btn.active {
      border-color: rgba(var(--gaming-cta-rgb),0.5);
      background: rgba(var(--gaming-cta-rgb),0.1);
      color: #8b85ff;
    }
    .topup-confirm-btn {
      width: 100%;
      padding: 0.9rem;
      border-radius: 12px;
      background: linear-gradient(135deg, #10d9a0 0%, #0ab885 100%);
      border: none;
      color: #061a14;
      font-size: 0.88rem;
      font-weight: 800;
      font-family: var(--body);
      cursor: pointer;
      transition: filter 0.2s, transform 0.15s;
      letter-spacing: 0.01em;
    }
    .topup-confirm-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
    .topup-confirm-btn:active { transform: translateY(0); }
    .topup-confirm-btn:disabled { opacity: 0.45; cursor: not-allowed; filter: none; transform: none; }
    /* Success screen */
    .topup-success {
      display: none;
      text-align: center;
      padding: 0.5rem 0 1rem;
    }
    .topup-success.show { display: block; }
    .topup-success__ring {
      width: 60px; height: 60px;
      border-radius: 50%;
      background: rgba(16,217,160,0.12);
      border: 1px solid rgba(16,217,160,0.3);
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 1rem;
      color: #10d9a0;
    }
    .topup-success__title {
      font-size: 1.05rem;
      font-weight: 800;
      color: #fff;
      margin: 0 0 0.35rem;
      font-family: var(--display);
    }
    .topup-success__sub { font-size: 0.78rem; color: rgba(255,255,255,0.6); margin: 0; }

    /* Redeem gift / bonus code */
    .topup-redeem { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid rgba(255,255,255,0.07); }
    .topup-redeem__divider {
      display: flex; align-items: center; justify-content: center;
      font-size: 0.67rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em;
      color: var(--gaming-text-dim); margin-bottom: 0.6rem; text-align: center;
    }
    .topup-redeem__row {
      display: flex; gap: 0.4rem; align-items: stretch;
    }
    .topup-redeem__input {
      flex: 1; min-width: 0;
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.09);
      border-radius: 8px;
      color: #fff;
      font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em;
      font-family: var(--body);
      padding: 0.62rem 0.75rem;
      outline: none;
      text-transform: uppercase;
      transition: border-color 0.18s, background 0.18s;
    }
    .topup-redeem__input::placeholder { color: rgba(255,255,255,0.5); text-transform: none; letter-spacing: 0; }
    .topup-redeem__input:focus { border-color: rgba(var(--gaming-cta-rgb),0.5); background: rgba(var(--gaming-cta-rgb),0.06); }
    .topup-redeem__btn {
      flex: 0 0 auto;
      padding: 0.62rem 1.1rem;
      border-radius: 8px;
      border: 1px solid rgba(var(--gaming-cta-rgb),0.4);
      background: rgba(var(--gaming-cta-rgb),0.12);
      color: #8b85ff;
      font-size: 0.78rem; font-weight: 700;
      font-family: var(--body);
      cursor: pointer;
      transition: all 0.18s;
    }
    .topup-redeem__btn:hover { background: rgba(var(--gaming-cta-rgb),0.2); color: #a9a4ff; }
    .topup-redeem__btn:active { transform: translateY(1px); }
    .topup-redeem__btn:disabled { opacity: 0.45; cursor: not-allowed; }
    .topup-redeem__msg {
      margin: 0.55rem 0 0;
      font-size: 0.74rem; font-weight: 600; line-height: 1.35;
      display: flex; align-items: flex-start; gap: 0.35rem;
    }
    .topup-redeem__msg--ok  { color: #10d9a0; }
    .topup-redeem__msg--err { color: #ff7a8a; }
    .topup-redeem__hint {
      margin: 0.55rem 0 0;
      font-size: 0.7rem; font-weight: 500; line-height: 1.4;
      color: var(--gaming-text-dim);
    }

    /* Checkout balance method */
    .co-pay-method--balance .co-pay-method__name { color: #10d9a0; }
    .co-balance-info {
      display: none;
      margin-top: 0.6rem;
      padding: 0.7rem 0.9rem;
      border-radius: 10px;
      font-size: 0.74rem;
      gap: 0.45rem;
      align-items: center;
    }
    .co-balance-info.show { display: flex; }
    .co-balance-info--ok {
      background: rgba(16,217,160,0.07);
      border: 1px solid rgba(16,217,160,0.2);
      color: rgba(255,255,255,0.6);
    }
    .co-balance-info--ok strong { color: #10d9a0; }
    .co-balance-info--low {
      background: rgba(239,68,68,0.06);
      border: 1px solid rgba(239,68,68,0.2);
      color: rgba(255,255,255,0.55);
    }
    .co-balance-info--low strong { color: rgba(239,68,68,0.85); }
    .co-balance-topup-link {
      margin-left: auto;
      color: #8b85ff;
      font-weight: 700;
      text-decoration: none;
      font-size: 0.72rem;
    }
    .co-balance-topup-link:hover { color: #fff; }

    /* в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ
   CART DROPDOWN  — premium glassmorphism
в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ */
/* в•ђв•ђ Notification center в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ */
.notif-wrap { position: relative; }
.notif-bell { position: relative; }
.notif-bell__badge {
  position: absolute; top: -5px; right: -5px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 9999px; background: var(--gaming-accent); color: #fff;
  font-size: 0.65rem; font-weight: 700; line-height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px rgba(6,6,16,0.9);
}
.notif-dropdown {
  position: absolute; top: calc(100% + 12px); right: -8px; width: 360px;
  background: rgba(6,6,16,0.88);
  backdrop-filter: blur(40px) saturate(180%); -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(var(--gaming-cta-rgb),0.18); border-radius: 20px;
  box-shadow: 0 0 0 1px rgba(var(--gaming-cta-rgb),0.1), 0 24px 64px rgba(0,0,0,0.7), 0 8px 24px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.06);
  z-index: 9999; overflow: hidden; opacity: 0; transform: translateY(-8px) scale(0.97);
  pointer-events: none;
  transition: opacity 0.25s cubic-bezier(0.16,1,0.3,1), transform 0.25s cubic-bezier(0.16,1,0.3,1);
}
.notif-dropdown::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--gaming-cta) 0%, #10d9a0 50%, var(--gaming-cta) 100%);
  background-size: 200% 100%; animation: cart-shimmer 3s linear infinite;
}
.notif-dropdown.visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: all; }
.notif-dropdown__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 1.25rem 0.9rem; border-bottom: 1px solid rgba(255,255,255,0.05);
}
.notif-dropdown__title {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.85rem; font-weight: 700; color: #fff;
  font-family: var(--display); letter-spacing: -0.01em;
}
.notif-dropdown__title svg { color: var(--gaming-cta); }
.notif-dropdown__count {
  background: var(--gaming-accent-soft); color: var(--gaming-accent);
  border-radius: 9999px; min-width: 18px; padding: 0 6px;
  font-size: 0.68rem; font-weight: 700; text-align: center;
}
.notif-mark-all {
  background: none; border: none; color: var(--gaming-text-muted);
  font-size: 0.72rem; font-weight: 600; cursor: pointer; transition: color 0.2s;
}
.notif-mark-all:hover:not(:disabled) { color: #fff; }
.notif-mark-all:disabled { opacity: 0.4; cursor: default; }
.notif-list { list-style: none; margin: 0; padding: 0.35rem; max-height: 360px; overflow-y: auto; }
.notif-item {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: 0.7rem; padding: 0.7rem 0.8rem; border-radius: 12px; cursor: pointer;
  transition: background 0.18s; position: relative;
}
.notif-item:hover, .notif-item:focus-visible { background: rgba(255,255,255,0.04); outline: none; }
.notif-item__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
}
.notif-item__icon svg { width: 15px; height: 15px; }
.notif-item__icon--key { background: rgba(16,217,160,0.12); color: #10d9a0; }
.notif-item__icon--order { background: rgba(var(--gaming-cta-rgb),0.14); color: #8b83ff; }
.notif-item__icon--ticket { background: rgba(56,189,248,0.12); color: #38bdf8; }
.notif-item__icon--payout { background: rgba(16,217,160,0.12); color: #10d9a0; }
.notif-item__icon--price { background: rgba(245,158,11,0.14); color: #f59e0b; }
.notif-item__body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.notif-item__title {
  font-size: 0.8rem; font-weight: 600; color: var(--gaming-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.notif-item__text {
  font-size: 0.72rem; color: var(--gaming-text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.notif-item__time { font-size: 0.68rem; color: var(--gaming-text-muted); flex-shrink: 0; align-self: flex-start; padding-right: 0.5rem; }
.notif-item__dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--gaming-accent);
  position: absolute; right: 0.55rem; top: 50%; transform: translateY(-50%); display: none;
}
.notif-item--unread { background: rgba(var(--gaming-cta-rgb),0.05); }
.notif-item--unread .notif-item__dot { display: block; }
.notif-item--unread .notif-item__title { color: #fff; }
.notif-empty { padding: 1.75rem 1.25rem; text-align: center; }
.notif-empty__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin: 0 auto 0.65rem;
  color: var(--gaming-text-muted);
  opacity: 0.45;
}
.notif-empty__icon svg {
  width: 1.65rem;
  height: 1.65rem;
  display: block;
  flex-shrink: 0;
}
.notif-empty p { margin: 0; font-size: 0.85rem; color: #fff; font-weight: 600; }
.notif-empty .notif-empty__sub { font-size: 0.72rem; color: var(--gaming-text-muted); font-weight: 400; margin-top: 0.2rem; }
.notif-dropdown__foot { padding: 0.6rem; border-top: 1px solid rgba(255,255,255,0.05); }
.notif-viewall {
  width: 100%; background: rgba(255,255,255,0.03); border: 1px solid var(--gaming-border);
  color: #fff; padding: 0.55rem; border-radius: 10px;
  font-size: 0.76rem; font-weight: 600; cursor: pointer; transition: all 0.2s;
}
.notif-viewall:hover { border-color: var(--gaming-accent); background: var(--gaming-accent-soft); }
@media (max-width: 480px) { .notif-dropdown { width: 300px; right: -56px; } }

.cart-wrap {
  position: relative;
}

.cart-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  right: -8px;
  width: 360px;
  background: rgba(6, 6, 16, 0.88);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(var(--gaming-cta-rgb),0.18);
  border-radius: 20px;
  box-shadow:
    0 0 0 1px rgba(var(--gaming-cta-rgb),0.1),
    0 24px 64px rgba(0,0,0,0.7),
    0 8px 24px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.06);
  z-index: 9999;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-8px) scale(0.97);
  pointer-events: none;
  transition: opacity 0.25s cubic-bezier(0.16,1,0.3,1),
              transform 0.25s cubic-bezier(0.16,1,0.3,1);
}
/* Top accent line */
.cart-dropdown::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gaming-cta) 0%, #10d9a0 50%, var(--gaming-cta) 100%);
  background-size: 200% 100%;
  animation: cart-shimmer 3s linear infinite;
}
@keyframes cart-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.cart-dropdown.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: all;
}

/* в”Ђв”Ђ Head в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.cart-dropdown__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.25rem 0.9rem;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.cart-dropdown__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  font-family: var(--display);
  letter-spacing: -0.01em;
}
.cart-dropdown__title svg { color: var(--gaming-cta); }
.cart-dropdown__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--gaming-cta), var(--gaming-cta-dark));
  font-size: 0.6rem;
  font-weight: 800;
  color: #fff;
  font-family: var(--display);
  margin-left: 2px;
}
.cart-clear-btn {
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--gaming-text-dim);
  background: none;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  cursor: pointer;
  padding: 3px 8px;
  transition: all 0.2s;
  letter-spacing: 0.03em;
}
.cart-clear-btn:hover {
  color: rgba(239,68,68,0.9);
  border-color: rgba(239,68,68,0.3);
  background: rgba(239,68,68,0.06);
}

/* в”Ђв”Ђ Empty state в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.cart-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2.5rem 1.5rem;
  gap: 0.75rem;
}
.cart-empty__icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: rgba(var(--gaming-cta-rgb),0.08);
  border: 1px solid rgba(var(--gaming-cta-rgb),0.15);
  display: flex; align-items: center; justify-content: center;
  color: rgba(var(--gaming-cta-rgb),0.5);
}
.cart-empty svg { color: var(--gaming-text-dim); }
.cart-empty p {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--gaming-text-dim);
  margin: 0;
}
.cart-empty__sub {
  font-size: 0.72rem;
  color: var(--gaming-text-dim);
  margin: 0;
}
.cart-empty a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gaming-cta);
  text-decoration: none;
  border: 1px solid rgba(var(--gaming-cta-rgb),0.3);
  border-radius: 8px;
  padding: 0.4rem 0.9rem;
  transition: all 0.2s;
  background: rgba(var(--gaming-cta-rgb),0.06);
}
.cart-empty a:hover {
  color: #fff;
  background: rgba(var(--gaming-cta-rgb),0.15);
  border-color: rgba(var(--gaming-cta-rgb),0.5);
}

/* в”Ђв”Ђ Items list в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.cart-items {
  max-height: 280px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--gaming-cta-rgb),0.25) transparent;
  padding: 0.25rem 0;
}
.cart-items::-webkit-scrollbar { width: 3px; }
.cart-items::-webkit-scrollbar-track { background: transparent; }
.cart-items::-webkit-scrollbar-thumb {
  background: rgba(var(--gaming-cta-rgb),0.25);
  border-radius: 2px;
}

.cart-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.8rem 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,0.035);
  transition: background 0.15s;
  position: relative;
}
.cart-item:last-child { border-bottom: none; }
.cart-item:hover { background: rgba(var(--gaming-cta-rgb),0.04); }

.cart-item__art {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(var(--gaming-cta-rgb),0.35), rgba(16,217,160,0.18));
  border: 1px solid rgba(var(--gaming-cta-rgb),0.25);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 1rem;
  box-shadow: 0 2px 8px rgba(var(--gaming-cta-rgb),0.2);
}

.cart-item__info { flex: 1; min-width: 0; }
.cart-item__name {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.01em;
}
.cart-item__meta {
  display: block;
  font-size: 0.65rem;
  color: var(--gaming-text-dim);
  margin-top: 2px;
  font-weight: 500;
}

.cart-item__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35rem;
  flex-shrink: 0;
}
.cart-item__price {
  font-size: 0.82rem;
  font-weight: 800;
  color: #fff;
  font-family: var(--display);
  letter-spacing: -0.02em;
}
.cart-item__remove {
  width: 22px; height: 22px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.03);
  color: var(--gaming-text-dim);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.18s;
  padding: 0;
}
.cart-item__remove:hover {
  border-color: rgba(239,68,68,0.35);
  background: rgba(239,68,68,0.08);
  color: rgba(239,68,68,0.85);
}

/* в”Ђв”Ђ Footer в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.cart-footer {
  padding: 1rem 1.25rem 1.1rem;
  border-top: 1px solid rgba(255,255,255,0.05);
  background: rgba(0,0,0,0.25);
}
.cart-footer__total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(var(--gaming-cta-rgb),0.07);
  border: 1px solid rgba(var(--gaming-cta-rgb),0.15);
  border-radius: 10px;
  padding: 0.65rem 0.9rem;
  margin-bottom: 0.85rem;
}
.cart-footer__total span:first-child {
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(255,255,255,0.6);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.cart-footer__price {
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
  font-family: var(--display);
  letter-spacing: -0.02em;
}
.cart-checkout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.8rem;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--gaming-cta) 0%, var(--gaming-cta-dark) 100%);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 800;
  font-family: var(--display);
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: all 0.2s;
  box-shadow:
    0 4px 20px -4px rgba(var(--gaming-cta-rgb),0.6),
    inset 0 1px 0 rgba(255,255,255,0.2);
}
.cart-checkout-btn:hover {
  transform: translateY(-1px);
  box-shadow:
    0 8px 28px -4px rgba(var(--gaming-cta-rgb),0.7),
    inset 0 1px 0 rgba(255,255,255,0.25);
  background: linear-gradient(135deg, #7b74ff 0%, #5a4de0 100%);
}
.cart-checkout-btn svg { transition: transform 0.2s; }
.cart-checkout-btn:hover svg { transform: translateX(3px); }

/* в”Ђв”Ђ Add-to-cart button on product cards в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.cart-add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 9px;
  border: 1px solid rgba(var(--gaming-cta-rgb),0.3);
  background: rgba(var(--gaming-cta-rgb),0.1);
  color: #8b85ff;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
  padding: 0;
}
.cart-add-btn svg { width: 15px; height: 15px; }
.cart-add-btn:hover {
  background: rgba(var(--gaming-cta-rgb),0.2);
  border-color: rgba(var(--gaming-cta-rgb),0.55);
  transform: scale(1.08);
  box-shadow: 0 4px 12px rgba(var(--gaming-cta-rgb),0.3);
}
.cart-add-btn.added {
  background: rgba(16,217,160,0.12);
  border-color: rgba(16,217,160,0.35);
  color: #10d9a0;
}

/* Cart badge pulse when item added */
@keyframes cart-bump {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.5); }
  100% { transform: scale(1); }
}
.navbar__cart-badge.bump { animation: cart-bump 0.35s cubic-bezier(0.36,0.07,0.19,0.97); }

/* ══ pgrid-card__updated — "Updated Xh ago" pill on catalog cards ══ */
.pgrid-card__updated {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.68rem;
  font-weight: 500;
  color: rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 2px 9px;
  white-space: nowrap;
  line-height: 1.6;
  margin-bottom: 0.6rem;
}
.pgrid-card__updated::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(16,217,160,0.6);
  flex-shrink: 0;
}

/* в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ
   CHECKOUT (cart-based order review) — moved from inline <style>
   в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ */
.co2-main { padding-top: 6.5rem; padding-bottom: 4rem; }

.co2-steps { max-width: 520px; margin: 0 auto 0.5rem; padding: 0 1.5rem; display: flex; align-items: center; }
.co2-step { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }
.co2-step__c { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.78rem; font-weight: 700; border: 1.5px solid var(--gaming-border); color: var(--gaming-text-dim); }
.co2-step__l { font-size: 0.7rem; color: var(--gaming-text-dim); white-space: nowrap; }
.co2-step__line { flex: 1; height: 1px; background: var(--gaming-border); margin-bottom: 1.3rem; min-width: 40px; }
.co2-step--done .co2-step__c { border-color: rgba(0,207,255,0.5); background: rgba(0,207,255,0.15); color: var(--gaming-accent-light); }
.co2-step--done .co2-step__l { color: var(--gaming-text-muted); }
.co2-step--done + .co2-step__line { background: rgba(0,207,255,0.35); }
.co2-step--now .co2-step__c { border-color: rgba(0,207,255,0.85); background: rgba(0,207,255,0.25); color: #fff; box-shadow: 0 0 0 4px rgba(0,207,255,0.12), 0 0 16px rgba(0,207,255,0.35); }
.co2-step--now .co2-step__l { color: var(--gaming-text); font-weight: 600; }

.co2-head { max-width: 1240px; margin: 1.5rem auto 0; padding: 0 1.5rem; }
.co2-head h1 { font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: clamp(1.5rem, 3.2vw, 2rem); letter-spacing: -0.02em; }
.co2-head p { color: var(--gaming-text-muted); font-size: 0.92rem; margin-top: 0.35rem; }

.co2-wrap { max-width: 1240px; margin: 0 auto; padding: 1.6rem 1.5rem 0; display: grid; grid-template-columns: minmax(0,1fr) 380px; gap: 1.5rem; align-items: start; }
@media (max-width: 920px) { .co2-wrap { grid-template-columns: 1fr; } }

.co2-panel { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 20px; padding: 1.4rem; backdrop-filter: blur(20px); }
.co2-panel + .co2-panel { margin-top: 1.25rem; }
.co2-panel__title { font-family: var(--body); font-weight: 800; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gaming-text-dim); margin-bottom: 1.1rem; display: flex; align-items: center; gap: 0.5rem; }
.co2-panel__title .c { margin-left: auto; font-size: 0.72rem; color: var(--gaming-text-muted); letter-spacing: 0; text-transform: none; font-family: var(--body); font-weight: 600; }

/* cart line item */
.co2-item { display: flex; gap: 0.9rem; padding: 1rem 0; border-top: 1px solid var(--gaming-border); align-items: flex-start; }
.co2-item:first-of-type { border-top: none; padding-top: 0; }
.co2-item__art {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(239,68,95,0.32), rgba(0,207,255,0.28));
  border: 1px solid rgba(239,68,95,0.22);
  flex-shrink: 0;
  overflow: hidden;
  color: rgba(255,255,255,0.9);
}
.co2-item__art svg {
  width: 22px !important;
  height: 22px !important;
  max-width: 22px !important;
  max-height: 22px !important;
  display: block;
  flex-shrink: 0;
}
.co2-item__main { flex: 1; min-width: 0; }
.co2-item__game { font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--gaming-text-dim); margin-bottom: 0.15rem; }
.co2-item__name {
  font-weight: 700;
  font-size: 0.95rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.5rem;
  line-height: 1.3;
}
.co2-item__title { min-width: 0; }
.co2-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gaming-success);
  background: rgba(16,217,160,0.1);
  border: 1px solid rgba(16,217,160,0.25);
  border-radius: 100px;
  padding: 2px 8px;
  flex-shrink: 0;
}
.co2-pill .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--gaming-success); flex-shrink: 0; }
.co2-item__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.55rem;
}
.co2-durs {
  display: inline-flex;
  margin: 0;
  border: 1px solid var(--gaming-border);
  border-radius: 9px;
  overflow: hidden;
  flex-shrink: 0;
}
.co2-dur { font-size: 0.72rem; font-weight: 700; color: var(--gaming-text-muted); background: transparent; border: none; padding: 5px 11px; cursor: pointer; border-right: 1px solid var(--gaming-border); }
.co2-dur:last-child { border-right: none; }
.co2-dur.active { background: rgba(0,207,255,0.2); color: #fff; }
.co2-fixed-tag {
  display: inline-flex;
  align-items: center;
  margin: 0;
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--gaming-text-dim);
  border: 1px dashed var(--gaming-border);
  border-radius: 7px;
  padding: 3px 9px;
}
.co2-item__right {
  text-align: right;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  min-width: 5.5rem;
  align-self: stretch;
}
.co2-item__price { font-family: var(--display); font-weight: 800; font-size: 1rem; }
.co2-item__ppd { font-size: 0.66rem; color: var(--gaming-text-dim); }
.co2-item__rm { margin-top: auto; background: none; border: none; color: var(--gaming-text-dim); cursor: pointer; font-size: 0.7rem; padding: 4px; display: inline-flex; align-items: center; gap: 3px; }
.co2-item__rm:hover { color: var(--gaming-error); }

/* cross-sell */
.co2-xsell { display: flex; align-items: center; gap: 0.85rem; padding: 0.9rem; border: 1px dashed rgba(0,207,255,0.35); border-radius: 14px; background: rgba(0,207,255,0.04); margin-top: 0.5rem; }
.co2-xsell__art { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; background: rgba(0,207,255,0.12); border: 1px solid rgba(0,207,255,0.25); }
.co2-xsell__name { font-weight: 700; font-size: 0.85rem; }
.co2-xsell__sub { font-size: 0.72rem; color: var(--gaming-text-dim); }
.co2-xsell__add { margin-left: auto; background: rgba(0,207,255,0.15); border: 1px solid rgba(0,207,255,0.4); color: var(--gaming-accent-light); font-weight: 700; font-size: 0.78rem; border-radius: 9px; padding: 7px 14px; cursor: pointer; }
.co2-xsell__add:hover { background: rgba(0,207,255,0.25); }

/* payment methods */
.co2-pays { display: flex; flex-direction: column; gap: 0.6rem; }
.co2-pay { cursor: pointer; border: 1px solid var(--gaming-border); border-radius: 14px; background: rgba(255,255,255,0.02); padding: 0.9rem 1rem; display: flex; align-items: center; gap: 0.85rem; }
.co2-pay:hover { border-color: var(--gaming-border-strong); }
.co2-pay.active { border-color: rgba(0,207,255,0.6); background: rgba(0,207,255,0.07); }
.co2-pay__ic { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.04); border: 1px solid var(--gaming-border); color: var(--gaming-text-muted); flex-shrink: 0; }
.co2-pay.active .co2-pay__ic { color: var(--gaming-accent-light); border-color: rgba(0,207,255,0.4); background: rgba(0,207,255,0.12); }
.co2-pay__ic svg { width: 16px; height: 16px; }
.co2-pay__name { font-weight: 700; font-size: 0.9rem; }
.co2-pay__sub { font-size: 0.74rem; color: var(--gaming-text-dim); }
.co2-pay__tag { margin-left: auto; font-size: 0.6rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gaming-success); background: rgba(16,217,160,0.1); border: 1px solid rgba(16,217,160,0.28); border-radius: 6px; padding: 3px 8px; }
.co2-pay__radio { margin-left: auto; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--gaming-border); flex-shrink: 0; }
.co2-pay.active .co2-pay__radio { border-color: var(--gaming-accent); box-shadow: inset 0 0 0 4px var(--gaming-accent); }
.co2-cardform { display: none; margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--gaming-border); flex-direction: column; gap: 0.7rem; }
.co2-cardform.show { display: flex; }
.co2-field label { display: block; font-size: 0.7rem; color: var(--gaming-text-dim); margin-bottom: 0.35rem; text-transform: uppercase; letter-spacing: 0.05em; }
.co2-field input { width: 100%; background: var(--gaming-bg); border: 1px solid var(--gaming-border); border-radius: 10px; padding: 0.65rem 0.8rem; color: var(--gaming-text); font-family: var(--body); font-size: 0.9rem; }
.co2-field input:focus { outline: none; border-color: rgba(var(--gaming-cta-rgb),0.6); box-shadow: 0 0 0 3px rgba(var(--gaming-cta-rgb),0.12); }
.co2-field-row { display: flex; gap: 0.7rem; }
.co2-field--half { flex: 1; }
.co2-sum-disc--hidden { display: none !important; }

.co2-promo { display: flex; gap: 0.6rem; margin-top: 1.1rem; }
.co2-promo input { flex: 1; background: var(--gaming-bg); border: 1px solid var(--gaming-border); border-radius: 10px; padding: 0.65rem 0.8rem; color: var(--gaming-text); font-family: var(--body); font-size: 0.85rem; }
.co2-promo input:focus { outline: none; border-color: rgba(var(--gaming-cta-rgb),0.6); box-shadow: 0 0 0 3px rgba(var(--gaming-cta-rgb),0.12); }
.co2-promo button { border: 1px solid var(--gaming-border-strong); background: rgba(255,255,255,0.04); color: var(--gaming-text); border-radius: 10px; padding: 0 1.1rem; font-weight: 700; font-size: 0.82rem; cursor: pointer; }
.co2-promo button:hover { background: rgba(255,255,255,0.08); }
.co2-promo-msg { font-size: 0.76rem; margin-top: 0.5rem; min-height: 1em; }

/* summary */
.co2-summary { position: sticky; top: 6.5rem; }
.co2-sum-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.88rem; padding: 0.45rem 0; }
.co2-sum-row .k { color: var(--gaming-text-muted); }
.co2-sum-disc .v { color: var(--gaming-success); }
.co2-sum-total { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 0.5rem; padding-top: 0.9rem; border-top: 1px solid var(--gaming-border); }
.co2-sum-total .k { font-size: 0.8rem; color: var(--gaming-text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.co2-sum-total .v { font-family: var(--body); font-weight: 800; font-size: 1.7rem; letter-spacing: -0.02em; }

.co2-cta { width: 100%; margin-top: 1.1rem; border: none; cursor: pointer; border-radius: 13px; background: linear-gradient(135deg, var(--gaming-cta), var(--gaming-cta-dark)); color: #fff; padding: 1rem; font-family: var(--body); font-weight: 800; font-size: 1rem; display: flex; align-items: center; justify-content: center; gap: 0.5rem; flex-wrap: wrap; box-shadow: 0 14px 34px -12px rgba(var(--gaming-cta-rgb),0.7); transition: transform 0.15s, box-shadow 0.3s; }
.co2-cta:hover { transform: translateY(-2px); box-shadow: 0 20px 44px -12px rgba(var(--gaming-cta-rgb),0.85); }
.co2-cta svg { width: 16px; height: 16px; }
.co2-cta__sub { flex-basis: 100%; font-size: 0.7rem; font-weight: 500; opacity: 0.85; }
.co2-secure { display: flex; align-items: center; justify-content: center; gap: 0.4rem; font-size: 0.7rem; color: var(--gaming-text-dim); margin-top: 0.8rem; }
.co2-secure svg { width: 12px; height: 12px; color: var(--gaming-success); }

.co2-trust { margin-top: 1.25rem; display: flex; flex-direction: column; gap: 0.7rem; }
.co2-trust__i { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.78rem; color: var(--gaming-text-muted); }
.co2-trust__i svg { width: 15px; height: 15px; color: var(--gaming-success); flex-shrink: 0; margin-top: 1px; }
.co2-trust__i b { color: var(--gaming-text); font-weight: 700; }
.co2-accepted { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 1rem; }
.co2-pchip { font-size: 0.6rem; font-weight: 800; letter-spacing: 0.05em; color: var(--gaming-text-dim); border: 1px solid var(--gaming-border); border-radius: 6px; padding: 4px 8px; }

/* в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ
   STATUS PAGES (checkout-flow) — success / failed / pending / 404
   Accent driven by --st / --st-rgb via state modifiers.
   в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ */
.st-flow            { --st: var(--gaming-success); --st-rgb: 16,217,160; }
.st-flow--failed    { --st: var(--gaming-error);   --st-rgb: 255,77,109; }
.st-flow--pending   { --st: var(--gaming-warning); --st-rgb: 245,158,11; }
.st-flow--error     { --st: #A78BFA;               --st-rgb: 167,139,250; }

.st-main { padding-top: 7rem; padding-bottom: 4rem; min-height: 80vh; display: flex; flex-direction: column; align-items: center; }

/* Stepbar */
.st-steps { width: 100%; max-width: 520px; margin: 0 auto 1.5rem; padding: 0 1.5rem; display: flex; align-items: center; }
.st-step { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }
.st-step__c { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.78rem; font-weight: 700; border: 1.5px solid var(--gaming-border); color: var(--gaming-text-dim); }
.st-step__c svg { width: 12px; height: 12px; }
.st-step__l { font-size: 0.7rem; color: var(--gaming-text-dim); white-space: nowrap; }
.st-step__line { flex: 1; height: 1px; background: var(--gaming-border); margin-bottom: 1.3rem; min-width: 40px; }
.st-step--done .st-step__c { border-color: rgba(var(--st-rgb),0.5); background: rgba(var(--st-rgb),0.15); color: var(--st); }
.st-step--done .st-step__l { color: var(--gaming-text-muted); }
.st-step--done + .st-step__line { background: rgba(var(--st-rgb),0.35); }
.st-step--now .st-step__c { border-color: var(--st); background: rgba(var(--st-rgb),0.22); color: #fff; box-shadow: 0 0 0 4px rgba(var(--st-rgb),0.12), 0 0 16px rgba(var(--st-rgb),0.35); }
.st-step--now .st-step__l { color: var(--gaming-text); font-weight: 600; }

/* Card */
.st-card { position: relative; width: 100%; max-width: 520px; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 20px; padding: 2.2rem 1.8rem; backdrop-filter: blur(20px); overflow: hidden; text-align: center; }
.st-card::before { content: ''; position: absolute; top: 0; left: 15%; right: 15%; height: 1px; background: linear-gradient(90deg, transparent, var(--st), transparent); }
.st-card__glow { position: absolute; top: -70px; left: 50%; transform: translateX(-50%); width: 300px; height: 180px; pointer-events: none; background: radial-gradient(ellipse at center, rgba(var(--st-rgb),0.16), transparent 70%); }
.st-card > *:not(.st-card__glow) { position: relative; z-index: 1; }

/* Icon */
.st-icon { width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 1.1rem; display: flex; align-items: center; justify-content: center; color: var(--st); background: rgba(var(--st-rgb),0.10); border: 1px solid rgba(var(--st-rgb),0.30); position: relative; }
.st-icon::after { content: ''; position: absolute; inset: -9px; border-radius: 50%; border: 1px solid rgba(var(--st-rgb),0.22); animation: st-ring 3s ease-in-out infinite; }
.st-icon svg { width: 34px; height: 34px; }
@keyframes st-ring { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.08); opacity: 0.3; } }
.st-icon--spin::after { border-color: transparent; animation: none; }
.st-icon--spin::before { content: ''; position: absolute; inset: -1px; border-radius: 50%; border: 2px solid rgba(var(--st-rgb),0.18); border-top-color: var(--st); animation: st-spin 0.9s linear infinite; }
@keyframes st-spin { to { transform: rotate(360deg); } }

/* Badge / title / sub */
.st-badge { display: inline-flex; align-items: center; gap: 7px; font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--st); background: rgba(var(--st-rgb),0.08); border: 1px solid rgba(var(--st-rgb),0.25); border-radius: 100px; padding: 4px 13px; margin-bottom: 14px; }
.st-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--st); animation: st-blink 2s ease-in-out infinite; }
@keyframes st-blink { 0%,100% { opacity: 1; } 50% { opacity: 0.2; } }
.st-title { font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 1.4rem; letter-spacing: -0.02em; margin-bottom: 0.5rem; color: var(--gaming-text); }
.st-sub { font-size: 0.88rem; color: var(--gaming-text-muted); line-height: 1.7; margin-bottom: 1.4rem; }
.st-sub strong { color: var(--gaming-text); }
.st-divider { height: 1px; background: var(--gaming-border); margin: 1.4rem 0; }

/* Order summary */
.st-summary { text-align: left; background: var(--gaming-bg-lighter); border: 1px solid var(--gaming-border); border-radius: 14px; overflow: hidden; margin-bottom: 1.2rem; }
.st-row { display: flex; justify-content: space-between; align-items: center; padding: 11px 16px; gap: 12px; }
.st-row + .st-row { border-top: 1px solid var(--gaming-border); }
.st-row__k { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gaming-text-dim); flex-shrink: 0; }
.st-row__v { font-size: 13px; font-weight: 600; color: var(--gaming-text); text-align: right; }
.st-row__v--id { font-family: var(--mono); color: var(--gaming-accent-light); }
.st-row__v--amount { color: var(--st); font-family: var(--body); font-weight: 800; }

/* License key */
.st-key { text-align: left; background: var(--gaming-bg-lighter); border: 1px solid var(--gaming-border); border-radius: 14px; padding: 18px; margin-bottom: 1.2rem; position: relative; overflow: hidden; }
.st-key::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--st), transparent); opacity: 0.5; }
.st-key__label { font-size: 10px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gaming-text-dim); margin-bottom: 11px; }
.st-key__field { display: flex; align-items: center; gap: 10px; background: var(--gaming-bg); border: 1px solid var(--gaming-border); border-radius: 10px; padding: 11px 13px; margin-bottom: 10px; }
.st-key__val { font-family: var(--mono); font-size: 12.5px; color: var(--gaming-text); flex: 1; word-break: break-all; letter-spacing: 0.04em; user-select: all; }
.st-key__copy { flex-shrink: 0; background: transparent; border: 1px solid var(--gaming-border); border-radius: 7px; color: var(--gaming-text-muted); cursor: pointer; padding: 6px 9px; display: flex; align-items: center; justify-content: center; transition: border-color 0.2s, color 0.2s, background 0.2s; }
.st-key__copy svg { width: 16px; height: 16px; }
.st-key__copy:hover { border-color: var(--gaming-border-strong); color: var(--gaming-text); }
.st-key__copy.copied { border-color: var(--st); color: var(--st); background: rgba(var(--st-rgb),0.07); }
.st-key__warn { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--gaming-text-muted); }
.st-key__warn svg { flex-shrink: 0; opacity: 0.6; width: 12px; height: 12px; }

/* Info rows */
.st-info { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.st-info__row { display: flex; align-items: flex-start; gap: 14px; background: var(--gaming-bg-lighter); border: 1px solid var(--gaming-border); border-radius: 12px; padding: 14px 16px; }
.st-info__ic { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; color: var(--st); }
.st-info__ic--accent { color: var(--gaming-accent-light); }
.st-info__t { font-size: 13px; font-weight: 700; color: var(--gaming-text); margin-bottom: 3px; }
.st-info__d { font-size: 12px; color: var(--gaming-text-muted); line-height: 1.6; }
.st-info__d a { color: var(--gaming-accent-light); text-decoration: none; }
.st-info__d a:hover { text-decoration: underline; }

/* Reason callout (failed) */
.st-callout { display: flex; gap: 12px; align-items: flex-start; text-align: left; background: rgba(var(--st-rgb),0.06); border: 1px solid rgba(var(--st-rgb),0.25); border-radius: 12px; padding: 13px 15px; margin-bottom: 1.2rem; }
.st-callout svg { color: var(--st); flex-shrink: 0; margin-top: 1px; width: 16px; height: 16px; }
.st-callout__label { font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--st); margin-bottom: 2px; }
.st-callout__text { font-size: 13px; color: var(--gaming-text); }

/* Tips (failed) */
.st-tips { text-align: left; display: flex; flex-direction: column; gap: 9px; }
.st-tip { display: flex; align-items: flex-start; gap: 9px; font-size: 12.5px; color: var(--gaming-text-muted); line-height: 1.55; }
.st-tip__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--st); flex-shrink: 0; margin-top: 7px; }
.st-tip a { color: var(--gaming-accent-light); text-decoration: none; }

/* Progress (pending) */
.st-progress { margin-bottom: 1.2rem; }
.st-progress__label { display: flex; justify-content: space-between; font-size: 12px; color: var(--gaming-text-muted); margin-bottom: 8px; }
.st-progress__track { height: 6px; border-radius: 6px; background: rgba(255,255,255,0.06); overflow: hidden; }
.st-progress__fill { height: 100%; width: 40%; border-radius: 6px; background: linear-gradient(90deg, var(--st), rgba(var(--st-rgb),0.4)); animation: st-prog 2.2s ease-in-out infinite; }
@keyframes st-prog { 0% { width: 12%; } 50% { width: 78%; } 100% { width: 12%; } }
.st-escalate { display: none; text-align: left; font-size: 12.5px; color: var(--gaming-text-muted); background: rgba(245,158,11,0.06); border: 1px solid rgba(245,158,11,0.22); border-radius: 12px; padding: 13px 15px; margin-top: 1.2rem; line-height: 1.6; }
.st-escalate.visible { display: block; }
.st-escalate strong { color: var(--gaming-text); }

/* Actions */
.st-actions { display: flex; gap: 10px; margin-top: 1.4rem; }
.st-actions .btn { flex: 1; justify-content: center; text-align: center; }
@media (max-width: 480px) { .st-actions { flex-direction: column; } }

/* 404 */
.st-404 { font-family: var(--display); font-weight: 900; font-size: clamp(4rem, 14vw, 7rem); line-height: 1; letter-spacing: -0.03em; margin-bottom: 0.5rem; color: var(--gaming-text); }
.st-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 1.4rem; }
.st-chip { font-size: 0.78rem; font-weight: 600; color: var(--gaming-text-muted); border: 1px solid var(--gaming-border); border-radius: 100px; padding: 6px 14px; text-decoration: none; }
.st-chip:hover { color: var(--gaming-text); border-color: var(--gaming-border-strong); }

/* в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ
   REFERRAL PAGE — moved from inline <style>
   в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ */
.ref-page { min-height: 100vh; padding-top: 72px; padding-bottom: 5rem; }

/* Hero */
.ref-hero {
  background: linear-gradient(180deg, rgba(16,217,160,0.06) 0%, transparent 100%);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  padding: 2.5rem 0 2rem;
}
.ref-hero__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.ref-hero__back {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.72rem; color: var(--gaming-text-dim);
  text-decoration: none; transition: color 0.2s; margin-bottom: 0.5rem;
}
.ref-hero__back:hover { color: #fff; }
.ref-hero__label {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: #10d9a0;
  background: rgba(16,217,160,0.08); border: 1px solid rgba(16,217,160,0.2);
  border-radius: 20px; padding: 3px 10px; margin-bottom: 0.6rem;
}
.ref-hero__title {
  font-family: 'Unbounded', sans-serif; font-size: 1.8rem;
  font-weight: 900; color: #fff; letter-spacing: -0.03em; margin: 0 0 0.3rem;
}
.ref-hero__sub { font-size: 0.85rem; color: rgba(255,255,255,0.6); margin: 0; }
.ref-hero__rate {
  text-align: right; flex-shrink: 0;
}
.ref-hero__rate-val {
  font-family: 'Unbounded', sans-serif; font-size: 2.5rem;
  font-weight: 900; color: #10d9a0; letter-spacing: -0.04em; line-height: 1;
}
.ref-hero__rate-label { font-size: 0.7rem; color: var(--gaming-text-dim); margin-top: 3px; }

/* Stats row */
.ref-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  margin: 1.75rem 0;
}
@media (max-width: 768px) { .ref-stats { grid-template-columns: repeat(2, 1fr); } }
.ref-stat {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
  padding: 1.1rem 1.25rem;
  position: relative;
  overflow: hidden;
}
.ref-stat::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
}
.ref-stat--green::before  { background: linear-gradient(90deg, #10d9a0, transparent); }
.ref-stat--purple::before { background: linear-gradient(90deg, var(--gaming-cta), transparent); }
.ref-stat--amber::before  { background: linear-gradient(90deg, #f59e0b, transparent); }
.ref-stat--blue::before   { background: linear-gradient(90deg, #38bdf8, transparent); }
.ref-stat__icon {
  width: 32px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 0.75rem; font-size: 0.85rem;
}
.ref-stat--green  .ref-stat__icon { background: rgba(16,217,160,0.1);  color: #10d9a0; }
.ref-stat--purple .ref-stat__icon { background: rgba(var(--gaming-cta-rgb),0.1); color: #8b85ff; }
.ref-stat--amber  .ref-stat__icon { background: rgba(245,158,11,0.1); color: #f59e0b; }
.ref-stat--blue   .ref-stat__icon { background: rgba(56,189,248,0.1); color: #38bdf8; }
.ref-stat__val {
  font-family: 'Unbounded', sans-serif; font-size: 1.4rem;
  font-weight: 800; color: #fff; letter-spacing: -0.03em; line-height: 1;
}
.ref-stat__label { font-size: 0.68rem; color: var(--gaming-text-dim); margin-top: 3px; }
.ref-stat__delta {
  display: inline-flex; align-items: center; gap: 0.2rem;
  font-size: 0.62rem; font-weight: 700;
  color: #10d9a0; margin-top: 0.4rem;
}

/* Referral link box */
.ref-link-box {
  background: rgba(16,217,160,0.05);
  border: 1px solid rgba(16,217,160,0.18);
  border-radius: 16px;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.ref-link-box__icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(16,217,160,0.1); border: 1px solid rgba(16,217,160,0.2);
  display: flex; align-items: center; justify-content: center;
  color: #10d9a0; flex-shrink: 0;
}
.ref-link-box__info { flex: 1; min-width: 0; }
.ref-link-box__title { font-size: 0.8rem; font-weight: 700; color: #fff; margin-bottom: 0.3rem; }
.ref-link-box__url {
  font-size: 0.75rem; color: rgba(255,255,255,0.6);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: monospace;
}
.ref-link-box__actions { display: flex; gap: 0.5rem; flex-shrink: 0; }
.ref-copy-btn, .ref-share-btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.72rem; font-weight: 700;
  padding: 0.5rem 0.9rem; border-radius: 8px;
  cursor: pointer; transition: all 0.2s; border: 1px solid;
}
.ref-copy-btn {
  background: rgba(16,217,160,0.1); border-color: rgba(16,217,160,0.3);
  color: #10d9a0;
}
.ref-copy-btn:hover { background: rgba(16,217,160,0.2); }
.ref-copy-btn.copied { background: rgba(16,217,160,0.2); color: #fff; }
.ref-share-btn {
  background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.5);
}
.ref-share-btn:hover { background: rgba(255,255,255,0.08); color: #fff; }

/* How it works */
.ref-how {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem;
  margin-bottom: 1.75rem;
}
@media (max-width: 600px) { .ref-how { grid-template-columns: 1fr; } }
.ref-how-step {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px; padding: 1.1rem; text-align: center;
  position: relative;
}
.ref-how-step__num {
  font-family: 'Unbounded', sans-serif; font-size: 0.6rem; font-weight: 800;
  color: rgba(var(--gaming-cta-rgb),0.5); letter-spacing: 0.06em; margin-bottom: 0.6rem;
}
.ref-how-step__icon { font-size: 1.5rem; margin-bottom: 0.5rem; }
.ref-how-step__title { font-size: 0.78rem; font-weight: 700; color: #fff; margin-bottom: 0.25rem; }
.ref-how-step__desc { font-size: 0.68rem; color: var(--gaming-text-dim); }

/* Main grid */
.ref-grid { display: grid; grid-template-columns: 1fr 360px; gap: 1.5rem; }
.ref-grid > * { min-width: 0; } /* let 1fr tracks shrink below content min-width */
@media (max-width: 900px) { .ref-grid { grid-template-columns: 1fr; } }

/* Chart card */
.ref-card {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px; overflow: hidden; margin-bottom: 1.25rem;
}
.ref-card__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 1.25rem 0.85rem;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.ref-card__title { font-size: 0.82rem; font-weight: 700; color: #fff; }
.ref-card__period {
  display: flex; gap: 0.4rem;
}
.ref-period-btn {
  font-size: 0.62rem; font-weight: 600;
  padding: 3px 8px; border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.03);
  color: var(--gaming-text-dim);
  cursor: pointer; transition: all 0.18s;
}
.ref-period-btn.active {
  background: rgba(var(--gaming-cta-rgb),0.12);
  border-color: rgba(var(--gaming-cta-rgb),0.3);
  color: #8b85ff;
}
.ref-card__body { padding: 1.25rem; }
.ref-chart-wrap { position: relative; height: 180px; }

/* Referrals table */
.ref-table { width: 100%; border-collapse: collapse; }
.ref-table th {
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--gaming-text-dim);
  padding: 0 1.25rem 0.6rem; text-align: left;
}
.ref-table td {
  padding: 0.75rem 1.25rem;
  border-top: 1px solid rgba(255,255,255,0.04);
  font-size: 0.78rem; color: rgba(255,255,255,0.7);
  vertical-align: middle;
}
.ref-table tr:hover td { background: rgba(255,255,255,0.02); }
.ref-user { display: flex; align-items: center; gap: 0.6rem; }
.ref-avatar {
  width: 28px; height: 28px; border-radius: 8px;
  background: linear-gradient(135deg, rgba(var(--gaming-cta-rgb),0.4), rgba(16,217,160,0.2));
  border: 1px solid rgba(var(--gaming-cta-rgb),0.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.65rem; font-weight: 800; color: #8b85ff;
  flex-shrink: 0;
}
.ref-name { font-weight: 600; color: #fff; }
.ref-date { font-size: 0.65rem; color: var(--gaming-text-dim); margin-top: 1px; }
.ref-status-pill {
  display: inline-flex; align-items: center; gap: 0.25rem;
  font-size: 0.62rem; font-weight: 700;
  border-radius: 20px; padding: 2px 8px;
}
.ref-status-pill--active { background: rgba(16,217,160,0.1); color: #10d9a0; border: 1px solid rgba(16,217,160,0.2); }
.ref-status-pill--pending { background: rgba(245,158,11,0.1); color: #f59e0b; border: 1px solid rgba(245,158,11,0.2); }
.ref-status-pill--churned { background: rgba(239,68,68,0.08); color: rgba(239,68,68,0.7); border: 1px solid rgba(239,68,68,0.15); }
.ref-earn { font-family: 'Unbounded', sans-serif; font-size: 0.75rem; font-weight: 800; color: #10d9a0; }

/* Sidebar widgets */
.ref-sidebar { display: flex; flex-direction: column; gap: 1rem; }
.ref-widget {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px; overflow: hidden;
}
.ref-widget__head {
  display: flex; align-items: center; gap: 0.45rem;
  padding: 1rem 1.25rem 0.75rem;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  font-size: 0.78rem; font-weight: 700; color: #fff;
}
.ref-widget__head-icon { flex: none; color: var(--accent, #7c5cff); opacity: 0.9; }
.ref-widget__body { padding: 1.1rem 1.25rem; }

/* в”Ђв”Ђ Referrals: inline-style extraction в†’ BEM (was inline style="") в”Ђв”Ђ */
/* Traffic-breakdown legend */
.ref-legend { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.9rem; }
.ref-legend__row { display: flex; align-items: center; justify-content: space-between; font-size: 0.7rem; }
.ref-legend__label { display: flex; align-items: center; gap: 0.4rem; color: rgba(255,255,255,0.5); }
.ref-legend__dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.ref-legend__dot--purchased { background: var(--gaming-success); }
.ref-legend__dot--registered { background: var(--gaming-warning); }
.ref-legend__dot--clicked { background: rgba(255,255,255,0.12); }
.ref-legend__val { font-weight: 700; color: #fff; }

/* Tier-item icon tints */
.ref-tier-item__icon--starter { background: rgba(255,255,255,0.05); }
.ref-tier-item__icon--active  { background: rgba(16,217,160,0.10); }
.ref-tier-item__icon--pro     { background: rgba(245,158,11,0.08); }
.ref-tier-item__icon--elite   { background: rgba(var(--gaming-cta-rgb),0.08); }

/* Progress-to-next-tier */
.ref-tier-progress { margin-top: 1rem; padding-top: 0.85rem; border-top: 1px solid rgba(255,255,255,0.05); }
.ref-tier-progress__head { display: flex; justify-content: space-between; font-size: 0.68rem; color: var(--gaming-text-dim); margin-bottom: 0.4rem; }
.ref-tier-progress__count strong { color: #fff; }
.ref-tier-progress__track { height: 5px; background: rgba(255,255,255,0.06); border-radius: 99px; overflow: hidden; }
/* TODO: BACKEND — ширину .ref-tier-progress__fill вычислять из реальных данных рефералов */
.ref-tier-progress__fill { height: 100%; width: 83%; background: linear-gradient(90deg, var(--gaming-success), var(--gaming-accent)); border-radius: 99px; }

/* Stat delta accents */
.ref-stat__delta--warning { color: var(--gaming-warning); }
.ref-stat__delta--info { color: #38bdf8; }

/* Misc layout */
.ref-section-label--flush { margin-top: 0; }
.ref-container { padding-top: 2rem; }

/* в”Ђв”Ђ Referrals left-column blocks: KPI / funnel / products / activity в”Ђв”Ђ */
.ref-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; margin-bottom: 1.25rem; }
@media (max-width: 640px) { .ref-kpis { grid-template-columns: repeat(2, 1fr); } }
.ref-kpi {
  display: flex; flex-direction: column; gap: 0.15rem;
  background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px; padding: 0.85rem 0.9rem;
}
.ref-kpi__label { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gaming-text-dim); }
.ref-kpi__val { font-family: 'Unbounded', sans-serif; font-size: 1.15rem; font-weight: 800; color: #fff; letter-spacing: -0.02em; }
.ref-kpi__val--accent { color: #10d9a0; }
.ref-kpi__sub { font-size: 0.62rem; color: var(--gaming-text-dim); }

/* Conversion funnel */
.ref-funnel { display: flex; flex-direction: column; gap: 0.9rem; }
.ref-funnel__top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 0.35rem; }
.ref-funnel__name { font-size: 0.74rem; font-weight: 600; color: rgba(255,255,255,0.75); }
.ref-funnel__num { font-family: 'Unbounded', sans-serif; font-size: 0.78rem; font-weight: 700; color: #fff; }
.ref-funnel__pct { font-family: var(--body); font-size: 0.64rem; font-weight: 600; color: var(--gaming-text-dim); margin-left: 0.3rem; }
.ref-funnel__track { height: 10px; background: rgba(255,255,255,0.05); border-radius: 99px; overflow: hidden; }
.ref-funnel__fill { height: 100%; width: var(--w, 0%); border-radius: 99px; transition: width 0.5s ease; }
.ref-funnel__fill--clicks { background: linear-gradient(90deg, rgba(var(--gaming-cta-rgb),0.85), rgba(var(--gaming-cta-rgb),0.55)); }
.ref-funnel__fill--signups { background: linear-gradient(90deg, var(--gaming-warning), rgba(245,158,11,0.55)); }
.ref-funnel__fill--purchases { background: linear-gradient(90deg, var(--gaming-success), rgba(16,217,160,0.55)); }
.ref-funnel__note { margin: 1rem 0 0; font-size: 0.68rem; color: var(--gaming-text-dim); line-height: 1.5; }

/* Sub-grid: products + activity side by side */
.ref-subgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-bottom: 1.25rem; }
@media (max-width: 1100px) { .ref-subgrid { grid-template-columns: 1fr; } }
.ref-subgrid .ref-card { margin-bottom: 0; }

/* Top referred products */
.ref-products { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.ref-products__item { display: flex; flex-direction: column; gap: 0.35rem; }
.ref-products__top { display: flex; align-items: baseline; justify-content: space-between; }
.ref-products__name { font-size: 0.78rem; font-weight: 600; color: #fff; }
.ref-products__earn { font-family: 'Unbounded', sans-serif; font-size: 0.75rem; font-weight: 800; color: #10d9a0; }
.ref-products__bar { height: 6px; background: rgba(255,255,255,0.05); border-radius: 99px; overflow: hidden; }
.ref-products__fill { height: 100%; width: var(--w, 0%); border-radius: 99px; background: linear-gradient(90deg, rgba(var(--gaming-cta-rgb),0.7), rgba(16,217,160,0.6)); }
.ref-products__meta { font-size: 0.64rem; color: var(--gaming-text-dim); }

/* Recent activity feed */
.ref-activity { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ref-activity__item { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0; border-top: 1px solid rgba(255,255,255,0.05); }
.ref-activity__item:first-child { border-top: none; padding-top: 0; }
.ref-activity__icon { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; border-radius: 8px; }
.ref-activity__icon--buy { background: rgba(16,217,160,0.1); color: #10d9a0; }
.ref-activity__icon--join { background: rgba(var(--gaming-cta-rgb),0.1); color: #8b85ff; }
.ref-activity__icon--payout { background: rgba(56,189,248,0.1); color: #38bdf8; }
.ref-activity__text { flex: 1; min-width: 0; font-size: 0.73rem; color: rgba(255,255,255,0.55); line-height: 1.35; }
.ref-activity__text strong { color: #fff; font-weight: 600; }
.ref-activity__earn { font-family: 'Unbounded', sans-serif; font-size: 0.72rem; font-weight: 800; color: #10d9a0; flex-shrink: 0; }
.ref-activity__earn--out { color: rgba(255,255,255,0.6); }
.ref-activity__time { font-size: 0.62rem; color: var(--gaming-text-dim); flex-shrink: 0; min-width: 1.6rem; text-align: right; }

/* Card-head link (Details в†’ / View all в†’) */
.ref-card__link {
  font-size: 0.68rem; font-weight: 600; color: rgba(0,207,255,0.7);
  background: none; border: none; cursor: pointer; padding: 0;
  transition: color 0.15s;
}
.ref-card__link:hover { color: var(--gaming-accent-light, #5fdcff); }
.ref-card__link:focus-visible { outline: 2px solid var(--gaming-accent, #00cfff); outline-offset: 2px; border-radius: 4px; }

/* в”Ђв”Ђ Top referred products modal в”Ђв”Ђ */
.topprod-modal { position: fixed; inset: 0; z-index: 950; display: none; align-items: center; justify-content: center; }
.topprod-modal--open { display: flex; }
.topprod-modal__backdrop { position: absolute; inset: 0; background: rgba(6,9,18,0.78); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.topprod-modal__panel {
  position: relative; z-index: 1;
  background: var(--gaming-bg-light, #0a0d17);
  border: 1px solid rgba(255,255,255,0.1); border-radius: 18px;
  width: min(92vw, 560px); max-height: 88vh;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 24px 70px rgba(0,0,0,0.55);
}
.topprod-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.5rem; border-bottom: 1px solid rgba(255,255,255,0.07); flex-shrink: 0; }
.topprod-modal__title { font-family: var(--display); font-size: 1rem; font-weight: 800; color: #fff; margin: 0; }
.topprod-modal__subtitle { font-size: 0.72rem; color: rgba(255,255,255,0.6); margin-top: 0.2rem; }
.topprod-modal__close {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 30px; height: 30px; border-radius: 8px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.5); cursor: pointer; transition: background 0.15s, color 0.15s;
}
.topprod-modal__close:hover { background: rgba(255,255,255,0.1); color: #fff; }
.topprod-modal__close:focus-visible { outline: 2px solid var(--gaming-accent, #00cfff); outline-offset: 2px; }
.topprod-modal__controls { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 0.85rem 1.5rem; border-bottom: 1px solid rgba(255,255,255,0.06); flex-shrink: 0; }
.topprod-modal__periods, .topprod-modal__sort { display: flex; align-items: center; gap: 0.4rem; }
.topprod-modal__sort-label { font-size: 0.66rem; color: var(--gaming-text-dim); margin-right: 0.15rem; }
.topprod-period, .topprod-sort {
  font-size: 0.66rem; font-weight: 600; padding: 4px 10px; border-radius: 8px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.5); cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.topprod-period:hover, .topprod-sort:hover { background: rgba(255,255,255,0.08); color: #fff; }
.topprod-period--active, .topprod-sort--active { background: rgba(var(--gaming-cta-rgb),0.14); border-color: rgba(var(--gaming-cta-rgb),0.35); color: #8b85ff; }
.topprod-period:focus-visible, .topprod-sort:focus-visible { outline: 2px solid var(--gaming-accent, #00cfff); outline-offset: 2px; }
.topprod-modal__body { flex: 1; overflow-y: auto; padding: 1rem 1.5rem; }
.topprod-table { width: 100%; border-collapse: collapse; }
.topprod-table th { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gaming-text-dim); padding: 0 0 0.65rem; text-align: left; }
.topprod-table__num { text-align: right; }
.topprod-table td { padding: 0.7rem 0; border-top: 1px solid rgba(255,255,255,0.05); font-size: 0.8rem; color: rgba(255,255,255,0.7); vertical-align: middle; }
.topprod-table td.topprod-table__num { font-family: var(--display); font-weight: 700; color: #fff; }
.topprod-table__name { font-size: 0.82rem; font-weight: 600; color: #fff; margin-bottom: 0.4rem; }
.topprod-table__bar { height: 5px; background: rgba(255,255,255,0.05); border-radius: 99px; overflow: hidden; max-width: 180px; }
.topprod-table__fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, rgba(var(--gaming-cta-rgb),0.7), rgba(16,217,160,0.6)); transition: width 0.35s ease; }
.topprod-table__earn { color: #10d9a0 !important; }
.topprod-modal__totals { display: flex; align-items: center; justify-content: flex-end; gap: 1.25rem; padding-top: 0.9rem; margin-top: 0.4rem; border-top: 1px solid rgba(255,255,255,0.08); font-size: 0.78rem; }
.topprod-modal__totals > span:first-child { margin-right: auto; font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gaming-text-dim); }
#topprod-total-sales { color: rgba(255,255,255,0.6); }
#topprod-total-earn { font-family: var(--display); font-weight: 800; color: #10d9a0; }
.topprod-modal__foot { padding: 0.85rem 1.5rem; border-top: 1px solid rgba(255,255,255,0.07); flex-shrink: 0; }
.topprod-modal__note { font-size: 0.66rem; color: var(--gaming-text-dim); }
body.topprod-modal-open { overflow: hidden; }

/* Balance widget */
.ref-balance { text-align: center; padding: 1.5rem 1.25rem; }
.ref-balance__val {
  font-family: 'Unbounded', sans-serif; font-size: 2.2rem;
  font-weight: 900; color: #fff; letter-spacing: -0.04em; line-height: 1;
}
.ref-balance__label { font-size: 0.68rem; color: var(--gaming-text-dim); margin-top: 4px; margin-bottom: 1rem; }
.ref-withdraw-btn {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  width: 100%; padding: 0.7rem;
  border-radius: 10px;
  background: linear-gradient(135deg, #10d9a0, #059669);
  color: #000; font-size: 0.75rem; font-weight: 800;
  font-family: 'Unbounded', sans-serif;
  border: none; cursor: pointer; transition: all 0.2s;
  box-shadow: 0 4px 16px -4px rgba(16,217,160,0.4);
}
.ref-withdraw-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 24px -4px rgba(16,217,160,0.5); }
.ref-withdraw-note { font-size: 0.62rem; color: var(--gaming-text-dim); text-align: center; margin-top: 0.5rem; }

/* Tier progress */
.ref-tier-list { display: flex; flex-direction: column; gap: 0.6rem; }
.ref-tier-item {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.6rem 0.75rem; border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.05);
  background: rgba(255,255,255,0.02);
  transition: all 0.2s;
}
.ref-tier-item.current {
  border-color: rgba(16,217,160,0.3);
  background: rgba(16,217,160,0.05);
}
.ref-tier-item__icon {
  width: 28px; height: 28px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; flex-shrink: 0;
}
.ref-tier-item__info { flex: 1; min-width: 0; }
.ref-tier-item__name { font-size: 0.72rem; font-weight: 700; color: rgba(255,255,255,0.6); }
.ref-tier-item.current .ref-tier-item__name { color: #10d9a0; }
.ref-tier-item__req { font-size: 0.6rem; color: var(--gaming-text-dim); }
.ref-tier-item__pct {
  font-family: 'Unbounded', sans-serif; font-size: 0.72rem;
  font-weight: 800; color: var(--gaming-text-dim);
}
.ref-tier-item.current .ref-tier-item__pct { color: #10d9a0; }

/* Donut chart */
.ref-donut-wrap { position: relative; height: 140px; }

/* Empty state for table */
.ref-table-empty {
  text-align: center; padding: 2.5rem; color: var(--gaming-text-dim); font-size: 0.78rem;
}

/* Section label */
.ref-section-label {
  font-family: 'Unbounded', sans-serif; font-size: 0.68rem;
  font-weight: 700; color: var(--gaming-text-dim);
  letter-spacing: 0.08em; text-transform: uppercase;
  margin: 0 0 1rem;
}

/* Pagination row */
.ref-table-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.75rem 1.25rem;
  border-top: 1px solid rgba(255,255,255,0.05);
  font-size: 0.68rem; color: var(--gaming-text-dim);
}

/* в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ
   COMPARE PAGE — moved from inline <style>
   в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ */
.cmp-hero {
  padding: 5.5rem 0 2.5rem;
  text-align: center;
  position: relative;
}
.cmp-hero__label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--gaming-cta-rgb),0.85);
  background: rgba(var(--gaming-cta-rgb),0.08);
  border: 1px solid rgba(var(--gaming-cta-rgb),0.2);
  border-radius: 20px;
  padding: 4px 12px;
  margin-bottom: 1rem;
}
.cmp-hero__title {
  font-family: 'Unbounded', sans-serif;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 800;
  color: #fff;
  margin: 0 0 0.6rem;
  letter-spacing: -0.03em;
}
.cmp-hero__sub {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.6);
  margin: 0;
}

/* в”Ђв”Ђ Toolbar в”Ђв”Ђ */
.cmp-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0 1.5rem;
  flex-wrap: wrap;
}
.cmp-toolbar__hint {
  font-size: 0.75rem;
  color: var(--gaming-text-dim);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.cmp-toolbar__hint svg { color: rgba(var(--gaming-cta-rgb),0.6); }
.cmp-diff-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 0.4rem 0.9rem;
  cursor: pointer;
  transition: all 0.2s;
  user-select: none;
}
.cmp-diff-toggle:hover { background: rgba(255,255,255,0.07); color: #fff; }
.cmp-diff-toggle.active {
  background: rgba(var(--gaming-cta-rgb),0.12);
  border-color: rgba(var(--gaming-cta-rgb),0.35);
  color: #8b85ff;
}
.cmp-diff-toggle__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  transition: background 0.2s;
}
.cmp-diff-toggle.active .cmp-diff-toggle__dot { background: var(--gaming-cta); }

/* в”Ђв”Ђ Scroll hint (mobile / narrow) в”Ђв”Ђ */
.cmp-table-wrap {
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.cmp-scroll-hint {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin: 0 0 0.75rem;
  padding: 0;
  font-size: 0.75rem;
  line-height: 1.2;
  color: var(--gaming-text-dim);
  white-space: nowrap;
}
.cmp-scroll-hint svg {
  display: block;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  color: rgba(255, 255, 255, 0.45);
}
@media (max-width: 900px) {
  .cmp-table-wrap--scroll .cmp-scroll-hint {
    display: inline-flex;
  }
}

/* в”Ђв”Ђ Compare grid в”Ђв”Ђ */
.cmp-grid {
  display: grid;
  grid-template-columns: 200px repeat(3, 1fr);
  gap: 0;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 3rem;
}

/* Product column header */
.cmp-col-head {
  background: rgba(6,6,16,0.8);
  border-right: 1px solid rgba(255,255,255,0.05);
  padding: 1.5rem 1.25rem 1.25rem;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.6rem;
  min-height: 220px;
}
.cmp-col-head:last-child { border-right: none; }
.cmp-col-head--empty {
  background: rgba(255,255,255,0.01);
  border: 2px dashed rgba(255,255,255,0.06);
  cursor: pointer;
  transition: all 0.2s;
  justify-content: center;
}
.cmp-col-head--empty:hover {
  background: rgba(var(--gaming-cta-rgb),0.04);
  border-color: rgba(var(--gaming-cta-rgb),0.2);
}
.cmp-col-head--label {
  background: transparent;
  border-right: 1px solid rgba(255,255,255,0.05);
  justify-content: flex-end;
  align-items: flex-start;
  padding-bottom: 1.25rem;
}
.cmp-col-label-title {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gaming-text-dim);
}

/* Best value badge */
.cmp-best-badge {
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--gaming-cta), #10d9a0);
  color: #fff;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 0 0 8px 8px;
  white-space: nowrap;
  font-family: 'Unbounded', sans-serif;
}

/* Product art in header */
.cmp-art {
  width: 60px; height: 60px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  background: linear-gradient(135deg, rgba(var(--gaming-cta-rgb),0.3), rgba(16,217,160,0.15));
  border: 1px solid rgba(var(--gaming-cta-rgb),0.25);
  box-shadow: 0 4px 16px rgba(var(--gaming-cta-rgb),0.2);
  flex-shrink: 0;
}
.cmp-col-name {
  font-family: 'Unbounded', sans-serif;
  font-size: 0.8rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.cmp-col-game {
  font-size: 0.62rem;
  font-weight: 600;
  color: rgba(255,255,255,0.6);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 2px 8px;
}
.cmp-col-price {
  font-family: 'Unbounded', sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.03em;
}
.cmp-col-price span {
  font-size: 0.65rem;
  color: var(--gaming-text-dim);
  font-weight: 500;
}
.cmp-col-remove {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  width: 22px; height: 22px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  color: var(--gaming-text-dim);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.18s;
  padding: 0;
  font-size: 0.75rem;
}
.cmp-col-remove:hover {
  border-color: rgba(239,68,68,0.35);
  background: rgba(239,68,68,0.08);
  color: rgba(239,68,68,0.8);
}

/* Empty slot */
.cmp-empty-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  color: rgba(255,255,255,0.2);
  pointer-events: none;
}
.cmp-empty-slot__icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  border: 2px dashed rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
}
.cmp-empty-slot p {
  font-size: 0.75rem;
  font-weight: 600;
  margin: 0;
  color: var(--gaming-text-dim);
}
.cmp-empty-slot small {
  font-size: 0.65rem;
  color: var(--gaming-text-dim);
}

/* Row cells */
.cmp-row {
  display: contents;
}
.cmp-row--hidden { display: none; }
.cmp-cell {
  padding: 0.85rem 1.25rem;
  border-top: 1px solid rgba(255,255,255,0.04);
  border-right: 1px solid rgba(255,255,255,0.04);
  display: flex;
  align-items: center;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.75);
  transition: background 0.15s;
  min-height: 52px;
}
.cmp-cell:last-child { border-right: none; }
.cmp-cell--label {
  color: var(--gaming-text-dim);
  font-size: 0.72rem;
  font-weight: 600;
  background: rgba(255,255,255,0.01);
  gap: 0.5rem;
}
.cmp-cell--label svg { color: rgba(var(--gaming-cta-rgb),0.5); flex-shrink: 0; }
.cmp-cell--group {
  background: rgba(var(--gaming-cta-rgb),0.04);
  color: rgba(var(--gaming-cta-rgb),0.8);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.5rem 1.25rem;
}
.cmp-cell--group-span {
  background: rgba(var(--gaming-cta-rgb),0.04);
  border-top: 1px solid rgba(var(--gaming-cta-rgb),0.1);
}
.cmp-cell--diff {
  background: rgba(251,191,36,0.04);
}
.cmp-cell--best {
  background: rgba(16,217,160,0.04);
}
.cmp-cell--center { justify-content: center; text-align: center; }
.cmp-cell--empty-slot {
  background: rgba(255,255,255,0.005);
}

/* Value renderers */
.cmp-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 6px;
}
.cmp-check--yes {
  background: rgba(16,217,160,0.12);
  color: #10d9a0;
}
.cmp-check--no {
  background: rgba(239,68,68,0.08);
  color: rgba(239,68,68,0.5);
}
.cmp-check--partial {
  background: rgba(251,191,36,0.1);
  color: rgba(251,191,36,0.8);
}
.cmp-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.66rem;
  font-weight: 700;
  border-radius: 20px;
  padding: 3px 9px;
}
.cmp-pill--green {
  background: rgba(16,217,160,0.1);
  border: 1px solid rgba(16,217,160,0.25);
  color: #10d9a0;
}
.cmp-pill--red {
  background: rgba(239,68,68,0.08);
  border: 1px solid rgba(239,68,68,0.2);
  color: rgba(239,68,68,0.8);
}
.cmp-pill--amber {
  background: rgba(251,191,36,0.08);
  border: 1px solid rgba(251,191,36,0.2);
  color: rgba(251,191,36,0.85);
}
.cmp-pill__dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
}

/* Footer row with CTA */
.cmp-cta-row {
  display: contents;
}
.cmp-cta-cell {
  padding: 1.25rem;
  border-top: 1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.2);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.cmp-cta-cell--label {
  background: rgba(0,0,0,0.2);
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
}
.cmp-cart-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.7rem;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--gaming-cta), var(--gaming-cta-dark));
  color: #fff;
  font-size: 0.75rem;
  font-weight: 800;
  font-family: 'Unbounded', sans-serif;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 16px -4px rgba(var(--gaming-cta-rgb),0.5);
  text-decoration: none;
}
.cmp-cart-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px -4px rgba(var(--gaming-cta-rgb),0.6);
}
.cmp-cart-btn.added {
  background: linear-gradient(135deg, rgba(16,217,160,0.8), rgba(10,170,125,0.9));
}
.cmp-detail-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  font-size: 0.68rem;
  color: var(--gaming-text-dim);
  text-decoration: none;
  transition: color 0.2s;
}
.cmp-detail-link:hover { color: rgba(255,255,255,0.7); }

/* Product picker modal */
.cmp-picker {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.cmp-picker.visible { opacity: 1; pointer-events: all; }
.cmp-picker__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(8px);
}
.cmp-picker__panel {
  position: relative;
  width: 100%;
  max-width: 540px;
  max-height: 80vh;
  background: rgba(8,8,20,0.95);
  border: 1px solid rgba(var(--gaming-cta-rgb),0.2);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 32px 80px rgba(0,0,0,0.6);
}
.cmp-picker__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  flex-shrink: 0;
}
.cmp-picker__title {
  font-family: 'Unbounded', sans-serif;
  font-size: 0.85rem;
  font-weight: 800;
  color: #fff;
}
.cmp-picker__close {
  width: 28px; height: 28px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.5);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.18s;
  font-size: 1rem;
}
.cmp-picker__close:hover { background: rgba(239,68,68,0.1); color: rgba(239,68,68,0.8); border-color: rgba(239,68,68,0.3); }
.cmp-picker__search {
  padding: 0.85rem 1.5rem;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.cmp-picker__search input {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  color: #fff;
  font-size: 0.8rem;
  padding: 0.6rem 0.9rem;
  outline: none;
  transition: border-color 0.2s;
  font-family: 'Manrope', sans-serif;
}
.cmp-picker__search input:focus { border-color: rgba(var(--gaming-cta-rgb),0.4); }
.cmp-picker__search input::placeholder { color: rgba(255,255,255,0.5); }
.cmp-picker__list {
  overflow-y: auto;
  flex: 1;
  padding: 0.5rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--gaming-cta-rgb),0.2) transparent;
}
.cmp-picker__item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s;
  border: 1px solid transparent;
}
.cmp-picker__item:hover {
  background: rgba(var(--gaming-cta-rgb),0.06);
  border-color: rgba(var(--gaming-cta-rgb),0.15);
}
.cmp-picker__item.disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}
.cmp-picker__art {
  width: 40px; height: 40px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
  background: linear-gradient(135deg, rgba(var(--gaming-cta-rgb),0.25), rgba(16,217,160,0.12));
  border: 1px solid rgba(var(--gaming-cta-rgb),0.2);
}
.cmp-picker__info { flex: 1; min-width: 0; }
.cmp-picker__name {
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
}
.cmp-picker__meta {
  font-size: 0.66rem;
  color: var(--gaming-text-dim);
  margin-top: 1px;
}
.cmp-picker__price {
  font-family: 'Unbounded', sans-serif;
  font-size: 0.75rem;
  font-weight: 800;
  color: #fff;
}

/* Already added tag */
.cmp-in-list {
  font-size: 0.6rem;
  color: rgba(var(--gaming-cta-rgb),0.7);
  background: rgba(var(--gaming-cta-rgb),0.08);
  border: 1px solid rgba(var(--gaming-cta-rgb),0.2);
  border-radius: 20px;
  padding: 2px 7px;
}

/* Diff highlighting */
.diff-mode .cmp-cell--diff {
  background: rgba(251,191,36,0.06);
  border-left: 2px solid rgba(251,191,36,0.2);
}

/* Responsive */
@media (max-width: 768px) {
  .cmp-grid {
    grid-template-columns: 140px repeat(3, 1fr);
    font-size: 0.72rem;
  }
  .cmp-cell { padding: 0.7rem 0.75rem; }
  .cmp-col-head { padding: 1.25rem 0.75rem 1rem; }
  .cmp-col-name { font-size: 0.7rem; }
}

/* в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ
   DASHBOARD PAGE — moved from inline <style>
   в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ */
.dash-page {
  min-height: 100vh;
  padding-top: 72px;
  padding-bottom: 6rem;
}

/* Hero bar */
.dash-hero {
  background: linear-gradient(180deg, rgba(var(--gaming-cta-rgb),0.08) 0%, transparent 100%);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  padding: 2.5rem 0 2rem;
}
.dash-hero__inner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.dash-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(var(--gaming-cta-rgb),0.4), rgba(16,217,160,0.3));
  border: 2px solid rgba(var(--gaming-cta-rgb),0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.dash-hero__text h1 {
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  font-weight: 700;
  color: #fff;
  margin: 0 0 0.2rem;
}
.dash-hero__text p {
  font-size: 0.82rem;
  color: var(--gaming-text-muted);
  margin: 0;
}
.dash-hero__text .dash-status {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  color: rgb(16,217,160);
  background: rgba(16,217,160,0.08);
  border: 1px solid rgba(16,217,160,0.2);
  border-radius: 20px;
  padding: 2px 10px;
  margin-top: 0.35rem;
}
.dash-status__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgb(16,217,160);
  animation: blink-pulse 2s ease-in-out infinite;
}

/* Stats row */
.dash-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin: 2rem 0;
}
.dash-stat {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  transition: border-color 0.2s;
}
.dash-stat:hover { border-color: rgba(var(--gaming-cta-rgb),0.25); }
.dash-stat__label {
  font-size: 0.72rem;
  color: var(--gaming-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 0.4rem;
}
.dash-stat__value {
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
  font-family: 'Unbounded', sans-serif;
}
.dash-stat__sub {
  font-size: 0.72rem;
  color: var(--gaming-text-muted);
  margin: 0.2rem 0 0;
}
.dash-stat--green .dash-stat__value { color: rgb(16,217,160); }
.dash-stat--purple .dash-stat__value { color: var(--gaming-accent-light); }

/* Section headings */
.dash-section { margin-top: 2.5rem; }
.dash-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  padding-bottom: 0.75rem;
}
.dash-section__title {
  font-size: 0.9rem;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
}
.dash-section__action {
  font-size: 0.78rem;
  color: var(--gaming-accent-light);
  text-decoration: none;
  transition: color 0.2s;
}
.dash-section__action:hover { color: #fff; }

/* Active subscriptions grid */
.dash-subs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}
.dash-sub {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
  padding: 1.4rem 1.4rem 1.2rem;
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s, transform 0.2s;
}
.dash-sub:hover {
  border-color: rgba(var(--gaming-cta-rgb),0.3);
  transform: translateY(-2px);
}
.dash-sub__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 0% 0%, var(--sub-rgb, 108,99,255) / 0.06, transparent 70%);
  pointer-events: none;
}
.dash-sub__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.dash-sub__game {
  font-size: 0.7rem;
  color: var(--gaming-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 0.2rem;
}
.dash-sub__name {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
}
.dash-sub__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}
.dash-sub__badge--active {
  background: rgba(16,217,160,0.1);
  border: 1px solid rgba(16,217,160,0.25);
  color: rgb(16,217,160);
}
.dash-sub__badge--expired {
  background: rgba(239,68,68,0.1);
  border: 1px solid rgba(239,68,68,0.25);
  color: rgb(239,68,68);
}
.dash-sub__badge--expiring {
  background: rgba(249,115,22,0.1);
  border: 1px solid rgba(249,115,22,0.25);
  color: rgb(249,115,22);
}
.dash-sub__badge .blink-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  animation: blink-pulse 2s ease-in-out infinite;
}
.dash-sub__expires {
  font-size: 0.75rem;
  color: var(--gaming-text-muted);
  margin: 0 0 1rem;
}
.dash-sub__expires strong { color: rgba(255,255,255,0.7); }
.dash-sub__progress {
  height: 3px;
  background: rgba(255,255,255,0.06);
  border-radius: 2px;
  margin-bottom: 1rem;
  overflow: hidden;
}
.dash-sub__progress-bar {
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gaming-accent), var(--gaming-accent-light));
  transition: width 0.6s ease;
}
.dash-sub__progress-bar--low { background: linear-gradient(90deg, rgb(239,68,68), rgb(249,115,22)); }
.dash-sub__actions {
  display: flex;
  gap: 0.6rem;
}
.dash-sub__btn {
  flex: 1;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  text-decoration: none;
}
.dash-sub__btn--download {
  background: rgba(var(--gaming-cta-rgb),0.15);
  border-color: rgba(var(--gaming-cta-rgb),0.35);
  color: var(--gaming-accent-light);
}
.dash-sub__btn--download:hover {
  background: rgba(var(--gaming-cta-rgb),0.25);
  border-color: rgba(var(--gaming-cta-rgb),0.55);
}
.dash-sub__btn--renew {
  background: rgba(16,217,160,0.1);
  border-color: rgba(16,217,160,0.25);
  color: rgb(16,217,160);
}
.dash-sub__btn--renew:hover {
  background: rgba(16,217,160,0.18);
  border-color: rgba(16,217,160,0.45);
}
.dash-sub__btn svg { width: 14px; height: 14px; }
.dash-sub--expired { opacity: 0.65; }
.dash-sub__btn--renew--full { flex: 1; max-width: 100%; }

/* Empty subs state */
.dash-empty {
  text-align: center;
  padding: 3rem 2rem;
  background: rgba(255,255,255,0.015);
  border: 1px dashed rgba(255,255,255,0.08);
  border-radius: 14px;
}
.dash-empty__icon {
  width: 48px; height: 48px;
  margin: 0 auto 1rem;
  color: rgba(255,255,255,0.2);
}
.dash-empty p { color: var(--gaming-text-muted); font-size: 0.85rem; margin: 0 0 1.25rem; }

/* Order history table */
.dash-orders {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  overflow: hidden;
}
.dash-orders table {
  width: 100%;
  border-collapse: collapse;
}
.dash-orders thead tr {
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.dash-orders th {
  padding: 0.85rem 1.25rem;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--gaming-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  text-align: left;
  white-space: nowrap;
}
.dash-orders td {
  padding: 1rem 1.25rem;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.75);
  border-top: 1px solid rgba(255,255,255,0.04);
  vertical-align: middle;
}
.dash-orders tr:hover td { background: rgba(255,255,255,0.015); }
.dash-orders .order-product { font-weight: 600; color: #fff; }
.dash-orders .order-price { font-weight: 700; color: #fff; font-family: 'Unbounded', sans-serif; font-size: 0.78rem; }
.order-status {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 20px;
}
.order-status--completed {
  background: rgba(16,217,160,0.1);
  border: 1px solid rgba(16,217,160,0.2);
  color: rgb(16,217,160);
}
.order-status--refunded {
  background: rgba(249,115,22,0.1);
  border: 1px solid rgba(249,115,22,0.2);
  color: rgb(249,115,22);
}
.order-dl-btn {
  font-size: 0.72rem;
  color: var(--gaming-accent-light);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.order-dl-btn:hover { color: #fff; }

/* Settings section */
.dash-settings {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
.dash-settings-card {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 1.5rem;
  transition: border-color 0.2s;
}
.dash-settings-card:hover { border-color: rgba(var(--gaming-cta-rgb),0.2); }
.dash-settings-card__title {
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.dash-settings-card__title svg { width: 16px; height: 16px; color: var(--gaming-accent-light); }
.dash-field {
  margin-bottom: 1rem;
}
.dash-field label {
  display: block;
  font-size: 0.72rem;
  color: var(--gaming-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 0.4rem;
}
.dash-field input {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  color: #fff;
  font-size: 0.85rem;
  padding: 0.55rem 0.9rem;
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.dash-field input:focus { border-color: rgba(var(--gaming-cta-rgb),0.5); }
.dash-field input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.dash-save-btn {
  background: rgba(var(--gaming-cta-rgb),0.15);
  border: 1px solid rgba(var(--gaming-cta-rgb),0.35);
  color: var(--gaming-accent-light);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.55rem 1.25rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  margin-top: 0.5rem;
}
.dash-save-btn:hover {
  background: rgba(var(--gaming-cta-rgb),0.25);
  border-color: rgba(var(--gaming-cta-rgb),0.55);
  color: #fff;
}

/* Discord connect card */
.dash-discord-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: rgba(88,101,242,0.08);
  border: 1px solid rgba(88,101,242,0.2);
  border-radius: 10px;
  margin-bottom: 1rem;
}
.dash-discord-card__icon {
  width: 36px; height: 36px;
  background: rgba(88,101,242,0.2);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: #7289da;
}
.dash-discord-card__icon svg { width: 18px; height: 18px; }
.dash-discord-card__text p { margin: 0; font-size: 0.8rem; color: rgba(255,255,255,0.6); }
.dash-discord-card__text strong { color: #fff; font-size: 0.85rem; }
.dash-connect-btn {
  margin-left: auto;
  background: rgba(88,101,242,0.2);
  border: 1px solid rgba(88,101,242,0.35);
  color: #7289da;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.4rem 1rem;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}
.dash-connect-btn:hover { background: rgba(88,101,242,0.3); color: #fff; }

/* Danger zone */
.dash-danger { margin-top: 0.5rem; }
.dash-danger--bordered { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,0.05); }
.dash-danger p { font-size: 0.78rem; color: var(--gaming-text-muted); margin: 0 0 0.75rem; }
.dash-danger-btn {
  background: rgba(239,68,68,0.08);
  border: 1px solid rgba(239,68,68,0.2);
  color: rgb(239,68,68);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}
.dash-danger-btn:hover { background: rgba(239,68,68,0.15); border-color: rgba(239,68,68,0.35); }

/* Responsive */
@media (max-width: 900px) {
  .dash-stats { grid-template-columns: repeat(2, 1fr); }
  .dash-settings { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .dash-stats { grid-template-columns: repeat(2, 1fr); }
  .dash-orders th:nth-child(3),
  .dash-orders td:nth-child(3) { display: none; }
}

/* в”Ђв”Ђ Referral promo widget в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
/* Animated glow behind */
/* Decorative grid pattern */
@media (max-width: 860px) {
        }
@media (max-width: 600px) {
      }

/* в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ
   BUNDLE PAGE — moved from inline <style>
   в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ */
:root {
  --bundle-accent: #00CFFF;
  --bundle-accent-dim: rgba(0,207,255,0.15);
}

/* Hero */
.bdl-hero {
  padding: 5.5rem 0 3rem;
  text-align: center;
  position: relative;
}
.bdl-hero__label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.816rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bundle-accent);
  background: var(--bundle-accent-dim);
  border: 1px solid rgba(0,207,255,0.3);
  border-radius: 20px;
  padding: 4px 14px;
  margin-bottom: 1rem;
}
.bdl-hero__title {
  font-family: 'Unbounded', sans-serif;
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.04em;
  margin: 0 0 0.75rem;
  line-height: 1;
}
.bdl-hero__title em {
  font-style: normal;
  color: var(--gaming-accent-light);
}
.bdl-hero__sub {
  font-size: 1.08rem;
  color: rgba(255,255,255,0.6);
  max-width: 480px;
  margin: 0 auto;
}

/* Discount tiers strip */
.bdl-tiers { display: none; } /* hidden — discount based on cart total */
.bdl-tier {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 0.85rem 1.5rem;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.03);
  transition: all 0.25s;
  min-width: 110px;
  position: relative;
  overflow: hidden;
}
.bdl-tier::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(0,207,255,0.5), transparent);
  opacity: 0;
  transition: opacity 0.25s;
}
.bdl-tier.active {
  border-color: rgba(0,207,255,0.4);
  background: rgba(0,207,255,0.06);
  box-shadow: 0 0 24px -8px rgba(0,207,255,0.3);
}
.bdl-tier.active::before { opacity: 1; }
.bdl-tier__count {
  font-size: 0.744rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gaming-text-dim);
}
.bdl-tier.active .bdl-tier__count { color: rgba(0,207,255,0.7); }
.bdl-tier__pct {
  font-family: 'Unbounded', sans-serif;
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--gaming-text-dim);
  letter-spacing: -0.03em;
  transition: color 0.25s;
}
.bdl-tier.active .bdl-tier__pct {
  color: var(--bundle-accent);
  text-shadow: 0 0 20px rgba(0,207,255,0.4);
}
.bdl-tier__label {
  font-size: 0.78rem;
  color: var(--gaming-text-dim);
}
.bdl-tier.active .bdl-tier__label { color: var(--gaming-text-dim); }

/* Main layout */
.bdl-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 1.5rem;
  align-items: start;
  padding-bottom: 4rem;
}
/* grid items default to min-width:auto and refuse to shrink below their
   content, blowing the 1fr track past the viewport on small screens */
.bdl-layout > * { min-width: 0; }
@media (max-width: 900px) {
  .bdl-layout { grid-template-columns: 1fr; }
}

/* Product grid */
.bdl-products-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.bdl-products-title {
  font-family: 'Unbounded', sans-serif;
  font-size: 0.96rem;
  font-weight: 700;
  color: rgba(255,255,255,0.6);
  letter-spacing: -0.01em;
  flex: 0 0 auto;
}
.bdl-filter-wrap {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  flex: 1 1 280px;
  min-width: 0;
}
.bdl-filter-btn {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gaming-text-dim);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
  transition: all 0.2s;
}
.bdl-filter-btn.active, .bdl-filter-btn:hover {
  color: #fff;
  background: rgba(var(--gaming-cta-rgb),0.1);
  border-color: rgba(var(--gaming-cta-rgb),0.3);
}

.bdl-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.75rem;
}

/* Product card (selectable) */
.bdl-card {
  position: relative;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
  padding: 1rem;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  user-select: none;
}
.bdl-card:hover {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.12);
  transform: translateY(-1px);
}
.bdl-card.selected {
  border-color: rgba(0,207,255,0.5);
  background: rgba(0,207,255,0.05);
  box-shadow: 0 0 20px -8px rgba(0,207,255,0.35), inset 0 0 0 1px rgba(0,207,255,0.1);
}
.bdl-card__check {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  width: 20px; height: 20px;
  border-radius: 6px;
  border: 1.5px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  display: flex; align-items: center; justify-content: center;
  transition: all 0.18s;
  font-size: 0.72rem;
  color: transparent;
}
.bdl-card.selected .bdl-card__check {
  background: var(--bundle-accent);
  border-color: var(--bundle-accent);
  color: #000;
}
.bdl-card__art {
  font-size: 1.68rem;
  line-height: 1;
}
.bdl-card__name {
  font-size: 0.936rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}
.bdl-card__meta {
  font-size: 0.744rem;
  color: var(--gaming-text-dim);
}
.bdl-card__price {
  font-family: 'Unbounded', sans-serif;
  font-size: 0.984rem;
  font-weight: 800;
  color: rgba(255,255,255,0.7);
  margin-top: auto;
}
.bdl-card__price-discounted {
  font-family: 'Unbounded', sans-serif;
  font-size: 0.984rem;
  font-weight: 800;
  color: var(--bundle-accent);
}
.bdl-card__price-orig {
  font-size: 0.744rem;
  color: var(--gaming-text-dim);
  text-decoration: line-through;
  margin-left: 4px;
}
.bdl-card__status {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.696rem;
  font-weight: 700;
  color: #10d9a0;
}
.bdl-card__status::before {
  content: '';
  width: 4px; height: 4px;
  border-radius: 50%;
  background: currentColor;
}

/* Sidebar summary */
.bdl-summary {
  position: sticky;
  top: 88px;
  background: rgba(6,6,16,0.9);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 20px;
  overflow: hidden;
  backdrop-filter: blur(20px);
}
/* Top accent */
.bdl-summary::before {
  content: '';
  display: block;
  height: 2px;
  background: linear-gradient(90deg, #00CFFF, #66E0FF, #00CFFF);
  background-size: 200% 100%;
  animation: bdl-shimmer 3s linear infinite;
}
@keyframes bdl-shimmer {
  0% { background-position: 0% 0; }
  100% { background-position: 200% 0; }
}
.bdl-summary__head {
  padding: 1.25rem 1.25rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.bdl-summary__title {
  font-family: 'Unbounded', sans-serif;
  font-size: 0.984rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
}
.bdl-summary__sub {
  font-size: 0.816rem;
  color: var(--gaming-text-dim);
  margin-top: 2px;
}

/* Discount meter */
.bdl-meter {
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.bdl-meter__label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.6rem;
}
.bdl-meter__label span:first-child {
  font-size: 0.84rem;
  color: var(--gaming-text-dim);
}
.bdl-meter__pct {
  font-family: 'Unbounded', sans-serif;
  font-size: 1.32rem;
  font-weight: 900;
  color: var(--bundle-accent);
  letter-spacing: -0.03em;
  transition: all 0.4s;
}
.bdl-meter__pct.zero { color: var(--gaming-text-dim); }
.bdl-meter__bar {
  height: 6px;
  background: rgba(255,255,255,0.06);
  border-radius: 99px;
  overflow: hidden;
}
.bdl-meter__fill {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #00CFFF, #66E0FF);
  transition: width 0.4s cubic-bezier(0.16,1,0.3,1);
  width: 0%;
  box-shadow: 0 0 8px rgba(0,207,255,0.5);
}
.bdl-meter__hint {
  margin-top: 0.5rem;
  font-size: 0.78rem;
  color: var(--gaming-text-dim);
  text-align: center;
}
.bdl-meter__hint svg,
.bdl-cta-hint svg { display: inline-block; vertical-align: -0.15em; }
.bdl-meter__hint strong { color: var(--bundle-accent); }

/* Selected items list */
.bdl-selected-list {
  padding: 0.75rem 1.25rem;
  max-height: 220px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,207,255,0.2) transparent;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.bdl-selected-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.bdl-selected-item:last-child { border-bottom: none; }
.bdl-selected-item__emoji { font-size: 1.08rem; flex-shrink: 0; }
.bdl-selected-item__name {
  flex: 1;
  font-size: 0.864rem;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bdl-selected-item__prices {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
}
.bdl-selected-item__orig {
  font-size: 0.72rem;
  color: var(--gaming-text-dim);
  text-decoration: line-through;
}
.bdl-selected-item__final {
  font-family: 'Unbounded', sans-serif;
  font-size: 0.84rem;
  font-weight: 800;
  color: var(--bundle-accent);
}
.bdl-selected-item__remove {
  width: 18px; height: 18px;
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,0.07);
  background: none;
  color: var(--gaming-text-dim);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.84rem;
  transition: all 0.18s;
  flex-shrink: 0;
}
.bdl-selected-item__remove:hover { color: rgba(255,77,109,0.8); border-color: rgba(255,77,109,0.3); background: rgba(255,77,109,0.06); }
.bdl-empty-note {
  text-align: center;
  padding: 1.5rem 0;
  font-size: 0.9rem;
  color: var(--gaming-text-dim);
}

/* Totals */
.bdl-totals {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.bdl-totals__row {
  display: flex;
  justify-content: space-between;
  font-size: 0.864rem;
  color: var(--gaming-text-dim);
}
.bdl-totals__row--saving {
  color: #10d9a0;
  font-weight: 700;
}
.bdl-totals__row--total {
  font-size: 1.08rem;
  font-weight: 800;
  color: #fff;
  margin-top: 0.25rem;
  padding-top: 0.4rem;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.bdl-totals__row--total span:last-child {
  font-family: 'Unbounded', sans-serif;
  font-size: 1.32rem;
  color: var(--bundle-accent);
  letter-spacing: -0.02em;
}

/* CTA */
.bdl-cta {
  padding: 1rem 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* в”Ђв”Ђ Payment button row в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.bdl-cta-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
}

/* в”Ђв”Ђ Shared shimmer keyframe в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
@keyframes bdl-btn-shimmer {
  0%   { transform: translateX(-130%) skewX(-20deg); }
  100% { transform: translateX(230%)  skewX(-20deg); }
}

/* в”Ђв”Ђ Shared button base в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.bdl-btn-crypto,
.bdl-btn-balance {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  padding: 0.82rem 0.5rem;
  border-radius: 14px;
  font-size: 0.912rem;
  font-weight: 800;
  font-family: 'Manrope', sans-serif;
  letter-spacing: 0.01em;
  cursor: pointer;
  user-select: none;
  transition:
    transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.22s ease,
    filter     0.18s ease;
  /* Shimmer sweep pseudo-element */
}

/* Shimmer layer (::before) */
.bdl-btn-crypto::before,
.bdl-btn-balance::before {
  content: '';
  position: absolute;
  top: -40%;
  left: -40%;
  width: 35%;
  height: 180%;
  background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(255,255,255,0.28) 50%,
    transparent 80%
  );
  animation: bdl-btn-shimmer 3.2s ease-in-out infinite;
  pointer-events: none;
  border-radius: 4px;
}

/* Hover — lift + glow up */
.bdl-btn-crypto:not(:disabled):hover,
.bdl-btn-balance:not(:disabled):hover {
  transform: translateY(-2px) scale(1.015);
}

/* Active — press down */
.bdl-btn-crypto:not(:disabled):active,
.bdl-btn-balance:not(:disabled):active {
  transform: translateY(1px) scale(0.975);
  filter: brightness(0.88);
}

/* Disabled state */
.bdl-btn-crypto:disabled,
.bdl-btn-balance:disabled {
  opacity: 0.32;
  cursor: not-allowed;
}
.bdl-btn-crypto:disabled::before,
.bdl-btn-balance:disabled::before {
  animation: none;
}

/* в”Ђв”Ђ Crypto button (amber / orange glass) в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.bdl-btn-crypto {
  background:
    linear-gradient(
      135deg,
      rgba(255,165,30,0.22)  0%,
      rgba(230,100,0,0.18)   60%,
      rgba(255,200,60,0.14)  100%
    );
  border: 1px solid rgba(255,165,30,0.42);
  color: #ffb830;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    0 4px 20px -6px rgba(255,140,0,0.55),
    inset 0 1px 0 rgba(255,220,120,0.2),
    inset 0 -1px 0 rgba(200,80,0,0.12);
  text-shadow: 0 1px 6px rgba(255,120,0,0.4);
}
.bdl-btn-crypto:not(:disabled):hover {
  box-shadow:
    0 8px 32px -6px rgba(255,140,0,0.75),
    inset 0 1px 0 rgba(255,220,120,0.28),
    inset 0 -1px 0 rgba(200,80,0,0.12);
  border-color: rgba(255,185,50,0.65);
}
/* Shimmer phase offset for crypto */
.bdl-btn-crypto::before {
  animation-delay: 0s;
}

/* в”Ђв”Ђ Balance button (teal / emerald glass) в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.bdl-btn-balance {
  background:
    linear-gradient(
      135deg,
      rgba(16,217,160,0.18)  0%,
      rgba(0,190,130,0.14)   60%,
      rgba(60,240,190,0.12)  100%
    );
  border: 1px solid rgba(16,217,160,0.38);
  color: #10d9a0;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    0 4px 20px -6px rgba(16,217,160,0.45),
    inset 0 1px 0 rgba(120,255,210,0.2),
    inset 0 -1px 0 rgba(0,150,100,0.1);
  text-shadow: 0 1px 6px rgba(16,217,160,0.35);
}
.bdl-btn-balance:not(:disabled):hover {
  box-shadow:
    0 8px 32px -6px rgba(16,217,160,0.65),
    inset 0 1px 0 rgba(120,255,210,0.28),
    inset 0 -1px 0 rgba(0,150,100,0.1);
  border-color: rgba(16,217,160,0.6);
}
/* Shimmer phase offset for balance */
.bdl-btn-balance::before {
  animation-delay: 1.6s;
}

/* в”Ђв”Ђ Legacy single-CTA button (kept for safety) в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.bdl-cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.85rem;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--gaming-cta) 0%, var(--gaming-cta-dark) 100%);
  color: #fff;
  font-size: 0.984rem;
  font-weight: 900;
  font-family: 'Unbounded', sans-serif;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 20px -4px rgba(var(--gaming-cta-rgb),0.5);
  letter-spacing: -0.01em;
}
.bdl-cta-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 28px -4px rgba(var(--gaming-cta-rgb),0.6);
}
.bdl-cta-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.bdl-cta-hint {
  text-align: center;
  font-size: 0.78rem;
  color: var(--gaming-text-dim);
}
.bdl-cta-hint strong { color: rgba(0,207,255,0.6); }

/* Plan selector */
.bdl-plan-wrap {
  padding: 0.75rem 1.25rem 0;
}
.bdl-plan-label {
  font-size: 0.78rem;
  color: var(--gaming-text-dim);
  margin-bottom: 0.5rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.bdl-plans {
  display: flex;
  gap: 0.4rem;
}
.bdl-plan {
  flex: 1;
  text-align: center;
  padding: 0.5rem 0.25rem;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.03);
  cursor: pointer;
  transition: all 0.18s;
  font-size: 0.744rem;
  color: rgba(255,255,255,0.6);
}
.bdl-plan.active {
  border-color: rgba(0,207,255,0.4);
  background: rgba(0,207,255,0.07);
  color: var(--bundle-accent);
  font-weight: 700;
}
.bdl-plan__multi { display: block; font-weight: 800; font-size: 0.864rem; }

/* Tier strip hidden — discount is amount-based, not count-based */
.bdl-tiers { display: none !important; }

/* в”Ђв”Ђ Per-product duration selector в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.bdl-card__dur-wrap {
  display: flex;
  gap: 3px;
  margin: 0.5rem 0 0.4rem;
}
.bdl-card__dur-btn {
  flex: 1;
  padding: 3px 0;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: var(--gaming-text-dim);
  font-size: 0.72rem;
  font-weight: 700;
  font-family: 'Manrope', sans-serif;
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
  letter-spacing: 0.04em;
}
.bdl-card__dur-btn:hover {
  border-color: rgba(0,207,255,0.35);
  color: rgba(255,255,255,0.7);
}
.bdl-card__dur-btn.active {
  border-color: rgba(0,207,255,0.55);
  background: rgba(0,207,255,0.12);
  color: #00CFFF;
}
.bdl-card__fixed-tag {
  display: inline-block;
  font-size: 0.696rem;
  font-weight: 700;
  color: var(--gaming-text-dim);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 4px;
  padding: 2px 6px;
  margin: 0.4rem 0 0.3rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.bdl-card__dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #10d9a0;
  display: inline-block;
  margin-right: 4px;
  vertical-align: middle;
  box-shadow: 0 0 4px rgba(16,217,160,0.5);
}
.bdl-card__prices {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  margin-top: 0.1rem;
}
.bdl-card__price { font-size: 1.056rem; font-weight: 700; color: #fff; }
.bdl-card__price-orig {
  font-size: 0.84rem;
  color: var(--gaming-text-dim);
  text-decoration: line-through;
}
.bdl-card__price-disc {
  font-size: 1.056rem;
  font-weight: 700;
  color: #00CFFF;
}

/* в”Ђв”Ђ Scrollable game filter в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.bdl-filter-wrap {
  display: flex;
  gap: 0.35rem;
  min-width: 0;
  flex-wrap: wrap;
  overflow-x: visible;
  padding-bottom: 2px;
}
.bdl-filter-wrap::-webkit-scrollbar { display: none; }
.bdl-filter-btn { flex-shrink: 0; }

/* в”Ђв”Ђ Sidebar: selected item dur sub-label в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.bdl-selected-item__info {
  flex: 1;
  min-width: 0;
}
.bdl-selected-item__name {
  display: block;
  font-size: 0.936rem;
  font-weight: 600;
  color: rgba(255,255,255,0.8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bdl-selected-item__dur {
  display: block;
  font-size: 0.756rem;
  color: var(--gaming-text-dim);
  font-weight: 500;
}

/* CryptoCloud modal — simplified (widget placeholder) */
.cc-modal-bg {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s, visibility 0.25s;
}
.cc-modal-bg.open { opacity: 1; visibility: visible; }
.cc-modal {
  background: rgba(10,9,20,0.99);
  border: 1px solid rgba(247,147,26,0.2);
  border-radius: 22px;
  padding: 2rem;
  width: min(420px, 92vw);
  position: relative;
  box-shadow: 0 40px 100px -20px rgba(0,0,0,0.9),
              0 0 80px -30px rgba(247,147,26,0.12);
  transform: translateY(18px) scale(0.97);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  text-align: center;
}
.cc-modal-bg.open .cc-modal { transform: translateY(0) scale(1); }
.cc-modal__close {
  position: absolute;
  top: 1rem; right: 1rem;
  width: 30px; height: 30px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  color: rgba(255,255,255,0.6);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  transition: all 0.2s;
}
.cc-modal__close:hover { background: rgba(255,255,255,0.1); color: #fff; }
.cc-modal__logo {
  width: 56px; height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, #f7931a 0%, #e07000 100%);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1rem;
  font-size: 1.92rem;
  box-shadow: 0 8px 24px -8px rgba(247,147,26,0.5);
}
.cc-modal__title {
  font-size: 1.2rem;
  font-weight: 800;
  color: #fff;
  font-family: 'Unbounded', sans-serif;
  margin: 0 0 0.3rem;
}
.cc-modal__amount {
  font-size: 2.4rem;
  font-weight: 900;
  color: #f7931a;
  font-family: 'Unbounded', sans-serif;
  margin: 0.8rem 0;
}
.cc-modal__sub {
  font-size: 0.888rem;
  color: rgba(255,255,255,0.6);
  margin: 0 0 1.5rem;
  line-height: 1.5;
}

/* в”Ђв”Ђ Pay-with-balance confirmation modal в”Ђв”Ђ */
.bal-confirm-bg {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.82);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity 0.25s, visibility 0.25s;
}
.bal-confirm-bg.open { opacity: 1; visibility: visible; }
.bal-confirm {
  background: rgba(10,9,20,0.99);
  border: 1px solid rgba(0,93,230,0.22);
  border-radius: 22px;
  padding: 2rem;
  width: min(420px, 92vw);
  position: relative;
  box-shadow: 0 40px 100px -20px rgba(0,0,0,0.9), 0 0 80px -30px rgba(0,93,230,0.16);
  transform: translateY(18px) scale(0.97);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  text-align: center;
}
.bal-confirm-bg.open .bal-confirm { transform: translateY(0) scale(1); }
.bal-confirm__close {
  position: absolute; top: 1rem; right: 1rem;
  width: 30px; height: 30px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px; color: rgba(255,255,255,0.6);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  padding: 0; transition: all 0.2s;
}
.bal-confirm__close:hover { background: rgba(255,255,255,0.1); color: #fff; }
.bal-confirm__icon {
  width: 56px; height: 56px; border-radius: 16px;
  background: linear-gradient(135deg, var(--gaming-cta) 0%, var(--gaming-cta-dark) 100%);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1rem; color: #fff;
  box-shadow: 0 8px 24px -8px rgba(var(--gaming-cta-rgb),0.5);
}
.bal-confirm__title {
  font-size: 1.2rem; font-weight: 800; color: #fff;
  font-family: 'Unbounded', sans-serif; margin: 0 0 0.3rem;
}
.bal-confirm__sub {
  font-size: 0.86rem; color: rgba(255,255,255,0.6);
  margin: 0 0 1.5rem; line-height: 1.5;
}
.bal-confirm__rows {
  text-align: left; display: flex; flex-direction: column; gap: 0.6rem;
  margin-bottom: 1.25rem;
}
.bal-confirm__row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.9rem; color: rgba(255,255,255,0.55);
}
.bal-confirm__row strong { color: #fff; font-weight: 700; }
.bal-confirm__row--total { padding-top: 0.6rem; border-top: 1px solid rgba(255,255,255,0.08); }
.bal-confirm__row--after strong { color: var(--gaming-accent); }
.bal-confirm__insuf {
  display: none;
  background: rgba(239,68,68,0.1);
  border: 1px solid rgba(239,68,68,0.25);
  border-radius: 12px; padding: 0.85rem 1rem; margin-bottom: 1.25rem;
  font-size: 0.82rem; color: rgba(255,255,255,0.7);
}
.bal-confirm__insuf.show { display: block; }
.bal-confirm__insuf a { color: var(--gaming-accent); font-weight: 600; display: inline-block; margin-top: 0.35rem; }
.bal-confirm__btn {
  width: 100%; padding: 0.95rem;
  background: linear-gradient(135deg, var(--gaming-cta) 0%, var(--gaming-cta-dark) 100%);
  color: #fff; border: none; border-radius: 12px;
  font-weight: 700; font-size: 0.95rem; cursor: pointer;
  font-family: 'Unbounded', sans-serif; transition: all 0.2s;
}
.bal-confirm__btn:hover { filter: brightness(1.08); }
.bal-confirm__btn:disabled { opacity: 0.5; cursor: not-allowed; }
.bal-confirm__success { display: none; text-align: center; padding: 1rem 0; }
.bal-confirm__success.show { display: block; }
.bal-confirm__success__ring {
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(16,185,129,0.12);
  border: 2px solid rgba(16,185,129,0.5);
  color: #10d9a0;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1rem;
}
.bal-confirm__success__title {
  font-size: 1.3rem; font-weight: 800; color: #fff;
  font-family: 'Unbounded', sans-serif; margin: 0 0 0.3rem;
}
.bal-confirm__success__sub { font-size: 0.86rem; color: var(--gaming-text-dim); margin: 0; }

/* CryptoCloud widget mount point */
#cc-widget-mount {
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cc-widget-note {
  background: rgba(247,147,26,0.06);
  border: 1px dashed rgba(247,147,26,0.25);
  border-radius: 10px;
  padding: 1rem;
  font-size: 0.876rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.5;
  text-align: left;
}
.cc-widget-note code {
  color: #f7931a;
  font-family: var(--mono);
  font-size: 0.96em;
}

/* в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ
   LANGUAGE SWITCHER (EN / RU)
   в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ */
.lang-switch {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--gaming-border);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255,255,255,0.03);
  flex-shrink: 0;
}
.lang-switch__btn {
  font-family: var(--body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gaming-text-muted);
  background: transparent;
  border: none;
  padding: 9px 12px;
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
  line-height: 1;
}
.lang-switch__btn + .lang-switch__btn { border-left: 1px solid var(--gaming-border); }
.lang-switch__btn:hover { color: var(--gaming-text); }
.lang-switch__btn.active { color: #fff; background: rgba(0,207,255,0.28); }
.mobile_menu .lang-switch { margin-top: 1rem; align-self: flex-start; }

/* в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ
   NEW RULES ADDED AFTER BACKUP (auto-merged)
в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ */

/* в”Ђв”Ђ Delivery email panel в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.co2-delivery__label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--gaming-text-muted);
  margin-bottom: 0.65rem;
}
.co2-delivery__input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.co2-delivery__input-icon {
  position: absolute;
  left: 0.85rem;
  color: var(--gaming-text-dim);
  pointer-events: none;
  flex-shrink: 0;
}
.co2-delivery__input {
  width: 100%;
  background: var(--gaming-bg);
  border: 1px solid var(--gaming-border);
  border-radius: 10px;
  padding: 0.75rem 0.9rem 0.75rem 2.5rem;
  color: var(--gaming-text);
  font-family: var(--body);
  font-size: 0.88rem;
  transition: border-color 0.15s;
}
.co2-delivery__input:focus {
  outline: none;
  border-color: rgba(0,207,255,0.55);
  box-shadow: 0 0 0 3px rgba(0,207,255,0.1);
}
.co2-delivery__input.has-error { border-color: rgba(239,68,68,0.6); }
.co2-delivery__input.is-valid  { border-color: rgba(16,217,160,0.5); }
.co2-delivery__note {
  font-size: 0.73rem;
  color: var(--gaming-text-dim);
  margin-top: 0.55rem;
  line-height: 1.5;
}
.co2-delivery__error {
  font-size: 0.73rem;
  color: rgba(239,68,68,0.85);
  margin-top: 0.35rem;
  min-height: 1em;
}

/* Fallback when backend didn't fill {{license_key}} */
.st-key-fallback {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  background: rgba(16,217,160,0.05);
  border: 1px solid rgba(16,217,160,0.2);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  margin-bottom: 1.2rem;
  text-align: left;
  color: rgba(255,255,255,0.85);
}
.st-key-fallback svg { color: #10d9a0; flex-shrink: 0; margin-top: 2px; }
.st-key-fallback strong { display: block; font-size: 0.88rem; font-weight: 700; margin-bottom: 0.25rem; }
.st-key-fallback p { font-size: 0.78rem; color: rgba(255,255,255,0.5); margin: 0; line-height: 1.5; }

.cart-upsell {
  margin: 0 0.75rem 0.5rem;
  padding: 0.65rem 0.75rem;
  background: rgba(0,207,255,0.06);
  border: 1px solid rgba(0,207,255,0.18);
  border-radius: 10px;
}
.cart-upsell__label {
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gaming-text-dim);
  margin-bottom: 0.5rem;
}
.cart-upsell__item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.cart-upsell__icon {
  font-size: 1.1rem;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.05);
  border-radius: 7px;
  flex-shrink: 0;
}
.cart-upsell__info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}
.cart-upsell__name {
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cart-upsell__note {
  font-size: 0.65rem;
  color: var(--gaming-text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cart-upsell__add {
  flex-shrink: 0;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.3rem 0.7rem;
  background: rgba(0,207,255,0.18);
  border: 1px solid rgba(0,207,255,0.35);
  border-radius: 7px;
  color: #a78bfa;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
  white-space: nowrap;
}
.cart-upsell__add:hover {
  background: rgba(0,207,255,0.3);
  border-color: rgba(0,207,255,0.6);
  color: #fff;
}


.chlog { padding: 4rem 0 3rem; }
.chlog__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap; margin-bottom: 2rem;
}
.chlog__title {
  font-family: var(--display); font-size: 1.4rem; font-weight: 800;
  color: #fff; margin: 0 0 0.35rem; letter-spacing: -0.02em;
}
.chlog__sub {
  font-size: 0.82rem; color: rgba(255,255,255,0.6); margin: 0;
}
.chlog__filters {
  display: flex; gap: 0.4rem; flex-wrap: wrap; flex-shrink: 0;
}
.chlog__filter {
  font-size: 0.72rem; font-weight: 700; padding: 0.3rem 0.85rem;
  border-radius: 20px; border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04); color: var(--gaming-text-dim);
  cursor: pointer; transition: all 0.15s; font-family: inherit;
}
.chlog__filter:hover { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.8); }
.chlog__filter.active {
  background: rgba(var(--gaming-accent-rgb,117,72,210),0.15);
  border-color: rgba(var(--gaming-accent-rgb,117,72,210),0.4);
  color: var(--gaming-accent);
}
.chlog__list { display: flex; flex-direction: column; gap: 0; }

.chlog-entry {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 1.25rem;
  align-items: start;
  padding: 1.25rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: opacity 0.2s;
}
.chlog-entry.hidden { display: none; }
.chlog-entry:last-child { border-bottom: none; }
.chlog-entry:hover { background: rgba(255,255,255,0.015); border-radius: 8px; padding-left: 0.5rem; padding-right: 0.5rem; }

.pgrid-card__price-block {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}
.pgrid-card__price {
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}
.pgrid-card__price-unit {
  font-size: 0.62rem;
  font-weight: 500;
  color: var(--gaming-text-dim);
  margin-left: 0.1rem;
}

.pgrid-card__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.58rem;
  font-weight: 700;
  padding: 0.12rem 0.38rem;
  border-radius: 4px;
  white-space: nowrap;
  font-family: var(--body);
}
.pgrid-card__chip--loyalty {
  color: #f59e0b;
  background: rgba(245,158,11,0.1);
  border: 1px solid rgba(245,158,11,0.22);
}
.pgrid-card__chip--crypto {
  color: #f97316;
  background: rgba(249,115,22,0.1);
  border: 1px solid rgba(249,115,22,0.22);
}

.pgrid-card__chip--loyalty {
  color: #f59e0b;
  background: rgba(245,158,11,0.1);
  border: 1px solid rgba(245,158,11,0.22);
}
.pgrid-card__chip--crypto {
  color: #f97316;
  background: rgba(249,115,22,0.1);
  border: 1px solid rgba(249,115,22,0.22);
}

.pgrid-card__uptime {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-family: var(--body);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: rgba(16,217,160,0.8);
  background: rgba(16,217,160,0.07);
  border: 1px solid rgba(16,217,160,0.2);
  border-radius: 20px;
  padding: 0.18rem 0.55rem;
  white-space: nowrap;
  flex-shrink: 0;
}
.pgrid-card__title {
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0;
}
.pgrid-card__desc {
  font-family: var(--body);
  font-size: 0.78rem;
  color: rgba(255,255,255,0.5);
  line-height: 1.55;
  margin: 0;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Anchor scroll offset — responsive navbar height ─────────────── */
@media (max-width: 768px) {
  html { scroll-padding-top: 74px; }
}
#buy-box,
.faq-group,
.howto-section,
[id^="faq-"],
[id^="howto-"],
[id^="section-"] {
  scroll-margin-top: 90px;
}
@media (max-width: 768px) {
  #buy-box,
  .faq-group,
  .howto-section,
  [id^="faq-"],
  [id^="howto-"],
  [id^="section-"] {
    scroll-margin-top: 74px;
  }
}

/* в”Ђв”Ђ Changelog section в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */

/* в”Ђв”Ђ Cart upsell block в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.cart-upsell {
  margin: 0 0.75rem 0.5rem;
  padding: 0.65rem 0.75rem;
  background: rgba(0,207,255,0.06);
  border: 1px solid rgba(0,207,255,0.18);
  border-radius: 10px;
}
.cart-upsell__label {
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gaming-text-dim);
  margin-bottom: 0.5rem;
}
.cart-upsell__item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.cart-upsell__icon {
  font-size: 1.1rem;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.05);
  border-radius: 7px;
  flex-shrink: 0;
}
.cart-upsell__info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}
.cart-upsell__name {
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cart-upsell__note {
  font-size: 0.65rem;
  color: var(--gaming-text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cart-upsell__add {
  flex-shrink: 0;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.3rem 0.7rem;
  background: rgba(0,207,255,0.18);
  border: 1px solid rgba(0,207,255,0.35);
  border-radius: 7px;
  color: #a78bfa;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
  white-space: nowrap;
}
.cart-upsell__add:hover {
  background: rgba(0,207,255,0.3);
  border-color: rgba(0,207,255,0.6);
  color: #fff;
}


.co2-delivery__label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--gaming-text-muted);
  margin-bottom: 0.65rem;
}
.co2-delivery__input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.co2-delivery__input-icon {
  position: absolute;
  left: 0.85rem;
  color: var(--gaming-text-dim);
  pointer-events: none;
  flex-shrink: 0;
}
.co2-delivery__input {
  width: 100%;
  background: var(--gaming-bg);
  border: 1px solid var(--gaming-border);
  border-radius: 10px;
  padding: 0.75rem 0.9rem 0.75rem 2.5rem;
  color: var(--gaming-text);
  font-family: var(--body);
  font-size: 0.88rem;
  transition: border-color 0.15s;
}
.co2-delivery__input:focus {
  outline: none;
  border-color: rgba(0,207,255,0.55);
  box-shadow: 0 0 0 3px rgba(0,207,255,0.1);
}
.co2-delivery__input.has-error { border-color: rgba(239,68,68,0.6); }
.co2-delivery__input.is-valid  { border-color: rgba(16,217,160,0.5); }
.co2-delivery__note {
  font-size: 0.73rem;
  color: var(--gaming-text-dim);
  margin-top: 0.55rem;
  line-height: 1.5;
}
.co2-delivery__error {
  font-size: 0.73rem;
  color: rgba(239,68,68,0.85);
  margin-top: 0.35rem;
  min-height: 1em;
}

.ref-template-card {
  flex: 1 1 200px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 0.9rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.ref-template-card__platform {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(255,255,255,0.7);
}
.ref-template-card__preview {
  font-size: 0.73rem;
  color: var(--gaming-text-dim);
  line-height: 1.4;
  flex: 1;
}
.ref-template-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.8rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 7px;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(255,255,255,0.6);
  transition: all 0.15s;
  font-family: inherit;
  align-self: flex-start;
}
.ref-template-btn:hover { background: rgba(255,255,255,0.09); color: #fff; }
.ref-template-btn--copied { background: rgba(16,217,160,0.12); border-color: rgba(16,217,160,0.3); color: #10d9a0; }

/* Expiry renewal banner */
@keyframes expiry-slidein {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes expiry-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245,158,11,0); border-color: rgba(245,158,11,0.28); }
  50%       { box-shadow: 0 0 18px 0 rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.55); }
}
.dash-expiry-banner {
  display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem;
  margin-bottom: 1.25rem; border-radius: 14px;
  background: linear-gradient(120deg, rgba(245,158,11,0.09) 0%, rgba(249,115,22,0.06) 100%);
  border: 1px solid rgba(245,158,11,0.28);
  animation: expiry-glow 2.8s ease-in-out 1s infinite;
  flex-wrap: nowrap;
}
.dash-expiry-banner__icon {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 10px;
  background: rgba(245,158,11,0.12); border: 1px solid rgba(245,158,11,0.2);
  flex-shrink: 0; color: #f59e0b; margin-left: 0.25rem;
}
.dash-expiry-banner__body { flex: 1; min-width: 0; }
.dash-expiry-banner__title {
  font-size: 0.85rem; font-weight: 700; color: rgba(255,255,255,0.92);
  margin: 0 0 0.15rem; line-height: 1.3;
}
.dash-expiry-banner__sub {
  font-size: 0.75rem; color: var(--gaming-text-dim); margin: 0; line-height: 1.4;
}
.dash-expiry-banner__cta {
  flex-shrink: 0; padding: 0.5rem 1.1rem; border-radius: 9px;
  background: linear-gradient(135deg, rgba(245,158,11,0.22), rgba(249,115,22,0.18));
  border: 1px solid rgba(245,158,11,0.4); color: #fbbf24;
  font-size: 0.78rem; font-weight: 700; text-decoration: none;
  white-space: nowrap; transition: all 0.18s; letter-spacing: 0.01em;
}
.dash-expiry-banner__cta:hover {
  background: linear-gradient(135deg, rgba(245,158,11,0.35), rgba(249,115,22,0.3));
  color: #fff; border-color: rgba(245,158,11,0.65); transform: translateY(-1px);
}
.dash-expiry-banner__close {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; background: none; border: none; border-radius: 7px;
  color: var(--gaming-text-dim); cursor: pointer; transition: all 0.15s;
  flex-shrink: 0; padding: 0;
}
.dash-expiry-banner__close:hover { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.75); }

/* Hero detection badge */
.hero__detect-badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.4rem 0.85rem; border-radius: 99px; margin-bottom: 0.75rem;
  background: rgba(16,217,160,0.08); border: 1px solid rgba(16,217,160,0.25);
  font-size: 0.78rem; color: rgba(255,255,255,0.7);
}
.hero__detect-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: #10d9a0; animation: detect-pulse 1.8s ease-in-out infinite;
  box-shadow: 0 0 6px rgba(16,217,160,0.6);
}
@keyframes detect-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.85); }
}
.hero__detect-num { font-size: 1.1rem; font-weight: 900; color: #10d9a0; font-family: var(--display); }
.hero__detect-label { font-size: 0.72rem; color: rgba(255,255,255,0.5); }

/* Activity ticker */
.hero__ticker {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.75rem; color: var(--gaming-text-dim); margin-bottom: 0.5rem;
}
.hero__ticker-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gaming-accent); flex-shrink: 0;
  animation: detect-pulse 1.5s ease-in-out infinite;
}

/* в”Ђв”Ђ prefers-reduced-motion в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .hero__bg { animation: none !important; }
  .hero__detect-dot, .hero__ticker-dot { animation: none !important; opacity: 1; }
  .dash-expiry-banner { animation: none !important; }
  .pgrid-card:hover, .product-card:hover { transform: none !important; box-shadow: none !important; }
}

/* в”Ђв”Ђ pgrid-card: duration toggle в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.pgrid-card__dur-toggle {
  display: flex;
  gap: 4px;
  margin-bottom: 0.35rem;
}
.pgrid-card__dur-btn {
  flex: 1;
  padding: 3px 0;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  background: transparent;
  color: rgba(255,255,255,0.6);
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}
.pgrid-card__dur-btn:hover {
  border-color: rgba(255,255,255,0.3);
  color: rgba(255,255,255,0.75);
}
.pgrid-card__dur-btn.active {
  border-color: rgba(var(--art-rgb, 167,139,250), 0.5);
  background: rgba(var(--art-rgb, 167,139,250), 0.12);
  color: #fff;
}

/* в”Ђв”Ђ pgrid-card: compare icon button в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.pgrid-card__compare {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--gaming-text-dim);
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
  padding: 0;
  font-family: inherit;
  text-decoration: none;
}
.pgrid-card__compare:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.22);
  color: rgba(255,255,255,0.8);
}
.pgrid-card__compare.is-active {
  background: rgba(var(--gaming-accent-rgb, 117,72,210), 0.12);
  border-color: rgba(var(--gaming-accent-rgb, 117,72,210), 0.35);
  color: var(--gaming-accent);
}
.pgrid-card__compare svg { width: 14px; height: 14px; flex-shrink: 0; }
/* Tooltip */
.pgrid-card__compare::after {
  content: attr(title);
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: rgba(8,7,20,0.95);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 7px;
  padding: 5px 10px;
  font-size: 0.67rem;
  font-weight: 600;
  color: rgba(255,255,255,0.88);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s, transform 0.15s;
  z-index: 10;
  font-family: var(--body);
}
.pgrid-card__compare:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* в”Ђв”Ђ pgrid-card: actions row в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.pgrid-card__actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}
.pgrid-card__cta {
  height: 32px;
  padding: 0 0.85rem;
  font-size: 0.75rem;
  white-space: nowrap;
}

/* в”Ђв”Ђ product_detail buybox: crypto + loyalty rows в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.dbb__crypto-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.45rem 0.65rem;
  background: rgba(249,115,22,0.06);
  border: 1px solid rgba(249,115,22,0.18);
  border-radius: 8px;
  margin-bottom: 0.4rem;
}
.dbb__crypto-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.65);
}
.dbb__crypto-rate { color: #f97316; font-weight: 700; }
.dbb__crypto-val  { font-size: 0.78rem; font-weight: 700; color: #f97316; }

.dbb__loyalty-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.45rem 0.65rem;
  background: rgba(245,158,11,0.06);
  border: 1px solid rgba(245,158,11,0.18);
  border-radius: 8px;
  margin-bottom: 0.4rem;
}
.dbb__loyalty-row--hidden { display: none; }
.dbb__loyalty-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.65);
}
.dbb__loyalty-rate { color: #f59e0b; font-weight: 700; }
.dbb__loyalty-val  { font-size: 0.78rem; font-weight: 700; color: #f59e0b; }

/* в”Ђв”Ђ loyalty-card (dashboard) в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.loyalty-card {
  background: linear-gradient(135deg, rgba(245,158,11,0.08) 0%, rgba(249,115,22,0.04) 100%);
  border: 1px solid rgba(245,158,11,0.2);
  border-radius: 18px;
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.5rem;
  position: relative;
  overflow: hidden;
}
.loyalty-card__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.loyalty-card__icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(245,158,11,0.12);
  border: 1px solid rgba(245,158,11,0.25);
  flex-shrink: 0;
}
.loyalty-card__tier { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #f59e0b; }
.loyalty-card__rate { font-family: var(--display); font-size: 1.6rem; font-weight: 900; color: #f59e0b; line-height: 1; }
.loyalty-card__sub  { font-size: 0.72rem; color: var(--gaming-text-dim); margin-top: 0.15rem; }
.loyalty-card__progress-label { display: flex; justify-content: space-between; font-size: 0.7rem; color: var(--gaming-text-dim); margin-bottom: 0.4rem; }
.loyalty-card__bar  { height: 4px; background: rgba(255,255,255,0.08); border-radius: 4px; overflow: hidden; margin-bottom: 0.5rem; }
.loyalty-card__bar-fill { height: 100%; background: linear-gradient(90deg, #f59e0b, #f97316); border-radius: 4px; transition: width 0.6s ease; }
.loyalty-card__hint { font-size: 0.75rem; color: var(--gaming-text-dim); margin-bottom: 1.25rem; }
.loyalty-card__hint strong { color: rgba(255,255,255,0.8); }
.loyalty-card__stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 0.65rem; }
.loyalty-card__stat { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 0.65rem 0.75rem; }
.loyalty-card__stat-val { font-family: var(--display); font-size: 0.95rem; font-weight: 800; color: #fff; }
.loyalty-card__stat-key { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--gaming-text-dim); margin-top: 0.2rem; }
.loyalty-card__tiers { display: flex; justify-content: space-between; gap: 0.5rem; margin-top: 1.1rem; }
.loyalty-card__tier-node { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.3rem; opacity: 0.4; transition: opacity 0.2s; }
.loyalty-card__tier-node.active { opacity: 1; }
.loyalty-card__tier-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); }
.loyalty-card__tier-node.active .loyalty-card__tier-icon { background: rgba(245,158,11,0.15); border-color: rgba(245,158,11,0.35); }
.loyalty-card__tier-name { font-size: 0.62rem; font-weight: 700; color: rgba(255,255,255,0.5); }
.loyalty-card__tier-node.active .loyalty-card__tier-name { color: #f59e0b; }
.loyalty-card__tier-pct  { font-size: 0.7rem; font-weight: 800; color: var(--gaming-text-dim); }
.loyalty-card__tier-node.active .loyalty-card__tier-pct  { color: #f59e0b; }
.loyalty-card__tier-req  { font-size: 0.58rem; color: var(--gaming-text-dim); }

/* в”Ђв”Ђ bundles: discount chips в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.bdl-disc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.75rem 0;
}
.bdl-disc-chip {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.25rem 0.65rem;
  border-radius: 20px;
  white-space: nowrap;
}
.bdl-disc-chip--loyalty {
  background: rgba(245,158,11,0.1);
  border: 1px solid rgba(245,158,11,0.25);
  color: #f59e0b;
}
.bdl-disc-chip--crypto {
  background: rgba(249,115,22,0.1);
  border: 1px solid rgba(249,115,22,0.25);
  color: #f97316;
}
.bdl-disc-chip--bundle {
  background: rgba(0,207,255,0.12);
  border: 1px solid rgba(0,207,255,0.3);
  color: var(--gaming-accent-light);
}

/* в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ
   RESTORED RULES — written from HTML analysis 2026-06-27
   Covers all rules missing after backup merge
   в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ */

/* в”Ђв”Ђ Checkout: countdown в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.co2-countdown {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.78rem; color: rgba(255,255,255,0.5);
  background: rgba(245,158,11,0.06); border: 1px solid rgba(245,158,11,0.18);
  border-radius: 8px; padding: 0.5rem 0.75rem; margin-bottom: 0.75rem;
}
.co2-countdown svg { width: 14px; height: 14px; flex-shrink: 0; color: #f59e0b; }
.co2-countdown strong { color: #f59e0b; font-weight: 700; font-variant-numeric: tabular-nums; }
.co2-countdown--expired { color: rgba(255,255,255,0.6); border-color: rgba(255,255,255,0.08); background: rgba(255,255,255,0.02); }
.co2-countdown--expired strong { color: rgba(255,255,255,0.6); }
.co2-countdown--expired svg  { color: var(--gaming-text-dim); }

/* в”Ђв”Ђ Checkout: order summary rows в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.co2-sum-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.82rem; padding: 0.3rem 0; }
.co2-sum-row .k { color: rgba(255,255,255,0.55); }
.co2-sum-row .v { font-weight: 600; }
.co2-sum-total { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 0.65rem; margin-top: 0.3rem; }
.co2-sum-total .k { font-weight: 700; color: rgba(255,255,255,0.8); font-size: 0.85rem; }
.co2-sum-total .v { font-family: var(--display); font-size: 1.3rem; font-weight: 900; color: #fff; }

.co2-sum-crypto { }
.co2-sum-crypto--hidden { display: none; }
.co2-sum-crypto__badge {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.65rem; font-weight: 700;
  background: rgba(249,115,22,0.12); border: 1px solid rgba(249,115,22,0.25);
  color: #f97316; border-radius: 4px; padding: 1px 6px;
}
.co2-sum-crypto__label { display: flex; align-items: center; gap: 0.4rem; }
.co2-sum-crypto__val { color: #f97316; font-weight: 700; }

.co2-sum-loyalty { }
.co2-sum-loyalty--hidden { display: none; }
.co2-sum-loyalty__badge {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.65rem; font-weight: 700;
  background: rgba(245,158,11,0.12); border: 1px solid rgba(245,158,11,0.25);
  color: #f59e0b; border-radius: 4px; padding: 1px 6px;
}
.co2-sum-loyalty__label { display: flex; align-items: center; gap: 0.4rem; }
.co2-sum-loyalty__val { color: #f59e0b; font-weight: 700; }

.co2-sum-disc { }
.co2-sum-disc--hidden { display: none; }
.co2-sum-disc .v { color: rgba(16,217,160,0.9); }

/* в”Ђв”Ђ Checkout: delivery authed state в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.co2-delivery__authed-row {
  display: flex; align-items: center; gap: 0.75rem;
  background: rgba(16,217,160,0.05); border: 1px solid rgba(16,217,160,0.18);
  border-radius: 10px; padding: 0.75rem 1rem;
}
.co2-delivery__authed-icon {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 8px;
  background: rgba(16,217,160,0.1); border: 1px solid rgba(16,217,160,0.2);
  color: #10d9a0; flex-shrink: 0;
}
.co2-delivery__authed-info { display: flex; flex-direction: column; gap: 0.1rem; flex: 1; min-width: 0; }
.co2-delivery__authed-label { font-size: 0.68rem; color: rgba(255,255,255,0.6); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }
.co2-delivery__authed-email { font-size: 0.9rem; color: #fff; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co2-delivery__authed-badge {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.62rem; font-weight: 700; color: #10d9a0;
  background: rgba(16,217,160,0.1); border: 1px solid rgba(16,217,160,0.25);
  border-radius: 20px; padding: 0.2rem 0.55rem; white-space: nowrap; flex-shrink: 0;
}
.co2-delivery__authed-note { font-size: 0.72rem; color: var(--gaming-text-dim); margin-top: 0.55rem; line-height: 1.5; }

/* в”Ђв”Ђ Bundles: preset buttons в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.bdl-presets { margin-bottom: 1.5rem; }
.bdl-presets__label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gaming-text-dim); margin-bottom: 0.65rem; }
.bdl-presets__grid { display: flex; gap: 0.65rem; flex-wrap: wrap; }
.bdl-preset-btn {
  display: flex; flex-direction: column; gap: 2px;
  padding: 0.65rem 0.9rem; background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1); border-radius: 10px;
  cursor: pointer; transition: all 0.18s; text-align: left;
  font-family: inherit; color: inherit; flex: 1; min-width: 180px;
}
.bdl-preset-btn:hover { border-color: rgba(var(--gaming-accent-rgb,117,72,210),0.4); background: rgba(var(--gaming-accent-rgb,117,72,210),0.06); }
.bdl-preset-btn__name { font-size: 0.82rem; font-weight: 700; color: #fff; }
.bdl-preset-btn__items { font-size: 0.68rem; color: rgba(255,255,255,0.6); }
.bdl-preset-btn__dur { font-size: 0.65rem; font-weight: 600; color: var(--gaming-success); margin-top: 2px; }

/* в”Ђв”Ђ Bundles: card components в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.bdl-card__art--icon { display: flex; align-items: center; justify-content: center; }
.bdl-crypto-label { font-size: 0.72rem; color: var(--gaming-text-dim); display: flex; align-items: center; gap: 0.35rem; }
.bdl-crypto-price { font-size: 0.82rem; font-weight: 700; color: #f97316; }
.bdl-dur-warning {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
  font-size: 0.65rem;
  line-height: 1.2;
  color: rgba(245,158,11,0.85);
  background: rgba(245,158,11,0.08);
  border: 1px solid rgba(245,158,11,0.22);
  border-radius: 5px;
  padding: 0.28rem 0.5rem;
  margin: 0.4rem auto 0;
}
.bdl-dur-warning[hidden] { display: none !important; }
.bdl-dur-warning > svg {
  width: 11px !important;
  height: 11px !important;
  max-width: 11px !important;
  max-height: 11px !important;
  flex: 0 0 11px;
  display: block;
  margin: 0;
  padding: 0;
}
#bdl-dur-warning-text {
  display: inline;
  margin: 0;
  padding: 0;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}
.bdl-loyalty-tier-badge { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.65rem; font-weight: 700; padding: 2px 8px; border-radius: 20px; background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.25); color: #f59e0b; }
.bdl-tier__min { font-size: 0.65rem; color: var(--gaming-text-dim); }
/* crypto row — the HTML uses bdl-crypto-label / bdl-crypto-price */
.bdl-totals__row--crypto { color: rgba(255,255,255,0.65); }
.bdl-totals__row--crypto .bdl-totals__val,
.bdl-crypto-price { color: #f97316; font-weight: 700; }
.bdl-crypto-label {
  display: flex; align-items: center; gap: 0.35rem;
  font-size: 0.8rem; color: rgba(255,255,255,0.55);
}
.bdl-crypto-label svg { color: #f97316; flex-shrink: 0; }
/* loyalty row */
.bdl-totals__row--loyalty .bdl-totals__val { color: #f59e0b; }
.cc-amount__orig { text-decoration: line-through; color: var(--gaming-text-dim); font-size: 0.85rem; }
.cc-amount__save { color: rgba(16,217,160,0.9); font-size: 0.72rem; font-weight: 700; }

/* в”Ђв”Ђ Topup: method buttons + crypto bonus в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.topup-method-btn__icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.06); flex-shrink: 0; }
.topup-method-btn__label { font-size: 0.85rem; font-weight: 700; color: #fff; }
.topup-method-btn__sub { font-size: 0.68rem; color: rgba(255,255,255,0.6); }
.topup-crypto-bonus {
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(16,217,160,0.06); border: 1px solid rgba(16,217,160,0.2);
  border-radius: 8px; padding: 0.55rem 0.75rem; margin-top: 0.5rem;
  font-size: 0.78rem; color: rgba(255,255,255,0.6);
}
.topup-crypto-bonus__val { font-weight: 700; color: #10d9a0; }

/* в”Ђв”Ђ Dashboard: order modal в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.order-modal {
  position: fixed; inset: 0; z-index: 900;
  display: flex; align-items: center; justify-content: center;
}
.order-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(6,9,18,0.75);
  backdrop-filter: blur(4px);
}
.order-modal__panel {
  position: relative; z-index: 1;
  background: var(--gaming-bg-light, #0a0d17);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 18px;
  width: min(92vw, 860px);
  max-height: 85vh;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.order-modal__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
}
.order-modal__title { font-family: var(--display); font-size: 1rem; font-weight: 800; color: #fff; margin: 0; }
.order-modal__close {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 8px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.5); cursor: pointer; transition: all 0.15s;
}
.order-modal__close:hover { background: rgba(255,255,255,0.1); color: #fff; }
.order-modal__filters {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  padding: 0.75rem 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}
.order-modal__body {
  flex: 1; overflow-y: auto;
  padding: 0 1.5rem 1rem;
}
.order-modal--open { display: flex; }
.order-modal { display: none; }
.order-modal--open { display: flex; }

/* order table inside modal */
.order-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; margin-top: 0.75rem; }
.order-table th { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--gaming-text-dim); padding: 0.5rem 0.75rem; text-align: left; border-bottom: 1px solid rgba(255,255,255,0.07); }
.order-table td { padding: 0.65rem 0.75rem; border-bottom: 1px solid rgba(255,255,255,0.05); color: rgba(255,255,255,0.75); vertical-align: middle; }
.order-table tr:last-child td { border-bottom: none; }
.order-product { font-weight: 600; color: #fff; }
.order-price { font-family: var(--display); font-weight: 700; color: #fff; }
.order-status { display: inline-flex; align-items: center; font-size: 0.65rem; font-weight: 700; padding: 2px 8px; border-radius: 20px; }
.order-status--completed { background: rgba(34,197,94,0.1); color: rgba(34,197,94,0.9); }
.order-status--refunded  { background: rgba(239,68,68,0.1);  color: rgba(239,68,68,0.8);  }
.order-status--pending   { background: rgba(251,191,36,0.1); color: rgba(251,191,36,0.9); }
.order-dl-btn { font-size: 0.7rem; font-weight: 600; padding: 3px 10px; border-radius: 6px; background: rgba(0,207,255,0.12); border: 1px solid rgba(0,207,255,0.25); color: var(--gaming-accent-light); cursor: pointer; transition: all 0.15s; }
.order-dl-btn:hover { background: rgba(0,207,255,0.22); }

/* order-modal filter/pagination controls */
.order-modal__filter-select, .order-modal__search {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px; padding: 0.4rem 0.75rem; color: #fff;
  font-family: var(--body); font-size: 0.78rem;
}
.order-modal__filter-select:focus, .order-modal__search:focus { outline: none; border-color: rgba(0,207,255,0.4); }
.order-modal__pag {
  display: flex; align-items: center; justify-content: center; gap: 0.4rem;
  padding: 0.85rem 0 0.25rem;
}
.order-modal__pag-btn {
  min-width: 30px; height: 30px; border-radius: 7px; border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.5);
  font-size: 0.75rem; cursor: pointer; transition: all 0.15s;
}
.order-modal__pag-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }
.order-modal__pag-btn.active { background: rgba(0,207,255,0.2); border-color: rgba(0,207,255,0.4); color: var(--gaming-accent-light); font-weight: 700; }

/* dash orders section */
.dash-orders--modal .dash-orders__foot { display: flex; align-items: center; justify-content: space-between; padding-top: 0.75rem; }
.dash-orders__foot { display: flex; align-items: center; justify-content: space-between; padding-top: 0.75rem; }
.dash-orders__showing { font-size: 0.75rem; color: rgba(255,255,255,0.6); }
.dash-orders__viewall {
  font-size: 0.75rem; font-weight: 700; color: var(--gaming-accent-light);
  background: rgba(0,207,255,0.1); border: 1px solid rgba(0,207,255,0.25);
  border-radius: 7px; padding: 0.35rem 0.85rem; cursor: pointer; transition: all 0.15s;
}
.dash-orders__viewall:hover { background: rgba(0,207,255,0.2); }

/* в”Ђв”Ђ Dashboard: transaction modal в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.txn-modal {
  position: fixed; inset: 0; z-index: 900;
  display: none; align-items: flex-end; justify-content: center;
}
.txn-modal--open { display: flex; }
.txn-modal__backdrop { position: absolute; inset: 0; background: rgba(6,9,18,0.7); backdrop-filter: blur(4px); }
.txn-modal__panel {
  position: relative; z-index: 1; width: 100%; max-width: 560px;
  background: var(--gaming-bg-light, #0c0f1a);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 18px 18px 0 0;
  max-height: 80vh; display: flex; flex-direction: column; overflow: hidden;
}
.txn-modal__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
}
.txn-modal__title { font-family: var(--display); font-size: 0.95rem; font-weight: 800; color: #fff; margin: 0; }
.txn-modal__close {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 7px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  color: var(--gaming-text-dim); cursor: pointer; transition: all 0.15s;
}
.txn-modal__close:hover { background: rgba(255,255,255,0.1); color: #fff; }
.txn-modal__filters {
  display: flex; gap: 0.4rem; flex-wrap: wrap; padding: 0.65rem 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,0.06); flex-shrink: 0;
}
.txn-modal__body { flex: 1; overflow-y: auto; padding: 0.5rem 1.25rem 1rem; }
.txn-modal__pag { display: flex; align-items: center; justify-content: center; gap: 0.35rem; padding: 0.75rem 0 0.25rem; }
.txn-modal__pag-btn {
  min-width: 28px; height: 28px; border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.04);
  color: var(--gaming-text-dim); font-size: 0.72rem; cursor: pointer; transition: all 0.15s;
}
.txn-modal__pag-btn:hover { background: rgba(255,255,255,0.09); color: #fff; }
.txn-modal__pag-btn.active { background: rgba(0,207,255,0.18); border-color: rgba(0,207,255,0.35); color: var(--gaming-accent-light); font-weight: 700; }

/* в”Ђв”Ђ Referral: view-all modal в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.ref-all-modal {
  position: fixed; inset: 0; z-index: 900;
  display: none; align-items: center; justify-content: center;
}
.ref-all-modal--open { display: flex; }
.ref-all-modal__backdrop { position: absolute; inset: 0; background: rgba(6,9,18,0.75); backdrop-filter: blur(4px); }
.ref-all-modal__panel {
  position: relative; z-index: 1;
  background: var(--gaming-bg-light, #0a0d17);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 18px; width: min(96vw, 1100px);
  max-height: 85vh; display: flex; flex-direction: column; overflow: hidden;
}
.ref-all-modal__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.07); flex-shrink: 0;
}
.ref-all-modal__title { font-family: var(--display); font-size: 0.95rem; font-weight: 800; color: #fff; margin: 0; }
.ref-all-modal__close {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 7px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  color: var(--gaming-text-dim); cursor: pointer; transition: all 0.15s;
}
.ref-all-modal__close:hover { background: rgba(255,255,255,0.1); color: #fff; }
.ref-all-modal__controls {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  padding: 0.65rem 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.06); flex-shrink: 0;
}
.ref-all-modal__search {
  flex: 1; min-width: 160px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px; padding: 0.4rem 0.75rem; color: #fff;
  font-family: var(--body); font-size: 0.78rem;
}
.ref-all-modal__search:focus { outline: none; border-color: rgba(0,207,255,0.4); }
.ref-all-modal__filter-select {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px; padding: 0.4rem 0.65rem; color: #fff;
  font-family: var(--body); font-size: 0.78rem;
}
.ref-all-modal__body { flex: 1; overflow-y: auto; padding: 0.75rem 1.5rem; }
.ref-all-modal__empty { text-align: center; padding: 2rem; color: var(--gaming-text-dim); font-size: 0.82rem; }
.ref-all-modal__pag { display: flex; align-items: center; justify-content: center; gap: 0.35rem; padding: 0.75rem 0 0.25rem; }
.ref-all-modal__pag-btn {
  min-width: 30px; height: 30px; border-radius: 7px;
  border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.5); font-size: 0.75rem; cursor: pointer; transition: all 0.15s;
}
.ref-all-modal__pag-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }
.ref-all-modal__pag-btn.active { background: rgba(0,207,255,0.2); border-color: rgba(0,207,255,0.4); color: var(--gaming-accent-light); font-weight: 700; }

.ref-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.ref-table th { font-size: 0.63rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--gaming-text-dim); padding: 0.4rem 0.5rem; text-align: left; border-bottom: 1px solid rgba(255,255,255,0.07); }
.ref-table td { padding: 0.55rem 0.5rem; border-bottom: 1px solid rgba(255,255,255,0.05); color: rgba(255,255,255,0.7); vertical-align: middle; }
.ref-table tr:last-child td { border-bottom: none; }
.ref-table__status { display: inline-flex; align-items: center; font-size: 0.62rem; font-weight: 700; padding: 2px 7px; border-radius: 20px; }
.ref-table__status--paid     { background: rgba(34,197,94,0.1);  color: rgba(34,197,94,0.9);  }
.ref-table__status--pending  { background: rgba(251,191,36,0.1); color: rgba(251,191,36,0.9); }
.ref-table__status--rejected { background: rgba(239,68,68,0.1);  color: rgba(239,68,68,0.8);  }
.ref-viewall-btn {
  font-size: 0.75rem; font-weight: 700; cursor: pointer; transition: all 0.15s;
  background: rgba(0,207,255,0.1); border: 1px solid rgba(0,207,255,0.25);
  color: var(--gaming-accent-light); border-radius: 8px; padding: 0.4rem 0.9rem;
}
.ref-viewall-btn:hover { background: rgba(0,207,255,0.2); }
.ref-balance__payout-link {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.75rem; font-weight: 600; color: var(--gaming-accent-light);
  text-decoration: none; padding: 0.3rem 0.75rem;
  background: rgba(0,207,255,0.1); border: 1px solid rgba(0,207,255,0.25);
  border-radius: 7px; transition: all 0.15s; margin-top: 0.5rem;
}
.ref-balance__payout-link:hover { background: rgba(0,207,255,0.2); }

/* в”Ђв”Ђ Referral: custom datepicker в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.ref-datepicker { position: relative; display: inline-block; }
.ref-datepicker__popup {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 50;
  background: var(--gaming-bg-light, #0c0f1a);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px; padding: 1rem; min-width: 280px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.5);
}
.ref-datepicker__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; }
.ref-datepicker__month { font-size: 0.82rem; font-weight: 700; color: #fff; }
.ref-datepicker__nav { background: none; border: none; color: rgba(255,255,255,0.6); cursor: pointer; padding: 4px 8px; border-radius: 6px; transition: all 0.15s; }
.ref-datepicker__nav:hover { color: #fff; background: rgba(255,255,255,0.07); }
.ref-datepicker__weekdays { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; margin-bottom: 4px; }
.ref-datepicker__weekday { text-align: center; font-size: 0.6rem; font-weight: 700; text-transform: uppercase; color: var(--gaming-text-dim); padding: 4px 0; }
.ref-datepicker__days { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; }
.ref-datepicker__day {
  display: flex; align-items: center; justify-content: center;
  height: 30px; border-radius: 6px;
  font-size: 0.75rem; color: rgba(255,255,255,0.65);
  cursor: pointer; transition: all 0.12s; border: none; background: none;
  font-family: inherit;
}
.ref-datepicker__day:hover { background: rgba(255,255,255,0.07); color: #fff; }
.ref-datepicker__day--other { color: rgba(255,255,255,0.35); }
.ref-datepicker__day--selected {
  background: rgba(0,207,255,0.25); border: 1px solid rgba(0,207,255,0.5);
  color: var(--gaming-accent-light); font-weight: 700;
}
.ref-datepicker__day--in-range { background: rgba(0,207,255,0.1); border-radius: 0; }
.ref-datepicker__day--today { border: 1px solid rgba(255,255,255,0.2); }
.ref-datepicker__actions { display: flex; gap: 0.5rem; margin-top: 0.75rem; }
.ref-datepicker__apply, .ref-datepicker__clear {
  flex: 1; padding: 0.4rem; border-radius: 8px; font-size: 0.75rem;
  font-weight: 700; cursor: pointer; transition: all 0.15s; font-family: inherit;
}
.ref-datepicker__apply { background: rgba(0,207,255,0.2); border: 1px solid rgba(0,207,255,0.4); color: var(--gaming-accent-light); }
.ref-datepicker__apply:hover { background: rgba(0,207,255,0.35); }
.ref-datepicker__clear { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.5); }
.ref-datepicker__clear:hover { background: rgba(255,255,255,0.08); color: #fff; }

/* в”Ђв”Ђ Product detail: layout в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.detail-content { flex: 1; min-width: 0; }
.detail-hero__info { display: flex; flex-direction: column; gap: 0.5rem; }
.detail-step__body { display: flex; flex-direction: column; gap: 0.35rem; }

/* в”Ђв”Ђ Loyalty card: complete sub-elements в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.loyalty-card__badge {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.62rem; font-weight: 700; padding: 2px 8px; border-radius: 20px;
  background: rgba(245,158,11,0.12); border: 1px solid rgba(245,158,11,0.25); color: #f59e0b;
}
.loyalty-card__content { flex: 1; }
.loyalty-card__headline { display: flex; align-items: baseline; gap: 0.35rem; }
.loyalty-card__headline-desc { font-size: 0.72rem; color: var(--gaming-text-dim); }

/* в”Ђв”Ђ Auth label в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.auth-label { font-size: 0.72rem; font-weight: 600; color: var(--gaming-text-dim); letter-spacing: 0.04em; margin-bottom: 0.35rem; display: block; }

/* в”Ђв”Ђ Loyalty card: tier icon SVG size constraint (fixes huge icon) в”Ђв”Ђ */
.loyalty-card__tier-icon svg { width: 18px; height: 18px; flex-shrink: 0; }

/* в”Ђв”Ђ Dashboard: transaction list + items в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.dash-txns__list { display: flex; flex-direction: column; gap: 0; }
.dash-txn-item {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.dash-txn-item:last-child { border-bottom: none; }
.dash-txn__icon {
  width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
}
.dash-txn__icon svg { width: 14px; height: 14px; }
.dash-txn__info { flex: 1; min-width: 0; }
.dash-txn__label { font-size: 0.82rem; font-weight: 600; color: rgba(255,255,255,0.88); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-txn__date  { font-size: 0.68rem; color: var(--gaming-text-dim); margin-top: 1px; }
.dash-txn__amount { font-family: var(--display); font-size: 0.9rem; font-weight: 800; white-space: nowrap; }
.dash-txn__amount--in  { color: rgba(16,217,160,0.9); }
.dash-txn__amount--out { color: rgba(255,255,255,0.7); }
.dash-txn__type {
  font-size: 0.6rem; font-weight: 700; padding: 2px 7px; border-radius: 20px;
  text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap;
}
.dash-txn__type--topup    { background: rgba(16,217,160,0.1);  color: #10d9a0; }
.dash-txn__type--purchase { background: rgba(0,207,255,0.12); color: var(--gaming-accent-light); }
.dash-txn__type--referral { background: rgba(245,158,11,0.1);  color: #f59e0b; }
.dash-txn__type--refund   { background: rgba(239,68,68,0.1);   color: rgba(239,68,68,0.85); }

/* в”Ђв”Ђ Topup modal: method section + active state в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.topup-modal__method { margin: 1rem 0 0.5rem; }
.topup-method-label  { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gaming-text-dim); margin-bottom: 0.5rem; }
.topup-method-btns   { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.topup-method-btn {
  display: flex; align-items: center; gap: 0.65rem;
  padding: 0.75rem 0.9rem; border-radius: 10px;
  background: rgba(255,255,255,0.04); border: 1.5px solid rgba(255,255,255,0.1);
  cursor: pointer; transition: all 0.18s; text-align: left; font-family: inherit;
  color: inherit;
}
.topup-method-btn:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.2); }
.topup-method-btn--active {
  background: rgba(0,207,255,0.12);
  border-color: rgba(0,207,255,0.5);
  box-shadow: 0 0 0 2px rgba(0,207,255,0.12);
}
.topup-method-btn__icon {
  width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.06);
}
.topup-method-btn__icon svg { width: 16px; height: 16px; }
.topup-method-btn__label { font-size: 0.82rem; font-weight: 700; color: #fff; display: block; }
.topup-method-btn__sub   { font-size: 0.65rem; color: rgba(255,255,255,0.6); display: block; }

/* в”Ђв”Ђ Loyalty card: roadmap (tier progression row) в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
/* в”Ђв”Ђ Loyalty card roadmap: clean icon-centred progress strip в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.loyalty-card__roadmap {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0;
  margin-top: 1.25rem;
  position: relative;
}
/* Connecting line runs through the vertical centre of the icon boxes */
.loyalty-card__roadmap::before {
  content: '';
  position: absolute;
  top: 16px;          /* half of 32px icon height */
  left: calc(12.5% - 1px);
  right: calc(12.5% - 1px);
  height: 1px;
  background: rgba(255,255,255,0.08);
  z-index: 0;
}
/* "Done" segment overlay — amber fill over the base line */
.loyalty-card__roadmap::after {
  content: '';
  position: absolute;
  top: 16px;
  left: calc(12.5% - 1px);
  width: 0%;           /* JS sets via inline style if needed; fallback 0 */
  height: 1px;
  background: #f59e0b;
  z-index: 0;
  transition: width 0.6s ease;
}
/* в”Ђв”Ђ Road item в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.loyalty-card__road-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  flex: 1;
  opacity: 0.35;
  transition: opacity 0.2s;
  position: relative;
  z-index: 1;
}
.loyalty-card__road-item--done   { opacity: 0.65; }
.loyalty-card__road-item--active { opacity: 1; }

/* Hide the separate dot — visual indication comes from the icon */
.loyalty-card__road-dot { display: none; }

.loyalty-card__road-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
}

/* в”Ђв”Ђ Icon box в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.loyalty-card__road-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: rgba(255,255,255,0.05);
  border: 1.5px solid rgba(255,255,255,0.1);
  flex-shrink: 0;
  overflow: hidden;
  transition: all 0.2s;
}
.loyalty-card__road-icon svg {
  width: 16px !important;
  height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
  flex-shrink: 0;
}
.loyalty-card__road-item--done .loyalty-card__road-icon {
  background: rgba(245,158,11,0.08);
  border-color: rgba(245,158,11,0.25);
  color: #f59e0b;
}
.loyalty-card__road-item--active .loyalty-card__road-icon {
  background: rgba(245,158,11,0.15);
  border-color: rgba(245,158,11,0.5);
  color: #f59e0b;
  box-shadow: 0 0 12px rgba(245,158,11,0.25);
}

/* в”Ђв”Ђ Labels в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.loyalty-card__road-name {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--gaming-text-dim);
  text-align: center;
  margin-top: 0.1rem;
}
.loyalty-card__road-item--active .loyalty-card__road-name  { color: #f59e0b; }
.loyalty-card__road-item--done   .loyalty-card__road-name  { color: rgba(255,255,255,0.6); }
.loyalty-card__road-rate {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--gaming-text-dim);
  line-height: 1;
}
.loyalty-card__road-item--active .loyalty-card__road-rate  { color: #f59e0b; }
.loyalty-card__road-item--done   .loyalty-card__road-rate  { color: rgba(255,255,255,0.5); }
.loyalty-card__road-req {
  font-size: 0.58rem;
  color: var(--gaming-text-dim);
}

/* Also fix the badge icon (top-left of loyalty card) */
.loyalty-card__tier-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 10px;
  background: rgba(245,158,11,0.12);
  border: 1px solid rgba(245,158,11,0.25);
  flex-shrink: 0;
  overflow: hidden;
}
.loyalty-card__tier-icon svg {
  width: 20px !important;
  height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
}

/* в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ
   FINAL CSS RECOVERY PATCH — based on HTML→CSS diff
   в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ */

/* в”Ђв”Ђ Loyalty card: progress bar + headline elements в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.loyalty-card__progress-wrap { margin-bottom: 0.75rem; }
.loyalty-card__progress-meta {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 0.7rem; color: rgba(255,255,255,0.6); margin-bottom: 0.35rem;
}
.loyalty-card__progress-label { font-weight: 600; }
.loyalty-card__progress-goal  { font-weight: 700; color: rgba(255,255,255,0.6); }
.loyalty-card__progress-track {
  height: 4px; background: rgba(255,255,255,0.08);
  border-radius: 4px; overflow: hidden;
}
.loyalty-card__progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #f59e0b, #f97316);
  border-radius: 4px;
  transition: width 0.6s ease;
}
.loyalty-card__progress-hint { font-size: 0.72rem; color: rgba(255,255,255,0.6); margin-top: 0.35rem; }
.loyalty-card__progress-hint strong { color: rgba(255,255,255,0.8); }
.loyalty-card__headline-rate {
  font-family: var(--display); font-size: 2rem; font-weight: 900;
  color: #f59e0b; line-height: 1;
}
.loyalty-card__stat-val--saved { color: rgba(16,217,160,0.9); }
.loyalty-card__stat-val--rate  { color: #f59e0b; }

/* в”Ђв”Ђ Changelog entry: badges and sub-elements в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.chlog-entry__badge {
  font-size: 0.58rem; font-weight: 800; padding: 0.15rem 0.5rem;
  border-radius: 4px; text-transform: uppercase; letter-spacing: 0.06em;
}
.chlog-entry__badge--update  { background: rgba(0,207,255,0.15); border: 1px solid rgba(0,207,255,0.3); color: #a78bfa; }
.chlog-entry__badge--hotfix  { background: rgba(239,68,68,0.12);  border: 1px solid rgba(239,68,68,0.3);  color: #f87171; }
.chlog-entry__badge--new     { background: rgba(16,217,160,0.1);  border: 1px solid rgba(16,217,160,0.25); color: #10d9a0; }
.chlog-entry__badge--fix     { background: rgba(245,158,11,0.1);  border: 1px solid rgba(245,158,11,0.25); color: #fbbf24; }
.chlog-entry__body { flex: 1; min-width: 0; }
.chlog-entry__meta { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.4rem; }
.chlog-entry__product { font-size: 0.85rem; font-weight: 700; color: rgba(255,255,255,0.9); }
.chlog-entry__version { font-size: 0.65rem; font-weight: 600; color: var(--gaming-text-dim); font-family: var(--mono); }
.chlog-entry__desc { font-size: 0.78rem; color: var(--gaming-text-dim); line-height: 1.6; margin: 0; }
.chlog-entry__date { display: flex; flex-direction: column; align-items: center; padding-top: 0.1rem; }
.chlog-entry__day   { font-family: var(--display); font-size: 1.3rem; font-weight: 800; color: #fff; line-height: 1; }
.chlog-entry__month { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gaming-text-dim); margin-top: 2px; }
.chlog-entry__status { padding-top: 0.2rem; }

/* в”Ђв”Ђ Order modal: filter pills + foot в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.order-modal__filter-pill {
  font-size: 0.72rem; font-weight: 600; padding: 0.3rem 0.75rem;
  border-radius: 20px; border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.5);
  cursor: pointer; transition: all 0.15s; font-family: inherit;
}
.order-modal__filter-pill:hover { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.8); }
.order-modal__filter-pill--active {
  background: rgba(0,207,255,0.15); border-color: rgba(0,207,255,0.4);
  color: var(--gaming-accent-light);
}
.order-modal__foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; padding: 0.75rem 1.5rem; border-top: 1px solid rgba(255,255,255,0.07); flex-shrink: 0; }
.order-modal__controls { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.order-modal__empty { text-align: center; padding: 2.5rem 1rem; color: var(--gaming-text-dim); font-size: 0.82rem; }

/* в”Ђв”Ђ Txn modal: filter pills + foot в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.txn-modal__filter-pill {
  font-size: 0.7rem; font-weight: 600; padding: 0.25rem 0.65rem;
  border-radius: 20px; border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04); color: var(--gaming-text-dim);
  cursor: pointer; transition: all 0.15s; font-family: inherit;
}
.txn-modal__filter-pill:hover { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.8); }
.txn-modal__filter-pill--active {
  background: rgba(0,207,255,0.15); border-color: rgba(0,207,255,0.4);
  color: var(--gaming-accent-light);
}
.txn-modal__foot { display: flex; align-items: center; justify-content: space-between; padding: 0.65rem 1.25rem; border-top: 1px solid rgba(255,255,255,0.07); flex-shrink: 0; }
.txn-modal__page-info { font-size: 0.72rem; color: var(--gaming-text-dim); }
.txn-modal__controls { display: flex; align-items: center; gap: 0.4rem; }

/* в”Ђв”Ђ Ref-all-modal: drawer sub-elements в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.ref-all-modal__drawer { display: flex; flex-direction: column; height: 100%; }
.ref-all-modal__drawer-head { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.5rem; border-bottom: 1px solid rgba(255,255,255,0.07); }
.ref-all-modal__drawer-avatar { width: 40px; height: 40px; border-radius: 50%; background: rgba(0,207,255,0.15); border: 1px solid rgba(0,207,255,0.3); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.9rem; color: var(--gaming-accent-light); flex-shrink: 0; }
.ref-all-modal__drawer-close { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 7px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: var(--gaming-text-dim); cursor: pointer; transition: all 0.15s; margin-left: auto; }
.ref-all-modal__drawer-close:hover { background: rgba(255,255,255,0.1); color: #fff; }
.ref-all-modal__drawer-meta { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.ref-all-modal__drawer-empty { text-align: center; padding: 2rem; color: var(--gaming-text-dim); font-size: 0.8rem; }

/* в”Ђв”Ђ pgrid empty state в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.pgrid-empty { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 5rem 1rem; text-align: center; }
.pgrid-empty__title { font-family: var(--display); font-size: 1.1rem; font-weight: 800; color: rgba(255,255,255,0.6); }
.pgrid-empty__sub { font-size: 0.82rem; color: var(--gaming-text-dim); }

/* в”Ђв”Ђ Ref datepicker: nav sub-elements в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.ref-datepicker__nav-btn {
  background: none; border: none; color: rgba(255,255,255,0.6);
  cursor: pointer; padding: 4px 8px; border-radius: 6px;
  transition: all 0.15s; font-size: 0.78rem;
}
.ref-datepicker__nav-btn:hover { color: #fff; background: rgba(255,255,255,0.07); }
.ref-datepicker__nav-month { font-size: 0.82rem; font-weight: 700; color: #fff; }

/* в”Ђв”Ђ Ref templates: grid container в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ*/
.ref-templates { margin: 1.25rem 0; }
.ref-templates__grid { display: flex; gap: 0.65rem; flex-wrap: wrap; }

/* в”Ђв”Ђ Badge: primary variant в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.badge-primary {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.62rem; font-weight: 800; padding: 3px 8px;
  border-radius: 20px; text-transform: uppercase; letter-spacing: 0.06em;
  background: rgba(0,207,255,0.15); border: 1px solid rgba(0,207,255,0.3);
  color: var(--gaming-accent-light);
}

/* в”Ђв”Ђ CTA fullbleed content в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.cta--fullbleed {
  position: relative;
  padding: clamp(80px,10vw,140px) 0;
  overflow: hidden;
  border-top: 1px solid var(--glass-border);
  border-bottom: 1px solid var(--glass-border);
}
/* Background photo layer — same image as the hero section */
.cta--fullbleed > .cta__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url('second-bg.webp');
  background-image: image-set(url('second-bg.webp') type('image/webp'), url('second-bg.jpg') type('image/jpeg'));
  background-size: cover;
  background-position: center 40%;
  background-repeat: no-repeat;
  opacity: 0.45;
}
/* Darkening overlay so text stays readable */
.cta--fullbleed > .cta__bg-glass {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to right, rgba(6,9,18,0.85) 0%, rgba(6,9,18,0.55) 50%, rgba(6,9,18,0.65) 100%),
    linear-gradient(to bottom, rgba(6,9,18,0.3) 0%, transparent 30%, transparent 70%, rgba(6,9,18,0.4) 100%);
}
/* Content sits above both bg layers */
.cta__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* в”Ђв”Ђ Checkout delivery: guest state в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.co2-delivery__guest { display: block; }

/* в”Ђв”Ђ Howto: last step в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.hwstep--last .hwstep__num { background: rgba(16,217,160,0.15); border-color: rgba(16,217,160,0.4); color: #10d9a0; }

/* в”Ђв”Ђ Lang switch mobile в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.lang-switch--mobile { display: flex; gap: 0.4rem; padding: 0.75rem 1.25rem; }

/* в”Ђв”Ђ Loyalty card: stat label + tier rate в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.loyalty-card__stat-label { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--gaming-text-dim); margin-top: 0.2rem; }
.loyalty-card__tier-rate  { font-size: 0.72rem; font-weight: 700; color: #f59e0b; }

/* в”Ђв”Ђ Order modal: pagination + subtitle + page-info в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.order-modal__subtitle { font-size: 0.78rem; color: rgba(255,255,255,0.6); margin: 0; }
.order-modal__page-info { font-size: 0.72rem; color: var(--gaming-text-dim); }
.order-modal__pagination { display: flex; align-items: center; gap: 0.35rem; }

/* в”Ђв”Ђ pgrid-card: chips container в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.pgrid-card__chips { display: flex; flex-wrap: wrap; gap: 0.2rem; min-height: 0; }

/* в”Ђв”Ђ Products page: hero text в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.ppage-hero__text { flex: 1; min-width: 0; }

/* в”Ђв”Ђ Ref-all-modal: drawer detail sections в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.ref-all-modal__drawer-name { font-size: 0.95rem; font-weight: 800; color: #fff; }
.ref-all-modal__drawer-rate-note { font-size: 0.7rem; color: rgba(255,255,255,0.6); margin-top: 0.1rem; }
.ref-all-modal__drawer-section-label { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gaming-text-dim); margin: 1rem 0 0.5rem; }
.ref-all-modal__drawer-stats { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.ref-all-modal__drawer-stat { flex: 1; min-width: 80px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 0.5rem 0.65rem; }
.ref-all-modal__drawer-stat-label { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--gaming-text-dim); }
.ref-all-modal__drawer-stat-val { font-size: 0.9rem; font-weight: 800; color: #fff; margin-top: 2px; }
.ref-all-modal__drawer-stat-val--earn { color: rgba(16,217,160,0.9); }
/* Timeline (transaction history in drawer) */
.ref-all-modal__drawer-timeline { display: flex; flex-direction: column; gap: 0; }
.ref-all-modal__drawer-txn { display: flex; align-items: flex-start; gap: 0.65rem; padding: 0.6rem 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.ref-all-modal__drawer-txn:last-child { border-bottom: none; }
.ref-all-modal__drawer-txn-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(16,217,160,0.5); flex-shrink: 0; margin-top: 5px; }
.ref-all-modal__drawer-txn-body { flex: 1; min-width: 0; }
.ref-all-modal__drawer-txn-top { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.ref-all-modal__drawer-txn-product { font-size: 0.78rem; font-weight: 600; color: rgba(255,255,255,0.8); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ref-all-modal__drawer-txn-earn { font-size: 0.78rem; font-weight: 700; color: rgba(16,217,160,0.9); white-space: nowrap; }
.ref-all-modal__drawer-txn-amounts { display: flex; align-items: center; gap: 0.5rem; margin-top: 2px; }
.ref-all-modal__drawer-txn-spent { font-size: 0.65rem; color: var(--gaming-text-dim); }
.ref-all-modal__drawer-txn-rate  { font-size: 0.62rem; color: rgba(245,158,11,0.7); }
.ref-all-modal__drawer-txn-date  { font-size: 0.62rem; color: var(--gaming-text-dim); margin-top: 2px; }

/* в”Ђв”Ђ Final 10 orphaned selectors в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.ref-all-modal__drawer-user { display: flex; align-items: center; gap: 0.75rem; }
.ref-all-modal__page-btn { min-width: 30px; height: 30px; border-radius: 7px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.5); font-size: 0.75rem; cursor: pointer; transition: all 0.15s; }
.ref-all-modal__page-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }
.ref-all-modal__page-btn--nav { padding: 0 8px; }
.ref-all-modal__page-ellipsis { color: var(--gaming-text-dim); font-size: 0.75rem; padding: 0 4px; }
.ref-all-modal__search-icon { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--gaming-text-dim); pointer-events: none; }
/* Referral table cells (rendered by JS) */
.ref-cell--joined { color: rgba(255,255,255,0.6); font-size: 0.72rem; }
.ref-cell--spent { font-weight: 600; }
.ref-cell--rate { font-weight: 600; color: #a5b4fc; }
/* Dashboard table empty-state cell */
.ds-empty-cell { text-align: center; padding: 2rem; color: var(--gaming-text-dim); }
.ref-all-modal__subtitle { font-size: 0.78rem; color: rgba(255,255,255,0.6); margin: 0; }
.st-flow--success .st-icon { color: rgba(16,217,160,0.9); }
.status-hero__refresh { font-size: 0.72rem; color: var(--gaming-text-dim); cursor: pointer; transition: color 0.15s; }
.status-hero__refresh:hover { color: rgba(255,255,255,0.7); }
.txn-modal__pagination { display: flex; align-items: center; gap: 0.35rem; }
.txn-modal__subtitle { font-size: 0.75rem; color: rgba(255,255,255,0.6); margin: 0; }

/* в”Ђв”Ђ CSS Variable alias в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
/* --accent is used by auth-modal CSS as shorthand for --gaming-accent */
:root {
  --accent: var(--gaming-accent);
}

/* в”Ђв”Ђ .page wrapper в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.page { min-height: 100vh; }

/* в”Ђв”Ђ ref-all-modal: table headers + filter pill в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.ref-all-modal__th {
  font-size: 0.65rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--gaming-text-dim);
  padding: 0.45rem 0.6rem; text-align: left;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  white-space: nowrap;
}
.ref-all-modal__th--sortable { cursor: pointer; user-select: none; }
.ref-all-modal__th--sortable:hover { color: rgba(255,255,255,0.6); }
.ref-all-modal__th--asc::after  { content: ' \u2191'; color: var(--gaming-accent-light); }
.ref-all-modal__th--desc::after { content: ' \u2193'; color: var(--gaming-accent-light); }

.ref-all-modal__filter-pill {
  font-size: 0.72rem; font-weight: 600; padding: 0.3rem 0.75rem;
  border-radius: 20px; border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.5);
  cursor: pointer; transition: all 0.15s; font-family: inherit;
}
.ref-all-modal__filter-pill:hover { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.8); }
.ref-all-modal__filter-pill--active {
  background: rgba(0,207,255,0.15); border-color: rgba(0,207,255,0.4);
  color: var(--gaming-accent-light);
}
.ref-all-modal__foot {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 0.5rem;
  padding: 0.75rem 1.5rem; border-top: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
}
.ref-all-modal__page-btn--active {
  background: rgba(0,207,255,0.2); border-color: rgba(0,207,255,0.4);
  color: var(--gaming-accent-light); font-weight: 700;
}

/* в”Ђв”Ђ Bundles: crypto incentive block в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.bdl-crypto-incentive {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  margin: 0.75rem 0;
  padding: 0.85rem 1rem;
  background: linear-gradient(135deg, rgba(249,115,22,0.08), rgba(245,158,11,0.05));
  border: 1px solid rgba(249,115,22,0.3);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
  font-family: inherit;
  color: inherit;
}
.bdl-crypto-incentive:hover {
  background: linear-gradient(135deg, rgba(249,115,22,0.14), rgba(245,158,11,0.09));
  border-color: rgba(249,115,22,0.55);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(249,115,22,0.12);
}
.bdl-crypto-incentive.is-selected {
  border-color: rgba(249,115,22,0.7);
  background: linear-gradient(135deg, rgba(249,115,22,0.16), rgba(245,158,11,0.1));
}
.bdl-crypto-incentive__left {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}
.bdl-crypto-incentive__icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(249,115,22,0.15);
  border: 1px solid rgba(249,115,22,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f97316;
  flex-shrink: 0;
}
.bdl-crypto-incentive__text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}
.bdl-crypto-incentive__title {
  font-size: 0.82rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}
.bdl-crypto-incentive__sub {
  font-size: 0.68rem;
  color: rgba(255,255,255,0.6);
}
.bdl-crypto-incentive__right {
  display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0;
}
.bdl-crypto-incentive__old {
  font-size: 0.7rem; color: var(--gaming-text-dim); text-decoration: line-through;
}
.bdl-crypto-incentive__new {
  font-family: var(--display); font-size: 1.05rem; font-weight: 800;
  color: #f97316; line-height: 1;
}
.bdl-crypto-incentive__left {
  display: flex; align-items: center; gap: 0.65rem; min-width: 0;
}
.bdl-crypto-incentive__icon {
  width: 34px; height: 34px; border-radius: 10px;
  background: rgba(249,115,22,0.15); border: 1px solid rgba(249,115,22,0.3);
  display: flex; align-items: center; justify-content: center;
  color: #f97316; flex-shrink: 0;
}
.bdl-crypto-incentive__text {
  display: flex; flex-direction: column; gap: 0.1rem; min-width: 0;
}
.bdl-crypto-incentive__title {
  font-size: 0.82rem; font-weight: 700; color: #fff; white-space: nowrap;
}

/* в”Ђв”Ђ Checkout: crypto payment nudge в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.co2-crypto-nudge {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.75rem 1rem; margin-bottom: 0.75rem;
  background: linear-gradient(135deg, rgba(249,115,22,0.08), rgba(245,158,11,0.05));
  border: 1px solid rgba(249,115,22,0.28); border-radius: 11px;
  transition: border-color 0.2s;
}
.co2-crypto-nudge:hover { border-color: rgba(249,115,22,0.5); }
.co2-crypto-nudge__left { display: flex; align-items: center; gap: 0.65rem; min-width: 0; }
.co2-crypto-nudge__icon {
  width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
  background: rgba(249,115,22,0.14); border: 1px solid rgba(249,115,22,0.28);
  display: flex; align-items: center; justify-content: center; color: #f97316;
}
.co2-crypto-nudge__title { display: block; font-size: 0.8rem; font-weight: 700; color: #fff; }
.co2-crypto-nudge__sub   { display: block; font-size: 0.67rem; color: rgba(255,255,255,0.6); }
.co2-crypto-nudge__btn {
  flex-shrink: 0; font-size: 0.72rem; font-weight: 700; padding: 0.35rem 0.9rem;
  border-radius: 8px; border: 1px solid rgba(249,115,22,0.45);
  background: rgba(249,115,22,0.14); color: #f97316;
  cursor: pointer; transition: all 0.15s; font-family: inherit; white-space: nowrap;
}
.co2-crypto-nudge__btn:hover { background: rgba(249,115,22,0.25); color: #fff; border-color: rgba(249,115,22,0.7); }

/* в”Ђв”Ђ Product detail: crypto nudge in buybox в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.dbb__crypto-nudge {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.7rem 0.9rem; margin: 0.75rem 0;
  background: linear-gradient(135deg, rgba(249,115,22,0.08), rgba(245,158,11,0.05));
  border: 1px solid rgba(249,115,22,0.28); border-radius: 10px;
  transition: border-color 0.2s;
}
.dbb__crypto-nudge__left { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.dbb__crypto-nudge__icon {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  background: rgba(249,115,22,0.14); border: 1px solid rgba(249,115,22,0.28);
  display: flex; align-items: center; justify-content: center; color: #f97316;
}
.dbb__crypto-nudge__title { display: block; font-size: 0.77rem; font-weight: 700; color: #fff; }
.dbb__crypto-nudge__sub   { display: block; font-size: 0.63rem; color: rgba(255,255,255,0.6); }
.dbb__crypto-nudge__save  {
  font-family: var(--display); font-size: 0.95rem; font-weight: 800;
  color: #f97316; white-space: nowrap; flex-shrink: 0;
}

/* в”Ђв”Ђ Product detail crypto nudge: price format update в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.dbb__crypto-nudge__price-block {
  display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0;
}
.dbb__crypto-nudge__crypto-price {
  font-family: var(--display); font-size: 1.05rem; font-weight: 800; color: #f97316; line-height: 1;
}
.dbb__crypto-nudge__with-crypto {
  font-size: 0.6rem; font-weight: 600; color: var(--gaming-text-dim); white-space: nowrap;
}
/* Remove old save class if referenced */
.dbb__crypto-nudge__save { display: none; }

/* в”Ђв”Ђ Bundles: game filter overflow в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.bdl-filter-btn--extra { display: none; }
.bdl-filter-wrap.is-expanded .bdl-filter-btn--extra { display: inline-flex; }
.bdl-filter-more {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.72rem; font-weight: 700; padding: 0.3rem 0.75rem;
  border-radius: 20px; border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.5);
  cursor: pointer; transition: all 0.15s; font-family: inherit; white-space: nowrap;
}
.bdl-filter-more:hover { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.85); }
.bdl-filter-more.is-expanded { color: var(--gaming-accent-light); border-color: rgba(var(--gaming-accent-rgb,117,72,210),0.4); }
.bdl-filter-more__icon { transition: transform 0.2s; }
.bdl-filter-more.is-expanded .bdl-filter-more__icon { transform: rotate(180deg); }

/* в”Ђв”Ђ Bundles: filter expanded state wraps to new rows в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.bdl-filter-wrap.is-expanded {
  flex-wrap: wrap;
  overflow-x: visible;
}

/* ── Bundles: card game icon — proper container sizing ───────────── */
.bdl-card__art--icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  font-size: 1.3rem;
  flex-shrink: 0;
  overflow: hidden;
}
.bdl-card__art--icon svg {
  width: 22px !important;
  height: 22px !important;
  max-width: 22px !important;
  max-height: 22px !important;
}

/* в”Ђв”Ђ Dashboard: balance card single-row fix в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.dash-balance {
  flex-wrap: nowrap;
  align-items: center;
}
.dash-balance__info { flex: 1; min-width: 0; }
.dash-balance__actions { flex-shrink: 0; display: flex; gap: 0.5rem; align-items: center; }

/* в”Ђв”Ђ Top Up modal: resolve duplicate rule conflicts в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.topup-presets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.topup-preset {
  padding: 0.65rem 0.5rem;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.09);
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.65);
  font-size: 0.82rem;
  font-weight: 700;
  font-family: var(--body);
  cursor: pointer;
  text-align: center;
  transition: all 0.18s;
}
.topup-preset:hover { border-color: rgba(255,255,255,0.2); background: rgba(255,255,255,0.07); color: #fff; }
.topup-preset.active { border-color: rgba(16,217,160,0.5); background: rgba(16,217,160,0.12); color: #10d9a0; }

.topup-method-btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin: 0.75rem 0 0.5rem;
}
.topup-method-btn {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.9rem;
  border-radius: 10px;
  border: 1.5px solid rgba(255,255,255,0.09);
  background: rgba(255,255,255,0.03);
  cursor: pointer;
  transition: all 0.18s;
  font-family: inherit;
  color: rgba(255,255,255,0.55);
}
.topup-method-btn:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.2); color: #fff; }
.topup-method-btn.active {
  border-color: rgba(0,207,255,0.6);
  background: rgba(0,207,255,0.12);
  color: #fff;
}
.topup-method-btn__icon {
  width: 28px; height: 28px; border-radius: 7px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.06);
}
.topup-method-btn__icon svg { width: 15px; height: 15px; }
.topup-method-btn__label { font-size: 0.82rem; font-weight: 700; color: #fff; display: block; }
.topup-method-btn__sub   { font-size: 0.65rem; color: rgba(255,255,255,0.6); display: block; }

/* в”Ђв”Ђ Dashboard: Top Up button single-line fix в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.dash-balance__topup {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
}
.dash-balance__topup svg { flex-shrink: 0; }
.dash-balance__history-btn {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

/* в”Ђв”Ђ Top Up: crypto bonus row + confirm button spacing в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.topup-crypto-bonus {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: rgba(16,217,160,0.07);
  border: 1px solid rgba(16,217,160,0.22);
  border-radius: 10px;
  padding: 0.6rem 0.9rem;
  margin: 0.75rem 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  text-align: center;
}
.topup-crypto-bonus svg { flex-shrink: 0; color: #10d9a0; width: 15px; height: 15px; }
.topup-crypto-bonus strong { color: #10d9a0; }
.topup-crypto-bonus__val { font-weight: 800; color: #10d9a0; }

/* Gap between bonus row and CTA button */
.topup-confirm-btn { margin-top: 0; }

/* ── Dashboard: txn-modal — centered, not bottom drawer ─────────── */
.txn-modal {
  position: fixed; inset: 0; z-index: 900;
  display: none;
  align-items: center;
  justify-content: center;
}
.txn-modal--open { display: flex; }
.txn-modal__panel {
  position: relative; z-index: 1;
  width: min(92vw, 560px);
  background: var(--gaming-bg-light, #0c0f1a);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 18px;
  max-height: 80vh;
  display: flex; flex-direction: column; overflow: hidden;
}

/* в”Ђв”Ђ Loyalty roadmap: clean 4-card redesign в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.loyalty-card__roadmap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  margin-top: 1.25rem;
  position: static;   /* remove the ::before connector line */
}
.loyalty-card__roadmap::before,
.loyalty-card__roadmap::after { display: none; }

.loyalty-card__road-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 0.75rem 0.5rem;
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  opacity: 1;
  transition: all 0.2s;
  cursor: default;
}
.loyalty-card__road-item--done {
  background: rgba(245,158,11,0.05);
  border-color: rgba(245,158,11,0.15);
  opacity: 1;
}
.loyalty-card__road-item--active {
  background: rgba(245,158,11,0.1);
  border-color: rgba(245,158,11,0.4);
  box-shadow: 0 0 12px rgba(245,158,11,0.12);
  opacity: 1;
}

/* Hide the dot — not needed in card layout */
.loyalty-card__road-dot { display: none; }

.loyalty-card__road-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  width: 100%;
}
.loyalty-card__road-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
  overflow: hidden;
  margin-bottom: 0.1rem;
}
.loyalty-card__road-icon svg {
  width: 20px !important;
  height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
}
.loyalty-card__road-item--done .loyalty-card__road-icon,
.loyalty-card__road-item--active .loyalty-card__road-icon {
  background: rgba(245,158,11,0.12);
  border-color: rgba(245,158,11,0.3);
  color: #f59e0b;
}
.loyalty-card__road-name {
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(255,255,255,0.6);
  text-align: center;
}
.loyalty-card__road-item--done   .loyalty-card__road-name { color: rgba(255,255,255,0.6); }
.loyalty-card__road-item--active .loyalty-card__road-name { color: #f59e0b; }

.loyalty-card__road-rate {
  font-size: 1rem;
  font-weight: 900;
  color: var(--gaming-text-dim);
  line-height: 1;
  font-family: var(--display);
}
.loyalty-card__road-item--done   .loyalty-card__road-rate { color: rgba(245,158,11,0.6); }
.loyalty-card__road-item--active .loyalty-card__road-rate { color: #f59e0b; }

.loyalty-card__road-req {
  font-size: 0.6rem;
  color: var(--gaming-text-dim);
  font-weight: 600;
}
.loyalty-card__road-item--active .loyalty-card__road-req { color: rgba(255,255,255,0.6); }

/* в”Ђв”Ђ Loyalty card: redesigned header в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.loyalty-card {
  display: block;  /* reset any flex from old layout */
}
.loyalty-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
/* Left: icon + tier name + label */
.loyalty-card__tier-col {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}
.loyalty-card__tier-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(245,158,11,0.12);
  border: 1px solid rgba(245,158,11,0.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; flex-shrink: 0;
  overflow: hidden;
}
.loyalty-card__tier-icon svg {
  width: 24px !important; height: 24px !important;
  max-width: 24px !important; max-height: 24px !important;
  color: #f59e0b;
}
.loyalty-card__tier-info {
  display: flex; flex-direction: column; gap: 0.2rem;
}
.loyalty-card__tier-name {
  font-family: var(--display);
  font-size: 1rem; font-weight: 800; color: #f59e0b; line-height: 1;
}
.loyalty-card__tier-label {
  font-size: 0.72rem; color: rgba(255,255,255,0.6); line-height: 1.3;
}
/* Right: big % */
.loyalty-card__discount-col {
  display: flex; flex-direction: column; align-items: flex-end;
  flex-shrink: 0;
}
.loyalty-card__headline-rate {
  font-family: var(--display);
  font-size: 2.4rem; font-weight: 900; color: #f59e0b; line-height: 1;
}
.loyalty-card__discount-label {
  font-size: 0.72rem; color: var(--gaming-text-dim); margin-top: 0.1rem;
  text-align: right;
}
/* Hide old badge/content wrappers */
.loyalty-card__badge { display: none !important; }
.loyalty-card__content { display: block; }
.loyalty-card__headline { display: none !important; }

/* в”Ђв”Ђ Loyalty card: tier color theming в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
/* CSS variable --lc-color controls icon, name, rate, progress bar, border */
.loyalty-card { --lc-color: #f59e0b; --lc-rgb: 245,158,11; }  /* Bronze default */

.loyalty-card--bronze { --lc-color: #f59e0b; --lc-rgb: 245,158,11; }
.loyalty-card--silver { --lc-color: #94a3b8; --lc-rgb: 148,163,184; }
.loyalty-card--gold   { --lc-color: #eab308; --lc-rgb: 234,179,8;   }
.loyalty-card--elite  { --lc-color: #a855f7; --lc-rgb: 168,85,247;  }

/* Apply color to all tier-specific elements */
.loyalty-card__tier-icon {
  background: rgba(var(--lc-rgb),0.12);
  border-color: rgba(var(--lc-rgb),0.3);
  color: var(--lc-color);
}
.loyalty-card__tier-name   { color: var(--lc-color); }
.loyalty-card__headline-rate { color: var(--lc-color); }
.loyalty-card__progress-fill {
  background: linear-gradient(90deg, var(--lc-color), color-mix(in srgb, var(--lc-color) 70%, white));
}
.loyalty-card {
  border-color: rgba(var(--lc-rgb),0.2);
  background: linear-gradient(135deg, rgba(var(--lc-rgb),0.06) 0%, rgba(var(--lc-rgb),0.03) 100%);
}

/* Debug: tier roadmap cards are clickable in dev mode */
.loyalty-card__road-item { cursor: pointer; }
.loyalty-card__road-item:hover { opacity: 0.85; transform: translateY(-1px); }
.loyalty-card--debug-active .loyalty-card__road-item--active .loyalty-card__road-icon {
  background: rgba(var(--lc-rgb),0.18);
  border-color: rgba(var(--lc-rgb),0.5);
}
.loyalty-card__road-item--active .loyalty-card__road-rate { color: var(--lc-color); }
.loyalty-card__road-item--active .loyalty-card__road-name { color: var(--lc-color); }
.loyalty-card__road-item--active { border-color: rgba(var(--lc-rgb),0.4); background: rgba(var(--lc-rgb),0.08); }
.loyalty-card__road-item--done   { background: rgba(var(--lc-rgb),0.04); border-color: rgba(var(--lc-rgb),0.15); }

/* Width fix: loyalty card takes full container width */
.loyalty-card { width: 100%; box-sizing: border-box; }

/* в”Ђв”Ђ Loyalty roadmap: hover tier preview в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.loyalty-card__road-item { cursor: default; position: relative; }
.loyalty-card__road-item:hover { transform: translateY(-2px); }

.loyalty-card__road-preview {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  background: rgba(10, 10, 26, 0.97);
  border: 1px solid rgba(var(--preview-rgb, 255,255,255), 0.35);
  border-radius: 14px;
  padding: 0.9rem 1.1rem;
  min-width: 120px;
  text-align: center;
  z-index: 20;
  box-shadow: 0 12px 32px rgba(0,0,0,0.6), 0 0 0 1px rgba(0,0,0,0.3), inset 0 0 20px rgba(var(--preview-rgb,255,255,255),0.04);
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}

/* Arrow */
.loyalty-card__road-preview::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: rgba(var(--preview-rgb, 255,255,255), 0.35);
}

.loyalty-card__road-item:hover .loyalty-card__road-preview {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.loyalty-card__road-preview-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--preview-rgb, 255,255,255), 0.12);
  border: 1px solid rgba(var(--preview-rgb, 255,255,255), 0.3);
  border-radius: 50%;
  padding: 6px;
  color: rgb(var(--preview-rgb, 255,255,255));
  margin-bottom: 0.2rem;
}
.loyalty-card__road-preview-icon svg { width: 100%; height: 100%; }

.loyalty-card__road-preview-name {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
}

.loyalty-card__road-preview-rate {
  font-size: 1.1rem;
  font-weight: 800;
  color: rgb(var(--preview-rgb, 255,255,255));
  line-height: 1;
}

.loyalty-card__road-preview-req {
  font-size: 0.65rem;
  color: rgba(255,255,255,0.6);
  margin-top: 0.1rem;
}

/* в”Ђв”Ђ Referral modal: side-by-side drawer layout в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.ref-all-modal__body {
  flex: 1;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  padding: 0;
}

.ref-all-modal__table-area {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 0.75rem 1.5rem;
}

/* Drawer: hidden by default */
.ref-all-modal__drawer {
  width: 0;
  overflow: hidden;
  flex-shrink: 0;
  transition: width 0.22s ease;
  border-left: 0px solid rgba(255,255,255,0.07);
  display: flex;
  flex-direction: column;
}

/* Drawer: open state — slides in from the right */
.ref-all-modal__drawer--open {
  width: 380px;
  overflow-y: auto;
  border-left-width: 1px;
}

/* Widen the panel when drawer is open to accommodate both */
.ref-all-modal__body--drawer-open ~ .ref-all-modal__foot,
.ref-all-modal__panel:has(.ref-all-modal__drawer--open) {
  width: min(99vw, 1400px);
}

/* в”Ђв”Ђ Referral modal: fixes в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */

/* Wider panel */

/* Search wrapper — remove input-like styles from the div */
div.ref-all-modal__search {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  display: flex;
  align-items: center;
}

/* Custom select (sort dropdown) */
.ref-all-modal__sort-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.ref-all-modal__sort-wrap::after {
  content: '';
  position: absolute;
  right: 0.65rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid rgba(255,255,255,0.45);
  pointer-events: none;
}
.ref-all-modal__filter-select {
  appearance: none;
  -webkit-appearance: none;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 9px !important;
  padding: 0.42rem 2rem 0.42rem 0.75rem !important;
  color: #fff !important;
  font-family: inherit;
  font-size: 0.78rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  outline: none;
}
.ref-all-modal__filter-select:hover {
  background: rgba(255,255,255,0.09) !important;
  border-color: rgba(255,255,255,0.22) !important;
}
.ref-all-modal__filter-select:focus {
  border-color: rgba(99,102,241,0.6) !important;
  box-shadow: 0 0 0 2px rgba(99,102,241,0.18);
}
.ref-all-modal__filter-select option {
  background: #1a1a2e;
  color: #fff;
}

/* в”Ђв”Ђ Referral datepicker panel + search icon fix в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */

/* Panel: hidden by default, shown when --open */
.ref-datepicker__panel {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 300;
  background: #0c0f1a;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 14px;
  padding: 1rem;
  min-width: 252px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.65);
}
.ref-datepicker__panel--open { display: block; }

/* Trigger value labels */
.ref-datepicker__trigger-value {
  font-size: 0.78rem;
  color: var(--gaming-text-dim);
}
.ref-datepicker__trigger-value--set { color: #fff; }

/* Highlight trigger when dates active */
.ref-all-modal__date-range--active .ref-datepicker__trigger { 
  color: #a5b4fc;
}

/* Day range highlights */
.ref-datepicker__day--from,
.ref-datepicker__day--to {
  background: rgba(99,102,241,0.3) !important;
  border: 1px solid rgba(99,102,241,0.55) !important;
  color: #fff !important;
  font-weight: 700;
}

/* Search wrapper: no background/border/padding on the div */
div.ref-all-modal__search {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  display: block !important;
}

/* ── Referral "All" controls — inline-style extraction (P1 #16) ─── */
.ref-inline-wrap { margin-top: 1.5rem; }
.ref-inline-wrap .ref-all-modal__body {
  display: flex;
  flex-direction: row;
  overflow: hidden;
  max-height: none;
}
.ref-inline-wrap .ref-all-modal__drawer--open {
  width: min(360px, 42vw);
  overflow-y: auto;
}
@media (max-width: 900px) {
  .ref-inline-wrap .ref-all-modal__body {
    flex-direction: column;
  }
  .ref-inline-wrap .ref-all-modal__drawer--open {
    width: 100%;
    max-height: 420px;
    border-left: none;
    border-top: 1px solid rgba(255,255,255,0.07);
  }
}
.ref-inline-panel__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.5rem; border-bottom: 1px solid rgba(255,255,255,0.07);
}
.ref-inline-panel__title {
  font-family: var(--display); font-size: 0.95rem; font-weight: 800;
  color: #fff; margin: 0;
}
div.ref-all-modal__search { position: relative; min-width: 180px; }
.ref-all-modal__search-field {
  width: 100%; background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1); border-radius: 9px;
  padding: 0.45rem 0.75rem 0.45rem 2.1rem; color: #fff;
  font-family: inherit; font-size: 0.8rem;
}
.ref-all-modal__date-range { display: flex; align-items: center; gap: 0.25rem; }
.ref-datepicker { position: relative; }
.ref-datepicker__trigger { white-space: nowrap; gap: 0.35rem; display: flex; align-items: center; }
.ref-all-modal__date-sep { color: rgba(255,255,255,0.25); font-size: 0.72rem; pointer-events: none; }
.ref-all-modal__date-clear {
  display: none; font-size: 0.72rem; background: none; border: none;
  color: rgba(255,255,255,0.6); cursor: pointer;
}
.ref-all-modal__date-clear--visible { display: inline-flex; }

/* в”Ђв”Ђ Referral drawer redesign (rd-*) в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */

/* Header */
.rd-head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1.25rem 1.25rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
}
.rd-avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(99,102,241,0.25), rgba(139,92,246,0.15));
  border: 2px solid rgba(99,102,241,0.4);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1rem; color: #a5b4fc;
  flex-shrink: 0; letter-spacing: 0.02em;
}
.rd-identity { flex: 1; min-width: 0; }
.rd-username {
  font-size: 1rem; font-weight: 800; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rd-joined { font-size: 0.72rem; color: var(--gaming-text-dim); margin-top: 2px; }
.rd-status { flex-shrink: 0; }
.rd-close {
  width: 28px; height: 28px; border-radius: 7px; flex-shrink: 0;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  color: var(--gaming-text-dim); cursor: pointer; display: flex;
  align-items: center; justify-content: center; transition: all 0.15s;
}
.rd-close:hover { background: rgba(255,255,255,0.1); color: #fff; }

/* Stats */
.rd-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem; padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
}
.rd-stat {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px; padding: 0.7rem 0.75rem;
}
.rd-stat--earn { border-color: rgba(16,217,160,0.2); background: rgba(16,217,160,0.05); }
.rd-stat__val {
  font-size: 1rem; font-weight: 800; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rd-stat--earn .rd-stat__val { color: rgba(16,217,160,0.9); }
.rd-stat__label {
  font-size: 0.6rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--gaming-text-dim); margin-top: 3px;
}

/* Section label */
.rd-section-label {
  font-size: 0.62rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--gaming-text-dim);
  padding: 0.9rem 1.25rem 0.4rem;
}

/* Empty state */
.rd-empty {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 0.6rem; padding: 2.5rem 1rem;
  color: var(--gaming-text-dim); font-size: 0.8rem; text-align: center;
}
.rd-empty svg { opacity: 0.35; }

/* Timeline */
.rd-timeline {
  display: flex; flex-direction: column;
  padding: 0 1.25rem 1rem;
  gap: 0;
}
.rd-txn {
  display: flex; gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.rd-txn:last-child { border-bottom: none; }
.rd-txn__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(16,217,160,0.55);
  flex-shrink: 0; margin-top: 5px;
}
.rd-txn__body { flex: 1; min-width: 0; }
.rd-txn__product {
  font-size: 0.85rem; font-weight: 600;
  color: rgba(255,255,255,0.88);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 4px;
}
.rd-txn__meta {
  display: flex; align-items: center; gap: 0.5rem; margin-bottom: 5px;
}
.rd-txn__date { font-size: 0.68rem; color: var(--gaming-text-dim); }
.rd-txn__pill {
  font-size: 0.62rem; font-weight: 700;
  background: rgba(245,158,11,0.12);
  border: 1px solid rgba(245,158,11,0.3);
  color: rgba(245,158,11,0.85);
  border-radius: 5px; padding: 1px 5px;
}
.rd-txn__amounts {
  display: flex; align-items: center;
  justify-content: space-between;
}
.rd-txn__spent { font-size: 0.72rem; color: var(--gaming-text-dim); }
.rd-txn__earn {
  font-size: 0.82rem; font-weight: 700;
  color: rgba(16,217,160,0.9);
}

/* Rate note */
.rd-rate-note {
  margin: 0.5rem 1.25rem 1rem;
  font-size: 0.68rem; color: var(--gaming-text-dim);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 8px; padding: 0.5rem 0.75rem;
}

/* ── Referral banner — premium redesign ─────────────────────── */
.dash-referral {
  position: relative;
  border-radius: 16px;
  padding: 1.6rem 2rem;
  display: grid;
  grid-template-columns: auto 1px 1fr auto auto;
  align-items: center;
  gap: 0 2rem;
  margin-bottom: 2rem;
  background: rgba(10, 11, 26, 0.85);
  border: 1px solid rgba(var(--gaming-cta-rgb),0.3);
  overflow: hidden;
}

/* Subtle top-right ambient light — single, restrained */
.dash-referral::after {
  content: '';
  position: absolute;
  top: -60%; right: -5%;
  width: 35%; height: 220%;
  background: radial-gradient(ellipse, rgba(99,102,241,0.09) 0%, transparent 70%);
  pointer-events: none;
}

/* Big rate number — the visual anchor */
.dash-referral__rate {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  line-height: 1;
  flex-shrink: 0;
}
.dash-referral__rate-num {
  font-family: 'Unbounded', sans-serif;
  font-size: clamp(2.8rem, 4vw, 3.8rem);
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.03em;
}
.dash-referral__rate-sym {
  font-family: 'Unbounded', sans-serif;
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  font-weight: 800;
  color: rgba(99,102,241,0.9);
  margin-top: 0.25rem;
  margin-left: 0.05em;
}

/* Vertical rule */
.dash-referral__vr {
  position: relative;
  z-index: 1;
  width: 1px;
  align-self: stretch;
  background: rgba(255,255,255,0.08);
  flex-shrink: 0;
}

/* Copy */
.dash-referral__body {
  position: relative;
  z-index: 1;
  min-width: 0;
}
.dash-referral__eyebrow {
  display: block;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(99,102,241,0.75);
  margin-bottom: 0.45rem;
}
.dash-referral__title {
  font-family: 'Unbounded', sans-serif;
  font-size: 0.95rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 0.35rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.dash-referral__sub {
  font-size: 0.75rem;
  color: var(--gaming-text-dim);
  margin: 0;
  line-height: 1.55;
  max-width: 300px;
}

/* Stats — editorial, no boxes or dividers */
.dash-referral__stats {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 1.75rem;
  flex-shrink: 0;
  align-items: center;
}
.dash-referral__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
}
.dash-referral__stat-val {
  font-family: 'Unbounded', sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1;
}
.dash-referral__stat-val--green { color: rgba(16,217,160,0.9); }
.dash-referral__stat-label {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gaming-text-dim);
}

/* CTA */
.dash-referral__cta {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem 1.25rem;
  border-radius: 10px;
  background: rgba(99,102,241,0.15);
  border: 1px solid rgba(99,102,241,0.4);
  color: #a5b4fc;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
  white-space: nowrap;
}
.dash-referral__cta:hover {
  background: rgba(99,102,241,0.28);
  border-color: rgba(99,102,241,0.7);
  color: #fff;
}
.dash-referral__cta svg { transition: transform 0.18s; }
.dash-referral__cta:hover svg { transform: translateX(2px); }

@media (max-width: 900px) {
  .dash-referral {
    grid-template-columns: 1fr;
    gap: 1.25rem 0;
    border-left-width: 1px;
    border-top: 3px solid rgba(99,102,241,0.75);
  }
  .dash-referral__vr { display: none; }
  .dash-referral__rate { justify-content: flex-start; }
  .dash-referral__stats { justify-content: flex-start; gap: 1.5rem; }
}

/* в”Ђв”Ђ Navbar Sign In ghost button в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.navbar__signin {
  font-family: var(--body);
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  background: transparent;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 9px;
  padding: 0.45rem 1rem;
  cursor: pointer;
  letter-spacing: 0.01em;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.navbar__signin:hover {
  color: #fff;
  border-color: rgba(0,207,255,0.5);
  background: rgba(0,207,255,0.07);
}

/* в”Ђв”Ђ Auth state: show/hide navbar elements в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
/* BACKEND: server renders <body class="is-logged-in"> for auth'd users */

/* Hidden when logged out */
.navbar__icon-btn[data-page="dashboard"],
.navbar__balance {
  display: none;
}

/* Logged in: show account elements, hide Sign In */
body.is-logged-in .navbar__icon-btn[data-page="dashboard"] {
  display: flex;
}
body.is-logged-in .navbar__balance {
  display: flex;
}
body.is-logged-in .navbar__signin {
  display: none;
}
/* Notification bell — authenticated users only (hidden when logged out) */
.notif-wrap { display: none; }
body.is-logged-in .notif-wrap { display: flex; align-items: center; }

/* в”Ђв”Ђ Checkout: guest sign-in nudge в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.co-signin-nudge {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 1240px;
  margin: 1.75rem auto 1rem;
  padding: 0.75rem 1.25rem;
  background: rgba(0,207,255,0.06);
  border: 1px solid rgba(0,207,255,0.25);
  border-radius: 12px;
  animation: nudge-in 0.3s ease;
}
@keyframes nudge-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.co-signin-nudge__icon {
  color: rgba(0,207,255,0.8);
  flex-shrink: 0;
}
.co-signin-nudge__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.co-signin-nudge__title {
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
}
.co-signin-nudge__perks {
  font-size: 0.72rem;
  color: var(--gaming-text-dim);
}
.co-signin-nudge__btn {
  flex-shrink: 0;
  padding: 0.45rem 1.1rem;
  border-radius: 8px;
  background: rgba(0,207,255,0.15);
  border: 1px solid rgba(0,207,255,0.4);
  color: rgba(0,207,255,0.9);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.co-signin-nudge__btn:hover {
  background: rgba(0,207,255,0.25);
  border-color: rgba(0,207,255,0.65);
}
.co-signin-nudge__dismiss {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--gaming-text-dim);
  cursor: pointer;
  padding: 4px;
  transition: color 0.15s;
}
.co-signin-nudge__dismiss:hover { color: rgba(255,255,255,0.7); }

/* Hide nudge when logged in */
body.is-logged-in .co-signin-nudge { display: none; }

/* в”Ђв”Ђ Checkout: crypto discount row в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.co2-sum-crypto { color: rgba(0,207,255,0.85); }
.co2-sum-crypto .k { color: rgba(0,207,255,0.7); }
.co2-sum-crypto.co2-sum-disc--hidden { display: none; }

/* Checkout crypto nudge — clickable to switch payment method */
.co2-crypto-nudge { cursor: pointer; }
.co2-crypto-nudge:hover { border-color: rgba(249,115,22,0.5); background: linear-gradient(135deg, rgba(249,115,22,0.13), rgba(245,158,11,0.08)); }

/* в”Ђв”Ђ Checkout: site balance payment states в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.co2-pay--disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}
.co2-pay--disabled .co2-pay__sub {
  color: rgba(255,255,255,0.3);
}
.co2-balance-msg {
  font-size: 0.72rem;
  margin-top: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  display: none; /* JS shows as flex */
  align-items: center;
  gap: 0.4rem;
}
.co2-balance-msg svg { flex-shrink: 0; }
.co2-balance-msg__text { line-height: 1.35; }
.co2-balance-msg--signin {
  background: rgba(0,207,255,0.06);
  border: 1px solid rgba(0,207,255,0.2);
  color: rgba(0,207,255,0.8);
}
.co2-balance-msg--topup {
  background: rgba(245,158,11,0.07);
  border: 1px solid rgba(245,158,11,0.25);
  color: rgba(245,158,11,0.9);
}
.co2-balance-msg a {
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
  color: inherit;
}

/* ── Debug auth toggle widget — REMOVE BEFORE PRODUCTION ─────── */
#debug-auth-toggle {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(10,10,20,0.92);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  padding: 0.4rem 0.6rem 0.4rem 0.75rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  font-family: var(--mono);
  backdrop-filter: blur(8px);
}
.debug-auth-toggle__label {
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(245,158,11,0.8);
  text-transform: uppercase;
}
#debug-auth-btn {
  border: none;
  border-radius: 6px;
  padding: 0.3rem 0.7rem;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--mono);
  transition: all 0.15s;
}
#debug-auth-btn[data-state="guest"] {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.5);
  border: 1px solid rgba(255,255,255,0.12);
}
#debug-auth-btn[data-state="logged-in"] {
  background: rgba(0,207,255,0.15);
  color: rgba(0,207,255,0.9);
  border: 1px solid rgba(0,207,255,0.35);
}
#debug-auth-btn:hover { filter: brightness(1.2); }

/* в”Ђв”Ђ Checkout: crypto badge + saving row в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.co2-pay__discount-badge {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  background: rgba(249,115,22,0.15);
  border: 1px solid rgba(249,115,22,0.4);
  color: #f97316;
  border-radius: 5px;
  padding: 1px 5px;
  vertical-align: middle;
  margin-left: 4px;
}
.co2-sum-saving {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(16,217,160,0.85);
  background: rgba(16,217,160,0.07);
  border: 1px solid rgba(16,217,160,0.2);
  border-radius: 8px;
  padding: 0.4rem 0.65rem;
  margin-top: 0.5rem;
  text-align: center;
}

/* в”Ђв”Ђ Checkout: summary panel crypto-active state в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.co2-summary.co2-summary--crypto {
  border-color: rgba(0,207,255,0.35);
  background: linear-gradient(160deg, rgba(0,207,255,0.05) 0%, transparent 60%);
}
.co2-summary.co2-summary--crypto .co2-sum-total .v {
  color: var(--gaming-accent);
}
.co2-summary.co2-summary--crypto .co2-cta {
  background: linear-gradient(135deg, var(--gaming-cta), var(--gaming-cta-dark));
  border-color: transparent;
  box-shadow: 0 4px 20px rgba(var(--gaming-cta-rgb),0.3);
}
.co2-summary.co2-summary--crypto .co2-cta:hover {
  box-shadow: 0 6px 24px rgba(var(--gaming-cta-rgb),0.45);
}

/* в”Ђв”Ђ Checkout: payment method fee note в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.co2-pay__note {
  font-size: 0.62rem;
  color: var(--gaming-text-dim);
  margin-top: 2px;
  font-style: italic;
}
.co2-pay__note--green {
  color: rgba(16,217,160,0.65);
  font-style: normal;
  font-weight: 600;
}

/* в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ
   SUPPORT PAGE  (sup-*)
   в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ */

.sup-main { padding-top: 5.5rem; padding-bottom: 5rem; min-height: 100vh; }

/* Hero */
.sup-hero {
  text-align: center;
  padding: 3rem 1.5rem 2.5rem;
  background: linear-gradient(180deg, rgba(0,207,255,0.05) 0%, transparent 100%);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.sup-hero__badge {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(0,207,255,0.8);
  background: rgba(0,207,255,0.08); border: 1px solid rgba(0,207,255,0.2);
  border-radius: 20px; padding: 0.3rem 0.85rem; margin-bottom: 1rem;
}
.sup-hero__title {
  font-family: var(--display); font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 900; letter-spacing: -0.02em; color: #fff; margin: 0 0 0.6rem;
}
.sup-hero__sub { font-size: 0.9rem; color: var(--gaming-text-dim); margin: 0 0 1.75rem; }
.sup-stats { display: flex; justify-content: center; gap: 2.5rem; flex-wrap: wrap; }
.sup-stat { text-align: center; }
.sup-stat__val {
  display: block; font-family: var(--display); font-size: 1.4rem; font-weight: 800;
  color: #fff; line-height: 1;
}
.sup-stat__val--green { color: rgba(16,217,160,0.9); }
.sup-stat__label { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gaming-text-dim); margin-top: 4px; display: block; }

/* Body layout */
.sup-body { padding: 2rem 1.5rem 3rem; }

/* Tabs */
.sup-tabs { display: flex; gap: 0.35rem; margin-bottom: 1.75rem; border-bottom: 1px solid rgba(255,255,255,0.07); padding-bottom: 0; }
.sup-tab {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--body); font-size: 0.82rem; font-weight: 700;
  color: var(--gaming-text-dim); background: none; border: none;
  padding: 0.6rem 1rem; cursor: pointer; border-bottom: 2px solid transparent;
  margin-bottom: -1px; transition: color 0.15s, border-color 0.15s;
}
.sup-tab--active { color: #fff; border-bottom-color: rgba(0,207,255,0.8); }
.sup-tab:hover { color: rgba(255,255,255,0.75); }
.sup-tab__badge {
  background: rgba(0,207,255,0.15); border: 1px solid rgba(0,207,255,0.3);
  color: rgba(0,207,255,0.9); border-radius: 10px;
  font-size: 0.6rem; font-weight: 800; padding: 1px 6px;
}

/* Panel */
.sup-panel { display: grid; grid-template-columns: 280px 1fr; gap: 1.75rem; align-items: start; }
.sup-panel--hidden { display: none; }

/* Quick categories */
.sup-quick { display: flex; flex-direction: column; gap: 0.6rem; }
.sup-quick__item {
  display: flex; align-items: center; gap: 0.85rem;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px; padding: 0.75rem 1rem; cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.sup-quick__item:hover {
  background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.14);
}
.sup-quick__icon {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  background: rgba(var(--qi-rgb), 0.12); border: 1px solid rgba(var(--qi-rgb), 0.25);
  color: rgb(var(--qi-rgb));
  display: flex; align-items: center; justify-content: center;
}
.sup-quick__title { font-size: 0.82rem; font-weight: 700; color: #fff; }
.sup-quick__sub { font-size: 0.68rem; color: var(--gaming-text-dim); margin-top: 1px; }

/* Form */
.sup-panel__right {
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px; padding: 1.75rem;
}
.sup-form__title { font-family: var(--display); font-size: 1rem; font-weight: 800; color: #fff; margin: 0 0 0.3rem; }
.sup-form__sub { font-size: 0.78rem; color: var(--gaming-text-dim); margin: 0 0 1.5rem; }
.sup-form { display: flex; flex-direction: column; gap: 1rem; }
.sup-field { display: flex; flex-direction: column; gap: 0.4rem; position: relative; }
.sup-label { font-size: 0.75rem; font-weight: 700; color: rgba(255,255,255,0.65); }
.sup-req { color: rgba(239,68,95,0.8); }
.sup-opt { color: var(--gaming-text-dim); font-weight: 400; }
.sup-input, .sup-select, .sup-textarea {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 9px; padding: 0.6rem 0.85rem; color: #fff;
  font-family: var(--body); font-size: 0.82rem;
  transition: border-color 0.15s;
  width: 100%;
}
.sup-input:focus, .sup-select:focus, .sup-textarea:focus {
  outline: none; border-color: rgba(0,207,255,0.5);
  box-shadow: 0 0 0 2px rgba(0,207,255,0.12);
}
.sup-select { appearance: none; -webkit-appearance: none; }
.sup-select-wrap { position: relative; }
.sup-select-wrap::after {
  content: ''; position: absolute; right: 0.85rem; top: 50%;
  transform: translateY(-50%); pointer-events: none;
  border: 4px solid transparent; border-top-color: rgba(255,255,255,0.6);
}
.sup-textarea { min-height: 120px; resize: vertical; }
.sup-char-count { font-size: 0.62rem; color: var(--gaming-text-dim); text-align: right; margin-top: 2px; }
.sup-form__foot { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 0.5rem; }
.sup-form__note { font-size: 0.7rem; color: var(--gaming-text-dim); margin: 0; }
.sup-submit {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: rgba(0,207,255,0.15); border: 1px solid rgba(0,207,255,0.4);
  color: rgba(0,207,255,0.95); border-radius: 10px; padding: 0.65rem 1.4rem;
  font-family: var(--body); font-size: 0.82rem; font-weight: 700;
  cursor: pointer; transition: all 0.15s;
}
.sup-submit:hover { background: rgba(0,207,255,0.25); border-color: rgba(0,207,255,0.7); color: #fff; }
.sup-submit:disabled { opacity: 0.5; cursor: not-allowed; }
.sup-success {
  text-align: center; padding: 2rem; display: flex; flex-direction: column;
  align-items: center; gap: 0.6rem;
}
.sup-success strong { font-size: 1rem; color: #fff; }
.sup-success p { font-size: 0.8rem; color: var(--gaming-text-dim); margin: 0; }

/* Tickets */
.sup-tickets { display: flex; flex-direction: column; gap: 0.85rem; width: 100%; }
.sup-ticket {
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px; padding: 1.1rem 1.25rem;
}
.sup-ticket--open { border-color: rgba(0,207,255,0.35); background: rgba(0,207,255,0.04); }
.sup-ticket--resolved { border-color: rgba(16,217,160,0.3); opacity: 0.75; }
.sup-ticket__head { display: flex; align-items: center; gap: 0.65rem; margin-bottom: 0.6rem; flex-wrap: wrap; }
.sup-ticket__status { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; border-radius: 5px; padding: 2px 7px; }
.sup-ticket__status--open { background: rgba(0,207,255,0.12); color: rgba(0,207,255,0.9); }
.sup-ticket__status--resolved { background: rgba(16,217,160,0.1); color: rgba(16,217,160,0.8); }
.sup-ticket__id { font-size: 0.7rem; color: var(--gaming-text-dim); font-family: var(--mono); }
.sup-ticket__date { font-size: 0.68rem; color: var(--gaming-text-dim); margin-left: auto; }
.sup-ticket__title { font-size: 0.88rem; font-weight: 700; color: #fff; margin-bottom: 0.25rem; }
.sup-ticket__meta { font-size: 0.68rem; color: var(--gaming-text-dim); margin-bottom: 0.5rem; }
.sup-ticket__preview { font-size: 0.75rem; color: var(--gaming-text-dim); line-height: 1.5; margin-bottom: 0.75rem; }
.sup-ticket__foot { display: flex; }
.sup-ticket__awaiting { font-size: 0.68rem; color: rgba(0,207,255,0.6); font-weight: 600; }
.sup-ticket__resolved { font-size: 0.68rem; color: rgba(16,217,160,0.7); font-weight: 600; }

/* FAQ */
.sup-faq { margin-top: 3rem; max-width: 780px; }
.sup-faq__title { font-family: var(--display); font-size: 1rem; font-weight: 800; color: #fff; margin: 0 0 1rem; }
.sup-faq__list { display: flex; flex-direction: column; gap: 0.5rem; }
.sup-faq__item {
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px; overflow: hidden;
}
.sup-faq__item summary {
  padding: 0.85rem 1.1rem; font-size: 0.82rem; font-weight: 600;
  color: rgba(255,255,255,0.8); cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center;
  transition: color 0.15s;
}
.sup-faq__item summary::after { content: '+'; font-size: 1rem; color: var(--gaming-text-dim); transition: transform 0.2s; }
.sup-faq__item[open] summary::after { transform: rotate(45deg); }
.sup-faq__item[open] summary { color: #fff; }
.sup-faq__item p { padding: 0 1.1rem 0.85rem; font-size: 0.78rem; color: var(--gaming-text-dim); line-height: 1.6; margin: 0; }

/* Navbar support icon */
.navbar__support { display: none; position: relative; }
body.is-logged-in .navbar__support { display: flex; }
/* Unread-ticket counter, mirrored from the Support Center (site.js initSupportBadge) */
.navbar__support .sc-nav-badge {
  position: absolute; top: -5px; right: -6px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px;
  display: grid; place-items: center;
  background: var(--gaming-accent); color: #04212B;
  font-size: 10px; font-weight: 800; line-height: 1;
  border: 2px solid #060912;
  box-sizing: content-box;
  pointer-events: none;
}

@media (max-width: 900px) {
  .sup-panel { grid-template-columns: 1fr; }
  .sup-quick { flex-direction: row; flex-wrap: wrap; }
  .sup-quick__item { flex: 1 1 calc(50% - 0.3rem); }
}

/* в”Ђв”Ђ Support: Ticket table + thread (stk-*) в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.stk-wrap { width: 100%; }

/* Table */
.stk-table { width: 100%; border-collapse: collapse; }
.stk-th {
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--gaming-text-dim); padding: 0.6rem 0.75rem; text-align: left;
  border-bottom: 1px solid rgba(255,255,255,0.07); white-space: nowrap;
}
.stk-th--num { width: 60px; }
.stk-th--msg { width: 50px; text-align: center; }
.stk-row { cursor: pointer; transition: background 0.12s; }
.stk-row:hover td { background: rgba(255,255,255,0.03); }
.stk-td { padding: 0.85rem 0.75rem; border-bottom: 1px solid rgba(255,255,255,0.05); vertical-align: top; }
.stk-td--num { font-size: 0.7rem; color: var(--gaming-text-dim); font-family: var(--mono); }
.stk-td--title { max-width: 260px; }
.stk-td--time { font-size: 0.7rem; color: var(--gaming-text-dim); white-space: nowrap; }
.stk-td--msg { font-size: 0.72rem; color: rgba(255,255,255,0.6); text-align: center; }
.stk-td--cat { font-size: 0.72rem; color: var(--gaming-text-dim); white-space: nowrap; }
.stk-td--agent { font-size: 0.75rem; color: rgba(255,255,255,0.7); font-weight: 600; white-space: nowrap; }
.stk-agent-role { font-size: 0.62rem; font-weight: 400; color: var(--gaming-text-dim); }
.stk-title { font-size: 0.82rem; font-weight: 600; color: rgba(255,255,255,0.85); margin-bottom: 3px; }
.stk-preview { font-size: 0.68rem; color: var(--gaming-text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }
.stk-status { font-size: 0.6rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; border-radius: 5px; padding: 2px 7px; white-space: nowrap; }
.stk-status--open { background: rgba(0,207,255,0.12); color: rgba(0,207,255,0.9); }
.stk-status--resolved { background: rgba(16,217,160,0.1); color: rgba(16,217,160,0.8); }
.stk-time--fresh { color: rgba(0,207,255,0.7); }

/* Thread layout */
.stk-thread__layout { display: grid; grid-template-columns: 1fr 240px; gap: 1.25rem; align-items: start; }
.stk-convo__head { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.stk-back {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.75rem; font-weight: 600; color: var(--gaming-text-dim);
  background: none; border: none; cursor: pointer; padding: 0;
  transition: color 0.15s;
}
.stk-back:hover { color: #fff; }
.stk-convo__title { font-size: 0.9rem; font-weight: 700; color: #fff; margin: 0; }
.stk-convo__id { font-size: 0.68rem; color: var(--gaming-text-dim); font-family: var(--mono); }

/* Messages */
.stk-messages { display: flex; flex-direction: column; gap: 1.1rem; }
.stk-msg { display: flex; align-items: flex-start; gap: 0.75rem; }
.stk-msg--agent { flex-direction: row-reverse; }
.stk-msg__avatar {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: rgba(99,102,241,0.2); border: 1px solid rgba(99,102,241,0.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 800; color: #a5b4fc;
}
.stk-msg__avatar--agent {
  background: rgba(16,217,160,0.15); border-color: rgba(16,217,160,0.3); color: rgba(16,217,160,0.9);
}
.stk-msg__bubble {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px; padding: 0.75rem 1rem; max-width: 80%;
}
.stk-msg__bubble--agent {
  background: rgba(16,217,160,0.1); border-color: rgba(16,217,160,0.25);
}
.stk-msg__meta { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.45rem; }
.stk-msg__meta strong { font-size: 0.75rem; color: #fff; }
.stk-msg__meta span { font-size: 0.65rem; color: var(--gaming-text-dim); }
.stk-msg__text { font-size: 0.78rem; color: rgba(255,255,255,0.75); line-height: 1.6; }
.stk-closed {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-size: 0.72rem; color: rgba(16,217,160,0.6); font-weight: 600;
  margin-top: 0.5rem; padding: 0.6rem;
  border-top: 1px solid rgba(255,255,255,0.06);
}

/* Sidebar */
.stk-sidebar { display: flex; flex-direction: column; gap: 0.75rem; }
.stk-sidebar__card {
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px; padding: 1rem;
}
.stk-sidebar__label { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gaming-text-dim); margin-bottom: 0.75rem; }
.stk-profile { display: flex; align-items: center; gap: 0.65rem; margin-bottom: 0.85rem; }
.stk-profile__avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: rgba(99,102,241,0.2); border: 1px solid rgba(99,102,241,0.35);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; font-weight: 800; color: #a5b4fc;
}
.stk-profile__name { font-size: 0.82rem; font-weight: 700; color: #fff; }
.stk-profile__email { font-size: 0.62rem; color: var(--gaming-text-dim); }
.stk-profile__stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 0.4rem; }
.stk-profile__stat { text-align: center; background: rgba(255,255,255,0.03); border-radius: 8px; padding: 0.45rem 0.3rem; }
.stk-profile__stat-val { display: block; font-size: 0.82rem; font-weight: 800; color: #fff; }
.stk-profile__stat-label { display: block; font-size: 0.55rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--gaming-text-dim); margin-top: 2px; }
.stk-activity { display: flex; flex-direction: column; gap: 0.6rem; }
.stk-act { display: grid; grid-template-columns: 8px 1fr auto; gap: 0.5rem; align-items: start; }
.stk-act__dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(0,207,255,0.5); margin-top: 4px; flex-shrink: 0; }
.stk-act__text { font-size: 0.72rem; color: rgba(255,255,255,0.6); }
.stk-act__time { font-size: 0.62rem; color: var(--gaming-text-dim); white-space: nowrap; }

@media (max-width: 900px) {
  .stk-thread__layout { grid-template-columns: 1fr; }
  .stk-sidebar { flex-direction: row; flex-wrap: wrap; }
  .stk-sidebar__card { flex: 1 1 200px; }
}

/* в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ
   DASHBOARD v2 — sidebar layout (ds2-*)
   Preview only — dashboard-2.html
   в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ */

.ds2-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 0;
  min-height: calc(100vh - 64px);
  align-items: start;
}

/* Sidebar */
.ds2-sidebar {
  position: sticky;
  top: 64px;
  height: calc(100vh - 64px);
  overflow-y: auto;
  padding: 1.5rem 0.75rem;
  border-right: 1px solid rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: rgba(8,10,22,0.6);
}

/* User mini-card */
.ds2-sidebar__user {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.6rem 0.5rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  margin-bottom: 0.5rem;
}
.ds2-sidebar__avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: rgba(0,207,255,0.15); border: 1px solid rgba(0,207,255,0.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; font-weight: 800; color: rgba(0,207,255,0.9);
}
.ds2-sidebar__name { font-size: 0.78rem; font-weight: 700; color: #fff; }
.ds2-sidebar__email { font-size: 0.62rem; color: var(--gaming-text-dim); margin-top: 1px; }

/* Nav */
.ds2-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ds2-nav__item {
  display: flex; align-items: center; gap: 0.65rem;
  padding: 0.6rem 0.75rem; border-radius: 9px;
  font-size: 0.8rem; font-weight: 600; color: rgba(255,255,255,0.5);
  text-decoration: none; cursor: pointer;
  transition: background 0.12s, color 0.12s;
  position: relative;
}
.ds2-nav__item:hover { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.85); }
.ds2-nav__item--active {
  background: rgba(0,207,255,0.1); color: rgba(0,207,255,0.95);
  font-weight: 700;
}
.ds2-nav__item--support { color: rgba(255,255,255,0.55); }
.ds2-nav__item--support:hover { background: rgba(0,207,255,0.08); color: rgba(0,207,255,0.9); }
.ds2-nav__badge {
  margin-left: auto; font-size: 0.6rem; font-weight: 800;
  background: rgba(255,255,255,0.08); border-radius: 10px;
  padding: 1px 6px; color: rgba(255,255,255,0.5);
}
.ds2-nav__badge--open {
  background: rgba(0,207,255,0.12); color: rgba(0,207,255,0.8);
  border: 1px solid rgba(0,207,255,0.25);
}

.ds2-sidebar__divider { height: 1px; background: rgba(255,255,255,0.07); margin: 0.5rem 0.5rem; }

/* Main content */
.ds2-main { min-width: 0; padding: 0; }
.ds2-main .container-max { max-width: 100%; padding-left: 1.75rem; padding-right: 1.75rem; }

@media (max-width: 1024px) {
  .ds2-layout { grid-template-columns: 1fr; }
  .ds2-sidebar { display: none; }
}

/* в”Ђв”Ђ Dashboard-2: layout corrections в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.ds2-app {
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: calc(100vh - 64px);
  margin-top: 64px;
}
.ds2-sidebar {
  position: sticky;
  top: 64px;
  height: calc(100vh - 64px);
  overflow-y: auto;
  padding: 1.25rem 0.65rem;
  border-right: 1px solid rgba(255,255,255,0.07);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  background: rgba(6,9,18,0.8);
}
.ds2-main {
  min-width: 0;
}
.ds2-main .dash-hero {
  margin: 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.ds2-main .dash-hero .container-max {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.ds2-content {
  padding: 0 1.5rem 3rem;
  max-width: 100%;
}
@media (max-width: 1024px) {
  .ds2-app { grid-template-columns: 1fr; margin-top: 56px; }
  .ds2-sidebar { display: none; }
}

/* в”Ђв”Ђ ds2 section visibility в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.ds2-section { display: block; }
.ds2-section--hidden { display: none !important; }
.ds2-content { padding: 0 1.5rem 3rem; }

/* в”Ђв”Ђ Dashboard-2 Overview quick cards в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.ds2-overview-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.85rem;
  margin-top: 1.25rem;
}
.ds2-ov-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.ds2-ov-card__label {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gaming-text-dim);
}
.ds2-ov-card__val {
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
}
.ds2-ov-card__val--green  { color: rgba(16,217,160,0.9); }
.ds2-ov-card__val--amber  { color: rgba(245,158,11,0.9); }
.ds2-ov-card__val--cyan   { color: rgba(0,207,255,0.9); }
.ds2-ov-card__sub {
  font-size: 0.68rem;
  color: var(--gaming-text-dim);
  margin-top: 2px;
}
.ds2-ov-card__link {
  font-size: 0.68rem;
  font-weight: 600;
  color: rgba(0,207,255,0.7);
  text-decoration: none;
  margin-top: auto;
  padding-top: 0.5rem;
  cursor: pointer;
  transition: color 0.15s;
}
.ds2-ov-card__link:hover { color: rgba(0,207,255,1); }

@media (max-width: 900px) {
  .ds2-overview-row { grid-template-columns: repeat(2,1fr); }
}

/* в”Ђв”Ђ ds2 sidebar full styles в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.ds2-sidebar__user {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.5rem 0.5rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  margin-bottom: 0.35rem;
}
.ds2-sidebar__avatar {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: rgba(0,207,255,0.15); border: 1px solid rgba(0,207,255,0.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 800; color: rgba(0,207,255,0.9);
}
.ds2-sidebar__name  { font-size: 0.75rem; font-weight: 700; color: #fff; }
.ds2-sidebar__email { font-size: 0.58rem; color: var(--gaming-text-dim); margin-top: 1px; }

.ds2-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.ds2-nav__item {
  width: 100%;
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.55rem 0.65rem; border-radius: 8px;
  font-family: var(--body); font-size: 0.78rem; font-weight: 600;
  color: var(--gaming-text-dim); background: none; border: none;
  cursor: pointer; text-align: left;
  transition: background 0.12s, color 0.12s;
}
.ds2-nav__item:hover { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.85); }
.ds2-nav__item--active { background: rgba(0,207,255,0.1); color: rgba(0,207,255,0.95); font-weight: 700; }
.ds2-nav__item--support:hover { background: rgba(0,207,255,0.08); color: rgba(0,207,255,0.85); }
.ds2-nav__badge {
  margin-left: auto; font-size: 0.58rem; font-weight: 800;
  background: rgba(255,255,255,0.07); border-radius: 8px;
  padding: 1px 5px; color: rgba(255,255,255,0.6);
}
.ds2-nav__badge--open {
  background: rgba(0,207,255,0.12); color: rgba(0,207,255,0.8);
  border: 1px solid rgba(0,207,255,0.25);
}
.ds2-sidebar__divider { height: 1px; background: rgba(255,255,255,0.07); margin: 0.35rem 0.5rem; }

.ds2-sidebar__footer {
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.ds2-sidebar__logout {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.65rem; border-radius: 8px;
  font-size: 0.73rem; font-weight: 600;
  color: var(--gaming-text-dim); text-decoration: none;
  transition: all 0.12s; cursor: pointer;
}
.ds2-sidebar__logout:hover { color: rgba(239,68,95,0.8); background: rgba(239,68,95,0.06); }

/* в”Ђв”Ђ Dashboard-2 Referrals tab page header в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.ds2-ref-page__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap;
}
.ds2-ref-page__title {
  font-family: var(--display); font-size: 1rem; font-weight: 800; color: #fff; margin: 0 0 0.3rem;
}
.ds2-ref-page__sub { font-size: 0.78rem; color: rgba(255,255,255,0.6); margin: 0; }
.ds2-ref-page__full-link {
  font-size: 0.75rem; font-weight: 600; color: rgba(0,207,255,0.75);
  text-decoration: none; white-space: nowrap; transition: color 0.15s;
}
.ds2-ref-page__full-link:hover { color: #fff; }

/* в”Ђв”Ђ Dashboard-2: referral banner spacing in overview в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
#ds2-sec-overview .dash-referral {
  margin-top: 2rem;
}

/* в”Ђв”Ђ Dashboard-2: loyalty section top spacing в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */


/* в”Ђв”Ђ Loyalty tab spacing fix в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
#ds2-sec-loyalty { padding-top: 3rem; }

/* в”Ђв”Ђ Orders tab inline management (ords-*) в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.ords-page { padding-top: 1.5rem; }
.ords-head { display:flex; align-items:center; gap:1rem; margin-bottom:1.25rem; }
.ords-head__title { font-family:var(--display); font-size:1rem; font-weight:800; color:#fff; margin:0; }
.ords-head__count { font-size:0.72rem; color: var(--gaming-text-dim); font-weight:600; }

/* Mini spend analytics */
.ords-analytics {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px;
  padding: 1.25rem 1.35rem;
  margin-bottom: 1.5rem;
}
.ords-analytics__head { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:1.1rem; flex-wrap:wrap; }
.ords-analytics__title { font-family:var(--display); font-size:0.92rem; font-weight:800; color:#fff; margin:0; }
.ords-analytics__note { font-size:0.68rem; color: var(--gaming-text-dim); font-weight:600; }
.ords-analytics__kpis {
  display:grid; grid-template-columns:repeat(3,1fr); gap:0.7rem; margin-bottom:1.25rem;
}
.ords-analytics__kpi {
  display:flex; flex-direction:column; gap:0.2rem;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 0.85rem 0.95rem;
  min-width: 0;
}
.ords-analytics__kpi-label { font-size:0.64rem; font-weight:700; text-transform:uppercase; letter-spacing:0.07em; color: var(--gaming-text-dim); }
.ords-analytics__kpi-val { font-family:var(--display); font-size:1.2rem; font-weight:800; color:#fff; line-height:1.1; }
.ords-analytics__kpi-sub { font-size:0.7rem; color:rgba(255,255,255,0.6); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ords-analytics__charts { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.ords-analytics__charts > * { min-width: 0; }
.ords-analytics__canvas canvas { max-width: 100%; }
.ords-analytics__card {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 0.95rem 1rem 1.05rem;
}
.ords-analytics__card-title { font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.07em; color:rgba(255,255,255,0.6); margin-bottom:0.8rem; }
.ords-analytics__canvas { position:relative; height:180px; }
.ords-analytics__donut-row { display:flex; align-items:center; gap:1rem; }
.ords-analytics__canvas--donut { flex:0 0 150px; width:150px; height:150px; }
.ords-analytics__legend { list-style:none; margin:0; padding:0; flex:1; min-width:0; display:flex; flex-direction:column; gap:0.5rem; }
.ords-analytics__legend-item { display:flex; align-items:center; gap:0.5rem; font-size:0.74rem; }
.ords-analytics__legend-dot { flex:0 0 auto; width:9px; height:9px; border-radius:3px; }
.ords-analytics__legend-name { flex:1; min-width:0; color:rgba(255,255,255,0.62); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ords-analytics__legend-val { flex:0 0 auto; color:#fff; font-weight:700; }
@media (max-width: 720px) {
  .ords-analytics__kpis { grid-template-columns:1fr; }
  .ords-analytics__charts { grid-template-columns:1fr; }
  .ords-analytics__donut-row { flex-direction:column; align-items:stretch; }
  .ords-analytics__canvas--donut { width:100%; flex:none; }
}

.ords-controls {
  display:flex; align-items:center; gap:0.65rem; flex-wrap:wrap;
  margin-bottom:1rem;
}
.ords-search-wrap {
  position:relative; flex:1; min-width:180px;
}
.ords-search-icon {
  position:absolute; left:0.75rem; top:50%; transform:translateY(-50%);
  color:rgba(255,255,255,.35); pointer-events:none;
}
.ords-search {
  width:100%; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  border-radius:9px; padding:0.45rem 0.75rem 0.45rem 2.1rem;
  color:#fff; font-family:var(--body); font-size:0.8rem;
}
.ords-search:focus { outline:none; border-color:rgba(0,207,255,.45); }

.ords-filters { display:flex; gap:0.3rem; flex-wrap:wrap; }
.ords-pill {
  font-family:var(--body); font-size:0.72rem; font-weight:700;
  padding:0.35rem 0.85rem; border-radius:20px; border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04); color:rgba(255,255,255,.45); cursor:pointer;
  transition:all 0.15s;
}
.ords-pill:hover { color:rgba(255,255,255,.8); border-color:rgba(255,255,255,.2); }
.ords-pill--active { background:rgba(0,207,255,.12); border-color:rgba(0,207,255,.4); color:rgba(0,207,255,.95); }

.ords-sort-wrap { position:relative; }
.ords-sort-wrap::after {
  content:""; position:absolute; right:0.7rem; top:50%; width:9px; height:9px;
  transform:translateY(-65%) rotate(45deg);
  border-right:1.6px solid rgba(255,255,255,.45); border-bottom:1.6px solid rgba(255,255,255,.45);
  pointer-events:none;
}
.ords-sort {
  appearance:none; -webkit-appearance:none;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  border-radius:9px; padding:0.42rem 2rem 0.42rem 0.75rem;
  color:#fff; font-family:var(--body); font-size:0.78rem; cursor:pointer;
  transition:border-color .15s, background .15s;
}
.ords-sort:hover { background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.22); }
.ords-sort:focus { outline:none; border-color:rgba(0,207,255,.45); box-shadow:0 0 0 2px rgba(0,207,255,.16); }
.ords-sort option { background:#1a1a2e; color:#fff; }

.ords-table-wrap { overflow-x:auto; border-radius:12px; border:1px solid rgba(255,255,255,.08); }
.ords-table { width:100%; border-collapse:collapse; }
.ords-table thead th {
  font-size:0.62rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  color:rgba(255,255,255,.3); padding:0.6rem 0.85rem; text-align:left;
  background:rgba(255,255,255,.03); border-bottom:1px solid rgba(255,255,255,.07);
  white-space:nowrap;
}
.ords-table tbody tr { border-bottom:1px solid rgba(255,255,255,.05); transition:background 0.1s; }
.ords-table tbody tr:last-child { border-bottom:none; }
.ords-table tbody tr:hover { background:rgba(255,255,255,.03); }
.ords-table tbody td { padding:0.8rem 0.85rem; font-size:0.8rem; color:rgba(255,255,255,.75); }
.ords-td--id { font-family: var(--mono); font-size:0.72rem; color: var(--gaming-text-dim); }
.ords-td--product { font-weight:600; color:#fff; }
.ords-td--date { white-space:nowrap; color:rgba(255,255,255,.4); font-size:0.72rem; }

.ords-foot {
  display:flex; align-items:center; justify-content:space-between;
  padding:0.85rem 0; margin-top:0.5rem;
}
.ords-foot__info { font-size:0.7rem; color:rgba(255,255,255,.3); }
.ords-pagination { display:flex; gap:0.3rem; }
.ords-pag-btn {
  min-width:30px; height:30px; border-radius:7px; font-size:0.75rem; font-weight:700;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.5); cursor:pointer; transition:all 0.12s; font-family:var(--body);
}
.ords-pag-btn:hover { background:rgba(255,255,255,.1); color:#fff; }
.ords-pag-btn--active { background:rgba(0,207,255,.15); border-color:rgba(0,207,255,.4); color:rgba(0,207,255,.95); }


/* в”Ђв”Ђ Referrals tab embedded: remove standalone page padding в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
#ds2-sec-referrals .ref-page {
  min-height: unset;
  padding-top: 0;
  padding-bottom: 1rem;
}
#ds2-sec-referrals .ref-hero {
  padding-top: 0.75rem;
}

/* в”Ђв”Ђ Referrals inline full table (was modal, now inline) в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
.ref-all-inline-wrap {
  margin-top: 1.5rem;
}
.ref-all-inline {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: none;
}
.ref-all-inline .ref-all-modal__body {
  max-height: none;
  overflow: visible;
}
.ref-all-inline .ref-all-modal__drawer--open {
  width: 360px;
}

/* в”Ђв”Ђ Referrals inline table: row hover + click affordance в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
#ref-all-table-body tr {
  cursor: pointer;
  transition: background 0.12s;
}
#ref-all-table-body tr:hover {
  background: rgba(0,207,255,0.06);
  box-shadow: inset 2px 0 0 rgba(0,207,255,0.5);
}
#ref-all-table-body tr:hover td {
  color: rgba(255,255,255,0.9);
}
#ref-all-table-body tr.ref-all-modal__row--active {
  background: rgba(0,207,255,0.1);
  border-left: 2px solid rgba(0,207,255,0.6);
}



/* в”Ђв”Ђ Settings tab spacing в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
#ds2-sec-settings {
  padding: 1.5rem 0 0;
}
#ds2-sec-settings .dash-section {
  margin-top: 0;
  margin-bottom: 0;
}

/* ── Dashboard-2 Support tab — Support Center preview ──────────── */
.ds2-support-preview {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  padding: 1.6rem 1.7rem;
  max-width: 780px;
  margin: 2.25rem auto 0;
}
.ds2-support-preview__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.3rem; flex-wrap: wrap;
}
.ds2-support-preview__heading { display: flex; flex-direction: column; gap: 0.25rem; }
.ds2-support-preview__title {
  font-family: var(--display); font-size: 1.15rem; font-weight: 800;
  color: #fff; margin: 0; line-height: 1.1;
}
.ds2-support-preview__sub { font-size: 0.72rem; color: rgba(255,255,255,0.6); margin: 0; }
.ds2-support-preview__count { color: var(--gaming-accent); font-weight: 800; }

/* Live status strip — the trust signal */
.ds2-support-preview__status {
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin: 0.35rem 0 0; font-size: 0.7rem; color: rgba(255,255,255,0.5);
}
.ds2-support-preview__dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: var(--gaming-success, #10d9a0);
  box-shadow: 0 0 0 3px rgba(16,217,160,0.18);
  animation: ds2-sp-pulse 2.4s ease-in-out infinite;
}
.ds2-support-preview__online { color: rgba(255,255,255,0.72); font-weight: 600; }
.ds2-support-preview__sep { color: var(--gaming-text-dim); }
.ds2-support-preview__link {
  display: inline-flex; align-items: center; gap: 0.4rem; flex-shrink: 0;
  padding: 0.5rem 0.95rem;
  font-size: 0.74rem; font-weight: 600; color: rgba(0,207,255,0.92);
  text-decoration: none; white-space: nowrap; line-height: 1;
  background: rgba(0,207,255,0.07);
  border: 1px solid rgba(0,207,255,0.28);
  border-radius: 999px;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.ds2-support-preview__link:hover {
  color: #fff; background: rgba(0,207,255,0.15);
  border-color: rgba(0,207,255,0.55);
}
@keyframes ds2-sp-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(16,217,160,0.18); }
  50%      { box-shadow: 0 0 0 5px rgba(16,217,160,0.04); }
}

/* Focus card — single ticket needing attention; where boldness is spent */
.ds2-sp-focus {
  position: relative; display: flex; overflow: hidden;
  margin-bottom: 1.1rem;
  background: linear-gradient(180deg, rgba(0,207,255,0.06), rgba(0,207,255,0)), rgba(255,255,255,0.045);
  border: 1px solid rgba(0,207,255,0.22);
  border-radius: 15px;
  text-decoration: none; color: inherit;
  transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s;
}
.ds2-sp-focus:hover {
  border-color: rgba(0,207,255,0.5);
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(0,0,0,0.4), 0 0 0 1px rgba(0,207,255,0.12);
}
.ds2-sp-focus__rail {
  width: 3px; flex-shrink: 0; align-self: stretch;
  background: linear-gradient(180deg, var(--gaming-accent, #00cfff), var(--gaming-cta));
}
.ds2-sp-focus__main { flex: 1; min-width: 0; padding: 1rem 1.15rem 0.95rem; }
.ds2-sp-focus__top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.6rem; }
.ds2-sp-focus__badge {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.6rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--gaming-accent, #00cfff);
  background: rgba(0,207,255,0.1); border: 1px solid rgba(0,207,255,0.25);
  padding: 4px 10px; border-radius: 999px;
}
.ds2-sp-focus__badge-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  background: var(--gaming-accent, #00cfff);
  animation: ds2-sp-blink 2s ease-in-out infinite;
}
@keyframes ds2-sp-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}
.ds2-sp-focus__id {
  font-family: var(--mono);
  font-size: 0.72rem; color: rgba(255,255,255,0.6); flex-shrink: 0;
}
.ds2-sp-focus__title {
  font-family: var(--display); font-size: 0.98rem; font-weight: 800; color: #fff;
  line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ds2-sp-focus__snippet {
  font-size: 0.78rem; color: rgba(255,255,255,0.5); margin-top: 0.3rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ds2-sp-focus__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  margin-top: 0.75rem;
}
.ds2-sp-focus__meta {
  font-size: 0.68rem; color: var(--gaming-text-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ds2-sp-focus__cta {
  font-size: 0.74rem; font-weight: 700; color: var(--gaming-accent, #00cfff);
  white-space: nowrap; flex-shrink: 0; transition: transform 0.18s;
}
.ds2-sp-focus:hover .ds2-sp-focus__cta { transform: translateX(3px); }

/* Earlier tickets — quiet, hairline rows */
.ds2-sp-list { display: flex; flex-direction: column; }
.ds2-sp-list__label {
  font-size: 0.58rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gaming-text-dim); margin: 0 0 0.15rem;
}
.ds2-sp-row {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.7rem 0.15rem; text-decoration: none; color: inherit;
  border-top: 1px solid rgba(255,255,255,0.06);
  transition: padding-left 0.15s, background 0.15s;
}
.ds2-sp-row:first-of-type { border-top: none; }
.ds2-sp-row:hover { padding-left: 0.55rem; }
.ds2-sp-row__dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.ds2-sp-row__dot--progress { background: var(--gaming-warning, #f59e0b); box-shadow: 0 0 0 3px rgba(245,158,11,0.14); }
.ds2-sp-row__dot--resolved { background: var(--gaming-success, #10d9a0); box-shadow: 0 0 0 3px rgba(16,217,160,0.12); }
.ds2-sp-row__title {
  flex: 1; min-width: 0; font-size: 0.8rem; font-weight: 600; color: rgba(255,255,255,0.78);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ds2-sp-row:hover .ds2-sp-row__title { color: #fff; }
.ds2-sp-row__id {
  font-family: var(--mono);
  font-size: 0.7rem; color: var(--gaming-text-dim); flex-shrink: 0;
}
.ds2-sp-row__time { font-size: 0.7rem; color: var(--gaming-text-dim); flex-shrink: 0; min-width: 2.2rem; text-align: right; }

/* Actions — primary button + quick-topic chips */
.ds2-sp-actions {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.7rem 0.9rem;
  margin-top: 1.3rem; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,0.06);
}
.ds2-support-preview__new {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.78rem; font-weight: 700; color: #04121a;
  background: var(--gaming-accent);
  border-radius: 11px; padding: 0.62rem 1.15rem;
  text-decoration: none; transition: filter 0.15s, transform 0.15s, box-shadow 0.15s;
}
.ds2-support-preview__new:hover {
  filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,207,255,0.25);
}
.ds2-support-preview__new > svg { flex-shrink: 0; }
.ds2-sp-quick { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; }
.ds2-sp-quick__label {
  font-size: 0.6rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--gaming-text-dim); margin-right: 0.15rem;
}
.ds2-sp-chip {
  font-size: 0.72rem; font-weight: 600; color: rgba(255,255,255,0.62);
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 999px; padding: 0.4rem 0.8rem; text-decoration: none;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.ds2-sp-chip:hover { color: #fff; border-color: rgba(0,207,255,0.4); background: rgba(0,207,255,0.08); }

@media (prefers-reduced-motion: reduce) {
  .ds2-support-preview__dot, .ds2-sp-focus__badge-dot { animation: none; }
  .ds2-sp-focus, .ds2-sp-focus__cta, .ds2-sp-row { transition: none; }
}

@media (max-width: 560px) {
  .ds2-support-preview { padding: 1.2rem 1.15rem; }
  .ds2-support-preview__head { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .ds2-sp-actions { flex-direction: column; align-items: stretch; }
  .ds2-support-preview__new { justify-content: center; }
  .ds2-sp-quick { justify-content: flex-start; }
}

/* в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ
   Dashboard — full interaction & data states (P1 #15)
   Hover is defined per-component above. This block adds accessible
   keyboard focus, plus loading / error / empty scaffolding so the
   backend can toggle states without new CSS.
   в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ */

/* Accessible keyboard focus ring for all dashboard interactive controls */
.ds2-nav__item:focus-visible,
.ds2-tab:focus-visible,
.dash-sub__btn:focus-visible,
.dash-save-btn:focus-visible,
.dash-danger-btn:focus-visible,
.ref-all-modal__filter-pill:focus-visible,
.ref-datepicker__trigger:focus-visible,
.ords-pill:focus-visible,
.ords-pag-btn:focus-visible,
.ref-all-modal__page-btn:focus-visible,
.ref-all-modal__search-field:focus-visible,
.ds2-support-preview__link:focus-visible,
.ds2-support-preview__new:focus-visible,
.ds2-sp-focus:focus-visible,
.ds2-sp-row:focus-visible,
.ds2-sp-chip:focus-visible,
[data-section]:focus-visible,
[data-section-link]:focus-visible {
  outline: 2px solid var(--gaming-accent, #00cfff);
  outline-offset: 2px;
  border-radius: 8px;
}
/* Keep the pill shape on focus (shared rule above squares it to 8px) */
.ds2-support-preview__link:focus-visible { border-radius: 999px; }
/* Drop the mouse-only outline, keep the keyboard ring */
.ds2-nav__item:focus:not(:focus-visible),
.ords-pill:focus:not(:focus-visible),
.ref-all-modal__filter-pill:focus:not(:focus-visible) { outline: none; }

/* в”Ђв”Ђ Loading skeleton (async-backed tables/sections) в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
/* TODO: BACKEND — toggle .is-loading on a section/table wrapper while
   fetching; render .skeleton placeholders, remove once data arrives. */
.is-loading { position: relative; pointer-events: none; }
.skeleton {
  display: block; border-radius: 6px;
  background: linear-gradient(90deg,
    rgba(255,255,255,0.05) 25%,
    rgba(255,255,255,0.10) 37%,
    rgba(255,255,255,0.05) 63%);
  background-size: 400% 100%;
  animation: ds-skeleton-shimmer 1.4s ease infinite;
}
.skeleton--text { height: 0.72rem; margin: 0.35rem 0; }
.skeleton--row  { height: 2.4rem; margin: 0.4rem 0; }
@keyframes ds-skeleton-shimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* в”Ђв”Ђ Error / empty states (data failed or none) в”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђв”Ђ */
/* TODO: BACKEND — render .ds-state--error inside a section/table body
   on fetch failure and wire .ds-state__retry to re-request the data. */
.ds-state {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 0.7rem; padding: 2.5rem 1rem;
  text-align: center; color: rgba(255,255,255,0.6); font-size: 0.82rem;
}
.ds-state__icon { color: rgba(255,255,255,0.25); }
.ds-state--error .ds-state__icon { color: var(--gaming-warning, #f59e0b); }
.ds-state--empty .ds-state__icon { color: rgba(255,255,255,0.2); }
.ds-state__title { font-size: 0.92rem; font-weight: 700; color: rgba(255,255,255,0.7); }
.ds-state__retry {
  margin-top: 0.3rem; font-size: 0.74rem; font-weight: 700;
  color: var(--gaming-accent, #00cfff);
  background: rgba(0,207,255,0.1);
  border: 1px solid rgba(0,207,255,0.3);
  border-radius: 9px; padding: 0.45rem 1rem; cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.ds-state__retry:hover { background: rgba(0,207,255,0.18); border-color: rgba(0,207,255,0.5); }
.ds-state__retry:focus-visible { outline: 2px solid var(--gaming-accent, #00cfff); outline-offset: 2px; }

/* Reduced motion: freeze skeleton shimmer */
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none !important; background-position: 0 50% !important; }
}

/* в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ
   Mobile dashboard navigation — off-canvas drawer (P1 #13)
   At ≤1024px the sidebar was display:none with no replacement, so
   sections were unreachable. It now slides in as a drawer, opened
   from a sticky mobile bar; the existing .ds2-nav__item handlers and
   hash routing are reused unchanged.
   в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ */
.ds2-mobilebar { display: none; }
.ds2-menu-toggle { display: none; }
.ds2-nav-backdrop { display: none; }

@media (max-width: 1024px) {
  .ds2-mobilebar {
    display: flex; align-items: center; gap: 0.7rem;
    position: sticky; top: 56px; z-index: 40;
    padding: 0.6rem 1rem;
    background: rgba(6,9,18,0.92);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255,255,255,0.07);
  }
  .ds2-menu-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; flex-shrink: 0;
    color: rgba(255,255,255,0.85);
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px; cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
  }
  .ds2-menu-toggle:hover { background: rgba(255,255,255,0.09); }
  .ds2-menu-toggle:focus-visible { outline: 2px solid var(--gaming-accent, #00cfff); outline-offset: 2px; }
  .ds2-mobilebar__title {
    font-family: var(--display); font-size: 0.95rem; font-weight: 800;
    color: #fff; letter-spacing: 0.01em;
  }

  /* Sidebar в†’ off-canvas drawer */
  .ds2-sidebar {
    display: flex !important;
    position: fixed; top: 0; left: 0; z-index: 60;
    width: 270px; max-width: 84vw; height: 100vh;
    margin: 0; border-right: 1px solid rgba(255,255,255,0.1);
    background: rgba(8,11,20,0.98);
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 40px rgba(0,0,0,0.5);
  }
  .ds2-sidebar--open { transform: translateX(0); }

  .ds2-nav-backdrop {
    display: block; position: fixed; inset: 0; z-index: 55;
    background: rgba(0,0,0,0.55);
    opacity: 0; pointer-events: none;
    transition: opacity 0.28s ease;
  }
  .ds2-nav-backdrop--open { opacity: 1; pointer-events: auto; }

  body.ds2-nav-locked { overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .ds2-sidebar { transition: none !important; }
  .ds2-nav-backdrop { transition: none !important; }
}

/* в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ
   Store features (P1 #17): order-detail modal, invoice print,
   subscription meta (status/build/HWID), account sessions.
   в•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђв•ђ */

/* в”Ђв”Ђ Clickable order rows + inline Details button (#17b) в”Ђв”Ђ */
.order-row { cursor: pointer; transition: background 0.13s; }
.order-row:hover { background: rgba(255,255,255,0.035); }
.order-row:focus-visible { outline: 2px solid var(--gaming-accent, #00cfff); outline-offset: -2px; }
.order-details-btn {
  font-size: 0.7rem; font-weight: 600; padding: 3px 11px; border-radius: 7px;
  background: rgba(0,207,255,0.1); border: 1px solid rgba(0,207,255,0.24);
  color: var(--gaming-accent-light, #5fdcff); cursor: pointer; transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.order-details-btn:hover { background: rgba(0,207,255,0.2); border-color: rgba(0,207,255,0.4); }
.order-details-btn:focus-visible { outline: 2px solid var(--gaming-accent, #00cfff); outline-offset: 2px; }

/* в”Ђв”Ђ Order-detail modal (#17b) в”Ђв”Ђ */
.odt-modal { position: fixed; inset: 0; z-index: 950; display: none; align-items: center; justify-content: center; }
.odt-modal--open { display: flex; }
.odt-modal__backdrop { position: absolute; inset: 0; background: rgba(6,9,18,0.78); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.odt-modal__panel {
  position: relative; z-index: 1;
  background: var(--gaming-bg-light, #0a0d17);
  border: 1px solid rgba(255,255,255,0.1); border-radius: 18px;
  width: min(92vw, 560px); max-height: 88vh;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 24px 70px rgba(0,0,0,0.55);
}
.odt-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.5rem; border-bottom: 1px solid rgba(255,255,255,0.07); flex-shrink: 0; }
.odt-modal__title { font-family: var(--display); font-size: 1rem; font-weight: 800; color: #fff; margin: 0; }
.odt-modal__subtitle { font-size: 0.78rem; color: rgba(255,255,255,0.6); margin-top: 0.2rem; font-family: var(--display); font-weight: 600; letter-spacing: 0.02em; }
.odt-modal__close {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 30px; height: 30px; border-radius: 8px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.5); cursor: pointer; transition: background 0.15s, color 0.15s;
}
.odt-modal__close:hover { background: rgba(255,255,255,0.1); color: #fff; }
.odt-modal__close:focus-visible { outline: 2px solid var(--gaming-accent, #00cfff); outline-offset: 2px; }
.odt-modal__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
/* overflow:hidden на блоках внутри flex-колонки иначе сжимает их ниже контента */
.odt-modal__body > * { flex-shrink: 0; min-height: min-content; }

.odt-meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.85rem; }
.odt-meta__item { display: flex; flex-direction: column; gap: 0.2rem; }
.odt-meta__label { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--gaming-text-dim); }
.odt-meta__val { font-size: 0.85rem; font-weight: 600; color: #fff; line-height: 1.35; }

.odt-items {
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  overflow: visible;
  display: flex !important;
  flex-direction: column;
  flex: 0 0 auto !important;
  width: 100%;
  height: auto !important;
  max-height: none !important;
}
#odt-items-list {
  display: flex !important;
  flex-direction: column;
  flex: 0 0 auto !important;
  width: 100%;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}
.odt-items__head {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.55rem 0.9rem;
  background: rgba(255,255,255,0.03);
  font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--gaming-text-dim);
  flex: 0 0 auto;
  border-radius: 12px 12px 0 0;
}
.odt-items__row {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.8rem 0.9rem !important;
  font-size: 0.82rem !important;
  line-height: 1.45 !important;
  color: rgba(255,255,255,0.8);
  border-top: 1px solid rgba(255,255,255,0.05);
  min-height: 2.75rem !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  box-sizing: border-box;
  flex: 0 0 auto !important;
}
.odt-items__row > span:first-child {
  flex: 1 1 auto;
  min-width: 0;
  word-break: break-word;
  line-height: 1.45 !important;
  overflow: visible !important;
}
.odt-items__row > span:last-child {
  flex: 0 0 auto;
  font-family: var(--display); font-weight: 700; color: #fff;
  white-space: nowrap;
  line-height: 1.45 !important;
  overflow: visible !important;
}

.odt-totals { display: flex; flex-direction: column; gap: 0.4rem; }
.odt-totals__row {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  font-size: 0.82rem; line-height: 1.35; color: rgba(255,255,255,0.6);
}
.odt-totals__row span:last-child { font-family: var(--display); font-weight: 700; color: rgba(255,255,255,0.85); }
.odt-totals__row--grand { padding-top: 0.55rem; margin-top: 0.15rem; border-top: 1px solid rgba(255,255,255,0.08); font-size: 0.95rem; }
.odt-totals__row--grand span { color: #fff; line-height: 1.35; }
.odt-totals__row--grand span:last-child { color: var(--gaming-accent-light, #5fdcff); font-size: 1.05rem; }

.odt-key { display: flex; flex-direction: column; gap: 0.45rem; padding: 0.9rem 1rem; border: 1px solid rgba(16,217,160,0.18); background: rgba(16,217,160,0.04); border-radius: 12px; }
.odt-key__label { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: rgba(16,217,160,0.8); }
.odt-key__row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.odt-key__value { flex: 1; min-width: 0; font-family: var(--mono); font-size: 0.82rem; letter-spacing: 0.04em; color: #fff; word-break: break-all; }
.odt-key__btn { font-size: 0.68rem; font-weight: 600; padding: 4px 11px; border-radius: 7px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.7); cursor: pointer; transition: background 0.15s, color 0.15s; }
.odt-key__btn:hover { background: rgba(255,255,255,0.1); color: #fff; }
.odt-key__btn:focus-visible { outline: 2px solid var(--gaming-accent, #00cfff); outline-offset: 2px; }
.odt-key__status { font-size: 0.68rem; color: rgba(255,255,255,0.6); min-height: 0.9rem; }
.odt-key__status--active { color: rgba(16,217,160,0.9); font-weight: 600; }

/* Refund request block (#46) */
.odt-refund {
  margin-top: 1.1rem;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  background: rgba(255,255,255,0.02);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.odt-refund[hidden] { display: none !important; }
.odt-refund__head { display: flex; align-items: center; gap: 0.45rem; color: #fff; margin: 0; }
.odt-refund__title { font-size: 0.82rem; font-weight: 800; font-family: var(--display); }
.odt-refund__note { font-size: 0.76rem; line-height: 1.5; color: rgba(255,255,255,0.5); margin: 0; }
.odt-refund__actions { display: flex; }
.odt-refund__actions[hidden],
.odt-refund__actions[style*="display: none"] { display: none !important; }
.odt-refund__open, .odt-refund__support {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.78rem; font-weight: 700; font-family: var(--body);
  padding: 0.58rem 1.05rem; border-radius: 10px; cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.odt-refund__open {
  border: 1px solid rgba(245,158,11,0.45);
  background: rgba(245,158,11,0.12);
  color: #f5b341;
}
.odt-refund__open:hover { background: rgba(245,158,11,0.2); }
.odt-refund__support {
  border: 1px solid rgba(var(--gaming-cta-rgb),0.4);
  background: rgba(var(--gaming-cta-rgb),0.12);
  color: #8b85ff;
}
.odt-refund__support:hover { background: rgba(var(--gaming-cta-rgb),0.2); }
.odt-refund__open:active, .odt-refund__support:active { transform: translateY(1px); }
.odt-refund__form {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin: 0;
  padding-top: 0.15rem;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.odt-refund__form[hidden],
.odt-refund__success[hidden] { display: none !important; }
.odt-refund__label {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em;
  color: rgba(255,255,255,0.55); margin: 0.15rem 0 0;
}
.odt-refund__select, .odt-refund__text {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 9px;
  color: #fff;
  font-size: 0.8rem;
  font-family: var(--body);
  padding: 0.65rem 0.75rem;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
.odt-refund__select:focus, .odt-refund__text:focus {
  border-color: rgba(var(--gaming-cta-rgb),0.55);
  background: rgba(255,255,255,0.045);
}
.odt-refund__text { resize: vertical; min-height: 3.4rem; }
.odt-refund__text::placeholder { color: rgba(255,255,255,0.38); }
/* Native <option> popup follows the dark theme (Chromium/Firefox honor color-scheme;
   explicit option colors are a fallback for engines that style the list directly). */
.odt-refund__select, .ords-sort, .ref-all-modal__filter-select { color-scheme: dark; }
.odt-refund__select option, .ords-sort option, .ref-all-modal__filter-select option { background-color: #0a0d17; color: #fff; }
.odt-refund__select option:checked, .ords-sort option:checked, .ref-all-modal__filter-select option:checked { background-color: var(--gaming-cta); color: #fff; }
.odt-refund__form-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.25rem;
}
.odt-refund__cancel, .odt-refund__submit {
  font-size: 0.76rem; font-weight: 700; font-family: var(--body);
  padding: 0.55rem 1rem; border-radius: 9px; cursor: pointer; transition: all 0.15s;
}
.odt-refund__cancel {
  border: 1px solid rgba(255,255,255,0.12); background: transparent; color: rgba(255,255,255,0.55);
}
.odt-refund__cancel:hover { color: #fff; border-color: rgba(255,255,255,0.25); }
.odt-refund__submit {
  border: none; background: linear-gradient(135deg, var(--gaming-cta) 0%, #5a52e0 100%); color: #fff;
}
.odt-refund__submit:hover { filter: brightness(1.08); }
.odt-refund__submit:disabled { opacity: 0.55; cursor: not-allowed; filter: none; }
.odt-refund__success {
  display: flex; align-items: flex-start; gap: 0.5rem;
  font-size: 0.78rem; font-weight: 600; line-height: 1.45;
  color: #10d9a0;
  margin: 0;
}
.odt-refund__success svg { flex-shrink: 0; margin-top: 0.1rem; }

.odt-modal__foot { display: flex; align-items: center; justify-content: flex-end; gap: 0.6rem; flex-wrap: wrap; padding: 1rem 1.5rem; border-top: 1px solid rgba(255,255,255,0.07); flex-shrink: 0; }
.odt-foot-btn { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; font-weight: 700; padding: 0.6rem 1.1rem; border-radius: 10px; cursor: pointer; transition: background 0.15s, border-color 0.15s, transform 0.1s; }
.odt-foot-btn:active { transform: translateY(1px); }
.odt-foot-btn:focus-visible { outline: 2px solid var(--gaming-accent, #00cfff); outline-offset: 2px; }
.odt-foot-btn--ghost { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.7); }
.odt-foot-btn--ghost:hover { background: rgba(255,255,255,0.09); color: #fff; }
.odt-foot-btn--primary { background: linear-gradient(135deg, rgba(var(--gaming-cta-rgb),0.9), rgba(0,207,255,0.85)); border: 1px solid rgba(var(--gaming-cta-rgb),0.5); color: #fff; }
.odt-foot-btn--primary:hover { filter: brightness(1.08); }
.odt-foot-btn svg { width: 15px; height: 15px; }
body.odt-modal-open { overflow: hidden; }

/* в”Ђв”Ђ Subscription meta: status / build / HWID (#17f-h) в”Ђв”Ђ */
.dash-sub__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 0.7rem; margin-top: 0.85rem; padding-top: 0.85rem; border-top: 1px solid rgba(255,255,255,0.06); }
.dash-sub__det { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 3px 9px; border-radius: 20px; }
.dash-sub__det-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.dash-sub__det--ok { background: rgba(16,217,160,0.1); color: rgba(16,217,160,0.95); }
.dash-sub__det--ok .dash-sub__det-dot { background: #10d9a0; box-shadow: 0 0 0 3px rgba(16,217,160,0.18); }
.dash-sub__det--updating { background: rgba(251,191,36,0.1); color: rgba(251,191,36,0.95); }
.dash-sub__det--updating .dash-sub__det-dot { background: #fbbf24; box-shadow: 0 0 0 3px rgba(251,191,36,0.18); }
.dash-sub__build { font-size: 0.68rem; color: var(--gaming-text-dim); font-family: var(--display); font-weight: 600; }
.dash-sub__sum { color: var(--gaming-text-dim); font-family: var(--mono); font-size: 0.64rem; }
.dash-sub__hwid { display: inline-flex; align-items: center; gap: 0.3rem; margin-left: auto; font-size: 0.68rem; font-weight: 600; padding: 4px 10px; border-radius: 8px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.6); cursor: pointer; transition: background 0.15s, color 0.15s; }
.dash-sub__hwid svg { width: 13px; height: 13px; }
.dash-sub__hwid:hover { background: rgba(255,255,255,0.09); color: #fff; }
.dash-sub__hwid:focus-visible { outline: 2px solid var(--gaming-accent, #00cfff); outline-offset: 2px; }
.dash-sub__hwid-left { color: var(--gaming-text-dim); }
.dash-sub__hwid--spent { opacity: 0.45; cursor: not-allowed; }
.dash-sub__hwid--spent:hover { background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.6); }

/* в”Ђв”Ђ Account: active sessions (#17i) в”Ђв”Ђ */
.dash-sessions { margin: 1.25rem 0; }
.dash-sessions__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.75rem; }
.dash-sessions__title { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gaming-text-dim); }
.dash-sessions__signout { font-size: 0.7rem; font-weight: 600; padding: 4px 11px; border-radius: 8px; background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.22); color: rgba(239,68,68,0.85); cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.dash-sessions__signout:hover { background: rgba(239,68,68,0.16); border-color: rgba(239,68,68,0.4); }
.dash-sessions__signout:focus-visible { outline: 2px solid #ef4444; outline-offset: 2px; }
.dash-sessions__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.dash-session { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 0.85rem; border: 1px solid rgba(255,255,255,0.07); border-radius: 12px; background: rgba(255,255,255,0.02); overflow: hidden; }
.dash-session--current { border-color: rgba(16,217,160,0.22); background: rgba(16,217,160,0.04); }
.dash-session__icon { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex-shrink: 0; border-radius: 9px; background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.6); }
.dash-session--current .dash-session__icon { color: rgba(16,217,160,0.9); background: rgba(16,217,160,0.1); }
.dash-session__info { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; flex: 1; }
.dash-session__info strong { font-size: 0.82rem; font-weight: 600; color: #fff; }
.dash-session__sub { font-size: 0.68rem; color: rgba(255,255,255,0.6); }
.dash-session__badge { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 3px 9px; border-radius: 20px; background: rgba(16,217,160,0.12); color: rgba(16,217,160,0.95); flex-shrink: 0; }
.dash-session__revoke { font-size: 0.68rem; font-weight: 600; padding: 4px 11px; border-radius: 8px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.55); cursor: pointer; transition: background 0.15s, color 0.15s; flex-shrink: 0; }
.dash-session__revoke:hover { background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.3); color: rgba(239,68,68,0.9); }
.dash-session__revoke:focus-visible { outline: 2px solid var(--gaming-accent, #00cfff); outline-offset: 2px; }

/* ── Invoice print template (#17c) — hidden on screen, shown on print ── */
.invoice-print { display: none; }
@media print {
  body * { visibility: hidden; }
  .invoice-print, .invoice-print * { visibility: visible; }
  .invoice-print { display: block; position: absolute; inset: 0; padding: 2.5rem; background: #fff; color: #111; font-family: Georgia, "Times New Roman", serif; }
  .invoice-print__inner { max-width: 720px; margin: 0 auto; }
  .invoice-print__head { display: flex; align-items: flex-start; justify-content: space-between; padding-bottom: 1.5rem; border-bottom: 2px solid #111; margin-bottom: 1.5rem; }
  .invoice-print__brand { font-size: 1.6rem; font-weight: 800; letter-spacing: 0.02em; }
  .invoice-print__doc { text-align: right; font-size: 0.85rem; color: #333; }
  .invoice-print__doc-title { font-size: 1.1rem; font-weight: 800; letter-spacing: 0.12em; color: #111; margin-bottom: 0.35rem; }
  .invoice-print__table { width: 100%; border-collapse: collapse; margin-bottom: 1.25rem; font-size: 0.9rem; }
  .invoice-print__table th { text-align: left; border-bottom: 1px solid #111; padding: 0.5rem 0; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; }
  .invoice-print__table td { padding: 0.5rem 0; border-bottom: 1px solid #ddd; }
  .invoice-print__table th:last-child, .invoice-print__table td:last-child { text-align: right; }
  .invoice-print__totals { width: 100%; max-width: 280px; margin-left: auto; border-collapse: collapse; font-size: 0.9rem; }
  .invoice-print__totals td { padding: 0.35rem 0; }
  .invoice-print__totals td:last-child { text-align: right; font-weight: 700; }
  .invoice-print__grand td { border-top: 2px solid #111; font-size: 1.05rem; font-weight: 800; padding-top: 0.6rem; }
  .invoice-print__meta { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid #ddd; font-size: 0.8rem; color: #444; line-height: 1.6; }
}

/* =========================================================
   REFACTOR 2026-07 — audit fixes (mobile, touch, a11y)
   ========================================================= */

/* Cart dropdown — full-width sheet on small screens.
   Was a fixed 360px absolute panel clipped on <360px viewports. */
@media (max-width: 480px) {
  .cart-dropdown {
    position: fixed;
    left: 12px;
    right: 12px;
    top: 68px;
    width: auto;
    max-height: calc(100vh - 90px);
    overflow-y: auto;
  }
}

/* Compare grid — scrolls horizontally on phones instead of crushing
   three product columns into ~40px each under overflow:hidden. */
@media (max-width: 700px) {
  .cmp-grid {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    grid-template-columns: 120px repeat(3, minmax(140px, 1fr));
  }
}

/* 44px hit areas without visual change — expand via ::after.
   Static close buttons first get a positioning context. */
.cmp-picker__close,
.topprod-modal__close,
.order-modal__close,
.txn-modal__close,
.ref-all-modal__close,
.dash-expiry-banner__close { position: relative; }

.navbar__icon-btn::after,
.auth-modal__close::after,
.cmp-picker__close::after,
.dmedia-lb__close::after,
.topup-modal__close::after,
.topprod-modal__close::after,
.cc-modal__close::after,
.bal-confirm__close::after,
.order-modal__close::after,
.txn-modal__close::after,
.ref-all-modal__close::after,
.dash-expiry-banner__close::after,
.cmp-col-remove::after {
  content: "";
  position: absolute;
  inset: -7px;
}

/* Skip link — same pattern as support-center */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10001;
  background: var(--gaming-cta);
  color: #fff;
  padding: 0.6rem 1.1rem;
  border-radius: 0 0 10px 0;
  font-weight: 700;
  font-size: 0.9rem;
}
.skip-link:focus { left: 0; }

/* Visible focus for notification items (was a 4%-white bg change) */
.notif-item:focus-visible {
  outline: 2px solid var(--gaming-accent);
  outline-offset: -2px;
}

/* Navbar min-content exceeded small viewports (~490px), forcing every
   page to zoom out on phones. Trim non-essential chrome under 520px:
   balance lives in the dashboard, support stays in footer + mobile menu. */
@media (max-width: 520px) {
  .navbar__container { padding: 0 1rem; }
  .navbar__actions { gap: 0.45rem; }
  .navbar__balance,
  .navbar__support { display: none; }
  body.is-logged-in .navbar__balance,
  body.is-logged-in .navbar__support { display: none; }
}

/* Order detail — loader download + setup guide */
.odt-dl {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-top: 0;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(var(--gaming-cta-rgb), 0.22);
  background: rgba(var(--gaming-cta-rgb), 0.05);
  border-radius: 12px;
}
.odt-dl[hidden] { display: none !important; }
.odt-dl__label {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: rgba(var(--gaming-cta-rgb), 0.95);
}
.odt-dl__row { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.odt-dl__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 9px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.85);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.odt-dl__btn:hover { background: rgba(255,255,255,0.1); color: #fff; }
.odt-dl__btn:focus-visible { outline: 2px solid var(--gaming-accent); outline-offset: 2px; }
.odt-dl__btn--primary {
  background: linear-gradient(135deg, var(--gaming-cta) 0%, var(--gaming-cta-dark) 100%);
  border-color: rgba(var(--gaming-cta-rgb), 0.6);
  color: #fff;
}
.odt-dl__btn--primary:hover { background: linear-gradient(135deg, #7b74ff 0%, #5a4de0 100%); color: #fff; }
.odt-dl__btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
.odt-dl__note { font-size: 0.68rem; color: rgba(255,255,255,0.6); }

/* Success/delivery page — loader download + setup guide */
.st-download {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-top: 1.25rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid rgba(var(--gaming-cta-rgb), 0.22);
  background: rgba(var(--gaming-cta-rgb), 0.05);
  border-radius: var(--radius);
}
.st-download__label {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(var(--gaming-cta-rgb), 0.95);
}
.st-download__row { display: flex; gap: 0.65rem; flex-wrap: wrap; }
.st-download__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1 1 auto;
  justify-content: center;
  min-height: 44px;
  padding: 0.7rem 1.2rem;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 700;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.9);
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
}
.st-download__btn:hover { background: rgba(255,255,255,0.1); color: #fff; transform: translateY(-1px); }
.st-download__btn:focus-visible { outline: 2px solid var(--gaming-accent); outline-offset: 2px; }
.st-download__btn--primary {
  background: linear-gradient(135deg, var(--gaming-cta) 0%, var(--gaming-cta-dark) 100%);
  border-color: rgba(var(--gaming-cta-rgb), 0.6);
  color: #fff;
  box-shadow: 0 8px 24px -10px rgba(var(--gaming-cta-rgb), 0.6);
}
.st-download__btn--primary:hover { background: linear-gradient(135deg, #7b74ff 0%, #5a4de0 100%); color: #fff; }
.st-download__btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; box-shadow: none; }
.st-download__note { font-size: 0.75rem; color: var(--gaming-text-muted); }

/* Checkout — per-line quantity stepper */
.co2-qty {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  border: 1px solid var(--gaming-border);
  border-radius: 9px;
  overflow: hidden;
  flex-shrink: 0;
  height: 30px;
}
.co2-qty__btn {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  color: var(--gaming-text-muted);
  background: rgba(255,255,255,0.03);
  transition: background 0.15s, color 0.15s;
}
.co2-qty__btn:hover:not(:disabled) { background: var(--gaming-accent-soft); color: #fff; }
.co2-qty__btn:focus-visible { outline: 2px solid var(--gaming-accent); outline-offset: -2px; }
.co2-qty__btn:disabled { opacity: 0.35; cursor: not-allowed; }
.co2-qty__val {
  min-width: 30px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--gaming-text);
}

/* Checkout — loyalty discount row */
.co2-sum-loyalty .v { color: var(--gaming-success); }
.co2-loyalty-rate { color: var(--gaming-success); font-weight: 700; }

/* Cart dropdown — per-line quantity stepper */
.cart-item__qty {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-top: 0.4rem;
  border: 1px solid var(--gaming-border);
  border-radius: 8px;
  overflow: hidden;
}
.cart-item__qtybtn {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1;
  color: var(--gaming-text-muted);
  background: rgba(255,255,255,0.03);
  transition: background 0.15s, color 0.15s;
}
.cart-item__qtybtn:hover:not(:disabled) { background: var(--gaming-accent-soft); color: #fff; }
.cart-item__qtybtn:focus-visible { outline: 2px solid var(--gaming-accent); outline-offset: -2px; }
.cart-item__qtybtn:disabled { opacity: 0.35; cursor: not-allowed; }
.cart-item__qtyval {
  min-width: 26px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--gaming-text);
}

/* Product media — scrollable thumbnail strip (wheel + drag) */
.dmedia__thumbs {
  cursor: grab;
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  position: relative;
  user-select: none;
  -webkit-user-select: none;
}
.dmedia__thumbs.is-grabbing,
.dmedia__thumbs.dragging { cursor: grabbing; }
.dmedia__thumbs.is-grabbing .dmedia__thumb,
.dmedia__thumbs.dragging .dmedia__thumb { pointer-events: none; }
.dmedia__thumb img,
.dmedia__thumb-img,
.dmedia__thumb svg,
.dmedia__thumb-placeholder {
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}
/* Edge fade hints that more thumbnails exist beyond the visible strip. */
.dmedia__thumbs.has-more-end {
  -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent 100%);
          mask-image: linear-gradient(90deg, #000 82%, transparent 100%);
}
.dmedia__thumbs.has-more-start.has-more-end {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 82%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 82%, transparent 100%);
}
.dmedia__thumbs.has-more-start:not(.has-more-end) {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 12%);
}
@media (prefers-reduced-motion: reduce) {
  .dmedia__thumbs { scroll-behavior: auto; }
}

/* =========================================================
   COMPARE — real scoring, per-row winners, summary
   ========================================================= */

/* Per-row winning cell (best value for that spec) */
.cmp-cell--win {
  background: rgba(16, 217, 160, 0.08);
  box-shadow: inset 0 0 0 1px rgba(16, 217, 160, 0.28);
  position: relative;
}
.cmp-cell--win::after {
  content: "";
  position: absolute;
  top: 6px; right: 6px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gaming-success);
  box-shadow: 0 0 8px rgba(16, 217, 160, 0.8);
}

/* Capability score bar */
.cmp-score { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; }
.cmp-score__bar {
  width: 100%;
  max-width: 96px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}
.cmp-score__bar > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gaming-cta), var(--gaming-accent));
}
.cmp-score__num {
  font-family: 'Unbounded', sans-serif;
  font-weight: 800;
  font-size: 1rem;
  color: #fff;
  letter-spacing: -0.02em;
}
.cmp-score__num small { font-size: 0.6rem; color: var(--gaming-text-dim); font-weight: 600; margin-left: 1px; }
.cmp-score__sub { font-size: 0.62rem; color: var(--gaming-text-muted); }

/* Verdict badges */
.cmp-verdict {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 3px 8px;
  border-radius: 999px;
  margin: 2px;
  white-space: nowrap;
}
.cmp-verdict--value { background: rgba(16,217,160,0.14); color: var(--gaming-success); border: 1px solid rgba(16,217,160,0.3); }
.cmp-verdict--feat  { background: rgba(var(--gaming-cta-rgb),0.14); color: #8b85ff; border: 1px solid rgba(var(--gaming-cta-rgb),0.3); }
.cmp-verdict--cheap { background: rgba(0,207,255,0.12); color: var(--gaming-accent-light); border: 1px solid rgba(0,207,255,0.3); }
.cmp-verdict--none  { background: rgba(255,255,255,0.05); color: var(--gaming-text-muted); border: 1px solid var(--gaming-border); }

/* Shared vs differing summary bar */
.cmp-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
  margin: 0 0 1.25rem;
}
@media (max-width: 640px) { .cmp-summary { grid-template-columns: 1fr; } }
.cmp-sum-block {
  padding: 0.85rem 1rem;
  border: 1px solid var(--gaming-border);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.02);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}
.cmp-sum-head {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-right: 0.35rem;
}
.cmp-sum-head b { font-size: 0.85rem; }
.cmp-sum-head--same { color: var(--gaming-success); }
.cmp-sum-head--diff { color: var(--gaming-accent-light); }
.cmp-sum-chip {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
}
.cmp-sum-chip--same { background: rgba(16,217,160,0.1); color: rgba(16,217,160,0.9); }
.cmp-sum-chip--diff { background: rgba(0,207,255,0.08); color: var(--gaming-accent-light); }
.cmp-sum-empty { font-size: 0.72rem; color: var(--gaming-text-dim); }

/* Compare — unspecified value */
.cmp-na { color: rgba(255,255,255,0.4); }

/* Compare — valued feature + same-game picker banner */
.cmp-feat-val {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--gaming-accent-light);
  font-variant-numeric: tabular-nums;
}
.cmp-picker__gamelock {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.85rem;
  margin-bottom: 0.6rem;
  border: 1px solid rgba(0,207,255,0.25);
  background: rgba(0,207,255,0.06);
  border-radius: 10px;
  font-size: 0.78rem;
  color: var(--gaming-text-muted);
}
.cmp-picker__gamelock b { color: var(--gaming-accent-light); }
.cmp-picker__gamelock svg,
.cmp-picker__gamelock .game-icon { width: 18px; height: 18px; flex-shrink: 0; }

/* Compare — price-per-day by plan + long-term verdict */
.cmp-perday { display: flex; flex-direction: column; gap: 3px; width: 100%; max-width: 150px; margin: 0 auto; }
.cmp-perday__row {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  font-size: 0.72rem;
  padding: 2px 6px;
  border-radius: 6px;
  color: var(--gaming-text-muted);
}
.cmp-perday__k { flex: 1; text-align: left; color: var(--gaming-text-dim); }
.cmp-perday__v { color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }
.cmp-perday__row small { font-size: 0.6rem; color: var(--gaming-text-dim); }
.cmp-perday__row--best {
  background: rgba(16,217,160,0.1);
  color: var(--gaming-text);
}
.cmp-perday__row--best .cmp-perday__v { color: var(--gaming-success); }
.cmp-verdict--long { background: rgba(0,207,255,0.12); color: var(--gaming-accent-light); border: 1px solid rgba(0,207,255,0.3); }