:root {
  /* Exact 1xBet Host Header HSL Tokens */
  --x1-navy-deep: hsl(210, 57%, 17%);     /* #132b45 */
  --x1-navy-main: hsl(210, 57%, 26%);     /* #1c4168 */
  --x1-navy-bar: hsl(208, 61%, 32%);      /* #205583 */
  --x1-blue-btn: hsl(208, 62%, 40%);      /* #276aa6 */
  --x1-blue-light: hsl(208, 100%, 62%);   /* #3da5ff */
  --x1-green: hsl(82, 57%, 43%);          /* #77ac2f */
  --x1-green-hover: hsl(82, 56%, 50%);    /* #88c738 */
  --x1-red: hsl(359, 100%, 67%);          /* #ff575a */

  /* Exact 1xBet __CYBER_APP__ (/en/esports/real/mobile-legends) HSL Tokens */
  --cyber--75-bg: hsl(219, 41%, 7%);      /* #0a1019 */
  --cyber--60-bg: hsl(220, 47%, 11%);     /* #0f1929 - Cyber main workspace bg */
  --cyber--45-bg: hsl(222, 44%, 15%);     /* #152137 - Cyber toolbar, champ header */
  --cyber--40-bg: hsl(221, 45%, 16%);     /* #16243b */
  --cyber--35-bg: hsl(220, 47%, 18%);     /* #182943 - Cyber game cards & market boxes */
  --cyber--25-bg: hsl(220, 43%, 20%);     /* #1d2f49 - Match row hover */
  --cyber--10-bg: hsl(220, 41%, 24%);     /* #243856 */
  --cyber-0-bg: hsl(220, 41%, 27%);       /* #283e61 - Market outcome buttons */
  --cyber-10-bg: hsl(220, 43%, 35%);      /* #334e80 - Inline market buttons */
  --cyber-15-bg: hsl(220, 44%, 39%);      /* #38578f - Market button hover */
  --cyber-sep: hsl(220, 42%, 31%);        /* #2e4870 - Cyber border separator */
  --cyber-primary: hsl(220, 100%, 68%);   /* #5c94ff - Cyber primary accent */
  --cyber-strong: hsl(220, 100%, 79%);    /* #94b8ff */
  --cyber-decent: hsl(222, 20%, 68%);     /* #9da9c4 - Muted text in cyber */
  --cyber-good: hsl(82, 56%, 50%);        /* #88c738 */
  --cyber-bad: hsl(359, 100%, 75%);       /* #ff8082 */

  /* 1xBet Cyber Gradients */
  --cyber-accent-gradient: linear-gradient(135deg, hsl(202, 100%, 62%) 0%, hsl(249, 100%, 71%) 100%);
  --cyber-toggled-gradient: linear-gradient(135deg, hsl(270, 87%, 64%) 0%, hsl(254, 76%, 56%) 50%, hsl(254, 69%, 50%) 100%);

  /* Coupon Light Theme Tokens */
  --x1-champ-head-bg: hsl(209, 31%, 87%);
  --x1-game-bg: #ffffff;
  --x1-market-bg: hsl(207, 26%, 93%);
  --x1-market-hover: hsl(208, 31%, 84%);
  --x1-border-gray: hsl(208, 31%, 81%);
  --x1-text-dark: hsl(210, 57%, 26%);
  --x1-text-mid: hsl(208, 62%, 40%);
  --x1-text-muted: hsl(208, 32%, 52%);

  --gutter: 10px;
  --radius: 8px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
  background-color: var(--cyber--60-bg);
  color: #ffffff;
  font-size: 13px;
  min-height: 100vh;
  overflow-x: hidden;
}

.hidden {
  display: none !important;
}

/* ==================== 1xBET DOUBLE-ROW HEADER ==================== */
.x1-header {
  position: sticky;
  top: 0;
  z-index: 250;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

.x1-header-top {
  background-color: var(--x1-navy-main);
  height: 48px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.x1-header-top__left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.x1-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  flex-shrink: 0;
}

.x1-logo-sub {
  background: var(--cyber-accent-gradient);
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.6px;
}

.x1-top-tools {
  display: flex;
  align-items: center;
  gap: 6px;
}

.x1-tool-btn {
  background: var(--x1-blue-btn);
  border: none;
  color: #ffffff;
  height: 28px;
  padding: 0 10px;
  border-radius: 4px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: background 0.15s;
}

.x1-tool-btn:hover {
  background: #307ec2;
}

.x1-announcement-inline {
  font-size: 11.5px;
  color: #bcd6f0;
  margin-left: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 420px;
}

.x1-header-top__right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.x1-auth-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.x1-btn-accent {
  background: var(--x1-green);
  color: #ffffff;
  border: none;
  height: 30px;
  padding: 0 12px;
  border-radius: 4px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: background 0.15s;
}

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

.x1-btn-blue {
  background: var(--x1-blue-btn);
  color: #ffffff;
  border: none;
  height: 30px;
  padding: 0 12px;
  border-radius: 4px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: background 0.15s;
}

.x1-btn-blue:hover {
  background: #317fc4;
}

.x1-user-bar {
  display: flex;
  align-items: center;
  gap: 6px;
}

.x1-balance-pill {
  background: var(--x1-navy-deep);
  border: 1px solid rgba(255, 255, 255, 0.14);
  height: 30px;
  padding: 0 10px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.x1-balance-label {
  font-size: 10.5px;
  color: #9ec2e6;
}

.x1-balance-val {
  font-weight: 700;
  font-size: 13px;
  color: #ffffff;
}

.x1-id-pill {
  background: var(--x1-navy-bar);
  height: 30px;
  padding: 0 9px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  color: #d6e8fa;
  cursor: pointer;
}

.x1-id-pill:hover {
  background: var(--x1-blue-btn);
  color: #fff;
}

.x1-locale-pill {
  background: var(--x1-navy-bar);
  height: 30px;
  padding: 0 10px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: #d6e8fa;
}

.x1-sep {
  opacity: 0.4;
}

.x1-header-navbar {
  background-color: var(--x1-navy-bar);
  height: 36px;
  padding: 0 12px;
  display: flex;
  align-items: center;
}

.x1-nav-list {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 2px;
  width: 100%;
  overflow-x: auto;
}

.x1-nav-item {
  flex-shrink: 0;
}

.x1-nav-link {
  color: #ffffff;
  text-decoration: none;
  height: 36px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2px;
  border-bottom: 3px solid transparent;
  transition: background 0.12s;
}

.x1-nav-link:hover {
  background: rgba(255, 255, 255, 0.08);
}

.x1-nav-link.active {
  background: rgba(255, 255, 255, 0.12);
  border-bottom-color: hsl(202, 100%, 62%);
}

.x1-nav-admin {
  color: #ffeb3b;
}

.x1-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff4747;
  box-shadow: 0 0 6px #ff4747;
  display: inline-block;
}

.x1-nav-count {
  background: var(--x1-green);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 3px;
}

.x1-nav-count.warn {
  background: var(--x1-red);
}

/* ==================== 1xBET __CYBER_APP__ TOP TOOLBAR ==================== */
.cyber-app-shell {
  background: var(--cyber--60-bg);
  min-height: calc(100vh - 84px);
}

.cyber-toolbar {
  background: var(--cyber--45-bg);
  border-bottom: 1px solid rgba(92, 148, 255, 0.14);
  height: 40px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.cyber-toolbar__left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.cyber-mode-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--cyber--60-bg);
  padding: 3px;
  border-radius: 6px;
}

.cyber-mode-tab {
  background: transparent;
  border: none;
  color: var(--cyber-decent);
  height: 26px;
  padding: 0 12px;
  border-radius: 4px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}

.cyber-mode-tab:hover {
  color: #fff;
}

.cyber-mode-tab.active {
  background: var(--cyber-accent-gradient);
  color: #ffffff;
}

/* 1xBet Cyber Breadcrumbs */
.cyber-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--cyber-decent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cyber-crumb {
  color: var(--cyber-decent);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.12s;
}

.cyber-crumb:hover {
  color: #ffffff;
}

.cyber-crumb.current {
  color: #ffffff;
  font-weight: 700;
  cursor: default;
}

.cyber-crumb-sep {
  opacity: 0.45;
  font-size: 11px;
}

.cyber-toolbar__right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cyber-search-box {
  background: var(--cyber--60-bg);
  border: 1px solid var(--cyber-sep);
  border-radius: 6px;
  height: 30px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--cyber-decent);
  width: 250px;
}

.cyber-search-box input {
  background: transparent;
  border: none;
  color: #ffffff;
  font-size: 12px;
  width: 100%;
}

.cyber-search-box input::placeholder {
  color: var(--cyber-decent);
}

.cyber-search-box input:focus {
  outline: none;
}

/* ==================== 1xBET CYBER 3-COLUMN LAYOUT ==================== */
.x1-layout-container {
  padding: var(--gutter);
  max-width: 1920px;
  margin: 0 auto;
}

.x1-betting-layout {
  display: grid;
  grid-template-columns: 255px 1fr 320px;
  gap: var(--gutter);
  align-items: start;
}

.x1-betting-layout.left-collapsed {
  grid-template-columns: 46px 1fr 320px;
}

.x1-betting-layout.right-collapsed {
  grid-template-columns: 255px 1fr 46px;
}

/* ==================== CYBER LEFT SIDEBAR (cyber-sidebar-left) ==================== */
.cyber-sidebar-left {
  background: var(--cyber--45-bg);
  border: 1px solid rgba(92, 148, 255, 0.12);
  border-radius: var(--radius);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: sticky;
  top: 94px;
}

.cyber-collapse-btn {
  background: var(--cyber--35-bg);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--cyber-decent);
  height: 30px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  transition: all 0.15s;
}

.cyber-collapse-btn:hover {
  background: var(--cyber-0-bg);
  color: #ffffff;
}

.cyber-left-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  background: var(--cyber--60-bg);
  padding: 3px;
  border-radius: 6px;
  gap: 3px;
}

.cyber-left-tab {
  background: transparent;
  border: none;
  color: var(--cyber-decent);
  height: 28px;
  border-radius: 4px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}

.cyber-left-tab:hover {
  color: #fff;
}

.cyber-left-tab.active {
  background: var(--cyber-accent-gradient);
  color: #ffffff;
}

.cyber-discipline-pill {
  background: var(--cyber-accent-gradient);
  border-radius: 6px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-weight: 800;
  font-size: 12.5px;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(61, 184, 255, 0.2);
}

.cyber-discipline-pill__left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cyber-pill-count {
  background: rgba(15, 25, 41, 0.45);
  padding: 2px 7px;
  border-radius: 99px;
  font-size: 11px;
}

