/* AiGYM — тир-лист упражнений */

:root {
  --bg: #0d0f12;
  --bg-panel: #15181d;
  --bg-card: #1c2027;
  --bg-card-hover: #242932;
  /* граница задаётся через прозрачность, чтобы работать и в светлой теме Telegram */
  --line: color-mix(in srgb, currentColor 16%, transparent);
  --text: #e8eaed;
  --text-dim: #9aa3af;
  --text-faint: #6b7280;
  --accent: #ff5c35;

  --tier-s: #ff7f7f;
  --tier-a: #ffbf7f;
  --tier-b: #ffdf7f;
  --tier-c: #f4ff7f;
  --tier-d: #bfff7f;
  --tier-f: #7fff9e;

  --radius: 10px;
  --sidebar-w: 236px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body { display: flex; min-height: 100vh; }

/* ---------- Сайдбар ---------- */

.sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background: var(--bg-panel);
  border-right: 1px solid var(--line);
  padding: 20px 14px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.logo {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.4px;
  margin: 0 0 4px 6px;
}
.logo span { color: var(--accent); }

.logo-sub {
  margin: 0 0 22px 6px;
  font-size: 11.5px;
  color: var(--text-faint);
  letter-spacing: 0.3px;
}

.nav-label-2 { margin-top: 18px; }

.nav-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 8px 6px;
}

.nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 9px 11px;
  margin-bottom: 3px;
  background: none;
  border: 0;
  border-radius: 8px;
  color: var(--text-dim);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: background .13s, color .13s;
}
.nav-item:hover { background: var(--bg-card); color: var(--text); }
.nav-item.is-active { background: var(--accent); color: #fff; font-weight: 600; }
.nav-item.is-active .nav-count { color: rgba(255,255,255,.75); }

.nav-count { font-size: 12px; color: var(--text-faint); font-variant-numeric: tabular-nums; }

.nav-item.is-soon { cursor: default; opacity: .4; }
.nav-item.is-soon:hover { background: none; color: var(--text-dim); }

/* ---------- Основная область ---------- */

.main {
  flex: 1;
  min-width: 0;
  padding: 26px 30px 60px;
}

.head { margin-bottom: 22px; }

.head h1 {
  margin: 0 0 6px;
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -0.5px;
}

.head .source {
  font-size: 13px;
  color: var(--text-faint);
}
.head .source a { color: var(--text-dim); text-decoration: none; border-bottom: 1px solid var(--line); }
.head .source a:hover { color: var(--accent); border-color: var(--accent); }

/* Пояснение к подборке — она не группа мышц, это нужно объяснить */
.group-note {
  max-width: 760px;
  margin: 10px 0 0;
  padding: 10px 14px;
  background: var(--bg-panel);
  border-left: 2px solid var(--accent);
  border-radius: 0 7px 7px 0;
  font-size: 13.5px;
  color: var(--text-dim);
}
.group-note[hidden] { display: none !important; }

/* ---------- Фильтры ---------- */

.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

/* На широком экране обе строки фильтров сливаются в одну линию,
   на телефоне каждая прокручивается отдельно (см. медиазапрос). */
.filter-row {
  display: contents;
}

.filter-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-right: 3px;
}

.chip {
  padding: 5px 12px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text-dim);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: all .13s;
}
.chip:hover { border-color: var(--text-faint); color: var(--text); }
.chip.is-on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }

.filters .sep { width: 1px; height: 20px; background: var(--line); margin: 0 6px; }

/* ---------- Тир-ряды ---------- */

.tier-row {
  display: flex;
  align-items: stretch;
  gap: 12px;
  margin-bottom: 12px;
}

.tier-badge {
  flex: 0 0 74px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border-radius: var(--radius);
  color: #14161a;
  font-weight: 900;
  min-height: 92px;
}
.tier-badge .letter { font-size: 32px; line-height: 1; letter-spacing: -1px; }
.tier-badge .count { font-size: 11px; font-weight: 700; opacity: .62; }

.tier-s .tier-badge { background: var(--tier-s); }
.tier-a .tier-badge { background: var(--tier-a); }
.tier-b .tier-badge { background: var(--tier-b); }
.tier-c .tier-badge { background: var(--tier-c); }
.tier-d .tier-badge { background: var(--tier-d); }
.tier-f .tier-badge { background: var(--tier-f); }

