/* ============================================================================ ТЕМЫ ПРИЛОЖЕНИЯ — «База мастера» и «База салона», один файл на оба ---------------------------------------------------------------------------- Просьба Михаила 22.09.2026: «у нас уже есть смена цвета нижнего тулбара — нужно под каждый цвет сделать полную перекраску приложения, и добавить чёрный тулбар и чёрную тему: фон светлый, а кнопки, слайдеры, тумблеры серо-чёрные, серо/чёрно/прозрачные». 🔴 ФАЙЛ ОДИН НА ДВА ПРОДУКТА — это сделано нарочно. БАЗА и САЛОН близнецы, и правка в одном почти всегда нужна во втором (CLAUDE.md, бэклог п. 7); на выгрузке и на обрезанных заголовках эта развилка уже стоила суток. Имена токенов у продуктов совпадают слово в слово, значит и перекраска совпадает: подключается и в baza.html, и в salon.html, ПОСЛЕДНИМ. Различаются они только темой по умолчанию — розовой у мастера и петроль у салона, а она здесь не трогается вовсе (см. ниже). 🔴 ТЕМА БЕЗ ИМЕНИ («Без цвета») НЕ ОПИСАНА ЗДЕСЬ НАРОЧНО. Это состояние по умолчанию: Rosé Glass у мастера, «Мрамор и петроль» у салона. Выбор темы только НАКРЫВАЕТ токены сверху, и сняв выбор, мастер возвращается ровно к тому, что было до 22.09 — без единой правки в baza-ds.css / salon-ds.css. `--pf-b` — цвет ВТОРОЙ профессии в «Записях» (24.09.2026). Первая всегда цвета темы (`--green`), а вторая не может быть `--rose`: в каждой теме оба токена — один оттенок (в «Графите» #1c1c1e и #2c2c2e), и две профессии сливались. Поэтому у второй свой контрастный цвет на тему: к зелёной — розовый, к розовой — зелёный, к сливовой — янтарь, к морской — терракота, к песочной — синий, к «Графиту» — светлый графит. Белый текст на нём читается (контраст ≥ 4,5). У темы по умолчанию его нет — там `--rose`. 🔴 СВЕТЛОТА НЕ ЗАДАНА ЧИСЛОМ. У каждой роли задан целевой КОНТРАСТ, а светлота подобрана под него на каждый тон отдельно (генератор — в истории задачи). Иначе «песок» и «зелёная» выходили нечитаемыми там, где «море» держало норму: при одной светлоте жёлтый ярче синего почти вдвое. Проверено по WCAG на всех семи темах в обоих режимах: основной текст по бумаге и по карточке ≥ 7, вторичный и акцент ≥ 4.5, белое по действию ≥ 4.5. 🔴 СЕМАНТИКУ (--ok / --warn / --bad / --info) ТЕМА НЕ КРАСИТ. Зелёный «получилось» и красный «ошибка» — это значение, а не оформление; в графите они остаются единственным цветом на экране, и это правильно. 🔴 ТОКЕН, ОБЪЯВЛЕННЫЙ ЧЕРЕЗ ДРУГОЙ ТОКЕН, ПЕРЕОБЪЯВЛЯЕТСЯ ЗДЕСЬ ЦЕЛИКОМ. `--ink-on-green: var(--green-deep)` в :root вычисляется на со СТАРЫМ зелёным: подстановка происходит там, где объявлено, а не там, где используется. Поменяв только --green-deep на , мы получили бы старую зелёную подпись на новой бумаге. Поэтому в каждом блоке ниже выписаны и производные: --ink-on-green, --bgrp-bg, --ph-*. Признак ставится на (`data-bar`), значение приходит с сервера ИМЕНЕМ из белого списка — ни цвета, ни куска стиля в разметку не попадает. 🔴 СЕЛЕКТОР НАБОРОВ ТОКЕНОВ — БЕЗ `body` НАРОЧНО. Благодаря этому образец темы в настройках — это сама тема: кружку ставится тот же `data-bar`, и он красится ровно теми же токенами, что покрасят приложение. Иначе рядом с палитрой пришлось бы держать её копию списком цветов в account.js — та же болезнь, из-за которой у нас четырежды за сутки молча пропадали данные (память feedback_lists_from_profile). Правила самих панелей ниже остаются привязанными к : кружок в настройках не должен красить тулбары. ========================================================================== */ /* ⚠️ ВЕСЬ ОСТАЛЬНОЙ ФАЙЛ СОБРАН ГЕНЕРАТОРОМ (светлота от целевого контраста), а `--pay-*` подобраны РУКАМИ. Перегенерируешь темы — перенеси эти строки, иначе перелив молча вернётся к ровной заливке. */ /* 🔴 У НОЧНЫХ наборов ДВА условия, а не одно (22.09.2026, вечер). Генератор подбирал `--pay-*` от БЕЛОГО — чтобы читалась надпись, — и этого мало: кнопка обязана ещё и отрываться от бумаги (норма для элементов управления — 3). Без второго условия ночные rose/plum/ocean/sand давали 2,36–2,97, то есть кнопка сливалась с фоном, хотя надпись читалась. Вылечено подъёмом ОДНОЙ светлоты при сохранении тона и насыщенности — характер темы не меняется. Меняешь ночной тон — меряй ОБА: белое ≥4,5 и к бумаге ≥3, и не по опорным, а по кадрам анимации. */ /* 🔴 ЦВЕТА ПЕРЕЛИВА КНОПКИ ОПЛАТЫ (`--pay-1/2/3`) переподобраны 22.09.2026 по замечанию Михаила: «в дневной вообще ничего, а в ночной еле видно. Нужно три цвета минимум и явно выразительнее». Что было не так: три цвета отличались только СВЕТЛОТОЙ, а у «Графита» были почти одинаковыми (#1c1c1e, #1c1c1e, #09090a) — перелива не существовало. 🔴 Принцип: выразительность берём ТОНОМ, а не светлотой. Светлота у всех трёх держится в узком коридоре, потому что по кнопке идёт белый текст и каждый цвет обязан давать с ним ≥4,5 — светлее взять просто нельзя. 🔴 Ночные наборы больше НЕ светлее дневных: осветление ради отрыва от тёмной бумаги роняло контраст с белым до 3,9–4,3. На тёмном фоне цветная кнопка и так заметна, а читаемость надписи важнее. Меряно: контраст с белым 5,0–13,3 в каждом наборе, различимость соседних цветов ≥22 по расстоянию RGB. Меняешь цвет — меряй оба показателя. */ /* ── Зелёная (green) ────────────────────────────────────────────── */ [data-bar="green"]{ --paper:#f5f9f4; --paper-2:#ebf3e8; --card:#fdfefc; --card-2:#f7fbf6; --line:#e7efe4; --line-2:#d6e3d1; --rose-tint:#eef8ea; --ink:#20311a; --ink-2:#425939; --ink-3:#5c7851; --ink-4:#8ca383; --rose:#3b7d23; --rose-2:#51a732; --plum:#51a732; --green:#31621f; --green-deep:#1f4113; --pf-b:#b2597b; --glass: linear-gradient(180deg, rgba(49,98,31,0.9), rgba(31,65,19,0.94)); --glass-clear: linear-gradient(180deg, rgba(49,98,31,0.62), rgba(31,65,19,0.72)); --glass-neutral: linear-gradient(180deg, rgba(253,254,252,0.86), rgba(245,249,244,0.92)); --glass-edge: 0 1px 0 rgba(255,255,255,0.32) inset, 0 -14px 22px -14px rgba(0,0,0,.45) inset, 0 10px 24px -14px rgba(31,65,19,0.55); --glass-ink-2:#dbecd5; --glass-ink-3:#c3deba; --dots: radial-gradient(circle, rgba(32,49,26,0.16) 1.1px, transparent 1.2px); --sh: 0 1px 2px rgba(32,49,26,0.06), 0 10px 28px -16px rgba(31,65,19,0.26); --sh-lift: 0 2px 4px rgba(32,49,26,0.07), 0 18px 40px -20px rgba(31,65,19,0.34); --sh-over: 0 24px 60px -20px rgba(31,65,19,0.34), 0 4px 12px rgba(32,49,26,0.1); --ink-on-green:#1f4113; --bgrp-bg: rgba(238,248,234,0.5); --ph-stripe:#e0eadc; --ph-base:#f5f9f4; --ph-drop:#ebf1e9; --ph-ink:#5c7851; --ph-cap:#31621f; --ph-sub:#5c7851; --gl-act-rim: rgba(219,236,213,0.72); --gl-act-rim-2: rgba(31,65,19,0.35); /* 🔴 Третий тон был БИРЮЗОВЫМ (#146b5c, тон 170°) — в листовой зелени это чужой цвет. Нашла соседняя сессия, обобщив две претензии Михаила подряд («зачем чёрный в этой теме», «зачем фиолетовый при зелёно-розовой палитре») в проверку: насколько тона кнопки отклоняются от тона САМОЙ темы. У rose/plum/sand/ocean 20–35°, у зелёной было 66° — вдвое больше остальных. Сдвинут к 130° при той же насыщенности и светлоте: 🔴 И взят ТЕМНЕЕ соседей, а не вровень: первая замена (#146c22) была той же светлоты, что два других тона, и перелив пропал совсем — кнопка стала плоской заливкой. Разброс внутри семейства даёт светлота, а не тон: ровно как в графите. Надпись 11,7 (день) и 6,5 (ночь), к бумаге 11,6 и 3,1. ⚠️ Ночью коридор узкий: на #0a6e12 (всего на 12 единиц темнее) отрыв от бумаги падает до 2,76. Проверять ОБА числа при любой правке. ⚠️ Разброс ВНУТРИ тройки такой проверки не проходит — по нему зелёная ничем не выделялась. Мерить надо отклонение от акцента темы. */ --pay-1:#1f6b3a; --pay-2:#2f6b1f; --pay-3:#0c3f12; --dm-fab:#31621f; --dm-fab-sh:rgba(31,65,19,0.55); --dmx-card:#fdfefc; --dmx-ink:#20311a; --dmx-ink-2:#5c7851; --dmx-line:#e7efe4; --dmx-her:#eef8ea; --dmx-field:#fdfefc; --dmx-ava-ink:#3b7d23; --dm-me: linear-gradient(180deg, rgba(49,98,31,0.92), rgba(31,65,19,0.95)); --chip-soft: linear-gradient(180deg, rgba(212,234,204,0.74), rgba(189,220,178,0.8)); --chip-soft-ink: #1f4113; --chip-soft-line: rgba(255,255,255,0.6); --veil: rgba(31,65,19,0.42); --dm-dot: #3b7d23; --dmx-veil: rgba(31,65,19,0.16); --dmx-veil-s: rgba(31,65,19,0.34); } [data-theme="dark"] [data-bar="green"]{ --paper:#141a11; --paper-2:#1c2518; --card:#1d261a; --card-2:#253021; --line:#2f3b2b; --line-2:#3d4d38; --rose-tint:#293923; --ink:#dee8da; --ink-2:#a4ba9c; --ink-3:#859f7b; --ink-4:#5e7256; --rose:#66c443; --rose-2:#81cc65; --plum:#81cc65; --green:#497e36; --green-deep:#305523; --pf-b:#a9577a; --glass: linear-gradient(180deg, rgba(73,126,54,0.9), rgba(48,85,35,0.94)); --glass-clear: linear-gradient(180deg, rgba(73,126,54,0.62), rgba(48,85,35,0.72)); --glass-neutral: linear-gradient(180deg, rgba(29,38,26,0.86), rgba(20,26,17,0.92)); --glass-edge: 0 1px 0 rgba(255,255,255,0.18) inset, 0 -14px 22px -14px rgba(0,0,0,.45) inset, 0 10px 24px -14px rgba(48,85,35,0.55); --glass-ink-2:#d0e2ca; --glass-ink-3:#b9d5ae; --dots: radial-gradient(circle, rgba(222,232,218,0.1) 1.1px, transparent 1.2px); --sh: 0 1px 2px rgba(0,0,0,.4), 0 10px 28px -16px rgba(0,0,0,.6); --sh-lift: 0 2px 4px rgba(0,0,0,.45), 0 18px 40px -20px rgba(0,0,0,.7); --sh-over: 0 24px 60px -20px rgba(0,0,0,.75), 0 4px 12px rgba(0,0,0,.4); --ink-on-green:#66c443; --bgrp-bg: rgba(255,255,255,.04); --ph-stripe:#3d4d38; --ph-base:#283224; --ph-drop:#374332; --ph-ink:rgba(255,255,255,.82); --ph-cap:#ffffff; --ph-sub:rgba(255,255,255,.82); --gl-act-rim: rgba(208,226,202,0.5); --gl-act-rim-2: rgba(48,85,35,0.35); --pay-1:#1b7a3e; --pay-2:#2c7a1b; --pay-3:#0b7a14; --dm-fab:#497e36; --dm-fab-sh:rgba(48,85,35,0.55); --dmx-card:#1d261a; --dmx-ink:#dee8da; --dmx-ink-2:#859f7b; --dmx-line:#2f3b2b; --dmx-her:#293923; --dmx-field:#1c2518; --dmx-ava-ink:#66c443; --dm-me: linear-gradient(180deg, rgba(73,126,54,0.92), rgba(48,85,35,0.95)); --chip-soft: linear-gradient(180deg, rgba(59,91,47,0.72), rgba(47,69,39,0.8)); --chip-soft-ink: #d0e2ca; --chip-soft-line: rgba(255,255,255,0.16); --veil: rgba(48,85,35,0.56); --dm-dot: #66c443; --dmx-veil: rgba(48,85,35,0.16); --dmx-veil-s: rgba(48,85,35,0.52); } /* ── Розовая (rose) ─────────────────────────────────────────────── */ [data-bar="rose"]{ --paper:#f9f4f6; --paper-2:#f3e8ed; --card:#fefcfd; --card-2:#fbf6f8; --line:#efe4e8; --line-2:#e3d1d8; --rose-tint:#f8eaf0; --ink:#3f222e; --ink-2:#6e4656; --ink-3:#906275; --ink-4:#b094a0; --rose:#bb356b; --rose-2:#d6749b; --plum:#d6749b; --green:#98305a; --green-deep:#671f3b; --pf-b:#3a7233; --glass: linear-gradient(180deg, rgba(152,48,90,0.9), rgba(103,31,59,0.94)); --glass-clear: linear-gradient(180deg, rgba(152,48,90,0.62), rgba(103,31,59,0.72)); --glass-neutral: linear-gradient(180deg, rgba(254,252,253,0.86), rgba(249,244,246,0.92)); --glass-edge: 0 1px 0 rgba(255,255,255,0.32) inset, 0 -14px 22px -14px rgba(0,0,0,.45) inset, 0 10px 24px -14px rgba(103,31,59,0.55); --glass-ink-2:#ecd5de; --glass-ink-3:#debac8; --dots: radial-gradient(circle, rgba(63,34,46,0.16) 1.1px, transparent 1.2px); --sh: 0 1px 2px rgba(63,34,46,0.06), 0 10px 28px -16px rgba(103,31,59,0.26); --sh-lift: 0 2px 4px rgba(63,34,46,0.07), 0 18px 40px -20px rgba(103,31,59,0.34); --sh-over: 0 24px 60px -20px rgba(103,31,59,0.34), 0 4px 12px rgba(63,34,46,0.1); --ink-on-green:#671f3b; --bgrp-bg: rgba(248,234,240,0.5); --ph-stripe:#eadce1; --ph-base:#f9f4f6; --ph-drop:#f1e9ec; --ph-ink:#906275; --ph-cap:#98305a; --ph-sub:#906275; --gl-act-rim: rgba(236,213,222,0.72); --gl-act-rim-2: rgba(103,31,59,0.35); --pay-1:#a81f56; --pay-2:#8e2472; --pay-3:#96203a; --dm-fab:#98305a; --dm-fab-sh:rgba(103,31,59,0.55); --dmx-card:#fefcfd; --dmx-ink:#3f222e; --dmx-ink-2:#906275; --dmx-line:#efe4e8; --dmx-her:#f8eaf0; --dmx-field:#fefcfd; --dmx-ava-ink:#bb356b; --dm-me: linear-gradient(180deg, rgba(152,48,90,0.92), rgba(103,31,59,0.95)); --chip-soft: linear-gradient(180deg, rgba(234,204,216,0.74), rgba(220,178,195,0.8)); --chip-soft-ink: #671f3b; --chip-soft-line: rgba(255,255,255,0.6); --veil: rgba(103,31,59,0.42); --dm-dot: #bb356b; --dmx-veil: rgba(103,31,59,0.16); --dmx-veil-s: rgba(103,31,59,0.34); } [data-theme="dark"] [data-bar="rose"]{ --paper:#1a1115; --paper-2:#25181d; --card:#261a1f; --card-2:#302127; --line:#3b2b31; --line-2:#4d3840; --rose-tint:#39232c; --ink:#e9dce1; --ink-2:#c3a9b4; --ink-3:#aa8996; --ink-4:#7e5f6c; --rose:#da89a9; --rose-2:#e0a2ba; --plum:#e0a2ba; --green:#b34e77; --green-deep:#7e3351; --pf-b:#4d8a45; --glass: linear-gradient(180deg, rgba(179,78,119,0.9), rgba(126,51,81,0.94)); --glass-clear: linear-gradient(180deg, rgba(179,78,119,0.62), rgba(126,51,81,0.72)); --glass-neutral: linear-gradient(180deg, rgba(38,26,31,0.86), rgba(26,17,21,0.92)); --glass-edge: 0 1px 0 rgba(255,255,255,0.18) inset, 0 -14px 22px -14px rgba(0,0,0,.45) inset, 0 10px 24px -14px rgba(126,51,81,0.55); --glass-ink-2:#e2cad4; --glass-ink-3:#d5aebe; --dots: radial-gradient(circle, rgba(233,220,225,0.1) 1.1px, transparent 1.2px); --sh: 0 1px 2px rgba(0,0,0,.4), 0 10px 28px -16px rgba(0,0,0,.6); --sh-lift: 0 2px 4px rgba(0,0,0,.45), 0 18px 40px -20px rgba(0,0,0,.7); --sh-over: 0 24px 60px -20px rgba(0,0,0,.75), 0 4px 12px rgba(0,0,0,.4); --ink-on-green:#da89a9; --bgrp-bg: rgba(255,255,255,.04); --ph-stripe:#4d3840; --ph-base:#32242a; --ph-drop:#433239; --ph-ink:rgba(255,255,255,.82); --ph-cap:#ffffff; --ph-sub:rgba(255,255,255,.82); --gl-act-rim: rgba(226,202,212,0.5); --gl-act-rim-2: rgba(126,51,81,0.35); --pay-1:#ba2961; --pay-2:#ad318d; --pay-3:#bb274a; --dm-fab:#b34e77; --dm-fab-sh:rgba(126,51,81,0.55); --dmx-card:#261a1f; --dmx-ink:#e9dce1; --dmx-ink-2:#aa8996; --dmx-line:#3b2b31; --dmx-her:#39232c; --dmx-field:#25181d; --dmx-ava-ink:#da89a9; --dm-me: linear-gradient(180deg, rgba(179,78,119,0.92), rgba(126,51,81,0.95)); --chip-soft: linear-gradient(180deg, rgba(91,47,64,0.72), rgba(69,39,51,0.8)); --chip-soft-ink: #e2cad4; --chip-soft-line: rgba(255,255,255,0.16); --veil: rgba(126,51,81,0.56); --dm-dot: #da89a9; --dmx-veil: rgba(126,51,81,0.16); --dmx-veil-s: rgba(126,51,81,0.52); } /* ── Сливовая (plum) ────────────────────────────────────────────── */ [data-bar="plum"]{ --paper:#f7f4f9; --paper-2:#efe8f3; --card:#fdfcfe; --card-2:#f9f6fb; --line:#ebe4ef; --line-2:#dcd1e3; --rose-tint:#f3eaf8; --ink:#372342; --ink-2:#614870; --ink-3:#816493; --ink-4:#a795b1; --rose:#953ec8; --rose-2:#b67bd8; --plum:#b67bd8; --green:#7d34a6; --green-deep:#532270; --pf-b:#8f6118; --glass: linear-gradient(180deg, rgba(125,52,166,0.9), rgba(83,34,112,0.94)); --glass-clear: linear-gradient(180deg, rgba(125,52,166,0.62), rgba(83,34,112,0.72)); --glass-neutral: linear-gradient(180deg, rgba(253,252,254,0.86), rgba(247,244,249,0.92)); --glass-edge: 0 1px 0 rgba(255,255,255,0.32) inset, 0 -14px 22px -14px rgba(0,0,0,.45) inset, 0 10px 24px -14px rgba(83,34,112,0.55); --glass-ink-2:#e4d5ec; --glass-ink-3:#d1bade; --dots: radial-gradient(circle, rgba(55,35,66,0.16) 1.1px, transparent 1.2px); --sh: 0 1px 2px rgba(55,35,66,0.06), 0 10px 28px -16px rgba(83,34,112,0.26); --sh-lift: 0 2px 4px rgba(55,35,66,0.07), 0 18px 40px -20px rgba(83,34,112,0.34); --sh-over: 0 24px 60px -20px rgba(83,34,112,0.34), 0 4px 12px rgba(55,35,66,0.1); --ink-on-green:#532270; --bgrp-bg: rgba(243,234,248,0.5); --ph-stripe:#e5dcea; --ph-base:#f7f4f9; --ph-drop:#eee9f1; --ph-ink:#816493; --ph-cap:#7d34a6; --ph-sub:#816493; --gl-act-rim: rgba(228,213,236,0.72); --gl-act-rim-2: rgba(83,34,112,0.35); --pay-1:#6b2ea8; --pay-2:#93278f; --pay-3:#4a2a9c; --dm-fab:#7d34a6; --dm-fab-sh:rgba(83,34,112,0.55); --dmx-card:#fdfcfe; --dmx-ink:#372342; --dmx-ink-2:#816493; --dmx-line:#ebe4ef; --dmx-her:#f3eaf8; --dmx-field:#fdfcfe; --dmx-ava-ink:#953ec8; --dm-me: linear-gradient(180deg, rgba(125,52,166,0.92), rgba(83,34,112,0.95)); --chip-soft: linear-gradient(180deg, rgba(223,204,234,0.74), rgba(205,178,220,0.8)); --chip-soft-ink: #532270; --chip-soft-line: rgba(255,255,255,0.6); --veil: rgba(83,34,112,0.42); --dm-dot: #953ec8; --dmx-veil: rgba(83,34,112,0.16); --dmx-veil-s: rgba(83,34,112,0.34); } [data-theme="dark"] [data-bar="plum"]{ --paper:#17111a; --paper-2:#201825; --card:#211a26; --card-2:#2b2130; --line:#352b3b; --line-2:#45384d; --rose-tint:#312339; --ink:#e5dde9; --ink-2:#baa9c4; --ink-3:#9f8aab; --ink-4:#73607f; --rose:#be8cdb; --rose-2:#caa4e1; --plum:#caa4e1; --green:#9356b7; --green-deep:#683785; --pf-b:#a07428; --glass: linear-gradient(180deg, rgba(147,86,183,0.9), rgba(104,55,133,0.94)); --glass-clear: linear-gradient(180deg, rgba(147,86,183,0.62), rgba(104,55,133,0.72)); --glass-neutral: linear-gradient(180deg, rgba(33,26,38,0.86), rgba(23,17,26,0.92)); --glass-edge: 0 1px 0 rgba(255,255,255,0.18) inset, 0 -14px 22px -14px rgba(0,0,0,.45) inset, 0 10px 24px -14px rgba(104,55,133,0.55); --glass-ink-2:#d9cae2; --glass-ink-3:#c7aed5; --dots: radial-gradient(circle, rgba(229,221,233,0.1) 1.1px, transparent 1.2px); --sh: 0 1px 2px rgba(0,0,0,.4), 0 10px 28px -16px rgba(0,0,0,.6); --sh-lift: 0 2px 4px rgba(0,0,0,.45), 0 18px 40px -20px rgba(0,0,0,.7); --sh-over: 0 24px 60px -20px rgba(0,0,0,.75), 0 4px 12px rgba(0,0,0,.4); --ink-on-green:#be8cdb; --bgrp-bg: rgba(255,255,255,.04); --ph-stripe:#45384d; --ph-base:#2d2432; --ph-drop:#3d3243; --ph-ink:rgba(255,255,255,.82); --ph-cap:#ffffff; --ph-sub:rgba(255,255,255,.82); --gl-act-rim: rgba(217,202,226,0.5); --gl-act-rim-2: rgba(104,55,133,0.35); --pay-1:#8644c5; --pay-2:#a5319f; --pay-3:#704fc9; --dm-fab:#9356b7; --dm-fab-sh:rgba(104,55,133,0.55); --dmx-card:#211a26; --dmx-ink:#e5dde9; --dmx-ink-2:#9f8aab; --dmx-line:#352b3b; --dmx-her:#312339; --dmx-field:#201825; --dmx-ava-ink:#be8cdb; --dm-me: linear-gradient(180deg, rgba(147,86,183,0.92), rgba(104,55,133,0.95)); --chip-soft: linear-gradient(180deg, rgba(75,47,91,0.72), rgba(58,39,69,0.8)); --chip-soft-ink: #d9cae2; --chip-soft-line: rgba(255,255,255,0.16); --veil: rgba(104,55,133,0.56); --dm-dot: #be8cdb; --dmx-veil: rgba(104,55,133,0.16); --dmx-veil-s: rgba(104,55,133,0.52); } /* ── Морская (ocean) ────────────────────────────────────────────── */ [data-bar="ocean"]{ --paper:#f4f7f9; --paper-2:#e8eff3; --card:#fcfdfe; --card-2:#f6f9fb; --line:#e4ebef; --line-2:#d1dce3; --rose-tint:#eaf3f8; --ink:#1e2e38; --ink-2:#3f5663; --ink-3:#597383; --ink-4:#8c9eaa; --rose:#2c729d; --rose-2:#4e9bca; --plum:#4e9bca; --green:#275c7d; --green-deep:#193d53; --pf-b:#a4561f; --glass: linear-gradient(180deg, rgba(39,92,125,0.9), rgba(25,61,83,0.94)); --glass-clear: linear-gradient(180deg, rgba(39,92,125,0.62), rgba(25,61,83,0.72)); --glass-neutral: linear-gradient(180deg, rgba(252,253,254,0.86), rgba(244,247,249,0.92)); --glass-edge: 0 1px 0 rgba(255,255,255,0.32) inset, 0 -14px 22px -14px rgba(0,0,0,.45) inset, 0 10px 24px -14px rgba(25,61,83,0.55); --glass-ink-2:#d5e3ec; --glass-ink-3:#bad0de; --dots: radial-gradient(circle, rgba(30,46,56,0.16) 1.1px, transparent 1.2px); --sh: 0 1px 2px rgba(30,46,56,0.06), 0 10px 28px -16px rgba(25,61,83,0.26); --sh-lift: 0 2px 4px rgba(30,46,56,0.07), 0 18px 40px -20px rgba(25,61,83,0.34); --sh-over: 0 24px 60px -20px rgba(25,61,83,0.34), 0 4px 12px rgba(30,46,56,0.1); --ink-on-green:#193d53; --bgrp-bg: rgba(234,243,248,0.5); --ph-stripe:#dce5ea; --ph-base:#f4f7f9; --ph-drop:#e9eef1; --ph-ink:#597383; --ph-cap:#275c7d; --ph-sub:#597383; --gl-act-rim: rgba(213,227,236,0.72); --gl-act-rim-2: rgba(25,61,83,0.35); --pay-1:#13598f; --pay-2:#3b3fa8; --pay-3:#0f6a76; --dm-fab:#275c7d; --dm-fab-sh:rgba(25,61,83,0.55); --dmx-card:#fcfdfe; --dmx-ink:#1e2e38; --dmx-ink-2:#597383; --dmx-line:#e4ebef; --dmx-her:#eaf3f8; --dmx-field:#fcfdfe; --dmx-ava-ink:#2c729d; --dm-me: linear-gradient(180deg, rgba(39,92,125,0.92), rgba(25,61,83,0.95)); --chip-soft: linear-gradient(180deg, rgba(204,223,234,0.74), rgba(178,204,220,0.8)); --chip-soft-ink: #193d53; --chip-soft-line: rgba(255,255,255,0.6); --veil: rgba(25,61,83,0.42); --dm-dot: #2c729d; --dmx-veil: rgba(25,61,83,0.16); --dmx-veil-s: rgba(25,61,83,0.34); } [data-theme="dark"] [data-bar="ocean"]{ --paper:#11171a; --paper-2:#182025; --card:#1a2126; --card-2:#212b30; --line:#2b353b; --line-2:#38454d; --rose-tint:#233039; --ink:#dce4e8; --ink-2:#a3b4bf; --ink-3:#8297a5; --ink-4:#5a6c78; --rose:#72aed2; --rose-2:#8dbcd9; --plum:#8dbcd9; --green:#417798; --green-deep:#2b5068; --pf-b:#b0652f; --glass: linear-gradient(180deg, rgba(65,119,152,0.9), rgba(43,80,104,0.94)); --glass-clear: linear-gradient(180deg, rgba(65,119,152,0.62), rgba(43,80,104,0.72)); --glass-neutral: linear-gradient(180deg, rgba(26,33,38,0.86), rgba(17,23,26,0.92)); --glass-edge: 0 1px 0 rgba(255,255,255,0.18) inset, 0 -14px 22px -14px rgba(0,0,0,.45) inset, 0 10px 24px -14px rgba(43,80,104,0.55); --glass-ink-2:#cad9e2; --glass-ink-3:#aec6d5; --dots: radial-gradient(circle, rgba(220,228,232,0.1) 1.1px, transparent 1.2px); --sh: 0 1px 2px rgba(0,0,0,.4), 0 10px 28px -16px rgba(0,0,0,.6); --sh-lift: 0 2px 4px rgba(0,0,0,.45), 0 18px 40px -20px rgba(0,0,0,.7); --sh-over: 0 24px 60px -20px rgba(0,0,0,.75), 0 4px 12px rgba(0,0,0,.4); --ink-on-green:#72aed2; --bgrp-bg: rgba(255,255,255,.04); --ph-stripe:#38454d; --ph-base:#242d32; --ph-drop:#323d43; --ph-ink:rgba(255,255,255,.82); --ph-cap:#ffffff; --ph-sub:rgba(255,255,255,.82); --gl-act-rim: rgba(202,217,226,0.5); --gl-act-rim-2: rgba(43,80,104,0.35); --pay-1:#166cac; --pay-2:#595cc4; --pay-3:#0f7280; --dm-fab:#417798; --dm-fab-sh:rgba(43,80,104,0.55); --dmx-card:#1a2126; --dmx-ink:#dce4e8; --dmx-ink-2:#8297a5; --dmx-line:#2b353b; --dmx-her:#233039; --dmx-field:#182025; --dmx-ava-ink:#72aed2; --dm-me: linear-gradient(180deg, rgba(65,119,152,0.92), rgba(43,80,104,0.95)); --chip-soft: linear-gradient(180deg, rgba(47,74,91,0.72), rgba(39,57,69,0.8)); --chip-soft-ink: #cad9e2; --chip-soft-line: rgba(255,255,255,0.16); --veil: rgba(43,80,104,0.56); --dm-dot: #72aed2; --dmx-veil: rgba(43,80,104,0.16); --dmx-veil-s: rgba(43,80,104,0.52); } /* ── Песочная (sand) ────────────────────────────────────────────── */ [data-bar="sand"]{ --paper:#f9f6f4; --paper-2:#f3eee8; --card:#fefdfc; --card-2:#fbf8f6; --line:#efeae4; --line-2:#e3dbd1; --rose-tint:#f8f2ea; --ink:#352b1d; --ink-2:#5f503d; --ink-3:#7e6d56; --ink-4:#a89a89; --rose:#906329; --rose-2:#c3873a; --plum:#c3873a; --green:#725124; --green-deep:#4c3517; --pf-b:#2c729d; --glass: linear-gradient(180deg, rgba(114,81,36,0.9), rgba(76,53,23,0.94)); --glass-clear: linear-gradient(180deg, rgba(114,81,36,0.62), rgba(76,53,23,0.72)); --glass-neutral: linear-gradient(180deg, rgba(254,253,252,0.86), rgba(249,246,244,0.92)); --glass-edge: 0 1px 0 rgba(255,255,255,0.32) inset, 0 -14px 22px -14px rgba(0,0,0,.45) inset, 0 10px 24px -14px rgba(76,53,23,0.55); --glass-ink-2:#ece2d5; --glass-ink-3:#deceba; --dots: radial-gradient(circle, rgba(53,43,29,0.16) 1.1px, transparent 1.2px); --sh: 0 1px 2px rgba(53,43,29,0.06), 0 10px 28px -16px rgba(76,53,23,0.26); --sh-lift: 0 2px 4px rgba(53,43,29,0.07), 0 18px 40px -20px rgba(76,53,23,0.34); --sh-over: 0 24px 60px -20px rgba(76,53,23,0.34), 0 4px 12px rgba(53,43,29,0.1); --ink-on-green:#4c3517; --bgrp-bg: rgba(248,242,234,0.5); --ph-stripe:#eae4dc; --ph-base:#f9f6f4; --ph-drop:#f1eee9; --ph-ink:#7e6d56; --ph-cap:#725124; --ph-sub:#7e6d56; --gl-act-rim: rgba(236,226,213,0.72); --gl-act-rim-2: rgba(76,53,23,0.35); --pay-1:#8a5a16; --pay-2:#5f6b16; --pay-3:#91471f; --dm-fab:#725124; --dm-fab-sh:rgba(76,53,23,0.55); --dmx-card:#fefdfc; --dmx-ink:#352b1d; --dmx-ink-2:#7e6d56; --dmx-line:#efeae4; --dmx-her:#f8f2ea; --dmx-field:#fefdfc; --dmx-ava-ink:#906329; --dm-me: linear-gradient(180deg, rgba(114,81,36,0.92), rgba(76,53,23,0.95)); --chip-soft: linear-gradient(180deg, rgba(234,221,204,0.74), rgba(220,202,178,0.8)); --chip-soft-ink: #4c3517; --chip-soft-line: rgba(255,255,255,0.6); --veil: rgba(76,53,23,0.42); --dm-dot: #906329; --dmx-veil: rgba(76,53,23,0.16); --dmx-veil-s: rgba(76,53,23,0.34); } [data-theme="dark"] [data-bar="sand"]{ --paper:#1a1611; --paper-2:#251f18; --card:#26211a; --card-2:#302a21; --line:#3b342b; --line-2:#4d4438; --rose-tint:#392f23; --ink:#e8e3db; --ink-2:#bdb1a0; --ink-3:#a39480; --ink-4:#766a59; --rose:#cfa266; --rose-2:#d5b182; --plum:#d5b182; --green:#8e6b3d; --green-deep:#614828; --pf-b:#3f7fa8; --glass: linear-gradient(180deg, rgba(142,107,61,0.9), rgba(97,72,40,0.94)); --glass-clear: linear-gradient(180deg, rgba(142,107,61,0.62), rgba(97,72,40,0.72)); --glass-neutral: linear-gradient(180deg, rgba(38,33,26,0.86), rgba(26,22,17,0.92)); --glass-edge: 0 1px 0 rgba(255,255,255,0.18) inset, 0 -14px 22px -14px rgba(0,0,0,.45) inset, 0 10px 24px -14px rgba(97,72,40,0.55); --glass-ink-2:#e2d8ca; --glass-ink-3:#d5c4ae; --dots: radial-gradient(circle, rgba(232,227,219,0.1) 1.1px, transparent 1.2px); --sh: 0 1px 2px rgba(0,0,0,.4), 0 10px 28px -16px rgba(0,0,0,.6); --sh-lift: 0 2px 4px rgba(0,0,0,.45), 0 18px 40px -20px rgba(0,0,0,.7); --sh-over: 0 24px 60px -20px rgba(0,0,0,.75), 0 4px 12px rgba(0,0,0,.4); --ink-on-green:#cfa266; --bgrp-bg: rgba(255,255,255,.04); --ph-stripe:#4d4438; --ph-base:#322c24; --ph-drop:#433c32; --ph-ink:rgba(255,255,255,.82); --ph-cap:#ffffff; --ph-sub:rgba(255,255,255,.82); --gl-act-rim: rgba(226,216,202,0.5); --gl-act-rim-2: rgba(97,72,40,0.35); --pay-1:#8d5a18; --pay-2:#626e18; --pay-3:#a14f23; --dm-fab:#8e6b3d; --dm-fab-sh:rgba(97,72,40,0.55); --dmx-card:#26211a; --dmx-ink:#e8e3db; --dmx-ink-2:#a39480; --dmx-line:#3b342b; --dmx-her:#392f23; --dmx-field:#251f18; --dmx-ava-ink:#cfa266; --dm-me: linear-gradient(180deg, rgba(142,107,61,0.92), rgba(97,72,40,0.95)); --chip-soft: linear-gradient(180deg, rgba(91,72,47,0.72), rgba(69,56,39,0.8)); --chip-soft-ink: #e2d8ca; --chip-soft-line: rgba(255,255,255,0.16); --veil: rgba(97,72,40,0.56); --dm-dot: #cfa266; --dmx-veil: rgba(97,72,40,0.16); --dmx-veil-s: rgba(97,72,40,0.52); } /* ── Графит (ink) ───────────────────────────────────────────────── */ [data-bar="ink"]{ --paper:#f7f7f8; --paper-2:#eeeef0; --card:#ffffff; --card-2:#f9f9fa; --line:#e6e6e9; --line-2:#d5d5d9; --rose-tint:#ededf0; --ink:#1c1c1e; --ink-2:#48484a; --ink-3:#636366; --ink-4:#9a9aa0; --rose:#2c2c2e; --rose-2:#5a5a5e; --plum:#5a5a5e; --green:#1c1c1e; --green-deep:#09090a; --pf-b:#6e6e73; --glass: linear-gradient(180deg, rgba(28,28,30,0.9), rgba(9,9,10,0.94)); --glass-clear: linear-gradient(180deg, rgba(28,28,30,0.62), rgba(9,9,10,0.72)); --glass-neutral: linear-gradient(180deg, rgba(255,255,255,0.86), rgba(247,247,248,0.92)); --glass-edge: 0 1px 0 rgba(255,255,255,0.32) inset, 0 -14px 22px -14px rgba(0,0,0,.45) inset, 0 10px 24px -14px rgba(9,9,10,0.55); --glass-ink-2:#e8e8ea; --glass-ink-3:#d1d1d6; --dots: radial-gradient(circle, rgba(28,28,30,0.16) 1.1px, transparent 1.2px); --sh: 0 1px 2px rgba(28,28,30,0.06), 0 10px 28px -16px rgba(9,9,10,0.26); --sh-lift: 0 2px 4px rgba(28,28,30,0.07), 0 18px 40px -20px rgba(9,9,10,0.34); --sh-over: 0 24px 60px -20px rgba(9,9,10,0.34), 0 4px 12px rgba(28,28,30,0.1); --ink-on-green:#09090a; --bgrp-bg: rgba(237,237,240,0.5); --ph-stripe:#e4e4e7; --ph-base:#f7f7f8; --ph-drop:#eeeef0; --ph-ink:#636366; --ph-cap:#1c1c1e; --ph-sub:#636366; --gl-act-rim: rgba(232,232,234,0.72); --gl-act-rim-2: rgba(9,9,10,0.35); /* 🔴 У графита перелив НЕЙТРАЛЬНЫЙ, а не цветной. Просьба Михаила про эту тему была прямой: «фон светлый, а кнопки, слайдеры, тумблеры серо/чёрные». Цветной перелив здесь читался фиолетовой кнопкой в строго сером приложении. Три ступени серого дают отрыв 44–45 по RGB — вдвое выше порога 22, то есть перелив тут ВЫРАЗИТЕЛЬНЕЕ цветного, а не слабее: в светлой теме серому есть куда падать до чёрного. */ /* 🔴 ЧЁРНЫЙ · БЕЛЫЙ · КРАСНЫЙ (22.09.2026, просьба Михаила «не выразительно: нужен чёрный белый и красный в графите»). Красный несёт кнопка, чёрный — второй конец перелива, белый — надпись и обводка. Строго серые ступени, стоявшие здесь раньше, давали размах светлоты 20; эта пара даёт 32, и разница видна не только по яркости, но и по тону. 🔴 Светлее #c81432 идти нельзя: белая надпись на красном держит норму 4,5 только до #e81b42, а запас нужен и на скруглении градиента. */ /* 🔴 Кнопка ГЛОБАЛЬНО ЧЁРНАЯ, цвет приходит искрами (22.09.2026, Михаил: «должны быть чёрными с переливом на белый и красный, но глобально чёрные», и следом «белого совсем чуть-чуть»). Поэтому все три --pay-* здесь тёмные — из них складывается чёрное поле, — а красный и белый лежат в --pay-spark-*, отдельными мелкими слоями поверх. Раньше красный стоял прямо в --pay-1, и подложка треть цикла заливалась им целиком: кнопка читалась красной, сколько тон ни приглушай. */ --pay-1:#241318; --pay-2:#131316; --pay-3:#1c1c20; /* 🔴 Белая искра ровно .12 (Михаил: «белого совсем чуть-чуть») — и это не вкусовая величина, а предел. Искры ходят независимо и рано или поздно накладываются; белое ПОВЕРХ красного даёт розовый, и надпись садится. При .30 выходило #e15d75 — надпись 3,49 при норме 4,5. При .12 худшее наложение #d93452 держит 4,60, а сама искра всё равно светлее поля на 26–27 единиц, то есть видна. Поднимать альфу нельзя без пересчёта ИМЕННО НАЛОЖЕНИЯ, а не искры на чёрном: на чёрном она безопасна всегда. Искры в обеих темах одинаковые — перелив ночью такой же, как днём. */ /* 🔴 Серый, а не красный (проба по просьбе Михаила 22.09: «в графите вместо красного серый давай попробуем»). Светлее #757579 брать нельзя — на нём белая надпись даёт ровно 4,5, а выше уже ниже нормы; взят #6f6f74 (5,00), чтобы остался запас на сглаживание краёв зоны. */ --pay-spark-c:#6f6f74; --pay-spark-w:rgba(255,255,255,.12); /* Ручки шейдера кнопки (public/js/paybg.js), крутятся отдельно от тонов: `--pay-hot` — доля цветного. 1 как в оригинале; .3 — две просьбы Михаила подряд: «красного на 60% меньше», затем «чуть меньше красного и чуть больше чёрного». `--pay-gleam` — белые прожилки по чёрному. 🔴 Потолок .35 зашит в скрипте: на .40 худшая точка даёт надпись 4,42 при норме 4,5. На .30 — 6,11. Белое кладётся только на тёмное, на красном гасится, иначе выходит розовый. */ --pay-hot:.12; --pay-gleam:1; /* Только эта тема просит живой шейдер; остальные идут на CSS-переливе. */ --pay-shader:block; /* Графит живёт шейдером: «чернила» держит фолбэком, бегущий контур ему не нужен. */ --pay-ink:var(--ink-layers); --pay-ring:none; --dm-fab:#1c1c1e; --dm-fab-sh:rgba(9,9,10,0.55); --dmx-card:#ffffff; --dmx-ink:#1c1c1e; --dmx-ink-2:#636366; --dmx-line:#e6e6e9; --dmx-her:#ededf0; --dmx-field:#ffffff; --dmx-ava-ink:#2c2c2e; --dm-me: linear-gradient(180deg, rgba(28,28,30,0.92), rgba(9,9,10,0.95)); --chip-soft: linear-gradient(180deg, rgba(220,220,223,0.74), rgba(198,198,203,0.8)); --chip-soft-ink: #09090a; --chip-soft-line: rgba(255,255,255,0.6); --veil: rgba(9,9,10,0.42); --dm-dot: #2c2c2e; --dmx-veil: rgba(9,9,10,0.16); --dmx-veil-s: rgba(9,9,10,0.34); } [data-theme="dark"] [data-bar="ink"]{ --paper:#141416; --paper-2:#1c1c1f; --card:#1e1e21; --card-2:#26262a; --line:#313135; --line-2:#414147; --rose-tint:#303036; --ink:#f2f2f4; --ink-2:#c0c0c6; --ink-3:#9d9da4; --ink-4:#6e6e75; --rose:#e0e0e6; --rose-2:#b8b8c0; --plum:#b8b8c0; --green:#5a5a60; --green-deep:#38383d; --pf-b:#7c7c84; --glass: linear-gradient(180deg, rgba(90,90,96,0.9), rgba(56,56,61,0.94)); --glass-clear: linear-gradient(180deg, rgba(90,90,96,0.62), rgba(56,56,61,0.72)); --glass-neutral: linear-gradient(180deg, rgba(30,30,33,0.86), rgba(20,20,22,0.92)); --glass-edge: 0 1px 0 rgba(255,255,255,0.18) inset, 0 -14px 22px -14px rgba(0,0,0,.45) inset, 0 10px 24px -14px rgba(56,56,61,0.55); --glass-ink-2:#d8d8dd; --glass-ink-3:#bcbcc4; --dots: radial-gradient(circle, rgba(242,242,244,0.1) 1.1px, transparent 1.2px); --sh: 0 1px 2px rgba(0,0,0,.4), 0 10px 28px -16px rgba(0,0,0,.6); --sh-lift: 0 2px 4px rgba(0,0,0,.45), 0 18px 40px -20px rgba(0,0,0,.7); --sh-over: 0 24px 60px -20px rgba(0,0,0,.75), 0 4px 12px rgba(0,0,0,.4); --ink-on-green:#e0e0e6; --bgrp-bg: rgba(255,255,255,.04); --ph-stripe:#34343a; --ph-base:#232327; --ph-drop:#2b2b30; --ph-ink:rgba(255,255,255,.82); --ph-cap:#ffffff; --ph-sub:rgba(255,255,255,.82); --gl-act-rim: rgba(216,216,221,0.5); --gl-act-rim-2: rgba(56,56,61,0.35); /* 🔴 В ТЁМНОМ графите кнопка КРАСНАЯ, а чёрный даёт бумага (22.09.2026, «нужен чёрный белый и красный»). Чёрной кнопке здесь взяться неоткуда: бумага #141416 сама почти чёрная, и тёмный тон с ней сливается — тёмные оттенки красного дают к бумаге 1,4–2,2 при норме 3. Поэтому перелив идёт по ЯРКИМ красным, а чёрный и белый в композиции — это фон и надпись. История места: сначала тут стояли синий/фиолетовый/петроль (Михаил по скриншоту: «почему кнопка стала синей»), потом строго серые. Серые норму держали, но размах светлоты у них всего 20 — «не выразительно». 🔴 Границы узкие с обеих сторон: темнее #ca0000 кнопка теряет бумагу (3,08 — впритык к 3), светлее #e01b3c теряет надпись (4,78 → у #e81b42 ровно 4,50). Двигать только с пересчётом обеих норм. */ /* 🔴 Ночью кнопка ТАКАЯ ЖЕ чёрная, как днём (просьба Михаила: «в тёмной теме перелив должен быть такой же, как в светлой»). Тона чуть светлее дневных — бумага здесь #141416, и совсем чёрная кнопка потерялась бы. 🔴 Но и этого мало: заливка отрывается от бумаги всего на ~1,6, поэтому видимость кнопки держит ОБВОДКА — `--pay-rim` поднят до .55, её контраст к бумаге около 6. Это законная замена: норму 3 для элемента управления может держать граница, а не заливка. Ослабишь обводку — кнопка пропадёт на фоне, и никакой подбор заливки этого не вернёт. */ --pay-1:#2a1a1f; --pay-2:#1e1e23; --pay-3:#26262c; /* 🔴 Серый, а не красный (проба по просьбе Михаила 22.09: «в графите вместо красного серый давай попробуем»). Светлее #757579 брать нельзя — на нём белая надпись даёт ровно 4,5, а выше уже ниже нормы; взят #6f6f74 (5,00), чтобы остался запас на сглаживание краёв зоны. */ --pay-spark-c:#6f6f74; --pay-spark-w:rgba(255,255,255,.12); /* Ручки шейдера кнопки (public/js/paybg.js), крутятся отдельно от тонов: `--pay-hot` — доля цветного. 1 как в оригинале; .3 — две просьбы Михаила подряд: «красного на 60% меньше», затем «чуть меньше красного и чуть больше чёрного». `--pay-gleam` — белые прожилки по чёрному. 🔴 Потолок .35 зашит в скрипте: на .40 худшая точка даёт надпись 4,42 при норме 4,5. На .30 — 6,11. Белое кладётся только на тёмное, на красном гасится, иначе выходит розовый. */ --pay-hot:.12; --pay-gleam:1; /* Только эта тема просит живой шейдер; остальные идут на CSS-переливе. */ --pay-shader:block; /* Графит живёт шейдером: «чернила» держит фолбэком, бегущий контур ему не нужен. */ --pay-ink:var(--ink-layers); --pay-ring:none; --pay-rim:rgba(255,255,255,.55); --dm-fab:#5a5a60; --dm-fab-sh:rgba(56,56,61,0.55); --dmx-card:#1e1e21; --dmx-ink:#f2f2f4; --dmx-ink-2:#9d9da4; --dmx-line:#313135; --dmx-her:#303036; --dmx-field:#1c1c1f; --dmx-ava-ink:#e0e0e6; --dm-me: linear-gradient(180deg, rgba(90,90,96,0.92), rgba(56,56,61,0.95)); --chip-soft: linear-gradient(180deg, rgba(60,60,66,0.72), rgba(46,46,52,0.8)); --chip-soft-ink: #d8d8dd; --chip-soft-line: rgba(255,255,255,0.16); --veil: rgba(56,56,61,0.56); --dm-dot: #e0e0e6; --dmx-veil: rgba(56,56,61,0.16); --dmx-veil-s: rgba(56,56,61,0.52); } /* ── Нижние панели ────────────────────────────────────────────────────────── Раньше эти правила лежали в baza.css и salon.css — двумя одинаковыми копиями, то есть ровно той развилкой, на которой близнецы и расходятся. Переехали сюда целиком, вместе с перекраской: тема — одно место. 🔴 ПЛОТНОСТЬ У КАЖДОЙ ТЕМЫ СВОЯ, И ЭТО НЕ ВКУСОВЩИНА. Панель прозрачная, значит её настоящий цвет — смесь с бумагой под ней. При прежних .34 на всех белые подписи разделов давали контраст 1,7–2,0 (замер 22.09.2026 на живом приложении, тема «песок» — 1,72): навигация читалась хуже плейсхолдера, и заметно это только БЕЗ обоев — поверх фотографии плёнка плотнее и темнее, поэтому у Михаила, у которого обои включены, всё выглядело нормально. Теперь плотность каждой темы — наименьшая, при которой белая подпись держит 4,5; считается генератором от её же тёмного тона, вручную не правится. ⚠️ У темы «Без цвета» тот же замер даёт 2,2, но её плотность (.30) — отдельное решение Михаила от 15.09.2026, и молча менять её здесь нельзя. Текст держим светлым нейтральным: системный `--glass-ink-2` тонирован под тему и на чужой панели выглядит грязным. */ @media (max-width: 900px) { body[data-bar] .tabbar, body[data-bar] .tabmore { border-color: rgba(255,255,255,.24); } body[data-bar] .tabitem, body[data-bar] .tabmore { color: rgba(255,255,255,.82); } body[data-bar] .tabitem[aria-current="page"] { color: #fff; } body[data-bar="green"] .tabbar, body[data-bar="green"] .tabmore { background: rgba(31,65,19,0.76); } body[data-bar="rose"] .tabbar, body[data-bar="rose"] .tabmore { background: rgba(103,31,59,0.75); } body[data-bar="plum"] .tabbar, body[data-bar="plum"] .tabmore { background: rgba(83,34,112,0.75); } body[data-bar="ocean"] .tabbar, body[data-bar="ocean"] .tabmore { background: rgba(25,61,83,0.77); } body[data-bar="sand"] .tabbar, body[data-bar="sand"] .tabmore { background: rgba(76,53,23,0.77); } body[data-bar="ink"] .tabbar, body[data-bar="ink"] .tabmore { background: rgba(9,9,10,0.62); } } /* Поверх обоев выбранный цвет плотнее: под панелью лежит чужое фото, и подписи разделов должны читаться на любом — светлом, пёстром, контрастном. Правило вне медиазапроса и со своей специфичностью, как было в baza.css. */ body.has-wall[data-bar="green"] .tabbar, body.has-wall[data-bar="green"] .tabmore { background: rgba(31,65,19,0.9); } body.has-wall[data-bar="rose"] .tabbar, body.has-wall[data-bar="rose"] .tabmore { background: rgba(103,31,59,0.89); } body.has-wall[data-bar="plum"] .tabbar, body.has-wall[data-bar="plum"] .tabmore { background: rgba(83,34,112,0.89); } body.has-wall[data-bar="ocean"] .tabbar, body.has-wall[data-bar="ocean"] .tabmore { background: rgba(25,61,83,0.9); } body.has-wall[data-bar="sand"] .tabbar, body.has-wall[data-bar="sand"] .tabmore { background: rgba(76,53,23,0.9); } body.has-wall[data-bar="ink"] .tabbar, body.has-wall[data-bar="ink"] .tabmore { background: rgba(9,9,10,0.76); } /* ── Графит: стекло без цвета ─────────────────────────────────────────────── 🔴 В остальных темах насыщенность в `backdrop-filter` держит стекло живым. В графите она вытягивала цвет из ТОГО, ЧТО ПОД стеклом: серая карточка поверх розового фото снова становилась розовой, и «чёрной темы» не получалось. Насыщенность гасим — только в этой теме. */ body[data-bar="ink"] .gl, body[data-bar="ink"] .app .card:not(.card--flat):not(.card--quiet), body[data-bar="ink"] .app .list, body[data-bar="ink"] .app .work, body[data-bar="ink"] .app .plan, body[data-bar="ink"] .app .tl, body[data-bar="ink"] .sheet, body[data-bar="ink"] .dialog, body[data-bar="ink"] .menu, body[data-bar="ink"] .popover { --gl-sat: 100%; } body[data-bar="ink"] { --glass-blur: blur(20px) saturate(1); }