/* =========================================================================
   Рынок предсказаний — витрина
   =========================================================================
   Карточный фид в духе Polymarket / 1win Markets: вопрос, пара исходов
   (Да=зелёный, Нет=красный), цена в кэфах и вероятность, объём и дедлайн.
   Вся палитра — из переменных темы Shell. Зелёный/красный — биржевые
   (как у Binance/Stake).

   Обёртка .prd-wrap НЕ задаёт собственных отступов и ширины: витрина сидит
   в .shell-main на тех же 24px от краёв, что и страница слотов. Шапка и чипы
   категорий переиспользуют .shell-section-head / .shell-chips из shell.css.
*/

/* --- Токены раздела -----------------------------------------------------
   Палитра берётся из переменных темы (shell.css): --surface, --surface-2,
   --text, --muted, --accent, --up, --danger, --ink. Здесь только то, чего в
   теме нет и что нужно именно этому разделу.

   Почему отдельные токены для КРАСНОГО ТЕКСТА и приглушённого текста.
   Тема рассчитана на заливки и границы, а не на мелкий текст на тёмной
   тонированной подложке: #f6465d на --surface даёт 4.48, на тонированной
   плашке — 3.0–3.9, --muted на --surface-2 — 3.95 (норма AA для обычного
   текста — 4.5). Один такой токен на раздел дешевле, чем сорок мест, где
   цвет подобран «на глаз» и разъезжается при первой правке.
   Замеры (WCAG 2.1, relative luminance):
     --prd-danger-ink на --surface ......... 5.76
     --prd-danger-ink на тонированной дг ... 4.97
     --prd-muted-strong на --surface-2 ..... 5.20
     --prd-muted-strong на тонированной зел. 4.82
*/
:root {
    --prd-line: #4a5663;
    /* Граница карточек и панелей. Отдельным токеном, потому что повторяется
       девять раз, а в теме такого цвета нет: border: 1px solid --surface-2
       давал контраст 1.33 к фону, и карточка растворялась. */
    --prd-line-hover: #5b6878;
    --prd-line-soft: #3a4350;
    /* Граница мелких элементов (чипы сортировки, мини-панели). */
    --prd-danger-ink: #ff6b7d;
    /* Красный ТЕКСТ. Ярче --danger: тот проходит AA только на самом тёмном
       фоне и проваливается на плашках с красной подсветкой. */
    --prd-muted-strong: #9aa4b2;
    /* Приглушённый текст там, где --muted не дотягивает: проценты плеч,
       подсказки в окне ставки, статусы позиций. */
}

/* Оставшиеся литеральные цвета — по одному месту каждый, и токен для них был
   бы шумом: верх градиента кнопок (#12d18b, #ff5b70 — низ берётся из --up и
   --danger), тело скелета графика (var(--prd-shimmer)), чёрный в mask-image (#000 — это
   не цвет, а альфа-маска) и подпись активного чипа (--accent из темы). */

/* --- Сетка карточек ---------------------------------------------------- */

.prd-list {
    display: grid;

    /* Три колонки — осознанный выбор ширины карточки, а не следствие minmax.
       auto-fill давал четыре на 1440: карточка 280px, вопрос в три строки,
       лестница из восьми ступеней разваливалась на огрызки вроде «между 3,0% и
       3,4%?» в шесть строк. Здесь карточка 380px на 1440 и 470px на 1920.

       Сетка колонками, а не по минимальной ширине, ещё и потому, что типов
       карточек четыре (график, дата, матч, список исходов): с auto-fill у
       каждого была своя минимальная ширина, и в одной категории сетка ложилась
       по-разному. Теперь раскладка одна на витрину. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    align-items: stretch;

    /* Потолок ширины: без него на 1920 карточка растягивается в 520px —
       вопрос читается одной строкой, а лестница выглядит пустой. */
    max-width: 1440px;
}

.prd-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--surface);

    /* Граница + тень работают вместе. Одной границы --surface-2 не хватало:
       её контраст к фону 1.33:1, карточка растворялась в фоне и «появлялась»
       только на hover — то есть на тач-устройствах не появлялась никогда. */
    border: 1px solid var(--prd-line);
    border-radius: 12px;
    padding: 14px;
    gap: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .32);
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

/* Цветная полоса слева по категории убрана. Идея была «раздел узнаётся до
   чтения заголовка», но на сетке из десятка карточек это читалось как
   гирлянда: оранжевая, синяя, розовая, бирюзовая вперемешку. Категория и так
   подписана чипом в шапке карточки — дублировать её цветом нечего. */
.prd-card:hover {
    border-color: var(--prd-line-hover);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .45);
    transform: translateY(-1px);
}



.prd-cat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    /* Тонированная подложка + иконка вместо точки 7px: категорию видно
       боковым зрением, а не по крошечной точке. */
    color: var(--prd-cat, var(--muted));
    background: color-mix(in srgb, var(--prd-cat, var(--muted)) 13%, transparent);
}

.prd-cat i {
    font-size: 12px;
    line-height: 1;
}

.prd-q {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text);
    margin: 0;
    flex: 1 1 auto;
    min-height: 2.8em;
}

/* --- Исходы (Да / Нет) -------------------------------------------------- */

.prd-outcomes {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.prd-side {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid transparent;
    background: var(--surface-2);
    color: var(--text);
    cursor: pointer;
    text-align: left;
    transition: filter .12s ease, border-color .12s ease, transform .06s ease;
}

.prd-side:active {
    transform: scale(.99);
}

.prd-side-yes {
    background: color-mix(in srgb, var(--up) 14%, var(--surface));
    border-color: color-mix(in srgb, var(--up) 32%, transparent);
}

.prd-side-yes:hover {
    border-color: var(--up);
}

.prd-side-no {
    background: color-mix(in srgb, var(--danger) 14%, var(--surface));
    border-color: color-mix(in srgb, var(--danger) 32%, transparent);
}

.prd-side-no:hover {
    border-color: var(--danger);
}

.prd-side-label {
    font-weight: 700;
    font-size: 14px;
    min-width: 34px;
}

.prd-side-yes .prd-side-label { color: var(--up); }
.prd-side-no  .prd-side-label { color: var(--prd-danger-ink); }

/* Кэф — главное число на карточке, поэтому он крупнее всего остального текста
   (было 14px наравне с пояснительным). Процент ушёл вперёд и вправо как
   вторичная метка. */
.prd-side-odds {
    font-weight: 800;
    font-size: 19px;
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
}

.prd-side-pct {
    margin-left: auto;
    font-size: 12px;
    font-weight: 600;
    /* Процент стоит на тонированной подложке плеча, где --muted давал 3.67
       (зелёное плечо) и 4.12 (красное) — ниже нормы для 12px. */
    color: var(--prd-muted-strong);
    font-variant-numeric: tabular-nums;
}

/* --- На чьей стороне игроки -------------------------------------------- */

/* Единственное место на карточке, где видно не цену дома, а поведение других
   игроков. Данные уже пишутся в volume_yes/volume_no при каждой ставке.
   Показывается только когда на рынке есть деньги: полоса при нулевом объёме
   (50/50 по умолчанию) врала бы о «мнении толпы». */
.prd-crowd {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.prd-crowd-bar {
    display: block;
    height: 5px;
    border-radius: 99px;
    overflow: hidden;
    background: color-mix(in srgb, var(--danger) 55%, var(--surface-2));
}

.prd-crowd-bar i {
    display: block;
    height: 100%;
    border-radius: 99px;
    background: var(--up);
    transition: width .25s ease;
}

.prd-crowd-txt {
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
}

/* --- Футер карточки ----------------------------------------------------- */

.prd-card-foot {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--muted);
}

.prd-deadline {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.prd-deadline i {
    font-size: 13px;
    line-height: 1;
}

/* Источник расчёта исхода — вторая половина футера, прижата вправо.
   Дедлайн слева, «чем считается» справа: обе метки про одно — когда и как. */
.prd-src {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--muted);
    white-space: nowrap;
}

.prd-src i {
    font-size: 13px;
    line-height: 1;
}

/* Дедлайн, который вот-вот наступит (< 24 ч). Класс раньше включался по
   `deadline_at->isPast()`, но просроченные рынки в витрину не попадают вообще —
   то есть подсветка была мёртвой. Теперь это «закроется сегодня». */
.prd-deadline.is-soon {
    color: var(--accent);
    font-weight: 700;
}

/* --- Пагинация ---------------------------------------------------------- */

.prd-pager {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
}

.prd-pager-pages {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}

.prd-pager a,
.prd-pager span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border-radius: 8px;
    background: var(--surface);
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
}

