:root {
  --ground: #e9e5f1;
  --paper: #faf9fd;
  --ink: #221b2e;
  --muted: #6b6379;
  --thread: #c6bfd8;
  --berry: #a5325c;
  --sage: #5c8171;

  /* Зоны стресса — проверены на контраст и различимость при дальтонизме */
  --stress-low: #2b8a63;
  --stress-mid: #a8730c;
  --stress-high: #a5325c;

  --display: 'Bricolage Grotesque', 'Trebuchet MS', sans-serif;
  --body: 'IBM Plex Sans', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;

  --gap: 20px;
  --radius: 14px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: clamp(20px, 4vw, 48px);
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

main { max-width: 1080px; margin: 0 auto; }

h1, h2 { font-family: var(--display); font-weight: 600; margin: 0; letter-spacing: -0.02em; }

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 6px;
}

/* ---------------- Верхнее меню ---------------- */

.nav { max-width: 1080px; margin: 0 auto 26px; }

/* «таблетка» на бумажном фоне — та же форма, что у кнопок */
.nav__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  background: var(--paper);
  border-radius: 999px;
  padding: 5px;
}
.nav__link {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  padding: 9px 16px;
  border-radius: 999px;
}
.nav__link:hover { color: var(--ink); }
/* текущий раздел — тёмная таблетка, как у .button--solid */
.nav__link[aria-current='page'] { background: var(--ink); color: var(--paper); }

/* ---------------- Экран подключения ---------------- */

.gate { min-height: 70vh; display: grid; place-items: center; }
.gate[hidden] { display: none; }
.gate__inner { max-width: 520px; }
.gate__title { font-size: clamp(30px, 5vw, 46px); line-height: 1.08; margin-bottom: 18px; }
.gate__text { color: var(--muted); margin: 0 0 26px; }

/* ---------------- Шапка ---------------- */

.head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gap);
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.head__title { font-size: clamp(34px, 6vw, 54px); line-height: 1; }
.head__date { font-family: var(--mono); font-size: 12px; color: var(--muted); margin: 8px 0 0; }

/* ---------------- Метрики ---------------- */

.metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
  margin-bottom: var(--gap);
}
.metric { background: var(--paper); border-radius: var(--radius); padding: 18px 20px 20px; }
/* составное значение (съедено / сожжено) просит больше места — занимает две колонки */
.metric--wide { grid-column: span 2; }
.metric__label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 10px;
}
.metric__value {
  font-family: var(--mono);
  font-weight: 600;
  font-size: clamp(26px, 3.4vw, 34px);
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.metric__unit { font-size: 13px; font-weight: 400; color: var(--muted); margin-left: 5px; white-space: nowrap; }
.metric__note { font-family: var(--mono); font-size: 11px; color: var(--muted); margin: 8px 0 0; }

/* ---------------- Стресс ---------------- */

.card--stress { margin-bottom: var(--gap); }

.stress__meta { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.stress__hint { font-family: var(--mono); font-size: 11px; color: var(--muted); margin: 0; }

.stress__now { display: inline-flex; align-items: baseline; gap: 9px; margin: 0; }
.stress__swatch {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--thread);
  align-self: center;
  flex: none;
}
.stress__swatch[data-zone='low'] { background: var(--stress-low); }
.stress__swatch[data-zone='mid'] { background: var(--stress-mid); }
.stress__swatch[data-zone='high'] { background: var(--stress-high); }

.stress__value { font-family: var(--mono); font-weight: 600; font-size: 32px; line-height: 1; }
.stress__word { font-size: 13px; color: var(--muted); }

.stress { margin: 0; }
.stress__plot { position: relative; }
.stress__svg { display: block; width: 100%; touch-action: none; }
.stress__svg text { font-family: var(--mono); font-size: 10px; fill: var(--muted); }

.stress__scale {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
  /* поля совпадают с PLOT.left / PLOT.right из app.js — иначе часы уедут */
  margin: 6px 10px 0 28px;
}

.stress__key { display: flex; gap: 16px; flex-wrap: wrap; margin: 14px 0 0; font-size: 12px; color: var(--muted); }
.stress__legend { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px; }
.stress__legend i { width: 8px; height: 8px; border-radius: 2px; background: var(--thread); }
.stress__legend[data-zone='low'] i { background: var(--stress-low); }
.stress__legend[data-zone='mid'] i { background: var(--stress-mid); }
.stress__legend[data-zone='high'] i { background: var(--stress-high); }

/* Подсказка при наведении — общая для графиков стресса и MRR */
.stress__tip, .mrr__tip {
  position: absolute;
  top: 0;
  transform: translate(-50%, -4px);
  pointer-events: none;
  background: var(--ink);
  color: var(--paper);
  border-radius: 9px;
  padding: 7px 10px;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.45;
  white-space: nowrap;
  z-index: 2;
}
.stress__tip b, .mrr__tip b { font-weight: 600; }
.stress__tip span, .mrr__tip span { color: color-mix(in srgb, var(--paper) 62%, transparent); }

/* Таблица — тот же набор чисел, что и на графике */
.stress__table { margin-top: 16px; }
.stress__data { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 13px; }
.stress__data th, .stress__data td {
  text-align: left;
  padding: 6px 8px 6px 0;
  border-top: 1px solid color-mix(in srgb, var(--thread) 45%, transparent);
}
.stress__data th {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 400;
  border-top: 0;
}
.stress__data td:first-child, .stress__data td:nth-child(2) {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

/* ---------------- Карточки ---------------- */

.card { background: var(--paper); border-radius: var(--radius); padding: 22px 24px; }
.card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.card__title { font-size: 19px; }
.card__sum { font-family: var(--mono); font-weight: 600; font-size: 17px; margin: 0; color: var(--berry); }

.sub { color: var(--muted); font-size: 13px; margin: 6px 0 0; }
.empty { color: var(--muted); font-size: 14px; margin: 4px 0 0; }

/* ---------------- Таймлайн дня ---------------- */

.tl { list-style: none; margin: 0; padding: 0; }

/* время слева, лента справа: «нить» дня — это левая граница .tl__body */
.tl__item { display: grid; grid-template-columns: 46px 1fr; gap: 12px; }
.tl__time {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  padding-top: 2px;
}
.tl__body {
  position: relative;
  border-left: 1px solid color-mix(in srgb, var(--thread) 55%, transparent);
  padding: 0 0 18px 16px;
}
/* последнее событие ленту дальше не тянет */
.tl__item:last-child .tl__body { border-left-color: transparent; padding-bottom: 0; }

.tl__dot {
  position: absolute;
  left: -4px;
  top: 3px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--thread);
}
/* маркеры типов — цвета только из палитры проекта */
.tl__item[data-type='meal'] .tl__dot { background: var(--berry); }
.tl__item[data-type='activity'] .tl__dot { background: var(--sage); }
.tl__item[data-type='focus'] .tl__dot { background: var(--stress-mid); }
.tl__item[data-type='sleep'] .tl__dot { background: var(--muted); }

.tl__kind {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 3px;
}
.tl__title { margin: 0; }
.tl__detail { font-size: 13px; color: var(--muted); margin: 3px 0 0; }

/* Форма добавления еды */

.add { margin-top: 18px; border-top: 1px solid color-mix(in srgb, var(--thread) 45%, transparent); padding-top: 14px; }
.add__toggle { cursor: pointer; font-family: var(--mono); font-size: 12px; color: var(--berry); }
.add__form { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; }
.field { display: grid; gap: 5px; }
.field--wide { grid-column: span 2; }
.field span { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.field input, .field select {
  font-family: var(--body);
  font-size: 14px;
  padding: 9px 11px;
  border: 1px solid var(--thread);
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
}
.form-note { grid-column: 1 / -1; margin: 0; font-size: 13px; color: var(--muted); }

/* ---------------- Финансы ---------------- */

/* прирост к прошлому месяцу: рост — травяной, спад — ягодный */
.metric__delta { font-weight: 600; color: var(--muted); }
.metric__delta[data-dir='up'] { color: var(--sage); }
.metric__delta[data-dir='down'] { color: var(--berry); }

.card--mrr, .card--src { margin-bottom: var(--gap); }

.mrr__meta { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.mrr__hint { font-family: var(--mono); font-size: 11px; color: var(--muted); margin: 0; }

.mrr { margin: 0; }
.mrr__plot { position: relative; }
.mrr__svg { display: block; width: 100%; touch-action: none; }
.mrr__svg text { font-family: var(--mono); font-size: 10px; fill: var(--muted); }
/* текущий месяц выделен: он ещё идёт */
.mrr__svg text.is-now { fill: var(--ink); font-weight: 600; }
.mrr__key { font-family: var(--mono); font-size: 11px; color: var(--muted); margin: 12px 0 0; }

/* Составная полоса: доли всех источников в общем MRR */
.split { display: flex; gap: 3px; height: 10px; margin: 2px 0 8px; }
.split span { display: block; height: 100%; min-width: 4px; border-radius: 999px; background: var(--thread); }

/* Список источников */
.src { list-style: none; margin: 0; padding: 0; }
.src__item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 7px 14px;
  padding: 14px 0 16px;
  border-top: 1px solid color-mix(in srgb, var(--thread) 45%, transparent);
}
.src__item:first-child { border-top: 0; }

.src__name { margin: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.src__title { font-weight: 600; }
.src__note { font-size: 12px; color: var(--muted); }

.src__money { margin: 0; display: flex; align-items: baseline; justify-content: flex-end; gap: 8px; }
.src__sum { font-family: var(--mono); font-weight: 600; font-size: 17px; font-variant-numeric: tabular-nums; }
.src__delta { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.src__delta[data-dir='up'] { color: var(--sage); }
.src__delta[data-dir='down'] { color: var(--berry); }

.src__bar {
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--thread) 40%, transparent);
  overflow: hidden;
}
.src__bar i { display: block; height: 100%; border-radius: 999px; background: var(--thread); }
.src__share { margin: 0; font-family: var(--mono); font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* цвета долей — те же, что у маркеров таймлайна */
.src__item[data-tone='berry'] .src__bar i, .split span[data-tone='berry'] { background: var(--berry); }
.src__item[data-tone='sage'] .src__bar i, .split span[data-tone='sage'] { background: var(--sage); }
.src__item[data-tone='amber'] .src__bar i, .split span[data-tone='amber'] { background: var(--stress-mid); }
.src__item[data-tone='quiet'] .src__bar i, .split span[data-tone='quiet'] { background: var(--muted); }

/* Управление источниками: список, загрузка выгрузки, форма нового источника.
   Карточка серверная и видна всегда — в том числе на пустой базе, иначе
   первому файлу неоткуда было бы взяться. */
.card--srcs { margin-bottom: var(--gap); }

/* сообщение после отправки формы: сводка импорта или «источник добавлен» */
.flash {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.6;
  color: var(--muted);
  background: color-mix(in srgb, var(--thread) 28%, transparent);
  border-radius: 10px;
  padding: 10px 14px;
  margin: 0 0 14px;
}
.flash--ok { color: var(--ink); background: color-mix(in srgb, var(--sage) 16%, transparent); }

.srcs { list-style: none; margin: 0; padding: 0; }
.srcs__item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 14px 18px;
  padding: 16px 0;
  border-top: 1px solid color-mix(in srgb, var(--thread) 45%, transparent);
}
.srcs__item:first-child { border-top: 0; }

.srcs__meta { min-width: 0; }
.srcs__name { margin: 0; font-weight: 600; }
.srcs__note { margin: 4px 0 0; font-family: var(--mono); font-size: 11px; color: var(--muted); }

.srcs__mrr { margin: 0; display: grid; gap: 2px; justify-items: end; text-align: right; }
.srcs__sum { font-family: var(--mono); font-weight: 600; font-size: 17px; font-variant-numeric: tabular-nums; }
.srcs__unit {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.srcs__upload, .srcs__new { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; }
.srcs__upload { grid-column: 1 / -1; }
.srcs__upload .field, .srcs__new .field { min-width: min(260px, 100%); }
.srcs__new {
  margin-top: 6px;
  padding-top: 18px;
  border-top: 1px solid color-mix(in srgb, var(--thread) 45%, transparent);
}
.srcs__new .errors { flex-basis: 100%; margin: 0; }

/* Переименовать и удалить: две обычные формы в одну строку под загрузкой файла.
   Полем подтверждения удаление отличается от остальных действий не только
   цветом кнопки — вписать название придётся руками. */
.srcs__tools {
  grid-column: 1 / -1;
  display: flex;
  gap: 12px 26px;
  flex-wrap: wrap;
  align-items: end;
}
.srcs__tool { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; }
.srcs__tool .field { min-width: min(220px, 100%); }
/* ошибка стоит у своего источника, а не в общей шапке карточки */
.srcs__error { grid-column: 1 / -1; margin: 0; }

.srcs__empty { font-size: 14px; color: var(--muted); padding: 2px 0 10px; }
.srcs__hint { margin: 18px 0 0; font-size: 12px; line-height: 1.6; color: var(--muted); }

/* выбор файла: кнопку браузера приводим к тёмной таблетке проекта */
.field input[type='file'] { padding: 7px 10px; font-family: var(--mono); font-size: 12px; }
.field input[type='file']::file-selector-button {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-right: 10px;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
}

/* ---------------- Фокус ---------------- */

.card--timer { margin-bottom: var(--gap); text-align: center; }
.card--today { margin-bottom: var(--gap); }
.card--all { margin-bottom: var(--gap); }

/* итоги за всё время: те же мини-плитки, что в «Питании», только их три */
.card--all .mini { grid-template-columns: repeat(3, 1fr); margin-bottom: 12px; }
/* «1 205 ч» и «14 дней подряд» не разрываем: число и подпись читаются вместе */
.card--all .mini__value { white-space: nowrap; }

/* переключатель режимов — та же таблетка, что и меню, только вывернутая:
   на бумажной карточке дорожка окрашена фоном страницы */
.timer__modes {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  max-width: 100%;
  background: var(--ground);
  border-radius: 999px;
  padding: 5px;
}
.timer__mode {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 999px;
  padding: 9px 16px;
  white-space: nowrap;
  cursor: pointer;
}
.timer__mode:hover { color: var(--ink); }
.timer__mode[aria-pressed='true'] { background: var(--ink); color: var(--paper); }

.timer__round {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 24px 0 0;
}

/* главное число страницы — крупнее заголовка раздела */
.timer__clock {
  font-family: var(--mono);
  font-weight: 600;
  font-size: clamp(56px, 15vw, 116px);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  margin: 4px 0 0;
}

.timer__track {
  height: 5px;
  max-width: 320px;
  margin: 20px auto 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--thread) 40%, transparent);
  overflow: hidden;
}
.timer__track i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--berry);
  transition: width 0.25s linear;
}
/* перерыв — шалфейный: режим виден и без подписи */
.card--timer[data-mode='short'] .timer__track i,
.card--timer[data-mode='long'] .timer__track i { background: var(--sage); }

