/* ============================================================================
   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] 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);
}

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

/* --- Статичная шапка страницы графика --- */
body[data-theme] .schedule-header {
    background: var(--th-header-bg, var(--c-bg));
    border-bottom-color: var(--th-header-border, var(--c-hint));
    box-shadow: var(--th-header-shadow, none);
}

/* --- Контейнер слота --- */
body[data-theme] .slot-container {
    background: 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));
}

/* --- Модальные окна --- */
body[data-theme] .modal-content,
body[data-theme] .modal-body {
    background: var(--th-surface, var(--c-surface));
    box-shadow: var(--th-modal-shadow, var(--shadow-xl));
}

/* --- Выпадающие меню --- */
body[data-theme] .dropdown-menu,
body[data-theme] .user-menu-dropdown {
    background: var(--th-surface, var(--c-surface));
    border-color: var(--th-menu-border, var(--c-hint));
    box-shadow: var(--th-dropdown-shadow, var(--shadow-lg));
}

/* --- Пункты выпадающих меню --- */
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 --- */
body[data-theme] .home-brand-name {
    color: var(--th-brand, var(--c-brand));
}

/* --- Вторичные кнопки --- */
body[data-theme] .btn-secondary,
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));
}

/* --- Блоки страницы «О приложении» --- */
body[data-theme] .about-section,
body[data-theme] .about-logo-block {
    background: var(--th-surface, var(--c-surface));
}


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

    /* ===== ПАЛИТРА (правь здесь) ===== */
    /* --- База (Telegram-совместимая) --- */
    --tg-theme-bg-color:            #ffffff;  /* фон страницы */
    --tg-theme-secondary-bg-color:  #f2f3f5;  /* вторичный фон */
    --tg-theme-text-color:          #1a1d21;  /* основной текст */
    --tg-theme-hint-color:          #5e6470;  /* подписи, плейсхолдеры */
    --tg-theme-button-color:        #2b7de9;  /* акцент, заливка кнопок */
    --tg-theme-button-text-color:   #ffffff;  /* текст на кнопках */
    --tg-theme-link-color:          #1a6ede;  /* ссылки */
    /* --- Разнесённые синие (каждое семейство — независимо от общего акцента) --- */
    --th-chat-accent:    #2b7de9;  /* чат: мой пузырь, кнопка отправки, имя, панель правки */
    --th-avatar-bg:      #2b7de9;  /* аватары участников + кружки рокировки/ручного отбора */
    --th-grid-selected:  #2b7de9;  /* сетка создания: выбранная ячейка/бейдж смены/дата со слотами */
    --th-todaybar-from:  #2b7de9;  /* синяя полоса графика — левый конец градиента */
    --th-todaybar-to:    #1a6ede;  /* синяя полоса графика — правый конец градиента */
    --th-tab-active:     #2b7de9;  /* активная вкладка: таб-бар/модерация/входящие */
    --th-toggle-on:      #2b7de9;  /* тумблер во включённом состоянии */
    --th-fab:            #2b7de9;  /* кнопки-действия: создать/«+», очистить, выбранный ответ, открыть чаты */
    --th-menu-active:    #2b7de9;  /* активный/ховер пункт меню и пикера настроек */
    --th-link-accent:    #2b7de9;  /* текст-ссылки, стрелки «назад»/«наверх»/«ещё», кнопки-иконки */
    --th-chip:           #2b7de9;  /* чипы, точки мастера, номер шага, разделитель записей */
    --th-unread:         #2b7de9;  /* индикаторы непрочитанного во «Входящих» */
    --th-focus:          #2b7de9;  /* рамка/обводка фокуса полей и чекбоксов */

    /* --- Пере-резолв токенов --c-* на уровне темы (ВАЖНО — не удалять) ---
       Токены --c-* объявлены в style.css :root как вложенный var(--tg-theme-*),
       поэтому их значение вычисляется на :root и НЕ подхватывает body-override темы.
       Элементы на «чистых» токенах (нижний таб-бар, акценты) иначе игнорировали бы
       выбранную тему. Переобъявляем токены здесь, на уровне body — теперь они берут
       палитру именно этой темы. */
    --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);  /* текст на акценте */
    --th-chat-check-read:     #b4ff00;           /* ✓✓ «прочитано» в чате — ядовитый салатовый */
    --th-chat-status-waiting: #c87000;           /* статус «ожидание» в чате (светлая тема) */
    --th-chat-status-active:  #1a8c3c;           /* статус «активен» в чате (светлая тема) */
    /* --- Кнопка «Быстрая запись» (слева на синей полосе графика) --- */
    --th-booknear-bg:     #2b7de9;              /* синяя заливка — белая иконка читается на ней */
    --th-booknear-border: rgba(255,255,255,.25); /* тонкая светлая рамка — лёгкое выделение */
    --th-booknear-icon:   #ffffff;              /* белая подпись + иконка на синем */
    --c-link:        var(--tg-theme-link-color);         /* ссылки */

    /* --- Поверхности и рамки --- */
    --th-surface:        #f2f3f5;          /* поверхность авто-окон входа, скелетон загрузки, чипы */
    --th-input-border:   #d2d5db;          /* рамка полей ввода */
    --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-menu-border:    #dadde2;          /* рамка выпадающих меню */
    --th-header-bg:      #ffffff;          /* фон шапки графика */
    --th-header-border:  #dadde2;          /* линия снизу шапки графика */

    /* --- Акценты интерфейса --- */
    --th-hover:          rgba(0,0,0,.04);  /* фон ховера пунктов меню */
    --th-divider:        #e3e5e9;          /* цвет разделителей/hr */
    --th-divider-fill:   rgba(0,0,0,.08);  /* заливка разделителей модалок */
    --th-divider-userline: rgba(0,0,0,.08);/* линия в меню пользователя */
    --th-brand:          #1a6ede;          /* имя бренда в шапке */
    --th-header-icon:    #1a6ede;          /* иконки шапки: колокол, шестерёнка */
    --th-btn-bg:         #2b7de9;          /* заливка ОСНОВНОЙ кнопки (btn-primary/swap-ok) — отдельно от акцента */
    --th-btn2-bg:        #eceef1;          /* фон вторичной кнопки */
    --th-btn2-border:    #d2d5db;          /* рамка вторичной кнопки */
    --th-slider:         #e5e5ea;          /* тумблер в выкл. состоянии */
    --th-banner-bg:      #f2f3f5;          /* фон офлайн-баннера */
    --th-banner-border:  #d2d5db;          /* линия снизу офлайн-баннера */

    /* --- Тени --- */
    --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-modal-shadow:   0 12px 40px rgba(0,0,0,.18); /* модалка */
    --th-dropdown-shadow:0 6px 20px rgba(0,0,0,.14);  /* выпадающее меню */

    /* --- Полоса слота (DS7): СТАТУС несёт фон слота; кнопка лишь слегка выделяется ---
       free=мягкий синий «есть места»  partial=мягкий зелёный «наполняется»
       full=серый «мест нет»           busy=тёплый красный «я записан — можно отменить» */
    --th-slot-free-bg:        #dbeafe;          /* есть места (пусто) — мягкий синий «есть места» */
    --th-slot-partial-bg:     #d6f0e0;          /* есть участники И есть места — мягкий зелёный «наполняется» */
    --th-slot-full-bg:        #e4e6ea;          /* мест нет = недоступно — серый «мест нет» */
    --th-slot-busy-bg:        #fde2dd;          /* я записан — тёплый красный «можно отменить» */
    --th-slot-other-bg:       #e6e8ee;          /* (legacy) — не используется тинтом */
    --th-slot-btn-free-bg:    #b9d5fb;          /* кнопка «Записаться» — синяя, чуть ТЕМНЕЕ фона слота */
    --th-slot-btn-free-border:rgba(0,0,0,.12);  /* кнопка «Записаться» — контур */
    --th-slot-btn-busy-bg:    #f8cfc8;          /* кнопка «Отменить» — чуть ТЕМНЕЕ фона слота */
    --th-slot-btn-busy-border:rgba(0,0,0,.12);  /* кнопка «Отменить» — контур */
    --th-slot-fill:           rgba(0,0,0,.35);  /* индикатор — затемнение фона слота: виден на любом тинте, не спорит с ним */
    --th-slot-fill-track:     rgba(0,0,0,.10);  /* индикатор заполнения — дорожка (пустая часть) */
    --th-slot-accent:         rgba(0,0,0,.40);  /* левая вертикаль слота — затемнение его же фона (контраст, светлая тема) */
    /* --- Полоса дня (своя карточка для ориентации) --- */
    --th-day-bg:              #e8f9f9;          /* фон карточки дня — мягкий лавандовый (отличается от слотов) */
    --th-day-accent:          #020008;          /* левая вертикаль дня — насыщенный фиолетовый (свой цвет) */
    /* --- Текущая (идущая прямо сейчас) запись --- */
    --th-booking-now-bg:      #e9f7d1;          /* фон карточки идущей записи — мягкий зелёный */
    /* --- FOCUS GLOW (DS7) --- */
    --th-accent-glow: rgba(43,125,233,.18);    /* ореол фокуса инпута — акцент light (#2b7de9) */
    --th-danger-glow: rgba(255,59,48,.20);     /* ореол ошибки инпута — danger light */

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

