/* ==========================================================================
   Флэт | Футбольная аналитика — базовые стили
   ========================================================================== */

/* ---- Шрифты (локальные файлы, woff2, кириллица + латиница) ---- */

/* Cormorant Garamond — заголовки */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-cyrillic-500-normal.woff2?v=1") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-latin-500-normal.woff2?v=1") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-cyrillic-600-normal.woff2?v=1") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-latin-600-normal.woff2?v=1") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Manrope — основной текст */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/manrope-cyrillic-400-normal.woff2?v=1") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/manrope-latin-400-normal.woff2?v=1") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/manrope-cyrillic-500-normal.woff2?v=1") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/manrope-latin-500-normal.woff2?v=1") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/manrope-cyrillic-600-normal.woff2?v=1") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/manrope-latin-600-normal.woff2?v=1") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* IBM Plex Mono — цифры в таблицах и статистике */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-cyrillic-400-normal.woff2?v=1") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2?v=1") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-cyrillic-500-normal.woff2?v=1") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2?v=1") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Переменные ---- */
:root {
  /* цвета */
  --color-bg: #121212;
  --color-card: #181716;
  --color-line: #2A2826;
  --color-line-strong: #3A3733;
  --color-text: #ECE8E0;
  --color-text-secondary: #B8B2A7;
  --color-text-caption: #9A948A;
  --color-gold: #C8A96A;
  --color-gold-bg: #0A0A0A;

  /* шрифты */
  --font-heading: "Cormorant Garamond", serif;
  --font-body: "Manrope", sans-serif;
  --font-mono: "IBM Plex Mono", monospace;
}

/* ---- Сброс и база ---- */
* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  min-width: 360px;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 0.5em;
  color: var(--color-text);
}

h1 {
  font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem);
}

/* Один размер h2 везде на сайте — заголовки разделов должны выглядеть одинаково */
h2 {
  font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
}

p {
  margin: 0 0 1em;
  color: var(--color-text-secondary);
}

a {
  color: var(--color-text);
  text-decoration: none;
}

a:hover {
  color: #FFFFFF;
}

a:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
}

small,
.caption {
  color: var(--color-text-caption);
  font-size: 0.8125rem;
}

.mono,
table,
.stat {
  font-family: var(--font-mono);
}

img,
svg {
  max-width: 100%;
  display: block;
}

/* ---- Контейнер ---- */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

@media (min-width: 1440px) {
  .container {
    max-width: 1320px;
  }
}

/* ==========================================================================
   Шапка
   ========================================================================== */

.site-header {
  border-bottom: 1px solid var(--color-line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 16px 20px;
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  padding: 6px 0;
}

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

.brand__mark {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.brand__mark circle {
  fill: none;
  stroke: var(--color-text);
  stroke-width: 2;
}

.brand__mark line {
  stroke: var(--color-text);
  stroke-width: 2;
}

.brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.brand__name {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.375rem;
  color: var(--color-text);
}

.brand__tagline {
  font-size: 0.75rem;
  color: var(--color-text-caption);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin: 0 auto;
}

.site-nav a {
  display: inline-block;
  padding: 12px 0;
  color: var(--color-text-secondary);
  font-size: 0.9375rem;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  color: var(--color-text);
}

.site-header__aside {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.age-badge {
  border: 1px solid var(--color-line-strong);
  color: var(--color-text-caption);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  padding: 3px 10px;
  border-radius: 999px;
}

.btn-tg {
  display: inline-flex;
  align-items: center;
  background: var(--color-text);
  color: var(--color-bg);
  border: 1px solid var(--color-text);
  padding: 12px 18px;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
}

.btn-tg:hover {
  background: #FFFFFF;
  border-color: #FFFFFF;
  color: var(--color-bg);
}

.nav-toggle-checkbox {
  /* на широких экранах меню не используется — полностью убираем чекбокс
     из страницы (и из дерева доступности), а не только визуально */
  display: none;
}

.nav-toggle-label {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 6px;
  box-sizing: border-box;
  cursor: pointer;
  margin-left: auto;
}

.nav-toggle-label span:not(.sr-only) {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--color-text);
}

@media (max-width: 780px) {
  .site-header__inner {
    padding: 14px 20px;
  }

  .nav-toggle-checkbox {
    display: block;
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  .nav-toggle-label {
    display: flex;
  }

  .site-nav,
  .site-header__aside {
    display: none;
    width: 100%;
    order: 3;
  }

  .site-nav {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding-top: 16px;
    margin: 0;
  }

  .site-header__aside {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding-top: 12px;
    padding-bottom: 4px;
  }

  .btn-tg {
    width: 100%;
    text-align: center;
  }

  .nav-toggle-checkbox:checked ~ .site-nav,
  .nav-toggle-checkbox:checked ~ .site-header__aside {
    display: flex;
  }
}

/* ==========================================================================
   Подвал
   ========================================================================== */

.site-footer {
  border-top: 1px solid var(--color-line);
  margin-top: 64px;
}

.site-footer__inner {
  padding: 32px 20px;
}

.site-footer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--color-line);
}

.site-footer__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-text-caption);
  font-size: 0.875rem;
}

