:root {
  --brand: #e41827;
  --brand-dark: #111111;
  --primary: #e41827;
  --primary-dark: #b90f1d;
  --sporty-green: #0d9737;
  --sporty-green-dark: #087b2c;
  --sporty-green-soft: #e5f6e8;
  --sporty-live-bg: #171a22;
  --sporty-live-card: #2b3038;
  --accent: #ffc400;
  --danger: #e41827;
  --success: #20d66b;
  --red: var(--brand);
  --red-dark: var(--brand-dark);
  --green: var(--primary);
  --green-dark: var(--primary-dark);
  --gold: var(--accent);
  --ink: #151515;
  --ink-2: #1d1d1f;
  --muted: #6c717a;
  --line: #dedfe4;
  --soft: #f3f4f6;
  --white: #ffffff;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.13);
  --odds-sticky-top: 120px;
  --img-stadium: url("https://images.unsplash.com/photo-1556962021-9d0303621643?auto=format&fit=crop&w=1800&q=75");
  --img-crowd: url("https://images.unsplash.com/photo-1473976345543-9ffc928e648d?auto=format&fit=crop&w=1800&q=75");
  --img-basketball: url("https://images.unsplash.com/photo-1509027572446-af8401acfdc3?auto=format&fit=crop&w=1400&q=75");
  --img-tennis: url("https://images.unsplash.com/photo-1652703753496-d6b84708b304?auto=format&fit=crop&w=1400&q=75");
  --img-court: url("https://images.unsplash.com/photo-1744645013716-b018d8bf40fa?auto=format&fit=crop&w=1400&q=75");
}

* {
  box-sizing: border-box;
}

html {
  color-scheme: light;
  font-family: Arial, Helvetica, sans-serif;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;
  background: #f2f3f5;
  color: var(--ink);
  overflow-x: hidden;
}

button,
input,
a {
  font: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  border: 0;
  cursor: pointer;
}

img {
  display: block;
  max-width: 100%;
}

[hidden] {
  display: none !important;
}

.top-shell {
  position: sticky;
  top: 0;
  z-index: 20;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.24);
}

.account-bar {
  min-height: 70px;
  background: var(--red);
  color: var(--white);
  display: grid;
  grid-template-columns: minmax(180px, 250px) auto 42px minmax(520px, 1fr);
  align-items: center;
  gap: 16px;
  padding: 0 5vw;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
  font-size: 30px;
  letter-spacing: 0;
  min-width: 0;
}

.brand-mark {
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  background: var(--white);
  color: var(--red);
  font-weight: 900;
  transform: skew(-8deg);
}

.country-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  white-space: nowrap;
}

.flag {
  display: inline-grid;
  place-items: center;
  height: 24px;
  width: 34px;
  border-radius: 3px;
  background: linear-gradient(#d81e28 0 33%, #f5d328 33% 66%, #1c9b4a 66%);
  color: #111;
  font-size: 10px;
  font-weight: 900;
}

.login-strip {
  display: grid;
  grid-template-columns: 220px 180px 72px 86px;
  align-items: center;
  justify-content: end;
  gap: 8px;
}

.login-strip > a,
.keep {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.86);
}

.keep {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.phone-wrap {
  display: grid;
  grid-template-columns: 58px 1fr;
  height: 34px;
  background: var(--white);
  color: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.phone-wrap span {
  display: grid;
  place-items: center;
  border-right: 1px solid var(--line);
  color: var(--muted);
  font-weight: 700;
}

.phone-wrap input,
.login-strip > input,
.betslip-panel input,
.stake-box input {
  min-width: 0;
  height: 34px;
  border: 1px solid var(--line);
  padding: 0 10px;
  outline: none;
  background: var(--white);
}

.phone-wrap input {
  border: 0;
}

.btn {
  height: 34px;
  min-width: 0;
  border-radius: 4px;
  padding: 0 14px;
  font-weight: 800;
  transition: transform 0.15s ease, background 0.15s ease, opacity 0.15s ease;
  white-space: nowrap;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-dark {
  background: var(--red-dark);
  color: var(--white);
}

.btn-outline {
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: transparent;
  color: var(--white);
}

.btn-green {
  background: var(--green);
  color: var(--white);
}

.btn-green:hover {
  background: var(--green-dark);
}

.btn-gold {
  background: var(--gold);
  color: #3d2600;
}

.btn-light {
  background: var(--white);
  color: var(--red-dark);
}

.btn-muted {
  background: #e4e7ed;
  color: #9aa2ad;
}

.book-bet-action:not(:disabled) {
  background: #15171d;
  color: #ffffff;
  border: 1px solid #2b3038;
  box-shadow: inset 0 -2px 0 rgba(228, 24, 39, 0.55);
}

.book-bet-action:not(:disabled):hover {
  background: #20242c;
}

.btn.disabled,
.btn:disabled {
  opacity: 0.55;
  pointer-events: none;
}

.account-state {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
}

body:not(.is-signed-in) .account-state {
  display: none !important;
}

body.is-signed-in .login-strip {
  display: none !important;
}

body.is-signed-in .site-view[data-view="sports"] .hero-grid {
  display: none !important;
}

.top-extra-action {
  display: none !important;
}

body.is-signed-in .account-state #topAccountButton {
  display: inline-flex !important;
}

.balance {
  color: #fff5d7;
}

.main-nav {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  align-items: stretch;
  gap: 0;
  overflow-x: auto;
  background: var(--red);
  color: var(--white);
  padding: 0 5vw;
}

.main-nav a,
.main-nav .time {
  min-height: 50px;
  display: grid;
  place-items: center;
  padding: 0 13px;
  font-weight: 800;
  text-align: center;
  position: relative;
  white-space: nowrap;
}

.main-nav a.active {
  background: var(--white);
  color: var(--red);
  clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
}

.main-nav a:hover {
  background: rgba(0, 0, 0, 0.16);
}

.hot {
  position: absolute;
  top: 1px;
  right: 2px;
  background: var(--gold);
  color: #3d2600;
  font-size: 9px;
  line-height: 1;
  padding: 2px 3px;
  border-radius: 2px;
}

.time {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
}

.main-nav,
.hero-grid,
.tab-row,
.league-row {
  scrollbar-width: none;
}

.main-nav::-webkit-scrollbar,
.hero-grid::-webkit-scrollbar,
.tab-row::-webkit-scrollbar,
.league-row::-webkit-scrollbar {
  display: none;
}

.page {
  width: min(1200px, calc(100% - 28px));
  margin: 0 auto;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 285px;
  gap: 0;
  min-height: 255px;
  margin-top: 0;
  background: var(--ink-2);
  color: var(--white);
}

.register-panel {
  padding: 20px;
  background:
    radial-gradient(circle at 20% 20%, rgba(228, 24, 39, 0.28), transparent 35%),
    var(--ink-2);
}

.register-panel h2,
.mini-games h2,
.winners-panel h2 {
  margin: 0 0 14px;
  font-size: 22px;
}

.closed-note,
.modal-note {
  margin: 10px 0 14px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  line-height: 1.4;
}

.modal-note {
  color: var(--muted);
}

.hero-card {
  position: relative;
  min-height: 255px;
  overflow: hidden;
}

.hero-card img {
  width: 100%;
  height: 255px;
  object-fit: cover;
}

.hero-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(12, 12, 12, 0.9), rgba(228, 24, 39, 0.16) 62%, rgba(12, 12, 12, 0.58));
}

.arena-hero::before {
  content: "A";
  position: absolute;
  z-index: 1;
  right: 8%;
  top: 50%;
  transform: translateY(-50%);
  font-size: clamp(120px, 19vw, 235px);
  line-height: 1;
  font-weight: 1000;
  color: transparent;
  -webkit-text-stroke: 2px rgba(228, 24, 39, 0.58);
  text-stroke: 2px rgba(228, 24, 39, 0.58);
  opacity: 0.62;
  pointer-events: none;
}

.arena-hero img {
  object-position: center 45%;
}

.arena-hero::after {
  background:
    radial-gradient(circle at 78% 48%, rgba(228, 24, 39, 0.28), transparent 28%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.96), rgba(128, 0, 14, 0.86) 45%, rgba(0, 0, 0, 0.4));
}

.hero-copy {
  position: absolute;
  z-index: 1;
  inset: 28px auto 24px 30px;
  width: min(390px, calc(100% - 48px));
}

.eyebrow {
  margin: 0 0 8px;
  font-size: 13px;
  text-transform: uppercase;
  font-weight: 900;
  color: var(--gold);
}

.hero-copy h1 {
  margin: 0;
  font-size: clamp(32px, 5vw, 55px);
  line-height: 0.96;
  letter-spacing: 0;
  text-transform: uppercase;
}

.hero-copy p:not(.eyebrow) {
  margin: 10px 0 18px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.88);
}

.arena-hero .eyebrow {
  color: #ffffff;
}

.arena-hero .eyebrow::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 8px;
  border-radius: 50%;
  background: #e41827;
  box-shadow: 0 0 14px rgba(228, 24, 39, 0.75);
}

.arena-hero .hero-copy h1 {
  max-width: 420px;
  color: #ffffff;
}

.arena-hero .hero-copy h1::first-line {
  color: #e41827;
}

.arena-hero .hero-copy p:not(.eyebrow) {
  max-width: 330px;
  color: rgba(255, 255, 255, 0.96);
  text-transform: uppercase;
}

.arena-hero .hero-copy .btn {
  min-width: 142px;
  background: #e41827;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 10px 24px rgba(228, 24, 39, 0.32);
}

.register-panel {
  display: grid;
  align-content: center;
  gap: 10px;
}

.phone-wrap.large {
  height: 44px;
  grid-template-columns: 70px 1fr;
}

.phone-wrap.large input {
  height: 44px;
}

.register-panel .btn {
  height: 44px;
}

.real-match-preview {
  margin: 12px 0 14px;
  padding: 12px 12px 10px;
  border: 1px solid rgba(17, 24, 39, 0.12);
  background: #171a21;
  color: #ffffff;
  box-shadow: 0 12px 26px rgba(15, 18, 28, 0.18);
}

.real-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.real-preview-head span {
  display: block;
  color: #e41827;
  font-size: 11px;
  font-weight: 1000;
  text-transform: uppercase;
}

.real-preview-head h2 {
  margin: 0;
  color: #ffffff;
  font-size: 23px;
  font-weight: 900;
}

.real-preview-head button {
  min-height: 34px;
  border-radius: 3px;
  background: #e41827;
  color: #ffffff;
  padding: 0 13px;
  font-size: 12px;
  font-weight: 900;
}

.real-preview-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  gap: 10px;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.real-preview-track::-webkit-scrollbar {
  display: none;
}

.real-preview-card {
  --preview-bg: none;
  position: relative;
  flex: 0 0 min(54vw, 520px);
  display: grid;
  min-height: 236px;
  align-content: space-between;
  gap: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  padding: 16px;
  scroll-snap-align: start;
  background:
    linear-gradient(90deg, rgba(8, 10, 16, 0.94) 0%, rgba(16, 19, 27, 0.78) 45%, rgba(228, 24, 39, 0.34) 100%),
    var(--preview-bg) center / cover,
    #191d25;
}

.real-preview-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(120deg, rgba(228, 24, 39, 0.3), transparent 38%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 48%);
  pointer-events: none;
}

.real-preview-card > * {
  position: relative;
  z-index: 1;
}

.real-preview-top,
.real-preview-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.real-preview-top span,
.real-preview-meta span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.real-preview-top span {
  color: #e7eaf0;
  font-size: 12px;
  font-weight: 900;
}

.real-preview-top b {
  flex: 0 0 auto;
  border-radius: 3px;
  background: #e41827;
  color: #ffffff;
  padding: 4px 6px;
  font-size: 11px;
}

.real-preview-teams {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 58px;
}

.real-preview-teams strong {
  min-width: 0;
  color: #ffffff;
  font-size: 18px;
  font-weight: 1000;
}

.real-preview-teams strong:last-child {
  justify-content: flex-end;
  text-align: right;
}

.real-preview-teams > span {
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.1);
  color: #ffd23f;
  padding: 5px 7px;
  font-size: 12px;
  font-weight: 1000;
}

.real-preview-meta {
  color: #b9c0cd;
  font-size: 11px;
  font-weight: 800;
}

.real-preview-card.is-live .real-preview-meta span:first-child {
  color: #22c55e;
}

.real-preview-odds {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.real-preview-odds .preview-odd {
  min-height: 42px;
  display: grid;
  gap: 1px;
  border: 1px solid rgba(34, 197, 94, 0.26);
  border-radius: 4px;
  background: rgba(34, 197, 94, 0.16);
  color: #ffffff;
}

.real-preview-odds .preview-odd span {
  color: #bce8c9;
  font-size: 10px;
  font-weight: 1000;
}

.real-preview-odds .preview-odd b {
  color: #ffffff;
  font-size: 14px;
  font-weight: 1000;
}

.real-preview-odds .preview-odd:hover,
.real-preview-odds .preview-odd.selected {
  background: #e41827;
  border-color: #e41827;
}

.real-preview-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 18px;
  margin-top: 8px;
}

.real-preview-dots button {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.42);
  box-shadow: none;
}

.real-preview-dots button.active {
  width: 22px;
  background: #e41827;
}

@media (max-width: 760px) {
  .real-match-preview {
    margin: 8px -10px 12px;
    padding: 10px 10px 12px;
    border-left: 0;
    border-right: 0;
    box-shadow: none;
  }

  .real-preview-head h2 {
    font-size: 19px;
  }

  .real-preview-head button {
    min-height: 30px;
    padding: 0 10px;
  }

  .real-preview-track {
    padding-bottom: 2px;
  }

  .real-preview-track::-webkit-scrollbar {
    display: none;
  }

  .real-preview-card {
    flex: 0 0 min(88vw, 350px);
    min-height: 188px;
    padding: 13px;
  }

  .real-preview-teams strong {
    font-size: 14px;
  }
}

.promo-banner {
  margin: 12px 0;
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 16px;
  background:
    linear-gradient(90deg, rgba(228, 24, 39, 0.96), rgba(12, 12, 12, 0.78)),
    var(--img-crowd) center 54% / cover;
  color: var(--white);
  box-shadow: var(--shadow);
  text-transform: uppercase;
}

.promo-banner strong {
  font-size: clamp(23px, 3vw, 36px);
  font-weight: 900;
}

.promo-banner span {
  font-size: 19px;
  font-weight: 900;
  color: #fff4c7;
}

.content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 285px;
  gap: 16px;
  align-items: start;
}

.market-stack {
  display: grid;
  gap: 14px;
}

.market-panel,
.betslip-panel,
.mini-games,
.winners-panel {
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(18, 23, 34, 0.08);
}

.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 20px 18px 12px;
}

.panel-head.dark {
  background: var(--ink);
  color: var(--white);
  border-bottom: 1px solid #2a2a2f;
}

.panel-head h2 {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 30px;
  letter-spacing: 0;
}

.status-dot {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: var(--primary);
  display: inline-block;
}

.tools {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.tools button {
  background: transparent;
  color: var(--green);
  font-weight: 800;
}

.tab-row,
.league-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(95px, 1fr);
  overflow-x: auto;
  padding: 0 18px;
}

.tab-row button,
.league-row button {
  min-height: 42px;
  background: transparent;
  color: #4b5260;
  font-weight: 800;
  border-bottom: 3px solid transparent;
}

.tab-row button.active {
  color: var(--green-dark);
  border-bottom-color: var(--green);
}

.league-row {
  gap: 6px;
  padding: 12px 18px;
}

.league-row button {
  min-height: 66px;
  text-align: left;
  padding: 9px 10px;
  border: 1px solid var(--line);
  background: #fafbfc;
  border-radius: 4px;
}

.league-row button.active {
  border: 2px solid var(--green);
}

.odds-table {
  padding: 0 12px 14px;
}

.home-match-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 0 7px;
  border-top: 1px solid var(--line);
}

.home-match-group:first-child {
  border-top: 0;
}

.home-match-group strong {
  color: #111827;
  font-size: 15px;
  font-weight: 1000;
}

.home-match-group span {
  color: #e41827;
  font-size: 12px;
  font-weight: 900;
  text-align: right;
}

.home-match-empty {
  margin: 0;
  padding: 16px 0 18px;
  color: var(--muted);
  font-weight: 800;
}

.odds-header,
.match-row {
  display: grid;
  grid-template-columns: minmax(230px, 1.6fr) repeat(3, minmax(58px, 0.42fr)) minmax(70px, 0.5fr) repeat(2, minmax(58px, 0.42fr)) minmax(58px, 0.38fr);
  gap: 4px;
  align-items: stretch;
}

.odds-header {
  position: relative;
  top: auto;
  z-index: 1;
  background: rgba(255, 255, 255, 0.98);
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  padding: 7px 0;
  box-shadow: 0 1px 0 var(--line);
}

.odds-header-placeholder {
  display: none;
}

.odds-header-placeholder.active {
  display: block;
}

.odds-header.is-fixed {
  position: relative;
  left: auto;
  width: auto;
  margin: 0;
  z-index: 1;
}

.odds-header span:not(:first-child) {
  text-align: center;
}

.match-row {
  border-top: 1px solid var(--line);
  padding: 8px 0;
}

.match-info {
  display: grid;
  grid-template-columns: 58px 1fr;
  column-gap: 12px;
  row-gap: 2px;
  min-width: 0;
}

.match-info,
.live-match {
  cursor: pointer;
}

.match-info time {
  grid-row: 1 / span 3;
  font-weight: 800;
  color: #4b5260;
}

.match-info small,
.match-info strong {
  grid-column: 2;
}

.match-info small {
  font-size: 11px;
  color: var(--muted);
}

.match-info strong {
  color: var(--green-dark);
  font-size: 14px;
  min-width: 0;
}

.team-name-with-visual {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  max-width: 100%;
}

.team-name-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-visual {
  position: relative;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  overflow: visible;
  border: 1px solid rgba(17, 24, 39, 0.12);
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.12);
}

.team-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
}

.team-flag {
  position: absolute;
  right: -4px;
  bottom: -2px;
  width: 15px;
  height: 10px;
  object-fit: cover;
  border: 1px solid #ffffff;
  border-radius: 2px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.team-visual.flag-only {
  border-radius: 3px;
}

.team-visual.flag-only .team-flag {
  position: static;
  width: 20px;
  height: 14px;
  border: 0;
  box-shadow: none;
}

.live-match .team-visual,
.live-tracker-teams .team-visual,
.match-row.live-match-row .team-visual {
  border-color: rgba(255, 255, 255, 0.18);
  background: #ffffff;
}

.match-info .match-score {
  display: none;
}

.odd,
.goal {
  min-height: 36px;
  border-radius: 4px;
  font-weight: 900;
}

.odd {
  background: var(--green);
  color: var(--white);
}

.odd:hover,
.odd.selected {
  background: #e41827;
  outline: 2px solid var(--gold);
}

.odd.locked {
  background: #747a88;
  color: #d7dbe3;
  cursor: not-allowed;
}

.odd.live-auto-lock {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.odd-lock-icon {
  position: relative;
  width: 16px;
  height: 15px;
  flex: 0 0 16px;
}

.odd-lock-icon::before,
.odd-lock-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.odd-lock-icon::before {
  top: 0;
  width: 9px;
  height: 8px;
  border: 2px solid currentColor;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
}

.odd-lock-icon::after {
  bottom: 0;
  width: 14px;
  height: 10px;
  border-radius: 2px;
  background: currentColor;
  box-shadow: inset 0 0 0 5px rgba(116, 122, 136, 0.18);
}

.goal {
  background: #f0f2f5;
  color: #3a414e;
}

.goal-line-control {
  position: relative;
  min-width: 0;
}

.goal-line-trigger {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16px;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  background: var(--green);
  color: var(--white);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.16);
}

.goal-line-trigger:hover,
.goal-line-control.open .goal-line-trigger {
  background: var(--green-dark);
}

.goal-line-value {
  text-align: center;
  font-weight: 1000;
}

.goal-line-caret {
  width: 0;
  height: 0;
  justify-self: center;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid currentColor;
}

.goal-line-menu {
  position: absolute;
  z-index: 45;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  display: grid;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 4px;
  background: var(--white);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
}

.goal-line-menu[hidden] {
  display: none;
}

.goal-line-option {
  min-height: 28px;
  background: var(--white);
  color: #303743;
  font-weight: 900;
  border-bottom: 1px solid var(--line);
}

.goal-line-option:last-child {
  border-bottom: 0;
}

.goal-line-option:hover,
.goal-line-option.active {
  background: var(--green);
  color: var(--white);
}

.goal.active {
  background: #fff3d0;
  color: #7a4a00;
  outline: 2px solid var(--gold);
}

.more {
  display: grid;
  place-items: center;
  color: var(--green-dark);
  font-weight: 900;
}

.live {
  background: var(--ink);
  color: var(--white);
}

.live-table {
  padding: 10px 12px 16px;
}

.live-odds-header {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) minmax(220px, 1.25fr) repeat(4, minmax(58px, 0.42fr)) minmax(58px, 0.38fr);
  gap: 4px;
  align-items: center;
  padding: 2px 0 8px;
  color: #c9d1dd;
  font-size: 12px;
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: 0;
}

.live-odds-header span:nth-child(n + 3) {
  text-align: center;
  color: var(--white);
}

.admin-live-command {
  margin-bottom: 16px;
}

.live-tracker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(315px, 1fr));
  gap: 14px;
  padding: 14px;
  border-bottom: 1px solid #293243;
}

.live-tracker-grid > p {
  margin: 0;
  padding: 14px;
  color: #d5dbe5;
  font-weight: 800;
}

.live-tracker-card {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)),
    #1b1e25;
  color: var(--white);
  overflow: hidden;
}

.live-tracker-card header,
.live-tracker-teams {
  display: grid;
  align-items: center;
  gap: 10px;
}

.live-tracker-card header {
  grid-template-columns: minmax(0, 1fr) auto;
  color: #dce3ed;
  font-weight: 900;
}

.live-tracker-card header b {
  border-radius: 4px;
  background: var(--red);
  color: var(--white);
  padding: 5px 8px;
  font-size: 12px;
}

.live-tracker-teams {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

.live-tracker-teams strong {
  overflow-wrap: anywhere;
}

.live-tracker-teams strong:last-child {
  text-align: right;
}

.live-tracker-teams strong.team-name-with-visual:last-child {
  justify-content: flex-end;
}

.live-tracker-teams b {
  color: var(--gold);
  font-size: 28px;
}

.live-momentum {
  display: flex;
  height: 7px;
  overflow: hidden;
  background: #222b38;
}

.live-momentum span:first-child {
  background: var(--green);
}

.live-momentum span:last-child {
  background: var(--danger);
}

.live-timeline {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 62px;
  border-radius: 2px;
  background: #171b22;
  padding: 8px 10px;
  color: rgba(255, 255, 255, 0.76);
}

.live-timeline-teams {
  display: grid;
  gap: 7px;
  font-size: 10px;
  font-weight: 1000;
  line-height: 1;
}

.live-timeline-track {
  position: relative;
  height: 38px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.live-timeline-track::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: rgba(255, 255, 255, 0.22);
}

.live-minute-progress {
  position: absolute;
  left: 0;
  top: calc(50% - 1px);
  height: 2px;
  background: var(--green);
  box-shadow: 0 0 8px rgba(0, 176, 80, 0.45);
}

.live-minute-mark {
  position: absolute;
  top: -3px;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.48);
  font-size: 10px;
  font-weight: 900;
}

.live-event-dot {
  position: absolute;
  top: calc(50% + 6px);
  width: 8px;
  height: 8px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--danger);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.12);
}

.live-event-dot.home {
  top: calc(50% - 7px);
  background: var(--green);
}

.live-event-dot.card {
  border-radius: 2px;
  background: var(--gold);
}

.live-event-dot.corner {
  background: #f7f7f7;
}

.live-event-dot.danger {
  width: 10px;
  height: 10px;
  background: var(--danger);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.15), 0 0 12px rgba(228, 24, 39, 0.58);
}

.live-event-dot.set-piece,
.live-event-dot.goal-kick,
.live-event-dot.possession,
.live-event-dot.short-pass,
.live-event-dot.throw-in,
.live-event-dot.clearance {
  background: rgba(255, 255, 255, 0.82);
}

.live-event-dot.goal-kick {
  border-radius: 2px;
}

.live-event-dot.short-pass {
  width: 6px;
  height: 6px;
}

.live-event-dot.throw-in {
  border-radius: 2px;
  background: #d7ffe3;
}

.live-event-dot.shot,
.live-event-dot.shot-target,
.live-event-dot.penalty,
.live-event-dot.offside,
.live-event-dot.cross {
  background: var(--danger);
}

.live-event-dot.shot-target,
.live-event-dot.penalty {
  width: 10px;
  height: 10px;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.15), 0 0 12px rgba(228, 24, 39, 0.58);
}

.live-event-dot.goal {
  width: 12px;
  height: 12px;
  background: var(--gold);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2), 0 0 14px rgba(255, 204, 0, 0.7);
}

.live-event-dot.offside,
.live-event-dot.cross {
  background: var(--gold);
}

.live-match-format {
  align-self: end;
  padding-bottom: 2px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}

.live-goal-log {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 7px 9px;
  border-radius: 4px;
  background: #111820;
  color: #eef5ff;
  font-size: 11px;
  font-weight: 1000;
}

.live-goal-log span {
  border-radius: 999px;
  padding: 4px 8px;
  background: rgba(255, 204, 0, 0.12);
  color: var(--gold);
}

.live-goal-log .away {
  background: rgba(228, 24, 39, 0.16);
  color: #ffb7bd;
}

.live-pitch {
  position: relative;
  height: 300px;
  overflow: hidden;
  border: 0;
  --ball-start-x: 50%;
  --ball-start-y: 50%;
  --ball-mid-x: 55%;
  --ball-mid-y: 45%;
  --ball-end-x: 62%;
  --ball-end-y: 50%;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 42px, rgba(255, 255, 255, 0.42) 43px 44px, transparent 45px),
    linear-gradient(90deg, transparent 49.6%, rgba(255, 255, 255, 0.55) 49.8% 50.2%, transparent 50.4%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 22%, transparent 78%, rgba(0, 0, 0, 0.16)),
    repeating-linear-gradient(90deg, #128247 0 56px, #0f6f3e 56px 112px);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.58), inset 0 0 55px rgba(0, 0, 0, 0.2);
}

.live-pitch::before,
.live-pitch::after {
  content: "";
  position: absolute;
  top: 58px;
  width: 46px;
  height: 112px;
  border: 2px solid rgba(255, 255, 255, 0.55);
}

.live-pitch::before {
  left: -2px;
}

.live-pitch::after {
  right: -2px;
}

.live-pitch-lines {
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  pointer-events: none;
}

.live-player-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.live-player {
  position: absolute;
  width: 12px;
  height: 12px;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(255, 255, 255, 0.82);
  border-radius: 50%;
  background: #07131f;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.live-player.home {
  background: #101820;
}

.live-player.away {
  background: #d91e2f;
}

.live-player.keeper {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: #f7d600;
}

.live-player.carrier {
  width: 16px;
  height: 16px;
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.22), 0 0 18px rgba(255, 255, 255, 0.45);
}

.live-player.target {
  box-shadow: 0 0 0 4px rgba(255, 204, 0, 0.28);
}

.live-pass-line {
  position: absolute;
  z-index: 1;
  height: 2px;
  transform-origin: 0 50%;
  background: rgba(255, 255, 255, 0.45);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}

.live-ball {
  position: absolute;
  z-index: 4;
  transform: translate(-50%, -50%);
}

.live-ball {
  left: var(--ball-x);
  top: var(--ball-y);
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 35%, #ffffff 0 24%, #111 25% 31%, #ffffff 32% 56%, #111 57% 64%, #ffffff 65%);
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.18), 0 9px 16px rgba(0, 0, 0, 0.34);
  animation: liveBallPulse 1.5s ease-in-out infinite;
}

.pitch-status {
  position: absolute;
  z-index: 5;
  left: 18%;
  top: 45%;
  transform: translate(-50%, -50%);
  display: grid;
  gap: 2px;
  max-width: 42%;
  color: var(--white);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

.pitch-status.away {
  right: 18%;
  left: auto;
  text-align: right;
  transform: translate(50%, -50%);
}

.pitch-status strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 20px;
  font-weight: 1000;
}

.pitch-status span {
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  font-weight: 900;
}

.live-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 7px;
}

.live-stat-grid span {
  display: grid;
  gap: 2px;
  min-height: 48px;
  align-content: center;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.07);
  padding: 7px;
  text-align: center;
}

.live-stat-grid b {
  color: var(--gold);
  font-size: 16px;
}

.live-stat-grid small {
  color: #d5dce7;
  font-weight: 900;
  font-size: 11px;
}

.live-event-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: #dbe3ee;
  font-weight: 800;
}

.live-event-list li {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 8px;
}

.live-event-list span {
  color: var(--gold);
}

.live-card-odds {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.live-card-odds .odd {
  min-height: 46px;
}

@keyframes liveBallPulse {
  50% {
    transform: translate(-50%, -50%) scale(1.08);
    box-shadow: 0 0 0 9px rgba(255, 255, 255, 0.14), 0 9px 16px rgba(0, 0, 0, 0.34);
  }
}

.admin-live-rows:empty {
  display: none;
}

.live-sport-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  padding: 9px 2px 7px;
  border-top: 1px solid #293243;
  color: #eef2f7;
}

.live-sport-group:first-child {
  margin-top: 0;
  border-top: 0;
}

.live-sport-group strong {
  font-size: 14px;
  font-weight: 1000;
}

.live-sport-group span {
  color: #e41827;
  font-size: 12px;
  font-weight: 900;
  text-align: right;
}

.admin-live-table p {
  margin: 0;
  padding: 12px;
  color: #c9d1dd;
  font-weight: 800;
}

.live-row {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) minmax(220px, 1.25fr) repeat(4, minmax(58px, 0.42fr)) minmax(58px, 0.38fr);
  gap: 4px;
  align-items: stretch;
  padding: 8px 0;
  border-top: 1px solid #293243;
}

.live-league {
  font-weight: 900;
  color: #e9edf5;
}

.live-match {
  display: grid;
  grid-template-columns: 70px 1fr 32px;
  gap: 2px 10px;
  align-items: center;
}

.live-match time {
  grid-row: span 2;
  color: #b4bdca;
  font-size: 12px;
}

.live-match strong {
  color: var(--primary);
  min-width: 0;
}

.live-match span {
  text-align: center;
  font-weight: 900;
}

.right-rail {
  display: grid;
  gap: 14px;
}

.betslip-panel {
  background: var(--white);
}

.betslip-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #202020;
  color: var(--white);
}

.betslip-tabs button {
  min-height: 56px;
  background: transparent;
  color: inherit;
  font-size: 20px;
  font-weight: 900;
  border-bottom: 4px solid transparent;
}

.betslip-tabs button.active {
  border-bottom-color: var(--green);
}

.mode-row {
  display: flex;
  gap: 4px;
  padding: 8px;
  background: #2a2a2a;
}

.mode-row button {
  height: 28px;
  min-width: 52px;
  border-radius: 14px;
  background: #3a3a3a;
  color: #c8ced9;
  font-weight: 900;
}

.mode-row button.active {
  background: var(--green);
  color: var(--white);
}

