/* ============================================================
   shared.css — единая палитра и типографика для claude-ru
   ============================================================ */

:root {
  --bg: #faf8f3;
  --bg-panel: #f3ede0;
  --bg-card: #ffffff;
  --fg: #2a2622;
  --fg-muted: #6b6259;
  --border: #e3dac7;
  --accent: #c65d3a;
  --accent-soft: #e9b69e;
  --link: #9b4a2e;
  --link-hover: #c65d3a;

  --badge-translation-bg: #f2c7a8;
  --badge-translation-fg: #7a3a1a;
  --badge-guide-bg: #bcd3c8;
  --badge-guide-fg: #29503f;
  --badge-draft-bg: #efe0a8;
  --badge-draft-fg: #6b5316;

  --ai-disclosure-bg: #fff2dc;
  --ai-disclosure-border: #d48a4a;
  --ai-disclosure-fg: #6b3a14;
  --ai-disclosure-icon: #b55a20;

  --ai-soft-bg: #f6f1e6;
  --ai-soft-border: #d8c9ad;
  --ai-soft-fg: #6b6259;
  --ai-soft-icon: #9b9080;

  --code-bg: #f0e9d8;
  --note-bg: #fdf3e7;
  --note-border: #e3b189;

  --font-serif: Georgia, "Times New Roman", "PT Serif", serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "SF Pro Text", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --radius: 6px;
  --radius-card: 10px;
}

[data-theme="dark"] {
  --bg: #1c1a17;
  --bg-panel: #252220;
  --bg-card: #2a2622;
  --fg: #ede6d8;
  --fg-muted: #a89d8d;
  --border: #3e3630;
  --accent: #e8835f;
  --accent-soft: #a85a38;
  --link: #eaa380;
  --link-hover: #f5c2a7;

  --badge-translation-bg: #7a3a1a;
  --badge-translation-fg: #f2c7a8;
  --badge-guide-bg: #29503f;
  --badge-guide-fg: #bcd3c8;
  --badge-draft-bg: #6b5316;
  --badge-draft-fg: #efe0a8;

  --ai-disclosure-bg: #3a2a18;
  --ai-disclosure-border: #8a5a2a;
  --ai-disclosure-fg: #f2c7a8;
  --ai-disclosure-icon: #e89a6a;

  --ai-soft-bg: #2a2622;
  --ai-soft-border: #4a4238;
  --ai-soft-fg: #a89d8d;
  --ai-soft-icon: #8a7f70;

  --code-bg: #1a1715;
  --note-bg: #2f261d;
  --note-border: #7a4a2a;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px; /* чтобы anchor-прыжок не прятал заголовок под topbar */
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-serif);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

body.ui { font-family: var(--font-sans); }

/* Страницы-роадмэпы Сони/Вани: крупнее, уже */
body.reader-large {
  font-size: 19px;
}
body.reader-large .wrap { max-width: 720px; }

/* Разработческие страницы и docs: стандартно */
body.reader-std {
  font-size: 17px;
}
body.reader-std .wrap { max-width: 820px; }

.wrap {
  max-width: 820px;
  margin: 0 auto;
  padding: 32px 24px 96px;
}

/* ---------- Шапка / крошки ---------- */

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 10px 24px;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-sans);
  font-size: 14px;
  position: sticky;
  top: 0;
  z-index: 50;
  min-height: 48px;
  /* Safari: принудительно собрать топбар в отдельный композитный слой,
     иначе при sticky-прокрутке фон «протекает» сквозь бордер и рендер
     отстаёт на кадр. */
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.topbar a { color: var(--link); text-decoration: none; }
.topbar a:hover { color: var(--link-hover); text-decoration: underline; }

.topbar-title {
  color: var(--fg-muted);
  font-weight: 600;
}

.topbar-actions { display: flex; gap: 14px; align-items: center; }

.theme-toggle {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg);
  border-radius: var(--radius);
  padding: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }
