/*
 * Cryptonisation — раздел «Биржи» (прототип).
 * Палитра выверена по скриншотам cryptonisation.com.
 * Стили пишутся поверх Tailwind CDN, используем `!` только локально там, где нужно перебить дефолты.
 */

/* ---------------- Переменные и базовая типографика ---------------- */

:root {
    --primary: #1E40AF;
    --primary-hover: #1B3999;
    --primary-soft: #EEF2F9;
    --success: #22C55E;
    --success-hover: #16A34A;
    --danger: #DC2626;
    --warning: #F59E0B;
    --bg: #FFFFFF;
    --surface: #F9FAFB;
    --surface-2: #F3F4F6;
    --border: #E5E7EB;
    --border-strong: #D1D5DB;
    --text: #111827;
    --text-muted: #6B7280;
    --topbar: #0B0E13;
    --gold: #F59E0B;
    --radius: 14px;
    --radius-sm: 10px;
    --radius-lg: 20px;
    --shadow-sm: 0 1px 2px rgba(17,24,39,0.04), 0 1px 3px rgba(17,24,39,0.06);
    --shadow-md: 0 4px 12px rgba(17,24,39,0.06), 0 2px 4px rgba(17,24,39,0.04);
    --shadow-lg: 0 12px 32px rgba(17,24,39,0.10), 0 4px 8px rgba(17,24,39,0.04);
    --transition: 180ms cubic-bezier(.4,0,.2,1);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--text);
    background: var(--bg);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
}

a {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}
a:hover { color: var(--primary-hover); }
a.no-underline { text-decoration: none; }

h1, h2, h3, h4 { color: var(--text); font-weight: 700; line-height: 1.15; margin: 0; }
h1 { font-size: 56px; font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: 28px; }
h3 { font-size: 20px; }
h4 { font-size: 16px; }

p { margin: 0 0 12px 0; }

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ---------------- Top bar (тонкая чёрная полоса) ---------------- */

.topbar {
    background: var(--topbar);
    color: #E5E7EB;
    font-size: 13px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: 36px;
}
.topbar__left { display: flex; align-items: center; gap: 8px; }
.topbar__label { color: #9CA3AF; }
.topbar__email { color: #E5E7EB; text-decoration: none; }
.topbar__email:hover { color: #fff; }

.topbar__right { display: flex; align-items: center; gap: 14px; }
.topbar__icon { color: #9CA3AF; display: inline-flex; align-items: center; }
.topbar__icon:hover { color: #fff; }
.topbar__divider { width: 1px; height: 18px; background: rgba(255,255,255,.15); }
.topbar__link { color: #E5E7EB; text-decoration: none; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
.topbar__link:hover { color: #fff; }
.topbar__link::before { content: '→'; opacity: .5; }
.topbar__cta {
    display: inline-block;
    padding: 5px 14px;
    background: #1F2937;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 999px;
    color: #fff;
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
}
.topbar__cta:hover { background: #374151; color: #fff; }

@media (max-width: 767px) {
    .topbar__label { display: none; }
    .topbar__link { display: none; }
    .topbar__divider { display: none; }
}

/* ---------------- Header ---------------- */

.header {
    background: #fff;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 50;
}
.header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    height: 72px;
}
.logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text);
    font-weight: 700;
}
.logo__mark {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--success);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(34,197,94,.28);
}
.logo__text { font-size: 19px; letter-spacing: -0.01em; }
.logo--dark .logo__text { color: #fff; }

.nav {
    display: flex;
    align-items: center;
    gap: 4px;
}
.nav-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 14px;
    border-radius: 8px;
    color: var(--text);
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    transition: background var(--transition), color var(--transition);
}
.nav-link:hover { background: var(--surface-2); color: var(--text); }
.nav-link--active { color: var(--primary); }
.nav-link__chevron { font-size: 10px; opacity: .55; }

.burger {
    display: none;
    background: transparent;
    border: 0;
    width: 40px;
    height: 40px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    padding: 0;
}
.burger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--text);
    border-radius: 1px;
    transition: transform var(--transition), opacity var(--transition);
}
.burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
    display: none;
    flex-direction: column;
    padding: 0 20px 12px;
    gap: 0;
    border-top: 1px solid var(--border);
}
.mobile-nav .nav-link {
    padding: 14px 6px;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
}
.mobile-nav.is-open { display: flex; }

@media (max-width: 899px) {
    .nav { display: none; }
    .burger { display: flex; }
}

/* ---------------- Breadcrumbs ---------------- */

.crumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text-muted);
    padding: 16px 0;
    flex-wrap: wrap;
}
.crumbs a { color: var(--text-muted); text-decoration: none; }
.crumbs a:hover { color: var(--primary); text-decoration: underline; }
.crumbs__sep { color: var(--border-strong); }
.crumbs__current { color: var(--text); font-weight: 500; }

/* ---------------- Buttons ---------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 20px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    border: 0;
    cursor: pointer;
    transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
    white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary   { background: var(--primary); color: #fff; }
.btn--primary:hover { background: var(--primary-hover); color: #fff; }

.btn--success   { background: var(--success); color: #fff; box-shadow: 0 1px 2px rgba(34,197,94,.25); }
.btn--success:hover { background: var(--success-hover); color: #fff; }

.btn--ghost     { background: transparent; color: var(--primary); border: 1px solid var(--primary); }
.btn--ghost:hover { background: var(--primary-soft); color: var(--primary); }

.btn--outline   { background: #fff; color: var(--text); border: 1px solid var(--border-strong); }
.btn--outline:hover { border-color: var(--primary); color: var(--primary); }

.btn--sm { padding: 7px 14px; font-size: 13px; }

/* Cтилизация ссылки как «link» */
.link {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 500;
}
.link:hover { color: var(--primary-hover); }

/* ---------------- Chips / Badges ---------------- */

.chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    background: var(--surface-2);
    color: var(--text);
    border: 1px solid var(--border);
}
.chip--por   { background: transparent; color: #15803D; border-color: #86EFAC; }
.chip--muted { background: #F3F4F6; color: var(--text-muted); }
.chip--info  { background: #DBEAFE; color: #1E40AF; border-color: #BFDBFE; }
.chip--warn  { background: #FEF3C7; color: #92400E; border-color: #FDE68A; }

/* Большой pill-chip с иконкой слева — для блоков exchange.html «Пополнение/вывод»,
   «Функции и продукты», «Платформы». Высота 32px, см. TASKS-v6.md ~строки 471-477. */
.chip--lg {
    height: 32px;
    padding: 0 12px;
    gap: 6px;
    font-size: 13px;
    line-height: 1.2;
    background: #fff;
    color: var(--text);
    border: 1px solid var(--border);
}
.chip--lg .chip__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    line-height: 1;
}
.chip--lg .chip__icon svg { width: 16px; height: 16px; }

/* Ряд chips с переносом. chip-row--labeled — с inline-подписью слева
   («Пополнение:» / «Вывод:») когда списки методов различаются. */
.chip-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.chip-row + .chip-row { margin-top: 10px; }
.chip-row__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    margin-right: 2px;
}

.ed-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}
.badge--gold  { background: transparent; color: #92400E; border: 1.5px solid #F59E0B; }
.badge--blue  { background: transparent; color: #1E40AF; border: 1.5px solid #BFDBFE; }
.badge--green { background: transparent; color: #15803D; border: 1.5px solid #86EFAC; }

.inc-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 6px;
    background: #FEF2F2;
    color: #991B1B;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid #FECACA;
}

/* ---------------- Logo placeholder биржи ---------------- */

.ex-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-weight: 800;
    letter-spacing: -0.02em;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}

/* ---------------- Rating bar (10 сегментов) ---------------- */

.rb { display: inline-flex; align-items: center; gap: 8px; }
.rb__bars { display: inline-flex; gap: 3px; }
.rb__seg {
    width: 11px;
    height: 24px;
    border-radius: 3px;
    background: #E5E7EB;
}
.rb__seg--on { background: var(--success); }
.rb__num { font-weight: 800; color: var(--text); font-size: 26px; line-height: 1; }
.rb__info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
    color: var(--text-muted);
    font-size: 10px;
    font-style: italic;
    cursor: help;
}

/* ---------------- Stars ---------------- */

.stars { display: inline-flex; gap: 2px; font-size: var(--star-size, 16px); line-height: 1; color: #F59E0B; }
.star--empty { color: #E5E7EB; }
.star--half {
    background: linear-gradient(90deg, #F59E0B 50%, #E5E7EB 50%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ---------------- Stat ---------------- */

.stat .stat__label { font-size: 12px; color: var(--text-muted); margin-bottom: 2px; }
.stat .stat__val { font-size: 17px; font-weight: 700; color: var(--text); }
.stat--mini .stat__val { font-size: 15px; }

/* ---------------- Method icons / Feature icons ---------------- */

.mico, .fico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--surface);
    color: var(--text-muted);
    border: 1px solid var(--border);
    transition: color var(--transition), background var(--transition);
}
.mico:hover, .fico:hover { color: var(--primary); background: var(--primary-soft); }
.ex-card__icons { display: inline-flex; gap: 4px; align-items: center; }

/* ---------------- Exchange Card ---------------- */

/* v5: строка таблицы (десктоп). Каждая .ex-card--row = grid с теми же колонками
   что и шапка (var(--ex-cols)). Вся строка кликабельна → exchange.html?slug=…
   Кат «Подробнее» рендерится как 10-я полная колонка (grid-column: 1 / -1). */
.ex-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 16px;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition), background-color var(--transition);
}
.ex-card--row {
    display: grid;
    grid-template-columns: var(--ex-cols);
    gap: 12px;
    align-items: center;
    cursor: pointer;
}
.ex-card--row:hover { background: var(--surface, #F8FAFC); }
.ex-card--row:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }

.ex-card__cell { min-width: 0; display: flex; align-items: center; }
.ex-card__cell--pos { font-size: 16px; font-weight: 700; color: var(--text); justify-content: center; }
.ex-card__cell--name { gap: 10px; }
.ex-card__cell--rating { justify-content: flex-start; }
.ex-card__cell--rating .rs__num { font-size: 22px; }
.ex-card__cell--fees { font-size: 13px; font-weight: 600; color: var(--text); }
.ex-card__fees-pair { white-space: nowrap; }
.ex-card__cell--pairs { font-size: 14px; font-weight: 600; color: var(--text); justify-content: flex-end; }
.ex-card__cell--vol { flex-wrap: wrap; gap: 6px; font-size: 13px; }
.ex-card__cell--reviews .link { font-size: 13px; }
.ex-card__cell--avail { font-size: 13px; }
.ex-card__cell--actions { gap: 12px; justify-content: flex-end; }
.ex-card__cell--badges { grid-column: 2 / -1; }

.ex-card__name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ex-card__avail {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--text);
    font-weight: 500;
    font-size: 13px;
}
.ex-card__avail svg { color: #15803D; }
.ex-card__avail--bad svg { color: #DC2626; }

.ex-card__volume-delta.up   { color: var(--success-hover); font-weight: 600; font-size: 13px; }
.ex-card__volume-delta.down { color: var(--danger); font-weight: 600; font-size: 13px; }

/* Старые блоки .ex-card__left / __center / __right — сохраняем минимум, на случай
   если ещё где-то используются (Похожие/Сравнить). На rating.html больше не применяются. */
.ex-card__row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ex-card__reviews { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-muted); }

.ex-card__compare {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 8px;
    background: transparent;
    border: 0;
    color: var(--text-muted);
    font-size: 13px;
    cursor: pointer;
    font-weight: 500;
    transition: background var(--transition), color var(--transition);
}
.ex-card__compare:hover { background: var(--surface); color: var(--text); }
.ex-card__compare.is-added { color: var(--primary); font-weight: 600; }
.ex-card__compare.is-added::after { content: '✓'; }

/* ---- Toggle-кнопка весов ⚖ (замена текстовой «Сравнить» везде на сайте) ---- */
.compare-toggle {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 8px;
    line-height: 1;
    transition: background var(--transition);
}
.compare-toggle:hover { background: var(--surface); }
.compare-toggle .ic { width: 18px; height: 18px; stroke: var(--text-muted); }
.compare-toggle__label {
    font-size: 13px;
    color: var(--text-muted);
    white-space: nowrap;
    font-weight: 500;
}
.compare-toggle.is-added .ic { stroke: var(--primary); fill: var(--primary-soft); }
.compare-toggle.is-added .compare-toggle__label { color: var(--primary); font-weight: 600; }

/* --- мобильная карточка --- */
.ex-card--mini {
    display: block;
    padding: 12px 14px;
}
.ex-card--mini .ex-card__name-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.ex-card--mini .ex-card__name {
    font-size: 15px;
    font-weight: 600;
}
.ex-card--mini .ex-card__pos {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    min-width: 22px;
    text-align: center;
}
/* v5: mini-карточка целиком кликабельна (data-href), но без overlay — клик слушает rating.js */
.ex-card--mini { cursor: pointer; }
.ex-card--mini:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.ex-card--mini .ex-card__badges { margin-bottom: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.ex-card--mini .ex-card__row--main {
    gap: 12px;
    margin-bottom: 10px;
}
.ex-card--mini .ex-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 8px;
    border-top: 1px dashed var(--border);
}
.ex-card--mini .ex-card__expandable {
    margin-top: 8px;
    padding-top: 10px;
}
.ex-card__mini-fees, .ex-card__mini-pairs {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
}

/* --- Цветная оценка (карточка рейтинга) --- */
.rs { display: inline-flex; align-items: baseline; gap: 5px; }
.rs__num { font-size: 32px; font-weight: 800; line-height: 1; }
.rs__max { font-size: 13px; color: var(--text-muted); font-weight: 500; }
.rs__info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
    color: var(--text-muted);
    font-size: 10px;
    font-style: italic;
    cursor: help;
    flex-shrink: 0;
    align-self: center;
}
/* ---- ⓘ-tooltip-значок (единый стиль для всего сайта, аналогично .rs__info) ---- */
.ttip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
    color: var(--text-muted);
    font-size: 10px;
    font-style: italic;
    cursor: help;
    flex-shrink: 0;
    align-self: center;
}
.ex-card__row--main { gap: 18px; align-items: center; flex-wrap: wrap; }
.ex-card__reviews-link { font-size: 13px; color: var(--text-muted); white-space: nowrap; }
.ex-card__vol { font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; }