/* --- [light] Extras: тумблер, офлайн-баннер, иконки шапки --- */
body[data-theme="light"] .slider {
    background-color: var(--th-slider);
}
body[data-theme="light"] #offline-banner {
    background: var(--th-banner-bg);
    color: var(--tg-theme-hint-color);
    border-bottom-color: var(--th-banner-border);
}
body[data-theme="light"] #bell-btn,
body[data-theme="light"] .settings-btn {
    color: var(--th-header-icon);
}
body[data-theme="light"] #bell-btn:hover,
body[data-theme="light"] #bell-btn:active {
    border-color: var(--th-header-icon);
}
/* Ёлочка сворачивания (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;

    /* ===== ПАЛИТРА (правь здесь) ===== */
    /* --- База (Telegram-совместимая) --- */
    --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;  /* ссылки */
    /* --- Разнесённые синие (каждое семейство — независимо от общего акцента) --- */
    --th-chat-accent:    #00a0ff;  /* чат: мой пузырь, кнопка отправки, имя, панель правки */
    --th-avatar-bg:      #00a0ff;  /* аватары участников + кружки рокировки/ручного отбора */
    --th-grid-selected:  #00a0ff;  /* сетка создания: выбранная ячейка/бейдж смены/дата со слотами */
    --th-todaybar-from:  #00a0ff;  /* синяя полоса графика — левый конец градиента */
    --th-todaybar-to:    #1079f4;  /* синяя полоса графика — правый конец градиента */
    --th-tab-active:     #00a0ff;  /* активная вкладка: таб-бар/модерация/входящие */
    --th-toggle-on:      #00a0ff;  /* тумблер во включённом состоянии */
    --th-fab:            #00a0ff;  /* кнопки-действия: создать/«+», очистить, выбранный ответ, открыть чаты */
    --th-menu-active:    #00a0ff;  /* активный/ховер пункт меню и пикера настроек */
    --th-link-accent:    #00a0ff;  /* текст-ссылки, стрелки «назад»/«наверх»/«ещё», кнопки-иконки */
    --th-chip:           #00a0ff;  /* чипы, точки мастера, номер шага, разделитель записей */
    --th-unread:         #00a0ff;  /* индикаторы непрочитанного во «Входящих» */
    --th-focus:          #00a0ff;  /* рамка/обводка фокуса полей и чекбоксов */

    /* --- Пере-резолв токенов --c-* на уровне темы (ВАЖНО — не удалять) ---
       Токены --c-* объявлены в style.css :root как вложенный var(--tg-theme-*),
       поэтому их значение вычисляется на :root и НЕ подхватывает body-override темы.
       Элементы на «чистых» токенах (нижний таб-бар, акценты) иначе игнорировали бы
       выбранную тему. Переобъявляем токены здесь, на уровне body — теперь они берут
       палитру именно этой темы. */
    --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);  /* текст на акценте */
    --th-chat-check-read:     #b4ff00;           /* ✓✓ «прочитано» в чате — ядовитый салатовый */
    --th-chat-status-waiting: #ffb357;           /* статус «ожидание» в чате (тёмная тема) */
    --th-chat-status-active:  #6fd98f;           /* статус «активен» в чате (тёмная тема) */
    /* --- Кнопка «Быстрая запись» (слева на синей полосе графика) --- */
    --th-booknear-bg:     #2456a8;              /* тёмно-синяя заливка — белая иконка читается на ней */
    --th-booknear-border: rgba(255,255,255,.25); /* тонкая светлая рамка — лёгкое выделение */
    --th-booknear-icon:   #ffffff;              /* белая подпись + иконка на тёмно-синем */
    --c-link:        var(--tg-theme-link-color);         /* ссылки */

    /* --- Поверхности и рамки --- */
    --th-surface:        #23262b;               /* поверхность авто-окон входа, скелетон загрузки, чипы */
    --th-input-border:   #3a3e44;               /* рамка полей ввода */
    --th-card-border:    rgba(255,255,255,.08); /* рамка карточек меню */
    --th-event-border:   rgba(255,255,255,.07); /* рамка карточек графиков */
    --th-slot-border:    none;                  /* у слота нет рамки в тёмной */
    --th-menu-border:    #3a3e44;               /* рамка выпадающих меню */
    --th-header-bg:      #1e2125;               /* фон шапки графика */
    --th-header-border:  #2b2f35;               /* линия снизу шапки графика */

    /* --- Акценты интерфейса --- */
    --th-hover:          rgba(255,255,255,.08); /* фон ховера пунктов меню */
    --th-divider:        #2b2f35;               /* цвет разделителей/hr */
    --th-divider-fill:   transparent;           /* у тёмных разделителей нет заливки */
    --th-divider-userline: rgba(255,255,255,.1);/* линия в меню пользователя */
    --th-brand:          var(--c-brand);        /* имя бренда (фирменный голубой) */
    --th-header-icon:    #75aaea;               /* иконки шапки: колокол, шестерёнка */
    --th-btn-bg:         #0676b8;               /* заливка ОСНОВНОЙ кнопки (btn-primary/swap-ok) — отдельно от акцента */
    --th-btn2-bg:        #2f333a;               /* фон вторичной кнопки */
    --th-btn2-border:    #3a3e44;               /* рамка вторичной кнопки */
    --th-slider:         #2f333a;               /* тумблер в выкл. состоянии */
    --th-banner-bg:      #2f333a;               /* фон офлайн-баннера */
    --th-banner-border:  #3a3e44;               /* линия снизу офлайн-баннера */

    /* --- Тени (в тёмной теме поверхности почти без теней) --- */
    --th-card-shadow:    none;                  /* карточка меню */
    --th-event-shadow:   none;                  /* карточка графика */
    --th-header-shadow:  0 2px 8px rgba(0,0,0,.4);  /* шапка графика */
    --th-slot-shadow:    none;                  /* слот */
    --th-modal-shadow:   0 12px 40px rgba(0,0,0,.6);  /* модалка */
    --th-dropdown-shadow:0 6px 20px rgba(0,0,0,.5);   /* выпадающее меню */

    /* --- Полоса слота (DS7): СТАТУС несёт фон слота; кнопка лишь слегка выделяется --- */
    --th-slot-free-bg:        #1e3a5f;          /* есть места (пусто) — тёмно-синий «есть места» */
    --th-slot-partial-bg:     #1f4a38;          /* есть участники И есть места — тёмно-зелёный «наполняется» */
    --th-slot-full-bg:        #3a3e44;          /* мест нет = недоступно — нейтральный серый */
    --th-slot-busy-bg:        #5e2b27;          /* я записан — тёмно-красный «можно отменить» */
    --th-slot-other-bg:       #23262c;          /* (legacy) — не используется тинтом */
    --th-slot-btn-free-bg:    #2c537f;          /* кнопка «Записаться» — синяя, чуть СВЕТЛЕЕ фона слота */
    --th-slot-btn-free-border:rgba(255,255,255,.16); /* кнопка «Записаться» — контур */
    --th-slot-btn-busy-bg:    #7a3a34;          /* кнопка «Отменить» — красная, чуть СВЕТЛЕЕ фона слота */
    --th-slot-btn-busy-border:rgba(255,255,255,.16); /* кнопка «Отменить» — контур */
    --th-slot-fill:           rgba(255,255,255,.55); /* индикатор — осветление фона слота: виден на любом тинте, не спорит с ним */
    --th-slot-fill-track:     rgba(255,255,255,.15); /* индикатор заполнения — дорожка (пустая часть) */
    --th-slot-accent:         rgba(255,255,255,.42); /* левая вертикаль слота — осветление его же фона (контраст, тёмная тема) */
    /* --- Полоса дня (своя карточка для ориентации) --- */
    --th-day-bg:              #2b2740;          /* фон карточки дня — тёмный индиго (ориентир) */
    --th-day-accent:          #9b8fe0;          /* левая вертикаль дня — светлый фиолетовый */
    /* --- Текущая (идущая прямо сейчас) запись --- */
    --th-booking-now-bg:      #1e3a2e;          /* фон карточки идущей записи — тёмно-зелёный */
    /* --- FOCUS GLOW (DS7) --- */
    --th-accent-glow: rgba(77,159,255,.28);    /* ореол фокуса инпута — акцент dark (#4d9fff) */
    --th-danger-glow: rgba(255,69,58,.28);     /* ореол ошибки инпута — danger dark */

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

