/* Ограничение высоты лого */
.g-root .pc-desktop-navigation__wrapper .pc-logo__icon {
    max-height: 30px;
    margin-right: 50px;
}

/* Скругление и плавная смена цвета в оглавлении */
.dc-toc-item__text_clicable {
    border-radius: 8px;
    transition: background-color .1s ease-out, color .1s ease-out;
}
.dc-toc-item__text_clicable:hover {
    border-radius: 8px;
}

/* Плавная смена цвета в верхнем меню */
.pc-navigation-link {
    transition: background-color .1s ease-out, color .1s ease-out;
}

/* Плавная смена цвета в минитоке */
.dc-mini-toc__section-link {
    transition: background-color .1s ease-out, color .1s ease-out;
}

/* Скругление края и серая рамка у картинок */
.dc-doc-page .yfm img {
    border-radius: 10px;
    border: 1px solid #ccc;
}

/* Шрифты */
@font-face {
    font-family: YS Text;
    src: url(https://yastatic.net/s3/home/fonts/ys/3/text-regular.woff2) format("woff2");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: YS Text;
    src: url(https://yastatic.net/s3/home/fonts/ys/3/text-regular-italic.woff2) format("woff2");
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: YS Text;
    src: url(https://yastatic.net/s3/home/fonts/ys/3/text-medium.woff2) format("woff2");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: YS Text;
    src: url(https://yastatic.net/s3/home/fonts/ys/3/text-bold.woff2) format("woff2");
    font-weight: 700;
    font-style: normal;
}

.g-root {
    --g-font-family-sans: "YS Text", sans-serif;
}
.yfm {
    --yfm-font-family-sans: "YS Text", sans-serif;
}

/* Цвета */
.g-root_theme_light {
    --g-color-text-info-heavy: #3072b3;
    --g-color-text-positive-heavy: #2d8b5d;
    --g-color-text-warning-heavy: #bd5c0a;
    --g-color-text-danger-heavy: #bd0935;
    --g-color-text-utility-heavy: #6e4299;
    --g-color-text-misc-heavy: #556575;
}
.g-root_theme_dark {
    --g-color-text-info-heavy: #4aa1f2;
    --g-color-text-positive-heavy: #5fb8a5;
    --g-color-text-warning-heavy: #ffc56c;
    --g-color-text-danger-heavy: #e8476d;
    --g-color-text-utility-heavy: #8f52cccc;
    --g-color-text-misc-heavy: #8099b0;
}

/* Цветной текст */
.yfm .blue {
    color: var(--g-color-text-info-heavy);
}
.yfm .green {
    color: var(--g-color-text-positive-heavy);
}
.yfm .yellow {
    color: var(--g-color-text-warning-heavy);
}
.yfm .red {
    color: var(--g-color-text-danger-heavy);
}
.yfm .purple {
    color: var(--g-color-text-utility-heavy);
}
.yfm .gray {
    color: var(--g-color-text-misc-heavy);
}

/* Рамки и значки у заметок */
.yfm-accent-info {
    border: 1px solid #3697f1cc;
}
.yfm-accent-tip {
    border: 1px solid #4db09bcc;
}
.yfm-accent-warning {
    border: 1px solid #ffbe5ccc;
}
.yfm-accent-alert {
    border: 1px solid #e5325dcc;
}

.yfm .yfm-note.yfm-accent-info>p:first-child:before {
    content: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20fill='none'%20viewBox='0%200%2016%2016'%20width='24'%20height='24'%3E%3Cpath%20fill='%233697f1'%20fill-rule='evenodd'%20d='M8%2013.5a5.5%205.5%200%201%200%200-11%205.5%205.5%200%200%200%200%2011M8%2015A7%207%200%201%200%208%201a7%207%200%200%200%200%2014m1-9.5a1%201%200%201%201-2%200%201%201%200%200%201%202%200m-.25%203a.75.75%200%200%200-1.5%200V11a.75.75%200%200%200%201.5%200z'%20clip-rule='evenodd'/%3E%3C/svg%3E");
}
.yfm .yfm-note.yfm-accent-tip>p:first-child:before {
    content: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width='24'%20height='24'%20viewBox='0%200%2016%2025'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cmask%20id='mask0_1321_170'%20style='mask-type:alpha'%20maskUnits='userSpaceOnUse'%20x='5'%20y='19'%20width='6'%20height='6'%3E%3Cellipse%20cx='8.05265'%20cy='22.2433'%20rx='2.55265'%20ry='2.75665'%20fill='%234DB09B'/%3E%3C/mask%3E%3Cg%20mask='url(%23mask0_1321_170)'%3E%3Crect%20x='3.56982'%20y='23.8967'%20width='8.27887'%20height='3.67553'%20transform='rotate(-18.14%203.56982%2023.8967)'%20fill='%234DB09B'/%3E%3C/g%3E%3Cpath%20d='M5.73096%2021.0302L10.4426%2019.4866'%20stroke='%234DB09B'%20stroke-width='2'%20stroke-linecap='round'/%3E%3Cpath%20d='M14.865%208.14437C14.865%2011.2696%2012.584%2013.1025%2011.5608%2014.454C11.0632%2015.1115%2010.7663%2016.2669%2010.7663%2016.2669L5.5%2018C5.5%2018%204.93917%2015.6605%203.87937%2014.454C2.72292%2013.1375%201%2011.2695%201%208.14436C1%204.51918%203.3246%201%207.93248%201C12.5404%201%2014.865%204.5192%2014.865%208.14437Z'%20stroke='%234DB09B'%20stroke-width='2'/%3E%3C/svg%3E");
}
.yfm .yfm-note.yfm-accent-warning>p:first-child:before {
    content: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20fill='none'%20viewBox='0%200%2016%2016'%20width='24'%20height='24'%3E%3Cpath%20fill='%23ffbe5c'%20fill-rule='evenodd'%20d='M7.134%202.994%202.217%2011.5a1%201%200%200%200%20.866%201.5h9.834a1%201%200%200%200%20.866-1.5L8.866%202.993a1%201%200%200%200-1.732%200m3.03-.75c-.962-1.665-3.366-1.665-4.329%200L.918%2010.749c-.963%201.666.24%203.751%202.165%203.751h9.834c1.925%200%203.128-2.085%202.164-3.751zM8%205a.75.75%200%200%201%20.75.75v2a.75.75%200%200%201-1.5%200v-2A.75.75%200%200%201%208%205m1%205.75a1%201%200%201%201-2%200%201%201%200%200%201%202%200'%20clip-rule='evenodd'/%3E%3C/svg%3E");
}
.yfm .yfm-note.yfm-accent-alert>p:first-child:before {
    content: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20fill='none'%20viewBox='0%200%2016%2016'%20width='24'%20height='24'%3E%3Cpath%20fill='%23e5325d'%20fill-rule='evenodd'%20d='M7.134%202.994%202.217%2011.5a1%201%200%200%200%20.866%201.5h9.834a1%201%200%200%200%20.866-1.5L8.866%202.993a1%201%200%200%200-1.732%200m3.03-.75c-.962-1.665-3.366-1.665-4.329%200L.918%2010.749c-.963%201.666.24%203.751%202.165%203.751h9.834c1.925%200%203.128-2.085%202.164-3.751zM8%205a.75.75%200%200%201%20.75.75v2a.75.75%200%200%201-1.5%200v-2A.75.75%200%200%201%208%205m1%205.75a1%201%200%201%201-2%200%201%201%200%200%201%202%200'%20clip-rule='evenodd'/%3E%3C/svg%3E");
}

/* Стили у уведомлений, перекрывают тип info в ДокДиректоре */
.dc-note.dc-accent-info {
    border: 1px solid #8f52cccc;
    background: none;
}
.dc-note.dc-accent-info>p:first-child:before {
    content: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20fill='none'%20viewBox='0%200%2016%2016'%20width='24'%20height='24'%3E%3Cpath%20fill='%239a63d1'%20fill-rule='evenodd'%20d='m7.836%206%20.76-2.027L9.336%202H5.5a.72.72%200%200%200-.664.45L2.513%208.257a.177.177%200%200%200%20.164.243h4.965l-.732%202.013-1.082%202.975a.382.382%200%200%200%20.637.392l6.956-7.391A.29.29%200%200%200%2013.21%206H7.835m2.727-3%20.235-.627A1.386%201.386%200%200%200%209.5.5h-4c-.906%200-1.72.552-2.057%201.393L1.12%207.7A1.677%201.677%200%200%200%202.677%2010H5.5l-.545%201.5-.537%201.475a1.882%201.882%200%200%200%203.14%201.933l6.956-7.391A1.79%201.79%200%200%200%2013.21%204.5H10z'%20clip-rule='evenodd'/%3E%3C/svg%3E");
}

/* Выделение терминов обычным цветом ссылок */
.g-root_theme_light {
    --custom-color-term-hover: rgb(108, 197, 255);
}
.g-root_theme_dark {
    --custom-color-term-hover: rgb(255, 197, 108);
}
.yfm .yfm-term_title:hover {
    color: var(--custom-color-term-hover) !important;
}

/* Выделение радиобаттанов акцентным цветом */
.yfm-tabs-vertical .yfm-vertical-tab input[type="radio"]:checked + label::before {
    background-color: var(--yfm-color-base-brand);
}

/* Правка цвета у стрелки дропдауна */
.g-root_theme_light .yfm-tabs-dropdown .yfm-tabs-dropdown-select:after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3E%3Cpath%20fill='none'%20stroke='%23000'%20d='m3%206%205%205%205-5'/%3E%3C/svg%3E");
}
.g-root_theme_dark .yfm-tabs-dropdown .yfm-tabs-dropdown-select:after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3E%3Cpath%20fill='none'%20stroke='%23fff'%20d='m3%206%205%205%205-5'/%3E%3C/svg%3E");
}

/* При переходах по якорям требований учитываем высоту шапки */
.yfm .requirements {
    scroll-padding-top: 64px !important;
}

/* Нумерация требований */
.yfm .requirements {
    counter-reset: section;
}
.yfm .requirements h2 {
    counter-increment: section;
}
.yfm .requirements h2::before {
    content: counter(section) ". ";
}
.yfm .requirements ol>li::marker {
    content: counter(section) "." counter(hier-list-item) ". " !important;
}
.yfm .requirements ol>li>ol>li::marker {
    content: counter(section) "." counter(hier-list-item) "." counter(sub-hier-list-item) ". " !important;
}
.yfm .requirements ol>li>ol>li>ol>li::marker {
    content: counter(section) "." counter(hier-list-item) "." counter(sub-hier-list-item) "." counter(sub-sub-hier-list-item) ". " !important;
}

/* Скрытый текст для Нейроэксперта */
.yfm .hidden-text {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border-width: 0 !important;
}

/* Стили для якорей пунктов требований */
.yfm .requirements ol > li .yfm-anchor {
    float: left;
    text-align: center;
    width: 24px;
    margin-left: -57px;
    padding-right: 4px;
    font-size: 18px;
    display: inline-block;
}

.yfm .requirements ol > li > ol > li .yfm-anchor {
    margin-left: -70px;
}

.yfm .requirements ol > li > ol > li > ol > li .yfm-anchor {
    margin-left: -80px;
}

.yfm .requirements ol > li .yfm-anchor:before {
    content: "#";
    opacity: 0;
}

.yfm .requirements ol > li .yfm-anchor.anchor-visible:before {
    opacity: 1;
}

/* Ширина таблиц */
.yfm .full-width-table table {
    width: 100%;
}

.yfm .table-50 table tr td:nth-child(1) {
    width: 50%;
}
.yfm .table-25 table tr td:nth-child(1) {
    width: 25%;
}

.yfm .table-2c25 table tr td:nth-child(2) {
    width: 25%;
}

.yfm .table-3c15 table tr td:nth-child(3) {
    width: 15%;
}

/* Размеры видео в таблицах */
.yfm .video table iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9 !important;
}

/* Группировка строк с картинками и комментариями в таблицах (для 3.6) */
.yfm .table-image-comment table tr:nth-child(4n+2),
.yfm .table-image-comment table tr:nth-child(4n+3) {
    background: var(--g-color-base-generic);
}

.yfm .table-image-comment table tr:nth-child(4n),
.yfm .table-image-comment table tr:nth-child(4n+1) {
    background: var(--g-color-base-background);
}

/* Без серой заливки строк в таблице */
.dc-doc-page .yfm .striped-none table tr:nth-child(2n) {
    background: var(--g-color-base-background);
}
.yfm .striped-none table th, .yfm table td {
    border: 1px solid var(--g-color-line-generic);
}

/* Закрашенная шапка в таблице */
.yfm .colored-header table tr:first-child td, .yfm .colored-header table tr:first-child th {
    background-color: var(--g-color-base-generic);
}

/* Зафиксировать первый столбец в таблице */
.table-with-sticky-column table th:first-child,
.table-with-sticky-column table td:first-child {
    position: sticky;
    left: 0;
    background-color: var(--g-color-base-background);
    z-index: 1;
    will-change: transform;
}

/* Цвета для кнопок */
.g-root_theme_light {
    --custom-color-button: #008eff;
    --custom-color-button-hover: #0383e9;
    --custom-color-button-text: #fff;
    .yfm .cut-button>.yfm-cut>.yfm-cut-title:before {
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3E%3Cpath%20fill='none'%20stroke='%23fff'%20d='m3%206%205%205%205-5'/%3E%3C/svg%3E") !important;
        left: 20px;
    }
}
.g-root_theme_dark {
    --custom-color-button: #ffbe5c;
    --custom-color-button-hover: #ffcb7d;
    --custom-color-button-text: #000000e6;
    .yfm .cut-button>.yfm-cut>.yfm-cut-title:before {
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3E%3Cpath%20fill='none'%20stroke='%23000000e6'%20d='m3%206%205%205%205-5'/%3E%3C/svg%3E") !important;
        left: 20px;
    }
}

/* Ссылка-кнопка */
.button {
    border: none;
    outline: none;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    font-size: 15px;
    font-family: var(--yc-text-body-font-family);
    padding: 12px 30px;
    border-radius: 10px;
    color: var(--custom-color-button-text);
    background-color: var(--custom-color-button);
    margin-top: 20px;
    transform: scale(1);
    transition: transform .1s ease-out, background-color .15s linear;
}
.button:hover {
    background: var(--custom-color-button-hover);
}
.button:active {
    background: var(--custom-color-button-hover);
    transform: scale(.96);
    transition: none;
}

/* Кат-кнопка */
.yfm .cut-button>.yfm-cut>.yfm-cut-title {
    display:inline-block;
    position: relative;
    text-align: center;
    text-decoration: none;
    font-size: 15px;
    font-family: var(--g-text-body-font-family);
    padding: 12px 30px 12px 45px;
    border-radius: 10px;
    color: var(--custom-color-button-text);
    background-color: var(--custom-color-button);
    margin-top: 10px;
    transform: scale(1);
    transition: transform .1s ease-out, background-color .15s linear;
}
.yfm .cut-button>.yfm-cut>.yfm-cut-title:hover {
    background: var(--custom-color-button-hover);
}
.yfm .cut-button>.yfm-cut>.yfm-cut-title:active {
    background: var(--custom-color-button-hover);
    transform: scale(.96);
    transition: none;
}

/* Правка отступа после радиобаттонов */
.yfm-tabs {
    margin-bottom: 25px !important;
}

/* Правка отступов после табов */
.yfm .yfm-tab-panel:last-child {
    margin-bottom: -15px !important;
}
.yfm .yfm-tab-panel:last-child.active {
    margin-bottom: 0 !important;
}

/* Пустой абзац, который нужен для починки отступов между табами и заголовком */
.yfm p.empty {
    height: 0;
    margin: 0;
}

/* Отступы в списках */
.yfm li>p:first-child {
    margin-block: 0 !important;
}
.yfm li>p+p {
    margin-top: 15px !important;
}
.yfm ol li>ol, .yfm ol li>ul, .yfm ul li>ol, .yfm ul li>ul {
    margin-bottom: 15px !important;
    margin-top: 15px !important;
}
.yfm .yfm-tab-panel ol:last-child, .yfm .yfm-tab-panel ul:last-child {
    margin-bottom: 15px;
}
.yfm li>p:first-child+.yfm-cut, .yfm li>p:first-child+.yfm-tabs, .yfm li>p:first-child+table {
    margin-top: 15px;
}

/* Отображение разных картинок для десктопа и телефона в зависимости от ширины экрана */
@media screen and (max-width: 768px) {
    .yfm .container-desktop {
        display: none !important;
    }
}
.yfm .container-desktop p:last-child {
    margin-bottom: 15px !important;
}

@media screen and (min-width: 769px) {
    .yfm .container-mobile {
        display: none !important;
    }
}
.yfm .container-mobile p:last-child {
    margin-bottom: 15px !important;
}

/* Картинки по центру */
.container-center {
    display: flex;
    justify-content: center;
}

/* Картинка у внешних ссылок */
a.external::after {
    background-color: var(--yfm-color-link);
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: 0.2em;
    -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 96 96'%3E%3Cpath d='M88 48a4 4 0 0 0-4 4v28c0 2.21-1.79 4-4 4H16c-2.21 0-4-1.79-4-4V16c0-2.21 1.79-4 4-4h28a4 4 0 0 0 0-8H16C9.373 4 4 9.373 4 16v64c0 6.627 5.373 12 12 12h64c6.627 0 12-5.373 12-12V52a4 4 0 0 0-4-4'/%3E%3Cpath d='M91.996 7.958a4 4 0 0 0-.075-.742c-.023-.112-.065-.216-.097-.325-.04-.142-.074-.285-.131-.423-.05-.122-.12-.231-.182-.346s-.113-.234-.187-.344a4 4 0 0 0-.407-.499c-.032-.035-.055-.075-.089-.108-.031-.031-.067-.051-.1-.081a4 4 0 0 0-.509-.416c-.108-.072-.226-.123-.339-.184-.116-.062-.228-.133-.35-.184-.139-.058-.283-.091-.427-.132-.107-.031-.21-.073-.321-.095A4 4 0 0 0 87.999 4H64a4 4 0 0 0 0 8h14.343l-32.77 32.77a4 4 0 1 0 5.656 5.656L84 17.656V32a4 4 0 0 0 8 0V8z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 96 96'%3E%3Cpath d='M88 48a4 4 0 0 0-4 4v28c0 2.21-1.79 4-4 4H16c-2.21 0-4-1.79-4-4V16c0-2.21 1.79-4 4-4h28a4 4 0 0 0 0-8H16C9.373 4 4 9.373 4 16v64c0 6.627 5.373 12 12 12h64c6.627 0 12-5.373 12-12V52a4 4 0 0 0-4-4'/%3E%3Cpath d='M91.996 7.958a4 4 0 0 0-.075-.742c-.023-.112-.065-.216-.097-.325-.04-.142-.074-.285-.131-.423-.05-.122-.12-.231-.182-.346s-.113-.234-.187-.344a4 4 0 0 0-.407-.499c-.032-.035-.055-.075-.089-.108-.031-.031-.067-.051-.1-.081a4 4 0 0 0-.509-.416c-.108-.072-.226-.123-.339-.184-.116-.062-.228-.133-.35-.184-.139-.058-.283-.091-.427-.132-.107-.031-.21-.073-.321-.095A4 4 0 0 0 87.999 4H64a4 4 0 0 0 0 8h14.343l-32.77 32.77a4 4 0 1 0 5.656 5.656L84 17.656V32a4 4 0 0 0 8 0V8z'/%3E%3C/svg%3E");
    vertical-align: middle;
}
a.external:hover:after {
    background-color: var(--yfm-color-link-hover);
}

/* Картинка у ссылок на Телеграм */
a.telegram::after {
    background-color: var(--yfm-color-link);
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-left: 0.2em;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M5.254 8.521 9.61 5.86a.75.75 0 0 1 .782 1.28L6.586 9.465 9.77 12.65a1.2 1.2 0 0 0 1.973-.433l2.692-7.308a1.045 1.045 0 0 0-.98-1.408h-.105q-.151 0-.298.04L2.022 6.509a.707.707 0 0 0 .046 1.375zm-3.48.834L5 10l3.71 3.71a2.7 2.7 0 0 0 4.44-.976l2.693-7.308A2.544 2.544 0 0 0 13.454 2h-.104c-.232 0-.464.03-.688.091l-11.03 2.97a2.207 2.207 0 0 0 .142 4.294' clip-rule='evenodd'%3E%3C/path%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M5.254 8.521 9.61 5.86a.75.75 0 0 1 .782 1.28L6.586 9.465 9.77 12.65a1.2 1.2 0 0 0 1.973-.433l2.692-7.308a1.045 1.045 0 0 0-.98-1.408h-.105q-.151 0-.298.04L2.022 6.509a.707.707 0 0 0 .046 1.375zm-3.48.834L5 10l3.71 3.71a2.7 2.7 0 0 0 4.44-.976l2.693-7.308A2.544 2.544 0 0 0 13.454 2h-.104c-.232 0-.464.03-.688.091l-11.03 2.97a2.207 2.207 0 0 0 .142 4.294' clip-rule='evenodd'%3E%3C/path%3E%3C/svg%3E");
    vertical-align: middle;
}
a.telegram:hover:after {
    background-color: var(--yfm-color-link-hover);
}

/* Начало стилей для главной страницы */
/* Переменные-цвета */
body.g-root_theme_light .main-page {
    --g-color-text-primary: #000;
    --g-color-private-white-1000-solid: #fff;
    --g-color-small-chart-bg: #fff;
    --section-border: #e7e5e5;
    --card-bg: #f3f1fa;
    --card-bg-icon: #F3F1FA;
    --g-color-dashboard-label: #333;
    --g-color-purple: #8875fc;
}

body.g-root_theme_dark .main-page {
    --g-color-text-primary: #fff;
    --g-color-private-white-1000-solid: #ffffff1a;
    --g-color-small-chart-bg: #ffffff1a;
    --section-border: #e7e5e533;
    --card-bg: #8170c533;
    --card-bg-icon: #352D42;
    --g-color-dashboard-label: --g-color-text-primary;
    --g-color-purple: #8796ff;
}

/* Отступы у картинок */
.main-page figure {
    margin: 0;
}

/* Размер и отображение заголовков */
.main-page h1, .main-page h2 {
    font-weight: 500;
    font-size: 32px;
    line-height: 38px;
    margin-bottom: 24px;
}

@media (max-width: 768px) {
    .main-page h1, .main-page h2 {
        font-size: 24px;
        line-height: 31.2px;
    }
}

/* Section — оформление разделов */
.main-page .section {
    padding: 50px 0 60px;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .main-page .section {
        padding: 50px 0 60px;
    }
}

.main-page .section:not(:nth-child(1)) {
    border-top: 1px solid var(--section-border);
}

.main-page .section:nth-child(1) {
    padding-top: 0;
}

.main-page .section p:last-child {
    margin-bottom: 0;
}

/* Dashboard — метрики */
.main-page .dashboard {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 40px;
}

@media (max-width: 768px) {
    .main-page .dashboard {
        grid-template-columns: repeat(1, 1fr);
        margin-top: 38px;
    }
}

.main-page .dashboard__card {
    display: flex;
    background-color: var(--card-bg);
    flex-direction: column;
    justify-content: space-between;
    padding: 18px 20px 20px;
    border-radius: 12px;
    box-sizing: border-box;
    position: relative;
}

@media (max-width: 768px) {
    .main-page .dashboard__card {
        min-height: 160px;
        padding: 20px;
        border-radius: 10px;
    }
}

@media (max-width: 768px) {
    .main-page .dashboard__card__circle-chart .dashboard-card__title {
        max-width: 136px;
    }
}

.main-page .dashboard-card__title {
    font-weight: 500;
    font-size: 18px;
    line-height: 22px;
    margin-bottom: 13px;
}

@media (max-width: 768px) {
    .main-page .dashboard-card__title {
        margin-bottom: 20px;
    }
}

/* Карточки документации */
.main-page .cards-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 40px;
}