/* --- expand кнопка / секция --- */
.ex-card__expand-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    background: transparent;
    border: 0;
    padding: 0;
    font-size: 13px;
    color: var(--primary);
    cursor: pointer;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.ex-card__expand-btn:hover { color: var(--primary-hover); }
.ex-card__expand-chev { display: inline-block; transition: transform 200ms; }
.ex-card__expand-btn.is-open .ex-card__expand-chev { transform: rotate(180deg); }

.ex-card__expandable { display: none; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); }
.ex-card__expandable.is-open { display: block; }
/* v5: в табличной строке expandable занимает всю ширину под основной строкой */
.ex-card--row .ex-card__expandable { grid-column: 1 / -1; }

.ex-card__por-text { font-size: 13px; color: #15803D; font-weight: 500; display: inline-flex; align-items: center; gap: 4px; }
.ex-card__por-text--no { color: var(--text-muted); }
.ex-card__por-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
    color: var(--text-muted);
    font-size: 9px;
    font-style: italic;
    cursor: help;
}

/* v4 п.2: PoR + Способы пополнения + Функции — в одну горизонтальную полосу на десктопе.
   Каждая группа — компактный inline-блок (label сверху над иконками). При нехватке ширины
   переносим через flex-wrap. Мобильно ведут себя естественно (см. media-query ниже). */
.ex-card__under-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 18px;
    margin-top: 12px;
}
.ex-card__under-row .ex-card__por-text {
    align-self: center;
    padding-top: 0;
}

/* Группы иконок под катом — с заголовками над каждой группой (v2 п.5) */
.ex-card__icon-group {
    margin-top: 0;
}
.ex-card__icon-group-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 4px;
    font-weight: 600;
}
.ex-card__icon-group-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

/* --- ссылки под кнопкой зарегистрироваться --- */
.ex-card__links-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 4px;
}
.ex-card__link-about {
    font-size: 13px;
    color: var(--text-muted);
    text-decoration: none;
    font-weight: 500;
}
.ex-card__link-about:hover { color: var(--primary); text-decoration: underline; }

@media (max-width: 899px) {
    /* mobile: на rating.html карточки .ex-card--mini идут списком,
       старая grid-разметка десктопа неактуальна, шапка скрывается из JS. */
    .ex-card { padding: 14px; }
}

/* ---------------- Toast ---------------- */

#toast-root {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-end;
    pointer-events: none;
}
.toast {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 260px;
    max-width: 380px;
    background: #fff;
    color: var(--text);
    border: 1px solid var(--border);
    border-left: 4px solid var(--primary);
    padding: 12px 16px;
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
    transform: translateY(8px);
    opacity: 0;
    transition: opacity var(--transition), transform var(--transition);
    pointer-events: auto;
    font-size: 14px;
}
.toast--show { opacity: 1; transform: translateY(0); }
.toast--success { border-left-color: var(--success); }
.toast--warn    { border-left-color: var(--warning); }
.toast--error   { border-left-color: var(--danger); }
.toast--info    { border-left-color: var(--primary); }
.toast__icon::before { content: 'ℹ'; font-weight: 700; }
.toast--success .toast__icon::before { content: '✓'; color: var(--success-hover); }
.toast--warn .toast__icon::before    { content: '⚠'; color: var(--warning); }
.toast--error .toast__icon::before   { content: '✕'; color: var(--danger); }

/* ---------------- Compare floater ---------------- */

#compare-floater {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 150;
}
.floater {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    background: var(--primary);
    color: #fff;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    box-shadow: var(--shadow-lg);
    transition: transform var(--transition), background var(--transition);
}
.floater:hover { background: var(--primary-hover); transform: translateY(-2px); color: #fff; }
.floater b { font-weight: 800; }
.floater__arrow { opacity: .8; }

/* ---------------- Presets (7 интент-пресетов) ---------------- */

.presets {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}
.preset {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
    white-space: nowrap;
}
.preset:hover {
    border-color: var(--primary);
    color: var(--primary);
}
.preset--active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}
.preset--active:hover { color: #fff; background: var(--primary-hover); }

/* ---------------- Filter panel ---------------- */

.filter-panel {
    background: var(--primary-soft);
    border-radius: var(--radius);
    padding: 16px 18px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    margin-bottom: 18px;
}

/* Шапка внутри drawer-а — видна только на мобайле */
.filter-panel__drawer-head { display: none; }

/* Мобильный триггер — скрыт на десктопе */
.filter-trigger { display: none; }

/* Подложка drawer-а — скрыта на десктопе */
.drawer-backdrop { display: none; }
.fp__row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    flex: 1 1 auto;
}
.fp__actions {
    display: flex;
    gap: 10px;
    align-items: center;
}
.fp__toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    background: #fff;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
    user-select: none;
    transition: border-color var(--transition), background var(--transition);
}
.fp__toggle:hover { border-color: var(--border-strong); }
.fp__toggle input { margin: 0; accent-color: var(--primary); }
.fp__toggle:has(input:checked) {
    background: #E0EAFB;
    border-color: var(--primary);
    color: var(--primary);
    font-weight: 600;
}

/* ---------------- Filter dropdowns ---------------- */

.fdd {
    position: relative;
}
.fdd__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid transparent;
    color: var(--text);
    font-size: 13px;
    cursor: pointer;
    transition: border-color var(--transition);
    white-space: nowrap;
    min-width: 160px;
    justify-content: space-between;
}
.fdd__btn:hover { border-color: var(--border-strong); }
.fdd.is-open .fdd__btn { border-color: var(--primary); }
.fdd__label { display: inline-flex; align-items: center; gap: 4px; }
.fdd__label b { font-weight: 600; color: var(--text); }
.fdd__counter {
    display: none;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    align-items: center;
    justify-content: center;
    margin-left: 4px;
}
.fdd__counter[data-count]:not([data-count="0"]) { display: inline-flex; }
.fdd__chev { color: var(--text-muted); font-size: 10px; transition: transform var(--transition); }
.fdd.is-open .fdd__chev { transform: rotate(180deg); }

.fdd__panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 40;
    min-width: 240px;
    max-height: 340px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    padding: 8px;
    display: none;
}
.fdd.is-open .fdd__panel { display: block; animation: fadeIn 160ms ease both; }

.fdd__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    user-select: none;
    transition: background var(--transition);
}
.fdd__item:hover { background: var(--surface-2); }
.fdd__item input { margin: 0; accent-color: var(--primary); }
.fdd__item input[type="radio"] { accent-color: var(--primary); }
.fdd__item-flag { font-size: 16px; line-height: 1; }
.fdd__item-label { flex: 1; }

.fdd__panel--sort {
    min-width: 280px;
    right: 0;
    left: auto;
}
.sort-opt {
    display: block;
    width: 100%;
    text-align: left;
    padding: 9px 12px;
    background: transparent;
    border: 0;
    border-radius: 8px;
    font-size: 14px;
    color: var(--text);
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}
.sort-opt:hover { background: var(--surface-2); }
.sort-opt--active { color: var(--primary); font-weight: 600; background: var(--primary-soft); }

/* ---------------- Sort bar ---------------- */