.cyber-left-block {
  background: var(--cyber--35-bg);
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.cyber-left-block__head {
  background: var(--cyber--45-bg);
  padding: 8px 10px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--cyber-strong);
  display: flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.cyber-left-list {
  list-style: none;
  display: flex;
  flex-direction: column;
}

.cyber-left-item {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: #dce7f7;
  padding: 8px 10px;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  transition: all 0.12s;
}

.cyber-left-item:hover {
  background: var(--cyber-0-bg);
  color: #ffffff;
}

.cyber-left-item.active {
  background: var(--cyber-0-bg);
  color: #ffffff;
  font-weight: 700;
  box-shadow: inset 3px 0 0 hsl(202, 100%, 62%);
}

.cyber-left-item__left {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
}

.x1-tourney-logo {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
}

.cyber-left-item__name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cyber-left-item__count {
  background: var(--cyber--45-bg);
  color: var(--cyber-strong);
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 99px;
}

.cyber-left-item.active .cyber-left-item__count {
  background: var(--cyber-accent-gradient);
  color: #ffffff;
}

/* ==================== CENTER MAIN COLUMN (2-STAGE CYBER VIEW) ==================== */
.cyber-center-main {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.cyber-discipline {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* 1. Discipline Hero Banner (discipline-banner) */
.discipline-banner {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 112px;
  background: var(--cyber--35-bg);
  border: 1px solid rgba(92, 148, 255, 0.2);
  display: flex;
  align-items: center;
}

.discipline-banner__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
  opacity: 0.85;
}

.discipline-banner__overlay {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 16px 20px;
  background: linear-gradient(90deg, rgba(15, 25, 41, 0.95) 0%, rgba(15, 25, 41, 0.78) 55%, rgba(15, 25, 41, 0.25) 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.discipline-banner__title-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.discipline-banner__icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(40, 62, 97, 0.85);
  border: 1px solid rgba(92, 148, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
}

.discipline-banner__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.discipline-banner__title {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.discipline-banner__sub {
  font-size: 12px;
  color: var(--cyber-strong);
  margin-top: 2px;
}

.discipline-banner__pills {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.cyber-filter-pill {
  background: rgba(24, 41, 67, 0.88);
  border: 1px solid rgba(92, 148, 255, 0.25);
  color: #dce7f7;
  height: 30px;
  padding: 0 12px;
  border-radius: 99px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s;
}

.cyber-filter-pill:hover {
  background: var(--cyber-0-bg);
  color: #fff;
}

.cyber-filter-pill.active {
  background: var(--cyber-accent-gradient);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 2px 10px rgba(61, 184, 255, 0.35);
}

/* Section Block Header (cyber-block-header) */
.cyber-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.cyber-block-header__left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cyber-block-header__icon {
  font-size: 14px;
}

.cyber-block-header__title {
  font-size: 14px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.2px;
}

.cyber-block-header__actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cyber-link-btn {
  background: transparent;
  border: none;
  color: var(--cyber-primary);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  margin-right: 4px;
}

.cyber-link-btn:hover {
  text-decoration: underline;
}

.cyber-slider-nav {
  background: var(--cyber--35-bg);
  border: 1px solid var(--cyber-sep);
  color: #ffffff;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cyber-slider-nav:hover {
  background: var(--cyber-0-bg);
}

.cyber-slider-track {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding-bottom: 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--cyber-0-bg) transparent;
}

/* 2. Top Competitions Card (cyber-champ-card) */
.cyber-champ-card {
  position: relative;
  width: 245px;
  height: 132px;
  flex-shrink: 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(92, 148, 255, 0.22);
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
  background: var(--cyber--35-bg);
}

.cyber-champ-card:hover,
.cyber-champ-card.active {
  transform: translateY(-2px);
  border-color: hsl(202, 100%, 62%);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
}

.cyber-champ-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.72;
}

.cyber-champ-card__container {
  position: relative;
  z-index: 2;
  height: 100%;
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(15, 25, 41, 0.4) 0%, rgba(15, 25, 41, 0.92) 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.cyber-champ-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.cyber-champ-card-header__left {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--cyber-strong);
}

.cyber-champ-card-header__logo {
  width: 22px;
  height: 22px;
  object-fit: contain;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7));
}

.cyber-champ-card__wrapper {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
}

.cyber-champ-card-content__description {
  font-size: 13px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.25;
}

.cyber-champ-card__count {
  background: var(--cyber--45-bg);
  border: 1px solid rgba(92, 148, 255, 0.35);
  color: #ffffff;
  padding: 4px 10px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}

.cyber-champ-card.active .cyber-champ-card__count {
  background: var(--cyber-accent-gradient);
  border-color: transparent;
}

/* 3. Popular Matches Card (cyber-game-card--theme-cyber--35) */
.cyber-game-card {
  width: 290px;
  flex-shrink: 0;
  background: var(--cyber--35-bg);
  border: 1px solid rgba(92, 148, 255, 0.16);
  border-radius: var(--radius);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
  position: relative;
  transition: border-color 0.15s, transform 0.15s;
}

.cyber-game-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 16px;
  right: 16px;
  height: 2px;
  background: var(--cyber-primary);
  border-radius: 0 0 2px 2px;
  opacity: 0.75;
}

.cyber-game-card:hover {
  border-color: var(--cyber-primary);
  transform: translateY(-2px);
}

.cyber-game-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 11px;
  color: var(--cyber-decent);
}

.cyber-game-card-champ {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.cyber-game-card-champ__name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
}

.cyber-game-card__scoreboard {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cyber-game-card-scoreboard-team {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.cyber-game-card-team-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.cyber-team-ico {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--cyber--45-bg);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 2px;
  object-fit: contain;
  flex-shrink: 0;
}

.cyber-game-card-scoreboard-team__name {
  font-size: 12.5px;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cyber-game-card-score {
  background: var(--cyber-0-bg);
  color: #fff;
  font-weight: 800;
  font-size: 11.5px;
  padding: 1px 7px;
  border-radius: 4px;
}

.cyber-game-card-score.is-live {
  background: var(--cyber-good);
  color: #0b1524;
}

.cyber-game-card__info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10.5px;
  color: var(--cyber-decent);
  padding-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.cyber-game-card__markets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 2px;
}

/* 4. Championships & Matches List (dashboard-sport__champs) */
.dashboard-sport__champs {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dashboard-champ {
  background: var(--cyber--35-bg);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(92, 148, 255, 0.14);
}

/* Championship Header (dashboard-champ-header--theme-cyber--45) */
.dashboard-champ-header {
  background: var(--cyber--45-bg);
  min-height: 38px;
  padding: 6px 12px;
  display: grid;
  grid-template-columns: 95px 1fr 370px 54px 32px;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--cyber-sep);
}

.dashboard-champ-name {
  grid-column: 1 / 3;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #ffffff;
  text-decoration: none;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}

.dashboard-champ-name:hover {
  color: var(--cyber-primary);
}

.dashboard-champ-name__icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex-shrink: 0;
}

.dashboard-champ-market-name {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  text-align: center;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--cyber-decent);
}

.dashboard-champ-more-col {
  text-align: center;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--cyber-decent);
}

.dashboard-champ-games {
  list-style: none;
  display: flex;
  flex-direction: column;
}

/* Match Row (dashboard-game) */
.dashboard-game {
  display: grid;
  grid-template-columns: 95px 1fr 370px 54px 32px;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: background 0.12s;
}

.dashboard-game:last-child {
  border-bottom: none;
}

.dashboard-game:hover {
  background: var(--cyber--25-bg);
}

.dashboard-game-timer {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 11px;
  color: var(--cyber-decent);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  padding-right: 8px;
}

.dashboard-game-timer__label {
  font-size: 10.5px;
  color: var(--cyber-decent);
}

.dashboard-game-timer__time {
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
}

/* Clickable Match Scoreboard Cell (dashboard-scoreboard) */
.dashboard-scoreboard {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  text-decoration: none;
  color: #ffffff;
  cursor: pointer;
  min-width: 0;
  padding: 2px 6px;
  border-radius: 6px;
  transition: background 0.12s;
}

.dashboard-scoreboard:hover {
  background: rgba(92, 148, 255, 0.08);
}

.dashboard-scoreboard__teams {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  flex: 1;
}

