/* =====================================================================
   [v1521] СТРАНИЦА «API КОНФИГУРАТОРА ЗРИТЕЛЕЙ» (/configurator-api)

   Отдельный файл, а не правка header-only.css: стили нужны одной
   странице, и подключает их она сама — первой строкой содержимого.
   Так не нужно пересобирать варианты .cat/.chk общего файла
   (правила фронтенда v1498, п. 3), а на остальных страницах сайта
   этих 15 КБ нет вовсе.

   Общие блоки страницы API магазина (.sp-api-code, .sp-api-tbl,
   .sp-api-warn, .sp-api-note, .sp-api-cta) берутся из header-only.css
   как есть — две документации должны выглядеть как одна семья.
   Здесь только то, чего там нет: шапка, карточки выбора, шаги,
   конструктор запроса, плитки длительности, статусы, вопросы.

   Тёмная тема — в конце файла, под html.sp-dark. Файл грузится
   после sp-dark.css, но правила страницы API там с !important,
   поэтому там, где мы их перебиваем, тоже стоит !important.
   ===================================================================== */

.sp-cd{ --cd-deep:#17122B; --cd-ink2:#2A2440; --cd-ok:#0E9F6E; --cd-warn:#C27C0E; --cd-err:#D14343; }

/* ---------- заголовки разделов ----------
   Содержание строится из h2/h3 — поэтому обычные теги, а не классы.
   h2 — раздел, h3 — метод или подраздел. */
.sp-cd h2{
  position:relative;
  margin:44px 0 14px;
  padding-left:16px;
  font-size:22px;
  line-height:1.3;
  font-weight:800;
  letter-spacing:-.2px;
  color:var(--sp-ink);
}
.sp-cd h2::before{
  content:"";
  position:absolute;
  left:0; top:3px; bottom:3px;
  width:4px;
  border-radius:4px;
  background:linear-gradient(180deg, #9B7BFF, var(--sp-purple));
}
.sp-cd h3{
  margin:34px 0 10px;
  padding-top:18px;
  border-top:1px dashed var(--sp-line);
  font-size:17px;
  line-height:1.35;
  font-weight:700;
  color:var(--sp-ink);
  scroll-margin-top:90px;
}
.sp-cd h2{ scroll-margin-top:90px; }
.sp-cd p{ margin:0 0 12px; }
.sp-cd code{ font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
/* код в тексте — та же плашка, что в таблицах страницы API */
.sp-cd p code, .sp-cd li code, .sp-cd summary code, .sp-cd .sp-api-hint code{
  background:var(--sp-purple-dim);
  color:var(--sp-purple);
  padding:1px 6px;
  border-radius:6px;
  font-size:.88em;
  font-weight:600;
  white-space:nowrap;
}

/* ---------- шапка ----------
   Тёмная в обеих темах: так страница с первого экрана отличается от
   документации магазина (у той шапка светлая), и человек не путает,
   какое API читает. */
.sp-cd-hero{
  position:relative;
  overflow:hidden;
  margin:0 0 26px;
  padding:28px 28px 26px;
  border-radius:18px;
  color:#EEEAFB;
  background:
    radial-gradient(600px 260px at 100% 0%, rgba(155,123,255,.35), transparent 60%),
    radial-gradient(420px 220px at 0% 100%, rgba(66,197,255,.16), transparent 65%),
    linear-gradient(135deg, #17122B 0%, #241A4A 55%, #33236B 100%);
  box-shadow:0 18px 40px -22px rgba(36,26,74,.75);
}
/* тонкая сетка поверх градиента — «чертёж», намёк на конструктор */
.sp-cd-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:28px 28px;
  -webkit-mask-image:linear-gradient(180deg, #000 0%, transparent 85%);
          mask-image:linear-gradient(180deg, #000 0%, transparent 85%);
  pointer-events:none;
}
.sp-cd-hero > *{ position:relative; }
.sp-cd-kicker{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:0 0 14px !important;
  padding:0;
  list-style:none;
}
.sp-cd-kicker span{
  padding:4px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  font-size:12px;
  font-weight:600;
  letter-spacing:.2px;
  color:#D9D2FF;
}
.sp-cd-kicker span.is-rest{ background:rgba(155,123,255,.28); border-color:rgba(190,170,255,.45); color:#fff; }
.sp-cd-title{
  margin:0 0 8px !important;
  font-size:26px;
  line-height:1.25;
  font-weight:800;
  letter-spacing:-.3px;
  color:#fff;
}
.sp-cd-lead{
  max-width:760px;
  margin:0 0 18px !important;
  font-size:15.5px;
  line-height:1.6;
  color:#CFC8EA;
}
/* флекс, а не сетка: адрес длиннее остальных значений, и в сетке с долями
   он обрезался на «…/configurator/ap». Здесь ему достаётся место по тексту,
   а не влезающие карточки переносятся на следующую строку. */
.sp-cd-facts{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:18px;
}
.sp-cd-fact{
  flex:1 1 150px;
  min-width:0;
  padding:10px 13px;
  border-radius:12px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(4px);
          backdrop-filter:blur(4px);
}
.sp-cd-fact span{
  display:block;
  margin-bottom:3px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.5px;
  text-transform:uppercase;
  color:#A99FD0;
}
.sp-cd-fact code{
  display:block;
  overflow-x:auto;
  white-space:nowrap;
  background:none !important;
  padding:0 !important;
  font-size:13.5px;
  font-weight:600;
  color:#fff !important;
  scrollbar-width:none;
}
.sp-cd-fact code::-webkit-scrollbar{ display:none; }
.sp-cd-fact:first-child{ flex:0 1 auto; }
.sp-cd-fact:nth-child(2){ flex:1 1 230px; }
.sp-cd-fact em{
  display:block;
  margin-top:3px;
  font-style:normal;
  font-size:11.5px;
  color:#A99FD0;
}
.sp-cd-btns{ display:flex; flex-wrap:wrap; gap:10px; }
.sp-cd .sp-cd-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 18px;
  border-radius:11px;
  border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.04);
  color:#fff;
  font-size:14px;
  font-weight:600;
  line-height:1.2;
  text-decoration:none;
  transition:background .15s, border-color .15s, transform .15s;
}
.sp-cd .sp-cd-btn:hover{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.5);
  color:#fff;
  text-decoration:none;
  transform:translateY(-1px);
}
.sp-cd .sp-cd-btn.is-main{
  background:#fff;
  border-color:#fff;
  color:#2B1D63;
  box-shadow:0 8px 20px -8px rgba(0,0,0,.55);
}
.sp-cd .sp-cd-btn.is-main:hover{ background:#F1ECFF; color:#2B1D63; }

/* ---------- какое API нужно ---------- */
.sp-cd-pick{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin:6px 0 14px;
}
.sp-cd .sp-cd-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:18px 20px;
  border-radius:16px;
  border:1px solid var(--sp-line);
  background:#fff;
  color:var(--sp-ink);
  text-decoration:none;
  transition:border-color .15s, box-shadow .15s, transform .15s;
}
.sp-cd a.sp-cd-card:hover{
  border-color:#BFB2F2;
  box-shadow:0 12px 28px -18px rgba(76,52,170,.55);
  transform:translateY(-2px);
  text-decoration:none;
  color:var(--sp-ink);
}
.sp-cd-card b{ font-size:16.5px; font-weight:800; }
.sp-cd-card b em{
  margin-left:8px;
  padding:2px 8px;
  border-radius:999px;
  background:var(--sp-purple);
  color:#fff;
  font-style:normal;
  font-size:11px;
  font-weight:700;
  vertical-align:2px;
}
.sp-cd-card > span{ font-size:14px; line-height:1.55; color:var(--sp-muted); }
.sp-cd-card code{
  background:var(--sp-purple-dim);
  color:var(--sp-purple);
  padding:1px 6px;
  border-radius:6px;
  font-size:.88em;
  font-weight:600;
  white-space:nowrap;
}
.sp-cd-card i{
  margin-top:auto;
  font-style:normal;
  font-size:13.5px;
  font-weight:700;
  color:var(--sp-purple);
}
.sp-cd-card.is-here{
  border-color:#CBBFF7;
  background:linear-gradient(160deg, #F6F3FF 0%, #fff 70%);
  box-shadow:inset 0 0 0 1px #E4DCFF;
}

/* ---------- быстрый старт: четыре шага ----------
   Список нумерованный, но номера рисуем сами: тема ставит в списки
   зелёные галочки, а здесь важен именно порядок. */
.sp-cd .sp-cd-steps{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:12px;
  margin:4px 0 16px;
  padding:0;
  list-style:none;
  counter-reset:cdstep;
}
.sp-cd .sp-cd-steps li{
  position:relative;
  margin:0;
  padding:44px 14px 14px;
  border-radius:14px;
  border:1px solid var(--sp-line);
  background:var(--sp-bg);
  font-size:13.5px;
  line-height:1.5;
  counter-increment:cdstep;
}
.sp-cd .sp-cd-steps li::before{
  content:counter(cdstep);
  position:absolute;
  left:14px; top:12px;
  width:24px; height:24px;
  border-radius:50%;
  background:var(--sp-purple);
  color:#fff;
  font-size:12.5px;
  font-weight:800;
  line-height:24px;
  text-align:center;
  box-shadow:0 0 0 4px var(--sp-purple-dim);
}
.sp-cd .sp-cd-steps li::after{
  content:"";
  position:absolute;
  top:24px; left:46px; right:14px;
  height:1px;
  background:linear-gradient(90deg, var(--sp-line), transparent);
}
.sp-cd .sp-cd-steps b{ display:block; margin-bottom:2px; font-size:14px; }

/* ---------- код: углы, кнопка «Копировать» ---------- */
.sp-cd .sp-api-code{ position:relative; border-radius:14px; box-shadow:0 10px 26px -20px rgba(27,23,48,.6); }
.sp-cd .sp-api-tabs{ padding-right:112px; }
.sp-cd-pre{ position:relative; margin:8px 0 12px; }
.sp-cd-pre > .sp-api-pre,
.sp-cd > .sp-api-pre{
  border-radius:14px;
  box-shadow:0 10px 26px -20px rgba(27,23,48,.6);
}
.sp-cd > .sp-api-pre{ margin:8px 0 12px; }
.sp-cd .sp-api-pre{ font-size:13px; tab-size:2; }
.sp-cd-copy{
  position:absolute;
  top:6px; right:8px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 10px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(27,23,48,.82);
  color:#D9D2FF;
  font-size:12px;
  font-weight:600;
  line-height:1.3;
  cursor:pointer;
  transition:background .15s, color .15s, border-color .15s;
}
.sp-cd-copy:hover{ background:#2E2557; color:#fff; }
.sp-cd-copy:focus-visible{ outline:2px solid #9B7BFF; outline-offset:2px; }
.sp-cd-copy.is-ok{ background:#0E6B4C; border-color:#33C48D; color:#fff; }
.sp-cd-copy svg{ width:13px; height:13px; flex:0 0 auto; }
/* в блоке с вкладками кнопка стоит на светлой полосе вкладок */
.sp-api-code > .sp-cd-copy{
  top:5px;
  background:#fff;
  border-color:var(--sp-line);
  color:var(--sp-muted);
}
.sp-api-code > .sp-cd-copy:hover{ color:var(--sp-ink); border-color:#BFB2F2; background:#fff; }
.sp-api-code > .sp-cd-copy.is-ok{ background:#E7F7EF; border-color:#9ADBBE; color:#0E6B4C; }

/* ---------- карта методов ---------- */
.sp-cd .sp-cd-map td:first-child{ width:auto; }
.sp-cd .sp-cd-map td:first-child a{ font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:13.5px; font-weight:600; }
.sp-cd .sp-cd-map tbody tr{ transition:background .12s; }
.sp-cd .sp-cd-map tbody tr:hover{ background:var(--sp-bg); }
.sp-cd-m{
  display:inline-block;
  min-width:54px;
  margin-right:10px;
  padding:2px 0;
  border-radius:6px;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:11px;
  font-weight:800;
  letter-spacing:.4px;
  text-align:center;
  vertical-align:1px;
}
.sp-cd-m.is-get{ background:#E3F6EE; color:#0B7A55; }
.sp-cd-m.is-post{ background:#ECE8FF; color:#5A3FD0; }
.sp-cd-m.is-patch{ background:#FFF1DA; color:#9A5B00; }
.sp-cd-m.is-put{ background:#E2F1FB; color:#1D6A9C; }
.sp-cd-pay{
  display:inline-block;
  margin-left:8px;
  padding:1px 7px;
  border-radius:999px;
  background:#FDECEC;
  color:#B42323;
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.2px;
  vertical-align:1px;
  white-space:nowrap;
}

/* ---------- матрица параметров по площадкам ---------- */
.sp-cd-scroll{
  overflow-x:auto;
  margin:10px 0;
  border:1px solid var(--sp-line);
  border-radius:14px;
  -webkit-overflow-scrolling:touch;
}
.sp-cd-scroll .sp-api-tbl{ margin:0; }
.sp-cd .sp-cd-matrix{ min-width:640px; }
.sp-cd .sp-cd-matrix td{ font-size:13.5px; }
.sp-cd .sp-cd-matrix td:first-child{ width:auto; white-space:normal; min-width:210px; }
.sp-cd .sp-cd-matrix td:first-child small{ display:block; margin-top:3px; font-size:12px; color:var(--sp-muted); }
.sp-cd .sp-cd-matrix th:not(:first-child),
.sp-cd .sp-cd-matrix td:not(:first-child){ text-align:center; }
.sp-cd .sp-cd-matrix td.is-no{ color:#B9B4C9; }
.sp-cd .sp-cd-matrix td.is-yes{ color:var(--sp-ink); font-weight:600; }
.sp-cd .sp-cd-matrix tbody tr:last-child td{ border-bottom:0; }

/* ---------- длительность ---------- */
.sp-cd-time{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:10px;
  margin:10px 0 14px;
}
.sp-cd-time > div{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:14px 12px 12px;
  border-radius:14px;
  border:1px solid var(--sp-line);
  background:#fff;
  text-align:center;
}
.sp-cd-time b{ font-size:13px; font-weight:700; color:var(--sp-muted); text-transform:uppercase; letter-spacing:.4px; }
.sp-cd-time span{ font-size:22px; font-weight:800; color:var(--sp-ink); letter-spacing:-.3px; }
.sp-cd-time code{
  align-self:center;
  margin-top:4px;
  padding:2px 8px;
  border-radius:6px;
  background:var(--sp-purple-dim);
  color:var(--sp-purple);
  font-size:12.5px;
  font-weight:700;
}

/* ---------- конструктор запроса ---------- */
.sp-cd-build{
  margin:10px 0 16px;
  padding:18px;
  border-radius:16px;
  border:1px solid #DCD3FA;
  background:linear-gradient(180deg, #F7F4FF 0%, #fff 60%);
}
.sp-cd-form{
  display:grid;
  grid-template-columns:1fr 1.4fr 1fr 1fr 1.3fr;
  gap:10px;
  margin-bottom:12px;
}
.sp-cd-form label{
  display:flex;
  flex-direction:column;
  gap:5px;
  margin:0;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.4px;
  text-transform:uppercase;
  color:var(--sp-muted);
}
.sp-cd-form input,
.sp-cd-form select{
  width:100%;
  height:40px;
  padding:0 11px;
  border:1px solid var(--sp-line);
  border-radius:10px;
  background:#fff;
  color:var(--sp-ink);
  font-size:14px;
  font-weight:500;
  letter-spacing:0;
  text-transform:none;
  box-shadow:none;
  -webkit-appearance:none;
          appearance:none;
}
.sp-cd-form select{
  padding-right:30px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%237A7391' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 11px center;
}
.sp-cd-form input:focus,
.sp-cd-form select:focus{
  outline:none;
  border-color:#9B7BFF;
  box-shadow:0 0 0 3px rgba(155,123,255,.22);
}
.sp-cd-form input.is-bad{ border-color:var(--cd-err); box-shadow:0 0 0 3px rgba(209,67,67,.15); }
.sp-cd-eta{
  margin:0 0 10px !important;
  font-size:13.5px;
  color:var(--sp-muted);
}
.sp-cd-eta b{ color:var(--sp-ink); }
.sp-cd-build .sp-api-code{ margin:0; }

/* ---------- статусы заказа ---------- */
.sp-cd-states{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:10px;
  margin:10px 0 14px;
}
.sp-cd-states > div{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:14px 14px 13px 16px;
  border-radius:14px;
  border:1px solid var(--sp-line);
  background:#fff;
  overflow:hidden;
}
.sp-cd-states > div::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:4px;
  background:var(--cd-dot, #9A95AD);
}
.sp-cd-states b{ display:flex; align-items:center; gap:8px; font-size:15px; }
.sp-cd-states b::before{
  content:"";
  width:9px; height:9px;
  border-radius:50%;
  background:var(--cd-dot, #9A95AD);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--cd-dot, #9A95AD) 18%, transparent);
}
.sp-cd-states code{
  align-self:flex-start;
  padding:1px 7px;
  border-radius:6px;
  background:var(--sp-bg);
  color:var(--sp-ink);
  font-size:12px;
  font-weight:700;
}
.sp-cd-states span{ font-size:13px; line-height:1.5; color:var(--sp-muted); }
.sp-cd-states .is-on{ --cd-dot:#12A574; }
.sp-cd-states .is-pause{ --cd-dot:#E0A800; }
.sp-cd-states .is-stop{ --cd-dot:#E05252; }
.sp-cd-states .is-off{ --cd-dot:#9A95AD; }

/* ---------- коды ответа ---------- */
.sp-cd-h{
  display:inline-block;
  min-width:44px;
  padding:2px 0;
  border-radius:6px;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:12.5px;
  font-weight:800;
  text-align:center;
}
.sp-cd-h.is-w{ background:#FFF1DA; color:#9A5B00; }
.sp-cd-h.is-e{ background:#FDECEC; color:#B42323; }
.sp-cd .sp-cd-err td:first-child{ width:90px; }

/* ---------- обычный список с точками ---------- */
.sp-cd .sp-cd-list{ margin:6px 0 12px; padding:0; list-style:none; }
.sp-cd .sp-cd-list li{
  position:relative;
  margin:7px 0;
  padding-left:22px;
  line-height:1.55;
}
.sp-cd .sp-cd-list li::before{
  content:"";
  position:absolute;
  left:6px; top:9px;
  width:6px; height:6px;
  border-radius:50%;
  background:var(--sp-purple);
  border:0;
  transform:none;
}

/* ---------- частые вопросы ---------- */
.sp-cd-faq{ display:flex; flex-direction:column; gap:8px; margin:8px 0 10px; }
.sp-cd-faq details{
  border:1px solid var(--sp-line);
  border-radius:14px;
  background:#fff;
  transition:border-color .15s, box-shadow .15s;
}
.sp-cd-faq details[open]{
  border-color:#CBBFF7;
  box-shadow:0 10px 26px -22px rgba(76,52,170,.7);
}
.sp-cd-faq summary{
  position:relative;
  display:block;
  padding:14px 48px 14px 18px;
  font-size:15px;
  font-weight:700;
  line-height:1.45;
  color:var(--sp-ink);
  cursor:pointer;
  list-style:none;
  border-radius:14px;
}
.sp-cd-faq summary::-webkit-details-marker{ display:none; }
.sp-cd-faq summary::marker{ content:""; }
.sp-cd-faq summary::after{
  content:"";
  position:absolute;
  right:18px; top:50%;
  width:9px; height:9px;
  margin-top:-7px;
  border-right:2px solid var(--sp-purple);
  border-bottom:2px solid var(--sp-purple);
  transform:rotate(45deg);
  transition:transform .2s, margin-top .2s;
}
.sp-cd-faq details[open] summary::after{ transform:rotate(-135deg); margin-top:-2px; }
.sp-cd-faq summary:hover{ color:var(--sp-purple); }
.sp-cd-faq summary:focus-visible{ outline:2px solid #9B7BFF; outline-offset:2px; }
.sp-cd-faq details p{
  margin:0 !important;
  padding:0 18px 16px;
  font-size:14.5px;
  line-height:1.6;
  color:var(--sp-ink);
}
.sp-cd-faqbar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:0 0 8px;
}
.sp-cd-faqbar input{
  flex:1 1 260px;
  height:40px;
  padding:0 12px 0 36px;
  border:1px solid var(--sp-line);
  border-radius:10px;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237A7391' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat 12px center;
  color:var(--sp-ink);
  font-size:14px;
  box-shadow:none;
}
.sp-cd-faqbar input:focus{ outline:none; border-color:#9B7BFF; box-shadow:0 0 0 3px rgba(155,123,255,.22); }
.sp-cd-faqbar button{
  height:40px;
  padding:0 14px;
  border:1px solid var(--sp-line);
  border-radius:10px;
  background:#fff;
  color:var(--sp-muted);
  font-size:13px;
  font-weight:600;
  cursor:pointer;
}
.sp-cd-faqbar button:hover{ color:var(--sp-ink); border-color:#BFB2F2; }
.sp-cd-faq .is-hidden{ display:none; }
.sp-cd-faqnone{ display:none; margin:6px 0 0 !important; font-size:14px; color:var(--sp-muted); }
.sp-cd-faqnone.is-on{ display:block; }

/* ---------- узкие экраны ---------- */
@media (max-width:991px){
  .sp-cd .sp-cd-steps{ grid-template-columns:1fr 1fr; }
  .sp-cd-form{ grid-template-columns:1fr 1fr; }
  .sp-cd-form label:nth-child(2){ grid-column:span 1; }
  .sp-cd-states{ grid-template-columns:1fr 1fr; }
}
@media (max-width:600px){
  .sp-cd h2{ margin-top:36px; font-size:19.5px; }
  .sp-cd h3{ font-size:16px; }
  .sp-cd-hero{ padding:20px 16px 18px; border-radius:16px; }
  .sp-cd-title{ font-size:21px; }
  .sp-cd-lead{ font-size:14.5px; }
  .sp-cd-fact, .sp-cd-fact:first-child, .sp-cd-fact:nth-child(2){ flex:1 1 100%; }
  .sp-cd-fact:first-child code{ white-space:normal; word-break:break-all; }
  .sp-cd-btns .sp-cd-btn{ flex:1 1 auto; justify-content:center; }
  .sp-cd-pick{ grid-template-columns:1fr; }
  .sp-cd .sp-cd-steps{ grid-template-columns:1fr; }
  .sp-cd .sp-cd-steps li{ padding:12px 12px 12px 50px; }
  .sp-cd .sp-cd-steps li::before{ left:14px; top:12px; }
  .sp-cd .sp-cd-steps li::after{ display:none; }
  .sp-cd-time{ grid-template-columns:repeat(2, 1fr); }
  .sp-cd-time > div:last-child{ grid-column:span 2; }
  .sp-cd-form{ grid-template-columns:1fr; }
  .sp-cd-build{ padding:14px 12px; }
  .sp-cd-states{ grid-template-columns:1fr; }
  .sp-cd .sp-api-tbl td:first-child{ white-space:normal; }
  .sp-cd .sp-cd-map td:first-child{ white-space:nowrap; }
  .sp-cd .sp-cd-map td{ padding:9px 8px; }
  .sp-cd-m{ min-width:46px; margin-right:6px; }
  .sp-cd .sp-cd-err td:first-child{ width:60px; }
  .sp-cd p code, .sp-cd li code, .sp-cd summary code, .sp-cd .sp-api-hint code{ white-space:normal; word-break:break-word; }
}

/* ---------- защита от стилей статьи ----------
   Текст информационной страницы сайт оформляет как статью (#content
   .sp-seo-article / .sp-desc-body): у h2 красная полоса слева, у h3 фиолетовая,
   нумерованный список — столбик с зелёными галочками вместо номеров.
   Эти правила сильнее наших (id + часть с !important), поэтому здесь
   перебиваем их тем же #content. Иначе шаги «Быстрого старта» теряли
   номера и выстраивались столбиком, а у заголовков было две полосы. */
#content .sp-cd h2,
#content .sp-cd h3{ border-left:0 !important; }
#content .sp-cd h2{ padding-left:16px !important; }
#content .sp-cd h3{ padding-left:0 !important; font-size:17px; }
#content .sp-cd ol.sp-cd-steps{
  display:grid !important;
  grid-template-columns:repeat(4, 1fr);
  gap:12px !important;
  margin:4px 0 16px !important;
  padding:0 !important;
  list-style:none !important;
  counter-reset:cdstep !important;
}
#content .sp-cd ol.sp-cd-steps > li{
  padding:44px 14px 14px !important;
  margin:0 !important;
  counter-increment:cdstep !important;
  font-size:13.5px !important;
  font-weight:400 !important;
  line-height:1.5;
}
#content .sp-cd ol.sp-cd-steps > li::before{
  content:counter(cdstep) !important;
  display:block !important;
  left:14px; top:12px;
  width:24px; height:24px;
  border-radius:50%;
  background:var(--sp-purple) !important;
  color:#fff !important;
  font-size:12.5px;
  font-weight:800;
  line-height:24px;
  text-align:center;
}
#content .sp-cd ul.sp-cd-list > li::before,
#content .sp-cd .sp-api-warn li::before{ content:"" !important; }
@media (max-width:991px){
  #content .sp-cd ol.sp-cd-steps{ grid-template-columns:1fr 1fr; }
}
@media (max-width:600px){
  #content .sp-cd h2{ font-size:19.5px; }
  #content .sp-cd h3{ font-size:16px; }
  #content .sp-cd ol.sp-cd-steps{ grid-template-columns:1fr; }
  #content .sp-cd ol.sp-cd-steps > li{ padding:12px 12px 12px 50px !important; }

  /* карта методов на телефоне — карточками: путь сверху, описание под ним.
     Двум колонкам не хватало места, таблица вылезала за край экрана. */
  .sp-cd .sp-cd-map, .sp-cd .sp-cd-map tbody, .sp-cd .sp-cd-map tr, .sp-cd .sp-cd-map td{ display:block; width:auto !important; }
  .sp-cd .sp-cd-map thead{ display:none; }
  .sp-cd .sp-cd-map tr{ padding:9px 2px; border-bottom:1px solid var(--sp-line); }
  .sp-cd .sp-cd-map td{ padding:0 !important; border:0 !important; }
  .sp-cd .sp-cd-map td:last-child{ margin-top:3px; padding-left:52px !important; font-size:13px; color:var(--sp-muted); }
  .sp-cd .sp-api-tbl td{ overflow-wrap:anywhere; }

  /* кнопка копирования в полосе вкладок — только значок, чтобы не
     наезжать на вкладки и не закрывать код */
  .sp-cd .sp-api-tabs{ padding-right:44px; }
  .sp-api-code > .sp-cd-copy{ top:5px; padding:6px 8px; }
  .sp-api-code > .sp-cd-copy span{ display:none; }
}
html.sp-dark #content .sp-cd ol.sp-cd-steps > li::before{ background:var(--sp-purple) !important; color:#fff !important; box-shadow:0 0 0 4px rgba(155,123,255,.2); }
html.sp-dark #content .sp-cd ul.sp-cd-list > li::before{ background:#9B8CF0 !important; }
html.sp-dark #content .sp-cd .sp-api-warn li::before{ background:#E0A800 !important; }

@media (prefers-reduced-motion:reduce){
  .sp-cd *, .sp-cd *::before, .sp-cd *::after{ transition:none !important; }
}

/* =====================================================================
   ТЁМНАЯ ТЕМА
   ===================================================================== */
html.sp-dark .sp-cd h2,
html.sp-dark .sp-cd h3{ color:var(--sp-ink) !important; }
html.sp-dark .sp-cd h3{ border-top-color:var(--sp-line) !important; }
html.sp-dark .sp-cd p code,
html.sp-dark .sp-cd li code,
html.sp-dark .sp-cd summary code,
html.sp-dark .sp-cd .sp-api-hint code{
  background:rgba(155,123,255,.16) !important;
  color:#C9BEFF !important;
}
html.sp-dark .sp-cd-hero{
  background:
    radial-gradient(600px 260px at 100% 0%, rgba(155,123,255,.28), transparent 60%),
    radial-gradient(420px 220px at 0% 100%, rgba(66,197,255,.12), transparent 65%),
    linear-gradient(135deg, #120E22 0%, #1D1640 55%, #2A1D5A 100%) !important;
  border:1px solid #3A3358;
}
html.sp-dark .sp-cd .sp-cd-btn{ color:#fff !important; }
html.sp-dark .sp-cd .sp-cd-btn.is-main{ color:#2B1D63 !important; }
html.sp-dark .sp-cd .sp-cd-card{
  background:var(--sp-dark-card) !important;
  border-color:var(--sp-line) !important;
  color:var(--sp-ink) !important;
}
html.sp-dark .sp-cd a.sp-cd-card:hover{ border-color:#6E5BC7 !important; }
html.sp-dark .sp-cd .sp-cd-card.is-here{
  background:linear-gradient(160deg, #2A2250 0%, var(--sp-dark-card) 70%) !important;
  border-color:#5B4AA8 !important;
  box-shadow:none;
}
html.sp-dark .sp-cd .sp-cd-card i{ color:#B4A7F5 !important; }
html.sp-dark .sp-cd .sp-cd-steps li{
  background:var(--sp-dark-raise) !important;
  border-color:var(--sp-line) !important;
}
html.sp-dark .sp-cd .sp-cd-steps li::before{ box-shadow:0 0 0 4px rgba(155,123,255,.2); }
html.sp-dark .sp-api-code > .sp-cd-copy{
  background:var(--sp-dark-card) !important;
  border-color:var(--sp-line) !important;
  color:var(--sp-muted) !important;
}
html.sp-dark .sp-api-code > .sp-cd-copy.is-ok{ background:#123A2C !important; border-color:#2C8A64 !important; color:#9FE6C6 !important; }
html.sp-dark .sp-cd .sp-cd-map tbody tr:hover{ background:var(--sp-dark-raise) !important; }
html.sp-dark .sp-cd-m.is-get{ background:#123A2C; color:#7EE0B5; }
html.sp-dark .sp-cd-m.is-post{ background:#2A2250; color:#C9BEFF; }
html.sp-dark .sp-cd-m.is-patch{ background:#3A2E17; color:#F7D488; }
html.sp-dark .sp-cd-m.is-put{ background:#14304A; color:#8CC8F0; }
html.sp-dark .sp-cd-pay{ background:#40191C; color:#FFA8A8; }
html.sp-dark .sp-cd-scroll{ border-color:var(--sp-line) !important; }
html.sp-dark .sp-cd .sp-cd-matrix td.is-no{ color:#5E5878 !important; }
html.sp-dark .sp-cd-time > div,
html.sp-dark .sp-cd-states > div,
html.sp-dark .sp-cd-faq details{
  background:var(--sp-dark-card) !important;
  border-color:var(--sp-line) !important;
}
html.sp-dark .sp-cd-time code{ background:rgba(155,123,255,.16) !important; color:#C9BEFF !important; }
html.sp-dark .sp-cd-states code{ background:var(--sp-dark-raise) !important; color:var(--sp-ink) !important; }
html.sp-dark .sp-cd-build{
  background:linear-gradient(180deg, #221B40 0%, var(--sp-dark-card) 60%) !important;
  border-color:#3A3358 !important;
}
html.sp-dark .sp-cd-form input,
html.sp-dark .sp-cd-form select,
html.sp-dark .sp-cd-faqbar input,
html.sp-dark .sp-cd-faqbar button{
  background-color:var(--sp-dark-page) !important;
  border-color:var(--sp-line) !important;
  color:var(--sp-ink) !important;
}
html.sp-dark .sp-cd-form input:focus,
html.sp-dark .sp-cd-form select:focus,
html.sp-dark .sp-cd-faqbar input:focus{ border-color:#9B8CF0 !important; }
html.sp-dark .sp-cd-faq details[open]{ border-color:#5B4AA8 !important; box-shadow:none; }
html.sp-dark .sp-cd-faq summary{ color:var(--sp-ink) !important; }
html.sp-dark .sp-cd-faq summary:hover{ color:#C9BEFF !important; }
html.sp-dark .sp-cd-faq summary::after{ border-color:#B4A7F5 !important; }
html.sp-dark .sp-cd-faq details p{ color:var(--sp-ink) !important; }
html.sp-dark .sp-cd-h.is-w{ background:#3A2E17; color:#F7D488; }
html.sp-dark .sp-cd-h.is-e{ background:#40191C; color:#FFA8A8; }
html.sp-dark .sp-cd .sp-cd-list li::before{ background:#9B8CF0; }

/* Тёмная тема сайта красит текст статей правилами с #content (сила id):
   все p и li — приглушённым цветом, все ссылки в p/li/div — сиреневым с
   подчёркиванием. Для шапки, кнопок и карточек это неверно: заголовок
   шапки становился серым, на белой кнопке был сиреневый текст, карточка
   «API магазина» целиком подчёркнута. Перебиваем тем же #content. */
html.sp-dark #content .sp-cd .sp-cd-title{ color:#fff !important; }
html.sp-dark #content .sp-cd .sp-cd-lead{ color:#CFC8EA !important; }
html.sp-dark #content .sp-cd a.sp-cd-btn{ color:#fff !important; text-decoration:none !important; }
html.sp-dark #content .sp-cd a.sp-cd-btn.is-main{ color:#2B1D63 !important; }
html.sp-dark #content .sp-cd a.sp-cd-card,
html.sp-dark #content .sp-cd a.sp-cd-card *{ text-decoration:none !important; }
html.sp-dark #content .sp-cd a.sp-cd-card b{ color:var(--sp-ink) !important; }
html.sp-dark #content .sp-cd a.sp-cd-card > span{ color:var(--sp-muted) !important; }
html.sp-dark #content .sp-cd a.sp-cd-card i{ color:#B4A7F5 !important; }
html.sp-dark #content .sp-cd .sp-cd-card code{ background:rgba(155,123,255,.16) !important; color:#C9BEFF !important; }
html.sp-dark #content .sp-cd .sp-cd-steps li{ color:var(--sp-ink) !important; }
html.sp-dark #content .sp-cd .sp-cd-faq details p{ color:var(--sp-ink) !important; }
html.sp-dark #content .sp-cd .sp-cd-eta{ color:var(--sp-muted) !important; }
html.sp-dark #content .sp-cd .sp-cd-eta b{ color:var(--sp-ink) !important; }