/* === Твоя часть (оставил без изменений) === */
[data-md-color-scheme="default"] {
  --md-primary-fg-color: #363a48;
  --md-accent-fg-color: #219653;
}


.md-grid {
  max-width: 80%;        /* или например 1200px */
  margin-right: auto;    /* пустое пространство справа */
}

.md-typeset h5 {
  font-size: 0.8rem;   /* размер */
  font-weight: 600;    /* жирность */
  color: #000508;
  text-transform: none;
}

.md-nav__item .md-nav__link--active {
  color: #219653;
  font-weight: 600;
  border-radius: 4px;
}
.md-typeset {
  max-width: 90%;
  margin-left: 0;
  margin-right: auto;
}
.md-typeset .admonition {
  width: 100%;
  margin-left: 0;
  margin-right: auto;
}
.md-typeset img {
  max-width: 100%;
  height: auto;
}
.md-typeset a {
  color: #3f5b83; /* цвет гиперссылок */
}

.md-typeset a:hover {
  color: #576cb3; /* гиперссыоки при наведении */
  text-decoration: none;
}
/* Инлайновый код (`вот такое`) */
.md-typeset code {
  background-color: #eeecec; /* светлая подложка */
  color: #000000;            /* яркий розовый текст */
}
/* Кнопка копирования кода */
.md-clipboard {
  color: #646464;              /* цвет иконки */
}
/* Блочные вставки кода (``` ... ```) */
.md-typeset pre > code {
  background-color: #e7e7e7; /* тёмная подложка */ 
  padding: 1em;
  border-radius: 6px;
  display: block;
  overflow-x: auto;
}
/* ==========================
   Новая логика рамки: контейнер + fallback для img
   ========================== */

/* ========== Переменные ========== */
:root {
  --frame-width: 3px;       /* толщина рамки, фиксированная */
  --frame-color: #91bb8c;   /* цвет рамки */
  --frame-radius: 2px;      /* скругление */
  --inline-icon-shift: -0.12em;
  --inline-icon-height: 1.0em;
}


@media (max-width: 768px) {
  :root {
    --md-typeset-width: 100% !important;
  }
  
  .md-content, .md-main__inner {
    margin: 0 !important;
    padding: 0 !important;
    padding-left: 0.5rem !important;
    max-width: 100% !important;
  }
}

/* ========== Рекомендованный режим: класс на контейнере ==========
   Пример использования (HTML):
     <a href="full.png" class="screenshot-frame" style="width:30%">
       <img src="thumb.png" alt="">
     </a>
   или (если нужно 100% по ширине блока):
     <a class="screenshot-frame screenshot-block" style="max-width:720px">...</a>
================================= */
.screenshot-frame {
  display: inline-block;           /* inline-block — гибко: можно ставить в тексте или как блок */
  box-sizing: border-box;          /* padding входит в ширину */
  padding: var(--frame-width);     /* это и есть рамка */
  background-color: var(--frame-color);
  border-radius: var(--frame-radius);
  overflow: hidden;
  vertical-align: middle;
}

/* Утилитарный класс для "займет всю доступную ширину блока" */
.screenshot-frame.screenshot-block {
  display: block;      /* будет вести себя как блок */
  width: 100%;         /* займет ширину контейнера; можно комбинировать с max-width через inline-style */
}

/* Вложенное изображение: не навязываем width, но не даём выходить за пределы блока */
.screenshot-frame img {
  display: block;
  width: 100%;       /* картинка внутри контейнера занимает всю внутреннюю ширину контейнера */
  height: auto;
  max-width: 100%;
  box-sizing: border-box;
}

/* ========== Режим: класс на самом <img> (удобно в Markdown: {.screenshot-frame width="30%"}) ==========
   Пример Markdown:
     ![Alt](img.png){.screenshot-frame width="30%"}
   Атрибут width="30%" будет применён к <img> — CSS не должен его затирать.
============================================================================= */
img.screenshot-frame {
  display: block;
  box-sizing: border-box;         /* width будет включать padding (рамку) */
  padding: var(--frame-width);    /* рамка вокруг */
  background-color: var(--frame-color);
  border-radius: var(--frame-radius);
  height: auto;
  max-width: 100%;                /* не даст выйти за пределы родителя */
}