@media (max-width: 768px) {
    .main-page .cards-list {
        grid-template-columns: repeat(1, 1fr);
    }

    .main-page .cards-list .card:nth-child(1) {
        background-position: right -50px center;
    }

    .main-page .cards-list .card.wide {
        background-position: right -95px center;
    }
}

@media only screen and (min-width: 769px) {
    .main-page .cards-list:not(.cols-3) .card__text {
        margin-right: 170px;
    }
}

.main-page .cards-list.cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 768px) {
    .main-page .cards-list.cols-3 {
        grid-template-columns: repeat(1, 1fr);
    }
}

.main-page .cards-list.cols-3 .card:not(.wide) .card__title,
.main-page .cards-list.cols-3 .card:not(.wide) .card__text {
    max-width: none;
}

/* Bar container — добавляется в JS */
.main-page .bar-container {
    display: flex;
    flex-direction: row;
    gap: 4px;
}

@media (max-width: 768px) {
    .main-page .bar-container {
        gap: 3px;
    }
}

.main-page .bar-segment:first-child .bar-segment__line {
    border-radius: 10px 0 0 10px;
}

@media (max-width: 768px) {
    .main-page .bar-segment:first-child .bar-segment__line {
        border-radius: 7px 0 0 7px;
    }
}

.main-page .bar-segment:last-child .bar-segment__line {
    border-radius: 0 10px 10px 0;
}

