/* Раздел «API для разработчиков» + публичная страница /api — вёрстка по макетам
   П34 (Клод Дизайн, светлая тема: холст 13 — Обзор и публичная /api, холст 20 —
   Ключи · Использование · Подключение · Прайс, холст 25 — телефон 390).

   ═══ ЗАЧЕМ ОТДЕЛЬНЫЙ ФАЙЛ ═══════════════════════════════════════════════════
   Тот же приём, что у «Аудио»: ai.css уже 250 КБ, а раздел новый и правится часто.
   Файл грузится ДВУМЯ путями и это важно помнить при каждой правке:
     1) в кабинете  — лениво, вместе с api.js, ПОСЛЕ ai.css (см. догрузитьРаздел);
     2) на странице /api — как ЕДИНСТВЕННЫЙ стиль отдельного серверного документа,
        где ai.css нет вообще. Поэтому внизу файла живёт блок «публичная страница»
        со своим сбросом и своими шрифтами.

   ═══ ИМЕНА ═════════════════════════════════════════════════════════════════
   Всё своё — с приставкой «ap»: в продукте короткие имена (.card, .lbl, .tbl,
   .hint, .mono, .top …) заняты и приезжают чужими свойствами (грабля «Аудио»
   23.08.2026). Страж smoke: каждый селектор файла содержит «.ap…» или «.pane.api».

   ═══ ЧТО БЕРЁМ ГОТОВЫМ ИЗ ai.css (НЕ переопределять) ════════════════════════
   .modal .mbox .mhead .mclose .istats .istat .gbtn .btn2 .note .pill — они уже
   есть. Там, где макет расходится с продуктом, ниже стоят ТОЧЕЧНЫЕ правки,
   ограниченные нашей областью: .pane.api (кабинет), .apdoc/.apdpage (публичная
   страница), .apmodal (наши окна — они живут в body, вне pane).
   ⚠️ .note.warn у продукта КРАСНАЯ, в макете — янтарная. Правим только у себя.
   ⚠️ .gbtn у продукта display:block;width:100% — у нас inline-flex, ширину
   возвращает .wide.
   ⚠️ Цвета — ТОЛЬКО токенами (лист стиля П34, светлая тема): мелкие ссылки
   и подписи оранжевым — --primary-ink, заливка кнопки — --primary-fill,
   подложки состояний — --*-soft, рамки состояний — color-mix от токена.
   Графитовые островки (код, «Свой код») — --ink / --on-ink / --ink-muted.

   ═══ РЕШЕНИЯ ДИЗАЙНА П34, ЗАКРЕПЛЁННЫЕ ЗДЕСЬ ═══════════════════════════════
   • Заголовки h1/h2 — Montserrat 800 обычным регистром; кикеры — капс .6rem.
   • Пилюли навигации — белые с рамкой, активная графит (--ink/--on-ink).
   • Карточки — белые (--surface), радиус 20, рамка --border, тень --sh-lo;
     врезки внутри — --surface-2. Тёмное — только код (--ink).
   • Полоса лимита — 6 px, радиус 3, оранжевая на --surface-2; подпись НАД ней
     одной строкой; ≥ 80 % — янтарь, исчерпан — красный; без лимита — без дорожки.
   • Телефон 390: пилюли в прокрутку, липкая «Создать ключ» на «Ключах»,
     мишени ≥ 44 px, поля ввода 16 px; нижнюю панель сайта НЕ трогаем.
*/


/* ═══════════════════════════════════════════════════════════════════════════
   1. РАСКЛАДКА ВКЛАДКИ И ЛОКАЛЬНЫЕ ТОКЕНЫ
   ═══════════════════════════════════════════════════════════════════════════
   ⚠️ У .pane.api НЕТ свойства display. В ai.css ниже по файлу стоит
   .pane[hidden]{display:none} — тот же вес (0,2,0), а api.css грузится ПОЗЖЕ,
   значит наш display выиграл бы и раздел был бы виден всегда. Задаём только
   колонки. Прятание остаётся за атрибутом hidden. */
/* ⚠️ Токен моноширинного шрифта в ai.css НЕ объявлен, а раздел им пользуется
   (маски ключей, адреса, блоки кода). Объявляем на корне раздела: публичная
   страница объявляет свой в body.apdpage — она грузит только этот файл. */
