:root {
  --red: #c80000;
  --red2: #a60000;
  --green: #18c548;
  --dark: #252525;
  --dark2: #303030;
  --light: #f2f3f5;
  --line: #d8d8d8;
  --muted: #777;
  --header-h: 92px;
  --left: 258px;
  --right: 252px;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  font:
    14px/1.25 Arial,
    Helvetica,
    sans-serif;
  background: #242424;
  color: #222;
  overflow-x: hidden;
}
button,
input,
select {
  font: inherit;
}
.page-shell {
  min-height: 100vh;
}
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: #262626;
  color: #fff;
  box-shadow: 0 1px 4px #0008;
}
.header-main {
  height: 48px;
  display: flex;
  align-items: center;
  padding: 0 8px;
  gap: 10px;
}
.brand {
  width: 120px;
  height: 42px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.brand img {
  display: block;
  max-width: 118px;
  max-height: 38px;
  object-fit: contain;
}
.partner-strip {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  flex: 1;
  height: 44px;
}
.partner {
  height: 38px;
  min-width: 58px;
  padding: 0 10px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #fff;
  font-weight: 700;
}
.partner img {
  max-width: 35px;
  max-height: 30px;
  filter: brightness(0) invert(1);
}
.partner svg {
  width: 28px;
  height: 28px;
  fill: #fff;
}
.partner-crystal {
  font-size: 15px;
}
.diamond {
  font-size: 24px;
  color: #fff;
}
.partner-aviator {
  color: #ed1616;
  font-style: italic;
}
.partner-aviator svg {
  fill: #ed1616;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.btn {
  border: 0;
  border-radius: 8px;
  padding: 10px 16px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
}
.btn-green {
  background: var(--green);
}
.btn-green:hover {
  filter: brightness(0.93);
}
.btn-dark {
  background: #3b3b3b;
}
.icon-button {
  width: 38px;
  height: 34px;
  border: 0;
  border-radius: 9px;
  background: #3b3b3b;
  color: #fff;
  display: grid;
  place-items: center;
  position: relative;
  cursor: pointer;
}
.icon-button svg {
  width: 19px;
  height: 19px;
  fill: currentColor;
}
.icon-button.money {
  color: #21d45a;
  font-size: 18px;
  font-weight: 800;
}
.icon-button.gift b {
  position: absolute;
  right: -2px;
  top: -4px;
  background: #18c548;
  border-radius: 50%;
  font-size: 10px;
  padding: 1px 4px;
}
.clock,
.lang {
  padding: 0 8px;
  border-left: 1px solid #414141;
  height: 28px;
  display: flex;
  align-items: center;
}
.desktop-nav {
  height: 44px;
  background: linear-gradient(90deg, #c60000, #a70000, #361f1f);
  padding-left: 140px;
  display: flex;
  align-items: stretch;
  gap: 2px;
}
.desktop-nav a {
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 16px;
  border-radius: 8px;
}
.desktop-nav a:hover,
.desktop-nav a.active {
  background: #ff0015;
}
.desktop-nav svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}
.live-link i,
.side-tabs i,
.mobile-filter-tabs i {
  width: 7px;
  height: 7px;
  background: #13cf4a;
  border-radius: 50%;
  display: inline-block;
}
.desktop-layout {
  display: grid;
  grid-template-columns: var(--left) minmax(0, 1fr) var(--right);
  gap: 4px;
  background: #242424;
  min-height: calc(100vh - var(--header-h));
  padding: 8px 4px 0;
}
.left-sidebar,
.right-sidebar {
  min-width: 0;
}
.collapse-bar {
  width: 100%;
  height: 31px;
  border: 0;
  border-radius: 8px 8px 0 0;
  background: #373737;
  color: #d7d7d7;
}
.side-block {
  margin-top: 8px;
  background: #fff;
}
.shortcut-list > button {
  height: 36px;
  width: 100%;
  border: 0;
  border-bottom: 1px solid #4b4b4b;
  background: #3b3b3b;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 10px;
  text-align: left;
}
.shortcut-list > button span {
  margin-left: auto;
}
.shortcut-list svg {
  width: 18px;
  height: 18px;
  fill: #fff;
}
.mini-score {
  padding: 7px 8px;
  background: #fff;
}
.mini-score p,
.mini-score b {
  display: flex;
  justify-content: space-between;
  margin: 3px 0;
}
.mini-score small {
  color: #15943d;
}
.mini-score b {
  font-weight: 400;
}
.odds {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-top: 8px;
}
.odds span {
  background: #e8e8e8;
  border-radius: 7px;
  padding: 6px;
  font-size: 12px;
}
.side-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 7px;
  background: #444;
  color: #fff;
}
.side-tabs button {
  height: 32px;
  border: 0;
  background: none;
  color: #ddd;
  font-weight: 700;
}
.side-tabs button.active {
  color: #fff;
}
.league-list {
  background: #fff;
}
.league-head {
  height: 38px;
  background: #e6e6e6;
  padding: 12px 8px;
  font-weight: 700;
}
.league-head span {
  float: right;
  color: #888;
}
.league-title {
  padding: 7px 8px;
  background: #f5f5f5;
  color: #555;
}
.league-list button {
  width: 100%;
  height: 33px;
  background: #fff;
  border: 0;
  border-top: 1px solid #ddd;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 8px;
  color: #555;
}
.main-content {
  min-width: 0;
}
.hero {
  height: 248px;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: #090909;
}
.hero-track,
.hero-slide {
  height: 100%;
}
.hero-slide {
  display: none;
  background-image: var(--bg);
  background-size: cover;
  background-position: center right;
  position: relative;
}
.hero-slide.active {
  display: block;
  animation: fade 0.45s ease;
}
.hero-slide:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #000 0%, #000d 25%, transparent 62%);
}
.hero-copy {
  position: absolute;
  z-index: 2;
  left: 56px;
  top: 50%;
  transform: translateY(-50%);
  max-width: 55%;
  color: #fff;
}
.hero-copy h1,
.hero-copy h2 {
  font-size: 31px;
  line-height: 1.05;
  margin: 0 0 12px;
  font-weight: 900;
}
.hero-copy p {
  margin: 0 0 15px;
}
.hero-arrow {
  position: absolute;
  z-index: 4;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 70px;
  border: 0;
  background: transparent;
  color: #aaa;
  font-size: 48px;
  cursor: pointer;
}
.hero-arrow.prev {
  left: 0;
}
.hero-arrow.next {
  right: 0;
}
.hero-dots {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}
.hero-dots button {
  width: 9px;
  height: 9px;
  border: 0;
  border-radius: 50%;
  padding: 0;
  background: #8c8c8c;
}
.hero-dots button.active {
  width: 24px;
  border-radius: 6px;
  background: #fff;
}
.mobile-promo-row {
  display: none;
}
.game-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(130px, 1fr));
  gap: 9px;
  margin-top: 8px;
  overflow: auto;
  padding-bottom: 5px;
}
.game-strip article {
  position: relative;
  height: 178px;
  border-radius: 3px;
  overflow: hidden;
  background: #111;
  min-width: 160px;
}
.game-strip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.game-strip span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: #0009;
  color: #fff;
  text-align: center;
  padding: 8px;
  font-weight: 700;
}
.ticker {
  height: 65px;
  margin-top: 7px;
  overflow: hidden;
  border-radius: 7px;
  background: linear-gradient(90deg, #3f3f3f, #18bf4d);
  color: #fff;
  display: flex;
  align-items: center;
}
.ticker-track {
  display: flex;
  align-items: center;
  gap: 21px;
  width: max-content;
  white-space: nowrap;
  font-size: 25px;
  animation: ticker 30s linear infinite;
}
.ticker-track span {
  font-weight: 700;
}
.ticker-track b {
  font-size: 18px;
}
.betting {
  margin-top: 7px;
  background: #e7e7e7;
}
.mobile-filter-tabs {
  display: none;
}
.desktop-bet-nav {
  background: #3d3d3d;
  color: #ccc;
}
.bet-nav-top {
  height: 39px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 10px;
}
.bet-nav-top button {
  background: none;
  border: 0;
  color: #bbb;
  font-weight: 700;
  height: 100%;
}
.bet-nav-top button.active {
  color: #fff;
  border-bottom: 3px solid red;
}
.search-field {
  margin-left: auto;
  background: #292929;
  color: #eee;
  padding: 6px 12px;
  border-radius: 10px;
}
.sport-tabs {
  height: 44px;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 10px;
  white-space: nowrap;
  overflow: hidden;
}
.sport-tabs span,
.sport-tabs b {
  color: #aaa;
}
.toggle {
  width: 34px;
  height: 18px;
  border: 0;
  border-radius: 11px;
  background: #ccc;
  position: relative;
}
.toggle i {
  position: absolute;
  width: 16px;
  height: 16px;
  background: #777;
  border-radius: 50%;
  left: 1px;
  top: 1px;
}
.event-section-head {
  display: none;
}
.event-card {
  background: #fff;
  margin: 8px;
  border-radius: 8px;
  overflow: hidden;
}
.event-time {
  height: 38px;
  border-bottom: 1px solid #ccc;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 12px;
}
.competition {
  margin: 12px;
}
.teams {
  padding: 0 12px;
}
.teams b {
  display: flex;
  justify-content: space-between;
  margin: 6px 0;
}
.substatus {
  margin: 8px 12px;
  color: #555;
}
.odd-row {
  display: flex;
  gap: 7px;
  padding: 8px;
  overflow: auto;
}
.odd-row button {
  min-width: 84px;
  border: 0;
  border-radius: 9px;
  background: #e8e8e8;
  padding: 5px 12px;
  color: #555;
}
.odd-row small {
  display: block;
  color: #777;
}
.casino-catalog {
  background: #fff;
  margin-top: 12px;
  padding: 14px;
}
.catalog-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
}
.catalog-head h2 {
  font-size: 14px;
}
.catalog-head a {
  font-size: 11px;
  color: #555;
  text-decoration: none;
}
.catalog-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(150px, 1fr));
  gap: 10px;
  overflow: auto;
}
.catalog-row article {
  background: #eee;
  min-width: 150px;
}
.catalog-row img {
  display: block;
  width: 100%;
  aspect-ratio: 301/180;
  object-fit: cover;
}
.catalog-row span {
  display: block;
  text-align: center;
  padding: 6px;
  font-size: 12px;
}
.site-footer {
  margin-top: 16px;
  color: #fff;
}
.footer-grid {
  background: #303030;
  border-radius: 8px;
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 22px;
}
.footer-grid .footer-heading {
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 8px;
}
.footer-grid a {
  display: block;
  font-size: 12px;
  color: #fff;
  margin: 0 0 7px;
  text-decoration: none;
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #303030;
  border-radius: 8px;
  margin-top: 8px;
  padding: 10px 14px;
}
.footer-bottom p {
  font-size: 12px;
}
.footer-bottom u {
  color: #16c74a;
}
.socials {
  display: flex;
  align-items: center;
  gap: 10px;
}
.socials span {
  width: 32px;
  height: 32px;
  background: #eee;
  color: #333;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 18px;
  font-weight: 700;
}
.socials b {
  font-size: 18px;
  margin-left: 14px;
}
.stream-box,
.register-card,
.coupon-card {
  margin-top: 8px;
  background: #fff;
  border-radius: 7px;
  overflow: hidden;
}
.box-title {
  background: #3a3a3a;
  color: #fff;
  padding: 6px 8px;
  display: flex;
  justify-content: space-between;
}
.stream-placeholder {
  height: 150px;
  background: linear-gradient(155deg, #64350f, #d5a66b 45%, #884b17);
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 900;
}
.stream-placeholder:before,
.stream-placeholder:after {
  content: "";
  position: absolute;
  border: 2px solid #fff8;
  inset: 20px;
  transform: skewY(-8deg);
}
.stream-placeholder:after {
  inset: 50px 20px;
  border-width: 1px;
}
.register-card h3 {
  text-align: center;
  color: #555;
}
.reg-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #ddd;
}
.reg-switch button {
  border: 0;
  padding: 8px;
}
.reg-switch .active {
  background: #444;
  color: #fff;
  font-weight: 700;
}
.register-card label,
.register-card input {
  display: flex;
  width: calc(100% - 16px);
  margin: 8px;
  border: 0;
  border-radius: 7px;
  background: #f1f1f1;
  padding: 7px;
}
.register-card select {
  border: 0;
  background: transparent;
  width: 100%;
}
.register-card > .btn {
  width: calc(100% - 16px);
  margin: 0 8px;
}
.register-card small {
  display: block;
  text-align: center;
  color: #777;
  padding: 8px;
  font-size: 10px;
}
.register-card strong {
  display: block;
  background: #3b3b3b;
  color: #fff;
  padding: 10px;
  font-size: 12px;
}
.coupon-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #3b3b3b;
  color: #ccc;
  text-align: center;
  padding: 8px;
}
.coupon-tabs b {
  color: #fff;
}
.coupon-card h4 {
  font-size: 11px;
  padding: 0 8px;
  color: #777;
}
.coupon-empty {
  height: 130px;
  margin: 8px;
  background: #f4f4f4;
  border-radius: 7px;
  display: grid;
  place-items: center;
  text-align: center;
  color: #666;
}
.mobile-bottom-nav,
.mobile-menu,
.menu-overlay,
.modal {
  display: none;
}
@keyframes fade {
  from {
    opacity: 0.35;
  }
  to {
    opacity: 1;
  }
}
@keyframes ticker {
  to {
    transform: translateX(-50%);
  }
}
@media (max-width: 1100px) {
  :root {
    --left: 225px;
    --right: 225px;
  }
  .partner-strip {
    gap: 0;
  }
  .partner {
    min-width: 48px;
    padding: 0 6px;
  }
  .desktop-nav {
    padding-left: 120px;
  }
  .desktop-nav a {
    padding: 0 10px;
  }
  .hero-copy h1,
  .hero-copy h2 {
    font-size: 25px;
  }
  .footer-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 767px) {
  body {
    background: #eef1f5;
    padding-bottom: 62px;
    color: #444;
  }
  .site-header {
    position: relative;
    box-shadow: none;
    margin: 16px 16px 0;
    border-radius: 10px 10px 0 0;
    overflow: hidden;
  }
  .header-main {
    height: 63px;
    padding: 0 10px;
  }
  .brand {
    width: 116px;
  }
  .brand img {
    max-height: 33px;
  }
  .partner-strip {
    position: absolute;
    top: 63px;
    left: 0;
    right: 0;
    height: 57px;
    background: #292929;
    overflow-x: auto;
    gap: 5px;
    padding: 5px 10px;
  }
  .partner {
    min-width: 80px;
    height: 47px;
    background: #333;
  }
  .partner-crystal {
    min-width: 105px;
  }
  .header-actions {
    margin-left: auto;
    gap: 8px;
  }
  .header-actions .money,
  .desktop-only,
  .desktop-nav {
    display: none !important;
  }
  .header-actions .btn {
    padding: 11px 13px;
  }
  .header-actions .btn-green {
    font-size: 12px;
  }
  .header-actions .btn-dark {
    font-size: 12px;
  }
  .header-actions .gift {
    display: grid;
  }
  .desktop-layout {
    display: block;
    background: transparent;
    padding: 0 16px;
  }
  .left-sidebar,
  .right-sidebar {
    display: none;
  }
  .main-content {
    padding-top: 73px;
    background: #fff;
    border-radius: 0 0 10px 10px;
    overflow: hidden;
  }
  .hero {
    display: none;
  }
  .mobile-promo-row {
    display: flex;
    gap: 5px;
    overflow-x: auto;
    padding: 7px 11px 11px;
    scrollbar-width: none;
  }
  .mobile-promo-row::-webkit-scrollbar {
    display: none;
  }
  .mobile-promo-row article {
    flex: 0 0 104px;
    border-radius: 9px;
    background: #f1f1f1;
    padding: 4px;
    text-align: center;
    overflow: hidden;
  }
  .mobile-promo-row img {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: 8px;
  }
  .mobile-promo-row span {
    display: block;
    min-height: 56px;
    padding: 7px 3px;
    font-size: 12px;
  }
  .game-strip {
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 5px 11px 9px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .game-strip::-webkit-scrollbar {
    display: none;
  }
  .game-strip article {
    flex: 0 0 58px;
    min-width: 58px;
    height: auto;
    background: none;
    overflow: visible;
  }
  .game-strip img {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    object-fit: cover;
  }
  .game-strip span {
    position: static;
    background: none;
    color: #333;
    padding: 3px 0 0;
    font-size: 11px;
    line-height: 1.05;
    display: block;
    white-space: normal;
  }
  .ticker {
    margin: 0 11px;
    height: 56px;
  }
  .ticker-track {
    font-size: 23px;
    gap: 18px;
    animation-duration: 24s;
  }
  .betting {
    margin-top: 8px;
    background: #e6e6e6;
    padding-bottom: 10px;
  }
  .mobile-filter-tabs {
    display: grid;
    grid-template-columns: 1.1fr 1.1fr 46px 46px;
    gap: 4px;
    padding: 8px 10px;
  }
  .mobile-filter-tabs button {
    height: 48px;
    border: 0;
    border-radius: 8px;
    background: #fff;
    font-weight: 700;
    color: #333;
  }
  .mobile-filter-tabs button.active {
    color: #111;
  }
  .mobile-filter-tabs svg {
    width: 22px;
    height: 22px;
    fill: #444;
  }
  .mobile-filter-tabs .star-tab svg {
    fill: red;
  }
  .desktop-bet-nav {
    display: none;
  }
  .event-section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 11px;
  }
  .event-section-head h2 {
    font-size: 16px;
    margin: 0;
  }
  .event-section-head h2 span {
    font-weight: 400;
    color: #666;
  }
  .event-section-head a {
    text-decoration: none;
    color: #333;
    font-size: 12px;
  }
  .event-card {
    margin: 7px 10px;
  }
  .event-time {
    height: 40px;
  }
  .competition {
    margin: 12px 11px;
  }
  .teams {
    padding: 0 11px;
  }
  .odd-row {
    padding: 8px;
  }
  .odd-row button {
    min-width: 69px;
    padding: 5px 8px;
  }
  .casino-catalog {
    margin: 0;
    padding: 12px 10px 20px;
  }
  .catalog-row {
    display: flex;
  }
  .catalog-row article {
    flex: 0 0 122px;
    min-width: 122px;
  }
  .catalog-row span {
    font-size: 11px;
  }
  .site-footer {
    background: #303030;
    margin: 0;
    padding: 14px 12px 70px;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    padding: 0;
    gap: 15px;
  }
  .footer-grid div:nth-child(n + 4) {
    display: none;
  }
  .footer-bottom {
    display: block;
    padding: 10px 0;
  }
  .socials {
    margin-top: 14px;
  }
  .mobile-bottom-nav {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 10px;
    height: 58px;
    z-index: 70;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 0 0 10px 10px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    box-shadow: 0 2px 10px #0002;
  }
  .mobile-bottom-nav button {
    border: 0;
    background: none;
    color: #777;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-size: 12px;
  }
  .mobile-bottom-nav svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
  }
  .mobile-bottom-nav .active {
    color: #333;
    font-weight: 700;
  }
  .mobile-bottom-nav .active i {
    width: 38px;
    height: 38px;
    margin-top: -16px;
    border-radius: 50%;
    background: red;
    color: #fff;
    display: grid;
    place-items: center;
  }
  .mobile-bottom-nav .active i svg {
    fill: #fff;
    width: 21px;
    height: 21px;
  }
  .menu-overlay {
    position: fixed;
    inset: 0;
    background: #0008;
    z-index: 79;
  }
  .menu-overlay.open {
    display: block;
  }
  .mobile-menu {
    display: block;
    position: fixed;
    z-index: 80;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(88vw, 390px);
    background: #f3f4f5;
    transform: translateX(104%);
    transition: 0.25s ease;
    overflow-y: auto;
    padding: 0 10px 25px;
  }
  .mobile-menu.open {
    transform: translateX(0);
  }
  .mobile-menu-top {
    height: 48px;
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .mobile-menu-top button {
    margin-left: auto;
    border: 0;
    background: #444;
    color: #fff;
    width: 34px;
    height: 34px;
    border-radius: 7px;
  }
  .app-promo {
    height: 65px;
    background: #0e0e0e;
    border-radius: 8px;
    display: flex;
    align-items: center;
    padding: 5px 10px;
    color: #fff;
    text-decoration: none;
    overflow: hidden;
  }
  .app-promo img {
    width: 70px;
    height: 60px;
    object-fit: contain;
  }
  .app-promo div {
    display: flex;
    flex-direction: column;
    flex: 1;
    text-align: center;
  }
  .app-promo b {
    font-size: 11px;
  }
  .app-promo span {
    background: #14bf45;
    border-radius: 4px;
    margin-top: 6px;
    padding: 4px;
  }
  .menu-search {
    margin: 9px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border-radius: 7px;
    padding: 0 10px;
    height: 40px;
  }
  .menu-search svg,
  .menu-list svg {
    width: 18px;
    height: 18px;
    fill: #777;
  }
  .menu-search input {
    border: 0;
    outline: 0;
    width: 100%;
  }
  .menu-list {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
  }
  .menu-list button {
    width: 100%;
    height: 43px;
    border: 0;
    border-bottom: 1px solid #ddd;
    background: #fff;
    display: grid;
    grid-template-columns: 28px 1fr 20px;
    align-items: center;
    text-align: left;
    color: #555;
    padding: 0 10px;
  }
  .menu-list button span {
    grid-column: 2;
  }
  .menu-list button b {
    grid-column: 3;
  }
  .menu-list svg {
    grid-column: 1;
  }
  .menu-label {
    height: 18px;
    background: #f0f0f0;
    color: #999;
    font-size: 9px;
    padding: 4px 10px;
  }
  .submenu {
    display: none;
    background: #fafafa;
    padding: 4px 0;
  }
  .submenu.open {
    display: block;
  }
  .submenu a {
    display: block;
    padding: 8px 47px;
    color: #666;
    border-bottom: 1px solid #eee;
  }
  .modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: #000b;
    align-items: center;
    justify-content: center;
  }
  .modal.open {
    display: flex;
  }
  .modal-card {
    width: min(92vw, 390px);
    background: #fff;
    border-radius: 12px;
    padding: 25px;
    position: relative;
    text-align: center;
  }
  .modal-card img {
    max-width: 140px;
    background: #222;
    border-radius: 7px;
  }
  .modal-card input {
    width: 100%;
    height: 44px;
    margin: 7px 0;
    border: 1px solid #ddd;
    border-radius: 7px;
    padding: 0 12px;
  }
  .modal-card .btn {
    width: 100%;
    margin-top: 10px;
  }
  .modal-close {
    position: absolute;
    right: 10px;
    top: 10px;
    border: 0;
    background: #eee;
    width: 32px;
    height: 32px;
    border-radius: 50%;
  }
}
@media (max-width: 440px) {
  .site-header {
    margin-left: 8px;
    margin-right: 8px;
  }
  .desktop-layout {
    padding-left: 8px;
    padding-right: 8px;
  }
  .mobile-bottom-nav {
    left: 8px;
    right: 8px;
  }
  .brand {
    width: 106px;
  }
  .header-main {
    padding: 0 7px;
  }
  .header-actions {
    gap: 5px;
  }
  .header-actions .btn {
    padding: 10px 9px;
  }
  .header-actions .btn-green {
    font-size: 11px;
  }
  .partner {
    min-width: 76px;
  }
  .mobile-promo-row article {
    flex-basis: 104px;
  }
  .main-content {
    padding-top: 73px;
  }
}

