/* ============================================================================
   ProtoSync — ТЕМЫ ОФОРМЛЕНИЯ (палитры переключателя «Тема»)
   ============================================================================
   ЧТО ЭТО
   Здесь живут ПРИНУДИТЕЛЬНЫЕ темы, которые включает переключатель в приложении
   (шестерёнка → «Тема»). Подключается ПОСЛЕ style.css. Режим «Системная» сюда
   не входит — он работает через @media (prefers-color-scheme) в style.css.

   КАК ЭТО УСТРОЕНО (3 слоя)
   1) [SKIN] — общие правила компонентов (карточки, модалки, инпуты, слоты…).
      Они НЕ содержат конкретных цветов: читают переменные --th-* / --tg-theme-*
      активной темы. Менять при добавлении новой темы НЕ нужно.
   2) Палитра темы — блок body[data-theme="ИМЯ"] { ...переменные... }. Только тут
      лежат конкретные цвета, у каждого — комментарий, за что он отвечает.
      Чтобы перекрасить тему — правишь ОДИН этот блок.
   3) Extras темы — пара особых правил, нужных не всем темам (светлая красит
      иконки шапки; тёмная красит тумблер и офлайн-баннер).

   КАК ДОБАВИТЬ СВОЮ ТЕМУ (3 шага)
   1) Скопируй блок-ШАБЛОН ниже (body[data-theme="custom1"] / "custom2") целиком,
      вместе с его extras-правилами.
   2) Замени имя "custom1" на своё уникальное (латиницей, без пробелов, напр.
      "ocean") во ВСЕХ скопированных селекторах и поменяй цвета в палитре.
   3) Зарегистрируй тему в app_themes.js (одна строка в THEME_REGISTRY) — и она
      сама появится в переключателе «Тема».

   ПРАВИЛО ПРОЕКТА: цвета — только здесь, в палитрах. В [SKIN] и в остальном CSS
   хардкод цветов запрещён (см. CLAUDE.md §1).
   ============================================================================ */


/* ============================================================================
   [SKIN] Общая «обшивка» — применяется к ЛЮБОЙ активной теме (body[data-theme]).
   Читает переменные палитры; fallback'и ссылаются на токены --c-* из style.css,
   чтобы при неизвестном значении data-theme вид оставался нейтральным.
   ============================================================================ */

/* --- Поля ввода --- */
body[data-theme] input[type="text"],
body[data-theme] input[type="number"],
body[data-theme] input[type="email"],
body[data-theme] input[type="password"],
body[data-theme] input[type="tel"],
body[data-theme] input[type="date"],
body[data-theme] input[type="time"],
body[data-theme] select,
body[data-theme] textarea {
    background-color: var(--th-surface, var(--c-surface));
    border-color: var(--th-input-border, var(--c-hint));
    color: var(--tg-theme-text-color);
}

body[data-theme] input[type="text"]::placeholder,
body[data-theme] textarea::placeholder {
    color: var(--tg-theme-hint-color);
}

/* --- Карточки меню --- */
body[data-theme] .menu-card {
    background: var(--th-surface, var(--c-surface));
    box-shadow: var(--th-card-shadow, none);
    border: 1px solid var(--th-card-border, transparent);
}

/* --- Карточки графиков ([DS9 W4] surface-1 + border-subtle + тень-1; старые токены — фолбэк) --- */
body[data-theme] .event-card {
    background: var(--th-surface-1, var(--th-surface, var(--c-surface-1)));
    box-shadow: var(--th-shadow-1, var(--th-event-shadow, var(--shadow-1)));
    border: 1px solid var(--th-border-subtle, var(--th-event-border, var(--c-border-subtle)));
}
body[data-theme] .event-card:active {
    background: var(--th-surface-2, var(--th-surface, var(--c-surface-2)));
}

/* --- Статичная шапка страницы графика (скруглённая карточка: рамка по всему периметру,
   поэтому border-color, а не border-bottom-color — иначе покрасился бы только низ) --- */
body[data-theme] .schedule-header {
    background: var(--th-header-bg, var(--c-bg));
    border-color: var(--th-header-border, var(--c-hint));
    box-shadow: var(--th-header-shadow, none);
}

/* --- Контейнер слота ([DS9 W2] нейтральная surface-1; старый --th-surface — фолбэк) --- */
body[data-theme] .slot-container {
    background: var(--th-surface-1, var(--th-surface, var(--c-surface)));
    border: var(--th-slot-border, none);
    box-shadow: var(--th-slot-shadow, none);
}

/* --- Тинт слота по состоянию (новый дизайн полосы) — перекрывает --th-surface выше.
   Конкретные цвета — в палитрах ниже (--th-slot-free-bg / --th-slot-busy-bg). --- */
body[data-theme] .slot-container.slot-free {
    background: var(--th-slot-free-bg, var(--c-slot-free-bg));
}
body[data-theme] .slot-container.slot-partial {
    background: var(--th-slot-partial-bg, var(--c-slot-partial-bg));
}
body[data-theme] .slot-container.slot-other {
    background: var(--th-slot-full-bg, var(--c-slot-full-bg));
}
body[data-theme] .slot-container.slot-busy {
    background: var(--th-slot-busy-bg, var(--c-slot-busy-bg));
}

/* --- Модальные окна ([DS9 W3] surface-3 + shadow-3; [DS9 W5] легаси-фолбэк --th-modal-shadow удалён) --- */
body[data-theme] .modal-content,
body[data-theme] .modal-body {
    background: var(--th-surface-3, var(--th-surface, var(--c-surface-3)));
    box-shadow: var(--th-shadow-3, var(--shadow-3));
}

/* [DS9 W3] Полноэкранные модалки-страницы — фон страницы, не поверхность диалога */
body[data-theme] .modal-content.contacts-modal-fullscreen {
    background: var(--tg-theme-bg-color, var(--c-bg));
    box-shadow: none;
}

/* --- Выпадающие меню ([DS9 W3] surface-3 + border-subtle + shadow-2;
   [DS9 W5] легаси-фолбэки --th-menu-border/--th-dropdown-shadow удалены) --- */
body[data-theme] .dropdown-menu,
body[data-theme] .user-menu-dropdown,
body[data-theme] .field-type-menu {
    background: var(--th-surface-3, var(--th-surface, var(--c-surface-3)));
    border-color: var(--th-border-subtle, var(--c-border-subtle));
    box-shadow: var(--th-shadow-2, var(--shadow-2));
}

/* --- Пункты выпадающих меню --- */
body[data-theme] .dropdown-item,
body[data-theme] .user-menu-item {
    color: var(--tg-theme-text-color);
}

body[data-theme] .dropdown-item:hover,
body[data-theme] .user-menu-item:hover {
    background: var(--th-hover, transparent);
}

/* --- Разделители модалок/настроек --- */
body[data-theme] .modal-separator,
body[data-theme] .settings-separator {
    border-color: var(--th-divider, var(--c-hint));
    background: var(--th-divider-fill, transparent);
}

/* --- Тонкий разделитель в меню пользователя --- */
body[data-theme] .user-menu-divider {
    background: var(--th-divider-userline, rgba(120, 120, 128, 0.2));
}

/* --- Имя бренда в шапке home ([DS9 W4] цвет текста — синий несёт логотип; --th-brand не читается) --- */
body[data-theme] .home-brand-name {
    color: var(--tg-theme-text-color);
}

