/* ── Боковая панель навигации (drawer-оверлей; макет НЕ сдвигается) ──
   Бургер в шапке открывает/закрывает; состояние в localStorage (lc_sidebar_open).
   Выключение всей фичи — класс html.sidebar-off (настройка lc_sidebar). */
:root { --sb-w: 244px; }
.hdr-sb-toggle { margin-right: 2px; }
html.sidebar-off .hdr-sb-toggle,
html.sidebar-off .site-sidebar,
html.sidebar-off .sb-backdrop { display: none !important; }

.site-sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: var(--sb-w); max-width: 84vw; z-index: 460;
    display: flex; flex-direction: column;
    background: var(--bg-page);                 /* фон как у основной борды */
    border-right: 1px solid var(--border-form);
    box-shadow: 2px 0 14px var(--shadow-color);
    transform: translateX(-100%);
    will-change: transform; overscroll-behavior: contain;
}
.site-sidebar.sb-ready { transition: transform .24s ease; }
html.sidebar-open .site-sidebar { transform: translateX(0); }

.sb-backdrop {
    position: fixed; inset: 0; z-index: 455;
    background: var(--modal-overlay);
    opacity: 0; visibility: hidden;
    transition: opacity .24s ease, visibility .24s ease;
}
html.sidebar-open .sb-backdrop { opacity: 1; visibility: visible; }
@media (min-width: 981px) { .sb-backdrop { background: rgba(0,0,0,.22); } }

.site-sidebar__hdr {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    flex: 0 0 auto; padding: 10px 12px;
    background: var(--bg-header); border-bottom: 1px solid var(--border-sep);
}
.site-sidebar__logo {
    font-size: 17px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--text-main); text-decoration: none;
}
.site-sidebar__logo:hover { color: var(--crimson); text-decoration: none; }
/* Загружаемый логотип сайдбара — адаптивный, с альфа-каналом/SVG */
.site-sidebar__logo--img { display: inline-flex; align-items: center; min-width: 0; flex: 1 1 auto; }
.site-sidebar__logo-img { max-width: 100%; max-height: var(--sb-logo-h, 44px); width: auto; height: auto; object-fit: contain; display: block; }
/* Включён, но файл не загружен → пустой прозрачный контейнер (как плейсхолдер медиа) */
.site-sidebar__logo-ph {
    flex: 1 1 auto; height: var(--sb-logo-h, 44px); border: 1px dashed var(--border-sep);
    background-image:
        linear-gradient(45deg, var(--border-sep) 25%, transparent 25%), linear-gradient(-45deg, var(--border-sep) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, var(--border-sep) 75%), linear-gradient(-45deg, transparent 75%, var(--border-sep) 75%);
    background-size: 14px 14px; background-position: 0 0, 0 7px, 7px -7px, -7px 0; opacity: .5;
}
.site-sidebar__close {
    background: none; border: none; cursor: pointer; padding: 4px; line-height: 1;
    border-radius: 6px; color: var(--text-muted); display: inline-flex; align-items: center;
}
.site-sidebar__close:hover { color: var(--crimson); background: var(--bg-tag); }

