/* ══════════════════════════════════════════════════════════════════════════
   Claude Code Docs — compat.css
   Единый блок совместимости для всех контентных страниц.
   Подключается ПОСЛЕ main.css и code.css.
   v2.0 · 21 июня 2026
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Базовые элементы ─────────────────────────────────────────────────── */
abbr { text-decoration: underline dotted; cursor: help; color: inherit; }

.page-wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--sp-6) var(--page-pad-x) var(--sp-9);
}

/* ── Сетки ────────────────────────────────────────────────────────────── */
.topic-grid, .roadmap, .expert-grid, .role-grid, .quick-nav,
.stack-grid, .for-you-grid, .no-fear-grid, .insights-list, .quotes-grid,
.models-grid, .tariffs-row, .deeper-grid, .compare-grid, .usecase-grid,
.mcp-grid, .top-mcp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--sp-4);
  margin: var(--sp-5) 0;
}

/* ── Карточки ─────────────────────────────────────────────────────────── */
.topic-card, .road-card, .expert-card, .role-card, .quick-nav-item,
.stack-card, .for-you-card, .no-fear-card, .deeper-card, .compare-card,
.usecase-card, .mcp-card, .top-mcp-card, .practice-card, .hook-card,
.principle-item, .quote-card, .model-card, .tariff-card, .step-item, .mini-card {
  background: var(--bg-elev-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  text-decoration: none;
  color: inherit;
  transition: all var(--dur-fast) var(--ease);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
a.road-card:hover, a.topic-card:hover, a.expert-card:hover,
a.quick-nav-item:hover, a.deeper-card:hover {
  border-color: var(--accent-line);
  transform: translateY(-1px);
}

/* ── Иконки / аватары / номера ────────────────────────────────────────── */
.road-num, .qn-icon, .step-num, .topic-icon, .role-icon,
.expert-avatar, .expert-icon, .hero-stat-num, .principle-num,
.hier-circle, .practice-num, .stat-num, .phase-num {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-fg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--fs-sm);
  flex-shrink: 0;
}

/* ── Заголовки карточек ───────────────────────────────────────────────── */
.topic-title, .road-title, .expert-title, .role-title, .qn-title,
.stack-title, .quote-author, .practice-title, .principle-title,
.feature-title, .step-title {
  font-weight: 600;
  font-size: var(--fs-md);
  color: var(--text);
}

/* ── Тело карточек ────────────────────────────────────────────────────── */
.topic-desc, .road-desc, .expert-desc, .role-desc, .qn-desc,
.practice-body, .principle-desc, .feature-desc, .step-desc,
.nf-text, .fy-text, .deeper-desc, .quote-text, .usecase-desc,
.mini-card-body, .mcp-desc, .top-mcp-desc {
  color: var(--text-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}
.insights-list li {
  color: var(--text-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}

/* ── Теги ─────────────────────────────────────────────────────────────── */
.topic-tags, .expert-tags, .expert-pills, .tag-row, .role-path-title, .mcp-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--sp-2);
}
.topic-tag, .expert-tag, .expert-pill, .mcp-tag, .step-flow .step-num {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  padding: 2px 8px;
  border-radius: var(--r-sm);
  background: var(--bg-elev-2);
  color: var(--text-3);
}

/* ── Баннеры / инфо-блоки ─────────────────────────────────────────────── */
.level-banner, .zero-hero, .expert-hero, .team-hero, .principle-banner,
.inspire-block, .analogy-block, .key-insight, .expert-profile, .info-box {
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
  margin: var(--sp-4) 0;
}
.level-banner-links, .quick-actions, .expert-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}
.level-link, .expert-link {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  padding: 4px 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  color: var(--text-3);
  text-decoration: none;
}
.level-link:hover, .expert-link:hover {
  color: var(--accent-fg);
  border-color: var(--accent-line);
}
.level-link.active {
  background: var(--accent-soft);
  color: var(--accent-fg);
  border-color: var(--accent-line);
}
.level-hero-icon, .zero-hero-icon, .expert-hero-title, .team-hero-title,
.principle-banner-text, .level-banner-icon, .inspire-icon, .analogy-icon {
  font-size: 1.5rem;
}

/* ── Цитаты / диаграммы ───────────────────────────────────────────────── */
.practice-quote, .loop-diagram {
  border-left: 3px solid var(--accent);
  padding: var(--sp-3) var(--sp-4);
  background: var(--accent-soft);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-style: italic;
  color: var(--text-2);
  margin: var(--sp-3) 0;
}

/* ── CTA кнопка ───────────────────────────────────────────────────────── */
.cta-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: var(--r-md);
  text-decoration: none;
  transition: all var(--dur-fast) var(--ease);
}
.cta-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px var(--accent-soft);
  color: #fff;
  text-decoration: none;
  background: color-mix(in oklab, var(--accent), white 10%);
}

/* ── Таблица сравнения ────────────────────────────────────────────────── */
.compare-card.bad, .compare-card.good { border-color: var(--border); }
.compare-card.bad  { border-left: 3px solid var(--c-danger); }
.compare-card.good { border-left: 3px solid var(--c-ok); }
.compare-title { font-weight: 700; font-size: var(--fs-md); margin-bottom: var(--sp-2); }
.compare-card.bad  .compare-title { color: var(--c-danger); }
.compare-card.good .compare-title { color: var(--c-ok); }
.compare-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.compare-list li {
  font-size: var(--fs-sm); color: var(--text-2);
  padding-left: 14px; position: relative;
}
.compare-list li::before { content: '•'; position: absolute; left: 0; color: var(--accent); }