.prd-pager a:hover {
    color: var(--text);
    background: var(--surface-2);
}

/* Текущая страница — единственная с акцентом: она отвечает «где я», а не
   «куда пойти», и спорить с ссылками ей незачем. Правило было написано дважды,
   и верхнее (акцентная заливка) перекрывалось нижним — то есть не работало
   никогда. Оставлен тот вид, который игрок видит на самом деле. */
.prd-pager .is-current {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 16%, var(--surface));
    font-weight: 700;
}

/* Стрелка на краю списка и многоточие пропуска — не действия: их гасим,
   чтобы не выглядели нажимаемыми. */
.prd-pager .is-off,
.prd-pager .is-gap {
    background: transparent;
    color: var(--dim);
    cursor: default;
}

/* --- Отзывчивость: на мобильных карточки крупнее, поэтому меньше колонок -- */

@media (max-width: 1100px) {
    .prd-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .prd-list { gap: 10px; }
    .prd-card {
        padding: 12px;
        gap: 10px;
    }
}

/* Одна колонка на телефоне: в двух по 180px строка лестницы («$82 500 — 57% —
   Да — Нет») не влезает, подпись рвётся по буквам. */
@media (max-width: 560px) {
    .prd-list { grid-template-columns: repeat(1, minmax(0, 1fr)); }
}

/* --- История позиций ----------------------------------------------------- */

/* Таб-переключатель «Рынки / Мои ставки» — как у Polymarket (Markets /
   Portfolio). Сидит сразу под шапкой, до чипов категорий. */
.prd-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
    padding: 4px;
    background: var(--surface);
    border: 1px solid var(--surface-2);
    border-radius: 10px;
    width: max-content;
    max-width: 100%;
}

.prd-tab {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 16px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 700;
    color: var(--muted);
    transition: color .12s ease, background .12s ease;
}

.prd-tab:hover { color: var(--text); }

.prd-tab.is-active {
    background: var(--surface-2);
    color: var(--text);
}

/* Сводка по расчётам: сколько рынков закрыто и сколько выплачено.
   Стоит над списком и отвечает на главный вопрос страницы до чтения строк. */
.prd-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}

.prd-stat {
    flex: 1 1 180px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--surface);
    border: 1px solid var(--prd-line);
}

.prd-stat-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
}

.prd-stat-value {
    font-size: 19px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

.prd-stat-value.is-accent { color: var(--accent); }

/* Ссылка на источник расчёта в списке результатов. */
.prd-src-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--accent);
    font-weight: 700;
    text-decoration: none;
}

.prd-src-link:hover { text-decoration: underline; }
.prd-src-link i { font-size: 11px; }

/* Одна колонка позиций: история — это лента, а не сетка карточек рынков. */
.prd-list-positions {
    grid-template-columns: 1fr;
    max-width: 720px;
}

.prd-pos {
    background: var(--surface);
    border: 1px solid var(--surface-2);
    border-radius: 14px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.prd-pos-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.prd-pos-side {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: 13px;
}

.prd-pos-side.is-yes { color: var(--up); }
.prd-pos-side.is-no  { color: var(--prd-danger-ink); }

/* Отменённый рынок — нейтрально. Красный здесь читался как «проиграл», хотя
   исход не наступил вовсе: позиции вернули, и цвет не должен ничего
   утверждать об исходе (аудит №34). */
.prd-pos-side.is-cancelled { color: var(--prd-muted-strong); }

.prd-pos-odds {
    font-weight: 600;
    font-size: 12px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.prd-pos-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 99px;
    background: var(--surface-2);
    color: var(--muted);
}

.prd-pos-status i { font-size: 12px; line-height: 1; }

.prd-pos-status.is-won  { color: var(--up); background: color-mix(in srgb, var(--up) 16%, var(--surface)); }
.prd-pos-status.is-lost { color: var(--prd-danger-ink); background: color-mix(in srgb, var(--danger) 16%, var(--surface)); }

.prd-pos-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.4;
    text-decoration: none;
}

a.prd-pos-title:hover { color: var(--accent); }

.prd-pos-rows {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 13px;
}

.prd-pos-rows .prd-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.prd-pos-rows .prd-row span { color: var(--muted); }
.prd-pos-rows .prd-row b { font-variant-numeric: tabular-nums; }
.prd-pos-rows .prd-row b.is-profit { color: var(--up); }
.prd-pos-rows .prd-row b.is-loss { color: var(--prd-danger-ink); }

/* Пустое состояние истории — стартовая точка, а не тупик. */
.prd-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 56px 24px;
    text-align: center;
    grid-column: 1 / -1;
}

.prd-empty-title { font-size: 16px; font-weight: 700; color: var(--text); }
.prd-empty-hint  { font-size: 13px; color: var(--muted); }
.prd-empty-action {
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 18px;
    border-radius: 8px;
    background: var(--accent);
    color: var(--ink);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    /* Кнопка входа в пустом состоянии истории — <button>, а не <a>:
       без этого браузер рисует свою рамку и не даёт курсор-указатель. */
    border: none;
    cursor: pointer;
    transition: filter .12s ease;
}
.prd-empty-action:hover { filter: brightness(1.06); color: var(--ink); }

/* --- Модал ставки -------------------------------------------------------- */

.prd-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, .62);
    backdrop-filter: blur(2px);
    animation: prd-fade .18s ease;
    /* Прокрутка подложки: на низком экране (телефон в ландшафте, 540px и
       меньше) окно выше вьюпорта, и без этого до заголовка и вопроса не
       добраться вообще — страница за модалкой прокрутке не подлежит
       (html, body { overflow: hidden } в shell.css), а подложка была
       overflow: visible. -webkit-overflow-scrolling: инерция на iOS. */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

@keyframes prd-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

.prd-modal {
    width: 100%;
    max-width: 420px;
    background: var(--surface);
    border: 1px solid var(--surface-2);
    border-radius: 18px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    animation: prd-up .22s cubic-bezier(.2, .8, .25, 1);
    /* Потолок высоты и своя прокрутка. Окно ставки — самая длинная форма
       раздела (вопрос, сторона, баланс, поле, быстрые суммы, два итога,
       ошибка, кнопка), и на 500px высоты оно не влезает целиком: тогда
       прокручивается само окно, а кнопка подтверждения остаётся достижимой.
       100dvh, а не 100vh: на мобильных адресная строка съедает часть экрана и
       vh считает её как доступную. */
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

@keyframes prd-up {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

.prd-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.prd-modal-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
}

.prd-modal-x {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--muted);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: color .12s ease, background .12s ease;
}

.prd-modal-x:hover {
    color: var(--text);
    background: var(--surface-3, var(--surface-2));
}

.prd-modal-q {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.4;
}

.prd-modal-side {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid transparent;
}

