/* ==========================================================================
   TEOTIMUR OFFICIAL TELEGRAM MINI-APP
   DESIGN SYSTEM 4.0: "ROYAL SCORPION" LUXURY PURPLE & SUNGLOW GOLD
   Dominant: #210B2C | Secondary: #BC96E6 | Accent: #FFD166
   ========================================================================== */

:root {
  /* TEOTIMUR SIGNATURE ROYAL THEME */
  --bx-bg: #14061c;
  --bx-bg-gradient: radial-gradient(ellipse at 50% -10%, #2e0e3e 0%, #14061c 75%);
  --bx-card-bg: rgba(33, 11, 44, 0.82);
  --bx-card-inner: rgba(43, 15, 58, 0.90);
  --bx-card-border: rgba(188, 150, 230, 0.25);
  --bx-card-border-glow: #bc96e6;

  --bx-fg: #ffffff;
  --bx-fg-muted: #d8c7eb;
  --bx-fg-dim: #9b81b8;

  /* SECONDARY: WISTERIA */
  --bx-secondary: #bc96e6;
  --bx-secondary-rgb: 188, 150, 230;
  --bx-secondary-glow: rgba(188, 150, 230, 0.55);

  /* ACCENT: SUNGLOW GOLD */
  --bx-accent: #ffd166;
  --bx-accent-rgb: 255, 209, 102;
  --bx-accent-glow: rgba(255, 209, 102, 0.65);
  --bx-accent-soft: rgba(255, 209, 102, 0.18);
  --bx-accent-gradient: linear-gradient(135deg, #ffd166 0%, #f59e0b 100%);
  --bx-wisteria-gradient: linear-gradient(135deg, #bc96e6 0%, #8b5cf6 100%);
  --bx-gold: #ffd166;

  --bx-red: #f43f5e;
  --bx-green: #10b981;

  --bx-radius-sm: 12px;
  --bx-radius-md: 18px;
  --bx-radius-lg: 24px;
  --bx-radius-pill: 999px;

  --bx-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --bx-font-unbounded: 'Unbounded', sans-serif;
  
  --bx-glass-shadow: 0 16px 36px rgba(0, 0, 0, 0.65), 0 0 24px rgba(188, 150, 230, 0.14);
}



* {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

  -webkit-tap-highlight-color: transparent;

  user-select: none;

}



html, body {

  width: 100%;

  min-height: 100vh;

  min-height: 100dvh;

  min-height: -webkit-fill-available;

  min-height: var(--tg-viewport-stable-height, var(--tg-viewport-height, 100vh));

  background-color: #14061c;

  background-image: 

    linear-gradient(rgba(188, 150, 230, 0.032) 1px, transparent 1px),

    linear-gradient(90deg, rgba(188, 150, 230, 0.032) 1px, transparent 1px),

    radial-gradient(ellipse at 50% 0%, #2e0e3e 0%, #14061c 75%);

  background-size: 32px 32px, 32px 32px, 100% 100%;

  background-attachment: fixed;

  color: var(--bx-fg);

  font-family: var(--bx-font);

  font-size: 13px;

  line-height: 1.4;

  -webkit-font-smoothing: antialiased;

  overflow-x: hidden;

  padding-top: env(safe-area-inset-top, 0px);

}



/* ================= 0. CINEMATIC OMONOV PRELOADER ================= */

#omonov-preloader {

  position: fixed;

  inset: 0;

  background: #120519;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  z-index: 99999;

  transition: opacity 400ms ease, transform 400ms ease, visibility 400ms ease;

}



#omonov-preloader.hidden {

  opacity: 0;

  transform: scale(1.05);

  visibility: hidden;

  pointer-events: none;

}



.logo-stage {

  position: relative;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  min-height: 90px;

  width: 100%;

}



.logo-rail {

  position: relative;

  display: flex;

  justify-content: center;

  align-items: center;

  font-family: var(--bx-font-unbounded);

  font-weight: 900;

  font-size: 38px;

  line-height: 1;

  text-transform: uppercase;

}



.logo-measure {

  position: absolute;

  visibility: hidden;

  pointer-events: none;

  left: 0;

  top: 0;

  display: flex;

  align-items: baseline;

}



.logo-row {

  position: relative;

  display: flex;

  align-items: baseline;

  flex-direction: row;

  flex-wrap: nowrap;

  justify-content: flex-start;

  will-change: transform;

}



.logo-prefix {

  display: inline-block;

  white-space: nowrap;

  color: #ffffff;

  letter-spacing: 3px;

  line-height: 1;

}



.logo-v-slot, .v-lead {

  display: inline-block;

  flex-shrink: 0;

  color: var(--bx-accent);

  letter-spacing: 0;

  line-height: 1;

}



.logo-clip {

  overflow: hidden;

  width: 0px;

  flex-shrink: 0;

  display: flex;

  align-items: baseline;

  line-height: 1;

  will-change: width;

}



.logo-clip .logo-prefix {

  display: inline-block;

}



.v-lead {

  opacity: 0;

  transform: scale(0.7);

  transform-origin: center baseline;

  text-shadow: 0 0 16px var(--bx-accent);

}



.v-lead.is-visible {

  opacity: 1;

  transform: scale(1);

  transition: opacity 300ms ease, transform 300ms ease;

}



.v-lead.glowing {

  text-shadow: 0 0 14px var(--bx-accent), 0 0 28px var(--bx-accent-glow);

}



.loader-sub-tag {

  font-family: var(--bx-font);

  font-size: 8px;

  font-weight: 800;

  letter-spacing: 2px;

  color: var(--bx-fg-dim);

  text-transform: uppercase;

  margin-top: 14px;

  opacity: 0;

  transform: translateY(6px);

  transition: opacity 400ms ease, transform 400ms ease;

}

.loader-sub-tag.show {

  opacity: 1;

  transform: translateY(0);

}



.progress-track {

  position: absolute;

  bottom: max(60px, calc(env(safe-area-inset-bottom, 0px) + 50px));

  left: 50%;

  transform: translateX(-50%);

  width: min(200px, 55vw);

  height: 3px;

  background: rgba(255, 255, 255, 0.08);

  border-radius: 2px;

  overflow: hidden;

  opacity: 0;

  transition: opacity 250ms ease;

}



.progress-fill {

  height: 100%;

  width: 0%;

  background: linear-gradient(90deg, #0284c7, var(--bx-accent), #ffffff);

  border-radius: 2px;

}



/* ================= SHELL STRUCTURE ================= */

.app-root {

  max-width: 480px;

  margin: 0 auto;

  min-height: 100vh;

  display: flex;

  flex-direction: column;

  padding: 14px 16px calc(88px + env(safe-area-inset-bottom, 14px));

}



/* ================= 1. HEADER (LUXURY FINTECH BAR) ================= */

.bx-top-header {

  display: flex;

  flex-direction: column;

  align-items: center;

  margin-bottom: 20px;

}



.bx-logo-wrap {

  text-align: center;

  margin-bottom: 16px;

}



.bx-logo-title {

  font-family: var(--bx-font-unbounded);

  font-weight: 900;

  font-size: 24px;

  letter-spacing: 3.5px;

  color: #ffffff;

  display: inline-flex;

  text-shadow: 0 0 20px rgba(255, 209, 102, 0.3);

}



.bx-logo-v {

  color: #ffd166;

  text-shadow: 0 0 14px rgba(255, 209, 102, 0.8);

}



.bx-logo-sub {

  font-size: 8.5px;

  font-weight: 800;

  letter-spacing: 2.5px;

  color: #ffd166;

  text-transform: uppercase;

  margin-top: 4px;

  text-shadow: 0 0 10px rgba(255, 209, 102, 0.5);

}



.bx-user-row {

  width: 100%;

  display: flex;

  align-items: center;

  justify-content: space-between;

  background: transparent;

  border: none;

  padding: 0 2px;

  border-radius: 0;

  box-shadow: none;

}



.bx-user-left {

  display: flex;

  align-items: center;

  gap: 12px;

}



.bx-user-avatar {

  width: 42px;

  height: 42px;

  border-radius: 50%;

  object-fit: cover;

  display: block;

  border: 2px solid #ffd166;

  box-shadow: 0 0 14px rgba(255, 209, 102, 0.45);

}



.bx-user-info {

  display: flex;

  flex-direction: column;

}



.bx-user-name {

  font-size: 15px;

  font-weight: 800;

  color: #ffffff;

  line-height: 1.2;

}



.bx-user-handle {

  font-size: 12px;

  color: #64748b;

  font-weight: 600;

}



.bx-header-controls {

  display: flex;

  align-items: center;

  gap: 8px;

}



.bx-lang-segmented {

  display: flex;

  align-items: center;

  gap: 2px;

  background: rgba(10, 20, 36, 0.85);

  border: 1px solid rgba(188, 150, 230, 0.25);

  padding: 3px;

  border-radius: 999px;

  cursor: pointer;

}



.bx-lang-pill-opt {

  font-family: var(--bx-font-unbounded);

  font-size: 10px;

  font-weight: 800;

  border-radius: 999px;

  padding: 4px 10px;

  color: #64748b;

  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);

  line-height: 1;

}



.bx-lang-pill-opt.active {

  background: #ffd166;

  color: #030814;

  font-weight: 900;

  box-shadow: 0 0 10px rgba(255, 209, 102, 0.5);

}



/* ================= 2. LUXURY ACTIVE BALANCE CARD (COMPACT) ================= */

.bx-balance-section {

  position: relative;

  background: linear-gradient(180deg, rgba(33, 11, 44, 0.72) 0%, rgba(20, 6, 28, 0.88) 100%);

  backdrop-filter: blur(20px);

  -webkit-backdrop-filter: blur(20px);

  border: 1px solid rgba(188, 150, 230, 0.2);

  border-radius: 20px;

  padding: 13px 16px 13px;

  margin-bottom: 14px;

  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05);

  overflow: hidden;

}



.bx-bal-label {

  font-family: var(--bx-font-unbounded);

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 1.2px;

  color: #64748b;

  text-transform: uppercase;

  margin-bottom: 4px;

}



.bx-bal-sum-row {

  display: flex;

  align-items: baseline;

  gap: 6px;

  margin-bottom: 12px;

}



.bx-bal-num {

  font-family: var(--bx-font-unbounded);

  font-weight: 800;

  font-size: 26px;

  line-height: 1;

  color: #ffffff;

  letter-spacing: 0.5px;

}



.bx-bal-currency {

  font-family: var(--bx-font-unbounded);

  font-weight: 800;

  font-size: 15px;

  color: #ffd166;

  text-shadow: 0 0 12px rgba(255, 209, 102, 0.55);

  margin-left: 4px;

}



.bx-bal-actions-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 8px;

}



.bx-bal-action-btn {

  background: rgba(10, 20, 38, 0.65);

  border: 1px solid rgba(188, 150, 230, 0.16);

  border-radius: 12px;

  padding: 9px 4px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 5px;

  color: #ffffff;

  cursor: pointer;

  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);

}



.bx-bal-action-btn:hover {

  border-color: #ffd166;

  background: rgba(188, 150, 230, 0.12);

  transform: translateY(-1px);

}



.bx-bal-action-btn:active {

  transform: scale(0.96);

  background: rgba(188, 150, 230, 0.2);

}



.bx-bal-action-btn svg {

  color: #ffd166;

  stroke: #ffd166;

  width: 19px;

  height: 19px;

  transition: transform 0.2s ease;

}



.bx-bal-action-btn:hover svg {

  transform: translateY(-1px);

}



.bx-bal-action-btn span {

  font-family: var(--bx-font-unbounded);

  font-size: 9.5px;

  font-weight: 800;

  color: #ffffff;

  letter-spacing: 0.3px;

  text-transform: uppercase;

}



/* ================= 3. FILTER PILL ================= */

.bx-filter-pill-wrap {

  display: flex;

  justify-content: center;

  margin-bottom: 20px;

}



.bx-filter-pill-container {

  display: inline-flex;

  align-items: center;

  background: rgba(25, 8, 34, 0.7);

  backdrop-filter: blur(16px);

  -webkit-backdrop-filter: blur(16px);

  border: 1px solid rgba(188, 150, 230, 0.2);

  border-radius: 999px;

  padding: 4px;

  gap: 4px;

  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);

}



.bx-filter-toggle-btn {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  padding: 8px 18px;

  border-radius: 999px;

  border: none;

  background: transparent;

  color: #64748b;

  font-family: var(--bx-font-unbounded);

  font-weight: 800;

  font-size: 11px;

  letter-spacing: 0.5px;

  cursor: pointer;

  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);

}



.bx-filter-toggle-btn svg {

  color: #ffd166;

  stroke: #ffd166;

}



.bx-filter-toggle-btn.active {

  background: rgba(0, 160, 240, 0.2);

  border: 1px solid rgba(255, 209, 102, 0.45);

  color: #ffffff;

  box-shadow: 0 0 14px rgba(255, 209, 102, 0.25);

}



.bx-filter-toggle-btn.active svg {

  color: #ffd166;

}



.bx-filter-toggle-btn:last-child {

  padding: 8px 14px;

}



/* ================= 4. 3-COLUMN GAMES GRID (LUXURY CARDS) ================= */

.bx-games-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 16px 12px;

  margin-bottom: 32px;

}

