/* ============================================================================ Relevanto — единая система кнопок, снятая с linear.app рендером. ---------------------------------------------------------------------------- ЗАЧЕМ ОТДЕЛЬНЫМ ФАЙЛОМ, А НЕ ПРАВКОЙ 13 ИСХОДНИКОВ Кнопки в сервисе разошлись на 14 семейств (.btn, .lk-tool .button, .bill-btn, .cc-btn, .gm-vbtn, .tz-export__btn, .sc-export__btn, .op-export__btn, .tf-btn, .tr-btn, .rv-cl__btn, .tab-button, .thm, *-fs-toggle; с 03.09.2026 ещё .ml-toggle, .ml-copy, .ml-tb-add, .ml-st-head__*, .wl-btn, .tz-copy-inline) с четырьмя радиусами (6/8/9/12px) и тремя главными цветами. Один слой поверх — единственный способ держать их в одном виде дальше: новая кнопка попадает в систему, дописав свой селектор сюда, а не скопировав чужие значения в свой файл. ⚠ ПОЧЕМУ У КАЖДОГО ПРАВИЛА ПРЕФИКС html CSS инструментов подключается НЕ в , а внутри страницы, то есть ПОСЛЕ этого файла, и часть селекторов там с id: `#tz-calc .tz-export__btn` (1,1,0), а в светлой теме `[data-theme="light"] #semantic-calc .tabs .tab-button` (1,3,0). Выиграть порядком загрузки нельзя — только специфичностью. `html` добавляет ровно один элемент и ставит наши правила на (1,3,1) там, где нужно. Ровно один: перестрелять авторские стили сильнее, чем требуется, — уже была ошибка 13.08 на полях ввода, когда своя редакция залила прозрачные поля. ИСТОЧНИК ЗНАЧЕНИЙ — не на глаз, а computed-стили linear.app (13.08.2026): invert bg #E5E5E6 → hover #FFFFFF, ink #08090A secondary bg rgba(255,255,255,.05) → hover #191A1B, ink #F7F8F8 форма border-radius 9999px (пилюля) — у нас заменена, см. ниже размеры 32 / 44px высоты, шрифт 13 / 16px, вес 510, padding 0 12 / 0 20 переход .16s cubic-bezier(.25,.46,.45,.94) тени четырёхслойные, разные у invert и secondary РЕШЕНИЕ ВЛАДЕЛЬЦА 15.08.2026: главная кнопка — invert, как у референса. Это отмена решения от 13.08, когда была выбрана indigo #5E6AD2. Причина отмены: рядом с референсом расходился ровно один параметр — заливка, и из-за неё пара кнопок читалась как чужая. Индиго остаётся в теме на ссылках, чипах, подсветке и кольце фокуса, то есть цвет бренда со страницы не ушёл — ушла цветная кнопка. Форма — пилюля везде, на лендинге и в кабинете одинаково. ========================================================================== */ html{ /* Форма — прямоугольник со скруглением 8px, как у полей и карточек рядом (владелец, 06.09.2026). Отмена пилюли от 15.08.2026: дизайнер на ревью показал, что скругления в сервисе везде мелкие, и кнопки-пилюли были единственным, что выбивалось из ряда. Радиус берут ВСЕ кнопки сервиса через эту переменную — правка одной строки меняет форму везде. */ --rvb-r:8px; --rvb-ease:.16s cubic-bezier(.25,.46,.45,.94); /* Главная — invert: не свой цвет, а обратный фону страницы. Отсюда и имя варианта у референса. В тёмной теме это светлая кнопка с тёмной надписью, в светлой — наоборот; правило вёрстки одно, меняются токены. */ --rvb-pri-bg:#E5E5E6; /* Заливка главной кнопки. В светлой теме макет (Frame 36) даёт вертикальный градиент от #666 к чёрному и внутренний блик сверху — плоская заливка рядом с ним читается как выключенная кнопка. */ --rvb-pri-fill:var(--rvb-pri-bg); --rvb-pri-gloss:none; --rvb-pri-bg-h:#FFFFFF; --rvb-pri-ink:#08090A; /* Тень снята с invert-кнопки Linear: пять слоёв, каждый почти прозрачен. Вместе дают не «свечение», а ощущение, что кнопка лежит НА поверхности. */ --rvb-pri-sh:0 8px 2px rgba(0,0,0,0), 0 5px 2px rgba(0,0,0,.01), 0 3px 2px rgba(0,0,0,.04), 0 1px 1px rgba(0,0,0,.07), 0 0 1px rgba(0,0,0,.08); /* Вторичная. Фон прозрачный, форму держит одна тонкая рамка — так же, как у «Перейти на платный» в боковом меню (макет, Frame 36). Заливки нет намеренно: рядом с чёрной главной кнопкой серая плашка читалась как вторая главная (владелец, 06.09.2026). */ --rvb-sec-bg:transparent; --rvb-sec-bg-h:rgba(255,255,255,.06); --rvb-sec-ink:#F7F8F8; --rvb-sec-sh:inset 0 0 0 1px rgba(255,255,255,.14); --rvb-ghost-ink:#8A8F98; --rvb-danger-bg:#D6455B; --rvb-danger-bg-h:#E15468; --rvb-focus:#5E6AD2; } /* Светлая тема: меняются только токены, ни одно правило вёрстки ниже не дублируется — тот же приём, что уже принят в app.css. */ html[data-theme="light"]{ /* Invert наоборот: на белой странице главная кнопка почти чёрная. */ --rvb-pri-bg:#08090A; --rvb-pri-bg-h:#282A30; --rvb-pri-ink:#FFFFFF; --rvb-pri-fill:linear-gradient(180deg,#666666 0%,#000000 100%); --rvb-pri-gloss:inset 0 2px 0 rgba(255,255,255,.2); /* Прозрачная с рамкой #D9D9D9 — цвет рамок карточек и полей в макете. */ --rvb-sec-bg:transparent; --rvb-sec-bg-h:rgba(0,0,0,.04); --rvb-sec-ink:#000000; --rvb-sec-sh:inset 0 0 0 1px #D9D9D9, 0 1px 0 rgba(0,0,0,.05); --rvb-ghost-ink:#6B7078; --rvb-danger-bg:#C0392F; --rvb-danger-bg-h:#D6455B; } /* --------------------------------------------------------------------------- 1. ОБЩАЯ ГЕОМЕТРИЯ — всё, что не зависит от варианта и от семейства. ⚠ min-height, а не height: семейства разнородны, внутри встречаются иконка со строкой в две строки и