/* Лог тренировок. Основной облик — тёмный (телефон в зале);
   светлая тема поддержана теми же токенами через prefers-color-scheme. */

:root {
  color-scheme: dark light;

  --bg: #101317;
  /* Поверхности полупрозрачные (П9): под ними может лежать произвольная
     картинка, поэтому «серый + blur», а не сплошной цвет. На сплошном тёмном
     фоне результат почти неотличим от прежнего. */
  --panel: rgba(25, 29, 35, .78);        /* блок упражнений, карточки списков */
  --panel-head: rgba(31, 36, 43, .80);   /* шапка упражнения, подвал блока */
  --bar: rgba(16, 19, 23, .78);          /* шапка и нижняя навигация */
  --line: rgba(255, 255, 255, .10);
  --line-soft: rgba(255, 255, 255, .05);
  --blur: saturate(.85) blur(16px);   /* saturate < 1 — чтобы слои читались как серые, а не как цветное стекло */

  --ink: #e7ebef;
  --ink-soft: #939ba5;
  --ink-faint: #626b76;

  --accent: #38bd8b;
  --accent-ink: #0c1013;
  --accent-soft: rgba(56, 189, 139, 0.15);

  --cell-weight-bg: rgba(10, 13, 16, .38);   /* «вес» — утопленная колонка */
  --cell-weight-ink: #b9c2cc;
  --cell-reps-bg: rgba(52, 63, 78, .38);     /* «повторы» — активная колонка */
  --cell-reps-ink: #f2f5f8;

  --danger: #e2725b;
  --tap: 44px;
  /* Высота нижней навигации (4 вкладки); safe-area добавляется отдельно */
  --bottom-nav-h: 54px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f2f3f1;
    --panel: rgba(255, 255, 255, .80);
    --panel-head: rgba(246, 247, 245, .82);
    --bar: rgba(242, 243, 241, .80);
    --line: rgba(0, 0, 0, .14);
    --line-soft: rgba(0, 0, 0, .07);

    --ink: #16181a;
    --ink-soft: #6b7278;
    --ink-faint: #a0a7ad;

    --accent: #1f8a63;
    --accent-ink: #ffffff;
    --accent-soft: rgba(31, 138, 99, 0.12);

    --cell-weight-bg: rgba(0, 0, 0, .06);
    --cell-weight-ink: #4a5157;
    --cell-reps-bg: rgba(255, 255, 255, .55);
    --cell-reps-ink: #16181a;

    --danger: #a8382a;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  color: var(--ink);
  font: 15px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

html { background: var(--bg); }
/* Прозрачное тело обязательно: свой фон у body закрасил бы слой #bg,
   который лежит ниже содержимого (z-index: -1). */
body { background: transparent; }

/* Фон-картинка — отдельный фиксированный слой, а не background-attachment:
   fixed (на мобильных Safari и Chrome он не работает). <img> вместо
   background-image — ради onerror: не доехала картинка, остаётся цвет. */
.bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Выбор файла: не display: none (кое-где .click() по такому не срабатывает),
   а увезённый с экрана и не ловящий пальцы */
.file-pick {
  position: fixed;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.app {
  max-width: 480px;
  margin: 0 auto;
  padding: 0 8px calc(var(--bottom-nav-h) + var(--safe-b) + 24px);
  min-height: 100vh;
}

/* --- Верхняя панель --- */

/* Шапка растянута до краёв окна: .app держит боковые отступы 8 px, но
   полупрозрачная подложка шапки (и полоса тренировок в ней, П11) должна
   доходить до края экрана — иначе на фоне-картинке видны просветы по бокам. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  margin: 0 -8px;
  /* вертикальные отступы 4 px (П22): строка и так высотой --tap, зона тапа
     не страдает, а шапка перестаёт съедать экран */
  padding: 4px 8px;
  background: var(--bar);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border-bottom: 1px solid var(--line-soft);
}

/* Видимая высота строки — 36 px (П26): кнопки лого и аватара выше (зона тапа
   44 px), но отрицательными полями они «утоплены» в строку и не растягивают
   её. Сама строка тогда ровно 36 и шапка не съедает экран. */
.topbar-row {
  display: flex;
  gap: 6px;
  align-items: center;
  min-height: 36px;
}

/* Лого слева на всех экранах (П21). Ширина — как у кнопки аватара справа:
   только при равных краях середина строки совпадает с серединой экрана, а
   там стоит название раздела. */
.logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  /* зона тапа остаётся 44 px, но в строку высотой 36 кнопка входит своими
     36 — лишние 8 срезаны полями (П26) */
  margin: -4px 0;
  -webkit-tap-highlight-color: transparent;
}

