/* ============================================================
   Компоненты Академии ENGRAM — общий лист для standalone-генератора.
   Вынесено из per-page <style> прототипа academy_new (карточки/док/спеки).
   Зависит только от токенов engram.css (--ink, --brand, --line, --wrap …).
   ============================================================ */

/* приглушённый ink для TOC/подписей/callout — AA-безопасный (был #A39B8C 2.4:1); в тёмной теме читается на тёмном */
:root{--ink-3:#6F675A}
:root[data-theme="dark"]{--ink-3:#9A9082}

/* ---- Шапка карточки инструмента/модели ---- */
.m-head{display:flex;gap:22px;align-items:flex-start}
.m-logo-lg{width:64px;height:64px;border-radius:16px;flex:0 0 auto;display:grid;place-items:center;font-family:var(--mono);font-weight:600;font-size:22px}
.m-prov{font-family:var(--mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.m-badges{display:flex;gap:8px;flex-wrap:wrap}
.ru-badge{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;padding:5px 12px;border-radius:999px}
.ru-badge .dot{width:6px;height:6px;border-radius:50%}
.ru-ok{background:var(--green-tint);color:var(--green)} .ru-ok .dot{background:var(--green)}
.ru-vpn{background:var(--gold-tint);color:var(--gold-700)} .ru-vpn .dot{background:var(--gold)}
.b-spec{display:inline-flex;align-items:center;font-family:var(--mono);font-size:12px;color:var(--ink-2);background:var(--surface-2);border:1px solid var(--line);padding:5px 11px;border-radius:999px}

/* ---- Документ: контент + правый TOC ---- */
.doc{max-width:var(--wrap);margin:0 auto;padding:0 32px;display:grid;grid-template-columns:1fr 220px;gap:56px;align-items:start}
.doc-main{max-width:760px;min-width:0;font-size:16.5px;line-height:1.7;color:var(--ink-2)}
.doc-main h2{font-family:var(--serif);font-weight:400;font-size:25px;letter-spacing:-.01em;color:var(--ink);margin:38px 0 14px;scroll-margin-top:90px}
/* якоря не прячутся под sticky-шапку при переходе из TOC/по ссылке */
.doc-main h3,[id]{scroll-margin-top:90px}
/* защита от горизонтального overflow: длинные ID/URL/mono переносятся */
.doc-main code,.wrap-narrow code,.spec code,.mdl-table code{overflow-wrap:anywhere}
.doc-main h2:first-child{margin-top:0}
.doc-main p{margin:0 0 16px}
.doc-main strong{color:var(--ink);font-weight:600}
.doc-toc{position:sticky;top:90px;font-size:13.5px;display:flex;flex-direction:column;gap:2px}
.toc-h{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px}
.doc-toc a{color:var(--muted);padding:6px 0;border-left:2px solid var(--line);padding-left:14px;transition:.15s;margin-left:-2px}
.doc-toc a:hover{color:var(--brand);border-color:var(--brand)}

/* ---- Списки-галочки и таблица характеристик ---- */
.ticks{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:11px}
.ticks li{position:relative;padding-left:30px;line-height:1.55}
.ticks li strong{color:var(--ink);font-weight:600}
.ticks li::before{content:"";position:absolute;left:0;top:3px;width:19px;height:19px;border-radius:6px;background:var(--green-tint);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F4A3A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");background-size:13px;background-position:center;background-repeat:no-repeat}
.spec{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:15px}
.spec td{padding:12px 0;border-bottom:1px solid var(--line);vertical-align:top}
.spec td:first-child{color:var(--muted);width:42%;font-family:var(--mono);font-size:13px;text-transform:uppercase;letter-spacing:.03em}
.spec td:last-child{color:var(--ink)}

/* ---- Грид-каталог карточек (хаб / категория / провайдер) ---- */
.catalog{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.m-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:var(--shadow-sm);transition:.18s;cursor:pointer}
.m-card:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--brand)}
.m-top{display:flex;align-items:center;gap:12px;margin-bottom:13px}
.m-logo{width:42px;height:42px;border-radius:11px;flex:0 0 auto;display:grid;place-items:center;font-family:var(--mono);font-weight:600;font-size:14px}
.m-card h3{font-size:19px;letter-spacing:-.01em;margin:1px 0 0}
.m-card .benefit{font-size:14px;color:var(--ink-2);line-height:1.5;margin:0 0 16px;flex:1}
.m-meta{display:flex;gap:14px;flex-wrap:wrap;border-top:1px solid var(--line-2);padding-top:13px;font-family:var(--mono);font-size:12px;color:var(--muted)}
.m-meta b{color:var(--ink-2);font-weight:600}
.other-cats{margin-top:34px;padding-top:24px;border-top:1px solid var(--line);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.oc-label{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-right:4px}
.ref-hero{margin-bottom:30px}

@media (max-width:980px){
  .doc{grid-template-columns:1fr;gap:0}
  /* мобильный TOC-аккордеон (turn 7c): вместо скрытия — сворачиваемый блок над контентом */
  .doc-toc{order:-1;position:static;top:auto;margin:0 0 24px;border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:0;gap:0;overflow:hidden}
  .toc-h{margin:0;padding:13px 16px;display:flex;align-items:center;gap:8px;cursor:pointer;color:var(--ink-2);min-height:44px}
  .toc-h::after{content:"";width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:.2s;margin-left:auto}
  .doc-toc.is-open .toc-h::after{transform:rotate(-135deg)}
  .doc-toc a{display:none;padding:11px 16px;border-left:none;margin-left:0;border-top:1px solid var(--line-2)}
  .doc-toc.is-open a{display:block}
  .m-head{gap:16px}.m-logo-lg{width:52px;height:52px;font-size:18px}.catalog{grid-template-columns:1fr 1fr}
}
.toc-count{color:var(--muted)}
/* кнопка «наверх» (turn 7c): 44×44, появляется после 2 экранов */
.to-top{position:fixed;right:18px;bottom:18px;z-index:55;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);box-shadow:var(--shadow);cursor:pointer;display:grid;place-items:center;opacity:0;visibility:hidden;transform:translateY(8px);transition:.2s}
.to-top.is-vis{opacity:1;visibility:visible;transform:none}
.to-top:hover{border-color:var(--brand);color:var(--brand)}
.to-top svg{width:20px;height:20px}
@media (max-width:640px){.catalog{grid-template-columns:1fr}}

/* ============================================================
   LLM-каталог: реальные иконки, copy-ID, бейджи, таблицы, графики
   ============================================================ */

/* ---- Логотип-картинка (реальные логотипы провайдеров) ---- */
.m-logo.has-img,.m-logo-lg.has-img{background:#fff;border:1px solid var(--line);padding:6px}
.m-logo.has-img img,.m-logo-lg.has-img img{width:100%;height:100%;object-fit:contain;display:block}

/* ---- Кнопка «копировать ID» (как в OpenRouter) ---- */
.mdl-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:18px 0 0}
.mdl-copy{display:inline-flex;align-items:center;gap:10px;max-width:100%;flex-wrap:wrap;background:var(--ink-bg);color:#F2ECE0;border:0;border-radius:12px;padding:9px 14px;cursor:pointer;font-family:var(--sans);transition:.15s}
.mdl-copy code{min-width:0;overflow:hidden;text-overflow:ellipsis}
.mdl-copy:hover{filter:brightness(1.14)}
.mdl-copy svg{width:15px;height:15px;flex:0 0 auto;opacity:.8}
.mdl-copy code{font-family:var(--mono);font-size:13px;color:#fff}
.mdl-copy__l{font-size:12.5px;font-weight:600;color:#B8AE9E;white-space:nowrap}
.mdl-copy.is-copied{background:var(--green)}
.mdl-copy.is-copied .mdl-copy__l,.mdl-copy.is-copied svg{color:#fff;opacity:1}

/* ---- Бейджи модели ---- */
.mdl-badges{display:flex;gap:8px;flex-wrap:wrap}
.mdl-badge{font-family:var(--mono);font-size:12px;color:var(--ink-2);background:var(--surface-2);border:1px solid var(--line);padding:5px 11px;border-radius:999px}
.mdl-badge--free{background:var(--green-tint);color:var(--green);border-color:transparent}

/* ---- Таблицы: хаб-интерактив / сравнение провайдера / эндпоинты ---- */
.mdl-table-wrap{margin:0 0 24px}
.mdl-toolbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.mdl-search-input{flex:1;min-width:240px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 16px;font-family:var(--sans);font-size:15px;color:var(--ink);outline:none}
.mdl-search-input:focus{border-color:var(--brand)}
.mdl-tabs{display:flex;gap:7px;flex-wrap:wrap}
.mdl-tab{font-family:var(--sans);font-size:13.5px;font-weight:600;padding:9px 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);cursor:pointer;transition:.15s}
.mdl-tab i{font-style:normal;opacity:.6;margin-left:4px}
.mdl-tab:hover{border-color:var(--ink-2)}
.mdl-tab.is-active{background:var(--brand);color:#FBF7EF;border-color:var(--brand)}
.mdl-tab.is-active i{opacity:.85}
.mdl-toolbar__count{font-size:13.5px;color:var(--muted);font-family:var(--mono)}
.mdl-table-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.mdl-table{width:100%;border-collapse:collapse;font-size:14.5px}
.mdl-table th{text-align:left;font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);padding:13px 16px;border-bottom:1px solid var(--line);white-space:nowrap}
.mdl-table th[data-key]{cursor:pointer;user-select:none}
.mdl-table th[data-key]:hover,.mdl-table th.is-sorted{color:var(--brand)}
.mdl-table td{padding:12px 16px;border-bottom:1px solid var(--line-2);color:var(--ink-2);vertical-align:top}
.mdl-table tbody tr:last-child td{border-bottom:0}
.mdl-table tbody tr:hover{background:var(--surface-2)}
.mdl-table a{color:var(--ink);font-weight:600}
.mdl-table a:hover{color:var(--brand)}
.mdl-td-prov a{color:var(--ink-2);font-weight:400}
.mdl-td-date{color:var(--muted);white-space:nowrap}

/* ---- Графики-бары (скорость/цена по провайдерам) ---- */
.mdl-bars{display:flex;flex-direction:column;gap:9px;margin:6px 0 22px}
.mdl-bar{display:grid;grid-template-columns:140px 1fr 74px;align-items:center;gap:12px;font-size:13.5px}
.mdl-bar__l{color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mdl-bar__track{height:9px;background:var(--surface-2);border-radius:999px;overflow:hidden}
.mdl-bar__fill{display:block;height:100%;background:var(--brand);border-radius:999px}
.mdl-bars--price .mdl-bar__fill{background:var(--green)}  /* цена инвертирована: ниже=длиннее, зелёный */
.mdl-bar__v{font-family:var(--mono);font-size:12.5px;color:var(--ink-2);text-align:right}
@media (max-width:640px){.mdl-bar{grid-template-columns:96px 1fr 60px;gap:8px}}

/* ============================================================
   Прозовые разделы (промпты/процессы/статьи): markdown -> academy_new
   ============================================================ */
.doc-main h3{font-family:var(--serif);font-weight:400;font-size:20px;letter-spacing:-.01em;color:var(--ink);margin:26px 0 12px}
.doc-main ul.md-list,.doc-main ol.md-list{margin:0 0 18px;padding-left:22px;display:flex;flex-direction:column;gap:8px}
.doc-main .md-list li{line-height:1.6}
.doc-main blockquote{margin:0 0 18px;padding:12px 18px;border-left:3px solid var(--brand);background:var(--surface-2);border-radius:0 10px 10px 0;color:var(--ink-2)}
.doc-main pre.md-code{background:var(--ink-bg);color:#F2ECE0;border-radius:12px;padding:18px;overflow-x:auto;margin:0 0 20px;font-family:var(--mono);font-size:13.5px;line-height:1.6}
.prompt-banner{position:relative;overflow:hidden;background:var(--brand);color:#FBF7EF;border-radius:16px;padding:28px;margin:0 0 26px;min-height:96px;display:flex;align-items:flex-end}
.prompt-banner .pb-t{font-family:var(--serif);font-weight:400;font-size:23px;letter-spacing:-.01em}
.prompt-block{background:var(--ink-bg);border-radius:16px;overflow:hidden;margin:0 0 24px;box-shadow:var(--shadow)}
.prompt-head{display:flex;align-items:center;justify-content:space-between;padding:13px 18px;border-bottom:1px solid rgba(255,255,255,.1)}
.prompt-label{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#B8AE9E}
.prompt-copy{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.1);border:0;color:#F2ECE0;padding:7px 13px;border-radius:999px;font-family:var(--sans);font-size:13px;font-weight:600;cursor:pointer;transition:.15s}
.prompt-copy svg{width:15px;height:15px}
.prompt-copy:hover{background:rgba(255,255,255,.18)}
.prompt-copy.copied{background:var(--green);color:#fff}
.prompt-body{margin:0;padding:20px;font-family:var(--mono);font-size:13.5px;line-height:1.7;color:#F2ECE0;white-space:pre-wrap;word-break:break-word}

/* ---- Статьи/гайды: байлайн, мнение редакции, картинки в тексте ---- */
.article-byline{font-size:14px;color:var(--muted);margin:0 0 24px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.doc-main img,.wrap-narrow img{max-width:100%;height:auto;border-radius:12px;border:1px solid var(--line);margin:6px 0 12px;display:block}
.editorial{margin:26px 0;padding:20px 22px;background:var(--surface-2);border:1px solid var(--line);border-left:3px solid var(--brand);border-radius:0 12px 12px 0}
.editorial__h{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--brand);margin:0 0 8px}

/* ---- Клиентский поиск-справочник (hero хаба): поле-пилюля + выпадашка ---- */
.eng-search-wrap{position:relative;max-width:560px;margin:0 0 14px}
.eng-search{width:100%;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:14px 20px 14px 46px;font-family:var(--sans);font-size:15.5px;color:var(--ink);outline:none;box-shadow:var(--shadow-sm);transition:.15s}
.eng-search::placeholder{color:var(--muted)}
.eng-search:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)}
.eng-search-wrap .ic{position:absolute;left:17px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--muted);pointer-events:none}
.eng-search-wrap .kbd{position:absolute;right:16px;top:50%;transform:translateY(-50%);font-family:var(--mono);font-size:11px;color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:2px 7px;pointer-events:none}
.eng-search-results{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:40;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);padding:6px;display:none;max-height:60vh;overflow-y:auto}
.eng-search-results.is-open{display:block}
.eng-sr-item{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 14px;border-radius:11px;text-decoration:none}
.eng-sr-item:hover,.eng-sr-item.is-active{background:var(--surface-2)}
.eng-sr-t{color:var(--ink);font-size:14.5px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eng-sr-s{flex:0 0 auto;font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}

/* ---- Успех формы = допродажа (turn 6b): зелёная карточка + CTA на курс/телеграм ---- */
.eng-form-success{background:var(--green-tint);border:1px solid rgba(31,74,58,.2);border-radius:var(--radius-lg,22px);padding:26px 28px;text-align:left}
.eng-form-success h2,.eng-form-success h3{font-family:var(--serif);font-weight:400;color:var(--green);font-size:22px;margin:0 0 8px}
.eng-form-success p{color:var(--ink-2);font-size:15px;margin:0 0 18px;line-height:1.55}
.eng-fs-cta{display:flex;gap:10px;flex-wrap:wrap}

/* ---- Клиентский фильтр каталога (вариант A): чипы + поиск + счётчик + пустое состояние ---- */
.eng-flt-bar{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin:0 0 10px}
.eng-flt{font-family:var(--sans);font-size:13.5px;font-weight:600;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);cursor:pointer;transition:.15s}
.eng-flt:hover{border-color:var(--ink-2)}
.eng-flt.is-active{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.eng-flt-search{flex:1;min-width:200px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:9px 16px;font-family:var(--sans);font-size:14.5px;color:var(--ink);outline:none;transition:.15s}
.eng-flt-search:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)}
.eng-flt-count{font-family:var(--mono);font-size:12.5px;color:var(--muted);margin:0 0 18px}
.eng-flt-count.is-zero{color:var(--error)}
.eng-empty{border:1px dashed var(--line);border-radius:16px;padding:34px 24px;text-align:center;color:var(--muted);margin:4px 0 24px}
.eng-empty h3{font-family:var(--serif);font-weight:400;font-size:22px;color:var(--ink);margin:0 0 8px}

/* ---- Плюсы/Минусы — единый блок каталогов (цвета из токенов, семантика: зелёный=плюс, красный=минус) ---- */
.pros-cons{display:flex;gap:24px;flex-wrap:wrap;margin:8px 0 4px}
.pc-col{flex:1;min-width:240px}
.pc-h{font-weight:700;margin:0 0 6px}
.pc-h.is-pro{color:var(--green)}
.pc-h.is-con{color:var(--error)}

/* ---- Капсула «Коротко» — единый блок первого абзаца (статьи/сравнения/модели). Контракт korotko.py + speakable ---- */
.eng-korotko{background:var(--brand-tint-2);border-left:3px solid var(--brand);border-radius:8px var(--radius) var(--radius) 8px;padding:14px 18px;margin:0 0 22px;font-size:16px;line-height:1.6;color:var(--ink-2)}
.eng-korotko strong{color:var(--ink);font-weight:600}
.eng-korotko>:last-child{margin-bottom:0}

/* ============================================================
   Курс: admonitions, таблицы, интерактивный квиз, peek-grid
   ============================================================ */
.adm{margin:0 0 20px;border:1px solid var(--line);border-left:3px solid var(--ink-3);border-radius:0 12px 12px 0;background:var(--surface);overflow:hidden}
.adm-h,.adm>summary{font-weight:600;font-size:14px;color:var(--ink);padding:12px 18px;margin:0;background:var(--surface-2)}
.adm-b{padding:14px 18px}
.adm-b>:first-child{margin-top:0}.adm-b>:last-child{margin-bottom:0}
.adm-note,.adm-info{border-left-color:#4A6FA5}
.adm-tip{border-left-color:var(--green)}
.adm-abstract,.adm-summary{border-left-color:var(--gold)}
.adm-example,.adm-question{border-left-color:var(--brand)}
.adm-warning,.adm-danger{border-left-color:#C2410C}
details.adm>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px}
details.adm>summary::-webkit-details-marker{display:none}
details.adm>summary::before{content:"+";font-family:var(--mono);color:var(--brand);font-weight:700}
details.adm[open]>summary::before{content:"–"}
.doc-main .adm-b>p:first-child,.wrap-narrow .adm-b>p:first-child{margin-top:0}

/* markdown-таблицы (уроки) */
.md-tablewrap{overflow-x:auto;margin:0 0 20px;border:1px solid var(--line);border-radius:12px}
.md-table{width:100%;border-collapse:collapse;font-size:15px}
.md-table th{text-align:left;background:var(--surface-2);color:var(--ink);font-weight:600;padding:11px 16px;border-bottom:1px solid var(--line)}
.md-table td{padding:11px 16px;border-bottom:1px solid var(--line-2);color:var(--ink-2);vertical-align:top}
.md-table tbody tr:last-child td{border-bottom:0}

/* интерактивный квиз «Проверьте себя» */
.eng-quiz{margin:0 0 22px;padding:22px;background:var(--surface);border:1px solid var(--line);border-radius:16px}
.eng-quiz__q{margin:0 0 18px}
.eng-quiz__qtitle{font-weight:600;color:var(--ink);margin:0 0 10px}
.eng-quiz__opt{display:flex;align-items:flex-start;gap:10px;padding:9px 12px;border:1px solid var(--line);border-radius:10px;margin:0 0 7px;cursor:pointer;transition:.12s;font-size:15px;color:var(--ink-2)}
.eng-quiz__opt:hover{border-color:var(--ink-3)}
.eng-quiz__opt input{margin-top:3px}
.eng-quiz__opt.is-correct{background:var(--green-tint);border-color:var(--green);color:var(--green)}
.eng-quiz__opt.is-wrong{background:var(--error-tint);border-color:var(--error);color:var(--error)}
.eng-quiz__exp{font-size:14px;color:var(--ink-2);background:var(--surface-2);border-radius:8px;padding:10px 12px;margin:8px 0 0}
.eng-quiz__check{margin-top:6px;background:var(--brand);color:#FBF7EF;border:0;border-radius:999px;padding:11px 22px;font-family:var(--sans);font-size:14px;font-weight:600;cursor:pointer}
.eng-quiz__check:hover{filter:brightness(1.05)}
.eng-quiz__result{font-weight:600;margin:14px 0 0;font-size:15.5px}
.eng-quiz__result.is-pass{color:var(--green)}.eng-quiz__result.is-partial{color:var(--gold-700)}

/* peek-grid (хабы-треки/курс) + навигация урока */
.peek-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:8px 0 24px}
.peek-card{display:flex;flex-direction:column;gap:6px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px 22px;transition:.16s}
.peek-card:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--brand)}
.peek-card__t{font-family:var(--serif);font-weight:400;font-size:19px;letter-spacing:-.01em;color:var(--ink)}
.peek-card__d{font-size:14px;line-height:1.5;color:var(--ink-2)}
.peek-card__p{font-size:13px;color:var(--muted);font-family:var(--mono)}
.lesson-nav{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:30px 0 0;padding-top:20px;border-top:1px solid var(--line);font-size:14px}
.ln-side{display:flex;flex-direction:column;gap:3px;max-width:48%}
.ln-side.ln-next{text-align:right;margin-left:auto}
.ln-k{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--muted)}
.ln-t{font-size:14.5px;font-weight:600;color:var(--ink)}
.ln-side:hover .ln-t{color:var(--brand)}
@media (max-width:640px){.peek-grid{grid-template-columns:1fr}.md-table{font-size:13.5px}}

/* ---- Курс: плеер урока — дерево глав + прогресс (макет 4a) ---- */
.kurs-doc{max-width:var(--wrap);margin:0 auto;padding:0 32px;display:grid;grid-template-columns:300px 1fr;gap:52px;align-items:start}
.kurs-tree{position:sticky;top:86px;border:1px solid var(--line);border-radius:16px;background:var(--surface);overflow:hidden}
.kt-toggle{display:none}
.kt-head{padding:18px 18px 16px;border-bottom:1px solid var(--line-2)}
.kt-prog{margin-top:12px}
.kt-prog-bar{height:6px;background:var(--surface-2);border-radius:999px;overflow:hidden;margin-bottom:8px}
.kt-prog-bar span{display:block;height:100%;background:var(--brand);border-radius:999px;transition:width .3s}
.kt-prog-l{font-family:var(--mono);font-size:12px;color:var(--muted)}
.kt-nav{padding:10px 8px 12px;max-height:calc(100vh - 190px);overflow-y:auto}
.kt-chap-t{display:block;padding:9px 12px;font-weight:600;font-size:14px;color:var(--ink);border-radius:9px}
.kt-chap-t:hover{background:var(--surface-2)}
.kt-lessons{display:none;padding:0 0 6px}
.kt-chap.is-open .kt-lessons{display:block}
.kt-lesson{display:flex;align-items:center;gap:9px;padding:8px 12px 8px 14px;font-size:13.5px;color:var(--muted);border-radius:9px;line-height:1.35}
.kt-lesson:hover{color:var(--ink);background:var(--surface-2)}
.kt-lesson.is-active{color:var(--ink);font-weight:600;background:var(--brand-tint-2);box-shadow:inset 3px 0 0 var(--brand)}
.kt-check{flex:0 0 auto;width:15px;height:15px;border:1.5px solid var(--line);border-radius:50%;background-position:center;background-repeat:no-repeat;background-size:9px}
.kt-lesson.is-done .kt-check{background-color:var(--green);border-color:var(--green);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FBF7EF' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
.kt-test{display:flex;align-items:center;gap:9px;padding:12px;margin-top:6px;border-top:1px solid var(--line-2);font-weight:600;font-size:13.5px;color:var(--gold-700)}
.kt-test.is-active{background:var(--gold-tint)}
.kt-check--gold{border-color:var(--gold)}
@media (max-width:980px){
  .kurs-doc{grid-template-columns:1fr;gap:0}
  .kurs-tree{position:static;margin:0 0 24px}
  .kt-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;padding:14px 16px;border:0;background:none;font-family:var(--sans);font-weight:600;font-size:14px;color:var(--ink);cursor:pointer;min-height:44px}
  .kt-cv{width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:.2s}
  .kurs-tree.kt-open .kt-cv{transform:rotate(-135deg)}
  .kt-head,.kt-nav{display:none}
  .kurs-tree.kt-open .kt-head,.kurs-tree.kt-open .kt-nav{display:block}
}

/* ============================================================
   Лендинги-витрины разделов (курс и др.): герой + enroll + программа
   ============================================================ */
.course-hero{display:grid;grid-template-columns:1.3fr .7fr;gap:48px;align-items:start}
.course-meta-row{display:flex;gap:30px;padding-top:24px;border-top:1px solid var(--line);flex-wrap:wrap}
.cm-n{font-size:28px;font-weight:700;letter-spacing:-.03em;color:var(--ink)}
.cm-l{font-size:13px;color:var(--muted);margin-top:2px}
.enroll-card{padding:28px;position:sticky;top:90px;background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}
.enroll-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.enroll-price{font-size:38px;font-weight:800;letter-spacing:-.03em;color:var(--ink)}
.enroll-price span{font-size:14px;font-weight:500;color:var(--muted);letter-spacing:0}
.enroll-list{list-style:none;padding:0;margin:20px 0 22px}
.enroll-list li{position:relative;padding-left:28px;margin-bottom:12px;font-size:15px;color:var(--ink-2)}
.enroll-list li::before{content:"";position:absolute;left:0;top:3px;width:17px;height:17px;border-radius:5px;background:var(--green-tint);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F4A3A' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");background-size:11px;background-position:center;background-repeat:no-repeat}
.enroll-note{font-size:13px;color:var(--muted);margin:16px 0 0;line-height:1.5}
.out-ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:var(--green-tint);color:var(--green)}
.out-ic svg{width:22px;height:22px}
.who-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:26px;box-shadow:var(--shadow-sm)}
.who-card p{color:var(--ink-2);font-size:15px;margin:10px 0 0;line-height:1.5}
.course-prog-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:start}
.prog-list{border-top:1px solid var(--line)}
.prog-item{display:flex;align-items:flex-start;gap:18px;padding:20px 6px;border-bottom:1px solid var(--line);transition:.15s}
.prog-item:hover{padding-left:14px;background:var(--surface)}
.prog-num{font-family:var(--mono);font-size:13px;color:var(--brand);font-weight:600;flex:0 0 auto;padding-top:2px}
.prog-body{flex:1;min-width:0}
.prog-t{font-size:18px;font-weight:600;letter-spacing:-.01em;color:var(--ink);margin:0}
.prog-d{font-size:14.5px;color:var(--ink-2);margin:4px 0 0;line-height:1.5}
.prog-meta{font-size:12.5px;color:var(--muted);flex:0 0 auto;font-family:var(--mono);padding-top:3px}
.dark-section{background:linear-gradient(160deg,#2a2114,#1a160f)}
@media (max-width:980px){.course-hero,.course-prog-grid{grid-template-columns:1fr}.enroll-card{position:static}}

/* ---- Мобильное меню (бургер) ---- */
.nav-burger{display:none;width:42px;height:42px;border:1px solid var(--line);border-radius:11px;background:var(--surface);cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0;flex:0 0 auto}
.nav-burger span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;transition:.2s}
.site-header.nav-open .nav-burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.site-header.nav-open .nav-burger span:nth-child(2){opacity:0}
.site-header.nav-open .nav-burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media (max-width:980px){
  .site-header{position:relative}
  .nav-burger{display:flex}
  .site-header.nav-open .nav-links{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:2px;margin:0;background:var(--surface);border-bottom:1px solid var(--line);box-shadow:var(--shadow);padding:10px 24px 16px;z-index:60}
  .site-header.nav-open .nav-links a{padding:13px 12px;font-size:16px;border-radius:10px}
}

/* ---- Шапка: без переноса пунктов + «Ещё»-выпадашка (вариант C) ---- */
.nav-links a{white-space:nowrap}
.nav-more{position:relative;display:flex;align-items:center}
.nav-more-btn{display:inline-flex;align-items:center;gap:5px;background:none;border:0;cursor:pointer;font:inherit;color:var(--ink);padding:8px 10px;border-radius:9px;white-space:nowrap}
.nav-more-btn:hover,.nav-more-btn.active{color:var(--brand-700)}
.nav-more-menu{position:absolute;top:calc(100% + 8px);left:0;display:none;flex-direction:column;min-width:184px;background:var(--paper);border:1px solid var(--line);border-radius:13px;box-shadow:var(--shadow);padding:6px;z-index:60}
/* невидимый мост над меню: без него :hover рвётся в 8px-щели между кнопкой «Ещё» и меню, и оно схлопывается по пути вниз */
.nav-more-menu::before{content:"";position:absolute;top:-9px;left:0;right:0;height:10px}

/* ---- Заголовки категорий в хабе промптов: было margin:0 - секции слипались ---- */
.p-h2{margin:36px 0 16px}
.p-h2:first-of-type{margin-top:10px}

/* ---- Карточки на узких экранах: 22px паддинга съедали слишком много из 335px ---- */
@media (max-width:640px){
  .m-card{padding:18px}
  .m-cvr{margin:-18px -18px 14px}
}

/* ---- Плашка-глиф карточки без обложки (промпты >_, процессы ⚙) ---- */
.m-plate{width:42px;height:42px;border-radius:11px;flex:0 0 auto;background:var(--surface-2);border:1px solid var(--line-2);display:grid;place-items:center;font-family:var(--mono);font-weight:700;font-size:15px;color:var(--brand-700)}

/* ---- Карточка материала v2: обложка статьи + кламп описания + «Читать» ---- */
.m-cvr{margin:-22px -22px 16px;aspect-ratio:16/9;overflow:hidden;background:var(--surface-2);border-radius:16px 16px 0 0;border-bottom:1px solid var(--line-2)}
.m-cvr img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.m-card:hover .m-cvr img{transform:scale(1.04)}
.m-card .benefit{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.m-meta .m-go{margin-left:auto;color:var(--brand-700);font-weight:600;letter-spacing:0;text-transform:none;font-family:inherit;font-size:13px}

/* ---- Призыв в шапке раздела: кнопки + строка фактов (замена карточек «зачем/что/как») ---- */
.hub-cta{display:flex;align-items:center;gap:8px 18px;flex-wrap:wrap;margin:20px 0 2px}
.hub-facts{display:flex;flex-wrap:wrap;gap:8px 22px;margin:16px 0 26px;font-size:14.5px;color:var(--muted)}
/* span=flex: при переносе строка выравнивается под текстом, а не под галочкой */
.hub-facts span{display:flex;align-items:baseline;gap:8px}
.hub-facts span::before{content:"✓";color:var(--brand-700);font-weight:700}
.nav-more:hover .nav-more-menu,.nav-more:focus-within .nav-more-menu{display:flex}
.nav-more-menu a{padding:10px 13px;border-radius:9px;white-space:nowrap;font-size:15px;color:var(--ink)}
.nav-more-menu a:hover,.nav-more-menu a.active{background:var(--surface);color:var(--brand-700)}
@media (max-width:980px){
  .site-header.nav-open .nav-more{flex-direction:column;align-items:stretch;width:100%}
  .site-header.nav-open .nav-more-btn{display:none}
  .site-header.nav-open .nav-more-menu{display:flex;position:static;border:0;box-shadow:none;padding:0;min-width:0;background:none}
  .site-header.nav-open .nav-more-menu a{padding:13px 12px;font-size:16px;border-radius:10px}
}

/* ---- Мобильная шапка: CTA уезжают в бургер-меню (фикс горизонтального скролла на телефонах) ---- */
.nav-sheet-cta{display:none}
@media (max-width:640px){
  .nav-cta .btn{display:none}
  .site-header.nav-open .nav-sheet-cta{display:flex;flex-direction:column;gap:10px;margin-top:8px;padding-top:14px;border-top:1px solid var(--line)}
  .site-header.nav-open .nav-sheet-cta .btn{width:100%;justify-content:center}
}

/* ---- Оглавление статьи (.eng-toc): рендерит build_articles при >=3 H2, якоря от md.py ---- */
.eng-toc{margin:6px 0 26px;padding:14px 20px 16px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.eng-toc summary{cursor:pointer;font-weight:600;font-size:14.5px;color:var(--ink);list-style:none;display:flex;align-items:center;user-select:none}
.eng-toc summary::-webkit-details-marker{display:none}
.eng-toc summary::after{content:"";width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg);margin-left:auto;opacity:.5;transition:transform .18s ease}
.eng-toc[open] summary::after{transform:rotate(-135deg)}
.eng-toc ol{margin:10px 0 0;padding-left:20px;font-size:14.5px;line-height:1.8;color:var(--ink-2)}
.eng-toc li{margin:2px 0}
.eng-toc a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line)}
.eng-toc a:hover{color:var(--brand);border-color:var(--brand)}
article h2[id],article h3[id]{scroll-margin-top:76px}