.prd-modal-side.is-yes {
    background: color-mix(in srgb, var(--up) 12%, var(--surface));
    border-color: color-mix(in srgb, var(--up) 30%, transparent);
}
.prd-modal-side.is-no {
    background: color-mix(in srgb, var(--danger) 12%, var(--surface));
    border-color: color-mix(in srgb, var(--danger) 30%, transparent);
}

.prd-modal-side-label {
    font-weight: 800;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: .02em;
}
.prd-modal-side.is-yes .prd-modal-side-label { color: var(--up); }
.prd-modal-side.is-no  .prd-modal-side-label { color: var(--prd-danger-ink); }

.prd-modal-side-meta {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.prd-modal-odds {
    font-weight: 800;
    font-size: 20px;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.prd-modal-pct {
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.prd-modal-balance {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
    color: var(--muted);
    padding: 0 2px;
}

.prd-modal-balance b {
    color: var(--text);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.prd-modal-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.prd-modal-field label {
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
}

.prd-modal-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.prd-modal-input {
    width: 100%;
    padding: 13px 58px 13px 14px;
    border-radius: 12px;
    border: 1px solid var(--surface-2);
    background: var(--bg-deep);
    color: var(--text);
    font-size: 18px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    -moz-appearance: textfield;
}

.prd-modal-input::-webkit-outer-spin-button,
.prd-modal-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.prd-modal-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

.prd-modal-currency {
    position: absolute;
    right: 14px;
    font-size: 13px;
    font-weight: 700;
    color: var(--muted);
    pointer-events: none;
}

.prd-modal-quick {
    display: flex;
    gap: 8px;
}

.prd-quick {
    flex: 1;
    padding: 9px 0;
    border-radius: 10px;
    border: 1px solid var(--surface-2);
    background: var(--surface-2);
    color: var(--text);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease;
}

.prd-quick:hover {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}

.prd-modal-returns {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--surface-2);
}

.prd-return {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
    color: var(--muted);
}

.prd-return b {
    color: var(--text);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.prd-return-profit b {
    color: var(--up);
}

.prd-modal-note {
    font-size: 12px;
    /* --prd-danger-ink, а не --danger: 4.48 при норме 4.5 — то есть провал
       ровно на границе, который видно только замером. */
    color: var(--prd-danger-ink);
    min-height: 16px;
}

/* Действие внутри сообщения об отказе. Единственный отказ, у которого есть
   следующий шаг, — нехватка средств: ведём в кассу, а не оставляем игрока
   перед красной строкой в тупике (аудит №38). */
.prd-note-action {
    color: var(--accent);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.prd-note-action:hover { color: var(--accent-hover); }

/* Цена изменилась — это не ошибка игрока, а новые условия: подсвечиваем
   акцентом, а не красным «ты сделал что-то не так». */
.prd-modal-note.is-warn {
    color: var(--accent);
    font-weight: 600;
}

/* Гостевая модалка: вместо поля суммы и мёртвых кнопок 25/50/75/Max —
   объяснение и одна кнопка входа. */
.prd-modal-hint {
    font-size: 13px;
    line-height: 1.5;
    /* --muted давал здесь 3.95: подсказка про вход — это текст, который
       обязан читаться, а не подпись под картинкой. */
    color: var(--prd-muted-strong);
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--surface-2);
}

/* Пределы ставки под полем: рамки видны до ввода, а не после отказа. Тот же
   --prd-muted-strong (на --surface даёт 6.27), размер 12px — это служебная
   подпись, но не «мелкий серый на сером». */
.prd-modal-limits {
    font-size: 12px;
    color: var(--prd-muted-strong);
    font-variant-numeric: tabular-nums;
}

.prd-modal-confirm {
    width: 100%;
    padding: 14px;
    border-radius: 12px;
    border: none;
    font-weight: 800;
    font-size: 15px;
    cursor: pointer;
    color: var(--ink);
    transition: filter .12s ease, transform .06s ease;
}

.prd-modal-confirm:active {
    transform: scale(.995);
}

.prd-modal-confirm:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.prd-modal-confirm.is-yes {
    background: linear-gradient(180deg, #12d18b, var(--up));
}
/* Тёмный текст на красной заливке, как у кнопки «Да» — и потому что белый на
   --danger давал 3.53 при норме 4.5. ink на --danger — 5.49. Заодно две
   кнопки одного окна перестали быть разными по логике цвета: раньше «Да» была
   тёмной надписью, а «Нет» — белой. */
.prd-modal-confirm.is-no {
    background: linear-gradient(180deg, #ff5b70, var(--danger));
    color: var(--ink);
}

.prd-modal-confirm:hover:not(:disabled) { filter: brightness(1.05); }

@media (min-width: 640px) {
    .prd-modal-backdrop {
        align-items: center;
    }
}

/* Чем считается исход. Строка живёт в модалке ставки — там, где игрок
   принимает решение, а не на отдельной странице, куда он не пойдёт. */
.prd-modal-rules {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: var(--muted);
    padding: 0 2px;
}

.prd-modal-rules i {
    font-size: 13px;
    line-height: 1;
    color: var(--accent);
}

.prd-modal-rules a {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.prd-modal-rules a:hover { text-decoration: underline; }

/* --- Всплывашка успеха --------------------------------------------------- */

.prd-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translate(-50%, 16px);
    z-index: 1100;
    padding: 11px 18px;
    border-radius: 12px;
    background: var(--surface-2);
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
    opacity: 0;
    transition: opacity .2s ease, transform .2s ease;
}

.prd-toast.is-show {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* На мобиле снизу стоит фиксированный .shell-bottom (50px) — тост поверх него
   перекрывал навигацию ровно в момент, когда игрок хочет на неё нажать. */
@media (max-width: 760px) {
    .prd-toast {
        bottom: calc(50px + 18px);
    }
}

/* --- Затухание ленты категорий на мобиле --------------------------------
   Чипы не влезают в 390px (565px против 366px) и обрезаются на полуслове
   («Техноло…»), что читается как вёрстка, поехавшая вбок. Класс навешивает
   predictions.js: он же снимает затухание, когда лента долистана до конца. */
/* Лент теперь две — категории и темы, поэтому правило общее по атрибуту, а не
   по классу одной из них. */
.prd-wrap [data-scroll-x].is-overflowing:not(.is-end) {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
}

/* Три вкладки («Рынки / Мои ставки / Результаты») на 390px сидят впритык:
   поджимаем отступы, иначе подпись ломается на две строки. */
@media (max-width: 480px) {
    .prd-tab {
        padding: 0 11px;
        font-size: 12px;
        height: 30px;
    }
}

/* =========================================================================
   Страница одного рынка
   =========================================================================
   Карточка на витрине продаёт вопрос; эта страница отвечает на возражения —
   как считается исход, как двигалась цена, что будет с деньгами. Раскладка:
   слева ставка (то же плечо, что и в карточке), справа история цены.
*/

.prd-back {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 12px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.prd-back:hover { color: var(--text); }
.prd-back i { font-size: 12px; }

.prd-hero {
    background: var(--surface);
    border: 1px solid var(--prd-line);
    border-radius: 14px;
    padding: 18px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .32);
}

.prd-hero-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.prd-hero-q {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text);
    margin: 0 0 16px;
}

.prd-answer {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    background: var(--surface-2);
    color: var(--text);
}

.prd-answer.is-yes { background: color-mix(in srgb, var(--up) 16%, var(--surface)); color: var(--up); }
.prd-answer.is-no { background: color-mix(in srgb, var(--danger) 16%, var(--surface)); color: var(--prd-danger-ink); }
.prd-answer.is-cancelled { color: var(--muted); }

.prd-answer-date {
    margin-left: 4px;
    font-weight: 600;
    color: var(--muted);
}

.prd-hero-grid {
    display: grid;
    grid-template-columns: minmax(280px, 340px) 1fr;
    gap: 18px;
    align-items: start;
}

.prd-hero-bet {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.prd-hero-bet .prd-side { padding: 14px; }
.prd-hero-bet .prd-side-odds { font-size: 22px; }

.prd-side:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.prd-side:disabled:hover { border-color: transparent; }

.prd-closed-note {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
}

.prd-hero-vol {
    font-size: 13px;
    color: var(--muted);
}

.prd-hero-vol b { color: var(--text); font-variant-numeric: tabular-nums; }

/* --- История цены ------------------------------------------------------- */

.prd-hero-chart {
    background: var(--bg-deep);
    border-radius: 12px;
    padding: 14px;
    min-height: 180px;
    display: flex;
    flex-direction: column;
}

.prd-chart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.prd-chart-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
}

.prd-chart-tabs { display: inline-flex; gap: 4px; }

.prd-chart-tab {
    padding: 4px 10px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
    text-decoration: none;
    transition: background .12s ease, color .12s ease;
}

.prd-chart-tab:hover { color: var(--text); background: var(--surface-2); }
.prd-chart-tab.is-active { background: var(--surface-2); color: var(--text); }

.prd-chart-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 10px;
}

/* График страницы рынка. Разметку и рисование делит с графиком карточки
   (.prd-chart, см. блок «График» ниже): цвета, линия, заливка и отметка 50%
   описаны один раз на два экрана. Здесь только размер — это главный график
   страницы, а не искра в карточке, и он выше. */
/* Специфичность выше, чем у .prd-chart (он ниже в файле и иначе перекрыл бы
   высоту: оба — один класс). */
.prd-chart.prd-chart-lg { height: 120px; }

/* Текст пустого состояния на большом графике — обычного размера: на карточке
   он мелкий, потому что там полоса 64px. */
.prd-chart.prd-chart-lg .prd-chart-empty { font-size: 13px; }

.prd-chart-foot {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 13px;
    color: var(--muted);
}

.prd-chart-foot b { color: var(--text); font-variant-numeric: tabular-nums; }

.prd-chart-delta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.prd-chart-delta.is-up { color: var(--up); }
.prd-chart-delta.is-down { color: var(--prd-danger-ink); }

/* Пустое состояние графика на СТРАНИЦЕ РЫНКА: блок вместо SVG, по центру
   своей панели, с иконкой. У карточки витрины пустое состояние своё — там это
   узкая полоса 64px (см. `.prd-chart .prd-chart-empty`). Раньше оба правила
   жили под одним селектором, и второе перекрывало первое по порядку в файле:
   читалось как дубль, а работало случайно — то есть правка любого из них
   ломала второй экран. */
.prd-chart-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--muted);
    font-size: 13px;
    text-align: center;
}

.prd-chart-empty i { font-size: 22px; opacity: .6; }

/* --- Смысловые блоки ---------------------------------------------------- */

.prd-block {
    margin-top: 16px;
    background: var(--surface);
    border: 1px solid var(--prd-line);
    border-radius: 14px;
    padding: 18px;
}

.prd-block-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 12px;
}

.prd-block-src {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 10px;
}

.prd-block-src i { color: var(--accent); font-size: 14px; }
.prd-block-src b { color: var(--text); }

.prd-block-text {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text);
    margin: 0;
    white-space: pre-line;
}

.prd-block-text.is-muted { color: var(--muted); }

/* Короткий русский пересказ правил: одна строка, по которой игрок понимает,
   по чьим данным считается исход. Крупнее и светлее остального текста блока —
   это ответ на вопрос, ради которого блок существует, а не сноска. */
.prd-block-text.is-lead {
    font-size: 15px;
    line-height: 1.5;
    color: var(--text);
    margin-bottom: 10px;
}

.prd-block-text.is-lead b { color: var(--accent); }

/* Свёрнутый оригинал правил. Оригинал всегда на странице (details, а не
   «показать по клику из JS»): текст остаётся в разметке, его видит поиск, и он
   доступен без скриптов. */
.prd-rules {
    border: 1px solid var(--prd-line-soft);
    border-radius: 10px;
    background: var(--surface-2);
    overflow: hidden;
}

.prd-rules summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 14px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    cursor: pointer;
    list-style: none;
    /* Своя стрелка вместо маркера браузера: маркер в тёмной теме выглядит
       светлым треугольником из другого интерфейса. */
    user-select: none;
}