.site-sidebar__nav { flex: 1 1 auto; overflow-y: auto; padding: 0 0 12px; }
/* Плашка категории — подклад чуть темнее фона, плоская (без скруглений) */
.site-sidebar__cat {
    position: sticky; top: 0; z-index: 1;
    margin: 0; padding: 6px 12px;
    font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px;
    color: var(--text-muted);
    background: var(--bg-header);
    border-top: 1px solid var(--border-sep); border-bottom: 1px solid var(--border-sep);
}
/* Доска — строка-подклад в тон темы, плоская (без скруглений и зазоров) */
.site-sidebar__link {
    display: flex; align-items: baseline; gap: 8px;
    margin: 0; padding: 7px 12px; text-decoration: none;
    color: var(--text-dim);
    background: var(--bg-post-reply);
    border-bottom: 1px solid var(--border-sep);
    transition: background .12s, color .12s, box-shadow .12s;
}
.site-sidebar__link:hover { background: var(--bg-tag); color: var(--text-main); text-decoration: none; }
.site-sidebar__link[aria-current="page"] {
    color: var(--crimson); background: var(--bg-tag); box-shadow: inset 3px 0 0 var(--crimson);
}
.site-sidebar__slug { flex: 0 0 auto; font-weight: 700; font-size: 13px; color: var(--crimson); }
.site-sidebar__title { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Закреплённый (docked) сайдбар — ТОЛЬКО десктоп (≥981px) ──
   Панель встроена в макет: контент сдвигается вправо (padding-left у body —
   sticky-шапка и .site-main уезжают вместе), без затемнения/тени, без бургера.
   На мобиле класс игнорируется (media-query) → остаётся drawer + бургер.
   Совместимо с «контент на всю ширину» (там --site-width:100%, без 100vw). */
@media (min-width: 981px) {
    html.sidebar-pinned:not(.sidebar-off) body { padding-left: var(--sb-w); }
    html.sidebar-pinned:not(.sidebar-off) .site-sidebar {
        transform: none; box-shadow: none;
    }
    html.sidebar-pinned:not(.sidebar-off) .sb-backdrop { display: none !important; }
    html.sidebar-pinned:not(.sidebar-off) .hdr-sb-toggle,
    html.sidebar-pinned:not(.sidebar-off) .site-sidebar__close { display: none !important; }
}
/* ══════════════════════════════════════════════════════════════
   ИЗБРАННОЕ — компактная панель + плавающая звезда (FAB).
   Дизайн под тему (CSS-переменные). Цвет звезды — токен --fav-star
   (определён в themes/*.css).
   ══════════════════════════════════════════════════════════════ */

/* Когда панель выключена в настройках — прячем звёзды у постов */
.favs-off .post__fav-btn { display: none !important; }

/* ── Плавающая кнопка-звезда (правый нижний угол) ──────────────── */
/* Звезда стоит НАД нижней кнопкой прокрутки (.scroll-nav__btn--bottom: right:8/bottom:16, 32px) */
.favfab {
    position: fixed; right: 8px; bottom: 56px; left: auto; z-index: 441;
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0;
    background: var(--bg-form); color: var(--fav-star);
    border: 1px solid var(--border-form); border-radius: 50%;
    font-size: 20px; line-height: 1; cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: border-color .14s, transform .14s, background .14s;
}
.favfab[hidden] { display: none; }
.favfab:hover { border-color: var(--fav-star); transform: translateY(-2px); }
.favfab.is-active { border-color: var(--crimson); background: var(--bg-header); }
.favfab__count {
    position: absolute; top: -4px; right: -4px;
    min-width: 18px; height: 18px; padding: 0 5px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--crimson); color: var(--text-btn);
    font-size: 10px; font-weight: 700; line-height: 1;
    border-radius: 9px; border: 2px solid var(--bg-page);
    box-sizing: border-box;
}
.favfab__count[hidden] { display: none; }

/* ── Панель ────────────────────────────────────────────────────── */
.favbox {
    position: fixed; right: 8px; bottom: 108px; left: auto; z-index: 442;
    width: 320px; max-width: calc(100vw - 28px); max-height: min(60vh, 520px);
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--bg-form); color: var(--text-main);
    border: 1px solid var(--border-form); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    animation: favbox-in .14s ease-out;
}
.favbox[hidden] { display: none; }
@keyframes favbox-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.favbox__hdr {
    display: flex; align-items: center; gap: 6px; flex-shrink: 0;
    padding: 11px 10px 11px 14px;
    border-bottom: 1px solid var(--border-sep);
    background: var(--bg-header);
}
.favbox__title {
    flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 8px;
    font-size: 14px; font-weight: 600; color: var(--text-main);
}
.favbox__star { color: var(--fav-star); font-size: 15px; line-height: 1; }
.favbox__check { font-size: 15px; line-height: 1; font-weight: 700; }
.favbox__btn {
    flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; padding: 0;
    background: none; border: 1px solid transparent; border-radius: var(--radius);
    color: var(--text-muted); cursor: pointer;
    transition: color .12s, background .12s, border-color .12s;
}
.favbox__btn:hover { color: var(--text-main); background: var(--bg-tag); border-color: var(--border-sep); }
.favbox__btn svg { display: block; }
#favs-refresh.is-spin svg { animation: favbox-spin .7s linear infinite; }
@keyframes favbox-spin { to { transform: rotate(360deg); } }

.favbox__body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.favbox__empty {
    padding: 22px 14px; text-align: center; line-height: 1.7;
    font-size: 12px; color: var(--text-muted);
}
.favbox__empty small { color: var(--text-muted); opacity: .8; }