.theme-toggle svg { width: 18px; height: 18px; display: block; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

.open-original {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: var(--radius);
  text-decoration: none;
  font-size: 13px;
}
.open-original:hover { background: var(--accent); color: #fff; text-decoration: none; }

/* ---------- Бейджи типов статей ---------- */

.badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.badge-translation { background: var(--badge-translation-bg); color: var(--badge-translation-fg); }
.badge-guide { background: var(--badge-guide-bg); color: var(--badge-guide-fg); }
.badge-draft { background: var(--badge-draft-bg); color: var(--badge-draft-fg); }
.badge-simple { background: var(--badge-guide-bg); color: var(--badge-guide-fg); }

/* ---------- AI-дисклеймер ---------- */

/* Мягкий вариант — для переводов и адаптаций публичной документации.
   Тут указано авторство ИИ, но без alarm-тона: это всё-таки перевод. */
.ai-disclosure {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 14px 0 22px;
  padding: 8px 12px;
  background: var(--ai-soft-bg);
  border: 1px solid var(--ai-soft-border);
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ai-soft-fg);
  line-height: 1.5;
}
.ai-disclosure .ai-icon {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  color: var(--ai-soft-icon);
  margin-top: 1px;
}
.ai-disclosure a {
  color: var(--ai-soft-fg);
  text-decoration: underline;
}

/* Алертный вариант — для статей, полностью написанных ИИ (не переводов).
   Оранжевая рамка слева, контрастный цвет — чтобы сразу было видно,
   что это не перевод публичного материала, а собственный обзор ИИ. */
.ai-disclosure.ai-original {
  padding: 12px 14px;
  background: var(--ai-disclosure-bg);
  border: 1px solid var(--ai-disclosure-border);
  border-left: 4px solid var(--ai-disclosure-border);
  font-size: 13.5px;
  color: var(--ai-disclosure-fg);
}
.ai-disclosure.ai-original .ai-icon {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  color: var(--ai-disclosure-icon);
}
.ai-disclosure.ai-original a {
  color: var(--ai-disclosure-fg);
}
.ai-disclosure strong { font-weight: 700; }

/* ---------- Заголовки статей ---------- */

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  line-height: 1.3;
  color: var(--fg);
  margin-top: 1.8em;
  margin-bottom: 0.6em;
}

h1 { font-size: 2.0em; margin-top: 0.3em; }
h2 { font-size: 1.4em; border-bottom: 1px solid var(--border); padding-bottom: 0.2em; }
h3 { font-size: 1.15em; }

.article-meta {
  font-family: var(--font-sans);
  color: var(--fg-muted);
  font-size: 13px;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.article-meta a { color: var(--link); }

/* ---------- Текст, ссылки, списки ---------- */

p { margin: 0.8em 0; }
a { color: var(--link); }
a:hover { color: var(--link-hover); }

ul, ol { padding-left: 1.5em; }
li { margin: 0.35em 0; }

/* ---------- Код ---------- */

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--code-bg);
  padding: 1px 5px;
  border-radius: 4px;
}

pre {
  background: var(--code-bg);
  padding: 14px 16px;
  border-radius: var(--radius);
  overflow-x: auto;
  font-size: 0.88em;
  line-height: 1.5;
}
pre code { background: transparent; padding: 0; }

/* ---------- Цитаты / заметки ---------- */

blockquote {
  margin: 1em 0;
  padding: 0.6em 1.2em;
  border-left: 3px solid var(--accent-soft);
  background: var(--bg-panel);
  color: var(--fg-muted);
  font-style: italic;
}

.translator-note {
  margin: 1.2em 0;
  padding: 12px 16px;
  background: var(--note-bg);
  border-left: 3px solid var(--note-border);
  border-radius: 4px;
  font-family: var(--font-sans);
  font-size: 0.94em;
}
.translator-note::before {
  content: "От переводчика";
  display: block;
  font-weight: 700;
  color: var(--accent);
  font-size: 0.78em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}

.draft-warn {
  margin: 20px 0 28px;
  padding: 14px 18px;
  background: var(--badge-draft-bg);
  color: var(--badge-draft-fg);
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
}

/* ---------- Карточки на лендинге / роадмэпах ---------- */

.cards {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin: 28px 0 36px;
}

.card {
  display: block;
  padding: 18px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  color: var(--fg);
  text-decoration: none;
  transition: border-color 0.15s, transform 0.15s;
}
.card:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
  text-decoration: none;
}
.card h3 { margin: 0 0 8px; font-size: 1.15em; }
.card p { margin: 0; color: var(--fg-muted); font-size: 0.95em; font-family: var(--font-sans); }