.prd-rules summary::-webkit-details-marker { display: none; }

.prd-rules summary::before {
    content: '';
    flex: 0 0 auto;
    width: 0;
    height: 0;
    border-left: 5px solid currentColor;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    transition: transform .15s ease;
}

.prd-rules[open] summary::before { transform: rotate(90deg); }

.prd-rules summary:hover { color: var(--accent); }

.prd-rules summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.prd-rules .prd-block-text {
    padding: 0 14px 14px;
    font-size: 13px;
    color: var(--muted);
}

/* Свежесть цены: «Данные на 14:20». Служебная строка, поэтому приглушённая,
   но по AA (--muted на --surface даёт 4.77 — проходит, но подпись стоит и на
   тонированных подложках, где он проваливается). */
.prd-updated {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: var(--prd-muted-strong);
    font-variant-numeric: tabular-nums;
}

.prd-updated i { font-size: 13px; line-height: 1; }

.prd-steps {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: prd-step;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.prd-steps li {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-left: 34px;
    position: relative;
}

.prd-steps li::before {
    counter-increment: prd-step;
    content: counter(prd-step);
    position: absolute;
    left: 0;
    top: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 18%, var(--surface-2));
    color: var(--accent);
    font-size: 12px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.prd-steps b { font-size: 14px; color: var(--text); }
.prd-steps span { font-size: 13px; line-height: 1.55; color: var(--muted); }

.prd-block-note {
    margin: 14px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--surface-2);
    font-size: 12px;
    line-height: 1.55;
    color: var(--muted);
}

@media (max-width: 860px) {
    .prd-hero-grid { grid-template-columns: 1fr; }
    .prd-hero-q { font-size: 18px; }
    .prd-hero { padding: 14px; }
    .prd-block { padding: 14px; }
}

/* --- Шапка витрины: одна панель ---------------------------------------- */

/* Название раздела со счётчиком, разделы, порядок сортировки и лента категорий
   живут в одном блоке. Раньше это были три отдельные полосы друг под другом:
   заголовок висел сам по себе, вкладки в своей рамке, фильтры в третьей — и
   вместе они съедали 128px до первой карточки. */

.prd-panel {
    background: var(--surface);
    border: 1px solid var(--prd-line-soft);
    border-radius: 14px;
    margin-bottom: 16px;
}

.prd-panel-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--surface-2);
    flex-wrap: wrap;
}

.prd-panel-title {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
}

.prd-panel-title h2 {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.01em;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.prd-panel-title span {
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    white-space: nowrap;
}

/* Отметка свежести линии в шапке витрины: тот же ряд, что счётчик рынков,
   но цвет — --prd-muted-strong: это не подпись к заголовку, а данные, по
   которым игрок решает, живая цифра или нет. */
.prd-panel-title .prd-updated {
    font-weight: 600;
    color: var(--prd-muted-strong);
}

/* Разделитель между редакционными категориями и линией: счётчики первой
   группы ровно складываются в «Все», второй — нет, и это должно быть видно
   до чтения чисел (аудит №33). */
/* Вкладки внутри панели: текстовые кнопки без своей рамки. */
.prd-tabs.is-panel {
    margin: 0 0 0 auto;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    width: auto;
    gap: 2px;
}

.prd-tabs.is-panel .prd-tab {
    height: 30px;
    padding: 0 12px;
    font-size: 12.5px;
}

.prd-panel-body { padding: 12px 14px; }

.prd-panel-body .shell-chips { margin-bottom: 0; }

.prd-panel-body .shell-chip i {
    font-style: normal;
    margin-left: 7px;
    font-size: 11px;
    font-weight: 700;
    /* Тот же AA-приглушённый тон, что и остальные служебные подписи. */
    color: var(--prd-muted-strong);
    font-variant-numeric: tabular-nums;
}

.prd-panel-body .shell-chip.is-active i { color: var(--accent); }

/* --- Порядок сортировки: выпадающий список ------------------------------ */

.prd-sort-dd { position: relative; flex: 0 0 auto; }

.prd-sort-dd summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 12px;
    border-radius: 9px;
    background: var(--surface-2);
    border: 1px solid var(--prd-line-soft);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text);
    cursor: pointer;
    list-style: none;
}