.timer__controls { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.timer__start { min-width: 148px; font-weight: 600; }
.timer__skip { font-size: 12px; padding: 7px 12px; margin-top: 8px; }

.timer__hint { font-family: var(--mono); font-size: 11px; color: var(--muted); margin: 16px 0 0; }

/* поле «над чем работаю» — та же форма, что у формы добавления еды */
.timer__task {
  max-width: 380px;
  margin: 26px auto 0;
  text-align: left;
  border-top: 1px solid color-mix(in srgb, var(--thread) 45%, transparent);
  padding-top: 20px;
}

/* Сегодня: по точке за каждую завершённую сессию */
.today__dots { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 12px; }
.today__dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--berry); }
.today__dots[hidden] { display: none; }

/* ---------------- Кнопки и подвал ---------------- */

.button {
  font-family: var(--body);
  font-size: 14px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.button--solid { background: var(--ink); color: var(--paper); }
.button--quiet { border-color: transparent; color: var(--muted); }
/* разрушающее действие — ягодная кнопка: её не спутаешь с «Загрузить» рядом */
.button--danger { border-color: var(--berry); background: var(--berry); color: var(--paper); }
.button:hover { opacity: 0.86; }
:focus-visible { outline: 2px solid var(--berry); outline-offset: 3px; }

.foot { margin-top: 28px; }
.foot__row { display: flex; gap: 10px; flex-wrap: wrap; }
.errors {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--berry);
  background: color-mix(in srgb, var(--berry) 8%, transparent);
  border-radius: 10px;
  padding: 10px 14px;
  margin: 0 0 14px;
  white-space: pre-wrap;
}

