/*
  Страница «MCP-сервер» — hi.datool.ru/mcp/ (шаблон hi/mcp.html, вид утверждён
  пользователем 18.10.2026: «верх 5 → шаги 3 → инструменты 4» + «Сколько стоит»).

  Цвета — переменные темы сайта (--bp-ink, --bp-muted, --line, --bp-surface,
  --bp-surface-2, --bp-hover, --brand, --text-purple), поэтому тёмная тема
  работает сама. Исключение — первый экран и блоки кода: это «экран
  терминала», он тёмный в обеих темах, поэтому цвета у него свои (--mcp-*).

  Порядок: 1 общие переменные, 2 первый экран и факты, 3 разделы и шаги,
  4 вкладки и код, 5 инструменты, 6 тарифы и призыв, 7 телефон.
*/

/* 1. Цвета «терминала» — одни в обеих темах */
.mcp-page {
  --mcp-ink: #e9e6ff;        /* текст на тёмном */
  --mcp-dim: #9a94c4;        /* приглушённый: «$», комментарии */
  --mcp-ok: #9fe3b8;         /* успех и строки в коде */
  --mcp-key: #c7b8ff;        /* ключи JSON и надзаголовок */
  --mcp-bg: #1d1b2b;         /* фон первого экрана и кода */
}