.logo img { display: block; width: 26px; height: 26px; }

/* Аватар справа — на всех экранах. Кнопка во всю зону тапа (44px), сам
   кружок меньше: иначе палец мажет мимо. */
.avatar-btn {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  margin: -4px 0;    /* как у лого: зона тапа 44, вклад в строку — 36 (П26) */
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.avatar-img,
.avatar-ini {
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 50%;
}

.avatar-img { display: block; object-fit: cover; }

.avatar-ini {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--ink);
  background: var(--panel-head);
}

/* Выбор цикла — на месте названия раздела и выглядит как оно (П21, П27):
   те же 17/700, ни фона, ни обводки; шеврон стоит вплотную к тексту (4 px),
   а не у края строки, иначе он ближе к аватару, чем к названию. Тап открывает
   лист снизу — нативный select стрелку у текста рисовать не умеет. */
.title-btn {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 36px;
  padding: 0 4px;
  font: inherit;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--ink);
  background: transparent;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Длинное название режется многоточием, шеврон не сжимается */
.title-btn-text {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.title-btn-chevron {
  flex: none;
  display: block;
  color: var(--ink-soft);
}

.btn {
  flex: 0 0 auto;
  min-height: var(--tap);
  padding: 0 14px;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  transition: background-color .12s ease, opacity .12s ease;
}

.btn:active { background: var(--panel-head); }

.btn:disabled {
  opacity: .38;
  cursor: default;
}

.btn-wide {
  width: 100%;
  color: var(--ink-soft);
  background: transparent;
  border-style: dashed;
}

/* Заголовок раздела — по центру шапки на всех экранах, кроме «Программы»
   (там на его месте селектор цикла, П21) */
.tab-title {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 36px;   /* строка шапки теперь 36 px (П26) */
  margin: 0;
  padding: 0 4px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .01em;
}

/* --- Сегментированный селектор: вкладка «Статистика» и поля листа --- */

.seg {
  display: flex;
  gap: 4px;
  margin-top: 6px;
  padding: 3px;
  background: var(--panel-head);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.seg-btn {
  flex: 1 1 0;
  min-width: 0;
  min-height: calc(var(--tap) - 6px);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--ink-soft);
  background: transparent;
  border: none;
  border-radius: 9px;
  cursor: pointer;
}

.seg-btn.active {
  color: var(--accent-ink);
  background: var(--accent);
}

/* --- Полоса тренировок (П11–П13) --- */

/* Полоса занимает всю ширину шапки (на телефоне это край экрана; на широком
   экране — колонку приложения, растягивать её на всё окно незачем: остальное
   приложение всё равно 480 px). Фон и размытие — от шапки, своей подложки у
   полосы нет: два полупрозрачных слоя друг на друге дали бы почти непрозрачный. */
.wstrip {
  margin: 6px -8px -8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border-top: 1px solid var(--line-soft);
  /* палец по полосе водит её саму, страницу — нет */
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;          /* полосу прокрутки прячем: она тут лишняя */
  -ms-overflow-style: none;
}

.wstrip::-webkit-scrollbar { display: none; }

/* Пункты растягиваются на всю ширину, пока помещаются (flex-grow), а когда
   перестают (длинные названия) — полоса едет вбок (flex-shrink: 0). */
.wstrip-track {
  position: relative;
  display: flex;
  width: max-content;
  min-width: 100%;
}

.wstrip-btn {
  position: relative;   /* над подложкой */
  z-index: 1;
  flex: 1 0 auto;
  min-height: var(--tap);
  padding: 0 18px;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
  color: var(--ink-soft);
  background: transparent;
  border: none;
  cursor: pointer;
  /* полосу возят протяжкой мыши — выделять подписи при этом незачем */
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.wstrip-btn.active { color: var(--accent-ink); }

.wstrip-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }

/* Зелёная подложка выбранного пункта — отдельный элемент: так она перетекает
   с пункта на пункт (П12), а не перекрашивается скачком. Позицию и ширину
   ставит app.js по геометрии кнопки. */
.wstrip-ind {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: 0;
  background: var(--accent);
  border-radius: 10px;
  transform: translateX(0);
  transition: transform .2s ease, width .2s ease;
  pointer-events: none;
}

/* Первая отрисовка, смена цикла и resize — без перетекания: подложка просто
   оказывается на месте. */
.wstrip.no-anim .wstrip-ind { transition: none; }

@media (prefers-reduced-motion: reduce) {
  .wstrip-ind { transition: none; }
}

/* Точка под расписанной на сегодня тренировкой, когда открыта другая (П13) */
.wstrip-dot {
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  background: var(--accent);
  border-radius: 50%;
}

/* --- Полоса управления (П28–П29) --- */

/* Общий компонент: вторая строка шапки на тех экранах, где ей есть что
   показать. Внешне — та же полоса, что и полоса тренировок (border-top,
   высота, фон и размытие от шапки), но статичная: ничего не прокручивается. */
.ctrlbar {
  margin: 6px -8px -8px;
  border-top: 1px solid var(--line-soft);
}

/* Содержимое одного экрана: слева — переключатель-чекбокс, справа — .seg */
.ctrlbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: var(--tap);
  padding: 0 12px;
}