.pane.api{--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
/* Янтарь (--warn/--warn-soft) объявлен в :root ai.css вместе с тёмной парой;
   здесь только непрозрачная подложка окон и моноширинный шрифт для .apmodal
   (окна живут в body, вне вкладки). */
.pane.api,.mbox.apmodal{--поп:var(--surface);
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.pane.api{grid-template-columns:minmax(0,1fr)}
/* Страховка для детей: одноклассовые правила раздела не должны перебивать hidden. */
.pane.api [hidden]{display:none!important}
/* И для самой вкладки — вес (0,3,0), поверх любой нашей раскладки. */
.pane.api[hidden]{display:none!important}
/* Детям гридов — min-width:0, иначе длинный ключ, адрес или строка кода
   распирают колонку и вкладка едет вбок. Бьём точечно по своим контейнерам,
   а не звёздочкой: сплошной min-width:0 гасит и осмысленные ограничения ai.css. */
.pane.api > *{min-width:0}
.apgrid2 > *,.apthree > *,.apsteps3 > *,.aptiles > *,
.apkey > *,.aprow2 > *,.apnote > *,.apaddr > *,.apstep > *,.apshare > *,
.apbarline > *,.apinkrows > *,.aphead > *,
.pane.api .istats > *,.apdoc .istats > *{min-width:0}


/* ═══════════════════════════════════════════════════════════════════════════
   2. ШАПКА ЭКРАНА И НАВИГАЦИЯ
   ═══════════════════════════════════════════════════════════════════════════ */
.aphead{display:flex;align-items:flex-start;gap:14px;margin:0 0 16px;flex-wrap:wrap}
.aphead .aphl{flex:1 1 320px}
.aphead h1{font-family:var(--head);font-weight:800;text-transform:none;letter-spacing:-.01em;
  font-size:clamp(1.55rem,2.6vw,2.1rem);margin:0;line-height:1.1}
.aphead .apsub{font-size:.92rem;color:var(--muted);margin:6px 0 0;line-height:1.5;
  text-wrap:pretty;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.aphead .apr{margin-left:auto;display:flex;gap:8px;align-items:center;
  flex-wrap:wrap;padding-top:4px}
/* Чип в подписи («Кошелёк общий с сайтом и ботом») — нейтральный, не оранжевый. */
.aptag.apchip{background:var(--surface);font-size:.72rem}

/* Навигация раздела: Обзор · Ключи · Использование · Подключение · Прайс.
   Белые пилюли с рамкой, активная — графит (лист стиля П34). */
.apnav{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding-bottom:16px;
  border-bottom:1px solid var(--border);margin-bottom:20px}
.pane.api .apnav .aptag,.pane.api .apnav .pill{display:inline-flex;align-items:center;
  min-height:36px;padding:0 15px;border-radius:999px;font:600 .84rem var(--font);
  letter-spacing:0;text-transform:none;white-space:nowrap}
.pane.api .apnav .aptag{background:var(--surface);color:var(--text);border:1px solid var(--border)}
.pane.api .apnav .aptag:hover{background:var(--surface-2);border-color:var(--border-hi)}
.pane.api .apnav .pill{background:var(--ink);color:var(--on-ink);border:1px solid var(--ink)}


/* ═══════════════════════════════════════════════════════════════════════════
   3. ПЕРВОКИРПИЧИКИ
   ═══════════════════════════════════════════════════════════════════════════ */
/* Кикер блока — капс .6rem, единственный капс в разделе. */
.aplbl{font-family:var(--head);font-weight:800;font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);margin:0 0 9px;display:flex;
  align-items:center;gap:10px}
.aplbl em{margin-left:auto;font-style:normal;font-family:var(--font);font-weight:400;
  letter-spacing:0;text-transform:none;font-size:.72rem}
.aphgroup{font-family:var(--head);font-weight:800;font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);margin:0 0 8px}

/* Карточка: белая, радиус 20, тень --sh-lo. Заголовок карточки — Montserrat 800
   обычным регистром, справа мелкая подпись или ссылка. */
.apcard{border-radius:20px;border:1px solid var(--border);
  background:var(--surface);padding:18px 20px;box-shadow:var(--sh-lo)}
.apcardhd{display:flex;align-items:baseline;gap:8px 14px;flex-wrap:wrap;margin:0 0 12px}
.apcardhd h3{font-family:var(--head);font-weight:800;text-transform:none;letter-spacing:-.01em;
  font-size:1.05rem;margin:0;line-height:1.2}
.apcardhd em{margin-left:auto;font-style:normal;font-size:.76rem;color:var(--faint);
  font-variant-numeric:tabular-nums;text-align:right}
.apcardhd .aplink{margin-left:auto}
/* Заголовок блока страницы (не карточки): те же слова, но крупнее и с отступом. */
.apsecthd{margin:26px 0 12px}
.apsecthd h3{font-size:1.2rem}
.aph3{font-family:var(--head);font-weight:800;text-transform:none;letter-spacing:-.01em;
  font-size:1.05rem;margin:0 0 6px}
.apcard .apsub{font-size:.88rem;color:var(--muted);margin:0 0 14px;line-height:1.5;text-wrap:pretty}
.apcenter{text-align:center;padding:34px 24px}
.apcenter .apsub{margin-bottom:16px}
.apcentertext{text-align:center;margin-top:14px}

.aphint{font-size:.76rem;color:var(--faint);margin:8px 0 0;line-height:1.5;text-wrap:pretty}
.aphint.apnote2{margin-top:14px;font-size:.8rem}
.aphint.apoferta{margin-top:18px;font-size:.8rem;max-width:var(--текст-колонка,68ch)}
.aphint.apoferta a{color:var(--primary-ink)}
.apmono{font-family:var(--mono);font-style:normal}
.apnum{font-variant-numeric:tabular-nums;text-align:right}
.apfmt{display:block;font-size:.7rem;color:var(--faint);margin-top:2px}
.apempty{margin:0;font-size:.88rem;color:var(--muted)}
.apempty.apnext{margin-top:8px;font-size:.84rem}
.apmore{margin:12px 0 0;font-size:.86rem}
.apmore a{font-weight:600;color:var(--primary-ink);cursor:pointer;text-decoration:none}
.apmore a:hover{color:var(--primary-h)}
/* На Обзоре «Все ключи · N →» — не абзац между карточками, а подвал списка
   ключей (находка 22: ссылка висела без носителя). Рамка сплошная: пунктир в
   продукте значит «сюда бросить / пусто», а не «ссылка» (круг 2, находка 19). */
.apobzor .apkeys + .apmore{margin:10px 0 0;padding:11px 16px;border-radius:14px;
  border:1px solid var(--border);background:var(--surface);text-align:center;min-height:44px;
  display:flex;align-items:center;justify-content:center}
.apafter{margin-top:11px}
.aptags{display:flex;gap:7px;flex-wrap:wrap}
/* Окно «Лимит и модели», режим «Только выбранные» (круг 2, I9): шапка блока —
   счётчик «выбрано N из M» слева и поиск справа; облако из ~70 капсул живёт в
   своей прокрутке не выше 38vh с тонкой полосой, снизу — затухание в цвет окна
   (.scroll ставит апОтметитьОблако, .end гасит у конца). Раньше капсулы
   растягивали окно до 88dvh, и «Сохранить/Отмена» уходили за нижний край. */
.apchoosehd{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.apchoosehd .aplbl{margin:0;white-space:nowrap}
.apchoosehd .apfld{flex:1 1 180px;min-width:0}
.apcloud{position:relative}
.apcloud .aptags{max-height:38vh;overflow:auto;padding:2px 2px 6px 0;
  scrollbar-width:thin;scrollbar-color:var(--border-hi) transparent}
.apcloud::after{content:'';position:absolute;left:0;right:12px;bottom:0;height:34px;
  background:linear-gradient(to bottom,transparent,var(--surface));pointer-events:none;
  opacity:0;transition:opacity var(--tr)}
.apcloud.scroll::after{opacity:1}
.apcloud.scroll.end::after{opacity:0}

/* Текстовая ссылка-действие: оранжевая, без подчёркивания; .dg — опасная. */
.aplink{display:inline;background:none;border:0;padding:0;font:inherit;font-size:.86rem;
  font-weight:600;color:var(--primary-ink);cursor:pointer;text-decoration:none;
  transition:var(--tr-ui)}
.aplink:hover{color:var(--primary-h)}
/* Опасная ссылка отличается от фирменной не только тоном (--danger и
   --primary-ink на глаз соседи — находка 26): значок «отзыв» перед словом
   и подчёркивание при наведении. */
.aplink.dg{color:var(--danger);display:inline-flex;align-items:center;gap:5px}
.aplink.dg:hover{color:var(--danger);text-decoration:underline;text-underline-offset:3px}
.aplink.dg .apic{width:14px;height:14px}

.apic{width:15px;height:15px;flex:none;vertical-align:-3px}
.apic.ok{color:var(--good)}
.apic.b{width:16px;height:16px}

/* Поле ввода в окнах: белое, радиус 12, 16 px на телефоне (иначе iOS зумит). */
.apfld{border-radius:12px;border:1px solid var(--border-hi);background:var(--surface);
  padding:11px 13px;font:inherit;font-size:.9rem;color:var(--text);line-height:1.4;
  outline:none;transition:var(--tr-ui)}
.apfld:focus{border-color:var(--primary)}
.apfld:focus-visible,.apsumbox:focus-within{outline:none;border-color:var(--primary)}
.apsum:focus-visible{outline:none}
.apfld.wide{width:100%;display:block;margin-bottom:10px}
.apsumbox{width:140px;display:inline-flex;align-items:center;gap:6px}
.apsumbox.off{opacity:.45}
.apsumbox .apsum{flex:1;min-width:0;background:none;border:0;outline:none;color:var(--text);
  font:inherit;font-size:.9rem;font-weight:600;padding:0}
.apsumbox s{text-decoration:none;color:var(--faint);font-size:.78rem}
.aplimrow{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* Кнопка-«ещё» (⋯) у карточки ключа. */
.apdots{width:38px;height:38px;border-radius:12px;border:1px solid var(--border);
  background:var(--surface);display:grid;place-items:center;color:var(--muted);
  font-size:1rem;line-height:1;flex:none;cursor:pointer;padding:0;
  transition:var(--tr-ui)}
.apdots:hover{color:var(--text);border-color:var(--border-hi);background:var(--surface-2)}

/* Опасное действие («Отозвать» в окне подтверждения). */
.apbtnd{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 16px;border-radius:12px;border:1px solid color-mix(in srgb,var(--danger) 44%,transparent);
  background:var(--danger-soft);color:var(--danger);font:inherit;font-size:.86rem;font-weight:600;
  white-space:nowrap;cursor:pointer;transition:var(--tr-ui)}
.apbtnd:hover{border-color:var(--danger)}
.apbtnd.wide{width:100%}

/* Кружок-значок приложения (Claude, ChatGPT, свой код). Буква — Montserrat. */
.applug{width:44px;height:44px;border-radius:50%;border:1px solid var(--border);
  background:var(--surface-2);display:grid;place-items:center;color:var(--text);flex:none;
  font-family:var(--head);font-weight:800;font-size:1rem}
.applug svg{width:20px;height:20px}
.applug.sm{width:36px;height:36px}
.applug.sm svg{width:17px;height:17px}
.applug.ink{background:var(--ink-2);border-color:color-mix(in srgb,var(--on-ink) 14%,transparent);
  color:var(--on-ink)}

/* Значок «скопировать» внутри строки таблицы. */
.apcpi{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  border-radius:7px;color:var(--faint);font-size:.8rem;vertical-align:-5px;
  border:0;background:none;cursor:pointer;transition:var(--tr-ui)}
.apcpi:hover{color:var(--text);background:var(--surface-2)}

/* Заглушенная кнопка с подписью «после открытия раздела». */
.apdead{display:inline-flex;flex-direction:column;align-items:flex-end;gap:4px}
.apdead .sm{font-size:.7rem;color:var(--faint)}

/* Две колонки 2 : 1 — Обзор, Ключи, Использование, оба ряда «Использования»
   (холсты 13/1, 20/1, 20/2; круг 1 находка 13, круг 2 находки 8/9: было
   1,6 : 1 и 1 : 1 у второго ряда — правая колонка на 110 px шире макета, шов
   прыгал между рядами). .eq — две равные, только у пары карточек плагинов. */
.apgrid2{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:18px;
  align-items:start}
.apgrid2.eq{grid-template-columns:repeat(2,minmax(0,1fr))}
.apgrid2.apobzor{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.apgrid2 + .apgrid2,.apgrid2 + .apcard,.apcard + .apgrid2{margin-top:18px}
.apmain,.apside{display:flex;flex-direction:column;gap:18px}
.apthree{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:start}
.apalerts{display:flex;flex-direction:column;gap:10px;margin-bottom:18px}
.apstartwrap{margin-bottom:18px}


/* ═══════════════════════════════════════════════════════════════════════════
   4. КАПСУЛА СОСТОЯНИЯ .aptag
   ═══════════════════════════════════════════════════════════════════════════
   Нейтральная — --surface-2; зелёная «работает» с точкой; янтарная; красная;
   .on — фирменная (выбранная модель в окне ключа). */
.aptag{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;
  border:1px solid var(--border);font-size:.74rem;font-weight:500;color:var(--muted);
  white-space:nowrap;background:var(--surface-2);line-height:1.3}
.aptag .dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.aptag.ok{color:var(--good);border-color:color-mix(in srgb,var(--good) 30%,transparent);background:var(--good-soft)}
.aptag.warn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 34%,transparent);background:var(--warn-soft)}
.aptag.bad{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 34%,transparent);background:var(--danger-soft)}
.aptag.on{color:var(--primary-ink);border-color:color-mix(in srgb,var(--primary) 30%,transparent);background:var(--primary-soft)}
.aptag.mono{font-family:var(--mono);font-size:.7rem}
/* Кликабельная — в фильтрах и выборе моделей. */
a.aptag,button.aptag{cursor:pointer;font:inherit;font-size:.74rem;transition:var(--tr-ui)}
a.aptag:hover,button.aptag:hover{color:var(--text);border-color:var(--border-hi);
  background:var(--surface)}
button.aptag.on:hover{color:var(--primary-ink);background:var(--primary-soft)}


/* ═══════════════════════════════════════════════════════════════════════════
   5. СЕГМЕНТНЫЙ ПЕРЕКЛЮЧАТЕЛЬ (7 / 30 / 90 дней; окно лимита; модели)
   ═══════════════════════════════════════════════════════════════════════════
   Белая капсула, радиус 999, тень --sh-lo; активный сегмент — графит (образец
   .autabs/.autab.on в audio.css). Второй селектор — совместимость с макетом,
   где переключатель зовётся .autabs: имя занято audio.css, поэтому псевдоним
   ограничен нашей областью. */
.aptabs,
.pane.api .autabs,
.apdoc .autabs{display:inline-flex;gap:4px;padding:4px;border-radius:999px;
  border:1px solid var(--border);background:var(--surface);box-shadow:var(--sh-lo)}
.aptabs > .t,
.pane.api .autabs > .t,
.apdoc .autabs > .t{padding:0 14px;min-height:34px;border-radius:999px;border:0;background:none;
  cursor:pointer;font:600 .82rem var(--font);letter-spacing:0;text-transform:none;
  color:var(--text);white-space:nowrap;transition:var(--tr-ui)}
.aptabs > .t:hover,
.pane.api .autabs > .t:hover{background:var(--surface-2)}
.aptabs > .t.on,
.pane.api .autabs > .t.on,
.apdoc .autabs > .t.on{background:var(--ink);color:var(--on-ink)}
.aptabs.wide,
.pane.api .autabs.wide{display:flex;width:100%}
/* ⚠️ .pane.api — ГРИД. Прямой ребёнок грида блокифицируется: inline-flex
   становится flex и растягивается на всю колонку. Инлайновым по смыслу
   элементам, лежащим прямо во вкладке, — justify-self:start. */
.pane.api > .aptabs,.pane.api > .autabs,
.pane.api > .pill,.pane.api > .aptag,
.pane.api > .gbtn,.pane.api > .btn2,.pane.api > .apbtnd,
.pane.api > .apmenu,.pane.api > .applug,.pane.api > .apdots{justify-self:start}
.pane.api > .aptabs.wide,.pane.api > .autabs.wide,
.pane.api > .gbtn.wide,.pane.api > .btn2.wide,
.pane.api > .apbtnd.wide{justify-self:stretch}
.aptabs.wide > .t,
.pane.api .autabs.wide > .t{flex:1;display:flex;align-items:center;justify-content:center;
  text-align:center;min-height:44px}


/* ═══════════════════════════════════════════════════════════════════════════
   6. ПОЛОСА ЛИМИТА
   ═══════════════════════════════════════════════════════════════════════════
   .apbarline = подпись .apbarcap НАД дорожкой .apbar, одной строкой: слева
   «Потрачено 262 · осталось 38 из 300 сол. в сутки», справа мелко «обновится
   в 00:00 МСК». Три состояния читаются СЛОВОМ и цветом:
     обычное      — .apbar (оранжевая заливка на --surface-2) + .apbarcap b
     ≥ 80 %       — .apbar.warn + .apbarcap .w  (янтарь)
     исчерпан     — .apbar.bad  + .apbarcap .d  (красный) + .apkey.dim
   «Без лимита» — .apnolimit, СТРОКА БЕЗ ДОРОЖКИ: пустая читалась бы как
   «всё потрачено». */
.apbarline{display:flex;flex-direction:column;gap:7px}
.apbarcap{display:flex;align-items:baseline;gap:6px 12px;flex-wrap:wrap;
  font-size:.8rem;color:var(--muted);line-height:1.4}
.apbarcap b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
.apbarcap .r{margin-left:auto;font-size:.74rem;color:var(--faint);white-space:nowrap}
.apbarcap .w{color:var(--warn);font-weight:600;font-variant-numeric:tabular-nums}
.apbarcap .d{color:var(--danger);font-weight:600;font-variant-numeric:tabular-nums}

.apbar{height:6px;border-radius:3px;background:var(--surface-2);overflow:hidden}
.apbar i{display:block;height:100%;border-radius:3px;background:var(--primary)}
.apbar.warn i{background:var(--warn)}
.apbar.bad i{background:var(--danger)}

.apnolimit{font-size:.8rem;color:var(--muted);margin:0;line-height:1.5;text-wrap:pretty}
.apnolimit .aplink{font-size:.8rem;white-space:nowrap}


/* ═══════════════════════════════════════════════════════════════════════════
   7. ШИРОКАЯ ПЛАШКА .apnote
   ═══════════════════════════════════════════════════════════════════════════
   Тянется во всю ширину и держит кнопки справа. Ею объясняют, почему всё
   встало: 402 «нет солинок», 429 «дневной потолок». .acc — фирменная врезка
   («Ключ показываем один раз»). */
.apnote{border-radius:16px;padding:14px 18px;border:1px solid var(--border);
  background:var(--surface-2);display:flex;align-items:center;gap:16px;
  font-size:.88rem;line-height:1.5;color:var(--text)}
.apnote > p{margin:0;flex:1;text-wrap:pretty}
.apnote b{color:inherit;font-weight:700}
.apnote .bts{display:flex;gap:8px;flex:none;flex-wrap:wrap}
.apnote.warn{border-color:color-mix(in srgb,var(--warn) 34%,transparent);background:var(--warn-soft);color:var(--warn)}
.apnote.bad{border-color:color-mix(in srgb,var(--danger) 34%,transparent);background:var(--danger-soft);color:var(--danger)}
.apnote.acc{border-color:color-mix(in srgb,var(--primary) 30%,transparent);background:var(--primary-soft);color:var(--text)}
.apnote.acc b{color:var(--primary-ink)}
.apnote.col{flex-direction:column;align-items:stretch}
.apnote.col .bts{width:100%}
.apnote.col .bts .btn2,.apnote.col .bts .gbtn,.apnote.col .bts .apbtnd{flex:1;min-height:44px}
.apnote.aptip{padding:16px 18px}
.aptipcard h3{font-family:var(--head);font-weight:800;text-transform:none;letter-spacing:-.01em;
  font-size:1.05rem;margin:0 0 8px}
.aptipcard p{margin:0 0 10px;font-size:.86rem;color:var(--muted);line-height:1.55;text-wrap:pretty}
.aptipcard p:last-child{margin-bottom:0}


/* ═══════════════════════════════════════════════════════════════════════════
   8. БЛОК КОДА .apcode — графит
   ═══════════════════════════════════════════════════════════════════════════
   Единственное тёмное в разделе — код (решение дизайна: «тёмное — только
   код»). Код всегда прокручивается по горизонтали и НИКОГДА не переносится:
   перенос в curl и в ключах врёт. contain:layout paint — кадр самодостаточен.

   Строение (круг 2 приёмки, находки 2/7/36): шапка .t — язык слева, кнопка
   «Скопировать» справа В ПОТОКЕ (position:static); тело .sc > pre — прокрутка
   вбок с тонкой видимой полосой. Кнопка над кодом больше не лежит: строка с
   api_key="sk-salt-…" читается целиком. Когда строка длиннее кадра, api.js
   ставит .scroll — справа появляется затухание в цвет графита (::after на
   .sc, не mask: маска съедала бы и полосу прокрутки); докрутили до конца —
   .end снимает затухание. */
.apcode{position:relative;min-width:0;max-width:100%;border-radius:14px;border:1px solid var(--ink-2);
  background:var(--ink);color:var(--on-ink);contain:layout paint;
  --x-line:color-mix(in srgb,var(--on-ink) 14%,transparent)}
.apcode .t{display:flex;align-items:center;gap:12px;padding:5px 6px 5px 16px;min-width:0;
  min-height:42px;border-bottom:1px solid var(--x-line)}
.apcode .t .lg{font-family:var(--mono);font-size:.74rem;color:var(--ink-muted);
  letter-spacing:.02em;white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
.apcode .cp{position:static;margin-left:auto;flex:none}
/* Подпись «длинные строки прокручиваются вбок →» — только у блока, где строка
   и правда длиннее кадра (.scroll ставит апОтметитьПрокрутку); та же подпись,
   что на публичной /api (круг 2, находка 25). */
.apcode .t .sh{display:none;margin-left:auto;font-size:.7rem;color:var(--ink-muted);white-space:nowrap;
  min-width:0;overflow:hidden;text-overflow:ellipsis}
.apcode.scroll .t .sh{display:inline}
.apcode.scroll .t .cp{margin-left:0}
.apcode .sc{position:relative}
.apcode pre{margin:0;padding:14px 16px;font-family:var(--mono);font-size:.82rem;
  line-height:1.6;color:var(--on-ink);overflow-x:auto;white-space:pre;
  scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--on-ink) 32%,transparent) transparent}
