:root{
  /* Darker, higher-contrast palette like the reference */
  --bg:#111214;
  --bg2:#141618;

  --panel:#0b1018;
  --panel2:#0a0f16;

  --stroke:#1a2433;          /* thin borders */
  --stroke2:#243246;         /* hover border */

  --text:#eef2f8;
  --muted:#98a6bd;

  --accent:#f0c040;          /* warm yellow */
  --accent2:#d2ab39;

  --live:#f04444;

  --radius:14px;
  --radius-lg:18px;

  --shadow: 0 16px 42px rgba(0,0,0,.55);
  --shadow-soft: 0 10px 28px rgba(0,0,0,.35);
  --page-fixed-max: 1920px;
  --topbar-height: 35px;
}

*{box-sizing:border-box}
html,body{
  height:100%;
  font-family: Inter, system-ui, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
}
/* Slim scrollbars */
*{
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
*::-webkit-scrollbar{
  width:6px;
  height:6px;
}
*::-webkit-scrollbar-track{
  background: transparent;
}
*::-webkit-scrollbar-thumb{
  background: rgba(120,125,135,.25);
  border-radius: 999px;
}
*::-webkit-scrollbar-button{
  display:none;
  width:0;
  height:0;
}
body:not(.is-scrolling) *::-webkit-scrollbar-thumb{
  background: transparent;
}
body.is-scrolling *{
  scrollbar-color: rgba(120,125,135,.25) transparent;
}
body{
  margin:0;
  color:var(--text);

  background: var(--bg);
}

a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
.muted{color:var(--muted)}

.wrap{
  width: min(100%, var(--page-fixed-max));
  max-width: var(--page-fixed-max);
  margin:0 auto;
  padding: calc(var(--topbar-height) + 8px) 36px 42px;
}

/* ===== Topbar ===== */
.topbar{
  position:fixed;
  top:0;
  left:0;
  right:0;
  width:100%;
  z-index:10;
  background: linear-gradient(180deg, #14171b 0%, #0f1216 100%);
  border-bottom:1px solid rgba(255,255,255,.06);
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.topbar__inner{
  width: min(100%, var(--page-fixed-max));
  max-width: var(--page-fixed-max);
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:18px;
  padding: 0 24px;
  height:var(--topbar-height);
}
.topbar__logo{
  display:inline-flex;
  align-items:center;
  padding-right:6px;
  margin-left:18px;
}
.topbar__logo img{
  height:30px;
  width:auto;
  display:block;
}

.brand{display:flex;align-items:center;gap:10px;min-width:44px}
.brand--compact{min-width:auto}
.brand__mark{
  width:26px;height:26px;
  border-radius:8px;
  background: linear-gradient(145deg, rgba(242,201,76,1), rgba(242,201,76,.35));
  box-shadow: 0 10px 18px rgba(242,201,76,.12);
}
.brand__text{display:flex;gap:8px;align-items:baseline}
.brand__name{font-weight:800;font-size:15px;letter-spacing:.2px}
.brand__sub{color:var(--muted);font-weight:700;font-size:14px}

.navLeft{
  display:flex;
  align-items:center;
  gap:0;
  flex-wrap:nowrap;
  font-size:11px;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:#ffffff;
  font-weight:500;
  margin-left:16px;
}
.navLeft__item{
  display:inline-flex;
  align-items:center;
  height:35px;
  color:inherit;
  text-decoration:none;
  padding:0 18px;
  transition:background .18s ease;
}
.navLeft__item:hover{
  color:#ffffff;
  background:#2a2f36;
}

.topbar__spacer{flex:1}

.navRight{
  display:flex;
  align-items:center;
  gap:22px;
  flex-wrap:nowrap;
  font-size:11px;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:#ffffff;
  font-weight:500;
}
.navRight__item{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:inherit;
  text-decoration:none;
  position:relative;
  z-index:0;
}
.navRight__item::before{
  content:"";
  position:absolute;
  top:-8px;
  bottom:-8px;
  left:-10px;
  right:-10px;
  background:#1f242b;
  border-radius:2px;
  opacity:0;
  transition:opacity .18s ease;
  pointer-events:none;
  z-index:-1;
}
.navRight__item:first-of-type{
  margin-right:7px;
}
.navRight__item:hover{
  color:#ffffff;
}
.navRight__item:hover::before{
  opacity:1;
}
.support{position:relative;display:inline-flex;align-items:center}
.support__toggle{
  border:none;
  background:transparent;
  font:inherit;
  text-transform:inherit;
  letter-spacing:inherit;
  color:inherit;
  position:relative;
  z-index:0;
}
.support__toggle::before{
  content:"";
  position:absolute;
  top:-8px;
  bottom:-8px;
  left:0;
  right:0;
  background:#1f242b;
  border-radius:2px;
  opacity:0;
  transition:opacity .18s ease;
  pointer-events:none;
  z-index:-1;
}
.support__toggle:hover::before{
  opacity:1;
}
.support.is-open .support__toggle{
  color:#ffffff;
}
.support.is-open .support__toggle::before{
  opacity:1;
}
.support__menu{
  position:absolute;
  top:calc(100% + 4px);
  left:0;
  right:auto;
  min-width:148px;
  border:1px solid rgba(42,49,58,.95);
  background:#1e232a;
  box-shadow: 0 10px 18px rgba(0,0,0,.35);
  display:none;
  z-index:30;
}
.support.is-open .support__menu{display:block}
.support__item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  color:#ffffff;
  text-decoration:none;
  font-size:12px;
  line-height:1.2;
  text-transform:none;
  letter-spacing:0;
  border-bottom:1px solid rgba(58,65,75,.9);
}
.support__item:first-child{background:#252b33}
.support__item:hover{background:#252b33}
.support__item:last-child{border-bottom:none}
.support__item--ask{
  color:#f0f3f8;
  border-top:1px solid rgba(58,65,75,.9);
}
.support__icon{
  width:15px;
  height:15px;
  border-radius:999px;
  border:1px solid rgba(179,179,179,.9);
  color:#b3b3b3;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  line-height:1;
  flex:0 0 auto;
}
.navImg{
  width:16px;
  height:16px;
  display:block;
  object-fit:contain;
  opacity:.95;
}
.navImg--icon{
  width:16px;
  height:16px;
}
.navDivider{
  width:1px;
  height:16px;
  background: #757575;
}
.navIcon{
  width:26px;
  height:26px;
  border:none;
  background: transparent;
  color:#e7ebf2;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  opacity:.9;
}
.navIcon:hover{opacity:1}
.navLang{
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:26px;
  padding:0 8px;
  border:none;
  background: transparent;
  color:#ffffff;
  font-size:12px;
  font-weight:500;
  cursor:pointer;
}
.navBtn{
  height:24px;
  padding:0 10px;
  border-radius:2px;
  font-size:12px;
  font-weight:500;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  text-transform:none;
}
.navBtn + .navBtn{
  margin-left:-13px;
}
.navBtn--ghost{
  color:#ffffff;
  background: rgba(255, 255, 255, 0.158);
}
.navBtn--ghost:hover{background:#242a31}
.navBtn--accent{
  color:#ffffff;
  background:#d42a28;
}
.navBtn--accent:hover{background:#e04646}

.lang{position:relative;display:inline-flex;align-items:center}
.lang__globe{font-size:13px;margin-right:6px}
.lang__code{font-weight:900}
.lang__menu{
  position:absolute;
  top: calc(100% + 8px);
  right:0;
  min-width: 120px;
  padding:6px;
  border-radius: 10px;
  border:1px solid rgba(27,38,56,.9);
  background: #0a0d12;
  box-shadow: 0 12px 24px rgba(0,0,0,.45);
  display:none;
  z-index:20;
}
.lang.is-open .lang__menu{display:block}
.lang__item{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  padding:8px 10px;
  border-radius:8px;
  border:1px solid transparent;
  background: transparent;
  color: var(--text);
  font-size:12px;
  font-weight:800;
  letter-spacing:.4px;
  text-transform:uppercase;
  cursor:pointer;
}
.lang__item:hover{
  background: rgba(12,17,26,.6);
  border-color: rgba(35,50,74,.95);
}
.lang__item.is-active{
  color: var(--text);
  border-color: rgba(242,201,76,.55);
  background: rgba(242,201,76,.10);
}

/* legacy header styles below may remain unused */

/* ===== Buttons ===== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 14px;
  border-radius: 12px;
  border:1px solid rgba(26,36,51,.95);
  background: rgba(11,16,24,.55);
  cursor:pointer;
  transition: background .15s ease, border-color .15s ease, transform .06s ease;
  user-select:none;
  font-weight:700;
  font-size:13.5px;
}
.btn:not(.btn--accent):hover{
  background: rgba(12,17,26,.65);
  border-color: rgba(35,50,74,.95);
}
.btn:active{transform: translateY(1px)}

.btn--ghost{
  background: rgba(11,16,24,.35);
  color:#ffffff;
}
.btn--accent{
  background: linear-gradient(180deg, rgba(209,42,48,1), rgba(170,26,32,1));
  border-color: rgba(209,42,48,.65);
  color:#ffffff;
  font-weight:900;
  box-shadow: inset 0 0 0 0 rgba(0,0,0,0);
  transition: box-shadow .32s ease-out, border-color .32s ease-out, color .32s ease-out;
}
.btn--accent:hover{
  background: linear-gradient(180deg, rgba(209,42,48,1), rgba(170,26,32,1));
  border-color: rgba(209,42,48,.65);
  color:#ffffff;
  box-shadow: inset 0 0 0 999px rgba(0,0,0,.14);
  transform:none;
}
.btn--accent:active{
  transform:none;
}
.btn--lg{
  padding:11px 16px;
  border-radius: 13px;
}
.btn--compact{
  padding:7px 10px;
  border-radius: 10px;
  font-size:11.5px;
  letter-spacing:.3px;
  text-transform:uppercase;
  font-weight:700;
}

/* ===== Hero ===== */
.hero{margin-top:18px}
.hero--banner{
  margin-top:0;
  margin-left:-36px;
  margin-right:-36px;
  width: calc(100% + 72px);
}
.hero__banner{
  position:relative;
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:10px;
  border-radius: 0;
  border:none;
  background:
    radial-gradient(600px 320px at 30% 40%, rgba(120,20,20,.55), transparent 60%),
    linear-gradient(90deg, rgba(18,8,12,.95), rgba(10,12,18,.9));
  box-shadow: none;
  overflow:hidden;
  min-height: 450px;
}
.hero__content{
  padding:54px 32px 36px;
  padding-left:64px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.hero__kickerLine{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius: 999px;
  border:1px solid rgba(26,36,51,.95);
  background: rgba(7,10,15,.45);
  color: var(--muted);
  font-weight:700;
  font-size:12.5px;
}
.pill--muted{opacity:.98}

.dot{
  width:8px;height:8px;border-radius:99px;display:inline-block;
  background: rgba(154,169,193,.65);
}
.dot--live{
  background: var(--live);
  box-shadow: 0 0 0 4px rgba(240,68,68,.14);
}

.hero__title{
  margin:8px 0 4px;
  font-size:54px;
  line-height:1.1;
  letter-spacing:-.2px;
  font-weight:700;
  color:#ffffff;
}
.hero__desc{
  margin:0;
  color:#ffffff;
  font-size:18px;
  line-height:1.55;
  max-width:44ch;
  min-height:24px;
}
.hero__cta{display:flex;gap:12px;margin-top:auto;margin-bottom:36px;flex-wrap:wrap}
.hero__controls{
  display:flex;
  align-items:center;
  gap:18px;
  margin-top:0;
}
.hero__counter{
  display:flex;
  align-items:baseline;
  gap:4px;
  color: #e6ebf4;
}
.hero__count{
  font-size:19px;
  font-weight:600;
  letter-spacing:.6px;
}
.hero__total{
  font-size:14px;
  font-weight:500;
  color: rgba(210,215,225,.75);
}
.hero__nav{display:flex;gap:8px}
.hero__navBtn{
  width:34px;height:34px;
  border-radius:999px;
  border:1px solid hsla(0, 0%, 100%, 0.397);
  background: rgba(238, 238, 238, 0);
  color: hsla(0, 0%, 100%, 0.452);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.hero__navIcon{
  font-size:22px;
  line-height:1;
  display:block;
  position:relative;
  top:-1px;
}
.hero__cta .btn{
  border-radius: 4px;
  width:200px;
  height:52px;
  padding:0;
  font-size: 20px;
  font-weight: 500;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#d42a28;
}
.hero__navBtn:hover{
  border-color: rgba(255,255,255,.3);
  background: rgba(7,10,15,.55);
}
.hero__art{
  position:relative;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:12px 18px;
  background-position: right bottom;
  background-size: auto 130%;
  background-repeat: no-repeat;
}
.mini{
  min-width: 150px;
  border:1px solid rgba(26,36,51,.95);
  border-radius: 14px;
  background: rgba(7,10,15,.35);
  padding:6px 12px;
}
.mini__label{color:var(--muted);font-size:12px;font-weight:700}
.mini__value{font-weight:900;margin-top:4px;font-size:13px}

/* ===== Sport + Events ===== */
.sportEvents{
  margin-top:32px;
  margin-left:8px;
  border-radius: 22px;
  border:none;
  background: #202328;
  box-shadow: none;
  padding:28px 30px 65px;
}
.sportsTop{
  display:block;
  padding:0;
}
.sportbar{
  margin-top:0;
  border-radius: 0;
  border:none;
  background: transparent;
  box-shadow: none;
  padding:0;
}
.sportbar__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.sportbar__title{
  font-family: Inter, system-ui, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
  font-weight:700;
  font-size:30px;
}
.sportbar__search{
  position:relative;
  display:inline-flex;
  align-items:center;
  width:260px;
  height:40px;
  gap:6px;
  color: #b3b3b3;
  font-size:14px;
  padding:0 10px;
  border-radius:6px;
  border:none;
  background: #2a2f36;
}
.sportbar__searchIcon{
  position:absolute;
  left:10px;
  width:16px;
  height:16px;
  object-fit:contain;
  opacity:1;
  filter: grayscale(1) brightness(1.35);
}
.sportbar__searchInput{
  width:100%;
  height:100%;
  border:none;
  outline:none;
  background:transparent;
  color:#ffffff;
  font-size:14px;
  padding:0 10px 0 32px;
}
.sportbar__searchInput::placeholder{
  color:#b3b3b3;
}
.sportbar__trackWrap{
  position:relative;
}
.sportbar__track{
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  gap:10px;
  overflow-x:auto;
  overflow-y:hidden;
  padding-bottom:6px;
  margin-top:25px;
  scrollbar-width: none;
}
.sportbar__track::-webkit-scrollbar{
  height:0;
}
.sportbar__card{
  position:relative;
  border-radius: 10px;
  border:none;
  text-decoration:none;
  color:inherit;
  background:
    var(--sport-image),
    linear-gradient(rgb(112, 129, 153) 0%, rgb(71, 84, 102) 100%);
  width:clamp(220px, calc((100vw - 180px) / 6), 260px);
  flex: 0 0 clamp(220px, calc((100vw - 180px) / 6), 260px);
  flex-shrink:0;
  padding:6px 12px;
  min-height:110px;
  height:110px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:flex-start;
  gap:2px;
  overflow:hidden;
  background-color: rgb(71, 84, 102);
  background-repeat: no-repeat;
  background-position: right 0 center;
  background-size: auto 100%;
  cursor:pointer;
}
.sportbar__card--live{
  background:
    var(--sport-image),
    linear-gradient(to bottom, #D74A48 0%, #C43441 50%, #AF1E3A 100%);
  border-color: rgba(220,90,90,.85);
  background-color: #c23a3a;
  background-repeat: no-repeat;
  background-position: right 0 center;
  background-size: auto 104%;
}
.sportbar__nav{
  display:flex;
  justify-content:flex-end;
  gap:6px;
  margin-top:8px;
}
.sportbar__navBtn{
  width:22px;height:22px;
  border-radius:999px;
  border:1px solid hsla(0, 0%, 100%, 0.438);
  background: rgba(24,28,34,.9);
  color: hsla(0, 0%, 100%, 0.356);
  font-size:14px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.sportbar__navBtn:hover{
  border-color: hsla(0, 0%, 100%, 0.72);
  color: hsla(0, 0%, 100%, 0.88);
}
.sportbar__label{
  font-weight:600;
  font-size:18px;
  color:#ffffff;
}
.sportbar__sub{
  color:#ffffff;
  font-size:13.5px;
  opacity:1;
}
.sportbar__card--live .sportbar__label{
  font-size:18px;
  font-weight:900;
  color:#ffffff;
}
.sportbar__card--live .sportbar__sub{
  font-size:13.5px;
  color: rgba(255,255,255,.85);
}
.topEvents{
  margin-top:26px;
}
.topEvents__head{
  display:flex;
  align-items:center;
  gap:10px;
}
.topEvents__title{
  font-weight:700;
  font-size:18px;
  color:#ffffff;
}
.topEvents__badge{
  display:inline-flex;
  align-items:center;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(80,85,95,.6);
  background: rgba(22,26,32,.8);
  color:#ffffff;
  font-size:11px;
  font-weight:600;
}
.topEvents__link{
  margin-left:auto;
  color: rgba(210,215,225,.8);
  font-size:12px;
  text-decoration:none;
}

.topIcons{
  display:flex;
  gap:12px;
  align-items:flex-start;
  margin-top:10px;
  flex-wrap:nowrap;
}
.topIcons__item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  background: transparent;
  border:none;
  color: rgba(200,205,215,.7);
  font-size:11px;
  cursor:pointer;
}
.topIcons__icon{
  width:22px;
  height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:6px;
  background: rgba(255,255,255,.06);
  color: rgba(200,205,215,.9);
  font-size:12px;
}
.topIcons__item.is-active{
  color:#ffffff;
}
.topIcons__item.is-active .topIcons__icon{
  background: rgba(255,255,255,.15);
  color:#ffffff;
}
.topIcons__label{
  font-size:11px;
}

.topEvents__cards{
  margin-top:12px;
  display:flex;
  gap:12px;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width: none;
}
.topEvents__cards::-webkit-scrollbar{
  height:0;
}
.eventMini{
  flex: 0 0 220px;
  width:220px;
  height:72px;
  border-radius:10px;
  background: rgba(24,28,34,.9);
  border:1px solid rgba(60,66,76,.5);
  padding:10px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:6px;
}
.eventMini__title{
  font-size:12px;
  color:#ffffff;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.eventMini__meta{
  font-size:11px;
  color: rgba(200,205,215,.75);
}

/* ===== Events ===== */
.events{margin-top:14px}
.controls{margin-top:12px}

/* ===== Sections ===== */
.section{
  margin-top:16px;
  border-radius: 16px;
  border:1px solid rgba(26,36,51,.95);
  background: rgba(11,16,24,.6);
  box-shadow: var(--shadow-soft);
  padding:14px;
}
.section__head{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
}
.section__title{font-weight:900}
.section__more{
  margin-left:auto;
  color: rgba(255, 255, 255, 0.64);
  text-decoration:none;
  font-size:14px;
  font-weight:400;
  white-space:nowrap;
  padding-bottom:3px;
}
.section__more:hover{
  color:#81aee4;
}
.section__tabs{display:flex;gap:8px;margin-left:6px}
.section__tab{
  background: transparent;
  border:1px solid transparent;
  color: var(--muted);
  font-weight:800;
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  cursor:pointer;
}
.section__tab.is-active{
  color: var(--text);
  border-color: rgba(26,36,51,.95);
  background: rgba(7,10,15,.35);
}

/* ===== Promo ===== */
.promo--ref{
  padding: 36px 30px 70px;
  background: #202328;
  border: none;
  margin-left: 8px;
  margin-top: 28px;
  border-radius: 22px;
}
.promo--ref .section__head{
  align-items: baseline;
  gap: 16px;
  margin-top: 0;
  margin-bottom: 18px;
}
.promo--ref .section__title{
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  color: #e6e6e6;
  letter-spacing: 0.35px;
  text-shadow: 0 0 6px rgba(230, 230, 230, 0.12);
  transition: color .16s ease, text-shadow .16s ease;
}
.promo--ref .section__title--tab{
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  outline: none;
}
.promo--ref .section__title--tab:not(.is-active){
  color: #b3b3b3c0;
  text-shadow: 0 0 6px rgba(179, 179, 179, 0.12);
}
.promo--ref .section__tabs{
  margin-left: 0;
}
.promo--ref .section__tab{
  border: none;
  background: transparent;
  padding: 0;
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  color: #b3b3b3c0;
  letter-spacing: 0.35px;
  text-shadow: 0 0 6px rgba(179, 179, 179, 0.12);
  transition: color .16s ease, text-shadow .16s ease;
  cursor: pointer;
  outline: none;
}
.promo--ref .section__title:hover{
  color: #f0f0f0;
  text-shadow: 0 0 8px rgba(240, 240, 240, 0.18);
}
.promo--ref .section__tab:hover{
  color: #d2d2d2;
  text-shadow: 0 0 8px rgba(210, 210, 210, 0.18);
}
.promo--ref .section__tab.is-active{
  color: #e6e6e6;
  text-shadow: 0 0 6px rgba(230, 230, 230, 0.12);
}
.promo--ref .is-hidden{
  display: none !important;
}
.promo__track{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(285px, calc((100vw - 160px) / 3), 340px);
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.promoCard{
  width: clamp(285px, calc((100vw - 160px) / 3), 340px);
  min-height: 184px;
  height: 184px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  position: relative;
  overflow: hidden;
}
.promoCard::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(10, 14, 21, 0.45) 0%, rgba(10, 14, 21, 0.2) 42%, rgba(10, 14, 21, 0.04) 68%, rgba(10, 14, 21, 0) 100%);
  z-index: 1;
}
.promoCard--welcome{
  background-image: url("./assets/main/Приветственный бонус.jpg");
  background-size: cover;
  background-position: 100% center;
  background-repeat: no-repeat;
}
.promoCard--market{
  background-image: url("./assets/main/Бонус-маркет.webp");
  background-size: cover;
  background-position: 80% center;
  background-repeat: no-repeat;
}
.promoCard--vip{
  background-image: url("./assets/main/Вип кешбек.jpg");
  background-size: cover;
  background-position: 100% center;
  background-repeat: no-repeat;
}
.promoCard--welcome::before,
.promoCard--vip::before{
  display: none;
}
.promoCard__content,
.promoCard__action{
  position: relative;
  z-index: 2;
}
.promoCard__content{
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 220px;
}
.promoCard__name{
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: #e4e5e7cb;
}
.promoCard__title{
  font-size: 16px;
  font-weight: 800;
  line-height: 1.25;
  color: #ffffff;
}
.promoCard__subtitle{
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  color: #a2a9b5;
}
.promoCard__subtitle--meta{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.promoCard--market .promoCard__subtitle--meta{
  font-size: 11px;
}
.promoCard__subtitle--meta svg{
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  color: rgba(255, 255, 255, 0.64);
}
.promoCard__action{
  width: 120px;
  min-width: 120px;
  height: 32px;
  border-radius: 6px;
  border: 0.8px solid #b9c0ca;
  background: transparent;
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.promoCard__action:hover{
  background: rgba(255, 255, 255, 0.08);
}
.promoTournaments{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(290px, calc((100vw - 160px) / 3), 345px);
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.promoTournamentCard{
  width: clamp(290px, calc((100vw - 160px) / 3), 345px);
  min-height: 184px;
  height: 184px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  position: relative;
  overflow: hidden;
  padding: 12px 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #ffffff;
  background-image: var(--tournament-bg);
  background-size: cover;
  background-position: 100% center;
  background-repeat: no-repeat;
  cursor: pointer;
}
.promoTournaments__nav{
  margin-top: 8px;
}
.promoTournamentCard::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(9, 12, 19, 0.66) 0%, rgba(9, 12, 19, 0.34) 42%, rgba(9, 12, 19, 0.1) 70%, rgba(9, 12, 19, 0.02) 100%);
  z-index: 1;
}
.promoTournamentCard::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 62px;
  background: linear-gradient(
    to top,
    rgba(2, 4, 7, 0.34) 0%,
    rgba(8, 12, 18, 0.11) 46%,
    rgba(8, 12, 18, 0.03) 78%,
    rgba(8, 12, 18, 0) 100%
  );
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 1;
  pointer-events: none;
}
.promoTournamentCard > *{
  position: relative;
  z-index: 2;
}
.promoTournamentCard__status{
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 12px;
  font-weight: 500;
  text-transform: none;
  color: #ffffffb7;
  background: rgb(102, 163, 25);
  border: 1px solid rgb(102, 163, 25);
  border-radius: 999px;
  padding: 2px 8px;
}
.promoTournamentCard__kind{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
}
.promoTournamentCard__kind svg{
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
}
.promoTournamentCard__label{
  margin-top: 2px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.64);
}
.promoTournamentCard__prize{
  font-size: 24px;
  line-height: 1.05;
  letter-spacing: 0.3px;
  font-weight: 900;
  color: rgb(214, 188, 131);
  margin-top: 1px;
  margin-bottom: auto;
  white-space: nowrap;
}
.promoTournamentCard__stats{
  display: flex;
  gap: 6px;
}
.promoTournamentCard__stats span{
  border-radius: 8px;
  border: none;
  background: rgba(255, 255, 255, 0.14);
  height: 46px;
  padding: 5px 8px 6px;
  font-size: 11px;
  line-height: 1.05;
  color: rgba(255, 255, 255, 0.64);
  font-weight: 500;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.promoTournamentCard__stats span:nth-child(1){
  flex: 0 0 92px;
}
.promoTournamentCard__stats span:nth-child(2){
  flex: 0 0 88px;
}
.promoTournamentCard__stats span:nth-child(3){
  flex: 0 0 110px;
  margin-left: auto;
}
.promoTournamentCard__stats b{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 3px;
  font-size: 14px;
  line-height: 1;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  width: 100%;
}
.promoTournamentCard__stats span:nth-child(3) b{
  font-size: 14px;
}
.promoTournamentCard__stats span:nth-child(1) b::before{
  content: "";
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 18 18'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M12.119 6.175A3.155 3.155 0 0 1 8.962 9.35a3.155 3.155 0 0 1-3.157-3.175A3.154 3.154 0 0 1 8.962 3a3.154 3.154 0 0 1 3.157 3.175M8.962 15c-2.574 0-4.77-.408-4.77-2.04s2.182-2.055 4.77-2.055c2.573 0 4.77.408 4.77 2.04S11.55 15 8.963 15m4.506-8.768c0 .898-.268 1.735-.738 2.43a.12.12 0 0 0 .08.184q.177.03.362.035c1.233.032 2.339-.765 2.644-1.966.453-1.784-.876-3.386-2.568-3.386q-.275.001-.532.055c-.023.006-.048.016-.061.037-.016.026-.005.06.012.083.508.716.8 1.59.8 2.528m2.04 3.902c.829.163 1.373.495 1.599.979.19.396.19.856 0 1.252-.345.749-1.458.99-1.89 1.051-.09.014-.162-.064-.152-.154.22-2.075-1.537-3.06-1.991-3.286-.02-.01-.024-.025-.022-.035.002-.007.01-.017.024-.02.984-.018 2.042.118 2.433.213M4.829 8.881q.185-.004.362-.035a.12.12 0 0 0 .08-.183 4.32 4.32 0 0 1-.738-2.431c0-.938.293-1.812.802-2.528.016-.023.027-.057.012-.083-.014-.02-.04-.032-.062-.037a2.6 2.6 0 0 0-.532-.055c-1.692 0-3.021 1.602-2.568 3.386.305 1.2 1.412 1.998 2.644 1.966m.12 1.06c.002.01-.002.025-.021.036-.455.226-2.213 1.21-1.992 3.285.01.09-.062.168-.151.155-.433-.062-1.545-.303-1.89-1.052a1.44 1.44 0 0 1 0-1.252c.225-.483.77-.816 1.597-.979.392-.095 1.449-.23 2.433-.212.015.002.022.013.024.019' clip-rule='evenodd'/%3E%3C/svg%3E");
}
.promoTournamentCard__stats span:nth-child(2) b::before{
  content: "";
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 17 16'%3E%3Cpath fill='%23fff' d='M8.166 12.167h-1.5c-.733 0-1.333.6-1.333 1.333v.167h-.667c-.273 0-.5.226-.5.5 0 .273.227.5.5.5h8c.274 0 .5-.227.5-.5 0-.274-.226-.5-.5-.5H12V13.5c0-.733-.6-1.333-1.334-1.333h-1.5V10.64q-.25.028-.5.027-.25.002-.5-.027z'/%3E%3Cpath fill='%23fff' d='M12.987 7.76c.44-.167.826-.44 1.133-.747.62-.686 1.027-1.506 1.027-2.466s-.754-1.714-1.714-1.714h-.373a2.66 2.66 0 0 0-2.394-1.5h-4c-1.053 0-1.96.614-2.393 1.5H3.9c-.96 0-1.713.754-1.713 1.714s.406 1.78 1.026 2.466c.307.307.694.58 1.134.747a4.65 4.65 0 0 0 4.32 2.907c1.96 0 3.626-1.2 4.32-2.907M10.56 5.633l-.414.507a.5.5 0 0 0-.106.32l.04.653c.027.4-.26.607-.633.46l-.607-.24a.6.6 0 0 0-.347 0l-.606.24c-.374.147-.66-.06-.634-.46l.04-.653a.5.5 0 0 0-.106-.32l-.414-.507c-.26-.306-.146-.646.24-.746l.634-.16a.53.53 0 0 0 .273-.207l.353-.547c.22-.34.567-.34.787 0l.353.547a.53.53 0 0 0 .274.207l.633.16c.386.1.5.44.24.746'/%3E%3C/svg%3E");
}
.promoTournamentCard__stats span:nth-child(3) b::before{
  content: "";
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 17 16'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M8.334 14.667A6.665 6.665 0 0 1 1.667 8a6.67 6.67 0 0 1 6.667-6.667A6.665 6.665 0 0 1 15 8a6.66 6.66 0 0 1-6.666 6.667m2.126-4.194a.495.495 0 0 0 .687-.173.5.5 0 0 0-.173-.687L8.6 8.2V5.12a.5.5 0 1 0-1 0v3.367a.5.5 0 0 0 .247.426z' clip-rule='evenodd'/%3E%3C/svg%3E");
}

/* ===== Games ===== */
.games{
  padding:34px 30px 65px;
  background: #202328;
  border: none;
  box-shadow: none;
  margin-left: 8px;
  margin-top:32px;
  border-radius: 22px;
}
.games .section__head{
  margin-bottom: 12px;
}
.games .section__title{
  font-size: 34px;
  line-height: 1;
}
.games__track{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns: clamp(320px, calc((100vw - 180px) / 4), 430px);
  gap:12px;
  overflow-x:auto;
  overflow-y:hidden;
  padding-bottom:4px;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.games__track::-webkit-scrollbar{
  width:0;
  height:0;
  display:none;
}
.gameCard{
  border-radius: 16px;
  border:1px solid rgba(79, 97, 123, 0.45);
  width: clamp(320px, calc((100vw - 180px) / 4), 430px);
  min-height:278px;
  height:278px;
  padding:18px 16px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:6px;
  position:relative;
  overflow:hidden;
  background-image: var(--game-image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  cursor:pointer;
}
.gameCard::before{
  content:"";
  position:absolute;
  top:10px;
  right:10px;
  width:52px;
  height:44px;
  background-image: url("./assets/games 24/nardball_logo.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  z-index:2;
  pointer-events:none;
}
.gameCard--penalty::before{
  top:6px;
  right:-8px;
  width:156px;
  height:48px;
  background-image: url("./assets/games 24/bliztsport-ru-white-large.png");
}
.gameCard::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(3, 5, 8, 0.28) 0%, rgba(3, 5, 8, 0.62) 40%, rgba(1, 2, 4, 0.98) 100%);
  opacity:0;
  z-index:0;
  transition: opacity .55s ease;
}
.gameCard:hover::after{
  opacity:.98;
}
.gameCard__title{
  font-weight:700;
  font-size:24px;
  line-height:1;
  color:#ffffff;
  position:relative;
  z-index:1;
}
.gameCard__desc{
  color:rgba(221, 228, 239, 0.85);
  font-size:14px;
  position:relative;
  z-index:1;
}
.gameCard__play{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%) scale(.96);
  width:200px;
  height:36px;
  border-radius:8px;
  border:none;
  background:#e13838;
  color:#ffffff;
  text-decoration:none;
  font-size:14px;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  z-index:3;
  transition: opacity .2s ease, transform .2s ease, background-color .2s ease;
}
.gameCard:hover .gameCard__play{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translate(-50%, -50%) scale(1);
}
.gameCard__play:hover{
  background:#cf2f2f;
}
.gameCard__desc:empty{
  display:none;
}
.games__nav{
  display:flex;
  justify-content:flex-end;
  gap:6px;
  margin-top:6px;
}
.gameCard--purple{background: linear-gradient(135deg, rgba(80,30,130,.95), rgba(30,16,60,.95))}
.gameCard--violet{background: linear-gradient(135deg, rgba(90,30,150,.95), rgba(25,10,45,.95))}
.gameCard--pink{background: linear-gradient(135deg, rgba(120,20,70,.95), rgba(40,10,30,.95))}
.gameCard--blue{background: linear-gradient(135deg, rgba(30,60,140,.95), rgba(12,18,40,.95))}

/* ===== Media ===== */
.media{
  --media-divider-gap-left:24px;
  --media-divider-gap-right:24px;
  --media-card-width: clamp(520px, calc((100vw - 260px) / 2), 650px);
  padding:34px 30px 65px;
  background:#202328;
  border:none;
  box-shadow:none;
  margin-left:8px;
  margin-top:32px;
  border-radius:22px;
  font-family:inherit;
}
.media .section__head{
  margin-bottom:14px;
}
.media .section__title{
  font-size:34px;
  font-weight:800;
  line-height:1;
}
.media .section__more{
  margin-left:auto;
  color: rgba(255, 255, 255, 0.64);
  text-decoration:none;
  font-size:14px;
  font-weight:400;
  white-space:nowrap;
  padding-bottom:3px;
}
.media .section__more:hover{
  color:#81aee4;
}
.media__grid{
  display:grid;
  grid-template-columns: minmax(0, 1fr) 430px;
  column-gap:var(--media-divider-gap-left);
  row-gap:20px;
}
.media__main{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:var(--media-card-width);
  gap:20px;
  overflow-x:auto;
  max-width:1320px;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.media__main::-webkit-scrollbar{
  display:none;
}
.media__mainWrap{
  position:relative;
}
.mediaCard{
  border-radius:12px;
  background-image: var(--media-bg);
  background-size:100% 100%;
  background-position:center;
  width:var(--media-card-width);
  min-width:var(--media-card-width);
  height:410px;
  padding:12px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:4px;
  position:relative;
  overflow:hidden;
  transition:background-size .35s ease;
  cursor:pointer;
}
.mediaCard:hover{
  background-size:106% 106%;
}
.mediaCard::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(8, 12, 18, 0) 0%, rgba(8, 12, 18, 0.06) 36%, rgba(8, 12, 18, 0.18) 52%, rgba(8, 12, 18, 0.40) 66%, rgba(6, 9, 14, 0.78) 80%, rgba(3, 5, 8, 0.95) 91%, rgba(1, 2, 4, 1) 100%);
  z-index:0;
}
.mediaCard__tag,
.mediaCard__title,
.mediaCard__desc,
.mediaCard__footer{
  position:relative;
  z-index:1;
}
.mediaCard__tag{
  font-size:11px;
  line-height:1;
  font-weight:700;
  color:rgba(220, 255, 220, 0.92);
  background: rgba(110, 165, 72, 0.88);
  padding:5px 8px;
  border-radius:6px;
  width:max-content;
}
.mediaCard__title{
  margin-top:auto;
  font-size:28px;
  font-weight:800;
  line-height:1.06;
}
.mediaCard__desc{
  color:rgba(228, 234, 242, 0.9);
  font-size:15px;
  line-height:1.2;
}
.mediaCard__footer{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  margin-top:10px;
  padding-top:9px;
  border-top:0.5px solid rgba(85, 85, 85, 0.65);
}
.mediaCard__teams{
  display:flex;
  align-items:center;
  gap:7px;
  margin-left:8px;
}
.mediaCard__teams img{
  width:32px;
  height:32px;
  object-fit:contain;
}
.mediaCard__teams span{
  color:rgba(255,255,255,.65);
  font-size:11px;
  font-weight:700;
  line-height:1;
}
.mediaCard__timeWrap{
  text-align:right;
  line-height:1;
  margin-right:8px;
}
.mediaCard__time{
  font-size:20px;
  font-weight:700;
}
.mediaCard__day{
  margin-top:3px;
  font-size:10px;
  color:rgba(224, 230, 239, .8);
}
.media__navBtn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:36px;
  height:36px;
  border:none;
  outline:none;
  box-shadow:none;
  border-radius:999px;
  background:#4b5563;
  color:#e6eaf1;
  font-size:20px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:3;
}
.media__navBtn:hover{
  background:#5a6574;
  color:#f2f6fc;
}
.media__navBtn--prev{left:-18px;}
.media__navBtn--next{right:-18px;}

.media__side{
  display:flex;
  flex-direction:column;
  gap:18px;
  border-left:1px solid rgba(75, 75, 75, 0.575);
  padding-left:var(--media-divider-gap-right);
  padding-right:28px;
  margin-left:0;
}
.media__controls{display:none;}
.mediaItem{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:0;
  cursor:pointer;
}
.mediaItem *{
  cursor:pointer;
}
.mediaItem__thumbWrap{
  width:120px;
  height:120px;
  border-radius:6px;
  overflow:hidden;
  flex:0 0 auto;
  display:block;
}
.mediaItem__thumb{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transition:transform .25s ease;
  transform-origin:center center;
}
.mediaItem__thumbWrap:hover .mediaItem__thumb{
  transform:scale(1.08);
}
.mediaItem__text{
  flex:1 1 auto;
  min-width:0;
  padding-right:12px;
}
.mediaItem__title{
  font-weight:600;
  font-size:16px;
  line-height:1.22;
  color:#f3f6fb;
}
.mediaItem__meta{
  color:rgba(179, 189, 203, .88);
  font-size:12px;
  margin-bottom:4px;
  display:flex;
  gap:8px;
  align-items:center;
}
.mediaItem__meta span:first-child{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:20px;
  padding:0 6px;
  border-radius:4px;
  background:#343944c5;
  color:#b3b3b3;
  line-height:1;
}
.mediaItem__meta span:last-child{
  color:#b3b3b3;
  cursor:default;
}
.mediaItem__meta span:first-child:hover{
  color:#ffffff;
}
.mediaItem__title:hover{
  color:#81aee4;
}

@media (max-width: 1020px){
  .media .section__title{font-size:28px}
  .media__grid{grid-template-columns:1fr}
  .media__main{
    grid-auto-columns:100%;
    max-width:none;
  }
  .mediaCard{
    width:100%;
    min-width:100%;
    height:410px;
  }
  .mediaCard__title{
    font-size:24px;
  }
  .mediaCard__desc{
    font-size:14px;
  }
  .media__side{
    margin-left:0;
    padding-left:0;
    border-left:none;
  }
}

/* ===== Controls ===== */
.controls{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  margin: 16px 0 12px;
  flex-wrap:wrap;
}

.tabs{
  display:flex;
  gap:8px;
  padding:6px;
  border-radius: 999px;
  border:1px solid rgba(26,36,51,.95);
  background: rgba(11,16,24,.45);
}
.tab{
  border:1px solid transparent;
  background: transparent;
  color: var(--muted);
  padding:10px 12px;
  border-radius: 999px;
  cursor:pointer;
  font-weight:800;
  font-size:13px;
}
.tab:hover{color:var(--text)}
.tab--active{
  background: rgba(7,10,15,.40);
  border-color: rgba(27,38,56,.95);
  color: var(--text);
}

.search{
  display:flex;
  gap:10px;
  align-items:center;
}
.search__input{
  width: min(430px, 78vw);
  padding:10px 12px;
  border-radius: 12px;
  border:1px solid rgba(27,38,56,.9);
  background: rgba(7,10,15,.26);
  outline:none;
  font-size:13.5px;
}
.search__input:focus{
  border-color: rgba(242,201,76,.55);
  box-shadow: 0 0 0 4px rgba(242,201,76,.10);
}

/* ===== List ===== */
.list{
  border:1px solid rgba(27,38,56,.9);
  border-radius: var(--radius-lg);
  background: rgba(11,16,24,.45);
  box-shadow: var(--shadow);
  padding:14px;
}
.list--embedded{
  margin-top:14px;
  border:none;
  border-radius:0;
  background: transparent;
  box-shadow:none;
  padding:0;
}
.list--embedded .list__head{
  margin-top:6px;
  margin-bottom:14px;
}
.list--embedded .list__title{
  font-weight:700;
  font-size:24px;
  letter-spacing:-.2px;
}
.list__titleLink{
  color:inherit;
  text-decoration:none;
  cursor:pointer;
  transition: color .16s ease;
}
.list__titleLink:hover{
  color:#81aee4;
}
.sportsRow{
  display:flex;
  align-items:flex-end;
  gap:20px;
  flex-wrap:nowrap;
  margin: 0;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  color: rgba(156,164,176,.82);
  flex:1;
}
.sportsRowLine{
  display:flex;
  align-items:flex-end;
  gap:12px;
  margin: 0 0 10px;
  padding-bottom:6px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.sportsRow::-webkit-scrollbar{
  height:0;
}
.sportsRow__item{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  min-width:max-content;
  padding:0;
  border-radius:0;
  border:1px solid transparent;
  background: transparent;
  color:#b3b3b38e;
  font-size:12px;
  font-weight:400;
  white-space:nowrap;
  cursor:pointer;
}
.sportsRow__item:hover{
  color:#d7dde7;
}
.sportsRow__item.is-active{
  color:#f3f7ff;
}
.sportsRow__item.is-active .sportsRow__icon{
  color:#81aee4;
}
.sportsRow__item--top{
  position:relative;
}
.sportsRow__icon{
  width:18px;
  height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#b3b3b3;
  opacity:.95;
  font-size:13px;
  line-height:1;
  object-fit:contain;
}
.sportsRow__iconSvg{
  display:block;
}
.sportsRow__icon--basketball{
  width:18px;
  height:18px;
  transform: rotate(45deg);
  background-color: currentColor;
  -webkit-mask-image: url("https://api.iconify.design/mdi:basketball.svg");
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-image: url("https://api.iconify.design/mdi:basketball.svg");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}
.sportsRow__item--top .sportsRow__icon{
  width:20px;
  height:20px;
  border-radius:0;
  background: none;
  color: inherit;
  font-size:13px;
}
.sportsRow__text{
  line-height:1.15;
  max-width:none;
  overflow:visible;
  text-overflow:clip;
  white-space:nowrap;
  color: inherit;
}
.list__head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
}
.list__title{font-weight:900}
.list__head--events{
  gap:12px;
}
.list__badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-left:4px;
  padding:2px 6px;
  border-radius:6px;
  border:2px solid #32373ea6;
  background: rgba(27,33,42,.55);
  font-size:13px;
  color: rgba(225,231,239,.84);
  text-decoration:none;
  cursor:pointer;
  transition: background-color .16s ease, border-color .16s ease;
}
.list__badge:hover{
  background: rgba(45,53,65,.68);
  border-color: #4a5565b5;
}
.list__badgeDot{
  width:5px;
  height:5px;
  border-radius:999px;
  background:#d64646;
  box-shadow: 0 0 0 3px rgba(214,70,70,.18);
}
.list__more{
  margin-left:0;
  color: rgba(255, 255, 255, 0.64);
  text-decoration:none;
  font-size:14px;
  font-weight:400;
  white-space:nowrap;
  padding-bottom:3px;
}
.list__more:hover{
  color:#81aee4;
}

.cards{
  display:grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(285px, calc((100vw - 170px) / 4), 355px);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap:12px;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
}
.cards::-webkit-scrollbar{
  height:0;
}
.topEvents__nav{
  display:flex;
  justify-content:flex-end;
  gap:6px;
  margin-top:8px;
}

.card{
  border:none;
  background:#292d32;
  border-radius: 12px;
  padding:10px;
  padding-bottom:64px;
  position:relative;
  display:flex;
  flex-direction:column;
  gap:7px;
  width:clamp(285px, calc((100vw - 170px) / 4), 355px);
  min-height:200px;
  height:200px;
}
.card:hover{
  border-color: rgba(96,108,124,.8);
}

.card__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
}
.card__meta{
  display:flex;
  align-items:center;
  gap:6px;
  width:100%;
  min-width:0;
}
.card__sport{
  border-radius:2px;
  padding:1px 4px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.1px;
  flex:0 0 auto;
  color:#ffffff;
}
.card__sport--hockey{
  background: rgba(67,133,177,.26);
}
.card__sport--football{
  background: rgba(84,150,85,.27);
}
.card__sport--tennis{
  background: rgba(185,119,56,.3);
}
.card__sport--basketball{
  background: rgba(188,108,70,.28);
}
.card__league{
  color:#b3b3b3;
  font-size:11px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.card__leagueLink{
  text-decoration:none;
  cursor:pointer;
}
.card__leagueLink:hover{
  color:#d0d4da;
}
.card__state{
  margin-left:auto;
  color: rgba(188,196,208,.62);
  font-size:7px;
  white-space:nowrap;
}

.card__fav{
  border:none;
  background:transparent;
  color: rgba(146,154,166,.72);
  width:16px;
  height:16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  line-height:1;
  padding:0;
  cursor:pointer;
}
.card__favIcon{
  width:16px;
  height:16px;
  display:block;
}
.card__favIcon path{
  fill:none;
  stroke: currentColor;
  stroke-width:1.8;
  stroke-linejoin:round;
}
.card__fav.is-active{
  color:#f7b500;
}
.card__fav.is-active .card__favIcon path{
  fill: currentColor;
}

.card__main{
  width:100%;
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:end;
  gap:6px;
  margin-top:2px;
}
.card__mainLink{
  text-decoration:none;
  color:inherit;
  cursor:pointer;
}
.card__liveClock{
  color:#b3b3b3;
  font-size:12px;
  line-height:1.1;
  margin-top:0;
}
.card__liveHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.card__liveBlockLink{
  text-decoration:none;
  color:inherit;
  cursor:pointer;
}
.card__liveTopNum{
  width:40px;
  min-width:40px;
  padding-left:12px;
  text-align:left;
  color:#b3b3b3;
  font-size:11px;
  font-weight:600;
  line-height:1;
}
.card--live{
  padding:8px 10px 10px;
}
.card--live .card__top{
  margin-bottom:2px;
}
.card--live .card__league{
  font-size:10px;
}
.card__liveTeams{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:8px;
}
.card__liveTeam{
  display:grid;
  grid-template-columns: 1fr auto;
  align-items:center;
  gap:8px;
}
.card__liveLeft{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
}
.card__logo--live{
  width:26px;
  height:26px;
  border-radius:8px;
}
.card__logo.card__logo--live{
  width:26px;
  height:26px;
}
.card__name--live{
  width:auto;
  display:block;
  text-align:left;
  white-space:nowrap;
  font-size:14px;
  overflow:visible;
  text-overflow:clip;
}
.card__liveStats{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  min-width:40px;
  color:#e6e6e6;
  font-size:14px;
  font-weight:700;
  line-height:1;
}
.card__liveStats span{
  min-width:10px;
  text-align:right;
}
.card__liveStats .is-hot{
  color:#ff5a5a;
}
.card--live .kf{
  margin-top:8px;
}
.card__teamCard{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  min-width:0;
}
.card__teamCard--right{
  align-items:center;
  text-align:center;
}
.card__logo{
  width:48px;
  height:48px;
  border-radius:8px;
  border:1px dashed rgba(118,129,145,.62);
  background: rgba(62,71,83,.34);
  background-size: contain;
  background-position:center;
  background-repeat:no-repeat;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.card__logo.has-image{
  border: none;
  background-color: transparent;
}
.card__logo::before{
  content:"";
  width:22px;
  height:22px;
  border-radius:50%;
  border:1px solid rgba(132,143,158,.6);
  background: rgba(73,82,95,.46);
}
.card__logo.has-image::before{
  display:none;
}
.card__center{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding-top:0;
  gap:2px;
}
.card__badge{
  background:#1676ca;
  color:#ffffff;
  border-radius:3px;
  padding:1px 4px;
  font-size:11px;
  line-height:1.2;
  font-weight:700;
}
.card__time{
  color:#e6e6e6;
  font-size:18px;
  line-height:.95;
  font-weight:700;
  letter-spacing:-.2px;
}
.card__status{
  color:#b3b3b3;
  font-size:12px;
  line-height:1.1;
}
.card__name{
  width:100%;
  text-align:center;
  font-size:13px;
  color:#e6e6e6;
  font-weight:600;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.card__score{
  font-size:14px;
  font-weight:700;
  color:#eef3fb;
  min-width:10px;
  text-align:right;
}

.kf{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:6px;
  position:absolute;
  left:10px;
  right:10px;
  bottom:10px;
  width:auto;
  margin-top:0;
}
.kf--two{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.kf__box{
  width:100%;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  text-align:left;
  padding:6px 8px;
  border-radius:3px;
  border:1px solid rgba(83,92,106,.62);
  background:#3c4149;
  cursor:pointer;
}
.kf__box:hover .kf__val{
  color:#81aee4;
}
.kf--brown .kf__box{
  background:#473224;
}
.kf--blue .kf__box{
  background:#4d7bb2;
}
.kf--blue .kf__box:hover{
  background:#284e79;
}
.kf--blue .kf__box:hover .kf__val{
  color:#e6e6e6;
}
.kf__val{
  font-weight:700;
  font-size:14px;
  color:#e6e6e6;
  line-height:1.1;
}
.kf__lbl{
  font-size:13px;
  color:#b3b3b3;
  font-weight:700;
}
.card__cta{white-space:nowrap}

/* ===== Footer ===== */
.footer{
  margin-top:14px;
  border-radius:0;
  background:#0e1218;
  border:none;
  overflow:hidden;
}
.footer__inner{
  display:flex;
  flex-direction:column;
  gap:0;
}
.footer__top{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:16px 22px 40px;
}
.footer__cols{
  display:flex;
  gap:34px;
}
.footer__col{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.footer__navLink{
  color:#c9c8c8;
  text-decoration:none;
  font-size:12px;
  line-height:1.25;
  filter:brightness(.82);
}
.footer__navLink:not(.footer__navLink--title):hover{color:#81aee4}
.footer__navLink--title{
  color:#b3b3b3;
  filter:none;
  font-size:14px;
  font-weight:700;
  margin-bottom:1px;
}
.footer__support{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:2px;
  min-width:190px;
}
.footer__supportTitle{
  color:#b3b3b3;
  font-size:14px;
  font-weight:600;
}
.footer__supportPhone,
.footer__supportEmail{
  color:#b3b3b3;
  text-decoration:none;
  font-size:14px;
  font-weight:700;
}
.footer__supportPhone{
  margin-top:4px;
}
.footer__supportFree{
  color:#b3b3b3;
  font-size:11px;
  font-weight:500;
  margin-top:-2px;
}
.footer__supportEmail{
  color:#b3b3b3;
  margin-top:4px;
}
.footer__supportEmail:hover{
  color:#81aee4;
}
.footer__socialList{
  margin-top:6px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.footer__socialLink{
  width:113.06px;
  height:28px;
  display:flex;
  align-items:center;
  gap:7px;
  color:#e6e6e6;
  text-decoration:none;
  font-size:12px;
  background:#202327;
  border-radius:999px;
  padding:0 10px;
  box-sizing:border-box;
  transition:background-color .18s ease;
}
.footer__socialLink:hover{
  background:#40444b;
}
.footer__supportSocialIcon{
  width:20px;
  height:20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 20px;
}
.footer__supportSocialIcon svg{
  width:20px;
  height:20px;
  display:block;
}
.footer__socialBtn{
  width:20px;
  height:20px;
  border-radius:999px;
  border:1px solid rgba(96, 106, 121, 0.58);
  color:rgba(188, 197, 211, 0.86);
  text-decoration:none;
  font-size:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(28, 34, 43, 0.76);
}
.footer__socialBtn--mini{
  width:36px;
  height:36px;
  border:none;
  background:transparent;
  padding:0;
}
.footer__socialBtn--mini svg{
  width:36px;
  height:36px;
  display:block;
}
.footer__mid{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:20px 22px;
  border-top:1px solid rgba(225, 231, 240, 0.11);
}
.footer__midApps{
  display:flex;
  gap:8px;
}
.footer__midQuick{
  display:flex;
  gap:8px;
}
.footer__appBtn{
  width:114.39px;
  height:36px;
  color:#e6e6e6;
  text-decoration:none;
  font-size:10px;
  font-weight:600;
  border:none;
  border-radius:999px;
  padding:0 8px;
  background:#202327;
  display:inline-flex;
  align-items:center;
  gap:6px;
  box-sizing:border-box;
  transition:background-color .18s ease;
}
.footer__appBtn:hover{
  background:#2b3038;
}
.footer__appIcon{
  width:20px;
  height:20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 20px;
}
.footer__appIcon svg{
  width:20px;
  height:20px;
}
.footer__appText{
  display:flex;
  flex-direction:column;
  line-height:1.05;
}
.footer__appTextTop{
  font-size:10px;
  color:#b3b3b3;
  font-weight:500;
}
.footer__appTextBottom{
  font-size:12px;
  color:#e6e6e6;
  font-weight:600;
}
.footer__bottom{
  display:flex;
  justify-content:center;
  align-items:center;
  border-top:1px solid rgba(225, 231, 240, 0.11);
  border-bottom:1px solid rgba(225, 231, 240, 0.11);
  padding:20px 22px;
}
.footer__legal{
  padding:10px 22px 12px;
}
.footer__docsTitle{
  color:rgba(202, 211, 224, 0.8);
  font-size:10px;
  text-decoration:none;
  transition:color .18s ease;
}
.footer__docsTitle:hover{
  color:#81aee4;
}
.footer__docsRow{
  margin-top:8px;
  display:flex;
  align-items:center;
  gap:8px;
}
.footer__ageBadge{
  border:1px solid rgba(106, 117, 133, 0.8);
  border-radius:4px;
  color:#f2f6fc;
  font-size:10px;
  padding:1px 4px;
  line-height:1.2;
}
.footer__copy{
  color:rgba(177, 187, 201, 0.78);
  font-size:10px;
}
.footer__logos{
  display:flex;
  gap:30px;
  flex-wrap:wrap;
  justify-content:center;
  margin-left:0;
  max-width:none;
}
.footer__logoIcon{
  width:40px;
  height:40px;
  object-fit:contain;
  opacity:1;
}

@media (max-width: 920px){
  .footer__top{flex-direction:column;align-items:flex-start}
  .footer__support{align-items:flex-start}
  .footer__mid{flex-direction:column;align-items:flex-start}
  .footer__bottom{justify-content:flex-start}
  .footer__logos{max-width:100%;justify-content:flex-start;margin-left:0}
}

/* Ensure pointer cursor on clickable UI elements */
a,
button,
[role="button"],
[data-link],
[data-lang],
[data-tab]{
  cursor:pointer;
}

/* ===== Settings Dialog ===== */
.settingsDialog{
  position:fixed;
  inset:0;
  z-index:1000;
  display:none;
}
.settingsDialog.is-open{
  display:block;
}
.settingsDialog__overlay{
  position:absolute;
  inset:0;
  background:rgba(8,10,14,.72);
}
.settingsDialog__window{
  position:relative;
  margin:24px auto;
  width:min(840px, calc(100% - 8px));
  height:min(calc(100vh - 48px), 940px);
  border:none;
  border-radius:12px;
  background:#202327;
  box-shadow:0 24px 46px rgba(0,0,0,.5);
  overflow:hidden;
  font-family: Inter, system-ui, SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
}
.settingsDialog__close{
  position:absolute;
  top:8px;
  right:8px;
  width:30px;
  height:30px;
  border:none;
  border-radius:999px;
  background:transparent;
  color:#535a65;
  font-size:34px;
  line-height:1;
  cursor:pointer;
  z-index:2;
}
.settingsDialog__close:hover{
  color:#dbe5f5;
}
.settingsLayout{
  height:100%;
  display:grid;
  grid-template-columns:280px minmax(0,1fr);
}
.settingsMenu{
  background:#292d32;
  border-right:none;
  padding:32px 12px 12px;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.settingsMenu__title{
  margin:0 8px 14px;
  font-size:20px;
  font-weight:700;
  line-height:1.25;
  color:#e6e6e6;
}
.settingsMenu__item{
  width:100%;
  border:1px solid transparent;
  background:transparent;
  color:#e6e6e6;
  text-align:left;
  border-radius:8px;
  padding:6px 8px;
  min-height:32px;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:14px;
  font-weight:600;
  line-height:1.25;
  letter-spacing:0;
}
.settingsMenu__item:hover{
  background:rgba(255,255,255,.06);
}
.settingsMenu__item.is-active{
  color:#e6e6e6;
}
.settingsMenu__item.is-disabled{
  color:#e6e6e6;
  position:relative;
}
.settingsMenu__item:nth-of-type(-n+3){
  color:#e6e6e65e;
}
.settingsMenu__item.is-disabled::after{
  content:attr(data-disabled-tooltip);
  position:absolute;
  left:8px;
  bottom:calc(100% + 8px);
  max-width:260px;
  padding:8px 12px;
  border-radius:8px;
  background:#4a5260;
  color:#e6e6e6;
  font-size:12px;
  font-weight:600;
  line-height:1.25;
  white-space:normal;
  box-shadow:0 4px 12px rgba(0,0,0,.25);
  opacity:0;
  visibility:hidden;
  transform:translateY(4px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
  z-index:8;
  pointer-events:none;
}
.settingsMenu__item.is-disabled:hover::after,
.settingsMenu__item.is-disabled:focus-visible::after{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.settingsMenu__icon{
  width:18px;
  height:18px;
  color:#e6e6e6;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}
.settingsMenu__item:nth-of-type(-n+3) .settingsMenu__icon{
  color:#e6e6e656;
}
.settingsMenu__icon svg{
  width:100%;
  height:100%;
  display:block;
}
.settingsMenu__icon--flip{
  transform:rotate(180deg);
}
.settingsMenu__icon--down{
  transform:rotate(90deg);
}
.settingsMenu__icon--up{
  transform:rotate(-90deg);
}
.settingsMenu__reset{
  margin-top:12px;
  width:100%;
  height:32px;
  border-radius:7px;
  border:1px solid #81aee4;
  background:transparent;
  color:#81aee4;
  font-size:12px;
  font-weight:600;
}
.settingsBody{
  padding:32px 34px 24px;
  background:#202327;
  overflow:auto;
  width:100%;
  scrollbar-width:thin;
  scrollbar-color:#666666 transparent;
}
.settingsBody::-webkit-scrollbar{
  width:6px;
}
.settingsBody::-webkit-scrollbar-track{
  background:transparent;
  border-radius:999px;
}
.settingsBody::-webkit-scrollbar-thumb{
  background:#666666;
  border-radius:999px;
}
.settingsBody::-webkit-scrollbar-thumb:hover{
  background:#666666;
}
.settingsBody::-webkit-scrollbar-button{
  display:none;
  width:0;
  height:0;
}
.settingsSection{
  padding-bottom:14px;
  border-bottom:1px solid rgba(83,90,101,.45);
  margin-bottom:12px;
}
.settingsSection:last-child{
  margin-bottom:0;
  border-bottom:none;
}
#settingsSectionCoupon{
  border-bottom:none;
  margin-bottom:0;
  padding-bottom:4px;
}
#settingsSectionCouponView{
  padding-top:0;
}
.settingsSection--flash{
  animation:settingsSectionFlash 900ms ease-in-out 3;
  margin-left:-34px;
  margin-right:-34px;
  padding-left:34px;
  padding-right:34px;
}
@keyframes settingsSectionFlash{
  0%{
    background:transparent;
  }
  50%{
    background:rgba(247,181,0,.12);
  }
  100%{
    background:transparent;
  }
}
.settingsSection__title{
  margin:0 0 8px;
  font-size:18px;
  font-weight:700;
  color:#e6e6e6;
  line-height:1.12;
}
.settingsCheck{
  display:flex;
  align-items:center;
  gap:10px;
  margin:5px 0;
  font-size:14px;
  color:#e6e6e6;
  font-weight:600;
  line-height:1.25;
}
.settingsCheck input{
  appearance:none;
  width:16px;
  height:16px;
  border-radius:4px;
  border:2px solid #535a65;
  background:transparent;
  margin:0;
  position:relative;
  flex:0 0 auto;
}
.settingsCheck input:checked{
  background:#4f8de1;
  border-color:#4f8de1;
}
.settingsCheck input:checked::after{
  content:"";
  position:absolute;
  left:4px;
  top:1px;
  width:4px;
  height:8px;
  border:2px solid #fff;
  border-top:none;
  border-left:none;
  transform:rotate(45deg);
}
.settingsInline{
  display:flex;
  gap:20px;
  flex-wrap:wrap;
}
.settingsInline--matchPreview{
  display:grid;
  grid-template-columns:repeat(3, 104px);
  gap:10px;
}
.settingsInline--matchPreview.settingsInline--two{
  grid-template-columns:repeat(2, 158px);
}
.settingsInline--matchPreview .settingsRadio{
  justify-content:flex-start;
}
.settingsRadio{
  border:none;
  background:transparent;
  color:#e6e6e6;
  font-size:14px;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:0;
}
.settingsRadio::before{
  content:"";
  width:16px;
  height:16px;
  border-radius:999px;
  border:2px solid #535a65;
}
.settingsRadio.is-active::before{
  border-color:#4d8ee7;
  box-shadow:inset 0 0 0 4px #1f2734, inset 0 0 0 8px #4d8ee7;
}
.settingsGrid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:8px;
  margin-bottom:10px;
}
.settingsChoice{
  min-height:62px;
  border:2px solid transparent;
  border-radius:9px;
  background:#202327;
  color:#e6e6e6;
  padding:8px 10px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:2px;
}
.settingsChoice span{
  font-size:14px;
  color:#e6e6e6;
}
.settingsChoice strong{
  font-size:14px;
  line-height:1;
  font-weight:600;
}
.settingsChoice.is-active{
  box-shadow:none;
  border-color:#4d7bb2;
}
.settingsPreviewRow{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  margin-top:8px;
}
.settingsPreviewCard{
  border:1px solid #535a65;
  background:linear-gradient(180deg, #2b3442, #232b37);
  border-radius:7px;
  width:104px;
  flex:0 0 104px;
  height:74px;
  position:relative;
  display:flex;
  overflow:hidden;
}
.settingsPreviewCard span:first-child{
  width:33%;
  background:linear-gradient(180deg, #5f7391, #4b5f7f);
}
.settingsPreviewCard span:last-child{
  flex:1;
  background:linear-gradient(180deg, #29303c, #1f2631);
}
.settingsPreviewCard--theme-auto span:first-child{
  background:linear-gradient(180deg,#c2cbd8,#8ea2be);
}
.settingsPreviewCard--theme-auto span:last-child{
  background:linear-gradient(90deg,#f3f5f8 0 50%, #232b38 50% 100%);
}
.settingsPreviewCard--theme-light{
  background:linear-gradient(180deg,#d9e1ec,#c5d2e3);
}
.settingsPreviewCard--theme-light span:first-child{
  background:linear-gradient(180deg,#e8edf4,#d7e0ea);
}
.settingsPreviewCard--theme-light span:last-child{
  background:linear-gradient(180deg,#ffffff,#edf2f8);
}
.settingsPreviewCard--theme-dark span:first-child{
  background:linear-gradient(180deg,#5e7393,#4a5f80);
}
.settingsPreviewCard--theme-dark span:last-child{
  background:linear-gradient(180deg,#253041,#171f2c);
}
.settingsPreviewCard--theme-auto,
.settingsPreviewCard--theme-light,
.settingsPreviewCard--theme-dark{
  border:1px solid #535a65;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.settingsPreviewCard--theme-auto{
  background-image:url("./assets/modal/авто.png");
}
.settingsPreviewCard--theme-light{
  background-image:url("./assets/modal/светлая.png");
}
.settingsPreviewCard--theme-dark{
  background-image:url("./assets/modal/темная.png");
}
.settingsPreviewCard--theme-auto span,
.settingsPreviewCard--theme-light span,
.settingsPreviewCard--theme-dark span{
  display:none;
}
.settingsPreviewCard--nav-auto span:last-child{
  background:linear-gradient(180deg,#1f2a38,#151d29);
}
.settingsPreviewCard--nav-left span:first-child{
  width:42%;
  background:linear-gradient(180deg,#4f6482,#394c67);
}
.settingsPreviewCard--nav-left span:last-child{
  background:linear-gradient(180deg,#2b3647,#1d2635);
}
.settingsPreviewCard--nav-top{
  flex-direction:column;
}
.settingsPreviewCard--nav-top span:first-child{
  width:100%;
  height:28%;
}
.settingsPreviewCard--nav-top span:last-child{
  width:100%;
}
.settingsPreviewCard--nav-auto,
.settingsPreviewCard--nav-left,
.settingsPreviewCard--nav-top{
  border:1px solid #535a65;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.settingsPreviewCard--nav-auto{
  background-image:url("./assets/modal/навигация авто.png");
}
.settingsPreviewCard--nav-left{
  background-image:url("./assets/modal/навигация слева.png");
}
.settingsPreviewCard--nav-top{
  background-image:url("./assets/modal/навигация справа.png");
}
.settingsPreviewCard--nav-auto span,
.settingsPreviewCard--nav-left span,
.settingsPreviewCard--nav-top span{
  display:none;
}
.settingsPreviewRow--two{
  display:flex;
}
.settingsPreviewRow--two .settingsPreviewCard{
  width:158px;
  flex:0 0 158px;
}
.settingsPreviewCard--list-large,
.settingsPreviewCard--list-compact,
.settingsPreviewCard--page-large,
.settingsPreviewCard--page-compact{
  background:linear-gradient(180deg,#243040,#1a2230);
  border:1px solid #4b5563;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.settingsPreviewCard--list-large{
  background-image:url("./assets/modal/список событий крупный вид.png");
}
.settingsPreviewCard--list-compact{
  background-image:url("./assets/modal/список событий компактный вид.png");
}
.settingsPreviewCard--page-large{
  background-image:url("./assets/modal/страница события крупный вид.png");
}
.settingsPreviewCard--page-compact{
  background-image:url("./assets/modal/страница события компактный вид.png");
}
.settingsPreviewCard--list-large::before,
.settingsPreviewCard--list-compact::before,
.settingsPreviewCard--page-large::before,
.settingsPreviewCard--page-compact::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  right:0;
  height:20%;
  background:linear-gradient(180deg,#395d36,#274025);
}
.settingsPreviewCard--list-large span:first-child,
.settingsPreviewCard--list-compact span:first-child,
.settingsPreviewCard--page-large span:first-child,
.settingsPreviewCard--page-compact span:first-child{
  width:0;
  background:transparent;
}
.settingsPreviewCard--list-large span:last-child,
.settingsPreviewCard--list-compact span:last-child,
.settingsPreviewCard--page-large span:last-child,
.settingsPreviewCard--page-compact span:last-child{
  background:linear-gradient(180deg,#222c3a,#1a2230);
}
.settingsPreviewCard--list-compact::after,
.settingsPreviewCard--page-compact::after{
  content:"";
  position:absolute;
  right:7%;
  top:28%;
  width:38%;
  height:58%;
  border-left:1px solid rgba(187,200,217,.3);
}
.settingsPreviewCard--list-large span,
.settingsPreviewCard--list-compact span,
.settingsPreviewCard--page-large span,
.settingsPreviewCard--page-compact span{
  display:none;
}
.settingsPreviewCard--list-large::before,
.settingsPreviewCard--list-compact::before,
.settingsPreviewCard--page-large::before,
.settingsPreviewCard--page-compact::before,
.settingsPreviewCard--list-compact::after,
.settingsPreviewCard--page-compact::after{
  display:none;
}
.settingsPreviewCard.is-active{
  box-shadow:none;
  border:2px solid #4d8ee7;
}

/* ===== Responsive ===== */
@media (max-width: 1020px){
  .menu{display:none}
  .tools{display:none}
  .cards{
    grid-auto-flow:column;
    grid-auto-columns:minmax(300px, calc((100vw - 96px) / 2));
    grid-template-rows:repeat(2, minmax(0, 1fr));
    gap:10px;
  }
  .card{
    width:100%;
    min-height:200px;
    height:200px;
  }
  .settingsLayout{
    grid-template-columns:1fr;
  }
  .settingsMenu{
    border-right:none;
    border-bottom:1px solid rgba(66,75,90,.6);
  }
  .settingsDialog__window{
    height:auto;
    max-height:95vh;
  }
  .settingsSection__title{font-size:36px}
  .settingsMenu__item,
  .settingsCheck,
  .settingsRadio{font-size:16px}
  .settingsChoice strong{font-size:30px}
}
@media (max-width: 920px){
  .hero__banner{grid-template-columns:1fr}
  .hero__art{min-height:160px}
  .brand{min-width:auto}
  .cards{
    grid-auto-columns:minmax(260px, calc(100vw - 64px));
    grid-template-rows:repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 520px){
  .hero__title{font-size:28px}
  .grid{grid-template-columns:1fr}
  .cards{
    grid-auto-columns:calc(100vw - 44px);
    grid-template-rows:1fr;
  }
  .card{
    min-height:200px;
    height:200px;
  }
  .list--embedded .list__title{font-size:24px}
  .sportsRowLine{gap:8px}
}

/* ===== Mobile Adaptation ===== */
@media (max-width: 1024px){
  :root{
    --topbar-height:44px;
  }
  .wrap{
    padding: calc(var(--topbar-height) + 8px) 14px 24px;
  }
  .topbar__inner{
    padding: 0 10px;
    gap:8px;
    height:var(--topbar-height);
  }
  .topbar__logo{
    margin-left:0;
    padding-right:0;
  }
  .topbar__logo img{
    height:28px;
  }
  .navLeft{
    display:none;
  }
  .navRight{
    margin-left:auto;
    gap:8px;
  }
  .navRight__item,
  .support,
  .navDivider{
    display:none;
  }
  .navIcon,
  .navLang{
    width:26px;
    height:26px;
    padding:0;
    border-radius:6px;
  }
  .navLang{
    width:auto;
    min-width:40px;
    padding:0 6px;
    gap:4px;
    font-size:12px;
  }
  .navBtn--ghost{
    display:none;
  }
  .navBtn{
    height:32px;
    padding:0 12px;
    font-size:12px;
    border-radius:4px;
  }
  .navBtn + .navBtn{
    margin-left:0;
  }

  .hero{
    margin-top:8px;
  }
  .hero--banner{
    margin-left:0;
    margin-right:0;
    width:100%;
  }
  .hero__banner{
    display:block;
    min-height:560px;
    border-radius:16px;
    overflow:hidden;
    background-size:cover;
    background-position:center;
  }
  .hero__content{
    position:relative;
    z-index:2;
    min-height:560px;
    padding:28px 16px 20px;
    gap:10px;
  }
  .hero__title{
    margin:0;
    font-size:52px;
    line-height:1.03;
  }
  .hero__desc{
    font-size:18px;
    line-height:1.35;
    max-width:28ch;
  }
  .hero__cta{
    margin-top:10px;
    margin-bottom:0;
  }
  .hero__cta .btn{
    width:220px;
    height:48px;
    font-size:18px;
    border-radius:6px;
  }
  .hero__controls{
    margin-top:auto;
    gap:14px;
  }
  .hero__art{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    top:44%;
    z-index:1;
    background-size:contain !important;
    background-position:center bottom !important;
    background-repeat:no-repeat !important;
    padding:0;
  }

  .sportEvents,
  .promo--ref,
  .games,
  .media{
    margin-left:0;
    margin-top:18px;
    padding:18px 14px 22px;
    border-radius:16px;
  }
  .section__head{
    flex-wrap:wrap;
    margin-bottom:10px;
    gap:10px;
  }
  .section__more{
    margin-left:auto;
  }
  .sportbar__nav,
  .topEvents__nav,
  .promoTournaments__nav,
  .games__nav{
    display:none;
  }
  .sportbar__track,
  .promo__track,
  .promoTournaments,
  .games__track,
  .media__main,
  .cards{
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
  }
  .sportbar__card,
  .promoCard,
  .promoTournamentCard,
  .gameCard,
  .mediaCard,
  .card{
    scroll-snap-align:start;
  }
  .sportbar__card{
    width:min(82vw, 320px);
    flex:0 0 min(82vw, 320px);
  }
  .promo__track{
    grid-auto-columns:min(84vw, 340px);
  }
  .promoCard{
    width:min(84vw, 340px);
  }
  .promoTournaments{
    grid-auto-columns:min(84vw, 345px);
  }
  .promoTournamentCard{
    width:min(84vw, 345px);
  }
  .games__track{
    grid-auto-columns:min(86vw, 380px);
  }
  .gameCard{
    width:min(86vw, 380px);
    min-height:260px;
    height:260px;
  }
  .media{
    --media-card-width:min(90vw, 620px);
  }
  .media .section__title,
  .games .section__title,
  .promo--ref .section__title{
    font-size:30px;
  }
  .mediaCard{
    height:360px;
  }
  .media__navBtn{
    display:none;
  }
  .mediaItem__thumbWrap{
    width:108px;
    height:108px;
    flex:0 0 108px;
  }
  .cards{
    grid-template-rows:1fr;
    grid-auto-columns:min(88vw, 360px);
  }
  .card{
    width:min(88vw, 360px);
  }
  .footer__top{
    padding:14px;
  }
  .footer__mid,
  .footer__bottom,
  .footer__legal{
    padding-left:14px;
    padding-right:14px;
  }
}

@media (max-width: 768px){
  .wrap{
    padding-left:10px;
    padding-right:10px;
  }
  .topbar__inner{
    padding:0 8px;
    gap:6px;
  }
  .topbar__logo img{
    height:26px;
  }
  .navBtn{
    height:30px;
    padding:0 10px;
    font-size:11px;
  }
  .navLang{
    min-width:34px;
    font-size:11px;
  }
  .hero__banner{
    min-height:500px;
    border-radius:14px;
  }
  .hero__content{
    min-height:500px;
    padding:18px 12px 16px;
  }
  .hero__title{
    font-size:44px;
  }
  .hero__desc{
    font-size:16px;
    max-width:24ch;
  }
  .hero__cta .btn{
    width:200px;
    height:44px;
    font-size:16px;
  }
  .hero__art{
    top:48%;
  }
  .sportEvents,
  .promo--ref,
  .games,
  .media{
    padding:14px 10px 18px;
    border-radius:14px;
  }
  .media .section__title,
  .games .section__title,
  .promo--ref .section__title{
    font-size:26px;
  }
  .mediaCard{
    height:330px;
  }
  .mediaItem{
    gap:10px;
  }
  .mediaItem__thumbWrap{
    width:94px;
    height:94px;
    flex:0 0 94px;
  }
  .mediaItem__title{
    font-size:15px;
  }
  .list--embedded .list__title{
    font-size:22px;
  }
}

@media (max-width: 520px){
  .topbar__inner{
    gap:4px;
  }
  .navIcon{
    width:24px;
    height:24px;
  }
  .navLang{
    min-width:30px;
    padding:0 4px;
  }
  .navBtn{
    padding:0 8px;
    font-size:11px;
  }
  .hero__banner{
    min-height:460px;
  }
  .hero__content{
    min-height:460px;
  }
  .hero__title{
    font-size:32px;
    line-height:1.08;
  }
  .hero__desc{
    font-size:14px;
    max-width:20ch;
  }
  .hero__controls{
    gap:10px;
  }
  .hero__count{
    font-size:34px;
  }
  .hero__total{
    font-size:22px;
  }
  .hero__navBtn{
    width:42px;
    height:42px;
  }
  .hero__navIcon{
    font-size:24px;
  }
  .sportbar__card{
    width:min(86vw, 300px);
    flex-basis:min(86vw, 300px);
  }
  .promo__track{
    grid-auto-columns:min(88vw, 320px);
  }
  .promoCard{
    width:min(88vw, 320px);
  }
  .promoTournaments{
    grid-auto-columns:min(88vw, 320px);
  }
  .promoTournamentCard{
    width:min(88vw, 320px);
  }
  .games__track{
    grid-auto-columns:min(90vw, 340px);
  }
  .gameCard{
    width:min(90vw, 340px);
    min-height:238px;
    height:238px;
  }
  .media{
    --media-card-width:min(92vw, 420px);
  }
  .mediaCard{
    height:300px;
  }
  .cards{
    grid-auto-columns:min(92vw, 320px);
  }
  .card{
    width:min(92vw, 320px);
    height:190px;
    min-height:190px;
  }
  .sportsRowLine{
    gap:8px;
    margin-bottom:8px;
  }
  .footer__cols{
    flex-direction:column;
    gap:14px;
  }
  .footer__socialList{
    width:100%;
  }
  .footer__socialLink{
    width:100%;
    justify-content:flex-start;
  }
}