.tier-items {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(174px, 1fr));
  gap: 10px;
  padding: 10px;
  background: var(--bg-panel);
  border-radius: var(--radius);
  align-content: start;
}

.tier-empty {
  display: flex;
  align-items: center;
  padding: 0 14px;
  color: var(--text-faint);
  font-size: 13px;
  font-style: italic;
}

/* ---------- Карточка упражнения ---------- */

.card {
  display: block;
  width: 100%;
  padding: 0;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 9px;
  overflow: hidden;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .13s, border-color .13s, background .13s;
}
.card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  background: var(--bg-card-hover);
}

.card-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}

/* Превью карточки — картинкой, чтобы браузер грузил её лениво */
.card-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.card-thumb::after {
  content: "▶";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  color: #fff;
  background: rgba(0,0,0,.34);
  opacity: 0;
  transition: opacity .13s;
}
.card:hover .card-thumb::after { opacity: 1; }

/* Карточка с иллюстрацией вместо кадра видео */
.card-thumb.is-art {
  background: #f2f0ec;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-art {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  padding: 4px;
}
.card-thumb.is-blank {
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, currentColor 8%, var(--bg-panel));
  color: var(--text-faint);
  font-size: 11px;
}

.card-crown {
  position: absolute;
  top: 5px;
  left: 5px;
  padding: 3px 8px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .4px;
  background: #ffd54a;
  color: #1a1400;
  box-shadow: 0 1px 6px rgba(0,0,0,.45);
}
.card-crown.is-worst { background: #ef4444; color: #fff; }
.card-crown.is-head { background: #6d8cff; color: #fff; }

/* Лучшее и худшее выделены рамкой, чтобы находиться взглядом сразу */
.card.is-best { border-color: #ffd54a; }
.card.is-best:hover { border-color: #ffe27a; }
.card.is-worst { border-color: #ef4444; }
.card.is-worst:hover { border-color: #f87171; }

.card-body { padding: 8px 10px 10px; }

.card-title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.32;
  margin-bottom: 5px;
}

/* Номер в рейтинге подборки */
.card-rank {
  display: inline-block;
  min-width: 18px;
  margin-right: 6px;
  padding: 1px 5px;
  border-radius: 4px;
  background: #ffd54a;
  color: #1a1400;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
  vertical-align: 1px;
}
.card-rank.is-bad { background: #ef4444; color: #fff; }

.card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* Полупрозрачные подложки: читаются и на тёмной теме, и на светлой,
   которую может включить пользователь Telegram. */
.tag {
  padding: 1.5px 6px;
  border-radius: 4px;
  background: color-mix(in srgb, currentColor 13%, transparent);
  color: var(--text-dim);
  font-size: 10.5px;
  white-space: nowrap;
}
.tag.head-long {
  background: color-mix(in srgb, #7c5cff 22%, transparent);
  color: color-mix(in srgb, #7c5cff 75%, var(--text));
}
.tag.tag-tips {
  background: color-mix(in srgb, #7c5cff 22%, transparent);
  color: color-mix(in srgb, #7c5cff 75%, var(--text));
}

/* ---------- Ключевые выводы ---------- */

.keys {
  margin-top: 34px;
  padding: 20px 22px;
  background: var(--bg-panel);
  border-radius: var(--radius);
  border-left: 3px solid var(--accent);
}
.keys h2 { margin: 0 0 14px; font-size: 16px; font-weight: 700; }
.keys ol { margin: 0; padding-left: 20px; }
.keys li { margin-bottom: 9px; color: var(--text-dim); font-size: 14px; }
.keys li:last-child { margin-bottom: 0; }

/* ---------- Модальное окно ---------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(0,0,0,.76);
  backdrop-filter: blur(3px);
}
.modal[hidden] { display: none !important; }

.modal-box {
  width: min(880px, 100%);
  max-height: 92vh;
  overflow-y: auto;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 13px;
}

.modal-video {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  display: block;
  border-radius: 13px 13px 0 0;
}
.modal-video[hidden] { display: none !important; }

/* Сцена с иллюстрацией в модалке */
.modal-art {
  background: #f2f0ec;
  border-radius: 13px 13px 0 0;
  padding: 18px 18px 12px;
}
.modal-art[hidden] { display: none !important; }

/* Кадр из видео — на месте плеера, как у остальных групп */
.stage-shot {
  margin: -18px -18px 12px;
  background: #000;
}
.stage-shot img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

/* Проигрыватель движения: кадры лежат стопкой, видим только активный */
.anim-player {
  position: relative;
  width: 100%;
  height: 190px;
  color: #14161a;
}

.anim-frame {
  position: absolute;
  inset: 0;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  opacity: 0;
}
.anim-frame.is-on { opacity: 1; }

.anim-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px auto 4px;
  width: min(300px, 100%);
}

.anim-btn {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border: 1px solid #d5cfc5;
  border-radius: 7px;
  background: #fff;
  color: #3d372e;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
}
.anim-btn:hover { background: #efe9df; }

.anim-speed {
  flex: 1;
  min-width: 0;
  direction: rtl;           /* вправо — быстрее */
  accent-color: var(--accent);
}

.anim-label {
  flex: 0 0 auto;
  font-size: 11px;
  color: #7a7267;
  letter-spacing: .3px;
}

.art-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid #e0d9cd;
}

.art-fig {
  margin: 0;
  text-align: center;
}

.art-fig img {
  width: 100%;
  max-height: 170px;
  object-fit: contain;
}

/* Кадр из видео — фотография, ей нужен тёмный фон и скруглённые углы */
.art-fig.is-shot img {
  border-radius: 6px;
  background: #000;
  object-fit: cover;
  aspect-ratio: 16 / 9;
  max-height: none;
}

.art-fig figcaption {
  margin-top: 4px;
  font-size: 11px;
  color: #6b6257;
  letter-spacing: .3px;
}

.art-note {
  margin: 10px 0 0;
  text-align: center;
  font-size: 11.5px;
  color: #7a7267;
}

.modal-content { padding: 20px 24px 26px; }

.modal-top {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 4px;
}

.modal-tier {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 21px;
  font-weight: 900;
  color: #14161a;
}

.modal-titles { flex: 1; min-width: 0; }
.modal-titles h2 {
  margin: 0 0 2px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.3px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
}

.modal-mark {
  padding: 3px 9px;
  border-radius: 5px;
  background: #ffd54a;
  color: #1a1400;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .5px;
  white-space: nowrap;
}
.modal-mark.is-worst { background: #ef4444; color: #fff; }
.modal-mark.is-head { background: #6d8cff; color: #fff; }
.modal-titles .en { font-size: 13px; color: var(--text-faint); }

.modal-close {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--text-dim);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}
.modal-close:hover { color: var(--text); border-color: var(--text-faint); }

.modal-meta { display: flex; flex-wrap: wrap; gap: 5px; margin: 14px 0 18px; }

.verdict {
  margin: 0 0 20px;
  padding: 12px 15px;
  background: var(--bg-card);
  border-left: 2px solid var(--accent);
  border-radius: 0 7px 7px 0;
  font-size: 14.5px;
}

.block { margin-bottom: 18px; }
.block:last-child { margin-bottom: 0; }

.block h3 {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-faint);
}

.block ul { margin: 0; padding-left: 19px; }
.block li { margin-bottom: 5px; font-size: 14px; color: var(--text-dim); }
.block.pros li::marker { color: #4ade80; }
.block.cons li::marker { color: #f87171; }
.block.tech li::marker { color: #60a5fa; }
.block.tips li::marker { color: #a78bfa; }

/* Подсказки из разбора техники — отдельный источник, поэтому выделены */
.block.tips {
  padding: 13px 15px;
  background: color-mix(in srgb, #7c5cff 12%, var(--bg-panel));
  border-left: 2px solid #8b6dff;
  border-radius: 0 7px 7px 0;
}
.block.tips h3 { color: color-mix(in srgb, #7c5cff 70%, var(--text)); }

.tips-src {
  margin: 9px 0 0;
  font-size: 11.5px;
  color: var(--text-faint);
}
.tips-src a { color: var(--text-dim); text-decoration: none; border-bottom: 1px solid var(--line); }
.tips-src a:hover { color: #b9a7ff; border-color: #b9a7ff; }


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

@media (max-width: 860px) {
  html, body { font-size: 14px; }
  body { flex-direction: column; }

  /* Шапка: логотип и группы мышц одной прокручиваемой строкой */
  .sidebar {
    width: 100%;
    flex: none;
    height: auto;
    position: sticky;
    top: 0;
    z-index: 20;
    padding: 8px 0 7px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    overflow: visible;
  }

  .logo { font-size: 15px; margin: 0 0 0 12px; }
  .logo-sub, .nav-label { display: none; }

  .nav-list {
    display: flex;
    gap: 5px;
    margin-top: 7px;
    padding: 0 12px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .nav-list::-webkit-scrollbar { display: none; }

  .nav-item {
    width: auto;
    flex: 0 0 auto;
    margin: 0;
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--bg-card);
    font-size: 12.5px;
    white-space: nowrap;
  }
  .nav-item .nav-count { margin-left: 4px; font-size: 10.5px; }
  .nav-item.is-soon { display: none; }

  .nav-label-2 {
    display: block;
    flex: 0 0 auto;
    width: 1px;
    height: 18px;
    margin: 5px 3px 0;
    padding: 0;
    background: var(--line);
    overflow: hidden;
    text-indent: -999px;
  }

  .main { padding: 11px 0 32px; }

  /* Заголовок компактный: название и источник в одну строку каждый */
  .head { margin-bottom: 10px; padding: 0 12px; }
  .head h1 { font-size: 17px; margin-bottom: 2px; }
  .head .source {
    font-size: 10.5px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .group-note { margin: 7px 0 0; font-size: 11.5px; padding: 8px 10px; }

  /* Фильтры: подписи убраны, чипы прокручиваются */
  .filters { display: block; margin-bottom: 10px; padding: 0 0 9px; }
  .filter-row {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 12px 6px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .filter-row::-webkit-scrollbar { display: none; }
  .filter-row:last-child { padding-bottom: 0; }
  .filters .sep, .filter-label { display: none; }
  .chip { flex: 0 0 auto; padding: 4px 10px; font-size: 11.5px; }

  /* Тир-ряды */
  #tiers { padding: 0 12px; }
  .tier-row { gap: 6px; margin-bottom: 7px; }
  .tier-badge {
    flex-basis: 34px;
    min-height: 56px;
    border-radius: 7px;
    position: sticky;
    top: 78px;
    align-self: flex-start;
    height: 56px;
  }
  .tier-badge .letter { font-size: 17px; }
  .tier-badge .count { font-size: 9px; }

  .tier-items {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    padding: 6px;
    border-radius: 7px;
  }

  /* Карточка: крупное фото, короткая подпись, один тег */
  .card { border-radius: 7px; }
  .card-body { padding: 5px 6px 6px; }
  /* Ровная сетка: у всех карточек одинаковая высота подписи и тегов,
     иначе ряд выглядит рваным */
  .card-title {
    font-size: 11.5px;
    line-height: 1.25;
    margin-bottom: 3px;
    min-height: 2.5em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .card-meta { gap: 3px; height: 14px; overflow: hidden; }
  .tag { font-size: 8.5px; padding: 1px 4px; }
  .card-crown { font-size: 7.5px; padding: 1.5px 5px; top: 3px; left: 3px; }
  .card-rank { min-width: 15px; font-size: 9.5px; padding: 0 4px; margin-right: 4px; }

  .keys { margin: 16px 12px 0; padding: 12px 13px; }
  .keys h2 { font-size: 13.5px; margin-bottom: 9px; }
  .keys li { font-size: 12px; margin-bottom: 6px; }
  .keys ol { padding-left: 17px; }

  /* Карточка упражнения на весь экран */
  .modal { padding: 0; align-items: flex-start; }
  .modal-box { max-height: 100vh; border-radius: 0; border: 0; }
  .modal-video { border-radius: 0; }
  .modal-content { padding: 12px 13px 24px; }
  .modal-top { gap: 9px; }
  .modal-tier { width: 32px; height: 32px; font-size: 17px; }
  .modal-titles h2 { font-size: 15px; gap: 6px; }
  .modal-titles .en { font-size: 11px; }
  .modal-mark { font-size: 9px; padding: 2px 6px; }
  .modal-meta { gap: 4px; margin: 10px 0 12px; }
  .verdict { font-size: 12.5px; padding: 9px 11px; margin-bottom: 14px; }
  .block { margin-bottom: 13px; }
  .block h3 { font-size: 10px; margin-bottom: 6px; }
  .block li { font-size: 12.5px; margin-bottom: 4px; }
  .block ul { padding-left: 16px; }
  .modal-art { border-radius: 0; padding: 10px 10px 7px; }
  .anim-player { height: 150px; }
  .stage-shot { margin: -10px -10px 9px; }
  .art-fig img { max-height: 95px; }
  .art-fig figcaption { font-size: 10px; }
  .tips-src { font-size: 10.5px; }
}

/* ---------- Стартовый экран: выбор группы ---------- */

.body-screen {
  flex: 1;
  min-height: 100vh;
  padding: 24px 16px 40px;
}
.body-screen[hidden] { display: none !important; }

.body-head { margin: 0 auto 18px; max-width: 520px; }
.body-head h1 {
  margin: 0 0 4px;
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -0.5px;
}
.body-head p { margin: 0; font-size: 13.5px; color: var(--text-dim); }

.picker { max-width: 520px; margin: 0 auto; }

.mgrid { display: flex; flex-direction: column; gap: 8px; }

.mgrid-label {
  margin: 22px 0 9px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* Карточка группы: обложка, название, счётчик */
.mcard {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 9px 14px 9px 9px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 13px;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .13s, border-color .13s, background .13s;
}
.mcard:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
  background: var(--bg-card-hover);
}
.mcard:active { transform: none; }

.mcard-cover {
  flex: 0 0 auto;
  width: 96px;
  height: 56px;
  border-radius: 9px;
  overflow: hidden;
  background: #000;
}
.mcard-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

.mcard-cover.is-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--accent) 18%, var(--bg-panel));
  color: var(--accent);
  font-size: 25px;
}

.mcard-body { flex: 1; min-width: 0; }
.mcard-name { display: block; font-size: 15.5px; font-weight: 600; margin-bottom: 2px; }
.mcard-hint { display: block; font-size: 12px; color: var(--text-dim); }

.mcard-count {
  flex: 0 0 auto;
  min-width: 30px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--bg-panel);
  color: var(--text-dim);
  font-size: 12.5px;
  font-weight: 600;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.mcard:hover .mcard-count { color: var(--text); }

/* Кнопка возврата к выбору группы */
.back-to-body {
  margin-bottom: 9px;
  padding: 5px 12px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text-dim);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
.back-to-body:hover { color: var(--text); border-color: var(--text-faint); }

@media (max-width: 860px) {
  .body-screen { padding: 16px 13px 28px; min-height: auto; }
  .body-head { margin-bottom: 14px; }
  .body-head h1 { font-size: 19px; }
  .body-head p { font-size: 12px; }
  .mgrid { gap: 7px; }
  .mcard { gap: 11px; padding: 8px 12px 8px 8px; border-radius: 12px; }
  .mcard-cover { width: 84px; height: 49px; border-radius: 8px; }
  .mcard-cover.is-icon { font-size: 21px; }
  .mcard-name { font-size: 14px; }
  .mcard-hint { font-size: 11px; }
  .mcard-count { font-size: 11.5px; min-width: 26px; padding: 2px 7px; }
  .mgrid-label { margin: 18px 0 7px; }
  .back-to-body { font-size: 11.5px; padding: 4px 10px; }
}

/* ---------- Готовая тренировка ---------- */

.workout-screen { flex: 1; padding: 22px 16px 48px; }
.workout-screen[hidden] { display: none !important; }

.wo-screen-head { max-width: 620px; margin: 0 auto 18px; }
.wo-screen-head h1 {
  margin: 0 0 5px;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.5px;
}

#workout-body { max-width: 620px; margin: 0 auto; }

.wo-warmup {
  padding: 13px 16px;
  margin-bottom: 16px;
  background: var(--bg-panel);
  border-left: 3px solid var(--accent);
  border-radius: 0 9px 9px 0;
}
.wo-warmup h3 {
  margin: 0 0 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-faint);
}
.wo-warmup ul { margin: 0; padding-left: 19px; }
.wo-warmup li { font-size: 13.5px; color: var(--text-dim); margin-bottom: 3px; }

/* Шаг тренировки */
.wo-step {
  margin-bottom: 14px;
  padding: 14px 16px 16px;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.wo-head { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }

.wo-num {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
}

.wo-titles { flex: 1; min-width: 0; }
.wo-name { display: block; font-size: 16px; font-weight: 700; letter-spacing: -0.2px; }
.wo-en { display: block; font-size: 11.5px; color: var(--text-faint); }

.wo-dose {
  flex: 0 0 auto;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--bg-card);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

.wo-video {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 9px;
  display: block;
  margin-bottom: 11px;
}

.wo-intensity {
  margin: 0 0 12px;
  padding: 7px 11px;
  background: var(--bg-card);
  border-radius: 7px;
  font-size: 12.5px;
  color: var(--text-dim);
}

.mcard.is-workout .mcard-cover.is-icon { font-size: 19px; }

@media (max-width: 860px) {
  .workout-screen { padding: 14px 13px 30px; }
  .wo-screen-head { margin-bottom: 13px; }
  .wo-screen-head h1 { font-size: 19px; }
  .wo-warmup { padding: 11px 13px; margin-bottom: 12px; }
  .wo-warmup li { font-size: 12.5px; }
  .wo-step { padding: 11px 12px 13px; margin-bottom: 10px; border-radius: 11px; }
  .wo-head { gap: 9px; margin-bottom: 10px; }
  .wo-num { width: 24px; height: 24px; font-size: 12.5px; }
  .wo-name { font-size: 14px; }
  .wo-en { font-size: 10.5px; }
  .wo-dose { font-size: 11.5px; padding: 4px 9px; }
  .wo-intensity { font-size: 11.5px; padding: 6px 9px; margin-bottom: 10px; }
}

/* ================= Личная программа ================= */

.day-screen { flex: 1; padding: 22px 16px 48px; }
.day-screen[hidden] { display: none !important; }
.day-screen > #day-body,
.day-screen > .day-flash,
.day-screen > .day-actions { max-width: 620px; margin-left: auto; margin-right: auto; }

/* Карточка дня на стартовом экране */
.mcard.is-day .mcard-cover.is-icon {
  font-size: 20px;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.mcard.is-day.is-next { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.mcard.is-day.is-next .mcard-hint b { color: var(--accent); font-weight: 600; }

.day-step { position: relative; }
.day-step .wo-head { align-items: flex-start; }

.day-menu {
  flex: none;
  width: 28px;
  height: 28px;
  margin-left: 2px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: none;
  color: var(--text-faint);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.day-menu:hover { color: var(--text); border-color: var(--text-faint); }

.day-prev {
  margin: 0 0 10px;
  font-size: 12.5px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.day-prev span { color: var(--text-faint); }

/* Строки подходов */
.sets { display: flex; flex-direction: column; gap: 7px; }

.set-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 9px;
  background: var(--bg-card);
  border: 1px solid transparent;
  border-radius: 9px;
}
.set-row.is-done { border-color: color-mix(in srgb, #34d399 40%, transparent); }

.set-n {
  flex: none;
  width: 20px;
  font-size: 12px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

.set-in {
  /* доля свободного места, а не фиксированная и не 100%: два поля в ряду
     должны делить остаток строки, иначе второе уезжает за край экрана */
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  max-width: 130px;
  padding: 7px 9px;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--text);
  /* Раздельные свойства, а не сокращение font: ключевое слово inherit
     нельзя ставить частью шорткода — правило целиком отбрасывается,
     поле остаётся 13px, и iOS увеличивает страницу при фокусе. */
  font-family: inherit;
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.set-in:focus { outline: none; border-color: var(--accent); }
.set-in::placeholder { color: var(--text-faint); font-weight: 400; }

.set-x { font-size: 12px; color: var(--text-faint); flex: none; }

.set-mark {
  margin-left: auto;
  flex: none;
  width: 18px;
  text-align: center;
  font-size: 13px;
  color: #34d399;
}
.set-mark.is-up { color: var(--accent); font-weight: 700; }

.set-add, .day-add, .day-reset {
  align-self: flex-start;
  margin-top: 4px;
  padding: 6px 11px;
  background: none;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--text-faint);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
.set-add:hover, .day-add:hover, .day-reset:hover { color: var(--text); border-color: var(--text-faint); }

.day-add { display: block; width: 100%; text-align: center; margin-top: 12px; padding: 12px; }
.day-reset { display: block; width: 100%; text-align: center; margin-top: 8px; padding: 10px; }

/* Кнопки внизу дня */
.day-actions { display: flex; gap: 10px; margin-top: 20px; }

.day-save {
  flex: 1;
  padding: 14px;
  background: var(--accent);
  border: 0;
  border-radius: 11px;
  color: #fff;
  font-family: inherit;
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.day-save:active { opacity: .85; }

.day-hist {
  flex: none;
  padding: 14px 18px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--text-dim);
  font-family: inherit;
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.day-hist:hover { color: var(--text); }

.day-flash {
  margin: 16px 0 0;
  padding: 11px 13px;
  border-radius: 9px;
  font-size: 13px;
  border-left: 2px solid var(--accent);
  background: var(--bg-panel);
  color: var(--text-dim);
}
.day-flash.is-ok { border-color: #34d399; }
.day-flash.is-warn { border-color: #fbbf24; }
.day-flash[hidden] { display: none !important; }

/* Окно выбора упражнения и истории */
.pick-modal .modal-box { max-width: 520px; width: 100%; max-height: 82vh; display: flex; flex-direction: column; }

.pick-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.pick-head h2 { margin: 0; font-size: 16px; }

.pick-close {
  margin-left: auto;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: none;
  color: var(--text-dim);
  font-size: 13px;
  cursor: pointer;
}
.pick-close:hover { color: var(--text); }

.pick-body { overflow-y: auto; padding: 12px 16px 20px; -webkit-overflow-scrolling: touch; }

.pick-group {
  margin: 14px 0 7px;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.pick-group:first-child { margin-top: 0; }

.pick-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-bottom: 5px;
  padding: 9px 11px;
  background: var(--bg-card);
  border: 1px solid transparent;
  border-radius: 9px;
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
}
.pick-item:hover { background: var(--bg-card-hover); }
.pick-item.is-in { opacity: .55; }

.pick-tier {
  flex: none;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #16181d;
}
.pick-tier.t-S { background: var(--tier-s); }
.pick-tier.t-A { background: var(--tier-a); }
.pick-tier.t-B { background: var(--tier-b); }
.pick-tier.t-C { background: var(--tier-c); }
.pick-tier.t-D { background: var(--tier-d); }
.pick-tier.t-F { background: var(--tier-f); }

.pick-name { flex: 1; min-width: 0; }
.pick-flag { flex: none; font-size: 10.5px; color: var(--text-faint); }

.hist-row {
  display: flex;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.hist-name { flex: 1; min-width: 0; color: var(--text-dim); }
.hist-sets { flex: none; font-variant-numeric: tabular-nums; }

/* Меню действий над упражнением */
.sheet {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, .55);
  padding: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}
.sheet-box {
  width: 100%;
  max-width: 420px;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.sheet-title {
  margin: 0;
  padding: 13px 16px;
  font-size: 12.5px;
  color: var(--text-faint);
  border-bottom: 1px solid var(--line);
}
.sheet-item {
  display: block;
  width: 100%;
  padding: 14px 16px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  font: inherit;
  font-size: 14.5px;
  text-align: left;
  cursor: pointer;
}
.sheet-item:hover { background: var(--bg-card); }
.sheet-item.is-cancel { color: var(--text-faint); border-bottom: 0; }

@media (max-width: 860px) {
  .day-screen { padding: 14px 13px 30px; }
  .day-prev { font-size: 11.5px; }
  .set-row { gap: 6px; padding: 5px 7px; }
  .set-in { max-width: none; padding: 10px 6px; }
  .set-n { width: 16px; font-size: 11px; }
  .day-actions { position: sticky; bottom: 0; padding: 10px 0 calc(6px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(to top, var(--bg) 62%, transparent); }
  .day-save { padding: 13px; font-size: 14.5px; }
  .day-hist { padding: 13px 14px; font-size: 13px; }
  .pick-modal .modal-box { max-height: 88vh; }
}

.mgrid-note {
  margin: -4px 0 10px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-faint);
}
.mgrid-note:empty { display: none; }

/* Заголовок группы мышц внутри дня */
.day-group {
  margin: 20px 0 8px;
  font-size: 11px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.day-group:first-child { margin-top: 0; }

/* Тир упражнения виден сразу: по нему и выстроен порядок в дне */
.day-tier {
  flex: none;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 700;
  color: #16181d;
}
.day-tier.t-S { background: var(--tier-s); }
.day-tier.t-A { background: var(--tier-a); }
.day-tier.t-B { background: var(--tier-b); }
.day-tier.t-C { background: var(--tier-c); }
.day-tier.t-D { background: var(--tier-d); }
.day-tier.t-F { background: var(--tier-f); }

.day-best {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--accent);
}

@media (max-width: 860px) {
  .day-group { margin: 16px 0 7px; }
  .day-tier { width: 20px; height: 20px; font-size: 10.5px; }
}