.apcode.scroll .sc::after{content:'';position:absolute;top:0;right:0;bottom:12px;width:72px;
  background:linear-gradient(to right,transparent,var(--ink) 72%);pointer-events:none;
  z-index:1;transition:opacity var(--tr)}
.apcode.scroll.end .sc::after{opacity:0}
/* Кнопка на графите: прозрачная с рамкой, текст светлый. */
.pane.api .apcode .btn2,.apdoc .apcode .btn2{background:var(--ink-2);color:var(--on-ink);
  border-color:color-mix(in srgb,var(--on-ink) 22%,transparent)}
.pane.api .apcode .btn2:hover{border-color:var(--on-ink);color:var(--on-ink)}
.pane.api .apcode .btn2.done{color:color-mix(in srgb,var(--good) 55%,var(--on-ink));
  border-color:color-mix(in srgb,var(--good) 55%,var(--on-ink))}


/* ═══════════════════════════════════════════════════════════════════════════
   9. КАРТОЧКА КЛЮЧА .apkey  (холст 20, кадр 1)
   ═══════════════════════════════════════════════════════════════════════════
   Строки: имя + чип состояния + капсулы моделей, справа «создан · был · N
   запросов»; маска ключа на плашке --surface-2 + «Лимит…» + «Отозвать» + ⋯;
   полоса лимита. ⚠️ contain здесь СОЗНАТЕЛЬНО не стоит: выпадашка .apmenu
   раскрывается внутри карточки, а contain:paint её обрезал бы. */
.apkey{border-radius:20px;border:1px solid var(--border);
  background:var(--surface);padding:18px 20px;box-shadow:var(--sh-lo);
  display:flex;flex-direction:column;gap:14px}
