/* ============================================================
   Demotivation v2 — Dark theme
   Подключается ПОСЛЕ app.css и comments.css.
   Работает только когда на <html> стоит data-theme="dark".
   Атрибут ставит inline-скрипт в <head> (см. layout.php) —
   до первой отрисовки, чтобы не было FOUC.
   ============================================================ */

[data-theme="dark"] {
    /* Базовые токены */
    --c-bg: #121212;
    --c-bg-alt: #1e1e1e;
    --c-text: #e8e8e8;
    --c-muted: #9a9a9a;
    --c-link: #6eb4ff;
    --c-border: #3a3a3a;

    --c-primary: #e8e8e8;
    --c-primary-text: #121212;

    --c-success-bg: #143a14;
    --c-success-text: #8ad48a;
    --c-error-bg: #4a1414;
    --c-error-text: #f0a0a0;
    --c-warn-bg: #3a2e00;
    --c-danger: #e06060;

    --shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

/* Шапка остаётся чёрной в обеих темах — не трогаем --hdr-* */

/* ─── Общие кнопки ─────────────────────────────────────────── */
[data-theme="dark"] .btn {
    background: var(--c-bg-alt);
    color: var(--c-text);
    border-color: var(--c-border);
}
[data-theme="dark"] .btn:hover {
    background: #2a2a2a;
}
[data-theme="dark"] .btn--primary {
    background: var(--c-primary);
    color: var(--c-primary-text);
    border-color: var(--c-primary);
}
[data-theme="dark"] .btn--primary:hover {
    background: #f5f5f5;
}
[data-theme="dark"] .btn--primary:disabled {
    background: #555;
    color: #bbb;
}
[data-theme="dark"] .btn--link {
    background: transparent;
    color: var(--c-link);
}
[data-theme="dark"] .btn--danger {
    background: var(--c-danger);
    color: #121212;
    border-color: var(--c-danger);
}
[data-theme="dark"] .btn--danger:hover {
    background: #f07777;
}

/* ─── Формы ───────────────────────────────────────────────── */
[data-theme="dark"] .form-row input[type="text"],
[data-theme="dark"] .form-row input[type="email"],
[data-theme="dark"] .form-row input[type="password"],
[data-theme="dark"] .form-row input[type="url"],
[data-theme="dark"] .form-row input[type="number"],
[data-theme="dark"] .form-row textarea,
[data-theme="dark"] .form-row select,
[data-theme="dark"] .sidebar__search input,
[data-theme="dark"] .search-form input {
    background: var(--c-bg-alt);
    color: var(--c-text);
    border-color: var(--c-border);
}
[data-theme="dark"] .form-row input:focus,
[data-theme="dark"] .form-row textarea:focus,
[data-theme="dark"] .form-row select:focus {
    border-color: var(--c-link);
    outline: none;
}

/* ─── Alerts ──────────────────────────────────────────────── */
[data-theme="dark"] .alert--success {
    background: var(--c-success-bg);
    color: var(--c-success-text);
}
[data-theme="dark"] .alert--error {
    background: var(--c-error-bg);
    color: var(--c-error-text);
}

/* ─── Карточки демо ───────────────────────────────────────── */
[data-theme="dark"] .dem-card {
    background: var(--c-bg-alt);
    border-color: var(--c-border);
}
[data-theme="dark"] .dem-card__thumb {
    background: #0e0e0e;
    border-color: var(--c-border);
}
[data-theme="dark"] .dem-card__rating { color: var(--c-text); }
[data-theme="dark"] .dem-card__rating--empty {
    color: var(--c-link);
}
[data-theme="dark"] .dem-card__rating-label {
    color: var(--c-link);
}

/* ─── Hero ────────────────────────────────────────────────── */
[data-theme="dark"] .hero {
    background: var(--c-bg-alt);
    border-color: var(--c-border);
}

/* ─── Сайдбар ─────────────────────────────────────────────── */
[data-theme="dark"] .sidebar__search input {
    background: var(--c-bg-alt);
    color: var(--c-text);
}

/* ─── Пустое состояние / пагинация ───────────────────────── */
[data-theme="dark"] .empty {
    background: var(--c-bg-alt);
    border-color: var(--c-border);
}

/* ─── Попап голосования ──────────────────────────────────── */
[data-theme="dark"] .vote-popup {
    background: var(--c-bg-alt);
    border-color: #555;
}
[data-theme="dark"] .vote-popup__item {
    color: var(--c-text);
}
[data-theme="dark"] .vote-popup__item:hover {
    background: #2a2a2a;
    color: var(--c-text);
}
[data-theme="dark"] .vote-popup__item--up:hover    { background: #143a14; color: #8ad48a; }
[data-theme="dark"] .vote-popup__item--down:hover  { background: #4a1414; color: #f0a0a0; }
[data-theme="dark"] .vote-popup__item--noway:hover { background: #3a2e00; color: #e8c88a; }

/* ─── BB-коды ────────────────────────────────────────────── */
[data-theme="dark"] .bb-quote {
    background: #181818;
    border-left-color: var(--c-border);
    color: var(--c-muted);
}
[data-theme="dark"] .bb-spoiler {
    background: #444;
    color: #444;
}
[data-theme="dark"] .bb-spoiler.revealed {
    background: #2a2a2a;
    color: var(--c-text);
}

/* ─── Страница демотиватора ─────────────────────────────── */
[data-theme="dark"] .dem-page__vote {
    background: var(--c-bg-alt);
    border-color: var(--c-border);
}
[data-theme="dark"] .dem-vote-btn {
    background: var(--c-bg-alt);
    color: var(--c-text);
    border-color: var(--c-border);
}
[data-theme="dark"] .dem-vote-btn--down:hover {
    background: #4a1414; color: #f0a0a0; border-color: #7a2a2a;
}
[data-theme="dark"] .dem-vote-btn--up:hover {
    background: #143a14; color: #8ad48a; border-color: #2a5a2a;
}
[data-theme="dark"] .dem-vote-btn--noway:hover {
    background: #3a2e00; color: #e8c88a; border-color: #6a5a2a;
}
[data-theme="dark"] .dem-vote-btn__count {
    background: rgba(255, 255, 255, .1);
    color: #ccc;
}
[data-theme="dark"] .dem-vote-btn.is-active .dem-vote-btn__count {
    background: rgba(0, 0, 0, .3);
}
[data-theme="dark"] .dem-vote-btn--down.is-active {
    background: #4a1414; color: #f0a0a0; border-color: #7a2a2a;
}
[data-theme="dark"] .dem-vote-btn--up.is-active {
    background: #143a14; color: #8ad48a; border-color: #2a5a2a;
}
[data-theme="dark"] .dem-vote-btn--noway.is-active {
    background: #3a2e00; color: #e8c88a; border-color: #6a5a2a;
}
[data-theme="dark"] .dem-page__vote-done {
    background: #2a2a2a;
    color: var(--c-muted);
}
[data-theme="dark"] .dem-page__admin {
    background: #2a2a1a;
    border-color: #5a5a3a;
}
[data-theme="dark"] .dem-page__admin--compact {
    background: #2a2a1a;
    border-color: #5a5a3a;
}
[data-theme="dark"] .dem-moderation {
    border-top-color: #5a5a3a;
}
[data-theme="dark"] .dem-moderation code {
    background: #1a1a1a;
    border-color: var(--c-border);
    color: var(--c-text);
}

/* ─── Share ──────────────────────────────────────────────── */
[data-theme="dark"] .share-bar {
    background: var(--c-bg-alt);
    border-color: var(--c-border);
}
[data-theme="dark"] .share-btn {
    background: var(--c-bg-alt);
    color: var(--c-text);
    border-color: var(--c-border);
}
[data-theme="dark"] .share-btn--tg:hover    { background: #1a2a3a; color: #7fc2e5; }
[data-theme="dark"] .share-btn--vk:hover    { background: #1a2530; color: #9db8d6; }
[data-theme="dark"] .share-btn--wa:hover    { background: #143020; color: #6bd990; }
[data-theme="dark"] .share-btn--x:hover     { background: #2a2a2a; color: #fff; }
[data-theme="dark"] .share-btn--copy:hover  { background: #2a2519; color: #e8c88a; }
[data-theme="dark"] .share-btn--download:hover { background: #2a2a2a; color: #ccc; }

/* ─── Комментарии: базовые ──────────────────────────────── */
[data-theme="dark"] .comment {
    background: var(--c-bg-alt);
    border-color: var(--c-border);
}
[data-theme="dark"] .comment--pending {
    background: #2a2500;
    border-color: #6a5a2a;
}
[data-theme="dark"] .comment--new {
    background: #1a2530;
}
[data-theme="dark"] .comment--admin {
    border-left-color: #c33;
}
[data-theme="dark"] .comment--registered {
    border-left-color: #6a9a6a;
}

/* ─── Комментарии: кнопки действий ──────────────────────── */
[data-theme="dark"] .comment__action-btn {
    color: var(--c-muted);
}
[data-theme="dark"] .comment__action-btn:hover {
    background: #2a2a2a;
    color: var(--c-text);
    border-color: var(--c-border);
}
[data-theme="dark"] .comment__action-btn--primary {
    background: #1a2a3a;
    color: #7fc2e5;
    border-color: #2a4a6a;
}
[data-theme="dark"] .comment__action-btn--primary:hover {
    background: #1a3a5a;
    color: #a8d8f5;
    border-color: #4a7aaa;
}
[data-theme="dark"] .comment__action-btn--danger:hover {
    background: #4a1414;
    color: #f0a0a0;
    border-color: #7a2a2a;
}
[data-theme="dark"] .comment__action-btn__count {
    background: rgba(255, 255, 255, .1);
    color: #ccc;
}
[data-theme="dark"] .comment__action-btn:hover .comment__action-btn__count {
    background: rgba(255, 255, 255, .18);
    color: #fff;
}

/* ─── Комментарии: рейтинг ──────────────────────────────── */
[data-theme="dark"] .comment__rating {
    background: #252525;
}
[data-theme="dark"] .comment__rating .comment__action-btn:hover {
    background: #333;
}
[data-theme="dark"] .comment__rating .comment__action-btn[data-value="up"]:hover {
    color: #8ad48a;
    background: #143a14;
}
[data-theme="dark"] .comment__rating .comment__action-btn[data-value="down"]:hover {
    color: #f0a0a0;
    background: #4a1414;
}

/* ─── Комментарии: форма ответа и редактор ─────────────── */
[data-theme="dark"] .comment-reply-wrap {
    background: #2a2500;
    border-color: #6a5a2a;
}
[data-theme="dark"] .comment-reply-wrap__header {
    color: #e8c88a;
    background: rgba(106, 90, 42, .3);
}
[data-theme="dark"] .comment-reply-wrap__header b {
    color: #f5dbaa;
}
[data-theme="dark"] .comment-reply-wrap__cancel {
    background: #1a1a1a !important;
    border-color: #6a5a2a !important;
    color: #e8c88a !important;
}
[data-theme="dark"] .comment-reply-wrap__cancel:hover {
    background: #2a2519 !important;
    color: #f5dbaa !important;
}
[data-theme="dark"] .comment__edit {
    background: #2a2500;
    border-color: #6a5a2a;
}
[data-theme="dark"] .comment__edit-ta {
    background: #1a1a1a;
    color: var(--c-text);
    border-color: var(--c-border);
}

/* ─── Комментарии: модерация ───────────────────────────── */
[data-theme="dark"] .comment__moderation {
    background: #2a2500;
    border-color: #6a5a2a;
    border-left-color: #a08a3a;
}
[data-theme="dark"] .comment__moderation code {
    background: #1a1a1a;
    border-color: var(--c-border);
    color: var(--c-text);
}
[data-theme="dark"] .comment__moderation .mod-title {
    color: #e8c88a;
}
[data-theme="dark"] .mod-hint {
    background: #4a4020;
    color: #f0d88a;
}
[data-theme="dark"] .mod-hint:hover {
    background: #6a5a20;
    color: #fff;
}

/* ─── Комментарии: форма комментария ───────────────────── */
[data-theme="dark"] .comment-form {
    background: var(--c-bg-alt);
    border-color: var(--c-border);
}
[data-theme="dark"] .bb-toolbar .link-btn {
    background: var(--c-bg-alt);
    color: var(--c-text);
    border-color: var(--c-border);
}
[data-theme="dark"] .bb-toolbar .link-btn:hover {
    background: #2a2a2a;
}

/* ─── Комментарии: лента комментариев ───────────────────── */
[data-theme="dark"] .comment__thumb {
    border-color: var(--c-border);
}

/* ─── Форма создания ────────────────────────────────────── */
[data-theme="dark"] .create-form {
    background: var(--c-bg-alt);
    border-color: var(--c-border);
}
[data-theme="dark"] .drop-zone {
    background: #1a1a1a;
    border-color: var(--c-border);
}
[data-theme="dark"] .drop-zone:hover {
    background: #1a2333;
    border-color: var(--c-link);
}
[data-theme="dark"] .drop-zone--over {
    background: #1a2a3a;
    border-color: var(--c-primary);
}
[data-theme="dark"] .maker__field input[type="text"],
[data-theme="dark"] .maker__field input[type="url"] {
    color: var(--c-text);
    border-bottom-color: var(--c-border);
    background: transparent;
}
[data-theme="dark"] .maker__field input[type="text"]:focus,
[data-theme="dark"] .maker__field input[type="url"]:focus {
    border-bottom-color: var(--c-text);
}
[data-theme="dark"] .maker__more-row select,
[data-theme="dark"] .maker__more-row--full input {
    background: var(--c-bg-alt);
    color: var(--c-text);
    border-color: var(--c-border);
}
[data-theme="dark"] .maker__alt {
    background: transparent;
    color: var(--c-muted);
    border-color: var(--c-border);
}
[data-theme="dark"] .maker__alt:hover {
    color: var(--c-text);
    background: #2a2a2a;
    border-color: #555;
}

/* ─── Кроп ───────────────────────────────────────────────── */
[data-theme="dark"] .page--crop {
    background: #0e0e0e;
}
[data-theme="dark"] .crop-stage-wrap {
    background: #1a1a1a;
}
[data-theme="dark"] .crop-actions__cancel {
    color: var(--c-muted);
}
[data-theme="dark"] .crop-actions__cancel:hover {
    background: #2a2a2a;
    color: var(--c-text);
}

/* ─── Админка ────────────────────────────────────────────── */
[data-theme="dark"] .page--admin {
    background: #0e0e0e;
}
[data-theme="dark"] .admin-side {
    background: var(--c-bg-alt);
    border-color: var(--c-border);
}
[data-theme="dark"] .admin-nav a:hover {
    background: #2a2a2a;
}
[data-theme="dark"] .admin-nav a.is-active {
    background: var(--c-primary);
    color: var(--c-primary-text);
}
[data-theme="dark"] .admin-card {
    background: var(--c-bg-alt);
    border-color: var(--c-border);
    color: var(--c-text);
}
[data-theme="dark"] .admin-card--warn {
    background: #2a2000;
    border-color: #6a5a2a;
}
[data-theme="dark"] .admin-table {
    background: var(--c-bg-alt);
    border-color: var(--c-border);
}
[data-theme="dark"] .admin-table thead th {
    background: #252525;
}
[data-theme="dark"] .admin-table th,
[data-theme="dark"] .admin-table td {
    border-bottom-color: var(--c-border);
}
[data-theme="dark"] .badge {
    background: #2a2a2a;
    color: #ccc;
}
[data-theme="dark"] .badge--ok {
    background: #143a14;
    color: #8ad48a;
}
[data-theme="dark"] .badge--danger {
    background: #4a1414;
    color: #f0a0a0;
}
[data-theme="dark"] .badge--warn {
    background: #3a2e00;
    color: #e8c88a;
}
[data-theme="dark"] .admin-form {
    background: var(--c-bg-alt);
    border-color: var(--c-border);
}
[data-theme="dark"] .admin-queue__item {
    background: var(--c-bg-alt);
    border-color: var(--c-border);
}
[data-theme="dark"] .admin-queue__item--hard {
    background: #2a1414;
    border-color: #7a2a2a;
}
[data-theme="dark"] .admin-help {
    background: #14202a;
    border-color: #2a4a6a;
    border-left-color: #4a86c2;
}
[data-theme="dark"] .admin-help h3 {
    color: #7fc2e5;
}
[data-theme="dark"] .admin-help code {
    background: #1a1a1a;
    border-color: #2a4a6a;
    color: #a8d8f5;
}
[data-theme="dark"] .admin-help b {
    color: #a8d8f5;
}

/* ─── Инфо-таблица ──────────────────────────────────────── */
[data-theme="dark"] .info-table th,
[data-theme="dark"] .info-table td {
    border-bottom-color: var(--c-border);
}

/* ─── Модалки ───────────────────────────────────────────── */
[data-theme="dark"] .report-modal__dialog,
[data-theme="dark"] .rules-modal__dialog {
    background: var(--c-bg-alt);
}
[data-theme="dark"] .report-modal__close:hover,
[data-theme="dark"] .rules-modal__close:hover {
    background: #2a2a2a;
}
[data-theme="dark"] .report-cause {
    border-color: var(--c-border);
}
[data-theme="dark"] .report-cause:hover {
    background: #252525;
    border-color: #555;
}
[data-theme="dark"] .report-cause:has(input:checked) {
    background: #1a2a3a;
    border-color: #4a7aaa;
}
[data-theme="dark"] .report-cause--hard:has(input:checked) {
    background: #3a1414;
    border-color: #7a2a2a;
}

/* ─── Макросы ──────────────────────────────────────────── */
[data-theme="dark"] .bb-macros-picker__btn {
    background: var(--c-bg-alt);
    color: var(--c-text);
    border-color: var(--c-border);
}
[data-theme="dark"] .bb-macros-picker__btn:hover {
    background: #2a2a2a;
}
[data-theme="dark"] .bb-macros-picker__btn.is-open {
    background: #1a2a3a;
    border-color: #4a7aaa;
}
[data-theme="dark"] .bb-macros-picker__panel {
    background: var(--c-bg-alt);
    border-color: var(--c-border);
}
[data-theme="dark"] .bb-macros-picker__item {
    background: #2a2a2a;
}
[data-theme="dark"] .bb-macros-picker__item:hover {
    background: #1a2a3a;
    border-color: #4a7aaa;
}
[data-theme="dark"] .macro-card {
    background: var(--c-bg-alt);
    border-color: var(--c-border);
}
[data-theme="dark"] .macro-card__preview {
    background: #2a2a2a;
}
[data-theme="dark"] .macro-card__code {
    background: #2a2a2a;
    color: var(--c-text);
}
[data-theme="dark"] .macro-card__usage code {
    background: #2a2a2a;
}

/* ─── Бэкапы ───────────────────────────────────────────── */
[data-theme="dark"] .backup-card {
    background: var(--c-bg-alt);
    border-color: var(--c-border);
}
[data-theme="dark"] .backup-card__warn {
    background: #3a2e00;
    border-color: #6a5a2a;
    color: #e8c88a;
}

/* ─── About / страница «О проекте» ────────────────────── */
[data-theme="dark"] .about-block {
    background: var(--c-bg-alt);
    border-color: var(--c-border);
}
[data-theme="dark"] .about-block code {
    background: #2a2a2a;
    border-color: var(--c-border);
    color: var(--c-text);
}

/* ─── Правила ──────────────────────────────────────────── */
[data-theme="dark"] .rules {
    background: var(--c-bg-alt);
    border-color: var(--c-border);
}

/* ─── Ссылки / превью ─────────────────────────────────── */
[data-theme="dark"] .copy-field,
[data-theme="dark"] .copy-area {
    background: var(--c-bg-alt);
    color: var(--c-text);
    border-color: var(--c-border);
}

/* ─── Кнопка переключения темы ─────────────────────────── */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: inherit;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    font-family: inherit;
}
.theme-toggle:hover {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .2);
}
.theme-toggle:focus-visible {
    outline: 2px solid #4a86c2;
    outline-offset: 1px;
}
.theme-toggle__icon {
    display: none;
    line-height: 0;
}
/* В светлой теме показываем луну — «следующая будет тёмная» */
html:not([data-theme="dark"]) .theme-toggle__icon--moon { display: block; }
/* В тёмной — солнце */
html[data-theme="dark"] .theme-toggle__icon--sun { display: block; }

/* ============================================================
   PWA — кнопка «Установить»
   ============================================================ */

.pwa-install-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    background: transparent;
    color: inherit;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 8px;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    line-height: 1.2;
}
.pwa-install-btn:hover {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .4);
}
.pwa-install-btn:focus-visible {
    outline: 2px solid #4a86c2;
    outline-offset: 1px;
}
.pwa-install-btn svg {
    flex: 0 0 auto;
}

/* Внутри тёмной темы — та же логика, шапка-то чёрная */
[data-theme="dark"] .pwa-install-btn {
    color: inherit;
    border-color: rgba(255, 255, 255, .25);
}
[data-theme="dark"] .pwa-install-btn:hover {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .4);
}

/* Мобильный: прячем текст, оставляем только иконку */
@media (max-width: 900px) {
    .pwa-install-btn span {
        display: none;
    }
    .pwa-install-btn {
        padding: 6px 8px;
    }
}