/* Страница /api — токен, ресурсы, документация.
   Material 3 + Apple HIG, тот же glass-паттерн, что в ocr.css / imgedit.css.
   Тёмная тема — переопределение --api-* в static/theme.css. */

:root {
    --api-accent: #0d6efd;
    --api-accent-soft: rgba(13, 110, 253, 0.10);
    --api-accent-soft-2: rgba(13, 110, 253, 0.22);
    --api-glass-bg: rgba(255, 255, 255, 0.62);
    --api-glass-bg-strong: rgba(255, 255, 255, 0.82);
    --api-glass-border: rgba(255, 255, 255, 0.65);
    --api-border: rgba(18, 38, 63, 0.10);
    --api-shadow: 0 18px 48px rgba(18, 38, 63, 0.12);
    --api-shadow-soft: 0 8px 24px rgba(18, 38, 63, 0.08);
    --api-text: #212529;
    --api-text-muted: #6b7280;
    --api-radius: 1rem;

    /* код */
    --api-code-bg: #f7f8fa;
    --api-code-text: #24292f;
    --api-code-border: rgba(18, 38, 63, 0.10);
    --api-syn-key: #cf222e;      /* ключевые слова */
    --api-syn-str: #0a7d33;      /* строки */
    --api-syn-num: #0550ae;      /* числа */
    --api-syn-com: #8a94a6;      /* комментарии */
    --api-syn-fn: #8250df;       /* функции */
    --api-syn-jkey: #0550ae;     /* ключи JSON */
    --api-syn-bool: #cf222e;

    --api-warn: #c47f17;
    --api-warn-soft: rgba(196, 127, 23, 0.10);

    /* методы */
    --api-get: #0a7d33;
    --api-get-bg: rgba(10, 125, 51, 0.10);
    --api-post: #0550ae;
    --api-post-bg: rgba(5, 80, 174, 0.10);
}

.api-page-section {
    min-height: calc(100vh - 65px);
}

.api-shell {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 1120px;
    margin: 0 auto;
    padding: 8px 0 48px;
}

/* ─── Hero ─────────────────────────────────────────────────────────────── */

.api-hero {
    text-align: center;
    padding: 10px 0 2px;
}

.api-title {
    font-size: clamp(1.6rem, 2.4vw, 2.1rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 6px;
    color: var(--api-text);
}

.api-subtitle {
    margin: 0;
    color: var(--api-text-muted);
    font-size: .98rem;
}

/* ─── Карточка токена ──────────────────────────────────────────────────── */

.api-token-card {
    border-radius: var(--api-radius);
    padding: 18px 20px;
    background: var(--api-glass-bg);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    backdrop-filter: saturate(180%) blur(18px);
    border: 1px solid var(--api-glass-border);
    box-shadow: var(--api-shadow-soft);
}

.api-token-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-bottom: 10px;
}

.api-token-label {
    font-weight: 600;
    font-size: 1.02rem;
    color: var(--api-text);
}

.api-token-hint {
    font-size: .84rem;
    color: var(--api-text-muted);
}

.api-token-hint code {
    background: var(--api-accent-soft);
    color: var(--api-accent);
    padding: 1px 6px;
    border-radius: 6px;
    font-size: .82rem;
}

.api-token-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.api-token-value {
    flex: 1 1 320px;
    min-width: 0;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: .94rem;
    color: var(--api-accent);
    background: var(--api-glass-bg-strong);
    border: 1px solid var(--api-border);
    border-radius: .7rem;
    padding: 10px 14px;
    overflow-x: auto;
    white-space: nowrap;
}

/* ─── Кнопка копирования ───────────────────────────────────────────────── */

.api-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--api-border);
    background: var(--api-glass-bg-strong);
    color: var(--api-text);
    border-radius: .7rem;
    padding: 9px 14px;
    font-size: .88rem;
    font-weight: 500;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, transform .18s cubic-bezier(.22, 1, .36, 1);
}

.api-copy-btn:hover {
    border-color: var(--api-accent);
    color: var(--api-accent);
    transform: translateY(-1px);
}

.api-copy-btn.is-done,
.api-copy-btn.is-done:hover {
    color: var(--api-get);
    border-color: var(--api-get);
}

.api-copy-sm {
    padding: 5px 10px;
    font-size: .8rem;
    border-radius: .55rem;
    background: transparent;
}

/* ─── Остаток ресурсов ─────────────────────────────────────────────────── */