/* ── Строка треда ──────────────────────────────────────────────── */
.favitem {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 10px 9px 12px;
    border-bottom: 1px solid var(--border-sep);
    transition: background .12s;
}
.favitem:last-child { border-bottom: none; }
.favitem:hover { background: var(--bg-tag); }
.favitem--new { background: color-mix(in srgb, var(--fav-star) 8%, transparent); }
.favitem--cur { box-shadow: inset 3px 0 0 var(--crimson); }
.favitem__link {
    flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 6px;
    text-decoration: none; overflow: hidden;
}
.favitem__board { flex-shrink: 0; font-size: 10px; font-weight: 600; color: var(--text-muted); }
.favitem__title {
    flex: 1; min-width: 0; font-size: 12.5px; color: var(--text-link);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.favitem__link:hover .favitem__title { color: var(--text-link-hover); }
.favitem--cur .favitem__title { font-weight: 700; color: var(--text-main); }
.favitem__count {
    flex-shrink: 0; font-size: 10px; font-weight: 700; line-height: 1;
    color: var(--text-btn); background: var(--crimson);
    padding: 2px 6px; border-radius: 9px; white-space: nowrap;
}
/* «Ответы вам» — число в скобках внутри малинового счётчика (светлое золото для контраста) */
.favitem__mine { color: var(--fav-star); margin-left: 3px; }
.favitem__del {
    flex-shrink: 0; width: 22px; height: 22px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: none; border-radius: var(--radius);
    color: var(--text-muted); font-size: 17px; line-height: 1; cursor: pointer;
    transition: color .12s, background .12s;
}
.favitem__del:hover { color: var(--text-btn); background: var(--crimson); }

/* ── Звезда ★/☆ в мета-строке поста ────────────────────────────── */
.post__fav-btn {
    background: none; border: none; cursor: pointer;
    font-size: 14px; padding: 0 3px; line-height: 1;
    vertical-align: middle; color: var(--text-muted);
    transition: color .12s, transform .1s;
}
.post__fav-btn:hover { color: var(--fav-star-dim); transform: scale(1.15); }
.post__fav-btn.is-fav { color: var(--fav-star); }

/* ── Мобильные ─────────────────────────────────────────────────── */
@media (max-width: 639px) {
    .favfab { right: 8px; bottom: 56px; width: 46px; height: 46px; font-size: 22px; }
    .favbox {
        left: 8px; right: 8px; width: auto; max-width: none;
        bottom: 110px; max-height: 64vh;
    }
    .favbox__btn { width: 34px; height: 34px; }
    .favitem { padding: 12px 12px; }
    .favitem__del { width: 28px; height: 28px; font-size: 19px; }
}

/* Кнопка toggle в шапке */
.hdr-sb-toggle {
    background: none; border: none; color: var(--hdr-btn-color);
    cursor: pointer; padding: 4px 6px; border-radius: var(--radius);
    display: flex; align-items: center; transition: color .15s, background .15s;
    flex-shrink: 0;
}
.hdr-sb-toggle:hover, .hdr-sb-toggle.is-active { color: var(--hdr-btn-hover); background: var(--hdr-btn-hover-bg); }

/* ── Кнопка настроек в шапке ──────────────────────────────── */
.sp-section-title {
    font-size: 10px; font-weight: 600; letter-spacing: .06em;
    text-transform: uppercase; color: var(--text-muted);
    padding: 4px 0 2px;
}
.sp-select {
    background: var(--bg-input, var(--bg-post-reply)); border: 1px solid var(--border-form);
    color: var(--text-main); border-radius: var(--radius); padding: 2px 6px;
    font-size: 12px; cursor: pointer;
}
.site-header__right { display: flex; align-items: center; }

/* ── Кнопки «Донат» и «Контакты» в шапке ─────────────────────── */
.hdr-donate-btn,
.hdr-contacts-btn { gap: 5px; }
.hdr-donate-btn:has(.hdr-donate-btn__label),
.hdr-contacts-btn:has(.hdr-contacts-btn__label) { padding: 4px 8px; }
.hdr-donate-btn { color: var(--donate-accent); }
.hdr-donate-btn:hover { color: var(--donate-accent-strong); background: var(--donate-accent-bg); }
.hdr-contacts-btn:hover { background: var(--hdr-btn-hover-bg); color: var(--hdr-btn-hover); }
/* Кнопка обратной связи «!» — мягкий янтарный акцент, чтобы заметно, но не кричаще. */
.hdr-feedback-btn { color: var(--fb-accent); }
.hdr-feedback-btn:hover { color: var(--fb-accent-strong); background: var(--fb-accent-bg); }
.hdr-donate-btn__label,
.hdr-contacts-btn__label { font-size: 12px; font-weight: 600; letter-spacing: .02em; }
@media (max-width: 520px) {
    .hdr-donate-btn__label,
    .hdr-contacts-btn__label { display: none; }
}

/* ── Модалка (общая для доната и контактов) ─────────────────── */
.donate-modal {
    position: fixed; inset: 0; z-index: 9600;
    background: var(--modal-overlay);
    display: none; align-items: center; justify-content: center;
    padding: 16px;
}
.donate-modal.is-open { display: flex; }
.donate-modal__box {
    background: var(--bg-form);
    border: 1px solid var(--border-form);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    width: 100%; max-width: 540px; max-height: 90vh;
    display: flex; flex-direction: column; overflow: hidden;
}
.donate-modal__hdr {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-sep);
    font-weight: 600; font-size: 14px; color: var(--text-main);
}
.donate-modal__hdr svg { color: var(--donate-accent-strong, var(--crimson)); }
#contacts-modal .donate-modal__hdr svg { color: var(--contacts-accent, var(--donate-accent-strong)); }
.donate-modal__close {
    margin-left: auto; background: none; border: 0;
    color: var(--text-muted); cursor: pointer;
    padding: 4px 6px; border-radius: var(--radius);
    display: inline-flex; align-items: center;
}
.donate-modal__close:hover { color: var(--text-main); background: var(--bg-tag); }
.donate-modal__body {
    padding: 14px 16px; overflow-y: auto;
    color: var(--text-main); font-size: 13px; line-height: 1.55;
}
.donate-modal__desc { margin: 0 0 14px; color: var(--text-dim); white-space: pre-wrap; }

