
:root {
  --bg:#050505;
  --panel:#171717;
  --panel-2:#202020;
  --panel-3:#292929;
  --text:#f4f4f4;
  --muted:#737379;
  --line:#242424;
  --accent:#F2A9C5;
  --accent-text:#090909;
  --danger:#ff5c62;
}
* { box-sizing:border-box; }
html,body {
  margin:0;
  min-height:100%;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
button,input { font:inherit; }
button { color:inherit; cursor:pointer; }
body { padding-bottom:calc(78px + env(safe-area-inset-bottom)); }
.hidden { display:none !important; }

.loading-screen,.error-screen {
  min-height:100vh;
  padding:28px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:16px;
}
.loader {
  width:48px;height:48px;border-radius:50%;
  border:4px solid #222;border-top-color:var(--accent);
  animation:spin .8s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }
.error-icon {
  width:64px;height:64px;border-radius:50%;
  background:#32181a;color:var(--danger);
  display:grid;place-items:center;font-size:32px;font-weight:900;
}
.error-screen p { max-width:420px;color:var(--muted);line-height:1.5; }

.app-shell {
  max-width:760px;
  margin:0 auto;
  padding:22px 18px 0;
}
.topbar {
  display:flex;align-items:center;justify-content:space-between;
  gap:18px;margin:10px 0 24px;
}
.eyebrow {
  color:var(--accent);
  font-size:11px;font-weight:850;letter-spacing:.12em;
}
h1,h2,p { margin:0; }
h1 { margin-top:6px;font-size:29px;letter-spacing:-.03em; }
h2 { font-size:17px; }
.muted { color:var(--muted); }
.circle-button {
  width:54px;height:54px;border:1px solid #303030;border-radius:50%;
  background:transparent;font-size:22px;display:grid;place-items:center;
}
.circle-button.small { width:42px;height:42px; }
.week-card {
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:17px 0;
}
.week-days {
  display:grid;grid-template-columns:repeat(7,1fr);gap:5px;
}
.week-days button {
  border:0;background:transparent;border-radius:18px;padding:8px 1px;
  display:grid;gap:6px;justify-items:center;color:var(--muted);
}
.week-days button.today { color:var(--text); }
.week-days button.selected { background:var(--panel-2);color:var(--text); }
.week-days span { font-size:11px; }
.week-days b { font-size:16px; }

.segmented {
  margin-top:18px;
  display:flex;gap:6px;overflow-x:auto;
  scrollbar-width:none;
}
.segmented::-webkit-scrollbar { display:none; }
.segmented button {
  flex:1;min-width:68px;border:1px solid transparent;background:var(--panel);
  border-radius:999px;padding:12px 15px;font-weight:850;
}
.segmented button.active { background:#050505;border-color:#343434; }

.section { margin-top:30px; }
.section-title {
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;margin-bottom:10px;
}
.exercise-row {
  display:grid;grid-template-columns:58px 1fr 32px;
  gap:13px;align-items:center;padding:11px 0;
  border-bottom:1px solid #141414;
}
.exercise-image {
  width:58px;height:58px;border:3px solid #303030;border-radius:50%;
  overflow:hidden;display:grid;place-items:center;background:#fff;color:#000;
  font-size:23px;
}
.exercise-image img { width:100%;height:100%;object-fit:cover; }
.exercise-copy { min-width:0;display:grid;gap:5px; }
.exercise-copy strong {
  font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.exercise-copy span { color:var(--muted);font-size:13px; }
.weight-pill {
  display:inline-block;border:1px solid #333;border-radius:999px;
  padding:2px 7px;margin-left:5px;color:#c8c8c8;font-size:12px;
}
.dots { border:0;background:transparent;color:var(--muted);font-size:18px; }

.sticky-action {
  position:fixed;left:0;right:0;bottom:calc(70px + env(safe-area-inset-bottom));
  padding:14px 18px;
  background:linear-gradient(180deg,transparent,rgba(5,5,5,.96) 35%);
  pointer-events:none;
  z-index:20;
}
.primary-button {
  display:block;width:min(724px,100%);margin:0 auto;
  border:0;border-radius:999px;padding:18px 22px;
  background:var(--accent);color:var(--accent-text);
  font-size:15px;font-weight:900;pointer-events:auto;
}
.primary-button.compact { width:auto;padding:14px 22px; }
.bottom-nav {
  position:fixed;left:0;right:0;bottom:0;
  height:calc(70px + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  border-top:1px solid var(--line);
  background:rgba(7,7,7,.98);
  display:grid;grid-template-columns:repeat(3,1fr);z-index:30;
}
.bottom-nav button {
  border:0;background:transparent;color:#5c5c61;
  display:grid;justify-items:center;align-content:center;gap:3px;
}
.bottom-nav button.active { color:var(--text); }
.bottom-nav span { font-size:20px; }
.bottom-nav small { font-size:11px; }
.bottom-space { height:145px; }

.history-item {
  background:var(--panel);border-radius:22px;padding:18px;margin:11px 0;
  display:grid;gap:7px;
}
.history-top { display:flex;justify-content:space-between;gap:12px; }
.history-title { font-weight:850; }
.history-meta { color:var(--muted);font-size:13px; }

.profile-card {
  background:var(--panel);border-radius:28px;padding:26px;
  display:grid;justify-items:center;text-align:center;gap:8px;margin-top:12px;
}
.profile-avatar {
  width:72px;height:72px;border-radius:50%;background:var(--panel-3);
  display:grid;place-items:center;font-size:34px;
}
.profile-grid {
  display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:14px;
}
.profile-stat {
  background:var(--panel);border-radius:20px;padding:17px;
  display:grid;gap:5px;
}
.profile-stat span { color:var(--muted);font-size:12px; }
.profile-stat strong { font-size:16px; }

.modal {
  position:fixed;inset:0;background:var(--bg);z-index:100;
  overflow-y:auto;padding-bottom:env(safe-area-inset-bottom);
}
.modal-card { max-width:760px;margin:0 auto;padding:20px 18px 30px; }
.modal-top {
  display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:12px;
}
.modal-progress { text-align:center;color:var(--muted);font-size:13px;font-weight:700; }
.text-button { border:0;background:transparent;color:var(--muted);font-weight:700; }
.exercise-hero {
  display:grid;justify-items:center;text-align:center;gap:9px;
  padding:34px 0 24px;
}
.hero-image {
  width:152px;height:152px;border-radius:50%;
  background:#fff;border:6px solid #292929;color:#000;
  display:grid;place-items:center;font-size:56px;overflow:hidden;
}
.hero-image img { width:100%;height:100%;object-fit:cover; }
.hero-name { font-size:24px;font-weight:900;max-width:600px; }
.sets-container { display:grid;gap:10px; }
.set-row {
  display:grid;grid-template-columns:42px 1fr 1fr 48px;
  gap:8px;align-items:center;
}
.set-number {
  width:42px;height:42px;border-radius:50%;border:1px solid #333;
  display:grid;place-items:center;color:var(--muted);
}
.set-input {
  width:100%;min-width:0;background:#0b0b0b;border:1px solid #303030;
  border-radius:18px;padding:14px 12px;color:var(--text);text-align:center;
  outline:none;
}
.set-input:focus { border-color:#575757; }
.set-save {
  width:48px;height:48px;border-radius:50%;
  border:1px solid #3b3b3b;background:transparent;font-size:22px;
}
.set-save.saved { background:var(--accent);color:var(--accent-text);border-color:var(--accent); }
.set-save:disabled { opacity:.7; }
.modal-next { margin-top:24px; }

@media (min-width:700px) {
  .app-shell { padding-top:35px; }
}


/* v2: интерактивность дней и упражнений */
body.modal-open { overflow:hidden; }

.week-days .week-day-cell {
  border:0;
  background:transparent;
  border-radius:18px;
  padding:8px 1px;
  display:grid;
  gap:6px;
  justify-items:center;
  color:var(--muted);
}
.week-days .week-day-cell.today { color:var(--text); }
.week-days .week-day-cell.selected { background:var(--panel-2);color:var(--text); }
.week-days .week-day-cell span { font-size:11px; }
.week-days .week-day-cell b { font-size:16px; }

.segmented {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(82px,1fr));
}
.segmented.single-day {
  grid-template-columns:1fr;
}
.day-button {
  min-width:0 !important;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.day-button span {
  color:var(--muted);
  font-size:12px;
  font-weight:650;
}
.day-button strong { font-size:15px; }
.day-button.active span { color:#9d9da1; }

button.exercise-row {
  width:100%;
  border:0;
  background:transparent;
  color:inherit;
  text-align:left;
  appearance:none;
  -webkit-appearance:none;
  user-select:none;
  -webkit-tap-highlight-color:rgba(242,169,197,.10);
}
button.exercise-row:active {
  background:#101010;
  transform:scale(.995);
}
.exercise-chevron {
  color:#6f6f74;
  font-size:32px;
  line-height:1;
  text-align:right;
  padding-right:2px;
}
.empty-card {
  background:var(--panel);
  border-radius:20px;
  padding:20px;
  color:var(--muted);
}
.preview-lock {
  color:#666;
  border-color:#282828 !important;
}


/* v3 CLICKFIX — Telegram WebView interaction hardening */
.eyebrow-row {
  display:flex;
  align-items:center;
  gap:8px;
}
.build-badge {
  color:#666;
  border:1px solid #2f2f2f;
  border-radius:999px;
  padding:2px 6px;
  font-size:9px;
  font-weight:800;
  letter-spacing:.04em;
}

#app,
#training-screen,
.week-card,
#day-selector,
.section,
#exercise-list,
.exercise-row,
.day-button,
.bottom-nav,
.bottom-nav button,
.circle-button,
.primary-button,
.text-button,
.tap-target {
  pointer-events:auto !important;
}

#app,
#training-screen,
.week-card,
#day-selector,
.section,
#exercise-list {
  position:relative;
  z-index:1;
}

.tap-target,
.exercise-row,
.day-button {
  touch-action:manipulation;
  -webkit-user-select:none;
  user-select:none;
  cursor:pointer;
}

.day-button {
  background:var(--panel);
  border:1px solid transparent;
  border-radius:999px;
  padding:12px 15px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:46px;
}
.day-button:active,
.exercise-row:active {
  opacity:.72;
}
.day-button.active {
  background:#050505;
  border-color:#3a3a3a;
  box-shadow:inset 0 0 0 1px rgba(242,169,197,.10);
}

div.exercise-row {
  width:100%;
  background:transparent;
  border-left:0;
  border-right:0;
  border-top:0;
  color:inherit;
}
.exercise-chevron {
  pointer-events:none;
}

.modal.hidden {
  display:none !important;
}
.modal:not(.hidden) {
  display:block !important;
  pointer-events:auto !important;
}

@media (hover:hover) {
  .exercise-row:hover { background:#0e0e0e; }
  .day-button:hover { border-color:#343434; }
}


/* v4 — нежно-розовый акцент + кликабельный календарь + рабочие подходы */
.week-day-cell {
  position:relative;
  min-height:52px;
  cursor:pointer;
  touch-action:manipulation;
  -webkit-tap-highlight-color:rgba(242,169,197,.10);
}
.week-day-cell:active {
  opacity:.7;
}
.week-day-cell.selected {
  background:rgba(242,169,197,.15) !important;
  box-shadow:inset 0 0 0 1px rgba(242,169,197,.32);
}
.week-day-cell.selected b {
  color:var(--accent);
}
.week-day-cell.today:not(.selected) b {
  color:var(--text);
}
.calendar-dot {
  width:5px;
  height:5px;
  border-radius:50%;
  background:transparent;
}
.week-day-cell.has-workout .calendar-dot {
  background:var(--accent);
}

.set-input {
  -webkit-user-select:text !important;
  user-select:text !important;
  pointer-events:auto !important;
  touch-action:auto !important;
  caret-color:var(--accent);
}
.set-input:focus {
  border-color:var(--accent) !important;
  box-shadow:0 0 0 1px rgba(242,169,197,.16);
}
.set-input[readonly] {
  opacity:.78;
}
.set-save {
  pointer-events:auto !important;
  touch-action:manipulation;
  cursor:pointer;
}
.set-save:not(.saved):active {
  border-color:var(--accent);
  color:var(--accent);
}
.set-save.saved {
  background:var(--accent) !important;
  color:var(--accent-text) !important;
  border-color:var(--accent) !important;
}
.primary-button {
  background:var(--accent) !important;
}
.eyebrow {
  color:var(--accent) !important;
}
.loader {
  border-top-color:var(--accent) !important;
}


/* v5 — редактор тренировок и расширенная библиотека */
.secondary-button {
  border:1px solid #313033;
  background:var(--panel);
  border-radius:18px;
  padding:16px 18px;
  color:var(--text);
  font-weight:750;
}
.edit-day-button {
  width:100%;
  margin-top:16px;
  text-align:center;
}
.editor-head {
  margin:30px 0 18px;
  display:grid;
  gap:7px;
}
.editor-head p {
  line-height:1.45;
  font-size:13px;
}
.editor-exercises {
  display:grid;
  gap:11px;
}
.editor-exercise-card {
  background:var(--panel);
  border:1px solid #242326;
  border-radius:22px;
  padding:13px;
}
.editor-exercise-top {
  display:grid;
  grid-template-columns:50px 1fr 36px;
  gap:11px;
  align-items:center;
}
.editor-exercise-name {
  min-width:0;
  font-size:15px;
  font-weight:800;
}
.editor-delete {
  width:34px;
  height:34px;
  border:0;
  border-radius:50%;
  background:#2b2226;
  color:#e5a5bf;
  font-size:24px;
  line-height:1;
}
.editor-controls {
  margin-top:12px;
  display:grid;
  grid-template-columns:1fr 1.2fr auto;
  gap:8px;
  align-items:end;
}
.editor-controls label {
  min-width:0;
  display:grid;
  gap:5px;
}
.editor-controls label span {
  color:var(--muted);
  font-size:11px;
}
.editor-input,
.library-search {
  width:100%;
  min-width:0;
  border:1px solid #343337;
  background:#0a0a0a;
  color:var(--text);
  border-radius:14px;
  padding:12px 10px;
  outline:none;
}
.editor-input:focus,
.library-search:focus {
  border-color:var(--accent);
  box-shadow:0 0 0 1px rgba(242,169,197,.14);
}
.editor-input.full {
  margin-top:8px;
}
.reorder-buttons {
  display:flex;
  gap:5px;
}
.mini-round {
  width:38px;
  height:38px;
  border-radius:50%;
  border:1px solid #353438;
  background:#0b0b0b;
}
.mini-round:disabled {
  opacity:.25;
}
.add-library-button {
  width:100%;
  margin-top:14px;
  color:var(--accent);
}
.ghost-danger-button {
  width:100%;
  margin-top:12px;
  border:1px solid #472e37;
  color:#e3a0ba;
  background:transparent;
  border-radius:18px;
  padding:14px;
}
.pink-text {
  color:var(--accent) !important;
}
.library-search-wrap {
  margin:24px 0 12px;
}
.library-search {
  border-radius:18px;
  padding:14px 16px;
}
.library-categories {
  display:flex;
  gap:7px;
  overflow-x:auto;
  padding-bottom:10px;
  scrollbar-width:none;
}
.library-categories::-webkit-scrollbar {
  display:none;
}
.category-chip {
  flex:none;
  border:1px solid #303034;
  background:var(--panel);
  color:#aaa7ab;
  border-radius:999px;
  padding:10px 13px;
  white-space:nowrap;
}
.category-chip.active {
  background:rgba(242,169,197,.14);
  border-color:rgba(242,169,197,.38);
  color:var(--accent);
}
.custom-exercise-button {
  width:100%;
  margin:4px 0 13px;
  color:var(--accent);
}
.custom-exercise-form {
  background:var(--panel);
  border:1px solid #2c2b2e;
  border-radius:22px;
  padding:16px;
  margin-bottom:14px;
}
.custom-exercise-form h3 {
  margin:0;
  font-size:16px;
}
.custom-grid {
  display:grid;
  grid-template-columns:1fr 1.5fr;
  gap:8px;
  margin-top:8px;
}
.custom-add-confirm {
  margin-top:12px;
}
.library-list {
  display:grid;
}
.library-item {
  width:100%;
  border:0;
  border-bottom:1px solid #171619;
  background:transparent;
  color:var(--text);
  display:grid;
  grid-template-columns:58px 1fr 32px;
  gap:12px;
  align-items:center;
  padding:10px 0;
  text-align:left;
}
.library-copy {
  min-width:0;
  display:grid;
  gap:4px;
}
.library-copy strong {
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:15px;
}
.library-copy span {
  color:var(--muted);
  font-size:11px;
}
.library-thumb {
  width:52px;
  height:52px;
  border-radius:50%;
  overflow:hidden;
  display:grid;
  place-items:center;
  background:#f7f3f5;
  border:2px solid #363338;
}
.library-thumb img {
  width:100%;
  height:100%;
  object-fit:cover;
}
.small-space {
  height:60px;
}

/* Все изображения упражнения получают одинаковое мягкое движение.
   Если исходник GIF/animated WebP, его собственная анимация сохраняется. */
.animated-exercise-media,
.exercise-image img,
.hero-image img,
.library-thumb img {
  animation:exerciseMediaFloat 2.8s ease-in-out infinite;
  transform-origin:center center;
  will-change:transform;
}
@keyframes exerciseMediaFloat {
  0%, 100% { transform:translateY(0) scale(1); }
  50% { transform:translateY(-2px) scale(1.025); }
}

@media (max-width:430px) {
  .editor-controls {
    grid-template-columns:82px 1fr;
  }
  .reorder-buttons {
    grid-column:1 / -1;
    justify-content:flex-end;
  }
}


/* v6 — точный нежно-розовый акцент и добавление подхода */
.add-set-button {
  width:100%;
  margin-top:14px;
  border:0;
  background:transparent;
  color:var(--text);
  display:flex;
  align-items:center;
  gap:12px;
  padding:7px 2px;
  font-weight:750;
  text-align:left;
}
.add-set-plus {
  width:48px;
  height:48px;
  border-radius:50%;
  border:1px solid #383438;
  display:grid;
  place-items:center;
  color:var(--accent);
  font-size:28px;
  font-weight:400;
}
.add-set-button:active .add-set-plus {
  background:rgba(242,169,197,.12);
  border-color:var(--accent);
}
.new-set-flash {
  animation:newSetFlash .75s ease-out;
}
@keyframes newSetFlash {
  0% { background:rgba(242,169,197,.18); }
  100% { background:transparent; }
}

/* Картинки библиотеки показываем крупнее внутри круга, без ощущения
   маленькой пиктограммы на огромном белом фоне. */
.library-thumb img,
.exercise-image img,
.hero-image img {
  object-fit:contain !important;
  transform-origin:center;
}
.library-thumb,
.exercise-image,
.hero-image {
  background:#f8f2f5 !important;
}

/* У fallback больше нет человечков-палочек. */
