/* Форма: личная программа владельца. Тёмная тема кабинета, телефон первый. */
:root {
  --фон: #0f1724; --карта: #182234; --текст: #e8eef7; --тише: #9fb0c8;
  --синий: #4a8fe7; --зелёный: #7fd6a4; --жёлтый: #ffb86b; --красный: #ff8a8a;
  --рамка: rgba(255,255,255,.07); --поле: #101a2a;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--фон); color: var(--текст);
       font: 16px/1.45 -apple-system, "Segoe UI", Roboto, sans-serif;
       padding-bottom: env(safe-area-inset-bottom); }
h1 { font-size: 20px; margin: 0; flex: 1; }
h2 { font-size: 17px; margin: 18px 0 8px; }
h3 { font-size: 15px; margin: 12px 0 6px; color: var(--тише); font-weight: 600; }
p { margin: 6px 0; }
a { color: var(--синий); }
.тише { color: var(--тише); font-size: 13px; }
.шапка { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 10px;
         padding: 12px 14px; background: var(--фон); border-bottom: 1px solid var(--рамка); }
.назад { font-size: 20px; min-width: 44px; text-align: center; text-decoration: none; }
.экран { display: none; padding: 14px 14px 100px; }
.экран.on { display: block; }

.кнопка { padding: 12px 16px; border-radius: 12px; border: 1px solid var(--рамка);
          background: var(--синий); color: #fff; font: inherit; cursor: pointer; }
.кнопка.тонкая { background: transparent; color: var(--тише); padding: 8px 12px; font-size: 14px; }
.кнопка.во-всю { display: block; width: 100%; margin: 8px 0; }
.кнопка.мал { padding: 6px 10px; font-size: 13px; border-radius: 9px; }
.кнопка.серая { background: var(--поле); color: var(--текст); }
.кнопка:disabled { opacity: .5; }

.карта { background: var(--карта); border: 1px solid var(--рамка); border-radius: 14px;
         padding: 14px; margin: 10px 0; }
.карта.нажимаемая { cursor: pointer; }
.карта.нажимаемая:active { border-color: rgba(74,143,231,.55); }
.карта .верх { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.карта b.загл { font-size: 16px; }
.ярлык { font-size: 12px; color: var(--тише); border: 1px solid var(--рамка);
         border-radius: 20px; padding: 1px 10px; white-space: nowrap; }
.ярлык.зел { color: var(--зелёный); border-color: rgba(127,214,164,.4); }
.ярлык.жёл { color: var(--жёлтый); border-color: rgba(255,184,107,.4); }
.ярлык.кр { color: var(--красный); border-color: rgba(255,138,138,.4); }

/* цели: 4 цифры в ряд */
.цифры { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 8px 0; }
.цифра { background: var(--поле); border-radius: 10px; padding: 8px 6px; text-align: center; }
.цифра b { display: block; font-size: 18px; }
.цифра span { font-size: 11px; color: var(--тише); }

/* чек-лист дня */
.чек { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--рамка); }
.чек:last-child { border-bottom: 0; }
.чек input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--синий); flex: none; }
.чек .имя { flex: 1; }
.чек .имя small { display: block; color: var(--тише); font-size: 12px; }
.чек.готово .имя { color: var(--тише); text-decoration: line-through; }

/* формы */
.поле { width: 100%; padding: 11px 12px; border-radius: 10px; font: inherit; margin: 4px 0 8px;
        border: 1px solid var(--рамка); background: var(--поле); color: var(--текст); }