.bx-games-grid.is-two-items {

  grid-template-columns: repeat(2, 1fr);

  max-width: 300px;

  margin-left: auto;

  margin-right: auto;

}



.bx-game-card {

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

  background: transparent;

  border: none;

  cursor: pointer;

  position: relative;

  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);

}

.bx-game-card:hover {

  transform: translateY(-3px);

}

.bx-game-card:active {

  transform: scale(0.94);

}



.bx-game-card-icon-wrap {

  position: relative;

  width: 100%;

  aspect-ratio: 1 / 1;

  border-radius: 22px;

  overflow: hidden;

  background: #081226;

  border: 1px solid rgba(255, 255, 255, 0.1);

  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);

  margin-bottom: 8px;

  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);

}

.bx-game-card:hover .bx-game-card-icon-wrap {

  border-color: rgba(255, 209, 102, 0.5);

  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.6), 0 0 16px rgba(255, 209, 102, 0.3);

}



.bx-game-card-icon {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

}



.bx-game-card-overlay-badge {

  position: absolute;

  inset: 0;

  background: rgba(6, 9, 19, 0.82);

  backdrop-filter: blur(3px);

  display: flex;

  align-items: center;

  justify-content: center;

  font-family: var(--bx-font-unbounded);

  font-weight: 900;

  font-size: 9.5px;

  line-height: 1.2;

  color: #ffffff;

  text-transform: uppercase;

  text-align: center;

  padding: 6px;

}



.bx-game-card-title {

  font-family: var(--bx-font-unbounded);

  font-weight: 800;

  font-size: 9.5px;

  line-height: 1.25;

  color: #ffffff;

  text-transform: uppercase;

  letter-spacing: 0.3px;

  max-width: 100%;

  overflow: hidden;

  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

}



/* Footer promo */

.bx-footer-promo-card {

  background: var(--bx-card-bg);

  backdrop-filter: blur(16px);

  -webkit-backdrop-filter: blur(16px);

  border: 2px solid var(--bx-card-border);

  border-radius: var(--bx-radius-lg);

  padding: 22px 20px;

  text-align: center;

  margin-top: 10px;

  box-shadow: var(--bx-glass-shadow);

}

.bx-footer-logo {

  font-family: var(--bx-font-unbounded);

  font-weight: 900;

  font-size: 16px;

  letter-spacing: 2.5px;

  color: #fff;

}



.bx-footer-logo-sub {

  font-size: 8px;

  font-weight: 800;

  letter-spacing: 2px;

  color: var(--bx-accent);

  margin-top: 3px;

  margin-bottom: 8px;

}

.bx-footer-desc {

  font-size: 11px;

  color: var(--bx-fg-muted);

  line-height: 1.5;

}



.bx-footer-channels {

  display: flex;

  justify-content: center;

  gap: 10px;

  margin-top: 14px;

  flex-wrap: wrap;

}

.bx-footer-channel-link {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  background: var(--bx-card-inner);

  border: 1.5px solid var(--bx-card-border);

  border-radius: var(--bx-radius-pill);

  padding: 6px 14px;

  font-size: 11px;

  font-weight: 700;

  color: #93c5fd;

  text-decoration: none;

  transition: all 0.2s ease;

}

.bx-footer-channel-link:hover, .bx-footer-channel-link:active {

  border-color: #3b82f6;

  background: var(--bx-accent-soft);

  color: #ffffff;

  transform: translateY(-1px);

}

.bx-footer-channel-link svg {

  color: #60a5fa;

}



/* ================= 5. HISTORY VIEW ================= */

.bx-view-page-title {

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 2px;

  color: var(--bx-fg-muted);

  text-transform: uppercase;

  margin-bottom: 12px;

}



/* Segmented switch (ALL / TOPUPS / PURCHASES) */

.bx-tabs-segmented {

  display: flex;

  background: var(--bx-card-bg);

  backdrop-filter: blur(16px);

  -webkit-backdrop-filter: blur(16px);

  border: 2px solid var(--bx-card-border);

  border-radius: var(--bx-radius-pill);

  padding: 4px;

  margin-bottom: 12px;

  box-shadow: var(--bx-glass-shadow);

}



.bx-tab-seg {

  flex: 1;

  padding: 8px 6px;

  border-radius: var(--bx-radius-pill);

  border: none;

  background: transparent;

  color: var(--bx-fg-muted);

  font-family: var(--bx-font-unbounded);

  font-weight: 800;

  font-size: 10px;

  letter-spacing: 0.5px;

  cursor: pointer;

  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);

  text-align: center;

}



.bx-tab-seg.active {

  background: var(--bx-accent-gradient);

  color: #ffffff;

  box-shadow: 0 4px 14px var(--bx-accent-soft);

}



.bx-status-chips-row {

  display: flex;

  gap: 8px;

  overflow-x: auto;

  padding-bottom: 6px;

  margin-bottom: 16px;

  scrollbar-width: none;

}

.bx-status-chips-row::-webkit-scrollbar { display: none; }



.bx-chip-btn {

  flex-shrink: 0;

  background: var(--bx-card-inner);

  border: 1.5px solid var(--bx-card-border);

  border-radius: var(--bx-radius-pill);

  padding: 7px 16px;

  color: var(--bx-fg-muted);

  font-size: 11px;

  font-weight: 700;

  cursor: pointer;

  transition: all 0.2s ease;

}



.bx-chip-btn.active {

  background: var(--bx-accent-soft);

  border-color: #60a5fa;

  color: #ffffff;

  box-shadow: 0 0 12px var(--bx-accent-soft);

}



.bx-tx-feed {

  display: flex;

  flex-direction: column;

  gap: 12px;

}



.bx-tx-card {

  background: var(--bx-card-bg);

  backdrop-filter: blur(16px);

  -webkit-backdrop-filter: blur(16px);

  border: 2px solid var(--bx-card-border);

  border-radius: var(--bx-radius-md);

  padding: 16px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  box-shadow: var(--bx-glass-shadow);

}



.bx-tx-left {

  display: flex;

  align-items: center;

  gap: 12px;

}



.bx-tx-icon-plus {

  width: 40px;

  height: 40px;

  border-radius: 50%;

  background: var(--bx-accent-soft);

  border: 1.5px solid #60a5fa;

  display: grid;

  place-items: center;

  color: #60a5fa;

  font-size: 20px;

  font-weight: 300;

}



.bx-tx-main-col {

  display: flex;

  flex-direction: column;

  gap: 3px;

}



.bx-tx-title {

  font-family: var(--bx-font-unbounded);

  font-weight: 900;

  font-size: 11.5px;

  color: #ffffff;

  letter-spacing: 0.2px;

}



.bx-tx-date {

  font-size: 10.5px;

  color: var(--bx-fg-muted);

}



.bx-tx-method-badge {

  align-self: flex-start;

  background: var(--bx-card-inner);

  border-radius: var(--bx-radius-pill);

  padding: 2px 8px;

  font-size: 8.5px;

  font-weight: 800;

  color: #60a5fa;

  text-transform: uppercase;

  margin-top: 2px;

}



.bx-tx-right {

  display: flex;

  flex-direction: column;

  align-items: flex-end;

  gap: 4px;

}



.bx-tx-amount {

  font-family: var(--bx-font-unbounded);

  font-weight: 900;

  font-size: 13px;

  color: #ffffff;

}



.bx-tx-status-pill {

  font-size: 8.5px;

  font-weight: 900;

  text-transform: uppercase;

  border-radius: var(--bx-radius-pill);

  padding: 2px 8px;

  border: 1px solid;

}

.bx-tx-status-pill.failed {

  border-color: rgba(244, 63, 94, 0.5);

  color: var(--bx-red);

  background: rgba(244, 63, 94, 0.1);

}

.bx-tx-status-pill.completed {

  border-color: rgba(16, 185, 129, 0.5);

  color: var(--bx-green);

  background: rgba(16, 185, 129, 0.1);

}



.bx-tx-details-btn {

  display: inline-flex;

  align-items: center;

  gap: 4px;

  background: var(--bx-card-inner);

  border: 1px solid var(--bx-card-border);

  border-radius: var(--bx-radius-pill);

  padding: 4px 10px;

  color: var(--bx-fg-muted);

  font-family: var(--bx-font-unbounded);

  font-weight: 800;

  font-size: 9px;

  letter-spacing: 0.5px;

  text-transform: uppercase;

  cursor: pointer;

  margin-top: 4px;

  transition: all 0.2s ease;

}

.bx-tx-details-btn:hover {

  color: var(--bx-accent);

  border-color: var(--bx-accent-glow);

}

.bx-tx-details-btn:active {

  transform: scale(0.95);

}



/* ================= 6. CART VIEW ================= */

.bx-empty-cart-card, .bx-cart-empty-state {

  background: var(--bx-card-bg);

  backdrop-filter: blur(16px);

  -webkit-backdrop-filter: blur(16px);

  border: 2px solid var(--bx-card-border);

  border-radius: var(--bx-radius-lg);

  padding: 48px 24px 36px;

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

  margin-top: 10px;

  box-shadow: var(--bx-glass-shadow);

}



.bx-empty-cart-icon, .bx-cart-empty-circle {

  width: 84px;

  height: 84px;

  border-radius: 50%;

  background: var(--bx-accent-soft);

  border: 1.5px solid #60a5fa;

  display: grid;

  place-items: center;

  color: #60a5fa;

  margin-bottom: 20px;

}



.bx-empty-cart-title, .bx-cart-empty-title {

  font-family: var(--bx-font-unbounded);

  font-weight: 900;

  font-size: 17px;

  color: #ffffff;

  margin-bottom: 6px;

}



.bx-empty-cart-sub, .bx-cart-empty-sub {

  font-size: 11px;

  font-weight: 700;

  letter-spacing: 1px;

  color: var(--bx-fg-dim);

  margin-bottom: 24px;

}



.bx-btn-accent-big {

  width: 100%;

  max-width: 260px;

  height: 48px;

  border-radius: var(--bx-radius-pill);

  background: var(--bx-accent-gradient);

  color: #ffffff;

  font-family: var(--bx-font-unbounded);

  font-weight: 900;

  font-size: 12px;

  letter-spacing: 0.5px;

  border: none;

  cursor: pointer;

  box-shadow: 0 8px 24px var(--bx-accent-soft);

  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);

}

.bx-btn-accent-big:hover {

  transform: translateY(-2px);

  box-shadow: 0 10px 28px var(--bx-accent-glow);

}

.bx-btn-accent-big:active {

  transform: scale(0.96);

}



/* ================= 7. PROFILE VIEW ================= */

.bx-profile-card {

  background: var(--bx-card-bg);

  backdrop-filter: blur(16px);

  -webkit-backdrop-filter: blur(16px);

  border: 2px solid var(--bx-card-border);

  border-radius: var(--bx-radius-lg);

  padding: 24px 20px 20px;

  margin-bottom: 18px;

  box-shadow: var(--bx-glass-shadow);

}



.bx-card-label {

  font-size: 9px;

  font-weight: 800;

  letter-spacing: 2px;

  color: var(--bx-fg-dim);

  text-transform: uppercase;

  margin-bottom: 12px;

}



.bx-profile-user-head, .bx-profile-user-row {

  display: flex;

  align-items: center;

  gap: 16px;

}



.bx-profile-avatar-large, .bx-profile-avatar-big {

  width: 64px;

  height: 64px;

  border-radius: 50%;

  object-fit: cover;

  border: 2px solid #60a5fa;

  box-shadow: 0 0 16px var(--bx-accent-glow);

}



.bx-profile-user-titles, .bx-profile-user-meta {

  display: flex;

  flex-direction: column;

  gap: 4px;

}



.bx-profile-nick {

  font-family: var(--bx-font-unbounded);

  font-weight: 900;

  font-size: 19px;

  color: #ffffff;

}



.bx-profile-id-row {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  color: var(--bx-fg-muted);

  font-size: 12px;

  font-weight: 700;

  cursor: pointer;

}



.bx-profile-divider {

  height: 1px;

  background: rgba(147, 197, 253, 0.15);

  margin: 18px 0 14px;

}



.bx-profile-bal-row {

  display: flex;

  align-items: baseline;

  gap: 6px;

  margin-bottom: 16px;

}



.bx-profile-bal-num {

  font-family: var(--bx-font-unbounded);

  font-weight: 900;

  font-size: 34px;

  line-height: 1;

  color: #ffffff;

}



.bx-profile-bal-cur {

  font-family: var(--bx-font-unbounded);

  font-weight: 800;

  font-size: 13px;

  color: #60a5fa;

}



.bx-btn-popolnit-wide {

  width: 100%;

  height: 48px;

  border-radius: var(--bx-radius-md);

  background: var(--bx-card-inner);

  border: 2px solid var(--bx-card-border);

  color: #ffffff;

  font-family: var(--bx-font-unbounded);

  font-weight: 900;

  font-size: 11px;

  letter-spacing: 0.5px;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  cursor: pointer;

  transition: all 0.2s ease;

}

.bx-btn-popolnit-wide:active {

  transform: scale(0.97);

  background: var(--bx-accent-soft);

}



.bx-btn-popolnit-wide svg {

  color: #60a5fa;

}



.bx-options-card {

  background: var(--bx-card-bg);

  backdrop-filter: blur(16px);

  -webkit-backdrop-filter: blur(16px);

  border: 2px solid var(--bx-card-border);

  border-radius: var(--bx-radius-lg);

  padding: 16px 20px;

  box-shadow: var(--bx-glass-shadow);

}