.site-footer__brand .brand__mark {
  width: 20px;
  height: 20px;
}

.site-footer__brand .brand__mark circle,
.site-footer__brand .brand__mark line {
  stroke: var(--color-text-caption);
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

.site-footer__links a {
  display: inline-block;
  padding: 12px 2px;
  color: var(--color-text-secondary);
  font-size: 0.875rem;
}

.site-footer__links a:hover,
.site-footer__links a:focus-visible {
  color: var(--color-text);
}

.site-footer__warning {
  padding-top: 20px;
  max-width: 900px;
  color: var(--color-text-caption);
  font-size: 0.8125rem;
  line-height: 1.6;
}

.site-footer__disclaimer {
  margin-top: 8px;
  max-width: 900px;
  color: var(--color-text-caption);
  font-size: 0.8125rem;
  line-height: 1.6;
}

/* ==========================================================================
   Кнопки
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 500;
  border: 1px solid transparent;
  white-space: nowrap;
}

.btn--solid {
  background: var(--color-text);
  color: var(--color-bg);
}

.btn--solid:hover {
  background: #FFFFFF;
  color: var(--color-bg);
}

.btn--outline {
  border-color: var(--color-line-strong);
  color: var(--color-text);
}

.btn--outline:hover {
  border-color: var(--color-text);
  color: #FFFFFF;
}

/* ==========================================================================
   Секции главной
   ========================================================================== */

section {
  padding: 64px 0;
}

.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.section-header h2 {
  margin: 0;
}

.section-header a {
  display: inline-block;
  padding: 12px 0;
  color: var(--color-text-secondary);
  font-size: 0.9375rem;
  flex-shrink: 0;
}

.section-header a:hover {
  color: var(--color-text);
}

/* ---- Первый экран ---- */

.hero {
  padding-top: 56px;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--color-line);
}

.hero__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
}

.hero__text {
  max-width: 620px;
}

.hero__lead {
  font-size: 1.0625rem;
  max-width: 560px;
}

.hero__actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.hero__mark {
  flex-shrink: 0;
  width: 220px;
  height: 220px;
}

.hero__mark circle,
.hero__mark line {
  stroke: var(--color-line-strong);
  stroke-width: 1.5;
  fill: none;
}

@media (max-width: 900px) {
  .hero__mark {
    display: none;
  }
}

