/* --- Markdown Notices --- */
.notices.yellow {
    border-left: 10px solid #d29922;
    background: rgba(255, 223, 128, 0.15); /* Более насыщенный желтый */
    color: #ffd33d;
}

.notices.red {
    border-left: 10px solid #cf222e;
    background: rgba(255, 129, 130, 0.15); /* Более насыщенный красный */
    color: #f85149;
}

.notices.blue {
    border-left: 10px solid #0969da;
    background: rgba(88, 166, 255, 0.15); /* Более насыщенный синий */
    color: #58a6ff;
}

.notices.green {
    border-left: 10px solid #1a7f37;
    background: rgba(63, 185, 80, 0.15); /* Более насыщенный зеленый */
    color: #3fb950;
}

/* --- Shortcode UI --- */

/* Аккордеон */
.accordion-wrapper {
    margin: 30px 0;
    text-align: left;
}

.accordion-wrapper label {
    color: #c9d1d9; /* Светло-серый текст */
    background: #24292f; /* Очень тёмный фон */
    border: 1px solid #30363d; /* Темная граница */
    border-bottom: 1px solid transparent;
    padding: 10px 15px;
    cursor: pointer;
    display: block;
    border-radius: 4px;
}

.accordion-wrapper label:hover {
    background: #30363d; /* Немного светлее при наведении */
    color: #58a6ff; /* Синий текст при наведении */
}

.accordion-wrapper article {
    background: #1f2428; /* Ещё более тёмный фон для содержимого */
    border: 1px solid #30363d;
    border-top: none;
    padding: 15px;
    display: none;
    border-radius: 0 0 4px 4px;
}

.accordion-wrapper input:checked + label + article {
    display: block;
}

.accordion-wrapper > div:last-child label,
.accordion-wrapper > div:last-child input:checked ~ article {
    border-bottom: 1px solid #30363d;
}

/* Вкладки */
.tab {
    border-bottom: 1px solid #30363d; /* Темная линия */
}

.tabs-wrapper {
    display: block;
}

.tabs-wrapper.ui-theme-lite .tabs-nav li.current a {
    border-bottom: 2px solid #58a6ff; /* Синий индикатор активной вкладки */
    color: #58a6ff; /* Синий текст активной вкладки */
}

.tabs-wrapper.ui-theme-lite .tabs-nav li a {
    color: #c9d1d9; /* Светло-серый текст вкладок */
    padding: 10px 15px;
    display: block;
    text-decoration: none;
}

.tabs-wrapper.ui-theme-lite .tabs-nav li a:hover {
    background: #30363d; /* Темнее фон при наведении */
    color: #58a6ff; /* Синий текст при наведении */
}

.tabs-wrapper.ui-theme-lite.bottom-right .tabs-nav li.current a,
.tabs-wrapper.ui-theme-lite.bottom-left .tabs-nav li.current a {
    border-top: 1px solid #30363d;
}

.tabs-wrapper.ui-theme-lite.bottom-right .tab,
.tabs-wrapper.ui-theme-lite.bottom-left .tab {
    border-bottom: 1px solid #30363d;
}

.tabs-wrapper.ui-theme-lite .tab {
    border-top: 1px solid #30363d;
    background-color: #24292f;
    padding: 0.4rem;
    border-radius: 4px 4px 0 0;
}

/* Рамка браузера */
.browser-frame {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    border: 1px solid #30363d;
    background: #1f2428;
    border-radius: 6px;
}

.browser-frame .btoolbar {
    height: 40px;
    background: #24292f;
    color: #c9d1d9;
    border-bottom: 1px solid #30363d;
    display: flex;
    align-items: center;
    padding: 0 10px;
    border-radius: 6px 6px 0 0;
}

.browser-frame .btoolbar-button {
    background: #c9d1d9;
    border: none;
    border-radius: 50%;
    width: 12px;
    height: 12px;
    margin-right: 5px;
}

.browser-frame .btoolbar-button.close {
    background: #ff5f56; /* Красная кнопка закрытия */
}

.browser-frame .btoolbar-button.minimize {
    background: #ffbd2e; /* Желтая кнопка сворачивания */
}

.browser-frame .btoolbar-button.maximize {
    background: #27c93f; /* Зеленая кнопка разворачивания */
}

.browser-frame .btoolbar-address {
    background: #24292f;
    border: 1px solid #30363d;
    padding: 5px 10px;
    flex-grow: 1;
    color: #8b949e;
    border-radius: 4px;
}

