/* ── Блок кода в статье ── */
/* Добавить в article.css */

.article-content pre.article-code {
  position: relative;
  background: #1e1e2e;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px;
  margin: 28px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Плашка с языком — верхний правый угол, только если data-lang задан */
.article-content pre.article-code[data-lang]::before {
  content: attr(data-lang);
  position: absolute;
  top: 10px;
  right: 14px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: #6c6f93;
  pointer-events: none;
}

.article-content pre.article-code code {
  display: block;
  padding: 20px 20px;
  font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Courier New', monospace;
  font-size: 13.5px;
  line-height: 1.7;
  color: #cdd6f4;
  white-space: pre;
  tab-size: 2;
  /* Сдвиг вправо если есть плашка языка, чтобы текст не лез под неё */
  padding-right: 70px;
  max-height: 350px;
}

/* Убираем лишний сдвиг если языка нет */
.article-content pre.article-code:not([data-lang]) code {
  padding-right: 20px;
}

/* Скроллбар кода — тонкий и тёмный */
.article-content pre.article-code::-webkit-scrollbar { height: 4px; }
.article-content pre.article-code::-webkit-scrollbar-track { background: transparent; }
.article-content pre.article-code::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.12);
  border-radius: 2px;
}

/* Мобайл: немного уменьшаем шрифт */
@media (max-width: 640px) {
  .article-content pre.article-code code {
    font-size: 12.5px;
    padding: 16px 16px;
    padding-right: 16px;
  }
  .article-content pre.article-code[data-lang]::before {
    display: none; /* на узком экране плашка мешает */
  }
}