/* Дизайн-токены (из io) — чтобы io help.css работал в standalone-фронте help.golova */
@font-face { font-family: 'Pragmatapro'; src: url('/assets/fonts/PragmataProMono-Regular.subset.woff2') format('woff2'); font-display: swap; }
:root {
  --background: hsl(0 0% 100%); --foreground: hsl(0 0% 13%);
  --card: hsl(0 0% 100%); --secondary: hsl(0 0% 92.1%);
  --muted-foreground: hsl(0 0% 32%); --border: hsl(210, 9%, 86%);
  --radius: 0.5rem; --font-pragmata: 'Pragmatapro';
  --annot: #4f46e5; /* цвет аннотаций-оверлеев на скринах — меняется в одном месте */
}
.dark {
  --background: hsl(0 0% 3.9%); --foreground: hsl(120 14% 96%);
  --card: hsl(0 0% 3.9%); --secondary: hsl(0 0% 14.9%);
  --muted-foreground: hsl(0 0% 63.9%); --border: hsl(0, 0%, 30%);
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--background); }
body { color: var(--foreground); font-family: var(--font-pragmata, ui-monospace, monospace); font-weight: 400; -webkit-font-smoothing: antialiased; }
.help-prose a, a { color: inherit; }

  /* Плавные переходы между страницами справки (View Transitions API, MPA).
     Кадр (сайдбар/шапка) мягко кросс-фейдится, контент статьи приподнимается. */
  @view-transition { navigation: auto; }
  .help-article { view-transition-name: help-content; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; animation-timing-function: ease; }
  ::view-transition-old(help-content) { animation: help-vt-out .15s ease both; }
  ::view-transition-new(help-content) { animation: help-vt-in .32s cubic-bezier(.22, 1, .36, 1) both; }
  @keyframes help-vt-out { to { opacity: 0; } }
  @keyframes help-vt-in { from { opacity: 0; } }
  @media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root), ::view-transition-new(root),
    ::view-transition-old(help-content), ::view-transition-new(help-content) { animation: none !important; }
  }

  /* Шрифт справки — весь интерфейс на нашей PragmataPro Mono */
  .help-layout, .hp, .help-search-trigger {
    font-family: var(--font-pragmata, ui-monospace, 'SFMono-Regular', Menlo, monospace);
    font-weight: 400; letter-spacing: 0;
  }

  .help-layout {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 32px clamp(20px, 4vw, 64px) 80px;
    display: flex;
    align-items: flex-start;
    gap: clamp(28px, 4vw, 56px);
  }
  .help-sidebar { width: clamp(220px, 22vw, 300px); flex-shrink: 0; }
  .help-sidebar__sticky { position: sticky; top: 92px; display: flex; flex-direction: column; max-height: calc(100vh - 104px); }
  .help-content { flex: 1; min-width: 0; }
  .help-welcome { margin-bottom: 40px; }

  /* Поиск */
  .help-search { position: relative; margin-bottom: 24px; }
  .help-search input {
    width: 100%; height: 46px; padding: 0 44px 0 18px;
    font-size: 14px; color: var(--foreground);
    background: var(--background);
    border: 1px solid var(--border); border-radius: 999px;
    transition: border-color .2s ease, box-shadow .2s ease;
  }
  .help-search input:focus { outline: none; border-color: var(--foreground); box-shadow: 0 0 0 4px color-mix(in srgb, var(--foreground) 8%, transparent); }
  .help-search button {
    position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
    color: var(--muted-foreground); background: none; border: 0; cursor: pointer;
  }

  /* Дерево навигации — моноширинное, технологичное */
  .help-nav, .help-nav ul { list-style: none; margin: 0; padding: 0; }
  .help-nav a, .help-nav summary {
    display: block; text-decoration: none; color: var(--muted-foreground);
    font-size: 14px; line-height: 1.5;
    padding: 6px 10px; border-radius: 6px; border-left: 2px solid transparent; cursor: pointer;
    transition: color .12s ease, background-color .12s ease;
  }
  .help-nav a:hover, .help-nav summary:hover { color: var(--foreground); background: var(--secondary); }
  .help-nav a.active { color: var(--foreground); border-left-color: var(--foreground); background: var(--secondary); }
  .help-nav details > summary {
    color: var(--foreground); font-weight: 500;
    list-style: none; display: flex; align-items: center; gap: 8px;
  }
  .help-nav details > summary::-webkit-details-marker { display: none; }
  .help-nav details > summary::before {
    content: "+"; font-size: 13px; line-height: 1; width: 10px; text-align: center;
    color: var(--muted-foreground); flex-shrink: 0; transition: transform .2s ease, color .12s;
  }
  .help-nav details[open] > summary::before { content: "−"; }
  .help-nav details > summary:hover::before { color: var(--foreground); }
  .help-nav details ul { padding-left: 14px; border-left: 1px solid var(--border); margin: 2px 0 6px; }
  /* Тонкий скролл длинного дерева + счётчики статей у разделов.
     Дерево (23 раздела, до 34 строк с раскрытым) не влезает в закреплённую панель
     ни на одном разумном экране, поэтому скролл здесь неизбежен. Смягчаем его:
     - overscroll-behavior: contain — докрутив дерево до конца, не утаскиваем за собой страницу;
     - тени-подсказки снизу и сверху по технике background-attachment: local + scroll:
       непрозрачные local-слои закрывают тень, когда список докручен до края, поэтому
       подсказка «есть ещё» появляется и пропадает сама, без JS. */
  .help-nav {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: thin; scrollbar-color: var(--border) transparent;
    background:
      linear-gradient(var(--background) 30%, transparent) top / 100% 22px no-repeat local,
      linear-gradient(transparent, var(--background) 70%) bottom / 100% 22px no-repeat local,
      radial-gradient(farthest-side at 50% 0, color-mix(in srgb, var(--foreground) 14%, transparent), transparent) top / 100% 8px no-repeat scroll,
      radial-gradient(farthest-side at 50% 100%, color-mix(in srgb, var(--foreground) 14%, transparent), transparent) bottom / 100% 8px no-repeat scroll;
  }
  .help-nav::-webkit-scrollbar { width: 6px; }
  .help-nav::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
  .help-nav__label { flex: 1; min-width: 0; }
  .help-nav__count { flex-shrink: 0; font-size: 12px; color: var(--muted-foreground); }
  .help-nav-toggle { display: none; }

  /* Хлебные крошки */
  .help-bc { font-size: 13px; color: var(--muted-foreground); margin-bottom: 24px; display: flex; flex-wrap: wrap; gap: 6px; }
  .help-bc a { color: var(--muted-foreground); text-decoration: none; }
  .help-bc a:hover { color: var(--foreground); }

  /* Заголовок статьи — на Pragmata (технологичный акцент вместо жирного) */
  .help-title {
    font-family: var(--font-pragmata, ui-monospace, 'SFMono-Regular', monospace);
    font-weight: 400; font-size: 27px; letter-spacing: -.01em; line-height: 1.2;
    color: var(--foreground); margin: 0 0 28px; padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
  }
  .help-ast { display: none; }

  /* Контент статьи (prose) — размеры под io (text-base 16px) */
  .help-prose { max-width: 860px; color: var(--foreground); font-size: 16px; line-height: 1.7; }
  .help-prose h1,.help-prose h2,.help-prose h3,.help-prose h4 {
    font-family: var(--font-pragmata, ui-monospace, 'SFMono-Regular', monospace);
    font-weight: 400; letter-spacing: 0; line-height: 1.3; color: var(--foreground);
  }
  .help-prose h1 { font-size: 24px; margin: 52px 0 16px; }
  /* Заголовки разделов — лёгкая отбивка тонкой линией сверху + воздух (без маркеров) */
  .help-prose h2 {
    font-size: 22px; margin: 56px 0 12px; padding-top: 28px;
    border-top: 1px solid var(--border);
  }
  .help-prose > h2:first-child { margin-top: 6px; padding-top: 0; border-top: 0; }
  /* Подзаголовки — крупнее + лёгкая светлая черта слева */
  .help-prose h3 {
    font-size: 18px; margin: 42px 0 12px; padding-left: 14px;
    border-left: 2px solid var(--border);
  }
  /* Якорь у заголовка — появляется при наведении, ведёт на раздел */
  .help-anchor { opacity: 0; margin-left: 8px; color: var(--muted-foreground); text-decoration: none; user-select: none; -webkit-user-select: none; transition: opacity .15s ease; }
  .help-prose h2:hover .help-anchor, .help-prose h3:hover .help-anchor { opacity: .65; }
  .help-anchor:hover { opacity: 1 !important; color: var(--foreground); }
  .help-prose p { margin: 0 0 16px; }
  /* Лид-абзац — только когда статья ОТКРЫВАЕТСЯ абзацем (не сразу после заголовка) */
  .help-prose > p:first-child { font-size: 17.5px; line-height: 1.65; }
  /* Без жирного и курсива — спокойно, разделяем вёрсткой */
  .help-prose strong, .help-prose b { font-weight: 400; }
  .help-prose em, .help-prose i { font-style: normal; }
  /* Ссылки — синие, спокойное подчёркивание. Минимализм: без анимации и стрелок */
  .help-prose a {
    color: #2563eb;
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, #2563eb 35%, transparent);
    text-underline-offset: 3px; text-decoration-thickness: 1px;
    transition: text-decoration-color .15s ease;
  }
  .help-prose a:hover { text-decoration-color: #2563eb; }
  /* Современный перенос строк: заголовки балансируются, абзацы без «сирот» в конце */
  .help-title, .help-prose h2, .help-prose h3 { text-wrap: balance; }
  .help-prose p, .help-prose li { text-wrap: pretty; }

  /* Scroll-reveal: блоки мягко проявляются при входе в вид.
     Прячем только при .help-js (ставится inline-скриптом в <head> до отрисовки →
     без JS контент виден сразу, без «вспышки»). JS добавляет .in при входе в вид. */
  .help-js .help-prose > h2, .help-js .help-prose > h3, .help-js .help-prose > p,
  .help-js .help-prose > ul, .help-js .help-prose > ol, .help-js .help-prose > blockquote,
  .help-js .help-prose > figure, .help-js .help-prose > table, .help-js .help-card {
    opacity: 0; transform: translateY(16px);
    transition: opacity .55s ease, transform .55s cubic-bezier(.22, 1, .36, 1);
  }
  .help-js .help-prose > .in, .help-js .help-card.in { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) {
    .help-js .help-prose > *, .help-js .help-card { opacity: 1 !important; transform: none !important; transition: none !important; }
  }
  .help-prose ul { margin: 0 0 18px; padding-left: 22px; list-style: disc; }
  .help-prose ul > li::marker { color: #2563eb; font-size: .9em; }
  .help-prose li { margin-bottom: 9px; }
  /* Нумерованные шаги — мягкие mono-номера в рамке (в духе справки io, без заливки) */
  .help-prose ol { list-style: none; counter-reset: step; padding-left: 0; margin: 0 0 18px; }
  .help-prose ol > li { counter-increment: step; position: relative; padding-left: 42px; }
  .help-prose ol > li::before {
    content: counter(step);
    position: absolute; left: 0; top: -1px;
    display: flex; align-items: center; justify-content: center;
    width: 27px; height: 27px;
    font-family: var(--font-pragmata, monospace); font-size: 13px; line-height: 1;
    color: var(--muted-foreground); border: 1px solid var(--border); border-radius: 8px;
  }
  .help-prose li > ul, .help-prose li > ol { margin: 8px 0 4px; }
  /* Блочный скрин: контейнер обрезает по скруглению, «рамка» — кольцо-тень.
     Применяется ТОЛЬКО к обёртке (её ставит JS блочным картинкам), чтобы
     мелкие инлайн-иконки в тексте не превращались в блок с кольцом. */
  .help-imgwrap {
    display: block; margin: 30px 0; border-radius: 12px; overflow: hidden;
    box-shadow: 0 0 0 1px var(--border), 0 6px 20px rgba(0,0,0,.10);
  }
  html.dark .help-imgwrap {
    box-shadow: 0 0 0 1px var(--border), 0 8px 28px rgba(0,0,0,.35);
  }
  .help-prose img { max-width: 100%; height: auto; transition: opacity .55s ease; }
  /* Инлайн-иконка внутри текста — остаётся в строке */
  .help-inline-img { display: inline-block; vertical-align: middle; margin: 0 2px; border-radius: 3px; box-shadow: none; }
  /* Картинка чуть больше контейнера → контейнер срезает «края» скрина (симметрично ~5px) */
  .help-imgwrap img { display: block; width: calc(100% + 10px); max-width: none; margin: -5px; border: 0; border-radius: 0; box-shadow: none; }
  .help-prose blockquote { border-left: 3px solid var(--border); padding-left: 1rem; margin: 0 0 16px; color: var(--muted-foreground); }
  .help-prose code { font-family: var(--font-pragmata, monospace); font-size: .9em; background: var(--secondary); border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; }
  .help-prose pre { background: var(--secondary); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; overflow-x: auto; }
  .help-prose pre code { background: none; border: 0; padding: 0; }
  .help-prose table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 14px; }
  .help-prose th,.help-prose td { border: 1px solid var(--border); padding: 8px 12px; text-align: left; }
  .help-prose th { background: var(--secondary); }

  /* Карточки «Статьи раздела» / поиск */
  .help-section { margin-top: 40px; }
  .help-section h4 { font-weight: 500; font-size: 16px; color: var(--foreground); margin: 0 0 14px; }
  .help-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
  .help-card {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 15px 18px; border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--card); color: var(--foreground) !important; text-decoration: none !important;
    font-size: 14.5px; transition: border-color .18s ease, transform .18s ease;
  }
  .help-card:hover { border-color: var(--foreground); transform: translateY(-1px); }
  .help-card::after { content: "↗"; color: var(--muted-foreground); flex-shrink: 0; }
  .help-card__main { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
  .help-card__tag { font-size: 11px; color: var(--muted-foreground); border: 1px solid var(--border); border-radius: 5px; padding: 0 6px; white-space: nowrap; }
  /* Плейсхолдер пустого раздела */
  .help-empty { color: var(--muted-foreground); }

  /* Видео по теме статьи: адаптивный 16:9 плеер, кольцо-рамка как у скринов */
  .help-video {
    position: relative; aspect-ratio: 16 / 9; margin: 0 0 30px;
    border-radius: 12px; overflow: hidden; background: var(--secondary);
    box-shadow: 0 0 0 1px var(--border), 0 6px 20px rgba(0, 0, 0, .10);
  }
  .help-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

  /* --- Лендинг (первый экран): заголовок + широкий поиск --- */
  .help-hero { margin-bottom: 44px; }
  .help-hero h1 {
    font-weight: 500; font-size: 32px; letter-spacing: -.02em; line-height: 1.15;
    color: var(--foreground); margin: 0 0 22px;
  }
  .help-hero__search {
    display: flex; align-items: center; gap: 14px; width: 100%; max-width: 720px; height: 58px; padding: 0 22px;
    border: 1px solid var(--border); border-radius: 999px; background: var(--background);
    color: var(--muted-foreground); font-size: 15px; cursor: pointer;
    transition: border-color .2s ease, box-shadow .2s ease;
  }
  .help-hero__search:hover { border-color: var(--foreground); }
  .help-hero__search:focus-visible { outline: none; border-color: var(--foreground); box-shadow: 0 0 0 4px color-mix(in srgb, var(--foreground) 8%, transparent); }
  .help-hero__search svg { flex-shrink: 0; }
  .help-hero__search span { flex: 1; text-align: left; }
  .help-hero__search kbd { font-family: var(--font-pragmata, monospace); font-size: 12px; padding: 3px 9px; border: 1px solid var(--border); border-radius: 7px; }

  /* Карточки разделов — как на лендинге io (крупнее, серые, mono-заголовок) */
  .help-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
  .help-cat-card {
    display: block; padding: 22px 24px; border-radius: 12px;
    border: 1px solid #D9D9D9; background: #fff;
    color: var(--foreground) !important; text-decoration: none !important;
    transition: transform .25s ease, border-color .25s ease;
  }
  html.dark .help-cat-card { border-color: #525252; background: #252525; }
  .help-cat-card:hover { transform: scale(1.03); }
  .help-cat-card__title { font-weight: 400; font-size: 17px; line-height: 1.25; letter-spacing: -.01em; text-transform: uppercase; color: var(--foreground); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .help-cat-card__title span { font-size: 15px; color: var(--muted-foreground); }
  .help-cat-card__meta { color: var(--muted-foreground); font-size: 14px; margin-top: 12px; }

  /* Блок «сама справка» под квадратами: дерево + контент */
  .help-below {
    margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--border);
    display: flex; align-items: flex-start; gap: clamp(28px, 4vw, 56px);
  }
  @media (max-width: 991px) { .help-below { flex-direction: column; gap: 0; } }

  /* --- Оглавление (TOC) --- */
  .help-main { display: flex; gap: 40px; align-items: flex-start; }
  .help-article { flex: 1; min-width: 0; }
  .help-toc { width: 220px; flex-shrink: 0; position: sticky; top: 92px; font-size: 13px; }
  .help-toc__h {  font-size: 11px;  color: var(--muted-foreground); margin-bottom: 10px; }
  .help-toc a { display: block; padding: 4px 0 4px 12px; color: var(--muted-foreground); text-decoration: none; border-left: 2px solid var(--border); line-height: 1.35; }
  .help-toc a:hover, .help-toc a.active { color: var(--foreground); border-left-color: var(--foreground); }
  .help-toc a.lvl-3 { padding-left: 24px; }
  @media (max-width: 1100px) { .help-toc { display: none; } }

  /* --- Мета статьи (дата) --- */
  .help-meta { font-size: 12px; color: var(--muted-foreground); margin: -18px 0 24px; }

  /* Prev / Next — без рамок: тонкий разделитель сверху, ссылки-стрелки */
  .help-prevnext { display: flex; justify-content: space-between; gap: 24px; margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--border); }
  .help-prevnext__a {
    display: inline-flex; flex-direction: column; gap: 6px; max-width: 48%;
    text-decoration: none !important; color: var(--foreground) !important;
  }
  .help-prevnext__a--next { margin-left: auto; text-align: right; align-items: flex-end; }
  .help-prevnext__dir { font-size: 13px; color: var(--muted-foreground); }
  .help-prevnext__t { font-size: 16px; color: var(--foreground); transition: color .15s ease; }
  .help-prevnext__a:hover .help-prevnext__t { text-decoration: underline; text-underline-offset: 3px; }

  /* Copy на коде */
  .help-prose pre .help-copy {
    position: absolute; top: 8px; right: 8px; padding: 4px 10px; font-size: 12px;
    font-family: var(--font-pragmata, monospace); color: var(--muted-foreground);
    background: var(--background); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; opacity: 0; transition: opacity .15s, color .15s;
  }
  .help-prose pre:hover .help-copy { opacity: 1; }
  .help-prose pre .help-copy:hover { color: var(--foreground); }

  /* Callout-блоки (Note/Tip/Warning) — цитата по умолчанию = note */
  .help-prose blockquote, .help-prose .callout {
    border: 1px solid var(--border); border-left: 4px solid var(--muted-foreground);
    background: var(--secondary); border-radius: var(--radius);
    padding: 14px 18px; margin: 18px 0; color: var(--foreground);
  }
  .help-prose blockquote p:last-child, .help-prose .callout p:last-child { margin-bottom: 0; }
  /* Фирменные цвета — аккуратно, только в callout'ах (семантика) */
  .help-prose .callout-tip    { border-left-color: #16a34a; background: color-mix(in srgb, #16a34a 7%, var(--secondary)); }
  .help-prose .callout-info   { border-left-color: #2563eb; background: color-mix(in srgb, #2563eb 7%, var(--secondary)); }
  .help-prose .callout-warning{ border-left-color: #d97706; background: color-mix(in srgb, #d97706 7%, var(--secondary)); }
  .help-prose .callout-danger { border-left-color: #dc2626; background: color-mix(in srgb, #dc2626 7%, var(--secondary)); }

  /* Путь по интерфейсу: Раздел → Подраздел → Действие (плашки) */
  .help-prose .ui-path { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; vertical-align: baseline; }
  .help-prose .ui-step {
    padding: 1px 9px; font-size: .9em; white-space: nowrap;
    background: var(--secondary); border: 1px solid var(--border); border-radius: 7px; color: var(--foreground);
  }
  .help-prose .ui-sep { color: var(--muted-foreground); font-size: .9em; }

  /* UI-элемент (кнопка/вкладка/поле) — лёгкая плашка вместо «жирного», который io прячет */
  .help-prose .ui-el {
    padding: 0 6px; border-radius: 5px; white-space: nowrap;
    background: var(--secondary); color: var(--foreground);
    box-shadow: inset 0 0 0 1px var(--border);
  }

  /* Клавиши */
  .help-prose kbd {
    font-family: var(--font-pragmata, monospace); font-size: .82em; line-height: 1;
    padding: 2px 7px; border: 1px solid var(--border); border-bottom-width: 2px;
    border-radius: 6px; background: var(--background); color: var(--foreground);
  }

  /* Таблицы — лёгкая зебра, тихая шапка, скролл на узких экранах */
  .help-prose table { display: block; overflow-x: auto; }
  .help-prose tbody tr:nth-child(even) { background: color-mix(in srgb, var(--secondary) 55%, transparent); }
  .help-prose th { font-weight: 400; color: var(--muted-foreground); }

  /* Лайтбокс скриншотов: клик → крупно по центру */
  .help-prose img { cursor: zoom-in; }
  .help-lightbox {
    position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center;
    padding: 4vmin; background: rgba(0,0,0,.82); backdrop-filter: blur(3px);
    cursor: zoom-out; opacity: 0; transition: opacity .18s ease;
  }
  .help-lightbox.is-open { opacity: 1; }
  .help-lightbox img { max-width: 96vw; max-height: 92vh; border-radius: 10px; box-shadow: 0 20px 70px rgba(0,0,0,.55); cursor: default; }

  /* --- Командная палитра (Cmd+K / Ask AI) --- */
  .hp { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; }
  .hp__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.5); backdrop-filter: blur(2px); }
  .hp__box { position: relative; width: 100%; max-width: 640px; margin: 0 16px; background: var(--background); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 24px 64px rgba(0,0,0,.4); overflow: hidden; }
  .hp__inputwrap { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--border); color: var(--muted-foreground); }
  .hp__inputwrap input { flex: 1; border: 0; background: none; outline: none; font-size: 17px; color: var(--foreground); }
  .hp__esc { font-size: 11px; padding: 2px 7px; border: 1px solid var(--border); border-radius: 5px; color: var(--muted-foreground); }
  .hp__results { max-height: 56vh; overflow-y: auto; padding: 8px; }
  .hp__row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 10px; color: var(--foreground) !important; text-decoration: none !important; cursor: pointer; }
  .hp__row.is-sel { background: var(--secondary); }
  .hp__ico { color: var(--muted-foreground); font-family: var(--font-pragmata, monospace); width: 16px; text-align: center; }
  .hp__ai { font-weight: 500; }
  .hp__ai .hp__ico { color: var(--foreground); }
  .hp__empty { padding: 28px; text-align: center; color: var(--muted-foreground); }
  .hp__answer { padding: 18px; line-height: 1.6; color: var(--foreground); font-size: 15px; }
  .hp__thinking { color: var(--muted-foreground); }
  .hp__sources { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; }
  .hp__sources > span { color: var(--muted-foreground); }
  .hp__srclink { font-size: 13px; padding: 3px 10px; border: 1px solid var(--border); border-radius: 999px; color: var(--foreground) !important; text-decoration: none !important; }
  .hp__srclink:hover { border-color: var(--foreground); }
  .hp__foot { display: flex; gap: 18px; padding: 10px 16px; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted-foreground); }
  .hp__foot kbd { font-size: 11px; padding: 1px 5px; border: 1px solid var(--border); border-radius: 4px; margin-right: 2px; }

  /* Шапка дерева: «Разделы» + иконка поиска (поиск встроен в дерево) */
  .help-nav-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 12px; margin-bottom: 10px; border-bottom: 1px solid var(--border); }
  .help-nav-head__label { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--muted-foreground); font-size: 13px; font-family: inherit; cursor: default; }
  .help-nav-head__chev { display: none; }
  .help-search-icon {
    display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0;
    border: 1px solid var(--border); border-radius: 8px;
    background: var(--background); color: var(--muted-foreground); cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
  }
  .help-search-icon:hover { border-color: var(--foreground); color: var(--foreground); background: var(--secondary); }

  /* Плавное появление картинок + скелетон-мерцание во время загрузки */
  .help-prose img.is-loading { opacity: 0; }
  .help-prose img.is-loaded { opacity: 1; }
  .help-imgwrap { border-radius: var(--radius); overflow: hidden; }
  .help-imgwrap:has(> img.is-loading) {
    background: rgba(128,128,128,.08);
    background-image: linear-gradient(90deg, transparent, rgba(128,128,128,.15), transparent);
    background-size: 200% 100%; background-repeat: no-repeat;
    animation: help-img-shimmer 1.3s ease-in-out infinite;
  }
  @keyframes help-img-shimmer { from { background-position: 130% 0; } to { background-position: -130% 0; } }

  /* Аннотации-оверлеи: пометка (рамка/стрелка/точка) поверх ЧИСТОГО скрина.
     Векторно, в одном стиле (var --annot), без впечатывания в пиксели. */
  .help-shot { position: relative; display: inline-block; max-width: 100%; line-height: 0; }
  .help-shot > img { display: block; width: 100%; height: auto; }
  .help-annot { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
  .help-annot-box { fill: none; stroke: var(--annot); stroke-width: 2.5px; filter: drop-shadow(0 1px 3px rgba(0,0,0,.22)); }
  .help-annot-point { fill: var(--annot); fill-opacity: .16; stroke: var(--annot); stroke-width: 2.5px; }
  .help-annot-arrow { stroke: var(--annot); stroke-width: 3px; stroke-linecap: round; filter: drop-shadow(0 1px 3px rgba(0,0,0,.25)); }
  .help-annot-arrowhead { fill: var(--annot); }
  .help-annot-badge { fill: var(--annot); filter: drop-shadow(0 1px 3px rgba(0,0,0,.3)); }
  .help-annot-badge-text { fill: #fff; font-weight: 700; font-family: ui-sans-serif, system-ui, sans-serif; }
  .help-annot-halo { fill: var(--annot); fill-opacity: .18; }
  .help-annot-dot { fill: var(--annot); filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); }
  .help-annot-pin { fill: var(--annot); filter: drop-shadow(0 2px 3px rgba(0,0,0,.3)); }
  .help-annot-pin-dot { fill: #fff; }
  .help-img-ph {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    min-height: 160px; margin: 8px 0; padding: 24px; border: 1px dashed var(--border); border-radius: var(--radius);
    background: var(--secondary); color: var(--muted-foreground); font-size: 13px; text-align: center;
  }

  @media (max-width: 991px) {
    .help-layout { flex-direction: column; gap: 0; }
    .help-sidebar { width: 100%; border-bottom: 1px solid var(--border); padding-bottom: 16px; margin-bottom: 24px; }
    .help-sidebar__sticky { position: static; display: block; max-height: none; }
    /* На мобиле «Разделы» сворачивает дерево, контент идёт первым */
    .help-nav-head__label { cursor: pointer; color: var(--foreground); }
    .help-nav-head__chev { display: inline-block; flex-shrink: 0; transition: transform .2s ease; }
    .help-sidebar.nav-open .help-nav-head__chev { transform: rotate(180deg); }
    /* На мобиле панель не закреплена и не скроллится — тени-подсказки не нужны. */
    .help-nav { display: none; overflow: visible; max-height: none; overscroll-behavior: auto; background: none; }
    .help-sidebar.nav-open .help-nav { display: block; }
  }