:root {
  --brand-page-bg: #feffff;
  --brand-surface: #ffffff;
  --brand-surface-alt: #f4f5f5;
  --brand-header-bg: #d0d1d3;
  --brand-footer-bg: #d1d2d0;
  --brand-primary: #ff8a57;
  --brand-primary-hover: #e97848;
  --brand-primary-active: #c85e36;
  --brand-text: #000101;
  --brand-text-muted: #585b5f;
  --brand-text-inverse: #ffffff;
  --brand-border: rgba(0, 1, 1, 0.26);
  --brand-border-soft: rgba(0, 1, 1, 0.13);
  --brand-focus: #b74e2d;
  --brand-table-even: #fe8c55;
  --brand-table-odd: #feb390;
  --brand-shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.08);
  --brand-shadow-md: 0 14px 28px rgba(0, 0, 0, 0.12);
  --brand-radius-sm: 5px;
  --brand-radius-md: 8px;
  --brand-radius-lg: 12px;

  --background: var(--brand-page-bg);
  --foreground: var(--brand-surface);
  --surface: var(--brand-surface-alt);
  --surface-2: #fff3ed;
  --primary: var(--brand-primary);
  --primary-hover: var(--brand-primary-hover);
  --muted: #d66d48;
  --text: var(--brand-text);
  --soft: var(--brand-header-bg);
  --radius: var(--brand-radius-md);
}

html,
body {
  background: var(--brand-page-bg);
  color: var(--brand-text);
  font-family: Arial, Helvetica, sans-serif;
}

body {
  min-width: 300px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid var(--brand-focus);
  outline-offset: 3px;
}

.site-header {
  background: var(--brand-header-bg);
  border-bottom: 1px solid var(--brand-border);
  padding-top: 0;
}

.header-shell {
  min-height: 72px;
  margin-inline: 0;
  border-radius: 0;
  background: var(--brand-header-bg);
  padding: 0 24px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.brand-link {
  padding-block: 12px;
}

.brand-link img {
  width: 112px;
  height: auto;
  aspect-ratio: 224 / 41;
  object-fit: contain;
}

.primary-nav ul {
  gap: 14px;
}

.nav-link {
  min-height: 72px;
  color: #020002;
  font-weight: 600;
  font-size: 14px;
}

.nav-link:hover,
.nav-link:focus,
.nav-link.is-active {
  color: var(--brand-primary-active);
}

.nav-link::after {
  background: var(--brand-primary);
  height: 2px;
}

.auth-actions {
  gap: 10px;
}

.btn {
  border-radius: var(--brand-radius-sm);
  min-height: 40px;
  padding: 8px 18px;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.btn-primary {
  background: var(--brand-primary);
  color: var(--brand-text);
  box-shadow: var(--brand-shadow-sm);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--brand-primary-hover);
  color: var(--brand-text);
  box-shadow: 0 6px 16px rgba(201, 94, 54, 0.24);
  transform: translateY(-1px);
}

.btn-outline {
  border-color: #020002;
  color: #020002;
  background: transparent;
}

.btn-outline:hover,
.btn-outline:focus-visible {
  background: var(--brand-text);
  border-color: var(--brand-text);
  color: var(--brand-text-inverse);
}

.btn-register {
  min-width: 136px;
}

.plus-icon {
  background: #fff3ed;
  color: var(--brand-primary-active);
}

.menu-toggle {
  background: var(--brand-primary);
  border-radius: var(--brand-radius-sm);
}

.menu-toggle span {
  background: var(--brand-text);
}

.hero-section {
  max-width: 1240px;
  gap: 18px;
  padding-top: 28px;
}

.hero-card {
  border: 1px solid var(--brand-border-soft);
  border-radius: var(--brand-radius-sm);
  background: var(--brand-surface-alt);
  box-shadow: var(--brand-shadow-sm);
}

.hero-overlay {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.42) 48%, rgba(0, 0, 0, 0.06));
}

.hero-card:not(.hero-main) .hero-overlay {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.16));
}

.hero-tag,
.hero-content span,
.content-copy h3 {
  color: var(--brand-primary);
}

