:root {
  --brand-strong: #1d020c;
  --card: #ffffff;
  --content-strong: #0c0e12;
  --content-subtle: rgba(12, 14, 18, 0.4);
  --content-inverse: #ffffff;
  --content-inverse-medium: rgba(255, 255, 255, 0.6);
  --content-inverse-subtle: rgba(255, 255, 255, 0.4);
  --positive: #a3d546;
  --border-base: rgba(12, 14, 18, 0.08);
  --tile: rgba(153, 160, 174, 0.12);
  --streak: #ff6f46;
  --tab-active: #1d020c;
  --tab-inactive: #404040;
  --tab-pill: #ededed;
  --neutral-bg: #fff7fd;

  --r-sheet: 32px;
  --r-card: 20px;
  --r-inset: 16px;
  --r-pill: 100px;

  --font: "Geist", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; }

body {
  font-family: var(--font);
  background: radial-gradient(1200px 800px at 50% -10%, #e9eaee 0%, #d7d8dd 60%, #cfd0d5 100%);
  color: var(--content-strong);
  display: flex; align-items: center; justify-content: center;
  min-height: 100dvh; padding: 28px 16px;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}

/* ----- Device frame ----- */
.device {
  position: relative; width: 430px; height: 932px;
  max-height: calc(100dvh - 40px);
  background: #fff7fd;
  border-radius: 48px; overflow: hidden;
  box-shadow: 0 2px 4px rgba(0,0,0,.12), 0 30px 70px rgba(20,4,12,.35), 0 0 0 11px #0b0b0d, 0 0 0 12px #2a2a2e;
  display: flex; flex-direction: column; isolation: isolate;
}
.device__bg { display: none; }
.device > .layer, .device > .screens { position: relative; z-index: 1; }

/* ----- Status bar ----- */
.statusbar { flex: 0 0 auto; height: 54px; padding: 16px 22px 0; display: flex; align-items: center; justify-content: space-between; color: #1c0a12; }
.statusbar.dark { color: #0c0e12; }
.statusbar__time { font-size: 17px; font-weight: 600; letter-spacing: -0.2px; font-variant-numeric: tabular-nums; }
.statusbar__icons { display: flex; align-items: center; gap: 7px; }
.statusbar__icons svg { display: block; }

/* ----- Screens ----- */
.screens { flex: 1 1 auto; min-height: 0; }
.screen { position: absolute; inset: 0; display: none; flex-direction: column; min-height: 0; }
.screen.is-active { display: flex; }

/* ----- Top bar (tabs) ----- */
.topbar { flex: 0 0 auto; padding: 10px 20px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.topbar__left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; box-shadow: 0 0 0 1px rgba(255,255,255,.5); }
.greeting { display: flex; flex-direction: column; min-width: 0; }
.greeting__hi { font-size: 12px; font-weight: 400; line-height: 1.6; letter-spacing: -0.24px; color: rgba(28,10,18,.55); }
.greeting__name { font-size: 16px; font-weight: 400; line-height: 1.2; letter-spacing: -0.32px; color: var(--content-strong); }
.greeting__name b { font-weight: 600; }
.pagetitle { display: flex; flex-direction: column; min-width: 0; }
.pagetitle h1 { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -0.5px; line-height: 1.05; }
.pagetitle p { margin: 3px 0 0; font-size: 12px; font-weight: 400; color: rgba(28,10,18,.5); }

.topbar__actions { display: flex; align-items: center; gap: 8px; }
.glass-btn { width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; padding: 0; display: grid; place-items: center; background: rgba(255,255,255,.55); box-shadow: inset 0 0 0 1px rgba(255,255,255,.6), 0 4px 14px rgba(20,4,12,.10); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); transition: transform .12s ease, background .2s ease; }
.glass-btn:active { transform: scale(.93); }
.glass-btn svg { width: 22px; height: 22px; display: block; }
.glass-btn--ai svg { width: 24px; height: 24px; }

/* ----- Scroll ----- */
.scroll { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding-bottom: 96px; scrollbar-width: none; }
/* Активный трекер: «Главная» и «Ещё» заканчиваются белой .sheet — последний блок.
   Тянем её белый фон до самого низа (sheet растягивается на высоту вьюпорта и сама
   несёт отступ под таб-бар своим БЕЛЫМ padding-bottom), чтобы под ней не «возвращался»
   розовый фон устройства. Прозрачный padding у .scroll на этих экранах убираем. */
#device[data-stage="active"] .screen[data-screen="home"] .sheet--flow,
#device[data-stage="active"] .screen[data-screen="more"] .scroll > .sheet {
  padding-bottom: calc(120px + env(safe-area-inset-bottom));
  min-height: calc(100dvh - 120px);
}
#device[data-stage="active"] .screen[data-screen="home"] .scroll,
#device[data-stage="active"] .screen[data-screen="more"] .scroll {
  padding-bottom: 0;
}
.scroll::-webkit-scrollbar { display: none; }
.stack { padding: 4px 20px 0; display: flex; flex-direction: column; gap: 8px; }