/* Отозванный или исчерпанный ключ — приглушён целиком. */
.apkey.dim{opacity:.62;box-shadow:none}
.apkey .aphd{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.apkey h4{font-family:var(--head);font-weight:800;text-transform:none;letter-spacing:-.01em;
  font-size:1.02rem;margin:0;min-width:0;overflow-wrap:anywhere}
.apkey .tags{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.apkey .mts{margin-left:auto;font-size:.76rem;color:var(--faint);font-variant-numeric:tabular-nums;
  white-space:nowrap}
.apkey .apkrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.apmask{flex:1 1 220px;min-width:0;display:block;padding:11px 14px;border-radius:12px;
  background:var(--surface-2);font-family:var(--mono);font-size:.9rem;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.02em}
.pane.api .apkey .apkbtn.btn2{min-height:40px;padding:8px 14px;font-weight:600}
.apkey .aplink.apkbtn{padding:8px 4px;min-height:40px;display:inline-flex;align-items:center}
.apkey .sub{font-size:.8rem;color:var(--muted);margin:0;line-height:1.5}
.apkey .sub.bad{color:var(--danger)}
/* Список ключей — обычный столбик. */
.apkeys{display:flex;flex-direction:column;gap:12px}
.apgroup{margin-top:18px}
.apgroup .aplbl{margin-bottom:10px}
.aprevbtn{display:flex;align-items:center;gap:10px;width:100%;padding:12px 16px;border-radius:14px;
  border:1px solid var(--border);background:none;font:inherit;font-size:.84rem;
  color:var(--muted);cursor:pointer;text-align:left;transition:var(--tr-ui)}
.aprevbtn:hover{color:var(--text);background:var(--surface)}
.aprevbtn .r{margin-left:auto;font-size:.78rem}
.aprevoked{margin-top:10px}


/* ═══════════════════════════════════════════════════════════════════════════
   10. ВЫПАДАЮЩЕЕ МЕНЮ .apmenu
   ═══════════════════════════════════════════════════════════════════════════
   Меню ключа («Лимит… / Модели… / Переименовать / Отозвать») и — на 390 —
   раскрытый список разделов «Подключения». Фон НЕПРОЗРАЧНЫЙ. */
.apmenu{width:224px;border-radius:14px;border:1px solid var(--border-hi);
  background:var(--поп);box-shadow:var(--sh);padding:6px}
.apmenu .mi{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;
  font-size:.84rem;color:var(--text);cursor:pointer;border:0;background:none;
  width:100%;text-align:left;font-family:inherit}
.apmenu .mi:hover{background:var(--surface-2)}
.apmenu .mi.dg{color:var(--danger)}
.apmenu .sep{height:1px;background:var(--border);margin:5px 8px}
.apmenu.auto{width:auto}
/* Якорится к «⋯»: родителю нужен position:relative. */
.apmenu.drop{position:absolute;top:calc(100% + 6px);right:0;z-index:8}
.apanchor{position:relative;margin-left:auto}


/* ═══════════════════════════════════════════════════════════════════════════
   11. ГРАФИТОВАЯ КАРТОЧКА «СВОЙ КОД» .apink И АДРЕСА .apaddr
   ═══════════════════════════════════════════════════════════════════════════
   Base URL, адрес для Anthropic SDK, заголовок Authorization и ссылка
   подключения — моноширинным на --ink. Адрес НЕ переносится — иначе его
   скопируют по кускам. Локальные токены — по образцу #modelModal .mbox.
   ⚠️ Графит — ТОЛЬКО у блока адресов (.apinkrows), как велит записка макета
   20/3 «тёмное — только код»: сама карточка, её шапка, описание и кнопка
   «Инструкция» — белые (находка 11: остров был графитовым целиком). */
.apink{--x-line:color-mix(in srgb,var(--on-ink) 14%,transparent);
  --x-soft:color-mix(in srgb,var(--on-ink) 6%,transparent);
  border-radius:20px;background:var(--surface);color:var(--text);padding:18px 20px;
  margin-top:18px;border:1px solid var(--border);box-shadow:var(--sh-lo)}
.apinkhd{display:flex;align-items:center;gap:14px;margin-bottom:14px}
/* Текст шапки ужимается рядом с кружком, а не падает под него. */
.apinkhd > div{flex:1 1 160px;min-width:0}
.apinkhd h3{font-family:var(--head);font-weight:800;text-transform:none;letter-spacing:-.01em;
  font-size:1.05rem;margin:0;line-height:1.2}
.apinkhd p{margin:3px 0 0;font-size:.8rem;color:var(--muted);line-height:1.4}
.apinkhd .r{margin-left:auto;flex:none}
.apinkrows{display:flex;flex-direction:column;gap:8px}
.apink .apinkrows{padding:10px;border-radius:16px;background:var(--ink);color:var(--on-ink);
  border:1px solid var(--ink-2)}
.apaddr{display:flex;align-items:center;gap:14px;padding:11px 14px;border-radius:14px;
  border:1px solid var(--border);background:var(--surface-2)}
.apaddr .tx{min-width:0;flex:1}
.apaddr u{text-decoration:none;display:block;font-size:.72rem;color:var(--faint);
  margin-bottom:3px}
.apaddr .apad{font-family:var(--mono);font-size:.9rem;color:var(--text);white-space:nowrap;
  overflow-x:auto;scrollbar-width:none}
.apaddr .apad::-webkit-scrollbar{display:none}
/* Подпись ТОЛЬКО под адресом (.tx .sm): кнопка .btn2.sm в .r под правило не попадает. */
.apaddr .tx .sm{font-size:.72rem;color:var(--faint);margin:3px 0 0}
.apaddr .r{margin-left:auto;flex:none}
.apaddr.acc{border-color:color-mix(in srgb,var(--primary) 34%,transparent);background:var(--primary-soft)}
/* Те же строки на графите. */
.apink .apaddr{background:var(--x-soft);border-color:var(--x-line)}
.apink .apaddr u,.apink .apaddr .tx .sm{color:var(--ink-muted)}
.apink .apaddr .apad{color:var(--on-ink)}
.apink .apaddr.acc{background:color-mix(in srgb,var(--primary) 18%,var(--ink));
  border-color:color-mix(in srgb,var(--primary) 45%,transparent)}
.apink .apaddr.acc .apad{color:var(--primary)}
.pane.api .apink .apinkrows .btn2{background:transparent;color:var(--on-ink);border-color:var(--x-line)}
.pane.api .apink .apinkrows .btn2:hover{border-color:var(--on-ink)}
.pane.api .apink .apinkrows .btn2.done{color:color-mix(in srgb,var(--good) 55%,var(--on-ink));
  border-color:color-mix(in srgb,var(--good) 55%,var(--on-ink))}
.pane.api .apink .apinkrows .btn2.dead{opacity:.5}
.apink .apinkrows .apdead .sm{color:var(--ink-muted)}
.apink .apinkrows .apic{color:var(--on-ink)}


/* ═══════════════════════════════════════════════════════════════════════════
   12. СТРОКА ПРИЛОЖЕНИЯ .aprow2  («Подключённые приложения»)
   ═══════════════════════════════════════════════════════════════════════════ */
.aprows2{display:flex;flex-direction:column}
.aprow2{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--border);
  flex-wrap:wrap}
.aprow2:first-child{border-top:0;padding-top:0}
.aprow2:last-child{padding-bottom:0}
.aprow2 .tx{flex:1 1 200px;min-width:0;display:flex;flex-direction:column;gap:2px}
.aprow2 .tx b{font-size:.92rem;font-weight:600;color:var(--text)}
.aprow2 .tx .sm{font-size:.76rem;color:var(--faint);font-variant-numeric:tabular-nums}
.aprow2 .r{margin-left:auto;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.aprow2 > .aplink{margin-left:auto}


/* ═══════════════════════════════════════════════════════════════════════════
   13. ШАГ .apstep  («Начать за минуту», «Быстрый старт», карточки плагинов)
   ═══════════════════════════════════════════════════════════════════════════ */
.apstep{display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;align-items:start}
.apstep + .apstep{margin-top:12px}
.apstep .n{width:26px;height:26px;border-radius:50%;background:var(--surface-2);
  display:grid;place-items:center;font-family:var(--head);font-weight:800;font-size:.8rem;
  color:var(--text);line-height:1;margin-top:1px}
.apstep b{display:block;font-size:.9rem;font-weight:600;color:var(--text);margin-bottom:2px;
  line-height:1.45}
.apstep span{display:block;font-size:.84rem;color:var(--muted);line-height:1.55;
  text-wrap:pretty}
.apstep .apmono{color:var(--text);display:inline}
/* ⚠️ Вес 0,3,0: .apstep .apmono{display:inline} (0,2,0) перебивал блочную
   .apaddrline, строка base_url = … на 390 переносилась на две, и фон второй
   строки съедал подчёркивание первой — читалось «base url» (круг 2, I10). */
.apstep .apmono.apaddrline{display:block;white-space:nowrap;overflow-x:auto;
  -webkit-mask-image:linear-gradient(to right,var(--ink) calc(100% - 22px),transparent);
  mask-image:linear-gradient(to right,var(--ink) calc(100% - 22px),transparent)}
.apstep .apaddrrow{display:flex;align-items:center;gap:8px;margin:8px 0}
.apstep .apaddrrow .apaddrline{flex:1;min-width:0;margin:0}
.apstep .apaddrrow .btn2{flex:none;min-height:36px;padding:0 12px;font-size:.78rem}
.apstep .apstepbtn{margin-top:10px}
.apstep .apstepcode{margin-top:9px}
.apstep .aphint{display:block}
.apaddrline{display:block;padding:8px 12px;border-radius:10px;background:var(--surface-2);
  font-family:var(--mono);font-size:.82rem;color:var(--text);margin:8px 0;
  white-space:nowrap;overflow-x:auto;scrollbar-width:none}
.apbts .apaddrline{display:inline-block;margin:0;padding:0;background:none;color:var(--muted)}
.apsteps{margin:0 0 16px}
/* Три шага в ряд в карточке «Начать за минуту». */
.apsteps3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.apsteps3 .apstep + .apstep{margin-top:0}
/* «Начать за минуту» в пустом состоянии — такая же карточка на тени, как все:
   персиковая рамка с кольцом делала её единственным островом с рамкой (круг 2,
   находка 21). Главной её делает место — над колонками во всю ширину. */
.apbts{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
/* «AI-СОЛЬ» в тексте шагов не рвётся по дефису на «AI-» / «СОЛЬ» (круг 2,
   находка 42). Внутри шага — вес 0,2,0: .apstep span{display:block;
   text-wrap:pretty} (0,1,1) иначе выносит бренд на отдельную строку, а
   text-wrap (в Chrome — сокращение с text-wrap-mode) возвращает перенос. */
.apnb{white-space:nowrap}
.apstep .apnb{display:inline;white-space:nowrap}
.applugin .note{margin-bottom:14px;max-width:none}
.applugin .aplbl.apcan{margin:18px 0 8px}
/* Карточки Claude и ChatGPT стоят рядом: кнопка «Скопировать ссылку
   подключения» — последняя в обеих и прижата к низу, чтобы две одинаковые
   главные кнопки стояли на одной линии (находка 21). */
.applugins{align-items:stretch}
.applugin{display:flex;flex-direction:column}
.applugin .apbts{margin-top:auto;padding-top:14px}
.applugin .aplbl.apcan{margin-top:14px}


/* ═══════════════════════════════════════════════════════════════════════════
   14. ДОКУМЕНТАЦИЯ: ОГЛАВЛЕНИЕ-ПИЛЮЛИ, ТЕКСТОВАЯ КОЛОНКА, СЕКЦИИ
   ═══════════════════════════════════════════════════════════════════════════
   Оглавление — ряд пилюль над текстом (на 390 — липкая выпадашка .apsel).
   Колонка документации — до 1000 px: ПРОЗА (абзацы, врезки, шаги) держится
   в мере строки --текст-колонка (68ch), а блоки кода .apcode и таблицы
   (.aptblwrap, в том числе «Коды ошибок») занимают всю колонку — curl и
   «что делать» в четырёх колонках не сжимаются в 690 px (находки 1/25/36). */
.apdocs{margin-top:26px}
.aptoc{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 20px}
.aptoc a{display:inline-flex;align-items:center;min-height:34px;padding:0 13px;border-radius:999px;
  border:1px solid var(--border);background:var(--surface);font-size:.8rem;font-weight:600;
  color:var(--text);cursor:pointer;text-decoration:none;transition:var(--tr-ui);white-space:nowrap}
.aptoc a:hover{background:var(--surface-2);border-color:var(--border-hi)}
/* Активный пункт — персиковый, не графит: графитовыми остаются пилюли
   навигации раздела строкой выше, два ряда одинаковых активных пилюль разных
   уровней не различались (круг 2, находка 18). */
.aptoc a.on{background:var(--primary-soft);color:var(--primary-ink);
  border-color:color-mix(in srgb,var(--primary) 34%,transparent)}
.apdoccol{max-width:1000px}
.apdoccol .apsec > p,.apdoccol .apsec > .note,.apdoccol .apsec > h4,
.apdoccol .apstep > span > b,.apdoccol .apstep > span > span:not(.apstepcode),
.apdoccol .apstep > span > .aphint{max-width:var(--текст-колонка,68ch)}
/* ⚠️ Порядок селекторов не менять: страж смоука ищет ПЕРВОЕ «.aptblwrap{» в
   файле и ждёт там overflow-x:auto (блок 16). */
.apdoccol .aptblwrap,.apdoccol .apcode{max-width:none}

.apsec{scroll-margin-top:74px}
.apsec h4{font-family:var(--head);font-weight:800;text-transform:none;letter-spacing:-.01em;
  font-size:1.15rem;margin:0 0 10px}
.apsec p{margin:0 0 12px;font-size:.88rem;color:var(--muted);line-height:1.6;text-wrap:pretty}
.apsec p:last-child{margin-bottom:0}
.apsec .apmono{color:var(--text)}
.apsec .aplink{font-size:inherit}
.apdoccol .apsec + .apsec{margin-top:32px;padding-top:32px;border-top:1px solid var(--border)}
/* .apsec .note + p и p.apafter — вес 0,2,1: общее .apsec p{margin:0 0 12px}
   (0,1,1) перебивало .apafter (0,1,0), и абзац прилипал к врезке (круг 2, находка 48). */
.apcode + p,.apcode + .note,.aptblwrap + p,.apsec .note + p,.apsec p.apafter{margin-top:11px}

/* На 390 оглавление заменяется липкой выпадашкой: не капсулы — два похожих
   ряда навигации подряд читались бы как один; не аккордеон — экран остался бы
   без текста. */
.apsel{display:none;align-items:center;gap:10px;padding:11px 14px;border-radius:12px;
  border:1px solid var(--border-hi);background:var(--поп);font-size:.86rem;
  min-height:44px;cursor:pointer;width:100%;color:var(--text);
  font-family:inherit;text-align:left}
.apsel b{font-weight:600}
.apsel .r{margin-left:auto;color:var(--muted)}
.apsel.on{border-color:color-mix(in srgb,var(--primary) 36%,transparent);background:var(--primary-soft)}
.pane.api .apmenu[data-список]{margin-bottom:12px}


/* ═══════════════════════════════════════════════════════════════════════════
   15. KPI-КАРТОЧКИ — точечные правки к продуктовым .istat / .istats
   ═══════════════════════════════════════════════════════════════════════════
   На «Использовании» четыре KPI — белые карточки (холст 20): Потрачено /
   Запросов / Ошибок с долей / Средний запрос. */
.pane.api .istats.c4{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.pane.api .istats.apkpi{margin-bottom:18px}
.pane.api .istat{padding:16px 20px;border-radius:20px;min-width:0;background:var(--surface);
  border:1px solid var(--border);box-shadow:var(--sh-lo)}
.pane.api .istat u{display:block;text-decoration:none;font-family:var(--head);
  font-weight:800;font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--faint);margin-bottom:8px}
.pane.api .istat b{line-height:1.1;display:block;font-size:1.7rem}
.pane.api .istat b i{font-style:normal;font-size:.84rem;font-weight:700;
  color:var(--muted);margin-left:6px;font-family:var(--font)}
.pane.api .istat .th{font-size:.74rem;color:var(--faint);margin-top:6px;line-height:1.4;
  margin-bottom:0}


/* ═══════════════════════════════════════════════════════════════════════════
   16. ТАБЛИЦЫ
   ═══════════════════════════════════════════════════════════════════════════
   Гридовая таблица: колонки задаёт разметка инлайном И у .hd, И у каждой .rw.
   ⚠️ В строковом style свойства только через дефис: grid-template-columns.
   Обёртка всегда прокручивается по горизонтали — на узком экране таблица не
   ломает страницу. */
.aptblwrap{overflow-x:auto;border-radius:14px;border:1px solid var(--border);background:var(--surface)}
.aptbl{min-width:100%}
.aptbl .hd,.aptbl .rw{display:grid;gap:10px;align-items:center;padding:10px 14px}
.aptbl .hd{background:var(--surface-2);font-family:var(--head);font-weight:800;
  font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.aptbl .rw{border-top:1px solid var(--border);font-size:.88rem}
.aptbl .rw.tot{background:var(--surface-2);font-weight:600}
.aptbl .rw.dim{opacity:1;background:var(--surface-2)}
.aptbl .rw.dim > span{color:var(--muted)}
.aptbl .rw.dim > .apstatus{color:var(--text)}
/* Строка-разделитель группы (в прайсе — вендор). */
.aptbl .rw.grp{background:var(--surface-2);padding:7px 14px;
  grid-template-columns:1fr!important}
/* Готовые раскладки прайса (публичная страница задаёт их классом, не инлайном). */
.aptbl.pr .hd,.aptbl.pr .rw{grid-template-columns:minmax(0,1fr) 120px 190px 150px 150px}
.aptbl.img .hd,.aptbl.img .rw{grid-template-columns:minmax(0,1fr) 220px 190px 180px}
.aptblcard{padding:16px 18px}
.aptblcard .aptblwrap{background:transparent}
.aperrtbl .rw{align-items:start;font-size:.84rem}
.aperrtbl .apstatus{text-align:left;font-weight:700;color:var(--text)}
.aperrtbl .apmono{font-size:.76rem;word-break:break-all}
.aprecent{display:flex;flex-direction:column;gap:8px}


/* ═══════════════════════════════════════════════════════════════════════════
   17. ГРАФИКИ: «ПО ДНЯМ», «РАСХОД ЗА НЕДЕЛЮ», ДОЛИ «ПО МОДЕЛЯМ»
   ═══════════════════════════════════════════════════════════════════════════
   Столбики: сегодняшний — оранжевый, максимум — светлее, остальные --surface-hi.
   Выброс срезан штриховкой (.apcol.over) и подписан (.aptoday). */
.apchart{display:flex;align-items:flex-end;gap:5px;height:216px;padding-top:6px}
.apcol{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;
  position:relative;cursor:pointer}
.apcol .b{border-radius:4px 4px 0 0;background:var(--surface-hi);
  position:relative;overflow:hidden;min-height:2px;transition:opacity var(--tr)}
.apcol:hover .b{opacity:.8}
.apcol.max .b{background:color-mix(in srgb,var(--primary) 42%,var(--surface))}
.apcol.today .b{background:var(--primary)}
.apcol.zero .b{background:var(--surface-2)}
/* Срез: штриховка поверх верхушки говорит «столбик выше, чем нарисован». */
.apcol.over .b::after{content:'';position:absolute;left:0;right:0;top:0;height:7px;
  background:repeating-linear-gradient(90deg,var(--surface) 0 3px,transparent 3px 6px)}
.aptoday{position:absolute;bottom:100%;right:0;transform:translateY(-4px);
  white-space:nowrap;font-size:.68rem;color:var(--primary-ink);font-variant-numeric:tabular-nums}
/* Ось дат — ГРИД с теми же дорожками и зазором, что у столбиков (--n задаёт
   api.js инлайном): подпись стоит ровно под своим столбиком. Подписей мало
   (первый день, каждый k-й, «сегодня» — см. апОсь), и они НЕ обрезаются:
   span шире дорожки центрируется по ней и заходит на соседние пустые дорожки
   (justify-self:center без safe), overflow:hidden здесь запрещён — до круга 2
   ось печатала «24 а», «1 се», «15 с» (находки 3/8/9). */
.apax{display:grid;grid-template-columns:repeat(var(--n,30),minmax(0,1fr));gap:5px;
  font-size:.7rem;color:var(--faint);border-top:1px solid var(--border);
  padding-top:7px;margin-top:6px;font-variant-numeric:tabular-nums;min-height:1.2em}
.apax > span{justify-self:center;white-space:nowrap;max-width:none;overflow:visible}
.apax > span:first-child{justify-self:start}
.apax > span:last-child{justify-self:end;color:var(--text);font-weight:600}
.apchart.mini{height:124px;gap:3px}
.apchart.mini .apcol .b{border-radius:3px 3px 0 0}
.apax.mini{gap:3px}

/* Неделя на Обзоре: семь столбиков в проценте от максимума, подписи дней.
   Ось — тот же грид на 7 дорожек, что и столбики (подписи не режутся). */
.apwk{display:flex;align-items:flex-end;gap:8px;height:120px}
.apwk .c{flex:1;min-width:0;height:100%;display:flex;flex-direction:column;justify-content:flex-end;
  cursor:pointer}
.apwk .c i{display:block;border-radius:4px 4px 0 0;background:var(--surface-hi);transition:opacity var(--tr)}
.apwk .c:hover i{opacity:.8}
.apwk .c.today i{background:var(--primary)}
.apwk .c.zero i{background:var(--surface-2)}
.apwk .c.sel i{outline:2px solid color-mix(in srgb,var(--primary) 45%,transparent);outline-offset:1px}
.apwkax{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;font-size:.72rem;
  color:var(--faint);border-top:1px solid var(--border);padding-top:7px;margin-top:6px}
.apwkax > span{justify-self:center;white-space:nowrap;overflow:visible}
.apwkax > span:first-child{justify-self:start}
.apwkax > span.on{color:var(--text);font-weight:600;justify-self:end}
/* Подпись выбранного дня пуста до нажатия (иначе дублировала строку «Сегодня»);
   min-height держит место, чтобы нажатие не двигало итоги ниже. */
.apwkcap{margin-top:8px;min-height:1.15em}
.apwksum{margin-top:14px;display:flex;flex-direction:column;gap:6px;font-size:.86rem}
.apwksum > div{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.apwksum span{color:var(--muted)}
.apwksum b{font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;text-align:right}

/* Доли «По моделям»: имя, сумма, под ними оранжевая полоса на --surface-2. */
.apshare{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:10px 0;
  border-top:1px solid var(--border);font-size:.88rem}
.apshare:first-of-type{border-top:0;padding-top:0}
.apshare .nm{color:var(--text)}
.apshare.rest .nm{color:var(--muted)}
.apshare .apnum{color:var(--text);font-weight:600}
.apshare .bar{grid-column:1 / -1;display:block;height:5px;border-radius:3px;background:var(--surface-2);
  overflow:hidden}
.apshare .bar b{display:block;height:100%;border-radius:3px;background:var(--primary)}
.apshare.rest .bar b{background:var(--border-hi)}

/* Плитки цен на Обзоре. */
.aptiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.aptile{border-radius:14px;background:var(--surface-2);padding:12px 14px;display:flex;flex-direction:column;gap:3px}
.aptile u{text-decoration:none;font-size:.74rem;color:var(--muted)}
.aptile b{font-family:var(--head);font-weight:800;font-size:1.15rem;color:var(--text);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.aptile span{font-size:.72rem;color:var(--faint)}

/* Три колонки прайса: строки «модель — цена». */
.appcol .approw{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:9px 0;border-top:1px solid var(--border);font-size:.88rem;width:100%}
.appcol .approw:first-of-type{border-top:0}
.appcol .approw .nm{color:var(--text);min-width:0;display:flex;flex-direction:column;gap:1px}
.appcol .approw .nm .sm{font-size:.7rem;color:var(--faint)}
.appcol .approw .apnum{font-weight:600;color:var(--text);white-space:nowrap}
.appcol .apmorebtn{background:none;border:0;border-top:1px solid var(--border);padding:11px 0 2px;
  font:inherit;cursor:pointer;text-align:left}
.appcol .apmorebtn .nm{color:var(--muted)}
.appcol .apmorebtn .aplink{font-size:.84rem}
.apfull{margin-top:24px}
.apfull .note{margin-bottom:14px;max-width:none}


/* ═══════════════════════════════════════════════════════════════════════════
   18. ПРОДУКТОВЫЕ КНОПКИ И ПЛАШКИ — правки под макет, только в нашей области
   ═══════════════════════════════════════════════════════════════════════════
   Область = кабинет (.pane.api) + публичная страница (.apdoc) + наши окна
   (.apmodal): модалки живут в конце body, вне вкладки, поэтому третий селектор
   обязателен, иначе кнопки в окне «Новый ключ» приедут продуктовыми. */

/* .gbtn у продукта — блочная во всю ширину. У нас inline, ширину возвращает .wide. */
.pane.api .gbtn,.apdoc .gbtn,.apmodal .gbtn{display:inline-flex;align-items:center;
  justify-content:center;gap:8px;width:auto;padding:0 20px;min-height:46px;border-radius:12px;
  font:600 .92rem var(--font);text-transform:none;letter-spacing:0;white-space:nowrap;line-height:1.2}
.pane.api .gbtn.sm,.apdoc .gbtn.sm,.apmodal .gbtn.sm{padding:0 14px;min-height:38px;font-size:.84rem;
  border-radius:11px}
.pane.api .gbtn.tall,.apdoc .gbtn.tall,.apmodal .gbtn.tall{min-height:50px;padding:0 22px}
.pane.api .gbtn.wide,.apdoc .gbtn.wide,.apmodal .gbtn.wide{width:100%}
.pane.api .gbtn .apic,.apdoc .gbtn .apic,.apmodal .gbtn .apic{width:16px;height:16px}

.pane.api .btn2,.apdoc .btn2,.apmodal .btn2{display:inline-flex;align-items:center;
  justify-content:center;gap:8px;padding:0 16px;min-height:44px;border-radius:12px;
  font:600 .86rem var(--font);white-space:nowrap;text-decoration:none;background:var(--surface)}
.pane.api .btn2.sm,.apdoc .btn2.sm,.apmodal .btn2.sm{padding:0 12px;min-height:36px;font-size:.8rem;
  border-radius:10px}
.pane.api .btn2.tall,.apdoc .btn2.tall,.apmodal .btn2.tall{min-height:48px;padding:0 18px}
.pane.api .btn2.wide,.apdoc .btn2.wide,.apmodal .btn2.wide{width:100%}
.pane.api .btn2.dead,.apdoc .btn2.dead,.apmodal .btn2.dead{opacity:.55;cursor:default}
.pane.api .btn2.dead:hover,.apmodal .btn2.dead:hover{border-color:var(--border-hi);
  color:var(--text)}
/* «Скопировано», «Позовём» — сделанное действие. */
.pane.api .btn2.done,.apdoc .btn2.done,.apmodal .btn2.done{border-color:color-mix(in srgb,var(--good) 45%,transparent);
  color:var(--good)}
.pane.api .btn2.done:hover,.apmodal .btn2.done:hover{border-color:color-mix(in srgb,var(--good) 45%,transparent);
  color:var(--good)}

/* .note: у продукта она центрируется полями auto и красит .warn в КРАСНЫЙ.
   У нас врезка ОДНА на все случаи (находка 16: было четыре исполнения —
   персик/тёмный, персик/оранжевый, оранжевый абзац, янтарь/коричневый):
   белая карточка с оранжевой рамкой, тело тёмным, заголовок <b> — оранжевым
   (как на макете 20/1). .warn и .acc — та же врезка; только .bad остаётся
   красной: это не совет, а ошибка. */
.pane.api .note,.apdoc .note,.apmodal .note{margin:0;border-radius:14px;padding:13px 15px;
  color:var(--text);line-height:1.55;max-width:none;font-size:.86rem;
  background:var(--surface);border:1px solid color-mix(in srgb,var(--primary) 30%,transparent)}
.pane.api .note.sm,.apmodal .note.sm{font-size:.8rem}
.pane.api .note.warn,.apdoc .note.warn,.apmodal .note.warn,
.pane.api .note.acc,.apdoc .note.acc,.apmodal .note.acc{
  border-color:color-mix(in srgb,var(--primary) 30%,transparent);background:var(--surface);color:var(--text)}
.pane.api .note.bad,.apdoc .note.bad,.apmodal .note.bad{border-color:color-mix(in srgb,var(--danger) 34%,transparent);
  background:var(--danger-soft);color:var(--danger)}
.pane.api .note b,.apdoc .note b,.apmodal .note b{color:var(--primary-ink);font-weight:700}
.pane.api .note.bad b,.apmodal .note.bad b{color:inherit}
/* Зазор между сегментом лимита и подсказкой под ним (находка 41): общее
   .note{margin:0} выше весит больше, чем .apafter{margin-top}. */
.pane.api .note.apafter,.apmodal .note.apafter{margin-top:11px}

/* Липкая кнопка «Создать ключ» на телефоне (холст 25). Вне медиазапроса —
   обычный блок; fixed включается только на ≤ 860. */
.apfixbar{margin-top:12px}
.apfixpad{display:none}


/* ═══════════════════════════════════════════════════════════════════════════
   19. ОКНА
   ═══════════════════════════════════════════════════════════════════════════
   Класс .apmodal ставится на .mbox наших окон: сужает окно до 560 и включает
   правки блока 18. Сценарий показа ключа: пока не скопировано — единственная
   оранжевая кнопка «Скопировать», выход вторичный; после копирования оранжевый
   переезжает на выход; третий кадр — лента .aponce.bad «Ключ не скопирован». */
.mbox.apmodal{max-width:560px;border-radius:20px}
.mbox.apmodal.narrow{max-width:460px}
.mbox.apmodal.wide{max-width:640px}
/* Шапка остаётся липкой (ai.css: отрицательные поля + свой padding 24), а
   значит её левый край = левому краю полей окна. До круга 2 стояло margin:0 —
   поля шапки складывались с padding, и «Новый ключ» уезжал на 48 px
   (находки 14/41). На 390 .mbox у продукта с полем 18 — шапка та же. */
.apmodal .mhead{align-items:flex-start;gap:14px;margin:-24px -24px 14px;padding:24px 24px 10px}
.apmodal .mhead h2{font-size:1.2rem}
.apmodal .mhead .sub{font-size:.82rem;color:var(--muted);margin:5px 0 0}
/* Подвал с кнопками липнет к низу окна (круг 2, I9): та же схема отрицательных
   полей, что у липкой .mhead в ai.css (поле .mbox 24 px, на телефоне 18) — в
   любой прокрутке окна «Сохранить/Отмена» остаются в кадре. */
.apmbtns{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:18px}
.apmodal .apmbtns{position:sticky;bottom:-24px;z-index:2;margin:18px -24px -24px;
  padding:14px 24px 24px;background:var(--surface)}
.apmfield{margin-bottom:16px}
.apmfield > .aplbl{margin-bottom:8px}
.aperr{margin-top:12px}
.aperr:empty{display:none}
.apmodal .aptags{margin-top:2px}
.apmodal .apfld.wide{margin-bottom:0}
.apmodal .apfld.wide + .aphint,.apmodal .apfld.wide + .aptags{margin-top:8px}
.apmodal p.apsub{margin:0;font-size:.88rem;color:var(--muted);line-height:1.55}

/* Единственный показ ключа: янтарная лента, приклеенная к рамке с ключом. */
.aponce{display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:12px 12px 0 0;
  border:1px solid color-mix(in srgb,var(--warn) 34%,transparent);border-bottom:0;background:var(--warn-soft);
  font-family:var(--head);font-weight:800;font-size:.62rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--warn)}
.aponce.bad{border-color:color-mix(in srgb,var(--danger) 40%,transparent);background:var(--danger-soft);color:var(--danger)}
.apkeyshow{border-radius:12px;border:1px solid color-mix(in srgb,var(--warn) 34%,transparent);background:var(--surface-2);
  padding:13px 14px;font-family:var(--mono);font-size:1.02rem;line-height:1.5;color:var(--text);
  word-break:break-all;user-select:all;-webkit-user-select:all}
.aponce + .apkeyshow{border-radius:0 0 12px 12px}
.aponce.bad + .apkeyshow{border-color:color-mix(in srgb,var(--danger) 40%,transparent)}


/* ═══════════════════════════════════════════════════════════════════════════
   20. ПУБЛИЧНАЯ СТРАНИЦА /api  (холст 13, кадр 2)
   ═══════════════════════════════════════════════════════════════════════════
   ⚠️ ЭТО ОТДЕЛЬНЫЙ СЕРВЕРНЫЙ ДОКУМЕНТ. Скриптов на нём нет (CSP всё равно
   запрещает инлайн), ai.css и home.css НЕ подключены — грузится только этот
   файл. Поэтому здесь свои переменные, свой сброс и свои шрифты.
   Всё привязано к <body class="apdpage"> — в приложении такого класса нет
   никогда, значит переменные раздела не могут протечь на сайт.
   ⚠️ Имена и светлые значения — ТЕ ЖЕ, что в :root ai.css (лист стиля П34):
   меняешь токен там — меняй и здесь. Тёмная тема (аварийный откат засовом
   THEME_DARK) — блок html[data-theme="dark"] body.apdpage сразу ниже; страж
   smoke сверяет, что в тёмном блоке есть ВСЕ тематические токены светлого. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 900;font-display:swap;src:url('/static/fonts/inter-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 900;font-display:swap;src:url('/static/fonts/inter-latin.woff2') format('woff2');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}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400 900;font-display:swap;src:url('/static/fonts/montserrat-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:400 900;font-display:swap;src:url('/static/fonts/montserrat-latin.woff2') format('woff2');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}

body.apdpage{
  --bg:#f5f3ef; --surface:#ffffff; --surface-2:#efece6; --surface-hi:#e9e5de;
  --border:rgba(28,27,25,.10); --border-hi:rgba(28,27,25,.20);
  --text:#1c1b19; --muted:#5c5751; --faint:#6f6962;
  --primary:#E8571A; --primary-h:#cf4a12; --primary-ink:#c2440e; --primary-fill:#cf4a12;
  --on-primary:#ffffff; --primary-soft:#fdeee7;
  --good:#1f7a3a; --good-soft:#eaf3ec; --danger:#c4362b; --danger-soft:#fbeceb;
  --warn:#9a6a1a; --warn-soft:#fbf3e0;
  --ink:#1d1f23; --ink-2:#2a2d33; --ink-muted:#b9b4ad; --on-ink:#ffffff;
  --sh:0 12px 30px rgb(28 27 25/.08); --sh-lo:0 2px 8px rgb(28 27 25/.06);
  --scrim:rgba(28,27,25,.55);
  --шапка-фон:rgba(245,243,239,.78); --поп:#ffffff;
  --стекло-режим:multiply; --стекло-фильтр:invert(1); --стекло-сила:0; --свечение:0;
  --лого-фильтр:none;
  /* Та же полоса и поле, что у приложения (ai.css :root) — страница отдельный
     документ, общего :root не видит, значения дублируем. Текст документации —
     в колонке --текст-колонка. */
  --полоса:1920px; --поле:clamp(16px,3.9vw,58px); --текст-колонка:68ch;
  --font:'Inter',system-ui,Arial,sans-serif;
  --head:'Montserrat','Inter',sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --radius:16px; --tr:220ms cubic-bezier(.16,1,.3,1);
  --tr-ui:background var(--tr),border-color var(--tr),color var(--tr),
          opacity var(--tr),box-shadow var(--tr),transform var(--tr);
  color-scheme:light;
  margin:0;background:var(--bg);color:var(--text);font-family:var(--font);
  line-height:1.5;-webkit-font-smoothing:antialiased;
}
/* Тёмная тема публичной страницы — ТОЛЬКО токены, значения те же, что в
   html[data-theme="dark"] ai.css. */
html[data-theme="dark"] body.apdpage{
  --bg:#0c0c0c; --surface:rgba(255,255,255,.045); --surface-2:rgba(255,255,255,.025);
  --surface-hi:rgba(255,255,255,.07);
  --border:rgba(255,255,255,.10); --border-hi:rgba(255,255,255,.18);
  --text:#f3f1ed; --muted:#98938d; --faint:#6c6862;
  --primary:#E8571A; --primary-h:#ff6a2c; --primary-ink:#ff8a4c; --primary-fill:#E8571A;
  --on-primary:#ffffff; --primary-soft:rgba(232,87,26,.14);
  --good:#3cb464; --good-soft:rgba(60,180,100,.14); --danger:#e5544a; --danger-soft:rgba(229,84,74,.14);
  --warn:#d9a441; --warn-soft:rgba(217,164,65,.10);
  --ink:#141312; --ink-2:#1f1c19; --ink-muted:#98938d; --on-ink:#f3f1ed;
  --sh:0 12px 30px rgb(0 0 0/.35); --sh-lo:0 2px 8px rgb(0 0 0/.3);
  --scrim:rgba(0,0,0,.6);
  --шапка-фон:rgba(12,12,12,.72); --поп:#191716;
  --стекло-режим:screen; --стекло-фильтр:none; --стекло-сила:.17; --свечение:1;
  --лого-фильтр:brightness(0) invert(1);
  --полоса:1920px; --поле:clamp(16px,3.9vw,58px); --текст-колонка:68ch;
  color-scheme:dark;
}
.apdpage *{box-sizing:border-box}
.apdpage img{max-width:100%}
.apdpage a{color:var(--primary-ink);text-decoration:none}
.apdpage a:hover{color:var(--primary)}

/* Шапка страницы: слово «AI-СОЛЬ» (знак — только в подвале), справа —
   действия холодного гостя: «Документация» (якорь #apdocs) и оранжевая
   «Получить ключ», мелкой ссылкой — возврат в сервис. До круга 2 шапка длиной
   в 6 000 px несла только «← Вернуться в сервис» (I12, находка 4). Без
   backdrop-filter — фон непрозрачный настолько, насколько нужно. */
.apdhead{position:sticky;top:0;z-index:5;backdrop-filter:blur(10px);height:58px;border-bottom:1px solid var(--border);background:var(--шапка-фон);
  display:flex;align-items:center;position:relative;z-index:5}
.apdhead .in{width:var(--полоса);max-width:100%;margin:0 auto;padding:0 var(--поле);display:flex;
  align-items:center;gap:16px}
.apdhead .in a{display:inline-flex;align-items:center;min-height:44px}
.apdhead .apdnav{margin-left:auto;display:flex;align-items:center;gap:6px 18px;flex-wrap:nowrap}
.apdhead .apdback{font-size:.84rem;color:var(--muted);white-space:nowrap}
.apdhead .apdback:hover{color:var(--text)}
.apdhead .apddoc{font-size:.9rem;font-weight:600;color:var(--text);white-space:nowrap}
.apdhead .apddoc:hover{color:var(--primary-h)}
.apdhead .brand{font-family:var(--head);font-weight:900;font-size:1.05rem;letter-spacing:.02em;
  color:var(--text);white-space:nowrap}
/* «-СОЛЬ» на бумаге даёт 3,26:1 — ниже нормы для текста этого кегля
   (придирки, выкат Д). Тот же затемнённый тон, что на юр-страницах. */
.apdhead .brand b{color:var(--primary-ink)}

/* Полоса содержимого — та же, что у приложения. */
.apdoc{width:var(--полоса);max-width:100%;margin:0 auto;padding:0 var(--поле);position:relative;z-index:1}

/* Секция-экран. contain:layout paint — кадр самодостаточен и не пересчитывает соседей. */
.apsecw{position:relative;padding:72px 0;contain:layout paint}
.apsecw.line{border-top:1px solid var(--border)}
.apsecw.hero{padding:64px 0 72px}

/* Хиро: слева текст (кикер, h1, «Как начать», «Что умеет», кнопки), справа два
   графитовых блока кода и полоска про ошибки. Стекла .g1/.g2 нет — «ни стекла,
   ни свечений» на светлой. */
.aphero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:48px;align-items:start}
.aphero > *{min-width:0}
.apherocol{display:flex;flex-direction:column;gap:16px}
.aphkick{font-family:var(--head);font-weight:800;font-size:.6rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--primary-ink);margin:0 0 14px}
.aph{font-family:var(--head);font-weight:800;text-transform:none;letter-spacing:-.01em;
  font-size:clamp(1.55rem,2.6vw,2.1rem);line-height:1.12;margin:0 0 14px;max-width:920px;text-wrap:balance}
.aph b{color:var(--primary)}
.aph.big{font-size:clamp(2rem,3.6vw,3rem);line-height:1.06;margin-bottom:18px;max-width:640px}
.aphsub{color:var(--muted);font-size:1.02rem;line-height:1.6;margin:0 0 22px;max-width:var(--текст-колонка);
  text-wrap:pretty}
.aphsub.wide{max-width:820px}
.aph2{font-family:var(--head);font-weight:800;text-transform:none;letter-spacing:-.01em;
  font-size:1.2rem;margin:0 0 12px}
.aphblock{padding-top:22px;border-top:1px solid var(--border);max-width:var(--текст-колонка)}
.aphblock p{margin:0;font-size:.92rem;color:var(--muted);line-height:1.6;text-wrap:pretty}
.aphblock .apstep span{font-size:.92rem;color:var(--text)}
.aphblock .apstep b{font-weight:500;font-size:.92rem}
.aphblock .apstep + .apstep{margin-top:10px}
.aphprice{font-size:.85rem;color:var(--muted);margin:20px 0 0;font-variant-numeric:tabular-nums}
.aphprice b{color:var(--text);font-weight:600}
/* Вторичная кнопка героя. На публичной странице .btn2 из ai.css нет — эта
   самостоятельная. */
.aphghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:0 20px;min-height:50px;border-radius:12px;border:1px solid var(--border-hi);
  background:var(--surface);color:var(--text);font:600 .92rem var(--font);
  text-transform:none;letter-spacing:0;white-space:nowrap;cursor:pointer;transition:var(--tr-ui)}
.apdpage .aphghost{color:var(--text)}
.aphghost:hover,.apdpage .aphghost:hover{border-color:var(--primary);color:var(--text)}
.aphbts{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:10px}

/* Графитовый блок кода героя: шапка с адресом ручки, тело с подсветкой строк
   только токенами — ключи --ink-muted, значения --on-ink, акценты --primary. */
.apdcode{border-radius:18px;background:var(--ink);color:var(--on-ink);border:1px solid var(--ink-2);
  overflow:hidden;box-shadow:var(--sh)}
.apdcode + .apdcode{margin-top:12px}
.apdcode .t{display:flex;align-items:center;gap:12px;padding:12px 18px 0;font-family:var(--mono);
  font-size:.78rem;color:var(--ink-muted)}
.apdcode .t b{color:var(--on-ink);font-weight:500}
.apdcode .sc{position:relative}
.apdcode pre{margin:0;padding:12px 18px 16px;font-family:var(--mono);font-size:.82rem;line-height:1.65;
  color:var(--on-ink);overflow-x:auto;white-space:pre;scrollbar-width:thin;
  scrollbar-color:color-mix(in srgb,var(--on-ink) 32%,transparent) transparent;
  user-select:all;-webkit-user-select:all}
.apdcode .k{color:var(--ink-muted)}
.apdcode .v{color:var(--on-ink)}
.apdcode .a{color:var(--primary)}
.apdcode .c{color:var(--ink-muted);font-style:italic}
.apdcode .cap{padding:12px 18px 16px;border-top:1px solid color-mix(in srgb,var(--on-ink) 14%,transparent);
  font-size:.82rem;color:var(--ink-muted);line-height:1.5;font-family:var(--font);text-wrap:pretty}
.apdcode .cap b{color:var(--on-ink);font-weight:500}
.apdsel{font-size:.74rem;color:var(--faint);margin:8px 0 0;text-align:right}
/* Полоска про ошибки под кодом. */
.aperrstrip{display:flex;align-items:center;gap:16px;margin-top:12px;padding:14px 18px;border-radius:16px;
  border:1px solid var(--border);background:var(--surface);box-shadow:var(--sh-lo);font-size:.86rem;
  color:var(--muted);line-height:1.5;flex-wrap:wrap}
.aperrstrip p{margin:0;flex:1 1 280px;text-wrap:pretty}
.aperrstrip a{white-space:nowrap;font-weight:600;display:inline-flex;align-items:center;min-height:44px}

/* Документация на публичной: две колонки — адреса и текст слева, таблица имён справа. */
.apdgrid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:40px;align-items:start;
  margin-top:26px}
