/* Каталог в дизайн-системе (27.10.2026). Один слой вместо трёх: старые
   стили catalog/base.html, перекраска catalog-ds.css и локальные <style>
   страниц перекрывали друг друга. Язык — тот же, что у главной «/» и
   Картины дня: шапка .tm-head из day.css, вкладки — .tm-chip (серые
   параллелограммы, выбранная — тёмная), заголовок раздела над карточкой,
   одна белая карточка на раздел без вложенных рамок, строки списка с
   разделителями. На телефоне — одна колонка, вкладки лентой с прокруткой. */

.cx { max-width: 1180px; margin: 0 auto; padding: 28px 32px 64px; display: grid; gap: 28px; }
.cx a { text-decoration: none; color: inherit; }
.cx .tm-head { margin: 0; }
.cx .tm-h1 { font-size: 40px; }
.cx .tm-sub { max-width: 64ch; }
.cx-crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; font-weight: 600; color: var(--tm-muted); }
.cx-crumbs a { color: var(--tm-text-brand); }
.cx-crumbs a:hover { text-decoration: underline; }

/* поиск — как на главной */
.cx-search { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 6px 0 14px; border: 1px solid var(--tm-line);
  border-radius: var(--tm-radius-md); background: var(--tm-surface); }
.cx-search:focus-within { border-color: var(--tm-focus); }
.cx-search > svg { width: 18px; height: 18px; color: var(--tm-muted); flex: 0 0 auto; }
.cx-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 15px; color: var(--tm-text); }
.cx-search button { height: 36px; padding: 0 18px; border: 0; cursor: pointer; font: 600 14px var(--tm-font); color: var(--tm-on-brand);
  background: var(--tm-brand-strong, var(--tm-brand)); clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.cx-search button:hover { filter: brightness(1.06); }

/* цифры каталога: на широком — строка, на телефоне — 2×2 в одной карточке */
.cx-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--tm-surface);
  border: 1px solid var(--tm-line); border-radius: var(--tm-radius-lg); }
.cx-stat { padding: 14px 18px; min-width: 0; }
.cx-stat + .cx-stat { border-left: 1px solid var(--tm-line); }
.cx-stat b { display: block; font: 600 24px/1.15 var(--tm-font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-stat b.up { color: var(--tm-text-success); }
.cx-stat small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--tm-text-sec); }

/* раздел: заголовок над карточкой */
.cx-sec { display: grid; gap: 12px; min-width: 0; }
.cx-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cx-h h2 { margin: 0; font: 600 22px var(--tm-font-display); letter-spacing: -.01em; }
.cx-h h2 small { font: 500 14px var(--tm-font); color: var(--tm-muted); margin-left: 6px; letter-spacing: 0; }
.cx-h a { color: var(--tm-text-brand); font-weight: 500; font-size: 14px; white-space: nowrap; }
.cx-h a:hover { text-decoration: underline; }
.cx-note { margin: -4px 0 0; font-size: 14px; color: var(--tm-text-sec); }
.cx-card { background: var(--tm-surface); border: 1px solid var(--tm-line); border-radius: var(--tm-radius-lg); min-width: 0; }

/* вкладки: одна строка, на узком — прокрутка вбок без полосы */
.cx-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.cx-tabs::-webkit-scrollbar { display: none; }
.cx-tabs .tm-chip { flex: 0 0 auto; font-size: 13.5px; text-decoration: none; display: inline-flex; align-items: baseline; gap: 6px; }
.cx-tabs .tm-chip[hidden] { display: none; }
.cx-tabs .tm-chip .tm-n { font-size: 12px; }
.cx-tabs + .cx-tabs { margin-top: -4px; }

/* строки каналов: место | аватар | название и @ник | цифры справа */
.cx-rows { padding: 2px 16px; }
.cx-row { display: grid; grid-template-columns: 26px 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0;
  border-bottom: 1px solid var(--tm-line); }
.cx-row:last-child { border-bottom: 0; }
.cx-row .n { font: 500 17px var(--tm-font-display); color: var(--tm-muted); text-align: center; font-variant-numeric: tabular-nums; }
.cx-row .n.sm { font-size: 13px; }
.cx-ava { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; flex: 0 0 auto;
  background: var(--tm-hover); color: var(--tm-text-sec); font-weight: 700; font-size: 15px; }