label.подпись { display: block; color: var(--тише); font-size: 13px; margin-top: 6px; }
.ряд { display: flex; gap: 8px; }
.ряд > * { flex: 1; min-width: 0; }
textarea.поле { resize: vertical; min-height: 70px; }
select.поле { appearance: auto; }
.чипы { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.чип { padding: 6px 12px; border-radius: 20px; border: 1px solid var(--рамка); background: var(--поле);
       color: var(--тише); font: inherit; font-size: 14px; cursor: pointer; }
.чип.on { background: rgba(74,143,231,.2); color: var(--текст); border-color: rgba(74,143,231,.6); }

/* упражнения */
.упр { display: flex; gap: 12px; align-items: center; }
.упр img { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; background: #fff; flex: none; }
.упр .инфо { flex: 1; min-width: 0; }
.упр .инфо b { display: block; }
.упр .инфо span { color: var(--тише); font-size: 13px; }
.картинки { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0; }
.картинки img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; background: #fff; }
ul.список { margin: 6px 0; padding-left: 20px; }
ul.список li { margin: 4px 0; }
.видео { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--рамка);
         color: inherit; text-decoration: none; }
.видео:last-child { border-bottom: 0; }
.видео img { width: 96px; height: 54px; object-fit: cover; border-radius: 8px; background: #000; flex: none; }
.видео .инфо b { display: block; font-size: 14px; }
.видео .инфо span { color: var(--тише); font-size: 12px; }

/* журнал тренировки */
.сет { display: grid; grid-template-columns: 28px 1fr 1fr; gap: 8px; align-items: center; margin: 4px 0; }
.сет span { color: var(--тише); font-size: 13px; text-align: center; }
.сет input { margin: 0; padding: 9px 10px; text-align: center; }
.подсказка { font-size: 13px; color: var(--жёлтый); margin: 4px 0; }

/* меню */
.строка-еды { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0;
              border-bottom: 1px solid var(--рамка); font-size: 15px; }
.строка-еды:last-child { border-bottom: 0; }
.строка-еды small { display: block; color: var(--тише); font-size: 12px; }
.строка-еды b { white-space: nowrap; }
table.таб { width: 100%; border-collapse: collapse; font-size: 14px; }
table.таб td, table.таб th { padding: 6px 4px; border-bottom: 1px solid var(--рамка); text-align: left; vertical-align: top; }
table.таб th { color: var(--тише); font-weight: 600; font-size: 12px; }
.вкладки { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 6px; }
.вкладка { flex: none; padding: 8px 14px; border-radius: 20px; border: 1px solid var(--рамка);
           background: var(--карта); color: var(--тише); font: inherit; font-size: 14px; cursor: pointer; }
.вкладка.on { color: var(--текст); background: rgba(74,143,231,.2); border-color: rgba(74,143,231,.6); }

/* график */
svg.график { width: 100%; height: 140px; display: block; margin: 6px 0; }
svg.график path { fill: none; stroke: var(--синий); stroke-width: 2; }
svg.график circle { fill: var(--синий); }
svg.график text { fill: var(--тише); font-size: 10px; }

/* нижняя полоса */
.низ { position: fixed; left: 0; right: 0; bottom: 0; display: flex; gap: 2px;
       padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
       background: rgba(15,23,36,.96); border-top: 1px solid var(--рамка); backdrop-filter: blur(8px); }
.низ-пункт { flex: 1; padding: 10px 2px; border: 0; border-radius: 10px; background: transparent;
             color: var(--тише); font: inherit; font-size: 12px; cursor: pointer; }
.низ-пункт.on { color: var(--текст); background: rgba(74,143,231,.16); }

.тост { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); padding: 10px 16px;
        background: #26324a; color: #fff; border-radius: 12px; font-size: 14px; z-index: 20;
        box-shadow: 0 4px 20px rgba(0,0,0,.4); }
.пусто { padding: 20px 4px; color: var(--тише); }
.предупреждение { background: rgba(255,184,107,.12); border: 1px solid rgba(255,184,107,.4);
                  border-radius: 12px; padding: 10px 12px; margin: 8px 0; font-size: 14px; }
.ок { color: var(--зелёный); }

/* тренер: чат и ссылки на магазины (24.10.2026) */
.чат { display: flex; flex-direction: column; gap: 8px; padding-bottom: 8px; }
.пузырь { max-width: 92%; padding: 10px 12px; border-radius: 14px; font-size: 15px; line-height: 1.4;
          background: #1c2638; border: 1px solid var(--рамка); align-self: flex-start; white-space: normal; }
.пузырь.я { align-self: flex-end; background: rgba(74,143,231,.22); border-color: rgba(74,143,231,.4); }
.пузырь.ждёт { color: var(--тише); }
.пузырь small { display: block; margin-top: 4px; font-size: 11px; color: var(--тише); }
.чат-ввод { display: flex; gap: 8px; align-items: flex-end; position: sticky; bottom: 70px;
            background: var(--фон, #0f1724); padding: 8px 0; }
.чат-ввод .поле { flex: 1; resize: none; }
.ссылки { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ссылка { display: inline-flex; flex-direction: column; padding: 6px 10px; border-radius: 10px;
          background: rgba(74,143,231,.14); color: var(--текст); text-decoration: none; font-size: 13px; }
.ссылка small { font-size: 11px; color: var(--тише); }

/* приложение «Форма» (24.10.2026): вход, нижние вкладки со значками, библиотека упражнений */
.экран.вход { display: none; min-height: 80vh; align-items: center; justify-content: center; }
.экран.вход.on { display: flex; }
.вход-карта { width: 100%; max-width: 360px; text-align: center; padding: 24px 16px; }
.вход-лого { width: 96px; height: 96px; border-radius: 24px; margin-bottom: 8px; }
.вход-карта h2 { margin: 4px 0; }
.поле.код { font-size: 22px; text-align: center; letter-spacing: .3em; margin: 16px 0 10px; }
.низ-пункт { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11px; padding: 8px 2px; }
.низ-пункт svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.низ-пункт.on svg { stroke: var(--синий); }
.группы { display: flex; gap: 6px; overflow-x: auto; padding: 4px 0 10px; scrollbar-width: none; }
.группы::-webkit-scrollbar { display: none; }
.группы .чип { white-space: nowrap; }
.сетка-упр { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.сетка-упр .карта.упр { flex-direction: column; align-items: stretch; margin: 0; }
.сетка-упр .карта.упр img { width: 100%; height: 120px; object-fit: cover; border-radius: 10px; background: #fff; }
.сетка-упр .карта.упр .инфо b { font-size: 14px; display: block; margin-top: 6px; }
.сетка-упр .карта.упр .инфо span { font-size: 12px; }
.геро { background: linear-gradient(135deg, #16304f, #0f1724); border: 1px solid rgba(74,143,231,.35); }
.геро .большая { font-size: 30px; font-weight: 600; line-height: 1.1; margin: 4px 0; }
.шапка .назад[hidden] { display: none; }

/* iPhone (25.10.2026): шапка не уходит под вырез и часы, поля не увеличивают страницу,
   в Telegram — отступ под его кнопки. --верх считает app.js (Telegram) или env() (Safari). */
:root { --верх: env(safe-area-inset-top, 0px); --лево: env(safe-area-inset-left, 0px);
        --право: env(safe-area-inset-right, 0px); }
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; -webkit-tap-highlight-color: transparent; overscroll-behavior-y: none; }
.шапка { padding-top: calc(10px + var(--верх)); padding-left: calc(14px + var(--лево));
         padding-right: calc(14px + var(--право)); min-height: 56px; }
.шапка h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.шапка .кнопка { flex: none; }
.кнопка.обновить { width: 44px; height: 44px; padding: 0; display: grid; place-items: center;
                   border-radius: 12px; border: 1px solid var(--рамка); }
.кнопка.обновить svg { width: 20px; height: 20px; stroke: var(--текст); fill: none; stroke-width: 2;
                       stroke-linecap: round; stroke-linejoin: round; }
.кнопка.обновить.крутится svg { animation: крутится .8s linear infinite; }
@keyframes крутится { to { transform: rotate(360deg); } }
.экран { padding-left: calc(14px + var(--лево)); padding-right: calc(14px + var(--право));
         padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
.поле, select.поле, textarea.поле, input { font-size: 16px; }   /* меньше 16 — Safari приближает страницу */
.низ { padding-left: calc(6px + var(--лево)); padding-right: calc(6px + var(--право)); }
.чат-ввод { bottom: calc(70px + env(safe-area-inset-bottom)); }
.ios-совет { background: rgba(74,143,231,.12); border: 1px solid rgba(74,143,231,.4); }
.ios-совет ol { margin: 6px 0 0 18px; padding: 0; }
.ios-совет li { margin: 4px 0; }
.поделиться { display: inline-block; width: 18px; height: 18px; vertical-align: -3px; }

details.карта > summary { list-style: none; cursor: pointer; }
details.карта > summary::-webkit-details-marker { display: none; }
details.карта > summary .тише { text-align: right; font-size: 13px; }

/* кольца часов на «Сегодня» */
.кольца-ряд { display: flex; align-items: center; gap: 14px; margin: 10px 0 8px; }
.кольца { flex: none; }
.кольца-подписи { flex: 1; display: grid; gap: 8px; min-width: 0; }
.кольцо-строка { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; line-height: 1.3; }
.кольцо-строка i { flex: none; width: 10px; height: 10px; border-radius: 50%; margin-top: 4px; }
.кольцо-строка small { display: block; color: var(--тише); font-size: 12px; }

/* Компьютер (25.10.2026): меню слева вместо нижней полосы, содержимое по центру не шире
   1240 px, «Сегодня» в две колонки, карточки остальных экранов — сеткой. На телефоне
   обёртки .колонки и .сетка-карт ничего не меняют: та же лента в том же порядке. */
.низ-лого { display: none; }
@media (min-width: 1000px) {
  :root { --меню: 248px; }
  body { font-size: 16px; }
  .прил { padding-left: var(--меню); }
  .прил:has(.низ:empty) { padding-left: 0; }
  .низ:empty { display: none; }

  .низ { top: 0; bottom: 0; right: auto; width: var(--меню); flex-direction: column; gap: 4px;
         padding: 22px 14px; background: #0c1320; border-top: 0; border-right: 1px solid var(--рамка);
         backdrop-filter: none; }
  .низ-лого { display: flex; align-items: center; gap: 12px; padding: 2px 12px 26px;
              font-size: 20px; font-weight: 600; }
  .низ-лого img { width: 36px; height: 36px; border-radius: 10px; }
  .низ-пункт { flex: none; flex-direction: row; justify-content: flex-start; gap: 14px;
               padding: 12px 14px; font-size: 15px; border-radius: 12px; }
  .низ-пункт:hover { background: rgba(255,255,255,.05); color: var(--текст); }
  .низ-пункт.on, .низ-пункт.on:hover { background: rgba(74,143,231,.18); }

  .шапка { max-width: 1240px; margin: 0 auto; padding: 26px 32px 14px; min-height: 0;
           border-bottom: 0; }
  .шапка h1 { font-size: 28px; font-weight: 600; }
  .экран { max-width: 1240px; margin: 0 auto; padding: 6px 32px 56px; }
  .экран.вход { max-width: none; min-height: 100vh; }

  h2 { font-size: 19px; margin: 26px 0 10px; }
  .тише { font-size: 14px; }
  p, ul.список { max-width: 85ch; }

  .карта { padding: 18px 20px; border-radius: 16px; margin: 0 0 16px; }
  .карта b.загл { font-size: 17px; }
  .карта.нажимаемая { transition: border-color .15s; }
  .карта.нажимаемая:hover { border-color: rgba(74,143,231,.5); }
  .кнопка { transition: filter .15s; }
  .кнопка:hover:not(:disabled) { filter: brightness(1.12); }
  .кнопка.тонкая:hover { color: var(--текст); }
  .кнопка.во-всю { margin-top: 12px; }
  .экран > .кнопка.во-всю { display: inline-block; width: auto; min-width: 260px; padding: 12px 28px; }

  /* «Сегодня»: слева план, цели, часы и тренировка; справа ночь, еда и отметки */
  .колонки { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 6fr); gap: 20px;
             align-items: start; }
  .колонки .предупреждение { margin-top: 0; }
  .цифры { gap: 12px; margin: 12px 0; }
  .цифра { padding: 14px 8px; border-radius: 12px; }
  .цифра b { font-size: 28px; font-weight: 600; }
  .цифра span { font-size: 13px; }
  .кольца-ряд { gap: 24px; }
  .кольцо-строка { font-size: 15px; }
  .чек { padding: 12px 0; }
  .чек .имя small { font-size: 13px; }
  .строка-еды { padding: 9px 0; }
  .строка-еды small { font-size: 13px; }

  /* карточки сеткой: тренировки, этапы, приёмы пищи, дни недели, продукты, добавки */
  .сетка-карт { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
                gap: 16px; align-items: start; margin: 10px 0 16px; }
  .сетка-карт > .карта { margin: 0; height: 100%; }
  .сетка-карт > details.карта { height: auto; }
  .сетка-упр { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
  .сетка-упр .карта.упр { padding: 10px; }
  .сетка-упр .карта.упр img { height: 170px; }
  .вкладки { flex-wrap: wrap; overflow: visible; margin-bottom: 12px; }
  .группы { flex-wrap: wrap; overflow: visible; }

  /* упражнение: четыре кадра в ряд, текст под ними */
  .картинки { grid-template-columns: repeat(4, 1fr); gap: 12px; }
  .видео img { width: 160px; height: 90px; }
  .видео .инфо b { font-size: 15px; }

  /* узкие по смыслу экраны — одной колонкой, чтобы строка читалась */
  #экран-данные > *, #экран-сон > *, #экран-тренер > * { max-width: 860px; }
  #экран-профиль .сетка-карт { grid-template-columns: 1fr 1fr; }
  .ряд { gap: 12px; }

  /* тренер: поле ввода прижато к низу окна, пузыри уже */
  .пузырь { max-width: 72%; }
  .чат-ввод { bottom: 0; padding: 12px 0 20px; }
  .чат { min-height: calc(100vh - 220px); justify-content: flex-end; }
  .тост { bottom: 32px; left: calc(50% + var(--меню) / 2); }
}
@media (min-width: 1000px) and (hover: hover) {
  .шапка .кнопка.обновить:hover { background: rgba(255,255,255,.05); }
}