/* Инструкция WorkAB на сайте (28.10.2026): оглавление /instrukciya/ и главы. Текст глав — разметка из встроенной
   инструкции кабинета со своими стилями; здесь — только рамка страницы. Собирается scripts/instrukciya-na-sajt.py. */
.ins-glava { background: #fff; color: #101014; }
.ins-glava .wrap { max-width: 1000px; margin: 0 auto; padding: 48px 56px 56px; }
.ins-glava img { max-width: 100%; height: auto; }
.ins-glava figure { max-width: 100%; }
.ins-roliki { background: #fff4ec; border: 1px solid #ffd9c2; border-radius: 12px; padding: 14px 18px; margin: 0 0 28px; }
.ins-roliki b { font: 800 14px/1.4 'Manrope', sans-serif; }
.ins-roliki ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.ins-roliki a, .ins-nav a { color: #FF6A1A; font: 700 15px/1.4 'Manrope', sans-serif; text-decoration: none; }
.ins-roliki a:hover, .ins-nav a:hover { text-decoration: underline; }
.ins-cta { margin: 40px 0 0; padding: 24px; border-radius: 16px; background: #101014; color: #fff; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.ins-cta b { font: 800 20px/1.25 'Manrope', sans-serif; width: 100%; }
.ins-cta span { font: 500 15px/1.5 'Manrope', sans-serif; color: rgba(255, 255, 255, .72); flex: 1 1 320px; }
.ins-nav { display: flex; justify-content: space-between; gap: 16px; margin-top: 28px; flex-wrap: wrap; }
.ins-spisok { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.ins-spisok a { display: grid; grid-template-columns: 34px 1fr; gap: 4px 10px; padding: 16px 18px; border: 1px solid rgba(16, 16, 20, .1); border-radius: 14px; text-decoration: none; color: #101014; height: 100%; box-sizing: border-box; }
.ins-spisok a:hover { border-color: #FF6A1A; }
.ins-spisok span { font: 800 13px/1.6 'JetBrains Mono', monospace; color: #FF6A1A; grid-row: span 2; }
.ins-spisok b { font: 800 16px/1.3 'Manrope', sans-serif; }
.ins-spisok em { font: 500 13.5px/1.5 'Manrope', sans-serif; font-style: normal; color: rgba(16, 16, 20, .6); }
@media (max-width: 700px) {
  .ins-glava .wrap { padding: 32px 16px 40px; }
  /* Строки «название — пояснение» в главах стоят в ряд с шириной названия 170 px — на телефоне в столбик. */
  .ins-glava div[style*="display:flex;gap:14px"] { flex-direction: column; gap: 4px !important; }
  .ins-glava div[style*="width:170px"] { width: auto !important; }
}