/* ============================================================================
   /css/theme-dark.css — тёмная тема ruanekdot.ru
   Версия: 3.0 (2026-09-17)
   ========================================================================= */

/* ─── Переменные ──────────────────────────────────────────────────────── */

html[data-theme="dark"] {
    --bg-page:        #121212;
    --bg-card:        #1e1e1e;
    --bg-card-2:      #252525;
    --bg-card-3:      #2a2a2a;
    --bg-input:       #1a1a1a;
    --border:         #333333;
    --border-soft:    #2a2a2a;
    --text:           #e8e8e8;
    --text-dim:       #a0a0a0;
    --text-muted:     #707070;
    --accent:         #7db4ff;
    --accent-hover:   #a8cdff;
    --red:            #ff6b6b;
    --shadow:         0 1px 4px rgba(0, 0, 0, .5);
}

html, body, .header, .header *, .short, .short *,
.side-box, .side-box *, .comment-item, .comment-item *,
.material-footer, .date-divider, .quote-block, .caption-spoiler,
.cn-card, .cn-dd, .cn-bar, input, textarea, select, button {
    transition: background-color .25s ease, color .25s ease,
                border-color .25s ease, box-shadow .25s ease;
}

/* ═════════════════════════════════════════════════════════════════════════
   BASE
   ═════════════════════════════════════════════════════════════════════════ */

html[data-theme="dark"] body {
    background: var(--bg-page);
    color: var(--text);
}
html[data-theme="dark"] a { color: var(--accent); }
html[data-theme="dark"] a:hover,
html[data-theme="dark"] a:focus { color: var(--accent-hover); }
html[data-theme="dark"] .hr,
html[data-theme="dark"] hr {
    background: var(--border);
    border-bottom-color: var(--border);
}
html[data-theme="dark"] ::selection { background: #3a5a8a; color: #fff; }

/* ═════════════════════════════════════════════════════════════════════════
   HEADER
   ═════════════════════════════════════════════════════════════════════════ */

html[data-theme="dark"] .header {
    background: var(--bg-card);
    box-shadow: 0 5px 11px 0 rgba(0, 0, 0, .6);
}
html[data-theme="dark"] .site-tagline { color: var(--text-dim); }

html[data-theme="dark"] .search-box input {
    background: var(--bg-input);
    border-color: var(--border);
    color: var(--text);
}
html[data-theme="dark"] .search-box input::placeholder { color: var(--text-muted); }
html[data-theme="dark"] .search-box input:focus {
    background: #222;
    border-color: var(--accent);
}
html[data-theme="dark"] .search-box button { color: var(--text-dim); }
html[data-theme="dark"] .search-box button:hover { color: var(--accent); }

html[data-theme="dark"] .btn-menu {
    background: var(--bg-card-2);
    border-color: var(--border);
    color: var(--text);
}
html[data-theme="dark"] .btn-menu:hover { background: var(--bg-card-3); }

/* ═════════════════════════════════════════════════════════════════════════
   MATERIAL WRAPPER — координатор, без фона и рамки
   ═════════════════════════════════════════════════════════════════════════ */

html[data-theme="dark"] .material-wrapper {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-bottom: 22px !important;
    overflow: visible !important;
}

/* ─── КАРТОЧКА материала ─── */

html[data-theme="dark"] .material-wrapper > article.short,
html[data-theme="dark"] .material-wrapper > .short {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .4) !important;
    margin-bottom: 0 !important;
    overflow: hidden !important;
}

/* Прозрачные внутренние блоки карточки */
html[data-theme="dark"] .material-wrapper > .short .title-section,
html[data-theme="dark"] .material-wrapper > .short .footer-section,
html[data-theme="dark"] .material-wrapper > .short .s-cols,
html[data-theme="dark"] .material-wrapper > .short .s-texthome,
html[data-theme="dark"] .material-wrapper > .short .s-text {
    background: transparent !important;
    background-color: transparent !important;
}

/* ─── КАТЕГОРИИ ВНУТРИ КАРТОЧКИ ─── */
/* Одна тонкая полоска сверху, никаких «двойных рамок» */

html[data-theme="dark"] .material-wrapper > .short .color-title {
    background: transparent !important;
    background-color: transparent !important;
    border-top: 1px solid var(--border-soft) !important;
    border-bottom: none !important;
    padding: 6px 0 !important;
}