/* ===== HAR fidelity revision =====
   All UI symbols below are the original paths inlined from the SVG sprites
   contained in the supplied HAR. Inlining keeps them visible even when the
   project is opened directly from disk. */
svg[data-har-icon] {
  display: block;
  flex: 0 0 auto;
  fill: currentColor;
}

/* Header and partner logos */
.header-main {
  min-width: 0;
}
.brand {
  flex: 0 0 126px;
  width: 126px;
}
.brand img {
  width: 124px;
  max-width: 124px;
}
.partner-strip {
  gap: 8px;
  scrollbar-width: none;
}
.partner-strip::-webkit-scrollbar {
  display: none;
}
.partner {
  flex: 0 0 auto;
  min-width: 48px;
  padding: 0 5px;
  background: transparent;
  text-decoration: none;
}
.partner img {
  max-width: 42px;
  max-height: 30px;
  filter: none;
}
.partner-crystal {
  min-width: 92px;
  justify-content: flex-start;
}
.partner-crystal svg {
  width: 22px;
  height: 20px;
  color: #fff;
}
.partner-aviator img {
  max-width: 56px;
}
.header-actions .tiny-chevron,
.lang svg {
  width: 9px;
  height: 9px;
  margin-left: 4px;
}
.header-actions > .desktop-only.icon-button {
  display: flex;
  gap: 5px;
  width: 44px;
}

