/*
 * Оформление Learm — общее для приложения тренера и кабинета клиента.
 *
 * Раньше кабинет имел собственный набор стилей: другая палитра, другой
 * кегль, другие кнопки. Это было заметно с порога — приложение синее,
 * кабинет зелёный, — и чинилось бы бесконечно: правка цвета в одном
 * месте до другого не доходила.
 *
 * Теперь файл один. Часть правил кабинету не нужна вовсе — главный экран,
 * портфель, годовая сетка, — но лишнее правило ничего не стоит:
 * браузер не применяет то, для чего на странице нет классов. Разбирать
 * полторы тысячи строк на «общее» и «своё» дороже, чем возить лишнее,
 * и куда легче ошибиться.
 *
 * Файл отдаётся с запретом на хранение, как и сама страница: иначе
 * правка цвета неделями не доходила бы до телефона.
 */

:root{
  /* Правило палитры: первый цвет — данные и действия, второй — только
     тревога. Пока всё в порядке, экран спокойный; нули и просрочки видно
     с порога именно потому, что тревожного цвета мало.
     По умолчанию небесно-синий и коралловый, меняется в настройках. */
  --ink:#0E1013; --card:#151A20; --line:#1F242A; --line2:#2A3038;
  --text:#EDEFF1; --dim:#9AA3AC; --faint:#79818A;
  --go:#4DA3FF; --warn:#4DA3FF; --debt:#FB7185;
  --alarm:#FB7185;
  --on-accent:#0E1013;   /* текст поверх акцента: он светлый */
  --glow:#3AE0BE;        /* только для главного экрана: он живёт своей картинкой */
  /* Три вида денег. Цвета постоянные и настройками не перекрашиваются:
     акцент можно поставить какой угодно, а зелёное «пришло», красное
     «ушло» и оранжевое «вложено» должны значить одно и то же всегда. */
  --income:#34D399; --spend:#FB7185; --invest:#F59E0B;
  /* Строки списка клиентов, тёмные ячейки по краям, нижняя полоса.
     Переменными с 12 сентября 2026: оформления ниже их подменяют. */
  --row:#1A222C; --row2:#1E212A; --cell:#0A0E13; --bar:rgba(14,16,19,.82);
  --r:14px;
  /* Отступ под вырез камеры и строку состояния — то, что говорит сам
     телефон. Своей подстановки здесь больше нет: она стояла на случай,
     когда телефон отвечает нулём на полноэкранной странице, но такого
     ни разу не случилось. «Верх экрана закрыт» оказался про другое —
     раздел, открытый с главного экрана, терял шапку. */
  --safetop:env(safe-area-inset-top);
  --mono:"DejaVu Sans Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --ui:Poppins,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
/* То же, что и в шапке страницы, но для оформления: браузер должен
   знать, что тёмное здесь задумано, а не случайно. Иначе он берётся
   перекрашивать сам — и портит рисунки, а не только фон. */
:root{color-scheme:dark}
/* Три оформления. Тёмное — :root как есть. Графит светлее и мягче,
   без чёрного; светлое — белые карточки на серо-голубом. Меняются
   только цвета поверхностей и текста: акцент, тревога и три цвета
   денег общие для всех. Выбирается в Настройках → Аккаунт, живёт в
   памяти телефона (`lam_theme`). */
html[data-theme="light"]{color-scheme:light;
  --ink:#F3F5F8; --card:#FFFFFF; --line:#E2E6EB; --line2:#D0D6DD;
  --text:#151A20; --dim:#5D6874; --faint:#7C8793;
  --row:#FFFFFF; --row2:#FFF6E8; --cell:#EAEEF2; --bar:rgba(255,255,255,.92)}
/* Третье — контрастное, а не «ещё одно белое»: чёрный текст на
   белом, границы заметно темнее, ячейки по краям строки серые.
   Прежнее «белое» отличалось от светлого только тем, что фон и
   карточка поменялись местами, — Артём сказал 12 сентября 2026, что
   это одно и то же, и был прав. Смысл у нового свой: читается на
   солнце и в зале, где экран бликует. */
html[data-theme="white"]{color-scheme:light;
  --ink:#FFFFFF; --card:#FFFFFF; --line:#B9C1CA; --line2:#B9C1CA;
  --text:#000000; --dim:#3C444C; --faint:#5A636C;
  --row:#FFFFFF; --row2:#FFF3DA; --cell:#E8ECF1; --bar:#FFFFFF}
/* Заливки нет и здесь: цвет только на числе (24 сентября 2026).
   Тон взят темнее тёмной темы — на белом светлый жёлтый не читается. */
html[data-theme="white"] .crow.low .rest{color:#7A4B00}
html[data-theme="white"] .crow.out .rest{color:#A3193A}
html[data-theme="light"] .whodot i{color:var(--text)}
html[data-theme="light"] .crow.low .rest{color:#9A6200}
html[data-theme="light"] .crow.out .rest{color:#C0304A}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{background:var(--ink);color:var(--text);font:15px/1.45 var(--ui);
     overscroll-behavior-y:none}
button,input,select,textarea{font:inherit;color:inherit}
button{border:none;background:none;cursor:pointer}

/* ---------- каркас ---------- */
/* Оболочка прибита к окну (22 сентября 2026), как и главный экран:
   с `height:100dvh` на телефоне с ярлыка она выходила чуть выше
   видимого, и там, где в самом разделе листать нечего («Сообщения»,
   конец недели в «Делах»), свайп доставался всей странице — справа
   вставал ползунок и экран съезжал. В «Заметках» этого не видели
   только потому, что длинный список забирал свайп себе целиком. */
#shell{display:flex;flex-direction:column;position:fixed;inset:0}
/* Своё фото тренера за списком клиентов (14 сентября 2026). Притемнено
   цветом самого оформления: в светлом притемнение светлое, иначе
   строки списка стояли бы на чёрном пятне. Фото ставит `openScreen`
   переменной `--photo`, чтобы градиент и снимок жили одним правилом. */
#shell.photo{background-color:var(--ink);
  background-image:linear-gradient(color-mix(in srgb,var(--ink) 70%,transparent),
    color-mix(in srgb,var(--ink) 70%,transparent)),var(--photo);
  background-size:cover;background-position:center}
/* Шапка приклеена к верху, поэтому отступ под вырез камеры нужен ей,
   а не содержимому: без него заголовок и всё под ним прижимались
   к самому краю экрана. */
/* Не sticky, а fixed: приклеенная шапка на некоторых телефонах уезжала
   вверх при прокрутке, и вкладки под ней оказывались у самого края. */
header{position:fixed;top:0;left:0;right:0;z-index:20;
  background:rgba(16,24,32,.94);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
  padding:16px 16px 13px;display:flex;align-items:baseline;gap:12px}
@supports(padding:max(0px)){
  header{padding-top:max(16px,calc(var(--safetop) + 12px))}}
header h1{margin:0;font:700 15px/1 var(--ui);letter-spacing:.2em;
  text-transform:uppercase}
header .meta{margin-left:auto;font:600 13px/1 var(--mono);color:var(--dim);
  letter-spacing:.04em}
/* Главный экран: ни шапки, ни отступа — картинка во весь экран. */
#shell.full header{display:none}
#shell.full main{padding:0}

/* Разделы, которые называют себя сами: шапки нет, а отступ нужен —
   иначе название уезжает под часы. Именно это и видела Лена.

   Величину задаёт телефон, а не я. Сначала здесь стоял минимум в 24
   точки — и он оказался лишним: у телефона с большим вырезом
   безопасная зона и так велика, а у телефона почти без выреза
   заголовок просто съезжал вниз. Ровно это и вышло: у Лены встало как
   надо, у Артёма опустилось.

   Теперь минимум маленький — только чтобы строка не липла к самому
   краю на экранах, где безопасной зоны нет вовсе. Остальное решает
   сам телефон, и подстраиваться друг под друга не приходится. */
#shell.bare header{display:none}
#shell.bare main{padding-top:10px}
@supports(padding:max(0px)){
  #shell.bare main{padding-top:max(10px,calc(var(--safetop) + 6px))}}
/* Внизу свободно под плавающую кнопку возврата: без запаса она
   налезала бы на последние строки списка.

   Боковой отступ был 22 и стал 14. Число не менялось с самого начала,
   но раньше его держала шапка: полоса во всю ширину шла от края до
   края, и глазу было от чего отсчитывать. Разделы назвали себя сами,
   шапка ушла, и осталась пустая рамка в 22 точки с каждой стороны —
   на экране в 360 точек это восьмая часть ширины впустую. */
main{flex:1;min-height:0;overflow-y:auto;padding:76px 14px 116px;
  -webkit-overflow-scrolling:touch;
  /* Свайп остаётся внутри раздела и не уходит странице; полосы нет
     ни у кого — одинаково во всех разделах, как в «Заметках». */
  overscroll-behavior-y:contain;scrollbar-width:none}
main::-webkit-scrollbar{display:none;width:0}
/* Снизу у разделов запас не двойной (22 сентября 2026, снимки Артёма).
   Место под нижней полосой каждый раздел оставляет сам — пустой
   строкой в 96 точек перед полосой, — а 116 точек отступа `main` жили
   с тех времён, когда внизу стояла панель вкладок. Вместе выходило
   больше двухсот точек пустоты под последней строкой. */
#shell.bare main{padding-bottom:16px}
@supports(padding:max(0px)){
  #shell.bare main{padding-bottom:max(16px,calc(env(safe-area-inset-bottom) + 12px))}}
@supports(padding:max(0px)){
  main{padding-top:max(76px,calc(var(--safetop) + 68px));
       padding-left:max(14px,calc(env(safe-area-inset-left) + 14px));
       padding-right:max(14px,calc(env(safe-area-inset-right) + 14px));
       padding-bottom:max(116px,calc(env(safe-area-inset-bottom) + 110px))}
}
nav{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;
  grid-template-columns:repeat(2,1fr);background:rgba(16,24,32,.96);
  backdrop-filter:blur(10px);border-top:1px solid var(--line);
  padding:8px 0 max(8px,env(safe-area-inset-bottom))}
nav button{padding:6px 0;font-size:11px;letter-spacing:.03em;color:var(--faint);
  display:flex;flex-direction:column;align-items:center;gap:4px}
nav button .g{font-size:19px;line-height:1}
nav button.on{color:var(--text)}

/* ---------- элементы ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:14px;margin-bottom:10px}
.row{display:flex;align-items:center;gap:12px}
.grow{flex:1;min-width:0}
.dim{color:var(--dim)}
.faint{color:var(--faint)}
.sm{font-size:13px}
.xs{font-size:11.5px;letter-spacing:.04em;text-transform:uppercase}
/* Единица измерения рядом с числом. Своим именем, а не .xs: тот
   переводит текст в заглавные, и сантиметры выходили как «СМ». */
.unit{font-size:11.5px;color:var(--faint);letter-spacing:.02em}
/* Разница за период. Крупнее текущего числа и полужирная: текущее
   значение говорит «сколько сейчас», а это — «что изменилось», и
   заходят сюда именно за вторым. */
.delta{font-size:17px;font-weight:650;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;margin-left:14px;white-space:nowrap}
/* Колонка «Итого» в таблице замеров: отчёркнута слева и потяжелее
   остальных. В ряду из десяти одинаковых чисел итог иначе не найти. */
/* Колонка «Итого» отчёркнута слева. Черта рисуется по левому краю
   ячейки, а отступ у той — двенадцать точек слева и ноль справа:
   черта оказывалась вплотную к соседнему числу и читалась как его
   собственная граница. Разводим отступы поровну — черта встаёт
   посередине между колонками, где ей и место. */
.tbl td.total,.tbl th:last-child{border-left:1px solid var(--line2);
  padding-left:14px}
/* И соседней колонке воздух справа: у остальных ячеек его нет вовсе,
   числа прижаты к правому краю — черта упиралась в последнее
   измерение и читалась как его граница, а не как отделяющая итог. */
.tbl td:nth-last-child(2),.tbl th:nth-last-child(2){padding-right:12px}
.tbl td.total{font-weight:650}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.ellip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
h2{margin:22px 4px 10px;font:700 9.5px/1 var(--ui);letter-spacing:.24em;
  text-transform:uppercase;color:var(--dim)}
h2:first-child{margin-top:4px}

/* строка клиента — главный элемент */
.client{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:12px 14px;margin-bottom:8px;display:flex;align-items:center;gap:14px}
.client .left{flex:1;min-width:0}
.client .name{font-weight:560;font-size:15.5px}
.client .bar{height:3px;background:var(--line);border-radius:2px;margin-top:9px;
  overflow:hidden}
.client .bar i{display:block;height:100%;background:var(--go);border-radius:2px}
.client .cnt{font:700 32px/1 var(--mono);font-variant-numeric:tabular-nums;
  letter-spacing:-.05em;min-width:54px;text-align:center;flex:none;
  color:var(--faint);padding-right:12px}
.client.low .cnt,.client.out .cnt{color:var(--alarm)}
.client.out .cnt{color:var(--debt)}
.client .tick{width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(255,181,52,.35);
  font-size:19px;color:var(--dim);flex:none;transition:.12s}
.client .tick:active{background:var(--go);color:var(--on-accent);border-color:var(--go);
  transform:scale(.92)}

/* Строка клиента собрана как строка дня в «Делах»: тёмная колонка с
   номером, светлая середина с именем, колонка остатка справа. Раньше
   все три части лежали на одном фоне и читались как одна надпись.
   Отдельное имя, а не .client: тот класс занят карточками программ. */
.crow{display:flex;align-items:stretch;margin-bottom:9px;
  background:var(--row);border:1px solid var(--line);border-radius:14px;
  overflow:hidden}
/* Черт между номером, именем и числом нет — убраны 24 сентября 2026,
   выбор Артёма из шести видов на живом списке: «линий нет, края
   отличаются только подложкой — мягче». Граница и так читается сменой
   фона, а две линии рядом с рамкой строки делали из списка таблицу. */
.crow .no{flex:none;width:46px;background:var(--cell);
  display:flex;align-items:center;justify-content:center;
  font:650 14px/1 var(--mono);font-variant-numeric:tabular-nums;
  color:var(--dim)}
.crow .who{flex:1;min-width:0;align-self:center;padding:14px 12px;
  font-size:15px;font-weight:520;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crow .rest{flex:none;width:64px;background:var(--cell);
  display:flex;align-items:center;justify-content:center;
  font:650 22px/1 var(--mono);font-variant-numeric:tabular-nums;
  letter-spacing:-.03em;color:var(--text)}

/* Блок кончается — тёплый цвет, ушёл в минус — тревожный. Тёплый взят
   из «Дел», где им помечен день с несделанными делами: смысл тот же —
   «дойдут руки», а не «горит». */
/* У «Семьи» в правом столбце точка вместо числа: остатка у них нет,
   а ноль читался бы как «пора продлевать». */
.crow .rest.none{color:var(--faint);font-size:16px}
/* Именинник: колпак на номере за три дня и в сам день, номер ярче.
   Колпак сидит на цифре набекрень, чуть заходя на неё. */
.crow .no .num{position:relative;display:inline-block}
.crow.fest .no{color:var(--text)}
.crow .no .cap{position:absolute;left:50%;bottom:78%;
  transform:translateX(-34%) rotate(16deg);
  filter:drop-shadow(0 0 3px rgba(255,209,102,.6))}
/* Цветной заливки у правой ячейки больше нет — убрана 24 сентября
   2026 по слову Артёма: «уберём выделение цветами справа, именно фон,
   не цвет цифр». Цвет остался там, где он и значит дело: на самом
   числе. Подложка строки тоже приглушена до общей — жёлтый и красный
   прямоугольники тянули взгляд сильнее, чем сами числа. */
.crow.low .rest{color:#FFD08A}
.crow.out .rest{color:var(--debt)}
.crow.holding{transform:scale(.97);opacity:.75}
/* Тот же отклик у строки посещения: её удержание открывает правку. */
.visit.holding{transform:scale(.98);opacity:.7}

/* ---------- карточка клиента ---------- */
/* Лицо, связь и остаток — одним столбцом по центру, под именем.
   Имена классов свои и короткие — .client, .left, .rest и .name уже
   заняты списком клиентов и карточками программ, и новое правило
   перебило бы их молча. */
.mugbox{display:flex;flex-direction:column;align-items:center;
  margin:-6px 0 18px}
.mug{width:96px;height:96px;border-radius:50%;display:block;
  object-fit:cover;background:#101820}
/* Ободок того же цвета, что черта под именем: лицо и заголовок
   читаются как одно целое, а не как картинка, приставленная сверху. */
.mugpick{padding:3px;border-radius:50%;line-height:0;
  background:linear-gradient(135deg,var(--go),var(--glow))}
.mugpick.on{outline:2px solid var(--go);outline-offset:3px}
.facepick{display:flex;gap:14px;justify-content:center;margin-bottom:14px}
.facepick .mug{width:84px;height:84px}
/* Цвета волос кружками. Ободок у выбранного тот же, что у кнопок
   действия, — чтобы «выбрано» читалось одинаково по всему приложению. */
.hairrow{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
  margin-bottom:14px}
/* Сам перелив задаётся здесь, а из разметки приходят только два цвета:
   слово «gradient» в строке приложения аудит принимает за вызов
   несуществующей функции и жалуется. */
.hairdot{width:32px;height:32px;border-radius:50%;flex:none;
  border:2px solid transparent;
  background:linear-gradient(135deg,var(--a),var(--b))}
.hairdot.on{border-color:var(--go);box-shadow:0 0 0 2px rgba(77,163,255,.25)}

/* Заголовок раздела внутри карточки, при нужде с кнопкой справа.
   Отступ 10 точек от края — тот же, что у названий групп в списках
   (.headin). Собственный отступ h2 снимаем, иначе они сложатся.

   Выравнивание по нижнему краю, а не по центру: заголовок набран
   мелкими буквами, и по центру кнопка казалась бы съехавшей вверх. */
/* Строка с названием раздела и подписью справа. Выравнивание по
   базовой линии, а не по низу: кегли у них разные — название мелкое
   в разрядку, подпись обычная, — и по нижнему краю они стояли на
   разной высоте, будто съехали. По базовой линии буквы стоят на
   одной черте, как в наборе строки. */
.h2row{display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;padding:0 10px}
.h2row h2{flex:1;min-width:0;margin-left:0;margin-right:0}
.addmini{width:28px;height:28px;border-radius:50%;flex:none;
  margin-bottom:8px;background:var(--go);color:var(--on-accent);
  font:600 19px/1 var(--ui);display:flex;align-items:center;
  justify-content:center;padding-bottom:2px}
.addmini:active{transform:scale(.92);opacity:.85}
.callrow{display:flex;align-items:center;gap:10px;margin-top:12px;
  flex-wrap:wrap;justify-content:center;row-gap:8px}
.callrow .tel{font:500 14.5px/1 var(--mono);color:var(--go)}
.callrow .tel.blank{font-family:var(--ui);font-size:13px;color:var(--faint)}
/* День рождения под телефоном: тем же приглушённым тоном, что и
   «телефон не указан», — это справка, а не действие. Цифры моноширинным
   ради ровного «14 марта · 36 лет». */
.bday{margin-top:7px;font:13px/1 var(--mono);color:var(--dim);
  letter-spacing:.02em}
.bday.blank{font-family:var(--ui);color:var(--faint)}
/* Значок телеграма — фирменного цвета: его узнают, не читая подписи. */
.tgdot{width:30px;height:30px;border-radius:50%;flex:none;display:flex;
  align-items:center;justify-content:center;background:#229ED9;color:#fff}
/* Ссылка на кабинет — тем же кружком рядом, но без цвета: отправляют её
   тем же движением, а спорить с фирменным синим ей незачем. */
.lnkdot{width:30px;height:30px;border-radius:50%;flex:none;display:flex;
  align-items:center;justify-content:center;border:1px solid var(--line2);
  color:var(--dim);transition:.12s}
.lnkdot:active{color:var(--go);border-color:var(--go);transform:scale(.92)}
/* Переписка — тем же кружком, но цветом приложения: это действие, а не
   служебная ссылка. Точка — непрочитанное. */
.lnkdot.chatbtn{position:relative;color:var(--go);border-color:var(--go)}
.lnkdot.chatbtn svg{width:17px;height:17px}
/* «Р» у клиента — свободные часы тренера, буквой тем же цветом, что
   переписка: оба про разговор с тренером (27 сентября 2026). */
.lnkdot.letter{font:700 15px/1 var(--ui);color:var(--go);
  border-color:var(--go)}
/* Свой номер у клиента — справка, а не ссылка: себе не звонят. */
.callrow .tel.mine{color:var(--dim)}
.lnkdot.chatbtn .chatdot{position:absolute;top:-3px;right:-3px;width:10px;
  height:10px;border-radius:50%;background:#FF9E7A;
  border:1.5px solid rgba(6,14,20,.85)}

/* Направления. Свой ряд, а не .chips: тот прокручивается вбок одной
   строкой, а меток бывает восемь, и они должны переноситься. */
.tagbox{display:flex;flex-wrap:wrap;gap:7px}
.tag{border:1px solid var(--line2);border-radius:20px;padding:6px 12px;
  font-size:12.5px;color:var(--dim)}
.tagbox .chip{flex:none}

/* Карандаш правки — в нижнем правом углу окошка, к тексту которого он
   относится. Бледный: правят редко, а стоит он в каждом окошке. */
.pen{width:26px;height:26px;border-radius:50%;flex:none;
  border:1px solid var(--line2);color:var(--faint);
  display:flex;align-items:center;justify-content:center;transition:.12s}
.pen:active{color:var(--go);border-color:var(--go);transform:scale(.92)}

/* Посещения. Строка читается слева направо: число с месяцем, день
   недели, время. Плитка даты — как отрывной календарь: дату ищут
   глазами первой, и она должна быть якорем, а не частью текста.

   Ближайшая запись обведена цветом: на неё смотрят чаще всего,
   и искать её в списке не нужно. */
.visit{display:flex;align-items:center;gap:13px;padding:12px 0;
  border-top:1px solid var(--line)}
.visit:first-child{border-top:0;padding-top:2px}
.visit:last-child{padding-bottom:2px}
.vday{flex:none;width:48px;text-align:center;border-radius:12px;
  padding:7px 0 6px;background:var(--ink);border:1px solid var(--line)}
.vday b{display:block;font:650 19px/1 var(--mono);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.vday span{display:block;margin-top:3px;font-size:9.5px;color:var(--faint);
  letter-spacing:.06em;text-transform:uppercase}
/* Длинное имя переносится, а не вылезает за свою колонку. Без этого
   «Третьяков» в узком столбце выезжал вправо и печатался поверх срока:
   соседняя колонка не двигается, она с `flex:none`. */
.vwho{font-size:14.5px;font-weight:500;overflow-wrap:anywhere}
.vfrom{font-size:12px;color:var(--faint);margin-top:2px}
.vtime{flex:none;font:650 15px/1 var(--mono);color:var(--go);
  font-variant-numeric:tabular-nums}
/* Ближайшая запись залита цветом целиком, а не обведена рамкой:
   в общем списке, где записи и пройденные идут подряд, одной рамки
   было мало — глаз её не находил. */
.visit.soon .vday{border-color:var(--go);background:var(--go)}
.visit.soon .vday span{color:var(--on-accent);opacity:.75}
/* Пометка «проведено» справа от строки. Мелкими прописными и
   приглушённая: она повторяется в каждой строке, и ярким это было бы
   не пометкой, а рябью. */
.vmark{flex:none;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint)}
/* Сегодняшний день рождения — тёплым, а не рабочим синим: это про
   человека, а не про расписание. */
.vtime.today{color:#FFD08A}
.visit.soon .vday b{color:var(--on-accent)}
/* Пройденные тише записей: они уже позади и спорить за взгляд
   не должны. */
.visit.past .vday{opacity:.65}
.visit.past .vwho{color:var(--dim);font-weight:400}

/* Метки дел. Кружок с заливкой своим цветом; «без метки» — пустой
   кружок с одной рамкой, чтобы отсутствие метки тоже можно было
   выбрать, а не только не выбрать.

   Крупнее обычного значка: попадать в них пальцем на телефоне, а
   ряд стоит в окне, где рядом поля ввода. */
.tintrow{display:flex;gap:10px;flex-wrap:wrap}
.tintdot{width:32px;height:32px;border-radius:50%;flex:none;padding:0;
  background:var(--tint);border:2px solid transparent;transition:.12s}
.tintdot.none{background:transparent;border-color:var(--line2)}
.tintdot.on{border-color:var(--text);transform:scale(1.08)}
.tintdot:active{transform:scale(.92)}

/* Примеры «до и после» — чужой результат вместо пустой рамки.
   Лентой вбок, а не сеткой: снимки высокие, и два рядом на телефоне
   стали бы марками. Ширина в три четверти экрана — соседний виден
   краем, и сразу понятно, что лента листается. */
.exrow{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:2px;scrollbar-width:none;
  -webkit-overflow-scrolling:touch}
.exrow::-webkit-scrollbar{display:none}
.exrow img{flex:none;width:78%;max-width:320px;scroll-snap-align:start;
  border-radius:12px;border:1px solid var(--line2);display:block}
.exrow img:only-child{width:100%;max-width:none}

/* Метка дела — заливка строки целиком.

   Прошли три захода: полоска слева, слабая заливка с полоской, потом
   ничего. Полоска читалась как отдельная деталь, а не как цвет самого
   дела; едва заметная заливка не читалась вовсе.

   Здесь четверть силы: цвет виден с первого взгляда, но подсветка дня
   с несделанным и выделение просроченного сквозь него по-прежнему
   различимы. Сплошной цвет забил бы и то и другое. */
.item.tinted{border-radius:9px;padding-left:9px;padding-right:9px;
  background:color-mix(in srgb, var(--tint) 26%, transparent)}

/* Оплата на грани месяца: блок кончается в последние дни, и одно
   перенесённое занятие уводит деньги в следующий месяц. Не тревога —
   тревожным здесь красят просрочку, а это всего лишь «может съехать».
   Поэтому приглушаем строку, а не подсвечиваем. */
.visit.shaky .vwho{color:var(--dim)}
.vtime.shaky{color:var(--dim);text-align:right}
.edge{display:block;margin-top:3px;font:9.5px/1 var(--ui);
  letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}

/* Имя в строке сводки — кнопка, а не текст: рядом с ним стоит крестик
   со своим действием, и нажатие на всю строку целиком уводило бы в
   карточку даже при попытке попасть в крестик. */
.rowopen{display:block;text-align:left;padding:0;min-width:0}

/* Крестик у посещения. Бледный: он стоит в каждой строке, а нажимают
   его редко — ярким он спорил бы с датой. */
.cross{width:30px;height:30px;border-radius:50%;flex:none;
  border:1px solid var(--line2);color:var(--faint);font-size:17px;
  line-height:1;transition:.12s}
.cross:active{color:var(--alarm);border-color:var(--alarm);transform:scale(.92)}
/* Крестик в углу карточки вместо кнопки «Убрать» под ней. Кнопка со
   словом занимала целую строку у каждого магазина: на четырёх это
   четыре строки ради действия, которое делают раз в год. */
.cross.corner{position:absolute;top:8px;right:8px;width:26px;height:26px;
  font-size:15px;border-color:var(--line)}
/* Палец шире значка. Кружок остаётся 26 точек — крупнее он спорил бы с
   названием магазина, — но нажимается площадь 44, как советуют и Apple,
   и Google.

   Это не придирка к числам. Промах по крестику в лучшем случае не
   делает ничего, а в худшем открывает магазин: строка целиком — ссылка
   туда. Человек уходит из приложения и возвращается с мыслью «нажал,
   ничего не убралось». Разница между «не сработало» и «промахнулся» с
   виду никакая, а ищут потом первое.

   Проверено нажатием, а не на глаз: до правки тычок наискось от
   кружка доставался карточке, после — кнопке.

   Площадь квадратная, а не круглая: она невидима, и скруглять её
   значит выбрасывать четыре угла, по которым палец как раз и мажет. */
.cross.corner::before{content:'';position:absolute;inset:-9px}
/* Карточка с крестиком в углу: справа освобождается место под него,
   чтобы содержимое не убегало ему под низ. Тем же живут магазины в
   «Ценах» и прошлые тренировки в архиве. */
.card.withcross{position:relative;padding-right:40px}
/* Строка магазина целиком — ссылка в магазин. Отдельная кнопка
   «Открыть» была лишней: нажимают всё равно на название. */
.card.shop{position:relative;padding-right:40px}
.card.shop .plain{display:flex;align-items:center;gap:12px;
  color:inherit;text-decoration:none}
.card.shop .plain:active{opacity:.7}

/* Отступ у названий групп и разделов — 10 точек. Своим классом, а не
   правкой h2: тем именем размечены заголовки во всех разделах, и новое
   правило молча съехало бы в бюджет, портфель и заметки.

   Больше пробовали и отказались: 60 — вровень с именами клиентов,
   15 — вровень с текстом внутри карточки. В обоих случаях заголовок
   уезжал вправо, а список под ним оставался у края. */
.headin{margin-left:0;padding-left:10px}
/* Заголовок группы с кнопкой «раскрыть». Запас в списке лежит свёрнутым:
   этих людей девятнадцать, они сейчас не ходят, и каждый день листать их
   ради «Основы» незачем. */
.foldrow{display:flex;align-items:baseline;justify-content:space-between;
  gap:10px}
.foldrow h2{margin-right:0}
.fold{font:600 9.5px/1 var(--ui);letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);border:1px solid var(--line2);border-radius:20px;
  padding:5px 10px;margin:22px 4px 10px auto;white-space:nowrap;
  transition:.12s}
.fold:active{color:var(--go);border-color:var(--go)}
/* Та же кнопка в ряду с заголовком: там отступы задаёт сам ряд, а
   собственные поля «сложить» уводили бы её вниз и вбок. */
.h2row .fold{margin:0 0 8px 0}

/* Имя раздела внутри самого раздела. В верхней полосе оно набрано
   мелкими разрядными буквами и читается как рамка приложения, а не как
   заголовок того, что под ним.

   Отступ сверху 14 точек — тот же, что у верхней строки в «Делах» и
   у вкладок в «Настройках»: первый элемент не липнет к шапке.

   Черта под именем — двумя цветами приложения: синим действий и
   бирюзовым главного экрана. Одним серым текстом заголовок читался как
   служебная надпись. */
.capt{text-align:center;margin:14px 2px 20px}
.capt b{display:inline-block;position:relative;padding-bottom:10px;
  font:600 24px/1.15 var(--ui);letter-spacing:.005em;color:var(--text)}
.capt b::after{content:'';position:absolute;left:50%;bottom:0;
  width:46px;height:3px;margin-left:-23px;border-radius:2px;
  background:linear-gradient(90deg,var(--go),var(--glow))}

/* Счётчик сбоку от имени раздела. Вынесен из потока: иначе он входил бы
   в ширину `b`, и подчёркивание под именем съезжало бы вправо. */
.capt-n{position:absolute;left:100%;top:3px;margin-left:7px;
  font:500 13px/1 var(--ui);color:var(--faint);letter-spacing:0;
  text-align:center}
/* Слово под счётчиком — «осталось» в посещениях. Мелкое и в разрядку:
   это подпись к числу, а не второе число. */
/* Кнопка у названия раздела. Стоит справа от него, а не в углу
   экрана: она про этот товар, а не про приложение. */
/* Обновить цены — в конце строки с целевой ценой. У названия кнопка
   читалась как часть заголовка; здесь она там, куда и так смотрят,
   когда решают «а сколько сейчас». */
.refbtn{flex:none;width:38px;height:38px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;padding:0;
  border:1px solid var(--line2);color:var(--dim);background:transparent}
.refbtn:active{color:var(--go);border-color:var(--go)}
/* Пока идёт сбор, стрелки крутятся. Иначе кнопка выглядела бы нажатой
   впустую: ответ приходит через десятки секунд. */
.refbtn.spin{color:var(--go);border-color:var(--go);
  animation:turn 1.1s linear infinite}
@keyframes turn{to{transform:rotate(360deg)}}
.capt-n i{display:block;margin-top:3px;font:400 8.5px/1 var(--ui);
  font-style:normal;letter-spacing:.06em;text-transform:uppercase;
  color:var(--faint);opacity:.8}
/* В карточке клиента это остаток занятий: кончается — тёплый цвет,
   ушёл в минус — тревожный. Те же два цвета, что у строк в списке. */
.capt-n.low{color:#FFD08A}
.capt-n.out{color:var(--debt)}

/* Кубок достижений — в левом верхнем углу, вне потока: имя остаётся
   ровно по центру экрана, как во всех остальных разделах. Стоял парой
   с именем — и сдвигал его вбок.

   Собранный целиком светится: пять частей — пять достижений, и это
   стоит заметить, не приглядываясь к цвету подставки. */
.capt.withlead{position:relative}
/* Запас с обеих сторон: слева кубок, справа счётчик остатка — оба вне
   потока и центровку имени не двигают, но налезть на них имя не должно.
   Не влезло — переносится на вторую строку, а не обрезается. */
.capt.withlead b{max-width:calc(100% - 128px)}
.cup{position:absolute;left:0;top:-3px;width:54px;height:54px;
  display:flex;align-items:center;justify-content:center;transition:.12s}
.cup.full{filter:drop-shadow(0 0 7px rgba(245,187,53,.55))}

/* Пузырёк у имени в списке клиентов: написал и не прочитан. */
.crow .who .rowchat{display:inline-flex;vertical-align:-3px;
  margin-left:7px;color:#FF9E7A}
.crow .who .rowchat svg{width:16px;height:16px}
.cup:active{transform:scale(.9)}

.kpi{display:flex;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  margin-bottom:12px}
.kpi div{flex:1 1 0;min-width:0;background:var(--card);padding:13px 8px;
  text-align:center}
.kpi.four b{font-size:18px}
.kpi.four span{font-size:10px}
.kpi b{display:block;font:700 24px/1.2 var(--mono);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.kpi span{font-size:11px;color:var(--faint);letter-spacing:.03em}

.btn{background:var(--line);border-radius:11px;padding:13px 16px;font-weight:520;
  text-align:center;display:block;width:100%}
.btn.go{background:var(--go);color:var(--on-accent);font-weight:600}
.btn:active{opacity:.75}
.btn.sm{padding:9px 13px;font-size:13.5px;width:auto;border-radius:9px}
/* Подпись под названием в строке-кнопке: сроки, счёт дней и прочее,
   что читают вместе с именем.

   Своим правилом, а не классом мелких пометок: тот набран в 9,5 точки
   и рассчитан на слово-другое сбоку — под названием он не читается
   вовсе. Здесь нужен обычный мелкий текст, каким набраны подписи по
   всему приложению. */
.under{display:block;margin-top:4px;font-size:13px;color:var(--faint);
  line-height:1.35}

/* Кнопка в две строки: «Сделать основной» одной строкой съедает
   полширины, и на название тренировки рядом ничего не остаётся.
   Слово «сделать» при этом нужно — без него «Основной» читается как
   пометка, а не как действие. */
.btn.sm.two{white-space:normal;line-height:1.25;max-width:104px;
  padding:8px 12px}
/* Три вида денег цветом. Заливка приглушённая, а не сплошная: три ярких
   пятна рядом спорят между собой, и ни одно не читается. Цвет держит
   рамка и текст — этого хватает, чтобы не перепутать. */
.btn.tint-income{background:rgba(52,211,153,.14);color:var(--income);
  border:1px solid rgba(52,211,153,.42);font-weight:600}
.btn.tint-spend{background:rgba(251,113,133,.14);color:var(--spend);
  border:1px solid rgba(251,113,133,.42);font-weight:600}
.btn.tint-invest{background:rgba(245,158,11,.14);color:var(--invest);
  border:1px solid rgba(245,158,11,.42);font-weight:600}
/* Плитки выбора: название и под ним то, что о нём уже известно.
   Сетка в два столбца — четыре услуги ложатся ровным квадратом, и
   ни одно название не приходится ужимать, как это было бы в строку. */
/* minmax(0,1fr), а не просто 1fr: у колонки сетки наименьшая ширина
   по умолчанию равна содержимому, и «Индивидуальные» раздували свой
   столбец за счёт соседнего. На узком экране плитки выходили разной
   ширины — 150 против 129. */
.plates{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.plate{display:block;width:100%;text-align:left;padding:13px 14px;
  border-radius:12px;background:var(--card);border:1px solid var(--line2);
  color:var(--text)}
.plate b{display:block;font-size:14.5px;font-weight:600;line-height:1.25}
.plate i{display:block;margin-top:5px;font-style:normal;font-size:11.5px;
  color:var(--faint);line-height:1.3}
.plate:active{transform:scale(.98)}
/* Во всю ширину и без цвета: лист прайса — не услуга, а картинка для
   клиента, и вставать в один ряд с услугами ему незачем. */
.plate.wide{margin-top:9px}
/* Цвет — метка вида работы, а не оценка. Взяты из палитры графиков,
   где они за тем же: различать, а не хвалить. Подложка слабая, рамка
   заметнее — так же, как у кнопок денег. */
.plate.tint-a{background:rgba(77,163,255,.13);border-color:rgba(77,163,255,.42)}
.plate.tint-b{background:rgba(58,224,190,.13);border-color:rgba(58,224,190,.42)}
.plate.tint-c{background:rgba(192,138,52,.16);border-color:rgba(192,138,52,.46)}
.plate.tint-d{background:rgba(154,143,191,.16);border-color:rgba(154,143,191,.5)}
.plate.tint-a b{color:#8FC6FF}
.plate.tint-b b{color:#7FE7D2}
.plate.tint-c b{color:#DDAE68}
.plate.tint-d b{color:#B8AEDB}

.tools{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}

/* Достижение: картинка во всю ширину карточки, под ней ряд —
   золотая плитка даты и текст. Скругление у картинки чуть меньше,
   чем у карточки, иначе углы не совпадают.

   Перенос строк в описании сохраняем: его набирают руками, абзацами. */
.award .awimg{width:100%;display:block;border:1px solid var(--line);
  border-radius:calc(var(--r) - 5px);margin-bottom:13px}
.awrow{display:flex;gap:13px;align-items:flex-start}
.award b{display:block;font:600 16px/1.35 var(--ui)}
.award .awtext{margin-top:6px;font-size:13.5px;color:var(--dim);
  line-height:1.55;white-space:pre-wrap}
/* ---------- программа ----------
   Тренировка — не список строк, а разложенная по полкам работа, и
   выглядеть должна так же: день с номером, три части, у каждой своя
   шапка, у упражнения номер, схема и видео.

   Цвет здесь ровно один — акцентный, и достаётся он основной части
   и схеме подходов. Разминка с заминкой намеренно тише: они и на
   тренировке идут фоном. */
.pday{display:flex;align-items:center;gap:7px;margin:18px 2px 11px}
/* Номера дней стоят рядом плитками и работают как вкладки: открытый
   день в цветной рамке, остальные приглушены. Плитка собрана как метка
   человека в шапке бюджета — тёмная середина в цветной рамке. Сплошная
   заливка не годится: на светлом конце перехода число белым по
   бирюзовому не читалось. */
.dtab{flex:none;width:30px;height:30px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;padding:0;
  font:650 14px/1 var(--mono);color:var(--faint);
  border:1.5px solid var(--line2);background:var(--ink);transition:.12s}
.dtab.on{color:var(--text);border-color:transparent;
  background:
    linear-gradient(180deg,var(--card),var(--cell)) padding-box,
    linear-gradient(140deg,var(--go),var(--glow)) border-box}
/* День под удержанием: гаснет и жмётся — видно, что палец засчитан. */
.dtab.holding{transform:scale(.9);opacity:.55;border-color:var(--debt)}
/* «Плюс» после слова: мельче плиток, чтобы не спорить с ними. */
.dadd{flex:none;width:22px;height:22px;border-radius:50%;padding:0 0 1px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line2);color:var(--go);font:600 15px/1 var(--ui)}
.dadd:active{background:var(--go);color:var(--on-accent);
  border-color:var(--go)}
.pday b{margin-left:4px;font:700 10px/1 var(--ui);letter-spacing:.24em;
  text-transform:uppercase;color:var(--dim)}

.part{background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);margin-bottom:9px;overflow:hidden}
.part.main{border-color:var(--line2)}
.part .head{display:flex;align-items:center;gap:9px;padding:11px 14px 10px}
/* Полоска у названия части: у основной — акцентом, у остальных серая.
   Она же отделяет шапку от упражнений, когда они есть. */
.part .head::before{content:'';flex:none;width:3px;height:12px;
  border-radius:2px;background:var(--line2)}
.part.main .head::before{background:linear-gradient(180deg,var(--go),
  var(--glow))}
.part .head span{font:700 9.5px/1 var(--ui);letter-spacing:.2em;
  text-transform:uppercase;color:var(--faint)}
.part.main .head span{color:var(--text)}

.exline{display:flex;align-items:flex-start;gap:11px;padding:11px 14px;
  border-top:1px solid var(--line);width:100%;text-align:left}
/* Левый столбец строки: значок видео. Ширина постоянная, даже когда
   столбец пуст, — иначе названия в одной части начинались бы с разных
   мест, смотря есть ли у упражнения видео.

   Номеров в программе нет ни в одной части: порядок виден сверху вниз,
   а колонка цифр добавляла только ряби. */
.exleft{flex:none;width:22px;display:flex;flex-direction:column;
  align-items:center;gap:7px;margin-top:1px}
.exname{display:block;font-size:14.5px;font-weight:500;line-height:1.35;
  color:var(--text)}
.excom{display:block;margin-top:4px;font-size:12.5px;color:var(--faint);
  line-height:1.45}
/* Комментарий последним писал клиент — цветом акцента, тренерский
   остаётся приглушённым (Артём, 14 сентября 2026). */
.excom.byclient,#px_note.byclient{color:var(--go)}
/* Схема подходов — единственное число в строке, поэтому моноширинно
   и в рамке: глаз находит её, не читая названий. */
/* Правый край строки: одна рамка на две половины. Сверху схема
   подходов, под чертой вес.

   Рамка одна, а не две, потому что это одна мысль про упражнение.
   Черта нужна, чтобы «4 × 12» и «10-16кг» не слились в одно число.

   Нижняя половина у занимающегося — поле ввода, и правится прямо в
   списке. Верхняя не правится нигде, кроме окна у тренера: подходы
   задаёт программа, а не самочувствие. */
.exbox{flex:none;margin-top:1px;min-width:76px;
  display:flex;flex-direction:column;align-items:stretch;
  border-radius:9px;background:var(--ink);border:1px solid var(--line2);
  overflow:hidden}
.exbox .sets{padding:5px 8px;text-align:center;white-space:nowrap;
  font:600 12px/1 var(--mono);color:var(--go);
  font-variant-numeric:tabular-nums}
/* Вес тише схемы: схема задана, а вес — подсказка «с чего начать».
   Свой, записанный занимающимся, светлее: он уже не предположение. */
.exbox .kg{padding:5px 8px;text-align:center;white-space:nowrap;
  font:600 11.5px/1 var(--mono);color:var(--faint);
  font-variant-numeric:tabular-nums}
.exbox .kg.own{color:var(--text)}
.exbox .sets + .kg{border-top:1px solid var(--line2)}
/* Поле ввода без собственной рамки: рамка у него общая со схемой. */
input.kg{display:block;width:100%;min-width:0;background:transparent;
  border:none;border-radius:0;color:var(--text)}
input.kg::placeholder{color:var(--faint);font-weight:500}
input.kg:focus{outline:none;background:rgba(58,224,190,.10)}
/* Значок видео — в левом столбце, под номером: ссылка подчёркиванием
   терялась среди букв, а треугольник виден и на бегу. */
.play{display:flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:50%;padding-left:1px;
  background:var(--go);color:var(--on-accent)}
.exline:active{background:var(--line)}
/*
 * Суперсерия — знак ∞ на черте между двумя строками.
 *
 * Сперва здесь была скоба слева, охватывающая связанные строки. Читалась
 * она верно, но занимала свой край и сдвигала строки на его ширину —
 * на телефоне это заметная доля экрана ради связки, которая в
 * программе бывает два-три раза. Знак на черте не занимает ничего: он
 * стоит там, где черта и так проходит.
 *
 * Он же и кнопка: связь — это про пару соседей, и место у неё ровно
 * между ними.
 *
 * Подложка знака — цвет самой части: знак должен перекрыть черту, а не
 * лечь поверх неё. У связанной пары черты нет вовсе: внутри связки это
 * одна работа, и разделитель резал бы её надвое.
 */
.exline{position:relative}
.exline.tied{border-top-color:transparent}

/* Рамка вокруг связки — неоном, как свечение главного экрана. Внутри
   неё строки своих границ не рисуют: это одна работа, а не две.

   Свечение слабое нарочно: рамка должна отвечать на вопрос «где тут
   связка», а не спорить за взгляд с названиями упражнений. */
/* Отступ сверху — чтобы знак связи с предыдущей строкой стоял НАД
   рамкой, в промежутке, а не на её кромке: на кромке он читался
   грязью. */
.tiebox{position:relative;margin:9px 8px 0;border-radius:12px;
  border:1px solid rgba(58,224,190,.45);
  box-shadow:0 0 13px rgba(58,224,190,.16),
             inset 0 0 12px rgba(58,224,190,.05)}
.tiebox .exline{border-top:none;padding-left:9px;padding-right:9px}
.tiebox .exline:first-child{padding-top:12px}
.tiebox .exline:last-child{padding-bottom:12px}
.tiebox .exline:first-child:active,
.tiebox .exline:last-child:active{border-radius:11px}
/* Знак у первой строки связки — про связь с той, что снаружи. Поднимаем
   его в промежуток над рамкой, иначе он ложится прямо на её кромку. */
.tiebox .exline:first-child > .tiedot{top:-9px}
/* Под рамкой строка идёт обычная, и её черта не нужна: рамка уже
   отделила связку от соседа снизу. */
.tiebox + .exline{border-top-color:transparent}
/*
 * Знак стоит у левого края и повёрнут набок: лёжа ∞ читался как
 * «между строками вообще», стоймя — как звено цепи, соединяющее два
 * блока. Слева потому, что там же начинается строка: глаз идёт сверху
 * вниз по левому краю и связку видит по дороге, а не отыскивает
 * посреди.
 *
 * Кнопка сама прозрачная и заметно больше знака — попадать в неё надо
 * пальцем. Подложка только у самого знака, и ровно такая, чтобы
 * перекрыть черту и не залезть на значок видео строкой ниже.
 */
.tiedot{position:absolute;left:50%;top:0;transform:translate(-50%,-50%);
  height:38px;padding:0;border:none;z-index:1;background:none;
  display:flex;align-items:center;
  color:var(--faint);opacity:.45}
/* Подложка перекрывает черту. Высота ровно 24: столько, чтобы закрыть
   линию и не залезть на значок видео строкой ниже — они касаются
   краями. */
.tiedot .pill{display:flex;align-items:center;height:24px;
  border-radius:12px;background:var(--card)}
/* Плюс, а не бесконечность: ∞ теперь занят расписанием, где значит
   «каждую неделю». Поворачивать его не надо — он симметричен. */
.tiedot i{display:flex;align-items:center;justify-content:center;
  width:24px;height:24px;flex:none;
  font:600 18px/1 var(--ui);font-style:normal}
/* Слово — тем же кеглем, что названия частей: это подпись к месту, а
   не к упражнению, и звучать должна так же тихо. */
.tiedot em{font:700 10px/1 var(--ui);font-style:normal;letter-spacing:.16em;
  text-transform:uppercase;white-space:nowrap;padding:0 10px 0 1px}
.tiedot.on{color:var(--go);opacity:1}
.tiedot:active{color:var(--go);opacity:1}

/*
 * Расписание по ссылке: неделя по часам.
 *
 * Свободный час — обведён акцентом, занятый зачёркнут и приглушён.
 * Зачёркивание, а не «нет в списке»: человеку важно видеть, что час
 * существует и просто занят, — иначе плотный день выглядит как день,
 * в который вы не работаете.
 *
 * Часы плитками, а не строками: их до десяти в дне, и строкой на
 * каждый экран уходил бы весь в одну среду.
 */
.fday{background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:12px 14px;margin-bottom:10px}
.fday.now{border-color:var(--go)}
.fday .top{display:flex;align-items:baseline;gap:9px;margin-bottom:11px}
.fday .top b{font-size:16px;text-transform:capitalize}
/* Суббота с воскресеньем — тем же цветом, что выходные в календаре
   «Дел» и в сетке месяца. Красим имя дня, а не всю карточку: часы в
   выходной такие же, как в будни, и перекрашивать их значило бы
   сказать, что они чем-то другие. */
.fday.rest .top b{color:var(--alarm)}
.fday.rest .top .mo{color:var(--alarm);opacity:.75}
.fday .top .mo{font-size:13px;color:var(--dim)}
.fday .top .cnt{margin-left:auto;font:10px/1 var(--ui);letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint)}
/* Подпись отрезка: утро и вечер. Тем же кеглем, что названия частей
   тренировки, — это подпись к месту, а не к часу. */
.fpart{font:700 10px/1 var(--ui);letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);margin:2px 0 8px}
.fhrs + .fpart{margin-top:13px}
.fhrs{display:flex;flex-wrap:wrap;gap:7px}
/* Буква «Р» под неделей в «Делах» — вход в расписание. Своя строка,
   чтобы буква стояла посередине: в общем потоке она прижималась к
   левому краю и читалась как начало списка. */
.schedrow{display:flex;justify-content:center;margin-top:18px}

/* Вычеркнутое рукой. Пунктиром, а не сплошным: занятое клиентом —
   свершившийся факт, а это ваше решение, и снять его можно тем же
   нажатием. Клиент разницы не видит: у него просто зачёркнуто. */
.fh.byhand{border-style:dashed;border-color:var(--faint)}
/* День, закрытый целиком. Гасим его весь: разбирать по часам там
   нечего, а полтора десятка одинаково зачёркнутых чисел только
   заставляли бы читать их по одному. */
.fday.off{opacity:.5}
.fday.off .cnt{color:var(--alarm)}

/* Свободный час — кнопка: нажали, и время легло в буфер готовой
   фразой. Занятый остаётся надписью: нажимать там нечего. */
.fh{padding:7px 10px;border-radius:9px;border:1px solid var(--go);
  background:none;font:600 13px/1 var(--mono);color:var(--go);
  font-variant-numeric:tabular-nums}
button.fh:active{background:var(--go);color:var(--on-accent)}
.fh.busy{border-color:var(--line2);background:var(--ink);color:var(--faint);
  text-decoration:line-through;text-decoration-thickness:1px}

/* Пустая часть — пунктиром, а не серой строчкой: видно, что место
   свободно, а не что здесь чего-то не хватает. */
.part .none{margin:2px 14px 13px;padding:13px;border:1px dashed var(--line2);
  border-radius:11px;text-align:center;font:11px/1 var(--ui);
  letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}

/* Золотая плитка — только у достижений: в посещениях золото было бы
   наградой ни за что. */
.vday.gold{border-color:rgba(245,187,53,.42)}
.vday.gold b{color:#F5BB35}
.vday.gold span{color:rgba(245,187,53,.62)}
/* Счётчик достижений золотеет, когда кубок собран целиком. */
.capt-n.gold{color:#F5BB35}

input,select,textarea{width:100%;background:#121A23;border:1px solid var(--line2);
  border-radius:11px;padding:12px 13px;outline:none}
input:focus,textarea:focus,select:focus{border-color:var(--go)}

/* Время и дату рисует сам браузер, и по умолчанию — в светлых красках:
   белый фон подсказки, чёрные цифры, серые прочерки «--:--». Рядом с
   тёмными полями это выглядело чужим.

   color-scheme — главное здесь: она разворачивает в тёмную сторону и
   всплывающий выбор часов, до которого стилями не достать. Остальное
   правит уже мелочи: цвет прочерков и значок часов, который в тёмном
   поле оставался чёрным на чёрном. */
/* line-height:normal — чтобы поле времени было той же высоты, что поля
   рядом. Браузер добавляет внутри свою обёртку с цифрами, и с общей
   строкой 1.45 поле вырастало на два пиксела выше соседа. */
input[type=time],input[type=date]{color-scheme:dark;line-height:normal;
  font-variant-numeric:tabular-nums;background:#121A23}

/* Внутренности поля тоже гасим. Само поле тёмное, но браузер рисует
   внутри свою обёртку с цифрами и на некоторых телефонах заливает её
   светлым — тогда поверх нашего фона появляется бледная полоса, и всё
   поле выглядит светлее соседей. Прозрачность здесь надёжнее: что бы
   браузер ни задумал, сквозь неё виден наш фон. */
input[type=time]::-webkit-datetime-edit,
input[type=date]::-webkit-datetime-edit,
input[type=time]::-webkit-datetime-edit-fields-wrapper,
input[type=date]::-webkit-datetime-edit-fields-wrapper{
  background:transparent;color:var(--text)}
input[type=time]::-webkit-datetime-edit-text,
input[type=date]::-webkit-datetime-edit-text{color:var(--faint);padding:0 1px}
input[type=time]::-webkit-datetime-edit-hour-field,
input[type=time]::-webkit-datetime-edit-minute-field,
input[type=date]::-webkit-datetime-edit-day-field,
input[type=date]::-webkit-datetime-edit-month-field,
input[type=date]::-webkit-datetime-edit-year-field{color:var(--text)}
input[type=time]::-webkit-datetime-edit-hour-field:focus,
input[type=time]::-webkit-datetime-edit-minute-field:focus,
input[type=date]::-webkit-datetime-edit-day-field:focus,
input[type=date]::-webkit-datetime-edit-month-field:focus,
input[type=date]::-webkit-datetime-edit-year-field:focus{
  background:var(--go);color:var(--on-accent);border-radius:4px}
input[type=time]::-webkit-calendar-picker-indicator,
input[type=date]::-webkit-calendar-picker-indicator{
  filter:invert(1) brightness(.78);cursor:pointer;opacity:.85}
label{display:block;font-size:12px;color:var(--dim);margin:0 0 6px 3px}
.field{margin-bottom:11px}

/* Поля замера в два столбца. Их одиннадцать, и в столбик они занимали
   два экрана: до кнопки «Записать» приходилось листать, а половина
   полей уезжала под клавиатуру.

   Дата стоит отдельной строкой сверху — она одна на весь замер, и
   делить с ней ряд нечему. Парные параметры (лево и право) тоже во
   всю ширину: внутри у них уже два поля, и ужимать их в половину
   значило бы получить четыре колонки цифр. */
.msgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 10px}
.msgrid .wide{grid-column:1 / -1}
/* Подпись поля мельче обычной: в узкой колонке «линия грудь-спина»
   иначе переносится на три строки и ломает ряд. */
.msgrid label{font-size:11px}

/* Поле со скрепкой в углу. Отступ снизу у самого поля — чтобы последняя
   строка текста не убегала под кнопку. */
.clipbox{position:relative}
/* display:block убирает щель под строчными элементами. Без него низ поля
   и низ обёртки не совпадали, и скрепка вставала выше, чем задумано. */
.clipbox textarea{display:block;padding-bottom:34px}
.clip{position:absolute;right:8px;bottom:8px;color:var(--faint);
  padding:5px 7px;line-height:1}
.clip:active,.clip.on{color:var(--go)}
.two{display:flex;gap:9px}
.two > *{flex:1 1 0;min-width:0}
/* Три кнопки в строку: «Инвестиции» — самое длинное слово из трёх, и при
   обычных полях оно не влезало в свою треть. Поля уже, буквы мельче. */
.two.three{gap:7px}
.two.three .btn{padding:12px 4px;font-size:13px}
/* Три поля в строку — «Во сколько | Когда | Повтор» в окне дела: при
   обычных отступах дата теряла год. Отступы уже, буквы те же. */
.two.three input,.two.three .checkfield{padding-left:9px;padding-right:7px}
.two.three .checkfield{gap:7px}

.chips{display:flex;gap:7px;overflow-x:auto;padding-bottom:4px;margin-bottom:10px;
  scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;border:1px solid var(--line2);border-radius:20px;padding:8px 14px;
  font-size:13.5px;color:var(--dim);white-space:nowrap}
.chip.on{background:var(--go);color:var(--on-accent);border-color:var(--go);
  font-weight:600}
/* Год под удержанием. Гаснет и жмётся — видно, что палец засчитан,
   и что отпустить можно, пока не поздно. */
.chip.holding{transform:scale(.94);opacity:.6;border-color:var(--debt)}

/* Выбор года: одна кнопка с нынешним годом и «плюс» рядом. Раньше здесь
   стоял ряд из семи кнопок — он ездил вбок и путался со свайпом самой
   сетки, которая тоже ездит вбок. */
.yearpick{display:flex;align-items:center;gap:9px;padding:0 10px}
.pickyear{flex:1;display:flex;align-items:center;justify-content:space-between;
  padding:11px 15px;border-radius:12px;border:1px solid var(--line2);
  background:var(--card);color:var(--text);
  font:600 17px/1 var(--mono);letter-spacing:.02em}
.pickyear .caret{font-size:12px;color:var(--faint);font-family:var(--ui)}
.pickyear:active{border-color:var(--go)}
.pickyear.holding{transform:scale(.97);opacity:.6;border-color:var(--debt)}
/* Правила круглых кнопок живут внутри .stepbar, поэтому «плюсу» здесь
   нужны свои — иначе он выйдет обычной прямоугольной кнопкой. */
.yearadd{flex:none;width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--line);color:var(--text);font:600 22px/1 var(--mono);
  padding-bottom:2px}
.yearadd:active{background:var(--go);color:var(--on-accent)}
/* Переключатель видов бюджета. Отступ 10 точек — тот же, что у названий
   разделов рядом; вплотную к краю ряд читался как обрезанный. Ровные
   доли, чтобы четыре кнопки заняли ширину и не листались вбок. */
.chips.modes{padding:0 10px;gap:6px}
/* Буква человека в чипе: та же метка, что у бюджета, только мельче —
   рядом с именем она подсказка, а не кнопка. */
.chip .letter{display:inline-flex;align-items:center;justify-content:center;
  width:17px;height:17px;margin-right:5px;border-radius:5px;
  border:1px solid var(--line2);font:600 10px/1 var(--ui);font-style:normal;
  vertical-align:-3px}
.chip.on .letter{border-color:currentColor}
.chips.modes .chip{flex:1 1 0;padding:8px 6px;text-align:center;
  font-size:13px}

/* Список выбора: категории траты и записи для правки.
   Чипы уезжали за правый край, и до нижних было не добраться вслепую —
   здесь всё в столбик, видно сразу несколько, а высота ограничена, чтобы
   кнопка «Записать» не ушла под низ экрана. */
.picklist{max-height:42vh;overflow-y:auto;border:1px solid var(--line2);
  border-radius:var(--r);background:var(--card);margin-bottom:4px;
  -webkit-overflow-scrolling:touch}
.picklist.tall{max-height:56vh}
.pickrow{display:flex;align-items:center;gap:10px;width:100%;
  padding:11px 13px;text-align:left;font-size:14.5px;color:var(--dim);
  border-bottom:1px solid var(--line);background:transparent}
.pickrow:last-child{border-bottom:none}
.pickrow .grow{flex:1 1 auto;min-width:0}
.pickrow .ic{flex:none;width:20px;text-align:center}
/* Выбор упражнения: название целиком, с переносом, а справа тот же
   значок видео, что в программе, — не сжимается и крупнее под палец
   (Артём, 15 сентября 2026). Класс `expick`, а не `exrow`: тот занят
   строками базы упражнений. */
.pickrow.expick .grow{white-space:normal;line-height:1.35}
.pickrow.expick .play{flex:none;width:28px;height:28px}
.pickrow.expick .playgap{flex:none;width:28px}

/* Значок кнопки прямо в тексте подписи — кружок, как в нижней полосе. */
/* Кнопка-ссылка («Оплатить» у тренера) — без подчёркивания ссылки. */
a.btn{text-decoration:none}

.inlico{display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;vertical-align:middle;
  background:var(--go);color:var(--on-accent);margin:0 1px}
.inlico svg{width:13px;height:13px}
.inlico.pale{background:var(--cell);color:var(--text);
  border:1px solid var(--line2)}

/* Тренеры одной таблицей (Артём, 16 сентября 2026): плитки-фильтры
   сверху, строки ниже; колонки — тренер, клиенты, состояние, срок. */
.trcard{padding:10px 10px 4px}
.trtiles{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;
  margin-bottom:8px}
.trtile{display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:8px 2px;border-radius:12px;background:var(--cell);
  border:1px solid var(--line);color:var(--dim);font-size:10.5px;
  line-height:1.15;text-align:center}
.trtile b{font-size:19px;color:var(--text)}
.trtile.on{border-color:var(--go);box-shadow:inset 0 0 0 1px var(--go)}
.trrow{display:grid;grid-template-columns:minmax(0,1fr) 30px 76px 74px;
  align-items:center;gap:8px;padding:10px 4px;
  border-top:1px solid var(--line);font-size:14px}
.trrow:not(.trhead):active{background:var(--line)}
.trhead{border-top:none;padding:4px;font-size:11px;color:var(--faint);
  text-transform:uppercase;letter-spacing:.04em}
.trhead button{background:none;border:none;padding:0;color:inherit;
  font:inherit;letter-spacing:inherit;text-transform:inherit;text-align:left}
.trhead button.on{color:var(--go)}
.trname{display:flex;flex-direction:column;min-width:0}
/* Почта — строчными: общий `.xs` пишет прописными, и адрес читался
   криком (снимок 16 сентября 2026). */
.trname .xs{text-transform:none;letter-spacing:0}
.trnum{text-align:center}
.trhead .trnum{text-align:center}
.trchip{font-size:12px}
.trterm{display:flex;flex-direction:column;text-align:right;font-size:12.5px}
.trhead .trterm{text-align:right;align-items:flex-end}

/* Выбранная строка помечена полосой сбоку цветом акцента, а не заливкой
   этим же цветом: акцент меняется в настройках, и полупрозрачная заливка
   под него не подстроится. */
.pickrow.on{background:var(--line);color:var(--text);font-weight:560;
  box-shadow:inset 3px 0 0 var(--go)}
.pickrow.locked{opacity:.45}
.pickrow:not(.locked):active{background:var(--line)}

.line{display:flex;justify-content:space-between;gap:12px;padding:11px 0;
  border-bottom:1px solid var(--line)}
.line:last-child{border-bottom:none}
/* Итог раздела. Черта сверху и заметно тише самих строк по имени, но
   громче по числу: слово «Итого» читать не надо, а число — надо.
   У наличных такой строки нет и быть не может: там разные валюты, и
   складывать рубли с долларами нечего. */
/* Отрицательный отступ не опечатка: своей чертой итог ложится ровно
   поверх черты последней строки. Иначе их было бы две в пикселе друг
   от друга — след, который глаз замечает, а объяснить не может. */
.line.total{border-top:1px solid var(--line2);margin-top:-1px;
  padding-top:14px}
.line.total span:first-child{font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);align-self:center}
.line.total .num{font-weight:640;font-size:15.5px}
/* Курс валюты между названием и суммой. Тише обоих: это справка, а не
   число, ради которого сюда смотрят. */
.rate{flex:none;color:var(--faint);font-size:12.5px;align-self:center}

.empty{text-align:center;color:var(--faint);padding:44px 20px;font-size:14px}
.empty b{display:block;color:var(--dim);font-weight:520;margin-bottom:5px;font-size:15px}

/* «данные от 14:46 · обновляю…» — пока на экране сохранённое, а
   свежее ещё едет. Тонкой строкой сверху: сказать надо, а места
   занимать не должно. */
#stale{position:fixed;left:0;right:0;top:0;z-index:60;display:none;
  padding:calc(2px + var(--safetop)) 10px 3px;font-size:11px;
  text-align:center;color:var(--dim);background:var(--bar);
  backdrop-filter:blur(4px)}
#stale.on{display:block}

#toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%) translateY(14px);
  background:var(--text);color:var(--ink);padding:11px 18px;border-radius:11px;
  font-size:14px;font-weight:520;opacity:0;pointer-events:none;transition:.2s;z-index:60;
  max-width:88vw;text-align:center}
#toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

#sheet{position:fixed;inset:0;z-index:50;background:rgba(6,10,14,.6);
  display:none;align-items:flex-end}
#sheet.on{display:flex}
#sheet .panel{background:var(--card);width:100%;border-radius:18px 18px 0 0;
  padding:18px 16px max(18px,env(safe-area-inset-bottom));
  border-top:1px solid var(--line2);max-height:86dvh;overflow-y:auto;
  animation:up .18s ease-out}
@keyframes up{from{transform:translateY(16px)}}
#sheet h3{margin:0 0 14px;font-size:16px;font-weight:600}

/* Шапка окна в две части: слева название, справа выбор. Список сделан
   узким и приглушённым — он подсказка к заголовку, а не поле формы,
   и не должен спорить с ним за внимание. */
.headrow{display:flex;align-items:center;gap:10px}
.headpick{flex:none;width:auto;max-width:52%;
  font-size:13px;font-weight:500;color:var(--dim);
  padding:6px 9px;border-radius:9px;background:var(--line)}

.chart{width:100%;height:auto;display:block}
#timer{text-align:center;font-size:34px;font-weight:650;letter-spacing:.04em;
  margin:10px 0 4px;font-variant-numeric:tabular-nums}

.mic{display:block;width:128px;height:128px;border-radius:50%;margin:0 auto;
  background:var(--go);color:#fff;font-size:15px;font-weight:600;border:none}
.mic.on{background:var(--debt);animation:pulse 1.4s infinite}
@keyframes pulse{50%{transform:scale(.94)}}
audio{filter:invert(.86) hue-rotate(180deg);border-radius:8px}

.grove{position:relative;width:100vw;margin-left:0;
  height:100dvh;
  background-color:#05070C;background-position:center;
  background-size:cover;background-repeat:no-repeat}
.grove::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,17,23,.75) 0%,
    rgba(11,17,23,0) 18%,rgba(11,17,23,0) 62%,rgba(11,17,23,.85) 100%)}
.leaf{position:absolute;transform:translate(-50%,-50%);
  display:block;padding:0;z-index:2;background:none;
  width:60px;height:60px}

/* Кнопка полупрозрачная: сквозь неё видно ветви и туманность,
   но подсвеченная граница делает её именно кнопкой, а не пятном. */
.leaf .pod{position:relative;width:60px;height:60px;border-radius:18px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(10,14,28,.34);
  border:1.4px solid rgba(122,255,232,.55);
  box-shadow:0 0 12px rgba(58,224,190,.35),
             inset 0 0 14px rgba(58,224,190,.14);
  backdrop-filter:blur(5px);
  transition:transform .14s ease,box-shadow .2s ease,background .2s ease}
.leaf.root{width:46px;height:46px}
.leaf.root .cap{top:44px}
.leaf .pod.small{width:46px;height:46px;border-radius:14px;
  border-color:rgba(122,255,232,.35);box-shadow:0 0 8px rgba(58,224,190,.22)}

.leaf .ico{width:28px;height:28px;fill:none;stroke:#DFFFF7;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 4px rgba(58,224,190,.75))}
.leaf .pod.small .ico{width:27px;height:27px;stroke:#B9D5CF;stroke-width:1.5}

/* Уведомление — звезда, а не кружок */
/* Кружок с числом вместо звезды: спокойнее и не спорит с рисунком главного экрана.
   Цвет свой у каждого раздела — привыкаешь, что синий это клиенты,
   а бирюзовый дела, и понимаешь без чтения. */
.leaf .badge{position:absolute;top:-7px;right:-7px;min-width:21px;height:21px;
  padding:0 5px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  font:700 11px/1 var(--mono);color:#08131A;
  border:1.5px solid rgba(6,14,20,.85);
  box-shadow:0 0 10px rgba(0,0,0,.5)}

.leaf .badge.clients{background:#5FB3FF}
.leaf .badge.tasks{background:#4FD8C4}
.leaf .badge.prices{background:#8FD98A}
.leaf .badge.money{background:#F0C36A}
.leaf .badge.portfolio{background:#B79BF0}
.leaf .badge.notes{background:#7FC6E8}

/* Подпись прижата к кнопке и продолжает её: скруглена только снизу,
   рамка общая — читается как одна деталь, а не отдельный ярлык. */
/* Подпись без подложки: держится на тени, а не на плашке. Фон главного экрана
   пёстрый, поэтому тень плотная и в две стороны — иначе на светлых
   пятнах буквы теряются. */
.leaf .cap{position:absolute;top:62px;left:50%;transform:translateX(-50%);
  white-space:nowrap;
  font-size:11px;font-weight:600;color:#F2FBF8;letter-spacing:.04em;
  text-shadow:0 1px 3px rgba(0,0,0,.95), 0 0 10px rgba(0,0,0,.85),
              0 0 2px rgba(0,0,0,1)}
.leaf .cap.dim{font-size:10px;color:#9FB3AE;background:rgba(8,10,22,.5)}

.leaf:active .pod{transform:scale(.93);background:rgba(58,224,190,.22);
  box-shadow:0 0 20px rgba(58,224,190,.7),inset 0 0 18px rgba(58,224,190,.3)}

/* Дорога достижений лежит фоном и никуда не ведёт: нажатия проходят
   сквозь неё к главному экрану, иначе долгое нажатие для перестановки не срабатывает. */
.strip{position:absolute;top:0;left:0;right:0;bottom:0;z-index:1;
  pointer-events:none}

/* Счёт месяца на главном экране: сколько тренировок провёл и сколько себе
   поставил. Заливка внутри таблетки — сама полоса выполнения: она
   и есть отчёт, а цифры лишь называют её словами.

   Заливка отдельным слоем под текстом, а не фоном таблетки: фон
   заливается целиком и полосой быть не может. */
.pace{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
  white-space:nowrap;font-size:11.5px;color:#BFD8D2;
  padding:5px 12px;border-radius:13px;overflow:hidden;
  background:rgba(8,10,22,.55);backdrop-filter:blur(4px);
  border:1px solid rgba(122,255,232,.22)}
.pace i{position:absolute;left:0;top:0;bottom:0;z-index:0;
  transition:width .5s ease}
.pace span{position:relative;z-index:1}
.pace b{color:#EAFFF9;font-size:13px;font-weight:650}

/* Четыре ступени. Начало спокойное, к середине теплеет, у цели
   становится ярким, за целью — золото. Цвета свои, а не из настроек:
   это шкала, и она должна значить одно и то же при любом акценте. */
.pace.start i{background:linear-gradient(90deg,
  rgba(122,255,232,.10),rgba(122,255,232,.22))}
.pace.half i{background:linear-gradient(90deg,
  rgba(122,255,232,.16),rgba(93,214,255,.34))}
.pace.near i{background:linear-gradient(90deg,
  rgba(93,214,255,.26),rgba(58,224,190,.52))}
.pace.over i{background:linear-gradient(90deg,
  rgba(58,224,190,.4),rgba(255,209,102,.72))}

/* Та же таблетка в шапке кабинета тренера: не приклеена к низу
   экрана, а стоит в ряду слева от заголовка и уходит к краю
   автоматическим полем, как год у «Дел». */
.pace.inhead{position:static;transform:none;flex:none;margin-right:auto;
  font-size:11.5px;padding:6px 12px}
.pace.inhead:active{transform:scale(.96)}
/* Спидометр в шапке кабинета тренера: дуга делениями, открытая
   снизу, число в ней. Горящие деления — цветом приложения, полная
   дуга — свечением: это рекорд месяца. Обрезает маску `.cut`, ей
   деления не нужны — она сплошная. */
.gauge{position:relative;flex:none;width:44px;height:38px;margin-right:auto;
  padding:0;border:none;background:transparent;color:var(--text)}
.gauge svg{position:absolute;inset:0;display:block}
.gauge path{fill:none;stroke-width:3;stroke-linecap:round}
.gauge .bg,.gauge .fg{stroke-dasharray:3.2 4.5}
.gauge .cut{stroke:#fff;stroke-width:7;stroke-linecap:butt}
.gauge .bg{stroke:var(--line)}
.gauge .fg{stroke:var(--go)}
.gauge.full .fg{stroke:var(--glow);
  filter:drop-shadow(0 0 4px rgba(58,224,190,.8))}
.gauge .num{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;padding-top:3px;font:700 14px/1 var(--mono);
  font-variant-numeric:tabular-nums}
.gauge.off .num{color:var(--alarm)}
.gauge:active{transform:scale(.94)}
/* Вывеска ArtFit в шапке кабинета тренера: вразрядку, одними
   контурами — Art контуром цвета текста, Fit контуром акцента; черты
   под ней нет. Вариант «Е» из шести макетов, выбран Артёмом
   12 сентября 2026, с поправкой: большие только A и F, без капители.
   Свечение на всём слове ему не понравилось — оно убрано. */
.capt b.artfit{font-weight:800;font-size:26px;letter-spacing:.14em;
  padding-bottom:9px;color:transparent;-webkit-text-stroke:1.2px var(--text);
  text-shadow:none}
/* Черта под вывеской вернулась 12 сентября 2026 — Артём захотел
   посмотреть. Она же стоит под именами разделов, поэтому вывеска
   держится того же ряда, что «Клиенты» и «Дела» у Артёма. Вразрядку
   буквы уезжают вправо, и черта смещена на половину разрядки, иначе
   середина не совпадает с серединой слова. */
.capt b.artfit::after{left:50%;margin-left:-25px}
/* Счётчик у вывески — обычный, контур ему не наследуется. */
.capt b.artfit i{font-style:normal;color:transparent;
  -webkit-text-stroke:1.2px var(--go)}
/* Подписка не оплачена — вывеска гаснет целиком, с чертой: прозрачность
   на самом слове берёт с собой и `::after`, и «Fit». Артём,
   13 сентября 2026. */
.capt b.artfit.asleep{opacity:.3}
/* ArtFit Coach — «coach» в разрыве черты под вывеской (вариант «Д» из
   шести макетов, выбор Артёма 24 сентября 2026: подпись к месту и не
   затеняет бренд). Своя черта, двумя отрезками по бокам слова, поэтому
   общая черта заголовка у вывески снята. Тот же знак — на экране входа
   (`.loginmark`) и на странице для тренеров. */
.capt b.artfit{display:inline-flex;flex-direction:column;align-items:center;
  padding-bottom:0}
.capt b.artfit::after{display:none}
.coachline{display:flex;align-items:center;gap:8px;margin:7px -.4em 0 0;
  font:600 8.5px/1 var(--ui);letter-spacing:.4em;text-transform:uppercase;
  color:var(--go);-webkit-text-stroke:0}
.coachline::before,.coachline::after{content:'';width:22px;height:2px;
  border-radius:2px;background:linear-gradient(90deg,var(--go),#3AE0BE)}
.loginmark{display:inline-flex;flex-direction:column;align-items:center;
  margin:0 0 30px;font-weight:800;font-size:30px;letter-spacing:.14em;
  line-height:1;color:transparent;-webkit-text-stroke:1.3px var(--text)}
.loginmark i{font-style:normal;-webkit-text-stroke:1.3px var(--go)}
.loginmark .coachline{font-size:9.5px;margin-top:9px}
/* Экран согласия с документами (25 сентября 2026). Свой слой поверх
   всего, а не #login: тот держит форму входа, и затирать её нельзя. */
#consent{position:fixed;inset:0;z-index:60;background:var(--ink);
  overflow-y:auto;padding:8vh 20px 30px}
#consent .box{max-width:420px;margin:0 auto;text-align:center}
#consent h2{font-size:22px;font-weight:600;margin:0 0 10px;letter-spacing:0;text-transform:none;color:var(--text)}
#consent .lead{margin:0 0 22px;line-height:1.5}
label.agree{display:flex;gap:12px;align-items:flex-start;text-align:left;
  font-size:15px;line-height:1.45;margin:0 0 16px;cursor:pointer}
label.agree input{width:22px;height:22px;flex:none;margin:0;
  accent-color:var(--go)}
label.agree a{color:var(--go)}
/* «Что нового» — карусель во весь экран после обновления (25 сентября
   2026). Вторая версия того же дня: первая была окном с серым «Что
   нового» в углу, и Артём сказал — невзрачно, скучно смотреть. Теперь
   во весь экран, свечение цвета приложения, у каждой карточки сценка
   (`WN_ART`), полоски хода как в историях, появление при листании. */
#wn{position:fixed;inset:0;z-index:55;display:flex;flex-direction:column;
  background:
    radial-gradient(60% 40% at 50% 34%,
      color-mix(in srgb,var(--go) 26%,transparent),transparent 70%),
    radial-gradient(50% 30% at 85% 90%,
      color-mix(in srgb,#3AE0BE 16%,transparent),transparent 70%),
    var(--ink);
  padding:calc(env(safe-area-inset-top) + 18px) 0
    calc(env(safe-area-inset-bottom) + 18px);
  animation:wnIn .35s ease-out;transition:opacity .25s}
#wn.gone{opacity:0}
@keyframes wnIn{from{opacity:0;transform:scale(1.02)}to{opacity:1}}
#wn .wn-top{display:flex;justify-content:space-between;align-items:flex-start;
  padding:0 22px}
#wn .wn-title{font-size:32px;font-weight:800;line-height:1.1;
  color:var(--text);letter-spacing:-.01em}
#wn .wn-title small{display:block;font-size:11px;font-weight:700;
  letter-spacing:.3em;text-transform:uppercase;color:var(--go);
  margin:0 0 8px}
#wn .wn-x{width:40px;height:40px;border-radius:50%;border:0;flex:none;
  background:color-mix(in srgb,var(--text) 10%,transparent);
  color:var(--text);font-size:17px;line-height:40px;padding:0}
#wn .wn-steps{display:flex;gap:6px;padding:18px 22px 0}
#wn .wn-steps i{flex:1;height:4px;border-radius:2px;
  background:color-mix(in srgb,var(--text) 14%,transparent);
  transition:background .3s}
#wn .wn-steps i.done{background:var(--go)}
#wn .wn-track{flex:1;display:flex;overflow-x:auto;
  scroll-snap-type:x mandatory;scrollbar-width:none;
  overscroll-behavior-x:contain}
#wn .wn-track::-webkit-scrollbar{display:none}
/* Текст карточки — три-четыре фразы (с 26 сентября 2026), и на низком
   экране он мог не влезть: картинка тогда ужимается по высоте экрана, а
   слайд прокручивается сам — «safe» не даёт верху уйти за край. */
#wn .wn-slide{flex:0 0 100%;scroll-snap-align:start;display:flex;
  flex-direction:column;align-items:center;justify-content:safe center;
  padding:10px 26px;text-align:center;overflow-y:auto;
  overscroll-behavior-y:contain}
#wn .wn-stage{width:min(100%,330px,calc(28dvh * 1.45));aspect-ratio:1.45;
  flex:none;margin:0 0 20px;display:flex;align-items:center;justify-content:center;
  border-radius:28px;
  background:color-mix(in srgb,var(--card) 70%,transparent);
  border:1px solid color-mix(in srgb,var(--go) 30%,transparent);
  box-shadow:0 0 50px color-mix(in srgb,var(--go) 22%,transparent)}
#wn .wn-art{width:86%;height:auto}
/* Снимок настоящего экрана закрывает сценку целиком; пропал — сценка
   снова видна. */
#wn .wn-stage{position:relative;overflow:hidden}
#wn .wn-shot{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block}
#wn h3{font-size:24px;font-weight:800;line-height:1.2;margin:0 0 10px;
  color:var(--text)}
#wn p{font-size:15px;line-height:1.45;margin:0;color:var(--dim);
  max-width:340px}
#wn .wn-slide.on .wn-stage{animation:wnPop .55s cubic-bezier(.2,.9,.3,1.2)}
#wn .wn-slide.on h3,#wn .wn-slide.on p{animation:wnUp .5s ease-out both}
#wn .wn-slide.on p{animation-delay:.08s}
@keyframes wnPop{from{opacity:0;transform:scale(.86) translateY(12px)}
  to{opacity:1;transform:none}}
@keyframes wnUp{from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  #wn,#wn .wn-slide.on .wn-stage,#wn .wn-slide.on h3,
  #wn .wn-slide.on p{animation:none}}
#wn .wn-bar{padding:0 22px}
#wn .wn-bar .btn{width:100%;margin:0;padding:17px;font-size:17px;
  border-radius:18px}
/* Цвета сценок — цветами темы. */
#wn .wa-soft{fill:color-mix(in srgb,var(--text) 9%,transparent)}
#wn .wa-line{fill:color-mix(in srgb,var(--text) 26%,transparent)}
#wn .wa-grid{stroke:color-mix(in srgb,var(--text) 14%,transparent);
  stroke-width:1.5;fill:none}
#wn .wa-a{fill:var(--go)}
#wn .wa-a2{fill:#3AE0BE}
#wn .wa-alarm{fill:var(--alarm)}
#wn .wa-ink{fill:var(--ink)}
#wn .wa-ink-t{fill:var(--ink)}
#wn .wa-ink-s{stroke:var(--ink);stroke-width:2.2;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
#wn .wa-s{stroke:var(--go);stroke-width:4;fill:none;stroke-linecap:round;
  stroke-linejoin:round}
#wn .wa-fill{fill:color-mix(in srgb,var(--go) 22%,transparent)}
#wn .wa-txt{fill:var(--text)}
#wn .wa-dim{fill:var(--dim)}
#wn .wa-a-t{fill:var(--go)}
/* Образец строки в окне переноса списком — моноширинным, как вставят. */
.card.xsample{font:12px/1.6 var(--mono);color:var(--dim)}
.pace.off{border-color:rgba(255,107,107,.7)}
.pace.off i{background:rgba(255,107,107,.25)}

.pace.near{border-color:rgba(58,224,190,.5)}
.pace.over{border-color:rgba(255,209,102,.66)}
.pace.over b{color:#FFE9AE}

.leaf:active .dot{background:var(--glow);
  box-shadow:0 0 10px 4px var(--glow),0 0 26px 10px rgba(58,224,190,.6)}
.leaf:active .cap{color:#fff}

.legend{display:flex;flex-wrap:wrap;gap:10px 14px;margin-top:11px;
  font-size:12px;color:var(--dim)}
.legend i{display:inline-block;width:9px;height:9px;border-radius:2px;
  margin-right:5px;vertical-align:-1px}

.tbl{border-collapse:collapse;width:100%;font-size:13px}
.tbl th{font:600 11px/1 var(--ui);letter-spacing:.04em;text-transform:uppercase;
  color:var(--faint);text-align:right;padding:0 0 9px 12px;white-space:nowrap}
.tbl th:first-child{text-align:left;padding-left:0}
.tbl td{padding:8px 0 8px 12px;text-align:right;white-space:nowrap;
  border-top:1px solid var(--line)}
.tbl td:first-child{text-align:left;padding-left:0;color:var(--dim)}

/* Таблица замеров: колонка с названиями стоит на месте.

   Колонок в ней столько, сколько замеров, и таблица уезжает за край
   экрана в несколько ширин. Домотав до нужного столбца, человек
   переставал понимать, к чему относится число, и мотал обратно к
   названию — читал таблицу дважды.

   Отступ карточки при этом переезжает внутрь ячеек. Иначе приклеенная
   колонка при первом же движении дёргалась бы влево на эти 14 точек:
   прилипает она к краю карточки, а стоит на 14 правее. Правый отступ
   остаётся — на нём заканчивается «Итого».

   Черта справа не украшение, а граница: без неё цифры подъезжают под
   название вплотную и на глаз сливаются с ним в одну строку. */
.card.meastbl{padding-left:0}
.meastbl .tbl th:first-child,
.meastbl .tbl td:first-child{position:sticky;left:0;z-index:1;
  background:var(--card);padding-left:14px;padding-right:10px;
  box-shadow:1px 0 0 var(--line)}
/* Длинное название переносится по словам, короткое остаётся строкой.

   «Линия грудь-спина, см» держалось одной строкой, как все ячейки
   таблицы, и растягивало колонку на треть экрана. Ширину эту платят
   все строки разом, а длинное название одно.

   Предел стоит на обёртке внутри ячейки, а не на самой ячейке:
   ширину колонки браузер считает по содержимому, и правила на ячейках
   для него пожелание, которое он отбрасывает, когда таблица шире
   экрана. Обёртка — обычный блок, и её предел соблюдается. */
.meastbl .tbl th:first-child,
.meastbl .tbl td:first-child{white-space:normal;line-height:1.3}
.meastbl .mname{display:inline-block;max-width:96px}

/* ---------- вывод о тренировке в «Прогрессе» ---------- */
/* Три серые строки мелким шрифтом читались как примечание, а это работа
   человека за три месяца. Крупное число, полоса доли и лучшее
   упражнение — чтобы было видно с порога.

   Цвет — акцент приложения, а не зелёный из «Бюджета». Там зелёное
   значит «пришли деньги», и три денежных цвета живут своей жизнью
   именно потому, что про деньги. Здесь же обычные данные, а правило
   палитры одно: первый цвет — данные и действия, второй — только
   тревога. Упавший вес поэтому коралловый: это и есть тревога. */
.prog{margin-top:11px;padding:11px 12px 12px;border-radius:12px;
  border:1px solid var(--line);background:var(--ink)}
.prog.up{border-color:rgba(77,163,255,.34);
  background:linear-gradient(158deg,rgba(77,163,255,.10),transparent 62%),
    var(--ink)}
.prog.down{border-color:rgba(251,113,133,.3);
  background:linear-gradient(158deg,rgba(251,113,133,.09),transparent 62%),
    var(--ink)}
/* Где сравнивать нечего — ни цвета, ни рамки: пунктир и серая строка.
   Радоваться нечему, и делать вид, что есть, значило бы врать. */
.prog.quiet{background:none;border-style:dashed}
.prog .pgtop{display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  font:600 10px/1 var(--ui);letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint)}
.prog .pgnone{margin-top:8px;font-size:13px;color:var(--faint)}
.prog .pgrow{display:flex;align-items:center;gap:13px;margin-top:10px}
/* Число крупное и моноширинное, как остатки занятий у имён клиентов:
   это тоже итог, на который смотрят первым. */
.prog .pgnum{flex:none;font:700 30px/1 var(--mono);letter-spacing:-.04em;
  color:var(--go)}
.prog .pgnum i{font-style:normal;font-size:16px;margin-left:2px;opacity:.75}
.prog.down .pgnum{color:var(--spend)}
.prog.flat .pgnum{color:var(--dim)}
.prog .pgwhat{font-size:12.5px;line-height:1.35;color:var(--dim)}
.prog .pgwhat b{color:var(--text);font-weight:600}
.prog .pgbar{height:5px;border-radius:3px;background:var(--line);
  margin-top:11px;overflow:hidden}
.prog .pgbar i{display:block;height:100%;border-radius:3px;
  background:var(--go)}
.prog.down .pgbar i{background:var(--spend)}
/* История веса одного упражнения: имя, «от → до», линия. В окне
   упражнения и в «Прогрессе» одна и та же разметка. */
.whist{padding:9px 0 4px;border-top:1px solid var(--line)}
.whist:first-child{border-top:0;padding-top:2px}
.whist .whead{display:flex;align-items:baseline;gap:10px;font-size:13.5px;
  margin-bottom:2px}
.whist .whead .grow{min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.whist .wkg{flex:none;font:600 12.5px var(--mono);color:var(--go)}
.whist.down .wkg{color:var(--spend)}
.whist.flat .wkg{color:var(--dim)}
#px_hist .whist{border-top:0;margin:0 0 12px;padding:9px 11px 4px;
  border:1px solid var(--line);border-radius:12px;background:var(--ink)}
.prog .pgbest{display:flex;align-items:center;gap:8px;margin-top:11px;
  font-size:13px;color:var(--text)}
.prog .pgbest svg{flex:none;color:var(--go)}
.prog .pgname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.prog .pgkg{flex:none;font-family:var(--mono);font-size:12.5px;
  color:var(--go);white-space:nowrap}

/* Значок вместо буквы в шапке раздела. Плитка та же, что была у «Т» и
   «Р», меняется только содержимое.

   Имя `emblem`, а не `pic`: `pic` уже занято скрепкой на заметке, и она
   `position:absolute` — обе кнопки шапки послушно улетели в правый
   нижний угол экрана. Ровно тот случай, о котором в заметках сказано
   третьим уроком: перед новым именем класса проверить, не занято ли. */
/* Значок чуть крупнее буквы, которая тут стояла: 20 точек против 18.
   Буква держалась своим весом, а линии значка на 18 точках тонкие и
   теряются рядом с 24-точечным названием раздела. */
.whodot.emblem svg{display:block;width:20px;height:20px}

/* Час сегодняшнего дня, который уже прошёл. Виден только в правке:
   на него ставят постоянную бронь. Приглушён, чтобы не читался как
   «сегодня ещё свободно». */
.fh.gone{opacity:.42}

/* Час, закрытый каждую неделю. Тот же знак ∞, что у связки в
   программе: «одно продолжается другим». Значок мелкий и сверху —
   само время должно читаться первым. */
.fh.every{position:relative;padding-right:17px}
.fh.every i{position:absolute;top:2px;right:4px;font-style:normal;
  font:10px/1 var(--ui);opacity:.75}

/* ---------- тренировки по месяцам ---------- */
/* Слева шкала, справа поле со столбиками, под ним имена месяцев. Всё
   тремя клетками сетки: имена так сами встают под своими столбиками, и
   выравнивать их вручную не приходится. */
.seasons{display:grid;grid-template-columns:26px 1fr;column-gap:9px;
  row-gap:7px;margin-top:16px}
.splot{position:relative;height:176px}
.sbars{position:absolute;inset:0;display:flex;align-items:flex-end;gap:5px}

/* Числа шкалы держатся тем же «снизу столько-то процентов», что и
   черты: иначе на другой высоте карточки они разъехались бы. */
.saxis{position:relative}
.saxis span{position:absolute;right:0;transform:translateY(50%);
  font:600 10px/1 var(--mono);color:var(--faint)}
.sline{position:absolute;left:0;right:0;height:1px;background:var(--line);
  opacity:.55}

/* Среднее — черта пунктиром, без подписи: само число стоит в
   заголовке. Неяркая нарочно — это мерка для сравнения, а не ещё один
   столбик. */
.savg{position:absolute;left:0;right:0;height:0;
  border-top:1px dashed var(--dim);opacity:.7}
/* Что означает пунктир — строкой под графиком. */
.slegend{display:flex;align-items:center;gap:7px;margin-top:11px;
  font:600 10px/1 var(--ui);letter-spacing:.03em;color:var(--faint)}
.slegend i{display:block;width:17px;height:0;
  border-top:1px dashed var(--dim)}

.smonth{position:relative;flex:1 1 0;min-width:0;height:100%}
.smonth i{position:absolute;left:0;right:0;bottom:0;display:block;
  border-radius:5px 5px 3px 3px;
  background:linear-gradient(180deg,var(--go),rgba(77,163,255,.45));
  transition:height .2s}
/* Самый высокий месяц — свечением, а не другим цветом: это тот же
   столбик, просто он и есть ответ на вопрос «когда наплыв». */
.smonth.top i{background:linear-gradient(180deg,var(--glow),var(--go))}
/* Число стоит над своим столбиком и поднимается вместе с ним. */
.smonth .sval{position:absolute;left:0;right:0;text-align:center;
  margin-bottom:3px;font:600 11px/1 var(--mono);color:var(--dim)}

.snames{grid-column:2;display:flex;gap:5px}
.snames span{flex:1 1 0;min-width:0;text-align:center;
  font:600 9px/1 var(--ui);letter-spacing:.04em;color:var(--faint);
  text-transform:lowercase}
/* Месяц, которого ещё не было: ни столбика, ни числа. Ноль читался бы
   как провал, хотя декабрь просто не настал. */
.snames span.none{opacity:.45}

/* Таблетка месяца нажимается — за ней год по месяцам. Нажатия ей
   возвращаются отдельно: подложка вокруг пропускает их насквозь, чтобы
   не перекрывать ветви дерева. */
/* Удержание не должно выделять текст: палец держат, чтобы посмотреть
   очередь, а браузер понимает это как «выделяю надпись». */
.pace{pointer-events:auto;cursor:pointer;user-select:none;
  -webkit-user-select:none;-webkit-touch-callout:none}
/* Связи нет — таблетка красная. Весь указатель офлайна: цвет на том,
   что и так на виду, вместо полосы с надписями внизу экрана. */
/* Ждут отправки: пунктирная рамка — запись есть, но ещё не на месте. */
.pendcard{border:1px dashed var(--line);border-radius:14px;
  padding:10px 14px;margin:0 0 12px}
.pendrow{display:flex;justify-content:space-between;gap:10px;
  padding:6px 0;border-top:1px solid var(--line)}
.pendrow:first-of-type{border-top:0;margin-top:4px}
.pace.off{border-color:rgba(251,113,133,.6);
  background:rgba(251,113,133,.16)}
.pace.off i{background:var(--alarm)}
.pace:active{transform:translateX(-50%) scale(.97)}

/* Название упражнения — оно же кнопка замены. Уголок справа говорит,
   что строка нажимается: без него это выглядит заголовком, а что за
   ним выбор, никто не догадается. */
.card.swapcard{display:flex;align-items:center;gap:11px;width:100%;
  text-align:left;margin-bottom:12px}
.card.swapcard b{font-size:15px;line-height:1.3}
.card.swapcard:active{background:var(--line)}
.chev{flex:none;width:8px;height:8px;border-right:2px solid var(--faint);
  border-bottom:2px solid var(--faint);transform:rotate(-45deg);
  margin-right:3px}

/* Заголовок части тренировки нажимается — как приём пищи в рационе.
   Пустой части нужен снизу воздух: иначе заголовок прилипает к
   следующей. */
.part .head{width:100%;text-align:left}
.part .head:active{background:var(--line)}
.part.bare .head{padding-bottom:12px}

/* ---------- разговор с помощником ---------- */
/* Пузыри, как в любой переписке: свои справа, ответы слева. Ширина не
   во весь экран — иначе не видно, где чья реплика. */
.talk{display:flex;flex-direction:column;gap:9px;margin-top:4px}
.bubble{max-width:84%;padding:10px 13px;border-radius:15px;
  background:var(--card);border:1px solid var(--line);
  font-size:14.5px;line-height:1.42;color:var(--text);
  white-space:normal;word-break:break-word}
.bubble.mine{align-self:flex-end;background:rgba(77,163,255,.14);
  border-color:rgba(77,163,255,.35)}
.bubble.wait{color:var(--faint);font-style:italic}
/* Чат: переносы строк как написаны, время мелко под текстом. */
.bubble .chattext{white-space:pre-wrap}
.bubble .chatat{display:block;margin-top:4px;font-size:11px;
  color:var(--faint);font-style:normal}
/* 👍 — кружком на нижнем краю пузыря. Двойное нажатие не должно
   приближать страницу, поэтому пузырю запрещено «двойное касание». */
.talk .bubble{position:relative;touch-action:manipulation}
.bubble .chatthumb{position:absolute;bottom:-10px;right:-6px;
  font-size:13px;line-height:1;padding:3px 5px;border-radius:11px;
  background:var(--card);border:1px solid var(--line2)}
/* Под пузырём с 👍 — место, чтобы кружок не лёг на следующий. */
.bubble.thumbed{margin-bottom:8px}
/* «Сообщения»: строка на переписку — имя, последнее сообщение одной
   строкой, когда. Точка — непрочитанное. */
.inboxrow{display:flex;align-items:center;gap:12px;width:100%;
  padding:12px 0;text-align:left;border-bottom:1px solid var(--line)}
.inboxrow:last-child{border-bottom:none}
.inboxrow .grow{min-width:0}
.inboxrow .ititle{font-weight:520}
.inboxrow .idot{display:inline-block;width:9px;height:9px;margin-left:8px;
  border-radius:50%;background:#FF9E7A;vertical-align:1px}
.inboxrow .ilast{margin-top:3px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.inboxrow .inwhen{flex:none;align-self:flex-start;margin-top:2px}

/* Срок подписки в списке клиентов: число, под ним слово мелким.
   Имя `.unit` здесь не годится — оно занято единицами измерения в
   рационе и замерах («г», «см»), и правило, поставленное ниже, молча
   перебивало их. Ровно ошибка №3 из CLAUDE.md, поймана 23 сентября
   2026 при переделке ячейки.

   В шапке карточки и в «Посещениях» слово рисует подпись под числом
   (`.capt-n i`) — та самая, что пишет «осталось»: второй механизм для
   того же был бы лишним. */
.crow .rest{flex-direction:column;line-height:1;gap:2px}
.crow .rest .dnum{font:650 20px/1 var(--mono)}
.crow .rest .dword{font:500 8.5px/1 var(--ui);opacity:.5;
  letter-spacing:.04em;text-transform:uppercase}
/* Два вида блоков (27 сентября 2026): слева на месте номера — второй
   вид (сплит), справа — первый (индивидуальные). Слово под числом тем
   же мелким, что «дней» у подписки; цвет у каждого числа свой. */
.crow .no.kind{flex-direction:column;gap:2px;line-height:1;
  color:var(--text)}
.crow .no.kind .dnum{font:650 18px/1 var(--mono);letter-spacing:-.03em}
.crow .no.kind .dword{font:500 8.5px/1 var(--ui);opacity:.5;
  letter-spacing:.04em;text-transform:uppercase}
.crow .no.kind.low{color:#FFD08A}
.crow .no.kind.out{color:var(--debt)}
html[data-theme="light"] .crow .no.kind.low{color:#9A6200}
html[data-theme="light"] .crow .no.kind.out{color:#C0304A}
html[data-theme="white"] .crow .no.kind.low{color:#7A4B00}
html[data-theme="white"] .crow .no.kind.out{color:#A3193A}
/* Два остатка у имени в шапке — рядом, каждый со своей подписью. */
.capt-n.two{display:flex;gap:11px}
/* Остаток у имени — ярким, а не серым: рядом с крупным именем серое
   число терялось (Артём, 27 сентября 2026). Подпись под ним остаётся
   приглушённой, тревожные цвета — свои. */
.capt-n.bright,.capt-n.two .bright{color:var(--text);font-weight:650}
.capt-n.two .low{color:#FFD08A}
.capt-n.two .out{color:var(--debt)}
/* Плашка дня в переписке — посередине, мелко, как в мессенджерах. */
.talk .chatday{align-self:center;margin:10px 0 2px;padding:3px 11px;
  border-radius:10px;font-size:12px;color:var(--faint);
  background:var(--card);border:1px solid var(--line)}
.bubble .chatseen{margin-left:5px;letter-spacing:-2px}
.bubble .chatseen.on{color:var(--go)}
/* Запись, подготовленная Darim, ждёт «да» — под последним ответом. */
.talkconfirm{margin-top:10px;border-color:var(--go)}

/* Поле вопроса — внизу и всегда на виду, как нижняя полоса в других
   разделах. Растёт вместе с вопросом, но не выше трети экрана. */
.askbar{position:fixed;left:14px;right:14px;bottom:20px;z-index:40;
  display:flex;align-items:flex-end;gap:9px;padding:8px;
  border-radius:26px;background:rgba(14,16,19,.92);
  border:1px solid var(--line2);backdrop-filter:blur(8px)}
@supports(bottom:max(0px)){
  .askbar{bottom:max(20px,calc(env(safe-area-inset-bottom) + 12px))}}
.askbar textarea{flex:1;min-height:38px;max-height:132px;resize:none;
  border:none;background:none;color:var(--text);font:14.5px/1.4 var(--ui);
  padding:9px 6px 9px 10px;outline:none}
.askbar .round{flex:none;width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;padding:0;
  background:var(--go);color:var(--on-accent);border:none}
.askbar .round:disabled{opacity:.5}
/* Правая кнопка, пока слушает, — пульсирует: человек должен видеть,
   что его слышат. Стрелка при пустом поле — приглушена: нажимать там
   нечего. Левая, «назад», — серая, как возврат в других полосах. */
.askbar .round.on{animation:micpulse 1.2s ease-in-out infinite}
.askbar .round.idle{opacity:.45}
.askbar .round.pale{background:var(--line);color:var(--text)}
.askbar .round.pale:active{background:var(--go);color:var(--on-accent)}
@keyframes micpulse{0%,100%{box-shadow:0 0 0 0 rgba(77,163,255,.45)}
  50%{box-shadow:0 0 0 7px rgba(77,163,255,0)}}

/* ---------- рацион ---------- */

/* Дни неделей, а не числами: «вт» человек читает сразу, а «2» переводит
   в голове. Плитка шире номерной — под две буквы. */
.pday.week .dtab{width:38px;font:600 12.5px/1 var(--ui);
  letter-spacing:.02em}
/* Числа месяца над плитками — той же сеткой, что плитки, чтобы каждое
   встало над своим днём. Сегодняшнее чуть ярче. */
.pday.week.nums{margin:16px 2px -4px}
.pday.week.nums span{flex:none;width:38px;text-align:center;
  font:500 10px/1 var(--mono);color:var(--faint)}
.pday.week.nums span.now{color:var(--go)}

/* Ряд под итогом: «взять из плана». Кнопка того же вида, что чипы, но
   со своим цветом: это действие, а не переключатель. */
.chips.foodrow{margin:14px 0 10px;align-items:center}
.chips.foodrow .chip.plan{margin-left:auto;background:var(--go);
  border-color:var(--go);color:var(--on-accent)}

/* Срок графика — в его правом нижнем углу, поверх поля: это настройка
   того, что показано, и место ей на том, что она настраивает. Мелко и
   приглушённо, выбранное — акцентом: кнопки не должны спорить с самой
   линией. */
.chartbox{position:relative}
.spanpick{position:absolute;right:12px;bottom:9px;display:flex;gap:3px}
.spanpick button{border:none;background:none;padding:3px 6px;
  border-radius:7px;font:600 10px/1 var(--ui);color:var(--faint)}
.spanpick button.on{background:rgba(77,163,255,.16);color:var(--go)}

/* Какой день открыт и какое это число. Рацион недельный и повторяется,
   но живёт человек по календарю: «вторник» говорит ему меньше, чем
   «вторник, 2 сентября». */
.daydate{display:flex;align-items:baseline;gap:8px;margin:14px 4px 10px;
  font:600 13px/1 var(--ui);color:var(--dim)}
.daydate.now{color:var(--text)}
.daydate span{font:400 12.5px/1 var(--mono);color:var(--faint)}

/* Приёмы пищи покрашены каждый в свой цвет — это не украшение, а метка:
   день читается сверху вниз, и глаз ловит границы приёмов, не читая
   слов. Цвета по времени суток: утро тёплое, день акцентный, вечер
   сиреневый. Перекусы серые — они необязательные и второстепенные.

   Своими значениями, а не переменными палитры: акцент человек может
   сменить в настройках, и завтрак не должен от этого стать зелёным. */
/* Заголовок приёма пищи — кнопка: нажатие на него и добавляет в него
   продукт. Кнопкой, а не строкой «пусто · вписать» под ним: та
   объясняла то, что и так делается пальцем. */
.part.meal .head{justify-content:flex-start;width:100%;text-align:left}
.part.meal .head:active{background:var(--line)}
/* Пустой приём пищи — только заголовок, и снизу ему нужен воздух:
   иначе он прилипает к следующему. */
.part.meal.bare .head{padding-bottom:12px}
.part.meal .head>span:first-of-type{color:var(--text)}
/* Завтрак — мятный. Третий цвет из той же семьи, что синий у обеда и
   сиреневый у ужина: приглушённый и холодный. Тёплые оранжевый и
   песочный, что стояли до него, тянули взгляд на себя — рядом с
   двумя спокойными соседями любой тёплый цвет кричит. */
.part.meal.breakfast .head::before{background:#5FD3C0}
.part.meal.breakfast .head>span:first-of-type{color:#5FD3C0}
.part.meal.lunch .head::before{background:#4DA3FF}
.part.meal.lunch .head>span:first-of-type{color:#4DA3FF}
.part.meal.dinner .head::before{background:#A78BFA}
.part.meal.dinner .head>span:first-of-type{color:#A78BFA}
.part.meal.snack1 .head::before,
.part.meal.snack2 .head::before{background:var(--line2)}

/* Строка продукта: название и четыре числа колонками. Ширины колонок
   постоянные, поэтому строки сходятся с итогом дня в другой карточке —
   ради этого сравнения таблица внизу и стоит. */
.rrow{display:grid;grid-template-columns:minmax(0,1fr) repeat(4,42px);
  align-items:baseline;width:100%;padding:10px 14px;text-align:left;
  border-top:1px solid var(--line)}
.part.meal .rrow:first-of-type{border-top:none}
.rrow.open:active{background:var(--line)}
/* Буквы колонок над днём: та же сетка, что у строк, — иначе они встали
   бы не над своими числами. Мелко и приглушённо: это подпись к
   колонкам, а не данные. */
.rrow.cols{border-top:none;padding:0 14px 6px;align-items:end}
.rrow.cols .rnum{font-family:var(--ui);font-size:9.5px;font-weight:700;
  letter-spacing:.14em;color:var(--faint)}
/* Название переносится и видно целиком, а вес идёт частью той же
   строки. Прежде имя обрезалось многоточием, чтобы вес поместился
   рядом отдельной колонкой, — и длинное название читалось наполовину.
   Строка от этого иногда занимает две, и это честная цена. */
.rname{min-width:0;font-size:14.5px;font-weight:500;line-height:1.35;
  color:var(--text)}
.rname .unit{white-space:nowrap}
.rnum{text-align:right;font-family:var(--mono);font-size:13px;
  font-variant-numeric:tabular-nums;color:var(--dim)}
/* Калории — главное число строки, поэтому они не приглушены. */
.rnum.kk{color:var(--text)}

/* Поле поиска продукта и кнопка «в базе» — одной строкой. Своим
   справочником отвечает поле на лету, внешней базой — кнопка: та в
   чужих руках и на очередь запросов отвечает молчанием. */
.findrow{display:flex;gap:8px;align-items:stretch;margin-bottom:8px}
.findrow input{flex:1;min-width:0}
.findrow .btn{flex:none;width:auto;padding:0 14px;white-space:nowrap}

/* Кнопка со значком в строке поиска — уже словесной: она узнаётся по
   рисунку, а место в строке дорого. */
.findrow .btn.scan{width:auto;padding:0 11px;display:flex;
  align-items:center;justify-content:center}

/* Окошко камеры. Шире не делаем: штрихкод читается и с ладони, а
   половина экрана под видео оставила бы форму за краем. */
.scanbox{padding:10px}
.scanbox video{width:100%;max-height:190px;border-radius:11px;
  background:#000;object-fit:cover;display:block}

/* Итог дня и норма — колонка в колонку со строками выше. Видно не
   «съедено» и «положено» порознь, а сошлось или нет. */
/* Итог дня — карточка с акцентной кромкой и мягким свечением: это
   ответ на вопрос, ради которого день и смотрят, и он должен быть
   виден с порога. Числа крупнее обычных строк, полосы толще. Сам
   принцип полос — доля от нормы — прежний, он Артёму нравится. */
.card.totals{padding:12px 0 13px;
  border:1px solid rgba(77,163,255,.32);
  background:linear-gradient(180deg,rgba(77,163,255,.09),
    rgba(77,163,255,.02) 55%,var(--card));
  box-shadow:0 0 18px rgba(77,163,255,.10),
             inset 0 0 14px rgba(77,163,255,.04)}
.card.totals .rrow{border-top:none}
/* Подписи строк — теми же микрозаголовками, что и всюду в приложении:
   заглавными, в разрядку, приглушённо. Обычным предложением «Итого за
   день» спорило с числами за взгляд, хотя оно всего лишь подпись к
   ним. Числа же остаются моноширинными, как всякое число здесь. */
.card.totals .rname{font:700 9.5px/1.3 var(--ui);letter-spacing:.2em;
  text-transform:uppercase;color:var(--faint)}
.card.totals .rrow.head .rnum{color:var(--text);font-weight:700;
  font-size:18px;letter-spacing:-.02em}
/* Калории в итоге — акцентом: главное число дня. */
.card.totals .rrow.head .rnum.kk{color:var(--go)}
.card.totals .rrow.norm{padding-top:3px;width:100%;text-align:left}
.card.totals .rrow.norm:active{background:var(--line)}
.card.totals .rrow.norm .rnum{color:var(--faint);font-size:12px}
.card.totals .rrow.bars{padding:5px 14px 4px}
/* Полоска доли от нормы. Своим именем `tbar`, а не `bar`: тем уже
   размечен остаток занятий в строке клиента, и новое правило молча
   перебило бы его. */
.card.totals .tbar{display:block;height:7px;margin-left:6px;
  border-radius:4px;background:rgba(255,255,255,.07);overflow:hidden}
.card.totals .tbar b{display:block;height:100%;border-radius:4px;
  background:linear-gradient(90deg,rgba(77,163,255,.7),var(--go));
  box-shadow:0 0 8px rgba(77,163,255,.45);transition:width .2s}
/* Перебрал норму — коралловый: это и есть тревога, а тревожного цвета
   в приложении мало нарочно. */
.card.totals .tbar.over b{background:linear-gradient(90deg,
  rgba(251,113,133,.7),var(--alarm));box-shadow:0 0 8px rgba(251,113,133,.45)}

.grid{display:flex;flex-wrap:wrap;gap:7px}
.grid figure{flex:1 1 30%;min-width:90px}
.grid figure{margin:0}
.grid img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:10px;
  border:1px solid var(--line);display:block;background:var(--card)}
.grid figcaption{font:11.5px/1.4 var(--mono);color:var(--faint);text-align:center;
  margin-top:5px}
.pair{display:flex;gap:9px;margin-bottom:4px}
.pair figure{flex:1 1 0;min-width:0}
.pair figure{margin:0}
.pair img{width:100%;border-radius:12px;border:1px solid var(--line);display:block}
.pair figcaption{font:12px/1.4 var(--mono);color:var(--dim);text-align:center;
  margin-top:6px}

.back{color:var(--dim);font-size:14px;padding:4px 0 12px;display:inline-block}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- главное меню: углы, перестановка, плиты дороги ---------- */

/* Плашка вокруг значка держится тесно: она обозначает кнопку, а не
   занимает угол. Палец попадает по 44 точкам без промаха. */
.corner{position:absolute;top:16px;z-index:4;
  width:44px;height:44px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(8,10,22,.42);border:1px solid rgba(122,255,232,.32);
  backdrop-filter:blur(5px)}
/* Кнопка помощника меньше прочих углов в полтора раза. Остальные —
   сводка, настройки — на каждый день, а к помощнику заходят по случаю;
   в полный размер он спорил за взгляд с самим деревом.

   Уменьшается вся кнопка вместе со значком: одна плашка в 44 точки с
   мелким рисунком внутри выглядела бы пустой рамкой. */
.corner.ask{width:30px;height:30px;border-radius:10px}
.corner.ask .ico{width:16px;height:16px}
/* Чат встал в угол, где была лупа, — лупа сдвинута левее него
   (Артём, 22 сентября 2026). Отступ: край, кнопка, зазор. */
.corner.ask.beside{right:56px}
/* Непрочитанное в чате — точкой, а не числом: на кнопке в тридцать
   точек кружок с числом закрыл бы сам значок. */
.corner.ask .chatdot{position:absolute;top:-4px;right:-4px;width:11px;
  height:11px;border-radius:50%;background:#FF9E7A;
  border:1.5px solid rgba(6,14,20,.85)}

.corner.left{left:16px}
.corner.right{right:16px}
/* Отступ от верхнего края: там часы и вырез камеры. */
@supports(top:max(0px)){
  .corner{top:max(16px,calc(env(safe-area-inset-top) + 8px))}}
/* Нижний угол: там полоса жестов телефона, отступ считаем от неё. */
.corner.down{top:auto;bottom:16px}
@supports(bottom:max(0px)){
  .corner.down{bottom:max(16px,calc(env(safe-area-inset-bottom) + 10px))}}
/* Под заметкой: верх экрана отдан ей, шестерёнка встала следом.
   Отсчёт от кнопки «Цены» — тот же, что у нижней границы заметки. */
.corner.under{top:calc(40dvh - 84px)}
.corner .ico{width:24px;height:24px}
.corner:active{background:rgba(58,224,190,.24)}

/* Метка на кнопке сводки — тот же кружок с числом, что на ветвях.
   Цвет свой: разделы разобрали свои, а сводка не раздел, и путать
   её с ними не надо. Висит, пока сводку не откроют. */
.corner .badge{position:absolute;top:-7px;right:-7px;min-width:21px;
  height:21px;padding:0 5px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  font:700 11px/1 var(--mono);color:#08131A;background:#FF9E7A;
  border:1.5px solid rgba(6,14,20,.85);
  box-shadow:0 0 10px rgba(0,0,0,.5)}

.hint{position:absolute;left:50%;bottom:64px;transform:translateX(-50%);
  z-index:4;white-space:nowrap;font-size:12px;color:#DDEFEA;
  padding:8px 15px;border-radius:14px;
  background:rgba(8,10,22,.62);border:1px solid rgba(122,255,232,.34);
  backdrop-filter:blur(5px)}

.grove.editing .leaf .pod{border-style:dashed;
  animation:nudge 1.6s ease-in-out infinite}
@keyframes nudge{50%{transform:translateY(-2px)}}
.leaf.dragging{z-index:5}
.leaf.dragging .pod{transform:scale(1.12);
  box-shadow:0 0 22px 8px rgba(58,224,190,.7)}

#shell.full header{display:none}
#shell.full main{padding:0}
.grove{margin-left:0;height:100dvh}
/* Главный экран прибит к окну — 22 сентября 2026, по снимкам Артёма:
   после свайпа вниз на андроиде экран съезжал вверх — цитата уходила
   под строку состояния, снизу вставала пустая полоса, справа ползунок.
   Размер при этом не менялся: страница прокручивалась. Высоту окна
   телефон при запуске с ярлыка считает с запасом, `100dvh` выходил
   выше видимого, и прокручивать было что. Прибитый к окну экран всегда
   занимает ровно видимую область и из потока страницы выпадает —
   прокручивать становится нечего. */
#shell.full .grove{position:fixed;inset:0;width:auto;height:auto}

/* ---------- годовой свод ---------- */
.scroller{overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--line);border-radius:var(--r);background:var(--card);
  scrollbar-width:none;-ms-overflow-style:none}
.scroller::-webkit-scrollbar{display:none;width:0;height:0}
/* Ширины колонок заданы жёстко, а не по содержимому.
   Таблицы ездят вбок вместе, а ширину колонки задавало самое длинное
   в ней: у расходов «Непредвиден.» и «176.9к», у вложений «Лена» и «·».
   Колонки разъезжались, и август расходов вставал над мартом доходов.

   Одного table-layout:fixed мало: пока ширина самой таблицы auto,
   браузер откатывается на подбор по содержимому, и правило молча ничего
   не делает. Поэтому ширина проставляется числом на самой таблице —
   её считает yearTable из ширин колонок ниже. */
table.year{border-collapse:separate;border-spacing:0;font-size:12px;
  white-space:nowrap;table-layout:fixed}
/* Ширины держатся рядом с COL_W в app.html: таблица считает свою
   ширину из тех же чисел, и разойтись им нельзя. Расширены 26 августа
   2026 вместе с переходом на точные суммы: «28 800» на три знака
   длиннее, чем «29к». */
table.year th.stick{width:116px}
table.year th.mo{width:68px}
table.year th.tot{width:82px}
table.year th.avg{width:74px}
table.year th.pl{width:72px}
table.year th{font:600 10.5px/1 var(--ui);letter-spacing:.03em;
  text-transform:uppercase;color:var(--faint);padding:10px 9px;
  background:var(--card);border-bottom:1px solid var(--line)}
table.year td{padding:9px 5px;border-bottom:1px solid var(--line);
  color:var(--text);white-space:nowrap}
/* Разделитель тысяч тонким пробелом: обычный в моноширинном шрифте
   такой же ширины, как цифра, и «28 800» растягивается на семь знаков
   вместо шести с половиной. На двенадцати колонках это набегает. */
table.year .num{font-size:12px;letter-spacing:-.02em}
table.year .num{text-align:right;font-family:var(--mono)}
table.year .zero{color:var(--faint)}
table.year .plan{color:var(--dim);cursor:pointer}
/* План рядом со средним: когда среднее вышло за мерку, красится среднее,
   а сама мерка лишь проступает ярче. Красить обе значило бы кричать
   дважды об одном. */
table.year .plan.overplan{color:var(--text)}
table.year .plan:active{background:rgba(58,224,190,.16)}
table.year .total{color:#fff;font-weight:600}
/* В светлых темах белый итог пропадал на белой ячейке: столбец «Итого»
   в «Годе» стоял пустым (Артём, 4 октября 2026). Тёмная — как была. */
html[data-theme="light"] table.year .total,
html[data-theme="white"] table.year .total{color:var(--text)}
table.year .over{color:var(--warn);font-weight:600}
table.year .ic{display:inline-block;width:20px;margin-right:5px;
  font-size:13px;text-align:center}
table.year .cell{cursor:pointer}
table.year .cell:active{background:rgba(58,224,190,.16)}
.line .ic{display:inline-block;width:20px;margin-right:6px;text-align:center}
/* Первая колонка ужата: раньше её ширину задавало самое длинное название,
   и «Связь транспорт подписки» отъедало треть экрана у месяцев, ради
   которых сетку и открывают. Имена сокращены по словам (shortCat),
   а что не влезло — под многоточием, полное имя в подсказке ячейки. */
table.year .stick{position:sticky;left:0;z-index:2;background:var(--card);
  text-align:left;color:var(--dim);
  max-width:120px;overflow:hidden;text-overflow:ellipsis;
  box-shadow:1px 0 0 var(--line)}
table.year thead .stick{z-index:3}
table.year tr.sum td{border-top:1px solid var(--line2);border-bottom:none;
  font-weight:600;color:var(--text)}
#toast .undo{margin-left:14px;color:var(--go);font-weight:600;
  font-size:13.5px;padding:2px 4px}

/* Стрелки отмены из бюджета убраны: они стояли сразу под названием раздела
   и первой строкой экрана показывали не деньги, а служебную кнопку.
   Имя класса .arrow снова свободно. */

/* ---------- шапка и первая колонка годовой таблицы ---------- */
table.year thead th{background:#1E2C33;color:#9FD5C9;
  border-bottom:1px solid var(--line2)}
table.year thead th.stick{background:#22323A;color:#BFEDE1}
table.year tbody .stick{background:#161F27;color:#CFE0DB}
table.year tbody tr:nth-child(even) td{background:rgba(255,255,255,.022)}
table.year tbody tr:nth-child(even) .stick{background:#19232B}
table.year tr.sum .stick{background:#1E2C33;color:#BFEDE1}

/* ---------- стрелки шагов ---------- */
.steps{display:flex;align-items:center;gap:8px;margin:0 2px 12px}
.step{width:38px;height:38px;border-radius:11px;font-size:17px;
  color:var(--text);background:var(--line);border:1px solid var(--line2)}
.step:active{background:var(--go)}
.step.off{color:var(--faint);background:transparent;
  border-color:var(--line);pointer-events:none}
.steps .what{font-size:12px;color:var(--faint);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

/* ---------- выделение шапки и категорий ---------- */
table.year thead th{background:#1F2B3A;color:#BFD3E6;
  border-bottom:1px solid var(--line2)}
table.year thead .stick{background:#22303F;color:#DCE9F5}
table.year .stick{background:#161E27;color:#C6D6D2;font-weight:520}
table.year tbody tr:nth-child(even) td{background:rgba(255,255,255,.022)}
table.year tbody tr:nth-child(even) .stick{background:#19222C}
table.year td.now{background:rgba(58,224,190,.10)}
table.year th.now{background:#25404A;color:#BFF4E8}

/* ---------- аналитика ---------- */
.rank{padding:9px 0}
.rank + .rank{border-top:1px solid var(--line)}
.rank .share{color:var(--faint);min-width:38px;text-align:right;
  font-size:12px;margin-left:10px}
.rank .bar{height:4px;background:var(--line);border-radius:3px;margin-top:7px;
  overflow:hidden}
.rank .bar i{display:block;height:100%;background:var(--go);border-radius:3px}

.client .today{display:inline-block;font-size:10.5px;letter-spacing:.03em;
  text-transform:uppercase;color:var(--go);border:1px solid var(--go);
  border-radius:5px;padding:1px 5px;vertical-align:1px;margin-left:4px}
.client .tick{position:relative}
.client .tick::after{content:'';position:absolute;left:-8px;right:-8px;
  top:-8px;bottom:-8px}

/* ---------- круговая диаграмма ---------- */
.grew{display:block;width:100%;height:auto}
.grew .axis{font:500 8px var(--ui);fill:var(--dim)}
.spark{flex:none;width:64px;height:26px}
.spark.wide{width:100%;height:54px}
/* Цветная метка вида бумаги: акции своим цветом, облигации своим.
   Раздел был серым насквозь, и глазу не за что было зацепиться. */
.kindtag{display:inline-block;width:7px;height:7px;border-radius:2px;
  margin-right:6px;vertical-align:1px}
.dotmark{display:inline-block;width:9px;height:9px;border-radius:2px;
  margin-right:6px}
/* Зелёного «плюса» в приложении больше нет нигде: всё, что растёт и
   выгодно, говорит акцентом (var(--go)), всё, что падает и дорожает, —
   красным (var(--debt)). Прежняя переменная --rise убрана, чтобы её
   не завели снова по привычке.

   Уцелел один зелёный, и не как знак: кружок покупки на графике цены
   (BUY_COLOR). Там цвет разводит точки и линию, а не говорит «хорошо».

   Доход в «Бюджете» этого не касается: там свои три цвета денег, и
   они значат вид, а не направление. */
.chip.off{opacity:.45}
/* Кнопка в заголовке окна: мелкая и прижата вправо. Обычный чип рядом
   с названием выглядел вторым заголовком. */
#panel h3{display:flex;align-items:center;gap:10px}
/* Кнопка в заголовке окна. Не фильтр и не пометка — действие, поэтому
   залита цветом, а не обведена рамкой: серая таблетка рядом с чипами
   выбора терялась среди них и читалась как ещё один выбор.

   Плюс отдельным знаком и покрупнее: по нему кнопку и находят,
   не читая. */
/* «Новая тренировка» — вторым цветом палитры, а не первым: рядом с
   «плюсом» того же цвета она читалась как ещё одна кнопка добавления.
   Просьба Артёма 7 сентября 2026. */
.headadd{flex:none;margin-left:auto;display:flex;align-items:center;
  gap:6px;padding:7px 13px 7px 10px;border-radius:20px;
  background:var(--alarm);color:var(--on-accent);
  font:600 12.5px/1 var(--ui);white-space:nowrap}
.headadd i{font:600 17px/1 var(--mono);font-style:normal;margin-top:-1px}
.headadd:active{transform:scale(.95);opacity:.85}
.chip.mini{margin-left:auto;padding:4px 11px;font-size:11.5px;
  font-weight:600;flex:none}
/* Кнопка, после которой не отменишь: рамка цветом долга, а не заливка —
   заливка притягивает палец, а этой кнопке того и не надо. */
/* Столбики выплат по месяцам. Ширину задаёт ряд, высоту — сумма. */
.paybar{border-radius:3px 3px 1px 1px;min-height:2px}
.paymon{font:600 9px/1 var(--ui);color:var(--dim);margin-top:6px}
.paymon.peak{color:var(--go)}
/* Шкала слева у столбиков выплат: те же 72 точки, что и высота
   самого высокого столбика, плюс место под подписи месяцев. */
.payscale{flex:none;display:flex;flex-direction:column;
  justify-content:space-between;height:72px;margin-bottom:18px;
  font:500 8px var(--ui);color:var(--dim);text-align:right}
.h2row.lit h2{color:var(--go)}
.btn.warn{border-color:var(--debt);color:var(--debt)}
.btn.warn:active{background:var(--debt);color:var(--on-accent)}
/* Тикер в списке позиций: он тут главное слово, а не подпись. */
.pos .tick{font:600 15.5px/1.2 var(--mono);letter-spacing:.02em}
/* Плашка со значком: буквы под картинкой. Картинка ложится поверх,
   если файл нашёлся, — иначе видно буквы. */
.brand{position:relative;flex:none;width:33px;height:33px;border-radius:8px;
  overflow:hidden;display:flex;align-items:center;justify-content:center;
  margin-right:11px;align-self:center}
.brand i{font:700 11px/1 var(--ui);font-style:normal;color:#fff;
  letter-spacing:.02em;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.brand img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;background:#fff}
.pos.holding{transform:scale(.97);opacity:.8}
/* Переключатель рядом с названием списка: мельче обычных чипов,
   иначе он спорит с заголовком за место. */
.h2row .chips.small{flex:none;width:auto;margin-bottom:6px;overflow:visible}
.chips.small .chip{padding:5px 11px;font-size:11.5px}
.card.top{border-color:var(--line2);
  background:linear-gradient(160deg,rgba(58,224,190,.07),transparent 60%),
    var(--card)}
.whodot.on{filter:drop-shadow(0 0 12px rgba(58,224,190,.75))}
.whodot.on i{color:var(--go)}
.pierow{display:flex;align-items:center;gap:16px}
.pie{width:132px;height:132px;flex:none}
.pielist{flex:1;min-width:0}
.pielist .line{padding:6px 0}
.pielist i{display:inline-block;width:9px;height:9px;border-radius:2px;
  margin-right:7px;vertical-align:-1px}
@media (max-width:360px){.pierow{flex-direction:column;align-items:stretch}
  .pie{margin:0 auto}}

/* ---------- запись удержанием ---------- */
/* ---------- нижняя полоса заметок ---------- */
.notebar{position:fixed;left:14px;right:14px;bottom:20px;z-index:40;
  display:flex;align-items:center;gap:10px;
  padding:8px;border-radius:30px;
  background:var(--bar);border:1px solid var(--line2);
  backdrop-filter:blur(8px)}
@supports(bottom:max(0px)){
  .notebar{bottom:max(20px,calc(env(safe-area-inset-bottom) + 12px))}}

.notebar .round{flex:none;width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;position:relative}
.notebar .add{background:var(--line);color:var(--text);
  border:1px solid var(--line2)}
.notebar .add:active{background:var(--go);color:var(--on-accent)}
.notebar .mic{background:var(--go);color:var(--on-accent);touch-action:none}
.notebar .mic .ring{position:absolute;left:-6px;right:-6px;top:-6px;
  bottom:-6px;border-radius:50%;border:2px solid var(--go);opacity:0}
.notebar .mic.rec{background:var(--alarm);color:#fff}
.notebar .mic.rec .ring{opacity:.7;animation:pulsing 1.2s ease-out infinite}
.notebar .mic.cancel{background:var(--warn)}

.notebar .find{flex:1;min-width:0;background:transparent;border:none;
  font-size:14.5px;color:var(--text);padding:0 4px}
/* Без поиска кнопки расходятся по краям: плюс слева, лупа посередине,
   микрофон справа. Позиционируем каждую отдельно — так их расположение
   не зависит от того, как браузер выстраивает строку. */
.notebar:not(.finding){display:block;height:62px;position:fixed}
.notebar:not(.finding) .add{position:absolute;left:8px;top:8px}
.notebar:not(.finding) .quiet:nth-of-type(2){position:absolute;left:33%;
  top:8px;transform:translateX(-50%)}
/* Возврат словом — таблетка, а не круг, и мерки у неё свои: правило
   .round выше задаёт жёсткие 46 на 46, в которые слово не влезает.
   Ширину не задаём вовсе — пусть будет по слову.
   Смещение через transform, а не отрицательным полем: поле считалось
   от ширины кружка, а у таблетки она другая и меняется от языка. */
.notebar .back{width:auto;height:46px;border-radius:23px;padding:0 20px;
  font-size:13.5px;color:var(--text);
  display:flex;align-items:center;justify-content:center;
  background:var(--line);border:1px solid var(--line2)}
.notebar .back:active{background:var(--go);color:var(--on-accent)}
/* На узком экране таблетка «Назад» подходит к «плюсу» вплотную: при
   320 точках между ними остаётся два пикселя. Ужимаем поля — слово
   от этого не страдает, а кнопки перестают тереться боками. */
@media (max-width:360px){.notebar .back{padding:0 12px;font-size:13px}}
.notebar:not(.finding) .quiet:nth-of-type(3){position:absolute;left:67%;
  top:8px;margin-left:-23px}
.notebar:not(.finding) .mic{position:absolute;right:8px;top:8px}
.notebar .find{padding:0 8px}
.notebar .quiet{background:var(--line);color:var(--dim);
  border:1px solid var(--line2)}
.notebar .quiet:active{color:var(--go)}
.notebar .find::placeholder{color:var(--faint)}
@keyframes pulsing{to{transform:scale(1.5);opacity:0}}

.mic-hint{position:fixed;right:18px;bottom:96px;z-index:40;
  max-width:66vw;font-size:12px;color:#DDEFEA;text-align:right;
  padding:8px 13px;border-radius:13px;background:rgba(8,10,22,.72);
  border:1px solid rgba(122,255,232,.28);backdrop-filter:blur(4px);
  opacity:0;transform:translateY(6px);transition:.16s;pointer-events:none}
.mic-hint.on{opacity:1;transform:translateY(0)}

/* ---------- свой проигрыватель ---------- */
.rec{display:flex;align-items:center;gap:10px;margin-top:11px}
.rec .play{width:38px;height:38px;border-radius:50%;flex:none;padding:0;
  background:var(--line);border:1px solid var(--line2);
  color:var(--text)}
.rec .play:active{background:var(--go)}
/* Время не сжимается и не переносится: «0:03 / 0:10» должно оставаться
   одной строкой, иначе проигрыватель прыгает по высоте на каждой секунде. */
.rec .time{font-size:12.5px;color:var(--dim);flex:none;white-space:nowrap}
.rec .rate{flex:none;font-size:12px;color:var(--dim);
  padding:5px 11px;border-radius:9px;background:var(--line);
  border:1px solid var(--line2)}
.rec .rate:active{color:var(--text)}

/* Дорожка перемотки. Сама полоска тонкая, но поле высокое и прозрачное:
   в четыре пиксела пальцем не попасть, а промах читается как «не
   работает». Пройденная часть закрашивается через переменную --played —
   до полоски из кода не дотянуться, её рисует псевдоэлемент.

   Общее правило для input задаёт рамку, фон и отступы — здесь всё это
   снимается, иначе дорожка выглядела бы полем ввода. */
.rec .seek{flex:1;min-width:0;width:auto;height:22px;margin:0;padding:0;
  border:none;background:transparent;outline:none;
  -webkit-appearance:none;appearance:none}
.rec .seek::-webkit-slider-runnable-track{height:4px;border-radius:2px;
  background:linear-gradient(90deg,var(--go) var(--played,0%),
    var(--line2) var(--played,0%))}
.rec .seek::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:14px;height:14px;margin-top:-5px;border-radius:50%;
  background:var(--go);border:none}
.rec .seek::-moz-range-track{height:4px;border-radius:2px;
  background:var(--line2)}
.rec .seek::-moz-range-progress{height:4px;border-radius:2px;
  background:var(--go)}
.rec .seek::-moz-range-thumb{width:14px;height:14px;border-radius:50%;
  background:var(--go);border:none}

.card.pinned{border-color:rgba(122,255,232,.4)}

/* Обе кнопки записи стоят по углам, а не в строке над текстом: строка
   съедала треть ширины на каждой заметке. Закрепление наверху справа,
   скрепка внизу справа — текст идёт во всю ширину между ними. */
.pin{position:absolute;top:7px;right:7px;font-size:17px;
  color:var(--line2);padding:5px 7px;line-height:1}
.pin.on{color:var(--glow)}

/* Кнопки разделов ушли ниже, между ветвями — наверху освободилось
   место, и закреплённое читается спокойно, а не полоской. */
/*
 * Отведённая область под заметку: от самого верха экрана до шестерёнки,
 * которая теперь стоит под ней. Заметка идёт первой — её читают, а не
 * нажимают, и место у верхнего края самое спокойное.
 *
 * Границы заданы жёстко, поэтому длинная заметка никуда не выходит:
 * она прокручивается внутри пальцем, а разделы остаются на месте.
 * Ширина области не меняется, а высота — да: короткая заметка
 * занимает столько, сколько ей нужно, и пустой рамки под ней нет.
 *
 * Нижняя граница считается от кнопки «Цены» (она на 40% высоты):
 * 30 точек — половина её плашки, 44 — шестерёнка, остальное просветы.
 */
.pins{--pins-top:14px;
  position:absolute;left:20px;right:20px;top:var(--pins-top);z-index:3;
  max-height:calc(40dvh - 94px - var(--pins-top));
  overflow:hidden;display:flex;flex-direction:column;gap:9px}
@supports(top:max(0px)){
  .pins{--pins-top:max(14px,calc(env(safe-area-inset-top) + 6px))}}

.pin-note{position:relative;border-radius:16px;background:rgba(8,10,22,.7);
  border:1px solid rgba(122,255,232,.26);backdrop-filter:blur(5px);
  overflow:hidden;display:flex;min-height:0}
/* Справа оставлено место под кнопку «скопировать»: она стоит в углу
   рамки, а не в тексте, и с прокруткой длинной заметки не уезжает. */
/* Правый отступ был 44 — под кнопку «скопировать». Кнопку убрали
   26 августа 2026, и место вернулось тексту: держать пустую полосу
   под кнопкой, которой нет, значило бы сужать цитату задаром. */
.pin-body{font-size:14.5px;line-height:1.5;color:#EAF6F3;
  padding:14px 17px;flex:1;min-height:0;overflow-y:auto;
  -webkit-overflow-scrolling:touch}
.pin-body::-webkit-scrollbar{width:3px}
.pin-body::-webkit-scrollbar-thumb{background:rgba(122,255,232,.3);
  border-radius:2px}
.pin-body .faint{display:block;margin-top:8px;font-size:12.5px}

.note-pic{width:100%;border-radius:11px;margin-top:11px;display:block;
  border:1px solid var(--line)}
.pic{position:absolute;right:7px;bottom:7px;color:var(--line2);
  padding:5px 7px;line-height:1}
.pic:active{color:var(--glow)}

/* Цена «для своих» — в середине строки прайса, между числом занятий
   и общей ценой. Приглушённее общей: та главная, эта для своих. */
.ownprice{flex:none;text-align:right;padding-right:14px;color:var(--dim)}
.ownprice .num{font-size:14px}

/* цель и ограничения выделены цветом области */
.card.zone-limit{background:rgba(179,73,60,.14);
  border-color:rgba(179,73,60,.45)}

/* стрелки шагов стоят рядом с кнопкой «Назад» */
.steps{display:inline-flex;align-items:center;gap:6px;margin-left:12px;
  vertical-align:2px}
.steps .step{width:30px;height:30px;border-radius:9px;font-size:14px}
.steps .what{display:none}

/* полосу прокрутки в таблицах не показываем: хватает свайпа */
.scroller::-webkit-scrollbar,
.card[style*="overflow-x"]::-webkit-scrollbar{display:none;width:0;height:0}
.card[style*="overflow-x"]{scrollbar-width:none;-ms-overflow-style:none}

/* ---------- календарь дел ---------- */
.tick.small{width:30px;height:30px;font-size:14px}

.picker{max-height:44vh;overflow-y:auto;border:1px solid var(--line);
  border-radius:12px}
.pickrow{display:flex;align-items:center;gap:10px;padding:11px 12px;
  border-bottom:1px solid var(--line);font-size:13.5px}
.pickrow:last-child{border-bottom:none}
.pickrow:active{background:rgba(58,224,190,.14)}
.exrow{padding:11px 0;border-top:1px solid var(--line)}
.exrow:first-of-type{border-top:none;padding-top:0}

.goods-pic{width:46px;height:46px;border-radius:9px;object-fit:cover;
  flex:none;margin-right:11px;border:1px solid var(--line)}
.goods-big{width:100%;border-radius:11px;margin-bottom:11px;display:block;
  border:1px solid var(--line)}

/* ---------- слоты расписания ---------- */
.slot{display:flex;align-items:center;gap:10px;padding:7px 0;
  border-bottom:1px solid var(--line);font-size:13.5px}
.slot:last-child{border-bottom:none}
.slot .at{color:var(--go);font-weight:600;min-width:44px;font-size:12.5px}
.slot .who{flex:1;min-width:0}
.slot .mark{font-size:15px;color:var(--dim);min-width:18px;text-align:center}
.slot.done{opacity:.62}
.slot.done .at{color:var(--faint)}
.slot.cancelled{opacity:.5}
.slot.cancelled .who{text-decoration:line-through}
.slot.no_show .at{color:var(--debt)}
.slot.missed .at{color:var(--warn)}
.slot.missed .mark{color:var(--warn)}
.slot.card{margin-bottom:8px;border-bottom:1px solid var(--line)}

.swatch{display:flex;flex-wrap:wrap;gap:9px;margin-top:10px}
.dot{width:34px;height:34px;border-radius:50%;border:2px solid transparent;
  box-shadow:0 0 0 1px var(--line2) inset}
.dot.on{border-color:var(--text);box-shadow:0 0 0 3px var(--ink) inset}

/* ---------- работа без связи ---------- */

.stale{margin:0 4px 10px;font-size:11.5px;color:var(--faint)}

.yearrow{padding:9px 0}
.yearrow + .yearrow{border-top:1px solid var(--line)}
.twobar{margin-top:7px;display:flex;flex-direction:column;gap:3px}
.twobar i{display:block;height:4px;border-radius:3px;min-width:2px}

/* ---------- крупнее на большом экране ----------
   Размеры подобраны под палец на телефоне. Мышью на компьютере
   в такие кнопки целиться неудобно: курсор точнее пальца, но экран
   дальше от глаз, и мелкое читается хуже. Увеличиваем в полтора раза,
   когда окно шире телефонного. */
/* Условие двойное: широкий экран И управление мышью.
   Одной ширины мало — планшет и телефон в развороте её проходят,
   а палец там остаётся пальцем. Проверка pointer:fine отсекает всё,
   чем тыкают, а не наводят. */
@media (min-width: 1000px) and (pointer: fine) {
  .leaf, .leaf .pod{width:88px;height:88px}
  .leaf .pod{border-radius:25px;border-width:1.6px}
  .leaf .ico{width:40px;height:40px;stroke-width:1.5}
  .leaf.root, .leaf .pod.small{width:66px;height:66px;border-radius:20px}
  .leaf .pod.small .ico{width:30px;height:30px}

  .leaf .cap{top:86px;font-size:13px}
  .leaf.root .cap{top:64px}
  .leaf .cap.dim{font-size:15px}

  .leaf .badge, .corner .badge{min-width:24px;height:24px;font-size:12px;
    top:-8px;right:-8px}

  .corner{width:50px;height:50px;border-radius:16px;top:22px}
  .corner.left{left:22px}
  .corner.right{right:22px}
  .corner.ask.beside{right:62px}
  .corner.under{top:calc(40dvh - 104px)}
  .corner .ico{width:27px;height:27px}

  .pace{font-size:17px;padding:9px 18px;bottom:34px}
  /* плашки разделов здесь крупнее, значит нижняя граница выше */
  .pins{--pins-top:22px;left:22px;right:22px;
    max-height:calc(40dvh - 120px - var(--pins-top))}
  .pin-note{font-size:15px;padding:11px 16px}

  /* остальные экраны тоже читаются мелко на большом мониторе */
  body{font-size:17px}
  h2{font-size:11px;letter-spacing:.26em}
  .kpi b{font-size:29px}
  .kpi span{font-size:12px}
  .btn{padding:16px;font-size:16px}
  .btn.sm{padding:12px 18px;font-size:14.5px}
  .chip{padding:11px 18px;font-size:15px}
  .client .cnt{font-size:38px;min-width:64px}
  .client .name{font-size:18px}
  .client .tick{width:52px;height:52px;font-size:20px}
  .line{padding:13px 0;font-size:16px}
  .sm{font-size:14px}
  .xs{font-size:12.5px}
  .day .date b{font-size:31px}
  .day .plus{width:62px;font-size:26px}
  .slot{font-size:15.5px;padding:9px 0}
  .slot .at{font-size:14.5px;min-width:52px}
  .tick.small{width:38px;height:38px;font-size:17px}
  .notebar .round{width:54px;height:54px}
  .notebar .find{font-size:16px}
}

/* На широком мониторе тянуть список во всю ширину незачем: строки
   становятся длиннее, чем удобно читать. Держим колонку по центру. */
@media (min-width: 900px) {
  main{max-width:760px;margin:0 auto}
}

/* ---------- дела: раскрытие дня ---------- */

/* когда день свёрнут, счётчик подсказывает, что внутри есть дела */

/* ---------- дела: неделя ---------- */
.dayrow{display:flex;align-items:stretch;margin-bottom:9px;
  background:var(--row);border:1px solid var(--line);border-radius:14px;
  overflow:hidden}
/* День с невыполненными делами подсвечен: видно, куда смотреть, не читая
   счётчиков. Цвет тёплый — синий уже занят сегодняшним днём. */
.dayrow.todo{background:var(--row2)}
.dayrow.todo .date{background:#17130A;border-right-color:#4A3E28}
.dayrow.todo .date b{color:#FFD08A}
.dayrow.todo .head{color:#FFD08A}
.dayrow.now{border-color:var(--go)}
.dayrow.open{border-color:var(--line2);border-bottom-left-radius:0;
  border-bottom-right-radius:0;margin-bottom:0}

/* Дата заметно темнее дел: раньше оттенки почти совпадали
   и колонка сливалась с содержимым. */
.dayrow .date{flex:none;width:62px;padding:12px 6px;text-align:center;
  background:var(--cell);border-right:1px solid var(--line2);
  display:flex;flex-direction:column;justify-content:center;gap:2px}
.dayrow .date .wd{font-size:11px;color:var(--dim);text-transform:lowercase}
.dayrow .date.off .wd{color:var(--alarm)}
.dayrow .date b{font:650 22px/1 var(--mono)}
/* Месяц под числом — тише самого числа: он подсказка, а не ответ.
   Нужен на стыке месяцев, где «31» и «1» стоят рядом. */
.dayrow .date .mo{font-size:10px;color:var(--faint);letter-spacing:.02em}
.dayrow.todo .date .mo{color:#C9A46A}
.dayrow .body{flex:1;min-width:0;padding:12px 10px;display:flex;
  flex-direction:column;justify-content:center}
.dayrow .head{font-size:14.5px;font-weight:520}
.dayrow .head .empty-day{color:var(--faint);font-weight:400}
.dayrow .peek{margin-top:4px;font-size:12px;color:var(--faint)}
.dayrow .plus{flex:none;width:52px;font-size:24px;color:var(--dim);
  background:transparent}
.dayrow .plus:active{color:var(--go)}

/* дела раскрываются отдельным блоком под днём */
/* Блок дел светлее строки дня — видно, что это её содержимое. */
.daytasks{background:#1F2833;border:1px solid var(--line2);
  border-top:none;border-radius:0 0 14px 14px;padding:4px 14px 14px;
  margin-bottom:9px}
.daytasks .item{display:flex;align-items:flex-start;gap:11px;
  padding:11px 0;font-size:14.5px;border-top:1px solid var(--line)}
.daytasks .item:first-child{border-top:none}

/* Галочка — отдельная кнопка: остальная строка открывает правку. */
.item .box{flex:none;width:30px;height:30px;border-radius:9px;
  border:1.6px solid var(--line2);display:flex;align-items:center;
  justify-content:center;font-size:16px;color:transparent;
  background:transparent;padding:0}
.item .box:active{background:var(--line)}
.item .grow{flex:1;min-width:0;display:flex;align-items:flex-start;gap:9px;
  padding:3px 0}
.item.done .box{background:var(--go);border-color:var(--go);
  color:var(--on-accent)}
.item .what{flex:1;min-width:0;line-height:1.35}
.item.done .what{color:var(--faint);text-decoration:line-through}

/* Примечание к делу — второй строкой под названием, приглушённо.
   Зачёркивание с него снимаем: у сделанного дела перечёркнутое имя
   читается как отметка, а перечёркнутая подробность просто мешает. */
.item .what .aside{display:block;margin-top:3px;font-size:12.5px;
  color:var(--faint);line-height:1.3}
.item.done .what .aside{text-decoration:none}

.item .what .rep{display:inline-block;vertical-align:-2px;margin-right:5px;
  color:var(--go);line-height:0}
.item.done .what .rep{color:var(--faint)}
.checkfield .box svg{display:block}
.item .at{flex:none;color:var(--go);font-size:13px;font-weight:600;
  min-width:44px}
.item.done .at{color:var(--faint)}

/* ---------- дела: месяц ---------- */
/* Сетка на flex, а не на grid: старые браузеры grid не понимают
   и вытягивают календарь в столбец. Семь клеток в ряд обеспечивает
   ширина 14.28% с учётом отступов. */
.monthgrid{display:flex;flex-wrap:wrap;margin:0 -2.5px}
.monthgrid .wd{width:14.285%;box-sizing:border-box;padding:0 2.5px 4px;
  text-align:center;font-size:10.5px;color:var(--faint);
  text-transform:uppercase;letter-spacing:.08em}
.mday{width:14.285%;box-sizing:border-box;height:52px;margin-bottom:5px;
  border-radius:11px;background:var(--card);
  border:1px solid var(--line);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2px;color:var(--text)}
/* просвет между клетками делаем внутренней рамкой, чтобы не сбить ширину */
.monthgrid .mday{border-width:1px;box-shadow:0 0 0 2.5px var(--ink)}
.mday{position:relative}
/* День рождения в клетке календаря — точка в углу.
   Не третьей строкой: клетка 52 точки высотой, и число с меткой дел
   её уже занимают. Не меткой с числом: столько же именинников, сколько
   дел, не бывает, а два одинаковых кружка с цифрами спорили бы. */
.mday .bdot{position:absolute;top:5px;right:6px;width:6px;height:6px;
  border-radius:50%;background:var(--income)}
.mday.pale{opacity:.32}
.mday.off .n{color:var(--alarm)}
.mday.now{border-color:var(--go);border-width:1.6px}
.mday.busy{background:#161E27}
.mday .n{font:520 15px/1 var(--mono)}
.mday .cnt{font-size:10px;font-weight:600;color:var(--on-accent);
  background:var(--go);border-radius:7px;padding:1px 5px;min-width:16px}
.mday .cnt.all{background:var(--line2);color:var(--faint)}
.mday:active{background:var(--line)}
/* Отмеченный день при копировании дела. Заливка, а не рамка: рамками
   в этой сетке уже сказано «сегодня», и две рамки спорили бы. */
.mday.chosen{background:var(--go);color:var(--on-accent);
  border-color:var(--go)}
.mday.chosen .n{color:var(--on-accent)}
.mday[disabled]{opacity:.5}

/* Имена именинников в неделе «Дел». Строка тише дел, но не сливается
   с ними цветом: дело можно сделать, а день рождения — это то, что
   просто есть в дне. */
.dayrow .dayborn{margin-top:5px;font-size:12.5px;color:var(--income)}
/* День рождения строкой среди дел (30 сентября 2026): тортик на месте
   галочки — отмечать тут нечего, — имя целиком, с переносом, подпись
   под ним тем же приглушённым, что примечание у дела. */
.daytasks .item.born .box.cake{border-color:transparent;background:none;
  font-size:17px;line-height:1;color:var(--text)}
.daytasks .item.born .what{white-space:normal;color:var(--income)}

/* Строка новости. Ссылка наружу, поэтому не кнопка: длинное нажатие
   должно давать «открыть в новой вкладке», как везде в вебе.

   Заголовок целиком, без обрезки: обрезанный заголовок новости — это
   загадка, а не новость. Источник и время под ним, тише. */
.newsrow{display:block;padding:11px 0;border-bottom:1px solid var(--line);
  color:var(--text);text-decoration:none}
.newsrow:last-child{border-bottom:none}
.newsrow .what{display:block;font-size:14.5px;line-height:1.35}
.newsrow .vfrom{display:block;margin-top:5px}
.newsrow:active{opacity:.6}

/* Карточка сводки в правке: стрелки поверх её правого верхнего угла.
   Поверх, а не рядом: карточки рисуются десятью разными функциями, и
   лезть в каждую ради двух кнопок значило бы править десять мест. */
.movable{position:relative}
.movebtns{position:absolute;right:0;top:0;display:flex;gap:6px}
.mv{width:34px;height:28px;padding:0;border-radius:9px;
  background:var(--card);border:1px solid var(--line2);
  color:var(--text);font:15px/1 var(--ui)}
.mv:active{background:var(--go);color:var(--on-accent)}
.mv[disabled]{opacity:.3}

/* Найденное в магазинах: галочка и название в две строки.
   Название целиком, без обрезки: им и выбирают сборку, а обрезанное
   «ASUS ROG Strix G18 G815…» ничем не отличается от соседнего. */
.foundrow{display:flex;align-items:flex-start;gap:11px;padding:11px 0;
  border-bottom:1px solid var(--line)}
.foundrow:last-of-type{border-bottom:none}
.foundrow input{flex:none;width:20px;height:20px;margin-top:2px;
  accent-color:var(--go)}
.foundrow .what{display:block;font-size:14px;line-height:1.35}
.foundrow .vfrom{display:block;margin-top:4px}

/* ---------- плавающая кнопка назад ---------- */
.backroom{height:78px;pointer-events:none}
/* Полоса листания: стрелки и возврат в одной панели, как в заметках.
   Тремя отдельными кнопками они читались как три разные вещи, а внизу
   экрана толкались с другими плавающими кнопками.

   Стрелки нарисованы линиями, а не знаками «‹» и «›»: у знака внутри
   буквы свои поля, и в круге он всегда сидел вкось. */
/* Движение при листании недели и месяца.
 *
 * Вверх и вниз, а не вбок. Вбок было первым решением и оказалось
 * негодным: сдвиг влево вытаскивал содержимое за левый край экрана,
 * а `main` — прокручиваемая область со своими полями, и на такой
 * выход она отвечает пересчётом ширины. Со стороны это выглядело
 * так, будто раздел на миг сжимается, — и только при листании назад,
 * потому что вправо содержимому есть куда выйти, а влево нет.
 *
 * Вертикальный сдвиг этого не делает вовсе: по высоте область и так
 * прокручивается, лишние десять точек ей ничего не стоят.
 *
 * Направление сохранено: вперёд новая неделя поднимается снизу,
 * назад — опускается сверху. Так же, как листают бумажный ежедневник.
 *
 * Десять точек и четверть секунды. Экран листают подряд по нескольку
 * раз, и всё, что длиннее, начинает ощущаться задержкой. */
@keyframes weekfwd{from{transform:translateY(10px);opacity:0}}
@keyframes weekback{from{transform:translateY(-10px);opacity:0}}
/* Имена «later» и «prior», а не «fwd» и «back»: короткое `.back`
   в этом файле уже занято — им помечена ссылка возврата, и вместе с
   цветом она навязывает `display:inline-block`. Раздел «Дела» от
   этого сжимался вдвое и таким оставался: не мерцание анимации,
   а устойчивое чужое правило.

   Третий раз за проект одно и то же: сперва `.arrow`, потом
   `priceBar`, теперь `.back`. Перед новым именем — проверять, занято
   ли оно, а не полагаться на то, что оно звучит уместно. */
.weekslide.later{animation:weekfwd .24s cubic-bezier(.22,.61,.36,1)}
.weekslide.prior{animation:weekback .24s cubic-bezier(.22,.61,.36,1)}

/* Кому движение мешает — тому его нет. Это не украшение, без которого
   экран станет непонятен: направление и так видно по названию месяца. */
@media (prefers-reduced-motion: reduce){
  .weekslide.later,.weekslide.prior{animation:none}}

.stepbar{position:fixed;left:14px;right:14px;bottom:20px;z-index:40;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px;border-radius:30px;
  background:var(--bar);border:1px solid var(--line2);
  backdrop-filter:blur(8px)}
@supports(bottom:max(0px)){
  .stepbar{bottom:max(20px,calc(env(safe-area-inset-bottom) + 12px))}}

.stepbar .round{flex:none;width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;padding:0;
  background:var(--go);color:var(--on-accent);border:none}
.stepbar .round svg{display:block}
.stepbar .round:active{transform:scale(.94);opacity:.85}

/* Возврат посередине остаётся маленькой таблеткой, как был сам по себе:
   растянутый во всю ширину, он перетягивал на себя внимание, хотя нужен
   реже листания. Фон тот же приглушённый, а не сплошная серая заливка. */
.stepbar .mid{flex:none;max-width:52%;padding:9px 20px;border-radius:20px;
  background:rgba(14,16,19,.7);border:1px solid var(--line2);
  color:var(--text);font-size:13.5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stepbar .mid:active{background:var(--line)}
/* Пустое место шириной с круглую кнопку. Нужно там, где кнопка одна и
   стоит справа: без распорки «Назад» съезжает с середины к левому краю
   и полоса выглядит перекошенной. */
.stepbar .hole{flex:none;width:46px}
/* Полоса с одной кнопкой: разносить по краям нечего, и без этого
   единственная кнопка прижималась к левому краю. */
.stepbar.one{justify-content:center}
/* Полоса из двух таблеток: делят ширину пополам. Без этого каждая
   держит свою малую ширину и они расходятся по краям, а между ними
   зияет пустое место — две мелкие кнопки по углам широкой панели. */
.stepbar.pair .mid{flex:1 1 0;max-width:none;text-align:center}
/* Полоса на четыре кнопки: две таблетки посередине делят остаток
   поровну. Без этого «52% ширины» у каждой не помещались рядом, и
   вторая уезжала под первую. */
.stepbar.four .mid{flex:1 1 0;max-width:none;padding:9px 8px;
  text-align:center}
.stepbar.four{gap:7px}
/* Полоса тренера: шесть кружков в ряд. Чуть меньше обычных, иначе на
   360 точках не помещаются; приглушённые — переходы, акцентный — одно
   действие, «плюс». */
/* Плитки выбора оформления: каждая нарисована своими цветами, чтобы
   показать тему до переключения. Выбранная — рамка акцентом. */
.themes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.themetile{padding:10px 8px 8px;border-radius:12px;border:2px solid var(--line2);
  display:flex;flex-direction:column;align-items:center;gap:7px}
.themetile.on{border-color:var(--go)}
.themetile .tcard{width:100%;border-radius:8px;border:1px solid transparent;
  padding:8px 8px 7px;display:flex;
  flex-direction:column;align-items:flex-start;gap:5px;font:600 14px/1 var(--ui)}
.themetile .tcard i{display:block;width:100%;height:5px;border-radius:3px}
.themetile .tcard em{font:400 10px/1 var(--mono);font-style:normal}
.themetile .tname{font:500 12px/1 var(--ui)}
/* Подсказки первого входа: строка — значок в кружке и текст. */
.tourrow{display:flex;gap:12px;align-items:flex-start;margin:10px 0;
  font-size:13.5px;line-height:1.4}
.tourglyph{flex:none;width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--line);color:var(--go);font:700 15px/1 var(--mono)}
.iconbtn.sm{width:34px;height:30px}
/* Четыре кнопки окна упражнения: два столбика по две, каждая своего
   цвета — тем же приёмом, что «Доход · Трата · Инвестиции» в
   «Бюджете»: приглушённая заливка, рамка и цветной текст. Три ярких
   пятна рядом спорили бы между собой, а четыре — и подавно. Порядок
   задан Артёмом 12 сентября 2026: изменить слева вверху, отправить
   справа. */
.quad{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.quad .btn{width:100%;font-weight:600}
.btn.tint-edit{background:rgba(77,163,255,.14);color:var(--go);
  border:1px solid rgba(77,163,255,.42)}
.btn.tint-send{background:rgba(58,224,190,.13);color:#3AE0BE;
  border:1px solid rgba(58,224,190,.42)}
.btn.tint-watch{background:rgba(167,139,250,.14);color:#A78BFA;
  border:1px solid rgba(167,139,250,.42)}
.btn.tint-drop{background:rgba(251,113,133,.12);color:var(--debt);
  border:1px solid rgba(251,113,133,.4)}
/* Значок без рамки: только сам рисунок, цветом текста. Кнопка при
   этом остаётся прежней ширины — палец попадает туда же. */
.iconbtn.bare{border:none;background:transparent;color:var(--text)}
.iconbtn.bare:active{transform:scale(.92);opacity:.7}
/* Часы работы плитками: по одной на час, ряд переносится. Выбранный
   час акцентный, остальные — тонкая рамка. */
.hours{display:flex;flex-wrap:wrap;gap:4px}
.hchip{width:36px;height:32px;border-radius:8px;padding:0;
  border:1px solid var(--line2);background:transparent;color:var(--dim);
  font:600 12.5px/1 var(--mono);font-variant-numeric:tabular-nums}
.hchip.on{background:var(--go);border-color:var(--go);color:var(--on-accent)}
.hchip:active{transform:scale(.94)}
.chip.xs{padding:3px 9px;font-size:11px}
/* Плитка «Свой вариант» в прайсе: пунктирная, как всё, чего ещё нет. */
.plate.own{border-style:dashed;background:transparent}
.stepbar.icons{gap:5px;padding:8px 9px}
.stepbar.icons .round{width:42px;height:42px}
/* Без круглой подложки — попросил Артём 12 сентября 2026: только
   значок, кружок появляется при нажатии. */
.stepbar .round.soft{background:transparent;color:var(--text)}
.stepbar .round.soft .glyph{font:600 20px/1 var(--mono)}
.stepbar .round.soft:active{background:var(--go);color:var(--on-accent)}

/* Буквы Лены и Артёма по бокам от имени раздела.

   Светится рамка, а буква внутри обычная. Рамка нарисована двумя
   заливками — внутренняя по полю кнопки, наружная по рамке; так переход
   цвета ложится на саму рамку, а не в тень под ней. Сияние даёт
   drop-shadow: он повторяет очертания квадрата, а не рисует прямоугольное
   пятно, как обычная тень.

   Квадрат, а не круг: рядом с именем раздела круг читался бы как значок
   действия, а это пометка «чья таблица». */
/* Долги окрашены в тревожный цвет целиком — чипы, кнопки, буквы, полоса
   внизу. Это единственный раздел бюджета, где цифры значат «должны»,
   а не «есть», и голубой акцент остальных разделов уравнивал их с
   доходом. Переопределяем сами переменные, а не каждое правило: цвет
   наследуется вглубь, и всё, что нарисовано акцентом, краснеет разом.

   Оба цвета берутся из настроек, так что перекрасишь тревогу — покраснеют
   и долги. */
.debtskin{--go:var(--debt);--warn:var(--alarm);--glow:var(--debt);
  --on-accent:#20080D}

.capt.withwho{display:flex;align-items:center;justify-content:center;gap:16px}
/* Пятеро в ряд: год, буква, название, буква, значок вида.

   Год уходит к левому краю, значок к правому, а буквы остаются при
   названии — они с ним про одно, а год и значок про другое. Делают это
   автоматические поля, а не сетка: свободное место делится между ними
   поровну, поэтому «Дела» стоят ровно посередине при любом числе
   кнопок. */
.capt.withwho.wide5{gap:14px}
.capt.withwho.wide5 .span{margin-right:auto}
.capt.withwho.wide5 .iconbtn{margin-left:auto}
.capt .span{flex:none;font:600 13px/1 var(--mono);color:var(--dim);
  letter-spacing:.02em;font-variant-numeric:tabular-nums}
.capt .iconbtn{flex:none;width:38px;height:34px;border-radius:11px;
  border:1px solid var(--line2);background:transparent;color:var(--dim);
  display:flex;align-items:center;justify-content:center;padding:0}
.capt .iconbtn:active{color:var(--go);border-color:var(--go)}
/* Значок без рамки стоит ниже правила `.capt .iconbtn`, а не рядом с
   `.iconbtn.sm`: у того вес меньше, и рамка шапки его перебивала —
   поймано на снимке, кнопка осталась в рамке. */
.capt .iconbtn.bare{border:none;background:transparent;color:var(--text)}
.capt .iconbtn.bare:active{transform:scale(.92);opacity:.7;
  color:var(--text)}
.whodot{flex:none;width:34px;height:34px;padding:0;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  border:1.5px solid transparent;
  background:
    linear-gradient(180deg,var(--card),var(--cell)) padding-box,
    linear-gradient(140deg,var(--go),var(--glow)) border-box;
  filter:drop-shadow(0 0 6px rgba(58,224,190,.3));
  transition:filter .14s, transform .14s}
.whodot i{font:600 16px/1 var(--ui);font-style:normal;color:var(--text)}
.whodot:active{transform:scale(.92);
  filter:drop-shadow(0 0 13px rgba(58,224,190,.85))}

/* Знак вместо стрелки: у буквы в круге свой размер, иначе она тонет.
   Приглушённый круг — для того, что зовут реже: прайс рядом с «плюсом»
   не должен спорить с ним за внимание. */
.stepbar .round.glyph{font:600 21px/1 var(--mono)}
.stepbar .round.pale{background:var(--line);color:var(--text)}
.stepbar .round.pale:active{background:var(--go);color:var(--on-accent)}
@media (min-width: 900px) {
  .stepbar{left:50%;right:auto;width:420px;margin-left:-210px}}

.backdot{position:fixed;left:50%;transform:translateX(-50%);
  bottom:22px;z-index:35;
  padding:10px 22px;border-radius:22px;font-size:13.5px;
  color:var(--text);background:rgba(14,16,19,.7);
  border:1px solid var(--line2);backdrop-filter:blur(6px)}
.backdot:active{background:var(--line)}
@supports(bottom:max(0px)){
  .backdot{bottom:max(22px,calc(env(safe-area-inset-bottom) + 14px))}}

/* Правила поля с микрофоном убраны вместе с самим микрофоном из «Дел».
   В заметках голос живёт своей кнопкой в нижней полосе. */

/* ---------- своя галочка ---------- */
.check{display:flex;align-items:center;gap:11px;padding:12px 0;
  font-size:14.5px;cursor:pointer}
.check .box{flex:none;width:26px;height:26px;border-radius:8px;
  border:1.6px solid var(--line2);display:flex;align-items:center;
  justify-content:center;font-size:15px;color:transparent}
.check .box.on{background:var(--go);border-color:var(--go);
  color:var(--on-accent)}

/* галочка, вставленная в строку полей — выглядит как поле рядом */
.checkfield{display:flex;align-items:center;gap:9px;width:100%;
  padding:12px 13px;border-radius:12px;background:var(--line);
  border:1px solid var(--line2);color:var(--dim);font-size:14.5px}
.checkfield .box{flex:none;width:22px;height:22px;border-radius:7px;
  border:1.6px solid var(--line2);display:flex;align-items:center;
  justify-content:center;font-size:13px;color:transparent}
.checkfield .box.on{background:var(--go);border-color:var(--go);
  color:var(--on-accent)}

/* строка с месяцем, переключателем людей и значком недели-месяца */
/* Отступы по бокам и сверху: месяц и значок стояли впритык к краям экрана,
   потому что разнесены по краям строки. Воздух одинаковый с обеих сторон. */
/* Строки под заголовком в «Делах» больше нет: год и значок вида
   уехали в сам заголовок, по краям от букв, а месяц встал под каждым
   числом. Два ряда стали одним. */

/* Плавающая кнопка в нижнем правом углу. Левой больше нет: колокольчик
   из «Цен» переехал в нижнюю полосу, как у Клиентов. */
@supports(bottom:max(0px)){
  .fab{bottom:max(16px,calc(env(safe-area-inset-bottom) + 8px))}}

/* Кнопок с именами в этой строке больше нет: люди переехали буквами в
   заголовок, как в «Бюджете». Четыре кнопки в ряд читались как четыре
   равных дела, а имена целиком съедали ширину, которой тут и так нет. */

/* Карточка чуть вдавливается, пока держите — видно, что нажатие
   засчитано и что-то сейчас произойдёт. */
/* position — опора для двух кнопок по углам. Отступ справа только у
   первой строки и у последней: остальной текст идёт во всю ширину. */
.card[data-note]{position:relative;
  transition:transform .12s ease,opacity .12s ease}
.card[data-note] .grow{padding-right:26px}
.card[data-note] .foot{padding-right:34px}
.card.holding{transform:scale(.97);opacity:.75}

/* Карандаш карточки — в её правом верхнем углу; карточка под него
   отступает справа, чтобы текст не заходил под значок. */
.card:has(> .pen-corner){position:relative;padding-right:46px}
.pen.pen-corner{position:absolute;top:11px;right:11px}