.slip-summary {
  width: calc(100% - 24px);
  min-height: 34px;
  margin: 0 12px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.slip-summary b {
  color: var(--green-dark);
}

.slip-summary button {
  color: var(--danger);
  background: transparent;
  font-weight: 900;
}

.betslip-items {
  min-height: 112px;
  padding: 12px;
  display: grid;
  gap: 8px;
}

.empty-slip {
  margin: 0;
  color: #444c59;
  font-weight: 700;
  line-height: 1.45;
}

.slip-item {
  border: 1px solid var(--line);
  border-left: 4px solid var(--green);
  padding: 8px;
  display: grid;
  gap: 3px;
  border-radius: 4px;
  background: #fafbfc;
}

.slip-item strong {
  font-size: 13px;
}

.slip-item span {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.slip-limit {
  color: var(--red-dark);
  font-size: 11px;
  font-weight: 900;
}

.slip-stake-hint {
  color: #596274;
  font-size: 11px;
  font-weight: 900;
}

.slip-item button[data-remove] {
  justify-self: end;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: transparent;
  color: var(--danger);
  font-weight: 900;
}

.slip-item button[data-remove] i {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-size: 14px;
  pointer-events: none;
}

.betslip-panel > input,
.stake-box,
.return-row,
.betslip-panel > .btn,
.betslip-panel #placeBetBtn {
  width: calc(100% - 24px);
  margin: 0 12px 10px;
}

.betslip-panel > input {
  height: 42px;
}

.stake-box {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-weight: 800;
}

.stake-box input {
  height: 42px;
}

.stake-presets {
  width: calc(100% - 24px);
  margin: -2px 12px 10px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.stake-presets button {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #f2f5f8;
  color: var(--ink);
  font-weight: 900;
}

.return-row {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  padding-top: 10px;
  font-weight: 800;
}

.return-row.odds-row {
  margin-bottom: 4px;
  padding-top: 8px;
}

.return-row strong {
  color: var(--green-dark);
}

.mini-games,
.winners-panel {
  padding: 16px;
}

.mini-games {
  background: #1d1d1d;
  color: var(--white);
}

.game-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}

.game-grid button {
  min-height: 106px;
  border-radius: 4px;
  background: #2a2a2a;
  color: var(--white);
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 8px;
  font-weight: 800;
}

.mini-games.locked .game-grid button,
.game-card.locked {
  position: relative;
  cursor: not-allowed;
}

.game-card.locked {
  opacity: 0.9;
  overflow: hidden;
}

.game-card.locked > :not(.casino-card-cta) {
  filter: grayscale(0.55) blur(1.4px);
  opacity: 0.48;
}

.game-card.locked .casino-card-cta {
  background: var(--red);
  color: var(--white);
}

.mini-games.locked .game-grid button::after,
.game-card.locked::after {
  content: "Locked";
  position: absolute;
  right: 8px;
  top: 8px;
  border-radius: 4px;
  background: var(--red);
  color: var(--white);
  padding: 4px 7px;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  z-index: 2;
}

.game-visual {
  height: 62px;
  border-radius: 4px;
  display: block;
}

.hero-game {
  background:
    radial-gradient(circle at 50% 28%, #ffef99 0 8px, transparent 9px),
    linear-gradient(135deg, #121212, #e41827);
}

.spin-game {
  background:
    radial-gradient(circle at 50% 50%, var(--accent) 0 22px, var(--primary) 23px 32px, transparent 33px),
    linear-gradient(135deg, #493008, #f2b84b);
}

.red-game {
  background:
    radial-gradient(circle at 38% 42%, #f4f4f4 0 14px, transparent 15px),
    radial-gradient(circle at 62% 42%, var(--danger) 0 15px, transparent 16px),
    linear-gradient(135deg, #251015, #df4c45);
}

.soon-game {
  background:
    repeating-conic-gradient(from 15deg, #343434 0 15deg, #111111 15deg 30deg);
  opacity: 0.72;
}

.winner {
  display: grid;
  gap: 4px;
  border-top: 1px solid var(--line);
  padding: 12px 0;
}

.winner strong {
  color: var(--green-dark);
  font-size: 18px;
}

.winner span,
.winner small {
  color: var(--muted);
}

.site-footer {
  width: min(1200px, calc(100% - 28px));
  margin: 28px auto 0;
  padding: 26px 0 42px;
  display: grid;
  grid-template-columns: 1.2fr 1fr auto;
  gap: 24px;
  color: #4b5260;
  border-top: 1px solid var(--line);
}

.site-footer h2 {
  margin: 0 0 6px;
  color: var(--ink);
}

.site-footer p {
  margin: 0;
  max-width: 420px;
}

.site-footer nav {
  display: grid;
  gap: 7px;
}

.site-footer strong {
  color: var(--red-dark);
}

.chat-button {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--danger);
  color: var(--white);
  font-size: 28px;
  font-weight: 900;
  box-shadow: var(--shadow);
  z-index: 15;
}

.site-view {
  display: none;
}

.site-view.active {
  display: block;
}

.sport-detail {
  margin-top: 14px;
}

.efootball-page {
  display: grid;
  grid-template-columns: 165px minmax(0, 1fr) 190px;
  gap: 18px;
  align-items: start;
}

.ef-left-rail,
.ef-right-rail {
  display: grid;
  gap: 10px;
}

.ef-rail-item,
.ef-filter-card,
.ef-slip,
.ef-ad-tile,
.ef-league,
.ef-live-strip,
.ef-breadcrumb {
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(18, 23, 34, 0.08);
}

.ef-rail-item {
  min-height: 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 12px;
  color: #4b5260;
  font-weight: 800;
  text-align: left;
}

.ef-rail-item span {
  color: var(--green-dark);
  font-size: 18px;
}

.ef-rail-item.active {
  border-color: var(--green);
  color: var(--green-dark);
}

.ef-filter-card {
  padding: 12px;
}

.ef-filter-card h2 {
  margin: 0 0 10px;
  font-size: 14px;
  color: #4b5260;
}

.ef-card-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}

.ef-card-head strong {
  color: var(--muted);
}

.ef-time-slider {
  height: 8px;
  border-radius: 999px;
  background: #dce2ea;
  position: relative;
  margin: 16px 5px 12px;
}

.ef-time-slider span {
  position: absolute;
  inset: 0 0 0 18%;
  border-radius: inherit;
  background: var(--green);
}

.ef-time-slider::before,
.ef-time-slider::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: var(--green);
}

.ef-time-slider::before {
  left: 18%;
}

.ef-time-slider::after {
  right: 0;
}

.ef-time-options {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
}

.ef-time-options button {
  min-height: 28px;
  background: transparent;
  color: #5b6472;
  font-weight: 800;
  border-radius: 4px;
}

.ef-time-options button.active {
  color: var(--green-dark);
  background: #eaf8f1;
}

.ef-filter-card.leagues {
  display: grid;
  gap: 8px;
}

.ef-filter-card.leagues a {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: #4b5260;
  font-weight: 800;
}

.ef-filter-card.leagues span {
  color: var(--muted);
}

.ef-market-board {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.ef-breadcrumb {
  min-height: 42px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  color: #4b5260;
  font-weight: 800;
}

.ef-live-strip {
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 18px;
  background: #333a49;
  color: var(--white);
}

.ef-live-strip strong {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 22px;
}

.ef-live-strip b {
  color: var(--accent);
}

.play-dot {
  width: 18px;
  height: 18px;
  border-radius: 3px;
  background: #e7fff1;
  display: inline-block;
  position: relative;
}

.play-dot::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 4px;
  border-left: 6px solid var(--green);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

.ef-league {
  overflow: hidden;
}

.ef-league header {
  padding: 16px 18px 0;
}

.ef-league h2 {
  margin: 0 0 14px;
  font-size: 24px;
  font-weight: 500;
}

.ef-market-tabs {
  display: flex;
  gap: 26px;
  border-bottom: 1px solid var(--line);
}

.ef-market-tabs button {
  min-height: 42px;
  background: transparent;
  color: #4b5260;
  font-weight: 800;
  border-bottom: 3px solid transparent;
}

.ef-market-tabs button.active {
  color: var(--green-dark);
  border-bottom-color: var(--green);
}

.ef-table {
  display: grid;
}

.ef-table-head,
.ef-match-row {
  display: grid;
  grid-template-columns: 94px minmax(220px, 1fr) repeat(3, minmax(72px, 0.34fr)) 50px;
  align-items: center;
  gap: 4px;
  padding: 0 14px;
}

.ef-table-head {
  min-height: 42px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.ef-table-head span:nth-child(n+3),
.ef-table-head span:nth-child(2) {
  text-align: center;
}

.ef-match-row {
  min-height: 58px;
  border-top: 1px solid #edf0f4;
}

.ef-match-row time {
  display: block;
  color: var(--ink);
  font-weight: 900;
}

.ef-match-row small {
  color: #b4bbc7;
}

.ef-match-row strong {
  display: block;
  font-size: 13px;
  color: #273041;
  line-height: 1.35;
}

.ef-match-row .odd {
  min-height: 38px;
  border-radius: 4px;
}

.ef-match-row a {
  color: var(--green-dark);
  font-weight: 900;
}

.ef-slip {
  background: var(--white);
  overflow: hidden;
}

.ef-slip > p {
  margin: 0;
  padding: 14px 12px;
  color: #4b5260;
  font-weight: 700;
  line-height: 1.35;
}

.ef-slip-items {
  min-height: 104px;
}

.ef-slip input,
.ef-slip .btn {
  width: calc(100% - 24px);
  margin: 0 12px 10px;
  height: 42px;
}

.ef-slip input {
  border: 1px solid var(--line);
  padding: 0 10px;
}

.ef-slip .ef-stake-box,
.ef-slip .ef-return-row,
.ef-slip .book-bet-action,
.ef-slip .place-bet-action,
.ef-slip .slip-summary,
.ef-slip .stake-presets {
  width: calc(100% - 24px);
  margin: 0 12px 10px;
}

.ef-slip .ef-stake-box {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-weight: 800;
}

.ef-slip .ef-return-row {
  padding: 10px 0 0;
}

.ef-ad-tile {
  min-height: 180px;
  display: grid;
  align-content: end;
  gap: 6px;
  padding: 16px;
  color: var(--white);
  background:
    linear-gradient(180deg, rgba(228, 24, 39, 0.18), rgba(12, 12, 12, 0.9)),
    var(--img-stadium) center / cover;
}

.ef-ad-tile strong {
  font-size: 22px;
}

.ef-ad-tile span {
  color: #fff1bd;
  font-weight: 800;
}

.view-title,
.view-hero {
  margin: 14px 0;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(18, 23, 34, 0.08);
}

.view-title {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  padding: 22px;
  position: relative;
  overflow: hidden;
  min-height: 150px;
}

.view-title > * {
  position: relative;
  z-index: 1;
}

.view-title::after {
  content: "";
  flex: 0 0 clamp(160px, 24vw, 300px);
  align-self: stretch;
  min-height: 108px;
  border-radius: 6px;
  background:
    linear-gradient(135deg, rgba(228, 24, 39, 0.44), rgba(12, 12, 12, 0.34)),
    var(--view-image, var(--img-stadium)) center / cover;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.site-view[data-view="games"],
.site-view[data-view="virtuals"] {
  --view-image: var(--img-basketball);
}

.site-view[data-view="live"],
.site-view[data-view="promotions"],
.site-view[data-view="rewards"] {
  --view-image: var(--img-crowd);
}

.site-view[data-view="fantasy"],
.site-view[data-view="jackpot"],
.site-view[data-view="livescore"],
.site-view[data-view="results"] {
  --view-image: var(--img-stadium);
}

.site-view[data-view="instant"] {
  --view-image: var(--img-tennis);
}

.site-view[data-view="app"],
.site-view[data-view="account"],
.site-view[data-view="admin"] {
  --view-image: var(--img-court);
}

.view-title h1,
.view-hero h1 {
  margin: 0;
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1;
  letter-spacing: 0;
}

.view-title p:not(.eyebrow) {
  max-width: 560px;
  margin: 8px 0 0;
  color: #4b5260;
  font-weight: 700;
}

.view-hero {
  min-height: 240px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 30px;
  color: var(--white);
  background:
    linear-gradient(90deg, rgba(18, 23, 34, 0.9), rgba(18, 23, 34, 0.48)),
    var(--img-stadium) center / cover;
}

.view-hero p:not(.eyebrow),
.app-copy p {
  max-width: 540px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.86);
}

.games-hero {
  background:
    linear-gradient(90deg, rgba(12, 12, 12, 0.94), rgba(228, 24, 39, 0.58)),
    var(--img-basketball) center / cover;
}

.virtual-hero {
  background:
    linear-gradient(90deg, rgba(228, 24, 39, 0.88), rgba(12, 12, 12, 0.66)),
    var(--img-crowd) center 60% / cover;
}

.instant-hero {
  background:
    linear-gradient(90deg, rgba(242, 184, 75, 0.86), rgba(18, 23, 34, 0.66)),
    var(--img-tennis) center 48% / cover;
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.section-head h2,
.play-panel h2,
.match-events h2,
.ticket-panel h2,
.wallet-card h2,
.history-card h2,
.payment-card h2,
.profile-card h2,
.level-panel h2,
.mission-list h2 {
  margin: 0;
}

.segmented {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  border-radius: 6px;
  background: #e9edf3;
  padding: 4px;
}

.segmented button {
  min-height: 30px;
  border-radius: 4px;
  background: transparent;
  color: #46505f;
  padding: 0 12px;
  font-weight: 800;
}

.segmented button.active {
  background: var(--white);
  color: var(--red);
  box-shadow: 0 1px 4px rgba(18, 23, 34, 0.12);
}

.lobby-layout,
.live-page-grid,
.jackpot-layout,
.account-grid,
.rewards-grid,
.app-layout {
  display: grid;
  gap: 16px;
  margin-bottom: 16px;
}

.lobby-layout {
  grid-template-columns: minmax(0, 1fr) 320px;
}

.catalog-panel,
.play-panel,
.match-stage,
.match-events,
.virtual-card,
.schedule-panel,
.jackpot-board,
.ticket-panel,
.score-list,
.results-table,
.promo-card,
.level-panel,
.mission-list,
.account-login-card,
.wallet-card,
.history-card,
.payment-card,
.profile-card,
.phone-mock,
.app-copy {
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(18, 23, 34, 0.08);
}

.catalog-panel,
.play-panel,
.match-events,
.schedule-panel,
.ticket-panel,
.score-list,
.results-table,
.level-panel,
.mission-list,
.account-login-card,
.wallet-card,
.history-card,
.payment-card,
.profile-card,
.app-copy {
  padding: 18px;
}

.account-login-card {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
}

body.is-signed-in .account-login-card {
  display: none;
}

.account-login-card h2,
.account-login-card p {
  margin: 0;
}

.account-login-card p {
  color: var(--muted);
  font-weight: 700;
}

.account-login-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.account-login-form label {
  display: grid;
  gap: 6px;
  font-weight: 900;
}

.account-login-form label span {
  color: var(--muted);
  font-size: 12px;
}

.account-login-form input {
  min-width: 0;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0 12px;
  outline: none;
  background: var(--white);
}

.account-login-form .btn {
  height: 42px;
  min-width: 96px;
}

.game-catalog,
.promo-grid,
.virtual-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.game-card {
  min-height: 165px;
  border-radius: 6px;
  border: 2px solid transparent;
  background: #1d1d1d;
  color: var(--white);
  padding: 12px;
  display: grid;
  gap: 8px;
  text-align: left;
  align-content: start;
}

.game-card.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(255, 196, 0, 0.2);
}

.game-card .game-visual {
  height: 92px;
}

.game-card strong {
  font-size: 18px;
}

.game-card small {
  color: #c8ced9;
}

.casino-unlock-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  margin: -2px 0 14px;
  padding: 18px;
  border: 1px solid rgba(242, 184, 75, 0.42);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(228, 24, 39, 0.16), rgba(242, 184, 75, 0.16)),
    #111111;
  color: var(--white);
  box-shadow: var(--shadow);
}

.casino-unlock-panel h2,
.casino-unlock-panel p {
  margin: 0;
}

.casino-unlock-panel h2 {
  max-width: 760px;
  font-size: clamp(20px, 3vw, 30px);
  line-height: 1.08;
}

.casino-unlock-panel span {
  display: block;
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.76);
  font-weight: 800;
}

.casino-unlock-actions {
  display: grid;
  gap: 8px;
  min-width: 150px;
}

.casino-wallet-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
  gap: 10px;
  align-items: center;
  margin: -2px 0 14px;
  padding: 12px;
  border: 1px solid #dedfe4;
  border-radius: 7px;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.casino-wallet-strip span {
  display: grid;
  gap: 4px;
  min-height: 48px;
  align-content: center;
  border: 1px solid #e6e8ee;
  border-radius: 5px;
  background: #f6f7f9;
  padding: 8px 10px;
}

.casino-wallet-strip b {
  color: #6b7280;
  font-size: 11px;
  text-transform: uppercase;
}

.casino-wallet-strip strong {
  color: #111111;
  font-size: 18px;
}

.game-lock-note {
  margin: -2px 0 14px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border-left: 5px solid var(--accent);
  background: #111111;
  color: var(--white);
  padding: 13px 16px;
  font-weight: 900;
  box-shadow: 0 1px 2px rgba(18, 23, 34, 0.08);
}

.game-lock-note span {
  color: rgba(255, 255, 255, 0.78);
}

.casino-benefits {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.casino-benefits span {
  display: grid;
  gap: 2px;
  min-height: 70px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px;
  background: var(--white);
  color: var(--muted);
  font-weight: 800;
}

.casino-benefits b {
  color: var(--red);
  font-size: 1rem;
}

.casino-card-badge {
  justify-self: start;
  border-radius: 999px;
  padding: 4px 8px;
  background: var(--accent);
  color: #111111;
  font-size: 0.74rem;
  font-weight: 900;
}

.game-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.game-tag-row b {
  border-radius: 999px;
  padding: 4px 7px;
  background: rgba(255, 255, 255, 0.1);
  color: #f5f7fb;
  font-size: 0.72rem;
}

.casino-card-cta {
  align-self: end;
  justify-self: stretch;
  min-height: 36px;
  display: grid;
  place-items: center;
  border-radius: 5px;
  background: var(--red);
  color: var(--white);
  font-weight: 900;
}

.game-card:not(.locked) .casino-card-cta {
  background: var(--success);
}

.games-locked .casino-wallet-strip,
.games-locked > .view-title,
.games-locked .casino-benefits,
.games-locked .lobby-layout,
.games-locked .mini-games,
.games-locked .play-panel,
.games-locked .game-lock-note {
  display: none;
}

.games-locked .casino-unlock-panel {
  min-height: clamp(320px, 54vh, 520px);
  align-content: center;
}

.crash-game {
  background:
    linear-gradient(145deg, transparent 30%, var(--accent) 31% 35%, transparent 36%),
    linear-gradient(135deg, #111111, var(--primary));
}

.penalty-game {
  background:
    radial-gradient(circle at 50% 62%, #fff 0 10px, transparent 11px),
    linear-gradient(90deg, #e41827 0 48%, #f8f8f8 48% 52%, #e41827 52%);
}

.numbers-game {
  background:
    radial-gradient(circle at 20% 38%, #fff 0 13px, transparent 14px),
    radial-gradient(circle at 52% 48%, var(--accent) 0 15px, transparent 16px),
    radial-gradient(circle at 78% 36%, var(--danger) 0 13px, transparent 14px),
    linear-gradient(135deg, #101010, #303030);
}

.dice-game {
  background:
    radial-gradient(circle at 32% 36%, #111 0 6px, transparent 7px),
    radial-gradient(circle at 52% 52%, #111 0 6px, transparent 7px),
    radial-gradient(circle at 72% 68%, #111 0 6px, transparent 7px),
    linear-gradient(135deg, #fff, #dfe3eb);
}

.red-black-game {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(90deg, #e41827 0 49%, #ffffff 49% 51%, #050505 51% 100%);
}

.red-black-game::before,
.red-black-game::after {
  content: "";
  position: absolute;
  top: 20px;
  width: 46px;
  height: 56px;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.28);
  transform: rotate(-10deg);
}

.red-black-game::before {
  left: 24px;
  border: 4px solid #e41827;
}

.red-black-game::after {
  right: 24px;
  border: 4px solid #050505;
  transform: rotate(10deg);
}

.limbo-game {
  background:
    linear-gradient(135deg, transparent 38%, var(--accent) 39% 46%, transparent 47%),
    radial-gradient(circle at 72% 34%, rgba(242, 184, 75, 0.9) 0 18px, transparent 19px),
    linear-gradient(135deg, #171717, #3a1115);
}

.keno-game {
  background:
    radial-gradient(circle at 18% 32%, #fff 0 11px, transparent 12px),
    radial-gradient(circle at 42% 58%, var(--accent) 0 13px, transparent 14px),
    radial-gradient(circle at 66% 35%, var(--red) 0 12px, transparent 13px),
    radial-gradient(circle at 82% 68%, #fff 0 10px, transparent 11px),
    linear-gradient(135deg, #101010, #303030);
}

.play-panel {
  display: grid;
  gap: 14px;
  align-content: start;
}

.color-choice-panel {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #ffffff;
}

.color-choice-panel span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.color-choice-panel div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.color-choice {
  min-height: 42px;
  border-radius: 5px;
  border: 2px solid transparent;
  color: #ffffff;
  font-weight: 900;
}

.red-choice {
  background: #e41827;
}

.black-choice {
  background: #101010;
}

.color-choice.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(255, 196, 0, 0.24);
}

.play-panel label,
.modal-card label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-weight: 800;
}

.play-panel input,
.modal-card input,
.modal-card select,
.view-search {
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0 12px;
  outline: none;
}

.play-screen {
  min-height: 185px;
  border-radius: 6px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 191, 36, 0.24), transparent 28%),
    linear-gradient(135deg, #121212, #3a1116);
  display: grid;
  place-items: center;
  color: var(--white);
  position: relative;
  overflow: hidden;
}

.play-screen strong {
  font-size: 48px;
  z-index: 1;
}

.play-pulse {
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 14px solid rgba(255, 255, 255, 0.08);
}

.mini-result {
  margin: 0;
  font-weight: 800;
  color: var(--green-dark);
}

.live-page-grid {
  grid-template-columns: minmax(0, 1fr) 320px;
}

.match-stage {
  background: #0f0f0f;
  color: var(--white);
  overflow: hidden;
}

.scoreboard {
  min-height: 78px;
  display: grid;
  grid-template-columns: 90px 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 0 18px;
  background: #1a1a1a;
}

.scoreboard b {
  font-size: 34px;
  color: var(--gold);
}

.momentum-strip {
  display: flex;
  height: 9px;
}

.momentum-strip span:first-child {
  background: var(--green);
}

.momentum-strip span:last-child {
  background: var(--danger);
}

.pitch {
  height: 270px;
  position: relative;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px),
    repeating-linear-gradient(90deg, #0e6e3c 0 60px, #0a5d32 60px 120px);
  background-size: 60px 100%, auto;
}

.pitch-line {
  position: absolute;
  inset: 38px 80px;
  border: 2px solid rgba(255, 255, 255, 0.55);
}

.ball {
  position: absolute;
  left: 58%;
  top: 42%;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 0 0 6px rgba(255,255,255,0.15);
}

.match-events ol {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.match-events li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 10px;
  align-items: start;
}

.match-events span {
  color: var(--green-dark);
  font-weight: 900;
}

.dark-markets {
  margin-bottom: 16px;
}

.live-market-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 14px;
}

.live-market-list .odd {
  min-height: 54px;
}

.virtual-grid {
  grid-template-columns: 1fr 1fr 1.2fr;
  margin-bottom: 16px;
}

.virtual-card {
  padding: 18px;
  display: grid;
  gap: 12px;
}

.virtual-score {
  min-height: 100px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  background: #111111;
  color: var(--white);
  font-size: 24px;
  font-weight: 900;
}

.track-bars {
  min-height: 100px;
  display: grid;
  align-content: center;
  gap: 12px;
}

.track-bars span,
.progress span {
  display: block;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--green), var(--gold));
}

.schedule-panel table {
  width: 100%;
  border-collapse: collapse;
}

.schedule-panel td {
  border-top: 1px solid var(--line);
  padding: 12px 4px;
  font-weight: 800;
}

.jackpot-total,
.points-badge,
.live-clock {
  color: var(--green-dark);
  font-size: 24px;
  font-weight: 900;
}

.jackpot-layout {
  grid-template-columns: minmax(0, 1fr) 280px;
}

.jackpot-row,
.result-row {
  display: grid;
  align-items: center;
  gap: 8px;
  border-top: 1px solid var(--line);
  padding: 10px;
}

.jackpot-row {
  grid-template-columns: minmax(0, 1fr) 54px 54px 54px;
}

.jackpot-row.head,
.result-row.head {
  border-top: 0;
  color: var(--muted);
  font-weight: 900;
  background: #f6f7fa;
}

.jackpot-row button {
  height: 36px;
  border-radius: 4px;
  background: #eef1f5;
  color: var(--ink);
  font-weight: 900;
}

.jackpot-row button.selected {
  background: var(--green);
  color: var(--white);
}

.ticket-panel {
  display: grid;
  gap: 12px;
  align-content: start;
}

.score-list {
  display: grid;
  gap: 10px;
}

.score-card {
  display: grid;
  grid-template-columns: 86px 1fr auto 1fr minmax(120px, 0.6fr);
  gap: 14px;
  align-items: center;
  min-height: 64px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.score-card span {
  font-weight: 900;
  color: var(--muted);
}

.score-card b {
  color: var(--red-dark);
}

.score-card.live-score span {
  color: var(--green-dark);
}

.result-row {
  grid-template-columns: minmax(0, 1fr) 120px 140px 120px;
}

.result-row b {
  color: var(--green-dark);
}

.promo-grid {
  margin-bottom: 16px;
}

.promo-card {
  min-height: 225px;
  padding: 22px;
  border-radius: 6px;
  display: grid;
  align-content: end;
  gap: 12px;
}

.promo-card h2,
.promo-card p {
  margin: 0;
}

.promo-card.primary {
  color: var(--white);
  background:
    linear-gradient(135deg, rgba(228, 24, 39, 0.9), rgba(12, 12, 12, 0.76)),
    var(--img-crowd) center / cover;
}

.rewards-grid {
  grid-template-columns: 1fr 1fr;
}

.progress {
  margin: 16px 0 10px;
  height: 14px;
  background: #e7ebf1;
  border-radius: 999px;
  overflow: hidden;
}

.mission-list {
  display: grid;
  gap: 12px;
}

.mission-list label {
  display: flex;
  gap: 10px;
  align-items: center;
  font-weight: 800;
}

.app-layout {
  grid-template-columns: 340px minmax(0, 1fr);
  align-items: stretch;
  margin-top: 14px;
}

.phone-mock {
  min-height: 520px;
  display: grid;
  place-items: center;
  background: #111111;
}

.phone-screen {
  width: 230px;
  min-height: 420px;
  border: 10px solid #0a0e16;
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(18, 18, 18, 0.96), rgba(228, 24, 39, 0.82)),
    var(--img-stadium) center / cover;
  color: var(--white);
  padding: 24px 18px;
  display: grid;
  gap: 14px;
  align-content: center;
  text-align: center;
  font-weight: 900;
}

.app-copy {
  display: grid;
  align-content: center;
  gap: 14px;
}

.app-copy h2 {
  margin: 0;
  font-size: 30px;
  line-height: 1.05;
}

.app-copy p {
  color: #4b5260;
}

.download-row,
.wallet-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.account-grid {
  grid-template-columns: 280px minmax(0, 1fr) 260px;
}

.wallet-card,
.history-card,
.payment-card,
.profile-card {
  display: grid;
  gap: 12px;
  align-content: start;
}

.payment-card,
.payment-admin-card {
  grid-column: 1 / -1;
}

.admin-tool-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--white);
  box-shadow: 0 1px 2px rgba(18, 23, 34, 0.06);
}

.admin-tool-card {
  flex: 1 1 136px;
  min-height: 58px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fafbfc;
  color: var(--ink);
  padding: 8px 10px;
  text-align: left;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 8px;
  align-content: center;
  box-shadow: none;
}

.admin-tool-card span {
  grid-column: 2;
  color: var(--ink);
  font-weight: 900;
  font-size: 13px;
  line-height: 1.1;
}

.admin-tool-card strong {
  grid-row: 1 / 3;
  grid-column: 1;
  align-self: center;
  min-width: 30px;
  min-height: 30px;
  border-radius: 4px;
  display: grid;
  place-items: center;
  background: #202020;
  color: var(--white);
  font-size: 13px;
  line-height: 1;
}

.admin-tool-card small {
  grid-column: 2;
  color: var(--muted);
  font-weight: 800;
  line-height: 1.2;
  font-size: 11px;
}

.admin-tool-card:hover,
.admin-tool-card:focus-visible {
  border-color: var(--green);
  outline: none;
}

.admin-tool-card.active {
  border-color: var(--green);
  background: #f2fff6;
  box-shadow: inset 0 0 0 1px rgba(0, 176, 80, 0.2);
}

.admin-tool-card.active strong {
  background: var(--green);
}

.admin-tool-card.attention {
  border-color: var(--danger);
}

.admin-tool-card.attention strong {
  background: var(--danger);
}

.site-view[data-view="admin"] [data-admin-group] {
  display: none;
}

.site-view[data-view="admin"][data-admin-panel="users"] [data-admin-group="users"] {
  display: grid;
}

.site-view[data-view="admin"][data-admin-panel="overview"] [data-admin-group="overview"] {
  display: grid;
}

.site-view[data-view="admin"][data-admin-panel="operations"] [data-admin-group="operations"] {
  display: grid;
}

.site-view[data-view="admin"][data-admin-panel="kyc"] [data-admin-group="kyc"] {
  display: grid;
}

.admin-kyc-settings,
.admin-kyc-review-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
  align-items: end;
  margin: 12px 0 16px;
}

.admin-kyc-settings label,
.admin-kyc-review-form label {
  display: grid;
  gap: 6px;
  color: var(--ink-2);
  font-weight: 700;
}

.admin-kyc-settings label:has(input[type="checkbox"]),
.admin-kyc-review-form label:has(input[type="checkbox"]) {
  display: flex;
  align-items: center;
  min-height: 40px;
}

.admin-kyc-settings input,
.admin-kyc-review-form input,
.admin-kyc-review-form select,
.admin-kyc-review-form textarea,
.account-kyc-form input,
.account-kyc-form select,
.account-kyc-form textarea {
  min-width: 0;
  width: 100%;
  border: 1px solid #cbd1db;
  border-radius: 4px;
  background: #fff;
  color: var(--ink);
  padding: 10px 12px;
}

.admin-kyc-settings input[type="checkbox"],
.admin-kyc-review-form input[type="checkbox"] {
  width: auto;
  padding: 0;
}

.admin-kyc-detail {
  margin-top: 16px;
  padding: 14px;
  border: 1px solid #d9dde5;
  background: #f8fafc;
}

.admin-kyc-detail h3 {
  margin: 0 0 10px;
}

#adminKycDetailBody {
  display: grid;
  gap: 7px;
}

#adminKycDetailBody > div {
  display: grid;
  grid-template-columns: minmax(150px, 0.35fr) minmax(0, 1fr);
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid #e1e5eb;
}

.admin-kyc-item {
  display: grid;
  gap: 7px;
}

.admin-kyc-item button {
  justify-self: start;
}

.account-kyc-form {
  max-width: 900px;
}

.account-kyc-form textarea {
  min-height: 82px;
  resize: vertical;
}

.admin-operations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin: 12px 0;
}

.admin-operation-control {
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid #d9dde5;
  background: #fff;
}

.admin-operation-control button {
  min-height: 36px;
}

.admin-operation-control button.is-suspended {
  border-color: var(--danger);
  color: var(--danger);
}

.admin-operations-lists {
  display: grid;
  gap: 12px;
}

.admin-operations-lists h3 {
  margin: 12px 0 6px;
  font-size: 15px;
}

.site-view[data-view="admin"] .generated-admin-card,
.site-view[data-view="admin"] .payment-settings-card {
  display: grid;
}

.site-view[data-view="admin"][data-admin-panel="today"] [data-admin-group="matches"],
.site-view[data-view="admin"][data-admin-panel="live"] [data-admin-group="matches"],
.site-view[data-view="admin"][data-admin-panel="future"] [data-admin-group="matches"],
.site-view[data-view="admin"][data-admin-panel="builder"] [data-admin-group="matches"],
.site-view[data-view="admin"][data-admin-panel="deposits"] [data-admin-group="matches"],
.site-view[data-view="admin"][data-admin-panel="withdrawals"] [data-admin-group="matches"] {
  display: grid;
}

.site-view[data-view="admin"] [data-admin-subgroup="builder"],
.site-view[data-view="admin"][data-admin-panel="today"] [data-admin-subgroup="payments"],
.site-view[data-view="admin"][data-admin-panel="live"] [data-admin-subgroup="payments"],
.site-view[data-view="admin"][data-admin-panel="future"] [data-admin-subgroup="payments"],
.site-view[data-view="admin"][data-admin-panel="builder"] [data-admin-subgroup="list"],
.site-view[data-view="admin"][data-admin-panel="builder"] [data-admin-subgroup="payments"],
.site-view[data-view="admin"][data-admin-panel="deposits"] [data-admin-subgroup="list"],
.site-view[data-view="admin"][data-admin-panel="withdrawals"] [data-admin-subgroup="list"] {
  display: none;
}

.site-view[data-view="admin"][data-admin-panel="builder"] [data-admin-subgroup="builder"] {
  display: block;
}

.site-view[data-view="admin"][data-admin-panel="today"] .admin-layout,
.site-view[data-view="admin"][data-admin-panel="live"] .admin-layout,
.site-view[data-view="admin"][data-admin-panel="future"] .admin-layout,
.site-view[data-view="admin"][data-admin-panel="builder"] .admin-layout,
.site-view[data-view="admin"][data-admin-panel="deposits"] .admin-layout,
.site-view[data-view="admin"][data-admin-panel="withdrawals"] .admin-layout {
  grid-template-columns: minmax(0, 1fr);
}

.admin-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  gap: 16px;
  margin-bottom: 16px;
}

.registration-admin-card,
.page-settings-card {
  margin-bottom: 16px;
}

.admin-helper-text {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.registration-admin-card .btn {
  justify-self: start;
}

.report-admin-card,
.audit-admin-card {
  margin-bottom: 16px;
}

.admin-ops-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}

.admin-report-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 10px;
}

.admin-form-section-title {
  margin-top: 4px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
  color: var(--green-dark);
  font-size: 12px;
  font-weight: 1000;
  text-transform: uppercase;
}

.admin-form-section-title:first-of-type {
  margin-top: 0;
  border-top: 0;
  padding-top: 0;
}

.report-tile {
  min-height: 74px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #f6f8fa;
  padding: 12px;
  display: grid;
  align-content: center;
  gap: 4px;
}

.report-tile strong {
  color: var(--ink);
  font-size: 18px;
  overflow-wrap: anywhere;
}

.report-tile span {
  color: var(--muted);
  font-weight: 900;
}

.page-settings-form {
  display: grid;
  gap: 12px;
}

.admin-wide-field {
  grid-column: 1 / -1;
}

.admin-wide-field textarea {
  min-height: 92px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 10px;
  font: inherit;
}

.page-settings-form .btn {
  justify-self: start;
}

.admin-card {
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(18, 23, 34, 0.08);
  padding: 14px;
  display: grid;
  gap: 10px;
  align-content: start;
}

.admin-card h2 {
  margin: 0;
  font-size: 18px;
}

.admin-card h2 span {
  color: var(--green-dark);
  font-size: 14px;
  margin-left: 8px;
}

.admin-card label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-weight: 800;
  font-size: 12px;
}

.admin-card input,
.admin-card select {
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0 10px;
  color: var(--ink);
  background: var(--white);
  font-size: 14px;
}

.admin-two,
.admin-three {
  display: grid;
  gap: 10px;
}

.admin-two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-match-list {
  display: grid;
  gap: 8px;
}

.admin-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.admin-list-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.admin-list-head h2 {
  margin: 0;
}

.admin-source-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 2px 0 4px;
}

.admin-source-tabs button {
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f8f9fb;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  font-weight: 900;
  text-align: left;
}

.admin-source-tabs button:hover,
.admin-source-tabs button:focus-visible {
  border-color: var(--brand);
  outline: none;
}

.admin-source-tabs button.active {
  border-color: var(--brand);
  background: #151515;
  color: #ffffff;
  box-shadow: inset 0 -3px 0 var(--brand);
}

.admin-source-tabs span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-source-tabs strong {
  min-width: 28px;
  min-height: 26px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #ffffff;
  color: var(--brand);
  padding: 0 8px;
  font-size: 12px;
}

.admin-source-tabs button:not(.active) strong {
  background: #151515;
  color: #ffffff;
}

.danger-lite {
  min-height: 34px;
  border: 1px solid rgba(211, 47, 47, 0.35);
  border-radius: 4px;
  background: #fff4f4;
  color: var(--danger);
  padding: 0 10px;
  font-weight: 900;
}

.danger-lite:hover,
.danger-lite:focus-visible {
  border-color: var(--danger);
  outline: none;
}

.admin-match-item {
  border: 1px solid var(--line);
  border-left: 4px solid var(--green);
  border-radius: 4px;
  padding: 10px;
  display: grid;
  gap: 5px;
  background: #fafbfc;
}

.admin-match-item.featured-match {
  border-left-color: var(--gold);
}

.admin-match-item.private-match {
  border-left-color: #5c6a80;
  background: #f4f6f9;
}

.admin-match-item.suspended-match {
  border-left-color: var(--danger);
}

.admin-match-item strong {
  color: var(--ink);
}

.admin-match-item span {
  color: var(--muted);
  font-weight: 800;
}

.admin-control-section {
  display: grid;
  gap: 8px;
  margin-top: 4px;
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.admin-control-section h3 {
  margin: 0;
  color: var(--green-dark);
  font-size: 12px;
  font-weight: 1000;
  text-transform: uppercase;
}

.admin-control-section summary {
  cursor: pointer;
  color: var(--green-dark);
  font-size: 12px;
  font-weight: 1000;
  text-transform: uppercase;
}

.admin-control-section.collapsible-section {
  border-radius: 4px;
  background: #f3f7f5;
  padding: 8px;
}

.admin-control-section.collapsible-section[open] {
  background: #fff;
}

.admin-control-section.danger-section h3 {
  color: var(--danger);
}

.admin-control-section.danger-section summary {
  color: var(--danger);
}

.admin-score-editor {
  display: grid;
  gap: 12px;
  margin: 0 0 12px;
  border: 1px solid rgba(237, 20, 38, 0.25);
  border-left: 4px solid var(--danger);
  border-radius: 6px;
  padding: 12px;
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
}

.admin-score-editor[hidden] {
  display: none;
}

.admin-score-editor-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
}

.admin-score-editor-head div {
  display: grid;
  gap: 3px;
}

.admin-score-editor-head span {
  color: var(--danger);
  font-size: 11px;
  font-weight: 1000;
  text-transform: uppercase;
}

.admin-score-editor-head strong {
  color: var(--ink);
  font-size: 18px;
  line-height: 1.2;
}

.admin-score-editor-head small,
.admin-score-editor-head b {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.admin-score-close {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #111111;
  color: #ffffff;
  padding: 0 12px;
  font-weight: 900;
}

.admin-score-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
}

.admin-score-grid.compact {
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
}

.admin-score-grid.result-grid {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.admin-score-grid input,
.admin-score-grid select {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #f8fafc;
  color: var(--ink);
  padding: 0 10px;
  font-weight: 900;
}

.admin-score-editor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-score-editor-actions .btn,
.admin-score-editor-actions .danger-lite {
  min-height: 38px;
  border-radius: 4px;
  padding: 0 14px;
}

.admin-mini-field {
  min-width: 0;
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.admin-mini-field span {
  color: var(--muted);
  line-height: 1.1;
}

.admin-user-item .admin-mini-field {
  gap: 6px;
}

.admin-user-item .admin-mini-field span {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 22px;
  padding: 3px 7px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #eef2f6;
  color: #111827;
  font-size: 11px;
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: 0;
}

.admin-mini-field input,
.admin-mini-field select {
  width: 100%;
}

.admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.readonly-feed-note {
  width: 100%;
  border: 1px solid var(--line);
  border-left: 4px solid var(--green);
  border-radius: 4px;
  padding: 10px 12px;
  color: #3b4451;
  background: #f6f8fb;
  font-weight: 900;
}

.admin-actions button,
.admin-actions input,
.admin-actions select,
.ticket-action {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0 10px;
  font-weight: 900;
}

.admin-actions input {
  width: 74px;
  background: var(--white);
  color: var(--ink);
}

.admin-actions.live-score-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  align-items: stretch;
}

.admin-actions.live-score-actions input,
.admin-actions.live-score-actions select {
  width: 100%;
  min-width: 0;
}

.admin-actions.live-score-actions button {
  min-width: 116px;
  align-self: end;
}

.admin-actions.user-control-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  width: 100%;
}

.admin-actions.user-wallet-actions,
.admin-actions.user-access-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 8px;
  width: 100%;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #f8fafc;
}

.admin-actions.user-wallet-actions input,
.admin-actions.user-access-actions input,
.admin-actions.user-access-actions select {
  width: 100%;
}

.admin-actions.user-access-actions button {
  align-self: end;
  min-height: 38px;
  background: var(--green);
  color: var(--white);
  border-color: var(--green);
}

.admin-actions.result-actions input {
  width: 150px;
}

.admin-actions button {
  background: #eef1f5;
  color: var(--ink);
}

.live-score-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(86px, 1fr));
}

.live-score-actions button {
  grid-column: span 2;
}

.admin-actions button[data-admin-action="result"] {
  background: var(--green);
  color: var(--white);
}

.admin-actions button[data-payment-action="approve"] {
  background: var(--green);
  color: var(--white);
}

.admin-actions button[data-admin-action="delete"] {
  color: var(--danger);
}

.admin-actions button[data-admin-action="void"],
.admin-actions button[data-ticket-action="void"],
.admin-actions button[data-ticket-action="refund"] {
  color: var(--danger);
}

.admin-actions button[data-payment-action="reject"] {
  color: var(--danger);
}

.admin-actions button:disabled,
.admin-actions select:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.locked-row {
  opacity: 0.74;
}

.featured-row .match-info small {
  color: #8a6412;
}

.private-row .match-info small {
  color: #5c6a80;
}

.wallet-card strong {
  color: var(--green-dark);
  font-size: 32px;
}

.history-list {
  display: grid;
  gap: 8px;
}

.history-entry {
  border: 1px solid var(--line);
  border-left: 4px solid var(--green);
  border-radius: 4px;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.history-entry[role="button"] {
  cursor: pointer;
}

.history-entry[role="button"]:hover,
.history-entry[role="button"]:focus-visible {
  border-color: var(--brand);
  outline: none;
  box-shadow: 0 0 0 2px rgba(228, 24, 39, 0.12);
}

.history-entry.ticket-won {
  border-left-color: var(--red);
  background: #fff7f8;
}

.history-entry.ticket-won b {
  color: var(--red);
}

.bet-history-panel {
  overflow: hidden;
  background: #151922;
  color: #f6f7fb;
}

.bet-history-topbar {
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  background:
    linear-gradient(135deg, rgba(255, 203, 31, 0.32), transparent 24%),
    linear-gradient(145deg, #079536 0 30%, #0879e8 30% 72%, #e41827 72% 100%);
}

.bet-history-back {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 999px;
  background: rgba(10, 15, 24, 0.18);
  position: relative;
}

.bet-history-back::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 12px;
  width: 16px;
  height: 16px;
  border-left: 3px solid #ffffff;
  border-bottom: 3px solid #ffffff;
  transform: rotate(45deg);
}

.bet-history-topbar strong {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  background: rgba(13, 19, 30, 0.78);
  padding: 0 14px;
  color: #ffda2e;
  font-size: 16px;
  font-weight: 900;
}

.bet-history-topbar strong::before {
  content: "";
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #111827 0 34%, transparent 36%),
    linear-gradient(135deg, #e7edf7, #99a5b8);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.78);
}

.bet-history-tabs {
  grid-auto-columns: 1fr;
  gap: 4px;
  margin: 0 !important;
  padding: 10px 12px 0;
  background: #151922;
}

.bet-history-tabs button {
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-radius: 7px 7px 0 0;
  background: #464b56;
  color: rgba(255, 255, 255, 0.7);
  font-size: 16px;
  font-weight: 900;
}

.bet-history-tabs button::before {
  content: "";
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  opacity: 0.9;
}

.bet-history-tabs button:first-child::before {
  border: 2px solid currentColor;
  border-radius: 4px;
  background:
    linear-gradient(currentColor, currentColor) 50% 6px / 10px 2px no-repeat,
    linear-gradient(currentColor, currentColor) 50% 12px / 10px 2px no-repeat;
  clip-path: polygon(0 0, 100% 0, 100% 82%, 84% 100%, 68% 82%, 52% 100%, 36% 82%, 20% 100%, 0 82%);
}

.bet-history-tabs button:nth-child(2)::before {
  border: 2px solid currentColor;
  border-radius: 50%;
  background:
    linear-gradient(currentColor, currentColor) 50% 50% / 2px 7px no-repeat,
    linear-gradient(currentColor, currentColor) 58% 58% / 7px 2px no-repeat;
}

.bet-history-tabs button.active {
  background: #242a36;
  color: #ffffff;
  box-shadow: inset 0 -3px 0 #e41827;
}

.bet-history-tabs button span {
  display: none;
}

.bet-ticket-list {
  margin: 0 !important;
  padding: 18px 16px 92px;
  background:
    radial-gradient(circle at 50% -70px, rgba(228, 24, 39, 0.14), transparent 240px),
    #151922;
  gap: 0;
}

body.open-bets-mode .site-view[data-view="account"] > .view-title,
body.open-bets-mode .site-view[data-view="account"] > .account-login-card,
body.open-bets-mode .site-view[data-view="account"] .account-sidebar {
  display: none !important;
}

body.open-bets-mode .site-view[data-view="account"] {
  padding-top: 0;
}

body.open-bets-mode .account-shell {
  display: block;
  margin: 0;
}

body.open-bets-mode .account-content.account-popups {
  display: block;
  margin: 0;
}

body.open-bets-mode .account-popup-panel {
  border: 0;
  border-radius: 0;
}

body.open-bets-mode .bet-history-panel.active {
  display: grid;
}

.open-bets-empty {
  min-height: 320px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  margin: 10px auto 0;
  max-width: 460px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015));
  color: #ffffff;
  padding: 32px 20px;
  text-align: center;
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.24);
}