/* ----- Streak ----- */
.streak { position: relative; align-self: center; margin: 2px 0 4px; }
.streak__arrow { position: absolute; top: -7px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 8px solid #fff; filter: drop-shadow(0 -2px 2px rgba(20,4,12,.05)); }
.streak__body { background: #fff; border-radius: var(--r-inset); padding: 9px 16px; display: flex; align-items: center; gap: 10px; box-shadow: 0 6px 20px rgba(20,4,12,.10); }
.streak__dots { display: flex; align-items: center; gap: 2px; }
.streak__dots i { width: 6px; height: 12px; border-radius: 9999px; background: var(--streak); display: block; }
.streak__dots i.off { opacity: .12; }
.streak__text { font-size: 12px; font-weight: 500; line-height: 1.6; letter-spacing: -0.24px; color: #0c0005; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.streak__text b { font-weight: 600; }

/* ----- Cards ----- */
.card { background: var(--card); border-radius: var(--r-card); box-shadow: 0 8px 24px rgba(20,4,12,.06), inset 0 0 0 1px rgba(12,14,18,.03); }

.goal { padding: 16px; }
.goal__head { display: flex; align-items: center; justify-content: space-between; }
.goal__title { font-size: 16px; font-weight: 500; line-height: 22px; }
.pill { height: 28px; padding: 0 12px; border: 0; cursor: pointer; border-radius: var(--r-pill); background: rgba(0,0,0,.06); font-family: var(--font); font-size: 11px; font-weight: 500; letter-spacing: -0.2px; line-height: 1; color: var(--content-strong); display: inline-flex; align-items: center; transition: background .2s ease, transform .12s ease; }
.pill:active { transform: scale(.95); }
.goal__type { margin-top: 12px; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; line-height: 22px; }
.goal__type svg { width: 16px; height: 16px; display: block; color: #e0658a; }

.bars { margin-top: 12px; display: flex; align-items: stretch; gap: 4px; height: 16px; }
.bars i { flex: 1 1 0; border-radius: 9999px; background: var(--border-base); }
.bars i.on { background: var(--positive); }

.goal__stats { margin-top: 14px; display: flex; }
.goal__stats .col { flex: 1 1 0; }
.stat-num { font-size: 14px; font-weight: 500; line-height: 22px; color: var(--content-strong); }
.stat-num span { color: var(--content-subtle); }
.stat-lbl { font-size: 12px; font-weight: 400; line-height: 16px; color: var(--content-subtle); }

/* ----- AI / Health Lab promo card ----- */
.ai { position: relative; overflow: hidden; border-radius: var(--r-card); padding: 14px 16px; background: linear-gradient(255deg, #c9a7d6 -10%, #9c7fc6 48%, #7c62b8 105%); box-shadow: 0 12px 26px rgba(94,60,140,.28); min-height: 96px; display: flex; flex-direction: column; justify-content: center; cursor: pointer; }
.ai__deco { position: absolute; top: 50%; right: -34px; transform: translateY(-50%); width: 215px; height: 215px; pointer-events: none; }
.ai__deco svg { width: 100%; height: 100%; display: block; }
.ai__title { position: relative; font-size: 14px; font-weight: 500; line-height: 20px; color: var(--content-inverse); max-width: 215px; }
.ai__sub { position: relative; margin-top: 3px; font-size: 12px; font-weight: 400; line-height: 16px; color: var(--content-inverse-medium); max-width: 205px; }
.ai__cta { position: relative; margin-top: 12px; align-self: flex-start; height: 28px; padding: 0 12px; border: 0; cursor: pointer; border-radius: var(--r-pill); background: rgba(255,255,255,.18); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); font-family: var(--font); font-size: 11px; font-weight: 500; letter-spacing: -0.2px; line-height: 1; color: #fff; display: inline-flex; align-items: center; }

/* ----- Bottom sheet ----- */
.sheet { margin-top: 16px; background: var(--card); border-radius: var(--r-sheet) var(--r-sheet) 0 0; padding: 10px 20px 24px; box-shadow: 0 -6px 30px rgba(20,4,12,.06); min-height: 460px; }
.grabber { width: 36px; height: 5px; border-radius: 9999px; background: #d8d9dd; margin: 0 auto 6px; }
.sheet__head { display: flex; align-items: center; justify-content: space-between; padding: 6px 0 10px; }
.navbtn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border-base); background: #fff; cursor: pointer; display: grid; place-items: center; color: var(--content-strong); transition: transform .12s ease, background .2s ease; }
.navbtn:active { transform: scale(.92); background: #f6f6f7; }
.navbtn svg { width: 18px; height: 18px; display: block; }
.sheet__title { text-align: center; }
.sheet__title h2 { margin: 0; font-size: 16px; font-weight: 500; line-height: 22px; }
.sheet__title p { margin: 1px 0 0; font-size: 12px; font-weight: 400; line-height: 16px; color: var(--content-subtle); }
.sheet-h { font-size: 16px; font-weight: 500; line-height: 22px; padding: 2px 2px 12px; }

/* ----- Rows ----- */
.rows { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; gap: 12px; padding: 4px 12px 4px 4px; cursor: pointer; border-radius: var(--r-inset); transition: background .15s ease, transform .12s ease; }
.row:active { transform: scale(.985); }
.row + .row { margin-top: 4px; }
.row__media { width: 64px; height: 64px; flex: 0 0 auto; border-radius: var(--r-inset); background: var(--tile); display: grid; place-items: center; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(12,14,18,.04); }
.row__media img { width: 100%; height: 100%; object-fit: cover; }
.row__media svg { width: 24px; height: 24px; display: block; }
.row__body { flex: 1 1 auto; min-width: 0; }
.row__name { font-size: 14px; font-weight: 500; line-height: 22px; color: var(--content-strong); }
.row__meta { margin-top: 1px; font-size: 12px; font-weight: 400; line-height: 16px; color: var(--content-subtle); display: inline-flex; align-items: center; gap: 5px; }
.row__meta svg { width: 12px; height: 12px; display: block; opacity: .7; }
.row__meta b { color: var(--content-strong); font-weight: 500; }
.row__chev { flex: 0 0 auto; color: rgba(12,14,18,.3); display: grid; place-items: center; }
.row__chev svg { width: 22px; height: 22px; display: block; }

.row--dark { background: var(--brand-strong); padding: 4px 16px 4px 4px; box-shadow: 0 12px 26px rgba(20,4,12,.30); }
.row--dark .row__media { background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.row--dark .row__name { color: #fff; }
.row--dark .row__meta { color: var(--content-inverse-subtle); }
.row--dark .row__meta b { color: #fff; }
.row--dark .row__chev { color: rgba(255,255,255,.6); }

.ic-orange { color: #ff7a3d; } .ic-purple { color: #8b5cf6; } .ic-blue { color: #2bb3e3; } .ic-green { color: #2bbf6a; } .ic-pink { color: #f5589b; } .ic-amber { color: #f5a623; } .ic-wine { color: #1d020c; }
/* разделитель секций внутри шторки — во всю ширину листа */
.sh-div { height: 1px; background: rgba(12,14,18,.07); margin: 8px -20px; }
.t-rose { background: #f6dfe8; color: #b34f7a; }

/* ----- Progress ----- */
.duo { display: flex; gap: 8px; }
.duo > .card { flex: 1 1 0; padding: 14px; }
.mini-h { font-size: 12px; color: var(--content-subtle); font-weight: 400; }
.ring { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.ring svg { width: 60px; height: 60px; flex: 0 0 auto; }
.ring__big { font-size: 22px; font-weight: 600; letter-spacing: -0.5px; }
.ring__sub { font-size: 11px; color: var(--content-subtle); margin-top: 1px; }
.big-num { font-size: 26px; font-weight: 600; letter-spacing: -0.8px; margin-top: 10px; line-height: 1; }
.big-num span { font-size: 14px; color: var(--content-subtle); font-weight: 500; letter-spacing: 0; }
.delta { margin-top: 6px; font-size: 12px; font-weight: 500; color: #2bbf6a; display: inline-flex; align-items: center; gap: 4px; }
.delta svg { width: 13px; height: 13px; }
.chart-card { padding: 16px; margin-top: 8px; }
.chart-card h3 { margin: 0 0 2px; font-size: 14px; font-weight: 500; }
.chart-card .mini-h { display: block; }
.chart { width: 100%; height: 96px; display: block; margin-top: 10px; }
.chart-x { display: flex; justify-content: space-between; margin-top: 6px; font-size: 10px; color: var(--content-subtle); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gcell { background: #f7f7f8; border-radius: var(--r-inset); padding: 13px 14px; }
.gcell .n { font-size: 20px; font-weight: 600; letter-spacing: -0.5px; }
.gcell .n span { font-size: 12px; color: var(--content-subtle); font-weight: 500; letter-spacing: 0; }
.gcell .l { font-size: 12px; color: var(--content-subtle); margin-top: 3px; }
.cal { margin-top: 14px; }
.cal__row { display: flex; gap: 4px; }
.cal__row i { flex: 1 1 0; height: 30px; border-radius: 8px; background: var(--border-base); }
.cal__row i.g { background: var(--positive); } .cal__row i.a { background: #f7d774; } .cal__row i.r { background: rgba(255,111,70,.55); }
.cal__lbl { display: flex; justify-content: space-between; margin-top: 6px; font-size: 10px; color: var(--content-subtle); }

/* ----- Profile / menu (More) ----- */
.profile { display: flex; align-items: center; gap: 14px; padding: 16px; }
.profile img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px rgba(12,14,18,.06); }
.profile__b { flex: 1 1 auto; min-width: 0; }
.profile__name { font-size: 17px; font-weight: 600; letter-spacing: -0.3px; }
.profile__sub { font-size: 12px; color: var(--content-subtle); margin-top: 2px; }
.group-title { font-size: 12px; font-weight: 500; color: var(--content-subtle); padding: 16px 4px 8px; }
.menu { display: flex; flex-direction: column; }
.mrow { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 8px; cursor: pointer; border-radius: var(--r-inset); transition: background .15s ease, transform .12s ease; }
.mrow:active { transform: scale(.99); background: #f6f6f7; }
.mrow + .mrow { border-top: 1px solid rgba(12,14,18,.05); }
.mrow__ic { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 12px; background: var(--tile); display: grid; place-items: center; }
.mrow__ic svg { width: 20px; height: 20px; }
.mrow__b { flex: 1 1 auto; min-width: 0; }
.mrow__name { font-size: 15px; font-weight: 500; }
.mrow__sub { font-size: 12px; color: var(--content-subtle); margin-top: 1px; }
.mrow__val { font-size: 13px; color: var(--content-subtle); margin-right: 2px; }
.mrow__chev { color: rgba(12,14,18,.28); display: grid; place-items: center; }
.mrow__chev svg { width: 20px; height: 20px; }
.signout { width: 100%; margin-top: 16px; border: 0; cursor: pointer; background: #fff; color: #ff3b30; border-radius: var(--r-card); padding: 16px; font-family: var(--font); font-size: 15px; font-weight: 600; box-shadow: 0 8px 24px rgba(20,4,12,.06); }
.version { text-align: center; color: rgba(12,14,18,.3); font-size: 11px; letter-spacing: .04em; margin-top: 16px; }
.toggle { width: 50px; height: 30px; border-radius: 9999px; background: #e3e4e8; position: relative; flex: 0 0 auto; cursor: pointer; transition: background .2s ease; }
.toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.2); transition: transform .2s ease; }
.toggle.on { background: #34c759; } .toggle.on::after { transform: translateX(20px); }

/* ----- Tab bar ----- */
.tabbar { position: absolute; z-index: 3; left: 50%; transform: translateX(-50%); bottom: 34px; width: min(386px, calc(100% - 20px)); display: flex; align-items: center; gap: 2px; padding: 6px 6px 7px; border-radius: 32px; background: rgba(249,249,251,.8); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(255,255,255,.55), 0 12px 34px rgba(20,4,12,.14); backdrop-filter: blur(22px) saturate(105%); -webkit-backdrop-filter: blur(22px) saturate(105%); overflow: hidden; }
.tab { position: relative; z-index: 1; flex: 1 1 0; border: 0; background: transparent; cursor: pointer; border-radius: 22px; padding: 6px 2px; display: flex; flex-direction: column; align-items: center; gap: 3px; color: #5b5b63; font-family: var(--font); font-size: 10px; font-weight: 500; line-height: 12px; letter-spacing: -0.1px; transition: color .3s ease; }
.tab svg { width: 24px; height: 24px; display: block; transition: transform .4s cubic-bezier(.3,1.3,.5,1); }
.tab .ti--fill { display: none; }
.tab.is-active { color: var(--tab-active); font-weight: 600; }
.tab.is-active .ti--fill { display: block; }
.tab.is-active .ti--line:not(.ti--bold) { display: none; }
.tab.is-active .ti--bold { stroke-width: 2.3; }
.tab.is-active svg { transform: translateY(-1px); }
.tab-glass { position: absolute; top: 5px; bottom: 6px; left: 0; width: 0; border-radius: 22px; z-index: 0; pointer-events: none; opacity: 0; background: rgba(60,60,67,.13); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }

.home-ind { position: absolute; z-index: 6; bottom: 9px; left: 50%; transform: translateX(-50%); width: 134px; height: 5px; border-radius: 9999px; background: rgba(0,0,0,.85); }
.home-ind.light { background: rgba(0,0,0,.85); }

/* ============================================================
   DETAIL SCREENS (pushed full-screen overlays)
   ============================================================ */
.detail { position: absolute; inset: 0; z-index: 5; background: var(--neutral-bg); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .28s cubic-bezier(.4,0,.2,1); visibility: hidden; }
.detail.is-open { transform: translateX(0); visibility: visible; }
.detail .scroll { padding-bottom: 40px; }
.dhead { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; padding: 8px 16px 12px; }
.dhead__title { flex: 1 1 auto; text-align: center; font-size: 17px; font-weight: 600; letter-spacing: -0.3px; }
.dhead__btn { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 50%; border: 0; cursor: pointer; background: rgba(12,14,18,.05); display: grid; place-items: center; color: var(--content-strong); transition: transform .12s ease, background .2s ease; }
.dhead__btn:active { transform: scale(.92); }
.dhead__btn.ghost { background: transparent; }
.dhead__btn svg { width: 20px; height: 20px; }
.dhead__link { width: auto; padding: 0 6px; font-family: var(--font); font-size: 15px; font-weight: 500; color: var(--content-strong); background: transparent; }
.dwrap { padding: 0 20px; }

/* segmented control */
.seg { display: flex; gap: 0; background: #e7e7ea; border-radius: 12px; padding: 3px; margin: 4px 0 14px; }
.seg button { flex: 1 1 0; border: 0; cursor: pointer; background: transparent; font-family: var(--font); font-size: 14px; font-weight: 500; color: var(--content-subtle); padding: 8px 0; border-radius: 9px; transition: all .18s ease; }
.seg button.on { background: #fff; color: var(--content-strong); box-shadow: 0 2px 6px rgba(0,0,0,.08); }

/* week day strip (calories) */
.wkstrip { display: flex; gap: 6px; margin: 2px 0 14px; }
.wkday { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 0 6px; border-radius: 16px; background: #fff; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(12,14,18,.04); }
.wkday small { font-size: 11px; color: var(--content-subtle); }
.wkday b { font-size: 16px; font-weight: 600; }
.wkday i { width: 5px; height: 5px; border-radius: 50%; background: transparent; display: block; }
.wkday i.g { background: var(--positive); } .wkday i.o { background: #ff9f43; }
.wkday.on { background: var(--brand-strong); box-shadow: none; }
.wkday.on small, .wkday.on b { color: #fff; }
.wkday.future small, .wkday.future b { color: rgba(12,14,18,.28); }

/* calorie summary + macros */
.cal-card { padding: 16px; }
.cal-card__top { display: flex; align-items: flex-start; justify-content: space-between; }
.kcal-big { font-size: 26px; font-weight: 600; letter-spacing: -0.8px; }
.kcal-big span { font-size: 15px; color: var(--content-subtle); font-weight: 500; letter-spacing: 0; }
.kcal-sub { font-size: 13px; color: var(--content-subtle); margin-top: 2px; }
.kcal-sub b { color: var(--content-strong); font-weight: 500; }
.macros { display: flex; gap: 18px; margin-top: 14px; }
.macro { flex: 1 1 0; }
.macro .ml { font-size: 12px; color: var(--content-subtle); }
.macro .mv { font-size: 14px; font-weight: 600; margin-top: 2px; }
.macro .mv span { color: var(--content-subtle); font-weight: 400; font-size: 12px; }
.macro .mbar { height: 4px; border-radius: 9999px; background: var(--border-base); margin-top: 7px; overflow: hidden; }
.macro .mbar i { display: block; height: 100%; border-radius: 9999px; }

/* meal group */
.meal-group { margin-top: 12px; }
.meal-group__head { display: flex; align-items: center; gap: 12px; padding: 4px 4px 4px 4px; }
.meal-thumb { width: 40px; height: 40px; border-radius: 12px; background: var(--tile); display: grid; place-items: center; font-size: 20px; }
.meal-thumb svg { width: 20px; height: 20px; }
.meal-group__b { flex: 1 1 auto; }
.meal-group__name { font-size: 15px; font-weight: 600; }
.meal-group__kcal { font-size: 12px; color: var(--content-subtle); margin-top: 1px; }
.addbtn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border-base); background: #fff; cursor: pointer; display: grid; place-items: center; color: var(--content-strong); flex: 0 0 auto; transition: transform .12s ease; }
.addbtn:active { transform: scale(.9); }
.addbtn svg { width: 18px; height: 18px; }
.meal-items { margin-top: 8px; }
.meal-item { display: flex; align-items: center; justify-content: space-between; padding: 12px 4px; border-top: 1px solid rgba(12,14,18,.06); }
.meal-item:first-child { border-top: 0; }
.meal-item__n { font-size: 14px; }
.meal-item__r { display: flex; align-items: center; gap: 8px; color: var(--content-subtle); font-size: 13px; }
.meal-item__r svg { width: 16px; height: 16px; }
.swipe-demo { position: relative; overflow: hidden; border-radius: 12px; }
.swipe-demo .meal-item { transform: translateX(-58px); background: #fff; border-top: 0; padding: 14px 12px; }
.swipe-demo .trash { position: absolute; right: 0; top: 0; bottom: 0; width: 56px; background: #ff3b30; display: grid; place-items: center; color: #fff; border-radius: 12px; }
.swipe-demo .trash svg { width: 20px; height: 20px; }

/* steps chart */
.steps-chart-card { padding: 16px; }
.steps-cur { text-align: center; margin-bottom: 6px; }
.steps-cur b { font-size: 17px; font-weight: 600; }
.steps-cur p { margin: 2px 0 0; font-size: 12px; color: var(--content-subtle); }
.steps-nav { display: flex; align-items: center; justify-content: space-between; }
.steps-avg { font-size: 13px; color: var(--content-subtle); }
.steps-avg b { display: block; font-size: 20px; color: var(--content-strong); font-weight: 600; margin-top: 2px; }
.legend { display: flex; gap: 14px; margin-top: 12px; font-size: 11px; color: var(--content-subtle); flex-wrap: wrap; }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend i { width: 9px; height: 9px; border-radius: 50%; }
.dotgrid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 7px; margin: 4px 0; max-width: 200px; }
.dotgrid i { width: 9px; height: 9px; border-radius: 50%; background: #e2e3e7; }
.dotgrid i.p { background: #f5a0c4; }
.article { display: flex; align-items: center; gap: 12px; padding: 8px; }
.article img, .article .ph { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; flex: 0 0 auto; background: linear-gradient(135deg,#f3c6d8,#c9b6e8); }
.article__b { flex: 1 1 auto; }
.article__t { font-size: 14px; font-weight: 500; line-height: 1.25; }
.article__m { font-size: 12px; color: var(--content-subtle); margin-top: 3px; }

/* workout detail */
.detail--wk { overflow: hidden; }
.wk-hero { position: absolute; top: 0; left: 0; right: 0; height: 380px; overflow: hidden; z-index: 1; }
.wk-hero img { width: 100%; height: 100%; object-fit: cover; }
.wk-hero__top { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 56px 14px 0; z-index: 6; }
.glassbtn { width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer; background: rgba(255,255,255,.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: grid; place-items: center; color: #1d020c; transition: background .18s ease, transform .12s ease; }
.glassbtn:active { transform: scale(.92); }
.glassbtn svg { width: 20px; height: 20px; }
.glassbtn.on { background: #1d020c; color: #fff; }
.wk-hero__actions { display: flex; gap: 8px; }
.wk-fab { position: absolute; top: 286px; left: 0; right: 0; z-index: 2; display: flex; justify-content: flex-end; gap: 8px; padding: 0 14px; }
.wk-controls { position: absolute; top: 104px; left: 14px; right: 14px; background: rgba(20,4,12,.5); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-radius: 18px; padding: 4px 8px; z-index: 5; opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
.wk-controls.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.wk-ctrl { display: flex; align-items: center; justify-content: space-between; padding: 11px 8px; color: #fff; font-size: 14px; }
.wk-ctrl + .wk-ctrl { border-top: 1px solid rgba(255,255,255,.14); }
.wk-ctrl .r { display: flex; align-items: center; gap: 6px; color: rgba(255,255,255,.7); font-size: 13px; }
.wk-ctrl .r svg { width: 16px; height: 16px; }
.wk-sheet { position: absolute; left: 0; right: 0; top: 60px; bottom: 0; background: var(--neutral-bg); border-radius: 24px 24px 0 0; box-shadow: 0 -12px 34px rgba(20,4,12,.18); z-index: 4; display: flex; flex-direction: column; transform: translateY(270px); transition: transform .3s cubic-bezier(.32,.72,0,1); }
.wk-sheet.dragging { transition: none; }
.wk-grab { padding: 10px 0 8px; flex: 0 0 auto; display: flex; justify-content: center; cursor: grab; touch-action: none; }
.wk-grab::before { content: ''; width: 40px; height: 5px; border-radius: 9999px; background: rgba(12,14,18,.18); }
.wk-sheet__scroll { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 2px 20px calc(40px + env(safe-area-inset-bottom)); scrollbar-width: none; }
.wk-sheet__scroll::-webkit-scrollbar { display: none; }
.wk-title { font-size: 22px; font-weight: 600; letter-spacing: -0.5px; line-height: 1.15; }
.wk-stats { display: flex; gap: 8px; margin-top: 16px; }
.wk-stat { flex: 1 1 0; background: #fff; border-radius: 14px; padding: 12px; text-align: center; box-shadow: inset 0 0 0 1px rgba(12,14,18,.04); }
.wk-stat svg { width: 18px; height: 18px; color: var(--content-subtle); }
.wk-stat b { display: block; font-size: 15px; font-weight: 600; margin-top: 4px; }
.wk-stat small { font-size: 11px; color: var(--content-subtle); }
.btn-primary { width: 100%; border: 0; cursor: pointer; border-radius: var(--r-pill); padding: 14px 18px; font-family: var(--font); font-size: 15px; font-weight: 600; letter-spacing: -.2px; background: #f0cadd; color: var(--content-strong); margin-top: 14px; box-shadow: 0 4px 12px rgba(20,4,12,.08); transition: transform .12s ease, filter .2s ease; }
.btn-primary:active { transform: scale(.985); filter: brightness(.96); }
.btn-secondary { width: 100%; border: 0; cursor: pointer; border-radius: var(--r-pill); padding: 14px 18px; font-family: var(--font); font-size: 15px; font-weight: 600; letter-spacing: -.2px; background: #f0f0f2; color: var(--content-strong); margin-top: 10px; transition: transform .12s ease; }
.btn-secondary:active { transform: scale(.985); }
.wk-sec-title { font-size: 16px; font-weight: 600; margin: 22px 2px 10px; }
.ex-row { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 16px; padding: 8px; margin-bottom: 8px; box-shadow: inset 0 0 0 1px rgba(12,14,18,.03); }
.ex-row__img { width: 56px; height: 56px; border-radius: 12px; flex: 0 0 auto; background: #eceaf2; display: grid; place-items: center; color: #b3a6cf; }
.ex-row__img svg { width: 26px; height: 26px; }
.ex-row__b { flex: 1 1 auto; }
.ex-row__n { font-size: 14px; font-weight: 500; }
.ex-row__m { font-size: 12px; color: var(--content-subtle); margin-top: 2px; display: inline-flex; gap: 4px; align-items: center; }
.ex-row__m svg { width: 12px; height: 12px; }
.ex-row__i { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border-base); display: grid; place-items: center; color: var(--content-subtle); flex: 0 0 auto; }
.ex-row__i svg { width: 16px; height: 16px; }
.ex-row[data-open] { cursor: pointer; }
.ex-row[data-open]:active { transform: scale(.99); }

/* ===== Детали упражнения (GIF) ===== */
.exd-hero { position: relative; height: 290px; margin: 0 -20px 0; overflow: hidden; background: linear-gradient(165deg,#ece6f5,#d7cde8); display: grid; place-items: center; }
.exd-hero__grab { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 40px; height: 5px; border-radius: 9999px; background: rgba(255,255,255,.8); z-index: 2; }
.exd-gif { color: #7a6aa0; animation: exrep 1.5s ease-in-out infinite; }
.exd-gif svg { width: 130px; height: 130px; display: block; }
@keyframes exrep { 0%, 100% { transform: translateY(-7px) scaleY(1); } 50% { transform: translateY(9px) scaleY(.93); } }
.exd-badge { position: absolute; top: 14px; left: 16px; z-index: 2; font-size: 11px; font-weight: 700; letter-spacing: .04em; color: #1d020c; background: rgba(255,255,255,.88); border-radius: 9999px; padding: 4px 10px 4px 8px; display: inline-flex; gap: 6px; align-items: center; }
.exd-badge i { width: 6px; height: 6px; border-radius: 50%; background: #e0518f; animation: exblink 1s steps(2, jump-none) infinite; }
@keyframes exblink { 50% { opacity: .25; } }
.exd-close { position: absolute; top: 12px; right: 16px; z-index: 2; }
.exd-name { font-size: 24px; font-weight: 700; letter-spacing: -.5px; line-height: 1.15; margin-top: 16px; }
.exd-tag { display: inline-block; font-size: 11px; font-weight: 600; color: #c8377f; background: #fbe6f0; border-radius: 9999px; padding: 4px 11px; margin-top: 10px; text-transform: uppercase; letter-spacing: .03em; }
.exd-desc { font-size: 14px; color: var(--content-subtle); line-height: 1.5; margin-top: 12px; }
.exd-step { display: flex; gap: 12px; padding: 11px 0; border-top: 1px solid rgba(12,14,18,.05); font-size: 14px; line-height: 1.45; }
.exd-step:first-child { border-top: 0; }
.exd-step__n { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; background: #fbe6f0; color: #c8377f; font-size: 13px; font-weight: 600; display: grid; place-items: center; }
.exd-bullet { display: flex; gap: 11px; padding: 8px 0; font-size: 14px; line-height: 1.45; align-items: flex-start; }
.exd-bullet::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #c8377f; flex: 0 0 auto; margin-top: 8px; }

/* фокусные зоны + health notice (на обзоре тренировки) */
.wk-focus { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 0; cursor: pointer; font-family: var(--font); background: #fff; border-radius: 16px; padding: 12px 14px; margin: 14px 0 4px; box-shadow: inset 0 0 0 1px rgba(12,14,18,.03); transition: transform .12s ease; }
.wk-focus:active { transform: scale(.99); }
.wk-focus__ic { width: 46px; height: 46px; border-radius: 12px; flex: 0 0 auto; display: grid; place-items: center; background: linear-gradient(160deg,#ffe0e0,#f4b4b4); color: #c24b4b; }
.wk-focus__ic svg { width: 26px; height: 26px; }
.wk-focus__b { flex: 1 1 auto; min-width: 0; }
.wk-focus__t { font-size: 15px; font-weight: 600; }
.wk-focus__m { font-size: 12.5px; color: var(--content-subtle); margin-top: 2px; }
.wk-focus__chev { color: rgba(12,14,18,.28); flex: 0 0 auto; }
.wk-focus__chev svg { width: 20px; height: 20px; }
.wk-notice { display: flex; gap: 12px; align-items: flex-start; background: #fff4ef; border-radius: 16px; padding: 14px 16px; margin: 18px 0 8px; }
.wk-notice__ic { width: 34px; height: 34px; border-radius: 10px; flex: 0 0 auto; display: grid; place-items: center; background: #ffe2cf; color: #b3701a; }
.wk-notice__ic svg { width: 19px; height: 19px; }
.wk-notice__t { font-size: 13.5px; font-weight: 600; color: #8a5a14; }
.wk-notice__m { font-size: 12.5px; color: #9a6b2a; line-height: 1.45; margin-top: 3px; }

/* экран «Фокусные зоны» */
.fa-figs { display: flex; justify-content: center; gap: 14px; padding: 20px 0 4px; }
.fa-figcol { text-align: center; }
.fa-fig { width: 134px; height: auto; display: block; }
.fa-figcol small { font-size: 12px; color: var(--content-subtle); }
.fa-card { padding: 16px; margin-top: 14px; }
.fa-card__t { font-size: 15px; font-weight: 600; }
.fa-card__m { font-size: 13px; color: #c24b4b; margin-top: 3px; font-weight: 500; }
.fa-legend { display: flex; gap: 18px; justify-content: center; margin: 14px 0 4px; }
.fa-legend span { font-size: 12px; color: var(--content-subtle); display: inline-flex; align-items: center; gap: 6px; }
.fa-legend em { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }

/* labs upload */
.lead { font-size: 28px; font-weight: 600; letter-spacing: -0.6px; line-height: 1.12; margin: 4px 2px 8px; }
.lead-sub { font-size: 14px; color: var(--content-subtle); line-height: 1.4; margin: 0 2px 16px; }
.info-banner { display: flex; gap: 10px; align-items: flex-start; background: #e9eaee; border-radius: 14px; padding: 12px 14px; font-size: 13px; line-height: 1.35; margin-bottom: 16px; }
.info-banner svg { width: 18px; height: 18px; flex: 0 0 auto; color: #2b7de3; margin-top: 1px; }
.lab-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 4px; border-top: 1px solid rgba(12,14,18,.07); }
.lab-row:first-child { border-top: 0; }
.lab-row__b { flex: 1 1 auto; min-width: 0; }
.lab-row__n { font-size: 14px; font-weight: 500; }
.badge { display: inline-block; margin-top: 7px; font-size: 11px; font-weight: 500; padding: 3px 9px; border-radius: 9999px; }
.badge.miss { background: #ffe1ee; color: #c2185b; }
.badge.opt { background: #ededf0; color: #6b6c72; }
.badge.req { background: #ffd9e6; color: #c2185b; }
.badge.boost { background: #d8edff; color: #1c6fb3; }
.clip { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border-base); background: #fff; cursor: pointer; display: grid; place-items: center; color: var(--content-strong); flex: 0 0 auto; }
.clip svg { width: 18px; height: 18px; }
.detail__foot { padding: 12px 20px calc(20px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(243,243,245,0), var(--neutral-bg) 30%); position: sticky; bottom: 0; }

/* health lab */
.hl-hero { position: relative; padding: 0 20px 10px; }
.hl-score { background: #fff; border-radius: var(--r-card); padding: 16px; box-shadow: 0 8px 24px rgba(20,4,12,.06); }
.hl-score__top { display: flex; align-items: center; justify-content: space-between; }
.hl-score__lbl { font-size: 13px; color: var(--content-subtle); }
.hl-score__num { font-size: 40px; font-weight: 700; letter-spacing: -1.5px; line-height: 1; margin-top: 4px; }
.hl-score__num b { font-size: 14px; color: var(--content-subtle); font-weight: 500; letter-spacing: 0; margin-left: 6px; }
.hl-score__cap { font-size: 13px; color: var(--content-subtle); margin-top: 6px; }
.hl-mini-bars { display: flex; gap: 3px; height: 10px; margin-top: 10px; }
.hl-mini-bars i { flex: 1; border-radius: 9999px; background: var(--border-base); }
.hl-mini-bars i.on { background: var(--positive); }
.hl-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.hl-cat { background: #fff; border-radius: 14px; padding: 12px; box-shadow: inset 0 0 0 1px rgba(12,14,18,.04); }
.hl-cat__top { display: flex; align-items: center; justify-content: space-between; font-size: 13px; }
.hl-cat__top b { font-size: 16px; font-weight: 600; }
.hl-cat__bar { height: 4px; border-radius: 9999px; margin-top: 8px; }
.welcome-title { font-size: 30px; font-weight: 600; letter-spacing: -0.8px; line-height: 1.1; }
.welcome-sub { font-size: 14px; color: var(--content-subtle); line-height: 1.45; margin: 12px 0 16px; }
.hl-bullet { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.hl-bullet__ic { width: 34px; height: 34px; border-radius: 50%; background: #fbe6f0; display: grid; place-items: center; color: #c8377f; flex: 0 0 auto; }
.hl-bullet__ic svg { width: 18px; height: 18px; }
.hl-bullet__t { font-size: 14px; line-height: 1.35; padding-top: 7px; }
.hl-setup { display: flex; gap: 12px; padding: 16px 4px; border-top: 1px solid rgba(12,14,18,.07); }
.hl-setup:first-child { border-top: 0; }
.hl-setup__ic { width: 24px; flex: 0 0 auto; color: var(--content-strong); }
.hl-setup__b { flex: 1 1 auto; }
.hl-setup__n { font-size: 15px; font-weight: 600; }
.hl-setup__d { font-size: 13px; color: var(--content-subtle); line-height: 1.35; margin: 3px 0 8px; }
.hl-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.disclaimer { font-size: 11px; color: rgba(12,14,18,.32); line-height: 1.4; padding: 18px 4px 0; }

@media (max-width: 480px) {
  body { padding: 0; background: #fff7fd; }
  .device { width: 100vw; height: 100vh; height: 100dvh; max-height: none; border-radius: 0; box-shadow: none; }
  .preview-note { display: none; }
}
.preview-note { position: fixed; left: 0; right: 0; bottom: 14px; text-align: center; color: #6b6c72; font-size: 12px; font-family: var(--font); pointer-events: none; }

/* ============================================================
   ADDED SCREENS (no Figma yet — designed in the same style)
   ============================================================ */

/* hero on rose detail screens (Старт / Маршрут) */
.detail.rose { background: #fff7fd; }
.detail.rose .dhead__btn { background: rgba(255,255,255,.6); }

.kicker { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #c14d86; }
.big-h { font-size: 24px; font-weight: 600; letter-spacing: -0.5px; line-height: 1.12; margin: 6px 0 0; }

/* progress fill */
.pfill { height: 8px; border-radius: 9999px; background: var(--border-base); overflow: hidden; margin-top: 12px; }
.pfill i { display: block; height: 100%; background: var(--positive); border-radius: 9999px; }

/* stepper / journey */
.stepper { margin-top: 4px; }
.step { display: flex; gap: 12px; padding: 10px 0; position: relative; }
.step:not(:last-child)::before { content: ""; position: absolute; left: 13px; top: 32px; bottom: -4px; width: 2px; background: var(--border-base); }
.step__dot { width: 28px; height: 28px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; background: #eceef2; color: var(--content-subtle); position: relative; z-index: 1; }
.step__dot svg { width: 15px; height: 15px; }
.step.done .step__dot { background: var(--positive); color: #1d3b00; }
.step.now .step__dot { background: var(--brand-strong); color: #fff; }
.step__b { padding-top: 3px; }
.step__t { font-size: 14px; font-weight: 500; }
.step.now .step__t { color: var(--content-strong); }
.step__s { font-size: 12px; color: var(--content-subtle); margin-top: 1px; }

/* coach card */
.coach { display: flex; align-items: center; gap: 12px; padding: 14px; background: #faf7f9; border-radius: var(--r-inset); }
.coach img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.coach__r { font-size: 11px; color: var(--content-subtle); }
.coach__n { font-size: 15px; font-weight: 600; }
.coach__m { font-size: 12px; color: var(--content-subtle); margin-top: 1px; }

/* checklist */
.checklist { display: flex; flex-direction: column; gap: 2px; }
.check-item { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; font-size: 14px; }
.check-item svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--positive); margin-top: 1px; }
.num-item { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; font-size: 14px; }
.num-item b { width: 22px; height: 22px; flex: 0 0 auto; border-radius: 50%; background: var(--tile); display: grid; place-items: center; font-size: 12px; font-weight: 600; }

/* plan blocks (Маршрут) */
.pblock { display: flex; gap: 12px; padding: 14px; border-radius: var(--r-inset); background: #f7f7f8; margin-top: 8px; }
.pblock__ic { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 12px; display: grid; place-items: center; background: #fff; }
.pblock__ic svg { width: 20px; height: 20px; }
.pblock__t { font-size: 14px; font-weight: 600; }
.pblock__s { font-size: 12px; color: var(--content-subtle); margin-top: 2px; line-height: 1.35; }
.tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.tag { font-size: 11px; font-weight: 500; padding: 4px 9px; border-radius: 9999px; background: #eceef2; color: #555; }

/* Анкета */
.ob-top { padding: 4px 0 10px; }
.ob-top__lbl { display: flex; justify-content: space-between; font-size: 12px; color: var(--content-subtle); margin-bottom: 8px; }
.chips-steps { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.chips-steps::-webkit-scrollbar { display: none; }
.chip { flex: 0 0 auto; font-size: 12px; font-weight: 500; padding: 7px 12px; border-radius: 9999px; background: #ececef; color: var(--content-subtle); white-space: nowrap; }
.chip.on { background: var(--brand-strong); color: #fff; }
.chip.done { background: #e7f3d4; color: #5b7d1f; }
.q-idx { font-size: 12px; color: var(--content-subtle); margin-top: 14px; }
.q-title { font-size: 20px; font-weight: 600; letter-spacing: -0.4px; line-height: 1.2; margin: 4px 0 2px; }
.q-desc { font-size: 13px; color: var(--content-subtle); line-height: 1.4; margin-bottom: 14px; }
.opt { display: flex; align-items: center; gap: 12px; padding: 15px 16px; border-radius: 14px; background: #fff; border: 1.5px solid var(--border-base); margin-bottom: 8px; cursor: pointer; font-size: 15px; transition: border-color .15s ease, background .15s ease; }
.opt .box { width: 22px; height: 22px; flex: 0 0 auto; border-radius: 7px; border: 1.5px solid #cfd0d6; display: grid; place-items: center; color: #fff; }
.opt .box svg { width: 14px; height: 14px; opacity: 0; }
.opt.sel { border-color: var(--brand-strong); background: #fbf3f7; }
.opt.sel .box { background: var(--brand-strong); border-color: var(--brand-strong); }
.opt.sel .box svg { opacity: 1; }
.opt.radio .box { border-radius: 50%; }
.foot-nav { display: flex; gap: 10px; padding: 12px 20px calc(18px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(243,243,245,0), var(--neutral-bg) 35%); position: sticky; bottom: 0; }
.foot-nav .btn-primary, .foot-nav .btn-secondary { margin-top: 0; }
.foot-nav .btn-secondary { flex: 0 0 auto; width: 120px; }
.foot-nav .btn-primary { flex: 1 1 auto; }

/* Бронь */
.daychips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 10px; scrollbar-width: none; }
.daychips::-webkit-scrollbar { display: none; }
.daychip { flex: 0 0 auto; width: 58px; padding: 10px 0; border-radius: 14px; background: #fff; text-align: center; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(12,14,18,.05); }
.daychip small { display: block; font-size: 11px; color: var(--content-subtle); }
.daychip b { display: block; font-size: 18px; font-weight: 600; margin-top: 2px; }
/* выбранный день — розовая дымка как карточки онбординга (.ob-opt.sel), без сплошной заливки */
.daychip.on { background: #f6eef3; box-shadow: inset 0 0 0 1.5px var(--brand-strong); }
.daychip.on small, .daychip.on b { color: var(--brand-strong); }
.slot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.slot { padding: 14px 0; border-radius: 13px; background: #fff; text-align: center; font-size: 15px; font-weight: 500; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(12,14,18,.06); }
.slot.on { background: #f6eef3; box-shadow: inset 0 0 0 1.5px var(--brand-strong); color: var(--brand-strong); }
.slot.off { color: var(--content-subtle); opacity: .45; }

/* Вес */
.wheel { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 0; }
.wheel .col { display: flex; flex-direction: column; align-items: center; }
.wheel select { font-family: var(--font); font-size: 34px; font-weight: 600; border: 0; background: transparent; text-align: center; color: var(--content-strong); -webkit-appearance: none; appearance: none; padding: 6px 4px; }
.wheel .sep { font-size: 34px; font-weight: 600; }
.wheel .u { font-size: 16px; color: var(--content-subtle); align-self: center; }
.wpreview { text-align: center; font-size: 40px; font-weight: 700; letter-spacing: -1px; }
.wpreview span { font-size: 18px; color: var(--content-subtle); font-weight: 500; }

/* Активный плеер */
.detail.player-bg { background: #0e0a0c; }
.player-top { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px; color: #fff; }
.player-top .pos { font-size: 14px; font-weight: 600; }
.player-top button { background: transparent; border: 0; color: rgba(255,255,255,.85); font-family: var(--font); font-size: 14px; cursor: pointer; display: grid; place-items: center; }
.player-top .dhead__btn { background: rgba(255,255,255,.12); color: #fff; }
.player-prog { height: 4px; margin: 4px 16px 0; border-radius: 9999px; background: rgba(255,255,255,.16); overflow: hidden; }
.player-prog i { display: block; height: 100%; width: 38%; background: #f6a8cd; border-radius: 9999px; }
.player-media { margin: 14px 16px 0; height: 230px; border-radius: 20px; background: linear-gradient(160deg,#2a1a22,#171015); display: grid; place-items: center; color: rgba(255,255,255,.5); position: relative; overflow: hidden; }
.player-media svg { width: 54px; height: 54px; }
.player-media .play { position: absolute; width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,.9); display: grid; place-items: center; color: #1d020c; }
.player-media .play svg { width: 26px; height: 26px; margin-left: 3px; }
.player-body { color: #fff; padding: 16px; }
.player-sec { font-size: 12px; color: rgba(255,255,255,.5); text-transform: uppercase; letter-spacing: .04em; }
.player-name { font-size: 22px; font-weight: 600; letter-spacing: -0.4px; margin-top: 4px; }
.player-presc { font-size: 13px; color: rgba(255,255,255,.6); margin-top: 4px; }
.set-row { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.07); border-radius: 14px; padding: 12px 14px; margin-top: 8px; }
.set-row .sn { font-size: 13px; color: rgba(255,255,255,.6); width: 70px; }
.set-row .inp { flex: 1 1 0; text-align: center; }
.set-row .inp small { display: block; font-size: 10px; color: rgba(255,255,255,.45); }
.set-row .inp b { font-size: 18px; font-weight: 600; }
.set-row .chk { width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto; border: 1.5px solid rgba(255,255,255,.3); display: grid; place-items: center; color: transparent; }
.set-row.done .chk { background: var(--positive); border-color: var(--positive); color: #1d3b00; }
.set-row.done .chk svg { width: 16px; height: 16px; }
.timer-banner { display: flex; align-items: center; justify-content: space-between; margin: 12px 16px 0; padding: 14px 16px; border-radius: 16px; background: rgba(246,168,205,.16); color: #fff; }
.timer-banner b { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.player-nav { display: flex; gap: 10px; padding: 14px 16px calc(20px + env(safe-area-inset-bottom)); }
.player-nav button { flex: 1 1 0; border: 0; cursor: pointer; border-radius: 9999px; padding: 15px; font-family: var(--font); font-size: 15px; font-weight: 600; }
.player-nav .prev { background: rgba(255,255,255,.12); color: #fff; }
.player-nav .next { background: #f6a8cd; color: #2a0a18; }

/* ============================================================
   FUNCTIONAL DEPTH (Сегодня / Тренировки / Старт)
   ============================================================ */

/* Discipline card (delicate, matches the real app) */
.disc { padding: 15px 16px; }
.disc__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.disc__lbl { font-size: 13px; font-weight: 600; color: rgba(12,14,18,.6); }
.disc__pct { font-size: 30px; font-weight: 600; letter-spacing: -.8px; line-height: 1; margin-top: 9px; display: inline-flex; align-items: baseline; gap: 8px; }
.disc__pct small { font-size: 12px; font-weight: 500; color: rgba(12,14,18,.42); letter-spacing: 0; }
.disc__pills { display: flex; gap: 7px; margin-top: 11px; }
.dpill { font-size: 11.5px; font-weight: 600; padding: 4px 11px; border-radius: 100px; background: #f4f4f6; color: rgba(12,14,18,.6); }
.mtg-badge { font-size: 11px; font-weight: 600; padding: 5px 10px; border-radius: 999px; white-space: nowrap; }
.dpill.accent { background: #f6eef3; color: var(--brand-strong); }

/* small inline segmented control — пилюля по макету */
.seg--sm { display: inline-flex; gap: 2px; margin: 0; padding: 3px; border-radius: 100px; flex: 0 0 auto; background: #f0ecef; }
.seg--sm button { flex: 0 0 auto; padding: 4px 10px; font-size: 11.5px; font-weight: 600; border-radius: 100px; color: rgba(12,14,18,.42); }
.seg--sm button.on { background: #fff; color: var(--brand-strong); box-shadow: 0 2px 6px rgba(20,4,12,.1); }

/* Быстрый лог — quick-log grid (delicate) */
.qlog { padding: 16px; }
.qlog__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.qlog__title { font-size: 16px; font-weight: 600; letter-spacing: -.2px; }
.qlog__hint { font-size: 12px; color: var(--content-subtle); margin: 8px 0 12px; line-height: 1.4; }
.qlog__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.qlog__item { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-radius: 14px; background: #f6f6f8; cursor: pointer; border: 0; font-family: var(--font); text-align: left; transition: transform .12s ease, background .15s ease; }
.qlog__item:active { transform: scale(.98); }
.qlog__dot { width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; background: #e6e7ec; color: #a0a1a8; }
.qlog__dot svg { width: 15px; height: 15px; }
.qlog__item.todo .qlog__dot { background: var(--brand-strong); color: #fff; }
.qlog__item.done .qlog__dot { background: #e3f0cf; color: #5b7d1f; }
.qlog__b { display: flex; flex-direction: column; min-width: 0; }
.qlog__n { font-size: 14px; font-weight: 600; letter-spacing: -.1px; }
.qlog__s { font-size: 12px; color: var(--content-subtle); margin-top: 1px; }
.qlog__item.done .qlog__s { color: #6f8f41; }

/* Дневник — минимальные строки ТОЧНО по макету Главной C (.mlist/.mrow) */
.mlist { background: #fff; border-radius: 20px; box-shadow: 0 10px 26px rgba(20,4,12,.05), inset 0 0 0 1px rgba(12,14,18,.05); padding: 3px 16px; }
.mrow { display: flex; align-items: center; gap: 13px; width: 100%; padding: 13px 0; border: 0; background: transparent; font-family: var(--font); text-align: left; cursor: pointer; }
.mrow + .mrow { border-top: 1px solid rgba(12,14,18,.05); }
.mrow__ic { width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; color: #4d473f; }
.mrow__ic svg { width: 21px; height: 21px; }
.mrow.done .mrow__ic { color: var(--brand-strong); }
.mrow__b { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.mrow__n { font-size: 14.5px; font-weight: 500; letter-spacing: -.1px; line-height: 1.25; }
.mrow__s { font-size: 12px; color: rgba(12,14,18,.42); margin-top: 3px; line-height: 1.3; }
.mrow__v { font-size: 13px; color: rgba(12,14,18,.6); font-weight: 500; margin-right: 2px; }
.ck { width: 25px; height: 25px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; box-shadow: inset 0 0 0 1.4px rgba(12,14,18,.07); color: #c4c0c7; }
.ck svg { width: 13px; height: 13px; }
.mrow.done .ck { background: var(--brand-strong); box-shadow: none; color: #fff; }
.add { width: 25px; height: 25px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; box-shadow: inset 0 0 0 1.4px rgba(160,80,120,.14); color: var(--brand-strong); }
.add svg { width: 13px; height: 13px; }
.mrow--ro { cursor: default; }
.mrow--ro.pending { opacity: .5; }
.mrow__empty { padding: 13px 2px; color: rgba(12,14,18,.42); font-size: 13px; }

/* Карточка еды D3 (журнальная) */
.mealcover { position: relative; width: 100%; aspect-ratio: 5/4; border-radius: 20px; overflow: hidden; margin: 6px 0 14px; background: linear-gradient(150deg,#efe1cf,#dcc4a8); }
.mealcover__ph { position: absolute; inset: 0; display: grid; place-items: center; color: #b9a98f; }
.mealcover__grad { position: absolute; inset: 0; background: linear-gradient(180deg,rgba(20,4,12,.16) 0%,transparent 32%,transparent 52%,rgba(20,4,12,.6) 100%); }
.mealcover__redo { position: absolute; right: 11px; top: 11px; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: #fff; background: rgba(20,4,12,.42); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 0; border-radius: 100px; padding: 7px 12px; font-family: var(--font); cursor: pointer; }
.mealcover__redo svg { width: 14px; height: 14px; }
.mealcover__meta { position: absolute; left: 16px; right: 16px; bottom: 14px; color: #fff; display: flex; align-items: flex-end; justify-content: space-between; }
.mealcover__slot { position: relative; font-size: 20px; font-weight: 600; letter-spacing: -.3px; display: inline-flex; align-items: center; gap: 6px; }
.mealcover__slot svg { width: 18px; height: 18px; opacity: .8; }
.mealcover__slot select { position: absolute; inset: 0; opacity: 0; width: 100%; border: 0; cursor: pointer; -webkit-appearance: none; appearance: none; }
.mealcover__time { position: relative; font-size: 13.5px; opacity: .92; border-bottom: 1.5px solid rgba(255,255,255,.5); display: inline-flex; gap: 5px; align-items: center; padding-bottom: 1px; }
.mealcover__time svg { width: 14px; height: 14px; }
.mealcover__time input { position: absolute; inset: 0; opacity: 0; width: 100%; border: 0; cursor: pointer; }
.mealstrip { display: flex; gap: 8px; margin: 0 0 14px; overflow-x: auto; scrollbar-width: none; }
.mealstrip::-webkit-scrollbar { display: none; }
.mealstrip__i { width: 72px; height: 72px; border-radius: 14px; flex: 0 0 auto; position: relative; background: #e9d8c4 center/cover no-repeat; }
.mealstrip__x { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 50%; background: rgba(20,4,12,.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; border: 0; font-size: 10px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.mealstrip__add { width: 72px; height: 72px; border-radius: 14px; flex: 0 0 auto; border: 0; background: #fff; box-shadow: inset 0 0 0 1.4px rgba(160,80,120,.2); color: var(--brand-strong); font-size: 22px; cursor: pointer; }
.mealnote { background: #fff; border-radius: 18px; box-shadow: inset 0 0 0 1px var(--border-base); padding: 13px 16px; }
.mealnote__h { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 7px; }
.mealnote__h span:first-child { font-size: 13px; font-weight: 600; letter-spacing: -.1px; }
.mealnote__req { font-size: 11px; color: #bb6; font-weight: 600; }
.mealnote textarea { width: 100%; border: 0; background: transparent; font-size: 14.5px; resize: none; outline: none; font-family: inherit; line-height: 1.5; color: var(--content-strong); }
.mealnote textarea::placeholder { color: rgba(12,14,18,.32); }

/* Дневник питания — строки приёмов (фото + заметка, без калорий) */
.meal-items { margin-top: 10px; }
.mealday { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 0; border: 0; background: transparent; font-family: var(--font); text-align: left; cursor: pointer; }
.mealday + .mealday { border-top: 1px solid var(--border-base); }
.mealday__thumb { width: 44px; height: 44px; border-radius: 12px; flex: 0 0 auto; background: #efe1cf center/cover no-repeat; }
.mealday__thumb--ph { display: grid; place-items: center; color: #b9a98f; background: var(--tile); }
.mealday__thumb--ph svg { width: 20px; height: 20px; }
.mealday__b { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.mealday__n { font-size: 14px; font-weight: 500; letter-spacing: -.1px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mealday__s { font-size: 12px; color: var(--content-subtle); margin-top: 2px; }
.mealday__chev { color: rgba(12,14,18,.26); flex: 0 0 auto; }
.mealday__chev svg { width: 18px; height: 18px; display: block; }

/* ---- Встреча с коучем (card on Сегодня) ---- */
.meet { display: flex; align-items: center; gap: 12px; padding: 13px 14px; cursor: pointer; }
.meet img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.meet__b { flex: 1 1 auto; min-width: 0; }
.meet__lbl { font-size: 12px; color: var(--content-subtle); display: inline-flex; align-items: center; gap: 6px; }
.meet__lbl .zoom { font-size: 10px; font-weight: 600; color: #2b7de3; background: #e7f0fc; padding: 2px 6px; border-radius: 6px; }
.meet__when { font-size: 15px; font-weight: 600; letter-spacing: -.2px; margin-top: 2px; }
.meet__theme { font-size: 12px; color: var(--content-subtle); margin-top: 1px; }
.meet__chev { color: rgba(12,14,18,.28); flex: 0 0 auto; }
.meet__chev svg { width: 20px; height: 20px; }

/* Премиальная карточка встречи (акцент-герой на «Сегодня») */
.meet-hero { position: relative; overflow: hidden; padding: 13px 15px; cursor: pointer; display: flex; align-items: center; gap: 13px; }
.meet-hero__glow { display: none; }
.meet-hero img { width: 48px; height: 48px; border-radius: 15px; object-fit: cover; flex: 0 0 auto; background: linear-gradient(150deg,#f6d9e6,#d9c2ef); box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); position: relative; }
.meet-hero__b { flex: 1 1 auto; min-width: 0; position: relative; }
.meet-hero__lbl { font-size: 12px; color: var(--content-subtle); font-weight: 500; display: inline-flex; align-items: center; gap: 7px; }
.meet-hero__lbl .ztag { font-size: 10px; font-weight: 600; letter-spacing: .02em; color: var(--content-subtle); background: #f1f1f3; padding: 1.5px 7px; border-radius: 100px; }
.meet-hero__when { font-size: 17px; font-weight: 600; letter-spacing: -.3px; margin-top: 3px; color: var(--content-strong); }
.meet-hero__sub { font-size: 12.5px; color: var(--content-subtle); margin-top: 2px; }
.meet-hero__chev { position: relative; color: rgba(12,14,18,.26); flex: 0 0 auto; display: grid; place-items: center; }
.meet-hero__chev svg { width: 20px; height: 20px; }

/* ---- Мой путь (16-week journey) ---- */
.jhero { padding: 2px 2px 0; }
.jhero__kicker { font-size: 12px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: #c14d86; }
.jhero__theme { font-size: 26px; font-weight: 600; letter-spacing: -.6px; line-height: 1.1; margin: 6px 0 4px; }
.jhero__phase { font-size: 13px; color: rgba(28,10,18,.55); }
.jprog { display: flex; gap: 3px; height: 8px; margin-top: 14px; }
.jprog i { flex: 1; border-radius: 9999px; background: rgba(12,14,18,.12); }
.jprog i.done { background: var(--positive); }
.jprog i.now { background: var(--brand-strong); }
.jprog-lbl { font-size: 12px; color: rgba(28,10,18,.5); margin-top: 8px; }

.week-card { padding: 16px; margin-top: 14px; }
.week-card__lbl { font-size: 12px; color: var(--content-subtle); }
.week-card__theme { font-size: 19px; font-weight: 600; letter-spacing: -.3px; margin-top: 2px; }
.week-card__desc { font-size: 13px; color: var(--content-subtle); line-height: 1.45; margin-top: 6px; }
.wk-item { display: flex; gap: 12px; padding: 13px 0 2px; border-top: 1px solid rgba(12,14,18,.06); margin-top: 12px; }
.wk-item__ic { width: 36px; height: 36px; border-radius: 11px; flex: 0 0 auto; display: grid; place-items: center; }
.wk-item__ic svg { width: 19px; height: 19px; }
.wk-item__b { flex: 1 1 auto; min-width: 0; }
.wk-item__t { font-size: 14px; font-weight: 600; }
.wk-item__d { font-size: 12.5px; color: var(--content-subtle); line-height: 1.4; margin-top: 2px; }
.wk-item__go { font-size: 12px; font-weight: 600; color: #c8377f; margin-top: 7px; display: inline-flex; align-items: center; gap: 4px; }
.wk-item__go svg { width: 13px; height: 13px; }

.phase-h { display: flex; align-items: baseline; justify-content: space-between; padding: 20px 4px 8px; }
.phase-h b { font-size: 13px; font-weight: 600; }
.phase-h span { font-size: 12px; color: var(--content-subtle); }
.wtl { padding: 4px 12px; }
.wrow { display: flex; align-items: center; gap: 12px; padding: 9px 0; cursor: pointer; }
.wrow + .wrow { border-top: 1px solid rgba(12,14,18,.05); }
.wrow__node { width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; background: #eceef2; color: #9a9ba2; font-size: 12px; font-weight: 600; }
.wrow__node svg { width: 15px; height: 15px; }
.wrow.done .wrow__node { background: #e3f0cf; color: #5b7d1f; }
.wrow.now .wrow__node { background: var(--brand-strong); color: #fff; }
.wrow__b { flex: 1 1 auto; min-width: 0; }
.wrow__t { font-size: 14px; font-weight: 500; }
.wrow.future .wrow__t { color: var(--content-subtle); }
.wrow__s { font-size: 12px; color: var(--content-subtle); margin-top: 1px; }
.wrow.now .wrow__s { color: #c8377f; font-weight: 500; }
.wrow__chev { color: rgba(12,14,18,.25); flex: 0 0 auto; }
.wrow__chev svg { width: 18px; height: 18px; }
.wrow.future .wrow__chev { color: rgba(12,14,18,.15); }

/* ---- Мой путь · premium hero + lecture card ---- */
.sect-h { display: flex; align-items: center; justify-content: space-between; padding: 2px 2px 10px; }
.sect-h__t { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #9a9ba2; }
.sect-h__lk { font-size: 13px; font-weight: 600; color: #2b7de3; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.sect-h__lk svg { width: 14px; height: 14px; }

.phero { position: relative; overflow: hidden; border-radius: 22px; padding: 20px; color: #fff; background: linear-gradient(135deg, #7b61c9 0%, #6a4fbe 55%, #5b41ad 100%); box-shadow: 0 16px 36px rgba(91,65,173,.34); }
.phero__glow { position: absolute; top: -55px; right: -45px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.20), rgba(255,255,255,0) 68%); pointer-events: none; }
.phero__kicker { position: relative; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.72); }
.phero__theme { position: relative; font-size: 27px; font-weight: 700; letter-spacing: -.6px; margin-top: 8px; }
.phero__desc { position: relative; font-size: 14px; line-height: 1.45; color: rgba(255,255,255,.9); margin-top: 8px; max-width: 92%; }
.phero__chip { position: relative; display: inline-flex; align-items: center; gap: 7px; margin-top: 16px; background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); color: #fff; font-size: 12px; font-weight: 600; padding: 8px 13px; border-radius: 9999px; cursor: pointer; }
.phero__chip svg { width: 14px; height: 14px; }

.lcard { padding: 14px; margin-top: 12px; }
.lrow { display: flex; gap: 14px; align-items: center; cursor: pointer; }
.lthumb { width: 62px; height: 62px; border-radius: 16px; flex: 0 0 auto; background: linear-gradient(140deg, #5aa0f2, #3b6fd4); display: grid; place-items: center; box-shadow: 0 8px 18px rgba(59,111,212,.32); }
.lthumb .play { width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.94); display: grid; place-items: center; color: #3b6fd4; }
.lthumb .play svg { width: 13px; height: 13px; margin-left: 2px; }
.lrow__b { flex: 1 1 auto; min-width: 0; }
.lrow__k { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: #9a9ba2; }
.lrow__t { font-size: 15px; font-weight: 600; letter-spacing: -.2px; margin-top: 2px; }
.lrow__m { font-size: 13px; color: var(--content-subtle); margin-top: 2px; }
.lprog { height: 5px; border-radius: 9999px; background: #e9eaef; margin-top: 13px; overflow: hidden; }
.lprog i { display: block; height: 100%; background: linear-gradient(90deg, #5aa0f2, #3b6fd4); border-radius: 9999px; }
.lnext { display: flex; align-items: center; gap: 12px; padding-top: 14px; margin-top: 14px; border-top: 1px solid rgba(12,14,18,.06); }
.lnext__ic { width: 46px; height: 46px; border-radius: 14px; flex: 0 0 auto; background: #eff0f3; display: grid; place-items: center; color: #a8a9b0; }
.lnext__ic svg { width: 20px; height: 20px; }
.lnext__b { flex: 1 1 auto; min-width: 0; }
.lnext__t { font-size: 14px; font-weight: 600; }
.lnext__s { font-size: 12px; color: var(--content-subtle); margin-top: 1px; }
.lnext__lock { font-size: 12px; color: var(--content-subtle); display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; }
.lnext__lock svg { width: 13px; height: 13px; }

/* ---- Материалы недели ---- */
.mat-row { display: flex; align-items: center; gap: 12px; padding: 12px 2px; cursor: pointer; }
.mat-row + .mat-row { border-top: 1px solid rgba(12,14,18,.05); }
.mat-row__ic { width: 44px; height: 44px; border-radius: 13px; flex: 0 0 auto; display: grid; place-items: center; }
.mat-row__ic svg { width: 21px; height: 21px; }
.mat-row__b { flex: 1 1 auto; min-width: 0; }
.mat-row__t { font-size: 14px; font-weight: 600; letter-spacing: -.1px; }
.mat-row__m { font-size: 12px; color: var(--content-subtle); margin-top: 1px; }
.mat-row__act { color: rgba(12,14,18,.3); flex: 0 0 auto; display: grid; place-items: center; }
.mat-row__act svg { width: 19px; height: 19px; }
.mat-row.locked .mat-row__t { color: var(--content-subtle); }
.mat-row.locked .mat-row__ic { opacity: .7; }

/* ---- Путь-таймлайн (фазы/недели) ---- */
.tl { padding: 4px 16px 12px; }
.tl-item { display: flex; gap: 14px; }
.tl-rail { width: 28px; flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; }
.tl-node { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; font-size: 12px; font-weight: 600; background: #eceef2; color: #9a9ba2; }
.tl-node svg { width: 14px; height: 14px; }
.tl-spine { width: 2px; flex: 1 1 auto; min-height: 14px; background: rgba(12,14,18,.09); margin: 3px 0; border-radius: 2px; }
.tl-item:last-child .tl-spine { display: none; }
.tl-item.done .tl-node { background: #e3f0cf; color: #5b7d1f; }
.tl-item.now .tl-node { background: var(--brand-strong); color: #fff; box-shadow: 0 0 0 4px rgba(245,64,151,.14); }
.tl-body { flex: 1 1 auto; min-width: 0; padding: 3px 0 14px; }
.tl-item:last-child .tl-body { padding-bottom: 4px; }
.tl-t { font-size: 14px; font-weight: 500; }
.tl-item.future .tl-t { color: var(--content-subtle); }
.tl-item.now .tl-t { font-weight: 600; }
.tl-s { font-size: 12px; color: var(--content-subtle); margin-top: 1px; }
.tl-item.now .tl-s { color: #c8377f; font-weight: 500; }
.tl-now { background: #fbf3f7; border-radius: 12px; padding: 9px 12px; box-shadow: inset 0 0 0 1px rgba(245,64,151,.16); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tl-now .wrow__chev { color: #c8377f; }
.tl-now .wrow__chev svg { width: 18px; height: 18px; display: block; }

/* phero with progress ring */
.phero__row { display: flex; align-items: center; gap: 16px; position: relative; }
.phero__txt { flex: 1 1 auto; min-width: 0; }
.phero__ring { flex: 0 0 auto; width: 74px; height: 74px; position: relative; display: grid; place-items: center; }
.phero__ring svg { width: 74px; height: 74px; transform: rotate(-90deg); }
.phero__ringc { position: absolute; text-align: center; color: #fff; }
.phero__ringc b { font-size: 18px; font-weight: 700; letter-spacing: -.5px; }
.phero__ringc span { display: block; font-size: 9px; color: rgba(255,255,255,.7); text-transform: uppercase; letter-spacing: .05em; margin-top: 1px; }

/* compact phase cards */
.phase-card { display: flex; align-items: center; gap: 13px; padding: 14px 16px; cursor: pointer; }
.phase-badge { width: 42px; height: 42px; border-radius: 13px; flex: 0 0 auto; display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.phase-badge svg { width: 18px; height: 18px; }
.phase-badge.done { background: #e3f0cf; color: #5b7d1f; }
.phase-badge.future { background: #eef0f3; color: #a8a9b0; }
.phase-card__b { flex: 1 1 auto; min-width: 0; }
.phase-card__t { font-size: 15px; font-weight: 600; }
.phase-card.future .phase-card__t { color: #6b6c72; }
.phase-card__s { font-size: 12px; color: var(--content-subtle); margin-top: 2px; }
.phase-dots { display: flex; gap: 3px; margin-top: 7px; }
.phase-dots i { width: 16px; height: 4px; border-radius: 2px; background: var(--border-base); }
.phase-dots i.on { background: var(--positive); }
.phase-card__chev { color: rgba(12,14,18,.28); flex: 0 0 auto; }
.phase-card__chev svg { width: 20px; height: 20px; }

/* current phase expanded header */
.phase-now-h { display: flex; align-items: center; justify-content: space-between; padding: 4px 2px 10px; }
.phase-now-h b { font-size: 15px; font-weight: 600; }
.phase-now-h .now-pill { font-size: 11px; font-weight: 600; color: #c8377f; background: #fbe6f0; padding: 4px 10px; border-radius: 9999px; }

/* premium week rows (theme icons instead of numbered stepper) */
.wkr { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 14px; cursor: pointer; }
.wkr + .wkr { margin-top: 4px; }
.wkr__ic { width: 44px; height: 44px; border-radius: 13px; flex: 0 0 auto; display: grid; place-items: center; }
.wkr__ic svg { width: 22px; height: 22px; }
.wkr__b { flex: 1 1 auto; min-width: 0; }
.wkr__t { font-size: 14px; font-weight: 600; }
.wkr__m { font-size: 12px; color: var(--content-subtle); margin-top: 1px; }
.wkr__end { flex: 0 0 auto; color: rgba(12,14,18,.28); display: grid; place-items: center; }
.wkr__end svg { width: 18px; height: 18px; }
.wkr.now { background: #fbf3f7; box-shadow: inset 0 0 0 1px rgba(245,64,151,.16); }
.wkr.now .wkr__m { color: #c8377f; font-weight: 500; }
.wkr.now .wkr__end { color: #c8377f; }
.wkr.locked .wkr__t { color: #6b6c72; }
.wkr.locked .wkr__ic { opacity: .75; }

/* Библиотека материалов — entry block */
.lib-entry { display: flex; align-items: center; gap: 13px; padding: 15px 16px; cursor: pointer; background: linear-gradient(120deg,#2a1430,#3c1d46); color: #fff; }
.lib-entry__ic { width: 44px; height: 44px; border-radius: 13px; flex: 0 0 auto; background: rgba(255,255,255,.12); display: grid; place-items: center; color: #f6a8cd; }
.lib-entry__ic svg { width: 22px; height: 22px; }
.lib-entry__b { flex: 1 1 auto; min-width: 0; }
.lib-entry__t { font-size: 15px; font-weight: 600; }
.lib-entry__s { font-size: 12px; color: rgba(255,255,255,.65); margin-top: 2px; }
.lib-entry__chev { color: rgba(255,255,255,.55); flex: 0 0 auto; }
.lib-entry__chev svg { width: 20px; height: 20px; }

/* Library screen */
.searchbar { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 14px; padding: 12px 14px; box-shadow: inset 0 0 0 1px rgba(12,14,18,.06); margin: 2px 0 12px; }
.searchbar svg { width: 18px; height: 18px; color: var(--content-subtle); flex: 0 0 auto; }
.searchbar input { border: 0; outline: 0; background: transparent; font-family: var(--font); font-size: 15px; width: 100%; color: var(--content-strong); }
.chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 6px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip-f { flex: 0 0 auto; font-size: 13px; font-weight: 500; padding: 8px 14px; border-radius: 9999px; background: #fff; color: var(--content-subtle); box-shadow: inset 0 0 0 1px rgba(12,14,18,.06); cursor: pointer; }
.chip-f.on { background: var(--brand-strong); color: #fff; box-shadow: none; }
.lib-group__h { display: flex; align-items: baseline; justify-content: space-between; padding: 16px 2px 8px; }
.lib-group__h b { font-size: 14px; font-weight: 600; }
.lib-group__h span { font-size: 12px; color: var(--content-subtle); }

/* ---- Мой план ---- */
.plan-goal { position: relative; overflow: hidden; padding: 18px; color: #fff; background: linear-gradient(135deg, #5db89a 0%, #3f9f86 55%, #2f8f7e 100%); box-shadow: 0 16px 34px rgba(47,143,126,.30); }
.plan-goal__glow { position: absolute; top: -50px; right: -40px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.20), rgba(255,255,255,0) 68%); }
.plan-goal__lbl { position: relative; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.78); }
.plan-goal__row { position: relative; display: flex; align-items: baseline; gap: 10px; margin-top: 8px; }
.plan-goal__w { font-size: 26px; font-weight: 700; letter-spacing: -.6px; }
.plan-goal__row svg { width: 20px; height: 20px; color: rgba(255,255,255,.7); align-self: center; }
.plan-goal__bars { position: relative; display: flex; gap: 3px; height: 14px; margin-top: 14px; }
.plan-goal__bars i { flex: 1 1 0; border-radius: 9999px; background: rgba(255,255,255,.28); }
.plan-goal__bars i.on { background: #fff; }
.plan-goal__why { position: relative; font-size: 13px; color: rgba(255,255,255,.9); line-height: 1.45; margin-top: 14px; }

.plan-sec { padding: 16px; margin-top: 10px; }
.plan-sec__head { display: flex; align-items: center; gap: 12px; }
.plan-sec__ic { width: 44px; height: 44px; border-radius: 13px; flex: 0 0 auto; display: grid; place-items: center; }
.plan-sec__ic svg { width: 22px; height: 22px; }
.plan-sec__t { font-size: 16px; font-weight: 600; flex: 1 1 auto; letter-spacing: -.2px; }
.plan-sec__chev { color: rgba(12,14,18,.28); flex: 0 0 auto; display: grid; place-items: center; }
.plan-sec__chev svg { width: 20px; height: 20px; }
.plan-sec__target { font-size: 16px; font-weight: 600; margin-top: 14px; letter-spacing: -.2px; }
.plan-sec__target span { color: var(--content-subtle); font-weight: 400; font-size: 13px; }
.plan-sec__why { font-size: 13px; color: var(--content-subtle); line-height: 1.45; margin-top: 8px; }
.plan-sec__why b { color: var(--content-strong); font-weight: 600; }
.plan-sec__chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }

/* Прогноз к цели (forecast chart hero) */
.plan-forecast { padding: 16px 16px 14px; }
.plan-forecast__top { display: flex; align-items: center; justify-content: space-between; }
.plan-forecast__lbl { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--content-subtle); }
.plan-forecast__goalpill { font-size: 12px; font-weight: 600; color: #2f9f7e; background: #e3f4ee; padding: 5px 11px; border-radius: 9999px; }
.plan-forecast__date { font-size: 25px; font-weight: 700; letter-spacing: -.7px; margin-top: 8px; }
.plan-forecast__date b { color: #2bb37a; }
.plan-forecast__sub { font-size: 13px; color: var(--content-subtle); margin-top: 3px; }
.plan-forecast__chart { width: 100%; height: auto; display: block; margin-top: 12px; overflow: visible; }
.plan-forecast__x { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; color: var(--content-subtle); padding: 0 2px; }
.fc-grid { stroke: rgba(12,14,18,.06); stroke-width: 1; }
.fc-glabel { font-size: 9px; fill: rgba(12,14,18,.3); font-family: "Geist", sans-serif; }
.fc-zone { fill: rgba(32,179,120,.045); }
.fc-today { stroke: rgba(12,14,18,.12); stroke-width: 1; stroke-dasharray: 2 3; }
.fc-target-line { stroke: rgba(32,179,120,.35); stroke-width: 1.4; stroke-dasharray: 4 4; }
.fc-area { opacity: 0; animation: fcFade .9s ease .4s forwards; }
.fc-line { fill: none; stroke: #6bbf3a; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: fcDraw 1.3s cubic-bezier(.4,0,.2,1) .2s forwards; }
.fc-proj { fill: none; stroke: #8cce5a; stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 5 4; opacity: 0; animation: fcFade .9s ease 1.35s forwards; }
.fc-base { stroke: rgba(32,179,120,.18); stroke-width: 1; stroke-dasharray: 2 4; }
.fc-nowtext { fill: rgba(12,14,18,.42); font-family: "Geist", sans-serif; font-weight: 600; opacity: 0; animation: fcFade .4s ease 1.15s forwards; }
.fc-glow-now, .fc-glow-goal { transform-box: fill-box; transform-origin: center; opacity: 0; }
.fc-glow-now { fill: #5fb22a; animation: fcPulse 2.2s ease 1.3s infinite; }
.fc-glow-goal { fill: #20b378; animation: fcPulse 2.2s ease 2.4s infinite; }
.fc-dot-now { transform-box: fill-box; transform-origin: center; opacity: 0; animation: fcPop .4s cubic-bezier(.34,1.56,.64,1) 1.05s forwards; }
.fc-dot-goal { transform-box: fill-box; transform-origin: center; opacity: 0; animation: fcPop .5s cubic-bezier(.34,1.56,.64,1) 2.25s forwards; }
.fc-nowlabel { opacity: 0; animation: fcRise .4s ease 1.15s forwards; }
.fc-pin { opacity: 0; animation: fcRise .5s ease 2.35s forwards; }
.fc-pin rect { fill: #20b378; }
.fc-pin text, .fc-nowlabel text { font-family: "Geist", sans-serif; font-weight: 700; }
@keyframes fcDraw { to { stroke-dashoffset: 0; } }
@keyframes fcFade { to { opacity: 1; } }
@keyframes fcRise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fcPop { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
@keyframes fcPulse { 0%, 100% { opacity: 0; transform: scale(1); } 50% { opacity: .2; transform: scale(1.6); } }

/* "от коуча" tag + конструктор CTA */
.coach-tag { font-size: 10px; font-weight: 600; letter-spacing: .02em; color: #c8377f; background: #fbe6f0; padding: 3px 8px; border-radius: 9999px; flex: 0 0 auto; }
.plan-cta { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 14px; border: 0; cursor: pointer; border-radius: 14px; padding: 14px; font-family: var(--font); font-size: 14px; font-weight: 600; background: var(--brand-strong); color: #fff; transition: transform .12s ease; }
.plan-cta:active { transform: scale(.98); }
.plan-cta svg { width: 17px; height: 17px; }
.plan-intro { display: flex; gap: 10px; align-items: flex-start; background: #fff; border-radius: 14px; padding: 12px 14px; box-shadow: inset 0 0 0 1px rgba(12,14,18,.05); font-size: 12.5px; line-height: 1.4; color: var(--content-subtle); margin: 2px 0 12px; }
.plan-intro svg { width: 18px; height: 18px; flex: 0 0 auto; color: #c8377f; margin-top: 1px; }

/* секция-хедер с «почему» */
.sec-why { font-size: 13px; color: var(--content-subtle); line-height: 1.45; }
.sec-why b { color: var(--content-strong); font-weight: 600; }

/* Сон: график ночей */
.sleep-bars { display: flex; gap: 6px; align-items: flex-end; height: 72px; margin-top: 14px; }
.sleep-bars .col { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.sleep-bars i { width: 100%; border-radius: 6px; background: linear-gradient(180deg, #9aa6f2, #6c7cd6); }
.sleep-bars i.low { background: linear-gradient(180deg, #f2b48a, #e89a6c); }
.sleep-bars small { font-size: 10px; color: var(--content-subtle); }

/* Вечерний ритуал */
.ritual { display: flex; gap: 12px; align-items: flex-start; padding: 11px 2px; }
.ritual + .ritual { border-top: 1px solid rgba(12,14,18,.05); }
.ritual__n { width: 27px; height: 27px; border-radius: 50%; flex: 0 0 auto; background: #eef0f3; display: grid; place-items: center; font-size: 12px; font-weight: 600; color: var(--content-subtle); }
.ritual__t { flex: 1 1 auto; min-width: 0; font-size: 14px; line-height: 1.45; padding-top: 3px; }

/* ---------- Мини-таймер шага (кликабельный, кольцо-прогресс) ---------- */
.rec-timer { display: inline-flex; align-items: center; gap: 9px; margin-top: 10px; padding: 5px 14px 5px 5px; border-radius: var(--r-pill); background: #fbedf4; box-shadow: inset 0 0 0 1px rgba(216,69,138,.12); user-select: none; -webkit-user-select: none; transition: background .25s ease, box-shadow .25s ease; }
.rec-timer__btn { position: relative; width: 32px; height: 32px; flex: 0 0 auto; border: 0; border-radius: 50%; background: #e6589b; color: #fff; cursor: pointer; display: grid; place-items: center; box-shadow: 0 2px 7px rgba(216,69,138,.32); transition: transform .12s ease, background .25s ease; }
.rec-timer__btn:active { transform: scale(.9); }
.rec-timer__ring { position: absolute; inset: 0; }
.rec-timer__ring .rt-arc { transition: stroke-dashoffset 1s linear; }
.rec-timer__ic { position: relative; z-index: 1; display: inline-flex; }
.rec-timer__time { font-size: 14px; font-weight: 700; color: #c43d80; font-variant-numeric: tabular-nums; letter-spacing: .4px; min-width: 36px; }
.rec-timer__reset { width: 27px; height: 27px; flex: 0 0 auto; border: 0; border-radius: 50%; background: rgba(216,69,138,.09); color: #c14a86; cursor: pointer; display: grid; place-items: center; transition: transform .15s ease, background .2s ease; }
.rec-timer__reset:active { transform: scale(.85) rotate(-50deg); }
.rec-timer.is-idle .rec-timer__reset { display: none; }
.rec-timer.is-done { background: #edf6e2; box-shadow: inset 0 0 0 1px rgba(120,168,56,.2); }
.rec-timer.is-done .rec-timer__btn { background: #8cbf3f; box-shadow: 0 2px 7px rgba(120,168,56,.32); }
.rec-timer.is-done .rec-timer__time { color: #5f8a2e; }
.rec-timer.is-done .rec-timer__reset { background: rgba(120,168,56,.12); color: #6b9a36; }

/* Медитации (audio) */
.med-card { display: flex; align-items: center; gap: 13px; padding: 10px; cursor: pointer; }
.med-card + .med-card { margin-top: 8px; }
.med-thumb { width: 56px; height: 56px; border-radius: 14px; flex: 0 0 auto; background: linear-gradient(150deg, #8b9cf0, #5d6fd0); display: grid; place-items: center; box-shadow: 0 8px 16px rgba(93,111,208,.3); }
.med-thumb svg { width: 22px; height: 22px; color: #fff; margin-left: 2px; }
.med-b { flex: 1 1 auto; min-width: 0; }
.med-t { font-size: 14px; font-weight: 600; }
.med-m { font-size: 12px; color: var(--content-subtle); margin-top: 2px; }
.med-dur { font-size: 12px; font-weight: 600; color: var(--content-subtle); background: #f1f1f4; padding: 5px 9px; border-radius: 9999px; flex: 0 0 auto; }

/* Конструктор КБЖУ */
.con-cal { text-align: center; padding: 8px 0 2px; }
.con-cal__n { font-size: 40px; font-weight: 700; letter-spacing: -1.2px; line-height: 1; }
.con-cal__n span { font-size: 16px; color: var(--content-subtle); font-weight: 500; letter-spacing: 0; }
.con-cal__sub { font-size: 13px; color: var(--content-subtle); margin-top: 4px; }
.slider { height: 8px; border-radius: 9999px; background: #eceef2; position: relative; margin: 16px 12px 6px; }
.slider__fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 9999px; background: var(--brand-strong); }
.slider__thumb { position: absolute; top: 50%; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.22); transform: translate(-50%,-50%); }
.slider-ends { display: flex; justify-content: space-between; padding: 0 12px; font-size: 11px; color: var(--content-subtle); }
.split { display: flex; height: 14px; border-radius: 9999px; overflow: hidden; margin-top: 4px; }
.split i { height: 100%; }
.split-legend { display: flex; margin-top: 12px; }
.split-legend div { flex: 1 1 0; text-align: center; }
.split-legend b { font-size: 16px; font-weight: 600; }
.split-legend small { display: block; font-size: 11px; color: var(--content-subtle); margin-top: 2px; }
.split-legend em { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; font-style: normal; }
.meal-dist { display: flex; flex-direction: column; gap: 11px; margin-top: 6px; }
.meal-dist__row { display: flex; align-items: center; gap: 10px; }
.meal-dist__row .nm { width: 76px; font-size: 13px; flex: 0 0 auto; }
.meal-dist__row .br { flex: 1 1 auto; height: 8px; border-radius: 9999px; background: #eceef2; overflow: hidden; }
.meal-dist__row .br i { display: block; height: 100%; background: #a3d546; border-radius: 9999px; }
.meal-dist__row .vl { width: 60px; text-align: right; font-size: 12px; color: var(--content-subtle); flex: 0 0 auto; }

/* Конструктор тарелки (plate builder) */
.pb-meal { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin: 2px 0 12px; scrollbar-width: none; }
.pb-meal::-webkit-scrollbar { display: none; }
.pb-balance { padding: 16px; }
.pb-balance__head { display: flex; align-items: center; justify-content: space-between; }
.pb-balance__title { font-size: 14px; font-weight: 600; }
.pb-balance__verdict { font-size: 12px; font-weight: 600; color: #2f9f7e; background: #e3f4ee; padding: 5px 11px; border-radius: 9999px; }
.pb-balance__verdict.warn { color: #c2185b; background: #ffe1ee; }
.pb-bar { display: flex; height: 16px; border-radius: 6px; overflow: hidden; margin-top: 13px; gap: 2px; }
.pb-bar i { height: 100%; border-radius: 3px; }
.pb-legend { display: flex; flex-wrap: wrap; gap: 9px 16px; margin-top: 13px; }
.pb-legend span { font-size: 12px; color: var(--content-subtle); display: inline-flex; align-items: center; gap: 6px; }
.pb-legend em { width: 9px; height: 9px; border-radius: 3px; font-style: normal; }
.pb-total { font-size: 13px; color: var(--content-subtle); margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--border-base); }
.pb-total b { color: var(--content-strong); font-weight: 600; font-size: 16px; }
.pb-block { padding: 12px 14px 14px; margin-top: 10px; }
.pb-block__head { display: flex; align-items: center; justify-content: space-between; }
.pb-block__n { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.pb-block__n em { width: 9px; height: 9px; border-radius: 3px; font-style: normal; flex: 0 0 auto; }
.pb-block__k { font-size: 12px; color: var(--content-subtle); }
.pb-item { display: flex; align-items: center; gap: 10px; padding: 11px 0 3px; }
.pb-item__n { flex: 1 1 auto; font-size: 14px; min-width: 0; }
.pb-item__n small { color: var(--content-subtle); font-weight: 400; }
.pb-item__k { font-size: 13px; color: var(--content-subtle); flex: 0 0 auto; }
.pb-item__x { width: 24px; height: 24px; border-radius: 50%; background: #f1f1f4; display: grid; place-items: center; color: var(--content-subtle); flex: 0 0 auto; }
.pb-item__x svg { width: 13px; height: 13px; }
.pb-add { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 10px; border: 1.5px dashed #d6d7dd; background: transparent; border-radius: 12px; padding: 11px; cursor: pointer; font-family: var(--font); font-size: 13px; font-weight: 500; color: var(--content-strong); }
.pb-add.hint { border-color: #f3b3cf; color: #c8377f; background: #fdf1f7; }
.pb-add svg { width: 16px; height: 16px; }
.pb-saved { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 4px; scrollbar-width: none; }
.pb-saved::-webkit-scrollbar { display: none; }
.saved-card { flex: 0 0 auto; width: 172px; text-align: left; border: 0; cursor: pointer; background: #fff; border-radius: 16px; padding: 13px; box-shadow: 0 8px 24px rgba(20,4,12,.06), inset 0 0 0 1px rgba(12,14,18,.04); font-family: var(--font); }
.saved-card__t { font-size: 13px; font-weight: 600; line-height: 1.3; }
.saved-card__k { font-size: 12px; color: var(--content-subtle); margin-top: 3px; }
.saved-card__bar { display: flex; gap: 2px; height: 6px; border-radius: 9999px; overflow: hidden; margin-top: 11px; }
.saved-card__bar i { height: 100%; border-radius: 2px; }
.saved-card.on { box-shadow: 0 8px 24px rgba(20,4,12,.08), inset 0 0 0 1.5px var(--brand-strong); }
.pb-search { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 14px; padding: 12px 14px; box-shadow: inset 0 0 0 1px rgba(12,14,18,.06); margin: 2px 0 14px; cursor: pointer; }
.pb-search svg { width: 18px; height: 18px; color: var(--content-subtle); flex: 0 0 auto; }
.pb-search span { font-size: 15px; color: var(--content-subtle); }
.pb-block__empty { font-size: 13px; color: var(--content-subtle); padding: 6px 0 2px; }

/* food picker bottom sheet */
.picker { position: absolute; inset: 0; z-index: 7; visibility: hidden; }
.picker.open { visibility: visible; }
.picker__scrim { position: absolute; inset: 0; background: rgba(12,4,10,.38); opacity: 0; transition: opacity .25s ease; }
.picker.open .picker__scrim { opacity: 1; }
.picker__sheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: 84%; background: var(--neutral-bg); border-radius: 24px 24px 0 0; display: flex; flex-direction: column; transform: translateY(100%); transition: transform .3s cubic-bezier(.4,0,.2,1); }
.picker.open .picker__sheet { transform: translateY(0); }
.picker__grab { width: 36px; height: 5px; border-radius: 9999px; background: #d8d9dd; margin: 8px auto 2px; flex: 0 0 auto; }
.picker__head { display: flex; align-items: center; gap: 10px; padding: 8px 16px 10px; flex: 0 0 auto; }
.picker__search { flex: 1 1 auto; display: flex; align-items: center; gap: 9px; background: #fff; border-radius: 12px; padding: 11px 13px; box-shadow: inset 0 0 0 1px rgba(12,14,18,.06); }
.picker__search svg { width: 17px; height: 17px; color: var(--content-subtle); flex: 0 0 auto; }
.picker__search input { border: 0; outline: 0; background: transparent; font-family: var(--font); font-size: 15px; width: 100%; color: var(--content-strong); }
.picker__close { width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(12,14,18,.05); display: grid; place-items: center; flex: 0 0 auto; cursor: pointer; color: var(--content-strong); }
.picker__close svg { width: 18px; height: 18px; }
.picker__chips { display: flex; gap: 8px; overflow-x: auto; padding: 0 16px 10px; scrollbar-width: none; flex: 0 0 auto; }
.picker__chips::-webkit-scrollbar { display: none; }
.picker__list { overflow-y: auto; padding: 0 16px 28px; -webkit-overflow-scrolling: touch; }
.fp-row { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 14px; padding: 12px 14px; margin-bottom: 8px; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(12,14,18,.04); transition: transform .1s ease; }
.fp-row:active { transform: scale(.99); }
.fp-row__dot { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.fp-row__b { flex: 1 1 auto; min-width: 0; }
.fp-row__n { font-size: 14px; font-weight: 500; }
.fp-row__m { font-size: 12px; color: var(--content-subtle); margin-top: 1px; }
.fp-row__add { width: 30px; height: 30px; border-radius: 50%; background: var(--brand-strong); color: #fff; display: grid; place-items: center; flex: 0 0 auto; }
.fp-row__add svg { width: 16px; height: 16px; }
.fp-empty { text-align: center; color: var(--content-subtle); font-size: 13px; padding: 34px 16px; }

/* ---- Тарелки и рецепты (база) ---- */
.dish { display: flex; gap: 13px; align-items: center; padding: 11px; cursor: pointer; }
.dish__img { width: 66px; height: 66px; border-radius: 16px; flex: 0 0 auto; display: grid; place-items: center; font-size: 30px; }
.dish__b { flex: 1 1 auto; min-width: 0; }
.dish__t { font-size: 15px; font-weight: 600; letter-spacing: -.2px; }
.dish__m { font-size: 12px; color: var(--content-subtle); margin-top: 2px; }
.dish__bar { display: flex; gap: 2px; height: 5px; border-radius: 9999px; overflow: hidden; margin-top: 9px; max-width: 150px; }
.dish__bar i { height: 100%; }
.dish__chev { color: rgba(12,14,18,.26); flex: 0 0 auto; display: grid; place-items: center; }
.dish__chev svg { width: 20px; height: 20px; }
.meals-build { display: flex; align-items: center; gap: 13px; padding: 14px 16px; cursor: pointer; background: linear-gradient(120deg,#2a1430,#3c1d46); color: #fff; margin: 4px 0 24px; }
.meals-build__ic { width: 44px; height: 44px; border-radius: 13px; background: rgba(255,255,255,.12); display: grid; place-items: center; color: #f6a8cd; flex: 0 0 auto; }
.meals-build__ic svg { width: 22px; height: 22px; }
.meals-build__b { flex: 1 1 auto; }
.meals-build__t { font-size: 15px; font-weight: 600; }
.meals-build__s { font-size: 12px; color: rgba(255,255,255,.65); margin-top: 2px; }
.meals-build__chev { color: rgba(255,255,255,.55); }
.meals-build__chev svg { width: 20px; height: 20px; }

/* recipe detail */
.rec-hero { border-radius: 20px; padding: 18px; color: #1d020c; }
.rec-hero__emoji { font-size: 46px; line-height: 1; }
.rec-hero__t { font-size: 22px; font-weight: 700; letter-spacing: -.5px; margin-top: 10px; }
.rec-hero__tag { display: inline-block; font-size: 11px; font-weight: 600; background: rgba(255,255,255,.5); padding: 4px 10px; border-radius: 9999px; margin-top: 8px; }
.rec-stats { display: flex; gap: 8px; margin-top: 12px; }
.rec-stat { flex: 1 1 0; background: #fff; border-radius: 14px; padding: 12px 6px; text-align: center; box-shadow: inset 0 0 0 1px rgba(12,14,18,.04); }
.rec-stat b { display: block; font-size: 16px; font-weight: 600; }
.rec-stat small { font-size: 11px; color: var(--content-subtle); }
.ing-row { display: flex; flex-direction: column; gap: 3px; padding: 11px 0; border-top: 1px solid rgba(12,14,18,.05); font-size: 14px; }
.ing-row:first-child { border-top: 0; }
.ing-row__top { display: flex; justify-content: space-between; gap: 10px; }
.ing-row em { color: var(--content-subtle); font-style: normal; }
.ing-row__note { font-size: 12px; color: var(--content-subtle); line-height: 1.35; }

/* deepened recipe content: difficulty/time chips, fiber/sugar, tips, care */
.rec-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.rec-chip { font-size: 12px; font-weight: 500; background: #fff; color: var(--content-strong); padding: 5px 11px; border-radius: 9999px; box-shadow: inset 0 0 0 1px var(--border-base); }
.rec-fs { font-size: 12px; color: var(--content-subtle); text-align: center; margin-top: 9px; }
.rec-tips { margin: 0; padding: 4px 0 2px 18px; }
.rec-tips li { font-size: 13px; color: var(--content-strong); line-height: 1.5; padding: 3px 0; }
.rec-care { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; font-size: 13px; line-height: 1.5; color: var(--content-subtle); }
.rec-care + .rec-care { border-top: 1px solid rgba(12,14,18,.05); }
.rec-care__ic { font-size: 17px; line-height: 1.3; flex: 0 0 auto; }
.rec-care b { color: var(--content-strong); font-weight: 600; }

/* ---- Чек-поинты плана (из CRM) ---- */
.ckpts { margin-top: 14px; padding: 4px 13px 8px; background: #f8f6fb; border-radius: 14px; }
.ckpts__h { display: flex; align-items: center; gap: 8px; padding: 9px 0 4px; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--content-subtle); }
.ckpt:first-of-type { border-top: 0; }
.ckpts__n { background: #f0eaf4; color: #7a4d96; border-radius: 9999px; padding: 1px 8px; font-size: 11px; letter-spacing: 0; }
.ckpts__src { margin-left: auto; font-size: 10.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: rgba(12,14,18,.34); }
.ckpt { display: flex; gap: 11px; align-items: flex-start; padding: 7px 0; border-top: 1px solid rgba(12,14,18,.05); }
.ckpt__tag { flex: 0 0 auto; width: 6px; height: 6px; margin-top: 7px; border-radius: 50%; font-size: 0; line-height: 0; padding: 0; min-width: 0; background: #cbb4da; }
.ckpt__t { font-size: 13.5px; line-height: 1.5; color: #2c2833; }
.ckpt__t b { font-weight: 600; }
.t-goal, .t-rule, .t-habit, .t-check { background: #cbb4da; }

/* ---- привычки: трекер ---- */
.habit { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid rgba(12,14,18,.05); }
.habit:first-child { border-top: 0; }
.habit__n { flex: 1 1 auto; font-size: 14px; }
.habit__dots { display: flex; gap: 4px; flex: 0 0 auto; }
.habit__dots i { width: 9px; height: 9px; border-radius: 50%; background: #e7e9ee; }
.habit__dots i.on { background: #8fc63d; }

/* ---- здоровье: мини-метрики и периодичность ---- */
.hstat { display: flex; gap: 10px; }
.hstat__c { flex: 1 1 0; background: #fff; border-radius: 14px; padding: 13px; box-shadow: inset 0 0 0 1px rgba(12,14,18,.04); }
.hstat__v { font-size: 19px; font-weight: 600; letter-spacing: -.5px; }
.hstat__v small { font-size: 12px; font-weight: 500; color: var(--content-subtle); }
.hstat__l { font-size: 11.5px; color: var(--content-subtle); margin-top: 2px; }
.hstat__d { font-size: 11.5px; font-weight: 600; margin-top: 7px; }
.hstat__d.down { color: #2fa36f; }
.hstat__d.flat { color: var(--content-subtle); }
.cadence { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid rgba(12,14,18,.05); }
.cadence:first-child { border-top: 0; }
.cadence__ic { width: 34px; height: 34px; border-radius: 10px; flex: 0 0 auto; display: grid; place-items: center; }
.cadence__ic svg { width: 18px; height: 18px; }
.cadence__b { flex: 1 1 auto; }
.cadence__t { font-size: 14px; font-weight: 500; }
.cadence__m { font-size: 12px; color: var(--content-subtle); margin-top: 1px; }
.cadence__w { font-size: 11.5px; font-weight: 600; color: #7a4d96; background: #efe6fa; border-radius: 9999px; padding: 3px 9px; flex: 0 0 auto; }

/* ---- Метод тарелки (обучалка) ---- */
.method { display: flex; gap: 13px; align-items: center; padding: 14px 16px; cursor: pointer; }
.method__plate { width: 58px; height: 58px; border-radius: 50%; flex: 0 0 auto; background: conic-gradient(#34c08a 0 50%, #8fc63d 50% 75%, #5aa0f2 75% 100%); box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 5px rgba(12,14,18,.06); }
.method__b { flex: 1 1 auto; }
.method__t { font-size: 15px; font-weight: 600; }
.method__s { font-size: 12px; color: var(--content-subtle); margin-top: 2px; line-height: 1.4; }
.method__chev { color: rgba(12,14,18,.26); flex: 0 0 auto; }
.method__chev svg { width: 20px; height: 20px; }
.method-bar { display: flex; height: 16px; border-radius: 9999px; overflow: hidden; margin: 14px 0 8px; }
.method-bar i { height: 100%; }
.method-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.method-legend span { font-size: 12.5px; color: var(--content-subtle); display: inline-flex; align-items: center; gap: 6px; }
.method-legend em { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }

/* ---- Избранное (сердце) ---- */
.icon-fav { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; color: #cfd1d8; background: transparent; border: 0; cursor: pointer; padding: 0; }
.icon-fav svg { width: 21px; height: 21px; }
.icon-fav.on { color: #e0518f; }

/* ---- Замены продуктов ---- */
.swap { display: flex; gap: 8px; align-items: baseline; padding: 9px 0; border-top: 1px solid rgba(12,14,18,.05); font-size: 13.5px; line-height: 1.4; }
.swap:first-child { border-top: 0; }
.swap__from { font-weight: 600; flex: 0 0 auto; }
.swap__arrow { color: var(--content-subtle); flex: 0 0 auto; }
.swap__to { color: var(--content-subtle); }

/* Focus line */
.focus { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; background: #faf3f7; border-radius: 14px; font-size: 13px; line-height: 1.35; margin: 2px 0 10px; }
.focus svg { width: 18px; height: 18px; color: #e0658a; flex: 0 0 auto; margin-top: 1px; }
.focus b { font-weight: 600; }

/* Journal feed */
.feed { display: flex; flex-direction: column; }
.feed-item { display: flex; gap: 12px; padding: 12px 2px; border-top: 1px solid rgba(12,14,18,.06); align-items: center; }
.feed-item:first-child { border-top: 0; }
.feed-thumb { width: 46px; height: 46px; border-radius: 12px; flex: 0 0 auto; background: var(--tile); display: grid; place-items: center; overflow: hidden; }
.feed-thumb img { width: 100%; height: 100%; object-fit: cover; }
.feed-thumb svg { width: 20px; height: 20px; }
.feed-b { flex: 1 1 auto; min-width: 0; }
.feed-t { font-size: 14px; font-weight: 500; }
.feed-n { font-size: 12px; color: var(--content-subtle); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-time { font-size: 12px; color: var(--content-subtle); flex: 0 0 auto; }
.feed-menu { color: rgba(12,14,18,.28); flex: 0 0 auto; display: grid; place-items: center; }
.feed-menu svg { width: 18px; height: 18px; }
.feed-empty { text-align: center; color: var(--content-subtle); font-size: 13px; padding: 22px 10px; }
.addrow { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 10px; border: 1.5px dashed #d6d7dd; background: transparent; border-radius: 14px; padding: 13px; cursor: pointer; font-family: var(--font); font-size: 14px; font-weight: 500; color: var(--content-strong); }
.addrow svg { width: 18px; height: 18px; }

/* quick-log status pill on rows */
.qstat { font-size: 12px; font-weight: 500; padding: 4px 10px; border-radius: 9999px; background: #eef0f3; color: var(--content-subtle); flex: 0 0 auto; }
.qstat.done { background: #e7f3d4; color: #5b7d1f; }

/* Training section */
.tprog__pills { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.tweek { display: flex; gap: 5px; margin-top: 12px; }
.tday { flex: 1 1 0; text-align: center; padding: 9px 0 8px; border-radius: 12px; background: #f4f4f6; cursor: pointer; }
.tday small { font-size: 10px; color: var(--content-subtle); display: block; }
.tday b { font-size: 14px; font-weight: 600; display: block; margin-top: 2px; }
.tday i { width: 6px; height: 6px; border-radius: 50%; display: inline-block; margin-top: 6px; background: var(--border-base); }
.tday i.done { background: var(--positive); }
.tday.today { background: var(--brand-strong); }
.tday.today small, .tday.today b { color: #fff; }
.tday.rest { opacity: .55; }

/* Measurements (3 photos) */
.mgrid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 12px; }
.mslot { aspect-ratio: 3/4; border-radius: 14px; border: 1.5px dashed #cfd0d6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--content-subtle); background: #fff; font-size: 12px; cursor: pointer; }
.mslot svg { width: 22px; height: 22px; }
.mslot.filled { border-style: solid; border-color: transparent; background: linear-gradient(160deg,#eceaf2,#e3dcef); color: #9a90b8; }
.note-box { display: flex; gap: 10px; align-items: flex-start; background: #eef3ec; border-radius: 14px; padding: 12px 14px; font-size: 12.5px; line-height: 1.4; color: #3f6b46; margin-top: 14px; }
.note-box svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 1px; }

/* Трекер не активирован (до первой встречи): прячем вкладки «Путь» и «Прогресс» —
   эти разделы открываются только когда коуч включил трекер (data-stage=active).
   Остальные 3 вкладки рефлоу (flex:1 1 0), стеклянная пилюля пересчитывается в glassTo(). */
#device[data-stage="building"] .tabbar .tab[data-tab="journey"],
#device[data-stage="building"] .tabbar .tab[data-tab="progress"] { display: none !important; }
[hidden] { display: none !important; }
/* --- Этап клиента: «коуч собирает план» (building) ↔ активный клиент (active) --- */
#device[data-stage="active"] .s-build { display: none !important; }
#device[data-stage="building"] .s-active { display: none !important; }
.plan-stage[hidden] { display: none; }
.plan-build { padding: 24px 18px; text-align: center; }
.plan-build__ic { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 14px; display: grid; place-items: center; background: linear-gradient(135deg, #eaf6db, #d4ecb6); color: #5f9e25; }
.plan-build__ic svg { width: 30px; height: 30px; }
.plan-build__t { font-size: 19px; font-weight: 600; letter-spacing: -.3px; }
.plan-build__s { font-size: 13.5px; color: var(--content-subtle); line-height: 1.5; margin-top: 8px; }
.plan-build__bar { height: 6px; border-radius: 9999px; background: rgba(12,14,18,.08); margin: 18px auto 0; max-width: 240px; overflow: hidden; }
.plan-build__bar i { display: block; height: 100%; width: 42%; border-radius: 9999px; background: linear-gradient(90deg, #a3d546, #7cc24a); }
.plan-build__eta { font-size: 12px; color: var(--content-subtle); margin-top: 10px; }
.mrow--lock { opacity: .55; cursor: default; }
.mrow--lock:active { transform: none; background: transparent; }
.mrow__lock { color: rgba(12,14,18,.3); display: grid; place-items: center; }
.mrow__lock svg { width: 18px; height: 18px; }
.conn-hint { font-size: 12.5px; color: var(--content-subtle); line-height: 1.45; padding: 0 2px 8px; }

/* --- Запись веса: ручной ввод + состояние «уже записано» --- */
.wlog-note { display: flex; gap: 10px; align-items: flex-start; background: #fdf0e3; border-radius: 14px; padding: 12px 14px; font-size: 12.5px; line-height: 1.4; color: #8a5a1f; margin-top: 8px; }
.wlog-note svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 1px; }
.wmanual { display: flex; align-items: center; justify-content: center; gap: 16px; }
.wstep { width: 52px; height: 52px; border-radius: 50%; border: 0; background: #f1f1f3; font-size: 26px; font-weight: 400; color: var(--content-strong); cursor: pointer; display: grid; place-items: center; line-height: 1; }
.wstep:active { transform: scale(.94); }
.winput-wrap { display: inline-flex; align-items: baseline; gap: 5px; }
.winput { width: 104px; text-align: right; border: 0; background: transparent; font-family: var(--font); font-size: 40px; font-weight: 600; letter-spacing: -1px; color: var(--content-strong); }
.winput:focus { outline: none; }
.winput-u { font-size: 17px; color: var(--content-subtle); font-weight: 500; }

/* --- Захват еды: снятое фото (мультифото) --- */
.meal-shot { background: #fff; border-radius: 18px; padding: 14px; box-shadow: inset 0 0 0 1px rgba(12,14,18,.05); margin-top: 6px; }
.meal-shot__thumbs { display: flex; gap: 8px; }
.meal-shot__thumb { width: 64px; height: 64px; border-radius: 14px; flex: 0 0 auto; display: grid; place-items: center; font-size: 30px; background: linear-gradient(135deg,#fde9d2,#f7c89b); }
.meal-shot__thumb--add { background: #fafafb; box-shadow: inset 0 0 0 1.5px rgba(12,14,18,.14); color: var(--content-subtle); cursor: pointer; }
.meal-shot__thumb--add svg { width: 22px; height: 22px; }
.meal-shot__meta { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.meal-shot__txt { flex: 1 1 auto; min-width: 0; }
.meal-shot__est { display: block; font-size: 17px; font-weight: 600; letter-spacing: -.3px; }
.meal-shot__lbl { display: block; font-size: 12px; color: var(--content-subtle); margin-top: 2px; line-height: 1.35; }
.meal-shot__redo { flex: 0 0 auto; border: 0; background: #f1f1f3; border-radius: 9999px; padding: 8px 12px; font-family: var(--font); font-size: 12.5px; font-weight: 600; color: var(--content-strong); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.meal-shot__redo svg { width: 14px; height: 14px; }

/* --- Добавить активность --- */
.act-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 16px 0 4px; }
.act-type { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 14px 6px; border: 0; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px rgba(12,14,18,.06); font-family: var(--font); font-size: 12.5px; font-weight: 500; color: var(--content-strong); cursor: pointer; transition: box-shadow .15s ease, background .15s ease; }
.act-type svg { width: 24px; height: 24px; color: var(--content-subtle); }
.act-type.on { background: #fdeaf2; box-shadow: inset 0 0 0 1.5px var(--brand-strong); }
.act-type.on svg { color: var(--brand-strong); }

/* --- Тренировка выполнена --- */
.wkdone { padding: 14px 16px; }
.wkdone__top { display: flex; align-items: center; gap: 13px; }
.wkdone__ic { width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; background: #eaf6db; color: #5f9e25; }
.wkdone__ic svg { width: 20px; height: 20px; }
.wkdone__b { flex: 1 1 auto; min-width: 0; }
.wkdone__t { font-size: 15px; font-weight: 600; letter-spacing: -.2px; }
.wkdone__m { font-size: 12px; color: var(--content-subtle); margin-top: 2px; }
.wkdone__edit { flex: 0 0 auto; border: 0; background: transparent; color: #2b7de3; font-family: var(--font); font-size: 13px; font-weight: 600; cursor: pointer; padding: 4px 2px; }
.wkdone__add { width: 100%; margin-top: 14px; border: 0; background: #f4f4f6; color: var(--content-strong); border-radius: 13px; padding: 12px; font-family: var(--font); font-size: 14px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 7px; transition: background .15s ease; }
.wkdone__add:active { background: #ececef; }
.wkdone__add svg { width: 17px; height: 17px; }

/* Meal capture */
.pick { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.pick-card { display: flex; gap: 14px; align-items: center; padding: 18px 16px; background: #fff; border-radius: 16px; box-shadow: inset 0 0 0 1px rgba(12,14,18,.05); cursor: pointer; }
.pick-card__ic { width: 46px; height: 46px; border-radius: 14px; background: var(--tile); display: grid; place-items: center; flex: 0 0 auto; }
.pick-card__ic svg { width: 24px; height: 24px; }
.pick-card__t { font-size: 15px; font-weight: 600; }
.pick-card__s { font-size: 12px; color: var(--content-subtle); margin-top: 2px; }
.field { margin-top: 12px; }
.field__l { font-size: 12px; color: var(--content-subtle); margin-bottom: 6px; }
.field__c { display: flex; align-items: center; justify-content: space-between; background: #fff; border-radius: 12px; padding: 13px 14px; font-size: 15px; box-shadow: inset 0 0 0 1px rgba(12,14,18,.06); }
.field__c svg { width: 18px; height: 18px; color: var(--content-subtle); }
.field textarea { width: 100%; border: 0; background: #fff; border-radius: 12px; padding: 13px 14px; font-family: var(--font); font-size: 15px; resize: none; box-shadow: inset 0 0 0 1px rgba(12,14,18,.06); }
.meal-preview { width: 100%; height: 180px; border-radius: 16px; object-fit: cover; background: #eceaf2; }

/* Founder call card */
.founder { display: flex; gap: 12px; padding: 14px; border-radius: 16px; background: linear-gradient(120deg,#2a1430,#3c1d46); color: #fff; margin-top: 8px; }
.founder img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.founder__t { font-size: 14px; font-weight: 600; }
.founder__s { font-size: 12px; color: rgba(255,255,255,.72); margin-top: 3px; line-height: 1.4; }
.founder__lnk { color: #f6a8cd; font-size: 12px; font-weight: 600; margin-top: 7px; display: inline-flex; align-items: center; gap: 5px; }
.founder__lnk svg { width: 14px; height: 14px; }
.step[data-open] { cursor: pointer; }

/* Weight ruler (горизонтальная линейка) */
.wr-val { text-align: center; font-size: 52px; font-weight: 600; letter-spacing: -2px; line-height: 1; margin: 18px 0 4px; }
.wr-val span { font-size: 18px; color: var(--content-subtle); font-weight: 500; letter-spacing: 0; margin-left: 3px; }
.wr-sub { text-align: center; font-size: 12.5px; color: var(--content-subtle); margin-bottom: 18px; }
.wr { position: relative; margin: 0 -20px; }
.wr__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; height: 92px; align-items: flex-start; padding: 28px calc(50% - 6px) 0; -webkit-mask-image: linear-gradient(90deg,transparent,#000 17%,#000 83%,transparent); mask-image: linear-gradient(90deg,transparent,#000 17%,#000 83%,transparent); }
.wr__track::-webkit-scrollbar { display: none; }
.wtk { flex: 0 0 12px; min-width: 0; display: flex; flex-direction: column; align-items: center; scroll-snap-align: center; }
.wtk b { white-space: nowrap; }
.wtk i { width: 2px; height: 13px; background: rgba(12,14,18,.16); border-radius: 2px; }
.wtk.h i { height: 28px; background: rgba(12,14,18,.3); }
.wtk b { font-size: 12px; font-weight: 600; color: var(--content-subtle); margin-top: 8px; letter-spacing: -.2px; }
.wr__cur { position: absolute; left: 50%; top: 20px; transform: translateX(-50%); width: 3px; height: 48px; background: var(--brand-strong); border-radius: 3px; pointer-events: none; }
.wr__cur::after { content: ""; position: absolute; top: -6px; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--brand-strong); }
.wr-manual { display: block; margin: 18px auto 0; border: 0; background: transparent; color: var(--content-subtle); font-family: var(--font); font-size: 13px; font-weight: 500; cursor: pointer; }
.wr-mwrap { display: flex; gap: 8px; justify-content: center; align-items: center; margin-top: 14px; }
.wr-mwrap input { width: 130px; text-align: center; font-size: 18px; font-weight: 600; border: 0; background: #fff; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--border-base); padding: 12px; font-family: var(--font); outline: none; }

/* Вода — трекер (по согласованному макету «наш ДНК»: мл, свайп-объёмы, +/↺/✓, недельные столбики, календарь). Префикс aq- — чтобы не конфликтовать с .wk-* (тренировки) */
.aq-ring { position: relative; width: 248px; height: 248px; margin: 14px auto 4px; }
.aq-ringc { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.aq-v { font-size: 52px; font-weight: 600; letter-spacing: -1.5px; line-height: 1; }
.aq-of { font-size: 14px; color: rgba(12,14,18,.58); margin-top: 6px; }
.aq-amts { display: flex; gap: 26px; justify-content: center; align-items: baseline; margin: 14px 0 4px; overflow: hidden; }
.aq-amt { border: 0; background: transparent; font-family: var(--font); cursor: pointer; font-size: 18px; font-weight: 500; color: rgba(12,14,18,.3); white-space: nowrap; padding: 0; }
.aq-amt.on { font-size: 24px; font-weight: 600; color: #0c0e12; letter-spacing: -.4px; }
.aq-ctrls { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 16px 0 6px; }
.aq-cbtn { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: inset 0 0 0 1px rgba(12,14,18,.06); color: rgba(12,14,18,.58); border: 0; cursor: pointer; }
.aq-cbtn svg { width: 22px; height: 22px; }
.aq-cbtn.dis { opacity: .4; }
.aq-cbtn.ok { background: var(--brand-strong); color: #fff; box-shadow: none; }
.aq-add { width: 86px; height: 86px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-strong); color: #fff; box-shadow: 0 14px 30px rgba(29,2,12,.28); border: 0; cursor: pointer; transition: transform .12s ease; }
.aq-add:active { transform: scale(.94); }
.aq-add svg { width: 32px; height: 32px; }
.aq-week { background: #fff; border-radius: 20px; box-shadow: 0 10px 26px rgba(20,4,12,.05), inset 0 0 0 1px rgba(12,14,18,.06); padding: 16px 16px 12px; margin-top: 22px; }
.aq-week__h { font-size: 15px; font-weight: 600; letter-spacing: -.2px; }
.aq-week__s { font-size: 12px; color: rgba(12,14,18,.42); margin-top: 2px; }
.aq-bars { display: flex; justify-content: space-between; align-items: flex-end; height: 64px; margin: 14px 0 6px; }
.aq-bar { width: 9px; border-radius: 100px; background: #efe7ec; }
.aq-bar.on { background: var(--brand-strong); }
.aq-days { display: flex; justify-content: space-between; }
.aq-days span { width: 9px; text-align: center; font-size: 11px; color: rgba(12,14,18,.42); }
/* календарь воды */
.aq-dim { position: absolute; inset: 0; background: rgba(20,4,12,.32); z-index: 1; }
.aq-sheet { position: absolute; left: 0; right: 0; bottom: 0; background: var(--neutral-bg); border-radius: 28px 28px 0 0; padding: 10px 18px 26px; box-shadow: 0 -18px 50px rgba(20,4,12,.2); z-index: 2; }
.aq-grab { width: 38px; height: 4px; border-radius: 100px; background: rgba(12,14,18,.16); margin: 4px auto 12px; }
.aq-calh { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.aq-calh b { font-size: 16px; font-weight: 600; }
.aq-navc { width: 34px; height: 34px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px rgba(12,14,18,.06); display: grid; place-items: center; color: rgba(12,14,18,.58); border: 0; cursor: pointer; }
.aq-navc svg { width: 16px; height: 16px; }
.aq-cgrid { display: grid; grid-template-columns: repeat(7,1fr); gap: 4px 2px; }
.aq-cdow { text-align: center; font-size: 11px; color: rgba(12,14,18,.42); font-weight: 600; padding-bottom: 6px; }
.aq-cd { aspect-ratio: 1; display: grid; place-items: center; font-size: 13.5px; font-weight: 500; border-radius: 50%; color: #0c0e12; box-shadow: inset 0 0 0 1px rgba(12,14,18,.06); margin: 0 auto; width: 38px; }
.aq-cd.mut { color: rgba(12,14,18,.28); }
.aq-cd.on { background: var(--brand-strong); color: #fff; box-shadow: none; }
.aq-cd.has { box-shadow: inset 0 0 0 1.5px rgba(160,80,120,.14); background: #f6eef3; }

/* Светлая плашка «коуч собирает план» (вариант из макета) */
.bnote { display: flex; gap: 11px; align-items: center; padding: 12px 14px; border-radius: 16px; background: #f6eef3; box-shadow: inset 0 0 0 1px rgba(160,80,120,.14); }
.bnote__ic { width: 34px; height: 34px; border-radius: 10px; flex: 0 0 auto; display: grid; place-items: center; background: #fff; color: var(--brand-strong); }
.bnote__ic svg { width: 18px; height: 18px; }
.bnote__t { font-size: 13px; font-weight: 600; letter-spacing: -.1px; }
.bnote__s { font-size: 11.5px; color: rgba(12,14,18,.6); margin-top: 2px; line-height: 1.4; }

/* Журнал дня — лента записей */
.sect { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 6px 2px 11px; }
.sect__t { font-size: 16px; font-weight: 600; letter-spacing: -.2px; }
.feed { background: #fff; border-radius: 20px; box-shadow: 0 10px 26px rgba(20,4,12,.05), inset 0 0 0 1px rgba(12,14,18,.06); padding: 4px 16px; }
.fitem { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.fitem + .fitem { border-top: 1px solid rgba(12,14,18,.06); }
.fthumb { width: 38px; height: 38px; border-radius: 11px; flex: 0 0 auto; display: grid; place-items: center; background: center/cover no-repeat; }
.fthumb svg { width: 20px; height: 20px; }
.fthumb.t-amber { background: #fbe9d6; color: #c98a3c; }
.fthumb.t-green { background: #e6f0d6; color: #6b8f37; }
.fthumb.t-blue { background: #e2eefb; color: #3f7bc0; }
.fitem__b { flex: 1 1 auto; min-width: 0; }
.fitem__t { font-size: 14px; font-weight: 600; letter-spacing: -.1px; }
.fitem__s { font-size: 12px; color: rgba(12,14,18,.42); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fitem__time { font-size: 11.5px; color: rgba(12,14,18,.42); font-weight: 500; flex: 0 0 auto; }

/* Founder Call — баннер на «Сегодня» + полноэкранная карточка */
.founder { display: flex; align-items: center; gap: 13px; padding: 13px 15px; border-radius: 20px; cursor: pointer; background: linear-gradient(135deg,#26161f 0%,#3a2233 55%,#4a2740 100%); color: #fff; }
.founder__av { width: 46px; height: 46px; border-radius: 50%; flex: 0 0 auto; background: linear-gradient(150deg,#f6c8de,#caa0e0); box-shadow: 0 0 0 2px rgba(255,255,255,.18); background-size: cover; background-position: center; }
.founder__b { flex: 1 1 auto; min-width: 0; }
.founder__k { font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: #f6a8cd; }
.founder__t { font-size: 14.5px; font-weight: 600; letter-spacing: -.2px; margin-top: 2px; }
.founder__s { font-size: 12px; color: rgba(255,255,255,.6); margin-top: 2px; line-height: 1.4; }
.founder__chev { flex: 0 0 auto; color: rgba(255,255,255,.5); }
.founder__chev svg { width: 18px; height: 18px; }
.fcall { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 24px 0 4px; }
.fcall__av { width: 76px; height: 76px; border-radius: 50%; background: linear-gradient(150deg,#f6c8de,#caa0e0); box-shadow: 0 0 0 3px rgba(160,80,120,.12); margin-bottom: 15px; }
.fcall__title { font-size: 21px; font-weight: 600; letter-spacing: -.4px; }
.fcall__when { font-size: 14px; color: var(--brand-strong); font-weight: 600; margin-top: 7px; }
.fcall__p { font-size: 14px; line-height: 1.55; margin: 16px 2px 0; }
.fcall__p--muted { color: var(--content-subtle); font-size: 13px; }
.fcall__cal { width: 100%; margin-top: 22px; }
/* Founder-баннер по макету (#detail-founder): тёмный градиент + фото + RSVP «Буду/Не смогу» */
.fcall2 { border-radius: 24px; padding: 26px 20px; text-align: center; color: #fff; margin-top: 4px;
  background: linear-gradient(135deg,#241a20 0%,#34232e 60%,#3f2733 100%); box-shadow: 0 16px 36px rgba(20,12,16,.28); }
.fcall2__k { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; opacity: .5; margin-bottom: 12px; }
.fcall2__av { width: 84px; height: 84px; border-radius: 50%; margin: 0 auto 14px; background-size: cover; background-position: center;
  box-shadow: 0 0 0 3px rgba(255,255,255,.14), 0 10px 24px rgba(0,0,0,.32); }
.fcall2__t { font-size: 22px; font-weight: 700; letter-spacing: -.4px; }
.fcall2__when { font-size: 15px; font-weight: 500; margin-top: 8px; opacity: .92; }
.fcall2__s { font-size: 13.5px; line-height: 1.5; margin-top: 10px; opacity: .6; }
.fcall2-label { font-size: 13px; font-weight: 600; color: var(--content-subtle); margin-top: 22px; }
.fcall2-rsvp { display: flex; gap: 10px; margin-top: 16px; }
.fcall2-rsvp .fc-rsvp { flex: 1 1 0; border: 0; font-size: 15px; font-weight: 600; color: var(--content-strong);
  background: #fff; border-radius: 16px; padding: 15px 0; box-shadow: inset 0 0 0 1px rgba(12,14,18,.06); cursor: pointer; font-family: inherit; }
.fcall2-rsvp .fc-rsvp.sel { background: #ffc5dc; box-shadow: none; }
.fcall2-note { margin-top: 14px; }
.fcall2-confirm { width: 100%; margin-top: 22px; }
.fcall2-confirm:disabled { opacity: .45; }

/* Quick-add tiles on Сегодня (daily actions, harmonised with the cards) */
.quickadd { display: flex; gap: 8px; }
.qadd { flex: 1 1 0; display: flex; align-items: center; gap: 11px; padding: 14px 16px; border: 0; cursor: pointer; border-radius: var(--r-card); background: var(--card); box-shadow: 0 8px 24px rgba(20,4,12,.06), inset 0 0 0 1px rgba(12,14,18,.03); font-family: var(--font); transition: transform .12s ease; }
.qadd:active { transform: scale(.97); }
.qadd__ic { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; flex: 0 0 auto; }
.qadd__ic svg { width: 23px; height: 23px; }
.qadd__ic--food { background: #fbe1ec; color: #e0518f; }
.qadd__ic--weight { background: #e2f3e7; color: #2bbf6a; }
.qadd__t { font-size: 15px; font-weight: 600; letter-spacing: -.2px; }

/* Сегодня — meals grid (Завтрак/Обед/Ужин/Перекус), reference-level */
.section-label { display: flex; align-items: baseline; justify-content: space-between; padding: 4px 4px 2px; }
.section-label b { font-size: 15px; font-weight: 600; letter-spacing: -.2px; }
.section-link { font-size: 12px; color: var(--content-subtle); cursor: pointer; background: none; border: 0; font-family: var(--font); padding: 0; }
.meals { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mealc { background: var(--card); border-radius: 20px; padding: 14px; text-align: left; border: 0; cursor: pointer; box-shadow: 0 8px 24px rgba(20,4,12,.06), inset 0 0 0 1px rgba(12,14,18,.03); transition: transform .12s ease; }
.mealc:active { transform: scale(.98); }
.mealc__top { display: flex; align-items: center; justify-content: space-between; }
.mealc__ic { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; }
.mealc__ic svg { width: 23px; height: 23px; }
.mealc__act { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #f1f1f4; color: #9a9ba2; }
.mealc__act svg { width: 15px; height: 15px; }
.mealc.done .mealc__act { background: #e7f3d4; color: #5b7d1f; }
.mealc__name { font-size: 16px; font-weight: 600; letter-spacing: -.2px; margin-top: 14px; }
.mealc__status { font-size: 12px; color: var(--content-subtle); margin-top: 2px; }
.mealc.done .mealc__status { color: #5b7d1f; font-weight: 500; }
.t-amber { background: #fdeccb; color: #d98a16; }
.t-orange { background: #ffe3d4; color: #ff7a3d; }
.t-purple { background: #ece4fb; color: #8b5cf6; }
.t-green { background: #e2f3e7; color: #2bbf6a; }
.t-pink { background: #fbe6f0; color: #c8377f; }
.t-blue { background: #e7f0fc; color: #2b7de3; }
/* «Путь»: расширенная палитра иконок недель (библиотека из 30 иконок). */
.t-red { background: #fde3e6; color: #e0455c; }
.t-lime { background: #eaf4d6; color: #6aa82f; }
.t-indigo { background: #e7e8fb; color: #5b62d6; }
.t-teal { background: #d8f3ee; color: #109a88; }

/* ===================== КВИЗ ПРИВЛЕЧЕНИЯ ===================== */
.q-app { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.q-top { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; padding: 6px 16px 12px; }
.q-back { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 50%; border: 0; cursor: pointer; background: rgba(12,14,18,.05); display: grid; place-items: center; color: var(--content-strong); }
.q-back svg { width: 22px; height: 22px; }
.q-top__b { flex: 1 1 auto; min-width: 0; }
.q-phase { font-size: 12px; font-weight: 600; color: var(--content-subtle); letter-spacing: .02em; }
.q-prog { height: 5px; border-radius: 9999px; background: rgba(12,14,18,.07); margin-top: 6px; overflow: hidden; }
.q-prog i { display: block; height: 100%; width: 0; border-radius: 9999px; background: linear-gradient(90deg,#e0518f,#c8377f); transition: width .35s cubic-bezier(.4,0,.2,1); }
.q-step { font-size: 12px; font-weight: 600; color: var(--content-subtle); flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.q-scroll { padding-bottom: 16px; }
.q-foot { flex: 0 0 auto; padding: 10px 20px calc(16px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(255,247,253,0), #fff7fd 38%); }
.q-foot:empty { display: none; }
.q-btn-ghost { width: 100%; border: 0; cursor: pointer; font-family: var(--font); font-size: 15px; font-weight: 600; color: var(--content-strong); background: transparent; padding: 13px; margin-top: 2px; }

/* intro */
.q-app.is-intro .q-top { visibility: hidden; height: 0; padding: 0; }
.q-hero { text-align: center; padding: 12px 6px 0; }
.q-hero__badge { display: inline-block; font-size: 12px; font-weight: 600; color: #c8377f; background: #fbe6f0; padding: 5px 12px; border-radius: 9999px; }
.q-hero__t { font-size: 27px; font-weight: 700; letter-spacing: -.6px; line-height: 1.12; margin-top: 14px; }
.q-hero__s { font-size: 14px; color: var(--content-subtle); line-height: 1.5; margin-top: 10px; }
.q-hero__plate { width: 148px; height: 148px; border-radius: 50%; margin: 24px auto 6px; background: conic-gradient(#34c08a 0 50%, #8fc63d 50% 75%, #5aa0f2 75% 100%); box-shadow: inset 0 0 0 10px #fff, inset 0 0 0 12px rgba(12,14,18,.05), 0 18px 40px rgba(20,4,12,.10); }
.q-hero__meta { display: flex; justify-content: center; gap: 22px; margin-top: 20px; }
.q-hero__meta div { font-size: 12px; color: var(--content-subtle); }
.q-hero__meta b { display: block; font-size: 16px; font-weight: 600; color: var(--content-strong); margin-bottom: 2px; }

/* question */
.q-h { font-size: 21px; font-weight: 700; letter-spacing: -.4px; line-height: 1.22; margin: 6px 0 4px; }
.q-sub { font-size: 13.5px; color: var(--content-subtle); line-height: 1.45; margin-bottom: 4px; }
.q-opts { display: flex; flex-direction: column; gap: 9px; margin-top: 14px; }
.q-opt { display: flex; align-items: flex-start; gap: 12px; text-align: left; width: 100%; border: 0; cursor: pointer; font-family: var(--font); background: var(--card); border-radius: 16px; padding: 15px 16px; box-shadow: inset 0 0 0 1.5px rgba(12,14,18,.06); transition: transform .12s ease, box-shadow .18s ease; }
.q-opt:active { transform: scale(.985); }
.q-opt.sel { box-shadow: inset 0 0 0 2px #e0518f, 0 8px 22px rgba(224,81,143,.16); }
.q-opt__r { width: 22px; height: 22px; flex: 0 0 auto; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(12,14,18,.18); margin-top: 1px; transition: box-shadow .18s ease; }
.q-opt.sel .q-opt__r { box-shadow: inset 0 0 0 7px #e0518f; }
.q-opt__b { flex: 1 1 auto; min-width: 0; }
.q-opt__t { display: block; font-size: 15px; font-weight: 600; letter-spacing: -.2px; line-height: 1.3; }
.q-opt__d { display: block; font-size: 12.5px; color: var(--content-subtle); line-height: 1.4; margin-top: 3px; }

/* input field */
.q-field { margin-top: 18px; }
.q-input__wrap { position: relative; }
.q-input { width: 100%; border: 0; background: var(--card); border-radius: 16px; padding: 17px 16px; font-family: var(--font); font-size: 18px; font-weight: 500; color: var(--content-strong); box-shadow: inset 0 0 0 1.5px rgba(12,14,18,.08); outline: none; }
.q-input:focus { box-shadow: inset 0 0 0 2px #e0518f; }
.q-input__suffix { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 15px; color: var(--content-subtle); font-weight: 500; pointer-events: none; }
.q-hint { font-size: 12.5px; color: var(--content-subtle); margin-top: 12px; line-height: 1.45; display: flex; gap: 8px; align-items: flex-start; }
.q-hint svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 1px; color: #c8377f; }

/* archetype result */
.q-arche { border-radius: 22px; padding: 22px 18px; color: #1d020c; text-align: center; }
.q-arche__k { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; opacity: .6; }
.q-arche__emoji { font-size: 50px; line-height: 1; margin-top: 6px; }
.q-arche__t { font-size: 26px; font-weight: 700; letter-spacing: -.5px; margin-top: 6px; }
.q-arche__s { font-size: 14px; line-height: 1.5; margin-top: 8px; opacity: .82; }

/* booking */
.q-days { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-top: 14px; scrollbar-width: none; }
.q-days::-webkit-scrollbar { display: none; }
.q-day { flex: 0 0 auto; min-width: 62px; text-align: center; border: 0; cursor: pointer; font-family: var(--font); background: var(--card); border-radius: 16px; padding: 12px 6px; box-shadow: inset 0 0 0 1.5px rgba(12,14,18,.06); transition: all .15s ease; }
.q-day small { display: block; font-size: 11px; color: var(--content-subtle); }
.q-day b { display: block; font-size: 18px; font-weight: 600; margin-top: 3px; }
.q-day em { display: block; font-size: 10px; color: var(--content-subtle); font-style: normal; margin-top: 2px; }
.q-day.sel { background: var(--brand-strong); box-shadow: none; }
.q-day.sel small, .q-day.sel b, .q-day.sel em { color: #fff; }
.q-slots { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 16px; }
.q-slot { border: 0; cursor: pointer; font-family: var(--font); font-size: 15px; font-weight: 600; color: var(--content-strong); background: var(--card); border-radius: 13px; padding: 14px 0; box-shadow: inset 0 0 0 1.5px rgba(12,14,18,.06); transition: all .15s ease; }
.q-slot.sel { background: #fbe6f0; box-shadow: inset 0 0 0 2px #e0518f; color: #c8377f; }
.q-slot.gone { opacity: .3; pointer-events: none; text-decoration: line-through; }
.q-slots-h { font-size: 13px; font-weight: 600; color: var(--content-subtle); margin-top: 20px; }

/* done */
.q-done { text-align: center; padding: 24px 8px 0; }
.q-done__ic { width: 76px; height: 76px; border-radius: 50%; margin: 0 auto; display: grid; place-items: center; background: #e7f3d4; color: #5b8a1f; }
.q-done__ic svg { width: 38px; height: 38px; }
.q-done__t { font-size: 23px; font-weight: 700; letter-spacing: -.5px; margin-top: 18px; }
.q-done__s { font-size: 14px; color: var(--content-subtle); line-height: 1.5; margin-top: 10px; }
.q-card-line { display: flex; align-items: center; gap: 12px; padding: 14px 16px; text-align: left; }
.q-card-line__ic { width: 42px; height: 42px; border-radius: 12px; flex: 0 0 auto; display: grid; place-items: center; }
.q-card-line__ic svg { width: 22px; height: 22px; }
.q-card-line__t { font-size: 15px; font-weight: 600; }
.q-card-line__m { font-size: 12.5px; color: var(--content-subtle); margin-top: 1px; }

/* ===== Шторка «План на сегодня» (главная, в потоке) ===== */
.sheet--flow { scroll-margin-top: 6px; }
.sheet--flow .grabber { cursor: grab; touch-action: none; }
.sheet--flow .grabber:active { cursor: grabbing; }
.sheet--flow .sheet__head { padding: 2px 0 8px; }
.sheet--flow .navbtn:disabled { opacity: .35; cursor: default; }

/* ===== Полноэкранное редактирование поля (паттерн SAVE-бара) ===== */
#v-settings-foot { flex: 0 0 auto; }
.savebar { display: block; width: 100%; border: 0; background: linear-gradient(135deg, #241a20, #3f2733); color: #fff; font-family: inherit; font-size: 15px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: 18px 0 calc(18px + env(safe-area-inset-bottom, 0px)); cursor: pointer; }
.savebar:active { opacity: .88; }
.pf-q { font-size: 28px; font-weight: 600; letter-spacing: -.5px; text-align: center; margin-top: 26px; }
.pf-val input, .pf-val { font-size: 32px; font-weight: 600; text-align: center; }
.pf-val { margin: 18vh auto 0; max-width: 320px; }
.pf-val input { width: 100%; border: 0; outline: none; background: transparent; border-bottom: 1px solid rgba(12,14,18,.12); padding: 6px 4px 10px; font-family: inherit; }
.pf-bigval { font-size: 34px; font-weight: 600; text-align: center; margin: 12vh 0 6px; }
.pf-bigval small { font-size: 17px; color: var(--content-subtle); font-weight: 500; margin-left: 6px; }
.pf-hr { width: 220px; margin: 0 auto 26px; border-bottom: 1px solid rgba(12,14,18,.12); }

/* ===== Отмена встречи (паттерн ob-lock прототипа) ===== */
.ob-lock { text-align: center; padding: 10px 10px 0; }
.ob-lock__t { font-size: 24px; font-weight: 600; letter-spacing: -.5px; margin-top: 18px; }
.ob-lock__s { font-size: 14px; color: var(--content-subtle); line-height: 1.55; margin-top: 10px; }
.ob-warn { width: 80px; height: 80px; border-radius: 24px; margin: 0 auto; display: grid; place-items: center; background: linear-gradient(160deg,#ffeccc,#ffd98a); color: #7a4d12; box-shadow: 0 14px 30px rgba(214,160,42,.25); }
.ob-warn svg { width: 38px; height: 38px; }
.ob-info { background: #fff; border-radius: 16px; box-shadow: inset 0 0 0 1px rgba(12,14,18,.04); padding: 14px 16px; margin-top: 20px; display: flex; align-items: center; gap: 12px; text-align: left; }
.ob-info__ic { width: 40px; height: 40px; border-radius: 11px; flex: 0 0 auto; display: grid; place-items: center; background: #fbe6f0; color: #c8377f; }
.ob-info__ic svg { width: 20px; height: 20px; }
.ob-info__t { font-size: 14px; font-weight: 600; color: var(--content-strong); }
.ob-info__m { font-size: 12.5px; color: var(--content-subtle); margin-top: 1px; }
.ob-actions { display: flex; gap: 10px; margin-top: 16px; }
.ob-actions button { flex: 1 1 0; border: 0; cursor: pointer; font-family: var(--font); font-size: 14px; font-weight: 600; border-radius: 14px; padding: 13px 0; }
.ob-actions .resch { color: var(--content-strong); background: #fff; box-shadow: inset 0 0 0 1px rgba(12,14,18,.10); }
.ob-actions .canc { color: #c2185b; background: #ffe1ee; }

/* ===== Видео-тренировка: плеер (деликатный, светлый экран; видео на брендовой тёмной рамке, не чёрный) ===== */
.vp-ov { position: fixed; inset: 0; z-index: 9999; background: var(--card); display: flex; flex-direction: column; }
.vp-top { display: flex; align-items: center; gap: 12px; padding: calc(12px + env(safe-area-inset-top)) 16px 10px; }
.vp-back { width: 38px; height: 38px; flex: 0 0 auto; border: 0; border-radius: 50%; background: #f3eef2; color: var(--content-strong); display: grid; place-items: center; cursor: pointer; }
.vp-back svg { width: 20px; height: 20px; }
.vp-ttl { font-weight: 700; font-size: 16px; letter-spacing: -.3px; color: var(--content-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vp-sub { font-size: 12.5px; color: var(--content-subtle); margin-top: 1px; }
.vp-stage { margin: 2px 16px 0; border-radius: 18px; overflow: hidden; background: var(--brand-strong); aspect-ratio: 16 / 9; box-shadow: 0 12px 30px rgba(20, 4, 12, .18); }
.vp-stage video { width: 100%; height: 100%; object-fit: contain; background: var(--brand-strong); display: block; }
.vp-body { flex: 1; overflow-y: auto; padding: 16px; }
.vp-chaps-h { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--content-subtle); margin: 0 2px 8px; }
.vp-chaps { display: flex; flex-direction: column; gap: 8px; }
.vp-chap { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 0; background: #faf7f9; border-radius: 14px; padding: 11px 13px; cursor: pointer; font: inherit; transition: transform .1s ease, background .15s ease; }
.vp-chap:hover { background: #f6eef3; }
.vp-chap:active { transform: scale(.99); }
.vp-chap__t { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 12.5px; color: var(--brand-strong); background: #f3e6ee; border-radius: 8px; padding: 4px 9px; flex: 0 0 auto; }
.vp-chap__l { font-size: 14px; color: var(--content-strong); }
.vp-foot { padding: 8px 16px calc(14px + env(safe-area-inset-bottom)); }
.vp-foot .btn-primary { margin-top: 0; }


/* ============================================================
   VIDEO-WORKOUT 1:1 (card → Focus/Info → player). Namespaced vw-/vp2-.
   Tokens from Figma 6KWwrdeFdRdcOKYdkQTprr (Geist palette).
   ============================================================ */
.vw-ov,.vw-sheet,.vp2{
  --vwink:#0c0e12;--vwink66:rgba(12,14,18,.66);--vwink40:rgba(12,14,18,.4);--vwink26:rgba(12,14,18,.26);
  --vwbd:rgba(12,14,18,.08);--vwbdc:rgba(12,14,18,.12);--vwbrand:#ffc5dc;--vwbrandp:#ffb0cd;--vwbrandd:#ff7eaa;
  --vwgoal:#ffedf2;--vwscreen:#efeff0;--vwinset:#f1f1f2;--vwtrack:rgba(153,160,174,.22);--vwneg:#ff383c;--vwtag:#ff7a3d;
  font-family:inherit;color:var(--vwink);-webkit-tap-highlight-color:transparent;
}
.vw-ov *,.vw-sheet *,.vp2 *{box-sizing:border-box}

/* ---------- CARD ---------- */
.vw-ov{position:fixed;inset:0;z-index:2200;background:var(--vwscreen);overflow:hidden}
.vw-scroll{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}
.vw-scroll::-webkit-scrollbar{width:0}
.vw-hero{position:relative;height:440px;overflow:hidden;background:#c9b6a4}
.vw-cover{position:absolute;left:0;top:-8%;width:100%;height:116%;background-size:cover;background-position:center;transform-origin:center top;will-change:transform}
.vw-cover-grad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.16),rgba(0,0,0,0) 24%);z-index:1}
.vw-cover-act{position:absolute;top:54px;left:16px;right:16px;display:flex;justify-content:space-between;z-index:3}
.vw-cb{width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:grid;place-items:center;cursor:pointer;color:#0c0e12;box-shadow:0 4px 14px rgba(0,0,0,.1)}
.vw-cb svg{width:20px;height:20px}
.vw-panel{position:relative;z-index:2;background:var(--vwscreen);border-radius:24px 24px 0 0;margin-top:-26px;padding:18px 16px 64px;min-height:60vh}
.vw-title{font-size:26px;line-height:32px;font-weight:600;letter-spacing:-.02em;margin:2px 2px 4px}
.vw-instr{font-size:13px;color:var(--vwink66);margin:0 2px 14px}
.vw-stats{display:flex;background:#fff;border-radius:14px;overflow:hidden;margin:12px 0 16px;box-shadow:0 1px 2px rgba(16,18,22,.03)}
.vw-stat{flex:1;padding:14px 4px 13px;text-align:center;position:relative}
.vw-stat+.vw-stat::before{content:"";position:absolute;left:0;top:22%;height:56%;width:1px;background:var(--vwbd)}
.vw-sic{width:17px;height:17px;margin:0 auto 8px;color:var(--vwink66)}
.vw-sic svg{width:100%;height:100%;display:block}
.vw-stat b{font-size:13px;font-weight:600;letter-spacing:-.01em}
.vw-cta{width:100%;border:0;border-radius:999px;background:var(--vwbrand);color:#0c0e12;font-family:inherit;font-size:16px;font-weight:600;padding:15px;cursor:pointer;transition:.15s;margin-bottom:20px}
.vw-cta:active{background:var(--vwbrandp)}
.vw-note{background:#fff;border-radius:16px;padding:14px;margin-bottom:10px;box-shadow:0 1px 2px rgba(16,18,22,.03)}
.vw-note-row{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.vw-note h4{font-size:14px;font-weight:600;margin:0 0 4px}
.vw-note p{font-size:12.5px;color:var(--vwink40);line-height:1.5;margin:0}
.vw-chev{color:var(--vwink26);flex:0 0 auto;margin-top:2px}
.vw-frow{display:flex;justify-content:space-between;align-items:center;background:#fff;border-radius:16px;padding:15px 14px;margin-bottom:20px;cursor:pointer;box-shadow:0 1px 2px rgba(16,18,22,.03)}
.vw-frl{font-size:14px;font-weight:500}
.vw-frr{display:flex;gap:8px;align-items:center;color:var(--vwink40);font-size:13px}
.vw-sech{font-size:13px;font-weight:600;color:var(--vwink66);margin:0 2px 9px}
.vw-eq{display:flex;align-items:center;gap:12px;background:#fff;border-radius:16px;padding:11px 12px;margin-bottom:8px;box-shadow:0 1px 2px rgba(16,18,22,.03)}
.vw-th{width:48px;height:48px;border-radius:11px;background:var(--vwinset);overflow:hidden;flex:0 0 auto}
.vw-th img{width:100%;height:100%;object-fit:cover;display:block}
.vw-eqb{flex:1;min-width:0}
.vw-eqn{font-size:14px;font-weight:500}
.vw-lk{color:var(--vwink26)}
.vw-grp{background:#fff;border-radius:16px;padding:2px 14px;margin-bottom:20px;box-shadow:0 1px 2px rgba(16,18,22,.03)}
.vw-exr{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--vwbd)}
.vw-exr:last-child{border-bottom:0}
.vw-exb{flex:1;min-width:0}
.vw-exn{font-size:14px;font-weight:500}
.vw-exm{font-size:12px;color:var(--vwink40);margin-top:3px}
.vw-info{width:26px;height:26px;border-radius:50%;border:1px solid var(--vwbdc);display:grid;place-items:center;color:var(--vwink40);flex:0 0 auto;cursor:pointer;background:#fff}
.vw-info svg{width:13px;height:13px}
.vw-sec-btn{width:100%;border:1px solid var(--vwbdc);background:#fff;border-radius:999px;padding:13px;font-family:inherit;font-size:15px;font-weight:500;color:var(--vwink);cursor:pointer}

/* ---------- shared slide-up sheets (Focus + Info) ---------- */
.vw-sheet{position:fixed;inset:0;z-index:2300;background:var(--vwscreen);transform:translateY(100%);transition:transform .4s cubic-bezier(.32,.72,0,1);display:flex;flex-direction:column}
.vw-sheet.open{transform:translateY(0)}
/* Focus */
.vw-fhead{position:relative;flex:0 0 auto;height:96px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:12px}
.vw-fback{position:absolute;left:16px;bottom:8px;width:40px;height:40px;border-radius:50%;border:0;background:#fff;display:grid;place-items:center;cursor:pointer;color:#0c0e12;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.vw-fback svg{width:20px;height:20px}
.vw-ftitle{font-size:17px;font-weight:600;letter-spacing:-.02em}
.vw-ffig{flex:1;min-height:0;display:flex;align-items:flex-start;justify-content:center;padding:0 16px;overflow:hidden;mix-blend-mode:multiply}
.vw-ffig img{width:100%;height:auto;margin-top:-11%;max-width:430px}
.vw-fcard{flex:0 0 auto;margin:0 20px calc(28px + env(safe-area-inset-bottom));background:#fff;border-radius:14px;padding:14px 16px;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.vw-fcard b{display:block;font-size:14px;font-weight:600;color:#2a2a2a}
.vw-fcard span{display:block;font-size:14px;font-weight:500;color:#9daabd;margin-top:4px}
/* Info */
.vw-infosheet{overflow-y:auto;display:block}
.vw-infosheet::-webkit-scrollbar{width:0}
.vw-ihero{position:relative;height:228px;overflow:hidden}
.vw-ihero img{width:100%;height:100%;object-fit:cover;display:block}
.vw-igrab{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:38px;height:5px;border-radius:3px;background:rgba(255,255,255,.85);z-index:2}
.vw-iclose{position:absolute;top:50px;right:16px;width:34px;height:34px;border-radius:50%;border:0;background:rgba(255,255,255,.92);display:grid;place-items:center;cursor:pointer;color:#0c0e12;z-index:2}
.vw-iclose svg{width:17px;height:17px}
.vw-ibody{padding:18px 16px calc(44px + env(safe-area-inset-bottom))}
.vw-itag{display:inline-block;background:var(--vwgoal);color:var(--vwtag);font-size:10px;font-weight:600;padding:3px 8px;border-radius:6px;letter-spacing:.04em;margin-bottom:8px}
.vw-ittl{font-size:24px;font-weight:600;letter-spacing:-.02em;margin:0 0 6px}
.vw-idesc{font-size:13.5px;color:var(--vwink66);line-height:1.5;margin:0 0 20px}
.vw-ih{font-size:13px;font-weight:600;color:var(--vwink66);margin:0 2px 9px}
.vw-ieq{display:flex;align-items:center;gap:12px;background:#fff;border-radius:16px;padding:11px 12px;margin-bottom:20px;box-shadow:0 1px 2px rgba(16,18,22,.03)}
.vw-ieq .vw-th{width:44px;height:44px}
.vw-steps{background:#fff;border-radius:16px;padding:4px 14px;margin-bottom:20px;box-shadow:0 1px 2px rgba(16,18,22,.03)}
.vw-step{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--vwbd)}
.vw-step:last-child{border-bottom:0}
.vw-stepn{width:24px;height:24px;border-radius:50%;background:var(--vwinset);color:var(--vwink);font-size:12px;font-weight:600;display:grid;place-items:center;flex:0 0 auto}
.vw-step p{margin:0;font-size:13.5px;line-height:1.5}
.vw-blist{background:#fff;border-radius:16px;padding:6px 14px;margin-bottom:14px;box-shadow:0 1px 2px rgba(16,18,22,.03)}
.vw-bl{display:flex;gap:10px;align-items:flex-start;padding:9px 0;font-size:13.5px;line-height:1.45}
.vw-bd{width:6px;height:6px;border-radius:50%;background:var(--vwink26);margin-top:7px;flex:0 0 auto}

/* ---------- audio toggles ---------- */
.vp2-aud{position:absolute;top:54px;left:16px;z-index:13;display:flex;gap:8px}
.vw-audbtn{width:34px;height:34px;border-radius:50%;border:0;background:rgba(20,20,22,.42);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:grid;place-items:center;color:#fff;cursor:pointer;transition:.15s}
.vw-audbtn.off{opacity:.42}
.vw-audbtn svg{width:17px;height:17px}

/* ---------- PLAYER ---------- */
.vp2{position:fixed;inset:0;z-index:2400;background:#15110f;overflow:hidden}
.vp2-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#15110f;display:block}
.vp2-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;transition:.3s}
.vp2.mode-sheet .vp2-scrim{background:linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,0) 30%)}
.vp2.mode-im .vp2-scrim{background:linear-gradient(180deg,rgba(0,0,0,.42),rgba(0,0,0,.03) 26%,rgba(0,0,0,.03) 58%,rgba(0,0,0,.5))}
.vp2.mode-im.controls .vp2-scrim{background:linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,.2) 32%,rgba(0,0,0,.2) 56%,rgba(0,0,0,.6))}
.vp2-restdim{position:absolute;inset:0;z-index:2;background:rgba(8,8,10,.55);opacity:0;transition:.4s ease;pointer-events:none}
.vp2.resting .vp2-restdim{opacity:1}
.vp2-x{position:absolute;top:54px;right:16px;width:34px;height:34px;border-radius:50%;border:0;background:rgba(255,255,255,.92);display:grid;place-items:center;cursor:pointer;z-index:14;color:#0c0e12}
.vp2.mode-im .vp2-x{background:rgba(255,255,255,.18);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff}
.vp2-x svg{width:17px;height:17px}
/* sheet-mode cover label */
.vp2-seg{position:absolute;left:18px;right:80px;z-index:12;color:#fff;text-shadow:0 1px 16px rgba(0,0,0,.45);transition:opacity .25s}
.vp2-seg .s{font-size:14px;font-weight:500;opacity:.95}
.vp2-seg .t{font-size:30px;font-weight:600;line-height:1.05;margin-top:2px;font-variant-numeric:tabular-nums;transition:transform .2s}
.vp2-seg .nx{font-size:12.5px;font-weight:500;opacity:.85;margin-top:3px}
.vp2-seg.warn .t{transform:scale(1.12);text-shadow:0 0 20px rgba(255,160,190,.9)}
.vp2.resting .vp2-seg .t{font-size:40px}
.vp2-expand{position:absolute;right:16px;z-index:12;width:34px;height:34px;border-radius:50%;background:rgba(20,20,22,.42);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:grid;place-items:center;color:#fff;cursor:pointer;border:0}
.vp2-expand svg{width:16px;height:16px}
/* GO + done */
.vp2-go{position:absolute;inset:0;display:grid;place-items:center;z-index:16;pointer-events:none;background:rgba(8,8,10,.4)}
.vp2-go b{font-size:84px;font-weight:600;color:#fff;letter-spacing:.04em;text-shadow:0 3px 30px rgba(0,0,0,.5)}
@keyframes vwGoPop{0%{transform:scale(.5);opacity:0}45%{transform:scale(1.12);opacity:1}100%{transform:scale(1);opacity:.96}}
.vw-pop b{animation:vwGoPop .5s cubic-bezier(.2,.85,.25,1)}
.vp2-donescr{position:absolute;inset:0;z-index:18;background:var(--vwscreen);display:none;flex-direction:column;align-items:center;justify-content:center;padding:30px;text-align:center}
.vp2-donescr.show{display:flex}
.vp2-dring{width:96px;height:96px;border-radius:50%;background:var(--vwgoal);display:grid;place-items:center;margin-bottom:20px}
.vp2-dring svg{width:46px;height:46px;color:var(--vwbrandd)}
.vp2-dring svg path{stroke-dasharray:40;stroke-dashoffset:40;animation:vwDraw .5s .15s forwards cubic-bezier(.6,.1,.3,1)}
@keyframes vwDraw{to{stroke-dashoffset:0}}
.vp2-donescr h2{font-size:23px;font-weight:600;margin:0 0 6px;letter-spacing:-.02em}
.vp2-donescr p{font-size:14px;color:var(--vwink66);margin:0 0 24px}
.vp2-ds{display:flex;gap:10px;margin-bottom:28px;width:100%;max-width:330px}
.vp2-ds .c{flex:1;background:#fff;border-radius:14px;padding:14px 8px;box-shadow:0 1px 2px rgba(16,18,22,.04)}
.vp2-ds .c b{display:block;font-size:20px;font-weight:600}
.vp2-ds .c small{font-size:11px;color:var(--vwink40)}
.vp2-donescr .vw-cta{max-width:330px}
/* immersive HUD top-left */
.vp2-hud{position:absolute;top:58px;left:20px;z-index:6;color:#fff;transition:opacity .22s}
.vp2-hud .side{font-size:13px;font-weight:400;opacity:.85}
.vp2-hud .nm{font-size:18px;font-weight:500;margin:1px 0 2px;text-shadow:0 1px 14px rgba(0,0,0,.5)}
.vp2-hud .cd{font-size:46px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em;text-shadow:0 2px 18px rgba(0,0,0,.45);transition:transform .2s}
.vp2-hud .cd.warn{transform:scale(1.08);text-shadow:0 0 22px rgba(255,150,185,.95)}
.vp2.controls .vp2-hud,.vp2.resting .vp2-hud{opacity:0}
/* immersive center controls */
.vp2-imctrls{position:absolute;left:0;right:0;top:48%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;gap:30px;z-index:7;opacity:0;visibility:hidden;transition:.22s}
.vp2.controls .vp2-imctrls{opacity:1;visibility:visible}
.vp2-sb{width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:0;display:grid;place-items:center;color:#fff;cursor:pointer}
.vp2-sb svg{width:20px;height:20px}
.vp2-pp{width:78px;height:78px;border-radius:50%;background:rgba(255,255,255,.24);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:0;display:grid;place-items:center;color:#fff;cursor:pointer}
.vp2-pp svg{width:30px;height:30px}
/* rest ring */
.vp2-rest{position:absolute;left:0;right:0;top:46%;transform:translateY(-50%);z-index:7;display:none;flex-direction:column;align-items:center;color:#fff}
.vp2-rest .lbl{font-size:15px;font-weight:500;opacity:.92;margin-bottom:14px;letter-spacing:.02em}
.vp2-ring{position:relative;width:148px;height:148px}
.vp2-ring svg{width:148px;height:148px;transform:rotate(-90deg)}
.vp2-ring circle{fill:none;stroke-width:6}
.vp2-ring .bg{stroke:rgba(255,255,255,.22)}
.vp2-ring .fg{stroke:#fff;stroke-linecap:round;transition:stroke-dashoffset .2s linear}
.vp2-ring .num{position:absolute;inset:0;display:grid;place-items:center;font-size:42px;font-weight:600;font-variant-numeric:tabular-nums}
.vp2-rest .nx{font-size:14px;font-weight:500;opacity:.9;margin-top:16px}
/* rotate tip */
.vp2-rotate{position:absolute;left:50%;bottom:70px;transform:translateX(-50%);z-index:9;background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;border:0;font-family:inherit;font-size:12.5px;font-weight:500;padding:8px 14px;border-radius:999px;cursor:pointer;display:flex;gap:7px;align-items:center;opacity:0;visibility:hidden;transition:.2s}
.vp2.controls .vp2-rotate{opacity:1;visibility:visible}
.vp2-rotate svg{width:15px;height:15px}
/* immersive bottom */
.vp2-imbottom{position:absolute;left:0;right:0;bottom:0;padding:0 18px calc(22px + env(safe-area-inset-bottom));z-index:8;transition:opacity .25s}
.vp2.resting .vp2-imbottom{opacity:.5}
.vp2-immeta{display:flex;align-items:flex-end;justify-content:space-between;color:#fff;margin-bottom:12px}
.vp2-immeta .e b{display:block;font-size:15px;font-weight:500;font-variant-numeric:tabular-nums}
.vp2-immeta .e small{font-size:11px;opacity:.75}
.vp2-immeta .e.r{text-align:right}
.vp2-imseg{display:flex;gap:4px}
.vp2-imseg .vp2-sg{flex:1;height:4px;border-radius:3px;background:rgba(255,255,255,.3);overflow:hidden}
.vp2-imseg .vp2-sg i{display:block;height:100%;width:0;background:#fff;border-radius:3px;transition:width .2s linear}
/* ----- mode visibility ----- */
.vp2-hud,.vp2-imctrls,.vp2-rotate,.vp2-imbottom,.vp2-rest{display:none}
.vp2.mode-im .vp2-hud{display:block}
.vp2.mode-im .vp2-imctrls{display:flex}
.vp2.mode-im .vp2-rotate{display:flex}
.vp2.mode-im .vp2-imbottom{display:block}
.vp2.mode-im.resting .vp2-rest{display:flex}
.vp2.mode-im.resting .vp2-imctrls{display:none}
.vp2.mode-im .vp2-seg,.vp2.mode-im .vp2-expand{display:none}
.vp2.mode-im .vp2-sheet{transform:translateY(112%)!important}
/* ----- sheet (control panel) ----- */
.vp2-sheet{position:absolute;left:0;right:0;top:0;height:100%;z-index:10;transform:translateY(54%);background:#fff;border-radius:24px 24px 0 0;box-shadow:0 -14px 36px -18px rgba(0,0,0,.28);display:flex;flex-direction:column;touch-action:none;padding:0 18px}
.vp2-sheet.glide{transition:transform .42s cubic-bezier(.32,.72,0,1)}
.vp2-grab{width:38px;height:5px;border-radius:3px;background:#d7d9dd;margin:10px auto 14px;flex:0 0 auto;cursor:grab}
.vp2-bar{display:flex;gap:4px;margin-bottom:18px;flex:0 0 auto}
.vp2-bar .vp2-sg{flex:1;height:4px;border-radius:3px;background:var(--vwtrack);overflow:hidden}
.vp2-bar .vp2-sg i{display:block;height:100%;width:0;background:var(--vwink);border-radius:3px;transition:width .2s linear}
.vp2-tm{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;flex:0 0 auto}
.vp2-tm .side{text-align:center;min-width:50px}
.vp2-tm .side b{display:block;font-size:15px;font-weight:500;font-variant-numeric:tabular-nums}
.vp2-tm .side small{font-size:11px;color:var(--vwink40)}
.vp2-tm .big{font-size:35px;font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums;transition:transform .2s,color .2s}
.vp2-tm .big.warn{color:var(--vwbrandd);transform:scale(1.06)}
.vp2-ctrls{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:16px;flex:0 0 auto}
.vp2-pill{flex:1;border:1px solid var(--vwbdc);background:#fff;border-radius:999px;padding:13px;font-family:inherit;font-size:15px;font-weight:500;color:var(--vwink);cursor:pointer}
.vp2-pp2{width:60px;height:60px;border-radius:50%;background:var(--vwink);color:#fff;border:0;display:grid;place-items:center;cursor:pointer;flex:0 0 auto;box-shadow:0 8px 20px -6px rgba(12,14,18,.5)}
.vp2-pp2 svg{width:24px;height:24px}
.vp2-nowh{font-size:12px;font-weight:500;color:var(--vwink40);margin:2px 2px 8px;flex:0 0 auto;display:flex;justify-content:space-between;align-items:center}
.vp2-nowh .more{color:var(--vwink26)}
.vp2-sheet.expanded .vp2-nowh .lbl::after{content:" — вся программа"}
.vp2-sheet.expanded .vp2-nowh .more{opacity:0}
.vp2-list{flex:1;overflow-y:auto;margin:0 -4px;padding:0 4px 16px;min-height:0}
.vp2-list::-webkit-scrollbar{width:0}
.vp2-li{display:none;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--vwbd)}
.vp2-lth{width:48px;height:48px;border-radius:11px;overflow:hidden;background:var(--vwinset);flex:0 0 auto;cursor:pointer}
.vp2-lth img{width:100%;height:100%;object-fit:cover;display:block}
.vp2-lb{flex:1;min-width:0;cursor:pointer}
.vp2-ln{font-size:14px;font-weight:500}
.vp2-lm{font-size:12px;color:var(--vwink40);margin-top:2px}
.vp2-linfo{width:26px;height:26px;border-radius:50%;border:1px solid var(--vwbdc);display:grid;place-items:center;color:var(--vwink40);flex:0 0 auto;cursor:pointer;background:#fff}
.vp2-linfo svg{width:13px;height:13px}
.vp2-sheet:not(.expanded) .vp2-li.cur{display:flex;border-bottom:0}
.vp2-sheet.expanded .vp2-li{display:flex;opacity:.5}
.vp2-sheet.expanded .vp2-li.cur{opacity:1}
/* ----- forced landscape ----- */
.vp2.land{width:100vh;height:100vw;top:50%;left:50%;transform:translate(-50%,-50%) rotate(90deg);transform-origin:center center}

/* ===== Guided GIF player (premium white-minimal — matches the video player) ===== */
.gp,.gc,.gc-sheet,.gc-isheet{--ink:#0c0e12;--ink66:rgba(12,14,18,.62);--ink40:rgba(12,14,18,.4);--ink26:rgba(12,14,18,.24);--gphair:rgba(12,14,18,.06);--gpsoft:#f6f6f8;--brandd:#f0a0c0;--goal:#ffe9f1;--gpprimary:#2c0c17;--gpprimaryp:#3a1322;--gcbg:#f4f4f6;--border-ctl:rgba(12,14,18,.12)}
.gp{position:fixed;inset:0;z-index:2500;background:#fff;color:var(--ink);display:flex;flex-direction:column;overflow:hidden;font-family:var(--font)}
.gp-top{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:calc(env(safe-area-inset-top, 0px) + 12px) 20px 0}
.gp-ic{width:34px;height:34px;border-radius:50%;border:0;background:transparent;display:grid;place-items:center;cursor:pointer;color:var(--ink);flex:0 0 auto;padding:0}
.gp-ic:active{background:var(--gpsoft)}
.gp-ic svg{width:21px;height:21px;stroke-width:1.8}
.gp-ttl{font-size:15px;font-weight:600;letter-spacing:-.01em;text-align:center;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gp-segs{flex:0 0 auto;display:flex;gap:5px;padding:14px 20px 0}
.gp-sg{flex:1;height:3px;border-radius:2px;background:#ececef;overflow:hidden}
.gp-sg i{display:block;height:100%;width:0;background:#2a2d34;border-radius:2px;transition:width .4s cubic-bezier(.4,0,.2,1)}
.gp-sg.done i{width:100%}
.gp-sg.now{background:var(--goal)}
.gp-sg.now i{background:var(--brandd)}
.gp-stage{flex:1 1 auto;min-height:0;position:relative;display:flex;align-items:center;justify-content:center;padding:6px 8px 0}
.gp-stage video,.gp-stage img{width:100%;height:100%;object-fit:contain;display:block}
.gp-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#cfd2da}
.gp-ph svg{width:92px;height:92px}
.gp-loop{position:absolute;right:18px;top:10px;color:var(--ink26);font-size:11px;font-weight:500;display:flex;gap:5px;align-items:center}
.gp-loop svg{width:13px;height:13px}
.gp-info-b{flex:0 0 auto;padding:0 20px}
.gp-sec{font-size:11px;font-weight:600;letter-spacing:.07em;color:var(--ink40);text-transform:uppercase}
.gp-name{font-size:20px;font-weight:600;letter-spacing:-.02em;margin:3px 0 4px}
.gp-sub{font-size:13px;color:var(--ink40);margin-bottom:16px}
.gp-sub b{color:var(--ink66);font-weight:500}
.gp-setline{display:flex;align-items:center;justify-content:space-between;padding-top:14px;border-top:1px solid var(--gphair)}
.gp-setline .t{font-size:14px;font-weight:600}
.gp-dots{display:flex;gap:7px}
.gp-dot{width:8px;height:8px;border-radius:50%;background:#dcdce0;transition:.2s}
.gp-dot.done{background:var(--brandd)}
.gp-dot.cur{background:#fff;box-shadow:0 0 0 2px var(--brandd)}
.gp-rows{flex:0 0 auto;padding:4px 20px 0}
.gp-row{display:flex;align-items:center;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--gphair)}
.gp-rl{font-size:14px;color:var(--ink66);font-weight:500}
.gp-rc{display:flex;align-items:center;gap:20px}
.gp-rc button{width:34px;height:34px;border-radius:50%;border:1px solid rgba(12,14,18,.11);background:#fff;color:var(--ink66);cursor:pointer;display:grid;place-items:center;transition:background .15s,border-color .15s,transform .12s;padding:0}
.gp-rc button:active{background:var(--gpsoft);border-color:transparent;transform:scale(.9)}
.gp-rc button svg{width:15px;height:15px;stroke-width:1.6}
.gp-rv{min-width:70px;display:inline-flex;align-items:baseline;justify-content:center;gap:3px}
.gp-rv b{font-size:22px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.01em;display:inline-block}
.gp-rv b.bump{animation:gpbump .22s cubic-bezier(.3,.7,.3,1)}
@keyframes gpbump{0%{transform:scale(1)}45%{transform:scale(1.12)}100%{transform:scale(1)}}
.gp-rv i{font-size:12px;color:var(--ink26);font-style:normal}
.gp-extimer{padding:10px 2px 6px;text-align:center}
.gp-extimer .lab{font-size:11px;font-weight:600;letter-spacing:.07em;color:var(--ink40);text-transform:uppercase}
.gp-exnum{font-size:44px;font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:-.02em;margin:4px 0 16px;transition:color .2s}
.gp-exnum.run{color:var(--brandd)}
.gp-exbar{height:4px;border-radius:2px;background:#ececef;overflow:hidden}
.gp-exbar i{display:block;height:100%;width:0;background:var(--brandd);border-radius:2px;transition:width .35s linear}
.gp-foot{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:14px 20px calc(16px + env(safe-area-inset-bottom,0px))}
.gp-go{flex:1 1 auto;min-width:0;border:0;border-radius:999px;background:var(--gpprimary);color:#fff;font-family:var(--font);font-size:14.5px;font-weight:500;letter-spacing:.01em;padding:15px;cursor:pointer;transition:.15s;display:flex;align-items:center;justify-content:center;gap:8px}
.gp-go svg{width:16px;height:16px;opacity:.92}
.gp-go:active{background:var(--gpprimaryp)}
.gp-nav{flex:0 0 auto;width:52px;height:52px;border-radius:50%;border:1px solid var(--gphair);background:#fff;color:var(--ink66);display:grid;place-items:center;cursor:pointer;transition:background .15s,transform .12s,opacity .15s;padding:0}
.gp-nav svg{width:20px;height:20px}
.gp-nav:active{background:var(--gpsoft);transform:scale(.92)}
.gp-nav:disabled{opacity:.28;pointer-events:none}
/* rest — full-screen, soft warm gradient */
.gp-ov{position:absolute;inset:0;z-index:20;display:none;background:radial-gradient(135% 92% at 50% -8%,#fff2f7 0%,#fff 58%)}
.gp-ov.show{display:flex}
.gp-ov-in{margin:auto;display:flex;flex-direction:column;align-items:center;padding:24px;width:100%}
.gp-ov .lbl{font-size:13px;font-weight:600;color:var(--brandd);letter-spacing:.14em;text-transform:uppercase;margin-bottom:24px}
.gp-ring{position:relative;width:210px;height:210px;animation:gpbreath 3.4s ease-in-out infinite}
.gp-ring svg{width:210px;height:210px;transform:rotate(-90deg)}
.gp-ring circle{fill:none;stroke-width:4}
.gp-ring .bg{stroke:#f1e7eb}
.gp-ring .fg{stroke:var(--brandd);stroke-linecap:round;transition:stroke-dashoffset .3s linear}
.gp-ring .num{position:absolute;inset:0;display:grid;place-items:center;font-size:54px;font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:-.03em;color:var(--gpprimary)}
@keyframes gpbreath{0%,100%{transform:scale(1)}50%{transform:scale(1.018)}}
.gp-ov .nx{font-size:15px;color:var(--ink66);font-weight:500;margin-top:26px;text-align:center;max-width:78%;line-height:1.4}
.gp-ov .nx b{color:var(--ink);font-weight:600}
.gp-ov .acts{display:flex;gap:10px;margin-top:34px}
.gp-ov .acts button{border:0;border-radius:14px;font-family:var(--font);font-size:14px;font-weight:500;padding:13px 24px;cursor:pointer;white-space:nowrap;transition:transform .12s,background .15s}
.gp-ov .acts button:active{transform:scale(.95)}
.gp-ov .gp-rest-add{background:#fff;color:var(--ink66);box-shadow:inset 0 0 0 1px var(--gphair)}
.gp-ov .gp-rest-skip{background:var(--gpprimary);color:#fff}
.gp-done{position:absolute;inset:0;z-index:24;background:#fff;display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px}
.gp-done.show{display:flex}
.gp-done .ring{width:92px;height:92px;border-radius:50%;background:var(--goal);display:grid;place-items:center;margin-bottom:22px}
.gp-done .ring svg{width:44px;height:44px;color:var(--brandd)}
.gp-done .ring svg path{stroke-dasharray:40;stroke-dashoffset:40;animation:gpdraw .5s .15s forwards cubic-bezier(.6,.1,.3,1)}
@keyframes gpdraw{to{stroke-dashoffset:0}}
.gp-done h2{font-size:20px;font-weight:600;margin:0 0 6px;letter-spacing:-.02em}
.gp-done p{font-size:14px;color:var(--ink66);margin:0 0 26px}
.gp-ds{display:flex;gap:28px;margin-bottom:30px}
.gp-ds .c b{display:block;font-size:22px;font-weight:600;font-variant-numeric:tabular-nums}
.gp-ds .c small{font-size:12px;color:var(--ink40)}
.gp-fin{width:100%;max-width:320px;border:0;border-radius:999px;background:var(--gpprimary);color:#fff;font-family:var(--font);font-size:14.5px;font-weight:500;padding:16px;cursor:pointer}
.gp-info{position:absolute;inset:0;z-index:26;background:#fff;transform:translateY(100%);transition:transform .42s cubic-bezier(.32,.72,0,1);overflow-y:auto}
.gp-info.open{transform:translateY(0)}
.gp-info::-webkit-scrollbar{width:0}
.gp-ihero{position:relative;height:300px;display:flex;align-items:center;justify-content:center;background:#fff}
.gp-ihero video,.gp-ihero img{width:100%;height:100%;object-fit:contain}
.gp-iclose{position:absolute;top:50px;right:18px;width:34px;height:34px;border-radius:50%;border:0;background:var(--gpsoft);display:grid;place-items:center;cursor:pointer;color:#0c0e12;z-index:2}
.gp-iclose svg{width:18px;height:18px}
.gp-ibody{padding:6px 22px 44px}
.gp-itag{display:inline-block;background:var(--goal);color:var(--gpprimary);font-size:10px;font-weight:600;padding:3px 9px;border-radius:6px;margin-bottom:8px;letter-spacing:.03em}
.gp-ittl{font-size:20px;font-weight:600;margin:0 0 18px;letter-spacing:-.02em}
.gp-ih{font-size:12px;font-weight:600;color:var(--ink40);text-transform:uppercase;letter-spacing:.05em;margin:0 0 10px}
.gp-step{display:flex;gap:14px;padding:11px 0;border-bottom:1px solid var(--gphair)}
.gp-step:last-child{border-bottom:0}
.gp-stepn{width:24px;height:24px;border-radius:50%;background:var(--gpsoft);font-size:12px;font-weight:600;display:grid;place-items:center;flex:0 0 auto}
.gp-step p{margin:0;font-size:14px;line-height:1.5}
.gp-section{margin-bottom:24px}
.gp-bl{display:flex;gap:11px;align-items:flex-start;padding:8px 0;font-size:14px;line-height:1.5}
.gp-bd{width:5px;height:5px;border-radius:50%;background:var(--ink26);margin-top:8px;flex:0 0 auto}
/* overall timer + progress strip */
.gp-strip{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 20px 0}
.gp-clock{display:inline-flex;align-items:center;gap:5px;color:var(--ink40);font-size:12.5px;font-weight:500}
.gp-clock svg{width:13px;height:13px}
.gp-clock b{font-variant-numeric:tabular-nums;color:var(--ink66);font-weight:600;letter-spacing:-.01em}
.gp-prog{font-size:12.5px;color:var(--ink40);font-weight:500;font-variant-numeric:tabular-nums;flex:0 0 auto}
.gp-prog b{color:var(--ink66);font-weight:600}
.gp-vol{font-size:12.5px;color:var(--ink40);font-weight:500;font-variant-numeric:tabular-nums}
.gp-vol b{color:var(--brandd);font-weight:600}
.gp-vol.hide{display:none}
.gp-next{flex:0 0 auto;text-align:center;font-size:12px;color:var(--ink26);font-weight:500;padding:0 20px 2px;min-height:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* GO countdown intro */
.gp-go-intro{position:absolute;inset:0;z-index:30;display:none;align-items:center;justify-content:center;background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.gp-go-intro.show{display:flex}
.gp-go-intro b{font-size:128px;font-weight:600;letter-spacing:-.04em;color:var(--gpprimary);font-variant-numeric:tabular-nums;line-height:1}
.gp-go-intro b.go{color:var(--brandd);font-size:96px}
.gp-go-intro b.pulse{animation:gopop .58s cubic-bezier(.2,.8,.3,1)}
@keyframes gopop{0%{transform:scale(.4);opacity:0}40%{transform:scale(1.06);opacity:1}100%{transform:scale(1);opacity:1}}
/* last-3s warn pulse */
.gp-exnum.warn,.gp-ring .num.warn{color:#e0608f}
.gp-exnum.warn,.gp-ring .num.warn{animation:gowarn .9s ease-in-out infinite}
@keyframes gowarn{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
/* exercise-change fade */
.gp-stage.fade video,.gp-stage.fade img{animation:gpfade .34s ease}
@keyframes gpfade{0%{opacity:0;transform:scale(.985)}100%{opacity:1;transform:scale(1)}}
/* ---- early-exit confirm dialog ---- */
.gp-confirm{position:absolute;inset:0;z-index:34;display:none;align-items:center;justify-content:center;padding:28px;background:rgba(12,8,12,.34);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.gp-confirm.show{display:flex;animation:gpfadein .2s ease}
@keyframes gpfadein{from{opacity:0}to{opacity:1}}
.gp-confirm-card{width:100%;max-width:330px;background:#fff;border-radius:22px;padding:22px 20px 16px;text-align:center;box-shadow:0 24px 60px -16px rgba(20,4,12,.4);animation:gppop .26s cubic-bezier(.3,.8,.3,1)}
@keyframes gppop{0%{transform:scale(.9);opacity:0}100%{transform:scale(1);opacity:1}}
.gp-confirm-t{font-size:18px;font-weight:600;letter-spacing:-.01em;margin-bottom:6px}
.gp-confirm-s{font-size:13.5px;color:var(--ink40);line-height:1.45;margin-bottom:18px}
.gp-confirm-acts{display:flex;flex-direction:column;gap:9px}
.gp-confirm-acts button{border:0;border-radius:14px;font-family:var(--font);font-size:15px;font-weight:500;padding:14px;cursor:pointer;transition:transform .12s}
.gp-confirm-acts button:active{transform:scale(.97)}
.gp-cf-stay{background:var(--gpprimary);color:#fff}
.gp-cf-exit{background:transparent;color:var(--ink40)}
/* ---- surveys (onboarding-question style) ---- */
.gp-survey{position:absolute;inset:0;z-index:36;display:none;flex-direction:column;background:radial-gradient(135% 80% at 50% -8%,#fff2f7 0%,#fff 56%)}
.gp-survey.show{display:flex;animation:gpslideup .34s cubic-bezier(.32,.72,0,1)}
@keyframes gpslideup{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.gp-survey-head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:calc(env(safe-area-inset-top,0px) + 22px) 20px 0}
.gp-survey-k{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--brandd)}
.gp-survey-skip{border:0;background:transparent;color:var(--ink40);font-family:var(--font);font-size:14px;font-weight:500;cursor:pointer;padding:6px 4px}
.gp-survey-body{flex:1 1 auto;min-height:0;overflow-y:auto;padding:22px 22px calc(28px + env(safe-area-inset-bottom,0px))}
.gp-survey-q{font-size:24px;font-weight:600;letter-spacing:-.02em;line-height:1.18;margin:8px 0 8px}
.gp-survey-sub{font-size:14px;color:var(--ink40);line-height:1.5;margin:0 0 22px}
.gp-survey-opts{display:flex;flex-direction:column;gap:9px}
.gp-opt{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;border:0;cursor:pointer;font-family:var(--font);background:#fff;border-radius:14px;padding:13px 15px;min-height:62px;box-shadow:0 4px 12px rgba(20,4,12,.045),inset 0 0 0 1px rgba(12,14,18,.03);transition:background .15s,box-shadow .15s,transform .12s}
.gp-opt:active{transform:scale(.99)}
.gp-opt.sel{background:#f6eef3;box-shadow:inset 0 0 0 1.5px rgba(160,80,120,.22)}
.gp-opt-e{font-size:26px;line-height:1;flex:0 0 auto}
.gp-opt-b{min-width:0;flex:1 1 auto}
.gp-opt-t{display:block;font-size:15.5px;font-weight:500;letter-spacing:-.2px;color:var(--ink);line-height:1.2}
.gp-opt-d{display:block;font-size:12.5px;color:rgba(12,14,18,.5);line-height:1.3;margin-top:2px}
.gp-opt-ck{width:24px;height:24px;flex:0 0 auto;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(12,14,18,.14);display:grid;place-items:center;color:#fff;transition:background .15s,box-shadow .15s}
.gp-opt-ck svg{width:14px;height:14px;opacity:0;transition:opacity .15s}
.gp-opt.sel .gp-opt-ck{background:#1d020c;box-shadow:none}
.gp-opt.sel .gp-opt-ck svg{opacity:1}
.gp-survey-other{display:none;margin-top:10px}
.gp-survey-other.show{display:block;animation:gpfadein .2s ease}
.gp-survey-other textarea{width:100%;border:0;background:#fff;border-radius:14px;padding:14px 16px;font-family:var(--font);font-size:15px;color:var(--ink);outline:none;resize:none;line-height:1.45;box-sizing:border-box;box-shadow:inset 0 0 0 1px rgba(12,14,18,.08)}
.gp-survey-other textarea:focus{box-shadow:inset 0 0 0 1.5px rgba(160,80,120,.28)}
.gp-feel-opts{gap:9px}
.gp-survey-foot{flex:0 0 auto;padding:10px 20px calc(16px + env(safe-area-inset-bottom,0px))}
.gp-survey-go{width:100%;height:56px;border:0;border-radius:999px;background:#1d020c;color:#fff;font-family:var(--font);font-size:16px;font-weight:600;letter-spacing:-.2px;cursor:pointer;transition:opacity .18s,transform .12s}
.gp-survey-go:active{transform:scale(.99)}
.gp-survey-go.off{opacity:.4;pointer-events:none}
/* ---- finish: confetti + burst + count-up ---- */
.gp-done-card{margin:auto;display:flex;flex-direction:column;align-items:center;text-align:center;padding:24px;position:relative;z-index:2}
.gp-done .ring{position:relative}
.gp-burst{position:absolute;inset:-14px;border-radius:50%;background:radial-gradient(circle,rgba(240,160,192,.5),rgba(240,160,192,0) 70%);transform:scale(0);animation:gpburst .7s .05s ease-out forwards}
@keyframes gpburst{0%{transform:scale(0);opacity:.9}100%{transform:scale(1.9);opacity:0}}
.gp-confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.gp-confetti i{position:absolute;top:-12%;width:9px;height:14px;border-radius:2px;opacity:0;animation-name:gpfall;animation-timing-function:cubic-bezier(.35,.15,.6,1);animation-iteration-count:1;animation-fill-mode:forwards}
@keyframes gpfall{0%{opacity:0;transform:translateY(-10px) rotate(0)}12%{opacity:1}100%{opacity:0;transform:translateY(120vh) rotate(560deg)}}

/* ===== Constructed-workout CARD (premium white — same level as the video card) ===== */
.gc{position:fixed;inset:0;z-index:2200;background:#fceef4;color:var(--ink);overflow:hidden;font-family:var(--font)}
.gc-scroll{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden}
.gc-scroll::-webkit-scrollbar{width:0}
.gc-hero{position:relative;height:386px;overflow:hidden;background:linear-gradient(180deg,#fceef4 0%,#fdf3f7 60%,var(--gcbg) 100%);display:flex;align-items:center;justify-content:center}
.gc-hero.nohero{height:320px}
.gc-soft{position:absolute;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(255,200,224,.45),rgba(255,200,224,0) 70%);top:70px;filter:blur(10px)}
.gc-heromedia{position:relative;width:calc(100% - 32px);max-width:560px;height:300px;background:#fff;border-radius:22px;box-shadow:0 16px 36px -18px rgba(20,4,12,.24);display:flex;align-items:center;justify-content:center;overflow:hidden;padding:0;transform-origin:center;will-change:transform}
.gc-heromedia video,.gc-heromedia img{width:100%;height:100%;object-fit:cover;display:block}
.gc-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#cfd2da}
.gc-ph svg{width:90px;height:90px}
.gc-cov{position:absolute;top:calc(env(safe-area-inset-top,0px) + 16px);left:16px;right:16px;display:flex;justify-content:space-between;z-index:4}
.gc-cbtn{width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.86);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:grid;place-items:center;cursor:pointer;color:#0c0e12;box-shadow:0 4px 14px rgba(20,4,12,.08);padding:0}
.gc-cbtn svg{width:20px;height:20px}
.gc-loop{position:absolute;right:16px;top:calc(env(safe-area-inset-top,0px) + 16px);color:var(--ink26);font-size:11px;font-weight:500;display:flex;gap:5px;align-items:center;z-index:3}
.gc-loop svg{width:13px;height:13px}
.gc-panel{position:relative;z-index:2;background:var(--gcbg);border-radius:24px 24px 0 0;margin-top:-26px;min-height:calc(100vh - 330px);padding:18px 16px calc(40px + env(safe-area-inset-bottom,0px))}
.gc-title{font-size:26px;line-height:32px;font-weight:600;letter-spacing:-.02em;margin:2px 2px 4px}
.gc-sub{font-size:13px;color:var(--ink40);line-height:1.5;margin:0 2px 16px}
.gc-stats{display:flex;background:#fff;border-radius:14px;overflow:hidden;margin-bottom:16px;box-shadow:0 1px 2px rgba(16,18,22,.03)}
.gc-stat{flex:1;padding:13px 4px 12px;text-align:center;position:relative}
.gc-stat+.gc-stat::before{content:"";position:absolute;left:0;top:22%;height:56%;width:1px;background:var(--gphair)}
.gc-stat .ic{width:17px;height:17px;margin:0 auto 7px;color:var(--ink66)}
.gc-stat .ic svg{width:17px;height:17px}
.gc-stat b{font-size:13px;font-weight:600;letter-spacing:-.01em;display:block}
.gc-stat small{font-size:11px;color:var(--ink40)}
.gc-cta{width:100%;border:0;border-radius:999px;background:var(--gpprimary);color:#fff;font-family:var(--font);font-size:15.5px;font-weight:500;padding:16px;cursor:pointer;transition:.15s;margin-bottom:20px;display:flex;align-items:center;justify-content:center;gap:8px}
.gc-cta svg{width:17px;height:17px}
.gc-cta:active{background:var(--gpprimaryp)}
.gc-card{background:#fff;border-radius:16px;box-shadow:0 1px 2px rgba(16,18,22,.03)}
.gc-notice{padding:14px;margin-bottom:10px}
.gc-notice h4{font-size:14px;font-weight:600;margin:0 0 4px}
.gc-notice p{font-size:12.5px;color:var(--ink40);line-height:1.5;margin:0}
.gc-frow{display:flex;justify-content:space-between;align-items:center;padding:14px;margin-bottom:20px;cursor:pointer}
.gc-frow .l{display:flex;gap:11px;align-items:center;min-width:0}
.gc-fic{width:34px;height:34px;border-radius:50%;background:var(--goal);display:grid;place-items:center;color:#b06a86;flex:0 0 auto}
.gc-fic svg{width:18px;height:18px}
.gc-ft,.gc-fm{display:block}
.gc-ft{font-size:14px;font-weight:500}
.gc-fm{font-size:12px;color:var(--ink40);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gc-frow .r{color:var(--ink26);flex:0 0 auto;display:flex;align-items:center}
.gc-frow .r svg{width:18px;height:18px}
.gc-sech{font-size:13px;font-weight:600;color:var(--ink66);margin:0 2px 9px}
.gc-eq{display:flex;align-items:center;gap:12px;padding:11px 12px}
.gc-eq+.gc-eq{border-top:1px solid var(--gphair)}
.gc-eth2{width:46px;height:46px;border-radius:11px;background:var(--goal);display:grid;place-items:center;color:#b06a86;flex:0 0 auto}
.gc-eth2 svg{width:22px;height:22px}
.gc-eqn{font-size:14px;font-weight:500}
.gc-card+.gc-sech,.gc-grp+.gc-sech{margin-top:20px}
.gc-grp{padding:2px 14px;margin-bottom:8px}
.gc-exr{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--gphair);cursor:pointer}
.gc-exr:last-child{border-bottom:0}
.gc-eth{width:54px;height:54px;border-radius:12px;background:#fff;border:1px solid var(--gphair);overflow:hidden;flex:0 0 auto;display:grid;place-items:center}
.gc-eth video,.gc-eth img{width:100%;height:100%;object-fit:contain}
.gc-eth .gc-ph svg{width:26px;height:26px}
.gc-exb{flex:1;min-width:0}
.gc-exn{font-size:14px;font-weight:500}
.gc-exm{font-size:12px;color:var(--ink40);margin-top:3px}
.gc-exinfo{width:28px;height:28px;border-radius:50%;border:1px solid var(--border-ctl);display:grid;place-items:center;color:var(--ink40);flex:0 0 auto;cursor:pointer;background:#fff;padding:0}
.gc-exinfo svg{width:14px;height:14px}
.gc-sec2{width:100%;border:0;border-radius:14px;background:#fff;color:var(--ink66);font-family:var(--font);font-size:14px;font-weight:500;padding:15px;cursor:pointer;box-shadow:0 1px 2px rgba(16,18,22,.03);margin-top:12px}
/* focus sheet */
.gc-sheet{position:fixed;inset:0;z-index:2300;background:var(--gcbg);transform:translateY(100%);transition:transform .4s cubic-bezier(.32,.72,0,1);display:flex;flex-direction:column}
.gc-sheet.open{transform:translateY(0)}
.gc-fhead{position:relative;flex:0 0 auto;height:96px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:12px;padding-top:env(safe-area-inset-top,0px)}
.gc-fback{position:absolute;left:16px;bottom:8px;width:40px;height:40px;border-radius:50%;border:0;background:#fff;display:grid;place-items:center;cursor:pointer;color:#0c0e12;box-shadow:0 1px 3px rgba(20,4,12,.08);padding:0}
.gc-fback svg{width:20px;height:20px}
.gc-ftitle{font-size:17px;font-weight:600;letter-spacing:-.02em}
.gc-fz{flex:1;min-height:0;overflow-y:auto;padding:4px 16px 28px}
.gc-fzcard{background:#fff;border-radius:14px;padding:6px 16px;box-shadow:0 1px 3px rgba(20,4,12,.05)}
.gc-fzrow{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--gphair)}
.gc-fzrow:last-child{border-bottom:0}
.gc-fzdot{width:10px;height:10px;border-radius:50%;background:var(--brandd);flex:0 0 auto}
.gc-fznm{font-size:14px;font-weight:500;flex:1}
.gc-fzbar{height:6px;border-radius:3px;background:#ececef;overflow:hidden;width:84px;flex:0 0 auto}
.gc-fzbar i{display:block;height:100%;background:var(--brandd)}
/* exercise info sheet (reuses gp- inner classes) */
.gc-isheet{position:fixed;inset:0;z-index:2300;background:#fff;transform:translateY(100%);transition:transform .42s cubic-bezier(.32,.72,0,1);overflow-y:auto}
.gc-isheet.open{transform:translateY(0)}
.gc-isheet::-webkit-scrollbar{width:0}