.bx-option-item {

  width: 100%;

  display: flex;

  align-items: center;

  gap: 14px;

  padding: 14px 0;

  background: transparent;

  border: none;

  border-bottom: 1px solid rgba(147, 197, 253, 0.15);

  color: var(--bx-fg);

  text-align: left;

  cursor: pointer;

  transition: transform 0.15s ease;

}

.bx-option-item:active {

  transform: translateX(4px);

}

.bx-option-item:last-child {

  border-bottom: none;

}



.bx-opt-icon {

  width: 32px;

  height: 32px;

  color: #60a5fa;

  display: grid;

  place-items: center;

}



.bx-opt-text {

  flex: 1;

  display: flex;

  flex-direction: column;

}



.bx-opt-title {

  font-family: var(--bx-font-unbounded);

  font-weight: 800;

  font-size: 11.5px;

  color: #ffffff;

}



.bx-opt-sub {

  font-size: 11px;

  color: var(--bx-fg-muted);

}



.bx-opt-arrow {

  color: var(--bx-fg-dim);

}



/* ================= 8. FLOATING BELL ================= */

.bx-floating-bell {

  position: fixed;

  bottom: calc(76px + env(safe-area-inset-bottom, 14px));

  right: 16px;

  z-index: 45;

  width: 48px;

  height: 48px;

  border-radius: 50%;

  background: linear-gradient(135deg, #ffd166 0%, #0090ff 100%);

  color: #ffffff;

  border: none;

  display: grid;

  place-items: center;

  box-shadow: 0 4px 20px rgba(255, 209, 102, 0.6);

  cursor: pointer;

  transition: transform 0.2s ease;

}

.bx-floating-bell:active {

  transform: scale(0.92);

}

.bx-bell-dot {

  position: absolute;

  top: 9px;

  right: 11px;

  width: 6px;

  height: 6px;

  border-radius: 50%;

  background: #ffffff;

  border: 1.5px solid #ffd166;

}



/* ================= 9. FLOATING BOTTOM NAVBAR (LUXURY GLASS CAPSULE) ================= */

.bx-floating-navbar {

  position: fixed;

  bottom: 12px;

  left: 0;

  right: 0;

  z-index: 50;

  pointer-events: none;

  padding: 0 12px;

}



.bx-navbar-capsule {

  pointer-events: auto;

  max-width: 440px;

  margin: 0 auto;

  padding: 8px 10px;

  background: rgba(5, 12, 26, 0.95);

  backdrop-filter: blur(20px);

  -webkit-backdrop-filter: blur(20px);

  border: 1.5px solid rgba(188, 150, 230, 0.28);

  border-radius: var(--bx-radius-pill);

  display: flex;

  align-items: center;

  justify-content: space-around;

  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.8), 0 0 18px rgba(255, 209, 102, 0.14);

  min-height: 54px;

  box-sizing: border-box;

}



.bx-nav-item {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  padding: 8px 16px;

  border-radius: var(--bx-radius-pill);

  border: none;

  background: transparent;

  color: #ffd166;

  font-family: var(--bx-font-unbounded);

  font-weight: 800;

  font-size: 10.5px;

  letter-spacing: 0.3px;

  cursor: pointer;

  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);

  min-height: 40px;

  box-sizing: border-box;

}



.bx-nav-item svg {

  color: #ffd166;

  stroke: #ffd166;

  width: 22px;

  height: 22px;

  flex-shrink: 0;

  display: block;

}



.bx-nav-item span {

  display: none;

}



.bx-nav-item.active {

  background: rgba(0, 160, 240, 0.22);

  border: 1px solid rgba(255, 209, 102, 0.45);

  color: #ffffff;

}



.bx-nav-item.active svg {

  color: #ffd166;

}



.bx-nav-item.active span {

  display: inline-block;

  color: #ffffff;

}



/* ================= 10. PRODUCT DETAIL MODAL ================= */

.bx-product-sheet {

  position: fixed;

  inset: 0;

  z-index: 100;

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  opacity: 0;

  visibility: hidden;

  transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.28s;

}

.bx-product-sheet.is-open {

  opacity: 1;

  visibility: visible;

}

.bx-product-sheet[hidden] {

  display: none !important;

}



.bx-sheet-backdrop {

  position: absolute;

  inset: 0;

  background: rgba(6, 10, 20, 0.85);

  backdrop-filter: blur(8px);

  -webkit-backdrop-filter: blur(8px);

  opacity: 0;

  transition: opacity 0.28s ease;

}

.bx-product-sheet.is-open .bx-sheet-backdrop {

  opacity: 1;

}



.bx-sheet-content {

  position: relative;

  z-index: 2;

  max-width: 480px;

  width: 100%;

  margin: 0 auto;

  background: #050814;

  border: 2px solid var(--bx-card-border);

  border-radius: 28px 28px 0 0;

  max-height: 85vh;

  display: flex;

  flex-direction: column;

  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.95);

  transform: translateY(100%);

  transition: transform 0.34s cubic-bezier(0.16, 1, 0.3, 1);

  overflow: hidden;

}



/* ================= PUBG UC DEDICATED LUXURY BACKGROUND ================= */

.bx-sheet-content.has-pubg-bg {

  background-color: #03050c;

  background-image: 

    radial-gradient(circle at 50% 0%, rgba(245, 158, 11, 0.18) 0%, transparent 60%),

    linear-gradient(180deg, rgba(3, 5, 12, 0.45) 0%, rgba(3, 5, 12, 0.9) 140px, #03050c 280px),

    none;

  background-position: top center;

  background-size: 100% auto;

  background-repeat: no-repeat;

}



.bx-sheet-content.has-pubg-bg .bx-sheet-header {

  background: rgba(3, 5, 12, 0.72);

  backdrop-filter: blur(12px);

  -webkit-backdrop-filter: blur(12px);

  border-bottom: 1px solid rgba(245, 158, 11, 0.3);

}



.bx-sheet-content.has-pubg-bg .bx-pack-card {

  background: rgba(7, 12, 26, 0.88);

  border-color: rgba(245, 158, 11, 0.3);

}



.bx-sheet-content.has-pubg-bg .bx-pack-card:hover {

  border-color: #f59e0b;

  box-shadow: 0 0 16px rgba(245, 158, 11, 0.35);

}



.bx-sheet-content.has-pubg-bg .bx-pack-card.selected {

  border-color: #f59e0b;

  background: rgba(245, 158, 11, 0.18);

  box-shadow: 0 0 20px rgba(245, 158, 11, 0.45);

}

.bx-product-sheet.is-open .bx-sheet-content {

  transform: translateY(0);

}

.bx-product-sheet.is-closing .bx-sheet-content {

  transform: translateY(100%);

  transition: transform 0.26s cubic-bezier(0.4, 0, 1, 1);

}

.bx-product-sheet.is-closing .bx-sheet-backdrop {

  opacity: 0;

  transition: opacity 0.22s ease;

}



.bx-sheet-handle {

  width: 36px;

  height: 4px;

  border-radius: 2px;

  background: rgba(255, 255, 255, 0.2);

  margin: 10px auto 4px;

}



.bx-sheet-header {

  padding: 14px 20px;

  display: flex;

  align-items: center;

  gap: 12px;

  border-bottom: 1px solid rgba(147, 197, 253, 0.15);

}



.bx-modal-icon, .bx-sheet-game-icon {

  width: 42px;

  height: 42px;

  border-radius: 12px;

  object-fit: cover;

  border: 2px solid #60a5fa;

  box-shadow: 0 0 12px var(--bx-accent-soft);

}



.bx-modal-title-col, .bx-sheet-game-row {

  flex: 1;

  display: flex;

  flex-direction: column;

}



.bx-modal-title, .bx-sheet-game-name {

  font-family: var(--bx-font-unbounded);

  font-weight: 900;

  font-size: 13.5px;

  color: #ffffff;

}



.bx-modal-sub {

  font-size: 11px;

  color: var(--bx-fg-muted);

}



.bx-modal-close, .bx-sheet-close-btn {

  width: 34px;

  height: 34px;

  border-radius: 50%;

  background: var(--bx-card-inner);

  border: 1.5px solid var(--bx-card-border);

  color: var(--bx-fg-dim);

  font-size: 22px;

  cursor: pointer;

  display: grid;

  place-items: center;

  transition: all 0.2s ease;

}

.bx-modal-close:hover, .bx-sheet-close-btn:hover {

  color: #60a5fa;

  border-color: #60a5fa;

}



.bx-sheet-scroll {

  overflow-y: auto;

  overflow-x: hidden;

  scrollbar-width: none;

  -ms-overflow-style: none;

  padding: 18px 20px;

  display: flex;

  flex-direction: column;

  gap: 16px;

}

.bx-sheet-scroll::-webkit-scrollbar {

  display: none;

  width: 0;

  height: 0;

}



.bx-account-form {

  background: var(--bx-card-bg);

  border: 1.5px solid var(--bx-card-border);

  border-radius: var(--bx-radius-md);

  padding: 14px;

  width: 100%;

  box-sizing: border-box;

}



.bx-form-row {

  display: flex;

  gap: 10px;

  width: 100%;

  box-sizing: border-box;

}



.bx-input-field {

  flex: 1 1 0;

  min-width: 0;

  display: flex;

  flex-direction: column;

  gap: 6px;

}



.bx-input-field label {

  font-size: 10px;

  font-weight: 800;

  color: var(--bx-fg-muted);

  letter-spacing: 0.5px;

}



.bx-input-field input {

  width: 100%;

  box-sizing: border-box;

  background: var(--bx-card-inner);

  border: 1.5px solid var(--bx-card-border);

  border-radius: 12px;

  padding: 11px 12px;

  color: #fff;

  font-size: 12px;

  outline: none;

  transition: all 0.2s ease;

}

.bx-input-field input:focus {

  border-color: #60a5fa;

  box-shadow: 0 0 12px var(--bx-accent-soft);

}



.bx-input-field.full-width {

  flex: 1 1 100%;

}



#fieldRegionRow {

  margin-bottom: 12px;

}



.bx-field-label-row {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 7px;

}



.bx-region-chip-hint {

  font-family: var(--bx-font-unbounded);

  font-size: 8.5px;

  font-weight: 800;

  letter-spacing: 0.6px;

  color: #bc96e6;

  background: rgba(56, 189, 248, 0.12);

  border: 1px solid rgba(56, 189, 248, 0.28);

  padding: 2px 7px;

  border-radius: 6px;

  box-shadow: 0 0 10px rgba(56, 189, 248, 0.15);

  text-transform: uppercase;

}



.bx-select-wrap {

  position: relative;

  width: 100%;

  display: flex;

  align-items: center;

}



.bx-select-lead-badge {

  position: absolute;

  left: 10px;

  top: 50%;

  transform: translateY(-50%);

  width: 28px;

  height: 28px;

  border-radius: 9px;

  background: linear-gradient(135deg, rgba(59, 130, 246, 0.28), rgba(37, 99, 235, 0.12));

  border: 1px solid rgba(96, 165, 250, 0.35);

  color: #60a5fa;

  display: flex;

  align-items: center;

  justify-content: center;

  box-shadow: 0 0 12px rgba(59, 130, 246, 0.25);

  pointer-events: none;

  z-index: 2;

  transition: all 0.25s ease;

}



.bx-select-wrap:focus-within .bx-select-lead-badge {

  color: #bc96e6;

  border-color: #bc96e6;

  box-shadow: 0 0 14px rgba(56, 189, 248, 0.45);

  background: linear-gradient(135deg, rgba(56, 189, 248, 0.3), rgba(37, 99, 235, 0.2));

}



.bx-form-select {

  width: 100%;

  box-sizing: border-box;

  background: var(--bx-card-inner);

  border: 1.5px solid var(--bx-card-border);

  border-radius: 14px;

  padding: 11px 40px 11px 14px;

  color: #ffffff;

  font-size: 12.5px;

  font-weight: 700;

  outline: none;

  appearance: none;

  -webkit-appearance: none;

  cursor: pointer;

  transition: all 0.22s ease;

  font-family: inherit;

}



.bx-form-select.has-lead-icon {

  padding-left: 46px;

  padding-right: 44px;

  background: rgba(16, 26, 48, 0.85);

  border: 1.5px solid rgba(96, 165, 250, 0.28);

}



.bx-form-select:hover {

  border-color: rgba(96, 165, 250, 0.5);

}



.bx-form-select:focus,

.bx-form-select.has-lead-icon:focus {

  border-color: #bc96e6;

  background: rgba(16, 28, 54, 0.95);

  box-shadow: 0 0 16px rgba(56, 189, 248, 0.35), inset 0 0 8px rgba(56, 189, 248, 0.12);

}



.bx-form-select option {

  background: #080d1e;

  color: #ffffff;

  padding: 10px 12px;

  font-weight: 600;

}



.bx-select-arrow {

  position: absolute;

  right: 10px;

  top: 50%;

  transform: translateY(-50%);

  width: 26px;

  height: 26px;

  border-radius: 50%;

  background: rgba(59, 130, 246, 0.14);

  border: 1px solid rgba(96, 165, 250, 0.28);

  color: #93c5fd;

  display: flex;

  align-items: center;

  justify-content: center;

  pointer-events: none;

  z-index: 2;

  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);

}



