/* Спорт-Трекер: общие стили всех страниц. Токены из Figma (Dark и Light).

   Шрифт. В макете Gilroy (платный). Когда у заказчика будет лицензия, положите файлы
   в папку fonts/ и раскомментируйте блок ниже. До этого используется Manrope (Google Fonts,
   есть кириллица), а без интернета системный шрифт.

@font-face{font-family:Gilroy;font-weight:400;font-display:swap;src:url(../fonts/Gilroy-Regular.woff2) format("woff2")}
@font-face{font-family:Gilroy;font-weight:500;font-display:swap;src:url(../fonts/Gilroy-Medium.woff2) format("woff2")}
@font-face{font-family:Gilroy;font-weight:600;font-display:swap;src:url(../fonts/Gilroy-SemiBold.woff2) format("woff2")}
@font-face{font-family:Gilroy;font-weight:700;font-display:swap;src:url(../fonts/Gilroy-Bold.woff2) format("woff2")}
@font-face{font-family:Gilroy;font-weight:900;font-display:swap;src:url(../fonts/Gilroy-Black.woff2) format("woff2")}
*/
:root{--bg:#0e0e0e;--s1:#1d1d1d;--s3:#313131;--si:#2c2c2c;--chip:#404040;--tx:#f2f2f2;--tx2:#929292;--tx3:#666;--inv:#272727;
--acc:#c9f24d;--acc2:#e7fa55;--atx:#e7fa55;--abg:#282a18;--abd:#4c4d25;--water:#69d2ff;--p:#d6ff45;--f:#86ff45;--c:#60ff90;
--track:#303030;--dim:rgba(241,255,224,.4);--glow:rgba(201,242,77,.22);--danger:#ff4d4d;--shadow:rgba(0,0,0,.35);
--ease:cubic-bezier(.22,.8,.3,1);--t:.28s;--tubebg:rgba(213,233,255,.05);--rline:#ebffce;--rtrk:rgba(235,255,206,.03);--ico:#777;--glowo:1}
:root[data-theme=light]{--bg:#f1f1f6;--s1:#fff;--s3:#e8e8ef;--si:#ededf3;--chip:#e8e8ef;--tx:#202124;--tx2:#6f7277;--tx3:#a3abb8;
--acc:#9dec00;--acc2:#b8f23a;--atx:#5c8a00;--abg:#f0f9d9;--abd:#c6e57a;--p:#e7e300;--f:#9dec00;--c:#20cb54;--track:#e8e8ef;--dim:rgba(32,33,36,.35);--glow:rgba(157,236,0,.2);--shadow:rgba(32,33,36,.18);--rline:#9aa58a;--rtrk:rgba(32,33,36,.06);--glowo:.26;--tubebg:rgba(32,33,36,.07)}

/* 1rem = 16px в макете 390px; шрифт плавно растёт от 320px до планшета, дальше макет растягивается по ширине */
html{font-size:clamp(14px,4.1vw,17px);-webkit-text-size-adjust:100%}
*{box-sizing:border-box;margin:0;-webkit-tap-highlight-color:transparent}
body{background:var(--bg);color:var(--tx);font:500 .875rem/1.3 Gilroy,Manrope,system-ui,-apple-system,Roboto,sans-serif;font-variant-numeric:tabular-nums;min-height:100dvh;transition:background-color .35s,color .35s}
html.tt *,html.tt *:before{transition:background-color .35s,color .35s,border-color .35s,stroke .35s!important}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;transition:transform .15s var(--ease),opacity .2s,background-color .2s,filter .2s}
button:active:not(:disabled){transform:scale(.95)}
@media (hover:hover){button:hover:not(:disabled){filter:brightness(1.12)}}
button:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
svg.i{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.flip{transform:scaleX(-1)}

.app{position:relative;overflow:hidden;min-height:100dvh;padding:calc(env(safe-area-inset-top) + 1.0625rem) max(.75rem,env(safe-area-inset-right)) calc(10rem + env(safe-area-inset-bottom)) max(.75rem,env(safe-area-inset-left))}
.app:before{content:"";position:absolute;left:50%;top:-13.75rem;width:28rem;height:22.5rem;transform:translateX(-50%);border-radius:50%;background:var(--acc);opacity:var(--glowo);filter:blur(7.8rem);pointer-events:none;transition:opacity .35s}
.in{position:relative;width:100%;max-width:64rem;margin:0 auto}

.ib{width:2rem;height:2rem;display:grid;place-items:center;font-size:1.375rem;border-radius:50%;margin:-.3rem 0}

.card{background:var(--s1);border-radius:1rem;margin-top:.75rem;padding:.9rem .75rem;position:relative;transition:background-color .35s}
.hd{display:flex;align-items:center;gap:.4rem;font-size:1rem;font-weight:700}.hd .i{font-size:1rem}
.tag.si{background:var(--si)}
.tag{background:var(--chip);border-radius:.25rem;padding:.2rem .35rem;font-size:.75rem;font-weight:500;transition:background-color .35s}
.btn2{height:2rem;padding:0 1.1rem;border-radius:.5rem;background:var(--abg);border:1px solid var(--abd);color:var(--atx);font-size:.75rem}
.dis{opacity:.4}

@keyframes in{from{opacity:0;transform:translateY(.6rem)}}

.fab{position:fixed;right:max(1rem,env(safe-area-inset-right));bottom:calc(5.4rem + env(safe-area-inset-bottom));width:3.25rem;height:3.25rem;border-radius:50%;background:var(--acc);color:var(--inv);font-size:1.6rem;display:grid;place-items:center;box-shadow:0 .4rem 1.1rem var(--shadow);z-index:5;transition:transform .3s var(--ease),opacity .25s}
.fab.hide{transform:scale(.4);opacity:0;pointer-events:none}
nav{position:fixed;inset:auto 0 0;z-index:6;background:var(--s1);border-radius:1.5rem 1.5rem 0 0;padding:.4rem max(.4rem,env(safe-area-inset-left)) calc(.75rem + env(safe-area-inset-bottom));transition:background-color .35s;box-shadow:0 -.5rem 1.5rem rgba(0,0,0,.08)}
.nv{display:flex;gap:2px;max-width:40rem;margin:0 auto}
.nv button{flex:1;height:3.25rem;border-radius:1rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;font-size:.625rem;letter-spacing:.1px;font-weight:400}
.nv .i{font-size:1.5rem;color:var(--ico)}.nv .on .i{color:var(--acc2)}.nv .on{background:var(--s3);font-weight:600}
.nv button{color:var(--tx)}

.ov{position:fixed;inset:0;z-index:20;display:flex;align-items:flex-end;justify-content:center;background:rgba(0,0,0,0);transition:background-color .28s}
.ov.show{background:rgba(0,0,0,.6)}
.sh{width:100%;max-width:34rem;max-height:90dvh;overflow:auto;background:var(--s1);border-radius:1.5rem 1.5rem 0 0;padding:.65rem 1rem calc(1.25rem + env(safe-area-inset-bottom));transform:translateY(105%);transition:transform .34s var(--ease)}
.ov.show .sh{transform:none}
.sh:before{content:"";display:block;width:2.25rem;height:.25rem;border-radius:2px;background:var(--chip);margin:0 auto .9rem}
.sh h3{text-align:center;font-size:1.125rem;font-weight:600}
.sh>small{display:block;text-align:center;color:var(--tx2);margin:.25rem 0 .9rem}
.cta{width:100%;height:3rem;border-radius:.9rem;background:linear-gradient(270deg,var(--acc2),var(--acc));color:var(--inv);font-weight:700;font-size:1rem;margin-top:.9rem}
.cta:disabled{opacity:.4}
.ghost{height:3rem;border-radius:.9rem;background:var(--si);flex:1;margin-top:.9rem;font-weight:600}
.opt{display:flex;align-items:center;gap:.75rem;width:100%;padding:.9rem .25rem;font-size:1rem;border-bottom:1px solid var(--chip);text-align:left;border-radius:0}
.opt:last-of-type{border:0}.opt .i{font-size:1.4rem;color:var(--acc)}
.big{text-align:center;font-size:2rem;font-weight:700;margin:.6rem 0}
input[type=range]{width:100%;accent-color:var(--acc)}
.vol{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;margin:.6rem 0}
.vol button{padding:.65rem .9rem;border-radius:.75rem;background:var(--si);transition:background-color .2s,color .2s,transform .15s var(--ease)}
.vol .on{background:var(--acc);color:var(--inv);font-weight:700;transform:scale(1.06)}
.two{display:flex;gap:.6rem}.two .cta{flex:1}
textarea{width:100%;min-height:6rem;border-radius:.75rem;background:var(--si);color:var(--tx);border:0;padding:.75rem;font:inherit;resize:none;transition:box-shadow .2s}
textarea:focus{outline:0;box-shadow:0 0 0 2px var(--acc)}
.sp{width:2.75rem;height:2.75rem;border-radius:50%;border:4px solid var(--chip);border-top-color:var(--acc);margin:1rem auto;animation:r 1s linear infinite}
@keyframes r{to{transform:rotate(1turn)}}
.ov.dlg{align-items:center}
.ov.dlg .sh{max-width:20rem;margin:0 1.25rem;border-radius:1.25rem;text-align:center;transform:scale(.88);opacity:0;transition:transform .3s var(--ease),opacity .25s}
.ov.dlg.show .sh{transform:none;opacity:1}.ov.dlg .sh:before{display:none}
.del{background:var(--danger);color:#fff;flex:1;height:3rem;border-radius:.9rem;margin-top:.9rem;font-weight:700}
.toast{position:fixed;left:50%;bottom:calc(9rem + env(safe-area-inset-bottom));transform:translate(-50%,.6rem);opacity:0;background:var(--tx);color:var(--bg);padding:.65rem 1rem;border-radius:.75rem;z-index:40;font-size:.8rem;max-width:86%;text-align:center;transition:opacity .25s,transform .3s var(--ease)}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* шторка «Добавить воду» по макету Figma (фрейм 49) */
.ov.wide{flex-direction:column;align-items:center;overflow-y:auto}
.ov.wide.show{background:rgba(0,0,0,.9)}
:root[data-theme=light] .ov.wide.show{background:rgba(32,33,36,.55)}
.ov.wide .sh{margin-top:auto;position:relative;overflow:visible;max-height:none;border-radius:2rem 2rem 0 0;padding:1.75rem 1rem calc(2rem + env(safe-area-inset-bottom))}
.ov.wide .sh:before{position:absolute;top:-1rem;left:50%;transform:translateX(-50%);width:3.375rem;height:.375rem;margin:0;background:#505050}
.wic{display:block;width:4.25rem;height:4.0625rem;margin:0 auto}
.ov.wide h3{font-size:1.5rem;margin-top:.45rem}
.ov.wide .sh>small{margin:.75rem 0 0;font-weight:500;color:var(--tx);font-size:.875rem}

@media (prefers-reduced-motion:reduce){*,*:before{animation:none!important;transition:none!important}}

/* ===== Общие компоненты страниц ===== */
body{animation:pg .28s var(--ease) both}
@keyframes pg{from{opacity:0;transform:translateY(.4rem)}}
body.leave{opacity:0;transform:translateY(-.3rem);transition:opacity .16s,transform .16s}
[hidden]{display:none!important}
a{color:inherit}

/* Основная кнопка из макета: лаймовая «пилюля» 356×48 со стрелкой справа */
.pill{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:3rem;border-radius:99px;background:linear-gradient(270deg,var(--acc2),var(--acc));color:var(--inv);font-weight:700;font-size:1rem}
.pill .i{position:absolute;right:1.1rem;font-size:1.375rem;stroke-width:2.5}
.pill:disabled{opacity:.4}
.pill.dark{background:var(--tx);color:var(--bg)}
.pill.ghost2{background:var(--si);color:var(--tx)}
.link{display:block;margin:.9rem auto 0;color:var(--tx2);font-size:.875rem;font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* Поля ввода (в макете 350×46, радиус 10) */
.fld{display:block;text-align:left;margin-top:.9rem}
.fld>span{display:block;font-size:.75rem;color:var(--tx2);margin:0 0 .35rem .25rem}
.fld input,.inp{width:100%;height:2.875rem;border-radius:.625rem;border:1px solid transparent;background:var(--fieldbg);color:var(--tx);font:inherit;font-size:.9375rem;padding:0 .875rem;transition:border-color .2s,box-shadow .2s}
.fld input:focus,.inp:focus{outline:0;border-color:var(--acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 22%,transparent)}
.fld input::placeholder,.inp::placeholder{color:var(--tx3)}
.inp[type=number]{-moz-appearance:textfield}.inp::-webkit-outer-spin-button,.inp::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.err{color:var(--danger);font-size:.8125rem;margin-top:.5rem;text-align:left;animation:in .25s var(--ease) both}
:root{--fieldbg:rgba(239,255,230,.07);--cardbg:rgba(239,255,230,.05);--cardbd:rgba(255,255,255,.14)}
:root[data-theme=light]{--fieldbg:#fff;--cardbg:#fff;--cardbd:#e1e3ea}

/* Чекбокс согласия */
.chk{display:flex;gap:.6rem;align-items:flex-start;text-align:left;font-size:.8125rem;color:var(--tx2);margin-top:1rem;line-height:1.4}
.chk input{appearance:none;flex:none;width:1.25rem;height:1.25rem;border-radius:.375rem;border:1.5px solid var(--tx3);display:grid;place-items:center;margin:.05rem 0 0;transition:background .2s,border-color .2s}
.chk input:checked{background:var(--acc);border-color:var(--acc)}
.chk input:checked:after{content:"";width:.35rem;height:.65rem;border:solid var(--inv);border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg)}
.chk a{color:var(--tx);text-underline-offset:2px}

/* Шапка внутренних страниц: «назад» и заголовок */
.ph{position:relative;display:flex;align-items:center;justify-content:center;min-height:2.5rem;z-index:2}
.ph h1{font-size:1.25rem;font-weight:700;text-align:center}
.ph .back{position:absolute;left:-.35rem;top:50%;transform:translateY(-50%)}
.ph .act2{position:absolute;right:-.35rem;top:50%;transform:translateY(-50%)}
.sub{color:var(--tx2);text-align:center;margin-top:.35rem;font-size:.875rem}

/* Линейка выбора значения (рост, вес, свой результат) */
.ruler{position:relative;height:6.5rem;margin:0 calc(50% - 50vw);overflow:hidden;touch-action:pan-x;mask:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)}
.ruler .sc{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:0 50%;cursor:grab}
.ruler .sc::-webkit-scrollbar{display:none}
.ruler .tk{flex:none;width:1.5rem;position:relative;scroll-snap-align:center}
.ruler .tk:before{content:"";position:absolute;left:50%;top:.875rem;width:2px;height:2.5rem;margin-left:-1px;border-radius:1px;background:var(--rulerk)}
.ruler .tk.mj:before{top:0;height:4.25rem}
.ruler .tk b{position:absolute;left:50%;top:4.75rem;transform:translateX(-50%);font-size:.875rem;font-weight:500;white-space:nowrap;color:var(--tx2);transition:color .2s}
.ruler .tk.on b{color:var(--tx);font-weight:700}
.ruler:after{content:"";position:absolute;left:50%;top:0;width:3px;height:4.25rem;margin-left:-1.5px;border-radius:2px;background:var(--acc);box-shadow:0 0 10px var(--acc);pointer-events:none}
:root{--rulerk:#404040}:root[data-theme=light]{--rulerk:#c9ccd6}
.rval{text-align:center;font-size:1.75rem;font-weight:700;margin-top:.6rem}

/* Иконка в шторке привязки email */
.mail-ic{width:4rem;height:4rem;margin:.25rem auto .5rem;border-radius:1.25rem;display:grid;place-items:center;background:linear-gradient(180deg,var(--acc2),var(--acc));color:var(--inv);font-size:2rem}
.ov.lock .sh:before{display:none}

/* Переключатель */
.sw2{position:relative;flex:none;width:2.75rem;height:1.625rem;border-radius:99px;background:var(--chip);transition:background .25s}
.sw2:after{content:"";position:absolute;left:.1875rem;top:.1875rem;width:1.25rem;height:1.25rem;border-radius:50%;background:#fff;transition:transform .28s var(--ease)}
.sw2[aria-checked=true]{background:var(--acc)}.sw2[aria-checked=true]:after{transform:translateX(1.125rem)}

/* Неоновые иллюстрации (js/neon.js) */
.neon{display:block;flex:none;object-fit:contain;pointer-events:none;user-select:none;-webkit-user-drag:none}
.photo{display:block;object-fit:cover;pointer-events:none;user-select:none;-webkit-user-drag:none}
@keyframes float{50%{transform:translateY(-.4rem)}}
/* Стадии ожидания (расчёт плана, AI-анализ) */
.stages{width:100%;max-width:17rem;margin:2rem auto 0;display:grid;gap:1rem;text-align:left;padding:0}
.stages li{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;font-size:.9375rem;font-weight:700;color:var(--tx2);transition:color .3s}
.stages li.cur{color:var(--tx)}
.stages .st{flex:none;width:1rem;height:1rem;display:grid;place-items:center}
.stages li.cur .st{border:2px solid #7fca67;border-top-color:transparent;border-radius:50%;animation:r .9s linear infinite}
.stages li.wait .st{opacity:0}
.stages li.ok .st:before{content:"";width:.35rem;height:.65rem;border:solid #7fca67;border-width:0 2.5px 2.5px 0;transform:translateY(-2px) rotate(45deg)}

/* Экран «Данные не сохранились» (запуск с диска в браузере без общего localStorage) */
.nostore{min-height:100dvh;display:flex;flex-direction:column;justify-content:center;gap:1rem;padding:2rem 1.25rem;max-width:30rem;margin:auto;text-align:center}
.nostore h1{font-size:1.5rem}.nostore p{color:var(--tx2);line-height:1.5}.nostore b{color:var(--tx)}

.legal-t{text-align:left;font-size:.875rem;line-height:1.5;color:var(--tx2);max-height:55vh;overflow:auto;margin:.5rem 0 1rem}