/* ---------------- Адаптив ---------------- */

@media (max-width: 900px) {
  .metrics { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  /* меню сжимается, а если совсем узко — переносится на вторую строку внутри таблетки */
  .nav { margin-bottom: 20px; }
  .nav__inner { gap: 2px; padding: 4px; }
  .nav__link { font-size: 10px; letter-spacing: 0.1em; padding: 8px 12px; }

  .add__form { grid-template-columns: repeat(2, 1fr); }
  .field--wide { grid-column: span 2; }

  /* таймлайн: колонка времени уже, отступ ленты меньше — текст не сжимается в столбик */
  .tl__item { grid-template-columns: 38px 1fr; gap: 10px; }
  .tl__time { font-size: 10px; }
  .tl__body { padding: 0 0 16px 12px; }

  /* плитки сжимаются, чтобы длинные единицы не переносились на вторую строку */
  .metric { padding: 16px 16px 18px; }
  .metric__value { font-size: 24px; }
  .metric__unit { font-size: 12px; margin-left: 4px; }

  /* итог справа в шапке карточки не переносим — переносится заголовок слева */
  .card__sum { white-space: nowrap; }

  /* за всё время: в три колонки числа уже не помещаются, серия уходит на свою строку */
  .card--all .mini { grid-template-columns: repeat(2, 1fr); }
  .card--all .mini__cell:last-child { grid-column: span 2; }

  /* таймер: режимы переносятся внутри таблетки, цифры остаются в карточке */
  .timer__modes { gap: 2px; padding: 4px; }
  .timer__mode { font-size: 10px; letter-spacing: 0.1em; padding: 8px 12px; }
  .timer__clock { font-size: clamp(52px, 16vw, 84px); }
  .timer__controls { margin-top: 20px; }
  .timer__start { min-width: 132px; }

  /* источники: описание уходит под название, суммы чуть мельче */
  .src__note { width: 100%; }
  .src__money { flex-wrap: wrap; gap: 2px 8px; }
  .src__sum { font-size: 15px; }

  /* карточка источников: MRR встаёт под название, формы — в одну колонку */
  .srcs__item { grid-template-columns: 1fr; }
  .srcs__mrr { justify-items: start; text-align: left; }
  .srcs__upload .button, .srcs__new .button { width: 100%; }
  /* переименование и удаление тоже встают в колонку, кнопки — во всю ширину */
  .srcs__tools { display: grid; gap: 14px; }
  .srcs__tool .button { width: 100%; }
}

/* ---------------- Здоровье ---------------- */

.card--hr, .card--sleep, .card--hours, .card--vo2, .card--food { margin-bottom: var(--gap); }

/* Состояние источника. Подключённый браслет — это норма, а не новость:
   строка тихая, как подпись, и рядом с ней маленькая кнопка отключения.
   Отсутствие подключения — наоборот, повод показать карточку с кнопкой. */
.card--conn { margin-bottom: var(--gap); }
.conn__act { margin: 16px 0 0; }

.conn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  margin: 0 0 var(--gap);
}
.conn__acts { display: flex; align-items: center; gap: 14px; }
.conn__quit {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.conn__quit:hover { color: var(--ink); }
/* пока синк идёт, кнопка ждёт молча: подчёркивание снимаем, чтобы не звала нажимать */
.conn__quit[disabled] { opacity: 0.5; cursor: default; text-decoration: none; }

/* причина неудачного синка: подпись под строкой состояния, а не тревога */
.conn__note {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  margin: -10px 0 var(--gap);
}
.conn__note[hidden] { display: none; }

/* общие детали карточек раздела: заголовок с подписью, график, легенда */
.h__meta { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.h__hint { font-family: var(--mono); font-size: 11px; color: var(--muted); margin: 0; }
.h__key { font-family: var(--mono); font-size: 11px; color: var(--muted); margin: 12px 0 0; }

.h__figure { margin: 0; }
.h__figure[hidden] { display: none; }
.h__plot { position: relative; }
.h__svg { display: block; width: 100%; touch-action: none; }
.h__svg text { font-family: var(--mono); font-size: 10px; fill: var(--muted); }

/* часы под кривой пульса: поля совпадают с PLOT.left / PLOT.right из health.js */
.h__scale {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
  margin: 6px 12px 0 32px;
}

/* подсказка при наведении — та же, что у графиков стресса и MRR */
.h__tip {
  position: absolute;
  top: 0;
  transform: translate(-50%, -4px);
  pointer-events: none;
  background: var(--ink);
  color: var(--paper);
  border-radius: 9px;
  padding: 7px 10px;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.45;
  white-space: nowrap;
  z-index: 2;
}
.h__tip b { font-weight: 600; }
.h__tip span { color: color-mix(in srgb, var(--paper) 62%, transparent); }

/* Пульс: сводка «сейчас / мин / макс» справа в шапке карточки */
.hr__stats { display: flex; gap: 20px; }
.hr__stat { display: grid; gap: 3px; margin: 0; text-align: right; }
.hr__stat-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.hr__stat-value {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 19px;
  font-variant-numeric: tabular-nums;
}
/* «сейчас» — главное число сводки, поэтому крупнее и акцентом */
.hr__stat:first-child .hr__stat-value { font-size: 26px; color: var(--berry); }

/* Сон: длительность крупно, подробности мелким моноширинным */
.sleep__lead { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; }
.sleep__hours {
  font-family: var(--mono);
  font-weight: 600;
  font-size: clamp(28px, 4vw, 36px);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.sleep__note { font-family: var(--mono); font-size: 11px; color: var(--muted); }

/* составная полоса фаз и БЖУ — та же форма, что у долей дохода, только выше */
.split[hidden] { display: none; }
.split--tall { height: 14px; }
.split span[data-tone='thread'] { background: var(--thread); }

/* Легенда: фазы сна и доли БЖУ показываем одинаково */
.phases { list-style: none; margin: 14px 0 0; padding: 0; }
.phases__item {
  display: grid;
  grid-template-columns: 8px 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid color-mix(in srgb, var(--thread) 45%, transparent);
}
.phases__item:first-child { border-top: 0; }
.phases__dot { width: 8px; height: 8px; border-radius: 2px; background: var(--thread); }
.phases__item[data-tone='berry'] .phases__dot { background: var(--berry); }
.phases__item[data-tone='sage'] .phases__dot { background: var(--sage); }
.phases__item[data-tone='amber'] .phases__dot { background: var(--stress-mid); }
.phases__item[data-tone='quiet'] .phases__dot { background: var(--muted); }
.phases__item[data-tone='thread'] .phases__dot { background: var(--thread); }

.phases__name { font-size: 14px; }
.phases__min { font-family: var(--mono); font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums; }
.phases__share {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  min-width: 40px;
  text-align: right;
}

/* Шаги по часам: столбик на каждый час суток */
.bars { display: flex; align-items: flex-end; gap: 3px; height: 130px; margin: 4px 0 0; }
.bars__col { flex: 1 1 0; min-width: 0; height: 100%; display: flex; align-items: flex-end; }
.bars__col i {
  display: block;
  width: 100%;
  border-radius: 5px 5px 2px 2px;
  background: color-mix(in srgb, var(--berry) 45%, transparent);
}
/* самый активный час — насыщенный, чтобы пик читался сразу */
.bars__col[data-state='peak'] i { background: var(--berry); }
/* часы без шагов: сон и то, что ещё не наступило */
.bars__col[data-state='empty'] i { background: color-mix(in srgb, var(--thread) 60%, transparent); }

.bars__scale {
  display: flex;
  gap: 3px;
  margin: 6px 0 0;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
}
.bars__scale span { flex: 1 1 0; min-width: 0; text-align: center; }

/* VO2MAX: текущее значение крупно над кривой */
.vo2__now { display: flex; align-items: baseline; margin: 0 0 10px; }
.vo2__value {
  font-family: var(--mono);
  font-weight: 600;
  font-size: clamp(34px, 5vw, 46px);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* Питание: четыре мини-значения на фоне страницы внутри бумажной карточки */
.mini { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 0 0 18px; }
.mini__cell { display: grid; gap: 6px; margin: 0; background: var(--ground); border-radius: 10px; padding: 12px 14px; }
.mini__label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.mini__value {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 560px) {
  /* сводка пульса переносится под заголовок, если в строку уже не влезает */
  .card--hr .card__head { flex-wrap: wrap; }
  .hr__stats { gap: 14px; }
  .hr__stat-value { font-size: 17px; }
  .hr__stat:first-child .hr__stat-value { font-size: 22px; }

  /* столбики ниже и теснее — 24 часа должны помещаться в ширину экрана */
  .bars { height: 96px; gap: 2px; }
  .bars__scale { gap: 2px; font-size: 9px; }

  .phases__item { gap: 10px; padding: 9px 0; }
  .phases__name { font-size: 13px; }

  .mini { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .mini__value { font-size: 18px; }
}

/* ==================================================================== */
/* Life OS на Laravel: меню с выходом, лендинг и страница входа          */
/* ==================================================================== */

/* ---------------- Выход в верхнем меню ---------------- */

/* меню — слева, выход — справа; на узком экране просто переносится */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.nav__exit { margin: 0; }

/* та же таблетка, что у пунктов меню, но с обводкой — действие, а не раздел */
.nav__quit {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  padding: 9px 16px;
  border: 1px solid var(--thread);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  display: inline-block;
}
.nav__quit:hover { color: var(--ink); border-color: var(--ink); }

/* ---------------- Лендинг ---------------- */

.land { max-width: 760px; }

.land__hero { margin-bottom: 34px; }
.land__title {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: clamp(38px, 7vw, 62px);
  line-height: 1;
  margin: 0 0 16px;
}
.land__lead {
  color: var(--muted);
  font-size: 17px;
  max-width: 46ch;
  margin: 0 0 26px;
}

.land__card { margin-bottom: var(--gap); }

.land__works {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
/* карточка в карточке: чуть темнее бумаги, чтобы читалась как отдельный блок */
.land__work {
  background: color-mix(in srgb, var(--ground) 55%, var(--paper));
  border-radius: 10px;
  padding: 14px 16px;
}
.land__work-name { margin: 0; font-weight: 600; }
.land__work-note {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 4px 0 0;
}

.land__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 32px;
}
.land__foot-note {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}

/* ---------------- Вход ---------------- */

.auth { min-height: 78vh; display: grid; place-items: center; }
.auth__card { width: min(400px, 100%); }
.auth__title { font-size: 30px; margin: 0 0 4px; }
.auth__sub { margin: 0 0 22px; }

.auth__form { display: grid; gap: 14px; }

.auth__remember {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
}
.auth__remember input { accent-color: var(--ink); }

.auth__error { margin: 0; }
.auth__submit { justify-self: start; }

.auth__back { margin: 20px 0 0; font-size: 13px; }
.auth__back a { color: var(--muted); text-decoration: none; }
.auth__back a:hover { color: var(--ink); }

/* ==================================================================== */
/* Недели: семь столбиков и линия цели                                   */
/* ==================================================================== */

/* Один набор стилей на четыре карточки — сон, клетчатка и белок на
   «Здоровье», фокус на своей странице. Различаются они только данными:
   шкалу и подписи считает week.js, разметка и цвета здесь общие. */

.card--week { margin-bottom: var(--gap); }

/* «Клетчатка за неделю» с «1 из 6 дней ≥ 25» в строку помещается не всегда:
   пусть сводка уезжает под заголовок целиком, а не рвётся посреди «≥ 25» */
.card--week .card__head { flex-wrap: wrap; }
.card--week .card__sum { white-space: nowrap; margin-left: auto; }

.week {
  /* полоса справа под подпись цели: столбики в неё не заезжают,
     а сама линия тянется на всю ширину поля и уходит под подпись */
  --week-lane: 54px;
}
.week[hidden] { display: none; }

/* три ряда по одной сетке: числа, поле со столбиками, дни недели */
.week__scores,
.week__cols,
.week__days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  padding-right: var(--week-lane);
  text-align: center;
}

/* оценка стоит над своим столбиком: ряд общий, поэтому цифры выровнены */
.week__scores {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  margin: 4px 0 6px;
}
.week__score[data-state='hit'] { color: var(--sage); }
.week__score[data-today] { color: var(--ink); }

/* высота поля фиксированная: от неё health.js считает и столбики, и линию цели */
.week__plot { position: relative; height: 150px; }
.week__cols { height: 100%; }

.week__col { display: flex; align-items: flex-end; }
.week__col i {
  display: block;
  width: 100%;
  /* на широком экране семь столбиков иначе расплываются в плиты */
  max-width: 76px;
  margin: 0 auto;
  border-radius: 6px 6px 2px 2px;
  background: color-mix(in srgb, var(--berry) 45%, transparent);
}
/* цель взята — шалфейный, тот же цвет успеха, что у быстрого сна и VO2MAX */
.week__col[data-state='hit'] i { background: var(--sage); }
/* сегодняшний день обведён, как выделяют текущую точку остальные графики */
.week__col[data-today] i { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ink) 55%, transparent); }

/* День ещё идёт: клетчатка, белок и минуты фокуса копятся до вечера, поэтому
   к обеду столбик закономерно ниже цели. Такой день рисуется контурным и
   бледным — цифра неполная, сравнивать её с целью рано. Правила стоят после
   data-today: у сегодняшнего незавершённого дня выигрывает этот вид. */
.week__col[data-state='running'] i {
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ink) 26%, transparent);
}
.week__score[data-state='running'] { color: var(--muted); font-weight: 400; }