/* --- Вторичные кнопки --- */
body[data-theme] .btn-secondary,
body[data-theme] .btn-other,
body[data-theme] .secondary-btn {
    background: var(--th-btn2-bg, var(--c-surface));
    color: var(--tg-theme-text-color);
    border-color: var(--th-btn2-border, var(--c-hint));
}

/* --- Горизонтальные линии --- */
body[data-theme] hr {
    border-color: var(--th-divider, var(--c-hint));
}

/* --- Блоки страницы «О приложении» ([DS9 W4] = карточка surface-1, как .event-card) --- */
body[data-theme] .about-section,
body[data-theme] .about-logo-block {
    background: var(--th-surface-1, var(--th-surface, var(--c-surface-1)));
    border-color: var(--th-border-subtle, var(--c-border-subtle));
    box-shadow: var(--th-shadow-1, var(--shadow-1));
}


/* ============================================================================
   [THEME: light] «Светлая» — новая палитра DS7
   Фон — чисто-белый (#ffffff); поверхности — мягкий серо-голубой (#f2f3f5);
   акцент — профессиональный синий (#2b7de9).
   ============================================================================ */
body[data-theme="light"] {
    color-scheme: light;

    /* --- Основные цвета --- */
    --tg-theme-bg-color:         #fcfcfc;  /* Фон страницы */
    --tg-theme-secondary-bg-color: #f0f2f4;  /* Второй фон: полосы дат, календарь, вкладки */
    --tg-theme-text-color:       #2d3239;  /* Основной текст */
    --tg-theme-hint-color:       #676e77;  /* Серый текст: подписи, плейсхолдеры, неактивное */
    --tg-theme-button-color:     #476685;  /* Общий акцент — основа кнопок и активных элементов */
    --tg-theme-button-text-color: #ffffff;  /* Текст и иконки поверх акцентной заливки */
    --tg-theme-link-color:       #3b5b7a;  /* Ссылки в тексте */

    /* Пере-резолв токенов --c-* на уровне темы (ВАЖНО — не удалять и не менять здесь
       значения). Токены --c-* объявлены в tokens.css :root как вложенный var(--tg-theme-*),
       поэтому их значение вычисляется на :root и НЕ подхватывает body-override темы.
       Элементы на «чистых» токенах (нижний таб-бар, акценты) иначе игнорировали бы
       выбранную тему. Цвет правится в секции «Основные цвета» выше. В редакторе тем
       эти строки СКРЫТЫ (значение = var(...), правка текстом сломала бы тему). */
    /* --- Служебное — не редактируется --- */
    --c-bg:                      var(--tg-theme-bg-color);  /* Связка с «Фон страницы» — правьте строку выше */
    --c-surface:                 var(--tg-theme-secondary-bg-color);  /* Связка со «Второй фон» — правьте строку выше */
    --c-text:                    var(--tg-theme-text-color);  /* Связка с «Основной текст» — правьте строку выше */
    --c-hint:                    var(--tg-theme-hint-color);  /* Связка с «Серый текст» — правьте строку выше */
    --c-accent:                  var(--tg-theme-button-color);  /* Связка с «Общий акцент» — правьте строку выше */
    --c-on-accent:               var(--tg-theme-button-text-color);  /* Связка с «Текст поверх акцента» — правьте строку выше */
    --c-link:                    var(--tg-theme-link-color);  /* Связка со «Ссылки в тексте» — правьте строку выше */

    /* --- Кнопки --- */
    --th-cta-create:             #3b5b7a;  /* Кнопка «Создать график» на главной */
    --th-btn-bg:                 #476685;  /* Заливка главных кнопок: Сохранить, Записаться, ОК */
    --th-btn2-bg:                #e6e8eb;  /* Заливка второстепенных кнопок: Отмена, Закрыть */
    --th-btn2-border:            #7c8694;  /* Рамка второстепенных кнопок */
    --th-fab:                    #476685;  /* Кнопка «+» в углу экрана и кнопки-действия в уведомлениях */
    --th-focus:                  #476685;  /* Обводка поля или кнопки в фокусе (при вводе) */

    /* --- Акценты интерфейса --- */
    --th-link-accent:            #476685;  /* Текстовые действия: «назад», «ещё», иконки в шапке */
    --th-accent:                 #476685;  /* Акцентная полоса статуса вью и панели подписки */
    --th-chip:                   #476685;  /* Чипы и точки: шаги мастера, звёзды оценки, разделитель записей */
    --th-tab-active:             #294c6e;  /* Активная вкладка нижней панели */
    --th-menu-active:            #294c6e;  /* Выбранный пункт меню и списка настроек */
    --th-hover:                  rgba(45,50,57,.05);  /* Подсветка пункта под курсором или нажатием */
    --th-brand:                  #5c7c9c;  /* Кружки рокировки участников и пункты выбора типа ссылки */
    --th-unread:                 #476685;  /* Точка непрочитанного в уведомлениях и чатах */
    --th-card-del:               #d6d9de;  /* Крестик «×» удаления карточки в уведомлениях (слабый контраст к фону карточки) */
    --th-avatar-bg:              #476685;  /* Фон аватара участника, когда нет фото */
    --th-grid-selected:          #476685;  /* Выбранная ячейка времени и день с записями в календаре */
    --th-toggle-on:              #476685;  /* Переключатель во включённом состоянии */
    --th-slider:                 #dfe2e6;  /* Переключатель в выключенном состоянии и дорожка ползунка */
    --th-accent-glow:            rgba(71,102,133,.15);  /* Ореол вокруг активного поля и подсвеченных пунктов */
    --th-danger-glow:            rgba(217,83,79,.15);  /* Ореол ошибки и кнопок удаления */
    --th-success:                #408057;  /* Отметка успеха: запись сохранена в календарь */
    --th-icon-public:             #3f6fa8;  /* Значок карточки графика: глобус «Публичный» */
    --th-icon-private:            #93805f;  /* Значок карточки графика: замок «Приватный» */
    --th-icon-mine:               #b98b00;  /* Значок карточки графика: корона «Мой график» */
    --th-icon-rating:             #3f6fa8;  /* Значок карточки графика: контур звезды рейтинга */

    /* --- Поверхности --- */
    --th-surface:                #f0f2f4;  /* Поверхность блоков: карточки, чипы, скелетон загрузки */
    --th-surface-1:              #ffffff;  /* Слой 1 — карточки, слоты, строки списков */
    --th-surface-2:              #eef0f2;  /* Слой 2 — вкладки, панели, вложенные блоки */
    --th-surface-3:              #ffffff;  /* Слой 3 — модальные окна и выпадающие меню */
    --th-header-bg:              #ffffff;  /* Фон шапки графика */
    --th-banner-bg:              #f0f2f4;  /* Фон плашки «нет соединения» */

    /* --- Рамки и разделители --- */
    --th-input-border:           #808a97;  /* Рамка полей ввода */
    --th-card-border:            rgba(45,50,57,.08);  /* Рамка карточек меню */
    --th-event-border:           rgba(45,50,57,.06);  /* Рамка карточек графиков */
    --th-slot-border:            1px solid rgba(45,50,57,.08);  /* Рамка слота — целиком: толщина, тип, цвет */
    --th-header-border:          #d5d8dc;  /* Линия под шапкой графика */
    --th-border-subtle:          rgba(45,50,57,.08);  /* Тонкие рамки карточек и блоков */
    --th-border-strong:          rgba(45,50,57,.15);  /* Контур строк в списке уведомлений */
    --th-divider:                #dde0e4;  /* Разделительные линии между строками */
    --th-divider-fill:           rgba(45,50,57,.06);  /* Заливка разделителей в модальных окнах */
    --th-divider-userline:       rgba(45,50,57,.06);  /* Линия в меню пользователя */
    --th-banner-border:          #ced2d7;  /* Линия под плашкой «нет соединения» */

    /* --- Слоты и панель графика --- */
    --th-slot-free-bg:           #ffffff;  /* Фон слота: есть свободные места */
    --th-slot-partial-bg:        #ffffff;  /* Фон слота: заполняется */
    --th-slot-full-bg:           #ffffff;  /* Фон слота: мест нет */
    --th-slot-busy-bg:           #ffffff;  /* Фон слота: я записан */
    --th-slot-acc-free:          #476685;  /* Полоска слева у слота: есть места */
    --th-slot-acc-partial:       #488f61;  /* Полоска слева у слота: заполняется, «идёт сейчас» */
    --th-slot-acc-busy:          #d5413d;  /* Полоска слева у слота: я записан */
    --th-slot-acc-full:          #8b939e;  /* Полоска слева у слота: мест нет */
    --th-frozen:                 #079bde;  /* Полоска слева у слота: место освободилось во время заморозки */
    --th-expired-text:           #707378;  /* Текст прошедшего слота и прошедшей записи */
    --th-slot-btn-free-bg:       transparent;  /* Кнопка «Записаться»: заливка */
    --th-slot-btn-free-border:   rgba(45,50,57,.52);  /* Кнопка «Записаться»: рамка */
    --th-slot-btn-busy-bg:       transparent;  /* Кнопка «Отменить»: заливка */
    --th-slot-btn-busy-border:   #d5413d;  /* Кнопка «Отменить»: рамка */
    --th-slot-fill-track:        rgba(45,50,57,.10);  /* Счётчик мест: незаполненная часть дорожки */
    --th-todaybar-from:          #eef0f2;  /* Панель над расписанием: левый край */
    --th-todaybar-to:            #eef0f2;  /* Панель над расписанием: правый край */
    --th-booknear-bg:            #476685;  /* Кнопка «Быстрая запись» на панели: заливка */
    --th-booknear-border:        transparent;  /* Кнопка «Быстрая запись»: рамка */
    --th-booknear-icon:          #ffffff;  /* Кнопка «Быстрая запись»: текст и иконка */

    /* --- Чат --- */
    --th-chat-accent:            #476685;  /* Свой пузырь сообщения, имя автора, кнопка отправки */
    --th-chat-check-read:        #85c5a9;  /* Галочки «прочитано» */
    --th-chat-status-waiting:    #916326;  /* Статус собеседника «ожидание» */
    --th-chat-status-active:     #3d7952;  /* Статус собеседника «активен» */
    --th-chat-status-closed:     #626a72;  /* Статус собеседника «закрыт» */
    --th-chat-pill-waiting-bg:   #ffefd9;  /* Плашка статуса «ожидание»: фон */
    --th-chat-pill-active-bg:    #e1f7e6;  /* Плашка статуса «активен»: фон */
    --th-chat-pill-closed-bg:    #ebebec;  /* Плашка статуса «закрыт»: фон */

    /* --- Предупреждения --- */
    --th-warn-soft-bg:           #fcf2d9;  /* Мягкое предупреждение: фон заметки */
    --th-warning:                #ae6500;  /* Предупреждение: зона админа, «на рассмотрении», близкий лимит */
    --th-warn-soft-text:         #866c24;  /* Мягкое предупреждение: текст */

    /* --- Тени и затемнение --- */
    --th-card-shadow:            0 2px 10px rgba(45,50,57,.06), 0 1px 3px rgba(45,50,57,.04);  /* Тень карточек меню */
    --th-event-shadow:           0 2px 6px rgba(45,50,57,.05);  /* Тень карточек графиков */
    --th-header-shadow:          0 2px 8px rgba(45,50,57,.04);  /* Тень шапки графика */
    --th-slot-shadow:            0 1px 4px rgba(45,50,57,.06);  /* Тень слота */
    --th-shadow-1:               0 1px 2px rgba(45,50,57,.05);  /* Тень 1 — карточки и строки списков */
    --th-shadow-2:               0 6px 16px rgba(45,50,57,.10);  /* Тень 2 — выпадающие меню */
    --th-shadow-3:               0 12px 32px rgba(45,50,57,.15);  /* Тень 3 — модальные окна */
    --th-overlay:                rgba(28,31,36,.55);  /* Затемнение фона под модальным окном */

    /* ===== Заливка самой страницы (из палитры — не хардкодить) ===== */
    background-color: var(--tg-theme-bg-color);
    color: var(--tg-theme-text-color);
}