@media (max-width: 780px) {
  .hero {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .hero__actions .btn {
    width: 100%;
  }
}

/* ---- Сегодня ---- */

.match-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

@media (max-width: 780px) {
  .match-grid {
    grid-template-columns: 1fr;
  }
}

.match-card {
  border: 1px solid var(--color-line);
  border-radius: 4px;
  padding: 20px;
  background: var(--color-card);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.match-card--pass {
  border-style: dashed;
  background: transparent;
}

.match-card:hover {
  border-color: var(--color-text);
}

.match-card__meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.8125rem;
  color: var(--color-text-caption);
}

.match-card__meta .mono {
  color: var(--color-text-secondary);
}

.match-card__teams {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
}

.match-card__decision {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.match-card__decision--result {
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.match-card__score {
  font-size: 0.9375rem;
  color: var(--color-text);
}

.tag {
  display: inline-flex;
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
}

.tag--bet {
  background: var(--color-text);
  color: var(--color-bg);
}

.tag--pass {
  border: 1px dashed var(--color-line-strong);
  color: var(--color-text-caption);
}

.match-card__market {
  font-size: 0.9375rem;
  color: var(--color-text);
}

.match-card__market .mono {
  color: var(--color-text-secondary);
}

.match-card__reason {
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
}

.match-card__footer {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--color-line);
  font-size: 0.8125rem;
  color: var(--color-text-caption);
}

/* ---- Полоса цифр ---- */

.stats-bar__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
}

@media (max-width: 780px) {
  .stats-bar__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.stats-bar__value {
  font-size: 1.75rem;
  font-weight: 500;
}

.stats-bar__label {
  margin-top: 6px;
  font-size: 0.8125rem;
  color: var(--color-text-caption);
}

.stats-bar__note {
  margin-top: 32px;
  text-align: center;
  font-size: 0.875rem;
  color: var(--color-text-caption);
}

.stats-bar__note a {
  display: inline-block;
  padding: 12px 4px;
  color: var(--color-text-secondary);
}

.stats-bar__note a:hover {
  color: var(--color-text);
}

/* ---- Три правила ---- */

.rules-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

@media (max-width: 780px) {
  .rules-grid {
    grid-template-columns: 1fr;
  }
}

.rule-card h3 {
  font-size: 1.25rem;
}

.rule-card p {
  margin: 0;
}

/* ---- Как появляется прогноз ---- */

.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

@media (max-width: 780px) {
  .process-grid {
    grid-template-columns: 1fr;
  }
}

.process-step__number {
  font-family: var(--font-mono);
  color: var(--color-text-caption);
  font-size: 0.875rem;
  margin-bottom: 8px;
}

.process-step h3 {
  font-size: 1.25rem;
}

.process-step p {
  margin: 0;
}

/* ---- Блок-призыв ---- */

.cta-section {
  border-top: 1px solid var(--color-line);
  text-align: center;
}

.cta-section h2 {
  margin-bottom: 8px;
}

.cta-section p {
  margin-bottom: 28px;
}

/* ==========================================================================
   Страница статистики
   ========================================================================== */

.stats-hero {
  padding-top: 56px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--color-line);
}

.stats-hero .hero__lead {
  margin-top: 16px;
}

/* ---- Полоса из 5 ячеек ---- */

.stats-bar__grid--five {
  grid-template-columns: repeat(5, 1fr);
}

@media (max-width: 780px) {
  .stats-bar__grid--five {
    grid-template-columns: repeat(2, 1fr);
  }
}

.stats-bar__caption {
  margin-top: 4px;
  font-size: 0.75rem;
  color: var(--color-text-caption);
}

/* ---- Кривая банка ---- */

.bank-curve-section {
  border-top: 1px solid var(--color-line);
}

.bank-curve {
  width: 100%;
  overflow: hidden;
}

.bank-curve__svg {
  width: 100%;
  height: auto;
  display: block;
}

.bank-curve__grid {
  stroke: var(--color-line);
}

.bank-curve__zero {
  stroke: var(--color-line-strong);
  stroke-width: 1;
}

.bank-curve__label {
  fill: var(--color-text-caption);
  font-size: 10px;
}

.bank-curve__line {
  stroke: var(--color-text);
  stroke-width: 1.5;
}

.bank-curve__point circle {
  stroke: var(--color-text);
  stroke-width: 1.5;
  fill: var(--color-bg);
  transition: fill 0.15s, stroke 0.15s;
}

.bank-curve__point--last circle {
  fill: var(--color-text);
}

.bank-curve__point:hover circle {
  stroke: #FFFFFF;
  fill: #FFFFFF;
}

.bank-curve__note {
  margin-top: 12px;
  font-size: 0.8125rem;
  color: var(--color-text-caption);
}

/* ---- История прогнозов ---- */

.history-section {
  border-top: 1px solid var(--color-line);
}

.history-filter {
  margin-bottom: 8px;
  border: none;
  padding: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.history-filter input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.history-filter label {
  display: inline-block;
  padding: 12px 16px;
  margin: 0 8px 16px 0;
  border: 1px solid var(--color-line-strong);
  border-radius: 999px;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  cursor: pointer;
}

.history-filter input:checked + label {
  background: var(--color-text);
  color: var(--color-bg);
  border-color: var(--color-text);
}

#filter-bets:checked ~ .history-table-wrap .history-row--pass {
  display: none;
}

#filter-passes:checked ~ .history-table-wrap .history-row--bet,
#filter-passes:checked ~ .history-table-wrap .history-row--removed,
#filter-passes:checked ~ .history-table-wrap .history-row--pending {
  display: none;
}

.history-table-wrap {
  border: 1px solid var(--color-line);
  border-radius: 4px;
  overflow: hidden;
}

.history-row {
  display: grid;
  grid-template-columns: 100px 1.4fr 130px 1.4fr 70px 90px 100px;
  grid-template-areas: "date match tournament decision odds result bank";
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-line);
  color: var(--color-text-secondary);
  font-size: 0.875rem;
}