.apdgrid > *{min-width:0}
.apdtext{max-width:var(--текст-колонка)}
.apdtext p{margin:0 0 12px;font-size:.92rem;color:var(--muted);line-height:1.6;text-wrap:pretty}
.apdtext .apaddr{margin-bottom:10px}
.apdtext .apstep{margin-bottom:14px}
.apdtext .apstep span{font-size:.9rem}

.apthree .apcard h5{font-family:var(--head);font-weight:800;text-transform:none;letter-spacing:-.01em;
  font-size:1.05rem;margin:0 0 8px}
.apthree .apcard p{margin:0;font-size:.88rem;color:var(--muted);line-height:1.6;
  text-wrap:pretty}
.apdpair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:20px}
.apdpair > *{min-width:0}

/* Вопросы-ответы. <details> без единой строки скрипта — страница серверная. */
.apfaq{display:flex;flex-direction:column;gap:9px;max-width:920px}
.apfaq details{border-radius:14px;border:1px solid var(--border);background:var(--surface);
  padding:0 18px;box-shadow:var(--sh-lo)}
.apfaq summary{font-size:.95rem;font-weight:600;cursor:pointer;list-style:none;display:flex;gap:12px;
  align-items:center;min-height:52px;padding:8px 0}
.apfaq details[open]{padding-bottom:14px}
.apfaq summary::-webkit-details-marker{display:none}
.apfaq summary::marker{content:''}
.apfaq summary::after{content:'+';margin-left:auto;color:var(--faint);font-weight:400;font-size:1.1rem}
.apfaq details[open] summary::after{content:'−'}
.apfaq p{margin:10px 0 0;font-size:.88rem;color:var(--muted);line-height:1.6;
  text-wrap:pretty;max-width:var(--текст-колонка)}