.bx-select-wrap:focus-within .bx-select-arrow {

  transform: translateY(-50%) rotate(180deg);

  color: #bc96e6;

  border-color: #bc96e6;

  background: rgba(56, 189, 248, 0.2);

  box-shadow: 0 0 12px rgba(56, 189, 248, 0.4);

}



/* ================= MODAL NOTICE / GIFT CARD BANNER ================= */

.bx-modal-notice-banner {

  display: flex;

  align-items: center;

  gap: 10px;

  background: rgba(37, 99, 235, 0.14);

  border: 1.5px solid rgba(96, 165, 250, 0.35);

  border-radius: 14px;

  padding: 10px 14px;

  margin-bottom: 14px;

  font-size: 11.5px;

  line-height: 1.35;

  color: #e2e8f0;

}

.bx-modal-notice-banner .bx-notice-icon {

  font-size: 20px;

  flex-shrink: 0;

}

.bx-modal-notice-banner .bx-notice-text b {

  color: #bc96e6;

  font-family: var(--bx-font-unbounded);

  font-size: 11px;

}

.bx-modal-notice-banner .bx-notice-text span {

  color: #cbd5e1;

  font-size: 11px;

}



.bx-modal-packs-title, .bx-sheet-packs-label {

  font-family: var(--bx-font-unbounded);

  font-weight: 800;

  font-size: 10.5px;

  letter-spacing: 2px;

  color: var(--bx-fg-muted);

  text-transform: uppercase;

}



.bx-packs-grid {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 12px;

}



.bx-pack-card {

  position: relative;

  background: linear-gradient(180deg, #090e21 0%, #040714 100%);

  border: 1.5px solid rgba(255, 209, 102, 0.16);

  border-radius: 18px;

  padding: 16px 10px 14px;

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

  gap: 8px;

  cursor: pointer;

  overflow: hidden;

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 4px 16px rgba(0, 0, 0, 0.45);

  transition: all 0.24s cubic-bezier(0.16, 1, 0.3, 1);

}

.bx-pack-card::before {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  height: 45%;

  background: linear-gradient(180deg, rgba(255, 209, 102, 0.06) 0%, transparent 100%);

  border-radius: 18px 18px 0 0;

  pointer-events: none;

}

.bx-pack-card:hover {

  transform: translateY(-3px) scale(1.01);

  border-color: rgba(255, 209, 102, 0.65);

  box-shadow: 0 8px 24px rgba(255, 209, 102, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.15);

}

.bx-pack-card.selected {

  border-color: #ffd166;

  background: linear-gradient(180deg, rgba(255, 209, 102, 0.18) 0%, rgba(4, 7, 20, 0.95) 100%);

  box-shadow: 0 0 24px rgba(255, 209, 102, 0.45), inset 0 0 16px rgba(255, 209, 102, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.25);

}



.bx-pack-icon-wrap, .bx-pack-img {

  width: 54px;

  height: 54px;

  display: flex;

  align-items: center;

  justify-content: center;

  position: relative;

  background: radial-gradient(circle, rgba(255, 209, 102, 0.14) 0%, rgba(255, 209, 102, 0) 72%);

  border-radius: 50%;

  margin-bottom: 2px;

}



.bx-cur-svg {

  width: 46px;

  height: 46px;

  display: block;

  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);

  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.6));

}

.bx-pack-card:hover .bx-cur-svg,

.bx-pack-card.selected .bx-cur-svg {

  transform: scale(1.12);

  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 14px rgba(255, 209, 102, 0.5));

}



.bx-cur-real-img {

  width: 48px;

  height: 48px;

  max-width: 52px;

  max-height: 52px;

  object-fit: contain;

  display: block;

  filter: drop-shadow(0 5px 12px rgba(0, 0, 0, 0.75)) drop-shadow(0 0 10px rgba(255, 209, 102, 0.22));

  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), filter 0.28s ease;

  user-select: none;

  pointer-events: none;

}

.bx-pack-card:hover .bx-cur-real-img {

  transform: scale(1.15) translateY(-2px);

  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 18px rgba(255, 209, 102, 0.55));

}

.bx-pack-card.selected .bx-cur-real-img {

  transform: scale(1.16) translateY(-2px);

  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 22px rgba(255, 209, 102, 0.7));

}



.bx-pack-amount {

  font-family: var(--bx-font-unbounded);

  font-weight: 900;

  font-size: 12.5px;

  color: #ffd166;

  text-shadow: 0 0 12px rgba(255, 209, 102, 0.5);

  letter-spacing: -0.2px;

  line-height: 1.25;

}



.bx-pack-price {

  font-family: var(--bx-font-unbounded);

  font-weight: 800;

  font-size: 11.5px;

  color: #ffffff;

  letter-spacing: -0.2px;

  line-height: 1.2;

}



.bx-sheet-checkout-bar {

  padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0px));

  border-top: 1px solid rgba(59, 130, 246, 0.2);

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

  background: #040712;

}



.bx-checkout-total {

  display: flex;

  flex-direction: column;

}

.bx-checkout-lbl {

  font-size: 10px;

  color: var(--bx-fg-muted);

}

.bx-checkout-val {

  font-family: var(--bx-font-unbounded);

  font-weight: 900;

  font-size: 16px;

  color: #ffffff;

  text-shadow: 0 0 10px rgba(255, 255, 255, 0.2);

}



.bx-btn-checkout {

  flex: 1;

  max-width: 200px;

  height: 46px;

  border-radius: var(--bx-radius-pill);

  background: var(--bx-accent-gradient);

  color: #ffffff;

  font-family: var(--bx-font-unbounded);

  font-weight: 900;

  font-size: 11.5px;

  border: none;

  cursor: pointer;

  box-shadow: 0 4px 16px var(--bx-accent-soft);

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  transition: all 0.2s ease;

}

.bx-btn-checkout:disabled {

  opacity: 0.4;

  cursor: not-allowed;

  box-shadow: none;

}

.bx-btn-checkout.loading {

  opacity: 0.95 !important;

  background: linear-gradient(135deg, #0090ff, #ffd166) !important;

  box-shadow: 0 0 20px rgba(255, 209, 102, 0.6) !important;

  cursor: wait !important;

}

.bx-btn-spinner {

  width: 15px;

  height: 15px;

  border: 2.2px solid rgba(255, 255, 255, 0.25);

  border-top-color: #ffffff;

  border-radius: 50%;

  animation: bxBtnSpin 0.65s linear infinite;

  display: inline-block;

}

@keyframes bxBtnSpin {

  to { transform: rotate(360deg); }

}



/* ================= MODAL SUCCESS SCREEN ================= */

.bx-modal-purchase-body {

  display: flex;

  flex-direction: column;

  flex: 1;

  min-height: 0;

  transition: opacity 0.22s ease, transform 0.22s ease;

}

.bx-modal-purchase-body.is-fading {

  opacity: 0;

  transform: scale(0.97);

  pointer-events: none;

}



.bx-modal-success-body {

  display: flex;

  flex-direction: column;

  align-items: center;

  padding: 16px 20px calc(24px + env(safe-area-inset-bottom, 0px));

  animation: bxSuccessFadeUp 0.38s cubic-bezier(0.16, 1, 0.3, 1) forwards;

}



@keyframes bxSuccessFadeUp {

  0% {

    opacity: 0;

    transform: scale(0.92) translateY(24px);

  }

  100% {

    opacity: 1;

    transform: scale(1) translateY(0);

  }

}



.bx-success-anim-wrap {

  position: relative;

  width: 76px;

  height: 76px;

  margin: 6px auto 12px;

  display: flex;

  align-items: center;

  justify-content: center;

}

.bx-success-circle-glow {

  position: absolute;

  inset: -14px;

  border-radius: 50%;

  background: radial-gradient(circle, rgba(16, 185, 129, 0.45) 0%, rgba(16, 185, 129, 0) 70%);

  animation: bxGlowPulse 1.8s ease-in-out infinite alternate;

}

.bx-success-circle {

  width: 66px;

  height: 66px;

  border-radius: 50%;

  background: rgba(16, 185, 129, 0.15);

  border: 2px solid #10b981;

  display: flex;

  align-items: center;

  justify-content: center;

  box-shadow: 0 0 25px rgba(16, 185, 129, 0.4);

}

.bx-success-check-svg {

  width: 38px;

  height: 38px;

}

.bx-success-check-circle {

  stroke-dasharray: 166;

  stroke-dashoffset: 166;

  stroke-width: 2.5;

  stroke: #10b981;

  animation: bxCheckStroke 0.5s cubic-bezier(0.65, 0, 0.45, 1) forwards;

}

.bx-success-check-check {

  transform-origin: 50% 50%;

  stroke-dasharray: 48;

  stroke-dashoffset: 48;

  stroke-width: 3.5;

  stroke-linecap: round;

  stroke-linejoin: round;

  stroke: #ffffff;

  animation: bxCheckStroke 0.35s cubic-bezier(0.65, 0, 0.45, 1) 0.35s forwards;

}

@keyframes bxCheckStroke {

  100% { stroke-dashoffset: 0; }

}

@keyframes bxGlowPulse {

  0% { transform: scale(0.9); opacity: 0.5; }

  100% { transform: scale(1.25); opacity: 0.95; }

}



.bx-success-title {

  font-family: var(--bx-font-unbounded);

  font-size: 17px;

  font-weight: 900;

  color: #ffffff;

  margin: 0 0 4px;

  text-align: center;

}

.bx-success-order-id {

  font-size: 13px;

  color: #93c5fd;

  font-weight: 700;

  margin-bottom: 14px;

  text-align: center;

}



.bx-success-receipt-card {

  width: 100%;

  background: rgba(10, 16, 30, 0.85);

  border: 1px solid rgba(96, 165, 250, 0.25);

  border-radius: 18px;

  padding: 12px 16px;

  margin-bottom: 16px;

  display: flex;

  flex-direction: column;

  gap: 9px;

  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);

}

.bx-success-rc-row {

  display: flex;

  justify-content: space-between;

  align-items: center;

  font-size: 13px;

}

.bx-rc-label {

  color: #94a3b8;

  font-weight: 500;

}

.bx-rc-val {

  color: #ffffff;

  font-weight: 600;

}

.bx-rc-val.highlight {

  color: #60a5fa;

  font-weight: 700;

}

.bx-rc-val.code {

  font-family: monospace;

  background: rgba(255, 255, 255, 0.08);

  padding: 2px 7px;

  border-radius: 6px;

  color: #bc96e6;

  font-weight: 700;

}

.bx-rc-val.price {

  font-family: var(--bx-font-unbounded);

  font-size: 13.5px;

  font-weight: 900;

  color: #10b981;

}

.bx-success-rc-status {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  padding-top: 10px;

  margin-top: 3px;

  border-top: 1px dashed rgba(147, 197, 253, 0.2);

  font-size: 12px;

  font-weight: 700;

  color: #34d399;

}

.bx-pulse-dot {

  width: 8px;

  height: 8px;

  border-radius: 50%;

  background: #10b981;

  box-shadow: 0 0 10px #10b981;

  animation: bxDotPulse 1.4s infinite;

}

@keyframes bxDotPulse {

  0%, 100% { opacity: 1; transform: scale(1); }

  50% { opacity: 0.35; transform: scale(0.75); }

}



.bx-success-footer {

  width: 100%;

}

.bx-btn-success-close {

  width: 100%;

  height: 46px;

  border-radius: var(--bx-radius-pill);

  background: var(--bx-accent-gradient);

  border: none;

  color: #ffffff;

  font-family: var(--bx-font-unbounded);

  font-size: 12.5px;

  font-weight: 900;

  cursor: pointer;

  box-shadow: 0 4px 20px var(--bx-accent-soft);

  transition: transform 0.15s ease, box-shadow 0.15s ease;

}

.bx-btn-success-close:active {

  transform: scale(0.97);

}



/* ================= FLOATING TOAST BANNER ================= */

.bx-toast-container {

  position: fixed;

  top: calc(14px + env(safe-area-inset-top, 0px));

  left: 50%;

  transform: translateX(-50%);

  z-index: 9999;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 8px;

  pointer-events: none;

  width: 90%;

  max-width: 380px;

}

.bx-toast-item {

  display: flex;

  align-items: center;

  gap: 10px;

  padding: 10px 18px;

  background: rgba(15, 23, 42, 0.95);

  border: 1px solid rgba(96, 165, 250, 0.35);

  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.7), 0 0 20px rgba(59, 130, 246, 0.25);

  border-radius: 999px;

  backdrop-filter: blur(14px);

  -webkit-backdrop-filter: blur(14px);

  color: #ffffff;

  font-size: 13px;

  font-weight: 600;

  opacity: 0;

  transform: translateY(-20px) scale(0.95);

  transition: all 0.32s cubic-bezier(0.16, 1, 0.3, 1);

  pointer-events: auto;

}

.bx-toast-item.is-visible {

  opacity: 1;

  transform: translateY(0) scale(1);

}

.bx-toast-item.success {

  border-color: rgba(16, 185, 129, 0.45);

  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.7), 0 0 20px rgba(16, 185, 129, 0.35);

}

.bx-toast-item.error {

  border-color: rgba(239, 68, 68, 0.45);

  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.7), 0 0 20px rgba(239, 68, 68, 0.35);

}