/* Контейнер изображений */
.cd-image-container {
    position: relative;
}

.cd-image-label {
    color: #c9d1d9;
}

.cd-handle {
    color: #ffffff;
    background: #58a6ff; /* Синий для соответствия GitHub */
}

.cd-handle.draggable {
    background-color: #1f6feb;
}

/* Полароид */
.polaroid-wrapper .polaroid {
    background: #24292f;
    border: 1px solid #30363d;
    padding: 10px;
    border-radius: 6px;
}

.polaroid-wrapper .polaroid-img {
    background: #1f2428;
    border-radius: 4px;
}

/* --- Общие стили --- */

/* Основной текст */
body {
    color: #c9d1d9; /* Светло-серый текст */
    background-color: #171E29; /* Очень темный фон #0d1117 */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    word-wrap: break-word; /* Добавляем перенос слов для всего контента */
    overflow-wrap: break-word;
}

/* Ссылки */
a {
    color: #58a6ff; /* Синий цвет ссылок */
    text-decoration: none;
    word-wrap: break-word; /* Добавляем перенос для ссылок */
    overflow-wrap: break-word;
    display: inline-block; /* Позволяет ссылкам переноситься */
    max-width: 100%; /* Ограничиваем максимальную ширину */
}

a:hover {
    text-decoration: underline;
}

/* Заголовки */
h1, h2, h3, h4, h5, h6 {
    color: #c9d1d9;
    border-bottom: 1px solid #30363d;
    padding-bottom: 0.3em;
    scroll-margin-top: 80px; /* Подстройте под высоту вашей шапки */
}

/* Кнопки */
button:hover, .button:hover {
    background-color: #2ea043;
}

/* Текстовые поля */
input, textarea, select {
    background-color: #161b22; /* Темный фон */
    color: #c9d1d9; /* Светло-серый текст */
    border: 1px solid #30363d;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 14px;
    width: 100%;
    box-sizing: border-box;
}

input::placeholder, textarea::placeholder, select::placeholder {
    color: #8b949e; /* Серый текст-подсказка */
}

input:focus, textarea:focus, select:focus {
    border-color: #58a6ff;
    outline: none;
    box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.3);
}

/* Таблицы */
table {
    border-collapse: collapse;
    width: 100%;
    background-color: #161b22; /* Темный фон таблицы */
}

th, td {
    border: 1px solid #30363d;
    padding: 6px 13px;
    text-align: left;
}

th {
    background-color: #21262d;
    color: #c9d1d9;
}

tr:nth-child(even) {
    background-color: #161b22;
}

/* Таблицы в светлой теме */
body.light-theme table {
    background-color: #ffffff;
    border: 1px solid #d0d7de;
}

body.light-theme th,
body.light-theme td {
    border: 1px solid #d0d7de;
}

body.light-theme th {
    background-color: #f6f8fa;
    color: #24292f;
}

body.light-theme tr:nth-child(even) {
    background-color: #f6f8fa;
}

/* Блоки кода */
pre, code {
    background-color: #21262d; /* Темный фон для кода */
    border: 1px solid #30363d;
    border-radius: 6px;
    padding: 5px;
    font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace;
    color: #c9d1d9;
    white-space: pre-wrap; /* Разрешаем перенос строк */
    word-wrap: break-word; /* Разрешаем перенос длинных слов */
    overflow-wrap: break-word; /* Современное свойство для переноса */
    max-width: 100%; /* Ограничиваем максимальную ширину */
}

pre {
    overflow: auto;
    padding: 10px; /* Уменьшенный отступ без учета номеров строк */
    position: relative;
    background-color: #21262d !important; /* Принудительно задаем фон */
}

pre code {
    display: block;
    margin: 1.25px; /* Уменьшенное расстояние между рамками в 4 раза (было 5px) */
    padding: 5px;
    box-sizing: border-box;
    background-color: #21262d !important; /* Тот же фон, что и у pre */
}

/* Стили для блоков кода без указания языка */
pre:not([class]) {
    background-color: #21262d !important;
}

pre:not([class]) code {
    background-color: #121820 !important;
    color: #c9d1d9;
    margin: 1.25px;
    padding: 5px;
}

/* Код в светлой теме */
body.light-theme pre,
body.light-theme code {
    background-color: #f6f8fa !important;
    color: #24292f;
    border-color: #d0d7de;
}

body.light-theme pre code {
    background-color: #f6f8fa !important;
    color: #24292f;
    border: 1px solid #d0d7de;
    margin: 1.25px;
    padding: 5px;
}