/* Подвал — графитовый остров, как у всего сайта: знак СОЛЬ (единственное место
   логотипа-знака), реквизиты, ссылки. */
.apfoot{border-top:1px solid var(--border);background:var(--ink);padding:28px 0 36px}
.apfoot .in{width:var(--полоса);max-width:100%;margin:0 auto;padding:0 var(--поле);display:flex;gap:30px;
  flex-wrap:wrap;align-items:center;font-size:.78rem;color:var(--ink-muted);line-height:1.6}
.apfoot .brand{display:inline-flex;align-items:center;gap:10px;color:var(--on-ink);
  font-family:var(--head);font-weight:900;font-size:1rem;letter-spacing:.02em}
.apfoot .brand img{height:22px;width:auto;filter:brightness(0) invert(1)}
.apfoot a{font-size:.78rem;color:var(--on-ink)}
.apfoot a:hover{color:var(--primary)}
.apfoot .r{margin-left:auto}

/* Публичной странице нужны .gbtn / .btn2 / .note / .pill — свои, без ai.css. */
.apdpage .gbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:0 22px;min-height:50px;border-radius:12px;border:0;color:var(--on-primary);
  font:600 .92rem var(--font);text-transform:none;letter-spacing:0;
  white-space:nowrap;cursor:pointer;text-decoration:none;
  background:var(--primary-fill);transition:var(--tr-ui)}