.dashboard-scoreboard-team {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.dashboard-scoreboard-team__left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.dashboard-scoreboard__team-name {
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-scoreboard:hover .dashboard-scoreboard__team-name {
  color: var(--cyber-strong);
}

.dashboard-scoreboard__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

.dashboard-scoreboard__status {
  font-size: 10.5px;
  color: var(--cyber-decent);
  background: var(--cyber--45-bg);
  padding: 2px 7px;
  border-radius: 4px;
}

/* 1xBet Cyber Inline Market Buttons (ui-market--theme-cyber-10) */
.dashboard-game-markets {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 5px;
}

.ui-market {
  background: var(--cyber-10-bg);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  height: 36px;
  padding: 2px 6px;
  color: #ffffff;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.12s ease;
}

.ui-market:hover:not(:disabled) {
  background: var(--cyber-15-bg);
  border-color: var(--cyber-primary);
}

.ui-market.selected {
  background: var(--cyber-toggled-gradient);
  border-color: hsl(270, 87%, 70%);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(155, 84, 242, 0.45);
}

.ui-market:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.ui-market.locked {
  background: rgba(15, 25, 41, 0.75);
  border-color: rgba(255, 255, 255, 0.08);
  opacity: 0.85;
  cursor: not-allowed;
}

.ui-market.locked svg {
  color: #9ec2e6;
}

.ui-market__param {
  font-size: 9.5px;
  color: var(--cyber-strong);
  line-height: 1.1;
}

.ui-market.selected .ui-market__param {
  color: rgba(255, 255, 255, 0.9);
}

.ui-market__value {
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.2;
}

/* +Markets Button (dashboard-game-more__markets) */
.dashboard-game-more__markets {
  background: var(--cyber-0-bg);
  border: 1px solid var(--cyber-sep);
  border-radius: 6px;
  height: 36px;
  width: 100%;
  color: var(--cyber-strong);
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.12s;
}

.dashboard-game-more__markets:hover {
  background: var(--cyber-accent-gradient);
  border-color: transparent;
  color: #ffffff;
}

.cyber-fav-btn {
  background: transparent;
  border: none;
  color: var(--cyber-decent);
  font-size: 15px;
  cursor: pointer;
  transition: color 0.12s;
}

.cyber-fav-btn:hover,
.cyber-fav-btn.active {
  color: #f59e0b;
}

/* ==================== STAGE 2: MATCH DETAIL & MARKET GRID VIEW (cyber-game) ==================== */
.cyber-game {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 1. Match Header Bar (cyber-game-content__header) */
.cyber-game-content__header {
  background: var(--cyber--45-bg);
  border: 1px solid rgba(92, 148, 255, 0.16);
  border-radius: var(--radius);
  padding: 8px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.cyber-game-header__left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.cyber-back-button {
  background: var(--cyber-0-bg);
  border: 1px solid var(--cyber-sep);
  color: #ffffff;
  height: 30px;
  padding: 0 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  transition: all 0.12s;
}

.cyber-back-button:hover {
  background: var(--cyber-accent-gradient);
  border-color: transparent;
}

.cyber-game-header__title {
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cyber-game-header__right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* 2. 1xBet Match Scoreboard Banner (scoreboard-default / scoreboard--is-line) */
.scoreboard-default {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--cyber--45-bg);
  border: 1px solid rgba(92, 148, 255, 0.24);
  min-height: 196px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.scoreboard-default__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.45;
  filter: saturate(1.15);
}

.scoreboard-default__overlay {
  position: relative;
  z-index: 2;
  padding: 18px 24px;
  background: radial-gradient(circle at center, rgba(21, 33, 55, 0.72) 0%, rgba(15, 25, 41, 0.94) 100%);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.scoreboard-default__top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--cyber-strong);
}

.scoreboard-default__top img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.scoreboard-cyber__row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  max-width: 920px;
  width: 100%;
  margin: 0 auto;
}

.scoreboard-team {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.scoreboard-team--left {
  justify-content: flex-end;
  text-align: right;
}

.scoreboard-team--right {
  justify-content: flex-start;
  text-align: left;
}

.scoreboard-team__info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.scoreboard-team__name {
  font-size: 18px;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 0.2px;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

.scoreboard-team__tag {
  font-size: 11px;
  font-weight: 700;
  color: var(--cyber-decent);
}

.cyber-team-ico--lg {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: rgba(24, 41, 67, 0.92);
  border: 2px solid rgba(92, 148, 255, 0.4);
  padding: 8px;
  object-fit: contain;
  flex-shrink: 0;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}

/* Center Score / Timer Box inside Scoreboard */
.scoreboard-center-info {
  background: rgba(15, 25, 41, 0.88);
  border: 1px solid rgba(92, 148, 255, 0.32);
  border-radius: 10px;
  padding: 12px 22px;
  min-width: 230px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.48);
}

.scoreboard-center-info__head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--cyber-strong);
  letter-spacing: 0.3px;
}

.scoreboard-center-info__starts-tag {
  background: rgba(56, 159, 255, 0.16);
  border: 1px solid rgba(56, 159, 255, 0.4);
  color: #7cc4ff;
  font-size: 9.5px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cyber-countdown {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: 2px 0;
}

.cyber-countdown__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.cyber-countdown__val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 20px;
  font-weight: 900;
  color: #ffffff;
  background: linear-gradient(180deg, rgba(36, 61, 99, 0.95) 0%, rgba(18, 31, 52, 0.96) 100%);
  border: 1px solid rgba(92, 148, 255, 0.42);
  border-radius: 6px;
  min-width: 42px;
  padding: 4px 7px;
  line-height: 1.1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 3px 8px rgba(0, 0, 0, 0.4);
}

.cyber-countdown__lbl {
  font-size: 8.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--cyber-decent);
}

.cyber-countdown__sep {
  font-family: 'JetBrains Mono', monospace;
  font-size: 18px;
  font-weight: 900;
  color: var(--cyber-primary);
  margin-top: -13px;
}

.cyber-mini-countdown {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  color: #7cc4ff;
  background: rgba(56, 159, 255, 0.12);
  border: 1px solid rgba(56, 159, 255, 0.25);
  border-radius: 4px;
  padding: 1px 5px;
  margin-top: 2px;
  width: fit-content;
}

.scoreboard-center-info__time {
  font-size: 24px;
  font-weight: 900;
  color: #ffffff;
  font-family: 'JetBrains Mono', monospace;
  line-height: 1.1;
}

.scoreboard-center-info__date {
  font-size: 12px;
  font-weight: 700;
  color: var(--cyber-strong);
}

.scoreboard-center-info__sub {
  font-size: 10.5px;
  color: var(--cyber-decent);
  margin-top: 2px;
}

.scoreboard-series-score {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 28px;
  font-weight: 900;
  color: #ffffff;
}

.scoreboard-series-score .score-num {
  background: var(--cyber-0-bg);
  padding: 2px 12px;
  border-radius: 6px;
  border: 1px solid rgba(92, 148, 255, 0.35);
}

.scoreboard-series-score .score-num.leading {
  color: var(--cyber-good);
  border-color: var(--cyber-good);
}

/* Live MLBB Telemetry Bar at Bottom of Scoreboard */
.scoreboard-telemetry {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 11.5px;
  color: #dce7f7;
}

.telemetry-pill {
  background: rgba(40, 62, 97, 0.65);
  border: 1px solid rgba(92, 148, 255, 0.22);
  padding: 3px 10px;
  border-radius: 99px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}

/* Related Matches Strip in Same Tournament */
.cyber-related-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.cyber-related-pill {
  background: var(--cyber--35-bg);
  border: 1px solid rgba(92, 148, 255, 0.14);
  border-radius: 6px;
  padding: 6px 10px;
  color: #dce7f7;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.12s;
}

.cyber-related-pill:hover {
  background: var(--cyber-0-bg);
  color: #fff;
}

.cyber-related-pill.active {
  background: var(--cyber-0-bg);
  border-color: hsl(202, 100%, 62%);
  color: #ffffff;
}

.cyber-related-pill img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

/* 3. Match Markets Toolbar (cyber-game-toolbar) */
.cyber-game-toolbar {
  background: var(--cyber--45-bg);
  border: 1px solid rgba(92, 148, 255, 0.16);
  border-radius: var(--radius);
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.cyber-game-toolbar__tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.cyber-mkt-tab {
  background: var(--cyber--35-bg);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--cyber-decent);
  height: 30px;
  padding: 0 12px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.12s;
}

.cyber-mkt-tab:hover {
  background: var(--cyber-0-bg);
  color: #ffffff;
}

.cyber-mkt-tab.active {
  background: var(--cyber-accent-gradient);
  border-color: transparent;
  color: #ffffff;
}

.cyber-game-toolbar__right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cyber-mkt-search {
  background: var(--cyber--60-bg);
  border: 1px solid var(--cyber-sep);
  border-radius: 6px;
  height: 30px;
  padding: 0 10px;
  color: #ffffff;
  font-size: 12px;
  width: 190px;
}

.cyber-mkt-search::placeholder {
  color: var(--cyber-decent);
}

.cyber-mkt-search:focus {
  outline: none;
  border-color: var(--cyber-primary);
}

/* 4. 2-Column Collapsible Market Grid (market-grid--theme-cyber--35) */
.market-grid--theme-cyber--35 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  align-items: start;
}

.cyber-market-box {
  background: var(--cyber--35-bg);
  border: 1px solid rgba(92, 148, 255, 0.14);
  border-radius: var(--radius);
  overflow: hidden;
}

.cyber-market-box__header {
  background: var(--cyber--45-bg);
  padding: 9px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.cyber-market-box__header:hover {
  background: var(--cyber--25-bg);
}

.cyber-market-box__title {
  font-size: 12.5px;
  font-weight: 700;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cyber-market-box__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--cyber-decent);
  font-size: 11px;
}

.cyber-market-box__body {
  padding: 8px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.cyber-market-outcome {
  background: var(--cyber-0-bg);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  height: 36px;
  padding: 0 10px;
  color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  transition: all 0.12s ease;
}

.cyber-market-outcome:hover:not(:disabled) {
  background: var(--cyber-10-bg);
  border-color: var(--cyber-primary);
}

.cyber-market-outcome.selected {
  background: var(--cyber-toggled-gradient);
  border-color: hsl(270, 87%, 70%);
  color: #ffffff;
  box-shadow: 0 2px 10px rgba(155, 84, 242, 0.45);
}

.cyber-market-outcome:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.cyber-market-outcome.locked {
  background: rgba(15, 25, 41, 0.75);
  border-color: rgba(255, 255, 255, 0.08);
  opacity: 0.85;
  cursor: not-allowed;
}

.cyber-market-outcome.locked svg {
  color: #9ec2e6;
}

.cyber-market-outcome__name {
  font-size: 12px;
  color: #dce7f7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cyber-market-outcome.selected .cyber-market-outcome__name {
  color: #ffffff;
  font-weight: 600;
}

.cyber-market-outcome__odd {
  font-size: 12.5px;
  font-weight: 800;
  color: #ffffff;
  flex-shrink: 0;
}

/* ==================== 1xZONE LIVE TV PANEL ==================== */
.cyber-live-tv-panel {
  background: var(--cyber--45-bg);
  border: 1px solid var(--cyber-primary);
  border-radius: var(--radius);
  overflow: hidden;
}

.cyber-live-tv-head {
  background: var(--cyber--35-bg);
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.cyber-live-tv-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.cyber-live-badge {
  background: #e53935;
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 4px;
}

.cyber-stream-name {
  font-weight: 700;
  font-size: 13px;
  color: #fff;
}

.cyber-stream-score {
  background: var(--cyber--60-bg);
  color: #ffeb3b;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
}

.cyber-live-tv-actions {
  display: flex;
  gap: 6px;
}

.cyber-tv-btn {
  background: var(--cyber-0-bg);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.cyber-tv-close {
  background: #c62828;
  border-color: #e53935;
}

.cyber-stream-video-wrap {
  position: relative;
  width: 100%;
  padding-top: 46%;
  background: #000;
}

.cyber-stream-video-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.x1-live-pill {
  background: rgba(229, 57, 53, 0.2);
  color: #ff6b6b;
  font-weight: 800;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid rgba(229, 57, 53, 0.45);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.x1-tv-play-btn {
  background: var(--cyber-0-bg);
  color: var(--cyber-strong);
  border: 1px solid rgba(92, 148, 255, 0.3);
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.x1-tv-play-btn:hover {
  background: var(--cyber-accent-gradient);
  color: #fff;
  border-color: transparent;
}

/* ==================== RIGHT ASIDE: 1xBET COUPON (cyber-sidebar-right) ==================== */
.cyber-sidebar-right {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: sticky;
  top: 94px;
}

.x1-coupon {
  background: #ffffff;
  color: var(--x1-text-dark);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.x1-coupon-top-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--cyber--45-bg);
}

.x1-coupon-top-tab {
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--cyber-decent);
  height: 38px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.x1-coupon-top-tab.active {
  background: var(--cyber--35-bg);
  color: #ffffff;
  border-bottom-color: hsl(202, 100%, 62%);
}

.x1-coupon-badge {
  background: var(--x1-green);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 99px;
}

.x1-coupon-type-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--x1-champ-head-bg);
  border-bottom: 1px solid var(--x1-border-gray);
}

.x1-ctype-tab {
  background: transparent;
  border: none;
  color: var(--x1-text-mid);
  height: 30px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
}

.x1-ctype-tab.active {
  background: #ffffff;
  color: var(--x1-text-dark);
  box-shadow: inset 0 2px 0 var(--x1-blue-btn);
}

.x1-coupon-list {
  max-height: 320px;
  overflow-y: auto;
  padding: 8px;
  background: #f3f6f9;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.x1-coupon-empty {
  text-align: center;
  padding: 26px 12px;
  color: var(--x1-text-muted);
  font-size: 12px;
}

.x1-coupon-item {
  background: #ffffff;
  border: 1px solid var(--x1-border-gray);
  border-left: 3px solid hsl(254, 76%, 56%);
  border-radius: 4px;
  padding: 8px 10px;
}

.x1-coupon-item__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--x1-text-dark);
}