.bx-toast-icon {

  font-size: 16px;

  line-height: 1;

}

.bx-toast-text {

  flex: 1;

  line-height: 1.35;

}



/* ================= 11. LUXURY TOPUP DIALOG & BOTTOM SHEET ================= */

.bx-dialog-overlay {

  position: fixed;

  inset: 0;

  z-index: 120;

  background: rgba(6, 10, 20, 0.85);

  backdrop-filter: blur(8px);

  -webkit-backdrop-filter: blur(8px);

  display: flex;

  align-items: flex-end;

  justify-content: center;

  padding: 0;

  transition: opacity 0.25s ease;

}

.bx-dialog-overlay[hidden] { display: none; }



.bx-dialog-backdrop {

  position: absolute;

  inset: 0;

}



.bx-dialog-card {

  position: relative;

  z-index: 2;

  width: 100%;

  max-width: 480px;

  background: #050814;

  border: 2px solid var(--bx-card-border);

  border-bottom: none;

  border-radius: 28px 28px 0 0;

  padding: 14px 20px calc(32px + env(safe-area-inset-bottom, 0px));

  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.8), 0 0 25px rgba(59, 130, 246, 0.35);

  max-height: 90vh;

  overflow-y: auto;

  overflow-x: hidden;

  scrollbar-width: none;

  -ms-overflow-style: none;

  animation: bxSheetSlideUp 0.26s cubic-bezier(0.16, 1, 0.3, 1);

}

.bx-dialog-card::-webkit-scrollbar { display: none; width: 0; height: 0; }



@keyframes bxSheetSlideUp {

  from { transform: translateY(100%); opacity: 0; }

  to { transform: translateY(0); opacity: 1; }

}



@media (min-width: 481px) {

  .bx-dialog-overlay {

    align-items: center;

    padding: 16px;

  }

  .bx-dialog-card {

    border-bottom: 2px solid var(--bx-card-border);

    border-radius: 26px;

    padding: 24px;

    max-height: 85vh;

  }

}



.bx-dialog-handle {

  width: 36px;

  height: 4px;

  border-radius: 2px;

  background: rgba(255, 255, 255, 0.22);

  margin: 2px auto 12px;

}



.bx-dialog-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 16px;

}

.bx-dialog-title-row {

  display: flex;

  align-items: center;

  gap: 8px;

}

.bx-dialog-icon {

  font-size: 18px;

}

.bx-dialog-title {

  font-family: var(--bx-font-unbounded);

  font-weight: 900;

  font-size: 13px;

  color: #ffffff;

  letter-spacing: 0.5px;

}



.bx-dialog-close {

  width: 32px;

  height: 32px;

  border-radius: 50%;

  background: var(--bx-card-inner);

  border: 1.5px solid var(--bx-card-border);

  color: var(--bx-fg-dim);

  font-size: 20px;

  display: grid;

  place-items: center;

  cursor: pointer;

  line-height: 1;

  transition: all 0.2s ease;

}

.bx-dialog-close:hover {

  color: #60a5fa;

  border-color: #60a5fa;

}



.bx-dialog-back-btn {

  width: 32px;

  height: 32px;

  border-radius: 50%;

  background: var(--bx-card-inner);

  border: 1.5px solid var(--bx-card-border);

  color: #60a5fa;

  display: grid;

  place-items: center;

  cursor: pointer;

  padding: 0;

  transition: all 0.2s ease;

}

.bx-dialog-back-btn:active {

  transform: scale(0.92);

  border-color: #ffd166;

}



.bx-topup-subheading {

  font-family: var(--bx-font-unbounded);

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 1.2px;

  color: var(--bx-fg-muted);

  text-transform: uppercase;

  margin-bottom: 12px;

}



/* ================= 2x2 PAYMENT METHODS GRID ================= */

.bx-pay-methods-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 10px;

  margin-bottom: 12px;

}



.bx-pay-method-card {

  position: relative;

  background: #080f24;

  border: 1.5px solid rgba(59, 130, 246, 0.22);

  border-radius: 16px;

  padding: 12px 10px;

  display: flex;

  align-items: center;

  gap: 10px;

  cursor: pointer;

  user-select: none;

  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);

  overflow: hidden;

  min-height: 64px;

  box-sizing: border-box;

}

.bx-pay-method-card:hover {

  border-color: #3b82f6;

  background: #0b1633;

  box-shadow: 0 4px 18px rgba(59, 130, 246, 0.2);

}

.bx-pay-method-card:active {

  transform: scale(0.96);

  border-color: #ffd166;

}



.bx-pay-method-card.is-disabled {

  opacity: 0.85;

  cursor: not-allowed;

  border-color: rgba(245, 158, 11, 0.3);

  background: #080c18;

}

.bx-pay-method-card.is-disabled:hover {

  transform: none;

  box-shadow: none;

}



.bx-dev-tag {

  display: inline-flex;

  align-items: center;

  background: rgba(245, 158, 11, 0.18);

  border: 1px solid rgba(245, 158, 11, 0.45);

  color: #fbbf24;

  font-family: var(--bx-font-unbounded);

  font-size: 7.5px;

  font-weight: 800;

  letter-spacing: 0.5px;

  padding: 2px 6px;

  border-radius: 5px;

  text-transform: uppercase;

}



.bx-pm-logo-wrap {

  flex-shrink: 0;

  display: flex;

  align-items: center;

  justify-content: center;

}



.bx-pm-info {

  display: flex;

  flex-direction: column;

  min-width: 0;

}



.bx-pm-title {

  font-family: var(--bx-font-unbounded);

  font-size: 10px;

  font-weight: 800;

  color: #ffffff;

  letter-spacing: 0.2px;

  line-height: 1.2;

}



#btnAtmNext:disabled {

  background: #0c1324 !important;

  color: #475569 !important;

  box-shadow: none !important;

  border: 1.5px solid rgba(255, 255, 255, 0.08) !important;

  cursor: not-allowed;

  opacity: 0.85;

}



.bx-pm-sub {

  font-size: 9.5px;

  font-weight: 600;

  color: var(--bx-fg-dim);

  margin-top: 3px;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}



.bx-topup-selected-tag {

  display: flex;

  align-items: center;

  justify-content: space-between;

  background: rgba(59, 130, 246, 0.12);

  border: 1px solid rgba(59, 130, 246, 0.3);

  border-radius: 12px;

  padding: 8px 12px;

  margin-bottom: 12px;

  font-family: var(--bx-font-unbounded);

  font-size: 11px;

  font-weight: 800;

  color: #60a5fa;

}

.bx-topup-tag-badge {

  font-size: 8.5px;

  color: #94a3b8;

  letter-spacing: 0.5px;

}



/* ================= BANKOMAT SECTION (SCREENSHOT 2) ================= */

.bx-atm-input-box {

  display: flex;

  align-items: center;

  justify-content: space-between;

  background: #080f24;

  border: 1.5px solid rgba(59, 130, 246, 0.35);

  border-radius: 16px;

  padding: 4px 16px;

  margin-bottom: 12px;

  transition: all 0.2s ease;

}

.bx-atm-input-box:focus-within {

  border-color: #ffd166;

  box-shadow: 0 0 16px rgba(255, 209, 102, 0.3);

}

.bx-atm-input-box input {

  flex: 1;

  min-width: 0;

  background: transparent;

  border: none;

  outline: none;

  font-family: var(--bx-font-unbounded);

  font-size: 24px;

  font-weight: 900;

  color: #ffffff;

  padding: 8px 0;

}

.bx-atm-input-box input::placeholder {

  color: rgba(255, 255, 255, 0.25);

}

.bx-atm-curr-tag {

  font-family: var(--bx-font-unbounded);

  font-size: 13px;

  font-weight: 800;

  color: #60a5fa;

  margin-left: 8px;

}



.bx-atm-chips-row {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 8px;

  margin-bottom: 8px;

}

.bx-atm-chip {

  background: #09132b;

  border: 1.5px solid rgba(59, 130, 246, 0.25);

  border-radius: 12px;

  padding: 10px 4px;

  color: #ffffff;

  font-family: var(--bx-font-unbounded);

  font-size: 11px;

  font-weight: 800;

  cursor: pointer;

  transition: all 0.18s ease;

  text-align: center;

}