/* ── Таблицы ──────────────────────────────────────────────────────────── */
.page-wrap table {
  width: 100%; border-collapse: collapse;
  margin: var(--sp-4) 0; font-size: var(--fs-sm);
}
.page-wrap table th {
  text-align: left; padding: 10px 14px;
  font-family: var(--font-mono); font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: var(--ls-widest);
  color: var(--text-3); border-bottom: 1px solid var(--border-strong);
}
.page-wrap table td {
  padding: 10px 14px; border-bottom: 1px solid var(--border-soft);
  color: var(--text-2); vertical-align: top;
}
.page-wrap table tr:last-child td { border-bottom: none; }
.dtable, .matrix-table, .conflicts-table { width: 100%; border-collapse: collapse; }

/* ── Заголовки внутри page-wrap ───────────────────────────────────────── */
.page-wrap h2 {
  color: var(--text);
  margin-top: var(--sp-7); margin-bottom: var(--sp-4);
  font-size: var(--fs-xl);
}
.page-wrap h3 {
  color: var(--text);
  margin-top: var(--sp-6); margin-bottom: var(--sp-3);
  font-size: var(--fs-lg);
}

/* ── Статистика ───────────────────────────────────────────────────────── */
.stat-row, .team-hero-stats {
  display: flex; flex-wrap: wrap;
  gap: var(--sp-3); margin: var(--sp-4) 0;
}
.stat-box, .hero-stat {
  background: var(--bg-elev-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  text-align: center;
  flex: 1; min-width: 130px;
}
.stat-num, .hero-stat-num { font-size: var(--fs-xl); font-weight: 800; color: var(--accent-fg); }
.stat-label, .hero-stat-label {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: var(--ls-widest);
  color: var(--text-3); margin-top: 4px;
}

/* ── Breadcrumb (добавлен в v2.0) ─────────────────────────────────────── */
.page-back {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-3);
  text-decoration: none;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  margin-bottom: var(--sp-5);
  transition: all var(--dur-fast) var(--ease);
}
.page-back:hover {
  color: var(--text);
  border-color: var(--accent-line);
  background: var(--accent-soft);
  text-decoration: none;
}
.page-back::before { content: '←'; }

/* ═══════════════════════════════════════════════════════════════════════════
   RESCUE LAYER — восстановление стилей для компонентных классов, оставшихся
   без определения. Загружается после main.css, ДО инлайн-<style> страниц,
   поэтому любые локальные стили страницы перекрывают этот слой.
   Автогенерация: scratchpad/gen-rescue.mjs. Не редактировать вручную построчно.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Сетки ─────────────────────────────────────────────────────────────── */
.two-col { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:var(--sp-4); margin:var(--sp-4) 0; align-items:start; }
.prompt-grid, .checklist-grid, .shortcut-grid, .skill-grid, .pattern-grid, .capability-grid, .iface-grid, .tool-grid, .tpl-list, .eco-grid, .overview-grid, .tier-grid, .stack-grid-2, .metric-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:var(--sp-4); margin:var(--sp-5) 0; }

/* ── Карточки-контейнеры ───────────────────────────────────────────────── */
.tpl-card, .prompt-card, .eco-card, .mcp-eco-card, .skill-eco-card, .plugin-eco-card, .iface-card, .tool-card, .skill-card, .section-card, .tech-card, .pattern-card, .technique-card, .problem-card, .faq-item, .concept-block, .rule-item, .mistake-item, .anatomy-item, .sync-step, .check-item, .agreement-item, .red-flag, .stack-item, .group-card, .overview-card, .cost-box, .limit-card, .metric-box, .mentor-card, .saving-card, .tier-card, .quality-card, .run-option-card, .decision-item, .timeline-item, .wf-step, .factory-step, .pipe-stage, .slice-layer, .token-item, .ws-item, .qr-item, .scl-item, .comp-item, .ex-file-card, .amplifier-card, .invariant-box, .how-step, .cat-header, .shortcut-card, .hook-header, .mcp-header, .level-row, .pyramid-row, .triangle-node, .env-row, .session-box, .prompt-box, .term, .antipattern-card, .flow-step, .solution, .layer-row, .cl-item, .usecase-card2, .pros-cons-list, .agent-scope-demo, .index-file, .model-use, .usage-chip, .author-avatar {
  background:var(--bg-elev-1); border:1px solid var(--border); border-radius:var(--r-md);
  padding:var(--sp-4); text-decoration:none; color:inherit;
  transition:border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  display:flex; flex-direction:column; gap:var(--sp-2); margin:0;
}
.warn-box, .warning-box, .tip-box, .callout, .contrast-banner, .obligation-banner, .key-insight-title-box, .inject-example {
  border:1px solid var(--accent-line); background:var(--accent-soft);
  border-radius:var(--r-md); padding:var(--sp-4) var(--sp-5); margin:var(--sp-4) 0;
}
.warn-box, .warning-box { border-color:var(--c-warn-line); background:var(--c-warn-soft); }
a.tpl-card:hover, a.eco-card:hover, a.iface-card:hover, a.tool-card:hover, a.skill-card:hover,
a.section-card:hover, a.problem-card:hover, a.prompt-card:hover, a.mentor-card:hover {
  border-color:var(--accent-line); transform:translateY(-1px);
}