.open-bets-empty span {
  width: 82px;
  height: 82px;
  position: relative;
  display: grid;
  place-items: center;
  margin-bottom: 6px;
  border-radius: 24px;
  background: linear-gradient(145deg, #e41827, #99111d);
  box-shadow: 0 16px 32px rgba(228, 24, 39, 0.28);
}

.open-bets-empty span::before,
.open-bets-empty span::after {
  content: "";
  position: absolute;
}

.open-bets-empty span::before {
  width: 34px;
  height: 44px;
  border: 3px solid #ffffff;
  border-radius: 6px;
  background:
    linear-gradient(#ffffff, #ffffff) 50% 12px / 18px 3px no-repeat,
    linear-gradient(#ffffff, #ffffff) 50% 22px / 18px 3px no-repeat,
    linear-gradient(#ffffff, #ffffff) 50% 32px / 18px 3px no-repeat;
  clip-path: polygon(0 0, 100% 0, 100% 83%, 84% 100%, 68% 83%, 52% 100%, 36% 83%, 20% 100%, 0 83%);
}

.open-bets-empty span::after {
  right: 13px;
  top: 13px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #20d166;
  border: 3px solid #151922;
}

.open-bets-empty strong {
  max-width: 320px;
  color: #ffffff;
  font-size: 21px;
  line-height: 1.25;
  font-weight: 900;
}

.open-bets-empty small {
  max-width: 320px;
  color: #b8bfcc;
  font-size: 15px;
  line-height: 1.35;
  font-weight: 800;
}

.bet-ticket-empty {
  min-height: 180px;
  display: grid;
  place-items: center;
  color: #9ca3af;
  font-size: 16px;
  font-weight: 800;
}

.bet-ticket-card {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 16px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.11);
  border-left: 0;
  border-radius: 0;
  background: transparent;
  padding: 14px 0;
  color: #d7dbe4;
  box-shadow: none;
}

.bet-ticket-card:hover,
.bet-ticket-card:focus-visible {
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: none;
}

.bet-ticket-date {
  display: grid;
  align-content: start;
  justify-items: start;
  color: #aeb4c0;
  line-height: 1;
}

.bet-ticket-date strong {
  font-size: 28px;
  font-weight: 800;
}

.bet-ticket-date span {
  margin-top: 6px;
  font-size: 15px;
  font-weight: 700;
}

.bet-ticket-body {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.bet-ticket-status {
  min-height: 34px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  background: #a9adb7;
  color: #ffffff;
  padding: 0 12px;
  font-size: 18px;
  font-weight: 900;
}

.ticket-won .bet-ticket-status {
  background: #109b3a;
}

.ticket-open .bet-ticket-status {
  background: #5e6470;
}

.bet-ticket-status span {
  white-space: nowrap;
}

.bet-ticket-totals {
  display: grid;
  gap: 6px;
  color: #a4a9b4;
  font-size: 16px;
  font-weight: 700;
}

.bet-ticket-totals span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.bet-ticket-totals b {
  color: #f3f4f6;
  font-weight: 800;
}

.ticket-won .bet-ticket-totals span:last-child b {
  color: #28d567;
  font-size: 22px;
}

.bet-ticket-matches {
  display: grid;
  gap: 6px;
  padding-top: 6px;
  color: #adb2bc;
  font-size: 18px;
  line-height: 1.25;
}

.bet-ticket-matches span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bet-ticket-expand {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
  padding: 10px;
}

.bet-ticket-expand[hidden] {
  display: none;
}

.bet-ticket-expand > div {
  display: grid;
  gap: 3px;
  min-width: 0;
  color: #d9dde6;
}

.bet-ticket-expand strong,
.bet-ticket-expand span,
.bet-ticket-expand small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bet-ticket-expand strong {
  color: #ffffff;
  font-size: 14px;
}

.bet-ticket-expand span,
.bet-ticket-expand small {
  color: #aeb4c0;
  font-size: 12px;
  font-weight: 800;
}

.bet-ticket-stake-details {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 8px;
}

.bet-ticket-stake-details span {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.bet-ticket-stake-details b {
  color: #ffffff;
}

.bet-ticket-cashout {
  justify-self: end;
  min-height: 38px;
  border: 0;
  border-radius: 3px;
  background: #089a38;
  color: #ffffff;
  padding: 0 16px;
  font-weight: 900;
}

.payment-entry {
  align-items: flex-start;
}

.payment-note {
  margin: 0;
  color: #4b5260;
  font-weight: 700;
  line-height: 1.4;
}

.profile-card span {
  border-top: 1px solid var(--line);
  padding-top: 10px;
  font-weight: 800;
  color: #46505f;
}

.modal {
  border: 0;
  padding: 0;
  background: transparent;
}

.modal::backdrop {
  background: rgba(18, 23, 34, 0.55);
}

.modal-card {
  width: min(420px, calc(100vw - 28px));
  background: var(--white);
  color: var(--ink);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 22px;
  display: grid;
  gap: 14px;
  position: relative;
}

.modal-card h2 {
  margin: 0;
}

.modal-close {
  position: absolute;
  right: 12px;
  top: 10px;
  background: transparent;
  color: var(--muted);
  font-size: 22px;
  font-weight: 900;
}

.amount-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.amount-grid button {
  height: 40px;
  border-radius: 4px;
  background: #eef1f5;
  font-weight: 900;
}

.amount-grid button.active {
  background: var(--green);
  color: var(--white);
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  background: #111111;
  color: var(--white);
  border-radius: 6px;
  box-shadow: var(--shadow);
  padding: 12px 16px;
  z-index: 10000;
  font-weight: 900;
  max-width: min(520px, calc(100vw - 24px));
  line-height: 1.35;
}

@media (max-width: 1080px) {
  .account-bar {
    grid-template-columns: 1fr;
    padding: 12px 18px;
    gap: 10px;
  }

  .login-strip,
  .account-state {
    justify-self: stretch;
  }

  .login-strip {
    grid-template-columns: 1fr 1fr auto auto;
  }

  .main-nav {
    padding: 0 18px;
  }

  .hero-grid,
  .content-grid,
  .site-footer,
  .lobby-layout,
  .live-page-grid,
  .virtual-grid,
  .jackpot-layout,
  .account-grid,
  .admin-layout,
  .app-layout {
    grid-template-columns: 1fr;
  }

  .hero-grid {
    margin-top: 0;
  }

  .right-rail {
    grid-template-columns: 1fr 1fr;
  }

  .efootball-page {
    grid-template-columns: 1fr;
  }

  .ef-left-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ef-filter-card.leagues {
    grid-column: 1 / -1;
  }

  .admin-tool-grid {
    gap: 8px;
  }

  .admin-report-grid {
    grid-template-columns: repeat(3, minmax(120px, 1fr));
  }

  .admin-ops-layout {
    grid-template-columns: 1fr;
  }

  .betslip-panel {
    grid-column: 1 / -1;
  }

  .game-catalog,
  .promo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .page,
  .site-footer {
    width: 100%;
  }

  .account-bar {
    padding: 12px;
  }

  .brand {
    font-size: 24px;
  }

  .login-strip {
    grid-template-columns: 1fr;
  }

  .admin-tool-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-report-grid,
  .admin-actions.user-control-actions,
  .admin-actions.user-wallet-actions,
  .admin-actions.user-access-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .login-strip > a,
  .keep {
    min-height: 24px;
  }

  .main-nav a,
  .main-nav .time {
    min-height: 46px;
    padding: 0 11px;
    font-size: 13px;
  }

  .hero-grid {
    display: flex;
    overflow-x: auto;
    min-height: unset;
    scroll-snap-type: x mandatory;
  }

  .hero-card,
  .register-panel {
    min-width: 84%;
    scroll-snap-align: start;
  }

  .hero-card {
    order: -1;
  }

  .hero-card img {
    height: 280px;
  }

  .promo-banner {
    flex-direction: column;
    align-items: flex-start;
    margin: 10px 0;
  }

  .view-title,
  .view-hero,
  .section-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .view-title::after {
    width: 100%;
    flex-basis: auto;
    min-height: 145px;
  }

  .view-hero {
    min-height: 300px;
    padding: 24px 18px;
  }

  .game-catalog,
  .promo-grid,
  .rewards-grid {
    grid-template-columns: 1fr;
  }

  .live-market-list {
    grid-template-columns: 1fr 1fr;
  }

  .live-tracker-grid {
    grid-template-columns: 1fr;
    padding: 10px;
  }

  .live-tracker-teams {
    grid-template-columns: 1fr;
    text-align: left;
  }

  .live-tracker-teams strong:last-child {
    text-align: left;
  }

  .live-pitch {
    height: 200px;
  }

  .live-card-odds {
    grid-template-columns: 1fr 1fr;
  }

  .live-stat-grid {
    grid-template-columns: 1fr 1fr;
  }

  .scoreboard,
  .score-card,
  .result-row {
    grid-template-columns: 1fr;
  }

  .score-card {
    align-items: start;
    padding: 12px;
  }

  .panel-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .panel-head h2 {
    font-size: 24px;
  }

  .odds-header {
    display: none;
  }

  .match-row {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 12px;
  }

  .match-info,
  .match-row .more {
    grid-column: 1 / -1;
  }

  .ef-left-rail {
    grid-template-columns: 1fr;
  }

  .ef-live-strip {
    align-items: flex-start;
    flex-direction: column;
    padding: 14px;
  }

  .ef-table-head {
    display: none;
  }

  .ef-match-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    padding: 12px;
  }

  .ef-match-row > div,
  .ef-match-row a {
    grid-column: 1 / -1;
  }

  .ef-match-row .odd {
    min-height: 42px;
  }

  .goal {
    grid-column: span 1;
  }

  .live-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }

  .live-odds-header {
    grid-template-columns: repeat(5, minmax(54px, 1fr));
    gap: 6px;
    padding: 4px 0 8px;
  }

  .live-odds-header span:nth-child(-n + 2) {
    display: none;
  }

  .live-odds-header span {
    min-height: 26px;
    display: grid;
    place-items: center;
    border-radius: 4px;
    background: #2a2d34;
    color: #fff;
    font-size: 11px;
  }

  .live-league,
  .live-match,
  .live-row .more {
    grid-column: 1 / -1;
  }

  .right-rail {
    grid-template-columns: 1fr;
  }

  .admin-two,
  .admin-three {
    grid-template-columns: 1fr;
  }

  .admin-tool-card {
    flex-basis: 140px;
    min-height: 58px;
  }

  .live-score-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .live-score-actions button {
    grid-column: 1 / -1;
  }

  .site-footer {
    padding: 24px 14px 80px;
  }
}

@media (max-width: 420px) {
  .hero-card,
  .register-panel {
    min-width: 92%;
  }

  .match-row,
  .live-row,
  .ef-match-row {
    grid-template-columns: 1fr 1fr;
  }

  .admin-report-grid,
  .admin-actions.user-control-actions,
  .admin-actions.user-wallet-actions,
  .admin-actions.user-access-actions,
  .admin-actions.live-score-actions,
  .admin-actions.result-actions {
    grid-template-columns: 1fr;
  }

  .match-row .odd,
  .match-row .goal,
  .ef-match-row .odd {
    min-height: 42px;
  }

  .ef-match-row > div,
  .ef-match-row a {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  html {
    scroll-padding-top: 0;
  }

  body {
    background: #f5f6f8;
  }

  input,
  select,
  textarea,
  button {
    font-size: 16px;
  }

  .top-shell {
    position: sticky;
  }

  .account-bar {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    padding: 10px 10px 8px;
    gap: 8px 10px;
  }

  .brand {
    font-size: 22px;
    gap: 8px;
  }

  .brand-mark {
    width: 34px;
    height: 34px;
    border-radius: 7px;
  }

  .country-pill {
    justify-self: end;
    font-size: 13px;
  }

  .login-strip,
  .account-state {
    grid-column: 1 / -1;
    width: 100%;
  }

  .login-strip {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
  }

  .phone-wrap,
  .phone-wrap input,
  .login-strip > input,
  .login-strip .btn,
  .account-state .btn {
    height: 42px;
  }

  .phone-wrap {
    grid-template-columns: 50px minmax(0, 1fr);
  }

  .login-strip .btn,
  .account-state .btn {
    width: 100%;
    padding: 0 8px;
  }

  .login-strip > a,
  .keep {
    min-height: 24px;
    font-size: 12px;
    align-content: center;
  }

  .account-state {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .account-state .balance {
    grid-column: 1 / -1;
    min-height: 26px;
    display: flex;
    align-items: center;
  }

  .main-nav {
    padding: 0 10px;
    scroll-snap-type: x proximity;
  }

  .main-nav a,
  .main-nav .time {
    scroll-snap-align: start;
  }

  .main-nav a,
  .main-nav .time {
    min-height: 44px;
    padding: 0 10px;
    font-size: 13px;
  }

  .page {
    width: 100%;
    padding: 0 10px;
  }

  .hero-grid {
    gap: 10px;
    background: transparent;
    padding: 10px 0 0;
  }

  .hero-card,
  .register-panel {
    min-width: 86%;
    border-radius: 6px;
    overflow: hidden;
  }

  .register-panel {
    padding: 16px;
  }

  .hero-card img {
    height: 315px;
  }

  .hero-copy {
    inset: auto 16px 18px;
    width: calc(100% - 32px);
  }

  .hero-copy h1 {
    font-size: clamp(31px, 10vw, 44px);
  }

  .promo-banner {
    border-radius: 6px;
    min-height: 96px;
    padding: 16px;
  }

  .content-grid,
  .market-stack,
  .right-rail {
    gap: 12px;
  }

  .market-panel,
  .betslip-panel,
  .mini-games,
  .winners-panel,
  .catalog-panel,
  .play-panel,
  .match-stage,
  .match-events,
  .virtual-card,
  .schedule-panel,
  .jackpot-board,
  .ticket-panel,
  .score-list,
  .results-table,
  .promo-card,
  .level-panel,
  .mission-list,
  .wallet-card,
  .history-card,
  .payment-card,
  .profile-card,
  .phone-mock,
  .app-copy,
  .admin-card {
    border-radius: 6px;
    overflow: hidden;
  }

  .panel-head,
  .view-title,
  .view-hero {
    padding: 16px;
  }

  .view-title {
    min-height: 0;
    gap: 14px;
  }

  .view-title h1,
  .view-hero h1 {
    font-size: clamp(27px, 8vw, 40px);
  }

  .view-title::after {
    min-height: 132px;
  }

  .tab-row,
  .league-row,
  .segmented {
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }

  .segmented button,
  .tab-row button,
  .league-row button {
    flex: 0 0 auto;
    min-height: 38px;
  }

  .match-list,
  .live-table,
  .ef-board,
  .results-table,
  .jackpot-board,
  .schedule-panel {
    overflow-x: auto;
  }

  .match-row,
  .live-row,
  .ef-match-row,
  .score-card,
  .result-row,
  .jackpot-row {
    min-width: 0;
  }

  .match-row .odd,
  .match-row .goal,
  .ef-match-row .odd,
  .live-market-list .odd,
  .jackpot-row button {
    min-height: 44px;
    padding: 8px 6px;
    font-size: 13px;
  }

  .match-info strong,
  .ef-match-row strong,
  .score-card strong,
  .result-row strong {
    overflow-wrap: anywhere;
  }

  .betslip-panel {
    position: sticky;
    bottom: 0;
    z-index: 14;
    max-height: 78dvh;
    overflow-y: auto;
    border-radius: 8px 8px 0 0;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.18);
  }

  .betslip-panel > input,
  .betslip-panel > .btn,
  .betslip-panel #placeBetBtn,
  .stake-box input {
    min-height: 42px;
  }

  .game-catalog,
  .game-grid,
  .promo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .game-card {
    min-height: 156px;
    padding: 10px;
  }

  .game-card .game-visual {
    height: 84px;
  }

  .play-screen {
    min-height: 160px;
  }

  .phone-mock {
    min-height: 460px;
  }

  .phone-screen {
    width: min(245px, 86vw);
  }

  .admin-layout,
  .admin-ops-layout {
    gap: 12px;
  }

  .admin-tool-grid,
  .admin-report-grid {
    gap: 8px;
  }

  .admin-match-item {
    gap: 10px;
  }

  .admin-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .admin-actions button,
  .admin-actions input,
  .admin-actions select {
    min-height: 42px;
    width: 100%;
  }

  .history-entry,
  .payment-entry {
    align-items: stretch;
    flex-direction: column;
  }

  .modal {
    max-width: 100vw;
  }

  .modal-card {
    width: min(440px, calc(100vw - 20px));
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    padding: 20px 16px;
  }

  .amount-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .toast {
    width: calc(100vw - 24px);
    max-width: 420px;
    bottom: calc(92px + env(safe-area-inset-bottom));
    text-align: center;
  }

  body.mobile-slip-open .toast {
    bottom: calc(54dvh + env(safe-area-inset-bottom));
  }

  .chat-button {
    right: 16px;
    bottom: 72px;
  }
}

@media (max-width: 520px) {
  .account-login-form {
    grid-template-columns: 1fr;
  }

  .account-login-form .btn {
    width: 100%;
  }

  .account-bar {
    padding: 8px;
  }

  .brand {
    font-size: 20px;
  }

  .country-pill span:last-child {
    display: none;
  }

  .login-strip {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .login-strip > a {
    white-space: normal;
    line-height: 1.15;
  }

  .main-nav a.active {
    clip-path: none;
  }

  .hero-grid {
    padding-top: 8px;
  }

  .hero-card,
  .register-panel {
    min-width: 90%;
  }

  .hero-card img {
    height: 300px;
  }

  .live-market-list,
  .virtual-grid,
  .account-grid,
  .rewards-grid,
  .app-layout,
  .jackpot-layout {
    grid-template-columns: 1fr;
  }

  .game-lock-note {
    margin-top: 0;
    padding: 12px;
  }

  .game-card strong {
    font-size: 16px;
  }

  .game-card small {
    font-size: 12px;
  }

  .admin-tool-card {
    flex-basis: calc(50% - 4px);
    padding: 8px;
  }

  .site-footer {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

@media (max-width: 360px) {
  .login-strip,
  .game-catalog,
  .game-grid,
  .promo-grid,
  .admin-tool-grid,
  .admin-report-grid,
  .admin-actions {
    grid-template-columns: 1fr;
  }

  .brand {
    font-size: 19px;
  }

  .hero-card img {
    height: 280px;
  }

  .match-row,
  .live-row,
  .ef-match-row {
    grid-template-columns: 1fr;
  }

  .account-state {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .account-state .balance {
    grid-column: 1 / -1;
  }

  .account-state .btn {
    height: 40px;
    padding: 0 4px;
    font-size: 12px;
  }
}

/* Noblex-style behavior shell, using Arena2Bet's existing red/black palette. */
.account-bar {
  grid-template-columns: 44px minmax(180px, 250px) auto minmax(520px, 1fr);
}

.shell-menu-btn {
  width: 38px;
  height: 38px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  gap: 4px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(0, 0, 0, 0.18);
}

.shell-menu-btn span {
  width: 18px;
  height: 2px;
  border-radius: 10px;
  background: var(--white);
}

.shell-menu-btn.is-open {
  background: var(--brand-dark);
}

.balance-button {
  border: 0;
  background: transparent;
  color: #fff5d7;
  font: inherit;
  cursor: pointer;
}

.account-drawer {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 35;
  padding: 12px;
  background: rgba(0, 0, 0, 0.58);
}

.account-drawer[hidden] {
  display: none;
}

.drawer-panel {
  width: min(520px, calc(100vw - 24px));
  background: var(--white);
  color: var(--ink);
  border-radius: 8px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.drawer-status,
.drawer-balance {
  display: grid;
  gap: 5px;
  padding: 14px;
  border-bottom: 1px solid var(--line);
}

.drawer-status span,
.drawer-balance span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.drawer-status strong,
.drawer-balance strong {
  font-size: 18px;
}

.drawer-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 12px 14px;
  background: #f4f5f7;
}

.drawer-actions .btn {
  width: 100%;
  height: 44px;
}

.drawer-links {
  display: grid;
}

.drawer-links button {
  min-height: 54px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
  background: var(--white);
  text-align: left;
  font-weight: 900;
}

.drawer-links button::after {
  content: ">";
  float: right;
  color: var(--muted);
}

.account-popups {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.account-panel-tabs,
.split-tabs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(120px, 1fr);
  gap: 6px;
  overflow-x: auto;
}

.account-panel-tabs button,
.split-tabs button {
  min-height: 42px;
  border-radius: 5px;
  background: var(--white);
  border: 1px solid var(--line);
  font-weight: 900;
}

.account-panel-tabs button.active,
.split-tabs button.active {
  background: var(--brand-dark);
  color: var(--white);
}

.account-popup-panel {
  display: none;
  background: var(--white);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 16px;
  gap: 14px;
}

.account-popup-panel.active {
  display: grid;
}

.popup-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
}

.popup-head span {
  font-size: 20px;
  font-weight: 900;
}

.popup-head strong {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
}

.profile-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.profile-summary-grid span,
.summary-card,
.empty-panel,
.referral-box {
  display: grid;
  gap: 6px;
  min-height: 68px;
  padding: 12px;
  border-radius: 6px;
  background: #f5f6f8;
  color: var(--muted);
  font-weight: 800;
}

.profile-summary-grid b,
.summary-card b,
.empty-panel b {
  color: var(--ink);
  font-size: 18px;
}

.referral-box input {
  min-width: 0;
  height: 42px;
  border: 1px solid var(--line);
  padding: 0 10px;
}

.match-detail-modal .modal-card {
  width: min(720px, calc(100vw - 20px));
  padding: 0;
  overflow: hidden;
}

.match-detail-hero {
  display: grid;
  gap: 8px;
  padding: 18px;
  background: linear-gradient(135deg, var(--brand-dark), #2b0b0f);
  color: var(--white);
}

.match-detail-hero h2 {
  margin: 0;
  font-size: 26px;
}

.match-detail-hero p {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
}

.match-detail-hero strong {
  justify-self: start;
  padding: 7px 12px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.12);
}

.back-chip {
  justify-self: start;
  min-height: 34px;
  border-radius: 5px;
  padding: 0 12px;
  background: var(--white);
  color: var(--brand-dark);
  font-weight: 900;
}

.detail-markets {
  display: grid;
  gap: 12px;
  max-height: min(70dvh, 720px);
  overflow-y: auto;
  padding: 14px;
  background: #f1f2f5;
}

.detail-market-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 6px;
  background: var(--white);
}

.detail-market-card h3 {
  margin: 0;
  font-size: 15px;
}

.detail-odds-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.detail-odd {
  min-height: 52px;
  border-radius: 5px;
  border: 1px solid var(--line);
  background: #f8fafc;
  color: #1f2428;
  display: grid;
  gap: 4px;
  padding: 7px;
  text-align: left;
}

.detail-odd span {
  color: #1f2428;
}

.detail-odd strong {
  color: var(--green-dark);
  font-size: 17px;
}

.detail-odd.live-auto-lock,
.detail-odd.live-auto-lock:hover {
  background: #747a88;
  color: #eef1f6;
  border-color: #747a88;
  text-align: center;
}

.mobile-bottom-nav,
.mobile-slip-panel,
.mobile-slip-overlay {
  display: none;
}

@media (max-width: 1080px) {
  .account-bar {
    grid-template-columns: 44px minmax(0, 1fr) auto;
  }

  .login-strip,
  .account-state {
    grid-column: 1 / -1;
  }

  .country-pill {
    justify-self: end;
  }
}

@media (max-width: 760px) {
  .casino-unlock-panel,
  .game-lock-note,
  .casino-benefits,
  .casino-wallet-strip {
    grid-template-columns: 1fr;
  }

  .casino-unlock-actions {
    grid-template-columns: 1fr 1fr;
  }

  body.is-signed-in {
    padding-bottom: 86px;
  }

  .account-bar {
    grid-template-columns: 38px minmax(0, 1fr) auto;
  }

  .shell-menu-btn {
    width: 34px;
    height: 34px;
    padding: 7px;
  }

  .account-drawer {
    padding: 0;
    background: rgba(0, 0, 0, 0.52);
  }

  .drawer-panel {
    width: 100%;
    border-radius: 0 0 8px 8px;
  }

  .profile-summary-grid {
    grid-template-columns: 1fr;
  }

  .account-panel-tabs {
    grid-auto-columns: minmax(118px, max-content);
  }

  .detail-odds-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.is-signed-in .mobile-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 34;
    height: 74px;
    display: grid;
    grid-template-columns: 1fr 1fr 84px 1fr 1fr;
    gap: 0;
    padding: 8px 6px max(8px, env(safe-area-inset-bottom));
    background: var(--white);
    border-top: 1px solid var(--line);
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.16);
  }

  .mobile-bottom-nav a,
  .mobile-bottom-nav button {
    display: grid;
    place-items: center;
    min-width: 0;
    min-height: 56px;
    border-radius: 6px;
    background: transparent;
    color: var(--ink);
    font-size: 12px;
    font-weight: 900;
  }

  .bottom-slip-toggle {
    transform: translateY(-18px);
    background: var(--brand) !important;
    color: var(--white) !important;
    border-radius: 50% !important;
    width: 76px;
    height: 76px;
    justify-self: center;
    box-shadow: 0 12px 24px rgba(228, 24, 39, 0.28);
  }

  .bottom-slip-toggle b {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--gold);
    color: var(--brand-dark);
    font-size: 12px;
  }

  .mobile-slip-overlay:not([hidden]) {
    position: fixed;
    inset: 0;
    z-index: 38;
    display: block;
    background: rgba(0, 0, 0, 0.45);
  }

  .mobile-slip-panel:not([hidden]) {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: 82px;
    z-index: 39;
    max-height: min(76dvh, 580px);
    display: grid;
    grid-template-rows: auto auto auto minmax(120px, 1fr) auto;
    overflow: hidden;
    border-radius: 8px;
    background: var(--white);
    box-shadow: var(--shadow);
  }

  .mobile-slip-head {
    min-height: 54px;
    display: grid;
    grid-template-columns: 1fr auto 34px;
    gap: 8px;
    align-items: center;
    padding: 10px 12px;
    background: var(--brand-dark);
    color: var(--white);
  }

  .mobile-slip-head a {
    color: var(--gold);
    font-weight: 900;
  }

  .mobile-slip-head button {
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: var(--white);
    font-weight: 900;
  }

  .mobile-slip-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 8px 10px;
    background: #f1f2f5;
    gap: 6px;
  }

  .mobile-slip-tabs button {
    min-height: 38px;
    border-radius: 5px;
    background: var(--white);
    font-weight: 900;
  }

  .mobile-slip-tabs button.active {
    background: var(--brand);
    color: var(--white);
  }

  .mobile-booking-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 82px 44px;
    gap: 8px;
    padding: 0 10px 10px;
    background: #f1f2f5;
  }

  .mobile-booking-label {
    grid-column: 1 / -1;
    font-size: 0.74rem;
    font-weight: 900;
    color: var(--muted);
    text-transform: uppercase;
  }

  .mobile-booking-row input,
  .mobile-booking-row button {
    height: 40px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: var(--white);
    padding: 0 10px;
  }

  .mobile-booking-row button {
    background: var(--brand-dark);
    color: var(--white);
    font-weight: 900;
  }

  .mobile-slip-panel .betslip-items {
    overflow-y: auto;
  }

  .mobile-slip-footer {
    display: grid;
    gap: 8px;
    padding: 10px;
    border-top: 1px solid var(--line);
    background: #f8f9fb;
  }

  .mobile-slip-footer .return-row,
  .mobile-slip-footer .stake-box {
    width: 100%;
    margin: 0;
  }

  .mobile-slip-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .mobile-slip-actions .btn {
    height: 42px;
    width: 100%;
  }

  #mobileClearBetslip {
    grid-column: 1 / -1;
    height: 36px;
  }

  .chat-button {
    bottom: 92px;
  }
}

.bet-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 119;
  background: rgba(15, 17, 21, 0.48);
}

.bet-confirm-panel {
  position: fixed;
  left: 50%;
  bottom: 18px;
  z-index: 120;
  width: min(430px, calc(100vw - 22px));
  max-height: min(88vh, 620px);
  overflow: hidden;
  transform: translateX(-50%);
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--white);
  box-shadow: var(--shadow);
}

.bet-confirm-head,
.bet-confirm-actions {
  display: grid;
  align-items: center;
  gap: 8px;
}

.bet-confirm-head {
  grid-template-columns: 1fr auto;
  padding: 12px 14px;
  background: var(--brand-dark);
  color: var(--white);
  font-weight: 900;
}

.bet-confirm-head button {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: var(--white);
  font-weight: 900;
}

.bet-confirm-body {
  display: grid;
  gap: 10px;
  padding: 14px;
}

.success-kicker {
  margin: 0;
  color: var(--success);
  font-weight: 900;
}

.bet-confirm-body > strong {
  font-size: 1.2rem;
}

.bet-confirm-summary {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px;
  background: #f8f9fb;
}

.bet-confirm-summary span {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 0.9rem;
}

.bet-confirm-summary b {
  color: var(--ink);
}

.bet-confirm-summary .confirm-money-row {
  align-items: center;
  border-radius: 6px;
  padding: 8px;
  background: #ffffff;
  color: var(--ink);
  font-weight: 900;
}

.bet-confirm-summary .confirm-money-row b {
  font-size: 1.08rem;
  color: var(--success);
}

.booking-share-box {
  display: grid;
  gap: 4px;
  border-radius: 6px;
  padding: 10px;
  background: #fff5f3;
  color: var(--brand-dark);
  font-weight: 900;
}

.booking-share-box span {
  color: var(--muted);
  font-size: 0.82rem;
}

.bet-confirm-actions {
  grid-template-columns: 1fr 1.25fr;
  padding: 12px 14px 14px;
  border-top: 1px solid var(--line);
  background: #f8f9fb;
}

.bet-confirm-actions .btn {
  min-height: 40px;
}

@media (max-width: 760px) {
  body.bet-confirm-open {
    overflow: hidden;
  }

  body.bet-confirm-open .mobile-bottom-nav,
  body.bet-confirm-open .bottom-slip-toggle,
  body.bet-confirm-open .chat-button {
    pointer-events: none;
  }

  .bet-confirm-overlay {
    z-index: 119;
    background: rgba(7, 8, 11, 0.62);
  }

  .bet-confirm-panel {
    top: auto;
    right: 12px;
    bottom: max(74px, env(safe-area-inset-bottom));
    left: 12px;
    z-index: 120;
    width: auto;
    max-height: min(76vh, 520px);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    transform: none;
    border-radius: 10px;
  }

  .bet-confirm-body {
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 18px;
  }

  .bet-confirm-actions {
    position: sticky;
    bottom: 0;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 10px 12px max(12px, env(safe-area-inset-bottom));
  }

  .bet-confirm-actions .btn {
    min-height: 44px;
    width: 100%;
  }
}

.booking-copy-btn,
.mobile-booking-copy {
  display: inline-grid;
  place-items: center;
  min-width: 42px;
}

.global-search-results {
  grid-column: 1 / -1;
  display: grid;
  gap: 6px;
  padding-top: 8px;
}

.global-search-results button,
.global-search-results p {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 9px 10px;
  background: #ffffff;
  color: var(--ink);
  text-align: left;
}

.global-search-results button strong,
.global-search-results button span {
  display: block;
}

.global-search-results button span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.82rem;
}

.match-row.search-hit {
  outline: 3px solid rgba(21, 177, 74, 0.34);
  outline-offset: 2px;
}

.generated-admin-card {
  display: grid;
  gap: 12px;
}

.admin-generated-control {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  align-items: end;
}

.admin-generated-control .btn {
  min-height: 44px;
}

.payment-settings-card .admin-generated-control {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  align-items: end;
}

.payment-settings-card .admin-generated-control label:nth-child(3) {
  grid-column: span 2;
}

@media (max-width: 760px) {
  .admin-generated-control {
    grid-template-columns: 1fr;
  }

  .payment-settings-card .admin-generated-control label:nth-child(3) {
    grid-column: auto;
  }
}

/* Referral, league discovery, and verified winner activity. */
.referral-program {
  display: grid;
  gap: 14px;
  max-width: 920px;
  margin: 0 auto;
  padding: 18px;
  background: #111319;
  color: #f7f8fa;
}

.referral-program-head,
.referral-earnings > header,
.referral-share-card > header,
.referral-list-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.referral-program-head > button {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid #3a3e48;
  border-radius: 6px;
  background: #1b1e25;
  color: #ffffff;
}

.referral-program-head > div {
  display: grid;
  flex: 1;
}

.referral-program-head span,
.referral-hero > span,
.referral-total > span,
.referral-stats span {
  color: #9fa6b2;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.referral-program-head strong {
  font-size: 22px;
}

.referral-hero,
.referral-earnings,
.referral-share-card,
.referral-list-card {
  border: 1px solid #363a45;
  border-radius: 8px;
  background: #1a1d24;
}

.referral-hero {
  position: relative;
  overflow: hidden;
  min-height: 250px;
  padding: 30px;
  background:
    linear-gradient(105deg, rgba(17, 19, 25, 0.98), rgba(169, 11, 31, 0.86)),
    url("assets/stadium-hero.png") center/cover no-repeat;
}

.referral-hero::after {
  content: "A";
  position: absolute;
  right: 22px;
  bottom: -24px;
  color: rgba(255, 255, 255, 0.08);
  font-size: 190px;
  font-weight: 900;
  line-height: 1;
}

.referral-hero > span {
  color: #ffbf2f;
}

.referral-hero h2 {
  position: relative;
  z-index: 1;
  max-width: 690px;
  margin: 8px 0 12px;
  color: #ffffff;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.02;
}

.referral-hero p {
  position: relative;
  z-index: 1;
  max-width: 670px;
  margin: 0;
  color: #e6e8ed;
  line-height: 1.5;
}

.referral-badges {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

.referral-badges b {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 6px;
  background: rgba(8, 10, 14, 0.72);
  font-size: 12px;
}

.referral-badges i,
.referral-list-row > i {
  color: #17c55b;
}

.referral-earnings,
.referral-share-card,
.referral-list-card {
  padding: 18px;
}

.referral-earnings h3,
.referral-share-card h3,
.referral-list-card h3 {
  margin: 0;
  color: #ffffff;
  font-size: 18px;
}

.referral-earnings > header > span,
.referral-share-card > header > span,
.referral-list-card > header > span {
  padding: 5px 9px;
  border: 1px solid rgba(23, 197, 91, 0.34);
  border-radius: 6px;
  background: rgba(23, 197, 91, 0.1);
  color: #58df8b;
  font-size: 11px;
  font-weight: 800;
}

.referral-total {
  display: grid;
  gap: 5px;
  margin: 14px 0;
  padding: 18px;
  border-left: 4px solid #e41827;
  background: #101218;
}

.referral-total strong {
  color: #20d766;
  font-size: 36px;
  line-height: 1.1;
}

.referral-total small {
  color: #aeb4bf;
}

.referral-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.referral-stats > div {
  display: grid;
  gap: 6px;
  min-height: 84px;
  align-content: center;
  padding: 13px;
  border: 1px solid #363a45;
  border-radius: 6px;
  background: #20232b;
}

.referral-stats strong {
  color: #ffffff;
  font-size: 21px;
}

.referral-box {
  display: grid;
  gap: 7px;
  margin: 14px 0 10px !important;
  border: 0 !important;
  background: transparent !important;
}

.referral-box span {
  color: #aeb4bf;
  font-size: 12px;
  font-weight: 700;
}

.referral-box input {
  width: 100%;
  height: 46px;
  border: 1px solid #414651;
  border-radius: 5px;
  background: #101218;
  color: #ffffff;
  padding: 0 12px;
}

.referral-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.referral-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
}

.referral-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.referral-list-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 8px 10px;
  border: 1px solid #343843;
  border-radius: 6px;
  background: #101218;
}

.referral-list-row > i {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 50%;
  background: rgba(23, 197, 91, 0.1);
}

.referral-list-row > span {
  display: grid;
  min-width: 0;
}

.referral-list-row strong {
  color: #ffffff;
}

.referral-list-row small {
  color: #929aa7;
}

.referral-list-row > b {
  color: #f1b62c;
  font-size: 11px;
}

.referral-list-row > b.earned {
  color: #28d36b;
}

.referral-empty {
  margin: 0;
  padding: 18px;
  border: 1px dashed #414651;
  color: #aeb4bf;
  text-align: center;
}