/* В полосе .seg живёт рядом с текстом, а не отдельной строкой формы: свой
   верхний отступ и растягивание пунктов ему тут не нужны. */
.ctrlbar .seg { margin-top: 0; }

.ctrlbar .seg-btn {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 12px;
  font-size: 14px;
}

/* Чекбокс: системный вид на телефоне не покрасить, поэтому настоящий input
   спрятан (он остаётся для клавиатуры и озвучки), а рисуется квадратик рядом.
   Галочка внутри всегда есть, но до включения она цвета фона — так квадрат не
   дёргается по размеру. */
.check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--ink-soft);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.check input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.check-box {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: transparent;
  background: transparent;
  border: 1.5px solid var(--line);
  border-radius: 6px;
  box-sizing: border-box;
}

.check input:checked + .check-box {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
}

.check input:checked ~ .check-label { color: var(--ink); }

.check input:focus-visible + .check-box { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- Блоки упражнений --- */

/* Тело программы ловит горизонтальный свайп «следующая/предыдущая
   тренировка» (П12). pan-y pinch-zoom: вертикальный скролл и зум остаются
   браузеру, а движения вбок доезжают до нас — без этого браузер отменял бы
   указатель на первом же движении. Горизонтально внутри программы ничего не
   прокручивается (таблица с боковой прокруткой — только в статистике),
   поэтому отбирать у браузера нечего. */
#view-program { touch-action: pan-y pinch-zoom; }

.workout-body { padding-top: 10px; }

.block {
  background: var(--panel);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-bottom: 12px;
  overflow: hidden;
}

.block-grid { display: flex; align-items: stretch; }

.ex-col {
  flex: 1 1 0;
  min-width: 0;
  border-right: 1px solid var(--line);
}

.ex-col:last-child { border-right: none; }

/* Заголовок колонки — кнопка во всю ширину: тап открывает меню упражнения
   (П14). Отдельной «⋮» нет, поэтому название занимает всю ширину. */
.ex-head {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  background: var(--panel-head);
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.ex-head:active { background: var(--accent-soft); }
.ex-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Всегда одна строка: длинное название обрезается «…» (П14) */
.ex-name {
  min-width: 0;
  padding: 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
  text-align: center;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Микро-подписи колонок — чтобы «кг» и «повторы» не путались */
.col-head {
  display: flex;
  background: var(--panel-head);
  border-bottom: 1px solid var(--line-soft);
}

.col-head > * {
  flex: 1 1 0;
  min-width: 0;
  padding: 4px 0 5px;
  font: inherit;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink-faint);
}

.col-head > :first-child { background: var(--cell-weight-bg); }

/* Подпись «кг/lb» — кнопка выбора единицы. Полоска высотой в 44px съела бы
   пол-экрана, поэтому зона тапа тут во всю ширину колонки веса, а
   полноразмерный дубль пункта лежит в меню «⋮». */
.unit-btn {
  border: none;
  background: var(--cell-weight-bg);
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}

.unit-btn:active { color: var(--accent); }

.set-row { display: flex; }
.set-row + .set-row { border-top: 1px solid var(--line-soft); }

.cell {
  flex: 1 1 0;
  min-width: 0;
  height: var(--tap);
  padding: 0 4px;
  font: inherit;
  font-size: 16px; /* 16px — иначе iOS зумит поле при фокусе */
  text-align: center;
  border: none;
  border-radius: 0;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

.cell.weight {
  background: var(--cell-weight-bg);
  color: var(--cell-weight-ink);
}

.cell.reps {
  background: var(--cell-reps-bg);
  color: var(--cell-reps-ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.cell:focus {
  box-shadow: inset 0 0 0 2px var(--accent);
  color: var(--ink);
}

.cell::placeholder { color: var(--ink-faint); font-weight: 400; }

/* --- Подвал блока --- */

.block-foot {
  display: flex;
  gap: 2px;
  align-items: center;
  padding: 2px 4px;
  background: var(--panel-head);
  border-top: 1px solid var(--line);
}

.mini {
  min-height: 38px;
  padding: 0 8px;
  font: inherit;
  font-size: 13px;
  color: var(--ink-soft);
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
}

.mini:active { color: var(--accent); background: var(--accent-soft); }

.mini.danger { color: var(--ink-faint); margin-left: auto; }
.mini.danger:active { color: var(--danger); background: transparent; }

/* Кнопка-иконка (корзина, П16): подписи нет, поэтому квадратная */
.mini.icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  padding: 0;
}

.footer-actions { margin-top: 4px; }

.empty {
  padding: 32px 8px;
  text-align: center;
  color: var(--ink-soft);
}

/* --- Индикатор: показывается только когда сохранить не удалось --- */

.status {
  position: fixed;
  left: 50%;
  bottom: calc(var(--bottom-nav-h) + var(--safe-b) + 10px);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 7px;
  max-width: calc(100vw - 32px);
  padding: 7px 14px;
  font-size: 13px;
  color: var(--ink);
  background: var(--panel);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
  z-index: 40;
  pointer-events: none;
}

.status-text { white-space: nowrap; }

.status .dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-soft);
}

/* офлайн — нейтрально, это штатная ситуация в зале */
.status.offline { border-color: var(--line); color: var(--ink-soft); }
.status.offline .dot { background: var(--ink-soft); }

/* сервер ответил ошибкой — вот это уже тревожно */
.status.error { border-color: var(--danger); color: var(--ink); }
.status.error .dot { background: var(--danger); }

/* --- Вкладка «Статистика» --- */

#stats-controls { padding-top: 10px; }

/* «Лучший подход» в треть ширины телефона не влезает шрифтом селектора
   тренировки — этому селектору свой размер */
#stats-seg .seg-btn {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
}

/* Выбор упражнения — кнопка во всю ширину: она открывает лист снизу */
.stats-pick {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: var(--tap);
  padding: 0 12px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
}

.stats-pick:active { background: var(--panel-head); }

.stats-pick-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.stats-pick-hint {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-soft);
}

