/* ═════════ Tokens: Apple-структура + агрессивная неоновая палитра ═════════ */
:root{
  color-scheme: dark;
  --bg:#000;
  --elev:#111114;
  --elev-2:#1a1a1f;
  --elev-3:#2a2a31;
  --line:rgba(255,255,255,.08);
  --text:#fff;
  --muted:#8e8e98;
  --muted-2:#b4b4bd;

  --hot:#ff1f4b;
  --fire:#ff6a00;
  --volt:#d4ff00;
  --ice:#00e5ff;
  --ok:#30e36b;
  --warn:#e5b83b;
  /* лайм заливок (кнопки, выбор, прогресс) не темнеет в светлых разделах — в отличие от --volt, цвета текста и ссылок */
  --lime:#d4ff00;
  --on-lime:#0a0a0b;

  /* Manrope — текст, Oswald — заголовки (Google Fonts, с кириллицей); пока грузятся — системный шрифт */
  --font:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --font-head:"Oswald","Arial Narrow",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --ease:cubic-bezier(.2,.75,.2,1);
  --spring:cubic-bezier(.34,1.45,.5,1);
  --radius-l:20px;
  --radius-m:20px;
  --radius-s:12px;
  --gutter:20px;
  --maxw:1080px;

  --safe-top:max(env(safe-area-inset-top,0px),calc(var(--tg-safe-area-inset-top,0px) + var(--tg-content-safe-area-inset-top,0px)));
  --safe-bottom:max(env(safe-area-inset-bottom,0px),var(--tg-safe-area-inset-bottom,0px));
  --nav-h:56px;
  --tabbar-h:62px;
}
/* меню в шапке — от 1024 px; на телефоне и планшете — нижняя панель вкладок */
@media (min-width:1024px){:root{--tabbar-h:0px;--nav-h:64px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font);font-size:16px;line-height:1.47;letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;
  overscroll-behavior-y:none;overflow-x:hidden;
}
body.locked{overflow:hidden}
img,svg{max-width:100%;display:block}
button{font:inherit;color:inherit;letter-spacing:inherit;border:0;background:none;cursor:pointer;padding:0;text-align:inherit}
a{color:var(--volt);text-decoration:none}
:focus-visible{outline:2px solid var(--volt);outline-offset:3px;border-radius:8px}
[hidden]{display:none!important}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
/* между разделами 112 px на телефоне и 144 px на компьютере — без длинных пустых провалов */
section{padding-block:clamp(36px,4.5vw,52px);position:relative}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin:0 0 12px;color:var(--muted)}
/* заголовки — Oswald */
h1,h2,h3,.h1,.h2,.h3,.hist-h,.page-title,.sec-title{font-family:var(--font-head)}
.h1{font-size:clamp(40px,11.2vw,64px);line-height:1.04;font-weight:600;letter-spacing:-.005em;margin:0;text-wrap:balance}
.h2{font-size:clamp(28px,3vw + 14px,36px);line-height:1.08;font-weight:600;letter-spacing:0;margin:0;text-wrap:balance}
.h3{font-size:20px;line-height:1.16;font-weight:600;letter-spacing:0;margin:0}
.lead{font-size:clamp(16px,4.36vw,19px);line-height:1.38;color:var(--muted-2);font-weight:500;letter-spacing:-.02em;margin:12px 0 0;max-width:34ch;text-wrap:pretty}
.lead strong{color:var(--text);font-weight:700}
.muted{color:var(--muted)}
.tnum{font-variant-numeric:tabular-nums}
.c-volt{color:var(--volt)}

/* акцентное слово заголовка — сплошной лайм, без перелива */
.grad{color:var(--volt)}

/* ───────── Buttons ───────── */
/* Главная — лаймовая заливка с чёрным текстом, 56 px; второстепенная — серая с белым текстом, 48 px;
   текстовая (.link-arrow) — лаймовая со стрелкой «→». Без свечений: кнопку выделяют цвет и размер. */
.btn{
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:56px;padding:0 32px;border-radius:980px;
  background:var(--lime);color:var(--on-lime);font-size:17px;font-weight:700;letter-spacing:-.01em;text-align:center;
  transition:transform .25s var(--spring),background .2s,color .2s;
}
/* Наведение — только там, где есть курсор: на телефоне подсветка «залипает» после касания */
@media (hover:hover){
  .btn:hover{background:#e3ff4d}
  .btn-ghost:hover{background:#fff;color:#000} /* серые кнопки — переход в негатив */
}
@media (hover:none){ /* на телефоне наведения нет — негатив на касание: быстро включается, плавно гаснет */
  .btn-ghost:active{background:#fff;color:#000;transition-duration:.08s}
}
.btn:active{transform:scale(.97)}
.btn-block{width:100%}
.btn-ghost{min-height:48px;background:var(--elev-2);color:var(--text);font-size:15px;font-weight:600}
.btn-sm{min-height:36px;padding:0 16px;font-size:14px}
.btn.loading{pointer-events:none;opacity:.85}
.btn.loading::before{content:"";width:18px;height:18px;border-radius:50%;border:2.5px solid rgba(0,0,0,.25);border-top-color:#000;animation:rot .8s linear infinite}
.btn-ghost.loading::before{border-color:rgba(255,255,255,.35);border-top-color:#fff}
@keyframes rot{to{transform:rotate(360deg)}}
.link-arrow{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:15px;color:var(--volt);font-weight:600}
.link-arrow::after{content:"→";line-height:1;transition:transform .2s var(--spring)}
.link-arrow:hover::after{transform:translateX(4px)}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 28px;margin-top:22px}

/* ───────── Splash ───────── */
.splash{position:fixed;inset:0;z-index:200;background:#000;display:grid;place-items:center;pointer-events:none;animation:splash-out .55s var(--ease) 1s forwards}
.splash svg{width:88px;height:88px;transform:rotate(-90deg);overflow:visible}
.splash circle{fill:none;stroke-width:9;stroke-linecap:round;animation:ring-fill 1s var(--ease) both}
@keyframes ring-fill{from{stroke-dashoffset:var(--len)}}
.splash circle:nth-child(2){animation-delay:.12s}
.splash circle:nth-child(3){animation-delay:.24s}
@keyframes splash-out{to{opacity:0;visibility:hidden;transform:scale(1.08)}}
/* Пока разметка не переведена (index.html → i18n.js), страница скрыта, а заставка не уходит */
.i18n-wait body>:not(.splash){visibility:hidden}
.i18n-wait .splash{animation:none}

/* ───────── Шапка ───────── */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:50;padding-top:var(--safe-top);
  background:rgba(0,0,0,.7);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid transparent;transition:border-color .3s;
}
.nav.scrolled{border-bottom-color:var(--line)}
.nav-in{height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:12px}
.logo{flex:none;display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;letter-spacing:.14em;color:var(--text)}
.logo svg{flex:none;width:28px;height:28px}
/* узкий телефон: шапка теснее; на самых узких остаётся только значок логотипа */
@media (max-width:420px){
  .nav-right{gap:10px}
  /* временная кнопка «Тест» — только точкой, а логотип рядом с ней — только значком */
  .nav .test-btn{width:30px;padding:0;gap:0;justify-content:center;font-size:0}
  .nav-in:has(.test-btn:not([hidden])) .logo{font-size:0;gap:0}
}
@media (max-width:360px){.nav-right{gap:8px}.nav .btn-sm{padding:0 12px}}
@media (min-width:1024px){html:not(.member) .nav .test-btn{width:30px;padding:0;gap:0;justify-content:center;font-size:0}} /* у гостя в шапке ещё и «Начать» */
@media (max-width:350px){.logo{font-size:0;gap:0}}
/* ячейки равной ширины: у подписчика «Сегодня» — третья из пяти, а группа стоит по центру шапки, значит, и кнопка — ровно по центру */
/* у гостя ячейки по ширине подписи; у подписчика — равные, чтобы «Сегодня» (третья из пяти) стояла ровно по центру шапки */
.nav-links{display:grid;grid-auto-flow:column;grid-auto-columns:auto;gap:2px;align-items:center}
.member .nav-links{grid-auto-columns:1fr}
.nav-links button{height:36px;padding:0 12px;border-radius:980px;font-size:14px;font-weight:600;color:var(--muted-2);text-align:center;white-space:nowrap;transition:color .2s,background .2s}
.nav-links button:hover{color:var(--text)}
.nav-links button[aria-selected="true"]{color:var(--on-lime);background:var(--lime);font-weight:700}
/* «Сегодня» — крупнее остальных: серая подложка-прямоугольник; выбранная — сплошная лаймовая заливка, как у остальных кнопок шапки */
.nav-links button[data-tab="today"]{height:40px;padding:0 18px;border-radius:12px;font-size:15px;color:var(--text);background:var(--elev-2)}
.nav-links button[data-tab="today"][aria-selected="true"],.nav-links button[data-tab="today"]:active{color:var(--on-lime);background:var(--lime)}
.nav-right{display:flex;align-items:center;gap:14px}
@media (min-width:1024px){
  .nav-in{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
  .nav-right{justify-self:end}
}
.progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--lime);transform-origin:0 50%;transform:scaleX(var(--p,0))}
@media (max-width:1023px){.nav-links{display:none}}

/* ───────── Нижняя панель вкладок (как в iOS) ───────── */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:45;
  display:grid;grid-template-columns:repeat(var(--tabs,5),minmax(0,1fr));
  padding:4px 4px calc(4px + var(--safe-bottom));
  background:rgba(12,12,14,.92);-webkit-backdrop-filter:saturate(180%) blur(22px);backdrop-filter:saturate(180%) blur(22px);
  border-top:1px solid var(--line);
}
.tab{position:relative;display:grid;justify-items:center;align-content:center;gap:4px;min-height:53px;padding:5px 0 4px;border-radius:14px;font-size:12px;line-height:1.2;font-weight:600;letter-spacing:0;color:var(--muted);transition:color .25s,background .25s;text-align:center}
.tab span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tab svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--spring)}
.tab[aria-selected="true"]{color:var(--volt)} /* без жирного: длинные подписи («Программа») иначе не влезают в ячейку */
/* «Сегодня» — главная вкладка подписчика: стоит посередине на серой подложке; лаймовой становится, когда выбрана или нажата */
.tab[data-tab="today"]{margin-inline:2px;background:var(--elev-2);color:var(--muted-2)}
.tab[data-tab="today"][aria-selected="true"],.tab[data-tab="today"]:active{background:var(--lime);color:var(--on-lime)}
@media (max-width:360px){.tab{font-size:11px;letter-spacing:-.03em}} /* «Aujourd’hui», «Progression», «Pertanyaan» на узком телефоне иначе обрезаются */
.tab:active svg{transform:scale(.88)}
@media (min-width:1024px){.tabbar{display:none}}

/* ───────── Страницы ───────── */
.page.enter{animation:page-in .45s var(--ease) backwards} /* не both: после анимации transform не остаётся, иначе fixed-кнопки внутри страницы липнут к странице, а не к экрану */
@keyframes page-in{from{opacity:0;transform:translateY(14px)}}
.page > section:first-child:not(.hero){padding-top:calc(var(--safe-top) + var(--nav-h) + 16px)}
.page-head{text-align:center}
.page-head .lead{margin-inline:auto}

/* ───────── Hero ───────── */
.hero{padding-top:calc(var(--safe-top) + var(--nav-h) + 36px);padding-bottom:28px;overflow:hidden}
/* живое состояние («Идёт тренировка») — точка мерцает: одна из немногих постоянных анимаций */
.live{width:8px;height:8px;border-radius:50%;background:var(--hot);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}
.hero .lead{margin-inline:0}
.h1 .w{display:inline-block;animation:rise .9s var(--ease) both;animation-delay:calc(1s + var(--i) * .09s);
  padding-block:.12em .2em;margin-block:-.12em -.2em} /* блок слова вмещает хвосты букв (р, у): иначе они обрезаются по границе строки; межстрочный интервал не меняется */
/* заголовок первого экрана — всегда две строки, как задумано в дизайне блока: «Прогресс —» / «это система.»;
   во всех языках разрыв после второго слова (в переводах заголовок из тех же четырёх частей) */
.hero .h1{display:flex;flex-wrap:wrap;column-gap:.25em}
.hero .h1::after{content:"";flex-basis:100%;order:1}
.hero .h1 .w:nth-of-type(n+3){order:2}
@keyframes rise{from{opacity:0;transform:translateY(40%) rotate(4deg);filter:blur(8px)}}
.hero .up{animation:fade-up .8s var(--ease) both;animation-delay:calc(1.3s + var(--i,0) * .1s)}
@keyframes fade-up{from{opacity:0;transform:translateY(16px)}}

/* Фото тренера. Телефон: фото во всю ширину сразу под шапкой, книзу затемняется, заголовок — на нём.
   Компьютер (от 820 px): две колонки — контент слева с выравниванием по левому краю, фото справа. */