@media (max-width: 760px) {
  .mobile-home-activity {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 8px;
    background: #f4f5f6;
  }

  .mobile-activity-card {
    position: relative;
    display: grid;
    min-width: 0;
    min-height: 118px;
    overflow: hidden;
    padding: 0;
    border: 1px solid #d7dbe0;
    border-radius: 6px;
    background:
      linear-gradient(180deg, rgba(12, 14, 18, 0.08) 30%, rgba(9, 11, 15, 0.96) 100%),
      url("/arena-sports-card.jpg") 66% center/cover no-repeat;
    color: #ffffff;
    text-align: left;
  }

  .mobile-activity-card.sports {
    border-color: rgba(228, 24, 39, 0.76);
    background:
      linear-gradient(180deg, rgba(12, 14, 18, 0.05) 34%, rgba(9, 11, 15, 0.96) 100%),
      url("/arena-sports-card.jpg") 66% center/cover no-repeat;
  }

  .mobile-activity-card.casino {
    border-color: rgba(228, 24, 39, 0.72);
    background:
      linear-gradient(180deg, rgba(12, 14, 18, 0.02) 34%, rgba(9, 11, 15, 0.96) 100%),
      url("/arena-casino-card.jpg") 63% center/cover no-repeat;
  }

  .mobile-activity-visual {
    display: grid;
    position: absolute;
    z-index: 2;
    top: 9px;
    right: 9px;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 50%;
    background: rgba(9, 11, 15, 0.68);
    font-size: 17px;
    backdrop-filter: blur(5px);
  }

  .mobile-activity-card.casino .mobile-activity-visual {
    color: #ffc52e;
    text-shadow: 0 4px 12px rgba(255, 197, 46, 0.34);
  }

  .mobile-activity-card.sports .mobile-activity-visual {
    color: #ffffff;
    text-shadow: 0 4px 12px rgba(228, 24, 39, 0.55);
  }

  .mobile-activity-copy {
    display: grid;
    position: relative;
    z-index: 1;
    align-self: end;
    gap: 3px;
    min-width: 0;
    padding: 34px 10px 10px;
    background: linear-gradient(180deg, transparent, rgba(8, 10, 14, 0.92) 48%, #080a0e 100%);
  }

  .mobile-activity-copy b {
    font-size: 15px;
  }

  .mobile-activity-copy small {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    color: #c8ccd3;
    font-size: 10px;
    white-space: nowrap;
  }

  .mobile-activity-copy small > i,
  .mobile-live-label > i {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: #19d762;
    box-shadow: 0 0 9px rgba(25, 215, 98, 0.55);
  }

  .mobile-live-label > i {
    background: #e41827;
    box-shadow: 0 0 9px rgba(228, 24, 39, 0.62);
  }

  .mobile-activity-copy strong {
    color: #ffffff;
  }

  .mobile-home-section {
    margin: 0 8px 10px;
    padding: 12px;
    border: 1px solid #dce0e5;
    border-radius: 6px;
    background: #ffffff;
  }

  .mobile-home-section > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
  }

  .mobile-home-section h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: #1b1e24;
    font-size: 17px;
  }

  .mobile-home-section h2 > i {
    display: grid;
    width: 29px;
    height: 29px;
    place-items: center;
    border-radius: 50%;
    background: #f0f1f3;
    color: #e41827;
    font-size: 13px;
  }

  .mobile-home-section > header > button {
    min-height: 30px;
    padding: 0 10px;
    border: 0;
    border-radius: 4px;
    background: #17191e;
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
  }

  .mobile-league-rail,
  .mobile-winner-rail {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
  }

  .mobile-league-rail::-webkit-scrollbar,
  .mobile-winner-rail::-webkit-scrollbar {
    display: none;
  }

  .mobile-league-card {
    position: relative;
    display: grid;
    flex: 0 0 132px;
    min-height: 142px;
    align-content: end;
    gap: 5px;
    overflow: hidden;
    padding: 12px;
    border: 0;
    border-radius: 6px;
    background:
      linear-gradient(180deg, rgba(10, 11, 14, 0.05) 20%, rgba(8, 9, 12, 0.94) 100%),
      url("arena-league-ball.jpg") center/cover no-repeat;
    color: #ffffff;
    scroll-snap-align: start;
    text-align: left;
  }

  .mobile-league-card::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 58%;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.76));
  }

  .mobile-league-card.league-tone-0 {
    background-image:
      linear-gradient(180deg, rgba(10, 11, 14, 0.05) 20%, rgba(8, 9, 12, 0.94) 100%),
      url("arena-league-ball.jpg");
  }

  .mobile-league-card.league-tone-1 {
    background-image:
      linear-gradient(180deg, rgba(10, 11, 14, 0.05) 20%, rgba(8, 9, 12, 0.94) 100%),
      url("arena-league-goal.jpg");
  }

  .mobile-league-card.league-tone-2 {
    background-image:
      linear-gradient(180deg, rgba(10, 11, 14, 0.05) 20%, rgba(8, 9, 12, 0.94) 100%),
      url("arena-league-trophy.jpg");
  }

  .mobile-league-card.league-tone-3 {
    background-image:
      linear-gradient(180deg, rgba(10, 11, 14, 0.05) 20%, rgba(8, 9, 12, 0.94) 100%),
      url("arena-league-action.jpg");
  }

  .mobile-league-card > span {
    position: absolute;
    top: 11px;
    left: 11px;
    display: grid;
    width: 43px;
    height: 43px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.28);
    color: #ffffff;
    font-size: 14px;
    font-weight: 900;
  }

  .mobile-league-card strong,
  .mobile-league-card small {
    position: relative;
    z-index: 1;
  }

  .mobile-league-card strong {
    overflow: hidden;
    font-size: 13px;
    line-height: 1.15;
    text-overflow: ellipsis;
  }

  .mobile-league-card small {
    color: #d8dce3;
    font-size: 10px;
  }

  .mobile-recent-winners {
    background: #101114;
    border-color: #2a2b30;
  }

  .mobile-recent-winners h2 {
    color: #ffffff;
  }

  .mobile-live-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
  }

  .mobile-winner-card {
    display: grid;
    flex: 0 0 min(292px, calc(100vw - 48px));
    gap: 12px;
    min-height: 250px;
    padding: 14px;
    border: 1px solid rgba(228, 24, 39, 0.52);
    border-radius: 6px;
    background:
      linear-gradient(115deg, rgba(18, 19, 24, 0.98) 0 52%, rgba(18, 19, 24, 0.82) 100%),
      url("arena-sports-card.jpg") center/cover no-repeat;
    color: #ffffff;
    scroll-snap-align: start;
  }

  .mobile-winner-card > header,
  .mobile-winner-card > div,
  .mobile-winner-card > div > span {
    display: flex;
    align-items: center;
  }

  .mobile-winner-card > header {
    justify-content: space-between;
    gap: 10px;
  }

  .mobile-winner-card > header span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 9px;
    border: 1px solid rgba(228, 24, 39, 0.45);
    border-radius: 5px;
    background: #e41827;
    color: #ffffff;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
  }

  .mobile-winner-card time {
    color: #aeb4bf;
    font-size: 10px;
  }

  .mobile-winner-card > div:nth-of-type(1) {
    gap: 10px;
  }

  .mobile-winner-card > div:nth-of-type(1) > i {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    border: 1px solid rgba(228, 24, 39, 0.66);
    border-radius: 50%;
    background: #111216;
    color: #ffffff;
    font-size: 18px;
  }

  .mobile-winner-card > div:nth-of-type(1) > span {
    display: grid;
    min-width: 0;
  }

  .mobile-winner-card > div:nth-of-type(1) strong,
  .mobile-winner-card > div:nth-of-type(1) small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-winner-card > div:nth-of-type(1) small {
    color: #aeb4bf;
  }

  .mobile-winner-card > b {
    color: #f01b2d;
    font-size: 26px;
    line-height: 1;
  }

  .mobile-winner-card > div:last-child {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .mobile-winner-card > div:last-child > span {
    display: grid;
    gap: 3px;
    min-height: 58px;
    align-content: center;
    padding: 8px 10px;
    border-radius: 5px;
    border: 1px solid #303238;
    background: #111216;
  }

  .mobile-winner-card > div:last-child small {
    color: #9199a6;
    font-size: 10px;
  }

  .mobile-discovery-empty {
    display: grid;
    flex: 1 0 100%;
    min-height: 80px;
    place-items: center;
    margin: 0;
    border: 1px dashed #d0d5dc;
    color: #747b86;
    text-align: center;
  }

  .mobile-recent-winners .mobile-discovery-empty {
    border-color: #414650;
    color: #aab0bb;
  }

  .mobile-swipe-label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    color: #aeb4bf;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
  }

  .mobile-swipe-label span {
    height: 1px;
    flex: 1;
    background: #3d424c;
  }

  .referral-program {
    gap: 10px;
    margin: 0;
    padding: 10px 10px calc(88px + env(safe-area-inset-bottom));
  }

  .referral-program-head {
    min-height: 48px;
  }

  .referral-hero {
    min-height: 0;
    padding: 22px 18px;
  }

  .referral-hero::after {
    right: 8px;
    font-size: 130px;
  }

  .referral-hero h2 {
    max-width: 390px;
    font-size: clamp(25px, 8vw, 34px);
  }

  .referral-hero p {
    font-size: 13px;
  }

  .referral-badges {
    gap: 6px;
  }

  .referral-badges b {
    min-height: 30px;
    padding: 0 9px;
    font-size: 10px;
  }

  .referral-earnings,
  .referral-share-card,
  .referral-list-card {
    padding: 14px;
  }

  .referral-total strong {
    font-size: 30px;
  }

  .referral-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .referral-stats > div:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 360px) {
  .mobile-home-activity {
    gap: 6px;
    padding-inline: 6px;
  }

  .mobile-activity-card {
    min-height: 108px;
  }

  .mobile-activity-copy {
    padding-inline: 8px;
  }

  .mobile-activity-copy small {
    font-size: 9px;
  }

  .referral-actions {
    grid-template-columns: 1fr;
  }

  .referral-list-row {
    grid-template-columns: 30px minmax(0, 1fr);
  }

  .referral-list-row > b {
    grid-column: 2;
  }
}

.win-prompt-overlay,
.ticket-detail-overlay {
  position: fixed;
  inset: 0;
  z-index: 84;
  background: rgba(9, 10, 13, 0.72);
}

.win-prompt-panel {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 85;
  width: min(390px, calc(100vw - 24px));
  overflow: hidden;
  transform: translate(-50%, -50%);
  border-radius: 10px;
  background: #101215;
  color: #ffffff;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.42);
}

.win-prompt-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  font-weight: 900;
}

.win-prompt-backdrop {
  min-height: 390px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  padding: 44px 22px 26px;
  background:
    radial-gradient(circle at 50% 46%, rgba(255, 210, 70, 0.78) 0 8%, rgba(255, 210, 70, 0.22) 18%, transparent 44%),
    linear-gradient(rgba(12, 13, 17, 0.78), rgba(12, 13, 17, 0.86)),
    var(--img-stadium);
  background-size: cover;
  background-position: center;
  text-align: center;
}

.win-prompt-backdrop span {
  color: #ffe000;
  font-size: 18px;
  font-weight: 1000;
  letter-spacing: 0;
}

.win-prompt-backdrop strong {
  color: #ffffff;
  font-size: clamp(34px, 10vw, 48px);
  font-weight: 1000;
  text-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}

.arena-cup {
  width: 156px;
  height: 132px;
  border-radius: 24px 24px 42px 42px;
  display: grid;
  place-items: center;
  position: relative;
  background: linear-gradient(145deg, #fff0a3 0%, #ffbd18 46%, #a96600 100%);
  box-shadow: 0 0 42px rgba(255, 204, 0, 0.6), inset 0 -14px 24px rgba(111, 63, 0, 0.26);
}

.arena-cup::before,
.arena-cup::after {
  content: "";
  position: absolute;
  top: 28px;
  width: 48px;
  height: 48px;
  border: 10px solid #ffc928;
  border-radius: 50%;
}

.arena-cup::before {
  left: -38px;
  border-right-color: transparent;
}

.arena-cup::after {
  right: -38px;
  border-left-color: transparent;
}

.arena-cup b {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #e41827;
  color: #ffffff;
  font-size: 48px;
  font-weight: 1000;
  box-shadow: inset 0 -6px 0 rgba(0, 0, 0, 0.2);
}

.win-prompt-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.win-prompt-actions button,
.win-prompt-share button {
  min-height: 54px;
  color: #ffffff;
  font-weight: 900;
}

.win-prompt-actions button {
  background: var(--sporty-green);
  border-right: 1px solid rgba(255, 255, 255, 0.16);
}

.win-prompt-actions button:last-child {
  border-right: 0;
}

.win-prompt-share {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--sporty-green);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.win-prompt-share button {
  min-height: 42px;
  background: transparent;
  font-size: 13px;
}

.ticket-detail-panel {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 86;
  width: min(592px, calc(100vw - 16px));
  max-height: min(88vh, 680px);
  overflow: hidden;
  transform: translate(-50%, -50%);
  border-radius: 8px;
  background: #1a1d23;
  color: #ffffff;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.42);
}

.ticket-detail-head {
  min-height: 72px;
  display: grid;
  grid-template-columns: 64px 1fr 80px;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  background: var(--brand);
  color: #ffffff;
}

.ticket-detail-head strong {
  font-size: clamp(24px, 6vw, 34px);
  font-weight: 1000;
}

.ticket-detail-head button {
  min-height: 42px;
  border-radius: 5px;
  background: transparent;
  color: #ffffff;
  font-weight: 900;
  font-size: 18px;
}

.ticket-detail-body {
  display: grid;
  gap: 14px;
  min-height: 0;
  overflow: auto;
  padding: 18px 20px 0;
  background: #ffffff;
  color: #111827;
}

.ticket-detail-meta,
.ticket-detail-status-row,
.ticket-total-return,
.ticket-detail-lines span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.ticket-detail-meta,
.ticket-detail-lines {
  color: #596274;
  font-weight: 800;
}

.ticket-detail-status-row strong {
  font-size: 26px;
}

.ticket-detail-status-row b {
  color: var(--success);
  font-size: 28px;
  font-weight: 1000;
}

.ticket-detail-panel[data-ticket-status="lost"] .ticket-detail-status-row b,
.ticket-detail-panel[data-ticket-status="lost"] .ticket-total-return strong {
  color: #aeb4c0;
}

.ticket-detail-panel[data-ticket-status="refunded"] .ticket-detail-status-row b,
.ticket-detail-panel[data-ticket-status="voided"] .ticket-detail-status-row b,
.ticket-detail-panel[data-ticket-status="cashed-out"] .ticket-detail-status-row b {
  color: #f2bd37;
}

.ticket-total-return {
  padding: 14px 0 4px;
  border-top: 1px solid #e6e9ef;
  color: #596274;
  font-size: 22px;
  font-weight: 900;
}

.ticket-total-return strong {
  color: var(--success);
  font-size: clamp(28px, 8vw, 36px);
  font-weight: 1000;
}

.ticket-detail-lines {
  display: grid;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e6e9ef;
  font-size: 20px;
}

.ticket-detail-lines b {
  color: #111827;
}

.ticket-detail-selections {
  max-height: 260px;
  overflow: auto;
  display: grid;
  gap: 8px;
  padding-right: 4px;
}

.ticket-detail-selection {
  display: grid;
  gap: 7px;
  border-radius: 5px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  color: #111827;
  padding: 11px 12px;
}

.ticket-selection-live {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  border-radius: 999px;
  background: #ecfdf3;
  color: #087a34;
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 900;
}

.site-view[data-view="admin"] .admin-card {
  min-width: 0;
}

.site-view[data-view="admin"] .admin-ops-layout,
.site-view[data-view="admin"] .admin-card[data-admin-group="overview"] {
  min-width: 0;
}

@media (max-width: 760px) {
  .site-view[data-view="admin"] {
    padding-inline: 8px;
  }

  .admin-tool-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
  }

  .admin-tool-card {
    min-width: 0;
  }

  .site-view[data-view="admin"] .admin-card {
    padding: 12px;
  }

  .admin-card h2 {
    align-items: flex-start;
    gap: 8px;
  }

  .admin-card h2 span {
    margin-left: 0;
  }
}

.ticket-selection-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.ticket-selection-head strong {
  min-width: 0;
  overflow: hidden;
  color: #ffffff;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ticket-selection-head em {
  flex: 0 0 auto;
  color: var(--success);
  font-style: normal;
  font-weight: 900;
}

.ticket-congrats-row {
  min-height: 92px;
  display: grid;
  grid-template-columns: auto 1fr minmax(120px, auto);
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  background:
    linear-gradient(135deg, transparent 0 18%, rgba(228, 24, 39, 0.9) 18% 20%, transparent 20% 38%, rgba(255, 196, 0, 0.9) 38% 40%, transparent 40%),
    #1a1d23;
}

.ticket-coin {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle, #fff2b3 0%, #f6b700 58%, #b46b00 100%);
  color: var(--brand);
  font-size: 34px;
  font-weight: 1000;
  box-shadow: 0 0 18px rgba(255, 196, 0, 0.55);
}

.ticket-congrats-row p {
  margin: 0;
  color: #ffffff;
  font-weight: 900;
  line-height: 1.1;
}

.ticket-congrats-row b {
  color: #ffffff;
}

.ticket-congrats-row button {
  min-height: 66px;
  border-radius: 5px;
  background: #ffc400;
  color: #111111;
  padding: 0 22px;
  font-size: 20px;
  font-weight: 1000;
}

.ticket-verify-row {
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #252934;
  color: #aaaeb8;
  font-size: 20px;
  font-weight: 800;
}

.ticket-verify-row b {
  color: var(--success);
  font-weight: 900;
}

body.win-prompt-open,
body.ticket-detail-open {
  overflow: hidden;
}

@media (max-width: 620px) {
  .win-prompt-panel {
    width: min(380px, calc(100vw - 14px));
  }

  .win-prompt-backdrop {
    min-height: 360px;
    padding-inline: 18px;
  }

  .ticket-detail-panel {
    width: 100vw;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
  }

  .ticket-detail-head {
    grid-template-columns: 56px 1fr 68px;
    min-height: 68px;
  }

  .ticket-detail-body {
    gap: 12px;
    padding: 20px 18px 0;
  }

  .ticket-detail-meta,
  .ticket-detail-lines {
    font-size: 16px;
  }

  .ticket-detail-status-row strong {
    font-size: 24px;
  }

  .ticket-detail-status-row b {
    font-size: 24px;
  }

  .ticket-total-return {
    font-size: 19px;
  }

  .ticket-congrats-row {
    grid-template-columns: 54px 1fr;
  }

  .ticket-congrats-row button {
    grid-column: 1 / -1;
    min-height: 52px;
    width: 100%;
  }

  .ticket-verify-row {
    font-size: 17px;
  }
}

@media (max-width: 360px) {
  .drawer-actions,
  .detail-odds-grid,
  .mobile-slip-actions,
  .bet-confirm-actions,
  .casino-unlock-actions {
    grid-template-columns: 1fr;
  }

  body.is-signed-in .mobile-bottom-nav {
    grid-template-columns: 1fr 1fr 72px 1fr 1fr;
  }

  .bottom-slip-toggle {
    width: 68px;
    height: 68px;
  }
}

/* Final Noblex-style mobile sports flow. */
.mobile-noblex-panel {
  display: none;
}

@media (max-width: 760px) {
  :root {
    --odds-sticky-top: 136px;
  }

  body {
    padding-bottom: 92px;
    background: #f0f1f3;
  }

  .top-shell {
    box-shadow: none;
  }

  .account-bar {
    min-height: 64px;
    grid-template-columns: 40px minmax(0, 1fr) max-content;
    gap: 6px;
    padding: 9px 9px;
    background: #050505;
    border-bottom: 1px solid #1d1d1d;
    overflow: hidden;
  }

  .shell-menu-btn {
    display: grid;
    width: 36px;
    height: 36px;
    border-radius: 7px;
    border: 0;
    background: linear-gradient(180deg, #303030, #0c0c0c);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  }

  .shell-menu-btn span {
    width: 20px;
    height: 3px;
    background: #e41827;
  }

  .brand {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    gap: 7px;
    font-size: clamp(18px, 5.2vw, 22px);
    color: #fff;
    white-space: nowrap;
  }

  .brand span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #fff;
  }

  .brand span:last-child::first-letter {
    color: #e41827;
  }

  .brand-mark {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 7px;
    background: #e41827;
    color: #fff;
    transform: none;
  }

  .login-strip {
    grid-column: auto;
    display: flex;
    justify-content: flex-end;
    gap: 5px;
    width: auto;
    min-width: 0;
  }

  .login-strip .phone-wrap,
  .login-strip > input,
  .login-strip .keep,
  .login-strip > a {
    display: none;
  }

  .login-strip .btn {
    width: auto;
    min-width: 58px;
    height: 38px;
    border-radius: 6px;
    padding: 0 10px;
    font-size: 13px;
    font-weight: 900;
  }

  .login-strip #openRegisterTop {
    min-width: 72px;
  }

  .login-strip .btn-dark {
    background: #fff;
    color: #e41827;
  }

  .login-strip .btn-outline {
    background: #e41827;
    color: #fff;
    border-color: #e41827;
  }

  .account-state {
    grid-column: 1 / -1;
    background: #050505;
  }

  .main-nav {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    min-height: 70px;
    padding: 0;
    background: #202020;
    overflow: visible;
    border-top: 1px solid #1a1a1a;
    border-bottom: 2px solid #d9d9d9;
  }

  .main-nav a {
    min-height: 68px;
    display: grid;
    grid-template-rows: 25px 18px;
    place-items: center;
    align-content: center;
    gap: 4px;
    padding: 8px 4px;
    border-right: 1px solid #303030;
    color: #fff;
    font-size: 13px;
    font-weight: 900;
    text-transform: lowercase;
    line-height: 1;
    overflow: hidden;
  }

  .main-nav a::before {
    content: "";
    width: 23px;
    height: 23px;
    display: block;
    margin: 0;
    background: currentColor;
    -webkit-mask: var(--top-nav-icon) center / contain no-repeat;
    mask: var(--top-nav-icon) center / contain no-repeat;
  }

  .main-nav a[data-nav="sports"]::before {
    --top-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.35' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11.5 12 4l9 7.5'/%3E%3Cpath d='M5.5 10.5V20h13v-9.5'/%3E%3Cpath d='M9.2 20v-6h5.6v6'/%3E%3C/svg%3E");
  }

  .main-nav a[data-nav="sport"]::before {
    --top-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8.2 5.8 2.7 3.6-1.7 5.1-4.1.4'/%3E%3Cpath d='m15.8 5.8-2.7 3.6 1.7 5.1 4.1.4'/%3E%3Cpath d='M9.2 14.5h5.6'/%3E%3Cpath d='m10.9 9.4 2.2 0'/%3E%3Cpath d='m7.1 18 2.1-3.5'/%3E%3Cpath d='m16.9 18-2.1-3.5'/%3E%3C/svg%3E");
  }

  .main-nav a[data-nav="live"]::before {
    --top-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='12' rx='2'/%3E%3Cpath d='m10 9 5 2-5 2z'/%3E%3Cpath d='M9 21h6'/%3E%3Cpath d='M12 17v4'/%3E%3C/svg%3E");
  }

  .main-nav a[data-nav="games"]::before {
    --top-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.15' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='5' width='14' height='14' rx='3'/%3E%3Ccircle cx='9' cy='9' r='1'/%3E%3Ccircle cx='15' cy='9' r='1'/%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3Ccircle cx='9' cy='15' r='1'/%3E%3Ccircle cx='15' cy='15' r='1'/%3E%3C/svg%3E");
  }

  .main-nav a.active {
    background: #e41827;
    color: #fff;
  }

  .page {
    padding: 0;
  }

  .hero-grid {
    display: block;
    padding: 0;
  }

  .hero-card {
    width: 100%;
    min-width: 0;
    height: 166px;
    border-radius: 0;
  }

  .hero-card img {
    height: 166px;
    filter: saturate(1.15) contrast(1.04);
  }

  .hero-card::after {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.92), rgba(128, 0, 14, 0.72), rgba(0, 0, 0, 0.24));
  }

  .hero-copy {
    inset: 18px auto 14px 18px;
    width: min(270px, calc(100% - 36px));
  }

  .hero-copy .eyebrow {
    font-size: 11px;
  }

  .hero-copy h1 {
    max-width: 260px;
    font-size: 29px;
    line-height: 0.96;
  }

  .hero-copy p:not(.eyebrow) {
    display: none;
  }

  .hero-copy .btn {
    min-height: 28px;
    width: 122px;
    border-radius: 5px;
    background: #e41827;
    color: #fff;
  }

  .register-panel,
  .right-rail,
  .market-panel.highlights .panel-head,
  .market-panel.live {
    display: none;
  }

  .market-panel.highlights .tab-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    gap: 8px;
    padding: 10px 10px 0;
    overflow-x: auto;
    background: #fff;
  }

  .market-panel.highlights .tab-row button {
    min-height: 34px;
    padding: 0 12px;
    font-size: 13px;
    border-bottom-width: 2px;
  }

  .mobile-noblex-panel {
    display: grid;
    gap: 14px;
    padding: 12px 10px 0;
  }

  .mobile-search-row {
    display: grid;
    grid-template-columns: 142px minmax(0, 1fr);
    gap: 10px;
  }

  .mobile-filter-chip,
  .mobile-search-box {
    height: 52px;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  }

  .mobile-filter-chip {
    background: #202020;
    color: #fff;
    font-weight: 900;
  }

  .mobile-search-box {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px;
    align-items: center;
    overflow: hidden;
    border: 1px solid #dddfe5;
  }

  .mobile-search-box input {
    width: 100%;
    height: 100%;
    border: 0;
    padding: 0 12px;
    color: #333;
  }

  .mobile-search-box span {
    width: 24px;
    height: 24px;
    overflow: hidden;
    text-indent: 40px;
    border: 3px solid #333;
    border-radius: 50%;
    position: relative;
  }

  .mobile-search-box span::after {
    content: "";
    position: absolute;
    right: -6px;
    bottom: -4px;
    width: 11px;
    height: 3px;
    background: #333;
    transform: rotate(45deg);
    border-radius: 3px;
  }

  .mobile-empty-live {
    display: grid;
    place-items: center;
    min-height: 78px;
    border-radius: 8px;
    border: 1px dashed #d6d6d6;
    background: #fff;
    color: #777;
    font-weight: 900;
  }

  .mobile-empty-live.has-live {
    border-color: rgba(0, 176, 35, 0.35);
    background: #e8f8e9;
    color: #008a1e;
  }

  .home-match-group {
    padding: 11px 0 6px;
  }

  .home-match-group strong {
    font-size: 14px;
  }

  .home-match-group span {
    font-size: 11px;
  }

  .mobile-sports-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  .mobile-sports-head h2 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 20px;
  }

  .mobile-sports-head h2 span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #e41827;
    box-shadow: 0 0 0 6px #dcffe8;
  }

  .mobile-sports-head button {
    min-height: 40px;
    border-radius: 999px;
    padding: 0 15px;
    background: #202020;
    color: #fff;
    font-size: 12px;
    font-weight: 900;
  }

  .mobile-sport-icons,
  .mobile-league-chips {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 92px;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }

  .mobile-league-chips {
    grid-auto-columns: max-content;
    gap: 10px;
  }

  .mobile-sport-icons button {
    min-height: 90px;
    display: grid;
    place-items: center;
    gap: 7px;
    border-radius: 8px;
    background: #fff;
    color: #242424;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.09);
    font-weight: 900;
  }

  .mobile-sport-icons button.active {
    background: #e3ffe8;
  }

  .mobile-sport-icons i {
    width: 38px;
    height: 38px;
    position: relative;
    display: block;
    border: 4px solid #222;
  }

  .sport-ball {
    border-radius: 50%;
  }

  .sport-base {
    border-radius: 50%;
    border-style: dashed !important;
  }

  .sport-shield {
    border-radius: 12px 12px 18px 18px;
  }

  .sport-rugby {
    width: 44px !important;
    border-radius: 50%;
    transform: rotate(-25deg);
  }

  .mobile-league-chips button {
    min-height: 42px;
    border-radius: 999px;
    padding: 0 18px;
    background: #fff;
    color: #202020;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    font-weight: 900;
  }

  .mobile-league-chips button.active {
    background: #202020;
    color: #fff;
  }

  .content-grid,
  .market-stack {
    display: block;
  }

  .market-panel.highlights {
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .odds-table {
    padding: 0 10px 12px;
  }

  .odds-header {
    display: grid;
    grid-template-columns: minmax(132px, 1fr) repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 8px 0 9px;
    margin: 0 -10px 8px;
    padding-inline: 10px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 1px 0 #d8dce3, 0 8px 14px rgba(240, 241, 243, 0.94);
    color: #202020;
    font-size: 16px;
    font-weight: 1000;
  }

  .odds-header span:nth-child(n+5) {
    display: none;
  }

  .odds-header span:first-child {
    color: #e41827;
    text-align: left;
  }

  .home-match-group-live {
    margin: 10px -10px 6px;
    padding: 12px 10px 8px;
    background: #171a22;
    border-top: 0;
    border-bottom: 2px solid #22c55e;
  }

  .home-match-group-live strong {
    color: #fff;
  }

  .home-match-group-live span {
    color: #22c55e;
  }

  .match-row {
    grid-template-columns: minmax(132px, 1fr) repeat(3, minmax(58px, 1fr));
    gap: 8px;
    align-items: stretch;
    margin: 0 0 8px;
    padding: 10px;
    border: 0;
    border-radius: 5px;
    background: #fff;
    box-shadow: 0 1px 5px rgba(15, 17, 21, 0.12);
  }

  .match-info {
    grid-column: 1;
    grid-row: 1 / span 2;
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
  }

  .match-info time {
    order: 3;
    font-size: 12px;
    color: #7d7d7d;
    font-weight: 800;
  }

  .match-info small {
    order: 4;
    max-width: 100%;
    overflow: hidden;
    color: #7d7d7d;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .match-info strong {
    color: #2f3237;
    font-size: 13px;
    font-weight: 1000;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .match-row > .odd:nth-of-type(1),
  .match-row > .odd:nth-of-type(2),
  .match-row > .odd:nth-of-type(3) {
    grid-row: 1 / span 2;
  }

  .match-row .goal,
  .match-row .goal-line-control,
  .match-row .goal + .odd,
  .match-row .goal + .odd + .odd,
  .match-row .goal-line-control + .odd,
  .match-row .goal-line-control + .odd + .odd {
    display: none;
  }

  .match-row .odd {
    min-height: 84px;
    border-radius: 8px;
    border: 1px solid #b9ecc9;
    background: #e8f9eb;
    color: #242424;
    font-size: 14px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.65);
  }

  .match-row .odd:hover,
  .match-row .odd.selected {
    background: #e41827;
    color: #fff;
    outline: 0;
  }

  .match-row.live-match-row {
    background: #171a22;
    border-bottom: 1px solid #2d323d;
    box-shadow: none;
  }

  .match-row.live-match-row .match-info {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 24px;
    align-content: center;
    column-gap: 8px;
    row-gap: 3px;
  }

  .match-row.live-match-row .match-info strong {
    color: #fff;
  }

  .match-row.live-match-row .match-info .home-team-name {
    grid-column: 1;
    grid-row: 2;
  }

  .match-row.live-match-row .match-info .away-team-name {
    grid-column: 1;
    grid-row: 3;
  }

  .match-row.live-match-row .match-info .match-score {
    display: block;
    color: #fff;
    font-size: 14px;
    font-weight: 1000;
    line-height: 1.25;
    text-align: right;
  }

  .match-row.live-match-row .match-info .home-match-score {
    grid-column: 2;
    grid-row: 2;
  }

  .match-row.live-match-row .match-info .away-match-score {
    grid-column: 2;
    grid-row: 3;
  }

  .match-row.live-match-row .match-info time {
    grid-column: 1 / -1;
    grid-row: 1;
    color: #22c55e;
  }

  .match-row.live-match-row .match-info small {
    grid-column: 1 / -1;
    grid-row: 4;
    color: #aab2c0;
  }

  .match-row.live-match-row .odd {
    border-color: #2e3541;
    background: #2b3038;
    color: #22c55e;
    box-shadow: none;
  }

  .match-row.live-match-row .odd:hover,
  .match-row.live-match-row .odd.selected {
    background: #e41827;
    color: #fff;
  }

  .match-row .more {
    grid-column: 2 / -1;
    justify-self: end;
    min-height: 22px;
    place-items: center end;
    color: #7a7d83;
    font-size: 12px;
    font-weight: 1000;
  }

  .mobile-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 64;
    height: 82px;
    display: grid;
    grid-template-columns: 1fr 1fr 86px 1fr 1fr;
    gap: 0;
    padding: 9px 6px max(8px, env(safe-area-inset-bottom));
    background: #050505;
    color: #fff;
    box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.28);
  }

  .mobile-bottom-nav a,
  .mobile-bottom-nav button {
    display: grid;
    place-items: center;
    min-width: 0;
    min-height: 58px;
    border-radius: 0;
    background: transparent;
    color: #fff;
    font-size: 12px;
    font-weight: 900;
  }

  .mobile-bottom-nav a::before,
  .mobile-bottom-nav button::before {
    content: "";
    width: 22px;
    height: 20px;
    display: block;
    border: 3px solid currentColor;
    border-radius: 5px;
  }

  .bottom-slip-toggle {
    width: 78px;
    height: 78px;
    align-self: end;
    justify-self: center;
    transform: translateY(-18px);
    border-radius: 6px !important;
    background: #e41827 !important;
    color: #fff !important;
    box-shadow: 0 0 24px rgba(228, 24, 39, 0.55);
  }

  .bottom-slip-toggle b {
    position: absolute;
    top: -11px;
    right: 18px;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #050505;
    color: #fff;
    font-size: 12px;
  }

  .match-detail-modal {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    padding: 0;
    border: 0;
    background: #f1f1f1;
  }

  .match-detail-modal::backdrop {
    background: rgba(0, 0, 0, 0.35);
  }

  .match-detail-modal .modal-card {
    width: 100vw;
    max-width: 100vw;
    min-height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    border: 0;
    background: #f1f1f1;
  }

  .match-detail-card .modal-close {
    display: none;
  }

  .match-detail-hero {
    position: sticky;
    top: 0;
    z-index: 2;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) 74px;
    gap: 0;
    align-items: center;
    padding: 0;
    background: #242424;
    color: #fff;
  }

  .back-chip {
    width: 44px;
    min-height: 42px;
    margin: 6px 4px 6px 8px;
    padding: 0;
    overflow: hidden;
    border-radius: 4px;
    background: #1b1b1b;
    color: #fff;
    font-size: 0;
  }

  .back-chip::before {
    content: "<";
    font-size: 20px;
  }

  #detailMatchTime {
    grid-column: 2;
    justify-self: center;
    color: #dcdcdc;
    font-size: 12px;
    font-weight: 900;
  }

  .match-detail-hero h2 {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 58px 1fr;
    align-items: center;
    min-height: 72px;
    margin: 0;
    padding: 12px 10px;
    border-top: 1px solid #303030;
    background: #2f2f2f;
    color: #fff;
    font-size: 15px;
    text-align: center;
  }

  .match-detail-hero h2 > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
  }

  .match-detail-hero h2 > span:last-child {
    text-align: right;
  }

  .match-detail-hero h2 .team-name-with-visual {
    justify-content: flex-start;
  }

  .match-detail-hero h2 > span:last-child.team-name-with-visual {
    justify-content: flex-end;
  }

  .match-detail-hero h2 .team-visual {
    overflow: visible;
  }

  .match-detail-hero h2 b {
    font-size: 20px;
    color: #fff;
  }

  .match-detail-hero p {
    grid-column: 1 / -1;
    margin: 0;
    padding: 11px 12px;
    background: #202020;
    color: #fff;
    font-size: 13px;
    font-weight: 900;
  }

  .match-detail-hero strong {
    justify-self: end;
    margin-right: 9px;
    padding: 6px 8px;
    border-radius: 4px;
    background: #101010;
    color: #fff;
    font-size: 12px;
  }

  .detail-markets {
    max-height: none;
    gap: 0;
    overflow-y: visible;
    padding: 0 0 92px;
    background: #f1f1f1;
  }

  .detail-market-card {
    gap: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
  }

  .detail-market-card h3 {
    margin: 0;
    padding: 14px 12px;
    background: #202020;
    color: #fff;
    font-size: 18px;
    font-weight: 1000;
  }

  .detail-odds-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    padding: 8px 7px 18px;
    background: #fff;
  }

  .detail-market-total-goals .detail-odds-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .detail-odd {
    min-height: 58px;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    border: 1px solid #b8e8c4;
    border-radius: 6px;
    background: #e3f7e5;
    color: #1f2428;
    padding: 10px 11px;
    font-size: 14px;
    font-weight: 1000;
  }

  .detail-odd strong {
    color: #1f2428;
    font-size: 15px;
  }

  .detail-odd.live-auto-lock,
  .detail-odd.live-auto-lock:hover {
    background: #747a88;
    color: #eef1f6;
    border-color: #747a88;
  }

  .detail-odd.selected,
  .detail-odd:hover {
    background: #e41827;
    color: #fff;
  }

  .detail-odd.selected strong,
  .detail-odd:hover strong {
    color: #fff;
  }

  .mobile-slip-panel:not([hidden]) {
    z-index: 88;
    bottom: 86px;
  }
}

@media (max-width: 760px) {
  .match-detail-modal.score-only .modal-card {
    background: #fff;
  }

  .match-detail-modal.score-only .match-detail-hero {
    grid-template-columns: 52px minmax(0, 1fr);
    min-height: 52px;
    background: #202020;
  }

  .match-detail-modal.score-only #detailMatchTime,
  .match-detail-modal.score-only #detailMatchLeague,
  .match-detail-modal.score-only #detailMatchScore {
    display: none;
  }

  .match-detail-modal.score-only .match-detail-hero h2 {
    grid-column: 2;
    display: flex;
    align-items: center;
    min-height: 52px;
    margin: 0;
    padding: 0 12px 0 0;
    border: 0;
    background: #202020;
    color: #fff;
    font-size: 18px;
    text-align: left;
  }

  .match-detail-modal.score-only .detail-market-correct-score h3 {
    display: none;
  }
}

.match-detail-modal .detail-odd,
.match-detail-modal .detail-odd span {
  color: #1f2428 !important;
}