/* Main red navigation: original arrows stay on the same line */
.desktop-nav {
  align-items: center;
  overflow: hidden;
}
.desktop-nav a {
  height: 40px;
  flex: 0 0 auto;
  padding: 0 12px;
  white-space: nowrap;
  line-height: 1;
}
.desktop-nav .nav-main-icon {
  width: 17px;
  height: 17px;
}
.desktop-nav .nav-chevron {
  width: 9px;
  height: 9px;
  margin-left: -2px;
  color: #fff;
}

/* Sidebar section rows and arrows */
.collapse-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  cursor: pointer;
}
.collapse-bar svg {
  width: 12px;
  height: 12px;
  color: #d7d7d7;
}
.shortcut-list > button {
  display: grid;
  grid-template-columns: 19px minmax(0, 1fr) 17px;
  gap: 8px;
}
.shortcut-list > button > svg:first-child {
  width: 17px;
  height: 17px;
}
.shortcut-list > button .shortcut-text {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shortcut-list .section-arrow,
.league-list .section-arrow {
  width: 9px;
  height: 9px;
  margin: 0;
  justify-self: end;
  transition: transform 0.2s ease;
}
.shortcut-list button.is-open .section-arrow,
.league-list button.is-open .section-arrow {
  transform: rotate(180deg);
}
.shortcut-list .pager {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  font-size: 12px;
  white-space: nowrap;
}
.shortcut-list .pager svg {
  width: 8px;
  height: 10px;
}
.inline-icon,
.score-actions,
.league-head span,
.league-list button > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.inline-icon svg,
.score-actions svg,
.league-head svg,
.league-list button > span svg {
  width: 15px;
  height: 15px;
  color: currentColor;
}
.league-list button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 14px;
  gap: 8px;
}
.league-list button > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Hero: do not zoom/crop the original HAR banners */
.hero-slide {
  background-repeat: no-repeat;
  background-position: right center;
  background-size: auto 100%;
}
.hero-slide::after {
  background: linear-gradient(
    90deg,
    #050505 0%,
    rgba(5, 5, 5, 0.92) 31%,
    rgba(5, 5, 5, 0.18) 65%,
    transparent 76%
  );
}
.hero-copy {
  left: 56px;
  max-width: 48%;
}
.hero-arrow {
  width: 43px;
  height: 74px;
  display: grid;
  place-items: center;
  padding: 0;
}
.hero-arrow svg {
  width: 15px;
  height: 25px;
  color: #b8b8b8;
  filter: drop-shadow(0 1px 1px #000);
}
.hero-arrow.prev {
  left: 0;
}
.hero-arrow.next {
  right: 0;
}

/* Desktop betting navigation and the missing right-side control group */
.bet-nav-top {
  gap: 0;
  padding: 0 8px;
}
.bet-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 100%;
  margin-right: 10px;
}
.bet-breadcrumbs svg {
  width: 15px;
  height: 15px;
  color: #e6e6e6;
}
.bet-breadcrumbs .crumb-arrow {
  width: 7px;
  height: 10px;
  color: #999;
}
.bet-nav-top button {
  padding: 0 12px;
}
.search-field {
  height: 31px;
  min-width: 210px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
}
.search-field input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #eee;
}
.search-field svg {
  width: 15px;
  height: 15px;
  color: #bbb;
}
.sport-tabs {
  gap: 14px;
  padding-right: 0;
}
.sport-tabs span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 700;
  font-size: 12px;
}
.sport-tabs span svg {
  width: 17px;
  height: 17px;
  color: #9c9c9c;
}
.sport-tabs-tail {
  margin-left: auto;
  height: 100%;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  background: #333;
}
.sport-tabs-tail button {
  width: 54px;
  height: 100%;
  border: 0;
  background: transparent;
  color: #aaa;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.sport-tabs-tail button > svg:first-child {
  width: 17px;
  height: 17px;
}
.sport-tabs-tail .tail-chevron {
  width: 8px;
  height: 8px;
}
.sport-tabs-tail .tail-divider {
  width: 1px;
  height: 25px;
  background: #666;
}
.event-actions,
.team-name,
.event-section-head a,
.catalog-head a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.event-actions svg,
.event-more,
.team-name svg {
  width: 15px;
  height: 15px;
}
.event-section-head a svg,
.catalog-head a svg {
  width: 10px;
  height: 10px;
}
.broadcast-green {
  color: #17bd48;
}
.box-title span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.box-title svg {
  width: 13px;
  height: 13px;
}
.reg-switch button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.reg-switch svg {
  width: 14px;
  height: 14px;
}
.register-card label {
  position: relative;
  align-items: center;
}
.register-card .select-arrow {
  width: 9px;
  height: 9px;
  color: #777;
}
.coupon-card h4 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.coupon-card h4 svg {
  width: 13px;
  height: 13px;
}