.hero-content h1,
.hero-content h2,
.hero-card-title,
.hero-offer {
  color: var(--brand-text-inverse);
}

.section-shell,
.content-panel,
.page-card {
  border: 1px solid var(--brand-border-soft);
  border-radius: var(--brand-radius-md);
  background: var(--brand-surface);
  color: var(--brand-text);
  box-shadow: var(--brand-shadow-sm);
}

.section-shell {
  max-width: 1240px;
  padding: 20px 18px;
}

.section-head h2,
.section-title,
.content-panel h2,
.page-card h1,
.page-card h2 {
  color: var(--brand-text);
}

.icon-card {
  border: 1px solid var(--brand-border-soft);
  border-radius: var(--brand-radius-md);
  background: var(--brand-surface-alt);
  filter: grayscale(1);
  opacity: 0.72;
}

.icon-card:hover,
.icon-card:focus {
  background: #fff3ed;
  border-color: var(--brand-primary);
  opacity: 1;
}

.game-card {
  border-radius: var(--brand-radius-md);
  box-shadow: var(--brand-shadow-sm);
}

.match-card {
  border-color: var(--brand-border-soft);
  background: var(--brand-surface-alt);
  box-shadow: var(--brand-shadow-sm);
  color: var(--brand-text);
}

.match-bg {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.72), transparent 40%), radial-gradient(circle at 80% 10%, rgba(255, 138, 87, 0.24), transparent 30%), linear-gradient(0deg, rgba(0, 0, 0, 0.12), rgba(255, 255, 255, 0.58));
}

.match-top,
.match-top b,
.teams b {
  color: var(--brand-text-muted);
}

.versus {
  color: rgba(0, 1, 1, 0.25);
}

.odds a {
  background: rgba(255, 138, 87, 0.2);
  color: var(--brand-text);
}

.odds span {
  color: var(--brand-text-muted);
}

.game-actions {
  background: rgba(0, 0, 0, 0.62);
}

.arrow-btn {
  border-radius: var(--brand-radius-sm);
}

.arrow-btn.prev {
  background: var(--brand-header-bg);
  color: var(--brand-text);
}

.arrow-btn.next {
  background: var(--brand-primary);
  color: var(--brand-text);
}

.see-all {
  border-color: var(--brand-border);
  border-radius: var(--brand-radius-sm);
  color: var(--brand-text);
}

.see-all:hover,
.see-all:focus-visible {
  background: var(--brand-text);
  color: var(--brand-text-inverse);
}

.scroll-row {
  scrollbar-color: rgba(0, 1, 1, 0.34) transparent;
}

.scroll-row::-webkit-scrollbar-thumb {
  background: rgba(0, 1, 1, 0.34);
}

.content-panel {
  padding: 26px;
}

.content-panel p,
.content-panel li,
.page-card p,
.page-card li,
.info-table td,
.faq-item p {
  color: #242526;
}