/* Карточка-трек: цветная «ленточка» вместо H3 */
.card-track { padding: 0; overflow: hidden; }
.card-track .card-ribbon {
  padding: 14px 20px;
  font-family: var(--font-serif);
  font-size: 1.2em;
  font-weight: 700;
}
.card-track p {
  margin: 14px 20px 18px;
}
.card .mini-note {
  display: inline-block;
  margin-top: 10px;
  font-family: var(--font-sans);
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--badge-draft-bg);
  color: var(--badge-draft-fg);
}

/* ---------- Роадмэпы: список секций ---------- */

.roadmap-section {
  margin: 28px 0;
}
.roadmap-section h2 {
  margin-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.roadmap-list {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
}
.roadmap-list li {
  padding: 12px 0;
  border-bottom: 1px dashed var(--border);
}
.roadmap-list li:last-child { border-bottom: none; }

.roadmap-list a {
  font-weight: 600;
  text-decoration: none;
}
.roadmap-list a:hover { text-decoration: underline; }

.roadmap-list .ann {
  display: block;
  margin-top: 4px;
  color: var(--fg-muted);
  font-family: var(--font-sans);
  font-size: 0.92em;
}

.roadmap-list .inline-tag {
  display: inline-block;
  margin-left: 8px;
  font-family: var(--font-sans);
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 999px;
  vertical-align: middle;
}
.tag-simple-pending {
  background: var(--badge-draft-bg);
  color: var(--badge-draft-fg);
}
.tag-translation {
  background: var(--badge-translation-bg);
  color: var(--badge-translation-fg);
}
.tag-guide {
  background: var(--badge-guide-bg);
  color: var(--badge-guide-fg);
}
.tag-simple {
  background: var(--badge-guide-bg);
  color: var(--badge-guide-fg);
}

/* ---------- Навигация-внизу ---------- */

.nav-bottom {
  margin-top: 60px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-family: var(--font-sans);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.nav-bottom a {
  text-decoration: none;
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.nav-bottom a:hover { border-color: var(--accent); }

/* ---------- Плейсхолдер для иллюстраций ---------- */

figure { margin: 1.5em 0; }
figure img { max-width: 100%; height: auto; border-radius: var(--radius); }
figcaption {
  margin-top: 8px;
  font-family: var(--font-sans);
  font-size: 0.88em;
  color: var(--fg-muted);
  text-align: center;
}

.illus-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-panel);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 40px 20px;
  color: var(--fg-muted);
  font-family: var(--font-sans);
  text-align: center;
  min-height: 120px;
}

table {
  border-collapse: collapse;
  width: 100%;
  margin: 1em 0;
  font-family: var(--font-sans);
  font-size: 0.95em;
}
th, td {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
th { background: var(--bg-panel); font-weight: 600; }

hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 2em 0;
}

/* ==========================================================
   Трёхколоночный layout: sidebar + content + toc
   ========================================================== */

.layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  max-width: 1300px;
  margin: 0 auto;
  gap: 0;
}
.layout.has-toc {
  grid-template-columns: 260px minmax(0, 1fr) 260px;
  max-width: 1500px;
}

/* Если sidebar не смонтирован (например, JS упал) — wrap сам по себе */
body:not(.has-sidebar) .wrap { margin: 0 auto; }

/* ---------- Sidebar слева ---------- */

.sidebar {
  position: sticky;
  top: 62px;
  align-self: start;
  height: calc(100vh - 62px);
  overflow-y: auto;
  border-right: 1px solid var(--border);
  background: var(--bg);
  font-family: var(--font-sans);
  font-size: 14px;
}

.sidebar-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 1;
}
.sidebar-header .track-name {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.15;
}
.sidebar-header .track-sub {
  font-size: 11px;
  margin-top: 4px;
  opacity: 0.8;
}
.sidebar-header a {
  color: inherit;
  text-decoration: none;
  display: block;
}
.sidebar-header a:hover { text-decoration: none; color: inherit; }

