/* ═══════════════════════════════════════════════════════════════════════════ SensFlow — ПАЛІТРА. ЄДИНИЙ ПИСАР КОЛЬОРУ НА ВЕСЬ ПРОДУКТ. Зміна 184, 15.08.2026. НАВІЩО ЦЕЙ ФАЙЛ ІСНУЄ. До нього кольори жили в пʼятьох місцях: `index.html`, `taskdesk.css`, `setup.html`, `telegram.html`, `genkey.html` — пʼять словників однієї правди. Поки тема була одна, це просто муляло. Щойно тем стало дві, кожен зайвий словник = екран, який лишиться темним, коли решта побіліє. ПРАВИЛО, ЯКЕ ТУТ ТРИМАЄТЬСЯ: ⛒ ЖОДНОГО кольору за межами цього файла. Ні в розмітці, ні в скрипті, ні в `style="..."`. Потрібен новий відтінок — він народжується ТУТ, під іменем, і лише тоді використовується як `var(--імʼя)`. ⛒ Сторож `theme_test.py` (набір `selfcheck`) падає, щойно в будь-якому файлі UI зʼявився колір повз цей файл. Без сторожа тема розлізеться за два тижні — це вже перевірено на власній шкурі. ЯК ЧИТАТИ. Кожне імʼя означає РОЛЬ («полотно картки», «текст помилки»), а не колір («синій»). Тому світла тема — це ІНШІ ЗНАЧЕННЯ тих самих імен, а не переписування екранів. ⚠ КОНТРАСТ. Норма WCAG AA — 4.5:1 для тексту. Він рахується ОКРЕМО для кожної теми: пара, що пройшла на темному, на світлому може провалитись. Значення нижче перевірені рахунком; чек тримає їх від сповзання. ═══════════════════════════════════════════════════════════════════════════ */ /* ───────────────────────────────────────────────────────────────────────── ТЕМНА ТЕМА — значення за замовчуванням. Стоїть у :root, щоб сторінка, яка ще не встигла прочитати вибір людини, малювалась звичним темним, а не білим спалахом в очі. ───────────────────────────────────────────────────────────────────────── */ :root{ /* ── Полотна й межі ── */ --bg:#0d1117; /* тло вікна */ --panel:#161b22; /* бічна панель, модальні вікна */ --panel2:#1c2230; /* вкладені блоки всередині панелі */ --line:#2a3340; /* усі звичайні межі */ --txt:#e6edf3; /* основний текст */ --txt-soft:#cdd6e0; /* другорядний текст, ще не «приглушений» */ --muted:#8b97a6; /* приглушений текст, підписи полів */ /* ── Смисли ── */ --accent:#4f9bff; /* дія, посилання, активний стан */ --accent2:#7c5cff; /* друга барва градієнтів і проєктів */ --ok:#3fb950; /* успіх */ --warn:#d29922; /* попередження */ --err:#f85149; /* помилка, руйнівна дія */ --bad:#e06c75; /* текст помилки всередині картки */ --on-accent:#ffffff; /* текст ПО кольоровій заливці */ /* Task Desk кладе на синю кнопку ТЕМНИЙ текст — і має рацію: на темній темі наш синій світлий, білим по ньому читати важко. На світлій темі синій стає глибоким, і темний текст на ньому вже не читається. Тому це окреме імʼя, а не «той самий білий». */ --on-accent-ink:#08111f; --on-warn:#1a1300; /* текст по жовтій заливці */ /* Напівпрозорий білий — лежить ПО кольоровій заливці, тому однаковий в обох темах: підкладка під ним завжди насичена. Цифра в імені — прозорість. */ --on-accent-a18:rgba(255,255,255,.18); --on-accent-a20:rgba(255,255,255,.20); --on-accent-a25:rgba(255,255,255,.25); --on-accent-a28:rgba(255,255,255,.28); --on-accent-a32:rgba(255,255,255,.32); /* Логотип. Його барви НЕ залежать від теми — знак фірми однаковий на будь-якому тлі. Але імена він має тут, як і все інше: інакше сторож справедливо назве їх «кольором повз палітру». */ /* ⭐ 24.08.2026. РОЛЬ, А НЕ КОЛІР: «текст мітки, що це зробив ШІ». Раніше цю мітку малювали барвою градієнтів (--accent2) — і на темних полотнах вона давала 3.66:1 замість 4.5:1, тобто не читалась НІДЕ. Тут фіолет світліший рівно настільки, щоб пройти норму на найтемнішому полотні (--panel2): 4.70:1. Барва градієнтів лишається собою. */ --ai-txt:#9076ff; --logo-1:#ff7a3c; --logo-2:#ffb05a; --logo-3:#1fc4d4; /* ── Картка сутності (словник із C3) ── */ --card-bg:#1b2533; /* полотно картки */ --card-line:#33415a; /* межі всередині картки */ --tl-bg:#161f2b; /* права половина — стрічка подій */ --modal-head-bg:#202b3a; /* шапка модального вікна картки */ --nav-bg:rgba(27,37,51,.94); /* кругла кнопка «наступна картка» */ /* ── Заливки-натяки (той самий колір, ледь видимий) ── */ --tint-accent:rgba(79,155,255,.14); --tint-accent-soft:rgba(79,155,255,.08); --tint-accent-line:rgba(79,155,255,.28); --tint-accent2:rgba(124,92,255,.12); --tint-accent2-line:rgba(124,92,255,.40); --tint-ok:rgba(63,185,80,.16); --tint-warn:rgba(210,153,34,.16); --tint-err:rgba(248,81,73,.14); --tint-err-line:rgba(248,81,73,.45); --tint-muted:rgba(139,151,166,.15); --tint-ok-soft:rgba(63,185,80,.07); --tint-err-soft:rgba(248,81,73,.09); --msg-ok-txt:#bdf3da; /* текст усередині зеленого повідомлення */ --msg-err-txt:#ffc9c9; --tint-amber:rgba(245,180,84,.12); --tint-gold:rgba(201,162,39,.10); --pin-bg:rgba(210,153,34,.10); --pin-line:rgba(210,153,34,.45); /* ── Поля вводу. Окремі імена, бо на темній картці вони БІЛІ навмисне: людина вводить дані в біле поле, як у будь-якій конторській програмі. ── */ --inp-bg:#ffffff; --inp-line:#c9d2dd; --inp-txt:#11161d; /* Допоміжні сторінки (ключі API, Telegram, генератор) історично мають ТЕМНІ поля, а не білі. Перефарбовувати їх зараз я не став: це змінило б звичний вигляд там, де ніхто не просив. Але імʼя вони мають. */ --field-bg:#0b0e13; /* ── Технічні поверхні ── */ --code-bg:#11161d; /* блоки з машинним текстом, плитки метрик */ --scroll-thumb:#3f5170; /* повзунок прокрутки */ --overlay:rgba(5,8,12,.66); /* затемнення під модальним вікном */ --overlay-drop:rgba(18,20,26,.74);/* затемнення під перетягуванням файла */ --drop-box-bg:rgba(0,0,0,.28); /* рамка «кинь файл сюди» */ --shadow-1:0 6px 18px rgba(0,0,0,.45); --shadow-2:-24px 0 60px rgba(0,0,0,.55); --shadow-menu:0 10px 28px rgba(0,0,0,.45); --shadow-modal:0 20px 60px rgba(0,0,0,.5); --shadow-btn:0 4px 12px rgba(0,0,0,.45); --shadow-drop:0 18px 40px -18px rgba(0,0,0,.75); /* ── Окремі барви продукту ── */ --mint:#2fbf84; /* «прихований режим», кнопка оновлення */ --mint2:#3ddc97; --on-mint:#062a1e; --tint-mint:rgba(61,220,151,.25); --on-mint-w1:rgba(6,42,30,.16); --on-mint-w2:rgba(6,42,30,.28); --on-mint-line:rgba(6,42,30,.35); --amber:#f5b454; /* мʼяке попередження, порада мозку */ --amber-txt:#f5d9a6; --gold:#c9a227; /* згода на вихід назовні, прострочення */ --gold2:#e3b341; --cyan:#26d5f2; /* кнопка ключів API */ --on-cyan:#08222a; --violet-soft:#c9a8ff; /* службові гілки «мозку» */ /* ── Дошка угод: колір шапки стадії й тло її стовпця ── */ --board-col-bg:#0c1119; --board-colh-bg:#243044; --board-colh-txt:#eaf1f8; --board-card-bg:#2d3c52; --board-card-line:#45587c; --board-card-hover:#374662; --stg-new-h:#3a4254; --stg-new-b:#272d3a; --stg-talks-h:#1f4e79; --stg-talks-b:#16344f; --stg-pilot-h:#5b3e8e; --stg-pilot-b:#3b2a5c; --stg-deal-h:#8a6d1f; --stg-deal-b:#5a4715; --stg-pay-h:#9a5a1e; --stg-pay-b:#653c14; --stg-active-h:#1f6e4a; --stg-active-b:#164d34; --stg-off-h:#5a4040; --stg-off-b:#3d2c2c; --stg-arch-h:#2a2f38; --stg-arch-b:#202530; /* ── Імена, якими живуть допоміжні сторінки (ключі, Telegram, налаштування). Це НЕ друга палітра — це ті самі ролі під історичними іменами. ── */ --card:var(--panel); --card2:var(--panel2); --bord:var(--line); --mut:var(--muted); --faint:#6b7889; --cy:var(--cyan); --vio:var(--accent2); --grn:var(--mint2); --amb:var(--amber); --red:#ff6b6b; /* ══ ОБОЛОНКА ПЛАТФОРМИ (зміна 468, 04.09.2026) ══════════════════════════ Ролі домашньої сторінки й верхньої смуги. Барви взяті з САЙТУ, щоб вхід у платформу впізнавався як той самий продукт, який людина бачила в мережі. Це НЕ друга палітра: імена живуть тут, як і всі інші. */ --sh-bg:#0a1218; /* полотно входу */ --sh-bg2:#0e1a22; /* друге полотно, під панелями */ --sh-panel:#101f29; /* плитка, панель списку */ --sh-panel2:#13252f; /* вкладене в плитку */ --sh-ink:#eaf2f4; /* основний текст оболонки */ --sh-muted:#9db1bc; /* пояснення під заголовком */ --sh-muted2:#7b909d; /* найдрібніший підпис; 5.05:1 на --sh-panel */ --sh-line:rgba(255,255,255,.09); --sh-line2:rgba(255,255,255,.05); --sh-glass:rgba(255,255,255,.035); --sh-top:rgba(10,18,24,.82); /* верхня смуга поверх вмісту */ --sh-teal:#1fc4d4; /* дія, живий стан */ --sh-teal-deep:#0e7c86; --sh-on-teal:#04191e; /* текст ПО бірюзовій заливці; 8.52:1 */ --sh-gold:#e8b964; /* замок на непридбаному */ --sh-ember:#ff7a3c; /* прострочене */ --sh-tint-teal:rgba(31,196,212,.10); --sh-line-teal:rgba(31,196,212,.28); --sh-hover-teal:rgba(31,196,212,.40); --sh-tint-gold:rgba(232,185,100,.10); --sh-line-gold:rgba(232,185,100,.34); --sh-halo-teal:rgba(31,196,212,.16); --sh-halo-gold:rgba(232,185,100,.10); --sh-ring-teal:rgba(31,196,212,.16); --sh-glow:0 0 0 1px rgba(31,196,212,.18), 0 18px 50px -18px rgba(31,196,212,.28); --sh-hover-row:rgba(255,255,255,.02); } /* ───────────────────────────────────────────────────────────────────────── СВІТЛА ТЕМА — «ОФІСНА». Гама з робочої пошти Андрія (вибір 15.08.2026): мʼяко-блакитне тло вікна, білі полотна, конторський синій. Причина існування — не смак: «від темних кольорів після довгої роботи очі болять і настрій гіршає». Це умова праці, і вона ж аргумент клієнту. ───────────────────────────────────────────────────────────────────────── */ html[data-theme="light"]{ --bg:#e7edf7; /* 15.08: на тон темніше за словом Андрія — межа, за якою підпис і синій ще тримають 4.5:1 */ --panel:#ffffff; --panel2:#f3f7fd; --line:#dce4ef; --txt:#1b2430; /* 15.6:1 на білому */ --txt-soft:#33415a; --muted:#5b6b7f; /* 5.4:1 на білому, 5.1:1 на --panel2 */ --accent:#0f6cbd; /* 5.4:1 на білому; білий на ньому — 5.4:1 */ --accent2:#2b5fd9; --ok:#107c41; --warn:#8a6100; --err:#c4314b; --bad:#b3261e; --on-accent:#ffffff; --on-accent-ink:#ffffff; /* на глибокому синьому темний текст не читається */ --on-warn:#ffffff; --card-bg:#ffffff; --card-line:#e3e9f2; --tl-bg:#f7fafe; --modal-head-bg:#f3f7fd; --nav-bg:rgba(255,255,255,.94); --tint-accent:rgba(15,108,189,.10); --tint-accent-soft:rgba(15,108,189,.06); --tint-accent-line:rgba(15,108,189,.30); --tint-accent2:rgba(43,95,217,.10); --tint-accent2-line:rgba(43,95,217,.35); --tint-ok:rgba(16,124,65,.12); --tint-warn:rgba(138,97,0,.12); --tint-err:rgba(196,49,75,.10); --tint-err-line:rgba(196,49,75,.40); --tint-muted:rgba(91,107,127,.14); --tint-ok-soft:rgba(16,124,65,.08); --tint-err-soft:rgba(196,49,75,.08); --msg-ok-txt:#0e6b39; --msg-err-txt:#a32130; --tint-amber:rgba(180,83,9,.12); --tint-gold:rgba(138,97,0,.10); --pin-bg:rgba(138,97,0,.08); --pin-line:rgba(138,97,0,.35); --inp-bg:#ffffff; --inp-line:#c6d2e2; --inp-txt:#1b2430; --field-bg:#ffffff; --code-bg:#f3f7fd; --scroll-thumb:#c6d2e2; --overlay:rgba(16,36,66,.35); --overlay-drop:rgba(16,36,66,.42); --drop-box-bg:rgba(16,36,66,.28); --shadow-1:0 2px 8px rgba(16,36,66,.10); --shadow-2:-24px 0 60px rgba(16,36,66,.14); --shadow-menu:0 8px 24px rgba(16,36,66,.14); --shadow-modal:0 12px 40px rgba(16,36,66,.18); --shadow-btn:0 2px 8px rgba(16,36,66,.16); --shadow-drop:0 14px 34px -16px rgba(16,36,66,.32); /* Світлій темі світлішати нікуди — тут глибокий фіолет, той самий, яким уже мальовані фіолетові підписи: 6.9:1 на білому. */ --ai-txt:#6d3fd1; --mint:#107c41; --mint2:#0e6b39; --on-mint:#ffffff; --tint-mint:rgba(16,124,65,.18); --on-mint-w1:rgba(255,255,255,.20); --on-mint-w2:rgba(255,255,255,.32); --on-mint-line:rgba(255,255,255,.45); --amber:#b45309; --amber-txt:#7c3d06; --gold:#8a6100; --gold2:#8a6100; --cyan:#0e7c97; --on-cyan:#ffffff; --violet-soft:#6d3fd1; --board-col-bg:#e7edf7; /* 🩸 ЗНАЙДЕНО ЖИВИМ ОКОМ 15.08: шапку СТАДІЇ, якої немає в переліку («Збір даних», «Кваліфікація»), малює цей запасний колір, а текст на ній ЗАВЖДИ білий (його ставить скрипт). Блідо-блакитна підкладка давала білим по блакитному — назву стадії не було видно взагалі. Тому запасний колір мусить бути НАСИЧЕНИМ, як і решта шапок. */ --board-colh-bg:#4a5568; --board-colh-txt:#0f4c81; --board-card-bg:#ffffff; --board-card-line:#dce4ef; --board-card-hover:#f3f7fd; /* Шапки стадій лишаються насиченими — на них білий текст, і саме колір робить дошку читабельною з відстані. Тло стовпця стає блідим відтінком тієї самої барви. */ --stg-new-h:#4a5568; --stg-new-b:#eef1f6; --stg-talks-h:#1f4e79; --stg-talks-b:#e3eefa; --stg-pilot-h:#5b3e8e; --stg-pilot-b:#efe9f9; --stg-deal-h:#8a6d1f; --stg-deal-b:#f7f0dc; --stg-pay-h:#9a5a1e; --stg-pay-b:#fbede0; --stg-active-h:#1f6e4a; --stg-active-b:#e2f3ea; --stg-off-h:#6b4a4a; --stg-off-b:#f5eded; --stg-arch-h:#4b5563; --stg-arch-b:#f1f3f6; --faint:#7b8798; --red:#c4314b; /* ══ ОБОЛОНКА ПЛАТФОРМИ — СВІТЛА ТЕМА (зміна 468) ════════════════════════ Ті самі ролі іншими значеннями. Світлу тему Андрій просив сам: від темного після довгої роботи болять очі. Тому вхід у платформу мусить мати світлий вигляд із першого дня, а не «колись потім». */ --sh-bg:#eef3f8; --sh-bg2:#ffffff; --sh-panel:#ffffff; --sh-panel2:#f4f8fc; --sh-ink:#12222b; --sh-muted:#4d6473; --sh-muted2:#566b79; /* 4.98:1 на --sh-bg */ --sh-line:#dce4ef; --sh-line2:#e9eef5; --sh-glass:rgba(15,42,54,.03); --sh-top:rgba(238,243,248,.90); --sh-teal:#0b6b74; /* як ТЕКСТ: 5.58:1 на --sh-bg */ --sh-teal-deep:#0a5f67; --sh-on-teal:#ffffff; /* білий на глибокій бірюзі = 7.38:1 */ --sh-gold:#7a5600; /* 5.96:1 на --sh-bg */ --sh-ember:#b4400f; --sh-tint-teal:rgba(11,107,116,.08); --sh-line-teal:rgba(11,107,116,.26); --sh-hover-teal:rgba(11,107,116,.42); --sh-tint-gold:rgba(122,86,0,.08); --sh-line-gold:rgba(122,86,0,.30); --sh-halo-teal:rgba(11,107,116,.10); --sh-halo-gold:rgba(122,86,0,.08); --sh-ring-teal:rgba(11,107,116,.12); --sh-glow:0 0 0 1px rgba(11,107,116,.16), 0 14px 34px -16px rgba(16,36,66,.26); --sh-hover-row:rgba(16,36,66,.03); } /* Плавний перехід між темами — але тільки для полотен і меж. Текст не анімуємо: моргання літер при перемиканні дратує більше, ніж тішить плавність. Хто просив систему прибрати рух — тому не рухаємо. */ @media (prefers-reduced-motion:no-preference){ body,.side,.card,.item,.modal,.panel{transition:background-color .18s ease,border-color .18s ease} }