.bx-atm-chip:active, .bx-atm-chip.active {

  background: linear-gradient(135deg, #1d4ed8, #ffd166);

  border-color: #ffd166;

  color: #030814;

  font-weight: 900;

  box-shadow: 0 0 12px rgba(255, 209, 102, 0.4);

}



.bx-atm-meta-row {

  display: flex;

  align-items: center;

  justify-content: space-between;

  font-size: 10.5px;

  color: var(--bx-fg-dim);

  font-weight: 600;

  padding: 0 2px;

  margin-bottom: 14px;

}

.bx-atm-bal {

  color: #94a3b8;

}



.bx-atm-steps-card {

  background: #060b1b;

  border: 1.5px solid rgba(59, 130, 246, 0.2);

  border-radius: 18px;

  padding: 14px;

  margin-bottom: 12px;

}

.bx-atm-steps-title {

  font-family: var(--bx-font-unbounded);

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 1.2px;

  color: #94a3b8;

  margin-bottom: 12px;

  text-transform: uppercase;

}

.bx-atm-steps-list {

  display: flex;

  flex-direction: column;

}

.bx-atm-step-item {

  display: flex;

  align-items: center;

  gap: 12px;

  padding: 8px 0;

}

.bx-atm-step-badge {

  width: 24px;

  height: 24px;

  border-radius: 8px;

  background: rgba(37, 99, 235, 0.28);

  border: 1px solid #3b82f6;

  color: #60a5fa;

  font-family: var(--bx-font-unbounded);

  font-size: 11px;

  font-weight: 900;

  display: grid;

  place-items: center;

  flex-shrink: 0;

}

.bx-atm-step-text {

  font-size: 11.5px;

  font-weight: 600;

  color: #cbd5e1;

  line-height: 1.35;

}

.bx-atm-step-divider {

  height: 1px;

  background: rgba(255, 255, 255, 0.05);

  margin: 2px 0;

}



/* ================= ATM DETAILS & UPLOAD ================= */

.bx-atm-upload-box {

  background: rgba(10, 17, 36, 0.65);

  border: 1px dashed rgba(59, 130, 246, 0.4);

  border-radius: 14px;

  padding: 12px;

  display: flex;

  flex-direction: column;

  gap: 8px;

}

.bx-atm-upload-head {

  display: flex;

  flex-direction: column;

  gap: 2px;

}

.bx-atm-upload-sub {

  font-size: 10px;

  color: var(--bx-fg-dim);

}

.bx-atm-upload-trigger {

  background: var(--bx-card-inner);

  border: 1.5px solid var(--bx-card-border);

  border-radius: 12px;

  padding: 10px;

  color: #60a5fa;

  font-family: var(--bx-font-unbounded);

  font-size: 10.5px;

  font-weight: 800;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  transition: all 0.2s ease;

}

.bx-atm-upload-trigger:hover {

  border-color: #60a5fa;

  background: rgba(59, 130, 246, 0.1);

}

.bx-atm-preview-wrap {

  position: relative;

  border-radius: 10px;

  overflow: hidden;

  max-height: 180px;

  border: 1px solid rgba(59, 130, 246, 0.4);

  display: flex;

  align-items: center;

  justify-content: center;

  background: #020617;

}

.bx-atm-preview-img {

  max-width: 100%;

  max-height: 180px;

  object-fit: contain;

}

.bx-atm-remove-photo {

  position: absolute;

  top: 6px;

  right: 6px;

  width: 24px;

  height: 24px;

  border-radius: 50%;

  background: rgba(239, 68, 68, 0.85);

  border: none;

  color: #ffffff;

  font-size: 16px;

  display: grid;

  place-items: center;

  cursor: pointer;

  line-height: 1;

}



.bx-btn-atm-submit {

  width: 100%;

  height: 48px;

  border-radius: 14px;

  background: linear-gradient(135deg, #00b4ff 0%, #0066ff 100%);

  color: #ffffff;

  font-family: var(--bx-font-unbounded);

  font-weight: 800;

  font-size: 12px;

  letter-spacing: 0.5px;

  border: 1px solid rgba(255, 255, 255, 0.25);

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  box-shadow: 0 8px 24px rgba(188, 150, 230, 0.35);

  transition: all 0.2s ease;

  box-sizing: border-box;

}

.bx-btn-atm-submit:hover {

  box-shadow: 0 10px 28px rgba(188, 150, 230, 0.5);

  transform: translateY(-1px);

}

.bx-btn-atm-submit:active {

  transform: scale(0.98);

}

.bx-btn-atm-submit:disabled {

  opacity: 0.5;

  cursor: not-allowed;

  transform: none;

}



.bx-btn-tg-operator {

  width: 100%;

  height: 46px;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  background: rgba(14, 165, 233, 0.12);

  border: 1.5px solid rgba(14, 165, 233, 0.45);

  border-radius: 14px;

  padding: 0 16px;

  color: #bc96e6;

  font-family: var(--bx-font-unbounded);

  font-weight: 800;

  font-size: 10.5px;

  letter-spacing: 0.3px;

  text-decoration: none;

  transition: all 0.2s ease;

  box-sizing: border-box;

}

.bx-btn-tg-operator:hover {

  background: rgba(14, 165, 233, 0.22);

  border-color: #bc96e6;

  color: #7dd3fc;

}

.bx-btn-tg-operator:active {

  transform: scale(0.98);

}



.bx-topup-label {

  font-family: var(--bx-font-unbounded);

  font-size: 9.5px;

  font-weight: 800;

  letter-spacing: 1.5px;

  color: var(--bx-fg-muted);

  text-transform: uppercase;

  margin-bottom: 8px;

}



.bx-quick-amounts {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 8px;

  margin-bottom: 14px;

}



.bx-amt-btn {

  background: var(--bx-card-inner);

  border: 1.5px solid var(--bx-card-border);

  border-radius: 12px;

  padding: 10px 4px;

  color: #fff;

  font-family: var(--bx-font-unbounded);

  font-weight: 800;

  font-size: 10px;

  cursor: pointer;

  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);

  text-align: center;

  user-select: none;

}

.bx-amt-btn:hover {

  border-color: #60a5fa;

}

.bx-amt-btn.active {

  background: var(--bx-accent-gradient);

  border-color: #60a5fa;

  box-shadow: 0 0 14px rgba(59, 130, 246, 0.5);

  color: #ffffff;

}



.bx-topup-custom-wrap {

  display: flex;

  flex-direction: column;

  gap: 6px;

  margin-bottom: 14px;

}



.bx-topup-input-box {

  display: flex;

  align-items: center;

  background: var(--bx-card-inner);

  border: 1.5px solid var(--bx-card-border);

  border-radius: 14px;

  padding: 4px 14px;

  transition: all 0.2s ease;

}

.bx-topup-input-box:focus-within {

  border-color: #60a5fa;

  box-shadow: 0 0 14px rgba(59, 130, 246, 0.45);

}

.bx-topup-input-box input {

  flex: 1;

  min-width: 0;

  background: transparent;

  border: none;

  color: #ffffff;

  font-family: var(--bx-font-unbounded);

  font-weight: 800;

  font-size: 17px;

  padding: 10px 0;

  outline: none;

}

.bx-topup-curr {

  font-family: var(--bx-font-unbounded);

  font-weight: 900;

  font-size: 12px;

  color: #60a5fa;

  margin-left: 8px;

}

.bx-topup-hint {

  font-size: 11px;

  color: var(--bx-fg-dim);

}



/* ================= INVOICE DETAILS ================= */

.bx-invoice-box {

  background: var(--bx-card-inner);

  border: 2px solid var(--bx-card-border);

  border-radius: 18px;

  padding: 14px;

  box-shadow: 0 0 20px rgba(59, 130, 246, 0.25);

  display: flex;

  flex-direction: column;

  gap: 10px;

}



.bx-invoice-badge {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  background: rgba(59, 130, 246, 0.15);

  border: 1px solid rgba(59, 130, 246, 0.35);

  border-radius: 20px;

  padding: 4px 10px;

  font-size: 10px;

  font-weight: 800;

  color: #60a5fa;

  align-self: flex-start;

  letter-spacing: 0.5px;

}

.bx-invoice-dot {

  width: 6px;

  height: 6px;

  border-radius: 50%;

  background: #60a5fa;

  box-shadow: 0 0 8px #60a5fa;

  animation: bxPulseDot 1.5s infinite;

}



.bx-invoice-amount-block {

  background: rgba(10, 17, 36, 0.65);

  border: 1px solid rgba(147, 197, 253, 0.15);

  border-radius: 14px;

  padding: 12px;

  text-align: center;

}

.bx-invoice-sublabel {

  font-size: 10px;

  font-weight: 700;

  color: var(--bx-fg-muted);

  display: block;

  margin-bottom: 6px;

  letter-spacing: 0.5px;

}

.bx-invoice-amount-row {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

}

.bx-invoice-amount {

  font-family: var(--bx-font-unbounded);

  font-size: 19px;

  font-weight: 900;

  color: #60a5fa;

}



.bx-invoice-card-block {

  background: rgba(10, 17, 36, 0.65);

  border: 1px solid rgba(147, 197, 253, 0.15);

  border-radius: 14px;

  padding: 12px;

}

.bx-invoice-card-head {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 6px;

}

.bx-invoice-holder-tag {

  font-size: 9.5px;

  font-weight: 800;

  color: #94a3b8;

  background: rgba(255, 255, 255, 0.08);

  padding: 2px 8px;

  border-radius: 6px;

}

.bx-invoice-card-row {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 8px;

}

.bx-invoice-card-num {

  font-family: var(--bx-font-unbounded);

  font-size: 13.5px;

  font-weight: 800;

  letter-spacing: 1px;

  color: #ffffff;

}



.bx-btn-copy-chip, .bx-btn-copy-card {

  background: var(--bx-accent-soft);

  border: 1.5px solid #60a5fa;

  color: #60a5fa;

  border-radius: 8px;

  padding: 5px 9px;

  font-size: 10.5px;

  font-weight: 700;

  cursor: pointer;

  display: inline-flex;

  align-items: center;

  gap: 4px;

  transition: all 0.2s ease;

  white-space: nowrap;

}

.bx-btn-copy-chip:active, .bx-btn-copy-card:active {

  transform: scale(0.95);

  background: #ffd166;

  color: #14061c;

}



.bx-invoice-apps-row {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 8px;

}

.bx-app-pay-btn {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 6px;

  padding: 10px;

  border-radius: 10px;

  text-decoration: none;

  font-family: var(--bx-font-unbounded);

  font-weight: 800;

  font-size: 11px;

  transition: transform 0.15s ease;

}

.bx-app-pay-btn.payme {

  background: #00cccc;

  color: #000;

}

.bx-app-pay-btn.click {

  background: #007aff;

  color: #fff;

}

.bx-app-pay-btn:active {

  transform: scale(0.96);

}



.bx-invoice-warning {

  font-size: 10.5px;

  color: #f59e0b;

  background: rgba(245, 158, 11, 0.12);

  border: 1px solid rgba(245, 158, 11, 0.3);

  border-radius: 10px;

  padding: 10px;

  line-height: 1.35;

}



.bx-invoice-actions {

  display: flex;

  flex-direction: column;

  gap: 6px;

  margin-top: 12px;

}

.bx-btn-back-link {

  background: transparent;

  border: none;

  color: var(--bx-fg-dim);

  font-size: 11.5px;

  font-weight: 600;

  padding: 8px;

  cursor: pointer;

  text-align: center;

  transition: color 0.2s ease;

}

.bx-btn-back-link:hover {

  color: #60a5fa;

}



@keyframes bxPulseDot {

  0%, 100% { opacity: 1; transform: scale(1); }

  50% { opacity: 0.4; transform: scale(0.85); }

}



.mt-3 { margin-top: 12px; }

.mt-4 { margin-top: 16px; }



/* ================= 12. CYBER LEADERBOARD & TOP STRIP (PERFECTED & ENLARGED) ================= */

.bx-top-strip-card {

  width: 100%;

  margin: 0 0 22px 0;

  box-sizing: border-box;

  background: linear-gradient(180deg, rgba(33, 11, 44, 0.9) 0%, rgba(20, 6, 28, 0.98) 100%);

  border: 1px solid rgba(188, 150, 230, 0.3);

  border-radius: 22px;

  padding: 16px 16px 16px;

  box-shadow: 0 16px 36px -6px rgba(0, 0, 0, 0.75), 0 0 22px -2px rgba(255, 209, 102, 0.16);

  position: relative;

  overflow: hidden;

  backdrop-filter: blur(18px);

  -webkit-backdrop-filter: blur(18px);

  transition: border-color 0.25s ease, box-shadow 0.25s ease;

}

.bx-top-strip-card::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  height: 2px;

  background: linear-gradient(90deg, transparent, #ffd166, #f59e0b, transparent);

}

.bx-top-strip-head {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 14px;

}

.bx-top-strip-left {

  display: flex;

  align-items: center;

  gap: 10px;

  cursor: pointer;

  min-width: 0;

}

.bx-top-strip-icon-box {

  width: 32px;

  height: 32px;

  border-radius: 10px;

  background: linear-gradient(135deg, rgba(245, 158, 11, 0.25), rgba(255, 209, 102, 0.12));

  border: 1px solid rgba(245, 158, 11, 0.5);

  display: flex;

  align-items: center;

  justify-content: center;

  box-shadow: 0 0 12px rgba(245, 158, 11, 0.3);

  flex-shrink: 0;

}

.bx-top-strip-title {

  font-family: var(--bx-font-unbounded, 'Unbounded', sans-serif);

  font-size: 12px;

  font-weight: 800;

  letter-spacing: 0.9px;

  text-transform: uppercase;

  color: #f1f5f9;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}

.bx-top-strip-view-btn {

  font-size: 11.5px;

  font-weight: 800;

  color: #ffd166;

  display: flex;

  align-items: center;

  gap: 5px;

  cursor: pointer;

  padding: 5px 10px;

  border-radius: 9px;

  background: rgba(255, 209, 102, 0.1);

  border: 1px solid rgba(255, 209, 102, 0.25);

  transition: all 0.2s ease;

  flex-shrink: 0;

}

.bx-top-strip-view-btn:active {

  background: rgba(255, 209, 102, 0.25);

  transform: scale(0.97);

}



/* Category segmented toggle full-width */

.bx-top-strip-mode-toggle {

  display: grid;

  grid-template-columns: 1fr 1fr;

  background: rgba(4, 8, 20, 0.75);

  border: 1px solid rgba(255, 255, 255, 0.09);

  border-radius: 13px;

  padding: 4px;

  gap: 6px;

  margin-bottom: 14px;

}

.bx-top-mode-btn {

  background: transparent;

  border: none;

  color: #94a3b8;

  font-size: 11.5px;

  font-weight: 800;

  padding: 8px 10px;

  border-radius: 10px;

  cursor: pointer;

  transition: all 0.2s ease;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 7px;

  white-space: nowrap;

}

.bx-top-mode-btn.active {

  background: linear-gradient(135deg, rgba(245, 158, 11, 0.28), rgba(245, 158, 11, 0.12));

  color: #fbbf24;

  border: 1px solid rgba(245, 158, 11, 0.45);

  box-shadow: 0 2px 10px rgba(245, 158, 11, 0.25);

}

.bx-top-mode-btn.referral.active {

  background: linear-gradient(135deg, rgba(255, 209, 102, 0.28), rgba(255, 209, 102, 0.12));

  color: #ffd166;

  border: 1px solid rgba(255, 209, 102, 0.45);

  box-shadow: 0 2px 10px rgba(255, 209, 102, 0.25);

}



/* Mini Podium in Strip - ENLARGED */

.bx-top-strip-podium {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 10px;

  padding-top: 10px;

}

.bx-top-mini-card {

  background: rgba(255, 255, 255, 0.035);

  border: 1px solid rgba(255, 255, 255, 0.08);

  border-radius: 16px;

  padding: 14px 6px 10px 6px;

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

  position: relative;

  transition: all 0.2s ease;

  min-width: 0;

  cursor: pointer;

  min-height: 106px;

  justify-content: space-between;

}

.bx-top-mini-card.gold {

  background: linear-gradient(180deg, rgba(245, 158, 11, 0.2) 0%, rgba(245, 158, 11, 0.04) 100%);

  border-color: rgba(245, 158, 11, 0.55);

  box-shadow: 0 6px 18px -2px rgba(245, 158, 11, 0.25), inset 0 1px 0 rgba(255, 220, 100, 0.15);

}

.bx-top-mini-card.silver {

  background: linear-gradient(180deg, rgba(203, 213, 225, 0.12) 0%, rgba(203, 213, 225, 0.02) 100%);

  border-color: rgba(203, 213, 225, 0.35);

}

.bx-top-mini-card.bronze {

  background: linear-gradient(180deg, rgba(217, 119, 6, 0.12) 0%, rgba(217, 119, 6, 0.02) 100%);

  border-color: rgba(217, 119, 6, 0.35);

}

.bx-top-mini-badge {

  position: absolute;

  top: -9px;

  left: 50%;

  transform: translateX(-50%);

  font-size: 9.5px;

  font-weight: 900;

  padding: 2px 8px;

  border-radius: 10px;

  font-family: 'JetBrains Mono', monospace;

  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);

  white-space: nowrap;

  letter-spacing: 0.3px;

}

.bx-top-mini-card.gold .bx-top-mini-badge {

  background: linear-gradient(135deg, #fbbf24, #d97706);

  color: #030712;

}

.bx-top-mini-card.silver .bx-top-mini-badge {

  background: linear-gradient(135deg, #e2e8f0, #94a3b8);

  color: #030712;

}

.bx-top-mini-card.bronze .bx-top-mini-badge {

  background: linear-gradient(135deg, #f59e0b, #b45309);

  color: #030712;

}

.bx-top-mini-avatar {

  width: 38px;

  height: 38px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 13.5px;

  font-weight: 800;

  color: #fff;

  margin-top: 2px;

  margin-bottom: 5px;

  border: 2px solid rgba(255, 255, 255, 0.2);

}

.bx-top-mini-card.gold .bx-top-mini-avatar {

  background: linear-gradient(135deg, #f59e0b, #b45309);

  border-color: #fbbf24;

  box-shadow: 0 0 12px rgba(245, 158, 11, 0.45);

}

.bx-top-mini-card.silver .bx-top-mini-avatar {

  background: linear-gradient(135deg, #64748b, #475569);

  border-color: #cbd5e1;

}

.bx-top-mini-card.bronze .bx-top-mini-avatar {

  background: linear-gradient(135deg, #78350f, #451a03);

  border-color: #d97706;

}

.bx-top-mini-card.placeholder .bx-top-mini-avatar {

  background: rgba(255, 255, 255, 0.04);

  border: 1.5px dashed rgba(255, 255, 255, 0.25);

  color: #64748b;

  font-size: 16px;

}

.bx-top-mini-name {

  font-size: 11.5px;

  font-weight: 800;

  color: #f1f5f9;

  width: 100%;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

  line-height: 1.25;

  margin-bottom: 2px;

}

.bx-top-mini-score {

  font-size: 11px;

  font-weight: 900;

  color: #ffd166;

  font-family: 'JetBrains Mono', monospace;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

  width: 100%;

  line-height: 1.2;

}

.bx-top-mini-card.gold .bx-top-mini-score {

  color: #fbbf24;

}



/* Empty banner in strip */

.bx-top-strip-empty {

  grid-column: 1 / -1;

  display: flex;

  align-items: center;

  justify-content: space-between;

  background: rgba(255, 255, 255, 0.03);

  border: 1px dashed rgba(255, 255, 255, 0.14);

  border-radius: 14px;

  padding: 16px 16px;

  gap: 12px;

}

.bx-top-strip-empty-text {

  font-size: 12px;

  color: #94a3b8;

  line-height: 1.4;

}

.bx-top-strip-empty-btn {

  padding: 8px 14px;

  border-radius: 10px;

  background: linear-gradient(135deg, #ffd166, #bc96e6);

  color: #14061c;

  font-weight: 800;

  font-size: 11.5px;

  border: none;

  cursor: pointer;

  white-space: nowrap;

  flex-shrink: 0;

}



/* Modal Bottom Sheet */

.bx-dialog-card-leaderboard {

  max-height: 85vh;

  border-radius: 28px 28px 0 0;

  padding: 16px 18px calc(24px + env(safe-area-inset-bottom, 0px));

  display: flex;

  flex-direction: column;

}

.bx-lb-modal-body {

  overflow-y: auto;

  overflow-x: hidden;

  padding-right: 2px;

  -webkit-overflow-scrolling: touch;

}

.bx-lb-tabs-main {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 8px;

  background: rgba(10, 20, 36, 0.85);

  padding: 4px;

  border-radius: 14px;

  border: 1px solid rgba(188, 150, 230, 0.2);

  margin-bottom: 12px;

}

.bx-lb-tab-btn {

  background: transparent;

  border: none;

  padding: 10px 6px;

  border-radius: 10px;

  color: #94a3b8;

  font-size: 12px;

  font-weight: 800;

  letter-spacing: 0.5px;

  cursor: pointer;

  transition: all 0.2s ease;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 6px;

  white-space: nowrap;

}

.bx-lb-tab-btn.active {

  background: linear-gradient(135deg, rgba(245, 158, 11, 0.25), rgba(245, 158, 11, 0.08));

  color: #fbbf24;

  border: 1px solid rgba(245, 158, 11, 0.4);

  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.15);

}

.bx-lb-tab-btn.ref-tab.active {

  background: linear-gradient(135deg, rgba(255, 209, 102, 0.25), rgba(255, 209, 102, 0.08));

  color: #ffd166;

  border: 1px solid rgba(255, 209, 102, 0.4);

  box-shadow: 0 4px 14px rgba(255, 209, 102, 0.15);

}



.bx-leaderboard-pills {

  display: flex;

  gap: 6px;

  background: rgba(15, 23, 42, 0.6);

  border-radius: 12px;

  padding: 3px;

  margin-bottom: 14px;

  border: 1px solid rgba(255, 255, 255, 0.06);

}

.bx-lb-pill {

  flex: 1;

  background: transparent;

  border: none;

  border-radius: 9px;

  padding: 7px 4px;

  font-size: 11px;

  font-weight: 700;

  color: #94a3b8;

  cursor: pointer;

  transition: all 0.2s ease;

  text-align: center;

}

.bx-lb-pill.active {

  background: rgba(255, 255, 255, 0.14);

  color: #f1f5f9;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);

}



.bx-lb-ref-banner {

  background: linear-gradient(135deg, rgba(255, 209, 102, 0.12) 0%, rgba(188, 150, 230, 0.06) 100%);

  border: 1px solid rgba(255, 209, 102, 0.3);

  border-radius: 12px;

  padding: 10px 12px;

  margin-bottom: 14px;

  display: flex;

  align-items: center;

  gap: 10px;

}

.bx-lb-ref-badge {

  background: #ffd166;

  color: #14061c;

  font-weight: 900;

  font-size: 10px;

  padding: 3px 7px;

  border-radius: 6px;

  font-family: 'JetBrains Mono', monospace;

  white-space: nowrap;

  flex-shrink: 0;

}

.bx-lb-ref-text {

  font-size: 11.5px;

  color: #e2e8f0;

  line-height: 1.35;

}



/* Podium Olympic 3D */

.bx-podium-wrap {

  width: 100%;

  margin-bottom: 16px;

}

.bx-podium-container {

  display: flex;

  align-items: flex-end;

  justify-content: center;

  gap: 8px;

  padding: 18px 4px 0 4px;

  max-width: 340px;

  margin: 0 auto;

}

.bx-podium-column {

  flex: 1 1 0;

  min-width: 0;

  max-width: 105px;

  display: flex;

  flex-direction: column;

  align-items: center;

  position: relative;

}

.bx-podium-avatar-wrap {

  position: relative;

  margin-bottom: 6px;

}

.bx-podium-avatar {

  width: 44px;

  height: 44px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 14px;

  font-weight: 900;

  color: #fff;

  border: 2px solid;

  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);

}

.bx-podium-column.gold .bx-podium-avatar {

  width: 52px;

  height: 52px;

  background: linear-gradient(135deg, #f59e0b, #b45309);

  border-color: #fbbf24;

  box-shadow: 0 0 20px rgba(245, 158, 11, 0.4);

}

.bx-podium-column.silver .bx-podium-avatar {

  background: linear-gradient(135deg, #64748b, #334155);

  border-color: #cbd5e1;

  box-shadow: 0 0 14px rgba(203, 213, 225, 0.25);

}

.bx-podium-column.bronze .bx-podium-avatar {

  background: linear-gradient(135deg, #78350f, #451a03);

  border-color: #d97706;

  box-shadow: 0 0 14px rgba(217, 119, 6, 0.25);

}

.bx-podium-crown {

  position: absolute;

  top: -14px;

  left: 50%;

  transform: translateX(-50%);

  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6));

}

.bx-podium-rank-tag {

  position: absolute;

  bottom: -4px;

  left: 50%;

  transform: translateX(-50%);

  font-size: 10px;

  font-weight: 900;

  padding: 1px 6px;

  border-radius: 8px;

  color: #030712;

  font-family: 'JetBrains Mono', monospace;

  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);

}

.bx-podium-column.gold .bx-podium-rank-tag { background: #fbbf24; }

.bx-podium-column.silver .bx-podium-rank-tag { background: #e2e8f0; }

.bx-podium-column.bronze .bx-podium-rank-tag { background: #d97706; }



.bx-podium-user-name {

  font-size: 11.5px;

  font-weight: 700;

  color: #f1f5f9;

  text-align: center;

  max-width: 100%;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

  margin-bottom: 2px;

  line-height: 1.2;

}

.bx-podium-score {

  font-size: 11px;

  font-weight: 800;

  color: #ffd166;

  font-family: 'JetBrains Mono', monospace;

  text-align: center;

  margin-bottom: 6px;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

  max-width: 100%;

}

.bx-podium-column.gold .bx-podium-score { color: #fbbf24; }

.bx-podium-column.silver .bx-podium-score { color: #e2e8f0; }

.bx-podium-column.bronze .bx-podium-score { color: #f59e0b; }



.bx-podium-pedestal {

  width: 100%;

  border-radius: 12px 12px 4px 4px;

  display: flex;

  align-items: center;

  justify-content: center;

  font-family: var(--bx-font-unbounded, 'Unbounded', sans-serif);

  font-weight: 900;

  position: relative;

  overflow: hidden;

  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);

}

.bx-podium-pedestal.p1 {

  height: 84px;

  background: linear-gradient(180deg, rgba(245, 158, 11, 0.35) 0%, rgba(245, 158, 11, 0.08) 100%);

  border: 1.5px solid rgba(245, 158, 11, 0.6);

  border-bottom: none;

  color: #fbbf24;

  font-size: 22px;

}

.bx-podium-pedestal.p2 {

  height: 64px;

  background: linear-gradient(180deg, rgba(203, 213, 225, 0.25) 0%, rgba(203, 213, 225, 0.05) 100%);

  border: 1.5px solid rgba(203, 213, 225, 0.4);

  border-bottom: none;

  color: #cbd5e1;

  font-size: 19px;

}

.bx-podium-pedestal.p3 {

  height: 48px;

  background: linear-gradient(180deg, rgba(217, 119, 6, 0.25) 0%, rgba(217, 119, 6, 0.05) 100%);

  border: 1.5px solid rgba(217, 119, 6, 0.4);

  border-bottom: none;

  color: #d97706;

  font-size: 17px;

}

.bx-podium-pedestal::after {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  height: 3px;

  background: rgba(255, 255, 255, 0.4);

}



/* Modal empty state */

.bx-lb-empty-card {

  text-align: center;

  padding: 24px 16px;

  background: rgba(255, 255, 255, 0.02);

  border: 1px dashed rgba(255, 255, 255, 0.12);

  border-radius: 16px;

  margin-bottom: 16px;

}

.bx-lb-empty-icon-box {

  width: 48px;

  height: 48px;

  border-radius: 14px;

  background: rgba(245, 158, 11, 0.1);

  border: 1px solid rgba(245, 158, 11, 0.3);

  display: flex;

  align-items: center;

  justify-content: center;

  margin: 0 auto 10px auto;

  box-shadow: 0 0 16px rgba(245, 158, 11, 0.2);

}

.bx-lb-empty-title {

  font-size: 13px;

  font-weight: 800;

  color: #f1f5f9;

  margin-bottom: 4px;

}

.bx-lb-empty-sub {

  font-size: 11.5px;

  color: #94a3b8;

  line-height: 1.4;

  max-width: 260px;

  margin: 0 auto;

}



/* List 4-10 */

.bx-leaderboard-list {

  display: flex;

  flex-direction: column;

  gap: 6px;

  margin-bottom: 12px;

}

.bx-leaderboard-row {

  display: flex;

  align-items: center;

  justify-content: space-between;

  background: rgba(10, 20, 36, 0.6);

  border: 1px solid rgba(255, 255, 255, 0.06);

  border-radius: 12px;

  padding: 8px 12px;

  transition: background 0.15s ease;

}

.bx-lb-left-cell {

  display: flex;

  align-items: center;

  gap: 10px;

  min-width: 0;

  flex: 1;

}

.bx-lb-rank-num {

  font-size: 11px;

  font-weight: 900;

  color: #64748b;

  font-family: 'JetBrains Mono', monospace;

  width: 24px;

  flex-shrink: 0;

}

.bx-lb-row-avatar {

  width: 32px;

  height: 32px;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.06);

  border: 1.5px solid rgba(255, 255, 255, 0.15);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 11px;

  font-weight: 800;

  color: #cbd5e1;

  flex-shrink: 0;

}

.bx-lb-user-details {

  display: flex;

  flex-direction: column;

  min-width: 0;

  flex: 1;

}

.bx-lb-name-text {

  font-size: 12px;

  font-weight: 700;

  color: #f1f5f9;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

  line-height: 1.2;

}

.bx-lb-meta-text {

  font-size: 10.5px;

  color: #64748b;

  line-height: 1.2;

}

.bx-lb-score-val {

  font-size: 12px;

  font-weight: 800;

  color: #ffd166;

  font-family: 'JetBrains Mono', monospace;

  flex-shrink: 0;

  margin-left: 10px;

}



/* ================= REFERRAL 200 + 2% HERO CARD (SCREENSHOT SCHEME) ================= */

.bx-ref-scheme-hero {

  background: linear-gradient(145deg, #09204c 0%, #061536 55%, #040d24 100%);

  border: 1.5px solid rgba(255, 209, 102, 0.35);

  border-radius: 22px;

  padding: 24px 18px 20px;

  text-align: center;

  margin-bottom: 18px;

  box-shadow: 0 10px 30px rgba(0, 50, 150, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.12);

  position: relative;

  overflow: hidden;

}



.bx-ref-scheme-hero::before {

  content: "";

  position: absolute;

  top: -40px;

  left: 50%;

  transform: translateX(-50%);

  width: 140px;

  height: 90px;

  background: radial-gradient(circle, rgba(255, 209, 102, 0.25) 0%, transparent 70%);

  pointer-events: none;

}



.bx-ref-scheme-icon-wrap {

  display: flex;

  justify-content: center;

  align-items: center;

  margin-bottom: 14px;

}



.bx-ref-net-svg {

  filter: drop-shadow(0 4px 16px rgba(255, 209, 102, 0.45));

}



.bx-ref-scheme-title {

  font-family: var(--font-accent, 'Unbounded', sans-serif);

  font-size: 20px;

  font-weight: 800;

  color: #ffffff;

  margin: 0 0 8px;

  letter-spacing: -0.3px;

  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);

}



.bx-ref-scheme-sub {

  font-size: 13px;

  line-height: 1.5;

  color: #cbd5e1;

  margin: 0 auto 16px;

  max-width: 320px;

}



.bx-ref-conditions-box {

  display: flex;

  align-items: center;

  justify-content: space-between;

  background: rgba(10, 18, 38, 0.75);

  border: 1px solid rgba(255, 255, 255, 0.08);

  border-radius: 14px;

  padding: 10px 12px;

  gap: 6px;

}



.bx-ref-condition-item {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 4px;

  flex: 1;

  font-size: 10.5px;

  font-weight: 700;

  color: #94a3b8;

  text-align: center;

  line-height: 1.2;

}



.bx-ref-condition-item.highlight {

  color: #ffd166;

}



.bx-ref-condition-num {

  width: 20px;

  height: 20px;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.08);

  color: #ffffff;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 11px;

  font-weight: 800;

}



.bx-ref-condition-item.highlight .bx-ref-condition-num {

  background: linear-gradient(135deg, #ffd166, #0077ff);

  color: #ffffff;

  box-shadow: 0 2px 8px rgba(255, 209, 102, 0.4);

}



.bx-ref-condition-arrow {

  color: rgba(255, 255, 255, 0.3);

  font-size: 12px;

  font-weight: 900;

}



.bx-ref-badge {

  font-size: 11px;

  font-weight: 800;

  padding: 3px 8px;

  border-radius: 6px;

  letter-spacing: 0.2px;

}



.bx-ref-badge.rewarded {

  background: rgba(16, 185, 129, 0.18);

  color: #10b981;

  border: 1px solid rgba(16, 185, 129, 0.35);

}



.bx-ref-badge.pending {

  background: rgba(148, 163, 184, 0.12);

  color: #94a3b8;

  border: 1px solid rgba(148, 163, 184, 0.25);

}



/* ================= REGION SEGMENTED TABS (HIGH CONTRAST & CLEAR SEPARATION) ================= */
#fieldRegionRow {
  display: none !important;
}

.bx-region-section {
  margin: 14px 0 16px 0;
  padding: 12px 14px;
  background: rgba(10, 22, 42, 0.75);
  border: 1.5px solid rgba(255, 209, 102, 0.22);
  border-radius: 18px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
}

.bx-region-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding: 0 2px;
}

.bx-region-section-title {
  font-family: var(--bx-font-unbounded, 'Unbounded', sans-serif);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #ffd166;
  text-shadow: 0 0 10px rgba(255, 209, 102, 0.4);
}

.bx-region-tabs {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 2px 2px 6px 2px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.bx-region-tabs::-webkit-scrollbar {
  display: none;
}

/* Individual tab button */
.bx-region-tab {
  flex-shrink: 0;
  padding: 9px 16px;
  border-radius: 12px;
  background: #0d1a30;
  border: 1.5px solid rgba(255, 209, 102, 0.25);
  color: #dbe7f5;
  font-family: var(--bx-font-main, 'Montserrat', sans-serif);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  user-select: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.bx-region-tab:hover {
  background: #132442;
  border-color: rgba(255, 209, 102, 0.5);
  color: #ffffff;
}

.bx-region-tab:active {
  transform: scale(0.96);
}

/* ACTIVE TAB: Super high contrast, vibrant electric-cyan gradient, bold dark text */
.bx-region-tab.active {
  background: linear-gradient(135deg, #00e1ff 0%, #0080ff 100%) !important;
  border: 1.5px solid #ffffff !important;
  color: #030d1d !important;
  font-weight: 900 !important;
  box-shadow: 0 0 18px rgba(0, 225, 255, 0.7), 0 4px 14px rgba(0, 0, 0, 0.6) !important;
  transform: translateY(-1px);
}

.bx-region-tab.active .bx-tab-badge {
  filter: drop-shadow(0 0 2px rgba(0,0,0,0.5));
}

.bx-tab-badge {
  font-size: 15px;
  line-height: 1;
}


/* ================= FULL-WIDTH CARD PAYMENT ================= */

.bx-pay-method-card.is-full-width {
  grid-column: 1 / -1;
  width: 100%;
  padding: 13px 14px;
  background: linear-gradient(135deg, rgba(255, 209, 102, 0.12) 0%, rgba(8, 18, 40, 0.95) 100%);
  border: 1.5px solid rgba(255, 209, 102, 0.42);
  border-radius: 16px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4), 0 0 16px rgba(255, 209, 102, 0.1);
  display: flex;
  align-items: center;
  gap: 12px;
}

.bx-pay-method-card.is-full-width:hover {
  background: linear-gradient(135deg, rgba(255, 209, 102, 0.18) 0%, rgba(12, 26, 56, 0.98) 100%);
  border-color: #ffd166;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5), 0 0 22px rgba(255, 209, 102, 0.25);
}

.bx-pay-method-card.is-full-width:active {
  transform: scale(0.98);
  border-color: #bc96e6;
}

.bx-pay-method-card.is-full-width .bx-pm-info {
  flex: 1;
}

.bx-pay-method-card.is-full-width .bx-pm-title {
  font-size: 11.5px;
  letter-spacing: 0.3px;
}

.bx-pay-method-card.is-full-width .bx-pm-sub {
  font-size: 10px;
  color: #94a3b8;
}

.bx-pay-method-card.is-full-width .bx-pm-extra {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.bx-badge-fast {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  background: rgba(16, 185, 129, 0.16);
  border: 1px solid rgba(16, 185, 129, 0.45);
  border-radius: 6px;
  color: #34d399;
  font-family: var(--bx-font-unbounded);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.bx-pm-arrow {
  color: #64748b;
  transition: transform 0.2s ease, color 0.2s ease;
}

.bx-pay-method-card.is-full-width:hover .bx-pm-arrow {
  color: #ffd166;
  transform: translateX(2px);
}


/* ================= 10-MINUTE INVOICE COUNTDOWN TIMER ================= */
.bx-invoice-timer-card {
  background: rgba(245, 158, 11, 0.09);
  border: 1.5px solid rgba(245, 158, 11, 0.35);
  border-radius: 14px;
  padding: 10px 14px;
  margin: 12px 0 14px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: all 0.3s ease;
}

.bx-invoice-timer-card.is-expired {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.45);
}

.bx-timer-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bx-timer-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bx-timer-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.bx-timer-label {
  font-family: var(--bx-font-unbounded);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: #fbbf24;
  text-transform: uppercase;
}

.bx-invoice-timer-card.is-expired .bx-timer-label {
  color: #f87171;
}

.bx-timer-digits {
  font-family: var(--bx-font-unbounded);
  font-size: 15px;
  font-weight: 900;
  color: #f59e0b;
  letter-spacing: 1px;
}

.bx-invoice-timer-card.is-expired .bx-timer-digits {
  color: #ef4444;
}

.bx-timer-track {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
}

.bx-timer-bar {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
  border-radius: 2px;
  transition: width 1s linear;
}

.bx-invoice-timer-card.is-expired .bx-timer-bar {
  background: #ef4444;
  width: 0% !important;
}

.bx-invoice-expired-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(239, 68, 68, 0.14);
  border: 1px solid rgba(239, 68, 68, 0.4);
  border-radius: 12px;
  padding: 12px 14px;
  color: #fca5a5;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  margin-top: 12px;
  animation: bxFadeIn 0.3s ease;
}


/* ==========================================================================
   TEOTIMUR CINEMATIC PRELOADER & HERO BANNER ENHANCEMENTS
   ========================================================================== */

.teotimur-preloader, #teotimur-preloader, #omonov-preloader.teotimur-preloader {
  background: radial-gradient(circle at center, #2e0e3e 0%, #14061c 70%, #0a020e 100%);
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  transition: opacity 450ms cubic-bezier(0.4, 0, 0.2, 1), transform 450ms cubic-bezier(0.4, 0, 0.2, 1), visibility 450ms ease;
  overflow: hidden;
}

.teotimur-preloader.hidden, #teotimur-preloader.hidden, #omonov-preloader.teotimur-preloader.hidden {
  opacity: 0;
  transform: scale(1.06);
  visibility: hidden;
  pointer-events: none;
}

.teotimur-loader-ambient {
  position: absolute;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 209, 102, 0.2) 0%, rgba(188, 150, 230, 0.15) 45%, transparent 70%);
  filter: blur(40px);
  pointer-events: none;
  animation: teotimurAmbientPulse 3s ease-in-out infinite alternate;
}

@keyframes teotimurAmbientPulse {
  0% { transform: scale(0.85); opacity: 0.6; }
  100% { transform: scale(1.2); opacity: 1; }
}

.teotimur-loader-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2;
  width: 90%;
  max-width: 380px;
}

.teotimur-loader-scorpion-box {
  position: relative;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
}

.teotimur-scorpion-aura {
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 209, 102, 0.35) 0%, rgba(188, 150, 230, 0.25) 50%, transparent 75%);
  filter: blur(14px);
  animation: teotimurAuraSpin 4s linear infinite;
}

@keyframes teotimurAuraSpin {
  0% { transform: rotate(0deg) scale(0.95); }
  50% { transform: rotate(180deg) scale(1.08); }
  100% { transform: rotate(360deg) scale(0.95); }
}

.teotimur-scorpion-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 22px rgba(255, 209, 102, 0.8)) drop-shadow(0 0 45px rgba(188, 150, 230, 0.45));
  animation: teotimurScorpionFloat 2.8s ease-in-out infinite alternate;
}

@keyframes teotimurScorpionFloat {
  0% { transform: translateY(0) scale(0.98); }
  100% { transform: translateY(-8px) scale(1.03); }
}

.teotimur-loader-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 26px;
}

.teotimur-brand-title {
  font-family: var(--bx-font-unbounded);
  font-weight: 900;
  font-size: 34px;
  letter-spacing: 5px;
  color: #ffffff;
  text-shadow: 0 0 24px rgba(255, 209, 102, 0.65), 0 0 40px rgba(188, 150, 230, 0.35);
  text-transform: uppercase;
  margin-bottom: 6px;
  background: linear-gradient(180deg, #ffffff 40%, #ffd166 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.teotimur-brand-sub {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  color: #bc96e6;
  text-transform: uppercase;
  background: rgba(188, 150, 230, 0.12);
  border: 1px solid rgba(188, 150, 230, 0.3);
  padding: 4px 12px;
  border-radius: 999px;
  box-shadow: 0 0 16px rgba(188, 150, 230, 0.2);
}

.teotimur-progress-box {
  width: 100%;
  max-width: 260px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.teotimur-progress-track {
  width: 100%;
  height: 6px;
  background: rgba(188, 150, 230, 0.15);
  border: 1px solid rgba(188, 150, 230, 0.25);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6);
}

.teotimur-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #bc96e6 0%, #ffd166 100%);
  border-radius: 999px;
  box-shadow: 0 0 14px rgba(255, 209, 102, 0.9);
  transition: width 0.1s linear;
}

.teotimur-progress-stats {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  color: #d8c7eb;
}

.teotimur-status-percent {
  font-family: var(--bx-font-unbounded);
  color: #ffd166;
  font-weight: 800;
}

/* ================= TEOTIMUR SIGNATURE HERO BANNER ================= */
.bx-hero-banner-section {
  width: 100%;
  margin: 0 0 18px 0;
  box-sizing: border-box;
}

.bx-hero-banner-card {
  width: 100%;
  border-radius: 22px;
  overflow: hidden;
  position: relative;
  background: linear-gradient(180deg, rgba(43, 15, 58, 0.95) 0%, rgba(20, 6, 28, 0.98) 100%);
  border: 1px solid rgba(188, 150, 230, 0.35);
  box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.8), 0 0 28px -4px rgba(255, 209, 102, 0.22);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.bx-hero-banner-card:active {
  transform: scale(0.99);
}

.bx-hero-banner-media {
  position: relative;
  width: 100%;
  height: 205px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bx-hero-banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  filter: brightness(0.92) contrast(1.08);
  transition: transform 0.4s ease;
}

.bx-hero-banner-card:hover .bx-hero-banner-img {
  transform: scale(1.03);
}

.bx-hero-banner-glass {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 6, 28, 0.1) 0%, rgba(20, 6, 28, 0.6) 55%, rgba(20, 6, 28, 0.95) 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 14px 14px 12px 14px;
  box-sizing: border-box;
}

.bx-hero-top-badges {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.bx-hero-partner-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(33, 11, 44, 0.85);
  border: 1px solid rgba(255, 209, 102, 0.45);
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: #ffd166;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), 0 0 10px rgba(255, 209, 102, 0.2);
}

.bx-hero-bot-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(135deg, rgba(188, 150, 230, 0.28) 0%, rgba(139, 92, 246, 0.32) 100%);
  border: 1px solid rgba(188, 150, 230, 0.5);
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: #ffffff;
  text-decoration: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.bx-hero-headline {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bx-hero-name {
  font-family: var(--bx-font-unbounded);
  font-size: 20px;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8), 0 0 18px rgba(255, 209, 102, 0.4);
}

.bx-hero-subtitle {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: #ffd166;
  text-transform: uppercase;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
}