.x1-coupon-del {
  background: transparent;
  border: none;
  color: #8da8c4;
  cursor: pointer;
  font-size: 13px;
}

.x1-coupon-del:hover {
  color: #e53935;
}

.x1-coupon-item__mkt {
  font-size: 10.5px;
  color: var(--x1-text-muted);
  margin: 3px 0 5px;
}

.x1-coupon-item__pick {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--x1-market-bg);
  padding: 4px 8px;
  border-radius: 3px;
}

.x1-coupon-item__pick-name {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--x1-text-dark);
}

.x1-coupon-item__pick-odd {
  font-size: 12px;
  font-weight: 800;
  color: hsl(254, 76%, 52%);
}

.x1-coupon-footer {
  padding: 10px 12px;
  background: #ffffff;
  border-top: 1px solid var(--x1-border-gray);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.x1-coupon-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.x1-coupon-label {
  font-size: 12px;
  color: var(--x1-text-dark);
  font-weight: 600;
}

.x1-coupon-odds-total {
  font-size: 15px;
  font-weight: 900;
  color: var(--x1-blue-btn);
}

.x1-coupon-stake-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.x1-stake-box {
  display: flex;
  align-items: center;
  border: 1px solid var(--x1-border-gray);
  border-radius: 4px;
  overflow: hidden;
  width: 150px;
}

.x1-stake-step {
  background: var(--x1-market-bg);
  border: none;
  width: 28px;
  height: 28px;
  font-weight: 700;
  color: var(--x1-text-dark);
  cursor: pointer;
}

.x1-stake-step:hover {
  background: var(--x1-market-hover);
}

.x1-stake-box input {
  width: 100%;
  height: 28px;
  border: none;
  text-align: center;
  font-weight: 700;
  font-size: 13px;
  color: var(--x1-text-dark);
}

.x1-stake-box input:focus {
  outline: none;
}

.x1-coupon-presets {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
}

.x1-coupon-presets button {
  background: var(--x1-market-bg);
  border: 1px solid var(--x1-border-gray);
  color: var(--x1-text-dark);
  height: 24px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.x1-coupon-presets button:hover {
  background: var(--x1-navy-bar);
  color: #fff;
}

.x1-payout-row {
  background: #f0f7ec;
  border: 1px solid #cce5be;
  padding: 6px 8px;
  border-radius: 4px;
}

.x1-coupon-win-val {
  font-size: 14px;
  font-weight: 900;
  color: var(--x1-green);
}

.x1-btn-place-bet {
  background: var(--x1-green);
  color: #ffffff;
  border: none;
  height: 38px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  cursor: pointer;
  letter-spacing: 0.4px;
  transition: background 0.15s;
}

.x1-btn-place-bet:hover {
  background: var(--x1-green-hover);
}

.x1-coupon-bottom-bar {
  text-align: center;
}

.x1-coupon-clear {
  background: transparent;
  border: none;
  color: var(--x1-text-muted);
  font-size: 11.5px;
  cursor: pointer;
}

.x1-coupon-clear:hover {
  color: #d32f2f;
}

.x1-btn-primary-full {
  width: 100%;
  background: var(--x1-blue-btn);
  color: #fff;
  border: none;
  height: 32px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.cyber-right-widget {
  background: var(--cyber--45-bg);
  border: 1px solid rgba(92, 148, 255, 0.14);
  border-radius: var(--radius);
  overflow: hidden;
}

.cyber-right-widget__head {
  background: var(--cyber--35-bg);
  padding: 8px 10px;
  font-size: 11px;
  font-weight: 800;
  color: var(--cyber-strong);
}

.cyber-right-widget__body {
  padding: 10px;
  font-size: 11.5px;
  color: #c7def4;
}

/* ==================== FULL PAGE VIEWS (MY BETS, WALLET, ADMIN) ==================== */
.x1-page-view {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.x1-page-header {
  background: var(--cyber--45-bg);
  border: 1px solid rgba(92, 148, 255, 0.16);
  border-radius: var(--radius);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.x1-page-header h2 {
  font-size: 17px;
  font-weight: 800;
}

.x1-page-header p {
  font-size: 12px;
  color: var(--cyber-decent);
  margin-top: 2px;
}

.x1-filter-group {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.x1-filter-btn {
  background: var(--cyber--35-bg);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #d6e8fa;
  padding: 7px 13px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.x1-filter-btn.active {
  background: var(--cyber-accent-gradient);
  border-color: transparent;
  color: #fff;
}

.x1-tickets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 10px;
}

.x1-ticket-card {
  background: #ffffff;
  color: var(--x1-text-dark);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--x1-border-gray);
}

.x1-ticket-head {
  background: var(--x1-champ-head-bg);
  padding: 8px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
}

.x1-status-tag {
  font-size: 10.5px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 3px;
  text-transform: uppercase;
}

.x1-status-tag.PENDING { background: #fff3cd; color: #856404; }
.x1-status-tag.WON { background: #d4edda; color: #155724; }
.x1-status-tag.LOST { background: #f8d7da; color: #721c24; }
.x1-status-tag.VOID { background: #e2e3e5; color: #383d41; }

.x1-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(195px, 1fr));
  gap: 8px;
}

.x1-kpi-card {
  background: var(--cyber--35-bg);
  border-left: 4px solid var(--cyber-primary);
  border-radius: var(--radius);
  padding: 12px 14px;
}

.x1-kpi-label {
  font-size: 11px;
  color: var(--cyber-decent);
  text-transform: uppercase;
  font-weight: 700;
}

.x1-kpi-val {
  font-size: 20px;
  font-weight: 900;
  margin-top: 4px;
  color: #fff;
}

.x1-admin-card {
  background: var(--cyber--35-bg);
  border: 1px solid rgba(92, 148, 255, 0.14);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 12px;
}

.x1-admin-card h3 {
  font-size: 14.5px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.form-group label {
  font-size: 11.5px;
  color: #b7d2eb;
  font-weight: 600;
}

.form-group input,
.form-group select {
  background: var(--cyber--60-bg);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  height: 34px;
  padding: 0 10px;
  border-radius: 4px;
  font-size: 12.5px;
}

.data-table-wrap {
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

.data-table th,
.data-table td {
  padding: 9px 10px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.data-table th {
  background: var(--cyber--45-bg);
  color: #d6e8fa;
  font-size: 11px;
  text-transform: uppercase;
}

.qr-thumb {
  width: 54px;
  height: 54px;
  object-fit: contain;
  background: #fff;
  padding: 2px;
  border-radius: 4px;
  cursor: pointer;
  border: 2px solid var(--x1-green);
}

/* ==================== 1xBET MODALS & KHQR CARD ==================== */
.x1-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 16, 25, 0.84);
  z-index: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.x1-modal-box {
  background: var(--cyber--35-bg);
  border: 1px solid var(--cyber-primary);
  border-radius: 8px;
  max-width: 480px;
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  padding: 18px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.65);
}

.x1-modal-box.wide {
  max-width: 860px;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.modal-close {
  background: transparent;
  border: none;
  color: #b7d2eb;
  font-size: 18px;
  cursor: pointer;
}

.khqr-invoice-card {
  background: #ffffff;
  color: #111827;
  border-radius: 12px;
  overflow: hidden;
  max-width: 310px;
  margin: 10px auto;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.khqr-card-header {
  background: #e11d48;
  color: #fff;
  padding: 10px;
  text-align: center;
  font-weight: 900;
  letter-spacing: 1px;
}

.khqr-card-body {
  padding: 14px;
  text-align: center;
}

.khqr-amount-display {
  font-family: 'JetBrains Mono', monospace;
  font-size: 22px;
  font-weight: 800;
  color: #111827;
  margin-bottom: 6px;
}

.khqr-img-box img {
  width: 220px;
  height: 220px;
  display: block;
  margin: 0 auto;
}

.preset-amounts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin: 8px 0;
}

.preset-amt-btn {
  background: var(--cyber--60-bg);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  height: 34px;
  border-radius: 4px;
  font-weight: 700;
  cursor: pointer;
}

.preset-amt-btn:hover {
  background: var(--x1-green);
  border-color: var(--x1-green);
}

/* ==================== TOASTS ==================== */
.x1-toast-container {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 950;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.toast {
  background: var(--cyber--45-bg);
  border-left: 4px solid var(--cyber-primary);
  color: #fff;
  padding: 11px 15px;
  border-radius: 4px;
  font-size: 12.5px;
  font-weight: 600;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55);
}

.toast.success { border-left-color: var(--x1-green-hover); }
.toast.error { border-left-color: var(--x1-red); }
.toast.warn { border-left-color: #ffeb3b; }

/* ==================== MOBILE CLOSE BUTTON IN COUPON ==================== */
.x1-coupon-close-mobile {
  display: none;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  padding: 0;
  line-height: 1;
}

/* ==================== MOBILE FLOATING BET SLIP BAR ==================== */
.mobile-floating-slip {
  position: fixed;
  bottom: 64px;
  left: 10px;
  right: 10px;
  background: linear-gradient(135deg, #1e3a8a, #0b1527);
  border: 1px solid #3b82f6;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.65), 0 0 12px rgba(59, 130, 246, 0.4);
  border-radius: 12px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 998;
  cursor: pointer;
  animation: slipPopIn 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes slipPopIn {
  from { transform: translateY(25px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.mobile-floating-slip__left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mobile-floating-slip__count {
  background: #ffeb3b;
  color: #0b1527;
  font-weight: 900;
  font-size: 12px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mobile-floating-slip__title {
  font-weight: 800;
  color: #fff;
  font-size: 13.5px;
}
.mobile-floating-slip__right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mobile-floating-slip__win {
  color: #4ade80;
  font-weight: 800;
  font-size: 13.5px;
  font-family: 'JetBrains Mono', monospace;
}
.mobile-floating-slip__btn {
  background: #88c738;
  color: #0b1527;
  font-size: 11.5px;
  font-weight: 900;
  padding: 6px 12px;
  border-radius: 6px;
  letter-spacing: 0.5px;
}

/* ==================== MOBILE BOTTOM NAVIGATION BAR ==================== */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 56px;
  background: #091322;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  z-index: 999;
  align-items: center;
  justify-content: space-around;
  padding: 0 4px;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.5);
}
.m-nav-item {
  background: none;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #8da4be;
  font-size: 10px;
  font-weight: 700;
  gap: 3px;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  flex: 1;
}
.m-nav-item.active,
.m-nav-item:active {
  color: #ffeb3b;
}
.m-nav-live-icon {
  position: relative;
  display: inline-flex;
}
.m-nav-live-icon .x1-live-dot {
  position: absolute;
  top: -2px;
  right: -4px;
  width: 7px;
  height: 7px;
}
.m-nav-slip-wrapper {
  position: relative;
  display: inline-flex;
}
.m-nav-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  background: #ffeb3b;
  color: #000;
  font-size: 9.5px;
  font-weight: 900;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.m-nav-deposit-highlight {
  background: #88c738;
  color: #0b1527;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -6px;
  box-shadow: 0 2px 8px rgba(136, 199, 56, 0.5);
}

/* ==================== RESPONSIVE MEDIA QUERIES ==================== */
@media (max-width: 1280px) {
  .x1-betting-layout {
    grid-template-columns: 220px 1fr;
  }
  .cyber-sidebar-right {
    grid-column: 1 / -1;
    position: static;
  }
}

@media (max-width: 960px) {
  body {
    padding-bottom: 64px;
  }
  .mobile-bottom-nav {
    display: flex;
  }
  .x1-top-tools {
    display: none !important;
  }
  .x1-header-top {
    padding: 8px 10px;
    height: auto;
  }
  .x1-header-top__right {
    gap: 6px;
  }
  .x1-locale-pill {
    display: none !important;
  }
  .x1-user-bar {
    gap: 6px;
  }
  .x1-id-pill {
    display: none !important;
  }
  .x1-header-navbar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .x1-header-navbar::-webkit-scrollbar {
    display: none;
  }
  .x1-nav-list {
    display: flex;
    flex-wrap: nowrap;
    white-space: nowrap;
  }

  .x1-betting-layout {
    grid-template-columns: 1fr !important;
    gap: 0;
  }
  .cyber-sidebar-left {
    display: none;
  }
  .cyber-sidebar-right {
    display: none;
  }
  .cyber-sidebar-right.mobile-drawer-open {
    display: block !important;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(4, 9, 18, 0.94);
    backdrop-filter: blur(10px);
    z-index: 1000;
    overflow-y: auto;
    padding: 14px;
  }
  .cyber-sidebar-right.mobile-drawer-open .cyber-collapse-btn {
    display: none;
  }

  /* Responsive Match Card on Phone */
  .dashboard-champ {
    margin-bottom: 12px;
  }
  .dashboard-champ-header {
    display: flex;
    justify-content: space-between;
    padding: 8px 10px;
  }
  .dashboard-champ-market-name,
  .dashboard-champ-more-col {
    display: none !important;
  }
  .dashboard-game {
    display: flex;
    flex-direction: column;
    padding: 12px 10px;
    gap: 10px;
    background: #0f1d30;
    border-radius: 8px;
    margin-bottom: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
  }
  .dashboard-game-timer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding-bottom: 6px;
    font-size: 11px;
    text-align: left;
  }
  .dashboard-game-timer__label,
  .dashboard-game-timer__time {
    display: inline-block;
    margin: 0;
    margin-right: 6px;
  }
  .dashboard-scoreboard {
    padding: 4px 0;
  }
  .dashboard-scoreboard__teams {
    gap: 8px;
  }
  .dashboard-scoreboard-team {
    padding: 6px 8px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 6px;
  }
  .dashboard-scoreboard-team__left {
    gap: 8px;
  }
  .cyber-team-ico {
    width: 26px;
    height: 26px;
    font-size: 11px;
  }
  .dashboard-scoreboard__team-name {
    font-size: 13.5px;
    font-weight: 700;
  }
  .cyber-game-card-score {
    font-size: 15px;
    font-weight: 900;
  }

  /* Mobile Market Odds Buttons: 2 large touch targets */
  .dashboard-game-markets {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .ui-market {
    height: 40px;
    padding: 0 10px;
    font-size: 12px;
  }
  .ui-market__param {
    font-size: 11px;
  }
  .ui-market__value {
    font-size: 13.5px;
    font-weight: 800;
  }
  .dashboard-game-more {
    display: none;
  }
  .dashboard-game-more__markets {
    width: 100%;
    height: 34px;
    font-size: 12px;
    margin-top: 4px;
  }

  /* Stage 2 Scoreboard on Mobile */
  .scoreboard-default {
    padding: 14px 10px;
  }
  .scoreboard-cyber__row {
    grid-template-columns: 1fr;
    gap: 10px;
    text-align: center;
  }
  .scoreboard-team {
    justify-content: center !important;
  }
  .scoreboard-team--right {
    flex-direction: row-reverse;
  }
  .scoreboard-telemetry {
    flex-direction: column;
    gap: 6px;
  }
  .cyber-game-toolbar {
    flex-direction: column;
    gap: 8px;
  }
  .cyber-game-toolbar__tabs {
    overflow-x: auto;
    width: 100%;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .cyber-game-toolbar__tabs::-webkit-scrollbar {
    display: none;
  }
  .cyber-mkt-tab {
    white-space: nowrap;
    font-size: 11px;
    padding: 0 10px;
  }
  .market-grid--theme-cyber--35 {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .cyber-market-outcome {
    min-height: 42px;
  }
  .cyber-market-outcome__name {
    font-size: 12px;
  }
  .cyber-market-outcome__odd {
    font-size: 13.5px;
  }

  /* Admin KPI Grid & Forms */
  .x1-kpi-grid {
    grid-template-columns: 1fr 1fr;
  }
  .form-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .x1-header-top {
    padding: 6px 10px;
  }
  .x1-logo svg {
    width: 98px;
    height: 22px;
  }
  .x1-logo-sub {
    display: none;
  }
  .x1-balance-pill {
    padding: 4px 8px;
    font-size: 11px;
  }
  .x1-balance-val {
    font-size: 12px;
  }
  .x1-btn-accent, .x1-btn-blue {
    padding: 0 8px;
    height: 30px;
    font-size: 11px;
  }
  .x1-modal-box {
    width: calc(100% - 16px);
    padding: 16px 12px;
  }
  .preset-amounts-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .x1-kpi-grid {
    grid-template-columns: 1fr;
  }
}

/* ==================== UX REFINEMENTS (clarity, feedback, a11y, mobile) ==================== */

/* Visible keyboard focus everywhere, without affecting mouse users */
:focus-visible {
  outline: 2px solid var(--x1-blue-light);
  outline-offset: 2px;
}
.x1-coupon :focus-visible {
  outline-color: var(--x1-blue-btn);
}

/* Buttons that were divs keep their original look */
button.x1-balance-pill,
button.x1-id-pill,
button.cyber-discipline-pill,
button.dashboard-champ-name {
  font: inherit;
  text-align: left;
}
button.x1-balance-pill {
  color: inherit;
  cursor: pointer;
  transition: border-color 0.15s;
}
button.x1-balance-pill:hover {
  border-color: var(--x1-blue-light);
}
button.x1-id-pill {
  border: none;
}
button.cyber-discipline-pill {
  width: 100%;
  border: none;
}
button.dashboard-champ-name {
  background: transparent;
  border: none;
  padding: 0;
  font-weight: 700;
  font-size: 13px;
  color: #ffffff;
  min-width: 0;
}
button.dashboard-champ-name span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Low-emphasis header action (log out) */
.x1-btn-ghost {
  background: transparent;
  color: #d6e8fa;
  border: 1px solid rgba(255, 255, 255, 0.2);
  height: 30px;
  padding: 0 12px;
  border-radius: 4px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s;
}
.x1-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.35);
}

.x1-btn-accent:disabled,
.x1-btn-blue:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Close buttons that were rendered empty now show an icon */
.modal-close {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.modal-close:empty::before {
  content: '✕';
}
.modal-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.x1-coupon-del {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  flex-shrink: 0;
  line-height: 1;
}
.x1-coupon-del:empty::before {
  content: '✕';
}
.x1-coupon-del:hover {
  background: #fdecea;
}

/* Header utility pills never wrap; the announcement gives way instead */
.x1-tool-btn {
  white-space: nowrap;
  flex-shrink: 0;
}
.x1-top-tools,
.x1-header-top__left {
  min-width: 0;
}
.x1-announcement-inline {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 1360px) {
  .x1-announcement-inline {
    display: none;
  }
}

/* Section header hint */
.cyber-block-header__hint {
  font-size: 11.5px;
  color: var(--cyber-decent);
  margin-left: 4px;
}

/* Sidebar: competitions without matches recede */
.cyber-left-item.is-empty {
  opacity: 0.55;
}
.cyber-left-item.is-empty:hover,
.cyber-left-item.is-empty.active {
  opacity: 1;
}

/* Match list: columns adapt to the markets a competition actually offers */
.dashboard-champ-header,
.dashboard-game {
  grid-template-columns: 104px 1fr calc(var(--mkt-cols, 6) * 54px) 50px;
}
.dashboard-champ-market-name,
.dashboard-game-markets {
  grid-template-columns: repeat(var(--mkt-cols, 6), 1fr);
}
.dashboard-game-timer {
  position: relative;
  padding-right: 22px;
}
.dashboard-game-timer__pin {
  position: absolute;
  top: 0;
  right: 2px;
}
.dashboard-game-timer__pin .cyber-fav-btn {
  padding: 2px;
}
.dashboard-game-more__markets .more-long {
  display: none;
}
/* Team names get priority; the stage label shrinks instead of squeezing names to one letter */
.dashboard-scoreboard__meta {
  flex-shrink: 1;
  min-width: 0;
  max-width: 34%;
}
.dashboard-scoreboard__status {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dashboard-scoreboard__teams {
  min-width: 90px;
}
.x1-empty-state {
  padding: 36px 24px;
  text-align: center;
}

/* Match detail */
h2.cyber-game-header__title {
  font-size: 14px;
  font-weight: 800;
}
.cyber-countdown__soon {
  font-size: 15px;
  font-weight: 800;
  color: #ffeb3b;
  padding: 6px 0;
}
.x1-inline-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #fcd34d;
  border-radius: var(--radius);
  padding: 9px 12px;
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 10px;
}
.x1-mkt-status {
  font-size: 9.5px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 3px;
  text-transform: uppercase;
  background: #e2e3e5;
  color: #383d41;
}
.x1-mkt-status--OPEN { background: #d4edda; color: #155724; }
.x1-mkt-status--LOCKED { background: #422006; color: #f59e0b; border: 1px solid rgba(245, 158, 11, 0.3); }
.x1-mkt-status--SETTLED { background: rgba(92, 148, 255, 0.18); color: var(--cyber-strong); }
.cyber-market-box.is-settled {
  opacity: 0.75;
}
.cyber-market-outcome.is-winner:disabled {
  opacity: 1;
  border-color: var(--cyber-good);
}
.cyber-market-outcome.is-winner .cyber-market-outcome__name {
  color: var(--cyber-good);
  font-weight: 700;
}
.cyber-market-box__header:focus-visible {
  outline-offset: -2px;
}

/* Bet slip */
.x1-ctype-tab.is-unavailable:not(.active) {
  color: var(--x1-text-muted);
  opacity: 0.6;
}
.x1-coupon-parlay-note {
  font-size: 11px;
  color: var(--x1-text-mid);
  background: #eaf2fb;
  border: 1px dashed var(--x1-border-gray);
  border-radius: 4px;
  padding: 6px 8px;
  text-align: center;
  font-weight: 600;
}
.x1-stake-hint {
  font-size: 11px;
  color: var(--x1-text-muted);
  margin-top: -2px;
}
.x1-stake-hint.is-warning {
  color: #b45309;
  font-weight: 700;
}
.x1-btn-place-bet:disabled {
  background: #b9c7d6;
  cursor: not-allowed;
}
.x1-btn-place-bet:disabled:hover {
  background: #b9c7d6;
}

/* Modals & forms */
.x1-modal-notice {
  background: rgba(61, 165, 255, 0.12);
  border: 1px solid rgba(61, 165, 255, 0.35);
  color: #d6e8fa;
  border-radius: 6px;
  padding: 9px 12px;
  font-size: 12.5px;
  margin-bottom: 12px;
}
.x1-modal-footer-link {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  text-align: center;
  font-size: 12.5px;
  color: #b7d2eb;
}
.x1-modal-footer-link a {
  color: var(--x1-blue-light);
  font-weight: 700;
}
.form-hint {
  font-size: 11px;
  color: var(--cyber-decent);
  line-height: 1.4;
}
.form-optional {
  font-weight: 400;
  color: var(--cyber-decent);
}
.form-error {
  background: rgba(255, 87, 90, 0.12);
  border: 1px solid rgba(255, 87, 90, 0.45);
  color: #ffb3b4;
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 600;
}
.form-group input:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--x1-blue-light);
  box-shadow: 0 0 0 2px rgba(61, 165, 255, 0.25);
}
.x1-field-label {
  font-size: 11.5px;
  font-weight: 600;
  color: #b7d2eb;
}
.preset-amt-btn.active {
  background: var(--x1-green);
  border-color: var(--x1-green);
}
.x1-account-strip {
  background: var(--x1-navy-deep);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.x1-account-strip__label {
  font-size: 10.5px;
  color: #9ec2e6;
}
.x1-account-strip__val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 15px;
  font-weight: 800;
}

/* Step indicator (deposit) */
.x1-steps {
  list-style: none;
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  counter-reset: step;
}
.x1-steps li {
  flex: 1;
  counter-increment: step;
  font-size: 11px;
  font-weight: 600;
  color: var(--cyber-decent);
  padding-top: 6px;
  border-top: 3px solid rgba(255, 255, 255, 0.12);
  text-align: left;
}
.x1-steps li::before {
  content: counter(step) '. ';
}
.x1-steps li.is-current {
  color: #fff;
  border-top-color: var(--x1-blue-light);
}
.x1-steps li.is-done {
  color: var(--x1-green-hover);
  border-top-color: var(--x1-green-hover);
}

/* Payment waiting status */
.x1-pay-status {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  background: var(--x1-navy-deep);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 10px;
  border-radius: 6px;
  margin: 12px 0;
  font-size: 12.5px;
}
.x1-pay-status__timer {
  font-size: 11.5px;
  color: var(--cyber-decent);
}
.x1-pay-status__timer span {
  font-family: 'JetBrains Mono', monospace;
  color: #ffeb3b;
}
.x1-pay-status__spinner {
  width: 12px;
  height: 12px;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-top-color: var(--x1-blue-light);
  border-radius: 50%;
  animation: x1-spin 0.9s linear infinite;
}
.x1-pay-status.is-ended .x1-pay-status__spinner,
.x1-pay-status.is-ended .x1-pay-status__timer {
  display: none;
}
@keyframes x1-spin {
  to { transform: rotate(360deg); }
}
.x1-text-btn {
  padding: 6px;
  color: #9ec2e6;
}
/* The "pay in app" deep link only makes sense on a phone */
@media (pointer: fine) {
  .x1-show-touch {
    display: none !important;
  }
}

/* Wallet */
.x1-wallet-balance {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-left: auto;
}
.x1-wallet-balance__label {
  font-size: 11px;
  color: var(--cyber-decent);
  text-transform: uppercase;
  font-weight: 700;
}
.x1-wallet-balance__val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 22px;
  font-weight: 800;
  color: #88c738;
}
.x1-wallet-balance__val small {
  font-size: 12px;
  color: var(--cyber-decent);
}
.x1-wallet-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.x1-wallet-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.x1-table-empty {
  text-align: center;
  color: #9ec2e6;
  padding: 18px 10px !important;
}
.x1-table-ref {
  font-size: 10.5px;
  color: var(--cyber-decent);
  font-family: 'JetBrains Mono', monospace;
  margin-top: 2px;
}
.x1-loading-card {
  text-align: center;
  color: var(--cyber-decent);
  padding: 32px;
  grid-column: 1 / -1;
}

/* Layering: modals above the floating slip / bottom nav / slip drawer; toasts above everything */
.x1-modal-overlay {
  z-index: 1100;
}
.x1-toast-container {
  z-index: 1200;
}

/* Toasts are dismissible */
.toast {
  cursor: pointer;
  max-width: 380px;
}

@media (max-width: 1280px) {
  .dashboard-champ-header,
  .dashboard-game {
    grid-template-columns: 100px 1fr calc(var(--mkt-cols, 6) * 50px) 46px;
  }
}

@media (max-width: 960px) {
  .x1-hide-mobile {
    display: none !important;
  }
  .cyber-block-header__hint {
    display: none;
  }

  /* Match cards: full-width content instead of centred, squeezed columns */
  .dashboard-game {
    align-items: stretch;
  }
  .dashboard-game-timer {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    padding-right: 0;
    border-right: none;
  }
  .dashboard-game-timer__pin {
    position: static;
    margin-left: auto;
  }
  .dashboard-scoreboard {
    flex-direction: column;
    align-items: stretch;
  }
  .dashboard-scoreboard__meta {
    max-width: none;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .dashboard-game-markets {
    grid-template-columns: repeat(2, 1fr);
  }
  .dashboard-game-markets .ui-market.is-empty {
    display: none;
  }
  .dashboard-game-more {
    display: block;
  }
  .dashboard-game-more__markets .more-short {
    display: none;
  }
  .dashboard-game-more__markets .more-long {
    display: inline;
  }

  /* The bet slip drawer needs a visible way out */
  .cyber-sidebar-right.mobile-drawer-open .x1-coupon-top-tabs {
    grid-template-columns: 1fr 1fr auto;
    align-items: center;
    padding-right: 8px;
  }
  .cyber-sidebar-right.mobile-drawer-open .x1-coupon-close-mobile {
    display: inline-flex;
  }
  .cyber-sidebar-right.mobile-drawer-open .x1-coupon-list {
    max-height: 45vh;
  }

  /* Bigger touch targets in the slip */
  .x1-coupon-presets button {
    height: 32px;
  }
  .x1-stake-step,
  .x1-stake-box input {
    height: 36px;
  }
  .x1-stake-step {
    width: 36px;
  }
  .x1-btn-place-bet {
    height: 44px;
  }

  .x1-wallet-grid {
    grid-template-columns: 1fr;
  }
  .x1-wallet-balance {
    align-items: flex-start;
    margin-left: 0;
  }
  .x1-page-header {
    padding: 12px 14px;
  }
  .x1-tickets-grid {
    grid-template-columns: 1fr;
  }
  .x1-toast-container {
    left: 10px;
    right: 10px;
    bottom: 76px;
  }
  .toast {
    max-width: none;
  }
}

/* Admin: current result + undo */
.x1-admin-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  background: rgba(22, 101, 52, 0.25);
  border: 1px solid rgba(34, 197, 94, 0.4);
  border-radius: 6px;
  padding: 10px 12px;
}
.x1-btn-undo {
  background: #b45309;
  color: #fff;
  border: 1px solid #f59e0b;
  height: 32px;
  padding: 0 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}
.x1-btn-undo:hover {
  background: #d97706;
}

.x1-kpi-sub {
  font-size: 10.5px;
  color: var(--cyber-decent);
  margin-top: 4px;
}

/* ==================== ADMIN PANEL: DESKTOP HOOKS + PHONE LAYOUT ==================== */
.x1-admin-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.x1-admin-2col--wide-right {
  grid-template-columns: 1fr 1.3fr;
}
.form-group--wide {
  grid-column: span 2;
}
.x1-admin-yt-input {
  width: 230px;
}
.x1-custom-mkt-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 0.6fr 1fr 0.6fr auto;
  gap: 6px;
  align-items: center;
}
.x1-admin-collapsible > summary {
  cursor: pointer;
  list-style: none;
}
.x1-admin-collapsible > summary::-webkit-details-marker {
  display: none;
}
.x1-admin-collapsible > summary h3 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.x1-admin-collapsible > summary h3::after {
  content: '▼';
  font-size: 11px;
  color: var(--cyber-decent);
}
.x1-admin-collapsible[open] > summary h3::after {
  content: '▲';
}
.x1-admin-collapsible:not([open]) > summary h3 {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

@media (max-width: 960px) {
  #view-admin {
    min-width: 0;
  }
  #view-admin .x1-page-header h2 {
    font-size: 15px;
  }
  /* Section tabs: one swipeable row instead of a tall block of buttons */
  .x1-admin-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    width: 100%;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .x1-admin-tabs::-webkit-scrollbar {
    display: none;
  }
  .x1-admin-tabs .x1-filter-btn {
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* KPIs: compact, two per row */
  #view-admin .x1-kpi-grid {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  #view-admin .x1-kpi-card {
    padding: 9px 10px;
  }
  #view-admin .x1-kpi-label {
    font-size: 9.5px;
  }
  #view-admin .x1-kpi-val {
    font-size: 15px;
  }
  #view-admin .x1-kpi-sub {
    display: none;
  }

  #view-admin .x1-admin-card {
    padding: 12px;
  }
  #view-admin .x1-admin-card h3 {
    font-size: 13.5px;
  }
  .x1-admin-2col,
  .x1-admin-2col--wide-right {
    grid-template-columns: 1fr;
  }
  .form-group--wide {
    grid-column: auto;
  }
  #view-admin .form-group input,
  #view-admin .form-group select {
    width: 100%;
    min-width: 0;
    height: 40px;
  }
  .x1-custom-mkt-grid {
    grid-template-columns: 1fr 1fr;
  }
  .x1-custom-mkt-grid > input:first-child,
  .x1-custom-mkt-grid > button {
    grid-column: 1 / -1;
  }
  .x1-custom-mkt-grid > * {
    min-width: 0;
    width: 100%;
  }
  /* Cells with several lines (parlay picks, name + ID) stack under their label */
  .data-table--stack td:has(> div + div) {
    display: block;
    text-align: left;
  }
  .data-table--stack td:has(> div + div)::before {
    display: block;
    max-width: none;
    margin-bottom: 4px;
  }
  .data-table--stack td {
    overflow-wrap: anywhere;
  }

  /* Tables become labelled cards */
  .data-table--stack thead {
    display: none;
  }
  .data-table--stack,
  .data-table--stack tbody,
  .data-table--stack tr,
  .data-table--stack td {
    display: block;
    width: 100%;
  }
  .data-table--stack tr {
    background: var(--x1-navy-deep);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 6px 10px;
    margin-bottom: 10px;
  }
  .data-table--stack td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    text-align: right;
    min-width: 0;
  }
  .data-table--stack td:last-child {
    border-bottom: none;
  }
  .data-table--stack td[data-label]::before {
    content: attr(data-label);
    flex-shrink: 0;
    max-width: 42%;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    color: #9ec2e6;
    text-align: left;
    font-family: 'Roboto', sans-serif;
  }
  /* First cell is the card title: full width, no label */
  .data-table--stack td:first-child {
    justify-content: flex-start;
    text-align: left;
    font-size: 13.5px;
  }
  .data-table--stack td:first-child::before {
    display: none;
  }
  .data-table--stack td[colspan] {
    justify-content: center;
    text-align: center;
  }
  .data-table--stack td > div,
  .data-table--stack td > select,
  .data-table--stack td > input {
    min-width: 0;
  }
  .data-table--stack select,
  .data-table--stack .x1-admin-yt-input {
    width: 100%;
    max-width: 62%;
    height: 36px;
  }
  /* Action rows: full-width, easy-to-tap buttons */
  .data-table--stack td:last-child > div {
    flex: 1;
    justify-content: flex-end;
  }
  .data-table--stack td button {
    min-height: 34px;
  }
  /* Cells holding a row of action buttons: label on top, buttons get the full width */
  .data-table--stack td:has(> div > button) {
    flex-direction: column;
    align-items: stretch;
  }
  .data-table--stack td:has(> div > button) > div {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .data-table--stack td:has(> div > button) > div > button {
    flex: 1 1 auto;
  }
  .data-table--stack input[type="number"] {
    height: 34px;
  }
  #view-admin .data-table-wrap {
    overflow-x: visible;
  }
  /* Scrolling list of teams keeps its own height limit */
  #view-admin .data-table-wrap[style*="max-height"] {
    overflow-y: auto;
  }
}

/* ==================== /admin PAGE ==================== */
.x1-admin-back {
  display: none;
  font-size: 12px;
  font-weight: 700;
  color: var(--x1-blue-light);
  text-decoration: none;
  margin-bottom: 6px;
}
.x1-admin-back:hover {
  text-decoration: underline;
}
/* On the admin page, hide the betting navigation so it reads as its own page */
body.is-admin-page .x1-admin-back {
  display: inline-block;
}
body.is-admin-page .x1-header-navbar,
body.is-admin-page .x1-top-tools,
body.is-admin-page .mobile-bottom-nav,
body.is-admin-page #mobile-floating-slip,
body.is-admin-page #cyber-top-toolbar {
  display: none !important;
}
@media (max-width: 960px) {
  body.is-admin-page {
    padding-bottom: 0;
  }
}

#view-admin.is-gated .x1-admin-tabs {
  display: none;
}

.x1-users-summary {
  margin-bottom: 12px;
}
@media (max-width: 960px) {
  #view-admin .x1-users-summary .x1-kpi-sub {
    display: block;
  }
  #view-admin .x1-users-summary .x1-kpi-card:last-child {
    grid-column: 1 / -1;
  }
}