.hero:has(.hero-media){padding-top:calc(var(--safe-top) + var(--nav-h))}
.hero-media{position:relative;margin-inline:calc(var(--gutter) * -1)}
.hero-media picture{display:contents} /* <picture> только выбирает файл: на компьютере — широкий коллаж hero-wide.webp */
.hero-photo{display:block;width:100%;height:auto;aspect-ratio:1/1;max-height:70vh;object-fit:cover;object-position:50% 25%} /* на планшете квадрат во всю ширину занял бы весь экран */
.hero-media::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,transparent 40%,rgba(0,0,0,.55) 68%,#000 100%)}
.hero-media .h1{position:absolute;z-index:1;left:var(--gutter);right:var(--gutter);bottom:clamp(10px,4vw,28px);margin:0;text-shadow:0 4px 30px rgba(0,0,0,.6)}
.hero-body{position:relative;margin-top:4px}
@media (min-width:820px){
  .hero:has(.hero-media){padding-top:calc(var(--safe-top) + var(--nav-h) + 32px);text-align:left}
  .hero-grid{max-width:1180px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
    grid-template-rows:auto 1fr;grid-template-areas:"title photo" "body photo";column-gap:clamp(28px,4vw,64px)}
  .hero-media{display:contents}
  /* коллаж 16:9 целиком, без обрезки: на всю ширину блока позади контента, начинается на уровне заголовка.
     Края уходят в чёрный (маска проявляет фон): слева и справа — мягко, сверху и снизу — узкой полосой */
  .hero-photo{grid-column:1 / -1;grid-row:1 / -1;align-self:start;position:relative;z-index:0;
    transform:translateX(20%); /* сдвиг вправо — дальше от текста; выступающая часть обрезается краем экрана (overflow у .hero) */
    margin-top:-30px; /* фото сразу под шапкой: голова центральной фигуры — на уровне заголовка, головы вокруг не уходят под шапку */
    aspect-ratio:1672/941;max-height:none;pointer-events:none;
    -webkit-mask-image:linear-gradient(to right,transparent,rgba(0,0,0,.5) 12%,#000 26%,#000 86%,transparent),linear-gradient(to bottom,transparent,#000 3%,#000 97%,transparent);
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(to right,transparent,rgba(0,0,0,.5) 12%,#000 26%,#000 86%,transparent),linear-gradient(to bottom,transparent,#000 3%,#000 97%,transparent);
    mask-composite:intersect}
  /* коллаж уходит за правый край окна — последние 2% ширины дополнительно затемняются до чёрного, обрезанного края не видно */
  .hero:has(.hero-media)::after{content:"";position:absolute;top:0;right:0;bottom:0;width:2%;z-index:1;pointer-events:none;background:linear-gradient(to right,rgba(0,0,0,0),rgba(0,0,0,.6) 45%,#000)}
  .hero-media .h1{grid-area:title;position:relative;z-index:1;text-shadow:0 2px 24px rgba(0,0,0,.8);font-size:clamp(44px,5vw,64px)}
  .hero-body{grid-area:body;z-index:1;margin-top:0;left:var(--gutter)} /* тот же сдвиг, что у заголовка (left из мобильной вёрстки) — контент ровно под ним */
  .hero-body .lead{text-shadow:0 1px 14px #000}
  .hero .cta-row{justify-content:flex-start}
}

/* ───────── О тренере ───────── */
.portrait{position:relative;aspect-ratio:4/5;max-width:100%;border-radius:var(--radius-l);overflow:hidden;isolation:isolate;background:var(--elev)}
.portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.portrait .mono{position:absolute;inset:0;display:grid;place-items:center;font-size:clamp(72px,24vw,128px);font-weight:800;letter-spacing:-.06em;color:rgba(255,255,255,.92);mix-blend-mode:overlay}
.story p strong{color:var(--text)}

/* ───────── Segmented control ───────── */
.seg{position:relative;display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--elev-2);border-radius:12px;padding:3px}
.seg button{position:relative;z-index:1;min-height:38px;padding:0 18px;font-size:14px;font-weight:600;color:var(--muted-2);border-radius:9px;transition:color .25s;white-space:nowrap;text-align:center}
.seg button[aria-pressed="true"]{color:var(--on-lime);font-weight:700}
.seg-thumb{position:absolute;top:3px;bottom:3px;left:3px;border-radius:9px;background:var(--lime);transition:transform .4s var(--ease),width .3s var(--ease)} /* без пружины: ползунок не вылетает за край */
@media (max-width:360px){.seg button{padding:0 12px}} /* «Восстановление» иначе не влезает в карточку */
.seg-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:28px}

/* ───────── Для кого ───────── */
/* фото от края до края экрана (на компьютере — в рамке), переключатель лежит на нижней части фото */
.aud-photo{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:52% 30%}
.aud-hero .seg-row{position:absolute;left:0;right:0;bottom:14px;margin:0}
.aud-hero .seg{background:rgba(20,20,24,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 8px 30px rgba(0,0,0,.5)}
@keyframes pop-in{from{opacity:0;transform:scale(.85) translateY(10px)}}
.swap{animation:swap .5s var(--ease) both}
@keyframes swap{from{transform:translateY(10px);opacity:.2}}

/* ───────── Трансформации ───────── */
.tf-row{display:grid;grid-auto-flow:column;grid-auto-columns:min(80%,300px);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin-top:16px;
  padding-inline:max(var(--gutter),calc((100% - var(--maxw)) / 2 + var(--gutter)));scroll-padding-inline:max(var(--gutter),calc((100% - var(--maxw)) / 2 + var(--gutter)));scrollbar-width:none}
.tf-row::-webkit-scrollbar{display:none}
.spark{width:100%;height:auto;overflow:visible}
.spark .ln{fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:var(--l);stroke-dashoffset:var(--l);transition:stroke-dashoffset 1.4s var(--ease) .2s}
.spark .dot{opacity:0;transition:opacity .4s 1.4s}
.tf.in .spark .ln{stroke-dashoffset:0}
.tf.in .spark .dot{opacity:1}
.ba{position:relative;aspect-ratio:4/5;border-radius:var(--radius-m);overflow:hidden;background:var(--elev-2);--x:50%}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba .before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--x)) 0 0)}
.ba .knob{position:absolute;top:0;bottom:0;left:var(--x);width:2px;background:#fff;transform:translateX(-1px);pointer-events:none}
.ba .knob::after{content:"‹ ›";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:36px;height:36px;border-radius:50%;background:#fff;color:#000;display:grid;place-items:center;font-weight:800;font-size:13px}
.ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.ba .lbl{position:absolute;top:10px;padding:3px 9px;border-radius:980px;background:rgba(0,0,0,.6);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.ba .lbl.l{left:10px}.ba .lbl.r{right:10px}

/* ───────── Галочки в списках ───────── */
.mark{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;margin-top:2px}
.mark svg{width:12px;height:12px}
.mark.ok{background:rgba(212,255,0,.16);color:var(--volt)}

/* ───────── Строки упражнений ───────── */
.ex{display:grid;grid-template-columns:40px 1fr auto;gap:12px;align-items:center;padding:11px 0;border-top:1px solid var(--line);width:100%}
.ex:first-of-type{border-top:0}
.ex .thumb{width:40px;height:40px;border-radius:10px;background:var(--elev-3);display:grid;place-items:center;transition:background .3s,transform .4s var(--spring)}
.ex .thumb svg{width:16px;height:16px;color:var(--volt)}
.ex b{font-size:15px;font-weight:600;display:block;line-height:1.25;transition:color .3s}
.ex small{font-size:13px;color:var(--muted)}
.ex .sets{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--muted-2)}

/* ───────── Неделя ───────── */
.seg-cap{font-size:14px;color:var(--muted-2)}
.days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;margin-top:16px}
.day{display:grid;justify-items:center;align-content:center;gap:8px;height:72px;border-radius:14px;background:none;transition:background .25s,transform .3s var(--spring)}
.day:active{transform:scale(.9)}
.day span{font-size:12px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.04em;text-align:center}
.day svg{width:28px;height:28px;transform:rotate(-90deg);overflow:visible}
.day circle,.wk-mini circle{fill:none;stroke-width:3}
.day .trk,.wk-mini .trk{stroke:var(--c);opacity:.55}
.day .prg,.wk-mini .prg{stroke:var(--c);stroke-linecap:round;transition:stroke-dashoffset .8s var(--ease)}
.day .rest,.wk-mini .rest{fill:#3a3a42;stroke:none}
.day[aria-pressed="true"]{background:var(--elev-2)}
.day[aria-pressed="true"] .rest{fill:#5a5a63}
.day[aria-pressed="true"] span{color:var(--text)}
.pill{display:inline-flex;align-items:center;min-height:28px;padding:0 11px;border-radius:980px;font-size:12px;font-weight:700;background:var(--elev-3);color:var(--muted-2);white-space:nowrap}
.ex-check{cursor:pointer;border-radius:12px}
.ex-check .thumb svg{opacity:0;transform:scale(.3);transition:opacity .2s,transform .4s var(--spring);color:#000}
.ex-check[aria-checked="true"] .thumb svg{opacity:1;transform:none}
.ex-check[aria-checked="true"] b{color:var(--muted)}
.ex-check:active .thumb{transform:scale(.85)}
.wk-strip{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.wk-mini{display:flex;flex-direction:column;align-items:center;gap:8px;padding:8px 0;border-radius:14px}
.wk-mini span{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase}
.wk-mini svg{width:28px;height:28px;transform:rotate(-90deg);overflow:visible}
.wk-mini.is-today{background:var(--elev-2)}
.wk-mini.is-today span{color:var(--text)}

/* ───────── Цены ───────── */
.plans{display:grid;gap:8px}
.plan{position:relative;display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:14px;align-items:center;background:var(--elev);border-radius:var(--radius-m);padding:16px;transition:transform .35s var(--spring),box-shadow .25s}
.plan:active{transform:scale(.97)}
/* выбранный тариф — лаймовая рамка, без свечения и бегущего градиента */
.plan[aria-checked="true"]{box-shadow:inset 0 0 0 2px var(--lime)}
.radio{width:24px;height:24px;border-radius:50%;border:2px solid #5a5a63;display:grid;place-items:center;transition:border-color .2s}
.plan[aria-checked="true"] .radio{border-color:var(--lime)}
.radio::after{content:"";width:12px;height:12px;border-radius:50%;background:var(--lime);transform:scale(0);transition:transform .35s var(--spring)}
.plan[aria-checked="true"] .radio::after{transform:scale(1)}
.plan-name{font-size:16px;font-weight:700;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.plan-sub{font-size:13px;color:var(--muted);margin-top:2px;display:block}
.plan-price{text-align:end}
.plan-price b{display:block;font-size:20px;font-weight:800;letter-spacing:-.035em;font-variant-numeric:tabular-nums;line-height:1.1;white-space:nowrap}
.plan-price span{font-size:12px;color:var(--muted)}
.badge{font-size:12px;font-weight:700;padding:2px 8px;border-radius:980px;box-shadow:inset 0 0 0 1px rgba(212,255,0,.45);color:var(--volt);white-space:nowrap}
.included h4{margin:0 0 6px;font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.included ul{list-style:none;margin:0;padding:0;display:grid;gap:0 18px;grid-template-columns:1fr}
@media (min-width:520px){.included ul{grid-template-columns:1fr 1fr}}
.included li{display:grid;grid-template-columns:18px 1fr;gap:10px;align-items:center;min-height:36px;font-size:15px;line-height:1.35}
.included li svg{width:18px;height:18px;color:var(--volt);margin-top:1px}
.checkout{margin-top:12px;display:grid;gap:10px;text-align:center}
.checkout small{font-size:13px;color:var(--muted)}
.price-extras{display:grid;gap:4px;justify-items:center}
.price-extras .btn{justify-self:stretch}
.shield{flex:none;width:36px;height:36px;color:var(--volt)}
.g-list div{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:center;min-height:38px;padding:8px 0;border-top:1px solid var(--line);font-size:15px;font-weight:600}

/* ───────── Таблицы (вкладка «Прогресс») ───────── */
table{width:100%;border-collapse:collapse;min-width:340px}
th,td{padding:16px 14px;text-align:start;font-size:14px;line-height:1.3;vertical-align:top}
thead th{font-size:12px;color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--line)}
tbody tr+tr > *{border-top:1px solid var(--line)}

/* на телефоне — плотнее отступы, длинные слова переносятся */
@media (max-width:520px){
  table{min-width:0;table-layout:fixed}
  th,td{padding:12px 8px;font-size:13px}
  thead th{font-size:12px;letter-spacing:.04em}
  th,td{overflow-wrap:break-word;hyphens:auto}
}
@media (max-width:360px){th,td{padding:11px 6px;font-size:12px}}
@media (max-width:360px){.plan{padding:18px 14px;gap:12px}}

/* ───────── Лента результатов: аватар и точки ───────── */
.avatar{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:800;color:#000}
.dots{display:flex;justify-content:center;gap:8px;margin-top:20px}
.dots button{width:8px;height:8px;border-radius:4px;background:var(--elev-3);transition:width .4s var(--spring),background .3s}
.dots button[aria-current="true"]{width:26px;background:var(--volt)}

/* Белые разделы главной («Тренер», «Результаты»): фон и текст инвертированы.
   Цвета переопределены токенами — карточки, подписи и линии внутри подстраиваются сами;
   лайм и голубой на белом не читаются, поэтому внутри — их тёмные оттенки */
section.light{background:#fff;color:#000;
  --text:#000;--elev:#f1f1f4;--elev-2:#e5e5ea;--elev-3:#d1d1d7;--line:rgba(0,0,0,.1);
  --muted:#6e6e76;--muted-2:#3c3c43;--volt:#4a7000;--ice:#0093ad}

/* ───────── FAQ ───────── */
.faq{margin-top:24px;max-width:760px;margin-inline:auto}
.faq details + details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;align-items:center;min-height:56px;padding:14px 0;font-size:16px;font-weight:600;letter-spacing:-.01em;transition:color .2s}
.faq summary::-webkit-details-marker{display:none}
/* тихая стрелка вместо лаймового «+» в круге: вниз — закрыт, вверх — открыт */
.faq summary::after{content:"";flex:none;width:8px;height:8px;margin-inline-end:4px;border:solid var(--muted);border-width:0 1.8px 1.8px 0;transform:translateY(-2px) rotate(45deg);transition:transform .3s var(--ease),border-color .2s}
.faq details[open] summary::after{transform:translateY(2px) rotate(-135deg);border-color:var(--muted-2)}
.faq-a{overflow:hidden}
.faq-a p{margin:0 0 16px;color:var(--muted-2);font-size:15px;line-height:1.5;max-width:62ch}
@media (min-width:1024px){.faq summary{min-height:60px;font-size:17px}.faq-a p{font-size:16px;line-height:1.55}}
.faq-grid{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "list" "support";gap:12px}
.faq-head{grid-area:head}
.faq-grid .faq{grid-area:list;margin:0;max-width:none}
.support-card{grid-area:support;display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:8px;padding:16px;border-radius:var(--radius-m);background:var(--elev)}
/* длинный ник поддержки не переносится: на узком телефоне кнопка «Написать» уходит под текст, а не за край экрана */
.support-card{flex-wrap:wrap}
.support-txt{flex:1 1 0;min-width:min-content}
.support-txt b{display:block;font-size:16px;font-weight:700}
.support-txt p{margin:2px 0 0;font-size:14px;line-height:1.45;color:var(--muted-2)}
.support-txt .mail{display:inline-block;margin-top:4px;font-size:14px;font-weight:700;color:var(--text)}
.support-card .btn{flex:none;min-height:44px;padding:0 18px}
@media (min-width:1024px){
  .faq-grid{grid-template-columns:360px minmax(0,1fr);grid-template-areas:"head list" "support list";grid-template-rows:auto 1fr;gap:24px 56px;align-items:start}
  .faq-head .page-head{text-align:start}
  .faq-head .page-head .h2{font-size:36px}
  .support-card{display:block;margin-top:0;padding:20px}
  .support-card .btn{margin-top:14px}
}

/* ───────── Подвал ───────── */
footer{border-top:1px solid var(--line);padding-block:24px calc(24px + var(--tabbar-h) + var(--safe-bottom));font-size:13px;color:var(--muted)}
.foot{display:grid;gap:16px}
/* соцсети в подвале: серые кнопки, при наведении/касании — негатив, как у остальных серых кнопок */
.socials{display:flex;gap:10px}
.soc{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--elev-2);color:var(--text);transition:background .2s,color .2s,transform .25s var(--spring)}
.soc svg{width:20px;height:20px}
.soc:active{transform:scale(.92)}
@media (hover:hover){.soc:hover{background:#fff;color:#000}}
@media (hover:none){.soc:active{background:#fff;color:#000}}
/* переключатель языка: в подвале и в профиле */
/* страницы документов: <article> из public/legal/*.html — заголовок, версия, оглавление, разделы (у самих страниц свой legal.css).
   Без карточек: оглавление и таблицы — строки с тонкими линиями; цветная плашка — только у пометки «черновик» */
.legal{max-width:760px}
.legal h1{font-family:var(--font-head);font-size:clamp(30px,8vw,44px);font-weight:600;letter-spacing:0;line-height:1.1;margin:0 0 12px;text-wrap:balance}
.legal h2{font-family:var(--font-head);font-size:20px;font-weight:600;letter-spacing:0;line-height:1.2;margin:28px 0 8px;scroll-margin-top:calc(var(--nav-h) + var(--safe-top) + 12px)}
.legal h3{font-family:var(--font-head);font-size:18px;font-weight:600;letter-spacing:0;line-height:1.2;margin:20px 0 8px}
.legal p,.legal li{color:var(--muted-2);font-size:15px;line-height:1.6;margin:0 0 10px;overflow-wrap:anywhere}
.legal ul,.legal ol{margin:0 0 10px;padding-inline-start:20px}
.legal b{color:var(--text)}
.legal a{text-decoration:underline;text-underline-offset:2px}
.legal .lead{font-size:16px}
.legal .meta{display:flex;flex-wrap:wrap;gap:2px 18px;margin:0 0 16px;font-size:13px;color:var(--muted)}
.legal .meta div{display:flex;gap:6px}
.legal .meta dt,.legal .meta dd{margin:0}
.legal .meta dd{color:var(--muted-2)}
.legal .draft{margin:0 0 18px;padding:12px 16px;border-radius:12px;background:rgba(255,106,0,.1);box-shadow:inset 0 0 0 1px rgba(255,106,0,.35);color:#ffc49a;font-size:13px}
.legal .toc{margin:20px 0 4px;padding:14px 0 6px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.legal .toc h2{margin:0 0 8px;font-family:var(--font);font-size:13px;font-weight:600;color:var(--muted)}
.legal .toc ol{columns:2 220px;column-gap:28px}
.legal .toc li{margin:0 0 6px;font-size:14px;break-inside:avoid}
.legal .toc a{text-decoration:none}
.legal .summary{list-style:none;padding:0}
.legal .summary li{margin:0;padding:10px 0;border-top:1px solid var(--line)}
.legal .summary li:first-child{border-top:0}
.legal .table{overflow-x:auto;margin:0 0 12px}
.legal table{width:100%;min-width:560px;border-collapse:collapse;font-size:13px;line-height:1.5}
.legal th,.legal td{padding:10px 12px 10px 0;text-align:start;vertical-align:top;border-top:1px solid var(--line);color:var(--muted-2)}
.legal th{border-top:0;color:var(--text);font-weight:600}
.legal .fine{text-align:start}
.foot-links{display:flex;flex-wrap:wrap;gap:8px 20px}
.foot-links a{color:var(--muted-2)}

/* ───────── Шторка ───────── */
.sheet-wrap{position:fixed;inset:0;z-index:90}
.backdrop{position:absolute;inset:0;background:rgba(0,0,0,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity .35s}
.sheet{position:absolute;left:0;right:0;bottom:0;margin-inline:auto;max-width:600px;max-height:calc(100% - var(--safe-top) - 24px);background:#141418;border-radius:28px 28px 0 0;box-shadow:0 -20px 60px rgba(0,0,0,.6);padding:10px var(--gutter) calc(24px + var(--safe-bottom));display:flex;flex-direction:column;transform:translateY(100%);transition:transform .5s var(--spring)}
.sheet-wrap.open .backdrop{opacity:1}
.sheet-wrap.open .sheet{transform:translateY(var(--drag,0px))}
.sheet.dragging{transition:none}
@media (min-width:1024px){
  .sheet{top:50%;bottom:auto;left:50%;right:auto;width:min(560px,calc(100% - 48px));max-width:none;max-height:calc(100% - 80px);margin:0;padding:20px 28px 28px;border-radius:24px;box-shadow:0 30px 80px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.06);opacity:0;transform:translate(-50%,-46%);transition:transform .3s var(--ease),opacity .2s}
  .sheet-wrap.open .sheet{opacity:1;transform:translate(-50%,-50%)}
  .sheet[data-size="s"]{width:min(480px,calc(100% - 48px))}
  .grabber{display:none}
}
.grabber{width:40px;height:5px;border-radius:3px;background:var(--elev-3);margin:0 auto 10px;flex:none}
.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:36px;flex:none;touch-action:none}
.sheet-head .close{width:36px;height:36px;border-radius:50%;background:var(--elev-2);display:grid;place-items:center;color:var(--muted-2)}
.sheet-head .close svg{width:12px;height:12px}
.sheet-head .back{color:var(--volt);font-weight:600;font-size:15px}
/* Анимации появления (сдвиг шага теста, всплытие вариантов) выходят за края: без overflow-x:hidden и clip у шага на компьютере на время
   анимации появлялись полосы прокрутки, и окно меняло размер, когда они исчезали */
.sheet-body{overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;padding-top:8px;flex:1}
.sheet h3{font-size:clamp(24px,6.4vw,28px);font-weight:600;letter-spacing:0;line-height:1.15;margin:0 0 6px;text-wrap:balance}
.sheet .sub{color:var(--muted-2);margin:0 0 20px;font-size:15px;line-height:1.45}
.q-kicker{margin:0 0 4px;font-size:14px;font-weight:600;color:var(--muted-2)}
.q-count{margin:8px 0 4px;font-size:13px;color:var(--muted)}
.q-progress{flex:1;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px}
.sheet-head .back + .q-progress{margin-inline-start:4px}
.q-progress i{height:4px;border-radius:2px;background:var(--elev-3);transition:background .3s}
.q-progress i.on{background:var(--lime)}
.opts{display:grid;gap:8px}
.opt{display:grid;grid-template-columns:1fr 24px;gap:12px;align-items:center;min-height:72px;padding:14px 18px;border-radius:16px;background:var(--elev-2);transition:transform .3s var(--spring),background .2s,box-shadow .2s;animation:pop-in .45s var(--spring) both;animation-delay:calc(var(--i) * .05s)}
.opt:active{transform:scale(.97)}
.opt b{display:block;font-size:16px;font-weight:700;color:var(--text)}
.opt b + span{display:block;margin-top:2px;font-size:14px;color:var(--muted)} /* серая только подпись под заголовком, не обёртка */
.opt .radio{justify-self:end}
.opt[aria-checked="true"]{background:var(--elev-2);box-shadow:inset 0 0 0 2px var(--lime)}
.opt[aria-checked="true"] .radio{border-color:var(--lime)}
.opt[aria-checked="true"] .radio::after{transform:scale(1)}
/* окно согласия: галочки — квадратные, текст обычный (длинная фраза, не заголовок) */
.opt.check{min-height:0;text-align:start}
.opt.check .ck{font-size:15px;line-height:1.45;color:var(--text)}
.opt.check .radio,.opt.check .radio::after{border-radius:7px}
.opt.check .radio::after{border-radius:3px}
.legal-docs{display:flex;flex-wrap:wrap;gap:0 18px;margin:12px 0 0}
.legal-docs .link-arrow{font-size:14px;min-height:40px}
.legal-docs .link-arrow::after{content:none}
.legal-sheet{max-width:none}
.legal-sheet h1{font-size:28px}
.legal-sheet h2{scroll-margin-top:8px}
.q-step{animation:slide-in .45s var(--ease) both;overflow-y:clip}
.q-step.backward{animation-name:slide-in-back}
@keyframes slide-in{from{opacity:0;transform:translateX(calc(40px * var(--dir,1)))}}
@keyframes slide-in-back{from{opacity:0;transform:translateX(calc(-40px * var(--dir,1)))}}
.result-card{border-radius:var(--radius-m);padding:22px;background:var(--elev-2);margin-bottom:16px}
.result-card .big{font-size:40px;font-weight:800;letter-spacing:-.05em;line-height:1}
.result-card .big small{font-size:15px;color:var(--muted-2);font-weight:600;letter-spacing:-.01em}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.chip{padding:6px 12px;border-radius:980px;background:rgba(255,255,255,.08);font-size:13px;font-weight:600}
.sheet-actions{display:grid;gap:10px;margin-top:18px}
.sheet-actions .link-arrow{justify-content:center}
.q-rows{margin-top:16px;background:var(--elev-2)}
.q-rows div{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:48px;padding:8px 0;font-size:15px}
.q-rows div + div{border-top:1px solid var(--line)}
.q-rows span{color:var(--muted-2)}
.q-rows span::first-letter{text-transform:uppercase}
.q-rows b{font-weight:600;text-align:end}
.q-rows b.big{font-size:18px;font-weight:800}
.q-step .adapt{margin:14px 0 0}
.sum{display:block;margin:12px 0 0}
.sum div{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:48px;padding:8px 0;font-size:15px}
.sum div + div{border-top:1px solid var(--line)}
.sum div span:first-child{color:var(--muted-2)}
.sum div span:last-child{text-align:end;font-weight:600}
.sum .total{min-height:60px}
.sum .total span:first-child{color:var(--text);font-size:17px;font-weight:700}
.sum .total span:last-child{font-size:28px;font-weight:800;white-space:nowrap}
.fine{font-size:13px;line-height:1.5;color:var(--muted);text-align:center;margin-top:14px}

/* ───────── Telegram Stars + профиль ───────── */
.xtr{display:inline-block;width:.82em;height:.82em;vertical-align:-.06em;fill:#ffc700}
.btn .xtr{fill:currentColor} /* на лаймовой кнопке жёлтая звезда не видна — она цвета текста */
/* ВРЕМЕННО, для тестов: переключатель гость ↔ подписчик в шапке. Пунктир — чтобы не спутать с настоящим интерфейсом */
.test-btn{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border-radius:980px;border:1.5px dashed var(--muted);font-size:12px;font-weight:700;color:var(--muted-2);white-space:nowrap;transition:border-color .2s,color .2s}
.test-btn i{width:8px;height:8px;border-radius:50%;background:var(--muted)}
.test-btn.on{border-color:var(--volt);color:var(--volt)}
.test-btn.on i{background:var(--volt)}
.test-btn.loading{opacity:.5;pointer-events:none}
/* аватар — простой круг, без бегущего кольца: статус подписки показан в профиле */
.me-btn{width:40px;height:40px;border-radius:50%;background:var(--elev-3);flex:none;overflow:hidden}
.me-btn img,.me-btn span,.profile .ava img,.profile .ava span{width:100%;height:100%;border-radius:50%;object-fit:cover;display:grid;place-items:center;background:var(--elev-3);font-weight:800}
.me-btn span{font-size:13px}
.profile{display:flex;align-items:center;gap:16px;margin:0 0 20px;text-align:start}
.profile-who{min-width:0}
.profile-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:4px}
.profile .ava{flex:none;width:64px;height:64px;border-radius:50%;background:var(--elev-3);overflow:hidden}
.profile .ava img,.profile .ava span{font-size:20px}
.profile h3{margin:0;font-size:24px;line-height:1.2}
@media (min-width:1024px){.profile h3{font-size:26px}}
.handle{color:var(--muted-2);font-size:14px}
.premium{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;padding:3px 10px;border-radius:980px;background:linear-gradient(90deg,#7c5cff,#e04fd8);color:#fff}
.stat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:12px;padding:0 16px;border-radius:var(--radius-m);background:var(--elev-2)}
.stat{padding:14px 0;min-width:0}
.stat:nth-child(even){padding-inline-start:16px;border-inline-start:1px solid var(--line)}
.stat:nth-child(n+3){border-top:1px solid var(--line)}
.stat b{display:block;font-size:20px;font-weight:800;letter-spacing:-.04em}
.stat span{font-size:13px;color:var(--muted)}
.sub-card{display:grid;grid-template-columns:10px minmax(0,1fr) auto;gap:12px;align-items:center;margin-bottom:12px;padding:16px;border-radius:var(--radius-m);background:var(--elev-2);font-size:13px;line-height:1.35}
.sub-card div > span{display:block;margin-top:2px;color:var(--muted-2)}
.sub-card .link-arrow{white-space:nowrap}
.sub-card b{display:block;font-weight:700;font-size:16px;line-height:1.3}
.sub-card i{flex:none;width:10px;height:10px;border-radius:50%;background:var(--muted)}
.sub-card.on{background:rgba(48,227,107,.1);box-shadow:inset 0 0 0 1px rgba(48,227,107,.4)}
.sub-card.on i{background:var(--ok)}
.sub-card.warn{background:rgba(229,184,59,.12);box-shadow:inset 0 0 0 1px rgba(229,184,59,.4)}
.sub-card.warn i{background:var(--warn)}
.sub-card.off{background:rgba(255,31,75,.12);box-shadow:inset 0 0 0 1px rgba(255,31,75,.4)}
.sub-card.off i{background:var(--hot)}
/* карточка профиля: показатели и цель строками, напоминания — отдельной карточкой */
.p-card{border-radius:var(--radius-m);background:var(--elev-2);padding:0 16px}
.p-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:center;min-height:68px}
.p-kpis div + div{padding-inline-start:16px;border-inline-start:1px solid var(--line)}
.p-kpis b{display:block;font-size:20px;font-weight:800}
.p-kpis span{font-size:13px;color:var(--muted)}
.p-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 14px;align-items:center;min-height:68px;padding:12px 0}
.p-kpis + .p-row,.p-row + .p-row,.hours + .p-row{border-top:1px solid var(--line)}
.p-row b{display:block;font-size:16px;font-weight:700}
.p-row span{display:block;margin-top:2px;font-size:13px;line-height:1.35;color:var(--muted)}
.p-eyebrow{margin:24px 0 8px}
.p-card .hours{margin:0 0 14px}
.p-card .hours button{background:var(--elev-3)}
.p-link{width:100%;text-align:start}
.p-link .chev{justify-self:end}

/* Toast, confetti */
.toast{position:fixed;left:50%;bottom:calc(var(--tabbar-h) + var(--safe-bottom) + 20px);z-index:120;transform:translate(-50%,20px) scale(.95);opacity:0;pointer-events:none;background:#fff;color:#000;padding:12px 18px;border-radius:14px;font-size:14px;font-weight:600;max-width:calc(100% - 40px);text-align:center;transition:opacity .25s,transform .4s var(--spring);box-shadow:0 10px 40px rgba(0,0,0,.6)}
.toast.show{opacity:1;transform:translate(-50%,0) scale(1)}
#confetti{position:fixed;inset:0;z-index:110;pointer-events:none;width:100%;height:100%}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .spark .ln{stroke-dashoffset:0!important}.spark .dot{opacity:1!important}
  .splash{display:none}
}

/* ═════════ Режим подписчика ═════════ */
.member .guest-only{display:none!important}
html:not(.member) .member-only{display:none!important}

/* ───────── Заголовки экранов, карточки-списки ───────── */
/* Заголовок экрана и блока; карточка со строками-разделителями — без карточек внутри карточек */
.page-title{font-family:var(--font-head);font-size:28px;line-height:1.15;font-weight:600;letter-spacing:0;margin:0;text-wrap:balance}
.sec-title{font-family:var(--font-head);font-size:20px;line-height:1.2;font-weight:600;letter-spacing:0;margin:24px 0 10px}
.sec-cap{margin:-4px 0 10px;font-size:13px;color:var(--muted)}
.page-sub{font-size:15px;color:var(--muted-2)}
.row-card{background:var(--elev);border-radius:var(--radius-m);padding:4px 16px}
.chev{flex:none;width:16px;height:16px;fill:none;stroke:var(--muted);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
[dir="rtl"] .chev{transform:scaleX(-1)}
@media (min-width:1024px){.page-title{font-size:36px}.sec-title{font-size:22px;margin-top:28px}.row-card{padding:4px 20px}}

/* ───────── Сегодня ─────────
   Телефон: неделя, тренировка дня (кнопка «Начать» видна без прокрутки), программа. Компьютер: тренировка слева, неделя и программа справа */
.today-grid{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"week" "main" "side";gap:22px 40px;align-items:start}
.today-week{grid-area:week}
.today-main{grid-area:main;min-width:0}
.today-side{grid-area:side;padding:0 16px}
.wk-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:10px;font-size:13px;color:var(--muted)}
.wk-head b{color:var(--text);font-weight:700}
.today-main .eyebrow{margin:0}
.today-title{margin-top:8px;font-size:clamp(28px,7.7vw,40px);line-height:1.12}
.today-sub{margin:8px 0 0;font-size:15px;line-height:1.45;color:var(--muted-2)}
.live-tag{display:inline-flex;align-items:center;gap:8px;color:var(--volt);font-weight:700}
.today-list{margin-top:16px}
.today-list div{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:52px;padding:10px 0;border-top:1px solid var(--line);font-size:16px;line-height:1.3}
.today-list div:first-child{border-top:0}
.today-list b{font-weight:600}
.today-list span{color:var(--muted-2);font-size:15px;white-space:nowrap;font-variant-numeric:tabular-nums}
.today-note{margin:10px 0 0;font-size:13px;color:var(--muted)}
.today-actions{display:flex;flex-direction:column;align-items:stretch;gap:4px;margin-top:16px}
.today-actions .link-arrow{justify-content:center}
.prog-row{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;min-height:72px;padding:12px 0;text-align:start}
.prog-row small{display:block;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.prog-row b{display:block;font-size:16px;font-weight:700;margin-top:4px}
#todayNudge:not(:empty){border-top:1px solid var(--line)}
@media (min-width:1024px){
  .today-grid{grid-template-columns:minmax(0,1fr) 360px;grid-template-areas:"main week" "main side";grid-template-rows:auto 1fr;gap:16px 40px}
  .today-week{padding:20px;border-radius:var(--radius-m);background:var(--elev)}
  .today-week .wk-head{margin-bottom:14px;font-size:14px;color:var(--muted-2)}
  .today-week .wk-head span:first-child{font-size:16px;font-weight:700;color:var(--text)}
  .today-sub{font-size:16px}
  .today-list div{min-height:56px}
  .today-actions{flex-direction:row;align-items:center;gap:24px;margin-top:20px}
  .today-actions .btn{width:auto;padding:0 36px}
  .today-side{padding:0 20px}
}

/* ───────── Программа (подписчик): заголовок с «Изменить →», день без карточки вокруг, справа вся неделя строками ───────── */
.page-top{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"t a" "s s";align-items:center;column-gap:12px}
.page-top .page-title{grid-area:t}
.page-top .page-sub{grid-area:s;margin-top:2px}
.page-top .link-arrow{grid-area:a}
.day-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px}
.day-top .eyebrow{margin:0}
.day-title{font-family:var(--font-head);font-size:24px;line-height:1.2;font-weight:600;letter-spacing:0;margin:6px 0 0}
.day-meta,.day-note{margin:6px 0 0;font-size:15px;color:var(--muted-2)}
.day-note{font-size:16px;line-height:1.45}
.ex-list{margin-top:12px}
.ex-list .ex{grid-template-columns:36px minmax(0,1fr) auto;gap:14px;min-height:60px;padding:10px 0}
.ex-list .ex b{font-size:16px}
.ex-list .ex .sets{font-size:15px}
.wl-row{display:grid;grid-template-columns:36px minmax(0,1fr) 16px;gap:8px;align-items:center;width:100%;min-height:52px;padding:8px 0;border-top:1px solid var(--line);text-align:start}
.wl-row:first-child{border-top:0}
.wl-d{font-size:13px;font-weight:700;color:var(--muted);text-transform:uppercase}
.wl-t{font-size:16px;font-weight:600;line-height:1.3}
.wl-t.muted{font-weight:500}
.prog-week .sec-title{margin-top:28px}
@media (min-width:1024px){
  .page-top{display:flex;align-items:baseline;gap:20px}
  .page-top .page-sub{margin:0;font-size:16px}
  .day{height:76px}
  .day-title{font-size:26px}
  .prog-week .sec-title{margin-top:0}
  .wl-t{font-size:15px}
}
.resume-pill{position:fixed;left:50%;bottom:calc(var(--tabbar-h) + var(--safe-bottom) + 14px);z-index:46;transform:translateX(-50%);display:flex;align-items:center;gap:10px;padding:11px 18px 11px 14px;border-radius:980px;background:var(--lime);color:var(--on-lime);font-weight:700;font-size:14px;white-space:nowrap;box-shadow:0 8px 24px rgba(0,0,0,.5);animation:pill-in .5s var(--spring) both}
/* плавающая кнопка оплаты на вкладке «Цены»; при идущей тренировке встаёт над плашкой «Тренировка идёт» */
.buy-bar{position:fixed;left:0;right:0;bottom:calc(var(--tabbar-h) + var(--safe-bottom) + 12px);z-index:44;padding-inline:var(--gutter);pointer-events:none;animation:buy-in .5s var(--spring) both}
.buy-bar .btn{pointer-events:auto;max-width:560px;margin-inline:auto;display:flex;box-shadow:0 10px 30px rgba(0,0,0,.6)}
/* узкий телефон: «Продлить «Годовой» — 4 800 ⭐» помещается в одну строку; длинные языки переносятся, звезда держится за цену (неразрывный пробел) */
@media (max-width:400px){.buy-bar .btn{padding:0 20px}}
@media (max-width:359px){.buy-bar .btn{padding:0 16px;font-size:15px}}
@keyframes buy-in{from{opacity:0;transform:translateY(20px)}}
body.buy-on footer{padding-bottom:calc(32px + var(--tabbar-h) + var(--safe-bottom) + 136px)}
/* подвал — только на главной; на остальных вкладках место под нижнюю панель (и плавающую кнопку оплаты) даёт main */
body:not(.on-home) footer{display:none}
body:not(.on-home) main{padding-bottom:calc(24px + var(--tabbar-h) + var(--safe-bottom))}
body.buy-on:not(.on-home) main{padding-bottom:calc(24px + var(--tabbar-h) + var(--safe-bottom) + 136px)}
/* кнопка языка в шапке */
/* выбор языка: сокращение со стрелкой в шапке, список выпадает под ним */
.lang-dd{position:relative;flex:none}
.lang-btn{display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 4px;font-size:14px;font-weight:700;color:var(--muted-2);letter-spacing:.04em;transition:color .2s}
.lang-btn::after{content:"";width:6px;height:6px;border:solid currentColor;border-width:0 1.8px 1.8px 0;transform:translateY(-1.5px) rotate(45deg);transition:transform .25s var(--ease)}
.lang-btn[aria-expanded="true"]{color:var(--text)}
.lang-btn[aria-expanded="true"]::after{transform:translateY(1px) rotate(-135deg)}
@media (hover:hover){.lang-btn:hover{color:var(--text)}}
.lang-menu{position:absolute;top:calc(100% + 10px);inset-inline-end:0;z-index:60;min-width:190px;max-height:min(70vh,430px);overflow-y:auto;padding:6px;border-radius:16px;background:#1a1a1f;box-shadow:0 18px 50px rgba(0,0,0,.7),inset 0 0 0 1px var(--line);animation:menu-in .22s var(--ease) both}
@keyframes menu-in{from{opacity:0;transform:translateY(-6px) scale(.97)}}
.lang-menu button{display:flex;justify-content:space-between;align-items:center;gap:16px;width:100%;padding:10px 12px;border-radius:10px;font-size:15px;font-weight:600;color:var(--muted-2);text-align:start}
.lang-menu button b{font-size:12px;font-weight:800;letter-spacing:.06em;color:var(--muted)}
.lang-menu button[aria-selected="true"]{color:var(--volt)}
.lang-menu button[aria-selected="true"] b{color:var(--volt)}
@media (hover:hover){.lang-menu button:hover{background:var(--elev-3);color:var(--text)}}
.resume-pill i{width:8px;height:8px;border-radius:50%;background:#000;animation:pulse-dark 1.6s infinite}
@keyframes pill-in{from{opacity:0;transform:translate(-50%,20px) scale(.9)}}
@keyframes pulse-dark{50%{opacity:.3}}

/* ───────── История ───────── */
/* тренировки и рекорды — один блок со строками-разделителями, а не стопка карточек (и без плашки под датой) */
.sess,.records{margin-top:0}
.sess:has(.sess-item),.records:has(.rec){padding:0 16px;border-radius:var(--radius-m);background:var(--elev)} /* пустое состояние («Пока пусто») — своя карточка, без рамки в рамке */
.sess-item{display:grid;grid-template-columns:40px minmax(0,1fr) auto 16px;gap:12px;align-items:center;width:100%;min-height:64px;padding:10px 0;border-top:1px solid var(--line);transition:opacity .2s}
.sess-item:first-child{border-top:0}
.sess-item:active{opacity:.6}
.sess-date{display:grid;justify-items:center;line-height:1}
.sess-date b{font-size:18px;font-weight:800;letter-spacing:-.03em}
.sess-date span{font-size:12px;color:var(--muted);text-transform:uppercase;font-weight:700;margin-top:4px}
.sess-item strong{display:block;font-size:16px;font-weight:600;line-height:1.25}
.sess-item small{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
/* удалённая и отменённая тренировки в истории: название приглушено, пометка цветом */
.sess-item.off strong{color:var(--muted-2)}
.sess-state{font-weight:700;color:var(--warn)}
.sess-state.deleted{color:var(--hot)}
.pr-badge{font-size:12px;font-weight:800;padding:4px 9px;border-radius:980px;background:rgba(212,255,0,.14);color:var(--volt);white-space:nowrap}
.rec{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:60px;padding:10px 0;border-top:1px solid var(--line);font-size:16px;font-weight:600;line-height:1.3}
.btn:disabled{opacity:.35;pointer-events:none}
/* выбор программы в шторке: ползунки на всю ширину */
.pick-row{display:grid;gap:8px;margin-top:16px}
.pick-row .seg{display:grid;width:100%;background:var(--elev-2)}
.pick-row .seg button{min-height:42px;font-size:14px}
.rec:first-child,.rec-group h4 + .rec{border-top:0}
.rec-group + .rec-group{border-top:1px solid var(--line)}
.rec-group h4{margin:0;padding:14px 0 0;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.rec b{color:var(--text);font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums}
.rec small{display:block;margin-top:2px;font-size:13px;font-weight:400;color:var(--muted)}
.kpi-card{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:16px;padding:16px;border-radius:var(--radius-m);background:var(--elev)}
.kpi-card div{min-width:0;padding:0 12px;border-inline-start:1px solid var(--line)}
.kpi-card div:first-child{padding-inline-start:0;border-inline-start:0}
.kpi-card b{display:block;font-size:22px;font-weight:800;letter-spacing:-.03em;line-height:1.15;white-space:nowrap}
.kpi-card span{display:block;margin-top:2px;font-size:13px;line-height:1.3;color:var(--muted)}
.hist-grid{display:grid;gap:0 24px;align-items:start}
#histMore:not(:empty){margin-top:4px}
@media (min-width:1024px){
  .kpi-card{margin-top:20px;padding:20px 24px}
  .kpi-card div{padding:0 24px}
  .kpi-card b{font-size:28px}
  .kpi-card span{font-size:14px}
  .hist-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.hist-h{margin:28px 0 0;font-size:20px;font-weight:600;letter-spacing:0}
.empty{text-align:center;padding:32px 22px;border-radius:var(--radius-l);background:var(--elev);color:var(--muted-2);margin-top:16px}
.empty b{display:block;color:var(--text);font-size:17px;margin-bottom:6px}
.chips-sets{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.chips-sets span{padding:4px 9px;border-radius:9px;background:var(--elev-3);font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.detail-list{margin-top:10px}
.detail-list > div{padding:12px 0;border-top:1px solid var(--line)}
.detail-list > div:first-child{border-top:0}
.detail-list b{font-size:15px;font-weight:700}
.detail-list small{display:block;font-size:12px;color:var(--ice)}

/* ───────── Экран тренировки ─────────
   Одно упражнение крупно: кольцо его подходов (сплошное, каждый подход — своя доля), поля текущего подхода, главная кнопка
   внизу экрана и над ней «Далее». Сверху мини-кольца всех упражнений, ниже — все подходы таблицей. Отдых и секундомер — внутри
   того же кольца. На компьютере три колонки: список упражнений · кольцо с кнопкой · подходы. Поля 56 px, цифры 20–22 px */
.wo{position:fixed;inset:0;z-index:80;display:flex;flex-direction:column;background:var(--bg);transform:translateY(100%);transition:transform .5s var(--spring)}
.wo.open{transform:none}
.wo-head{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:center;min-height:64px;padding:calc(var(--safe-top) + 10px) 16px 10px;background:rgba(0,0,0,.85);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}
.wo-head > div{min-width:0}
.wo-min{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--elev-2);color:var(--muted-2)}
.wo-min svg{width:18px;height:18px}
.wo-head small{display:block;font-size:13px;font-weight:500;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wo-head b{display:block;font-size:16px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wo-date{display:none}
@media (max-width:360px){.wo-step,.wo-sep{display:none}} /* узкий экран: в шапке только время — номер упражнения виден по кольцам */
.wo.all-done .wo-finish{display:none}
.wo-prog{height:3px;background:var(--elev-2);flex:none}
.wo-prog i{display:block;height:100%;background:var(--lime);transform-origin:0 50%;transform:scaleX(0);transition:transform .5s var(--ease)}
.wo-body{flex:1;display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
/* упражнение занимает весь экран (ряд «gap» растягивается) — кнопка внизу; длинная таблица прокручивается под ней */
.wx{flex:1 0 auto;display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"nav" "head" "ring" "focus" "side" "gap" "foot";grid-template-rows:auto auto auto auto auto 1fr auto;width:100%;max-width:640px;margin-inline:auto;padding:14px 16px 0;box-sizing:border-box}
.wo-end{display:grid;width:100%;max-width:640px;margin:0 auto;padding:4px 16px calc(20px + var(--safe-bottom));box-sizing:border-box}
.wo-end .link{justify-self:center;min-height:44px;padding:0 8px;font-size:14px;font-weight:600;color:var(--hot)} /* удаление — малиновым и без стрелки: это не переход */

/* упражнения: мини-кольца в ряд (на компьютере — список с названиями); кольцо заполняется по сделанным подходам */
.wo-nav{grid-area:nav;min-width:0}
.wo-nav-head{display:none;justify-content:space-between;align-items:baseline;gap:12px;padding-inline:4px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.wo-nav-head .tnum{font-size:13px;font-weight:500;letter-spacing:0;text-transform:none}
.wo-steps{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,48px);justify-content:center;gap:clamp(6px,3.4vw,14px)}
.wo-row{display:block;width:100%;aspect-ratio:1;border-radius:50%;transition:background .2s}
.wo-row.on{background:var(--elev-2)}
.wo-row-txt{display:none}
.wo-mini{position:relative;display:grid;place-items:center;width:100%;height:100%}
.wo-mini > svg{position:absolute;left:4%;top:4%;width:92%;height:92%;transform:rotate(-90deg)}
.wo-mini circle{fill:none;stroke-width:4}
.wo-mini .trk{stroke:var(--elev-3)}
.wo-mini .arc{stroke:var(--lime);stroke-linecap:round}
.wo-mini > span{position:relative;font-size:15px;font-weight:800;color:var(--muted);font-variant-numeric:tabular-nums}
.wo-mini > span svg{display:block;width:18px;height:18px}
.wo-row.on .wo-mini > span{color:var(--text)}
.wo-row.done .wo-mini > span{color:var(--volt)}

/* название упражнения, видео и меню */
.wx-head{grid-area:head;display:grid;grid-template-columns:minmax(0,1fr) 44px 44px;gap:8px;align-items:center;margin-top:18px}
.wx-head > div{min-width:0}
.wx-head b{display:block;font-family:var(--font-head);font-size:24px;font-weight:600;line-height:1.2;letter-spacing:0}
.wx-head small{display:block;margin-top:2px;font-size:14px;color:var(--muted)}
.wx-more{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--elev-2);color:var(--muted-2)}
.wx-more svg{width:18px;height:18px}

/* кольцо упражнения */
.wo-ring{grid-area:ring;justify-self:center;position:relative;width:min(268px,72vw);aspect-ratio:1;margin-top:14px}
.wo-ring > svg{display:block;width:100%;height:100%;transform:rotate(-90deg)}
.wo-ring circle{fill:none;stroke-width:14}
.wo-ring .trk{stroke:var(--elev-2)}
.wo-ring .arc{stroke:var(--lime);stroke-linecap:round;transition:stroke-dashoffset .7s cubic-bezier(.2,.8,.2,1),opacity .2s}
.wo-ring .lap0{stroke:transparent;opacity:0}
.wo-ring .lap{stroke-linecap:round;opacity:0;transition:stroke .3s}
.wo-ring[data-mode="run"] .lap0{opacity:1}
.wo-ring .rest-arc{stroke:var(--ice);stroke-width:4;stroke-linecap:round;opacity:0;transition:stroke-dashoffset .25s linear,opacity .3s}
.wo-ring[data-mode="rest"] .rest-arc{opacity:1}
.wo-ring-mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 16%;text-align:center}
.wo-ring-mid small{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.wo-ring-mid small.ice{color:var(--ice)}
.wo-ring-mid b{font-size:clamp(64px,24vw,96px);font-weight:800;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.wo-ring[data-mode="rest"] .wo-ring-mid b{font-size:clamp(52px,18vw,72px);line-height:1.05}
.wo-ring[data-mode="rest"] .wo-ring-mid span{font-size:15px}
.wo-ring[data-mode="run"] .wo-ring-mid b{margin-top:2px;font-size:clamp(60px,22vw,88px)}
.wo-ring-mid span{margin-top:4px;font-size:16px;color:var(--muted)}
.wo-ring-mid .wo-goal{margin-top:8px;font-weight:600}
.wo-ring-mid .wo-goal.hit{color:var(--volt)}
.wo-ring-mid b.ttl{margin-top:14px;font-size:18px;font-weight:700;line-height:1.3;letter-spacing:0}
.wo-check{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;background:var(--lime);color:var(--on-lime);animation:set-pop .45s var(--spring)}
.wo-check svg{width:34px;height:34px}
.wo-ring.pop .wo-ring-mid{animation:ring-pop .45s var(--spring)}
@keyframes ring-pop{40%{transform:scale(1.06)}}
@keyframes set-pop{40%{transform:scale(1.2)}}

/* поля текущего подхода крупно */
.wo-focus{grid-area:focus;margin-top:18px}
.wo-focus[hidden]{display:none}
.wo-focus-set{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.wo-focus-set.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.wo-fld > span{display:block;margin-bottom:6px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:center}
.wo-fld .stp{grid-template-columns:44px minmax(0,1fr) 44px}
.wo-fld .stp input{font-size:22px}
/* подсказка секундомера, прошлый раз, тренер, замена, объяснение цели, предупреждения */
.wo-side{grid-area:side;display:flex;flex-direction:column;min-width:0} /* заметки и подходы: на телефоне заметки выше, на компьютере — под таблицей */
.wx-notes{min-width:0}
.wx-note{margin-top:10px;font-size:14px;line-height:1.4;color:var(--muted);text-align:center}
.wx-note b{display:inline;font-size:inherit;font-weight:600;color:var(--muted-2)}
.wx-note.swapped{color:var(--ice)}
.wo-hint{margin:26px 16px 0;font-size:15px;line-height:1.45;color:var(--muted-2);text-align:center}

/* все подходы упражнения: правка значений и снятие отметки */
.wx-sets{margin-top:22px;padding:14px 0 0;border-top:1px solid var(--line)} /* section: без общих отступов разделов страницы */
.set-cols,.set{display:grid;grid-template-columns:24px minmax(0,1fr) minmax(0,1fr) 44px;gap:8px;align-items:center}
.wx[data-type="bw"] .set-cols,.wx[data-type="bw"] .set,.wx[data-type="time"] .set-cols,.wx[data-type="time"] .set{grid-template-columns:24px minmax(0,1fr) 44px}
.set-cols span{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-weight:700;text-align:center}
.set{margin-top:8px}
.set-n{font-size:15px;font-weight:800;color:var(--muted);text-align:center;font-variant-numeric:tabular-nums;transition:color .3s}
.set.cur .set-n,.set.done .set-n{color:var(--volt)}
.stp{display:grid;grid-template-columns:34px minmax(0,1fr) 34px;align-items:center;height:56px;border-radius:14px;background:var(--elev-2);overflow:hidden;transition:background .3s}
.stp button{height:100%;font-size:22px;font-weight:500;color:var(--muted-2);text-align:center;transition:background .15s}
.stp button:active{background:var(--elev-3)}
.stp input{width:100%;min-width:0;height:100%;padding:0;border:0;background:transparent;color:var(--text);font:inherit;font-size:20px;font-weight:800;letter-spacing:-.02em;text-align:center;font-variant-numeric:tabular-nums;-moz-appearance:textfield;appearance:textfield}
.stp input::placeholder{color:var(--muted);font-weight:500;font-size:14px}
.stp input:focus{outline:none;background:var(--elev-3)}
.wx-sets .stp{grid-template-columns:minmax(0,1fr);height:48px;background:var(--elev)}
.wx-sets .stp button{display:none}
.wx-sets .stp input{font-size:18px}
.wx-sets .set.cur .stp{background:rgba(212,255,0,.08)}
.wx-sets .set.done .stp input{color:var(--muted-2)}
.wx-sets .set:not(.done):not(.cur) .stp input{color:var(--muted)}
.set.running .stp{background:rgba(0,229,255,.1)}
.wx-sets .set.running .stp input{color:var(--ice)}
.set-ok{justify-self:center;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--elev-2);color:#5a5a63;transition:background .25s,color .25s,transform .35s var(--spring)}
.set-ok svg{width:18px;height:18px}
.set-ok:active{transform:scale(.86)}
.set.done .set-ok{background:rgba(212,255,0,.16);color:var(--volt)}
.wo.resting .set:not(.done) .set-ok{opacity:.35} /* во время отдыха подход не отмечается */
/* «+ Подход» / «− Подход» — текстовые кнопки, значок «+»/«−» вместо стрелки */
.wx-actions{display:flex;justify-content:center;gap:24px;margin-top:8px}
.wx-actions button{min-height:44px;font-size:15px;font-weight:600;color:var(--volt)}

/* внизу экрана: «Далее» и главная кнопка — прилипают к низу, длинная таблица прокручивается под ними */
.wo-foot{grid-area:foot;position:sticky;bottom:0;z-index:3;display:grid;gap:16px;margin-top:20px;padding:14px 0 calc(24px + var(--safe-bottom));background:linear-gradient(to bottom,rgba(0,0,0,0),var(--bg) 24px)}
.wo-next-slot:empty{display:none}
.wo-act .btn svg{width:18px;height:18px}
.wo-rest-btns{display:grid;grid-template-columns:64px 64px minmax(0,1fr);gap:8px}
.wo-rest-btns button{height:56px;border-radius:980px;background:var(--elev-2);color:var(--text);font-size:15px;font-weight:700;text-align:center}
.wo-rest-btns .btn{min-height:56px;padding:0 16px;background:var(--lime);color:var(--on-lime);font-size:17px}
/* «Далее» — следующее упражнение; нажатие открывает его */
.wo-next{display:grid;grid-template-columns:minmax(0,1fr) 16px;column-gap:12px;align-items:center;width:100%;padding:14px 16px;border-radius:var(--radius-m);background:var(--elev);text-align:start}
.wo-next .eyebrow{margin:0}
.wo-next b{margin-top:3px;font-size:16px;font-weight:700;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wo-next small{margin-top:2px;font-size:14px;color:var(--muted-2)}
.wo-next > :not(.chev){grid-column:1;min-width:0}
.wo-next .chev{grid-column:2;grid-row:1 / span 3}
/* идёт секундомер: прозрачный слой под шапкой — касание в любом месте останавливает его; «Далее» и «Сбросить» — над слоем */
.wo-tap{position:absolute;left:0;right:0;top:calc(67px + var(--safe-top));bottom:0;z-index:2;background:transparent;cursor:pointer}
.wo-tap[hidden]{display:none}
/* невысокий экран (и Telegram с его шапкой): кольцо меньше, «Далее» прячется — следующее упражнение видно по кольцам сверху;
   так поля подхода и главная кнопка помещаются без прокрутки */
@media (max-width:1023px) and (max-height:720px){
  .wo-ring{width:min(268px,72vw,31vh)}
  .wo-ring-mid b{font-size:min(96px,24vw,13vh)}
  .wo-ring[data-mode="rest"] .wo-ring-mid b{font-size:min(72px,18vw,10vh)}
  .wo-ring[data-mode="run"] .wo-ring-mid b{font-size:min(88px,22vw,12vh)}
  .wo-ring-mid span{font-size:14px}
  .wo-ring-mid b.ttl{margin-top:8px;font-size:16px}
  .wo-check{width:56px;height:56px}
  .wo-check svg{width:26px;height:26px}
  .wx-head{margin-top:12px}
  .wo-focus{margin-top:12px}
  .wo-next-slot{display:none}
}
@media (max-width:370px){
  .wx{padding-inline:12px}
  .wo-end{padding-inline:12px}
  .wo-rest-btns{grid-template-columns:56px 56px minmax(0,1fr)}
  .wo-fld .stp{grid-template-columns:36px minmax(0,1fr) 36px}
  .wo-fld .stp input{font-size:20px}
  .set-cols,.set{gap:6px}
}

.flash{position:fixed;inset:0;z-index:150;pointer-events:none;background:var(--lime);opacity:0}
.flash.go{animation:flash .7s ease-out}
@keyframes flash{0%{opacity:.5}100%{opacity:0}}

/* Компьютер: слева список упражнений с мини-кольцами, в центре кольцо и главная кнопка под ним, справа все подходы
   (у текущего — кнопки − и +), под ними «Далее» */
@media (min-width:1024px){
  .wo-head{padding:calc(var(--safe-top) + 10px) max(var(--gutter), calc((100% - 1080px) / 2 + var(--gutter))) 10px}
  .wo-head b{font-size:17px}
  .wo-step{display:none}
  .wo-date{display:inline}
  .wo-finish{min-height:40px;padding:0 18px;font-size:15px}
  .wx{max-width:1080px;grid-template-columns:280px 360px minmax(0,1fr);column-gap:40px;grid-template-areas:"nav head head" "nav ring side" "nav gap gap" "nav foot foot";grid-template-rows:auto auto 1fr auto;align-items:start;padding:28px var(--gutter) 0}
  .wo-nav{position:sticky;top:28px;align-self:start}
  .wo-nav-head{display:flex}
  .wo-steps{grid-auto-flow:row;grid-auto-columns:auto;justify-content:stretch;gap:4px;margin-top:10px}
  .wo-row{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:center;aspect-ratio:auto;min-height:64px;padding:0 12px;border-radius:14px;text-align:start}
  .wo-mini{width:44px;height:44px}
  .wo-mini > span{font-size:14px}
  .wo-row-txt{display:block;min-width:0}
  .wo-row-txt b{display:block;font-size:15px;font-weight:600;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .wo-row.on .wo-row-txt b{font-weight:700}
  .wo-row.done:not(.on) .wo-row-txt b{color:var(--muted-2)}
  .wo-row-txt small{display:block;margin-top:2px;font-size:13px;color:var(--muted)}
  .wo-row.on .wo-row-txt small{color:var(--muted-2)}
  @media (hover:hover){.wo-row:not(.on):hover{background:var(--elev)}}
  .wx-head{margin-top:0}
  .wx-head b{font-size:30px}
  .wx-head small{font-size:15px}
  .wo-ring{width:340px;margin-top:28px;align-self:start}
  .wo-ring circle{stroke-width:12}
  .wo-ring .rest-arc{stroke-width:3.2}
  .wo-ring-mid small{font-size:14px}
  .wo-ring-mid b{font-size:120px}
  .wo-ring[data-mode="rest"] .wo-ring-mid b{font-size:88px}
  .wo-ring[data-mode="run"] .wo-ring-mid b{font-size:108px}
  .wo-ring-mid span{font-size:18px}
  .wo-ring-mid b.ttl{margin-top:16px;font-size:20px}
  .wo-check{width:84px;height:84px}
  .wo-check svg{width:40px;height:40px}
  .wo-focus{display:none}
  .wx-sets{order:-1;margin-top:28px;padding-top:0;border-top:0}
  .set-cols,.set{grid-template-columns:28px minmax(0,1fr) minmax(0,1fr) 40px}
  .wx[data-type="bw"] .set-cols,.wx[data-type="bw"] .set,.wx[data-type="time"] .set-cols,.wx[data-type="time"] .set{grid-template-columns:28px minmax(0,1fr) 40px}
  .wx-sets .set.cur .stp{grid-template-columns:36px minmax(0,1fr) 36px;height:56px}
  .wx-sets .set.cur .stp button{display:block}
  .wx-sets .set.cur .stp input{font-size:20px}
  .set-ok{width:36px;height:36px}
  .set-ok svg{width:16px;height:16px}
  .wx-actions{justify-content:flex-start}
  .wx-note{text-align:start}
  .wo-hint{margin:16px 0 0;font-size:17px;font-weight:600;text-align:start}
  .wo-foot{grid-template-columns:360px minmax(0,1fr);column-gap:40px;align-items:end;padding:16px 0 32px}
  .wo-act{grid-column:1;grid-row:1}
  .wo-next-slot{grid-column:2;grid-row:1}
  .wo-end{max-width:1080px;padding-inline:calc(var(--gutter) + 320px) var(--gutter)}
  .wo-end .link{justify-self:start}
}

/* Шторки тренировки */
.menu-opts,.alt-list{display:grid;gap:8px;margin-top:16px}
/* .alt только внутри списка замен: класс слишком общий, чтобы стилизовать его глобально */
.menu-opt,.alt-list .alt{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;width:100%;padding:16px;border-radius:16px;background:var(--elev-2);font-size:16px;font-weight:600;text-align:start;transition:transform .3s var(--spring),background .2s}
.menu-opt:active,.alt-list .alt:active{transform:scale(.98);background:var(--elev-3)}
.menu-opt span,.alt-list .alt small{font-size:13px;color:var(--muted);font-weight:500}
.alt-list .alt b{display:block;font-weight:700}
.menu-opt.danger{color:var(--hot)}
.menu-opt.confirm{background:rgba(255,31,75,.16)}
.hist-sess{margin-top:10px}
.hist-sess > div{padding:12px 0;border-top:1px solid var(--line)}
.hist-sess > div:first-child{border-top:0}
.hist-sess .d{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:var(--muted)}
.hist-sess .d b{color:var(--text);font-weight:700}
@media (prefers-reduced-motion: reduce){.wo{transition:none}}

/* ═════════ Этап 2: прогрессия, секундомер, переносы, напоминания ═════════ */
/* Объяснение цели на экране тренировки */
/* подсказка к цели — строка с цветным значком, а не плашка внутри карточки упражнения; рамка остаётся только у предупреждений */
.wx-why{display:grid;grid-template-columns:20px 1fr;gap:8px;align-items:start;margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font-size:14px;line-height:1.4;color:var(--muted-2)}
.wx-why i{font-style:normal;font-weight:800;text-align:center;line-height:1.4}
.wx-why.k-up,.wx-why.k-sets,.wx-why.k-deload,.wx-why.k-ceiling{color:var(--text)}
.wx-why.k-up i,.wx-why.k-reps i,.wx-why.k-sets i{color:var(--volt)}
.wx-why.k-deload i{color:var(--ice)}
.wx-why.k-ceiling i{color:var(--fire)}
.wx-why.k-hold i,.wx-why.k-new i{color:var(--muted)}

/* Перенос */
.pill-moved{background:rgba(0,229,255,.14);color:var(--ice)}

/* Напоминания в профиле */
.switch{flex:none;position:relative;width:51px;height:31px;border-radius:16px;background:var(--elev-3);transition:background .25s}
.switch i{position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 3px 8px rgba(0,0,0,.3);transition:transform .35s var(--spring)}
/* включён — лаймовый с тёмным бегунком, как остальные выбранные элементы */
.switch[aria-checked="true"]{background:var(--lime)}
.switch[aria-checked="true"] i{transform:translateX(20px);background:var(--on-lime)}
/* всегда один ряд равных кнопок — на узком экране последняя не уезжает одна на новую строку */
.hours{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:6px;margin:-2px 0 12px}
.hours button{text-align:center;min-height:40px;border-radius:12px;background:var(--elev-2);font-size:14px;font-weight:700;color:var(--muted-2);font-variant-numeric:tabular-nums;transition:background .2s,color .2s}
.hours button[aria-checked="true"]{background:var(--lime);color:var(--on-lime)}

/* ═════════ Этап 3: вкладка «Прогресс» ═════════ */
#progressRoot{margin-top:16px}
.pcard{position:relative;background:var(--elev);border-radius:var(--radius-m);padding:16px}
.p-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:0 24px;align-items:start}
.p-sec{min-width:0}
#pMuscles .seg{display:grid;width:100%}
@media (min-width:1024px){
  .pcard{padding:20px}
  .p-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .p-wide{grid-column:1 / -1}
  #pMuscles .seg{width:300px}
}
.empty-in{color:var(--muted-2);font-size:14px;line-height:1.45;padding:6px 2px 4px}
.empty-in b{display:block;color:var(--text);font-size:16px;margin-bottom:4px}
.credit{text-align:start;margin-top:24px}
.credit a{color:var(--muted-2);text-decoration:underline}

/* Серия недель: строка «ещё N тренировок — и начнётся серия», отрезки этой недели, лучшая серия и ссылка к тренировке дня */
.streak{display:grid;gap:14px;padding:20px;border-radius:var(--radius-m);background:var(--elev)}
.streak-main .eyebrow{margin:0}
.streak-line{margin:6px 0 0;font-size:18px;font-weight:700;line-height:1.3;text-wrap:pretty}
.streak-bars{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:6px}
.streak-bars i{height:8px;border-radius:4px;background:var(--elev-3)}
.streak-bars i.on{background:var(--lime)}
.streak-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:0 12px;font-size:14px;color:var(--muted-2)}
.streak-foot:empty{display:none}
/* длинное название тренировки переносится, а стрелка идёт сразу за текстом */
.streak-foot .link-arrow{display:inline;padding-block:10px;line-height:1.4}
.streak-foot .link-arrow::after{display:inline-block;margin-inline-start:6px} /* inline-block — чтобы стрелка разворачивалась справа налево */
@media (min-width:1024px){
  .streak{grid-template-columns:minmax(0,1fr) 260px 240px;align-items:center;gap:32px;padding:24px}
  .streak-line{font-size:20px}
  .streak-foot{display:grid;justify-items:end;text-align:end}
}

/* Показатели над графиком */
/* показатели — колонки с вертикальными линиями, без плиток внутри карточки */
.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:16px 0 6px}
.kpis-2{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:0}
.kpis div{padding:2px 12px;border-inline-start:1px solid var(--line)}
.kpis div:first-child{padding-inline-start:0;border-inline-start:0}
.kpis b{display:block;font-size:18px;font-weight:800;letter-spacing:-.03em;line-height:1.15}
.kpis span{display:block;font-size:12px;color:var(--muted);margin-top:3px;line-height:1.3}
@media (max-width:360px){.kpis div{padding-inline:7px}.kpis b{font-size:16px}.kpis span{font-size:12px}}
.chart-cap{font-size:13px;color:var(--muted);margin:10px 0 0}
.p-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin-top:14px}

/* Выбор упражнения */
.chips-row{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px 2px}
@media (min-width:1024px){.chips-row{flex-wrap:wrap;overflow:visible;margin:0;padding:0}} /* на компьютере все упражнения видны сразу */
.chips-row::-webkit-scrollbar{display:none}
.chip-btn{flex:none;min-height:36px;padding:0 14px;border-radius:980px;background:var(--elev-2);font-size:14px;font-weight:600;color:var(--muted-2);white-space:nowrap;transition:background .2s,color .2s}
.chip-btn[aria-checked="true"]{background:var(--lime);color:var(--on-lime)}
/* «Сила»: группы мышц — вкладки с подчёркиванием над упражнениями группы */
.grp-row{display:flex;gap:4px 18px;overflow-x:auto;scrollbar-width:none;margin:0 -16px 12px;padding:0 16px;border-bottom:1px solid var(--line)}
.grp-row::-webkit-scrollbar{display:none}
.grp-btn{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-bottom:-1px;font-size:15px;font-weight:600;color:var(--muted);white-space:nowrap;border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
.grp-btn span{font-size:12px;font-weight:700;color:var(--muted)}
.grp-btn[aria-selected="true"]{color:var(--text);border-bottom-color:var(--lime)}
@media (min-width:1024px){.grp-row{flex-wrap:wrap;overflow:visible;margin:0 0 14px;padding:0}}

/* Линейный график: тонкие штрихи, тихая сетка */
.chart-host{margin-top:8px}
.chart{position:relative;outline-offset:4px}
.chart svg{display:block;max-width:100%;touch-action:pan-y;cursor:crosshair}
.chart .grid{stroke:var(--line);stroke-width:1}
.chart .tick{fill:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
.chart .ln{fill:none;stroke:var(--volt);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.chart .area{fill:var(--volt);opacity:.1}
.chart .dot{fill:var(--volt);stroke:var(--elev);stroke-width:2}
.chart .dot.pr{fill:var(--elev);stroke:var(--volt);stroke-width:2}
.chart .dot.hover{fill:var(--text);stroke:var(--elev)}
.chart .end-t{fill:var(--text);font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;paint-order:stroke;stroke:var(--elev);stroke-width:4px;stroke-linejoin:round}
.chart .goal{stroke:var(--ice);stroke-width:1}
.chart .goal-t{fill:var(--muted-2);font-size:12px;font-weight:600;paint-order:stroke;stroke:var(--elev);stroke-width:4px;stroke-linejoin:round}
.chart .xhair{stroke:var(--muted);stroke-width:1}
.tip{position:absolute;z-index:3;pointer-events:none;display:grid;gap:2px;padding:8px 11px;border-radius:10px;background:#fff;color:#000;box-shadow:0 8px 24px rgba(0,0,0,.5);white-space:nowrap}
.tip b{font-size:13px;font-weight:800;font-variant-numeric:tabular-nums}
.tip span{font-size:12px;color:#55555c}

/* Таблица-дубль для любого графика */
.tbl{margin-top:4px}
/* «Таблицей →» — текстовая кнопка, как все: лаймовая со стрелкой; открытая — стрелка вниз */
.tbl summary{cursor:pointer;display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:15px;font-weight:600;color:var(--volt);list-style:none}
.tbl summary::-webkit-details-marker{display:none}
.tbl summary::after{content:"→";transition:transform .25s}
.tbl[open] summary::after{transform:rotate(90deg)}
[dir="rtl"] .tbl summary::after{content:"←"}
[dir="rtl"] .tbl[open] summary::after{transform:rotate(-90deg)}
.tbl-wrap{margin-top:10px;max-height:260px;overflow:auto;border-top:1px solid var(--line)}
.tbl table{min-width:0}
.tbl th,.tbl td{padding:9px 4px;font-size:13px;font-variant-numeric:tabular-nums}
.tbl thead th{position:sticky;top:0;background:var(--elev);color:var(--muted-2)}

/* Карта мышц */
.body-map{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.body-fig{margin:0;display:grid;gap:6px;justify-items:center}
.body-fig svg{width:100%;max-width:220px;height:auto;touch-action:pan-y}
.body-fig path{transition:fill .5s var(--ease)}
.body-fig path[data-m]{cursor:pointer}
.body-fig figcaption{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.m-legend{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:14px;font-size:12px;color:var(--muted-2)}
.m-legend span{display:inline-flex;align-items:center;gap:6px}
.m-legend i{width:12px;height:12px;border-radius:3px;display:inline-block}
.mlist{margin:12px 0 0;font-size:14px;color:var(--muted-2);line-height:1.45}
.mlist b{color:var(--text);font-weight:700}
.st{margin-inline-end:6px}
.st-f{color:#ff1f4b}.st-r{color:#a01935}

/* Карта активности */
.heat-scroll{overflow-x:auto;margin:14px -16px 0;padding:0 16px;scrollbar-width:thin}
.heat{position:relative;width:max-content}
.heat svg{display:block}
.heat .tick{fill:var(--muted);font-size:12px}

/* Ввод веса */
.big-stepper{display:grid;grid-template-columns:64px minmax(0,1fr) 64px;align-items:center;gap:12px;margin:20px 0 0}
.bs-val{display:flex;justify-content:center;align-items:baseline;gap:2px;min-width:0}
.bs-goal{margin:12px 0 0;font-size:14px;color:var(--muted-2);text-align:center}
.big-stepper button{text-align:center;height:64px;border-radius:16px;background:var(--elev-2);font-size:28px;font-weight:500;color:var(--text)}
.big-stepper button:active{transform:scale(.94)}
.big-stepper input{width:4.2ch;min-width:2ch;max-width:100%;border:0;background:transparent;color:var(--text);font:inherit;font-size:48px;font-weight:800;line-height:1;letter-spacing:-.03em;text-align:center;padding:0;font-variant-numeric:tabular-nums}
.big-stepper input:focus{outline:none}
.big-stepper span{font-size:18px;color:var(--muted-2);font-weight:600}

/* ═════════ Этап 4: правки тренера ═════════ */
.wx-coach{margin-top:8px;font-size:13px;line-height:1.4;color:var(--muted-2)}
.wx-coach b{display:inline;font-size:inherit;font-weight:700;color:var(--ice)}
.coach-tag{display:block;margin-top:2px;color:var(--ice)!important}
.coach-mark{font-style:normal;font-size:12px;font-weight:700;padding:2px 7px;border-radius:980px;background:rgba(0,229,255,.12);color:var(--ice);vertical-align:1px;margin-inline-start:4px}

/* Видео техники, предупреждения о весах, возраст в тесте */
.wx-video{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--elev-2);color:var(--text)}
.wx-video svg{width:14px;height:14px}
.wx-video:active,.wx-more:active{transform:scale(.92)}
.ex-video{cursor:pointer;border-radius:0;text-align:start;color:inherit}
.ex-video:active .thumb{transform:scale(.9)}
.ex-video .thumb{width:36px;height:36px;border-radius:50%;background:var(--elev-2)} /* видео — круглая кнопка: это элемент управления, а не плитка */
.ex-video .thumb svg{width:12px;height:12px}
.vid{position:relative;margin-top:14px;border-radius:var(--radius-m);overflow:hidden;background:#000;aspect-ratio:16/9}
.vid video,.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.vid-soon{display:grid;place-content:center;justify-items:center;gap:6px;padding:18px;text-align:center;background:radial-gradient(120% 120% at 50% 0%,var(--elev-3),var(--elev-2) 60%,var(--elev))}
.vid-soon span{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;margin-bottom:4px;background:rgba(212,255,0,.12);color:var(--volt)}
.vid-soon span svg{width:16px;height:16px}
.vid-soon b{font-size:17px}
.vid-soon small{max-width:30ch;font-size:14px;line-height:1.4;color:var(--muted-2)}
.vid-open{display:flex;justify-content:center;align-items:center;gap:6px;min-height:44px;margin-top:8px;font-size:15px;font-weight:600;color:var(--volt);text-decoration:none}
.vid-open::after{content:"→"}
[dir="rtl"] .vid-open::after{content:"←"}
.wx-warn{display:grid;grid-template-columns:20px 1fr;gap:8px;align-items:start;margin-top:8px;padding:8px 10px;border-radius:12px;font-size:13px;line-height:1.35;color:var(--text);background:rgba(255,106,0,.14)}
.wx-warn i{font-style:normal;font-weight:800;text-align:center;line-height:1.35;color:var(--fire)}
.wx-warn.k-info{background:rgba(0,229,255,.1)}.wx-warn.k-info i{color:var(--ice)}
.wx-warn.k-alert{background:rgba(255,31,75,.16)}.wx-warn.k-alert i{color:var(--hot)}
.wo-notes{display:grid;gap:8px;margin-top:10px}
.adapt{display:grid;gap:6px;margin:0 0 14px;padding:0;list-style:none;font-size:14px;line-height:1.4;color:var(--muted-2)}
.adapt li{position:relative;padding-inline-start:16px}
.adapt li::before{content:"";position:absolute;inset-inline-start:0;top:.5em;width:6px;height:6px;border-radius:50%;background:var(--volt)}
.quiz-nudge{display:flex;gap:14px;align-items:center;justify-content:space-between;padding:14px 0;font-size:14px;line-height:1.4;color:var(--muted-2);text-align:start}
.quiz-nudge b{display:block;color:var(--text);font-size:16px;margin-bottom:2px}
.quiz-nudge .link-arrow{flex:none}

/* ═════════ Вариант A: гостевые страницы ═════════
   Главная: первый экран с фактами вместо счётчиков, шаги одной карточкой, «Для кого», «Внутри платформы», неделя,
   белые «Тренер» и «Результаты», цены строками (на компьютере — тремя карточками), вопросы. Без лент, свечений и автопрокрутки */
.page-lead{margin:8px 0 0;font-size:15px;line-height:1.45;color:var(--muted-2);max-width:60ch}
@media (min-width:1024px){.page-lead{font-size:16px}}

/* первый экран: на телефоне всё по левому краю, главная кнопка во всю ширину, под ней текстовая */
.hero .cta-row{flex-direction:column;align-items:stretch;gap:4px;margin-top:20px}
.hero .cta-row .link-arrow{justify-content:center}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:16px}
.facts > div{min-width:0;padding:0 12px;border-inline-start:1px solid var(--line)}
.facts > div:first-child{padding-inline-start:0;border-inline-start:0}
/* в длинных языках («Gimnasio / casa», «a partir de 400») значение переносится внутри своей колонки; звезда не отрывается от цены (неразрывный пробел в разметке) */
.facts b{display:block;font-size:clamp(15px,4.5vw,17px);font-weight:800;line-height:1.2;text-wrap:balance;overflow-wrap:break-word}
.facts span{display:block;margin-top:2px;font-size:12px;line-height:1.3;color:var(--muted)}
@media (min-width:820px){
  .hero .cta-row{flex-direction:row;align-items:center;gap:24px;margin-top:28px}
  .facts{width:min(100%,480px);margin-top:40px}
  .facts > div{padding:0 16px;border-color:rgba(255,255,255,.12)}
  .facts b{font-size:20px}
  .facts span{font-size:13px}
}

/* шаги — одна карточка: строки на телефоне, три колонки с линиями на компьютере */
.steps{margin-top:16px;padding:0 16px;border-radius:var(--radius-m);background:var(--elev)}
.step{display:grid;grid-template-columns:36px minmax(0,1fr);gap:14px;align-items:start;padding:16px 0}
.step + .step{border-top:1px solid var(--line)}
.step .n{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--elev-2);color:var(--text);font-size:16px;font-weight:800;letter-spacing:0;line-height:1}
.step b{display:block;font-size:16px;font-weight:700;letter-spacing:-.01em}
.step p{margin:2px 0 0;font-size:14px;line-height:1.45;color:var(--muted-2)}
@media (min-width:820px){
  .steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:24px;padding:28px 0}
  .step{display:block;padding:0 28px}
  .step + .step{border-top:0;border-inline-start:1px solid var(--line)}
  .step .n{width:40px;height:40px;font-size:17px}
  .step b{margin-top:16px;font-size:18px}
  .step p{margin-top:4px;font-size:15px;line-height:1.5}
}

/* «Для кого»: фото от края до края на телефоне, на компьютере — в рамке; цели строками */
.aud-hero{position:relative;margin-inline:calc(var(--gutter) * -1)}
.aud-hero .seg button{min-height:40px}
.aud-body{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"text" "goals" "cta";margin-top:20px}
.aud-text{grid-area:text}
.aud-text h3{margin:0;font-family:var(--font-head);font-size:26px;line-height:1.15;font-weight:600;letter-spacing:0;text-wrap:balance}
html:is([lang="ar"],[lang="fa"],[lang="hi"]) .aud-text h3{line-height:1.45;font-weight:700}
.aud-text p{margin:10px 0 0;font-size:16px;line-height:1.5;color:var(--muted-2)}
/* цели — строки с линиями, а не карточки внутри карточки */
.goals{grid-area:goals;margin-top:12px}
.goals .goal{display:flex;align-items:center;gap:12px;min-height:52px;border-top:1px solid var(--line)}
.goals .goal i{flex:none;display:block;width:22px;height:22px;border-radius:50%;border:4px solid var(--c)}
.goals .goal b{font-size:16px;font-weight:600;line-height:1.25}
.aud-cta{grid-area:cta;margin-top:16px}
.aud-cta .btn{width:100%}
@media (min-width:820px){
  /* компьютер: фото во всю ширину окна, края по бокам растворяются в чёрном фоне (сверху и снизу — узкой полосой) */
  .aud-hero{margin-inline:calc(50% - 50vw)}
  .aud-photo{aspect-ratio:1915/821;max-height:680px;object-position:50% 12%; /* на широком экране кадр обрезается снизу, головы остаются в кадре */
    -webkit-mask-image:linear-gradient(to right,transparent,#000 14%,#000 86%,transparent),linear-gradient(to bottom,transparent,#000 6%,#000 94%,transparent);-webkit-mask-composite:source-in;
    mask-image:linear-gradient(to right,transparent,#000 14%,#000 86%,transparent),linear-gradient(to bottom,transparent,#000 6%,#000 94%,transparent);mask-composite:intersect}
  .aud-hero .seg-row{bottom:20px}
  .aud-hero .seg button{min-height:44px;padding:0 24px;font-size:15px}
  .aud-body{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"text goals" "cta goals";grid-template-rows:auto 1fr;column-gap:40px;margin-top:32px}
  .aud-text h3{font-size:34px}
  .aud-text p{font-size:17px}
  .goals{margin-top:0}
  .goals .goal{min-height:56px;gap:14px}
  .goals .goal i{width:24px;height:24px}
  .goals .goal b{font-size:17px}
  .aud-cta{margin-top:24px}
  .aud-cta .btn{width:auto}
}
@media (min-width:1024px){.aud-body{grid-template-columns:minmax(0,1fr) 440px;column-gap:56px}}

/* «Внутри платформы»: пример экрана тренировки и строки о том, что ещё есть */
.inside{display:grid;gap:8px;margin-top:16px}
.demo{padding:16px;border-radius:var(--radius-m);background:var(--elev)}
.demo-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.demo-head b{font-size:17px;font-weight:700}
.demo-head span{font-size:14px;color:var(--muted);white-space:nowrap}
.demo-set{display:grid;grid-template-columns:20px minmax(0,1fr) minmax(0,1fr) 48px;gap:8px;align-items:center;margin-top:8px}
.demo-head + .demo-set{margin-top:14px}
.demo-set > span{height:48px;border-radius:12px;display:grid;grid-auto-flow:column;justify-content:center;align-items:baseline;align-content:center;gap:4px;background:var(--elev-2);font-size:18px;font-weight:800}
.demo-set > span:first-child{height:auto;background:none;font-size:14px;color:var(--muted)}
.demo-set small{font-size:13px;font-weight:600;color:var(--muted-2)}
.demo-set.done > span{background:rgba(212,255,0,.08)}
.demo-set.done > span:first-child{background:none;color:var(--volt)}
.demo-set > .demo-ok{align-items:center;color:var(--muted)}
.demo-set.done > .demo-ok{background:var(--lime);color:var(--on-lime)}
.demo-ok svg{width:18px;height:18px}
.demo-rest{display:flex;justify-content:space-between;align-items:center;margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-size:14px;color:var(--muted-2)}
.demo-rest b{font-size:20px;font-weight:800;color:var(--text)}
.inside-list > div{padding:16px 0}
.inside-list > div + div{border-top:1px solid var(--line)}
.inside-list b{display:block;font-size:16px;font-weight:700}
.inside-list p{margin:2px 0 0;font-size:14px;line-height:1.45;color:var(--muted-2)}
@media (min-width:820px){
  .inside{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px;align-items:start;margin-top:24px}
  .inside-list > div:first-child{padding-top:0}
  .demo{padding:20px}
  .inside-list > div{padding:20px 0}
  .inside-list b{font-size:18px}
  .inside-list p{margin-top:4px;font-size:15px;line-height:1.5}
}
@media (min-width:1024px){.inside{grid-template-columns:480px minmax(0,1fr);gap:56px}}

/* «Ваша неделя»: тренировки строками; на компьютере текст слева, строки справа */
.week-prev{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"text" "rows" "link"}
.wp-text{grid-area:text}
.wp-text .lead{display:none}
.wk-rows{grid-area:rows;margin-top:16px}
.wk-rows > div{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:52px;padding:8px 0;font-size:16px}
.wk-rows > div + div{border-top:1px solid var(--line)}
.wk-rows b{font-weight:600}
.wk-rows span{font-size:14px;color:var(--muted);white-space:nowrap}
.wp-link{grid-area:link;margin-top:8px;text-align:center}
@media (min-width:820px){
  .week-prev{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);grid-template-areas:"text rows" "link rows";column-gap:40px}
  .wp-text{align-self:end}
  .wp-text .lead{display:block}
  .wk-rows{margin:0;align-self:center}
  .wk-rows > div{min-height:60px;font-size:17px}
  .wk-rows span{font-size:15px}
  .wp-link{align-self:start;text-align:start}
}
@media (min-width:1024px){.week-prev{grid-template-columns:minmax(0,1fr) 560px;column-gap:56px}}

/* «Тренер» (белый раздел): подпись и имя, фото, история, два факта и цитата без плашки */
.coach{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "photo" "story"}
.coach-head{grid-area:head}
.coach-head .h2{margin:0}
.coach .portrait{grid-area:photo;margin:16px 0 0;aspect-ratio:350/420;border-radius:var(--radius-m);background:var(--elev)}
.coach .portrait img{object-position:50% 15%}
.coach .story{grid-area:story;margin-top:16px}
.coach .story p{max-width:60ch;margin:0 0 12px;font-size:16px;line-height:1.5;color:var(--muted-2)}
.coach .nums{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:20px}
.coach .nums div{padding:0 16px;border-inline-start:1px solid var(--line)}
.coach .nums div:first-child{padding-inline-start:0;border-inline-start:0}
.coach .nums b{display:block;font-size:22px;font-weight:800;line-height:1;letter-spacing:-.02em;color:var(--text)}
.coach .nums span{display:block;margin-top:2px;font-size:13px;line-height:1.3;color:var(--muted)}
.coach .quote{margin:20px 0 0;font-size:18px;line-height:1.4;font-weight:600;letter-spacing:-.01em;color:var(--text)}
@media (min-width:820px){
  .coach{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-areas:"photo head" "photo story";align-items:center;column-gap:40px;row-gap:16px}
  .coach .portrait{margin:0;aspect-ratio:440/540}
  .coach-head{align-self:end}
  .coach-head .h2{font-size:40px;line-height:1.1}
  .coach .story{align-self:start;margin:0}
  .coach .story p{font-size:17px;line-height:1.55}
  .coach .nums{grid-template-columns:repeat(2,minmax(0,200px));margin-top:28px}
  .coach .nums b{font-size:28px}
  .coach .nums span{font-size:14px}
  .coach .quote{margin-top:28px;font-size:22px}
}
@media (min-width:1024px){.coach{grid-template-columns:440px minmax(0,1fr);column-gap:56px}}

/* «Результаты»: одна карточка на человека — цифра, тонкий график и отзыв; на главной листаются вбок */
.tf{scroll-snap-align:start;padding:20px;border-radius:var(--radius-m);background:var(--elev)}
.tf-top{display:flex;align-items:center;gap:12px}
.tf .avatar{width:40px;height:40px;background:var(--elev-3);color:var(--text);font-size:14px}
.light .tf .avatar{background:#fff;color:#0a0a0b}
.tf-top b{display:block;font-size:16px;font-weight:700}
.tf-top span{font-size:13px;color:var(--muted)}
.tf-res{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-top:16px;font-weight:400;letter-spacing:0;line-height:1.2}
.tf-res b{font-size:32px;font-weight:800;line-height:1;letter-spacing:-.02em;color:var(--text)}
.tf-res span{font-size:14px;color:var(--muted-2)}
.tf .spark{display:block;width:100%;height:auto;margin-top:12px}
.tf .spark .ln{stroke:var(--volt);stroke-width:2}
.tf .spark .dot{fill:var(--volt)}
.tf .ba{margin-top:12px}
.tf q{display:block;margin-top:12px;quotes:none;font-size:15px;line-height:1.5;color:var(--muted-2)}
#tfDots{gap:6px;margin-top:16px}
#tfDots button{width:6px;height:6px;border-radius:3px;background:#c7c7cc}
#tfDots button[aria-current="true"]{width:20px;background:var(--text)}
#results .link-arrow{display:flex;justify-content:center;margin-top:8px}
.tf-grid{display:grid;gap:12px;margin-top:16px;grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.tf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:820px){
  .tf-row{grid-auto-columns:330px;gap:25px;margin-top:24px}
  .tf{padding:24px}
  #results .link-arrow{display:inline-flex;margin-top:16px}
  #tfDots{display:none}
}
@media (min-width:1024px){.tf-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:24px}.tf-res b{font-size:34px}}
/* лента листается слева направо и в арабском (как раньше лента отзывов) — точки идут в том же порядке */
[dir="rtl"] .tf-row,[dir="rtl"] #tfDots{direction:ltr}
[dir="rtl"] .tf-row .tf{direction:rtl}

/* «Цены» на главной: строки одной карточкой; на компьютере — три карточки, рекомендованная в лаймовой рамке */
.pp{margin-top:16px;padding:0 16px;border-radius:var(--radius-m);background:var(--elev)}
.pp-row{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name price" "sub price";gap:12px;align-items:center;width:100%;min-height:68px;padding:12px 0;text-align:start;transition:transform .3s var(--spring),background .2s}
.pp-row + .pp-row{border-top:1px solid var(--line)}
.pp-row:active{transform:none;opacity:.7}
.pp-row .plan-name{grid-area:name;font-size:16px}
.pp-row .plan-price{grid-area:price}
.pp-row .plan-price b{font-size:18px}
.pp-row .plan-sub{grid-area:sub}
.pp-foot{display:grid;gap:10px;margin-top:16px}
.pp-foot .btn{width:100%}
.pp-note{font-size:13px;color:var(--muted);text-align:center}
@media (min-width:820px){
  .pp{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:24px;padding:0;background:none}
  .pp-row{grid-template-columns:minmax(0,1fr);grid-template-areas:"name" "price" "sub";align-content:start;padding:24px;border-radius:var(--radius-m);background:var(--elev);transition:box-shadow .2s,transform .3s var(--spring)}
  .pp-row + .pp-row{border-top:0}
  .pp-row:active{transform:scale(.97);opacity:1}
  .pp-row.hit{box-shadow:inset 0 0 0 2px var(--lime)}
  .pp-row .plan-name{font-size:18px}
  .pp-row .plan-price{display:flex;align-items:baseline;gap:6px;margin-top:16px;text-align:start}
  .pp-row .plan-price b{font-size:36px}
  .pp-row .plan-sub{margin-top:10px;font-size:14px;color:var(--muted-2)}
  .pp-foot{display:flex;align-items:center;gap:24px;margin-top:24px}
  .pp-foot .btn{width:auto}
  .pp-note{font-size:14px;text-align:start}
}

/* «Коротко о главном»: на компьютере заголовок и ссылка слева, вопросы справа */
.faq-prev{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "list" "link"}
.faq-prev .h2{grid-area:head;margin:0 0 8px}
.faq-prev .faq{grid-area:list;margin:0;max-width:none}
.fp-link{grid-area:link;margin-top:8px;text-align:center}
@media (min-width:820px){
  .faq-prev{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);grid-template-areas:"head list" "link list";grid-template-rows:auto 1fr;column-gap:40px}
  .faq-prev .h2{margin:0}
  .fp-link{align-self:start;margin-top:8px;text-align:start}
}
@media (min-width:1024px){.faq-prev{grid-template-columns:360px minmax(0,1fr);column-gap:56px}}

/* подвал: поддержка, соцсети Максима, документы; на компьютере документы — справа */
.foot-contact{font-size:13px;color:var(--muted)}
.foot-contact .link-arrow{min-height:0;font-size:13px}
@media (min-width:820px){
  .foot{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"contact links" "socials links" "copy copy";column-gap:40px}
  .foot > :first-child{grid-area:contact}
  .foot .socials{grid-area:socials}
  .foot-links{grid-area:links;display:grid;grid-template-columns:repeat(2,auto);gap:10px 40px;align-content:start}
  .foot > :last-child{grid-area:copy}
  footer{font-size:14px}
}

/* «Программа» гостя: переключатели одной карточкой с подписями, день без карточки, справа неделя и что даёт подписка.
   Подпись сжимается в две строки раньше, чем переключатель уходит на свою строку (длинные языки на узком телефоне) */
.plan-controls{margin-top:16px;padding:0 16px;border-radius:var(--radius-m);background:var(--elev)}
.pc-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 12px;min-height:56px;padding:8px 0}
.pc-row + .pc-row{border-top:1px solid var(--line)}
.pc-row .seg-cap{flex:1 1 0;min-width:min-content;font-size:15px;line-height:1.3;color:var(--muted-2)}
.pc-row .seg{flex:none;background:var(--elev-3)}
.pc-row .seg button{min-height:32px;padding:0 14px}
.pc-row.seg-days .seg button{padding:0 12px}
.day-detail{margin-top:24px}
.ex-list .ex-check{grid-template-columns:24px minmax(0,1fr) auto;gap:12px;min-height:52px}
.ex-check .thumb{width:24px;height:24px;border-radius:50%;border:2px solid #5a5a63;background:transparent}
.ex-check[aria-checked="true"] .thumb{background:var(--lime);border-color:var(--lime)}
.ex-check small{display:none}
.dd-reset{margin-inline-start:6px;font-size:14px;font-weight:600;color:var(--volt)}
.sub-teaser{margin-top:16px;padding:20px}
.sub-teaser p{margin:0 0 16px;font-size:15px;line-height:1.5;color:var(--muted-2)}
@media (min-width:1024px){
  .plan-controls{display:flex;flex-wrap:wrap;padding:14px 0;margin-top:20px}
  .pc-row{flex-wrap:nowrap;min-height:0;gap:14px;padding:0 24px}
  .pc-row + .pc-row{border-top:0;border-inline-start:1px solid var(--line)}
  .pc-row .seg-cap{flex:none}
  .prog-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:40px;align-items:start;margin-top:24px}
  .prog-grid .days{margin-top:0}
  .prog-grid .day-detail{margin-top:20px}
}

/* «Цены»: заголовок экрана, статус подписки строкой; на компьютере слева тарифы и кнопка оплаты под ними, справа что входит и гарантия */
.sub-line{display:flex;align-items:flex-start;gap:10px;margin:16px 0 0;font-size:14px;line-height:1.45;color:var(--muted-2)}
.sub-line i{flex:none;width:8px;height:8px;margin-top:6px;border-radius:50%;background:var(--ok)}
.price-grid{display:grid;gap:20px;margin-top:16px}
.price-side{display:grid;gap:20px}
.guarantee{padding:20px;border-radius:var(--radius-m);background:var(--elev)}
.g-head{display:flex;align-items:center;gap:12px}
.g-head .eyebrow{margin:0 0 2px}
.g-head .h3{font-size:20px}
.guarantee > p{margin:10px 0 0;font-size:14px;line-height:1.5;color:var(--muted-2)}
.guarantee .g-list{margin-top:8px}
.guarantee .link-arrow{margin-top:4px}
body:has(.resume-pill:not([hidden])) .buy-bar{bottom:calc(var(--tabbar-h) + var(--safe-bottom) + 72px)}
@media (min-width:1024px){
  .price-grid{grid-template-columns:minmax(0,1fr) 400px;gap:40px;align-items:start;margin-top:24px}
  .price-side{gap:16px}
  .included{padding:20px 24px;border-radius:var(--radius-m);background:var(--elev)}
  .included ul{grid-template-columns:1fr}
  .price-main .plan{padding:20px 24px}
  .price-main .plan-name{font-size:18px}
  .price-main .plan-price b{font-size:24px}
  .buy-bar,body:has(.resume-pill:not([hidden])) .buy-bar{position:static;margin-top:20px;padding:0;animation:none;pointer-events:auto}
  .buy-bar .btn{max-width:none;box-shadow:none}
  body.buy-on:not(.on-home) main{padding-bottom:calc(24px + var(--tabbar-h) + var(--safe-bottom))}
}

/* «Отзывы»: заголовок экрана, карточки результатов и одна кнопка теста */
.rev-foot{display:grid;gap:10px;margin-top:20px}
.rev-foot span{order:-1;font-size:15px;line-height:1.45;color:var(--muted-2)} /* на телефоне сначала пояснение, под ним кнопка */
@media (min-width:1024px){.rev-foot{display:flex;align-items:center;gap:24px;margin-top:32px}.rev-foot span{order:0}}

/* ═════════ Гайд по приложению ═════════
   Затемнение с «окошком» вокруг кнопки (тень «окошка» и есть затемнение), пузырь со стрелкой, «Пропустить · точки · Далее →».
   Слой гайда — над всем, включая экран тренировки и шторки; клики под ним не проходят */
.tour{position:fixed;inset:0;z-index:300}
.tour-hole{position:fixed;box-shadow:0 0 0 2px var(--lime),0 0 0 200vmax rgba(0,0,0,.74);pointer-events:none;transition:left .35s var(--ease),top .35s var(--ease),width .35s var(--ease),height .35s var(--ease),border-radius .35s var(--ease)}
.tour-pop{position:fixed;box-sizing:border-box;width:min(320px,calc(100vw - 32px));padding:16px 16px 10px;border-radius:20px;background:var(--elev-2);color:var(--text);box-shadow:0 0 0 1px var(--line),0 20px 50px rgba(0,0,0,.6)}
.tour-pop.in{animation:tour-in .3s var(--ease) both}
.tour-pop:focus{outline:none}
@keyframes tour-in{from{opacity:0;transform:translateY(6px)}}
.tour-caret{position:absolute;bottom:-7px;width:14px;height:14px;background:var(--elev-2);transform:rotate(45deg)}
.tour-caret.up{top:-7px;bottom:auto}
.tour-pop b{position:relative;display:block;font-size:17px;font-weight:700;line-height:1.3}
.tour-pop p{position:relative;margin:4px 0 0;font-size:14px;line-height:1.45;color:var(--muted-2)}
.tour-foot{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;margin-top:8px}
.tour-right{justify-self:end}
.tour-skip{min-height:40px;font-size:14px;font-weight:600;color:var(--muted)}
.tour-dots{display:flex;gap:5px}
.tour-dots i{display:block;width:6px;height:6px;border-radius:3px;background:var(--elev-3)}
.tour-dots i.on{width:18px;background:var(--lime)}
.tour-next{min-height:40px}
.tour-done{min-height:40px;padding:0 20px;font-size:15px}
.tour-extra{position:relative;margin-top:12px}
.tour-langs{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.tour-langs button{min-height:40px;padding:8px 12px;border-radius:12px;background:var(--elev-3);font-size:14px;font-weight:600;line-height:1.2;color:var(--text);text-align:start;transition:background .2s,box-shadow .2s,color .2s}
.tour-langs button[aria-pressed="true"]{box-shadow:inset 0 0 0 1.5px var(--lime);color:var(--lime)}
@media (hover:hover){.tour-langs button:hover{filter:brightness(1.2)}}
@media (min-width:1024px){.tour-pop{width:340px}}
@media (prefers-reduced-motion: reduce){.tour-hole{transition:none}}

/* ═════════ Языки: шрифты, письмо справа налево ═════════ */
/* Арабский, персидский, хинди: в Manrope и Oswald этих букв нет — подключаются шрифты своего письма (в index.html), остальное остаётся на Manrope. */
html[lang="ar"]{--font:"Noto Sans Arabic","Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Tahoma,Arial,sans-serif;--font-head:"Noto Sans Arabic","Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Tahoma,sans-serif}
html[lang="fa"]{--font:"Vazirmatn","Noto Sans Arabic","Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Tahoma,Arial,sans-serif;--font-head:"Vazirmatn","Noto Sans Arabic","Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Tahoma,sans-serif}
html[lang="hi"]{--font:"Noto Sans Devanagari","Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Nirmala UI,Arial,sans-serif;--font-head:"Noto Sans Devanagari","Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Nirmala UI,sans-serif}
/* ═════════ Питание ═════════
   Перед опросом — данные из теста строками и «Рассчитать норму»; норма — калории крупно, БЖУ и вода строками с цветной точкой.
   Цвета как на макетах: белки — малиновый, жиры — оранжевый, углеводы — фиолетовый, вода — голубой. */
.n-page{max-width:560px}
.n-title{font-family:var(--font-head);font-size:24px;line-height:1.2;font-weight:600;letter-spacing:0;margin:18px 0 0}
.n-eyebrow{margin:20px 0 8px}
.n-rows div{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:48px;font-size:15px}
.n-rows div + div{border-top:1px solid var(--line)}
.n-rows span{display:flex;align-items:center;color:var(--muted-2)}
.n-rows b{font-weight:600;text-align:end}
.n-rows .n-none{color:var(--muted)}
.sheet .n-rows{background:var(--elev-2)}
.n-page .link-arrow{margin-top:4px}
.n-page .btn-block{margin-top:12px}
.n-kcal{font-family:var(--font-head);font-size:44px;line-height:1.05;font-weight:600;letter-spacing:0;margin:16px 0 16px}
.sheet h3.n-kcal{font-size:44px;margin:8px 0 16px}
.n-kcal span{font-family:var(--font);font-size:17px;font-weight:600;letter-spacing:-.01em;color:var(--muted-2)}
.n-dot{flex:none;width:10px;height:10px;border-radius:50%;margin-inline-end:10px}
.n-dot.p{background:var(--hot)}
.n-dot.f{background:var(--fire)}
.n-dot.c{background:#a259ff}
.n-dot.w{background:var(--ice)}
.n-delta{margin:12px 0 0;font-size:14px;color:var(--muted-2);text-align:center}
.n-warn{display:inline-block;width:16px;height:16px;vertical-align:-3px;color:var(--warn)}
.n-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.n-chip{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px;border-radius:12px;background:var(--elev-2);font-size:14px;font-weight:600;white-space:nowrap;transition:background .2s,color .2s}
.n-chip svg{display:none;width:16px;height:16px}
.n-chip[aria-pressed="true"]{background:var(--lime);color:var(--on-lime);font-weight:700}
.n-chip[aria-pressed="true"] svg{display:block}
.sheet-head .n-spacer{flex:1}
/* темп быстрее 1% веса в неделю и «похудеть» при весе у нижней границы нормы — видны, но не выбираются */
.opt:disabled{cursor:default}
.opt:disabled:active{transform:none}
.opt:disabled b,.opt:disabled b + span{color:#5a5a63}
.opt:disabled .radio{border-color:var(--elev-3)}
.opt b .badge{display:inline-block;margin-inline-start:6px;vertical-align:2px}
.n-fields{margin-top:8px;background:var(--elev-2)}
.n-fields + .n-fields{margin-top:12px}
.n-field{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:56px}
.n-field + .n-field{border-top:1px solid var(--line)}
.n-field > span:first-child{font-size:15px;color:var(--muted-2)}
.n-field > span:last-child{display:flex;align-items:center}
.n-field input{width:76px;height:40px;border:0;border-radius:10px;background:var(--elev-3);color:var(--text);font:inherit;font-size:16px;font-weight:700;text-align:center;font-variant-numeric:tabular-nums}
.n-field i{font-style:normal;width:20px;margin-inline-start:8px;color:var(--muted-2);font-size:15px}
@media (min-width:1024px){.n-title{font-size:28px}}

/* ───────── «День» ─────────
   Телефон: заголовок и настройки, разделы, неделя, калории и БЖУ, вода, приёмы пищи; «+» над нижним меню.
   Компьютер: «+ Добавить» в заголовке, слева неделя, калории и вода, справа приёмы пищи. Без карточек внутри карточек. */
.n-day{position:relative;padding-bottom:84px} /* последняя карточка не прячется под «+» */
.n-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.n-top-r{display:flex;align-items:center;gap:12px}
.n-add-d{display:none;gap:8px;min-height:44px;padding-inline:16px 20px;font-size:15px}
.n-add-d svg{width:18px;height:18px}
.n-gear{flex:none;width:44px;height:44px;border-radius:50%;background:var(--elev-2);color:var(--muted-2);display:grid;place-items:center}
.n-gear svg{width:22px;height:22px}
.n-seg{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);height:44px;padding:3px;border-radius:12px;background:var(--elev-2)}
.n-seg button{border-radius:9px;font-size:14px;font-weight:600;color:var(--muted-2);white-space:nowrap;text-align:center;transition:background .2s,color .2s}
.n-seg button[aria-pressed="true"]{background:var(--lime);color:var(--on-lime);font-weight:700}
.n-seg-s{height:40px;min-width:200px}
.n-seg-s button{padding:0 10px;font-size:13px}
.n-tabs{margin-top:10px}
.n-week{margin-top:14px}
.n-week-h{display:flex;justify-content:space-between;align-items:center;gap:12px}
.n-week-h .eyebrow{margin:0}
.n-week-nav{display:flex}
.n-week-nav button{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--muted-2)}
.n-week-nav button:disabled{color:#3a3a42;cursor:default}
.n-week-nav svg{width:18px;height:18px}
.n-wdays{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;margin-top:4px}
.n-wd{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 0;border-radius:14px;transition:background .2s}
.n-wd > span:first-child{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase}
.n-wd.today > span:first-child{color:var(--text)}
.n-wd-r{position:relative;width:34px;height:34px}
.n-wd-r b{position:absolute;inset:0;display:grid;place-items:center;font-size:13px;font-weight:700;color:var(--muted)}
.n-wd.has .n-wd-r b,.n-wd.today .n-wd-r b{color:var(--text)}
.n-wd[aria-pressed="true"]{background:var(--elev-2)}
.n-wd:disabled{cursor:default}
.n-wd:disabled .n-wd-r b{color:#5a5a63}
.n-track{stroke:var(--elev-3)}
.n-wd:disabled .n-track{stroke:var(--elev-2)}
.n-arc{stroke:var(--lime)}
.n-cal{margin-top:10px;padding:20px;border-radius:var(--radius-m);background:var(--elev)}
.n-ring{position:relative;width:184px;height:184px;margin:0 auto}
.n-ring > div{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.n-ring b{font-size:44px;font-weight:800;line-height:1}
.n-ring span{margin-top:4px;font-size:13px;line-height:1.25;color:var(--muted)}
.n-macros{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.n-macros > div{min-width:0}
.n-macros > div + div{padding-inline-start:14px;border-inline-start:1px solid var(--line)}
.n-macros > div > span{display:block;font-size:13px;color:var(--muted)}
.n-macros b{display:block;margin-top:2px;font-size:15px;font-weight:700;white-space:nowrap}
.n-macros b span{color:var(--muted);font-weight:600}
.n-meter{position:relative;height:6px;margin-top:8px;border-radius:3px;background:var(--elev-3);overflow:hidden}
.n-meter i{position:absolute;top:0;bottom:0;inset-inline-start:0;border-radius:3px;transition:width .4s var(--ease)}
.n-meter.p i{background:var(--hot)}
.n-meter.f i{background:var(--fire)}
.n-meter.c i{background:#a259ff}
.n-meter.w i{background:var(--ice)}
.n-meter.w i.after{background:rgba(0,229,255,.35);border-radius:0}
.n-wcard{margin-top:12px;padding:14px 16px 16px;border-radius:var(--radius-m);background:var(--elev)}
.n-wcard-h{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:12px;align-items:center}
.n-wcard-h > b{font-size:16px;font-weight:700}
.n-wcard-h > span:last-child{font-size:15px}
.n-wcard-h > span:last-child b{font-weight:800}
.n-wcard-h > span:last-child span{color:var(--muted)}
.n-wcard .n-meter{margin-top:12px}
.n-drop{display:inline-flex;color:var(--ice)}
.n-drop svg{width:24px;height:24px}
.n-meals-t{margin:24px 0 10px}
.n-meals{display:grid;gap:10px}
.n-empty{display:grid;justify-items:center;gap:8px;padding:28px 20px;border-radius:var(--radius-m);border:1px dashed rgba(255,255,255,.16);text-align:center}
.n-empty svg{width:28px;height:28px;color:#5a5a63}
.n-empty b{font-size:16px}
.n-meal{display:grid;grid-template-columns:56px minmax(0,1fr);gap:14px;align-items:center;padding:14px 16px;border-radius:var(--radius-m);background:var(--elev)}
.n-meal-r{position:relative;width:56px;height:56px}
.n-meal-r b{position:absolute;inset:0;display:grid;place-items:center;font-size:13px;font-weight:800}
.n-meal-b{min-width:0}
.n-meal-t{display:block;font-size:13px;color:var(--muted)}
.n-meal-n{display:-webkit-box;margin-top:2px;font-size:16px;font-weight:700;line-height:1.3;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.n-meal-k{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-top:6px}
.n-meal-k > b{font-size:14px;font-weight:800}
.n-bju{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:13px;color:var(--muted-2)}
.n-bju b{font-weight:800}
.n-bju .p{color:var(--hot)}
.n-bju .f{color:var(--fire)}
.n-bju .c{color:#a259ff}
/* «+» и его меню: затемнение на весь экран, над «+» — вода и вес, ниже — лаймовая «Еда» (ближе к пальцу); «+» становится «✕» */
.n-fab{position:fixed;inset-inline-end:20px;bottom:calc(var(--tabbar-h) + var(--safe-bottom) + 16px);z-index:44;width:60px;height:60px;border-radius:50%;background:var(--lime);color:var(--on-lime);display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.55);transition:background .2s,color .2s,transform .2s}
.n-fab svg{width:28px;height:28px;transition:transform .3s var(--spring)}
.n-fab:active{transform:scale(.94)}
.menu-open .n-fab{z-index:71;background:var(--elev-3);color:var(--text)}
.menu-open .n-fab svg{transform:rotate(45deg)}
.n-menu-wrap{position:fixed;inset:0;z-index:70}
.n-menu-back{position:absolute;inset:0;background:rgba(0,0,0,.88)}
.n-menu{position:absolute;inset-inline:20px;bottom:calc(var(--tabbar-h) + var(--safe-bottom) + 88px);display:grid;gap:10px;animation:fade-up .25s var(--ease) both}
.n-tiles{order:-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.n-tile{display:grid;grid-template-columns:26px minmax(0,1fr);gap:10px;align-items:center;height:68px;padding:0 16px;border-radius:20px;background:var(--elev-2);text-align:start}
.n-tile > span:last-child{min-width:0}
.n-tile b{display:block;font-size:16px;font-weight:800}
.n-tile b + span{display:block;margin-top:2px;font-size:13px;color:var(--muted-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.n-tile .n-drop svg,.n-scale svg{width:26px;height:26px}
.n-scale{display:inline-flex;color:var(--muted-2)}
.n-food{display:flex;align-items:center;gap:8px;height:76px;padding-inline:20px 12px;border-radius:24px;background:var(--lime);color:var(--on-lime)}
.n-food-main{flex:1;min-width:0;text-align:start;color:inherit}
.n-food-t{display:flex;align-items:center;gap:8px;font-size:19px;font-weight:800}
.n-food-t svg{width:22px;height:22px}
.n-food-main > span:last-child{display:block;margin-top:2px;font-size:13px;font-weight:600}
.n-food-b{flex:none;width:48px;height:48px;border-radius:50%;background:var(--on-lime);color:var(--lime);display:grid;place-items:center}
.n-food-b svg{width:22px;height:22px}
.n-food-b.off{background:rgba(10,10,11,.1);color:rgba(10,10,11,.35)}
@media (min-width:1024px){
  .n-day{padding-bottom:0}
  .n-add-d{display:inline-flex}
  .n-fab{display:none}
  .n-tabs{width:380px;margin-top:16px}
  .n-grid{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:40px;margin-top:20px;align-items:start}
  .n-week{margin-top:0}
  .n-cal{margin-top:12px}
  .n-meals-t{margin-top:0}
  .n-menu-back{background:rgba(0,0,0,.5)}
  /* меню — под «+ Добавить» (координаты ставит nutrition.js при открытии) */
  .n-menu{position:fixed;bottom:auto;inset-inline:auto;width:420px;padding:12px;border-radius:28px;background:#141418;box-shadow:0 30px 80px rgba(0,0,0,.6);animation:menu-in .22s var(--ease) both}
  .n-tiles{order:0}
}
/* Шторка воды: единицы, готовые объёмы, своё число, записи дня */
.n-w-head{display:flex;align-items:center;gap:10px}
.n-w-head h3{margin:0}
.n-w-head .n-drop svg{width:26px;height:26px}
.n-w-sub{margin:4px 0 0;font-size:14px;color:var(--muted-2)}
.n-w-bar{margin-top:10px}
.n-w-units{margin-top:18px}
.n-w-presets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:12px}
.n-w-presets button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;height:64px;border-radius:14px;background:var(--elev-2);transition:background .2s,color .2s}
.n-w-presets b{font-size:20px;font-weight:800;line-height:1}
.n-w-presets span{font-size:12px;font-weight:700;color:var(--muted)}
.n-w-presets [aria-pressed="true"]{background:var(--lime);color:var(--on-lime)}
.n-w-presets [aria-pressed="true"] span{color:var(--on-lime)}
.n-w-amount{display:grid;gap:6px;margin-top:14px}
.n-w-amount > span:first-child{font-size:13px;color:var(--muted)}
.n-w-amount > span:last-child{display:flex;align-items:center;height:48px;padding:0 14px;border-radius:12px;background:var(--elev-2)}
.n-w-amount input{flex:1;min-width:0;height:100%;padding:0;border:0;background:none;color:var(--text);font:inherit;font-size:16px;outline:none}
.n-w-amount i{font-style:normal;font-size:14px;color:var(--muted)}
.n-w-list > div{display:grid;grid-template-columns:56px minmax(0,1fr) 36px;gap:8px;align-items:center;min-height:48px}
.n-w-list > div + div{border-top:1px solid var(--line)}
.n-w-list span{font-size:14px;color:var(--muted)}
.n-w-list b{font-size:15px;font-weight:600}
.n-x{width:32px;height:32px;border-radius:50%;background:var(--elev-2);color:var(--muted);display:grid;place-items:center}
.n-x svg{width:12px;height:12px}
/* Дневник: итоги периода, дни по месяцам, открытый день со всеми показателями; телефон — список или день, компьютер — рядом */
.n-all{min-height:36px;margin-top:10px}
.n-kpi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:12px;padding:16px;border-radius:var(--radius-m);background:var(--elev)}
.n-kpi > div{display:grid;gap:2px;min-width:0}
.n-kpi > div + div{padding-inline-start:16px;border-inline-start:1px solid var(--line)}
.n-kpi b{font-size:22px;font-weight:800}
.n-kpi span{font-size:13px;color:var(--muted)}
.n-dlist{padding:0 16px;border-radius:var(--radius-m);background:var(--elev)}
.n-dr{display:grid;grid-template-columns:minmax(0,1fr) auto 18px;gap:0 10px;align-items:center;width:100%;padding:14px 0;text-align:start;color:inherit}
.n-dr + .n-dr{border-top:1px solid var(--line)}
.n-dr.off{grid-template-columns:minmax(0,1fr) auto}
.n-dr-t{min-width:0}
.n-dr-t b{display:block;font-size:16px;font-weight:700}
.n-dr-t span{display:block;margin-top:2px;font-size:13px;color:var(--muted)}
.n-dr-k{display:grid;justify-items:end;font-size:15px;color:var(--muted);white-space:nowrap}
.n-dr-k b{color:var(--text);font-weight:800}
.n-dr-o{font-size:12px;color:var(--muted-2)}
.n-dr > svg{width:18px;height:18px;color:var(--muted)}
.n-dr-bar{grid-column:1/-1}
.n-dr-bar.now .n-meter i{opacity:.5}
.n-dr-none{font-size:14px;color:var(--muted)}
.n-more{margin-top:6px}
.n-dd-back{display:inline-flex;align-items:center;min-height:36px;margin-top:10px;font-size:15px;font-weight:600;color:var(--volt)}
.n-dd-title{margin:4px 0 0;font-family:var(--font-head);font-size:26px;line-height:1.2;font-weight:600;letter-spacing:0}
.n-ind{padding:0 16px;border-radius:var(--radius-m);background:var(--elev)}
.n-ind-r{padding:14px 0}
.n-ind-r + .n-ind-r{border-top:1px solid var(--line)}
.n-ind-r > div:first-child{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:15px;color:var(--muted-2)}
.n-ind-r > div:first-child > span:last-child{color:var(--muted);white-space:nowrap}
.n-ind-r b{color:var(--text);font-weight:800}
.n-ind-r .n-fr-w{margin-top:8px}
.n-meter.y i{background:var(--warn)}
.n-meter.g i{background:var(--muted-2)}
.n-dd .n-meals-t{margin:24px 0 10px}
@media (max-width:1023.98px){
  .n-diary:not(.open) .n-dd,.n-diary.open .n-dl,.n-day.dd-open > .n-top,.n-day.dd-open > .n-tabs{display:none}
  .n-day.dd-open .n-dd-back{margin-top:0}
}
@media (min-width:1024px){
  .n-diary{display:grid;grid-template-columns:420px minmax(0,1fr);gap:40px;margin-top:20px;align-items:start}
  .n-kpi{margin-top:0}
  .n-dd-back{display:none}
  .n-dd-title{margin:0 0 12px}
  .n-dr[aria-current="true"]{width:calc(100% + 32px);margin-inline:-16px;padding-inline:16px;border-radius:12px;background:var(--elev-2)}
  .n-dr[aria-current="true"] + .n-dr{border-top-color:transparent}
}

/* Графики: период, показатели, столбики по дням с нормой, доли БЖУ, среднее за период; календарь «Период» */
.n-cper{margin-top:12px}
.n-cper button{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 6px;overflow:hidden}
.n-cper svg{flex:none;width:16px;height:16px}
.n-cnav{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;margin-top:6px;text-align:center}
.n-cnav b{font-size:16px;font-weight:700}
.n-cnav button{width:44px;height:44px;display:grid;place-items:center;color:var(--text)}
.n-cnav button:disabled,.n-r-mh button:disabled{color:#3a3a42;cursor:default}
.n-cnav svg,.n-r-mh svg{width:20px;height:20px}
.n-cmet{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.n-ccard{margin-top:16px;padding:18px 16px;border-radius:var(--radius-m);background:var(--elev)}
.n-ccard h3{margin:0;font-family:var(--font-head);font-size:20px;font-weight:600;letter-spacing:0}
.n-ccard-s{margin:4px 0 0;font-size:13px;color:var(--muted-2)}
.n-ckpi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:12px}
.n-ckpi > div{display:grid;align-content:start;gap:2px;min-width:0}
.n-ckpi > div + div{padding-inline-start:12px;border-inline-start:1px solid var(--line)}
.n-ckpi b{font-size:17px;font-weight:800;white-space:nowrap}
.n-ckpi span{font-size:12px;color:var(--muted)}
.n-chart{margin-top:36px}
.n-ccard-s + .n-chart{margin-top:16px}
.n-plot{position:relative}
.n-bars{display:flex;align-items:flex-end;gap:var(--gap);height:160px}
.n-bars > i{flex:1;min-width:0;border-radius:4px 4px 0 0;background:var(--lime)}
.n-chart.dense .n-bars > i{border-radius:1px 1px 0 0}
.n-bars > i.p{background:var(--hot)}
.n-bars > i.f{background:var(--fire)}
.n-bars > i.c{background:#a259ff}
.n-bars > i.g{background:var(--muted-2)}
.n-bars > i.y{background:var(--warn)}
.n-bars > i.none{height:4px;border-radius:2px;background:var(--elev-3)}
.n-bars > i.now{opacity:.45}
.n-normline{position:absolute;inset-inline:0;border-top:1px dashed rgba(255,255,255,.5);pointer-events:none}
.n-normline em{position:absolute;inset-inline-end:0;bottom:4px;padding-inline-start:6px;background:var(--elev);font-size:12px;font-style:normal;font-weight:600;white-space:nowrap}
.n-blabels{display:flex;gap:var(--gap);margin-top:8px;padding-top:6px;border-top:1px solid var(--line)}
.n-blabels span{flex:1;min-width:0;font-size:11px;color:var(--muted);white-space:nowrap}
.n-blabels.week span{text-align:center}
.n-legend{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:12px;font-size:12px;color:var(--muted)}
.n-legend i{display:inline-block;width:8px;height:8px;margin-inline-end:6px;border-radius:2px;background:var(--elev-3)}
.n-legend i.now{background:var(--lime);opacity:.45}
.n-legend i.y{background:var(--warn)}
.n-ccard .js-c-table{margin-top:4px}
.n-ctable > div{display:flex;justify-content:space-between;gap:12px;min-height:40px;align-items:center;font-size:14px}
.n-ctable > div + div{border-top:1px solid var(--line)}
.n-ctable span{color:var(--muted-2)}
.n-ctable b{font-weight:700}
.n-ctable b.none{color:var(--muted);font-weight:600}
.n-ctable-n{margin:8px 0 0;font-size:12px;color:var(--muted)}
.n-shares{height:140px}
.n-sh{display:flex;flex:1;flex-direction:column;justify-content:flex-end;min-width:0;height:100%}
.n-sh i{display:grid;place-items:center;overflow:hidden;font-size:11px;font-style:normal;font-weight:800;color:#0a0a0b}
.n-sh i + i{border-top:2px solid var(--elev)}
.n-sh i.c{border-radius:4px 4px 0 0;background:#a259ff}
.n-sh i.f{background:var(--fire)}
.n-sh i.p{background:var(--hot)}
.n-chart.dense .n-sh i.c{border-radius:1px 1px 0 0}
.n-sh.none i{height:4px;border-radius:2px;background:var(--elev-3)}
.n-sh.now{opacity:.45}
.n-shsum{display:grid;gap:6px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:14px}
.n-shsum > div{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px}
.n-shsum > div > span:first-child{min-width:84px;color:var(--muted-2)}
.n-shsum i{display:inline-block;width:10px;height:10px;margin-inline-end:6px;border-radius:3px;vertical-align:-1px}
.n-shsum i.p{background:var(--hot)}
.n-shsum i.f{background:var(--fire)}
.n-shsum i.c{background:#a259ff}
.n-shsum b{font-weight:800}
.n-shsum .norm{color:var(--muted-2)}
.n-shsum .norm b{font-weight:600}
.n-ct{margin:24px 0 10px}
.n-csv{gap:8px;margin-top:10px}
.n-csv svg{width:18px;height:18px}
.n-r-pre{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.n-r-ends{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}
.n-r-ends button{display:grid;gap:2px;padding:10px 14px;border:2px solid transparent;border-radius:14px;background:var(--elev-2);text-align:start}
.n-r-ends span{font-size:12px;color:var(--muted)}
.n-r-ends b{font-size:16px;font-weight:700}
.n-r-ends [aria-pressed="true"]{border-color:var(--lime)}
.n-r-mh{display:grid;grid-template-columns:40px minmax(0,1fr) 40px;align-items:center;margin-top:14px;text-align:center}
.n-r-mh b{font-size:16px;font-weight:700}
.n-r-mh button{width:40px;height:40px;display:grid;place-items:center;color:var(--text)}
.n-r-wd,.n-r-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.n-r-wd{margin-top:6px;font-size:12px;color:var(--muted);text-align:center}
.n-r-wd span{padding:6px 0}
.n-r-days button{position:relative;z-index:0;display:grid;place-items:center;height:44px;font-size:15px;font-weight:600;color:var(--text)}
.n-r-days button:disabled{color:#4a4a52;cursor:default}
.n-r-days .in{background:rgba(212,255,0,.16)}
.n-r-days .from,.n-r-days .to{color:var(--on-lime);font-weight:800}
.n-r-days .from::before,.n-r-days .to::before{content:"";position:absolute;inset:0;z-index:-1;width:38px;height:38px;margin:auto;border-radius:50%;background:var(--lime)}
@media (min-width:1024px){
  .n-charts{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:40px;margin-top:20px;align-items:start}
  .n-cper{margin-top:0}
  .n-ct{margin-top:0}
}

/* Еда: шторка «Добавить еду», строки блюд, карточка блюда, своё блюдо, быстрая запись, повтор, приём пищи */
.n-meal{width:100%;text-align:start;color:inherit;transition:background .2s}
.n-meal:active{background:var(--elev-2)}
.n-f-h{margin:0}
.n-search{display:flex;align-items:center;gap:10px;height:52px;margin-top:14px;padding-inline:16px 8px;border-radius:14px;background:var(--elev-2);color:var(--muted)}
.n-search > svg{flex:none;width:20px;height:20px}
.n-search input{flex:1;min-width:0;height:100%;padding:0;border:0;background:none;color:var(--text);font:inherit;font-size:16px;outline:none}
.n-search input::-webkit-search-cancel-button{display:none}
.n-search-x{flex:none;width:32px;height:32px;border-radius:50%;background:var(--elev-3);color:var(--muted-2);display:grid;place-items:center}
.n-search-x svg{width:11px;height:11px}
.n-f-ai{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:10px}
.n-f-ai button{display:flex;align-items:center;gap:8px;height:52px;padding-inline:14px 8px;border-radius:14px;background:var(--elev-2);color:var(--muted-2);font-size:15px;font-weight:600;text-align:start}
.n-f-ai svg{flex:none;width:20px;height:20px}
.n-f-ai span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.n-f-ai i{flex:none;font-style:normal;padding:3px 7px;border-radius:8px;background:var(--elev-3);font-size:11px;font-weight:700}
.n-f-tabs{margin-top:14px}
.n-f-tabs button{padding:0 4px;font-size:13px;overflow:hidden;text-overflow:ellipsis}
.n-f-list .empty{padding:28px 0}
.n-fr{display:flex;align-items:center;gap:10px;padding:12px 0}
.n-fr + .n-fr{border-top:1px solid var(--line)}
.n-fr-main{flex:1;min-width:0;text-align:start;color:inherit}
.n-fr-main > b{display:block;font-size:16px;font-weight:700;line-height:1.3}
.n-fr-a{display:block;margin-top:2px;font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.n-fr-main .n-bju,.n-fr-main .n-meal-k{margin-top:4px}
.n-fr-w{display:flex;align-items:flex-start;gap:6px;margin-top:4px;font-size:13px;line-height:1.35;color:var(--warn)}
.n-fr-w .n-warn{flex:none;width:15px;height:15px;margin-top:1px}
.n-fr-k{font-size:15px;color:var(--muted-2);white-space:nowrap}
.n-fr-b{flex:none;width:36px;height:36px;border-radius:50%;background:var(--elev-2);color:var(--muted-2);display:grid;place-items:center}
.n-fr-b svg{width:18px;height:18px}
.n-fr-b.add{color:var(--lime)}
.n-fr-b.add.done{background:var(--lime);color:var(--on-lime)}
.n-fr-b.loading{opacity:.5;pointer-events:none}
.n-rep{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:20px;background:var(--elev-2);font-size:14px;font-weight:700;white-space:nowrap}
.n-rep svg{width:18px;height:18px;color:var(--lime)}
.n-cats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.n-cats button{min-height:48px;padding:8px 14px;border-radius:12px;background:var(--elev-2);font-size:14px;font-weight:600;line-height:1.25;text-align:start}
.n-empty span{font-size:14px;color:var(--muted)}
.n-f-hide{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:52px;margin-top:6px;font-size:15px;font-weight:600}
.n-f-links{display:flex;flex-wrap:wrap;gap:4px 24px;margin-top:10px;padding-top:6px;border-top:1px solid var(--line)}
.n-d-head{display:flex;align-items:flex-start;gap:12px}
.n-d-head h3{flex:1;min-width:0;margin:0}
.n-d-btns{display:flex;gap:8px}
.n-icon-b{flex:none;width:40px;height:40px;border-radius:50%;background:var(--elev-2);color:var(--muted-2);display:grid;place-items:center}
.n-icon-b svg{width:20px;height:20px}
.n-icon-b[aria-pressed="true"]{color:var(--lime)}
.n-icon-b[aria-pressed="true"] svg{fill:currentColor}
.n-d-sub{margin:6px 0 0;font-size:14px;color:var(--muted-2)}
.n-d-seg{margin-top:16px}
.n-d-eq{margin:10px 0 0;font-size:14px;color:var(--muted-2);text-align:center;min-height:20px}
.n-d-table{margin-top:14px;padding:4px 16px;border-radius:var(--radius-m);background:var(--elev)}
.n-d-table > div{display:grid;grid-template-columns:minmax(0,1fr) auto 48px;gap:10px;align-items:center;min-height:44px;font-size:15px}
.n-d-table > div + div{border-top:1px solid var(--line)}
.n-d-table > div > span:first-child{display:flex;align-items:center;color:var(--muted-2)}
.n-d-table > div > b{font-weight:700;text-align:end}
.n-d-table > div > b span{color:var(--muted-2);font-weight:600}
.n-d-table > div > span:last-child{font-size:13px;color:var(--muted);text-align:end}
.n-d-table .kc{min-height:52px}
.n-d-table .kc > span:first-child{color:var(--text)}
.n-d-table .kc > b{font-size:22px;font-weight:800}
.n-d-table .kc > b span{font-size:14px}
.n-d-table .n-in > span:first-child{padding-inline-start:20px;font-size:14px}
.n-f-field{display:grid;gap:6px;min-width:0;margin-top:12px}
.n-f-field > span:first-child{font-size:13px;color:var(--muted)}
.n-f-field > span:last-child{display:flex;align-items:center;gap:8px;min-width:0;height:48px;padding:0 14px;border-radius:12px;background:var(--elev-2)}
.n-f-field input{flex:1;width:0;min-width:0;height:100%;padding:0;border:0;background:none;color:var(--text);font:inherit;font-size:16px;outline:none;color-scheme:dark}
.n-f-field i{flex:none;font-style:normal;font-size:14px;color:var(--muted)}
.n-f-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 10px}
.n-f-grid3{grid-template-columns:repeat(3,minmax(0,1fr))}
.n-f-lab{margin:14px 0 6px;font-size:13px;color:var(--muted)}
.n-o-check{display:flex;align-items:flex-start;gap:6px;margin:12px 0 0;font-size:13px;line-height:1.35;color:var(--muted-2)}
.n-o-check:empty{display:none}
.n-o-check svg{flex:none;width:16px;height:16px;color:var(--lime)}
.n-o-check.bad{color:var(--warn)}
.n-o-check.bad svg{color:var(--warn)}
.n-danger{min-height:44px;font-size:15px;font-weight:600;color:var(--hot);text-align:center}
.n-danger.loading{opacity:.5;pointer-events:none}
.n-rep-list{margin-top:10px}
.n-rep-i{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:12px;align-items:center;width:100%;padding:12px 0;text-align:start;color:inherit}
.n-rep-i + .n-rep-i{border-top:1px solid var(--line)}
.n-rep-i b{display:block;font-size:15px;font-weight:700}
.n-rep-i b + span{display:block;margin-top:2px;font-size:13px;color:var(--muted)}
.n-rep-i > span:last-child{font-size:14px;color:var(--muted-2);white-space:nowrap}
.n-rep-i[aria-checked="false"] > span:not(.n-box){opacity:.45}
.n-box{width:24px;height:24px;border-radius:6px;border:2px solid var(--muted);display:grid;place-items:center;color:var(--on-lime)}
.n-box svg{width:16px;height:16px;opacity:0}
.n-rep-i[aria-checked="true"] .n-box{border-color:var(--lime);background:var(--lime)}
.n-rep-i[aria-checked="true"] .n-box svg{opacity:1}
.n-rep-sum{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:14px 0 0;font-size:14px}
.n-m-sub{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:8px 0 0;padding-bottom:14px;border-bottom:1px solid var(--line);font-size:14px;color:var(--muted-2)}
.n-m-sub svg{width:16px;height:16px}
.n-m-sub span + svg{margin-inline-start:12px}
.n-m-bar{padding:12px 0 2px}
.n-m-bar > div:first-child{display:flex;align-items:baseline;gap:4px}
.n-m-bar b{font-size:20px;font-weight:800}
.n-m-bar > div:first-child > span{color:var(--muted-2);font-size:14px}
.n-m-bar .n-m-l{margin-inline-start:auto;font-size:14px}
.n-meter.k i{background:var(--lime)}
.n-m-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:16px;border-top:1px solid var(--line)}
.n-m-tiles > div{display:grid;gap:2px;padding:12px 0}
.n-m-tiles > div:nth-child(even){padding-inline-start:16px;border-inline-start:1px solid var(--line)}
.n-m-tiles > div:nth-child(n+3){border-top:1px solid var(--line)}
.n-m-tiles b{font-size:16px;font-weight:800}
.n-m-tiles span{font-size:13px;color:var(--muted)}
.n-m-h{display:flex;align-items:center;gap:8px;margin:22px 0 2px;font-family:var(--font-head);font-size:20px;font-weight:600;letter-spacing:0}
.n-count{min-width:24px;height:24px;padding:0 7px;border-radius:12px;background:var(--elev-3);font-family:var(--font);font-size:12px;font-weight:700;display:inline-grid;place-items:center}
.n-e-sum{margin:12px 0 0;font-size:14px;color:var(--muted-2);text-align:center}
.n-e-time > span:last-child{max-width:160px}

/* Арабская вязь соединяет буквы — межбуквенный интервал и заглавные её ломают; у деванагари интервал разрывает знаки над и под строкой */
html[lang="ar"] *,html[lang="fa"] *{letter-spacing:0!important;text-transform:none!important}
html[lang="hi"] *{letter-spacing:0!important}
/* Знаки над и под строкой требуют больше воздуха, а заголовки этих шрифтов шире и выше Oswald */
html[lang="ar"] body,html[lang="fa"] body,html[lang="hi"] body{line-height:1.65}
html[lang="ar"] :is(.h1,.h2,.h3,.hist-h,.page-title,.sec-title,.day-title),html[lang="fa"] :is(.h1,.h2,.h3,.hist-h,.page-title,.sec-title,.day-title){line-height:1.4;font-weight:700}
html[lang="hi"] :is(.h1,.h2,.h3,.hist-h,.page-title,.sec-title,.day-title){line-height:1.45;font-weight:700}
html[lang="ar"] .h1,html[lang="fa"] .h1,html[lang="hi"] .h1{font-size:clamp(32px,9vw,56px)}
html[lang="ar"] .h2,html[lang="fa"] .h2,html[lang="hi"] .h2{font-size:clamp(24px,2.6vw + 12px,32px)}

/* Письмо справа налево (арабский, персидский). Flex и grid разворачиваются сами; ниже — то, что задано координатами.
   --dir переворачивает направление анимаций. */
html[dir="rtl"]{--dir:-1}
[dir="rtl"] .link-arrow::after{transform:scaleX(-1)}
[dir="rtl"] .n-week-nav svg,[dir="rtl"] .n-cnav svg,[dir="rtl"] .n-r-mh svg,[dir="rtl"] .n-dr > svg{transform:scaleX(-1)} /* стрелки «Питания»: раньше — справа */
@media (hover:hover){[dir="rtl"] .link-arrow:hover::after{transform:translateX(-4px) scaleX(-1)}}
[dir="rtl"] .progress,[dir="rtl"] .wo-prog i{transform-origin:100% 50%}
/* графики и значки рисуются по координатам: оси и подписи не должны зеркалиться */
[dir="rtl"] svg{direction:ltr}
/* @ник читается слева направо; переключатель зеркалится: включён — бегунок слева */
[dir="rtl"] .handle{direction:ltr;unicode-bidi:isolate}
[dir="rtl"] .switch i{left:auto;right:2px}
[dir="rtl"] .switch[aria-checked="true"] i{transform:translateX(-20px)}
/* степперы веса и повторов (− слева, + справа, как на числовой оси), «до и после» и лента отзывов с прокруткой считаются слева направо; текст внутри — по-прежнему справа налево */
[dir="rtl"] .big-stepper,[dir="rtl"] .stp,[dir="rtl"] .ba{direction:ltr}
[dir="rtl"] .ba .lbl{direction:rtl}
/* главный экран на компьютере: на фото люди справа, свободное место слева — колонки остаются на месте, а текст читается справа налево */
@media (min-width:820px){
  [dir="rtl"] .hero-grid{direction:ltr}
  [dir="rtl"] .hero-media .h1,[dir="rtl"] .hero-body{direction:rtl;text-align:right}
}