/* линия цели: пунктир поверх столбиков и подпись у правого края поля */
.week__goal {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px dashed color-mix(in srgb, var(--ink) 45%, transparent);
  pointer-events: none;
}
.week__goal span {
  position: absolute;
  right: 0;
  top: -8px;
  padding: 0 4px;
  background: var(--paper);
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
}

.week__days {
  margin: 8px 0 0;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
}
.week__day[data-today] { color: var(--ink); font-weight: 600; }
/* вместо «вт» под незавершённым днём стоит «идёт» — тем же бледным тоном */
.week__day[data-running] { color: var(--muted); font-weight: 400; }

@media (max-width: 560px) {
  /* семь столбиков теснее и ниже — неделя должна помещаться в ширину экрана */
  .week { --week-lane: 44px; }
  .week__scores, .week__cols, .week__days { gap: 4px; }
  .week__scores { font-size: 12px; }
  .week__plot { height: 118px; }
  .week__days { font-size: 10px; }
  .week__goal span { font-size: 9px; }
}

/* ==================================================================== */
/* Год: тепловая карта в стиле GitHub                                    */
/* ==================================================================== */

/* Общий рисовальщик heatmap.js кладёт сюда «Сон за год» на «Здоровье» и
   «Фокус за год» на своей странице: пороги цвета у них разные, но сетка,
   палитра и разметка — общие, как у недельных шкал в week.js. */

