/* =============================================================================
   TG Inspector — стили сайта.

   Файл отдаётся статикой и кэшируется браузером, поэтому пути к шрифтам здесь
   ОТНОСИТЕЛЬНЫЕ (fonts/... рядом с этим файлом) — подстановка base_url из
   шаблона тут невозможна и не нужна: CSS всегда лежит на том же домене.
   Версия подключения задаётся в base.html через ?v=<mtime> — при правке файла
   ссылка меняется и старый кэш не всплывает.
   ========================================================================== */

/* --- Шрифты: Montserrat (заголовки, названия каналов) + Inter (текст) -------
   unicode-range режет загрузку по алфавиту: латинский срез не качается, пока
   на странице нет латиницы. font-display:swap — текст виден сразу системным
   шрифтом, без «невидимого текста» на медленной сети. */
@font-face{font-family:Montserrat;font-style:normal;font-weight:600;font-display:swap;
  src:url(fonts/montserrat-600-cyrillic.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Montserrat;font-style:normal;font-weight:600;font-display:swap;
  src:url(fonts/montserrat-600-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Montserrat;font-style:normal;font-weight:700;font-display:swap;
  src:url(fonts/montserrat-700-cyrillic.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Montserrat;font-style:normal;font-weight:700;font-display:swap;
  src:url(fonts/montserrat-700-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Montserrat;font-style:normal;font-weight:800;font-display:swap;
  src:url(fonts/montserrat-800-cyrillic.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Montserrat;font-style:normal;font-weight:800;font-display:swap;
  src:url(fonts/montserrat-800-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/inter-400-cyrillic.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/inter-400-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;
  src:url(fonts/inter-500-cyrillic.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;
  src:url(fonts/inter-500-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;
  src:url(fonts/inter-600-cyrillic.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;
  src:url(fonts/inter-600-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;
  src:url(fonts/inter-700-cyrillic.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;
  src:url(fonts/inter-700-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --brand:#1683c7;--brand-deep:#0d5a90;--brand-bright:#36a6e6;
  /* Акцент — тёплый янтарь. Используется точечно: плашки-заметки, активные
     пилюли. На синем фоне читается как второй голос и не спорит с брендовым. */
  --accent:#e08a1e;--accent-soft:#fff3e0;
  --ink:#0e2433;--muted:#5f7384;--bg:#eef5fb;--card:#fff;--soft:#f7fbfe;
  --line:#e2ecf4;--ok:#127a44;--warn:#9a6a00;--bad:#b5342a;
  --ok-bg:#e6f7ee;--warn-bg:#fdf3da;--bad-bg:#fdeae8;
  --shadow:0 10px 30px rgba(13,60,110,.08);
  --shadow-lift:0 16px 38px rgba(13,60,110,.14);
  --font-head:Montserrat,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-body:Inter,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);
  font:400 16px/1.65 var(--font-body);-webkit-font-smoothing:antialiased}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
/* Видимый фокус — иначе клавиатурная навигация теряет каретку на карточках. */
a:focus-visible,button:focus-visible,.burger:focus-visible{outline:2px solid var(--brand-bright);outline-offset:2px;border-radius:6px}
.wrap{max-width:920px;margin:0 auto;padding:0 20px}
main.main{padding:30px 20px 12px}

/* Иконки Lucide: наследуют цвет текста и выравниваются по базовой линии. */
.ic{flex:none;vertical-align:-.18em}
.ic-inline{width:16px;height:16px;vertical-align:-.16em;margin-right:6px}

/* --- Шапка ---------------------------------------------------------------- */
header.site{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.9);
  backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
/* Шапка шире колонки контента (920px): логотип + пять пунктов + кнопка требуют
   ~875px, что в 920 влезало впритык — при чуть более широких метриках шрифта
   меню срывалось на вторую строку и распирало шапку по высоте. Здесь запас. */
header.site .wrap{display:flex;justify-content:space-between;align-items:center;
  height:64px;gap:16px;max-width:1140px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-head);
  font-weight:800;color:var(--ink);font-size:18px;letter-spacing:-.3px;white-space:nowrap}
.brand:hover{text-decoration:none}
.brand .logo-img{width:32px;height:32px;border-radius:8px;flex:none}
nav.site-nav{display:flex;align-items:center;gap:16px;flex-wrap:nowrap}
nav.site-nav a{color:var(--muted);font-weight:600;font-size:15px;white-space:nowrap}
nav.site-nav a:hover{color:var(--brand);text-decoration:none}
.nav-cta{display:inline-flex;align-items:center;gap:7px;background:var(--brand);
  color:#fff!important;padding:8px 15px;border-radius:10px;
  box-shadow:0 6px 16px rgba(22,131,199,.28);white-space:nowrap}
.nav-cta:hover{filter:brightness(1.07)}

/* Бургер: чекбокс-переключатель без JS. Скрипт тут не нужен (меню открывается
   и на странице без JS), а состояние :checked переживает и клик, и клавиатуру. */
.nav-toggle{position:absolute;opacity:0;width:1px;height:1px;margin:0;
  /* Не display:none и не visibility:hidden — иначе чекбокс выпадает из
     таба, и меню становится недоступным с клавиатуры. Рамку фокуса рисуем
     на видимой кнопке-бургере (правило ниже). */
  clip-path:inset(50%)}
.nav-toggle:focus-visible ~ .burger{outline:2px solid var(--brand-bright);outline-offset:2px}
.burger{display:none;align-items:center;justify-content:center;width:42px;height:42px;
  border:1px solid var(--line);border-radius:11px;background:#fff;color:var(--ink);
  cursor:pointer;flex:none}
.burger .ic-close{display:none}
.burger:hover{border-color:var(--brand);color:var(--brand)}
/* Подложка под открытым меню — клик мимо закрывает (label поверх страницы). */
.nav-backdrop{display:none}

/* --- Hero ----------------------------------------------------------------- */
.hero{background:linear-gradient(135deg,#0d5a90 0%,#1683c7 55%,#2a9be0 100%);
  color:#fff;border-radius:0 0 28px 28px;position:relative;overflow:hidden}
.hero .wrap{padding:48px 20px 54px;position:relative;z-index:1}
.hero::after{content:"";position:absolute;right:-90px;top:-90px;width:360px;height:360px;
  background:radial-gradient(circle,rgba(255,255,255,.16),transparent 62%);pointer-events:none}
.hero .logo-img{width:86px;height:86px;border-radius:22px;margin-bottom:18px;
  box-shadow:0 12px 30px rgba(0,0,0,.28)}
.hero h1{color:#fff;font-size:42px;line-height:1.1;letter-spacing:-.8px;margin:0 0 14px;max-width:17ch}
.hero p.sub{color:rgba(255,255,255,.93);font-size:18px;max-width:60ch;margin:0 0 26px}

/* --- Типографика ---------------------------------------------------------- */
h1,h2,h3{font-family:var(--font-head)}
h1{font-size:32px;line-height:1.18;margin:0 0 10px;letter-spacing:-.6px;font-weight:800;color:var(--ink)}
h2{font-size:23px;margin:38px 0 14px;letter-spacing:-.35px;font-weight:700;
  display:flex;align-items:center;gap:9px}
/* Акцентная засечка у h2 — держит ритм длинной страницы без лишних линеек. */
h2::before{content:"";width:4px;height:1.05em;border-radius:3px;flex:none;
  background:linear-gradient(180deg,var(--brand-bright),var(--brand-deep))}
h2 .ic{color:var(--brand)}
h3{font-weight:700;letter-spacing:-.2px}
p.lead{color:var(--muted);margin-top:0;font-size:17px}

/* --- Кнопки и карточки ---------------------------------------------------- */
.cta{display:inline-flex;align-items:center;gap:9px;background:#fff;color:var(--brand-deep);
  font-family:var(--font-head);font-weight:700;padding:13px 22px;border-radius:12px;
  box-shadow:0 8px 22px rgba(0,0,0,.14);transition:transform .12s,box-shadow .12s}
.cta:hover{text-decoration:none;transform:translateY(-1px);box-shadow:0 12px 26px rgba(0,0,0,.18)}
.cta.solid{background:var(--brand);color:#fff;box-shadow:0 10px 24px rgba(22,131,199,.32)}
.cta.solid:hover{background:var(--brand-bright)}

.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:22px 0}
.feature{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;
  box-shadow:var(--shadow);transition:transform .14s,box-shadow .14s,border-color .14s}
.feature:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift);border-color:#cfe3f3}
/* Иконка в «плашке» — фокус внимания на карточке без крупного цветного пятна. */
.feature .fi{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;
  justify-content:center;background:linear-gradient(135deg,#e8f3fc,#d7ebfa);
  color:var(--brand-deep);margin-bottom:10px}
.feature b{display:block;font-family:var(--font-head);font-size:16px;font-weight:700;margin-bottom:4px}
.feature span{color:var(--muted);font-size:14px}

.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px;
  margin:18px 0;box-shadow:var(--shadow)}

.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;
  font-family:var(--font-head);font-weight:700;font-size:13px;white-space:nowrap;
  border:1px solid transparent}
.badge.ok{background:var(--ok-bg);color:var(--ok);border-color:#c9ecd9}
.badge.warn{background:var(--warn-bg);color:var(--warn);border-color:#f3e2b8}
.badge.bad{background:var(--bad-bg);color:var(--bad);border-color:#f6cfc9}

.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:16px 0}
.metric{background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:14px}
.metric .k{color:var(--muted);font-size:13px;font-weight:500}
.metric .v{font-family:var(--font-head);font-size:22px;font-weight:700;color:var(--ink);
  font-variant-numeric:tabular-nums}
.index{font-family:var(--font-head);font-size:56px;font-weight:800;line-height:1;
  color:var(--brand-deep);letter-spacing:-2px}

/* --- Каналы --------------------------------------------------------------- */
.ch-av{object-fit:cover;flex:none;border-radius:10px}
.ch-av-lg{width:88px;height:88px;border-radius:22px}
.ch-av-md{width:40px;height:40px;border-radius:11px}
.ch-av-sm{width:34px;height:34px;border-radius:9px}
/* Плейсхолдер — квадрат с первой буквой username, если аватар не загружен. */
.ch-ph{display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#dcebf7,#c8e0f4);font-family:var(--font-head);
  color:var(--brand-deep);font-weight:700;text-transform:uppercase;flex:none}
.ch-ph-lg{width:88px;height:88px;border-radius:22px;font-size:38px}
.ch-ph-md{width:40px;height:40px;border-radius:11px;font-size:18px}
.ch-ph-sm{width:34px;height:34px;border-radius:9px;font-size:15px}
.ch-meta{display:flex;align-items:center;gap:12px;min-width:0}
.ch-meta .ch-text{min-width:0;overflow-wrap:anywhere}
/* Имя канала — заголовочным шрифтом: в списках это главный опорный элемент. */
.ch-name{font-family:var(--font-head);font-weight:700;letter-spacing:-.2px}
.ch-about{color:var(--muted);font-size:14px;line-height:1.45;margin:4px 0 0;
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical}

ul.list{list-style:none;padding:0;margin:0}
ul.list li{border-bottom:1px solid var(--line);padding:13px 0;display:flex;
  justify-content:space-between;gap:12px;align-items:center}
ul.list li:last-child{border-bottom:0}
ul.list li>span:first-child{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
ul.list li>.badge{flex:none}
ul.list a{font-family:var(--font-head);font-weight:700}
.muted{color:var(--muted)}
.small{font-size:13px}
/* Ссылка-действие в конце блока: стрелка съезжает вправо на hover. */
.more{display:inline-flex;align-items:center;gap:7px;font-weight:600}
.more .ic{transition:transform .14s}
.more:hover{text-decoration:none}
.more:hover .ic{transform:translateX(3px)}

.pill{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:7px 14px;margin:0 8px 8px 0;color:var(--ink);font-weight:600;
  font-size:14px;box-shadow:0 2px 6px rgba(13,60,110,.04);
  transition:border-color .14s,color .14s,transform .14s}
.pill:hover{border-color:var(--brand);color:var(--brand);text-decoration:none;transform:translateY(-1px)}
.pill.accent{border-color:#f0d5ab;background:var(--accent-soft);color:#8a5410}
.pill.accent:hover{border-color:var(--accent);color:#7a4a0e}

.disclaimer{color:var(--muted);font-size:13px;background:var(--soft);border:1px solid var(--line);
  border-radius:12px;padding:14px 16px;margin:18px 0}
/* Выносная заметка: акцентная полоса слева вместо ещё одной серой карточки. */
.note{display:flex;gap:11px;align-items:flex-start;background:var(--accent-soft);
  border:1px solid #f3e0c2;border-left:4px solid var(--accent);border-radius:12px;
  padding:13px 15px;margin:16px 0;font-size:14px;color:#6d4712}
.note .ic{color:var(--accent);margin-top:2px}

.article p{margin:0 0 14px}
.article h2{font-size:21px}
ul.bullets{margin:0 0 16px;padding-left:22px}
ul.bullets li{padding:4px 0}
/* Список без маркеров, где роль маркера играет иконка Lucide. */
ul.icon-list{list-style:none;padding:0;margin:0 0 4px}
ul.icon-list li{display:flex;gap:11px;align-items:flex-start;padding:9px 0;
  border-bottom:1px solid var(--line)}
ul.icon-list li:last-child{border-bottom:0}
ul.icon-list .ic{color:var(--brand);margin-top:3px}

/* --- Статистика ----------------------------------------------------------- */
.riskbar{display:flex;height:14px;border-radius:999px;overflow:hidden;background:var(--line);margin:6px 0}
.riskbar i{display:block;height:100%}
.riskbar .g{background:#19a05a}.riskbar .y{background:#e0a200}.riskbar .r{background:#d2453a}
.legend{display:flex;flex-wrap:wrap;gap:14px;color:var(--muted);font-size:13px;margin-top:8px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:middle}
/* Точка светофора в заголовках таблиц — замена цветным эмодзи (они рендерятся
   по-разному в системах и ломают ширину колонки). */
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:middle}
.dot.g{background:#19a05a}.dot.y{background:#e0a200}.dot.r{background:#d2453a}
table.stats{width:100%;border-collapse:collapse;font-size:14px}
table.stats th,table.stats td{padding:11px 10px;border-bottom:1px solid var(--line);text-align:right}
table.stats th:first-child,table.stats td:first-child{text-align:left}
table.stats thead th{color:var(--muted);font-weight:600;font-size:13px;white-space:nowrap}
table.stats tbody td{font-variant-numeric:tabular-nums}
table.stats tbody tr:last-child td{border-bottom:0}
.table-wrap{overflow-x:auto}

footer.site{border-top:1px solid var(--line);color:var(--muted);font-size:14px;margin-top:46px;background:#fff}
footer.site .wrap{padding:26px 20px}
footer.site a{color:var(--muted)}
footer.site a:hover{color:var(--brand)}

/* --- Адаптив -------------------------------------------------------------- *
   Порог 980px, а не 600: логотип + пять пунктов + кнопка занимают ~830px, и
   уже около 900px запас падает до трёх десятков пикселей — меню срывается на
   вторую строку и распирает шапку. Ниже 980px показываем бургер, выше остаётся
   запас ~110px даже с самыми широкими метриками шрифта. */
@media(max-width:980px){
  .burger{display:flex}
  /* Закрытое меню — display:none, открытое — display:flex. Схему со
     схлопыванием по max-height не используем: она даёт плавность, но состояние
     зависит от каскада переходов и на практике залипало закрытым. Здесь
     переключение однозначное, а закрытое меню ещё и выпадает из таб-порядка,
     что для скрытой панели правильно. */
  nav.site-nav{display:none;position:fixed;top:64px;right:0;left:0;z-index:19;
    flex-direction:column;align-items:stretch;gap:0;
    background:#fff;border-bottom:1px solid var(--line);
    box-shadow:0 18px 40px rgba(13,60,110,.16);
    padding:8px 20px 16px;max-height:calc(100vh - 64px);overflow-y:auto}
  nav.site-nav a{padding:13px 4px;font-size:16px;border-bottom:1px solid var(--line)}
  nav.site-nav a:last-child{border-bottom:0}
  .nav-cta{justify-content:center;margin-top:12px;padding:12px 15px;font-size:16px}
  .nav-toggle:checked ~ nav.site-nav{display:flex}
  .nav-toggle:checked ~ .burger .ic-menu{display:none}
  .nav-toggle:checked ~ .burger .ic-close{display:block}
  .nav-toggle:checked ~ .nav-backdrop{display:block;position:fixed;inset:64px 0 0;
    z-index:18;background:rgba(14,36,51,.35)}
}
@media(max-width:600px){
  .hero h1{font-size:31px;letter-spacing:-.5px}
  .hero .wrap{padding:38px 20px 44px}
  .hero .logo-img{width:64px;height:64px;border-radius:18px}
  h1{font-size:26px}
  h2{font-size:20px}
  .index{font-size:46px}
  .brand{font-size:16px}
  .wrap{padding:0 16px}
}
/* Уважаем системную настройку «меньше движения». */
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto!important}
}