/* ==========================================================================
   pb-v2.css — PlayBets365 v2 theme (dark + emerald)
   Loaded LAST, scoped to body.pb-v2. Remove the body class to fall back.

   Strategy: the legacy theme (main/custom/cvx-theme) is already token-driven
   via :root custom properties. We REDEFINE those tokens under .pb-v2 so the
   whole site re-skins at once, then add v2-only component primitives.
   ========================================================================== */

body.pb-v2 {
  /* ---- v2 palette ------------------------------------------------------ */
  --pb-bg:        #1B1D22;   /* app ground                */
  --pb-surface:   #24272E;   /* cards, tiles              */
  --pb-surface-2: #15171B;   /* bars, wells, bottom nav   */
  --pb-line:      rgba(255,255,255,.08);
  --pb-text:      #FFFFFF;
  --pb-dim:       rgba(255,255,255,.60);
  --pb-faint:     rgba(255,255,255,.38);
  --pb-green:     #35C96B;   /* PRIMARY  */
  --pb-green-hi:  #3DD87D;
  --pb-green-dk:  #26A354;
  --pb-yellow:    #F5D442;   /* SECONDARY */
  --pb-yellow-dk: #D4B520;
  --pb-live:      #68D491;
  --pb-danger:    #FF5E3A;

  /* ---- remap legacy tokens (this is what re-skins the whole site) ------- */
  --base-h: 142; --base-s: 58%; --base-l: 50%;

  --bl-accent:      #35C96B;
  --bl-accent-dark: #26A354;
  --accent-glow:    rgba(53,201,107,.28);
  --gold:           #35C96B;
  --gold-soft:      #3DD87D;
  --gold-glow:      rgba(53,201,107,.32);
  --gx-theme:       #35C96B;

  /* retire the clashing cyan -> secondary yellow */
  --ice:     #F5D442;
  --ice-dim: #D4B520;

  --green: #35C96B;
  --red:   #FF5E3A;

  --surface-0: #131519;
  --surface-1: #1B1D22;
  --surface-2: #1F2229;
  --surface-3: #24272E;
  --surface-4: #2A2E36;
  --surface-5: #333842;

  --glass-bg:     rgba(27,29,34,.88);
  --glass-border: rgba(255,255,255,.08);

  --text-primary:   #FFFFFF;
  --text-secondary: rgba(255,255,255,.60);
  --text-muted:     rgba(255,255,255,.38);

  --shadow-accent: 0 4px 28px rgba(53,201,107,.25);
  --shadow-gold:   0 4px 28px rgba(53,201,107,.28);

  /* calmer ground: drop the gold+cyan mesh for a subtle green wash */
  --cvx-mesh:
    radial-gradient(ellipse 80% 60% at 10% -10%, rgba(53,201,107,.10), transparent 55%),
    radial-gradient(ellipse 60% 45% at 95% 5%,   rgba(53,201,107,.05), transparent 50%);
}

/* ---- ground ------------------------------------------------------------ */
body.pb-v2 {
  background-color: var(--pb-bg);
  color: var(--pb-text);
  -webkit-font-smoothing: antialiased;
}

/* ---- scrollbar --------------------------------------------------------- */
body.pb-v2 ::-webkit-scrollbar { width: 8px; height: 8px; }
body.pb-v2 ::-webkit-scrollbar-track { background: var(--pb-surface-2); }
body.pb-v2 ::-webkit-scrollbar-thumb {
  background: #3A3F49; border-radius: 999px;
}
body.pb-v2 ::-webkit-scrollbar-thumb:hover { background: var(--pb-green-dk); }

/* ---- primary / secondary buttons -------------------------------------- */
body.pb-v2 .btn--base,
body.pb-v2 .btn--primary {
  background: linear-gradient(180deg, var(--pb-green-hi), var(--pb-green));
  border-color: transparent;
  color: #06240F;
  font-weight: 700;
  box-shadow: 0 6px 18px -8px rgba(53,201,107,.9);
}
body.pb-v2 .btn--base:hover,
body.pb-v2 .btn--primary:hover {
  background: linear-gradient(180deg, var(--pb-green), var(--pb-green-dk));
  color: #06240F;
}
body.pb-v2 .btn--warning,
body.pb-v2 .btn--secondary {
  background: var(--pb-yellow);
  border-color: transparent;
  color: #2A2200;
  font-weight: 700;
}
body.pb-v2 .btn--outline {
  border-color: var(--pb-line);
  color: var(--pb-text);
  background: rgba(255,255,255,.05);
}
body.pb-v2 .btn--outline:hover {
  border-color: var(--pb-green);
  color: var(--pb-green-hi);
}

/* ---- v2 primitives (used by later stages) ------------------------------ */
body.pb-v2 .pb-card {
  background: var(--pb-surface);
  border: 1px solid var(--pb-line);
  border-radius: 12px;
}
body.pb-v2 .pb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 700; font-size: .92rem; line-height: 1;
  padding: 12px 18px; border-radius: 12px; border: 0;
  text-decoration: none; cursor: pointer;
  transition: filter .18s ease, transform .18s ease;
}
body.pb-v2 .pb-btn:active { transform: translateY(1px); }
body.pb-v2 .pb-btn--green {
  background: linear-gradient(180deg, var(--pb-green-hi), var(--pb-green));
  color: #06240F;
  box-shadow: 0 6px 18px -8px rgba(53,201,107,.9);
}
body.pb-v2 .pb-btn--yellow { background: var(--pb-yellow); color: #2A2200; }
body.pb-v2 .pb-btn--ghost {
  background: rgba(255,255,255,.06);
  border: 1px solid var(--pb-line);
  color: var(--pb-text);
}
body.pb-v2 .pb-btn:hover { filter: brightness(1.06); }

body.pb-v2 .pb-sect-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 18px 0 10px;
}
body.pb-v2 .pb-sect-head h2,
body.pb-v2 .pb-sect-head h3 {
  font-family: var(--font-display, 'Outfit', sans-serif);
  font-size: 1rem; font-weight: 800; margin: 0; color: var(--pb-text);
}
body.pb-v2 .pb-sect-head a {
  font-size: .78rem; font-weight: 700; color: var(--pb-dim);
  text-decoration: none; white-space: nowrap;
}
body.pb-v2 .pb-sect-head a:hover { color: var(--pb-green-hi); }

/* ---- form controls ----------------------------------------------------- */
body.pb-v2 .form--control,
body.pb-v2 .form-control {
  background: var(--pb-surface-2);
  border: 1px solid var(--pb-line);
  color: var(--pb-text);
  border-radius: 10px;
}
body.pb-v2 .form--control:focus,
body.pb-v2 .form-control:focus {
  background: var(--pb-surface-2);
  border-color: var(--pb-green);
  color: var(--pb-text);
  box-shadow: 0 0 0 3px rgba(53,201,107,.18);
}
body.pb-v2 .form--control::placeholder,
body.pb-v2 .form-control::placeholder { color: var(--pb-faint); }