.prd-sort-dd summary::-webkit-details-marker { display: none; }
.prd-sort-dd summary:hover { border-color: var(--prd-line); }
.prd-sort-dd[open] summary { border-color: var(--accent); }

.prd-sort-k { color: var(--muted); font-weight: 600; }

.prd-caret {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--muted);
}

.prd-sort-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 20;
    min-width: 190px;
    padding: 5px;
    background: var(--surface);
    border: 1px solid var(--prd-line);
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .5);
}

.prd-sort-i {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 7px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--muted);
    text-decoration: none;
}

.prd-sort-i:hover { background: var(--surface-2); color: var(--text); }
.prd-sort-i.is-active { color: var(--text); }
.prd-sort-i i { color: var(--accent); font-size: 13px; }

/* На телефоне шапка панели — сетка 2×2: заголовок и порядок в первой строке,
   вкладки во второй во всю ширину. Раньше та же строка разваливалась на три
   этажа. Области заданы именами: при авторазмещении вкладки во всю ширину
   сдвигают курсор вниз, и следующий элемент сетка кладёт уже под ними, а не
   назад в первую строку. */
@media (max-width: 760px) {
    .prd-panel-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "title sort"
            "tabs  tabs";
        align-items: center;
        gap: 10px;
        padding: 11px 12px;
    }

    .prd-panel-title { grid-area: title; gap: 8px; }
    .prd-panel-title h2 { font-size: 15px; }
    .prd-panel-title span { font-size: 11.5px; }

    .prd-sort-dd { grid-area: sort; }
    .prd-sort-dd summary { height: 30px; padding: 0 10px; }
    /* Слово «Порядок» на телефоне лишнее: рядом с заголовком и так понятно,
       что это за контрол. */
    .prd-sort-k { display: none; }

    .prd-tabs.is-panel {
        grid-area: tabs;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 4px;
        margin: 0;
        padding: 3px;
        background: var(--bg);
        border-radius: 9px;
    }

    .prd-tabs.is-panel .prd-tab { justify-content: center; padding: 0 4px; }

    /* Категории — лентой от края до края панели: с боковым отступом затухание
       уезжало внутрь и читалось как обрезанный чип, а не как подсказка. */
    .prd-panel-body { padding: 10px 0 11px; }
    .prd-panel-body .shell-chips { padding: 0 12px; }
}

/* --- Шапка карточки с картинкой ---------------------------------------- */

.prd-top { display: flex; gap: 10px; align-items: flex-start; }
.prd-top-t { min-width: 0; flex: 1 1 auto; }

.prd-art {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 10px;
    object-fit: cover;
    background: var(--surface-2);
}

/* Картинки нет у источника или она отвалилась — показываем иконку категории,
   а не дырку: пустое место читается как поломка вёрстки. */
.prd-art.is-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background: color-mix(in srgb, currentColor 16%, var(--surface-2));
}

.prd-art.is-broken { visibility: hidden; }

.prd-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 5px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--muted);
}

/* --- График (карточка витрины и страница рынка) -------------------------- */

.prd-chart {
    height: 64px;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}

.prd-chart svg { width: 100%; height: 100%; display: block; }
.prd-chart-line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.prd-chart-grid { stroke: var(--surface-2); stroke-width: 1; stroke-dasharray: 4 4; }
/* То же состояние внутри карточки: полоса фиксированной высоты, текст по
   центру. Селектор сужен до .prd-chart — чтобы правило карточки и правило
   страницы рынка больше не спорили за один класс. */
.prd-chart .prd-chart-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 11.5px;
    color: var(--muted);
}

/* Скелет на время загрузки: пустой прямоугольник выглядит как ошибка. */
.prd-chart-skeleton {
    display: block;
    height: 100%;
    border-radius: 8px;
    background: linear-gradient(90deg, var(--surface-2) 25%, var(--prd-shimmer) 37%, var(--surface-2) 63%);
    background-size: 400% 100%;
    animation: prd-shimmer 1.4s ease infinite;
}

@keyframes prd-shimmer {
    0% { background-position: 100% 0; }
    100% { background-position: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
    .prd-chart-skeleton { animation: none; }
}

/* Строка цены: процент слева, движение за сутки — у правого края. Между ними
   воздух, поэтому «71%» и «▼2.0%» читаются как одно утверждение о вероятности,
   а не как два числа из разных мест карточки. */
.prd-big {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.prd-big b { font-size: 26px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.prd-big.sm b { font-size: 20px; }

/* Подпись всегда на своей строке под числом: так строка цены одинакова и на
   300px, и на 500px, и не зависит от того, есть ли движение за сутки. */
.prd-big-label {
    flex: 1 0 100%;
    margin-top: -2px;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
}

/* Чья вероятность показана крупным числом. У лестницы это порог одного
   под-рынка — без подписи число читалось как вероятность всего события
   (аудит №31). Плашка, а не просто текст: она часть числа, а не подпись под
   ним, и должна читаться вместе с процентом. */
.prd-big-what {
    align-self: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    background: var(--surface-2);
    border-radius: 8px;
    padding: 3px 9px;
    font-variant-numeric: tabular-nums;
}

/* Дельта — пилюлей: у неё своя семантика (движение), и в строке цены она не
   должна сливаться с подписью «Вероятность «Да»». */
.prd-delta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    align-self: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.prd-delta i { font-size: 12px; }
.prd-delta.is-up { color: var(--up); background: color-mix(in srgb, var(--up) 14%, transparent); }
.prd-delta.is-down { color: var(--prd-danger-ink); background: color-mix(in srgb, var(--danger) 14%, transparent); }

/* --- Длинный рынок: дата вместо графика --------------------------------- */

/* Плановая карточка: слева дата закрытия, справа процент с движением.
   flex-wrap обязателен: плашка даты и «27% + пилюля движения» вместе не
   влезают в карточку 300px, и без переноса дата рвалась на две строки
   посередине («Закроется через 3 / месяца»). С переносом вторая строка
   отдана проценту и движению, а дата остаётся целой. */
.prd-plan {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 10px;
}

/* Строка цены занимает всю ширину: дельта внутри неё прижата вправо
   (`margin-left: auto`), а в узком флекс-элементе ей некуда ехать — она
   вставала вплотную к числу. Раньше рядом с ценой стояла дата закрытия и
   строка была шире; теперь дата одна, в подвале карточки. */
.prd-plan > .prd-big { flex: 1 1 100%; }

/* Разделитель между закрытием и источником в подвале: две подписи отвечают
   на один вопрос («когда узнаем» и «по чьим данным»), и точка между ними
   читается как одна строка, а не как две разные. */
.prd-foot-sep {
    color: var(--muted);
    opacity: .6;
}

/* --- Спортивная карточка ------------------------------------------------ */

.prd-teams {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 14px;
    font-weight: 700;
}

.prd-vs {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
    background: var(--surface-2);
    padding: 2px 8px;
    border-radius: 6px;
}

.prd-live {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--danger);
    display: inline-block;
    animation: prd-pulse 1.6s ease infinite;
}

@keyframes prd-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

.prd-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .03em;
}

.prd-badge.is-live { color: var(--prd-danger-ink); }

/* --- Список исходов внутри карточки-события ---------------------------- */

.prd-rows { display: flex; flex-direction: column; }

/* Заголовок секции внутри разнонаправленной лестницы: «Вырастет до» против
   «Упадёт до». Отделяет один ряд порогов от другого — иначе «16%, 57%, 19%,
   10%» читается как сломанная монотонность, хотя рядов тут два. */
.prd-rows-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 0 2px;
    border-top: 1px solid var(--surface-2);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
}

