/* ═══════════════════════════════════════════════════════════════════════════
   Раздел «Криптовалюты» — дизайн-система.

   Подключается ОДНИМ файлом из {% block extra_css %} страницы:
       {% include "crypto/_styles.html" %}
   (раньше те же правила ехали инлайном в каждом HTML-ответе — 600 строк на
   страницу, без кэша браузера).

   Язык раздела — тот же, что задал редизайн /fx/:
       числа → вердикт словами → индикаторы «вопрос-ответ» → графики с
       пояснением → что это меняет для инвестора → дисклеймер.
   Правило раздела: у КАЖДОГО графика и каждой нетривиальной метрики есть
   подпись-триптих `.cr-explain` (что это / что показывает / что сейчас).
   Пустой .cr-explain — это баг вёрстки, а не «пока не придумали текст».

   Именование: префикс cr-. Модификаторы состояния — is-up / is-down / is-warn
   (никогда однобуквенные: в fx_irs.html селектор `.a.a` совпал с любым `.a`
   и перекрасил все индикаторы разом).

   Файл состоит из двух слоёв:
     §A — общий каркас страницы раздела (шапка, тикер, вердикт, секции, панели);
     §B — компоненты конкретных блоков (таблицы, гейдж, карта, калькуляторы).
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --cr-mono: var(--font-num);
    --cr-faint: #6b7285;      /* подписи третьего уровня: сноски, технические строки */
    --cr-btc: #f7931a;        /* биткоин — единственный «фирменный» цвет раздела */
    --cr-eth: #627eea;
}

/* ═══════════════════════════ §A. Каркас страницы ═══════════════════════════ */

/* ── Шапка ────────────────────────────────────────────────────────────────
   Надзаголовок (где мы) + H1 + лид + справа плашка свежести. Без «парящего»
   градиентного героя: раздел информационный, шапка не должна съедать экран. */
.cr-top {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 18px; flex-wrap: wrap; margin-bottom: 18px;
}
.cr-top-main { min-width: 0; flex: 1 1 460px; }
.cr-top h1 { margin: 0; font-size: 29px; line-height: 1.08; letter-spacing: -.025em; }
.cr-lede {
    margin: 10px 0 0; color: var(--text2); font-size: 13.5px; line-height: 1.55; max-width: 66ch;
}
.cr-top-aside { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Плашка свежести данных: крипта торгуется 24/7, возраст снимка важен всегда. */
.cr-live {
    display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
    font-size: 11.5px; color: var(--text2);
    padding: 5px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg2);
}
.cr-live .dot {
    width: 7px; height: 7px; border-radius: 50%; background: var(--green);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 22%, transparent);
    animation: cr-pulse 2.4s var(--ease-out) infinite;
}
.cr-live.is-stale { color: var(--yellow); border-color: color-mix(in srgb, var(--yellow) 40%, transparent); }
.cr-live.is-stale .dot { background: var(--yellow); box-shadow: none; animation: none; }
@keyframes cr-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .cr-live .dot { animation: none; } }

/* ── Полоса-тикер: ключевые числа одной строкой ───────────────────────────── */
.cr-strip {
    display: flex; flex-wrap: wrap; overflow: hidden;
    border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg2);
}
.cr-strip > * {
    flex: 1 1 140px; min-width: 126px; padding: 10px 16px;
    border-right: 1px solid var(--border);
    display: flex; flex-direction: column; gap: 1px;
    text-decoration: none; color: inherit;
}
.cr-strip > *:last-child { border-right: 0; }
a.cr-strip-cell { transition: background-color .14s var(--ease-out); }
/* Глобальное `a:hover` красит текст ссылки в акцент и перебивает `color:inherit` выше —
   карточке это не нужно: отклик на наведение даёт фон, а не перекраска цифр. */
@media (hover: hover) { a.cr-strip-cell:hover { background: var(--bg3); color: inherit; } }
/* Серый здесь нейтральный, а не общий сине-серый темы: в плотной полосе цифр холодный
   оттенок читается как подсветка и спорит с зелёным/красным рядом. */
.cr-strip .l { font-size: 10.5px; color: #757580; white-space: nowrap; }
.cr-strip .v { font-size: 16px; font-weight: 650; letter-spacing: -.012em; font-variant-numeric: tabular-nums; }
.cr-strip .d { font-size: 10.5px; font-weight: 650; font-variant-numeric: tabular-nums; color: #90909a; }
.cr-strip .d.is-up { color: var(--green); }
.cr-strip .d.is-down { color: var(--red); }
.cr-strip .d.is-warn { color: var(--yellow); }

/* ── Вердикт: один вывод по разделу, выведенный из данных ─────────────────── */
.cr-verdict {
    display: flex; align-items: center; gap: 16px;
    background: var(--bg2); border: 1px solid var(--border);
    border-left: 3px solid var(--accent); border-radius: var(--radius);
    padding: 16px 20px;
}
.cr-verdict .ico {
    flex: none; width: 40px; height: 40px; border-radius: 10px;
    background: var(--accent-soft); color: var(--accent);
    display: grid; place-items: center;
}
.cr-verdict .txt { flex: 1; min-width: 220px; }
.cr-verdict h2 { font-size: 17px; font-weight: 700; letter-spacing: -.015em; margin: 0 0 3px; text-wrap: balance; }
.cr-verdict p { margin: 0; font-size: 12.5px; color: var(--text2); line-height: 1.55; }
.cr-verdict .side { flex: none; display: flex; gap: 22px; }
.cr-verdict .side .l {
    font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--cr-faint);
}
.cr-verdict .side .v { font-size: 16px; font-weight: 750; font-variant-numeric: tabular-nums; }
.cr-verdict.is-up { border-left-color: var(--green); }
.cr-verdict.is-up .ico { background: var(--green-soft); color: var(--green); }
.cr-verdict.is-down { border-left-color: var(--red); }
.cr-verdict.is-down .ico { background: var(--red-soft); color: var(--red); }
.cr-verdict.is-warn { border-left-color: var(--yellow); }
.cr-verdict.is-warn .ico { background: color-mix(in srgb, var(--yellow) 14%, transparent); color: var(--yellow); }
.cr-verdict.is-up .side .v { color: var(--green); }
.cr-verdict.is-down .side .v { color: var(--red); }
.cr-verdict.is-warn .side .v { color: var(--yellow); }
@media (max-width: 860px) { .cr-verdict { flex-wrap: wrap; } .cr-verdict .side { width: 100%; } }

/* ── Индикатор: вопрос → ответ → пояснение → техническая строка ────────────
   Четыре штуки в ряд отвечают на четыре вопроса, с которыми человек и пришёл
   в раздел. Ответ — словами, число уходит в техстроку. */
.cr-ins-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
/* Колонок ровно столько, сколько карточек: любая из них выпадает, когда источник не дал
   данных (у ликвидности нет месячной истории - нет и карточки). При жёстких четырёх
   колонках две карточки вставали в четверть ширины, а полстроки пустовало. */
.cr-ins-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cr-ins-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cr-ins-grid.cols-1 { grid-template-columns: 1fr; }
.cr-ins {
    background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 15px 16px; display: flex; flex-direction: column; gap: 6px;
    text-decoration: none; color: inherit;
}
a.cr-ins { transition: border-color .15s var(--ease-out), transform .15s var(--ease-out); }
a.cr-ins:hover { border-color: var(--border2); transform: translateY(-2px); color: inherit; }
.cr-ins .q {
    font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--cr-faint); line-height: 1.35;
}
.cr-ins .a { font-size: 19px; font-weight: 750; letter-spacing: -.02em; line-height: 1.15; }
.cr-ins .a.is-up { color: var(--green); }
.cr-ins .a.is-down { color: var(--red); }
.cr-ins .a.is-warn { color: var(--yellow); }
.cr-ins .a.is-accent { color: var(--accent2); }
.cr-ins .a.is-btc { color: var(--cr-btc); }
.cr-ins .s { font-size: 12px; color: var(--text2); line-height: 1.45; flex: 1; }
.cr-ins .tech {
    font-family: var(--cr-mono); font-size: 10px; color: var(--cr-faint);
    border-top: 1px dashed var(--border2); padding-top: 7px; margin-top: 2px;
    font-variant-numeric: tabular-nums;
}
/* Порог 1100, а не 900: на 900–1100 четыре карточки сжимались до ~220px — вопрос переносился
   на две строки, техстрока под пунктиром на три. */
@media (max-width: 1100px) { .cr-ins-grid, .cr-ins-grid.cols-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .cr-ins-grid, .cr-ins-grid.cols-3, .cr-ins-grid.cols-2 { grid-template-columns: 1fr; } }

/* ── Заголовок секции: капслок + пояснение + линия до края ────────────────── */
.cr-sec { display: flex; align-items: center; gap: 12px; margin: 30px 0 14px; flex-wrap: wrap; }
.cr-sec .t {
    font-size: 12px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: var(--text);
}
.cr-sec .n { font-size: 12px; color: var(--text2); font-weight: 500; }
.cr-sec .rule { flex: 1; min-width: 20px; height: 1px; background: linear-gradient(90deg, var(--border2), transparent); }
.cr-sec .lnk { flex: none; font-size: 12px; font-weight: 700; color: var(--accent2); text-decoration: none; }
.cr-sec .lnk:hover { text-decoration: underline; }
/* Якорь секции не должен уезжать под липкий навбар при переходе по оглавлению. */
.cr-sec[id], [id].cr-anchor { scroll-margin-top: 116px; }
/* На узком экране подпись секции переносится на свою строку, и декоративная линия
   остаётся на ней огрызком в 20–40px. Линия — украшение, на телефоне её просто нет. */
@media (max-width: 700px) { .cr-sec .rule { display: none; } }

/* ── Панель: шапка (заголовок + управление) + тело + пояснение ────────────── */
.cr-panel { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); }
.cr-panel-h {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
    padding: 12px 16px; border-bottom: 1px solid var(--border);
}
.cr-panel-h .title { font-size: 13.5px; font-weight: 700; letter-spacing: -.01em; }
.cr-panel-h .sub { font-size: 11.5px; color: var(--cr-faint); }
.cr-panel-b { padding: 15px 17px; }
.cr-panel-b > :first-child { margin-top: 0; }

/* Пояснение под графиком — обязательный триптих раздела. */
.cr-explain {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
    margin-top: 15px; padding-top: 14px; border-top: 1px solid var(--border);
}
.cr-explain > div { min-width: 0; }
.cr-explain .gl {
    font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--accent2); margin-bottom: 5px;
}
.cr-explain .gt { font-size: 12px; color: var(--text2); line-height: 1.5; }
.cr-explain .now .gl { color: var(--text); }
.cr-explain .now .gt { color: var(--text); }
@media (max-width: 780px) { .cr-explain { grid-template-columns: 1fr; gap: 12px; } }
/* Внутри половинной/третьей колонки три текстовых столбца схлопываются в лапшу по 3–4
   слова в строке — там пояснение идёт одной колонкой независимо от ширины экрана. */
.cr-cols-2 .cr-explain, .cr-cols-3 .cr-explain { grid-template-columns: 1fr; gap: 11px; }