/* ---- focus visibility (a11y) ------------------------------------------ */
body.pb-v2 a:focus-visible,
body.pb-v2 button:focus-visible,
body.pb-v2 input:focus-visible,
body.pb-v2 select:focus-visible {
  outline: 2px solid var(--pb-green);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  body.pb-v2 *, body.pb-v2 *::before, body.pb-v2 *::after {
    animation-duration: .001ms !important; transition-duration: .001ms !important;
  }
}

/* ==========================================================================
   Stage 2 — wallet pill (always visible on mobile) + wallet bottom sheet
   ========================================================================== */

body.pb-v2 .pb-wallet {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 5px 5px 11px;
  background: var(--pb-surface-2);
  border: 1px solid var(--pb-line);
  border-radius: var(--r-pill, 999px);
  color: var(--pb-text);
  font-family: var(--font-body, inherit);
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  max-width: 46vw;
}
body.pb-v2 .pb-wallet:hover { border-color: rgba(53,201,107,.45); }
body.pb-v2 .pb-wallet__cur {
  font-size: .62rem; font-weight: 800; letter-spacing: .06em;
  color: var(--pb-faint);
}
body.pb-v2 .pb-wallet__amt {
  font-size: .95rem; font-weight: 800;
  font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis;
}
body.pb-v2 .pb-wallet__add {
  flex: 0 0 auto;
  width: 24px; height: 24px; display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--pb-green-hi), var(--pb-green));
  color: #06240F; font-size: 1rem;
  box-shadow: 0 4px 12px -5px rgba(53,201,107,.95);
}
@media (max-width: 380px) {
  body.pb-v2 .pb-wallet { padding-left: 8px; gap: 5px; }
  body.pb-v2 .pb-wallet__cur { display: none; }
}

/* ---- bottom sheet ------------------------------------------------------ */
body.pb-v2 .pb-sheet {
  background: var(--pb-surface);
  color: var(--pb-text);
  border-top-left-radius: 18px; border-top-right-radius: 18px;
  border-top: 1px solid var(--pb-line);
  height: auto; max-height: 88vh;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
body.pb-v2 .pb-sheet__head {
  border-bottom: 1px solid var(--pb-line);
  padding: 14px 18px;
  position: relative;
}
/* grab handle */
body.pb-v2 .pb-sheet__head::before {
  content: ""; position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  width: 38px; height: 4px; border-radius: 999px; background: rgba(255,255,255,.18);
}
body.pb-v2 .pb-sheet__title {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-display, inherit);
  font-size: 1rem; font-weight: 800; margin: 0; color: var(--pb-text);
}
body.pb-v2 .pb-sheet__title i { color: var(--pb-green); }
body.pb-v2 .pb-sheet__close {
  background: transparent; border: 0; color: var(--pb-dim);
  font-size: 1.6rem; line-height: 1; padding: 0 4px; cursor: pointer;
}
body.pb-v2 .pb-sheet__close:hover { color: var(--pb-text); }
body.pb-v2 .pb-sheet__body { padding: 16px 18px 22px; }

body.pb-v2 .pb-sheet__balrow {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--pb-surface-2);
  border: 1px solid var(--pb-line);
  border-radius: 14px; padding: 14px 16px; margin-bottom: 14px;
}
body.pb-v2 .pb-sheet__ballabel { font-size: .74rem; color: var(--pb-dim); font-weight: 600; }
body.pb-v2 .pb-sheet__bal {
  font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; color: var(--pb-text);
}
body.pb-v2 .pb-sheet__bal em {
  font-style: normal; font-size: .8rem; font-weight: 700; color: var(--pb-faint);
  margin-left: 4px;
}
body.pb-v2 .pb-sheet__note {
  display: flex; align-items: flex-start; gap: 7px;
  font-size: .76rem; color: var(--pb-dim); margin: 0 0 14px;
  background: rgba(245,212,66,.08);
  border: 1px solid rgba(245,212,66,.22);
  border-radius: 10px; padding: 9px 11px;
}
body.pb-v2 .pb-sheet__note i { color: var(--pb-yellow); margin-top: 1px; }

body.pb-v2 .pb-sheet__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
body.pb-v2 .pb-sheet__act { width: 100%; padding: 14px 10px; font-size: .95rem; }

body.pb-v2 .pb-sheet__link {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 14px; padding: 12px 14px;
  background: var(--pb-surface-2); border: 1px solid var(--pb-line);
  border-radius: 12px;
  color: var(--pb-dim); font-size: .84rem; font-weight: 600; text-decoration: none;
}
body.pb-v2 .pb-sheet__link:hover { color: var(--pb-text); border-color: rgba(53,201,107,.35); }

/* ==========================================================================
   Stage 3 — persistent bottom tab bar with raised centre FAB
   ========================================================================== */

body.pb-v2 .pb-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
  display: none;                     /* mobile-only; shown in the query below */
  align-items: flex-end;
  justify-content: space-around;
  gap: 2px;
  background: var(--pb-surface-2);
  border-top: 1px solid var(--pb-line);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -8px 24px -12px rgba(0,0,0,.85);
}
@media (max-width: 991.98px) { body.pb-v2 .pb-tabbar { display: flex; } }

body.pb-v2 .pb-tab {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 6px 2px 4px;
  color: var(--pb-faint);
  text-decoration: none;
  font-size: .63rem; font-weight: 700; letter-spacing: .01em;
  line-height: 1.1;
  transition: color .15s ease;
}
body.pb-v2 .pb-tab i { font-size: 1.28rem; line-height: 1; }
body.pb-v2 .pb-tab span {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.pb-v2 .pb-tab:hover { color: var(--pb-dim); }
body.pb-v2 .pb-tab.is-active { color: var(--pb-green); }

/* raised centre FAB */
body.pb-v2 .pb-tab--fab { position: relative; color: var(--pb-text); }
body.pb-v2 .pb-fab {
  display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 50%;
  margin-top: -24px;
  background: linear-gradient(180deg, var(--pb-green-hi), var(--pb-green));
  color: #06240F; font-size: 1.5rem;
  border: 4px solid var(--pb-surface-2);
  box-shadow: 0 8px 22px -8px rgba(53,201,107,.95);
  transition: transform .18s ease;
}
body.pb-v2 .pb-tab--fab:active .pb-fab { transform: scale(.94); }
body.pb-v2 .pb-fab__label {
  font-size: .63rem; font-weight: 800; color: var(--pb-green);
  margin-top: 1px;
}

/* keep page content clear of the fixed bar */
@media (max-width: 991.98px) {
  body.pb-v2 .bl-public-main,
  body.pb-v2 .user-dashboard,
  body.pb-v2 .home-page,
  body.pb-v2 main {
    padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px));
  }
  /* legacy bar is replaced by .pb-tabbar */
  body.pb-v2 .dashboard-mobile-bottom-nav { display: none !important; }
}