.prd-rows-head i { font-size: 13px; }
.prd-rows.is-split .prd-rows-head:first-child { border-top: 0; padding-top: 0; }

/* Первая строка секции продолжает её заголовок, а не начинает список заново. */
.prd-rows.is-split .prd-rows-head + .prd-row { border-top: 0; }

.prd-row {
    display: flex;
    align-items: center;
    gap: 8px;
    /* 4px, а не 7px: высоту строки теперь задают кнопки (40px), и прежний
       отступ складывался с ней в 54px на ступень — лестница «распухала»
       заметнее, чем росла цель. С 4px ступень 48px: цель выросла на 17px, а
       карточка прибавляет ~10px на строку, а не 17. */
    padding: 4px 0;
    border-top: 1px solid var(--surface-2);
    font-size: 13px;
}

.prd-row-l {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    /* Подпись переносится, а не обрезается. В узкой карточке на строку
       приходится десяток символов, и ««Мстители: Финал»» превращалось в
       ««Мстители…». Две строки читаются лучше, чем многоточие посередине
       названия.

       break-word, а не anywhere: anywhere рвёт строку в любом месте, и
       «4,3% и 4,6%?» распадалось на «4,3%», «и», «4,6%», «?» — четыре строки
       по два символа. break-word переносит по пробелам, а по буквам только
       если слово не влезает целиком. */
    overflow-wrap: break-word;
    line-height: 1.25;
}

/* Метка порога — ссылка на свой рынок. Подчёркивание приглушённое: без него
   ссылку в плотном списке не отличить от подписи, а акцентный цвет на каждой
   строке превратил бы лестницу в гирлянду. */
.prd-row-l a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--muted) 55%, transparent);
    text-underline-offset: 2px;
}

.prd-row-l a:hover {
    color: var(--accent);
    text-decoration-color: currentColor;
}

.prd-row-bar {
    flex: 0 0 44px;
    height: 4px;
    border-radius: 99px;
    overflow: hidden;
    background: color-mix(in srgb, var(--danger) 30%, var(--surface-2));
}

.prd-row-bar i { display: block; height: 100%; background: var(--up); border-radius: 99px; }

.prd-row-p { font-weight: 800; font-size: 14px; font-variant-numeric: tabular-nums; min-width: 38px; text-align: right; }

/* Зазор 8px вместо 4px: кнопки «Да» и «Нет» стоят вплотную, и на телефоне
   палец попадал в соседнюю — то есть в противоположный исход. */
.prd-pills { display: flex; gap: 8px; flex: 0 0 auto; }


.prd-pill {
    border: none;
    border-radius: 8px;
    /* Цель 40px по высоте: строки лестницы — самая частая цель витрины
       (40 из 60 интерактивных элементов первой страницы), а 24×34 при зазоре
       4px не проходят ни мобильные рекомендации, ни WCAG 2.5.8 по площади.
       Ширина растёт сама: «Да» и «Нет» — самые короткие подписи в разделе. */
    min-height: 40px;
    min-width: 44px;
    padding: 0 12px;
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: filter .12s ease;
}

.prd-pill:hover { filter: brightness(1.15); }

/* Подложка — тот же тон, что у больших плеч одиночного рынка (14% цвета по
   --surface), и по той же причине: на --surface-2 (светлее) красный текст давал
   3.04, зелёный 4.26 — ниже AA. Красный текст — --prd-danger-ink: --danger на
   этой подложке не дотягивает (3.87). Замеры: 5.72 зелёный, 4.97 красный. */
.prd-pill.is-yes { background: color-mix(in srgb, var(--up) 14%, var(--surface)); color: var(--up); }
.prd-pill.is-no { background: color-mix(in srgb, var(--danger) 14%, var(--surface)); color: var(--prd-danger-ink); }

/* Выпадающий список на 390px не должен упираться в край экрана: меню
   прижимаем к правому краю панели и не даём ему вылезти за вьюпорт. */
@media (max-width: 520px) {
    .prd-sort-menu { min-width: 168px; }
}

/* ==========================================================================
   Посадочная страница раздела (/start) — трафик из рекламы
   ==========================================================================

   Задача этой страницы — один экран объяснения и живые рынки, поэтому стили
   держим плоскими: ни графиков, ни картинок, ни второго денежного пути. Всё
   оформление — цвет категории, полоса вероятности и две кнопки-коэффициента.

   Токены цвета берём из shell.css (--surface, --line, --text, --muted, --up,
   --danger). Своих «почти таких же» не заводим: в разделе уже была ошибка,
   когда стили ссылались на несуществующие --sp-* переменные и часть правил
   молча не применялась.
   ========================================================================== */

.prd-start {
    max-width: 720px;
    margin: 0 auto;
    padding: 20px 16px 48px;
}

/* Первый экран */
.prd-start-hero { padding: 8px 0 22px; }

.prd-start-kicker {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
}

.prd-start-h1 {
    margin: 0 0 12px;
    font-size: 30px;
    line-height: 1.15;
    font-weight: 800;
    color: var(--text);
}

.prd-start-lead {
    margin: 0 0 18px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--muted);
}

.prd-start-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}

.prd-start-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 20px;
    border-radius: 12px;
    background: var(--surface-2);
    color: var(--text);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: filter .12s ease;
}

.prd-start-btn:hover { filter: brightness(1.12); }

/* Основная кнопка — тот же зелёный, что у «Да» в ставке: у действия и у
   исхода один смысл, значит и один цвет. */
.prd-start-btn--primary { background: var(--up); color: #0b0e11; }

.prd-start-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 14px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    color: var(--muted);
}

.prd-start-facts i { color: var(--up); margin-right: 6px; }

/* Живые рынки */
.prd-start-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 26px 0 12px;
}

.prd-start-head h2,
.prd-start-how h2,
.prd-start-faq h2,
.prd-start-final h2 {
    margin: 0;
    font-size: 19px;
    font-weight: 800;
    color: var(--text);
}

.prd-start-more {
    font-size: 13px;
    font-weight: 700;
    color: var(--up);
    text-decoration: none;
    white-space: nowrap;
}

.prd-start-row {
    position: relative;
    padding: 14px 14px 12px;
    margin-bottom: 10px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
}

/* Цвет категории — тонкой полосой слева: он же в полосе вероятности. */
.prd-start-row::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    bottom: 12px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--prd-cat, var(--muted));
}

.prd-start-q {
    display: block;
    margin-bottom: 8px;
    font-size: 15.5px;
    line-height: 1.35;
    font-weight: 700;
    color: var(--text);
    text-decoration: none;
}

.prd-start-q:hover { color: var(--up); }

.prd-start-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    font-size: 12px;
    color: var(--muted);
}

.prd-start-bar {
    height: 4px;
    border-radius: 3px;
    background: var(--surface-2);
    overflow: hidden;
}

.prd-start-bar i {
    display: block;
    height: 100%;
    background: var(--up);
}