/* Врезка «как читать» — длинное пояснение под сложным блоком. */
.cr-note {
    font-size: 12.5px; color: var(--text2); line-height: 1.65;
    border-left: 3px solid var(--border2); padding: 2px 0 2px 14px; margin: 14px 2px 0;
}
.cr-note b { color: var(--text); font-weight: 650; }

/* ── Сегмент-переключатель и чипы-пресеты ─────────────────────────────────── */
.cr-seg {
    display: inline-flex; gap: 2px; padding: 3px; flex-wrap: wrap;
    background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.cr-seg a, .cr-seg button {
    border: 0; background: transparent; color: var(--text2); font: inherit;
    font-size: 12px; font-weight: 650; padding: 5px 12px; border-radius: 7px;
    cursor: pointer; text-decoration: none; white-space: nowrap;
    transition: background-color .14s var(--ease-out), color .14s var(--ease-out);
}
.cr-seg a:hover, .cr-seg button:hover { color: var(--text); }
.cr-seg a.on, .cr-seg button.on { background: var(--accent); color: #fff; }
/* Тач-цели на телефоне: периоды и режимы были 27–29 px. 36 px внутри подложки
   сегмента — снаружи ~44. Ссылки центруем флексом, у кнопок это по умолчанию. */
@media (max-width: 760px) {
    .cr-seg a, .cr-seg button { min-height: 36px; display: inline-flex; align-items: center; justify-content: center; }
}

.cr-presets { display: flex; gap: 7px; flex-wrap: wrap; }
.cr-preset {
    font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 999px;
    border: 1px solid var(--border2); color: var(--text2); text-decoration: none; white-space: nowrap;
    transition: border-color .14s var(--ease-out), background-color .14s var(--ease-out), color .14s var(--ease-out);
}
@media (hover: hover) { .cr-preset:hover { color: var(--text); border-color: var(--accent-ring); } }
.cr-preset.on { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }

/* ── Сетка ссылок в смежные разделы ──────────────────────────────────────── */
.cr-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cr-links.cols-4 { grid-template-columns: repeat(4, 1fr); }
.cr-link {
    background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px;
    display: flex; flex-direction: column; text-decoration: none; color: var(--text);
    transition: border-color .15s var(--ease-out), transform .15s var(--ease-out);
}
.cr-link:hover { border-color: var(--border2); transform: translateY(-2px); color: var(--text); }
.cr-link h3 { font-size: 13.5px; font-weight: 700; margin: 0 0 6px; }
.cr-link p { font-size: 12.5px; color: var(--text2); margin: 0; line-height: 1.5; flex: 1; }
.cr-link .go { font-size: 12px; font-weight: 700; color: var(--accent2); margin-top: 12px; }
@media (max-width: 860px) { .cr-links, .cr-links.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cr-links, .cr-links.cols-4 { grid-template-columns: 1fr; } }

/* ── Сетка «две/три равные колонки» для блоков секции ────────────────────── */
.cr-cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
/* Одиночная панель в двухколоночном гриде: вторая колонка иначе остаётся пустой дырой.
   Тот же приём, что у .cr-ins-grid.cols-N. */
.cr-cols-2.cols-1 { grid-template-columns: minmax(0, 1fr); }
.cr-cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
/* Ряд ВНУТРИ панели — не ряд карточек, а два элемента одного блока (график капитализации
   и бублик доминации). Они заведомо разной высоты: без выравнивания низкий липнет к верху
   и под ним зияет дыра, по центру ряд читается как одно целое. Ряды из карточек
   (`.cr-cols-2` на верхнем уровне) это правило не трогает — там растяжка на месте. */
.cr-panel-b > .cr-cols-2 { align-items: center; }
@media (max-width: 900px) { .cr-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .cr-cols-2, .cr-cols-3 { grid-template-columns: minmax(0, 1fr); } }

/* Крупное число внутри панели (ответ блока) */
.cr-big { font-size: 27px; font-weight: 800; letter-spacing: -.6px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.cr-big.is-up { color: var(--green); } .cr-big.is-down { color: var(--red); }
.cr-big.is-warn { color: var(--yellow); } .cr-big.is-accent { color: var(--accent2); }
.cr-big span { font-size: 12px; font-weight: 600; color: var(--text2); margin-left: 5px; letter-spacing: 0; }
/* Подпись под крупным числом: сколько монет стоит за индексом альтсезона */
.cr-alt-sub { font-size: 12px; color: var(--text2); margin-top: 4px; }

/* Горизонтальные полосы сравнения (что если бы, распределение) */
.cr-bars { display: flex; flex-direction: column; gap: 9px; }
.cr-bar { display: grid; grid-template-columns: minmax(110px, 170px) 1fr minmax(78px, auto); align-items: center; gap: 12px; font-size: 12.5px; }
.cr-bar .nm { color: var(--text2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Попап тултипа живёт внутри .nm — overflow:hidden резал его в ноль */
.cr-bar .nm:has(.tooltip-icon) { overflow: visible; }
.cr-bar.is-best .nm { color: var(--text); font-weight: 650; }
.cr-bar .track { height: 9px; border-radius: 999px; background: var(--bg3); overflow: hidden; }
.cr-bar .track i { display: block; height: 100%; border-radius: 999px; background: var(--text2); min-width: 2px; }
.cr-bar.is-best .track i { background: var(--green); }
.cr-bar.is-crypto .track i { background: var(--cr-btc); }
.cr-bar .val { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
/* Процент под суммой: сама доходность, ради которой строку и читают */
.cr-bar .val .pct { display: block; font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--text2); }
.cr-bar .val.is-up { color: var(--green); } .cr-bar .val.is-down { color: var(--red); }

/* ── Шкала «где значение внутри диапазона» (альтсезон, любая метрика 0–100) ──
   Зоны раскрашены, метка-булавка стоит на текущем значении: видно не только
   число, но и насколько оно далеко от порогов. */
/* position:relative на обёртке, а не на .track: у трека overflow:hidden ради
   скруглений, и булавка внутри него обрезалась бы сверху. */
.cr-scale { margin-top: 10px; position: relative; }
.cr-scale .track {
    height: 9px; border-radius: 999px; overflow: hidden;
    display: flex; background: var(--bg3);
}
.cr-scale .track i { display: block; height: 100%; }
.cr-scale .pin {
    position: absolute; top: -4px; width: 3px; height: 17px; border-radius: 2px;
    background: var(--text); box-shadow: 0 0 0 2px var(--bg2); transform: translateX(-50%);
}
.cr-scale .ends {
    display: flex; justify-content: space-between; margin-top: 7px;
    font-size: 10.5px; color: var(--cr-faint); font-variant-numeric: tabular-nums;
}

/* ── Пустое состояние ───────────────────────────────────────────────────── */
.cr-empty {
    color: var(--text2); font-size: 13px; padding: 26px 18px; text-align: center;
    border: 1px dashed var(--border2); border-radius: var(--radius);
}

/* ═════════════════════ §B. Компоненты блоков раздела ═══════════════════════ */

/* Глобальные тоны (используются во всех таблицах и списках раздела) */
.up { color: var(--green); } .down { color: var(--red); } .flat { color: var(--text2); }

/* Вопросик-подсказка — в кружочке (как в скринере акций), единообразно по разделу.
   Перебивает и тоновые классы (.down у иконки — позиционирование попапа, не тон). */
.tooltip-icon, .tooltip-icon.down, .cr-ins .a .tooltip-icon {
    width: 14px; height: 14px; border: 1px solid var(--border2); border-radius: 50%;
    color: var(--text2); font-size: 9px; font-weight: 700; line-height: 1;
    margin-left: 5px; flex-shrink: 0; vertical-align: middle;
}
.tooltip-icon:hover, .tooltip-icon:focus { color: #fff; background: var(--accent); border-color: var(--accent); }

/* ── Легаси-шапка страницы (карточка монеты, сектор) ─────────────────────── */
.cr-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; }
.cr-h1 { margin: 0; font-size: 26px; letter-spacing: -.5px; }
.cr-sub { margin: 6px 0 0; color: var(--text2); font-size: 13.5px; }
.cr-upd { font-size: 12px; color: var(--text2); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.cr-upd .dot { flex: none; cursor: default; user-select: none; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 22%, transparent); }
.cr-upd.stale { color: var(--yellow); } .cr-upd.stale .dot { background: var(--yellow); box-shadow: 0 0 0 3px color-mix(in srgb, var(--yellow) 22%, transparent); }

/* Глобальный бар метрик (карточка сектора) */

/* ── Таблица монет ───────────────────────────────────────────────────────── */
.cr-tablewrap { padding: 6px 10px; }
/* Таблица «Где торгуется» — nowrap-таблица (не карточки): нужен свой горизонтальный скролл,
   иначе на мобилке width:max-content распирает всю страницу (общий .cr-tablewrap на узком экране
   имеет overflow:visible ради карточных таблиц). Двойной класс перебивает мобильный overflow. */
.cr-tablewrap.cr-mkt-wrap { overflow-x: auto; }
.cr-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.cr-table th { font-size: 11px; color: var(--text2); text-align: right; font-weight: 600; padding: 9px 7px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.cr-table th.l, .cr-table td.l { text-align: left; }
.cr-table td { padding: 11px 7px; border-bottom: 1px solid var(--border); font-size: 13.5px; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-table tbody tr:last-child td { border-bottom: none; }
@media (hover: hover) { .cr-table tbody tr:hover td { background: var(--bg3); } }
.cr-coin { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.cr-coin img { width: 26px; height: 26px; border-radius: 50%; flex: none; background: var(--bg3); }
.cr-coin .nm { font-weight: 600; } .cr-coin .sy { color: var(--text2); font-size: 12px; text-transform: uppercase; margin-left: 5px; }
.cr-rank { color: var(--text2); }
.cr-usd2 { display: block; color: var(--text2); font-size: 11px; margin-top: 1px; }
.cr-spark { width: 100%; max-width: 120px; height: 34px; display: block; margin-left: auto; }
/* table-layout:fixed → колонки делят 100% ширины контейнера, гор. скролла нет при
   любой ширине. Доли колонок (сумма ~100% при всех видимых; скрытые — перераспределяются).
   Колонкам процентов нужно ~8%: при 6.5% значения вида «+136.5%» и «−12.53%» не влезали
   и обрезались многоточием («+136.…»). Ширину добираем у «Монеты» — там обрезка штатная. */
.cr-table th:nth-child(1){ width: 3.5%; }    /* # */
.cr-table th:nth-child(2){ width: 17%; }     /* Монета */
.cr-table th:nth-child(3){ width: 10%; }     /* Цена */
.cr-table th:nth-child(4),.cr-table th:nth-child(5),
.cr-table th:nth-child(6),.cr-table th:nth-child(7){ width: 8%; }    /* 1ч/24ч/7д/30д */
.cr-table th:nth-child(8){ width: 8%; }      /* От макс. */
.cr-table th:nth-child(9){ width: 9.5%; }    /* Объём 24ч */
.cr-table th:nth-child(10){ width: 11%; }    /* Капитализация */
.cr-table th:nth-child(11){ width: 9%; }     /* спарклайн */
/* Длинное имя монеты не распирает колонку — обрезаем многоточием. */
.cr-table td.l { overflow: hidden; }
.cr-coin { min-width: 0; max-width: 100%; }
.cr-coin > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Мобильная сортировка скринера: селект вместо кликов по (скрытым в картах) заголовкам.
   Базовое display:none ДО @media, иначе более позднее правило перебьёт показ на мобилке. */
.cr-sortmobile { display: none; align-items: center; gap: 8px; margin: 0 0 12px; }
.cr-sortmobile select { flex: 1; min-height: 40px; font-size: 16px; padding: 8px 10px;
  background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; color: var(--text); }
.cr-sortmobile button { min-height: 40px; padding: 0 12px; background: var(--bg2);
  border: 1px solid var(--border); border-radius: 10px; color: var(--text); cursor: pointer; font-size: 15px; }
/* ── Мобильный/планшетный вид (≤1100px): КАРТОЧКИ ─────────────────────────────
   Плотную числовую таблицу на узком экране разворачиваем в карточки: «Монета» — шапка,
   остальные метрики — парами «метка: значение» из data-label.
   Порог 1100, а не 1000: на 1000–1100 таблица ещё показывалась, но контейнер сжимался до
   ~930px и почти каждое число резалось многоточием. */
@media (max-width:1100px){
  .cr-tablewrap { overflow: visible; padding: 0; background: none; border: 0; }
  .cr-table, .cr-table tbody, .cr-table tr, .cr-table td { display: block; width: auto; }
  .cr-table { table-layout: auto; min-width: 0; }
  .cr-table thead { display: none; }
  .cr-table tbody tr { background: var(--bg2); border: 1px solid var(--border);
    border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; }
  .cr-table tbody tr:hover td { background: none; }
  .cr-table td { border: 0; padding: 5px 0; text-align: right; white-space: normal;
    overflow: visible; text-overflow: clip; }
  .cr-table td.cr-rank { display: none; }
  .cr-table td.l:nth-child(2) { text-align: left; padding: 0 0 9px; margin-bottom: 8px;
    border-bottom: 1px solid var(--border); }
  /* Длинное имя (токенизированные фонды: «Invesco Short Duration US Government…») съедало
     ТИКЕР: он уезжал за край карточки и монета оставалась без опознавательного знака.
     Имя сжимается многоточием, тикер держится справа и не сжимается. */
  .cr-table .cr-coin > span { max-width: none; display: flex; min-width: 0;
    align-items: baseline; gap: 5px; }
  .cr-table .cr-coin .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cr-table .cr-coin .sy { flex: none; margin-left: 0; }
  .cr-table td[data-label] { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
  .cr-table td[data-label]::before { content: attr(data-label); color: var(--text2);
    font-size: 12.5px; font-weight: 500; text-align: left; flex-shrink: 0; }
  .cr-table td[data-label] .cr-usd2 { display: inline; margin: 0 0 0 8px; }
  .cr-table td[data-label] .cr-spark { max-width: 130px; margin-left: 0; }
  .cr-sortmobile { display: flex; }
}
.cr-scroll-hint { display: none; }

/* Скринер: сортируемые заголовки + панель фильтров */
.cr-table th[data-sort] { cursor: pointer; user-select: none; }
.cr-table th[data-sort]:hover { color: var(--text); }
.cr-table th.sorted { color: var(--text); }
.cr-table th.sorted::after { content: '▾'; margin-left: 4px; font-size: 9px; vertical-align: middle; }
.cr-table th.sorted[data-dir="asc"]::after { content: '▴'; }
.cr-filterbar { background: var(--bg2); border: 1px solid var(--border); border-radius: 16px; padding: 16px 18px; margin-bottom: 18px; }
.cr-filterbar .bfilter-row { margin-bottom: 10px; }
.cr-filterbar .bfilter-row + .bfilter-row { margin-bottom: 0; }
.cr-ranges { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 11px; margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--border); }
.crf-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.crf-field > label { font-size: 11px; font-weight: 700; color: var(--text2); text-transform: uppercase; letter-spacing: .4px; white-space: nowrap; }
.cr-range { display: flex; align-items: center; gap: 4px; background: var(--bg3); border: 1px solid var(--border); border-radius: 9px; padding: 0 8px; transition: border-color .12s, box-shadow .12s; }
.cr-range:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.cr-range input { flex: 1; width: 100%; min-width: 0; background: transparent; border: none; padding: 9px 2px; color: var(--text); font-size: 13px; text-align: center; font-variant-numeric: tabular-nums; box-sizing: border-box; -moz-appearance: textfield; }
.cr-range input::placeholder { color: var(--text2); opacity: .75; }
.cr-range input::-webkit-inner-spin-button, .cr-range input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.cr-range input:focus { outline: none; }
.cr-range-sep { flex: none; color: var(--text2); font-size: 12px; opacity: .6; }
.cr-filters-btm { display: flex; align-items: center; gap: 12px; margin-top: 13px; }
.cr-search { position: relative; flex: 1; max-width: 340px; }
.cr-search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--text2); pointer-events: none; }
.cr-search input { width: 100%; padding: 9px 12px 9px 33px; background: var(--bg3); border: 1px solid var(--border); border-radius: 9px; color: var(--text); font-size: 13px; box-sizing: border-box; transition: border-color .12s, box-shadow .12s; }
.cr-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.cr-reset { margin-left: auto; flex: none; background: var(--bg3); border: 1px solid var(--border); border-radius: 9px; padding: 9px 16px; color: var(--text2); font-size: 13px; font-weight: 600; cursor: pointer; transition: color .12s, border-color .12s; }
@media (hover: hover) { .cr-reset:hover { color: var(--text); border-color: var(--accent-ring); } }
.cr-fcount { margin-top: 13px; font-size: 12px; color: var(--text2); }

/* ── Конвертер «любая единица ↔ любая» ───────────────────────────────────── */
.cr-conv { padding: 14px 18px; }
.cr-conv-box { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 12px; }
.cr-conv-row { display: flex; gap: 8px; align-items: stretch; flex: 1 1 260px; min-width: 230px; max-width: 360px; }
.cr-conv-in { flex: 1; min-width: 0; width: 100%; background: var(--bg3); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; color: var(--text); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; box-sizing: border-box; transition: border-color .12s, box-shadow .12s; }
.cr-conv-in:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
/* min-height обязателен: в ряду конвертера селект растягивается по соседнему инпуту, а
   отдельно стоящий (форма DCA) схлопывался до 19px — на фоне инпута в 39px строка формы
   разъезжалась, подписи полей вставали на разной высоте. */
.cr-conv-unit { flex: none; width: 150px; min-height: 40px; background: var(--bg3); border: 1px solid var(--border); border-radius: 10px; padding: 0 10px; color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer; box-sizing: border-box; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b8b93' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 28px; }
.cr-conv-unit:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
/* Поле-поиск единицы: то же поле, но текст в нём набирают. Стрелка вынесена из фона в
   отдельный элемент: фоновая картинка часть поля, и над ней стоял текстовый курсор. */
.cr-conv-unit.is-search { cursor: text; width: 170px; background-image: none; }
.cr-conv-caret { position: absolute; top: 1px; right: 1px; bottom: 1px; width: 26px; cursor: pointer;
  border-radius: 0 9px 9px 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b8b93' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; }
/* Свой выпадающий список вместо нативного <datalist>: его popup Chrome рисует своей темой
   (белый на тёмной витрине) и color-scheme страницы не слушает. */
.cr-conv-pick { position: relative; flex: none; }
.cr-conv-pop { position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; width: 100%;
  max-height: 260px; overflow-y: auto; padding: 4px; background: var(--bg2);
  border: 1px solid var(--border2); border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.5); }
.cr-conv-pop[hidden] { display: none; }
.cr-conv-opt { padding: 7px 10px; border-radius: 7px; font-size: 13px; font-weight: 600;
  color: var(--text); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-conv-opt:hover { background: var(--bg3); }
.cr-conv-swap { flex: none; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--bg2); border: 1px solid var(--border); color: var(--text2); cursor: pointer; transition: color .12s, border-color .12s, transform .1s; }
@media (hover: hover) { .cr-conv-swap:hover { color: var(--accent); border-color: var(--accent-ring); } }
.cr-conv-swap:active { transform: scale(.9); }
.cr-conv-rate { margin-top: 11px; text-align: center; font-size: 13px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; min-height: 16px; }
@media (max-width:600px){ .cr-conv-row { max-width: none; } .cr-conv-swap { transform: rotate(90deg); } .cr-conv-swap:active { transform: rotate(90deg) scale(.9); } }
/* На 360 с полем 16px (без зума iOS) сумма «5 356 159,29» не влезала в 120 px — поле выбора монеты уже. */
@media (max-width:420px){ .cr-conv-unit, .cr-conv-unit.is-search { width: 136px; } }

/* ── Тепловая карта (treemap; раскладку считает static/js/crypto_heatmap.js) ── */
/* Фильтры карты: одна строка из сегментов с мелкими подписями. Раньше это были четыре
   ряда крупных .bchip — до карты приходилось прокручивать четверть экрана. */
.cr-map-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 14px; }
.cr-map-grp { display: inline-flex; align-items: center; gap: 7px; }
.cr-map-grp .cap {
    font-family: var(--cr-mono); font-size: 9.5px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--cr-faint); white-space: nowrap;
}
.cr-map-bar .cr-seg { flex-wrap: nowrap; }
.cr-map-bar .cr-seg button { padding: 4px 9px; }
/* На 360 ряд «Тип» с четырьмя кнопками шире экрана, и «Стейблкоины» срезалась
   краем. Группа фильтров получает свою прокрутку вбок вместо обрезки. */
@media (max-width:420px){
  .cr-map-grp { max-width:100%; overflow-x:auto; scrollbar-width:none; }
  .cr-map-grp::-webkit-scrollbar { display:none; }
  .cr-map-grp .cr-seg { flex:none; }
}
.cr-map-wrap { padding: 5px; }
.cr-hm { position: relative; width: 100%; height: 560px; overflow: hidden; border-radius: 8px; background: #0d100e; }
.cr-hm-tile { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; overflow: hidden; text-decoration: none; color: #fff; border-radius: 2px; box-sizing: border-box; padding: 3px; line-height: 1.12; transition: filter .1s; }
@media (hover: hover) { .cr-hm-tile:hover { filter: brightness(1.18); z-index: 2; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.6); } }
.cr-hm-logo { border-radius: 50%; object-fit: cover; background: rgba(255,255,255,.9); flex: none; }
.cr-hm-sym { font-weight: 800; letter-spacing: -.3px; text-shadow: 0 1px 2px rgba(0,0,0,.45); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-hm-pct { font-weight: 600; opacity: .95; font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px rgba(0,0,0,.45); }
@media (max-width:560px){ .cr-hm { height: 600px; } .cr-hm.cr-hm-mini { height: 320px; } }
.cr-map-scale { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 12px; color: var(--text2); font-variant-numeric: tabular-nums; }
/* Полосу легенды рисует crypto_heatmap.js: границы зависят от выбранного периода, поэтому
   градиент задаётся инлайном, а не в CSS. */
.cr-map-scale .bar { flex: none; width: 180px; height: 10px; border-radius: 999px; }
.cr-map-scale .cap { margin-left: auto; font-size: 11px; }
/* Середина шкалы — тот же нейтральный серый, что FLAT в crypto_heatmap.js (colorFor).
   Стояло rgb(38,46,42) от старой тёмно-зелёной подложки, и легенда обещала у нуля
   зелёный, пока карта рисовала там красный. */
.cr-map-grad { flex: none; width: 180px; height: 10px; border-radius: 999px; background: linear-gradient(90deg, rgb(231,60,76), rgb(70,76,86), rgb(33,197,94)); }
.cr-map-scale-note { margin-left: auto; font-size: 11px; }
@media (max-width:560px){ .cr-map-scale .cap, .cr-map-scale-note { display: none; } }

/* Заголовок сектора внутри карты — как в карте акций: без него двухуровневая раскладка
   читается как обычная россыпь плиток. */
.cr-hm-sec {
    position: absolute; z-index: 2; pointer-events: none;
    font-size: 10px; font-weight: 700; letter-spacing: .02em; color: rgba(255,255,255,.62);
    text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Своя подсказка вместо нативного title: тот показывался через секунду и одной строкой. */
.cr-hm-tip {
    position: fixed; z-index: 9999; pointer-events: none; opacity: 0;
    transition: opacity .12s var(--ease-out);
    background: var(--bg2); border: 1px solid var(--border2); border-radius: 10px;
    padding: 10px 12px; min-width: 190px; box-shadow: 0 12px 30px rgba(0,0,0,.45);
    font-size: 12px; color: var(--text2); font-variant-numeric: tabular-nums;
}
.cr-hm-tip h4 { margin: 0 0 6px; font-size: 13px; color: var(--text); font-weight: 700; }
.cr-hm-tip .r { display: flex; justify-content: space-between; gap: 14px; line-height: 1.7; }
.cr-hm-tip .r b { color: var(--text); font-weight: 650; }
.cr-hm.cr-hm-mini { height: 230px; }

/* ── Таблица секторов ───────────────────────────────────────────────────── */
.cr-cat-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.cr-cat-table th { font-size: 11px; color: var(--text2); text-align: right; font-weight: 600; padding: 10px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.cr-cat-table th.l, .cr-cat-table td.l { text-align: left; }
.cr-cat-table td { padding: 12px; border-bottom: 1px solid var(--border); font-size: 14px; text-align: right; white-space: nowrap; }
.cr-cat-table tbody tr:last-child td { border-bottom: none; }
.cr-cat-table tbody tr:hover td { background: var(--bg3); }
.cr-cat-rank { color: var(--text2); width: 36px; }
.cr-cat-name { display: flex; align-items: center; gap: 11px; min-width: 0; }
.cr-cat-row { cursor: pointer; }
.cr-cat-name .nm { font-weight: 600; overflow: hidden; text-overflow: ellipsis; color: inherit; text-decoration: none; }
.cr-cat-row:hover .nm { color: var(--accent2); }
.cr-cat-logos { display: inline-flex; flex: none; }
.cr-cat-logos img { width: 22px; height: 22px; border-radius: 50%; margin-left: -7px; border: 1.5px solid var(--bg2); background: var(--bg3); object-fit: cover; }
.cr-cat-logos img:first-child { margin-left: 0; }
@media (max-width:1000px){
  .cr-cat-table, .cr-cat-table tbody, .cr-cat-table tr, .cr-cat-table td { display: block; width: auto; }
  .cr-cat-table { table-layout: auto; min-width: 0; }
  .cr-cat-table thead { display: none; }
  .cr-cat-table tbody tr { background: var(--bg2); border: 1px solid var(--border);
    border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; }
  .cr-cat-table tbody tr:hover td { background: none; }
  .cr-cat-table td { border: 0; padding: 5px 0; text-align: right; white-space: normal; }
  .cr-cat-table td.cr-cat-rank { display: none; }
  .cr-cat-table td.l:nth-child(2) { text-align: left; padding: 0 0 9px; margin-bottom: 8px;
    border-bottom: 1px solid var(--border); }
  .cr-cat-name .nm { max-width: none; }
  .cr-cat-table td[data-label] { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
  .cr-cat-table td[data-label]::before { content: attr(data-label); color: var(--text2);
    font-size: 12.5px; font-weight: 500; text-align: left; flex-shrink: 0; }
}

/* ── «В тренде» и списки лидеров (карточки-строки) ───────────────────────── */
.cr-trend-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.cr-trend-rank { flex: none; width: 22px; text-align: center; font-size: 12px; font-weight: 700; color: var(--text2); }
.mover-card[href] { color: inherit; text-decoration: none; }
.cr-mv-list { display: flex; flex-direction: column; gap: 8px; }
.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.section-title { font-size: 17px; font-weight: 700; }
.section-link { font-size: 13px; color: var(--text2); text-decoration: none; }
.section-link:hover { color: var(--accent2); }
@media (max-width:640px){ .section-link, .cr-more { display: inline-flex; align-items: center; min-height: 40px; } }
.mover-card { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: var(--radius-sm); background: var(--bg2); border: 1px solid var(--border); cursor: pointer; transition: border-color .12s, transform .12s, box-shadow .12s; }
@media (hover: hover) { .mover-card:hover { border-color: var(--border2); transform: translateY(-2px); box-shadow: var(--shadow); } }
.mover-card:active { transform: translateY(0) scale(.99); }
.mover-spark { width: 60px; height: 26px; flex-shrink: 0; }
@media (max-width:520px){ .mover-spark { display: none; } }
.mover-logo { width: 38px; height: 38px; border-radius: 50%; background: var(--bg3); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 11px; flex-shrink: 0; color: var(--text2); letter-spacing: -.5px; }
.mover-logo-img { object-fit: cover; }
.mover-sym { font-weight: 700; font-size: 14px; line-height: 1.2; }
.mover-name { font-size: 12px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; }
.cr-mv-note { font-size: 11px; color: var(--text2); margin: 12px 0 0; }

/* ── Ширина рынка (breadth) ─────────────────────────────────────────────── */
.cr-br-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 11px; }
.cr-br-ttl { font-size: 13.5px; font-weight: 700; }
/* Ссылка на статью глоссария у нестандартного термина: цвет наследуем, отличаем
   только пунктиром — иначе синяя ссылка спорит с заголовком панели. */
.cr-term { color: inherit; text-decoration: underline dotted; text-underline-offset: 3px;
           text-decoration-color: var(--border2); }
.cr-term:hover { color: var(--accent2); text-decoration-color: currentColor; }
.cr-br-mood { font-size: 12px; font-weight: 700; padding: 3px 11px; border-radius: 999px; white-space: nowrap; }
.cr-br-mood.up { color: var(--green); background: var(--green-soft); }
.cr-br-mood.down { color: var(--red); background: var(--red-soft); }
.cr-br-mood.flat { color: var(--text2); background: var(--bg3); }
/* Лидеры/аутсайдеры внутри панели ширины рынка: отбивка от полосы и подзаголовки
   колонок — панельных шапок у списков больше нет, блоки слиты в один. */
.cr-br-mv { margin-top: 15px; padding-top: 14px; border-top: 1px solid var(--border); }
.cr-mv-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-size: 13.5px; font-weight: 700; margin-bottom: 9px; }
.cr-mv-h.up { color: var(--green); } .cr-mv-h.down { color: var(--red); }
.cr-mv-h a { font-size: 12px; font-weight: 700; color: var(--accent2); text-decoration: none; }
.cr-br-bar { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: var(--bg3); }
.cr-br-bar .up { background: var(--green); } .cr-br-bar .down { background: var(--red); }
.cr-br-legend { display: flex; gap: 16px; margin-top: 9px; font-size: 12.5px; font-weight: 600; flex-wrap: wrap; }
.cr-br-legend .cr-br-of { color: var(--text2); font-weight: 500; margin-left: auto; }

/* ── Доминация (донат) ──────────────────────────────────────────────────── */
/* Структура рынка — полоса во всю ширину панели. Донат занимал левую четверть, остальное
   пустовало; у долей, складывающихся в 100%, ширина сегмента и есть значение. */
.cr-domb { display: flex; height: 34px; border-radius: 8px; overflow: hidden; }
.cr-domb i { display: block; height: 100%; }
.cr-domb-leg { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 11px; font-size: 13px; }
.cr-domb-leg span { display: flex; align-items: center; gap: 8px; }
.cr-domb-leg i { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.cr-domb-leg b { font-weight: 700; text-transform: uppercase; font-size: 11px; color: var(--text2); }

/* ── Индекс настроений рынка (полукруглый гейдж) ───────────────────────── */
.cr-fg { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.cr-fg-gauge { width: 200px; flex: none; text-align: center; }
.cr-fg-svg { width: 200px; height: auto; display: block; }
.cr-fg-val { font-size: 32px; font-weight: 800; line-height: 1; margin-top: -16px; font-variant-numeric: tabular-nums; }
.cr-fg-lbl { font-size: 13px; font-weight: 700; margin-top: 3px; }
.cr-fg-side { flex: 1; min-width: 240px; }
.cr-fg-ttl { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.cr-fg-desc { font-size: 12.5px; color: var(--text2); line-height: 1.6; margin: 0 0 14px; }
.cr-fg-hist { display: flex; gap: 24px; flex-wrap: wrap; }
.cr-fg-hist span { display: flex; flex-direction: column; font-size: 11px; color: var(--text2); gap: 3px; }
.cr-fg-hist b { font-size: 18px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.zone-ef{ color:#e5484d; } .zone-f{ color:#f5a524; } .zone-n{ color:#8b8b93; } .zone-g{ color:#7fbf3f; } .zone-eg{ color:#30a46c; }
@media (max-width:620px){ .cr-fg { gap: 16px; } .cr-fg-gauge, .cr-fg-svg { width: 184px; } }

/* Контрарианский вердикт по индексу + распределение времени по зонам */
.cr-fgv { border-left: 3px solid currentColor; }
/* zone-* задаёт панели currentColor ради полосы слева и тега зоны — но заголовок шапки
   своего цвета не имеет и красился в зелёный, единственный такой на витрине. */
.cr-fgv .cr-panel-h .title { color: var(--text); }
.cr-fgv-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.cr-fgv-tag { font-size: 15px; font-weight: 800; color: currentColor; }
.cr-fgv-text { font-size: 13px; color: var(--text); line-height: 1.55; margin: 0 0 12px; }
/* Отбивка сверху: гейдж и распределение раньше были двумя панелями, и граница между ними
   разделяла блоки. В одной панели полосы зон прилипли к строке «вчера / неделю назад». */
.cr-fgv-dist { display: flex; flex-direction: column; gap: 5px; margin: 16px 0 10px;
  padding-top: 14px; border-top: 1px solid var(--border); }
.cr-fgv-cap { font-size: 12px; color: var(--text2); line-height: 1.5; margin-bottom: 3px; }
.cr-fgv-zone { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; }
.cr-fgv-bar { height: 9px; background: var(--bg3); border-radius: 5px; overflow: hidden; }
.cr-fgv-bar .zbar { display: block; height: 100%; background: currentColor; border-radius: 5px; min-width: 2px; }
.cr-fgv-zlbl { font-size: 11.5px; color: var(--text2); white-space: nowrap; }
.cr-fgv-zlbl b { color: var(--text); font-variant-numeric: tabular-nums; margin-right: 5px; }
.cr-fgv-ext { font-size: 12px; color: var(--text2); line-height: 1.5; border-top: 1px solid var(--border); padding-top: 9px; }
/* Экстремумы красятся в цвет своей зоны (красный низ / зелёный верх): полная яркость
   текста на приглушённой строке била по глазам, а цвет заодно говорит, что это за край. */
.cr-fgv-ext b { font-variant-numeric: tabular-nums; }

/* ── Дневные SVG-графики без JS-библиотек (капа, доминация, DCA, наложение) ── */
.cr-chart-card { padding: 16px 18px; }
.cr-chart-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.cr-chart-ttl { font-size: 14px; font-weight: 700; }
.cr-chart-cur { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cr-chart-svg { width: 100%; height: auto; display: block; overflow: visible; }
.cr-chart-svg .axis { stroke: var(--border); stroke-width: 1; }
.cr-chart-svg .axlbl { fill: var(--text2); font-size: 10px; }
.cr-chart-svg .datelbl { fill: var(--text2); font-size: 10px; }
.cr-chart-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.cr-chart-line.is-btc { stroke: var(--cr-btc); }
.cr-chart-area { fill: url(#crGrad); opacity: .5; }
.cr-chart-note { font-size: 11.5px; color: var(--text2); margin-top: 8px; }
.cr-chart-empty { padding: 30px 16px; text-align: center; color: var(--text2); font-size: 13px; }

/* Наложение индекса на цену BTC (живой график LWC, легенда и строка-читалка) */
.cr-fgo-leg { display: flex; gap: 14px; font-size: 11.5px; flex-wrap: wrap; }
.cr-fgo-leg span { display: inline-flex; align-items: center; gap: 5px; color: var(--text2); }
.cr-fgo-l1::before, .cr-fgo-l2::before { content: ''; width: 14px; height: 3px; border-radius: 2px; }
.cr-fgo-ax { font-style: normal; margin-left: 5px; opacity: .65; }
.cr-fgo-v1 { color: var(--green); }
.cr-fgo-v2 { color: var(--cr-btc); }
.cr-fgo-l1::before { background: var(--green); }
.cr-fgo-l2::before { background: var(--cr-btc); }
.cr-fgo-read { margin-top: 8px; font-size: 12px; font-weight: 600; color: var(--text2); font-variant-numeric: tabular-nums; min-height: 16px; }

/* ── Ранкинг риск/доходность ────────────────────────────────────────────── */
.cr-risk td[data-label="Волатильность"], .cr-risk td[data-label="Просадка"] { font-variant-numeric: tabular-nums; }
/* Свой набор колонок (восемь, из них две — связь с биткоином и бета): общие доли таблицы
   монет рассчитаны на другой состав и оставляли имени монеты 17%. */
.cr-table.cr-risk th:nth-child(1) { width: 4%; }
.cr-table.cr-risk th:nth-child(2) { width: 24%; }
.cr-table.cr-risk th:nth-child(3) { width: 12%; }
.cr-table.cr-risk th:nth-child(4) { width: 13%; }
.cr-table.cr-risk th:nth-child(5) { width: 9%; }
.cr-table.cr-risk th:nth-child(6) { width: 11%; }
.cr-table.cr-risk th:nth-child(7) { width: 14%; }
.cr-table.cr-risk th:nth-child(8) { width: 13%; }
.rr-sh { display: inline-block; min-width: 44px; text-align: center; padding: 2px 8px; border-radius: 6px;
  font-weight: 800; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.rr-hi  { color: #0b3d1e; background: #7fbf3f; }
.rr-mid { color: #3a2c00; background: #f5c451; }
.rr-lo  { color: var(--text2); background: var(--bg3); }
.rr-neg { color: #fff; background: #e5484d; }
.rr-na  { color: var(--text2); background: var(--bg3); }

/* ── Бэктест усреднения (DCA) ───────────────────────────────────────────── */
.cr-dca-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 14px; padding: 16px 18px; }
.cr-dca-field { display: flex; flex-direction: column; gap: 5px; flex: 1 1 150px; min-width: 130px; }
.cr-dca-field label { font-size: 11.5px; color: var(--text2); font-weight: 600; }
.cr-dca-field .cr-conv-row { flex: none; min-width: 0; }
.cr-dca-submit { flex: 0 0 auto; }
.cr-dca-btn { background: var(--accent); color: #fff; border: none; border-radius: 10px; min-height: 40px; padding: 11px 22px; font-size: 14px; font-weight: 700; cursor: pointer; transition: filter .12s; white-space: nowrap; }
@media (hover: hover) { .cr-dca-btn:hover { filter: brightness(1.08); } }
.cr-dca-hero { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding: 20px 24px; }
.cr-dca-hero-lbl { font-size: 12.5px; color: var(--text2); margin-bottom: 3px; }
.cr-dca-hero-val { font-size: 32px; font-weight: 800; line-height: 1; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.cr-dca-hero-pnl { font-size: 16px; font-weight: 700; margin-top: 6px; font-variant-numeric: tabular-nums; }
.cr-dca-hero-pnl.up { color: var(--green); } .cr-dca-hero-pnl.down { color: var(--red); }
.cr-dca-hero-sub { flex: 1 1 260px; font-size: 13px; color: var(--text2); line-height: 1.55; text-align: right; }
.cr-dca-hero-sub b { color: var(--text); }
.cr-dca-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cr-dca-stat { background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; padding: 13px 15px; display: flex; flex-direction: column; gap: 4px; }
.cr-dca-stat span { font-size: 11.5px; color: var(--text2); }
.cr-dca-stat b { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cr-dca-stat b.up { color: var(--green); } .cr-dca-stat b.down { color: var(--red); }
.cr-dca-l1::before, .cr-dca-l2::before { content: ''; display: inline-block; width: 14px; height: 3px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }
.cr-dca-l1::before { background: #f5a524; } .cr-dca-l2::before { background: #7fbf3f; }
/* База и подписи дат графика DCA. Классов fgo-grid/fgo-axl в CSS не осталось после
   замены SVG-графика настроения на Lightweight Charts — линия и даты рисовались чёрным
   по тёмному фону (аудит 17.09). */
.cr-fgo-svg .fgo-grid { stroke: var(--border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.cr-dca-dates { display: flex; justify-content: space-between; margin-top: 6px;
                font-size: 11.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
.cr-fgo-svg .cr-dca-inv { stroke: #f5a524; stroke-width: 1.8; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.cr-fgo-svg .cr-dca-val { stroke: #7fbf3f; stroke-width: 1.8; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.cr-dca-lump-ttl { font-size: 14px; font-weight: 700; margin-bottom: 8px; }
.cr-dca-lump p { font-size: 13px; color: var(--text); line-height: 1.6; margin: 0 0 8px; }
.cr-dca-lump p b { font-variant-numeric: tabular-nums; }
.cr-dca-lump .up { color: var(--green); } .cr-dca-lump .down { color: var(--red); }
@media (max-width:560px) {
  .cr-dca-stats { grid-template-columns: 1fr 1fr; }
  .cr-dca-hero-sub { text-align: left; }
  .cr-dca-submit { flex: 1 1 100%; }
  .cr-dca-btn { width: 100%; }
}

/* ── Обратный отсчёт до халвинга ────────────────────────────────────────── */
.cr-halving { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.cr-halving-days { font-size: 38px; font-weight: 800; line-height: 1; letter-spacing: -1px; font-variant-numeric: tabular-nums; color: var(--cr-btc); }
.cr-halving-days span { font-size: 14px; font-weight: 600; color: var(--text2); margin-left: 8px; }
.cr-halving-side { flex: 1; min-width: 240px; }
.cr-halving-meta { display: flex; gap: 22px; margin-top: 12px; flex-wrap: wrap; }
.cr-halving-meta span { display: flex; flex-direction: column; font-size: 11px; color: var(--text2); gap: 3px; }
.cr-halving-meta b { font-size: 15px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }

/* ── Сравнение монет ────────────────────────────────────────────────────── */
.cr-cmp-pickers { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.cr-cmp-pick { flex: 1 1 200px; min-width: 170px; }
.cr-cmp-pick label { display: block; font-size: 11px; font-weight: 700; color: var(--text2); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 5px; }
.cr-cmp-pick select { width: 100%; background: var(--bg3); border: 1px solid var(--border); border-radius: 9px; padding: 9px 10px; color: var(--text); font-size: 13.5px; font-weight: 600; box-sizing: border-box; }
.cr-cmp-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.cr-cmp-table th, .cr-cmp-table td { padding: 12px 14px; border-bottom: 1px solid var(--border); text-align: right; font-size: 14px; }
.cr-cmp-table th.l, .cr-cmp-table td.l { text-align: left; }
.cr-cmp-table thead th { font-size: 12px; color: var(--text2); font-weight: 700; }
.cr-cmp-table tbody tr:last-child td { border-bottom: none; }
.cr-cmp-coin { display: inline-flex; align-items: center; gap: 9px; }
.cr-cmp-coin img { width: 26px; height: 26px; border-radius: 50%; background: var(--bg3); }
.cr-cmp-metric { color: var(--text2); }
@media (max-width:1000px){
  .cr-cmp-table th.l, .cr-cmp-table td.l{
    position: sticky; left: 0; z-index: 2; background: var(--bg2);
    box-shadow: 7px 0 8px -6px rgba(0,0,0,.45); }
  .cr-cmp-table thead th.l{ z-index: 3; }
}
/* На 360 таблица из трёх колонок с отступами 14 px шире экрана — страница ехала
   вбок на 7 px. Ужимаем отступы и кегль: содержимое то же, ширина по месту. */
@media (max-width:420px){
  .cr-cmp-table th, .cr-cmp-table td { padding: 11px 8px; font-size: 13px; }
  .cr-cmp-coin { gap: 6px; }
  .cr-cmp-coin img { width: 22px; height: 22px; }
}
/* ── Телефон: сравнение без прокрутки вбок ───────────────────────────────────
   Таблицей три монеты в 336 px не помещались: страница уезжала вбок, а с
   закреплённой колонкой метрик соседние колонки резались пополам («ТС», «рлн»).
   Разворачиваем каждую строку в блок: подпись метрики сверху, значения под ней
   в столько колонок, сколько монет (--cols из шаблона). Монеты остаются рядом -
   ради этого страница и существует, - и ничего не обрезается. Шапка с тикерами
   липкая: прокрутил вниз, а какое значение чьё - по-прежнему видно. */
@media (max-width:560px){
  .cr-tablewrap:has(.cr-cmp-table) { overflow: visible; }
  .cr-cmp-table, .cr-cmp-table tbody, .cr-cmp-table thead, .cr-cmp-table tr { display: block; }
  .cr-cmp-table thead { position: sticky; top: 60px; z-index: 3; background: var(--bg);   /* под шапкой сайта (60 px) */
    border-bottom: 1px solid var(--border); }
  .cr-cmp-table thead tr { display: grid; grid-template-columns: repeat(var(--cols, 2), 1fr);
    gap: 8px; padding: 8px 0; }
  .cr-cmp-table thead th { padding: 0; background: transparent; text-align: center; }
  .cr-cmp-table thead th.l { display: none; }          /* слово «Метрика» и так ясно из подписей */
  .cr-cmp-table tbody tr { display: grid; grid-template-columns: repeat(var(--cols, 2), 1fr);
    gap: 8px; padding: 9px 0 11px; border-bottom: 1px solid var(--border); }
  .cr-cmp-table tbody tr:last-child { border-bottom: 0; }
  .cr-cmp-table td { padding: 0; border: 0; text-align: center; font-size: 13.5px; }
  /* Подпись метрики — на всю ширину строки, над значениями. */
  .cr-cmp-table td.l { grid-column: 1 / -1; position: static; background: transparent;
    box-shadow: none; text-align: left; font-size: 11px; font-weight: 600;
    letter-spacing: .04em; text-transform: uppercase; color: var(--text2);
    margin-bottom: 5px; }
  /* «нейтрально» у RSI — второй строкой: рядом с числом обе части жались к краям. */
  .cr-cmp-table td:not(.l) .cr-cmp-metric { display: block; font-size: 11px !important;
    margin-top: 1px; }
  .cr-cmp-coin { justify-content: center; gap: 6px; font-size: 13px; }
  .cr-cmp-coin img { width: 20px; height: 20px; }
}

/* Корреляционная матрица: красный (ходят вместе) → зелёный (независимы) */
.cr-corr { border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; width: auto; }
.cr-corr th, .cr-corr td { padding: 8px 10px; text-align: center; border: 1px solid var(--bg); min-width: 54px; white-space: nowrap; }
.cr-corr thead th { color: var(--text2); font-weight: 600; font-size: 11px; }
.cr-corr .cr-corr-rl, .cr-corr .cr-corr-corner { text-align: left; color: var(--text2); font-weight: 600; font-size: 11px;
  position: sticky; left: 0; z-index: 1; background: var(--bg2); }
.cr-corr thead .cr-corr-corner { z-index: 2; }
.cr-corr td { font-weight: 600; color: var(--text); }
.cr-corr td.cc-self { background: var(--bg3); color: var(--text2); }
.cr-corr td.cc-hi  { background: rgba(224,101,90,.32); color: #fff; }
.cr-corr td.cc-mid { background: rgba(232,161,58,.22); }
.cr-corr td.cc-lo  { background: rgba(56,142,60,.20); }
.cr-corr td.cc-neg { background: rgba(56,142,60,.34); color: #fff; }
.cr-corr td.cc-na  { color: var(--text2); }

/* ── Калькуляторы (конвертер / прибыль / DCA) ───────────────────────────── */
.cr-calc-tabs { display: inline-flex; gap: 4px; background: var(--bg3); padding: 3px; border-radius: 999px; flex-wrap: wrap; }
.cr-calc-tabs button { border: none; background: transparent; color: var(--text2); font-size: 13px; font-weight: 600; padding: 7px 16px; border-radius: 999px; cursor: pointer; }
.cr-calc-tabs button.active { background: var(--bg); color: var(--text); }
.cr-calc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px,1fr)); gap: 12px; margin-bottom: 16px; }
.cr-calc-field { display: flex; flex-direction: column; gap: 6px; }
.cr-calc-field label { font-size: 11px; font-weight: 700; color: var(--text2); text-transform: uppercase; letter-spacing: .4px; }
.cr-calc-field input, .cr-calc-field select { background: var(--bg3); border: 1px solid var(--border); border-radius: 9px; padding: 10px 11px; color: var(--text); font-size: 14px; font-weight: 600; box-sizing: border-box; font-variant-numeric: tabular-nums; }
.cr-calc-field input:focus, .cr-calc-field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.cr-calc-out { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 1px; background: var(--border); border-radius: var(--radius); overflow: hidden; }
.cr-calc-cell { background: var(--bg2); padding: 15px 16px; display: flex; flex-direction: column; gap: 5px; }
.cr-calc-cell .k { font-size: 11px; color: var(--text2); }
.cr-calc-cell .v { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.5px; }

/* ── Карточка монеты ────────────────────────────────────────────────────── */
.cr-card-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.cr-logo { width: 52px; height: 52px; border-radius: 50%; background: var(--bg3); flex: none; }
.cr-title { display: flex; flex-direction: column; gap: 3px; }
.cr-name { font-size: 24px; font-weight: 800; letter-spacing: -.5px; }
.cr-name .sy { color: var(--text2); font-size: 14px; font-weight: 600; text-transform: uppercase; margin-left: 6px; }
.cr-badge { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border2); color: var(--text2); }
.cr-price-big { font-size: 34px; font-weight: 800; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.cr-price-alt { color: var(--text2); font-size: 15px; font-weight: 600; margin-left: 8px; }
.cr-chg { font-size: 13px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.cr-chg.up { background: var(--green-soft); }
.cr-chg.down { background: var(--red-soft); }
.cr-chg.flat { background: var(--bg3); }
.cr-ctl { display: inline-flex; gap: 4px; background: var(--bg3); padding: 3px; border-radius: 999px; }
.cr-ctl button, .cr-ctl a { border: none; background: transparent; color: var(--text2); font-size: 12.5px; font-weight: 600; padding: 5px 12px; border-radius: 999px; cursor: pointer; }
.cr-ctl button.active, .cr-ctl a.active { background: var(--bg); color: var(--text); }
@media (max-width: 760px) {
    /* Периоды и тип графика монеты: 26 px → 36 px, с подложкой ~42. */
    .cr-ctl button, .cr-ctl a { min-height: 36px; display: inline-flex; align-items: center; justify-content: center; }
}
/* На 360 семь периодов «1Д…Всё» давали 319 px при 302 доступных — вылезали из карточки. */
@media (max-width: 420px) { .cr-ctl button, .cr-ctl a { padding-left: 9px; padding-right: 9px; } }
/* Период глубже истории монеты: кнопка гаснет, а не показывает то же окно молча */
.cr-ctl button[disabled] { opacity: .35; cursor: default; }
.cr-metrics { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--border); border-radius: var(--radius); overflow: hidden; }
@media (max-width:760px){ .cr-metrics { grid-template-columns: repeat(2,1fr); } }
.cr-metric { background: var(--bg2); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.cr-metric .k { font-size: 11px; color: var(--text2); }
.cr-metric .v { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cr-sec-title { font-size: 16px; font-weight: 700; margin: 24px 0 12px; }
.cr-more { display: inline-block; margin-top: 14px; font-weight: 600; text-decoration: none; color: var(--accent); }

/* График монеты: OHLC-строка и фулскрин — как на карточке акции (tickers/detail.html) */
.ohlc-readout { position: absolute; top: 9px; left: 46px; z-index: 5; pointer-events: none;
    display: none; gap: 9px; align-items: center; white-space: nowrap; font-size: 11px; font-weight: 600;
    letter-spacing: .2px; padding: 2px 8px; border-radius: 7px; background: rgba(22,25,38,.62); }
.ohlc-readout.show { display: flex; }
.ohlc-readout .ol { color: var(--text2); font-weight: 500; margin-right: 3px; }
.ohlc-readout .ov { color: var(--text); }
.ohlc-readout .up { color: #22c55e; }
.ohlc-readout .down { color: #ef4444; }
@media (max-width:560px) {
    .ohlc-readout { left: 42px; gap: 6px; font-size: 10px; padding: 2px 6px; max-width: calc(100% - 50px); overflow: hidden; }
    .ohlc-readout .od-date { display: none; }
}
/* Чипы-оверлеи графика (объём, средние) — вид как у чипов теханализа на карточке акции */
.ta-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px;
    border: 1px solid var(--border); background: transparent; color: var(--text2);
    font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
    transition: color .15s var(--ease-out), border-color .15s var(--ease-out), background-color .15s var(--ease-out); }
.ta-chip i { width: 9px; height: 3px; border-radius: 2px; opacity: .4; transition: opacity .15s; }
.ta-chip:hover { color: var(--text); }
.ta-chip.is-on { color: var(--text); background: var(--bg3); border-color: var(--border2); }
.ta-chip.is-on i { opacity: 1; }
@media (max-width: 760px) { .ta-chip { padding-top: 8px; padding-bottom: 8px; } }

.chart-fs-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid var(--border); background: var(--bg3); color: var(--text2); border-radius: 8px; cursor: pointer; flex: 0 0 auto; }
@media (hover: hover) { .chart-fs-btn:hover { border-color: var(--accent); color: var(--text); } }
#crChartCard:fullscreen, #crChartCard:-webkit-full-screen { background: var(--bg2); padding: 18px 22px; overflow: auto; display: flex; flex-direction: column; }
#crChartCard:fullscreen .cr-chart-wrap, #crChartCard:-webkit-full-screen .cr-chart-wrap { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
/* height задан инлайном в шаблоне — в фулскрине перебиваем, чтобы график растянулся */
#crChartCard:fullscreen #crChart, #crChartCard:-webkit-full-screen #crChart { flex: 1 1 auto; height: auto !important; min-height: 0; }

/* Технический анализ — RSI | Тренд | Волатильность */
.cr-ta { display: grid; grid-template-columns: repeat(2,1fr); padding: 0; }
.cr-ta.cr-ta-3 { grid-template-columns: repeat(3,1fr); }
.cr-ta.cr-ta-solo { grid-template-columns: 1fr; }
.cr-ta-col { padding: 16px 20px; min-width: 0; }
.cr-ta-col + .cr-ta-col { border-left: 1px solid var(--border); }
@media (max-width:1000px){
  .cr-ta, .cr-ta.cr-ta-3 { grid-template-columns: 1fr; }
  .cr-ta-col + .cr-ta-col { border-left: none; border-top: 1px solid var(--border); }
}
.cr-ta-h { font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.cr-ta-sub { font-size: 10.5px; font-weight: 600; color: var(--text2); background: var(--bg3); padding: 2px 7px; border-radius: 999px; }
.cr-ta-note { margin-top: 11px; font-size: 13px; font-weight: 700; }
.cr-ta-note.up { color: var(--green); } .cr-ta-note.down { color: var(--red); } .cr-ta-note.warn { color: var(--yellow); } .cr-ta-note.flat { color: var(--text2); }
.cr-ta-vol { font-size: 27px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; margin-top: 2px; }
.cr-ta-vol span { font-size: 12px; font-weight: 600; color: var(--text2); margin-left: 5px; }
.cr-ta-vol.flat { color: var(--text); } .cr-ta-vol.warn { color: var(--yellow); } .cr-ta-vol.down { color: var(--red); }
.cr-ta-verdict { font-size: 17px; font-weight: 800; margin-bottom: 11px; }
/* flat — основной цвет текста, не приглушённый: нейтральный вердикт равноправен up/down */
.cr-ta-verdict.up { color: var(--green); } .cr-ta-verdict.down { color: var(--red); } .cr-ta-verdict.flat { color: var(--text); }
.cr-ta-marows { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--text2); }
.cr-ta-marows b { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); }
.cr-ta-marows b.up { color: var(--green); } .cr-ta-marows b.down { color: var(--red); }
.cr-ta-cross-wrap { margin-top: 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.cr-ta-cross { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 11px; border-radius: 999px; background: var(--bg3); }
.cr-ta-cross.up { color: var(--green); } .cr-ta-cross.down { color: var(--red); } .cr-ta-cross.flat { color: var(--text); }
.cr-ta-cross-note { font-size: 11.5px; color: var(--text2); line-height: 1.45; }
.cr-rsi-track { position: relative; margin: 32px 0 8px; }
.cr-rsi-fill { display: flex; height: 10px; border-radius: 999px; overflow: hidden; }
.cr-rsi-fill .seg { height: 100%; }
.cr-rsi-fill .os { width: 30%; background: color-mix(in srgb, var(--green) 45%, var(--bg3)); }
.cr-rsi-fill .nt { width: 40%; background: var(--bg3); }
.cr-rsi-fill .ob { width: 30%; background: color-mix(in srgb, var(--red) 45%, var(--bg3)); }
.cr-rsi-mark { position: absolute; top: -4px; width: 3px; height: 18px; background: var(--text); border-radius: 2px; transform: translateX(-50%); }
.cr-rsi-bubble { position: absolute; bottom: 19px; left: 50%; transform: translateX(-50%); font-size: 13px; font-weight: 800; padding: 2px 8px; border-radius: 6px; background: var(--bg3); white-space: nowrap; font-variant-numeric: tabular-nums; box-shadow: 0 2px 6px rgba(0,0,0,.18); }
.cr-rsi-bubble::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--bg3); }
.cr-rsi-bubble.up { color: var(--green); } .cr-rsi-bubble.warn { color: var(--yellow); } .cr-rsi-bubble.flat { color: var(--text); }
.cr-rsi-zones { display: flex; }
.cr-rsi-zones span { font-size: 10px; font-weight: 700; text-align: center; }
.cr-rsi-zones .os { width: 30%; color: var(--green); } .cr-rsi-zones .nt { width: 40%; color: var(--text2); } .cr-rsi-zones .ob { width: 30%; color: var(--red); }

/* Блок «Где торгуется» (биржи) */
.cr-mkt-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.cr-mkt-table th { font-size: 11px; color: var(--text2); text-align: right; font-weight: 600; padding: 9px 12px; border-bottom: 1px solid var(--border); }
.cr-mkt-table th.l, .cr-mkt-table td.l { text-align: left; }
.cr-mkt-table td { padding: 11px 12px; border-bottom: 1px solid var(--border); font-size: 13.5px; text-align: right; }
.cr-mkt-table tbody tr:last-child td { border-bottom: none; }
.cr-mkt-exch { font-weight: 600; }
.cr-mkt-pair { color: var(--text2); font-size: 12px; }
@media (max-width:1000px){
  .cr-mkt-table { table-layout: auto; width: max-content; min-width: 100%; white-space: nowrap; }
  .cr-mkt-table th.l:first-child, .cr-mkt-table td.cr-mkt-exch{
    position: sticky; left: 0; z-index: 2; background: var(--bg2);
    box-shadow: 7px 0 8px -6px rgba(0,0,0,.45); }
  .cr-mkt-table tbody tr:hover td.cr-mkt-exch{ background: var(--bg3); }
}

/* Кнопка watchlist (звёздочка в шапке карточки) */
.cr-watch-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border-radius: 9px; border: 1px solid var(--border2); background: var(--bg3); color: var(--text2); cursor: pointer; flex: none; }
.cr-watch-btn:hover { color: var(--text); }
.cr-watch-btn.active { color: var(--yellow); border-color: var(--yellow); }

/* Прогресс-бар обращения (циркуляция / макс. эмиссия) */
.cr-supply { padding: 16px; margin-top: 1px; }
.cr-supply-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 9px; font-size: 13px; }
.cr-supply-top .k { color: var(--text2); }
.cr-supply-top .v { font-weight: 700; font-variant-numeric: tabular-nums; }
.cr-supply-bar { height: 10px; border-radius: 999px; background: var(--bg3); overflow: hidden; }
.cr-supply-bar span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.cr-supply-note { margin-top: 8px; font-size: 11.5px; color: var(--text2); }

/* Мини-конвертер на карточке монеты */
.cr-coinconv { padding: 16px; }
.cr-coinconv-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cr-coinconv-row .cr-conv-in { max-width: 200px; }
.cr-coinconv-sym { font-weight: 700; font-size: 14px; color: var(--text2); }
.cr-coinconv-eq { color: var(--text2); font-size: 18px; }
.cr-coinconv-out { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cr-coinconv-out .u { color: var(--text2); font-size: 13px; font-weight: 600; margin-left: 14px; }

/* Бейдж типа монеты */

/* ── Дисклеймер + attribution (обязателен на всех страницах раздела) ─────── */

/* ── Циклы (/crypto/cycles/): наложение циклов халвинга ──────────────────── */
.cr-cyc-svg { width: 100%; height: auto; display: block; }
/* Наведение на график циклов: вертикаль по курсору и всплывашка с числами всех циклов.
   Рисуются в обёртке над SVG, а не внутри него — у svg стоит preserveAspectRatio="none",
   и текст внутри растягивался бы вместе с картинкой. */
.cr-cyc-wrap { position: relative; }
.cr-cyc-rule { position: absolute; top: 0; bottom: 26px; width: 1px; background: var(--border2);
  pointer-events: none; }
.cr-cyc-tip { position: absolute; top: 8px; z-index: 5; pointer-events: none; min-width: 168px;
  padding: 8px 10px; background: var(--bg2); border: 1px solid var(--border2);
  border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.5); font-size: 12px; }
.cr-cyc-tip .hd { color: var(--text2); font-size: 11px; margin-bottom: 5px; }
.cr-cyc-tip .row { display: flex; align-items: center; gap: 6px; line-height: 1.7; }
.cr-cyc-tip .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.cr-cyc-tip .yr { color: var(--text2); width: 30px; }
.cr-cyc-tip b { font-variant-numeric: tabular-nums; }
.cr-cyc-tip b.none { color: var(--text2); font-weight: 400; }
.cr-cyc-tip .px { color: var(--text2); margin-left: auto; font-variant-numeric: tabular-nums; }
.cr-cyc-svg .cyc-grid { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 4; }
.cr-cyc-svg .cyc-grid.unit { stroke: var(--border2); stroke-dasharray: none; }
.cr-cyc-svg .cyc-axl { fill: var(--cr-faint); font-size: 10px; font-variant-numeric: tabular-nums; }
.cr-cyc-svg .cyc-axl.r { text-anchor: end; }
.cr-cyc-svg .cyc-axl.c { text-anchor: middle; }
.cr-cyc-line { fill: none; stroke-width: 1.6; opacity: .75; }
.cr-cyc-line.cur { stroke-width: 2.2; opacity: 1; }
/* Факты циклов под графиком: цветная метка + строка на цикл */
.cr-cyc-facts { display: flex; flex-direction: column; gap: 7px; margin-top: 12px; }
.cr-cyc-fact { display: flex; align-items: baseline; gap: 9px; font-size: 12.5px; color: var(--text2); line-height: 1.5; }
.cr-cyc-fact .dot { flex: none; width: 9px; height: 9px; border-radius: 3px; align-self: center; }
.cr-cyc-fact b { color: var(--text); font-weight: 650; font-variant-numeric: tabular-nums; }

/* ── Циклы: теплокарта месячных изменений ────────────────────────────────── */
.cr-hmt-wrap { overflow-x: auto; }
.cr-hmt { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.cr-hmt th, .cr-hmt td { padding: 7px 6px; text-align: center; font-size: 12px; border: 1px solid var(--bg); min-width: 47px; white-space: nowrap; }
.cr-hmt thead th { color: var(--text2); font-weight: 600; font-size: 11px; }
.cr-hmt .yr { color: var(--text2); font-weight: 650; text-align: left; min-width: 56px; }
.cr-hmt .yr small { font-weight: 500; color: var(--cr-faint); margin-left: 4px; }
.cr-hmt td { color: var(--text); font-weight: 600; }
.cr-hmt td.hm-none { color: var(--cr-faint); font-weight: 400; }
.cr-hmt td.hm-p1 { background: color-mix(in srgb, var(--green) 12%, transparent); }
.cr-hmt td.hm-p2 { background: color-mix(in srgb, var(--green) 24%, transparent); }
.cr-hmt td.hm-p3 { background: color-mix(in srgb, var(--green) 42%, transparent); }
.cr-hmt td.hm-m1 { background: color-mix(in srgb, var(--red) 12%, transparent); }
.cr-hmt td.hm-m2 { background: color-mix(in srgb, var(--red) 24%, transparent); }
.cr-hmt td.hm-m3 { background: color-mix(in srgb, var(--red) 42%, transparent); }
.cr-hmt td.hm-cur { outline: 2px solid var(--accent); outline-offset: -2px; }
.cr-hmt .tot { font-weight: 750; }
.cr-hmt tfoot td, .cr-hmt tfoot th { border-top: 2px solid var(--border2); color: var(--text2); font-size: 11.5px; }
.cr-hmt tfoot .yr { font-weight: 600; }

/* ── Циклы: сезонность (12 столбиков от общей базовой линии) ─────────────── */
.cr-season { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; align-items: end; }
.cr-season .col { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; }
.cr-season .val { font-size: 10.5px; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--text2); }
.cr-season .well { position: relative; width: 100%; max-width: 34px; height: 96px; }
.cr-season .well i { position: absolute; left: 0; right: 0; border-radius: 3px; }
.cr-season .well i.up { background: color-mix(in srgb, var(--green) 62%, transparent); bottom: 50%; }
.cr-season .well i.down { background: color-mix(in srgb, var(--red) 62%, transparent); top: 50%; }
.cr-season .well::after { content: ''; position: absolute; left: -3px; right: -3px; top: 50%; height: 1px; background: var(--border2); }
.cr-season .col.cur .well i { outline: 2px solid var(--accent); outline-offset: 1px; }
.cr-season .lbl { font-size: 11px; color: var(--text2); font-weight: 600; }
.cr-season .cnt { font-size: 10px; color: var(--cr-faint); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .cr-season { grid-template-columns: repeat(6, 1fr); row-gap: 14px; align-items: end; }
  .cr-season .well { height: 64px; }
}

/* ── Циклы: итоги по годам (строка: год / полоса / итог / просадка) ──────── */
.cr-years { display: flex; flex-direction: column; gap: 8px; }
.cr-yr { display: grid; grid-template-columns: 52px 1fr 76px minmax(96px, auto); align-items: center; gap: 10px; font-size: 12.5px; }
.cr-yr .y { color: var(--text2); font-weight: 650; }
.cr-yr .y small { display: block; font-weight: 500; color: var(--cr-faint); font-size: 10px; }
.cr-yr .track { height: 9px; border-radius: 999px; background: var(--bg3); overflow: hidden; }
.cr-yr .track i { display: block; height: 100%; border-radius: 999px; min-width: 2px; }
.cr-yr.up .track i { background: var(--green); }
.cr-yr.down .track i { background: var(--red); }
.cr-yr .v { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.cr-yr.up .v { color: var(--green); }
.cr-yr.down .v { color: var(--red); }
.cr-yr .dd { text-align: right; font-size: 11px; color: var(--cr-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 560px) { .cr-yr { grid-template-columns: 46px 1fr 66px; } .cr-yr .dd { display: none; } }

/* ── Среди активов (/crypto/assets/): линии роста 100 000 ₽ ──────────────── */
.cr-as-svg { width: 100%; height: auto; display: block; }
.cr-as-svg .as-grid { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 4; }
.cr-as-svg .as-axl { fill: var(--cr-faint); font-size: 10px; font-variant-numeric: tabular-nums; }
.cr-as-svg .as-axl.r { text-anchor: end; }
.cr-as-line { fill: none; stroke-width: 1.7; opacity: .85; }
.cr-as-line.is-btc { stroke-width: 2.3; opacity: 1; }
/* Легенда-итоги: кто чем закончил отрезок */
.cr-as-legend { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.cr-as-row { display: grid; grid-template-columns: 14px minmax(110px, 170px) 1fr auto; align-items: center; gap: 10px; font-size: 12.5px; }
.cr-as-row .dot { width: 9px; height: 9px; border-radius: 3px; }
.cr-as-row .nm { color: var(--text2); }
.cr-as-row .fin { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.cr-as-row .pc { text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; font-size: 12px; min-width: 52px; }
.cr-as-row .pc.up { color: var(--green); } .cr-as-row .pc.down { color: var(--red); }

/* ── Среди активов: лесенка волатильности ────────────────────────────────── */
.cr-vol { display: flex; flex-direction: column; gap: 9px; }
.cr-vol-row { display: grid; grid-template-columns: 14px minmax(96px, 150px) 1fr 56px minmax(84px, auto); align-items: center; gap: 10px; font-size: 12.5px; }
.cr-vol-row .dot { width: 9px; height: 9px; border-radius: 3px; }
.cr-vol-row .nm { color: var(--text2); }
.cr-vol-row .track { height: 9px; border-radius: 999px; background: var(--bg3); overflow: hidden; }
.cr-vol-row .track i { display: block; height: 100%; border-radius: 999px; min-width: 2px; }
.cr-vol-row .v { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.cr-vol-row .dd { text-align: right; font-size: 11px; color: var(--cr-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 560px) { .cr-vol-row { grid-template-columns: 12px minmax(80px, 110px) 1fr 52px; } .cr-vol-row .dd { display: none; } }
/* Цветные значения в полосе-тикере (страница «Среди активов»: пять процентов за год) */
.cr-strip .v.is-up { color: var(--green); }
.cr-strip .v.is-down { color: var(--red); }

/* ── Среди активов: строки «доля биткоина в портфеле» (вариант .cr-yr с длинным
   именем; на узком экране имя занимает свою строку, полоса остаётся видимой) ── */
.cr-yr.cr-mix-row { grid-template-columns: minmax(150px, 230px) 1fr 96px minmax(110px, auto); }
.cr-yr.cr-mix-row .y { white-space: normal; }
@media (max-width: 640px) {
  .cr-yr.cr-mix-row { grid-template-columns: 1fr 92px minmax(96px, auto); row-gap: 4px; }
  .cr-yr.cr-mix-row .y { grid-column: 1 / -1; }
  .cr-yr.cr-mix-row .dd { display: block; }
}

/* ═════════════════ §C. Экономика проектов (/crypto/protocols/) ═════════════════
   Раздел отвечает на вопрос «что представляет собой актив как бизнес», поэтому его
   компоненты — про числа с оговорками: прочерк с причиной, пометки-предупреждения
   в строке таблицы, парные блоки «значение + что это значит».
   Префикс cr-ec-; общие .cr-* (панель, секция, таблица, пояснение) переиспользуются. */

/* Прочерк, за которым стоит причина: показатель не посчитан, и по наведению видно почему.
   Пустая ячейка без объяснения читается как недоработка сайта, а не как свойство данных. */
.cr-na {
    color: var(--text2); border-bottom: 1px dotted var(--border2); cursor: help;
}

/* Пометка в строке скринера: эмиссия обгоняет выручку, средства в одной сети, доходность
   на наградах. Это контекст к цифрам рядом, а не оценка проекта. */
.cr-table .cr-badge { margin-left: 6px; vertical-align: middle; }

/* Таблицы скринера: набор колонок другой, чем у таблицы монет, поэтому общие доли
   `.cr-table th:nth-child(N)` (§ «Таблица монет») сюда не годятся — под именем проекта
   там 3.5%, и от названия оставалась одна буква. Подписи — в одно слово, как в остальных
   таблицах раздела: смысл показателя объясняет подсказка, а не длина заголовка. */
.cr-table.cr-econ th:nth-child(1) { width: 19%; }    /* проект + сектор */
.cr-table.cr-econ th:nth-child(2) { width: 10%; }    /* выручка */
.cr-table.cr-econ th:nth-child(3) { width: 9%; }     /* рост 90д */
.cr-table.cr-econ th:nth-child(4) { width: 7%; }     /* P/S */
.cr-table.cr-econ th:nth-child(5) { width: 9%; }     /* P/S разв. */
.cr-table.cr-econ th:nth-child(6) { width: 7%; }     /* место */
.cr-table.cr-econ th:nth-child(7) { width: 9%; }     /* держателю */
.cr-table.cr-econ th:nth-child(8) { width: 9%; }     /* эмиссия */
.cr-table.cr-econ th:nth-child(9) { width: 9%; }     /* средства */
/* «4 года 6 месяцев» — самая длинная запись в таблице, ей нужно больше, чем числам. */
.cr-table.cr-econ th:nth-child(10) { width: 12%; }   /* возраст */
/* Заголовки переносим по словам. У .cr-table th стоит white-space:nowrap и НЕТ
   overflow:hidden (в отличие от td) — при table-layout:fixed двухсловные подписи
   «Место в секторе» и «Выплаты держателям» вылезали за свои 7–9% и налезали на
   соседние: в шапке читалось «МЕСТО В СЕКТВЫПЛАТЫ ДЕРЖАТЕЭМИССИЯ». Обрезать нельзя —
   overflow:hidden срежет попап .tooltip-icon::after, который живёт внутри этих же th. */
.cr-table.cr-econ th { white-space: normal; line-height: 1.25; vertical-align: bottom; }
.cr-table.cr-econ-nr th:nth-child(1) { width: 32%; } /* актив + сектор */
.cr-table.cr-econ-nr th:nth-child(2) { width: 18%; } /* капитализация */
.cr-table.cr-econ-nr th:nth-child(3) { width: 17%; } /* корреляция */
.cr-table.cr-econ-nr th:nth-child(4) { width: 15%; } /* бета */
.cr-table.cr-econ-nr th:nth-child(5) { width: 18%; } /* просадка */
.cr-table.cr-econ-pr th:nth-child(1) { width: 26%; } /* протоколы проекта: название */
.cr-table.cr-econ-pr th:nth-child(2) { width: 22%; } /* категория */
.cr-table.cr-econ-pr th:nth-child(3) { width: 16%; } /* средства */
.cr-table.cr-econ-pr th:nth-child(4) { width: 36%; } /* сети */

/* Категория и пометки — второй строкой под названием проекта: отдельной колонкой они
   забирали больше места, чем само название. */
/* Ровно одна строка: у проекта с пометками подпись растягивала строку таблицы вдвое против
   соседних, и список шёл ступеньками. Полный текст — в подсказке по наведению. */
.cr-table .cr-coin .sub { display: block; color: var(--text2); font-size: 11px; margin-top: 2px;
  font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-height: 15px; }  /* пустая подпись держит высоту: иначе строки разной высоты */

@media (max-width: 1100px) {
  /* В карточной раскладке шапка — первая колонка (в таблице монет она вторая, после «#»). */
  .cr-table.cr-econ td.l:nth-child(1), .cr-table.cr-econ-nr td.l:nth-child(1) {
    text-align: left; padding: 0 0 9px; margin-bottom: 8px; border-bottom: 1px solid var(--border);
  }
  /* Пометки стояли в одной flex-строке с названием и сжимали его до «Convex Fi…»
     (47 px на имя при 100 нужных). Уводим их на свою строку под названием. */
  .cr-table .cr-coin > span { flex-wrap: wrap; }
  .cr-table .cr-coin .sub { white-space: normal; flex: 0 0 100%; }
}

/* Выбор сектора в панели фильтров — тот же вид, что у соседних .bchip. */
.cr-catsel { min-height: 35px; max-width: 300px; padding: 7px 11px; font-size: 13px; font-weight: 550;
  background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text2); cursor: pointer; }
.cr-catsel:hover { color: var(--text); border-color: var(--accent-ring); }
@media (max-width: 1100px) { .cr-catsel { flex: 1; max-width: none; min-height: 40px; font-size: 16px; } }

/* Шесть блоков карточки — по одному на вопрос раздела. */
/* align-items:start — блок не растягивается под соседа: у короткого внизу оставалась
   полоса пустоты в треть его высоты. */
.cr-ec-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 18px; align-items: start; }
@media (max-width: 860px) { .cr-ec-grid { grid-template-columns: 1fr; } }
/* Сетка с единственной карточкой (у протокола не размечена выручка) — во всю ширину */
.cr-ec-grid.one { grid-template-columns: 1fr; }

.cr-ec-block { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; }
.cr-ec-block h3 { margin: 0 0 4px; font-size: 14px; font-weight: 700; }
.cr-ec-block .q { margin: 0 0 14px; font-size: 12.5px; color: var(--text2); line-height: 1.5; }

/* Строка показателя: подпись слева, значение справа, под ними — фраза обычным языком. */
.cr-ec-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 9px 0; border-top: 1px solid var(--border); }
.cr-ec-row:first-of-type { border-top: 0; }
.cr-ec-row .k { font-size: 12.5px; color: var(--text2); }
.cr-ec-row .v { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cr-ec-say { font-size: 12px; color: var(--text2); line-height: 1.55; margin: 2px 0 8px; }

/* Лента событий протокола: размеченные источником вехи и взломы. */
.cr-ec-ev { display: flex; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); font-size: 12.5px; }
.cr-ec-ev:first-child { border-top: 0; }
.cr-ec-ev .d { color: var(--text2); white-space: nowrap; font-variant-numeric: tabular-nums; min-width: 76px; }
.cr-ec-ev .t { color: var(--text); }
.cr-ec-ev.is-hack .t { color: var(--red); }