.history-row:last-child {
  border-bottom: none;
}

a.history-row:hover,
a.history-row:focus-visible {
  background: var(--color-card);
  color: var(--color-text-secondary);
}

.history-header {
  color: var(--color-text-caption);
  font-size: 0.75rem;
  background: var(--color-card);
}

.history-cell--date { grid-area: date; }
.history-cell--tournament { grid-area: tournament; }
.history-cell--decision { grid-area: decision; }
.history-cell--odds { grid-area: odds; }
.history-cell--result { grid-area: result; }
.history-cell--bank { grid-area: bank; text-align: right; }

.history-cell--match {
  grid-area: match;
  color: var(--color-text);
  font-weight: 500;
}

@media (max-width: 780px) {
  .history-header {
    display: none;
  }

  .history-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "date tournament"
      "match match"
      "result result"
      "decision bank";
    row-gap: 8px;
    padding: 16px;
    border-bottom: 1px solid var(--color-line);
  }

  .history-cell--odds {
    display: none;
  }

  .history-cell--date,
  .history-cell--tournament {
    font-size: 0.75rem;
    color: var(--color-text-caption);
  }

  .history-cell--tournament {
    text-align: right;
  }

  .history-cell--match {
    font-family: var(--font-heading);
    font-size: 1.1875rem;
    font-weight: 600;
  }

  .history-cell--bank {
    text-align: right;
  }
}

/* ---- Метки итога ---- */

.result-tag {
  display: inline-flex;
  padding: 3px 10px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
}

.result-tag--win {
  background: var(--color-text);
  color: var(--color-bg);
}

.result-tag--lose,
.result-tag--void,
.result-tag--removed {
  border: 1px solid var(--color-line-strong);
  color: var(--color-text-secondary);
}

.result-tag--pass {
  border: 1px dashed var(--color-line-strong);
  color: var(--color-text-caption);
}

/* ожидает расчёта — нейтральная: точечный контур, отличается от контура LOSE и пунктира ПАС */
.result-tag--pending {
  border: 1px dotted var(--color-line-strong);
  color: var(--color-text-caption);
}

.history-cell__note {
  display: block;
  margin-top: 4px;
}

/* ---- По рынкам / по турнирам ---- */

.breakdown-section {
  border-top: 1px solid var(--color-line);
}

.breakdown-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

@media (max-width: 780px) {
  .breakdown-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

.breakdown-block h2 {
  margin-bottom: 20px;
}

.breakdown-table {
  border: 1px solid var(--color-line);
  border-radius: 4px;
  overflow: hidden;
}

.breakdown-row {
  display: grid;
  grid-template-columns: 1fr 64px 70px 70px;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--color-line);
  font-size: 0.875rem;
  align-items: center;
}

.breakdown-row:last-child {
  border-bottom: none;
}

.breakdown-row span:not(:first-child) {
  text-align: right;
}

.breakdown-header {
  color: var(--color-text-caption);
  font-size: 0.75rem;
  background: var(--color-card);
}

/* ---- Подвал страницы статистики ---- */

.stats-footnote {
  padding-top: 0;
  padding-bottom: 40px;
}

/* ==========================================================================
   Страница матча
   ========================================================================== */

.match-page {
  padding-top: 32px;
  padding-bottom: 64px;
}

/* ---- Хлебные крошки ---- */

.breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.8125rem;
  color: var(--color-text-caption);
  margin-bottom: 20px;
}

.breadcrumbs a {
  display: inline-block;
  padding: 12px 0;
  color: var(--color-text-caption);
}

.breadcrumbs a:hover {
  color: var(--color-text);
}

.breadcrumbs span:not(.breadcrumbs__sep) {
  color: var(--color-text-secondary);
}

.breadcrumbs__sep {
  color: var(--color-text-caption);
}

.match-subline {
  color: var(--color-text-secondary);
  margin-top: 4px;
  margin-bottom: 28px;
}

/* ---- Плашка публикации ---- */

.publish-plaque {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border: 1px solid var(--color-line);
  border-radius: 4px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.publish-plaque__icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.publish-plaque__icon circle,
.publish-plaque__icon line {
  stroke: var(--color-text-caption);
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: round;
}

.publish-plaque__text {
  flex: 1;
  min-width: 200px;
}

.publish-plaque__main {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--color-text);
}

.publish-plaque__sub {
  margin: 4px 0 0;
}