.match-detail-modal .detail-odd strong {
  color: #e41827 !important;
}

.match-detail-modal .detail-odd.selected,
.match-detail-modal .detail-odd:hover,
.match-detail-modal .detail-odd.selected span,
.match-detail-modal .detail-odd:hover span,
.match-detail-modal .detail-odd.selected strong,
.match-detail-modal .detail-odd:hover strong {
  color: #fff !important;
}

@media (max-width: 760px) {
  .arena-hero::before {
    right: 5%;
    top: 52%;
    font-size: 142px;
    opacity: 0.56;
    -webkit-text-stroke-width: 1.4px;
    text-stroke-width: 1.4px;
  }

  .arena-hero::after {
    background:
      radial-gradient(circle at 76% 52%, rgba(228, 24, 39, 0.3), transparent 31%),
      linear-gradient(90deg, rgba(0, 0, 0, 0.95), rgba(128, 0, 14, 0.78) 58%, rgba(0, 0, 0, 0.18));
  }

  .arena-hero img {
    object-position: 62% center;
  }

  .arena-hero .hero-copy h1 {
    max-width: 240px;
    font-size: 31px;
    line-height: 0.95;
  }

  .arena-hero .hero-copy p:not(.eyebrow) {
    display: block;
    max-width: 205px;
    margin: 8px 0 10px;
    font-size: 11px;
    line-height: 1.15;
  }

  .arena-hero .hero-copy .btn {
    min-height: 28px;
    width: 118px;
    font-size: 12px;
  }

  .mobile-bottom-nav {
    height: 84px;
    grid-template-columns: 1fr 1fr 88px 1fr 1fr;
    align-items: end;
    padding: 8px 7px max(8px, env(safe-area-inset-bottom));
    background: #050505;
  }

  .mobile-bottom-nav a,
  .mobile-bottom-nav button {
    gap: 5px;
    min-height: 58px;
    color: #fff;
    font-size: 11px;
    letter-spacing: 0;
  }

  .mobile-bottom-nav a::before,
  .mobile-bottom-nav button::before {
    content: "";
    width: 25px;
    height: 25px;
    border: 0;
    border-radius: 0;
    background: currentColor;
    -webkit-mask: var(--nav-icon) center / contain no-repeat;
    mask: var(--nav-icon) center / contain no-repeat;
  }

  .mobile-bottom-nav a:nth-child(1) {
    --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9'/%3E%3Cpath d='M13.7 21a2 2 0 0 1-3.4 0'/%3E%3C/svg%3E");
  }

  .mobile-bottom-nav a:nth-child(2) {
    --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h10a2 2 0 0 1 2 2v16l-3-2-3 2-3-2-3 2V5a2 2 0 0 1 2-2z'/%3E%3Cpath d='M9 8h6'/%3E%3Cpath d='M9 12h6'/%3E%3C/svg%3E");
  }

  .bottom-slip-toggle {
    --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h10a2 2 0 0 1 2 2v16l-3-2-3 2-3-2-3 2V5a2 2 0 0 1 2-2z'/%3E%3Cpath d='M9 9h6'/%3E%3Cpath d='M9 13h4'/%3E%3C/svg%3E");
    width: 80px;
    height: 80px;
    transform: translateY(-18px);
    border-radius: 8px !important;
    background: #e41827 !important;
    box-shadow: 0 0 24px rgba(228, 24, 39, 0.55);
  }

  .bottom-slip-toggle.selection-pulse {
    animation: slipPulse 0.62s ease;
  }

  .mobile-bottom-nav a:nth-child(4) {
    --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='6' r='3'/%3E%3Ccircle cx='18' cy='18' r='3'/%3E%3Cpath d='m8.7 10.7 6.6-3.4'/%3E%3Cpath d='m8.7 13.3 6.6 3.4'/%3E%3C/svg%3E");
  }

  .mobile-bottom-nav button:nth-child(5) {
    --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h18v12H3z'/%3E%3Cpath d='M16 11h5v4h-5a2 2 0 0 1 0-4z'/%3E%3Cpath d='M7 7V5a2 2 0 0 1 2-2h8'/%3E%3C/svg%3E");
  }

  @keyframes slipPulse {
    0% { transform: translateY(-18px) scale(1); }
    45% { transform: translateY(-20px) scale(1.08); }
    100% { transform: translateY(-18px) scale(1); }
  }
}

.match-detail-modal[open] {
  overflow: hidden;
}

.match-detail-modal .modal-card {
  display: flex;
  flex-direction: column;
  max-height: min(86dvh, 780px);
  overflow: hidden;
}

.match-detail-modal .match-detail-hero {
  flex: 0 0 auto;
}

.match-detail-modal .detail-markets {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 760px) {
  .match-detail-modal {
    overflow: hidden;
  }

  .match-detail-modal .modal-card,
  .match-detail-modal.score-only .modal-card {
    height: 100dvh;
    min-height: 0;
    max-height: 100dvh;
    overflow: hidden;
  }

  .match-detail-modal .detail-markets {
    max-height: none;
    overflow-y: auto;
    padding-bottom: calc(96px + env(safe-area-inset-bottom));
  }
}

/* Access route shell: keep internal account status separate from customer wallet UI. */
.access-chip {
  display: inline-grid;
  grid-auto-flow: column;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: var(--white);
  font-weight: 900;
}

.access-chip span {
  color: rgba(255, 255, 255, 0.72);
  font-size: 11px;
  text-transform: uppercase;
}

.access-chip strong {
  color: var(--white);
}

body.is-control-page {
  background: #f4f5f7;
}

body.is-control-page .top-shell {
  position: sticky;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.22);
}

body.is-control-page .account-bar {
  min-height: 64px;
  grid-template-columns: minmax(190px, 260px) 1fr auto;
  background: #121212;
  padding: 0 max(18px, 5vw);
}

body.is-control-page .brand {
  font-size: 24px;
}

body.is-control-page .brand-mark {
  width: 34px;
  height: 34px;
  background: var(--brand);
  color: var(--white);
}

body.is-control-page .account-state {
  grid-column: 3;
  justify-self: end;
}

body.is-control-page #logoutBtn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: var(--brand);
  color: var(--white);
}

body.is-control-page #topBalance,
body.is-control-page #openDepositTop,
body.is-control-page #topAccountButton,
body.is-control-page .shell-menu-btn,
body.is-control-page .main-nav,
body.is-control-page .account-drawer,
body.is-control-page .mobile-bottom-nav {
  display: none !important;
}

body.is-control-page .page {
  padding-top: 22px;
  padding-bottom: 44px;
}

body.is-control-page .site-view[data-view="admin"] {
  max-width: 1180px;
  margin: 0 auto;
}

body.is-control-page .site-view[data-view="admin"] .view-title {
  min-height: 96px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  color: var(--ink);
  padding: 20px;
  margin-bottom: 14px;
  box-shadow: 0 1px 2px rgba(18, 23, 34, 0.08);
}

body.is-control-page .site-view[data-view="admin"] .view-title::after {
  display: none;
}

body.is-control-page .site-view[data-view="admin"] .view-title .eyebrow {
  color: var(--brand);
}

body.is-control-page .admin-tool-grid {
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 14px;
}

body.is-control-page .admin-tool-card {
  min-height: 66px;
  border-radius: 6px;
  background: #ffffff;
}

body.is-control-page .admin-tool-card.active {
  border-color: var(--brand);
  background: #fff3f4;
  box-shadow: inset 0 0 0 1px rgba(228, 24, 39, 0.18);
}

body.is-control-page .admin-tool-card.active strong {
  background: var(--brand);
}

body.is-control-page .admin-card {
  border-radius: 8px;
}

body.is-control-page:not(.is-admin-user) .account-bar {
  grid-template-columns: minmax(190px, 260px) minmax(0, 1fr);
}

body.is-control-page:not(.is-admin-user) .login-strip {
  display: grid;
  grid-template-columns: minmax(0, 230px) minmax(0, 190px) auto;
  justify-self: end;
}

body.is-control-page:not(.is-admin-user) .login-strip .phone-wrap,
body.is-control-page:not(.is-admin-user) .login-strip > input,
body.is-control-page:not(.is-admin-user) .login-strip .btn-dark {
  display: grid;
}

body.is-control-page:not(.is-admin-user) .login-strip > input {
  display: block;
}

body.is-control-page:not(.is-admin-user) .login-strip .keep,
body.is-control-page:not(.is-admin-user) .login-strip > a,
body.is-control-page:not(.is-admin-user) .login-strip .btn-outline,
body.is-control-page:not(.is-admin-user) .account-state {
  display: none !important;
}

body.is-control-page:not(.is-admin-user) .control-login-card {
  display: block;
  max-width: 520px;
  margin: 0 auto;
  text-align: center;
}

body.is-control-page:not(.is-admin-user) .control-login-card h2 {
  margin-bottom: 8px;
}

body.is-control-page:not(.is-admin-user) .admin-tool-grid,
body.is-control-page:not(.is-admin-user) .site-view[data-view="admin"] .admin-card:not(.control-login-card),
body.is-control-page.is-admin-user .control-login-card {
  display: none;
}

@media (max-width: 760px) {
  body.is-control-page .account-bar {
    min-height: 58px;
    grid-template-columns: 1fr auto;
    padding: 0 12px;
  }

  body.is-control-page .brand {
    font-size: 20px;
  }

  body.is-control-page .access-chip {
    display: none;
  }

  body.is-control-page .account-state {
    grid-column: 2;
  }

  body.is-control-page .site-view[data-view="admin"] .view-title {
    min-height: auto;
    padding: 14px;
  }
}

/* Sport-style live tracker: clean pitch first, all text/tallies outside the field. */
.live-tracker-grid {
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 14px;
  background: #11161d;
}

.live-tracker-card {
  width: min(860px, 100%);
  margin: 0 auto;
  gap: 0;
  padding: 0;
  border: 1px solid #2b3542;
  border-radius: 4px;
  background: #171d25;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

.live-tracker-card header {
  min-height: 42px;
  padding: 9px 12px;
  border-bottom: 1px solid #28313d;
  background: #202833;
}

.live-tracker-card header span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.live-tracker-card header b {
  background: #111821;
  color: #e9f0f8;
}

.live-tracker-teams {
  min-height: 62px;
  grid-template-columns: minmax(0, 1fr) 92px minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
  border-bottom: 1px solid #28313d;
  background: #111821;
}

.live-tracker-teams strong {
  overflow: hidden;
  color: #eef3f8;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.live-tracker-teams b {
  display: grid;
  place-items: center;
  min-height: 38px;
  border-radius: 3px;
  background: #090d12;
  color: #ffffff;
  font-size: 24px;
}

.live-pitch {
  height: auto;
  aspect-ratio: 16 / 9;
  margin: 12px;
  border: 2px solid rgba(222, 255, 230, 0.58);
  background:
    linear-gradient(90deg, transparent 49.75%, rgba(230, 255, 238, 0.72) 49.85% 50.15%, transparent 50.25%),
    radial-gradient(circle at 50% 50%, transparent 0 42px, rgba(230, 255, 238, 0.6) 43px 44px, transparent 45px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 22%, transparent 78%, rgba(0, 0, 0, 0.12)),
    repeating-linear-gradient(90deg, #178a4e 0 70px, #0f7441 70px 140px);
  box-shadow: inset 0 0 0 1px rgba(230, 255, 238, 0.36), inset 0 0 48px rgba(0, 0, 0, 0.18);
}

.live-pitch::before,
.live-pitch::after {
  top: 25%;
  width: 11%;
  height: 50%;
  border-color: rgba(230, 255, 238, 0.58);
}

.live-pitch-lines {
  inset: 8%;
  border-color: rgba(230, 255, 238, 0.34);
}

.live-pass-line {
  height: 1px;
  background: rgba(255, 255, 255, 0.36);
}

.live-player {
  width: 10px;
  height: 10px;
  border: 2px solid rgba(255, 255, 255, 0.78);
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.34);
}

.live-player.home {
  background: #17202d;
}

.live-player.away {
  background: #e41827;
}

.live-player.keeper {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: #ffd336;
}

.live-player.carrier {
  width: 14px;
  height: 14px;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.22), 0 0 16px rgba(255, 255, 255, 0.42);
}

.live-player.target {
  box-shadow: 0 0 0 4px rgba(255, 211, 54, 0.28);
}

.live-ball {
  width: 13px;
  height: 13px;
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.15), 0 8px 14px rgba(0, 0, 0, 0.34);
}

.pitch-status {
  display: none !important;
}

.live-player-layer,
.live-player {
  display: none !important;
}

.live-tracker-status {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 8px 12px;
  border-top: 1px solid #28313d;
  border-bottom: 1px solid #28313d;
  background: #111821;
  color: #dbe3ed;
  font-weight: 900;
}

.live-tracker-status span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.live-tracker-status span:last-child {
  text-align: right;
}

.live-tracker-status strong {
  min-width: 104px;
  padding: 7px 10px;
  border-radius: 999px;
  background: #28313d;
  color: #ffffff;
  text-align: center;
}

.live-timeline {
  margin: 0;
  border-radius: 0;
  border-bottom: 1px solid #28313d;
  background: #171d25;
}

.live-stat-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid #28313d;
  background: #111821;
}

.live-stat-grid span {
  min-height: 56px;
  border-right: 1px solid #28313d;
  border-bottom: 1px solid #28313d;
  border-radius: 0;
  background: transparent;
}

.live-stat-grid b {
  color: #ffffff;
}

.live-stat-grid small {
  color: #aeb9c7;
}

.live-goal-log {
  margin: 0;
  border-radius: 0;
  border-bottom: 1px solid #28313d;
  background: #111821;
}

@media (max-width: 760px) {
  .site-view[data-view="live"].active .market-panel.live.admin-live-command {
    display: block;
  }

  .live-tracker-grid {
    padding: 8px;
  }

  .live-tracker-card {
    width: 100%;
  }

  .live-tracker-teams {
    grid-template-columns: minmax(0, 1fr) 70px minmax(0, 1fr);
    padding: 10px;
  }

  .live-tracker-teams b {
    font-size: 20px;
  }

  .live-pitch {
    margin: 8px;
    width: calc(100% - 16px);
    max-width: calc(100% - 16px);
    min-height: 0;
    height: clamp(180px, 52vw, 210px);
    aspect-ratio: auto;
    box-sizing: border-box;
  }

  .live-tracker-status {
    grid-template-columns: 1fr;
    gap: 5px;
    text-align: center;
  }

  .live-tracker-status span:last-child {
    text-align: center;
  }

  .live-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Professional typography pass: calmer hierarchy, sharper product feel. */
:root {
  --font-ui: "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
}

html,
body,
button,
input,
select,
textarea {
  font-family: var(--font-ui);
  letter-spacing: 0;
}

body {
  font-weight: 500;
  line-height: 1.36;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.brand,
.hero-copy h1,
.view-title h1,
.panel-head h2,
.register-panel h2,
.sport-detail h2,
.casino-unlock-panel h2,
.match-detail-hero h2 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0;
}

.brand {
  font-weight: 800;
}

.brand-mark,
.flag,
.btn,
.balance-button,
.access-chip,
.drawer-links button,
.account-panel-tabs button,
.admin-tool-card,
.admin-card h2,
.home-match-group strong,
.live-sport-group strong,
.mobile-sports-head h2,
.mobile-sport-icons button,
.mobile-league-chips button,
.mobile-slip-head,
.bet-confirm-title,
.toast {
  font-weight: 700;
}

.login-strip .btn,
.main-nav a,
.tab-row button,
.tools button,
.segmented button,
.mobile-bottom-nav a,
.mobile-bottom-nav button,
.bottom-slip-toggle span,
.account-login-form label,
.wallet-card h2,
.history-card h2,
.payment-card h2,
.profile-card h2,
.betslip-panel h2,
.mini-games h2,
.live-tracker-status,
.live-stat-grid small {
  font-weight: 700;
}

.match-info time,
.match-info small,
.live-match time,
.live-league,
.detail-market h3,
.account-login-card p,
.profile-card span,
.history-list,
.payment-card,
.closed-note,
.modal-note {
  font-weight: 500;
}

.match-info strong,
.live-match strong,
.live-tracker-teams strong,
.drawer-status strong,
.popup-head strong,
.summary-card b,
.profile-summary-grid b {
  font-weight: 700;
}

.odd,
.ef-match-row .odd,
.live-market-list .odd,
.detail-odd,
.detail-odd strong,
.match-score,
.live-tracker-teams b,
.betslip-line strong,
.return-row strong,
.points-badge {
  font-weight: 800;
}

.odds-header,
.live-odds-header,
.home-match-group span,
.live-sport-group span,
.mobile-empty-live,
.mobile-slip-tabs button,
.slip-count,
.casino-card-badge,
.casino-card-cta,
.admin-helper-text,
.eyebrow {
  font-weight: 600;
}

.hero-copy .eyebrow,
.view-title .eyebrow {
  font-weight: 700;
  text-transform: uppercase;
}

.hero-copy p:not(.eyebrow),
.view-title p:not(.eyebrow) {
  font-weight: 500;
}

.main-nav a,
.mobile-bottom-nav a,
.mobile-bottom-nav button {
  line-height: 1.12;
}

.match-info {
  line-height: 1.24;
}

.match-info strong {
  color: #20242a;
}

.match-info small {
  color: #6a717c;
}

.match-row.live-match-row .match-info strong,
.match-row.live-match-row .match-info time {
  color: #f4f7fb;
}

.match-row.live-match-row .match-info small {
  color: #aeb7c4;
}

.btn {
  border-radius: 5px;
}

.odd,
.detail-odd {
  border-radius: 5px;
}

@media (max-width: 760px) {
  body {
    font-size: 14px;
  }

  .brand {
    font-weight: 800;
  }

  .main-nav a {
    font-size: 12px;
    font-weight: 700;
  }

  .login-strip .btn {
    font-size: 12px;
    font-weight: 800;
  }

  .odds-header {
    font-size: 14px;
    font-weight: 700;
  }

  .match-info strong {
    font-size: 13px;
    font-weight: 700;
  }

  .match-row .odd,
  .detail-odd {
    font-weight: 800;
  }

  .mobile-bottom-nav a,
  .mobile-bottom-nav button {
    font-size: 11px;
    font-weight: 700;
  }
}

/* Sporty-style mobile bottom navigation. */
@media (max-width: 760px) {
  body,
  body.is-signed-in {
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }

  .mobile-bottom-nav,
  body.is-signed-in .mobile-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 84;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: stretch;
    height: calc(68px + env(safe-area-inset-bottom));
    min-height: 68px;
    padding: 0 10px env(safe-area-inset-bottom);
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: #030303;
    box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.34);
  }

  .mobile-bottom-nav a,
  .mobile-bottom-nav button {
    position: relative;
    display: grid;
    grid-template-rows: 27px 18px;
    place-items: center;
    align-content: center;
    gap: 4px;
    min-width: 0;
    min-height: 68px;
    padding: 8px 2px 7px;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    color: #8f959e;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: 0;
    text-align: center;
    white-space: nowrap;
  }

  .mobile-bottom-nav a span,
  .mobile-bottom-nav button span {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mobile-bottom-nav .mobile-nav-sports {
    grid-template-rows: 1fr;
  }

  .mobile-bottom-nav .mobile-nav-sports span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .mobile-bottom-nav a::before,
  .mobile-bottom-nav button::before {
    content: "";
    display: block;
    width: 25px;
    height: 25px;
    border: 0;
    border-radius: 0;
    background: currentColor;
    -webkit-mask: var(--bottom-nav-icon) center / contain no-repeat;
    mask: var(--bottom-nav-icon) center / contain no-repeat;
  }

  .mobile-bottom-nav a.active,
  .mobile-bottom-nav button.active {
    color: #ffffff;
  }

  .mobile-bottom-nav a.active::after,
  .mobile-bottom-nav button.active::after {
    content: "";
    position: absolute;
    left: 18%;
    right: 18%;
    bottom: 0;
    height: 4px;
    border-radius: 4px 4px 0 0;
    background: #e41827;
  }

  .mobile-nav-sports::before {
    --bottom-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.15' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.2 19 6v5.4c0 4.4-2.8 7.5-7 9.4-4.2-1.9-7-5-7-9.4V6l7-2.8Z'/%3E%3Cpath d='m8.4 12 3.6-3.1 3.6 3.1'/%3E%3Cpath d='M9.5 11.4v4.4h5v-4.4'/%3E%3C/svg%3E");
  }

  .mobile-nav-menu::before {
    --bottom-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.15' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 6.8h12'/%3E%3Cpath d='M7 12h12'/%3E%3Cpath d='M7 17.2h12'/%3E%3Cpath d='M4.2 6.8h.01'/%3E%3Cpath d='M4.2 12h.01'/%3E%3Cpath d='M4.2 17.2h.01'/%3E%3C/svg%3E");
  }

  .mobile-nav-games::before {
    --bottom-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M6.7 4h10.6A2.7 2.7 0 0 1 20 6.7v10.6a2.7 2.7 0 0 1-2.7 2.7H6.7A2.7 2.7 0 0 1 4 17.3V6.7A2.7 2.7 0 0 1 6.7 4Zm1.8 4.2a1.15 1.15 0 1 0 0 2.3 1.15 1.15 0 0 0 0-2.3Zm7 0a1.15 1.15 0 1 0 0 2.3 1.15 1.15 0 0 0 0-2.3ZM12 10.85a1.15 1.15 0 1 0 0 2.3 1.15 1.15 0 0 0 0-2.3Zm-3.5 4.65a1.15 1.15 0 1 0 0 2.3 1.15 1.15 0 0 0 0-2.3Zm7 0a1.15 1.15 0 1 0 0 2.3 1.15 1.15 0 0 0 0-2.3Z'/%3E%3C/svg%3E");
  }

  .mobile-nav-bets::before {
    --bottom-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.8 6.2h14.4v3.3a2.5 2.5 0 0 0 0 5v3.3H4.8v-3.3a2.5 2.5 0 0 0 0-5V6.2Z'/%3E%3Cpath d='M9 9h6'/%3E%3Cpath d='M9 12h6'/%3E%3Cpath d='M9 15h3.5'/%3E%3C/svg%3E");
  }

  .mobile-nav-me::before {
    --bottom-nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.15' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.3' r='3.2'/%3E%3Cpath d='M5.4 19.5c.7-3.2 3.2-5.1 6.6-5.1s5.9 1.9 6.6 5.1'/%3E%3Cpath d='M4 20h16'/%3E%3C/svg%3E");
  }

  .mobile-nav-games::before {
    width: 27px;
    height: 27px;
    border-radius: 10px;
    background: #8b5cf6;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  }

  .mobile-bottom-nav .mobile-nav-games::before {
    width: 27px;
    height: 27px;
    background: #8b5cf6;
  }

  .mobile-nav-me::after {
    content: "";
    position: absolute;
    top: 10px;
    right: calc(50% - 20px);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #e41827;
  }

  .bottom-slip-toggle,
  body.is-signed-in .bottom-slip-toggle {
    position: fixed;
    right: 22px;
    bottom: calc(72px + env(safe-area-inset-bottom));
    z-index: 90;
    display: grid;
    grid-template-rows: 1fr auto;
    place-items: center;
    width: 68px;
    height: 68px;
    min-height: 68px;
    padding: 9px 0 8px;
    border-radius: 50% !important;
    background: #0aa52b !important;
    color: #ffffff !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.34), 0 0 22px rgba(10, 165, 43, 0.34);
    transform: none;
  }

  .mobile-bottom-nav .bottom-slip-toggle {
    pointer-events: auto;
  }

  .bottom-slip-toggle::before {
    content: "";
    width: 29px;
    height: 29px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.15' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.2 4h11.6a1.8 1.8 0 0 1 1.8 1.8v12.4a1.8 1.8 0 0 1-1.8 1.8H6.2a1.8 1.8 0 0 1-1.8-1.8V5.8A1.8 1.8 0 0 1 6.2 4Z'/%3E%3Cpath d='M8.3 8h7.4'/%3E%3Cpath d='M8.3 12h7.4'/%3E%3Cpath d='m8.4 16 1.4 1.3 2.6-3'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.15' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.2 4h11.6a1.8 1.8 0 0 1 1.8 1.8v12.4a1.8 1.8 0 0 1-1.8 1.8H6.2a1.8 1.8 0 0 1-1.8-1.8V5.8A1.8 1.8 0 0 1 6.2 4Z'/%3E%3Cpath d='M8.3 8h7.4'/%3E%3Cpath d='M8.3 12h7.4'/%3E%3Cpath d='m8.4 16 1.4 1.3 2.6-3'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  .bottom-slip-toggle span {
    display: none;
  }

  .bottom-slip-toggle b {
    position: absolute;
    top: -7px;
    right: -4px;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: #ffffff;
    color: #0b0b0b;
    font-size: 12px;
    font-weight: 800;
  }

  .bottom-slip-toggle.selection-pulse {
    animation: sportySlipPulse 0.62s ease;
  }

  @keyframes sportySlipPulse {
    0% { transform: scale(1); }
    45% { transform: scale(1.08); }
    100% { transform: scale(1); }
  }

  .mobile-slip-panel:not([hidden]) {
    bottom: calc(78px + env(safe-area-inset-bottom));
  }
}

/* Compact mobile odds tiles. */
@media (max-width: 760px) {
  .odds-table {
    padding-inline: 8px;
  }

  .team-name-with-visual {
    gap: 5px;
  }

  .match-info .team-visual,
  .live-match .team-visual {
    flex-basis: 18px;
    width: 18px;
    height: 18px;
  }

  .match-info .team-flag,
  .live-match .team-flag {
    right: -3px;
    bottom: -2px;
    width: 12px;
    height: 8px;
  }

  .match-info .team-visual.flag-only .team-flag,
  .live-match .team-visual.flag-only .team-flag {
    width: 17px;
    height: 12px;
  }

  .match-row {
    gap: 6px;
    margin-bottom: 6px;
    padding: 8px;
  }

  .match-info {
    gap: 4px;
  }

  .match-row .odd {
    min-height: 56px;
    padding: 7px 4px;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1;
  }

  .match-row > .odd:nth-of-type(1),
  .match-row > .odd:nth-of-type(2),
  .match-row > .odd:nth-of-type(3) {
    grid-row: 1;
  }

  .match-row.live-match-row .odd {
    min-height: 48px;
  }

  .match-row .more {
    grid-row: 2;
    min-height: 18px;
    font-size: 11px;
  }
}

@media (max-width: 390px) {
  .match-row .odd {
    min-height: 52px;
  }

  .match-row.live-match-row .odd {
    min-height: 46px;
  }
}

/* Visitor account screen: login only until signed in. */
body:not(.is-signed-in) .site-view[data-view="account"] .view-title,
body:not(.is-signed-in) .site-view[data-view="account"] .account-grid,
body:not(.is-signed-in) .site-view[data-view="account"] .account-popups {
  display: none;
}

/* Public route guard: hidden views must never bleed into the home page. */
.site-view:not(.active) {
  display: none !important;
}

body:not(.is-control-page) .site-view[data-view="admin"] {
  display: none !important;
}

body.is-signed-in .site-view[data-view="account"] .account-login-card {
  display: none;
}

body:not(.is-signed-in) .site-view[data-view="account"].active {
  display: grid;
  min-height: calc(100dvh - 170px);
  align-content: start;
  padding-block: 18px 90px;
}

body:not(.is-signed-in) .site-view[data-view="account"] .account-login-card {
  width: min(440px, calc(100% - 28px));
  margin: 0 auto;
}

/* Polished visitor login panel. */
body:not(.is-signed-in) .site-view[data-view="account"].active {
  min-height: calc(100dvh - 150px);
  align-content: center;
  padding-block: 28px 110px;
  background: #f3f4f6;
}

body:not(.is-signed-in) .site-view[data-view="account"] .account-login-card {
  position: relative;
  overflow: hidden;
  width: min(410px, calc(100% - 28px));
  gap: 14px;
  padding: 24px;
  border: 1px solid #d9dde5;
  border-top: 5px solid #e41827;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 18px 40px rgba(14, 18, 27, 0.16);
}

body:not(.is-signed-in) .site-view[data-view="account"] .account-login-card::before {
  content: "Arena2Bet";
  display: inline-flex;
  width: max-content;
  min-height: 28px;
  align-items: center;
  border-radius: 4px;
  background: #111111;
  color: #ffffff;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 900;
}

body:not(.is-signed-in) .site-view[data-view="account"] .account-login-card h2 {
  color: #111111;
  font-size: 28px;
  font-weight: 900;
  line-height: 1.05;
}

body:not(.is-signed-in) .site-view[data-view="account"] .account-login-card p {
  color: #69717e;
  font-size: 14px;
  font-weight: 700;
}

body:not(.is-signed-in) .site-view[data-view="account"] .account-login-form {
  grid-template-columns: 1fr;
  gap: 12px;
}

body:not(.is-signed-in) .site-view[data-view="account"] .account-login-form label {
  gap: 7px;
}

body:not(.is-signed-in) .site-view[data-view="account"] .account-login-form label span {
  color: #343a46;
  font-size: 12px;
  font-weight: 900;
}

body:not(.is-signed-in) .site-view[data-view="account"] .account-login-form input {
  height: 48px;
  border: 1px solid #cfd5df;
  border-radius: 6px;
  background: #fbfcfd;
  color: #111111;
  font-weight: 700;
}

body:not(.is-signed-in) .site-view[data-view="account"] .account-login-form input:focus {
  border-color: #e41827;
  box-shadow: 0 0 0 3px rgba(228, 24, 39, 0.13);
}

body:not(.is-signed-in) .site-view[data-view="account"] .account-login-form .btn {
  width: 100%;
  height: 48px;
  margin-top: 2px;
  border-radius: 6px;
  background: #111111;
  color: #ffffff;
  font-weight: 900;
}

body:not(.is-signed-in) .site-view[data-view="account"] .account-login-form .btn:hover {
  background: #e41827;
}

/* Polished control login screen. */
body.is-control-page .site-footer,
body.is-control-page .bottom-slip-toggle,
body.is-control-page .mobile-slip-panel,
body.is-control-page .mobile-slip-overlay {
  display: none !important;
}

body.is-control-page:not(.is-admin-user) .login-strip {
  display: none !important;
}

body.is-control-page:not(.is-admin-user) .account-bar {
  grid-template-columns: 1fr;
  min-height: 68px;
}

body.is-control-page:not(.is-admin-user) .brand {
  width: max-content;
}

body.is-control-page:not(.is-admin-user) .page {
  display: grid;
  min-height: calc(100dvh - 68px);
  align-items: center;
  padding: 26px 14px;
}

body.is-control-page:not(.is-admin-user) .site-view[data-view="admin"] {
  width: min(520px, 100%);
}

body.is-control-page:not(.is-admin-user) .site-view[data-view="admin"] .view-title {
  display: grid;
  min-height: auto;
  gap: 8px;
  margin: 0 0 12px;
  padding: 18px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(145deg, #171717 0%, #101010 58%, #e41827 220%);
  color: #ffffff;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24);
}

body.is-control-page:not(.is-admin-user) .site-view[data-view="admin"] .view-title h1 {
  color: #ffffff;
  font-size: clamp(26px, 8vw, 38px);
}

body.is-control-page:not(.is-admin-user) .site-view[data-view="admin"] .view-title .eyebrow,
body.is-control-page:not(.is-admin-user) .site-view[data-view="admin"] #adminMatchCount {
  color: #ffcc00;
}

body.is-control-page:not(.is-admin-user) .site-view[data-view="admin"] #adminMatchCount {
  width: max-content;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.12);
  padding: 5px 9px;
  font-size: 13px;
}

body.is-control-page:not(.is-admin-user) .control-login-card {
  display: grid;
  max-width: none;
  gap: 12px;
  margin: 0;
  padding: 22px;
  border: 1px solid #d9dde5;
  border-top: 5px solid #e41827;
  border-radius: 10px;
  background: #ffffff;
  text-align: left;
  box-shadow: 0 16px 36px rgba(15, 20, 30, 0.16);
}

body.is-control-page:not(.is-admin-user) .control-login-card > span {
  color: #e41827;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

body.is-control-page:not(.is-admin-user) .control-login-card h2 {
  margin: 0;
  color: #111111;
  font-size: 26px;
  font-weight: 900;
}

body.is-control-page:not(.is-admin-user) .control-login-card p {
  margin: 0;
  color: #626b78;
  font-weight: 700;
}

.control-login-form {
  display: grid;
  gap: 12px;
  margin-top: 4px;
}

.control-login-form label {
  display: grid;
  gap: 7px;
  color: #333946;
  font-size: 12px;
  font-weight: 900;
}

.control-login-form input {
  width: 100%;
  height: 48px;
  border: 1px solid #cfd5df;
  border-radius: 6px;
  background: #fbfcfd;
  color: #111111;
  padding: 0 12px;
  font-weight: 800;
  outline: none;
}

.control-login-form input:focus {
  border-color: #e41827;
  box-shadow: 0 0 0 3px rgba(228, 24, 39, 0.13);
}

.control-login-form .btn {
  height: 48px;
  border-radius: 6px;
  background: #111111;
  color: #ffffff;
  font-weight: 900;
}

.control-login-form .btn:hover {
  background: #e41827;
}

@media (max-width: 760px) {
  body.is-control-page:not(.is-admin-user) .top-shell {
    position: sticky;
  }

  body.is-control-page:not(.is-admin-user) .page {
    min-height: calc(100dvh - 58px);
    padding: 18px 10px;
  }

  body.is-control-page:not(.is-admin-user) .control-login-card {
    padding: 18px;
  }
}

/* Professional account center. */
.account-menu-button {
  gap: 6px;
}

.account-menu-button::after {
  content: "v";
  margin-left: 4px;
  font-size: 10px;
  line-height: 1;
}

.account-shell {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.account-sidebar,
.account-content {
  min-width: 0;
}

.account-user-card,
.account-popup-panel {
  border: 1px solid #d9dde5;
  border-radius: 4px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(18, 23, 34, 0.08);
}

.account-user-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 10px;
  padding: 12px;
}

.account-user-card > div:first-of-type {
  display: grid;
  gap: 4px;
  align-content: center;
}

.account-user-card strong {
  display: block;
  overflow: hidden;
  color: #111111;
  font-size: 14px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-user-card span:not(.account-avatar) {
  color: #68707d;
  font-size: 12px;
  font-weight: 700;
}

.account-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #111111;
  color: #ffffff;
  display: grid;
  place-items: center;
  font-size: 20px;
  font-weight: 900;
}

.account-wallet-line {
  grid-column: 1 / -1;
  display: flex;
  min-height: 46px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  border: 1px solid #e1e4eb;
  border-radius: 4px;
  background: #f4f5f7;
}

.account-wallet-line span {
  color: #6a717e;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.account-wallet-line b {
  color: #111111;
  font-size: 18px;
}

.account-withdrawable-row {
  min-height: 58px;
  align-items: start;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  background: #ffffff;
}

.account-withdrawable-row b {
  font-size: 14px;
}

.account-side-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.account-side-actions .btn {
  width: 100%;
  height: 42px;
}

.account-side-menu {
  display: grid;
  margin-top: 10px;
  overflow: hidden;
  border: 1px solid #d9dde5;
  border-radius: 4px;
  background: #ffffff;
}

.account-side-menu button,
.drawer-links button {
  min-height: 42px;
  padding: 0 12px;
  border: 0;
  border-bottom: 1px solid #e5e7ec;
  background: #ffffff;
  color: #222733;
  text-align: left;
  font-size: 13px;
  font-weight: 800;
}

.account-side-menu button:last-child,
.drawer-links button:last-child {
  border-bottom: 0;
}

.account-side-menu button::after,
.drawer-links button::after {
  content: ">";
  float: right;
  color: inherit;
  opacity: 0.55;
}

.account-side-menu button.active {
  background: #0a9d3f;
  color: #ffffff;
}

.account-content.account-popups {
  display: grid;
  gap: 12px;
  margin-top: 0;
}

.account-popup-panel {
  display: none;
  overflow: hidden;
  padding: 0;
  gap: 0;
  box-shadow: none;
}

.account-popup-panel.active {
  display: grid;
}

.popup-head {
  display: flex;
  min-height: 62px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid #e1e4eb;
  background: #ffffff;
}

.popup-head span {
  color: #202632;
  font-size: 22px;
  font-weight: 800;
}

.popup-head strong {
  color: #6a717e;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.account-form-grid {
  display: grid;
  gap: 16px;
  max-width: 760px;
  padding: 24px 28px 18px;
}

.account-form-grid label {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  color: #3f4652;
  font-weight: 700;
}

.account-form-grid label span {
  color: #3f4652;
}

.account-form-grid input {
  width: 100%;
  height: 40px;
  border: 1px solid #bfc5cf;
  border-radius: 0;
  background: #eef0f4;
  color: #68707d;
  padding: 0 14px;
  font-weight: 800;
}

.account-panel-actions {
  display: flex;
  gap: 12px;
  padding: 0 28px 24px;
}

.account-panel-actions .btn {
  min-width: 150px;
}

.account-action-card,
.account-wide-action,
.account-popup-panel > .history-list,
.account-popup-panel > .empty-panel,
.account-popup-panel > .summary-card,
.account-popup-panel > .referral-box,
.account-popup-panel > .split-tabs,
.account-popup-panel > .profile-summary-grid {
  margin: 18px 20px;
}

.account-wide-action {
  width: min(320px, calc(100% - 40px));
  justify-self: start;
}

.account-popup-panel > #securityLogoutBtn,
.account-popup-panel > #copyReferralBtn {
  margin: 0 20px 20px;
  justify-self: start;
}

.account-recent-list {
  max-height: 220px;
  overflow: auto;
}

.account-popup-panel .split-tabs {
  grid-auto-columns: minmax(150px, max-content);
  justify-content: start;
}

.profile-summary-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.summary-card,
.empty-panel,
.profile-summary-grid span,
.referral-box {
  border: 1px solid #e1e4eb;
  border-radius: 4px;
  background: #f7f8fa;
}

.account-drawer {
  left: auto;
  right: 12px;
  top: calc(100% + 6px);
  width: min(300px, calc(100vw - 24px));
  padding: 0;
  background: transparent;
}

.drawer-panel {
  width: 100%;
  border: 1px solid #d9dde5;
  border-radius: 4px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24);
}