.sort-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 2px 16px;
    gap: 16px;
    flex-wrap: wrap;
}
.sort-bar__count { font-weight: 600; color: var(--text); font-size: 15px; }
.sort-bar__count #ex-count-word { color: var(--text-muted); font-weight: 400; margin-left: 2px; font-size: 14px; }
.sort-bar__right { display: flex; align-items: center; gap: 10px; }
.sort-bar__label { color: var(--text-muted); font-size: 14px; }
/* v5: вместо dropdown под счётчиком справа — мелкая подсказка про клик по колонкам */
.sort-bar__hint { color: var(--text-muted); font-size: 13px; }
@media (max-width: 767px) { .sort-bar__hint { display: none; } }
.fdd__btn--sort {
    min-width: 210px;
    background: #fff;
    border: 1px solid var(--border);
}

/* Кнопка переключения направления сортировки ↓/↑ (FIXES #5). */
.sort-dir {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #fff;
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition), color var(--transition);
    user-select: none;
}
.sort-dir:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.sort-dir:active { transform: translateY(1px); }

/* Скрываем кнопку «Показать» на десктопе — фильтры и так применяются live (FIXES #3).
   На мобайле кнопка остаётся, внутри drawer-а работает как «Готово». */
@media (min-width: 768px) {
    #btn-apply { display: none; }
}

/* ---------------- Exchange list + анимации ---------------- */

.ex-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
/* v5: на десктопе список — таблица (.ex-list--table). Карточки прижаты друг к другу
   (gap 0), общая шапка сверху. На mobile (.ex-list--cards) — обычный список карточек. */
.ex-list--table { gap: 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); background: #fff; }
.ex-list--table .ex-card--row { border-radius: 0; border-left: 0; border-right: 0; border-top: 0; }
.ex-list--table .ex-card--row:first-of-type { border-top: 0; }
.ex-list--table .ex-card--row:last-of-type { border-bottom: 0; }

.ex-list .ex-card { animation: exIn 260ms cubic-bezier(.4,0,.2,1) both; }
.ex-list.is-swapping .ex-card { opacity: 0; transform: translateY(6px); transition: opacity 160ms, transform 160ms; }