.publish-plaque__link {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-line-strong);
  padding: 12px 16px;
  border-radius: 999px;
}

.publish-plaque__link:hover {
  border-color: var(--color-text);
  color: var(--color-text);
}

/* ---- Двухколоночный layout ---- */

.match-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  grid-template-areas: "content aside";
  gap: 40px;
  align-items: start;
  margin-bottom: 48px;
}

.match-layout--solo {
  grid-template-columns: 340px;
  grid-template-areas: "aside";
  justify-content: start;
  margin-bottom: 0;
}

.decision-column {
  grid-area: aside;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.decision-card {
  border: 1px solid var(--color-line);
  border-radius: 4px;
  padding: 24px;
  background: var(--color-card);
}

.match-content {
  grid-area: content;
  min-width: 0;
}

@media (max-width: 900px) {
  .match-layout,
  .match-layout--solo {
    grid-template-columns: 1fr;
    grid-template-areas:
      "aside"
      "content";
  }
}

.match-section {
  margin-bottom: 40px;
}

.match-section h2 {
  margin-bottom: 12px;
}

.match-section p {
  margin: 0;
}

.match-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.match-list li {
  padding-left: 20px;
  position: relative;
  color: var(--color-text-secondary);
}

.match-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 8px;
  height: 1px;
  background: var(--color-line-strong);
}

/* ---- Карточка решения ---- */

.decision-card__label {
  font-size: 0.75rem;
  color: var(--color-text-caption);
  margin-bottom: 12px;
}

.decision-card__top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.decision-card__odds-inline {
  font-size: 0.8125rem;
  color: var(--color-text-caption);
}

.decision-card__odds-note {
  margin: 6px 0 0;
}

.decision-card__market {
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 600;
  margin-top: 12px;
}

.decision-card__flat {
  margin: 12px 0 0;
  font-size: 0.875rem;
  color: var(--color-text-caption);
}

.decision-card__reason {
  margin: 12px 0 0;
  color: var(--color-text-secondary);
}

.decision-card__result {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--color-line);
}

.decision-card__result-label {
  font-size: 0.75rem;
  color: var(--color-text-caption);
  margin-bottom: 8px;
}

.decision-card__score {
  font-size: 1.75rem;
  font-weight: 500;
  margin-bottom: 8px;
}

.decision-card__bank {
  margin-top: 8px;
  font-size: 1rem;
}

.decision-card__comment {
  margin-top: 12px;
  color: var(--color-text-secondary);
  font-size: 0.9375rem;
}

.decision-card__result-published {
  margin: 12px 0 0;
}

.decision-card__pending {
  margin: 0;
  color: var(--color-text-caption);
  font-size: 0.875rem;
}

/* ---- Поделиться / ссылка на статистику ---- */

.share-btn {
  width: 100%;
  gap: 8px;
}

.share-btn__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.share-btn__icon path {
  fill: var(--color-bg);
}

.stats-callout {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid var(--color-line);
  border-radius: 4px;
  padding: 16px 20px;
}

.stats-callout__label {
  font-size: 0.75rem;
  color: var(--color-text-caption);
}

.stats-callout__value {
  font-size: 1.0625rem;
  color: var(--color-text);
}

.stats-callout__note {
  font-size: 0.75rem;
  color: var(--color-text-caption);
}

.stats-callout:hover {
  border-color: var(--color-text);
}

.stats-callout:hover .stats-callout__value {
  color: #FFFFFF;
}

/* ---- Крупные блоки страницы матча (одинаковый ритм) ---- */

.match-block {
  border-top: 1px solid var(--color-line);
  padding-top: 48px;
  margin-top: 48px;
}

/* ---- Вопросы о матче ---- */

.faq-item {
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--color-line);
}

.faq-item:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}

.faq-item h3 {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 6px;
}

.faq-item p {
  margin: 0;
}

/* ---- Другие матчи тура ---- */

.other-matches-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

@media (max-width: 780px) {
  .other-matches-grid {
    grid-template-columns: 1fr;
  }
}

.other-match-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px solid var(--color-line);
  border-radius: 4px;
  padding: 16px;
}

.other-match-card:hover {
  border-color: var(--color-text);
}

.other-match-card__name {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--color-text);
}