.drawer-status,
.drawer-balance {
  padding: 12px;
}

.drawer-actions {
  gap: 8px;
  padding: 10px;
}

.drawer-actions .btn {
  height: 40px;
}

.drawer-links button {
  min-height: 38px;
  font-size: 13px;
}

body:not(.is-signed-in) .site-view[data-view="account"] .account-shell {
  display: none;
}

@media (max-width: 760px) {
  .account-shell {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .account-side-menu {
    grid-template-columns: 1fr 1fr;
  }

  .account-side-menu button {
    min-height: 44px;
    font-size: 12px;
  }

  .popup-head {
    align-items: start;
    flex-direction: column;
    min-height: 0;
    padding: 14px 16px;
  }

  .popup-head span {
    font-size: 20px;
  }

  .account-form-grid {
    gap: 12px;
    padding: 16px;
  }

  .account-form-grid label {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .account-panel-actions {
    display: grid;
    padding: 0 16px 16px;
  }

  .account-action-card,
  .account-wide-action,
  .account-popup-panel > .history-list,
  .account-popup-panel > .empty-panel,
  .account-popup-panel > .summary-card,
  .account-popup-panel > .referral-box,
  .account-popup-panel > .split-tabs,
  .account-popup-panel > .profile-summary-grid {
    margin: 14px 16px;
  }

  .profile-summary-grid {
    grid-template-columns: 1fr;
  }

  .account-drawer {
    right: 8px;
    width: min(320px, calc(100vw - 16px));
  }
}

/* Account screens with real panel content. */
.account-inline-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px;
  gap: 10px;
  align-items: center;
}

.account-inline-control .btn {
  height: 40px;
  border: 1px solid #0a9d3f;
  background: #ffffff;
  color: #0a9d3f;
}

.account-radio-row,
.account-tab-strip,
.account-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.account-radio-row button,
.account-tab-strip button,
.account-filter-row button {
  min-height: 38px;
  border: 1px solid #cfd5df;
  border-radius: 3px;
  background: #ffffff;
  color: #303846;
  padding: 0 14px;
  font-weight: 800;
}

.account-radio-row button.active,
.account-tab-strip button.active,
.account-filter-row button.active {
  border-color: #0a9d3f;
  background: #0a9d3f;
  color: #ffffff;
}

.account-overview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 20px;
}

.account-progress-card,
.account-payment-card,
.account-note-list,
.account-filter-row,
.account-table-head,
.account-message-list,
.account-gift-info,
.security-form,
.account-tab-strip {
  margin: 18px 20px;
}

.account-progress-card {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid #e1e4eb;
  border-radius: 4px;
  background: #f7f8fa;
  color: #3b4350;
  font-weight: 800;
}

.account-progress-card b {
  display: block;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #dfe4ec;
}

.account-progress-card b::before {
  content: "";
  display: block;
  width: var(--progress, 0%);
  height: 100%;
  background: #0a9d3f;
}

.account-payment-card {
  display: grid;
  max-width: 620px;
  gap: 12px;
  padding: 16px;
  border: 1px solid #d9dde5;
  border-radius: 4px;
  background: #ffffff;
}

.account-payment-card h3,
.account-gift-info h3 {
  margin: 0;
  color: #202632;
  font-size: 16px;
}

.account-payment-card label,
.security-form label {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  color: #3f4652;
  font-weight: 800;
}

.account-payment-card input,
.security-form input {
  width: 100%;
  height: 40px;
  border: 1px solid #c6ccd6;
  background: #f8fafc;
  color: #202632;
  padding: 0 12px;
  font-weight: 800;
}

.account-payment-card .btn,
.security-form .btn {
  width: min(260px, 100%);
  height: 42px;
}

.account-deposit-page {
  display: grid;
  gap: 14px;
  max-width: 560px;
  margin: 16px 0 24px;
  padding: 18px;
  background: #ffffff;
  border: 1px solid #e0e4ea;
  border-radius: 8px;
}

.account-deposit-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  margin: 0 0 12px;
  border-bottom: 1px solid #e0e4ea;
}

.account-deposit-tabs button {
  min-height: 54px;
  border: 0;
  border-bottom: 4px solid transparent;
  border-radius: 0;
  background: #ffffff;
  color: #1f2733;
  font-size: 15px;
  font-weight: 800;
}

.account-deposit-tabs button.active {
  border-color: #0a9d3f;
  background: #ffffff;
  color: #111111;
}

.account-deposit-tabs span {
  display: inline-flex;
  min-height: 18px;
  margin-left: 5px;
  align-items: center;
  border-radius: 2px;
  background: #1ed760;
  color: #111111;
  padding: 0 5px;
  font-size: 10px;
  font-weight: 900;
}

.account-deposit-panel {
  display: none;
}

.account-deposit-panel.active {
  display: block;
}

.account-deposit-form,
.account-card-payment {
  display: grid;
  gap: 16px;
  max-width: 100%;
}

.account-deposit-row {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin: 0;
  color: #202632;
  font-weight: 700;
}

.account-deposit-row > span {
  color: #2f3744;
}

.account-deposit-row input {
  width: 100%;
  height: 40px;
  border: 1px solid #bfc5cf;
  background: #ffffff;
  color: #202632;
  padding: 0 12px;
  font-weight: 800;
}

.account-deposit-number-row {
  grid-template-columns: 104px minmax(0, 1fr);
  align-items: start;
}

.deposit-amount-box {
  display: grid;
  gap: 10px;
}

.deposit-quick-amounts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.deposit-quick-amounts button {
  min-height: 38px;
  border: 1px solid #d3d9e3;
  border-radius: 8px;
  background: #f8fafc;
  color: #172033;
  font-weight: 900;
}

.deposit-quick-amounts button.active,
.deposit-quick-amounts button:hover {
  border-color: #0a9d3f;
  background: #eaf8ef;
  color: #087332;
}

.account-deposit-select {
  min-width: 0;
}

.account-deposit-tip {
  position: relative;
  display: grid;
  gap: 3px;
  min-height: 78px;
  background: #2f80ed;
  color: #ffffff;
  padding: 12px 32px 12px 12px;
  font-size: 12px;
  line-height: 1.25;
  font-weight: 800;
}

.account-deposit-tip::before {
  content: "";
  position: absolute;
  top: 0;
  left: 24px;
  width: 0;
  height: 0;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #2f80ed;
  border-left: 10px solid transparent;
  transform: translateY(-10px);
}

.account-deposit-tip button {
  position: absolute;
  top: 8px;
  right: 8px;
  border: 0;
  background: transparent;
  color: #ffffff;
  font-size: 18px;
  font-weight: 900;
}

.account-deposit-tip small {
  color: #ffffff;
  font-weight: 700;
}

.account-deposit-submit {
  width: 100%;
  height: 42px;
  margin-left: 0;
  border: 0;
  border-radius: 2px;
  background: #0a9d3f;
  color: #ffffff;
  font-weight: 900;
}

.account-deposit-submit:disabled {
  background: #d7dbe3;
  color: #ffffff;
  cursor: not-allowed;
}

.account-paybill-list {
  display: grid;
  max-width: 700px;
  border-top: 1px solid #e2e6ec;
}

.account-paybill-list button {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 24px;
  gap: 14px;
  min-height: 56px;
  align-items: center;
  border: 0;
  border-bottom: 1px solid #e2e6ec;
  background: #ffffff;
  color: #202632;
  text-align: left;
  font-size: 15px;
  font-weight: 800;
}

.account-paybill-list i {
  color: #9aa2ae;
  font-style: normal;
  font-size: 20px;
  text-align: right;
}

.paybill-logo {
  display: inline-flex;
  width: 28px;
  height: 22px;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 900;
}

.paybill-logo.mtn {
  background: #ffd20a;
  color: #111111;
}

.paybill-logo.telecel {
  background: #e30613;
  color: #ffffff;
}

.paybill-logo.at {
  background: #ffffff;
  color: #d81f2a;
  border: 1px solid #d81f2a;
}

.card-brand-row {
  display: flex;
  gap: 8px;
}

.card-brand-row span {
  display: inline-flex;
  min-width: 38px;
  min-height: 24px;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  background: #0757a8;
  color: #ffffff;
  padding: 0 8px;
  font-size: 10px;
  font-weight: 900;
}

.card-brand-row span:first-child {
  background: #111827;
}

.saved-card-row {
  display: grid;
  grid-template-columns: 24px 44px 1fr 100px 80px;
  gap: 12px;
  min-height: 46px;
  align-items: center;
  background: #eef0f3;
  padding: 0 10px;
  color: #202632;
  font-weight: 800;
}

.selected-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #0a9d3f;
}

.card-chip {
  width: 32px;
  height: 22px;
  border-radius: 2px;
  background: linear-gradient(180deg, #f8fafc, #c9ced8);
}

.saved-card-row em {
  color: #344154;
  font-style: normal;
}

.saved-card-row input {
  width: 80px;
  height: 38px;
  border: 1px solid #bfc5cf;
  background: #ffffff;
  padding: 0 10px;
  font-weight: 800;
}

.card-radio-row,
.save-card-row {
  display: flex;
  gap: 10px;
  align-items: center;
  color: #202632;
  font-weight: 800;
}

.save-card-row input {
  width: 18px;
  height: 18px;
  accent-color: #0a9d3f;
}

.account-deposit-notes {
  margin: 38px 0 0;
  padding: 24px 0 0 18px;
  border-top: 1px solid #e0e4ea;
  color: #8b94a3;
  font-weight: 700;
}

.account-withdraw-page {
  display: grid;
  gap: 0;
  max-width: 760px;
  margin: 20px auto 28px;
  padding: 0 64px 48px;
  background: #ffffff;
}

.account-withdraw-balance {
  display: grid;
  gap: 4px;
  max-width: 220px;
  margin-bottom: 10px;
  color: #5c6573;
  font-weight: 800;
}

.account-withdraw-balance span {
  font-size: 12px;
}

.account-withdraw-balance b {
  color: #111111;
  font-size: 16px;
}

.account-withdraw-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 0 0 28px;
  border-bottom: 1px solid #e0e4ea;
}

.account-withdraw-tabs button {
  min-height: 54px;
  border: 0;
  border-bottom: 4px solid transparent;
  border-radius: 0;
  background: #ffffff;
  color: #1f2733;
  font-size: 15px;
  font-weight: 800;
}

.account-withdraw-tabs button.active {
  border-color: #0a9d3f;
  background: #ffffff;
  color: #111111;
}

.account-withdraw-form {
  display: grid;
  gap: 28px;
  max-width: 420px;
}

.account-withdraw-row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  margin: 0;
  color: #202632;
  font-weight: 700;
}

.account-withdraw-row > span {
  color: #2f3744;
  font-weight: 700;
}

.account-withdraw-row strong {
  color: #202632;
  font-size: 16px;
  font-weight: 900;
}

.account-provider-select {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px;
  height: 40px;
  border: 1px solid #bfc5cf;
  background: #ffffff;
}

.account-provider-select input,
.account-withdraw-row input {
  width: 100%;
  height: 40px;
  border: 1px solid #bfc5cf;
  background: #f8fafc;
  color: #202632;
  padding: 0 12px;
  font-weight: 800;
}

.account-provider-select input {
  border: 0;
  background: #ffffff;
}

.account-provider-select button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  border-left: 1px solid #d6dbe4;
  background: #ffffff;
  color: #0a5ca8;
  font-weight: 800;
}

.account-provider-select b {
  color: #0a9d3f;
}

.account-withdraw-submit {
  width: 170px;
  height: 42px;
  margin-left: 124px;
  border: 0;
  border-radius: 2px;
  background: #0a9d3f;
  color: #ffffff;
  font-weight: 900;
}

.account-withdraw-submit:disabled {
  background: #d7dbe3;
  color: #ffffff;
  cursor: not-allowed;
}

.account-withdraw-notes {
  margin: 38px 0 0;
  padding: 24px 0 0 18px;
  border-top: 1px solid #e0e4ea;
  color: #8b94a3;
  font-weight: 700;
}

.account-note-list {
  display: grid;
  gap: 8px;
  padding-left: 38px;
  color: #5d6572;
  font-weight: 700;
}

.account-table-head {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1.5fr 1fr 1fr;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid #d9dde5;
  border-radius: 4px;
  background: #f1f3f6;
  color: #596170;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.transaction-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 18px 20px 10px;
  color: #8a93a1;
  font-weight: 700;
}

.transaction-status-bar div {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #202632;
}

.transaction-status-bar button {
  min-height: 28px;
  border: 0;
  border-radius: 3px;
  background: #0a9d3f;
  color: #ffffff;
  padding: 0 14px;
  font-weight: 900;
}

.withdrawal-tax-notice {
  display: grid;
  gap: 8px;
  margin: 12px 20px;
  border: 1px solid #f0c24b;
  border-radius: 6px;
  background: #fff7df;
  color: #2b2100;
  padding: 12px;
}

.withdrawal-tax-notice strong {
  font-size: 16px;
  font-weight: 900;
}

.withdrawal-tax-notice span {
  color: #6f5200;
  font-weight: 800;
}

.withdrawal-tax-notice div {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tax-info-card p {
  color: #4c5565;
  font-weight: 700;
  line-height: 1.5;
}

.transaction-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px 160px;
  gap: 8px;
  margin: 12px 20px 0;
  align-items: end;
}

.transaction-categories {
  margin: 0;
  gap: 0;
  overflow-x: auto;
  border-bottom: 1px solid #dfe4eb;
}

.transaction-categories button {
  min-width: 112px;
  min-height: 42px;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  background: #ffffff;
  color: #202632;
  padding: 0 12px;
  font-weight: 800;
}

.transaction-categories button.active {
  border-color: #0a9d3f;
  background: #ffffff;
  color: #202632;
}

.transaction-date-range {
  height: 42px;
  border: 1px solid #d9dde5;
  background: #f8fafc;
  color: #202632;
  font-weight: 900;
}

.transaction-search {
  position: relative;
  display: grid;
  margin: 0;
}

.transaction-search input {
  width: 100%;
  height: 42px;
  border: 1px solid #d9dde5;
  background: #f8fafc;
  color: #202632;
  padding: 0 46px 0 12px;
  font-weight: 800;
}

.transaction-search span {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #87909f;
  font-size: 11px;
  font-weight: 900;
}

.transaction-count-line {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 20px 0;
  color: #6a7280;
  font-weight: 800;
}

.transaction-count-line b {
  color: #111111;
}

.transaction-table-head {
  grid-template-columns: 1.05fr 1.3fr 1.65fr 0.85fr 0.9fr 1fr 0.7fr;
  margin: 10px 20px 0;
  border-radius: 0;
  border-color: #171c25;
  background: #171c25;
  color: #ffffff;
}

.transaction-table-body {
  display: grid;
  margin: 0 20px 18px;
  border-left: 1px solid #e2e6ed;
  border-right: 1px solid #e2e6ed;
}

.transaction-table-body p {
  margin: 0;
  padding: 22px;
  border-bottom: 1px solid #e2e6ed;
  color: #7a8391;
  font-weight: 800;
  text-align: center;
}

.transaction-row {
  display: grid;
  grid-template-columns: 1.05fr 1.3fr 1.65fr 0.85fr 0.9fr 1fr 0.7fr;
  min-height: 50px;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid #e2e6ed;
  background: #ffffff;
  color: #202632;
  font-size: 13px;
  font-weight: 700;
}

.transaction-row time {
  display: grid;
  color: #202632;
  line-height: 1.25;
}

.transaction-row .txn-amount.credit {
  color: #0a9d3f;
}

.transaction-row .txn-amount.debit {
  color: #202632;
}

.transaction-row .txn-status {
  color: #202632;
}

.transaction-row .txn-details {
  border: 0;
  background: transparent;
  color: #164aa5;
  font-weight: 800;
  text-align: left;
}

.transaction-note-list {
  margin-top: 0;
  color: #8b94a3;
}

.account-message-list {
  display: grid;
  gap: 10px;
}

.account-message-list article {
  display: grid;
  gap: 4px;
  padding: 14px;
  border: 1px solid #d9dde5;
  border-radius: 4px;
  background: #ffffff;
  color: #5f6875;
  font-weight: 700;
}

.account-message-list b {
  color: #202632;
  font-size: 15px;
}

.account-message-list time {
  color: #8a93a1;
  font-size: 12px;
  font-weight: 800;
}

.account-gift-info,
.security-form {
  display: grid;
  max-width: 720px;
  gap: 10px;
  padding: 16px;
  border: 1px solid #d9dde5;
  border-radius: 4px;
  background: #ffffff;
  color: #5f6875;
  font-weight: 700;
}

.security-form p {
  margin: 0;
  color: #697280;
}

@media (max-width: 760px) {
  .account-inline-control,
  .account-payment-card label,
  .security-form label,
  .account-withdraw-row,
  .account-deposit-row,
  .account-deposit-number-row {
    grid-template-columns: 1fr;
  }

  .account-overview-grid {
    grid-template-columns: 1fr;
    margin: 14px 16px;
  }

  .account-progress-card,
  .account-payment-card,
  .account-note-list,
  .account-filter-row,
  .account-table-head,
  .account-message-list,
  .account-gift-info,
  .security-form,
  .account-tab-strip {
    margin: 14px 16px;
  }

  .account-table-head {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .transaction-status-bar,
  .transaction-status-bar div {
    align-items: start;
    flex-direction: column;
  }

  .transaction-toolbar {
    grid-template-columns: 1fr;
    margin: 12px 16px 0;
  }

  .transaction-categories {
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  .transaction-table-head {
    display: none;
  }

  .transaction-table-body {
    margin: 12px 16px 18px;
    border-top: 1px solid #e2e6ed;
  }

  .transaction-row {
    grid-template-columns: 1fr 1fr;
    gap: 6px 10px;
  }

  .transaction-row span,
  .transaction-row time,
  .transaction-row button {
    min-width: 0;
  }

  .account-withdraw-page {
    max-width: none;
    margin: 14px 16px;
    padding: 0 0 22px;
  }

  .account-deposit-page {
    max-width: none;
    margin: 14px 16px;
    padding: 0 0 22px;
  }

  .account-deposit-tabs {
    margin-bottom: 20px;
  }

  .account-deposit-tabs button {
    min-height: 48px;
    font-size: 13px;
  }

  .account-deposit-form,
  .account-card-payment {
    max-width: none;
    gap: 18px;
  }

  .account-deposit-tip {
    min-height: auto;
  }

  .account-deposit-submit {
    width: 100%;
    margin-left: 0;
  }

  .saved-card-row {
    grid-template-columns: 20px 34px 1fr;
    gap: 8px;
    padding: 10px;
  }

  .saved-card-row em,
  .saved-card-row input {
    grid-column: span 1;
  }

  .account-paybill-list button {
    min-height: 52px;
  }

  .account-withdraw-form {
    max-width: none;
    gap: 18px;
  }

  .account-withdraw-submit {
    width: 100%;
    margin-left: 0;
  }
}

/* Final signed-in mobile header alignment. */
@media (max-width: 760px) {
  body.is-signed-in .account-bar {
    min-height: auto;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 7px 9px;
    align-items: center;
    padding: 8px 10px 10px;
    background: #050505;
  }

  body.is-signed-in .shell-menu-btn {
    width: 34px;
    height: 34px;
  }

  body.is-signed-in .brand {
    width: 100%;
    min-width: 0;
    gap: 7px;
    font-size: 16px;
    line-height: 1;
  }

  body.is-signed-in .brand-mark {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: 6px;
  }

  body.is-signed-in .account-state {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 96px 90px;
    gap: 8px;
    width: 100%;
    align-items: center;
    background: #050505;
  }

  body.is-signed-in .account-state .balance {
    grid-column: auto;
    min-width: 0;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    border: 1px solid #2a2a2a;
    border-radius: 5px;
    background: #151515;
    color: #ffffff;
    padding: 0 9px;
    font-size: 12px;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.is-signed-in #topAccountButton,
  body.is-signed-in #openDepositTop {
    width: 100%;
    height: 36px;
    min-width: 0;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    padding: 0 8px;
    font-size: 12px;
    font-weight: 800;
  }

  body.is-signed-in #topAccountButton {
    border: 1px solid #343434;
    background: #171717;
    color: #ffffff;
  }

  body.is-signed-in #openDepositTop {
    background: #ffc400;
    color: #111111;
  }
}

@media (max-width: 390px) {
  body.is-signed-in .account-state {
    grid-template-columns: 1fr 1fr;
  }

  body.is-signed-in .account-state .balance {
    grid-column: 1 / -1;
  }
}

/* Sporty-style betting colors: red brand, green odds, dark live market. */
.odd,
.ef-match-row .odd,
.live-market-list .odd {
  background: var(--sporty-green);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

.odd:hover,
.odd.selected,
.ef-match-row .odd:hover,
.ef-match-row .odd.selected,
.live-market-list .odd:hover,
.live-market-list .odd.selected {
  background: var(--sporty-green-dark);
  border-color: #22c55e;
  color: #ffffff;
  outline: 2px solid rgba(255, 196, 0, 0.95);
  outline-offset: 1px;
  box-shadow: 0 0 0 3px rgba(13, 151, 55, 0.18);
}

.live,
.live-table,
.market-panel.live,
.admin-live-command,
.site-view[data-view="live"] .market-panel {
  background: var(--sporty-live-bg);
  color: #ffffff;
}

.live-odds-header {
  background: #252932;
  color: #c6cfda;
  border-bottom: 2px solid var(--sporty-green);
}

.live-odds-header span:nth-child(n + 3) {
  color: #dce4ef;
}

.live-row {
  background: var(--sporty-live-bg);
  border-top-color: #2d333d;
}

.live-row .odd,
.match-row.live-match-row .odd {
  background: var(--sporty-live-card);
  border-color: #343b47;
  color: #22c55e;
}

.live-row .odd:hover,
.live-row .odd.selected,
.match-row.live-match-row .odd:hover,
.match-row.live-match-row .odd.selected {
  background: var(--sporty-green);
  border-color: #22c55e;
  color: #ffffff;
  outline: 2px solid rgba(255, 196, 0, 0.95);
  outline-offset: 1px;
}

.live-match strong {
  color: #ff3042;
}

.live-match time,
.match-row.live-match-row .match-info time {
  color: #22c55e;
}

.match-row.live-match-row {
  background: var(--sporty-live-bg);
  border-color: #2d333d;
}

.match-row.live-match-row .match-info strong {
  color: #ffffff;
}

.detail-odd {
  background: var(--sporty-green-soft);
  border-color: #b8e8c4;
  color: #20242a;
}

.match-detail-modal .detail-odd strong {
  color: var(--sporty-green-dark) !important;
}

.detail-odd:hover,
.detail-odd.selected,
.match-detail-modal .detail-odd:hover,
.match-detail-modal .detail-odd.selected {
  background: var(--sporty-green) !important;
  border-color: #22c55e !important;
  color: #ffffff !important;
  outline: 2px solid rgba(255, 196, 0, 0.95);
  outline-offset: 1px;
}

.detail-odd:hover span,
.detail-odd.selected span,
.detail-odd:hover strong,
.detail-odd.selected strong,
.match-detail-modal .detail-odd:hover span,
.match-detail-modal .detail-odd.selected span,
.match-detail-modal .detail-odd:hover strong,
.match-detail-modal .detail-odd.selected strong {
  color: #ffffff !important;
}

@media (max-width: 760px) {
  .match-row .odd {
    background: var(--sporty-green-soft);
    border-color: #b8e8c4;
    color: var(--sporty-green-dark);
  }

  .match-row .odd:hover,
  .match-row .odd.selected {
    background: var(--sporty-green);
    border-color: #22c55e;
    color: #ffffff;
    outline: 2px solid rgba(255, 196, 0, 0.95);
    outline-offset: 1px;
  }

  .match-row.live-match-row .odd {
    background: var(--sporty-live-card);
    border-color: #343b47;
    color: #22c55e;
  }

  .match-row.live-match-row .odd:hover,
  .match-row.live-match-row .odd.selected {
    background: var(--sporty-green);
    color: #ffffff;
  }
}

/* Final odds strip: Sporty-style table header, kept inside the list flow. */
.odds-header,
.odds-header.is-fixed {
  box-sizing: border-box;
  isolation: isolate;
  overflow: hidden;
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: auto !important;
  background: #ffffff !important;
  color: #171a22;
  border-top: 1px solid #e7e9ee;
  border-bottom: 1px solid #d4d8df;
  box-shadow: 0 1px 0 rgba(17, 24, 39, 0.04);
  opacity: 1;
  z-index: 1;
  transform: none;
}

.odds-header::before,
.odds-header.is-fixed::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #ffffff;
}

.odds-header span {
  position: relative;
  z-index: 1;
}

.odds-header span:first-child {
  color: #e41827;
}

.odds-header span:not(:first-child) {
  color: #111827;
}

.odds-header-placeholder.active {
  display: none !important;
  margin-bottom: 0;
  min-height: 0;
}

@media (max-width: 760px) {
  .odds-header,
  .odds-header.is-fixed {
    min-height: 42px;
    padding-block: 9px;
    margin-bottom: 10px;
    background: #ffffff !important;
    box-shadow: 0 1px 0 #d4d8df;
    z-index: 1;
    max-width: 100vw;
  }

  .odds-header-placeholder.active {
    display: none !important;
    margin-bottom: 0;
    min-height: 0;
  }
}

body.open-bets-mode .bet-history-panel,
body.open-bets-mode .account-popup-panel.bet-history-panel {
  background:
    radial-gradient(circle at 50% -70px, rgba(228, 24, 39, 0.14), transparent 240px),
    #151922 !important;
  color: #f6f7fb;
}

body.open-bets-mode .account-popup-panel.bet-history-panel {
  box-shadow: none;
}

body.open-bets-mode .bet-history-tabs button,
body.open-bets-mode .split-tabs.bet-history-tabs button {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #303642 !important;
  color: #ffffff !important;
}

body.open-bets-mode .bet-history-tabs button.active,
body.open-bets-mode .split-tabs.bet-history-tabs button.active {
  background: #202532 !important;
  color: #ffffff !important;
  box-shadow: inset 0 -3px 0 #e41827;
}