/* --- [dark] Extras: иконки шапки, тумблер и офлайн-баннер --- */
body[data-theme="dark"] #bell-btn,
body[data-theme="dark"] .settings-btn {
    color: var(--th-header-icon);
}
body[data-theme="dark"] .slider {
    background-color: var(--th-slider);
}
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;

    /* ===== ПАЛИТРА (правь здесь) ===== */
    /* --- База (Telegram-совместимая) --- */
    --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;  /* ссылки */
    /* --- Разнесённые синие (каждое семейство — независимо от общего акцента) --- */
    --th-chat-accent:    #3390ec;  /* чат: мой пузырь, кнопка отправки, имя, панель правки */
    --th-avatar-bg:      #3390ec;  /* аватары участников + кружки рокировки/ручного отбора */
    --th-grid-selected:  #3390ec;  /* сетка создания: выбранная ячейка/бейдж смены/дата со слотами */
    --th-todaybar-from:  #3390ec;  /* синяя полоса графика — левый конец градиента */
    --th-todaybar-to:    #1a6ede;  /* синяя полоса графика — правый конец градиента */
    --th-tab-active:     #3390ec;  /* активная вкладка: таб-бар/модерация/входящие */
    --th-toggle-on:      #3390ec;  /* тумблер во включённом состоянии */
    --th-fab:            #3390ec;  /* кнопки-действия: создать/«+», очистить, выбранный ответ, открыть чаты */
    --th-menu-active:    #3390ec;  /* активный/ховер пункт меню и пикера настроек */
    --th-link-accent:    #3390ec;  /* текст-ссылки, стрелки «назад»/«наверх»/«ещё», кнопки-иконки */
    --th-chip:           #3390ec;  /* чипы, точки мастера, номер шага, разделитель записей */
    --th-unread:         #3390ec;  /* индикаторы непрочитанного во «Входящих» */
    --th-focus:          #3390ec;  /* рамка/обводка фокуса полей и чекбоксов */

    /* --- Пере-резолв токенов --c-* на уровне темы (ВАЖНО — не удалять) ---
       Токены --c-* объявлены в style.css :root как вложенный var(--tg-theme-*),
       поэтому их значение вычисляется на :root и НЕ подхватывает body-override темы.
       Элементы на «чистых» токенах (нижний таб-бар, акценты) иначе игнорировали бы
       выбранную тему. Переобъявляем токены здесь, на уровне body — теперь они берут
       палитру именно этой темы. */
    --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);  /* текст на акценте */
    --th-chat-check-read:     #b4ff00;           /* ✓✓ «прочитано» в чате — ядовитый салатовый */
    --th-chat-status-waiting: #c87000;           /* статус «ожидание» в чате (светлая custom1) */
    --th-chat-status-active:  #1a8c3c;           /* статус «активен» в чате (светлая custom1) */
    /* --- Кнопка «Быстрая запись» (слева на синей полосе графика) --- */
    --th-booknear-bg:     #9cbae9;              /* тёмно-синяя заливка (темнее полосы — выделяется) */
    --th-booknear-border: rgba(255,255,255,.25); /* тонкая светлая рамка — лёгкое выделение */
    --th-booknear-icon:   #ffffff;              /* белая подпись + иконка на тёмно-синем */
    --c-link:        var(--tg-theme-link-color);         /* ссылки */

    /* --- Поверхности и рамки --- */
    --th-surface:        #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-menu-border:    #c0c9d8;          /* рамка выпадающих меню */
    --th-header-bg:      #ffffff;          /* фон шапки графика */
    --th-header-border:  #bec7d6;          /* линия снизу шапки графика */

    /* --- Акценты интерфейса --- */
    --th-hover:          rgba(0,0,0,.04);  /* фон ховера пунктов меню */
    --th-divider:        #d0d6e2;          /* цвет разделителей/hr */
    --th-divider-fill:   rgba(0,0,0,.08);  /* заливка разделителей модалок */
    --th-divider-userline: rgba(0,0,0,.08);/* линия в меню пользователя */
    --th-brand:          #1a6ede;          /* имя бренда в шапке */
    --th-header-icon:    #1a6ede;          /* иконки шапки: колокол, шестерёнка */
    --th-btn-bg:         #3390ec;          /* заливка ОСНОВНОЙ кнопки (btn-primary/swap-ok) — отдельно от акцента */
    --th-btn2-bg:        #edf0f7;          /* фон вторичной кнопки */
    --th-btn2-border:    #b4bdcf;          /* рамка вторичной кнопки */
    --th-slider:         #d3d8e4;          /* тумблер в выкл. состоянии */
    --th-banner-bg:      #dfe7f8;          /* фон офлайн-баннера */
    --th-banner-border:  #b4bdcf;          /* линия снизу офлайн-баннера */

    /* --- Тени --- */
    --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-modal-shadow:   0 12px 40px rgba(0,0,0,.18); /* модалка */
    --th-dropdown-shadow:0 6px 20px rgba(0,0,0,.14);  /* выпадающее меню */

    /* --- Полоса слота (старая палитра до DS7) --- */
    --th-slot-free-bg:        #88c7e6;          /* есть места (пусто) — светлый жёлто-оранжевый «доступно» */
    --th-slot-partial-bg:     #a9d5be;          /* есть участники И есть места — насыщеннее (наполняется) */
    --th-slot-full-bg:        #cacaca;          /* мест нет = недоступно — нейтральный серый */
    --th-slot-busy-bg:        #edfc7f;          /* я записан — можно отменить (тинт красного) */
    --th-slot-other-bg:       #e6e8ee;          /* (legacy) — не используется тинтом */
    --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:           rgba(0,0,0,.35);  /* индикатор — затемнение фона слота: виден на любом тинте, не спорит с ним */
    --th-slot-fill-track:     rgba(0,0,0,.10);  /* индикатор заполнения — дорожка (пустая часть) */
    --th-slot-accent:         rgba(0,0,0,.40);  /* левая вертикаль слота — затемнение его же фона (контраст, светлая тема) */
    /* --- Полоса дня (своя карточка для ориентации) --- */
    --th-day-bg:              #e8f9f9;          /* фон карточки дня — мягкий лавандовый (отличается от слотов) */
    --th-day-accent:          #020008;          /* левая вертикаль дня — насыщенный фиолетовый (свой цвет) */
    /* --- Текущая (идущая прямо сейчас) запись --- */
    --th-booking-now-bg:      #e9f7d1;          /* фон карточки идущей записи — мягкий зелёный */
    /* --- FOCUS GLOW (DS7) --- */
    --th-accent-glow: rgba(51,144,236,.18);    /* ореол фокуса инпута — акцент custom1 (#3390ec) */
    --th-danger-glow: rgba(255,59,48,.20);     /* ореол ошибки инпута — danger light */

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

