/* Каталог Telegram-каналов: блок канала на карточке (/telegram/@имя). Цвета — токены темы, тёмная тема из них же. */
.tg-ic { color: #229ed9; margin-right: .5rem; }
.tg-box .item-box-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .4rem; }
.tg-box h2.item-box-title { font-size: 1.15rem; }
.tg-meta, .tg-src, .tg-note { font-size: .8rem; color: rgb(var(--text_muted_color)); }
.tg-src { margin: 1rem 0 0; }
.tg-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.tg-kpi { background: rgb(var(--primary_color) / .05); border-radius: 12px; padding: .8rem .9rem; min-width: 0; }
.tg-kpi b { display: block; font-size: 1.25rem; font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; color: rgb(var(--secondary_color)); overflow-wrap: anywhere; }
.tg-kpi b.tg-up { color: #12a866; }
.tg-kpi b.tg-down { color: #e5484d; }
.tg-kpi span { font-size: .78rem; color: rgb(var(--text_muted_color)); }
.tg-chart { margin: 1.1rem 0 0; }
.tg-chart svg { display: block; width: 100%; height: 150px; }
.tg-chart .tg-line { fill: none; stroke: #229ed9; stroke-width: 2.5; stroke-linejoin: round; }
.tg-chart .tg-area { fill: rgb(34 158 217 / .12); stroke: none; }
.tg-chart figcaption { display: flex; justify-content: space-between; gap: .5rem; font-size: .75rem; color: rgb(var(--text_muted_color)); margin-top: .35rem; font-variant-numeric: tabular-nums; }
.tg-note { margin: 1rem 0 0; }
.tg-about { margin-top: 1rem; font-size: .92rem; line-height: 1.55; overflow-wrap: anywhere; }
.tg-cta-h { font-size: 1.02rem; font-weight: 700; margin: 0 0 .35rem; }
.tg-cta-p { font-size: .86rem; color: rgb(var(--text_muted_color)); margin: 0 0 .8rem; }
.tg-cta-hr { margin: 1.1rem 0; opacity: .12; }
@media (max-width: 575.98px) {
    .tg-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tg-kpi b { font-size: 1.08rem; }
}

/* Каталог /telegram (внутри .portal — токены портала). */
.portal .tg-topics { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 6px; }
.portal .tg-topics a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: var(--p-surface); border: 1px solid var(--p-line); color: var(--p-text); font-size: 14px; text-decoration: none; }
.portal .tg-topics a.on { background: var(--p-accent); border-color: var(--p-accent); color: var(--p-on-accent); }
.portal .tg-topics a small { color: inherit; opacity: .6; font-variant-numeric: tabular-nums; }
.portal .tg-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin: 14px 0; }
.portal .tg-search { display: flex; gap: 8px; flex: 1 1 260px; max-width: 420px; }
.portal .tg-search input, .portal .tg-suggest input { flex: 1; min-width: 0; height: 40px; border-radius: var(--p-r-sm); border: 1px solid var(--p-line); background: var(--p-surface); color: var(--p-text); padding: 0 12px; font: inherit; }
.portal .tg-sort { display: flex; gap: 6px; flex-wrap: wrap; font-size: 14px; }
.portal .tg-sort a { padding: 6px 10px; border-radius: var(--p-r-sm); color: var(--p-muted); text-decoration: none; }
.portal .tg-sort a.on { background: var(--p-surface); color: var(--p-text); font-weight: 600; }
.portal .tg-ch { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--p-text); text-decoration: none; }
.portal .tg-ch img { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; object-fit: cover; background: var(--p-surface-2); }
.portal .tg-ch span { min-width: 0; }
.portal .tg-ch b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 360px; }
.portal .tg-ch small { color: var(--p-muted); font-size: 12px; }
.portal .tg-suggest { display: flex; gap: 8px; margin-top: 10px; }
.portal .tg-flash { margin-top: 10px; font-size: 14px; }
.portal .tg-flash.err { color: #e5484d; }
@media (max-width: 620px) {
    .portal .tg-hide-sm { display: none; }
    .portal .tg-ch b { max-width: 180px; }
}