.stats-pick-caret { flex: 0 0 auto; color: var(--ink-soft); }

.stats-card {
  margin-top: 12px;
  padding: 10px 12px 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.chart-caption {
  margin-bottom: 4px;
  font-size: 13px;
  color: var(--ink-soft);
}

/* График рисуется в app.js как inline SVG (библиотек и CDN в приложении нет —
   иначе офлайн из кэша воркера перестал бы работать). Цвета живут здесь,
   поэтому тёмная и светлая темы получаются сами собой.
   Серия одна, легенда не нужна: её роль играет подпись над графиком, а
   точные числа лежат в таблице под ним — тултипов на телефоне нет. */
.chart { display: block; width: 100%; height: auto; }

.chart-grid {
  stroke: var(--line);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;   /* линейка остаётся волосяной */
}

.chart-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

/* Обводка цветом подложки — чтобы точки не сливались там, где линия крутая */
.chart-dot {
  fill: var(--accent);
  stroke: var(--panel);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.chart-tick {
  fill: var(--ink-faint);
  font-family: inherit;
  font-size: 9px;
  font-variant-numeric: tabular-nums;
}

/* Подписываем только последнюю точку: число у каждой — каша */
.chart-value {
  fill: var(--ink);
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
}

.stats-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.stats-table th,
.stats-table td {
  padding: 6px 4px;
  text-align: left;
  border-bottom: 1px solid var(--line-soft);
}

.stats-table th {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  white-space: nowrap;
}

.stats-table th.num,
.stats-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.stats-table tr:last-child td { border-bottom: none; }

.stats-table td.total { font-weight: 700; }

/* Сводка по тренировкам — шесть колонок: на узком экране едет вбок сама,
   а не ломает страницу */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* --- Списки вкладок «Упражнения» и «Заметки» --- */

.list { padding-top: 10px; }

.list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: var(--tap);
  margin-bottom: 8px;
  padding: 9px 12px;
  font: inherit;
  font-size: 15px;
  text-align: left;
  color: var(--ink);
  background: var(--panel);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
}

.list-item:active { background: var(--panel-head); }

/* Строка «только прочитать» (логин в профиле) — не кнопка, не подсвечивается */
.list-item.static { cursor: default; }
.list-item.static:active { background: var(--panel); }

/* Точка слева (П23): есть упражнение в текущем цикле — залита акцентом,
   нет — пустой кружок с обводкой. Место занимает одинаковое в обоих случаях
   (border-box), поэтому названия в списке стоят ровно. */
.list-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border: 1px solid var(--ink-soft);
  border-radius: 50%;
}