/* Desktop footer from the reference screenshot */
.desktop-footer-bottom {
  margin-top: 8px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 8px;
}
.desktop-legal,
.desktop-footer-actions {
  min-height: 96px;
  background: #303030;
  border-radius: 8px;
}
.desktop-legal {
  display: flex;
  align-items: center;
  padding: 12px;
}
.desktop-legal p {
  margin: 0;
  font-size: 12px;
}
.desktop-legal u {
  color: #19c34b;
}
.desktop-footer-actions {
  display: grid;
  grid-template-rows: 55px 1fr;
  gap: 7px;
  padding: 7px;
}
.desktop-social-row {
  display: grid;
  grid-template-columns: repeat(4, 36px) 1fr;
  align-items: center;
  gap: 7px;
}
.desktop-social-row a,
.mobile-socials a {
  display: grid;
  place-items: center;
  text-decoration: none;
}
.desktop-social-row a {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #ededed;
  color: #363636;
}
.desktop-social-row svg {
  width: 18px;
  height: 18px;
}
.desktop-social-row b {
  height: 42px;
  border-radius: 7px;
  background: #262626;
  display: grid;
  place-items: center;
  font-size: 18px;
}
.desktop-footer-actions > button {
  height: 34px;
  border: 0;
  border-radius: 7px;
  background: #3a3a3a;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 700;
}
.desktop-footer-actions > button svg {
  width: 18px;
  height: 18px;
}
.mobile-footer {
  display: none;
}