/* --- [light] Фон рабочего стола вокруг «телефона» (широкий экран).
   Правило на html, а не на body: фон рисует корневой элемент, и переменную,
   объявленную в палитре на body, он прочитать не может. Атрибут data-theme
   ставится и на documentElement (applyTheme / boot в app_globals.js, app_boot.js).
   Раньше градиент был литералом в style.css и переключался по ОС, а не по теме. --- */
@media (min-width: 600px) {
    html[data-theme="light"] { background: linear-gradient(150deg, #1b2f60 0%, #1d4f9c 50%, #1361b6 100%); }
}

/* --- [light] Extras: офлайн-баннер, иконки шапки ---
   Тумблер (.slider) правила здесь НЕ имеет: его выкл. цвет берётся из --th-slider
   палитры самим style.css. Правило body[data-theme] .slider равно по специфичности
   input:checked+.slider и (themes.css грузится позже) гасило синий ВКЛ. */
body[data-theme="light"] #offline-banner {
    background: var(--th-banner-bg);
    color: var(--tg-theme-hint-color);
    border-bottom-color: var(--th-banner-border);
}
/* [DS9 W4] Иконки шапки — тихий hint (--th-header-icon палитрами больше не читается) */
/* [2026-08-07] Из селекторов убран #bell-btn — колокольчик шапки удалён, правила были мёртвыми. */
body[data-theme="light"] .settings-btn {
    color: var(--tg-theme-hint-color);
}
/* Ёлочка сворачивания (gcb) — тёмная на светлом фоне */
body[data-theme="light"] .gcb-btn {
    color: var(--tg-theme-text-color, #0d1117);
}
/* Шевроны (▾) на светлых поверхностях (полоса даты дня, слот) — тёмные; перекрывают белый из
   @media(prefers-color-scheme:dark) .chevron-btn при системной тёмной ОС + выбранной теме «Светлая».
   Маркеры на цветной заливке (today/admin-only) остаются белыми. */
body[data-theme="light"] .chevron-btn {
    color: var(--tg-theme-text-color) !important;
}
body[data-theme="light"] .date-header.today-marker .chevron-btn,
body[data-theme="light"] .date-header.admin-only-marker .chevron-btn {
    color: #fff !important;
}


/* ============================================================================
   [THEME: dark] «Тёмная» — новая палитра DS7
   Фон — глубокий нейтральный (#17191c); поверхности — тёмно-серые (#23262b);
   акцент — мягкий синий (#4d9fff).
   ============================================================================ */
body[data-theme="dark"] {
    color-scheme: dark;

    /* --- Основные цвета --- */
    --tg-theme-bg-color:         #121417;  /* Фон страницы */
    --tg-theme-secondary-bg-color: #1c1f24;  /* Второй фон: полосы дат, календарь, вкладки */
    --tg-theme-text-color:       #e0e2e6;  /* Основной текст */
    --tg-theme-hint-color:       #8e9299;  /* Серый текст: подписи, плейсхолдеры, неактивное */
    --tg-theme-button-color:     #3a6b94;  /* Общий акцент — основа кнопок и активных элементов */
    --tg-theme-button-text-color: #ffffff;  /* Текст и иконки поверх акцентной заливки */
    --tg-theme-link-color:       #4a83b2;  /* Ссылки в тексте */

    /* Пере-резолв токенов --c-* на уровне темы (ВАЖНО — не удалять и не менять здесь
       значения). Токены --c-* объявлены в tokens.css :root как вложенный var(--tg-theme-*),
       поэтому их значение вычисляется на :root и НЕ подхватывает body-override темы.
       Элементы на «чистых» токенах (нижний таб-бар, акценты) иначе игнорировали бы
       выбранную тему. Цвет правится в секции «Основные цвета» выше. В редакторе тем
       эти строки СКРЫТЫ (значение = var(...), правка текстом сломала бы тему). */
    /* --- Служебное — не редактируется --- */
    --c-bg:                      var(--tg-theme-bg-color);  /* Связка с «Фон страницы» — правьте строку выше */
    --c-surface:                 var(--tg-theme-secondary-bg-color);  /* Связка со «Второй фон» — правьте строку выше */
    --c-text:                    var(--tg-theme-text-color);  /* Связка с «Основной текст» — правьте строку выше */
    --c-hint:                    var(--tg-theme-hint-color);  /* Связка с «Серый текст» — правьте строку выше */
    --c-accent:                  var(--tg-theme-button-color);  /* Связка с «Общий акцент» — правьте строку выше */
    --c-on-accent:               var(--tg-theme-button-text-color);  /* Связка с «Текст поверх акцента» — правьте строку выше */
    --c-link:                    var(--tg-theme-link-color);  /* Связка со «Ссылки в тексте» — правьте строку выше */

    /* --- Кнопки --- */
    --th-cta-create:             #325d82;  /* Кнопка «Создать график» на главной */
    --th-btn-bg:                 #3a6b94;  /* Заливка главных кнопок: Сохранить, Записаться, ОК */
    --th-btn2-bg:                #24282e;  /* Заливка второстепенных кнопок: Отмена, Закрыть */
    --th-btn2-border:            #677180;  /* Рамка второстепенных кнопок */
    --th-fab:                    #3a6b94;  /* Кнопка «+» в углу экрана и кнопки-действия в уведомлениях */
    --th-focus:                  #4a83b2;  /* Обводка поля или кнопки в фокусе (при вводе) */

    /* --- Акценты интерфейса --- */
    --th-link-accent:            #5088b6;  /* Текстовые действия: «назад», «ещё», иконки в шапке */
    --th-accent:                 #5a91be;  /* Акцентная полоса статуса вью и панели подписки */
    --th-chip:                   #3a6b94;  /* Чипы и точки: шаги мастера, звёзды оценки, разделитель записей */
    --th-tab-active:             #568cb9;  /* Активная вкладка нижней панели */
    --th-menu-active:            #3a6b94;  /* Выбранный пункт меню и списка настроек */
    --th-hover:                  rgba(255,255,255,.05);  /* Подсветка пункта под курсором или нажатием */
    --th-brand:                  #5a8bb7;  /* Кружки рокировки участников и пункты выбора типа ссылки */
    --th-unread:                 #3a6b94;  /* Точка непрочитанного в уведомлениях и чатах */
    --th-card-del:               #2d3239;  /* Крестик «×» удаления карточки в уведомлениях (слабый контраст к фону карточки) */
    --th-avatar-bg:              #3a6b94;  /* Фон аватара участника, когда нет фото */
    --th-grid-selected:          #3b6d97;  /* Выбранная ячейка времени и день с записями в календаре */
    --th-toggle-on:              #3a6b94;  /* Переключатель во включённом состоянии */
    --th-slider:                 #24282e;  /* Переключатель в выключенном состоянии и дорожка ползунка */
    --th-accent-glow:            rgba(58,107,148,.20);  /* Ореол вокруг активного поля и подсвеченных пунктов */
    --th-danger-glow:            rgba(196,91,91,.20);  /* Ореол ошибки и кнопок удаления */
    --th-success:                #359c60;  /* Отметка успеха: запись сохранена в календарь */
    --th-icon-public:             #6a9fd8;  /* Значок карточки графика: глобус «Публичный» */
    --th-icon-private:            #ab9877;  /* Значок карточки графика: замок «Приватный» */
    --th-icon-mine:               #f0c33c;  /* Значок карточки графика: корона «Мой график» */
    --th-icon-rating:             #6a9fd8;  /* Значок карточки графика: контур звезды рейтинга */

    /* --- Поверхности --- */
    --th-surface:                #1c1f24;  /* Поверхность блоков: карточки, чипы, скелетон загрузки */
    --th-surface-1:              #171a1d;  /* Слой 1 — карточки, слоты, строки списков */
    --th-surface-2:              #20242a;  /* Слой 2 — вкладки, панели, вложенные блоки */
    --th-surface-3:              #262a31;  /* Слой 3 — модальные окна и выпадающие меню */
    --th-header-bg:              #171a1d;  /* Фон шапки графика */
    --th-banner-bg:              #24282e;  /* Фон плашки «нет соединения» */

    /* --- Рамки и разделители --- */
    --th-input-border:           #606a78;  /* Рамка полей ввода */
    --th-card-border:            rgba(255,255,255,.05);  /* Рамка карточек меню */
    --th-event-border:           rgba(255,255,255,.05);  /* Рамка карточек графиков */
    --th-slot-border:            1px solid rgba(255,255,255,.04);  /* Рамка слота — целиком: толщина, тип, цвет */
    --th-header-border:          #20242a;  /* Линия под шапкой графика */
    --th-border-subtle:          rgba(255,255,255,.04);  /* Тонкие рамки карточек и блоков */
    --th-border-strong:          rgba(255,255,255,.10);  /* Контур строк в списке уведомлений */
    --th-divider:                #20242a;  /* Разделительные линии между строками */
    --th-divider-fill:           transparent;  /* Заливка разделителей в модальных окнах */
    --th-divider-userline:       rgba(255,255,255,.05);  /* Линия в меню пользователя */
    --th-banner-border:          #30353c;  /* Линия под плашкой «нет соединения» */

    /* --- Слоты и панель графика --- */
    --th-slot-free-bg:           #171a1d;  /* Фон слота: есть свободные места */
    --th-slot-partial-bg:        #171a1d;  /* Фон слота: заполняется */
    --th-slot-full-bg:           #171a1d;  /* Фон слота: мест нет */
    --th-slot-busy-bg:           #171a1d;  /* Фон слота: я записан */
    --th-slot-acc-free:          #3a6b94;  /* Полоска слева у слота: есть места */
    --th-slot-acc-partial:       #359c60;  /* Полоска слева у слота: заполняется, «идёт сейчас» */
    --th-slot-acc-busy:          #c86666;  /* Полоска слева у слота: я записан */
    --th-slot-acc-full:          #868a91;  /* Полоска слева у слота: мест нет */
    --th-frozen:                 #5ac8fa;  /* Полоска слева у слота: место освободилось во время заморозки */
    --th-expired-text:           #818387;  /* Текст прошедшего слота и прошедшей записи */
    --th-slot-btn-free-bg:       transparent;  /* Кнопка «Записаться»: заливка */
    --th-slot-btn-free-border:   rgba(255,255,255,.33);  /* Кнопка «Записаться»: рамка */
    --th-slot-btn-busy-bg:       transparent;  /* Кнопка «Отменить»: заливка */
    --th-slot-btn-busy-border:   #c86666;  /* Кнопка «Отменить»: рамка */
    --th-slot-fill-track:        rgba(255,255,255,.10);  /* Счётчик мест: незаполненная часть дорожки */
    --th-todaybar-from:          #20242a;  /* Панель над расписанием: левый край */
    --th-todaybar-to:            #20242a;  /* Панель над расписанием: правый край */
    --th-booknear-bg:            #3a6b94;  /* Кнопка «Быстрая запись» на панели: заливка */
    --th-booknear-border:        transparent;  /* Кнопка «Быстрая запись»: рамка */
    --th-booknear-icon:          #ffffff;  /* Кнопка «Быстрая запись»: текст и иконка */

    /* --- Чат --- */
    --th-chat-accent:            #3a6b94;  /* Свой пузырь сообщения, имя автора, кнопка отправки */
    --th-chat-check-read:        #95c8b0;  /* Галочки «прочитано» */
    --th-chat-status-waiting:    #c29665;  /* Статус собеседника «ожидание» */
    --th-chat-status-active:     #39a968;  /* Статус собеседника «активен» */
    --th-chat-status-closed:     #94979e;  /* Статус собеседника «закрыт» */
    --th-chat-pill-waiting-bg:   #3a2c19;  /* Плашка статуса «ожидание»: фон */
    --th-chat-pill-active-bg:    #1b3426;  /* Плашка статуса «активен»: фон */
    --th-chat-pill-closed-bg:    #2c2f32;  /* Плашка статуса «закрыт»: фон */

    /* --- Предупреждения --- */
    --th-warn-soft-bg:           rgba(194,150,101,.10);  /* Мягкое предупреждение: фон заметки */
    --th-warning:                #ff9500;  /* Предупреждение: зона админа, «на рассмотрении», близкий лимит */
    --th-warn-soft-text:         #c29665;  /* Мягкое предупреждение: текст */

    /* --- Тени и затемнение --- */
    --th-card-shadow:            none;  /* Тень карточек меню */
    --th-event-shadow:           none;  /* Тень карточек графиков */
    --th-header-shadow:          0 2px 10px rgba(0,0,0,.5);  /* Тень шапки графика */
    --th-slot-shadow:            none;  /* Тень слота */
    --th-shadow-1:               none;  /* Тень 1 — карточки и строки списков */
    --th-shadow-2:               0 8px 24px rgba(0,0,0,.5);  /* Тень 2 — выпадающие меню */
    --th-shadow-3:               0 16px 48px rgba(0,0,0,.6);  /* Тень 3 — модальные окна */
    --th-overlay:                rgba(0,0,0,.75);  /* Затемнение фона под модальным окном */

    /* ===== Заливка самой страницы (из палитры — не хардкодить) ===== */
    background-color: var(--tg-theme-bg-color);
    color: var(--tg-theme-text-color);
}

/* --- [dark] Фон рабочего стола вокруг «телефона» (широкий экран).
   Правило на html, а не на body: фон рисует корневой элемент, и переменную,
   объявленную в палитре на body, он прочитать не может. Атрибут data-theme
   ставится и на documentElement (applyTheme / boot в app_globals.js, app_boot.js).
   Раньше градиент был литералом в style.css и переключался по ОС, а не по теме. --- */
@media (min-width: 600px) {
    html[data-theme="dark"] { background: linear-gradient(150deg, #0d0d0f 0%, #111216 50%, #0e1119 100%); }
}

/* --- [dark] Extras: иконки шапки, тумблер и офлайн-баннер --- */
/* [DS9 W4] Иконки шапки — тихий hint (--th-header-icon палитрами больше не читается) */
/* [2026-08-07] Из селекторов убран #bell-btn — колокольчик шапки удалён, правила были мёртвыми. */
body[data-theme="dark"] .settings-btn {
    color: var(--tg-theme-hint-color);
}
/* Тумблер (.slider): выкл. цвет — из --th-slider палитры через style.css, своего правила
   здесь НЕТ (оно гасило синий ВКЛ — см. комментарий в блоке light). */
body[data-theme="dark"] #offline-banner {
    background: var(--th-banner-bg);
    color: var(--tg-theme-text-color);
    border-bottom-color: var(--th-banner-border);
}


/* ============================================================================
   [THEME: custom1] «Классическая светлая»  (прежняя палитра до редизайна DS7)
   ----------------------------------------------------------------------------
   Бэкап исходной светлой темы. Пользователи, предпочитающие старый вид,
   могут выбрать эту тему вручную. Цвета НЕ менять — это архив.
   ============================================================================ */
body[data-theme="custom1"] {
    color-scheme: light;

    /* --- Основные цвета --- */
    --tg-theme-bg-color:         #ffffff;  /* Фон страницы */
    --tg-theme-secondary-bg-color: #e1e4f5;  /* Второй фон: полосы дат, календарь, вкладки */
    --tg-theme-text-color:       #000000;  /* Основной текст */
    --tg-theme-hint-color:       #7a8699;  /* Серый текст: подписи, плейсхолдеры, неактивное */
    --tg-theme-button-color:     #3390ec;  /* Общий акцент — основа кнопок и активных элементов */
    --tg-theme-button-text-color: #ffffff;  /* Текст и иконки поверх акцентной заливки */
    --tg-theme-link-color:       #1a6ede;  /* Ссылки в тексте */

    /* Пере-резолв токенов --c-* на уровне темы (ВАЖНО — не удалять и не менять здесь
       значения). Токены --c-* объявлены в tokens.css :root как вложенный var(--tg-theme-*),
       поэтому их значение вычисляется на :root и НЕ подхватывает body-override темы.
       Элементы на «чистых» токенах (нижний таб-бар, акценты) иначе игнорировали бы
       выбранную тему. Цвет правится в секции «Основные цвета» выше. В редакторе тем
       эти строки СКРЫТЫ (значение = var(...), правка текстом сломала бы тему). */
    /* --- Служебное — не редактируется --- */
    --c-bg:                      var(--tg-theme-bg-color);  /* Связка с «Фон страницы» — правьте строку выше */
    --c-surface:                 var(--tg-theme-secondary-bg-color);  /* Связка со «Второй фон» — правьте строку выше */
    --c-text:                    var(--tg-theme-text-color);  /* Связка с «Основной текст» — правьте строку выше */
    --c-hint:                    var(--tg-theme-hint-color);  /* Связка с «Серый текст» — правьте строку выше */
    --c-accent:                  var(--tg-theme-button-color);  /* Связка с «Общий акцент» — правьте строку выше */
    --c-on-accent:               var(--tg-theme-button-text-color);  /* Связка с «Текст поверх акцента» — правьте строку выше */
    --c-link:                    var(--tg-theme-link-color);  /* Связка со «Ссылки в тексте» — правьте строку выше */

    /* --- Кнопки --- */
    --th-cta-create:             #3390ec;  /* Кнопка «Создать график» на главной */
    --th-btn-bg:                 #3390ec;  /* Заливка главных кнопок: Сохранить, Записаться, ОК */
    --th-btn2-bg:                #edf0f7;  /* Заливка второстепенных кнопок: Отмена, Закрыть */
    --th-btn2-border:            #b4bdcf;  /* Рамка второстепенных кнопок */
    --th-fab:                    #3390ec;  /* Кнопка «+» в углу экрана и кнопки-действия в уведомлениях */
    --th-focus:                  #3390ec;  /* Обводка поля или кнопки в фокусе (при вводе) */

    /* --- Акценты интерфейса --- */
    --th-link-accent:            #3390ec;  /* Текстовые действия: «назад», «ещё», иконки в шапке */
    --th-accent:                 #3390ec;  /* Акцентная полоса статуса вью и панели подписки */
    --th-chip:                   #3390ec;  /* Чипы и точки: шаги мастера, звёзды оценки, разделитель записей */
    --th-tab-active:             #3390ec;  /* Активная вкладка нижней панели */
    --th-menu-active:            #3390ec;  /* Выбранный пункт меню и списка настроек */
    --th-hover:                  rgba(0,0,0,.04);  /* Подсветка пункта под курсором или нажатием */
    --th-brand:                  #1a6ede;  /* Кружки рокировки участников и пункты выбора типа ссылки */
    --th-unread:                 #3390ec;  /* Точка непрочитанного в уведомлениях и чатах */
    --th-card-del:               #d8dded;  /* Крестик «×» удаления карточки в уведомлениях (слабый контраст к фону карточки) */
    --th-avatar-bg:              #3390ec;  /* Фон аватара участника, когда нет фото */
    --th-grid-selected:          #3390ec;  /* Выбранная ячейка времени и день с записями в календаре */
    --th-toggle-on:              #3390ec;  /* Переключатель во включённом состоянии */
    --th-slider:                 #d3d8e4;  /* Переключатель в выключенном состоянии и дорожка ползунка */
    --th-accent-glow:            rgba(51,144,236,.18);  /* Ореол вокруг активного поля и подсвеченных пунктов */
    --th-danger-glow:            rgba(255,59,48,.20);  /* Ореол ошибки и кнопок удаления */
    --th-success:                #31a24c;  /* Отметка успеха: запись сохранена в календарь */
    --th-icon-public:             #2f80e0;  /* Значок карточки графика: глобус «Публичный» */
    --th-icon-private:            #8d7a58;  /* Значок карточки графика: замок «Приватный» */
    --th-icon-mine:               #e3a900;  /* Значок карточки графика: корона «Мой график» */
    --th-icon-rating:             #2f80e0;  /* Значок карточки графика: контур звезды рейтинга */

    /* --- Поверхности --- */
    --th-surface:                #dfe7f8;  /* Поверхность блоков: карточки, чипы, скелетон загрузки */
    --th-surface-1:              #ffffff;  /* Слой 1 — карточки, слоты, строки списков */
    --th-surface-2:              #e1e4f5;  /* Слой 2 — вкладки, панели, вложенные блоки */
    --th-surface-3:              #ffffff;  /* Слой 3 — модальные окна и выпадающие меню */
    --th-header-bg:              #ffffff;  /* Фон шапки графика */
    --th-banner-bg:              #dfe7f8;  /* Фон плашки «нет соединения» */

    /* --- Рамки и разделители --- */
    --th-input-border:           #b4bdcf;  /* Рамка полей ввода */
    --th-card-border:            rgba(0,0,0,.07);  /* Рамка карточек меню */
    --th-event-border:           rgba(0,0,0,.06);  /* Рамка карточек графиков */
    --th-slot-border:            1px solid rgba(0,0,0,.07);  /* Рамка слота — целиком: толщина, тип, цвет */
    --th-header-border:          #bec7d6;  /* Линия под шапкой графика */
    --th-border-subtle:          rgba(0,0,0,.07);  /* Тонкие рамки карточек и блоков */
    --th-border-strong:          rgba(0,0,0,.15);  /* Контур строк в списке уведомлений */
    --th-divider:                #d0d6e2;  /* Разделительные линии между строками */
    --th-divider-fill:           rgba(0,0,0,.08);  /* Заливка разделителей в модальных окнах */
    --th-divider-userline:       rgba(0,0,0,.08);  /* Линия в меню пользователя */
    --th-banner-border:          #b4bdcf;  /* Линия под плашкой «нет соединения» */

    /* --- Слоты и панель графика --- */
    --th-slot-free-bg:           #88c7e6;  /* Фон слота: есть свободные места */
    --th-slot-partial-bg:        #a9d5be;  /* Фон слота: заполняется */
    --th-slot-full-bg:           #cacaca;  /* Фон слота: мест нет */
    --th-slot-busy-bg:           #edfc7f;  /* Фон слота: я записан */
    --th-slot-acc-free:          #3390ec;  /* Полоска слева у слота: есть места */
    --th-slot-acc-partial:       #18a05e;  /* Полоска слева у слота: заполняется, «идёт сейчас» */
    --th-slot-acc-busy:          #e5484d;  /* Полоска слева у слота: я записан */
    --th-slot-acc-full:          #a5adba;  /* Полоска слева у слота: мест нет */
    --th-frozen:                 #5ac8fa;  /* Полоска слева у слота: место освободилось во время заморозки */
    --th-expired-text:           #666666;  /* Текст прошедшего слота и прошедшей записи */
    --th-slot-btn-free-bg:       #bce1f4;  /* Кнопка «Записаться»: заливка */
    --th-slot-btn-free-border:   rgba(0,0,0,.12);  /* Кнопка «Записаться»: рамка */
    --th-slot-btn-busy-bg:       #f2f9bc;  /* Кнопка «Отменить»: заливка */
    --th-slot-btn-busy-border:   rgba(0,0,0,.12);  /* Кнопка «Отменить»: рамка */
    --th-slot-fill-track:        rgba(0,0,0,.10);  /* Счётчик мест: незаполненная часть дорожки */
    --th-todaybar-from:          #3390ec;  /* Панель над расписанием: левый край */
    --th-todaybar-to:            #1a6ede;  /* Панель над расписанием: правый край */
    --th-booknear-bg:            #9cbae9;  /* Кнопка «Быстрая запись» на панели: заливка */
    --th-booknear-border:        rgba(255,255,255,.25);  /* Кнопка «Быстрая запись»: рамка */
    --th-booknear-icon:          #ffffff;  /* Кнопка «Быстрая запись»: текст и иконка */

    /* --- Чат --- */
    --th-chat-accent:            #3390ec;  /* Свой пузырь сообщения, имя автора, кнопка отправки */
    --th-chat-check-read:        #b4ff00;  /* Галочки «прочитано» */
    --th-chat-status-waiting:    #c87000;  /* Статус собеседника «ожидание» */
    --th-chat-status-active:     #1a8c3c;  /* Статус собеседника «активен» */
    --th-chat-status-closed:     #7a8699;  /* Статус собеседника «закрыт» */
    --th-chat-pill-waiting-bg:   #ffefd9;  /* Плашка статуса «ожидание»: фон */
    --th-chat-pill-active-bg:    #e1f7e6;  /* Плашка статуса «активен»: фон */
    --th-chat-pill-closed-bg:    #ebebec;  /* Плашка статуса «закрыт»: фон */

    /* --- Предупреждения --- */
    --th-warn-soft-bg:           #fff3cd;  /* Мягкое предупреждение: фон заметки */
    --th-warning:                #ff9500;  /* Предупреждение: зона админа, «на рассмотрении», близкий лимит */
    --th-warn-soft-text:         #856404;  /* Мягкое предупреждение: текст */

    /* --- Тени и затемнение --- */
    --th-card-shadow:            0 3px 12px rgba(0,0,0,.10), 0 1px 3px rgba(0,0,0,.06);  /* Тень карточек меню */
    --th-event-shadow:           0 2px 6px rgba(0,0,0,.08);  /* Тень карточек графиков */
    --th-header-shadow:          0 2px 8px rgba(0,0,0,.07);  /* Тень шапки графика */
    --th-slot-shadow:            0 1px 4px rgba(0,0,0,.09);  /* Тень слота */
    --th-shadow-1:               0 1px 2px rgba(16,24,40,.06);  /* Тень 1 — карточки и строки списков */
    --th-shadow-2:               0 6px 20px rgba(16,24,40,.14);  /* Тень 2 — выпадающие меню */
    --th-shadow-3:               0 16px 48px rgba(16,24,40,.22);  /* Тень 3 — модальные окна */
    --th-overlay:                rgba(16,20,28,.50);  /* Затемнение фона под модальным окном */

    /* ===== Заливка самой страницы (из палитры — не хардкодить) ===== */
    background-color: var(--tg-theme-bg-color);
    color: var(--tg-theme-text-color);
}

/* --- [custom1] Фон рабочего стола вокруг «телефона» (широкий экран).
   Правило на html, а не на body: фон рисует корневой элемент, и переменную,
   объявленную в палитре на body, он прочитать не может. Атрибут data-theme
   ставится и на documentElement (applyTheme / boot в app_globals.js, app_boot.js).
   Раньше градиент был литералом в style.css и переключался по ОС, а не по теме. --- */
@media (min-width: 600px) {
    html[data-theme="custom1"] { background: linear-gradient(150deg, #1b2f60 0%, #1d4f9c 50%, #1361b6 100%); }
}

/* --- [custom1] Extras (копия светлой до DS7) ---
   Тумблер (.slider) своего правила не имеет — см. комментарий в блоке light. */
body[data-theme="custom1"] #offline-banner {
    background: var(--th-banner-bg);
    color: var(--tg-theme-hint-color);
    border-bottom-color: var(--th-banner-border);
}
/* [DS9 W4] Иконки шапки — тихий hint (--th-header-icon палитрами больше не читается) */
/* [2026-08-07] Из селекторов убран #bell-btn — колокольчик шапки удалён, правила были мёртвыми. */
body[data-theme="custom1"] .settings-btn {
    color: var(--tg-theme-hint-color);
}
body[data-theme="custom1"] .gcb-btn {
    color: var(--tg-theme-text-color, #0d1117);
}
/* Шевроны на светлых поверхностях — тёмные (как у темы «Светлая»). */
body[data-theme="custom1"] .chevron-btn {
    color: var(--tg-theme-text-color) !important;
}
body[data-theme="custom1"] .date-header.today-marker .chevron-btn,
body[data-theme="custom1"] .date-header.admin-only-marker .chevron-btn {
    color: #fff !important;
}


/* ============================================================================
   [THEME: custom2] «Классическая тёмная»  (прежняя палитра до редизайна DS7)
   ----------------------------------------------------------------------------
   Бэкап исходной тёмной темы. Пользователи, предпочитающие старый вид,
   могут выбрать эту тему вручную. Цвета НЕ менять — это архив.
   ============================================================================ */
body[data-theme="custom2"] {
    color-scheme: dark;

    /* --- Основные цвета --- */
    --tg-theme-bg-color:         #17191c;  /* Фон страницы */
    --tg-theme-secondary-bg-color: #23262b;  /* Второй фон: полосы дат, календарь, вкладки */
    --tg-theme-text-color:       #f1f2f4;  /* Основной текст */
    --tg-theme-hint-color:       #a0a4ad;  /* Серый текст: подписи, плейсхолдеры, неактивное */
    --tg-theme-button-color:     #00a0ff;  /* Общий акцент — основа кнопок и активных элементов */
    --tg-theme-button-text-color: #ffffff;  /* Текст и иконки поверх акцентной заливки */
    --tg-theme-link-color:       #1079f4;  /* Ссылки в тексте */

    /* Пере-резолв токенов --c-* на уровне темы (ВАЖНО — не удалять и не менять здесь
       значения). Токены --c-* объявлены в tokens.css :root как вложенный var(--tg-theme-*),
       поэтому их значение вычисляется на :root и НЕ подхватывает body-override темы.
       Элементы на «чистых» токенах (нижний таб-бар, акценты) иначе игнорировали бы
       выбранную тему. Цвет правится в секции «Основные цвета» выше. В редакторе тем
       эти строки СКРЫТЫ (значение = var(...), правка текстом сломала бы тему). */
    /* --- Служебное — не редактируется --- */
    --c-bg:                      var(--tg-theme-bg-color);  /* Связка с «Фон страницы» — правьте строку выше */
    --c-surface:                 var(--tg-theme-secondary-bg-color);  /* Связка со «Второй фон» — правьте строку выше */
    --c-text:                    var(--tg-theme-text-color);  /* Связка с «Основной текст» — правьте строку выше */
    --c-hint:                    var(--tg-theme-hint-color);  /* Связка с «Серый текст» — правьте строку выше */
    --c-accent:                  var(--tg-theme-button-color);  /* Связка с «Общий акцент» — правьте строку выше */
    --c-on-accent:               var(--tg-theme-button-text-color);  /* Связка с «Текст поверх акцента» — правьте строку выше */
    --c-link:                    var(--tg-theme-link-color);  /* Связка со «Ссылки в тексте» — правьте строку выше */

    /* --- Кнопки --- */
    --th-cta-create:             #0676b8;  /* Кнопка «Создать график» на главной */
    --th-btn-bg:                 #0676b8;  /* Заливка главных кнопок: Сохранить, Записаться, ОК */
    --th-btn2-bg:                #2f333a;  /* Заливка второстепенных кнопок: Отмена, Закрыть */
    --th-btn2-border:            #3a3e44;  /* Рамка второстепенных кнопок */
    --th-fab:                    #00a0ff;  /* Кнопка «+» в углу экрана и кнопки-действия в уведомлениях */
    --th-focus:                  #00a0ff;  /* Обводка поля или кнопки в фокусе (при вводе) */

    /* --- Акценты интерфейса --- */
    --th-link-accent:            #00a0ff;  /* Текстовые действия: «назад», «ещё», иконки в шапке */
    --th-accent:                 #00a0ff;  /* Акцентная полоса статуса вью и панели подписки */
    --th-chip:                   #00a0ff;  /* Чипы и точки: шаги мастера, звёзды оценки, разделитель записей */
    --th-tab-active:             #00a0ff;  /* Активная вкладка нижней панели */
    --th-menu-active:            #00a0ff;  /* Выбранный пункт меню и списка настроек */
    --th-hover:                  rgba(255,255,255,.08);  /* Подсветка пункта под курсором или нажатием */
    --th-brand:                  #75aaea;  /* Кружки рокировки участников и пункты выбора типа ссылки */
    --th-unread:                 #00a0ff;  /* Точка непрочитанного в уведомлениях и чатах */
    --th-card-del:               #343941;  /* Крестик «×» удаления карточки в уведомлениях (слабый контраст к фону карточки) */
    --th-avatar-bg:              #00a0ff;  /* Фон аватара участника, когда нет фото */
    --th-grid-selected:          #00a0ff;  /* Выбранная ячейка времени и день с записями в календаре */
    --th-toggle-on:              #00a0ff;  /* Переключатель во включённом состоянии */
    --th-slider:                 #2f333a;  /* Переключатель в выключенном состоянии и дорожка ползунка */
    --th-accent-glow:            rgba(77,159,255,.28);  /* Ореол вокруг активного поля и подсвеченных пунктов */
    --th-danger-glow:            rgba(255,69,58,.28);  /* Ореол ошибки и кнопок удаления */
    --th-success:                #30d158;  /* Отметка успеха: запись сохранена в календарь */
    --th-icon-public:             #4d9fff;  /* Значок карточки графика: глобус «Публичный» */
    --th-icon-private:            #a6976f;  /* Значок карточки графика: замок «Приватный» */
    --th-icon-mine:               #f5c84a;  /* Значок карточки графика: корона «Мой график» */
    --th-icon-rating:             #4d9fff;  /* Значок карточки графика: контур звезды рейтинга */

    /* --- Поверхности --- */
    --th-surface:                #23262b;  /* Поверхность блоков: карточки, чипы, скелетон загрузки */
    --th-surface-1:              #1f2226;  /* Слой 1 — карточки, слоты, строки списков */
    --th-surface-2:              #262a2f;  /* Слой 2 — вкладки, панели, вложенные блоки */
    --th-surface-3:              #2d3238;  /* Слой 3 — модальные окна и выпадающие меню */
    --th-header-bg:              #1f2226;  /* Фон шапки графика */
    --th-banner-bg:              #2f333a;  /* Фон плашки «нет соединения» */

    /* --- Рамки и разделители --- */
    --th-input-border:           #3a3e44;  /* Рамка полей ввода */
    --th-card-border:            rgba(255,255,255,.08);  /* Рамка карточек меню */
    --th-event-border:           rgba(255,255,255,.07);  /* Рамка карточек графиков */
    --th-slot-border:            1px solid rgba(255,255,255,.07);  /* Рамка слота — целиком: толщина, тип, цвет */
    --th-header-border:          #2b2f35;  /* Линия под шапкой графика */
    --th-border-subtle:          rgba(255,255,255,.07);  /* Тонкие рамки карточек и блоков */
    --th-border-strong:          rgba(255,255,255,.15);  /* Контур строк в списке уведомлений */
    --th-divider:                #2b2f35;  /* Разделительные линии между строками */
    --th-divider-fill:           transparent;  /* Заливка разделителей в модальных окнах */
    --th-divider-userline:       rgba(255,255,255,.1);  /* Линия в меню пользователя */
    --th-banner-border:          #3a3e44;  /* Линия под плашкой «нет соединения» */

    /* --- Слоты и панель графика --- */
    --th-slot-free-bg:           #1f2226;  /* Фон слота: есть свободные места */
    --th-slot-partial-bg:        #1f2226;  /* Фон слота: заполняется */
    --th-slot-full-bg:           #1f2226;  /* Фон слота: мест нет */
    --th-slot-busy-bg:           #1f2226;  /* Фон слота: я записан */
    --th-slot-acc-free:          #4da3ff;  /* Полоска слева у слота: есть места */
    --th-slot-acc-partial:       #3ecf8e;  /* Полоска слева у слота: заполняется, «идёт сейчас» */
    --th-slot-acc-busy:          #ff7a6e;  /* Полоска слева у слота: я записан */
    --th-slot-acc-full:          #caff30;  /* Полоска слева у слота: мест нет */
    --th-frozen:                 #5ac8fa;  /* Полоска слева у слота: место освободилось во время заморозки */
    --th-expired-text:           #9d9fa2;  /* Текст прошедшего слота и прошедшей записи */
    --th-slot-btn-free-bg:       transparent;  /* Кнопка «Записаться»: заливка */
    --th-slot-btn-free-border:   rgba(255,255,255,.15);  /* Кнопка «Записаться»: рамка */
    --th-slot-btn-busy-bg:       transparent;  /* Кнопка «Отменить»: заливка */
    --th-slot-btn-busy-border:   #ff7a6e;  /* Кнопка «Отменить»: рамка */
    --th-slot-fill-track:        rgba(255,255,255,.15);  /* Счётчик мест: незаполненная часть дорожки */
    --th-todaybar-from:          #262a2f;  /* Панель над расписанием: левый край */
    --th-todaybar-to:            #262a2f;  /* Панель над расписанием: правый край */
    --th-booknear-bg:            #00a0ff;  /* Кнопка «Быстрая запись» на панели: заливка */
    --th-booknear-border:        transparent;  /* Кнопка «Быстрая запись»: рамка */
    --th-booknear-icon:          #ffffff;  /* Кнопка «Быстрая запись»: текст и иконка */

    /* --- Чат --- */
    --th-chat-accent:            #00a0ff;  /* Свой пузырь сообщения, имя автора, кнопка отправки */
    --th-chat-check-read:        #9be8c8;  /* Галочки «прочитано» */
    --th-chat-status-waiting:    #ffb357;  /* Статус собеседника «ожидание» */
    --th-chat-status-active:     #3ecf8e;  /* Статус собеседника «активен» */
    --th-chat-status-closed:     #a0a4ad;  /* Статус собеседника «закрыт» */
    --th-chat-pill-waiting-bg:   #413320;  /* Плашка статуса «ожидание»: фон */
    --th-chat-pill-active-bg:    #223b2e;  /* Плашка статуса «активен»: фон */
    --th-chat-pill-closed-bg:    #33353a;  /* Плашка статуса «закрыт»: фон */

    /* --- Предупреждения --- */
    --th-warn-soft-bg:           rgba(255,204,77,.14);  /* Мягкое предупреждение: фон заметки */
    --th-warning:                #ff9500;  /* Предупреждение: зона админа, «на рассмотрении», близкий лимит */
    --th-warn-soft-text:         #ffd27a;  /* Мягкое предупреждение: текст */

    /* --- Тени и затемнение --- */
    --th-card-shadow:            none;  /* Тень карточек меню */
    --th-event-shadow:           none;  /* Тень карточек графиков */
    --th-header-shadow:          0 2px 8px rgba(0,0,0,.4);  /* Тень шапки графика */
    --th-slot-shadow:            none;  /* Тень слота */
    --th-shadow-1:               none;  /* Тень 1 — карточки и строки списков */
    --th-shadow-2:               0 6px 20px rgba(0,0,0,.45);  /* Тень 2 — выпадающие меню */
    --th-shadow-3:               0 16px 48px rgba(0,0,0,.50);  /* Тень 3 — модальные окна */
    --th-overlay:                rgba(0,0,0,.65);  /* Затемнение фона под модальным окном */

    /* ===== Заливка самой страницы (из палитры — не хардкодить) ===== */
    background-color: var(--tg-theme-bg-color);
    color: var(--tg-theme-text-color);
}

/* --- [custom2] Фон рабочего стола вокруг «телефона» (широкий экран).
   Правило на html, а не на body: фон рисует корневой элемент, и переменную,
   объявленную в палитре на body, он прочитать не может. Атрибут data-theme
   ставится и на documentElement (applyTheme / boot в app_globals.js, app_boot.js).
   Раньше градиент был литералом в style.css и переключался по ОС, а не по теме. --- */
@media (min-width: 600px) {
    html[data-theme="custom2"] { background: linear-gradient(150deg, #0d0d0f 0%, #111216 50%, #0e1119 100%); }
}

/* --- [custom2] Extras (копия тёмной) --- */
/* [DS9 W4] Иконки шапки — тихий hint (--th-header-icon палитрами больше не читается) */
/* [2026-08-07] Из селекторов убран #bell-btn — колокольчик шапки удалён, правила были мёртвыми. */
body[data-theme="custom2"] .settings-btn {
    color: var(--tg-theme-hint-color);
}
/* Тумблер (.slider): своего правила нет — см. комментарий в блоке light. */
body[data-theme="custom2"] #offline-banner {
    background: var(--th-banner-bg);
    color: var(--tg-theme-text-color);
    border-bottom-color: var(--th-banner-border);
}