body.light-theme pre:not([class]) {
    background-color: #f6f8fa !important;
}

body.light-theme pre:not([class]) code {
    background-color: #F2F4F7 !important;
    color: #24292f;
    border: 1px solid #d0d7de;
    margin: 1.25px;
    padding: 5px;
}

/* Стилизация скроллбаров */
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: #161b22;
}

::-webkit-scrollbar-thumb {
    background-color: #30363d;
    border-radius: 6px;
    border: 3px solid #161b22;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #505f79;
}

/* --- Новые стили для футера --- */

/* Стили для горизонтальной линии в футере */
.footer-divider {
    border: none;
    border-top: 1px solid #30363d;
    margin: 20px 0;
}

/* Стили для контейнера ссылок в футере */
.footer-links {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

/* Стили для ссылок в футере */
.footer-links a {
    color: #58a6ff;
    text-decoration: none;
    font-size: 16px;
    transition: color 0.3s ease;
    padding: 5px 10px;
}

.footer-links a:hover {
    color: #1f6feb;
    text-decoration: underline;
}

/* Дополнительный отступ снизу футера */
#footer {
    padding-bottom: 10px;
    background-color: #181A1B;
}

/* Повышение специфичности для футера, ес��и необходимо */
.section.black .footer-divider {
    border-top: 1px solid #30363d;
    margin: 20px 0;
}

.section.black .footer-links {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.section.black .footer-links a {
    color: #58a6ff;
    text-decoration: none;
    font-size: 16px;
    padding: 5px 10px;
}

.section.black .footer-links a:hover {
    color: #1f6feb;
    text-decoration: underline;
}

.section.black {
    padding-bottom: 30px;
}

/* --- Адаптивность --- */
@media (max-width: 600px) {
    /* Фикс мобильной версии */
    body {
        padding: 0 10px;
    }
    
    /* Уменьшаем размер H1 */
    h1 {
        font-size: 34px !important; /* Размер можно регулировать */
        line-height: 1.3 !important;
    }
    
    #header,  /* Используем ID вместо класса */
    .browser-frame,
    .accordion-wrapper,
    .tabs-wrapper {
        width: calc(100% + 20px) !important; /* Добавляем !important для приоритета */
        margin-left: -10px !important;
        margin-right: -10px !important;
        padding-left: 10px;
        box-sizing: border-box;
    }
    
    /* Дополнительные стили для внутреннего контента шапки */
    #header .navbar-section {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    .footer-links {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .footer-links a {
        font-size: 14px;
        padding: 5px 0;
    }

    h1, h2, h3, h4, h5, h6 {
        scroll-margin-top: 80px;
    }
    
    /* Исправление для мобильного меню */
    .mobile-menu .button_container {
        right: 5px;
    }
    

}

/* --- Стилизация кнопки "Копировать" --- */

.code-container {
    position: relative;
}