.list-dot.on {
  background: var(--accent);
  border-color: var(--accent);
}

.list-main { flex: 1 1 auto; min-width: 0; }

.list-title { font-weight: 600; overflow-wrap: anywhere; }

.list-sub {
  margin-top: 2px;
  font-size: 13px;
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}

/* Заметка многострочная: переносы, которые ввёл пользователь, сохраняются */
.note-text { font-weight: 400; white-space: pre-wrap; }

/* Подпись связей заметки идёт над текстом — она мельче и тусклее */
.note-meta { margin: 0 0 3px; }

.chip {
  flex: 0 0 auto;
  padding: 3px 9px;
  font-size: 12px;
  color: var(--ink-soft);
  background: var(--panel-head);
  border: 1px solid var(--line);
  border-radius: 999px;
}

/* Счётчик истории (П24) — не чип, а просто приглушённое число справа:
   это не метка, а величина, и спорить с чипом за внимание ей незачем. */
.list-count {
  flex: 0 0 auto;
  font-size: 13px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

/* --- Экраны «Профиль» и «Настройки» --- */

/* Текст без подложки (подписи секций, подсказки, пустые экраны) лежит прямо
   на фоне-картинке: спасает ореол цветом темы, а не ещё одна плашка. */
.section-title,
.setting-hint,
.empty { text-shadow: 0 1px 3px var(--bg), 0 0 8px var(--bg); }

.section-title {
  padding: 8px 6px 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.setting {
  margin-bottom: 8px;
  padding: 10px 12px 12px;
  background: var(--panel);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.setting-label { font-weight: 600; }

.setting-hint {
  margin: -2px 6px 10px;
  font-size: 13px;
  color: var(--ink-soft);
}

/* --- Нижняя навигация --- */

.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  padding-bottom: var(--safe-b);
  background: var(--bar);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border-top: 1px solid var(--line);
}

/* Иконка над подписью (П20); подпись остаётся — на 22 px значок один
   вкладку не объясняет */
.nav-btn {
  flex: 1 1 0;
  min-width: 0;
  height: var(--bottom-nav-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0 2px;
  font-size: 11px;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  color: var(--ink-soft);
  border-top: 2px solid transparent;
  margin-top: -1px;
  -webkit-tap-highlight-color: transparent;
}

.nav-icon { display: block; flex: none; }

.nav-label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-btn.active {
  font-weight: 700;
  color: var(--accent);
  border-top-color: var(--accent);
  background: var(--accent-soft);
}

/* --- Лист снизу: выбор упражнения, меню упражнения, единица веса --- */

.sheet {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .55);
  opacity: 0;
  transition: opacity .2s ease;
}

/* Закрытый лист стоит внизу за краем экрана; класс .open выводит его наверх,
   а снятие класса уводит обратно — отсюда и выезд, и уезд (П18). */
.sheet-panel {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  padding: 4px 8px calc(var(--safe-b) + 8px);
  background: var(--bg);
  border: 1px solid var(--line);
  border-bottom: none;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -10px 30px rgba(0, 0, 0, .4);
  transform: translateY(100%);
  transition: transform .2s ease;
  will-change: transform;
}

.sheet.open .sheet-backdrop { opacity: 1; }
.sheet.open .sheet-panel { transform: translateY(0); }

/* Пока тянут пальцем, панель должна идти строго за ним — без сглаживания */
.sheet.dragging .sheet-panel { transition: none; }

@media (prefers-reduced-motion: reduce) {
  .sheet-backdrop,
  .sheet-panel { transition: none; }
}

/* Ручка сверху (П19): сама по себе только украшение (aria-hidden), но она же
   и зона захвата — вместе с шапкой листа. touch-action: none только здесь,
   иначе внутренний список перестал бы прокручиваться. */
.sheet-handle {
  display: flex;
  justify-content: center;
  padding: 6px 0 4px;
  touch-action: none;
  cursor: grab;
}

.sheet-handle span {
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: var(--ink-faint);
}

.sheet-title {
  padding: 2px 8px 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  touch-action: none;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
}

.sheet-search { padding: 0 2px 8px; }

#sheet-input,
.sheet-field input,
.sheet-field textarea {
  width: 100%;
  height: var(--tap);
  padding: 0 12px;
  font: inherit;
  font-size: 16px; /* 16px — иначе iOS зумит поле при фокусе */
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

#sheet-input:focus,
.sheet-field input:focus,
.sheet-field textarea:focus { border-color: var(--accent); }

/* --- Форма в листе (упражнение, заметка) --- */

.sheet-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  padding: 0 2px 10px;
}

.sheet-field { display: flex; flex-direction: column; gap: 4px; }

.sheet-label {
  padding-left: 4px;
  font-size: 12px;
  letter-spacing: .02em;
  color: var(--ink-soft);
}

.sheet-field textarea {
  height: auto;
  min-height: 96px;
  padding: 10px 12px;
  line-height: 1.35;
  resize: vertical;
}

/* Выбор из двух-трёх значений (единица веса) — тот же сегментированный
   контрол, что и селектор тренировки в шапке */
.sheet-field .seg { margin-top: 0; }

.sheet-list {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.sheet-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: var(--tap);
  padding: 6px 12px;
  font: inherit;
  font-size: 15px;
  text-align: left;
  color: var(--ink);
  background: transparent;
  border: none;
  border-radius: 10px;
  cursor: pointer;
}

.sheet-item:active { background: var(--accent-soft); }
.sheet-item:disabled { color: var(--ink-faint); cursor: default; background: transparent; }
.sheet-item.danger { color: var(--danger); }

.sheet-hint {
  margin-left: auto;
  padding-left: 8px;
  font-size: 12px;
  color: var(--ink-faint);
  white-space: nowrap;
}

/* Длинная подсказка («почему пункт неактивен») переносится по словам,
   короткая («✓», «lb», «←») остаётся в строку */
.sheet-hint.long {
  max-width: 58%;
  text-align: right;
  white-space: normal;
}

/* Черта между группами пунктов главного меню */
.sheet-sep {
  height: 1px;
  margin: 6px 12px;
  background: var(--line);
}

.sheet-empty {
  padding: 20px 12px;
  text-align: center;
  color: var(--ink-faint);
}

/* --- Экран входа ---------------------------------------------------------
   Перекрывает всё (в том числе лист снизу и нижнюю навигацию): без сессии
   в приложении смотреть нечего. */

.login {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--bg);
}

/* пока показан вход, страница под ним не прокручивается */
body.login-open { overflow: hidden; }

.login-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 320px;
}

.login-title {
  margin-bottom: 8px;
  font-size: 22px;
  font-weight: 600;
  text-align: center;
  color: var(--ink);
}

.login-input {
  min-height: var(--tap);
  padding: 0 12px;
  font: inherit;
  font-size: 16px;   /* меньше 16px — iOS зумит страницу на фокусе */
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.login-input:focus {
  outline: none;
  border-color: var(--accent);
}

.login-form .btn-wide {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
}

.login-error {
  font-size: 14px;
  text-align: center;
  color: var(--danger);
}