/* Mobile menu and footer */
@media (max-width: 767px) {
  .site-header {
    overflow: visible;
  }
  .header-main {
    height: 64px;
    padding: 0 8px;
  }
  .brand {
    flex-basis: 116px;
    width: 116px;
  }
  .brand img {
    width: 114px;
    max-width: 114px;
    max-height: 36px;
  }
  .header-actions {
    min-width: 0;
    gap: 7px;
  }
  .header-actions .gift {
    flex: 0 0 38px;
  }
  .header-actions .btn {
    min-height: 39px;
    padding: 9px 11px;
  }
  .partner-strip {
    top: 64px;
    height: 56px;
    padding: 5px 10px;
    gap: 5px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  .partner {
    min-width: 78px;
    height: 46px;
    padding: 0 8px;
    border-radius: 7px;
    background: #333;
  }
  .partner-crystal {
    min-width: 102px;
  }
  .partner img {
    max-width: 45px;
    max-height: 29px;
  }
  .partner-aviator img {
    max-width: 58px;
  }
  .main-content {
    padding-top: 72px;
  }

  .mobile-filter-tabs svg,
  .mobile-bottom-nav svg {
    display: block;
  }

  .desktop-footer-links,
  .desktop-footer-bottom {
    display: none;
  }
  .site-footer {
    margin-top: 0;
    padding: 27px 8px 72px;
    background: #282828;
  }
  .mobile-footer {
    display: block;
  }
  .mobile-app-card {
    height: 60px;
    display: flex;
    align-items: center;
    overflow: hidden;
    border-radius: 8px;
    background: #3b3b3b;
    color: #fff;
    text-decoration: none;
  }
  .mobile-app-card .phone-art {
    width: 150px;
    height: 105px;
    margin-left: 12px;
    margin-top: 31px;
    color: #e30915;
    --colored-svg-clr1: #e30915;
    --colored-svg-clr30: #111;
    --colored-svg-clr5: #fff;
  }
  .mobile-app-copy {
    margin-left: -30px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .mobile-app-copy img {
    width: 105px;
    height: auto;
  }
  .mobile-app-copy span {
    margin-top: -2px;
    font-size: 12px;
  }
  .mobile-socials {
    margin-top: 7px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
  }
  .mobile-socials a {
    height: 40px;
    border-radius: 7px;
    background: #414141;
    color: #fff;
  }
  .mobile-socials svg {
    width: 19px;
    height: 19px;
  }
  .mobile-support {
    min-height: 51px;
    margin-top: 15px;
    padding: 6px 12px;
    border-radius: 8px;
    background: #414141;
    color: #fff;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .support-art {
    width: 58px;
    height: 40px;
    position: relative;
    display: block;
    color: #ff3c4d;
  }
  .support-art .headset-icon {
    position: absolute;
    left: 0;
    top: 2px;
    width: 39px;
    height: 39px;
  }
  .support-art .message-icon {
    position: absolute;
    right: 0;
    top: 9px;
    width: 29px;
    height: 29px;
    color: #f31527;
  }
  .mobile-support > span:last-child {
    display: flex;
    flex-direction: column;
  }
  .mobile-support b {
    font-size: 15px;
  }
  .mobile-support small {
    font-size: 11px;
  }
  .mobile-copyright,
  .mobile-cookie {
    text-align: center;
    margin: 17px 8px 0;
    font-size: 12px;
  }
  .mobile-cookie {
    line-height: 1.25;
  }
  .mobile-cookie u {
    color: #13cc4a;
  }
  .mobile-footer-meta {
    margin-top: 14px;
    display: grid;
    grid-template-columns: 48px 1fr auto;
    align-items: center;
    gap: 8px;
  }
  .mobile-footer-meta > b {
    height: 32px;
    border-radius: 7px;
    background: #353535;
    display: grid;
    place-items: center;
  }
  .mobile-footer-meta > a {
    color: #ff1d23;
    text-align: center;
  }
  .mobile-language {
    min-width: 65px;
    height: 32px;
    border-left: 1px solid #555;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
  }
  .mobile-language svg {
    width: 9px;
    height: 9px;
  }

  .mobile-bottom-nav {
    bottom: 0;
    height: 59px;
    border-radius: 0 0 9px 9px;
  }
  .mobile-bottom-nav > button > svg {
    width: 18px;
    height: 18px;
  }

  .mobile-menu {
    width: 100vw;
    max-width: none;
    padding: 0 10px 28px;
    border-radius: 0;
    background: #f2f3f5;
  }
  .mobile-menu-top {
    height: 58px;
    padding: 0 8px;
    gap: 9px;
    background: #fff;
    border-radius: 8px 8px 0 0;
  }
  .menu-top-chevron {
    width: 9px;
    height: 9px;
    color: #444;
  }
  .menu-separator {
    width: 1px;
    height: 34px;
    background: #ddd;
  }
  .mobile-menu-top .menu-settings,
  .mobile-menu-top .menu-close {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    display: grid;
    place-items: center;
  }
  .mobile-menu-top .menu-settings {
    margin-left: auto;
    background: #555;
  }
  .mobile-menu-top .menu-close {
    margin-left: 2px;
    background: transparent;
    color: #333;
  }
  .menu-settings svg,
  .menu-close svg {
    width: 19px;
    height: 19px;
  }
  .app-promo {
    margin-top: 8px;
    height: 82px;
    padding: 5px 9px;
  }
  .app-promo img {
    width: 76px;
    height: 72px;
  }
  .app-promo b {
    font-size: 14px;
  }
  .app-promo span {
    min-height: 39px;
    margin-top: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border-radius: 9px;
    font-size: 15px;
    font-weight: 700;
  }
  .app-promo span svg {
    width: 17px;
    height: 17px;
  }
  .menu-search {
    height: 49px;
    margin: 9px 0;
    border-radius: 8px;
  }
  .menu-search svg {
    width: 17px;
    height: 17px;
  }
  .menu-list {
    border-radius: 0 0 8px 8px;
  }
  .menu-list button {
    min-height: 57px;
    height: 57px;
    grid-template-columns: 42px minmax(0, 1fr) 24px;
    padding: 0 10px;
    color: #333;
    font-size: 15px;
  }
  .menu-list button > i {
    grid-column: 1;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #eee;
    display: grid;
    place-items: center;
    font-style: normal;
  }
  .menu-list button > i svg {
    width: 17px;
    height: 17px;
    color: #444;
  }
  .menu-list button > span {
    grid-column: 2;
    margin-left: 8px;
  }
  .menu-list .menu-arrow {
    grid-column: 3;
    width: 10px;
    height: 10px;
    justify-self: center;
    color: #333;
    transition: transform 0.2s ease;
  }
  .menu-accordion.is-open .menu-arrow {
    transform: rotate(180deg);
  }
  .menu-label {
    height: 23px;
    padding: 6px 10px;
  }
  .submenu {
    padding: 0;
  }
  .submenu a {
    padding: 11px 60px;
    color: #555;
    text-decoration: none;
  }
}

@media (max-width: 440px) {
  .header-actions .btn {
    padding-left: 8px;
    padding-right: 8px;
  }
  .header-actions .btn-green,
  .header-actions .btn-dark {
    font-size: 11px;
  }
  .mobile-menu {
    padding-left: 8px;
    padding-right: 8px;
  }
}


/* ===== Corrections pack 2 ===== */
:root {
  --custom-live-dot-bg: 139 72% 46%;
  --primary-0-clr-primary: 355 91% 51%;
  --custom-support-multi-button-footer-widget: 355 91% 51%;
}

/* Both side widgets were removed; the main page now takes the full desktop width. */
.desktop-layout {
  grid-template-columns: minmax(0, 1fr);
  padding-left: 4px;
  padding-right: 4px;
}
.main-content {
  width: 100%;
  min-width: 0;
  max-width: none;
}

/* Original Android icon in the desktop footer, kept at the reference size. */
.android-link {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
}
.android-link svg {
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px;
}

/* Original quick-game row: extra cards plus real horizontal scrolling. */
.game-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(175px, 15.7vw, 232px);
  grid-template-columns: none;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: #18c548 #252525;
  cursor: grab;
}
.game-strip:active { cursor: grabbing; }
.game-strip::-webkit-scrollbar { height: 7px; }
.game-strip::-webkit-scrollbar-track {
  background: #252525;
  border-radius: 8px;
}
.game-strip::-webkit-scrollbar-thumb {
  background: #18c548;
  border-radius: 8px;
}
.game-strip article {
  min-width: 0;
  scroll-snap-align: start;
}

/* Distinct original HAR symbols in the sports selector. */
.sport-tabs {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: #6d6d6d #333;
}
.sport-tabs::-webkit-scrollbar { height: 4px; }
.sport-tabs::-webkit-scrollbar-track { background: #333; }
.sport-tabs::-webkit-scrollbar-thumb { background: #777; border-radius: 4px; }
.sport-tabs > span,
.sport-tabs > b,
.sport-tabs > .toggle {
  flex: 0 0 auto;
}
.sport-tabs span svg {
  width: 17px;
  height: 17px;
  object-fit: contain;
}
.sport-tabs-tail {
  position: sticky;
  right: 0;
  z-index: 2;
  box-shadow: -8px 0 12px #333;
}

/* The mobile app illustration is the original HAR phone with corrected palette. */
@media (max-width: 767px) {
  .mobile-app-card .phone-art {
    width: 132px;
    height: 92px;
    margin-left: 18px;
    margin-top: 31px;
    color: #e30915;
    --colored-svg-clr1: #3b3b3b;
    --colored-svg-clr30: #e30915;
    --colored-svg-clr5: #fff;
  }
  .mobile-app-copy {
    margin-left: -15px;
  }
  .support-art {
    width: 59px;
    height: 43px;
    display: grid;
    place-items: center;
    flex: 0 0 59px;
    --custom-support-multi-button-footer-widget: 355 91% 51%;
    --primary-0-clr-primary: 355 91% 51%;
  }
  .support-art .support-icon {
    position: static;
    width: 52px;
    height: 44px;
    overflow: visible;
  }

  /* Mobile order from the original: gift, login, registration. */
  .header-actions .gift { order: 1; }
  .header-actions .login-open { order: 2; }
  .header-actions .register-open { order: 3; }

  /* Fluid header: logo and buttons scale together instead of overflowing. */
  .header-main {
    gap: clamp(3px, 1.4vw, 7px);
    padding-inline: clamp(5px, 1.8vw, 8px);
  }
  .brand {
    flex: 1 1 116px;
    width: auto;
    min-width: 82px;
    max-width: 116px;
  }
  .brand img {
    width: 100%;
    max-width: 114px;
    height: auto;
  }
  .header-actions {
    flex: 1 1 auto;
    justify-content: flex-end;
    gap: clamp(3px, 1.2vw, 7px);
  }
  .header-actions .gift {
    width: clamp(32px, 8.5vw, 38px);
    height: clamp(33px, 9vw, 39px);
    flex-basis: auto;
  }
  .header-actions .btn {
    min-width: 0;
    min-height: 36px;
    padding: 8px clamp(7px, 2.2vw, 11px);
    font-size: clamp(9px, 2.45vw, 12px);
    line-height: 1.05;
  }
  .header-actions .login-open {
    flex: 0 1 72px;
  }
  .header-actions .register-open {
    flex: 0 1 142px;
  }

  .game-strip {
    grid-auto-columns: clamp(106px, 30vw, 132px);
    gap: 6px;
    padding-bottom: 7px;
  }
  .game-strip article {
    height: 108px;
    border-radius: 50%;
    overflow: visible;
    background: transparent;
  }
  .game-strip img {
    width: 76px;
    height: 76px;
    margin: 0 auto;
    display: block;
    border-radius: 50%;
  }
  .game-strip span {
    position: static;
    display: block;
    background: transparent;
    color: #222;
    padding: 4px 2px 0;
    font-size: 11px;
    line-height: 1.05;
    white-space: normal;
  }

  .mobile-live-item svg {
    --custom-live-dot-bg: 139 72% 46%;
  }
}

@media (min-width: 768px) and (max-width: 1180px) {
  .header-main { gap: 5px; }
  .brand { width: 104px; flex: 0 1 104px; }
  .brand img { max-width: 102px; }
  .partner-strip { gap: 2px; }
  .partner { min-width: 47px; padding-inline: 5px; }
  .partner-crystal { min-width: 82px; }
  .header-actions { gap: 4px; }
  .header-actions .btn { padding: 9px 9px; font-size: 11px; }
  .clock, .lang { padding-inline: 5px; }
}

@media (max-width: 350px) {
  .brand { min-width: 72px; max-width: 88px; }
  .header-actions .gift { width: 30px; }
  .header-actions .btn { padding-inline: 5px; font-size: 8.5px; }
  .header-actions .register-open { flex-basis: 112px; }
  .header-actions .login-open { flex-basis: 55px; }
}


/* ===== PHP engine integration ===== */
html,body{max-width:100%;overflow-x:hidden}
*,*::before,*::after{box-sizing:border-box}
.page-shell,.main-content,.desktop-layout,.content-area,.engine-container{min-width:0;max-width:100%}
.commercial-card-link{display:block;color:inherit;text-decoration:none;height:100%}
.hero-slide{position:relative}
.hero-slide-hit{position:absolute;inset:0;z-index:1}
.hero-slide .hero-copy{position:relative;z-index:2;pointer-events:none}
.hero-slide .hero-copy a,.hero-slide .hero-copy button{pointer-events:auto}
.hero-arrow,.hero-dots{z-index:3}
.hero-visual-title{font-size:inherit;font-weight:inherit;line-height:inherit;margin:0 0 8px}
.catalog-title{font-size:18px;font-weight:900;color:#fff;letter-spacing:.02em}
.visual-title{font-weight:800}

.engine-container{width:min(1180px,calc(100% - 32px));margin:0 auto}
.engine-intro{padding:24px 0 18px;background:linear-gradient(180deg,#111823 0%,#0d131c 100%);border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06)}
.engine-intro h1{margin:0 0 14px;color:#fff;font-size:clamp(25px,3.5vw,42px);line-height:1.12;font-weight:900}
.short-article{color:#c7d0dc;font-size:16px;line-height:1.65}
.short-article p{margin:0 0 12px}
.short-article a,.article a{color:#69d485}
.engine-cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.engine-cta-row .btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;text-decoration:none}

.engine-article-shell{padding:26px 0 34px;background:#0b1119}
.article-toc{margin:0 0 20px;padding:18px 20px;border:1px solid rgba(72,199,116,.28);border-radius:14px;background:#111a25}
.article-toc-title{font-weight:900;color:#65d183;margin-bottom:10px;font-size:15px;letter-spacing:.05em}
.article-toc ol{margin:0;padding-left:22px;display:grid;gap:8px}
.article-toc li{color:#d7dee7}
.article-toc a{color:#d7dee7;text-decoration:none}
.article-toc a:hover{color:#6bdd89}
.article-card{padding:24px;border-radius:16px;background:#111923;border:1px solid rgba(255,255,255,.07);color:#d4dbe5;line-height:1.68}
.article-card h2{scroll-margin-top:92px;margin:30px 0 14px;color:#fff;font-size:clamp(22px,3vw,31px);line-height:1.2}
.article-card h2:first-child{margin-top:0}
.article-card h3{margin:24px 0 12px;color:#e8edf4;font-size:21px}
.article-card p{margin:0 0 14px}
.article-card strong{color:#fff}

.short-article ul,.short-article ol,.article-card ul,.article-card ol,.engine-faq-shell ul,.engine-faq-shell ol{margin:16px 0 20px;padding-left:0;list-style:none;display:grid;gap:9px}
.short-article li,.article-card li,.engine-faq-shell li{position:relative;padding-left:30px;min-width:0;line-height:1.58}
.short-article ul>li::before,.article-card ul>li::before,.engine-faq-shell ul>li::before{content:"";position:absolute;left:7px;top:.66em;width:8px;height:8px;border-radius:50%;background:#56d57b;box-shadow:0 0 0 4px rgba(86,213,123,.12)}
.short-article ol,.article-card ol,.engine-faq-shell ol{counter-reset:engine-list}
.short-article ol>li,.article-card ol>li,.engine-faq-shell ol>li{counter-increment:engine-list;padding-left:40px}
.short-article ol>li::before,.article-card ol>li::before,.engine-faq-shell ol>li::before{content:counter(engine-list);position:absolute;left:0;top:.05em;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:#2ecb68;color:#07110b;font-weight:900;font-size:13px}

.table-scroll{width:100%;max-width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin:18px 0 24px;border:1px solid rgba(255,255,255,.09);border-radius:12px;background:#0d141d}
.table-scroll table{width:100%;border-collapse:collapse;table-layout:auto;margin:0}
.table-scroll th,.table-scroll td{padding:12px 14px;border:1px solid rgba(255,255,255,.09);white-space:nowrap;text-align:left;vertical-align:top;color:#dbe2ea}
.table-scroll th{background:#172331;color:#fff;font-weight:800}
.table-scroll tr:nth-child(even) td{background:#111a24}
.table-scroll::-webkit-scrollbar{height:7px}
.table-scroll::-webkit-scrollbar-track{background:#0b1119}
.table-scroll::-webkit-scrollbar-thumb{background:#35cb6a;border-radius:999px}

.engine-faq-shell{padding:32px 0 42px;background:#0d141d}
.engine-faq-shell h2{margin:0 0 18px;color:#fff;font-size:clamp(24px,3vw,32px)}
.engine-faq-shell .faq{display:grid;gap:12px}
.engine-faq-shell details,.engine-faq-shell .faq-item{border:1px solid rgba(255,255,255,.08);border-radius:13px;background:#131c27;padding:0 16px;color:#d7dee8}
.engine-faq-shell summary{cursor:pointer;list-style:none;padding:16px 34px 16px 0;font-weight:800;color:#fff;position:relative}
.engine-faq-shell summary::-webkit-details-marker{display:none}
.engine-faq-shell summary::after{content:"";position:absolute;right:2px;top:50%;width:10px;height:10px;border-right:2px solid #58d77d;border-bottom:2px solid #58d77d;transform:translateY(-70%) rotate(45deg);transition:transform .2s ease}
.engine-faq-shell details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.engine-faq-shell details>div{padding:0 0 16px;line-height:1.58}
.engine-faq-shell .reviews{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.engine-faq-shell .reviews li{padding:16px 16px 16px 44px;border:1px solid rgba(255,255,255,.08);border-radius:13px;background:#131c27}

@media(max-width:800px){
  .engine-container{width:min(100% - 20px,1180px)}
  .engine-intro{padding:19px 0 14px}
  .engine-intro h1{font-size:25px}
  .short-article{font-size:14px;line-height:1.55}
  .engine-cta-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .article-card{padding:18px 14px;border-radius:13px}
  .article-toc{padding:15px 14px}
  .article-card h2{font-size:23px}
  .article-card h3{font-size:19px}
  .table-scroll table{width:max-content;min-width:720px;max-width:none}
  .engine-faq-shell .reviews{grid-template-columns:1fr}
  .catalog-title{font-size:16px}
}
@media(max-width:420px){
  .engine-cta-row{grid-template-columns:1fr}
  .article-card{font-size:14px}
  .short-article li,.article-card li,.engine-faq-shell li{padding-left:27px}
}
.engine-section-title{margin:0 0 18px;color:#fff;font-size:clamp(24px,3vw,32px);font-weight:900;line-height:1.2}

/* ===== UI repair pack 3: links, reviews and mobile navigation ===== */
a,
a:visited,
a:hover,
a:focus,
a:active {
  text-decoration: none;
}

.engine-faq-shell .reviews li {
  color: #dbe4ee;
  font-size: 15px;
  line-height: 1.62;
}
.engine-faq-shell .reviews li strong {
  color: #59db7d;
  font-weight: 800;
}
.engine-faq-shell .reviews li span {
  color: #dbe4ee;
}

@media (max-width: 767px) {
  /* Header CTA order: gift, login (grey), registration (green). */
  .header-actions .gift { order: 1; }
  .header-actions .login-open { order: 2; }
  .header-actions .register-open { order: 3; }

  /* Bottom navigation contains both anchors and a menu button. */
  .mobile-bottom-nav {
    align-items: stretch;
    overflow: visible;
  }
  .mobile-bottom-nav > a,
  .mobile-bottom-nav > button {
    min-width: 0;
    border: 0;
    background: transparent;
    color: #6b6b6b;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 5px 2px 4px;
    font-size: 11px;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
  }
  .mobile-bottom-nav > a > svg,
  .mobile-bottom-nav > button > svg {
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
    display: block;
    fill: currentColor;
  }
  .mobile-bottom-nav > a > span,
  .mobile-bottom-nav > button > span {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mobile-bottom-nav > a.active {
    color: #333;
    font-weight: 700;
  }
  .mobile-bottom-nav > a.active > i {
    width: 38px;
    height: 38px;
    margin-top: -19px;
    margin-bottom: 1px;
    border-radius: 50%;
    background: #f11622;
    color: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 3px 8px rgba(0,0,0,.22);
  }
  .mobile-bottom-nav > a.active > i svg {
    width: 21px;
    height: 21px;
    display: block;
    fill: currentColor;
  }

  /* Restore the original card-like mobile menu for both links and accordions. */
  .mobile-menu {
    overflow-x: hidden;
  }
  .menu-list {
    display: block;
    background: #fff;
    border: 1px solid #d9dde2;
    border-radius: 9px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
  }
  .menu-list > a,
  .menu-list > .menu-group > button {
    width: 100%;
    min-height: 54px;
    margin: 0;
    padding: 7px 10px;
    border: 0;
    border-bottom: 1px solid #e2e5e9;
    border-radius: 0;
    background: #fff;
    color: #34383d;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 22px;
    align-items: center;
    column-gap: 8px;
    text-align: left;
    font-size: 14px;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
  }
  .menu-list > a:last-child,
  .menu-list > .menu-group:last-child > button {
    border-bottom: 0;
  }
  .menu-list > a:hover,
  .menu-list > .menu-group > button:hover {
    background: #f7f8fa;
  }
  .menu-list > a > i,
  .menu-list > .menu-group > button > i {
    grid-column: 1;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #eef0f2;
    color: #6320a4;
    display: grid;
    place-items: center;
    font-style: normal;
  }
  .menu-list > a > i svg,
  .menu-list > .menu-group > button > i svg {
    width: 18px;
    height: 18px;
    display: block;
    fill: currentColor;
    color: inherit;
  }
  .menu-list > a > span,
  .menu-list > .menu-group > button > span {
    grid-column: 2;
    min-width: 0;
    margin: 0;
    color: #34383d;
    overflow-wrap: anywhere;
  }
  .menu-list > .menu-group > button > .menu-arrow {
    grid-column: 3;
    width: 10px;
    height: 10px;
    justify-self: center;
    fill: #555;
    color: #555;
  }
  .menu-list .mobile-live-item > i {
    position: relative;
  }
  .menu-label {
    height: auto;
    min-height: 23px;
    padding: 6px 10px;
    background: #f0f1f3;
    color: #8a9098;
    font-size: 9px;
    line-height: 1.2;
    letter-spacing: .04em;
  }
  .menu-group {
    margin: 0;
    padding: 0;
  }
  .submenu {
    margin: 0;
    padding: 0;
    background: #f8f9fa;
  }
  .submenu a {
    display: block;
    min-height: 42px;
    padding: 12px 16px 12px 58px;
    border-bottom: 1px solid #e8eaed;
    color: #555d66;
    font-size: 13px;
    line-height: 1.35;
    text-decoration: none;
  }
  .submenu a:last-child {
    border-bottom: 0;
  }
}

/* Mobile header CTA alignment fix */
@media (max-width: 767px) {
  .header-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    min-height: 38px;
    padding-top: 0;
    padding-bottom: 0;
    text-align: center;
    line-height: 1.1;
  }
}

/* ===== UI repair pack 5: mobile filter links and review spacing ===== */
@media (max-width: 767px) {
  .mobile-filter-tabs > a {
    width: 100%;
    height: 48px;
    min-width: 0;
    padding: 0 8px;
    border: 0;
    border-radius: 8px;
    background: #fff;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
  }
  .mobile-filter-tabs > a.active {
    color: #111;
  }
  .mobile-filter-tabs > a > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }
  .mobile-filter-tabs > a > i {
    flex: 0 0 7px;
    margin: 0;
  }
  .mobile-filter-tabs > a > svg {
    flex: 0 0 22px;
    margin: 0;
  }
  .mobile-filter-tabs > a.star-tab svg {
    fill: red;
  }
  .reviews-section {
    margin-top: 26px;
  }
  .reviews-section .engine-section-title {
    margin-top: 0;
    padding-top: 2px;
  }
}