.api-res {
    border-radius: var(--api-radius);
    padding: 16px 20px 18px;
    background: var(--api-glass-bg);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    backdrop-filter: saturate(180%) blur(18px);
    border: 1px solid var(--api-glass-border);
    box-shadow: var(--api-shadow-soft);
}

.api-res-head {
    font-weight: 600;
    font-size: 1.02rem;
    margin-bottom: 14px;
    color: var(--api-text);
}

.api-res-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
    gap: 10px;
}

.api-res-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 12px 8px;
    border-radius: .8rem;
    background: var(--api-glass-bg-strong);
    border: 1px solid var(--api-border);
    transition: transform .2s cubic-bezier(.22, 1, .36, 1), box-shadow .2s ease;
}

.api-res-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--api-shadow-soft);
}

.api-res-ico {
    font-size: 1rem;
    line-height: 1.4;
    color: var(--api-accent);
}

.api-res-num {
    font-size: 1.24rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--api-text);
}

.api-res-cap {
    font-size: .78rem;
    color: var(--api-text-muted);
    text-align: center;
}

.api-res-note {
    margin-top: 12px;
    font-size: .82rem;
    color: var(--api-text-muted);
}

/* ─── Сегментный контрол (1-й уровень) ─────────────────────────────────── */

.api-seg {
    position: relative;
    display: inline-flex;
    align-self: center;
    gap: 2px;
    padding: 4px;
    border-radius: 999px;
    background: var(--api-glass-bg);
    border: 1px solid var(--api-glass-border);
    box-shadow: var(--api-shadow-soft);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    backdrop-filter: saturate(180%) blur(18px);
}

.api-seg-btn {
    position: relative;
    z-index: 1;
    border: 0;
    background: transparent;
    color: var(--api-text-muted);
    font-size: .94rem;
    font-weight: 600;
    padding: 9px 26px;
    border-radius: 999px;
    cursor: pointer;
    transition: color .25s ease;
    white-space: nowrap;
}

.api-seg-btn.is-active {
    color: #fff;
}

.api-seg-thumb {
    position: absolute;
    z-index: 0;
    top: 4px;
    bottom: 4px;
    border-radius: 999px;
    background: var(--api-accent);
    box-shadow: 0 4px 14px var(--api-accent-soft-2);
    transition: left .38s cubic-bezier(.22, 1, .36, 1), width .38s cubic-bezier(.22, 1, .36, 1);
}

/* ─── Панели ───────────────────────────────────────────────────────────── */

.api-pane,
.api-doc {
    display: none;
}

.api-pane.is-active,
.api-doc.is-active {
    display: block;
    animation: api-fade .35s cubic-bezier(.22, 1, .36, 1);
}

@keyframes api-fade {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

/* ─── Чипы (2-й уровень) ───────────────────────────────────────────────── */

.api-chips-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 18px;
}

.api-chips {
    flex: 1 1 auto;
    min-width: 0;      /* иначе лента распирает контейнер и стрелки уезжают за край */
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding: 2px;
}

.api-chips::-webkit-scrollbar {
    display: none;
}

.api-chip {
    flex: 0 0 auto;
    border: 1px solid var(--api-border);
    background: var(--api-glass-bg-strong);
    color: var(--api-text-muted);
    border-radius: 999px;
    padding: 8px 16px;
    font-size: .88rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .18s ease;
}

.api-chip:hover {
    color: var(--api-accent);
    border-color: var(--api-accent);
}

.api-chip.is-active {
    background: var(--api-accent);
    border-color: var(--api-accent);
    color: #fff;
    box-shadow: 0 4px 14px var(--api-accent-soft-2);
}

.api-chips-arrow {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--api-border);
    background: var(--api-glass-bg-strong);
    color: var(--api-text-muted);
    cursor: pointer;
    font-size: .74rem;
    transition: color .2s ease, border-color .2s ease;
}

.api-chips-arrow:hover {
    color: var(--api-accent);
    border-color: var(--api-accent);
}

/* ─── Разделы документации ─────────────────────────────────────────────── */

.api-doc {
    border-radius: var(--api-radius);
    padding: 22px 24px 26px;
    background: var(--api-glass-bg);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    backdrop-filter: saturate(180%) blur(18px);
    border: 1px solid var(--api-glass-border);
    box-shadow: var(--api-shadow-soft);
}

.api-doc.is-active {
    display: block;
}

.api-sec-head {
    margin: 26px 0 12px;
}