/* ==================== SHARE TIP ==================== */
.x1-coupon-bottom-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.x1-coupon-bottom-bar .x1-coupon-clear:only-child,
.x1-coupon-bottom-bar .hidden + .x1-coupon-clear {
  margin: 0 auto;
}
.x1-btn-share-tip {
  flex: 1;
  height: 32px;
  border-radius: 4px;
  border: 1px solid var(--x1-blue-btn);
  background: #eaf2fb;
  color: var(--x1-blue-btn);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.x1-btn-share-tip:hover:not(:disabled) {
  background: var(--x1-blue-btn);
  color: #fff;
}
.x1-btn-share-tip:disabled {
  opacity: 0.6;
  cursor: wait;
}
.x1-coupon-item__note {
  margin-top: 4px;
  font-size: 10.5px;
  font-weight: 700;
  color: #b45309;
}

/* "Have a tip code?" box at the bottom of the bet slip */
.x1-tip-loader {
  padding: 10px 12px 12px;
  background: #f0f4f8;
  border-top: 1px solid var(--x1-border-gray);
}
.x1-tip-loader__label {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--x1-text-dark);
  margin-bottom: 6px;
}
.x1-tip-loader__row {
  display: flex;
  gap: 6px;
}
.x1-tip-loader__row input {
  flex: 1;
  min-width: 0;
  height: 32px;
  border: 1px solid var(--x1-border-gray);
  border-radius: 4px;
  padding: 0 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--x1-text-dark);
  background: #fff;
}
.x1-tip-loader__row input::placeholder {
  font-family: 'Roboto', sans-serif;
  letter-spacing: 0;
  font-weight: 400;
  text-transform: none;
  color: var(--x1-text-muted);
}
.x1-tip-loader__row input:focus {
  outline: none;
  border-color: var(--x1-blue-btn);
  box-shadow: 0 0 0 2px rgba(39, 106, 166, 0.2);
}
.x1-tip-loader__row .x1-btn-blue {
  height: 32px;
  flex-shrink: 0;
}
.x1-tip-loader__error {
  margin-top: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #c62828;
}