/* ==========================================================================
   Stage 4 — art-first game tiles + tighter lobby rhythm
   ========================================================================== */

/* tile: let the artwork carry it, minimal chrome underneath */
body.pb-v2 .gx-game-card {
  background: var(--pb-surface);
  border: 1px solid var(--pb-line);
  border-radius: 12px;
  overflow: hidden;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
body.pb-v2 .gx-game-card:hover {
  transform: translateY(-3px);
  border-color: rgba(53,201,107,.45);
  box-shadow: 0 14px 30px -18px rgba(0,0,0,.9);
}
body.pb-v2 .gx-game-thumb {
  aspect-ratio: 1 / 1;          /* square art reads better in a 2-col grid */
  background: var(--pb-surface-2);
}
body.pb-v2 .gx-game-thumb img { width: 100%; height: 100%; object-fit: cover; }

body.pb-v2 .gx-game-body {
  padding: 8px 10px 10px;
  display: flex; flex-direction: column; gap: 2px;
}
body.pb-v2 .gx-game-name {
  font-size: .78rem; font-weight: 700; color: var(--pb-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.pb-v2 .gx-provider-label {
  font-size: .64rem; font-weight: 600; color: var(--pb-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* meta row now only holds the play affordance — keep it out of the flow */
body.pb-v2 .gx-game-meta {
  display: flex; justify-content: flex-end; align-items: center;
  margin: 0; min-height: 0;
}
body.pb-v2 .gx-game-meta .gx-play-btn {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(180deg, var(--pb-green-hi), var(--pb-green));
  color: #06240F; font-size: .8rem;
  opacity: 0; transform: scale(.8);
  transition: opacity .18s ease, transform .18s ease;
}
body.pb-v2 .gx-game-card:hover .gx-play-btn { opacity: 1; transform: scale(1); }

/* corner badges */
body.pb-v2 .gx-badge {
  font-size: .55rem; font-weight: 800; letter-spacing: .05em;
  padding: 3px 7px; border-radius: 6px;
}
body.pb-v2 .gx-badge--featured { background: var(--pb-green); color: #06240F; }
body.pb-v2 .gx-badge--trending { background: var(--pb-yellow); color: #2A2200; }

/* rail headings + see-all */
body.pb-v2 .gx-rail-head { margin-bottom: 8px; }
body.pb-v2 .gx-see-all {
  background: transparent; border: 0;
  color: var(--pb-dim); font-size: .76rem; font-weight: 700;
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
}
body.pb-v2 .gx-see-all:hover { color: var(--pb-green-hi); }

/* tighter mobile grid so more art is visible per screen */
@media (max-width: 575.98px) {
  body.pb-v2 .gx-game-grid { gap: 9px; }
  body.pb-v2 .gx-game-body { padding: 7px 8px 9px; }
  body.pb-v2 .gx-game-name { font-size: .74rem; }
  body.pb-v2 .gx-section-block { margin-bottom: 18px; }
}

/* ==========================================================================
   Stage 5 — account, payments, auth, sports surfaces
   (classes/colours only — no form markup, names or actions were changed)
   ========================================================================== */

/* cards & panels */
body.pb-v2 .card,
body.pb-v2 .custom--card,
body.pb-v2 .stat-card,
body.pb-v2 .dashboard-card {
  background: var(--pb-surface);
  border: 1px solid var(--pb-line);
  border-radius: 14px;
  color: var(--pb-text);
}
body.pb-v2 .card-header { background: transparent; border-bottom: 1px solid var(--pb-line); }

/* dashboard stat tiles */
body.pb-v2 .stat-card__body { color: var(--pb-text); }
body.pb-v2 .stat-card__change.up   { color: var(--pb-green); }
body.pb-v2 .stat-card__change.down { color: var(--pb-danger); }

/* deposit / withdraw gateway list */
body.pb-v2 .payment-item,
body.pb-v2 .payment-system-list .payment-item {
  background: var(--pb-surface-2);
  border: 1px solid var(--pb-line);
  border-radius: 12px;
  transition: border-color .15s ease, background .15s ease;
}
body.pb-v2 .payment-item:hover { border-color: rgba(53,201,107,.45); }
body.pb-v2 .payment-item__radio:checked ~ *,
body.pb-v2 .payment-item.selected {
  border-color: var(--pb-green);
  background: rgba(53,201,107,.08);
}
body.pb-v2 .gateway-currency,
body.pb-v2 .gateway-limit { color: var(--pb-dim); font-size: .78rem; }
body.pb-v2 .total-amount { color: var(--pb-green); font-weight: 800; }

/* auth pages */
body.pb-v2 .cvx-auth-form .form--control { background: var(--pb-surface-2); }
body.pb-v2 .cvx-auth__actions .btn--base { width: 100%; }
body.pb-v2 .cvx-auth__switch a { color: var(--pb-green); font-weight: 700; }

/* sports landing (sbl-*) — align the legacy "gold" button name to the new palette */
body.pb-v2 .sbl-btn--gold {
  color: #06240F;
  background: linear-gradient(180deg, var(--pb-green-hi), var(--pb-green));
  box-shadow: 0 12px 28px -12px rgba(53,201,107,.85);
}
body.pb-v2 .sbl-card,
body.pb-v2 .sbl-step,
body.pb-v2 .sbl-faq__item { background: var(--pb-surface); border-color: var(--pb-line); }
body.pb-v2 .sbl-card:hover { border-color: rgba(53,201,107,.5); }

/* tables (transactions, bet history) */
body.pb-v2 .table,
body.pb-v2 .custom--table { color: var(--pb-text); }
body.pb-v2 .table thead th,
body.pb-v2 .custom--table thead th {
  background: var(--pb-surface-2); color: var(--pb-dim);
  border-color: var(--pb-line); font-size: .76rem; font-weight: 700;
}
body.pb-v2 .table tbody td,
body.pb-v2 .custom--table tbody td {
  border-color: var(--pb-line); font-variant-numeric: tabular-nums;
}

/* sidebar */
body.pb-v2 .dashboard-menu__link { color: var(--pb-dim); border-radius: 10px; }
body.pb-v2 .dashboard-menu__link:hover { color: var(--pb-text); background: rgba(255,255,255,.05); }
body.pb-v2 .dashboard-menu__link.active {
  color: var(--pb-green); background: rgba(53,201,107,.10);
}

/* ==========================================================================
   Stage 6 — in-house Aviator: bets feed chrome, history chips, bet panels
   ========================================================================== */

body.pb-v2 .pbav-feed__head {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 14px;
  background: var(--pb-surface-2);
  border-bottom: 1px solid var(--pb-line);
}
body.pb-v2 .pbav-tabs {
  display: flex; gap: 4px;
  background: rgba(0,0,0,.35); border-radius: 999px; padding: 3px;
}
body.pb-v2 .pbav-tab {
  flex: 1 1 0; border: 0; background: transparent; cursor: pointer;
  color: var(--pb-dim); font-size: .74rem; font-weight: 700;
  padding: 7px 6px; border-radius: 999px; white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
body.pb-v2 .pbav-tab:hover { color: var(--pb-text); }
body.pb-v2 .pbav-tab.active { background: var(--pb-surface); color: var(--pb-text); }

body.pb-v2 .pbav-feed__meta {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
body.pb-v2 .pbav-count {
  font-size: .68rem; font-weight: 700; letter-spacing: .05em; color: var(--pb-faint);
}
body.pb-v2 .pbav-count b { color: var(--pb-text); font-variant-numeric: tabular-nums; }
body.pb-v2 .pbav-prev {
  border: 1px solid var(--pb-line); background: transparent;
  color: var(--pb-dim); font-size: .68rem; font-weight: 700;
  padding: 5px 10px; border-radius: 999px; cursor: pointer; white-space: nowrap;
}
body.pb-v2 .pbav-prev:hover  { color: var(--pb-text); border-color: rgba(53,201,107,.45); }
body.pb-v2 .pbav-prev.active { color: #06240F; background: var(--pb-green); border-color: transparent; }

/* multiplier history chips — colour-coded by size */
body.pb-v2 #recentMultipliers { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
body.pb-v2 #recentMultipliers::-webkit-scrollbar { display: none; }
body.pb-v2 #recentMultipliers .badge,
body.pb-v2 .pbav-chip {
  flex: 0 0 auto;
  font-size: .7rem; font-weight: 800; font-variant-numeric: tabular-nums;
  padding: 4px 9px; border-radius: 999px;
  background: rgba(255,255,255,.07); border: 1px solid var(--pb-line);
}
body.pb-v2 .pbav-chip--lo  { color: #6BA4FF; border-color: rgba(107,164,255,.35); }
body.pb-v2 .pbav-chip--mid { color: #B98CFF; border-color: rgba(185,140,255,.35); }
body.pb-v2 .pbav-chip--hi  { color: #FF7ACB; border-color: rgba(255,122,203,.4); }

/* bet panels + quick-amount chips */
body.pb-v2 .bet-control-panel {
  background: var(--pb-surface);
  border: 1px solid var(--pb-line);
  border-radius: 14px;
}
body.pb-v2 .bet-quick-btn {
  background: rgba(255,255,255,.06);
  border: 1px solid var(--pb-line);
  color: var(--pb-dim);
  font-size: .74rem; font-weight: 700;
  border-radius: 8px; padding: 6px 0;
}
body.pb-v2 .bet-quick-btn:hover {
  color: var(--pb-text); border-color: rgba(53,201,107,.45);
  background: rgba(53,201,107,.10);
}
body.pb-v2 .bet-amount-input {
  background: var(--pb-surface-2); border: 1px solid var(--pb-line);
  color: var(--pb-text); font-weight: 800; font-variant-numeric: tabular-nums;
  border-radius: 10px;
}
body.pb-v2 .play-btn {
  background: linear-gradient(180deg, var(--pb-green-hi), var(--pb-green));
  border: 0; color: #06240F; font-weight: 800;
  border-radius: 12px;
  box-shadow: 0 8px 20px -10px rgba(53,201,107,.95);
}
body.pb-v2 .cashout-btn {
  background: linear-gradient(180deg, #FFE071, var(--pb-yellow));
  border: 0; color: #2A2200; font-weight: 800; border-radius: 12px;
}
body.pb-v2 #liveBetsContainer { background: var(--pb-surface-2); }

/* ==========================================================================
   Stage 7 — Aviator: Spribe-style layout + big, obvious controls
   ========================================================================== */

/* mobile order: game first, bets feed after (DOM has feed first) */
@media (max-width: 1199.98px) {
  body.pb-v2 .pbav-row { display: flex; flex-direction: column; }
  body.pb-v2 .pbav-col-game { order: 1; width: 100%; max-width: 100%; }
  body.pb-v2 .pbav-col-feed { order: 2; width: 100%; max-width: 100%; }
}

/* canvas shell */
body.pb-v2 .pbav-col-game .card {
  background: var(--pb-surface) !important;
  border: 1px solid var(--pb-line) !important;
}
body.pb-v2 #aviatorCanvas {
  background: radial-gradient(ellipse 70% 90% at 8% 100%, #2a1230 0%, #17111d 45%, #0d0b10 100%);
  border-radius: 12px;
}

/* history chips row — pinned, compact */
body.pb-v2 #recentMultipliers {
  padding: 8px 10px !important;
  background: var(--pb-surface-2) !important;
  border-radius: 12px;
}

/* bet panels: big, thumb-friendly */
body.pb-v2 .bet-control-panel { padding: 14px !important; }
body.pb-v2 .bet-amount-input {
  height: 48px; font-size: 1.15rem; text-align: center;
}
body.pb-v2 .bet-quick-btn { min-height: 36px; font-size: .8rem; }

/* the BET button — unmistakable */
body.pb-v2 .play-btn,
body.pb-v2 .cashout-btn {
  min-height: 62px;
  font-size: 1.05rem;
  letter-spacing: .01em;
  text-transform: uppercase;
  width: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  line-height: 1.15;
}
body.pb-v2 .play-btn small,
body.pb-v2 .cashout-btn small {
  display: block; font-size: .8rem; font-weight: 800; opacity: .85; text-transform: none;
}

/* Bet | Auto segmented toggle */
body.pb-v2 .pbav-mode {
  display: flex; gap: 3px; background: rgba(0,0,0,.35);
  border-radius: 999px; padding: 3px; margin-bottom: 10px;
}
body.pb-v2 .pbav-mode button {
  flex: 1; border: 0; background: transparent; cursor: pointer;
  color: var(--pb-dim); font-size: .78rem; font-weight: 700;
  padding: 7px 4px; border-radius: 999px;
}
body.pb-v2 .pbav-mode button.active { background: var(--pb-surface); color: var(--pb-text); }

/* feed height sane on mobile */
@media (max-width: 991.98px) {
  body.pb-v2 #liveBetsContainer { max-height: 320px !important; height: auto !important; min-height: 180px; }
}

/* ==========================================================================
   Stage 8 — auth + dashboard: large, plain, thumb-friendly
   (built for players who are not technical: big targets, clear labels)
   ========================================================================== */

/* ---- forms: everything at least 52px tall, labels legible -------------- */
body.pb-v2 .cvx-auth-form .form-label,
body.pb-v2 .user-dashboard .form-label {
  font-size: .88rem; font-weight: 700; color: var(--pb-text); margin-bottom: 6px;
}
body.pb-v2 .cvx-auth-form .form--control,
body.pb-v2 .cvx-auth-form .form-control,
body.pb-v2 .cvx-auth-form .form-select {
  min-height: 52px; font-size: 1rem; border-radius: 12px;
  background: var(--pb-surface-2); border: 1px solid var(--pb-line); color: var(--pb-text);
}
/* The password eye is ABSOLUTELY positioned by main.css with a hardcoded
   `top: 13px`, sized for the original ~44px input. Taller inputs pushed it out
   of the field and it collided with the checkbox below. Centre it instead so it
   fits any input height, and stop it forcing its own 52px box. */
body.pb-v2 .cvx-auth-form .input--group { position: relative; }
body.pb-v2 .cvx-auth-form .input--group .input-group-text,
body.pb-v2 .cvx-auth-form .input--group .pass-toggle {
  position: absolute; right: 6px; left: auto;
  top: 50%; transform: translateY(-50%);
  min-height: 0; height: 40px; min-width: 40px; width: 40px;
  display: grid; place-items: center;
  border: 0; background: transparent; border-radius: 10px;
  color: var(--pb-dim); font-size: 1.05rem; z-index: 3;
}
body.pb-v2 .cvx-auth-form .input--group .pass-toggle:hover { color: var(--pb-text); }
/* leave room for the eye so typed text never runs under it */
body.pb-v2 .cvx-auth-form .input--group > .form-control,
body.pb-v2 .cvx-auth-form .input--group > .form--control { padding-right: 52px; }

body.pb-v2 .cvx-auth-form .btn--base,
body.pb-v2 .cvx-auth__actions .btn {
  min-height: 56px; font-size: 1.05rem; font-weight: 800; border-radius: 14px; width: 100%;
}
body.pb-v2 .cvx-auth-form small.text-muted { font-size: .78rem; color: var(--pb-dim) !important; }
body.pb-v2 .cvx-auth-form .text--danger { font-size: .82rem; }
/* checkbox big enough to tap */
body.pb-v2 .cvx-auth-form .form-check-input { width: 22px; height: 22px; margin-top: .1rem; }
body.pb-v2 .cvx-auth-form .form-check-input:checked {
  background-color: var(--pb-green); border-color: var(--pb-green);
}
body.pb-v2 .pass-toggle { cursor: pointer; min-width: 52px; justify-content: center; }

/* ---- dashboard: big balance card + large action tiles ----------------- */
body.pb-v2 .pb-balance-card {
  background: linear-gradient(135deg, rgba(53,201,107,.16), rgba(53,201,107,.04));
  border: 1px solid rgba(53,201,107,.28);
  border-radius: 18px; padding: 20px;
  display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px;
}
body.pb-v2 .pb-balance-card__label { font-size: .8rem; color: var(--pb-dim); font-weight: 600; }
body.pb-v2 .pb-balance-card__amt {
  font-size: 2.1rem; font-weight: 800; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; color: var(--pb-text);
}
body.pb-v2 .pb-balance-card__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
body.pb-v2 .pb-balance-card__actions .pb-btn { min-height: 50px; }

body.pb-v2 .pb-actions {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 10px;
}
body.pb-v2 .pb-action {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  min-height: 96px; padding: 14px 8px;
  background: var(--pb-surface); border: 1px solid var(--pb-line);
  border-radius: 16px; text-decoration: none; text-align: center;
  transition: transform .15s ease, border-color .15s ease;
}
body.pb-v2 .pb-action:hover { transform: translateY(-2px); border-color: rgba(53,201,107,.45); }
body.pb-v2 .pb-action__ico {
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
  background: rgba(53,201,107,.12); color: var(--pb-green); font-size: 1.4rem;
}
body.pb-v2 .pb-action__label {
  font-size: .8rem; font-weight: 700; color: var(--pb-text); line-height: 1.2;
}

/* ==========================================================================
   Stage 9 — sticky top + bottom chrome, larger touch targets, responsiveness
   ========================================================================== */

/* ---- TOP NAV: sticky at the top on every scroll ------------------------ */
/* ONLY the outer header sticks. .cvx-chrome lives INSIDE it — making both
   sticky stacked two bars on top of each other (blank strip + clipped items). */
body.pb-v2 .header-primary,
body.pb-v2 .user-header-primary,
body.pb-v2 .bl-public-header {
  position: sticky; top: 0; z-index: 1040;
  background: var(--pb-surface-2);
  border-bottom: 1px solid var(--pb-line);
  backdrop-filter: saturate(140%) blur(8px);
}
body.pb-v2 .cvx-chrome {
  position: static; z-index: auto; background: transparent;
  border-bottom: 0; backdrop-filter: none;
}
/* a little taller + roomier */
body.pb-v2 .cvx-nav,
body.pb-v2 .header-fluid-custom-parent {
  min-height: 62px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
body.pb-v2 .cvx-brand img { height: 38px; width: auto; }
/* Burger: keep the ORIGINAL flex-column layout. The spans are empty elements
   that get their width by stretching in a column flexbox — an earlier
   `display:grid; place-items:center` here collapsed them to 2px x 0px, so the
   three lines vanished. Only the box size is changed. */
body.pb-v2 .cvx-burger {
  width: 42px; height: 42px;
  display: flex; flex-direction: column; justify-content: center; align-items: stretch;
  gap: 5px; padding: 11px;
}
body.pb-v2 .cvx-burger span {
  display: block; width: 100%; height: 2px;
  background: var(--pb-text); border-radius: 2px;
}
body.pb-v2 .cvx-links a { font-size: .94rem; padding: 10px 12px; }

/* wallet pill scales with the taller bar */
body.pb-v2 .pb-wallet { padding: 7px 7px 7px 13px; }
body.pb-v2 .pb-wallet__amt { font-size: 1rem; }
body.pb-v2 .pb-wallet__add { width: 28px; height: 28px; font-size: 1.1rem; }

/* ---- BOTTOM NAV: bigger, still fixed ---------------------------------- */
body.pb-v2 .pb-tabbar {
  padding: 8px 4px calc(8px + env(safe-area-inset-bottom, 0px));
}
body.pb-v2 .pb-tab { padding: 8px 2px 5px; font-size: .68rem; gap: 4px; }
body.pb-v2 .pb-tab i { font-size: 1.45rem; }
body.pb-v2 .pb-fab {
  width: 58px; height: 58px; margin-top: -26px; font-size: 1.65rem;
}
body.pb-v2 .pb-fab__label { font-size: .66rem; }

/* content clearance for the taller bar */
@media (max-width: 991.98px) {
  body.pb-v2 .bl-public-main,
  body.pb-v2 .user-dashboard,
  body.pb-v2 .home-page,
  body.pb-v2 main {
    padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px));
  }
}

/* ---- RESPONSIVENESS: stop horizontal overflow anywhere ---------------- */
body.pb-v2 { overflow-x: hidden; }
body.pb-v2 img,
body.pb-v2 video,
body.pb-v2 canvas,
body.pb-v2 iframe { max-width: 100%; }
/* wide content scrolls inside itself, never the page */
body.pb-v2 .table-responsive,
body.pb-v2 .custom--table,
body.pb-v2 pre { overflow-x: auto; -webkit-overflow-scrolling: touch; }
body.pb-v2 .table { min-width: 0; }
/* long words / ids never blow out a card */
body.pb-v2 .card,
body.pb-v2 .pb-card,
body.pb-v2 .gx-game-card { overflow-wrap: anywhere; }

/* small phones: keep the chrome usable */
@media (max-width: 400px) {
  body.pb-v2 .cvx-nav, body.pb-v2 .header-fluid-custom-parent { min-height: 56px; gap: 6px; }
  body.pb-v2 .cvx-brand img { height: 32px; }
  body.pb-v2 .cvx-brand__name { display: none; }
  body.pb-v2 .pb-tab i { font-size: 1.35rem; }
  body.pb-v2 .pb-fab { width: 54px; height: 54px; }
  body.pb-v2 .container, body.pb-v2 .container-fluid { padding-left: 12px; padding-right: 12px; }
}

/* tablets: don't strand desktop-only chrome */
@media (min-width: 992px) {
  body.pb-v2 .pb-tabbar { display: none; }
}

/* ---- nav bar: no overlap, nothing clipped ----------------------------- */
body.pb-v2 .cvx-nav,
body.pb-v2 .header-fluid-custom-parent {
  width: 100%; flex-wrap: nowrap; min-width: 0;
}
body.pb-v2 .cvx-nav__left,
body.pb-v2 .cvx-nav__right { min-width: 0; display: flex; align-items: center; gap: 8px; }
body.pb-v2 .cvx-nav__right { margin-left: auto; flex-shrink: 0; }
/* desktop link row: hidden on mobile (burger handles it) — never leave a gap */
@media (max-width: 991.98px) {
  body.pb-v2 .cvx-links { display: none !important; }
}
@media (min-width: 992px) {
  body.pb-v2 .cvx-links { display: flex; align-items: center; gap: 2px; }
  body.pb-v2 .cvx-links a { white-space: nowrap; }
}
/* brand can shrink, buttons never squash */
body.pb-v2 .cvx-brand { flex-shrink: 1; min-width: 0; overflow: hidden; }
body.pb-v2 .cvx-brand__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- lobby end: last rows must clear the fixed tab bar ---------------- */
@media (max-width: 991.98px) {
  body.pb-v2 .gx-casino,
  body.pb-v2 .gx-section-block--catalogue,
  body.pb-v2 #gxBrowseCatalogue { padding-bottom: 8px; }
  /* the real clearance lives on the scroll container, plus a spacer below */
  body.pb-v2 .bl-public-main::after,
  body.pb-v2 .user-dashboard::after {
    content: ""; display: block;
    height: calc(96px + env(safe-area-inset-bottom, 0px));
  }
  /* footer must not hide under the bar either */
  body.pb-v2 .footer-bottom { padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)); }
}

/* ---- guaranteed clearance for the fixed tab bar -----------------------
   The footer sits OUTSIDE <main>, so padding on main/.user-dashboard can
   never protect it. Reserve the space on <body> itself: the tab bar is
   position:fixed (out of flow), so this simply ends the document above it. */
@media (max-width: 991.98px) {
  body.pb-v2 { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  /* drop the earlier per-container hacks so spacing isn't doubled */
  body.pb-v2 .bl-public-main,
  body.pb-v2 .user-dashboard,
  body.pb-v2 .home-page,
  body.pb-v2 main { padding-bottom: 0; }
  body.pb-v2 .bl-public-main::after,
  body.pb-v2 .user-dashboard::after { content: none; }
  body.pb-v2 .footer-bottom { padding-bottom: 14px; }
}

/* Robust fallback: plain px first (always parses), then upgrade with the
   safe-area inset only where env() is actually supported. A calc() that
   fails to parse drops the WHOLE declaration, which is why the earlier
   calc(84px + env(...)) silently left padding-bottom at 0. */
@media (max-width: 991.98px) {
  body.pb-v2 { padding-bottom: 84px; }
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  @media (max-width: 991.98px) {
    body.pb-v2 { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  }
}

/* ==========================================================================
   Round 2 — full-bleed lobby (1GO style)
   The lobby .container carried 12px padding AND 12px auto-margin per side,
   so #gameGrid rendered 342px inside a 390px viewport (48px wasted) and the
   rails clipped mid-card at that inset. Reclaim it, then let rails bleed.
   ========================================================================== */
@media (max-width: 991.98px) {
  body.pb-v2 .gx-casino > .container,
  body.pb-v2 .container.gx-lobby-body {
    max-width: 100%;
    margin-left: 0; margin-right: 0;
    padding-left: 10px; padding-right: 10px;
  }

  /* horizontal rails scroll from the true screen edge, first/last card inset */
  body.pb-v2 .sportnav__row,
  body.pb-v2 .gx-cat-pills,
  body.pb-v2 .gx-provider-strip,
  body.pb-v2 .gx-rail,
  body.pb-v2 .gx-banner-swiper {
    margin-left: -10px; margin-right: -10px;
    padding-left: 10px; padding-right: 10px;
    scroll-padding-left: 10px; scroll-padding-right: 10px;
  }

  /* tiles grow into the reclaimed width */
  body.pb-v2 .gx-game-grid { gap: 10px; }
}

/* the page itself must never scroll sideways, whatever bleeds inside it */
body.pb-v2 { max-width: 100vw; }

/* ==========================================================================
   Round 2 — dashboard: ONE card system
   Was 4 competing systems (pb-*, stat-card, Bootstrap alert-*, bare .card with
   inline radius) + hardcoded cyan #00d4ff fighting the green theme.
   ========================================================================== */

/* every card on the dashboard speaks the same language */
body.pb-v2 .user-dashboard .card,
body.pb-v2 .user-dashboard .stat-card {
  background: var(--pb-surface) !important;
  border: 1px solid var(--pb-line) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}
body.pb-v2 .user-dashboard .card-body { padding: 16px !important; }

/* one notice style for KYC / bonus / referral (replaces 3 Bootstrap alerts) */
body.pb-v2 .user-dashboard .alert {
  background: var(--pb-surface) !important;
  border: 1px solid var(--pb-line) !important;
  border-left: 3px solid var(--pb-green) !important;
  border-radius: 12px !important;
  color: var(--pb-text) !important;
  font-size: .86rem;
  padding: 12px 14px !important;
}
body.pb-v2 .user-dashboard .alert-warning { border-left-color: var(--pb-yellow) !important; }
body.pb-v2 .user-dashboard .alert-danger  { border-left-color: var(--pb-danger) !important; }
body.pb-v2 .user-dashboard .alert i { color: var(--pb-green); }
body.pb-v2 .user-dashboard .alert-warning i { color: var(--pb-yellow); }
body.pb-v2 .user-dashboard .alert-danger i  { color: var(--pb-danger); }

/* stat cards -> a compact, uniform strip (no 5 accent colours, no glow) */
body.pb-v2 .user-dashboard .stat-card {
  display: flex; align-items: center; gap: 10px;
  padding: 12px !important; min-height: 0;
}
body.pb-v2 .user-dashboard .stat-card__icon {
  width: 38px; height: 38px; flex: 0 0 auto;
  display: grid; place-items: center; border-radius: 10px;
  background: rgba(53,201,107,.12) !important; color: var(--pb-green) !important;
  font-size: 1.15rem;
}
body.pb-v2 .user-dashboard .stat-card__value {
  font-size: 1.15rem !important; font-weight: 800; color: var(--pb-text);
  font-variant-numeric: tabular-nums; line-height: 1.15;
}
body.pb-v2 .user-dashboard .stat-card__label {
  font-size: .72rem; color: var(--pb-dim); font-weight: 600;
}
body.pb-v2 .user-dashboard .stat-card__change { font-size: .68rem; }
body.pb-v2 .user-dashboard .stat-card__change.up   { color: var(--pb-green); }
body.pb-v2 .user-dashboard .stat-card__change.down { color: var(--pb-danger); }

/* kill the hardcoded cyan/navy that fights the theme */
body.pb-v2 .user-dashboard [style*="#00d4ff"],
body.pb-v2 .user-dashboard [style*="#e8f0fe"] { color: var(--pb-text) !important; }
body.pb-v2 .user-dashboard h6 { color: var(--pb-text) !important; font-size: .95rem; font-weight: 700; }

/* list rows in Recent Transactions / Recent Bets (currently classless + inline) */
body.pb-v2 .user-dashboard .card ul { margin: 0; padding: 0; list-style: none; }
body.pb-v2 .user-dashboard .card ul li {
  border-bottom: 1px solid var(--pb-line);
  padding: 11px 0 !important;
  font-size: .84rem;
}
body.pb-v2 .user-dashboard .card ul li:last-child { border-bottom: 0; }

/* action tiles: even rows on phones (was a ragged 3-across last row) */
@media (max-width: 575.98px) {
  body.pb-v2 .pb-actions { grid-template-columns: repeat(3, 1fr); }
  body.pb-v2 .pb-action { min-height: 86px; padding: 12px 6px; }
  body.pb-v2 .pb-action__ico { width: 38px; height: 38px; font-size: 1.2rem; }
  body.pb-v2 .pb-action__label { font-size: .72rem; }
}

/* ==========================================================================
   Round 2 — PWA install bar: lift it ABOVE the fixed tab bar
   It was bottom:12px, i.e. underneath the ~75px tab bar, so it rendered but
   was never visible. Also re-skinned to the v2 palette.
   ========================================================================== */
body.pb-v2 .cvx-pwa-install {
  bottom: calc(92px + env(safe-area-inset-bottom, 0px));
  z-index: 1035;                 /* under modals, above the tab bar */
}
body.pb-v2 .cvx-pwa-install__inner {
  background: var(--pb-surface);
  border: 1px solid rgba(53,201,107,.35);
  border-radius: 14px;
  padding: 12px 14px;
  gap: 12px;
  box-shadow: 0 14px 34px -18px rgba(0,0,0,.95);
}
body.pb-v2 .cvx-pwa-install__copy strong {
  color: var(--pb-text); font-size: .92rem; font-weight: 800; display: block;
}
body.pb-v2 .cvx-pwa-install__copy span { color: var(--pb-dim); font-size: .76rem; }
body.pb-v2 .cvx-pwa-install__btn {
  background: linear-gradient(180deg, var(--pb-green-hi), var(--pb-green));
  color: #06240F; border: 0; font-weight: 800; font-size: .88rem;
  padding: 11px 18px; border-radius: 11px; min-height: 44px; white-space: nowrap;
}
body.pb-v2 .cvx-pwa-install__dismiss {
  background: transparent; border: 0; color: var(--pb-faint);
  font-size: 1.5rem; line-height: 1; padding: 0 6px; min-width: 34px;
}
body.pb-v2 .cvx-pwa-install__help { color: var(--pb-dim); font-size: .74rem; margin-top: 8px; }

/* ==========================================================================
   Payment / withdraw method picker — logo badge + big tappable cards
   ========================================================================== */
body.pb-v2 .pay-ico {
  flex: 0 0 auto;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 12px;
  font-size: 1.45rem;
  border: 1px solid transparent;
}
body.pb-v2 .pay-ico--upi    { background: rgba(53,201,107,.14);  color: #35C96B; border-color: rgba(53,201,107,.30); }
body.pb-v2 .pay-ico--bank   { background: rgba(107,164,255,.14); color: #6BA4FF; border-color: rgba(107,164,255,.30); }
body.pb-v2 .pay-ico--crypto { background: rgba(245,212,66,.14);  color: #F5D442; border-color: rgba(245,212,66,.30); }
body.pb-v2 .pay-ico--card   { background: rgba(255,255,255,.08); color: #FFFFFF; border-color: rgba(255,255,255,.16); }

/* the row itself: big, obvious, thumb-friendly */
body.pb-v2 .payment-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 72px; padding: 12px 14px;
  background: var(--pb-surface);
  border: 1px solid var(--pb-line);
  border-radius: 14px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
body.pb-v2 .payment-item:hover { transform: translateY(-1px); border-color: rgba(53,201,107,.45); }
body.pb-v2 .payment-item__info { display: flex; align-items: center; gap: 11px; min-width: 0; }
body.pb-v2 .payment-item__name {
  font-size: .95rem; font-weight: 700; color: var(--pb-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.pb-v2 .payment-item__thumb { display: flex; align-items: center; }
body.pb-v2 .payment-item__thumb-img {
  width: 46px; height: 46px; object-fit: contain;
  border-radius: 10px; background: rgba(255,255,255,.06); padding: 4px;
}

/* clear selected state — a green ring + tick, not a hidden radio */
body.pb-v2 .payment-item__check {
  flex: 0 0 auto;
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.28);
  display: grid; place-items: center;
  transition: border-color .15s ease, background .15s ease;
}
body.pb-v2 .payment-item__check::after {
  content: ""; width: 10px; height: 10px; border-radius: 50%;
  background: transparent; transition: background .15s ease;
}
body.pb-v2 .payment-item__radio:checked + .payment-item,
body.pb-v2 .payment-item:has(.payment-item__radio:checked) {
  border-color: var(--pb-green);
  background: rgba(53,201,107,.08);
  box-shadow: 0 0 0 1px rgba(53,201,107,.35) inset;
}
body.pb-v2 .payment-item:has(.payment-item__radio:checked) .payment-item__check {
  border-color: var(--pb-green);
}
body.pb-v2 .payment-item:has(.payment-item__radio:checked) .payment-item__check::after {
  background: var(--pb-green);
}

/* ==========================================================================
   Auth (login / register) — full visual pass + the overlap root-cause fix
   ========================================================================== */

/* ROOT CAUSE: helper/validation text under fields is position:absolute in the
   legacy theme, so it sits OUT of flow and lands on the next field (the
   "Wallet currency / NOWPayments" note covered Mobile Number by 62px).
   Text must push layout, never overlay it. */
body.pb-v2 .cvx-auth-form small,
body.pb-v2 .cvx-auth-form .text--danger,
body.pb-v2 .cvx-auth-form .text-muted {
  position: static !important;
  display: block;
  margin-top: 6px;
  line-height: 1.45;
}

/* --- card ------------------------------------------------------------- */
body.pb-v2 .cvx-auth {
  min-height: 100%;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 18px 14px 28px;
}
body.pb-v2 .cvx-auth__card,
body.pb-v2 .cvx-auth-form {
  width: 100%; max-width: 460px; margin-inline: auto;
}
body.pb-v2 .cvx-auth__card {
  background: var(--pb-surface);
  border: 1px solid var(--pb-line);
  border-radius: 20px;
  padding: 24px 20px 22px;
  box-shadow: 0 24px 60px -34px rgba(0,0,0,.95);
  position: relative; overflow: hidden;
}
/* thin brand accent along the top edge */
body.pb-v2 .cvx-auth__card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--pb-green), var(--pb-yellow));
}
body.pb-v2 .cvx-auth__title {
  font-family: var(--font-display, 'Outfit', sans-serif);
  font-size: 1.5rem; font-weight: 800; color: var(--pb-text);
  margin: 0 0 4px; text-align: center;
}
body.pb-v2 .cvx-auth__lead {
  font-size: .88rem; color: var(--pb-dim);
  margin: 0 0 20px; text-align: center;
}

/* --- fields ----------------------------------------------------------- */
body.pb-v2 .cvx-auth-form .form-group { margin-bottom: 16px; }
body.pb-v2 .cvx-auth-form .form-label {
  font-size: .84rem; font-weight: 700; color: var(--pb-dim);
  margin-bottom: 7px; letter-spacing: .01em;
}
body.pb-v2 .cvx-auth-form .form--control,
body.pb-v2 .cvx-auth-form .form-control,
body.pb-v2 .cvx-auth-form .form-select {
  height: 52px; min-height: 52px;
  font-size: 1rem; font-weight: 600;
  padding: 0 14px;
  border-radius: 12px;
  background: var(--pb-surface-2);
  border: 1px solid var(--pb-line);
  color: var(--pb-text);
  transition: border-color .15s ease, box-shadow .15s ease;
}
body.pb-v2 .cvx-auth-form .form--control:focus,
body.pb-v2 .cvx-auth-form .form-control:focus,
body.pb-v2 .cvx-auth-form .form-select:focus {
  border-color: var(--pb-green);
  box-shadow: 0 0 0 3px rgba(53,201,107,.16);
}
/* dial-code addon on the left of the phone field */
body.pb-v2 .cvx-auth-form .cvx-auth-dial {
  position: static !important; transform: none !important;
  height: 52px; min-width: 56px; width: auto; padding: 0 12px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--pb-line); border-right: 0;
  border-radius: 12px 0 0 12px;
  color: var(--pb-dim); font-weight: 700; font-size: .9rem;
}
body.pb-v2 .cvx-auth-phone { display: flex; align-items: stretch; }
body.pb-v2 .cvx-auth-phone > .form--control { border-radius: 0 12px 12px 0; flex: 1 1 auto; min-width: 0; }

/* --- terms + CTA ------------------------------------------------------ */
body.pb-v2 .cvx-auth-form .form-check { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 18px; }
body.pb-v2 .cvx-auth-form .form-check-label,
body.pb-v2 .cvx-auth-form .form-check + span,
body.pb-v2 .cvx-auth-form .sm-text { font-size: .8rem; line-height: 1.5; color: var(--pb-dim); }
body.pb-v2 .cvx-auth-form .form-check a { color: var(--pb-green); font-weight: 600; }
body.pb-v2 .cvx-auth__actions { margin-top: 4px; }
body.pb-v2 .cvx-auth__switch {
  margin-top: 16px; text-align: center; font-size: .88rem; color: var(--pb-dim);
}
body.pb-v2 .cvx-auth__switch a { color: var(--pb-green); font-weight: 700; margin-left: 4px; }

/* auth polish: phone field breathing room + terms row alignment */
body.pb-v2 .cvx-auth-form .cvx-auth-dial { min-width: 52px; padding: 0 9px; font-size: .86rem; }
body.pb-v2 .cvx-auth-form .cvx-auth-phone > .form--control { padding-left: 12px; }

/* terms: checkbox and its text on ONE row, aligned at the top */
body.pb-v2 .cvx-auth-form .form-check {
  display: grid; grid-template-columns: 22px 1fr; gap: 10px;
  align-items: start; margin: 6px 0 18px;
}
body.pb-v2 .cvx-auth-form .form-check > div { grid-column: 2; }
body.pb-v2 .cvx-auth-form .form-check-input { margin: 2px 0 0; }
body.pb-v2 .cvx-auth-form .form-check-label { display: inline; margin: 0; }

/* Bootstrap's .d-flex/.flex-wrap utilities carry !important and were beating the
   rules above: the terms text wrapped below the checkbox and the dial-code addon
   stretched to 141px. Match their weight, don't add more markup. */
body.pb-v2 .cvx-auth-form .cvx-auth-dial {
  flex: 0 0 auto !important; width: 54px !important; min-width: 54px !important;
}
body.pb-v2 .cvx-auth-form .form-check {
  display: grid !important; grid-template-columns: 22px 1fr; gap: 10px;
  align-items: start; flex-wrap: nowrap !important;
}