/**
 * Главная (старый дизайн) в цвете логотипа — «тихий бренд».
 * Логотип: светлая тема #9a4669 (слива), тёмная — #e9a6bc (пыльная роза),
 * те же значения, что --rose в теме v4 (theme-assets/v4/panorama.css).
 *
 * Подключается только на главной (views/site/index.php), последним.
 * Стили виджетов (sidebar-top.css, books_swiper_widget.css) попадают в <head>
 * позже этого файла, а dark-theme.css ставит !important, поэтому селекторы
 * начинаются с «html body»/«#f-hot» (выше специфичность), в тёмной теме — с !important.
 * Медали 1–3 и полоска статуса под обложкой не трогаются: их цвет несёт смысл.
 */

html {
    --brand: #9a4669;
    --brand-strong: #7d3655;
    --brand-hover: #833a59;
    --brand-soft: #f7edf2;
    --brand-soft-hover: #f0dde7;
    --brand-line: #ecd3df;
    --brand-on: #ffffff;
}

html body.dark-theme {
    --brand: #e9a6bc;
    --brand-strong: #f0bfd0;
    --brand-hover: #f3c6d5;
    --brand-soft: #362732;
    --brand-soft-hover: #43303d;
    --brand-line: #4a3442;
    --brand-on: #241b23;
}

/* ===== Заголовки блоков: линия под h3 — мягкий оттенок бренда ===== */
html body #f-hot h3,
html body .book-rows-swiper h3,
html body .sidebar-top-widget h3 {
    border-bottom-color: var(--brand-line);
}

/* ===== Теги (пилюли над лентой) ===== */
html body .home-tag-card__pill {
    background: var(--brand-soft);
    color: var(--brand-strong);
    border-color: transparent;
}
html body .home-tag-card__pill:hover,
html body .home-tag-card__pill:focus {
    background: var(--brand);
    color: var(--brand-on);
}
html body .home-tag-card__pill:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}
html body.dark-theme .home-tag-card__pill {
    background: var(--brand-soft) !important;
    color: var(--brand-strong) !important;
    border-color: transparent !important;
}
html body.dark-theme .home-tag-card__pill:hover,
html body.dark-theme .home-tag-card__pill:focus {
    background: var(--brand) !important;
    color: var(--brand-on) !important;
}

/* ===== Ссылки главной ===== */
html body #f-hot .lenta-all-link,
html body #f-hot .rank-slider-all,
html body #f-hot .rank-slider-subtitle,
html body .sidebar-top-widget .stw-footer a {
    color: var(--brand);
}
html body #f-hot .lenta-all-link:hover,
html body #f-hot .rank-slider-all:hover,
html body #f-hot .rank-slider-subtitle:hover,
html body .sidebar-top-widget .stw-footer a:hover {
    color: var(--brand-hover);
    text-decoration: underline;
    text-underline-offset: 3px;
}
html body .last-readed__all,
html body.dark-theme .last-readed__all {
    color: var(--brand) !important;
}

/* ===== Кнопки-фильтры ленты («На подписку», «Закладки», «Авторские», «Фильтры», настройки) =====
 * В стиле вкладок «Топовые переводы»: плашка без рамки, скругление 8px, бледный фон бренда;
 * включённая — заливка бренда. Вместо bootstrap-кнопок (рамка, градиент, тень текста).
 * !important — перебить bootstrap (.btn-group срезает скругления соседних кнопок) и dark-theme.css.
 * Только .btn-toolbar: кнопки окна «Дополнительные фильтры» не трогаем. Те же правила — на /updates. */