.card--heatmap { margin-bottom: var(--gap); }
.card--heatmap .card__head { flex-wrap: wrap; }
.card--heatmap .card__sum { white-space: nowrap; margin-left: auto; }

.heatmap {
  /* размер клетки и зазор — переменные, чтобы медиазапрос ужимал только их */
  --hm-cell: 11px;
  --hm-gap: 3px;
}
.heatmap[hidden] { display: none; }

/* на узком экране 53 недели не помещаются в карточку — карта крутится сама,
   а не ломает вёрстку; heatmap.js при загрузке прижимает прокрутку к сегодня */
.heatmap__scroll { overflow-x: auto; padding-bottom: 2px; }

.heatmap__inner {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 6px;
}

/* подписи месяцев сверху: своя сетка колонок, но той же ширины, что у поля —
   тогда «янв», «фев» встают точно над первой неделей своего месяца */
.heatmap__months {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  grid-template-columns: repeat(var(--hm-cols, 53), var(--hm-cell));
  gap: var(--hm-gap);
  height: 14px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
  text-transform: lowercase;
}
.heatmap__months span { grid-row: 1; white-space: nowrap; }

/* дни недели слева: подписаны только пн, ср и пт — как в GitHub */
.heatmap__weekdays {
  grid-column: 1;
  grid-row: 2;
  display: grid;
  grid-template-rows: repeat(7, var(--hm-cell));
  gap: var(--hm-gap);
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
}
.heatmap__weekdays span { display: flex; align-items: center; padding-right: 4px; }