.sidebar-nav {
  padding: 12px 0;
}
.sidebar-nav .sb-section {
  padding: 10px 0 4px;
}
.sidebar-nav .sb-section-title {
  padding: 4px 20px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--fg-muted);
  text-transform: uppercase;
}
.sidebar-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sidebar-nav li { margin: 0; }
.sidebar-nav a {
  display: block;
  padding: 6px 20px 6px 20px;
  color: var(--fg-muted);
  text-decoration: none;
  border-left: 3px solid transparent;
  line-height: 1.3;
}
.sidebar-nav a:hover {
  color: var(--accent);
  background: var(--bg-panel);
}
.sidebar-nav a.active {
  color: var(--fg);
  font-weight: 700;
  border-left-color: var(--accent);
  background: var(--bg-panel);
}
.sidebar-nav a.external::after {
  content: " ↗";
  opacity: 0.5;
  font-size: 0.9em;
}

.sidebar-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  position: sticky;
  bottom: 0;
  background: var(--bg);
}
.sidebar-footer a {
  color: var(--link);
  text-decoration: none;
}
.sidebar-footer a:hover { color: var(--accent); }

/* ---------- TOC справа ---------- */

.toc {
  position: sticky;
  top: 62px;
  align-self: start;
  max-height: calc(100vh - 62px);
  overflow-y: auto;
  padding: 40px 24px 40px 20px;
  border-left: 1px solid var(--border);
  font-family: var(--font-sans);
  font-size: 13px;
}
.toc-title {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--fg-muted);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.toc ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.toc li { margin: 0; line-height: 1.35; }
.toc a {
  display: block;
  padding: 5px 0 5px 12px;
  color: var(--fg-muted);
  text-decoration: none;
  border-left: 2px solid var(--border);
}
.toc a:hover { color: var(--accent); }
.toc a.active {
  color: var(--fg);
  font-weight: 700;
  border-left-color: var(--accent);
}
.toc a.h3 { padding-left: 24px; font-size: 12px; }
.toc.toc-empty { display: none; }

/* ---------- Бадж персоны в topbar ---------- */

.track-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 12px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}
.track-badge:hover { opacity: 0.85; text-decoration: none; }

/* ---------- Burger на мобильном ---------- */

.burger-btn {
  display: none;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg);
  border-radius: var(--radius);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.burger-btn:hover { border-color: var(--accent); color: var(--accent); }
.burger-btn svg { width: 18px; height: 18px; }

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 60;
}
.sidebar-overlay.open { display: block; }

/* ---------- Узкий экран: скрываем sidebar/toc, показываем burger ---------- */

@media (max-width: 1099px) {
  .layout {
    grid-template-columns: 1fr;
  }
  .toc { display: none; }
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 300px;
    max-width: 85vw;
    z-index: 70;
    transform: translateX(-100%);
    transition: transform 0.22s ease-out;
    box-shadow: 2px 0 12px rgba(0,0,0,0.15);
  }
  .sidebar.open { transform: translateX(0); }
  .burger-btn { display: inline-flex; }
  body.drawer-open { overflow: hidden; }
}

/* ---------- Прогресс-бар чтения ---------- */

.read-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: var(--accent);
  z-index: 999;
  transition: width 0.08s linear;
  pointer-events: none;
}

/* ---------- Anchor-permalink на h2/h3 ---------- */

.wrap h2, .wrap h3 { scroll-margin-top: 80px; }

.anchor-link {
  margin-left: 8px;
  color: var(--fg-muted);
  text-decoration: none;
  font-weight: 400;
  font-size: 0.75em;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
}
.wrap h2:hover .anchor-link,
.wrap h3:hover .anchor-link {
  opacity: 0.55;
}
.anchor-link:hover,
.anchor-link:focus {
  opacity: 1 !important;
  color: var(--accent);
  text-decoration: none;
}

/* Кликнули по ссылке — подсветим заголовок на секунду */
.wrap h2:target,
.wrap h3:target {
  animation: target-flash 1.2s ease-out;
}
@keyframes target-flash {
  0%   { background: var(--accent-soft); }
  100% { background: transparent; }
}

/* ---------- Кнопка «Копировать» на блоках кода ---------- */

pre { position: relative; }