.other-match-card__decision {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

.other-matches-all {
  display: inline-block;
  padding: 12px 0;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

.other-matches-all:hover {
  color: var(--color-text);
}

/* ==========================================================================
   Списки прогнозов (/prognozy/, /prognozy/segodnya/, /prognozy/<турнир>/)
   ========================================================================== */

.list-hero {
  padding-top: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--color-line);
}

.list-hero .breadcrumbs {
  margin-bottom: 16px;
}

.list-hero .hero__lead {
  margin-top: 12px;
  max-width: 640px;
}

.list-date-label {
  margin-top: -4px;
  margin-bottom: 20px;
}

.tournament-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.tournament-pill {
  display: inline-block;
  padding: 12px 18px;
  border: 1px solid var(--color-line-strong);
  border-radius: 999px;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

.tournament-pill:hover {
  border-color: var(--color-text);
  color: var(--color-text);
}

.date-group {
  margin-bottom: 32px;
}

.date-group:last-child {
  margin-bottom: 0;
}

.date-group__label {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-caption);
  margin-bottom: 16px;
}

/* ==========================================================================
   Текстовые страницы (метод, ответственная игра)
   ========================================================================== */

.article-content {
  max-width: 720px;
}

.article-content h2 {
  margin-top: 40px;
}

.article-content ul,
.article-content ol {
  margin: 0 0 1em;
  padding-left: 24px;
  color: var(--color-text-secondary);
}

.article-content li {
  margin-bottom: 8px;
}

.article-content li:last-child {
  margin-bottom: 0;
}

.article-content li > p {
  margin: 0;
}

/* таблицы расчёта в статьях словаря (фора, тотал) */
.article-content table {
  width: 100%;
  margin: 0 0 1.5em;
  border-collapse: collapse;
  border: 1px solid var(--color-line);
  font-size: 0.875rem;
}

.article-content th,
.article-content td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--color-line);
  text-align: left;
  color: var(--color-text-secondary);
}

.article-content th {
  background: var(--color-card);
  color: var(--color-text-caption);
  font-size: 0.75rem;
  font-weight: 500;
}

/* калькулятор маржи (статья «Маржа букмекера») */
.margin-calc {
  margin: 40px 0;
  padding: 24px;
  background: var(--color-card);
  border: 1px solid var(--color-line);
  border-radius: 12px;
}

.margin-calc[hidden],
.margin-calc [hidden] {
  display: none;
}

.margin-calc h2 {
  margin-top: 0;
}

.margin-calc__mode {
  margin: 0 0 8px;
  padding: 0;
  border: 0;
}

.margin-calc__mode input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.margin-calc__mode label {
  display: inline-block;
  padding: 12px 16px;
  margin: 0 8px 12px 0;
  border: 1px solid var(--color-line-strong);
  border-radius: 999px;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  cursor: pointer;
}

.margin-calc__mode input:checked + label {
  background: var(--color-text);
  color: var(--color-bg);
  border-color: var(--color-text);
}

.margin-calc__mode input:focus-visible + label {
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
}

.margin-calc__fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
}

.margin-calc__field label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

.margin-calc__input {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  background: var(--color-bg);
  border: 1px solid var(--color-line-strong);
  border-radius: 8px;
  color: var(--color-text);
  font-size: 1rem;
}

.margin-calc__input:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 1px;
}

.margin-calc__input[aria-invalid="true"] {
  border-style: dashed;
}

.margin-calc__hint {
  min-height: 1.3em;
  margin: 6px 0 0;
}

.margin-calc__fair {
  margin: 2px 0 0;
}

.margin-calc__result {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin: 24px 0 12px;
  padding-top: 16px;
  border-top: 1px solid var(--color-line);
}

.margin-calc__result-label {
  color: var(--color-text-secondary);
}

.margin-calc__result-value {
  font-size: 1.75rem;
  color: var(--color-text);
}

@media (max-width: 480px) {
  .margin-calc {
    padding: 16px;
  }
}

.article-disclaimer {
  margin-top: 40px;
  max-width: 720px;
}

/* ---- Карточки статей (/stati/, главная) ---- */

.articles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

@media (max-width: 780px) {
  .articles-grid {
    grid-template-columns: 1fr;
  }
}

.article-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid var(--color-line);
  border-radius: 4px;
  padding: 20px;
}

.article-card:hover {
  border-color: var(--color-text);
}

.article-card__title {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text);
}

.article-card__desc {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

.warning-box {
  border: 1px solid var(--color-line-strong);
  border-radius: 4px;
  padding: 20px 24px;
  margin-bottom: 40px;
  color: var(--color-text-secondary);
  font-size: 0.9375rem;
  line-height: 1.6;
}