.cx-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cx-ava.site { border-radius: var(--tm-radius-sm); background: #fff; border: 1px solid var(--tm-line); }
.cx-ava.site img { object-fit: contain; padding: 4px; }
.cx-main { min-width: 0; }
.cx-main b { display: block; font-weight: 600; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-main small { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12.5px; color: var(--tm-text-sec); }
.cx-main small span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-main .tm-pi { width: 14px; height: 14px; }
.cx-row:hover .cx-main b { color: var(--tm-text-brand); }
.cx-val { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cx-val b { display: block; font-weight: 600; font-size: 14.5px; }
.cx-val small { display: block; font-size: 12.5px; font-weight: 600; color: var(--tm-muted); }
.cx-val small.up, .cx-cols .up { color: var(--tm-text-success); }
.cx-val small.down, .cx-cols .down { color: var(--tm-text-danger); }
/* дополнительные колонки — только на широком экране */
.cx-cols { display: none; }
.cx-empty { padding: 22px 0; text-align: center; color: var(--tm-muted); font-size: 14px; }
@media (min-width: 900px) {
  .cx-rows.wide .cx-row { grid-template-columns: 30px 40px minmax(0, 1fr) 120px 96px 72px 84px; }
  .cx-rows.wide .cx-cols { display: contents; }
  .cx-rows.wide .cx-cols > span { text-align: right; font-size: 13.5px; font-variant-numeric: tabular-nums; color: var(--tm-text-sec); white-space: nowrap; }
  .cx-rows.wide .cx-cols > span.up { color: var(--tm-text-success); }
  .cx-rows.wide .cx-cols > span.down { color: var(--tm-text-danger); }
  .cx-rows.wide .cx-val small { display: none; }
  .cx-rows.wide .cx-row.add, .cx-card > .cx-head.add { grid-template-columns: 30px 40px minmax(0, 1fr) 120px 96px 72px 84px 36px; }
  .cx-head { display: grid; grid-template-columns: 30px 40px minmax(0, 1fr) 120px 96px 72px 84px; gap: 12px; padding: 12px 16px 8px;
    font-size: 12px; font-weight: 600; color: var(--tm-muted); border-bottom: 1px solid var(--tm-line); }
  .cx-head span:nth-child(n+4) { text-align: right; }
}
.cx-head { display: none; }
@media (min-width: 900px) { .cx-card > .cx-head { display: grid; } }

/* строка листинга с «+»: ссылка растянута на всю строку, кнопка — поверх
   неё отдельной ячейкой (кнопку нельзя вкладывать в ссылку) */
.cx-row.add { position: relative; grid-template-columns: 26px 40px minmax(0, 1fr) auto 36px; }
.cx-hit { position: absolute; inset: 0; z-index: 0; }
.cx-row.add > :not(.cx-hit) { position: relative; pointer-events: none; }
.cx-row.add > .cx-add { pointer-events: auto; z-index: 1; }
.cx-add svg .ok { display: none; }
.cx .btn-icon.tm-icon-btn.cx-add.on { border-color: transparent !important; background: var(--tm-brand-soft) !important; color: var(--tm-text-brand) !important; cursor: default; }
.cx-add.on svg .p { display: none; }
.cx-add.on svg .ok { display: inline; }
.cx-take button:disabled { opacity: .55; cursor: default; }
.cx-take { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap;
  padding: 12px 14px; background: var(--tm-brand-soft); border-radius: var(--tm-radius-md); font-size: 13.5px; color: var(--tm-text-sec); }
.cx-take a { color: var(--tm-text-brand); font-weight: 600; }

/* кнопка «ещё» — серая плашка во всю ширину, как «Весь каталог» на главной */
.cx-more { display: block; width: 100%; border: 0; cursor: pointer; text-align: center; padding: 11px; font: 600 14px var(--tm-font);
  color: var(--tm-text); background: var(--tm-hover); clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.cx-more:hover { background: var(--tm-line-strong); }
.cx-pager { display: flex; gap: 10px; }
.cx-pager .cx-more { flex: 1; }

/* факты дня: карточки лентой со свайпом, без автопрокрутки */
.cx-facts { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 1fr); gap: 12px; overflow-x: auto;
  scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.cx-facts::-webkit-scrollbar { display: none; }
.cx-fact { scroll-snap-align: start; display: flex; flex-direction: column; gap: 8px; padding: 16px 18px;
  background: var(--tm-surface); border: 1px solid var(--tm-line); border-radius: var(--tm-radius-lg); }
.cx-fact b { font: 600 16.5px/1.3 var(--tm-font-display); letter-spacing: -.01em; color: var(--tm-text); }
.cx-fact p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--tm-text-sec); flex: 1; }
.cx-fact span { font-size: 13.5px; font-weight: 600; color: var(--tm-text-brand); }
.cx-fact:hover b { color: var(--tm-text-brand); }

/* рубрики: группы с плашками */
.cx-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; padding: 6px 18px; }
.cx-grp { padding: 14px 0; border-bottom: 1px solid var(--tm-line); min-width: 0; }
.cx-grp-h { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-weight: 600; font-size: 14.5px; }
.cx-grp-h .ic { width: 28px; height: 28px; border-radius: var(--tm-radius-sm); display: grid; place-items: center;
  background: var(--tm-brand-soft); color: var(--tm-text-brand); flex: 0 0 auto; }
.cx-grp-h .ic svg { width: 16px; height: 16px; fill: none; }
.cx-plks { display: flex; flex-wrap: wrap; gap: 6px; }
.cx-plk { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 13px; font-size: 13.5px; font-weight: 500; color: var(--tm-text);
  background: var(--tm-hover); clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%); white-space: nowrap; }