.content-copy a,
.page-card a:not(.btn),
.breadcrumb a,
.info-table a,
.faq-item a {
  color: var(--brand-primary-active);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.breadcrumb {
  color: var(--brand-text-muted);
}

.info-table {
  border: 1.5px solid #0c090a;
  border-radius: var(--brand-radius-sm);
  background: var(--brand-surface);
}

.info-table th,
.info-table td {
  border-color: #0c090a;
  color: var(--brand-text);
}

.info-table th {
  background: var(--brand-table-even);
}

.info-table tbody tr:nth-child(odd) td {
  background: var(--brand-table-odd);
}

.info-table tbody tr:nth-child(even) td {
  background: var(--brand-table-even);
}

.faq-item {
  border: 1px solid var(--brand-border);
  border-radius: var(--brand-radius-sm);
  background: var(--brand-table-even);
}

.faq-item summary {
  color: var(--brand-text);
}

.faq-item summary::after {
  color: var(--brand-text);
}

.site-footer {
  background: var(--brand-footer-bg);
  border-top: 1px solid var(--brand-border);
}

.footer-nav a,
.copyright,
.social-row a {
  color: var(--brand-text);
}

.footer-nav a:hover,
.footer-nav a:focus-visible,
.copyright a:hover,
.copyright a:focus-visible {
  color: var(--brand-primary-active);
}

.social-row {
  border-top-color: rgba(0, 1, 1, 0.28);
}

.payment-strip {
  filter: grayscale(0.2);
  opacity: 0.72;
}

.back-to-top,
.chat-float {
  background: var(--brand-primary);
  color: var(--brand-text);
}

.route-content {
  max-width: 760px;
  margin-inline: auto;
}

.auth-panel {
  max-width: 500px;
  margin: 24px auto 4px;
  padding: 24px;
  border: 1px solid var(--brand-border);
  border-radius: var(--brand-radius-md);
  background: var(--brand-surface-alt);
  box-shadow: var(--brand-shadow-sm);
}

.auth-panel h2 {
  margin-top: 0;
  font-size: 24px;
}

.auth-panel label {
  display: block;
  margin: 14px 0 6px;
  color: var(--brand-text);
  font-weight: 700;
}

.auth-panel input,
.auth-panel select {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--brand-border);
  border-radius: var(--brand-radius-sm);
  background: var(--brand-surface);
  color: var(--brand-text);
}

.auth-panel input:hover,
.auth-panel input:focus-visible,
.auth-panel select:hover,
.auth-panel select:focus-visible {
  border-color: var(--brand-primary-active);
  box-shadow: 0 0 0 3px rgba(255, 138, 87, 0.22);
}

.auth-panel .btn {
  width: 100%;
  margin-top: 18px;
}

.nav-item-has-submenu {
  position: relative;
}

.nav-link-wrap {
  display: flex;
  align-items: center;
  min-height: 72px;
}

.nav-link-wrap .nav-link {
  min-height: 72px;
}

.submenu-toggle {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-left: 2px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--brand-text);
  cursor: pointer;
}

.submenu-toggle[aria-expanded="true"] {
  background: var(--brand-primary);
}

.nav-submenu {
  position: absolute;
  top: calc(100% - 4px);
  left: 0;
  z-index: 60;
  display: none;
  min-width: 190px;
  padding: 6px;
  border: 1px solid var(--brand-border);
  border-radius: var(--brand-radius-sm);
  background: var(--brand-header-bg);
  box-shadow: var(--brand-shadow-md);
}

.nav-item-has-submenu.is-open .nav-submenu {
  display: block;
}

.nav-submenu a {
  display: block;
  padding: 9px 11px;
  border-radius: var(--brand-radius-sm);
  color: var(--brand-text);
  font-size: 14px;
  font-weight: 600;
}

.nav-submenu a:hover,
.nav-submenu a:focus-visible {
  background: var(--brand-primary);
  color: var(--brand-text);
}

@media (max-width: 980px) {
  .header-shell {
    background: var(--brand-header-bg);
  }

  .primary-nav {
    background: var(--brand-surface);
    border: 1px solid var(--brand-border);
    box-shadow: var(--brand-shadow-md);
  }

  .nav-link,
  .nav-link-wrap .nav-link {
    min-height: 42px;
    color: var(--brand-text);
  }

  .nav-link-wrap {
    min-height: 42px;
    justify-content: space-between;
  }

  .nav-link-wrap .nav-link {
    flex: 1;
  }

  .submenu-toggle {
    background: var(--brand-table-odd);
  }

  .nav-submenu {
    position: static;
    min-width: 0;
    border: 0;
    border-top: 1px solid var(--brand-border-soft);
    border-radius: 0;
    background: var(--brand-surface-alt);
    box-shadow: none;
  }

  .site-header.menu-open .nav-item-has-submenu.is-open .nav-submenu {
    display: block;
  }
}

@media (max-width: 640px) {
  .header-shell {
    padding-inline: 14px;
  }

  .brand-link img {
    width: 104px;
  }

  .content-panel,
  .page-card {
    border-radius: var(--brand-radius-md);
  }

  .auth-panel {
    padding: 19px;
  }
}