/* ── Форма обратной связи (модалка «!») ── */
.fb-form { display: flex; flex-direction: column; gap: 12px; }
.fb-field { display: flex; flex-direction: column; gap: 4px; }
.fb-field__lbl { font-size: 12px; color: var(--text-dim); }
.fb-field__opt { opacity: .65; font-weight: 400; }
.fb-input {
    width: 100%; box-sizing: border-box; padding: 8px 10px; font-size: 13px;
    background: var(--bg-page); color: var(--text-main);
    border: 1px solid var(--border-sep); border-radius: var(--radius-sm);
}
.fb-input:focus { outline: none; border-color: var(--crimson); }
textarea.fb-input { resize: vertical; min-height: 90px; font-family: inherit; }
/* Кастомный файл-пикер: нативный input спрятан, label — аккуратная кнопка. */
.fb-file { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fb-file input[type="file"] {
    position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}
.fb-file__btn {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    padding: 7px 12px; font-size: 12.5px; font-weight: 500; border-radius: var(--radius-sm);
    background: var(--bg-page); color: var(--text-main);
    border: 1px solid var(--border-sep); transition: border-color .12s, background .12s;
}
.fb-file__btn:hover { border-color: var(--crimson); background: color-mix(in srgb, var(--crimson) 8%, var(--bg-page)); }
.fb-file input[type="file"]:focus-visible + .fb-file__btn { border-color: var(--crimson); box-shadow: 0 0 0 2px color-mix(in srgb, var(--crimson) 30%, transparent); }
.fb-file__names { font-size: 12px; color: var(--text-dim); min-width: 0; word-break: break-word; flex: 1; }
.fb-file__names.has { color: var(--text-main); }
.fb-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 2px; }
.fb-status { font-size: 12px; color: var(--text-dim); display: inline-flex; align-items: center; gap: 5px; }
.fb-status svg { flex-shrink: 0; }
.fb-status--ok { color: var(--accent); }
.fb-status--err { color: var(--alert-error-color); }
.donate-modal__tabs {
    display: flex; gap: 4px; border-bottom: 1px solid var(--border-sep);
    margin: 0 0 14px;
}
.donate-modal__tab {
    background: none; border: 0; padding: 8px 14px;
    color: var(--text-muted); cursor: pointer; font-size: 13px;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
    display: inline-flex; align-items: center; gap: 6px;
    font-family: inherit;
}
.donate-modal__tab:hover { color: var(--text-main); }
.donate-modal__tab.is-active {
    color: var(--text-main);
    border-bottom-color: var(--donate-accent-strong, var(--crimson));
}
.donate-modal__pane { display: none; }
.donate-modal__pane.is-active { display: block; }
.donate-modal__empty {
    text-align: center; color: var(--text-muted);
    font-size: 12px; padding: 18px 0;
}