.api-sec-head:first-child {
    margin-top: 0;
}

.api-sec-title {
    font-size: 1.16rem;
    font-weight: 650;
    letter-spacing: -0.01em;
    margin: 0 0 4px;
    color: var(--api-text);
}

.api-sec-desc {
    margin: 0;
    color: var(--api-text-muted);
    font-size: .92rem;
    line-height: 1.55;
}

.api-doc h3 {
    font-size: 1rem;
    font-weight: 600;
    margin: 20px 0 8px;
    color: var(--api-text);
}

.api-doc p {
    font-size: .93rem;
    line-height: 1.62;
    color: var(--api-text);
    margin: 0 0 10px;
}

.api-doc ul {
    font-size: .93rem;
    line-height: 1.62;
    padding-left: 20px;
    margin: 0 0 12px;
}

.api-doc li {
    margin-bottom: 4px;
}

.api-doc code {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: .86em;
    background: var(--api-accent-soft);
    color: var(--api-accent);
    padding: 1px 6px;
    border-radius: 6px;
}

/* ─── Плашка эндпоинта ─────────────────────────────────────────────────── */

.api-ep {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 11px 14px;
    margin: 12px 0;
    border-radius: .8rem;
    background: var(--api-glass-bg-strong);
    border: 1px solid var(--api-border);
}

.api-ep-method {
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 4px 10px;
    border-radius: .5rem;
}

.api-ep-get {
    color: var(--api-get);
    background: var(--api-get-bg);
}

.api-ep-post {
    color: var(--api-post);
    background: var(--api-post-bg);
}

.api-ep-url {
    flex: 1 1 260px;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: .88rem;
    color: var(--api-text);
    background: transparent;
    padding: 0;
    overflow-x: auto;
    white-space: nowrap;
}

.api-ep-auth,
.api-ep-fmt {
    font-size: .78rem;
    color: var(--api-text-muted);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.api-ep-auth.is-req {
    color: var(--api-post);
}

/* ─── Таблицы ──────────────────────────────────────────────────────────── */

.api-table-wrap {
    overflow-x: auto;
    margin: 12px 0 16px;
    border-radius: .8rem;
    border: 1px solid var(--api-border);
    background: var(--api-glass-bg-strong);
}

.api-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
}

.api-table th {
    text-align: left;
    font-weight: 600;
    font-size: .8rem;
    letter-spacing: .01em;
    color: var(--api-text-muted);
    padding: 10px 14px;
    border-bottom: 1px solid var(--api-border);
    white-space: nowrap;
}

.api-table td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--api-border);
    vertical-align: top;
    line-height: 1.55;
    color: var(--api-text);
}

.api-table tbody tr:last-child td {
    border-bottom: 0;
}

.api-table code {
    white-space: nowrap;
}

.api-td-req,
.api-td-type {
    white-space: nowrap;
}

.api-req {
    color: var(--api-post);
    font-weight: 600;
    font-size: .82rem;
}

.api-opt {
    color: var(--api-text-muted);
    font-size: .82rem;
}

.api-table-mono td:first-child {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: .84rem;
    white-space: nowrap;
}

/* ─── Код ──────────────────────────────────────────────────────────────── */

.api-code-block {
    margin: 12px 0 18px;
    border-radius: .8rem;
    border: 1px solid var(--api-code-border);
    background: var(--api-code-bg);
    overflow: hidden;
}

.api-code-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 10px 7px 14px;
    border-bottom: 1px solid var(--api-code-border);
}

.api-code-lang {
    font-size: .78rem;
    font-weight: 600;
    color: var(--api-text-muted);
    letter-spacing: .02em;
}

.api-code {
    margin: 0;
    padding: 14px 16px;
    overflow-x: auto;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: .84rem;
    line-height: 1.6;
    color: var(--api-code-text);
    background: transparent;
    tab-size: 4;
}

.api-code code {
    background: transparent;
    color: inherit;
    padding: 0;
    font-size: inherit;
}

.api-syn-key  { color: var(--api-syn-key); }
.api-syn-str  { color: var(--api-syn-str); }
.api-syn-num  { color: var(--api-syn-num); }
.api-syn-com  { color: var(--api-syn-com); font-style: italic; }
.api-syn-fn   { color: var(--api-syn-fn); }
.api-syn-jkey { color: var(--api-syn-jkey); }
.api-syn-bool { color: var(--api-syn-bool); }