.cx-plk small { font-size: 12px; font-weight: 400; color: var(--tm-muted); font-variant-numeric: tabular-nums; }
.cx-plk:hover { background: var(--tm-line-strong); }
.cx-plk.on { background: var(--tm-inverse); color: var(--tm-text-inverse); }
.cx-plk.on small { color: inherit; opacity: .7; }

/* подборки: лентой на телефоне, сеткой на широком */
.cx-sets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.cx-set { display: flex; flex-direction: column; gap: 6px; padding: 16px; background: var(--tm-surface);
  border: 1px solid var(--tm-line); border-radius: var(--tm-radius-lg); min-width: 0; }
.cx-set b { font-weight: 600; font-size: 15px; }
.cx-set p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--tm-text-sec); flex: 1; }
.cx-set span { font-size: 13px; font-weight: 600; color: var(--tm-text-brand); font-variant-numeric: tabular-nums; }
.cx-set:hover { border-color: color-mix(in srgb, var(--tm-brand) 40%, var(--tm-line)); }

/* регионы: строки с гербом, на широком — в три колонки */
.cx-regs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; padding: 2px 16px; }
.cx-reg { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 0;
  border-bottom: 1px solid var(--tm-line); font-size: 14px; }
.cx-reg[hidden] { display: none; }
.cx-reg img { width: 26px; height: 26px; object-fit: contain; display: block; }
.cx-reg .crest-i { width: 22px; height: 22px; margin: 2px; color: var(--tm-muted); }
.cx-reg span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-reg em { font-style: normal; font-size: 12.5px; color: var(--tm-muted); font-variant-numeric: tabular-nums; }
.cx-reg:hover span { color: var(--tm-text-brand); }
.cx-rsearch { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border: 1px solid var(--tm-line);
  border-radius: var(--tm-radius-md); background: var(--tm-surface); max-width: 360px; }
.cx-rsearch svg { width: 16px; height: 16px; color: var(--tm-muted); flex: 0 0 auto; }
.cx-rsearch input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 14.5px; color: var(--tm-text); }
.cx-rsearch:focus-within { border-color: var(--tm-focus); }