/* Карточка с реквизитом / контактом */
.donate-item {
    background: var(--bg-post-reply);
    border: 1px solid var(--border-form);
    border-radius: var(--radius-lg);
    padding: 12px 14px; margin-bottom: 10px;
    display: flex; flex-direction: column; gap: 8px;
    transition: border-color .12s, box-shadow .12s;
    position: relative; overflow: hidden;
}
.donate-item::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--donate-accent-strong, var(--crimson));
    opacity: .55; transition: opacity .12s;
}
#contacts-modal .donate-item::before { background: var(--contacts-accent, var(--donate-accent-strong)); }
.donate-item:hover {
    border-color: var(--donate-accent-strong, var(--crimson));
    box-shadow: var(--shadow-sm);
}
.donate-item:hover::before { opacity: 1; }
.donate-item__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.donate-item__badge {
    display: inline-flex; align-items: center;
    background: var(--donate-accent-bg, color-mix(in srgb, var(--brand) 14%, transparent));
    color: var(--donate-accent-strong, var(--crimson));
    border: 1px solid var(--donate-accent-border, color-mix(in srgb, var(--brand) 24%, transparent));
    font-size: 10px; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
    padding: 2px 7px; border-radius: var(--radius-sm);
}
#contacts-modal .donate-item__badge {
    background: color-mix(in srgb, var(--contacts-accent, var(--brand)) 14%, transparent);
    color: var(--contacts-accent, var(--brand));
    border-color: color-mix(in srgb, var(--contacts-accent, var(--brand)) 26%, transparent);
}
.donate-item__actions {
    margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
}
.donate-item__value {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 13px; line-height: 1.45;
    color: var(--text-main);
    word-break: break-all;
    background: var(--bg-input);
    border: 1px solid var(--border-sep);
    border-radius: var(--radius);
    padding: 8px 10px; cursor: pointer;
    transition: border-color .12s;
    user-select: all; -webkit-user-select: all;
}
.donate-item__value:hover { border-color: var(--donate-accent-strong, var(--crimson)); }
.donate-item__extra {
    font-size: 11px; color: var(--text-muted);
    display: inline-flex; align-items: center; gap: 5px;
}
.donate-item__extra::before { content: "→"; opacity: .6; }
.donate-item__btn {
    flex-shrink: 0; background: none; border: 1px solid var(--border-form);
    color: var(--text-dim); cursor: pointer;
    padding: 4px 9px; border-radius: var(--radius);
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; font-family: inherit; line-height: 1.3;
    text-decoration: none;
    transition: color .12s, border-color .12s, background .12s;
}
.donate-item__btn:hover {
    color: var(--text-btn);
    border-color: var(--donate-accent-strong, var(--crimson));
    background: var(--donate-accent-strong, var(--crimson));
}
#contacts-modal .donate-item__btn:hover {
    border-color: var(--contacts-accent, var(--donate-accent-strong));
    background: var(--contacts-accent, var(--donate-accent-strong));
}
.donate-item__btn.is-copied { color: var(--accent); border-color: var(--accent); background: transparent; }
.donate-item__btn.is-active {
    color: var(--text-btn);
    border-color: var(--donate-accent-strong, var(--crimson));
    background: var(--donate-accent-strong, var(--crimson));
}
.donate-item__qr {
    display: none; margin-top: 4px;
    background: var(--qr-paper); border-radius: var(--radius);
    padding: 10px; align-self: center;
}
.donate-item__qr.is-open { display: block; }
.donate-item__qr svg { display: block; width: 180px; height: 180px; }
/* Загруженный (кастомный) QR — авто-подгон под бокс, без искажений пропорций */
.donate-item__qr-img {
    display: block; width: 180px; height: 180px;
    max-width: 100%; object-fit: contain; background: var(--qr-paper);
}
.donate-item__qr-caption {
    font-size: 10px; color: var(--qr-ink); text-align: center;
    margin-top: 6px; font-family: ui-monospace, monospace;
    word-break: break-all; max-width: 180px;
}