/* "Your Tip Is Ready" modal */
.x1-tip-ready__hint {
  font-size: 12.5px;
  color: #d6e8fa;
  text-align: center;
  line-height: 1.5;
}
.x1-tip-code {
  margin: 16px auto;
  padding: 14px 10px;
  max-width: 280px;
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: 8px;
  color: #ffeb3b;
  background: var(--x1-navy-deep);
  border: 2px dashed rgba(255, 235, 59, 0.45);
  border-radius: 8px;
  user-select: all;
}
.x1-tip-ready__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
.x1-tip-ready__actions button {
  height: 40px;
  font-size: 13px;
}

/* Loaded tip review */
.x1-modal-notice--warn {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.45);
  color: #fcd34d;
}
.x1-tip-picks {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.x1-tip-pick {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--x1-navy-deep);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  padding: 9px 10px;
}
.x1-tip-pick__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 900;
  color: #fff;
  background: var(--x1-green);
}
.x1-tip-pick--warn .x1-tip-pick__icon { background: #d97706; }
.x1-tip-pick--bad .x1-tip-pick__icon { background: #c62828; }
.x1-tip-pick--bad {
  opacity: 0.75;
  border-color: rgba(239, 68, 68, 0.35);
}
.x1-tip-pick__body {
  flex: 1;
  min-width: 0;
}
.x1-tip-pick__match {
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
}
.x1-tip-pick__sel {
  font-size: 11.5px;
  color: #b7d2eb;
  margin-top: 2px;
}
.x1-tip-pick__reason {
  font-size: 11px;
  font-weight: 700;
  color: #fcd34d;
  margin-top: 3px;
}
.x1-tip-pick--bad .x1-tip-pick__reason { color: #ffb3b4; }
.x1-tip-pick__odds {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 800;
  font-size: 13px;
  color: #ffeb3b;
  white-space: nowrap;
}
.x1-tip-pick__odds s {
  color: var(--cyber-decent);
  font-weight: 500;
  margin-right: 4px;
}
.x1-tip-pick__live {
  font-size: 9.5px;
  font-weight: 800;
  color: #fff;
  background: #dc2626;
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 4px;
}
@media (max-width: 960px) {
  .x1-tip-loader__row input,
  .x1-tip-loader__row .x1-btn-blue,
  .x1-btn-share-tip {
    height: 38px;
  }
}
/* Desktop: the sticky bet slip column scrolls on its own when it's taller than the screen,
   so the bottom of a long slip (Share Tip, tip code box) is always reachable */
@media (min-width: 1281px) {
  .cyber-sidebar-right {
    max-height: calc(100vh - 104px);
    overflow-y: auto;
    scrollbar-width: thin;
  }
}

/* ==================== NOTIFICATIONS (bell + panel) ==================== */
.x1-bell {
  position: relative;
  width: 32px;
  height: 30px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: var(--x1-navy-deep);
  color: #d6e8fa;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.15s, color 0.15s;
}
.x1-bell:hover,
.x1-bell[aria-expanded="true"] {
  border-color: var(--x1-blue-light);
  color: #fff;
}
.x1-bell__badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 99px;
  background: var(--x1-red);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 17px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--x1-navy-main);
}
.x1-notif-panel {
  position: fixed;
  top: 52px;
  right: 12px;
  width: 360px;
  max-height: min(520px, calc(100vh - 70px));
  display: flex;
  flex-direction: column;
  background: var(--cyber--35-bg);
  border: 1px solid var(--cyber-primary);
  border-radius: 8px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
  z-index: 1050;
  overflow: hidden;
}
.x1-notif-panel__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: var(--cyber--45-bg);
}
.x1-notif-panel__head strong {
  font-size: 13.5px;
  margin-right: auto;
}
.x1-link-btn {
  background: transparent;
  border: none;
  color: var(--x1-blue-light);
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
}
.x1-link-btn:disabled {
  color: var(--cyber-decent);
  cursor: default;
}
.x1-notif-panel__close {
  background: transparent;
  border: none;
  color: #b7d2eb;
  font-size: 14px;
  width: 26px;
  height: 26px;
  border-radius: 4px;
  cursor: pointer;
}
.x1-notif-panel__close:hover {
  background: rgba(255, 255, 255, 0.1);
}
.x1-notif-list {
  list-style: none;
  overflow-y: auto;
  flex: 1;
}
.x1-notif-item {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.x1-notif-item:hover {
  background: var(--cyber--25-bg);
}
.x1-notif-item.is-unread {
  background: rgba(61, 165, 255, 0.07);
}
.x1-notif-item__icon {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 900;
  color: #fff;
  background: var(--x1-blue-btn);
}
.x1-notif-item--success .x1-notif-item__icon { background: var(--x1-green); }
.x1-notif-item--warn .x1-notif-item__icon { background: #d97706; }
.x1-notif-item__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.x1-notif-item__title {
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
}
.x1-notif-item__text {
  font-size: 11.5px;
  color: #b7d2eb;
  line-height: 1.4;
}
.x1-notif-item__time {
  font-size: 10.5px;
  color: var(--cyber-decent);
}
.x1-notif-item__dot {
  width: 8px;
  height: 8px;
  margin-top: 5px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--x1-blue-light);
}
.x1-notif-empty {
  padding: 28px 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--cyber-decent);
}
.x1-notif-empty strong {
  color: #fff;
  font-size: 13px;
}
.x1-notif-panel__foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: var(--cyber--45-bg);
  font-size: 11.5px;
  color: #d6e8fa;
  cursor: pointer;
}
@media (max-width: 960px) {
  .x1-notif-panel {
    top: 0;
    right: 0;
    left: 0;
    width: auto;
    max-height: calc(100vh - 64px);
    border-radius: 0 0 10px 10px;
  }
  .x1-bell {
    width: 34px;
    height: 32px;
  }
}