@media (max-width: 768px) {
    .main-page .bar-segment:last-child .bar-segment__line {
        border-radius: 0 7px 7px 0;
    }
}

.main-page .bar-segment__line {
    height: 36px;
}

.main-page .bar-segment__label {
    display: flex;
    font-size: 12px;
    line-height: 14.4px;
    color: var(--g-color-dashboard-label);
    gap: 4px;
    margin-top: 11px;
}

@media (max-width: 768px) {
    .main-page .bar-segment__label {
        white-space: nowrap;
        margin-top: 10px;
    }
}

@media (max-width: 768px) {
    .main-page .bar-labels-vertical {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
}

@media only screen and (min-width: 769px) {
    .main-page .bar-labels-vertical .bar-segment__label {
        margin: 13px 0 0;
    }

    .main-page .bar-labels-vertical .bar-segment__label:not(:nth-child(1)) {
        margin-top: 8px;
    }
}

.main-page .bar-labels-space-between {
    display: flex;
    justify-content: space-between;
}

.main-page .bar-labels-space-between--top {
    justify-content: flex-end;
    margin-bottom: 10px;
}

.main-page .bar-segment__label-circle {
    display: inline-block;
    height: 6px;
    width: 6px;
    margin-top: 4px;
    border-radius: 50%;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .main-page .bar-segment__label-circle {
        height: 4px;
        width: 4px;
    }
}

/* Age genders chart — возрастные группы */
.main-page .age-genders-chart {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 11px;
}

@media (max-width: 768px) {
    .main-page .age-genders-chart {
        grid-template-columns: repeat(1, 1fr);
        gap: 10px;
    }
}

.main-page .age-genders-chart figure {
    background-color: var(--g-color-small-chart-bg);
    padding: 10px;
    border-radius: 8px;
}

@media (max-width: 768px) {
    .main-page .age-genders-chart figure {
        padding: 20px;
    }
}

.main-page .age-groups-chart__rows {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.main-page .age-groups-chart__row {
    display: grid;
    grid-template-columns: 35px 1fr;
    align-items: center;
    gap: 9px;
}

.main-page .age-groups-chart__percent {
    font-size: 12px;
    line-height: 14px;
    color: var(--g-color-purple);
    white-space: nowrap;
}

.main-page .age-groups-chart__bar-area {
    display: flex;
    align-items: center;
    gap: 9px;
}

.main-page .age-groups-chart__bar-wrapper {
    height: 8px;
    flex-shrink: 0;
}

.main-page .age-groups-chart__bar {
    height: 100%;
    border-radius: 0 50px 50px 0;
}

.main-page .age-groups-chart__label {
    font-size: 12px;
    line-height: 14px;
    text-align: right;
    white-space: nowrap;
}

/* Dashboard circle chart — круговая диаграмма */
.main-page .dashboard-circle-chart {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
}

.main-page .dashboard-circle-chart .circle-chart {
    margin-top: -33px;
}

@media (max-width: 768px) {
    .main-page .dashboard-circle-chart .circle-chart {
        margin-top: -61px;
    }
}

.main-page .dashboard-circle-chart__text {
    font-size: 12px;
    line-height: 15.6px;
    color: var(--g-color-text-primary);
    flex: 1;
    margin-right: 50px;
}

@media (max-width: 768px) {
    .main-page .dashboard-circle-chart__text {
        margin-right: 20px;
    }
}

.main-page .dashboard-circle-chart__text p {
    margin: 0;
}

.main-page .circle-chart {
    display: flex;
    height: 140px;
    width: 140px;
    background-color: var(--g-color-private-white-1000-solid);
    align-items: center;
    justify-content: center;
    padding: 3px;
    border-radius: 50%;
    box-sizing: border-box;
    position: relative;
}

.main-page .circle-chart__svg {
    width: 100%;
    height: 100%;
}

.main-page .circle-chart__bar {
    stroke-width: 8px;
}

.main-page .circle-chart__bg {
    stroke: none;
}

.main-page .circle-chart__bar {
    fill: none;
    stroke-linecap: round;
}

.main-page .circle-chart__text {
    text-align: center;
    margin-top: 2px;
    pointer-events: none;
    transform: translate(-50%, -50%);
    position: absolute;
    top: 50%;
    left: 50%;
}

.main-page .circle-chart__label {
    font-weight: 500;
    font-size: 18px;
    line-height: 23.4px;
    color: var(--g-color-text-primary);
}

.main-page .circle-chart__sub {
    font-size: 10px;
    line-height: 12px;
    color: var(--g-color-text-primary);
    margin-top: 1px;
}

@media (max-width: 768px) {
    .main-page .circle-chart__sub {
        font-size: 12px;
        line-height: 12px;
        margin-top: 2px;
    }
}

/* Cards — карточки с разделами документации */
.main-page .card {
    display: flex;
    min-height: 180px;
    background-color: var(--card-bg);
    background-size: auto 100%;
    background-position: right center;
    background-repeat: no-repeat;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 20px;
    border-radius: 12px !important;
    box-sizing: border-box;
    position: relative;
}

@media only screen and (min-width: 767px) {
    .main-page .card.wide {
        grid-column: span 2;
    }
}

.main-page .card__icon {
    width: 54px;
    padding-bottom: 12px;
    margin-bottom: auto;
}

.main-page .card__icon img {
    display: block;
    height: auto;
    width: 100%;
    background-color: var(--card-bg-icon);
}

.main-page .card__title {
    max-width: 190px;
    font-weight: 500;
    font-size: 18px;
    line-height: 22px;
    color: var(--g-color-text-primary);
}

.main-page .card__title.arrow {
    padding-right: 20px;
    position: relative;
}

.main-page .card__title svg,
.main-page .card__title img {
    display: block;
    height: 18px;
    width: 18px;
    stroke: var(--g-color-text-primary);
    transition: transform .2s ease;
    position: absolute;
    top: 5px;
    right: 0;
}

.main-page .card:hover .card__title svg,
.main-page .card:hover .card__title img {
    transform: translateX(4px);
}

.main-page .card__text {
    max-width: 210px;
    font-size: 13px;
    line-height: 18.2px;
    margin-top: 8px;
    color: var(--g-color-text-primary);
}

@media (max-width: 768px) {
    .main-page .card__text {
        max-width: 188px;
    }
}

.main-page .card__text p {
    margin: 0;
}
/* Конец стилей для главной страницы */

/* Стили для модального окна с картинками */
.image-modal-container {
    z-index: 200;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    display: none;
    position: fixed;
    top: 0;
    left: 0;
}

.image-modal-container.active {
    display: flex;
}

.image-modal-overlay {
    z-index: 100;
    background-color: rgba(0, 0, 0, 0.85);
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
}

.image-modal-wrapper {
    z-index: 200;
    background-color: var(--yfm-color-modal-content, var(--g-color-base-background));
    border-radius: 10px;
    flex-direction: column;
    width: 90vw;
    height: 90vh;
    display: flex;
    position: relative;
}

.image-modal-toolbar {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 10px 12px;
    display: flex;
}

.image-modal-zoom-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.image-modal-zoom-btn {
    cursor: pointer;
    background: transparent;
    border: 1px solid var(--g-color-line-generic);
    border-radius: 4px;
    padding: 4px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    color: var(--g-color-text-primary);
}

.image-modal-zoom-btn:hover {
    background: var(--yfm-color-modal-actions-hover, rgba(0, 0, 0, 0.1));
    border-color: var(--g-color-line-generic-hover);
}

.image-modal-zoom-btn svg {
    width: 20px;
    height: 20px;
}

.image-modal-zoom-level {
    font-size: 14px;
    color: var(--g-color-text-secondary);
    min-width: 45px;
    text-align: center;
}

.image-modal-close {
    cursor: pointer;
    border-radius: 3px;
    transition: background 0.3s;
    padding: 5px;
}

.image-modal-close:hover {
    background: var(--yfm-color-modal-actions-hover, rgba(0, 0, 0, 0.1));
}

.image-modal-content {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    cursor: grab;
}

.image-modal-content:active {
    cursor: grabbing;
}

.image-modal-content img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    user-select: none;
}

/* Стили для кликабельных картинок */
.clickable-image {
    cursor: pointer;
    transition: opacity 0.2s;
    position: relative;
}

.clickable-image:hover {
    opacity: 0.85;
}

.clickable-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M15 3H6C5.46957 3 4.96086 3.21071 4.58579 3.58579C4.21071 3.96086 4 4.46957 4 5V19C4 19.5304 4.21071 20.0391 4.58579 20.4142C4.96086 20.7893 5.46957 21 6 21H18C18.5304 21 19.0391 20.7893 19.4142 20.4142C19.7893 20.0391 20 19.5304 20 19V8L15 3Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 17V11" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M9 14L12 17L15 14" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') center center no-repeat;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
}

.clickable-image:hover::after {
    opacity: 1;
}