html body #f-hot form .btn-toolbar .btn-group > div {
    display: inline-flex;
    gap: 5px;
}
html body #f-hot form .btn-toolbar .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 32px;
    margin: 0 !important;
    padding: 6px 14px;
    border: 0 !important;
    border-radius: 8px !important;
    background: var(--brand-soft) !important;
    background-image: none !important;
    box-shadow: none !important;
    color: var(--brand-strong) !important;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    text-shadow: none !important;
    transition: background-color .15s ease, color .15s ease;
}
html body #f-hot form .btn-toolbar a.btn {
    padding: 6px 10px;
}
html body #f-hot form .btn-toolbar .btn:hover,
html body #f-hot form .btn-toolbar .btn:focus {
    background: var(--brand-soft-hover) !important;
    color: var(--brand-strong) !important;
    text-decoration: none;
}
html body #f-hot form .btn-toolbar .btn.active,
html body #f-hot form .btn-toolbar .btn.active:hover,
html body #f-hot form .btn-toolbar .btn.active:focus {
    background: var(--brand) !important;
    color: var(--brand-on) !important;
}
html body #f-hot form .btn-toolbar .btn.active:hover {
    background: var(--brand-hover) !important;
}
html body #f-hot form .btn-toolbar .btn:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}
/* Тёмная тема — как вкладки топа в тёмной теме */
html body.dark-theme #f-hot form .btn-toolbar .btn {
    background: #2a2128 !important;
    color: #e3c3cf !important;
}
html body.dark-theme #f-hot form .btn-toolbar .btn:hover,
html body.dark-theme #f-hot form .btn-toolbar .btn:focus {
    background: var(--brand-soft) !important;
    color: #ffffff !important;
}
html body.dark-theme #f-hot form .btn-toolbar .btn.active,
html body.dark-theme #f-hot form .btn-toolbar .btn.active:hover,
html body.dark-theme #f-hot form .btn-toolbar .btn.active:focus {
    background: var(--brand) !important;
    color: var(--brand-on) !important;
}
html body.dark-theme #f-hot form .btn-toolbar .btn.active:hover {
    background: var(--brand-hover) !important;
}

/* ===== Бейджи слайдера обновлений ===== */
html body #f-hot .book-rows-swiper .row-book .card-badge-new-chapters {
    background: var(--brand);
    color: var(--brand-on);
}
html body #f-hot .book-rows-swiper .row-book .card-badge-fresh {
    background: var(--brand-soft);
    color: var(--brand-strong);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* ===== «Топовые переводы» (BookTopWidget) ===== */
html body .sidebar-top-widget .stw-tab {
    background: var(--brand-soft);
    color: var(--brand-strong);
}
html body .sidebar-top-widget .stw-tab:hover,
html body .sidebar-top-widget .stw-tab:focus {
    background: var(--brand-soft-hover);
    color: var(--brand-strong);
}
html body .sidebar-top-widget .stw-tab.is-active,
html body .sidebar-top-widget .stw-tab.is-active:hover,
html body .sidebar-top-widget .stw-tab.is-active:focus {
    background: var(--brand);
    color: var(--brand-on);
}
html body .sidebar-top-widget .stw-tab:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}
html body .sidebar-top-widget .stw-num {
    color: var(--brand);
    background: var(--brand-soft);
}
html body .sidebar-top-widget .stw-item + .stw-item {
    border-top-color: var(--brand-soft);
}
html body .sidebar-top-widget .stw-title:hover,
html body .sidebar-top-widget .stw-title:focus {
    color: var(--brand);
}

/* Тёмная тема: та же схема, но вкладки темнее, чтобы не спорить с обложками. */
html body.dark-theme .sidebar-top-widget .stw-tab {
    background: #2a2128;
    color: #e3c3cf;
}
html body.dark-theme .sidebar-top-widget .stw-tab:hover,
html body.dark-theme .sidebar-top-widget .stw-tab:focus {
    background: var(--brand-soft);
    color: #ffffff;
}
html body.dark-theme .sidebar-top-widget .stw-tab.is-active,
html body.dark-theme .sidebar-top-widget .stw-tab.is-active:hover,
html body.dark-theme .sidebar-top-widget .stw-tab.is-active:focus {
    background: var(--brand);
    color: var(--brand-on);
}
html body.dark-theme .sidebar-top-widget .stw-num {
    color: var(--brand);
    background: var(--brand-soft);
}
html body.dark-theme .sidebar-top-widget .stw-item + .stw-item {
    border-top-color: #33262f;
}
html body.dark-theme .sidebar-top-widget .stw-title:hover,
html body.dark-theme .sidebar-top-widget .stw-title:focus,
html body.dark-theme .sidebar-top-widget .stw-footer a {
    color: var(--brand);
}

