/* OneGym — дизайн-система. Темна, спортивна, лаймовий акцент. */
:root{
  --bg:#0a0e13;
  --bg-2:#0f151d;
  --panel:#141b25;
  --panel-2:#182230;
  --line:rgba(255,255,255,.07);
  --line-2:rgba(255,255,255,.12);
  --txt:#eaf0f6;
  --txt-2:#9fb0c0;
  --txt-3:#65788a;
  --lime:#b6f63a;
  --lime-d:#8fd41f;
  --cyan:#45d0ff;   /* білок */
  --amber:#ffb74d;  /* жири */
  --carb:#c48bff;   /* вуглеводи */
  --water:#3aa0ff;
  --danger:#ff6b6b;
  --ok:#5bd98a;
  --radius:20px;
  --radius-s:14px;
  --shadow:0 12px 40px rgba(0,0,0,.45);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:var(--font);background:var(--bg);color:var(--txt);
  line-height:1.5;-webkit-font-smoothing:antialiased;
  min-height:100vh;overscroll-behavior-y:none;
}
body::before{ /* атмосферне світіння */
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(900px 500px at 100% -10%, rgba(182,246,58,.10), transparent 60%),
    radial-gradient(700px 500px at -10% 110%, rgba(69,208,255,.08), transparent 60%);
}
#app{position:relative;z-index:1}
h1,h2,h3{margin:0;line-height:1.15;letter-spacing:-.02em}
h1{font-size:30px;font-weight:800}
h2{font-size:21px;font-weight:750}
h3{font-size:16px;font-weight:700}
p{margin:0}
a{color:var(--lime);text-decoration:none}
button{font-family:inherit}
img{max-width:100%}

/* ---------- утиліти ---------- */
.wrap{max-width:1080px;margin:0 auto;padding:0 16px}
.muted{color:var(--txt-2)}
.tiny{font-size:12.5px;color:var(--txt-3)}
.center{text-align:center}
.row{display:flex;gap:12px}
.row.wrap{flex-wrap:wrap}
.between{justify-content:space-between;align-items:center}
.grow{flex:1}
.stack{display:flex;flex-direction:column;gap:12px}
.hidden{display:none!important}
.mt{margin-top:16px}.mt-s{margin-top:8px}.mt-l{margin-top:28px}

/* ---------- кнопки ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:none;border-radius:999px;padding:14px 22px;font-size:15.5px;font-weight:700;
  cursor:pointer;transition:.15s transform,.15s filter,.15s background;
  background:var(--panel-2);color:var(--txt);width:auto;
}
.btn:active{transform:scale(.97)}
.btn-primary{background:linear-gradient(135deg,var(--lime),var(--lime-d));color:#0a0e13}
.btn-primary:hover{filter:brightness(1.06)}
.btn-ghost{background:transparent;border:1px solid var(--line-2);color:var(--txt)}
.btn-block{width:100%}
.btn-lg{padding:16px 26px;font-size:16.5px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.link{background:none;border:none;color:var(--lime);cursor:pointer;font-weight:700;padding:0;font-size:inherit}

/* ---------- картки ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.card-2{background:var(--panel-2)}
.soft{box-shadow:var(--shadow)}

/* ---------- поля ---------- */
label.field{display:block;margin-bottom:14px}
label.field .lab{display:block;font-size:13.5px;color:var(--txt-2);margin-bottom:7px;font-weight:600}
input,select,textarea{
  width:100%;background:var(--bg-2);border:1px solid var(--line-2);color:var(--txt);
  border-radius:var(--radius-s);padding:13px 14px;font-size:16px;font-family:inherit;outline:none;
}
input:focus,select,textarea:focus{border-color:var(--lime)}
input::placeholder{color:var(--txt-3)}
.pin-input{letter-spacing:.5em;text-align:center;font-weight:800;font-size:22px}
.err{color:var(--danger);font-size:13.5px;margin-top:8px}
.hint{color:var(--txt-3);font-size:12.5px;margin-top:6px}

/* ---------- бренд ---------- */
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.02em}
.brand .mark{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--lime),var(--lime-d));
  display:grid;place-items:center;color:#0a0e13;font-weight:900;font-size:18px}