/* 2. Первый экран: текст слева, терминал справа */
.mcp-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 34px;
  align-items: center;
  padding: 36px;
  border-radius: 22px;
  background: var(--mcp-bg);
  color: var(--mcp-ink);
}
.mcp-hero .sf-eyebrow { color: var(--mcp-key); }
.mcp-hero h1 { margin: 0 0 14px; color: #fff; font-size: clamp(30px, 3.1vw, 44px); line-height: 1.12; letter-spacing: -.025em; text-wrap: balance; }
.mcp-hero__lead { margin: 0; max-width: 560px; color: #bdb7e6; font-size: 18px; line-height: 1.5; }
.mcp-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
/* Кнопки на сайте по умолчанию во всю ширину — здесь по содержимому */
.mcp-page .auth-submit { width: auto; min-height: 42px; padding: 8px 22px; }
.mcp-actions .auth-secondary { min-height: 42px; padding: 8px 20px; font-size: 15px; font-weight: 700; }
/* Вторая кнопка на тёмном фоне — прозрачная с белой рамкой */
.mcp-hero__secondary { border-color: rgba(255, 255, 255, .3); background: transparent; color: #fff; }
.mcp-hero__secondary:hover { border-color: #fff; color: #fff; }
/* Терминал: строки переносятся внутри блока, а не растягивают страницу */
.mcp-terminal {
  min-width: 0;
  margin: 0;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px;
  background: rgba(255, 255, 255, .05);
  color: var(--mcp-ink);
  font: 13px/1.7 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.mcp-terminal__dim { color: var(--mcp-dim); }
.mcp-terminal__ok { color: var(--mcp-ok); }

/* Четыре факта под первым экраном */
.mcp-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 18px 0 0; padding: 0; list-style: none; }
.mcp-facts li { padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--bp-surface); }
.mcp-facts strong { display: block; color: var(--bp-ink); font-size: 26px; line-height: 1.2; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.mcp-facts span { display: block; margin-top: 4px; color: var(--bp-muted); font-size: 14px; line-height: 1.45; }

/* 3. Разделы страницы и шаги подключения */
.mcp-section { margin-top: 48px; scroll-margin-top: 24px; }
.mcp-section > .sf-eyebrow { margin: 0 0 8px; }
.mcp-section > h2 { margin: 0 0 8px; color: var(--bp-ink); font-size: clamp(24px, 2.4vw, 32px); line-height: 1.2; letter-spacing: -.02em; text-wrap: balance; }
.mcp-section__lead { max-width: 760px; margin: 0; color: var(--bp-muted); font-size: 17px; line-height: 1.5; }
.mcp-muted { color: var(--bp-muted); font-size: 14px; }

/* Шаги: номер в квадрате, вертикальная линия между номерами */
.mcp-flow { margin: 26px 0 0; padding: 0; list-style: none; }
.mcp-flow__row { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 18px; padding-bottom: 28px; }
.mcp-flow__row::before { content: ""; position: absolute; left: 25px; top: 52px; bottom: 0; width: 2px; background: var(--line); }
.mcp-flow__row:last-child { padding-bottom: 0; }
.mcp-flow__row:last-child::before { display: none; }
.mcp-flow__n { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--brand); color: #fff; font-size: 22px; font-weight: 700; }
.mcp-flow__body { min-width: 0; }
.mcp-flow__body h3 { margin: 12px 0 6px; color: var(--bp-ink); font-size: 21px; line-height: 1.3; }
.mcp-flow__body > p { max-width: 720px; margin: 0 0 12px; color: var(--bp-muted); line-height: 1.6; }
.mcp-flow__body > p:last-child { margin-bottom: 0; }
.mcp-inline-button { display: inline-flex; }

/* 4. Вкладки ассистентов и блоки кода */
.mcp-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.mcp-tabs button { padding: 7px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--bp-surface); color: var(--bp-ink-2); font: inherit; font-size: 14px; cursor: pointer; }
.mcp-tabs button:hover { border-color: var(--brand); }
.mcp-tabs button[aria-selected="true"] { border-color: var(--bp-ink); background: var(--bp-ink); color: var(--bp-surface); font-weight: 700; }
.mcp-tabs button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* Код: длинные строки прокручиваются внутри блока; место справа — под «Скопировать» */
.mcp-code {
  position: relative;
  min-width: 0;
  margin: 0;
  padding: 16px 18px;
  padding-right: 120px;
  border-radius: 14px;
  background: var(--mcp-bg);
  color: var(--mcp-ink);
  font: 13.5px/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre;
  overflow-x: auto;
}
.mcp-code__c { color: var(--mcp-dim); }
.mcp-code__s { color: var(--mcp-ok); }
.mcp-code__k { color: var(--mcp-key); }
/* Кнопка «Скопировать» — добавляет mcp-page.js в каждый блок с data-mcp-copy */
.mcp-copy { position: absolute; top: 10px; right: 10px; padding: 4px 10px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 8px; background: rgba(255, 255, 255, .06); color: var(--mcp-ink); font: inherit; font-family: inherit; font-size: 12px; cursor: pointer; }
.mcp-copy:hover { background: rgba(255, 255, 255, .14); }

/* 5. Инструменты: сетка по 3 */
.mcp-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 22px 0 0; padding: 0; list-style: none; }
.mcp-tool { display: grid; align-content: start; gap: 8px; min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--bp-surface); }
.mcp-tool code { color: var(--text-purple); font-size: 13px; overflow-wrap: anywhere; }
.mcp-tool h3 { margin: 0; color: var(--bp-ink); font-size: 17px; line-height: 1.3; }
.mcp-tool p { margin: 0; color: var(--bp-muted); font-size: 14px; line-height: 1.5; }
.mcp-tool .mcp-tool__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
/* Метки цены и тарифа: серая — 1 запрос, зелёная — бесплатно, жёлтая — ограничение */
.mcp-tag { display: inline-block; padding: 2px 8px; border-radius: 7px; background: var(--bp-surface-2); color: var(--bp-muted); font-size: 12px; font-weight: 700; line-height: 1.5; }
.mcp-tag--free { background: color-mix(in srgb, #16935f 14%, transparent); color: #16935f; }
.mcp-tag--lock { background: color-mix(in srgb, #c98500 16%, transparent); color: #a87400; }
.mcp-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 14px 0 0; color: var(--bp-muted); font-size: 14px; }

/* 6. Тарифы: три карточки; призыв внизу — .info-cta из info-pages.css */
.mcp-prices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
.mcp-price { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--bp-surface); }
.mcp-price .sf-eyebrow { margin: 0; }
.mcp-price h3 { margin: 2px 0 0; color: var(--bp-ink); font-size: 22px; line-height: 1.3; }
.mcp-price p { margin: 0; color: var(--bp-muted); font-size: 15px; line-height: 1.6; }
.mcp-price .auth-link { margin-top: auto; padding-top: 6px; font-size: 15px; }
.mcp-cta { margin-top: 32px; }

/* Тёмная тема сайта: метки цены светлее, иначе тёмно-зелёный не читается */
[data-bs-theme=dark] .mcp-tag--free { color: #5fd39c; }
[data-bs-theme=dark] .mcp-tag--lock { color: #f0c04a; }

/* 7. Планшет и телефон: колонки — в одну, факты — по две */
@media (max-width: 900px) {
  .mcp-hero { grid-template-columns: minmax(0, 1fr); padding: 24px; }
  .mcp-tools, .mcp-prices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mcp-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .mcp-hero { padding: 20px; gap: 22px; }
  .mcp-hero__lead { font-size: 16px; }
  .mcp-tools, .mcp-prices, .mcp-facts { grid-template-columns: minmax(0, 1fr); }
  .mcp-flow__row { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; }
  .mcp-flow__n { width: 40px; height: 40px; border-radius: 12px; font-size: 18px; }
  .mcp-flow__row::before { left: 19px; top: 40px; }
  .mcp-flow__body h3 { margin-top: 7px; font-size: 19px; }
  .mcp-section { margin-top: 38px; }
}