/* поле карты: колонка — неделя, семь строк — дни; понедельник сверху */
.heatmap__grid {
  grid-column: 2;
  grid-row: 2;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--hm-cell);
  grid-template-rows: repeat(7, var(--hm-cell));
  gap: var(--hm-gap);
}

.heatmap__cell {
  width: var(--hm-cell);
  height: var(--hm-cell);
  border-radius: 2px;
  /* пусто по умолчанию — та же дорожка, что у незаполненных часовых столбиков */
  background: color-mix(in srgb, var(--thread) 30%, transparent);
}
/* дни за пределами окна: только распорка, чтобы сетка оставалась прямоугольной */
.heatmap__cell--pad { visibility: hidden; }

/* день есть, оценка ниже цели — серый, отдельно от «нет данных» */
.heatmap__cell[data-level='low'] { background: color-mix(in srgb, var(--muted) 40%, transparent); }
/* цель взята — четыре ступени шалфейного, темнее с ростом над целью */
.heatmap__cell[data-level='l1'] { background: color-mix(in srgb, var(--sage) 35%, var(--paper)); }
.heatmap__cell[data-level='l2'] { background: color-mix(in srgb, var(--sage) 60%, var(--paper)); }
.heatmap__cell[data-level='l3'] { background: color-mix(in srgb, var(--sage) 85%, var(--paper)); }
.heatmap__cell[data-level='l4'] { background: color-mix(in srgb, var(--sage) 85%, var(--ink) 15%); }