.brand .name{font-size:20px}
.brand .name b{color:var(--lime)}
.brand-logo{width:auto;display:block}
.brand-fb{align-items:center}

/* ---------- auth ---------- */
.auth{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:24px 0 40px}
.hero-tag{display:inline-block;font-size:12.5px;font-weight:700;color:var(--lime);
  background:rgba(182,246,58,.10);border:1px solid rgba(182,246,58,.25);padding:6px 12px;border-radius:999px}
.hero-h{font-size:34px;font-weight:850;line-height:1.08;margin-top:16px}
.hero-h .g{background:linear-gradient(120deg,var(--lime),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
.feature{display:flex;gap:12px;align-items:flex-start}
.feature .ic{width:38px;height:38px;flex:none;border-radius:11px;background:var(--panel-2);display:grid;place-items:center;font-size:19px}

/* ---------- сегменти / вибір ---------- */
.seg{display:flex;background:var(--bg-2);border:1px solid var(--line-2);border-radius:999px;padding:4px;gap:4px}
.seg button{flex:1;border:none;background:transparent;color:var(--txt-2);padding:11px;border-radius:999px;font-weight:700;cursor:pointer;font-size:14.5px}
.seg button.on{background:var(--lime);color:#0a0e13}
.choice{display:grid;gap:10px}
.choice .opt{display:flex;align-items:center;gap:14px;background:var(--bg-2);border:1.5px solid var(--line-2);
  border-radius:var(--radius-s);padding:15px;cursor:pointer;transition:.12s}
.choice .opt:hover{border-color:var(--line-2)}
.choice .opt.on{border-color:var(--lime);background:rgba(182,246,58,.07)}
.choice .opt .emo{font-size:24px;width:34px;text-align:center}
.choice .opt .t{font-weight:700}
.choice .opt .d{font-size:12.5px;color:var(--txt-2)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:var(--bg-2);border:1.5px solid var(--line-2);color:var(--txt);padding:9px 14px;border-radius:999px;cursor:pointer;font-size:14px;font-weight:600}
.chip.on{background:var(--lime);color:#0a0e13;border-color:var(--lime)}

/* ---------- завантаження фото ---------- */
.up-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.up-grid-3{grid-template-columns:1fr 1fr 1fr;gap:8px}
.up{position:relative;aspect-ratio:3/4;border:1.5px dashed var(--line-2);border-radius:var(--radius-s);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;cursor:pointer;
  color:var(--txt-2);background:var(--bg-2);overflow:hidden;text-align:center;padding:10px}
.up.filled{border-style:solid;border-color:var(--lime)}
.up img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.up .badge{position:absolute;top:8px;left:8px;background:rgba(10,14,19,.75);padding:4px 9px;border-radius:999px;font-size:11px;font-weight:700}

/* ---------- онбординг ---------- */
.wizard{min-height:100vh;display:flex;flex-direction:column}
.wz-top{padding:18px 0 6px}
.progress{height:6px;background:var(--panel-2);border-radius:999px;overflow:hidden}
.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--lime),var(--cyan));transition:.35s width}
.wz-body{flex:1;padding:22px 0 120px}
.wz-nav{position:fixed;left:0;right:0;bottom:0;padding:14px 16px calc(14px + var(--safe-b));
  background:linear-gradient(to top,var(--bg) 60%,transparent);display:flex;gap:12px;z-index:20}
.wz-nav .wrap{display:flex;gap:12px;width:100%}
.step-emo{display:none}
.goal-emo:empty,.hero-art .e:empty{display:none}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}

/* ---------- app shell / nav ---------- */
.appbar{position:sticky;top:0;z-index:30;background:rgba(10,14,19,.94);border-bottom:1px solid var(--line)}
.appbar .wrap{display:flex;align-items:center;justify-content:space-between;height:58px}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--panel-2);display:grid;place-items:center;font-weight:800;color:var(--lime);cursor:pointer}
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;background:#0f151d;
  border-top:1px solid var(--line);display:flex;padding:8px 6px calc(8px + var(--safe-b))}