.apdpage .gbtn:hover{background:var(--primary-h);color:var(--on-primary)}
.apdpage .gbtn.sm{padding:0 14px;min-height:38px;font-size:.84rem;border-radius:11px}
.apdpage .gbtn.wide{width:100%}
.apdpage .btn2{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:0 16px;min-height:44px;border-radius:12px;border:1px solid var(--border-hi);
  background:var(--surface);color:var(--text);font:600 .86rem var(--font);
  white-space:nowrap;cursor:pointer;text-decoration:none;transition:var(--tr-ui)}
.apdpage .btn2:hover{border-color:var(--primary);color:var(--primary-h)}
.apdpage .btn2.sm{padding:0 12px;min-height:36px;font-size:.8rem;border-radius:10px}
/* Врезка — ОДНА на страницу и та же, что в кабинете (блок 18): белая карточка
   с оранжевой рамкой, <b> оранжевым. До круга 2 здесь жили три исполнения
   (серая, персиковая .acc, янтарная .warn с коричневым текстом) — одна и та же
   инструкция на двух страницах выглядела по-разному (находки 12/40). */
.apdpage .note,.apdpage .note.warn,.apdpage .note.acc{border-radius:14px;padding:13px 15px;
  font-size:.86rem;color:var(--text);line-height:1.55;max-width:none;
  border:1px solid color-mix(in srgb,var(--primary) 30%,transparent);background:var(--surface)}
.apdpage .note b{color:var(--primary-ink);font-weight:700}
.apdpage .pill{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;
  border-radius:999px;font:600 .74rem var(--font);text-transform:none;
  background:var(--surface-2);border:1px solid var(--border);color:var(--muted);white-space:nowrap}
.apdpage .istats{display:grid;gap:10px}
.apdpage .istat{border-radius:14px;border:1px solid var(--border);
  background:var(--surface);padding:12px 14px;min-width:0}
.apdpage .istat u{text-decoration:none;display:block;font-family:var(--head);font-weight:800;
  font-size:.58rem;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);
  margin-bottom:6px}
.apdpage .istat b{font-family:var(--head);font-weight:800;font-size:1.5rem;
  font-variant-numeric:tabular-nums;line-height:1.1;display:block}
.apdpage .istats.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.apdpage .apcard{padding:18px 20px}
.apdpage .aplbl{margin-bottom:12px}
.apdpage .apstep .n{background:var(--surface-2)}
.apdpage .aptbl.apcards .rw > span{min-width:0}
.apfoot .brand{min-height:44px}

/* Прайс публичной страницы (круг 2, находки 4/6/20/46). Три группы с
   заголовками «Текст / Картинки / Видео»; колонка «Модель» фиксированной
   ширины — таблица текста не растягивается на 1327 px с пустой серединой;
   по умолчанию видны популярные модели, остальные — за <details> (без
   скрипта); картинки и видео — рядом, двумя компактными таблицами. */
/* Одна ширина у трёх таблиц и врезки над ними — 1000 px: раньше «Текст» был
   зажат, а пара «Картинки/Видео» тянулась на всю полосу, и правый край прайса
   читался рваным (круг 2, находка 13). Пара — одной высоты: колонка-обёртка
   растягивает таблицу до низа соседней (находка 47). */
.apprtext,.apprpair,.apprnote,.apprhint,.apprcta{max-width:1000px}
.apprpair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:20px;
  align-items:stretch}
.apprpair > *{min-width:0;display:flex;flex-direction:column}
.apprpair > * > .aptblwrap{flex:1 1 auto}
.apprhd{margin:0 0 10px;max-width:1000px}
.apprhd h3{font-size:1.05rem}
.apdpage .aptbl.appr .hd,.apdpage .aptbl.appr .rw{padding:8px 12px;gap:8px}
.apdpage .aptbl.appr .rw{font-size:.86rem}
.apdpage .aptbl.appr.pr .hd,.apdpage .aptbl.appr.pr .rw{
  grid-template-columns:minmax(180px,260px) 110px minmax(160px,1fr) 130px 130px}
/* Пара «Картинки/Видео» живёт в 1000 px (по 490 на таблицу): колонки
   плотнее, чем на 1327 px — «Модель» до 150, id 88, цена 80, остаток —
   качеству/разрешениям. */
.apdpage .aptbl.appr.img .hd,.apdpage .aptbl.appr.img .rw{
  grid-template-columns:minmax(120px,150px) minmax(0,1fr) 88px 80px}
.apprpair .aptbl.appr .rw{font-size:.84rem}
.apdpage .aptbl.appr .rw > .md{display:contents}
/* Форматы и длительности — в строку с id / разрешениями: строка прайса в
   один этаж, таблицы картинок и видео рядом получаются одной высоты. */
.apdpage .aptbl.appr .rw .apfmt{display:inline;margin:0 0 0 8px}
.apdpage .aptbl.appr .rw.grp{grid-template-columns:1fr!important}
/* Строка-раскрывашка «Остальные N моделей»: <summary> как строка таблицы,
   «+» справа, стрелку браузера прячем. */
.apdpage .aptbl details{display:block}
.apdpage .aptbl .rwmore{display:flex;align-items:center;gap:10px;padding:11px 12px;
  border-top:1px solid var(--border);font-size:.86rem;font-weight:600;color:var(--primary-ink);
  cursor:pointer;list-style:none;min-height:44px}
.apdpage .aptbl .rwmore::-webkit-details-marker{display:none}
.apdpage .aptbl .rwmore::marker{content:''}
.apdpage .aptbl .rwmore span{font-weight:400;color:var(--faint);font-size:.78rem}
.apdpage .aptbl .rwmore::after{content:'+';margin-left:auto;color:var(--faint);font-weight:400;font-size:1.1rem}
.apdpage .aptbl details[open] > .rwmore::after{content:'−'}
.apdpage .aptbl details[open] > .rwmore{background:var(--surface-2)}


/* ═══════════════════════════════════════════════════════════════════════════
   21. ТЕЛЕФОН — 390  (@media max-width:860px)
   ═══════════════════════════════════════════════════════════════════════════
   Нижняя панель приложения (.tabbar) НЕ трогается — она общая для всего сайта.
   Правила: мишени не ниже 44 px, пилюли навигации — в горизонтальную прокрутку,
   широкие таблицы становятся карточками, код и адреса прокручиваются вбок,
   а не переносятся, поля ввода 16 px. */