/* Медали 1–3 — по-прежнему золото/серебро/бронза (правила sidebar-top.css с классом выше). */
html body .sidebar-top-widget .stw-num.stw-gold { color: #9a7400; background: #fff7df; }
html body .sidebar-top-widget .stw-num.stw-silver { color: #6c7378; background: #f4f6f7; }
html body .sidebar-top-widget .stw-num.stw-bronze { color: #8a5320; background: #fbf0e6; }
html body.dark-theme .sidebar-top-widget .stw-num.stw-gold { color: #f0c552; background: #2c2410; }
html body.dark-theme .sidebar-top-widget .stw-num.stw-silver { color: #c2c8cd; background: #23282d; }
html body.dark-theme .sidebar-top-widget .stw-num.stw-bronze { color: #d99a5e; background: #2a1f16; }

/* ===== Новости книг, «Обсуждается в блоге», «Пишут пользователи» =====
 * Ссылки «→ все новости / весь блог / остальные посты / остальные обсуждения» —
 * вместе со стрелкой; заголовки записей и ссылки новостей. Цвет ника пользователя
 * (span со своим style внутри ссылки) не трогаем. */
html body #f-announces .links,
html body #f-announces .links a,
html body #f-blog > h2 .links,
html body #f-blog > h2 .links a,
html body #f-blog > p.links,
html body #f-blog > p.links a,
html body #f-user-blog > p.links,
html body #f-user-blog > p.links a,
html body #f-blog > ul > li > a:not(.user-inactive):not(.user-deleted),
html body #f-user-blog > ul > li > a:not(.user-inactive):not(.user-deleted) {
    color: var(--brand) !important;
}
html body #f-announces .links a:hover,
html body #f-blog .links a:hover,
html body #f-user-blog .links a:hover,
html body #f-blog > ul > li > a:not(.user-inactive):not(.user-deleted):hover,
html body #f-user-blog > ul > li > a:not(.user-inactive):not(.user-deleted):hover {
    color: var(--brand-hover) !important;
}
/* Удалённый автор: зачёркнут (v3.1.css). В светлой теме своего цвета нет — без этого остался бы синим
 * из home-cards.css; в тёмной красный !important из dark-theme.css сильнее этого правила. */
html body #f-user-blog > ul > li > a.user-deleted {
    color: var(--brand);
}
html body #f-blog > ul > li:hover,
html body #f-user-blog > ul > li:hover {
    background: #fbf5f8;
}
html body.dark-theme #f-blog > ul > li:hover,
html body.dark-theme #f-user-blog > ul > li:hover {
    background: #2a2128;
}

html body #f-announces .announce-card .b h2 a {
    color: var(--brand) !important;
}
html body #f-announces .announce-card .b h2 a:hover,
html body #f-announces .announce-card .b .info a:not(.user-inactive):not(.user-deleted):hover,
html body #f-announces .announce-card .b .cmt a:hover,
html body #f-announces .announce-card .announce-more,
html body #f-announces .announce-card .announce-more:hover,
html body #f-announces .announce-card .announce-more:focus {
    color: var(--brand-hover) !important;
}
html body.dark-theme #f-announces .announce-card .b h2 a {
    color: var(--dark-text-primary, #e8e8e8) !important;
}
html body.dark-theme #f-announces .announce-card .b .info a:not(.user-inactive):not(.user-deleted) {
    color: var(--brand) !important;
}
/* Неактивный/удалённый автор: dark-theme.css красит все ссылки .info в голубой #8ab4f8 с !important,
 * перебивая цвета статуса. Возвращаем те же цвета, что у таких ников на остальном сайте. */
html body.dark-theme #f-announces .announce-card .b .info a.user-inactive {
    color: var(--dark-text-muted, #888) !important;
}
html body.dark-theme #f-announces .announce-card .b .info a.user-deleted {
    color: #f87171 !important;
}
html body.dark-theme #f-announces .announce-card .b h2 a:hover,
html body.dark-theme #f-announces .announce-card .b .info a:not(.user-inactive):not(.user-deleted):hover,
html body.dark-theme #f-announces .announce-card .b .cmt a:hover,
html body.dark-theme #f-announces .announce-card .announce-more,
html body.dark-theme #f-announces .announce-card .announce-more:hover,
html body.dark-theme #f-announces .announce-card .announce-more:focus {
    color: var(--brand-hover) !important;
}

/* Полоска прогресса «Продолжить чтение» */
html body .last-readed-card__bar {
    background: var(--brand);
}