/* Ссылки категорий — читаемые, яркие */
html[data-theme="dark"] .material-wrapper > .short .color-title a,
html[data-theme="dark"] .material-wrapper > .short .color-title a span,
html[data-theme="dark"] .material-wrapper > .short .color-title span[itemprop="name"],
html[data-theme="dark"] .material-wrapper > .short .category-name {
    color: #8cc4ff !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}
html[data-theme="dark"] .material-wrapper > .short .color-title a:hover,
html[data-theme="dark"] .material-wrapper > .short .color-title a:hover span {
    color: #b8d9ff !important;
    text-decoration: underline !important;
}

/* Иконка cat.png */
html[data-theme="dark"] .material-wrapper > .short .color-title a img,
html[data-theme="dark"] .material-wrapper > .short .color-title img[alt*="Категор"] {
    filter: invert(1) brightness(1.5) !important;
    opacity: .65 !important;
}

/* Разделитель " | " */
html[data-theme="dark"] .material-wrapper > .short .color-title font[color="#ddd"],
html[data-theme="dark"] .material-wrapper > .short .category-separator {
    color: #555 !important;
}

/* Лайк */
html[data-theme="dark"] .material-wrapper > .short .color-title .likex,
html[data-theme="dark"] .material-wrapper > .short .color-title .like2 {
    color: #d0d0d0 !important;
    text-shadow: none !important;
}
html[data-theme="dark"] .material-wrapper > .short .color-title .likeplus,
html[data-theme="dark"] .material-wrapper > .short .color-title .likeplus_hover {
    filter: invert(0.95) brightness(1.3) !important;
    opacity: .85 !important;
}

/* ─── ЗАГОЛОВОК И ТЕКСТ ─── */

html[data-theme="dark"] .material-wrapper .news-title,
html[data-theme="dark"] .material-wrapper .title-link h2,
html[data-theme="dark"] .material-wrapper h1,
html[data-theme="dark"] .material-wrapper h2,
html[data-theme="dark"] .material-wrapper h3 {
    color: #ffffff !important;
    text-shadow: none !important;
}

html[data-theme="dark"] .material-wrapper .s-text,
html[data-theme="dark"] .material-wrapper .s-texthome,
html[data-theme="dark"] .material-wrapper .s-text p,
html[data-theme="dark"] .material-wrapper .s-texthome p,
html[data-theme="dark"] .material-wrapper .s-text span,
html[data-theme="dark"] .material-wrapper .s-texthome span,
html[data-theme="dark"] .material-wrapper .s-text div,
html[data-theme="dark"] .material-wrapper .s-texthome div {
    color: #e8e8e8 !important;
}

html[data-theme="dark"] .material-wrapper .s-text i,
html[data-theme="dark"] .material-wrapper .s-text em,
html[data-theme="dark"] .material-wrapper .s-texthome i,
html[data-theme="dark"] .material-wrapper .s-texthome em {
    color: #b0b0b0 !important;
}

html[data-theme="dark"] .material-wrapper .s-text a,
html[data-theme="dark"] .material-wrapper .s-texthome a {
    color: #7db4ff !important;
}
html[data-theme="dark"] .material-wrapper .s-text a:hover,
html[data-theme="dark"] .material-wrapper .s-texthome a:hover {
    color: #a8cdff !important;
}

/* Картинки внутри материала — без фильтров */
html[data-theme="dark"] .material-wrapper img {
    filter: none !important;
    opacity: 1 !important;
}
html[data-theme="dark"] .material-wrapper .s-cols img {
    background: transparent !important;
    display: block;
}
html[data-theme="dark"] .material-wrapper video { background: #000; }

/* Счётчики просмотров / комментов в шапке карточки */
html[data-theme="dark"] .material-wrapper .color-title font,
html[data-theme="dark"] .material-wrapper .color-title span[style*="color: #999"],
html[data-theme="dark"] .material-wrapper .color-title span[style*="color:#999"] {
    color: #909090 !important;
    text-shadow: none !important;
    filter: none !important;
}
html[data-theme="dark"] .material-wrapper [itemprop="userInteractionCount"],
html[data-theme="dark"] .material-wrapper [itemprop="commentCount"] {
    color: #b0b0b0 !important;
}
html[data-theme="dark"] .material-wrapper .color-title img {
    filter: invert(0.8) brightness(1.4) !important;
    opacity: .5 !important;
}
html[data-theme="dark"] .material-wrapper .color-title img:hover {
    filter: invert(0.9) brightness(1.6) !important;
    opacity: .8 !important;
}

/* ═════════════════════════════════════════════════════════════════════════
   ФУТЕР — ПРОСТО СТРОКА С ДВУМЯ ССЫЛКАМИ
   ═════════════════════════════════════════════════════════════════════════ */

html[data-theme="dark"] .material-footer,
html[data-theme="dark"] .material-wrapper > .material-footer {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 6px 0 0 0 !important;
    padding: 4px 0 !important;
}

html[data-theme="dark"] .material-footer .footer-line {
    background: transparent !important;
    border-bottom: 1px solid #3a3a3a !important;
}

html[data-theme="dark"] .material-footer .comments-link,
html[data-theme="dark"] .material-footer .similar-link {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    color: #b8b8b8 !important;
    font-weight: 500 !important;
    padding: 4px 8px !important;
}
html[data-theme="dark"] .material-footer .comments-link:hover,
html[data-theme="dark"] .material-footer .similar-link:hover {
    background: transparent !important;
    color: #7db4ff !important;
}
html[data-theme="dark"] .material-footer .comments-link.active,
html[data-theme="dark"] .material-footer .similar-link.active {
    background: transparent !important;
    color: #7db4ff !important;
    font-weight: 600 !important;
}
html[data-theme="dark"] .material-footer svg {
    stroke: currentColor !important;
    fill: none !important;
    opacity: 1 !important;
}
html[data-theme="dark"] .material-footer .arrow,
html[data-theme="dark"] .material-footer .arrow-down {
    color: currentColor !important;
}

/* ═════════════════════════════════════════════════════════════════════════
   ПУСТОЙ .material-controls — СКРЫВАЕМ
   (когда не раскрыто ни Похожие, ни Комментарии)
   ═════════════════════════════════════════════════════════════════════════ */

html[data-theme="dark"] .material-wrapper > .material-controls {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
}

/* Если внутри нет активного раскрытого блока — скрываем */
html[data-theme="dark"] .material-wrapper > .material-controls:not(:has(.similar-container.active)):not(:has(.comment-spoiler-content .comment-item)):not(:has(.comment-spoiler-content.show)):not(:has(.comment-form-container.show)) {
    display: none !important;
}

/* Когда раскрыто — даём отступ сверху */
html[data-theme="dark"] .material-wrapper > .material-controls:has(.similar-container.active),
html[data-theme="dark"] .material-wrapper > .material-controls:has(.comment-spoiler-content .comment-item),
html[data-theme="dark"] .material-wrapper > .material-controls:has(.comment-spoiler-content.show),
html[data-theme="dark"] .material-wrapper > .material-controls:has(.comment-form-container.show) {
    margin-top: 10px !important;
}

/* ─── Раскрытые Похожие / Комментарии — отдельная плашка ─── */

html[data-theme="dark"] .material-controls .similar-container.active,
html[data-theme="dark"] .material-controls .comment-spoiler-content {
    background: var(--bg-card-2) !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    padding: 12px !important;
}

html[data-theme="dark"] .comment-spoiler-content .comment-item,
html[data-theme="dark"] .similar-container .short {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-left: 4px solid var(--accent) !important;
    border-radius: 6px !important;
    padding: 12px 14px !important;
    margin-bottom: 10px !important;
}

html[data-theme="dark"] .comment-spoiler-content .comment-author,
html[data-theme="dark"] .comment-spoiler-content .comment-text,
html[data-theme="dark"] .comment-spoiler-content .comment-text *,
html[data-theme="dark"] .similar-container .s-texthome,
html[data-theme="dark"] .similar-container .s-texthome *,
html[data-theme="dark"] .similar-container h2,
html[data-theme="dark"] .similar-container h2 a {
    color: var(--text) !important;
}
html[data-theme="dark"] .comment-spoiler-content .comment-meta,
html[data-theme="dark"] .comment-spoiler-content .comment-date,
html[data-theme="dark"] .comment-spoiler-content .comment-number {
    color: var(--text-dim) !important;
}
html[data-theme="dark"] .comment-spoiler-content .comment-divider {
    background: var(--border-soft) !important;
}
html[data-theme="dark"] .comment-empty,
html[data-theme="dark"] .comment-error {
    color: var(--text-dim) !important;
}
html[data-theme="dark"] .similar-container .loader-text {
    color: var(--text-dim) !important;
}

/* ═════════════════════════════════════════════════════════════════════════
   ЦИТАТА — ОТДЕЛЬНАЯ ПЛАШКА
   ═════════════════════════════════════════════════════════════════════════ */

html[data-theme="dark"] .material-wrapper > .quote-block,
html[data-theme="dark"] .quote-block {
    background: var(--bg-card-2) !important;
    border: 1px solid var(--border) !important;
    border-left: 4px solid var(--accent) !important;
    border-radius: 8px !important;
    margin: 8px 0 0 0 !important;
    padding: 18px 20px !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .4) !important;
}
html[data-theme="dark"] .quote-block .quote-content {
    color: #d8d8d8 !important;
    font-style: italic;
    line-height: 1.5;
}
html[data-theme="dark"] .quote-block .quote-author {
    color: #909090 !important;
    text-align: right;
    display: block;
    margin-top: 10px;
}

/* ═════════════════════════════════════════════════════════════════════════
   ТЕГИ ПОД МАТЕРИАЛОМ
   ═════════════════════════════════════════════════════════════════════════ */

html[data-theme="dark"] span[style*="border: 1px solid #ddd"],
html[data-theme="dark"] span[style*="border:1px solid #ddd"] {
    background: var(--bg-card-2) !important;
    border-color: var(--border) !important;
    color: var(--text-dim) !important;
}
html[data-theme="dark"] span[style*="border: 1px solid #ddd"] a,
html[data-theme="dark"] span[style*="border: 1px solid #ddd"] noindex,
html[data-theme="dark"] span[style*="border: 1px solid #ddd"] font {
    color: var(--text-dim) !important;
}
html[data-theme="dark"] span[style*="border: 1px solid #ddd"] a:hover {
    color: var(--accent) !important;
}
html[data-theme="dark"] span[style*="border: 1px solid #ddd"] img {
    filter: invert(0.85) brightness(1.4) !important;
    opacity: .5 !important;
}

/* ═════════════════════════════════════════════════════════════════════════
   РАЗДЕЛИТЕЛИ ДАТ
   ═════════════════════════════════════════════════════════════════════════ */

html[data-theme="dark"] .date-divider {
    background: transparent !important;
    padding: 12px 0 !important;
    margin: 8px 0 !important;
}
html[data-theme="dark"] .date-divider a {
    color: var(--text-dim) !important;
    background: var(--bg-card-2) !important;
    padding: 3px 12px !important;
    border-radius: 12px !important;
    border: 1px solid var(--border) !important;
}
html[data-theme="dark"] .date-divider a:hover {
    color: var(--accent) !important;
    border-color: var(--accent) !important;
}
html[data-theme="dark"] .date-divider::before,
html[data-theme="dark"] .date-divider::after {
    border-bottom-color: var(--border) !important;
}
html[data-theme="dark"] .date-divider .sort-icon {
    color: var(--text-muted) !important;
}
html[data-theme="dark"] .date-divider .sort-icon:hover,
html[data-theme="dark"] .date-divider .sort-icon.active {
    color: var(--accent) !important;
}

/* ═════════════════════════════════════════════════════════════════════════
   ХЕДЕР КАТЕГОРИИ / ПАНЕЛЬ СОРТИРОВКИ
   ═════════════════════════════════════════════════════════════════════════ */

html[data-theme="dark"] .content-block {
    background: var(--bg-card) !important;
    border-color: var(--border) !important;
}
html[data-theme="dark"] .content-block h1,
html[data-theme="dark"] .content-block h2 {
    color: #ffffff !important;
}
html[data-theme="dark"] .content-block .tagline {
    color: #909090 !important;
}

html[data-theme="dark"] .sort-filter-panel {
    background: var(--bg-card) !important;
    border-top-color: var(--border) !important;
    border-bottom-color: var(--border) !important;
}
html[data-theme="dark"] .sort-link { color: #c0c0c0 !important; }
html[data-theme="dark"] .sort-link:hover {
    color: #7db4ff !important;
    background: rgba(125, 180, 255, .1) !important;
}
html[data-theme="dark"] .sort-link.active {
    color: #7db4ff !important;
    font-weight: 600 !important;
}
html[data-theme="dark"] .filter-label { color: #c0c0c0 !important; }
html[data-theme="dark"] .separator { color: #444 !important; }
html[data-theme="dark"] .filter-label input[type="checkbox"] {
    filter: invert(0.9) hue-rotate(180deg);
}

/* ═════════════════════════════════════════════════════════════════════════
   SIDE BOX / КАТЕГОРИИ
   ═════════════════════════════════════════════════════════════════════════ */

html[data-theme="dark"] .side-box {
    background: var(--bg-card) !important;
    box-shadow: var(--shadow);
}
html[data-theme="dark"] .side-bt {
    background: var(--bg-card-2);
    color: var(--text);
}
html[data-theme="dark"] .side-bc { color: var(--text); }
html[data-theme="dark"] .cn-card {
    background: var(--bg-card-2);
    border-color: var(--border);
    color: var(--text);
}
html[data-theme="dark"] .cn-card:hover {
    background: var(--bg-card-3);
    border-color: var(--stripe, #ff9ec1);
}
html[data-theme="dark"] .cn-lbl { color: var(--text); }
html[data-theme="dark"] .cn-dd {
    background: var(--bg-card-2);
    border-color: var(--border);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .7);
}
html[data-theme="dark"] .cn-dd-i { color: var(--text); }
html[data-theme="dark"] .cn-dd-i:hover,
html[data-theme="dark"] .cn-dd-i.act {
    background: #2d2d2d;
    color: var(--accent);
}
html[data-theme="dark"] .cn-si.open {
    background: var(--bg-card-2);
    border-color: var(--border);
}
html[data-theme="dark"] .cn-si-input { color: var(--text); }

/* ═════════════════════════════════════════════════════════════════════════
   КОММЕНТАРИИ (полный блок на странице материала)
   ═════════════════════════════════════════════════════════════════════════ */

html[data-theme="dark"] .comment-item {
    background: var(--bg-card);
    border-color: var(--border);
}
html[data-theme="dark"] .comment-author { color: var(--text); }
html[data-theme="dark"] .comment-meta,
html[data-theme="dark"] .comment-date,
html[data-theme="dark"] .comment-number { color: var(--text-dim); }
html[data-theme="dark"] .comment-number:hover { color: var(--accent); }
html[data-theme="dark"] .comment-divider { background: var(--border-soft); }
html[data-theme="dark"] .comment-text { color: var(--text); }

html[data-theme="dark"] .moderator-comment {
    background: #1a2530;
    border-color: #498bfa;
    border-left-color: #498bfa;
}
html[data-theme="dark"] .moderator-comment .comment-author { color: #6ba3ff; }
html[data-theme="dark"] .moderator-badge { background: #1e3a5f; color: #6ba3ff; }

html[data-theme="dark"] .comment-form-container {
    background: var(--bg-card) !important;
    border-color: var(--border) !important;
}
html[data-theme="dark"] .comment-form-container textarea,
html[data-theme="dark"] .comment-form-container input[type="text"],
html[data-theme="dark"] .comment-form-container input[type="email"] {
    background: var(--bg-input) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}
html[data-theme="dark"] .comment-form-container textarea::placeholder,
html[data-theme="dark"] .comment-form-container input::placeholder {
    color: var(--text-muted) !important;
}
html[data-theme="dark"] .comment-cancel-btn {
    background: var(--bg-card-3) !important;
    color: var(--text) !important;
}

/* ═════════════════════════════════════════════════════════════════════════
   CAPTION SPOILER
   ═════════════════════════════════════════════════════════════════════════ */

html[data-theme="dark"] .caption-spoiler {
    background: var(--bg-card-2);
    border-color: var(--border);
}
html[data-theme="dark"] .caption-summary {
    color: var(--text-dim);
    background: transparent;
}
html[data-theme="dark"] .caption-summary:hover { background: var(--bg-card-3); }
html[data-theme="dark"] .caption-text { color: var(--text); }

/* ═════════════════════════════════════════════════════════════════════════
   ФОРМЫ
   ═════════════════════════════════════════════════════════════════════════ */

html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
    background: var(--bg-input);
    border-color: var(--border);
    color: var(--text);
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: var(--text-muted); }
html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(125, 180, 255, .2);
}
html[data-theme="dark"] input[type="submit"],
html[data-theme="dark"] input[type="button"],
html[data-theme="dark"] input[type="reset"],
html[data-theme="dark"] input[type="file"] {
    background: linear-gradient(to bottom, #333, #262626) !important;
    color: var(--text) !important;
    box-shadow: 0 0 2px #000 !important;
}

/* ═════════════════════════════════════════════════════════════════════════
   AD / LOADING
   ═════════════════════════════════════════════════════════════════════════ */

html[data-theme="dark"] .ad-container { background: var(--bg-card-2); }
html[data-theme="dark"] .ad-label { color: var(--text-muted); }
html[data-theme="dark"] .loading-indicator,
html[data-theme="dark"] #loading-indicator,
html[data-theme="dark"] #loading-more {
    background: var(--bg-card-2);
    color: var(--text-dim);
}
html[data-theme="dark"] .load-more-btn,
html[data-theme="dark"] #load-more-btn {
    color: var(--text-dim);
    border-color: var(--border);
    background: transparent;
}
html[data-theme="dark"] .load-more-btn:hover,
html[data-theme="dark"] #load-more-btn:hover {
    background: var(--bg-card-2);
    border-color: var(--accent);
    color: var(--accent);
}

/* ═════════════════════════════════════════════════════════════════════════
   FOOTER / SIDE PANEL
   ═════════════════════════════════════════════════════════════════════════ */

html[data-theme="dark"] .footer { color: var(--text-muted); }
html[data-theme="dark"] .footer a { color: var(--text-dim); }
html[data-theme="dark"] .footer a:hover { color: var(--accent); }
html[data-theme="dark"] .side-panel { background: var(--bg-card); }
html[data-theme="dark"] .side-panel-header h3 { color: var(--text); }
html[data-theme="dark"] .side-search-input {
    background: var(--bg-input);
    border-color: var(--border);
    color: var(--text);
}
html[data-theme="dark"] .side-category-item {
    color: var(--text);
    border-bottom-color: var(--border-soft);
}
html[data-theme="dark"] .side-category-item:hover {
    background: var(--bg-card-2);
    color: var(--accent);
}
html[data-theme="dark"] #gotop { background: #1e4a85; }
html[data-theme="dark"] #gotop:hover { background: #245a9e; }

/* ═════════════════════════════════════════════════════════════════════════
   SCROLLBAR
   ═════════════════════════════════════════════════════════════════════════ */

html[data-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-theme="dark"] ::-webkit-scrollbar-track { background: #1a1a1a; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #3a3a3a;
    border-radius: 5px;
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #4a4a4a; }

/* ═════════════════════════════════════════════════════════════════════════
   КНОПКА ТЕМЫ
   ═════════════════════════════════════════════════════════════════════════ */

.theme-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    margin: 0 6px 0 0 !important;
    border: 1px solid #e3e3e3 !important;
    background: #fcfcfc !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    transition: background .2s, border-color .2s, transform .1s !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
}
.theme-toggle:hover { background: #f5f5f5 !important; border-color: #ccc !important; }
.theme-toggle:active { transform: scale(.94) !important; }
.theme-toggle svg {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    fill: none !important;
    stroke: #4f6173 !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    pointer-events: none !important;
}
.theme-toggle svg path,
.theme-toggle svg circle,
.theme-toggle svg line,
.theme-toggle svg polyline {
    fill: none !important;
    stroke: #4f6173 !important;
}
html[data-theme="dark"] .theme-toggle {
    background: #252525 !important;
    border-color: #333 !important;
}
html[data-theme="dark"] .theme-toggle:hover {
    background: #2d2d2d !important;
    border-color: #444 !important;
}
html[data-theme="dark"] .theme-toggle svg,
html[data-theme="dark"] .theme-toggle svg path,
html[data-theme="dark"] .theme-toggle svg circle,
html[data-theme="dark"] .theme-toggle svg line,
html[data-theme="dark"] .theme-toggle svg polyline {
    stroke: #e0e0e0 !important;
}

.header-content .logo-section    { order: 1; }
.header-content .search-section  { order: 2; }
.header-content .theme-toggle    { order: 3; }
.header-content .menu-section    { order: 4; }

@media (min-width: 601px) {
    .header-content .search-section {
        margin-left: auto !important;
        margin-right: 6px !important;
    }
    .header-content .theme-toggle { margin: 0 !important; }
    .header-content .menu-section {
        min-width: 0 !important;
        flex: 0 0 0 !important;
        margin: 0 !important;
        width: 0 !important;
        overflow: hidden !important;
    }
}
@media (max-width: 1040px) {
    .header-content .theme-toggle { margin: 0 8px 0 0 !important; }
    .header-content .menu-section {
        min-width: 36px !important;
        margin-left: 0 !important;
    }
}
@media (max-width: 600px) {
    .header-content .theme-toggle {
        width: 36px !important;
        height: 36px !important;
        margin: 0 6px 0 0 !important;
    }
    .header-content .theme-toggle svg {
        width: 18px !important;
        height: 18px !important;
    }
}

/* ═════════════════════════════════════════════════════════════════════════
   АДАПТИВ
   ═════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    html[data-theme="dark"] .material-wrapper {
        margin-bottom: 14px !important;
    }
    html[data-theme="dark"] .material-wrapper > article.short,
    html[data-theme="dark"] .material-wrapper > .short {
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
    }
}