.prd-start-sides {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

.prd-start-p {
    min-width: 46px;
    font-size: 17px;
    font-weight: 800;
    color: var(--text);
}

.prd-start-side {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    justify-content: center;
    min-height: 42px;
    border-radius: 11px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    /* Подложка — 14% цвета по surface: тот же тон, что у плеч на витрине,
       где контраст текста измерен (5.72 зелёный, 4.97 красный). */
    background: color-mix(in srgb, var(--up) 14%, var(--surface));
    color: var(--up);
}

.prd-start-side--no {
    background: color-mix(in srgb, var(--danger) 14%, var(--surface));
    color: var(--danger);
}

.prd-start-side:hover { filter: brightness(1.15); }

.prd-start-side b { font-size: 15px; }

/* Шаги */
.prd-start-how { margin-top: 30px; }

.prd-start-steps {
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: prd-step;
}

.prd-start-steps li {
    position: relative;
    padding: 0 0 16px 42px;
}

.prd-start-step-n {
    position: absolute;
    left: 0;
    top: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--text);
    font-size: 14px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.prd-start-step-t {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
}

.prd-start-step-d {
    display: block;
    margin-top: 4px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--muted);
}

/* Вопросы-ответы: нативный details, без единой строки JS */
.prd-start-faq { margin-top: 30px; }

.prd-start-faq details {
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    padding: 12px 14px;
    margin-bottom: 8px;
}

.prd-start-faq summary {
    cursor: pointer;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--text);
}

.prd-start-faq p {
    margin: 10px 0 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--muted);
}

/* Финальный призыв */
.prd-start-final {
    margin-top: 30px;
    padding: 18px 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
}

.prd-start-final p {
    margin: 8px 0 14px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--muted);
}

.prd-start-legal {
    margin: 14px 0 0 !important;
    font-size: 12px !important;
    color: var(--muted);
}

.prd-start-empty {
    padding: 16px;
    border: 1px dashed var(--line);
    border-radius: 14px;
    font-size: 14px;
    color: var(--muted);
}

@media (min-width: 560px) {
    .prd-start-h1 { font-size: 36px; }
    .prd-start-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ==========================================================================
   Информационные документы (/terms, /privacy, /responsible-gaming, /rules)
   ==========================================================================
   Это страницы, которые читает не игрок в поиске развлечения, а он же в момент
   сомнения — и модератор рекламной площадки. Задача вёрстки: длинный текст,
   который читается с телефона, без мелкого шрифта и без «простыни» на весь
   экран. Отсюда ограничение ширины строки и воздух между разделами. */

.prd-doc {
    max-width: 760px;
    margin: 0 auto;
    padding: 20px 16px 56px;
    color: var(--text);
}

.prd-doc-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.prd-doc-nav a {
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--muted);
    text-decoration: none;
}

.prd-doc-nav a.is-active {
    border-color: var(--up);
    color: var(--up);
}

.prd-doc-h1 {
    margin: 0 0 6px;
    font-size: 26px;
    line-height: 1.2;
    font-weight: 800;
}

.prd-doc-date {
    margin: 0 0 22px;
    font-size: 12.5px;
    color: var(--muted);
}

/* Тело документа: markdown после Str::markdown — обычные теги, поэтому стили
   пишем по ним, а не по классам, которых у него нет. */
.prd-doc-body {
    font-size: 15px;
    line-height: 1.62;
}

.prd-doc-body h2 {
    margin: 28px 0 10px;
    font-size: 19px;
    font-weight: 800;
}

.prd-doc-body h3 {
    margin: 20px 0 8px;
    font-size: 16px;
    font-weight: 700;
}

.prd-doc-body p { margin: 0 0 12px; }

.prd-doc-body ol,
.prd-doc-body ul {
    margin: 0 0 14px;
    padding-left: 22px;
}

.prd-doc-body li { margin-bottom: 6px; }

.prd-doc-body a { color: var(--up); }

.prd-doc-body blockquote {
    margin: 0 0 16px;
    padding: 10px 14px;
    border-left: 3px solid var(--line);
    color: var(--muted);
    font-size: 14px;
}

.prd-doc-body hr {
    margin: 22px 0;
    border: 0;
    border-top: 1px solid var(--line);
}

.prd-doc-body table {
    width: 100%;
    margin: 0 0 16px;
    border-collapse: collapse;
    font-size: 14px;
}

.prd-doc-body th,
.prd-doc-body td {
    padding: 8px 10px;
    border: 1px solid var(--line);
    text-align: left;
}

.prd-doc-body code {
    padding: 1px 5px;
    border-radius: 5px;
    background: var(--surface-2);
    font-size: 13px;
}

/* Заглушка «документ готовится» */
.prd-doc-soon {
    padding: 16px;
    border: 1px dashed var(--line);
    border-radius: 14px;
    background: var(--surface);
    font-size: 14px;
    line-height: 1.55;
    color: var(--muted);
}

.prd-doc-soon b { color: var(--text); }

.prd-doc-foot {
    margin: 28px 0 0;
    font-size: 12.5px;
    color: var(--muted);
}

.prd-doc-18 {
    display: inline-block;
    margin-right: 8px;
    padding: 2px 7px;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-weight: 800;
    color: var(--text);
}

/* ==========================================================================
   Доказательство расчёта на странице своего вопроса
   ==========================================================================
   Блок отвечает на вопрос «почему я должен верить этой цифре». Поэтому он
   выглядит как выписка, а не как реклама: правило, прочитанное значение, свеча
   замера и ссылка на источник, где то же самое видно своими глазами. */

.prd-evidence {
    margin-top: 14px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
}

.prd-evidence-h {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    font-size: 15px;
    font-weight: 800;
    color: var(--text);
}

.prd-evidence-h i { color: var(--up); }

.prd-evidence-rule {
    margin: 0 0 12px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--muted);
}

.prd-evidence-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin-bottom: 10px;
}

.prd-evidence-cell {
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--surface-2);
}

.prd-evidence-k {
    display: block;
    font-size: 11.5px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
}

.prd-evidence-v {
    display: block;
    margin-top: 3px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
}

.prd-evidence-note {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--muted);
}

.prd-evidence-note b { color: var(--text); }
.prd-evidence-note a { color: var(--up); }

/* =========================================================
   Рельса категорий — один в один как виды спорта в спорте
   =========================================================
   Метрики скопированы у спортивной рельсы намеренно, до пикселя: два раздела
   одной темы не должны выглядеть по-разному. Числа: ширина 96px, отступ пункта
   8/4, эмодзи 17px, счётчик 10px табличными цифрами, скругления те же. */
