/* Дизайн «Б»: белый фон, почти чёрный текст, лайм — единственный акцент. «Да» — зелёный, «Нет» — оранжевый:
   мягкая заливка в списках, сплошная — в главных карточках. Plus Jakarta Sans (кириллица — Golos Text) — весь текст,
   цифры табличные (tabular-nums), чтобы не прыгали при обновлении. Скругления 10–24px. */
:root {
  --page: #FFFFFF; --surface: #FFFFFF; --paper: #F3F6F1; --paper-2: #F6F7F4; --chip: #F2F4F0;
  --ink: #101613; --ink-2: #5B6660; --ink-3: #3E4843; --line: #E1E5DF; --line-2: #EEF1EC; --card-line: #E4E7E2;
  --lime: #C8F25A; --dark: #101613; --dark-2: #1B231F; --dark-line: #2A3430; --dark-ink-2: #C7CEC9;
  /* «Да» и «Нет»: мягкая заливка (--yes/--no), тон для текста (--*-ink), сплошной цвет кнопки (--*-solid), средний — для полосок (--*-mid) */
  --yes: #E5F3EB; --yes-ink: #075C3A; --yes-solid: #0A7C4E; --yes-mid: #4DB383;
  --no: #FCEBE2; --no-ink: #9A330A; --no-solid: #C2410C; --no-mid: #EE9A6E;
  --up-on-dark: #7EE2A8; --down-on-dark: #FFB38A;
  /* старые имена токенов — их используют модули */
  --sun: var(--lime); --sun-bg: #F1FAD8; --sun-line: #D9EBA8; --violet: var(--yes-solid);
  --bg: var(--page); --card: var(--surface); --text: var(--ink); --muted: var(--ink-2); --up: var(--yes-ink); --down: var(--no-ink); --accent: var(--yes-solid);
  --body: 'Plus Jakarta Sans', 'Golos Text', system-ui, sans-serif;
  --display: var(--body);
  --sky: #E3EEFF; --yes-tint: var(--yes);
  --focus: var(--yes-solid);
  --wrap: 1280px; --hdr: 64px;
  /* высота нижней панели на телефоне: на неё поднимается всё, что прижато к низу экрана */
  --below: 0px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr) + 60px); }
body { margin: 0; background: var(--page); color: var(--ink); font: 400 16px/1.5 var(--body); font-variant-numeric: tabular-nums; }
a { color: var(--yes-solid); }
a:hover { color: var(--yes-ink); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
h1, h2, h3 { letter-spacing: -.02em; }

/* Шапка: знак и название бренда, навигация (на десктопе — в строку), серия, очки с лаймовым «+», кружок профиля.
   Липкая, на всю ширину: внутренние отступы выравнивают содержимое по колонке страницы. */
header { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 10px; min-height: var(--hdr);
  padding: 10px max(16px, calc((100vw - var(--wrap)) / 2 + 24px)); background: var(--page); border-bottom: 1px solid var(--card-line); }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font: 800 21px/1 var(--body); letter-spacing: -.03em; color: var(--ink); text-decoration: none; white-space: nowrap; }