.copy-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 3px 9px;
  font-size: 11px;
  font-family: var(--font-sans);
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--fg-muted);
  border-radius: 4px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s, border-color 0.15s, background 0.15s;
}
pre:hover .copy-btn,
.copy-btn:focus { opacity: 1; }
.copy-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
}
.copy-btn.copied {
  color: var(--badge-guide-fg);
  background: var(--badge-guide-bg);
  border-color: var(--badge-guide-bg);
}

/* ---------- Collapsible (<details>/<summary>) ---------- */

.wrap details {
  margin: 1em 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-panel);
}
.wrap details[open] {
  background: var(--bg);
}
.wrap details > summary {
  cursor: pointer;
  padding: 10px 14px;
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--fg);
  list-style: none;
  position: relative;
  user-select: none;
}
.wrap details > summary::-webkit-details-marker { display: none; }
.wrap details > summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 8px;
  color: var(--accent);
  transition: transform 0.15s;
}
.wrap details[open] > summary::before {
  transform: rotate(90deg);
}
.wrap details > summary:hover { color: var(--accent); }
.wrap details > *:not(summary) {
  padding: 0 14px;
}
/* Списки: дополнительный отступ слева, чтобы маркеры-диски не уехали
   за внутреннюю границу details. */
.wrap details > ul,
.wrap details > ol {
  padding-left: 2.5em;
  padding-right: 14px;
}
.wrap details > *:last-child {
  padding-bottom: 12px;
}
.wrap details > p:first-of-type { margin-top: 0; }

/* ---------- Callouts (<aside class="note">) ---------- */

.wrap aside.note {
  margin: 1em 0;
  padding: 10px 14px;
  background: var(--note-bg);
  border-left: 3px solid var(--note-border);
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: 0.95em;
}
.wrap aside.note.note-tip {
  background: var(--badge-guide-bg);
  border-left-color: var(--badge-guide-fg);
  color: var(--badge-guide-fg);
}
.wrap aside.note.note-warning {
  background: var(--badge-draft-bg);
  border-left-color: var(--badge-draft-fg);
  color: var(--badge-draft-fg);
}

/* ---------- Code tabs (мультиязычные CodeGroup) ----------

   HTML-структура:
   <div class="code-tabs">
     <div class="code-tabs-nav">
       <button class="code-tab active" data-lang="curl">cURL</button>
       <button class="code-tab" data-lang="python">Python</button>
       ...
     </div>
     <div class="code-tabs-content">
       <pre data-lang="curl" class="active"><code class="language-bash">...</code></pre>
       <pre data-lang="python"><code class="language-python">...</code></pre>
       ...
     </div>
   </div>
--------------------------------------------------------- */

.wrap .code-tabs {
  margin: 1em 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--code-bg);
}
.wrap .code-tabs-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  padding: 0 4px;
}
.wrap .code-tab {
  padding: 7px 14px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--fg-muted);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}
.wrap .code-tab:hover { color: var(--fg); }
.wrap .code-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 600;
}
.wrap .code-tabs-content > pre {
  display: none;
  margin: 0;
  border: none;
  border-radius: 0;
  background: var(--code-bg);
}
.wrap .code-tabs-content > pre.active {
  display: block;
}
/* copy-btn внутри табов — ставим относительно pre, он уже position:relative */
.wrap .code-tabs-content > pre .copy-btn { top: 6px; right: 6px; }

/* ---------- Card group (Next steps блоки) ---------- */

.wrap .card-group {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin: 1.2em 0;
}
.wrap .card-group .card {
  padding: 14px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  color: var(--fg);
  text-decoration: none;
  transition: border-color 0.15s, transform 0.15s;
}
.wrap .card-group .card:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
  text-decoration: none;
}
.wrap .card-group .card strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.05em;
  margin-bottom: 6px;
}
.wrap .card-group .card p {
  margin: 0;
  color: var(--fg-muted);
  font-size: 0.92em;
}

/* ---------- Мобильный ---------- */
@media (max-width: 520px) {
  .wrap { padding: 20px 16px 64px; }
  h1 { font-size: 1.6em; }
  h2 { font-size: 1.2em; }
  .topbar { flex-direction: column; align-items: flex-start; padding: 12px 16px; }
  .anchor-link { display: none; } /* на мобилке бесполезна */
  .copy-btn { opacity: 1; } /* на тач-экране hover не сработает */
}