/* ─── Файлы для нейросетей (блок в «Общей информации») ─────────────────── */

.api-files {
    display: grid;
    gap: 10px;
    margin: 14px 0 16px;
}

.api-file {
    border-radius: .8rem;
    padding: 14px 16px;
    background: var(--api-glass-bg-strong);
    border: 1px solid var(--api-border);
    transition: border-color .2s ease, box-shadow .25s ease;
}

.api-file:hover {
    border-color: var(--api-accent);
    box-shadow: var(--api-shadow-soft);
}

.api-file-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.api-file-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    border-radius: .55rem;
    background: var(--api-accent-soft);
    color: var(--api-accent);
    font-size: .85rem;
}

.api-file-url {
    flex: 1 1 auto;
    min-width: 0;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: .95rem;
    font-weight: 600;
    color: var(--api-accent);
    text-decoration: none;
    overflow-x: auto;
    white-space: nowrap;
}

.api-file-url:hover {
    text-decoration: underline;
}

.api-file-text {
    font-size: .89rem;
    line-height: 1.6;
    color: var(--api-text-muted);
}

.api-file-text b {
    color: var(--api-text);
}

/* ─── Заметки ──────────────────────────────────────────────────────────── */

.api-note {
    display: flex;
    gap: 11px;
    padding: 13px 16px;
    margin: 12px 0 16px;
    border-radius: .8rem;
    font-size: .89rem;
    line-height: 1.58;
    border: 0;
}

.api-note i {
    margin-top: 2px;
    flex: 0 0 auto;
}

.api-note-info {
    background: var(--api-accent-soft);
}

.api-note-info i {
    color: var(--api-accent);
}

.api-note-warn {
    background: var(--api-warn-soft);
}

.api-note-warn i {
    color: var(--api-warn);
}

/* ─── Ограничения ──────────────────────────────────────────────────────── */

.api-limits {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 8px;
    margin: 12px 0 16px;
}

.api-limit {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    padding: 10px 14px;
    border-radius: .7rem;
    background: var(--api-glass-bg-strong);
    border: 1px solid var(--api-border);
    font-size: .86rem;
}

.api-limit-l {
    color: var(--api-text-muted);
}

.api-limit-v {
    font-weight: 600;
    color: var(--api-text);
    text-align: right;
}

/* ─── Новости ──────────────────────────────────────────────────────────── */

.api-news {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.api-news-item {
    border-radius: var(--api-radius);
    padding: 18px 22px;
    background: var(--api-glass-bg);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    backdrop-filter: saturate(180%) blur(18px);
    border: 1px solid var(--api-glass-border);
    box-shadow: var(--api-shadow-soft);
}

.api-news-date {
    font-size: .8rem;
    font-weight: 600;
    color: var(--api-accent);
    letter-spacing: .01em;
}

.api-news-title {
    font-size: 1.06rem;
    font-weight: 650;
    margin: 5px 0 8px;
    color: var(--api-text);
}

.api-news-body {
    font-size: .93rem;
    line-height: 1.62;
    color: var(--api-text);
}

.api-news-body p {
    margin: 0 0 8px;
}

.api-news-body p:last-child {
    margin-bottom: 0;
}

.api-news-body a {
    color: var(--api-accent);
}

/* ─── Анонимная страница ───────────────────────────────────────────────── */

.api-shell-anon {
    gap: 18px;
}

.api-token-locked .api-token-value {
    color: var(--api-text-muted);
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: .04em;
    user-select: none;
}

.api-token-locked .api-token-value i {
    color: var(--api-accent);
    font-size: .9em;
}

/* Приписка «без токена работать не получится» */
.api-token-note {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--api-border);
    font-size: .86rem;
    line-height: 1.58;
    color: var(--api-text-muted);
}

.api-token-note i {
    margin-top: 3px;
    flex: 0 0 auto;
    color: var(--api-accent);
}

.api-token-note b {
    color: var(--api-text);
}

/* Кнопка-призыв */
.api-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    flex: 0 0 auto;
    border: 0;
    background: var(--api-accent);
    color: #fff;
    font-size: .92rem;
    font-weight: 600;
    border-radius: .7rem;
    padding: 11px 20px;
    cursor: pointer;
    box-shadow: 0 4px 16px var(--api-accent-soft-2);
    transition: transform .2s cubic-bezier(.22, 1, .36, 1), box-shadow .25s ease, filter .2s ease;
}

