:root {
  --brand-page-bg: #051232;
  --brand-header-bg: #000c24;
  --brand-surface: #051232;
  --brand-surface-alt: #062b50;
  --brand-primary: #a71f67;
  --brand-primary-hover: #c42a7b;
  --brand-primary-active: #7f194f;
  --brand-accent: #ffd700;
  --brand-accent-hover: #e6bf00;
  --brand-secondary: #06a9aa;
  --brand-success: #16c72e;
  --brand-text: #ffffff;
  --brand-text-muted: #b8c6dc;
  --brand-link: #70e6ec;
  --brand-border: rgba(255, 255, 255, .16);
  --brand-focus: #ffd700;
  --brand-radius-sm: 8px;
  --brand-radius-md: 10px;
  --brand-radius-lg: 12px;
  --brand-shadow-sm: 0 5px 16px rgba(0, 0, 0, .18);
  --brand-shadow-md: 0 18px 42px rgba(0, 0, 0, .28);

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

body { background: var(--brand-page-bg); color: var(--brand-text); }
.site-header { background: var(--brand-header-bg); }
.header-shell,
.section-shell,
.content-panel,
.page-card { background: var(--brand-surface); border: 1px solid var(--brand-border); box-shadow: var(--brand-shadow-sm); }
.header-shell { border-top-color: rgba(6, 169, 170, .42); }
.brand-link img { width: 154px; height: auto; aspect-ratio: 360 / 127; object-fit: contain; }
.primary-nav > ul { display: flex; align-items: center; gap: 18px; }
.nav-bonus { position: relative; }
.nav-bonus-row { display: flex; align-items: center; gap: 2px; }
.nav-bonus-row .nav-link { min-height: 70px; }
.bonus-submenu-toggle { width: 28px; height: 28px; padding: 0; border: 1px solid transparent; border-radius: 50%; background: transparent; color: var(--brand-text-muted); cursor: pointer; }
.bonus-submenu-toggle:hover,
.bonus-submenu-toggle:focus-visible { color: var(--brand-accent); border-color: var(--brand-accent); outline: none; }
.primary-nav .nav-submenu { display: none; position: absolute; top: calc(100% - 1px); left: 0; z-index: 60; min-width: 210px; padding: 8px; gap: 2px; list-style: none; background: var(--brand-header-bg); border: 1px solid var(--brand-border); border-radius: var(--brand-radius-sm); box-shadow: var(--brand-shadow-md); }
.primary-nav .nav-submenu .nav-link { min-height: 38px; padding: 8px 12px; white-space: nowrap; border-radius: 6px; }
.primary-nav .nav-submenu .nav-link:hover,
.primary-nav .nav-submenu .nav-link:focus-visible { background: rgba(6, 169, 170, .16); }
.primary-nav .nav-bonus:hover > .nav-submenu,
.primary-nav .nav-bonus:focus-within > .nav-submenu,
.primary-nav .nav-bonus.submenu-open > .nav-submenu { display: grid; }
.auth-actions .btn-register { background: var(--brand-primary); color: #fff; }
.auth-actions .btn-register:hover,
.auth-actions .btn-register:focus-visible { background: var(--brand-primary-hover); }
.btn:focus-visible,
.nav-link:focus-visible,
.brand-link:focus-visible,
.footer-nav a:focus-visible { outline: 3px solid var(--brand-focus); outline-offset: 3px; }
.hero-card { background: var(--brand-header-bg); border: 1px solid var(--brand-border); box-shadow: var(--brand-shadow-md); }
.hero-overlay { background: linear-gradient(90deg, rgba(0, 12, 36, .96), rgba(0, 12, 36, .7) 48%, rgba(0, 12, 36, .08)); }
.hero-card:not(.hero-main) .hero-overlay { background: linear-gradient(0deg, rgba(0, 12, 36, .92), rgba(0, 12, 36, .24)); }
.hero-tag { color: var(--brand-accent); }
.content-copy h3 { color: var(--brand-secondary); }
.hero-content span, .info-table th, .faq-item summary::after { color: var(--brand-accent); }
.icon-card, .match-card, .faq-item { background: rgba(0, 12, 36, .48); border-color: var(--brand-border); }
.see-all { border-color: var(--brand-secondary); }
.see-all:hover, .see-all:focus-visible { background: var(--brand-secondary); color: #001526; }
.arrow-btn.next, .btn-primary { background: var(--brand-accent); color: #001526; }
.arrow-btn.prev { background: var(--brand-secondary); color: #001526; }
.btn-outline { border-color: var(--brand-secondary); }
.btn-outline:hover, .btn-outline:focus-visible { background: var(--brand-secondary); color: #001526; }
.page-card a:not(.btn):not(.nav-link),
.content-panel a:not(.btn):not(.nav-link) { color: var(--brand-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.page-card a:not(.btn):not(.nav-link):hover,
.content-panel a:not(.btn):not(.nav-link):hover { color: #b4fbff; }
.info-table { background: rgba(0, 12, 36, .58); }
.info-table th { background: rgba(167, 31, 103, .34); }
.info-table th, .info-table td { border-color: var(--brand-border); }
.faq-item[open] { background: rgba(167, 31, 103, .2); border-color: rgba(255, 215, 0, .44); }
.footer-links-block { border-top-color: var(--brand-secondary); }
.site-footer { background: var(--brand-page-bg); }
.chat-float { background: var(--brand-primary); }

@media (min-width: 981px) {
  .primary-nav .nav-submenu { grid-template-columns: 1fr; }
}

@media (max-width: 980px) {
  .primary-nav .nav-submenu { position: static; min-width: 0; margin: 3px 0 6px; padding: 4px 8px; box-shadow: none; background: rgba(0, 12, 36, .34); }
  .primary-nav .nav-bonus:hover > .nav-submenu,
  .primary-nav .nav-bonus:focus-within > .nav-submenu { display: none; }
  .primary-nav .nav-bonus.submenu-open > .nav-submenu { display: grid; }
  .nav-bonus-row .nav-link { min-height: 42px; }
  .bonus-submenu-toggle { margin-left: auto; }
}

@media (max-width: 640px) {
  .brand-link img { width: 124px; }
  .header-shell, .section-shell, .content-panel, .page-card { box-shadow: none; }
}