@media (max-width:860px){
  .aphead{gap:10px;margin-bottom:12px}
  .aphead h1{font-size:1.5rem}
  .aphead .apsub{font-size:.86rem}
  .aphead .apr{margin-left:0;width:100%}
  .aphead .apr .gbtn,.aphead .apr .btn2{min-height:44px;flex:1 1 auto}
  /* «Документация» на телефоне не рисуем: одинокая кнопка между подписью и
     пилюлями добавляла ~60 px на каждой подстранице, а у гостя стояла ВЫШЕ
     «Войти через Telegram» (круг 2, находки 16/33). Документация вошедшему —
     пилюля «Подключение», гостю — ссылка «Документация →» под ценами. На
     ≤860 в .apr ничего, кроме неё, не бывает («Создать ключ» здесь липкая
     внизу, сегмент периода — строкой под пилюлями), поэтому прячем всю .apr:
     пустой flex-ребёнок оставлял бы зазор gap. */
  .pane.api .aphead .apr{display:none}
  .aprevbtn{min-height:44px}

  /* Вес кнопок на телефоне: главная 48 px, вторичная 44. */
  .pane.api .gbtn,.apdoc .gbtn,.apmodal .gbtn,
  .pane.api .apbtnd,.apdoc .apbtnd,.apmodal .apbtnd{min-height:48px}
  .pane.api .btn2,.apdoc .btn2,.apmodal .btn2{min-height:44px}
  .pane.api .gbtn.sm,.apdoc .gbtn.sm,.apmodal .gbtn.sm{min-height:44px}
  .pane.api .btn2.sm,.apmodal .btn2.sm{min-height:44px}
  .pane.api .aplink.apkbtn,.pane.api .aprow2 .aplink,.pane.api .apmorebtn{min-height:44px}
  /* Ссылки внутри подписей (.aphint) — строчные; вертикальное поле строку не
     раздвигает, но зону нажатия доводит до 44 px. */
  .pane.api .aphint a,.pane.api .aphint .aplink{padding:15px 0}
  .pane.api .aptoc a{min-height:44px}
  .apcpi{width:44px;height:44px}

  /* Сегменты переключателя не ужимаются ниже своей подписи (white-space:nowrap):
     четыре сегмента «Без лимита · День · Неделя · Месяц» на 390 переносятся
     на вторую строку, а не за рамку окна. */
  .aptabs.wide,.pane.api .autabs.wide{flex-wrap:wrap}
  .aptabs.wide > .t,
  .pane.api .autabs.wide > .t{padding-left:8px;padding-right:8px}

  /* Навигация в один ряд с прокруткой + затухание с той стороны, куда ряд
     продолжается: .r — справа, .l — слева, оба — с двух сторон (классы ставит
     апПодкрутитьНав по scrollLeft; находка 31: раньше затухало только справа,
     и «Обзор»/«Ключи» слева срезались жёстко). Полосу прокрутки прячем.
     Цвет в маске — токен: маске важна только непрозрачность. */
  .apnav{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    padding-bottom:12px;margin-bottom:14px}
  .apnav.r{-webkit-mask-image:linear-gradient(90deg,var(--ink) 88%,transparent);
    mask-image:linear-gradient(90deg,var(--ink) 88%,transparent)}
  .apnav.l{-webkit-mask-image:linear-gradient(90deg,transparent,var(--ink) 12%);
    mask-image:linear-gradient(90deg,transparent,var(--ink) 12%)}
  .apnav.l.r{-webkit-mask-image:linear-gradient(90deg,transparent,var(--ink) 12%,var(--ink) 88%,transparent);
    mask-image:linear-gradient(90deg,transparent,var(--ink) 12%,var(--ink) 88%,transparent)}
  .apnav::-webkit-scrollbar{display:none}
  .apnav > *{flex:none}
  .pane.api .apnav .pill,.pane.api .apnav .aptag{min-height:44px;padding:0 16px;font-size:.86rem}

  /* «Использование» на телефоне: сегмент периода и «CSV» — одной строкой ПОД
     пилюлями разделов (находка 24: два похожих ряда навигации стояли подряд,
     фильтры раньше навигации; находка «в одну строку» — круг 2). */
  .apusagectl{display:flex;gap:8px;align-items:center;margin:0 0 12px}
  .apusagectl .aptabs{flex:1;min-width:0;display:flex}
  .apusagectl .aptabs > .t{flex:1;padding:0 6px;min-height:44px;display:flex;
    align-items:center;justify-content:center}
  .apusagectl > .btn2,.apusagectl > .btn2.dead{flex:none;min-height:44px;padding:0 14px}

  /* Одна колонка: правые карточки уходят под левые. */
  .apgrid2,.apgrid2.eq,.apgrid2.apobzor,.apthree,.apsteps3,.aptiles{grid-template-columns:minmax(0,1fr);gap:12px}
  .apmain,.apside{gap:12px}
  .apgrid2 + .apgrid2,.apgrid2 + .apcard,.apcard + .apgrid2{margin-top:12px}
  .apcard,.apkey{padding:15px 16px;border-radius:18px}
  .apkeys{gap:10px}
  .apalerts{gap:8px;margin-bottom:12px}

  /* KPI — по две в ряд. */
  .pane.api .istats,.pane.api .istats.c4,.apdpage .istats.c4{
    grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .pane.api .istat{padding:13px 14px;border-radius:16px}
  .pane.api .istat b{font-size:1.4rem}

  /* Карточка ключа: мета уходит под имя, маска на всю ширину, кнопки в ряд. */
  .apkey .mts{margin-left:0;width:100%;white-space:normal}
  .apmask{flex:1 1 100%}
  .apkey .apkrow{gap:8px}
  .pane.api .apkey .apkbtn.btn2{flex:1;min-height:44px}
  .apkey .aplink.apkbtn{min-height:44px;padding:0 10px}
  .apdots{width:44px;height:44px}
  .apbarcap .r{margin-left:0;width:100%}

  /* Липкая «Создать ключ» (холст 25): над нижней панелью сайта, с запасом под
     cookie-плашку (190 px, как у #tabImg .itotal) и клавиатуру (body.kb). */
  .apfixbar{position:fixed;left:12px;right:12px;bottom:calc(60px + env(safe-area-inset-bottom,0px));
    z-index:3;margin:0}
  .apfixbar .gbtn{box-shadow:var(--sh)}
  .apfixpad{display:block;height:72px}
  body.has-cookiebar .apfixbar{bottom:calc(60px + env(safe-area-inset-bottom,0px) + 190px)}
  body.kb .apfixbar{bottom:6px}
  body.has-cookiebar.kb .apfixbar{bottom:6px}

  .apnote{flex-direction:column;align-items:stretch;gap:12px;padding:13px 15px}
  .apnote .bts{width:100%}
  .apnote .bts .btn2,.apnote .bts .gbtn,.apnote .bts .apbtnd{flex:1;min-height:44px}
  .apaddr{flex-direction:column;align-items:stretch;gap:10px}
  .apaddr .r,.apaddr .apdead{margin-left:0;align-items:stretch}
  .apaddr .r .btn2{width:100%;min-height:44px}
  .apink{padding:15px 16px;border-radius:18px;margin-top:12px}
  .apink .apinkrows{padding:8px}
  /* Перенос шапки — ТОЛЬКО у «Своего кода» (там справа кнопка «Инструкция»);
     у карточек плагинов та же .apinkhd без кнопки, и перенос ронял кружок
     «C»/«G» на отдельную строку (находка 33). */
  .apink .apinkhd{flex-wrap:wrap}
  .apink .apinkhd .r{width:100%;margin-left:0}
  .apink .apinkhd .r .btn2{width:100%}
  .aprow2 .r{width:100%;margin-left:0;justify-content:space-between}
  .apbts{flex-direction:column;align-items:stretch}
  .apbts .gbtn{width:100%}

  /* Документация: оглавление уступает липкой выпадашке. */
  .aptoc{display:none}
  .apsel{display:flex;position:sticky;top:0;z-index:3;margin-bottom:12px}
  .apmenu{width:auto}
  .apmenu .mi{min-height:44px}
  .apdoccol{max-width:none}
  .apdoccol .apsec + .apsec{margin-top:24px;padding-top:24px}
  .apsecthd{margin-top:20px}

  /* Код: шапка с кнопкой та же, что на 1440; мишень кнопки 44 px.
     Подпись «прокручиваются вбок →» на 390 не влезает рядом с кнопкой и
     растягивала весь блок за край экрана (круг 3, блокер) — прячем: про
     прокрутку говорит затухание справа. */
  .apcode .t{padding:4px 4px 4px 14px;min-height:48px}
  .apcode.scroll .t .sh{display:none}
  .apcode.scroll .t .cp{margin-left:auto}
  .apcode pre{padding:12px 14px;font-size:.78rem}
  .apcode .cp .btn2{min-height:44px;padding:0 16px}

  /* Таблица-карточками. Включается классом .apcards на .aptbl: шапка прячется,
     каждая строка становится карточкой, подписи колонок приезжают из data-l. */
  .aptbl.apcards{min-width:0}
  .aptbl.apcards .hd{display:none}
  .aptbl.apcards .rw{grid-template-columns:minmax(0,1fr)!important;gap:4px;
    padding:12px 14px;border-top:1px solid var(--border)}
  .aptbl.apcards .rw > *{display:flex;align-items:baseline;gap:10px;text-align:left}
  .aptbl.apcards .rw > *[data-l]::before{content:attr(data-l);flex:none;
    font-family:var(--head);font-weight:800;font-size:.6rem;letter-spacing:.1em;
    text-transform:uppercase;color:var(--faint);min-width:96px}
  .aptbl.apcards .rw > .apnum{justify-content:space-between}
  .aptbl.apcards.pr .rw,.aptbl.apcards.img .rw{grid-template-columns:minmax(0,1fr)!important}

  /* Графики ниже — на 390 высокие столбики съедали пол-экрана. */
  .apchart{height:124px;gap:3px}
  .apchart .apcol .b{border-radius:3px 3px 0 0}
  .apax{font-size:.64rem;gap:3px}
  .apwk{height:96px;gap:6px}
  .apwkax{gap:6px}

  /* Окна: кнопки столбиком во всю ширину, поля 16 px (иначе iOS зумит).
     Шапка — по полю .mbox на телефоне (18 px у продукта). */
  .mbox.apmodal{max-width:none}
  .apmodal .mhead{margin:-18px -18px 12px;padding:18px 18px 8px}
  .apmbtns{flex-direction:column;align-items:stretch;gap:9px}
  .apmodal .apmbtns{bottom:-18px;margin:16px -18px -18px;padding:12px 18px 18px}
  .apcloud .aptags{max-height:34vh}
  .apmbtns > .btn2{width:100%;min-height:44px}
  .apmbtns > .gbtn,.apmbtns > .apbtnd{width:100%;min-height:48px}
  .apkeyshow{font-size:.94rem}
  .apmodal .apfld,.apmodal .apsum{font-size:16px}
  .apsumbox{width:100%}

  /* Публичная страница: хиро в одну колонку, код под текстом. Поля и зазоры
     на телефоне плотнее: страница читается сверху вниз, и каждый лишний
     сантиметр — прокрутка (находка 6/20: 21 400 px). */
  .apsecw{padding:28px 0}
  .apsecw.hero{padding:26px 0 28px}
  .aphero,.apdgrid,.apdpair,.apprpair{grid-template-columns:minmax(0,1fr);gap:20px}
  .apprpair{gap:14px;margin-top:14px}
  .apherocol{gap:12px}
  .aph{font-size:1.5rem}
  .aph.big{font-size:1.65rem;margin-bottom:12px}
  .aphsub{font-size:.95rem;margin-bottom:14px}
  .aphblock{padding-top:16px}
  .aphblock .apstep + .apstep{margin-top:8px}
  .aphbts > .gbtn{width:100%;min-height:48px}
  .aphbts > .aphghost{width:100%;min-height:44px}
  .aphprice{margin-top:12px}
  .apdcode pre{font-size:.76rem;padding:10px 14px 14px}
  .apdcode .t{padding:10px 14px 0}
  .apdcode .cap{padding:10px 14px 14px}
  .aperrstrip{padding:12px 14px;gap:6px 14px}
  .apdpage .apstep{gap:10px}
  .apdpage .apstep + .apstep{margin-top:8px}
  .apdpage .apstep span{font-size:.82rem;line-height:1.45}
  .apdtext .apstep{margin-bottom:10px}
  .apdpage .apaddr{padding:10px 12px;gap:6px}
  .apdpage .apcard{padding:15px 16px}
  .apdpage .note{padding:11px 13px}
  .apdpage .aptbl .hd,.apdpage .aptbl .rw{padding:8px 12px}
  .apfaq{gap:6px}
  .apfaq summary{min-height:46px;padding:6px 0}
  .apdgrid > div > .aplbl{margin-bottom:8px}
  /* На телефоне код героя всегда шире экрана: затухание справа говорит
     «прокручивается вбок», полоса прокрутки под ним остаётся видна
     (находка 32). Скриптов на странице нет — включаем по ширине, не по факту. */
  .apdcode .sc::after{content:'';position:absolute;top:0;right:0;bottom:12px;width:64px;
    background:linear-gradient(to right,transparent,var(--ink) 72%);pointer-events:none;z-index:1}
  .apfoot .in{gap:14px}
  .apfoot .r{margin-left:0}

  /* Прайс на телефоне: строка таблицы — две строки текста, а не карточка из
     четырёх подписанных полей (находки 6/20: страница /api была 21 400 px).
     Модель и цена — первой строкой, режим и id — второй, мельче. */
  .apdpage .aptbl.appr .hd{display:none}
  .apdpage .aptbl.appr .rw{gap:1px 10px;padding:8px 12px;align-items:baseline;line-height:1.4}
  .apdpage .aptbl.appr.pr .rw{grid-template-columns:minmax(0,1fr) auto auto;
    grid-template-areas:"nm in out" "md md md"}
  .apdpage .aptbl.appr.img .rw{grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"nm pr" "md md"}
  .apdpage .aptbl.appr .rw > .nm{grid-area:nm;font-weight:600}
  .apdpage .aptbl.appr .rw > .apnum{text-align:right;white-space:nowrap}
  .apdpage .aptbl.appr .rw > .apnum.in{grid-area:in}
  .apdpage .aptbl.appr .rw > .apnum.out{grid-area:out}
  .apdpage .aptbl.appr .rw > .apnum.pr{grid-area:pr}
  .apdpage .aptbl.appr .rw > .apnum[data-l]::before{content:attr(data-l) ' ';
    color:var(--faint);font-weight:400;font-size:.72rem}
  .apdpage .aptbl.appr .rw > .md{grid-area:md;display:flex;flex-wrap:wrap;gap:2px 10px;
    font-size:.74rem;color:var(--faint);overflow-wrap:anywhere;min-width:0}
  .apdpage .aptbl.appr .rw > .md .apmono{font-size:.72rem}
  .apdpage .aptbl.appr .rw > .md .apfmt{display:inline;margin:0 0 0 6px}
  .apdpage .aptbl.appr .rw.grp{grid-template-areas:none;grid-template-columns:1fr}
  .apdpage .aptbl .rwmore{padding:10px 12px;white-space:nowrap}
  .apdpage .aptbl .rwmore span{display:none}
  /* Коды ошибок на телефоне — абзац в два этажа: «402 КОД — что значит»,
     под ним «что делать» (карточка из четырёх подписанных полей делала
     таблицу из 22 строк высотой в 2 700 px). Одно исполнение и на публичной
     /api, и в кабинете — разметка строки у них одна (круг 2, находки 37/45). */
  .aperrtbl .hd{display:none}
  .aperrtbl .rw{display:block;padding:8px 12px;font-size:.84rem;line-height:1.4}
  .aperrtbl .rw > .apstatus{display:inline;font-size:.92rem;margin-right:6px}
  .aperrtbl .rw > .apmono{display:inline;font-size:.74rem;word-break:break-all;white-space:normal}
  .aperrtbl .rw > .apmean{display:inline;color:var(--muted)}
  .aperrtbl .rw > .apmean::before{content:' — '}
  .aperrtbl .rw > .apact{display:block;margin-top:1px}

  /* Шапка публичной /api на телефоне: бренд, «Документация», «Получить ключ»;
     «← Вернуться в сервис» прячем — бренд и так ведёт на сайт, а три ссылки
     в 358 px не встают. */
  .apdhead .in .apdback{display:none}   /* вес 0,3,0 > .apdhead .in a (0,2,1) */
  .apdhead .in{gap:10px}
  .apdhead .apdnav{gap:10px}
  .apdhead .apddoc{font-size:.84rem}
  .apdhead .apdnav .gbtn{min-height:44px;padding:0 12px;font-size:.82rem}

  /* Хиро публичной /api на телефоне: кнопки — сразу под лидом (порядок через
     order, разметка та же, что на 1440), h1 меньше: «Получить ключ» лежала
     на сгибе под тремя шагами и абзацем «Что умеет» (круг 2, I12/находка 32). */
  .aphero .apherocol > .aphbts{order:1;margin-top:0}
  .aphero .apherocol > .aphprice{order:1;margin-top:-4px}
  .aphero .apherocol > .aphblock{order:2}
}

/* Совсем узкие экраны (≤360 — старые Android и iPhone SE). */
@media (max-width:360px){
  .pane.api .istat b{font-size:1.25rem}
  .aptiles{grid-template-columns:minmax(0,1fr)}
}


/* ═══════════════════════════════════════════════════════════════════════════
   22. ДОСТУПНОСТЬ
   ═══════════════════════════════════════════════════════════════════════════ */
.pane.api :focus-visible,.apdpage :focus-visible,.apmodal :focus-visible{
  outline:2px solid var(--primary-h);outline-offset:2px;border-radius:8px}
/* У полей ввода кольцо фокуса — их собственная оранжевая рамка (блок 3), общее
   кольцо выше рисовало второе, снаружи (находка 15). Вес 0,3,0 > 0,2,0. */
.apmodal .apfld:focus-visible,.pane.api .apfld:focus-visible,
.apmodal .apsumbox .apsum:focus-visible,.pane.api .apsumbox .apsum:focus-visible{outline:none}
@media (prefers-reduced-motion:reduce){
  .pane.api *,.apdpage *,.apmodal *{transition:none!important;animation:none!important}
}