/* сегодняшняя клетка — тонкая тёмная обводка, как «сегодня» в недельных шкалах */
.heatmap__cell[data-today] { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 55%, transparent); }

/* легенда в подвале: «меньше» — дорожка и пять ступеней — «больше», цель справа */
.heatmap__legend {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 12px 0 0;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
}
.heatmap__swatch {
  width: var(--hm-cell);
  height: var(--hm-cell);
  border-radius: 2px;
  display: inline-block;
  background: color-mix(in srgb, var(--thread) 30%, transparent);
}
.heatmap__swatch[data-level='low'] { background: color-mix(in srgb, var(--muted) 40%, transparent); }
.heatmap__swatch[data-level='l1'] { background: color-mix(in srgb, var(--sage) 35%, var(--paper)); }
.heatmap__swatch[data-level='l2'] { background: color-mix(in srgb, var(--sage) 60%, var(--paper)); }
.heatmap__swatch[data-level='l3'] { background: color-mix(in srgb, var(--sage) 85%, var(--paper)); }
.heatmap__swatch[data-level='l4'] { background: color-mix(in srgb, var(--sage) 85%, var(--ink) 15%); }
.heatmap__legend-goal { margin-left: auto; }

@media (max-width: 560px) {
  /* мельче клетка и теснее зазор — иначе год не собирается даже прокруткой в ширину экрана */
  .heatmap { --hm-cell: 10px; --hm-gap: 2px; }
  .heatmap__legend { font-size: 10px; }
}