/* --- v5 ширины колонок таблицы рейтинга (единые для шапки и строк) --- */
:root {
    --ex-cols: 36px minmax(180px, 1.4fr) 90px 140px minmax(160px, 1.2fr) 80px minmax(140px, 1fr) 200px;
}
.ex-thead {
    display: grid;
    grid-template-columns: var(--ex-cols);
    gap: 12px;
    align-items: center;
    padding: 10px 16px;
    margin-top: 16px; /* v5: отступ от фильтров (счётчик/подсказка удалены) */
    background: var(--surface, #F8FAFC);
    border: 1px solid var(--border);
    border-bottom: 0;
    border-radius: var(--radius) var(--radius) 0 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ex-thead[hidden] + .ex-list { margin-top: 16px; }
.ex-thead__cell { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.ex-thead__cell--rating { justify-content: flex-start; }
.ex-thead__cell--pairs { justify-content: flex-end; }
.ex-thead__cell--actions { justify-content: flex-end; }
.ex-thead__cell--sortable {
    background: transparent;
    border: 0;
    padding: 0;
    color: var(--text-muted);
    font: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    cursor: pointer;
    transition: color var(--transition);
}
.ex-thead__cell--sortable:hover { color: var(--text); }
.ex-thead__cell--sortable.is-active { color: var(--primary); }
.ex-thead__sort-ico { font-size: 11px; color: var(--text-muted); }
.ex-thead__sort-ico--active { color: var(--primary); }
.ex-thead__info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
    color: var(--text-muted);
    font-size: 9px;
    font-style: italic;
    cursor: help;
    margin-left: 4px;
    text-transform: none;
}
/* Когда шапка скрыта (mobile) — список без верхнего border-radius/border-top компенсации */
.ex-list--cards { border: 0; }

@keyframes exIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------------- Empty state ---------------- */

.empty-state {
    padding: 48px 24px;
    text-align: center;
    background: var(--surface);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
    color: var(--text-muted);
}
.empty-state__icon { font-size: 42px; margin-bottom: 8px; }
.empty-state h3 { color: var(--text); margin-bottom: 8px; }
.empty-state p { margin-bottom: 18px; }

/* ---------------- Editorial block ---------------- */

.editorial {
    margin-top: 44px;
    padding: 28px 32px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.editorial h2 { margin-bottom: 14px; font-size: 24px; }
.editorial p { color: var(--text); line-height: 1.65; margin-bottom: 12px; }
.editorial__foot { color: var(--text-muted); font-size: 14px; }

@media (max-width: 899px) {
    .filter-panel { padding: 14px; }
    .fp__actions { width: 100%; }
    .fp__actions .btn { flex: 1; }
    .fdd__btn { min-width: 0; }
    .fdd__panel { min-width: 220px; max-width: calc(100vw - 40px); }
    .fdd__panel--sort { right: auto; left: 0; }
    .editorial { padding: 20px 18px; }
    .sort-bar__right { width: 100%; }
    .fdd--sort { flex: 1; }
    .fdd__btn--sort { width: 100%; }
    .sort-dir { width: 36px; height: 36px; flex-shrink: 0; }
}

/* ---------------- Mobile filter drawer (rating.html) ---------------- */

@media (max-width: 767px) {
    /* Триггер вместо панели */
    .filter-trigger {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 13px 16px;
        background: var(--primary-soft);
        border: 1px solid #BFDBFE;
        border-radius: 12px;
        font-family: inherit;
        font-size: 14px;
        font-weight: 600;
        color: var(--primary);
        cursor: pointer;
        margin-bottom: 14px;
        transition: background var(--transition);
    }
    .filter-trigger:hover { background: #E0EAFB; }
    .filter-trigger__label { display: inline-flex; align-items: center; gap: 10px; }
    .filter-trigger__ico { font-size: 16px; }
    .filter-trigger__count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 22px;
        height: 22px;
        padding: 0 7px;
        border-radius: 999px;
        background: var(--primary);
        color: #fff;
        font-size: 11px;
        font-weight: 700;
    }
    .filter-trigger__count[hidden] { display: none; }
    .filter-trigger__chev {
        font-size: 12px;
        transition: transform var(--transition);
    }

    /* Панель как drawer снизу */
    .filter-panel {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        z-index: 140;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 14px;
        padding: 0 16px 16px;
        background: #fff;
        border-radius: 22px 22px 0 0;
        max-height: 85vh;
        overflow-y: auto;
        box-shadow: 0 -10px 30px rgba(17,24,39,.18);
        transform: translateY(105%);
        transition: transform 280ms cubic-bezier(.2,.7,.2,1);
        margin-bottom: 0;
    }
    .filter-panel.is-open { transform: translateY(0); }

    .filter-panel__drawer-head {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        padding: 10px 0 12px;
        border-bottom: 1px solid var(--border);
        position: sticky;
        top: 0;
        background: #fff;
        z-index: 2;
    }
    .filter-panel__drawer-drag {
        grid-column: 2;
        grid-row: 1;
        width: 44px;
        height: 4px;
        background: var(--border-strong);
        border-radius: 2px;
        margin: -4px auto 4px;
        justify-self: center;
        display: block;
    }
    .filter-panel__drawer-title {
        grid-column: 1 / -1;
        grid-row: 2;
        font-size: 18px;
        font-weight: 700;
        margin: 0;
        text-align: center;
    }
    .filter-panel__drawer-close {
        grid-column: 3;
        grid-row: 2;
        justify-self: end;
        width: 36px;
        height: 36px;
        border-radius: 999px;
        background: var(--surface-2);
        border: 0;
        color: var(--text);
        font-size: 22px;
        line-height: 1;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-top: -30px;
    }
    .filter-panel__drawer-close:hover { background: var(--border); }

    .fp__row {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .fp__row .fdd,
    .fp__row .fp__toggle { width: 100%; }
    .fp__row .fdd__btn { width: 100%; justify-content: space-between; }
    .fp__toggle { padding: 12px 14px; }

    .fp__actions {
        position: sticky;
        bottom: 0;
        background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 30%);
        padding-top: 12px;
        margin-top: auto;
    }

    /* Подложка */
    .drawer-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(17,24,39,0.45);
        z-index: 130;
        opacity: 0;
        pointer-events: none;
        transition: opacity 240ms ease;
    }
    .drawer-backdrop[hidden] { display: none; }
    .drawer-backdrop.is-open {
        opacity: 1;
        pointer-events: auto;
    }

    body.drawer-open { overflow: hidden; }

    /* Дропдауны фильтров внутри drawer-а — чтобы не ломали скролл */
    .filter-panel .fdd__panel {
        position: absolute;
        left: 0;
        right: 0;
        min-width: 0;
        max-width: none;
    }
}

/* ---------------- Footer ---------------- */

.footer {
    background: #0B0E13;
    color: #E5E7EB;
    margin-top: 80px;
}
.footer__inner {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
    padding: 50px 20px 30px;
}
.footer__col { display: flex; flex-direction: column; gap: 8px; }
.footer__col h4 { color: #fff; font-size: 14px; margin: 0 0 6px 0; }
.footer__col a { color: #9CA3AF; text-decoration: none; font-size: 14px; }
.footer__col a:hover { color: #fff; }
.footer__about { color: #9CA3AF; font-size: 13px; line-height: 1.5; margin-top: 6px; }

.footer__bottom {
    border-top: 1px solid rgba(255,255,255,.08);
    padding: 16px 0;
    color: #6B7280;
    font-size: 13px;
}
.footer__bottom-inner {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

@media (max-width: 767px) {
    .footer__inner { grid-template-columns: 1fr 1fr; gap: 24px; padding-top: 40px; }
    h1 { font-size: 32px; }
    h2 { font-size: 22px; }
}

/* ---------------- Animations ---------------- */

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideInUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fadeIn 300ms ease both; }

/* ============================================================
   ========== СТРАНИЦА «ОБЗОР БИРЖИ» (18 блоков) =============
   ============================================================ */

/* ---------------- Общая сетка: контент + sticky-TOC ---------------- */

.ex-overview {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 240px;
    gap: 36px;
    margin-top: 28px;
    align-items: start;
}
.ex-overview__content {
    display: flex;
    flex-direction: column;
    gap: 22px;
    min-width: 0;
}
/* v5: aside — обычный column-flow: сверху TOC (sticky), снизу «Похожие статьи».
   Пока пользователь читает — TOC sticky остаётся на экране, related-articles ждут
   внизу сайдбара (на них нужно скроллнуть). Когда FAQ входит в viewport — JS
   снимает класс is-sticky с toc-inner и тот уезжает вверх вместе с контентом;
   пользователь докручивает до related-articles. */
.ex-overview__toc {
    display: flex;
    flex-direction: column;
    gap: 28px;
    align-self: start;
}
.ex-overview__toc-inner {
    transition: top 200ms;
}
.ex-overview__toc-inner.is-sticky {
    position: sticky;
    top: 88px;
    max-height: calc(100vh - 104px);
    overflow-y: auto;
}

/* v4: на mobile сайдбар скрыт, но related-articles нужно показать в конце основной колонки */
.ex-overview__mobile-related { display: none; }
@media (max-width: 1023px) {
    .ex-overview { grid-template-columns: 1fr; gap: 22px; }
    .ex-overview__toc { display: none; }
    .ex-overview__mobile-related { display: block; margin-top: 8px; }
}

/* «Похожие статьи» — единый стиль и в сайдбаре, и в mobile-fallback */
.related-articles {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px 24px;
    font-size: 14px;
    margin-top: 8px;
}
.related-articles__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 14px;
}
.related-articles__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.related-articles__item { line-height: 1.4; }
.related-articles__link {
    color: var(--text);
    text-decoration: none;
    display: block;
    padding: 4px 0;
    border-bottom: 1px solid var(--border);
}
.related-articles__item:last-child .related-articles__link { border-bottom: 0; }
.related-articles__link:hover { color: var(--primary); }

/* ---------------- TOC (оглавление) ---------------- */

.toc {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 14px 10px;
    font-size: 13px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}
.toc__title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-bottom: 8px;
}
.toc__nav { display: flex; flex-direction: column; gap: 2px; }
.toc__link {
    display: block;
    padding: 6px 10px;
    color: var(--text-muted);
    text-decoration: none;
    border-radius: 6px;
    line-height: 1.3;
    border-left: 2px solid transparent;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.toc__link:hover { background: var(--surface); color: var(--text); }
.toc__link--active {
    color: var(--primary);
    font-weight: 600;
    background: var(--primary-soft);
    border-left-color: var(--primary);
}

/* ---------------- Обёртка секции (блок) ---------------- */

.secblock {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px 28px;
    scroll-margin-top: 100px;
}
.secblock__title {
    font-size: 22px;
    margin: 0 0 16px 0;
    letter-spacing: -0.01em;
}
.secblock__body p { color: var(--text); line-height: 1.6; }

@media (max-width: 767px) {
    .secblock { padding: 18px; }
    .secblock__title { font-size: 19px; }
}

/* ---------------- Блок 1: Hero (v6 / D1 single-column compact) ----------------
   Финальная схема:
     ┌─ Top-zone:   [лого 48 + H1]              [9.4 / 10  ⓘ]
     ├─ Sub-row:    #N в рейтинге · 💬 N отзывов · ⚖ Сравнить
     ├─ Divider
     ├─ Mid-zone:   Объём 24ч: $X ▲ Y%
     │              ⚠ Активный инцидент: … (только если ex.riskPenalty, без заливки)
     ├─ Divider
     └─ Bottom-zone: [CTA] + кэшбэк под ней                          Обновлено: …
*/

.hero {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px 28px;
    scroll-margin-top: 100px;
}
.hero--d1 {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ---- Top-zone: лого+H1 слева, цифра-оценка справа ---- */
.hero__top-zone {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.hero__logo-wrap { flex-shrink: 0; }
.hero__logo-wrap .ex-logo { border-radius: 14px; }
.hero__name-row {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}
.hero__name {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0;
}
.hero__score {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    flex-shrink: 0;
    white-space: nowrap;
}
.hero__score-num {
    font-size: 52px;
    font-weight: 800;
    line-height: 1;
    color: var(--r-color, var(--success));
    letter-spacing: -0.03em;
}
.hero__score-max { color: var(--text-muted); font-size: 14px; }
.hero__score .ttip { align-self: center; margin-left: 4px; }

/* ---- Sub-row: pill «#N» · отзывы · Сравнить ---- */
.hero__sub-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-left: 62px; /* выравнивание под H1 (лого 48 + gap 14) */
    font-size: 13px;
}
.hero__sub-sep { color: var(--text-muted); user-select: none; }
.hero__sub-link {
    color: var(--text-muted);
    text-decoration: none;
    line-height: 1.4;
}
a.hero__sub-link {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 500;
}
a.hero__sub-link:hover { color: var(--primary-hover); }
/* «#N в рейтинге» — pill с цветной обводкой; используется и здесь, и в reviews.html */
.hero__rating-pos {
    color: var(--r-color, var(--success));
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    border: 1px solid var(--r-color, var(--success));
    border-radius: 999px;
    padding: 2px 10px;
    line-height: 1.4;
}
.hero__rating-pos:hover { background: var(--r-color, var(--success)); color: #fff; }
/* Compare-toggle в sub-row hero — компактнее, чем где-либо ещё */
.hero__sub-row .compare-toggle { padding: 2px 6px; flex-direction: row; gap: 6px; }
.hero__sub-row .compare-toggle .compare-toggle__label { font-size: 13px; }
.hero__sub-row .compare-toggle .ic { width: 16px; height: 16px; }

/* ---- Divider ---- */
.hero__divider {
    height: 1px;
    background: var(--border);
    border: 0;
    width: 100%;
}

/* ---- Mid-zone: объём + инцидент-строка ---- */
.hero__mid-zone {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.hero__volume-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    font-size: 14px;
}
.hero__volume-label { color: var(--text-muted); }
.hero__volume-val {
    font-size: 22px;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.02em;
}
/* Сторовые рейтинги на reviews.html: «App Store X.X ★ · Google Play X.X ★» */
.hero__stores-line {
    font-size: 14px;
    color: var(--text);
}
/* Инцидент-строка — без заливки, только цвет + иконка */
.hero__incident-line {
    color: #991B1B;
    font-size: 14px;
    line-height: 1.5;
}
.hero__incident-line b { color: #991B1B; font-weight: 700; }
.hero__incident-ico { font-size: 15px; }

/* ---- Bottom-zone: CTA + кэшбэк слева, «Обновлено» справа ---- */
.hero__bottom-zone {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.hero__cta-wrap {
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    width: fit-content;
}
.hero__cta { align-self: stretch; text-align: center; }
.hero__cashback {
    display: block;
    padding: 2px 0;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 400;
    text-align: center;
}
.hero__updated { font-size: 13px; color: var(--text-muted); align-self: center; }

.btn--lg { padding: 13px 24px; font-size: 15px; }

/* Текстовая «кнопка-ссылка» — используется для «Сравнить» в hero и подобных мест,
   где раньше была .btn--ghost, но нужен один акцент (см. TASKS.md). */
.link-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--primary);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    text-decoration: none;
}
.link-btn:hover { text-decoration: underline; color: var(--primary-hover); }
.link-btn svg { width: 16px; height: 16px; }

/* v4: универсальная индикация «добавлено в сравнение» для всех мест с [data-compare]
   (hero на exchange.html, шапка на reviews.html, alt-card на Похожих биржах, табличная
   шапка compare.html). Совпадает по поведению с .ex-card__compare.is-added на rating.html. */
.link-btn.is-added,
[data-compare].is-added {
    color: var(--primary);
    font-weight: 600;
}
.link-btn.is-added::after,
[data-compare].is-added::after {
    content: ' ✓';
    margin-left: 2px;
}
/* .ex-card__compare уже имеет свои is-added правила выше — не наследуем */
.ex-card__compare.is-added::after { content: '✓'; margin-left: 0; }

@media (max-width: 899px) {
    .hero { padding: 20px; }
    /* Top-zone в две строки: лого+H1 сверху, score ниже выровнен слева */
    .hero__top-zone { flex-direction: column; align-items: flex-start; gap: 12px; }
    .hero__name { font-size: 26px; }
    .hero__score-num { font-size: 44px; }
    .hero__sub-row { margin-left: 0; }
    .hero__volume-val { font-size: 20px; }
    .hero__bottom-zone { flex-direction: column; align-items: stretch; }
    .hero__updated { align-self: flex-end; }
}
@media (max-width: 599px) {
    .hero__cta-wrap { width: 100%; }
    .hero__cta { width: 100%; }
}

/* ---------------- Блок 3: Вывод редакции ---------------- */

.editorial-grid,
.proscons-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.editorial-grid { margin-bottom: 18px; }

.editorial-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 18px 20px;
}
/* Нейтральные карточки «Подходит / Не подходит» — без цветной заливки,
   акценты только в иконках ✅/❌ из inline-разметки (см. TASKS.md). */
.editorial-card--good,
.editorial-card--bad { background: #fff; border-color: var(--border); }
.editorial-card__title {
    font-size: 15px;
    margin: 0 0 10px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}
.editorial-card__title-ico {
    display: inline-flex;
    align-items: center;
}
.editorial-card__title-ico--good { color: #15803D; }
.editorial-card__title-ico--bad  { color: #DC2626; }
.editorial-card ul { margin: 0; padding-left: 20px; color: var(--text); font-size: 14px; line-height: 1.6; }
.editorial-card li { margin-bottom: 4px; }

.proscons-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 18px 20px;
}
/* Без цветной полосы слева — только галочка/крестик в строке */
.proscons-card--pros,
.proscons-card--cons { border-left: 1px solid var(--border); }
.proscons-card__title { font-size: 15px; margin: 0 0 10px 0; }
.proscons-list { list-style: none; margin: 0; padding: 0; font-size: 14px; color: var(--text); line-height: 1.6; }
.proscons-list li {
    margin-bottom: 6px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.proscons-list__ico {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    margin-top: 2px;
}
.proscons-list__ico--pos { color: #15803D; }
.proscons-list__ico--neg { color: #DC2626; }

@media (max-width: 767px) {
    .editorial-grid, .proscons-grid { grid-template-columns: 1fr; }
}

/* ---------------- Блок 4: Надёжность ---------------- */

.sec-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    margin-bottom: 18px;
}
.sec-table th, .sec-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}
.sec-table th {
    width: 44%;
    color: var(--text-muted);
    font-weight: 500;
    background: var(--surface);
}
.sec-table tr:last-child th, .sec-table tr:last-child td { border-bottom: 0; }
.sec-table tr:first-child th, .sec-table tr:first-child td { border-top: 1px solid var(--border); }

.yn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 500;
}
.yn--yes { color: #15803D; }
.yn--no  { color: #991B1B; }
.yn--text { color: var(--text); font-weight: 500; }
.yn svg { width: 16px; height: 16px; }

.ext-scores {
    background: var(--surface);
    border: 1px dashed var(--border-strong);
    border-radius: 12px;
    padding: 18px 20px;
}
.ext-scores__head { margin-bottom: 12px; }
.ext-scores__title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ext-scores__note { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.ext-scores__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.ext-scores__item {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ext-scores__label { font-size: 12px; color: var(--text-muted); }
.ext-scores__val { font-size: 24px; font-weight: 700; color: var(--text); }
.ext-scores__max { font-size: 14px; font-weight: 500; color: var(--text-muted); margin-left: 2px; }
.sec-grade--high { color: #15803D; }
.sec-grade--mid  { color: #A16207; }
.sec-grade--low  { color: #B91C1C; }

@media (max-width: 599px) {
    .ext-scores__grid { grid-template-columns: 1fr; }
    .sec-table th { width: 50%; }
}

/* ---------------- Блок 5: Регулирование ---------------- */

.reg-meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 18px;
}
.reg-meta__item {
    padding: 12px 14px;
    background: var(--surface);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.reg-meta__item span { color: var(--text-muted); font-size: 12px; }
.reg-meta__item b { color: var(--text); font-weight: 600; font-size: 14px; }

.lic-group__title { font-size: 15px; margin: 0 0 10px 0; }
.lic-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lic-item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 14px;
}
.lic-item__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lic-item__country { font-weight: 600; color: var(--text); }
.lic-item__name { font-size: 13px; color: var(--text-muted); }
.lic-item__tier {
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
}
.lic-item__tier--1 { background: #DCFCE7; color: #15803D; }
.lic-item__tier--2 { background: #DBEAFE; color: #1E3A8A; }
.lic-item__tier--3 { background: #FEF3C7; color: #92400E; }

/* Enforcement без жёлтой заливки — нейтральный блок, акцент в эмодзи ⚠ */
.enforce {
    margin-top: 16px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 14px;
    color: var(--text);
    line-height: 1.5;
}
.enforce b { color: var(--text); }

@media (max-width: 767px) {
    .reg-meta { grid-template-columns: 1fr; }
}

/* ---------------- Блок 6: Доступность и KYC ---------------- */

.access-block {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px;
    background: var(--surface);
    border-radius: 12px;
}
.access-block__row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.access-block__row label { font-weight: 500; color: var(--text); font-size: 14px; }
.access-block__select {
    padding: 9px 14px;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    background: #fff;
    color: var(--text);
    font-size: 14px;
    cursor: pointer;
    min-width: 220px;
    font-family: inherit;
}
.access-block__select:focus { outline: 2px solid var(--primary); outline-offset: -1px; }

.access-status {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 500;
    transition: background var(--transition), color var(--transition);
}
/* Без цветной заливки — нейтральный фон + цветная иконка/текст */
.access-status--ok  { background: #fff; color: var(--text); border: 1px solid var(--border); }
.access-status--bad { background: #fff; color: var(--text); border: 1px solid var(--border); }
.access-status--ok b  { color: #15803D; }
.access-status--bad b { color: #991B1B; }
.access-status__icon { display: inline-flex; line-height: 1; }
.access-status__icon svg { width: 18px; height: 18px; }
.access-status__icon--ok  { color: #15803D; }
.access-status__icon--bad { color: #DC2626; }

.access-kyc {
    padding: 12px 16px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 14px;
}
.access-kyc span { color: var(--text-muted); margin-right: 6px; }

/* ---------------- Блок 7: Пополнение/вывод ---------------- */
/* chip-формат — стили в секции «Chips / Badges» (.chip--lg, .chip-row). */

/* ---------------- Блок 8: Продвинутый трейдинг ---------------- */

.trade-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 18px;
}
.trade-row {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 16px;
    align-items: center;
    padding: 12px 16px;
    background: var(--surface);
    border-radius: 10px;
    font-size: 14px;
}
.trade-row__label { color: var(--text-muted); }
.trade-row__val { color: var(--text); }

.deriv-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.deriv-stats__item {
    padding: 14px 16px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.deriv-stats__label { font-size: 12px; color: var(--text-muted); }
.deriv-stats__val { font-size: 18px; font-weight: 700; color: var(--text); }

@media (max-width: 899px) { .deriv-stats { grid-template-columns: 1fr 1fr; } }
@media (max-width: 499px) { .trade-row { grid-template-columns: 1fr; gap: 4px; } }

/* ---------------- Блок 9: Комиссии + пары ---------------- */

.fees-main {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 18px;
}
/* v2 п.10: без подложки/градиента — три блока одинаковые, ничего не выделяется */
.fees-main__item {
    padding: 18px 20px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    text-align: center;
}
.fees-main__label { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
.fees-main__val { font-size: 26px; font-weight: 800; color: var(--text); letter-spacing: -0.02em; }

.pairs-title { font-size: 15px; margin: 0 0 10px 0; }
.pairs-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; }
.pairs-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 560px; }
.pairs-table th, .pairs-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    text-align: right;
}
.pairs-table th:first-child, .pairs-table td:first-child { text-align: left; }
.pairs-table thead th {
    background: #fff;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    font-weight: 600;
}
.pairs-table tbody tr:hover { background: var(--surface); }
.pairs-table tbody tr:nth-child(even) td { background: transparent; }
.pairs-table tbody tr:last-child td { border-bottom: 0; }
.pairs-table__pair { white-space: nowrap; }

@media (max-width: 599px) { .fees-main { grid-template-columns: 1fr 1fr; } .fees-main__item:last-child { grid-column: 1 / -1; } }

/* ---------------- Блок 10: Функции ---------------- */
/* chip-формат — стили в секции «Chips / Badges» (.chip--lg, .chip-row). */

/* ---------------- Блок 11: Бонусы ---------------- */

/* Промо-блок без жёлтой заливки — нейтральный фон, акцент в эмодзи 🎁 и зелёной CTA */
.bonus-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text);
    font-size: 15px;
    line-height: 1.5;
    flex-wrap: wrap;
}
.bonus-box__content { display: flex; align-items: flex-start; gap: 12px; flex: 1 1 300px; }
.bonus-box__icon { font-size: 22px; line-height: 1; flex-shrink: 0; }
.bonus-box__text { flex: 1; }
.bonus-box__cta { flex-shrink: 0; white-space: nowrap; }

@media (max-width: 600px) {
    .bonus-box { flex-direction: column; align-items: stretch; }
    .bonus-box__cta { width: 100%; text-align: center; }
}

/* ---------------- Блок 12: Платформы ---------------- */
/* chip-формат — стили в секции «Chips / Badges» (.chip--lg, .chip-row). */

/* ---------------- Блок 13: Поддержка ---------------- */

.sup-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.sup-card {
    padding: 18px 20px;
    background: var(--surface);
    border-radius: 12px;
}
.sup-card__title { font-size: 14px; margin: 0 0 10px 0; color: var(--text); }
.sup-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.sup-list li {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 6px;
}
.sup-list__label { color: var(--text); font-weight: 500; }
.sup-list__detail { color: var(--text-muted); font-size: 13px; }

.sup-card--metric { display: flex; flex-direction: column; justify-content: space-between; gap: 12px; }
.sup-metric__label { font-size: 12px; color: var(--text-muted); }
.sup-metric__val { font-size: 26px; font-weight: 800; color: var(--success-hover); letter-spacing: -0.02em; }
.sup-meta { font-size: 12px; color: var(--text-muted); }

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

/* ---------------- Блок 14: Отзывы-превью ---------------- */

.rv-summary {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    background: var(--surface);
    border-radius: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.rv-summary__big { font-size: 40px; font-weight: 800; color: var(--gold); line-height: 1; }
.rv-summary__stars { font-size: 18px; }
.rv-summary__count { color: var(--text-muted); font-size: 14px; }

.rv-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.rv-card {
    padding: 14px 16px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
}
.rv-card__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
    flex-wrap: wrap;
    font-size: 13px;
}
.rv-card__author { font-weight: 600; color: var(--text); }
.rv-card__date { color: var(--text-muted); margin-left: auto; }
.rv-card__title { font-weight: 600; color: var(--text); margin-bottom: 4px; font-size: 14px; }
.rv-card__comment { color: var(--text); font-size: 14px; line-height: 1.5; }
.rv-cta { text-align: right; }

/* ---------------- Блок 15: Альтернативы ---------------- */

/* v6 (шаг 8): три ряда без центрирования. Имя биржи = primary-ссылка,
   кликабельная зона — весь .alt-card__head (лого + имя + оценка). Оценка без ⓘ. */
.alt-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.alt-card {
    padding: 16px 18px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.alt-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
    border-color: #CBD5E1;
}
.alt-card__head {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
.alt-card__name {
    flex: 1;
    min-width: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.alt-card__head:hover .alt-card__name {
    color: var(--primary-hover);
}
.alt-card__rating {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    flex-shrink: 0;
}
.alt-card__rating-num { font-size: 20px; font-weight: 700; line-height: 1; }
.alt-card__rating-max { font-size: 12px; color: var(--text-muted); }
.alt-card__reviews { display: flex; align-items: center; font-size: 13px; color: var(--text-muted); white-space: nowrap; }
.alt-card__reviews .link { font-size: 13px; }
.alt-card__actions { display: flex; align-items: center; min-height: 28px; }
.alt-card__actions .compare-toggle { flex-direction: row; gap: 6px; padding: 4px 8px; }
.alt-card__actions .compare-toggle .ic { width: 18px; height: 18px; }
.alt-card__actions .compare-toggle__label { font-size: 13px; }

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

/* ---------------- Блок 16: Текстовый блок ---------------- */

.textblock {
    color: var(--text);
    line-height: 1.65;
}
.textblock h3 { font-size: 18px; margin: 18px 0 10px 0; }
.textblock h3:first-child { margin-top: 0; }
.textblock ol, .textblock ul { margin: 0 0 12px 0; padding-left: 22px; }
.textblock li { margin-bottom: 6px; }
.textblock p { margin-bottom: 10px; }

/* ---------------- Блок 17: FAQ ---------------- */

.faq-list { display: flex; flex-direction: column; gap: 8px; }
.faq-item {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color var(--transition);
}
.faq-item.is-open { border-color: var(--primary); }
.faq-item__q {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 18px;
    background: transparent;
    border: 0;
    text-align: left;
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    font-family: inherit;
}
.faq-item__q:hover { background: var(--surface); }
.faq-item__chev {
    color: var(--primary);
    transition: transform var(--transition);
    flex-shrink: 0;
}
.faq-item.is-open .faq-item__chev { transform: rotate(90deg); }
.faq-item__a {
    padding: 0 18px 14px 36px;
    color: var(--text);
    overflow: hidden;
}
.faq-item__a p { margin: 0; line-height: 1.6; color: #374151; font-size: 14px; }

/* ---------------- Блок 18: Финальный вердикт ---------------- */

.verdict-final {
    padding: 24px;
    background: linear-gradient(135deg, #EEF2F9 0%, #F0FDF4 100%);
    border-radius: 14px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: center;
}
.verdict-final__text {
    font-size: 16px;
    line-height: 1.6;
    color: var(--text);
    max-width: 640px;
    margin: 0;
}
.verdict-final__cta .btn { padding: 14px 28px; font-size: 16px; }

/* ================================================================= */
/* =================== Страница «Отзывы биржи» ===================== */
/* ================================================================= */

.btn--full { width: 100%; }

/* ---- Мини-шапка биржи на reviews.html ---- */

.rv-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 24px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.rv-header__left { display: flex; align-items: center; gap: 16px; min-width: 0; flex: 1; }
.rv-header__info { min-width: 0; }
.rv-header__name-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.rv-header__name {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.2;
    margin: 0;
}
/* v2 п.3: «#N в рейтинге» — pill с обводкой как в hero на exchange.html */
.rv-header__pos {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    color: var(--primary);
    border: 1px solid var(--primary);
    background: transparent;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}
.rv-header__pos:hover { background: var(--primary); color: #fff; }

/* v2 п.3: «О бирже» / «Сравнить» — текстовые ссылки рядом с CTA, единый стиль */
.rv-header__links {
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 4px;
}
.rv-header__links .link,
.rv-header__links .link-btn { font-size: 13px; }
.rv-header__actions { flex-direction: column; align-items: flex-end; }
.rv-header__actions > .btn { align-self: stretch; }
.rv-header__meta {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    color: var(--text-muted);
    font-size: 14px;
}
.rv-header__stars {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.rv-header__stars-val { color: var(--text); font-weight: 700; }
.rv-header__count { color: var(--text-muted); }
.rv-header__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Наш рейтинг-бар в мини-шапке (FIXES #12 — оставлен, дублирования отзывов нет). */
.rv-header__rating {
    display: flex;
    align-items: center;
    margin: 8px 0 4px;
}

/* Inline-статус доступности + селектор страны в шапке (FIXES #15). */
.rv-header__access {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 14px;
    color: var(--text-muted);
}
/* v2 п.1-2: без обводки и заливки, только SVG-чек/крест */
.rv-access-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text);
    font-weight: 500;
}
.rv-access-status--bad { color: var(--text); }
.rv-access-status__icon { display: inline-flex; color: #15803D; }
.rv-access-status--bad .rv-access-status__icon { color: #DC2626; }
.rv-access-status__icon svg { width: 16px; height: 16px; }
.rv-access-select {
    padding: 4px 10px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: #fff;
    font-family: inherit;
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
}

@media (max-width: 767px) {
    .rv-header { padding: 16px; }
    .rv-header__name { font-size: 20px; }
    .rv-header__actions { width: 100%; }
    .rv-header__actions .btn { flex: 1; justify-content: center; }
    .rv-access-status { font-size: 13px; }
}

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

.rv-page {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 24px;
    align-items: start;
    margin-bottom: 40px;
}
.rv-page__aside {
    position: sticky;
    top: 88px;
}
.rv-page__main { min-width: 0; }

@media (max-width: 1023px) {
    .rv-page { grid-template-columns: 1fr; }
    .rv-page__aside { position: static; }
}

/* ---- Левая колонка: сводка ---- */

.rv-summary-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.rv-summary-card__top {
    text-align: center;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.rv-summary-card__big {
    font-size: 52px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
}
.rv-summary-card__stars { font-size: 20px; }
.rv-summary-card__count { color: var(--text-muted); font-size: 14px; }

.rv-summary-card__our {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--primary-soft);
    border-radius: 10px;
    font-size: 14px;
}
.rv-summary-card__our-label { color: var(--text); font-weight: 500; }
.rv-summary-card__our-badge {
    color: #fff;
    padding: 4px 12px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 13px;
}

/* Распределение по звёздам */
.rv-dist {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.rv-dist__row {
    display: grid;
    grid-template-columns: 34px 1fr 28px 40px;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 2px 0;
    border-radius: 6px;
    transition: background var(--transition);
}
.rv-dist__row:hover { background: var(--surface); }
.rv-dist__row--active {
    background: var(--primary-soft);
    border: 1px solid var(--primary);
}
.rv-dist__row--active .rv-dist__label { color: var(--primary); }
.rv-dist__label { color: var(--text); font-weight: 600; font-size: 13px; }
.rv-dist__bar {
    height: 8px;
    background: var(--surface-2);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}
.rv-dist__fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--success) 0%, #16A34A 100%);
    border-radius: 999px;
    transition: width var(--transition);
}
.rv-dist__count { color: var(--text); font-size: 13px; text-align: right; }
.rv-dist__share { color: var(--text-muted); font-size: 12px; text-align: right; }

.rv-summary-card__cta {
    padding-top: 18px;
    border-top: 1px solid var(--border);
}
.rv-summary-card__cta-title { font-weight: 700; font-size: 15px; margin-bottom: 4px; }
.rv-summary-card__cta-text { color: var(--text-muted); font-size: 13px; margin: 0 0 12px 0; line-height: 1.5; }

/* ---- Правая колонка: сортировка ---- */

.rv-sortbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: var(--primary-soft);
    border-radius: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.rv-sortbar__count { display: inline-flex; align-items: center; gap: 12px; font-size: 14px; color: var(--text); flex-wrap: wrap; }
.rv-sortbar__count b { font-weight: 700; }

/* Чип активного фильтра по звёздам над лентой (FIXES #13). */
.rv-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--primary-soft);
    color: var(--primary);
    border: 1px solid var(--primary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background var(--transition);
}
.rv-filter-chip:hover { background: #DBE9FE; }
.rv-filter-chip__close { font-size: 16px; line-height: 1; }
.rv-sortbar__right { display: flex; align-items: center; gap: 10px; }
.rv-sortbar__label { color: var(--text-muted); font-size: 13px; }

/* ---- Лента отзывов ---- */

.rv-feed {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 28px;
}
.rv-feed__empty {
    text-align: center;
    padding: 40px 20px;
    background: var(--surface);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
}
.rv-feed__empty-icon { font-size: 40px; margin-bottom: 10px; }
.rv-feed__empty h3 { font-size: 18px; margin-bottom: 6px; }

/* Карточка отзыва */
.rv-item {
    position: relative;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px 20px;
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.rv-item:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.rv-item--highlight {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(30,64,175,.15);
}
.rv-item__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.rv-item__author { display: flex; align-items: center; gap: 10px; }
.rv-item__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    background: linear-gradient(135deg, #E0E7FF, #C7D2FE);
    color: #1E3A8A;
    font-weight: 700;
    font-size: 15px;
    flex-shrink: 0;
}
.rv-item__name { font-weight: 600; color: var(--text); font-size: 14px; line-height: 1.2; }
.rv-item__date { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

.rv-item__score { display: inline-flex; align-items: center; gap: 8px; }
.rv-item__score-num {
    font-size: 12px;
    color: var(--text-muted);
    padding: 2px 8px;
    background: var(--surface);
    border-radius: 999px;
    font-weight: 600;
}

.rv-item__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 6px 0;
    line-height: 1.35;
}
.rv-item__comment {
    color: var(--text);
    line-height: 1.55;
    font-size: 14px;
    margin: 0 0 10px 0;
}

.rv-item__pc {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 8px;
}
.rv-item__pc-col {
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--surface);
}
/* v2 п.9: плюсы/минусы — без заливки, нейтральная рамка */
.rv-item__pc-col--pros { background: #fff; border: 1px solid var(--border); }
.rv-item__pc-col--cons { background: #fff; border: 1px solid var(--border); }
.rv-item__pc-label { display: flex; align-items: center; gap: 4px; font-weight: 600; font-size: 12px; margin-bottom: 4px; color: var(--text); }
.rv-item__pc-ico { display: inline-flex; }
.rv-item__pc-ico--pos { color: #15803D; }
.rv-item__pc-ico--neg { color: #DC2626; }
.rv-item__pc-ico svg { width: 14px; height: 14px; }
.rv-item__pc-col p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text); }

.rv-item__foot {
    display: flex;
    gap: 18px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    font-size: 13px;
    flex-wrap: wrap;
}
.rv-item__action {
    background: transparent;
    border: 0;
    color: var(--text-muted);
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color var(--transition);
}
.rv-item__action:hover { color: var(--primary); }
.rv-item__action--muted:hover { color: var(--danger); }

/* Активный голос «Полезно» (FIXES #14) — закрашенная плашка. */
.rv-item__helpful {
    padding: 4px 10px;
    border-radius: 999px;
    background: transparent;
    border: 1px solid transparent;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.rv-item__helpful:hover {
    border-color: var(--border);
    background: var(--surface);
}
.rv-item__helpful.is-active {
    background: var(--primary-soft);
    border-color: var(--primary);
    color: var(--primary);
}
.rv-item__helpful-count { font-weight: 700; margin: 0 2px; }

@media (max-width: 640px) {
    .rv-item { padding: 14px; }
    .rv-item__pc { grid-template-columns: 1fr; }
}

/* ---- Форма отзыва ---- */

.rv-form {
    background: linear-gradient(180deg, var(--surface) 0%, #fff 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 28px;
    scroll-margin-top: 88px;
}
.rv-form__head { margin-bottom: 20px; }
.rv-form__title { font-size: 22px; font-weight: 700; margin: 0 0 4px 0; }
.rv-form__subtitle { margin: 0; }

.rv-form__form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.rv-form__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.rv-form__row { display: flex; flex-direction: column; gap: 6px; }
.rv-form__row--check { flex-direction: row; }

.rv-form__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}
.rv-form__req { color: var(--danger); }
.rv-form__hint { font-size: 12px; color: var(--text-muted); }

.rv-form__input {
    width: 100%;
    padding: 11px 14px;
    background: #fff;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    font-family: inherit;
    font-size: 14px;
    color: var(--text);
    transition: border-color var(--transition), box-shadow var(--transition);
}
.rv-form__input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(30,64,175,.12);
}
.rv-form__input.is-err {
    border-color: var(--danger);
    background: #FEF2F2;
}
.rv-form__input--area { resize: vertical; min-height: 80px; }

/* Интерактивные звёзды */
.rv-form__stars {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 10px;
    background: #fff;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    width: fit-content;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.rv-form__stars.rv-form__stars--err {
    border-color: var(--danger);
    background: #FEF2F2;
}
.rv-form__stars.rv-form__stars--pulse {
    animation: rv-pulse 1.2s ease;
}
@keyframes rv-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(30,64,175,0); }
    40% { box-shadow: 0 0 0 6px rgba(30,64,175,.25); }
}
.rv-form__star {
    background: transparent;
    border: 0;
    color: #D1D5DB;
    font-size: 26px;
    cursor: pointer;
    padding: 0 2px;
    line-height: 1;
    transition: color var(--transition), transform var(--transition);
}
.rv-form__star.is-on { color: var(--gold); }
.rv-form__star.is-hover { color: var(--gold); transform: scale(1.1); }
.rv-form__stars-hint {
    margin-left: 10px;
    font-size: 13px;
    color: var(--text-muted);
}

.rv-form__check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: var(--text);
    line-height: 1.5;
    cursor: pointer;
}
.rv-form__check input { margin-top: 3px; accent-color: var(--primary); flex-shrink: 0; }

.rv-form__actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 8px;
    flex-wrap: wrap;
}
.rv-form__actions-hint { font-size: 12px; }

@media (max-width: 640px) {
    .rv-form { padding: 20px; }
    .rv-form__grid { grid-template-columns: 1fr; }
    .rv-form__title { font-size: 18px; }
}

/* ---- Похожие биржи внизу ---- */

.rv-similar { margin-bottom: 40px; }
.rv-similar__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.rv-similar__title { font-size: 22px; font-weight: 700; margin: 0; }

/* ================================================================= */
/* ===================== Страница «Сравнение» ====================== */
/* ================================================================= */

/* Шапка страницы сравнения */
.cmp-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.cmp-head__title { font-size: 36px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 6px 0; }
.cmp-head__subtitle { color: var(--text-muted); font-size: 14px; margin: 0; }
.cmp-head__subtitle b { color: var(--text); }
.cmp-head__actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* Селектор страны над таблицей сравнения (FIXES #18). */
.cmp-country {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 13px;
}
.cmp-country__label { color: var(--text-muted); }
.cmp-country__select {
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
    padding: 2px 4px;
}

/* Ячейка с бонусным предложением + CTA в сравнении (FIXES #18). */
.cmp-tbl__bonus { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.cmp-tbl__bonus-cta { white-space: nowrap; }

@media (max-width: 767px) {
    .cmp-head__title { font-size: 26px; }
    .cmp-head__actions { width: 100%; }
    .cmp-head__actions .btn { flex: 1; justify-content: center; }
}

/* Пустые состояния */
.cmp-empty {
    text-align: center;
    padding: 56px 24px;
    background: linear-gradient(180deg, var(--primary-soft) 0%, #fff 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.cmp-empty--small { padding: 28px 20px; margin-top: 20px; }
.cmp-empty__icon { font-size: 48px; line-height: 1; }
.cmp-empty__title { font-size: 22px; font-weight: 700; margin: 0; }
.cmp-empty__text { color: var(--text-muted); font-size: 14px; max-width: 560px; margin: 0; line-height: 1.55; }
.cmp-empty__text b { color: var(--text); }
.cmp-empty .btn { margin-top: 8px; }

/* Шапки-колонки бирж */
.cmp-cols {
    display: grid;
    gap: 14px;
    margin-bottom: 24px;
}
.cmp-cols--n2 { grid-template-columns: repeat(2, 1fr); }
.cmp-cols--n3 { grid-template-columns: repeat(3, 1fr); }
.cmp-cols--n4 { grid-template-columns: repeat(4, 1fr); }
.cmp-cols--n1 { grid-template-columns: repeat(2, 1fr); max-width: 560px; }

.cmp-col {
    position: relative;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 12px 12px 14px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.cmp-col:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
/* v6: крестик — z-index 5 чтобы не перекрывался соседними элементами,
   квадрат 24×24, top/right 8px. */
.cmp-col__close {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 5;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition), color var(--transition);
}
.cmp-col__close:hover { background: #FEE2E2; color: var(--danger); border-color: #FCA5A5; }

/* v6: компактная вертикаль ~180-200px.
   Строка 1: лого+имя (link) слева, оценка справа.
   Строка 2: #N · 💬 N · СТРАНА ✓ — через `·` (.cmp-col__sep).
   Строка 3: CTA full-width. Под ней: кэшбэк (мелким). */
.cmp-col__head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-right: 28px; /* место под крестик 24×24 */
    min-height: 32px;
}
.cmp-col__title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1 1 auto;
}
.cmp-col__name { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmp-col__name.link { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.cmp-col__name.link:hover { color: var(--primary-hover); }

/* Оценка inline в шапке: цифра + «/ 10», baseline, справа */
.cmp-col__rating-inline {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    flex-shrink: 0;
}
.cmp-col__rating-num { font-size: 20px; font-weight: 800; line-height: 1; }
.cmp-col__rating-max { font-size: 11px; color: var(--text-muted); }

/* Мета одной строкой через `·` */
.cmp-col__meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
}
.cmp-col__sep { color: var(--border-strong); user-select: none; }
.cmp-col__pos-pill {
    display: inline-block;
    color: var(--r-color, var(--success));
    font-size: 12px;
    font-weight: 600;
    border: 1px solid var(--r-color, var(--success));
    border-radius: 999px;
    padding: 0 7px;
    text-decoration: none;
    line-height: 1.5;
}
.cmp-col__pos-pill:hover { background: var(--r-color, var(--success)); color: #fff; }
.cmp-col__reviews-link { font-size: 12px; }

.cmp-col__avail {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text);
}
.cmp-col__avail-ico { display: inline-flex; }
.cmp-col__avail-ico--ok  { color: #15803D; }
.cmp-col__avail-ico--bad { color: #DC2626; }
.cmp-col__avail-ico svg { width: 14px; height: 14px; }

/* CTA full-width + кэшбэк (мелким под кнопкой) */
.cmp-col__cta-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    margin-top: auto;
}
.cmp-col__cta-wrap .btn { width: 100%; justify-content: center; }
.cmp-col__cashback {
    width: 100%;
    color: var(--text-muted);
    font-size: 11px;
    text-align: center;
    line-height: 1.35;
}

/* Слот «Добавить» */
.cmp-col--add {
    border-style: dashed;
    background: var(--surface);
    color: var(--text-muted);
    justify-content: center;
    text-decoration: none;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.cmp-col--add:hover {
    background: var(--primary-soft);
    color: var(--primary);
    border-color: var(--primary);
}
.cmp-col__add-icon {
    width: 54px; height: 54px;
    border-radius: 999px;
    background: #fff;
    border: 2px dashed var(--border-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    font-weight: 400;
    color: var(--primary);
}
.cmp-col--add:hover .cmp-col__add-icon { border-color: var(--primary); background: #fff; }
.cmp-col__add-text { font-weight: 600; color: var(--text); }
.cmp-col__add-hint { font-size: 12px; color: var(--text-muted); }

@media (max-width: 767px) {
    .cmp-cols--n2, .cmp-cols--n3, .cmp-cols--n4, .cmp-cols--n1 { grid-template-columns: 1fr; }
    .cmp-col--add { min-height: 140px; }
    .cmp-col--add .cmp-col__add-icon { width: 44px; height: 44px; font-size: 26px; }
}

/* Подсказка про горизонтальный скролл (только мобайл) */
.cmp-scroll-hint {
    display: none;
    padding: 8px 12px;
    margin-bottom: 8px;
    background: var(--primary-soft);
    border: 1px dashed #BFDBFE;
    border-radius: 8px;
    font-size: 12px;
    color: var(--primary);
    text-align: center;
    transition: opacity var(--transition);
}
.cmp-scroll-hint.is-hidden { opacity: 0; pointer-events: none; }
@media (max-width: 767px) {
    .cmp-scroll-hint { display: block; }
}

/* Таблица сравнения */
.cmp-tbl-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #fff;
    margin-bottom: 32px;
    -webkit-overflow-scrolling: touch;
}
.cmp-tbl {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
    color: var(--text);
    table-layout: fixed;
}
.cmp-tbl thead tr { background: var(--surface); }
.cmp-tbl__label,
.cmp-tbl__label--head {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #fff;
    text-align: left;
    font-weight: 500;
    padding: 10px 14px;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    color: var(--text);
    width: 220px;
    min-width: 220px;
    vertical-align: top;
}
.cmp-tbl__label--head {
    background: var(--surface);
    color: var(--text-muted);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    box-shadow: 1px 0 0 var(--border);
}
.cmp-tbl__ex-head {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    font-weight: 700;
    color: var(--text);
    text-align: left;
    background: var(--surface);
    min-width: 220px;
}
.cmp-tbl__ex-head-name { font-size: 15px; }

.cmp-tbl__group-cell {
    padding: 12px 14px;
    background: var(--primary-soft);
    color: var(--primary);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: left;
    border-top: 1px solid #BFDBFE;
    border-bottom: 1px solid #BFDBFE;
}
.cmp-tbl__group-inner {
    position: sticky;
    left: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
/* v2 п.11: эмодзи убраны из заголовков групп */
.cmp-tbl__group-ico { display: none; }

.cmp-tbl__row:nth-child(odd):not(.cmp-tbl__group) { background: #FCFCFD; }
.cmp-tbl__row:nth-child(odd):not(.cmp-tbl__group) .cmp-tbl__label { background: #FCFCFD; }
.cmp-tbl__row:hover:not(.cmp-tbl__group) { background: var(--primary-soft); }
.cmp-tbl__row:hover:not(.cmp-tbl__group) .cmp-tbl__label { background: var(--primary-soft); }

.cmp-tbl__cell {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
    min-width: 220px;
}
.cmp-tbl__muted { color: var(--text-muted); }
.cmp-tbl__small { font-size: 13px; line-height: 1.45; color: var(--text); display: inline-block; }
.cmp-tbl__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 13px;
}
.cmp-tbl__list li { line-height: 1.4; }
.cmp-tbl__chips {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.cmp-tbl__chips .chip { font-size: 11px; padding: 2px 8px; gap: 4px; }
.cmp-tbl__chips .chip .chip__icon { display: inline-flex; color: var(--text-muted); line-height: 1; }
.cmp-tbl__chips .chip .chip__icon svg { width: 12px; height: 12px; }
.cmp-tbl__chips .chip--muted .chip__icon { color: inherit; opacity: 0.7; }

.cmp-tbl__tier {
    display: inline-block;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    margin-left: 4px;
    vertical-align: middle;
}
.cmp-tbl__tier--1 { background: #DCFCE7; color: #166534; }
.cmp-tbl__tier--2 { background: #FEF3C7; color: #92400E; }
.cmp-tbl__tier--3 { background: #F3F4F6; color: #4B5563; }

.cmp-tbl__rating {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
}

/* Подсветка «лучшего» значения */
.cmp-tbl__best-val {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    color: var(--success-hover);
}
.cmp-tbl__best-mark {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 999px;
    background: #DCFCE7;
    color: #166534;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

@media (max-width: 767px) {
    .cmp-tbl__label,
    .cmp-tbl__label--head {
        width: 150px;
        min-width: 150px;
        padding: 10px;
        font-size: 13px;
    }
    .cmp-tbl__cell,
    .cmp-tbl__ex-head {
        min-width: 180px;
        padding: 10px;
    }
    .cmp-tbl__best-mark { display: none; }
}

/* ---------------- Fade-in блоков при скролле ---------------- */

@media (prefers-reduced-motion: no-preference) {
    .reveal {
        opacity: 0;
        transform: translateY(14px);
        transition: opacity 420ms cubic-bezier(.2,.7,.2,1),
                    transform 420ms cubic-bezier(.2,.7,.2,1);
        will-change: opacity, transform;
    }
    .reveal.is-in {
        opacity: 1;
        transform: none;
    }
}

/* ---------------- Utility ---------------- */

.text-muted { color: var(--text-muted); font-size: 13px; }

/* ---------------- Заглушка main ---------------- */

main { min-height: 60vh; padding-bottom: 40px; }

/* ---------------- Скроллбары (тонкие) ---------------- */

*::-webkit-scrollbar { height: 8px; width: 8px; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
*::-webkit-scrollbar-track { background: transparent; }


/* ============================================================================
 * EXTERNAL REVIEWS (rvx-*) — таб «По данным App Store + Google Play»
 * Источник: external-reviews-v1-2026-05/notes.md (37 решений + №38).
 * ========================================================================== */

/* ---- Tab nav ---- */

.rvx-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--border);
    margin: 0 0 24px 0;
}
.rvx-tabs__btn {
    border: 0;
    background: transparent;
    padding: 12px 18px;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color var(--transition), border-color var(--transition);
}
.rvx-tabs__btn:hover { color: var(--text); }
.rvx-tabs__btn--active {
    color: var(--primary);
    border-bottom-color: var(--primary);
    font-weight: 600;
}
.rvx-tabs__count {
    font-weight: 400;
    color: var(--text-muted);
    margin-left: 4px;
}
.rvx-tabs__btn--active .rvx-tabs__count { color: var(--primary); opacity: 0.7; }

/* ---- Disclaimer ---- */

.rvx-disclaimer {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.55;
    margin-bottom: 20px;
}
.rvx-disclaimer__icon { flex: 0 0 auto; font-size: 16px; line-height: 1; padding-top: 2px; }
.rvx-disclaimer__details { display: block; margin-top: 6px; color: var(--text); }
.rvx-disclaimer__details summary { cursor: pointer; color: var(--primary); font-weight: 500; user-select: none; }
.rvx-disclaimer__details[open] summary { margin-bottom: 8px; }

/* ---- Two summary cards ---- */

.rvx-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 28px;
}
@media (max-width: 720px) { .rvx-summary { grid-template-columns: 1fr; } }

.rvx-summary-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow-sm);
}
.rvx-summary-card__head {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--text);
}
.rvx-summary-card__head-icon { display: inline-flex; align-items: center; color: var(--text); line-height: 1; }
.rvx-summary-card__head-icon svg { width: 20px; height: 20px; }
.rvx-summary-card__big {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 4px;
}
.rvx-summary-card__rating { font-size: 38px; font-weight: 700; line-height: 1; color: var(--text); }
.rvx-summary-card__stars { font-size: 18px; }
.rvx-summary-card__count { color: var(--text-muted); font-size: 13px; margin-bottom: 14px; }
.rvx-summary-card__bars { display: flex; flex-direction: column; gap: 4px; }
.rvx-summary-card__bar {
    display: grid;
    grid-template-columns: 28px 1fr 36px;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-muted);
}
.rvx-summary-card__bar-label { font-weight: 500; color: var(--text); }
.rvx-summary-card__bar-track {
    display: block;            /* span по умолчанию inline — ширина/высота не применятся */
    height: 6px;
    background: var(--surface-2);
    border-radius: 3px;
    overflow: hidden;
}
.rvx-summary-card__bar-fill {
    display: block;            /* без этого inline-style width:N% игнорируется */
    height: 100%;
    background: var(--primary);
    border-radius: 3px;
}
/* v4: приглушённые тона — как в блоке «О чём пишут» */
.rvx-summary-card__bar-fill--good { background: #86EFAC; }
.rvx-summary-card__bar-fill--bad  { background: #FCA5A5; }
.rvx-summary-card__bar-count { text-align: right; font-variant-numeric: tabular-nums; }

/* ---- Categories block ---- */

.rvx-cats {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 22px 24px;
    margin-bottom: 28px;
    box-shadow: var(--shadow-sm);
}
.rvx-cats__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}
.rvx-cats__title { font-size: 18px; font-weight: 700; color: var(--text); margin: 0; }
.rvx-cats__hint { color: var(--text-muted); font-size: 12px; }
.rvx-cats__group-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin: 18px 0 8px 0;
    font-weight: 600;
}
.rvx-cats__row {
    display: grid;
    grid-template-columns: 200px 1fr 110px;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
    font-size: 13px;
}
.rvx-cats__row--low { opacity: 0.5; }
.rvx-cats__label {
    display: flex;
    align-items: baseline;
    gap: 6px;
    color: var(--text);
}
.rvx-cats__label-name { font-weight: 500; }
.rvx-cats__label-count { color: var(--text-muted); font-size: 12px; }
.rvx-cats__bar {
    display: flex;
    height: 14px;
    background: var(--surface-2);
    border-radius: 4px;
    overflow: hidden;
}
/* v2 п.6: приглушённые оттенки баров (NavBoost-стиль не цепляет глаз) */
.rvx-cats__bar-pos { background: #86EFAC; height: 100%; }
.rvx-cats__bar-neu { background: #CBD5E1; height: 100%; }
.rvx-cats__bar-neg { background: #FCA5A5; height: 100%; }
.rvx-cats__counts { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-muted); font-size: 12px; }
.rvx-cats__counts-pos { color: var(--success); font-weight: 600; }
.rvx-cats__counts-neg { color: var(--danger);  font-weight: 600; }
.rvx-cats__row--low-data .rvx-cats__bar { background: var(--surface-2); }
.rvx-cats__row--low-data .rvx-cats__counts { font-style: italic; }
.rvx-cats__row--tone { padding-bottom: 14px; border-bottom: 1px dashed var(--border); margin-bottom: 4px; }
.rvx-cats__row--bright { font-weight: 500; }

/* v2 п.5: тогглер «Показать темы» */
.rvx-cats__toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding: 6px 0;
    background: transparent;
    border: 0;
    color: var(--primary);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.rvx-cats__toggle:hover { color: var(--primary-hover); }
.rvx-cats__toggle-chev { display: inline-block; line-height: 1; }
.rvx-cats__hidden { margin-top: 8px; display: flex; flex-direction: column; gap: 0; }
.rvx-cats__hidden[hidden] { display: none; }
.rvx-cats__legend { display: flex; gap: 14px; font-size: 12px; color: var(--text-muted); margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.rvx-cats__legend-dot {
    display: inline-block;
    width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; vertical-align: 1px;
}
.rvx-cats__legend-dot--pos { background: var(--success); }
.rvx-cats__legend-dot--neg { background: var(--danger); }
.rvx-cats__legend-dot--neu { background: #94A3B8; }

@media (max-width: 720px) {
    .rvx-cats__row { grid-template-columns: 1fr; gap: 4px; padding: 8px 0; }
    .rvx-cats__counts { text-align: left; }
}

/* ---- Filters ---- */

.rvx-filters {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
    padding: 14px 16px;
    background: var(--surface);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}
.rvx-filters__group { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rvx-filters__group-label {
    font-size: 12px;
    color: var(--text-muted);
    margin-right: 6px;
    min-width: 86px;
}
.rvx-filters__chip {
    border: 1px solid var(--border-strong);
    background: #fff;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    color: var(--text);
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.rvx-filters__chip:hover { border-color: var(--primary); }
.rvx-filters__chip--active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}
/* v2 п.10: графические звёзды в фильтре */
.rvx-filters__chip-stars { color: var(--gold); letter-spacing: 1px; }
.rvx-filters__chip-stars-empty { color: #E5E7EB; }
.rvx-filters__chip--active .rvx-filters__chip-stars,
.rvx-filters__chip--active .rvx-filters__chip-stars-empty { color: #fff; opacity: 0.95; }
.rvx-filters__reset {
    margin-left: auto;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font-size: 12px;
    cursor: pointer;
    padding: 4px 8px;
}
.rvx-filters__reset:hover { color: var(--danger); }

/* ---- Feed counter ---- */

.rvx-feed-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 12px;
    font-size: 13px;
    color: var(--text-muted);
}
.rvx-feed-meta__count b { color: var(--text); }

/* ---- Feed cards ---- */

.rvx-feed { display: flex; flex-direction: column; gap: 12px; }
.rvx-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 18px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition);
}
.rvx-card:hover { box-shadow: var(--shadow-md); }
.rvx-card__head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
    font-size: 12px;
    color: var(--text-muted);
}
.rvx-card__stars { color: var(--gold); font-size: 14px; letter-spacing: 1px; }
.rvx-card__meta-sep { opacity: 0.5; }
.rvx-card__topics { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.rvx-card__topic {
    font-size: 11px;
    background: var(--primary-soft);
    color: var(--primary);
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 500;
}
.rvx-card__title { font-size: 14px; font-weight: 600; color: var(--text); margin: 0 0 4px 0; }
.rvx-card__text { font-size: 14px; line-height: 1.55; color: var(--text); margin: 0; white-space: pre-wrap; }

.rvx-feed__empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
    background: var(--surface);
    border-radius: var(--radius);
}
.rvx-feed__more-wrap { margin-top: 16px; text-align: center; }

.rvx-feed-footer {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    font-size: 13px;
    color: var(--text-muted);
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
.rvx-feed-footer a { color: var(--primary); }


/* ============================================================================
 * Block 14 (Внешние отзывы на странице обзора биржи)
 * ========================================================================== */

.rvx-block14 {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 22px;
    box-shadow: var(--shadow-sm);
}
.rvx-block14__intro { color: var(--text-muted); font-size: 13px; margin: 0 0 16px 0; }
.rvx-block14__platforms {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 18px;
}
@media (max-width: 600px) { .rvx-block14__platforms { grid-template-columns: 1fr; } }
.rvx-block14__plat {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--surface);
    border-radius: var(--radius-sm);
}
.rvx-block14__plat-icon { display: inline-flex; align-items: center; color: var(--text); line-height: 1; }
.rvx-block14__plat-icon svg { width: 20px; height: 20px; }
.rvx-block14__plat-name { font-size: 13px; color: var(--text-muted); margin-bottom: 2px; }
.rvx-block14__plat-rating { font-size: 22px; font-weight: 700; color: var(--text); line-height: 1; }
.rvx-block14__plat-meta { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.rvx-block14__topcats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}
@media (max-width: 600px) { .rvx-block14__topcats { grid-template-columns: 1fr; gap: 12px; } }
.rvx-block14__topcats-title {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 8px;
}
.rvx-block14__topcats-title--neg { color: var(--danger); }
.rvx-block14__topcats-title--pos { color: var(--success); }
.rvx-block14__topcats-list { list-style: none; padding: 0; margin: 0; }
.rvx-block14__topcats-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 4px 0;
    font-size: 13px;
}
.rvx-block14__topcats-item-name { color: var(--text); }
.rvx-block14__topcats-item-count { color: var(--text-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.rvx-block14__link {
    display: inline-block;
    margin-top: 16px;
    font-weight: 500;
    color: var(--primary);
}


/* ============================================================================
 * Compare-table cells for the «Отзывы» section
 * ========================================================================== */

.cmp-tbl__rev-plat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cmp-tbl__rev-plat-rating { font-size: 18px; font-weight: 700; color: var(--text); line-height: 1.1; }
.cmp-tbl__rev-plat-count  { font-size: 12px; color: var(--text-muted); }

.cmp-tbl__rev-cats {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cmp-tbl__rev-cats li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
}
.cmp-tbl__rev-cats-name  { color: var(--text); }
.cmp-tbl__rev-cats-count { color: var(--text-muted); font-size: 12px; font-variant-numeric: tabular-nums; }