.copy-button {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #58a6ff;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 12px;
    opacity: 0.7;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.copy-button:hover {
    opacity: 1;
}

/* Адаптивность для кнопки */
@media (max-width: 600px) {
    .copy-button {
        top: 5px;
        right: 5px;
        padding: 3px 7px;
        font-size: 10px;
    }
}

/* --- Переключатель темы --- */
.theme-switch {
    display: flex;
    align-items: center;
    margin-left: 1rem;
}

.navbar-section.desktop-menu {
    display: flex;
    align-items: center;
    padding-right: 10px;
}

.theme-switch .switch {
    width: 60px;
    height: 30px;
    background-color: #30363d;
    border-radius: 15px;
    cursor: pointer;
    position: relative;
    transition: background-color 0.3s;
}

.theme-switch .switch::before {
    content: '🌙';
    position: absolute;
    width: 24px;
    height: 24px;
    border-radius: 12px;
    background-color: #1f2428;
    top: 3px;
    left: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s;
}

body.light-theme .theme-switch .switch::before {
    content: '☀️';
    transform: translateX(30px);
}

/* Скрываем десктопный переключатель на мобильных устройствах */
@media (max-width: 840px) {
    .navbar-section .theme-switch {
        display: none;
    }
}

/* Сили для мобильного переключателя */
.theme-switch.mobile {
    display: none;
    justify-content: center;
    margin: 1rem 0;
}

@media (max-width: 840px) {
    .theme-switch.mobile {
        display: flex;
    }
    
    .theme-switch.mobile .switch {
        width: 50px;
        height: 25px;
    }
    
    .theme-switch.mobile .switch::before {
        width: 19px;
        height: 19px;
    }
    
    body.light-theme .theme-switch.mobile .switch::before {
        transform: translateX(25px);
    }
}

/* Анимация для фиксированной шапки */
.header-fixed .header-animated .theme-switch {
    transition: all 0.3s ease;
}

.header-fixed.scrolled .theme-switch {
    transform: scale(0.8);
}

/* Адаптивность для десктопного меню */
@media (min-width: 841px) and (max-width: 1100px) {
    .theme-switch .switch {
        width: 50px;
        height: 25px;
    }
    
    .theme-switch .switch::before {
        width: 19px;
        height: 19px;
    }
    
    body.light-theme .theme-switch .switch::before {
        transform: translateX(25px);
    }
}

/* --- Светлая тема --- */
body.light-theme {
    color: #24292f;
    background-color: #ffffff;
}

/* Меню в светлой теме */
body.light-theme .treemenu li.tree-empty > .toggler,
body.light-theme .treemenu li.tree-closed > .toggler,
body.light-theme .treemenu li.tree-opened > .toggler {
    color: #58a6ff; /* Используем тот же цвет, что и в темной теме */
}

body.light-theme .treemenu li > .toggler:hover {
    color: #1f6feb; /* Цвет при наведении как в темной теме */
}

/* Заголовки в светлой теме */
body.light-theme h1,
body.light-theme h2,
body.light-theme h3,
body.light-theme h4,
body.light-theme h5,
body.light-theme h6 {
    color: #24292f;
    border-bottom: 1px solid #d0d7de;
}

/* Ссылки в светлой теме */
body.light-theme a {
    color: #0969da;
}

/* Markdown notices в светлой теме */
body.light-theme .notices.yellow {
    border-left: 10px solid #d29922;
    background: #fff8c5;
    color: #9a6700;
}

body.light-theme .notices.red {
    border-left: 10px solid #cf222e;
    background: #ffebe9;
    color: #cf222e;
}

body.light-theme .notices.blue {
    border-left: 10px solid #0969da;
    background: #ddf4ff;
    color: #0969da;
}

body.light-theme .notices.green {
    border-left: 10px solid #1a7f37;
    background: #dafbe1;
    color: #1a7f37;
}

/* Футер в светлой теме */
body.light-theme #footer {
    background-color: #f6f8fa;
    color: #24292f;
    border-top: 1px solid #d0d7de;
}

body.light-theme .footer-divider {
    border-top: 1px solid #d0d7de;
}

body.light-theme .footer-links a {
    color: #0969da;
}

body.light-theme .footer-links a:hover {
    color: #1f6feb;
}

/* Аккордеон в светлой теме */
body.light-theme .accordion-wrapper label {
    color: #24292f;
    background: #f6f8fa;
    border: 1px solid #d0d7de;
}

body.light-theme .accordion-wrapper label:hover {
    background: #f3f4f6;
    color: #0969da;
}

body.light-theme .accordion-wrapper article {
    background: #ffffff;
    border: 1px solid #d0d7de;
}

/* Вкладки в светлой теме */
body.light-theme .tabs-wrapper.ui-theme-lite .tabs-nav li a {
    color: #24292f;
}

body.light-theme .tabs-wrapper.ui-theme-lite .tab {
    background-color: #f6f8fa;
    border: 1px solid #d0d7de;
}

/* Код в светлой теме */
body.light-theme pre,
body.light-theme code {
    background-color: #f6f8fa;
    color: #24292f;
}

body.light-theme .copy-button {
    background-color: #f6f8fa;
    color: #24292f;
    border: 1px solid #d0d7de;
}

body.light-theme .copy-button:hover {
    background-color: #f3f4f6;
}

/* Стили для мобильного меню */
.mobile-menu {
    position: absolute;
    display: none;
    top: 0;
    right: 0;
    z-index: 3;
}

.mobile-menu .button_container {
    position: absolute;
    top: 1.3rem;
    right: 1rem;
    height: 24px;
    width: 28px;
    cursor: pointer;
    z-index: 100;
    transition: all 0.3s ease;
}

/* Анимация для фиксированной шапки */
.header-fixed .mobile-menu {
    position: fixed;
}

body.header-fixed.header-animated .mobile-menu .button_container {
    transition: all 0.3s ease;
}

body.header-fixed.header-animated #header.scrolled ~ .mobile-menu .button_container {
    top: 0.9rem;
    transform: scale(0.8);
}

@media (max-width: 840px) {
    .mobile-menu {
        display: block;
    }
}