.brand:hover { color: var(--ink); }
.brand::before { content: ''; flex: none; width: 34px; height: 34px; border-radius: 10px;
  background: var(--dark) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath d='M9 23 15 16l5 4 7-9' fill='none' stroke='%23C8F25A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='27' cy='11' r='2.6' fill='%23C8F25A'/%3E%3C/svg%3E") center / 100% no-repeat; }
.spacer { flex: 1; }
.slot-header { display: contents; }
.balance { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 5px 0 14px; border-radius: 12px; background: var(--chip);
  font-size: 14px; white-space: nowrap; }
.balance small { display: none; }
.balance b { font-weight: 800; }
.balance:not(:has(.bal-plus)) { padding-right: 14px; }
.bal-plus { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--lime); color: var(--ink); text-decoration: none; }
.bal-plus:hover { color: var(--ink); background: #B7E443; }
.bal-plus svg { width: 14px; height: 14px; }
.avatar { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; border: 0; background: var(--dark); color: var(--lime); cursor: pointer; padding: 0; }
.avatar svg { width: 20px; height: 20px; }
.avatar:hover, .avatar[aria-expanded="true"] { background: var(--ink-3); }

/* Навигация: пункты со значком и подписью; колокольчик модуля notify встаёт в #slot-nav */
.tabbar { display: flex; align-items: center; gap: 4px; margin-left: 12px; }
.tb-slot { display: contents; }
.tb { position: relative; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px;
  background: none; color: var(--ink-2); font: 700 15px/1 var(--body); text-decoration: none; cursor: pointer; white-space: nowrap; }
.tb-i { position: relative; display: inline-grid; place-items: center; }
.tb svg { width: 20px; height: 20px; }
.tb:hover { color: var(--ink); }
.tb[aria-current="page"] { color: var(--ink); background: var(--line-2); }
.tb-me { display: none; }   /* на десктопе профиль — кружок справа */
.tb.nt-bell { display: inline-flex; width: auto; height: auto; border: 0; padding: 0 16px; color: var(--ink-2); }
.tb.nt-bell:hover, .tb.nt-bell[aria-expanded="true"] { color: var(--ink); }
.tb .nt-count { top: -8px; right: -12px; }

/* Меню профиля: аккаунт, публичный профиль, приглашение (пункты модулей в #slot-menu), страна и язык */
.pm { position: fixed; inset: 0; z-index: 55; }
.pm-bg { position: absolute; inset: 0; }
.pm-card { position: absolute; top: calc(var(--hdr) + 6px); right: max(16px, calc((100vw - var(--wrap)) / 2 + 24px)); width: min(340px, calc(100vw - 32px));
  background: var(--surface); border: 1px solid var(--card-line); border-radius: 22px; padding: 12px 18px 18px; box-shadow: 0 20px 50px rgba(16, 22, 19, .18); }
.pm-head { display: flex; align-items: center; justify-content: space-between; }
.pm-head h2 { font: 800 18px/1.2 var(--body); margin: 0; }
.pm-x { width: 44px; height: 44px; border: 0; background: var(--chip); font-size: 24px; line-height: 1; cursor: pointer; color: var(--ink); border-radius: 12px; }
.pm-x:hover { background: var(--line-2); }
.pm-list { display: flex; flex-direction: column; margin: 4px 0 10px; }
.pm-list:empty { display: none; }
.pm-list > a { order: 5; display: flex; align-items: center; min-height: 48px; padding: 0 4px; border: 0; border-top: 1px solid var(--line-2); color: var(--ink);
  font: 700 16px/1.2 var(--body); text-decoration: none; background: none; border-radius: 0; white-space: normal; }
.pm-list > a:hover { box-shadow: none; color: var(--yes-solid); }
.pm-list > #soc-me { order: 1; } .pm-list > #acc-btn { order: 2; } .pm-list > #soc-inv-link { order: 3; }
.pm-loc { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; border-top: 1px solid var(--line-2); padding-top: 12px; }
.pm-loc label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.pm-loc select { appearance: none; width: 100%; min-height: 44px; background: var(--chip); border: 1px solid var(--line); border-radius: 12px; padding: 6px 10px;
  font: 700 15px var(--body); color: var(--ink); cursor: pointer; }
.pm-loc select:hover { border-color: var(--ink); }

main { max-width: var(--wrap); margin: 0 auto; padding: 8px 24px 64px; }

/* Ценник вероятности: крупное число и подпись; на тёмной карточке — тёмная плашка */
.tag { display: inline-flex; flex-direction: column; align-items: center; background: var(--chip); border-radius: 12px; padding: 7px 10px 6px; line-height: 1; min-width: 68px; }
.tag b { font: 800 20px/1 var(--body); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.tag small { font-size: 11px; font-weight: 600; margin-top: 3px; color: var(--ink-2); }
.tag.big { padding: 12px 16px 10px; min-width: 116px; border-radius: 16px; }
.tag.big b { font-size: 44px; letter-spacing: -.04em; }
.tag.mid b { font-size: 30px; }
.tag.big small { font-size: 13px; margin-top: 5px; }

/* Кнопки Да/Нет: в списках — мягкие, в главных карточках (.hero) — сплошные */
.sides { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.side { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 2px 8px; border: 0; border-radius: 12px;
  padding: 10px 16px; cursor: pointer; font: 800 15px/1.15 var(--body); min-height: 48px; min-width: 0; text-align: left; }
.side span { min-width: 0; white-space: nowrap; }
.side b { font: 800 17px/1 var(--body); white-space: nowrap; }
.side.up { background: var(--yes); color: var(--yes-ink); } .side.down { background: var(--no); color: var(--no-ink); }
.side.up:hover:not(:disabled) { background: var(--yes-solid); color: #fff; } .side.down:hover:not(:disabled) { background: var(--no-solid); color: #fff; }
.side:disabled { background: var(--line-2); color: var(--ink-2); cursor: not-allowed; }
.side:disabled { justify-content: center; flex-wrap: wrap; column-gap: 6px; row-gap: 2px; text-align: center; }
.side:disabled b { font: 700 14px var(--body); white-space: normal; }

/* Главная карточка вопроса (страница рынка и главная): светлая плашка без рамки */
.hero { background: var(--paper); border-radius: 24px; padding: 28px; margin: 16px 0 32px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 28px; align-items: center; }
.hero h1 { font: 800 clamp(24px, 3.4vw, 34px)/1.15 var(--body); margin: 0; letter-spacing: -.03em; max-width: 20ch; }
.hero-in { display: contents; }
.hero .meta { grid-column: 1 / -1; display: flex; gap: 6px 28px; flex-wrap: wrap; align-items: flex-start; margin-top: -4px; color: var(--ink-2); font-size: 14px; font-weight: 600; }
.hero .meta b { display: block; color: var(--ink); font: 800 18px/1.25 var(--body); }
.hero .meta .timer { font: 800 22px/1.1 var(--body); margin-top: 2px; }
.hero .meta em { font-style: normal; font-size: 16px; white-space: nowrap; }
.hero .meta .up em, .dev.up { color: var(--yes-ink); } .hero .meta .down em, .dev.down { color: var(--no-ink); }
.hero .meta .dev { flex-basis: 100%; font-weight: 800; font-size: 15px; }
.hero .meta .dev.flat { color: var(--ink-2); }
.hero .meta .cat { width: 22px; height: 22px; margin: 0 6px -4px 0; }
.hero .meta > span:has(.cat) b { display: inline; }
.hero .sides, .hero-sides, .hero-stake { grid-column: 1 / -1; }
.hero .side { padding: 14px 20px; font-size: 17px; min-height: 56px; border-radius: 14px; }
.hero .side b { font-size: 20px; }
.hero .side.up:not(:disabled) { background: var(--yes-solid); color: #fff; } .hero .side.up:hover:not(:disabled) { background: var(--yes-ink); }
.hero .side.down:not(:disabled) { background: var(--no-solid); color: #fff; } .hero .side.down:hover:not(:disabled) { background: var(--no-ink); }
.hero .side:disabled b, .side:disabled b { font-size: 14px; }
.hero .note { grid-column: 1 / -1; margin: -6px 0 0; font-size: 14px; color: var(--ink-2); min-height: 20px; }
.hero .note:empty { display: none; }
.hero-stake:empty { display: none; }

/* Суммы на странице рынка и в листе прогноза: под каждой — сколько получишь */
.stake { display: grid; gap: 8px; margin-top: -6px; }
.stake-h { margin: 0; font-size: 14px; color: var(--ink-2); font-weight: 700; }
.stake .stake-chips { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.stake-chips .chip { min-height: 44px; padding: 0; }
.stake-chips .chip[aria-checked="true"], .chips .chip.on { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.stake-win { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; font-size: 15px; color: var(--ink-2); }
.stake-win span { padding: 0 8px; } .stake-win b { color: var(--ink); }
.stake-win .up { border-left: 3px solid var(--yes-solid); } .stake-win .down { border-left: 3px solid var(--no-solid); }
a.hero-link { color: inherit; text-decoration: none; }
a.hero-link:hover { color: inherit; }
a.hero-link:hover h1 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }

/* Разделы главной: заголовок 26px (на телефоне 21px), ссылка «все» справа, промежутки 48px */
.sec { margin-top: 48px; }
.sec h2, .sec-head h2 { font: 800 26px/1.2 var(--body); margin: 0; letter-spacing: -.02em; }
.sec > p, .sec-sub { margin: 4px 0 14px; color: var(--ink-2); font-size: 15px; font-weight: 500; }
.sec-head { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; }
.sec-head + .sec-sub, .sec-head + .qs, .sec-head + .cards, .sec-head + .wx-grid { margin-top: 14px; }

/* Списки вопросов: карточка с тонкой рамкой, строки через линию */
.qs { list-style: none; margin: 0; padding: 0; background: var(--surface); border-radius: 20px; border: 1px solid var(--card-line); overflow: hidden; }
.q { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 14px; padding: 14px 18px; align-items: center; }
.q + .q { border-top: 1px solid var(--line-2); }
.q a.qt { color: var(--ink); text-decoration: none; font-weight: 700; font-size: 16px; line-height: 1.3; display: flex; gap: 10px; align-items: flex-start; }
.cat { flex: none; width: 24px; height: 24px; }
.q a.qt .cat { margin-top: -1px; }
.qp { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--ink-2); margin-top: 4px; }
.qp svg { width: 14px; height: 14px; }
.hero .note .qp { font-size: 14px; margin: 0 14px 0 0; }
.q a.qt:hover { text-decoration: underline; }
.q .qm { display: block; color: var(--ink-2); font-size: 13px; font-weight: 600; margin-top: 3px; font-variant-numeric: tabular-nums; }
.q .sides { grid-column: 1 / -1; }
.q .side { padding: 8px 14px; min-height: 44px; }
.q .done { grid-column: 1 / -1; font-size: 14px; font-weight: 700; }

/* Строка «Скоро закрываются» / «Доллар» / «Итоги»: плитка категории, вопрос, шанс, мягкие «Да/Нет» */
.row { grid-template-columns: 40px minmax(0, 1fr) auto minmax(220px, 260px); gap: 10px 16px; }
.row:hover { background: var(--paper-2); }
.tile { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; font: 800 12px/1 var(--body); letter-spacing: 0; }
.tile .cat { width: 22px; height: 22px; }
.t-football { background: var(--yes); color: var(--yes-ink); } .t-crypto { background: #FFF1D6; color: #8A5300; }
.t-weather { background: var(--no); color: var(--no-ink); } .t-rain { background: var(--sky); color: #1E40AF; } .t-fx { background: #F1ECFF; color: #5B21B6; }
.row-p { text-align: right; line-height: 1.1; }
.row-p b { display: block; font: 800 18px/1.1 var(--body); }
.row-p small { font-size: 11px; font-weight: 700; color: var(--ink-2); }
.row .sides { grid-column: auto; gap: 6px; }
.row .side { min-height: 44px; padding: 6px 12px; font-size: 14px; }
.row .side b { font-size: 15px; }
.row.res { grid-template-columns: 40px minmax(0, 1fr) auto; }
.res-more { margin-top: 12px; }

/* Мои прогнозы */
.mine { margin-top: 48px; }
#bets { list-style: none; margin: 0; padding: 0; background: var(--surface); border-radius: 20px; border: 1px solid var(--card-line); overflow: hidden; }
#bets li { display: flex; align-items: center; gap: 12px; padding: 12px 18px; }
#bets li + li { border-top: 1px solid var(--line-2); }
#bets .empty { color: var(--ink-2); }
.bs { font-weight: 800; font-size: 12px; padding: 5px 10px; border-radius: 7px; }
.bs.up { background: var(--yes-solid); color: #fff; } .bs.down { background: var(--no-solid); color: #fff; }
.bq { flex: 1; font-size: 15px; font-weight: 600; } .bq small { display: block; color: var(--ink-2); font-size: 13px; }
.st { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.st.won, .won { color: var(--yes-ink); } .st.lost, .lost { color: var(--no-ink); } .st.live { color: var(--ink-2); }

/* Лист прогноза: как «купон» макета — белая карточка с тенью, сторона сплошной плашкой, суммы-пилюли, тёмная кнопка */
.sheet { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; }
.sheet-bg { position: absolute; inset: 0; background: rgba(16, 22, 19, .32); }
.sheet-card { position: relative; background: var(--surface); width: 100%; max-width: 480px; border-radius: 22px 22px 0 0;
  padding: 10px 20px calc(20px + env(safe-area-inset-bottom)); border: 1px solid var(--card-line); border-bottom: 0; max-height: 100dvh; overflow: auto;
  box-shadow: 0 -8px 40px rgba(16, 22, 19, .18); }
.sheet-card::before { content: ''; display: block; width: 40px; height: 4px; border-radius: 2px; background: #D5DAD2; margin: 0 auto 14px; }
@media (prefers-reduced-motion: no-preference) { .sheet-card { animation: up .22s ease-out; } @keyframes up { from { transform: translateY(40px); } } }
@media (min-width: 640px) {
  .sheet { align-items: center; }
  .sheet-card { border-radius: 22px; border-bottom: 1px solid var(--card-line); padding-top: 20px; box-shadow: 0 20px 50px rgba(16, 22, 19, .18); }
  .sheet-card::before { display: none; }
}
.sheet-side { display: inline-flex; gap: 8px; align-items: center; font: 800 13px/1 var(--body); padding: 0 10px; height: 28px; border-radius: 8px; color: #fff; }
.sheet-side.up { background: var(--yes-solid); } .sheet-side.down { background: var(--no-solid); }
.sheet-side b { font: 800 14px var(--body); }
.sheet-q { font: 800 19px/1.3 var(--body); margin: 12px 0 16px; letter-spacing: -.01em; }
.chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.chip { border: 1px solid var(--line); background: var(--surface); border-radius: 10px; padding: 6px 0; font-weight: 800; cursor: pointer; min-height: 44px; font-size: 16px; color: var(--ink); }
.chip:hover { border-color: var(--ink); }
#chips .chip { display: grid; place-items: center; min-height: 56px; line-height: 1.1; }
#chips .chip small { font-size: 12px; font-weight: 700; color: var(--yes-ink); }
#sheet.down-side #chips .chip small { color: var(--no-ink); }
#chips .chip.on small { color: var(--lime); }
.sheet .stake-h { margin: 0 0 6px; }
.sheet-win { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 14px 0; color: var(--ink); font-weight: 700; font-size: 14px; }
.sheet-win b { color: var(--yes-solid); font-size: 20px; font-weight: 800; }
#sheet.down-side .sheet-win b { color: var(--no-solid); }
.confirm { width: 100%; border: 0; border-radius: 14px; padding: 14px; font: 800 16px/1.2 var(--body); cursor: pointer; min-height: 52px; background: var(--dark); color: #fff; }
.confirm:hover { background: var(--ink-3); }
.confirm.up, .confirm.down { background: var(--dark); color: #fff; }
.confirm:disabled { background: var(--line); color: var(--ink-2); cursor: wait; }
.link { display: block; margin: 10px auto 0; background: none; border: 0; color: var(--ink-2); cursor: pointer; padding: 8px; min-height: 44px; font-weight: 700; }
.sheet-msg { min-height: 22px; margin: 6px 0 0; text-align: center; font-weight: 700; }
.sheet-msg.ok { color: var(--yes-ink); } .sheet-msg.err { color: var(--no-ink); }

/* Страница рынка */
.market-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.market-grid .hero { margin: 16px 0 0; }
.panel { background: var(--surface); border: 1px solid var(--card-line); border-radius: 20px; padding: 20px; margin-top: 16px; }
.panel + .panel { margin-top: 16px; }
.panel h2 { font: 800 18px/1.2 var(--body); margin: 0 0 10px; }
.panel p { margin: 0 0 10px; font-size: 15px; color: var(--ink-3); }
.panel table { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.panel td { padding: 8px 0; border-top: 1px solid var(--line-2); } .panel td:last-child { text-align: right; font-weight: 800; }
canvas#chart { grid-column: 1 / -1; width: 100%; height: 200px; display: block; }
.rounds { display: flex; flex-wrap: wrap; gap: 6px; }
.rounds span, .rounds button { font-size: 13px; font-weight: 700; padding: 4px 9px; border-radius: 8px; font-variant-numeric: tabular-nums; }
.rounds button { border: 2px solid transparent; cursor: pointer; min-height: 32px; background: var(--line-2); }
.rounds button[aria-pressed="true"] { border-color: var(--ink); }
.rounds .up { background: var(--yes); color: var(--yes-ink); } .rounds .down { background: var(--no); color: var(--no-ink); }
.hist { display: flex; align-items: flex-end; gap: 3px; height: 110px; margin: 10px 0 26px; }
.hb { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; position: relative; }
.hb i { display: block; background: var(--no-mid); border-radius: 4px 4px 0 0; }
.hb.above i { background: var(--yes-mid); }
.hb span { position: absolute; bottom: -20px; left: 0; font-size: 12px; color: var(--ink-2); }
.small { color: var(--ink-2); font-size: 13px; }
.dots { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; max-width: 280px; margin: 10px 0 4px; }
.dot { aspect-ratio: 1; border-radius: 50%; background: var(--line-2); border: 1px solid var(--line); }
.dot.wet { background: var(--yes-mid); }

/* Рейтинг недели */
.rank-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px; align-items: start; margin-top: 14px; }
.leaders { list-style: none; margin: 0; padding: 6px 20px; background: var(--surface); border-radius: 24px; border: 1px solid var(--card-line); }
.leaders li { display: flex; align-items: center; gap: 14px; padding: 10px 0; }
.leaders li + li { border-top: 1px solid var(--line-2); }
.leaders li.empty { color: var(--ink-2); padding: 14px 0; }
.leaders li.is-me { background: var(--sun-bg); margin: 0 -20px; padding: 10px 20px; }
.leaders .pos { font: 800 16px/1 var(--body); min-width: 2ch; text-align: right; color: var(--ink-2); }
.leaders li:first-child .pos { color: var(--ink); }
.ini { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font: 800 14px/1 var(--body); color: var(--ink); background: var(--paper); }
.leaders li:first-child .ini { background: var(--lime); }
.leaders .who { flex: 1; min-width: 0; font-weight: 700; overflow-wrap: anywhere; } .leaders .who small { display: block; font-weight: 600; color: var(--ink-2); font-size: 13px; }
.me { background: var(--paper); border-radius: 24px; padding: 20px; }
.nick label { display: block; font-weight: 800; margin-bottom: 6px; }
.nick span { display: flex; gap: 8px; }
.nick input { flex: 1; min-width: 0; min-height: 44px; border: 1px solid var(--line); border-radius: 12px; padding: 8px 14px; font: inherit; background: var(--surface); }
.nick input:focus { border-color: var(--ink); outline: none; }
.nick button { border: 0; background: var(--dark); color: #fff; border-radius: 12px; padding: 8px 16px; min-height: 44px; font-weight: 800; cursor: pointer; }
.nick small { display: block; min-height: 18px; font-size: 13px; margin-top: 4px; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 8px 0 6px; }
.stats div { border-top: 1px solid var(--line); padding-top: 8px; }
.stats dt { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.stats dd { margin: 2px 0 0; font: 800 24px/1.1 var(--body); letter-spacing: -.02em; }
.rounds .tie { background: var(--line-2); }

/* Категории главной: пилюли, активная — тёмная; липнут под шапкой */
.tabs { position: sticky; top: var(--hdr); z-index: 20; display: flex; gap: 4px; margin: 0 -24px; padding: 10px 24px; overflow-x: auto; scrollbar-width: none;
  background: var(--page); }
.tabs [role=tab] { flex: 0 0 auto; border: 0; background: transparent; color: var(--ink-2); border-radius: 999px;
  padding: 0 16px; min-height: 44px; font: 700 15px/1 var(--body); cursor: pointer; white-space: nowrap; }
.tabs [role=tab]:hover:not([aria-selected="true"]) { color: var(--ink); background: var(--line-2); }
.tabs [role=tab][aria-selected="true"] { background: var(--dark); color: #fff; }
.city { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.city select { appearance: none; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 6px 12px; min-height: 44px;
  font: 700 14px var(--body); color: var(--ink); cursor: pointer; max-width: 52vw; }
.city select:hover { border-color: var(--ink); }
.qs .empty, .empty-tab { padding: 16px 18px; color: var(--ink-2); font-size: 15px; }
.empty-tab { margin: 24px 0 0; background: var(--paper); border-radius: 20px; }

/* Бегущая строка «что меняется»: тёмная полоса под шапкой, прокручивается пальцем */
.ticker { background: var(--dark); color: #fff; }
.tk-in { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; min-height: 44px; display: flex; align-items: center; gap: 24px; overflow-x: auto; white-space: nowrap;
  font-size: 14px; font-weight: 600; scrollbar-width: none; }
.tk-h { color: var(--lime); font-weight: 800; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.tk-items { display: contents; }
.ticker a { color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; --focus: var(--lime); }
.ticker a:hover { color: var(--lime); }
.ticker b { font-weight: 800; }
.ticker .up { color: var(--up-on-dark); } .ticker .down { color: var(--down-on-dark); } .ticker .flat { color: var(--dark-ink-2); }

/* Первый экран: матч (если есть) и тёмная карточка крипто-раунда рядом */
.top { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 8px; }
.top > * { min-width: 0; }
.top .hero { margin: 0; }
.top .fbhero { flex: 999 1 560px; }
.top .hero.dark { flex: 1 1 360px; }

/* Матч: эмблемы, три исхода полосой (только для информации), вопрос «Победит хозяин?» со сплошными «Да/Нет» */
.fbhero { background: var(--paper); border-radius: 24px; padding: 28px; display: flex; flex-direction: column; gap: 20px; }
.fh-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 14px; font-weight: 600; color: var(--ink-3); }
.chip-dark { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 8px; background: var(--dark); color: var(--lime); font-size: 12px; font-weight: 800; }
.fh-teams { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; }
.team { display: flex; align-items: center; gap: 14px; min-width: 0; font: 800 22px/1.15 var(--body); letter-spacing: -.02em; }
.team b { min-width: 0; overflow-wrap: anywhere; }
.team.away { justify-content: flex-end; text-align: right; }
.crest { flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; color: #fff; font: 800 18px/1 var(--body); letter-spacing: 0; }
.fh-v { font: 800 20px/1 var(--body); color: var(--ink-2); }
.fb3 { display: flex; height: 12px; border-radius: 6px; overflow: hidden; gap: 3px; }
.fb3 i { display: block; min-width: 4px; }
.fb3 .h { background: var(--yes-solid); } .fb3 .d { background: #9AA59F; } .fb3 .a { background: #B45309; }
.fh-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: -8px 0 0; padding: 0; list-style: none; font-size: 14px; font-weight: 600; color: var(--ink-3); }
.fh-legend li { display: inline-flex; align-items: center; gap: 6px; }
.fh-legend i { width: 10px; height: 10px; border-radius: 3px; }
.fh-legend b { color: var(--ink); font-weight: 800; }
.fh-q { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.fh-q a { color: var(--ink); text-decoration: none; font: 800 19px/1.3 var(--body); letter-spacing: -.01em; }
.fh-q a:hover { text-decoration: underline; }
.fbhero .side { padding: 14px 20px; font-size: 17px; min-height: 56px; border-radius: 14px; }
.fbhero .side b { font-size: 20px; }
.fbhero .side.up:not(:disabled) { background: var(--yes-solid); color: #fff; } .fbhero .side.up:hover:not(:disabled) { background: var(--yes-ink); }
.fbhero .side.down:not(:disabled) { background: var(--no-solid); color: #fff; } .fbhero .side.down:hover:not(:disabled) { background: var(--no-ink); }
.fh-more { font-size: 14px; font-weight: 700; text-decoration: none; }

/* Тёмная карточка крипто-раунда: монета и таймер, вопрос, график цены с линией открытия, сплошные «Да/Нет» */
.hero.dark { background: var(--dark); color: #fff; padding: 24px; gap: 16px 20px; align-content: start; --focus: var(--lime); }
.hero.dark a { color: var(--lime); }
.hero.dark h1 { font-size: clamp(20px, 2.4vw, 26px); max-width: none; }
.hero.dark a.hero-link { color: #fff; }
.hero.dark .tag { background: var(--dark-2); }
.hero.dark .tag small, .hero.dark .meta, .hero.dark .note { color: var(--dark-ink-2); }
.hero.dark .tag.big { min-width: 96px; padding: 10px 12px 8px; }
.hero.dark .tag.big b { font-size: 34px; }
.hero.dark .meta b { color: #fff; }
.hero.dark .meta .m-time { display: none; }
.hero.dark .meta .up em, .hero.dark .dev.up { color: var(--up-on-dark); } .hero.dark .meta .down em, .hero.dark .dev.down { color: var(--down-on-dark); }
.hero.dark .meta .dev.flat { color: var(--dark-ink-2); }
.hero.dark .side:disabled { background: var(--dark-2); color: var(--dark-ink-2); }
.hero.dark .qp, .hero.dark .qc { color: var(--dark-ink-2); }
.hd-top { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; }
.coin { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; font: 800 10px/1 var(--body); letter-spacing: 0; background: #F7931A; color: #fff; }
.coin.c-ETH { background: #627EEA; } .coin.c-SOL { background: var(--dark); color: var(--lime); box-shadow: inset 0 0 0 1px var(--dark-line); }
.coin.c-BNB { background: #F0B90B; color: var(--ink); } .coin.c-XRP { background: #23292F; } .coin.c-USDT { background: #26A17B; } .coin.c-DOGE { background: #C2A633; color: var(--ink); }
.hd-name { font-size: 15px; font-weight: 800; }
.hd-clock { margin-left: auto; font: 800 30px/1 var(--body); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.spark { grid-column: 1 / -1; display: block; width: 100%; height: 72px; }
.spark .open { stroke: #4A544F; stroke-dasharray: 4 4; }
.spark .line { stroke: var(--lime); stroke-width: 2.5; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.hero.dark .skel { background: var(--dark-2); }

/* Ленты карточек: на телефоне листаются вбок, на десктопе — сетка */
.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }

/* «Скоро закрываются» и погода рядом на десктопе */
.pair { display: flex; flex-wrap: wrap; gap: 0 24px; align-items: flex-start; }
.pair > .sec { min-width: 0; }
.pair > #soon-sec { flex: 999 1 560px; }
.pair > #sec-wx { flex: 1 1 380px; }

/* Погода: тонированные карточки по две в ряд */
.wx-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

/* Футбол по матчам: строка матча, у неё два вопроса — победа хозяев и «больше 2,5 гола» */
.lg-pills { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.pill { flex: none; min-height: 44px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface);
  font: 700 14px/1 var(--body); cursor: pointer; color: var(--ink); white-space: nowrap; }
.pill:hover { border-color: var(--ink); }
.pill[aria-pressed="true"] { background: var(--dark); border-color: var(--dark); color: #fff; }
.fixtures { list-style: none; margin: 14px 0 0; padding: 0; border: 1px solid var(--card-line); border-radius: 20px; overflow: hidden; }
.fx-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px 20px; align-items: center; padding: 16px 18px; }
.fx-row + .fx-row { border-top: 1px solid var(--line-2); }
.fx-match { min-width: 0; display: grid; gap: 6px; }
.fx-when { font-size: 13px; font-weight: 700; color: var(--ink-3); }
.fx-teams { color: var(--ink); text-decoration: none; font-size: 16px; font-weight: 800; line-height: 1.3; }
.fx-teams span { color: var(--ink-2); font-weight: 600; }
.fx-teams:hover { color: var(--ink); text-decoration: underline; }
.fx-match .fb3 { height: 6px; border-radius: 3px; gap: 2px; max-width: 260px; }
.fx-3 { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.fx-mk { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; align-items: baseline; }
.fx-mk .fx-l { font-size: 13px; font-weight: 700; color: var(--ink-3); min-width: 0; overflow-wrap: anywhere; text-decoration: none; }
.fx-mk a.fx-l:hover { color: var(--ink); text-decoration: underline; }
.fx-mk > b { font: 800 16px/1 var(--body); }
.fx-mk .sides { grid-column: 1 / -1; gap: 6px; }
.fx-mk .side { min-height: 44px; padding: 6px 10px; font-size: 14px; }
.fx-mk .side b { font-size: 14px; }

/* Мнение страны: строка в списке и две полоски на странице рынка */
.q .qc, .hero .meta .qc, .qc { display: block; font-size: 12px; font-weight: 700; color: var(--yes-ink); margin-top: 3px; }
.hero .meta .qc { align-self: end; font-size: 15px; }
.vs { grid-column: 1 / -1; display: grid; gap: 6px; }
.vs-h { font: 800 15px/1.2 var(--body); margin: 0; color: var(--ink-3); }
.vs .small { margin: 0; }
.bar { display: grid; grid-template-columns: minmax(70px, 9ch) 1fr 4.5ch; gap: 10px; align-items: center; font-size: 14px; font-weight: 600; }
.bar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar i { display: block; height: 10px; background: var(--surface); border-radius: 5px; overflow: hidden; }
.bar b { display: block; height: 100%; background: var(--ink); }
.bar.country b { background: var(--yes-solid); }
.bar strong { text-align: right; font-variant-numeric: tabular-nums; font-weight: 800; }

/* Правила и снимок итога */
.rules, .proof { margin: 0; font-size: 15px; }
.rules div, .proof div { padding: 8px 0; border-top: 1px solid var(--line-2); }
.rules div:first-child, .proof div:first-child { border-top: 0; padding-top: 0; }
.rules dt, .proof dt { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.rules dd, .proof dd { margin: 2px 0 0; overflow-wrap: anywhere; }
a.src { overflow-wrap: anywhere; }
code.hash { font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; word-break: break-all; }
.c-proof h3 { font: 800 15px/1.2 var(--body); margin: 14px 0 6px; }
.report { margin-top: 12px; }
.report-open { background: none; border: 1px solid var(--line); border-radius: 10px; padding: 6px 14px; min-height: 44px; cursor: pointer; font-weight: 700; font-size: 14px; }
.report-open:hover { border-color: var(--ink); }
.report form { display: grid; gap: 6px; margin-top: 8px; }
.report label { font-size: 13px; color: var(--ink-2); }
.report textarea { width: 100%; font: inherit; font-size: 15px; border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; resize: vertical; }
.report textarea:focus { border-color: var(--ink); outline: none; }
.report-send { justify-self: start; border: 0; background: var(--dark); color: #fff; border-radius: 12px; padding: 8px 18px; min-height: 44px; font-weight: 800; cursor: pointer; }
.report-msg { margin: 6px 0 0; font-size: 14px; font-weight: 700; min-height: 0; }

/* «Как это работает»: тёмный блок с четырьмя шагами */
.how { margin-top: 56px; border-radius: 28px; background: var(--dark); color: #fff; padding: 40px; display: grid; gap: 28px; --focus: var(--lime); }
.how-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.how h2 { margin: 0; font: 800 36px/1.1 var(--body); letter-spacing: -.03em; max-width: 560px; }
.how-go { display: inline-flex; align-items: center; min-height: 52px; padding: 0 24px; border-radius: 14px; background: var(--lime); color: var(--ink); font: 800 16px/1 var(--body); text-decoration: none; }
a.how-go:hover { color: var(--ink); background: #B7E443; }
.how ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; counter-reset: how; }
.how li { counter-increment: how; padding: 20px; border-radius: 18px; background: var(--dark-2); display: grid; gap: 10px; align-content: start; }
.how li::before { content: counter(how); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: var(--lime); color: var(--ink); font: 800 17px/1 var(--body); }
.how h3 { margin: 0; font: 800 18px/1.25 var(--body); }
.how p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--dark-ink-2); }

/* Вопросы и ответы: нативные <details> — работают с клавиатуры и без скриптов */
.faq { margin-top: 56px; display: flex; flex-wrap: wrap; gap: 16px 56px; }
.faq h2 { flex: 1 1 280px; margin: 0; font: 800 36px/1.1 var(--body); letter-spacing: -.03em; }
.faq-list { flex: 999 1 560px; min-width: 0; border-top: 1px solid var(--card-line); }
.faq details { border-bottom: 1px solid var(--card-line); }
.faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 14px 0;
  font: 700 17px/1.3 var(--body); cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--chip); font-size: 18px; font-weight: 700; }
.faq details[open] summary::after { content: '−'; }
.faq details p { margin: 0 0 18px; max-width: 680px; font-size: 15px; line-height: 1.6; color: var(--ink-3); }

/* Подвал: тёмный, на всю ширину — бренд, «игра бесплатная», страны, языки, другие регионы, 18+ */
.foot { background: var(--dark); color: #fff; --focus: var(--lime); margin-bottom: calc(-1 * var(--below)); padding-bottom: var(--below); }
.foot-in { max-width: var(--wrap); margin: 0 auto; padding: 44px 24px 28px; display: grid; gap: 24px; }
.foot .brand { color: #fff; font-size: 20px; }
.foot .brand::before { background-color: var(--lime);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath d='M9 23 15 16l5 4 7-9' fill='none' stroke='%23101613' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='27' cy='11' r='2.6' fill='%23101613'/%3E%3C/svg%3E"); }
.foot p { margin: 0; }
.foot-loc { display: grid; gap: 6px; font-size: 14px; color: var(--dark-ink-2); }
.foot-loc p { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; }
.foot-loc p > span:first-child { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #8F9A94; margin-right: 8px; }
.foot-loc a, .foot-l { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; color: var(--dark-ink-2); font: 600 14px var(--body); text-decoration: none; background: none; border: 0; cursor: pointer; border-radius: 8px; }
.foot-loc a:hover, .foot-l:hover { color: #fff; }
.foot-loc [aria-current] { color: #fff; font-weight: 800; text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.regions { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; font-size: 14px; color: var(--dark-ink-2); }
.regions > span:first-child { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #8F9A94; margin-right: 8px; }
.regions a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: 0 8px 0 0; color: #fff; font-weight: 800; text-decoration: none; }
.regions a:hover { color: var(--lime); }
.regions a small { font-weight: 600; color: var(--dark-ink-2); }
.foot-bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding-top: 20px; border-top: 1px solid var(--dark-line); font-size: 13px; font-weight: 600; color: var(--dark-ink-2); }
.badge-18 { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 6px; border: 1.5px solid var(--dark-ink-2); font-weight: 800; color: #fff; }
.suggest { max-width: calc(var(--wrap) - 48px); margin: 12px auto 0; background: var(--sun-bg); border: 1px solid var(--sun-line); border-radius: 14px; padding: 8px 14px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 15px; }
.suggest a { font-weight: 800; color: var(--ink); } .suggest .link { margin: 0 0 0 auto; padding: 0 6px; font-size: 20px; color: var(--ink); }
@media (max-width: 1328px) { .suggest { margin: 12px 24px 0; } }
.sheet-card.age .confirm { margin-top: 14px; }
@media (max-width: 860px) { .rank-grid { grid-template-columns: 1fr; } }

/* Экономика (внутренняя страница) */
nav { display: flex; gap: 16px; } nav a { color: var(--ink-2); text-decoration: none; font-weight: 700; } nav a.active { color: var(--ink); }
.card { background: var(--surface); border: 1px solid var(--card-line); border-radius: 20px; padding: 18px; }
.card h3 { margin: 0 0 10px; font: 800 18px/1.2 var(--body); }
.msg.err { color: var(--no-ink); }
.market-grid > .free, .market-grid > .regions, .market-grid > .foot-loc { grid-column: 1 / -1; }

/* Итоги: закрытые вопросы, итог крупно */
.res-out { margin: 0; display: grid; justify-items: end; gap: 2px; text-align: right; }
.res-out b { font: 800 15px/1.1 var(--body); padding: 7px 12px; border-radius: 8px; white-space: nowrap; background: var(--line-2); }
.res-out.up b { background: var(--yes-solid); color: #fff; } .res-out.down b { background: var(--no-solid); color: #fff; }
.res-out.wait b { background: var(--surface); border: 1px dashed var(--line); color: var(--ink-2); font-size: 14px; }
.res-out span { font-weight: 800; font-size: 16px; }
.res-out.wait span { font-weight: 600; font-size: 13px; color: var(--ink-2); }
.hero .res-out { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; justify-items: start; text-align: left; }
.hero .res-out b { font-size: 22px; padding: 10px 18px; border-radius: 12px; }
.hero .res-out span { font-size: 22px; }

/* Скелет загрузки: форма будущего вопроса и строк списка */
.skel { display: block; background: var(--line-2); border-radius: 10px; height: 1em; }
@media (prefers-reduced-motion: no-preference) {
  .skel { background: linear-gradient(90deg, var(--line-2) 30%, #F6F8F5 50%, var(--line-2) 70%) 0 0 / 300% 100%; animation: skel 1.6s linear infinite; }
  .hero.dark .skel { background: linear-gradient(90deg, var(--dark-2) 30%, #26302B 50%, var(--dark-2) 70%) 0 0 / 300% 100%; }
  @keyframes skel { to { background-position: -150% 0; } }
}
.skel-q { display: grid; gap: 12px; }
.skel-q .skel { height: 30px; } .skel-q .skel + .skel { width: 60%; }
h1 > .skel { height: .9em; margin: .1em 0; } h1 > .skel + .skel { width: 55%; }
.skel-tag { width: 110px; height: 76px; border-radius: 16px; }
.skel-meta { grid-column: 1 / -1; display: flex; gap: 22px; } .skel-meta .skel { width: 110px; height: 40px; }
.skel-side { height: 56px; border-radius: 14px; }
.skel-row { display: grid; gap: 8px; grid-template-columns: 1fr; padding: 16px; }
.skel-row .skel { height: 18px; width: 80%; } .skel-row .skel-sm { height: 44px; width: 100%; border-radius: 12px; }

/* Телефон и планшет: нижняя панель из 4 пунктов, сверху — знак, серия, очки и кружок профиля */
@media (max-width: 860px) {
  :root { --below: calc(60px + env(safe-area-inset-bottom)); --hdr: 60px; }
  body { padding-bottom: var(--below); }
  header { padding: 8px 16px; gap: 8px; }
  .brand { font-size: 20px; gap: 8px; }
  .brand::before { width: 32px; height: 32px; }
  .balance { min-height: 40px; padding-left: 12px; }
  .balance:not(:has(.bal-plus)) { padding-right: 12px; }
  .bal-plus { width: 30px; height: 30px; border-radius: 8px; }
  .tabbar { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; margin: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    gap: 0; padding: 4px 8px calc(4px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--card-line); }
  .tb { flex-direction: column; justify-content: center; gap: 4px; min-height: 52px; padding: 4px 2px; border-radius: 12px; font-size: 11px; text-align: center; }
  .tb:hover { background: none; }
  .tb[aria-current="page"] { background: none; color: var(--ink); font-weight: 800; }
  .tb-me { display: inline-flex; }
  .tb-i { width: 40px; height: 26px; border-radius: 8px; }
  .tb svg { width: 22px; height: 22px; }
  .tb[aria-current="page"] .tb-i { background: var(--lime); }
  .tb[aria-expanded="true"] .tb-i { background: var(--line-2); }
  .tb .nt-count { top: -6px; right: -2px; }
  .tb.nt-bell { display: inline-flex; padding: 4px 2px; }
  .avatar { width: 40px; height: 40px; }   /* профиль и в шапке: до него на телефоне один тап */
  /* меню профиля — лист снизу, над панелью */
  .pm-bg { background: rgba(16, 22, 19, .32); }
  .pm-card { top: auto; right: 0; left: 0; bottom: 0; width: auto; border-radius: 22px 22px 0 0; border-bottom: 0;
    padding: 12px 20px calc(20px + env(safe-area-inset-bottom)); max-height: 85dvh; overflow: auto; }
  .pm-list > a { min-height: 52px; font-size: 17px; }
  main { padding: 4px 16px 40px; }
  .tabs { margin: 0 -16px; padding: 8px 16px; }
  .tk-in { padding: 0 16px; gap: 20px; font-size: 13px; }
  .market-grid { grid-template-columns: 1fr; }
  .sec { margin-top: 32px; }
  .sec h2, .sec-head h2 { font-size: 21px; }
  .sec > p, .sec-sub { font-size: 14px; }
  .top { gap: 12px; }
  .fbhero { padding: 18px; gap: 16px; border-radius: 22px; }
  .fh-teams { gap: 8px; }
  .team { flex-direction: column; gap: 8px; text-align: center; font-size: 15px; }
  .team.away { flex-direction: column-reverse; text-align: center; }
  .crest { width: 52px; height: 52px; border-radius: 15px; font-size: 15px; }
  .fh-q a { font-size: 16px; }
  .fbhero .side, .hero .side { min-height: 52px; font-size: 16px; padding: 8px 14px; }
  .fbhero .side b, .hero .side b { font-size: 18px; }
  .hero.dark { padding: 18px; border-radius: 22px; }
  .hd-clock { font-size: 26px; }
  .spark { height: 60px; }
  /* ленты: листаются пальцем, края на всю ширину экрана */
  .cards { display: flex; overflow-x: auto; gap: 10px; margin: 0 -16px; padding: 0 16px 4px; scroll-snap-type: x proximity; scrollbar-width: none; }
  .cards > li { flex: none; width: min(272px, 78vw); scroll-snap-align: start; }
  .pair > #soon-sec, .pair > #sec-wx { flex-basis: 100%; }
  .qs.rows { border: 0; border-radius: 0; overflow: visible; }
  .row { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px 12px; padding: 14px 0; }
  .row:hover { background: none; }
  .qs.rows .row + .row, .qs.rows > li:first-child { border-top: 1px solid var(--line-2); }
  .tile { width: 36px; height: 36px; border-radius: 10px; font-size: 11px; }
  .row .sides { grid-column: 2 / -1; }
  .row.res .res-out { grid-column: 3; }
  .fixtures { border: 0; border-radius: 0; overflow: visible; }
  .fx-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 14px 0; gap: 10px 12px; }
  .fx-row, .fx-row + .fx-row { border-top: 1px solid var(--line-2); }
  .fx-match { grid-column: 1 / -1; }
  .fx-mk { grid-template-columns: minmax(0, 1fr) auto; }
  .fx-mk .sides { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
  .leaders { padding: 4px 16px; border-radius: 20px; }
  .leaders li.is-me { margin: 0 -16px; padding: 10px 16px; }
  .me { border-radius: 20px; padding: 18px; }
  .how { margin-top: 40px; padding: 22px 20px; border-radius: 22px; gap: 18px; }
  .how h2 { font-size: 24px; }
  .how ol { grid-template-columns: 1fr; gap: 14px; }
  .how li { padding: 0; background: none; grid-template-columns: 34px minmax(0, 1fr); gap: 2px 12px; }
  .how li::before { grid-row: span 2; width: 34px; height: 34px; border-radius: 10px; font-size: 15px; }
  .how h3 { font-size: 16px; }
  .how p { font-size: 13px; }
  .how-go { order: 2; width: 100%; justify-content: center; }
  .how-head { display: contents; }
  .faq { margin-top: 40px; }
  .faq h2 { font-size: 21px; flex-basis: 100%; }
  .faq summary { font-size: 16px; }
  .foot-in { padding: 28px 16px 24px; gap: 18px; }
}
@media (max-width: 380px) { .brand { font-size: 18px; } .balance { padding-left: 10px; font-size: 13px; } }

/* Страница рынка на телефоне: ценник поменьше — справа от вопроса, ниже строка цены и таймера, кнопки и суммы */
@media (max-width: 640px) {
  .hero { grid-template-columns: minmax(0, 1fr) auto; gap: 14px 12px; padding: 18px; border-radius: 22px; margin-bottom: 20px; }
  .hero h1 { font-size: 21px; max-width: none; }
  .hero .tag.big { justify-self: end; align-self: start; min-width: 76px; padding: 7px 10px 6px; margin-top: 2px; border-radius: 12px; }
  .hero .tag.big b, .hero.dark .tag.big b { font-size: 26px; }
  .hero .tag.big small { font-size: 11px; margin-top: 3px; }
  .skel-tag { width: 76px; height: 52px; justify-self: end; }
  .hero .meta { gap: 4px 16px; margin-top: -2px; flex-wrap: nowrap; }
  .hero .meta > span { min-width: 0; }
  .hero .meta b { font-size: 16px; }
  .hero .meta em { display: block; font-size: 14px; }
  .hero .meta .timer { font-size: 20px; }
  .hero .meta .m-time { margin-left: auto; text-align: right; flex: none; }
  .hero .meta.pmeta { flex-wrap: wrap; }
  .hero .meta .m-open, .hero .meta .m-now { flex: none; }
  .hero .meta .dev { font-size: 14px; }
  .stake-chips .chip { font-size: 15px; }
  .stake-win { font-size: 14px; }
  canvas#chart { height: 160px; }
  .q a.qt { font-size: 15px; }
}

/* Огонёк серии (модуль leagues) — тихо, рядом с очками */
header .lg-flame, header .lg-flame.on { min-height: 44px; border-color: transparent; padding: 0 6px; }   /* в шапке без рамки: рядом с балансом не спорит */
header .lg-flame.risk { border-color: transparent; }
.hero .meta .m-until { flex-basis: 100%; }
.hero .meta .m-until b { font: 500 15px/1.3 var(--body); color: var(--ink-2); }
@media (max-width: 640px) {
  .q.res:not(.row) { grid-template-columns: 1fr; }
  .q.res:not(.row) .res-out { display: flex; align-items: center; gap: 12px; justify-items: start; text-align: left; padding-left: 36px; }
}

/* ---------- Страница рынка (crypto.html, event.html): классы .ev-… и .evc-… ----------
   Сверху вопрос, живая цена и таймер; график на тёмной карточке, как у раунда на главной, — единственный «громкий» блок;
   ставка — светлая панель (на десктопе липкая справа); дальше всё спокойное: прошлые раунды и раскрывающиеся объяснения. */
.ev-page { display: block; }
.ev-top { display: flex; align-items: center; gap: 8px; padding: 12px 0 2px; min-width: 0; }
.ev-back, .ev-share { flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 12px;
  background: var(--chip); color: var(--ink); cursor: pointer; text-decoration: none; }
.ev-back:hover, .ev-share:hover { background: var(--line-2); color: var(--ink); }
.ev-back svg, .ev-share svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ev-share[data-done] { background: var(--lime); }
.ev-asset { display: inline-flex; align-items: center; gap: 8px; min-width: 0; min-height: 44px; padding: 0 14px 0 7px; border-radius: 999px;
  background: var(--chip); font-size: 15px; }
.ev-asset .coin { width: 30px; height: 30px; }
.ev-asset .cat { flex: none; width: 24px; height: 24px; margin-left: 3px; }
.ev-asset b { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-len { flex: none; color: var(--ink-2); font-weight: 700; }
.ev-acts { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.ev-acts .bm-slot { position: static; }
.ev-acts .bm { width: 44px; height: 44px; border-radius: 12px; background: var(--chip); }

.ev-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.ev-head { min-width: 0; }
.ev-q { font: 800 clamp(26px, 4.2vw, 40px)/1.1 var(--body); letter-spacing: -.035em; margin: 10px 0 12px; max-width: 20ch; }
.ev-live { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin: 0; }
.ev-price { font: 800 30px/1.15 var(--body); letter-spacing: -.02em; }
.ev-dev { font-size: 15px; font-weight: 700; }
.ev-dev.up { color: var(--yes-ink); } .ev-dev.down { color: var(--no-ink); } .ev-dev.flat { color: var(--ink-2); }
.ev-meta { color: var(--ink-2); font-size: 15px; font-weight: 600; }
.ev-meta:empty { display: none; }
.ev-clock { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 16px; margin-top: 16px; }
.ev-clock:empty { display: none; }
.ev-clock-l { grid-column: 1 / -1; font-size: 14px; font-weight: 700; color: var(--ink-2); }
.ev-clock-n { font: 800 44px/1 var(--body); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.ev-bar { height: 10px; border-radius: 999px; background: var(--line-2); overflow: hidden; }
.ev-bar i { display: block; height: 100%; border-radius: inherit; background: var(--ink); }
@media (prefers-reduced-motion: no-preference) { .ev-bar i { transition: width 1s linear; } }

/* график: тёмная карточка, лаймовая линия; зоны сторон — тоном «Да/Нет» для тёмного фона */
.ev-chart { min-width: 0; background: var(--dark); border-radius: 24px; padding: 8px 6px 4px; }
.evc { display: block; width: 100%; height: 220px; touch-action: pan-y; font-family: var(--body); }
.evc[hidden] { display: none; }
.evc-zone.hi { fill: var(--up-on-dark); opacity: .09; } .evc-zone.lo { fill: var(--down-on-dark); opacity: .09; }
.evc-hatch { stroke: #FFFFFF; stroke-opacity: .08; stroke-width: 2; }
.evc-base { stroke: var(--dark-ink-2); stroke-opacity: .7; stroke-dasharray: 5 5; }
.evc-base-t { fill: var(--dark-ink-2); font-size: 12px; font-weight: 700; }
.evc-zone-t { font-size: 11px; font-weight: 700; }
.evc-zone-t.hi { fill: var(--up-on-dark); } .evc-zone-t.lo { fill: var(--down-on-dark); }
.evc-ax { fill: #97A19B; font-size: 11px; font-weight: 600; }
.evc-line { fill: none; stroke: var(--lime); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.evc-dot { stroke: var(--dark); stroke-width: 3; }
.evc-dot.hi { fill: var(--up-on-dark); } .evc-dot.lo { fill: var(--down-on-dark); }
.evc-pulse { fill: none; stroke-width: 2; opacity: 0; }
.evc-pulse.hi { stroke: var(--up-on-dark); } .evc-pulse.lo { stroke: var(--down-on-dark); }
@media (prefers-reduced-motion: no-preference) {
  .evc-pulse { transform-box: fill-box; transform-origin: center; animation: evc-pulse 1.8s ease-out infinite; }
  @keyframes evc-pulse { from { opacity: .7; transform: scale(1); } to { opacity: 0; transform: scale(3.2); } }
}
.evc-tag rect { fill: var(--surface); }
.evc-tag.hi rect { fill: var(--up-on-dark); } .evc-tag.lo rect { fill: var(--down-on-dark); }
.evc-tag text { fill: var(--ink); font-size: 13px; font-weight: 800; text-anchor: middle; }
.evc-cross line { stroke: #FFFFFF; stroke-opacity: .4; }
.evc-cross circle { fill: #FFFFFF; }
.evc-cross rect { fill: var(--surface); }
.evc-tip-v { fill: var(--ink); font-size: 13px; font-weight: 800; } .evc-tip-t { fill: var(--ink-2); font-size: 11px; font-weight: 600; }
.ev-chart-wait { margin: 0; padding: 28px 20px; color: var(--dark-ink-2); font-size: 15px; }
.ev-chart:has(.evc[hidden]):has(.ev-chart-wait[hidden]) { display: none; }

/* ставка: шанс стороны, крупные кнопки сторон с выплатой, суммы */
.ev-trade { min-width: 0; display: grid; gap: 14px; align-content: start; background: var(--paper); border-radius: 24px; padding: 20px; }
.ev-chance { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ev-chance:empty { display: none; }
.ev-chance-l { font-size: 15px; font-weight: 700; color: var(--ink-2); }
.ev-chance-n { font: 800 36px/1 var(--body); letter-spacing: -.04em; }
.ev-sides .side { min-height: 64px; padding: 12px 16px; border-radius: 16px; font-size: 17px; justify-content: space-between; text-align: left; }
.ev-sides .side span { font-weight: 800; }
.ev-sides .side b { font-size: 20px; }
.ev-sides .side .sw { flex-basis: 100%; font-size: 14px; font-weight: 600; opacity: .92; }
.ev-sides .side.up:not(:disabled) { background: var(--yes-solid); color: #fff; } .ev-sides .side.up:hover:not(:disabled) { background: var(--yes-ink); }
.ev-sides .side.down:not(:disabled) { background: var(--no-solid); color: #fff; } .ev-sides .side.down:hover:not(:disabled) { background: var(--no-ink); }
.ev-sides .res-out { justify-items: start; text-align: left; }
.ev-sides .res-out b { font-size: 18px; padding: 10px 14px; border-radius: 12px; }
.ev-stake:empty { display: none; }
.ev-stake .stake { margin-top: 0; }
.ev-note { margin: 0; font-size: 14px; color: var(--ink-2); }
.ev-note:empty { display: none; }
.ev-note.err { color: var(--no-ink); font-weight: 700; }
.ev-state { background: var(--surface); border: 1px solid var(--card-line); border-radius: 16px; padding: 14px 16px; }
.ev-state b { display: block; font-size: 17px; line-height: 1.3; }
.ev-state p { margin: 4px 0 0; font-size: 15px; color: var(--ink-3); }
.ev-other { display: inline-flex; align-items: center; min-height: 44px; margin-top: 10px; padding: 0 16px; border-radius: 12px;
  background: var(--ink); color: var(--surface); font-weight: 800; text-decoration: none; }
.ev-other:hover { color: var(--lime); }

/* разделы под графиком; ряд чипов раундов прокручивается вбок; снимок итога выбранного прошлого раунда */
.ev-sec { min-width: 0; }
.ev-sec h2 { font: 800 20px/1.2 var(--body); margin: 6px 0 12px; }
.ev-rlist { display: flex; gap: 6px; overflow-x: auto; padding: 4px 2px; scrollbar-width: none; }
.ev-rounds .c-proof h3 { margin-top: 0; }

/* раскрывающиеся объяснения: строка-заголовок со стрелкой, внутри текст, таблица, мнение страны */
.ev-more { min-width: 0; border-top: 1px solid var(--line); }
.ev-more summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 58px; cursor: pointer; list-style: none;
  font: 800 18px/1.2 var(--body); }
.ev-more summary::-webkit-details-marker { display: none; }
.ev-more summary::after { content: ''; flex: none; width: 9px; height: 9px; margin: -4px 6px 0 0; border: solid var(--ink); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.ev-more[open] summary::after { margin-top: 4px; transform: rotate(-135deg); }
.ev-more > :not(summary) { margin: 0 0 14px; }
.ev-more p { font-size: 15px; color: var(--ink-3); }
.ev-more table { width: 100%; border-collapse: collapse; font-size: 15px; }
.ev-more td { padding: 8px 0; border-top: 1px solid var(--line-2); } .ev-more td:last-child { text-align: right; font-weight: 800; }
.ev-side:empty { display: none; }
.ev-group h2 { font: 800 20px/1.2 var(--body); margin: 6px 0 8px; }

@media (min-width: 900px) {
  .ev-grid { grid-template-columns: minmax(0, 1.7fr) minmax(320px, 1fr); column-gap: 36px; row-gap: 22px; align-items: start; }
  .ev-grid > * { grid-column: 1; }
  .ev-grid > .ev-trade { grid-column: 2; grid-row: 1 / span 9; position: sticky; top: calc(var(--hdr) + 16px); }
  .evc { height: 320px; }
  .ev-price { font-size: 34px; }
}
@media (max-width: 380px) {
  .ev-trade { padding: 16px; }
  .ev-price { font-size: 26px; }
  .ev-clock-n { font-size: 38px; }
  .ev-sides .side { padding: 12px; font-size: 16px; }
}
.evc-base-t, .evc-zone-t, .evc-ax { paint-order: stroke; stroke: var(--dark); stroke-width: 4px; stroke-linejoin: round; }
.ev-grid > .ev-group { grid-column: 1; margin-top: 0; }
.sides.decided { display: block; }
.side-dec { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 6px 12px; border-radius: 12px; background: var(--line-2); color: var(--ink-2); font-size: 14px; font-weight: 700; text-align: center; }

/* строка цифр раунда: цель, цена сейчас (цвет стороны, которая выигрывает), таймер */
.ev-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.ev-stats:empty { display: none; }
.ev-stat { min-width: 0; display: grid; align-content: start; gap: 2px; }
.ev-stat > span { font-size: 13px; font-weight: 700; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-stat b { font: 800 22px/1.15 var(--body); letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ev-stat small { font-size: 13px; font-weight: 700; }
.ev-stat small i { font-style: normal; }
.ev-stat.now.up b, .ev-stat.now.up small, .ev-stat.up b { color: var(--yes-ink); }
.ev-stat.now.down b, .ev-stat.now.down small, .ev-stat.down b { color: var(--no-ink); }
.ev-stat.time { justify-items: end; text-align: right; }
.ev-stat.time b { font-size: 30px; line-height: 1; }
.ev-stat.res b { display: inline-block; justify-self: start; padding: 2px 10px; border-radius: 8px; font-size: 18px; }
.ev-stat.res.up b { background: var(--yes-solid); color: #fff; } .ev-stat.res.down b { background: var(--no-solid); color: #fff; } .ev-stat.res.tie b { background: var(--line-2); }
.ev-head .ev-clock { grid-template-columns: minmax(0, 1fr); margin-top: 12px; gap: 8px; }
.ev-head .ev-dev { font-size: 14px; }

/* чипы раундов: «Сейчас» и прошлые по времени */
.ev-head .ev-rlist { margin: 0 -2px; }
.ev-r { display: inline-flex; align-items: center; gap: 6px; min-width: 0; min-height: 40px; padding: 0 12px; border: 1px solid var(--card-line); border-radius: 999px;
  background: var(--surface); font: 700 13px/1 var(--body); color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; flex: none; cursor: pointer; }
.ev-r i { font-style: normal; font-size: 11px; }
.ev-r.up i { color: var(--yes-solid); } .ev-r.down i { color: var(--no-solid); } .ev-r.tie i { color: var(--ink-2); }
.ev-r[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--surface); }

.ev-r[aria-pressed="true"].up i { color: var(--up-on-dark); } .ev-r[aria-pressed="true"].down i { color: var(--down-on-dark); }
.ev-r.now::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--yes-solid); }
.ev-r.now[aria-pressed="true"]::before { background: var(--lime); }

.sheet-bal { margin: -4px 0 6px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.sheet-bal:empty { display: none; }

/* нижняя панель телефона: стороны крупно (лист ставки) или состояние приёма; на десктопе её нет */
.ev-dock { display: none; }
@media (max-width: 860px) {
  .ev-body { --below: calc(84px + env(safe-area-inset-bottom)); }
  .ev-body .tabbar, .ev-body > header { display: none; }
  .ev-body .ev-top { position: sticky; top: 0; z-index: 20; margin: 0 -16px; padding: 10px 16px 8px; background: var(--page); }
  .ev-body .ev-sides { display: none; }
  /* приём закрыт: на телефоне в панели ставки пусто (состояние — в нижней панели) — панель не показываем */
  .ev-body .ev-trade:not(:has(.ev-chance:not(:empty), .ev-stake:not(:empty), .ev-note:not(:empty))) { display: none; }
  .ev-dock { display: block; position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: var(--surface); border-top: 1px solid var(--card-line); }
  .ev-dock:empty { display: none; }
  .ev-dock-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .ev-dock-b { min-height: 56px; padding: 0 16px; border-radius: 16px; font-size: 17px; justify-content: space-between; flex-wrap: nowrap; }
  .ev-dock-b span { font-weight: 800; overflow: hidden; text-overflow: ellipsis; }
  .ev-dock-b b { font-size: 19px; }
  .ev-dock-b.up:not(:disabled) { background: var(--yes-solid); color: #fff; } .ev-dock-b.down:not(:disabled) { background: var(--no-solid); color: #fff; }
  .ev-dock-state { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; }
  .ev-dock-state p { margin: 0; font-size: 15px; font-weight: 700; }
  .ev-dock-state a { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 12px;
    background: var(--ink); color: var(--surface); font-weight: 800; text-decoration: none; font-size: 14px; }
}
@media (max-width: 380px) {
  .ev-stat b { font-size: 19px; }
  .ev-stat.time b { font-size: 26px; }
}

/* ---------- Лента маркетов на главной: классы .fd-… ----------
   Над первой карточкой — только вкладки (подчёркивание), поиск значком и пилюли-подфильтры раздела. Каждый вопрос — карточка одной системы:
   белая, тонкая рамка, радиус 18px. Сверху плитка, вопрос и кольцо шанса; ниже «Да/Нет» с ценой в одну строку; внизу — тихая строка
   «сыграли · закрытие» и звёздочка. Шанс на карточке — один раз (в кольце). */
.fd-nav { position: sticky; top: var(--hdr); z-index: 20; display: flex; align-items: center; gap: 4px; margin: 0 -24px; padding: 0 24px;
  background: var(--page); border-bottom: 1px solid var(--line-2); }
.fd-nav .tabs { position: static; flex: 1 1 auto; min-width: 0; margin: 0; padding: 0 24px 0 0; gap: 2px; background: none;
  scroll-padding-inline: 0 32px;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
.fd-nav .tabs [role=tab] { position: relative; min-height: 48px; padding: 0 12px; border-radius: 0; background: none; color: var(--ink-2); }
.fd-nav .tabs [role=tab]:hover:not([aria-selected="true"]) { background: none; color: var(--ink); }
.fd-nav .tabs [role=tab][aria-selected="true"] { background: none; color: var(--ink); font-weight: 800; }
.fd-nav .tabs [role=tab][aria-selected="true"]::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--ink); }
.fd-nav .tabs [role=tab]:focus-visible { outline-offset: -6px; border-radius: 10px; }
.tabs [role=tab]:focus:not(:focus-visible) { outline: none; }
/* поиск: на телефоне — значок, поле раскрывается поверх вкладок; на десктопе поле видно сразу */
.fd-sslot { flex: none; display: flex; align-items: center; }
.fd-sbtn, .fd-sclose { flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px;
  background: none; color: var(--ink); cursor: pointer; font-size: 26px; line-height: 1; }
.fd-sbtn:hover, .fd-sclose:hover { background: var(--line-2); }
.fd-sbtn svg { width: 22px; height: 22px; }
.fd-sbox { display: none; align-items: center; gap: 4px; }
.fd-sbox .mk-s { flex: 1 1 auto; min-width: 0; }
.fd-sbox .mk-s input:focus { outline: none; border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.fd-nav.searching .tabs { visibility: hidden; }
.fd-nav.searching .fd-sbtn { display: none; }
.fd-nav.searching .fd-sbox { display: flex; position: absolute; inset: 0 24px; background: var(--page); }
@media (min-width: 861px) {
  .fd-sbtn, .fd-sclose { display: none; }
  .fd-sbox { display: flex; width: 280px; }
  .fd-nav.searching .tabs { visibility: visible; }
  .fd-nav.searching .fd-sbox { position: static; }
}
/* подфильтры раздела — пилюли; выбранная — чернилами, счётчик приглушён */
.fd-sub { display: flex; gap: 8px; margin: 12px -24px 0; padding: 0 24px 2px; overflow-x: auto; scrollbar-width: none; }
.fd-sub .pill { min-height: 40px; padding: 0 14px; border-radius: 999px; font-size: 14px; }
.fd-sub .pill small { margin-left: 3px; font-weight: 600; color: var(--ink-2); }
.fd-sub .pill[aria-pressed="true"] small { color: var(--dark-ink-2); }
.fd-sep { flex: none; width: 1px; margin: 8px 2px; background: var(--line); }
.fd-coin { display: inline-flex; align-items: center; gap: 7px; padding-left: 6px !important; }
.fd-coin .coin-i { width: 26px; height: 26px; }

/* заголовки разделов: во «Всё» — короткие, без подписей; во вкладке раздела их нет — раздел уже назван вкладкой */
#lists .sec { margin-top: 28px; }
#lists .sec > h2 { margin-bottom: 12px; }
#lists[data-tab]:not([data-tab="all"]) .sec > h2, #lists[data-tab]:not([data-tab="all"]) .now15-h { display: none; }
#lists[data-tab]:not([data-tab="all"]) .sec { margin-top: 16px; }
.mk-flat { margin-top: 16px; }

/* карточки: одна система для вопросов, групп, погоды, матчей и крипто-раундов */
#lists .qs.rows, #mk-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 12px; background: none; border: 0; border-radius: 0; overflow: visible; }
.fd, #lists .fx-row { background: var(--surface); border: 1px solid var(--card-line); border-radius: 18px; }
.fd { display: grid; gap: 10px; padding: 14px 16px 8px; align-content: start; }
.fd-head { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.fd-q { align-self: center; color: var(--ink); text-decoration: none; font: 700 16px/1.3 var(--body); overflow-wrap: anywhere; }
.fd-q:hover { color: var(--ink); text-decoration: underline; }
.fd-ring { position: relative; display: grid; justify-items: center; width: 48px; margin-top: -2px; }
.fd-ring svg { width: 44px; height: 44px; transform: rotate(-90deg); }
.fd-ring circle { fill: none; stroke: var(--line-2); stroke-width: 3.5; }
.fd-ring circle.arc { stroke: var(--ink); stroke-linecap: round; }
.fd-ring b { position: absolute; top: 0; left: 0; right: 0; height: 44px; display: grid; place-items: center; font: 800 12px/1 var(--body); letter-spacing: -.02em; }
.fd-ring small { margin-top: 1px; font-size: 10px; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
/* плитки — монограммы одного размера на нейтральной плашке; у металлов — свой тон, у нефти — капля */
:is(#lists, #mk-list) .tile { width: 40px; height: 40px; border-radius: 12px; background: var(--chip); color: var(--ink); font: 800 11px/1 var(--body); letter-spacing: -.01em; }
:is(#lists, #mk-list) .tile.t-gold { background: #F5E7B8; color: #5C4300; font-size: 14px; }
:is(#lists, #mk-list) .tile.t-silver { background: #E4E8EC; color: #333B44; font-size: 14px; }
:is(#lists, #mk-list) .tile.t-oil svg { width: 18px; height: 18px; color: var(--ink); }
:is(#lists, #mk-list) .tile .cat { width: 22px; height: 22px; }
:is(#lists, #mk-list) .tile.t-long { font-size: 10px; letter-spacing: -.03em; }

/* «Да/Нет» в карточке: подпись и цена крупно одной строкой, под ней мелко «$10 → $35.9» (в очках — «10 → 36 очков») */
.fd > .sides { gap: 8px; }
.fd > .sides .side { min-height: 56px; padding: 8px 14px; gap: 2px 8px; border-radius: 12px; font-size: 16px; }
.fd > .sides .side b { font-size: 16px; }
.fd-hint { flex-basis: 100%; min-height: 13px; font: 600 12px/1.1 var(--body); opacity: .85; white-space: nowrap; }
.fd > .sides .side:disabled { justify-content: space-between; flex-wrap: nowrap; text-align: left; }
.fd > .sides .side:disabled b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.fd .sides.decided { min-height: 56px; }
/* компактные кнопки — в строках группы и у матчей: одной строкой, без подсказки (в очках — только подпись) */
:is(.fd-opt, .fx-mk) .side { min-height: 44px; padding: 0 14px; flex-wrap: nowrap; border-radius: 12px; font-size: 15px; }
:is(.fd-opt, .fx-mk) .side b { font-size: 15px; }
:is(.fd-opt, .fx-mk) .side .sw { display: none; }
body:not(.money) :is(.fd-opt, .fx-mk) .side:not(:disabled) b { display: none; }
body:not(.money) .fx-mk .side:not(:disabled) .sw { display: inline; flex-basis: auto; font: 700 14px/1 var(--body); opacity: 1; }
.fx-mk .side:disabled { justify-content: space-between; flex-wrap: nowrap; text-align: left; }
.fx-mk .side:disabled b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }

/* шанс — полукольцо с числом и стороной */
.fd-gauge { position: relative; display: grid; justify-items: center; width: 64px; margin-top: -2px; }
.fd-gauge svg { width: 60px; height: 34px; overflow: visible; }
.fd-gauge path { fill: none; stroke: var(--line-2); stroke-width: 4.5; stroke-linecap: round; }
.fd-gauge path.arc { stroke: var(--no-mid); }
.fd-gauge.hi path.arc { stroke: var(--lime); }
.fd-gauge b { margin-top: -14px; font: 800 13px/1 var(--body); letter-spacing: -.02em; }
/* на тёмной карточке раунда — крупнее, дорожка тёмная */
.hero .fd-gauge { justify-self: end; align-self: start; width: 96px; }
.hero .fd-gauge svg { width: 92px; height: 52px; }
.hero .fd-gauge path { stroke: var(--dark-2); stroke-width: 4; }
.hero .fd-gauge.hi path.arc { stroke: var(--lime); } .hero .fd-gauge.lo path.arc { stroke: var(--down-on-dark); }
.hero .fd-gauge b { margin-top: -21px; font-size: 19px; color: #fff; }
.fbhero .fd-gauge path:not(.arc) { stroke: var(--line); }   /* на светло-серой карточке матча дорожка темнее */
.hero .fd-gauge small { color: var(--dark-ink-2); font-size: 12px; }
.hero .fd-hint { opacity: .9; }
.fd-cr .fd-head { grid-template-columns: minmax(0, 1fr); }
.fd-gauge small { margin-top: 3px; font-size: 11px; font-weight: 700; color: var(--ink-2); white-space: nowrap; max-width: 64px; overflow: hidden; text-overflow: ellipsis; }

/* значки монет */
.coin-i { flex: none; display: inline-grid; width: 32px; height: 32px; }
.coin-i svg { width: 100%; height: 100%; }
.fd-head > .coin-i { width: 40px; height: 40px; }
.hd-top .coin-i { width: 36px; height: 36px; }

/* «● Идёт» и обратный отсчёт */
.fd-live { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 700; }
.fd-live i { width: 8px; height: 8px; border-radius: 50%; background: #E5484D; }
@media (prefers-reduced-motion: no-preference) { .fd-live i { animation: fd-pulse 1.6s ease-in-out infinite; } @keyframes fd-pulse { 50% { opacity: .35; } } }
.fd-cd { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 700; }
.fd-cd.late { color: #C4262C; }

/* низ карточки: сколько сыграли, мнение страны, закрытие; звёздочка — справа */
.fd-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; min-height: 36px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.fd-m { display: inline-flex; align-items: center; gap: 5px; }
.fd-m svg { width: 15px; height: 15px; flex: none; }
.fd-foot .qc { display: inline; margin: 0; font-size: 13px; }
.fd-foot .bm { margin: 0 -8px 0 auto; width: 40px; height: 40px; }

/* группа исходов: строки «название — две компактные кнопки», первые три и «Ещё N» */
.fd-grp .fd-head { grid-template-columns: 40px minmax(0, 1fr); }
.fd-opts { list-style: none; margin: 0; padding: 0; display: grid; }
.fd-opt { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line-2); }
.fd-opt:first-child { border-top: 0; padding-top: 0; }
.fd-ol { min-width: 0; color: var(--ink); text-decoration: none; font: 700 15px/1.25 var(--body); overflow-wrap: anywhere; }
.fd-ol:hover { color: var(--ink); text-decoration: underline; }
.fd-ol small { display: block; margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.fd-cr .fd-ol { display: flex; align-items: center; gap: 10px; }
.fd-cr .fd-ol .coin-i { width: 30px; height: 30px; }
.fd-opt .sides { grid-template-columns: repeat(2, minmax(84px, auto)); gap: 6px; }
.fd-opt .sides.decided { grid-template-columns: minmax(174px, auto); }
.fd-opt .side { padding: 0 12px; font-size: 14px; gap: 8px; }
body:not(.money) .fd-opt .side:not(:disabled) .sw { display: none; }
body:not(.money) .fd-opt .side:not(:disabled), .fd-opt .side:disabled { justify-content: center; }
.fd-opt .side:disabled b { display: none; }   /* «почти решено» — серой кнопкой с подписью стороны, пояснение в title */
.fd-more { justify-self: start; min-height: 40px; padding: 0; border: 0; background: none; color: var(--ink); font: 700 14px/1 var(--body);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* матчи и крипто-раунды — та же рамка; серые плашки убраны */
#lists .fixtures { display: grid; gap: 12px; margin: 0; border: 0; border-radius: 0; overflow: visible; }
#lists .fx-row + .fx-row { border-top: 1px solid var(--card-line); }
.fx-when b { color: var(--ink); font-weight: 800; margin-right: 6px; }
.fx-mk:nth-child(2):last-child { grid-column: 1 / -1; }
.fx-mk:nth-child(2):last-child .sides { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

/* бегущая строка: подпись без капса, длина раунда приглушена */
.tk-h { text-transform: none; letter-spacing: 0; font-size: 13px; }
.ticker .tk-len { color: var(--dark-ink-2); font-weight: 600; }

@media (max-width: 860px) {
  .fd-nav { margin: 0 -16px; padding: 0 8px 0 16px; }
  .fd-nav .tabs [role=tab] { padding: 0 10px; font-size: 15px; }
  .fd-nav .tabs [role=tab][aria-selected="true"]::after { left: 10px; right: 10px; }
  .fd-nav.searching .fd-sbox { inset: 0 8px 0 16px; }
  .fd-sub { margin: 12px -16px 0; padding: 0 16px 2px; }
  #lists .qs.rows, #mk-list { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .fd { padding: 14px 14px 8px; }
  #lists .fx-row { padding: 14px; }
  .wx-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}