/* Максопедия — дизайн-система v2.
   Палитра — как у mxstat.ru (серый фон, белые карточки, индиго/синий/фиолетовый),
   блоки — как у telemetr.me: белые карточки лежат на сером фоне и всегда отбрасывают тень. */

@font-face { font-family: "Golos Text"; src: url("/static/fonts/golos-text-cyrillic-wght-normal.woff2") format("woff2-variations"); font-weight: 400 900; font-display: swap; unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Golos Text"; src: url("/static/fonts/golos-text-latin-wght-normal.woff2") format("woff2-variations"); font-weight: 400 900; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* ---------- Токены ---------- */
:root {
  --bg: #f5f5f5;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --ink: #0f172a;
  --ink-2: #64748b;
  --ink-3: #94a3b8;
  --line: #e2e8f0;
  --line-2: #f1f5f9;
  --brand: #4152d1;
  --brand-d: #3a45bd;
  --brand-l: #eef1ff;
  --blue: #3b82f6;
  --blue-l: #eff6ff;
  --violet: #8b5cf6;
  --violet-l: #f5f3ff;
  --pink: #ec4899;
  --sky: #0ea5e9;
  --ok: #10b981;
  --ok-l: #ecfdf5;
  --warn: #f59e0b;
  --warn-l: #fffbeb;
  --down: #ef4444;
  --down-l: #fef2f2;
  --grad-hero: linear-gradient(135deg, #e0e7ff 0%, #ede9fe 48%, #fce7f3 100%);
  --grad-brand: linear-gradient(135deg, #4152d1 0%, #6d5ef0 55%, #8b5cf6 100%);
  --shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 6px 24px rgba(15, 23, 42, .07);
  --shadow-lg: 0 2px 6px rgba(15, 23, 42, .06), 0 18px 48px rgba(15, 23, 42, .12);
  --r: 18px;
  --r-sm: 12px;
  --wrap: 1200px;
  --gutter: 16px;
  --f: "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1419; --surface: #1a2230; --surface-2: #202a3a; --ink: #f1f5f9; --ink-2: #a3b1c6; --ink-3: #7b8aa1;
    --line: #2d3748; --line-2: #243041; --brand: #6b7cff; --brand-d: #5a6af0; --brand-l: #232c52;
    --blue-l: #1b2a45; --violet-l: #2a2350; --ok-l: #12302a; --warn-l: #3a2d12; --down-l: #3d1c22;
    --grad-hero: linear-gradient(135deg, #1e2347 0%, #261f47 50%, #3a1e3a 100%);
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
    --shadow-lg: 0 2px 8px rgba(0, 0, 0, .35), 0 18px 48px rgba(0, 0, 0, .35);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0f1419; --surface: #1a2230; --surface-2: #202a3a; --ink: #f1f5f9; --ink-2: #a3b1c6; --ink-3: #7b8aa1;
  --line: #2d3748; --line-2: #243041; --brand: #6b7cff; --brand-d: #5a6af0; --brand-l: #232c52;
  --blue-l: #1b2a45; --violet-l: #2a2350; --ok-l: #12302a; --warn-l: #3a2d12; --down-l: #3d1c22;
  --grad-hero: linear-gradient(135deg, #1e2347 0%, #261f47 50%, #3a1e3a 100%);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
  --shadow-lg: 0 2px 8px rgba(0, 0, 0, .35), 0 18px 48px rgba(0, 0, 0, .35);
  color-scheme: dark;
}

/* ---------- Основа ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; overflow-x: clip; background: var(--bg); color: var(--ink); font: 400 16px/1.6 var(--f); }
img, svg { max-width: 100%; height: auto; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--violet); outline-offset: 2px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--f); color: var(--ink); line-height: 1.15; letter-spacing: -.02em; margin-top: 0; }
h1 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem); font-weight: 800; margin-bottom: .35em; }
h2 { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem); font-weight: 750; margin: 0 0 .5em; }
h3 { font-size: 1.1rem; font-weight: 700; margin: 1.2em 0 .4em; }
p { margin: 0 0 1em; }
.num { font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 820px; }
.muted { color: var(--ink-2); }
.small { font-size: .875rem; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--surface); padding: 8px 12px; z-index: 50; border-radius: 8px; }
.skip:focus { left: 8px; }
.ico { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.i3d { width: 40px; height: 40px; flex: none; object-fit: contain; }
.i3d--lg { width: 72px; height: 72px; }
.i3d--xl { width: 112px; height: 112px; }

/* ---------- Пульс MAX ---------- */
.pulse { background: var(--grad-brand); color: #fff; font-size: .8rem; font-weight: 500; }
.pulse a { color: inherit; display: flex; align-items: center; gap: 12px; padding: 6px var(--gutter); max-width: var(--wrap); margin: 0 auto; min-height: 36px; text-decoration: none; }
.pulse__dot { width: 9px; height: 9px; border-radius: 50%; background: #34d399; flex: none; color: rgba(52, 211, 153, .6); animation: beat 2.4s ease-out infinite; }
.pulse--warn .pulse__dot { background: #fbbf24; color: rgba(251, 191, 36, .6); animation-duration: 1.2s; }
.pulse--down .pulse__dot { background: #f87171; color: rgba(248, 113, 113, .7); animation-duration: .8s; }
.pulse__label { white-space: nowrap; font-weight: 650; }
.pulse__line { flex: 1; min-width: 40px; height: 16px; opacity: .85; }
.pulse__line polyline { fill: none; stroke: #fff; stroke-width: 1.3; vector-effect: non-scaling-stroke; }
.pulse__meta { white-space: nowrap; opacity: .85; }
@keyframes beat { 0% { box-shadow: 0 0 0 0 currentColor; } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (max-width: 640px) { .pulse__meta--wide { display: none; } }

/* ---------- Шапка ---------- */
.head { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: saturate(1.4) blur(12px); box-shadow: 0 1px 0 var(--line), 0 4px 18px rgba(15, 23, 42, .04); }
.head__in { display: flex; align-items: center; gap: 18px; min-height: 64px; }
.mark { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none !important; }
.mark__seal { width: 36px; height: 36px; border-radius: 11px; background: var(--grad-brand); color: #fff; display: grid; place-items: center; font: 800 1.15rem/1 var(--f); box-shadow: 0 4px 12px rgba(65, 82, 209, .35); }
.mark__name { font: 800 1.25rem/1 var(--f); letter-spacing: -.03em; }
.nav { display: flex; gap: 2px; margin-left: auto; align-items: center; }
.nav__item { position: relative; }
.nav__link { display: flex; align-items: center; gap: 7px; color: var(--ink); padding: 9px 12px; border-radius: 10px; font-weight: 550; font-size: .94rem; text-decoration: none !important; }
.nav__link .ico { color: var(--ink-3); width: 17px; height: 17px; }
.nav__link:hover, .nav__item:focus-within > .nav__link { background: var(--line-2); }
.nav__link[aria-current="page"] { background: var(--brand-l); color: var(--brand); }
.nav__link[aria-current="page"] .ico { color: var(--brand); }
.nav__drop { position: absolute; top: calc(100% + 6px); left: 0; min-width: 270px; background: var(--surface); border-radius: var(--r-sm); box-shadow: var(--shadow-lg); padding: 8px; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: .15s; z-index: 40; }
.nav__item:hover .nav__drop, .nav__item:focus-within .nav__drop { opacity: 1; visibility: visible; transform: none; }
.nav__drop a { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 9px; color: var(--ink); font-size: .92rem; text-decoration: none !important; }
.nav__drop a:hover { background: var(--line-2); }
.nav__drop img { width: 28px; height: 28px; }
.head__actions { display: flex; gap: 8px; align-items: center; }
.icon-btn { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); cursor: pointer; }
.icon-btn:hover { color: var(--ink); border-color: var(--ink-3); }


/* ---------- Нижняя панель на телефоне ---------- */
.tabbar { display: none; }
@media (max-width: 1000px) {
  body { padding-bottom: 70px; }
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--surface); box-shadow: 0 -4px 20px rgba(15, 23, 42, .08); padding: 6px 12px calc(6px + env(safe-area-inset-bottom)); }
  .tabbar a { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: .75rem; color: var(--ink-2); text-decoration: none; padding: 4px; border-radius: 10px; }
  .tabbar a[aria-current="page"] { color: var(--brand); font-weight: 650; background: var(--brand-l); }
  .tabbar .ico { width: 22px; height: 22px; }
}

/* ---------- Каркас страницы ---------- */
.page { padding: 20px 0 8px; }
.crumbs { font-size: .84rem; color: var(--ink-3); margin: 0 0 14px; }
.crumbs ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.crumbs li + li::before { content: "›"; margin-right: 6px; color: var(--ink-3); }
.crumbs a { color: var(--ink-2); }
.page-head { display: flex; gap: 20px; align-items: center; justify-content: space-between; }
.page-head__text { min-width: 0; }
.page-head h1 { margin-bottom: .2em; }
.lead { font-size: 1.08rem; color: var(--ink-2); max-width: 62ch; margin: 0; }
@media (max-width: 640px) { .page-head .i3d--xl { width: 72px; height: 72px; } }

/* ---------- Карточки ---------- */
.card { background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow); padding: 22px 24px; }
.card + .card, .card + .grid, .grid + .card, .grid + .grid { margin-top: 20px; }
@media (max-width: 640px) { .card { padding: 18px 16px; } }
.card--flush { padding: 0; overflow: hidden; }
.card--tint { background: var(--grad-hero); }
.card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.card__head h2, .card__head h3 { margin: 0; }
.card__sub { color: var(--ink-2); font-size: .9rem; margin: 4px 0 0; }
.card__more { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; font-size: .92rem; margin-top: 14px; }
.grid { display: grid; gap: 20px; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
@media (max-width: 400px) { .grid--2, .grid--3 { grid-template-columns: minmax(0, 1fr); } }
.section-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 44px 0 14px; flex-wrap: wrap; }
.section-title h2 { margin: 0; font-size: clamp(1.4rem, 1.15rem + 1vw, 2rem); }
.section-title p { margin: 4px 0 0; color: var(--ink-2); }

/* ---------- Кнопки, бейджи, чипы ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 18px; border-radius: 11px; font: 650 .95rem/1.2 var(--f); border: 1px solid transparent; cursor: pointer; text-decoration: none !important; white-space: nowrap; }
.btn--main { background: var(--brand); color: #fff; box-shadow: 0 4px 14px rgba(65, 82, 209, .3); }
.btn--main:hover { background: var(--brand-d); }
.btn--dark { background: var(--ink); color: var(--surface); }
.btn--line { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn--line:hover { border-color: var(--ink-3); }
.btn--white { background: #fff; color: #3a45bd; }
.badge { display: inline-flex; align-items: center; gap: 5px; font: 600 .75rem/1 var(--f); padding: 5px 9px; border-radius: 999px; background: var(--line-2); color: var(--ink-2); white-space: nowrap; text-decoration: none !important; }
.badge--brand { background: var(--brand-l); color: var(--brand); }
.badge--violet { background: var(--violet-l); color: var(--violet); }
.badge--ok { background: var(--ok-l); color: var(--ok); }
.badge--warn { background: var(--warn-l); color: #b45309; }
.badge--down { background: var(--down-l); color: var(--down); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.chips a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; background: var(--surface); box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 0 0 1px var(--line); color: var(--ink); font-size: .9rem; font-weight: 500; text-decoration: none !important; }
.chips a:hover { color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.chips--glass a { background: rgba(255, 255, 255, .72); backdrop-filter: blur(8px); box-shadow: 0 0 0 1px rgba(255, 255, 255, .6); }
.delta { display: inline-flex; align-items: center; font-weight: 650; font-size: .8rem; padding: 3px 7px; border-radius: 7px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.delta--up { background: var(--ok-l); color: var(--ok); }
.delta--down { background: var(--down-l); color: var(--down); }
.delta--none { background: var(--line-2); color: var(--ink-3); }

/* ---------- Вкладки ---------- */
.tabs { display: flex; gap: 2px; overflow-x: auto; border-bottom: 1px solid var(--line); margin-bottom: 16px; scrollbar-width: none; }
.tabs [role="tab"] { appearance: none; background: none; border: 0; border-bottom: 2.5px solid transparent; padding: 10px 12px; margin-bottom: -1px; font: 600 .94rem/1.2 var(--f); color: var(--ink-2); cursor: pointer; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.tabs [role="tab"] .count { font-size: .75rem; font-weight: 650; background: var(--line-2); color: var(--ink-2); border-radius: 999px; padding: 2px 7px; }
.tabs [role="tab"][aria-selected="true"] { color: var(--ink); border-bottom-color: var(--brand); }
.tabs [role="tab"][aria-selected="true"] .count { background: var(--brand-l); color: var(--brand); }
.seg { display: inline-flex; background: var(--line-2); border-radius: 11px; padding: 3px; gap: 2px; }
.seg [role="tab"], .seg a { appearance: none; border: 0; background: none; padding: 6px 12px; border-radius: 8px; font: 600 .84rem/1.2 var(--f); color: var(--ink-2); cursor: pointer; text-decoration: none !important; white-space: nowrap; }
.seg [aria-selected="true"], .seg a[aria-current="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(15, 23, 42, .12); }
[role="tabpanel"][hidden] { display: none; }

/* ---------- Сетки с иконками (темы, регионы) ---------- */
.icon-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: 2px 18px; }
.icon-grid a { display: flex; align-items: center; gap: 12px; padding: 7px 8px; border-radius: 12px; color: var(--ink); font-weight: 550; text-decoration: none !important; }
.icon-grid a:hover { background: var(--line-2); }
.icon-grid .i3d { width: 36px; height: 36px; }
.icon-grid .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icon-grid .n { color: var(--ink-3); font-size: .86rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.dot-ico { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--brand-l); color: var(--brand); font-weight: 800; font-size: .85rem; flex: none; }

/* ---------- Списки каналов ---------- */
.rank { list-style: none; padding: 0; margin: 0; counter-reset: r; }
.rank > li { counter-increment: r; display: grid; grid-template-columns: 24px 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 0; min-height: 44px; border-bottom: 1px solid var(--line-2); position: relative; }
.rank > li:last-child { border-bottom: 0; }
.rank > li::before { content: counter(r); color: var(--ink-3); font-weight: 650; font-size: .85rem; text-align: right; font-variant-numeric: tabular-nums; }
.rank--plain > li { grid-template-columns: 24px minmax(0, 1fr) auto; }
.ava { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--line-2); flex: none; }
.ava--empty { display: grid; place-items: center; font-weight: 800; color: var(--brand); background: var(--brand-l); }
.rank__name { font-weight: 600; color: var(--ink); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none !important; }
.rank__name::after { content: ""; position: absolute; inset: 0; }
.rank__name:hover { color: var(--brand); }
.rank__meta { font-size: .8rem; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank__val { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rank__val small { display: block; font-size: .75rem; font-weight: 500; color: var(--ink-3); }
.ch-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.ch { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 14px; align-items: center; background: var(--surface); border-radius: var(--r-sm); box-shadow: var(--shadow); padding: 12px 16px; }
.ch .ava { width: 48px; height: 48px; }

/* Лента карточек с прокруткой вбок */
.strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 10px; scrollbar-width: thin; }
.tile { scroll-snap-align: start; position: relative; background: var(--surface-2); border-radius: var(--r-sm); padding: 12px; display: flex; gap: 12px; align-items: center; min-width: 0; }
.tile:hover { background: var(--brand-l); }
.tile .ava { width: 44px; height: 44px; }
.tile > div { min-width: 0; }

/* ---------- Таблицы ---------- */
.tbl-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: .93rem; }
.tbl th { text-align: left; font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); font-weight: 650; padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl td { padding: 10px 12px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.tbl tbody tr:nth-child(even) td { background: var(--surface-2); }
.tbl tbody tr:hover td { background: var(--brand-l); }
.tbl td.r, .tbl th.r { text-align: right; font-variant-numeric: tabular-nums; }
.tbl .pos { color: var(--ink-3); font-weight: 650; width: 1%; }
.tbl .who { position: relative; display: flex; align-items: center; gap: 10px; min-width: 210px; }
.tbl .who a { color: var(--ink); font-weight: 600; }
.bar-cell { min-width: 110px; width: 18%; }
/* Значки строки каталога (14.10.2026): подтверждён, официальный, A+, РКН, красные метки */
.mks { display: inline-flex; gap: 3px; vertical-align: -3px; margin-right: 6px; }
.mk { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 6px;
  font: 700 .75rem/1 var(--f); letter-spacing: 0; }
.mk .ico { width: 12px; height: 12px; }
.mk--ok { background: var(--ok-l); color: var(--ok); }
.mk--aplus { background: var(--brand-l); color: var(--brand); }
.mk--bad { background: var(--down-l); color: var(--down); }
.tbl .pct { display: block; font-size: .72rem; color: var(--ink-3); margin-top: 2px; }
.subs-extra { display: none; }
/* Таблицы каталога — до 1440 px (решение владельца 14.10.2026), текстовые страницы — 1200 */
.wrap--wide { max-width: 1440px; }
/* «Каталог в цифрах» на /kanaly/ (14.10.2026): четыре плашки, на телефоне 2 × 2; «добавлено сегодня» — строкой под кнопкой */
.kpis-card { text-align: center; }
.kpis { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.kpis li { background: var(--surface); border-radius: var(--r-sm); box-shadow: var(--shadow); padding: 18px 12px 16px; }
.kpis b { display: block; font-size: clamp(1.35rem, 2.4vw, 1.9rem); font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.kpis span { display: block; margin-top: 6px; font-size: .86rem; color: var(--ink-2); }
.kpis__btn { margin-top: 18px; }
.kpis__today { margin: 12px 0 0; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.kpis__note { margin: 6px auto 0; max-width: 62ch; }
@media (max-width: 900px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .kpis__btn { width: 100%; } }
/* 320–400 px: «25 039 329» не помещается в половину экрана — плитки в один столбец, число и подпись в строку (аудит 16.10.2026) */
@media (max-width: 400px) { .kpis { grid-template-columns: minmax(0, 1fr); gap: 10px; } .kpis li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 14px; text-align: left; }
  .kpis b { font-size: 1.3rem; } .kpis span { margin-top: 0; text-align: right; } }
/* Пять вкладок сортировки на телефоне — ровная сетка 3 + 2 */
@media (max-width: 640px) {
  .card__head .seg--five { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .seg--five a { grid-column: span 2; }
  .seg--five a:nth-child(n + 4) { grid-column: span 3; }
}
.bar { height: 8px; border-radius: 99px; background: var(--line-2); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 99px; background: var(--grad-brand); }

/* ---------- Кабинет: три действия на две минуты ---------- */
.welcome__steps { list-style: none; counter-reset: w; margin: 0; padding: 0; display: grid; gap: 10px; }
.welcome__steps li { counter-increment: w; position: relative; padding: 12px 14px 12px 52px; border-radius: var(--r-sm); background: var(--brand-l); line-height: 1.45; }
.welcome__steps li::before { content: counter(w); position: absolute; left: 14px; top: 11px; width: 28px; height: 28px; border-radius: 50%; background: var(--brand); color: #fff; font-weight: 800; display: grid; place-items: center; font-size: .9rem; }
.welcome__steps li.done { background: var(--ok-l); color: var(--ink-2); }
.welcome__steps li.done::before { content: "✓"; background: var(--ok); }
.welcome__steps li a { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; margin-top: 4px; }
.welcome__mail { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-2); }
.paywall-tbl td:first-child { white-space: normal; }
.share-row { margin: 18px 0 0; }
.admin-nav { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 0; }
.admin-nav a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); font-weight: 600; font-size: .9rem; text-decoration: none; color: var(--ink); }
.admin-nav a[aria-current="page"] { background: var(--brand); color: #fff; box-shadow: none; }
.admin-nav__site { margin-left: auto; color: var(--ink-2) !important; }
.login__code { font: 700 1.6rem/1.2 var(--f); letter-spacing: .3em; text-align: center; max-width: 260px; }
/* Сообщения: колокольчик, лента новостей системы, переписка (22.10.2026) */
.head__bell { position: relative; }
.head__bell--on { color: var(--brand); border-color: var(--brand); }
.head__bell-n { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--down); color: #fff; font: 700 .7rem/18px var(--f); text-align: center; }
.msg-tabs { margin-bottom: 14px; }
.notice-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.notice-item { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 14px 16px; background: var(--surface); }
.notice-item--new { border-color: var(--down); box-shadow: inset 3px 0 0 var(--down); }
.notice-item__head { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; }
.notice-item__head h3 { margin: 0; font-size: 1.05rem; }
.notice-item__meta { display: inline-flex; gap: 8px; align-items: center; }
.notice-item__excerpt { margin: 8px 0 0; color: var(--ink-2); }
.notice-item__full { margin-top: 10px; }
.notice-item__full[hidden] { display: none; }
.notice-item__more { margin-top: 10px; }
.chat { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.chat li { max-width: 80%; padding: 10px 14px; border-radius: 16px; background: var(--line-2); white-space: pre-line; }
.chat li.me { justify-self: end; background: var(--brand-l); }
.chat li time { display: block; margin-top: 4px; font-size: .75rem; color: var(--ink-3); white-space: nowrap; }
.chat-form { margin-top: 16px; display: grid; gap: 8px; } .chat-form textarea { min-height: 96px; }
@media (max-width: 640px) { .chat li { max-width: 94%; } }
.promo-slot { box-shadow: var(--shadow), inset 0 0 0 1.5px var(--brand); }
.promo-slot__head { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-bottom: 12px; }
.promo-slot__body { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.promo-slot__ava { width: 64px; height: 64px; border-radius: 18px; object-fit: cover; display: grid; place-items: center; font-weight: 800; font-size: 1.4rem; }
.promo-slot__name { font-weight: 750; font-size: 1.15rem; color: var(--ink); text-decoration: none; display: block; }
.promo-slot__text p { margin: 6px 0 0; color: var(--ink-2); }
.promo-slot__actions { display: grid; gap: 8px; }
@media (max-width: 640px) { .promo-slot__body { grid-template-columns: 52px minmax(0, 1fr); } .promo-slot__actions { grid-column: 1 / -1; } .promo-slot__actions .btn { width: 100%; } }
.mine-list .adinfo { grid-column: 1 / -1; margin-top: 0; }
.adinfo { margin-top: 8px; } .adinfo > summary { list-style: none; } .adinfo > summary::-webkit-details-marker { display: none; }
.adinfo__form { margin-top: 10px; display: grid; gap: 6px; max-width: 420px; } .adinfo__form .btn { margin-top: 6px; justify-self: start; }

/* ---------- Цифры (плитки) ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: 14px; }
.stat { background: var(--surface); border-radius: var(--r-sm); box-shadow: var(--shadow); padding: 16px 18px; position: relative; overflow: hidden; min-height: 116px; }
.stat__k { display: inline-flex; align-items: center; gap: 6px; font-size: .76rem; font-weight: 600; color: var(--ink-2); background: var(--line-2); border-radius: 999px; padding: 4px 9px; }
.stat__v { font-size: 1.65rem; font-weight: 800; letter-spacing: -.03em; margin: 10px 0 2px; font-variant-numeric: tabular-nums; }
.stat__d { font-size: .8rem; color: var(--ink-3); position: relative; z-index: 1; }
.stat--brand { background: var(--grad-brand); color: #fff; }
.stat--brand .stat__k { background: rgba(255, 255, 255, .18); color: #fff; }
.stat--brand .stat__d { color: rgba(255, 255, 255, .82); }
.stat .i3d { position: absolute; right: 8px; bottom: 6px; width: 54px; height: 54px; }

/* ---------- Графики ---------- */
.chart > svg { display: block; width: 100%; height: auto; }
.chart .ax { stroke: var(--line); stroke-width: 1; }
.chart .ln { fill: none; stroke: var(--brand); stroke-width: 2.4; vector-effect: non-scaling-stroke; }
.chart .ar { fill: var(--brand); opacity: .1; }
.chart text { fill: var(--ink-3); font: 500 12px var(--f); }
.chart__empty { color: var(--ink-3); padding: 34px 0; text-align: center; }
.donut-wrap { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 22px; align-items: center; }
@media (max-width: 520px) { .donut-wrap { grid-template-columns: minmax(0, 1fr); justify-items: center; } }
.donut text { fill: var(--ink); font: 800 22px var(--f); }
.donut .sub { fill: var(--ink-3); font: 500 10px var(--f); }
.legend { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; width: 100%; }
.legend li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 9px; align-items: center; font-size: .9rem; }
.legend i { width: 12px; height: 12px; border-radius: 4px; }
.legend span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.legend b { font-variant-numeric: tabular-nums; }
.hbars { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.hbars li { display: grid; grid-template-columns: minmax(100px, 40%) minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: .9rem; }
.hbars a, .hbars span { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbars .bar { height: 10px; }
.hbars b { font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; }
.spark { width: 100%; height: 120px; display: block; }
.spark .ln { fill: none; stroke: var(--brand); stroke-width: 2; vector-effect: non-scaling-stroke; }
.spark .ar { fill: var(--brand); opacity: .1; }

/* ---------- Первый экран с параллаксом ---------- */
.hero { position: relative; overflow: hidden; border-radius: 26px; margin-top: 18px; min-height: 540px; display: flex; align-items: center; box-shadow: var(--shadow-lg); isolation: isolate; background: var(--grad-hero); }
.hero__bg { position: absolute; inset: -10% 0; z-index: -2; will-change: transform; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 72% center; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(243, 245, 255, .97) 0%, rgba(243, 245, 255, .9) 36%, rgba(243, 245, 255, .3) 60%, rgba(243, 245, 255, 0) 78%); }
:root[data-theme="dark"] .hero::before { background: linear-gradient(90deg, rgba(15, 20, 25, .96) 0%, rgba(15, 20, 25, .88) 40%, rgba(15, 20, 25, .3) 66%, rgba(15, 20, 25, 0) 82%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero::before { background: linear-gradient(90deg, rgba(15, 20, 25, .96) 0%, rgba(15, 20, 25, .88) 40%, rgba(15, 20, 25, .3) 66%, rgba(15, 20, 25, 0) 82%); } }
.hero__in { padding: 44px 44px 40px; width: 100%; max-width: 690px; }
.hero h1 { font-size: clamp(2rem, 1.3rem + 3vw, 3.4rem); }
.hero h1 span { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .lead { margin-bottom: 22px; color: var(--ink-2); }
.hero__float { position: absolute; z-index: 0; width: 88px; height: 88px; filter: drop-shadow(0 14px 22px rgba(65, 82, 209, .28)); will-change: transform; pointer-events: none; }
.search { display: flex; gap: 8px; background: var(--surface); border-radius: 14px; padding: 6px; box-shadow: var(--shadow-lg); max-width: 640px; }
.search input { flex: 1; min-width: 0; border: 0; background: transparent; font: 400 1.05rem/1.4 var(--f); color: var(--ink); padding: 10px 12px; }
.search input:focus { outline: none; }
.search:focus-within { box-shadow: 0 0 0 3px var(--brand-l), var(--shadow-lg); }
.hero .chips { margin-top: 14px; }
.counters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 24px; max-width: 640px; }
.counter { background: rgba(255, 255, 255, .8); backdrop-filter: blur(10px); border-radius: 14px; padding: 12px 14px; box-shadow: 0 1px 2px rgba(15, 23, 42, .06); }
:root[data-theme="dark"] .counter { background: rgba(26, 34, 48, .82); }
.counter b { display: block; font-size: 1.35rem; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.counter span { font-size: .76rem; color: var(--ink-2); }
.counter--status b { display: flex; align-items: center; gap: 7px; font-size: 1.05rem; }
.counter--status i { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px var(--ok-l); }
.counter--warn i { background: var(--warn); box-shadow: 0 0 0 4px var(--warn-l); }
.counter--down i { background: var(--down); box-shadow: 0 0 0 4px var(--down-l); }
@media (max-width: 760px) {
  .hero { min-height: 0; border-radius: 20px; align-items: stretch; }
  .hero::before { background: linear-gradient(180deg, rgba(243, 245, 255, 0) 0%, rgba(243, 245, 255, .2) 22%, rgba(243, 245, 255, .97) 44%); }
  .hero__in { padding: 170px 18px 22px; }
  .hero__bg { inset: 0 0 auto 0; height: 300px; }
  .hero__bg img { object-position: 78% 30%; }
  .hero__float { display: none; }
  .counters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Промо и фото-карточки ---------- */
.promo { position: relative; overflow: hidden; border-radius: var(--r); box-shadow: var(--shadow); padding: 24px; display: flex; gap: 18px; align-items: center; color: #fff; background: var(--grad-brand); }
.promo--light { background: var(--grad-hero); color: var(--ink); }
.promo h3 { color: inherit; margin: 0 0 6px; font-size: 1.25rem; }
.promo p { margin: 0 0 14px; opacity: .9; }
.photo-card { position: relative; overflow: hidden; border-radius: var(--r); box-shadow: var(--shadow); min-height: 250px; display: flex; align-items: flex-end; color: #fff; text-decoration: none !important; isolation: isolate; }
.photo-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s; z-index: -2; }
.photo-card:hover img { transform: scale(1.04); }
.photo-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(15, 23, 42, 0) 25%, rgba(30, 27, 75, .85) 100%); }
.photo-card__t { padding: 20px; }
.photo-card__t b { display: block; font-size: 1.2rem; }
.photo-card__t span { opacity: .88; font-size: .92rem; }

/* ---------- Лента обновлений ---------- */
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { padding: 10px 0 12px 22px; border-left: 2px solid var(--line); position: relative; }
.timeline li::before { content: ""; position: absolute; left: -7px; top: 15px; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); border: 3px solid var(--brand); }
.timeline time { font-size: .8rem; color: var(--ink-3); font-weight: 600; }
.timeline a { display: block; font-weight: 650; color: var(--ink); margin-top: 2px; }
.timeline b { display: block; font-weight: 650; margin-top: 2px; }   /* «Версия 26.35.1» на своей строке, не впритык к дате (17.10.2026) */
.timeline .desc { margin-top: 4px; white-space: pre-line; }

/* ---------- Карточка канала ---------- */
.dossier { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 22px; align-items: center; }
.dossier__ava { width: 104px; height: 104px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px var(--surface), 0 0 0 6px var(--brand-l); }
.dossier h1 { margin-bottom: .15em; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); }
.dossier__user { color: var(--ink-3); font-weight: 500; }
.dossier__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.dossier__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
@media (max-width: 560px) { .dossier { grid-template-columns: 68px minmax(0, 1fr); gap: 14px; } .dossier__ava { width: 68px; height: 68px; } }
.verdict { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: start; }
.verdict__lamp { display: flex; flex-direction: column; gap: 6px; padding: 7px; background: #1e293b; border-radius: 12px; }
.verdict__lamp i { width: 15px; height: 15px; border-radius: 50%; background: #334155; display: block; }
.verdict--ok .verdict__lamp i:nth-child(3) { background: var(--ok); box-shadow: 0 0 12px var(--ok); }
.verdict--warn .verdict__lamp i:nth-child(2) { background: var(--warn); box-shadow: 0 0 12px var(--warn); }
.verdict--down .verdict__lamp i:nth-child(1) { background: var(--down); box-shadow: 0 0 12px var(--down); }
.verdict__title { font-size: 1.15rem; font-weight: 750; margin: 0 0 6px; }
.verdict ul { margin: 0; padding-left: 1.1em; color: var(--ink-2); }
.verdict__note { font-size: .82rem; color: var(--ink-3); margin: 10px 0 0; }
.card.verdict--ok { box-shadow: inset 4px 0 0 var(--ok), var(--shadow); }
.card.verdict--warn { box-shadow: inset 4px 0 0 var(--warn), var(--shadow); }
.card.verdict--none { box-shadow: inset 4px 0 0 var(--ink-3), var(--shadow); }
.hist { list-style: none; padding: 0; margin: 0; }
.hist li { padding: 10px 0; border-bottom: 1px solid var(--line-2); font-size: .93rem; }
.hist li:last-child { border-bottom: 0; }
.hist time { font-size: .78rem; color: var(--ink-3); display: block; margin-bottom: 3px; font-weight: 600; }
.desc { white-space: pre-line; }
.code { white-space: pre-wrap; word-break: break-all; margin: 0; background: var(--surface-2); border-radius: 10px; padding: 12px 14px; font: 500 .82rem/1.5 ui-monospace, Menlo, monospace; }

/* ---------- Справочник ---------- */
.hub-card { display: flex; gap: 16px; align-items: flex-start; }
.hub-card > div { min-width: 0; }
.hub-card h2, .hub-card h3 { margin: 0 0 8px; font-size: 1.15rem; }
.hub-card h2 a, .hub-card h3 a { color: var(--ink); }
.hub-card ul { margin: 0; padding-left: 1.05em; }
.hub-card li { margin: 4px 0; font-size: .93rem; }
.entry { font-size: .8rem; color: var(--ink-3); display: flex; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 12px; align-items: center; }
.answer { border-radius: var(--r-sm); background: var(--brand-l); padding: 16px 20px; font-size: 1.05rem; margin: 18px 0 22px; }
.answer__k { font-size: .75rem; font-weight: 750; text-transform: uppercase; letter-spacing: .07em; color: var(--brand); display: block; margin-bottom: 6px; }
.prose { font-size: 1.03rem; }
.prose h2 { margin-top: 1.6em; }
.prose ol, .prose ul { padding-left: 1.3em; }
.prose li { margin: .45em 0; }
.prose ol > li::marker { font-weight: 800; color: var(--brand); }
.prose img { border-radius: var(--r-sm); }
.shot { margin: 14px 0 18px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.shot img { width: 100%; max-width: 360px; height: auto; border-radius: 18px; border: 1px solid var(--line); box-shadow: 0 6px 20px rgba(15, 23, 42, .12); background: var(--surface); }
.shot figcaption { font-size: .85rem; color: var(--ink-2); max-width: 360px; }
.prose code { background: var(--line-2); border-radius: 5px; padding: 1px 5px; font-size: .9em; }
.draft { display: flex; gap: 10px; align-items: flex-start; background: var(--warn-l); border-radius: var(--r-sm); padding: 12px 16px; font-size: .92rem; margin: 0 0 18px; }
.faq details { border-bottom: 1px solid var(--line-2); padding: 12px 0; }
.faq summary { cursor: pointer; font-weight: 650; padding: 6px 0; }
.faq details p { margin: 8px 0 0; color: var(--ink-2); }
.toc { margin-bottom: 22px; }

/* ---------- Статус ---------- */
.state { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 20px; align-items: center; }
.state__lamp { width: 60px; height: 60px; border-radius: 50%; }
.state--ok .state__lamp { background: var(--ok); box-shadow: 0 0 0 9px var(--ok-l); }
.state--warn .state__lamp { background: var(--warn); box-shadow: 0 0 0 9px var(--warn-l); }
.state--down .state__lamp { background: var(--down); box-shadow: 0 0 0 9px var(--down-l); }
.state h1 { margin: 0 0 4px; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); }
@media (max-width: 640px) { .state { grid-template-columns: auto minmax(0, 1fr); } .state .i3d--xl { display: none; } }
.probes { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.probe { background: var(--surface-2); border-radius: 12px; padding: 12px 14px; display: flex; justify-content: space-between; gap: 8px; align-items: center; font-weight: 550; }
.report-form fieldset { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.report-form label { display: flex; gap: 9px; align-items: center; background: var(--surface-2); border-radius: 12px; padding: 11px 13px; cursor: pointer; font-size: .93rem; }
.report-form label:has(input:checked) { background: var(--brand-l); color: var(--brand); font-weight: 600; }
.report-form input[type="radio"] { accent-color: var(--brand); }
.notice { padding: 12px 16px; border-radius: var(--r-sm); background: var(--ok-l); margin: 0 0 16px; }

/* ---------- Формы ---------- */
.field { display: block; width: 100%; margin: 8px 0 14px; padding: 12px 14px; font: 400 1rem/1.4 var(--f); color: var(--ink); background: var(--surface-2); border: 1px solid var(--line); border-radius: 11px; }
.field:focus { outline: 3px solid var(--brand-l); border-color: var(--brand); }

/* ---------- Пагинация ---------- */
.pager { display: flex; gap: 8px; justify-content: center; align-items: center; margin: 22px 0 6px; }
.pager a, .pager span { padding: 8px 14px; border-radius: 10px; background: var(--surface); box-shadow: var(--shadow); color: var(--ink); }

/* ---------- Подвал ---------- */
.foot { margin-top: 56px; background: #0f172a; color: #cbd5e1; padding: 44px 0 30px; font-size: .92rem; }
.foot a { color: #e2e8f0; }
.foot__cols { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 26px; }
@media (max-width: 900px) { .foot__cols { grid-template-columns: repeat(2, 1fr); } }
.foot__title { color: #fff; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; margin: 0 0 12px; }
.foot ul { list-style: none; padding: 0; margin: 0; }
.foot li { margin: 7px 0; }
.foot .mark { color: #fff; }
.foot__about { color: #94a3b8; margin: 12px 0 0; max-width: 30ch; }
.foot__legal { margin-top: 28px; padding-top: 16px; border-top: 1px solid #1e293b; color: #94a3b8; font-size: .82rem; }

/* ---------- Cookie ---------- */
.cookie { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 40; max-width: 420px; background: var(--surface); color: var(--ink);
  border-radius: 18px; box-shadow: var(--shadow-lg); padding: 18px 20px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.cookie[hidden] { display: none; }
.cookie p { margin: 0; color: var(--ink-2); font-size: 1rem; line-height: 1.5; }
.cookie a { color: var(--brand); font-weight: 650; }
.cookie .btn { width: 100%; justify-content: center; padding: 12px 16px; font-size: 1.02rem; }
@media (max-width: 1000px) { .cookie { bottom: 84px; } }   /* над нижней панелью */

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* ---------- Мелкие помощники главной ---------- */
.section-gap { margin-top: 24px; }
.hero__title { margin-top: 14px; }
a.counter { color: inherit; text-decoration: none !important; }
.spark__caption { margin: 6px 0 14px; }
.card__title-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.card__more--top { margin: 0; }
.grid--aside { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
@media (max-width: 860px) { .grid--aside { grid-template-columns: minmax(0, 1fr); } }
.icon-grid--one { grid-template-columns: minmax(0, 1fr); }
.promo__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .45); background: transparent; }
.btn--ghost:hover { background: rgba(255, 255, 255, .12); }
a.tile { color: var(--ink); text-decoration: none !important; }
.tile__name { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile__meta { display: block; font-size: .8rem; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabs [role="tab"] img { width: 22px; height: 22px; }
@media (max-width: 760px) { .promo { flex-direction: column; align-items: flex-start; } }
.stat:has(.i3d) .stat__d { padding-right: 52px; }
.card__head--icon { flex-wrap: nowrap; align-items: center; }
.card__head--icon > div { min-width: 0; }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
@media (max-width: 1100px) and (min-width: 761px) {
  .hero::before { background: linear-gradient(90deg, rgba(243, 245, 255, .97) 0%, rgba(243, 245, 255, .93) 50%, rgba(243, 245, 255, .45) 75%, rgba(243, 245, 255, .1) 100%); }
  .hero__float { opacity: .9; }
}

/* ---------- Внутренние страницы ---------- */
.search--flat { box-shadow: none; background: var(--surface-2); max-width: none; }
.grid--article { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
@media (max-width: 980px) { .grid--article { grid-template-columns: minmax(0, 1fr); } }
.aside { display: grid; gap: 16px; align-content: start; position: sticky; top: 84px; }
@media (max-width: 980px) { .aside { position: static; } }
.aside h2 { font-size: 1rem; margin-bottom: 10px; }
.toc-list, .side-list { margin: 0; padding-left: 1.2em; font-size: .92rem; }
.toc-list li, .side-list li { margin: 6px 0; }
.toc-list a, .side-list a { color: var(--ink); }
.toc-list a:hover, .side-list a:hover { color: var(--brand); }
.promo--small { padding: 16px; gap: 12px; color: #fff; text-decoration: none !important; }
.promo--small .i3d--lg { width: 56px; height: 56px; }
.spark-axis { display: flex; justify-content: space-between; font-size: .76rem; color: var(--ink-3); margin-top: 6px; }
.tool-card { color: var(--ink); text-decoration: none !important; }
.tool-card h2 { font-size: 1.1rem; margin: 8px 0 6px; }
.tool-card:hover { box-shadow: var(--shadow-lg); }
.entry .badge img { width: 16px; height: 16px; }
.page-head { min-height: 132px; }
@media (max-width: 760px) { .hero .chips li:nth-child(n+3) { display: none; } .hero .btn--main { padding: 11px 14px; } }

/* ---------- Защита от выезда за экран ----------
   Элемент сетки по умолчанию не уже своего самого длинного неразрывного текста —
   из-за этого длинные названия, ссылки и строки вкладок выталкивали блоки вправо. */
.grid > *, .stats > *, .counters > *, .icon-grid > li, .hbars > li > *, .card { min-width: 0; }
.desc, .prose, .card p, .hist li, .answer { overflow-wrap: anywhere; }
main.wrap { min-width: 0; }

/* ---------- Шапка: рекламодатели, кнопка «Добавить канал», меню на телефоне ---------- */
.head__cta { margin-left: 4px; }

.mnav { display: none; position: relative; }
.mnav > summary { list-style: none; cursor: pointer; }
.mnav > summary::-webkit-details-marker { display: none; }
.mnav__panel { position: absolute; right: 0; top: calc(100% + 10px); width: min(340px, calc(100vw - 32px)); background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow-lg); padding: 12px; z-index: 45; display: grid; gap: 2px; }
.mnav__panel a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; color: var(--ink); font-weight: 550; text-decoration: none !important; }
.mnav__panel a:hover { background: var(--line-2); }
.mnav__panel a img { width: 28px; height: 28px; }
.mnav__panel .btn { margin-top: 8px; color: #fff; justify-content: center; }


/* ---------- Телефон: кнопки во всю ширину, вкладки переносятся ---------- */
@media (max-width: 640px) {
  .page .btn:not(.search .btn), .hero .btn:not(.search .btn), .section-title .btn, .promo .btn, main .card__head .btn { width: 100%; }
  .section-title { margin-top: 32px; }
  .section-title > div { width: 100%; }
  .card__head > .btn { order: 3; }
  .promo__actions { width: 100%; }
  .dossier__actions { width: 100%; }
  .tabs { flex-wrap: wrap; overflow: visible; border-bottom: 0; gap: 6px; }
  .tabs [role="tab"] { border: 1px solid var(--line); border-radius: 999px; padding: 8px 12px; margin: 0; }
  .tabs [role="tab"][aria-selected="true"] { background: var(--brand-l); color: var(--brand); border-color: var(--brand); }
  .card__head .seg { width: 100%; }
  .seg [role="tab"], .seg a { flex: 1; text-align: center; }
  .page-head { flex-direction: row; align-items: flex-start; }
  .page-head .i3d--xl { width: 64px; height: 64px; }
  .tbl .who { min-width: 180px; }
}

/* ---------- Информационные страницы: блоки по разделам ---------- */
.info-sections { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); margin-top: 20px; }
.info-sections .card h2:first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }

/* Бургер: три полоски → крестик, когда меню открыто */
.mnav__btn .mnav__close { display: none; }
.mnav[open] .mnav__btn .mnav__open { display: none; }
.mnav[open] .mnav__btn .mnav__close { display: block; }
.mnav[open] .mnav__btn { background: var(--brand-l); color: var(--brand); border-color: var(--brand); }
.mnav__btn .ico { width: 20px; height: 20px; }

/* Шапка прячется при прокрутке вниз и возвращается при прокрутке вверх */
.head { transition: transform .25s ease, box-shadow .25s ease; }
.head--hidden { transform: translateY(-100%); box-shadow: none; }
@media (max-width: 640px) { .btn { white-space: normal; text-align: center; line-height: 1.3; } }
@media (max-width: 640px) { .icon-grid .name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; } }
@media (max-width: 640px) {
  .rank--plain .rank__name { white-space: normal; }
  .rank--plain .rank__meta { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .rank--plain > li { grid-template-columns: 20px minmax(0, 1fr); }
  .rank--plain > li > .badge { display: none; }
}
/* Внутри сеток карточки стоят рядом — вертикальный отступ между соседями им не нужен */
.grid > .card + .card, .grid > * + .card, .info-sections > .card + .card, .stats > .card + .card { margin-top: 0; }

/* ---------- Верхняя полоса и шапка: от края до края ---------- */
.pulse a { max-width: none; padding: 6px clamp(16px, 2.5vw, 32px); }
.head__in { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 0 clamp(16px, 2.5vw, 32px); }
.mark { flex: none; }
.nav { flex: 1 1 auto; justify-content: center; min-width: 0; }
.head__actions { flex: none; margin-left: auto; }
/* Ширина меню: с иконками — от 1600 px, без иконок — от 1280 px, дальше — бургер */
@media (max-width: 1719px) { .nav__link > .ico:first-child { display: none; } .nav__link { padding: 9px 10px; } }
@media (max-width: 1360px) { .nav__link { padding: 9px 8px; font-size: .9rem; } .nav__link .ico { width: 14px; height: 14px; } }
@media (max-width: 1279px) { .nav { display: none; } .mnav { display: block; } .head__actions { border-left: 0; padding-left: 0; } }
@media (max-width: 640px) { .head__cta { display: none; } }
@media (min-width: 641px) { .mnav__panel .btn { display: none; } }
.mnav__theme { display: none; align-items: center; gap: 10px; padding: 10px 12px; border: 0; background: none; border-radius: 10px; color: var(--ink); font: 550 1rem var(--f); cursor: pointer; text-align: left; }
.mnav__theme:hover { background: var(--line-2); }
@media (max-width: 380px) {
  .head__theme { display: none; }
  .mnav__theme { display: flex; }
  .mark__name { font-size: 1.1rem; }
  .head__in { gap: 8px; }
  .head__actions { gap: 6px; }
  .seg [role="tab"], .seg a { padding: 6px 8px; font-size: .8rem; }
}
@media (max-width: 900px) { .foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .foot__cols { grid-template-columns: minmax(0, 1fr); } }
.foot__cols > div { min-width: 0; overflow-wrap: anywhere; }

/* ---------- Плашки и вкладки: ровная сетка на телефоне ---------- */
.chips--spaced { margin-top: 14px; }
.badge-row { display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 640px) {
  /* Вкладки — две равные колонки; нечётная последняя — на всю строку */
  .tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .tabs [role="tab"] { width: 100%; min-height: 46px; justify-content: center; text-align: center; white-space: normal; line-height: 1.2; font-size: .9rem; padding: 8px 10px; border-radius: 12px; }
  .tabs [role="tab"]:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .tabs [role="tab"] img { width: 20px; height: 20px; }
  /* Списки-ссылки: каждая во всю ширину, текст слева */
  ul.chips { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
  ul.chips a { width: 100%; min-height: 46px; border-radius: 12px; padding: 11px 14px; line-height: 1.3; }
  /* Короткие ссылки — две равные колонки */
  ul.chips--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  ul.chips--grid a { justify-content: center; text-align: center; }
  ul.chips--grid > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  /* Переключатели периода и сортировки — равные доли */
  .seg { display: flex; width: 100%; }
  .seg [role="tab"], .seg a { flex: 1 1 0; text-align: center; padding: 8px 6px; }
}
.who__text { min-width: 0; }
.who__text a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.subs-short { display: none; }
@media (max-width: 640px) {
  ul.chips--grid a { padding: 10px 8px; gap: 6px; font-size: .88rem; }
  ul.chips--grid .ico { width: 16px; height: 16px; }
  /* Таблица каналов на телефоне: место, канал, подписчики — без прокрутки вбок */
  .hide-sm { display: none; }
  .tbl { table-layout: fixed; }
  .tbl th:first-child, .tbl td.pos { width: 30px; padding-left: 4px; padding-right: 4px; }
  .tbl .who-cell { width: auto; }
  .tbl th.r, .tbl td.r { width: 84px; padding-left: 4px; }
  .tbl .who { min-width: 0; }
  .tbl td, .tbl th { padding-top: 9px; padding-bottom: 9px; }
  .subs-full { display: none; }
  .subs-short { display: inline; }
}
@media (max-width: 640px) { .tbl th.r, .tbl td.r { width: 98px; } .tbl th { letter-spacing: .02em; font-size: .68rem; } }

/* ---------- Блоки «О Максопедии» ---------- */
.card--wide { grid-column: 1 / -1; }
.block-card { display: flex; gap: 18px; align-items: flex-start; }
.block-card__body { min-width: 0; flex: 1; }
.block-card h2 { margin-top: 0; }
@media (max-width: 640px) { .block-card { flex-direction: column; gap: 10px; } .block-card .i3d--lg { width: 56px; height: 56px; } }
.promo > div > div p { margin: 0 0 14px; opacity: .9; }

/* ---------- Шапка: меню прижато вправо к иконкам ---------- */
.nav { justify-content: flex-end; }
@media (min-width: 1280px) { .head__actions { margin-left: 0; padding-left: 14px; border-left: 1px solid var(--line); } }
.mark { margin-right: auto; }
/* Карточка, оставшаяся одна в последнем ряду, растягивается на всю ширину */
.info-sections:not(:has(> .card--wide)) > .card:last-child:nth-child(odd):not(:first-child) { grid-column: 1 / -1; }
.info-sections:has(> .card--wide:first-child) > .card:last-child:nth-child(even) { grid-column: 1 / -1; }

/* Редакция: модерация каналов */
.mod-list li { display: grid; gap: 10px; padding: 12px 0; }
.mod-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 8px; align-items: center; }
.mod-form select { min-width: 0; width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; font-size: .85rem; }
@media (max-width: 760px) { .mod-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mod-form .btn { grid-column: 1 / -1; width: 100%; } }

/* Эффект рекламы: форма в две колонки, на телефоне — в одну */
.ef-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; align-items: end; }
.ef-form__wide { grid-column: 1 / -1; }
.ef-form .btn { width: 100%; justify-content: center; }
@media (max-width: 560px) { .ef-form { grid-template-columns: minmax(0, 1fr); } }

/* Метки и отзывы на карточке канала */
.card.verdict--down { box-shadow: inset 4px 0 0 var(--down), var(--shadow); }
.appeal { margin-top: 12px; }
.appeal summary { cursor: pointer; color: var(--brand); font-weight: 600; }
.appeal form { margin-top: 10px; }
.reviews { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.review { padding: 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); }
.review__head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.review__stars { color: var(--warn); letter-spacing: 1px; }
.stat--brand .muted { color: rgba(255, 255, 255, .78); }

/* ---------- Сезонное оформление (app/services/theme.py) ---------- */
/* Украшение справа от логотипа: «висит» от верхнего края шапки, на раскладку не влияет. */
.mark { position: relative; }
.mark:has(.mark__decor) { padding-right: 24px; }      /* место под веточку — остальное она занимает в зазоре до меню */
.mark__decor { position: absolute; right: -22px; top: 50%; width: 46px; height: 46px; margin-top: -21px; pointer-events: none;
  filter: drop-shadow(0 4px 6px rgba(15, 23, 42, .18)); transform-origin: 40% 8%; animation: decor-sway 6s ease-in-out infinite; }
@keyframes decor-sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@media (max-width: 380px) { .mark:has(.mark__decor) { padding-right: 20px; } .mark__decor { width: 38px; height: 38px; margin-top: -17px; right: -16px; } }

/* Снег на первом экране: два слоя хлопьев разного размера и скорости; поверх фото, под текстом. */
.hero__snow, .hero__snow::after { position: absolute; inset: 0; pointer-events: none; }
.hero__snow { z-index: -1;
  background-image:
    radial-gradient(circle at 20px 30px, rgba(255, 255, 255, .95) 1.4px, transparent 2.4px),
    radial-gradient(circle at 130px 85px, rgba(255, 255, 255, .8) 1px, transparent 2px),
    radial-gradient(circle at 205px 165px, rgba(255, 255, 255, .9) 1.8px, transparent 2.8px),
    radial-gradient(circle at 75px 205px, rgba(255, 255, 255, .75) 1px, transparent 2px),
    radial-gradient(circle at 175px 20px, rgba(255, 255, 255, .85) 1.3px, transparent 2.3px),
    radial-gradient(circle at 105px 140px, rgba(255, 255, 255, .7) .9px, transparent 1.9px);
  background-size: 240px 240px; animation: hero-snow 18s linear infinite; }
.hero__snow::after { content: "";
  background-image:
    radial-gradient(circle at 60px 50px, rgba(255, 255, 255, .85) 2.6px, transparent 3.8px),
    radial-gradient(circle at 250px 210px, rgba(255, 255, 255, .7) 2.2px, transparent 3.4px),
    radial-gradient(circle at 170px 320px, rgba(255, 255, 255, .8) 3px, transparent 4.2px);
  background-size: 360px 360px; filter: blur(.5px); animation: hero-snow-near 26s linear infinite; }
@keyframes hero-snow { from { background-position: 0 0; } to { background-position: 60px 240px; } }
@keyframes hero-snow-near { from { background-position: 0 0; } to { background-position: -45px 360px; } }
@media (prefers-reduced-motion: reduce) { .mark__decor, .hero__snow, .hero__snow::after { animation: none; } }

/* Редакция: оформление главной */
.theme-now { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 18px; align-items: center; }
.theme-now img, .theme-tile img:first-child { width: 100%; height: auto; border-radius: var(--r-sm); display: block; }
.theme-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 14px; }
.theme-tile { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); }
.theme-tile__t { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.theme-tile__t .badge img { margin-right: 4px; }
.theme-tile .btn { width: 100%; justify-content: center; }
@media (max-width: 640px) { .theme-now { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .tbl--dates { table-layout: auto; font-size: .82rem; } .tbl--dates th:first-child { width: auto; padding: 9px 6px; } .tbl--dates td, .tbl--dates th { padding-left: 6px; padding-right: 6px; white-space: normal; overflow-wrap: anywhere; } }

/* ---------- Телефон: правки по проверке вёрстки 09.10.2026 ---------- */
/* Длинные слова в заголовках («конфиденциальности», «Быстрорастущие») не вылезают из карточки — переносятся по слогам */
h1, h2, .dossier__user { overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
@media (max-width: 420px) { .page-head h1 { font-size: 1.7rem; } }
/* Заголовочный блок (просьба владельца 14.10.2026): подзаголовок ровно во всю ширину блока — по ширине с переносами;
   H1 — без переносов по слогам («кана-лов»): слова целиком, длинное слово рвётся только если не влезает совсем */
.page-head .lead { max-width: none; text-align: justify; -webkit-hyphens: auto; hyphens: auto; }
.page-head h1 { -webkit-hyphens: manual; hyphens: manual; }
@media (max-width: 640px) {
  /* Переключатели периода и сортировки: равные доли, зона нажатия не меньше 40 px, длинная подпись — в две строки */
  .seg [role="tab"], .seg a { display: flex; align-items: center; justify-content: center; min-height: 40px; white-space: normal; line-height: 1.15; }
  /* Названия регионов и тем в списках со столбиками — в две строки, а не многоточием */
  .hbars li { grid-template-columns: minmax(0, 46%) minmax(0, 1fr) auto; }
  .hbars a, .hbars span { white-space: normal; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .hbars a { padding: 6px 0; }
}
/* Узкие телефоны (320–360 px): длинные слова в плашках-ссылках и счётчиках первого экрана не вылезают */
@media (max-width: 640px) { ul.chips--grid a, .hbars a { overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; } }
@media (max-width: 360px) { .counter b { font-size: 1.15rem; } }
/* Таблица каналов на узком телефоне: названию — больше места и две строки вместо «Cent…» */
@media (max-width: 400px) {
  .tbl th:first-child, .tbl td.pos { width: 22px; padding-left: 0; padding-right: 2px; }
  .tbl th.r, .tbl td.r { width: 78px; padding-right: 6px; font-size: .86rem; }
  .tbl td.who-cell, .tbl th.who-cell { padding-left: 6px; padding-right: 6px; }
  .tbl .who { gap: 8px; }
  .tbl .who .ava { width: 30px; height: 30px; }
  .tbl .who__text a { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; line-height: 1.25; }
}
@media (max-width: 400px) { .tbl th.r { font-size: .6rem; letter-spacing: 0; padding-left: 0; } }
/* Названия регионов и тем — целиком, без переносов по слогам и многоточия; строка не ниже 40 px для пальца */
@media (max-width: 640px) {
  .hbars a, .hbars span { display: block; -webkit-line-clamp: unset; overflow: visible; -webkit-hyphens: manual; hyphens: manual; overflow-wrap: normal; padding: 0; }
  .hbars li { min-height: 40px; }
}

/* ---------- Форма обратной связи (/kontakty/) ---------- */
.contact__form label { display: block; }
.contact__form label > b { display: block; font-weight: 600; margin-top: 4px; }
.contact__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.contact__form textarea.field { resize: vertical; min-height: 140px; }
.contact__captcha { margin: 4px 0 14px; min-height: 102px; max-width: 100%; }
/* SmartCaptcha не уже 300 px: на экранах 320 px уменьшаем целиком, ширину компенсируем (аудит 16.10.2026) */
@media (max-width: 360px) { .contact__captcha { transform: scale(.84); transform-origin: 0 0; width: 119%; min-height: 88px; } }
.contact__consent { display: flex !important; gap: 10px; align-items: flex-start; margin: 0 0 18px; color: var(--ink-2); font-size: .92rem; }
.contact__consent { min-height: 36px; cursor: pointer; }
.contact__consent input { width: 22px; height: 22px; flex: none; margin-top: 1px; accent-color: var(--brand); cursor: pointer; }
.notice--err { background: var(--down-l); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 640px) { .contact__row { grid-template-columns: minmax(0, 1fr); } .contact__submit { width: 100%; justify-content: center; } }

/* ---------- Телефон: нижняя панель прячется при прокрутке вверх (см. app.js) ---------- */
.tabbar { transition: transform .25s ease; }
.tabbar--hidden { transform: translateY(110%); }

/* ---------- Телефон: первый экран главной ---------- */
@media (max-width: 760px) {
  .hero.hero--m, .hero.hero--nom { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; background: var(--surface); }
  .hero.hero--m::before, .hero.hero--nom::before { display: none; }
  .hero--m .hero__in, .hero--nom .hero__in { display: contents; }
  .hero--m .hero__bg, .hero--nom .hero__bg { position: relative; inset: auto; height: auto; grid-area: 1 / 1; transform: none !important; z-index: 0; }
  .hero--m .hero__bg img, .hero--nom .hero__bg img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .hero__rest { padding: 18px 18px 22px; }
  /* С вертикальным кадром: заголовок — поверх спокойной верхней части фото, героиня ниже и открыта */
  .hero--m .hero__bg { aspect-ratio: 3 / 4; max-height: 640px; }
  .hero--m .hero__bg img { object-position: 50% 100%; }
  .hero--m .hero__head { grid-area: 1 / 1; z-index: 1; align-self: start; padding: 18px 18px 56px;
    background: linear-gradient(180deg, rgba(243, 245, 255, .9) 0%, rgba(243, 245, 255, .62) 58%, rgba(243, 245, 255, 0) 100%); }
  .hero--m .hero__title { margin-bottom: 0; }
  /* Без вертикального кадра: фото отдельно, весь текст — под ним, ничего не наезжает */
  .hero--nom .hero__bg { aspect-ratio: 4 / 3; }
  .hero--nom .hero__bg img { object-position: 74% 30%; }
  .hero--nom .hero__head { padding: 18px 18px 0; }
  .hero--nom .hero__rest { padding-top: 6px; }
  :root[data-theme="dark"] .hero--m .hero__head { background: linear-gradient(180deg, rgba(15, 20, 25, .88) 0%, rgba(15, 20, 25, .6) 58%, rgba(15, 20, 25, 0) 100%); }
}
@media (max-width: 760px) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero--m .hero__head { background: linear-gradient(180deg, rgba(15, 20, 25, .88) 0%, rgba(15, 20, 25, .6) 58%, rgba(15, 20, 25, 0) 100%); }
}

/* ---------- Названия каналов и подписи — целиком, без «…» (просьба владельца 09.10: это главная информация) ---------- */
.rank__name, .rank__meta, .rank--plain .rank__meta, .tile__name, .tile__meta, .who__text a, .tbl .who__text a,
.icon-grid .name, .legend span, .tbl .rank__meta {
  display: block; white-space: normal; overflow: visible; text-overflow: clip; -webkit-line-clamp: unset; overflow-wrap: anywhere; line-height: 1.3;
}
.tbl .who__text a { font-weight: 650; }
.tbl .rank__meta { margin-top: 2px; }

/* ---------- Телефон: заголовок и иконка — в строку, текст и кнопки — под ними во всю ширину (просьба владельца 09.10) ---------- */
.dossier__main { min-width: 0; }
@media (max-width: 640px) {
  /* Заголовок страницы: H1 слева, 3D-иконка справа, подзаголовок — во всю ширину карточки */
  .page-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title icon" "lead lead"; align-items: center; gap: 12px 14px; min-height: 0; }
  .page-head__text { display: contents; }
  .page-head h1 { grid-area: title; margin: 0; }
  .page-head .lead { grid-area: lead; margin: 0; }
  .page-head > .i3d { grid-area: icon; width: 60px; height: 60px; align-self: center; }
  /* Шапка карточки с иконкой: заголовок + иконка в строку, пояснение — ниже во всю ширину */
  .card__head--icon { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 12px; }
  .card__head--icon > div { display: contents; }
  .card__head--icon > div > h2, .card__head--icon > div > h3 { grid-column: 1; grid-row: 1; margin: 0; }
  .card__head--icon > div > .card__sub { grid-column: 1 / -1; grid-row: 2; margin: 0; }
  .card__head--icon > .i3d { grid-column: 2; grid-row: 1; width: 52px; height: 52px; }
  /* Информационные блоки: иконка + заголовок в строку, текст и ссылки — во всю ширину */
  .block-card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px 14px; }
  .block-card__body { display: contents; }
  .block-card > .i3d { grid-column: 1; grid-row: 1; width: 52px; height: 52px; }
  .block-card__body > h2 { grid-column: 2; grid-row: 1; margin: 0; }
  .block-card__body > :not(h2) { grid-column: 1 / -1; }
  .block-card__body > .prose { margin: 0; }
  /* Шапка канала: аватар + название в строку, под ними @имя, метки и кнопки во всю ширину */
  .dossier { grid-template-columns: 64px minmax(0, 1fr); grid-template-areas: "rank rank" "ava name" "user user" "counts counts" "desc desc" "tags tags" "actions actions" "more more"; gap: 8px 14px; align-items: center; }
  .dossier__rank { grid-area: rank; }
  .dossier__counts { grid-area: counts; margin: 0; }
  .dossier__desc { grid-area: desc; margin: 0; }
  .dossier__more { grid-area: more; margin: 0; }
  .dossier__main { display: contents; }
  .dossier__ava { grid-area: ava; width: 64px; height: 64px; }
  .dossier h1 { grid-area: name; margin: 0; font-size: 1.45rem; line-height: 1.2; }
  .dossier__user { grid-area: user; }
  .dossier__tags { grid-area: tags; margin: 0; }
  .dossier__actions { grid-area: actions; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 4px; }
  .dossier__actions .btn { width: 100%; justify-content: center; }
}

/* ---------- Меню-бургер: длинная панель прокручивается внутри, кнопка «Добавить канал» всегда достижима ---------- */
.mnav__panel { max-height: calc(100vh - 96px); max-height: calc(100dvh - 96px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
@media (max-width: 1000px) { .mnav__panel { max-height: calc(100vh - 170px); max-height: calc(100dvh - 170px); } }   /* над нижней панелью */
@media (max-width: 640px) {
  /* Разделы справочника и карточки инструментов: иконка + заголовок в строку, список и текст — во всю ширину */
  .hub-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; align-items: center; }
  .hub-card > div { display: contents; }
  .hub-card > .i3d { grid-column: 1; grid-row: 1; width: 52px; height: 52px; }
  .hub-card > div > h2, .hub-card > div > h3 { grid-column: 2; grid-row: 1; margin: 0; }
  .hub-card > div > :not(h2):not(h3) { grid-column: 1 / -1; }
  .hub-card > div > ul { margin-top: 6px; }
  .tool-card > .i3d { grid-row: 1 / span 2; }
  .tool-card > div > .badge { grid-column: 2; grid-row: 1; justify-self: start; align-self: end; }
  .tool-card > div > h2 { grid-row: 2; align-self: start; }
}
/* Узкий телефон: в списках со столбиками название и число — строкой, столбик — под ними во всю ширину */
@media (max-width: 400px) {
  .hbars li { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name num" "bar bar"; gap: 4px 10px; min-height: 0; }
  .hbars li > a, .hbars li > span { grid-area: name; text-overflow: clip; }
  .hbars li > .bar { grid-area: bar; }
  .hbars li > b { grid-area: num; }
}

/* ---------- Телефон: таблица каналов (просьба владельца 09.10, п. «б») ----------
   Название — во всю ширину до правого края; под ним число подписчиков, ниже — @имя и тема. Колонка «Подписчики» не отнимает места. */
.subs-word { display: none; }
@media (max-width: 640px) {
  .tbl--ch thead { display: none; }
  .tbl--ch, .tbl--ch tbody { display: block; }
  .tbl--ch tbody tr { display: grid; grid-template-columns: 22px 40px minmax(0, 1fr); grid-template-areas: "pos ava name" "pos ava subs" "pos ava meta";
    column-gap: 10px; row-gap: 2px; align-items: start; padding: 11px 4px; border-bottom: 1px solid var(--line-2); }
  .tbl--ch tbody tr:nth-child(even) { background: var(--surface-2); }
  .tbl--ch td { border: 0; padding: 0; background: none !important; }
  .tbl--ch td.who-cell, .tbl--ch .who, .tbl--ch .who__text { display: contents; }
  .tbl--ch td.pos { grid-area: pos; width: auto; padding-top: 10px; text-align: right; }
  .tbl--ch .who .ava { grid-area: ava; width: 40px; height: 40px; }
  .tbl--ch .who__text a { grid-area: name; font-size: 1rem; line-height: 1.3; }
  .tbl--ch .rank__meta { grid-area: meta; margin: 0; }
  .tbl--ch td.r:not(.hide-sm) { grid-area: subs; width: auto; text-align: left; padding: 0; font-size: .92rem; color: var(--brand); }
  .tbl--ch td.r .subs-word { display: inline; font-weight: 500; }
  .tbl--ch td.r .subs-extra { display: inline; font-weight: 500; color: var(--ink-2); }
}
/* Телефон: каждый канал — карточка (решение владельца 14.10.2026, «как у Telemetr, но лучше»): значки и @адрес под названием,
   плашки темы и региона, под чертой 4 цифры с подписями — подписчики, рост за неделю (▲▼ и %), охват поста, реакций на пост.
   Вся карточка нажимается; плашки — отдельные ссылки поверх. */
.mcard { display: none; }
/* Звёздочка «Следить» в списках каналов (14.10.2026) */
.tbl--ch tbody tr { scroll-margin-top: 96px; }
.star-cell { width: 1%; text-align: center; padding-left: 4px !important; padding-right: 4px !important; }
.star { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink-3); cursor: pointer; }
.star .ico { width: 20px; height: 20px; }
.star:hover { color: var(--brand); border-color: var(--brand); }
.star--on { color: #f5a524; border-color: #f5c56b; background: #fff8e6; }
.star--on .ico { fill: currentColor; }
:root[data-theme="dark"] .star--on { background: rgba(245, 165, 36, .14); }
@media (max-width: 640px) {
  .tbl--ch tbody tr.mrow { grid-template-areas: "pos ava name" "pos ava meta" "card card card"; position: relative; background: var(--surface);
    border: 1px solid var(--line-2); border-radius: 14px; box-shadow: var(--shadow); padding: 14px 14px 12px; margin-bottom: 12px; }
  .tbl--ch tbody tr.mrow:nth-child(even) { background: var(--surface); }
  .tbl--ch tr.mrow td.r:not(.hide-sm) { display: none; }
  .tbl--ch tr.mrow td.pos { padding-top: 11px; }
  .tbl--ch tr.mrow .who__text a::after { content: ""; position: absolute; inset: 0; border-radius: 14px; }
  .tbl--ch tr.mrow .rank__meta { white-space: normal; }
  .tbl--ch tr.mrow .ml-extra { display: none; }   /* тема и регион — плашками ниже */
  .tbl--ch .mcard { display: block; grid-area: card; }
  .tbl--ch tr.mrow td.star-cell { position: absolute; top: 10px; right: 10px; z-index: 2; width: auto; padding: 0 !important; }
  .tbl--ch tr.mrow .who__text a { padding-right: 44px; }
  .mtags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
  .mtag { position: relative; z-index: 1; display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 999px;
    background: var(--line-2); color: var(--ink-2); font-size: .82rem; font-weight: 600; text-decoration: none !important; }
  .mtag--reg { background: var(--brand-l); color: var(--brand); }
  .mstats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 8px; margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }
  .mstats > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; min-width: 0; }
  .mstats dd { margin: 0; font-weight: 800; font-size: 1rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink); }
  .mstats dd small { display: block; margin-left: 0; font-size: .75rem; font-weight: 600; color: var(--ink-3); letter-spacing: 0; }
  .mstats dt { font-size: .75rem; line-height: 1.2; color: var(--ink-3); margin-top: 3px; }
  .mup { color: var(--ok); } .mdown { color: var(--down); } .mnone { color: var(--ink-3); font-weight: 600; }
}
@media (max-width: 399px) { .mstats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mstats dd small { display: inline; margin-left: 5px; } }

/* ---------- Вход и личный кабинет ---------- */
.head__login { padding: 9px 14px; }
.head__login .ico { width: 18px; height: 18px; }
.head__login[aria-current="page"] { border-color: var(--brand); color: var(--brand); }
@media (max-width: 640px) { .head__login { padding: 0; width: 42px; height: 42px; justify-content: center; border-radius: 12px; } .head__login span { display: none; } }
.mnav__login .ico { width: 28px; height: 28px; padding: 4px; color: var(--brand); }
.btn--ok { background: var(--ok-l); color: var(--ok, #15803d); border-color: transparent; }
.dossier__watch { display: contents; }
.login__card h2 { margin-top: 0; }
.login__btn { width: 100%; justify-content: center; }
.login__seal { width: 26px; height: 26px; border-radius: 8px; font-size: .9rem; box-shadow: none; background: #fff; color: var(--brand); }
.btn--line .login__seal { background: var(--grad-brand); color: #fff; }
.login__code { font-family: var(--f-mono, monospace); letter-spacing: .04em; color: var(--brand); word-break: break-all; }
.login__qr-img svg { display: block; width: 100%; max-width: 220px; height: auto; margin: 6px auto 0; border-radius: 12px; }
@media (max-width: 640px) { .login__qr { display: none; } }   /* на телефоне QR не нужен — кнопка открывает MAX */
/* Узкий телефон: «Поиск» есть в нижней панели — в шапке его значок не нужен, иначе с кнопкой входа (и веточкой в Новый год) тесно */
@media (max-width: 400px) { .head__search { display: none; } }
.admin-login { max-width: 560px; }
.admin-login h2 { margin-top: 0; }
.admin-login__code { font: 700 1.6rem/1.2 var(--f); letter-spacing: .35em; text-align: center; }
.login__steps { margin: 14px 0 0; padding-left: 1.2em; color: var(--ink-2); }
.login__steps li { margin: 4px 0; }
.login__wait .notice { margin-bottom: 12px; }

/* ---------- Редакция: проверка статьи с телефона ---------- */
.review-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: rq; }
.review-item { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); counter-increment: rq; }
.review-item--ok { box-shadow: inset 4px 0 0 var(--ok, #15803d); }
.review-item--wrong { box-shadow: inset 4px 0 0 var(--down, #dc2626); }
.review-item__ctx { margin: 0 0 8px; }
.review-item__q { margin: 0 0 10px; font-weight: 650; }
.review-item__q::before { content: counter(rq) ". "; color: var(--brand); }
.review-choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.review-choice__opt { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); font-weight: 600; cursor: pointer; }
.review-choice__opt:has(input:checked) { border-color: var(--brand); background: var(--brand-l); color: var(--brand); }
.review-choice__opt input { width: 18px; height: 18px; accent-color: var(--brand); }
.review-form__save { width: 100%; justify-content: center; margin-top: 14px; }
.review-upload { display: grid; gap: 0; }
.review-upload .btn { width: 100%; justify-content: center; }
.shots-grid { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 12px; }
.shots-grid li { display: grid; gap: 8px; }
.shots-grid img { width: 100%; height: 220px; object-fit: cover; object-position: top; border-radius: var(--r-sm); border: 1px solid var(--line); display: block; }
.shots-grid .btn { width: 100%; justify-content: center; font-size: .85rem; padding: 8px 10px; }
@media (max-width: 400px) { .review-choice { grid-template-columns: minmax(0, 1fr); } .shots-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .shots-grid img { height: 180px; } }

/* ---------- Бот для авторов: подключение канала и охваты постов ---------- */
.connect-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: cs; }
.connect-step { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); counter-increment: cs; }
.connect-step::before { content: counter(cs); width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: var(--brand-l); color: var(--brand); font-weight: 800; align-self: start; }
.connect-step--done::before { content: "✓"; background: var(--ok-l); color: var(--ok); }
.connect-step__text { display: grid; gap: 4px; min-width: 0; }
.connect-step__text .badge { justify-self: start; margin-top: 4px; white-space: normal; max-width: 100%; }
.connect-step form { margin: 0; }
@media (max-width: 640px) {
  .connect-step { grid-template-columns: 36px minmax(0, 1fr); }
  .connect-step > .btn, .connect-step > form { grid-column: 1 / -1; }
  .connect-step > form .btn { width: 100%; }
}
.forecast { padding: 16px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); }
.forecast .field { max-width: 320px; }
.forecast__out { margin: 0; }
@media (max-width: 640px) { .forecast .field { max-width: none; } }
.posts-list li { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; }
.posts-list__text { overflow-wrap: anywhere; }
.posts-list__views { display: inline-flex; gap: 4px; align-items: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
.posts-list__views .ico { width: 15px; height: 15px; color: var(--ink-3); }
.posts-list__react { display: inline-flex; gap: 3px; align-items: center; margin-left: 8px; color: var(--ink-2); font-weight: 600; }
@media (max-width: 640px) { .posts-list li { grid-template-columns: minmax(0, 1fr) auto; } .posts-list time { grid-column: 1 / -1; } }
.mine-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; }
@media (max-width: 640px) { .mine-list li { grid-template-columns: minmax(0, 1fr); } .mine-list .btn { width: 100%; } }
.events-list li { display: grid; gap: 2px; padding-left: 12px; box-shadow: inset 3px 0 0 var(--line); }
.events-list__item--up { box-shadow: inset 3px 0 0 var(--ok) !important; }
.events-list__item--down, .events-list__item--label { box-shadow: inset 3px 0 0 var(--down) !important; }
.events-list__item--renamed { box-shadow: inset 3px 0 0 var(--warn, #f59e0b) !important; }
/* Рост и падение цифр: зелёный и красный (карточка канала, страница «Сборщик») */
.stat__v.up { color: var(--ok); }
.stat__v.down, .tbl td.down, b.down, span.down { color: var(--down); }
.posts-list li { padding: 2px 0; }
.posts-list__text a { display: inline-block; padding: 9px 0; }   /* зона нажатия не ниже 36 px на телефоне */
.posts-list time { padding-top: 9px; }
.users-list li { display: grid; gap: 4px; }
.users-list b { overflow-wrap: anywhere; }

/* ---------- Телефон: зоны нажатия не ниже 36 px и шрифт не мельче 12 px (mobile_check, 10.10.2026) ---------- */
@media (max-width: 640px) {
  .foot li { margin: 0; }
  .foot li a { display: inline-block; padding: 9px 0; }
  .card__more { display: inline-flex; align-items: center; min-height: 36px; }
  a.badge { min-height: 36px; padding: 6px 12px; }
}

/* ---------- Словарь ---------- */
.gl-tools .field { margin-top: 0; }
.gl-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.gl-tag { font: 600 .9rem/1 var(--f); padding: 10px 14px; min-height: 40px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; }
.gl-tag[aria-pressed="true"] { background: var(--brand-l); color: var(--brand); border-color: var(--brand); }
.gl-letters { display: flex; flex-wrap: wrap; gap: 6px; }
.gl-letters a { display: grid; place-items: center; min-width: 38px; height: 38px; padding: 0 8px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink); font-weight: 700; text-decoration: none; }
.gl-letters a:hover { border-color: var(--brand); color: var(--brand); }
.gl-letter { font-size: 1.6rem; margin: 0 0 6px; color: var(--brand); }
.gl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.gl-list li { padding: 6px 0; border-bottom: 1px solid var(--line-2); }
.gl-list li:last-child { border-bottom: 0; }
.gl-list__term { font-weight: 700; font-size: 1.05rem; display: inline-block; padding: 6px 0; min-height: 36px; }  /* зона нажатия пальцем ≥ 36 px */
.gl-list p { margin: 4px 0 0; color: var(--ink-2); }
.gl-group { scroll-margin-top: 90px; }
.gl-actions { display: grid; gap: 12px; justify-items: start; }
@media (max-width: 640px) { .gl-tags { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .gl-tag { width: 100%; } .gl-actions .btn { width: 100%; } }

/* ---------- Категории ботов ---------- */
.bot-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.bot-cat { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); font-weight: 600; font-size: .92rem; text-decoration: none !important; }
.bot-cat span { color: var(--ink-3); font-weight: 600; font-variant-numeric: tabular-nums; }
.bot-cat:hover { border-color: var(--brand); }
.bot-cat--on { background: var(--brand-l); color: var(--brand); border-color: var(--brand); }
@media (max-width: 640px) { .bot-cats { display: grid; grid-template-columns: minmax(0, 1fr); } .bot-cat { justify-content: space-between; } }

/* ---------- Тарифы, отчёт, сравнение ---------- */
.tariff { display: grid; gap: 10px; align-content: start; }
.tariff h2 { margin: 0; }
.pay-consent { margin: 8px 0 0; line-height: 1.45; }
.tariff .pay-consent { margin: 0; }
.tariff--main { box-shadow: inset 0 0 0 2px var(--brand), var(--shadow); }
.tariff__price { margin: 0; font-size: 1.8rem; font-weight: 800; letter-spacing: -.02em; }
.tariff__price span { font-size: .95rem; font-weight: 600; color: var(--ink-3); }
.tariff__list { margin: 0; padding-left: 1.1em; color: var(--ink-2); display: grid; gap: 6px; }
.tariff .btn, .tariff form { width: 100%; justify-content: center; }
.tariff form .btn { width: 100%; }
.report-buy { display: flex; flex-wrap: wrap; gap: 10px; }
.cmp th, .cmp td { white-space: normal; }
.cmp td:first-child { color: var(--ink-2); }
@media (max-width: 640px) { .report-buy, .report-buy form { width: 100%; } .report-buy .btn { width: 100%; } }
@media print { .head, .pulse, .tabbar, .foot, .crumbs, .cookie, .btn { display: none !important; } .card { box-shadow: none !important; border: 1px solid #ddd; } }

/* Отвязка карты в кабинете: подтверждение раскрывается по нажатию, без JavaScript */
.unbind { flex-basis: 100%; }
.unbind > summary { list-style: none; cursor: pointer; display: inline-flex; }
.unbind > summary::-webkit-details-marker { display: none; }
.unbind__close, .unbind[open] .unbind__open { display: none; }
.unbind[open] .unbind__close { display: inline; }
.unbind__box { margin-top: 8px; padding: 14px 16px; border-radius: 14px; background: var(--down-l); }
.unbind__box p { margin: 0 0 10px; }
.unbind__yes { background: var(--down); border-color: var(--down); color: #fff; }
.unbind__yes:hover, .unbind__yes:focus-visible { background: #dc2626; border-color: #dc2626; color: #fff; }
@media (max-width: 640px) { .unbind > summary, .unbind__yes { width: 100%; justify-content: center; } }
.nearby a { justify-content: space-between; }
.mail-step { display: grid; gap: 12px; }
.mail-step .btn--main { justify-self: start; }
@media (max-width: 640px) { .mail-step .btn--main { justify-self: stretch; justify-content: center; } }
/* Памятка «Что входит и как пользоваться» (кабинет, «Оплата прошла») */
.guide { margin: 0; padding-left: 22px; display: grid; gap: 12px; }
.guide__btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.guide__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.guide__row .guide__btns { margin-top: 0; }
@media (max-width: 640px) { .guide__btns { display: grid; grid-template-columns: minmax(0, 1fr); } .guide__btns .btn { justify-content: center; } }
/* Телефон, 13.10.2026: зоны нажатия ≥ 36 px, длинные плашки переносятся, вкладки главной ровной сеткой */
@media (max-width: 640px) {
  .hub-card li a, .hub-card h2 a, .hub-card h3 a { display: inline-block; padding: 8px 0; }
  .hub-card li { margin: 0; }
  .tabs[role="tablist"] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tabs[role="tablist"] [role="tab"] { justify-content: center; }
  .tabs[role="tablist"] > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 360px) { .tabs[role="tablist"] [role="tab"] { padding: 8px 4px; gap: 4px; font-size: .88rem; } .tabs[role="tablist"] [role="tab"] .ico { width: 16px; height: 16px; } .tabs[role="tablist"] [role="tab"] .count { padding: 1px 5px; } }
@media (max-width: 400px) { .badge { white-space: normal; line-height: 1.25; max-width: 100%; } }
/* Проверка перед покупкой рекламы: список проверок со значками */
.checks { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 8px; }
.checks li { padding-left: 2px; }
.checks__ok b { color: var(--ok, #16a34a); } .checks__warn b { color: #b45309; } .checks__bad b { color: var(--down); } .checks__none b { color: var(--ink-2); }
@media print { .forecast input, .verdict__note .btn { display: none !important; } body { background: #fff; } }
/* «В подборку» на карточке канала */
.tolist > summary { list-style: none; cursor: pointer; }
.tolist > summary::-webkit-details-marker { display: none; }
.tolist__box { display: grid; gap: 10px; margin-top: 10px; padding: 14px 16px; border-radius: 14px; background: var(--surface-2); min-width: min(320px, 100%); }
.tolist[open] { flex-basis: 100%; }
.filters { display: grid; gap: 10px; margin-bottom: 16px; }
.filters .chips a.chip--on { color: var(--brand); box-shadow: 0 0 0 1.5px var(--brand); }
.filters__rost { justify-self: start; }
@media (max-width: 640px) { .filters__rost { justify-self: stretch; justify-content: center; } }
@media (max-width: 640px) { .toc-list li, .side-list li { margin: 0; } .toc-list a, .side-list a { display: inline-block; padding: 9px 0; } }
.tariff__year { display: block; margin-top: 4px; font-size: .9rem; font-weight: 600; color: var(--brand); letter-spacing: 0; }
/* Главная: «Статистика и аналитика каналов MAX» */
.feature { display: grid; gap: 8px; align-content: start; }
.feature > .ico { width: 28px; height: 28px; color: var(--brand); }
.feature h3 { margin: 0; font-size: 1.05rem; }
.feature p { margin: 0; color: var(--ink-2); font-size: .93rem; }
.feature > a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; min-height: 36px; }
@media (max-width: 640px) { .hero .badge { white-space: normal; line-height: 1.25; max-width: 100%; } }
/* Шапка 1280–1499 px (замечание владельца 13.10.2026: «О проекте» переносился на две строки): пункты меню — в одну строку,
   у кнопки входа на этих ширинах текст «Войти»/«Кабинет» без значка (просьба владельца), меню плотнее, значки меню — от 1720 px */
.nav__link { white-space: nowrap; }
@media (min-width: 1280px) and (max-width: 1499px) { .head__login .ico { display: none; } .head__login { padding: 9px 12px; } .head__in { gap: 10px; } .head__actions { gap: 6px; } }
/* 22.10.2026: у вошедшего в шапке ещё колокольчик — на 1280–1439 px «Кабинет» показываем значком, «О проекте» уходит в меню и подвал */
@media (min-width: 1280px) and (max-width: 1439px) {
  .head__login .ico { display: block; } .head__login span { display: none; } .head__login { padding: 9px 10px; }
  .nav__item--extra { display: none; }
}
/* overflow у .nav нельзя: выпадающие списки «Справка» и «Каналы» позиционируются внутри него (22.10.2026) */
@media (min-width: 1280px) and (max-width: 1359px) { .nav__link { padding: 9px 6px; } }
@media (min-width: 1280px) and (max-width: 1339px) { .nav__link { padding: 9px 5px; font-size: .87rem; } }
/* Призыв войти */
.login-cta { display: grid; gap: 12px; background: linear-gradient(135deg, var(--brand-l), var(--surface)); box-shadow: inset 0 0 0 1.5px var(--brand), var(--shadow); }
.login-cta__head { display: grid; gap: 8px; justify-items: start; }
.login-cta h2 { margin: 0; }
.login-cta__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.login-cta__list li { display: flex; gap: 8px; align-items: flex-start; }
.login-cta__list .ico { color: var(--brand); flex: none; margin-top: 3px; }
.login-cta__actions { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
@media (max-width: 640px) { .login-cta__actions .btn { width: 100%; justify-content: center; } }
/* Панель фильтров каталога */
.fpanel { margin-bottom: 16px; }
.fpanel > summary { list-style: none; cursor: pointer; display: inline-flex; }
.fpanel > summary::-webkit-details-marker { display: none; }
.fpanel__form { display: grid; gap: 14px; margin-top: 12px; padding: 16px; border-radius: 16px; background: var(--surface-2); }
.fpanel__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 10px; }
.fpanel__set { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.fpanel__set legend { margin-bottom: 8px; }
.fpanel__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fchip input, .fcheck input { position: absolute; opacity: 0; pointer-events: none; }
.fchip span { display: inline-flex; align-items: center; min-height: 38px; padding: 6px 13px; border-radius: 999px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); cursor: pointer; font-size: .9rem; font-weight: 500; }
.fchip input:checked + span { color: var(--brand); box-shadow: 0 0 0 1.5px var(--brand); background: var(--brand-l); }
.fchip input:focus-visible + span, .fcheck input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.fpanel__checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 8px; }
.fcheck span { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 8px 12px; border-radius: 12px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); cursor: pointer; font-size: .93rem; }
.fcheck span::before { content: ""; width: 18px; height: 18px; border-radius: 5px; box-shadow: inset 0 0 0 1.5px var(--ink-3); flex: none; }
.fcheck input:checked + span { box-shadow: 0 0 0 1.5px var(--brand); background: var(--brand-l); }
.fcheck input:checked + span::before { background: var(--brand); box-shadow: none; }
.fpanel__actions { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 640px) { .fpanel__actions .btn, .fpanel > summary { width: 100%; justify-content: center; } .fpanel__chips .fchip { flex: 1 1 calc(50% - 8px); } .fchip span { width: 100%; justify-content: center; } }
/* Врезка в статье: «Сообщать о сбоях» */
.callout { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: 16px; background: var(--brand-l); box-shadow: inset 0 0 0 1.5px var(--brand); }
.callout > .ico { color: var(--brand); flex: none; width: 24px; height: 24px; margin-top: 2px; }
@media (max-width: 640px) { .callout .btn { width: 100%; justify-content: center; } }
@media (max-width: 640px) { .timeline a, .hbars li > a { display: inline-block; padding: 9px 0; } }

/* ---------- Страница канала: первый экран (14.10.2026, «лучше Telemetr») ----------
   Слева профиль (место в теме, значки, счётчики, описание), справа 4 карточки с подсказкой «?» и мини-графиком за 30 дней. */
.ch-hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 16px; align-items: stretch; }
.ch-hero--solo { grid-template-columns: minmax(0, 1fr); }
.ch-hero .dossier { position: relative; align-items: start; }
.dossier__rank { position: absolute; top: 14px; right: 16px; font-size: .78rem; font-weight: 700; color: var(--brand); background: var(--brand-l);
  border-radius: 999px; padding: 10px 12px; line-height: 1.3; box-sizing: border-box; min-height: 36px; text-decoration: none !important; max-width: 55%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dossier__counts { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: .86rem; color: var(--ink-2); }
.dossier__counts span { display: inline-flex; align-items: center; gap: 5px; }
.dossier__counts .ico { width: 15px; height: 15px; color: var(--ink-3); }
.dossier__desc { margin-top: 10px; font-size: .92rem; color: var(--ink-2); overflow-wrap: anywhere; }
.dossier__desc p { margin: 0; }
.dossier__desc summary { list-style: none; cursor: pointer; }
.dossier__desc summary::-webkit-details-marker { display: none; }
.dossier__desc .more { color: var(--brand); font-weight: 600; white-space: nowrap; }
.dossier__desc details[open] summary { display: none; }
.ch-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.kpi { position: relative; background: var(--surface); border-radius: var(--r-sm); box-shadow: var(--shadow); padding: 14px 16px 0; display: flex;
  flex-direction: column; min-height: 150px; overflow: visible; }
.kpi__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kpi__k { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 650; color: var(--ink-2); background: var(--line-2);
  border-radius: 999px; padding: 4px 10px; }
.kpi__k .ico { width: 15px; height: 15px; }
.kpi__v { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); font-weight: 800; letter-spacing: -.03em; margin-top: 10px; font-variant-numeric: tabular-nums; line-height: 1.1; }
.kpi__d { font-size: .8rem; color: var(--ink-3); margin-top: 4px; }
.kpi--up .kpi__v { color: var(--ok); } .kpi--down .kpi__v { color: var(--down); }
.kpi__spark { display: block; width: calc(100% + 32px); height: 44px; margin: auto -16px 0; }
.kpi__spark polyline { fill: none; stroke: var(--brand); stroke-width: 2; vector-effect: non-scaling-stroke; }
.kpi__spark polygon { fill: var(--brand); opacity: .09; }
.kpi--down .kpi__spark polyline { stroke: var(--down); } .kpi--down .kpi__spark polygon { fill: var(--down); }
.kpi--up .kpi__spark polyline { stroke: var(--ok); } .kpi--up .kpi__spark polygon { fill: var(--ok); }
/* Подсказка «?»: наведение или нажатие (фокус) — пояснение простыми словами */
.hint { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: none; border-radius: 50%;
  border: 1px solid var(--line); color: var(--ink-3); font: 700 .78rem/1 var(--f); cursor: help; background: var(--surface); }
.hint:hover, .hint:focus { color: var(--brand); border-color: var(--brand); outline: none; }
.hint::after { content: attr(data-tip); position: absolute; z-index: 20; top: calc(100% + 8px); right: -6px; width: min(280px, 78vw); padding: 10px 12px;
  border-radius: 12px; background: var(--ink); color: #fff; font: 500 .82rem/1.4 var(--f); text-align: left; box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transition: opacity .15s; pointer-events: none; }
.hint:hover::after, .hint:focus::after { opacity: 1; visibility: visible; }
@media (max-width: 1000px) { .ch-hero { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .dossier__rank { position: static; display: inline-block; max-width: 100%; justify-self: start; }
  .ch-kpis { gap: 10px; }
  .kpi { padding: 12px 12px 0; min-height: 0; }
  .kpi__k { font-size: .75rem; padding: 3px 8px; }
  .kpi__spark { width: calc(100% + 24px); margin: 8px -12px 0; height: 36px; }
}
@media (max-width: 380px) { .ch-kpis { grid-template-columns: minmax(0, 1fr); } }
.dossier__more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.dossier__more > .btn, .dossier__more > details > summary.btn { width: 100%; justify-content: center; font-size: .86rem; padding: 9px 10px; min-height: 40px; }
.dossier__more > details[open] { grid-column: 1 / -1; }
.dossier__more > details > summary { list-style: none; } .dossier__more > details > summary::-webkit-details-marker { display: none; }
@media (max-width: 640px) { .dossier__short { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } }
@media (max-width: 640px) { .hint::after { position: fixed; top: auto; bottom: 92px; left: 16px; right: 16px; width: auto; } }
/* Лента постов на странице канала (14.10.2026) */
.posts { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.post { border: 1px solid var(--line-2); border-radius: 14px; padding: 14px 16px; background: var(--surface); }
.post__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: .84rem; color: var(--ink-3); }
.post__nums { margin-left: auto; display: inline-flex; gap: 12px; font-weight: 650; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.post__nums span { display: inline-flex; align-items: center; gap: 4px; } .post__nums .ico { width: 15px; height: 15px; color: var(--ink-3); }
.post__text { margin: 8px 0 0; overflow-wrap: anywhere; line-height: 1.55; }
.post__more summary { list-style: none; cursor: pointer; } .post__more summary::-webkit-details-marker { display: none; }
.post__more .more { display: inline-block; margin-top: 6px; color: var(--brand); font-weight: 600; }
.post__more[open] summary { display: none; }
.post__reacts { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.post__reacts li { background: var(--line-2); border-radius: 999px; padding: 4px 10px; font-size: .84rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.post__link { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; padding: 6px 0; min-height: 36px; font-weight: 600; }   /* зона нажатия ≥ 36 px */
.posts .post__head time { font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .post__more summary .post__text { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; } }
/* Публикации и охват по дням на странице канала (14.10.2026) */
.chart .pbar { fill: var(--brand); opacity: .85; }
.chart .pbar-ad { fill: #f59e0b; }
.chart .dot { fill: var(--surface); stroke: var(--brand); stroke-width: 2; vector-effect: non-scaling-stroke; }
.chart .ln--fresh { stroke-dasharray: 5 5; }
.lg { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin: 0 4px 0 2px; vertical-align: -1px; }
.lg--post { background: var(--brand); } .lg--ad { background: #f59e0b; }
.ch-charts .chart svg { width: 100%; height: auto; display: block; }
@media (max-width: 640px) { .ch-charts .chart text { font-size: 26px; } }
/* «Где пересылали канал» (14.10.2026) */
.fwd { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fwd li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 12px; }
.fwd li > a { font-weight: 650; min-height: 24px; display: inline-flex; align-items: center; }
.fwd .ico { width: 13px; height: 13px; vertical-align: -2px; }
/* Поиск по постам (14.10.2026) */
.sposts .post__text mark { background: #fff1b8; color: inherit; border-radius: 3px; padding: 0 2px; }
:root[data-theme="dark"] .sposts .post__text mark { background: rgba(250, 204, 21, .3); }
.spost__ch { font-weight: 700; color: var(--ink); }
/* Мини-график подписчиков за 30 дней в таблице каталога (14.10.2026) */
.tspark { display: block; width: 90px; height: 22px; margin: 4px 0 0 auto; }
.tspark polyline { fill: none; stroke: var(--brand); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.tspark--up polyline { stroke: var(--ok); } .tspark--down polyline { stroke: var(--down); }
/* Подсказка после «Следить» (14.10.2026): над нижним меню на телефоне, справа внизу на компьютере */
.toast { position: fixed; z-index: 60; right: 16px; bottom: 16px; max-width: 420px; display: flex; gap: 10px; align-items: flex-start;
  background: var(--ink); color: #fff; border-radius: 14px; padding: 14px 12px 14px 16px; box-shadow: var(--shadow-lg); }
.toast p { margin: 0; font-size: .92rem; line-height: 1.45; }
.toast a { color: #c7d2fe; font-weight: 600; }
.toast .ico { width: 16px; height: 16px; vertical-align: -2px; color: #fbbf24; fill: currentColor; }
.toast__x { flex: none; width: 36px; height: 36px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, .12); color: #fff; font-size: 1.3rem; cursor: pointer; }
@media (max-width: 640px) { .toast { left: 12px; right: 12px; bottom: 84px; max-width: none; } .hbars a { padding: 8px 0; } }
/* Нижнее меню: «Мои каналы» в одну строку (14.10.2026); на совсем узких экранах — перенос */
@media (max-width: 640px) { .tabbar { padding-left: 4px; padding-right: 4px; } .tabbar a { white-space: nowrap; padding: 4px 2px; letter-spacing: -.01em; } }
@media (max-width: 340px) { .tabbar a { white-space: normal; text-align: center; line-height: 1.1; } }
/* Слова для упоминаний в кабинете (14.10.2026) */
.chip-del { display: inline-flex; align-items: center; gap: 4px; padding: 4px 4px 4px 13px; border-radius: 999px; background: var(--surface);
  box-shadow: 0 0 0 1px var(--line); font-size: .9rem; }
.chip-del button { width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--line-2); color: var(--ink-2); font-size: 1.1rem; cursor: pointer; }
.words { list-style: none; margin: 14px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
/* Подсказки на графиках (14.10.2026) */
svg[data-pts] { cursor: crosshair; touch-action: pan-y; }
.ctip { position: absolute; z-index: 70; pointer-events: none; background: var(--surface); color: var(--ink); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: var(--shadow-lg); padding: 8px 12px; white-space: nowrap; font: 500 .85rem/1.35 var(--f); }
.ctip__t { color: var(--ink-3); font-size: .78rem; }
.ctip__v { display: flex; align-items: center; gap: 7px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ctip__v::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--brand); flex: none; }
.cguide { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; pointer-events: none; }
.cdot { position: absolute; z-index: 69; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--brand);
  box-shadow: 0 0 0 3px var(--surface), 0 1px 4px rgba(15, 23, 42, .3); pointer-events: none; }
/* Просмотры через 12/24/48/72 ч (14.10.2026) */
.hours { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.hours__cell { background: var(--surface-2); border-radius: 12px; padding: 10px 12px; }
.hours__cell span { display: block; font-size: .78rem; color: var(--ink-3); }
.hours__cell b { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.hours__note { grid-column: 1 / -1; margin: 0; }
@media (max-width: 400px) { .hours { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Вид «Карточки» на компьютере (14.10.2026, переключатель «Таблица / Карточки» как у Telemetr): те же правила, что у карточек
   на телефоне, с префиксом .cards-view (собраны из блоков выше), карточки — сеткой */
@media (min-width: 641px) {
  .cards-view .tbl--ch thead { display: none; }
  .cards-view .tbl--ch, .cards-view .tbl--ch tbody { display: block; }
  .cards-view .tbl--ch tbody tr { display: grid; grid-template-columns: 22px 40px minmax(0, 1fr); grid-template-areas: "pos ava name" "pos ava subs" "pos ava meta";
    column-gap: 10px; row-gap: 2px; align-items: start; padding: 11px 4px; border-bottom: 1px solid var(--line-2); }
  .cards-view .tbl--ch tbody tr:nth-child(even) { background: var(--surface-2); }
  .cards-view .tbl--ch td { border: 0; padding: 0; background: none !important; }
  .cards-view .tbl--ch td.who-cell, .cards-view .tbl--ch .who, .cards-view .tbl--ch .who__text { display: contents; }
  .cards-view .tbl--ch td.pos { grid-area: pos; width: auto; padding-top: 10px; text-align: right; }
  .cards-view .tbl--ch .who .ava { grid-area: ava; width: 40px; height: 40px; }
  .cards-view .tbl--ch .who__text a { grid-area: name; font-size: 1rem; line-height: 1.3; }
  .cards-view .tbl--ch .rank__meta { grid-area: meta; margin: 0; }
  .cards-view .tbl--ch td.r:not(.hide-sm) { grid-area: subs; width: auto; text-align: left; padding: 0; font-size: .92rem; color: var(--brand); }
  .cards-view .tbl--ch td.r .subs-word { display: inline; font-weight: 500; }
  .cards-view .tbl--ch td.r .subs-extra { display: inline; font-weight: 500; color: var(--ink-2); }
  .cards-view .tbl--ch tbody tr.mrow { grid-template-areas: "pos ava name" "pos ava meta" "card card card"; position: relative; background: var(--surface);
    border: 1px solid var(--line-2); border-radius: 14px; box-shadow: var(--shadow); padding: 14px 14px 12px; margin-bottom: 12px; }
  .cards-view .tbl--ch tbody tr.mrow:nth-child(even) { background: var(--surface); }
  .cards-view .tbl--ch tr.mrow td.r:not(.hide-sm) { display: none; }
  .cards-view .tbl--ch tr.mrow td.pos { padding-top: 11px; }
  .cards-view .tbl--ch tr.mrow .who__text a::after { content: ""; position: absolute; inset: 0; border-radius: 14px; }
  .cards-view .tbl--ch tr.mrow .rank__meta { white-space: normal; }
  .cards-view .tbl--ch tr.mrow .ml-extra { display: none; }
  .cards-view /* тема и регион — плашками ниже */
  .tbl--ch .mcard { display: block; grid-area: card; }
  .cards-view .tbl--ch tr.mrow td.star-cell { position: absolute; top: 10px; right: 10px; z-index: 2; width: auto; padding: 0 !important; }
  .cards-view .tbl--ch tr.mrow .who__text a { padding-right: 44px; }
  .cards-view .mtags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
  .cards-view .mtag { position: relative; z-index: 1; display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 999px;
    background: var(--line-2); color: var(--ink-2); font-size: .82rem; font-weight: 600; text-decoration: none !important; }
  .cards-view .mtag--reg { background: var(--brand-l); color: var(--brand); }
  .cards-view .mstats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 8px; margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }
  .cards-view .mstats > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; min-width: 0; }
  .cards-view .mstats dd { margin: 0; font-weight: 800; font-size: 1rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink); }
  .cards-view .mstats dd small { display: block; margin-left: 0; font-size: .75rem; font-weight: 600; color: var(--ink-3); letter-spacing: 0; }
  .cards-view .mstats dt { font-size: .75rem; line-height: 1.2; color: var(--ink-3); margin-top: 3px; }
  .cards-view .mup { color: var(--ok); }
  .cards-view .mdown { color: var(--down); }
  .cards-view .mnone { color: var(--ink-3); font-weight: 600; }
  .cards-view .tbl--ch .hide-sm { display: none; }
  .cards-view .tbl--ch tbody { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
  .cards-view .tbl--ch tbody tr.mrow { margin: 0; }
}
.viewsw { display: inline-flex; gap: 4px; }
.viewsw button { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-3); cursor: pointer; }
.viewsw button[aria-pressed="true"] { color: var(--brand); border-color: var(--brand); background: var(--brand-l); }
.viewsw .ico { width: 18px; height: 18px; }
@media (max-width: 640px) { .viewsw { display: none; } }
.th-sort { color: inherit; text-decoration: none !important; white-space: nowrap; }
.th-sort:hover, .th-sort--on { color: var(--brand); }
/* Оценка канала из 10 (14.10.2026) */
.score { float: right; margin: 0 0 8px 16px; max-width: 340px; }
.score summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto auto; align-items: baseline; gap: 0 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 8px 14px; text-align: left; }
.score summary::-webkit-details-marker { display: none; }
.score__v { font-size: 1.9rem; font-weight: 800; letter-spacing: -.03em; color: var(--brand); }
.score__of { font-weight: 700; color: var(--ink-2); }
.score__k { grid-column: 1 / -1; font-size: .78rem; color: var(--ink-3); text-decoration: underline dotted; }
.score__parts { margin: 10px 0 0; padding-left: 18px; font-size: .88rem; }
.score[open] { float: none; max-width: none; margin: 0 0 12px; }
@media (max-width: 640px) { .score { float: none; margin: 0 0 12px; max-width: none; } }
.dossier__more > .dossier__wide { grid-column: 1 / -1; }
/* Профиль канала на компьютере (замечания владельца 14.10.2026): плашка «#N в теме» — строкой над заголовком, не поверх;
   аватар — только рядом с шапкой (плашка, название, @адрес, счётчики), а описание, значки и кнопки — во всю ширину карточки,
   без пустой колонки под аватаром. Кнопки — ровная сетка 2 колонки: одна высота и шрифт, у второстепенных значок и подпись слева.
   На телефоне своя раскладка (grid-areas). */
@media (min-width: 641px) {
  .ch-hero .dossier { grid-template-rows: none; row-gap: 0; align-items: start; }
  .ch-hero .dossier .dossier__main { display: contents; }
  .ch-hero .dossier .dossier__ava { grid-column: 1; grid-row: 1 / span 4; align-self: center; }
  .ch-hero .dossier .dossier__rank { position: static; grid-column: 2; grid-row: 1; justify-self: start; max-width: 100%; margin-bottom: 6px; }
  .ch-hero .dossier h1 { grid-column: 2; grid-row: 2; }
  .ch-hero .dossier .dossier__user { grid-column: 2; grid-row: 3; }
  .ch-hero .dossier .dossier__counts { grid-column: 2; grid-row: 4; }
  .ch-hero .dossier .dossier__desc, .ch-hero .dossier .dossier__tags,
  .ch-hero .dossier .dossier__actions, .ch-hero .dossier .dossier__more { grid-column: 1 / -1; }
  .ch-hero .dossier .dossier__desc { margin-top: 16px; }
  .ch-hero .dossier .dossier__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ch-hero .dossier .dossier__more { gap: 10px; margin-top: 10px; }
  .ch-hero .dossier .dossier__actions .btn, .ch-hero .dossier .dossier__more > .btn,
  .ch-hero .dossier .dossier__more > details > summary.btn { width: 100%; min-height: 46px; padding: 10px 14px; font-size: .9rem; font-weight: 650; }
  .ch-hero .dossier .dossier__actions .btn { justify-content: center; }
  .ch-hero .dossier .dossier__more > .btn, .ch-hero .dossier .dossier__more > details > summary.btn { justify-content: flex-start; gap: 10px; text-align: left; }
  .ch-hero .dossier .dossier__more .btn > .ico { width: 18px; height: 18px; flex: none; color: var(--brand); }
  /* Нечётное число кнопок перед широкой (у закрытого канала нет «Ссылки с подсчётом») — последняя тоже во всю ширину, без дыры справа */
  .ch-hero .dossier .dossier__more > :nth-child(odd):nth-last-child(2) { grid-column: 1 / -1; }
  /* Заголовок канала не рвём по слогам: «ва-кансии» читается плохо (замечание владельца 14.10 — H1 без переносов) */
  .ch-hero .dossier h1 { -webkit-hyphens: manual; hyphens: manual; }
}
/* Бот (карточка во всю ширину страницы): кнопки в 4 колонки, чтобы не растягивались на полстраницы */
@media (min-width: 1001px) {
  .ch-hero--solo .dossier .dossier__actions, .ch-hero--solo .dossier .dossier__more { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}