/* --- [custom1] Extras (копия светлой до DS7) --- */
body[data-theme="custom1"] .slider {
    background-color: var(--th-slider);
}
body[data-theme="custom1"] #offline-banner {
    background: var(--th-banner-bg);
    color: var(--tg-theme-hint-color);
    border-bottom-color: var(--th-banner-border);
}
body[data-theme="custom1"] #bell-btn,
body[data-theme="custom1"] .settings-btn {
    color: var(--th-header-icon);
}
body[data-theme="custom1"] #bell-btn:hover,
body[data-theme="custom1"] #bell-btn:active {
    border-color: var(--th-header-icon);
}
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;

    /* ===== ПАЛИТРА (правь здесь) ===== */
    /* --- База (Telegram-совместимая) --- */
    --tg-theme-bg-color:            #272B2D;  /* фон страницы */
    --tg-theme-secondary-bg-color:  #00080A;  /* вторичный фон */
    --tg-theme-text-color:          #ffffff;  /* основной текст */
    --tg-theme-hint-color:          #8d8d93;  /* подписи, плейсхолдеры */
    --tg-theme-button-color:        #2ea6ff;  /* акцент, заливка кнопок */
    --tg-theme-button-text-color:   #ffffff;  /* текст на кнопках */
    --tg-theme-link-color:          #2ea6ff;  /* ссылки */
    /* --- Разнесённые синие (каждое семейство — независимо от общего акцента) --- */
    --th-chat-accent:    #2ea6ff;  /* чат: мой пузырь, кнопка отправки, имя, панель правки */
    --th-avatar-bg:      #2ea6ff;  /* аватары участников + кружки рокировки/ручного отбора */
    --th-grid-selected:  #2ea6ff;  /* сетка создания: выбранная ячейка/бейдж смены/дата со слотами */
    --th-todaybar-from:  #2ea6ff;  /* синяя полоса графика — левый конец градиента */
    --th-todaybar-to:    #2ea6ff;  /* синяя полоса графика — правый конец градиента */
    --th-tab-active:     #2ea6ff;  /* активная вкладка: таб-бар/модерация/входящие */
    --th-toggle-on:      #2ea6ff;  /* тумблер во включённом состоянии */
    --th-fab:            #2ea6ff;  /* кнопки-действия: создать/«+», очистить, выбранный ответ, открыть чаты */
    --th-menu-active:    #2ea6ff;  /* активный/ховер пункт меню и пикера настроек */
    --th-link-accent:    #2ea6ff;  /* текст-ссылки, стрелки «назад»/«наверх»/«ещё», кнопки-иконки */
    --th-chip:           #2ea6ff;  /* чипы, точки мастера, номер шага, разделитель записей */
    --th-unread:         #2ea6ff;  /* индикаторы непрочитанного во «Входящих» */
    --th-focus:          #2ea6ff;  /* рамка/обводка фокуса полей и чекбоксов */

    /* --- Пере-резолв токенов --c-* на уровне темы (ВАЖНО — не удалять) ---
       Токены --c-* объявлены в style.css :root как вложенный var(--tg-theme-*),
       поэтому их значение вычисляется на :root и НЕ подхватывает body-override темы.
       Элементы на «чистых» токенах (нижний таб-бар, акценты) иначе игнорировали бы
       выбранную тему. Переобъявляем токены здесь, на уровне body — теперь они берут
       палитру именно этой темы. */
    --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);  /* текст на акценте */
    --th-chat-check-read:     #b4ff00;           /* ✓✓ «прочитано» в чате — ядовитый салатовый */
    --th-chat-status-waiting: #ffb357;           /* статус «ожидание» в чате (тёмная custom2) */
    --th-chat-status-active:  #6fd98f;           /* статус «активен» в чате (тёмная custom2) */
    /* --- Кнопка «Быстрая запись» (слева на синей полосе графика) --- */
    --th-booknear-bg:     #0d47a1;              /* тёмно-синяя заливка (темнее полосы — выделяется) */
    --th-booknear-border: rgba(255,255,255,.25); /* тонкая светлая рамка — лёгкое выделение */
    --th-booknear-icon:   #ffffff;              /* белая подпись + иконка на тёмно-синем */
    --c-link:        var(--tg-theme-link-color);         /* ссылки */

    /* --- Поверхности и рамки --- */
    --th-surface:        #1c1c1e;               /* поверхность авто-окон входа, скелетон загрузки, чипы */
    --th-input-border:   #3a3a3c;               /* рамка полей ввода */
    --th-card-border:    rgba(255,255,255,.08); /* рамка карточек меню */
    --th-event-border:   rgba(255,255,255,.07); /* рамка карточек графиков */
    --th-slot-border:    none;                  /* у слота нет рамки */
    --th-menu-border:    #3a3a3c;               /* рамка выпадающих меню */
    --th-header-bg:      #2c2c2e;               /* фон шапки графика */
    --th-header-border:  #3a3a3c;               /* линия снизу шапки графика */

    /* --- Акценты интерфейса --- */
    --th-hover:          rgba(255,255,255,.08); /* фон ховера пунктов меню */
    --th-divider:        #3a3a3c;               /* цвет разделителей/hr */
    --th-divider-fill:   transparent;           /* без заливки разделителей */
    --th-divider-userline: rgba(255,255,255,.1);/* линия в меню пользователя */
    --th-brand:          var(--c-brand);        /* имя бренда (фирменный голубой) */
    --th-header-icon:    #75aaea;               /* иконки шапки: колокол, шестерёнка */
    --th-btn-bg:         #2ea6ff;               /* заливка ОСНОВНОЙ кнопки (btn-primary/swap-ok) — отдельно от акцента */
    --th-btn2-bg:        #3a3a3c;               /* фон вторичной кнопки */
    --th-btn2-border:    #48484a;               /* рамка вторичной кнопки */
    --th-slider:         #39393d;               /* тумблер в выкл. состоянии */
    --th-banner-bg:      #3a3a3c;               /* фон офлайн-баннера */
    --th-banner-border:  #48484a;               /* линия снизу офлайн-баннера */

    /* --- Тени --- */
    --th-card-shadow:    none;                  /* карточка меню */
    --th-event-shadow:   none;                  /* карточка графика */
    --th-header-shadow:  0 2px 8px rgba(0,0,0,.4);  /* шапка графика */
    --th-slot-shadow:    none;                  /* слот */
    --th-modal-shadow:   0 12px 40px rgba(0,0,0,.6);  /* модалка */
    --th-dropdown-shadow:0 6px 20px rgba(0,0,0,.5);   /* выпадающее меню */

    /* --- Полоса слота (новый дизайн): СТАТУС несёт фон слота; кнопка лишь слегка выделяется --- */
    --th-slot-free-bg:        #31708c;          /* есть места (пусто) — голубой, светлее прежнего */
    --th-slot-partial-bg:     #3a5ba0;          /* есть участники И есть места — синий (наполняется) */
    --th-slot-full-bg:        #43484f;          /* мест нет = недоступно — серый, светлее */
    --th-slot-busy-bg:        #a65e1f;          /* я записан — оранжевый */
    --th-slot-other-bg:       #23262c;          /* (legacy) — не используется тинтом */
    --th-slot-btn-free-bg:    #4a8db0;          /* кнопка «Записаться» — голубая, чуть СВЕТЛЕЕ фона слота */
    --th-slot-btn-free-border:rgba(255,255,255,.16); /* кнопка «Записаться» — контур */
    --th-slot-btn-busy-bg:    #c2762a;          /* кнопка «Отменить» — оранжевая, чуть СВЕТЛЕЕ фона слота */
    --th-slot-btn-busy-border:rgba(255,255,255,.16); /* кнопка «Отменить» — контур */
    --th-slot-fill:           rgba(255,255,255,.55); /* индикатор — осветление фона слота: виден на любом тинте, не спорит с ним */
    --th-slot-fill-track:     rgba(255,255,255,.15); /* индикатор заполнения — дорожка (пустая часть) */
    --th-slot-accent:         rgba(255,255,255,.42); /* левая вертикаль слота — осветление его же фона (контраст, тёмная тема) */
    /* --- Полоса дня (своя карточка для ориентации) --- */
    --th-day-bg:              #2b2740;          /* фон карточки дня — тёмный индиго (ориентир) */
    --th-day-accent:          #9b8fe0;          /* левая вертикаль дня — светлый фиолетовый */
    /* --- Текущая (идущая прямо сейчас) запись --- */
    --th-booking-now-bg:      #1e3a2e;          /* фон карточки идущей записи — тёмно-зелёный */
    /* --- FOCUS GLOW (DS7) --- */
    --th-accent-glow: rgba(46,166,255,.28);    /* ореол фокуса инпута — акцент custom2 (#2ea6ff) */
    --th-danger-glow: rgba(255,69,58,.28);     /* ореол ошибки инпута — danger dark */

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

/* --- [custom2] Extras (копия тёмной) --- */
body[data-theme="custom2"] #bell-btn,
body[data-theme="custom2"] .settings-btn {
    color: var(--th-header-icon);
}
body[data-theme="custom2"] .slider {
    background-color: var(--th-slider);
}
body[data-theme="custom2"] #offline-banner {
    background: var(--th-banner-bg);
    color: var(--tg-theme-text-color);
    border-bottom-color: var(--th-banner-border);
}