/* ==================== ADMIN ACTIVITY LOG ==================== */
.x1-admin-log-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.x1-admin-log-head h3 {
  margin: 0;
  padding: 0;
  border: none;
}
.x1-admin-log-tools {
  display: flex;
  gap: 6px;
}
.x1-admin-log-tools select {
  background: var(--cyber--60-bg);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  height: 30px;
  padding: 0 8px;
  border-radius: 4px;
  font-size: 12px;
}
.x1-log-tag {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 3px;
  white-space: nowrap;
  background: rgba(92, 148, 255, 0.18);
  color: var(--cyber-strong);
}
.x1-log-tag--warn {
  background: rgba(245, 158, 11, 0.15);
  color: #fcd34d;
}
.x1-log-tag--money {
  background: rgba(136, 199, 56, 0.15);
  color: #a3e635;
}

/* ==================== ADMIN: PLAYERS, WITHDRAWAL QUEUE, SETTINGS ==================== */
.x1-admin-settings {
  max-width: 640px;
}
.x1-admin-search {
  background: var(--cyber--60-bg);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  height: 32px;
  padding: 0 10px;
  border-radius: 4px;
  font-size: 12.5px;
  min-width: 220px;
}
.x1-admin-search:focus,
.x1-admin-textarea:focus,
.x1-player-adjust input:focus {
  outline: none;
  border-color: var(--x1-blue-light);
}
.x1-admin-textarea {
  width: 100%;
  background: var(--cyber--60-bg);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  padding: 8px 10px;
  border-radius: 4px;
  font: inherit;
  font-size: 12.5px;
  resize: vertical;
}