/* текст о разделе и вопросы — под списком, для людей и поисковиков */
.cx-kb { padding: 20px 22px; display: grid; gap: 12px; }
.cx-kb h2 { margin: 0; font: 600 19px var(--tm-font-display); }
.cx-kb h2 + * { margin-top: -2px; }
.cx-kb p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--tm-text-sec); max-width: 80ch; }
.cx-kb p b { color: var(--tm-text); font-weight: 600; }
.cx-kb p a { color: var(--tm-text-brand); font-weight: 600; }
.cx-kb .ai { font-size: 12.5px; color: var(--tm-muted); }
.cx-kb .ai a { color: inherit; text-decoration: underline; font-weight: 400; }
.cx-faq { display: grid; gap: 8px; }
.cx-faq details { background: var(--tm-hover); border-radius: var(--tm-radius-md); }
.cx-faq summary { list-style: none; cursor: pointer; padding: 12px 40px 12px 14px; position: relative; font-weight: 600; font-size: 14.5px; }
.cx-faq summary::-webkit-details-marker { display: none; }
.cx-faq summary::after { content: ""; position: absolute; right: 16px; top: 50%; width: 7px; height: 7px; border-right: 2px solid var(--tm-muted);
  border-bottom: 2px solid var(--tm-muted); transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.cx-faq details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.cx-faq details p { padding: 0 14px 12px; font-size: 14px; }

/* «взять подборку в работу» */
.cx-bulk { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 16px;
  font-size: 14px; color: var(--tm-text-sec); }

@media (max-width: 1000px) {
  .cx-sets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cx-regs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .cx { padding: 14px 12px 32px; gap: 24px; }
  .cx .tm-head { gap: 4px; }
  .cx .tm-h1 { font-size: 30px; }
  .cx .tm-sub { font-size: 14px; margin-top: 8px; }
  .cx .tm-upd { display: none; }
  .cx-h h2 { font-size: 19px; }
  .cx-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cx-stat { padding: 12px 14px; }
  .cx-stat + .cx-stat { border-left: 0; }
  .cx-stat:nth-child(even) { border-left: 1px solid var(--tm-line); }
  .cx-stat:nth-child(n+3) { border-top: 1px solid var(--tm-line); }
  .cx-stat b { font-size: 20px; }
  .cx-rows, .cx-regs { padding: 2px 14px; }
  .cx-row { grid-template-columns: 22px 40px minmax(0, 1fr) auto; gap: 10px; }
  .cx-row.add { grid-template-columns: 22px 40px minmax(0, 1fr) auto 36px; }
  .cx-take .btn { flex: 1 1 100%; justify-content: center; }
  .cx-row .n { font-size: 15px; }
  .cx-groups { grid-template-columns: minmax(0, 1fr); padding: 2px 14px; }
  .cx-sets { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -12px; padding: 0 12px; }
  .cx-sets::-webkit-scrollbar { display: none; }
  .cx-set { flex: 0 0 76%; scroll-snap-align: start; }
  .cx-facts { grid-auto-columns: 86%; margin: 0 -12px; padding: 0 12px; scroll-padding: 0 12px; }
  .cx-tabs { margin: 0 -12px; padding: 0 12px; }
  .cx-regs { grid-template-columns: minmax(0, 1fr); }
  .cx-rsearch { max-width: none; }
  .cx-kb { padding: 16px; }
}

/* ── Карточка канала (27.10.2026) ───────────────────────────────────────
   Шапка — без рамки, как у Картины дня; ниже плитки цифр и разделы-карточки.
   Стили разделов перенесены из catalog/base.html и catalog-ds.css одним
   слоем, без перекрытий. */
.cx-ch { display: grid; gap: 14px; }
.cx-ch-top { display: flex; gap: 16px; align-items: center; min-width: 0; }
.cx-ch-ava { position: relative; flex: 0 0 auto; }
.cx-ch-ava .cx-ava { width: 72px; height: 72px; font-size: 26px; }
.cx-ch-ava i { position: absolute; right: -2px; bottom: -2px; display: grid; place-items: center; border-radius: 6px;
  box-shadow: 0 0 0 3px var(--tm-bg, var(--tm-surface)); }
.cx-ch-ava i .tm-pi { width: 22px; height: 22px; }
.cx-ch-id { min-width: 0; }
.cx-ch-id .tm-h1 { font-size: 34px; overflow-wrap: anywhere; }
.cx-ch-id p { margin: 4px 0 0; font-size: 14px; color: var(--tm-text-sec); }
.cx-ch-id .cx-ch-age { font-size: 13px; color: var(--tm-muted); }
.cx-legal { padding: 8px 12px; border-left: 2px solid var(--tm-text-danger); background: var(--tm-danger-soft);
  font-size: 12px; line-height: 1.45; text-transform: uppercase; color: var(--tm-text-sec); }
.cx-plk.score { background: var(--tm-success-soft); color: var(--tm-text-success); font-weight: 600; }
.cx-plk.score.mid { background: var(--tm-warning-soft); color: var(--tm-text-warning); }
.cx-plk.score.low { background: var(--tm-danger-soft); color: var(--tm-text-danger); }
.cx-ch-act { display: flex; gap: 10px; flex-wrap: wrap; }
.cx-ch-note { margin: -4px 0 0; font-size: 13px; color: var(--tm-muted); }
.cx-ch-note:empty { display: none; }
.cx-ch-note a, .cx .about a, .cx .note a, .cx-legalnote a { color: var(--tm-text-brand); }
.cx-desc { margin: 0 0 10px; color: var(--tm-text-sec); font-size: 14.5px; line-height: 1.6; max-width: 76ch; }
.cx .about { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--tm-text-sec); max-width: 80ch; }
.cx .about b { color: var(--tm-text); font-weight: 600; }
.cx-how { margin-top: 14px; border-top: 1px solid var(--tm-line); padding-top: 10px; }
.cx-how summary { cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--tm-text-brand); list-style: none; }
.cx-how summary::-webkit-details-marker { display: none; }
.cx-how summary::after { content: " ▾"; }
.cx-how[open] summary::after { content: " ▴"; }
.cx-how .note { border-top: 0; padding-top: 0; }
.cx-legalnote { font-size: 12.5px; line-height: 1.55; color: var(--tm-muted); }