.balance-button,
.drawer-balance,
.account-wallet-line,
.account-withdraw-balance,
.casino-wallet-strip span,
.bet-history-topbar strong,
.account-profile-form label:has(#accountPanelBalance),
.account-profile-form label:has(#bonusWalletBalance) {
  position: relative;
}

.balance-button::before,
.drawer-balance::before,
.account-wallet-line::before,
.account-withdraw-balance::before,
.casino-wallet-strip span::before,
.bet-history-topbar strong::before,
.account-profile-form label:has(#accountPanelBalance)::before,
.account-profile-form label:has(#bonusWalletBalance)::before {
  content: "";
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  border-radius: 7px;
  background:
    linear-gradient(#ffffff, #ffffff) 16px 9px / 5px 2px no-repeat,
    linear-gradient(135deg, #e41827 0%, #b40f1d 100%);
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.82),
    0 6px 14px rgba(228, 24, 39, 0.22);
}

.balance-button::after,
.drawer-balance::after,
.account-wallet-line::after,
.account-withdraw-balance::after,
.casino-wallet-strip span::after,
.bet-history-topbar strong::after,
.account-profile-form label:has(#accountPanelBalance)::after,
.account-profile-form label:has(#bonusWalletBalance)::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 0 2px rgba(17, 24, 39, 0.16);
  pointer-events: none;
}

.balance-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.balance-button::after {
  left: 21px;
  top: 50%;
  transform: translateY(-50%);
}

.drawer-balance,
.account-wallet-line,
.account-withdraw-balance,
.casino-wallet-strip span {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  column-gap: 10px;
}

.drawer-balance::before,
.account-wallet-line::before,
.account-withdraw-balance::before,
.casino-wallet-strip span::before {
  grid-row: 1 / span 2;
  align-self: center;
}

.drawer-balance::after,
.account-wallet-line::after,
.account-withdraw-balance::after,
.casino-wallet-strip span::after {
  left: 19px;
  top: 50%;
  transform: translateY(-50%);
}

.drawer-balance span,
.drawer-balance strong,
.account-wallet-line span,
.account-wallet-line b,
.account-withdraw-balance span,
.account-withdraw-balance b,
.casino-wallet-strip span > b,
.casino-wallet-strip span > strong {
  grid-column: 2;
}

.bet-history-topbar strong::before {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background:
    linear-gradient(#ffffff, #ffffff) 16px 9px / 5px 2px no-repeat,
    linear-gradient(135deg, #e41827 0%, #b40f1d 100%);
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.82),
    0 6px 14px rgba(228, 24, 39, 0.22);
}

.bet-history-topbar strong::after {
  left: 25px;
  top: 50%;
  transform: translateY(-50%);
}

.account-profile-form label:has(#accountPanelBalance),
.account-profile-form label:has(#bonusWalletBalance) {
  padding-left: 36px;
}

.account-profile-form label:has(#accountPanelBalance)::before,
.account-profile-form label:has(#bonusWalletBalance)::before {
  position: absolute;
  left: 0;
  top: 27px;
}

.account-profile-form label:has(#accountPanelBalance)::after,
.account-profile-form label:has(#bonusWalletBalance)::after {
  left: 19px;
  top: 39px;
}

.balance-button::before,
.drawer-balance::before,
.account-wallet-line::before,
.account-withdraw-balance::before,
.casino-wallet-strip span::before,
.bet-history-topbar strong::before,
.account-profile-form label:has(#accountPanelBalance)::before,
.account-profile-form label:has(#bonusWalletBalance)::before {
  content: "\f555";
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  border-radius: 8px;
  background: linear-gradient(145deg, #e41827, #9f111d);
  color: #ffffff;
  font-family: "Font Awesome 6 Free";
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 8px 18px rgba(228, 24, 39, 0.28);
}

.balance-button::after,
.drawer-balance::after,
.account-wallet-line::after,
.account-withdraw-balance::after,
.casino-wallet-strip span::after,
.bet-history-topbar strong::after,
.account-profile-form label:has(#accountPanelBalance)::after,
.account-profile-form label:has(#bonusWalletBalance)::after {
  content: none !important;
  display: none !important;
}

.main-nav a::before,
.mobile-bottom-nav a::before,
.mobile-bottom-nav button::before,
.bottom-slip-toggle::before,
.odd-lock-icon::before,
.drawer-links button::before,
.account-sidebar nav button::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  line-height: 1;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

.main-nav a::before,
.mobile-bottom-nav a::before,
.mobile-bottom-nav button::before,
.bottom-slip-toggle::before {
  -webkit-mask: none !important;
  mask: none !important;
  background: transparent !important;
}

.main-nav a::before {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-bottom: 3px;
  color: currentColor;
  font-size: 18px;
}

.main-nav a[data-nav="sports"]::before { content: "\f015"; }
.main-nav a[data-nav="sport"]::before { content: "\f1e3"; }
.main-nav a[data-nav="live"]::before { content: "\f26c"; }
.main-nav a[data-nav="games"]::before { content: "\f522"; }

.mobile-bottom-nav a::before,
.mobile-bottom-nav button::before {
  content: "\f111";
  display: inline-grid;
  place-items: center;
  width: 26px !important;
  height: 26px !important;
  border-radius: 0 !important;
  color: currentColor;
  font-size: 22px;
  box-shadow: none !important;
}

.mobile-bottom-nav .mobile-nav-sports::before { content: "\f015"; }
.mobile-bottom-nav .mobile-nav-menu::before { content: "\f03a"; }
.mobile-bottom-nav .mobile-nav-games::before { content: "\f11b"; color: #9b7cff; }
.mobile-bottom-nav .mobile-nav-bets::before { content: "\f145"; }
.mobile-bottom-nav .mobile-nav-me::before { content: "\f007"; }

.bottom-slip-toggle::before {
  content: "\f543" !important;
  display: inline-grid;
  place-items: center;
  width: 30px !important;
  height: 30px !important;
  color: #ffffff;
  font-size: 28px;
}

.odd-lock-icon {
  display: inline-grid;
  place-items: center;
}

.odd-lock-icon::before {
  content: "\f023" !important;
  position: static !important;
  display: inline-block;
  width: auto;
  height: auto;
  border: 0 !important;
  border-radius: 0 !important;
  transform: none !important;
  background: transparent !important;
  color: currentColor;
  font-size: 14px;
}

.odd-lock-icon::after {
  content: none !important;
  display: none !important;
}

.drawer-links button,
.account-sidebar nav button {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 10px;
}

.drawer-links button::before,
.account-sidebar nav button::before {
  content: "\f105";
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: #e41827;
  font-size: 14px;
}

.drawer-links button[data-account-panel="profile"]::before,
.account-sidebar nav button[data-account-panel="profile"]::before { content: "\f2bb"; }
.drawer-links button[data-account-panel="loyalty"]::before,
.account-sidebar nav button[data-account-panel="loyalty"]::before { content: "\f091"; }
.drawer-links button[data-account-panel="streak"]::before,
.account-sidebar nav button[data-account-panel="streak"]::before { content: "\f06d"; }
.drawer-links button[data-account-panel="deposit"]::before,
.account-sidebar nav button[data-account-panel="deposit"]::before { content: "\f555"; }
.drawer-links button[data-account-panel="withdraw"]::before,
.account-sidebar nav button[data-account-panel="withdraw"]::before { content: "\f0d6"; }
.drawer-links button[data-account-panel="bets"]::before,
.account-sidebar nav button[data-account-panel="bets"]::before { content: "\f145"; }
.drawer-links button[data-account-panel="transactions"]::before,
.account-sidebar nav button[data-account-panel="transactions"]::before { content: "\f543"; }
.drawer-links button[data-account-panel="notifications"]::before,
.account-sidebar nav button[data-account-panel="notifications"]::before { content: "\f0f3"; }
.drawer-links button[data-account-panel="gifts"]::before,
.account-sidebar nav button[data-account-panel="gifts"]::before { content: "\f06b"; }
.drawer-links button[data-account-panel="security"]::before,
.account-sidebar nav button[data-account-panel="security"]::before { content: "\f132"; }
.drawer-links button[data-drawer-logout]::before { content: "\f2f5"; }

/* Final betslip polish: mobile-first, Sporty-style but Arena branded. */
.slip-item {
  position: relative;
}

.slip-match-title {
  border: 0;
  background: transparent;
  padding: 0;
  min-width: 0;
  overflow: hidden;
  color: #14171d;
  font: inherit;
  font-weight: 900;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.slip-market-row {
  align-items: center;
}

.slip-market-name {
  min-width: 0;
  overflow: hidden;
  color: #5f6876;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.slip-odd-value {
  color: #0a9f3f;
  font-size: 14px;
}

@media (max-width: 760px) {
  body.is-signed-in .mobile-bottom-nav,
  .mobile-bottom-nav {
    background: #050505;
    border-top: 0;
    box-shadow: 0 -12px 34px rgba(0, 0, 0, 0.35);
  }

  .mobile-bottom-nav a,
  .mobile-bottom-nav button {
    color: #ffffff;
  }

  .bottom-slip-toggle,
  body.is-signed-in .bottom-slip-toggle {
    right: 22px;
    bottom: calc(72px + env(safe-area-inset-bottom));
    width: 70px;
    height: 70px;
    min-height: 70px;
    background: #08a833 !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.34), 0 0 24px rgba(8, 168, 51, 0.32);
  }

  .bottom-slip-toggle.has-selections {
    transform: translateY(-3px);
  }

  body.mobile-slip-open .bottom-slip-toggle,
  body.mobile-slip-open.is-signed-in .bottom-slip-toggle {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .bottom-slip-toggle b {
    top: -8px;
    right: -5px;
    width: 24px;
    height: 24px;
    border: 2px solid #ffffff;
    background: #ffffff;
    color: #050505;
    font-weight: 900;
  }

  .mobile-slip-overlay:not([hidden]) {
    background: rgba(4, 5, 7, 0.62);
    backdrop-filter: blur(2px);
  }

  .mobile-slip-panel:not([hidden]) {
    left: 0;
    right: 0;
    bottom: calc(74px + env(safe-area-inset-bottom));
    max-height: min(84dvh, 650px);
    border: 0;
    border-radius: 14px 14px 0 0;
    background: #eef1f5;
    box-shadow: 0 -16px 38px rgba(0, 0, 0, 0.38);
  }

  .mobile-slip-head {
    min-height: 58px;
    grid-template-columns: minmax(0, 1fr) auto 38px;
    padding: 12px 14px;
    background: #14171d;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .mobile-slip-head strong {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    font-size: 18px;
  }

  .mobile-slip-head strong span {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #08a833;
    color: #ffffff;
    font-size: 13px;
  }

  .mobile-slip-head a {
    color: #ffffff;
    font-size: 13px;
  }

  .mobile-slip-head button {
    width: 34px;
    height: 34px;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    font-size: 18px;
    line-height: 1;
  }

  .mobile-slip-tabs {
    gap: 0;
    padding: 0;
    background: #313743;
  }

  .mobile-slip-tabs button {
    min-height: 54px;
    border-radius: 0;
    background: #4f5664;
    color: #ffffff;
    font-size: 17px;
    font-weight: 900;
  }

  .mobile-slip-tabs button.active {
    background: #ffffff;
    color: #16191f;
  }

  .mobile-booking-row {
    padding: 10px 12px;
    background: #f2f4f7;
  }

  .mobile-booking-row input,
  .mobile-booking-row button {
    height: 42px;
    border-radius: 4px;
  }

  .mobile-booking-row button {
    background: #111318;
  }

  .mobile-slip-panel .betslip-items {
    min-height: 120px;
    padding: 12px;
    gap: 10px;
    overflow-y: auto;
    background: #ffffff;
  }

  .mobile-slip-panel .empty-slip {
    display: grid;
    place-items: center;
    min-height: 116px;
    color: #515a67;
    text-align: center;
  }

  .mobile-slip-panel .slip-item {
    grid-template-columns: 30px minmax(0, 1fr) auto;
    align-items: center;
    gap: 5px 9px;
    min-height: 76px;
    padding: 10px 11px;
    border: 1px solid #dbe1ea;
    border-left: 4px solid #e41827;
    border-radius: 5px;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(16, 24, 40, 0.06);
  }

  .mobile-slip-panel .slip-item button[data-remove] {
    grid-column: 1;
    grid-row: 1 / 4;
    align-self: start;
    justify-self: center;
    width: 26px;
    height: 26px;
    margin-top: 0;
    color: #21252b;
  }

  .mobile-slip-panel .slip-match-title {
    grid-column: 2 / 4;
    font-size: 14px;
    font-weight: 900;
  }

  .mobile-slip-panel .slip-market-row {
    grid-column: 2 / 4;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    width: 100%;
  }

  .mobile-slip-panel .slip-market-name {
    color: #697384;
    font-size: 12px;
    font-weight: 800;
  }

  .mobile-slip-panel .slip-odd-value {
    min-width: 54px;
    border-radius: 4px;
    background: #e5f5ea;
    color: #078b35;
    padding: 4px 8px;
    text-align: center;
    font-size: 16px;
    font-weight: 900;
  }

  .mobile-slip-panel .slip-limit,
  .mobile-slip-panel .slip-stake-hint {
    grid-column: 2 / 4;
    font-size: 11px;
  }

  .mobile-slip-panel .slip-stake-hint {
    color: #6a7280;
  }

  .mobile-slip-footer {
    gap: 10px;
    padding: 12px 12px max(12px, env(safe-area-inset-bottom));
    border-top: 1px solid #dbe1ea;
    background: #ffffff;
  }

  .mobile-slip-footer .return-row,
  .mobile-slip-footer .stake-box {
    margin: 0;
    width: 100%;
  }

  .mobile-slip-footer .return-row {
    min-height: 40px;
    border-radius: 4px;
    background: #f4f6f9;
    padding: 8px 10px;
  }

  .mobile-slip-footer .stake-box {
    gap: 6px;
  }

  .mobile-slip-footer .stake-box input {
    height: 44px;
    border-radius: 4px;
  }

  .mobile-slip-actions {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .mobile-slip-actions .btn {
    height: 46px;
    border-radius: 4px;
    font-size: 15px;
  }

  .mobile-slip-actions .book-bet-action {
    order: 1;
    background: #099337;
    color: #ffffff;
  }

  .mobile-slip-actions .place-bet-action {
    order: 2;
    background: #e41827;
    color: #ffffff;
  }

  #mobileAddMoreBets {
    order: 3;
    background: #ffffff;
    color: #16191f;
    border: 1px solid #dbe1ea;
  }

  .mobile-slip-actions .book-bet-action.disabled,
  .mobile-slip-actions .place-bet-action.disabled {
    background: #d7dce5;
    color: #7e8795;
  }

  #mobileClearBetslip {
    order: 4;
    grid-column: 1 / -1;
    height: 38px;
    background: #ffffff;
    color: #16191f;
    border: 1px solid #dbe1ea;
  }
}

/* Final mobile stability pass: keep phone pages inside the viewport and clear fixed controls. */
@media (max-width: 760px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  .page,
  .site-view.active,
  .content-grid,
  .market-stack,
  .mobile-noblex-panel,
  .real-match-preview {
    max-width: 100%;
  }

  .real-match-preview {
    width: 100%;
    margin-inline: 0;
    padding-inline: 10px;
    overflow: hidden;
  }

  .real-preview-track {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding-inline: 0;
  }

  .real-preview-card {
    flex-basis: min(84vw, 336px);
    min-height: 154px;
    padding: 11px;
  }

  .hero-card,
  .arena-hero {
    height: 184px;
    min-height: 184px;
  }

  .hero-card img,
  .arena-hero img {
    height: 184px;
  }

  .arena-hero::before {
    font-size: 116px;
  }

  .arena-hero .hero-copy h1 {
    max-width: 230px;
    font-size: 29px;
  }

  .arena-hero .hero-copy p:not(.eyebrow) {
    display: none;
  }

  .mobile-noblex-panel {
    padding-bottom: calc(104px + env(safe-area-inset-bottom));
  }

  .mobile-search-row {
    position: relative;
    z-index: 1;
    grid-template-columns: minmax(118px, 0.42fr) minmax(0, 1fr);
  }

  .mobile-search-box input {
    min-width: 0;
  }

  .bottom-slip-toggle,
  body.is-signed-in .bottom-slip-toggle {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    min-height: 64px !important;
    padding: 0 !important;
    transform: none !important;
  }

  .bottom-slip-toggle b {
    width: 22px;
    height: 22px;
    font-size: 12px;
  }

  .mobile-slip-panel:not([hidden]),
  .bet-confirm-panel:not([hidden]) {
    max-width: 100vw;
  }
}

@media (max-width: 390px) {
  .mobile-search-row {
    grid-template-columns: minmax(108px, 0.38fr) minmax(0, 1fr);
    gap: 8px;
  }

  .real-preview-card {
    flex-basis: min(82vw, 320px);
  }
}

/* Sporty-style Open Bets and ticket detail mobile pass. */
body.ticket-detail-open .mobile-bottom-nav,
body.ticket-detail-open .bottom-slip-toggle,
body.ticket-detail-open .chat-button {
  display: none !important;
}

body.open-bets-mode .bottom-slip-toggle {
  display: none !important;
}

body.open-bets-mode .bet-history-panel,
body.open-bets-mode .account-popup-panel.bet-history-panel {
  background: #f1f2f5 !important;
  color: #171b22 !important;
}

body.open-bets-mode .account-popup-panel.bet-history-panel {
  min-height: 100dvh;
}

body.open-bets-mode .bet-history-topbar {
  min-height: 104px;
  align-items: end;
  padding: 14px 16px;
  background:
    linear-gradient(128deg, #109b3b 0 31%, #1284e6 31% 72%, #e41827 72% 100%) !important;
}

body.open-bets-mode .bet-history-back {
  background: rgba(0, 0, 0, 0.18);
}

body.open-bets-mode .bet-history-topbar strong {
  margin-left: auto;
  min-height: 42px;
  border-radius: 999px;
  background: rgba(20, 22, 28, 0.88);
  color: #ffd52a;
  font-size: 17px;
}

body.open-bets-mode .bet-history-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 0 !important;
  padding: 0 16px;
  background: transparent;
  transform: translateY(-18px);
}

body.open-bets-mode .bet-history-tabs button,
body.open-bets-mode .split-tabs.bet-history-tabs button {
  min-height: 58px;
  border: 1px solid #d6dbe5 !important;
  border-radius: 6px 6px 0 0;
  background: #5a606c !important;
  color: #ffffff !important;
  box-shadow: none;
}

body.open-bets-mode .bet-history-tabs button.active,
body.open-bets-mode .split-tabs.bet-history-tabs button.active {
  background: #ffffff !important;
  color: #242a34 !important;
  box-shadow: inset 0 -3px 0 #e41827;
}

body.open-bets-mode .bet-history-tabs button span {
  display: inline;
}

.open-bets-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px 12px;
  margin-top: -6px;
  overflow-x: auto;
  background: #f1f2f5;
}

.open-bets-toolbar[hidden],
.auto-cashout-card[hidden] {
  display: none !important;
}

.open-bets-toolbar button {
  flex: 0 0 auto;
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: #e2e5eb;
  color: #343b47;
  padding: 0 15px;
  font-weight: 900;
}

.ticket-detail-selection.selection-lost .ticket-selection-head em {
  color: #ef6873;
}

.ticket-detail-selection small,
.ticket-selection-score {
  color: #aeb4c0;
  font-size: 13px;
  font-weight: 700;
}

.ticket-selection-pick {
  display: grid;
  gap: 3px;
  border-radius: 4px;
  background: rgba(13, 155, 67, 0.13);
  color: #d7f6e2;
  padding: 8px 9px;
  font-size: 13px;
  font-weight: 700;
}

.ticket-detail-selection.selection-lost .ticket-selection-pick {
  background: rgba(228, 24, 39, 0.12);
  color: #ffd5d8;
}

.ticket-congrats-row[hidden] {
  display: none !important;
}

.open-bets-toolbar button.active {
  background: #202632;
  color: #ffffff;
}

.open-bets-grid-btn {
  margin-left: auto;
  width: 48px;
  padding: 0 !important;
}

.open-bets-grid-btn > i {
  color: #8b92a0;
  font-size: 22px;
}

.open-bets-grid-btn span,
.open-bets-grid-btn span::before,
.open-bets-grid-btn span::after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  background: #8b92a0;
  box-shadow: 13px 0 0 #8b92a0, 0 13px 0 #8b92a0, 13px 13px 0 #8b92a0;
}

.auto-cashout-card {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 16px 12px;
  border: 1px solid #dfe3eb;
  border-radius: 4px;
  background: #ffffff;
  color: #343a46;
  padding: 12px 14px;
  box-shadow: 0 2px 8px rgba(10, 14, 22, 0.08);
}

.auto-cashout-card span {
  min-width: 0;
  font-size: 15px;
  font-weight: 700;
}

.auto-cashout-card button {
  width: 38px;
  height: 38px;
  border-radius: 4px;
  background: transparent;
  color: #9aa1ad;
  font-size: 28px;
  line-height: 1;
  font-weight: 300;
}

body.open-bets-mode .bet-ticket-list {
  padding: 0 16px calc(96px + env(safe-area-inset-bottom)) !important;
  background: #f1f2f5 !important;
  gap: 14px;
}

body.open-bets-mode .bet-ticket-empty {
  color: #69707d;
}

body.open-bets-mode .open-bets-empty {
  min-height: 260px;
  border: 0;
  background: transparent;
  color: #2a303a;
  box-shadow: none;
}

body.open-bets-mode .open-bets-empty strong {
  color: #2a303a;
}

body.open-bets-mode .open-bets-empty small {
  color: #6b7280;
}

body.open-bets-mode .open-bets-empty span {
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(10, 14, 22, 0.08);
}

.open-bets-empty span > i {
  position: relative;
  z-index: 1;
  color: #ffffff;
  font-size: 34px;
}

body.open-bets-mode .open-bets-empty span::before,
body.open-bets-mode .open-bets-empty span::after {
  display: none;
}

body.open-bets-mode .open-bets-empty span > i {
  color: #e4142c;
}

body.open-bets-mode .bet-ticket-card {
  grid-template-columns: 1fr;
  gap: 0;
  border: 1px solid #dde2eb;
  border-radius: 4px;
  background: #ffffff;
  color: #202632;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(10, 14, 22, 0.1);
}

body.open-bets-mode .bet-ticket-date {
  display: none;
}

body.open-bets-mode .bet-ticket-body {
  gap: 0;
  padding: 16px 20px;
}

body.open-bets-mode .bet-ticket-status {
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: #202632;
  padding: 0;
  font-size: 21px;
  line-height: 1.15;
}

body.open-bets-mode .bet-ticket-status strong {
  font-size: 22px;
  color: #202632;
}

body.open-bets-mode .bet-ticket-status em {
  border-radius: 2px;
  background: #bdebd0;
  color: #07913a;
  padding: 2px 4px;
  font-size: 14px;
  font-style: normal;
  font-weight: 900;
}

body.open-bets-mode .bet-ticket-status span {
  margin-left: auto;
  color: #09943a;
  font-size: 15px;
  font-weight: 900;
}

.bet-ticket-actions {
  min-height: 36px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  border-bottom: 1px solid #edf0f5;
  padding-bottom: 10px;
}

.bet-ticket-actions button {
  border: 0;
  background: transparent;
  color: #09943a;
  padding: 0;
  font-size: 14px;
  font-weight: 800;
}

body.open-bets-mode .bet-ticket-totals {
  gap: 5px;
  padding: 10px 0 0;
  color: #616977;
  font-size: 16px;
}

body.open-bets-mode .bet-ticket-totals b {
  color: #202632;
  font-size: 18px;
}

body.open-bets-mode .bet-ticket-matches {
  gap: 4px;
  padding: 12px 0 0;
  color: #454c58;
  font-size: 20px;
}

body.open-bets-mode .bet-ticket-cashout {
  justify-self: stretch;
  min-height: 56px;
  display: grid;
  place-items: center;
  align-content: center;
  margin-top: 14px;
  border-radius: 3px;
  background: #09943a;
  color: #ffffff;
  padding: 8px 12px;
  font-size: 17px;
}

body.open-bets-mode .bet-ticket-cashout span,
body.open-bets-mode .bet-ticket-cashout b {
  display: block;
  color: #ffffff;
  line-height: 1.15;
}

body.open-bets-mode .bet-ticket-cashout b {
  font-size: 18px;
}

body.open-bets-mode .ticket-won .bet-ticket-status {
  background: #0c9b3e;
  color: #ffffff;
  margin: -16px -20px 12px;
  padding: 8px 14px;
}

body.open-bets-mode .ticket-won .bet-ticket-status strong,
body.open-bets-mode .ticket-won .bet-ticket-status span {
  color: #ffffff;
}

body.open-bets-mode .ticket-lost .bet-ticket-status {
  background: #a6acb7;
  margin: -16px -20px 12px;
  padding: 8px 14px;
}

/* High-contrast bet history cleanup. Keep this after the sporty overrides. */
.bet-history-panel,
.account-popup-panel.bet-history-panel,
.bet-history-panel .history-list {
  background: #f3f5f8;
  color: #111827;
}

.bet-history-panel .bet-history-tabs button,
.bet-history-panel .split-tabs.bet-history-tabs button {
  background: #e6eaf0;
  color: #293241;
}

.bet-history-panel .bet-history-tabs button.active,
.bet-history-panel .split-tabs.bet-history-tabs button.active {
  background: #ffffff;
  color: #0f172a;
  box-shadow: inset 0 -4px 0 #0a9d3f;
}

.bet-history-panel .open-bets-empty,
.bet-history-panel .bet-ticket-empty {
  color: #111827;
}

.bet-history-panel .open-bets-empty strong {
  color: #111827;
}

.bet-history-panel .open-bets-empty small {
  color: #4b5563;
}

body.open-bets-mode .bet-history-panel,
body.open-bets-mode .account-popup-panel.bet-history-panel,
body.open-bets-mode .bet-ticket-list {
  background: #f3f5f8;
  color: #111827;
}

body.open-bets-mode .bet-history-tabs button,
body.open-bets-mode .split-tabs.bet-history-tabs button {
  border-color: #c9d1dc !important;
  background: #e6eaf0 !important;
  color: #293241 !important;
}

body.open-bets-mode .bet-history-tabs button.active,
body.open-bets-mode .split-tabs.bet-history-tabs button.active {
  background: #ffffff !important;
  color: #0f172a !important;
  box-shadow: inset 0 -4px 0 #0a9d3f;
}

body.open-bets-mode .open-bets-toolbar {
  background: #f3f5f8;
}

body.open-bets-mode .open-bets-toolbar button {
  border-color: #cbd3df;
  background: #ffffff;
  color: #202938;
}

body.open-bets-mode .open-bets-toolbar button.active {
  border-color: #0a9d3f;
  background: #0a9d3f;
  color: #ffffff;
}

body.open-bets-mode .bet-ticket-card {
  border-color: #cbd3df;
  background: #ffffff;
  color: #111827;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.1);
}

body.open-bets-mode .bet-ticket-status,
body.open-bets-mode .bet-ticket-status strong,
body.open-bets-mode .bet-ticket-totals b,
body.open-bets-mode .bet-ticket-matches span,
body.open-bets-mode .bet-ticket-expand strong {
  color: #111827;
}

body.open-bets-mode .bet-ticket-status span,
body.open-bets-mode .bet-ticket-actions button {
  color: #087a34;
}

body.open-bets-mode .bet-ticket-status em {
  background: #e6f8ee;
  color: #087a34;
}

body.open-bets-mode .bet-ticket-totals,
body.open-bets-mode .bet-ticket-expand span,
body.open-bets-mode .bet-ticket-expand small,
body.open-bets-mode .bet-ticket-stake-details span {
  color: #4b5563;
}

body.open-bets-mode .ticket-won .bet-ticket-status {
  background: #087a34;
  color: #ffffff;
}

body.open-bets-mode .ticket-won .bet-ticket-status strong,
body.open-bets-mode .ticket-won .bet-ticket-status span,
body.open-bets-mode .ticket-lost .bet-ticket-status strong,
body.open-bets-mode .ticket-lost .bet-ticket-status span {
  color: #ffffff;
}

body.open-bets-mode .ticket-lost .bet-ticket-status {
  background: #4b5563;
  color: #ffffff;
}

.ticket-detail-selection {
  background: #ffffff;
  color: #111827;
}

.ticket-selection-head strong,
.ticket-selection-pick,
.ticket-detail-selection small,
.ticket-selection-score {
  color: #111827;
}

.ticket-selection-pick {
  background: #eef9f2;
  border: 1px solid #caead6;
}

.ticket-detail-selection.selection-lost .ticket-selection-pick {
  background: #fff1f2;
  border-color: #fecdd3;
  color: #7f1d1d;
}

/* Bet history black text pass. */
.bet-history-panel,
.account-popup-panel.bet-history-panel,
.bet-history-panel .history-list,
.bet-history-panel .bet-ticket-empty,
.bet-history-panel .open-bets-empty,
.bet-history-panel .open-bets-empty strong,
.bet-history-panel .open-bets-empty small,
.bet-history-panel .bet-ticket-card,
.bet-history-panel .bet-ticket-card *,
.bet-history-panel .history-entry,
.bet-history-panel .history-entry *,
.bet-history-panel .bet-history-tabs button,
.bet-history-panel .bet-history-tabs button.active,
.bet-history-panel .split-tabs.bet-history-tabs button,
.bet-history-panel .split-tabs.bet-history-tabs button.active,
body.open-bets-mode .bet-ticket-card,
body.open-bets-mode .bet-ticket-status,
body.open-bets-mode .bet-ticket-status strong,
body.open-bets-mode .bet-ticket-totals,
body.open-bets-mode .bet-ticket-totals span,
body.open-bets-mode .bet-ticket-totals b,
body.open-bets-mode .bet-ticket-matches,
body.open-bets-mode .bet-ticket-matches span,
body.open-bets-mode .bet-ticket-expand strong,
body.open-bets-mode .bet-ticket-expand span,
body.open-bets-mode .bet-ticket-expand small,
body.open-bets-mode .bet-ticket-stake-details span,
body.open-bets-mode .bet-ticket-stake-details b,
.ticket-detail-selection,
.ticket-selection-head strong,
.ticket-selection-pick,
.ticket-detail-selection small,
.ticket-selection-score,
.ticket-selection-live {
  color: #000000 !important;
}

body.open-bets-mode .bet-ticket-status em {
  color: #000000;
}

/* Ticket details keep the older dark slip style. */
.ticket-detail-panel,
.ticket-detail-body {
  background: #1a1d23 !important;
  color: #ffffff !important;
}

.ticket-detail-meta,
.ticket-detail-status-row,
.ticket-total-return,
.ticket-detail-lines,
.ticket-detail-lines span,
.ticket-detail-lines b,
.ticket-detail-selection,
.ticket-selection-head strong,
.ticket-detail-selection small,
.ticket-selection-score,
.ticket-selection-live,
.ticket-selection-pick {
  color: #ffffff !important;
}

.ticket-detail-meta,
.ticket-detail-lines,
.ticket-total-return {
  border-color: rgba(255, 255, 255, 0.16) !important;
}

.ticket-detail-selection {
  border-color: rgba(255, 255, 255, 0.14) !important;
  background: #242a34 !important;
}

.ticket-selection-pick {
  border-color: rgba(10, 157, 63, 0.36) !important;
  background: rgba(10, 157, 63, 0.16) !important;
}

.ticket-selection-live {
  background: rgba(10, 157, 63, 0.2) !important;
}

.ticket-detail-selection.selection-lost .ticket-selection-pick {
  border-color: rgba(228, 24, 39, 0.34) !important;
  background: rgba(228, 24, 39, 0.16) !important;
  color: #ffffff !important;
}

/* Sporty-style cashout and winning overlays. */
.cashout-success-overlay {
  position: fixed;
  inset: 0;
  z-index: 138;
  background: rgba(8, 9, 12, 0.68);
}

.cashout-success-panel {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 139;
  width: min(430px, 100vw);
  min-height: 270px;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 10px;
  transform: translateX(-50%);
  border-radius: 0;
  background: #ffffff;
  color: #20242c;
  padding: 34px 24px max(24px, env(safe-area-inset-bottom));
  box-shadow: 0 -12px 36px rgba(0, 0, 0, 0.26);
}

.cashout-success-close {
  position: absolute;
  top: 18px;
  right: 20px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: transparent;
  color: #8b929f;
  font-size: 30px;
  font-weight: 400;
}

.cashout-success-check {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-top: 8px;
  background: #0d9b43;
  color: #ffffff;
  font-size: 22px;
  font-weight: 1000;
}

.cashout-success-panel strong {
  margin-top: 12px;
  color: #20242c;
  font-size: 23px;
  font-weight: 1000;
}

.cashout-success-panel p {
  margin: 0;
  color: #20242c;
  font-size: 16px;
  font-weight: 500;
}

.cashout-success-spinner {
  width: 36px;
  height: 36px;
  margin-top: 22px;
  border: 3px solid #d9dde4;
  border-top-color: #7a828f;
  border-radius: 50%;
  animation: arena-spin 0.85s linear infinite;
}

@keyframes arena-spin {
  to {
    transform: rotate(360deg);
  }
}

body.cashout-success-open,
body.win-prompt-open {
  overflow: hidden;
}

body.win-prompt-open .mobile-bottom-nav,
body.win-prompt-open .bottom-slip-toggle,
body.win-prompt-open .chat-button {
  display: none !important;
}

/* Compact Arena2Bet mobile shell and home composition. */
.mobile-sporty-home {
  display: none;
}

.mobile-top-search {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.14);
  color: #ffffff;
}

body.mobile-search-open .mobile-noblex-panel {
  display: block;
  position: sticky;
  top: 70px;
  z-index: 19;
  max-width: 760px;
  margin: 0 auto;
  padding: 10px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-top: 0;
  box-shadow: var(--shadow);
}

body.mobile-search-open .mobile-noblex-panel > :not(.mobile-search-row) {
  display: none !important;
}

@media (max-width: 760px) {
  :root {
    --mobile-brand: #e4142c;
    --mobile-green: #079c3a;
    --mobile-ink: #181c21;
    --mobile-border: #e3e5e7;
  }

  html,
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: #f4f5f6;
  }

  .top-shell {
    position: sticky;
    top: 0;
    z-index: 120;
    background: var(--mobile-brand);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.16);
  }

  .top-shell .account-bar {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 54px;
    padding: 6px 9px;
    gap: 8px;
    background: var(--mobile-brand) !important;
  }

  .shell-menu-btn,
  .top-shell .main-nav {
    display: none !important;
  }

  .top-shell .brand {
    flex: 0 1 auto;
    min-width: 0;
    margin: 0;
    color: #ffffff !important;
    font-size: 21px;
    line-height: 1;
    letter-spacing: 0;
  }

  .top-shell .brand-mark {
    width: 30px;
    height: 34px;
    border-radius: 4px;
    background: #ffffff;
    color: var(--mobile-brand);
  }

  .mobile-top-search {
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    margin-left: auto;
    border: 0;
    background: transparent;
    color: #ffffff;
    font-size: 22px;
  }

  .login-strip {
    flex: 0 0 auto;
    margin-left: auto;
    gap: 6px;
  }

  .login-strip > .phone-wrap,
  .login-strip > #passwordInput,
  .login-strip > .keep,
  .login-strip > a {
    display: none !important;
  }

  .login-strip .btn {
    min-width: 0;
    height: 38px;
    padding: 0 11px;
    border: 1px solid #ffffff;
    border-radius: 3px;
    background: #ffffff;
    color: var(--mobile-brand);
    font-size: 12px;
  }

  .login-strip .btn-outline {
    background: #b90f23;
    color: #ffffff;
  }

  .account-state {
    display: flex !important;
    flex: 0 0 auto;
    margin-left: auto;
  }

  .account-state[hidden] {
    display: none !important;
  }

  .account-state > :not(#topBalance) {
    display: none !important;
  }

  #topBalance {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    max-width: min(46vw, 176px);
    padding: 0 10px;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 3px;
    background: rgba(120, 0, 18, 0.26);
    color: #ffffff;
    font-size: 12px;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #topBalance::before {
    content: "\f555";
    margin-right: 7px;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
  }

  .mobile-sporty-home {
    display: block;
    width: 100%;
    overflow: hidden;
    background: #f4f5f6;
  }

  .hero-grid,
  .mobile-noblex-panel {
    display: none !important;
  }

  body.mobile-search-open .mobile-noblex-panel {
    display: block !important;
    padding: 10px;
    background: #ffffff;
  }

  body.mobile-search-open .mobile-noblex-panel > :not(.mobile-search-row) {
    display: none !important;
  }

  .mobile-game-rail {
    display: flex;
    gap: 8px;
    padding: 8px 8px 7px;
    overflow-x: auto;
    scrollbar-width: none;
    background: #ffffff;
  }

  .mobile-game-rail::-webkit-scrollbar,
  .mobile-quick-actions::-webkit-scrollbar,
  .mobile-promo-tabs::-webkit-scrollbar,
  .mobile-content-tabs::-webkit-scrollbar {
    display: none;
  }

  .mobile-game-rail button {
    position: relative;
    display: flex;
    flex: 0 0 88px;
    height: 88px;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    overflow: hidden;
    padding: 9px;
    border: 0;
    border-radius: 4px;
    isolation: isolate;
    background: #15171c center/cover no-repeat;
    color: #ffffff;
    text-align: left;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.22);
  }

  .mobile-game-rail button::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(5, 6, 9, 0.03) 15%, rgba(5, 6, 9, 0.9) 100%);
  }

  .mobile-game-rail .quick-picks { background-image: url("arena-quick-picks.jpg"); }
  .mobile-game-rail .quick-numbers { background-image: url("arena-quick-numbers.jpg"); }
  .mobile-game-rail .quick-aviator { background-image: url("arena-quick-aviator.jpg"); }
  .mobile-game-rail .quick-challenge { background-image: url("arena-quick-challenge.jpg"); }
  .mobile-game-rail .quick-virtual { background-image: url("arena-quick-virtual.jpg"); }

  .mobile-game-rail i {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1;
    color: #ffffff;
    font-size: 27px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.75));
  }

  .mobile-game-rail span {
    position: relative;
    z-index: 1;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.15;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.85);
  }

  .mobile-quick-actions {
    display: flex;
    justify-content: space-between;
    gap: 2px;
    padding: 5px 4px 6px;
    overflow-x: auto;
    background: #ffffff;
    border-bottom: 1px solid var(--mobile-border);
  }

  .mobile-quick-actions button {
    display: grid;
    flex: 1 0 60px;
    min-height: 60px;
    place-items: center;
    align-content: center;
    gap: 5px;
    border: 0;
    background: #ffffff;
    color: #30343a;
  }

  .mobile-quick-actions i {
    font-size: 20px;
  }

  .mobile-quick-actions span {
    font-size: 10px;
    line-height: 1;
    white-space: nowrap;
  }

  .mobile-promo-tabs {
    display: flex;
    gap: 5px;
    padding: 7px 7px 9px;
    overflow-x: auto;
    background: #ffffff;
  }

  .mobile-promo-tabs button {
    flex: 0 0 138px;
    min-height: 52px;
    padding: 7px 10px;
    border: 0;
    border-top: 3px solid #aeb3ba;
    border-radius: 0;
    background: #f8f8f9;
    color: #202327;
    font-size: 12px;
    font-weight: 900;
    text-align: left;
    text-transform: uppercase;
  }

  .mobile-promo-tabs button.active {
    border-top-color: var(--mobile-brand);
    background: #ffffff;
  }

  .mobile-feature-card {
    margin: 0 7px 8px;
    overflow: hidden;
    border: 1px solid rgba(180, 27, 43, 0.62);
    border-radius: 4px;
    background: #ffffff;
  }

  .mobile-feature-copy {
    position: relative;
    display: flex;
    min-height: 118px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 14px 18px;
    background:
      linear-gradient(90deg, rgba(17, 17, 20, 0.96), rgba(150, 0, 22, 0.7)),
      url("assets/stadium-hero.png") center/cover no-repeat;
    color: #ffffff;
  }

  .mobile-feature-copy span {
    color: #ffc62f;
    font-size: 10px;
    font-weight: 900;
  }

  .mobile-feature-copy strong {
    margin: 3px 0 9px;
    font-size: 24px;
    line-height: 1;
  }

  .mobile-feature-copy button {
    min-height: 32px;
    padding: 0 12px;
    border: 0;
    border-radius: 2px;
    background: #ffc400;
    color: #17191d;
    font-weight: 900;
  }

  .mobile-feature-tabs,
  .mobile-content-tabs {
    display: flex;
    align-items: center;
    overflow-x: auto;
    background: #ffffff;
  }

  .mobile-feature-tabs button,
  .mobile-content-tabs button {
    flex: 1 0 auto;
    min-height: 42px;
    padding: 0 12px;
    border: 0;
    border-bottom: 3px solid transparent;
    background: #ffffff;
    color: #34383e;
    font-size: 12px;
  }

  .mobile-feature-tabs button.active,
  .mobile-content-tabs button.active {
    border-bottom-color: var(--mobile-green);
    color: var(--mobile-green);
    font-weight: 900;
  }

  .mobile-feature-fixture {
    display: grid;
    grid-template-columns: minmax(0, 1fr) repeat(3, 56px);
    align-items: stretch;
    min-height: 82px;
    padding: 8px;
    gap: 2px;
    border-top: 1px solid var(--mobile-border);
  }

  .mobile-feature-fixture > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    padding-right: 6px;
  }

  .mobile-feature-fixture small {
    margin-bottom: 3px;
    color: #7a8087;
    font-size: 10px;
  }

  .mobile-feature-fixture strong {
    overflow: hidden;
    color: #24282d;
    font-size: 12px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-feature-fixture .odd {
    min-width: 0;
    min-height: 54px;
    border: 0;
    border-radius: 0;
    background: #dcefe3;
    color: #087433;
    font-size: 14px;
    font-weight: 900;
  }

  .mobile-feature-fixture .odd.selected {
    background: var(--mobile-green);
    color: #ffffff;
  }

  .mobile-content-tabs {
    margin: 0 7px 8px;
    border-bottom: 1px solid var(--mobile-border);
  }

  .real-match-preview {
    margin-top: 0;
  }

  .mobile-bottom-nav .mobile-nav-sports::before {
    content: "\f1e3";
  }

  .page {
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 360px) {
  .top-shell .brand {
    font-size: 18px;
  }

  .top-shell .brand-mark {
    width: 27px;
    height: 31px;
  }

  .mobile-top-search {
    flex-basis: 36px;
    width: 36px;
  }

  .login-strip .btn {
    padding-inline: 8px;
  }

  .mobile-feature-fixture {
    grid-template-columns: minmax(0, 1fr) repeat(3, 52px);
  }
}

/* Mobile account dashboard and single-page withdrawal flow. */
.mobile-me-panel,
.mobile-account-subhead {
  display: none !important;
}

.account-withdraw-panel[hidden] {
  display: none !important;
}

.account-withdraw-panel.active {
  display: block;
}

.account-withdraw-tabs b {
  display: inline-flex;
  margin-left: 5px;
  padding: 2px 5px;
  background: #20c96b;
  color: #07170e;
  font-size: 10px;
  line-height: 1;
}

.account-withdraw-destination,
.account-withdraw-provider {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  min-height: 58px;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border: 1px solid #bfc5cf;
  background: #ffffff;
  color: #222733;
}

.account-withdraw-destination {
  grid-template-columns: 28px minmax(0, 1fr);
}

.account-withdraw-destination > i,
.account-withdraw-provider > i {
  color: #8b93a1;
  font-size: 20px;
  text-align: center;
}

.account-withdraw-provider button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 2px 0 12px;
  border: 0;
  background: transparent;
  color: #303846;
  font-weight: 700;
}

.account-withdraw-summary {
  display: grid;
  justify-items: end;
  gap: 8px;
  color: #303846;
  font-size: 14px;
}

.account-withdraw-summary b {
  font-weight: 500;
}

.account-withdraw-amount {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 170px;
  min-height: 54px;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border: 1px solid #aeb4bf;
  background: #ffffff;
  color: #171a20;
  font-weight: 800;
}

.account-withdraw-amount input {
  width: 100%;
  height: 50px;
  border: 0;
  outline: 0;
  background: transparent;
  color: #171a20;
  text-align: right;
  font-size: 16px;
  font-weight: 800;
}

.account-withdraw-amount:has(input.invalid) {
  border-color: #d91f37;
}

.account-withdraw-error {
  margin: -12px 0 0;
  color: #c41830;
  font-size: 13px;
}

.account-bank-protection {
  min-height: 480px;
  padding: 120px 24px 40px;
  color: #292f39;
  text-align: center;
}

.account-bank-icon {
  position: relative;
  width: 118px;
  height: 104px;
  margin: 0 auto 28px;
  color: #aeb5c3;
}

.account-bank-icon .fa-shield-halved {
  font-size: 104px;
}

.account-bank-icon .fa-futbol {
  position: absolute;
  right: 0;
  bottom: 0;
  color: #252d36;
  font-size: 56px;
}

.account-bank-protection h3 {
  margin: 0 0 20px;
  font-size: 24px;
}

.account-bank-protection p {
  max-width: 440px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.45;
}

@media (max-width: 760px) {
  body.account-view-active.is-signed-in .top-shell {
    display: none !important;
  }

  body.account-view-active.is-signed-in .page {
    width: 100%;
    padding: 0 0 calc(74px + env(safe-area-inset-bottom));
  }

  body.account-view-active.is-signed-in .site-view[data-view="account"] > .view-title,
  body.account-view-active.is-signed-in .account-sidebar,
  .desktop-account-profile {
    display: none !important;
  }

  body.account-view-active.is-signed-in .account-shell {
    display: block;
    width: 100%;
    padding: 0;
  }

  body.account-view-active.is-signed-in .account-content.account-popups {
    display: block;
    width: 100%;
    margin: 0;
  }

  body.account-view-active.is-signed-in .account-popup-panel {
    width: 100%;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .mobile-me-panel.active {
    display: grid !important;
    gap: 0;
    background: #f5f6f7;
  }

  .mobile-me-hero {
    padding: 20px 16px 22px;
    background: #181c26;
    color: #ffffff;
  }

  .mobile-me-identity {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) 42px;
    align-items: center;
    gap: 12px;
  }

  .mobile-me-avatar {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: linear-gradient(145deg, #343a48, #101219);
    color: #ffffff;
    font-size: 25px;
    font-weight: 900;
  }

  .mobile-me-identity div {
    min-width: 0;
  }

  .mobile-me-identity strong,
  .mobile-me-identity span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-me-identity strong {
    font-size: 19px;
  }

  .mobile-me-identity span {
    margin-top: 5px;
    color: #aeb5c2;
    font-size: 12px;
  }

  .mobile-me-identity > button {
    width: 42px;
    height: 42px;
    border: 0;
    background: transparent;
    color: #ffffff;
    font-size: 28px;
  }

  .mobile-me-progress {
    height: 6px;
    margin: 14px 0 24px 70px;
    overflow: hidden;
    border-radius: 99px;
    background: #596170;
  }

  .mobile-me-progress span {
    display: block;
    width: 8%;
    height: 100%;
    background: #21d99a;
  }

  .mobile-me-balance {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
  }

  .mobile-me-balance span {
    font-size: 14px;
    font-weight: 800;
  }

  .mobile-me-balance strong {
    min-width: 0;
    max-width: 62%;
    overflow-wrap: anywhere;
    text-align: right;
    font-size: clamp(20px, 6vw, 28px);
    line-height: 1;
  }

  .mobile-me-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 28px;
  }

  .mobile-me-actions button {
    display: inline-flex;
    min-height: 50px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid #16b95e;
    border-radius: 2px;
    background: #0aa044;
    color: #ffffff;
    font-size: 16px;
    font-weight: 800;
  }

  .mobile-me-actions button:last-child {
    background: transparent;
    color: #36d47a;
  }

  .mobile-me-loyalty {
    display: flex;
    width: 100%;
    min-height: 62px;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
    padding: 0 16px;
    border: 0;
    border-radius: 6px;
    background: linear-gradient(100deg, #323949, #28485b);
    color: #ffffff;
    text-align: left;
  }

  .mobile-me-loyalty span,
  .mobile-me-loyalty b,
  .mobile-me-loyalty small {
    display: block;
  }

  .mobile-me-loyalty b {
    font-size: 16px;
  }

  .mobile-me-loyalty small {
    margin-top: 3px;
    color: #26df91;
  }

  .mobile-me-shortcuts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 22px;
    border-radius: 7px;
    background: #343a49;
  }

  .mobile-me-shortcuts button {
    display: grid;
    min-width: 0;
    min-height: 108px;
    place-items: center;
    align-content: center;
    gap: 9px;
    padding: 12px 6px;
    border: 0;
    border-right: 1px solid #5b6270;
    background: transparent;
    color: #ffffff;
    font-size: 13px;
    line-height: 1.35;
  }

  .mobile-me-shortcuts button:last-child {
    border-right: 0;
  }

  .mobile-me-shortcuts i {
    font-size: 26px;
  }

  .mobile-me-links {
    background: #ffffff;
  }

  .mobile-me-links button {
    display: grid;
    width: 100%;
    min-height: 58px;
    grid-template-columns: 30px minmax(0, 1fr) auto 18px;
    align-items: center;
    gap: 10px;
    padding: 0 18px;
    border: 0;
    border-bottom: 1px solid #e5e7eb;
    background: #ffffff;
    color: #242a33;
    text-align: left;
    font-size: 15px;
  }

  .mobile-me-links button > i:first-child {
    font-size: 20px;
    text-align: center;
  }

  .mobile-me-links button > i:last-child {
    color: #a3aab4;
  }

  .mobile-me-links b {
    padding: 3px 9px;
    border-radius: 99px;
    background: #e4142c;
    color: #ffffff;
    font-size: 11px;
  }

  .mobile-me-links em {
    color: #969da7;
    font-style: normal;
  }

  .mobile-me-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 24px 18px 34px;
    background: #eef0f3;
    color: #8e96a2;
    font-size: 11px;
  }

  .mobile-me-footer strong {
    font-size: 28px;
  }

  .mobile-account-subhead {
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    min-height: 58px;
    align-items: center;
    background: #e4142c;
    color: #ffffff;
  }

  .mobile-account-subhead > button,
  .mobile-account-subhead span button {
    width: 48px;
    height: 48px;
    border: 0;
    background: transparent;
    color: #ffffff;
    font-size: 22px;
  }

  .mobile-account-subhead > strong {
    font-size: 22px;
  }

  .mobile-account-subhead span {
    display: flex;
  }

  .account-popup-panel[data-account-section="withdraw"] > .popup-head {
    display: none;
  }

  .account-withdraw-page {
    max-width: none;
    min-height: calc(100dvh - 132px);
    margin: 0;
    padding: 0 0 34px;
    background: #ffffff;
  }

  .account-withdraw-tabs {
    margin: 0;
  }

  .account-withdraw-tabs button {
    min-height: 56px;
    font-size: 15px;
  }

  .account-withdraw-panel.active {
    padding: 24px 18px 0;
  }

  .account-withdraw-form {
    gap: 20px;
  }

  .account-withdraw-destination,
  .account-withdraw-provider {
    min-height: 58px;
  }

  .account-withdraw-summary {
    gap: 9px;
    padding: 4px 2px 2px;
  }

  .account-withdraw-amount {
    grid-template-columns: minmax(0, 1fr) minmax(96px, 42%);
  }

  .account-withdraw-submit {
    width: 100%;
    height: 54px;
    margin: 0;
    font-size: 17px;
  }

  .account-withdraw-notes {
    gap: 5px;
    margin: 28px 0 0;
    padding: 24px 0 0 22px;
    color: #8c94a0;
    font-size: 13px;
    line-height: 1.35;
  }

  .account-bank-protection {
    min-height: calc(100dvh - 188px);
    padding-top: clamp(100px, 23vh, 190px) !important;
  }
}

