:root {
  --brand: #f07903;
  --brand-dark: #9c4e01;
  --brand-soft: #fff3e6;
  --brand-soft2: #ffe4c7;
  --ink: #111113;
  --ink2: #3a3a3f;
  --muted: #8a8a91;
  --line: #ececf0;
  --bg: #ffffff;
  --bg2: #f5f5f7;
  --card: #ffffff;
  --p: #e5484d;   /* белки */
  --c: #f2b33d;   /* углеводы */
  --f: #3b82f6;   /* жиры */
  --fib: #22a06b; /* клетчатка */
  --water: #38a3f5;
  --ok: #22a06b;
  --warn: #f2b33d;
  --bad: #e5484d;
  --r: 20px;
  --safe-b: max(env(safe-area-inset-bottom), var(--tg-safe-area-inset-bottom, 0px));
  --safe-t: calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px)); /* полноэкранный режим: строка состояния + кнопки Telegram */
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); }
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px; line-height: 1.35; -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}
#app { max-width: 480px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; position: relative; }
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; }
input { font: inherit; color: inherit; }
.boot { height: 100vh; display: grid; place-items: center; }
.boot-logo { width: 64px; height: 64px; border-radius: 20px; background: var(--brand); color: #fff; font-weight: 800; font-size: 32px; display: grid; place-items: center; animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { transform: scale(.92); opacity: .7; } }

/* ---------- buttons ---------- */
.btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 56px; border-radius: 28px; font-weight: 650; font-size: 17px; transition: transform .12s, background .2s, opacity .2s; }
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--brand); color: #fff; box-shadow: 0 6px 18px rgba(240,121,3,.28); }
.btn-primary:disabled { background: #e6e6ea; color: #a5a5ab; box-shadow: none; }
.btn-dark { background: var(--ink); color: #fff; }
.btn-ghost { background: var(--bg2); color: var(--ink); }
.btn-link { height: 44px; color: var(--muted); font-weight: 500; font-size: 15px; }
.icon-btn { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--bg2); flex: none; }
.icon-btn svg { width: 20px; height: 20px; }

/* ---------- onboarding ---------- */
.ob { min-height: 100dvh; display: flex; flex-direction: column; background: var(--bg); }
.ob-top { display: flex; align-items: center; gap: 14px; padding: calc(12px + var(--safe-t)) 20px 6px; height: 64px; }
.ob-bar { flex: 1; height: 6px; border-radius: 3px; background: var(--bg2); overflow: hidden; }
.ob-bar i { display: block; height: 100%; background: var(--brand); border-radius: 3px; transition: width .4s cubic-bezier(.2,.8,.2,1); }
.ob-body { flex: 1; padding: 18px 22px 20px; display: flex; flex-direction: column; animation: slideIn .35s cubic-bezier(.2,.8,.2,1); }
.ob-body.back { animation-name: slideInBack; }
@keyframes slideIn { from { opacity: 0; transform: translateX(24px); } }
@keyframes slideInBack { from { opacity: 0; transform: translateX(-24px); } }
.ob-title { font-size: 30px; line-height: 1.12; font-weight: 750; letter-spacing: -.02em; margin: 0 0 10px; }
.ob-sub { color: var(--muted); font-size: 16px; margin: 0 0 26px; }
.ob-foot { padding: 12px 22px calc(18px + var(--safe-b)); background: linear-gradient(transparent, #fff 30%); position: sticky; bottom: 0; }
.center-col { flex: 1; display: flex; flex-direction: column; justify-content: center; }

.opts { display: flex; flex-direction: column; gap: 12px; }
.opt { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 16px 18px; border-radius: 18px; background: var(--bg2); border: 2px solid transparent; transition: background .2s, border-color .2s, transform .1s; }
.opt:active { transform: scale(.985); }
.opt .ico { width: 44px; height: 44px; border-radius: 14px; background: #fff; display: grid; place-items: center; font-size: 22px; flex: none; }
.opt .t { font-weight: 620; font-size: 17px; }
.opt .d { color: var(--muted); font-size: 14px; margin-top: 2px; }
.opt .chk { margin-left: auto; width: 24px; height: 24px; border-radius: 8px; border: 2px solid #d4d4d9; flex: none; display: grid; place-items: center; }
.opt.sel { background: var(--brand-soft); border-color: var(--brand); }
.opt.sel .chk { background: var(--brand); border-color: var(--brand); }
.opt.sel .chk::after { content: ""; width: 10px; height: 6px; border: 2.5px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px,-1px); }
.opt .radio { border-radius: 50%; }
.opts.row { flex-direction: row; }
.opts.row .opt { flex-direction: column; justify-content: center; text-align: center; padding: 22px 10px; gap: 8px; }
.badge { display: inline-block; padding: 3px 9px; border-radius: 10px; background: var(--brand); color: #fff; font-size: 12px; font-weight: 700; }

/* wheel picker */
.wheels { display: flex; gap: 8px; position: relative; height: 264px; margin-top: 10px; }
.wheels::before { content: ""; position: absolute; left: 0; right: 0; top: 110px; height: 44px; border-radius: 14px; background: var(--bg2); pointer-events: none; }
.wheel { flex: 1; overflow-y: scroll; scroll-snap-type: y mandatory; scrollbar-width: none; position: relative; z-index: 1; padding: 110px 0;
  -webkit-mask-image: linear-gradient(transparent, #000 35%, #000 65%, transparent); mask-image: linear-gradient(transparent, #000 35%, #000 65%, transparent); }
.wheel::-webkit-scrollbar { display: none; }
.wheel div { height: 44px; line-height: 44px; text-align: center; scroll-snap-align: center; font-size: 19px; color: #b5b5bb; transition: color .15s, font-size .15s; }
.wheel div.on { color: var(--ink); font-weight: 650; font-size: 22px; }

/* ruler */
.big-val { text-align: center; font-size: 56px; font-weight: 780; letter-spacing: -.03em; margin: 18px 0 4px; font-variant-numeric: tabular-nums; }
.big-val small { font-size: 22px; color: var(--muted); font-weight: 600; margin-left: 6px; }
.ruler-wrap { position: relative; margin: 18px -22px 0; }
.ruler { overflow-x: scroll; scrollbar-width: none; height: 86px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent); mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent); }
.ruler::-webkit-scrollbar { display: none; }
.ruler-in { display: flex; width: max-content; height: 100%; }
.ruler-pad { flex: none; }
.ticks { position: relative; flex: none; height: 100%;
  background:
    linear-gradient(90deg, #7c7c84 2px, transparent 2px) -1px 0 / 80px 40px repeat-x,
    linear-gradient(90deg, #7c7c84 1.5px, transparent 1.5px) -0.75px 0 / 40px 28px repeat-x,
    linear-gradient(90deg, #c9c9cf 1px, transparent 1px) -0.5px 0 / 8px 18px repeat-x; }
.ticks span { position: absolute; top: 50px; transform: translateX(-50%); font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ruler-needle { position: absolute; left: 50%; top: -6px; width: 4px; height: 54px; margin-left: -2px; background: var(--brand); border-radius: 2px; pointer-events: none; }
.ruler-needle::before { content: ""; position: absolute; top: -6px; left: -4px; border: 6px solid transparent; border-top-color: var(--brand); }

.hint { display: flex; gap: 12px; align-items: flex-start; background: var(--bg2); border-radius: 18px; padding: 14px 16px; margin-top: 22px; font-size: 15px; color: var(--ink2); }
.hint b { color: var(--ink); }
.hint .hi { font-size: 20px; line-height: 1; }
.hint.orange { background: var(--brand-soft); }
.delta-pill { display: inline-flex; margin: 0 auto; padding: 6px 14px; border-radius: 14px; background: var(--brand-soft); color: var(--brand-dark); font-weight: 650; font-size: 15px; }

/* interstitial */
.inter-title { font-size: 32px; line-height: 1.12; font-weight: 780; letter-spacing: -.02em; }
.inter-title em { font-style: normal; color: var(--brand); }
.chart-card { background: var(--bg2); border-radius: 24px; padding: 18px 16px 12px; margin: 22px 0 16px; }
.chart-card svg { width: 100%; height: auto; display: block; }
.legend { display: flex; gap: 16px; font-size: 13px; color: var(--muted); margin-top: 8px; padding-left: 4px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.src { color: var(--muted); font-size: 12px; margin-top: 10px; }

/* welcome */
.welcome { min-height: 100dvh; display: flex; flex-direction: column; background: #fff; }
.hero { position: relative; margin: calc(14px + var(--safe-t)) 16px 0; border-radius: 30px; overflow: hidden; height: 430px; background: #222; }
.hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.55)); }
.scan-frame { position: absolute; inset: 70px 60px 120px; border-radius: 26px; z-index: 1;
  background:
    linear-gradient(#fff,#fff) 0 0/34px 4px no-repeat, linear-gradient(#fff,#fff) 0 0/4px 34px no-repeat,
    linear-gradient(#fff,#fff) 100% 0/34px 4px no-repeat, linear-gradient(#fff,#fff) 100% 0/4px 34px no-repeat,
    linear-gradient(#fff,#fff) 0 100%/34px 4px no-repeat, linear-gradient(#fff,#fff) 0 100%/4px 34px no-repeat,
    linear-gradient(#fff,#fff) 100% 100%/34px 4px no-repeat, linear-gradient(#fff,#fff) 100% 100%/4px 34px no-repeat; }
.chip { position: absolute; z-index: 2; background: rgba(255,255,255,.95); border-radius: 16px; padding: 8px 12px; font-size: 13px; font-weight: 650; box-shadow: 0 8px 24px rgba(0,0,0,.15); display: flex; align-items: center; gap: 7px; animation: float 3s ease-in-out infinite; }
.chip i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.chip b { font-size: 15px; }
@keyframes float { 50% { transform: translateY(-5px); } }
.hero-kcal { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 2; background: #fff; border-radius: 20px; padding: 12px 14px; display: flex; align-items: center; gap: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.2); }
.hero-kcal .fl { width: 40px; height: 40px; border-radius: 12px; background: var(--brand-soft); display: grid; place-items: center; font-size: 20px; }
.welcome h1 { font-size: 32px; line-height: 1.1; letter-spacing: -.025em; margin: 26px 22px 10px; font-weight: 800; }
.welcome h1 em { font-style: normal; color: var(--brand); }
.welcome p { margin: 0 22px; color: var(--muted); }

/* commitment */
.commit { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }
.promise { background: var(--bg2); border-radius: 22px; padding: 20px; font-size: 17px; line-height: 1.45; color: var(--ink2); text-align: left; margin: 6px 0 0; width: 100%; }
.promise b { color: var(--ink); }
.hold { position: relative; width: 168px; height: 168px; margin: 34px auto 14px; user-select: none; -webkit-user-select: none; touch-action: none; }
.hold svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.hold .core { position: absolute; inset: 16px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; transition: transform .2s, background .3s; box-shadow: 0 14px 34px rgba(0,0,0,.18); }
.hold.on .core { transform: scale(.93); }
.hold.done .core { background: var(--brand); }
.hold .core svg { position: static; transform: none; width: 54px; height: 54px; }
.hold-label { font-weight: 650; color: var(--ink2); }
.hold-label small { display: block; color: var(--muted); font-weight: 500; margin-top: 4px; font-size: 14px; }

/* loading plan */
.load-num { font-size: 72px; font-weight: 800; letter-spacing: -.04em; text-align: center; margin-top: 30px; font-variant-numeric: tabular-nums; }
.load-bar { height: 10px; border-radius: 5px; background: var(--bg2); overflow: hidden; margin: 10px 10px 34px; }
.load-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ffb066, var(--brand)); border-radius: 5px; transition: width .2s linear; }
.checklist { background: var(--bg2); border-radius: 22px; padding: 8px 18px; }
.check-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; color: #b5b5bb; font-weight: 550; transition: color .3s; }
.check-row + .check-row { border-top: 1px solid var(--line); }
.check-row .cb { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #d4d4d9; display: grid; place-items: center; flex: none; transition: all .3s; }
.check-row.on { color: var(--ink); }
.check-row.on .cb { background: var(--brand); border-color: var(--brand); }
.check-row.on .cb::after { content: ""; width: 9px; height: 5px; border: 2.5px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px,-1px); }
.check-row.cur .cb { border-color: var(--brand); border-top-color: transparent; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* plan */
.plan-hero { text-align: center; padding: 6px 0 4px; }
.plan-hero .ok { width: 56px; height: 56px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; margin: 0 auto 14px; }
.goal-pill { display: inline-block; margin-top: 12px; padding: 10px 18px; border-radius: 18px; background: var(--brand-soft); color: var(--brand-dark); font-weight: 700; }
.card { background: var(--card); border-radius: var(--r); padding: 18px; }
.ob .card, .soft { background: var(--bg2); }
.sec-h { font-size: 20px; font-weight: 750; margin: 26px 0 12px; letter-spacing: -.01em; }
.sec-h small { display: block; font-size: 14px; color: var(--muted); font-weight: 500; margin-top: 2px; }
.macro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mcell { background: var(--bg2); border-radius: 18px; padding: 14px; position: relative; display: flex; align-items: center; gap: 12px; text-align: left; }
.ob .mcell, .sheet-body .mcell { background: var(--bg2); }
.mcell .lbl { font-size: 13px; color: var(--muted); font-weight: 550; }
.mcell .v { font-size: 22px; font-weight: 750; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.mcell .v small { font-size: 14px; color: var(--muted); font-weight: 600; margin-left: 2px; }
.mcell .pen { position: absolute; right: 10px; top: 10px; color: #b5b5bb; }
.mcell .pen svg { width: 16px; height: 16px; }
.ring { flex: none; }
.ring text { font-weight: 700; }
.mini-list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.mini-list li { display: flex; gap: 12px; align-items: center; background: var(--bg2); border-radius: 16px; padding: 14px; font-size: 15px; }
.mini-list li .e { font-size: 22px; }
.disclaimer { font-size: 12.5px; color: var(--muted); text-align: center; margin: 24px 6px 4px; line-height: 1.45; }

/* paywall */
.pw { min-height: 100dvh; display: flex; flex-direction: column; background: #fff; }
.pw-top { display: flex; justify-content: space-between; align-items: center; padding: calc(12px + var(--safe-t)) 16px 0; }
.pw-body { padding: 4px 22px 20px; flex: 1; }
.pw h1 { font-size: 30px; line-height: 1.12; letter-spacing: -.02em; margin: 10px 0 22px; font-weight: 800; }
.pw h1 em { font-style: normal; color: var(--brand); }
.timeline { position: relative; padding-left: 4px; }
.tl-row { display: flex; gap: 14px; position: relative; padding-bottom: 20px; }
.tl-row:last-child { padding-bottom: 6px; }
.tl-dot { width: 40px; height: 40px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; flex: none; z-index: 1; }
.tl-dot svg { width: 20px; height: 20px; }
.tl-row:not(:last-child)::before { content: ""; position: absolute; left: 18px; top: 36px; bottom: -2px; width: 5px; background: linear-gradient(var(--brand), var(--brand-soft2)); border-radius: 3px; }
.tl-row:last-child .tl-dot { background: var(--ink); }
.tl-row .t { font-weight: 700; }
.tl-row .d { color: var(--muted); font-size: 14.5px; margin-top: 2px; }
.plans { display: flex; flex-wrap: wrap; gap: 14px 10px; margin: 24px 0 14px; }
.plan-opt.wide { flex-basis: 100%; }
.plan-opt { flex: 1; border: 2px solid var(--line); border-radius: 20px; padding: 16px 14px; text-align: left; position: relative; background: #fff; transition: border-color .2s, background .2s; }
.plan-opt.sel { border-color: var(--ink); background: #fafafa; }
.plan-opt .n { font-weight: 650; color: var(--ink2); }
.plan-opt .p { font-size: 22px; font-weight: 800; margin-top: 4px; letter-spacing: -.01em; }
.plan-opt .pm { color: var(--muted); font-size: 13px; margin-top: 2px; }
.plan-opt .badge { position: absolute; top: -11px; right: 12px; background: var(--ink); }
.plan-opt .rb { position: absolute; top: 14px; right: 14px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #d4d4d9; }
.plan-opt.sel .rb { border: 7px solid var(--ink); }
.nopay { text-align: center; font-weight: 600; color: var(--ink2); font-size: 15px; margin: 6px 0 2px; }
.nopay svg { width: 16px; height: 16px; vertical-align: -3px; color: var(--ok); margin-right: 4px; }
.faq { background: var(--bg2); border-radius: 18px; padding: 0 16px; margin-top: 18px; }
.faq summary { list-style: none; padding: 16px 0; font-weight: 650; display: flex; justify-content: space-between; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--muted); font-size: 20px; line-height: 1; }
.faq[open] summary::after { content: "−"; }
.faq p { margin: 0 0 16px; color: var(--ink2); font-size: 14.5px; }
.legal { font-size: 12px; color: var(--muted); text-align: center; margin-top: 14px; }

.down { min-height: 100dvh; display: flex; flex-direction: column; background: linear-gradient(180deg, #fff3e6 0%, #fff 55%); }
.ruslan-big { width: 96px; height: 96px; border-radius: 50%; background: linear-gradient(145deg, #ff9a33, var(--brand-dark)); color: #fff; font-size: 44px; font-weight: 800; display: grid; place-items: center; margin: 20px auto 16px; box-shadow: 0 12px 30px rgba(240,121,3,.35); border: 4px solid #fff; }
.discount { font-size: 76px; font-weight: 850; letter-spacing: -.04em; color: var(--brand); line-height: 1; text-align: center; }
.price-old { text-decoration: line-through; color: var(--muted); font-weight: 600; }
.timer { display: inline-flex; gap: 6px; align-items: center; background: var(--ink); color: #fff; border-radius: 12px; padding: 7px 12px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- app shell ---------- */
.shell { min-height: 100dvh; background: var(--bg2); padding-bottom: calc(150px + var(--safe-b)); }
.page { padding: calc(14px + var(--safe-t)) 16px 20px; animation: fade .25s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } }
.topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 22px; letter-spacing: -.02em; }
.brand .lg { width: 30px; height: 30px; border-radius: 9px; background: var(--brand); color: #fff; display: grid; place-items: center; font-size: 17px; }
.streak { display: flex; align-items: center; gap: 5px; background: #fff; border-radius: 18px; padding: 7px 12px 7px 9px; font-weight: 750; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.streak svg { width: 20px; height: 20px; }
.page-title { font-size: 30px; font-weight: 800; letter-spacing: -.02em; margin: 2px 0 16px; }

.week { display: flex; justify-content: space-between; margin: 0 -4px 14px; }
.week-nav { display: flex; align-items: center; justify-content: space-between; margin: -4px 0 6px; }
.week-nav span { font-size: 13.5px; font-weight: 650; color: var(--ink2); }
.week-nav .icon-btn { width: 32px; height: 32px; background: #fff; color: var(--ink); border: 0; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.week-nav .icon-btn svg { width: 16px; height: 16px; }
.week-nav .icon-btn[disabled] { opacity: .35; }
.wd { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 4px 8px; border-radius: 16px; width: 48px; }
.wd .l { font-size: 12px; color: var(--muted); font-weight: 600; }
.wd .c { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 700; border: 2px dashed #cfcfd5; }
.wd.ok .c { border: 2.5px solid var(--ok); }
.wd.mid .c { border: 2.5px solid var(--brand); }
.wd.bad .c { border: 2.5px solid var(--bad); }
.wd.fut .c { border-color: transparent; color: #c5c5ca; }
.wd.sel { background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.wd.sel .l { color: var(--ink); }

.kcal-card { display: flex; align-items: center; justify-content: space-between; padding: 20px 20px 20px 22px; box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.kcal-card .num { font-size: 44px; font-weight: 800; letter-spacing: -.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.kcal-card .lab { color: var(--ink2); font-weight: 600; margin-top: 6px; }
.kcal-card .sub { color: var(--muted); font-size: 13.5px; margin-top: 10px; }
.kcal-card.over .num { color: var(--bad); }
.macros3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px; }
.m3 { background: #fff; border-radius: 18px; padding: 14px 12px 12px; box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.m3 .v { font-size: 20px; font-weight: 780; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.m3 .v small { font-size: 13px; color: var(--muted); font-weight: 600; }
.m3 .lab { font-size: 12.5px; color: var(--muted); font-weight: 550; margin: 2px 0 10px; }
.m3 .ring { display: block; margin: 0 auto; }

.tip { display: flex; gap: 12px; background: #fff; border-radius: 20px; padding: 14px 14px 14px 14px; margin-top: 10px; border: 1.5px solid var(--brand-soft2); position: relative; animation: fade .35s ease; }
.ava { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(145deg, #ff9a33, var(--brand-dark)); color: #fff; font-weight: 800; font-size: 19px; display: grid; place-items: center; flex: none; }
.ava.sm { width: 34px; height: 34px; font-size: 15px; }
.tip .h { font-weight: 700; font-size: 14px; color: var(--brand-dark); margin-bottom: 3px; }
.tip .tx { font-size: 14.5px; color: var(--ink2); line-height: 1.4; padding-right: 14px; }
.tip .x { position: absolute; right: 8px; top: 8px; width: 26px; height: 26px; color: #b5b5bb; display: grid; place-items: center; }
.draft { display: inline-block; margin-left: 6px; font-size: 10px; font-weight: 700; color: var(--muted); border: 1px solid #d4d4d9; border-radius: 6px; padding: 0 4px; vertical-align: 1px; }

.sec-row { display: flex; justify-content: space-between; align-items: baseline; margin: 22px 4px 10px; }
.sec-row h3 { margin: 0; font-size: 19px; font-weight: 760; letter-spacing: -.01em; }
.sec-row span { color: var(--muted); font-size: 14px; }
.meal { background: #fff; border-radius: 20px; padding: 14px 14px 14px 16px; margin-bottom: 10px; box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.meal-h { display: flex; align-items: center; gap: 12px; }
.meal-h .mi { width: 42px; height: 42px; border-radius: 14px; background: var(--bg2); display: grid; place-items: center; font-size: 21px; flex: none; }
.meal-h .mt { font-weight: 680; }
.meal-h .mk { color: var(--muted); font-size: 13.5px; margin-top: 1px; font-variant-numeric: tabular-nums; }
.meal-h .mk b { color: var(--ink); font-weight: 650; }
.meal-h .add { margin-left: auto; width: 36px; height: 36px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; }
.meal-h .add svg { width: 18px; height: 18px; }
.mbar { height: 4px; border-radius: 2px; background: var(--bg2); margin: 12px 0 0; overflow: hidden; }
.mbar i { display: block; height: 100%; background: var(--brand); border-radius: 2px; }
.mbar i.over { background: var(--bad); }
.item { display: flex; align-items: center; gap: 12px; padding: 10px 0 0; margin-top: 10px; border-top: 1px solid var(--line); width: 100%; text-align: left; }
.item img, .item .ph { width: 52px; height: 52px; border-radius: 14px; object-fit: cover; flex: none; background: var(--bg2); display: grid; place-items: center; font-size: 22px; }
.item .in { flex: 1; min-width: 0; }
.item .nm { font-weight: 620; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item .mc { font-size: 12.5px; color: var(--muted); margin-top: 3px; display: flex; gap: 9px; }
.item .mc i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 3px; vertical-align: 0; }
.item .kc { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

.water { background: #fff; border-radius: 20px; padding: 16px; box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.water-h { display: flex; justify-content: space-between; align-items: center; }
.water-h .t { font-weight: 680; display: flex; gap: 8px; align-items: center; }
.water-h .v { color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; }
.water-h .v b { color: var(--water); }
.glasses { display: flex; justify-content: space-between; margin-top: 14px; }
.glass { width: 34px; height: 44px; position: relative; }
.glass svg { width: 100%; height: 100%; }

.tabbar { position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; width: 100%; max-width: 480px; background: rgba(255,255,255,.94); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid var(--line); display: flex; padding: 8px 10px calc(8px + var(--safe-b)); z-index: 20; }
.tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 600; color: #a5a5ab; padding: 4px 0; }
.tab svg { width: 24px; height: 24px; }
.tab.on { color: var(--ink); }
.fab { position: fixed; z-index: 21; right: max(18px, calc(50% - 222px)); bottom: calc(84px + var(--safe-b)); width: 64px; height: 64px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; box-shadow: 0 10px 26px rgba(240,121,3,.45); transition: transform .15s; }
.fab:active { transform: scale(.92); }
.fab svg { width: 30px; height: 30px; }

/* sheets & overlays */
#overlay:empty { display: none; }
.backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.42); z-index: 50; animation: bd .2s ease; }
@keyframes bd { from { opacity: 0; } }
.sheet { position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; width: 100%; max-width: 480px; background: #fff; border-radius: 28px 28px 0 0; z-index: 51; padding: 10px 20px calc(20px + var(--safe-b)); animation: up .3s cubic-bezier(.2,.8,.2,1); }
@keyframes up { from { transform: translate(-50%, 100%); } }
.grab { width: 40px; height: 5px; border-radius: 3px; background: #dcdce0; margin: 0 auto 16px; }
.sheet h3 { margin: 0 0 4px; font-size: 22px; font-weight: 760; }
.sheet .sub { color: var(--muted); margin-bottom: 18px; font-size: 15px; }
.src-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.src-btn { background: var(--bg2); border-radius: 20px; padding: 20px 12px; display: flex; flex-direction: column; align-items: center; gap: 10px; font-weight: 650; }
.src-btn .si { width: 52px; height: 52px; border-radius: 16px; background: var(--brand); color: #fff; display: grid; place-items: center; }
.src-btn.alt .si { background: var(--ink); }
.src-btn svg { width: 26px; height: 26px; }
.edit-input { width: 100%; height: 64px; border-radius: 18px; border: 2px solid var(--line); background: var(--bg2); font-size: 30px; font-weight: 750; text-align: center; outline: none; margin-bottom: 14px; }
.edit-input:focus { border-color: var(--brand); background: #fff; }

.full { position: fixed; inset: 0; z-index: 40; background: #fff; overflow-y: auto; max-width: 480px; margin: 0 auto; animation: fade .25s ease; }

/* analyzing */
.anz { min-height: 100%; display: flex; flex-direction: column; align-items: center; padding: calc(40px + var(--safe-t)) 24px; background: #fff; }
.anz-photo { position: relative; width: 100%; aspect-ratio: 1; border-radius: 30px; overflow: hidden; background: #222; }
.anz-photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9); }
.anz-photo .scan { position: absolute; left: 0; right: 0; height: 120px; background: linear-gradient(180deg, transparent, rgba(240,121,3,.0) 20%, rgba(240,121,3,.35) 92%, #fff 100%); animation: scan 1.8s ease-in-out infinite alternate; }
@keyframes scan { from { top: -120px; } to { top: 100%; } }
.anz-photo .dots i { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 5px rgba(255,255,255,.3); animation: ping 1.6s infinite; }
@keyframes ping { 50% { transform: scale(1.4); opacity: .6; } }
.anz h2 { margin: 28px 0 6px; font-size: 24px; font-weight: 760; }
.anz p { margin: 0; color: var(--muted); min-height: 22px; }
.anz .load-bar { width: 100%; margin: 24px 0 0; }

/* dish card */
.dish-photo { position: relative; height: 340px; background: #222; }
.dish-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dish-photo .ph-empty { width: 100%; height: 100%; display: grid; place-items: center; font-size: 80px; background: var(--bg2); }
.dish-photo .bar { position: absolute; top: calc(12px + var(--safe-t)); left: 16px; right: 16px; display: flex; justify-content: space-between; }
.dish-photo .bar .icon-btn { background: rgba(0,0,0,.35); color: #fff; backdrop-filter: blur(8px); }
.sheet-body { position: relative; margin-top: -28px; background: #fff; border-radius: 28px 28px 0 0; padding: 22px 18px calc(110px + var(--safe-b)); }
.dish-meta { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 13.5px; font-weight: 550; }
.hs { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 12px; font-weight: 700; font-size: 13.5px; }
.dish-name-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 10px 0 16px; }
.dish-name { font-size: 25px; font-weight: 780; line-height: 1.15; letter-spacing: -.02em; }
.portion { display: flex; align-items: center; border: 1.5px solid var(--line); border-radius: 22px; height: 42px; flex: none; }
.portion button { width: 38px; height: 100%; font-size: 22px; font-weight: 500; color: var(--ink2); }
.portion span { min-width: 34px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.kcal-big { display: flex; align-items: center; gap: 14px; background: var(--bg2); border-radius: 20px; padding: 14px 16px; }
.kcal-big .fl { width: 46px; height: 46px; border-radius: 14px; background: #fff; display: grid; place-items: center; }
.kcal-big .fl svg { width: 24px; height: 24px; }
.kcal-big .lab { color: var(--muted); font-size: 13.5px; font-weight: 550; }
.kcal-big .v { font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.macro4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 8px; }
.m4 { background: var(--bg2); border-radius: 16px; padding: 10px 10px 11px; }
.m4 .lab { font-size: 12px; color: var(--muted); font-weight: 600; display: flex; align-items: center; gap: 5px; }
.m4 .lab i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.m4 .v { font-size: 18px; font-weight: 760; margin-top: 3px; font-variant-numeric: tabular-nums; }
.m4 .v small { font-size: 12px; color: var(--muted); font-weight: 600; }
.health { display: flex; align-items: center; gap: 14px; background: var(--bg2); border-radius: 20px; padding: 14px 16px; margin-top: 8px; }
.health .hi { width: 46px; height: 46px; border-radius: 14px; background: #fff; display: grid; place-items: center; font-size: 22px; flex: none; }
.health .hb { flex: 1; }
.health .ht { display: flex; justify-content: space-between; font-weight: 650; font-size: 15px; }
.health .track { height: 7px; border-radius: 4px; background: #e3e3e8; margin-top: 8px; overflow: hidden; }
.health .track i { display: block; height: 100%; border-radius: 4px; }
.ings { background: var(--bg2); border-radius: 20px; padding: 2px 16px; }
.ing { display: flex; align-items: center; gap: 10px; padding: 12px 0; }
.ing + .ing { border-top: 1px solid #e6e6ea; }
.ing .nm { flex: 1; font-weight: 580; font-size: 15px; }
.ing .mc { display: flex; gap: 9px; margin-top: 3px; font-size: 12.5px; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.ing .mc i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 3px; }
.ing .kc { color: var(--muted); font-size: 13.5px; font-variant-numeric: tabular-nums; width: 64px; text-align: right; }
.ing input { width: 64px; height: 34px; border-radius: 10px; border: 1.5px solid #dedee3; background: #fff; text-align: right; padding: 0 8px; font-weight: 650; font-size: 15px; outline: none; font-variant-numeric: tabular-nums; }
.ing input:focus { border-color: var(--brand); }
.ing .g { color: var(--muted); font-size: 13px; margin-left: -6px; }
.ing .rm { color: #c0c0c6; width: 24px; height: 24px; display: grid; place-items: center; }
.ai-fix { display: flex; gap: 8px; margin-top: 10px; }
.ai-fix input { flex: 1; height: 50px; border-radius: 16px; border: 1.5px solid var(--line); background: #fff; padding: 0 14px; outline: none; font-size: 15px; }
.ai-fix input:focus { border-color: var(--brand); }
.ai-fix button { width: 50px; height: 50px; border-radius: 16px; background: var(--ink); color: #fff; display: grid; place-items: center; flex: none; }
.ai-fix button svg { width: 20px; height: 20px; }
.ai-fix button.busy svg { animation: spin .8s linear infinite; }
.ruslan { display: flex; gap: 12px; background: var(--brand-soft); border-radius: 20px; padding: 16px; margin-top: 18px; }
.ruslan .h { font-weight: 720; font-size: 14px; color: var(--brand-dark); margin-bottom: 4px; }
.ruslan .tx { font-size: 15px; line-height: 1.42; color: var(--ink2); }
.meal-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -18px; padding: 0 18px; }
.meal-chips button { flex: none; height: 38px; padding: 0 14px; border-radius: 19px; background: var(--bg2); font-weight: 620; font-size: 14.5px; }
.meal-chips button.on { background: var(--ink); color: #fff; }
.bottom-cta { position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; width: 100%; max-width: 480px; padding: 12px 18px calc(16px + var(--safe-b)); background: linear-gradient(transparent, #fff 28%); z-index: 45; display: flex; gap: 10px; }
.bottom-cta .btn-ghost { width: 56px; flex: none; color: var(--bad); }
.src-tag { font-size: 11.5px; color: var(--muted); text-align: center; margin-top: 16px; }

/* progress */
.stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat { background: #fff; border-radius: 20px; padding: 16px; box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.stat .lab { color: var(--muted); font-size: 13.5px; font-weight: 550; }
.stat .v { font-size: 30px; font-weight: 800; letter-spacing: -.02em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.stat .v small { font-size: 15px; color: var(--muted); font-weight: 600; margin-left: 3px; }
.stat .s { color: var(--muted); font-size: 13px; margin-top: 4px; }
.prog-bar { height: 8px; border-radius: 4px; background: var(--bg2); margin-top: 12px; overflow: hidden; }
.prog-bar i { display: block; height: 100%; background: var(--brand); border-radius: 4px; }
.wcard { background: #fff; border-radius: 22px; padding: 18px 16px 12px; margin-top: 10px; box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.wcard-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.wcard-h h4 { margin: 0; font-size: 17px; font-weight: 720; }
.seg { display: flex; background: var(--bg2); border-radius: 12px; padding: 3px; }
.seg button { padding: 6px 11px; border-radius: 9px; font-size: 13px; font-weight: 650; color: var(--muted); }
.seg button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.wcard svg { width: 100%; height: auto; display: block; }
.flames { display: flex; justify-content: space-between; margin-top: 14px; }
.flames div { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); font-weight: 600; }
.flames svg { width: 28px; height: 28px; }
.bmi-scale { position: relative; height: 10px; border-radius: 5px; margin: 18px 0 8px; background: linear-gradient(90deg, #5aa9f7 0%, #5aa9f7 18%, #22a06b 18%, #22a06b 46%, #f2b33d 46%, #f2b33d 70%, #e5484d 70%); }
.bmi-scale b { position: absolute; top: -5px; width: 4px; height: 20px; background: var(--ink); border-radius: 2px; margin-left: -2px; box-shadow: 0 0 0 2px #fff; }
.bmi-leg { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); }

/* profile */
.prof-h { display: flex; align-items: center; gap: 14px; background: #fff; border-radius: 22px; padding: 16px; }
.prof-h .ava { width: 58px; height: 58px; font-size: 24px; }
.prof-h .n { font-weight: 750; font-size: 19px; }
.prof-h .u { color: var(--muted); font-size: 14px; }
.list { background: #fff; border-radius: 20px; overflow: hidden; }
.li { display: flex; align-items: center; gap: 12px; padding: 15px 16px; width: 100%; text-align: left; }
.li + .li { border-top: 1px solid var(--line); }
.li .k { flex: 1; font-weight: 560; }
.li .val { color: var(--muted); font-variant-numeric: tabular-nums; }
.li .chev { color: #c5c5ca; }
.li .chev svg { width: 16px; height: 16px; display: block; }
.li .dot { width: 10px; height: 10px; border-radius: 50%; }
.li.danger .k { color: var(--bad); }
.pro-banner { display: flex; align-items: center; gap: 14px; background: var(--ink); color: #fff; border-radius: 22px; padding: 16px 18px; margin-top: 12px; width: 100%; text-align: left; }
.pro-banner .pi { width: 44px; height: 44px; border-radius: 14px; background: var(--brand); display: grid; place-items: center; font-weight: 800; }
.pro-banner .t { font-weight: 720; }
.pro-banner .d { color: #b9b9c0; font-size: 13.5px; margin-top: 2px; }

/* toasts */
#toasts { position: fixed; top: calc(12px + var(--safe-t)); left: 50%; transform: translateX(-50%); width: calc(100% - 24px); max-width: 456px; z-index: 100; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast { background: var(--ink); color: #fff; border-radius: 16px; padding: 12px 16px; font-weight: 600; font-size: 14.5px; box-shadow: 0 10px 30px rgba(0,0,0,.2); animation: tin .3s cubic-bezier(.2,.8,.2,1); pointer-events: auto; }
.toast.tip-toast { background: #fff; color: var(--ink); display: flex; gap: 12px; align-items: flex-start; border: 1.5px solid var(--brand-soft2); }
.toast.tip-toast .h { color: var(--brand-dark); font-weight: 720; font-size: 13.5px; margin-bottom: 2px; }
.toast.tip-toast .tx { font-weight: 500; color: var(--ink2); line-height: 1.38; }
.toast.out { animation: tout .3s ease forwards; }
@keyframes tin { from { opacity: 0; transform: translateY(-16px); } }
@keyframes tout { to { opacity: 0; transform: translateY(-16px); } }

.denied { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px; }
.denied h1 { font-size: 26px; margin: 18px 0 8px; }
.denied p { color: var(--muted); margin: 0; }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 90; overflow: hidden; }
.confetti i { position: absolute; top: -10px; width: 8px; height: 14px; border-radius: 2px; animation: fall 1.6s ease-in forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(540deg); opacity: .8; } }

/* встроенная камера */
.cam{position:fixed;inset:0;background:#000;z-index:60;display:flex;flex-direction:column}
.cam video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.cam-frame{display:none}
.cam-top{position:relative;display:flex;align-items:center;justify-content:space-between;padding:calc(14px + env(safe-area-inset-top)) 16px 0;color:#fff;font-weight:600;font-size:16px}
.cam-top i{width:40px}
.cam-x{width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.18);color:#fff;font-size:18px}
.cam-msg{position:relative;margin:auto 24px 0;color:#fff;text-align:center;font-size:15px;line-height:1.4}
.cam-bar{position:relative;margin-top:auto;display:flex;align-items:center;justify-content:space-around;padding:20px 24px calc(28px + env(safe-area-inset-bottom))}
.cam-shot{width:76px;height:76px;border-radius:50%;background:#fff;border:6px solid rgba(255,255,255,.35);background-clip:padding-box}
.cam-shot:active{transform:scale(.92)}
.cam-side{width:52px;height:52px;border-radius:50%;border:0;background:rgba(255,255,255,.18);color:#fff;display:flex;align-items:center;justify-content:center}
.cam-side svg{width:24px;height:24px}

.cam-shot.busy{opacity:.5;transform:scale(.9)}
.cam-flash{position:absolute;inset:0;background:#fff;opacity:.85;pointer-events:none;animation:camflash .35s ease-out forwards}
@keyframes camflash{to{opacity:0}}

/* перетаскивание записей между приёмами */
.item[data-drag] { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.item.dragging { opacity: .35; }
.sw { position: relative; overflow: hidden; margin-top: 10px; border-top: 1px solid var(--line); }
.sw > .item { margin-top: 0; border-top: 0; position: relative; z-index: 1; background: #fff; }
.sw:not(.on) .sw-act { visibility: hidden; }
.sw-act { position: absolute; right: 0; top: 10px; bottom: 0; width: 164px; display: flex; gap: 6px; padding-left: 6px; }
.sw-act button { flex: 1; border-radius: 14px; background: var(--bg2); color: var(--ink); font-size: 12px; font-weight: 650; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.sw-act button svg { width: 19px; height: 19px; }
.sw-act .del { background: var(--bad); color: #fff; }
.undo-toast { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.undo-toast button { color: var(--brand); font-weight: 750; font-size: 14.5px; flex: none; }
.drag-ghost { position: fixed; z-index: 80; margin: 0; padding: 10px 14px; border-top: 0; background: #fff; border-radius: 18px; box-shadow: 0 14px 34px rgba(0,0,0,.18); transform: scale(1.03); pointer-events: none; }
.meal { transition: box-shadow .15s, background .15s; }
.meal.drop { box-shadow: 0 0 0 2px var(--brand) inset; background: var(--brand-soft); }

/* аватар Руслана вместо буквы R */
img.boot-logo { border-radius: 50%; object-fit: cover; background: #eee; }
img.lg { border-radius: 50%; object-fit: cover; background: #eee; }
img.ava { border-radius: 50% !important; object-fit: cover; background: #eee; }
.hold .core { overflow: hidden; }
.hold .core .hold-ava { width: 100%; height: 100%; object-fit: cover; }
.hold.done .core .hold-ava { display: none; }

/* пейволл: список преимуществ */
.pw-list { list-style: none; padding: 0; margin: 6px 0 22px; display: grid; gap: 12px; font-size: 16px; font-weight: 560; color: var(--ink2); }
.pw .ob-foot .btn-link { margin-top: 4px; }

.glass.extra { opacity: .45; }
.water-note { margin-top: 10px; font-size: 12.5px; color: var(--muted); line-height: 1.35; }

.m3 .m3n { font-size: 11.5px; color: var(--muted); font-weight: 500; }

/* пейволл: блок преимуществ */
.pw-feats { margin: 8px 0 24px; border-radius: 22px; background: var(--bg2); padding: 6px 16px; }
.pw-feats .pf { display: flex; align-items: center; gap: 14px; padding: 13px 0; }
.pw-feats .pf + .pf { border-top: 1px solid rgba(0,0,0,.06); }
.pw-feats .pf-ic { width: 42px; height: 42px; border-radius: 13px; background: #fff; color: var(--brand); display: grid; place-items: center; flex: none; box-shadow: 0 2px 8px rgba(240,121,3,.12); }
.pw-feats .pf-ic svg { width: 22px; height: 22px; }
.pw-feats b { display: block; font-size: 15.5px; font-weight: 700; color: var(--ink); }
.pw-feats small { display: block; font-size: 13.5px; color: var(--muted); margin-top: 1px; line-height: 1.3; }

/* пейволл: сетка преимуществ 2×2 */
.pw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 26px; }
.pw-grid .pg { background: #fff; border: 1px solid #ececf0; border-radius: 20px; padding: 16px 14px 15px; box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.pw-grid .pg-ic { width: 38px; height: 38px; border-radius: 12px; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; margin-bottom: 12px; }
.pw-grid .pg-ic svg { width: 21px; height: 21px; }
.pw-grid b { display: block; font-size: 15px; font-weight: 720; color: var(--ink); letter-spacing: -.01em; }
.pw-grid small { display: block; font-size: 12.5px; color: var(--muted); margin-top: 3px; line-height: 1.3; }

/* камера: кнопки зума */
.cam-zoom{position:absolute;left:0;right:0;bottom:calc(122px + env(safe-area-inset-bottom));z-index:2;display:flex;justify-content:center;gap:8px}
.cam-zoom:empty{display:none}
.cam-zoom button{min-width:40px;height:40px;padding:0 10px;border-radius:20px;border:0;background:rgba(0,0,0,.45);color:#fff;font-weight:700;font-size:13px;backdrop-filter:blur(6px)}
.cam-zoom button.on{background:rgba(255,255,255,.92);color:#111;font-size:14px}

.cam video{transition:transform .06s linear;transform-origin:50% 50%}
.cam{touch-action:none}

.kcal-card.warn .num { color: var(--brand); }

/* клетчатка: тонкая строка под БЖУ */
.fib-row { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 8px 8px; background: #fff; border-radius: 18px; padding: 12px 16px; margin-top: 10px; }
.fib-row .fd { width: 9px; height: 9px; border-radius: 50%; background: var(--fib); }
.fib-row .fn { font-weight: 650; font-size: 14.5px; }
.fib-row .fv { justify-self: end; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.fib-row .fv b { color: var(--ink); }
.fib-row .fb { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: #eef0ee; overflow: hidden; }
.fib-row .fb i { display: block; height: 100%; background: var(--fib); border-radius: 3px; }

.m3 .lab { white-space: nowrap; }
.streak { border: 0; font: inherit; font-weight: 750; color: var(--ink); cursor: pointer; }

/* согласие на обработку ПДн на первом экране и ссылки на документы */
.consent { display: flex; gap: 10px; align-items: flex-start; text-align: left; font-size: 13px; color: var(--muted); line-height: 1.4; margin: 0 2px 12px; }
.consent input { width: 20px; height: 20px; flex: none; margin-top: 1px; accent-color: var(--brand); }
.consent a, .legal a { color: var(--brand-dark, #c85f00); text-decoration: underline; cursor: pointer; }

/* переключатель в профиле */
.li .tg { width: 42px; height: 24px; border-radius: 12px; background: #d9d9de; position: relative; flex: none; margin-left: 10px; transition: background .2s; }
.li .tg::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.li .tg.on { background: var(--brand); }
.li .tg.on::after { transform: translateX(18px); }

/* поддержка и аналитика */
.sup-card { background: var(--bg2); border-radius: 16px; padding: 14px 16px; margin-bottom: 10px; }
.sup-card .t { font-weight: 700; margin-bottom: 4px; }
.sup-card .d { color: var(--ink2); font-size: 14px; line-height: 1.45; }
.sup-card .d a { color: var(--brand); text-decoration: underline; cursor: pointer; }
.sup-card .btn { margin-top: 10px; height: 40px; }
.st-tabs { display: flex; gap: 8px; margin: 4px 0 8px; }
.st-tabs button { flex: 1; height: 34px; border-radius: 17px; background: var(--bg2); font-weight: 650; }
.st-tabs button.on { background: var(--ink); color: #fff; }
.st-h { font-weight: 750; margin: 16px 0 6px; }
.st-row { position: relative; display: flex; align-items: baseline; gap: 10px; padding: 9px 10px; border-radius: 10px; background: var(--bg2); margin-bottom: 5px; font-size: 14px; overflow: hidden; }
.st-row span, .st-row b, .st-row em { position: relative; z-index: 1; }
.st-row em { font-style: normal; color: var(--muted); font-size: 12.5px; margin-left: 6px; }
.st-row i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--brand-soft); }
.st-row.sm { padding: 7px 10px; font-size: 13px; }
.sheet { max-height: 88vh; overflow-y: auto; }

.st-row span { flex: 1; min-width: 0; }
.st-row b { min-width: 34px; text-align: right; }
.st-row em { min-width: 38px; text-align: right; }

/* кнопка «Зафиксируй цель»: отпечаток пальца, без контекстного меню картинки */
.hold, .hold * { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.hold .core .fp { position: static; transform: none; width: 76px; height: 76px; color: #fff; opacity: .95; pointer-events: none; }
.hold.on .core .fp { color: var(--brand); }

.li-note { padding: 0 16px 12px 36px; margin-top: -4px; font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.li-note b { color: var(--ink2); }

/* ---------- тренировки ---------- */
.tr-load { display: grid; place-items: center; padding: 60px 0; color: var(--muted); }
.tr-load svg { width: 30px; height: 30px; animation: spin 1s linear infinite; }
.tr-intro { display: flex; gap: 12px; align-items: center; background: var(--brand-soft); border-radius: 20px; padding: 14px 16px; font-size: 15px; color: var(--ink2); line-height: 1.4; }
.tr-intro .ava { object-fit: cover; }
.tr-hero { display: block; width: 100%; text-align: left; background: var(--ink); color: #fff; border-radius: 24px; padding: 20px 18px 18px; }
.tr-hero .k { color: #ffb066; font-size: 13px; font-weight: 650; }
.tr-hero .t { font-size: 26px; font-weight: 800; letter-spacing: -.02em; margin: 4px 0 14px; }
.wk-dots { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: #c9c9ce; }
.wk-dots i { width: 22px; height: 8px; border-radius: 4px; background: #3a3a40; }
.wk-dots i.on { background: var(--brand); }
.wk-dots span { margin-left: 6px; }
.tr-next { background: #fff; border-radius: 22px; padding: 16px; box-shadow: 0 1px 2px rgba(0,0,0,.03); border: 1px solid var(--line); }
.tr-next-b { display: block; width: 100%; text-align: left; margin-bottom: 14px; }
.tr-next .d { color: var(--brand); font-weight: 700; font-size: 13.5px; }
.tr-next .t { font-size: 21px; font-weight: 780; margin: 2px 0 4px; letter-spacing: -.01em; }
.tr-next .m { color: var(--muted); font-size: 14px; }
.li .k small { display: block; color: var(--muted); font-weight: 500; font-size: 13px; margin-top: 2px; }
.tr-dn { width: 30px; height: 30px; border-radius: 50%; background: var(--bg2); display: grid; place-items: center; font-weight: 750; font-size: 14px; flex: none; }
.tr-dn.ok { background: var(--ok); color: #fff; }
.tr-dn svg { width: 16px; height: 16px; }
.tr-prog { position: relative; display: block; width: 100%; text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 16px; margin-bottom: 10px; }
.tr-prog.rec { border: 2px solid var(--brand); background: var(--brand-soft); }
.tr-prog .badge { position: absolute; top: 14px; right: 14px; }
.tr-prog .k { color: var(--muted); font-size: 13px; font-weight: 600; }
.tr-prog .t { font-size: 20px; font-weight: 780; margin: 3px 0 6px; letter-spacing: -.01em; }
.tr-prog .d { color: var(--ink2); font-size: 14.5px; line-height: 1.4; }
.tr-prog .m { color: var(--muted); font-size: 13px; margin-top: 8px; }
.tr-full { background: #fff; }
.tr-top { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 12px; padding: calc(10px + var(--safe-t)) 16px 10px; background: rgba(255,255,255,.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-weight: 650; color: var(--ink2); }
.tr-body { padding: 6px 18px calc(110px + var(--safe-b)); }
.tr-body > .k { color: var(--brand); font-weight: 700; font-size: 14px; }
.tr-body h1 { font-size: 28px; font-weight: 800; letter-spacing: -.02em; margin: 4px 0 8px; line-height: 1.15; }
.tr-body .lead { color: var(--ink2); font-size: 15.5px; line-height: 1.45; margin: 0 0 12px; }
.tr-body .list { border: 1px solid var(--line); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.chips span { background: var(--bg2); border-radius: 12px; padding: 6px 10px; font-size: 13px; font-weight: 600; color: var(--ink2); }
.tr-ul { margin: 0; padding: 0; list-style: none; }
.tr-ul li { position: relative; padding: 7px 0 7px 26px; font-size: 15px; line-height: 1.4; color: var(--ink2); }
.tr-ul li::before { content: "•"; position: absolute; left: 8px; color: var(--brand); font-weight: 900; }
.tr-ul.ok li::before { content: "✓"; left: 4px; color: var(--ok); }
.tr-ul.bad li::before { content: "✕"; left: 5px; color: var(--bad); }
.tr-warm { background: var(--bg2); border-radius: 16px; padding: 12px 14px; font-size: 14.5px; color: var(--ink2); margin: 14px 0; }
.tr-bl { font-weight: 760; font-size: 16px; margin: 18px 4px 8px; }
.tr-ex { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.tr-ex .no { width: 28px; height: 28px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-dark); font-weight: 750; font-size: 13.5px; display: grid; place-items: center; flex: none; }
.tr-ex .in { flex: 1; min-width: 0; }
.tr-ex .nm { font-weight: 640; font-size: 16px; line-height: 1.25; }
.tr-ex .rp { color: var(--brand-dark); font-weight: 700; font-size: 14px; margin-top: 3px; }
.tr-ex .nt { color: var(--muted); font-size: 13.5px; margin-top: 2px; line-height: 1.35; }
.tr-play { width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 15px; flex: none; display: grid; place-items: center; padding-left: 3px; }
.vid-sheet { max-height: 94vh; overflow-y: auto; }
.vid-sheet h3 { font-size: 19px; margin-bottom: 12px; }
.vid-alts { margin: 0 -20px 12px; padding: 0 20px; }
.vid-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 16px; overflow: hidden; }
.vid-frame.vert { aspect-ratio: 9 / 16; max-height: 62vh; width: auto; margin: 0 auto; }
.vid-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vid-src { text-align: center; color: var(--muted); font-size: 13.5px; margin-top: 10px; }
.vid-src a { color: var(--brand); font-weight: 650; text-decoration: none; }
.wk { display: flex; flex-direction: column; background: #fff; }
.wk-top { display: flex; align-items: center; gap: 12px; padding: calc(10px + var(--safe-t)) 16px 8px; font-size: 13px; color: var(--muted); font-weight: 650; font-variant-numeric: tabular-nums; }
.wk-prog { flex: 1; height: 6px; border-radius: 3px; background: var(--bg2); overflow: hidden; }
.wk-prog i { display: block; height: 100%; background: var(--brand); border-radius: 3px; transition: width .4s; }
.wk-main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 10px 22px; }
.wk-tag { font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--brand); margin-bottom: 8px; }
.wk-tag.rest { color: #38a3f5; }
.wk-name { font-size: 28px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.wk-reps { font-size: 22px; font-weight: 750; color: var(--brand-dark); margin-top: 10px; }
.wk-sub { color: var(--ink2); font-size: 15.5px; line-height: 1.45; margin-top: 10px; max-width: 360px; }
.wk-emoji { font-size: 64px; margin: 16px 0 6px; }
.wk-timer { margin: 22px 0 8px; }
.wk-num { font-size: 64px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.wk-vid { margin-top: 16px; height: 42px; padding: 0 18px; border-radius: 21px; background: var(--bg2); font-weight: 650; font-size: 14.5px; }
.wk-next { display: flex; flex-direction: column; gap: 4px; color: var(--muted); font-size: 14px; margin-top: 6px; }
.wk-next b { color: var(--ink); font-size: 21px; font-weight: 780; }
.wk-next span { color: var(--brand-dark); font-weight: 700; }
.wk-after { text-align: center; color: var(--muted); font-size: 14px; padding: 0 20px 10px; }
.wk-ctrl { padding: 8px 18px calc(18px + var(--safe-b)); }
.wk-row { display: flex; gap: 10px; }
.wk-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.wk-week div { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11.5px; color: #8d8d94; font-weight: 600; }
.wk-week i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 13.5px; font-weight: 700; color: #c9c9ce; background: #232327; }
.wk-week .plan i { border: 2px dashed var(--brand); color: #fff; background: transparent; }
.wk-week .done i { background: var(--brand); color: #fff; }
.wk-week .done i svg { width: 16px; height: 16px; }
.wk-week .today span { color: #fff; }
.wk-cnt { font-size: 13.5px; color: #c9c9ce; margin-top: 12px; }
.tr-ex .ls { color: var(--ok); font-size: 13px; font-weight: 600; margin-top: 3px; }
.wk-log { display: flex; gap: 10px; margin-top: 18px; width: 100%; max-width: 360px; }
.wk-log .st { flex: 1; background: var(--bg2); border-radius: 18px; padding: 10px 8px; }
.wk-log .st > span { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.wk-log .st > div { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.wk-log button { width: 38px; height: 38px; border-radius: 50%; background: #fff; font-size: 22px; font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.wk-log b { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.wk-log b small { font-size: 13px; color: var(--muted); font-weight: 600; }
.wk-last { margin-top: 10px; font-size: 13.5px; color: var(--ink2); }
.wk-hint { margin-top: 8px; font-size: 13.5px; color: var(--brand-dark); background: var(--brand-soft); border-radius: 12px; padding: 8px 12px; max-width: 360px; }
.sch-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.sch-days button { height: 46px; border-radius: 14px; background: var(--bg2); font-weight: 700; font-size: 14.5px; }
.sch-days button.on { background: var(--brand); color: #fff; }
.sch-h { margin: 0 -20px; padding: 0 20px; }
.sec-row .tg { width: 42px; height: 24px; border-radius: 12px; background: #d9d9de; position: relative; flex: none; transition: background .2s; }
.sec-row .tg::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.sec-row .tg.on { background: var(--brand); }
.sec-row .tg.on::after { transform: translateX(18px); }

/* ---------- тренировки: главный экран (оформление 28.10) ---------- */
:root { --ease-out: cubic-bezier(.23, 1, .32, 1); }
.tr-hero { position: relative; overflow: hidden; background: radial-gradient(120% 140% at 100% 0%, #3a2410 0%, #17171a 55%, #111113 100%); box-shadow: 0 12px 30px rgba(17,17,19,.18); }
.tr-hero-glow { position: absolute; right: -40px; top: -60px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(240,121,3,.45), transparent 65%); pointer-events: none; }
.tr-hero > *:not(.tr-hero-glow) { position: relative; }
.wk-cnt b { color: #fff; font-size: 15px; }
.tr-hero, .tr-next-b, .tr-day, .tr-h, .tr-mi, .tr-go, .tr-prog { transition: transform 160ms var(--ease-out); }
.tr-hero:active, .tr-day:active, .tr-h:active, .tr-mi:active, .tr-prog:active { transform: scale(.98); }
.tr-go:active { transform: scale(.97); }
.tr-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.tr-stat { background: #fff; border-radius: 18px; padding: 12px 12px 11px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.tr-stat b { display: block; font-size: 21px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tr-stat span { color: var(--muted); font-size: 12.5px; font-weight: 600; }
.tr-next2 { margin-top: 10px; background: #fff; border-radius: 24px; padding: 14px; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(240,121,3,.08); border: 1px solid rgba(240,121,3,.14); }
.tr-next2 .tr-next-b { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; margin-bottom: 12px; }
.tr-next2 .in { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tr-next2 .d { color: var(--c); font-weight: 750; font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; }
.tr-next2 .t { font-size: 19px; font-weight: 780; letter-spacing: -.01em; line-height: 1.2; margin: 2px 0 3px; }
.tr-next2 .m { color: var(--muted); font-size: 13.5px; }
.tr-next2 .chev { color: #c5c5ca; }
.tr-next2 .chev svg { width: 16px; height: 16px; display: block; }
.tr-ico { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; font-size: 26px; flex: none; }
.tr-go { height: 52px; font-size: 16.5px; }
.tr-go svg { margin-left: -4px; }
.tr-days { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px 6px; scroll-snap-type: x mandatory; scroll-padding: 0 16px; }
.tr-days::-webkit-scrollbar { display: none; }
.tr-day { flex: none; width: 152px; scroll-snap-align: start; text-align: left; background: #fff; border-radius: 22px; padding: 14px; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 1px 2px rgba(0,0,0,.04); border: 1.5px solid transparent; }
.tr-day.next { border-color: var(--c); }
.tr-day .tr-ico { width: 44px; height: 44px; border-radius: 14px; font-size: 22px; margin-bottom: 4px; }
.tr-day .n { display: flex; align-items: center; gap: 6px; color: var(--c); font-size: 12.5px; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; }
.tr-day .n i { width: 18px; height: 18px; border-radius: 50%; background: var(--ok); color: #fff; display: grid; place-items: center; }
.tr-day .n i svg { width: 11px; height: 11px; }
.tr-day .t { font-weight: 720; font-size: 15px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 37px; }
.tr-day .m { color: var(--muted); font-size: 12.5px; }
.tr-hist { background: #fff; border-radius: 22px; padding: 6px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.tr-h { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 10px; border-radius: 16px; }
.tr-h + .tr-h { border-top: 1px solid var(--line); border-radius: 0 0 16px 16px; }
.tr-h .dt { width: 46px; height: 50px; border-radius: 14px; background: var(--brand-soft); color: var(--brand-dark); display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 700; flex: none; line-height: 1.1; }
.tr-h .dt b { font-size: 19px; font-weight: 800; }
.tr-h .in { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tr-h .t { font-weight: 680; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-h .m { color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-h .pill { flex: none; background: var(--bg2); border-radius: 10px; padding: 5px 9px; font-size: 12.5px; font-weight: 700; color: var(--ink2); font-variant-numeric: tabular-nums; }
.tr-menu { margin-top: 14px; background: #fff; border-radius: 22px; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.tr-mi { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 13px 14px; }
.tr-mi + .tr-mi { border-top: 1px solid var(--line); }
.tr-mi .mi { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-size: 19px; flex: none; }
.tr-mi .k { flex: 1; font-weight: 640; font-size: 15.5px; }
.tr-mi .k small { display: block; color: var(--muted); font-weight: 500; font-size: 12.5px; margin-top: 2px; }
.tr-mi .chev { color: #c5c5ca; }
.tr-mi .chev svg { width: 16px; height: 16px; display: block; }
@keyframes trIn { from { opacity: 0; transform: translateY(8px); } }
.page > .tr-hero, .page > .tr-stats, .page > .tr-next2, .page > .tr-days, .page > .tr-hist, .page > .tr-menu { animation: trIn 320ms var(--ease-out) both; }
.page > .tr-stats { animation-delay: 40ms; } .page > .tr-next2 { animation-delay: 80ms; } .page > .tr-days { animation-delay: 120ms; } .page > .tr-hist { animation-delay: 160ms; } .page > .tr-menu { animation-delay: 200ms; }
@media (prefers-reduced-motion: reduce) { .page > * { animation: none !important; } }

/* ---------- экран программы (оформление 28.10) ---------- */
.pv-hero { position: relative; padding: 0 18px 22px; background: radial-gradient(130% 90% at 100% 0%, color-mix(in srgb, var(--c) 22%, #fff) 0%, #fff 70%); }
.pv-bar { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; padding-left: 0; min-height: 8px; }
.pv-ic { width: 64px; height: 64px; border-radius: 20px; background: #fff; display: grid; place-items: center; font-size: 34px; box-shadow: 0 8px 24px color-mix(in srgb, var(--c) 30%, transparent); margin: 6px 0 14px; }
.pv-hero .k { color: var(--c); font-weight: 750; font-size: 13.5px; }
.pv-hero h1 { font-size: 30px; font-weight: 820; letter-spacing: -.025em; margin: 4px 0 8px; line-height: 1.1; }
.pv-hero .lead { color: var(--ink2); font-size: 15.5px; line-height: 1.45; margin: 0; }
.pv-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; }
.pv-f { background: rgba(255,255,255,.85); border: 1px solid var(--line); border-radius: 16px; padding: 10px 10px 9px; }
.pv-f b { display: block; font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.pv-f span { color: var(--muted); font-size: 12px; font-weight: 600; line-height: 1.2; display: block; margin-top: 2px; }
.pv-body { padding-top: 0; }
.pv-goals { display: flex; flex-wrap: wrap; gap: 8px; }
.pv-goals span { display: inline-flex; align-items: center; gap: 6px; background: #eefaf3; color: #15803d; border-radius: 12px; padding: 8px 11px; font-size: 14px; font-weight: 620; }
.pv-goals svg { width: 14px; height: 14px; }
.pv-note { display: flex; gap: 10px; align-items: flex-start; background: var(--bg2); border-radius: 16px; padding: 12px 14px; margin-top: 14px; font-size: 14.5px; color: var(--ink2); line-height: 1.4; }
.pv-days { background: #fff; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.pv-dn { display: block; font-size: 11.5px; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 1px; }
.pv-steps { display: flex; flex-direction: column; gap: 8px; }
.pv-step { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.4; color: var(--ink2); }
.pv-step .n { width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: #fff; font-weight: 750; font-size: 13px; display: grid; place-items: center; flex: none; margin-top: -1px; }
.pv-tips { display: flex; flex-direction: column; gap: 8px; }
.pv-tip { display: flex; gap: 10px; align-items: flex-start; background: var(--brand-soft); border-radius: 16px; padding: 12px 14px; font-size: 14.5px; line-height: 1.4; color: var(--ink2); }
.pv-tip.bad { background: #fff1f1; color: #8a2a2d; }
.pv-tip.bad b { color: #b42318; }
.pv-cur { color: var(--ok) !important; width: 100% !important; gap: 8px; }
.pv-cur svg { width: 18px; height: 18px; }
.tr-full .tr-top:empty { padding-bottom: 4px; }

/* ---------- правки после QA 28.10 ---------- */
.wk-in { display: flex; align-items: baseline; justify-content: center; gap: 3px; flex: 1; min-width: 0; }
.wk-in input { width: 100%; max-width: 72px; border: 0; background: transparent; text-align: center; font: inherit; font-size: 22px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; padding: 2px 0; border-bottom: 2px dashed #d4d4d9; border-radius: 0; -moz-appearance: textfield; }
.wk-in input::-webkit-outer-spin-button, .wk-in input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.wk-in input:focus { outline: none; border-bottom-color: var(--brand); }
.wk-in input::placeholder { color: #c5c5ca; }
.wk-in small { font-size: 13px; color: var(--muted); font-weight: 600; white-space: nowrap; }
.wk-log button { flex: none; }
.sch-h.off { opacity: .35; pointer-events: none; }
.wk-week .miss i { background: transparent; border: 2px dashed #4a4a50; color: #6b6b72; }
@media (max-height: 640px) {
  .wk-name { font-size: 23px; } .wk-reps { font-size: 19px; margin-top: 6px; } .wk-sub { font-size: 14px; margin-top: 6px; }
  .wk-log { margin-top: 10px; } .wk-vid { margin-top: 10px; height: 38px; } .wk-emoji { font-size: 46px; margin: 8px 0 4px; }
  .wk-timer { margin: 10px 0 4px; } .wk-timer .ring { width: 170px; height: 170px; } .wk-num { font-size: 50px; }
  .wk-ctrl { padding-bottom: calc(12px + var(--safe-b)); }
}

/* ---------- финальный экран тренировки (28.10) ---------- */
.wk.wk-fin { background: radial-gradient(120% 60% at 50% 0%, #ffe9d2 0%, #fff7ef 38%, #fff 70%); }
.wk.wk-fin .wk-prog, .wk.wk-fin .wk-top > span { visibility: hidden; }
.wk.wk-fin .wk-main { justify-content: flex-start; padding-top: 4px; }
.fin { width: 100%; max-width: 400px; display: flex; flex-direction: column; align-items: center; }
.fin > * { animation: finIn 420ms var(--ease-out, cubic-bezier(.23,1,.32,1)) both; }
.fin > :nth-child(2) { animation-delay: 60ms; } .fin > :nth-child(3) { animation-delay: 100ms; } .fin > :nth-child(4) { animation-delay: 140ms; }
.fin > :nth-child(5) { animation-delay: 200ms; } .fin > :nth-child(6) { animation-delay: 260ms; } .fin > :nth-child(7) { animation-delay: 320ms; } .fin > :nth-child(8) { animation-delay: 360ms; }
@keyframes finIn { from { opacity: 0; transform: translateY(10px); } }
.fin-badge { width: 112px; height: 112px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #ffb35c, #f07903 60%, #c25e00); box-shadow: 0 14px 34px rgba(240,121,3,.35), inset 0 -6px 14px rgba(0,0,0,.12); margin-top: 6px; position: relative; animation: finPop 520ms cubic-bezier(.34,1.56,.64,1) both !important; }
.fin-badge::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid rgba(240,121,3,.25); }
.fin-badge span { font-size: 56px; filter: drop-shadow(0 4px 6px rgba(0,0,0,.18)); }
@keyframes finPop { from { opacity: 0; transform: scale(.7); } }
.fin-k { margin-top: 18px; color: var(--brand); font-weight: 800; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.fin-h { font-size: 28px; font-weight: 820; letter-spacing: -.025em; margin-top: 4px; }
.fin-sub { color: var(--muted); font-size: 14.5px; margin-top: 4px; }
.fin-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; margin-top: 20px; }
.fin-t { background: #fff; border-radius: 18px; padding: 12px 8px 10px; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 6px 18px rgba(240,121,3,.08); display: flex; flex-direction: column; align-items: center; gap: 1px; }
.fin-t .ic { font-size: 20px; margin-bottom: 2px; }
.fin-t b { font-size: 22px; font-weight: 820; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.fin-t > span:last-child { color: var(--muted); font-size: 12px; font-weight: 600; }
.fin-week { width: 100%; margin-top: 12px; background: #17171a; border-radius: 20px; padding: 14px 12px 12px; }
.fin-wk-t { color: #c9c9ce; font-size: 13px; margin-top: 10px; } .fin-wk-t b { color: #fff; }
.fin-r { display: flex; gap: 12px; text-align: left; width: 100%; background: #fff; border-radius: 20px; padding: 14px; margin-top: 12px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.fin-r .ava { object-fit: cover; }
.fin-r .h { font-weight: 720; font-size: 13.5px; color: var(--brand-dark); margin-bottom: 3px; }
.fin-r .tx { font-size: 14.5px; line-height: 1.42; color: var(--ink2); }
.fin-st { margin-top: 14px; font-size: 13.5px; font-weight: 600; }
.fin-st span { display: inline-flex; align-items: center; gap: 6px; }
.fin-st svg { width: 15px; height: 15px; }
.fin-ok { color: var(--ok); } .fin-err { color: var(--bad); } .fin-wait { color: var(--muted); } .fin-wait svg { animation: spin 1s linear infinite; }
@media (max-height: 700px) { .fin-badge { width: 84px; height: 84px; } .fin-badge span { font-size: 42px; } .fin-h { font-size: 24px; } .fin-tiles { margin-top: 12px; } .fin-r { display: none; } }
@media (prefers-reduced-motion: reduce) { .fin > * { animation: none !important; } }
.tr-rest { display: flex; gap: 12px; align-items: center; background: #eefaf3; border-radius: 16px; padding: 12px 14px; color: #166534; font-size: 13.5px; line-height: 1.35; }
.tr-rest .e { font-size: 24px; }
.tr-rest b { display: block; font-size: 15px; color: #14532d; margin-bottom: 1px; }
.tr-anyway { display: block; margin: 10px auto 0; color: var(--muted); font-size: 13.5px; font-weight: 600; padding: 4px 8px; }

/* ---------- выравнивание и симметрия (28.10) ---------- */
.tr-body .sec-row { margin: 26px 0 10px; }
.pv-body > .sec-row:first-child { margin-top: 22px; }
.pv-facts { gap: 8px; }
.pv-f { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 12px 6px 11px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.pv-f .ic { font-size: 18px; margin-bottom: 3px; }
.pv-f b { font-size: 19px; }
.pv-f span:last-child { margin-top: 1px; }
.pv-goals { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 0; background: #fff; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.pv-goals > div { display: flex; align-items: center; gap: 12px; padding: 13px 16px; font-size: 15px; font-weight: 600; color: var(--ink); }
.pv-goals > div + div { border-top: 1px solid var(--line); }
.pv-goals .ck { width: 26px; height: 26px; border-radius: 50%; background: #eefaf3; color: #16a34a; display: grid; place-items: center; flex: none; }
.pv-goals .ck svg { width: 14px; height: 14px; }
.pv-days .tr-mi { padding: 14px 16px; }
.pv-steps { gap: 0; background: #fff; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.pv-step { align-items: center; padding: 13px 16px; }
.pv-step + .pv-step { border-top: 1px solid var(--line); }
.pv-step .n { margin-top: 0; width: 28px; height: 28px; background: var(--brand-soft); color: var(--brand-dark); }
.pv-tip { align-items: center; }
.pv-tip.bad { align-items: flex-start; }
.tr-stat { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 12px 6px 11px; }
.tr-stat .ic { font-size: 18px; margin-bottom: 3px; }
.tr-stat b { font-size: 20px; }
.wk-in small { align-self: center; }

/* ---------- симметрия, проход 2 (28.10) ---------- */
.tr-stats[hidden] { display: none; }
.page .opts .opt { background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.page .opts.row .opt { padding: 18px 10px 16px; }
.tr-intro .ava { width: 46px; height: 46px; object-fit: cover; }
.dv-fmt { background: #fff; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; margin-top: 4px; }
.dv-fmt > div { display: flex; align-items: center; gap: 12px; padding: 12px 16px; font-size: 14.5px; color: var(--ink2); font-weight: 560; }
.dv-fmt > div + div { border-top: 1px solid var(--line); }
.dv-fmt .ic { width: 30px; height: 30px; border-radius: 10px; background: var(--bg2); display: grid; place-items: center; font-size: 16px; flex: none; }
.dv-fmt b { margin-left: auto; color: var(--ink); font-weight: 750; }
.dv-wc .tr-warm { display: flex; align-items: center; gap: 12px; margin: 14px 0; padding: 12px 16px; border-radius: 18px; }
.dv-wc .tr-warm .ic { width: 34px; height: 34px; border-radius: 11px; background: #fff; display: grid; place-items: center; font-size: 18px; flex: none; }
.dv-wc .tr-warm b { display: block; color: var(--ink); font-size: 15px; margin-bottom: 1px; }
.tr-ex .no { align-self: center; }
.sch-h { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.sch-h button { height: 42px; border-radius: 14px; background: var(--bg2); font-weight: 680; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.sch-h button.on { background: var(--ink); color: #fff; }
.wk-log .st > div { gap: 6px; }
.wk-in { justify-content: center; }
.wk-in input { max-width: 64px; }
.pv-dur { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 12px 16px; margin-top: 12px; }
.pv-dur .ic { width: 34px; height: 34px; border-radius: 11px; background: var(--bg2); display: grid; place-items: center; font-size: 17px; flex: none; }
.pv-dur .tx { display: flex; flex-direction: column; gap: 1px; }
.pv-dur .tx span { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.pv-dur .tx b { font-size: 15.5px; color: var(--ink); font-weight: 750; }
.pv-week { background: #fff; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.pv-week > div { display: flex; align-items: center; gap: 12px; padding: 10px 16px; }
.pv-week > div + div { border-top: 1px solid var(--line); }
.pv-week .d { width: 34px; height: 28px; border-radius: 9px; display: grid; place-items: center; font-size: 12.5px; font-weight: 780; flex: none; background: var(--bg2); color: var(--muted); }
.pv-week .t { flex: 1; font-size: 14.5px; font-weight: 620; color: var(--ink); }
.pv-week .g { font-size: 11.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.pv-week .tr .d { background: var(--brand); color: #fff; } .pv-week .tr .g { color: var(--brand); }
.pv-week .act .d { background: #dcf5e7; color: #15803d; } .pv-week .act .g { color: var(--ok); }
.pv-week .off .t { color: var(--muted); font-weight: 560; }
/* Fitmegram: логотип и надпись (03.11.2026) */
@font-face { font-family: Righteous; src: url(/fonts/Righteous.woff2) format("woff2"); font-display: swap; }
.brand { font-family: Righteous, system-ui, sans-serif; font-weight: 400; letter-spacing: 0; }
img.lg.fm, img.boot-logo.fm { border-radius: 22%; object-fit: contain; background: transparent; }
/* заставка: тот же серый рисунок, что и на экране загрузки Telegram (размер/место подогнаны по скриншоту) */
.boot-mark { width: 15.2vw; max-width: 92px; height: auto; transform: translateY(-4px); }
/* центр — в области под верхними кнопками Telegram (в полноэкранном режиме), как у заставки Telegram */
.boot { box-sizing: border-box; padding-top: calc(var(--tg-safe-area-inset-top, env(safe-area-inset-top, 0px)) + var(--tg-content-safe-area-inset-top, 0px)); }
/* не полный экран: заставка Telegram стоит чуть выше центра окна — поднимаем так же (замер по скриншотам 03.11) */
.nofs .boot-mark { transform: translateY(-11px); }