/* плитки цифр */
.cx .kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.cx .kpi { background: var(--tm-surface); border: 1px solid var(--tm-line); border-radius: var(--tm-radius-md); padding: 14px 16px 12px; min-width: 0; }
.cx .kpi .k { font-size: 12.5px; color: var(--tm-muted); }
.cx .kpi .k::first-letter { text-transform: uppercase; }
.cx .kpi .v { margin-top: 4px; font: 600 22px/1.15 var(--tm-font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx .kpi .d { margin-top: 4px; font-size: 12.5px; color: var(--tm-muted); font-variant-numeric: tabular-nums; }
.cx .kpi .d.up, .cx .kpi .d.down { display: inline-block; margin-top: 6px; padding: 1px 9px; font-weight: 600;
  clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%); }
.cx .kpi .d.up { background: var(--tm-success-soft); color: var(--tm-text-success); }
.cx .kpi .d.down { background: var(--tm-danger-soft); color: var(--tm-text-danger); }

/* разделы */
.cx .card { background: var(--tm-surface); border: 1px solid var(--tm-line); border-radius: var(--tm-radius-lg); padding: 20px 22px; min-width: 0; }
.cx .card h2 { margin: 0 0 4px; font: 600 19px var(--tm-font-display); letter-spacing: -.01em; }
.cx .card h3 { font-weight: 600; }
.cx .sub { margin: 2px 0 14px; font-size: 13.5px; color: var(--tm-text-sec); }
.cx .note { margin: 14px 0 0; padding-top: 12px; border-top: 1px dashed var(--tm-line); font-size: 12.5px; line-height: 1.55; color: var(--tm-muted); }
.cx .grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.cx .up { color: var(--tm-text-success); } .cx .down { color: var(--tm-text-danger); } .cx .flat { color: var(--tm-muted); }

/* таблицы: шире телефона — прокрутка внутри */
.cx .tw { overflow-x: auto; -webkit-overflow-scrolling: touch; min-width: 0; }
.cx .tw > table { min-width: 520px; }
.cx table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.cx th { text-align: left; font-weight: 600; color: var(--tm-muted); font-size: 11.5px; padding: 0 10px 8px; border-bottom: 1px solid var(--tm-line); white-space: nowrap; }
.cx td { padding: 10px; border-bottom: 1px solid var(--tm-line); font-variant-numeric: tabular-nums; }
.cx tr:last-child td { border-bottom: 0; }
.cx th.n, .cx td.n { text-align: right; }
.cx .daily-box { max-height: 430px; overflow-y: auto; }
.cx .daily-box thead th { position: sticky; top: 0; background: var(--tm-surface); z-index: 1; padding-top: 4px; }
.cx .ch { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cx .ch > span:last-child { min-width: 0; }
.cx .ch .t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 600; color: var(--tm-text); }
.cx .ch .h { display: block; font-size: 12px; color: var(--tm-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx .ava { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; flex: 0 0 auto;
  background: var(--tm-hover); color: var(--tm-text-sec); font-weight: 700; font-size: 13px; }
.cx .ava img { width: 100%; height: 100%; object-fit: cover; }

/* графики: подписи осей, перекрестие */
/* Цвета, которые ждёт catalog/_xchart.html; подписи оси Y стоят левее
   начала viewBox («3 040 479» на телефоне) — даём им вылезать. */
.cx { --c-subs: var(--tm-teal-500); --c-subs-soft: color-mix(in srgb, var(--tm-teal-500) 12%, transparent); --line: var(--tm-line); }
.cx .xchart svg { overflow: visible; }
.cx .xc-m { display: none; }
.cx .xchart { position: relative; padding-top: 30px; }
.cx .xchart svg { cursor: crosshair; touch-action: pan-y; }
.cx .chart .ax { font-size: 11px; fill: var(--tm-muted); font-family: var(--tm-font); }
.cx .chart .chart-pt { fill: var(--tm-surface); stroke: var(--tm-teal-500); stroke-width: 2; }
.cx .chart .xh-line { stroke: var(--tm-text-sec); stroke-width: 1; opacity: 0; pointer-events: none; }
.cx .chart .xh-dot { fill: var(--tm-teal-500); stroke: var(--tm-surface); stroke-width: 2; opacity: 0; pointer-events: none; }
.cx .xh-tip { position: absolute; top: 0; display: flex; gap: 8px; align-items: baseline; white-space: nowrap; padding: 4px 10px;
  border-radius: var(--tm-radius-sm); background: var(--tm-surface); border: 1px solid var(--tm-line); font-size: 12.5px;
  pointer-events: none; font-variant-numeric: tabular-nums; }
.cx .xh-tip .l, .cx .xh-tip .n { color: var(--tm-muted); }
.cx .xh-tip .v { font-weight: 650; }
.cx .xh-tip .n.up { color: var(--tm-text-success); } .cx .xh-tip .n.down { color: var(--tm-text-danger); }

/* тепловая карта, доли, оценки */
.cx { --h0: var(--tm-steel-50); --h1: var(--tm-teal-100); --h2: var(--tm-teal-200); --h3: var(--tm-teal-300); --h4: var(--tm-teal-500); --h5: var(--tm-teal-600); --h6: var(--tm-teal-800); }
:root[data-theme="dark"] .cx { --h0: var(--tm-steel-900); --h1: var(--tm-teal-950); --h2: var(--tm-teal-900); --h3: var(--tm-teal-800); --h4: var(--tm-teal-700); --h5: var(--tm-teal-500); --h6: var(--tm-teal-300); }
.cx .hmwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cx .hm { display: grid; grid-template-columns: 28px repeat(24, minmax(0, 1fr)); gap: 3px; align-items: center; }
.cx .hm .lbl { font-size: 11px; color: var(--tm-muted); text-align: right; padding-right: 4px; }
.cx .hm .hr { font-size: 10px; color: var(--tm-muted); text-align: center; }
.cx .hm .cell { aspect-ratio: 1; border-radius: 2px; background: var(--h0); }
.cx .legend { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--tm-muted); margin-top: 12px; }
.cx .legend i { width: 20px; height: 10px; border-radius: 2px; display: block; }
.cx .bars { display: flex; flex-direction: column; gap: 10px; }
.cx .bars .r { display: grid; grid-template-columns: 110px minmax(0, 1fr) 72px; gap: 12px; align-items: center; font-size: 13.5px; }
.cx .bars .bar { height: 8px; background: var(--tm-hover); overflow: hidden; }
.cx .bars .bar i { display: block; height: 100%; background: var(--tm-teal-500); }
.cx .bars .val { text-align: right; color: var(--tm-text-sec); font-variant-numeric: tabular-nums; }
.cx .risks { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 9px; }
.cx .risks li { display: flex; gap: 10px; font-size: 13.5px; color: var(--tm-text-sec); align-items: flex-start; }
.cx .risks .dot { width: 6px; height: 14px; margin-top: 3px; flex: 0 0 auto; clip-path: polygon(100% 0, 100% 70%, 0 100%, 0 30%); }
.cx .risks .dot.ok { background: var(--tm-mark); } .cx .risks .dot.warn { background: var(--tm-warning); } .cx .risks .dot.bad { background: var(--tm-danger); }
.cx .scores .card { position: relative; }
.cx .scores .card h2, .cx .scores .card .sub { padding-right: 90px; }
.cx .scorebox { position: absolute; top: 18px; right: 22px; display: flex; align-items: baseline; gap: 2px; font-family: var(--tm-font-display); color: var(--tm-text-brand); }
.cx .scorebox b { font-size: 30px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cx .scorebox span { font-size: 13px; color: var(--tm-muted); }
.cx .score-by { font-size: 12.5px; color: var(--tm-muted); margin-top: -6px; }

/* похожие */
.cx .simgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.cx .simgrid a { display: block; padding: 14px; border: 1px solid var(--tm-line); border-radius: var(--tm-radius-md); min-width: 0; }
.cx .simgrid a:hover { border-color: color-mix(in srgb, var(--tm-brand) 40%, var(--tm-line)); }
.cx .why { font-size: 12px; color: var(--tm-muted); margin-top: 8px; }

/* публикации канала */
.cx .plist-r { position: absolute; opacity: 0; pointer-events: none; }
.cx .plist-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.cx .plist-tabs { display: inline-flex; gap: 6px; }
.cx .plist-tabs label { padding: 7px 15px; font-size: 13.5px; font-weight: 500; cursor: pointer; background: var(--tm-hover);
  clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%); }
.cx #plist-pop:checked ~ .plist-head label[for="plist-pop"],
.cx #plist-new:checked ~ .plist-head label[for="plist-new"] { background: var(--tm-inverse); color: var(--tm-text-inverse); }
.cx #plist-pop:focus-visible ~ .plist-head label[for="plist-pop"],
.cx #plist-new:focus-visible ~ .plist-head label[for="plist-new"] { outline: 2px solid var(--tm-focus); }
.cx #plist-pop:checked ~ .plist-new, .cx #plist-new:checked ~ .plist-pop { display: none; }
.cx .post { padding: 14px 0; border-top: 1px solid var(--tm-line); overflow-wrap: anywhere; }
.cx .plist .post:first-child { border-top: 0; }
.cx .post .meta { display: flex; gap: 6px 12px; font-size: 12.5px; color: var(--tm-muted); flex-wrap: wrap; align-items: center; }
.cx .post .meta a { color: var(--tm-text-brand); }
.cx .post .body { display: flex; gap: 14px; align-items: flex-start; margin-top: 7px; }
.cx .post .body p { margin: 0; flex: 1 1 auto; min-width: 0; font-size: 14.5px; line-height: 1.55; }
.cx .post .shot { flex: 0 0 auto; width: 104px; height: 104px; object-fit: cover; border-radius: var(--tm-radius-md); background: var(--tm-hover); }
.cx .rx { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.cx .rx i { display: inline-flex; align-items: center; gap: 5px; font-style: normal; padding: 2px 8px; border-radius: var(--tm-radius-sm);
  background: var(--tm-hover); font-size: 12px; color: var(--tm-text-sec); font-variant-numeric: tabular-nums; }
.cx .rx i b { font-weight: 400; font-size: 13px; line-height: 1; }
.cx .post .admark { display: inline-block; margin: 8px 0 0; padding: 2px 9px; background: var(--tm-hover); font-size: 11px; color: var(--tm-muted);
  clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%); }
.cx .post .admark a { color: inherit; text-decoration: underline; }
.cx .post .lmark, .cx .wa-lm { margin-top: 10px; padding: 6px 10px; border-left: 2px solid var(--tm-line); font-size: 11.5px; line-height: 1.5; color: var(--tm-muted); }
.cx .post .echo { display: flex; align-items: center; gap: 14px; margin-top: 12px; padding: 10px 12px; border-radius: var(--tm-radius-md);
  background: var(--tm-hover); font-size: 12px; color: var(--tm-muted); }
.cx .post .echo .num { font: 600 19px var(--tm-font-display); color: var(--tm-text); flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.cx .post .echo .lab { flex: 1 1 auto; min-width: 0; line-height: 1.45; }
.cx .post .echo b { color: var(--tm-text); font-weight: 600; }
.cx .post .echo .top { flex: 0 0 auto; text-align: right; line-height: 1.45; max-width: 45%; overflow: hidden; }
.cx .post .rp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.cx .post .rp-i { display: flex; gap: 10px; padding: 9px 10px; border: 1px solid var(--tm-line); border-radius: var(--tm-radius-md); min-width: 0; }
.cx .post .rp-i img { width: 54px; height: 54px; object-fit: cover; border-radius: var(--tm-radius-sm); flex: 0 0 auto; }
.cx .post .rp-b { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cx .post .rp-h { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cx .post .rp-h b { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx .post .rp-t { font-size: 11.5px; color: var(--tm-muted); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cx .post .rp-n, .cx .post .rp-more { font-size: 11.5px; color: var(--tm-muted); }
.cx .post .pl, .cx .wa-chip .pl { flex: 0 0 auto; font-style: normal; font-size: 9.5px; font-weight: 700; padding: 2px 5px; color: #fff;
  clip-path: polygon(3px 0, 100% 0, calc(100% - 3px) 100%, 0 100%); }
.cx .pl.tg, .cx .dot.tg, .cx .wa-split-bar i.tg { background: var(--tm-platform-telegram); }
.cx .pl.vk, .cx .dot.vk, .cx .wa-split-bar i.vk { background: var(--tm-platform-vk); }
.cx .pl.max, .cx .dot.max, .cx .wa-split-bar i.max { background: var(--tm-platform-max); }

/* материалы сайта: разошлось за неделю и лента */
.cx .wa-sum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.6fr); gap: 1px; margin-top: 4px;
  border: 1px solid var(--tm-line); border-radius: var(--tm-radius-md); overflow: hidden; background: var(--tm-line); }
.cx .wa-kpi, .cx .wa-split { padding: 12px 14px; min-width: 0; background: var(--tm-surface); }
.cx .wa-kpi b { display: block; font: 600 22px/1.1 var(--tm-font-display); font-variant-numeric: tabular-nums; }
.cx .wa-kpi s { text-decoration: none; display: block; margin-top: 4px; font-size: 12px; color: var(--tm-muted); }
.cx .wa-split { display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.cx .wa-split-bar { display: flex; gap: 2px; height: 8px; overflow: hidden; }
.cx .wa-split-bar i { display: block; min-width: 4px; }
.cx .wa-split-l { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--tm-muted); }
.cx .wa-split-l span { display: inline-flex; align-items: center; gap: 6px; }
.cx .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.cx .wa-mirrors { margin-top: 10px; border-radius: var(--tm-radius-md); background: var(--tm-hover); font-size: 13px; }
.cx .wa-mirrors summary { cursor: pointer; padding: 10px 14px; color: var(--tm-muted); }
.cx .wa-mirrors p { margin: 0 14px; font-size: 12.5px; line-height: 1.55; color: var(--tm-muted); }
.cx .wa-mirrors ul { list-style: none; margin: 10px 0 0; padding: 0 14px 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.cx .wa-mirrors li { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 8px 10px; border-radius: var(--tm-radius-sm); background: var(--tm-surface); font-size: 12.5px; }
.cx .wa-mirrors li span { color: var(--tm-muted); font-size: 12px; }
.cx .wa-list { margin-top: 12px; }
.cx .wa { display: grid; grid-template-columns: 136px minmax(0, 1fr) 176px; gap: 18px; padding: 16px 0; align-items: start; position: relative;
  overflow-wrap: anywhere; border-top: 1px solid var(--tm-line); }
.cx .wa:first-child { border-top: 0; }
.cx .wa.ranked { grid-template-columns: 34px 136px minmax(0, 1fr) 176px; }
.cx .wa.compact { grid-template-columns: 52px 96px minmax(0, 1fr) auto; gap: 16px; padding: 12px 0; }
.cx .wa.compact .wa-media { width: 96px; }
.cx .wa.compact .wa-t { margin-top: 0; font-size: 15px; -webkit-line-clamp: 2; }
.cx .wa.compact .wa-lead { -webkit-line-clamp: 1; font-size: 13.5px; }
.cx .wa-time { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cx .wa-time small { display: block; font-size: 11.5px; font-weight: 500; color: var(--tm-muted); }
.cx .wa-rank { font: 600 24px/1 var(--tm-font-display); color: var(--tm-text-brand); font-variant-numeric: tabular-nums; padding-top: 4px; }
.cx .wa-media { display: block; width: 136px; aspect-ratio: 4 / 3; border-radius: var(--tm-radius-md); overflow: hidden; background: var(--tm-hover); }
.cx .wa-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cx .wa-media.none { display: grid; place-items: center; }
.cx .wa-media.none::after { content: attr(data-i); font: 600 28px var(--tm-font-display); color: var(--tm-muted); }
.cx .wa-main { min-width: 0; }
.cx .wa-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--tm-muted); }
.cx .wa-t { margin: 5px 0 0; font-size: 16px; font-weight: 600; line-height: 1.38; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cx .wa-t a:hover { color: var(--tm-text-brand); }
.cx .wa-lead { margin: 6px 0 0; font-size: 14px; line-height: 1.55; color: var(--tm-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cx .wa-ad { margin-top: 8px; font-size: 11.5px; color: var(--tm-muted); }
.cx .wa-by { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.cx .wa-by-l, .cx .wa-more { font-size: 11.5px; font-weight: 600; color: var(--tm-muted); }
.cx .wa-chip { display: inline-flex; align-items: center; gap: 7px; max-width: 280px; min-width: 0; padding: 3px 10px 3px 4px; background: var(--tm-hover);
  font-size: 12.5px; clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%); }
.cx .wa-chip span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.cx .wa-chip em { flex: 0 0 auto; white-space: nowrap; font-style: normal; color: var(--tm-muted); font-variant-numeric: tabular-nums; }
.cx .card > p { margin: 10px 0 0; font-size: 14px; color: var(--tm-muted); }
.cx .wa-chip u { text-decoration: none; font-size: 10.5px; font-weight: 650; color: var(--tm-text-brand); }
.cx .wa-small { font-size: 12px; color: var(--tm-muted); padding: 3px 9px; border: 1px dashed var(--tm-line); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx .wa-reach { text-align: right; padding-top: 2px; }
.cx .wa-reach b { display: block; font: 600 24px/1.05 var(--tm-font-display); font-variant-numeric: tabular-nums; }
.cx .wa-reach s { text-decoration: none; display: block; margin-top: 4px; font-size: 12px; color: var(--tm-muted); }
.cx .wa-bar { display: block; height: 6px; margin-top: 10px; background: var(--tm-hover); overflow: hidden; }
.cx .wa-bar i { display: block; height: 100%; margin-left: auto; background: var(--tm-teal-500); }
.cx .wa-pls { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 2px 10px; margin-top: 8px; font-size: 11.5px; color: var(--tm-muted); }
.cx .wa-pls span { display: inline-flex; align-items: center; gap: 5px; }
.cx .wa-pls .dot { width: 6px; height: 6px; }

/* обращение о нарушении */
.cx .rep .rep-l { display: block; margin-top: 12px; font-size: 13px; color: var(--tm-text-sec); }
.cx .rep .rep-i { display: block; width: 100%; margin-top: 5px; padding: 9px 11px; border: 1px solid var(--tm-line); border-radius: var(--tm-radius-md);
  background: var(--tm-surface); color: var(--tm-text); font: inherit; font-size: 14px; }
.cx .rep .rep-i:focus { outline: 2px solid var(--tm-focus); outline-offset: 1px; }
.cx .rep .rep-b { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.cx .rep .rep-b span { font-size: 13px; color: var(--tm-muted); }

@media (max-width: 980px) { .cx .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cx .wa-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cx .wa-split { grid-column: 1 / -1; } }
@media (max-width: 900px) { .cx .grid2, .cx .simgrid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) {
  .cx-ch-top { gap: 14px; }
  .cx-ch-ava .cx-ava { width: 56px; height: 56px; font-size: 20px; }
  .cx-ch-ava i .tm-pi { width: 18px; height: 18px; }
  .cx-ch-id .tm-h1 { font-size: 24px; }
  .cx-ch-act .btn { flex: 1 1 100%; justify-content: center; }
  .cx .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .cx .kpi { padding: 12px; }
  .cx .kpi .v { font-size: 19px; }
  .cx .card { padding: 16px; }
  .cx .xc-d { display: none; } .cx .xc-m { display: block; }
  .cx .hmwrap .hm { min-width: 520px; }
  .cx .bars .r { grid-template-columns: 84px minmax(0, 1fr) 56px; gap: 8px; font-size: 12.5px; }
  .cx .scores .card h2, .cx .scores .card .sub { padding-right: 70px; }
  .cx .scorebox { top: 14px; right: 16px; } .cx .scorebox b { font-size: 26px; }
  /* дневная таблица: на телефоне — день, подписчики, прирост, посты, за сутки */
  .cx .lst .mh, .cx .daily-box .lst .yr { display: none; }
  .cx .daily-box > table.lst, .cx .tw > table.lst.narrow { min-width: 0; font-size: 13px; }
  .cx .daily-box .lst th, .cx .daily-box .lst td { padding-left: 4px; padding-right: 4px; }
  .cx .daily-box .lst th { white-space: normal; font-size: 10.5px; }
  .cx .post .body { flex-direction: column-reverse; }
  .cx .post .shot { width: 100%; height: 180px; }
  .cx .post .echo { flex-wrap: wrap; } .cx .post .echo .top { text-align: left; max-width: 100%; flex-basis: 100%; }
  .cx .post .rp { grid-template-columns: minmax(0, 1fr); }
  .cx .wa, .cx .wa.ranked { grid-template-columns: 88px minmax(0, 1fr); gap: 10px 14px; }
  .cx .wa.compact { grid-template-columns: 44px 64px minmax(0, 1fr); gap: 10px 12px; }
  .cx .wa.compact .wa-media { width: 64px; }
  .cx .wa-rank { position: absolute; left: 6px; top: 22px; z-index: 1; padding: 3px 6px; font-size: 13px; background: var(--tm-surface); }
  .cx .wa-media { width: 88px; }
  .cx .wa-t { font-size: 15px; }
  .cx .wa-lead { display: none; }
  .cx .wa-reach { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 12px;
    text-align: left; padding: 10px 12px; border-radius: var(--tm-radius-md); background: var(--tm-hover); }
  .cx .wa-reach b { font-size: 20px; grid-row: span 2; } .cx .wa-reach s { margin: 0; }
  .cx .wa-reach .wa-bar { margin: 0; grid-column: 2; } .cx .wa-reach .wa-pls, .cx .wa-reach.none { display: none; }
  .cx .wa-chip { max-width: 100%; }
}