/* Дополнительные стили для notices */
.notices {
    padding: 1rem;
    margin: 1.5rem 0;
    border-radius: 4px;
}

.notices p {
    margin: 0;
}

.notices p + p {
    margin-top: 0.5rem;
}

.subpages-list {
    list-style: none;
    padding: 1rem 0;
    margin: 0;
}

.subpages-list li {
    margin-bottom: 0.5rem;
}

.subpages-list a {
    color: inherit;
    text-decoration: none;
    padding: 0.5rem;
    display: block;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.subpages-list a:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

/* Контейнеры контента */
.content-wrapper, 
.page-content,
article,
section,
.notices,
.tab-content,
.accordion-content {
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Специальные стили для мобильных устройств */
@media (max-width: 600px) {
    a {
        word-break: break-word; /* Более агрессивный перенос на мобильных */
    }
    
    pre, code {
        max-width: 100vw; /* Ограничиваем по ширине viewport */
        box-sizing: border-box;
    }
}

/* Стили для иерархического списка подстраниц */
.subpages-list {
    list-style: none;
    padding-left: 0;
    margin: 0.5rem 0;
}

.subpages-list li {
    margin: -0.2rem 0;
    line-height: -1.4;
    position: relative;
    padding-left: 0.1rem;
}

.subpages-list a {
    text-decoration: none;
    color: inherit;
    display: inline-block;
    line-height: 1;
}

.subpages-list a:hover {
    text-decoration: underline;
}

/* Отступы для вложенных уровней */
.subpages-list .subpages-list {
    padding-left: 1.5rem;
    margin-top: 0.1rem;
    margin-bottom: 0.1rem;
    border-left: 1px solid rgba(0, 0, 0, 0.1);
}

/* Стили для тёмной темы */
[data-theme="dark"] .subpages-list .subpages-list {
    border-left-color: rgba(255, 255, 255, 0.1);
}

/* Маркеры для элементов списка */
.subpages-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    top: 0;
    line-height: 2.2;
    color: inherit;
    opacity: 0.5;
}

/* Уменьшаем отступы для глубоких уровней вложенности */
.subpages-list .level-3,
.subpages-list .level-4,
.subpages-list .level-5 {
    padding-left: 1rem;
}

/* Стили для просмотрщика изображений Featherlight */
.featherlight .featherlight-content {
    background: #1C2431;
    padding: 12px;
    border: none;
}

.featherlight .featherlight-close-icon {
    background: rgba(246, 248, 250, 0.8);
    top: 12px;
    right: 12px;
}

/* Стили для кнопок навигации */
.featherlight-previous,
.featherlight-next {
    top: 12px;
    bottom: 12px;
}

.featherlight-previous {
    left: 12px;
}

.featherlight-next {
    right: 12px;
}

/* Стили для просмотрщика в темной теме */
body.dark-theme .featherlight .featherlight-content {
    background: #1c1e1f;
    padding: 12px;
    border: none;
}

body.dark-theme .featherlight .featherlight-close-icon {
    background: rgba(28, 30, 31, 0.8);
    color: #fff;
}

/* Добавляем стили для темного режима */
body:not(.light-theme) .parent-page > .children-list::before {
    background: #30363d !important;
}

body:not(.light-theme) .subpages-list .subpages-list {
    border-left-color: #30363d !important;
}

/* Стили для футера */
.section.gray {
    border-top: 1px solid #35393D;
    padding-bottom: 30px;
}

/* Пример: ссылки в подстраницах в тёмной теме делаем красными */
body:not(.light-theme) .subpages-list a {
    color: #58A6FF;
}



#breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 0; /* Убираем расстояние между элементами */
    align-items: center; /* Выравниваем элементы по центру */
    margin: 0; /* Убираем внешние отступы у контейнера */
    padding: 0; /* Убираем внутренние отступы у контейнера */
}

#breadcrumbs span[itemprop="itemListElement"],
#breadcrumbs i {
    margin: 0; /* Убираем внешние отступы у элементов */
    padding: 0; /* Убираем внутренние отступы у элементов */
}

#breadcrumbs span[itemprop="itemListElement"] {
    line-height: 1; /* Минимизируем высоту строки */
    flex: 0 1 auto; /* Ограничиваем ширину элемента */
    max-width: 100%; /* Предотвращаем выход за границы */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Отображаем только 4 последних хлебных крошек */
#breadcrumbs span[itemprop="itemListElement"]:not(:nth-last-child(-n+4)) {
    display: none;
}