.tabbar button{flex:1;background:none;border:none;color:var(--txt-3);display:flex;flex-direction:column;align-items:center;gap:3px;
  font-size:10.5px;font-weight:700;cursor:pointer;padding:4px}
.tabbar button .ti{font-size:20px;line-height:1}
.tabbar button.on{color:var(--lime)}
.page{padding:18px 16px 96px}

/* ---------- кільця/метрики ---------- */
.ring{--p:0;--c:var(--lime);width:120px;height:120px;border-radius:50%;
  background:conic-gradient(var(--c) calc(var(--p)*1%), var(--panel-2) 0);
  display:grid;place-items:center;position:relative}
.ring::before{content:"";position:absolute;inset:10px;border-radius:50%;background:var(--panel)}
.ring .in{position:relative;text-align:center}
.ring .in b{font-size:24px;font-weight:800;display:block}
.ring .in span{font-size:11px;color:var(--txt-2)}
.macro{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.macro .m{background:var(--panel-2);border-radius:var(--radius-s);padding:12px;text-align:center}
.macro .m .bar{height:6px;border-radius:999px;background:var(--bg);overflow:hidden;margin:8px 0 6px}
.macro .m .bar i{display:block;height:100%}
.macro .m b{font-size:15px}
.stat{background:var(--panel-2);border-radius:var(--radius-s);padding:14px}
.stat .v{font-size:22px;font-weight:800}
.stat .l{font-size:12px;color:var(--txt-2)}
.pill{display:inline-block;padding:5px 11px;border-radius:999px;font-size:12px;font-weight:700;background:var(--panel-2);color:var(--txt-2)}
.pill.lime{background:rgba(182,246,58,.12);color:var(--lime)}

/* toast */
.toast{position:fixed;left:50%;bottom:calc(84px + var(--safe-b));transform:translateX(-50%);z-index:60;
  background:var(--panel-2);border:1px solid var(--line-2);color:var(--txt);padding:12px 18px;border-radius:999px;
  box-shadow:var(--shadow);font-weight:600;font-size:14px;opacity:0;transition:.25s;pointer-events:none}
.toast.show{opacity:1}
.spin{width:20px;height:20px;border:2.5px solid rgba(255,255,255,.2);border-top-color:var(--lime);border-radius:50%;animation:sp .7s linear infinite;display:inline-block}
@keyframes sp{to{transform:rotate(360deg)}}
.loading-full{min-height:60vh;display:grid;place-items:center}

/* ---------- новий перший екран ---------- */
.auth2{min-height:100vh;display:flex;flex-direction:column;padding:20px 16px 36px}
.auth-top{display:flex;justify-content:space-between;align-items:center}
.auth-grid{display:flex;flex-direction:column;gap:22px;margin-top:22px}
.hero-visual{position:relative;border-radius:24px;overflow:hidden;background:
  radial-gradient(120% 120% at 100% 0%, rgba(182,246,58,.18), transparent 55%),
  radial-gradient(120% 120% at 0% 100%, rgba(69,208,255,.16), transparent 55%),
  linear-gradient(160deg,#10171f,#0b1016);border:1px solid var(--line);padding:22px}
.hero-visual .tag{display:inline-block;font-size:12px;font-weight:800;color:var(--lime);
  background:rgba(182,246,58,.12);border:1px solid rgba(182,246,58,.28);padding:6px 12px;border-radius:999px;letter-spacing:.01em}
.hero-visual h1{font-size:30px;font-weight:850;line-height:1.06;margin-top:14px}
.hero-visual h1 .g{background:linear-gradient(120deg,var(--lime),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-visual .sub{color:var(--txt-2);margin-top:10px;font-size:14.5px}
.hero-art{margin-top:18px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.hero-art .b{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:16px;padding:12px 10px;text-align:center}
.hero-art .b .e{font-size:24px}
.hero-art .b .t{font-size:11.5px;color:var(--txt-2);margin-top:6px;font-weight:600;line-height:1.25}
.auth-card{background:var(--panel);border:1px solid var(--line);border-radius:24px;padding:22px}
.auth-card h2{font-size:20px}
.trust{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:16px}
.trust span{font-size:12px;color:var(--txt-3);display:inline-flex;gap:6px;align-items:center}

/* ---------- аватар з фото ---------- */
.avatar{overflow:hidden;position:relative}
.avatar img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.avatar.ring-on{box-shadow:0 0 0 2px var(--lime)}

/* ---------- профіль-панель (drawer) ---------- */
.scrim{position:fixed;inset:0;z-index:40;background:rgba(4,7,10,.62);
  opacity:0;pointer-events:none;transition:.25s}
.scrim.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:50;width:min(420px,88vw);
  background:var(--bg-2);border-left:1px solid var(--line);box-shadow:var(--shadow);
  transform:translateX(105%);transition:transform .28s cubic-bezier(.4,.9,.3,1);
  display:flex;flex-direction:column;padding-bottom:calc(16px + var(--safe-b))}
.drawer.open{transform:translateX(0)}
.drawer-head{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid var(--line)}
.drawer-body{overflow-y:auto;padding:18px;-webkit-overflow-scrolling:touch}
.iconbtn{width:38px;height:38px;border-radius:50%;border:1px solid var(--line-2);background:var(--panel-2);
  color:var(--txt);font-size:18px;display:grid;place-items:center;cursor:pointer}
.avatar-edit{position:relative;width:96px;height:96px;border-radius:50%;margin:4px auto 0;cursor:pointer;
  background:var(--panel-2);display:grid;place-items:center;overflow:hidden;border:1px solid var(--line-2)}
.avatar-edit img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.avatar-edit .cam{position:absolute;right:2px;bottom:2px;width:30px;height:30px;border-radius:50%;
  background:var(--lime);color:#0a0e13;display:grid;place-items:center;font-size:15px;border:3px solid var(--bg-2)}
.avatar-edit .ph{font-size:34px;font-weight:800;color:var(--lime)}
.klist .row{padding:12px 0;border-bottom:1px solid var(--line)}
.klist .row:last-child{border-bottom:none}
.lab-row{display:flex;align-items:center;gap:12px;background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:8px}
.lab-row:last-child{margin-bottom:0}
.food-row{display:flex;align-items:center;gap:12px;background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:8px 10px}
.food-thumb{width:44px;height:44px;flex:none;border-radius:10px;object-fit:cover;background:var(--bg);border:1px solid var(--line)}

/* вправи */
.ex-card{display:flex;gap:12px;background:var(--panel-2);border:1px solid var(--line);border-radius:14px;padding:10px}
.ex-img{width:96px;height:96px;flex:none;border-radius:10px;object-fit:cover;background:#fff}
.ex-info{flex:1;min-width:0}
.ex-weight{width:110px;padding:9px 10px;font-size:14px}
.ex-check{position:relative;display:inline-flex;cursor:pointer}
.ex-check input{position:absolute;opacity:0;width:24px;height:24px;margin:0;cursor:pointer}
.ex-check span{width:24px;height:24px;border-radius:7px;border:1.5px solid var(--line-2);display:block;transition:.15s}
.ex-check input:checked+span{background:var(--lime);border-color:var(--lime)}
.ex-check input:checked+span::after{content:"";position:absolute;left:8px;top:4px;width:6px;height:11px;border:solid #0a0e13;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
@media(max-width:400px){.ex-img{width:76px;height:76px}}

/* панель вибору вправ (bottom sheet) */
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:50;max-height:82vh;display:flex;flex-direction:column;
  background:var(--bg-2);border-top:1px solid var(--line);border-radius:20px 20px 0 0;box-shadow:var(--shadow);
  transform:translateY(4%);transition:transform .25s;padding-bottom:calc(10px + var(--safe-b))}
.sheet.open{transform:translateY(0)}
@media(min-width:820px){.sheet{max-width:600px;left:50%;transform:translateX(-50%);border-radius:20px 20px 0 0}}
.pk-groups{display:flex;gap:8px;overflow-x:auto;padding:10px 16px;flex:none}
.pk-groups .chip{white-space:nowrap}
.pick-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;overflow-y:auto;padding:4px 16px 16px}
.pick-ex{display:flex;flex-direction:column;gap:6px;background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:8px;cursor:pointer;text-align:center;color:var(--txt)}
.pick-ex img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:8px;background:#fff}
.pick-ex span{font-size:12px;line-height:1.25;font-weight:600}
.pick-ex:active{border-color:var(--lime)}

/* нагадування */
.rem-item{display:flex;align-items:center;gap:12px;width:100%;background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:12px;cursor:pointer;color:var(--txt);font-size:14px}
.rem-dot{width:10px;height:10px;border-radius:50%;flex:none;background:var(--lime)}
.rem-water{background:var(--water)}.rem-train{background:var(--cyan)}.rem-supp{background:var(--carb)}.rem-checkin{background:var(--lime)}.rem-photo{background:var(--amber)}

/* ---------- сторінка «План розвитку» ---------- */
.plan-hero{border-radius:20px;padding:22px;border:1px solid var(--line);
  background:radial-gradient(120% 120% at 100% 0%,rgba(182,246,58,.14),transparent 55%),
  radial-gradient(120% 120% at 0% 100%,rgba(69,208,255,.12),transparent 55%),linear-gradient(160deg,#10171f,#0b1016)}
.plan-hero h1{font-size:28px}
.plan-hero .sub{color:var(--txt-2);margin-top:8px;font-size:14.5px}
ul.check{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
ul.check li{position:relative;padding-left:30px;font-size:14.5px}
ul.check li::before{content:"";position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:50%;
  background:rgba(182,246,58,.15);border:1px solid rgba(182,246,58,.5)}
ul.check li::after{content:"";position:absolute;left:7px;top:6px;width:5px;height:9px;border:solid var(--lime);
  border-width:0 2px 2px 0;transform:rotate(45deg)}
.ph-row{display:flex;gap:10px;margin-top:8px;align-items:flex-start}
.ph-ic{flex:none;width:22px;height:22px;border-radius:7px;display:grid;place-items:center;font-size:11px;font-weight:800;color:#0a0e13}
.ph-n{background:var(--lime)}.ph-t{background:var(--cyan)}
.ph-ic svg{width:14px;height:14px}

/* ---------- таймлайн 3 місяці ---------- */
.timeline{position:relative;padding-left:6px}
.tl-item{display:flex;gap:14px;position:relative;padding-bottom:14px}
.tl-item:not(:last-child)::before{content:"";position:absolute;left:15px;top:32px;bottom:0;width:2px;background:var(--line-2)}
.tl-dot{width:32px;height:32px;flex:none;border-radius:50%;display:grid;place-items:center;font-weight:800;
  background:linear-gradient(135deg,var(--lime),var(--lime-d));color:#0a0e13;z-index:1}
.tl-body{flex:1;background:var(--panel-2);border:1px solid var(--line);border-radius:14px;padding:12px 14px}

/* ---------- ціль-картки з візуалом ---------- */
.goal-emo{width:46px;height:46px;flex:none;border-radius:13px;display:grid;place-items:center;font-size:24px;
  background:linear-gradient(140deg,rgba(182,246,58,.16),rgba(69,208,255,.10));border:1px solid var(--line)}
.goal-vis{width:54px;height:54px;flex:none;border-radius:14px;
  background:var(--panel-2);border:1px solid var(--line);display:grid;place-items:center}
.goal-vis .gv-ic{width:30px;height:30px;display:block}
.opt.on .goal-vis{border-color:var(--lime);background:rgba(182,246,58,.08)}

/* desktop */
@media(min-width:820px){
  .hero-h{font-size:44px}
  .up-grid{max-width:520px}
  .tabbar{max-width:560px;left:50%;transform:translateX(-50%);border-radius:18px 18px 0 0;border:1px solid var(--line)}
  .auth-grid{flex-direction:row;align-items:stretch;gap:28px}
  .hero-visual{flex:1.2;padding:36px}
  .hero-visual h1{font-size:40px}
  .auth-card{flex:1;align-self:center;max-width:440px}
}