.api-cta-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px var(--api-accent-soft-2);
    filter: brightness(1.05);
}

.api-cta-btn-lg {
    padding: 14px 28px;
    font-size: 1rem;
    border-radius: .85rem;
}

/* Три карточки возможностей */
.api-feat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
}

.api-feat {
    border-radius: var(--api-radius);
    padding: 20px 22px;
    background: var(--api-glass-bg);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    backdrop-filter: saturate(180%) blur(18px);
    border: 1px solid var(--api-glass-border);
    box-shadow: var(--api-shadow-soft);
    transition: transform .22s cubic-bezier(.22, 1, .36, 1), box-shadow .25s ease;
}

.api-feat:hover {
    transform: translateY(-2px);
    box-shadow: var(--api-shadow);
}

.api-feat-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: .7rem;
    background: var(--api-accent-soft);
    color: var(--api-accent);
    font-size: 1.02rem;
    margin-bottom: 12px;
}

.api-feat-title {
    font-size: 1rem;
    font-weight: 650;
    color: var(--api-text);
    margin-bottom: 5px;
}

.api-feat-text {
    font-size: .89rem;
    line-height: 1.58;
    color: var(--api-text-muted);
}

/* Демонстрационный блок кода */
.api-demo {
    border-radius: var(--api-radius);
    padding: 16px 20px 6px;
    background: var(--api-glass-bg);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    backdrop-filter: saturate(180%) blur(18px);
    border: 1px solid var(--api-glass-border);
    box-shadow: var(--api-shadow-soft);
}

.api-demo-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-bottom: 4px;
}

.api-demo-label {
    font-weight: 600;
    font-size: 1.02rem;
    color: var(--api-text);
}

.api-demo-note {
    font-size: .82rem;
    color: var(--api-text-muted);
}

/* Перечень сервисов */
.api-services {
    border-radius: var(--api-radius);
    padding: 18px 20px 20px;
    background: var(--api-glass-bg);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    backdrop-filter: saturate(180%) blur(18px);
    border: 1px solid var(--api-glass-border);
    box-shadow: var(--api-shadow-soft);
}

.api-services-head {
    font-weight: 600;
    font-size: 1.02rem;
    color: var(--api-text);
    margin-bottom: 14px;
}

.api-services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 8px;
}

.api-service {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-radius: .7rem;
    background: var(--api-glass-bg-strong);
    border: 1px solid var(--api-border);
    font-size: .89rem;
    color: var(--api-text);
}

.api-service i {
    color: var(--api-accent);
    font-size: .95em;
    width: 1.1em;
    text-align: center;
}

/* Финальный призыв */
.api-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    border-radius: var(--api-radius);
    padding: 24px 26px;
    background: linear-gradient(135deg, var(--api-accent-soft), var(--api-glass-bg-strong));
    border: 1px solid var(--api-acc-border, var(--api-glass-border));
    box-shadow: var(--api-shadow-soft);
}

.api-cta-title {
    font-size: 1.08rem;
    font-weight: 650;
    color: var(--api-text);
    margin-bottom: 5px;
}

.api-cta-sub {
    font-size: .89rem;
    line-height: 1.55;
    color: var(--api-text-muted);
    max-width: 620px;
}

/* ─── Мобильные ────────────────────────────────────────────────────────── */

@media (max-width: 767.98px) {
    .api-shell {
        gap: 16px;
        padding-bottom: 32px;
    }

    .api-doc {
        padding: 18px 15px 22px;
    }

    .api-token-card,
    .api-res {
        padding: 15px 16px;
    }

    .api-token-value {
        font-size: .82rem;
        flex-basis: 100%;
    }

    .api-copy-btn {
        width: 100%;
        justify-content: center;
    }

    .api-copy-sm {
        width: auto;
    }

    .api-seg {
        width: 100%;
    }

    .api-seg-btn {
        flex: 1 1 50%;
        padding: 9px 12px;
    }

    .api-res-grid {
        grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
    }

    .api-code {
        font-size: .78rem;
    }

    .api-chips-arrow {
        display: none;
    }

    /* анонимная страница */
    .api-cta-btn {
        width: 100%;
    }

    .api-feat,
    .api-services,
    .api-demo,
    .api-cta {
        padding: 16px 16px;
    }

    .api-cta {
        text-align: center;
    }

    .api-cta-text {
        width: 100%;
    }

    .api-token-locked .api-token-value {
        font-size: .78rem;
    }
}