/* ВАЖНО: НИ В КОЕМ СЛУЧАЕ не задаём img.screenshot-frame { width:100% } — 
   это бы затирало width="30%" из MD. */

/* Поддержка inline-style width (style="width:30%") и атрибута width="30%" —
   ничего дополнительного не требуется: box-sizing:border-box обеспечивает,
   что width включает padding (рамку). */

/* ========== Утилитарные размеры (по желанию) ==========
   Можно использовать в MD: ![...](img){.screenshot-frame .screenshot-sm}
================================= */
.screenshot-sm { max-width: 480px; }
.screenshot-md { max-width: 720px; }
.screenshot-lg { max-width: 1024px; }

/* ========== Совместимость и предупреждения ==========
 - Если оборачиваешь картинку в ссылку и хочешь задать размер в MD, проще:
     <a class="screenshot-frame" style="width:30%"><img src="..." alt=""></a>
   Т.к. в Markdown по умолчанию атрибуты ставятся на <img>, а не на <a>.
 - Если используешь markdown-синтаксис со ссылкой:
     [![](thumb.png){.screenshot-frame}](full.png)
   — здесь класс пойдёт на <img>, а не на <a>. Если нужно, чтобы класс был на <a>, используй HTML-обёртку.
 - Если родитель использует transform: scale(...), то рамка тоже будет масштабироваться.
 - Для "всё по ширине поля" рекомендую:
     ![...](img.png){.screenshot-frame width="100%"}
   либо
     <a class="screenshot-frame screenshot-block" style="max-width:720px"><img ...></a>
*/
img.center,
img.screenshot-frame.center {
  display: block;      /* чтоб margin:0 auto работал */
  margin-left: auto;
  margin-right: auto;
  /* сохраняем поведение рамки/size - box-sizing уже настроен ранее */
  max-width: 100%;
  height: auto;
}

/* Когда класс стоит на контейнере (рекомендованный способ для кликабельных превью) */
.screenshot-frame.center,
a.screenshot-frame.center,
.screenshot-frame.screenshot-block.center {
  display: block;      /* контейнер будет блочным */
  margin-left: auto;
  margin-right: auto;
}

img.inline-icon,
svg.inline-icon {
  display: inline-block;        /* чтобы работать с transform и box-sizing */
  vertical-align: middle;       /* центрируем относительно текстовой линии */
  transform: translateY(var(--inline-icon-shift)); /* тонкая вертикальная настройка */
  height: var(--inline-icon-height); /* сохраняет относительную высоту к тексту */
  width: auto;                  /* сохраняем пропорции */
  line-height: 1;               /* убирает лишнюю высоту вокруг svg/img */
  /* если хочется убрать подчеркивание ссылок вокруг иконок: */
  -webkit-font-smoothing: antialiased;
}

img.inline-icon,
svg.inline-icon {
  display: inline-block;
  vertical-align: middle;
  transform: translateY(var(--inline-icon-shift));
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
  max-width: 100%;
  height: auto;          /* по умолчанию разрешаем ширине управлять размерами */
}

/* Если ширина НЕ задана (ни атрибутом width, ни inline-style width),
   тогда применим высоту по умолчанию (чтобы иконки были одного визуального размера) */
img.inline-icon:not([width]):not([style*="width"]),
svg.inline-icon:not([width]):not([style*="width"]) {
  height: var(--inline-icon-height);
  width: auto;
  max-height: var(--inline-icon-height);
}

/* Небольшие помощники (опционально) */
.inline-icon.small { --inline-icon-height: 0.9em; --inline-icon-shift: 0.10em; }
.inline-icon.large { --inline-icon-height: 1.25em; --inline-icon-shift: 0.14em; }