@media (max-width: 360px) {
  .mobile-me-hero {
    padding-inline: 12px;
  }

  .mobile-me-balance strong {
    font-size: 23px;
  }

  .mobile-me-actions {
    gap: 8px;
  }

  .mobile-me-shortcuts button {
    min-height: 96px;
    font-size: 11px;
  }

  .mobile-me-links button {
    padding-inline: 12px;
    font-size: 14px;
  }

  .account-withdraw-panel.active {
    padding-inline: 12px;
  }
}

.win-prompt-overlay {
  z-index: 140;
  background: rgba(8, 9, 13, 0.82);
}

.win-prompt-panel {
  inset: 0;
  left: 0;
  top: 0;
  z-index: 141;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  transform: none;
  border-radius: 0;
  background: rgba(12, 14, 19, 0.9);
}

.win-prompt-close {
  top: max(18px, env(safe-area-inset-top));
  right: 18px;
  width: 42px;
  height: 42px;
  background: rgba(0, 0, 0, 0.34);
  font-size: 30px;
}

.win-prompt-backdrop {
  min-height: 0;
  align-content: center;
  gap: 14px;
  padding: max(70px, calc(env(safe-area-inset-top) + 58px)) 22px 22px;
  background:
    radial-gradient(circle at 50% 51%, rgba(255, 236, 132, 0.88) 0 7%, rgba(255, 218, 84, 0.44) 17%, transparent 43%),
    linear-gradient(rgba(10, 11, 15, 0.64), rgba(10, 11, 15, 0.86)),
    var(--img-stadium);
  background-size: cover;
  background-position: center;
}

.win-prompt-backdrop span {
  color: #ffffff;
  font-size: clamp(56px, 16vw, 84px);
  line-height: 0.95;
  letter-spacing: 0;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.48);
}

.win-prompt-backdrop strong {
  font-size: clamp(30px, 9vw, 48px);
}

.win-prompt-verify {
  margin: 8px 0 0;
  color: #ffffff;
  font-size: 15px;
  font-weight: 900;
}

.win-prompt-verify b {
  color: #22c45e;
}

.win-prompt-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 0 16px 16px;
}

.win-prompt-actions button {
  min-height: 52px;
  border: 1px solid #15b94e;
  border-radius: 0;
  background: rgba(10, 13, 18, 0.72);
  color: #22c45e;
  font-size: 17px;
  font-weight: 1000;
}

.win-prompt-actions button:last-child {
  background: #18b94f;
  color: #ffffff;
}

.win-prompt-brand {
  display: block;
  padding: 0 0 max(22px, env(safe-area-inset-bottom));
  color: #ffffff;
  text-align: center;
  font-size: 22px;
  font-weight: 1000;
}

@media (max-width: 760px) {
  body.open-bets-mode .account-content.account-popups,
  body.open-bets-mode .account-shell,
  body.open-bets-mode .account-popup-panel.bet-history-panel {
    width: 100%;
    max-width: 100vw;
  }

  body.open-bets-mode .bet-history-topbar {
    min-height: 92px;
    padding: 12px 14px;
  }

  body.open-bets-mode .bet-history-topbar strong {
    min-height: 36px;
    font-size: 15px;
  }

  body.open-bets-mode .bet-history-tabs {
    transform: translateY(-12px);
  }

  body.open-bets-mode .bet-history-tabs button,
  body.open-bets-mode .split-tabs.bet-history-tabs button {
    min-height: 52px;
    gap: 7px;
    font-size: 15px;
    line-height: 1;
    white-space: nowrap;
  }

  body.open-bets-mode .bet-history-tabs button::before {
    width: 18px;
    height: 18px;
  }

  .open-bets-toolbar {
    gap: 6px;
    padding-bottom: 10px;
  }

  .open-bets-toolbar {
    scrollbar-width: none;
  }

  .open-bets-toolbar::-webkit-scrollbar {
    display: none;
  }

  .open-bets-toolbar button {
    min-height: 38px;
    padding: 0 12px;
    font-size: 13px;
    white-space: nowrap;
  }

  .auto-cashout-card {
    min-height: 48px;
    padding: 9px 12px;
    margin-bottom: 10px;
  }

  .auto-cashout-card span {
    font-size: 13px;
  }

  .auto-cashout-card button {
    width: 32px;
    height: 32px;
    font-size: 24px;
  }

  body.open-bets-mode .bet-ticket-body {
    padding: 12px 14px;
  }

  body.open-bets-mode .bet-ticket-status strong {
    font-size: 18px;
  }

  body.open-bets-mode .bet-ticket-status {
    min-height: 30px;
  }

  body.open-bets-mode .bet-ticket-status span {
    font-size: 13px;
  }

  body.open-bets-mode .bet-ticket-matches {
    font-size: 15px;
    padding-top: 8px;
  }

  .bet-ticket-actions {
    min-height: 30px;
    gap: 9px;
    padding-bottom: 7px;
  }

  .bet-ticket-actions button {
    font-size: 12px;
  }

  body.open-bets-mode .bet-ticket-totals {
    padding-top: 8px;
    font-size: 13px;
  }

  body.open-bets-mode .bet-ticket-totals b {
    font-size: 15px;
  }

  body.open-bets-mode .bet-ticket-cashout {
    justify-self: end;
    width: min(150px, 48%);
    min-height: 48px;
    margin-top: 10px;
    font-size: 14px;
    padding: 7px 10px;
  }

  body.open-bets-mode .bet-ticket-cashout b {
    font-size: 14px;
  }
}

@media (max-width: 420px) {
  body.open-bets-mode .bet-history-tabs {
    padding-inline: 12px;
  }

  .open-bets-toolbar,
  body.open-bets-mode .bet-ticket-list {
    padding-inline: 12px !important;
  }

  .auto-cashout-card {
    margin-inline: 12px;
  }

  body.open-bets-mode .bet-ticket-body {
    padding: 14px;
  }

  body.open-bets-mode .bet-ticket-matches,
  body.open-bets-mode .bet-ticket-totals {
    font-size: 15px;
  }

  body.open-bets-mode .bet-ticket-status strong {
    font-size: 19px;
  }

  body.open-bets-mode .bet-ticket-cashout {
    min-height: 50px;
  }
}

.avatar-picker,
.history-filter-row,
.deposit-username-card {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.avatar-picker button {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  border-radius: 50%;
  background: #fff;
  color: #111827;
  font-weight: 900;
}

.avatar-picker button.active {
  border-color: #13a538;
  background: #e9fbe9;
  color: #0a7a2d;
}

.deposit-username-card {
  justify-content: space-between;
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 8px;
  background: #f8fafc;
}

.account-user-card small,
.mobile-me-identity span[id="mobileMeUsername"] {
  color: #596274;
  font-size: 12px;
  font-weight: 800;
}

.mobile-username-card {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 8px;
  background: #fff;
}

.mobile-username-card > span {
  color: #596274;
  font-size: 12px;
  font-weight: 900;
}

.mobile-username-card > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.mobile-username-card input {
  min-width: 0;
  height: 40px;
  border: 1px solid #d3d9e3;
  border-radius: 8px;
  padding: 0 10px;
  font-weight: 900;
}

.mobile-username-card button {
  border: 0;
  border-radius: 8px;
  padding: 0 14px;
  background: #0a9d3f;
  color: #fff;
  font-weight: 900;
}

.deposit-username-card strong {
  font-size: 18px;
  color: #0f172a;
}

.deposit-username-card button,
.history-filter-row button {
  border: 0;
  border-radius: 999px;
  padding: 8px 12px;
  background: #edf2f7;
  color: #0f172a;
  font-weight: 800;
}

.history-filter-row button.active {
  background: #0f172a;
  color: #fff;
}

.support-ticket-item span:last-child {
  white-space: normal;
  line-height: 1.45;
}

.live-tracker-card {
  cursor: pointer;
}

.live-tracker-card:focus-visible {
  outline: 3px solid rgba(19, 165, 56, 0.35);
  outline-offset: 3px;
}

@media (max-width: 560px) {
  .deposit-username-card {
    align-items: flex-start;
    flex-direction: column;
  }

  .history-filter-row {
    justify-content: center;
  }
}

/* Final mobile page arrangement: one compact header on every signed-in screen. */
@media (max-width: 760px) {
  body.is-signed-in .top-shell,
  body.is-signed-in .account-bar {
    min-height: 54px !important;
    height: 54px !important;
    background: #e4142c !important;
  }

  body.is-signed-in .account-bar {
    display: flex !important;
    grid-template-columns: none !important;
    align-items: center !important;
    gap: 7px !important;
    width: 100% !important;
    padding: 6px 9px !important;
    overflow: hidden;
  }

  body.is-signed-in .shell-menu-btn {
    display: none !important;
  }

  body.is-signed-in .brand {
    display: inline-flex !important;
    flex: 0 1 132px !important;
    width: auto !important;
    min-width: 94px !important;
    gap: 6px !important;
    margin: 0 !important;
    color: #ffffff !important;
    font-size: 18px !important;
    white-space: nowrap;
  }

  body.is-signed-in .brand span:last-child::first-letter {
    color: inherit !important;
  }

  body.is-signed-in .brand-mark {
    flex: 0 0 29px !important;
    width: 29px !important;
    height: 32px !important;
    border-radius: 4px !important;
    background: #ffffff !important;
    color: #e4142c !important;
  }

  body.is-signed-in .mobile-top-search {
    display: grid !important;
    flex: 0 0 38px !important;
    width: 38px !important;
    height: 40px !important;
    margin: 0 0 0 auto !important;
  }

  body.is-signed-in .account-state,
  body.is-signed-in #accountState {
    display: flex !important;
    flex: 0 1 132px !important;
    grid-column: auto !important;
    grid-template-columns: none !important;
    align-items: center !important;
    width: auto !important;
    min-width: 94px !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    background: transparent !important;
  }

  body.is-signed-in .account-state[hidden],
  body.is-signed-in #accountState[hidden] {
    display: none !important;
  }

  body.is-signed-in #accessChip,
  body.is-signed-in .account-state #topAccountButton,
  body.is-signed-in .account-state #openDepositTop,
  body.is-signed-in .account-state #logoutBtn {
    display: none !important;
  }

  body.is-signed-in #topBalance,
  body.is-signed-in .account-state .balance {
    display: inline-flex !important;
    flex: 1 1 auto !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 132px !important;
    min-height: 40px !important;
    height: 40px !important;
    padding: 0 9px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.92) !important;
    border-radius: 3px !important;
    background: rgba(87, 0, 15, 0.34) !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.is-signed-in #topBalance::before {
    flex: 0 0 auto;
  }

  .site-view,
  .site-view.active,
  .page,
  .account-shell,
  .account-sidebar,
  .account-content,
  .account-popup-panel {
    min-width: 0;
    max-width: 100%;
  }

  .view-title {
    min-height: 0 !important;
    margin: 0 0 8px !important;
    padding: 14px 16px !important;
    gap: 10px !important;
    border-width: 0 0 1px !important;
    box-shadow: none !important;
  }

  .view-title::after {
    display: none !important;
  }

  .view-title h1,
  .view-hero h1 {
    font-size: 28px !important;
    line-height: 1.05 !important;
  }

  .view-title .eyebrow {
    margin-bottom: 4px !important;
    font-size: 10px !important;
  }

  .view-title > .btn {
    min-height: 40px;
    height: 40px;
    padding-inline: 14px;
  }

  .account-shell {
    gap: 8px !important;
    padding: 0 8px 16px;
  }

  .account-user-card {
    gap: 8px;
    padding: 10px;
  }

  .account-wallet-line {
    min-height: 48px;
    padding: 8px 10px;
  }

  .account-withdrawable-row {
    min-height: 52px;
  }

  .account-side-menu {
    margin-top: 8px;
  }

  .account-side-menu button {
    min-height: 42px;
    padding: 0 10px;
  }

  .mobile-bottom-nav .mobile-nav-sports {
    grid-template-rows: 27px 18px !important;
  }

  .mobile-bottom-nav .mobile-nav-sports span {
    position: static !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    clip-path: none !important;
    white-space: nowrap !important;
  }

  .mobile-slip-panel:not([hidden]),
  .bet-confirm-panel:not([hidden]),
  .ticket-detail-panel:not([hidden]),
  .cashout-success-panel:not([hidden]) {
    width: 100vw !important;
    max-width: 100vw !important;
  }

  body.account-view-active #mobileSlipToggle {
    display: none !important;
  }
}

@media (max-width: 360px) {
  body.is-signed-in .brand {
    flex-basis: 120px !important;
    min-width: 120px !important;
    font-size: 15px !important;
  }

  body.is-signed-in .brand-mark {
    flex-basis: 26px !important;
    width: 26px !important;
    height: 30px !important;
  }

  body.is-signed-in .account-state,
  body.is-signed-in #accountState {
    flex-basis: 118px !important;
  }

  body.is-signed-in #topBalance,
  body.is-signed-in .account-state .balance {
    max-width: 118px !important;
    padding-inline: 7px !important;
    font-size: 11px !important;
  }

  body:not(.is-signed-in) .top-shell .account-bar {
    gap: 4px;
    padding-inline: 6px;
  }

  body:not(.is-signed-in) .top-shell .brand {
    flex: 1 1 auto;
    font-size: 15px;
    gap: 4px;
  }

  body:not(.is-signed-in) .top-shell .brand-mark {
    flex-basis: 26px;
    width: 26px;
    height: 30px;
  }

  body:not(.is-signed-in) .mobile-top-search {
    flex-basis: 32px;
    width: 32px;
  }

  body:not(.is-signed-in) .login-strip {
    gap: 4px;
  }

  body:not(.is-signed-in) .login-strip .btn {
    min-width: 43px;
    padding-inline: 6px;
    font-size: 11px;
  }

  body:not(.is-signed-in) .login-strip #openRegisterTop {
    min-width: 56px;
  }
}

@media (max-width: 760px) {
  .top-shell .brand span:last-child::first-letter {
    color: inherit !important;
  }
}

/* Final winner presentation uses the supplied trophy artwork. */
.win-prompt-panel {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.win-prompt-backdrop {
  position: relative;
  isolation: isolate;
}

.win-prompt-backdrop::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 48%;
  z-index: -1;
  width: min(76vw, 430px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 225, 104, 0.88) 0 4%, rgba(255, 194, 49, 0.42) 18%, rgba(255, 169, 0, 0.08) 44%, transparent 68%);
  filter: blur(2px);
}

.win-prompt-backdrop .arena-cup {
  position: relative;
  display: block;
  width: min(72vw, 340px);
  height: clamp(260px, 49dvh, 470px);
  margin: -4px auto -8px;
  border-radius: 0;
  background: none;
  object-fit: contain;
  box-shadow: none;
  filter: drop-shadow(0 18px 18px rgba(0, 0, 0, 0.62)) drop-shadow(0 0 22px rgba(255, 200, 53, 0.4));
}

.mobile-winner-rail {
  scroll-behavior: smooth;
}

@media (max-width: 420px) {
  .win-prompt-backdrop {
    gap: 8px;
    padding-inline: 16px;
  }

  .win-prompt-backdrop span {
    font-size: clamp(48px, 15vw, 70px);
  }

  .win-prompt-backdrop strong {
    font-size: clamp(28px, 8vw, 40px);
  }

  .win-prompt-backdrop .arena-cup {
    width: min(76vw, 310px);
    height: clamp(240px, 46dvh, 390px);
  }
}

/* Production visual system: consistent typography, borders, spacing, and responsive polish. */
:root {
  --ui-font: "Segoe UI Variable", "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  --ui-canvas: #f4f5f7;
  --ui-surface: #ffffff;
  --ui-surface-subtle: #f8f9fb;
  --ui-text: #17191f;
  --ui-text-soft: #646b76;
  --ui-border: #d9dde4;
  --ui-border-strong: #c5cad3;
  --ui-red: #e9182b;
  --ui-red-dark: #b80f20;
  --ui-green: #0a9b43;
  --ui-green-dark: #087d37;
  --ui-green-soft: #e8f6ec;
  --ui-dark: #171a21;
  --ui-dark-soft: #252a33;
  --ui-gold: #ffc400;
  --ui-shadow-sm: 0 1px 3px rgba(17, 24, 39, 0.08);
  --ui-shadow-md: 0 6px 18px rgba(17, 24, 39, 0.11);
}

html {
  background: var(--ui-canvas);
  font-family: var(--ui-font);
  font-size: 16px;
}

body,
button,
input,
select,
textarea {
  font-family: var(--ui-font);
  font-synthesis: none;
  letter-spacing: 0;
}

body {
  background: var(--ui-canvas);
  color: var(--ui-text);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button,
input,
select,
textarea {
  font-size: 14px;
}

button {
  font-weight: 600;
}

strong,
b {
  font-weight: 700;
}

h1,
h2,
h3,
h4,
.brand,
.hero-copy h1,
.view-title h1,
.panel-head h2,
.register-panel h2,
.sport-detail h2,
.casino-unlock-panel h2,
.match-detail-hero h2 {
  font-family: var(--ui-font);
  font-weight: 750;
  letter-spacing: 0;
}

p,
small,
label {
  letter-spacing: 0;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid rgba(10, 155, 67, 0.28);
  outline-offset: 2px;
}

.page,
.site-view,
.sport-home,
.content-grid,
.market-stack,
.market-panel,
.betslip-panel,
.account-shell,
.account-content,
.account-popup-panel {
  min-width: 0;
  max-width: 100%;
}

.btn {
  min-height: 40px;
  height: 40px;
  padding: 0 15px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  box-shadow: none;
}

.btn:hover {
  transform: none;
  filter: brightness(0.97);
}

.btn:active {
  transform: translateY(1px);
}

.btn:disabled,
.btn.disabled {
  opacity: 0.54;
  filter: grayscale(0.12);
}

.btn-dark {
  background: #111318;
}

.btn-green {
  background: var(--ui-green);
}

.btn-gold {
  background: var(--ui-gold);
  color: #241b00;
}

.phone-wrap,
.phone-wrap.large,
.login-strip > input,
.modal-card input,
.modal-card select,
.modal-card textarea,
.account-login-form input,
.account-form-grid input,
.admin-card input,
.admin-card select,
.admin-card textarea,
.account-deposit-row input,
.account-withdraw-amount,
.mobile-booking-row input,
.stake-box input {
  border: 1px solid var(--ui-border-strong);
  border-radius: 6px;
  background: #ffffff;
  color: var(--ui-text);
  box-shadow: none;
}

.phone-wrap input {
  border-radius: 0 6px 6px 0;
}

.phone-wrap span {
  border-color: var(--ui-border);
}

input::placeholder,
textarea::placeholder {
  color: #8b929d;
  opacity: 1;
}

input:focus,
select:focus,
textarea:focus,
.phone-wrap:focus-within,
.account-withdraw-amount:focus-within {
  border-color: var(--ui-green);
  box-shadow: 0 0 0 3px rgba(10, 155, 67, 0.12);
  outline: 0;
}

.top-shell {
  background: var(--ui-red);
  box-shadow: 0 2px 8px rgba(17, 24, 39, 0.22);
}

.account-bar,
.main-nav {
  background: var(--ui-red);
}

.brand {
  gap: 9px;
  font-size: 27px;
  font-weight: 750;
}

.brand-mark {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  font-weight: 800;
}

.login-strip .btn,
.main-nav a,
.main-nav .time {
  font-weight: 650;
}

.login-strip > a,
.keep {
  font-weight: 500;
}

.main-nav a {
  min-height: 48px;
  padding-inline: 15px;
  font-size: 14px;
}

.main-nav a.active {
  clip-path: none;
  box-shadow: inset 0 -3px 0 var(--ui-red);
}

.market-panel,
.betslip-panel,
.mini-games,
.winners-panel,
.real-match-preview,
.account-user-card,
.account-login-card,
.account-popup-panel,
.summary-card,
.history-card,
.payment-card,
.profile-card,
.admin-card,
.admin-tool-card,
.modal-card {
  border: 1px solid var(--ui-border);
  border-radius: 6px;
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-sm);
}

.panel-head {
  min-height: 54px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--ui-border);
}

.panel-head.dark {
  background: var(--ui-dark);
  border-color: #303641;
}

.panel-head h2 {
  font-size: 24px;
  font-weight: 750;
}

.tab-row button,
.betslip-tabs button,
.segmented button,
.account-tab-strip button,
.split-tabs button,
.mobile-slip-tabs button,
.history-filter-row button {
  font-weight: 650;
}

.odds-header,
.live-odds-header {
  min-height: 38px;
  border-top: 1px solid var(--ui-border);
  border-bottom: 1px solid var(--ui-border);
  background: var(--ui-surface-subtle);
  color: #555d69;
  font-size: 12px;
  font-weight: 650;
}

.match-row {
  border-bottom: 1px solid #e5e8ed;
}

.match-row:last-child {
  border-bottom: 0;
}

.match-info {
  color: var(--ui-text);
  line-height: 1.28;
}

.match-info strong,
.live-match strong,
.team-name-text {
  color: var(--ui-text);
  font-weight: 650;
}

.match-info time,
.match-info small,
.live-match time,
.live-league {
  color: var(--ui-text-soft);
  font-weight: 450;
}

.team-name-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-visual {
  flex: 0 0 20px;
  width: 20px;
  max-width: 20px;
  overflow: hidden;
}

.team-visual img,
.team-visual .team-flag {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.team-visual .team-logo-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #e9edf2;
  color: #20242a;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
}

.team-visual .team-logo {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #ffffff;
}

.odd,
.preview-odd,
.detail-odd {
  min-height: 42px;
  border: 1px solid #b8ddc5;
  border-radius: 5px;
  background: var(--ui-green-soft);
  color: var(--ui-green-dark);
  font-size: 14px;
  font-weight: 750;
  box-shadow: none;
}

.odd:hover,
.preview-odd:hover,
.detail-odd:hover {
  border-color: #7fc696;
  background: #dff2e5;
}

.odd.selected,
.preview-odd.selected,
.detail-odd.selected,
.match-detail-modal .detail-odd.selected {
  border-color: var(--ui-red);
  background: var(--ui-red);
  color: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24);
}

.odd.locked,
.detail-odd.locked,
.preview-odd:disabled {
  border-color: #d0d4db;
  background: #e8ebef;
  color: #727985;
  opacity: 1;
}

.match-row.live-match-row {
  border-color: #343a45;
  background: var(--ui-dark);
}

.match-row.live-match-row .match-info strong,
.match-row.live-match-row .match-info time {
  color: #f5f7fa;
}

.match-row.live-match-row .match-info small {
  color: #aab2be;
}

.match-row.live-match-row .odd {
  border-color: #414956;
  background: #2b313b;
  color: #32d676;
}

.match-row.live-match-row .odd:hover {
  border-color: #5a6574;
  background: #343b47;
}

.match-row.live-match-row .odd.selected {
  border-color: var(--ui-red);
  background: var(--ui-red);
  color: #ffffff;
}

.match-row.live-match-row .odd.locked {
  border-color: #434b57;
  background: #303641;
  color: #aab2bd;
}

.real-preview-head h2,
.mobile-sports-head h2,
.mobile-home-section h2 {
  font-weight: 750;
}

.real-preview-head > div > span,
.eyebrow {
  font-weight: 700;
}

.real-preview-card {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  box-shadow: none;
}

.real-preview-card strong,
.real-preview-card b,
.real-preview-odds .preview-odd span,
.real-preview-odds .preview-odd b {
  font-weight: 700;
}

.betslip-panel h2,
.popup-head strong,
.account-user-card strong,
.mobile-me-identity strong {
  font-weight: 750;
}

.betslip-item,
.mobile-slip-item,
.history-item,
.payment-item,
.transaction-row,
.account-message-list > *,
.ticket-detail-selection {
  border-color: var(--ui-border);
}

.modal::backdrop {
  background: rgba(15, 18, 24, 0.68);
  backdrop-filter: blur(2px);
}

.modal-card {
  overflow: hidden;
}

.modal-card h2 {
  font-size: 22px;
  font-weight: 750;
}

.modal-close {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 50%;
  background: #eef0f3;
  color: #434a55;
  font-size: 18px;
}

.admin-tool-card,
.admin-card {
  color: var(--ui-text);
}

.admin-tool-card strong,
.admin-card h2,
.admin-card h3 {
  font-weight: 750;
}

.admin-helper-text,
.closed-note,
.modal-note,
.account-note-list,
.empty-panel {
  color: var(--ui-text-soft);
  font-weight: 400;
}

@media (min-width: 761px) and (max-width: 1024px) {
  .account-bar {
    min-height: 58px;
    grid-template-columns: minmax(172px, 220px) minmax(0, 1fr);
    gap: 12px;
    padding: 8px 14px;
  }

  .shell-menu-btn,
  .mobile-top-search {
    display: none;
  }

  .brand {
    grid-column: 1;
    grid-row: 1;
    width: auto;
    font-size: 23px;
  }

  .login-strip {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    grid-template-columns: minmax(150px, 1.2fr) minmax(128px, 1fr) 68px 78px;
    gap: 6px;
    justify-content: stretch;
  }

  .login-strip .phone-wrap,
  .login-strip > input,
  .login-strip .btn {
    min-height: 38px;
    height: 38px;
  }

  .login-strip .keep,
  .login-strip > a {
    display: none;
  }

  .account-state {
    grid-column: 2;
    grid-row: 1;
    justify-self: stretch;
    justify-content: flex-end;
  }

  .main-nav {
    padding: 0 16px;
  }

  .page {
    width: 100%;
    padding-inline: 16px;
  }

  .hero-grid {
    grid-template-columns: minmax(0, 1.65fr) minmax(250px, 0.85fr);
    gap: 0;
    width: 100%;
  }

  .arena-hero,
  .register-panel {
    min-height: 270px;
    height: 270px;
  }

  .arena-hero .hero-copy {
    padding: 24px 28px;
  }

  .arena-hero .hero-copy h1 {
    font-size: 36px;
    line-height: 1.02;
  }

  .register-panel {
    padding: 22px 18px;
  }

  .register-panel h2 {
    font-size: 22px;
  }

  .content-grid {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }

  .betslip-panel {
    width: 100%;
  }
}

@media (max-width: 760px) {
  body {
    font-size: 14px;
    line-height: 1.38;
  }

  .top-shell,
  .account-bar {
    min-height: 54px;
  }

  .account-bar {
    padding-inline: 9px;
  }

  .top-shell .brand,
  body.is-signed-in .brand {
    font-size: 18px;
    font-weight: 750;
  }

  .top-shell .brand-mark,
  body.is-signed-in .brand-mark {
    border-radius: 5px !important;
    font-weight: 800;
  }

  .login-strip .btn {
    min-height: 38px;
    height: 38px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 700;
  }

  .mobile-game-rail {
    gap: 7px;
    padding: 8px 8px 6px;
  }

  .mobile-game-rail button {
    border-radius: 6px;
    box-shadow: var(--ui-shadow-sm);
  }

  .mobile-game-rail button span,
  .mobile-quick-actions button span,
  .mobile-promo-tabs button,
  .mobile-feature-tabs button,
  .mobile-content-tabs button {
    font-weight: 650;
  }

  .mobile-quick-actions {
    border-bottom: 1px solid var(--ui-border);
  }

  .mobile-quick-actions button {
    min-width: 0;
  }

  .mobile-promo-tabs {
    background: var(--ui-canvas);
  }

  .mobile-promo-tabs button {
    border-right: 1px solid #e5e8ed;
    background: #ffffff;
    color: #20242a;
  }

  .mobile-promo-tabs button.active {
    color: var(--ui-red);
  }

  .mobile-feature-card,
  .mobile-home-activity,
  .mobile-home-section {
    border-radius: 6px;
  }

  .mobile-feature-card {
    overflow: hidden;
    border: 1px solid #d7a6ad;
    box-shadow: var(--ui-shadow-sm);
  }

  .mobile-feature-copy strong {
    font-size: 22px;
    font-weight: 750;
  }

  .mobile-feature-copy > span,
  .mobile-feature-fixture small {
    font-weight: 600;
  }

  .mobile-feature-copy button {
    min-height: 38px;
    border-radius: 5px;
    font-weight: 700;
  }

  .mobile-feature-fixture {
    border-top: 1px solid var(--ui-border);
  }

  .mobile-feature-fixture .odd {
    min-height: 62px;
    border-radius: 0;
  }

  .mobile-activity-card {
    overflow: hidden;
    border: 1px solid #b83240;
    border-radius: 6px;
    box-shadow: var(--ui-shadow-sm);
  }

  .mobile-activity-copy b {
    font-weight: 750;
  }

  .mobile-home-section {
    border: 1px solid var(--ui-border);
    background: #ffffff;
    box-shadow: var(--ui-shadow-sm);
  }

  .mobile-home-section > header h2 {
    font-size: 19px;
    font-weight: 750;
  }

  .mobile-home-section > header button {
    min-height: 34px;
    border-radius: 5px;
    font-weight: 650;
  }

  .mobile-league-card,
  .mobile-winner-card {
    border-radius: 6px;
  }

  .mobile-league-card strong,
  .mobile-winner-card strong,
  .mobile-winner-card b {
    font-weight: 700;
  }

  .real-match-preview {
    border-radius: 0;
  }

  .real-preview-head h2 {
    font-size: 20px;
  }

  .real-preview-head button {
    border-radius: 5px;
    font-weight: 650;
  }

  .panel-head {
    min-height: 50px;
    padding: 12px 12px 9px;
  }

  .panel-head h2 {
    font-size: 21px;
  }

  .odds-header,
  .live-odds-header {
    min-height: 36px;
    font-size: 12px;
  }

  .match-row {
    min-height: 74px;
  }

  .match-info strong {
    font-size: 13px;
    font-weight: 650;
  }

  .match-info time,
  .match-info small {
    font-size: 11px;
  }

  .match-row .odd,
  .match-row.live-match-row .odd {
    min-height: 48px;
    font-size: 14px;
    font-weight: 750;
  }

  .match-row .more {
    font-weight: 650;
  }

  .mobile-bottom-nav,
  body.is-signed-in .mobile-bottom-nav {
    min-height: 66px;
    height: calc(66px + env(safe-area-inset-bottom));
    border-top: 1px solid #2a2e36;
    box-shadow: 0 -4px 14px rgba(10, 13, 18, 0.18);
  }

  .mobile-bottom-nav a,
  .mobile-bottom-nav button {
    font-size: 11px;
    font-weight: 600;
  }

  .bottom-slip-toggle {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.24);
  }

  .account-popup-panel,
  .modal-card {
    border-radius: 6px;
  }

  .account-side-menu button,
  .mobile-me-list button {
    font-weight: 600;
  }

  .account-withdraw-destination,
  .account-withdraw-provider,
  .account-withdraw-amount {
    border-radius: 6px;
  }

  .bet-confirm-panel,
  .ticket-detail-panel,
  .cashout-success-panel,
  .mobile-slip-panel {
    font-weight: 400;
  }
}

@media (max-width: 380px) {
  .top-shell .brand,
  body.is-signed-in .brand {
    font-size: 16px;
  }

  .mobile-game-rail button span {
    font-size: 11px;
  }

  .mobile-quick-actions button span {
    font-size: 10px;
  }

  .mobile-feature-copy strong {
    font-size: 20px;
  }
}

@media (max-width: 760px) {
  .bet-confirm-panel:not([hidden]) {
    width: auto !important;
    max-width: none !important;
  }

  .match-detail-modal .match-detail-hero .team-name-text {
    color: #ffffff;
  }

  .match-detail-modal .detail-markets {
    align-content: start;
    grid-auto-rows: max-content;
  }

  .match-detail-modal .detail-market-card {
    align-content: start;
    grid-template-rows: auto auto;
    min-height: 0;
  }

  .match-detail-modal .detail-odds-grid {
    align-items: stretch;
    height: auto;
    min-height: 0;
  }

  .match-detail-modal .detail-odd {
    height: auto;
    min-height: 56px;
  }
}

/* Connected authentication and account-security flows */
.auth-modal-card {
  width: min(680px, calc(100vw - 28px));
  max-height: min(90vh, 860px);
  overflow-y: auto;
  border-radius: 8px;
}

.auth-modal-card > h2 {
  margin: 0 0 6px;
  font-size: 24px;
}

.auth-modal-card .modal-note {
  margin: 0 0 18px;
  color: #5f6672;
}

.auth-step {
  display: grid;
  gap: 14px;
}

.auth-step[hidden] {
  display: none !important;
}

.auth-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.auth-step label,
.account-login-form label {
  display: grid;
  gap: 6px;
}

.auth-step label > span,
.account-login-form label > span {
  color: #4d5562;
  font-size: 13px;
  font-weight: 700;
}

.auth-step input,
.account-login-form input {
  width: 100%;
  min-height: 44px;
  border: 1px solid #cfd4dc;
  border-radius: 5px;
  background: #ffffff;
  color: #16191f;
  font: inherit;
  padding: 10px 12px;
}

.auth-step input:focus,
.account-login-form input:focus {
  border-color: #ed1528;
  outline: 2px solid rgba(237, 21, 40, 0.15);
  outline-offset: 1px;
}

.password-field {
  position: relative;
}

.password-field input {
  padding-right: 46px;
}

.password-field > button {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 38px;
  height: 36px;
  border: 0;
  background: transparent;
  color: #58606c;
  cursor: pointer;
}

.auth-consents {
  display: grid;
  gap: 9px;
  padding: 12px;
  border: 1px solid #dfe3e8;
  border-radius: 6px;
  background: #f7f8fa;
}

.auth-consents label,
.remember-device {
  display: flex;
  align-items: flex-start;
  gap: 9px;
}

.auth-consents input,
.remember-device input {
  flex: 0 0 auto;
  width: 17px;
  min-height: 17px;
  margin: 1px 0 0;
}

.auth-consents label > span,
.remember-device > span {
  color: #343a44;
  font-weight: 500;
}

.form-error {
  margin: 0;
  padding: 9px 11px;
  border-left: 3px solid #d9182b;
  background: #fff0f2;
  color: #ad1020;
  font-size: 13px;
  font-weight: 650;
}

.auth-primary {
  width: 100%;
  min-height: 46px;
}

.otp-intro {
  display: grid;
  justify-items: center;
  gap: 7px;
  padding: 16px;
  text-align: center;
  border: 1px solid #e0e3e8;
  border-radius: 6px;
  background: #f7f8fa;
}

.otp-intro i {
  color: #ed1528;
  font-size: 26px;
}

.otp-intro p,
.otp-countdown {
  margin: 0;
  color: #606875;
  font-size: 13px;
}

.auth-step .otp-input {
  text-align: center;
  font-size: 24px;
  font-weight: 750;
  letter-spacing: 6px;
}

.auth-secondary-actions,
.account-login-links {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.auth-secondary-actions button,
.account-login-links button {
  border: 0;
  background: transparent;
  color: #c51022;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.security-sessions {
  margin-top: 18px;
  border-top: 1px solid #e0e3e8;
  padding-top: 16px;
}

.security-sessions-head,
.security-session-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.security-sessions-head > div {
  display: grid;
  gap: 2px;
}

.security-sessions-head span {
  color: #6a717d;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.security-session-list {
  display: grid;
  gap: 8px;
  margin: 12px 0 16px;
}

.security-session-list > p {
  margin: 0;
  color: #68707c;
}

.security-session-list article {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 11px;
  border: 1px solid #dfe3e8;
  border-radius: 6px;
  background: #f8f9fa;
}

.security-session-list article > i {
  color: #c51022;
  font-size: 20px;
  text-align: center;
}

.security-session-list article > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.security-session-list article span,
.security-session-list article small {
  overflow: hidden;
  color: #68707c;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.security-trust-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
}

.security-trust-form label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.security-trust-form label > span {
  color: #4d5562;
  font-size: 13px;
  font-weight: 700;
}

.security-trust-form input {
  width: 100%;
  min-height: 42px;
  border: 1px solid #cfd4dc;
  border-radius: 5px;
  background: #ffffff;
  color: #16191f;
  font: inherit;
  padding: 9px 11px;
}

.security-trust-form .form-error {
  grid-column: 1 / -1;
}

@media (max-width: 760px) {
  .auth-modal-card {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
    padding: 18px 16px;
  }

  .auth-form-grid {
    grid-template-columns: 1fr;
  }

  .auth-step input,
  .account-login-form input {
    font-size: 16px;
  }

  .auth-primary {
    position: sticky;
    bottom: 0;
    z-index: 2;
  }

  .security-sessions-head,
  .security-session-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .security-session-actions .btn {
    width: 100%;
  }

  .security-trust-form {
    grid-template-columns: 1fr;
  }

  .security-trust-form input {
    font-size: 16px;
  }

  .security-trust-form .btn {
    width: 100%;
  }
}