/* ── Заголовки внутри карточек ─────────────────────────────────────────── */
.card-title, .tpl-name, .prompt-title, .eco-name, .iface-title, .tool-title, .skill-title, .section-title, .tech-name, .tech-title, .pattern-name, .pattern-title, .technique-title, .problem-title, .faq-q, .concept-title, .rule-title, .mistake-title, .anatomy-title, .check-title, .group-title, .overview-card-title, .cost-box-title, .limit-title, .metric-title, .mentor-card-title, .saving-title, .tier-name, .quality-label, .run-option-title, .wf-title, .factory-step-title, .pipe-title, .slice-layer-name, .capability-title, .term-title, .key-insight-title, .warning-box-title, .mini-card-title, .cat-title, .shortcut-title, .hook-name, .mcp-title, .sync-step-title, .ws-title, .qr-title, .scl-title, .comp-name, .how-step-text, .solution-title, .pattern-author, .stack-name, .level-name, .pyramid-title, .triangle-name, .red-flag-title, .cl-title, .faq-section-title, .section-sep {
  font-weight:600; font-size:var(--fs-md); color:var(--text); line-height:1.35;
}
.faq-q { cursor:default; }
.section-sep { border-top:1px solid var(--border); margin:var(--sp-6) 0 var(--sp-4); padding-top:var(--sp-4); }

/* ── Описания / тело текста ────────────────────────────────────────────── */
.desc, .note, .eco-desc, .iface-desc, .iface-subtitle, .tool-desc, .skill-desc, .skill-when, .skill-output, .section-desc, .section-subtitle, .section-body, .tech-desc, .tech-example, .pattern-desc, .pattern-body, .pattern-insight, .pattern-role, .technique-desc, .problem-body, .problem-subtitle, .problem-solution-text, .problem-symptom, .faq-a, .concept-body, .concept-analogy, .rule-body, .mistake-body, .mistake-fix, .anatomy-desc, .anatomy-body, .check-desc, .check-body, .check-time, .group-desc, .overview-card-desc, .cost-box-desc, .limit-desc, .metric-desc, .mentor-desc, .saving-num, .tier-desc, .quality-text, .run-option-desc, .wf-desc, .factory-step-desc, .pipe-sub, .pipe-content, .slice-layer-file, .capability-desc, .term-simple, .term-tech, .how-step-sub, .solution-body, .stack-role, .stack-why, .level-desc, .level-result, .pyramid-content, .pyramid-items, .triangle-desc, .triangle-example, .red-flag-body, .red-flag-desc, .red-flag-fix, .cl-text, .st-note, .st-file, .sp-comment, .t-note, .t-prompt, .t-cmd, .ig-note, .dir-note, .prompt-text, .prompt-effect, .prompt-desc, .use-case-label, .flow-desc, .flow-content, .solution-text, .iface-pros, .iface-cons, .comp-desc, .ws-desc, .ws-body, .qr-fix, .scl-body, .decision-text, .decision-detail, .decision-body, .agreement-item-text, .val, .check-content, .check-code, .anatomy-body, .inspire-text, .deeper-desc2, .prev-step-note, .model-use-text, .pipe-body, .sync-step-desc, .sync-step-body, .ex-file-desc, .ex-file-path, .cmd-cell, .session-box-cmd, .env-value, .language-text, .language-markdown, .partial-text {
  color:var(--text-2); font-size:var(--fs-sm); line-height:var(--lh-relaxed);
}
.term-tech, .st-file, .ex-file-path, .session-box-cmd, .t-cmd, .cmd-cell { font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--text-3); }

/* ── Кружки-номера / иконки ────────────────────────────────────────────── */
.check-num, .flow-num, .problem-rank, .cp-step, .how-step-dot, .sync-step-num, .cl-num, .ws-num, .qr-num, .anatomy-num, .pattern-num, .section-num, .factory-step-num, .pipe-dot, .flow-step-icon, .cat-icon, .tool-icon, .eco-icon, .mcp-icon, .problem-icon, .concept-emoji, .deeper-icon, .card-icon, .cost-box-icon, .limit-icon, .metric-icon, .mistake-num, .decision-item-icon, .wf-dot, .slice-layer-icon, .triangle-icon, .red-flag-icon, .flow-arrow, .cp-arrow, .step-arrow, .index-arrow, .ap-icon, .alert-icon, .inspire-icon2, .overview-card-icon, .overview-card-count, .run-option-num, .saving-card-num, .author-avatar, .terminal-dot, .pipe-body-icon, .faq-q-icon, .iface-icon, .skill-icon, .tech-icon, .pattern-icon2 {
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  min-width:32px; height:32px; padding:0 6px; border-radius:50%;
  background:var(--accent-soft); color:var(--accent-fg); font-weight:700; font-size:var(--fs-sm);
}
.flow-arrow, .cp-arrow, .step-arrow, .index-arrow { background:none; color:var(--text-3); font-size:var(--fs-lg); min-width:auto; }
.terminal-dot { min-width:10px; width:10px; height:10px; padding:0; background:var(--text-4); }

/* ── Теги / чипы / бейджи / пилюли ─────────────────────────────────────── */
.chip, .pill, .tool-tag, .tool-chip, .iface-tag, .eco-badge, .eco-package, .skill-cmd, .prompt-label, .prompt-badge, .prompt-copy, .tpl-badge, .pattern-tags, .pattern-meta, .section-tags, .usage-chip, .usecase-label, .term-tag, .tag-cc, .tag-php, .tag-vue, .tag-py, .tag-db, .tag-docker, .tag-git, .tag-mcp, .tag-sec, .level-badge, .mcp-scope, .scope-project, .skill-trigger, .mt-skill, .mt-mcp, .mt-none, .concept-tag, .check-time-badge, .data-label-badge, .badge-quality, .badge-flow, .group-prefix, .ptag, .stag, .sev, .token-badge, .hl2, .hl3, .kbd, .example-label, .problem-severity, .iface-tags, .ws-tags, .use-case-label, .at-ref, .eco-tools, .eco-use, .eco-invoke, .sp-key, .model-name, .rec, .lbl-col, .err-col, .ok-col {
  display:inline-flex; align-items:center; gap:4px;
  font-family:var(--font-mono); font-size:var(--fs-xs); line-height:1.4;
  padding:2px 8px; border-radius:var(--r-sm); background:var(--bg-elev-2); color:var(--text-3);
}
.iface-tags, .pattern-tags, .section-tags, .eco-tools { display:flex; flex-wrap:wrap; gap:6px; background:none; padding:0; margin-top:var(--sp-2); }
.kbd, .kbd { border:1px solid var(--border-strong); background:var(--bg-elev-2); color:var(--text-2); padding:1px 7px; border-radius:var(--r-xs); }