/* Player profile */
.x1-player-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.x1-player-stats > div {
  background: var(--x1-navy-deep);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 9px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.x1-player-stats span {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: #9ec2e6;
}
.x1-player-stats strong {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  color: #fff;
}
.x1-player-stats em {
  font-style: normal;
  font-size: 10.5px;
  color: var(--cyber-decent);
}
.x1-player-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.x1-player-actions button {
  height: 34px;
}
.x1-player-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 10px;
  margin-bottom: 12px;
}
.x1-player-box {
  background: var(--x1-navy-deep);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 10px;
  min-width: 0;
}
.x1-player-box h4 {
  font-size: 12.5px;
  margin-bottom: 8px;
}
.x1-player-adjust {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.x1-player-adjust input {
  background: var(--cyber--60-bg);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  height: 32px;
  padding: 0 8px;
  border-radius: 4px;
  font-size: 12.5px;
  min-width: 0;
}
.x1-player-adjust input[type="number"] {
  width: 110px;
}
.x1-player-adjust input[type="text"] {
  flex: 1;
  min-width: 140px;
}
.x1-player-note-form {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  margin-bottom: 8px;
}
.x1-player-note-form .x1-btn-blue {
  height: 34px;
  flex-shrink: 0;
}
.x1-player-notes {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 160px;
  overflow-y: auto;
}
.x1-player-notes li {
  font-size: 12px;
  color: #d6e8fa;
  border-left: 3px solid var(--x1-blue-btn);
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 0 4px 4px 0;
  overflow-wrap: anywhere;
}
.x1-player-notes li > div {
  white-space: pre-wrap;
}
.x1-player-notes li span {
  display: block;
  font-size: 10.5px;
  color: var(--cyber-decent);
  margin-top: 2px;
}
.x1-player-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.x1-temp-password {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: rgba(136, 199, 56, 0.1);
  border: 1px solid rgba(136, 199, 56, 0.45);
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 12px;
}
.x1-temp-password > div {
  flex: 1;
  min-width: 200px;
}
.x1-temp-password code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #ffeb3b;
  background: var(--x1-navy-deep);
  padding: 6px 10px;
  border-radius: 4px;
  user-select: all;
}

/* Withdrawal queue */
.x1-queue-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 24px;
  padding: 0 6px;
  border-radius: 99px;
  background: var(--cyber--10-bg);
  font-weight: 900;
  font-size: 12px;
  color: #fff;
}
.x1-queue-first .x1-queue-no {
  background: var(--x1-green);
}
.x1-queue-first td {
  background: rgba(136, 199, 56, 0.06);
}
.x1-wait {
  font-weight: 700;
  font-size: 12px;
  color: #d6e8fa;
}
.x1-wait.is-slow {
  color: #fcd34d;
}
.x1-wait.is-late {
  color: #ff8082;
}

@media (max-width: 960px) {
  .x1-player-stats {
    grid-template-columns: 1fr 1fr;
  }
  .x1-player-stats > div:first-child {
    grid-column: 1 / -1;
  }
  .x1-player-grid {
    grid-template-columns: 1fr;
  }
  .x1-admin-search {
    min-width: 0;
    width: 100%;
  }
  .x1-player-note-form {
    flex-direction: column;
    align-items: stretch;
  }
  .x1-player-actions button {
    flex: 1;
  }
}

/* Admin: small select used in the match table (auto-close) */
.x1-admin-select {
  background: var(--x1-navy-deep);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 5px;
  border-radius: 4px;
  font-size: 12px;
}

/* Custom market row: inputs may shrink so the Add button always fits */
.x1-custom-mkt-grid > * {
  min-width: 0;
}
.x1-custom-mkt-grid > input {
  width: 100%;
}

/* Football rows: phones show W1 / X / W2 in one line; handicap and totals live in the match view */
@media (max-width: 960px) {
  .dashboard-game-markets.is-football {
    grid-template-columns: repeat(3, 1fr);
  }
  .dashboard-game-markets .ui-market.is-extra {
    display: none;
  }
}

/* Outside Telegram: players are sent to the Mini App (the admin panel still works in a browser) */
body.is-telegram-gate { overflow: hidden; }
.x1-tg-gate {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: radial-gradient(circle at 50% 0%, #1d3a66 0%, #0b1424 60%);
}
.x1-tg-gate__card {
  width: 100%;
  max-width: 420px;
  text-align: center;
  color: #fff;
}
.x1-tg-gate__logo {
  font-size: 44px;
  font-weight: 900;
  font-style: italic;
  letter-spacing: -1px;
  margin-bottom: 18px;
}
.x1-tg-gate__logo span { color: #3db8ff; }
.x1-tg-gate h1 { font-size: 22px; margin: 0 0 10px; }
.x1-tg-gate p { font-size: 14px; line-height: 1.55; color: #b7c9e6; margin: 0 0 22px; }
.x1-tg-gate__btn {
  display: block;
  padding: 14px 18px;
  border-radius: 10px;
  background: #2aabee;
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  text-decoration: none;
}
.x1-tg-gate__btn:hover { background: #229ed9; }
.x1-tg-gate__soon { padding: 12px; border-radius: 10px; background: rgba(255,255,255,0.06); color: #b7c9e6; font-size: 13px; }
.x1-tg-gate__admin { display: inline-block; margin-top: 22px; font-size: 12px; color: #6f86a8; }

/* ==================== MT ALL: full-screen maintenance notice ==================== */
body.mt-locked { overflow: hidden; }
#mt-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: radial-gradient(circle at 50% 0%, #3b2a0b 0%, #0b1424 62%);
  color: #fff;
  text-align: center;
  overscroll-behavior: contain;
}
#mt-overlay .mt-card { width: 100%; max-width: 420px; }
#mt-overlay .mt-icon { font-size: 64px; line-height: 1; margin-bottom: 14px; animation: mt-pulse 2.4s ease-in-out infinite; }
#mt-overlay .mt-logo { font-size: 30px; font-weight: 900; font-style: italic; letter-spacing: -1px; margin-bottom: 14px; }
#mt-overlay .mt-logo span { color: #3db8ff; }
#mt-overlay h1 { margin: 0 0 10px; font-size: 26px; color: #fbbf24; }
#mt-overlay p { margin: 0 0 14px; font-size: 15px; line-height: 1.55; color: #d6e2f5; }
#mt-overlay .mt-reason { margin: 0 auto 14px; padding: 10px 14px; border-radius: 10px; background: rgba(251, 191, 36, 0.12); border: 1px solid rgba(251, 191, 36, 0.4); color: #fde68a; font-weight: 700; }
#mt-overlay .mt-safe { color: #86efac; font-weight: 700; }
#mt-overlay .mt-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 6px; }
#mt-overlay .mt-link, #mt-overlay .mt-admin { border: 0; border-radius: 10px; padding: 11px 14px; font: inherit; font-weight: 800; font-size: 14px; cursor: pointer; color: #fff; background: #2aabee; }
#mt-overlay .mt-admin { margin-top: 18px; background: transparent; border: 1px solid rgba(255, 255, 255, 0.3); color: #cbd5e1; font-weight: 600; }
@keyframes mt-pulse { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
@media (prefers-reduced-motion: reduce) { #mt-overlay .mt-icon { animation: none; } }

/* No double-tap zoom anywhere in the Mini App (taps still work instantly) */
html, body, button, a, input, select, textarea, label, [role="button"] { touch-action: manipulation; }