:root{
--sbx-blue:#0052eb; --sbx-green:#30ac63; --sbx-green-d:#258a4f; --sbx-red:#d81414;
--sbx-amber:#f0a500; --sbx-ink:#191d21; --sbx-body:#45464f; --sbx-mute:#666;
/* было #999 — 2,85:1 на белом, ниже нормы WCAG AA. #6f7479 даёт 4,9:1 */
--sbx-faint:#6f7479; --sbx-line:#d7d7d7; --sbx-line-2:#ececec; --sbx-line-3:#e6e8ec; --sbx-tint:#ebf2f6;
--sbx-text:#2b3b47; --sbx-green-l:#5ec98a; --sbx-bg-green:rgba(48,172,99,.14); --sbx-bg-red:#fdecec;
--sbx-r-sm:8px; --sbx-r-xs:6px;
--sbx-grey:#f7f8fa; --sbx-hr-we:#ffd23f; --sbx-hr-ru:#6fe3c0; --sbx-r:16px; --sbx-gap:40px; --sbx-header:88px;
}
/* --------------------------------------------------------------------------
1. КАРКАС СТРАНИЦЫ.
.header в теме — position:fixed. Высоту меряет JS и кладёт в --sbx-header
(88px в CSS — фолбэк). Отступ вешаем на свой .sbx-page, а НЕ на
#page_content_container: у темы на этом id padding-top:0 !important.
-------------------------------------------------------------------------- */
.sbx-page{padding-top:calc(var(--sbx-header) + 26px)}
.sbx-page .breadcrumbs{padding-top:0;padding-bottom:14px}
/* якоря и любой скролл к якорю не должны уезжать под шапку */
html{scroll-padding-top:calc(var(--sbx-header) + 24px)}
[id]{scroll-margin-top:calc(var(--sbx-header) + 24px)}
/* единый вертикальный ритм между крупными блоками */
.sbx-sec{margin-top:var(--sbx-gap)}
.sbx-sec>h2{margin-top:0}
.sbx-hd{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.sbx-sec .sbx-hd h2,.sbx-hd h2{font-family:"Montserrat",sans-serif;font-weight:700;font-size:24px;color:#000;letter-spacing:-.01em;margin:0}
.sbx-hd .sbx-note{font-size:13px;color:var(--sbx-faint)}
.sbx-card{background:#fff;border:1px solid var(--sbx-line);border-radius:var(--sbx-r);padding:22px 24px}
.sbx-grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.sbx-sub{font-family:"Montserrat",sans-serif;font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.04em;color:var(--sbx-body);margin-bottom:14px}
/* мелочи, которых нет в теме */
.btn-sm{padding:9px 18px;font-size:13px}
/* Звёзды — в теминой обёртке .bs_review-stars (71x14, внутренний слой ровно в
высоту контейнера, поэтому серый ряд снизу не лезет). В строке-резюме тот же
рисунок, просто увеличенный. */
.scroll-bar .bs_review-stars>.container_star_items{margin-right:10px}
.vote-btn{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--sbx-line);border-radius:999px;padding:6px 14px;font-family:"Rubik",sans-serif;font-size:13px;color:var(--sbx-mute);cursor:pointer;touch-action:manipulation;transition:border-color .15s,color .15s,background-color .15s}
.vote-btn:hover{border-color:var(--sbx-blue);color:var(--sbx-blue)}
.vote-btn.up.on{border-color:var(--sbx-green);color:var(--sbx-green-d);background:rgba(48,172,99,.08)}
.vote-btn.down.on{border-color:var(--sbx-red);color:var(--sbx-red);background:#fff5f5}
/* распределение по звёздам */
.sbx-dist{display:flex;flex-direction:column;gap:6px}
.sbx-drow{display:flex;align-items:center;gap:10px;background:none;border:0;padding:5px 6px;border-radius:var(--sbx-r-sm);cursor:pointer;font-family:"Rubik",sans-serif;font-size:13px;color:var(--sbx-body);width:100%;text-align:left}
.sbx-drow:hover{background:var(--sbx-grey)}
.sbx-drow.on{background:var(--sbx-tint)}
.sbx-drow .lb{flex:0 0 42px;color:var(--sbx-mute)}
.sbx-drow .tr{flex:1;height:9px;background:var(--sbx-line-2);border-radius:var(--sbx-r-sm);overflow:hidden}
.sbx-drow .tr>span{display:block;height:100%;background:var(--sbx-green);border-radius:var(--sbx-r-sm)}
.sbx-drow.low .tr>span{background:var(--sbx-amber)}
.sbx-drow.bad .tr>span{background:var(--sbx-red)}
.sbx-drow .ct{flex:0 0 30px;text-align:right;font-weight:500;color:var(--sbx-body)}
.sbx-disttot{margin-top:14px;padding-top:12px;border-top:1px solid var(--sbx-line-2);font-size:13px;color:var(--sbx-mute);line-height:1.5}
.sbx-disttot b{color:var(--sbx-ink);font-family:'Montserrat',sans-serif}
.sbx-delta{font-family:"Rubik",sans-serif;font-size:12px;font-weight:500;padding:2px 7px;border-radius:999px;white-space:nowrap}
.sbx-delta.dn{background:#fff5f5;color:var(--sbx-red)}
.sbx-delta.up{background:rgba(48,172,99,.12);color:var(--sbx-green-d)}
/* --------------------------------------------------------------------------
2. ШАПКА СТРАНИЦЫ ОТЗЫВОВ.
Сетка 2 колонки × 3 ряда. Левая колонка: оценки → серая полоса со
статистикой и кнопкой → строка фильтра. Правая колонка — синяя, на всю
высоту шапки; это НЕ отдельная карточка: она перекрывает рамку
контейнера на -1px и повторяет его радиус справа, как синяя плитка
в .sbx-market на /reviews/.
Все горизонтальные отступы слева одинаковые (--sbx-hero-pad), поэтому
логотип, первая ячейка статистики и первый чип стоят на одной линии.
Блок оценок .hero-score.hero-score--medal взят из обзора БК как есть:
его CSS лежит в new.css и не переопределяется здесь ни одним правилом —
иначе шапка отзывов и шапка обзора начнут расходиться.
-------------------------------------------------------------------------- */
.sbx-hero{--sbx-hero-pad:28px;display:grid;grid-template-columns:minmax(0,1fr) 370px;grid-template-rows:1fr auto auto;
width:100%;box-sizing:border-box;border:1px solid var(--sbx-line);border-radius:var(--sbx-r);background:#fff;margin-top:4px}
.sbx-hero-l{grid-column:1;padding:24px var(--sbx-hero-pad);display:flex;align-items:center;gap:22px;flex-wrap:wrap;min-width:0}
.sbx-hero-logo{flex:0 0 104px;height:42px;display:flex;align-items:center;justify-content:flex-start;overflow:hidden}
.sbx-hero-logo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
.sbx-hero-logo:hover{opacity:.8;text-decoration:none}
/* ссылки-якоря внутри готового блока оценок: цвет и подчёркивание берём у темы
(.hero-score__note a), поэтому тут только курсор-состояние */
.hero-score__note a:hover{text-decoration:none}
/* серая полоса: статистика + кнопка */
.sbx-hero-stats{grid-column:1;display:flex;align-items:center;gap:16px;flex-wrap:wrap;
padding:16px var(--sbx-hero-pad);background:var(--sbx-grey);border-top:1px solid var(--sbx-line-2);border-bottom:1px solid var(--sbx-line-2)}
.sbx-hero-cells{display:flex;gap:0;flex:1 1 auto;flex-wrap:wrap;min-width:0}
.sbx-hero-cells .c{padding:0 18px;border-left:1px solid #e2e4e8;min-width:96px}
.sbx-hero-cells .c:first-child{border-left:none;padding-left:0}
.sbx-hero-cells .k{display:block;font-size:12px;color:var(--sbx-mute);margin-bottom:5px;line-height:1.3;white-space:nowrap}
.sbx-hero-cells .v{font-family:"Montserrat",sans-serif;font-weight:700;font-size:17px;color:var(--sbx-ink);display:flex;align-items:center;gap:8px;line-height:1.2}
.sbx-hero-cta{flex:0 0 auto;margin-left:auto;white-space:nowrap}
/* строка фильтра по тональности */
.sbx-hero-foot{grid-column:1;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
padding:14px var(--sbx-hero-pad);border-radius:0 0 0 var(--sbx-r)}
/* лица (позитив/нейтрал/негатив) — только счётчики, не кликаются */
.sbx-faces{display:inline-flex;gap:6px;flex-wrap:wrap;position:relative;z-index:1}
.sbx-face{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border-radius:999px;border:1px solid var(--sbx-line);background:#fff;font-size:13px;font-weight:500;color:var(--sbx-body);font-family:"Rubik",sans-serif}
.sbx-face i{width:9px;height:9px;border-radius:50%;display:inline-block;flex:0 0 9px}
.sbx-face.pos i{background:var(--sbx-green)}.sbx-face.neu i{background:var(--sbx-amber)}.sbx-face.neg i{background:var(--sbx-red)}
.sbx-face b{font-family:"Montserrat",sans-serif;font-weight:700;color:var(--sbx-ink)}
/* строка фильтра по тональности */
.sbx-hero-foot{grid-column:1;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
padding:14px var(--sbx-hero-pad);border-radius:0 0 0 var(--sbx-r)}
/* синий сегмент — правая колонка на всю высоту шапки. Внутри только белый
и его оттенки: цветные кривые на синем спорили с зелёными акцентами темы. */
.sbx-hero-r{grid-column:2;grid-row:1 / 4;background:var(--sbx-blue);color:#fff;
padding:18px 22px;margin:-1px -1px;border-radius:0 var(--sbx-r) var(--sbx-r) 0;min-width:0;
display:flex;flex-direction:column;justify-content:center}
.sbx-hr-hd{display:flex;align-items:baseline;justify-content:center;gap:9px;margin-bottom:10px}
.sbx-hr-hd .t{font-family:"Montserrat",sans-serif;font-weight:700;font-size:15px;letter-spacing:.01em;color:#fff}
.sbx-hr-lg{display:flex;justify-content:center;gap:18px;font-size:13px;color:#fff;margin-bottom:4px}
.sbx-hr-lg span{display:inline-flex;align-items:center;gap:7px}
.sbx-hr-lg i{width:16px;height:3px;border-radius:3px;display:inline-block;background:#fff}
.sbx-hr-lg .ru i{background:rgba(255,255,255,.5)}
.sbx-hr-svg{display:block;width:100%;height:auto}
.sbx-hr-svg .grid line{stroke:rgba(255,255,255,.22);stroke-width:1}
.sbx-hr-svg text{fill:rgba(255,255,255,.75);font-family:"Rubik",sans-serif;font-size:10px}
.sbx-hr-svg .area{fill:rgba(255,255,255,.13);stroke:none}
.sbx-hr-svg .ru{fill:none;stroke:rgba(255,255,255,.5);stroke-width:2.5;stroke-dasharray:6 5;stroke-linejoin:round;stroke-linecap:round}
.sbx-hr-svg .we{fill:none;stroke:#fff;stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.sbx-hr-svg .dots circle{fill:#fff}
.sbx-hr-note{margin:10px 0 0;font-size:13px;line-height:1.45;text-align:center}
/* тема красит абзацы внутри .page__content своим серым и делает это селектором
из двух простых частей — одного класса .sbx-hr-note не хватало, текст под
графиком уходил в серый. Поэтому цвет в синем блоке фиксируем жёстко. */
.sbx-hero-r,.sbx-hero-r p,.sbx-hero-r b,.sbx-hero-r .sbx-hr-note{color:#fff !important}
.sbx-hr-note b{font-family:"Montserrat",sans-serif;font-weight:700}
.sbx-hero-r .sbx-hr-hd .demo{color:rgba(255,255,255,.75) !important}
/* Балл, звёзды и ссылка «N отзывов» — один компонент на обе страницы.
На /reviews/ он идёт базовым размером, в шапке БК — модификатором .xl.
Цвет задаёт одна и та же шкала (см. star_type в build.py). */
.sbx-ball{font-family:"Montserrat",sans-serif;font-weight:800;font-size:18px;line-height:1}
.sbx-ball.green{color:var(--sbx-green)}
.sbx-ball.yellow{color:var(--sbx-amber)}
.sbx-ball.red{color:var(--sbx-red)}
.sbx-ball.xl{font-size:38px;letter-spacing:-.02em}
.sbx-bk-cnt{font-size:14px;color:var(--sbx-blue);text-decoration:underline;text-underline-offset:2px}
.sbx-bk-cnt:hover{text-decoration:none}
.bs_review-stars.xl{transform:scale(1.35);transform-origin:left center;flex:0 0 96px}
.bs_review-stars.xl>.container_star_items{margin-right:0}
/* В промо-баннере вместо текстовой заглушки «ЛИГА СТАВОК» — настоящий логотип
с сайта. Белая плашка .sidebar-promo-logo из темы остаётся подложкой, ей
только убираем строчную высоту, иначе под картинкой остаётся зазор. */
.sidebar-promo-logo{line-height:0;padding:8px 12px}
.sidebar-promo-logo img{display:block;height:26px;width:auto;max-width:150px;object-fit:contain}
/* Числа, которые сравнивают взглядом по вертикали, — моноширинными цифрами,
иначе «1» у́же остальных и колонка «гуляет». */
.sbx-hero-cells .v,.sbx-drow .ct,.sbx-fcard .sc,.sbx-ext-card .sc,.sbx-ext-card .ct,
.sbx-ext-sc .num,.sbx-tgrid .v,.sbx-bk .sc,.sbx-chip .pn,.hero-score__num{font-variant-numeric:tabular-nums}
/* заголовки не оставляем с висячим словом */
.sbx-hd h2,.sbx-topics-hd h3,.sbx-fcard h3,.sbx-ext-head h2{text-wrap:balance}
/* На тач-экранах кликабельные элементы дотягиваем до комфортного размера:
чипы и селекты по 24px высоты проходят AA, но пальцем в них не попасть. */
@media (hover:none){
.sbx-chip,.sbx-sel,.sbx-search input{min-height:44px}
.sbx-drow{padding-top:9px;padding-bottom:9px}
.sbx-tag,.vote-btn{min-height:36px}
}
.sbx-skip{position:absolute;left:-9999px;top:0;z-index:1000;background:#fff;color:var(--sbx-blue);
padding:12px 18px;border:1px solid var(--sbx-blue);border-radius:0 0 var(--sbx-r-sm) 0;font-size:14px}
.sbx-skip:focus{left:0}
/* доступность */
.sbx-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sbx-chip:focus-visible,.sbx-drow:focus-visible,.sbx-tag:focus-visible,
.sbx-sel:focus-visible,.sbx-search input:focus-visible,.vote-btn:focus-visible,.sbx-reset:focus-visible,
.sbx-atag button:focus-visible,.sbx-ext-card a:focus-visible,.sbx-bk:focus-visible{outline:2px solid var(--sbx-blue);outline-offset:2px}
.sbx-ext-track:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:var(--sbx-r-sm)}
.sbx-arrow:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important;scroll-behavior:auto !important}}
/* --------------------------------------------------------------------------
3. АНАЛИЗ НАШИХ ОТЗЫВОВ. Без подложки: это основной текст страницы, он
должен читаться как статья, а не как врезка. На подложке остаётся только
рубрикатор — он интерактивный, и фон отделяет его от текста.
-------------------------------------------------------------------------- */
.sbx-analysis{margin-top:var(--sbx-gap)}
.sbx-lead{font-size:19px;line-height:1.75;color:var(--sbx-text);margin:0 0 22px;max-width:none}
.sbx-lead b{font-family:"Montserrat",sans-serif;font-weight:700;color:var(--sbx-ink)}
.sbx-lead .up{color:var(--sbx-green-d);font-weight:700}
.sbx-lead .dn{color:var(--sbx-red);font-weight:700}
/* выдержки из отзывов — тот же приём, что в блоке «букмекеры месяца» на /reviews/ */
.sbx-dg-cites{margin:0 0 24px;font-size:17px;line-height:1.95;color:var(--sbx-text);max-width:none}
.sbx-dg-cites .lab{display:block;font-family:"Montserrat",sans-serif;font-weight:700;font-size:11px;
text-transform:uppercase;letter-spacing:.05em;color:var(--sbx-faint);margin-bottom:8px}
.sbx-dg-cites b{font-family:"Montserrat",sans-serif;font-weight:700;color:var(--sbx-ink)}
.sbx-dg-cites .q{padding:1px 7px;border-radius:var(--sbx-r-xs);
-webkit-box-decoration-break:clone;box-decoration-break:clone}
.sbx-dg-cites .q.up{background:rgba(48,172,99,.16)}
.sbx-dg-cites .q.dn{background:var(--sbx-bg-red)}
/* Две колонки разбора 50/50: слева разбор текстом, справа — дословные
выдержки. Оформление цитат НЕ новое: это тот же компонент .sbx-dg-cites,
что и в «букмекерах месяца» на /reviews/ — подсветка внутри строки,
без карточек и врезок. */
.sbx-an-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px;align-items:start}
.sbx-an-text .sbx-lead:last-child{margin-bottom:0}
.sbx-an-quotes .lab{display:block;font-family:"Montserrat",sans-serif;font-weight:700;font-size:11px;
text-transform:uppercase;letter-spacing:.05em;color:var(--sbx-faint);margin-bottom:12px}
.sbx-an-quotes .sbx-dg-cites{margin-bottom:16px}
.sbx-an-quotes .sbx-dg-cites:last-of-type{margin-bottom:0}
.sbx-an-quotes .note{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--sbx-line-2);
font-size:13px;line-height:1.5;color:var(--sbx-mute)}
.sbx-an-quotes .note a{color:var(--sbx-blue);text-decoration:underline;text-underline-offset:2px}
.sbx-allrev{display:inline-flex;align-items:center;gap:6px;margin-top:16px;font-size:15px;
color:var(--sbx-blue);text-decoration:none;font-family:"Rubik",sans-serif}
.sbx-allrev b{font-family:"Montserrat",sans-serif;font-weight:700}
.sbx-allrev:hover{text-decoration:underline}
/* аспекты — чипы «о чём пишут» (Amazon) */
.sbx-chips{display:flex;flex-wrap:wrap;gap:8px}
.sbx-chip{display:inline-flex;align-items:center;gap:9px;padding:8px 14px;border-radius:999px;border:1px solid var(--sbx-line);background:#fff;cursor:pointer;font-family:"Rubik",sans-serif;font-size:14px;color:var(--sbx-body);touch-action:manipulation;transition:border-color .15s,background-color .15s,box-shadow .15s}
.sbx-chip:hover{border-color:var(--sbx-blue)}
.sbx-chip.on{border-color:var(--sbx-blue);background:var(--sbx-tint);box-shadow:inset 0 0 0 1px var(--sbx-blue)}
.sbx-chip .n{font-weight:500}
.sbx-chip .pn{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-family:"Montserrat",sans-serif;font-weight:700}
.sbx-chip .pn .p{color:var(--sbx-green-d)}
.sbx-chip .pn .sep{color:var(--sbx-line);font-weight:400}
.sbx-chip .pn .m{color:var(--sbx-red)}
.sbx-chip .mini{width:46px;height:6px;border-radius:var(--sbx-r-xs);background:var(--sbx-red);overflow:hidden;flex:0 0 46px}
.sbx-chip .mini>span{display:block;height:100%;background:var(--sbx-green)}
/* рубрикатор + распределение оценок + выбранные отзывы — один блок */
.sbx-topics{margin-top:var(--sbx-gap)}
.sbx-tbox{background:#fff;border:1px solid var(--sbx-line);border-radius:var(--sbx-r);overflow:hidden}
.sbx-tw{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px)}
.sbx-twcol{padding:22px 24px;min-width:0}
.sbx-twcol+.sbx-twcol{border-left:1px solid var(--sbx-line-2)}
.sbx-twnote{margin:0 0 14px;font-size:13px;line-height:1.5;color:var(--sbx-mute);padding:0}
/* Полоса с отзывами. Фон белый: серым тонируем саму карточку — так отзывы
выглядят одинаково и здесь, и в ленте на /reviews/, и на боевых страницах
отзывов. Что это результат фильтра сверху, показывает разделитель. */
.sbx-picked{border-top:1px solid var(--sbx-line-2);padding:20px 24px}
.sbx-picked .sbx-sub{margin-bottom:12px}
.sbx-picked-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.sbx-tfoot{border-top:1px solid var(--sbx-line-2);padding:12px 24px}
.sbx-tfoot .sbx-allrev{margin-top:0}
/* Карточка отзыва — тот же компонент, что в ленте на /reviews/ (.sbx-fcard):
серая плашка без рамки на белом. Рамка всё же объявлена, но прозрачная —
чтобы по ховеру она проявлялась, не сдвигая содержимое на пиксель. */
.sbx-fcard{background:var(--sbx-grey);border:1px solid transparent;border-radius:var(--sbx-r);padding:18px 20px;display:flex;flex-direction:column}
.sbx-fcard .top{display:flex;align-items:center;gap:9px;margin-bottom:10px;flex-wrap:wrap}
.sbx-fcard .bk{font-family:"Montserrat",sans-serif;font-weight:700;font-size:13px;color:var(--sbx-blue)}
/* Балл тёмный, как в карточке отзыва на боевом сайте: тональность держат
звёзды, число остаётся нейтральным и не спорит с ними цветом.
Класс green/yellow/red на нём оставлен как хук для скриптов и тестов. */
.sbx-fcard .sc{font-family:"Montserrat",sans-serif;font-weight:800;font-size:15px;margin-left:auto;color:var(--sbx-ink)}
.sbx-fcard h3{font-family:"Montserrat",sans-serif;font-weight:700;font-size:15px;color:var(--sbx-ink);margin:0 0 7px;line-height:1.3}
.sbx-fcard p{font-size:13.5px;line-height:1.5;color:var(--sbx-body);margin:0 0 12px}
.sbx-fcard .ft{margin-top:auto;font-size:12px;color:var(--sbx-faint)}
.sbx-fcard .bs_review-stars>.container_star_items{margin-right:0}
/* --------------------------------------------------------------------------
4. ЛИГА СТАВОК НА ДРУГИХ ПЛОЩАДКАХ — сводный балл + слайдер источников.
Единственная тёмная плашка на странице, поэтому работает как акцент.
ДАННЫЕ ПОКА ДЕМО — правятся в EXT_SOURCES в build.py.
-------------------------------------------------------------------------- */
/* Блок инвертирован: это данные извне, и тёмная плашка отделяет их от наших
собственных цифр. Цвет — --sbx-ink из палитры темы, плоский, без градиента. */
.sbx-ext{margin-top:var(--sbx-gap);border-radius:var(--sbx-r);padding:26px 28px 24px;
background:var(--sbx-ink);color:rgba(255,255,255,.82)}
.sbx-ext-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:22px}
.sbx-ext .sbx-ext-head h2{font-family:"Montserrat",sans-serif;font-weight:700;font-size:24px;color:#fff;margin:0;letter-spacing:-.01em}
.sbx-ext-head .note{font-size:13px;color:rgba(255,255,255,.6);max-width:470px;line-height:1.45}
.sbx-ext-top{display:grid;grid-template-columns:250px minmax(0,1fr);gap:32px;align-items:center;
background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--sbx-r);padding:20px 24px;margin-bottom:20px}
.sbx-ext-big{display:flex;flex-direction:column;gap:16px;flex:0 0 auto;width:250px}
/* flex, а не grid: в сетке колонка «из 5» растягивалась по ширине блока
и подпись отъезжала от числа */
.sbx-ext-sc{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.sbx-ext-sc .row{display:flex;align-items:baseline;gap:9px}
.sbx-ext-sc .num{font-family:"Montserrat",sans-serif;font-weight:800;font-size:52px;line-height:.92;letter-spacing:-.03em;color:#fff}
.sbx-ext-sc .of{font-size:13px;color:rgba(255,255,255,.6)}
.sbx-ext-sc .rating-stars-custom{flex:0 0 auto}
.sbx-ext-sc .lb{font-size:13px;line-height:1.4;max-width:236px;color:rgba(255,255,255,.82)}
/* балл за месяц — тот же компонент, только мельче */
.sbx-ext-sc.sm{padding-top:16px;border-top:1px solid rgba(255,255,255,.14);width:100%;box-sizing:border-box}
.sbx-ext-sc.sm .num{font-size:30px}
/* тренд по всем площадкам: линия вместо шкалы разброса — на нашем сайте
отзывов мало, а объединённая выборка источников даёт осмысленную динамику */
.sbx-trend{min-width:0}
.sbx-trend-hd{display:flex;flex-direction:column;gap:5px;margin-bottom:10px}
.sbx-trend-hd .cap{font-size:12px;text-transform:uppercase;letter-spacing:.05em;
font-family:"Montserrat",sans-serif;font-weight:700;color:rgba(255,255,255,.6)}
.sbx-trend-hd .note{font-size:13px;line-height:1.5;color:rgba(255,255,255,.82)}
.sbx-trend-hd .note b{font-family:"Montserrat",sans-serif;font-weight:700;color:#fff}
.sbx-trend-svg{display:block;width:100%;height:150px;overflow:visible}
.sbx-trend-svg .grid line{stroke:rgba(255,255,255,.14);stroke-width:1}
.sbx-trend-svg .area{fill:rgba(94,201,138,.16)}
.sbx-trend-svg .line{fill:none;stroke:var(--sbx-green-l);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.sbx-trend-svg .dots circle{fill:var(--sbx-green-l);stroke:var(--sbx-ink);stroke-width:2}
.sbx-trend-svg text{font-family:"Rubik",sans-serif;font-size:11px;fill:rgba(255,255,255,.5)}
/* слайдер источников */
.sbx-ext-nav{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.sbx-ext-nav .cap{font-size:12px;text-transform:uppercase;letter-spacing:.05em;font-family:"Montserrat",sans-serif;font-weight:700;color:rgba(255,255,255,.6)}
.sbx-ext-nav .sp{margin-left:auto;display:flex;gap:8px}
.sbx-arrow{width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.08);color:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:17px;line-height:1;touch-action:manipulation;transition:background-color .15s}
.sbx-arrow:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.45)}
.sbx-arrow[disabled]{opacity:.3;cursor:default}
.sbx-ext-track{display:flex;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-behavior:smooth;padding-bottom:8px;
scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.35) transparent}
.sbx-ext-track::-webkit-scrollbar{height:6px}
.sbx-ext-track::-webkit-scrollbar-track{background:rgba(255,255,255,.1);border-radius:var(--sbx-r-xs)}
.sbx-ext-track::-webkit-scrollbar-thumb{background:rgba(255,255,255,.32);border-radius:var(--sbx-r-xs)}
.sbx-ext-card{flex:0 0 272px;scroll-snap-align:start;background:#fff;border-radius:14px;padding:16px 18px 14px;color:var(--sbx-ink);display:flex;flex-direction:column;gap:9px}
.sbx-ext-card .site{font-family:"Montserrat",sans-serif;font-weight:700;font-size:15px;line-height:1.25}
.sbx-ext-card .row{display:flex;align-items:baseline;gap:8px}
.sbx-ext-card .sc{font-family:"Montserrat",sans-serif;font-weight:800;font-size:27px;line-height:1;letter-spacing:-.02em}
.sbx-ext-card .sc.hi{color:var(--sbx-green-d)}
.sbx-ext-card .sc.mid{color:#b07806}
.sbx-ext-card .sc.lo{color:var(--sbx-red)}
.sbx-ext-card .of{font-size:12px;color:var(--sbx-mute)}
.sbx-ext-card .ct{margin-left:auto;font-size:12px;color:var(--sbx-mute)}
.sbx-ext-card .bar{height:6px;border-radius:var(--sbx-r-xs);background:var(--sbx-line-2);overflow:hidden}
.sbx-ext-card .bar>span{display:block;height:100%;border-radius:var(--sbx-r-xs);background:var(--sbx-green)}
.sbx-ext-card .vd{font-size:13px;line-height:1.5;color:var(--sbx-body);margin:0}
/* цитата с площадки — та же подсветка, что у наших выдержек (.sbx-dg-cites .q) */
.sbx-ext-card .qt{margin:auto 0 0;padding-top:4px;font-size:13px;line-height:1.75;color:var(--sbx-mute)}
.sbx-ext-card .qt .q{padding:1px 7px;border-radius:var(--sbx-r-xs);color:var(--sbx-text);
-webkit-box-decoration-break:clone;box-decoration-break:clone}
.sbx-ext-card .qt .q.up{background:rgba(48,172,99,.16)}
.sbx-ext-card .qt .q.dn{background:var(--sbx-bg-red)}
.sbx-ext-analysis{margin:0 0 20px;display:grid;gap:12px;max-width:980px}
.sbx-ext-analysis p{margin:0;font-size:15px;line-height:1.7;color:rgba(255,255,255,.82);padding:0}
.sbx-ext-analysis .big{font-size:19px;line-height:1.6;color:#fff}
.sbx-ext-analysis b{font-family:"Montserrat",sans-serif;font-weight:700;color:#fff}
.sbx-ext-analysis .k{background:rgba(255,255,255,.14);border-radius:var(--sbx-r-xs);padding:1px 8px;color:#fff;
font-family:"Montserrat",sans-serif;font-weight:700;
-webkit-box-decoration-break:clone;box-decoration-break:clone}
.sbx-ext-analysis .why{border-left:3px solid var(--sbx-green-l);padding-left:14px}
.sbx-ext-foot{margin:18px 0 0;padding-top:16px;border-top:1px solid rgba(255,255,255,.14);font-size:13px;color:rgba(255,255,255,.6);line-height:1.6;max-width:920px}
.sbx-ext-foot a{color:#fff;text-decoration:underline}
/* --------------------------------------------------------------------------
5. ПРОЗРАЧНОСТЬ (механика Trustpilot Company activity)
-------------------------------------------------------------------------- */
.sbx-transp{background:var(--sbx-tint);border-radius:var(--sbx-r);padding:24px 26px}
.sbx-transp .sbx-sub{margin-bottom:14px}
.sbx-tgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px 24px}
.sbx-tgrid .k{font-size:13px;color:var(--sbx-mute);margin-bottom:5px;line-height:1.35}
.sbx-tgrid .v{font-family:"Montserrat",sans-serif;font-weight:700;font-size:19px;color:var(--sbx-ink);line-height:1.1}
.sbx-tgrid .v small{font-family:"Rubik",sans-serif;font-weight:400;font-size:12px;color:var(--sbx-mute);display:block;margin-top:4px;line-height:1.35}
.sbx-transp .foot{margin-top:18px;padding-top:16px;border-top:1px solid #d6e0e8;font-size:13px;color:var(--sbx-body);line-height:1.6}
/* --------------------------------------------------------------------------
6. ЛЕНТА: тулбар, сортировка, карточки
-------------------------------------------------------------------------- */
.sbx-layout{margin-top:var(--sbx-gap)}
.sbx-toolbar{background:var(--sbx-grey);border-radius:var(--sbx-r);padding:16px 18px;margin-bottom:18px}
.sbx-trow{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
/* На десктопе поиск и четыре селекта должны стоять одной строкой: колонка с
лентой у́же страницы (сайдбар 290px), поэтому селекты не растягиваем, а
поиск отдаём остаток. Ниже 1100px строка снова переносится. */
@media (min-width:1100px){
.sbx-trow{flex-wrap:nowrap}
.sbx-trow .sbx-sel{flex:0 0 auto;padding-left:10px;padding-right:24px;font-size:14px}
.sbx-search{flex:1 1 auto}
}
.sbx-trow+.sbx-trow{margin-top:10px}
.sbx-search{flex:1 1 200px;position:relative;min-width:0}
.sbx-search input{width:100%;box-sizing:border-box;padding:10px 14px 10px 36px;border:1px solid var(--sbx-line);border-radius:10px;font-family:"Rubik",sans-serif;font-size:14px;background:#fff}
/* кольцо фокуса рисуем ниже в :focus-visible, здесь только цвет рамки */
.sbx-search input:focus{outline:none;border-color:var(--sbx-blue)}
.sbx-search::before{content:"";position:absolute;left:12px;top:11px;width:16px;height:16px;pointer-events:none;background:url("data:image/svg+xml;utf8,") no-repeat center/16px}
.sbx-sel{padding:10px 30px 10px 12px;border:1px solid var(--sbx-line);border-radius:10px;background:#fff url("data:image/svg+xml;utf8,") no-repeat right 12px center/10px 6px;font-family:"Rubik",sans-serif;font-size:14px;color:var(--sbx-body);appearance:none;cursor:pointer}
.sbx-sel:focus{outline:none;border-color:var(--sbx-blue)}
.sbx-status{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:1px solid var(--sbx-line-3);font-size:14px;color:var(--sbx-mute)}
.sbx-status b{color:var(--sbx-ink);font-family:"Montserrat",sans-serif}
.sbx-reset{background:none;border:0;color:var(--sbx-blue);font-family:"Rubik",sans-serif;font-size:14px;cursor:pointer;padding:0;text-decoration:underline}
.sbx-active{display:flex;gap:6px;flex-wrap:wrap}
.sbx-atag{display:inline-flex;align-items:center;gap:6px;background:var(--sbx-tint);color:var(--sbx-blue);border-radius:999px;padding:4px 10px;font-size:13px}
.sbx-atag button{background:none;border:0;color:inherit;cursor:pointer;font-size:14px;line-height:1;padding:0}
.sbx-sortbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.sbx-sortbar .lb{font-family:"Montserrat",sans-serif;font-weight:700;font-size:17px;color:var(--sbx-ink)}
.sbx-sortbar .write-review{margin-left:auto}
/* бейджи в карточке */
.sbx-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;font-size:12px;font-family:"Montserrat",sans-serif;font-weight:700;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap}
.sbx-badge.ver{background:rgba(48,172,99,.12);color:var(--sbx-green-d)}
.sbx-badge.pend{background:#fdf3e0;color:#a8740f}
.sbx-badge.susp{background:#fff5f5;color:var(--sbx-red)}
.sbx-ext .sbx-spacer{margin-left:auto}
/* теги-аспекты в карточке */
.sbx-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.sbx-tag{display:inline-flex;align-items:center;gap:5px;min-height:26px;padding:4px 11px;border-radius:999px;font-size:13px;background:#fff;border:1px solid var(--sbx-line-3);color:var(--sbx-body);cursor:pointer;touch-action:manipulation}
.sbx-tag:hover{border-color:var(--sbx-blue);color:var(--sbx-blue)}
.sbx-tag::before{content:"";width:6px;height:6px;border-radius:50%;flex:0 0 6px}
.sbx-tag.p::before{background:var(--sbx-green)}
.sbx-tag.m::before{background:var(--sbx-red)}
/* официальный ответ БК */
.sbx-reply{margin-top:14px;background:#fff;border:1px solid var(--sbx-line);border-left:3px solid var(--sbx-blue);border-radius:0 12px 12px 0;padding:14px 18px}
.sbx-reply .rh{display:flex;align-items:center;gap:9px;margin-bottom:7px;flex-wrap:wrap}
.sbx-reply .who{font-family:"Montserrat",sans-serif;font-weight:700;font-size:14px;color:var(--sbx-ink)}
.sbx-reply .off{background:var(--sbx-tint);color:var(--sbx-blue);font-size:11px;font-family:"Montserrat",sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:3px 8px;border-radius:var(--sbx-r-xs)}
.sbx-reply .dt{font-size:13px;color:var(--sbx-faint);margin-left:auto}
.sbx-reply p{margin:0;font-size:14px;line-height:1.55;color:var(--sbx-body)}
/* дата и автор в шапке карточки: в теме автор выводится , видимого текста нет,
поэтому отбивку задаём сами */
.wrapper_items_name_block .aut{margin-left:10px;color:var(--sbx-mute)}
/* подсветка поиска */
mark{background:#fff2a8;color:inherit;padding:0 2px;border-radius:3px}
/* пусто */
.sbx-empty{display:none;text-align:center;padding:44px 20px;background:var(--sbx-grey);border-radius:var(--sbx-r);color:var(--sbx-mute);font-size:15px}
.sbx-empty.on{display:block}
.sbx-empty b{display:block;font-family:"Montserrat",sans-serif;color:var(--sbx-ink);font-size:18px;margin-bottom:6px}
/* --------------------------------------------------------------------------
7. САЙДБАР. Липнет к экрану — лента длинная. Список БК переверстан в
сетку «балл — контора — отзывы»: колонка баллов читается сверху вниз,
а не теряется в конце строки, как было.
-------------------------------------------------------------------------- */
.sbx-page .page-sidebar{margin-top:0}
.sbx-side{position:sticky;top:calc(var(--sbx-header) + 16px);display:flex;flex-direction:column;gap:16px}
.sbx-sidecard{background:#fff;border:1px solid var(--sbx-line);border-radius:var(--sbx-r);overflow:hidden}
.sbx-side .sbx-sidecard>h3{font-family:"Montserrat",sans-serif;font-weight:700;font-size:14px;line-height:1.3;text-transform:uppercase;letter-spacing:.04em;color:var(--sbx-body);margin:0;padding:16px 18px 6px}
.sbx-sidecard .sub{display:block;padding:0 18px 14px;font-size:12px;color:var(--sbx-faint);line-height:1.4}
.sbx-bklist{max-height:390px;overflow-y:auto;overscroll-behavior-y:contain;border-top:1px solid var(--sbx-line-2);scrollbar-width:thin}
.sbx-bk{display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:10px;padding:9px 18px;text-decoration:none;border-bottom:1px solid var(--sbx-line-2);transition:background-color .12s}
.sbx-bk:last-child{border-bottom:none}
.sbx-bk:hover{background:var(--sbx-grey)}
.sbx-bk .sc{font-family:"Montserrat",sans-serif;font-weight:700;font-size:15px;color:var(--sbx-ink);text-align:center;border-radius:7px;padding:4px 0;background:var(--sbx-line-2)}
.sbx-bk .sc.hi{background:rgba(48,172,99,.15);color:var(--sbx-green-d)}
.sbx-bk .sc.lo{background:#fdeaea;color:var(--sbx-red)}
.sbx-bk .nm{font-size:14px;color:var(--sbx-ink);line-height:1.25;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sbx-bk .ct{font-size:12px;color:var(--sbx-faint);white-space:nowrap}
.sbx-bk.me{background:var(--sbx-tint)}
.sbx-bk.me .nm{font-family:"Montserrat",sans-serif;font-weight:700}
.sbx-sideall{display:block;padding:12px 18px;font-size:13px;color:var(--sbx-blue);text-decoration:none;border-top:1px solid var(--sbx-line-2);background:#fbfcfd}
.sbx-sideall:hover{text-decoration:underline}
.sbx-sidecta{background:var(--sbx-tint);border-radius:var(--sbx-r);padding:18px}
.sbx-sidecta b{display:block;font-family:"Montserrat",sans-serif;font-size:15px;color:var(--sbx-ink);margin-bottom:6px}
.sbx-sidecta p{margin:0 0 14px;font-size:13px;line-height:1.5;color:var(--sbx-text);padding:0}
.sbx-sidecta .btn{display:block;width:100%;box-sizing:border-box;text-align:center}
/* --------------------------------------------------------------------------
8. АДАПТИВ — только новые блоки
-------------------------------------------------------------------------- */
@media (max-width:1100px){
.sbx-side{position:static}
.sbx-bklist{max-height:none}
}
@media (max-width:980px){
:root{--sbx-gap:30px}
.sbx-page{padding-top:calc(var(--sbx-header) + 14px)}
/* синий сегмент уходит под левую колонку и остаётся прижатым к краям */
.sbx-hero{--sbx-hero-pad:18px;grid-template-columns:1fr;grid-template-rows:auto auto auto auto}
.sbx-hero-l,.sbx-hero-stats,.sbx-hero-foot{grid-column:1}
.sbx-hero-r{grid-column:1;grid-row:4;margin:0 -1px -1px;border-radius:0 0 var(--sbx-r) var(--sbx-r);order:4}
/* svg масштабируется пропорционально: без потолка по высоте на узком экране
он растягивается на всю ширину и подписи внутри вырастают вдвое */
.sbx-hr-svg{height:170px;width:auto;max-width:100%;margin:0 auto}
.sbx-hero-l{gap:16px}
.sbx-hero-cells{gap:14px 0}
.sbx-hero-cells .c{padding:0 18px 0 0;border-left:none;min-width:118px}
.sbx-hero-cta{margin-left:0;width:100%;box-sizing:border-box;text-align:center}
.sbx-grid2,.sbx-an-grid{grid-template-columns:1fr}
.sbx-an-grid{gap:24px}
.sbx-tw,.sbx-picked-grid{grid-template-columns:1fr}
.sbx-twcol+.sbx-twcol{border-left:0;border-top:1px solid var(--sbx-line-2)}
.sbx-twcol,.sbx-picked,.sbx-tfoot{padding-left:18px;padding-right:18px}
.sbx-lead{font-size:17px}
.sbx-dg-cites{font-size:16px}
.sbx-tgrid{grid-template-columns:1fr 1fr}
.sbx-ext{padding:22px 18px}
.sbx-ext-top{grid-template-columns:1fr;gap:22px;padding:18px}
.sbx-trend-svg{height:130px}
.sbx-ext-big .num{font-size:46px}
.sbx-ext-big .lb{max-width:none}
.sbx-transp{padding:20px 18px}
}
@media (max-width:678px){
/* тема здесь сама отодвигает крошки под шапку — свой отступ уже есть, дубль снимаем */
.sbx-page .breadcrumbs{padding-top:0 !important}
}
@media (max-width:560px){
.sbx-tgrid{grid-template-columns:1fr}
.sbx-sortbar .write-review{margin-left:0;width:100%;text-align:center}
.sbx-ext-card{flex-basis:236px}
}
/* ---- карточка «последних отзывов» ведёт к самому отзыву в ленте ---- */
.sbx-fcard--link{position:relative;cursor:pointer;transition:border-color .15s,box-shadow .15s,background-color .15s}
.sbx-fcard--link:hover,.sbx-fcard--link:focus-within{background:#fff;border-color:var(--sbx-blue);box-shadow:0 8px 22px rgba(0,82,235,.10)}
.sbx-fmore{display:inline-flex;align-items:center;gap:6px;margin:0 0 12px;font-size:13px;color:var(--sbx-blue);
text-decoration:none;opacity:0;transform:translateY(-2px);transition:opacity .15s,transform .15s}
.sbx-fmore svg{flex:0 0 12px}
.sbx-fcard--link:hover .sbx-fmore,.sbx-fcard--link:focus-within .sbx-fmore{opacity:1;transform:none}
/* Ссылка растянута на карточку: клик в любом месте ведёт к отзыву, а в табе фокус
получает именно её — поэтому рамку подсвечивает :focus-within. Место под строку
зарезервировано всегда (opacity, а не display), карточка не прыгает по ховеру. */
.sbx-fmore::after{content:"";position:absolute;inset:0;border-radius:var(--sbx-r)}
.sbx-fmore:focus-visible::after{outline:2px solid var(--sbx-blue);outline-offset:2px}
@media (hover:none){.sbx-fmore{opacity:1;transform:none}}
/* короткая подсветка отзыва, к которому перешли */
.wrapper_items_review.is-target{animation:sbxFlash 1.8s ease}
@keyframes sbxFlash{0%{box-shadow:0 0 0 3px rgba(0,82,235,.38)}70%{box-shadow:0 0 0 3px rgba(0,82,235,.16)}100%{box-shadow:0 0 0 3px rgba(0,82,235,0)}}
@media (prefers-reduced-motion:reduce){.wrapper_items_review.is-target{animation:none;box-shadow:0 0 0 3px rgba(0,82,235,.28)}}
/* ---- показать ещё + пагинация ---- */
.sbx-pager{display:flex;flex-direction:column;align-items:center;gap:16px;margin-top:24px}
/* свой display перебивает встроенное [hidden]{display:none} — возвращаем его явно */
.sbx-pager[hidden],.sbx-more[hidden]{display:none}
.sbx-more{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 28px;
border-radius:var(--sbx-r-sm);border:1px solid var(--sbx-line);background:#fff;font-family:"Rubik",sans-serif;
font-size:14px;color:var(--sbx-body);cursor:pointer;transition:border-color .15s,color .15s,background-color .15s}
.sbx-more:hover{border-color:var(--sbx-blue);color:var(--sbx-blue);background:var(--sbx-tint)}
.sbx-more:focus-visible{outline:2px solid var(--sbx-blue);outline-offset:2px}
.sbx-pages{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center}
.sbx-pg{min-width:38px;height:38px;padding:0 11px;border-radius:var(--sbx-r-xs);border:1px solid var(--sbx-line);
background:#fff;font-family:"Rubik",sans-serif;font-size:13.5px;color:var(--sbx-body);cursor:pointer;
transition:border-color .15s,color .15s}
.sbx-pg:hover:not(.on):not([disabled]){border-color:var(--sbx-blue);color:var(--sbx-blue)}
.sbx-pg:focus-visible{outline:2px solid var(--sbx-blue);outline-offset:2px}
.sbx-pg.on{background:var(--sbx-blue);border-color:var(--sbx-blue);color:#fff;cursor:default}
.sbx-pg[disabled]:not(.on){opacity:.4;cursor:default}
.sbx-pg.on[disabled]{opacity:1}
.sbx-pg--gap{border:0;background:none;cursor:default;color:var(--sbx-faint);min-width:18px;padding:0}
/* ================= VS: сравнение двух букмекеров ================= */
/* --sbx-faint (#6f7479) на сером фоне темы даёт 4,4:1 — чуть ниже нормы.
На этой странице делаем его на полтона темнее: 5,4:1, оттенок тот же. */
.vs-wrap{--vs-w:#ffffff;--sbx-faint:#63676c;--sbx-green-d:#1e7a46}
/* =====================================================================
АРЕНА И МАТЧ — компонент .bk-cmp, CSS перенесён из preview-vs.html
ДОСЛОВНО, без правок. Всё, что нужно поменять для VS-страницы, лежит
ниже отдельным блоком: растянуть на всю ширину и добавить два новых
элемента (строка с баллами и кнопка «поменять местами»).
===================================================================== */
.bk-cmp {
--bk-blue: #0052eb;
--bk-red: #e30613;
--bk-green: #30ac63;
/* тот же зелёный, но пригодный для текста: #30ac63 на белом даёт 2,9:1 */
--bk-green-t: #1e7a46;
--bk-ink: #1a1a1a;
--bk-gray: #696d72;
--bk-line: #e6e8ec;
--bk-bg: #f7f8fa;
--bk-win: #e6f4ea;
--bk-r: 14px;
--bk-r-s: 9px;
font-family: "Rubik", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
color: var(--bk-ink);
max-width: 760px;
margin: 28px auto;
background: #fff;
border: 1px solid var(--bk-line);
border-radius: 20px;
box-shadow: 0 10px 40px rgba(0,0,0,.05);
overflow: hidden;
box-sizing: border-box;
}
.bk-cmp *, .bk-cmp *::before, .bk-cmp *::after { box-sizing: border-box; }
.bk-cmp--empty { padding: 22px; text-align: center; color: var(--bk-gray); }
/* ---------- АРЕНА (закреплена сверху) ---------- */
.bk-cmp__arena {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 10px;
padding: 16px 16px 14px;
background: var(--bk-blue); /* синяя шапка */
}
.bk-cmp__team { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.bk-cmp__team-card {
display: flex; flex-direction: column; align-items: center;
cursor: pointer; width: 100%; border-radius: var(--bk-r);
}
/* логотип — на белом фоне, крупная плитка; больше воздуха по бокам и вертикали */
.bk-cmp__logo {
width: 124px; height: 66px; object-fit: contain;
background: #fff; border-radius: 14px; padding: 12px 26px; margin: 6px 0;
box-shadow: 0 3px 12px rgba(0,0,0,.16);
}
.bk-cmp__logo--ph {
display: flex; align-items: center; justify-content: center;
font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 22px; color: var(--bk-blue);
}
.bk-cmp__team-empty {
display: flex; align-items: center; justify-content: center;
width: 124px; height: 66px; margin: 6px 0; background: rgba(255,255,255,.18); color: #fff;
border: 1px dashed rgba(255,255,255,.6); border-radius: 14px; font-weight: 600; font-size: 13px;
}
/* селект — почти невидимый: прозрачный фон, светло-голубой текст и шеврон */
.bk-cmp__select {
width: 100%; max-width: 156px; font-family: "Rubik", sans-serif; font-size: 12px; font-weight: 500;
padding: 7px 26px 7px 12px; border: 1px solid rgba(255,255,255,.22); border-radius: var(--bk-r-s);
background-color: transparent; color: #b9d0ff; cursor: pointer;
-webkit-appearance: none; -moz-appearance: none; appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23b9d0ff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 10px center;
transition: border-color .15s, color .15s;
}
.bk-cmp__select:hover { color: #d8e6ff; border-color: rgba(255,255,255,.4); }
.bk-cmp__select option { color: #1a1a1a; background: #fff; }
.bk-cmp__select:focus { outline: 1px solid rgba(255,255,255,.5); }
/* ----- ТАБЛО СЧЁТА: светлая карта с тёмными цифрами (вариант 5) ----- */
.bk-cmp__center { text-align: center; min-width: 120px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.bk-cmp__score {
font-family: "Arial Black", Arial, sans-serif; line-height: 1;
display: inline-flex; align-items: center; gap: 8px;
background: #fff; color: #16181d; border-radius: 12px; padding: 10px 20px;
box-shadow: 0 4px 14px rgba(0,0,0,.18);
}
.bk-cmp__score span {
display: inline-block; min-width: 30px; text-align: center;
font-size: 38px; transition: transform .15s;
}
.bk-cmp__score i { font-style: normal; font-size: 28px; opacity: .5; }
.bk-cmp__score span.is-bump { animation: bkBump .4s ease; }
@keyframes bkBump { 0%{transform:scale(1)} 35%{transform:scale(1.45)} 100%{transform:scale(1)} }
/* VS — тёмный бейдж, белые буквы */
.bk-cmp__vs-label {
font-family: "Arial Black", Arial, sans-serif; font-size: 13px; letter-spacing: 2px;
color: #fff; background: #16181d; border-radius: 6px; padding: 3px 12px; display: inline-block;
}
/* ---------- БЫСТРЫЕ ПАРЫ (светлый фон, под шапкой) ---------- */
.bk-cmp__quick {
display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
padding: 12px 16px; background: var(--bk-bg); border-bottom: 1px solid var(--bk-line);
}
.bk-cmp__preset, .bk-cmp__random {
border: 1px solid var(--bk-line); background: #fff; border-radius: 999px;
padding: 6px 13px; font-size: 13px; color: var(--bk-ink); cursor: pointer;
font-family: "Rubik", sans-serif; transition: border-color .15s, color .15s, background .15s;
}
.bk-cmp__preset:hover { border-color: var(--bk-blue); color: var(--bk-blue); }
/* «Случайная пара» выделяется: синяя обводка, синий текст, прозрачный фон */
.bk-cmp__random {
margin-left: auto; background: transparent;
border: 1.5px solid var(--bk-blue); color: var(--bk-blue); font-weight: 500;
}
.bk-cmp__random:hover { background: var(--bk-blue); color: #fff; }
/* ---------- ТАЙМЕР (ниже быстрых пар) ---------- */
.bk-cmp__timer { padding: 12px 16px 10px; display: flex; align-items: center; gap: 10px; }
.bk-cmp__timer-track { flex: 1; height: 6px; background: var(--bk-line); border-radius: 999px; overflow: hidden; }
.bk-cmp__timer-bar {
height: 100%; width: 100%;
background: #333; /* сплошная тёмно-серая полоска, без градиента */
border-radius: 999px; transition: width .12s linear;
}
.bk-cmp__timer-text { font-size: 12px; color: var(--bk-gray); white-space: nowrap; min-width: 64px; text-align: right; }
/* ---------- ЛЕНТА МАТЧА ---------- */
/* без внутреннего скролла. В свёрнутом виде — ФИКСИРОВАННАЯ высота (~5 строк),
так что во время матча блок не «пляшет». Последняя строка затухает градиентом,
остальное — по кнопке «Показать все». overflow:hidden, без scroll/mask → плавно. */
.bk-cmp__feed { padding: 0 8px; position: relative; overflow-anchor: none; }
.bk-cmp__feed:not(.is-expanded) { height: 256px; overflow: hidden; }
.bk-cmp__feed:not(.is-expanded)::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 76px;
background: linear-gradient(180deg, rgba(255,255,255,0), #fff 88%);
pointer-events: none;
}
.bk-cmp__hint { padding: 24px; text-align: center; color: var(--bk-gray); }
/* кнопка-разворот ленты (без верхнего бордера — его роль играет градиент) */
.bk-cmp__toggle {
display: block; width: 100%; margin: 0;
background: none; border: none; cursor: pointer;
font-family: "Rubik", sans-serif; font-size: 13px; font-weight: 500; color: var(--bk-blue);
padding: 8px 10px 12px;
}
.bk-cmp__toggle:hover { color: var(--bk-blue-d); }
.bk-cmp__row {
display: grid; grid-template-columns: 1fr 34% 1fr; align-items: center;
gap: 6px; padding: 9px 8px; border-bottom: 1px solid var(--bk-line);
contain: layout style; /* изоляция: обновление одной строки не трогает остальные */
overflow-anchor: none;
}
/* плавное раскрытие новой строки по высоте → соседи мягко съезжают вниз */
.bk-cmp__row--sliding { transition: height .32s cubic-bezier(.2,.7,.3,1); }
/* заголовок (группа + параметр) проявляется через fade */
.bk-cmp__rparam { text-align: center; animation: bkFade .45s ease both; }
/* значения по бокам мягко проявляются */
.bk-cmp__appear { animation: bkAppear .4s ease both; }
@keyframes bkFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes bkAppear { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.bk-cmp__rside { text-align: center; padding: 6px 4px; border-radius: var(--bk-r-s); transition: background .25s; }
.bk-cmp__rmain { font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 15px; display: block; line-height: 1.15; min-height: 18px; }
.bk-cmp__rsub { display: block; font-size: 11px; color: var(--bk-gray); margin-top: 1px; font-weight: 400; }
.bk-cmp__rside.is-win { background: var(--bk-win); }
.bk-cmp__rside.is-win .bk-cmp__rmain { color: var(--bk-green-t); }
.bk-cmp__rside.is-win .bk-cmp__rmain::after { content: " ✓"; font-weight: 900; }
.bk-cmp__rgroup {
display: block; font-size: 9px; letter-spacing: .4px; text-transform: uppercase;
color: var(--bk-ink); font-weight: 700; margin-bottom: 1px; /* чёрный, не синий */
}
.bk-cmp__rlabel { font-size: 12px; color: var(--bk-gray); }
.bk-cmp__chip { display: inline-block; font-size: 10px; padding: 1px 6px; border-radius: 999px; background: var(--bk-bg); color: var(--bk-gray); margin: 1px; }
.bk-cmp__yes { color: var(--bk-green-t); font-weight: 700; }
.bk-cmp__no { color: #aaa; }
.bk-cmp__soon { color: #b59000; font-size: 12px; }
/* ---------- ФИНАЛ ---------- */
/* вердикт и кнопка — на одной строке; больше вертикального воздуха под мерцание.
min-height фиксирует высоту, чтобы при появлении кнопки «Повторить» блок НЕ прыгал
(во время матча тут одна строка-комментарий, в финале — комментарий + кнопка). */
.bk-cmp__final {
display: flex; align-items: center; align-content: center; justify-content: center; flex-wrap: wrap;
gap: 10px 18px; padding: 18px 16px; min-height: 84px;
}
.bk-cmp__final-verdict { font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 16px; margin: 0; }
/* живой комментарий во время матча */
.bk-cmp__live { font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 16px; color: var(--bk-ink); margin: 0; animation: bkFade .3s ease; }
/* базовая форма — outline-пилюля; отступы по бокам больше, чем сверху/снизу */
.bk-cmp__replay {
font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 14px;
padding: 10px 26px; border-radius: 999px; cursor: pointer; position: relative;
background: #fff; transition: background .15s, border-color .15s, color .15s; flex: none;
}
/* состояние «приглашаем нажать» (первая загрузка): синяя обводка + равномерное мерцание.
ПРОИЗВОДИТЕЛЬНОСТЬ: пульсирует ТОЛЬКО opacity на псевдоэлементе (композитится на GPU,
без repaint каждый кадр). Кольцо ровное по всем сторонам — box-shadow задан статично. */
.bk-cmp__replay.is-attract {
color: var(--bk-blue); border: 2px solid var(--bk-blue);
}
.bk-cmp__replay.is-attract::after {
content: ""; position: absolute; inset: -2px; border-radius: 999px; pointer-events: none;
box-shadow: 0 0 0 5px rgba(0,82,235,.30);
opacity: .2; will-change: opacity;
animation: bkReplayGlow 1.6s ease-in-out infinite;
}
.bk-cmp__replay.is-attract:hover { background: var(--bk-blue); color: #fff; }
@keyframes bkReplayGlow {
0%, 100% { opacity: .12; }
50% { opacity: .9; }
}
/* состояние «серая, неприметная» (после смены селекта пользователем) */
.bk-cmp__replay.is-muted {
color: #8a8f98; border: 1px solid #e6e8ec; background: #fff;
}
.bk-cmp__replay.is-muted:hover { color: #45464f; border-color: #c4ccd6; }
/* ---------- CTA ---------- */
/* колонки одной высоты (grid stretch) → кнопки выравниваются, даже если текст
в одну и две строки */
.bk-cmp__cta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px 16px 18px; align-items: stretch; }
.bk-cmp__cta-col { display: grid; grid-template-rows: 1fr auto; gap: 6px; justify-items: center; }
.bk-cmp__btn {
width: 100%; height: 100%; text-align: center; text-decoration: none;
display: flex; align-items: center; justify-content: center;
font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 15px;
padding: 14px 12px; min-height: 56px; border-radius: var(--bk-r-s); color: #fff; transition: filter .15s;
}
.bk-cmp__btn:hover { filter: brightness(1.06); }
.bk-cmp__btn--a { background: var(--bk-blue); }
.bk-cmp__btn--b { background: var(--bk-red); }
.bk-cmp__review { font-size: 13px; color: var(--bk-gray); text-decoration: none; border-bottom: 1px dashed currentColor; }
.bk-cmp__review:hover { color: var(--bk-blue); }
/* ---------- АДАПТИВ (всё в один экран) ---------- */
@media (max-width: 600px) {
.bk-cmp { margin: 16px auto; border-radius: 16px; }
.bk-cmp__arena { padding: 12px 8px 12px; gap: 4px; }
.bk-cmp__logo { width: 96px; height: 54px; padding: 9px 18px; margin: 4px 0; }
.bk-cmp__team-empty { width: 96px; height: 54px; margin: 4px 0; }
.bk-cmp__select { font-size: 11px; max-width: 130px; padding: 6px 26px 6px 10px; }
.bk-cmp__score { padding: 8px 16px; gap: 6px; }
.bk-cmp__score span { min-width: 24px; font-size: 30px; }
.bk-cmp__score i { font-size: 24px; }
.bk-cmp__center { min-width: 96px; }
/* быстрые пары: по центру, случайная — на всю ширину снизу */
.bk-cmp__quick { gap: 6px; padding: 10px 12px; justify-content: center; }
.bk-cmp__preset { font-size: 12px; padding: 6px 11px; }
.bk-cmp__random { margin-left: 0; width: 100%; text-align: center; order: 2; }
.bk-cmp__presets { display: flex; flex-wrap: wrap; gap: 6px; order: 1; width: 100%; justify-content: center; }
.bk-cmp__timer { padding: 10px 12px 8px; }
.bk-cmp__feed:not(.is-expanded) { height: 232px; }
.bk-cmp__row { grid-template-columns: 1fr 32% 1fr; padding: 8px 4px; }
.bk-cmp__rmain { font-size: 13px; }
.bk-cmp__rsub { display: none; }
.bk-cmp__rlabel { font-size: 11px; }
.bk-cmp__cta { padding: 10px 12px 14px; }
}
@media (prefers-reduced-motion: reduce) {
.bk-cmp__rparam, .bk-cmp__appear { animation: none; }
.bk-cmp__score span.is-bump { animation: none; }
.bk-cmp__replay.is-attract, .bk-cmp__replay.is-attract::after { animation: none; }
.bk-cmp__row--sliding { transition: none; }
}
/* ---------------------------------------------------------------------
ПРАВКИ ДЛЯ VS-СТРАНИЦЫ — единственное, что дописано к оригиналу
--------------------------------------------------------------------- */
/* 1. На главной блок стоит в узкой колонке героя и ограничен 760px.
Здесь он занимает всю ширину контейнера, поэтому плитки, табло и
отступы пропорционально крупнее. */
.bk-cmp{max-width:none;margin:0}
@media (min-width:901px){
.bk-cmp__arena{padding:26px 26px 22px}
.bk-cmp__logo{width:170px;height:82px;padding:14px 30px}
.bk-cmp__select{max-width:210px;font-size:13px;padding:8px 28px 8px 12px}
.bk-cmp__center{min-width:150px}
.bk-cmp__score{padding:12px 24px}
.bk-cmp__score span{min-width:36px;font-size:46px}
.bk-cmp__score i{font-size:32px}
.bk-cmp__quick,.bk-cmp__timer{padding-left:20px;padding-right:20px}
.bk-cmp__feed{padding:0 12px}
.bk-cmp__feed:not(.is-expanded){height:296px}
.bk-cmp__row{padding:11px 8px}
.bk-cmp__rmain{font-size:17px}
.bk-cmp__rsub{font-size:11.5px}
.bk-cmp__rlabel{font-size:13px}
.bk-cmp__cta{padding:12px 20px 20px}
}
/* 2. Новые элементы. Оценки стоят сбоку от логотипа — снаружи, к краям блока.
Разметка внутри — готовый компонент .hero-score со страницы БК; на синем
фоне у него меняются только цвета, структура и классы те же. */
.bk-cmp__team{flex-direction:row;justify-content:center;gap:20px}
.bk-cmp__team--a{justify-content:flex-start}
.bk-cmp__team--b{justify-content:flex-end}
.bk-cmp__pick{display:flex;flex-direction:column;align-items:center;gap:8px;flex:0 0 auto}
.bk-cmp__stats{display:flex;flex-direction:column;gap:12px;min-width:0}
.bk-cmp__team--b .bk-cmp__stats{align-items:flex-end;text-align:right}
.bk-cmp__stat{display:flex;flex-direction:column;gap:4px;text-decoration:none;padding:6px 10px;margin:-6px -10px;
border-radius:var(--bk-r-s);transition:background-color .15s}
.bk-cmp__stat:hover{background:rgba(255,255,255,.12)}
.bk-cmp__stat:focus-visible{outline:2px solid #fff;outline-offset:1px}
.bk-cmp__team--b .bk-cmp__stat{align-items:flex-end}
/* перекраска компонента .hero-score под синий фон — больше в нём ничего не меняем */
.bk-cmp__stats .hero-score__cap{color:#d7e4ff}
.bk-cmp__stats .hero-score__num{color:#fff;font-size:27px}
.bk-cmp__stats .hero-score__of{color:rgba(255,255,255,.85)}
.bk-cmp__stats .hero-score__note{color:#d7e4ff}
.bk-cmp__stats .hero-score__line{gap:9px}
.bk-cmp__stat:hover .hero-score__note{color:#fff}
/* строка под лентой: фильтр «только отличия», разворот и счётчик различий.
Кнопка .bk-cmp__toggle в оригинале блочная на всю ширину — здесь она стоит
в ряду, поэтому ширину и выравнивание возвращаем к обычным. */
.bk-cmp__feedbar{display:flex;align-items:center;gap:18px;padding:6px 20px 14px}
.bk-cmp__only{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;color:var(--bk-ink);
cursor:pointer;flex:none;user-select:none}
.bk-cmp__feedbar .bk-cmp__toggle{width:auto;text-align:left;padding:7px 0;margin:-7px 0;flex:none;min-height:30px}
.bk-cmp__diffn{margin-left:auto;font-size:12.5px;color:var(--bk-gray)}
.bk-cmp__row[hidden]{display:none}
@media (max-width:600px){
.bk-cmp__feedbar{padding:6px 12px 12px;gap:12px;flex-wrap:wrap}
.bk-cmp__diffn{margin-left:0;flex-basis:100%}
}
/* быстрые пары стали ссылками на соседние страницы — форму кнопки сохраняем */
/* Кнопки перехода в матче — скруглённые, как .btn в теме. */
.bk-cmp__btn{border-radius:999px}
/* У outline-кнопок на сайте ховер заливает синим с белым текстом
(см. .bs_action-link a:hover), а не подсвечивает бледной заливкой. */
.vs-wrap .btn-outline:hover{background:var(--sbx-blue);border-color:var(--sbx-blue);color:#fff}
.bk-cmp__preset{display:inline-block;text-decoration:none}
.bk-cmp__preset.is-on{border-color:var(--bk-blue);color:var(--bk-blue);background:#eaf1ff;pointer-events:none}
@media (max-width:900px){
/* колонки схлопываются: логотип сверху, оценки под ним — в обеих сторонах */
.bk-cmp__team,.bk-cmp__team--a,.bk-cmp__team--b{flex-direction:column;justify-content:center;gap:10px}
.bk-cmp__team--a .bk-cmp__stats{order:2}
.bk-cmp__team--b .bk-cmp__stats{align-items:center;text-align:center}
.bk-cmp__team--b .bk-cmp__stat{align-items:center}
.bk-cmp__stats{align-items:center;text-align:center;gap:8px}
.bk-cmp__stats .hero-score__line{justify-content:center}
}
@media (max-width:700px){
/* Логотипы парой сверху, табло со счётом — под ними: сначала «кто с кем»,
потом счёт. Плитки при этом крупнее, они тянутся по ширине колонки. */
.bk-cmp__arena{grid-template-columns:1fr 1fr;grid-template-areas:"a b" "score score";
row-gap:18px;column-gap:12px;padding:22px 18px}
.bk-cmp__team--a{grid-area:a}
.bk-cmp__team--b{grid-area:b}
.bk-cmp__center{grid-area:score}
.bk-cmp__pick{width:100%}
.bk-cmp__logo{width:100%;max-width:none;height:76px;padding:10px 16px;margin:0}
.bk-cmp__select{max-width:none;width:100%}
/* Оценки в столбик читались кашей: оставляем подпись, число и звёзды,
длинные пояснения убираем — всё это есть ниже по странице. */
.bk-cmp__stats{gap:14px;width:100%}
.bk-cmp__stat{gap:3px;padding:0;margin:0}
.bk-cmp__stats .hero-score__cap{font-size:9.5px}
.bk-cmp__stats .hero-score__num{font-size:23px}
.bk-cmp__stats .hero-score__note{font-size:11.5px;line-height:1.35}
.vs-note-long{display:none}
}
/* ---- липкая панель перехода ----
Это компонент .scroll-bar со страницы обзора БК: фиксация, тень, выезд
и класс .visible — всё из темы. Ссылки внутри — её же .sb-tabs, кнопки —
.btn (у него уже скруглённая форма). Своё здесь только одно: панель
двусторонняя, поэтому контейнер разбит на две стороны и бейдж VS. */
.vs-sticky .container{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
align-items:center;gap:18px;padding:10px 24px}
.vs-sticky__side{display:flex;align-items:center;gap:14px;min-width:0}
.vs-sticky__side:last-child{flex-direction:row-reverse}
.vs-sticky .sb-brand{display:flex;align-items:center;height:34px}
.vs-sticky .sb-brand img{max-height:34px;width:auto;display:block}
.vs-sticky .sb-tabs{flex:0 1 auto;justify-content:flex-start;gap:2px}
.vs-sticky .btn{flex:none}
/* красная — пара к синей, как в матче; цвет единственное, что меняем у .btn */
.vs-sticky .btn--red{background:#e30613;border-color:#e30613}
.vs-sticky .btn--red:hover{background:#c1050f;border-color:#c1050f}
.vs-sticky__vs{font-family:"Arial Black",Arial,sans-serif;font-size:12px;letter-spacing:2px;color:#fff;
background:#16181d;border-radius:6px;padding:3px 10px}
@media (max-width:900px){
.vs-sticky .container{gap:10px;padding:8px 12px}
.vs-sticky .sb-tabs{display:none}
.vs-sticky .sb-brand img{max-height:26px}
}
@media (max-width:600px){
/* логотип оставляем: без него две кнопки перехода ничем не отличаются */
.vs-sticky__side,.vs-sticky__side:last-child{flex-direction:column;align-items:center;gap:6px}
.vs-sticky .sb-brand img{max-height:20px}
.vs-sticky .btn{width:100%}
}
/* ---- вердикт ---- */
/* Вердикт — вывод, а не карточка с данными: текст идёт прямо по странице,
без рамки и без подложки. Тонирована только правая колонка — табло по
направлениям: это уже данные, и плашка отделяет их от текста. */
.vs-verdict{margin-top:18px;display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:32px;align-items:center}
.vs-verdict h2{font-family:"Montserrat",sans-serif;font-weight:700;font-size:21px;color:#000;margin:0 0 8px;letter-spacing:-.01em}
.vs-verdict p{font-size:14.5px;line-height:1.65;color:var(--sbx-body);margin:0}
.vs-verdict p+p{margin-top:8px}
/* Табло: не одна полоса, а по клетке на каждое направление — сразу видно,
насколько ровно шла борьба и где серия побед у одной стороны. */
.vs-tally{display:flex;flex-direction:column;gap:10px;background:var(--sbx-grey);
border-radius:var(--sbx-r);padding:18px 20px}
.vs-tally .top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--sbx-mute)}
.vs-tally .top b{font-family:"Montserrat",sans-serif;font-weight:800;font-size:26px;color:var(--sbx-ink);
line-height:1;display:block;margin-bottom:2px}
.vs-tally .top .r{text-align:right}
.vs-tally .cells{display:flex;gap:3px}
.vs-tally .cells i{flex:1;height:26px;border-radius:3px;background:var(--sbx-line-2);cursor:default}
.vs-tally .cells i.a{background:var(--sbx-blue)}
.vs-tally .cells i.b{background:#8ab4ff}
.vs-tally .lg{display:flex;align-items:center;gap:14px;font-size:12px;color:var(--sbx-faint);flex-wrap:wrap}
.vs-tally .lg span{display:inline-flex;align-items:center;gap:5px}
.vs-tally .lg em{width:9px;height:9px;border-radius:2px;background:var(--sbx-line-2);font-style:normal}
.vs-tally .lg .a em{background:var(--sbx-blue)}
.vs-tally .lg .b em{background:#8ab4ff}
/* ---- плюсы, минусы и акции ----
Блок собран на классах каталога БК, свои правила — только под колонку
вдвое уже: плюсы и минусы встают друг под друга, кнопка акции ужимается
по содержимому, плашка «Акции от…» растягивается на края карточки. */
.vs-pc{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.vs-pc-col{padding:0;overflow:hidden}
.vs-pc-hd{display:flex;align-items:center;gap:12px;padding:16px 22px;border-bottom:1px solid var(--sbx-line-2)}
.vs-pc-hd img{width:86px;height:32px;object-fit:contain}
.vs-pc-hd .nm{font-family:"Montserrat",sans-serif;font-weight:700;font-size:16px;color:var(--sbx-ink)}
.vs-pc-hd .dom{margin-left:auto;font-size:13px;color:var(--sbx-blue);text-decoration:none}
.vs-pc .bs_bookmaker-details{padding:18px 22px;gap:16px;flex-direction:column;flex-wrap:nowrap}
.vs-pc .bs_bookmaker-plus,.vs-pc .bs_bookmaker-minus{width:100%;margin-bottom:0}
.vs-pc .bs_actions-header{font-size:15px;padding:14px 22px}
/* Разметка акции та же, что на каталоге, но в узкой колонке кнопка уезжает
под текст, а не в третий столбец: иначе описание жмётся до 4–6 слов в строку. */
.vs-pc .bs_action{display:grid;grid-template-columns:40px minmax(0,1fr);
grid-template-areas:"icon content" "icon link";gap:2px 14px;align-items:start;padding:16px 22px;font-size:14px}
.vs-pc .bs_action-icon{grid-area:icon}
/* в оригинале ширину описанию задавал flex:1 — в строке-сетке он не работает */
.vs-pc .bs_action-content{grid-area:content;width:100%;min-width:0}
.vs-pc .bs_action-link{grid-area:link;width:auto;min-width:0;text-align:left;margin-top:10px}
/* Размер приводим к .btn-sm — тому же, что у «Обзор БК» и «Читать отзывы»:
на странице три ссылки-кнопки, и они должны быть одного роста. */
.vs-pc .bs_action-link a{padding:9px 18px;font-size:13px}
.vs-pc .bs_action-content p{font-size:13.5px;color:var(--sbx-mute)}
.vs-pc .bs_action-noda{padding:16px 22px;font-size:13.5px;color:var(--sbx-faint)}
@media (max-width:900px){
.vs-pc{grid-template-columns:1fr}
/* тема прячет иконку акции на мобильном — убираем и колонку под неё */
.vs-pc .bs_action{grid-template-columns:minmax(0,1fr);grid-template-areas:"content" "link"}
}
/* ---- направления методики ----
Берём компонент .criteria/.criterion со страницы обзора: карточка с рамкой,
полосы 8px, «вес N%», зелёный итог. Здесь он двусторонний, поэтому сетка
строки своя, а всё оформление — из темы. */
.vs-dirs{grid-template-columns:1fr;gap:0;padding:10px 22px 16px;margin-top:0}
.vs-dirs .vs-drow{display:grid;grid-template-columns:46px minmax(0,1fr) 240px minmax(0,1fr) 46px;
align-items:center;gap:14px;padding:9px 0;border-bottom:1px solid var(--sbx-line-2)}
.vs-dirs .vs-drow:last-child,.vs-dirs .vs-drow:nth-last-child(2){border-bottom:none}
.vs-dirs .vs-dname{flex:none;text-align:center;font-size:13.5px;color:var(--sbx-body);line-height:1.3;
display:flex;flex-direction:column;gap:1px;align-items:center}
.vs-dirs .vs-dname .weight{font-style:normal;font-size:11.5px;color:var(--sbx-faint)}
.vs-dirs .vs-dval{flex:none;font-family:"Montserrat",sans-serif;font-weight:700;font-size:15px;color:#333;
font-variant-numeric:tabular-nums}
.vs-dval--a{text-align:left}.vs-dval--b{text-align:right}
/* Победителя показываем не цветом-«хорошо», а контрастом: выигравшая цифра
чёрная, проигравшая серая — как и её полоса, которая бледнее. */
.vs-dirs .vs-dval.win{color:var(--sbx-ink)}
.vs-dirs .vs-dval.lose{color:var(--sbx-faint)}
/* в итоговой строке обе цифры остаются тёмными: это финальный счёт */
.vs-dirs .vs-drow--total .vs-dval.lose{color:var(--sbx-ink)}
.vs-dval.nd{color:var(--sbx-faint);font-size:12px;font-weight:400}
.vs-dirs .vs-dbar{flex:none;height:8px;background:#ececec;border-radius:8px;overflow:hidden;display:flex}
.vs-dbar--a{justify-content:flex-end}
.vs-dirs .vs-dbar i{display:block;height:100%;background:#a9c4f5;border-radius:8px}
.vs-dirs .vs-dbar i.win{background:var(--sbx-blue)}
/* гейт и итог — как в обзоре: пилюля «Допущен» и зелёная полоса итога */
/* в строке допуска только три элемента — сетка своя, иначе название
встаёт в колонку полосы и уезжает от центра */
/* в строке допуска только три элемента — сетка своя. Селектор scoped под
.vs-dirs, иначе его перебьёт пятиколоночная сетка обычной строки. */
.vs-dirs .vs-drow--gate{border-bottom:1px solid var(--sbx-line-2);
grid-template-columns:minmax(0,1fr) 240px minmax(0,1fr)}
.vs-drow--gate .gate{flex:none;white-space:nowrap;font-family:"Montserrat",sans-serif;font-size:11px;font-weight:700;
text-transform:uppercase;letter-spacing:.04em;color:#0d7a53;background:#edfaef;border:1px solid #b8e6c1;
border-radius:8px;padding:4px 10px;justify-self:start}
.vs-drow--gate .gate:last-child{justify-self:end}
/* Итог — не ещё одна строка с рамкой сверху (двойная линия смотрелась грязно),
а тонированная плашка во всю ширину карточки, прижатая к её низу. */
/* .criteria--wide .criterion.is-total из темы даёт линию 2px — перебиваем
селектором той же специфичности, он идёт ниже по файлу */
.vs-dirs .vs-drow.vs-drow--total{border:none;border-top:1px solid var(--sbx-line-2);margin:6px -22px -16px;padding:16px 22px;
background:var(--sbx-grey);border-radius:0 0 15px 15px}
.vs-dirs .vs-drow--total .vs-dname{color:#333;font-weight:600}
/* и обычная, и выигравшая полоса итога — зелёные: победителя тут показывает
сам балл, а не цвет полосы */
.vs-drow--total .vs-dbar i,.vs-drow--total .vs-dbar i.win{background:var(--sbx-green)}
.vs-drow--total .vs-dval{font-size:19px;color:var(--sbx-ink)}
/* ---- отзывы ---- */
.vs-rev{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.vs-rcard{padding:20px 22px}
.vs-rhd{display:flex;align-items:center;gap:12px;margin-bottom:14px;text-decoration:none;color:inherit}
.vs-rhd:hover .n{color:var(--sbx-blue)}
.vs-rscore{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.vs-rhd img{width:74px;height:32px;object-fit:contain}
.vs-rhd .n{font-family:"Montserrat",sans-serif;font-weight:700;font-size:16px;color:var(--sbx-ink);transition:color .15s}
.vs-rball{font-family:"Montserrat",sans-serif;font-weight:800;font-size:22px;color:var(--sbx-ink);line-height:1}
.vs-tone{display:flex;height:10px;border-radius:999px;overflow:hidden;margin-bottom:8px}
.vs-tone i{display:block;height:100%}
.vs-tone .p{background:var(--sbx-green)}.vs-tone .n{background:var(--sbx-amber)}.vs-tone .m{background:var(--sbx-red)}
.vs-tlab{display:flex;gap:14px;font-size:12.5px;color:var(--sbx-faint);margin-bottom:14px}
.vs-rlist{display:flex;flex-direction:column;gap:9px;margin:0;padding:0;list-style:none}
.vs-rlist li{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;color:var(--sbx-body);
border-top:1px solid var(--sbx-line-3);padding-top:9px}
.vs-rlist li:first-child{border-top:0;padding-top:0}
.vs-rlist b{font-weight:600;color:var(--sbx-ink);text-align:right}
/* Кнопка стояла в
и наследовала межстрочный интервал темы — была выше
остальных на 4px. Обычный блок, и все три кнопки одного роста. */
.vs-rev-ft{margin-top:14px}
.vs-rlist li.w b{color:var(--sbx-green-d)}
.vs-rlist li.w b:after{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--sbx-green);margin-left:7px;vertical-align:2px}
/* ---- кому подойдёт ---- */
.vs-fit{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.vs-fcard{padding:20px 22px;display:flex;flex-direction:column}
.vs-fcard h3{font-family:"Montserrat",sans-serif;font-weight:700;font-size:16px;color:var(--sbx-ink);margin:0 0 12px}
/* Тема отбивает списки внутри .page__content на 40px, но только те, у кого
нет класса (.page__content ul:not([class])) — поэтому даём списку класс:
это штатный способ темы отказаться от её оформления, а не борьба важностями.
Маркер — галочка: в карточке перечислены преимущества. */
.vs-flist{margin:0 0 18px;flex:1;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.vs-flist li{position:relative;padding-left:26px;margin:0;font-size:14px;line-height:1.55;color:var(--sbx-body)}
.vs-flist li:before{content:"";position:absolute;left:0;top:4px;width:16px;height:16px;
background:no-repeat center/12px 12px url("data:image/svg+xml;utf8,")}
.vs-fcard-ft{margin-top:auto;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.vs-dom{font-size:13px;color:var(--sbx-blue);text-decoration:none;border-bottom:1px solid rgba(0,82,235,.35)}
.vs-dom:hover{color:#0040bd}
/* ---- внутренние отступы карточек ----
Один размер на все карточки — 22px 24px, как у .sbx-card. Тема даёт
заголовкам и абзацам свои внешние отступы: у h3 сверху 22px, у последнего
абзаца снизу 16px, и padding визуально удваивался. Гасим у крайних детей. */
.vs-fcard,.vs-rcard,.vs-simcard{padding:22px 24px}
/* Класс удвоен намеренно: тема гасит внешние отступы через
`.page__content.page__content h3` (0,2,1), и обычный `.vs-fcard>:first-child`
(0,2,0) ей проигрывает. Удвоение даёт (0,3,0) — тот же приём, что в теме. */
.vs-wrap.vs-wrap .vs-fcard>:first-child,
.vs-wrap.vs-wrap .vs-rcard>:first-child,
.vs-wrap.vs-wrap .vs-simcard>:first-child,
.vs-wrap.vs-wrap .vs-poll>:first-child,
.vs-wrap.vs-wrap .vs-likecol>:first-child{margin-top:0}
.vs-wrap.vs-wrap .vs-fcard>:last-child,
.vs-wrap.vs-wrap .vs-rcard>:last-child,
.vs-wrap.vs-wrap .vs-simcard>:last-child,
.vs-wrap.vs-wrap .vs-poll>:last-child,
.vs-wrap.vs-wrap .vs-likecol>:last-child{margin-bottom:0}
/* ---- опрос ---- */
/* Опрос — тонированная плашка: он не про данные, а про мнение, и не должен
выглядеть как ещё одна карточка с фактами */
.vs-poll{padding:22px 24px;background:var(--sbx-grey);border-radius:var(--sbx-r)}
.vs-poll .q{font-family:"Montserrat",sans-serif;font-weight:700;font-size:16px;color:var(--sbx-ink);margin-bottom:14px}
.vs-pbtns{display:flex;gap:10px;flex-wrap:wrap}
.vs-pbtn{flex:1 1 200px;background:#fff;border:1px solid var(--sbx-line);border-radius:var(--sbx-r-sm);padding:12px 16px;
font-family:"Rubik",sans-serif;font-size:14px;color:var(--sbx-ink);cursor:pointer;text-align:left;position:relative;overflow:hidden;
display:flex;align-items:center;gap:10px;transition:border-color .15s,color .15s}
.vs-pbtn:before{content:"";position:relative;z-index:1;flex:0 0 18px;width:18px;height:18px;border-radius:50%;
background:#fff;border:1.5px solid var(--sbx-line-2);transition:border-color .15s,box-shadow .15s}
.vs-pbtn:hover{border-color:var(--sbx-blue);color:var(--sbx-blue)}
.vs-pbtn:hover:before{border-color:var(--sbx-blue)}
.vs-poll.voted .vs-pbtn.is-mine:before{border-color:var(--sbx-blue);box-shadow:inset 0 0 0 4px var(--sbx-blue)}
.vs-pbtn .fill{position:absolute;left:0;top:0;bottom:0;background:var(--sbx-tint);width:0;transition:width .4s ease}
.vs-pbtn .lb,.vs-pbtn .pc{position:relative;z-index:1}
.vs-pbtn .lb{flex:1;min-width:0}
.vs-pbtn .pc{font-weight:700;color:var(--sbx-ink);font-variant-numeric:tabular-nums}
.vs-poll.voted .vs-pbtn{cursor:default}
/* ---- другие пары ---- */
.vs-more{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.vs-mcard{display:flex;align-items:center;justify-content:center;gap:10px;background:#fff;border:1px solid var(--sbx-line);
border-radius:var(--sbx-r-sm);padding:14px 10px;text-decoration:none;transition:border-color .15s,box-shadow .15s}
.vs-mcard:hover{border-color:var(--sbx-blue);box-shadow:0 6px 18px rgba(0,82,235,.08)}
.vs-mcard img{width:62px;height:26px;object-fit:contain}
.vs-mcard span{font-size:12.5px;color:var(--sbx-faint)}
.vs-wrap .vs-note{font-size:13px;line-height:1.65;color:var(--sbx-mute);margin-top:14px}
.vs-note a{color:var(--sbx-blue)}
/* ---- индекс похожести ---- */
/* Блок стоит в тёмной секции .sbx-ext (компонент со страницы БК): панель и
белая карточка внутри — оттуда же, здесь только раскладка и перекраска.
Правила ниже намеренно scoped под .sbx-ext — иначе их перебьют светлые
объявления .vs-sim*, идущие следом. */
.vs-sim{display:grid;grid-template-columns:300px minmax(0,1fr);gap:0;overflow:hidden;
background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--sbx-r)}
.sbx-ext .vs-simhead{border-right-color:rgba(255,255,255,.14)}
.sbx-ext .vs-ring .track{stroke:rgba(255,255,255,.18)}
.sbx-ext .vs-ring .val{stroke:#fff}
.sbx-ext .vs-ring .v{color:#fff}
.sbx-ext .vs-simcap b{color:#fff}
.sbx-ext .vs-simcap p{color:rgba(255,255,255,.62)}
.sbx-ext .vs-simrow{border-top-color:rgba(255,255,255,.14)}
.sbx-ext .vs-simrow .n{color:rgba(255,255,255,.86)}
.sbx-ext .vs-simrow .tr{background:rgba(255,255,255,.16)}
.sbx-ext .vs-simrow .tr i{background:#fff}
.sbx-ext .vs-simrow.lo .tr i{background:rgba(255,255,255,.4)}
.sbx-ext .vs-simrow .p{color:#fff}
.sbx-ext .vs-simcard{background:#fff;border-radius:14px;color:var(--sbx-ink)}
.vs-wrap .vs-note--dark{color:rgba(255,255,255,.72)}
.vs-wrap .vs-note--dark a{color:#9dbcff}
.vs-simhead{padding:24px 26px;border-right:1px solid var(--sbx-line-3);display:flex;flex-direction:column;
align-items:center;text-align:center;gap:14px}
.vs-ring{position:relative;width:150px;height:150px;flex:0 0 150px}
.vs-ring svg{transform:rotate(-90deg);display:block;width:100%;height:100%}
.vs-ring .track{stroke:var(--sbx-line-2)}
.vs-ring .val{stroke:var(--sbx-blue);stroke-linecap:round;transition:stroke-dashoffset .5s ease}
.vs-ring .v{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
font-family:"Montserrat",sans-serif;font-weight:800;font-size:34px;color:var(--sbx-ink);letter-spacing:-.02em}
.vs-simcap b{display:block;font-family:"Montserrat",sans-serif;font-weight:700;font-size:16px;color:var(--sbx-ink);margin-bottom:6px}
.vs-simcap p{font-size:13px;line-height:1.55;color:var(--sbx-mute);margin:0}
.vs-simrows{padding:18px 26px 20px}
.vs-simrow{display:grid;grid-template-columns:190px minmax(0,1fr) 46px;align-items:center;gap:14px;
padding:7px 0;border-top:1px solid var(--sbx-line-3)}
.vs-simrow:first-child{border-top:0}
.vs-simrow .n{font-size:13.5px;color:var(--sbx-body);line-height:1.3}
.vs-simrow .tr{height:9px;background:var(--sbx-line-2);border-radius:999px;overflow:hidden}
.vs-simrow .tr i{display:block;height:100%;background:var(--sbx-blue);border-radius:999px;
transition:width .5s ease}
/* низкая похожесть — не «плохо», поэтому не красный: просто бледнее */
.vs-simrow.lo .tr i{background:#a9c4f5}
.vs-simrow .p{font-family:"Montserrat",sans-serif;font-weight:700;font-size:14px;color:var(--sbx-ink);
text-align:right;font-variant-numeric:tabular-nums}
.vs-simsum{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.vs-simcard{padding:18px 22px}
.vs-simcard h3{font-family:"Montserrat",sans-serif;font-weight:700;font-size:15px;color:var(--sbx-ink);margin:0 0 10px;
display:flex;align-items:center;gap:10px}
/* Вместо точки — знак: «=» у сходств и «≠» у различий. Плашка со скруглением
и тонированным фоном — тот же приём, что у пилюли «Допущен» в методике. */
.vs-simcard h3:before{content:"";flex:0 0 26px;width:26px;height:26px;border-radius:var(--sbx-r-xs);
background:var(--sbx-tint) no-repeat center/15px 15px;
background-image:url("data:image/svg+xml;utf8,")}
.vs-simcard--diff h3:before{background-color:#eef1f5;
background-image:url("data:image/svg+xml;utf8,")}
.vs-simcard p{font-size:14px;line-height:1.6;color:var(--sbx-body);margin:0}
/* Ссылка на блок похожести — не кнопка: обычная ссылка с подчёркиванием,
как «По 15 критериям» в шапке обзора (.hero-score__link из темы). */
.vs-simlink{display:inline-block;margin-top:14px;font-size:13.5px}
.vs-simlink b{font-weight:600}
/* ---- похожие букмекеры (этот же блок ставится на страницу БК) ---- */
.vs-like{display:grid;grid-template-columns:1fr 1fr;gap:16px}
/* Списки похожих — без карточки: они и так разделены колонками и линейками */
.vs-likecol{padding:0}
.vs-wrap.vs-wrap .vs-likecol > h3,
.page__content .vs-likecol > h3 {
font-family: "Montserrat", sans-serif;
font-weight: 700;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--sbx-mute);
margin: 0 0 12px;
}
.vs-likerow{display:grid;grid-template-columns:78px minmax(0,1fr) auto;align-items:center;gap:12px;
padding:11px 0;border-top:1px solid var(--sbx-line-3);text-decoration:none}
.vs-likerow:first-of-type{border-top:0}
.vs-likerow:hover .nm{color:var(--sbx-blue)}
.vs-likerow img{width:78px;height:30px;object-fit:contain}
/* у части контор логотипа в медиатеке нет — ставим имя, а не битую картинку */
.vs-nologo{display:flex;align-items:center;justify-content:center;width:78px;height:30px;border-radius:var(--sbx-r-xs);
background:var(--sbx-grey);color:var(--sbx-body);font-size:11px;text-align:center;line-height:1.15;padding:0 4px}
.vs-likerow .nm{font-family:"Montserrat",sans-serif;font-weight:700;font-size:14px;color:var(--sbx-ink);
transition:color .15s;display:block}
.vs-likerow .by{font-size:12.5px;color:var(--sbx-faint);line-height:1.35;margin-top:2px;display:block}
.vs-likerow .pc{font-family:"Montserrat",sans-serif;font-weight:800;font-size:15px;color:var(--sbx-blue);
font-variant-numeric:tabular-nums}
@media (max-width:980px){
.vs-sim{grid-template-columns:1fr}
.vs-simhead{border-right:0;border-bottom:1px solid var(--sbx-line-3);flex-direction:row;text-align:left;gap:18px}
/* В тёмной секции — тот же светло-серый тон, что у рамки самой панели */
.sbx-ext .vs-simhead{border-bottom-color:rgba(255,255,255,.14)}
.vs-simcap{flex:1}
.vs-simsum,.vs-like{grid-template-columns:1fr}
.vs-simrow{grid-template-columns:minmax(0,1fr) 46px;grid-template-areas:"n p" "tr tr";row-gap:5px}
.vs-simrow .n{grid-area:n}.vs-simrow .p{grid-area:p}.vs-simrow .tr{grid-area:tr}
}
@media (max-width:620px){
.vs-simhead{flex-direction:column;text-align:center}
.vs-ring{width:118px;height:118px;flex-basis:118px}
.vs-ring .v{font-size:27px}
}
@media (max-width:980px){
.vs-verdict{grid-template-columns:1fr}
/* На узком экране строка складывается в три ряда: название, два балла,
две полосы. Прежняя раскладка растягивала полосу одной стороны на две
колонки, и шкалы получались разной длины. */
.vs-dirs{padding:8px 14px 12px}
.vs-dirs .vs-drow{grid-template-columns:1fr 1fr;grid-template-areas:"name name" "a b" "abar bbar";
row-gap:6px;column-gap:12px;padding:11px 0}
.vs-dirs .vs-dname{grid-area:name;font-size:13px}
.vs-dirs .vs-dval--a{grid-area:a}
.vs-dirs .vs-dval--b{grid-area:b}
.vs-dirs .vs-dbar--a{grid-area:abar}
.vs-dirs .vs-dbar--b{grid-area:bbar}
.vs-dirs .vs-drow--gate{grid-template-columns:1fr 1fr;grid-template-areas:"name name" "a b";row-gap:10px}
.vs-dirs .vs-drow--gate .vs-dname{grid-area:name}
.vs-dirs .vs-drow--gate .gate:first-of-type{grid-area:a;justify-self:start}
.vs-dirs .vs-drow--gate .gate:last-of-type{grid-area:b;justify-self:end}
.vs-dirs .vs-drow--total{margin:6px -14px -12px;padding:14px}
.vs-rev,.vs-fit{grid-template-columns:1fr}
.vs-more{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
}
/* =====================================================================
ДОСТУПНОСТЬ И МЕЛОЧИ ИНТЕРФЕЙСА
===================================================================== */
/* Якоря. Шапка сайта НЕ липкая, поэтому отступ считается не от неё, а от
нашей VS-панели: она фиксирована сверху и перекрыла бы заголовок цели.
63px — её высота на десктопе, 81px — на мобильных (две строки). */
.vs-wrap [id]{scroll-margin-top:84px}
@media (max-width:700px){ .vs-wrap [id]{scroll-margin-top:100px} }
/* Кольцо фокуса для новых компонентов: у темы оно есть у своих (.sbx-chip,
.btn и т.д.), у наших — не было, а браузерное сбивалось скруглениями. */
.vs-wrap .vs-pbtn:focus-visible,.vs-wrap .vs-mcard:focus-visible,
.vs-wrap .vs-likerow:focus-visible,.vs-wrap .vs-simlink:focus-visible,
.vs-wrap .vs-dom:focus-visible,.vs-wrap .vs-rhd:focus-visible,
.bk-cmp__btn:focus-visible,.bk-cmp__random:focus-visible,
.bk-cmp__toggle:focus-visible,.bk-cmp__replay:focus-visible,
.bk-cmp__review:focus-visible{outline:2px solid var(--sbx-blue);outline-offset:2px;border-radius:var(--sbx-r-xs)}
/* внутри синей арены и тёмного блока синее кольцо не видно — берём белое */
.bk-cmp__arena .bk-cmp__btn:focus-visible,.bk-cmp__select:focus-visible,
.sbx-ext .vs-simlink:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* Двойной тап на мобильных не должен зумить кнопки и карточки */
.vs-wrap .vs-pbtn,.vs-wrap .vs-mcard,.vs-wrap .vs-likerow,.vs-wrap .btn,
.bk-cmp__btn,.bk-cmp__random,.bk-cmp__toggle,.bk-cmp__replay,
.bk-cmp__select,.bk-cmp__preset{touch-action:manipulation}
/* Заголовки не должны ломаться «висячей» строкой из одного слова */
.vs-wrap .vs-fcard>h3,.vs-wrap .vs-simcard>h3,.vs-wrap .vs-likecol>h3,
.vs-wrap .vs-poll .q{text-wrap:balance}
p.vs-note {
font-size: 13px;
line-height: 1.65;
color: var(--sbx-mute);
margin-top: 14px;
}