/* ── Токены подсветки кода (inline / <pre>) ────────────────────────────── */
.kw, .ph, .str, .cn, .var, .v, .ci { font-family:var(--font-mono); }
.kw { color:var(--c-violet, #b794f6); }
.str, .s { color:var(--c-ok-fg, #86e0a9); }
.cn, .var, .v { color:var(--c-info-fg, #7fd0ff); }
.ph { color:var(--c-warn-fg, #ffb461); font-style:italic; }
.ci { color:var(--text-3); font-style:italic; }

/* ── Статус-цвета ──────────────────────────────────────────────────────── */
.label-ok, .ok, .green, .yes, .cmp-yes, .cmp-best, .cc-win, .ok-cell, .healthy, .pass, .must { color:var(--c-ok-fg); }
.label-no, .no, .red, .cross, .bad-cell, .unhealthy, .human-win, .red-flag-x, .sev-high { color:var(--c-danger-fg); }
.label-warn, .warn, .partial, .sev-medium, .callout--warn, .blue { color:var(--c-warn-fg); }
.critical { color:var(--c-danger-fg); font-weight:700; }
.blue { color:var(--c-info-fg); }
.check, .cross { font-weight:700; }
.check { color:var(--c-ok-fg); }
.cross { color:var(--c-danger-fg); }
.ok-cell, .bad-cell, .ok-col, .err-col, .lbl-col, .cc-win, .human-win { display:table-cell; }

/* ── Хедеры карточек / строки flex ─────────────────────────────────────── */
.tpl-head, .tpl-foot, .eco-header, .iface-header, .tool-header, .skill-header, .section-header, .tech-card-head, .pattern-header, .pattern-author-line, .problem-header, .problem-title-wrap, .group-header, .group-title-wrap, .concept-header, .faq-section, .cat-header, .mcp-scope-row, .how-step, .sync-step, .check-item, .flow-step, .decision-item, .wf-step, .pipe-stage, .factory-step, .slice-layer, .level-row, .pyramid-row, .compare-row, .compare-card-header, .stack-item, .red-flag, .anatomy-item, .rule-item, .mistake-header, .env-row, .token-row, .token-item, .limit-card, .metric-box, .overview-card, .cost-box, .ex-file-card, .ws-item, .qr-item, .scl-item, .comp-item, .cl-item, .agreement-item, .timeline-item {
  display:flex; gap:var(--sp-3); align-items:flex-start;
}
.tpl-head, .eco-header, .iface-header, .tool-header, .skill-header, .section-header,
.pattern-header, .problem-header, .group-header, .concept-header, .cat-header,
.mistake-header { align-items:center; }
.flow-step, .how-step, .sync-step, .factory-step, .cl-item, .check-item, .agreement-item,
.decision-item, .ws-item, .qr-item, .scl-item, .rule-item, .anatomy-item, .comp-item,
.timeline-item { flex-direction:row; }

/* ── Степперы flow / config-progress ───────────────────────────────────── */
.flow, .flow-cmd, .cp-active, .cp-done, .config-progress, .flow-step-label, .flow-step-sub, .flow-title, .pipe-title2 {}
.flow { display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2); margin:var(--sp-4) 0; }
.flow-cmd { font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--text-2); background:var(--bg-elev-2); padding:2px 8px; border-radius:var(--r-sm); }
.config-progress { display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2); margin:var(--sp-4) 0; }
.cp-active { color:var(--accent-fg); border-color:var(--accent-line)!important; }
.cp-done { color:var(--c-ok-fg); }

/* ── Профиль эксперта / practice ───────────────────────────────────────── */
.practice-header, .expert-avatar-lg, .expert-profile-info, .expert-profile-name, .expert-profile-role, .key-insight-title {}
.practice-header { display:flex; align-items:center; gap:var(--sp-3); margin-bottom:var(--sp-3); }
.expert-avatar-lg { width:56px; height:56px; border-radius:50%; background:var(--accent-soft); color:var(--accent-fg); display:inline-flex; align-items:center; justify-content:center; font-size:1.6rem; flex-shrink:0; }
.expert-profile-info { display:flex; flex-direction:column; gap:2px; }
.expert-profile-name { font-weight:700; font-size:var(--fs-lg); color:var(--text); }
.expert-profile-role { font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--text-3); }
.key-insight-title { font-weight:700; font-size:var(--fs-md); color:var(--accent-fg); margin-bottom:var(--sp-2); }

/* ── Футер страницы ────────────────────────────────────────────────────── */
.page-footer, .footer-nav-link {}
.page-footer { display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--sp-3); margin-top:var(--sp-8); padding-top:var(--sp-5); border-top:1px solid var(--border); }
.footer-nav-link { display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:var(--fs-sm); color:var(--text-2); text-decoration:none; padding:8px 14px; border:1px solid var(--border); border-radius:var(--r-md); transition:border-color var(--dur-fast) var(--ease); }
.footer-nav-link:hover { border-color:var(--accent-line); color:var(--accent-fg); }

/* ── Таблицы-утилиты ───────────────────────────────────────────────────── */
.cmd-table, .verify-table, .comparison-table, .price-table { width:100%; border-collapse:collapse; margin:var(--sp-4) 0; font-size:var(--fs-sm); }
.price-table-wrap { overflow-x:auto; margin:var(--sp-4) 0; }
.cmd, .desc-cell {}
td .cmd, .cmd { font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--accent-fg); }

/* ── Глоссарий (letter-nav + группы) ───────────────────────────────────── */
.letter-nav, .letter-link, .letter-group, .letter-heading, .tag-lang {}
.letter-nav { display:flex; flex-wrap:wrap; gap:6px; margin:var(--sp-4) 0; position:sticky; top:64px; z-index:5; background:var(--bg); padding:var(--sp-2) 0; }
.letter-link { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:var(--r-sm); border:1px solid var(--border); color:var(--text-2); text-decoration:none; font-family:var(--font-mono); font-size:var(--fs-sm); font-weight:600; }
.letter-link:hover { border-color:var(--accent-line); color:var(--accent-fg); }
.letter-group { margin:var(--sp-6) 0; }
.letter-heading { font-family:var(--font-mono); font-size:var(--fs-xl); font-weight:800; color:var(--accent-fg); border-bottom:1px solid var(--border-strong); padding-bottom:var(--sp-2); margin-bottom:var(--sp-3); }
.letter-group .term { border-radius:var(--r-md); margin-bottom:var(--sp-3); }
.term-title { display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; margin-bottom:var(--sp-1); }
.term-simple { margin-bottom:4px; }
/* цветовые метки категорий в глоссарии */
.tag-cc{color:var(--accent-fg);background:var(--accent-soft);}
.tag-php,.tag-vue{color:var(--c-info-fg);background:var(--c-info-soft);}
.tag-py{color:var(--c-ok-fg);background:var(--c-ok-soft);}
.tag-db{color:var(--c-warn-fg);background:var(--c-warn-soft);}
.tag-docker{color:var(--c-info-fg);background:var(--c-info-soft);}
.tag-git{color:var(--c-danger-fg);background:var(--c-danger-soft);}
.tag-mcp{color:var(--c-violet,#b794f6);background:rgba(183,148,246,0.12);}
.tag-sec{color:var(--c-danger-fg);background:var(--c-danger-soft);}
.term.is-hidden, .letter-group.is-hidden { display:none; }

/* ── Кнопки (copy / навигация) ─────────────────────────────────────────── */
.copy-btn-sm, .prompt-copy, .btn-next, .nav-btn {
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  font-family:var(--font-mono); font-size:var(--fs-xs); font-weight:600;
  padding:6px 12px; border-radius:var(--r-sm); border:1px solid var(--border);
  background:var(--bg-elev-2); color:var(--text-2); text-decoration:none;
  transition:border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.copy-btn-sm:hover, .prompt-copy:hover, .btn-next:hover, .nav-btn:hover { border-color:var(--accent-line); color:var(--accent-fg); }
.copy-btn-sm.copied, .prompt-copy.copied { color:var(--c-ok-fg); border-color:var(--c-ok-line); }
.checklist { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:var(--sp-4); margin:var(--sp-4) 0; }

/* ── Прочее / прямоугольные заметки ────────────────────────────────────── */
.mi, .p, .ci-note, .branch, .skill, .step, .rec-box {}
.mi, .p { color:var(--text-2); font-size:var(--fs-sm); line-height:var(--lh-relaxed); }
.branch { font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--accent-fg); background:var(--accent-soft); padding:1px 7px; border-radius:var(--r-sm); }

/* ── Хвост: авто-классификация остаточных классов ──────────────────────── */
.agent-flow, .agent-tasks, .agreement-group, .agreement-items, .amplifier-grid, .anatomy-list, .antipattern-grid, .ap-list, .approach-grid, .arch-diagram, .beginner-steps, .card-grid, .check-list, .comp-grid, .cost-grid, .day-tasks, .decision-flow, .decision-grid, .design-flow, .example-files, .factory-steps, .files, .flow-diagram, .flow-wrap, .hero-stats, .hier-diagram, .hier-files, .how-steps, .ignore-grid, .ignore-list, .incremental-flow, .index-flow, .layer-diagram, .layer-lines, .level-cards, .level-diagram, .limit-bar, .limits-grid, .mentor-grid, .mistake-grid, .mistake-list, .model-table-wrap, .monitor-grid, .next-steps, .orch-arrows, .orch-diagram, .orch-workers, .parallel-grid, .pattern-cards, .pipeline, .plugin-features, .prompts-sequence, .pros-cons-grid, .psychology-cards, .pyramid, .pyramid-wrap, .red-flags, .rof-flow, .role-side-list, .roles-split, .rules-category, .rules-grid, .savings-calc, .scenario-steps, .secrets-grid, .security-checklist, .session-diagram, .session-phases, .sessions-grid, .severity-cards, .size-grid, .slice-layers, .specs-tree, .stack-docs-grid, .stack-files, .stack-tree, .step-list, .sync-steps, .task-flow, .tdd-cycle, .team-scenarios, .technique-title-wrap, .techniques-grid, .terminal-grid, .three-paths, .tier-features, .tip-grid, .token-bar, .token-bar-wrap, .token-breakdown, .token-flow, .tool-list, .tree-wrap, .triangle-diagram, .verify-pyramid, .week-grid, .why-grid, .workflow-steps, .wt-diagram { display:flex; flex-wrap:wrap; flex-direction:column; gap:var(--sp-2); margin:var(--sp-3) 0; }
.active-step, .agent-box, .agreements-section, .alias-block, .antipattern-box, .approach-card, .b-step, .cache-step, .calc-row, .checklist-item, .chip-row, .compare-box, .compare-col, .cons-block, .cost-hero, .day-block, .decision-card, .deeper-section, .design-hero, .design-tool-card, .dev-lane, .df-step, .example-card, .flow-box, .flow-row, .formula-block, .formula-box, .formula-card, .hero-box, .hier-card, .hook-meta-item, .ignore-section, .inc-step, .insight-box, .install-box, .intro-banner, .limit-bar-row, .limit-box, .limit-row, .mistake-col, .monitor-card, .mono-banner, .next-card, .ok-block, .orch-arrow-item, .override-box, .override-row, .parallel-box, .parallel-card, .path-card, .plugin-big-card, .problem-row, .promise-item, .prompt-item, .pros-block, .psych-card, .rof-arrow-col, .rof-box, .role-side, .session-card, .sev-card, .size-card, .sp-item, .sp-section, .stack-docs-card, .start-hero, .success-box, .task-item, .tdd-phase, .terminal-window, .test-hero, .three-col, .tip-block, .tip-card, .warn-block, .why-card, .workflow-step { background:var(--bg-elev-1); border:1px solid var(--border); border-radius:var(--r-md); padding:var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-2); }
.agent-scope-header, .compare-header, .dtc-header, .hook-meta, .level-card-head, .orch-arrow-head, .plugin-big-header, .prompt-header, .rule-example-header, .scenario-header, .scratchpad-header, .section-meta, .stack-docs-header, .stack-header, .technique-header, .terminal-titlebar { display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; }
.a-name, .agent-title, .agreement-group-title, .amplifier-card-title, .antipattern-title, .ap-col-title, .b-step-title, .checklist-title, .compare-label, .contrast-banner-title, .count-label, .day-plan-title, .day-task-title, .decision-label, .decision-q, .deeper-title, .dev-lane-title, .df-title, .eco-section-title, .example-title, .flow-box-title, .hier-title, .hstat-label, .ib-title, .ignore-section-title, .inc-title, .inject-label, .insight-title, .install-title, .invariant-label, .layer-title, .level-card-title, .limit-label, .m-name, .mistake-col-title, .monitor-card-title, .nav-label, .nav-title, .next-card-title, .obligation-banner-title, .orch-center-title, .orch-worker-title, .override-title, .path-title, .pattern-label, .pipe-stage-name, .plugin-big-name, .problem-card-title, .problem-solution-label, .prompt-item-title, .psych-title, .pyr-label, .pyramid-label, .rof-box-title, .role-side-title, .rule-example-title, .rules-category-title, .scenario-title, .session-box-label, .session-box-title, .session-title, .sev-title, .size-label, .sp-title, .stack-docs-name, .stack-file-name, .start-hero-title, .step-label, .task-label, .tdd-phase-name, .term-label, .timeline-day-label, .timeline-title, .tip-title, .token-bar-title, .token-label, .token-name, .week-day-title, .why-card-title, .workflow-step-label { font-weight:600; font-size:var(--fs-md); color:var(--text); }
.a-cons, .a-desc, .a-pros, .a-when, .agent-role, .agent-scope-body, .amplifier-card-desc, .analogy-text, .antipattern-desc, .antipattern-fix, .antipattern-why, .b-step-body, .b-step-desc, .b-step-time, .card-desc, .cat-desc, .code-body, .compare-content, .compare-reason, .compare-text, .contrast-banner-body, .cost-hero-text, .day-task-desc, .day-time, .design-hero-text, .df-desc, .dtc-body, .dtc-note, .dtc-status, .example-desc, .factory-step-body, .fix, .flow-box-sub, .formula-note, .hier-desc, .hier-path, .hook-desc, .inc-desc, .inc-result, .index-comment, .insight-text, .intro-text, .invariant-text, .layer-body, .layer-desc, .level-banner-text, .level-card-body, .level-card-path, .level-content, .limit-note, .limit-val, .mcp-subtitle, .mono-banner-text, .next-card-desc, .obligation-banner-body, .orch-center-sub, .overview-card-body, .page-desc, .path-cons, .path-desc, .path-pros, .pattern-content, .pattern-when, .pattern-why, .pipe-stage-desc, .plugin-big-desc, .problem-card-desc, .prompt-item-text, .psych-desc, .pyramid-text, .rof-box-desc, .role-side-desc, .role-side-subtitle, .rule-example, .rule-example-body, .run-option-body, .scenario-subtitle, .scratchpad-body, .scratchpad-preview, .section-insight, .session-box-desc, .session-desc, .sev-desc, .shortcut-desc, .size-desc, .slice-layer-status, .sp-body, .sp-desc, .sp-val, .stack-docs-sub, .stack-subtitle, .start-hero-desc, .start-hero-promise, .step-body, .step-content, .t-out, .task-dep, .task-desc, .tdd-phase-desc, .technique-body, .technique-subtitle, .term-path, .terminal-body, .test-hero-text, .timeline-content, .timeline-desc, .tip-body, .tip-desc, .token-val, .tpl-desc, .wf-body, .why-card-text, .workflow-step-sub { color:var(--text-2); font-size:var(--fs-sm); line-height:var(--lh-relaxed); }
.a-icon, .agent-arrow, .arrow, .b-step-num, .card-arrow, .cl-icon, .compare-num, .cost-hero-icon, .count-num, .design-hero-icon, .df-arrow, .df-icon, .df-num, .example-num, .group-icon, .hier-num, .hstat-num, .inc-arrow, .insight-icon, .intro-icon, .limit-fill, .limit-track, .m-icon, .mono-banner-icon, .nav-arrow, .next-card-icon, .override-arrow, .parallel-arrow, .pipe-arrow, .pipe-stage-icon, .plugin-big-icon, .problem-card-icon, .psych-icon, .pyramid-icon, .rof-box-icon, .role-side-icon, .rule-icon, .scenario-icon, .size-num, .sp-dot, .stack-docs-icon, .stack-icon, .start-hero-emoji, .step-icon, .task-circle, .tdd-phase-icon, .technique-num, .test-hero-icon, .timeline-day-num, .tip-icon, .token-label-icon, .workflow-step-num { display:inline-flex; align-items:center; justify-content:center; min-width:28px; height:28px; padding:0 6px; border-radius:50%; background:var(--accent-soft); color:var(--accent-fg); font-weight:700; font-size:var(--fs-sm); flex-shrink:0; }
.badge-arch, .badge-bug, .badge-context, .badge-devops, .badge-feat, .badge-laravel, .badge-lim, .badge-ok, .badge-output, .badge-rec, .badge-refact, .badge-review, .badge-safety, .badge-speed, .badge-test, .badge-vue, .badge-win, .badge-wp, .badge-wsl, .cost-pill, .dtc-badge, .layer-badge, .path-badge, .pill-cli, .pill-desk, .pill-high, .pill-jb, .pill-medium, .pill-vsc, .pill-web, .run-option-badge, .saving-pill, .sev-badge, .stack-badge, .tag-blue, .tag-green, .tag-orange, .tag-red, .tag-updated, .technique-badge, .tool-tags { display:inline-flex; align-items:center; gap:4px; font-family:var(--font-mono); font-size:var(--fs-xs); padding:2px 8px; border-radius:var(--r-sm); background:var(--bg-elev-2); color:var(--text-3); }
.anti-table, .cmp-table, .compare-table, .compiler-table, .decision-tbl, .health-table, .kbd-table, .keys-table, .model-table, .observability-table, .opt-table, .pay-table, .problem-table, .progress-table, .skills-table, .stack-table, .summary-tbl, .test-table, .tool-compare-table, .win-table { width:100%; border-collapse:collapse; margin:var(--sp-4) 0; font-size:var(--fs-sm); }
.active-tab, .git-tabs, .js-tabs, .tab-bar, .tab-body, .tab-box, .tab-diagram, .tab-label, .tab-panel, .tab-tasks { display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.lang-bash, .lang-json, .language-bash, .language-json, .language-yaml { font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--text-3); }
.alert--warning, .alert-body, .alert-info, .alert-security, .alert-security-body, .alert-security-icon, .alert-security-list, .alert-security-title, .alert-success, .alert-text, .alert-tip, .alert-warn, .alert-warning, .alert-warning-icon, .callout--danger, .callout--info, .callout-ruflo, .info-callout { border:1px solid var(--border); border-left:3px solid var(--accent); background:var(--bg-elev-1); border-radius:var(--r-md); padding:var(--sp-3) var(--sp-4); margin:var(--sp-3) 0; color:var(--text-2); font-size:var(--fs-sm); line-height:var(--lh-relaxed); }
.clmd, .cmt, .comm { font-family:var(--font-mono); }

/* misc (162): accent advice ans-highlight antipattern-signs b-step-link cache-timeline capability cat-arch cat-bug cat-devops cat-feat cat-refact cat-review cat-test compare-after compare-before context controller count-rec day-plan db delegate dir-main dir-wt driver dto ent env-schema f-part f-plus formula free g-agents g-browser g-coord g-daa g-defence g-embed g-hooks g-memory g-monitor g-neural g-swarm g-terminal g-workflow haiku hier-file hier-level highlight highlighted hist hook-type hstat iface-compare important index-dir l1 l2 l3 layer-0 layer-1 layer-2 layer-3 lv-global lv-laravel lv-nuxt lv-python lvl-basic lvl-expert lvl-mid lvl1 lvl2 lvl3 m-price m-use mainstream max20 max5 mcp model model-cost model-picker navigator next opus orch-arrow-line orch-center orch-level orch-worker orch-worker-dir orchestrator override-loser override-winner page-nav pattern pattern-prompt pkg-laravel pkg-nuxt pkg-python plugin plugin-big-ver plugin-feat prev price-cache price-input price-output primary pro problem-solution prompt pyr-1 pyr-2 pyr-3 pyr-4 pyramid-level quick-ref refactor repository review saving scenario scl-check scope-docker scope-global sect service session-dir sev-examples shortcut-keys size-unit sonnet spec-driven st-dir stack-file steinberger t-agent t-dir t-file t-root task-quality tdd-first term-branch term-session tier-price timeline-day timeline__content timeline__marker token-bar-container token-count token-input token-output total tpl-code type-post type-pre type-stop web week-day worker worker-tests workflow y */
.accent, .advice, .ans-highlight, .antipattern-signs, .b-step-link, .cache-timeline, .capability, .cat-arch, .cat-bug, .cat-devops, .cat-feat, .cat-refact, .cat-review, .cat-test, .compare-after, .compare-before, .context, .controller, .count-rec, .day-plan, .db, .delegate, .dir-main, .dir-wt, .driver, .dto, .ent, .env-schema, .f-part, .f-plus, .formula, .free, .g-agents, .g-browser, .g-coord, .g-daa, .g-defence, .g-embed, .g-hooks, .g-memory, .g-monitor, .g-neural, .g-swarm, .g-terminal, .g-workflow, .haiku, .hier-file, .hier-level, .highlight, .highlighted, .hist, .hook-type, .hstat, .iface-compare, .important, .index-dir, .l1, .l2, .l3, .layer-0, .layer-1, .layer-2, .layer-3, .lv-global, .lv-laravel, .lv-nuxt, .lv-python, .lvl-basic, .lvl-expert, .lvl-mid, .lvl1, .lvl2, .lvl3, .m-price, .m-use, .mainstream, .max20, .max5, .mcp, .model, .model-cost, .model-picker, .navigator, .next, .opus, .orch-arrow-line, .orch-center, .orch-level, .orch-worker, .orch-worker-dir, .orchestrator, .override-loser, .override-winner, .page-nav, .pattern, .pattern-prompt, .pkg-laravel, .pkg-nuxt, .pkg-python, .plugin, .plugin-big-ver, .plugin-feat, .prev, .price-cache, .price-input, .price-output, .primary, .pro, .problem-solution, .prompt, .pyr-1, .pyr-2, .pyr-3, .pyr-4, .pyramid-level, .quick-ref, .refactor, .repository, .review, .saving, .scenario, .scl-check, .scope-docker, .scope-global, .sect, .service, .session-dir, .sev-examples, .shortcut-keys, .size-unit, .sonnet, .spec-driven, .st-dir, .stack-file, .steinberger, .t-agent, .t-dir, .t-file, .t-root, .task-quality, .tdd-first, .term-branch, .term-session, .tier-price, .timeline-day, .timeline__content, .timeline__marker, .token-bar-container, .token-count, .token-input, .token-output, .total, .tpl-code, .type-post, .type-pre, .type-stop, .web, .week-day, .worker, .worker-tests, .workflow, .y { color:var(--text-2); font-size:var(--fs-sm); line-height:var(--lh-relaxed); }

/* ── Статус-цвета (оверлей, последними) ────────────────────────────────── */
.alert-success, .ap-good, .badge-ok, .badge-win, .compare-good, .keep, .secrets-do, .sl-done, .sp-done, .status-pass, .success, .test-after { color:var(--c-ok-fg); }
.alert--warning, .alert-warn, .alert-warning, .cmp-partial, .pill-medium, .price-medium, .sl-todo, .sp-todo, .warning, .yellow { color:var(--c-warn-fg); }
.ap-bad, .callout--danger, .cmp-no, .compare-bad, .danger, .pill-high, .secrets-dont, .sev-critical, .status-fail { color:var(--c-danger-fg); }
.alert-info, .alert-tip, .callout--info, .purple, .shortcut-info { color:var(--c-info-fg); }

/* ═══════════════════════════════════════════════════════════════════════════
   WIDGET FIXES — bespoke-виджеты, которые обобщённое rescue-оформление ломало
   (горизонтальные бар-меры). Идёт ПОСЛЕ rescue-блока → перекрывает его.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── token-bar (expert/token-optimization.html): распределение токенов ──── */
.token-bar-container { display:flex; flex-direction:column; gap:var(--sp-3); margin:var(--sp-4) 0; }
.token-bar-title { font-weight:600; font-size:var(--fs-md); color:var(--text); margin:var(--sp-2) 0; }
.token-row { display:grid; grid-template-columns:minmax(140px,190px) 1fr minmax(80px,max-content); align-items:center; gap:var(--sp-3); margin:0; padding:0; background:none; border:none; }
.token-label { display:flex; align-items:center; gap:6px; font-size:var(--fs-sm); font-weight:500; color:var(--text-2); white-space:nowrap; background:none; border:none; padding:0; }
.token-label-icon { all:unset; font-size:1rem; line-height:1; flex-shrink:0; }
.token-bar-wrap { width:100%; min-width:0; height:24px; background:var(--bg-elev-2); border-radius:var(--r-pill); overflow:hidden; padding:0; display:block; }
.token-bar { height:100%; display:flex; align-items:center; padding:0 10px; border-radius:var(--r-pill); background:var(--accent); color:#0f1117; font-family:var(--font-mono); font-size:var(--fs-xs); font-weight:600; white-space:nowrap; min-width:0; box-sizing:border-box; }
.token-bar.mcp  { background:var(--c-danger); }
.token-bar.hist { background:var(--c-warn); color:#0f1117; }
.token-bar.clmd { background:var(--c-info); }
.token-bar.files, .token-bar.prompt, .token-bar.output, .token-bar.input { background:var(--accent); }
.token-count { font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--text-2); white-space:nowrap; text-align:right; }

/* ── limit-bar (advanced/claude-md-rules.html, beginner/faq.html): меры ── */
.limit-bar { display:flex; flex-direction:column; gap:var(--sp-2); margin:var(--sp-4) 0; }
.limit-bar-row { display:grid; grid-template-columns:minmax(110px,160px) 1fr minmax(70px,max-content); align-items:center; gap:var(--sp-3); margin:0; padding:0; background:none; border:none; }
.limit-label { font-size:var(--fs-sm); color:var(--text-2); white-space:nowrap; }
.limit-track { width:100%; min-width:0; height:14px; background:var(--bg-elev-2); border-radius:var(--r-pill); overflow:hidden; display:block; padding:0; }
.limit-fill { height:100%; display:block; min-width:0; border-radius:var(--r-pill); background:var(--accent); }
.limit-fill.green  { background:var(--c-ok); }
.limit-fill.yellow { background:var(--c-warn); }
.limit-fill.red    { background:var(--c-danger); }
.limit-val { font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--text-2); white-space:nowrap; }