.prd-rail {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 96px;
  padding: 6px;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.08));
  border-radius: 14px;
  background: var(--surface, #12161b);
  /* Было top: 78px — рельса вставала на 78px ниже строки вкладок (замер:
     160 против 82). При залипании она и так закрепляется у верха экрана,
     а в потоке должна стоять вровень со строкой раздела. */
  position: sticky;
  top: 12px;
}
.prd-chips {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  overflow: visible;
}
.prd-rail-i {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 4px;
  border-radius: 10px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
  text-align: center;
  line-height: 1.25;
  text-decoration: none;
}
.prd-rail-i em { font-style: normal; font-size: 17px; }
.prd-rail-i span { display: block; }
.prd-rail-i i { font-style: normal; font-size: 10px; font-weight: 700; color: var(--dim, #5b6470); font-variant-numeric: tabular-nums; }
.prd-rail-i:hover { background: var(--surface-2, #181d24); color: var(--text); }
.prd-rail-i.is-on { background: var(--surface-2, #181d24); color: var(--text); }
.prd-rail-i.is-on i { color: var(--accent); }

@media (max-width: 760px) {
  /* На телефоне — та же полоса с прокруткой, что и была: раскладка одна,
     меняется только направление. */
  .prd-rail { width: auto; position: static; padding: 0; border: 0; background: transparent; }
  .prd-chips { flex-direction: row; overflow-x: auto; }
  .prd-rail-i { min-width: 68px; }
}

/* =========================================================
   Вкладки раздела — сегмент как «Лайв · Линия · Мои ставки»
   =========================================================
   markup не менялся: nav.prd-tabs и три ссылки уже были правильными,
   поэтому правка только стилевая. Метрики копирую со спортивного сегмента:
   три равные доли на всю ширину, высота 38px, активная залита акцентом.
   Целиться пальцем в равные доли проще, чем в подписи переменной ширины.

   Селекторы продублированы с `.is-panel`: на главной витрине вкладки стоят
   внутри панели, и прежнее правило для этого варианта было специфичнее —
   без дубля правка не применилась бы там, где она и нужна. */
.prd-tabs,
.prd-tabs.is-panel {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--surface, #12161b);
  border: 1px solid var(--line, rgba(255, 255, 255, 0.08));
  border-radius: 12px;
}
.prd-tab,
.prd-tabs.is-panel .prd-tab {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 8px;
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.prd-tab.is-active,
.prd-tabs.is-panel .prd-tab.is-active {
  background: rgba(252, 213, 53, 0.14);
  color: var(--accent);
}

/* =========================================================
   Карточки рынков занимают всё оставшееся место
   =========================================================
   Рельса узкая (96px), всё остальное — витрина. На широком экране карточка
   рынка содержит заголовок, цену, график и объём: одной колонкой это полоса
   текста на 1200px, в которой глазу не за что зацепиться. Две-три колонки
   авто-подбором дают нормальную меру строки, а на телефоне остаётся одна.

   `align-items: start` — чтобы карточки не растягивались по высоте соседа
   с длинным названием: у нас названия разной длины, и растянутые блоки
   выглядят как сломанная сетка. */
.prd-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
  align-items: start;
}
@media (max-width: 720px) {
  .prd-list { grid-template-columns: minmax(0, 1fr); }
}

/* Правая колонка: вкладки сверху, под ними карточки. Вертикальный флекс, а не
   просто блок — вкладки должны быть отдельной строкой на всю ширину, как
   сегмент «Лайв · Линия · Мои ставки» в спорте. */
.prd-main {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

/* Вкладки — отдельной строкой на всю ширину правой колонки.
   Заголовок панели я убрал, и в шапке панели остались только вкладки — но сама
   шапка осталась flex-контейнером, который держал их справа и не давал тянуться
   (замер: 268px вместо 1150px). Здесь шапка перестаёт быть flex, а сегмент
   растягивается на всю колонку — как «Лайв · Линия · Мои ставки» в спорте. */
.prd-panel-head {
  display: block;
  padding: 0;
}
.prd-panel-head .prd-tabs,
.prd-tabs {
  width: 100%;
}
@media (max-width: 760px) {
  .prd-panel-head { padding: 0; }
}

/* Пустая панель над вкладками. Заголовок раздела и лента категорий из панели
   уехали (заголовок убран, категории — в рельсе слева), а сама панель осталась
   с прежними отступами и фоном: в правой колонке над вкладками висела пустая
   полоса высотой около 230px. Правим стилями, а не разметкой — обёртки больше
   ничего не содержат, и убирать их из шаблона на живом значит рисковать
   вложенностью ради того же результата. */
.prd-panel {
  padding: 0;
  margin: 0;
  background: none;
  border: 0;
  border-radius: 0;
  min-height: 0;
}
.prd-panel-head {
  padding: 0;
  margin: 0;
  min-height: 0;
}

/* Сетка страницы: рельса категорий слева, всё остальное справа.
   Это правило я снесла при одной из правок рельсы (переписала блок целиком и
   потеряла определение сетки) — из-за этого рельса встала отдельной строкой,
   а карточки уехали под неё: справа от рельсы была пустота, а вкладки висели
   ниже её конца. Ширина колонки совпадает с рельсой (96px, как виды спорта). */
@media (min-width: 761px) {
  /* Двухколоночная сетка — ТОЛЬКО там, где есть рельса: модификатор, а не
     сам `.prd-wrap`. Пока правило висело на общем классе, оно применялось и к
     «Моим ставкам», где рельсы нет — у страницы получалось три ребёнка вместо
     двух, и раскладка разъезжалась. Тот же приём, что у `.sp-wrap--rail` в
     спорте. */
  .prd-wrap--rail {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
  }
}

/* Строка раздела: вкладки-сегмент и поиск справа — как в спортивной строке.
   На телефоне поле скрыто: там его роль играет поиск в шапке сайта. */
.prd-tabbar {
  display: flex;
  align-items: center;
  gap: 10px;
}
.prd-tabbar .prd-tabs { flex: 1 1 auto; min-width: 0; }
.prd-tab-ico { display: inline-flex; align-items: center; flex: 0 0 auto; }
.prd-tab-ico svg { width: 15px; height: 15px; }
.prd-tab { gap: 6px; }
/* Размеры взяты у спортивного поиска (замер: 363×38 при вкладках 38px), а
   высота — по блоку кнопок слева: сегмент с отступами даёт 46px, и поле той же
   высоты читается как часть строки, а не как случайная вставка. */
.prd-search {
  flex: 0 0 363px;
  display: flex;
  align-items: center;
  gap: 7px;
  height: 46px;
  padding: 0 14px;
  background: var(--surface, #12161b);
  border: 1px solid var(--line, rgba(255, 255, 255, 0.08));
  border-radius: 12px;
  color: var(--muted);
}
.prd-search svg { width: 15px; height: 15px; flex: 0 0 auto; }
.prd-search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-size: 12.5px;
  font-weight: 600;
}
.prd-search input::placeholder { color: var(--dim, #5b6470); }
.prd-search:focus-within { border-color: var(--accent); }
@media (max-width: 760px) {
  .prd-search { display: none; }
}

/* Финальная выверка строки раздела — по замерам, а не на глаз.
   1. Поиск шире: было 363px (как в спорте), стало 400px.
   2. Высота 46px — как у сегмента кнопок слева. Прошлая правка в этот блок не
      попала, поле оставалось 38px и потому висело на 8px ниже кнопок
      ((46-38)/2 — ровно та разница, что была видна в замере: 90 против 82).
   3. `align-items: stretch` — оба ребёнка строки одной высоты, значит и верх
      у них общий: смещение по высоте исчезает не подгонкой, а структурой.
   4. Рельса: `top: 0` вместо 12px — в покое встаёт вровень со строкой вкладок
      (94 → 82). Проверено замером. */
.prd-tabbar { align-items: stretch; }
.prd-search {
  flex: 0 0 400px;
  height: 46px;
}
.prd-rail { top: 0; }
@media (max-width: 760px) {
  .prd-search { display: none; }
}

/* Поиск в 1.5 раза шире спортивного: было 400px, стало 600px.
   Правая колонка на 1440px — 1038px, поэтому вкладки-сегмент ужимаются
   автоматически (flex: 1 1 auto), а поле держит свою ширину (flex: 0 0 600px).
   Сумма проверяется замером: вкладки + поиск не должны вылезать за колонку. */
.prd-search { flex: 0 0 600px; }
@media (max-width: 1100px) {
  /* На средних экранах 600px отбирали бы у сегмента слишком много. */
  .prd-search { flex: 0 0 320px; }
}

/* Ставки игрока — несколькими в ряд, а не одной лентой.
   Карточка позиции самодостаточна: сторона, цена, статус, сумма и возможная
   выплата, кнопка продажи. Одной колонкой на 1440px это полоса, в которой
   глазу не за что зацепиться; в две-три — нормальная мера строки, как у
   рынков на витрине. */
.prd-list-positions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 12px;
  align-items: start;
}
@media (max-width: 760px) {
  .prd-list-positions { grid-template-columns: minmax(0, 1fr); }
}