/* Re:forma мини-апп v3 — СОБРАНО scripts/build_miniapp_v3.py из miniapp-v3/src/styles. Не править. */

/* ---- src/styles/00-tokens.css ---- */
/* Мини-апп v3 — переменные оболочки. Цвета и кривые прототипа (--bg, --ink,
 * --ease, --spring …) приходят из 20-proto-kit.css (:root прототипа); здесь —
 * только то, чего у телефона-макета не было: инсеты Telegram и высота окна.
 *   --rf-top-inset / --rf-bottom-inset — из SDK Telegram (01-tg.js), в
 *     браузере 0, тогда работает env(safe-area-inset-*);
 *   --rf-vh — стабильная высота окна Telegram (без клавиатуры).
 * Префиксы классов: rf-* — оболочка приложения; xs-*, tm-*, gm-* — кит и
 * блоки прототипа (как есть); у экрана — свой префикс (pf-* личные данные …). */
:root {
  --rf-top-inset: 0px;
  --rf-bottom-inset: 0px;
  --rf-safe-top: max(var(--rf-top-inset), env(safe-area-inset-top, 0px));
  --rf-safe-bottom: max(var(--rf-bottom-inset), env(safe-area-inset-bottom, 0px));
  /* Фон приложения — ОДИН источник истины для всей оболочки: панели, «Ещё» и
   * внутренние страницы, подложка под часами (.rf-topfade), цвет шапки Telegram,
   * <meta theme-color> и полоса статус-бара PWA читают эти два токена
   * (14-chrome.js сэмплирует то, что реально нарисовано, а не константу).
   *   --rf-tab  — главные вкладки (Главная, Дневник, Тренировки, Прогресс);
   *   --rf-page — «Ещё», внутренние страницы xs-scr, экраны состояний, канва.
   * Решение владельца 29–30.09 (макет design-preview/shell-bg-avatars, вариант «бледнее»):
   * ОДИН розовый тон на всё приложение — вкладки, «Ещё», внутренние
   * страницы, слои, липкие шапки и подвалы. Литералы #f3f3f5 / #fff у фона страницы —
   * ошибка: полупрозрачное — rgba(var(--rf-page-rgb), a), сплошное — var(--rf-page).
   * 05.10 владелец: «из-за слишком блеклого розового перестали белые блоки контрастировать» —
   * тон насыщеннее, вариант C сетки тонов: #fff9fd → #fae8f0 (белые плашки снова читаются).
   * 08.10 владелец: «базовый фон — серый, розовый — для особых моментов» — #fae8f0 → #f3f3f5
   * (серый «Ещё» до 29.09). Розовый остаётся акцентом и фоном особых экранов (истории, приветствие,
   * празднования) — у них свои цвета, токен страницы их не трогает.
   *   --rf-page-rgb — тот же тон тройкой для rgba() (липкие шапки, растушёвки подвалов).
   * Плашки на странице — без контура и тени (владелец 03.10): рамку-тень --rf-card-edge
   * (30.09) сняли, тени плашек прототипа гасит 92-plates.css. */
  --rf-page: #f3f3f5;
  --rf-page-rgb: 243, 243, 245;
  --rf-tab: var(--rf-page);
}

/* ---- src/styles/20-proto-kit.css ---- */
/* СГЕНЕРИРОВАНО design-preview/miniapp-v3-dev/tools/extract_css.js из прототипа nav-v2
   (состояния: core_more.js). Правила взяты в порядке каскада прототипа; не правьте
   руками — поправка поверх живёт в файлах стилей с бОльшим номером. */
:root{ --bg: #fff; --ink: #101014; --mut: #8b8a92; --mut2: #5f5e66; --line: rgba(16,16,20,.06); --prot: #a3d546; --fat: #ffb020; --carb: #5aa0f2; --fib: #34c08a; --cheat: #9b6dd6; --cheat-bg: #efe6fb; --cheat-ink: #5b3d8a; --s3: #a3d546; --s2: #ffd75e; --s1: #ffb020; --s0: #e6e5ea; --ok: #5d7f1c; --ok-bg: #eaf6d4; --warn: #a9691f; --warn-bg: #fbe9d6; --card-sh: 0 14px 34px rgba(20,16,26,.07); --spring: cubic-bezier(.2,1.5,.4,1); --ease: cubic-bezier(.3,0,.2,1); }
*{ box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body{ margin: 0px; font-family: Geist, -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif; background: rgb(220, 220, 223); color: var(--ink); -webkit-font-smoothing: antialiased; padding: 32px 20px 90px; }
.rf-app{ position: relative; width: 392px; min-height: 840px; border-radius: 52px; overflow: hidden; display: flex; flex-direction: column; background: var(--bg); box-shadow: rgba(20, 16, 26, 0.26) 0px 34px 80px, rgb(12, 12, 16) 0px 0px 0px 10px, rgb(52, 52, 58) 0px 0px 0px 11px; }
.nav{ flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 10px 18px 8px; }
.nav__t{ font-size: 15.5px; font-weight: 600; letter-spacing: -0.3px; }
.rb{ width: 42px; height: 42px; border-radius: 50%; border: 0px; cursor: pointer; display: grid; place-items: center; background: rgb(241, 241, 243); color: var(--ink); }
.rb svg{ width: 18px; height: 18px; }
.rb--none{ visibility: hidden; }
.btn{ width: 100%; height: 58px; border: 0px; cursor: pointer; border-radius: 100px; font-family: inherit; font-size: 16px; font-weight: 600; letter-spacing: -0.3px; background: rgb(16, 16, 20); color: rgb(255, 255, 255); box-shadow: rgba(16, 16, 20, 0.26) 0px 16px 32px; transition: transform 0.15s, filter 0.15s; }
.btn:hover{ filter: brightness(1.08); }
.btn:active{ transform: scale(0.985); }
.chev{ display: inline-grid; place-items: center; width: 18px; height: 18px; color: rgb(182, 181, 189); flex: 0 0 auto; }
.chev svg{ width: 18px; height: 18px; }
.mini{ display: flex; gap: 4px; margin-top: 8px; }
@media (prefers-reduced-motion: reduce){
*,::before,::after{ animation-duration: 0.001s !important; animation-delay: 0s !important; transition-duration: 0.001s !important; }
}
.rf-app{ height: 840px; min-height: 0px; display: block; flex: 0 0 auto; overflow: clip; }
.rf-pane{ position: absolute; inset: 0px; opacity: 0; pointer-events: none; transform: scale(1.02); transition: opacity .28s var(--ease),transform .32s var(--ease); }
.rf-pane.on{ opacity: 1; pointer-events: auto; transform: none; }
.rf-scr{ position: absolute; inset: 0px; overflow: hidden auto; display: flex; flex-direction: column; padding: 54px 0px 96px; scrollbar-width: none; }
.rf-scr::-webkit-scrollbar{ display: none; }
.rf-pane.rf-sub{ transform: translateX(100%); transition: transform .42s var(--ease),opacity .3s; background: var(--bg); z-index: 5; }
.rf-pane.rf-sub.on{ transform: none; }
.rf-app.rf-full .dock{ transform: translateY(130px); opacity: 0; pointer-events: none; transition: transform .35s var(--ease),opacity .25s; }
.dock{ transition: bottom .5s var(--spring),transform .35s var(--ease),opacity .25s; }
.rf-toast{ position: absolute; left: 24px; right: 24px; bottom: 110px; z-index: 40; background: rgba(16, 16, 20, 0.9); color: rgb(255, 255, 255); font-size: 13px; line-height: 1.4; border-radius: 16px; padding: 12px 16px; text-align: center; opacity: 0; transform: translateY(8px); transition: opacity .25s,transform .3s var(--ease); pointer-events: none; }
.rf-toast.on{ opacity: 1; transform: none; }
.rf-pane[data-tab="more"] .rf-scr,.rf-scr.xs-scr{ background: rgb(243, 243, 245); }
.xs-nav{ padding: 8px 16px 4px; }
.xs-nav .nav__t{ font-size: 17px; font-weight: 600; letter-spacing: -0.35px; color: rgb(17, 17, 17); }
.xs-back{ width: 44px; height: 44px; color: rgb(17, 17, 17); box-shadow: rgba(0, 0, 0, 0.07) 0px 6px 20px, rgba(0, 0, 0, 0.04) 0px 1px 2px; background: rgb(255, 255, 255) !important; }
.xs{ padding: 4px 16px 12px; }
.xs-grp{ margin-top: 22px; }
.xs-grp:first-child{ margin-top: 12px; }
.xs-h{ padding: 0px 18px 9px; font-size: 14.5px; font-weight: 600; letter-spacing: -0.15px; color: rgb(142, 142, 147); }
.xs-note{ padding: 9px 18px 0px; font-size: 13px; line-height: 1.45; color: rgb(142, 142, 147); }
.xs-card{ background: rgb(255, 255, 255); border-radius: 26px; overflow: hidden; }
.xs-row{ position: relative; display: flex; align-items: center; gap: 14px; min-height: 54px; padding: 10px 18px; box-sizing: border-box; cursor: pointer; transition: background 0.15s; }
.xs-row:active{ background: rgb(247, 247, 248); }
.xs-row:not([role]){ cursor: default; }
.xs-row:not([role]):active{ background: none; }
.xs-row + .xs-row::before{ content: ""; position: absolute; left: 18px; right: 18px; top: 0px; height: 1px; background: rgb(236, 236, 239); }
.xs-row + .xs-row:has(> .xs-ic)::before{ left: 54px; }
.xs-ic{ width: 22px; height: 22px; flex: 0 0 auto; display: grid; place-items: center; color: rgb(28, 28, 30); }
.xs-ic svg{ width: 22px; height: 22px; stroke-width: 1.6px; }
.xs-b{ flex: 1 1 auto; min-width: 0px; }
.xs-b b{ display: block; font-size: 16.5px; font-weight: 400; letter-spacing: -0.3px; color: rgb(17, 17, 17); line-height: 1.3; }
.xs-b small{ display: block; font-size: 13px; color: rgb(142, 142, 147); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xs-v{ flex: 0 1 auto; max-width: 55%; font-size: 15.5px; letter-spacing: -0.2px; color: rgb(142, 142, 147); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.xs-row .chev{ flex: 0 0 auto; color: rgb(199, 199, 204); margin-right: -4px; }
.xs-row--exit{ justify-content: flex-start; }
.xs-row--exit .xs-b b{ color: rgb(215, 55, 47); }
.xs-row--exit .chev{ display: none; }
.xs-foot{ text-align: center; font-size: 12px; color: rgb(174, 174, 178); padding: 22px 0px 4px; }
.xs-me{ min-height: 84px; padding: 14px 18px; gap: 14px; }
.xs-me .xs-b b{ font-size: 19px; font-weight: 600; letter-spacing: -0.45px; }
.xs-me .xs-b small{ font-size: 14px; margin-top: 3px; }
.xs-av{ width: 56px; height: 56px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; font-size: 24px; font-weight: 500; color: rgb(58, 58, 60); background: linear-gradient(150deg, rgb(236, 236, 239), rgb(214, 214, 219)); }
.xs-av--l{ width: 92px; height: 92px; font-size: 38px; }
.xs-me2{ display: flex; flex-direction: column; align-items: center; gap: 10px; }
.xs-link{ border: 0px; background: none; font-family: inherit; font-size: 15px; font-weight: 500; color: rgb(17, 17, 17); cursor: pointer; }
.xs-tog{ position: relative; width: 51px; height: 31px; border-radius: 100px; background: rgb(229, 229, 234); flex: 0 0 auto; transition: background 0.25s; }
.xs-tog::after{ content: ""; position: absolute; left: 2px; top: 2px; width: 27px; height: 27px; border-radius: 50%; background: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 8px, rgba(0, 0, 0, 0.08) 0px 1px 1px; transition: transform .25s var(--ease,ease); }
.xs-row--tog.on .xs-tog{ background: rgb(52, 199, 89); }
.xs-row--tog.on .xs-tog::after{ transform: translateX(20px); }
.xs-ck{ width: 22px; height: 22px; flex: 0 0 auto; display: grid; place-items: center; color: rgb(17, 17, 17); opacity: 0; transition: opacity 0.15s; }
.xs-ck svg{ width: 20px; height: 20px; stroke-width: 2.2px; }
.xs-row--radio.on .xs-ck{ opacity: 1; }
.xs-soft{ display: block; margin: 18px auto 0px; height: 46px; padding: 0px 24px; border: 0px; border-radius: 100px; background: rgb(255, 255, 255); color: rgb(17, 17, 17); font-family: inherit; font-size: 15.5px; font-weight: 600; letter-spacing: -0.2px; cursor: pointer; box-shadow: rgba(0, 0, 0, 0.08) 0px 6px 22px, rgba(0, 0, 0, 0.04) 0px 0px 0px 1px; }
.xs-empty{ display: flex; flex-direction: column; align-items: center; text-align: center; padding: 26px 22px 24px; }
.xs-empty__ic{ width: 60px; height: 60px; border-radius: 50%; background: rgb(241, 241, 243); display: grid; place-items: center; color: rgb(17, 17, 17); margin-bottom: 14px; }
.xs-empty__ic svg{ width: 26px; height: 26px; stroke-width: 1.6px; }
.xs-empty b{ font-size: 17.5px; font-weight: 600; letter-spacing: -0.35px; color: rgb(17, 17, 17); }
.xs-empty small{ font-size: 14.5px; line-height: 1.4; color: rgb(142, 142, 147); margin-top: 6px; max-width: 270px; }
.dock{ position: absolute; left: 12px; right: 12px; bottom: 22px; z-index: 30; display: flex; align-items: center; gap: 8px; transition: bottom .5s var(--spring); }
.glass{ background: linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.52) 100%); backdrop-filter: blur(26px) saturate(1.9); -webkit-backdrop-filter: blur(26px) saturate(1.9); box-shadow: rgba(255, 255, 255, 0.95) 0px 1px 0px inset, rgba(255, 255, 255, 0.35) 0px -1px 0px inset, rgba(255, 255, 255, 0.6) 1px 0px 0px inset, rgba(255, 255, 255, 0.6) -1px 0px 0px inset, rgba(20, 4, 12, 0.07) 0px 0px 0px 0.5px, rgba(20, 4, 12, 0.04) 0px 1px 2px, rgba(20, 4, 12, 0.1) 0px 10px 28px; }
.bar{ position: relative; flex: 1 1 auto; height: 64px; border-radius: 100px; display: flex; align-items: stretch; padding: 5px; transition: height .5s var(--spring),padding .5s var(--spring); }
.bar__bub{ position: absolute; top: 5px; bottom: 5px; left: 5px; width: 70px; border-radius: 100px; background: rgba(255, 255, 255, 0.42); box-shadow: rgba(255, 255, 255, 0.9) 0px 0px 0px 0.5px inset; transition: left .55s var(--spring),width .55s var(--spring),opacity .25s; z-index: 0; }
.tab{ position: relative; z-index: 1; flex: 1 1 0px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 0px; background: transparent; font-family: inherit; font-size: 10px; font-weight: 500; letter-spacing: -0.01em; color: rgba(60, 60, 67, 0.62); cursor: pointer; transition: color 0.25s; padding: 0px; }
.tab svg{ width: 25px; height: 25px; display: block; transition: width .45s var(--spring),height .45s var(--spring); }
.f{ fill: transparent; transition: fill 0.2s; }
.tab.on{ color: rgb(16, 16, 20); font-weight: 600; }
.tab.on .f{ fill: currentcolor; }
.tab.on svg{ animation: nvpop .5s var(--spring); }
@keyframes nvpop { 
  0% { transform: scale(0.86); }
  55% { transform: scale(1.1); }
  100% { transform: none; }
}
.tab span{ transition: opacity .2s,max-height .4s var(--spring); max-height: 14px; line-height: 14px; overflow: hidden; white-space: nowrap; }
.act{ position: relative; flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%; border: 0px; cursor: pointer; color: rgb(16, 16, 20); display: none; place-items: center; padding: 0px; transition: width .5s var(--spring),height .5s var(--spring),transform .35s var(--spring); }
.act svg{ width: 26px; height: 26px; transition: transform .4s var(--spring); }
.act:active{ transform: scale(0.94); }
.dock.mini{ bottom: 18px; }
.dock.mini .bar{ height: 46px; padding: 4px; }
.dock.mini .tab{ gap: 0px; }
.dock.mini .tab svg{ width: 22px; height: 22px; }
.dock.mini .tab span{ opacity: 0; max-height: 0px; }
.dock.mini .bar__bub{ top: 4px; bottom: 4px; }
.dock.mini .act{ width: 44px; height: 44px; }
.dock.mini .act svg{ width: 22px; height: 22px; }
.xs-dot{ display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: rgb(199, 199, 204); margin-right: 7px; vertical-align: 1px; }
.xs-dot--new{ background: rgb(29, 2, 12); }
.xs-dot--wait{ background: rgb(255, 159, 10); }
.xs-chips{ display: flex; flex-wrap: wrap; gap: 8px; }
.xs-chip{ height: 38px; padding: 0px 15px; border-radius: 100px; border: 0px; background: rgb(241, 241, 243); color: rgb(17, 17, 17); font-family: inherit; font-size: 15px; letter-spacing: -0.2px; cursor: pointer; transition: background 0.15s, color 0.15s; }
.xs-chip.on{ background: rgb(17, 17, 17); color: rgb(255, 255, 255); }
.xs-field{ display: flex; align-items: center; gap: 10px; height: 50px; padding: 0px 16px; border-radius: 16px; background: rgb(243, 243, 245); }
.xs-field input{ flex: 1 1 auto; min-width: 0px; border: 0px; background: none; outline: none; font-family: inherit; font-size: 17px; color: rgb(17, 17, 17); letter-spacing: -0.2px; }
.xs-field input::placeholder{ color: rgb(174, 174, 178); }
.xs-veil{ position: absolute; inset: 0px; z-index: 44; background: rgba(0, 0, 0, 0.28); opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.xs-sheet{ position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 45; max-height: 86%; display: flex; flex-direction: column; background: rgb(255, 255, 255); border-radius: 34px; transform: translateY(110%); transition: transform .5s var(--spring,ease); overflow: hidden; }
.rf-app.xs-sh .xs-veil{ opacity: 1; pointer-events: auto; }
.rf-app.xs-sh .xs-sheet{ transform: none; }
.xs-sheet__bar{ width: 36px; height: 5px; border-radius: 100px; background: rgb(229, 229, 234); margin: 8px auto 0px; flex: 0 0 auto; }
.xs-sheet__h{ display: flex; align-items: center; gap: 10px; padding: 10px 14px 4px 22px; flex: 0 0 auto; }
.xs-sheet__t{ flex: 1 1 auto; font-size: 19px; font-weight: 600; letter-spacing: -0.45px; color: rgb(17, 17, 17); }
.xs-sheet__x{ width: 34px; height: 34px; border-radius: 50%; border: 0px; background: rgb(241, 241, 243); color: rgb(58, 58, 60); display: grid; place-items: center; cursor: pointer; }
.xs-sheet__x svg{ width: 15px; height: 15px; }
.xs-sheet__s{ padding: 2px 22px 0px; font-size: 14px; line-height: 1.45; color: rgb(142, 142, 147); flex: 0 0 auto; }
.xs-sheet__b{ padding: 16px 22px 4px; overflow-y: auto; scrollbar-width: none; flex: 1 1 auto; }
.xs-sheet__b::-webkit-scrollbar{ display: none; }
.xs-sheet__f{ padding: 14px 22px 22px; flex: 0 0 auto; }
.xs-sheet__f .btn{ margin: 0px; box-shadow: none; }
.xs-sheet__f .btn[disabled]{ background: rgb(209, 209, 214); }
.xs-sheet__f .xs-sec{ display: block; width: 100%; margin-top: 6px; height: 44px; border: 0px; background: none; font-family: inherit; font-size: 15.5px; font-weight: 600; color: rgb(17, 17, 17); cursor: pointer; }
.xs-sheet__f .xs-sec--red{ color: rgb(215, 55, 47); }
.xs-sheet .xs-card{ background: rgb(246, 246, 248); }
.xs-sheet .xs-row + .xs-row::before{ background: rgb(232, 232, 236); }
.xs-lbl{ font-size: 13.5px; color: rgb(142, 142, 147); margin: 14px 0px 8px; }
.xs-wheel{ position: relative; display: flex; justify-content: center; gap: 4px; height: 200px; overflow: hidden; }
.xs-wheel::before{ content: ""; position: absolute; left: 0px; right: 0px; top: 80px; height: 40px; border-radius: 12px; background: rgb(241, 241, 243); z-index: 0; }
.xs-wheel::after{ content: ""; position: absolute; inset: 0px; background: linear-gradient(rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0) 65%, rgb(255, 255, 255) 100%); pointer-events: none; z-index: 2; }
.xs-wcol{ position: relative; z-index: 1; height: 200px; overflow-y: scroll; scroll-snap-type: y mandatory; scrollbar-width: none; padding: 80px 0px; box-sizing: border-box; min-width: 64px; }
.xs-wcol::-webkit-scrollbar{ display: none; }
.xs-wcol div{ height: 40px; line-height: 40px; text-align: center; font-size: 21px; color: rgb(17, 17, 17); scroll-snap-align: center; font-variant-numeric: tabular-nums; padding: 0px 8px; white-space: nowrap; }
.xs-wcol--wide{ min-width: 130px; }
.xs-row .xs-v.is-dark{ color: rgb(17, 17, 17); }
.xs-me__n{ font-size: 19px; font-weight: 600; letter-spacing: -0.45px; }
.xs-att{ display: none; }
.xs-row.xs-att{ display: flex; }
.xs-qa__err{ font-size: 13px; color: rgb(215, 55, 47); margin-top: 6px; }
.xs-qa__err:empty{ display: none; }
.xs-note--top{ padding: 6px 18px 0px; }
.xs-note--in{ padding: 14px 0px 0px; font-size: 14px; color: rgb(58, 58, 60); }
.xs-cons{ display: flex; gap: 12px; align-items: flex-start; margin-top: 14px; padding: 14px 16px; border-radius: 18px; background: rgb(246, 246, 248); }
.xs-cons p{ margin: 0px; font-size: 14px; line-height: 1.45; color: rgb(58, 58, 60); }
.xs-cons .xs-ic{ margin-top: 1px; }
.xs-soft--w{ display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin: 0px; }
.xs-soft--w .xs-ic,.xs-soft--w .xs-ic svg{ width: 18px; height: 18px; }
.xs-sec2{ display: block; width: 100%; margin-top: 4px; height: 44px; border: 0px; background: none; font-family: inherit; font-size: 15.5px; font-weight: 600; color: rgb(17, 17, 17); cursor: pointer; }
.xs-tzhint{ display: flex; align-items: center; gap: 10px; padding: 12px 14px; margin-bottom: 14px; border-radius: 16px; background: rgb(246, 246, 248); font-size: 14px; color: rgb(58, 58, 60); }
.xs-tzhint b{ color: rgb(17, 17, 17); }
.xs-att .xs-dot{ margin: 0px 2px 0px 0px; }
.xs-row.xs-att .xs-b b{ font-weight: 500; }
.xs-sheet .xs-grp{ margin-top: 0px; }
.xs-back svg{ width: 20px; height: 20px; }
.xs-dot{ background: rgb(199, 199, 204); }
.xs-dot--new,.xs-dot--wait{ background: rgb(28, 28, 30); }
.xs-dot--err{ background: rgb(215, 55, 47); }
.xs-av{ background: linear-gradient(rgb(195, 195, 200), rgb(152, 152, 158)); color: rgb(255, 255, 255); font-weight: 500; }
.xs-link{ color: rgb(17, 17, 17); font-weight: 600; }
.xs-h--row{ display: flex; justify-content: space-between; align-items: baseline; }
.xs-h--row button{ border: 0px; background: none; font-family: inherit; font-size: 14.5px; font-weight: 600; color: rgb(17, 17, 17); cursor: pointer; padding: 0px; }
.xs-v{ flex: 0 0 auto; }
.xs-row .xs-b{ flex: 1 1 auto; min-width: 0px; }
.tm{ padding: 4px 0px; }
.tm-p{ display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 16px; cursor: pointer; position: relative; }
.tm-p + .tm-p::before{ content: ""; position: absolute; left: 78px; right: 16px; top: 0px; height: 1px; background: rgb(236, 236, 239); }
.tm-p img{ width: 50px; height: 50px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.tm-p .xs-b small{ display: block; font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; color: rgb(142, 142, 147); margin: 0px 0px 1px; }
.tm-p .xs-b b{ font-size: 17px; font-weight: 600; }
.tm-p .xs-b span{ display: block; font-size: 12.5px; color: rgb(142, 142, 147); margin-top: 2px; line-height: 1.3; }
.tm-go{ position: relative; flex: 0 0 auto; height: 36px; padding: 0px 14px; border: 0px; border-radius: 100px; background: rgb(241, 241, 243); color: rgb(17, 17, 17); font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.tm-dot{ position: absolute; right: 2px; top: 2px; width: 9px; height: 9px; border-radius: 50%; background: rgb(255, 59, 48); box-shadow: rgb(255, 255, 255) 0px 0px 0px 2px; }
.tm-who{ display: flex; gap: 12px; padding: 14px; border-radius: 20px; background: rgb(246, 246, 248); margin-top: 10px; }
.tm-who:first-child{ margin-top: 0px; }
.tm-who img{ width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.tm-who small{ font-size: 11.5px; font-weight: 600; color: rgb(142, 142, 147); }
.tm-who b{ display: block; font-size: 17px; font-weight: 600; color: rgb(17, 17, 17); }
.tm-who p{ margin: 4px 0px 0px; font-size: 14px; line-height: 1.45; color: rgb(58, 58, 60); }
.tm-who em{ display: block; font-style: normal; font-size: 12.5px; color: rgb(142, 142, 147); margin-top: 6px; }
.fb-ban{ position: relative; overflow: hidden; border-radius: 26px; padding: 18px; background: rgb(255, 255, 255); box-shadow: rgba(12, 14, 18, 0.05) 0px 10px 30px; }
.fb-ban__top{ display: flex; gap: 12px; align-items: flex-start; }
.fb-ban__ic{ width: 42px; height: 42px; border-radius: 14px; flex: 0 0 auto; display: grid; place-items: center; color: rgb(17, 17, 17); background: rgb(241, 241, 243); }
.fb-ban__ic svg{ width: 20px; height: 20px; }
.fb-ban .xs-b b{ font-size: 17px; font-weight: 600; letter-spacing: -0.35px; }
.fb-ban .xs-b small{ white-space: normal; font-size: 13.5px; line-height: 1.4; color: rgb(110, 110, 115); margin-top: 3px; }
.fb-ban__row{ display: flex; gap: 8px; margin-top: 14px; }
.fb-ban__go{ flex: 1 1 auto; height: 44px; border: 0px; border-radius: 100px; background: rgb(31, 10, 23); color: rgb(255, 255, 255); font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.fb-ban__my{ flex: 0 0 auto; height: 44px; padding: 0px 14px; border: 0px; border-radius: 100px; background: rgba(255, 255, 255, 0.9); box-shadow: rgba(12, 14, 18, 0.1) 0px 0px 0px 1px inset; color: rgb(17, 17, 17); font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.fb-ban__did{ display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgb(236, 236, 239); font-size: 13px; color: rgb(58, 58, 60); cursor: pointer; }
.fb-ban__did > i{ width: 8px; height: 8px; border-radius: 50%; background: rgb(52, 199, 89); box-shadow: rgba(52, 199, 89, 0.18) 0px 0px 0px 3px; flex: 0 0 auto; }
.fb-ban__did span{ margin-left: auto; color: rgb(199, 199, 204); }
.fb-ban__did span svg{ width: 14px; height: 14px; }
.xs-undo{ position: absolute; left: 12px; right: 12px; bottom: 116px; z-index: 70; display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 12px; border-radius: 22px; background: rgba(28, 28, 30, 0.92); backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6); box-shadow: rgba(0, 0, 0, 0.28) 0px 16px 40px, rgba(255, 255, 255, 0.1) 0px 0px 0px 0.5px inset; color: rgb(255, 255, 255); transform: translateY(24px) scale(0.96); opacity: 0; pointer-events: none; transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s; }
.xs-undo.on{ transform: none; opacity: 1; pointer-events: auto; }
.xs-undo__r{ position: relative; width: 36px; height: 36px; flex: 0 0 auto; display: grid; place-items: center; font-style: normal; }
.xs-undo__r svg{ position: absolute; inset: 0px; transform: rotate(-90deg); }
.xs-undo__r circle{ fill: none; stroke-width: 3; }
.xs-undo__r .bg{ stroke: rgba(255, 255, 255, 0.18); }
.xs-undo__r .fg{ stroke: rgb(255, 255, 255); stroke-linecap: round; stroke-dasharray: 94.25; stroke-dashoffset: 0; }
.xs-undo__r b{ font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.xs-undo__t{ flex: 1 1 auto; min-width: 0px; }
.xs-undo__t b{ display: block; font-size: 14.5px; font-weight: 600; letter-spacing: -0.2px; line-height: 1.25; }
.xs-undo__t small{ display: block; font-size: 12px; color: rgba(255, 255, 255, 0.62); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xs-undo__t small:empty{ display: none; }
.xs-undo button{ flex: 0 0 auto; height: 38px; padding: 0px 14px; border: 0px; border-radius: 100px; background: rgba(255, 255, 255, 0.14); color: rgb(255, 255, 255); font-family: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer; }
.xs-undo.is-done button{ visibility: hidden; }
.xs-undo.is-done .xs-undo__r b{ font-size: 0px; }
.xs-undo.is-done .xs-undo__r b::before{ content: "✓"; font-size: 16px; }
.xs-undo.is-done .xs-undo__r .fg{ opacity: 0; }
.xs-ok--red{ background: rgb(215, 55, 47) !important; }
.xs-note--top{ margin: 0px 4px; }
.rf-app.xs-sh .xs-undo{ opacity: 0; transform: translateY(16px); pointer-events: none; }
.tm-p2{ align-items: flex-start; padding: 14px 14px 14px 16px; }
.tm-p2 .tm-go{ margin-top: 8px; }
.tm-av{ position: relative; flex: 0 0 auto; width: 54px; height: 54px; }
.tm-p2 .tm-av img{ width: 54px; height: 54px; border-radius: 50%; object-fit: cover; object-position: 50% 15%; }
.tm-p2 .tm-av img.is-dim{ filter: grayscale(0.6); opacity: 0.7; }
.tm-p2 .tm-av .tm-ph{ width: 54px; height: 54px; }
.tm-av i{ display: none; position: absolute; right: 1px; bottom: 1px; width: 13px; height: 13px; border-radius: 50%; background: rgb(52, 199, 89); box-shadow: rgb(255, 255, 255) 0px 0px 0px 2.5px; }
.tm-p2 .xs-b small{ color: rgb(142, 142, 147); font-size: 12px; font-weight: 500; letter-spacing: 0px; }
.tm-p2 .xs-b span{ font-size: 13px; }
.tm-meta{ display: block; margin-top: 6px; font-style: normal; font-size: 12.5px; font-weight: 500; line-height: 1.3; color: rgb(142, 142, 147); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-meta.is-hot{ color: rgb(17, 17, 17); font-weight: 600; }
.tm-p2 + .tm-p2::before{ left: 86px; }
.rf-app.is-pre .tab[data-tab="train"],.rf-app.is-pre .tab[data-tab="progress"]{ opacity: 0.55; }
.tab{ position: relative; }
.tm-ph{ width: 44px; height: 44px; border-radius: 50%; background: rgb(236, 236, 239); display: grid; place-items: center; flex: 0 0 auto; }
.tm-ph svg{ width: 20px; height: 20px; color: rgb(142, 142, 147); }
.rf-app.pre-ob .dock{ transform: translateY(130px); opacity: 0; pointer-events: none; }
.xs-sheet__f .btn[disabled]{ background: rgb(229, 229, 234); color: rgb(142, 142, 147); }
.xs-row--tog.on .xs-tog{ background: rgb(17, 17, 17); }
.xs-dot--new,.xs-dot--wait{ background: rgb(17, 17, 17); }
.xs-av{ background: rgb(229, 229, 234); color: rgb(110, 110, 115); font-weight: 600; }
.xs-h--row button{ font-size: 13px; font-weight: 500; color: rgb(142, 142, 147); }
.tm-p .xs-b small{ font-size: 12px; }
.tm-p .xs-b span{ font-size: 13px; }
.xs-link{ color: rgb(17, 17, 17); font-weight: 600; font-size: 15px; }
.xs-me2 .xs-link{ height: 36px; padding: 0px 14px; border-radius: 100px; background: rgb(255, 255, 255); font-size: 14px; }
.xs-row .xs-b small{ white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tm-meta{ white-space: normal; }
.xs-sheet .xs-field.is-bad,.xs-field.is-bad{ box-shadow: rgba(215, 55, 47, 0.5) 0px 0px 0px 1.5px inset !important; }
.xs-av:not(.xs-av--ph):not(.xs-av--img){ font-weight: 600; box-shadow: rgba(255, 255, 255, 0.35) 0px 0px 0px 1px inset; background: linear-gradient(150deg, rgb(236, 236, 239), rgb(214, 214, 219)) !important; color: rgb(58, 58, 60) !important; }
.gm-pill{ height: 44px; padding: 0px 22px; border: 0px; border-radius: 100px; background: rgb(17, 17, 17); color: rgb(255, 255, 255); font-family: inherit; font-size: 15px; font-weight: 600; letter-spacing: -0.2px; cursor: pointer; flex: 0 0 auto; }
.gm-err{ display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 12px 14px; border-radius: 16px; background: rgb(253, 238, 237); font-size: 14px; line-height: 1.4; color: rgb(168, 50, 43); }
.gm-err .xs-ic{ color: rgb(215, 55, 47); flex: 0 0 auto; margin-top: 1px; }
.gm-err .xs-ic svg{ width: 17px; height: 17px; }
.gm-err b{ color: rgb(143, 38, 32); font-weight: 600; }
.gm-inerr{ padding: 0px 18px 12px; font-size: 13px; line-height: 1.4; color: rgb(215, 55, 47); display: flex; gap: 8px; align-items: baseline; }
.gm-inerr button{ border: 0px; background: none; padding: 0px; font-family: inherit; font-size: 13px; font-weight: 600; color: rgb(17, 17, 17); cursor: pointer; margin-left: auto; flex: 0 0 auto; }
.xs-row--out .xs-b b{ color: rgb(215, 55, 47); }
.xs-row--out .xs-ic{ color: rgb(215, 55, 47); }
.xs-row--radio .xs-ck{ width: 24px; height: 24px; }
.xs-row--radio.on{ background: rgb(246, 238, 243); }
.xs-row--radio.on .xs-ck{ width: 24px; height: 24px; border-radius: 50%; background: rgb(29, 2, 12); color: rgb(255, 255, 255); opacity: 1; }
.xs-row--radio.on .xs-ck svg{ width: 14px; height: 14px; stroke-width: 2.6px; }
.xs-chip.on{ background: rgb(29, 2, 12); color: rgb(255, 255, 255); box-shadow: none; }
.xs-chip:not(.on){ background: rgb(255, 255, 255); }
.xs-sheet .xs-chip:not(.on){ background: rgb(241, 241, 243); }
.xs-field{ background: rgb(255, 255, 255); box-shadow: rgba(12, 14, 18, 0.06) 0px 0px 0px 1px inset; }
.xs-sheet .xs-field{ background: rgb(251, 251, 252); box-shadow: rgba(12, 14, 18, 0.07) 0px 0px 0px 1px inset; }
.xs-field:focus-within,.xs-sheet .xs-field:focus-within{ box-shadow: rgb(255, 197, 220) 0px 0px 0px 1.5px inset; }

/* ---- src/styles/21-wait.css ---- */
/* Состояния ожидания v3 (00-core/19-wait.js, 19.10.2026): скелет в форме будущего содержимого с мягким шиммером
 * и подпись ИИ «Re:forma разбирает…». Болванки заметно темнее фона (#ebebef на белом): прежние #efeff2→#f7f7f9
 * почти сливались с белым, и ожидание выглядело пустым блоком. Шиммер — широкий светлый блик раз в 1,6 с. */
.rf-sk { --sk-a: #ebebef; --sk-b: #f8f8fa; }
.rf-sk__l, .rf-sk__ph, .rf-sk__box {
  display: block; background: var(--sk-a) linear-gradient(100deg, var(--sk-a) 38%, var(--sk-b) 50%, var(--sk-a) 62%) 0 0 / 300% 100%;
  animation: rfSk 1.6s ease-in-out infinite;
}
@keyframes rfSk { from { background-position: 100% 0; } to { background-position: 0 0; } }
.rf-sk--lines { display: flex; flex-direction: column; gap: 10px; padding: 3px 0; }
.rf-sk__l { height: 12px; border-radius: 6px; }
.rf-sk__l--s { height: 10px; }
.rf-sk__box { border-radius: 18px; width: 100%; }
.rf-sk--tiles { display: flex; gap: 10px; overflow: hidden; }
.rf-sk__tile { flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px; }
.rf-sk__ph { border-radius: 18px; margin-bottom: 2px; }
.rf-sk__tile .rf-sk__l { height: 11px; }

/* Подпись ИИ: розовые точки знака «re:» мигают по очереди (это двоеточие логотипа), за текстом — три точки волной. */
.rf-wait { display: flex; align-items: center; gap: 9px; min-height: 24px; font-size: 14.5px; line-height: 1.3; letter-spacing: -.15px; color: #6c6b73; }
.rf-wait__t { font-weight: 500; min-width: 0; }
.rf-wait__mk .rem-dot { animation: rfDot 1.4s ease-in-out infinite; }
.rf-wait__mk .rem-dot + .rem-dot { animation-delay: .35s; }
@keyframes rfDot { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.rf-wait__d { display: inline-flex; gap: 3px; margin-left: 3px; white-space: nowrap; }
.rf-wait__d i { width: 3.5px; height: 3.5px; border-radius: 50%; background: currentColor; opacity: .3; animation: rfWave 1.2s ease-in-out infinite; }
.rf-wait__d i:nth-child(2) { animation-delay: .15s; }
.rf-wait__d i:nth-child(3) { animation-delay: .3s; }
@keyframes rfWave { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-2px); } }

@media (prefers-reduced-motion: reduce) {
  .rf-sk__l, .rf-sk__ph, .rf-sk__box, .rf-wait__mk .rem-dot, .rf-wait__d i { animation: none; }
  .rf-wait__d i { opacity: .6; }
}

/* ---- src/styles/30-more.css ---- */
/* «Ещё» и «Личные данные» — то, чего нет в правилах прототипа (там эти
 * состояния рисовались инлайн-стилями или демо-картинками). */

/* аватар-фото вместо демо-подложки .xs-av--ph */
.xs-av--img { overflow: hidden; background: #e5e5ea; }
.xs-av--img img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }

/* «указать» в пустом поле — в прототипе style.color='#111' (more_gap_more.js personal-empty) */
.xs-v .xs-ask { color: #111; }

/* превью выбранного фото профиля */
.pf-prev { display: flex; justify-content: center; padding: 6px 0 4px; }
.pf-prev .xs-av--l { width: 132px; height: 132px; }

/* неправильное значение в поле листа */
.xs-field.is-bad { box-shadow: inset 0 0 0 1.5px #d9304f; }

/* пустая карточка на экране (заглушка «раздел переезжает») */
.xs-empty .gm-pill { max-width: 100%; }

/* строка пояса, который сохраняется прямо сейчас */
.xs-row--radio.is-busy .xs-ck { opacity: 1; animation: rfPulse 1s ease-in-out infinite; }
@keyframes rfPulse { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

/* Кит: чипы и поля внутри белой карточки (more_select.css прототипа, §2 и §5).
 * Невыбранный чип на сером экране белый, а в белой карточке — серый: иначе он не
 * читается как кнопка. Поле в карточке — почти белое с тонкой рамкой; розовая
 * рамка — только при настоящем фокусе. Состояния с чипами в карточке экстрактор
 * кита (tools/states/core_more.js) не проходит — правила здесь. */
.xs-card .xs-chip:not(.on) { background: #f1f1f3; }
.xs-card .xs-field { background: #fbfbfc; box-shadow: inset 0 0 0 1px rgba(12, 14, 18, .07); }
.xs-card .xs-field:focus-within { box-shadow: inset 0 0 0 1.5px #ffc5dc; }

/* ---- src/styles/40-access.css ---- */
/* СГЕНЕРИРОВАНО design-preview/miniapp-v3-dev/tools/extract_css.js из прототипа nav-v2
   (состояния: access.js). Правила взяты в порядке каскада прототипа; не правьте
   руками — поправка поверх живёт в файлах стилей с бОльшим номером. */
.ob2-logo{ font-size: 17px; font-weight: 800; letter-spacing: -0.4px; color: rgb(17, 17, 17); text-align: center; padding: 4px 0px 2px; }
.ob2-n{ width: 28px; height: 28px; flex: 0 0 auto; border-radius: 50%; background: rgb(17, 17, 17); color: rgb(255, 255, 255); display: grid; place-items: center; font-size: 13px; font-weight: 700; }
.rf-logo{ display: flex; align-items: center; justify-content: center; line-height: 0; color: rgb(42, 42, 42); font-size: 0px; letter-spacing: 0px; }
.rf-logo svg{ display: block; height: 22px; width: auto; flex: 0 0 auto; }
.gxa{ position: absolute; inset: 0px; z-index: 58; background: rgb(245, 245, 246); color: rgb(17, 17, 17); display: none; overflow-y: auto; scrollbar-width: none; border-radius: inherit; }
.gxa::-webkit-scrollbar{ display: none; }
.rf-app.gxa-on .gxa{ display: block; }
.gxa-scr{ min-height: 100%; box-sizing: border-box; display: flex; flex-direction: column; padding: 60px 22px 34px; }
.gxa-top{ display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; min-height: 40px; margin: 0px -4px 22px; }
.gxa-top .ob2-logo{ grid-column: 2; padding: 0px; }
.gxa-bk{ width: 40px; height: 40px; border-radius: 50%; border: 0px; background: rgb(255, 255, 255); color: rgb(17, 17, 17); display: grid; place-items: center; cursor: pointer; padding: 0px; }
.gxa-bk svg{ width: 20px; height: 20px; }
.gxa-h{ font-size: 28px; font-weight: 700; letter-spacing: -0.7px; line-height: 1.12; color: rgb(17, 17, 17); }
.gxa-sub{ font-size: 15px; line-height: 1.5; color: rgb(110, 110, 115); margin-top: 10px; }
.gxa-c{ text-align: center; }
.gxa-mid{ flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; padding: 10px 0px 20px; }
.gxa-ic{ width: 76px; height: 76px; border-radius: 26px; background: rgb(255, 255, 255); display: grid; place-items: center; margin: 0px auto 22px; color: rgb(17, 17, 17); }
.gxa-ic svg{ width: 32px; height: 32px; }
.gxa-ic--dark{ background: rgb(17, 17, 17); color: rgb(255, 255, 255); border-radius: 50%; }
.gxa-ic--sm{ width: 64px; height: 64px; border-radius: 22px; margin: 0px 0px 20px; }
.gxa-ic--sm svg{ width: 28px; height: 28px; }
.gxa-foot{ margin-top: auto; padding-top: 18px; }
.gxk .btn{ margin: 0px; display: flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none; }
.gxk .btn svg{ width: 19px; height: 19px; }
.gxk .btn:disabled,.gxk .btn.is-off{ background: rgb(215, 215, 220); color: rgb(142, 142, 147); box-shadow: none; cursor: default; }
.gxk .btn.is-busy,.gxk .btn.is-busy:disabled{ background: rgb(58, 58, 62); color: rgb(255, 255, 255); box-shadow: none; cursor: default; }
.gxa-sec{ display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 50px; margin-top: 6px; border: 0px; background: none; font-family: inherit; font-size: 15.5px; font-weight: 600; color: rgb(17, 17, 17); cursor: pointer; }
.gxa-sec--card{ background: rgb(255, 255, 255); border-radius: 100px; height: 54px; margin-top: 10px; }
.gxa-sec:disabled{ color: rgb(142, 142, 147); cursor: default; }
.gxa-spin{ width: 18px; height: 18px; border-radius: 50%; border-width: 2.2px; border-style: solid; border-color: rgb(255, 255, 255) rgba(255, 255, 255, 0.3) rgba(255, 255, 255, 0.3); border-image: initial; animation: 0.8s linear 0s infinite normal none running gxaSpin; flex: 0 0 auto; box-sizing: border-box; }
.gxa-spin--ink{ border-color: rgb(17, 17, 17) rgba(17, 17, 17, 0.15) rgba(17, 17, 17, 0.15); }
.gxa-spin--lg{ width: 34px; height: 34px; border-width: 3px; }
@keyframes gxaSpin { 
  100% { transform: rotate(360deg); }
}
.gxa-help{ text-align: center; font-size: 13.5px; color: rgb(142, 142, 147); margin-top: 10px; }
.gxa-help b{ color: rgb(17, 17, 17); font-weight: 600; cursor: pointer; }
.gxa-lbl{ font-size: 12.5px; font-weight: 500; color: rgba(12, 14, 18, 0.6); margin: 20px 0px 7px 2px; }
.gxa-lbl + .gxa-fld{ margin-top: 0px; }
.gxa-fld{ position: relative; display: flex; align-items: center; background: rgb(255, 255, 255); border-radius: 20px; box-shadow: rgba(12, 14, 18, 0.06) 0px 0px 0px 1px inset; transition: box-shadow 0.15s; }
.gxa-fld.is-focus{ box-shadow: rgb(255, 197, 220) 0px 0px 0px 1.5px inset; }
.gxa-fld.is-err{ box-shadow: rgb(212, 72, 63) 0px 0px 0px 1.5px inset; }
.gxa-fld input{ flex: 1 1 auto; min-width: 0px; border: 0px; outline: 0px; background: none; padding: 16px; font-family: inherit; font-size: 16px; font-weight: 500; color: rgb(12, 14, 18); border-radius: 20px; }
.gxa-fld input::placeholder{ color: rgba(12, 14, 18, 0.32); font-weight: 400; }
.gxa-eye{ flex: 0 0 auto; width: 40px; height: 40px; margin-right: 6px; padding: 0px; border: 0px; border-radius: 50%; background: transparent; color: rgba(12, 14, 18, 0.4); display: grid; place-items: center; cursor: pointer; }
.gxa-eye svg{ width: 20px; height: 20px; }
.gxa-eye:active{ background: rgba(12, 14, 18, 0.05); }
.gxa-err{ display: flex; gap: 7px; align-items: flex-start; font-size: 13.5px; line-height: 1.4; color: rgb(212, 72, 63); margin: 9px 4px 0px; }
.gxa-err svg{ width: 16px; height: 16px; flex: 0 0 auto; margin-top: 1px; }
.gxa-note{ display: flex; gap: 12px; align-items: flex-start; background: rgb(255, 255, 255); border-radius: 20px; padding: 14px 16px; margin-top: 18px; }
.gxa-note > svg{ width: 20px; height: 20px; flex: 0 0 auto; margin-top: 1px; color: rgb(17, 17, 17); }
.gxa-note b{ display: block; font-size: 14.5px; font-weight: 600; color: rgb(17, 17, 17); line-height: 1.35; }
.gxa-note span{ display: block; font-size: 13.5px; line-height: 1.45; color: rgb(110, 110, 115); margin-top: 2px; }
.gxa-note--err > svg{ color: rgb(212, 72, 63); }
.gxa-note--dark{ background: rgb(17, 17, 17); }
.gxa-note--dark > svg,.gxa-note--dark b{ color: rgb(255, 255, 255); }
.gxa-note--dark span{ color: rgba(255, 255, 255, 0.62); }
.gxa-form .btn{ margin-top: 18px; }
.gxa-form .btn,.gxa-brand .btn{ height: 54px; border-radius: 9999px; background: rgb(255, 197, 220); color: rgb(10, 13, 18); font-size: 16px; font-weight: 500; letter-spacing: -0.32px; box-shadow: none; }
.gxa-form .btn:active,.gxa-brand .btn:active{ transform: scale(0.99); }
.gxa-form .btn.is-busy,.gxa-form .btn.is-busy:disabled{ background: rgb(255, 197, 220); color: rgb(10, 13, 18); }
.gxa-form .btn.is-busy .gxa-spin{ border-color: rgb(10, 13, 18) rgba(10, 13, 18, 0.15) rgba(10, 13, 18, 0.15); }
.gxa-form .btn:disabled:not(.is-busy),.gxa-form .btn.is-off{ background: rgb(255, 197, 220); color: rgb(10, 13, 18); opacity: 0.45; }
.gxa-form .gxa-h{ font-size: 26px; font-weight: 600; letter-spacing: -0.5px; }
.gxa-form .gxa-sub{ font-size: 14.5px; color: rgba(12, 14, 18, 0.6); }
.gxa-form .gxa-ic,.gxa-brand .gxa-ic:not(.gxa-ic--dark){ background: rgb(255, 255, 255); color: rgb(29, 2, 12); box-shadow: rgba(12, 14, 18, 0.06) 0px 10px 26px; }
.gxa-alt{ text-align: center; font-size: 14.5px; color: rgb(142, 142, 147); margin-top: 16px; }
.gxa-alt b{ color: rgb(17, 17, 17); font-weight: 600; cursor: pointer; }
.gxa-link{ display: block; text-align: right; font-size: 14px; font-weight: 600; color: rgb(17, 17, 17); margin: 12px 4px 0px; cursor: pointer; }
.gxa-bottom{ margin-top: auto; padding-top: 26px; }
.gxa-row{ display: flex; align-items: center; gap: 12px; background: rgb(255, 255, 255); border-radius: 22px; padding: 14px 16px; cursor: pointer; }
.gxa-row__ic{ width: 38px; height: 38px; border-radius: 50%; background: rgb(243, 243, 245); display: grid; place-items: center; flex: 0 0 auto; }
.gxa-row__ic svg{ width: 19px; height: 19px; }
.gxa-row__b{ flex: 1 1 auto; min-width: 0px; }
.gxa-row__b b{ display: block; font-size: 15px; font-weight: 600; }
.gxa-row__b small{ display: block; font-size: 13px; color: rgb(142, 142, 147); margin-top: 2px; }
.gxa-row .chev{ color: rgb(199, 199, 204); display: grid; }
.gxa-row .chev svg{ width: 16px; height: 16px; }
.gxa-mailchip{ display: inline-flex; align-items: center; gap: 8px; margin: 16px auto 0px; background: rgb(255, 255, 255); border-radius: 100px; padding: 9px 14px; font-size: 14.5px; font-weight: 600; color: rgb(17, 17, 17); }
.gxa-mailchip svg{ width: 16px; height: 16px; color: rgb(142, 142, 147); }
.gxa-code{ display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 24px; }
.gxa-code i{ font-style: normal; height: 60px; border-radius: 16px; background: rgb(255, 255, 255); display: grid; place-items: center; font-size: 26px; font-weight: 600; color: rgb(12, 14, 18); box-shadow: rgba(12, 14, 18, 0.06) 0px 0px 0px 1px inset; font-variant-numeric: tabular-nums; }
.gxa-code{ outline: 0px; }
.gxa-code.is-focus i.cur{ box-shadow: rgb(255, 197, 220) 0px 0px 0px 1.5px inset; }
.gxa-code.is-focus i.cur::after{ content: ""; width: 2px; height: 26px; background: rgb(29, 2, 12); animation: 1s steps(1) 0s infinite normal none running gxaBlink; }
.gxa-code.is-err i{ box-shadow: rgb(212, 72, 63) 0px 0px 0px 1.5px inset; }
.gxa-code.is-busy i{ color: rgb(142, 142, 147); }
@keyframes gxaBlink { 
  50% { opacity: 0; }
}
.gxa-resend{ text-align: center; font-size: 14px; line-height: 1.45; color: rgb(142, 142, 147); margin-top: 16px; }
.gxa-resend b{ color: rgb(17, 17, 17); font-weight: 600; font-variant-numeric: tabular-nums; }
.gxa-resend span{ display: block; }
.gxa-req{ display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: rgb(142, 142, 147); margin: 10px 4px 0px; }
.gxa-req i{ width: 18px; height: 18px; border-radius: 50%; box-shadow: rgb(199, 199, 204) 0px 0px 0px 1.5px inset; display: grid; place-items: center; color: rgb(255, 255, 255); }
.gxa-req i svg{ width: 11px; height: 11px; opacity: 0; }
.gxa-req.is-ok{ color: rgb(17, 17, 17); }
.gxa-req.is-ok i{ background: rgb(17, 17, 17); box-shadow: none; }
.gxa-req.is-ok i svg{ opacity: 1; }
.gxa-req > svg{ width: 16px; height: 16px; flex: 0 0 auto; }
.gxa-req.is-err{ color: rgb(212, 72, 63); }
.gxa-bar{ width: 132px; height: 4px; border-radius: 100px; background: rgb(225, 225, 230); overflow: hidden; margin: 26px auto 0px; position: relative; }
.gxa-bar u{ position: absolute; top: 0px; bottom: 0px; left: 0px; width: 42%; border-radius: 100px; background: rgb(17, 17, 17); animation: 1.1s ease-in-out 0s infinite alternate none running gxaBar; }
@keyframes gxaBar { 
  0% { left: 0px; }
  100% { left: 58%; }
}
.gxa-word svg{ height: 34px; }
.gxa-boot{ flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; padding-bottom: 40px; }
.gxa-bootmsg{ text-align: center; font-size: 14px; line-height: 1.45; color: rgb(142, 142, 147); margin-top: 18px; min-height: 40px; }
.gxa-slow{ margin: 0px auto; max-width: 290px; }
.gxa-auto{ display: flex; align-items: center; gap: 12px; background: rgb(255, 255, 255); border-radius: 22px; padding: 14px 16px; margin-top: 22px; text-align: left; }
.gxa-auto__r{ width: 34px; height: 34px; flex: 0 0 auto; position: relative; }
.gxa-auto__r svg{ width: 34px; height: 34px; transform: rotate(-90deg); }
.gxa-auto__r circle{ fill: none; stroke-width: 3; }
.gxa-auto__r .bg{ stroke: rgb(236, 236, 240); }
.gxa-auto__r .fg{ stroke: rgb(17, 17, 17); stroke-linecap: round; stroke-dasharray: 94.25; }
.gxa-auto b{ display: block; font-size: 14.5px; font-weight: 600; }
.gxa-auto small{ display: block; font-size: 13px; color: rgb(142, 142, 147); margin-top: 1px; }
.gxa-steps{ background: rgb(255, 255, 255); border-radius: 24px; padding: 4px 16px; margin-top: 22px; }
.gxa-step{ display: flex; align-items: center; gap: 12px; padding: 13px 0px; }
.gxa-step + .gxa-step{ border-top: 1px solid rgb(241, 241, 243); }
.gxa-step .ob2-n{ width: 28px; height: 28px; }
.gxa-step span:not(.ob2-n){ font-size: 15px; font-weight: 500; color: rgb(17, 17, 17); line-height: 1.35; }
.gxa-nick{ font-size: 14px; color: rgb(110, 110, 115); text-align: center; margin-top: 14px; }
.gxa-nick b{ color: rgb(17, 17, 17); }
.gxa-acct{ display: block; width: 100%; text-align: center; font-size: 13.5px; color: rgb(142, 142, 147); margin-top: 4px; background: none; border: 0px; font-family: inherit; padding: 8px 0px; cursor: pointer; }
.gxa-acct b{ color: rgb(17, 17, 17); font-weight: 600; }
.gxa-acct small{ display: block; font-size: 12.5px; color: rgb(174, 174, 178); margin-top: 2px; }
.gxa-tghero{ position: relative; width: 92px; height: 92px; border-radius: 30px; background: rgb(255, 255, 255); box-shadow: rgba(12, 14, 18, 0.08) 0px 22px 44px, rgba(12, 14, 18, 0.03) 0px 0px 0px 1px inset; display: grid; place-items: center; margin: 14px auto 30px; color: rgb(29, 2, 12); }
.gxa-tghero svg{ width: 40px; height: 40px; position: relative; z-index: 1; }
.gxa-tghero::before,.gxa-tghero::after{ content: ""; position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 1px solid rgba(12, 14, 18, 0.08); transform: translate(-50%, -50%); }
.gxa-tghero::before{ width: 116px; height: 116px; }
.gxa-tghero::after{ width: 140px; height: 140px; border-color: rgba(12, 14, 18, 0.04); }
.gxa-step .ob2-n{ background: rgb(255, 255, 255); color: rgb(12, 14, 18); font-size: 12px; font-weight: 600; }
.gxa-tg--nt .gxa-tghero{ width: 72px; height: 72px; border-radius: 24px; margin: 2px auto 20px; }
.gxa-tg--nt .gxa-tghero svg{ width: 32px; height: 32px; }
.gxa-tg--nt .gxa-tghero::before{ width: 92px; height: 92px; }
.gxa-tg--nt .gxa-tghero::after{ width: 112px; height: 112px; }
.gxa-tg--nt .gxa-steps{ margin-top: 16px; }
.gxa-tg--nt .gxa-step{ padding: 10px 0px; }
.gxa-foot > .gxa-note:first-child{ margin: 0px 0px 14px; }
.gxa-ios{ background: rgb(255, 255, 255); border-radius: 24px; padding: 4px 16px; margin-top: 22px; }
.gxa-ios__s{ display: flex; gap: 14px; align-items: flex-start; padding: 14px 0px; }
.gxa-ios__s + .gxa-ios__s{ border-top: 1px solid rgb(241, 241, 243); }
.gxa-ios__ig{ width: 42px; height: 42px; border-radius: 14px; background: rgb(243, 243, 245); display: grid; place-items: center; flex: 0 0 auto; }
.gxa-ios__ig svg{ width: 21px; height: 21px; }
.gxa-ios__ig--safari{ background: rgb(234, 242, 253); color: rgb(43, 125, 227); }
.gxa-ios__ig--safari svg{ stroke-width: 2.1; }
.gxa-ios__ig--done{ background: rgb(230, 247, 238); color: rgb(31, 170, 90); }
.gxa-art{ display: block; width: 112px; height: 112px; margin: 6px auto 12px; }
.gxa-ios__n{ font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgb(142, 142, 147); }
.gxa-ios__t{ font-size: 15.5px; font-weight: 600; color: rgb(17, 17, 17); margin-top: 2px; line-height: 1.3; }
.gxa-ios__d{ font-size: 13px; color: rgb(142, 142, 147); margin-top: 2px; line-height: 1.4; }
.gxa-ioshint{ display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: auto; padding-top: 24px; font-size: 13.5px; font-weight: 600; color: rgb(43, 125, 227); }
.gxa-ioshint svg{ width: 22px; height: 22px; animation: 1.4s ease-in-out 0s infinite normal none running gxaBob; }
@keyframes gxaBob { 
  50% { transform: translateY(5px); }
}
.gxa-dom{ display: inline-flex; align-items: center; gap: 8px; margin: 18px auto 0px; background: rgb(255, 255, 255); border-radius: 100px; padding: 9px 16px; font-size: 15px; font-weight: 600; }
.gxa-dom i{ width: 8px; height: 8px; border-radius: 50%; background: rgb(52, 199, 89); }
.gxa-cap{ text-align: center; font-size: 13px; line-height: 1.45; color: rgb(142, 142, 147); margin-top: 12px; }
.gxa-nav{ display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; margin: 0px -6px 8px; }
.gxa-nav__t{ text-align: center; font-size: 16px; font-weight: 600; }
.gxa-ban{ position: absolute; left: 12px; right: 12px; bottom: 100px; z-index: 42; display: flex; align-items: flex-start; gap: 12px; background: rgb(255, 255, 255); border-radius: 24px; padding: 12px 10px 12px 12px; box-shadow: rgba(16, 16, 20, 0.16) 0px 18px 40px, rgba(16, 16, 20, 0.04) 0px 0px 0px 1px; transform: translateY(24px); opacity: 0; pointer-events: none; transition: transform .45s var(--spring,ease),opacity .25s; }
.gxa-ban.on{ transform: none; opacity: 1; pointer-events: auto; }
.gxa-ban__ic{ width: 44px; height: 44px; border-radius: 15px; background: rgb(17, 17, 17); color: rgb(255, 255, 255); display: grid; place-items: center; flex: 0 0 auto; }
.gxa-ban__ic svg{ width: 22px; height: 22px; }
.gxa-ban__b{ flex: 1 1 auto; min-width: 0px; }
.gxa-ban__b b{ display: block; font-size: 15px; font-weight: 600; letter-spacing: -0.2px; }
.gxa-ban__b small{ display: block; font-size: 12.5px; line-height: 1.35; color: rgb(142, 142, 147); margin-top: 2px; }
.gxa-ban__go{ display: block; height: 32px; margin-top: 10px; padding: 0px 16px; border: 0px; border-radius: 100px; background: rgb(17, 17, 17); color: rgb(255, 255, 255); font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; flex: 0 0 auto; }
.gxa-ban__x{ width: 30px; height: 30px; border: 0px; border-radius: 50%; background: rgb(243, 243, 245); color: rgb(142, 142, 147); display: grid; place-items: center; cursor: pointer; flex: 0 0 auto; padding: 0px; }
.gxa-ban__x svg{ width: 14px; height: 14px; }
.gxa-pv{ position: absolute; top: 31px; left: 12px; z-index: 63; display: none; align-items: center; gap: 5px; height: 25px; padding: 0px 10px 0px 8px; border-radius: 100px; background: rgb(17, 17, 17); color: rgb(255, 255, 255); font-size: 12px; font-weight: 600; letter-spacing: -0.1px; border: 0px; font-family: inherit; cursor: pointer; }
.gxa-pv svg{ width: 15px; height: 15px; }
.gxa-pv--r{ left: auto; right: 12px; padding: 0px 10px; font-weight: 500; color: rgba(255, 255, 255, 0.78); }
.rf-app.gxa-pvon .gxa-pv{ display: flex; }
.gxa-tip{ position: absolute; top: 64px; left: 12px; right: 12px; z-index: 64; display: flex; gap: 12px; align-items: flex-start; padding: 13px 14px; border-radius: 22px; background: rgba(28, 28, 30, 0.94); color: rgb(255, 255, 255); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: rgba(0, 0, 0, 0.2) 0px 16px 36px; transform: translateY(-10px); opacity: 0; pointer-events: none; transition: transform .35s var(--spring,ease),opacity .2s; }
.gxa-tip.on{ transform: none; opacity: 1; pointer-events: auto; }
.gxa-tip > svg{ width: 20px; height: 20px; flex: 0 0 auto; margin-top: 1px; }
.gxa-tip b{ display: block; font-size: 14.5px; font-weight: 600; }
.gxa-tip small{ display: block; font-size: 13px; line-height: 1.4; color: rgba(255, 255, 255, 0.66); margin-top: 2px; }
.gxa-gs-veil{ position: absolute; inset: 0px; z-index: 56; background: rgba(0, 0, 0, 0.34); display: none; }
.gxa-gs{ position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 57; background: rgb(243, 243, 245); border-radius: 34px; padding: 10px 20px 22px; display: none; }
.rf-app.gxa-gson .gxa-gs,.rf-app.gxa-gson .gxa-gs-veil{ display: block; }
.gxa-gs{ padding-top: 22px; }
.gxa-gs .gxa-tghero{ width: 64px; height: 64px; border-radius: 22px; margin: 4px auto 14px; }
.gxa-gs .gxa-tghero svg{ width: 30px; height: 30px; }
.gxa-gs .gxa-tghero::before{ width: 84px; height: 84px; }
.gxa-gs .gxa-tghero::after{ width: 104px; height: 104px; }
.gxa-gs .gxa-h{ font-size: 24px; }
.gxa-gs .gxa-steps{ margin-top: 16px; }
.gxa-gs .gxa-step{ padding: 11px 0px; }
.gxa-gs-foot{ margin-top: 16px; }
.gxa-gs .gxa-acct{ margin-top: 0px; }
.gxa-off{ position: absolute; top: 104px; left: 50%; z-index: 41; display: flex; align-items: center; gap: 8px; max-width: calc(100% - 32px); box-sizing: border-box; height: 34px; padding: 0px 14px 0px 11px; border-radius: 100px; background: rgba(28, 28, 30, 0.92); color: rgb(255, 255, 255); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: rgba(0, 0, 0, 0.18) 0px 10px 26px; font-size: 13.5px; font-weight: 600; letter-spacing: -0.1px; white-space: nowrap; transform: translate(-50%, -8px); opacity: 0; pointer-events: none; transition: transform .35s var(--spring,ease),opacity .25s; }
.gxa-off svg{ width: 17px; height: 17px; flex: 0 0 auto; }
.gxa-off span{ font-weight: 400; color: rgba(255, 255, 255, 0.66); }
.rf-app.gxa-offon .gxa-off{ transform: translate(-50%, 0px); opacity: 1; }
.rf-app.gxa-offon.gxa-offin .gxa-off{ display: none; }

/* ---- src/styles/40-account.css ---- */
/* СГЕНЕРИРОВАНО design-preview/miniapp-v3-dev/tools/extract_css.js из прототипа nav-v2
   (состояния: ws1.js). Правила взяты в порядке каскада прототипа; не правьте
   руками — поправка поверх живёт в файлах стилей с бОльшим номером. */
.xs-row--sm{ min-height: 46px; }
.xs-row--sm .xs-b b{ font-size: 15px; color: rgb(58, 58, 60); }
.xs-dot--wait{ background: rgb(28, 28, 30); }
.xs-dot--wait{ background: rgb(17, 17, 17); }

/* ---- src/styles/40-anketa.css ---- */
/* СГЕНЕРИРОВАНО design-preview/miniapp-v3-dev/tools/extract_css.js из прототипа nav-v2
   (состояния: anketa_post.js). Правила взяты в порядке каскада прототипа; не правьте
   руками — поправка поверх живёт в файлах стилей с бОльшим номером. */
:where(.an-scr,.an-sheet) .xs-nav{ padding: 8px 16px 4px; }
:where(.an-scr,.an-sheet) .xs-nav .nav__t{ font-size: 17px; font-weight: 600; letter-spacing: -0.35px; color: rgb(17, 17, 17); }
:where(.an-scr,.an-sheet) .xs{ padding: 4px 16px 12px; }
:where(.an-scr,.an-sheet) .xs-note{ padding: 9px 18px 0px; font-size: 13px; line-height: 1.45; color: rgb(142, 142, 147); }
:where(.an-scr,.an-sheet) .xs-card{ background: rgb(255, 255, 255); border-radius: 26px; overflow: hidden; }
:where(.an-scr,.an-sheet) .xs-pad{ padding: 20px 18px; }
:where(.an-scr,.an-sheet) .xs-lead b{ display: block; font-size: 19px; font-weight: 600; letter-spacing: -0.45px; color: rgb(17, 17, 17); }
:where(.an-scr,.an-sheet) .xs-lead small{ display: block; font-size: 14px; color: rgb(142, 142, 147); margin-top: 4px; }
:where(.an-scr,.an-sheet) .xs-soft{ display: block; margin: 18px auto 0px; height: 46px; padding: 0px 24px; border: 0px; border-radius: 100px; background: rgb(255, 255, 255); color: rgb(17, 17, 17); font-family: inherit; font-size: 15.5px; font-weight: 600; letter-spacing: -0.2px; cursor: pointer; box-shadow: rgba(0, 0, 0, 0.08) 0px 6px 22px, rgba(0, 0, 0, 0.04) 0px 0px 0px 1px; }
@keyframes nvpop { 
  0% { transform: scale(0.86); }
  55% { transform: scale(1.1); }
  100% { transform: none; }
}
:where(.an-scr,.an-sheet) .xs-nav .xs-act{ border: 0px; background: none; font-family: inherit; font-size: 16px; font-weight: 600; color: rgb(17, 17, 17); cursor: pointer; min-width: 44px; height: 44px; padding: 0px 4px; text-align: right; }
:where(.an-scr,.an-sheet) .xs-dot--new{ background: rgb(29, 2, 12); }
:where(.an-scr,.an-sheet) .xs-dot--ok{ background: rgb(52, 199, 89); }
:where(.an-scr,.an-sheet) .xs-status{ display: flex; align-items: flex-start; gap: 10px; padding: 14px 18px; font-size: 14px; line-height: 1.4; color: rgb(58, 58, 60); }
:where(.an-scr,.an-sheet) .xs-status .xs-dot{ margin-top: 6px; flex: 0 0 auto; }
:where(.an-scr,.an-sheet) .xs-status b{ font-weight: 600; color: rgb(17, 17, 17); }
:where(.an-scr,.an-sheet) .xs-qa{ padding: 13px 18px; position: relative; }
:where(.an-scr,.an-sheet) .xs-qa + .xs-qa::before{ content: ""; position: absolute; left: 18px; right: 18px; top: 0px; height: 1px; background: rgb(236, 236, 239); }
:where(.an-scr,.an-sheet) .xs-qa__q{ font-size: 13.5px; color: rgb(142, 142, 147); line-height: 1.35; }
:where(.an-scr,.an-sheet) .xs-qa__a{ font-size: 16px; color: rgb(17, 17, 17); margin-top: 4px; line-height: 1.4; letter-spacing: -0.2px; }
:where(.an-scr,.an-sheet) .xs-qa--edit .xs-qa__a{ margin-top: 10px; }
:where(.an-scr,.an-sheet) .xs-qa__was{ font-size: 12.5px; color: rgb(174, 174, 178); margin-top: 6px; text-decoration: line-through; }
:where(.an-scr,.an-sheet) .xs-field{ display: flex; align-items: center; gap: 10px; height: 50px; padding: 0px 16px; border-radius: 16px; background: rgb(243, 243, 245); }
:where(.an-scr,.an-sheet) .xs-field input,:where(.an-scr,.an-sheet) .xs-field textarea{ flex: 1 1 auto; min-width: 0px; border: 0px; background: none; outline: none; font-family: inherit; font-size: 17px; color: rgb(17, 17, 17); letter-spacing: -0.2px; }
:where(.an-scr,.an-sheet) .xs-field textarea{ resize: none; height: auto; min-height: 72px; padding: 13px 0px; line-height: 1.4; }
:where(.an-scr,.an-sheet) .xs-field--ta{ height: auto; align-items: flex-start; }
:where(.an-scr,.an-sheet) .xs-field span{ flex: 0 0 auto; font-size: 15px; color: rgb(142, 142, 147); }
:where(.an-scr,.an-sheet) .xs-field input::placeholder,:where(.an-scr,.an-sheet) .xs-field textarea::placeholder{ color: rgb(174, 174, 178); }
:where(.an-scr,.an-sheet) .xs-sheet{ position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 45; max-height: 86%; display: flex; flex-direction: column; background: rgb(255, 255, 255); border-radius: 34px; transform: translateY(110%); transition: transform .5s var(--spring,ease); overflow: hidden; }
:where(.an-scr,.an-sheet) .xs-lbl{ font-size: 13.5px; color: rgb(142, 142, 147); margin: 14px 0px 8px; }
:where(.an-scr,.an-sheet) .xs-wheel{ position: relative; display: flex; justify-content: center; gap: 4px; height: 200px; overflow: hidden; }
:where(.an-scr,.an-sheet) .xs-wheel::before{ content: ""; position: absolute; left: 0px; right: 0px; top: 80px; height: 40px; border-radius: 12px; background: rgb(241, 241, 243); z-index: 0; }
:where(.an-scr,.an-sheet) .xs-wheel::after{ content: ""; position: absolute; inset: 0px; background: linear-gradient(rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0) 65%, rgb(255, 255, 255) 100%); pointer-events: none; z-index: 2; }
:where(.an-scr,.an-sheet) .xs-wcol{ position: relative; z-index: 1; height: 200px; overflow-y: scroll; scroll-snap-type: y mandatory; scrollbar-width: none; padding: 80px 0px; box-sizing: border-box; min-width: 64px; }
:where(.an-scr,.an-sheet) .xs-wcol::-webkit-scrollbar{ display: none; }
:where(.an-scr,.an-sheet) .xs-wcol div{ height: 40px; line-height: 40px; text-align: center; font-size: 21px; color: rgb(17, 17, 17); scroll-snap-align: center; font-variant-numeric: tabular-nums; padding: 0px 8px; white-space: nowrap; }
:where(.an-scr,.an-sheet) .xs-diff{ background: rgb(246, 246, 248); border-radius: 18px; padding: 4px 0px; }
:where(.an-scr,.an-sheet) .xs-diff .xs-qa__a{ font-size: 15px; }
:where(.an-scr,.an-sheet) .xs-tagline{ display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
:where(.an-scr,.an-sheet) .xs-tag{ font-size: 12px; font-weight: 600; color: rgb(58, 58, 60); background: rgb(241, 241, 243); border-radius: 100px; padding: 4px 9px; }
:where(.an-scr,.an-sheet) .xs-tag--new{ background: rgb(241, 241, 243); color: rgb(58, 58, 60); }
:where(.an-scr,.an-sheet) .xs-tag--ok{ background: rgb(230, 246, 234); color: rgb(31, 122, 58); }
:where(.an-scr,.an-sheet) .xs-row--sm{ min-height: 46px; }
:where(.an-scr,.an-sheet) .xs-row--sm .xs-b b{ font-size: 15px; color: rgb(58, 58, 60); }
:where(.an-scr,.an-sheet) .xs-qa__own{ display: flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 12.5px; color: rgb(142, 142, 147); }
:where(.an-scr,.an-sheet) .xs-qa__own .xs-ic{ width: 13px; height: 13px; color: rgb(174, 174, 178); }
:where(.an-scr,.an-sheet) .xs-qa__own .xs-ic svg{ width: 13px; height: 13px; }
:where(.an-scr,.an-sheet) .xs-qa[role]{ cursor: pointer; }
:where(.an-scr,.an-sheet) .xs-qa__q i{ font-style: normal; color: rgb(174, 174, 178); }
:where(.an-scr,.an-sheet) .xs-qa__old{ font-size: 14px; color: rgb(174, 174, 178); text-decoration: line-through; margin-top: 4px; line-height: 1.35; }
:where(.an-scr,.an-sheet) .xs-qa__old + .xs-qa__a{ margin-top: 2px; }
:where(.an-scr,.an-sheet) .xs-qa.is-ch::after{ content: ""; position: absolute; left: 6px; top: 18px; width: 5px; height: 5px; border-radius: 50%; background: rgb(29, 2, 12); }
:where(.an-scr,.an-sheet) .xs-qa__was{ font-size: 12.5px; color: rgb(174, 174, 178); margin-top: 8px; }
:where(.an-scr,.an-sheet) .xs--edit .xs-card{ background: rgb(255, 255, 255); }
:where(.an-scr,.an-sheet) .xs--edit{ padding-bottom: 110px; }
:where(.an-scr,.an-sheet) .xs-reply{ display: flex; gap: 10px; align-items: flex-start; padding: 4px 18px 16px; }
:where(.an-scr,.an-sheet) .xs-reply img{ width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
:where(.an-scr,.an-sheet) .xs-reply p{ margin: 0px; padding: 10px 13px; border-radius: 4px 18px 18px; background: rgb(243, 243, 245); font-size: 14.5px; line-height: 1.45; color: rgb(17, 17, 17); }
:where(.an-scr,.an-sheet) .xs-how{ padding: 6px 18px; }
:where(.an-scr,.an-sheet) .xs-how > div{ display: flex; gap: 12px; padding: 12px 0px; }
:where(.an-scr,.an-sheet) .xs-how > div + div{ border-top: 1px solid rgb(236, 236, 239); }
:where(.an-scr,.an-sheet) .xs-how span{ width: 22px; height: 22px; flex: 0 0 auto; color: rgb(28, 28, 30); }
:where(.an-scr,.an-sheet) .xs-how span svg{ width: 20px; height: 20px; stroke-width: 1.6px; }
:where(.an-scr,.an-sheet) .xs-how p{ margin: 0px; font-size: 14px; line-height: 1.45; color: rgb(58, 58, 60); }
:where(.an-scr,.an-sheet) .xs-how b{ font-weight: 600; color: rgb(17, 17, 17); }
:where(.an-scr,.an-sheet) .xs-pad--s{ padding: 16px 18px 6px; }
:where(.an-scr,.an-sheet) .xs-soft--inl{ margin: 12px 0px 2px; height: 40px; font-size: 14.5px; }
:where(.an-scr,.an-sheet) .xs-qa__was{ text-decoration: none; }
:where(.an-scr,.an-sheet) .xs-tagline{ margin-top: 4px; gap: 0px; }
:where(.an-scr,.an-sheet) .xs-tag,:where(.an-scr,.an-sheet) .xs-tag--new,:where(.an-scr,.an-sheet) .xs-tag--ok{ padding: 0px; border-radius: 0px; font-size: 13px; font-weight: 400; background: none !important; color: rgb(142, 142, 147) !important; }
:where(.an-scr,.an-sheet) .xs-tag--new::before{ content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: rgb(28, 28, 30); margin-right: 6px; vertical-align: 1px; }
:where(.an-scr,.an-sheet) .xs-dot--new{ background: rgb(28, 28, 30); }
:where(.an-scr,.an-sheet) .xs-dot--ok{ background: rgb(199, 199, 204); }
:where(.an-scr,.an-sheet) .xs-more{ position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 54px; padding: 8px 18px; cursor: pointer; box-shadow: rgb(236, 236, 239) 0px 1px 0px inset; }
:where(.an-scr,.an-sheet) .xs-more span{ font-size: 15px; font-weight: 600; color: rgb(17, 17, 17); }
:where(.an-scr,.an-sheet) .xs-more small{ font-size: 12px; color: rgb(142, 142, 147); margin-top: 1px; }
:where(.an-scr,.an-sheet) .xs > .xs-more{ margin-top: 12px; border-radius: 20px; background: rgb(255, 255, 255); box-shadow: none; }
:where(.an-scr,.an-sheet) .xs-dot--new,:where(.an-scr,.an-sheet) .xs-dot--ok{ background: rgb(17, 17, 17); }
:where(.an-scr,.an-sheet) .xs-tag--new,:where(.an-scr,.an-sheet) .xs-tag--ok{ background: rgb(241, 241, 243); color: rgb(58, 58, 60); }
:where(.an-scr,.an-sheet) .xs-qa.is-ch::after{ background: rgb(17, 17, 17); }
:where(.an-scr,.an-sheet) .xs-status{ font-size: 13.5px; color: rgb(110, 110, 115); }
:where(.an-scr,.an-sheet) .xs-status b{ font-weight: 600; }
:where(.an-scr,.an-sheet) .xs-status .xs-dot{ width: 6px; height: 6px; }
:where(.an-scr,.an-sheet) .xs-how span{ display: none; }
:where(.an-scr,.an-sheet) .xs-qa--edit .xs-qa__q{ display: flex; align-items: baseline; gap: 12px; }
:where(.an-scr,.an-sheet) .xs-qa--edit .xs-qa__q > span{ flex: 1 1 0%; min-width: 0px; }
:where(.an-scr,.an-sheet) .xs-qa--edit .xs-clr{ float: none; flex: 0 0 auto; }
:where(.an-scr,.an-sheet) .xs-qa__hint{ margin-top: 4px; font-size: 12.5px; line-height: 1.4; color: rgb(174, 174, 178); }
:where(.an-scr,.an-sheet) .xs-card .xs-chip:not(.on){ background: rgb(241, 241, 243); }
:where(.an-scr,.an-sheet) .xs-field{ background: rgb(255, 255, 255); box-shadow: rgba(12, 14, 18, 0.06) 0px 0px 0px 1px inset; }
:where(.an-scr,.an-sheet) .xs-sheet .xs-field,:where(.an-scr,.an-sheet) .xs-card .xs-field{ background: rgb(251, 251, 252); box-shadow: rgba(12, 14, 18, 0.07) 0px 0px 0px 1px inset; }
:where(.an-scr,.an-sheet) .xs-field:focus-within,:where(.an-scr,.an-sheet) .xs-sheet .xs-field:focus-within,:where(.an-scr,.an-sheet) .xs-card .xs-field:focus-within{ box-shadow: rgb(255, 197, 220) 0px 0px 0px 1.5px inset; }

/* ---- src/styles/40-diary.css ---- */
/* СГЕНЕРИРОВАНО design-preview/miniapp-v3-dev/tools/extract_css.js из прототипа nav-v2
   (состояния: diary.js). Правила взяты в порядке каскада прототипа; не правьте
   руками — поправка поверх живёт в файлах стилей с бОльшим номером. */
:where(.dy-scr,.dy-sheet) .body{ flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0px; padding: 0px 18px; }
:where(.dy-scr,.dy-sheet) .stack{ display: flex; flex-direction: column; gap: 12px; }
.is-in .stack > *{ animation-duration: ; animation-timing-function: ; animation-iteration-count: ; animation-direction: ; animation-fill-mode: ; animation-play-state: ; animation-name: ; animation-timeline: ; animation-range-start: ; animation-range-end: ; animation-delay: calc(var(--k,0)*.07s); }
:where(.dy-scr,.dy-sheet) .foot{ flex: 0 0 auto; margin-top: auto; padding: 16px 18px 30px; }
.btn.ghost{ background: rgb(241, 241, 243); color: var(--ink); box-shadow: none; }
:where(.dy-scr,.dy-sheet) .title{ font-size: 14.5px; font-weight: 600; letter-spacing: -0.3px; padding: 6px 6px 0px; }
:where(.dy-scr,.dy-sheet) .title span{ color: rgb(163, 162, 170); font-weight: 500; }
:where(.dy-scr,.dy-sheet) .list{ background: rgb(255, 255, 255); border-radius: 30px; box-shadow: var(--card-sh); overflow: hidden; }
:where(.dy-scr,.dy-sheet) .li{ display: flex; align-items: center; gap: 14px; padding: 15px 20px; }
:where(.dy-scr,.dy-sheet) .li + .li{ border-top: 1px solid var(--line); }
.li__b{ flex: 1 1 auto; min-width: 0px; }
.li__n{ font-size: 14.5px; font-weight: 500; letter-spacing: -0.2px; }
.li__k{ font-size: 14.5px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ok); white-space: nowrap; }
:where(.dy-scr,.dy-sheet) .week{ display: flex; gap: 6px; justify-content: space-between; }
:where(.dy-scr,.dy-sheet) .wday{ flex: 1 1 0px; min-width: 0px; background: rgb(241, 241, 243); border-radius: 20px; padding: 2px; text-align: center; }
:where(.dy-scr,.dy-sheet) .wday .dow{ font-size: 10px; font-weight: 500; letter-spacing: -0.2px; line-height: 1.6; color: var(--ink); height: 20px; display: flex; align-items: flex-end; justify-content: center; }
:where(.dy-scr,.dy-sheet) .wday .cell{ position: relative; aspect-ratio: 1 / 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 2px 8px; }
:where(.dy-scr,.dy-sheet) .wday .num{ font-size: 14px; line-height: 1; color: var(--ink); }
:where(.dy-scr,.dy-sheet) .wday .dot{ width: 5px; height: 5px; border-radius: 50%; background: transparent; }
:where(.dy-scr,.dy-sheet) .wday .dot--s3{ background: var(--s3); }
:where(.dy-scr,.dy-sheet) .wday .dot--s2{ background: var(--s2); }
:where(.dy-scr,.dy-sheet) .wday .dot--s1{ background: var(--s1); }
:where(.dy-scr,.dy-sheet) .wday .frz{ position: absolute; right: 5px; top: 4px; width: 12px; height: 12px; color: rgb(90, 160, 242); }
:where(.dy-scr,.dy-sheet) .wday.is-muted .dow,:where(.dy-scr,.dy-sheet) .wday.is-muted .num{ color: var(--mut); }
:where(.dy-scr,.dy-sheet) .wday.is-active{ background: rgb(16, 16, 20); }
:where(.dy-scr,.dy-sheet) .wday.is-active .dow{ color: rgb(255, 255, 255); }
:where(.dy-scr,.dy-sheet) .wday.is-active .disc{ width: 34px; height: 34px; border-radius: 50%; background: rgb(255, 255, 255); display: grid; place-items: center; margin-top: 2px; }
:where(.dy-scr,.dy-sheet) .wday.is-active .num{ color: var(--ink); font-weight: 500; }
.goals{ background: rgb(255, 255, 255); border-radius: 26px; padding: 16px; display: flex; flex-direction: column; gap: 14px; box-shadow: rgba(20, 16, 26, 0.06) 0px 12px 30px; }
.goals__head{ display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.goals__kcal{ display: flex; align-items: baseline; gap: 4px; }
.goals__kcal b{ font-size: 20px; font-weight: 500; line-height: 24px; letter-spacing: -0.2px; font-variant-numeric: tabular-nums; }
.goals__kcal span{ font-size: 14px; color: var(--mut); }
.goals__sub{ margin-top: 2px; font-size: 12px; line-height: 16px; color: var(--mut); }
.goals__sub em{ font-style: normal; color: var(--ink); }
.kbar{ display: flex; gap: 4px; height: 16px; align-items: stretch; }
.kbar i{ flex: 1 1 0px; border-radius: 9999px; background: rgb(228, 228, 231); }
.kbar i.on{ background: var(--prot); }
.mrings{ display: flex; gap: 4px; width: 100%; }
.mring{ flex: 1 1 0px; min-width: 0px; display: flex; flex-direction: column; align-items: center; gap: 7px; }
.mring__d{ position: relative; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--c,#a3d546) calc(var(--p)*1%),#edeef1 0); transition: --p 1s var(--ease); }
.mring__d::after{ content: ""; position: absolute; inset: 5px; border-radius: 50%; background: rgb(255, 255, 255); }
.mring__d span{ position: relative; z-index: 1; font-size: 13px; font-weight: 600; letter-spacing: -0.3px; font-variant-numeric: tabular-nums; }
.mring__l{ font-size: 11px; font-weight: 500; color: var(--ink); line-height: 1; }
.mring__t{ font-size: 10px; color: var(--mut); line-height: 1; }
.is-in .mring__d{ --p: var(--to,0); }
.is-in .kbar i.on{ animation-duration: 0.3s; animation-timing-function: ease; animation-iteration-count: 1; animation-direction: normal; animation-fill-mode: both; animation-play-state: running; animation-name: kbOn; animation-timeline: auto; animation-range: normal; animation-delay: calc(var(--i,0)*.018s); }
@keyframes kbOn { 
  0% { background: rgb(228, 228, 231); transform: scaleY(0.6); }
  100% { background: var(--prot); transform: scaleY(1); }
}
.ring{ --r: 38px; --t: 8px; position: relative; flex: 0 0 auto; width: calc(var(--r)*2); height: calc(var(--r)*2); border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--arc) calc(var(--p)*1% - .4%),rgba(16,16,20,.08) calc(var(--p)*1% + .4%)); transition: --p 1.2s var(--ease),--arc .7s ease; }
.ring.q3{ --arc: var(--s3); }
.ring.q2{ --arc: #f3c53a; }
.ring.q1{ --arc: var(--s1); }
.ring::after{ content: ""; position: absolute; inset: var(--t); border-radius: 50%; background: rgb(255, 255, 255); }
.ring::before,.ring__cap{ content: ""; position: absolute; left: 50%; top: 0px; width: var(--t); height: var(--t); margin-left: calc(var(--t)/-2); border-radius: 50%; background: var(--arc); transition: --arc 0.7s; }
.ring__cap{ transform-origin: 50% var(--r); transform: rotate(calc(var(--p)*3.6deg)); }
.ring__c{ position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.ring b{ font-size: 26px; font-weight: 600; letter-spacing: -1.2px; line-height: 1; font-variant-numeric: tabular-nums; }
.ring span{ font-size: 10px; color: var(--mut); margin-top: 4px; white-space: nowrap; }
.ring--s{ --r: 22px; --t: 5px; }
.ring--s b{ font-size: 15px; letter-spacing: -0.5px; }
.is-in .ring{ --p: var(--to,0); }
svg path.dr{ stroke-dasharray: 26; stroke-dashoffset: 26; }
.is-in .ok svg path.dr{ animation-duration: 0.4s; animation-timing-function: ease-out; animation-iteration-count: 1; animation-direction: normal; animation-fill-mode: both; animation-play-state: running; animation-name: draw; animation-timeline: auto; animation-range: normal; animation-delay: calc(.35s + var(--i,0)*.07s + var(--d,0s)); }
@keyframes draw { 
  100% { stroke-dashoffset: 0; }
}
.slot{ background: rgb(255, 255, 255); border-radius: 26px; box-shadow: rgba(20, 16, 26, 0.06) 0px 12px 28px; overflow: hidden; }
.slot__h{ display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; font-family: inherit; cursor: pointer; border: 0px; background: transparent; padding: 14px 16px; color: inherit; }
.dish{ position: relative; width: 62px; height: 62px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; overflow: hidden; font-size: 27px; background: rgb(243, 242, 245); box-shadow: rgba(30, 24, 40, 0.1) 0px 10px 20px, rgba(20, 16, 26, 0.05) 0px 0px 0px 1px inset; }
.food__b{ flex: 1 1 auto; min-width: 0px; display: flex; flex-direction: column; align-items: flex-start; }
.food__n{ font-size: 15px; font-weight: 600; letter-spacing: -0.25px; line-height: 1.25; }
.food__m{ font-size: 11.5px; color: rgb(150, 149, 157); margin-top: 5px; font-variant-numeric: tabular-nums; }
.marks{ display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.mk{ display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; font-style: normal; border-radius: 100px; padding: 4px 8px 4px 6px; line-height: 1; transform: scale(0.4); opacity: 0; }
.mk svg{ width: 10px; height: 10px; }
.mk.ok{ color: var(--ok); background: var(--ok-bg); }
.mk.no{ color: rgb(154, 153, 161); background: rgb(241, 241, 243); }
.mk.pend{ color: rgb(182, 181, 189); background: rgb(246, 246, 248); }
.is-in .mk{ animation-duration: ; animation-timing-function: ; animation-iteration-count: ; animation-direction: ; animation-fill-mode: ; animation-play-state: ; animation-name: ; animation-timeline: ; animation-range-start: ; animation-range-end: ; animation-delay: calc(.3s + var(--i,0)*.13s + var(--d,0s)); }
@keyframes mkIn { 
  100% { transform: scale(1); opacity: 1; }
}
.pscore{ flex: 0 0 auto; display: flex; align-items: baseline; font-variant-numeric: tabular-nums; letter-spacing: -0.5px; }
.pscore b{ font-size: 22px; font-weight: 600; }
.pscore small{ font-size: 12px; color: rgb(163, 162, 170); margin-left: 2px; }
.food__add{ width: 38px; height: 38px; border-radius: 50%; border: 0px; cursor: pointer; flex: 0 0 auto; background: rgb(16, 16, 20); color: rgb(255, 255, 255); display: grid; place-items: center; }
.food__add svg{ width: 17px; height: 17px; }
.slot--empty .food__n{ color: rgb(63, 62, 70); }
.slot--empty .food__m{ color: rgb(163, 162, 170); }
.seg{ display: flex; background: rgb(241, 241, 243); border-radius: 100px; padding: 4px; margin-top: 18px; }
.seg button{ flex: 1 1 0px; height: 38px; border: 0px; border-radius: 100px; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--mut2); background: transparent; cursor: pointer; transition: 0.2s; }
.seg button.on{ background: rgb(255, 255, 255); color: var(--ink); box-shadow: rgba(20, 16, 26, 0.08) 0px 4px 12px; }
.band{ display: flex; align-items: center; gap: 14px; background: rgb(255, 255, 255); border-radius: 26px; padding: 14px 16px; box-shadow: rgba(20, 16, 26, 0.05) 0px 10px 24px; }
.band__ic{ width: 40px; height: 40px; border-radius: 14px; flex: 0 0 auto; display: grid; place-items: center; background: rgb(233, 240, 251); color: rgb(46, 102, 194); }
.band__ic.g{ background: var(--ok-bg); color: var(--ok); }
.band__ic svg{ width: 19px; height: 19px; }
.band__b{ flex: 1 1 auto; min-width: 0px; }
.band__t{ font-size: 14px; font-weight: 600; letter-spacing: -0.3px; }
.band__s{ font-size: 11.5px; color: var(--mut); margin-top: 4px; line-height: 1.4; }
.chev.w{ color: rgba(255, 255, 255, 0.6); }
.im{ background-size: cover; background-position: center center; }
@keyframes spin { 
  100% { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce){
.mk,:where(.dy-scr,.dy-sheet) .stack > *{ opacity: 1; transform: none; filter: none; }
svg path.dr{ stroke-dashoffset: 0; }
}
.rf-scr > .foot{ padding-bottom: 0px; }
.rf-scr > .body{ flex: 0 0 auto; }
.nv-li{ display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.nv-li + .nv-li{ border-top: 1px solid rgba(12, 14, 18, 0.06); }
.phero__grain{ position: absolute; inset: 0px; z-index: 1; opacity: 0.42; mix-blend-mode: overlay; pointer-events: none; background-size: 160px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>"); }
.rf-scr.pl4-scr{ padding-top: 0px; }
.pl4-hero{ position: relative; overflow: hidden; isolation: isolate; height: 372px; color: rgb(255, 255, 255); flex: 0 0 auto; }
.pl4-hero .phero__grain{ z-index: 1; }
.pl4-hero__top{ position: absolute; left: 14px; right: 14px; top: 62px; z-index: 3; display: flex; justify-content: space-between; align-items: center; }
.pl4-gb{ width: 40px; height: 40px; border-radius: 50%; border: 0px; padding: 0px; background: rgba(255, 255, 255, 0.16); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: rgba(255, 255, 255, 0.35) 0px 0px 0px 1px inset; color: rgb(255, 255, 255); display: grid; place-items: center; cursor: pointer; }
.pl4-gb svg{ width: 18px; height: 18px; }
.pl4-bar{ position: absolute; left: 0px; right: 0px; top: 0px; height: 100px; z-index: 15; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 12px; background: rgba(243, 243, 245, 0.82); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); opacity: 0; pointer-events: none; transform: translateY(-8px); transition: opacity .25s,transform .3s var(--ease); box-shadow: rgba(16, 16, 20, 0.06) 0px 1px 0px; }
.pl4-bar.on{ opacity: 1; pointer-events: auto; transform: none; }
.pl4-bar b{ font-size: 15.5px; font-weight: 600; letter-spacing: -0.3px; }
.pl4-bar .rb{ position: absolute; left: 16px; bottom: 10px; width: 40px; height: 40px; }
.pl4-body{ padding: 16px 20px 0px; }
.pl4-anim{ opacity: 0; transform: translateY(16px); }
.is-in .pl4-anim{ animation-duration: ; animation-timing-function: ; animation-iteration-count: ; animation-direction: ; animation-fill-mode: ; animation-play-state: ; animation-name: ; animation-timeline: ; animation-range-start: ; animation-range-end: ; animation-delay: calc(var(--k,0)*80ms + 160ms); }
.pl4-coach__ph{ width: 54px; height: 54px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; box-shadow: rgb(255, 255, 255) 0px 0px 0px 3px, rgba(12, 14, 18, 0.12) 0px 0px 0px 4.5px; }
.pl4-days{ display: flex; gap: 5px; margin-top: 12px; }
.pl4-days span{ flex: 1 1 0px; height: 22px; border-radius: 8px; background: rgb(241, 241, 243); color: rgb(182, 181, 189); font-size: 10.5px; font-weight: 600; display: grid; place-items: center; }
.lb-search{ display: flex; align-items: center; gap: 10px; height: 46px; border-radius: 16px; background: rgb(255, 255, 255); box-shadow: rgba(20, 4, 12, 0.06) 0px 8px 24px, rgba(12, 14, 18, 0.04) 0px 0px 0px 1px inset; padding: 0px 14px; font-size: 14.5px; color: rgb(163, 162, 170); }
.lb-search svg{ width: 18px; height: 18px; color: rgb(163, 162, 170); }
.dg-hide{ display: none !important; }
.ring.qp{ --arc: #cfe3a3; }
.kbar i.on.over{ background: rgb(240, 160, 60) !important; }
.goals__kcal[data-nm]{ cursor: pointer; }
.dish.rec::after{ content: ""; position: absolute; inset: 0px; border-radius: 50%; background: linear-gradient(110deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.72) 50%, rgba(255, 255, 255, 0) 70%) 0% 0% / 220% 100%; animation: 1.3s linear 0s infinite normal none running dgShim; }
@keyframes dgShim { 
  0% { background-position: 130% 0px; }
  100% { background-position: -130% 0px; }
}
.pscore{ flex-direction: column; align-items: flex-end; line-height: 1; }
.pscore b{ font-size: 22px; font-weight: 600; letter-spacing: -0.6px; }
.pscore small{ font-size: 11px; color: rgb(139, 138, 146); margin: 4px 0px 0px; letter-spacing: 0.01em; }
.food__m b[data-yest]{ color: var(--ink); font-weight: 600; cursor: pointer; }
.ring--fromv{ --p: var(--from,0); }
.nv-sheet--nm{ padding-bottom: 26px; z-index: 27; }
.rf-app.nm-open .nv-sheet--nm{ transform: none; }
.nm-sub{ font-size: 13px; color: rgb(139, 138, 146); margin-top: 4px; line-height: 1.4; }
#dgCalm{ display: none; }
body.nv-nokcal #dgCalm{ display: flex; }
body.nv-nokcal #dgBar2,body.nv-nokcal .goals__rows{ display: none !important; }
.dg-streak{ display: flex; align-items: center; gap: 6px; margin: -7px 0px -3px; padding: 0px 10px; font-size: 12.5px; color: rgb(139, 138, 146); cursor: pointer; min-height: 18px; }
.dg-streak b{ font-weight: 600; color: var(--ink); letter-spacing: -0.2px; }
.dg-streak__ic{ width: 16px; height: 16px; color: rgb(255, 122, 26); display: grid; place-items: center; flex: 0 0 auto; }
.dg-streak__ic svg{ width: 14px; height: 14px; }
.goals__rows{ display: none; margin-top: -2px; border-top: 1px solid rgba(16, 16, 20, 0.07); }
body[data-lay="p"] .goals__rows{ display: block; }
.title--row{ display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.title__t{ font-style: normal; color: var(--ink); }
.title--row .title__link b{ color: var(--ink); }
.title__link{ display: none; align-items: center; gap: 2px; font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer; white-space: nowrap; }
.title__link .chev{ width: 16px; height: 16px; color: rgb(182, 181, 189); }
body[data-lay="p"] .title__link{ display: inline-flex; }
body[data-lay="p"] .title__hint{ display: none; }
.ring--m{ --r: 28px; --t: 6px; width: 56px; height: 56px; }
.ring--m b{ font-size: 18px; letter-spacing: -0.8px; }
.ring--m span{ font-size: 9px; margin-top: 2px; }
body[data-lay]:not([data-lay="now"]) .rf-pane[data-tab="food"] .foot{ position: sticky; bottom: -22px; z-index: 6; margin-top: 4px; padding: 14px 18px 32px; background: linear-gradient(to top,var(--bg) 58%,color-mix(in srgb,var(--bg) 0%,transparent)); }
body.nv-nokcal .goals,body.nv-nokcal .marks,body.nv-nokcal .pscore,body.nv-nokcal .kc{ display: none; }
.mr-ic{ width: 40px; height: 40px; border-radius: 13px; flex: 0 0 auto; background: rgb(243, 242, 245); color: rgb(42, 40, 48); display: grid; place-items: center; }
.mr-ic svg{ width: 19px; height: 19px; }
.rf-scr.xs-scr{ background: rgb(243, 243, 245); }
.xs-pad{ padding: 20px 18px; }
.dish--ic{ background: rgb(243, 242, 245); color: rgb(95, 94, 102); box-shadow: rgba(20, 16, 26, 0.05) 0px 0px 0px 1px inset; opacity: 1; filter: none; }
.dish--ic svg{ width: 26px; height: 26px; }
.sl-l{ font-size: 11px; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; color: rgb(163, 162, 170); margin-top: 18px; }
.sl-times{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.sl-times span{ display: flex; flex-direction: column; gap: 2px; padding: 11px 14px; border-radius: 16px; background: rgb(246, 246, 248); cursor: pointer; box-shadow: rgba(12, 14, 18, 0.04) 0px 0px 0px 1px inset; }
.sl-times span b{ font-size: 17px; font-weight: 600; letter-spacing: -0.4px; font-variant-numeric: tabular-nums; }
.sl-times span small{ font-size: 11.5px; color: rgb(139, 138, 146); }
.sl-times span.on{ background: rgb(16, 16, 20); color: rgb(255, 255, 255); }
.sl-times span.on small{ color: rgba(255, 255, 255, 0.6); }
.ad--text .ad__txt{ opacity: 1; top: 150px; }
.ad__txt i{ display: flex; align-items: center; gap: 6px; font-style: normal; font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); margin-bottom: 14px; }
.ad__txt i svg{ width: 13px; height: 13px; color: rgb(255, 255, 255); }
.ad__txt--ex{ color: rgba(255, 255, 255, 0.42); }
.ad__caret{ display: inline-block; width: 2px; height: 0.9em; background: rgb(255, 255, 255); margin-left: 3px; vertical-align: -2px; animation: 1s steps(2) 0s infinite normal none running adCaret; }
@keyframes adCaret { 
  50% { opacity: 0; }
}
.ad{ background: rgb(12, 11, 16); }
.ad--result,.ad--view{ background: var(--bg); }
.ad .ad__photo{ position: relative; height: 840px; overflow: hidden; background: rgb(12, 11, 16); transition: height .65s var(--ease); flex: 0 0 auto; }
.ad--result .ad__photo,.ad--view .ad__photo{ height: 372px; }
.ad__zoom{ position: absolute; inset: 0px; transition: transform 1.3s var(--ease); transform-origin: 50% 50%; will-change: transform; }
.ad__img{ position: absolute; inset: -12px; background-size: cover; background-position: center center; opacity: 0; transition: opacity 0.5s; }
.ad__img.on{ opacity: 1; }
.ad--capture .ad__img.on{ animation: adLand .9s var(--ease) both; }
@keyframes adLand { 
  0% { transform: scale(1.14); filter: blur(12px) brightness(1.35); }
  100% { transform: scale(1); filter: none; }
}
.ad--scan .ad__img.on,.ad--ask .ad__img.on{ animation: 8s linear 0s 1 normal both running adKen; }
.ad--ask .ad__img.on{ animation-play-state: paused; }
@keyframes adKen { 
  0% { transform: scale(1); }
  100% { transform: scale(1.08); }
}
.ad__mesh{ position: absolute; inset: 0px; background: radial-gradient(120% 110% at 100% 0%, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 55%), radial-gradient(90% 90% at 0% 100%, rgba(163, 213, 70, 0.1) 0%, rgba(163, 213, 70, 0) 60%), linear-gradient(150deg, rgb(35, 35, 38) 0%, rgb(14, 14, 16) 100%); }
.ad__vig{ position: absolute; inset: 0px; pointer-events: none; background: linear-gradient(rgba(8, 6, 10, 0.6) 0%, rgba(8, 6, 10, 0) 24%, rgba(8, 6, 10, 0) 50%, rgba(8, 6, 10, 0.7) 100%); }
.ad--result .ad__vig,.ad--view .ad__vig{ background: linear-gradient(rgba(20, 4, 12, 0.28) 0%, rgba(20, 4, 12, 0) 30%, rgba(20, 4, 12, 0.15) 55%, rgba(20, 4, 12, 0.8) 100%); }
.ad .phero__grain{ z-index: 1; opacity: 0.2; pointer-events: none; }
.ad__grid{ position: absolute; inset: 0px; opacity: 0; pointer-events: none; background-image: linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px); background-size: 28px 28px; transition: opacity 0.6s; mix-blend-mode: screen; }
.ad--scan .ad__grid{ opacity: 1; }
.ad__vf{ position: absolute; inset: 116px 20px 290px; pointer-events: none; opacity: 0; transition: opacity 0.4s; }
.ad--capture .ad__vf,.ad--scan .ad__vf{ opacity: 1; }
.ad__vf i{ position: absolute; width: 28px; height: 28px; border: 2.5px solid rgba(255, 255, 255, 0.92); filter: drop-shadow(rgba(0, 0, 0, 0.4) 0px 0px 6px); }
.ad__vf i:nth-child(1){ left: 0px; top: 0px; border-right: 0px; border-bottom: 0px; border-radius: 8px 0px 0px; }
.ad__vf i:nth-child(2){ right: 0px; top: 0px; border-left: 0px; border-bottom: 0px; border-radius: 0px 8px 0px 0px; }
.ad__vf i:nth-child(3){ left: 0px; bottom: 0px; border-right: 0px; border-top: 0px; border-radius: 0px 0px 0px 8px; }
.ad__vf i:nth-child(4){ right: 0px; bottom: 0px; border-left: 0px; border-top: 0px; border-radius: 0px 0px 8px; }
.ad--scan .ad__vf i{ animation: adVf .6s var(--spring) both; border-color: rgb(255, 255, 255); }
@keyframes adVf { 
  0% { transform: scale(1.5); opacity: 0; }
}
.ad__beam{ position: absolute; left: 0px; right: 0px; top: 0px; height: 160px; opacity: 0; pointer-events: none; background: linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.32) 60%, rgba(255, 255, 255, 0.9) 100%); mix-blend-mode: screen; }
.ad__beam::after{ content: ""; position: absolute; left: 0px; right: 0px; bottom: -1px; height: 2px; background: rgb(255, 255, 255); box-shadow: rgba(255, 255, 255, 0.95) 0px 0px 22px 5px; }
.ad--scan .ad__beam{ animation: 1.5s cubic-bezier(0.45, 0, 0.55, 1) 0s 2 alternate both running adBeam; }
@keyframes adBeam { 
  0% { transform: translateY(-170px); opacity: 1; }
  100% { transform: translateY(700px); opacity: 1; }
}
.ad__dust{ position: absolute; inset: 0px; pointer-events: none; }
.ad__dust i{ position: absolute; left: 0px; top: 0px; width: 5px; height: 5px; margin: -2px 0px 0px -2px; border-radius: 50%; background: rgb(255, 255, 255); box-shadow: rgba(255, 255, 255, 0.85) 0px 0px 9px 2px; opacity: 0; animation-duration: 0.78s; animation-timing-function: cubic-bezier(0.2, 0.7, 0.25, 1); animation-iteration-count: 1; animation-direction: normal; animation-fill-mode: both; animation-play-state: running; animation-name: adDust; animation-timeline: auto; animation-range: normal; animation-delay: var(--dl); }
@keyframes adDust { 
  0% { transform: translate(var(--x0),var(--y0)) scale(.5); opacity: 0; }
  25% { opacity: 1; }
  100% { transform: translate(var(--x1),var(--y1)) scale(1.1); opacity: 0; }
}
.ad__tags{ position: absolute; inset: 0px; pointer-events: none; }
.ad__tag{ position: absolute; width: 0px; height: 0px; }
.ad__ret{ position: absolute; left: -28px; top: -28px; width: 56px; height: 56px; transform: scale(2.3); opacity: 0; animation: adLock .5s var(--spring) both; }
.ad__ret b{ position: absolute; width: 15px; height: 15px; border: 2.5px solid rgb(255, 255, 255); filter: drop-shadow(rgba(255, 255, 255, 0.9) 0px 0px 6px); }
.ad__ret b:nth-child(1){ left: 0px; top: 0px; border-right: 0px; border-bottom: 0px; border-radius: 6px 0px 0px; }
.ad__ret b:nth-child(2){ right: 0px; top: 0px; border-left: 0px; border-bottom: 0px; border-radius: 0px 6px 0px 0px; }
.ad__ret b:nth-child(3){ left: 0px; bottom: 0px; border-right: 0px; border-top: 0px; border-radius: 0px 0px 0px 6px; }
.ad__ret b:nth-child(4){ right: 0px; bottom: 0px; border-left: 0px; border-top: 0px; border-radius: 0px 0px 6px; }
.ad__ret::after{ content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0px 0px -3px; border-radius: 50%; background: rgb(255, 255, 255); box-shadow: rgb(255, 255, 255) 0px 0px 10px; animation: 1.6s ease-out 0s infinite normal none running adPing; }
@keyframes adPing { 
  100% { transform: scale(3.4); opacity: 0; }
}
@keyframes adLock { 
  100% { transform: scale(1); opacity: 1; }
}
.ad__lead{ position: absolute; left: 30px; top: 0px; width: 22px; height: 1.5px; background: rgba(255, 255, 255, 0.9); box-shadow: rgba(255, 255, 255, 0.8) 0px 0px 6px; transform-origin: 0px 50%; transform: scaleX(0); animation: 0.3s ease-out 0.32s 1 normal both running adLead; }
@keyframes adLead { 
  100% { transform: scaleX(1); }
}
.ad__lbl{ position: absolute; left: 54px; top: -19px; display: flex; align-items: baseline; gap: 6px; white-space: nowrap; font-style: normal; font-size: 13px; font-weight: 600; color: rgb(16, 16, 20); background: rgba(255, 255, 255, 0.97); border-radius: 12px; padding: 8px 12px; box-shadow: rgba(0, 0, 0, 0.42) 0px 12px 30px; opacity: 0; transform: translateX(-8px); animation: adTag .45s var(--ease) .5s both; }
.ad__lbl small{ font-size: 11.5px; color: rgb(139, 138, 146); font-weight: 500; }
.ad__tag--b .ad__lead{ left: -0.75px; top: 30px; width: 1.5px; height: 22px; transform-origin: 50% 0px; transform: scaleY(0); animation-name: adLeadV; }
@keyframes adLeadV { 
  100% { transform: scaleY(1); }
}
.ad__tag--b .ad__lbl{ left: 50%; top: 54px; transform: translate(-50%, -8px); }
.ad__tag--b .ad__lbl{ animation-name: adTagB; }
@keyframes adTagB { 
  100% { opacity: 1; transform: translate(-50%, 0px); }
}
@keyframes adTag { 
  100% { opacity: 1; transform: none; }
}
.ad__tag.on .ad__ret b{ border-color: rgb(255, 255, 255); }
.ad--ask .ad__lbl,.ad--ask .ad__lead{ opacity: 0 !important; animation: auto ease 0s 1 normal none running none !important; }
.ad--ask .ad__tag:not(.on){ opacity: 0.3; }
.ad--ask .ad__ret{ animation: auto ease 0s 1 normal none running none; transform: none; opacity: 1; }
.ad__shine{ position: absolute; inset: 0px; pointer-events: none; background: linear-gradient(115deg, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 58%); transform: translateX(-110%); opacity: 0; mix-blend-mode: screen; }
.ad__prog{ position: absolute; left: 20px; top: 116px; z-index: 3; display: flex; align-items: center; gap: 9px; height: 36px; padding: 0px 12px 0px 6px; border-radius: 100px; background: rgba(12, 8, 14, 0.55); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: rgba(255, 255, 255, 0.22) 0px 0px 0px 1px inset; color: rgb(255, 255, 255); font-size: 13px; font-weight: 600; opacity: 0; transform: translateY(-6px); transition: opacity 0.3s, transform 0.3s; letter-spacing: -0.1px; }
.ad--scan .ad__prog{ opacity: 1; transform: none; }
.ad__prog svg{ width: 24px; height: 24px; transform: rotate(-90deg); flex: 0 0 auto; }
.ad__prog circle{ fill: none; stroke-width: 3; }
.ad__prog__bg{ stroke: rgba(255, 255, 255, 0.2); }
.ad__prog__c{ stroke: rgb(255, 255, 255); stroke-linecap: round; stroke-dasharray: 94.2; stroke-dashoffset: 94.2; transition: stroke-dashoffset .6s var(--ease); }
.ad__prog b{ font-weight: 600; color: rgba(255, 255, 255, 0.6); font-variant-numeric: tabular-nums; }
.ad__txt{ position: absolute; left: 22px; right: 22px; top: 150px; z-index: 2; color: rgb(255, 255, 255); font-size: 26px; font-weight: 600; letter-spacing: -0.7px; line-height: 1.3; opacity: 0; transition: opacity 0.4s; }
.ad--text .ad__txt{ opacity: 1; }
.ad__txt span{ transition: background 0.35s, color 0.35s; border-radius: 6px; padding: 0px 3px; margin: 0px -3px; }
.ad__invite{ position: absolute; left: 0px; right: 0px; top: 0px; height: 540px; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: rgb(255, 255, 255); cursor: pointer; }
.ad__invite span{ width: 72px; height: 72px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); box-shadow: rgba(255, 255, 255, 0.3) 0px 0px 0px 1px inset; display: grid; place-items: center; margin-bottom: 10px; }
.ad__invite span svg{ width: 30px; height: 30px; }
.ad__invite b{ font-size: 20px; font-weight: 600; letter-spacing: -0.4px; }
.ad__invite small{ font-size: 13px; color: rgba(255, 255, 255, 0.6); }
.ad__top{ top: 62px; z-index: 5; }
.ad__chips{ display: flex; gap: 8px; }
.ad__chip{ height: 40px; padding: 0px 14px; border: 0px; border-radius: 100px; background: rgba(255, 255, 255, 0.16); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: rgba(255, 255, 255, 0.35) 0px 0px 0px 1px inset; color: rgb(255, 255, 255); font-family: inherit; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 6px; cursor: pointer; letter-spacing: -0.2px; }
.ad__chip i{ font-style: normal; opacity: 0.7; font-size: 11px; }
.ad__chip svg{ width: 15px; height: 15px; opacity: 0.85; }
.ad--result .ad__chips,.ad--view .ad__chips{ display: none; }
.ad__fg{ position: absolute; left: 22px; right: 22px; bottom: 24px; z-index: 3; opacity: 0; transform: translateY(12px); transition: opacity 0.45s 0.25s, transform 0.45s 0.25s; }
.ad--result .ad__fg,.ad--view .ad__fg{ opacity: 1; transform: none; }
.ad__badge{ display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0px 11px; border-radius: 100px; background: rgba(255, 255, 255, 0.16); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: rgba(255, 255, 255, 0.3) 0px 0px 0px 1px inset; color: rgb(255, 255, 255); font-size: 11.5px; font-weight: 600; margin-bottom: 10px; }
.ad__badge svg{ width: 12px; height: 12px; }
.ad__t{ font-size: 28px; font-weight: 700; letter-spacing: -0.9px; line-height: 1.05; max-width: 330px; color: rgb(255, 255, 255); margin-bottom: 14px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ad__t--long{ font-size: 22px; letter-spacing: -0.6px; line-height: 1.12; }
.ad__panel{ position: absolute; left: 12px; right: 12px; bottom: 16px; z-index: 4; padding: 14px 14px 10px; border-radius: 30px; background: rgba(14, 9, 16, 0.6); backdrop-filter: blur(26px) saturate(1.3); -webkit-backdrop-filter: blur(26px) saturate(1.3); box-shadow: rgba(255, 255, 255, 0.14) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.5) 0px 24px 60px; color: rgb(255, 255, 255); transition: transform .5s var(--ease),opacity .4s; }
.ad__panel:empty,.ad--result .ad__panel,.ad--view .ad__panel{ opacity: 0; pointer-events: none; transform: translateY(40px); }
.ad__strip{ display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.ad__strip--many{ flex-wrap: wrap; row-gap: 6px; }
.ad__strip--many .ad__th{ width: 46px; height: 46px; border-radius: 13px; }
.ad__strip--many .ad__strip__n{ flex-basis: 100%; margin-left: 0px; }
.ad__strip__n{ margin-left: auto; font-size: 12px; color: rgba(255, 255, 255, 0.55); }
.ad__th{ position: relative; width: 52px; height: 52px; border-radius: 15px; background-size: cover; background-position: center center; box-shadow: rgba(255, 255, 255, 0.25) 0px 0px 0px 1px inset; flex: 0 0 auto; }
.ad__th.on{ box-shadow: rgb(255, 255, 255) 0px 0px 0px 2px; }
.ad__th__x{ position: absolute; right: -6px; top: -6px; width: 20px; height: 20px; border-radius: 50%; background: rgb(255, 255, 255); color: rgb(16, 16, 20); border: 0px; display: grid; place-items: center; cursor: pointer; padding: 0px; }
.ad__th__x svg{ width: 10px; height: 10px; }
.ad__th--add{ display: grid; place-items: center; background: rgba(255, 255, 255, 0.1); color: rgb(255, 255, 255); border: 0px; cursor: pointer; }
.ad__th--add svg{ width: 18px; height: 18px; }
.ad__note{ display: flex; gap: 10px; align-items: flex-start; background: rgba(255, 255, 255, 0.08); border-radius: 16px; padding: 11px 13px; box-shadow: rgba(255, 255, 255, 0.16) 0px 0px 0px 1px inset; }
.ad__note > svg{ width: 18px; height: 18px; flex: 0 0 auto; color: rgba(255, 255, 255, 0.55); margin-top: 1px; }
.ad__note__in{ flex: 1 1 auto; min-height: 20px; font-size: 14px; line-height: 1.4; color: rgb(255, 255, 255); outline: 0px; caret-color: rgb(255, 255, 255); }
.ad__note__in:empty::before{ content: attr(data-ph); color: rgba(255, 255, 255, 0.42); }
.ad__note--big{ padding: 14px 16px; }
.ad__ta{ min-height: 96px; font-size: 17px; line-height: 1.45; }
.ad__sug{ display: flex; gap: 6px; margin-top: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.ad__sug::-webkit-scrollbar{ display: none; }
.ad__sug span{ flex: 0 0 auto; height: 32px; padding: 0px 12px; border-radius: 100px; background: rgba(255, 255, 255, 0.08); box-shadow: rgba(255, 255, 255, 0.2) 0px 0px 0px 1px inset; color: rgba(255, 255, 255, 0.88); font-size: 12.5px; font-weight: 600; display: flex; align-items: center; gap: 6px; cursor: pointer; transition: background 0.2s, color 0.2s; }
.ad__sug em{ font-style: normal; color: rgba(255, 255, 255, 0.5); font-weight: 500; }
.ad__go{ margin-top: 12px; height: 54px; font-size: 15.5px; background: rgb(255, 255, 255); color: rgb(16, 16, 20); box-shadow: rgba(0, 0, 0, 0.35) 0px 16px 32px; }
.ad__go:disabled{ background: rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.5); box-shadow: none; cursor: default; }
.ad__2nd{ display: block; width: 100%; margin-top: 4px; border: 0px; background: transparent; color: rgba(255, 255, 255, 0.75); font-family: inherit; font-size: 13.5px; font-weight: 600; padding: 11px; cursor: pointer; }
.ad__ledger{ display: flex; flex-direction: column; gap: 6px; min-height: 46px; }
.ad__tot{ display: flex; align-items: baseline; gap: 6px; margin-top: 12px; color: rgba(255, 255, 255, 0.6); font-size: 12.5px; }
.ad__tot em{ font-style: normal; }
.odo{ display: inline-flex; height: 1em; line-height: 1; overflow: hidden; font-size: 30px; font-weight: 700; letter-spacing: -0.8px; color: rgb(255, 255, 255); font-variant-numeric: tabular-nums; margin-left: auto; }
.odo__d{ display: inline-block; height: 1em; overflow: hidden; }
.odo__d i{ display: block; font-style: normal; height: 1em; line-height: 1; transform: translateY(calc(var(--n,0)*-1em)); transition: transform .6s var(--ease); }
.ad__mac{ display: flex; gap: 3px; height: 5px; margin-top: 8px; border-radius: 100px; overflow: hidden; background: rgba(255, 255, 255, 0.1); }
.ad__mac i{ display: block; height: 100%; width: 0px; transition: width .7s var(--ease); }
.ad__mac .p{ background: rgb(163, 213, 70); }
.ad__mac .f{ background: rgb(255, 176, 32); }
.ad__mac .c{ background: rgb(90, 160, 242); }
.ad__acts{ display: flex; gap: 8px; margin-top: 12px; }
.ad__acts button{ flex: 1 1 0px; height: 42px; border: 0px; border-radius: 100px; background: rgba(255, 255, 255, 0.1); box-shadow: rgba(255, 255, 255, 0.22) 0px 0px 0px 1px inset; color: rgb(255, 255, 255); font-family: inherit; font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; }
.ad__acts svg{ width: 15px; height: 15px; }
.ad__q{ color: rgb(255, 255, 255); }
.ad__q__k{ display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); margin-bottom: 8px; }
.ad__q__k svg{ width: 12px; height: 12px; color: rgb(255, 255, 255); }
.ad__q__t{ font-size: 19px; font-weight: 600; letter-spacing: -0.4px; line-height: 1.25; }
.ad__q__c{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.ad__q__c span{ height: 40px; padding: 0px 15px; border-radius: 100px; background: rgba(255, 255, 255, 0.1); box-shadow: rgba(255, 255, 255, 0.25) 0px 0px 0px 1px inset; font-size: 13.5px; font-weight: 600; display: flex; align-items: center; cursor: pointer; transition: background 0.2s, color 0.2s; }
.ad__q__c span.on{ background: rgb(255, 255, 255); color: rgb(16, 16, 20); }
.ad__body{ display: none; }
.ad--result .ad__body,.ad--view .ad__body{ display: block; flex: 0 0 auto; background: rgb(255, 255, 255); margin: 0px; padding: 40px 0px 104px; min-height: 440px; }
.ad__sec{ padding: 16px 20px 18px; }
.ad__sec__h{ display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.ad__sec__h b{ display: block; font-size: 17px; font-weight: 600; letter-spacing: -0.35px; }
.ad__sec__h small{ display: block; font-size: 12px; color: rgb(139, 138, 146); margin-top: 3px; }
.ad__sec__h .ad__sec__n{ margin-top: 5px; font-size: 12.5px; }
.ad__sep{ display: block; height: 1px; background: rgba(12, 14, 18, 0.06); margin: 0px 20px; }
.ad__sec--list{ padding: 16px 0px 6px; }
.ad__sec--list .ad__sec__h{ padding: 0px 20px; margin-bottom: 4px; }
.ad__rows{ padding: 4px 0px; }
.ad__row{ position: relative; display: flex; align-items: center; gap: 10px; padding: 14px 20px; font-size: 14.5px; color: rgb(139, 138, 146); cursor: pointer; }
.ad__row b{ margin-left: auto; color: rgb(16, 16, 20); font-weight: 600; text-align: right; max-width: 62%; }
.ad__row .chev{ flex: 0 0 auto; }
.ad__row--flat{ cursor: default; }
.ad__row + .ad__row::before{ content: ""; position: absolute; left: 20px; right: 0px; top: 0px; height: 1px; background: rgba(12, 14, 18, 0.06); }
.ad__it{ position: relative; display: flex; align-items: center; gap: 12px; padding: 11px 20px; cursor: pointer; }
.ad__it + .ad__it::before{ content: ""; position: absolute; left: 78px; right: 0px; top: 0px; height: 1px; background: rgba(12, 14, 18, 0.07); }
.ad__it__ph{ width: 46px; height: 46px; border-radius: 15px; flex: 0 0 auto; background-size: 330%; background-repeat: no-repeat; box-shadow: rgba(20, 16, 26, 0.06) 0px 0px 0px 1px inset; }
.ad__it__ph--ic{ background: rgb(246, 246, 248); color: rgb(182, 181, 189); display: grid; place-items: center; }
.ad__it__ph--ic svg{ width: 20px; height: 20px; }
.ad__it__ph--add{ background: rgb(16, 16, 20); color: rgb(255, 255, 255); display: grid; place-items: center; border-radius: 50%; width: 40px; height: 40px; margin: 0px 3px; }
.ad__it__ph--add svg{ width: 16px; height: 16px; }
.ad__it__b{ flex: 1 1 auto; min-width: 0px; }
.ad__it__b b{ display: block; font-size: 14.5px; font-weight: 500; letter-spacing: -0.1px; }
.ad__it__b small{ display: block; font-size: 12px; color: rgb(139, 138, 146); margin-top: 2px; font-variant-numeric: tabular-nums; }
.ad__it__k{ font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ad__it--add .ad__it__b b{ font-weight: 600; }
.ad__err{ margin-top: 12px; background: rgba(255, 255, 255, 0.1); color: rgb(255, 255, 255); border-radius: 16px; padding: 12px 14px; font-size: 13px; line-height: 1.4; }
.ad__err b{ display: block; font-weight: 600; margin-bottom: 2px; }
.rv__lbl{ display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0px 11px 0px 9px; border-radius: 100px; font-size: 12.5px; font-weight: 600; flex: 0 0 auto; margin-top: -2px; }
.rv__lbl svg{ width: 13px; height: 13px; }
.rv__lbl--ok{ background: var(--ok-bg); color: var(--ok); }
.rv__lbl--warn{ background: var(--warn-bg); color: var(--warn); }
.rv__lbl--mute{ background: rgb(241, 241, 243); color: rgb(95, 94, 102); }
.rv__head{ font-size: 20px; font-weight: 600; letter-spacing: -0.55px; line-height: 1.2; margin-top: -4px; }
.rv__sub{ font-size: 14.5px; color: rgb(95, 94, 102); line-height: 1.45; margin-top: 6px; }
.rv__fact{ display: flex; gap: 14px; align-items: flex-start; }
.rv__fact__b{ flex: 1 1 auto; min-width: 0px; }
.rv__plate{ width: 48px; height: 48px; flex: 0 0 auto; margin-top: 2px; overflow: visible; }
.rv__plate .rim{ fill: rgb(255, 255, 255); stroke: rgb(228, 228, 231); stroke-width: 1.5; }
.rv__plate .w{ stroke: rgb(255, 255, 255); stroke-width: 2; stroke-linejoin: round; transform-box: view-box; transform-origin: 24px 24px; transform: scale(0.6); opacity: 0; }
.is-in .rv__plate .w{ animation-duration: ; animation-timing-function: ; animation-iteration-count: ; animation-direction: ; animation-fill-mode: ; animation-play-state: ; animation-name: ; animation-timeline: ; animation-range-start: ; animation-range-end: ; animation-delay: calc(.25s + var(--i,0)*.12s); }
.rv__plate .w.ok{ fill: rgb(207, 227, 163); }
.rv__plate .w.miss{ fill: none; stroke: rgb(201, 200, 206); stroke-width: 1.2; stroke-dasharray: 3, 2.5; }
.rv__plate .w.sn{ fill: rgb(241, 241, 243); }
.rv__hist{ padding-top: 20px; margin-top: 12px; }
.rv__hist__in{ position: relative; height: 56px; display: flex; align-items: flex-end; gap: 5px; }
.rv__hist__in span{ flex: 1 1 0px; height: var(--h); border-radius: 4px 4px 2px 2px; background: rgb(233, 233, 236); position: relative; transform-origin: 50% 100%; transform: scaleY(0); }
.is-in .rv__hist__in span{ animation-duration: ; animation-timing-function: ; animation-iteration-count: ; animation-direction: ; animation-fill-mode: ; animation-play-state: ; animation-name: ; animation-timeline: ; animation-range-start: ; animation-range-end: ; animation-delay: calc(.2s + var(--i,0)*.03s); }
.rv__hist__in span{ cursor: pointer; }
.rv__hist__in span.on{ background: rgb(16, 16, 20); }
.rv__blk--hist{ position: relative; }
.rv__blk--hist .rv__blk__h{ transition: opacity 0.22s; }
@keyframes popIn { 
  0% { opacity: 0; transform: translateY(4px); }
  100% { opacity: 1; transform: none; }
}
.rv__hist__in span.on b{ position: absolute; right: 0px; bottom: calc(100% + 6px); white-space: nowrap; font-size: 11.5px; font-weight: 600; color: rgb(16, 16, 20); }
.rv__avg{ position: absolute; left: 0px; right: 0px; bottom: var(--y); border-top: 1.5px dashed rgb(182, 181, 189); z-index: 1; pointer-events: none; }
.rv__avg b{ position: absolute; left: 0px; bottom: 3px; font-size: 11px; font-weight: 500; color: rgb(139, 138, 146); background: rgb(255, 255, 255); padding-right: 6px; }
.dg-shelf{ background: rgb(255, 255, 255); border-radius: 26px; padding: 16px 20px; box-shadow: var(--card-sh); }
.dg-shelf__h b{ display: block; font-size: 17px; font-weight: 600; letter-spacing: -0.35px; line-height: 1.2; }
.dg-shelf__h small{ display: block; font-size: 12.5px; color: rgb(139, 138, 146); margin-top: 3px; }
.dg-shelf__row{ margin-top: 14px; }
.rv__shelf{ display: flex; gap: 10px; margin: 12px -20px 0px; padding: 0px 20px 4px; overflow-x: auto; scrollbar-width: none; scroll-padding: 20px; }
.rv__shelf::-webkit-scrollbar{ display: none; }
.rv__pl{ flex: 0 0 122px; cursor: pointer; scroll-snap-align: start; }
.rv__pl__ph{ display: block; height: 96px; border-radius: 18px; background-size: cover; background-position: center center; box-shadow: rgba(20, 16, 26, 0.06) 0px 0px 0px 1px inset; }
.rv__pl__mos{ position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; height: 96px; border-radius: 18px; overflow: hidden; background: rgb(241, 241, 243); box-shadow: rgba(20, 16, 26, 0.06) 0px 0px 0px 1px inset; }
.rv__pl__mos i{ display: block; background-size: cover; background-position: center center; }
.rv__pl__mos em{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 5px 11px; border-radius: 100px; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-style: normal; font-size: 13px; font-weight: 700; letter-spacing: -0.2px; color: rgb(16, 16, 20); box-shadow: rgba(20, 16, 26, 0.16) 0px 4px 14px; }
.rv__pl b{ display: block; font-size: 13px; font-weight: 600; letter-spacing: -0.2px; margin-top: 8px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv__pl small{ display: block; font-size: 11.5px; color: rgb(139, 138, 146); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv__blk{ margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.rv__blk__h b{ display: block; font-size: 15.5px; font-weight: 600; letter-spacing: -0.3px; }
.rv__blk__h small{ display: block; font-size: 12.5px; color: rgb(139, 138, 146); margin-top: 2px; line-height: 1.35; }
.rv__list{ margin-top: 6px; }
.rv__opt{ display: flex; align-items: center; gap: 12px; padding: 12px 0px; border-top: 1px solid var(--line); cursor: pointer; }
.rv__list .rv__opt:first-child{ border-top: 0px; }
.rv__opt__b{ flex: 1 1 auto; min-width: 0px; }
.rv__opt__b b{ display: block; font-size: 14.5px; font-weight: 500; letter-spacing: -0.15px; }
.rv__opt__b small{ display: block; font-size: 12px; color: rgb(139, 138, 146); margin-top: 2px; }
.rv__opt em{ font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--ok); white-space: nowrap; }
.rv__opt--lt{ cursor: default; }
.rv__d{ font-size: 13.5px; font-weight: 700; color: var(--ok); font-variant-numeric: tabular-nums; background: var(--ok-bg); border-radius: 100px; padding: 5px 10px; }
.dg-fact2{ display: flex; align-items: center; gap: 10px; background: rgb(255, 255, 255); border-radius: 26px; padding: 16px 14px 16px 18px; box-shadow: rgba(20, 16, 26, 0.06) 0px 12px 28px; cursor: pointer; }
.dg-fact2__b{ flex: 1 1 auto; min-width: 0px; }
.dg-fact2__k{ font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(163, 162, 170); }
.dg-fact2__t{ font-size: 16.5px; font-weight: 600; letter-spacing: -0.4px; line-height: 1.25; margin-top: 6px; }
.dg-fact2__d{ margin-top: 12px; max-width: 250px; }
.dg-fact2__d span{ height: 26px; font-size: 11px; border-radius: 9px; }
.dg-fact2__d span.g{ background: rgb(234, 246, 212); color: rgb(78, 107, 20); }
.dg-fact2__d span.now{ box-shadow: rgb(93, 127, 28) 0px 0px 0px 1.5px inset; }
.dg-fact2__s{ font-size: 12.5px; color: rgb(139, 138, 146); line-height: 1.4; margin-top: 10px; }
.dg-fact2 .chev{ flex: 0 0 auto; }
.dg-today.on{ visibility: visible; width: auto; height: 34px; padding: 0px 12px 0px 7px; border-radius: 100px; background: rgba(16, 16, 20, 0.06); color: rgb(16, 16, 20); font-family: inherit; font-size: 12.5px; font-weight: 600; border: 0px; cursor: pointer; display: inline-flex; align-items: center; gap: 1px; }
.dg-today svg{ width: 14px; height: 14px; display: block; opacity: 0.7; }
.slot--locked{ opacity: 0.72; }
.slot--locked .food__n{ color: rgb(139, 138, 146); }
:where(.dy-scr,.dy-sheet) .wday .dot--c{ background: var(--cheat); }
.cal-d.cur{ box-shadow: rgb(16, 16, 20) 0px 0px 0px 2px; }
.rf-pane[data-tab="meal"] .pl4-bar{ background: rgba(255, 255, 255, 0.86); }
.slot{ position: relative; }
.slot--rec::after{ content: ""; position: absolute; inset: 0px; pointer-events: none; background: linear-gradient(110deg, rgba(12, 14, 18, 0) 38%, rgba(12, 14, 18, 0.05) 50%, rgba(12, 14, 18, 0) 62%) 0% 0% / 240% 100%; animation: 2.2s linear 0s infinite normal none running slotSweep; }
@keyframes slotSweep { 
  0% { background-position: 140% 0px; }
  100% { background-position: -140% 0px; }
}
.dish__ring{ position: absolute; inset: 0px; border-radius: 50%; z-index: 2; background: conic-gradient(rgb(29, 2, 12) 0deg, rgb(29, 2, 12) 28%, transparent 28%, transparent 100%); mask: radial-gradient(circle, transparent 27px, rgb(0, 0, 0) 28px); animation: 1.1s linear 0s infinite normal none running spin; }
@keyframes spin { 
  100% { transform: rotate(360deg); }
}
.slot__spin{ width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto; border-width: 2.5px; border-style: solid; border-color: rgb(29, 2, 12) rgb(241, 241, 243) rgb(241, 241, 243); border-image: initial; animation: 0.9s linear 0s infinite normal none running spin; }
.mk.sk{ transform: none; opacity: 1; color: transparent; background: rgb(241, 241, 243); animation: 1.3s ease-in-out 0s infinite normal none running mkSk; }
.mk.sk:nth-child(2){ animation-delay: 0.2s; }
.mk.sk:nth-child(3){ animation-delay: 0.4s; }
@keyframes mkSk { 
  50% { opacity: 0.4; }
}
.dots i{ display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: currentcolor; margin-left: 2px; vertical-align: 1px; animation: 1.2s ease 0s infinite normal none running dot; }
.dots i:nth-child(2){ animation-delay: 0.2s; }
.dots i:nth-child(3){ animation-delay: 0.4s; }
@keyframes dot { 
  0%, 80%, 100% { opacity: 0.25; }
  40% { opacity: 1; }
}
.ds-h{ display: flex; align-items: center; gap: 12px; }
.ds-h .nv-sheet__t{ flex: 1 1 auto; min-width: 0px; }
.ds-ph{ width: 52px; height: 52px; border-radius: 16px; flex: 0 0 auto; background-size: 330%; background-repeat: no-repeat; box-shadow: rgba(20, 16, 26, 0.06) 0px 0px 0px 1px inset; }
.nv-sheet--nt{ padding-bottom: 26px; z-index: 27; }
.rf-app.nt-open .nv-sheet--nt{ transform: none; }
.ad--result .ad__photo,.ad--view .ad__photo{ height: 420px; }
.ad--result .ad__img.on,.ad--view .ad__img.on{ transform: translateY(calc(var(--sy,0)*.28px)); }
.ad__fg.live{ transition: none; transform: translateY(calc(var(--sy,0)*.45px)); opacity: calc(1 - var(--sy,0)/210); }
.ad--result .ad__fg,.ad--view .ad__fg{ bottom: 62px; }
.ad__brow{ display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.ad__brow .ad__badge{ margin: 0px; }
.ad__phs{ display: flex; gap: 6px; }
.ad__phs:empty{ display: none; }
.ad__t{ margin-bottom: 0px; }
.ds-kb > div{ flex: 1 1 0px; text-align: center; min-width: 0px; display: flex; flex-direction: column; justify-content: center; }
.ad__kbc{ display: none; flex: 0 0 auto; position: relative; z-index: 3; margin: -38px 20px 0px; padding: 12px 4px; background: rgb(255, 255, 255); border-radius: 22px; box-shadow: rgba(20, 16, 26, 0.1) 0px 14px 34px, rgba(12, 14, 18, 0.03) 0px 0px 0px 1px inset; }
.ad--result .ad__kbc,.ad--view .ad__kbc{ display: flex; }
.ad__kbc > div{ flex: 1 1 0px; text-align: center; min-width: 0px; display: flex; flex-direction: column; justify-content: center; }
.ad__kbc > div + div{ border-left: 1px solid rgba(12, 14, 18, 0.07); }
.ad__kbc > .k{ flex: 1.45 1 0px; }
.ad__kbc > .k b{ font-size: 27px; letter-spacing: -1px; }
.ad__kbc > .k small{ color: rgb(16, 16, 20); }
.ad__kbc > .m b{ font-size: 17px; color: rgb(63, 62, 70); }
.ds-kb > .k b{ font-size: 22px; }
.ad__kbc b{ display: block; font-size: 20px; font-weight: 700; letter-spacing: -0.6px; line-height: 1; font-variant-numeric: tabular-nums; }
.ad__kbc small{ display: block; font-size: 9.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(139, 138, 146); margin-top: 5px; }
.ad__top__r{ display: flex; gap: 8px; }
.ad__top__r [data-act]{ display: none; }
.ad--result .ad__top__r [data-act],.ad--view .ad__top__r [data-act]{ display: grid; }
body.nv-nokcal .ad__kbc,body.nv-nokcal .ds-kb{ display: none !important; }
.ad__wait{ display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 8px; padding: 10px 14px; border: 0px; border-radius: 18px; background: rgba(255, 255, 255, 0.1); box-shadow: rgba(255, 255, 255, 0.22) 0px 0px 0px 1px inset; color: rgb(255, 255, 255); font-family: inherit; text-align: left; cursor: pointer; }
.ad__wait > svg{ width: 20px; height: 20px; flex: 0 0 auto; color: rgb(255, 255, 255); }
.ad__wait b{ display: block; font-size: 14px; font-weight: 600; letter-spacing: -0.2px; }
.ad__wait small{ display: block; font-size: 11.5px; color: rgba(255, 255, 255, 0.6); margin-top: 2px; line-height: 1.3; }
.ad__amb{ position: absolute; inset: 0px; pointer-events: none; opacity: 0; transition: opacity 0.5s; }
.ad--scan .ad__amb{ opacity: 1; }
.ad__amb i{ position: absolute; width: var(--s); height: var(--s); border-radius: 50%; background: rgb(255, 255, 255); opacity: 0; box-shadow: rgba(255, 255, 255, 0.55) 0px 0px 8px 2px; animation: adAmb var(--d) ease-in-out var(--dl) infinite; }
@keyframes adAmb { 
  0% { transform: translateY(0px); opacity: 0; }
  35% { opacity: 0.75; }
  100% { transform: translateY(-46px); opacity: 0; }
}
.ad__ret::before{ content: ""; position: absolute; inset: -2px; border-radius: 16px; background: rgb(255, 255, 255); opacity: 0; animation: 0.55s ease-out 0.08s 1 normal both running adFlash; }
@keyframes adFlash { 
  0% { opacity: 0; }
  30% { opacity: 0.85; }
  100% { opacity: 0; }
}
.ad--scan .ad__beam{ animation: 1.5s cubic-bezier(0.45, 0, 0.55, 1) 0s infinite alternate both running adBeam; }
.ad__cta::before{ content: ""; position: absolute; left: -16px; right: -16px; bottom: -22px; height: 124px; z-index: -1; pointer-events: none; background: linear-gradient(rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 58%); }
.dish--multi{ overflow: visible; }
.dish__n{ position: absolute; right: -3px; bottom: -3px; min-width: 20px; height: 20px; padding: 0px 5px; border-radius: 10px; background: rgb(16, 16, 20); color: rgb(255, 255, 255); font-size: 10.5px; font-weight: 700; font-style: normal; display: grid; place-items: center; box-shadow: rgb(255, 255, 255) 0px 0px 0px 2px; }
:where(.dy-scr,.dy-sheet) .wday{ position: relative; }
:where(.dy-scr,.dy-sheet) .wday .frz{ position: static; width: 13px; height: 13px; margin-top: -1px; display: block; }
.dg-streak__s{ font-weight: 500; color: rgb(139, 138, 146); }
.nv-sheet.nv-sheet--wy,.nv-sheet.nv-sheet--as{ padding: 12px 0px 20px; }
.nv-sheet--wy > .nv-sheet__t,.nv-sheet--as > .nv-sheet__t,.nv-sheet--as > .seg,.nv-sheet--as .pn-search,.nv-sheet--as #asManual{ margin-left: 20px; margin-right: 20px; }
.nv-sheet--as > .seg{ margin-top: 14px; }
.sh-list{ margin-top: 10px; }
.sh-list .mr-li{ padding: 15px 20px; gap: 14px; }
.sh-list .mr-li + .mr-li{ border-top: 1px solid rgba(12, 14, 18, 0.06); }
.sh-list .bd-sh__row{ padding: 13px 20px; }
.sh-list .bd-sh__row + .bd-sh__row{ border-top: 1px solid rgba(12, 14, 18, 0.06); }
.sh-list--scroll{ max-height: 300px; overflow-y: auto; scrollbar-width: none; }
.sh-list--scroll::-webkit-scrollbar{ display: none; }
.nv-sheet.nv-sheet--ds,.nv-sheet.nv-sheet--nt,.nv-sheet.nv-sheet--sl,.nv-sheet.nv-sheet--nm{ padding-bottom: 20px; }
.rf-app:not(.rf-full) .nv-sheet--cal,.rf-app:not(.rf-full) .nv-sheet--wy,.rf-app:not(.rf-full) .nv-sheet--nm{ padding-bottom: 100px; }
.rf-scr.ad{ padding-bottom: 0px; }
.rf-scr.ad--capture,.rf-scr.ad--scan,.rf-scr.ad--ask,.rf-scr.ad--text{ overflow: hidden; }
.ds-h__b{ flex: 1 1 auto; min-width: 0px; }
.ds-h__b .nv-sheet__t{ font-size: 19px; line-height: 1.2; }
.ds-h__b small{ display: block; font-size: 12px; color: rgb(139, 138, 146); margin-top: 3px; }
.ds-ph{ width: 60px; height: 60px; border-radius: 18px; }
.ds-kb{ display: flex; margin-top: 14px; background: rgb(246, 246, 248); border-radius: 16px; padding: 9px 2px; }
.ds-kb > div + div{ border-left: 1px solid rgba(12, 14, 18, 0.07); }
.ds-kb b{ display: block; font-size: 17px; font-weight: 700; letter-spacing: -0.4px; line-height: 1; font-variant-numeric: tabular-nums; }
.ds-kb small{ display: block; font-size: 9.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(139, 138, 146); margin-top: 4px; }
.ds-port{ margin-top: 12px; background: rgb(246, 246, 248); border-radius: 20px; padding: 12px 0px 8px; overflow: hidden; }
.ds-port__l{ font-size: 10.5px; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; color: rgb(163, 162, 170); text-align: center; }
.ds-port__v{ display: flex; align-items: baseline; justify-content: center; gap: 4px; margin-top: 2px; }
.ds-port__v b{ font-size: 40px; font-weight: 700; letter-spacing: -1.5px; line-height: 1; font-variant-numeric: tabular-nums; }
.ds-port__v span{ font-size: 15px; color: rgb(139, 138, 146); }
.ds-ruler{ position: relative; height: 46px; margin-top: 6px; cursor: grab; touch-action: none; mask-image: linear-gradient(90deg, transparent, rgb(0, 0, 0) 16%, rgb(0, 0, 0) 84%, transparent); }
.ds-ruler__t{ position: absolute; left: 0px; top: 6px; height: 30px; display: flex; align-items: flex-end; will-change: transform; transition: transform .28s var(--ease); }
.ds-ruler__t i{ position: relative; flex: 0 0 9px; width: 9px; height: 10px; }
.ds-ruler__t i::before{ content: ""; position: absolute; left: 0px; bottom: 0px; width: 1.5px; height: 10px; background: rgb(201, 200, 206); }
.ds-ruler__t i.M::before{ height: 18px; background: rgb(139, 138, 146); }
.ds-ruler__t i.L::after{ content: attr(data-v); position: absolute; left: 1px; top: 22px; transform: translateX(-50%); font-size: 9.5px; color: rgb(163, 162, 170); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ds-ruler__c{ position: absolute; left: 50%; top: 0px; width: 2.5px; height: 36px; margin-left: -1.25px; border-radius: 2px; background: rgb(29, 2, 12); box-shadow: none; }
.ds-quick{ margin-top: 8px; }
.ds-foot{ display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.ds-link{ border: 0px; background: transparent; font-family: inherit; font-size: 13.5px; font-weight: 600; color: rgb(95, 94, 102); padding: 8px 0px; cursor: pointer; }
.ds-link--del{ color: rgb(215, 55, 47); }
.nv-sheet.nv-sheet--cal{ padding: 12px 20px 22px; z-index: 27; }
.rf-app.cal-open .nv-sheet--cal{ transform: none; }
.cal-h{ display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cal-h .nv-sheet__t{ flex: 1 1 auto; text-align: center; }
.cal-h .nv-sheet__t span{ color: rgb(163, 162, 170); font-weight: 500; }
.cal-nav{ width: 40px; height: 40px; border-radius: 50%; border: 0px; background: rgb(241, 241, 243); color: rgb(16, 16, 20); display: grid; place-items: center; cursor: pointer; flex: 0 0 auto; }
.cal-nav svg{ width: 18px; height: 18px; }
.cal-nav--r svg{ transform: scaleX(-1); }
.cal-nav:disabled{ opacity: 0.3; cursor: default; }
.cal-h__s{ font-size: 12.5px; color: rgb(139, 138, 146); text-align: center; margin-top: 8px; }
.cal-h__s b{ color: rgb(16, 16, 20); font-weight: 600; }
.cal-d.before{ background: transparent; color: rgb(214, 213, 219); cursor: default; }
.cal-dow{ display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 16px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgb(182, 181, 189); text-align: center; }
.cal-grid{ display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px 6px; margin-top: 8px; }
.cal-d{ aspect-ratio: 1 / 1; border-radius: 50%; display: grid; place-items: center; font-size: 14.5px; font-weight: 600; font-variant-numeric: tabular-nums; color: rgb(16, 16, 20); background: rgb(246, 246, 248); cursor: pointer; transition: transform 0.15s; }
.cal-d:active{ transform: scale(0.94); }
.cal-d.s3{ background: rgb(234, 246, 212); color: rgb(78, 107, 20); }
.cal-d.s2{ background: rgb(255, 241, 191); color: rgb(125, 98, 0); }
.cal-d.s1{ background: rgb(251, 233, 214); color: rgb(169, 105, 31); }
.cal-d.c{ background: rgb(239, 230, 251); color: rgb(91, 61, 138); }
.cal-d.f{ background: rgb(227, 240, 255); color: rgb(46, 102, 194); }
.cal-d.today{ background: rgb(16, 16, 20); color: rgb(255, 255, 255); }
.cal-d.future{ background: transparent; color: rgb(201, 200, 206); font-weight: 500; cursor: default; }
.cal-d.old{ opacity: 0.55; }
.cal-d.empty{ background: transparent; cursor: default; }
.cal-d.win{ box-shadow: rgba(12, 14, 18, 0.45) 0px 0px 0px 1.5px; }
.cal-leg{ display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 16px; font-size: 11.5px; color: rgb(139, 138, 146); }
.cal-leg i{ display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.cal-leg i.s3{ background: rgb(163, 213, 70); }
.cal-leg i.s2{ background: rgb(255, 215, 94); }
.cal-leg i.s1{ background: rgb(255, 176, 32); }
.cal-leg i.c{ background: rgb(155, 109, 214); }
.cal-leg i.f{ background: rgb(90, 160, 242); }
.cal-hint{ display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 11.5px; color: rgb(139, 138, 146); line-height: 1.3; }
.cal-hint i{ width: 14px; height: 14px; border-radius: 50%; box-shadow: rgba(12, 14, 18, 0.45) 0px 0px 0px 1.5px; flex: 0 0 auto; }
.cal-btn{ width: 100%; margin-top: 16px; height: 50px; font-size: 15px; }
.nv-menu{ position: absolute; z-index: 31; width: 250px; background: rgba(250, 250, 252, 0.94); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); border-radius: 16px; box-shadow: rgba(0, 0, 0, 0.28) 0px 20px 50px, rgba(0, 0, 0, 0.08) 0px 0px 0px 0.5px; padding: 4px 0px; transform: scale(0.92); opacity: 0; pointer-events: none; transition: transform .2s var(--ease),opacity .2s; transform-origin: 20% 100%; }
.nv-menu button{ display: flex; align-items: center; gap: 14px; width: 100%; padding: 13px 16px; border: 0px; background: transparent; font-size: 16.5px; color: rgb(16, 16, 20); cursor: pointer; text-align: left; }
.nv-menu button + button{ border-top: 0.5px solid rgba(0, 0, 0, 0.1); }
.nv-menu button svg{ width: 22px; height: 22px; flex: 0 0 auto; }
.nv-sheet--wy,.nv-sheet--sl,.nv-sheet--ds,.nv-sheet--as{ padding-bottom: 26px; z-index: 27; }
.rf-app.wy-open .nv-sheet--wy,.rf-app.sl-open .nv-sheet--sl,.rf-app.ds-open .nv-sheet--ds,.rf-app.as-open .nv-sheet--as{ transform: none; }
.nv-sheet .seg{ margin-top: 14px; }
.ds-quick{ display: flex; gap: 6px; margin-top: 10px; }
.ds-quick span{ flex: 1 1 0px; height: 36px; border-radius: 100px; background: rgb(246, 246, 248); display: grid; place-items: center; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.ds-quick span.on{ background: rgb(16, 16, 20); color: rgb(255, 255, 255); }
.ds-100{ margin-top: 10px; font-size: 12.5px; color: rgb(139, 138, 146); background: rgb(246, 246, 248); border-radius: 14px; padding: 10px 14px; }
.ds-100 b{ color: rgb(16, 16, 20); font-weight: 600; }
.ds-f{ margin-top: 10px; }
.ds-f small{ display: block; font-size: 11.5px; color: rgb(139, 138, 146); margin-bottom: 4px; }
.ds-in{ min-height: 44px; border-radius: 14px; background: rgb(246, 246, 248); padding: 11px 14px; font-size: 15px; outline: 0px; font-variant-numeric: tabular-nums; }
.ds-in:empty::before{ content: attr(data-ph); color: rgb(182, 181, 189); }
.ds-f4{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 0px 8px; }
body.nv-nokcal .ds-100,body.nv-nokcal .ad__sug em,body.nv-nokcal .ad__body > .ad__sec:first-child,body.nv-nokcal .ad__body > .ad__sec:first-child + .ad__sep,body.nv-nokcal .ad__rv,body.nv-nokcal .ad__rows + .ad__sep,body.nv-nokcal .ad__it__b small{ display: none; }
.bd-sh__row{ display: flex; align-items: center; gap: 12px; padding: 11px 12px 11px 14px; cursor: pointer; }
.bd-sh__row + .bd-sh__row{ border-top: 1px solid rgba(12, 14, 18, 0.06); }
.bd-sh__row > div{ flex: 1 1 auto; min-width: 0px; }
.bd-sh__row b{ display: block; font-size: 14.5px; font-weight: 600; letter-spacing: -0.2px; }
.bd-sh__row small{ display: block; font-size: 11.5px; color: rgb(139, 138, 146); margin-top: 2px; }
.bd-sh__add{ width: 32px; height: 32px; border-radius: 50%; background: rgb(255, 255, 255); box-shadow: rgba(12, 14, 18, 0.1) 0px 0px 0px 1.5px inset; display: grid; place-items: center; font-size: 18px; font-weight: 600; color: rgb(16, 16, 20); flex: 0 0 auto; transition: background 0.2s, color 0.2s; }
.dh-cta__b:disabled{ background: rgb(233, 233, 236); color: rgb(163, 162, 170); box-shadow: none; cursor: default; }
.pn-search{ margin-top: 12px; }
.dh-body{ padding-bottom: 110px; }
.dh-cta{ position: absolute; left: 16px; right: 16px; bottom: 22px; z-index: 6; }
.dh-cta__b{ height: 56px; box-shadow: rgba(16, 16, 20, 0.28) 0px 16px 32px; }
@keyframes nvpop { 
  0% { transform: scale(0.86); }
  55% { transform: scale(1.1); }
  100% { transform: none; }
}
.nv-veil{ position: absolute; inset: 0px; z-index: 25; background: rgba(16, 10, 20, 0.28); opacity: 0; pointer-events: none; transition: opacity 0.35s; }
.nv-sheet{ position: absolute; left: 0px; right: 0px; bottom: 0px; z-index: 26; background: rgb(255, 255, 255); border-radius: 34px 34px 0px 0px; padding: 12px 20px 108px; transform: translateY(105%); transition: transform .55s var(--spring); }
.nv-veil.force{ opacity: 1; pointer-events: auto; }
.nv-sheet__bar{ width: 38px; height: 5px; border-radius: 100px; background: rgb(228, 228, 231); margin: 0px auto 14px; }
.nv-sheet__t{ font-size: 20px; font-weight: 600; letter-spacing: -0.6px; }
.xs-bar2{ position: absolute; left: 0px; right: 0px; bottom: 0px; z-index: 22; padding: 12px 16px 30px; background: linear-gradient(rgba(243, 243, 245, 0), rgb(243, 243, 245) 30%); transform: translateY(110%); transition: transform .4s var(--spring,ease); }
.xs-bar2.on{ transform: none; }
.xs-bar2 .btn{ margin: 0px; box-shadow: none; }
.rf-app.xs-editing .dock{ transform: translateY(130px); opacity: 0; pointer-events: none; }
.xs-bar2 .xs-sec2{ margin-top: 2px; }
.pre-layer{ position: absolute; inset: 0px; z-index: 4; display: none; overflow: hidden auto; background: rgb(243, 243, 245); padding: 54px 0px 120px; scrollbar-width: none; }
.pre-layer::-webkit-scrollbar{ display: none; }
.pre-num{ display: flex; align-items: baseline; gap: 8px; margin-top: 10px; padding: 14px 18px; border-radius: 20px; background: rgb(255, 255, 255); }
.pre-num input{ flex: 1 1 auto; min-width: 0px; border: 0px; outline: 0px; font-family: inherit; font-size: 34px; font-weight: 700; color: rgb(17, 17, 17); background: none; }
.pre-num span{ font-size: 17px; color: rgb(142, 142, 147); }
.pf-err2{ min-height: 0px; padding: 6px 6px 0px; font-size: 13px; color: rgb(229, 72, 77); }
.pf-err2:empty{ display: none; }
.pre-num--s input{ font-size: 24px; }
.pf-wt{ text-align: center; padding-top: 10px; }
.pf-wt__big{ display: flex; align-items: baseline; justify-content: center; gap: 6px; margin-top: 18px; }
.pf-wt__big b{ font-size: 64px; font-weight: 700; letter-spacing: -2.4px; color: rgb(17, 17, 17); font-variant-numeric: tabular-nums; }
.pf-wt__big span{ font-size: 20px; font-weight: 600; color: rgb(142, 142, 147); }
.pf-wt__sub{ font-size: 14px; color: rgb(142, 142, 147); margin-top: 4px; }
.pf-rl{ position: relative; height: 84px; margin: 26px -16px 0px; overflow: hidden; cursor: grab; touch-action: none; mask-image: linear-gradient(90deg, transparent, rgb(0, 0, 0) 22%, rgb(0, 0, 0) 78%, transparent); }
.pf-rl__track{ position: absolute; left: 0px; top: 10px; display: flex; align-items: flex-start; transition: transform 0.12s ease-out; will-change: transform; }
.pf-rl__track i{ position: relative; flex: 0 0 9px; width: 9px; height: 18px; }
.pf-rl__track i::before{ content: ""; position: absolute; left: 4px; top: 0px; width: 1.5px; height: 100%; background: rgb(209, 209, 214); border-radius: 1px; }
.pf-rl__track i.M{ height: 28px; }
.pf-rl__track i.L{ height: 40px; }
.pf-rl__track i.L::before{ background: rgb(142, 142, 147); }
.pf-rl__track em{ position: absolute; top: 46px; left: 5px; transform: translateX(-50%); font-style: normal; font-size: 12px; font-weight: 600; color: rgb(142, 142, 147); }
.pf-rl__mk{ position: absolute; left: 50%; top: 2px; width: 3px; height: 52px; margin-left: -1.5px; border-radius: 2px; background: rgb(29, 2, 12); box-shadow: rgba(12, 14, 18, 0.08) 0px 0px 0px 3px; }
.pf-wt__prev{ margin-top: 6px; font-size: 13.5px; color: rgb(110, 110, 115); }
.pf-wt__acts{ display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.pf-wt__acts button{ height: 40px; padding: 0px 16px; border: 0px; border-radius: 100px; background: rgb(255, 255, 255); font-family: inherit; font-size: 14px; font-weight: 600; color: rgb(17, 17, 17); cursor: pointer; }
.pf-wt__acts button.red{ color: rgb(229, 72, 77); }
.pf-wt__n{ text-align: left; margin-top: 18px; }
.pf-w{ text-align: center; }
.pf-w__ring{ --p: 0; width: 168px; height: 168px; margin: 4px auto 0px; border-radius: 50%; background: conic-gradient(#5aa0f2 calc(var(--p)*1%),#e8f0fb 0); display: grid; place-items: center; transition: background 0.4s; }
.pf-w__ring > div{ width: 136px; height: 136px; border-radius: 50%; background: rgb(243, 243, 245); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.pf-w__ring b{ font-size: 30px; font-weight: 700; letter-spacing: -0.8px; color: rgb(17, 17, 17); }
.pf-w__ring small{ font-size: 12.5px; color: rgb(142, 142, 147); }
.pf-w__ch{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 18px; }
.pf-w__ch button{ height: 40px; border: 0px; border-radius: 14px; background: rgb(255, 255, 255); font-family: inherit; font-size: 13.5px; font-weight: 600; color: rgb(17, 17, 17); cursor: pointer; }
.pf-w__ch button.on{ background: rgb(17, 17, 17); color: rgb(255, 255, 255); }
.pf-w__bt{ display: flex; gap: 8px; margin-top: 10px; }
.pf-w__bt button{ height: 50px; border: 0px; border-radius: 16px; background: rgb(255, 255, 255); font-family: inherit; font-size: 22px; font-weight: 600; color: rgb(17, 17, 17); cursor: pointer; flex: 0 0 64px; }
.pf-w__bt button:disabled{ opacity: 0.35; }
.pf-w__bt .pf-w__plus{ flex: 1 1 auto; background: rgb(90, 160, 242); color: rgb(255, 255, 255); font-size: 16px; }
.pf-w__wk{ display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-top: 16px; padding: 14px 16px; border-radius: 18px; background: rgb(255, 255, 255); text-align: left; }
.pf-w__wk b{ display: block; font-size: 14px; color: rgb(17, 17, 17); }
.pf-w__wk small{ font-size: 12px; color: rgb(142, 142, 147); }
.pf-w__bars{ display: flex; align-items: flex-end; gap: 6px; height: 54px; }
.pf-w__bars i{ position: relative; width: 12px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.pf-w__bars u{ display: block; width: 100%; height: var(--h); border-radius: 5px; background: rgb(214, 230, 251); }
.pf-w__bars i.on u{ background: rgb(90, 160, 242); }
.pf-w__bars span{ position: absolute; bottom: -16px; font-size: 10px; color: rgb(174, 174, 178); }
.xs-sheet .pre-num{ background: rgb(243, 243, 245); }
.slot--locked .food__n{ color: rgb(139, 138, 146); }
.pf-cal__h,.pf-cal__g{ display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.pf-cal__h span{ font-size: 11.5px; font-weight: 600; color: rgb(142, 142, 147); padding-bottom: 6px; }
.pf-cd{ position: relative; height: 42px; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 15px; font-weight: 600; color: rgb(16, 16, 20); background: rgb(255, 255, 255); cursor: pointer; }
.pf-cd.e{ background: none; cursor: default; }
.pf-cd.fut{ background: none; color: rgb(199, 198, 204); cursor: default; }
.pf-cd.today{ box-shadow: rgb(16, 16, 20) 0px 0px 0px 2px inset; }
.pf-cd i{ width: 5px; height: 5px; border-radius: 50%; }
.pf-cd i.f{ background: rgb(52, 199, 89); }
.pf-cd i.p{ box-shadow: rgb(52, 199, 89) 0px 0px 0px 1.4px inset; }
.gpa-hint{ display: none; align-items: center; justify-content: center; gap: 7px; margin: 0px 6px 10px; font-size: 13px; line-height: 1.35; color: rgb(110, 110, 115); text-align: center; }
.gpa-bn{ display: none; align-items: flex-start; gap: 12px; margin: 0px 0px 10px; padding: 14px 16px; border-radius: 22px; background: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.07) 0px 6px 24px; text-align: left; }
.gd-kn{ display: flex; gap: 10px; align-items: flex-start; margin: 12px 0px 0px; padding: 11px 12px; border-radius: 16px; background: rgb(246, 245, 248); font-size: 12.5px; line-height: 1.4; color: rgb(110, 109, 117); }
.gd-kn i{ flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; color: rgb(139, 138, 146); }
.gd-kn i svg{ width: 18px; height: 18px; }
.gd-kn b{ color: rgb(16, 16, 20); font-weight: 600; }
.gd-kn--over b.gd-kn__n{ display: inline-block; margin-right: 2px; padding: 1px 7px; border-radius: 100px; background: rgb(241, 241, 243); color: rgb(58, 58, 60); }
.gd-pend{ color: rgb(163, 162, 170) !important; }
.pscore.gd-ps b{ font-size: 18px; color: rgb(182, 181, 189); }
.pscore.gd-ps small{ color: rgb(163, 162, 170); }
.food__m .gd-pt{ color: rgb(176, 122, 20); font-weight: 500; }
.gd-rev{ position: relative; background: rgb(255, 255, 255); border-radius: 26px; padding: 18px 18px 16px; box-shadow: rgba(20, 16, 26, 0.06) 0px 8px 24px; }
.gd-rev__h{ display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.gd-rev__h b{ display: block; font-size: 17px; font-weight: 600; letter-spacing: -0.4px; }
.gd-rev__h small{ display: block; font-size: 12.5px; color: rgb(139, 138, 146); margin-top: 2px; }
.gd-rev__k{ font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgb(163, 162, 170); margin: 14px 0px 5px; }
.gd-rev__p{ font-size: 15px; line-height: 1.45; letter-spacing: -0.2px; color: rgb(16, 16, 20); }
.gd-rev__n{ display: flex; gap: 9px; font-size: 14px; line-height: 1.4; color: rgb(63, 62, 70); margin-top: 6px; }
.gd-rev__n::before{ content: ""; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: rgb(16, 16, 20); margin-top: 7px; }
.gd-rev .rv__lbl{ flex: 0 0 auto; margin-top: 1px; }
.gd-hide{ display: none !important; }
.gd-sk{ display: flex; flex-direction: column; gap: 12px; }
.gd-sk__c{ border-radius: 26px; background: rgb(255, 255, 255); padding: 18px; box-shadow: rgba(20, 16, 26, 0.05) 0px 8px 24px; }
.gd-sk__l{ height: 12px; border-radius: 8px; background: linear-gradient(90deg, rgb(241, 239, 244) 25%, rgb(248, 247, 250) 50%, rgb(241, 239, 244) 75%) 0% 0% / 220% 100%; animation: 1.3s linear 0s infinite normal none running gdShim; }
.gd-sk__r{ display: flex; justify-content: space-between; margin-top: 18px; }
.gd-sk__r i{ width: 54px; height: 54px; border-radius: 50%; background: rgb(241, 239, 244); }
.gd-sk__m{ display: flex; gap: 14px; align-items: center; }
.gd-sk__m i{ flex: 0 0 auto; width: 62px; height: 62px; border-radius: 50%; background: rgb(241, 239, 244); }
@keyframes gdShim { 
  0% { background-position: 130% 0px; }
  100% { background-position: -130% 0px; }
}
.gd-sk__hint{ display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; color: rgb(139, 138, 146); padding: 4px 0px; }
.gd-spin{ width: 14px; height: 14px; border-radius: 50%; border-width: 2px; border-style: solid; border-color: rgb(16, 16, 20) rgba(16, 16, 20, 0.14) rgba(16, 16, 20, 0.14); border-image: initial; animation: 0.8s linear 0s infinite normal none running gdRot; flex: 0 0 auto; }
@keyframes gdRot { 
  100% { transform: rotate(360deg); }
}
.gd-err{ background: rgb(255, 255, 255); border-radius: 26px; padding: 26px 22px 22px; text-align: center; box-shadow: rgba(20, 16, 26, 0.05) 0px 8px 24px; }
.gd-err__ic{ width: 52px; height: 52px; margin: 0px auto; border-radius: 50%; background: rgb(243, 242, 245); display: grid; place-items: center; color: rgb(16, 16, 20); }
.gd-err__ic svg{ width: 24px; height: 24px; }
.gd-err b{ display: block; font-size: 17px; font-weight: 600; letter-spacing: -0.4px; margin-top: 14px; }
.gd-err p{ margin: 6px 0px 0px; font-size: 13.5px; line-height: 1.45; color: rgb(110, 109, 117); }
.gd-err .btn{ margin-top: 18px; width: 100%; }
.gd-glass{ position: absolute; left: 16px; right: 16px; top: 118px; z-index: 6; display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 18px; background: rgba(20, 18, 24, 0.55); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); color: rgb(255, 255, 255); font-size: 13px; line-height: 1.4; box-shadow: rgba(0, 0, 0, 0.18) 0px 8px 24px; }
.gd-glass i{ flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; opacity: 0.85; }
.gd-glass i svg{ width: 18px; height: 18px; }
.gd-glass b{ display: block; font-weight: 600; font-size: 13.5px; }
.gd-glass small{ display: block; color: rgba(255, 255, 255, 0.72); font-size: 12.5px; margin-top: 1px; }
.gd-glass button{ flex: 0 0 auto; margin-left: auto; width: 26px; height: 26px; border: 0px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); color: rgb(255, 255, 255); display: grid; place-items: center; cursor: pointer; padding: 0px; }
.gd-glass button svg{ width: 13px; height: 13px; }
.gd-aderr{ display: flex; gap: 11px; align-items: flex-start; padding: 13px 14px; margin-bottom: 10px; border-radius: 18px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.14); color: rgb(255, 255, 255); }
.gd-aderr i{ flex: 0 0 auto; width: 20px; height: 20px; opacity: 0.9; }
.gd-aderr i svg{ width: 20px; height: 20px; }
.gd-aderr b{ display: block; font-size: 14.5px; font-weight: 600; letter-spacing: -0.2px; }
.gd-aderr small{ display: block; font-size: 12.5px; line-height: 1.4; color: rgba(255, 255, 255, 0.72); margin-top: 2px; }
.ad__wait.gd-busy{ opacity: 0.85; pointer-events: none; }
.ad__wait .gd-spin{ border-color: rgb(255, 255, 255) rgba(255, 255, 255, 0.25) rgba(255, 255, 255, 0.25); width: 18px; height: 18px; }
.btn.ad__go.gd-dis{ opacity: 0.4; pointer-events: none; }
.gd-2nd{ display: block; width: 100%; margin-top: 8px; height: 46px; border: 0px; border-radius: 100px; background: transparent; color: rgba(255, 255, 255, 0.82); font-family: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.ad__prog.gd-thin #adProgT{ color: rgb(255, 217, 168); }
.ad__it.gd-unk .ad__it__k{ color: rgb(163, 162, 170); }
.ad__it.gd-unk small{ color: rgb(176, 122, 20); }
.gd-in{ display: flex; gap: 10px; align-items: flex-start; margin: 10px 0px 2px; padding: 11px 12px; border-radius: 16px; background: rgb(246, 245, 248); font-size: 12.5px; line-height: 1.4; color: rgb(110, 109, 117); }
.gd-in i{ flex: 0 0 auto; width: 17px; height: 17px; color: rgb(139, 138, 146); margin-top: 1px; }
.gd-in i svg{ width: 17px; height: 17px; }
.gd-none{ display: flex; gap: 14px; align-items: flex-start; padding: 4px 0px 6px; }
.gd-none__ic{ flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; background: rgb(243, 242, 245); display: grid; place-items: center; color: rgb(16, 16, 20); }
.gd-none__ic svg{ width: 22px; height: 22px; }
.gd-none b{ display: block; font-size: 15.5px; font-weight: 600; letter-spacing: -0.3px; }
.gd-none p{ margin: 4px 0px 0px; font-size: 13px; line-height: 1.45; color: rgb(110, 109, 117); }
.gd-acts{ display: flex; gap: 8px; margin-top: 14px; }
.gd-acts button{ flex: 1 1 0px; height: 44px; border: 0px; border-radius: 100px; background: rgb(243, 242, 245); font-family: inherit; font-size: 13.5px; font-weight: 600; color: rgb(16, 16, 20); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; }
.gd-acts button svg{ width: 16px; height: 16px; }
.gd-acts button.dk{ background: rgb(16, 16, 20); color: rgb(255, 255, 255); }
@keyframes gdDot { 
  0%, 80%, 100% { opacity: 0.2; }
  40% { opacity: 1; }
}
.gd-dserr{ display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 12px 14px; border-radius: 16px; background: rgb(246, 245, 248); font-size: 13px; line-height: 1.4; color: rgb(63, 62, 70); }
.gd-dserr i{ flex: 0 0 auto; width: 18px; height: 18px; color: rgb(16, 16, 20); }
.gd-dserr i svg{ width: 18px; height: 18px; }
.gd-dserr b{ display: block; font-weight: 600; color: rgb(16, 16, 20); }
.gd-q{ display: flex; align-items: center; gap: 10px; }
.gd-q input{ flex: 1 1 auto; min-width: 0px; border: 0px; outline: 0px; background: transparent; font-family: inherit; font-size: 15px; color: rgb(16, 16, 20); }
.gd-q input::placeholder{ color: rgb(163, 162, 170); }
.gd-q .gd-q__x{ flex: 0 0 auto; width: 22px; height: 22px; border: 0px; border-radius: 50%; background: rgb(228, 227, 232); color: rgb(110, 109, 117); display: none; place-items: center; padding: 0px; cursor: pointer; }
.gd-q.has .gd-q__x{ display: grid; }
.gd-q__x svg{ width: 11px; height: 11px; }
.gd-ql{ font-size: 12px; color: rgb(139, 138, 146); padding: 12px 20px 2px; }
.gd-ql b{ color: rgb(16, 16, 20); font-weight: 600; }
.gd-qe{ text-align: center; padding: 26px 16px 10px; }
.gd-qe b{ display: block; font-size: 16px; font-weight: 600; letter-spacing: -0.3px; }
.gd-qe p{ margin: 6px 0px 0px; font-size: 13px; line-height: 1.45; color: rgb(139, 138, 146); }
.gd-qe button{ margin-top: 16px; height: 44px; padding: 0px 20px; border: 0px; border-radius: 100px; background: rgb(16, 16, 20); color: rgb(255, 255, 255); font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.gd-skrow{ display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid rgba(12, 14, 18, 0.05); }
.gd-skrow div{ flex: 1 1 auto; }
.gd-skrow .gd-sk__l + .gd-sk__l{ margin-top: 8px; width: 55%; }
.gd-skrow i{ width: 30px; height: 30px; border-radius: 50%; background: rgb(241, 239, 244); }
.bd-sh__row mark{ background: none; color: inherit; text-decoration: underline 2px rgba(16, 16, 20, 0.25); text-underline-offset: 3px; }
.gd-w .pf-w__ring{ --c: #5aa0f2; }
.gd-w__ok{ display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 5px 11px; border-radius: 100px; background: rgb(255, 255, 255); font-size: 12.5px; font-weight: 600; color: rgb(16, 16, 20); }
.gd-w__ok svg{ width: 14px; height: 14px; }
.gd-w__last{ margin-top: 10px; font-size: 12.5px; color: rgb(142, 142, 147); }
.gd-w__hist{ display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding: 14px 16px; border-radius: 18px; background: rgb(255, 255, 255); font-size: 14px; font-weight: 600; color: rgb(17, 17, 17); cursor: pointer; }
.gd-w__hist small{ font-weight: 500; color: rgb(142, 142, 147); font-size: 12.5px; }
.gd-w__hist .chev svg{ width: 16px; height: 16px; color: rgb(199, 199, 204); }
.pf-w__ring.gd-full{ background: conic-gradient(rgb(90, 160, 242) 100%, rgb(232, 240, 251) 0deg); }
.gd-stp{ text-align: center; padding: 4px 0px 2px; }
.gd-stp b{ display: block; font-size: 44px; font-weight: 700; letter-spacing: -1.6px; font-variant-numeric: tabular-nums; }
.gd-stp b.e{ color: rgb(199, 199, 204); }
.gd-stp small{ display: block; font-size: 13px; color: rgb(142, 142, 147); margin-top: 2px; }
.gd-stp__bar{ height: 6px; border-radius: 4px; background: rgb(229, 229, 234); margin: 12px 20px 0px; overflow: hidden; }
.gd-stp__bar i{ display: block; height: 100%; border-radius: 4px; background: rgb(16, 16, 20); }
.gd-cl{ display: flex; align-items: center; gap: 10px; margin: 0px 16px; padding: 10px 0px 12px; border-top: 1px solid rgba(16, 16, 20, 0.06); cursor: pointer; }
.gd-cl img{ flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.gd-cl span{ flex: 1 1 auto; min-width: 0px; font-size: 12.5px; line-height: 1.35; color: rgb(95, 94, 102); }
.gd-cl span b{ font-weight: 600; color: rgb(16, 16, 20); }
.gd-cl.wait span{ color: rgb(139, 138, 146); }
.gd-cl .chev{ flex: 0 0 auto; width: 14px; height: 14px; color: rgb(199, 198, 204); }
.gd-cl .chev svg{ width: 14px; height: 14px; }
.gd-cl.wait img{ opacity: 0.75; }
.gd-cw__row{ display: flex; gap: 12px; align-items: flex-start; }
.gd-cw__row img{ flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.gd-cw__who b{ display: block; font-size: 14.5px; font-weight: 600; letter-spacing: -0.2px; }
.gd-cw__who small{ display: block; font-size: 12px; color: rgb(139, 138, 146); margin-top: 1px; }
.gd-cw__t{ margin: 10px 0px 0px; font-size: 15px; line-height: 1.45; letter-spacing: -0.2px; color: rgb(16, 16, 20); }
.gd-cw__wait{ display: inline-flex; gap: 3px; margin-left: 6px; vertical-align: middle; }
.gd-cw__wait i{ width: 4px; height: 4px; border-radius: 50%; background: rgb(139, 138, 146); animation: 1.2s ease-in-out 0s infinite normal none running gdDot; }
.gd-cw__wait i:nth-child(2){ animation-delay: 0.15s; }
.gd-cw__wait i:nth-child(3){ animation-delay: 0.3s; }
.gd-rev__a{ display: flex; align-items: center; gap: 10px; }
.gd-rev__lr{ margin: 12px 0px -2px; }
.gd-rev__lr .rv__lbl{ display: inline-flex; }
.gd-rev__a img{ flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
#adBody > .ad__err{ margin: 16px 20px 0px; background: rgb(246, 245, 248); color: rgb(95, 94, 102); display: flex; gap: 10px; align-items: flex-start; }
#adBody > .ad__err b{ color: rgb(16, 16, 20); }
#adBody > .ad__err .gd-erri{ flex: 0 0 auto; width: 18px; height: 18px; color: rgb(16, 16, 20); }
#adBody > .ad__err .gd-erri svg{ width: 18px; height: 18px; }
.ad__sec--list .gd-in{ margin: 10px 20px 2px; }
#ad.gd-ro #adTopR,#ad.gd-ro [data-it-add],#ad.gd-ro [data-meta] .chev,#ad.gd-ro .ad__it .chev{ display: none !important; }
#ad.gd-ro [data-it],#ad.gd-ro [data-meta]{ cursor: default; }
.gd-robar{ display: flex; gap: 10px; align-items: flex-start; margin: 16px 20px 0px; padding: 12px 14px; border-radius: 16px; background: rgb(246, 245, 248); font-size: 13px; line-height: 1.4; color: rgb(95, 94, 102); }
.gd-robar i{ flex: 0 0 auto; width: 18px; height: 18px; color: rgb(16, 16, 20); }
.gd-robar i svg{ width: 18px; height: 18px; }
.gd-robar b{ display: block; color: rgb(16, 16, 20); font-weight: 600; }
.gd-rpp{ display: flex; gap: 8px; align-items: flex-start; margin: -2px 2px 12px; font-size: 12.5px; line-height: 1.4; color: rgba(255, 255, 255, 0.7); }
.gd-rpp i{ flex: 0 0 auto; width: 14px; height: 14px; margin-top: 1px; }
.gd-rpp i svg{ width: 14px; height: 14px; }
.gd-fixh{ font-size: 12.5px; line-height: 1.45; color: rgb(139, 138, 146); margin: 2px 2px 10px; }
.gd-fixh--b{ margin: 10px 2px 0px; }
.ds-in{ background: rgb(251, 251, 252); box-shadow: rgba(12, 14, 18, 0.07) 0px 0px 0px 1px inset; }
.ds-in:focus{ box-shadow: rgb(255, 197, 220) 0px 0px 0px 1.5px inset; }
.gd-nmask{ display: block; width: 100%; margin-top: 12px; padding: 6px 0px; border: 0px; background: none; font-family: inherit; font-size: 13.5px; font-weight: 600; color: rgb(16, 16, 20); text-align: center; cursor: pointer; }
.gd-nmask span{ color: rgb(139, 138, 146); font-weight: 500; }
.pre-num,.xs-sheet .pre-num{ background: rgb(255, 255, 255); box-shadow: rgba(12, 14, 18, 0.06) 0px 0px 0px 1px inset; }
.pre-num:focus-within,.xs-sheet .pre-num:focus-within{ box-shadow: rgb(255, 197, 220) 0px 0px 0px 1.5px inset; }
.pf-w__ch button.on,.ds-quick span.on{ background: rgb(29, 2, 12); color: rgb(255, 255, 255); box-shadow: none; }
.xs-sheet .pf-w__ch button:not(.on){ background: rgb(243, 243, 245); }
.ad__q__c span.on{ background: rgb(255, 255, 255); color: rgb(29, 2, 12); box-shadow: none; }
.pre-num{ box-shadow: rgba(12, 14, 18, 0.06) 0px 0px 0px 1px inset; }
.xs-sheet .pre-num{ background: rgb(251, 251, 252); box-shadow: rgba(12, 14, 18, 0.07) 0px 0px 0px 1px inset; }
.pre-num:focus-within,.xs-sheet .pre-num:focus-within{ box-shadow: rgb(255, 197, 220) 0px 0px 0px 1.5px inset; }
.gd-q:focus-within{ box-shadow: rgb(255, 197, 220) 0px 0px 0px 1.5px inset; }
.pre-bar__h{ display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 12px; line-height: 1.4; color: rgba(12, 14, 18, 0.38); margin-top: 12px; }
.pre-bar__h:empty{ display: none; }

/* ---- src/styles/40-home-plan.css ---- */
/* СГЕНЕРИРОВАНО design-preview/miniapp-v3-dev/tools/extract_css.js из прототипа nav-v2
   (состояния: home_plan.js). Правила взяты в порядке каскада прототипа; не правьте
   руками — поправка поверх живёт в файлах стилей с бОльшим номером. */
.stack{ display: flex; flex-direction: column; gap: 12px; }
@keyframes kbOn { 
  0% { background: rgb(228, 228, 231); transform: scaleY(0.6); }
  100% { background: var(--prot); transform: scaleY(1); }
}
.score__w{ font-size: 11.5px; font-weight: 600; letter-spacing: 0px; text-transform: none; margin-left: 8px; }
.score__w.q3{ color: var(--ok); }
.dark{ border-radius: 30px; padding: 22px; background: linear-gradient(150deg, rgb(23, 22, 27) 0%, rgb(37, 34, 44) 100%); color: rgb(255, 255, 255); box-shadow: rgba(20, 16, 26, 0.22) 0px 18px 40px; }
.hm-top{ display: flex; align-items: center; gap: 12px; padding: 4px 20px 12px; }
.hm-av{ width: 44px; height: 44px; border-radius: 14px; background: rgb(110, 110, 216); color: rgb(255, 255, 255); font-size: 15px; font-weight: 700; display: grid; place-items: center; letter-spacing: -0.3px; }
.hm-hi{ flex: 1 1 auto; min-width: 0px; }
.hm-date{ font-size: 12.5px; color: rgb(125, 124, 133); }
.hm-name{ font-size: 18px; letter-spacing: -0.4px; margin-top: 2px; }
.hm-name b{ font-weight: 600; }
.hm-chat{ position: relative; width: 44px; height: 44px; border-radius: 50%; background: rgb(255, 255, 255); box-shadow: rgba(20, 4, 12, 0.08) 0px 8px 24px; display: grid; place-items: center; color: rgb(29, 2, 12); }
.hm-chat svg{ width: 20px; height: 20px; }
.hm-chat span{ position: absolute; right: -4px; top: -4px; min-width: 22px; height: 22px; border-radius: 11px; background: rgb(255, 59, 48); color: rgb(255, 255, 255); font-size: 11px; font-weight: 700; display: grid; place-items: center; padding: 0px 5px; }
.hm-card{ background: rgb(255, 255, 255); border-radius: 20px; padding: 13px 15px; box-shadow: rgba(20, 4, 12, 0.06) 0px 8px 24px, rgba(12, 14, 18, 0.03) 0px 0px 0px 1px inset; }
.hm-goal{ padding: 14px 16px 16px; }
.hm-goal__h{ display: flex; justify-content: space-between; align-items: baseline; }
.hm-goal__h b{ font-size: 17px; font-weight: 600; letter-spacing: -0.3px; }
.hm-goal__h span{ font-size: 12.5px; color: rgb(125, 124, 133); }
.hm-goal__now{ display: flex; align-items: baseline; justify-content: center; gap: 6px; margin-top: 14px; }
.hm-goal__now b{ font-size: 18px; font-weight: 600; color: rgb(92, 122, 21); }
.hm-goal__now span{ font-size: 11.5px; color: rgb(139, 138, 146); }
.hm-seg{ position: relative; display: flex; gap: 3px; height: 22px; margin-top: 10px; }
.hm-seg i{ flex: 1 1 0px; border-radius: 3px; background: rgb(233, 233, 236); }
.hm-seg i.on{ background: rgb(163, 213, 70); }
.hm-seg::before{ content: ""; position: absolute; left: calc(var(--m,40%) - 5px); top: -9px; border-width: 6px 5px 5px; border-style: solid; border-color: rgb(92, 122, 21) transparent transparent; border-image: initial; }
.hm-goal__se{ display: flex; justify-content: space-between; font-size: 11.5px; color: rgb(139, 138, 146); margin-top: 8px; }
.hm-goal__se b{ color: rgb(16, 16, 20); font-weight: 600; font-size: 13px; }
.hm-track{ position: relative; height: 6px; border-radius: 100px; background: rgb(233, 233, 236); margin-top: 16px; }
.hm-track i{ position: absolute; left: 0px; top: 0px; bottom: 0px; border-radius: 100px; background: rgb(182, 181, 189); width: var(--w); }
.hm-track::after{ content: ""; position: absolute; left: calc(var(--w) - 5px); top: 9px; border-width: 5px 5px 6px; border-style: solid; border-color: transparent transparent rgb(182, 181, 189); border-image: initial; }
.hm-goal__dates{ display: flex; justify-content: space-between; font-size: 11.5px; color: rgb(139, 138, 146); margin-top: 14px; }
.hm-goal__dates b{ font-weight: 600; color: rgb(63, 62, 70); }
.hm-ok{ display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13.5px; font-weight: 600; color: rgb(92, 122, 21); }
.hm-ok span{ color: rgb(139, 138, 146); font-weight: 500; }
.hm-ok svg{ width: 16px; height: 16px; }
.hm-goal__s{ font-size: 12.5px; color: rgb(125, 124, 133); line-height: 1.45; margin-top: 8px; }
.hm-meet{ display: flex; align-items: center; gap: 12px; }
.hm-meet__av{ width: 56px; height: 56px; border-radius: 50%; flex: 0 0 auto; background: radial-gradient(60% 60% at 40% 35%, rgb(245, 215, 198) 0%, rgb(201, 133, 114) 55%, rgb(122, 61, 58) 100%); }
.hm-meet__b{ flex: 1 1 auto; min-width: 0px; }
.hm-meet__l{ font-size: 12.5px; color: rgb(139, 138, 146); display: flex; align-items: center; gap: 8px; }
.hm-meet__l em{ font-style: normal; font-size: 10.5px; background: rgb(241, 241, 243); border-radius: 100px; padding: 3px 8px; color: rgb(95, 94, 102); }
.hm-meet__t{ font-size: 16.5px; font-weight: 600; letter-spacing: -0.3px; margin-top: 3px; }
.hm-meet__s{ font-size: 12.5px; color: rgb(139, 138, 146); margin-top: 3px; }
.hm-dark{ position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; border-radius: 20px; padding: 16px; background: linear-gradient(150deg, rgb(44, 44, 48) 0%, rgb(28, 28, 31) 100%); color: rgb(255, 255, 255); box-shadow: rgba(12, 12, 14, 0.22) 0px 12px 28px; }
.hm-dark::after{ content: ""; position: absolute; right: -40px; top: -30px; width: 180px; height: 180px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.08); box-shadow: rgba(255, 255, 255, 0.03) 0px 0px 0px 30px; }
.hm-dark__ic{ width: 48px; height: 48px; border-radius: 14px; flex: 0 0 auto; background: rgba(255, 255, 255, 0.1); display: grid; place-items: center; }
.hm-dark__ic svg{ width: 22px; height: 22px; }
.hm-dark__b{ flex: 1 1 auto; min-width: 0px; position: relative; z-index: 1; }
.hm-dark__l{ font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); }
.hm-dark__t{ font-size: 17px; font-weight: 600; letter-spacing: -0.3px; margin-top: 4px; }
.hm-dark__s{ font-size: 12.5px; color: rgba(255, 255, 255, 0.6); margin-top: 3px; line-height: 1.4; }
.hm-sheet{ background: rgb(255, 255, 255); border-radius: 32px 32px 0px 0px; padding: 10px 20px 20px; box-shadow: rgba(20, 4, 12, 0.06) 0px -6px 30px; margin: 8px -20px 0px; }
.hm-grab{ width: 36px; height: 4px; border-radius: 100px; background: rgb(228, 228, 231); margin: 0px auto 12px; }
.hm-sheet__h{ display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 12px; }
.hm-sheet__h h2{ margin: 0px; font-size: 17px; font-weight: 600; letter-spacing: -0.3px; text-align: center; }
.hm-sheet__h p{ margin: 3px 0px 0px; font-size: 12.5px; color: rgb(139, 138, 146); text-align: center; }
.hm-nb{ width: 40px; height: 40px; border-radius: 50%; border: 0px; background: rgb(255, 255, 255); box-shadow: rgba(12, 14, 18, 0.08) 0px 0px 0px 1px inset; display: grid; place-items: center; flex: 0 0 auto; color: rgb(63, 62, 70); }
.hm-nb .chev{ color: rgb(63, 62, 70); }
.hm-sh{ font-size: 16px; font-weight: 500; padding: 6px 2px 4px; margin-top: 6px; }
.hm-kb{ display: flex; align-items: center; gap: 12px; background: rgb(255, 255, 255); border-radius: 20px; padding: 12px 14px; box-shadow: rgba(20, 4, 12, 0.06) 0px 8px 24px, rgba(12, 14, 18, 0.08) 0px 0px 0px 0.5px inset; margin-top: 6px; }
.hm-kb__l{ flex: 1 1 auto; min-width: 0px; }
.hm-kb__k{ display: flex; align-items: baseline; gap: 6px; }
.hm-kb__k b{ font-size: 20px; font-weight: 800; letter-spacing: -0.4px; line-height: 1; font-variant-numeric: tabular-nums; }
.hm-kb__k span{ font-size: 12px; color: rgb(139, 138, 146); }
.hm-kb__bar.kbar{ height: 14px; gap: 3px; margin: 9px 0px 7px; }
.hm-kb__bar.kbar i{ flex: 1 1 0px; border-radius: 3px; background: rgb(233, 233, 236); }
.hm-kb__bar.kbar i.on{ background: rgb(163, 213, 70); }
.hm-kb__sub{ font-size: 12px; color: rgb(139, 138, 146); line-height: 1.35; }
.hm-kb__sc{ display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 0 0 auto; }
.hm-kb__sc .score__w{ margin: 0px; font-size: 10.5px; }
.hm-mlist{ margin-top: 4px; }
.hm-mrow{ display: flex; align-items: center; gap: 12px; padding: 12px 0px; border-bottom: 1px solid rgba(12, 14, 18, 0.06); }
.hm-mrow:last-child{ border-bottom: 0px; }
.hm-mic{ width: 44px; height: 44px; border-radius: 12px; flex: 0 0 auto; background: rgba(153, 160, 174, 0.12); color: rgb(77, 71, 63); display: grid; place-items: center; }
.hm-mic svg{ width: 20px; height: 20px; }
.hm-mb{ flex: 1 1 auto; min-width: 0px; display: flex; flex-direction: column; }
.hm-mb b{ font-size: 15.5px; font-weight: 500; letter-spacing: -0.2px; }
.hm-mb small{ font-size: 12.5px; color: rgb(139, 138, 146); margin-top: 3px; }
.hm-add{ width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; color: rgb(29, 2, 12); box-shadow: rgba(12, 14, 18, 0.1) 0px 0px 0px 1.4px inset; }
.hm-add svg{ width: 16px; height: 16px; }
.hm-done{ width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; color: var(--ok); background: var(--ok-bg); }
.hm-done.q2{ color: rgb(125, 98, 0); background: rgb(255, 241, 191); }
.hm-done svg{ width: 16px; height: 16px; }
.hm-div{ height: 1px; background: rgba(12, 14, 18, 0.06); margin: 10px -20px; }
.hm-row{ display: flex; align-items: center; gap: 14px; padding: 6px 0px; }
.hm-media{ width: 64px; height: 64px; border-radius: 16px; flex: 0 0 auto; background: rgba(153, 160, 174, 0.12); box-shadow: rgba(12, 14, 18, 0.04) 0px 0px 0px 1px inset; display: grid; place-items: center; color: rgb(224, 112, 74); }
.hm-media svg{ width: 26px; height: 26px; }
.hm-media.b{ color: rgb(90, 160, 242); }
.hm-media.k{ color: rgb(16, 16, 20); }
.hm-note{ display: flex; align-items: flex-start; gap: 10px; background: rgb(246, 246, 248); border-radius: 16px; padding: 12px 14px; font-size: 14px; line-height: 1.4; }
.hm-note b{ font-weight: 600; }
.hm-note svg{ width: 16px; height: 16px; color: rgb(142, 142, 147); flex: 0 0 auto; margin-top: 2px; }
.hm-plan{ position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; gap: 12px; border-radius: 22px; padding: 17px 16px 16px; color: rgb(255, 255, 255); background: radial-gradient(120% 125% at 9% 5%, rgb(163, 144, 217) 0%, rgba(163, 144, 217, 0) 50%), radial-gradient(120% 120% at 92% 3%, rgb(136, 114, 203) 0%, rgba(136, 114, 203, 0) 46%), radial-gradient(130% 130% at 83% 106%, rgb(76, 55, 145) 0%, rgba(76, 55, 145, 0) 55%), radial-gradient(120% 120% at 3% 104%, rgb(106, 79, 190) 0%, rgba(106, 79, 190, 0) 52%), linear-gradient(135deg, rgb(112, 86, 193), rgb(76, 55, 145)); box-shadow: rgba(91, 65, 173, 0.3) 0px 16px 36px; }
.hm-plan::before{ content: ""; position: absolute; inset: 0px; z-index: 1; opacity: 0.42; mix-blend-mode: overlay; pointer-events: none; background-size: 160px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>"); }
.hm-plan__b,.hm-plan > .chev{ position: relative; z-index: 2; }
.hm-plan__n{ position: absolute; right: 6px; bottom: -34px; font-size: 124px; font-weight: 800; letter-spacing: -6px; line-height: 0.8; color: rgba(255, 255, 255, 0.12); z-index: 0; pointer-events: none; font-variant-numeric: tabular-nums; }
.hm-plan__b{ flex: 1 1 auto; min-width: 0px; }
.hm-plan__k{ font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.78); }
.hm-plan__t{ font-size: 17px; font-weight: 600; letter-spacing: -0.3px; margin-top: 4px; }
.hm-plan__s{ font-size: 12.5px; color: rgba(255, 255, 255, 0.8); margin-top: 3px; line-height: 1.35; }
.hm-plan__bar{ height: 5px; border-radius: 100px; background: rgba(255, 255, 255, 0.22); margin-top: 11px; max-width: 160px; overflow: hidden; }
.hm-plan__bar i{ display: block; height: 100%; width: 0px; border-radius: 100px; background: rgb(255, 255, 255); transition: width 1s var(--ease) .4s; }
.is-in .hm-plan__bar i{ width: var(--w); }
.hm-body{ flex: 1 1 auto; padding: 0px 20px 110px; }
@keyframes spin { 
  100% { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce){
.stack > *{ opacity: 1; transform: none; filter: none; }
}
.rf-scr > .hm-body{ padding-bottom: 0px; }
.nv-prof{ padding: 0px 20px; }
.nv-list{ background: rgb(255, 255, 255); border-radius: 20px; box-shadow: rgba(20, 4, 12, 0.06) 0px 8px 24px, rgba(12, 14, 18, 0.03) 0px 0px 0px 1px inset; overflow: hidden; margin-top: 6px; }
.nv-li .hm-mb b{ font-size: 14.5px; font-weight: 500; letter-spacing: -0.2px; }
.nv-li .hm-mb small{ font-size: 12px; color: rgb(139, 138, 146); margin-top: 2px; }
.phero__chip{ display: inline-flex; align-items: center; gap: 7px; margin-top: 16px; background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: rgba(255, 255, 255, 0.32) 0px 0px 0px 1px inset; color: rgb(255, 255, 255); font-size: 12px; font-weight: 600; padding: 8px 13px; border-radius: 9999px; }
.phero__chip svg{ width: 14px; height: 14px; }
.phero__prog{ display: flex; align-items: center; gap: 11px; margin-top: 17px; }
.phero__bar{ flex: 1 1 auto; height: 6px; border-radius: 100px; background: rgba(255, 255, 255, 0.22); overflow: hidden; box-shadow: rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset; }
.phero__bar i{ display: block; height: 100%; width: 0px; border-radius: 100px; background: rgb(255, 255, 255); box-shadow: rgba(255, 255, 255, 0.6) 0px 0px 12px; transition: width 1.1s var(--ease) .3s; }
.is-in .phero__bar i{ width: var(--w); }
.phero__plbl{ flex: 0 0 auto; font-size: 11.5px; font-weight: 600; color: rgba(255, 255, 255, 0.92); }
.pl3-sh{ display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 22px 2px 0px; font-size: 17px; font-weight: 600; letter-spacing: -0.4px; }
.pl3-sh span{ font-size: 12.5px; font-weight: 500; color: rgb(139, 138, 146); }
.pl3-sh a{ font-size: 12.5px; font-weight: 600; color: rgb(17, 17, 17); cursor: pointer; }
.pl3-shelf{ display: flex; gap: 10px; margin: 12px -20px 0px; padding: 0px 20px 6px; overflow-x: auto; scroll-snap-type: x; scroll-padding: 0px 20px; scrollbar-width: none; }
.pl3-shelf::-webkit-scrollbar{ display: none; }
.pl3-tile__ic{ width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; margin-bottom: 10px; }
.pl3-tile__ic svg{ width: 16px; height: 16px; }
.t-amber{ background: rgb(255, 241, 214); color: rgb(176, 106, 0); }
.t-plum{ background: rgb(239, 228, 246); color: rgb(122, 61, 154); }
.t-green{ background: rgb(230, 246, 232); color: rgb(47, 138, 74); }
.t-indigo{ background: rgb(230, 232, 251); color: rgb(75, 82, 200); }
.t-pink{ background: rgba(153, 160, 174, 0.14); color: rgb(95, 94, 102); }
.nv-sheet--ag{ padding-bottom: 28px; z-index: 27; }
.pl3-ag__h{ display: flex; align-items: center; gap: 12px; }
.pl3-ag__h .pl3-tile__ic{ width: 44px; height: 44px; border-radius: 14px; margin: 0px; }
.pl3-ag__h .pl3-tile__ic svg{ width: 20px; height: 20px; }
.pl3-ag__k{ font-size: 12.5px; color: rgb(139, 138, 146); }
.pl3-ag__v{ font-size: 18px; font-weight: 600; letter-spacing: -0.4px; margin-top: 2px; }
.pl3-ag__l{ font-size: 10.5px; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; color: rgb(163, 162, 170); margin-top: 18px; }
.pl3-ag p{ margin: 6px 0px 0px; font-size: 15px; line-height: 1.5; color: rgb(42, 40, 48); }
.pl3-ag ul{ margin: 6px 0px 0px; padding-left: 18px; font-size: 14.5px; line-height: 1.55; color: rgb(42, 40, 48); }
.pl4-hero__num{ position: absolute; right: -8px; top: 78px; z-index: 0; font-size: 260px; font-weight: 800; line-height: 0.8; letter-spacing: -12px; color: rgba(255, 255, 255, 0.1); pointer-events: none; font-variant-numeric: tabular-nums; transform: translateY(calc(var(--sy,0)*.12px)); }
.pl4-hero__fg{ position: absolute; left: 22px; right: 22px; bottom: 24px; z-index: 2; transform: translateY(calc(var(--sy,0)*.3px)); opacity: calc(1 - var(--sy,0)/230); }
.pl4-hero__k{ font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.8); }
.pl4-hero__t{ font-size: 34px; font-weight: 700; letter-spacing: -1.1px; line-height: 1.02; margin-top: 8px; max-width: 300px; }
.pl4-hero__d{ font-size: 14.5px; line-height: 1.45; color: rgba(255, 255, 255, 0.86); margin-top: 10px; max-width: 290px; }
.pl4-hero__row{ display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.pl4-hero__row .phero__prog{ margin: 0px; flex: 1 1 auto; min-width: 0px; }
@keyframes pl4in { 
  100% { opacity: 1; transform: none; }
}
.pl4-coach{ display: flex; gap: 14px; align-items: flex-start; background: rgb(255, 255, 255); border-radius: 24px; padding: 18px 18px 16px; box-shadow: rgba(20, 4, 12, 0.07) 0px 10px 28px, rgba(12, 14, 18, 0.03) 0px 0px 0px 1px inset; }
.pl4-coach__b{ flex: 1 1 auto; min-width: 0px; }
.pl4-coach__who{ font-size: 14.5px; font-weight: 600; letter-spacing: -0.2px; }
.pl4-coach__who span{ font-weight: 500; color: rgb(139, 138, 146); }
.pl4-coach p{ margin: 8px 0px 0px; font-size: 15.5px; line-height: 1.5; color: rgb(42, 40, 48); }
.pl4-coach p b{ font-weight: 600; color: var(--ink); }
.pl4-shelf .pl4-mat{ flex: 0 0 164px; scroll-snap-align: start; cursor: pointer; }
.pl4-cov{ position: relative; height: 110px; border-radius: 20px; overflow: hidden; color: rgb(255, 255, 255); box-shadow: rgba(20, 4, 12, 0.12) 0px 12px 26px; background-size: cover; background-position: center center; }
.pl4-cov--ph::after{ content: ""; position: absolute; inset: 0px; background: linear-gradient(rgba(12, 12, 14, 0.05) 30%, rgba(12, 12, 14, 0.62) 100%); }
.pl4-cov em{ position: absolute; left: 10px; top: 10px; z-index: 2; font-style: normal; font-size: 10.5px; font-weight: 600; background: rgb(255, 255, 255); color: rgb(58, 58, 60); border-radius: 100px; padding: 3px 7px; }
.pl4-cov__t{ position: absolute; left: 12px; bottom: 10px; z-index: 2; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.9); }
.pl4-cov--ck{ background: radial-gradient(120% 120% at 0% 0%, rgb(200, 182, 242) 0%, rgb(123, 97, 201) 55%, rgb(75, 58, 148) 100%); }
.pl4-cov__n{ position: absolute; right: 14px; top: 8px; font-size: 46px; font-weight: 800; letter-spacing: -2px; line-height: 1; color: rgb(255, 255, 255); }
.pl4-cov__n i{ font-style: normal; font-size: 18px; font-weight: 600; color: rgba(255, 255, 255, 0.6); letter-spacing: 0px; }
.pl4-cov--pr{ background: linear-gradient(150deg, rgb(44, 44, 48) 0%, rgb(28, 28, 31) 100%); }
.pl4-cov__sl{ position: absolute; left: 14px; top: 16px; display: flex; flex-direction: column; gap: 7px; }
.pl4-cov__sl i{ display: block; height: 6px; border-radius: 100px; background: rgba(255, 255, 255, 0.35); width: 84px; }
.pl4-cov__sl i:nth-child(2){ width: 60px; background: rgba(255, 255, 255, 0.22); }
.pl4-cov__sl i:nth-child(3){ width: 70px; background: rgba(255, 255, 255, 0.14); }
.pl4-mat b{ display: block; font-size: 14px; font-weight: 600; letter-spacing: -0.2px; line-height: 1.25; margin-top: 10px; }
.pl4-mat small{ display: block; font-size: 11.5px; color: rgb(139, 138, 146); margin-top: 3px; }
.pl4-dots{ display: flex; gap: 4px; margin-top: 12px; }
.pl4-dots i{ flex: 1 1 0px; height: 6px; border-radius: 100px; background: rgb(236, 236, 239); }
.pl4-dots i.g{ background: var(--s3); }
.pl4-dots i.y{ background: var(--s2); }
.pl4-dots i.o{ background: var(--s1); }
.pl4-wk--a{ color: rgb(17, 17, 17); font-weight: 600; margin-top: 12px; }
.pl4-days span.d{ background: rgb(239, 228, 246); color: rgb(122, 61, 154); }
.pl4-hero__fg > *{ opacity: 0; transform: translateY(12px); }
.is-in .pl4-hero__fg > *{ animation: pl4in .7s var(--ease) both; }
.is-in .pl4-hero__fg > :nth-child(1){ animation-delay: 0.05s; }
.is-in .pl4-hero__fg > :nth-child(2){ animation-delay: 0.13s; }
.is-in .pl4-hero__fg > :nth-child(3){ animation-delay: 0.21s; }
.is-in .pl4-hero__fg > :nth-child(4){ animation-delay: 0.3s; }
.is-in .pl4-hero__num{ animation: pl4num 1.1s var(--ease) both; }
@keyframes pl4num { 
  0% { opacity: 0; transform: translate(24px, 10px) scale(0.94); }
  100% { opacity: 1; transform: none; }
}
.t-grey{ background: rgba(153, 160, 174, 0.14); color: rgb(95, 94, 102); }
.lb-filters{ display: flex; gap: 8px; margin: 12px -20px 0px; padding: 0px 20px; overflow-x: auto; scrollbar-width: none; }
.lb-filters::-webkit-scrollbar{ display: none; }
.lb-filters span{ flex: 0 0 auto; height: 34px; padding: 0px 14px; border-radius: 100px; background: rgb(255, 255, 255); box-shadow: rgba(12, 14, 18, 0.08) 0px 0px 0px 1px inset; font-size: 13px; font-weight: 600; color: rgb(95, 94, 102); display: grid; place-items: center; }
.lb-filters span.on{ background: rgb(16, 16, 20); color: rgb(255, 255, 255); box-shadow: none; }
.lb-week{ display: flex; align-items: center; gap: 8px; margin: 22px 2px 0px; font-size: 15.5px; font-weight: 600; letter-spacing: -0.3px; }
.lb-week b{ font-weight: 600; }
.lb-now{ font-size: 11px; font-weight: 600; color: rgb(58, 58, 60); background: rgb(241, 241, 243); border-radius: 100px; padding: 3px 8px; }
.lb-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px 10px; margin-top: 12px; }
.lb-card{ cursor: pointer; }
.lb-card .pl4-cov{ height: 100px; }
.lb-card b{ display: block; font-size: 13.5px; font-weight: 600; letter-spacing: -0.2px; line-height: 1.25; margin-top: 9px; }
.lb-card small{ display: block; font-size: 11.5px; color: rgb(139, 138, 146); margin-top: 3px; }
.pl4-cov--vd{ background: linear-gradient(150deg, rgb(42, 30, 59) 0%, rgb(74, 42, 106) 100%); }
.lb-play{ position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0px 0px -20px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); box-shadow: rgba(255, 255, 255, 0.35) 0px 0px 0px 1px inset; display: grid; place-items: center; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.lb-play svg{ width: 18px; height: 18px; }
.lb-lock{ display: flex; align-items: center; gap: 10px; margin-top: 14px; background: rgb(234, 246, 212); color: rgb(78, 107, 20); border-radius: 16px; padding: 12px 14px; font-size: 13px; line-height: 1.4; }
.lb-lock svg{ width: 16px; height: 16px; flex: 0 0 auto; }
.ag-week{ margin-top: 16px; }
.ag-dl{ display: flex; gap: 4px; margin-top: 6px; }
.ag-dl span{ flex: 1 1 0px; text-align: center; font-size: 10.5px; color: rgb(163, 162, 170); }
.ag-week small{ display: block; font-size: 12px; color: rgb(139, 138, 146); margin-top: 8px; }
.ag-days span{ height: 30px; font-size: 12px; }
.pl4-hero__glow{ position: absolute; inset: -30%; z-index: 0; pointer-events: none; background: radial-gradient(38% 38% at 30% 32%, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 60%), radial-gradient(34% 34% at 76% 72%, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 60%); animation: 14s ease-in-out 0s infinite alternate none running heroGlow; }
@keyframes heroGlow { 
  0% { transform: translate(-4%, -3%) rotate(0deg); }
  100% { transform: translate(4%, 4%) rotate(8deg); }
}
.pl4-hero__title{ font-size: 15.5px; font-weight: 600; letter-spacing: -0.3px; color: rgb(255, 255, 255); text-shadow: rgba(0, 0, 0, 0.25) 0px 1px 8px; }
.pl4-gb--ghost{ visibility: hidden; }
.rc{ position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; min-height: 158px; border-radius: 26px; margin-top: 22px; padding: 20px; color: rgb(255, 255, 255); background: radial-gradient(120% 110% at 100% 0%, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 55%), linear-gradient(150deg, rgb(38, 38, 42) 0%, rgb(20, 20, 22) 100%); box-shadow: rgba(12, 12, 14, 0.32) 0px 20px 44px; cursor: pointer; transition: transform 0.15s; }
.rc:active{ transform: scale(0.985); }
.rc .phero__grain{ opacity: 0.26; }
.rc__plate{ position: absolute; right: -46px; top: 50%; width: 200px; height: 200px; margin-top: -100px; border-radius: 50%; object-fit: cover; z-index: 1; box-shadow: rgba(0, 0, 0, 0.5) 0px 22px 44px, rgba(255, 255, 255, 0.05) 0px 0px 0px 7px; }
.rc__b{ position: relative; z-index: 2; max-width: 196px; }
.rc__k{ font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }
.rc__t{ font-size: 23px; font-weight: 600; letter-spacing: -0.6px; line-height: 1.1; margin-top: 5px; }
.rc__s{ font-size: 12.5px; color: rgba(255, 255, 255, 0.72); margin-top: 6px; line-height: 1.35; }
.rc__go{ display: inline-flex; align-items: center; margin-top: 12px; height: 32px; padding: 0px 13px; border-radius: 100px; background: rgba(255, 255, 255, 0.12); box-shadow: rgba(255, 255, 255, 0.28) 0px 0px 0px 1px inset; font-size: 12.5px; font-weight: 600; }
.hm-kb__nk{ display: none; font-size: 12.5px; line-height: 1.35; color: rgb(139, 138, 146); }
.hm-kb__nk b{ display: block; font-size: 15px; font-weight: 600; letter-spacing: -0.2px; color: rgb(16, 16, 20); margin-bottom: 3px; }
@keyframes spin { 
  100% { transform: rotate(360deg); }
}
.hm-spin{ width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto; border-width: 2.5px; border-style: solid; border-color: rgb(29, 2, 12) rgb(241, 241, 243) rgb(241, 241, 243); border-image: initial; animation: 0.9s linear 0s infinite normal none running spin; }
.ct{ position: relative; overflow: hidden; isolation: isolate; border-radius: 26px; margin-top: 22px; color: rgb(255, 255, 255); background: radial-gradient(120% 110% at 100% 0%, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 55%), linear-gradient(150deg, rgb(38, 38, 42) 0%, rgb(20, 20, 22) 100%); box-shadow: rgba(12, 12, 14, 0.32) 0px 20px 44px; }
.ct .phero__grain{ opacity: 0.26; }
.ct__in{ position: relative; z-index: 2; padding: 20px 20px 18px; }
.ct__h{ display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.ct__title{ font-size: 20px; font-weight: 600; letter-spacing: -0.5px; }
.ct__k{ font-size: 10.5px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }
.ct__row{ display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 15px 0px; border-top: 1px solid rgba(255, 255, 255, 0.09); cursor: pointer; }
.ct__l{ flex: 1 1 auto; min-width: 0px; }
.ct__t{ display: flex; align-items: center; gap: 8px; font-size: 15.5px; font-weight: 600; letter-spacing: -0.2px; }
.ct__t i{ font-style: normal; font-size: 10.5px; font-weight: 600; color: rgba(255, 255, 255, 0.85); background: rgba(255, 255, 255, 0.1); box-shadow: none; border-radius: 100px; padding: 2px 7px; }
.ct__s{ font-size: 12.5px; color: rgba(255, 255, 255, 0.6); margin-top: 4px; line-height: 1.35; max-width: 190px; }
.ct__v{ flex: 0 0 auto; text-align: right; }
.ct__v b{ display: block; font-size: 22px; font-weight: 700; letter-spacing: -0.7px; font-variant-numeric: tabular-nums; line-height: 1; }
.ct__v span{ display: block; font-size: 11.5px; color: rgba(255, 255, 255, 0.58); margin-top: 4px; }
.ct__wk{ display: flex; gap: 3px; margin: 9px 0px 0px auto; width: 92px; }
.ct__wk i{ flex: 1 1 0px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.16); transform: scaleX(0); transform-origin: left center; transition-property: ; transition-duration: ; transition-timing-function: ; transition-behavior: ; transition-delay: calc(var(--i,0)*55ms + .25s); }
.ct.is-seen .ct__wk i{ transform: none; }
.ct__row{ opacity: 0; transform: translateY(10px); transition: opacity .55s var(--ease),transform .55s var(--ease); }
.ct.is-seen .ct__row{ opacity: 1; transform: none; }
.ct__row:nth-of-type(2){ transition-delay: 0.06s; }
.ct__row:nth-of-type(3){ transition-delay: 0.12s; }
.ct__row:nth-of-type(4){ transition-delay: 0.18s; }
.ct__row:nth-of-type(5){ transition-delay: 0.24s; }
.ct__row:nth-of-type(6){ transition-delay: 0.3s; }
.ct__hint{ font-size: 11.5px; color: rgba(255, 255, 255, 0.42); padding: 10px 0px 2px; text-align: right; }
.ct .ct__foot--quote{ display: none; }
.ct__wk i.o{ background: rgb(163, 213, 70); }
.ct__wk i.n{ background: rgba(163, 213, 70, 0.4); }
.ct__wk i.d{ background: rgb(255, 255, 255); }
.ct__foot{ display: flex; gap: 12px; align-items: flex-start; margin-top: 8px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.09); }
.ct__ph{ width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; box-shadow: rgba(255, 255, 255, 0.22) 0px 0px 0px 2px; }
.ct__q{ font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.86); }
.ct__q b{ display: block; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); font-weight: 600; margin-bottom: 3px; }
.pg-shelf{ display: flex; gap: 10px; margin: 12px -20px 0px; padding: 0px 20px 6px; overflow-x: auto; scroll-snap-type: x; scroll-padding: 0px 20px; scrollbar-width: none; }
.pg-shelf::-webkit-scrollbar{ display: none; }
.pg-w{ position: relative; overflow: hidden; isolation: isolate; flex: 0 0 138px; height: 158px; border-radius: 22px; background: rgb(255, 255, 255); box-shadow: rgba(20, 4, 12, 0.06) 0px 8px 24px, rgba(12, 14, 18, 0.03) 0px 0px 0px 1px inset; padding: 14px 14px 13px; display: flex; flex-direction: column; cursor: pointer; scroll-snap-align: start; transition: transform 0.15s; }
.pg-w:active{ transform: scale(0.97); }
.pg-w .phero__grain{ opacity: 0.35; }
.pg-w__n{ position: relative; z-index: 2; font-size: 28px; font-weight: 700; letter-spacing: -1.2px; line-height: 1; color: rgb(207, 206, 212); font-variant-numeric: tabular-nums; }
.pg-w__t{ position: relative; z-index: 2; font-size: 13.5px; font-weight: 600; letter-spacing: -0.2px; line-height: 1.25; margin-top: auto; }
.pg-w__s{ position: relative; z-index: 2; display: flex; align-items: center; gap: 5px; font-size: 11px; color: rgb(139, 138, 146); margin-top: 6px; }
.pg-w__s svg{ width: 12px; height: 12px; }
.pg-w.done .pg-w__s{ color: rgb(93, 127, 28); }
.pg-w.done .pg-w__n{ color: rgb(185, 184, 191); }
.pg-w.now{ color: rgb(255, 255, 255); box-shadow: rgba(91, 65, 173, 0.28) 0px 14px 30px; }
.pg-w.now .pg-w__n{ color: rgba(255, 255, 255, 0.92); }
.pg-w.now .pg-w__s{ color: rgba(255, 255, 255, 0.82); }
.pg-w.next{ box-shadow: rgba(12, 14, 18, 0.08) 0px 0px 0px 1px inset; background: transparent; }
.pg-w.next .pg-w__n{ color: rgb(220, 219, 225); }
.pg-w.next .pg-w__t{ color: rgb(139, 138, 146); }
.pg-w.lib{ background: linear-gradient(150deg, rgb(44, 44, 48) 0%, rgb(28, 28, 31) 100%); color: rgb(255, 255, 255); }
.pg-w.lib .pg-w__n{ color: rgb(255, 255, 255); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: rgba(255, 255, 255, 0.12); }
.pg-w.lib .pg-w__n svg{ width: 18px; height: 18px; }
.pg-w.lib .pg-w__s{ color: rgba(255, 255, 255, 0.7); }
.rf-app.ag-open .nv-sheet--ag{ transform: none; }
.pre-zoom{ display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 46px; margin-top: 12px; border: 0px; border-radius: 16px; background: rgb(45, 140, 255); color: rgb(255, 255, 255); font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.pre-zoom svg{ width: 18px; height: 18px; }
.hm-av:not(.gh-avph){ font-weight: 600; box-shadow: rgba(255, 255, 255, 0.35) 0px 0px 0px 1px inset; background: linear-gradient(150deg, rgb(236, 236, 239), rgb(214, 214, 219)) !important; color: rgb(58, 58, 60) !important; }
.nv-cf{ position: absolute; inset: 0px; overflow: hidden; pointer-events: none; border-radius: inherit; }
.nv-cf i{ position: absolute; opacity: 0; }
.nv-cf--goal i{ top: -12px; width: 6px; height: 10px; border-radius: 1px; }
.hm-mrow[data-gd],.hm-row[data-gd]{ cursor: pointer; }
.hm-mic svg{ width: 18px; height: 18px; }
.hm-goal.gh-am .hm-goal__now b,.hm-goal.gh-am .hm-ok{ color: var(--warn,#a9691f); }
.hm-goal.gh-am .hm-seg i.on{ background: rgb(240, 194, 124); }
.hm-goal.gh-am .hm-seg::before{ border-top-color: var(--warn,#a9691f); }
.hm-goal.gh-nu .hm-goal__now b,.hm-goal.gh-nu .hm-ok{ color: rgb(95, 94, 102); }
.hm-goal.gh-nu .hm-seg i.on{ background: rgb(201, 200, 207); }
.hm-goal.gh-nu .hm-seg::before{ border-top-color: rgb(139, 138, 146); }
.hm-goal.gh-nw .hm-seg::before{ display: none; }
.hm-goal__now em{ font-style: normal; font-size: 13px; font-weight: 500; color: rgb(139, 138, 146); }
.hm-ok .gh-t{ color: inherit; font-weight: 600; }
.hm-ok{ align-items: flex-start; line-height: 1.35; }
.hm-ok svg{ flex: 0 0 auto; margin-top: 1px; }
.hm-goal__h b,.hm-goal__h span{ white-space: nowrap; }
.gh-chip{ display: inline-block; vertical-align: middle; margin-left: 8px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em; color: rgb(95, 94, 102); background: rgb(241, 241, 243); border-radius: 100px; padding: 3px 8px; }
.hm-goal__dates{ position: relative; }
.hm-goal__dates .gh-now{ position: absolute; top: 0px; transform: translateX(-50%); white-space: nowrap; }
.hm-goal__dates span.gh-hid{ visibility: hidden; }
.gh-rc__h{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 10px; }
.gh-rc__h span{ white-space: nowrap; }
.gh-rc__h b{ font-size: 17px; font-weight: 600; letter-spacing: -0.3px; white-space: nowrap; }
.gh-rc__h span{ font-size: 12.5px; color: rgb(125, 124, 133); text-align: right; }
.gh-rc__res{ display: flex; align-items: baseline; gap: 8px; margin-top: 12px; }
.gh-rc__res b{ font-size: 28px; font-weight: 700; letter-spacing: -0.8px; line-height: 1; }
.gh-rc__res span{ font-size: 13px; font-weight: 600; color: rgb(92, 122, 21); }
.gh-rc__res span.dn{ color: rgb(192, 57, 43); }
.gh-rc__res span.mu{ color: rgb(139, 138, 146); font-weight: 500; }
.gh-rc__res em{ font-style: normal; font-size: 15px; font-weight: 500; color: rgb(139, 138, 146); }
.gh-rc__nx{ font-size: 13px; font-weight: 600; color: rgb(63, 62, 70); margin-top: 6px; }
.gh-rc__w{ margin-top: 12px; border-radius: 14px; padding: 10px 12px; background: var(--ok-bg,#eaf6d4); }
.gh-rc__w.warn{ background: var(--warn-bg,#fbe9d6); }
.gh-rc__w.mute{ background: rgb(243, 243, 245); }
.gh-rc__w div{ display: flex; align-items: baseline; gap: 8px; }
.gh-rc__w b{ font-size: 15px; font-weight: 700; color: rgb(92, 122, 21); }
.gh-rc__w.warn b{ color: var(--warn,#a9691f); }
.gh-rc__w.mute b{ color: rgb(63, 62, 70); }
.gh-rc__w div span{ font-size: 12px; color: rgb(95, 94, 102); }
.gh-rc__w small{ display: block; font-size: 12px; color: rgb(95, 94, 102); margin-top: 2px; }
.gh-rc__hr{ height: 1px; background: rgba(12, 14, 18, 0.06); margin: 14px 0px 12px; }
.gh-rc__t{ font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgb(139, 138, 146); margin-bottom: 9px; }
.gh-rc__g{ display: grid; grid-template-columns: auto 1fr; gap: 5px 10px; align-items: center; }
.gh-rc__l{ font-size: 12px; color: rgb(95, 94, 102); text-align: right; white-space: nowrap; }
.gh-rc__l b{ font-weight: 700; color: rgb(92, 122, 21); }
.gh-rc__l b.dn{ color: rgb(192, 57, 43); }
.gh-rc__c{ display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.gh-rc__c i{ height: 14px; border-radius: 4px; background: rgb(241, 241, 243); }
.gh-rc__c i.full{ background: rgb(163, 213, 70); }
.gh-rc__c i.part{ background: rgb(217, 238, 178); }
.gh-rc__c i.idle{ background: rgb(245, 245, 247); box-shadow: rgba(12, 14, 18, 0.05) 0px 0px 0px 1px inset; }
.gh-rc__c i.now{ box-shadow: rgb(92, 122, 21) 0px 0px 0px 1.5px; }
.gh-rc__c span{ font-size: 10.5px; color: rgb(139, 138, 146); text-align: center; }
.gh-rc__c span.now{ color: rgb(16, 16, 20); font-weight: 700; }
.gh-rc__calm{ font-size: 12.5px; color: rgb(125, 124, 133); line-height: 1.45; margin-top: 12px; }
.gh-rc__note{ font-size: 12.5px; color: rgb(63, 62, 70); line-height: 1.45; margin-top: 6px; }
.hm-meet__av.gh-ph{ background-size: cover; background-position: center center; }
.gh-tz{ display: inline-block; margin-left: 8px; font-size: 11px; font-weight: 500; letter-spacing: 0px; color: rgb(95, 94, 102); background: rgb(241, 241, 243); border-radius: 100px; padding: 2px 8px; vertical-align: 2px; }
.hm-meet.gh-meet--live{ flex-wrap: wrap; }
.gh-meet--live .hm-meet__b{ flex: 1 1 0px; min-width: 0px; }
.gh-zoom{ flex: 1 0 100%; margin-top: 12px; }
.gh-live{ display: inline-flex; align-items: center; gap: 6px; color: rgb(17, 17, 17); font-weight: 600; }
.gh-live i{ width: 7px; height: 7px; border-radius: 50%; background: rgb(229, 72, 77); box-shadow: rgba(229, 72, 77, 0.18) 0px 0px 0px 3px; }
.hm-av.gh-avph{ color: transparent; background: url("tr/photos/cv-yoga.webp") 47% 26% / 560% no-repeat; }
.gh-inv{ display: flex; align-items: center; gap: 12px; }
.gh-inv__ic{ width: 48px; height: 48px; border-radius: 14px; flex: 0 0 auto; background: rgba(153, 160, 174, 0.12); display: grid; place-items: center; color: rgb(16, 16, 20); }
.gh-inv__ic svg{ width: 22px; height: 22px; }
.gh-inv__b{ flex: 1 1 auto; min-width: 0px; }
.gh-inv__k{ font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(139, 138, 146); }
.gh-inv__t{ font-size: 16.5px; font-weight: 600; letter-spacing: -0.3px; margin-top: 3px; }
.gh-inv__s{ font-size: 12.5px; color: rgb(139, 138, 146); margin-top: 3px; line-height: 1.35; }
.hm-nb[disabled]{ opacity: 0.32; }
.hm-mrow .gh-v{ font-size: 13px; color: rgb(95, 94, 102); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hm-mrow .gh-tm{ font-size: 12.5px; color: rgb(139, 138, 146); font-variant-numeric: tabular-nums; white-space: nowrap; align-self: center; }
.gh-empty{ padding: 18px 4px; font-size: 13.5px; color: rgb(139, 138, 146); line-height: 1.45; }
.gh-hck{ width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; box-shadow: rgba(12, 14, 18, 0.14) 0px 0px 0px 1.4px inset; color: transparent; transition: background 0.2s, box-shadow 0.2s; }
.gh-hck svg{ width: 16px; height: 16px; }
.gh-hab.on .gh-hck{ background: var(--ok-bg,#eaf6d4); box-shadow: none; color: var(--ok,#5d7f1c); }
.gh-hab{ cursor: pointer; }
.hm-row .gh-done{ width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: var(--ok,#5d7f1c); background: var(--ok-bg,#eaf6d4); }
.hm-row .gh-done svg{ width: 16px; height: 16px; }
.hm-media.gh-g{ color: rgb(92, 122, 21); }
.hm-row .hm-mb b{ white-space: normal; line-height: 1.3; }
.hm-kb.gh-kbnogoal #hmBar{ display: none; }
.ghp-pane .xs{ padding-bottom: 40px; }
.ghp-intro{ display: flex; gap: 10px; align-items: flex-start; background: rgb(255, 255, 255); border-radius: 22px; padding: 14px 16px; font-size: 13.5px; line-height: 1.45; color: rgb(58, 58, 60); }
.ghp-intro svg{ width: 18px; height: 18px; flex: 0 0 auto; color: rgb(142, 142, 147); margin-top: 1px; }
.ghp-sh{ display: flex; justify-content: space-between; align-items: baseline; padding: 0px 4px 8px; }
.ghp-sh b{ font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgb(142, 142, 147); }
.ghp-sh a{ font-size: 13.5px; font-weight: 600; color: rgb(17, 17, 17); display: flex; align-items: center; gap: 2px; cursor: pointer; }
.ghp-sh a svg{ width: 14px; height: 14px; }
.ghp-it{ background: rgb(255, 255, 255); border-radius: 26px; padding: 16px; }
.ghp-it + .ghp-it{ margin-top: 10px; }
.ghp-it__top{ display: flex; gap: 14px; align-items: center; }
.ghp-it__img{ width: 64px; height: 64px; border-radius: 16px; flex: 0 0 auto; background: center center / cover no-repeat rgb(243, 243, 245); display: grid; place-items: center; color: rgb(142, 142, 147); }
.ghp-it__img svg{ width: 26px; height: 26px; }
.ghp-it__t{ font-size: 16px; font-weight: 600; color: rgb(17, 17, 17); letter-spacing: -0.2px; }
.ghp-it__s{ font-size: 13px; color: rgb(142, 142, 147); margin-top: 2px; }
.ghp-spec{ margin-top: 12px; border-radius: 14px; background: rgb(243, 243, 245); padding: 9px 12px; }
.ghp-spec b{ display: block; font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgb(142, 142, 147); }
.ghp-spec span{ display: block; font-size: 14.5px; font-weight: 600; color: rgb(17, 17, 17); margin-top: 2px; }
.ghp-shops{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ghp-shop{ display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0px 14px; border-radius: 100px; box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px inset; font-size: 13.5px; font-weight: 600; color: rgb(17, 17, 17); }
.ghp-shop em{ font-style: normal; font-weight: 500; color: rgb(110, 110, 115); }
.ghp-shop svg{ width: 13px; height: 13px; color: rgb(142, 142, 147); }
.ghp-pr{ margin-top: 12px; font-size: 15px; font-weight: 600; color: rgb(17, 17, 17); }
.ghp-pr em{ font-style: normal; font-size: 12.5px; font-weight: 500; color: rgb(142, 142, 147); margin-right: 4px; }
.ghp-pr.none{ font-size: 13px; font-weight: 500; color: rgb(142, 142, 147); }
.ghp-tot{ display: flex; justify-content: space-between; align-items: baseline; background: rgb(255, 255, 255); border-radius: 22px; padding: 16px 18px; margin-top: 10px; }
.ghp-tot span{ font-size: 14px; color: rgb(58, 58, 60); }
.ghp-tot b{ font-size: 18px; font-weight: 700; letter-spacing: -0.3px; color: rgb(17, 17, 17); }
.ghp-fs{ font-size: 12.5px; line-height: 1.45; color: rgb(142, 142, 147); padding: 10px 6px 0px; text-align: center; }
.ghp-sat{ position: absolute; inset: 0px; display: flex; flex-direction: column; }
.ghp-sat__sc{ flex: 1 1 auto; overflow: auto; padding: 0px 16px 20px; }
.ghp-prog{ display: flex; gap: 6px; padding: 4px 4px 0px; }
.ghp-prog i{ flex: 1 1 0px; height: 4px; border-radius: 4px; background: rgb(226, 226, 230); }
.ghp-prog i.on{ background: rgb(17, 17, 17); }
.ghp-k{ font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgb(142, 142, 147); margin: 20px 4px 0px; }
.ghp-h1{ font-size: 26px; font-weight: 700; letter-spacing: -0.7px; line-height: 1.15; color: rgb(17, 17, 17); margin: 8px 4px 0px; }
.ghp-sub{ font-size: 14.5px; line-height: 1.45; color: rgb(110, 110, 115); margin: 8px 4px 0px; }
.ghp-opts{ background: rgb(255, 255, 255); border-radius: 26px; margin-top: 18px; overflow: hidden; }
.ghp-opt{ display: flex; align-items: center; gap: 12px; padding: 15px 16px; cursor: pointer; }
.ghp-opt + .ghp-opt{ box-shadow: rgba(0, 0, 0, 0.06) 0px 1px 0px inset; }
.ghp-opt__b{ flex: 1 1 auto; min-width: 0px; }
.ghp-opt__b b{ display: block; font-size: 15.5px; font-weight: 600; color: rgb(17, 17, 17); letter-spacing: -0.2px; }
.ghp-opt__b small{ display: block; font-size: 13px; color: rgb(142, 142, 147); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ghp-opt__ck{ width: 24px; height: 24px; border-radius: 50%; flex: 0 0 auto; box-shadow: rgb(199, 199, 204) 0px 0px 0px 1.6px inset; display: grid; place-items: center; color: rgb(255, 255, 255); }
.ghp-opt__ck svg{ width: 14px; height: 14px; }
.ghp-opt.on .ghp-opt__ck{ background: rgb(17, 17, 17); box-shadow: none; }
.ghp-opts--m .ghp-opt__ck{ border-radius: 8px; }
.ghp-photo{ margin-top: 12px; background: rgb(255, 255, 255); border-radius: 26px; overflow: hidden; }
.ghp-photo i{ display: block; height: 190px; background-size: cover; background-position: center center; }
.ghp-photo span{ display: block; padding: 12px 16px; font-size: 13.5px; color: rgb(58, 58, 60); }
.ghp-photo--no{ display: flex; align-items: center; gap: 10px; padding: 16px; color: rgb(142, 142, 147); font-size: 13.5px; }
.ghp-photo--no svg{ width: 20px; height: 20px; }
.ghp-foot{ flex: 0 0 auto; padding: 10px 16px 30px; background: linear-gradient(rgba(243, 243, 245, 0), rgb(243, 243, 245) 18px); }
.ghp-btn{ display: block; width: 100%; height: 54px; border: 0px; border-radius: 100px; background: rgb(17, 17, 17); color: rgb(255, 255, 255); font-family: inherit; font-size: 16px; font-weight: 600; cursor: pointer; }
.ghp-lnk{ display: block; width: 100%; border: 0px; background: none; font-family: inherit; font-size: 15px; font-weight: 600; color: rgb(110, 110, 115); padding: 12px 0px 0px; cursor: pointer; }
.ghp-emp{ text-align: center; padding: 60px 18px 0px; }
.ghp-emp .ghp-h1{ margin-top: 18px; }
.ghp-emp__ic{ width: 72px; height: 72px; border-radius: 50%; background: rgb(255, 255, 255); display: grid; place-items: center; margin: 0px auto; color: rgb(17, 17, 17); }
.ghp-emp__ic svg{ width: 30px; height: 30px; }
.gh-pl-card{ background: rgb(255, 255, 255); border-radius: 22px; padding: 16px; box-shadow: rgba(20, 4, 12, 0.06) 0px 8px 24px, rgba(12, 14, 18, 0.03) 0px 0px 0px 1px inset; }
.gh-pl-card + .gh-pl-card,.gh-pl-card + .gh-pl-btn,.gh-pl-btn + .gh-pl-card{ margin-top: 10px; }
.gh-pl-meet{ display: flex; align-items: center; gap: 12px; }
.gh-pl-meet img{ width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.gh-pl-meet small{ display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: rgb(139, 138, 146); }
.gh-pl-meet small em{ font-style: normal; font-size: 10.5px; background: rgb(241, 241, 243); border-radius: 100px; padding: 2px 7px; color: rgb(95, 94, 102); }
.gh-pl-meet b{ display: block; font-size: 17px; font-weight: 600; letter-spacing: -0.3px; margin-top: 3px; }
.gh-pl-meet span{ display: block; font-size: 12.5px; color: rgb(139, 138, 146); margin-top: 2px; }
.gh-pl-btn{ display: block; width: 100%; height: 48px; border: 0px; border-radius: 100px; background: rgb(255, 255, 255); box-shadow: rgba(12, 14, 18, 0.1) 0px 0px 0px 1px inset; font-family: inherit; font-size: 15px; font-weight: 600; color: rgb(16, 16, 20); cursor: pointer; }
.gh-pl-btn.dark{ background: rgb(16, 16, 20); color: rgb(255, 255, 255); box-shadow: none; }
.gh-pl-build{ text-align: center; padding: 24px 18px; }
.gh-pl-build span{ width: 56px; height: 56px; border-radius: 18px; margin: 0px auto; display: grid; place-items: center; background: rgb(243, 243, 245); color: rgb(63, 62, 70); }
.gh-pl-build span svg{ width: 26px; height: 26px; }
.gh-pl-build b{ display: block; font-size: 17px; font-weight: 600; letter-spacing: -0.3px; margin-top: 14px; }
.gh-pl-build p{ margin: 6px 0px 0px; font-size: 13.5px; line-height: 1.5; color: rgb(125, 124, 133); }
.gh-pl-soon b{ display: block; font-size: 16px; font-weight: 600; letter-spacing: -0.2px; }
.gh-pl-soon p{ margin: 4px 0px 0px; font-size: 13.5px; line-height: 1.5; color: rgb(125, 124, 133); }
.gh-pl-soon{ text-align: center; padding: 22px 18px; }
.gh-ank{ display: block; margin-bottom: 12px; }
.gh-ank .hm-dark__b{ flex: 1 1 auto; }
.gh-ank__bar{ height: 5px; border-radius: 100px; background: rgba(255, 255, 255, 0.18); margin-top: 11px; max-width: 200px; overflow: hidden; }
.gh-ank__bar i{ display: block; height: 100%; border-radius: 100px; background: rgb(255, 255, 255); }
.pl4-cov.gh-lockcov{ background: rgb(239, 237, 241); display: grid; place-items: center; color: rgb(139, 138, 146); }
.pl4-cov.gh-lockcov > svg{ width: 26px; height: 26px; }
.pl4-cov.gh-lockcov .pl4-cov__t{ color: rgb(139, 138, 146); }
.gh-lbs{ color: rgb(16, 16, 20) !important; }
.gh-lbs .gh-x{ margin-left: auto; width: 18px; height: 18px; border-radius: 50%; background: rgb(199, 199, 204); color: rgb(255, 255, 255); display: grid; place-items: center; }
.gh-lbs .gh-x svg{ width: 10px; height: 10px; }
.gh-lbsoon{ background: rgb(255, 255, 255); border-radius: 22px; padding: 22px 18px; text-align: center; margin-top: 6px; box-shadow: rgba(20, 4, 12, 0.05) 0px 8px 24px; }
.gh-lbsoon b{ display: block; font-size: 16px; font-weight: 600; }
.gh-lbsoon p{ margin: 5px 0px 0px; font-size: 13.5px; line-height: 1.5; color: rgb(125, 124, 133); }
.gh-ag{ margin-top: 14px; }
.gh-ag__l{ font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgb(139, 138, 146); margin: 0px 0px 8px; }
.gh-ag__rows{ border-radius: 18px; box-shadow: rgba(12, 14, 18, 0.07) 0px 0px 0px 1px inset; overflow: hidden; }
.gh-ag__r{ display: flex; align-items: center; gap: 12px; padding: 11px 14px; }
.gh-ag__r + .gh-ag__r{ box-shadow: rgba(12, 14, 18, 0.06) 0px 1px 0px inset; }
.gh-ag__r b{ display: block; font-size: 14.5px; font-weight: 600; }
.gh-ag__r small{ display: block; font-size: 12px; color: rgb(139, 138, 146); margin-top: 1px; }
.gh-ag__r > span:first-child{ flex: 1 1 auto; min-width: 0px; }
.gh-ag__tag{ display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: rgb(139, 138, 146); white-space: nowrap; }
.gh-ag__tag.ok{ color: rgb(74, 68, 73); }
.gh-ag__tag.ok::before{ content: ""; width: 7px; height: 7px; border-radius: 50%; background: rgb(127, 181, 44); }
.gh-ag__ph{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gh-ag__ph div{ height: 112px; border-radius: 16px; background: rgb(243, 241, 245); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: rgb(139, 138, 146); font-size: 12px; }
.gh-ag__ph svg{ width: 22px; height: 22px; }
.gh-hb{ display: flex; align-items: center; gap: 10px; padding: 9px 0px; }
.gh-hb + .gh-hb{ box-shadow: rgba(12, 14, 18, 0.06) 0px 1px 0px inset; }
.gh-hb b{ flex: 1 1 auto; font-size: 14.5px; font-weight: 500; }
.gh-hb__d{ display: flex; gap: 5px; }
.gh-hb__d i{ width: 14px; height: 14px; border-radius: 50%; background: rgb(236, 236, 239); cursor: pointer; transition: background 0.2s, transform 0.2s; }
.gh-hb__d i.g{ background: rgb(163, 213, 70); }
.gh-hb__d i.t{ box-shadow: rgb(16, 16, 20) 0px 0px 0px 1.5px; }
.gh-bar{ border-radius: 18px; background: rgb(246, 246, 248); padding: 14px 16px; }
.gh-bar small{ display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgb(139, 138, 146); }
.gh-bar b{ display: block; font-size: 16px; font-weight: 600; letter-spacing: -0.2px; margin-top: 4px; }
.gh-bar p{ margin: 4px 0px 0px; font-size: 13px; line-height: 1.45; color: rgb(125, 124, 133); }
.gh-lock{ display: flex; gap: 10px; align-items: flex-start; border-radius: 16px; background: rgb(243, 243, 245); padding: 12px 14px; font-size: 13.5px; line-height: 1.45; color: rgb(95, 94, 102); }
.gh-lock svg{ width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px; }
.gh-fc{ border-radius: 18px; background: rgb(246, 246, 248); padding: 14px 16px; }
.gh-fc small{ display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgb(139, 138, 146); }
.gh-fc b{ display: block; font-size: 22px; font-weight: 700; letter-spacing: -0.5px; margin-top: 4px; }
.gh-fc span{ display: block; font-size: 13px; color: rgb(95, 94, 102); margin-top: 3px; line-height: 1.4; }
.hm-track u{ position: absolute; top: 1.5px; bottom: 1.5px; width: 1.5px; border-radius: 1px; z-index: 1; }
.pl4-hero__fg .phero__chip.gh-pchip{ margin-top: 14px; cursor: pointer; }
.gh-pchip svg{ width: 14px; height: 14px; }
.pl4-hero.gh-rbhero{ height: 250px; }
.gh-pl-meet b .gh-tz{ display: inline-block; margin: 0px 0px 0px 8px; font-size: 11px; font-weight: 500; letter-spacing: 0px; color: rgb(95, 94, 102); vertical-align: 2px; }
.gh-st{ display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: rgb(139, 138, 146); white-space: nowrap; }
.gh-st i{ width: 7px; height: 7px; border-radius: 50%; background: currentcolor; display: none; }
.gh-st.ok{ color: rgb(74, 68, 73); }
.gh-st.ok i{ display: block; background: rgb(127, 181, 44); }
.gh-nowg{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gh-nowg div{ border-radius: 16px; background: rgb(246, 246, 248); padding: 11px 13px; }
.gh-nowg b{ display: block; font-size: 19px; font-weight: 700; letter-spacing: -0.4px; }
.gh-nowg b i{ font-style: normal; font-size: 12px; font-weight: 500; color: rgb(139, 138, 146); margin-left: 3px; }
.gh-nowg small{ display: block; font-size: 12px; color: rgb(139, 138, 146); margin-top: 1px; }
.gh-nowg span{ display: block; font-size: 12.5px; font-weight: 600; color: rgb(63, 62, 70); margin-top: 4px; }
.gh-nowg span.ok{ color: rgb(92, 122, 21); }
#agsheet{ max-height: calc(100% - 50px); overflow-y: auto; scrollbar-width: none; }
#agsheet::-webkit-scrollbar{ display: none; }
.gh-steps{ counter-reset: ghs 0; }
.gh-steps div{ display: flex; gap: 12px; align-items: flex-start; padding: 7px 0px; font-size: 14px; line-height: 1.4; color: rgb(63, 62, 70); }
.gh-steps div + div{ box-shadow: rgba(12, 14, 18, 0.06) 0px 1px 0px inset; }
.gh-steps div::before{ counter-increment: ghs 1; content: counter(ghs); width: 22px; height: 22px; margin-top: -1px; border-radius: 50%; flex: 0 0 auto; background: rgb(243, 243, 245); display: grid; place-items: center; font-size: 12px; font-weight: 600; color: rgb(95, 94, 102); }
.gh-steps b{ font-weight: 600; color: rgb(16, 16, 20); }
.gh-ag__lnk{ display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; margin: -4px 0px 12px; font-size: 14px; font-weight: 600; color: rgb(110, 110, 115); cursor: pointer; }
.gh-ag__lnk svg{ width: 14px; height: 14px; }
.gh-err{ margin: 12px 0px 18px; border-radius: 16px; background: rgb(246, 246, 248); padding: 13px 14px; display: flex; align-items: center; gap: 12px; }
.gh-err span{ flex: 1 1 auto; font-size: 13.5px; line-height: 1.4; color: rgb(63, 62, 70); }
.gh-err span small{ display: block; font-size: 12.5px; color: rgb(139, 138, 146); margin-top: 2px; }
.gh-err button{ flex: 0 0 auto; height: 34px; padding: 0px 14px; border: 0px; border-radius: 100px; background: rgb(255, 255, 255); box-shadow: rgba(12, 14, 18, 0.12) 0px 0px 0px 1px inset; font-family: inherit; font-size: 13.5px; font-weight: 600; color: rgb(16, 16, 20); cursor: pointer; }
.gh-lbxw{ margin-top: 8px; }
.ct__row.gh-ctempty{ display: block; cursor: default; }
.gh-ctsoon{ padding: 18px 0px 6px; text-align: center; }
.gh-ctsoon b{ display: block; font-size: 17px; font-weight: 600; color: rgb(255, 255, 255); }
.gh-ctsoon p{ margin: 6px 0px 0px; font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.62); }
.gt-hm__m svg{ width: 22px; height: 22px; }
.gt-hm.is-cover .gt-hm__m{ padding: 0px; overflow: hidden; }
.gt-hm.is-cover .gt-hm__m img{ width: 100%; height: 100%; object-fit: cover; }
.gt-hm__go,.gt-hm__ok{ width: 38px; height: 38px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; background: rgb(16, 16, 20); color: rgb(255, 255, 255); }
.gt-hm__go svg{ width: 14px; height: 14px; margin-left: 2px; }
.gt-hm__ok{ background: rgb(234, 245, 216); color: rgb(79, 127, 28); }
.gt-hm__ok svg{ width: 18px; height: 18px; }
.gt-hm__btn{ flex: 0 0 auto; padding: 9px 14px; border-radius: 100px; background: rgb(16, 16, 20); color: rgb(255, 255, 255); font-size: 13px; font-weight: 600; }
.gt-hm.is-miss .gt-hm__m{ color: rgb(199, 119, 0); }
.gt-hm__hide{ padding: 0px 20px 10px 78px; margin-top: -6px; }
.gt-hm__hide button{ border: 0px; background: none; padding: 0px; font-family: inherit; color: rgb(142, 142, 147); cursor: pointer; }
.ghp-opt.on .ghp-opt__ck{ background: rgb(29, 2, 12); box-shadow: none; color: rgb(255, 255, 255); }
.ghp-opt.on{ background: rgb(246, 238, 243); }

/* ---- src/styles/40-life.css ---- */
/* СГЕНЕРИРОВАНО design-preview/miniapp-v3-dev/tools/extract_css.js из прототипа nav-v2
   (состояния: lifecycle.js). Правила взяты в порядке каскада прототипа; не правьте
   руками — поправка поверх живёт в файлах стилей с бОльшим номером. */
.xs-dot--ok{ background: rgb(52, 199, 89); }
.xs-status{ display: flex; align-items: flex-start; gap: 10px; padding: 14px 18px; font-size: 14px; line-height: 1.4; color: rgb(58, 58, 60); }
.xs-status .xs-dot{ margin-top: 6px; flex: 0 0 auto; }
.xs-status b{ font-weight: 600; color: rgb(17, 17, 17); }
.xs-dot--ok{ background: rgb(199, 199, 204); }
.xs-dot--new,.xs-dot--ok,.xs-dot--wait{ background: rgb(17, 17, 17); }
.xs-status{ font-size: 13.5px; color: rgb(110, 110, 115); }
.xs-status b{ font-weight: 600; }
.xs-status .xs-dot{ width: 6px; height: 6px; }
.gl{ position: absolute; inset: 0px; z-index: 38; background: rgb(243, 243, 245); color: rgb(17, 17, 17); display: none; overflow: hidden auto; scrollbar-width: none; border-radius: inherit; }
.gl::-webkit-scrollbar{ display: none; }
.rf-app.gl-on .gl{ display: block; }
.gl-in{ min-height: 100%; box-sizing: border-box; display: flex; flex-direction: column; padding-top: 54px; }
.gl-in > .xs{ flex: 1 1 auto; padding-bottom: 18px; }
.gl-in > .gl-sv{ flex: 1 1 auto; padding-bottom: 18px; }
.gl-nav{ position: sticky; top: 0px; z-index: 4; margin-top: -54px; padding: 62px 16px 6px; background: linear-gradient(rgb(243, 243, 245) 86%, rgba(243, 243, 245, 0)); }
.gl-sbg{ position: sticky; top: 0px; height: 54px; margin: -54px 0px 0px; flex: 0 0 auto; z-index: 3; background: linear-gradient(rgb(243, 243, 245) 75%, rgba(243, 243, 245, 0)); pointer-events: none; }
.gl-hero{ text-align: center; padding: 18px 22px 4px; }
.gl-ic{ width: 76px; height: 76px; border-radius: 26px; background: rgb(255, 255, 255); color: rgb(17, 17, 17); display: grid; place-items: center; margin: 0px auto 18px; }
.gl-ic svg{ width: 32px; height: 32px; }
.gl-ic--dark{ background: rgb(17, 17, 17); color: rgb(255, 255, 255); border-radius: 50%; }
.gl-h{ font-size: 27px; font-weight: 700; letter-spacing: -0.7px; line-height: 1.13; }
.gl-s{ font-size: 15px; line-height: 1.5; color: rgb(110, 110, 115); margin-top: 10px; }
.gl-kick{ display: block; font-size: 13.5px; font-weight: 500; color: rgb(142, 142, 147); margin-bottom: 8px; }
.gl-foot{ position: sticky; bottom: 0px; z-index: 2; padding: 14px 16px 30px; background: linear-gradient(rgba(243, 243, 245, 0), rgb(243, 243, 245) 22px); }
.gl-btn{ display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 54px; border: 0px; border-radius: 100px; background: rgb(17, 17, 17); color: rgb(255, 255, 255); font-family: inherit; font-size: 16px; font-weight: 600; letter-spacing: -0.3px; cursor: pointer; }
.gl-btn[disabled]{ background: rgb(209, 209, 214); color: rgb(255, 255, 255); cursor: default; }
.gl-btn.is-busy{ background: rgb(58, 58, 60); }
.gl-sec{ display: block; width: 100%; height: 46px; margin-top: 4px; border: 0px; background: none; font-family: inherit; font-size: 15.5px; font-weight: 600; color: rgb(17, 17, 17); cursor: pointer; }
.gl-soft{ display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 50px; border: 0px; border-radius: 100px; background: rgb(255, 255, 255); color: rgb(17, 17, 17); font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer; margin-top: 10px; }
.gl-hint{ display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12.5px; color: rgb(142, 142, 147); margin-top: 12px; text-align: center; }
.gl-hint svg{ width: 13px; height: 13px; flex: 0 0 auto; }
.gl-spin{ width: 18px; height: 18px; border-radius: 50%; border-width: 2.2px; border-style: solid; border-color: rgb(255, 255, 255) rgba(255, 255, 255, 0.35) rgba(255, 255, 255, 0.35); border-image: initial; animation: 0.8s linear 0s infinite normal none running glspin; flex: 0 0 auto; }
.gl-spin--ink{ border-color: rgb(17, 17, 17) rgba(17, 17, 17, 0.15) rgba(17, 17, 17, 0.15); }
@keyframes glspin { 
  100% { transform: rotate(360deg); }
}
.gl-st{ padding: 18px 18px 16px; }
.gl-st__k{ font-size: 13px; font-weight: 600; color: rgb(142, 142, 147); display: flex; align-items: center; gap: 8px; }
.gl-st__k .xs-dot{ margin: 0px; }
.gl-st__t{ font-size: 19px; font-weight: 600; letter-spacing: -0.45px; margin-top: 6px; line-height: 1.25; }
.gl-st__s{ font-size: 14px; line-height: 1.5; color: rgb(110, 110, 115); margin-top: 6px; }
.gl-facts{ border-top: 0.5px solid rgb(229, 229, 234); margin: 0px 18px; padding: 6px 0px 8px; }
.gl-fact{ display: flex; justify-content: space-between; gap: 14px; padding: 8px 0px; font-size: 14px; }
.gl-fact span{ color: rgb(142, 142, 147); }
.gl-fact b{ font-weight: 600; text-align: right; }
.gl-fine{ font-size: 12.5px; line-height: 1.45; color: rgb(142, 142, 147); padding: 10px 18px 0px; text-align: center; }
.gl-pv{ display: flex; gap: 10px; align-items: flex-start; background: rgb(17, 17, 17); color: rgb(255, 255, 255); border-radius: 22px; padding: 14px 16px; font-size: 13.5px; line-height: 1.45; }
.gl-pv svg{ width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px; }
.gl-pv b{ display: block; font-size: 14.5px; }
.gl-pv span{ color: rgba(255, 255, 255, 0.7); }
.gl-list{ padding: 6px 18px 10px; }
.gl-li{ display: flex; gap: 12px; align-items: flex-start; padding: 9px 0px; font-size: 14.5px; line-height: 1.4; }
.gl-li i{ width: 22px; height: 22px; border-radius: 50%; background: rgb(241, 241, 243); display: grid; place-items: center; flex: 0 0 auto; font-style: normal; font-size: 12px; font-weight: 700; }
.gl-li i svg{ width: 12px; height: 12px; }
.gl-li small{ display: block; color: rgb(142, 142, 147); font-size: 13px; margin-top: 2px; }
.gl-hb{ display: flex; align-items: center; gap: 12px; cursor: pointer; }
.gl-hb__ic{ width: 40px; height: 40px; border-radius: 50%; background: rgb(17, 17, 17); color: rgb(255, 255, 255); display: grid; place-items: center; flex: 0 0 auto; font-weight: 700; font-size: 18px; }
.gl-hb__ic svg{ width: 20px; height: 20px; }
.gl-hb__ic.is-err{ background: rgb(215, 55, 47); }
.gl-hb__ic.is-soft{ background: rgb(241, 241, 243); color: rgb(17, 17, 17); }
.gl-hb__b{ flex: 1 1 auto; min-width: 0px; }
.gl-hb__t{ font-size: 15.5px; font-weight: 600; letter-spacing: -0.25px; }
.gl-hb__s{ font-size: 12.5px; line-height: 1.4; color: rgb(139, 138, 146); margin-top: 2px; }
.gl-hb .chev{ flex: 0 0 auto; color: rgb(199, 199, 204); width: 16px; height: 16px; }
.gl-hb__go{ flex: 0 0 auto; height: 34px; padding: 0px 14px; border: 0px; border-radius: 100px; background: rgb(17, 17, 17); color: rgb(255, 255, 255); font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.hm-dark .gl-go{ position: relative; z-index: 1; flex: 0 0 auto; height: 34px; padding: 0px 14px; border: 0px; border-radius: 100px; background: rgb(255, 255, 255); color: rgb(17, 17, 17); font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.gl-top{ display: flex; align-items: center; gap: 12px; padding: 8px 16px 6px; }
.gl-top .xs-back{ flex: 0 0 auto; }
.gl-top__b{ flex: 1 1 auto; min-width: 0px; }
.gl-top__r{ display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13.5px; font-weight: 600; }
.gl-top__r span{ color: rgb(142, 142, 147); font-weight: 500; white-space: nowrap; }
.gl-prog{ display: flex; gap: 3px; margin-top: 8px; }
.gl-prog i{ flex: 1 1 0px; height: 4px; border-radius: 4px; background: rgb(220, 220, 225); overflow: hidden; position: relative; }
.gl-prog i b{ position: absolute; left: 0px; top: 0px; bottom: 0px; background: rgb(17, 17, 17); border-radius: 4px; }
.gl-prog i.cur{ background: rgb(199, 199, 204); }
.gl-stmt{ padding: 20px 20px 22px; }
.gl-stmt__l{ font-size: 13px; color: rgb(142, 142, 147); font-weight: 500; }
.gl-stmt__t{ font-size: 21px; font-weight: 600; letter-spacing: -0.45px; line-height: 1.3; margin-top: 10px; }
.gl-ask{ text-align: center; font-size: 14px; color: rgb(110, 110, 115); margin: 24px 0px 12px; }
.gl-sc5{ display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.gl-sc5 button{ height: 62px; border: 0px; border-radius: 20px; background: rgb(255, 255, 255); color: rgb(17, 17, 17); font-family: inherit; font-size: 20px; font-weight: 600; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.gl-sc5 button i{ width: 5px; height: 5px; border-radius: 50%; background: rgb(209, 209, 214); }
.gl-sc5 button.sel{ background: rgb(17, 17, 17); color: rgb(255, 255, 255); }
.gl-sc5 button.sel i{ background: rgb(255, 255, 255); }
.gl-ends{ display: flex; justify-content: space-between; font-size: 12px; color: rgb(142, 142, 147); margin-top: 9px; padding: 0px 2px; }
.gl-na{ margin-top: 22px; text-align: center; }
.gl-na button{ width: 100%; min-height: 50px; border: 0px; border-radius: 18px; background: rgb(255, 255, 255); font-family: inherit; font-size: 14.5px; font-weight: 600; color: rgb(17, 17, 17); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0px 14px; }
.gl-na button.sel{ background: rgb(17, 17, 17); color: rgb(255, 255, 255); }
.gl-na button svg{ width: 16px; height: 16px; }
.gl-na small{ display: block; font-size: 12.5px; color: rgb(142, 142, 147); line-height: 1.45; margin-top: 8px; padding: 0px 10px; }
.gl-meta{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 22px; }
.gl-meta div{ background: rgb(255, 255, 255); border-radius: 20px; padding: 14px 8px; text-align: center; font-size: 12.5px; color: rgb(142, 142, 147); }
.gl-meta b{ display: block; font-size: 20px; color: rgb(17, 17, 17); letter-spacing: -0.4px; margin-bottom: 2px; }
.gl-how{ padding: 18px; }
.gl-how b{ font-size: 15px; }
.gl-how p{ margin: 6px 0px 0px; font-size: 13.5px; line-height: 1.5; color: rgb(110, 110, 115); }
.gl-how__sc{ display: flex; gap: 4px; margin-top: 14px; }
.gl-how__sc i{ flex: 1 1 0%; height: 6px; border-radius: 6px; background: rgb(17, 17, 17); }
.gl-how__sc i:nth-child(1){ opacity: 0.18; }
.gl-how__sc i:nth-child(2){ opacity: 0.36; }
.gl-how__sc i:nth-child(3){ opacity: 0.55; }
.gl-how__sc i:nth-child(4){ opacity: 0.78; }
.gl-how .gl-ends{ padding: 0px; }
.gl-sum{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 20px; }
.gl-sum div{ background: rgb(255, 255, 255); border-radius: 22px; padding: 14px 10px; text-align: center; }
.gl-sum b{ display: block; font-size: 24px; font-weight: 700; letter-spacing: -0.6px; }
.gl-sum b small{ font-size: 13px; color: rgb(142, 142, 147); font-weight: 600; }
.gl-sum span{ font-size: 12px; color: rgb(142, 142, 147); }
.gl-mean{ font-size: 14px; line-height: 1.5; color: rgb(110, 110, 115); text-align: center; padding: 14px 12px 0px; }
.gl-sech{ display: flex; align-items: center; gap: 8px; padding: 0px 6px 6px; }
.gl-sech .gl-chip{ display: inline-flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 600; letter-spacing: -0.2px; color: rgb(17, 17, 17); }
.gl-chip i{ width: 7px; height: 7px; border-radius: 50%; background: rgb(199, 199, 204); }
.gl-chip--growth i{ background: rgb(29, 2, 12); }
.gl-chip--progress i{ background: rgb(240, 160, 60); }
.gl-chip--mastered i{ background: rgb(52, 199, 89); }
.gl-sech .gl-chip--na{ color: rgb(142, 142, 147); }
.gl-sech span{ font-size: 13px; color: rgb(142, 142, 147); }
.gl-sech em{ margin-left: auto; font-style: normal; font-size: 13px; color: rgb(142, 142, 147); font-weight: 600; }
.gl-blurb{ font-size: 13px; line-height: 1.45; color: rgb(142, 142, 147); padding: 0px 6px 10px; }
.gl-mrow{ display: flex; align-items: center; gap: 14px; padding: 13px 18px; }
.gl-mrow + .gl-mrow{ border-top: 0.5px solid rgb(236, 236, 240); }
.gl-dots{ display: flex; gap: 3px; flex: 0 0 auto; }
.gl-dots i{ width: 7px; height: 7px; border-radius: 50%; background: rgb(225, 225, 230); }
.gl-dots i.on{ background: rgb(17, 17, 17); }
.gl-mrow__b{ flex: 1 1 auto; min-width: 0px; }
.gl-mrow__b b{ display: block; font-size: 15px; font-weight: 600; letter-spacing: -0.2px; }
.gl-mrow__b small{ display: block; font-size: 12.5px; color: rgb(142, 142, 147); line-height: 1.4; margin-top: 2px; }
.gl-mrow__v{ font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.gl-mrow.na .gl-mrow__b b{ color: rgb(142, 142, 147); }
.gl-next{ padding: 18px; }
.gl-next > b{ font-size: 16px; letter-spacing: -0.3px; }
.gl-next > p{ margin: 6px 0px 4px; font-size: 13.5px; line-height: 1.5; color: rgb(110, 110, 115); }
.gl-next li{ list-style: none; display: flex; gap: 12px; align-items: flex-start; padding: 10px 0px 0px; }
.gl-next ul{ margin: 0px; padding: 0px; }
.gl-next li i{ flex: 0 0 auto; width: 52px; padding-top: 1px; font-style: normal; font-size: 13px; font-weight: 600; color: rgb(142, 142, 147); font-variant-numeric: tabular-nums; }
.gl-next li b{ display: block; font-size: 14.5px; }
.gl-next li small{ display: block; font-size: 13px; color: rgb(142, 142, 147); margin-top: 1px; }
.gl-sv{ padding: 18px 20px 0px; }
.gl-sv__q{ font-size: 27px; font-weight: 700; letter-spacing: -0.7px; line-height: 1.15; }
.gl-sv__s{ font-size: 15px; line-height: 1.5; color: rgb(110, 110, 115); margin-top: 10px; }
.gl-ctx{ display: flex; gap: 14px; align-items: center; padding: 16px 18px; }
.gl-ctx img{ width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.gl-ctx small{ display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgb(142, 142, 147); }
.gl-ctx b{ display: block; font-size: 16px; margin-top: 2px; }
.gl-ctx span{ display: block; font-size: 13px; color: rgb(142, 142, 147); margin-top: 1px; }
.gl-lock{ display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; font-size: 13.5px; line-height: 1.45; color: rgb(110, 110, 115); }
.gl-lock svg{ width: 16px; height: 16px; flex: 0 0 auto; margin-top: 1px; color: rgb(17, 17, 17); }
.gl-lock b{ color: rgb(17, 17, 17); }
.gl-opts{ display: flex; flex-direction: column; gap: 8px; margin-top: 22px; }
.gl-opt{ display: flex; align-items: center; gap: 12px; width: 100%; min-height: 58px; border: 0px; border-radius: 20px; background: rgb(255, 255, 255); padding: 12px 16px; text-align: left; font-family: inherit; color: rgb(17, 17, 17); cursor: pointer; }
.gl-opt__b{ flex: 1 1 auto; }
.gl-opt__b b{ display: block; font-size: 15.5px; font-weight: 600; letter-spacing: -0.2px; }
.gl-opt__b small{ display: block; font-size: 13px; color: rgb(142, 142, 147); margin-top: 3px; line-height: 1.4; }
.gl-opt__ck{ width: 24px; height: 24px; border-radius: 50%; box-shadow: rgb(199, 199, 204) 0px 0px 0px 1.5px inset; flex: 0 0 auto; display: grid; place-items: center; color: rgb(255, 255, 255); }
.gl-opt__ck svg{ width: 13px; height: 13px; }
.gl-opt.sel{ box-shadow: rgb(17, 17, 17) 0px 0px 0px 1.5px inset; }
.gl-opt.sel .gl-opt__ck{ background: rgb(17, 17, 17); box-shadow: none; }
.gl-stars{ display: flex; justify-content: center; gap: 10px; margin-top: 34px; }
.gl-stars button{ width: 52px; height: 52px; border: 0px; background: none; padding: 0px; cursor: pointer; }
.gl-stars svg{ width: 52px; height: 52px; fill: none; stroke: rgb(199, 199, 204); stroke-width: 1.3; }
.gl-stars button.lit svg{ fill: rgb(17, 17, 17); stroke: rgb(17, 17, 17); }
.gl-starl{ text-align: center; font-size: 14px; color: rgb(142, 142, 147); margin-top: 14px; }
.gl-starl b{ font-size: 16px; color: rgb(17, 17, 17); }
.gl-ta{ margin-top: 20px; background: rgb(255, 255, 255); border-radius: 22px; padding: 14px 16px; }
.gl-ta textarea{ width: 100%; min-height: 120px; border: 0px; outline: 0px; resize: none; font-family: inherit; font-size: 15.5px; line-height: 1.45; color: rgb(17, 17, 17); background: none; padding: 0px; }
.gl-ta textarea::placeholder{ color: rgb(174, 174, 178); }
.gl-cnt{ text-align: right; font-size: 12.5px; color: rgb(142, 142, 147); margin-top: 8px; padding-right: 6px; }
.gl-done{ flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 40px 24px; }
.gl-res{ padding: 20px 18px 18px; }
.gl-res__k{ font-size: 13px; color: rgb(142, 142, 147); font-weight: 500; }
.gl-big{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 0px; margin-top: 16px; border-top: 0.5px solid rgb(236, 236, 240); }
.gl-big div{ padding: 14px 4px 2px; }
.gl-big div + div{ padding-left: 14px; border-left: 0.5px solid rgb(236, 236, 240); }
.gl-big b{ display: block; font-size: 24px; font-weight: 700; letter-spacing: -0.6px; font-variant-numeric: tabular-nums; }
.gl-big span{ display: block; font-size: 12.5px; color: rgb(142, 142, 147); margin-top: 3px; line-height: 1.35; }
.gl-cons{ display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; cursor: pointer; }
.gl-cons i{ width: 22px; height: 22px; border-radius: 7px; box-shadow: rgb(199, 199, 204) 0px 0px 0px 1.5px inset; flex: 0 0 auto; display: grid; place-items: center; color: rgb(255, 255, 255); margin-top: 1px; }
.gl-cons.on i{ background: rgb(17, 17, 17); box-shadow: none; }
.gl-cons i svg{ width: 13px; height: 13px; }
.gl-cons span{ font-size: 14px; line-height: 1.45; }
.gl-cons.is-err i{ box-shadow: rgb(215, 55, 47) 0px 0px 0px 1.5px inset; }
.gl-legal{ font-size: 12px; line-height: 1.5; color: rgb(142, 142, 147); padding: 12px 6px 4px; }
.gl-rh{ padding: 4px 6px; }
.gl-rh__t{ font-size: 28px; font-weight: 700; letter-spacing: -0.8px; line-height: 1.12; margin-top: 8px; }
.gl-rh__s{ font-size: 15px; line-height: 1.5; color: rgb(110, 110, 115); margin-top: 10px; }
.gl-rh__s b{ color: rgb(17, 17, 17); font-weight: 600; }
.gl-acc{ border-radius: 26px; padding: 18px; background: rgb(255, 255, 255); color: rgb(17, 17, 17); }
.gl-acc__k{ display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: rgb(142, 142, 147); }
.gl-acc__k .xs-dot{ margin: 0px; }
.gl-acc__t{ font-size: 20px; font-weight: 700; letter-spacing: -0.45px; margin-top: 6px; line-height: 1.25; }
.gl-acc__s{ font-size: 14px; line-height: 1.5; color: rgb(110, 110, 115); margin-top: 6px; }
.gl-acc__s b{ color: rgb(17, 17, 17); font-weight: 600; }
.gl-acc__chips{ display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 12px; padding-top: 12px; border-top: 0.5px solid rgb(236, 236, 240); }
.gl-acc__chips span{ display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: rgb(58, 58, 60); }
.gl-acc__chips svg{ width: 13px; height: 13px; color: rgb(52, 199, 89); }
.gl-tl{ margin-top: 14px; }
.gl-tl__bar{ display: flex; gap: 3px; height: 6px; }
.gl-tl__bar i{ display: block; height: 100%; border-radius: 6px; background: rgb(229, 229, 234); }
.gl-tl__bar i.a{ background: rgb(209, 209, 214); }
.gl-tl__bar i.b{ background: rgb(17, 17, 17); }
.gl-tl__lb{ display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: rgb(142, 142, 147); margin-top: 7px; font-weight: 500; }
.gl-tl__lb b{ color: rgb(17, 17, 17); font-weight: 600; }
.gl-trs{ display: flex; flex-direction: column; gap: 8px; }
.gl-tr{ position: relative; display: block; width: 100%; border: 0px; border-radius: 22px; background: rgb(255, 255, 255); padding: 15px 16px 15px 52px; text-align: left; font-family: inherit; color: rgb(17, 17, 17); cursor: pointer; transition: box-shadow 0.15s, background 0.15s; }
.gl-tr__rd{ position: absolute; left: 17px; top: 17px; width: 22px; height: 22px; border-radius: 50%; box-shadow: rgb(199, 199, 204) 0px 0px 0px 1.5px inset; background: rgb(255, 255, 255); }
.gl-tr.sel{ background: rgb(246, 238, 243); box-shadow: rgba(160, 80, 120, 0.14) 0px 0px 0px 1px inset; }
.gl-tr.sel .gl-tr__rd{ box-shadow: rgb(29, 2, 12) 0px 0px 0px 7px inset; }
.gl-tr__top{ display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.gl-tr__n{ font-size: 17px; font-weight: 650; letter-spacing: -0.3px; }
.gl-tr__p{ font-size: 18px; font-weight: 700; letter-spacing: -0.4px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.gl-tr__m{ font-size: 13px; color: rgb(142, 142, 147); margin-top: 2px; }
.gl-tr__note{ display: block; font-size: 13px; color: rgb(58, 58, 60); margin-top: 3px; font-weight: 500; }
.gl-tr__x{ font-size: 13px; line-height: 1.45; color: rgb(110, 110, 115); margin-top: 11px; padding-top: 10px; border-top: 0.5px solid rgba(29, 2, 12, 0.1); }
.gl-cons.is-err{ background: rgb(255, 245, 244); border-radius: 22px; }
.gl-cons.is-err span{ color: rgb(17, 17, 17); }
.gl-cons a,.gl-legal a{ color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.gl-legal{ padding: 12px 10px 6px; text-align: center; }
.gl-foot:has(.gl-sum2){ padding-top: 24px; background: linear-gradient(rgba(243, 243, 245, 0), rgb(243, 243, 245) 20px); }
.gl-sum2{ display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 0px 8px 10px; font-size: 13px; color: rgb(110, 110, 115); }
.gl-sum2 b{ color: rgb(17, 17, 17); font-size: 16px; font-weight: 700; letter-spacing: -0.3px; font-variant-numeric: tabular-nums; }
.gl-ferr{ font-size: 13px; line-height: 1.4; color: rgb(215, 55, 47); text-align: center; padding: 0px 12px 10px; }
.gl-okc{ width: 76px; height: 76px; margin: 8px auto 16px; border-radius: 50%; background: rgb(17, 17, 17); color: rgb(255, 255, 255); display: grid; place-items: center; }
.gl-okc svg{ width: 32px; height: 32px; }
.gl-okc.wait{ background: rgb(255, 255, 255); color: rgb(17, 17, 17); }
.gl-pill{ display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: rgb(74, 68, 73); margin-bottom: 10px; }
.gl-pill i{ width: 7px; height: 7px; border-radius: 50%; background: rgb(52, 199, 89); }
.gl-pill.wait i{ background: rgb(240, 160, 60); }
.gl-rc__h{ display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; padding: 16px 18px 14px; border-bottom: 1.5px dashed rgb(227, 227, 232); }
.gl-rc__h small{ display: block; font-size: 12.5px; color: rgb(142, 142, 147); font-weight: 500; }
.gl-rc__h b{ display: block; font-size: 30px; font-weight: 700; letter-spacing: -0.9px; line-height: 1.1; margin-top: 3px; font-variant-numeric: tabular-nums; }
.gl-rc__h em{ font-style: normal; font-size: 12.5px; color: rgb(142, 142, 147); text-align: right; line-height: 1.4; }
.gl-rc .gl-facts{ border-top: 0px; padding-top: 8px; }
.gl-steps{ padding: 8px 18px 12px; }
.gl-step{ position: relative; display: flex; gap: 14px; padding: 9px 0px; }
.gl-step__d{ position: relative; flex: 0 0 auto; width: 12px; padding-top: 4px; }
.gl-step__d i{ display: block; width: 12px; height: 12px; border-radius: 50%; background: rgb(255, 255, 255); box-shadow: rgb(199, 199, 204) 0px 0px 0px 2px inset; box-sizing: border-box; }
.gl-step:not(:last-child) .gl-step__d::after{ content: ""; position: absolute; left: 5px; top: 20px; bottom: -22px; width: 2px; border-radius: 2px; background: rgb(236, 236, 240); }
.gl-step.now .gl-step__d i{ background: rgb(17, 17, 17); box-shadow: none; }
.gl-step__b small{ display: block; font-size: 12.5px; font-weight: 500; color: rgb(142, 142, 147); }
.gl-step__b b{ display: block; font-size: 15px; font-weight: 600; letter-spacing: -0.2px; margin-top: 2px; }
.gl-step__b span{ display: block; font-size: 13px; color: rgb(142, 142, 147); line-height: 1.4; margin-top: 2px; }
.gl-imp{ padding: 16px 18px; }
.gl-imp b{ display: block; font-size: 15px; letter-spacing: -0.2px; }
.gl-imp p{ margin: 6px 0px 0px; font-size: 13.5px; line-height: 1.5; color: rgb(110, 110, 115); }
.gl-opt.sel,.gl-tr.sel{ background: rgb(246, 238, 243); box-shadow: rgba(160, 80, 120, 0.14) 0px 0px 0px 1px inset; }
.gl-opt.sel .gl-opt__ck{ background: rgb(29, 2, 12); box-shadow: none; color: rgb(255, 255, 255); }
.gl-tr.sel .gl-tr__rd{ box-shadow: rgb(29, 2, 12) 0px 0px 0px 7px inset; }
.gl-cons.on i{ background: rgb(29, 2, 12); }
.gl-sc5 button{ box-shadow: rgba(12, 14, 18, 0.08) 0px 0px 0px 1.5px inset; }
.gl-sc5 button i{ width: 8px; height: 8px; background: rgba(12, 14, 18, 0.16); transition: background 0.18s, transform 0.18s; }
.gl-sc5 button.sel{ background: rgb(29, 2, 12); color: rgb(255, 255, 255); box-shadow: none; }
.gl-sc5 button.sel i{ background: rgb(255, 158, 196); transform: scale(1.25); }
.gl-na button.sel{ background: rgb(246, 238, 243); color: rgb(29, 2, 12); box-shadow: rgba(160, 80, 120, 0.18) 0px 0px 0px 1px inset; }
.gl.gl--sv .gl-stars svg{ fill: rgb(224, 81, 143); fill-opacity: 0; stroke: rgba(160, 80, 120, 0.3); stroke-width: 1.5; stroke-linejoin: round; transition: stroke 0.2s, fill-opacity 0.22s; }
.gl.gl--sv .gl-stars button.lit svg{ fill: rgb(224, 81, 143); fill-opacity: 1; stroke: rgb(224, 81, 143); }
.gl-starl b{ font-weight: 500; color: rgb(12, 14, 18); }
.gl-ta{ box-shadow: rgba(12, 14, 18, 0.06) 0px 0px 0px 1px inset; }
.gl-ta:focus-within{ box-shadow: rgb(255, 197, 220) 0px 0px 0px 1.5px inset; }
.gl.gl--sv{ background: rgb(255, 255, 255); }
.gl.gl--sv .gl-sbg{ background: linear-gradient(rgb(255, 255, 255) 75%, rgba(255, 255, 255, 0)); }
.gl.gl--sv .gl-foot{ background: linear-gradient(rgba(255, 255, 255, 0), rgb(255, 255, 255) 22px); }
.gl.gl--sv .gl-prog{ gap: 5px; }
.gl.gl--sv .gl-prog i{ height: 3px; background: rgba(12, 14, 18, 0.08); }
.gl.gl--sv .gl-prog i b{ background: rgb(29, 2, 12); }
.gl.gl--sv .gl-opt{ background: rgb(251, 251, 252); box-shadow: rgba(12, 14, 18, 0.07) 0px 0px 0px 1px inset; }
.gl.gl--sv .gl-opt.sel{ background: rgb(246, 238, 243); box-shadow: rgba(160, 80, 120, 0.14) 0px 0px 0px 1px inset; }
.gl.gl--sv .gl-ta{ background: rgb(251, 251, 252); box-shadow: rgba(12, 14, 18, 0.07) 0px 0px 0px 1px inset; }
.gl.gl--sv .gl-ta:focus-within{ box-shadow: rgb(255, 197, 220) 0px 0px 0px 1.5px inset; }
.gl.gl--sv .xs-card{ box-shadow: rgba(20, 4, 12, 0.05) 0px 6px 18px, rgba(12, 14, 18, 0.03) 0px 0px 0px 1px inset; }
.gl.gl--sv .gl-btn{ height: 56px; background: rgb(29, 2, 12); }
.gl.gl--sv .gl-btn[disabled]{ background: rgb(29, 2, 12); opacity: 0.22; }

/* ---- src/styles/40-more-area.css ---- */
/* СГЕНЕРИРОВАНО design-preview/miniapp-v3-dev/tools/extract_css.js из прототипа nav-v2
   (состояния: more_area.js). Правила взяты в порядке каскада прототипа; не правьте
   руками — поправка поверх живёт в файлах стилей с бОльшим номером. */
.xs-track{ display: flex; gap: 4px; margin-top: 16px; }
.xs-track i{ flex: 1 1 0px; height: 4px; border-radius: 100px; background: rgb(236, 236, 239); }
.xs-track i.d{ background: rgb(17, 17, 17); }
.xs-track i.now{ background: rgb(142, 142, 147); }
.xs-lead b{ display: block; font-size: 19px; font-weight: 600; letter-spacing: -0.45px; color: rgb(17, 17, 17); }
.xs-lead small{ display: block; font-size: 14px; color: rgb(142, 142, 147); margin-top: 4px; }
.xs-soft--solo{ margin: 0px auto; }
.xs-cta{ margin-top: 0px; box-shadow: none; }
.tp-card{ background: rgb(246, 246, 248); border-radius: 20px; padding: 14px 14px 12px; margin-top: 10px; }
@keyframes nvpop { 
  0% { transform: scale(0.86); }
  55% { transform: scale(1.1); }
  100% { transform: none; }
}
.xs-field textarea{ flex: 1 1 auto; min-width: 0px; border: 0px; background: none; outline: none; font-family: inherit; font-size: 17px; color: rgb(17, 17, 17); letter-spacing: -0.2px; }
.xs-field textarea{ resize: none; height: auto; min-height: 72px; padding: 13px 0px; line-height: 1.4; }
.xs-field--ta{ height: auto; align-items: flex-start; }
.xs-field textarea::placeholder{ color: rgb(174, 174, 178); }
.xs-bar2 .btn[disabled]{ background: rgb(209, 209, 214); cursor: default; }
.xs-lbl:first-child{ margin-top: 0px; }
.xs-faq .xs-row{ align-items: flex-start; }
.xs-faq__a{ display: none; padding: 0px 18px 14px; font-size: 14.5px; line-height: 1.5; color: rgb(58, 58, 60); }
.xs-faq .is-open + .xs-faq__a{ display: block; }
.xs-faq .is-open .chev{ transform: rotate(90deg); }
.xs-faq .chev{ transition: transform 0.25s; }
.xs-av--ph{ background: radial-gradient(60% 55% at 50% 38%, rgb(243, 226, 214) 0px, rgb(243, 226, 214) 45%, transparent 46%), radial-gradient(90% 60% at 50% 100%, rgb(233, 211, 196) 0px, rgb(233, 211, 196) 55%, transparent 56%), linear-gradient(160deg, rgb(205, 178, 162), rgb(169, 139, 123)); }
.xs-note--in b{ color: rgb(17, 17, 17); }
.xs-head-st{ font-size: 13.5px; color: rgb(142, 142, 147); margin-bottom: 6px; }
.xs-head-st.is-err{ color: rgb(215, 55, 47); }
.xs-cta--in{ margin-top: 10px !important; width: 100%; }
.ot-done{ display: flex; flex-direction: column; align-items: center; text-align: center; padding: 96px 16px 140px; }
.ot-done__ok{ width: 84px; height: 84px; border-radius: 50%; background: rgb(29, 2, 12); color: rgb(255, 255, 255); display: grid; place-items: center; box-shadow: rgba(12, 14, 18, 0.22) 0px 18px 40px, rgba(12, 14, 18, 0.05) 0px 0px 0px 10px; animation: 0.6s cubic-bezier(0.2, 1.6, 0.4, 1) 0s 1 normal none running otpop; }
.ot-done__ok svg{ width: 38px; height: 38px; stroke-width: 2.6px; }
@keyframes otpop { 
  0% { transform: scale(0.4); opacity: 0; }
  100% { transform: none; opacity: 1; }
}
.ot-done > b{ font-size: 30px; font-weight: 700; letter-spacing: -1px; color: rgb(17, 17, 17); margin-top: 22px; }
.ot-done > p{ margin: 6px 0px 0px; font-size: 16px; color: rgb(58, 58, 60); }
.ot-soft{ margin-top: 16px; height: 46px; padding: 0px 20px; border: 0px; border-radius: 100px; background: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.07) 0px 6px 20px; font-family: inherit; font-size: 15px; font-weight: 600; color: rgb(17, 17, 17); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.ot-soft svg{ width: 17px; height: 17px; }
.xs-more{ position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 54px; padding: 8px 18px; cursor: pointer; box-shadow: rgb(236, 236, 239) 0px 1px 0px inset; }
.xs-more span{ font-size: 15px; font-weight: 600; color: rgb(17, 17, 17); }
.xs-more small{ font-size: 12px; color: rgb(142, 142, 147); margin-top: 1px; }
.xs-more--less span{ color: rgb(142, 142, 147); font-weight: 500; }
.xs-more__sp{ position: absolute; right: 18px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; border-width: 2px; border-style: solid; border-color: rgb(17, 17, 17) rgb(229, 229, 234) rgb(229, 229, 234); border-image: initial; opacity: 0; }
.mt-h{ display: flex; align-items: center; gap: 10px; padding: 12px 18px; position: relative; }
.mt-h + .mt-h::before{ content: ""; position: absolute; left: 18px; right: 18px; top: 0px; height: 1px; background: rgb(236, 236, 239); }
.mt-h .xs-b b{ font-size: 15px; font-weight: 500; }
.mt-st{ flex: 0 0 auto; font-size: 13px; color: rgb(142, 142, 147); }
.mt-st.is-warn{ color: rgb(194, 98, 43); }
.rf-scr.xs-scr--chat{ padding: 0px; overflow: hidden; background: rgb(255, 255, 255); }
.rf-scr.xs-scr--chat .xs-root{ position: absolute; inset: 0px; }

.rf-app.in-chat .dock{ transform: translateY(130px); opacity: 0; pointer-events: none; }

.fb-lead{ font-size: 24px; font-weight: 700; letter-spacing: -0.7px; color: rgb(17, 17, 17); margin: 10px 4px 0px; }
.fb-cats{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fb-cat{ display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 3px; min-height: 128px; padding: 14px; border: 0px; border-radius: 22px; background: rgb(255, 255, 255); font-family: inherit; cursor: pointer; transition: transform 0.2s; }
.fb-cat:active{ transform: scale(0.97); }
.fb-cat span{ width: 38px; height: 38px; border-radius: 12px; background: rgb(241, 241, 243); display: grid; place-items: center; color: rgb(17, 17, 17); margin-bottom: 8px; }
.fb-cat span svg{ width: 19px; height: 19px; }
.fb-cat b{ font-size: 15.5px; font-weight: 600; color: rgb(17, 17, 17); letter-spacing: -0.25px; }
.fb-cat small{ font-size: 12.5px; line-height: 1.35; color: rgb(142, 142, 147); }
.fb-cats .fb-cat:nth-child(3):last-child{ grid-column: 1 / -1; min-height: 0px; }
.fb-to{ display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 12px 14px; border-radius: 18px; background: rgb(255, 255, 255); font-size: 13.5px; color: rgb(58, 58, 60); }
.fb-to svg{ width: 18px; height: 18px; flex: 0 0 auto; }
.fb-ta textarea{ min-height: 120px; }
.fb-shot{ display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 10px; height: 48px; padding: 0px 16px; border: 0px; border-radius: 16px; background: rgb(255, 255, 255); box-shadow: rgb(229, 229, 234) 0px 0px 0px 1.5px inset; font-family: inherit; font-size: 14.5px; font-weight: 600; color: rgb(17, 17, 17); cursor: pointer; }
.fb-shot svg{ width: 18px; height: 18px; }
.fb-shot.on{ box-shadow: none; background: rgb(234, 246, 237); color: rgb(31, 122, 58); }
.fb-stats{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fb-stats div{ padding: 14px; border-radius: 20px; background: rgb(255, 255, 255); text-align: center; }
.fb-stats b{ display: block; font-size: 26px; font-weight: 700; letter-spacing: -0.8px; color: rgb(17, 17, 17); }
.fb-stats span{ font-size: 12.5px; color: rgb(142, 142, 147); }
.fb-it{ padding: 14px 18px; position: relative; }
.fb-it + .fb-it::before{ content: ""; position: absolute; left: 18px; right: 18px; top: 0px; height: 1px; background: rgb(236, 236, 239); }
.fb-it__h{ display: flex; gap: 12px; align-items: flex-start; }
.fb-it__ic{ width: 36px; height: 36px; border-radius: 12px; background: rgb(241, 241, 243); display: grid; place-items: center; flex: 0 0 auto; }
.fb-it__ic svg{ width: 17px; height: 17px; }
.fb-it .xs-b small{ white-space: normal; margin: 0px 0px 2px; font-size: 12px; }
.fb-it .xs-b b{ font-size: 15px; line-height: 1.35; font-weight: 500; }
.fb-steps{ display: flex; align-items: center; gap: 4px; margin: 10px 0px 0px 48px; }
.fb-steps i{ width: 22px; height: 4px; border-radius: 4px; background: rgb(229, 229, 234); }
.fb-steps i.on{ background: rgb(17, 17, 17); }
.fb-st{ margin-left: 8px; font-size: 12.5px; font-weight: 600; color: rgb(58, 58, 60); }
.fb-st--done{ color: rgb(31, 122, 58); }
.fb-ans{ margin: 10px 0px 0px 48px; padding: 10px 12px; border-radius: 14px; background: rgb(246, 246, 248); font-size: 13.5px; line-height: 1.45; color: rgb(58, 58, 60); }
.fb-ans b{ display: block; font-size: 12px; color: rgb(142, 142, 147); font-weight: 600; margin-bottom: 2px; }
.fb-done{ width: 100%; margin-top: 22px; text-align: left; }
.mt-hero{ padding: 18px; }
.mt-hero.is-new,.mt-ev.is-new,.mt-cd.is-new{ animation: 2.4s ease-out 0s 1 normal none running mtnew; }
@keyframes mtnew { 
  0%, 30% { box-shadow: rgba(17, 17, 17, 0.9) 0px 0px 0px 3px; }
  100% { box-shadow: rgba(17, 17, 17, 0) 0px 0px 0px 0px; }
}
.mt-hero__k{ display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: rgb(142, 142, 147); }
.mt-hero__k em{ font-style: normal; font-weight: 600; color: rgb(17, 17, 17); }
.mt-hero__row{ display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.mt-hero__row > img{ width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.mt-hero__row .xs-b b{ display: block; font-size: 18px; font-weight: 600; letter-spacing: -0.3px; color: rgb(17, 17, 17); }
.mt-hero__row .xs-b small{ display: block; font-size: 13.5px; color: rgb(142, 142, 147); margin-top: 2px; }
.mt-hero__row .xs-b em{ display: block; font-style: normal; font-size: 12.5px; color: rgb(142, 142, 147); margin-top: 4px; }
.mt-hero__cal{ flex: 0 0 auto; width: 54px; height: 58px; border-radius: 16px; background: rgb(243, 243, 245); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.mt-hero__cal small{ font-size: 11.5px; font-weight: 600; color: rgb(142, 142, 147); text-transform: uppercase; letter-spacing: 0.04em; }
.mt-hero__cal b{ font-size: 24px; font-weight: 700; color: rgb(17, 17, 17); margin-top: 3px; letter-spacing: -0.5px; }
.mt-pol{ display: flex; gap: 9px; align-items: flex-start; margin-top: 14px; padding: 11px 13px; border-radius: 16px; background: rgb(246, 246, 248); font-size: 13.5px; line-height: 1.35; color: rgb(58, 58, 60); }
.mt-pol i{ flex: 0 0 auto; width: 16px; height: 16px; margin-top: 1px; border-radius: 50%; box-shadow: rgb(142, 142, 147) 0px 0px 0px 1.6px inset; position: relative; }
.mt-pol i::after{ content: ""; position: absolute; left: 7.2px; top: 3.5px; width: 1.6px; height: 5px; background: rgb(142, 142, 147); border-radius: 1px; box-shadow: rgb(142, 142, 147) 0px 6.5px 0px; }
.mt-pol--late,.mt-pol--limit{ background: rgb(251, 244, 236); color: rgb(106, 74, 42); }
.mt-pol--late i,.mt-pol--limit i{ box-shadow: rgb(184, 117, 45) 0px 0px 0px 1.6px inset; }
.mt-pol--late i::after,.mt-pol--limit i::after{ background: rgb(184, 117, 45); box-shadow: rgb(184, 117, 45) 0px 6.5px 0px; }
.mt-pol--out{ margin-top: 10px; background: rgb(255, 255, 255); }
.mt-hero__btns{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.mt-hero__btns button{ height: 46px; border: 0px; border-radius: 100px; background: rgb(17, 17, 17); color: rgb(255, 255, 255); font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.mt-hero__btns button + button{ background: rgb(241, 241, 243); color: rgb(17, 17, 17); }
.mt-hero--empty{ text-align: center; }
.mt-hero--empty b{ display: block; font-size: 17px; font-weight: 600; color: rgb(17, 17, 17); }
.mt-hero--empty small{ display: block; font-size: 13.5px; color: rgb(142, 142, 147); margin: 4px 0px 12px; }
.mt-cal{ padding: 14px 12px 6px; }
.mt-cal__h{ display: flex; align-items: center; justify-content: space-between; padding: 0px 2px 10px; }
.mt-cal__h b{ font-size: 15px; font-weight: 600; color: rgb(17, 17, 17); }
.mt-cal__a{ width: 34px; height: 34px; border: 0px; border-radius: 50%; background: rgb(243, 243, 245); color: rgb(17, 17, 17); display: grid; place-items: center; cursor: pointer; padding: 0px; }
.mt-cal__a svg{ width: 16px; height: 16px; }
.mt-cal__a--r svg{ transform: scaleX(-1); }
.mt-cal__w,.mt-cal__g{ display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.mt-cal__w span{ text-align: center; font-size: 11.5px; font-weight: 600; color: rgb(174, 174, 178); padding-bottom: 4px; }
.mt-cd{ height: 46px; border: 0px; border-radius: 14px; background: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; font-family: inherit; padding: 0px; }
.mt-cd b{ font-size: 16px; font-weight: 500; color: rgb(17, 17, 17); line-height: 1; }
.mt-cd.is-past b{ color: rgb(174, 174, 178); }
.mt-cd i{ display: flex; gap: 3px; height: 5px; }
.mt-cd u,.mt-cal__leg u{ display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: rgb(17, 17, 17); }
.mt-cd u.t,.mt-cal__leg u.t{ background: none; box-shadow: rgb(17, 17, 17) 0px 0px 0px 1.4px inset; }
.mt-cd u.x{ background: rgb(199, 199, 204); }
.mt-cd.is-past u{ opacity: 0.45; }
.mt-cd.is-today b{ width: 28px; height: 28px; margin: -6px 0px -3px; border-radius: 50%; display: grid; place-items: center; background: rgb(17, 17, 17); color: rgb(255, 255, 255); font-weight: 600; }
.mt-cd.on{ background: rgb(241, 241, 243); }
.mt-cal__leg{ display: flex; gap: 14px; padding: 10px 4px 2px; font-size: 12px; color: rgb(142, 142, 147); }
.mt-cal__leg u{ margin-right: 6px; vertical-align: 1px; }
.mt-cal__lh{ font-size: 12.5px; font-weight: 600; color: rgb(142, 142, 147); padding: 14px 6px 4px; border-top: 1px solid rgb(236, 236, 239); margin-top: 10px; }
.mt-ev{ display: flex; align-items: center; gap: 12px; padding: 10px 6px; border-radius: 16px; cursor: pointer; }
.mt-ev + .mt-ev{ border-top: 1px solid rgb(241, 241, 243); border-radius: 0px; }
.mt-ev__d{ flex: 0 0 auto; width: 38px; text-align: center; line-height: 1.05; }
.mt-ev__d b{ display: block; font-size: 18px; font-weight: 600; color: rgb(17, 17, 17); }
.mt-ev__d span{ font-size: 11.5px; color: rgb(142, 142, 147); }
.mt-ev .xs-b b{ display: block; font-size: 15px; font-weight: 500; color: rgb(17, 17, 17); }
.mt-ev .xs-b small{ display: block; font-size: 12.5px; color: rgb(142, 142, 147); margin-top: 1px; }
.mt-ev__av{ width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.mt-q__c{ display: flex; gap: 6px; }
.mt-q__c i{ flex: 1 1 0px; height: 8px; border-radius: 100px; background: rgb(255, 255, 255); box-shadow: rgb(209, 209, 214) 0px 0px 0px 1.5px inset; }
.mt-q__c i.u{ background: rgb(17, 17, 17); box-shadow: none; }
.mt-q__c i.s{ background: rgb(255, 255, 255); box-shadow: rgb(17, 17, 17) 0px 0px 0px 1.8px inset; }
.mt-q__t{ margin-top: 12px; }
.mt-q__t b{ display: block; font-size: 15px; font-weight: 600; color: rgb(17, 17, 17); }
.mt-q__t small{ display: block; font-size: 12.5px; color: rgb(142, 142, 147); margin-top: 2px; }
.mt-q__b{ margin-top: 14px; }
.mt-one{ display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
.mt-one .xs-b small{ display: block; font-size: 12.5px; color: rgb(142, 142, 147); }
.mt-one .xs-b b{ display: block; font-size: 16.5px; font-weight: 600; color: rgb(17, 17, 17); margin-top: 1px; }
.mt-one__ic{ width: 40px; height: 40px; border-radius: 12px; background: rgb(243, 243, 245); display: grid; place-items: center; flex: 0 0 auto; }
.mt-one__ic svg{ width: 20px; height: 20px; }
.xs-sheet .mt-one{ padding: 12px 14px; border-radius: 18px; background: rgb(246, 246, 248); }
.mt-dcs{ display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.mt-dc{ height: 74px; border: 0px; border-radius: 18px; background: rgb(255, 255, 255); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-family: inherit; cursor: pointer; padding: 0px 2px; transition: background 0.2s, color 0.2s; }
.mt-dc span{ font-size: 12px; font-weight: 600; color: rgb(142, 142, 147); }
.mt-dc b{ font-size: 18px; font-weight: 600; color: rgb(17, 17, 17); min-height: 22px; line-height: 22px; }
.mt-dc small{ font-size: 10px; color: rgb(142, 142, 147); line-height: 1.1; text-align: center; }
.mt-dc.is-cur{ box-shadow: rgb(199, 199, 204) 0px 0px 0px 1.5px inset; }
.mt-dc.on{ background: rgb(17, 17, 17); }
.mt-dc.on span,.mt-dc.on small{ color: rgba(255, 255, 255, 0.7); }
.mt-dc.on b{ color: rgb(255, 255, 255); }
.mt-dc[disabled]{ background: rgb(236, 236, 239); cursor: default; }
.mt-dc[disabled] b{ color: rgb(199, 199, 204); }
.mt-sls{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mt-sl{ height: 58px; border: 0px; border-radius: 18px; background: rgb(255, 255, 255); font-family: inherit; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.mt-sl b{ font-size: 17px; font-weight: 600; color: rgb(17, 17, 17); }
.mt-sl small{ font-size: 11.5px; color: rgb(142, 142, 147); }
.mt-sl.on{ background: rgb(17, 17, 17); }
.mt-sl.on b{ color: rgb(255, 255, 255); }
.mt-sl.on small{ color: rgba(255, 255, 255, 0.65); }
.mt-sl.is-off{ background: rgb(236, 236, 239); cursor: default; }
.mt-sl.is-off b{ color: rgb(174, 174, 178); text-decoration: line-through rgb(199, 199, 204); }
.mt-sl.is-cur{ background: rgb(255, 255, 255); box-shadow: rgb(199, 199, 204) 0px 0px 0px 1.5px inset; cursor: default; }
.mt-sl.is-cur b{ text-decoration: none; color: rgb(142, 142, 147); }
.mt-ba{ display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: 18px; background: rgb(246, 246, 248); margin-bottom: 10px; }
.mt-ba > div{ flex: 1 1 0px; min-width: 0px; }
.mt-ba small{ display: block; font-size: 12px; color: rgb(142, 142, 147); margin-bottom: 3px; }
.mt-ba s{ font-size: 14.5px; color: rgb(142, 142, 147); text-decoration-color: rgb(199, 199, 204); }
.mt-ba b{ font-size: 14.5px; font-weight: 600; color: rgb(17, 17, 17); }
.mt-ba > i{ flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: rgb(255, 255, 255); display: grid; place-items: center; }
.mt-ba > i svg{ width: 14px; height: 14px; transform: scaleX(-1); }
.mt-ba--one b{ font-size: 16px; }
.rf-app.in-chat .xs-undo{ bottom: 150px; }
.mt-tz{ display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 20px; background: rgb(255, 255, 255); }
.mt-tz button{ flex: 0 0 auto; height: 32px; padding: 0px 12px; border: 0px; border-radius: 100px; background: rgb(241, 241, 243); font-family: inherit; font-size: 13.5px; font-weight: 600; color: rgb(17, 17, 17); cursor: pointer; }
.mt-sl.is-night small{ color: rgb(184, 117, 45); }
.tm-avs{ display: flex; flex: 0 0 auto; }
.tm-avs img,.tm-avs i{ width: 38px; height: 38px; border-radius: 50%; object-fit: cover; box-shadow: rgb(255, 255, 255) 0px 0px 0px 2.5px; background: rgb(209, 209, 214); }
.tm-avs > :where(:not(:first-child)){ margin-left: -10px; }
.tm-avs i{ display: grid; place-items: center; font-style: normal; font-size: 15px; font-weight: 600; color: rgb(255, 255, 255); background: rgb(142, 142, 147); }
.tm-chat{ display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 16px; }
.tm-chat .xs-b{ flex: 1 1 0px; min-width: 0px; }
.tm-chat .xs-b b{ display: block; font-size: 16px; font-weight: 600; color: rgb(17, 17, 17); }
.tm-chat .xs-b small{ display: block; font-size: 13px; line-height: 1.35; color: rgb(142, 142, 147); margin-top: 2px; white-space: normal; }
.tm-chat--sh{ padding: 12px 14px; border-radius: 18px; background: rgb(246, 246, 248); }
.tp-hero{ position: relative; height: 476px; overflow: hidden; background: rgb(233, 230, 225); flex: 0 0 auto; }
.tp-hero__ph{ position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%; }
.tp-hero__sh{ position: absolute; inset: 0px; pointer-events: none; background: linear-gradient(rgba(245, 244, 242, 0.55) 0%, rgba(245, 244, 242, 0) 16%), linear-gradient(rgba(245, 244, 242, 0) 54%, rgba(245, 244, 242, 0.62) 72%, rgba(245, 244, 242, 0.94) 86%, rgb(245, 244, 242) 96%); }
.tp-back{ position: absolute; left: 16px; top: 58px; z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 0px; display: grid; place-items: center; color: rgb(17, 17, 17); background: rgba(255, 255, 255, 0.62); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: rgba(0, 0, 0, 0.06) 0px 0px 0px 0.5px inset; cursor: pointer; }
.tp-back svg{ width: 20px; height: 20px; }
.tp-hero--mono{ height: 396px; background: radial-gradient(80% 60% at 78% 34%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 70%), linear-gradient(rgb(217, 212, 204) 0%, rgb(227, 223, 216) 48%, rgb(235, 232, 227) 100%); }
.tp-hero--mono .tp-hero__sh{ background: linear-gradient(rgba(245, 244, 242, 0) 46%, rgba(245, 244, 242, 0.6) 70%, rgb(245, 244, 242) 96%); }
.tp-hero__mono{ position: absolute; right: -34px; top: 36px; font-size: 440px; font-weight: 500; line-height: 1; letter-spacing: -0.06em; color: rgba(70, 60, 50, 0.075); user-select: none; }
.tp-id{ position: relative; z-index: 1; margin-top: -112px; padding: 0px 20px; }
.tp-id__av{ position: relative; display: block; width: 68px; height: 68px; margin: 0px 0px 18px; }
.tp-id__av img{ width: 100%; height: 100%; border-radius: 50%; object-fit: cover; box-shadow: rgb(245, 244, 242) 0px 0px 0px 3px, rgba(40, 34, 28, 0.14) 0px 10px 24px; }
.tp-id__av i{ display: none; position: absolute; right: 1px; bottom: 1px; width: 14px; height: 14px; border-radius: 50%; background: rgb(52, 199, 89); box-shadow: rgb(245, 244, 242) 0px 0px 0px 2.5px; }
.tp-hero--mono + .tp-id{ margin-top: -150px; }
.tp-id small{ display: block; font-size: 13px; font-weight: 500; color: rgb(110, 110, 115); }
.tp-id h1{ margin: 6px 0px 0px; font-size: 38px; font-weight: 600; letter-spacing: -1.4px; line-height: 1.02; color: rgb(17, 17, 17); }
.tp-id p{ margin: 9px 0px 0px; font-size: 15px; line-height: 1.4; color: rgb(58, 58, 60); }
.tp-id__m{ display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(0, 0, 0, 0.08); font-size: 13px; font-weight: 500; color: rgb(58, 58, 60); }
.tp-id__m > span{ display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.tp-id__ok svg{ width: 14px; height: 14px; stroke-width: 2.4; color: rgb(17, 17, 17); }
.tp-id__st i{ width: 7px; height: 7px; border-radius: 50%; background: rgb(174, 174, 178); }
.tp{ position: relative; z-index: 1; background: rgb(245, 244, 242); padding: 24px 16px 0px; flex: 1 0 auto; }
.tp-end{ height: 120px; }
.tp-facts{ display: grid; grid-template-columns: repeat(3, 1fr); background: rgb(255, 255, 255); border-radius: 22px; padding: 16px 2px; }
.tp-facts div{ text-align: center; padding: 0px 6px; border-left: 1px solid rgb(239, 239, 239); min-width: 0px; }
.tp-facts div:first-child{ border-left: 0px; }
.tp-facts b{ display: block; font-size: 20px; font-weight: 600; letter-spacing: -0.6px; color: rgb(17, 17, 17); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tp-facts span{ display: block; font-size: 11.5px; line-height: 1.25; color: rgb(142, 142, 147); margin-top: 3px; }
.tp-acts{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.tp-acts button{ display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 15px 6px 13px; border: 0px; border-radius: 22px; background: rgb(255, 255, 255); font-family: inherit; font-size: 14.5px; font-weight: 600; color: rgb(17, 17, 17); cursor: pointer; }
.tp-acts span{ position: relative; width: 24px; height: 24px; color: rgb(17, 17, 17); display: grid; place-items: center; margin-bottom: 5px; }
.tp-acts span svg{ width: 22px; height: 22px; }
.tp-acts span em{ position: absolute; right: -3px; top: -2px; width: 8px; height: 8px; border-radius: 50%; background: rgb(17, 17, 17); box-shadow: rgb(255, 255, 255) 0px 0px 0px 2px; }
.tp-acts i{ font-style: normal; font-size: 11.5px; font-weight: 500; color: rgb(142, 142, 147); }
.tp-acts i.is-hot{ color: rgb(17, 17, 17); font-weight: 600; }
.tp-sec{ display: flex; justify-content: space-between; align-items: baseline; font-size: 19px; font-weight: 600; letter-spacing: -0.45px; color: rgb(17, 17, 17); margin: 32px 4px 10px; }
.tp-sec em{ font-style: normal; font-size: 13px; font-weight: 500; letter-spacing: 0px; color: rgb(142, 142, 147); }
.tp-card{ background: rgb(255, 255, 255); border-radius: 24px; padding: 18px; }
.tp-card--l{ padding: 4px 18px; }
.tp-about{ margin: 0px; font-size: 15.5px; line-height: 1.5; color: rgb(28, 28, 30); }
.tp-specs{ margin-top: 16px; padding-top: 14px; border-top: 1px solid rgb(239, 239, 239); }
.tp-specs small{ display: block; font-size: 12.5px; font-weight: 500; color: rgb(142, 142, 147); }
.tp-specs p{ margin: 4px 0px 0px; font-size: 14.5px; line-height: 1.5; color: rgb(17, 17, 17); }
.tp-n{ display: flex; gap: 14px; padding: 14px 0px; border-top: 1px solid rgb(239, 239, 239); }
.tp-n:first-child{ border-top: 0px; padding-top: 0px; }
.tp-n:last-child{ padding-bottom: 0px; }
.tp-n > span{ width: 22px; flex: 0 0 auto; padding-top: 4px; color: rgb(174, 174, 178); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tp-n b{ display: block; font-size: 15px; font-weight: 600; color: rgb(17, 17, 17); letter-spacing: -0.2px; margin-top: 3px; }
.tp-n small{ display: block; font-size: 13px; line-height: 1.42; color: rgb(142, 142, 147); margin-top: 3px; }
.tp-cred{ display: flex; align-items: flex-start; gap: 12px; padding: 14px 0px; border-top: 1px solid rgb(239, 239, 239); }
.tp-cred:first-child{ border-top: 0px; }
.tp-cred > i{ width: 16px; flex: 0 0 auto; color: rgb(17, 17, 17); display: grid; place-items: center; margin-top: 2px; }
.tp-cred > i svg{ width: 15px; height: 15px; stroke-width: 2.4; }
.tp-cred > div{ flex: 1 1 0%; min-width: 0px; }
.tp-cred b{ display: block; font-size: 15px; font-weight: 500; line-height: 1.3; color: rgb(17, 17, 17); }
.tp-cred small{ display: block; margin-top: 3px; font-size: 12.5px; color: rgb(142, 142, 147); }
.tp-cred > em{ flex: 0 0 auto; font-style: normal; font-size: 12.5px; font-weight: 500; color: rgb(142, 142, 147); margin-top: 2px; }
.tp-pain{ display: flex; gap: 12px; align-items: flex-start; margin-top: 8px; padding: 15px 16px; border-radius: 22px; background: rgb(255, 255, 255); }
.tp-pain > span{ width: 20px; flex: 0 0 auto; color: rgb(17, 17, 17); display: grid; place-items: center; margin-top: 1px; }
.tp-pain > span svg{ width: 18px; height: 18px; }
.tp-pain p{ margin: 0px; font-size: 13.5px; line-height: 1.45; color: rgb(110, 110, 115); }
.tp-pain b{ color: rgb(17, 17, 17); font-weight: 600; }
.tp-next__h{ display: flex; gap: 14px; align-items: center; }
.tp-cal{ width: 54px; height: 58px; flex: 0 0 auto; border-radius: 16px; background: rgb(17, 17, 17); color: rgb(255, 255, 255); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.tp-cal small{ font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.6); }
.tp-cal b{ font-size: 23px; font-weight: 600; letter-spacing: -0.5px; line-height: 1.05; }
.tp-next .xs-b small{ display: block; font-size: 12.5px; font-weight: 500; color: rgb(142, 142, 147); }
.tp-next .xs-b b{ display: block; font-size: 17px; font-weight: 600; letter-spacing: -0.3px; color: rgb(17, 17, 17); margin-top: 2px; }
.tp-next .xs-b span{ display: block; font-size: 13px; color: rgb(142, 142, 147); margin-top: 2px; }
.tp-next__b{ display: flex; gap: 8px; margin-top: 16px; }
.tp-next__b button{ flex: 1 1 0px; height: 44px; border: 0px; border-radius: 100px; background: rgb(242, 242, 241); color: rgb(17, 17, 17); font-family: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; }
.tp-foot{ margin: 12px 2px 0px; font-size: 12.5px; line-height: 1.45; color: rgb(142, 142, 147); }
.tp-foot--c{ text-align: center; margin-top: 8px; }
.tp-zones{ padding: 6px 18px; }
.tp-z{ display: flex; gap: 14px; align-items: flex-start; padding: 13px 0px; border-width: 1px 0px 0px; border-top-style: solid; border-top-color: rgb(239, 239, 239); width: 100%; text-align: left; background: none; border-left-style: initial; border-left-color: initial; border-right-style: initial; border-right-color: initial; border-bottom-style: initial; border-bottom-color: initial; font-family: inherit; color: inherit; }
.tp-z:first-child{ border-top: 0px; }
.tp-z > span{ width: 22px; flex: 0 0 auto; color: rgb(17, 17, 17); display: grid; place-items: center; margin-top: 1px; }
.tp-z > span svg{ width: 20px; height: 20px; }
.tp-z b{ display: block; font-size: 15px; font-weight: 600; color: rgb(17, 17, 17); letter-spacing: -0.2px; }
.tp-z small{ display: block; font-size: 13px; line-height: 1.4; color: rgb(142, 142, 147); margin-top: 2px; }
.tp-z--x{ align-items: center; cursor: pointer; margin-top: 2px; padding: 14px 0px 12px; }
.tp-z--x img{ width: 36px; height: 36px; border-radius: 50%; object-fit: cover; object-position: 50% 15%; flex: 0 0 auto; margin-left: -7px; margin-right: -7px; }
.tp-z--x > div{ flex: 1 1 0%; min-width: 0px; }
.tp-z--x b{ font-size: 14px; }
.tp-z--x .chev{ color: rgb(199, 199, 204); }
.tp-win__lead{ margin: 0px 0px 14px; font-size: 14.5px; line-height: 1.5; color: rgb(58, 58, 60); }
.tp-win__st{ display: flex; gap: 11px; align-items: flex-start; }
.tp-win__st > i{ width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: rgb(174, 174, 178); margin-top: 7px; }
.tp-win__st b{ display: block; font-size: 16px; font-weight: 600; letter-spacing: -0.25px; color: rgb(17, 17, 17); }
.tp-win__st span{ display: block; margin-top: 2px; font-size: 13px; line-height: 1.4; color: rgb(142, 142, 147); }
.tp-win__g{ display: grid; grid-template-columns: 1.25fr 1.1fr 1fr; margin-top: 16px; border-top: 1px solid rgb(239, 239, 239); border-bottom: 1px solid rgb(239, 239, 239); }
.tp-win__g > div{ padding: 11px 0px 11px 12px; min-width: 0px; border-left: 1px solid rgb(239, 239, 239); }
.tp-win__g > div:first-child{ padding-left: 0px; border-left: 0px; }
.tp-win__g span{ display: block; font-size: 11.5px; color: rgb(142, 142, 147); }
.tp-win__g b{ display: block; margin-top: 2px; font-size: 14px; font-weight: 600; color: rgb(17, 17, 17); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tp-qs{ margin-top: 16px; padding-top: 14px; border-top: 1px solid rgb(239, 239, 239); display: flex; flex-wrap: wrap; gap: 6px; }
.tp-qs small{ flex: 1 1 100%; font-size: 12.5px; font-weight: 500; color: rgb(142, 142, 147); margin-bottom: 2px; }
.tp-qs button{ height: 36px; padding: 0px 13px; border: 0px; border-radius: 100px; background: rgb(255, 255, 255); box-shadow: rgb(229, 229, 227) 0px 0px 0px 1px inset; font-family: inherit; font-size: 13.5px; font-weight: 500; color: rgb(17, 17, 17); cursor: pointer; }
.tp-tg{ display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px 14px; border-radius: 18px; background: rgb(245, 244, 242); cursor: pointer; }
.tp-tg .xs-b{ flex: 1 1 0%; min-width: 0px; }
.tp-tg .xs-b b{ display: block; font-size: 15px; font-weight: 600; color: rgb(17, 17, 17); }
.tp-tg .xs-b small{ display: block; font-size: 12.5px; line-height: 1.35; color: rgb(142, 142, 147); margin-top: 1px; white-space: normal; overflow: visible; }
.tp-tg .tm-avs img,.tp-tg .tm-avs i{ box-shadow: rgb(245, 244, 242) 0px 0px 0px 2.5px; width: 34px; height: 34px; }
.tp-tg .tm-avs i{ background: rgb(142, 142, 147); color: rgb(255, 255, 255); }
.tp-cta{ display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; height: 54px; margin-top: 22px; border: 0px; border-radius: 100px; background: rgb(17, 17, 17); color: rgb(255, 255, 255); font-family: inherit; font-size: 16px; font-weight: 600; letter-spacing: -0.2px; cursor: pointer; }
.tp-cta svg{ width: 19px; height: 19px; }
.tp-rows{ border-radius: 24px; }
.xs-bar2 .btn[disabled]{ background: rgb(229, 229, 234); color: rgb(142, 142, 147); }
.ot-done__ok{ width: 72px; height: 72px; background: rgb(17, 17, 17); box-shadow: none; }
.ot-done__ok svg{ width: 32px; height: 32px; }
.ot-done > b{ font-size: 28px; }
.mt-dc small{ font-size: 12px; letter-spacing: -0.2px; }
.mt-dcs--nod .mt-dc{ height: 52px; }
.mt-st.is-warn{ color: rgb(142, 142, 147); }
.mt-ev .xs-b small{ white-space: normal; overflow: visible; text-overflow: clip; }
.mt-ev__d span{ font-size: 12px; }
.mt-sl small{ font-size: 12px; }
.mt-sl.on,.mt-sl.on.is-night{ background: rgb(255, 197, 220); }
.mt-sl.on b{ color: rgb(10, 13, 18); }
.mt-sl.on small{ color: rgba(10, 13, 18, 0.62); }
.mt-dc.on{ background: rgb(255, 197, 220); }
.mt-dc.on b{ color: rgb(10, 13, 18); }
.mt-dc.on span,.mt-dc.on small{ color: rgba(10, 13, 18, 0.62); }
.mt-sl small svg{ width: 11px; height: 11px; vertical-align: -1px; margin-right: 3px; }
.mt-sl.is-night small{ color: rgb(184, 80, 31); font-weight: 600; }
.mt-sl.on.is-night small{ color: rgb(138, 58, 20); }
.mt-tz.bk-tz{ display: flex; align-items: flex-start; gap: 10px; min-height: 0px; padding: 2px 12px 2px 18px; border-radius: 0px; background: none; color: rgb(17, 17, 17); }
.bk-tz__ic{ width: 20px; height: 20px; flex: 0 0 auto; margin-top: 1px; display: grid; place-items: center; color: rgb(142, 142, 147); }
.bk-tz__ic svg{ width: 18px; height: 18px; }
.bk-tz__b{ flex: 1 1 auto; min-width: 0px; display: block; }
.bk-tz__b b{ display: block; font-size: 14.5px; font-weight: 500; line-height: 1.35; letter-spacing: -0.1px; color: rgba(12, 14, 18, 0.62); }
.bk-tz__b b span{ font-weight: 600; color: rgb(12, 14, 18); white-space: nowrap; }
.bk-tz__b small{ display: block; font-size: 12.5px; font-weight: 400; line-height: 1.35; color: rgba(12, 14, 18, 0.42); margin-top: 2px; }
.mt-tz.bk-tz button{ flex: 0 0 auto; min-width: 44px; height: 24px; margin: -2px 0px 0px; padding: 0px 2px 0px 6px; border: 0px; border-radius: 0px; background: none; color: rgb(17, 17, 17); font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.bk-tzh{ flex: 0 1 auto; min-width: 0px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 500; letter-spacing: 0px; text-transform: none; color: rgba(12, 14, 18, 0.5); background: none; border-radius: 0px; padding: 0px; }
.bk-tzh::before{ content: ""; width: 13px; height: 13px; flex: 0 0 auto; background: rgb(142, 142, 147); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E") center center / contain no-repeat; }
.bk-tzp{ display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; padding: 3px 9px; border-radius: 100px; background: rgb(241, 241, 243); color: rgb(58, 58, 60); font-size: 11.5px; font-weight: 600; line-height: 1.35; white-space: normal; }
.bk-tzp svg{ width: 12px; height: 12px; flex: 0 0 auto; }
.bk-tzl{ margin: -2px 0px 10px; }
.bk-tzl .bk-tzp{ margin-top: 0px; }
.mt-hero .bk-tzp{ display: flex; width: max-content; max-width: 100%; }
.xs-sheet.is-night .xs-sheet__h{ align-items: flex-start; }
.xs-sheet.is-night .xs-sheet__x{ margin-top: 6px; }
.xs-sheet.is-night .xs-sheet__t::before{ content: ""; display: block; width: 54px; height: 54px; margin: 6px 0px 12px; border-radius: 50%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8501f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 14.5A8 8 0 0 1 9.5 4a8 8 0 1 0 10.5 10.5Z'/%3E%3C/svg%3E") center center / 26px no-repeat rgba(255, 111, 70, 0.16); }
.xs-sheet.is-night .xs-sheet__s b{ color: rgb(17, 17, 17); }
.xs-sheet.is-night .xs-ok{ background: rgba(255, 111, 70, 0.16); color: rgb(184, 80, 31); }
.bk-nt{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.bk-nt > div{ padding: 12px 14px; border-radius: 18px; background: rgb(246, 246, 248); }
.bk-nt > div:first-child{ background: rgb(255, 244, 239); box-shadow: rgba(255, 111, 70, 0.35) 0px 0px 0px 1.5px inset; }
.bk-nt small{ display: block; font-size: 12px; color: rgb(142, 142, 147); }
.bk-nt b{ display: block; font-size: 15.5px; font-weight: 600; color: rgb(17, 17, 17); margin-top: 3px; }
.bk-nt em{ display: flex; align-items: center; gap: 4px; font-style: normal; font-size: 12px; color: rgb(142, 142, 147); margin-top: 3px; }
.bk-nt em svg{ width: 12px; height: 12px; flex: 0 0 auto; }
.bk-nt > div:first-child em{ color: rgb(184, 80, 31); font-weight: 600; }
.bk-nt__n{ margin: 0px 2px 12px; }
.mt-q__c i{ background: rgb(229, 229, 234); box-shadow: none; }

.mt-dcs--nod .mt-dc{ gap: 4px; }
.xs-track i.now{ background: rgb(17, 17, 17); opacity: 0.35; }
.mt-cd i{ height: 6px; }
.mt-cd u,.mt-cal__leg u{ width: 6px; height: 6px; }
.mt-cal__leg{ font-size: 13px; }
.xs-faq .xs-row{ min-height: 52px; position: relative; }
.xs-faq .xs-row + .xs-faq__a + .xs-row::before,.xs-faq .xs-faq__a + .xs-row::before{ content: ""; position: absolute; left: 18px; right: 0px; top: 0px; height: 1px; background: rgb(236, 236, 239); }
.ot-done button{ box-shadow: none; }
.fb-cat span{ background: rgb(241, 241, 243); color: rgb(58, 58, 60); }
.fb-st--new{ color: rgb(58, 58, 60); }
.fb-steps i.on{ background: rgb(31, 10, 23); }
.fb-it__ic{ background: rgb(241, 241, 243); color: rgb(58, 58, 60); }
.fb-thx .ot-done__ok{ width: 84px; height: 84px; background: rgb(29, 2, 12); box-shadow: rgba(12, 14, 18, 0.22) 0px 18px 40px, rgba(12, 14, 18, 0.05) 0px 0px 0px 10px; }
.fb-thx .ot-done__ok svg{ width: 38px; height: 38px; }
.fb-thx > b{ font-size: 30px; }
.fb-did .xs-ic{ width: 26px; height: 26px; border-radius: 50%; background: rgb(227, 245, 232); color: rgb(31, 122, 58); display: grid; place-items: center; }
.fb-did .xs-ic svg{ width: 15px; height: 15px; }
.fb-to svg{ color: rgb(142, 142, 147); }
.xs-subx{ margin-top: 18px; text-align: center; }
.xs-subx__b{ border: 0px; background: none; padding: 8px 16px; font-family: inherit; cursor: pointer; display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.xs-subx__b b{ font-size: 14.5px; font-weight: 500; color: rgb(110, 110, 115); }
.xs-subx__b small{ font-size: 12.5px; color: rgb(174, 174, 178); }
.xs-field.fb-ta{ background: rgb(255, 255, 255); }
.xs-field.fb-ta:focus-within{ box-shadow: rgb(31, 10, 23) 0px 0px 0px 1.5px inset; }
.mt-h .mt-h__why{ margin-top: 1px; color: rgb(174, 174, 178); }

.bk-tzp{ background: rgb(243, 243, 245); color: rgb(92, 92, 98); font-weight: 500; }
.bk-tzp svg{ color: rgb(142, 142, 147); }
.bk-tzh{ background: none; padding: 0px; color: rgb(142, 142, 147); font-weight: 500; font-size: 12.5px; }
.xs-faq .xs-row{ align-items: center; }
.xs-faq .xs-row + .xs-faq__a + .xs-row::before,.xs-faq .xs-faq__a + .xs-row::before{ right: 18px; }
.xs-av:not(.xs-av--ph):not(.xs-av--img),.tm-avs i{ font-weight: 600; box-shadow: rgba(255, 255, 255, 0.35) 0px 0px 0px 1px inset; background: linear-gradient(150deg, rgb(236, 236, 239), rgb(214, 214, 219)) !important; color: rgb(58, 58, 60) !important; }
.tm-avs i{ box-shadow: rgb(255, 255, 255) 0px 0px 0px 2.5px !important; }
.rf-app.gl-on .rf-toast{ bottom: 150px; }
.rf-app.gl-on .dock{ opacity: 0 !important; pointer-events: none !important; }
.gm-chc{ min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0px 22px 20px; box-sizing: border-box; }
.gm-chc img{ width: 84px; height: 84px; border-radius: 50%; object-fit: cover; box-shadow: rgba(0, 0, 0, 0.12) 0px 10px 30px; }
.gm-chc__ic{ width: 64px; height: 64px; border-radius: 50%; background: rgb(242, 242, 244); display: grid; place-items: center; color: rgb(17, 17, 17); }
.gm-chc__ic svg{ width: 26px; height: 26px; }
.gm-chc b{ display: block; margin-top: 16px; font-size: 19px; font-weight: 600; letter-spacing: -0.45px; color: rgb(17, 17, 17); }
.gm-chc p{ margin: 8px 0px 0px; font-size: 14.5px; line-height: 1.45; color: rgb(142, 142, 147); max-width: 290px; }
.gm-chc .gm-tag{ margin-top: 14px; }
.gm-tag{ display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: rgb(58, 58, 60); background: rgb(242, 242, 244); border-radius: 100px; padding: 6px 11px; }
.gm-tag svg{ width: 13px; height: 13px; }
.gm-qs{ display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 22px; width: 100%; }
.gm-qs button{ height: 40px; padding: 0px 16px; border: 0px; border-radius: 100px; background: rgb(255, 255, 255); box-shadow: rgb(229, 229, 234) 0px 0px 0px 1px inset; font-family: inherit; font-size: 14.5px; font-weight: 600; color: rgb(17, 17, 17); cursor: pointer; }
.gm-chc .gm-pill{ margin-top: 20px; }
.gm-sk{ display: flex; align-items: flex-end; gap: 7px; margin-top: 10px; }
.gm-sk.me{ justify-content: flex-end; }
.gm-sk i{ width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto; }
.gm-sk u{ display: block; height: var(--h,44px); width: var(--w,60%); border-radius: 22px 22px 22px 8px; }
.gm-sk.me u{ border-radius: 22px 22px 8px; }
.gm-sk i,.gm-sk u{ background: linear-gradient(90deg, rgb(240, 240, 242) 0%, rgb(247, 247, 249) 40%, rgb(240, 240, 242) 80%) 0% 0% / 240% 100%; animation: 1.3s linear 0s infinite normal none running gmSh; }
@keyframes gmSh { 
  0% { background-position: 100% 0px; }
  100% { background-position: -140% 0px; }
}
.gm-dotsld{ display: inline-flex; gap: 3px; margin-left: 5px; vertical-align: 2px; }
.gm-dotsld i{ width: 4px; height: 4px; border-radius: 50%; background: rgb(174, 174, 178); animation: 1s ease 0s infinite normal none running gmDot; }
.gm-dotsld i:nth-child(2){ animation-delay: 0.15s; }
.gm-dotsld i:nth-child(3){ animation-delay: 0.3s; }
@keyframes gmDot { 
  0%, 80%, 100% { opacity: 0.3; }
  40% { opacity: 1; }
}

.gm-typ{ display: inline-flex; gap: 4px; padding: 6px 2px 4px; }
.gm-typ i{ width: 7px; height: 7px; border-radius: 50%; background: rgb(142, 142, 147); animation: 1.1s ease 0s infinite normal none running gmDot; }
.gm-typ i:nth-child(2){ animation-delay: 0.18s; }
.gm-typ i:nth-child(3){ animation-delay: 0.36s; }
.gm-att{ display: flex; gap: 8px; align-items: flex-end; margin: 0px 0px 10px -4px; }
.gm-att__t{ position: relative; width: 64px; height: 64px; border-radius: 16px; overflow: hidden; flex: 0 0 auto; }
.gm-att__t img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.gm-att__t button{ position: absolute; right: 4px; top: 4px; width: 22px; height: 22px; border: 0px; border-radius: 50%; background: rgba(0, 0, 0, 0.55); color: rgb(255, 255, 255); display: grid; place-items: center; padding: 0px; cursor: pointer; }
.gm-att__t button svg{ width: 11px; height: 11px; }
.gm-att__t em{ position: absolute; left: 5px; bottom: 4px; font-style: normal; font-size: 10.5px; font-weight: 600; color: rgb(255, 255, 255); background: rgba(0, 0, 0, 0.45); border-radius: 100px; padding: 1px 6px; }
.gm-att__add{ width: 64px; height: 64px; border-radius: 16px; border: 0px; background: rgb(242, 242, 244); color: rgb(17, 17, 17); display: grid; place-items: center; cursor: pointer; flex: 0 0 auto; }
.gm-att__add svg{ width: 20px; height: 20px; }
.gm-att__n{ margin-left: auto; font-size: 12px; color: rgb(142, 142, 147); padding-bottom: 2px; }
.gm-up{ position: relative; margin: -3px -6px 6px; border-radius: 18px; overflow: hidden; }
.gm-up img{ display: block; width: 100%; height: 170px; object-fit: cover; filter: brightness(0.62); }
.gm-up__c{ position: absolute; left: 12px; right: 12px; bottom: 12px; color: rgb(255, 255, 255); }
.gm-up__c b{ display: block; font-size: 14px; font-weight: 600; }
.gm-up__c small{ display: block; font-size: 12px; opacity: 0.75; margin-top: 2px; }
.gm-up__bar{ height: 4px; border-radius: 100px; background: rgba(255, 255, 255, 0.28); margin-top: 8px; overflow: hidden; }
.gm-up__bar i{ display: block; height: 100%; width: 45%; background: rgb(255, 255, 255); border-radius: 100px; }
.gm-up__x{ position: absolute; right: 10px; top: 10px; width: 30px; height: 30px; border: 0px; border-radius: 50%; background: rgba(0, 0, 0, 0.45); color: rgb(255, 255, 255); display: grid; place-items: center; cursor: pointer; }
.gm-up__x svg{ width: 13px; height: 13px; }
.gm-under{ display: flex; flex-direction: column; align-items: flex-end; gap: 7px; margin: 6px 2px 4px 60px; text-align: right; }
.gm-under p{ margin: 0px; font-size: 13px; line-height: 1.4; color: rgb(142, 142, 147); }
.gm-under p.is-err{ color: rgb(215, 55, 47); }
.gm-under__b{ display: flex; gap: 6px; }
.gm-under__b button{ white-space: nowrap; height: 32px; padding: 0px 13px; border: 0px; border-radius: 100px; background: rgb(242, 242, 244); font-family: inherit; font-size: 13.5px; font-weight: 600; color: rgb(17, 17, 17); cursor: pointer; }
.gm-under__b button.is-red{ color: rgb(215, 55, 47); }

.gm-sys{ display: flex; align-items: center; gap: 10px; margin: 14px auto 6px; max-width: 300px; padding: 11px 14px; border-radius: 18px; background: rgb(242, 242, 244); }
.gm-sys span{ width: 28px; height: 28px; border-radius: 50%; background: rgb(17, 17, 17); color: rgb(255, 255, 255); display: grid; place-items: center; flex: 0 0 auto; }
.gm-sys span svg{ width: 14px; height: 14px; }
.gm-sys b{ display: block; font-size: 14px; font-weight: 600; color: rgb(17, 17, 17); }
.gm-sys small{ display: block; font-size: 12.5px; color: rgb(142, 142, 147); margin-top: 1px; }
.gm-ho{ margin: 18px 6px 10px; padding: 16px; border-radius: 22px; background: rgb(242, 242, 244); text-align: center; }
.gm-ho__av{ display: flex; align-items: center; justify-content: center; gap: 10px; color: rgb(174, 174, 178); }
.gm-ho__av svg{ width: 16px; height: 16px; transform: rotate(180deg); }
.gm-ho__av img,.gm-ho__av i{ width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.gm-ho__av i{ display: grid; place-items: center; background: rgb(209, 209, 214); color: rgb(255, 255, 255); font-style: normal; font-size: 16px; font-weight: 600; }
.gm-ho b{ display: block; margin-top: 10px; font-size: 15.5px; font-weight: 600; color: rgb(17, 17, 17); letter-spacing: -0.3px; }
.gm-ho small{ display: block; margin-top: 4px; font-size: 13px; line-height: 1.4; color: rgb(142, 142, 147); }
.gm-who{ display: flex; justify-content: center; margin: 12px 0px 2px; }
.gm-who span{ font-size: 12px; color: rgb(142, 142, 147); }
.gm-who b{ font-weight: 600; color: rgb(58, 58, 60); }
.gm-dim{ opacity: 0.5; }
.gm-oav{ width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; background: var(--rf-av-bg); color: var(--rf-av-fg); font-size: 12px; font-weight: 600; }
.gm-ro{ display: flex; align-items: center; gap: 12px; border-radius: 28px; padding: 12px 12px 12px 16px; background: rgba(255, 255, 255, 0.86); backdrop-filter: blur(24px) saturate(1.8); -webkit-backdrop-filter: blur(24px) saturate(1.8); box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 34px, rgba(0, 0, 0, 0.07) 0px 0px 0px 0.5px inset; }
.gm-ro__ic{ width: 36px; height: 36px; border-radius: 50%; background: rgb(242, 242, 244); display: grid; place-items: center; color: rgb(58, 58, 60); flex: 0 0 auto; }
.gm-ro__ic svg{ width: 16px; height: 16px; }
.gm-ro .xs-b{ flex: 1 1 auto; min-width: 0px; }
.gm-ro b{ display: block; font-size: 15px; font-weight: 600; color: rgb(17, 17, 17); }
.gm-ro small{ display: block; font-size: 12.5px; line-height: 1.35; color: rgb(142, 142, 147); margin-top: 2px; }
.gm-ro .gm-pill{ height: 40px; padding: 0px 16px; font-size: 14px; }
.gm-ro b,.gm-ro small{ white-space: normal !important; overflow: visible !important; text-overflow: clip !important; -webkit-line-clamp: unset !important; display: block !important; }
.gm-alert{ display: flex; gap: 10px; align-items: flex-start; margin: 0px 0px 10px; padding: 12px 14px; border-radius: 18px; background: rgb(255, 255, 255); font-size: 14px; line-height: 1.4; color: rgb(58, 58, 60); }
.gm-alert .xs-dot{ margin-top: 6px; flex: 0 0 auto; }
.gm-alert b{ color: rgb(17, 17, 17); font-weight: 600; }
.gm-hidebar .mt-bar{ display: none !important; }
.gm-kv .xs-row{ min-height: 46px; }
.gm-kv .xs-b b{ font-size: 15px; font-weight: 400; color: rgb(142, 142, 147); }
.gm-kv .xs-v{ color: rgb(17, 17, 17); font-size: 15px; }
.gm-subbtn .btn{ box-shadow: none; }
.xs-av.xs-av--ph{ background: url("tr/photos/cv-stretch.webp") 40% 9% / 260% no-repeat rgb(233, 211, 196); }
.mt-sl.is-cur{ opacity: 1; background: rgb(246, 238, 243); box-shadow: rgba(160, 80, 120, 0.14) 0px 0px 0px 1px inset; cursor: default; }
.mt-sl.is-cur b{ color: rgb(29, 2, 12); }
.mt-sl.is-cur small{ color: rgb(142, 142, 147); }
.mrt{ position: absolute; inset: 0px; z-index: 38; background: rgb(243, 243, 245); color: rgb(17, 17, 17); text-align: left; display: none; flex-direction: column; border-radius: inherit; overflow: hidden; }
.rf-app.mrt-on .mrt{ display: flex; animation: 0.34s cubic-bezier(0.32, 0.72, 0, 1) 0s 1 normal none running mrtup; }
@keyframes mrtup { 
  0% { opacity: 0; transform: translateY(16px); }
  100% { opacity: 1; transform: none; }
}
.rf-app.mrt-on .rf-toast{ bottom: 150px; }
.mrt-head{ flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 60px 16px 0px 20px; min-height: 36px; }
.mrt-k{ font-size: 14px; font-weight: 600; color: rgb(142, 142, 147); letter-spacing: -0.1px; }
.mrt-skip{ border: 0px; background: rgba(12, 14, 18, 0.05); color: rgb(58, 58, 63); font-family: inherit; font-size: 14px; font-weight: 600; height: 34px; padding: 0px 14px; border-radius: 100px; cursor: pointer; }
.mrt-skip:active{ transform: scale(0.96); }
.mrt-body{ flex: 1 1 auto; min-height: 0px; overflow-y: auto; scrollbar-width: none; padding: 14px 20px 22px; mask-image: linear-gradient(transparent 0px, rgb(0, 0, 0) 14px); }
.mrt-body::-webkit-scrollbar{ display: none; }
.mrt-q{ font-size: 26px; font-weight: 700; letter-spacing: -0.7px; line-height: 1.14; }
.mrt-sub{ font-size: 15px; line-height: 1.45; color: rgb(110, 110, 115); margin-top: 8px; }
.mrt-ctx{ background: rgb(255, 255, 255); border-radius: 22px; margin-top: 18px; box-shadow: rgba(20, 4, 12, 0.04) 0px 6px 18px; }
.mrt-ctx__top{ display: flex; align-items: center; gap: 12px; padding: 13px 14px; }
.mrt-ctx__top img{ width: 46px; height: 46px; border-radius: 14px; object-fit: cover; flex: 0 0 auto; background: rgb(238, 238, 238); }
.mrt-ctx__k{ font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(142, 142, 147); }
.mrt-ctx__t{ font-size: 15.5px; font-weight: 600; letter-spacing: -0.25px; margin-top: 3px; line-height: 1.25; }
.mrt-ctx__s{ font-size: 12.5px; color: rgb(142, 142, 147); margin-top: 2px; }
.mrt-mats{ border-top: 0.5px solid rgb(236, 236, 239); margin: 0px 14px; padding: 8px 0px 10px; }
.mrt-mats__h{ font-size: 11.5px; font-weight: 600; color: rgb(142, 142, 147); padding: 2px 0px 4px; }
.mrt-mat{ display: flex; align-items: center; gap: 10px; padding: 5px 0px; }
.mrt-mat i{ width: 28px; height: 28px; border-radius: 9px; background: rgb(241, 241, 243); color: rgb(58, 58, 60); display: grid; place-items: center; flex: 0 0 auto; }
.mrt-mat i svg{ width: 15px; height: 15px; }
.mrt-mat .xs-b{ flex: 1 1 auto; min-width: 0px; }
.mrt-mat b{ display: block; font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: -0.15px; }
.mrt-mat small{ display: block; font-size: 12px; color: rgb(142, 142, 147); margin-top: 1px; white-space: normal; overflow: visible; }
.mrt-stars{ display: flex; justify-content: center; gap: 6px; margin-top: 22px; }
.mrt-stars button{ width: 60px; height: 60px; border: 0px; background: transparent; padding: 0px; cursor: pointer; display: grid; place-items: center; }
.mrt-stars svg{ width: 50px; height: 50px; display: block; fill: rgb(29, 2, 12); fill-opacity: 0; stroke: rgba(12, 14, 18, 0.2); stroke-width: 1.5; stroke-linejoin: round; transition: stroke 0.2s, fill-opacity 0.22s; }
.mrt-stars button.lit svg{ fill-opacity: 1; stroke: rgb(29, 2, 12); animation: 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) 0s 1 normal both running mrtstar; }
@keyframes mrtstar { 
  0% { transform: scale(0.88); }
  100% { transform: scale(1); }
}
.mrt-lbl{ min-height: 24px; margin-top: 8px; text-align: center; font-size: 13.5px; line-height: 1.4; color: rgb(142, 142, 147); }
.mrt-lbl b{ font-size: 17px; font-weight: 600; letter-spacing: -0.2px; color: rgb(17, 17, 17); }
.mrt-sec{ margin-top: 20px; animation: 0.28s ease 0s 1 normal both running mrtin; }
@keyframes mrtin { 
  0% { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: none; }
}
.mrt-h{ font-size: 17px; font-weight: 650; letter-spacing: -0.3px; }
.mrt-h small{ font-size: 13px; font-weight: 500; color: rgb(142, 142, 147); margin-left: 6px; letter-spacing: 0px; }
.mrt-chips{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.mrt-chip{ display: inline-flex; align-items: center; gap: 6px; border: 0px; background: rgb(255, 255, 255); color: rgb(28, 28, 30); font-family: inherit; font-size: 14.5px; font-weight: 500; letter-spacing: -0.15px; padding: 10px 14px; border-radius: 100px; box-shadow: rgba(12, 14, 18, 0.08) 0px 0px 0px 1px inset; cursor: pointer; transition: background 0.15s, box-shadow 0.15s, color 0.15s; }
.mrt-chip svg{ width: 14px; height: 14px; display: none; }
.mrt-chip.on{ background: rgb(29, 2, 12); color: rgb(255, 255, 255); box-shadow: none; }
.mrt-chip.on svg{ display: block; }
.mrt-chip:active{ transform: scale(0.97); }
.mrt-call{ display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 12px; border: 0px; text-align: left; font-family: inherit; background: rgb(255, 255, 255); border-radius: 18px; padding: 13px 14px; box-shadow: rgba(12, 14, 18, 0.06) 0px 0px 0px 1px inset; cursor: pointer; color: rgb(17, 17, 17); }
.mrt-call.on{ background: rgb(246, 238, 243); box-shadow: rgba(160, 80, 120, 0.14) 0px 0px 0px 1px inset; }
.mrt-call .xs-b{ flex: 1 1 auto; min-width: 0px; }
.mrt-call b{ display: block; font-size: 15px; font-weight: 600; letter-spacing: -0.2px; }
.mrt-call small{ display: block; font-size: 12.5px; color: rgb(110, 110, 115); margin-top: 2px; line-height: 1.35; white-space: normal; overflow: visible; }
.mrt-ck{ width: 24px; height: 24px; border-radius: 50%; flex: 0 0 auto; box-shadow: rgba(12, 14, 18, 0.16) 0px 0px 0px 1.5px inset; display: grid; place-items: center; color: rgb(255, 255, 255); }
.mrt-ck svg{ width: 14px; height: 14px; opacity: 0; }
.mrt-call.on .mrt-ck{ background: rgb(29, 2, 12); box-shadow: none; }
.mrt-call.on .mrt-ck svg{ opacity: 1; }
.mrt-add{ display: flex; align-items: center; gap: 8px; margin-top: 14px; border: 0px; background: transparent; font-family: inherit; font-size: 15px; font-weight: 600; color: rgb(58, 58, 63); padding: 6px 2px; cursor: pointer; }
.mrt-add svg{ width: 17px; height: 17px; color: rgb(17, 17, 17); }
.mrt-add small{ font-weight: 500; color: rgb(142, 142, 147); font-size: 13.5px; }
.mrt-ta{ display: block; width: 100%; box-sizing: border-box; margin-top: 10px; border: 0px; background: rgb(255, 255, 255); border-radius: 18px; padding: 14px 16px; font-family: inherit; font-size: 15px; line-height: 1.45; color: rgb(17, 17, 17); resize: none; outline: none; min-height: 96px; box-shadow: rgba(12, 14, 18, 0.07) 0px 0px 0px 1px inset; }
.mrt-ta:focus{ box-shadow: rgb(255, 197, 220) 0px 0px 0px 1.5px inset; }
.mrt-ta::placeholder{ color: rgb(174, 174, 178); }
.mrt-cnt{ text-align: right; font-size: 11.5px; color: rgb(174, 174, 178); margin-top: 6px; font-variant-numeric: tabular-nums; }
.mrt-foot{ flex: 0 0 auto; padding: 10px 20px 26px; background: linear-gradient(rgba(243, 243, 245, 0), rgb(243, 243, 245) 18%); }
.mrt-go{ width: 100%; height: 56px; border: 0px; border-radius: 100px; background: rgb(17, 17, 17); color: rgb(255, 255, 255); font-family: inherit; font-size: 16.5px; font-weight: 600; letter-spacing: -0.3px; cursor: pointer; transition: opacity 0.18s; }
.mrt-go:disabled{ opacity: 0.22; cursor: default; }
.mrt-go:not(:disabled):active{ transform: scale(0.99); }
.mrt-hint{ display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 12px; color: rgb(142, 142, 147); margin-top: 11px; line-height: 1.4; text-align: center; }
.mrt-hint svg{ width: 12px; height: 12px; flex: 0 0 auto; }
.mrt-done{ display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 64px; }
.mrt-burst{ width: 88px; height: 88px; border-radius: 50%; background: rgb(29, 2, 12); display: grid; place-items: center; box-shadow: rgba(12, 14, 18, 0.18) 0px 12px 30px; animation: 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0s 1 normal both running mrtpop; }
.mrt-burst svg{ width: 42px; height: 42px; color: rgb(255, 255, 255); }
@keyframes mrtpop { 
  0% { opacity: 0; transform: scale(0.86); }
  100% { opacity: 1; transform: none; }
}
.mrt-done .mrt-q{ margin-top: 22px; }
.mrt-done .mrt-sub{ max-width: 310px; }
.mrt-sum{ align-self: stretch; text-align: left; background: rgb(255, 255, 255); border-radius: 22px; margin-top: 26px; padding: 14px 16px; }
.mrt-sum__r{ display: flex; align-items: center; gap: 10px; }
.mrt-sum__st{ display: flex; gap: 2px; }
.mrt-sum__st svg{ width: 18px; height: 18px; fill: rgb(29, 2, 12); stroke: none; }
.mrt-sum__st svg.off{ fill: rgb(236, 236, 239); }
.mrt-sum__r b{ font-size: 15px; font-weight: 600; letter-spacing: -0.2px; }
.mrt-sum__l{ font-size: 12px; font-weight: 600; color: rgb(142, 142, 147); margin-top: 12px; }
.mrt-sum__v{ font-size: 14.5px; line-height: 1.45; margin-top: 3px; color: rgb(28, 28, 30); }
.mrt-sum__m{ display: flex; align-items: center; gap: 10px; border-top: 0.5px solid rgb(236, 236, 239); margin-top: 12px; padding-top: 12px; font-size: 13.5px; color: rgb(110, 110, 115); line-height: 1.4; }
.mrt-sum__m i{ width: 28px; height: 28px; border-radius: 9px; background: rgb(241, 241, 243); color: rgb(58, 58, 60); display: grid; place-items: center; flex: 0 0 auto; }
.mrt-sum__m i svg{ width: 15px; height: 15px; }
.mrt-rate{ flex: 0 0 auto; border: 0px; height: 30px; padding: 0px 12px; border-radius: 100px; background: rgb(241, 241, 243); color: rgb(17, 17, 17); font-family: inherit; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.mrt-rate svg,.mrt-mine svg{ width: 13px; height: 13px; fill: currentcolor; stroke: none; }
.mrt-mine{ flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px; font-size: 13px; font-weight: 600; color: rgb(17, 17, 17); margin-right: 8px; }
.ot-done__ok{ background: rgb(17, 17, 17); }
.ot-soft{ box-shadow: none; }
.mrt-call.on{ background: rgb(246, 238, 243); box-shadow: rgba(160, 80, 120, 0.14) 0px 0px 0px 1px inset; }
.mrt-call.on .mrt-ck{ background: rgb(29, 2, 12); box-shadow: none; color: rgb(255, 255, 255); }
.xs-chip.on,.mrt-chip.on{ background: rgb(29, 2, 12); color: rgb(255, 255, 255); box-shadow: none; }
.mrt-chip.on svg{ color: rgb(255, 255, 255); }
.mt-cd.on b{ color: rgb(29, 2, 12); }
.mt-cd.on{ background: rgb(246, 238, 243); color: rgb(29, 2, 12); box-shadow: rgba(160, 80, 120, 0.14) 0px 0px 0px 1px inset; }
.xs-field:focus-within,.xs-field.fb-ta:focus-within,.xs-sheet .xs-field:focus-within{ box-shadow: rgb(255, 197, 220) 0px 0px 0px 1.5px inset; }
.mrt-ta{ box-shadow: rgba(12, 14, 18, 0.07) 0px 0px 0px 1px inset; }
.mrt-ta:focus{ box-shadow: rgb(255, 197, 220) 0px 0px 0px 1.5px inset; }

/* ---- src/styles/40-prestart.css ---- */
/* СГЕНЕРИРОВАНО design-preview/miniapp-v3-dev/tools/extract_css.js из прототипа nav-v2
   (состояния: prestart.js). Правила взяты в порядке каскада прототипа; не правьте
   руками — поправка поверх живёт в файлах стилей с бОльшим номером. */
.title{ font-size: 14.5px; font-weight: 600; letter-spacing: -0.3px; padding: 6px 6px 0px; }
.title span{ color: rgb(163, 162, 170); font-weight: 500; }
.week{ display: flex; gap: 6px; justify-content: space-between; }
.wday{ flex: 1 1 0px; min-width: 0px; background: rgb(241, 241, 243); border-radius: 20px; padding: 2px; text-align: center; }
.wday .dow{ font-size: 10px; font-weight: 500; letter-spacing: -0.2px; line-height: 1.6; color: var(--ink); height: 20px; display: flex; align-items: flex-end; justify-content: center; }
.wday .cell{ position: relative; aspect-ratio: 1 / 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 2px 8px; }
.wday .num{ font-size: 14px; line-height: 1; color: var(--ink); }
.wday .dot{ width: 5px; height: 5px; border-radius: 50%; background: transparent; }
.wday .dot--s3{ background: var(--s3); }
.wday.is-muted .dow,.wday.is-muted .num{ color: var(--mut); }
.wday.is-active{ background: rgb(16, 16, 20); }
.wday.is-active .dow{ color: rgb(255, 255, 255); }
.wday.is-active .disc{ width: 34px; height: 34px; border-radius: 50%; background: rgb(255, 255, 255); display: grid; place-items: center; margin-top: 2px; }
.wday.is-active .num{ color: var(--ink); font-weight: 500; }
.wday{ position: relative; }
.xs-tips{ padding: 6px 18px; }
.xs-tips p{ margin: 0px; padding: 11px 0px 11px 22px; position: relative; font-size: 15px; color: rgb(17, 17, 17); }
.xs-tips p + p{ border-top: 1px solid rgb(236, 236, 239); }
.xs-tips p::before{ content: ""; position: absolute; left: 4px; top: 19px; width: 6px; height: 6px; border-radius: 50%; background: rgb(199, 199, 204); }
.pz-g{ display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: center; padding: 14px 0px; }
.xs-ex{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.xs-ex__c span{ display: block; text-align: center; font-size: 12.5px; color: rgb(58, 58, 60); margin-top: 6px; }
.xs-ex__ph{ position: relative; aspect-ratio: 3 / 4; border-radius: 16px; background: linear-gradient(165deg, rgb(239, 227, 218), rgb(216, 196, 184)); display: flex; align-items: flex-end; justify-content: center; overflow: hidden; }
.xs-ex__ph .xs-okb{ position: absolute; right: 7px; top: 7px; width: 18px; height: 18px; border-radius: 50%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center center / 11px no-repeat rgb(52, 199, 89); }
.xs-dd{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.xs-dd__c{ border-radius: 18px; padding: 8px 8px 10px; background: rgb(246, 246, 248); }
.xs-dd__c b{ display: flex; gap: 6px; align-items: flex-start; font-size: 12.5px; font-weight: 500; line-height: 1.3; color: rgb(17, 17, 17); margin-top: 4px; }
.xs-dd__c b i{ flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%; margin-top: 0px; }
.xs-dd__c.ok b i{ background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center center / 10px no-repeat rgb(52, 199, 89); }
.xs-dd__c.bad b i{ background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center center / 9px no-repeat rgb(255, 69, 58); }
.xs-dd__c.bad{ background: rgb(251, 243, 243); }
.sc{ display: block; width: 100%; height: auto; }
.xs-tips--mini{ margin-top: 12px; padding: 4px 14px; border-radius: 18px; background: rgb(246, 246, 248); }
.xs-tips--mini p{ font-size: 14px; }
.xs-undo.is-back button{ visibility: hidden; }
.xs-undo.is-back .xs-undo__r b{ font-size: 0px; }
.xs-undo.is-back .xs-undo__r b::before{ content: "↺"; font-size: 16px; }
.xs-undo.is-back .xs-undo__r .fg{ opacity: 0; }
.xs-ex__ph .xs-phimg{ position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; }
.sc--img{ aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden; background: rgb(235, 228, 221); }
.sc--img img{ display: block; width: 100%; height: 100%; object-fit: cover; }
.rf-app.is-pre .pre-layer{ display: block; }
.rf-scr.xs-scr--pre{ padding: 0px; }
.pre-hi{ display: flex; align-items: center; justify-content: space-between; padding: 6px 20px 14px; }
.pre-hi small{ display: block; font-size: 13px; color: rgb(142, 142, 147); }
.pre-hi b{ display: block; font-size: 28px; font-weight: 700; letter-spacing: -0.6px; color: rgb(17, 17, 17); margin-top: 2px; }
.pre-hi .xs-av{ width: 40px; height: 40px; cursor: pointer; }
@keyframes prePulse { 
  50% { opacity: 0.55; }
}
.pre-hero{ padding: 18px; }
.pre-hero__k{ display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: rgb(142, 142, 147); }
.pre-hero > b{ display: block; font-size: 24px; font-weight: 700; letter-spacing: -0.5px; color: rgb(17, 17, 17); margin-top: 8px; line-height: 1.15; }
.pre-hero > p{ margin: 8px 0px 0px; font-size: 14.5px; line-height: 1.45; color: rgb(58, 58, 60); }
.pre-hero--dark{ background: radial-gradient(120% 90% at 100% 0%, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 60%), rgb(22, 22, 24); color: rgb(255, 255, 255); }
.pre-hero--dark .pre-hero__k{ color: rgba(255, 255, 255, 0.6); }
.pre-hero--dark > b{ color: rgb(255, 255, 255); }
.pre-hero--dark > p{ color: rgba(255, 255, 255, 0.75); }
.pre-when{ display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.pre-cal{ flex: 0 0 auto; width: 54px; height: 58px; border-radius: 16px; background: rgba(255, 255, 255, 0.1); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.pre-cal small{ font-size: 11.5px; font-weight: 600; color: rgba(255, 255, 255, 0.6); text-transform: uppercase; }
.pre-cal b{ font-size: 24px; font-weight: 700; color: rgb(255, 255, 255); margin-top: 3px; }
.pre-when .xs-b b{ display: block; font-size: 18px; font-weight: 600; color: rgb(255, 255, 255); }
.pre-when .xs-b small{ display: block; font-size: 13px; color: rgba(255, 255, 255, 0.6); margin-top: 2px; }
.pre-coach{ display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 10px 12px; border-radius: 16px; background: rgba(255, 255, 255, 0.08); cursor: pointer; }
.pre-coach img{ width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.pre-coach .xs-b{ flex: 1 1 0px; }
.pre-coach b{ display: block; font-size: 14.5px; font-weight: 600; color: rgb(255, 255, 255); }
.pre-coach small{ display: block; font-size: 12.5px; color: rgba(255, 255, 255, 0.6); }
.pre-hero__btns{ display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; margin-top: 14px; }
.pre-hero__btns button{ height: 46px; border: 0px; border-radius: 100px; background: rgb(255, 255, 255); color: rgb(17, 17, 17); font-family: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; }
.pre-hero__btns button + button{ background: rgba(255, 255, 255, 0.12); color: rgb(255, 255, 255); }
.pre-bs{ margin-top: 12px; }
.pre-bs > div{ display: flex; gap: 12px; align-items: center; padding: 9px 0px; }
.pre-bs i{ flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: rgb(241, 241, 243); box-shadow: rgb(209, 209, 214) 0px 0px 0px 1.5px inset; }
.pre-bs i svg{ width: 13px; height: 13px; }
.pre-bs .is-done i{ background: rgb(17, 17, 17); color: rgb(255, 255, 255); box-shadow: none; }
.pre-bs .is-now i{ background: rgb(255, 255, 255); box-shadow: rgb(17, 17, 17) 0px 0px 0px 2px inset; position: relative; }
.pre-bs .is-now i::after{ content: ""; position: absolute; inset: 6px; border-radius: 50%; background: rgb(17, 17, 17); animation: 1.6s ease-in-out 0s infinite normal none running prePulse; }
.pre-bs b{ display: block; font-size: 15px; font-weight: 600; color: rgb(17, 17, 17); }
.pre-bs small{ display: block; font-size: 12.5px; color: rgb(142, 142, 147); }
.pre-bs .is-next b{ color: rgb(142, 142, 147); }
.rf-app.is-pre [data-tab="train"] .pre-layer{ padding-top: 54px; }
.pp-hero{ padding: 18px; background: rgb(255, 255, 255); }
.pp-hero__k{ display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgb(142, 142, 147); }
.pp-hero__k em{ font-style: normal; letter-spacing: 0px; text-transform: none; font-size: 12.5px; font-weight: 600; color: rgb(58, 58, 60); background: rgb(241, 241, 243); padding: 4px 10px; border-radius: 100px; }
.pp-hero > b{ display: block; font-size: 24px; font-weight: 700; letter-spacing: -0.5px; line-height: 1.15; color: rgb(17, 17, 17); margin-top: 8px; }
.pp-hero > small{ display: block; font-size: 14px; line-height: 1.4; color: rgb(110, 110, 115); margin-top: 4px; }
.pp-seg{ display: flex; gap: 4px; margin-top: 16px; }
.pp-seg i{ flex: 1 1 0px; height: 6px; border-radius: 100px; background: rgb(236, 236, 239); }
.pp-seg i.is-done{ background: rgb(163, 213, 70); }
.pp-seg i.is-now{ background: rgb(29, 2, 12); animation: 1.8s ease-in-out 0s infinite normal none running prePulse; }
.pp-seg i.is-skip{ background: repeating-linear-gradient(135deg, rgb(236, 236, 239) 0px, rgb(236, 236, 239) 4px, rgb(217, 217, 222) 4px, rgb(217, 217, 222) 8px); }
.pp-eta{ display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 11px 12px; border-radius: 14px; background: rgb(246, 246, 248); font-size: 13.5px; color: rgb(58, 58, 60); }
.pp-eta svg{ width: 16px; height: 16px; flex: 0 0 auto; color: rgb(142, 142, 147); }
.pp-eta b{ font-weight: 600; color: rgb(17, 17, 17); }
.pp-tl{ padding: 6px 16px; }
.pp-r{ display: flex; gap: 14px; padding: 12px 0px; position: relative; }
.pp-r::before{ content: ""; position: absolute; left: 14px; top: 0px; bottom: 0px; width: 2px; background: rgb(236, 236, 239); }
.pp-r:first-child::before{ top: 26px; }
.pp-r:last-child::before{ bottom: calc(100% - 26px); }
.pp-r.is-done::before{ background: rgb(163, 213, 70); }
.pp-r.is-done + .pp-r:not(.is-done)::before{ background: linear-gradient(rgb(163, 213, 70) 0px, rgb(163, 213, 70) 26px, rgb(236, 236, 239) 26px); }
.pp-r > i{ position: relative; z-index: 1; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 13px; font-weight: 700; background: rgb(241, 241, 243); color: rgb(142, 142, 147); box-shadow: rgb(255, 255, 255) 0px 0px 0px 4px; }
.pp-r > i svg{ width: 15px; height: 15px; }
.pp-r.is-done > i{ background: rgb(163, 213, 70); color: rgb(28, 42, 14); }
.pp-r.is-now > i{ background: rgb(29, 2, 12); color: rgb(255, 255, 255); }
.pp-r.is-now > i::after{ content: ""; position: absolute; inset: -5px; border-radius: 50%; box-shadow: rgba(29, 2, 12, 0.16) 0px 0px 0px 2px; animation: 1.8s ease-in-out 0s infinite normal none running prePulse; }
.pp-r .xs-b{ flex: 1 1 0px; min-width: 0px; }
.pp-r__t{ display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.pp-r__t b{ font-size: 15.5px; font-weight: 600; color: rgb(17, 17, 17); }
.pp-r__t em{ flex: 0 0 auto; font-style: normal; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 100px; background: rgb(232, 245, 220); color: rgb(91, 138, 31); }
.pp-r.is-now .pp-r__t em{ background: rgb(241, 241, 243); color: rgb(58, 58, 60); }
.pp-r.is-skip .pp-r__t em{ background: rgb(241, 241, 243); color: rgb(142, 142, 147); }
.pp-r small{ display: block; font-size: 13px; line-height: 1.35; color: rgb(142, 142, 147); margin-top: 2px; white-space: normal; overflow: visible; text-overflow: clip; }
.pp-r.is-next .pp-r__t b{ color: rgb(110, 110, 115); }
.pp-r p{ margin: 8px 0px 0px; padding: 10px 12px; border-radius: 14px; background: rgb(246, 246, 248); font-size: 13.5px; line-height: 1.45; color: rgb(58, 58, 60); }
.pp-who{ display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12.5px; font-weight: 500; color: rgb(110, 110, 115); }
.pp-faces{ display: flex; }
.pp-faces img{ width: 24px; height: 24px; border-radius: 50%; object-fit: cover; box-shadow: rgb(255, 255, 255) 0px 0px 0px 2px; background: rgb(229, 229, 234); }
.pp-faces img + img{ margin-left: -7px; }
.pp-r.is-next .pp-faces{ opacity: 0.75; }
.pp-act{ display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; height: 36px; padding: 0px 10px 0px 14px; border: 0px; border-radius: 100px; background: rgb(17, 17, 17); color: rgb(255, 255, 255); font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.pp-act svg{ width: 14px; height: 14px; opacity: 0.7; }
.pp-r.is-skip .pp-act{ background: rgb(241, 241, 243); color: rgb(17, 17, 17); }
.pt{ padding-bottom: 4px; }
.pt-hero{ position: relative; height: 320px; margin: 0px 16px 18px; border-radius: 28px; overflow: hidden; }
.pt-hero > img{ width: 100%; height: 100%; object-fit: cover; }
.pt-hero::after{ content: ""; position: absolute; inset: 0px; background: linear-gradient(rgba(20, 6, 14, 0.25) 0%, rgba(20, 6, 14, 0) 30%, rgba(20, 6, 14, 0.82) 78%); }
.pt-hero__b{ position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 1; color: rgb(255, 255, 255); }
.pt-hero__b small{ display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.62); }
.pt-hero__b small.pt-eb{ display: flex; align-items: center; gap: 6px; }
.pt-eb svg{ width: 13px; height: 13px; flex: 0 0 auto; margin-top: -1px; }
.pt-hero__b b{ display: block; font-size: 28px; font-weight: 700; letter-spacing: -0.6px; line-height: 1.1; margin-top: 6px; }
.pt-hero__b > span:not(.pt-lock){ display: block; font-size: 14px; line-height: 1.4; color: rgba(255, 255, 255, 0.88); margin-top: 6px; }
.pt-coach{ padding: 16px; }
.pt-coach__h{ display: flex; align-items: center; gap: 12px; }
.pt-coach__h img{ width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.pt-coach__h .xs-b{ flex: 1 1 0px; }
.pt-coach__h small{ display: block; font-size: 12.5px; color: rgb(142, 142, 147); }
.pt-coach__h b{ display: block; font-size: 17px; font-weight: 700; color: rgb(17, 17, 17); }
.pt-msg{ display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0px 14px; border: 0px; border-radius: 100px; background: rgb(17, 17, 17); color: rgb(255, 255, 255); font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.pt-msg svg{ width: 15px; height: 15px; }
.pt-coach > p{ margin: 12px 0px 0px; font-size: 14px; line-height: 1.45; color: rgb(58, 58, 60); }
.pt-when{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 14px; position: relative; }
.pt-when > div{ position: relative; border-radius: 16px; background: rgb(246, 246, 248); padding: 10px 10px 11px; }
.pt-when i{ width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 700; background: rgb(229, 229, 234); color: rgb(142, 142, 147); }
.pt-when i svg{ width: 13px; height: 13px; }
.pt-when b{ display: block; font-size: 13px; font-weight: 600; line-height: 1.25; color: rgb(17, 17, 17); margin-top: 8px; }
.pt-when small{ display: block; font-size: 12px; line-height: 1.3; color: rgb(142, 142, 147); margin-top: 2px; }
.pt-when .is-done i{ background: rgb(163, 213, 70); color: rgb(28, 42, 14); }
.pt-when .is-now{ background: rgb(255, 255, 255); box-shadow: rgb(29, 2, 12) 0px 0px 0px 1.5px inset; }
.pt-when .is-now i{ background: rgb(29, 2, 12); color: rgb(255, 255, 255); }
.pt-when .is-next b{ color: rgb(110, 110, 115); }
.pt-ghost{ position: relative; padding: 4px 16px; overflow: hidden; }
.pt-ghost__r{ display: flex; align-items: center; gap: 12px; padding: 13px 0px; filter: blur(0.4px); opacity: 0.75; }
.pt-ghost__r + .pt-ghost__r{ border-top: 1px solid rgb(241, 241, 243); }
.pt-ghost__r > span{ width: 40px; height: 40px; flex: 0 0 auto; border-radius: 12px; background: rgb(243, 243, 245); display: grid; place-items: center; color: rgb(174, 174, 178); }
.pt-ghost__r > span svg{ width: 18px; height: 18px; }
.pt-ghost__r .xs-b{ flex: 1 1 0px; }
.pt-ghost__r b{ display: block; font-size: 15px; font-weight: 600; color: rgb(142, 142, 147); }
.pt-ghost__r .xs-b i{ display: block; height: 8px; width: 62%; border-radius: 100px; background: rgb(236, 236, 239); margin-top: 7px; }
.pt-ghost__r .xs-b i.s{ width: 38%; margin-top: 5px; }
.pt-ghost__r > svg{ width: 16px; height: 16px; color: rgb(199, 199, 204); }
.pt-ghost__c{ position: absolute; inset: 0px; display: grid; place-items: center; background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.55) 40%, rgba(255, 255, 255, 0.55) 60%, rgba(255, 255, 255, 0)); }
.pt-ghost__c span{ display: inline-flex; align-items: center; gap: 7px; max-width: 82%; padding: 9px 14px; border-radius: 16px; background: rgb(17, 17, 17); color: rgb(255, 255, 255); font-size: 13px; font-weight: 600; line-height: 1.3; box-shadow: rgba(0, 0, 0, 0.14) 0px 8px 24px; }
.pt-ghost__c svg{ width: 14px; height: 14px; flex: 0 0 auto; }
.pg-hero{ padding: 16px 16px 18px; background: rgb(255, 255, 255); }
.pg-hero > b{ display: block; font-size: 20px; font-weight: 600; letter-spacing: -0.4px; line-height: 1.2; color: rgb(12, 14, 18); margin-top: 16px; }
.pg-hero > p{ margin: 6px 0px 0px; font-size: 14px; line-height: 1.45; color: rgba(12, 14, 18, 0.6); }
.pg-ch{ border-radius: 16px; background: rgb(248, 248, 250); padding: 12px 14px; }
.pg-ch__h{ display: flex; justify-content: space-between; align-items: baseline; }
.pg-ch__h b{ font-size: 13px; font-weight: 600; color: rgb(12, 14, 18); }
.pg-ch__h span{ font-size: 12px; color: rgba(12, 14, 18, 0.42); }
.pg-ch svg{ display: block; width: 100%; height: auto; margin-top: 8px; overflow: visible; }
.pg-ch__g path{ stroke: rgba(12, 14, 18, 0.06); stroke-width: 1; fill: none; }
.pg-ch__l{ fill: none; stroke: rgb(189, 189, 198); stroke-width: 2; stroke-dasharray: 1, 6; stroke-linecap: round; stroke-linejoin: round; }
.pg-ch__w{ fill: rgb(255, 255, 255); stroke: rgb(217, 217, 223); stroke-width: 1.5; }
.pg-ch__now{ fill: rgb(29, 2, 12); stroke: rgb(255, 255, 255); stroke-width: 2.5; }
.pg-ch__goal{ fill: rgb(255, 255, 255); stroke: rgb(29, 2, 12); stroke-width: 2; }
.pg-ch__lb{ display: flex; justify-content: space-between; margin-top: 8px; }
.pg-ch__lb span{ font-size: 11.5px; line-height: 1.3; color: rgba(12, 14, 18, 0.45); }
.pg-ch__lb .is-goal{ text-align: right; }
.pg-ch__lb b{ display: block; font-size: 13.5px; font-weight: 600; color: rgb(12, 14, 18); }
.pg-ch__lb .is-goal b{ color: rgb(12, 14, 18); }
.pg-zero{ padding: 4px 16px; }
.pg-zero .xs-v{ font-weight: 600; color: rgb(12, 14, 18); }
.pg-cta{ display: block; width: 100%; margin: 6px 0px 12px; box-shadow: none; }
.pg-zero .xs-row{ padding-left: 0px; padding-right: 0px; }
.pg-soon{ padding: 4px 16px; }
.pg-soon .xs-row{ padding-left: 0px; padding-right: 0px; }
.pg-soon .xs-row b{ color: rgb(58, 58, 60); }
.pg-lk{ display: grid; place-items: center; color: rgb(199, 199, 204); }
.pg-lk svg{ width: 16px; height: 16px; }
.pre-hi--t{ padding-top: 10px; }
.pre-days{ display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0px -16px; padding: 0px 16px; }
.pre-days::-webkit-scrollbar{ display: none; }
.pre-days button{ flex: 0 0 56px; height: 74px; border: 0px; border-radius: 18px; background: rgb(255, 255, 255); font-family: inherit; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; cursor: pointer; }
.pre-days span{ font-size: 12px; font-weight: 600; color: rgb(142, 142, 147); }
.pre-days b{ font-size: 19px; font-weight: 600; color: rgb(17, 17, 17); }
.pre-days small{ font-size: 11px; color: rgb(142, 142, 147); }
.pre-days button.on{ background: rgb(17, 17, 17); }
.pre-days button.on b{ color: rgb(255, 255, 255); }
.pre-days button.on span,.pre-days button.on small{ color: rgba(255, 255, 255, 0.65); }
.rf-app.pre-ob .pre-layer{ padding: 54px 0px 0px; }
.ob2{ min-height: 100%; display: flex; flex-direction: column; padding: 6px 20px 24px; background: rgb(243, 243, 245); }
.rf-scr.xs-scr--pre .ob2{ padding-top: 60px; }
.ob2-top{ display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; margin: 0px -8px 12px; }
.ob2-top__t{ text-align: center; font-size: 16px; font-weight: 600; color: rgb(17, 17, 17); }
.ob2-top__sp{ width: 44px; }
.ob2-top--hub{ grid-template-columns: 44px 1fr 44px; }
.ob2-top--hub .ob2-logo{ grid-column: 2; }
.ob2-menu{ grid-column: 3; width: 40px; height: 40px; border: 0px; border-radius: 50%; background: rgb(255, 255, 255); display: grid; place-items: center; cursor: pointer; justify-self: end; }
.ob2-menu svg{ width: 20px; height: 20px; }
.ob2-seg{ display: flex; gap: 4px; margin: 0px 0px 22px; }
.ob2-seg i{ flex: 1 1 0px; height: 4px; border-radius: 100px; background: rgb(225, 225, 230); overflow: hidden; }
.ob2-seg u{ display: block; height: 100%; background: rgb(17, 17, 17); transition: width 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }
.ob2-qidx{ font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgb(142, 142, 147); margin-bottom: 8px; }
.ob2-h{ font-size: 28px; font-weight: 700; letter-spacing: -0.6px; line-height: 1.13; color: rgb(17, 17, 17); }
.ob2-h--c{ text-align: center; }
.ob2-sub{ font-size: 14.5px; line-height: 1.5; color: rgb(110, 110, 115); margin-top: 10px; }
.ob2-sub--c{ text-align: center; }
.ob2-kick{ font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgb(142, 142, 147); margin-bottom: 6px; }
.ob2-opts{ display: flex; flex-direction: column; gap: 8px; margin-top: 20px; }
.ob2-opt{ display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 58px; padding: 12px 14px; border: 0px; border-radius: 18px; background: rgb(255, 255, 255); text-align: left; font-family: inherit; cursor: pointer; box-shadow: transparent 0px 0px 0px 1.5px inset; transition: box-shadow 0.15s, transform 0.12s; }
.ob2-opt:active{ transform: scale(0.99); }
.ob2-opt.sel{ box-shadow: rgb(17, 17, 17) 0px 0px 0px 1.5px inset; }
.ob2-opt__l{ display: flex; align-items: center; gap: 12px; min-width: 0px; }
.ob2-opt__ic{ width: 38px; height: 38px; flex: 0 0 auto; border-radius: 50%; background: rgb(241, 241, 243); color: rgb(58, 58, 60); display: grid; place-items: center; }
.ob2-opt__ic svg{ width: 19px; height: 19px; }
.ob2-opt.sel .ob2-opt__ic{ background: rgb(17, 17, 17); color: rgb(255, 255, 255); }
.ob2-opt__t{ display: block; font-size: 16px; font-weight: 500; color: rgb(17, 17, 17); line-height: 1.25; }
.ob2-opt__d{ display: block; font-size: 13px; color: rgb(142, 142, 147); line-height: 1.3; margin-top: 2px; }
.ob2-opt__ck{ width: 24px; height: 24px; flex: 0 0 auto; border-radius: 50%; box-shadow: rgb(209, 209, 214) 0px 0px 0px 1.5px inset; display: grid; place-items: center; color: rgb(255, 255, 255); }
.ob2-opt__ck svg{ width: 13px; height: 13px; opacity: 0; }
.ob2-opt.sel .ob2-opt__ck{ background: rgb(17, 17, 17); box-shadow: none; }
.ob2-opt.sel .ob2-opt__ck svg{ opacity: 1; }
.ob2-field{ position: relative; margin-top: 20px; }
.ob2-input{ width: 100%; box-sizing: border-box; border: 0px; outline: 0px; border-radius: 20px; background: rgb(255, 255, 255); padding: 18px 16px; font-family: inherit; font-size: 18px; font-weight: 500; color: rgb(17, 17, 17); box-shadow: transparent 0px 0px 0px 1.5px inset; }
.ob2-input:focus{ box-shadow: rgb(17, 17, 17) 0px 0px 0px 1.5px inset; }
.ob2-input::placeholder{ color: rgb(174, 174, 178); font-weight: 400; }
textarea.ob2-input{ min-height: 120px; resize: none; line-height: 1.45; font-size: 16px; }
.ob2-suffix{ position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 16px; color: rgb(142, 142, 147); pointer-events: none; }
.ob2-err{ min-height: 16px; margin-top: 8px; font-size: 13px; color: rgb(212, 72, 63); }
.ob2-card{ background: rgb(255, 255, 255); border-radius: 22px; padding: 4px 16px; margin-top: 18px; }
.ob2-row{ display: flex; gap: 12px; align-items: flex-start; padding: 13px 0px; }
.ob2-row + .ob2-row{ border-top: 1px solid rgb(241, 241, 243); }
.ob2-row__ic{ width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%; background: rgb(243, 243, 245); display: grid; place-items: center; }
.ob2-row__ic svg{ width: 17px; height: 17px; }
.ob2-row b{ display: block; font-size: 15px; font-weight: 600; color: rgb(17, 17, 17); }
.ob2-row small{ display: block; font-size: 13px; line-height: 1.35; color: rgb(142, 142, 147); margin-top: 2px; }
.ob2-note{ display: flex; gap: 9px; align-items: flex-start; margin-top: 14px; font-size: 13px; line-height: 1.45; color: rgb(142, 142, 147); }
.ob2-note svg{ width: 15px; height: 15px; flex: 0 0 auto; margin-top: 1px; }
.ob2-foot{ margin-top: auto; padding-top: 22px; position: sticky; bottom: 0px; padding-bottom: 30px; background: linear-gradient(rgba(243, 243, 245, 0), rgb(243, 243, 245) 30%); }
.ob2-foot .btn{ margin: 0px; }
.ob2-done{ text-align: center; padding-top: 20px; }
.ob2-done__ic{ width: 78px; height: 78px; border-radius: 50%; background: rgb(17, 17, 17); color: rgb(255, 255, 255); display: grid; place-items: center; margin: 0px auto 18px; }
.ob2-done__ic svg{ width: 36px; height: 36px; }
.ob2-steps{ padding: 2px 14px; }
.ob2-step{ display: flex; align-items: center; gap: 12px; padding: 14px 0px; cursor: pointer; }
.ob2-step + .ob2-step{ border-top: 1px solid rgb(241, 241, 243); }
.ob2-step__c{ width: 28px; height: 28px; flex: 0 0 auto; border-radius: 50%; background: rgb(241, 241, 243); display: grid; place-items: center; color: rgb(255, 255, 255); }
.ob2-step__c svg{ width: 14px; height: 14px; }
.ob2-step__c.done{ background: rgb(17, 17, 17); }
.ob2-step__c.now{ background: rgb(255, 255, 255); box-shadow: rgb(17, 17, 17) 0px 0px 0px 2px inset; position: relative; }
.ob2-step__c.now::after{ content: ""; width: 10px; height: 10px; border-radius: 50%; background: rgb(17, 17, 17); animation: 1.6s ease-in-out 0s infinite normal none running prePulse; }
.ob2-step .xs-b{ flex: 1 1 auto; min-width: 0px; }
.ob2-step b{ display: block; font-size: 15.5px; font-weight: 600; color: rgb(17, 17, 17); }
.ob2-step small{ display: block; font-size: 13px; color: rgb(142, 142, 147); margin-top: 1px; }
.ob2-step__st{ flex: 0 0 auto; font-size: 12px; font-weight: 600; color: rgb(142, 142, 147); }
.ob2-step.is-now .ob2-step__st{ color: rgb(17, 17, 17); }
.ob2--hub .ob2-h{ font-weight: 600; letter-spacing: -0.56px; line-height: 1.12; color: rgb(12, 14, 18); }
.ob2--hub .ob2-sub{ font-size: 14px; letter-spacing: -0.28px; line-height: 1.55; color: rgba(12, 14, 18, 0.6); }
.ob2-hubl{ padding: 2px 16px; border-radius: 20px; box-shadow: rgba(20, 4, 12, 0.05) 0px 6px 18px, rgba(12, 14, 18, 0.03) 0px 0px 0px 1px inset; }
.ob2-hubl .ob2-step{ gap: 12px; padding: 13px 0px; }
.ob2-hubl .ob2-step + .ob2-step{ border-top: 1px solid rgba(12, 14, 18, 0.05); }
.ob2-hubl .ob2-step__c{ width: 26px; height: 26px; background: rgb(238, 240, 243); box-shadow: none; color: rgb(91, 138, 31); }
.ob2-hubl .ob2-step__c.done{ background: rgb(232, 245, 220); color: rgb(91, 138, 31); }
.ob2-hubl .ob2-step__c.done svg{ width: 15px; height: 15px; }
.ob2-hubl .ob2-step__c.now{ background: rgb(29, 2, 12); color: rgb(255, 255, 255); box-shadow: none; }
.ob2-hubl .ob2-step__c.now::after{ content: "!"; width: auto; height: auto; border-radius: 0px; background: none; animation: auto ease 0s 1 normal none running none; font-size: 13px; font-weight: 700; line-height: 1; color: rgb(255, 255, 255); }
.ob2-hubl .ob2-step b{ font-size: 15px; font-weight: 500; letter-spacing: 0px; color: rgb(12, 14, 18); }
.ob2-hubl .ob2-step small{ font-size: 12.5px; line-height: 1.35; color: rgba(12, 14, 18, 0.4); margin-top: 1px; }
.ob2-hubl .ob2-step__st{ font-size: 11.5px; font-weight: 600; line-height: 1.3; border-radius: 9999px; padding: 3px 9px; color: rgba(12, 14, 18, 0.4); background: rgb(238, 240, 243); }
.ob2-hubl .ob2-step.is-done .ob2-step__st{ color: rgb(91, 138, 31); background: rgb(232, 245, 220); }
.ob2-hubl .ob2-step.is-now .ob2-step__st{ color: rgb(17, 17, 17); background: rgb(241, 241, 243); }
.ob2-hubl .ob2-step__st:has(.gss-spin){ padding: 0px; background: none; }
.ob2-food,.ob2-howto{ display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; }
.ob2-food .xs-b,.ob2-howto .xs-b{ flex: 1 1 auto; min-width: 0px; }
.ob2-food b,.ob2-howto b{ display: block; font-size: 15px; font-weight: 600; color: rgb(17, 17, 17); }
.ob2-food small,.ob2-howto small{ display: block; font-size: 13px; line-height: 1.35; color: rgb(142, 142, 147); margin-top: 2px; white-space: normal; }
.ob2-in{ padding-top: 4px; }
.ob2-in > .ob2-h,.ob2-in > .ob2-sub,.ob2-in > .ob2-kick{ padding: 0px 4px; }
.ob2-photos{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 20px; }
.ob2-photo{ position: relative; overflow: hidden; aspect-ratio: 3 / 4; border-radius: 18px; border: 1.5px dashed rgb(199, 199, 204); background: rgb(255, 255, 255); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: rgb(142, 142, 147); font-family: inherit; cursor: pointer; }
.ob2-photo svg{ width: 24px; height: 24px; }
.ob2-photo small{ font-size: 12.5px; font-weight: 500; }
.ob2-photo.filled{ border: 0px; background: linear-gradient(160deg, rgb(233, 221, 212), rgb(205, 182, 168)); }
.ob2-photo.filled::before{ content: ""; position: absolute; left: 50%; top: 14%; width: 34%; height: 64%; transform: translateX(-50%); border-radius: 44% 44% 30% 30%; background: rgba(255, 255, 255, 0.5); }
.ob2-photo__chk{ position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 50%; background: rgb(17, 17, 17); color: rgb(255, 255, 255); display: grid; place-items: center; }
.ob2-photo__chk svg{ width: 13px; height: 13px; }
.ob2-photo__cap{ position: absolute; left: 0px; right: 0px; bottom: 0px; padding: 18px 6px 8px; display: flex; flex-direction: column; align-items: center; background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0)); color: rgb(255, 255, 255); }
.ob2-photo__cap small{ font-size: 12px; font-weight: 600; color: rgb(255, 255, 255); }
.ob2-photo__cap em{ font-size: 10px; font-style: normal; opacity: 0.9; }
.ob2-up{ margin-top: 20px; border-radius: 22px; border: 1.5px dashed rgb(199, 199, 204); background: rgb(255, 255, 255); padding: 26px 18px; text-align: center; cursor: pointer; }
.ob2-up__ic{ width: 48px; height: 48px; border-radius: 14px; background: rgb(243, 243, 245); display: grid; place-items: center; margin: 0px auto 10px; }
.ob2-up__ic svg{ width: 22px; height: 22px; }
.ob2-up b{ display: block; font-size: 15.5px; font-weight: 600; color: rgb(17, 17, 17); }
.ob2-up small{ display: block; font-size: 13px; color: rgb(142, 142, 147); margin-top: 3px; }
.ob2-x{ width: 30px; height: 30px; border: 0px; border-radius: 50%; background: rgb(243, 243, 245); display: grid; place-items: center; cursor: pointer; }
.ob2-x svg{ width: 13px; height: 13px; }
.pre-hero__path{ border: 0px; background: rgba(255, 255, 255, 0.12); color: rgb(255, 255, 255); font-family: inherit; font-size: 12px; font-weight: 600; border-radius: 100px; padding: 5px 10px; cursor: pointer; }
.pre-hero__path--l{ background: rgb(241, 241, 243); color: rgb(17, 17, 17); }
.ob2-top__t small{ display: block; font-size: 11.5px; font-weight: 500; color: rgb(142, 142, 147); margin-top: 1px; }
.ob2-x{ justify-self: end; min-width: 44px; border-radius: 50%; display: grid; place-items: center; width: 44px !important; height: 44px !important; }
.ob2-x svg{ width: 18px; height: 18px; }
.ob2-qidx{ display: flex; align-items: center; gap: 8px; }
.ob2-saved{ display: inline-flex; align-items: center; gap: 3px; letter-spacing: 0px; text-transform: none; font-weight: 600; color: rgb(52, 168, 83); animation: 0.4s ease 0s 1 normal none running ob2sv; }
.ob2-saved svg{ width: 12px; height: 12px; }
@keyframes ob2sv { 
  0% { opacity: 0; transform: translateY(3px); }
  100% { opacity: 1; }
}
.ob2-opt.sel{ transition: transform 0.18s; }
.ob2-opt.sel:active{ transform: scale(0.99); }
.pf-all{ display: flex; align-items: center; justify-content: space-between; width: 100%; height: 50px; padding: 0px 16px 0px 18px; border: 0px; border-radius: 20px; background: rgb(255, 255, 255); font-family: inherit; font-size: 15px; font-weight: 600; color: rgb(17, 17, 17); cursor: pointer; }
.pf-all svg{ width: 14px; height: 14px; color: rgb(199, 199, 204); }
.pf-fd{ padding: 6px 0px; }
.pf-fd__r{ position: relative; display: flex; align-items: center; gap: 12px; padding: 8px 16px; cursor: pointer; }
.pf-fd__r time{ flex: 0 0 40px; font-size: 13px; font-weight: 600; color: rgb(142, 142, 147); font-variant-numeric: tabular-nums; }
.pf-fd__r::after{ content: ""; position: absolute; left: 73px; top: 0px; bottom: 0px; width: 1.5px; background: rgb(236, 236, 239); z-index: 0; }
.pf-fd__r:first-child::after{ top: 50%; }
.pf-fd__r:last-child::after{ bottom: 50%; }
.pf-fd__th{ position: relative; z-index: 1; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 11px; overflow: hidden; box-shadow: rgb(255, 255, 255) 0px 0px 0px 3px; }
.pf-fd__th > i{ display: block; width: 100%; height: 100%; }
.pf-fd__ic{ place-items: center; display: grid !important; }
.pf-fd__ic svg{ width: 16px; height: 16px; }
.pf-fd__ic.g{ background: rgb(232, 247, 236); color: rgb(30, 156, 69); }
.pf-fd__ic.o{ background: rgb(255, 241, 224); color: rgb(196, 111, 0); }
.pf-fd__r .xs-b{ flex: 1 1 auto; min-width: 0px; }
.pf-fd__r b{ display: block; font-size: 14px; font-weight: 600; color: rgb(17, 17, 17); }
.pf-fd__r small{ display: block; font-size: 12.5px; color: rgb(142, 142, 147); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-plan{ display: flex; align-items: center; gap: 13px; padding: 15px 14px 15px 16px; border-radius: 24px; background: linear-gradient(135deg, rgb(27, 27, 30) 0%, rgb(44, 44, 48) 100%); color: rgb(255, 255, 255); cursor: pointer; }
.pf-plan__ic{ flex: 0 0 38px; width: 38px; height: 38px; border-radius: 13px; background: rgba(255, 255, 255, 0.12); color: rgb(255, 255, 255); display: grid; place-items: center; }
.pf-plan__ic svg{ width: 19px; height: 19px; }
.pf-plan .xs-b{ flex: 1 1 auto; min-width: 0px; }
.pf-plan b{ display: block; font-size: 15px; font-weight: 600; }
.pf-plan small{ display: block; font-size: 12.5px; line-height: 1.4; color: rgba(255, 255, 255, 0.62); margin-top: 3px; }
.pf-plan svg:last-child{ color: rgba(255, 255, 255, 0.4); }
.pf-pk{ display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: rgb(255, 255, 255); margin-top: -6px; }
.pf-pk button{ display: flex; align-items: center; justify-content: space-between; height: 54px; padding: 0px 18px; border: 0px; background: none; font-family: inherit; font-size: 17px; color: rgb(10, 132, 255); cursor: pointer; text-align: left; }
.pf-pk button + button{ border-top: 1px solid rgb(236, 236, 239); }
.pf-pk svg{ width: 22px; height: 22px; color: rgb(10, 132, 255); }
.pf-tm{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pf-tm button{ display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 11px 4px; border: 0px; border-radius: 16px; background: rgb(255, 255, 255); font-family: inherit; cursor: pointer; }
.pf-tm b{ font-size: 17px; font-weight: 700; color: rgb(17, 17, 17); }
.pf-tm small{ font-size: 11.5px; color: rgb(142, 142, 147); }
.pf-tm button.on{ background: rgb(17, 17, 17); }
.pf-tm button.on b{ color: rgb(255, 255, 255); }
.pf-tm button.on small{ color: rgba(255, 255, 255, 0.6); }
.pf-src .xs-row{ min-height: 52px; cursor: default; }
.pf-cards{ display: flex; gap: 10px; margin: 0px -22px; padding: 4px 22px 6px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x; scroll-padding: 0px 22px; }
.pf-cards::-webkit-scrollbar{ display: none; }
.pf-card{ position: relative; flex: 0 0 auto; width: 108px; height: 138px; padding: 0px; border: 0px; border-radius: 18px; overflow: hidden; background: rgb(239, 231, 234); cursor: pointer; scroll-snap-align: start; font-family: inherit; text-align: left; color: rgb(255, 255, 255); transition: transform 0.15s; }
.pf-card:active{ transform: scale(0.97); }
.pf-card img{ position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; }
.pf-card::after{ content: ""; position: absolute; inset: 0px; background: linear-gradient(rgba(29, 2, 12, 0) 42%, rgba(29, 2, 12, 0.62) 100%); }
.pf-card.is-own::after{ background: rgba(29, 2, 12, 0.18); }
.pf-card__b{ position: absolute; left: 10px; right: 8px; bottom: 9px; z-index: 2; }
.pf-card__b b{ font-size: 14.5px; font-weight: 600; letter-spacing: -0.2px; line-height: 1.15; text-shadow: rgba(29, 2, 12, 0.35) 0px 1px 8px; }
.pf-card.on{ box-shadow: rgb(255, 255, 255) 0px 0px 0px 2.5px, rgb(29, 2, 12) 0px 0px 0px 4.5px; }
.pf-cards .pf-card:first-child.on{ margin-left: 2px; }
.pf-card.on::before{ content: ""; position: absolute; right: 8px; top: 8px; z-index: 3; width: 22px; height: 22px; border-radius: 50%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d020c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center center / 13px no-repeat rgb(184, 233, 134); }
.pf-card__plus{ position: absolute; left: 50%; top: 40%; z-index: 2; transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); display: grid; place-items: center; color: rgb(29, 2, 12); }
.pf-card__plus svg{ width: 20px; height: 20px; }
.pf-acr{ display: flex; align-items: baseline; justify-content: space-between; margin-top: 22px; }
.pf-acr > span{ font-size: 15px; font-weight: 600; letter-spacing: -0.2px; color: rgb(17, 17, 17); }
.pf-acr__v{ display: flex; align-items: baseline; gap: 4px; cursor: text; }
.pf-acr__v input{ width: 3.2ch; border: 0px; background: none; padding: 0px; outline: none; text-align: right; font-family: inherit; font-size: 22px; font-weight: 600; letter-spacing: -0.6px; color: rgb(17, 17, 17); font-variant-numeric: tabular-nums; }
.pf-acr__v input:focus{ color: rgb(29, 2, 12); }
.pf-acr__v em{ font-style: normal; font-size: 14px; font-weight: 500; color: rgb(142, 142, 147); }
.pf-acr__v--t{ padding: 6px 12px; border-radius: 100px; background: rgb(243, 242, 245); }
.pf-acr__v--t input{ width: 5ch; font-size: 16px; letter-spacing: -0.2px; text-align: left; }
.pf-rlw{ position: relative; margin: 8px -22px 0px; }
.pf-rl__tr{ display: flex; align-items: flex-start; height: 100%; width: max-content; min-width: 100%; }
.pf-rl__tr b{ flex: 0 0 auto; width: calc(167px); }
.pf-rl__tr i{ position: relative; flex: 0 0 auto; width: 12px; height: 100%; scroll-snap-align: center; font-style: normal; }
.pf-rl__tr i::before{ content: ""; position: absolute; left: 5.5px; top: 6px; width: 1px; height: 12px; background: rgba(12, 14, 18, 0.2); }
.pf-rl__tr i.maj::before{ top: 2px; height: 20px; width: 1.5px; left: 5.25px; background: rgba(12, 14, 18, 0.42); }
.pf-rl__tr i.maj::after{ content: attr(data-l); position: absolute; left: 50%; top: 30px; transform: translateX(-50%); font-size: 11.5px; font-weight: 500; color: rgb(142, 142, 147); font-variant-numeric: tabular-nums; }
.pf-acf{ display: block; margin-top: 20px; }
.pf-acf input{ width: 100%; box-sizing: border-box; border: 0px; border-radius: 14px; background: rgb(243, 242, 245); padding: 14px 16px; font-family: inherit; font-size: 14.5px; font-weight: 500; color: rgb(17, 17, 17); outline: none; }
.pf-acf input::placeholder{ color: rgba(12, 14, 18, 0.38); }
.pf-acf input:focus{ background: rgb(255, 255, 255); box-shadow: rgb(29, 2, 12) 0px 0px 0px 1.5px inset; }
.ob2-lib{ margin-top: 18px; }
.li-hero{ position: relative; overflow: hidden; border-radius: 28px; padding: 22px 20px; text-align: center; background: linear-gradient(160deg, rgb(27, 27, 30) 0%, rgb(46, 46, 51) 100%); color: rgb(255, 255, 255); }
.li-hero__ph{ position: relative; width: 96px; height: 96px; margin: 14px auto 0px; border-radius: 50%; padding: 3px; background: rgba(255, 255, 255, 0.3); animation: 2.8s ease-in-out 0s infinite normal none running liPulse; }
.li-hero__ph img{ width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid rgb(47, 32, 41); box-sizing: border-box; display: block; }
@keyframes liPulse { 
  0%, 100% { box-shadow: rgba(255, 255, 255, 0.22) 0px 0px 0px 0px; }
  50% { box-shadow: rgba(255, 255, 255, 0) 0px 0px 0px 10px; }
}
.li-hero b{ position: relative; display: block; font-size: 24px; font-weight: 700; letter-spacing: -0.5px; line-height: 1.15; margin-top: 14px; }
.li-hero__when{ position: relative; display: inline-block; margin-top: 10px; padding: 7px 13px; border-radius: 100px; background: rgba(255, 255, 255, 0.1); font-size: 13.5px; font-weight: 600; }
.li-hero p{ position: relative; margin: 12px 0px 0px; font-size: 14px; line-height: 1.45; color: rgba(255, 255, 255, 0.7); }
.li-rsvp{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.li-rsvp button{ height: 52px; border: 0px; border-radius: 18px; background: rgb(255, 255, 255); font-family: inherit; font-size: 16px; font-weight: 600; color: rgb(17, 17, 17); cursor: pointer; transition: background 0.15s, transform 0.12s; }
.li-rsvp button.on{ background: rgb(29, 2, 12); color: rgb(255, 255, 255); }
.li-rsvp button:active{ transform: scale(0.98); }
.li-rsvp + .xs-note svg{ width: 13px; height: 13px; vertical-align: -2px; }
.li-two{ display: flex; flex-direction: column; gap: 2px; border-radius: 24px; background: rgb(255, 255, 255); padding: 6px 16px; }
.li-two > div{ display: flex; align-items: center; gap: 12px; padding: 10px 0px; }
.li-two > div + div{ border-top: 1px solid rgb(236, 236, 239); }
.li-two i{ flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; background: rgb(42, 42, 46); color: rgb(255, 255, 255); font-style: normal; font-size: 13px; font-weight: 700; display: grid; place-items: center; }
.li-two i.p{ background: rgb(255, 255, 255); color: rgb(29, 2, 12); }
.li-two b{ display: block; font-size: 14.5px; color: rgb(17, 17, 17); }
.li-two small{ display: block; font-size: 12.5px; color: rgb(142, 142, 147); margin-top: 1px; }
.pz-hero{ display: flex; justify-content: center; margin: 18px 0px; }
.pz-hero__ic{ width: 84px; height: 84px; border-radius: 28px; background: rgb(255, 255, 255); color: rgb(29, 2, 12); box-shadow: rgba(12, 14, 18, 0.07) 0px 12px 30px; display: grid; place-items: center; }
.pz-hero__ic svg{ width: 38px; height: 38px; }
.pz-hero--ok .pz-hero__ic{ border-radius: 50%; background: rgb(29, 2, 12); color: rgb(255, 255, 255); }
.pz-cnt{ display: inline-flex; margin-top: 12px; padding: 6px 11px; border-radius: 100px; background: rgb(241, 241, 243); color: rgb(58, 58, 60); font-size: 12.5px; font-weight: 700; }
.pz-g{ margin-top: 20px !important; }
.ob2-opt.dis{ opacity: 0.45; }
.pz-sk{ height: 58px; border-radius: 18px; margin-top: 10px; background: linear-gradient(90deg, rgb(236, 236, 239) 0%, rgb(246, 246, 248) 50%, rgb(236, 236, 239) 100%) 0% 0% / 200% 100%; animation: 1.2s linear 0s infinite normal none running pzSk; }
@keyframes pzSk { 
  100% { background-position: -200% 0px; }
}
.sv-ctx{ display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 12px 14px; border-radius: 20px; background: rgb(255, 255, 255); }
.sv-ctx img{ width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.sv-ctx small{ display: block; font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: rgb(142, 142, 147); }
.sv-ctx b{ display: block; font-size: 16px; color: rgb(17, 17, 17); }
.sv-ctx span{ display: block; font-size: 13px; color: rgb(142, 142, 147); }
.sv-stars{ display: flex; justify-content: center; gap: 8px; margin-top: 34px; }
.sv-stars button{ width: 54px; height: 54px; border: 0px; background: none; padding: 0px; cursor: pointer; transition: transform 0.15s; }
.sv-stars button:active{ transform: scale(0.9); }
.sv-stars svg{ width: 100%; height: 100%; fill: rgb(229, 229, 234); transition: fill 0.2s; }
.sv-stars button.on svg{ fill: rgb(255, 176, 32); }
.sv-lbl{ margin-top: 16px; text-align: center; font-size: 15px; color: rgb(142, 142, 147); min-height: 22px; }
.sv-lbl.on{ color: rgb(17, 17, 17); font-weight: 600; }
.stx{ position: absolute; inset: 0px; z-index: 300; background: rgb(14, 11, 16); color: rgb(255, 255, 255); opacity: 0; transition: opacity 0.4s; overflow: hidden; border-radius: inherit; }
.stx.on{ opacity: 1; }
.stx__bars{ position: absolute; top: 56px; left: 16px; right: 16px; z-index: 6; display: flex; gap: 4px; }
.stx__bars i{ flex: 1 1 0px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.22); overflow: hidden; }
.stx__bars u{ display: block; height: 100%; width: 0px; background: rgb(255, 255, 255); border-radius: 3px; transition: width 0.5s cubic-bezier(0.3, 0.7, 0.2, 1); }
.stx__bars i.done u,.stx__bars i.on u{ width: 100%; }
.stx--light .stx__bars i{ background: rgba(0, 0, 0, 0.1); }
.stx--light .stx__bars u{ background: rgb(17, 17, 17); }
.stx__x{ position: absolute; top: 70px; right: 12px; z-index: 7; height: 32px; padding: 0px 12px; border: 0px; border-radius: 100px; background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.85); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.stx--light .stx__x{ background: rgba(0, 0, 0, 0.06); color: rgb(110, 110, 115); }
.stx__s{ position: absolute; inset: 0px; display: flex; flex-direction: column; padding: 112px 0px 128px; opacity: 0; visibility: hidden; transform: scale(1.03); transition: opacity 0.5s, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0.5s; }
.stx__s.on{ opacity: 1; visibility: visible; transform: none; transition: opacity 0.5s, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), visibility; }
.stx__s.past{ transform: scale(0.97); }
.stx--light .stx__s{ color: rgb(17, 17, 17); }
.stx__vis{ position: relative; flex: 1 1 auto; min-height: 0px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0px 22px; }
.stx__txt{ flex: 0 0 auto; padding: 0px 26px; }
.stx__k{ font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }
.stx__t{ font-size: 30px; font-weight: 700; letter-spacing: -0.8px; line-height: 1.1; margin-top: 8px; }
.stx__p{ font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, 0.7); margin-top: 12px; }
.stx--light .stx__p{ color: rgb(110, 110, 115); }
.stx__foot{ position: absolute; left: 0px; right: 0px; bottom: 0px; z-index: 6; padding: 14px 16px 34px; }
.stx__cta{ width: 100%; height: 56px; border-radius: 100px; font-size: 17px; background: rgb(255, 255, 255) !important; color: rgb(29, 2, 12) !important; }
.stx--light .stx__cta{ background: rgb(17, 17, 17) !important; color: rgb(255, 255, 255) !important; }
.stx__tap{ position: absolute; top: 96px; bottom: 300px; z-index: 5; border: 0px; background: none; padding: 0px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.stx__tap--l{ left: 0px; width: 32%; }
.stx__tap--r{ right: 0px; width: 68%; }
.stx-a{ opacity: 0; }
.stx__s.on .stx-a{ animation-duration: 0.75s; animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); animation-iteration-count: 1; animation-direction: normal; animation-fill-mode: both; animation-play-state: running; animation-name: stxUp; animation-timeline: auto; animation-range: normal; animation-delay: calc(var(--d,0)*110ms + 160ms); }
@keyframes stxUp { 
  0% { opacity: 0; transform: translateY(18px) scale(0.98); }
  100% { opacity: 1; transform: none; }
}
@keyframes sbRing { 
  0% { transform: scale(0.8); opacity: 0.9; }
  100% { transform: scale(1.9); opacity: 0; }
}
@keyframes sbGrow { 
  0% { transform: scaleX(0); }
}
.ln-team{ display: flex; align-items: center; justify-content: center; gap: 10px; }
.ln-team__o{ display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ln-team__o img{ width: 92px; height: 92px; border-radius: 50%; object-fit: cover; border: 3px solid rgba(255, 255, 255, 0.9); box-shadow: rgba(0, 0, 0, 0.45) 0px 16px 40px; }
.ln-team__o b{ font-size: 15px; margin-top: 6px; }
.ln-team__o small{ font-size: 12px; color: rgba(255, 255, 255, 0.55); }
.ln-team__c{ width: 64px; height: 64px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); box-shadow: rgba(255, 255, 255, 0.14) 0px 0px 0px 1px inset; display: grid; place-items: center; margin-top: -34px; }
.ln-spark{ position: absolute; inset: 0px; pointer-events: none; }
.ln-spark i{ position: absolute; left: 50%; top: 44%; width: 6px; height: 6px; border-radius: 50%; background: rgb(255, 255, 255); animation: lnSp 3.2s calc(var(--k)*.4s) ease-out infinite; transform: rotate(calc(var(--k)*45deg)) translateY(0); }
@keyframes lnSp { 
  0% { opacity: 0; transform: rotate(calc(var(--k)*45deg)) translateY(-40px) scale(.4); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: rotate(calc(var(--k)*45deg)) translateY(-150px) scale(1); }
}
.ln-ring{ position: relative; width: 190px; height: 190px; }
.ln-ring svg{ width: 100%; height: 100%; transform: rotate(-90deg); }
.ln-ring circle{ fill: none; stroke: rgba(255, 255, 255, 0.1); stroke-width: 10; }
.ln-ring circle.p{ stroke: rgb(163, 213, 70); stroke-linecap: round; stroke-dasharray: 327; stroke-dashoffset: 327; transition: stroke-dashoffset 1.4s cubic-bezier(0.2, 0.8, 0.2, 1); }
.ln-ring > div{ position: absolute; inset: 0px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ln-ring b{ font-size: 44px; font-weight: 700; letter-spacing: -1.6px; font-variant-numeric: tabular-nums; }
.ln-ring small{ font-size: 13px; color: rgba(255, 255, 255, 0.6); }
.ln-mac{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; width: 100%; margin-top: 26px; }
.ln-mac > div{ display: flex; flex-direction: column; gap: 6px; }
.ln-mac span{ font-size: 12px; color: rgba(255, 255, 255, 0.6); }
.ln-mac span b{ font-size: 18px; color: rgb(255, 255, 255); }
.ln-mac i{ height: 5px; border-radius: 100px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.ln-mac u{ display: block; height: 100%; width: 0px; border-radius: 100px; transition: width 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s; }
.ln-mac small{ font-size: 11px; color: rgba(255, 255, 255, 0.5); }
.ln-day{ width: 100%; display: flex; flex-direction: column; gap: 6px; }
.ln-day > div{ display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 18px; background: rgba(255, 255, 255, 0.06); }
.ln-day time{ flex: 0 0 42px; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.5); font-variant-numeric: tabular-nums; }
.ln-day i{ flex: 0 0 34px; width: 34px; height: 34px; border-radius: 12px; background: rgba(143, 178, 255, 0.16); color: rgb(185, 205, 255); display: grid; place-items: center; }
.ln-day i svg{ width: 18px; height: 18px; }
.ln-day b{ display: block; font-size: 15px; }
.ln-day small{ display: block; font-size: 12px; color: rgba(255, 255, 255, 0.55); }
.ln-scan{ width: 100%; display: flex; flex-direction: column; align-items: center; }
.ln-scan__ph{ position: relative; width: 230px; height: 230px; border-radius: 32px; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.5) 0px 26px 60px; }
.ln-scan__ln{ position: absolute; left: 0px; right: 0px; top: 0px; height: 60px; background: linear-gradient(rgba(255, 207, 153, 0), rgba(255, 207, 153, 0.55) 90%, rgb(255, 207, 153)); animation: 2.2s ease-in-out 0s infinite normal none running lnScan; }
@keyframes lnScan { 
  0% { transform: translateY(-60px); }
  100% { transform: translateY(230px); }
}
.ln-scan__ch{ display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: -18px; position: relative; z-index: 2; }
.ln-scan__ch span{ padding: 7px 11px; border-radius: 100px; background: rgb(255, 255, 255); color: rgb(17, 17, 17); font-size: 12.5px; font-weight: 600; box-shadow: rgba(0, 0, 0, 0.3) 0px 6px 18px; }
.ln-scan__ch b{ color: rgb(196, 111, 0); }
.ln-scan__pts{ display: flex; align-items: center; gap: 6px; margin-top: 14px; padding: 8px 13px; border-radius: 100px; background: rgba(163, 213, 70, 0.16); color: rgb(201, 238, 138); font-size: 13px; font-weight: 600; }
.ln-scan__pts svg{ width: 14px; height: 14px; }
.ln-tr{ position: relative; width: 100%; height: 300px; border-radius: 28px; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.5) 0px 26px 60px; }
.ln-tr > img{ width: 100%; height: 100%; object-fit: cover; }
.ln-tr::after{ content: ""; position: absolute; inset: 0px; background: linear-gradient(rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.72)); }
.ln-tr__b{ position: absolute; left: 14px; bottom: 52px; z-index: 2; display: flex; align-items: center; gap: 10px; }
.ln-tr__b img{ width: 42px; height: 42px; border-radius: 50%; object-fit: cover; border: 2px solid rgb(255, 255, 255); }
.ln-tr__b b{ display: block; font-size: 15px; }
.ln-tr__b small{ font-size: 12px; color: rgba(255, 255, 255, 0.7); }
.ln-tr__wk{ position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 2; display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.ln-tr__wk span{ height: 26px; border-radius: 9px; background: rgba(255, 255, 255, 0.12); display: grid; place-items: center; font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, 0.6); }
.ln-tr__wk span.on{ background: rgb(231, 183, 255); color: rgb(42, 15, 51); }
.ln-ch{ position: relative; width: 100%; height: 220px; padding: 18px 16px 12px; border-radius: 26px; background: rgba(255, 255, 255, 0.05); box-shadow: rgba(255, 255, 255, 0.08) 0px 0px 0px 1px inset; }
.ln-ch svg{ width: 100%; height: 140px; overflow: visible; }
.ln-ch polyline{ fill: none; stroke: rgb(127, 224, 195); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 600; stroke-dashoffset: 600; transition: stroke-dashoffset 1.8s cubic-bezier(0.2, 0.8, 0.2, 1); }
.ln-ch__k{ display: flex; align-items: baseline; gap: 8px; margin-top: 8px; }
.ln-ch__k b{ font-size: 30px; font-weight: 700; letter-spacing: -0.8px; color: rgb(127, 224, 195); }
.ln-ch__k b::before{ content: "−"; }
.ln-ch__k small{ font-size: 12.5px; color: rgba(255, 255, 255, 0.55); }
.ln-wk{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; }
.ln-wk > div{ display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 6px; border-radius: 20px; background: rgba(255, 255, 255, 0.06); }
.ln-wk small{ font-size: 11px; color: rgba(255, 255, 255, 0.5); }
.ln-wk i{ width: 42px; height: 42px; border-radius: 50%; overflow: hidden; box-shadow: rgba(255, 255, 255, 0.7) 0px 0px 0px 2px; }
.ln-wk i img{ width: 100%; height: 100%; object-fit: cover; }
.ln-wk b{ font-size: 13px; color: rgba(255, 255, 255, 0.7); text-transform: uppercase; }
.ln-go{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.ln-go > div{ display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 18px 16px; border-radius: 24px; background: rgba(255, 255, 255, 0.08); box-shadow: rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset; }
.ln-go i{ width: 46px; height: 46px; border-radius: 16px; background: rgb(255, 255, 255); color: rgb(29, 2, 12); display: grid; place-items: center; margin-bottom: 10px; }
.ln-go i svg{ width: 22px; height: 22px; }
.ln-go b{ font-size: 17px; }
.ln-go small{ font-size: 12.5px; color: rgba(255, 255, 255, 0.6); }
.pf-plan .xs-b b,.ln-tr__b b{ color: rgb(255, 255, 255); }
.pf-plan .xs-b small{ white-space: normal; color: rgba(255, 255, 255, 0.62); }
.li-two .xs-b small,.sv-ctx .xs-b small{ white-space: normal; }
.pf-fd__r .xs-b b{ font-size: 15px; font-weight: 600; color: rgb(17, 17, 17); letter-spacing: -0.2px; }
.pf-fd__r .xs-b b{ font-size: 14px; }
.ln-ch polyline.t{ stroke: rgba(127, 224, 195, 0.35); stroke-width: 2; stroke-dasharray: 5, 6; stroke-dashoffset: 0; transition: none; }
.ln-ch circle{ fill: rgb(127, 224, 195); }
.bk-glass{ position: relative; width: 104px; height: 104px; margin: 14px auto 22px; border-radius: 32px; background: rgb(255, 255, 255); box-shadow: rgba(12, 14, 18, 0.08) 0px 18px 40px, rgba(12, 14, 18, 0.04) 0px 0px 0px 1px inset; display: grid; place-items: center; overflow: hidden; }
.bk-glass__o{ display: none; }
.bk-glass > span{ position: relative; color: rgb(29, 2, 12); }
.bk-glass > span svg{ width: 40px; height: 40px; }
.bk-glass--v{ background: linear-gradient(145deg, rgb(239, 230, 251), rgb(216, 198, 243)); }
.bk-dots{ display: flex; gap: 7px; }
.bk-dots i{ width: 10px; height: 10px; border-radius: 50%; background: rgb(122, 79, 192); animation: 1.2s ease-in-out 0s infinite normal none running bkDot; }
.bk-dots i:nth-child(2){ animation-delay: 0.2s; }
.bk-dots i:nth-child(3){ animation-delay: 0.4s; }
@keyframes bkDot { 
  0%, 100% { opacity: 0.25; transform: scale(0.8); }
  50% { opacity: 1; transform: none; }
}
.bk-coach{ display: flex; flex-direction: column; align-items: center; text-align: center; margin-top: 10px; }
.bk-coach img{ width: 104px; height: 104px; border-radius: 50%; object-fit: cover; box-shadow: rgba(0, 0, 0, 0.14) 0px 14px 34px; }
.bk-coach small{ margin-top: 14px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgb(142, 142, 147); }
.bk-coach b{ font-size: 26px; font-weight: 700; letter-spacing: -0.5px; color: rgb(17, 17, 17); margin-top: 4px; }
.bk-coach p{ margin: 8px 0px 0px; font-size: 14.5px; line-height: 1.45; color: rgb(110, 110, 115); }
.bk-empty{ margin: 0px 0px 10px; padding: 14px 16px; border-radius: 18px; background: rgb(255, 255, 255); }
.bk-empty b{ display: block; font-size: 15px; color: rgb(17, 17, 17); }
.bk-empty small{ display: block; font-size: 13px; line-height: 1.4; color: rgb(142, 142, 147); margin-top: 3px; }
.rf-app.is-pre:not(.pre-ob) .pre-layer{ background: var(--bg); }
.pf-tab{ padding: 0px 0px 10px; }
.pf-tab .pf-nav{ padding: 0px 16px 6px; position: relative; }
.pf-nav .rb{ position: static; width: 42px; height: 42px; background: rgb(255, 255, 255); box-shadow: rgba(20, 16, 26, 0.06) 0px 4px 14px; }
.pf-nav .rb svg{ width: 20px; height: 20px; }
.pf-today{ padding: 0px 12px 0px 8px; gap: 2px; font-family: inherit; font-size: 13.5px; font-weight: 600; align-items: center; width: auto !important; border-radius: 100px !important; display: flex !important; }
.pf-today svg{ width: 16px !important; height: 16px !important; }
.stack.pf{ padding: 0px 16px; }
.pf-page .stack.pf{ padding: 4px 16px 20px; }
.pf-home .stack.pf{ padding: 0px; }
.pf-week2 .wday{ cursor: pointer; }
.pf-wd--pre,.pf-wd--fut{ cursor: default !important; }
.pf-wd--pre .num{ text-decoration: line-through rgba(20, 16, 26, 0.25); }
.pf-wd--lock .num{ opacity: 0.7; }
.pf-dot--p{ box-shadow: inset 0 0 0 1.4px var(--s3,#34c759); }
.pf-band .band__ic{ background: rgb(243, 242, 245); color: rgb(16, 16, 20); }
.pf-band .band__ic svg{ width: 18px; height: 18px; }
.pf-band__lk{ background: rgb(255, 243, 224) !important; color: rgb(179, 107, 0) !important; }
.pf-goal{ gap: 12px; }
.pf-goal .goals__kcal b{ font-size: 28px; font-weight: 600; letter-spacing: -0.8px; line-height: 30px; }
.pf-goal .goals__sub em{ font-style: normal; color: var(--ink,#101014); font-weight: 500; }
.pf-how{ flex: 0 0 auto; height: 32px; padding: 0px 13px; border: 0px; border-radius: 100px; background: rgb(243, 242, 245); color: rgb(16, 16, 20); font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.pf-kbar{ margin: 0px; }
.pf-kbar i.on{ background: var(--prot,#a3d546); }
.pf-rgs{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 2px; }
.pf-rg{ display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pf-rg__d{ position: relative; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: rgb(247, 246, 248); color: rgb(182, 181, 189); box-shadow: rgb(231, 230, 234) 0px 0px 0px 1.5px inset; transition: transform 0.15s; }
.pf-rg:active .pf-rg__d{ transform: scale(0.94); }
.pf-rg__d svg{ width: 22px; height: 22px; }
.pf-rg__d > i{ position: absolute; inset: 4px; border-radius: 50%; display: block; }
.pf-rg.on .pf-rg__d{ background: rgb(255, 255, 255); box-shadow: inset 0 0 0 2.5px var(--prot,#a3d546); }
.pf-rg__d em{ position: absolute; right: -3px; bottom: -2px; min-width: 18px; height: 18px; padding: 0px 4px; border-radius: 9px; background: rgb(16, 16, 20); color: rgb(255, 255, 255); font-style: normal; font-size: 10px; font-weight: 700; display: grid; place-items: center; box-shadow: rgb(255, 255, 255) 0px 0px 0px 2px; }
.pf-rg b{ font-size: 12px; font-weight: 600; color: var(--ink,#101014); margin-top: 4px; }
.pf-rg small{ font-size: 11px; color: var(--mut,#96959d); font-variant-numeric: tabular-nums; }
.pf-tl{ font-size: 12px; font-weight: 500; color: var(--mut,#96959d); letter-spacing: 0px; }
.pf-fm{ max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-chev{ flex: 0 0 auto; color: rgb(199, 198, 204); }
.pf-chev svg{ width: 16px; height: 16px; }
.pf-tiles{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pf-tile{ position: relative; background: rgb(255, 255, 255); border-radius: 24px; padding: 13px 14px 14px; box-shadow: rgba(20, 16, 26, 0.06) 0px 12px 28px; cursor: pointer; overflow: hidden; -webkit-tap-highlight-color: transparent; transition: transform 0.15s; }
.pf-tile:active{ transform: scale(0.98); }
.pf-tile__top{ display: flex; align-items: center; justify-content: space-between; }
.pf-tile__ic{ width: 36px; height: 36px; border-radius: 50%; background: rgb(243, 242, 245); color: rgb(95, 94, 102); display: grid; place-items: center; }
.pf-tile__ic svg{ width: 18px; height: 18px; }
.pf-tile.done .pf-tile__ic{ background: var(--ok-bg,#e8f7ec); color: var(--ok,#1e9c45); }
.pf-tile__add{ width: 28px; height: 28px; border-radius: 50%; background: rgb(16, 16, 20); color: rgb(255, 255, 255); display: grid; place-items: center; }
.pf-tile__add svg{ width: 14px; height: 14px; }
.pf-tile__v{ display: flex; align-items: baseline; gap: 4px; margin-top: 12px; flex-wrap: wrap; }
.pf-tile__v b{ font-size: 22px; font-weight: 600; letter-spacing: -0.6px; color: var(--ink,#101014); font-variant-numeric: tabular-nums; }
.pf-tile__v b.e{ color: rgb(199, 198, 204); }
.pf-tile__v span{ font-size: 12px; color: var(--mut,#96959d); }
.pf-tile small{ display: block; font-size: 12px; color: var(--mut,#96959d); margin-top: 2px; }
.pf-fd.slot{ padding: 6px 0px; }
.pf-plan{ border-radius: 26px; background: linear-gradient(135deg, rgb(27, 27, 30) 0%, rgb(44, 44, 48) 100%); }
.pf-plan > svg{ width: 16px; height: 16px; flex: 0 0 auto; color: rgba(255, 255, 255, 0.4); }
.pf-all{ border-radius: 22px; box-shadow: rgba(20, 16, 26, 0.06) 0px 12px 28px; }
.pf-all svg{ width: 16px; height: 16px; color: rgb(199, 198, 204); }
.pf-cd.fut,.pf-cd.pre{ background: none; color: rgb(199, 198, 204); cursor: default; }
.pf-cd.cur{ background: rgb(16, 16, 20); color: rgb(255, 255, 255); }
.rf-pane.rf-t-pre-meal .rf-scr{ background: rgb(12, 11, 14); padding: 0px !important; overflow: hidden !important; }
.rf-pane.rf-t-pre-meal .xs-root{ position: absolute; inset: 0px; }
.pfx{ position: absolute; inset: 0px; background: rgb(12, 11, 14); color: rgb(255, 255, 255); overflow: hidden; }
.pfx__img{ position: absolute; left: 0px; right: 0px; top: 0px; height: 64%; background-size: cover; background-position: center center; animation: 0.5s ease 0s 1 normal both running pfxIn; }
@keyframes pfxIn { 
  0% { opacity: 0.4; transform: scale(1.04); }
}
.pfx__shade{ position: absolute; inset: 0px; pointer-events: none; background: linear-gradient(rgba(12, 11, 14, 0.55) 0%, rgba(12, 11, 14, 0) 18%, rgba(12, 11, 14, 0) 38%, rgba(12, 11, 14, 0.85) 58%, rgb(12, 11, 14) 66%); }
.pfx--np .pfx__shade{ background: none; }
.pfx__inv{ position: absolute; left: 16px; right: 16px; top: 112px; height: 300px; border: 1.5px dashed rgba(255, 255, 255, 0.22); border-radius: 30px; background: rgba(255, 255, 255, 0.04); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: rgb(255, 255, 255); font-family: inherit; cursor: pointer; }
.pfx__inv span{ width: 68px; height: 68px; border-radius: 50%; background: rgb(255, 255, 255); color: rgb(16, 16, 20); display: grid; place-items: center; margin-bottom: 8px; }
.pfx__inv span svg{ width: 28px; height: 28px; }
.pfx__inv b{ font-size: 19px; font-weight: 600; }
.pfx__inv small{ font-size: 13.5px; color: rgba(255, 255, 255, 0.6); }
.pfx__top{ position: absolute; left: 14px; right: 14px; top: 54px; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pfx__rb{ flex: 0 0 42px; width: 42px; height: 42px; border: 0px; border-radius: 50%; background: rgba(30, 28, 34, 0.42); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: rgb(255, 255, 255); display: grid; place-items: center; cursor: pointer; box-shadow: rgba(255, 255, 255, 0.14) 0px 0px 0px 1px inset; }
.pfx__rb svg{ width: 20px; height: 20px; }
.pfx__pills{ display: flex; gap: 6px; min-width: 0px; }
.pfx__pills button{ display: flex; align-items: center; gap: 5px; height: 38px; padding: 0px 13px; border: 0px; border-radius: 100px; background: rgba(30, 28, 34, 0.42); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: rgba(255, 255, 255, 0.14) 0px 0px 0px 1px inset; color: rgb(255, 255, 255); font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.pfx__pills svg{ width: 14px; height: 14px; opacity: 0.75; }
.pfx__head{ position: absolute; left: 20px; right: 20px; top: calc(64% - 150px); z-index: 2; }
.pfx__badge{ display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0px 11px 0px 9px; border-radius: 100px; background: rgba(30, 28, 34, 0.5); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: rgba(255, 255, 255, 0.14) 0px 0px 0px 1px inset; font-size: 12px; font-weight: 600; }
.pfx__badge svg{ width: 13px; height: 13px; color: rgb(163, 213, 70); }
.pfx__title{ margin-top: 10px; font-size: 28px; font-weight: 700; letter-spacing: -0.8px; line-height: 1.08; text-shadow: rgba(0, 0, 0, 0.35) 0px 2px 20px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pfx__dots{ position: absolute; left: 0px; right: 0px; top: calc(64% - 22px); z-index: 2; display: flex; justify-content: center; gap: 5px; }
.pfx__dots i{ width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.4); cursor: pointer; }
.pfx__dots i.on{ width: 18px; border-radius: 100px; background: rgb(255, 255, 255); }
.pfx__panel{ position: absolute; left: 0px; right: 0px; bottom: 0px; z-index: 3; padding: 14px 16px 34px; }
.pfx__strip{ display: flex; align-items: center; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 6px 2px 4px; }
.pfx__strip::-webkit-scrollbar{ display: none; }
.pfx__th{ position: relative; flex: 0 0 58px; width: 58px; height: 58px; border-radius: 16px; cursor: pointer; box-shadow: transparent 0px 0px 0px 2px; transition: box-shadow 0.15s; }
.pfx__th.on{ box-shadow: rgb(255, 255, 255) 0px 0px 0px 2.5px; }
.pfx__th em{ position: absolute; left: 3px; bottom: 3px; padding: 1px 5px; border-radius: 100px; background: rgba(0, 0, 0, 0.6); font-style: normal; font-size: 9px; font-weight: 700; }
.pfx__th button{ position: absolute; right: -5px; top: -5px; width: 22px; height: 22px; border: 2px solid rgb(12, 11, 14); border-radius: 50%; background: rgb(255, 255, 255); color: rgb(16, 16, 20); display: grid; place-items: center; padding: 0px; cursor: pointer; }
.pfx__th button svg{ width: 10px; height: 10px; }
.pfx__add{ flex: 0 0 58px; width: 58px; height: 58px; border: 0px; border-radius: 16px; background: rgba(255, 255, 255, 0.1); box-shadow: rgba(255, 255, 255, 0.14) 0px 0px 0px 1px inset; color: rgb(255, 255, 255); display: grid; place-items: center; cursor: pointer; }
.pfx__add svg{ width: 20px; height: 20px; }
.pfx__n{ margin-left: auto; padding-left: 8px; font-size: 12px; color: rgba(255, 255, 255, 0.55); white-space: nowrap; }
.pfx__note{ display: flex; gap: 10px; align-items: flex-start; margin-top: 10px; padding: 12px 14px; border-radius: 20px; background: rgba(255, 255, 255, 0.08); box-shadow: rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset; }
.pfx__note svg{ flex: 0 0 18px; width: 18px; height: 18px; color: rgba(255, 255, 255, 0.55); margin-top: 2px; }
.pfx__note textarea{ flex: 1 1 auto; min-width: 0px; border: 0px; outline: 0px; resize: none; background: none; color: rgb(255, 255, 255); font-family: inherit; font-size: 15px; line-height: 1.4; }
.pfx__note textarea::placeholder{ color: rgba(255, 255, 255, 0.42); }
.pfx__hint{ display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; padding: 0px 4px; font-size: 12.5px; line-height: 1.4; color: rgba(255, 255, 255, 0.6); }
.pfx__hint svg{ flex: 0 0 15px; width: 15px; height: 15px; color: rgba(255, 255, 255, 0.7); margin-top: 1px; }
.pfx__cta{ width: 100%; height: 56px; margin-top: 14px; border-radius: 100px; font-size: 16.5px; background: rgb(255, 255, 255) !important; color: rgb(16, 16, 20) !important; }
.pfx__cta:disabled{ opacity: 0.6; }
.pf-goal{ background: rgb(255, 255, 255); border-radius: 26px; padding: 16px; display: flex; flex-direction: column; gap: 12px; box-shadow: rgba(20, 16, 26, 0.06) 0px 12px 30px; }
.pf-tile__bar{ display: block; height: 5px; margin-top: 8px; border-radius: 100px; background: rgb(232, 240, 251); overflow: hidden; }
.pf-tile__bar u{ display: block; height: 100%; border-radius: 100px; background: rgb(90, 160, 242); }
.stx--light{ background: rgb(255, 255, 255); }
.stx--light .stx__s{ padding: 96px 0px 118px; background: rgb(255, 255, 255) !important; }
.stx--light .stx__bars{ display: none; }
.stx--light .stx__x{ top: 56px; right: 16px; height: 28px; padding: 0px 4px; color: rgb(163, 162, 170); font-size: 13px; font-weight: 500; background: none !important; }
.stx--light .stx__vis{ flex: 0 0 auto; display: block; padding: 0px 22px; }
.stx--light .stx__txt{ text-align: center; padding: 0px 30px; margin-top: 22px; }
.stx--light .stx__t{ font-size: 24px; font-weight: 600; letter-spacing: -0.9px; line-height: 1.15; margin-top: 0px; color: rgb(16, 16, 20); }
.stx--light .stx__p{ font-size: 14px; line-height: 1.55; color: rgb(124, 123, 132); margin-top: 10px; }
.stx__dots{ display: flex; gap: 6px; justify-content: center; margin-top: 20px; }
.stx__dots i{ width: 6px; height: 6px; border-radius: 50%; background: rgb(228, 228, 231); }
.stx__dots i.on{ width: 18px; border-radius: 100px; background: rgb(16, 16, 20); }
.stx--light .stx__cta{ box-shadow: rgba(20, 16, 26, 0.18) 0px 12px 28px; background: rgb(16, 16, 20) !important; color: rgb(255, 255, 255) !important; }
.stx--light .stx__tap{ top: 90px; bottom: 420px; }
.gx-art{ position: relative; height: 330px; border-radius: 34px; overflow: hidden; display: grid; place-items: center; background: radial-gradient(88% 130% at 6% 0%, rgb(233, 233, 238) 0%, rgba(233, 233, 238, 0) 56%), radial-gradient(96% 140% at 100% 100%, rgb(210, 229, 178) 0%, rgba(210, 229, 178, 0) 58%), linear-gradient(140deg, rgb(248, 245, 247) 0%, rgb(244, 246, 240) 100%); box-shadow: rgba(20, 16, 26, 0.07) 0px 14px 34px; }
.gx-orbit{ position: absolute; width: 250px; height: 250px; border-radius: 50%; border: 1.5px dashed rgba(20, 16, 26, 0.1); }
.stx__s.on .gx-orbit{ animation: 30s linear 0s infinite normal none running gxSpin; }
@keyframes gxSpin { 
  100% { transform: rotate(360deg); }
}
.gx-plate{ position: relative; width: 176px; height: 176px; border-radius: 50%; background-size: cover; background-position: center center; box-shadow: rgba(50, 70, 30, 0.22) 0px 22px 44px, rgba(20, 16, 26, 0.05) 0px 0px 0px 1px inset; transform: scale(0.6); opacity: 0; }
.gx-plate--l{ width: 210px; height: 210px; margin-top: -40px; }
.stx__s.on .gx-plate{ animation: 0.8s cubic-bezier(0.2, 1.5, 0.4, 1) 0.15s 1 normal both running gxIn; }
@keyframes gxIn { 
  100% { transform: none; opacity: 1; }
}
.gx-badge{ position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 8px; background: rgb(255, 255, 255); border-radius: 100px; padding: 6px 14px 6px 6px; font-size: 13px; font-weight: 600; color: rgb(16, 16, 20); white-space: nowrap; box-shadow: rgba(20, 16, 26, 0.14) 0px 12px 28px; transform: scale(0.4); opacity: 0; }
.stx__s.on .gx-badge{ animation-duration: 0.6s; animation-timing-function: cubic-bezier(0.2, 1.5, 0.4, 1); animation-iteration-count: 1; animation-direction: normal; animation-fill-mode: both; animation-play-state: running; animation-name: gxIn; animation-timeline: auto; animation-range: normal; animation-delay: calc(.7s + var(--i,0)*.4s); }
.gx-badge__ic{ width: 28px; height: 28px; border-radius: 50%; background: rgb(241, 241, 243); color: rgb(29, 2, 12); display: grid; place-items: center; }
.gx-badge__ic svg{ width: 14px; height: 14px; }
.gx-badge--ok .gx-badge__ic{ background: rgb(232, 247, 236); color: rgb(30, 156, 69); }
.gx-badge--lk .gx-badge__ic{ background: rgb(243, 242, 245); color: rgb(139, 138, 146); }
.gx-badge--lk s{ text-decoration: none; filter: blur(3.5px); color: rgb(16, 16, 20); }
.gx-stack{ position: absolute; right: 30px; top: 40px; display: flex; align-items: center; }
.gx-stack i{ width: 52px; height: 52px; border-radius: 16px; border: 3px solid rgb(255, 255, 255); box-shadow: rgba(20, 16, 26, 0.14) 0px 10px 20px; margin-left: -18px; transform: rotate(8deg); }
.gx-stack i:first-child{ transform: rotate(-6deg); margin-left: 0px; }
.gx-stack em{ margin-left: 6px; font-style: normal; font-size: 13px; font-weight: 700; color: rgb(16, 16, 20); }
.gx-bubble{ position: absolute; left: 22px; right: 22px; bottom: 22px; padding: 14px 16px; border-radius: 22px 22px 22px 6px; background: rgb(255, 255, 255); box-shadow: rgba(20, 16, 26, 0.14) 0px 16px 34px; text-align: left; transform: translateY(16px); opacity: 0; }
.stx__s.on .gx-bubble{ animation: 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.7s 1 normal both running gxUp; }
@keyframes gxUp { 
  100% { transform: none; opacity: 1; }
}
.gx-bubble small{ font-size: 11.5px; font-weight: 600; color: rgb(163, 162, 170); }
.gx-bubble b{ display: block; margin-top: 3px; font-size: 16px; font-weight: 600; line-height: 1.3; color: rgb(16, 16, 20); }
.gx-week{ display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; width: calc(100% - 28px); margin-top: -40px; }
.gx-week span{ display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 0px 9px; border-radius: 18px; background: rgb(255, 255, 255); box-shadow: rgba(20, 16, 26, 0.08) 0px 8px 18px; transform: translateY(12px); opacity: 0; }
.stx__s.on .gx-week span{ animation-duration: 0.5s; animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); animation-iteration-count: 1; animation-direction: normal; animation-fill-mode: both; animation-play-state: running; animation-name: gxUp; animation-timeline: auto; animation-range: normal; animation-delay: calc(.2s + var(--i)*.07s); }
.gx-week small{ font-size: 10.5px; font-weight: 600; color: rgb(163, 162, 170); }
.gx-week b{ font-size: 16px; color: rgb(16, 16, 20); }
.gx-week i{ width: 5px; height: 5px; border-radius: 50%; background: rgb(52, 199, 89); }
.gx-week span.on{ background: rgb(16, 16, 20); }
.gx-week span.on b{ color: rgb(255, 255, 255); }
.gx-week span.on small{ color: rgba(255, 255, 255, 0.6); }
.li2{ position: relative; display: flex; min-height: 176px; border-radius: 26px; overflow: hidden; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 0.15s; }
.li2:active{ transform: scale(0.99); }
.li2__art{ position: absolute; right: -6px; top: 0px; bottom: 0px; width: 48%; pointer-events: none; }
.li2__art img{ position: absolute; right: 0px; bottom: -58px; height: 250px; width: auto; }
.li2__halo{ position: absolute; right: 6%; top: 18px; width: 150px; height: 150px; border-radius: 50%; }
.li2__b{ position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; padding: 16px 16px 16px 18px; max-width: 62%; }
.li2__b small{ font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.li2__b b{ margin-top: 6px; font-size: 20px; font-weight: 700; letter-spacing: -0.5px; line-height: 1.12; }
.li2__b span{ margin-top: 8px; font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.li2__b .li2__m{ margin-top: 2px; font-size: 12.5px; font-weight: 400; }
.li2__q{ display: flex; gap: 6px; margin-top: 12px; }
.li2__q button{ height: 34px; padding: 0px 14px; border: 0px; border-radius: 100px; font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.li2__st{ display: inline-flex; align-items: center; gap: 5px; margin-top: 12px; height: 28px; padding: 0px 11px 0px 8px; border-radius: 100px; font-size: 12.5px; font-weight: 600; }
.li2__st svg{ width: 14px; height: 14px; }
.li2--light{ background: rgb(255, 255, 255); box-shadow: rgba(20, 16, 26, 0.06) 0px 12px 28px; }
.li2--light .li2__halo{ background: radial-gradient(circle, rgb(239, 233, 236) 0%, rgba(239, 233, 236, 0) 70%); }
.li2--light .li2__art::after{ content: ""; position: absolute; left: 0px; right: 0px; bottom: 0px; height: 40px; background: linear-gradient(rgba(255, 255, 255, 0), rgb(255, 255, 255)); }
.li2--light .li2__b small{ color: rgb(142, 142, 147); }
.li2--light .li2__b b{ color: rgb(16, 16, 20); }
.li2--light .li2__b span{ color: rgb(16, 16, 20); }
.li2--light .li2__b .li2__m{ color: rgb(142, 142, 147); }
.li2--light .li2__q button{ background: rgb(16, 16, 20); color: rgb(255, 255, 255); }
.li2--light .li2__q button + button{ background: rgb(241, 241, 243); color: rgb(16, 16, 20); }
.li2--light .li2__st{ background: rgb(241, 241, 243); color: rgb(16, 16, 20); }
.li2--dark{ background: rgb(20, 18, 20); }
.li2--dark .li2__halo{ background: radial-gradient(circle, rgba(255, 226, 205, 0.22) 0%, rgba(255, 226, 205, 0) 70%); }
.li2--dark .li2__art::after{ content: ""; position: absolute; left: 0px; right: 0px; bottom: 0px; height: 46px; background: linear-gradient(rgba(20, 18, 20, 0), rgb(20, 18, 20)); }
.li2--dark .li2__b small{ color: rgba(255, 255, 255, 0.5); }
.li2--dark .li2__b b{ color: rgb(255, 255, 255); }
.li2--dark .li2__b span{ color: rgb(255, 255, 255); }
.li2--dark .li2__b .li2__m{ color: rgba(255, 255, 255, 0.5); }
.li2--dark .li2__q button{ background: rgb(255, 255, 255); color: rgb(16, 16, 20); }
.li2--dark .li2__q button + button{ background: rgba(255, 255, 255, 0.12); color: rgb(255, 255, 255); }
.li2--dark .li2__st{ background: rgba(255, 255, 255, 0.1); color: rgb(255, 255, 255); }
.ob2-lib .li2{ margin-top: 0px; }
.li-hero{ background: rgb(20, 18, 20); }
.li-hero__ph{ background: rgba(255, 255, 255, 0.9); animation: auto ease 0s 1 normal none running none; }
.li-hero__ph img{ border-color: rgb(20, 18, 20); }
.li-rsvp button.on{ background: rgb(16, 16, 20); color: rgb(255, 255, 255); }
.bk-step{ transition: opacity 0.35s, filter 0.35s; }
.bk-lock{ opacity: 0.35; filter: grayscale(1); pointer-events: none; user-select: none; }
.xs-bar2 .btn[disabled],.xs-sheet__f .btn[disabled]{ background: rgb(229, 229, 234); color: rgb(142, 142, 147); }
.pre-days button.on{ background: rgb(255, 197, 220); }
.pre-days button.on b{ color: rgb(10, 13, 18); }
.pre-days button.on span,.pre-days button.on small{ color: rgba(10, 13, 18, 0.62); }
.pre-hero--dark .bk-tzp{ background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.85); }
.pre-when[data-xa]{ cursor: pointer; }
.pre-when .chev{ margin-left: auto; color: rgba(255, 255, 255, 0.45); }
.li2--live{ flex-wrap: wrap; }
.li2--live .li2__b{ padding-bottom: 6px; }
.li2__zoom{ position: relative; z-index: 2; flex: 1 0 calc(100% - 32px); width: auto; margin: 6px 16px 16px; }
.li2__live{ display: inline-flex; align-items: center; gap: 6px; }
.li2__live i{ width: 7px; height: 7px; border-radius: 50%; background: rgb(229, 72, 77); box-shadow: rgba(229, 72, 77, 0.18) 0px 0px 0px 3px; animation: 1.4s ease-in-out 0s infinite normal none running li2pulse; }
@keyframes li2pulse { 
  50% { opacity: 0.35; }
}
.pre-bar.pre-bar--zoom .btn{ background: rgb(45, 140, 255); color: rgb(255, 255, 255); display: flex; align-items: center; justify-content: center; gap: 8px; }
.pre-bar--zoom .btn svg{ width: 18px; height: 18px; }
.bkd-hero{ position: relative; overflow: hidden; padding: 22px 18px 18px; border-radius: 26px; background: rgb(255, 255, 255); }
.bkd-ok{ width: 46px; height: 46px; border-radius: 50%; background: rgb(29, 2, 12); color: rgb(255, 255, 255); display: grid; place-items: center; }
.bkd-ok svg{ width: 22px; height: 22px; }
.bkd-hero > small{ display: block; margin-top: 14px; font-size: 13px; font-weight: 600; color: rgb(142, 142, 147); }
.bkd-hero > b{ display: block; margin-top: 4px; font-size: 26px; font-weight: 700; letter-spacing: -0.6px; color: rgb(17, 17, 17); line-height: 1.12; }
.bkd-time{ font-size: 22px; font-weight: 600; letter-spacing: -0.4px; color: rgb(17, 17, 17); margin-top: 2px; font-variant-numeric: tabular-nums; }
.bkd-hero .bk-tzp{ margin-top: 10px; font-size: 12.5px; padding: 5px 11px; }
.bkd-in{ margin-top: 10px; font-size: 13.5px; line-height: 1.45; color: rgb(110, 110, 115); }
.bkd-hero .pre-zoom{ margin-top: 14px; }
.bkd .pre-coach.bkd-coach{ margin: 0px; padding: 12px 16px; background: transparent; border-radius: 0px; }
.bkd-coach img{ width: 44px; height: 44px; }
.bkd-coach b{ color: rgb(17, 17, 17); }
.bkd-coach small{ color: rgb(142, 142, 147); }
.bkd .xs-row .xs-b small{ white-space: normal; }
.bkd-btns{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 28px; }
.bkd-btns button{ height: 50px; border: 0px; border-radius: 100px; background: rgb(17, 17, 17); color: rgb(255, 255, 255); font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.bkd-btns button + button{ background: rgb(255, 255, 255); color: rgb(215, 55, 47); }
.pre-hero--dark{ background: rgb(17, 17, 17); }
.pre-hero__path{ white-space: nowrap; flex: 0 0 auto; }
.ob2-steps .xs-b small{ white-space: normal; overflow: visible; text-overflow: clip; }
.rf-pane.rf-t-pre-prep .xs-row--radio .xs-ck{ order: -1; opacity: 1; width: 24px; height: 24px; border-radius: 50%; box-shadow: rgb(199, 199, 204) 0px 0px 0px 1.5px inset; color: transparent; margin-right: 2px; }
.rf-pane.rf-t-pre-prep .xs-row--radio .xs-ck svg{ width: 14px; height: 14px; stroke-width: 3px; }
.rf-pane.rf-t-pre-prep .xs-row--radio.on .xs-ck{ background: rgb(17, 17, 17); box-shadow: none; color: rgb(255, 255, 255); }
.li-two i{ background: rgb(17, 17, 17); color: rgb(255, 255, 255); }
.li-two i.p{ background: rgb(229, 229, 234); color: rgb(17, 17, 17); }
.ob2-photo{ border: 0px; box-shadow: rgb(236, 236, 239) 0px 0px 0px 1px inset; }
.ob2-up{ border: 0px; }
.rf-pane.rf-t-pre-liana .xs,.rf-pane.rf-t-pre-prep .xs{ padding-bottom: 150px; }
.li-hero__ph{ background: rgba(255, 255, 255, 0.22); animation: auto ease 0s 1 normal none running none; }
.li-hero{ background: rgb(17, 17, 17); }
.li-hero__ph{ margin-top: 4px; }
.rf-app.pre-ob .pre-layer:has(.ob2--wel){ padding: 0px; background: rgb(255, 255, 255); overflow: hidden; }
.pre-layer:has(.ob2--wel) > .xs-root{ height: 100%; }
.ob2.ob2--wel{ min-height: 0px; height: 100%; box-sizing: border-box; padding: 0px; background: rgb(255, 255, 255); overflow: hidden; }
.ow-hero{ position: relative; flex: 0 0 468px; display: flex; flex-direction: column; overflow: hidden; padding: 62px 24px 26px; border-radius: 0px 0px 28px 28px; color: rgb(255, 255, 255); background: radial-gradient(58% 48% at 70% 40%, rgba(222, 198, 182, 0.22) 0%, rgba(222, 198, 182, 0) 72%), linear-gradient(rgb(34, 5, 15), rgb(21, 1, 9)); }
.ow-hero::after{ content: ""; position: absolute; left: 0px; right: 0px; bottom: 0px; height: 58%; background: linear-gradient(0deg, rgb(21, 1, 9) 0%, rgba(21, 1, 9, 0.86) 38%, rgba(21, 1, 9, 0) 100%); pointer-events: none; }
.ow-fig{ position: absolute; right: -26px; top: 58px; height: 430px; width: auto; pointer-events: none; mask-image: linear-gradient(rgb(0, 0, 0) 38%, rgba(0, 0, 0, 0.4) 60%, transparent 80%); }
.ow-hero .ob2-logo{ position: relative; z-index: 2; justify-content: flex-start; padding: 0px; }
.ow-hero .ob2-logo svg{ height: 20px; }
.ow-hero__b{ position: relative; z-index: 2; margin-top: auto; }
.ow-over{ font-size: 13.5px; font-weight: 500; letter-spacing: -0.1px; color: rgba(255, 255, 255, 0.55); }
.ow-h{ font-size: 34px; font-weight: 600; letter-spacing: -1.3px; line-height: 1.04; color: rgb(255, 255, 255); margin-top: 12px; }
.ow-sub{ max-width: 300px; font-size: 15px; line-height: 1.5; letter-spacing: -0.15px; color: rgba(255, 255, 255, 0.62); margin-top: 14px; }
.ow-l{ list-style: none; margin: 4px 24px 0px; padding: 0px; }
.ow-l li{ display: flex; gap: 16px; align-items: baseline; padding: 13px 0px; border-top: 1px solid rgba(12, 14, 18, 0.08); }
.ow-l li:first-child{ border-top: 0px; }
.ow-l li:last-child{ border-bottom: 1px solid rgba(12, 14, 18, 0.08); }
.ow-n{ flex: 0 0 26px; font-size: 12.5px; font-weight: 500; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; color: rgba(12, 14, 18, 0.36); }
.ow-l li.is-res .ow-n{ color: rgb(12, 14, 18); }
.ow-l li > div{ flex: 1 1 0px; min-width: 0px; }
.ow-l b{ display: block; font-size: 16px; font-weight: 500; letter-spacing: -0.25px; line-height: 1.3; color: rgb(12, 14, 18); }
.ow-l small{ display: block; font-size: 13.5px; line-height: 1.4; color: rgba(12, 14, 18, 0.5); margin-top: 3px; }
.ow-bar{ display: block; height: 2px; border-radius: 2px; background: rgba(12, 14, 18, 0.08); margin-top: 11px; overflow: hidden; }
.ow-bar u{ display: block; height: 100%; background: rgb(12, 14, 18); border-radius: 2px; }
.ow-note{ margin: 12px 24px 0px; color: rgba(12, 14, 18, 0.44); font-size: 13px; }
.ow-note svg{ color: rgba(12, 14, 18, 0.44); }
.ob2--wel .ow-foot{ margin-top: auto; padding: 16px 24px 34px; background: none; position: static; }
.ob2--wel .ow-foot .btn{ height: 56px; border-radius: 9999px; background: rgb(29, 2, 12); color: rgb(255, 255, 255); font-size: 16px; font-weight: 600; letter-spacing: -0.2px; box-shadow: none; }
.ob2-opt.sel{ background: rgb(246, 238, 243); box-shadow: rgba(160, 80, 120, 0.14) 0px 0px 0px 1px inset; }
.ob2-opt.sel .ob2-opt__ic{ background: rgb(255, 255, 255); color: rgb(77, 71, 63); }
.ob2-opt.sel .ob2-opt__ck{ background: rgb(29, 2, 12); }
.im-d-sq-dip{ background-image: url("/static/miniapp-v3/assets/x-57fefad0.57fefad0.webp"); }
.im-d-sq-rolls{ background-image: url("/static/miniapp-v3/assets/x-4e3df547.4e3df547.webp"); }
.im-d-sq-ice{ background-image: url("/static/miniapp-v3/assets/x-a0ec3fb3.a0ec3fb3.webp"); }
.im-d-sq-blin{ background-image: url("/static/miniapp-v3/assets/x-e2e2eb57.e2e2eb57.webp"); }
.im-d-sq-shak{ background-image: url("/static/miniapp-v3/assets/x-18055511.18055511.webp"); }
.im-d-sq-shaw{ background-image: url("/static/miniapp-v3/assets/x-b2ddc684.b2ddc684.webp"); }
.im-d-sq-losos{ background-image: url("/static/miniapp-v3/assets/x-a7d46357.a7d46357.webp"); }
.im-d-sq-pan{ background-image: url("/static/miniapp-v3/assets/x-2b0e0d59.2b0e0d59.webp"); }
.im-d-sq-oats{ background-image: url("/static/miniapp-v3/assets/x-a1996841.a1996841.webp"); }
.im-d-hero-rolls{ background-image: url("/static/miniapp-v3/assets/x-23c45a86.23c45a86.webp"); }
.im-d-hero-losos{ background-image: url("/static/miniapp-v3/assets/x-8e5f312b.8e5f312b.webp"); }
.im-d-hero-pan{ background-image: url("/static/miniapp-v3/assets/x-e7a8569d.e7a8569d.webp"); }
.im-d-hero-burrito{ background-image: url("/static/miniapp-v3/assets/x-f8b839c9.f8b839c9.webp"); }
.im-d-hero-marry{ background-image: url("/static/miniapp-v3/assets/x-9141269f.9141269f.webp"); }
.im-d-hero-pizza{ background-image: url("/static/miniapp-v3/assets/x-ce1ec40f.ce1ec40f.webp"); }
.im-d-hero-smoothie{ background-image: url("/static/miniapp-v3/assets/x-fd589499.fd589499.webp"); }
.rf-logo--light{ color: rgb(255, 255, 255); }
.ln-team__lg svg{ height: 9.5px; }
.gpa-busy .ob2-opts{ pointer-events: none; }
.gpa-busy .ob2-opt:not(.sel){ opacity: 0.45; }
.gpa-st{ display: inline-flex; align-items: center; gap: 5px; letter-spacing: 0px; text-transform: none; font-weight: 600; color: rgb(142, 142, 147); }
.gpa-st--err{ color: rgb(212, 72, 63); }
.gpa-st svg{ width: 12px; height: 12px; }
.gpa-spin{ display: inline-block; width: 12px; height: 12px; border-radius: 50%; border-width: 1.8px; border-style: solid; border-color: currentcolor transparent currentcolor currentcolor; border-image: initial; animation: 0.8s linear 0s infinite normal none running gpaSp; vertical-align: -1px; }
.gpa-spin--btn{ width: 16px; height: 16px; border-width: 2px; margin-right: 10px; vertical-align: -3px; }
@keyframes gpaSp { 
  100% { transform: rotate(360deg); }
}
.pre-bar .btn.gpa-btnbusy,.pre-bar .btn.gpa-btnbusy[disabled]{ background: rgb(44, 44, 46); color: rgb(255, 255, 255); opacity: 1; }
.ob2--wz .ob2-input{ box-shadow: rgba(12, 14, 18, 0.06) 0px 0px 0px 1px inset; }
.ob2--wz .ob2-input:focus{ box-shadow: rgb(255, 197, 220) 0px 0px 0px 1.5px inset; }
.ob2--wz .ob2-input::placeholder{ color: rgba(12, 14, 18, 0.32); }
.ob2--wz .ob2-seg i{ background: rgba(12, 14, 18, 0.1); }
.ob2--wz .ob2-seg u{ background: rgb(29, 2, 12); }
.ob2--wz .ob2-qidx{ color: rgb(142, 142, 147); }
.ob2--wz .ob2-saved{ color: rgb(142, 142, 147); }
.pre-bar.gpa-ob .btn:not([disabled]),.pre-bar.gpa-ob .btn.gpa-btnbusy{ background: rgb(29, 2, 12); color: rgb(255, 255, 255); }
.pre-bar.gpa-ob .btn.gpa-btnbusy{ opacity: 0.88; }
.rf-scr.xs-scr--pre .ob2--wz{ padding-bottom: 132px; }
.rf-app.gpa-hinton .rf-scr.xs-scr--pre .ob2--wz{ padding-bottom: 168px; }
.rf-app.gpa-bnon .rf-scr.xs-scr--pre .ob2--wz{ padding-bottom: 236px; }
.pre-bar.gpa-solid{ background: linear-gradient(rgba(243, 243, 245, 0) 0px, rgb(243, 243, 245) 14px); }
.gpa-hint.on{ display: flex; }
.gpa-bn--tz .gpa-bn__ic{ background: rgb(241, 241, 243); color: rgb(58, 58, 60); }
.gpa-bn.on{ display: flex; }
.gpa-bn__ic{ width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%; background: rgb(243, 243, 245); color: rgb(17, 17, 17); display: grid; place-items: center; }
.gpa-bn__ic svg{ width: 18px; height: 18px; }
.gpa-bn__b{ flex: 1 1 auto; min-width: 0px; }
.gpa-bn b{ display: block; font-size: 15px; font-weight: 600; color: rgb(17, 17, 17); }
.gpa-bn small{ display: block; font-size: 13px; line-height: 1.4; color: rgb(110, 110, 115); margin-top: 2px; }
.gpa-bn__a{ display: inline-block; margin-top: 8px; padding: 0px; border: 0px; background: none; font-family: inherit; font-size: 13.5px; font-weight: 600; color: rgb(17, 17, 17); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.gpa-tag{ display: flex; align-items: center; gap: 8px; margin: -10px 0px 18px; padding: 10px 14px; border-radius: 16px; background: rgb(255, 255, 255); font-size: 13px; line-height: 1.35; color: rgb(58, 58, 60); }
.gpa-tag svg{ width: 16px; height: 16px; flex: 0 0 auto; }
.gpa-err{ text-align: center; padding: 96px 4px 150px; }
.gpa-err__ic{ width: 78px; height: 78px; border-radius: 50%; background: rgb(255, 255, 255); color: rgb(17, 17, 17); display: grid; place-items: center; margin: 0px auto 18px; }
.gpa-err__ic svg{ width: 32px; height: 32px; }
.gpa-err .ob2-note{ justify-content: center; margin-top: 18px; }
.gpa-done__ic{ background: rgb(255, 255, 255); color: rgb(17, 17, 17); }
.gpa-blocks .ob2-step{ cursor: default; padding: 12px 0px; }
.gpa-topup{ padding-bottom: 150px; }
.gpa-topup .ob2-done{ padding-top: 8px; }
.gpa-topup .ob2-done__ic{ width: 64px; height: 64px; margin-bottom: 14px; }
.gpa-topup .ob2-done__ic svg{ width: 28px; height: 28px; }
.gpa-blocks .ob2-step__st.is-miss{ color: rgb(17, 17, 17); }
.gp-hero{ padding: 18px; }
.gp-hero .pre-bs{ margin-top: 12px; }
.gp-hero > p{ margin: 6px 0px 0px; font-size: 14.5px; line-height: 1.45; color: rgb(58, 58, 60); }
.gp-hero--dark > p{ color: rgba(255, 255, 255, 0.72); }
.gp-hero .pre-hero__k span{ min-width: 0px; }
.gp-kpi{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.gp-kpi > div{ border-radius: 18px; background: rgba(255, 255, 255, 0.08); padding: 12px 14px; }
.gp-kpi b{ display: block; font-size: 22px; font-weight: 700; letter-spacing: -0.4px; color: rgb(255, 255, 255); line-height: 1.1; }
.gp-kpi small{ display: block; font-size: 12.5px; line-height: 1.3; color: rgba(255, 255, 255, 0.6); margin-top: 3px; }
.gp-hero .gp-btn{ display: block; width: 100%; height: 48px; margin-top: 14px; border: 0px; border-radius: 100px; background: rgb(255, 255, 255); color: rgb(17, 17, 17); font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.gp-agr .xs-row .xs-v{ font-weight: 600; color: rgb(17, 17, 17); }
.gp-empty{ display: flex; flex-direction: column; align-items: center; text-align: center; padding: 26px 22px 22px; }
.gp-empty__ic{ width: 64px; height: 64px; border-radius: 50%; background: rgb(243, 243, 245); display: grid; place-items: center; color: rgb(17, 17, 17); }
.gp-empty__ic svg{ width: 28px; height: 28px; }
.gp-empty b{ display: block; font-size: 19px; font-weight: 700; letter-spacing: -0.3px; color: rgb(17, 17, 17); margin-top: 14px; }
.gp-empty small{ display: block; font-size: 14px; line-height: 1.45; color: rgb(110, 110, 115); margin-top: 6px; max-width: 290px; }
.gp-empty .gp-mini{ margin-top: 16px; }
.gp-mini{ height: 40px; padding: 0px 18px; border: 0px; border-radius: 100px; background: rgb(17, 17, 17); color: rgb(255, 255, 255); font-family: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; }
.gp-warn{ display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; }
.gp-warn > span{ flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; background: rgb(243, 243, 245); display: grid; place-items: center; color: rgb(17, 17, 17); }
.gp-warn > span svg{ width: 18px; height: 18px; }
.gp-warn .xs-b b{ display: block; font-size: 15px; font-weight: 600; color: rgb(17, 17, 17); }
.gp-warn .xs-b small{ display: block; font-size: 13px; line-height: 1.4; color: rgb(110, 110, 115); margin-top: 2px; white-space: normal; }
.gp-warn .gp-mini{ margin-top: 10px; }
.gp-link{ display: block; width: 100%; margin: 4px 0px 0px; padding: 12px 0px; border: 0px; background: none; font-family: inherit; font-size: 15px; font-weight: 600; color: rgb(212, 72, 63); cursor: pointer; text-align: center; }
.gp-meet{ display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: rgb(246, 246, 248); margin-bottom: 10px; }
.gp-meet img{ width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.gp-meet b{ display: block; font-size: 15px; font-weight: 600; color: rgb(17, 17, 17); }
.gp-meet small{ display: block; font-size: 13px; color: rgb(142, 142, 147); margin-top: 1px; }
.gp-sheet .xs-row{ padding-left: 14px; padding-right: 14px; }
.gp-dsk{ padding: 16px 18px; }
.gp-dsk i{ display: block; height: 12px; border-radius: 8px; background: linear-gradient(90deg, rgb(238, 238, 241) 0%, rgb(247, 247, 249) 50%, rgb(238, 238, 241) 100%) 0% 0% / 200% 100%; animation: 1.3s linear 0s infinite normal none running gpSh; }
.gp-dsk i + i{ margin-top: 10px; }
.gp-dsk .w1{ width: 38%; height: 26px; }
.gp-dsk .w2{ width: 62%; }
.gp-dsk .w3{ width: 100%; height: 10px; }
.gp-dsk .w4{ width: 80%; }
.gp-skr{ display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.gp-skr > i{ flex: 0 0 auto; width: 48px; height: 48px; border-radius: 14px; }
.gp-skr > div{ flex: 1 1 0%; }
.gp-skr > div i{ height: 11px; }
.gp-skr > div i:first-child{ width: 40%; }
.gp-skr > div i + i{ width: 66%; margin-top: 8px; }
.gp-skr > i,.gp-skr > div i{ display: block; border-radius: 8px; background: linear-gradient(90deg, rgb(238, 238, 241) 0%, rgb(247, 247, 249) 50%, rgb(238, 238, 241) 100%) 0% 0% / 200% 100%; animation: 1.3s linear 0s infinite normal none running gpSh; }
.gp-skr + .gp-skr{ border-top: 1px solid rgb(241, 241, 243); }
.gp-load{ font-size: 13px; color: rgb(142, 142, 147); text-align: center; padding: 4px 0px 2px; }
@keyframes gpSh { 
  0% { background-position: 100% 0px; }
  100% { background-position: -100% 0px; }
}
.gp-sv{ display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 70px; }
.gp-sv__ic{ width: 84px; height: 84px; border-radius: 50%; background: rgb(255, 255, 255); display: grid; place-items: center; color: rgb(17, 17, 17); }
.gp-sv__ic svg{ width: 36px; height: 36px; }
.gp-sv .ob2-h{ margin-top: 22px; }
.gp-sv .ob2-sub{ max-width: 300px; }
.gp-ans{ margin-top: 18px; }
.gp-ans .xs-row .xs-v{ color: rgb(17, 17, 17); font-weight: 600; }
.gp-bspin{ display: inline-block; width: 16px; height: 16px; margin-right: 8px; vertical-align: -3px; border-radius: 50%; border-width: 2px; border-style: solid; border-color: rgb(255, 255, 255) rgba(255, 255, 255, 0.35) rgba(255, 255, 255, 0.35); border-image: initial; animation: 0.8s linear 0s infinite normal none running gpRot; }
@keyframes gpRot { 
  100% { transform: rotate(360deg); }
}
.pre-bar .btn.gp-busy{ opacity: 1; background: rgb(58, 58, 60); color: rgb(255, 255, 255); }
.gp-ro textarea{ opacity: 0.55; pointer-events: none; }
.gp-err{ display: flex; gap: 10px; align-items: center; margin-top: 10px; padding: 12px 14px; border-radius: 18px; background: rgb(255, 255, 255); }
.gp-err > span{ flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; background: rgb(253, 238, 237); color: rgb(212, 72, 63); display: grid; place-items: center; }
.gp-err > span svg{ width: 14px; height: 14px; }
.gp-err b{ display: block; font-size: 14.5px; font-weight: 600; color: rgb(17, 17, 17); }
.gp-err small{ display: block; font-size: 13px; color: rgb(110, 110, 115); margin-top: 1px; }
.pre-hero__btns.gp-one{ grid-template-columns: 1fr; }
.pfx--np .pfx__head{ top: 428px; }
.pre-days button.is-cur{ position: relative; }
.pre-days button.is-cur::after{ content: ""; position: absolute; left: 50%; bottom: 6px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: rgb(29, 2, 12); }
.pre-days button.is-cur.on::after{ background: rgb(29, 2, 12); }
.pre-off{ display: flex; align-items: center; gap: 8px; margin: 0px 0px 12px; padding: 10px 14px; border-radius: 16px; background: rgb(255, 255, 255); box-shadow: rgba(12, 14, 18, 0.06) 0px 0px 0px 1px inset; font-size: 13px; line-height: 1.35; color: rgb(58, 58, 60); }
.pre-off svg{ flex: 0 0 16px; width: 16px; height: 16px; color: rgb(142, 142, 147); }
.sv-cnt{ margin-top: 6px; padding: 0px 4px; text-align: right; font-size: 12.5px; color: rgb(142, 142, 147); font-variant-numeric: tabular-nums; }
.li-rsvp button.on{ background: rgb(29, 2, 12); color: rgb(255, 255, 255); }
.li2__b .li2__tz{ margin-top: 2px; }
.pfx__warn{ color: rgb(255, 255, 255); }
.gp-zoomtop{ margin-top: 10px; }
.pf-acf input{ background: rgb(255, 255, 255); box-shadow: rgba(12, 14, 18, 0.06) 0px 0px 0px 1px inset; }
.pf-acf input:focus{ background: rgb(255, 255, 255); box-shadow: rgb(255, 197, 220) 0px 0px 0px 1.5px inset; }
.pf-card.on::before{ background-color: rgb(29, 2, 12); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E"); }
.gss-alert{ display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; padding: 14px 16px; border-radius: 22px; background: rgb(255, 255, 255); }
.gss-alert__ic{ width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%; background: rgb(17, 17, 17); color: rgb(255, 255, 255); display: grid; place-items: center; }
.gss-alert__ic svg{ width: 17px; height: 17px; }
.gss-alert .xs-b{ flex: 1 1 auto; min-width: 0px; }
.gss-alert b{ display: block; font-size: 15px; font-weight: 600; color: rgb(17, 17, 17); letter-spacing: -0.1px; }
.gss-alert small{ display: block; font-size: 13px; line-height: 1.4; color: rgb(110, 110, 115); margin-top: 2px; }
.gss-alert button{ margin-top: 10px; height: 34px; padding: 0px 16px; border: 0px; border-radius: 100px; background: rgb(17, 17, 17); color: rgb(255, 255, 255); font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.gss-alert--soft .gss-alert__ic{ background: rgb(243, 243, 245); color: rgb(17, 17, 17); }
.gss-alert .xs-b small,.gss-alert .xs-b b{ white-space: normal; overflow: visible; text-overflow: clip; }
.ob2-step .xs-b small{ white-space: normal; }
.xs-grp .gss-alert{ margin-top: 0px; margin-bottom: 10px; }
.gss-spin{ width: 16px; height: 16px; flex: 0 0 auto; border-radius: 50%; border-width: 2px; border-style: solid; border-color: rgb(17, 17, 17) rgb(209, 209, 214) rgb(209, 209, 214); border-image: initial; animation: 0.8s linear 0s infinite normal none running gssSpin; display: inline-block; vertical-align: -3px; }
.gss-spin--w{ border-color: rgb(255, 255, 255) rgba(255, 255, 255, 0.35) rgba(255, 255, 255, 0.35); width: 26px; height: 26px; border-width: 2.5px; }
@keyframes gssSpin { 
  100% { transform: rotate(360deg); }
}
.ob2-photo.gss-up::after{ content: ""; position: absolute; inset: 0px; background: rgba(17, 17, 17, 0.34); }
.gss-up__c{ position: absolute; inset: 0px; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: rgb(255, 255, 255); }
.gss-up__c small{ font-size: 12px; font-weight: 600; color: rgb(255, 255, 255); }
.gss-up__bar{ position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 2; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.35); overflow: hidden; }
.gss-up__bar i{ display: block; height: 100%; width: 58%; background: rgb(255, 255, 255); border-radius: 3px; }
.gss-gr{ display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 14px 16px; border-radius: 22px; background: rgb(255, 255, 255); cursor: pointer; }
.gss-gr .xs-b{ flex: 1 1 auto; min-width: 0px; }
.gss-gr b{ display: block; font-size: 15px; font-weight: 600; color: rgb(17, 17, 17); }
.gss-gr small{ display: block; font-size: 13px; color: rgb(142, 142, 147); margin-top: 2px; }
.gss-gr .xs-b small{ white-space: normal; }
.gss-gr__v{ font-size: 14px; font-weight: 600; color: rgb(17, 17, 17); white-space: nowrap; }
.gss-gr .chev{ color: rgb(199, 199, 204); }
.gss-gi{ background: rgb(255, 255, 255); border-radius: 22px; padding: 2px 16px; }
.gss-gi__r{ display: flex; align-items: center; gap: 12px; padding: 10px 0px; }
.gss-gi__r + .gss-gi__r{ border-top: 1px solid rgb(241, 241, 243); }
.gss-gi__r span{ flex: 1 1 auto; font-size: 16px; color: rgb(17, 17, 17); }
.gss-gi__r label{ display: flex; align-items: center; gap: 6px; height: 44px; padding: 0px 14px; border-radius: 14px; background: rgb(243, 243, 245); }
.gss-gi__r input{ width: 56px; border: 0px; background: none; outline: none; font-family: inherit; font-size: 17px; font-weight: 600; color: rgb(17, 17, 17); text-align: right; }
.gss-gi__r em{ font-style: normal; font-size: 14px; color: rgb(142, 142, 147); }
.gss-sherr{ display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 12px 14px; border-radius: 16px; background: rgb(243, 243, 245); font-size: 13.5px; line-height: 1.4; color: rgb(17, 17, 17); }
.gss-sherr svg{ width: 16px; height: 16px; flex: 0 0 auto; margin-top: 1px; }
.gss-tzcur{ display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: rgb(17, 17, 17); color: rgb(255, 255, 255); }
.gss-tzcur .xs-b{ flex: 1 1 auto; }
.gss-tzcur small{ display: block; font-size: 12px; color: rgba(255, 255, 255, 0.6); }
.gss-tzcur b{ display: block; font-size: 16px; font-weight: 600; color: rgb(255, 255, 255); margin-top: 1px; }
.gss-tzcur__ic{ width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); display: grid; place-items: center; }
.gss-tzcur__ic svg{ width: 16px; height: 16px; }
.gss-tzcur em{ font-style: normal; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.8); }
.gss-tzs{ display: flex; align-items: center; gap: 10px; height: 46px; margin-top: 12px; padding: 0px 14px; border-radius: 16px; background: rgb(243, 243, 245); }
.gss-tzs svg{ width: 17px; height: 17px; color: rgb(142, 142, 147); flex: 0 0 auto; }
.gss-tzs input{ flex: 1 1 auto; min-width: 0px; border: 0px; background: none; outline: none; font-family: inherit; font-size: 16px; color: rgb(17, 17, 17); }
.gss-tzs input::placeholder{ color: rgb(174, 174, 178); }
.gss-tzs button{ width: 22px; height: 22px; border: 0px; border-radius: 50%; background: rgb(199, 199, 204); color: rgb(255, 255, 255); display: grid; place-items: center; padding: 0px; cursor: pointer; }
.gss-tzs button svg{ width: 11px; height: 11px; color: rgb(255, 255, 255); }
.gss-tzl{ margin-top: 12px; }
.gss-tzl .xs-card{ max-height: none; }
.gss-tzempty{ padding: 28px 12px; text-align: center; font-size: 14px; line-height: 1.45; color: rgb(142, 142, 147); }
.gss-tzempty b{ display: block; font-size: 15px; color: rgb(17, 17, 17); font-weight: 600; margin-bottom: 2px; }
.mt-sl.gss-gone{ background: rgb(236, 236, 239); cursor: default; }
.mt-sl.gss-gone b{ color: rgb(174, 174, 178); text-decoration: line-through rgb(199, 199, 204); }
.mt-sl.gss-gone small{ color: rgb(142, 142, 147); }
.xs-nav .gss-menu svg{ width: 20px; height: 20px; }
.xc-ph .xc-top .xc-d{ white-space: nowrap; }
.rf-app:has(> .pre-bar.on > .xs-sec2.xs-sec2--on) > .rf-toast,.rf-app:has(> .pre-bar.on > .xs-sec2.xs-sec2--on) > .xs-undo{ bottom: 150px; }
.pre-layer .ob2-foot .btn,.rf-app:has(.rf-pane.rf-t-pre-meas.on) .pre-bar .btn,.rf-app:has(.rf-pane.rf-t-pre-labs.on) .pre-bar .btn,.rf-app:has(.rf-pane.rf-t-pre-pick.on) .pre-bar .btn,.rf-app:has(.rf-pane.rf-t-pre-book.on) .pre-bar .btn{ height: 56px; border-radius: 9999px; background: rgb(29, 2, 12); color: rgb(255, 255, 255); box-shadow: none; }
.rf-app:has(.rf-pane.rf-t-pre-meas.on) .pre-bar .btn[disabled],.rf-app:has(.rf-pane.rf-t-pre-book.on) .pre-bar .btn[disabled]{ background: rgb(29, 2, 12); color: rgb(255, 255, 255); opacity: 0.45; }
.ob2-row[data-xa]{ cursor: pointer; }
.ob2-row[data-xa] > div{ flex: 1 1 auto; min-width: 0px; }
.ob2-row[data-xa] .chev{ align-self: center; color: rgb(199, 199, 204); }
.xs-sheet .gss-me{ margin-bottom: 12px; }
.xs-sheet .gss-me .xs-me{ min-height: 72px; padding: 12px 16px; }
.xs-sheet .gss-me .xs-av{ width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; font-size: 19px; }
.xs-sheet .gss-me .xs-me__n{ font-size: 17px; }
.xs-sheet .gss-out{ margin-top: 12px; }
.gss-tzdev{ display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 10px; padding: 12px 14px; border: 0px; border-radius: 16px; background: rgb(251, 251, 252); box-shadow: rgba(12, 14, 18, 0.07) 0px 0px 0px 1px inset; font-family: inherit; font-size: 14px; line-height: 1.3; color: rgb(58, 58, 60); text-align: left; cursor: pointer; }
.gss-tzdev svg{ width: 18px; height: 18px; flex: 0 0 auto; color: rgb(142, 142, 147); }
.gss-tzdev span{ flex: 1 1 auto; min-width: 0px; }
.gss-tzdev small{ display: block; font-size: 12px; color: rgba(12, 14, 18, 0.5); font-weight: 600; }
.gss-tzdev b{ display: block; margin-top: 1px; font-size: 15.5px; font-weight: 600; color: rgb(17, 17, 17); }
.gss-tzdev em{ font-style: normal; font-size: 12.5px; font-weight: 600; color: rgb(142, 142, 147); white-space: nowrap; }
.gss-tzdev.on{ background: rgb(246, 238, 243); box-shadow: rgba(160, 80, 120, 0.14) 0px 0px 0px 1px inset; }
.ob2-opt.sel{ background: rgb(246, 238, 243); box-shadow: rgba(160, 80, 120, 0.14) 0px 0px 0px 1px inset; }
.ob2-opt.sel .ob2-opt__ic{ background: rgb(255, 255, 255); color: rgb(77, 71, 63); }
.ob2-opt.sel .ob2-opt__ck{ background: rgb(29, 2, 12); box-shadow: none; color: rgb(255, 255, 255); }
.rf-pane.rf-t-pre-prep .xs-row--radio.on{ background: none; }
.rf-pane.rf-t-pre-prep .xs-row--radio.on .xs-ck{ background: rgb(29, 2, 12); box-shadow: none; color: rgb(255, 255, 255); }
.pf-w__ch button.on,.li-rsvp button.on{ background: rgb(29, 2, 12); color: rgb(255, 255, 255); box-shadow: none; }
.xs-sheet .pf-w__ch button:not(.on),.xs-sheet .pf-tm button:not(.on){ background: rgb(243, 243, 245); }
.pf-tm button.on{ background: rgb(29, 2, 12); box-shadow: none; }
.pf-tm button.on b{ color: rgb(255, 255, 255); }
.pf-tm button.on small{ color: rgba(255, 255, 255, 0.6); }
.sv-stars svg{ fill: rgb(224, 81, 143); fill-opacity: 0; stroke: rgba(160, 80, 120, 0.3); stroke-width: 1.5; stroke-linejoin: round; transition: stroke 0.2s, fill-opacity 0.22s; }
.sv-stars button.on svg{ fill: rgb(224, 81, 143); fill-opacity: 1; stroke: rgb(224, 81, 143); }
.sv-lbl{ font-size: 13.5px; color: rgba(12, 14, 18, 0.42); }
.sv-lbl.on{ font-size: 17px; font-weight: 500; letter-spacing: -0.2px; color: rgb(12, 14, 18); }
.ob2-input{ box-shadow: rgba(12, 14, 18, 0.06) 0px 0px 0px 1px inset; }
.ob2-input:focus{ box-shadow: rgb(255, 197, 220) 0px 0px 0px 1.5px inset; }
.pf-acf input{ background: rgb(251, 251, 252); box-shadow: rgba(12, 14, 18, 0.07) 0px 0px 0px 1px inset; }
.pf-acf input:focus{ background: rgb(251, 251, 252); box-shadow: rgb(255, 197, 220) 0px 0px 0px 1.5px inset; }
.gss-gi__r label{ background: rgb(251, 251, 252); box-shadow: rgba(12, 14, 18, 0.07) 0px 0px 0px 1px inset; }
.gss-gi__r label:focus-within{ box-shadow: rgb(255, 197, 220) 0px 0px 0px 1.5px inset; }
.pfx__note:focus-within{ box-shadow: rgb(255, 197, 220) 0px 0px 0px 1.5px inset; }
.gss-tzcur{ background: rgb(251, 251, 252); color: rgb(12, 14, 18); box-shadow: rgba(12, 14, 18, 0.07) 0px 0px 0px 1px inset; }
.gss-tzcur small{ color: rgba(12, 14, 18, 0.5); font-weight: 600; }
.gss-tzcur b{ color: rgb(12, 14, 18); }
.gss-tzcur__ic{ background: rgb(29, 2, 12); color: rgb(255, 255, 255); }
.gss-tzcur em{ padding: 6px 9px; border-radius: 100px; background: rgb(241, 241, 243); color: rgb(58, 58, 60); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.gss-tzs{ background: rgb(255, 255, 255); box-shadow: rgba(12, 14, 18, 0.06) 0px 0px 0px 1px inset; }
.xs-sheet .gss-tzs{ background: rgb(251, 251, 252); box-shadow: rgba(12, 14, 18, 0.07) 0px 0px 0px 1px inset; }
.gss-tzs:focus-within{ box-shadow: rgb(255, 197, 220) 0px 0px 0px 1.5px inset; }
.rf-pane.rf-t-pre-survey .rf-scr{ background: rgb(255, 255, 255); }
.rf-pane.rf-t-pre-survey .ob2-seg{ gap: 5px; }
.rf-pane.rf-t-pre-survey .ob2-seg i{ height: 3px; background: rgba(12, 14, 18, 0.08); }
.rf-pane.rf-t-pre-survey .ob2-seg u{ background: rgb(29, 2, 12); }
.rf-pane.rf-t-pre-survey .ob2-opt{ min-height: 60px; border-radius: 16px; background: rgb(251, 251, 252); box-shadow: rgba(12, 14, 18, 0.07) 0px 0px 0px 1px inset; }
.rf-pane.rf-t-pre-survey .ob2-opt.sel{ background: rgb(246, 238, 243); box-shadow: rgba(160, 80, 120, 0.14) 0px 0px 0px 1px inset; }
.rf-pane.rf-t-pre-survey .ob2-input{ background: rgb(251, 251, 252); box-shadow: rgba(12, 14, 18, 0.07) 0px 0px 0px 1px inset; }
.rf-pane.rf-t-pre-survey .ob2-input:focus{ box-shadow: rgb(255, 197, 220) 0px 0px 0px 1.5px inset; }
.rf-pane.rf-t-pre-survey .sv-ctx{ box-shadow: rgba(20, 4, 12, 0.05) 0px 6px 18px, rgba(12, 14, 18, 0.03) 0px 0px 0px 1px inset; }
.rf-pane.rf-t-pre-survey .sv-ctx small{ color: rgb(142, 142, 147); }
.rf-pane.rf-t-pre-survey .ob2-note{ padding: 13px 14px; border-radius: 16px; background: rgb(255, 255, 255); box-shadow: rgba(12, 14, 18, 0.05) 0px 0px 0px 1px inset; color: rgba(12, 14, 18, 0.62); }
.rf-pane.rf-t-pre-survey .ob2-note svg{ color: rgb(142, 142, 147); }
.rf-pane.rf-t-pre-survey .ob2-note b{ color: rgb(12, 14, 18); }
.sv-cnt{ text-align: right; font-size: 11.5px; color: rgba(12, 14, 18, 0.32); margin-top: 8px; font-variant-numeric: tabular-nums; }
.rf-app:has(.rf-pane.rf-t-pre-survey.on) .pre-bar{ background: linear-gradient(rgba(255, 255, 255, 0), rgb(255, 255, 255) 30%); }
.rf-app:has(.rf-pane.rf-t-pre-survey.on) .pre-bar .btn{ height: 56px; background: rgb(29, 2, 12); color: rgb(255, 255, 255); }
.rf-app:has(.rf-pane.rf-t-pre-survey.on) .pre-bar .btn[disabled]{ background: rgb(29, 2, 12); color: rgb(255, 255, 255); opacity: 0.22; }
.pre-bar__h svg{ width: 12px; height: 12px; flex: 0 0 auto; }
.pre-hero.pre-hero--bs:not(.gp-hero),.pre-hero.gp-hero:not(.gp-hero--dark){ background: radial-gradient(90% 70% at 100% 0%, rgba(216, 198, 243, 0.5), rgba(216, 198, 243, 0) 64%), rgb(255, 255, 255); }
.pre-hero.gp-hero:not(.gp-hero--dark){ background: radial-gradient(90% 70% at 100% 0%, rgba(194, 219, 245, 0.6), rgba(194, 219, 245, 0) 64%), rgb(255, 255, 255); }
.pre-hero.pre-hero--bs:not(.gp-hero) > b,.gp-hero:not(.gp-hero--dark) > b{ display: flex; align-items: center; gap: 14px; }
.pre-hero.pre-hero--bs:not(.gp-hero) > b::before,.gp-hero:not(.gp-hero--dark) > b::before{ content: ""; flex: 0 0 auto; width: 52px; height: 52px; border-radius: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233a1d5a' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h10M7 21h10M8 3c0 4.5 8 5.5 8 9s-8 4.5-8 9M16 3c0 4.5-8 5.5-8 9'/%3E%3C/svg%3E") center center / 26px no-repeat, linear-gradient(160deg, rgb(239, 230, 251), rgb(216, 198, 243)); box-shadow: rgba(120, 77, 150, 0.22) 0px 10px 22px; }
.gp-hero:not(.gp-hero--dark) > b::before{ background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b3a6b' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='4.5' width='12' height='16.5' rx='2.5'/%3E%3Cpath d='M9 4.5A1 1 0 0 1 9 4a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2 1 1 0 0 1 0 .5'/%3E%3Cpath d='M9 11h6M9 15h4'/%3E%3C/svg%3E") center center / 26px no-repeat, linear-gradient(160deg, rgb(226, 238, 251), rgb(194, 219, 245)); box-shadow: rgba(27, 58, 107, 0.16) 0px 10px 22px; }
.pre-hero.pre-hero--bs:not(.gp-hero) .pre-hero__path--l,.gp-hero:not(.gp-hero--dark) .pre-hero__path--l{ background: rgb(241, 241, 243); color: rgb(58, 58, 60); }
.pre-hero.pre-hero--bs:not(.gp-hero) .pre-bs .is-done i,.gp-hero:not(.gp-hero--dark) .pre-bs .is-done i{ background: rgb(163, 213, 70); color: rgb(28, 42, 14); box-shadow: none; }
.pre-hero.pre-hero--bs:not(.gp-hero) .pre-bs .is-now i,.gp-hero:not(.gp-hero--dark) .pre-bs .is-now i{ background: rgb(29, 2, 12); box-shadow: none; }
.pre-hero.pre-hero--bs:not(.gp-hero) .pre-bs .is-now i::after,.gp-hero:not(.gp-hero--dark) .pre-bs .is-now i::after{ inset: 7px; background: rgb(255, 255, 255); }

/* ---- src/styles/40-progress.css ---- */
/* СГЕНЕРИРОВАНО design-preview/miniapp-v3-dev/tools/extract_css.js из прототипа nav-v2
   (состояния: progress.js). Правила взяты в порядке каскада прототипа; не правьте
   руками — поправка поверх живёт в файлах стилей с бОльшим номером. */
.xs-v em{ font-style: normal; font-size: 13px; margin-left: 8px; color: rgb(174, 174, 178); }
.xs-pill{ display: inline-block; font-size: 14px; font-weight: 600; color: rgb(17, 17, 17); background: rgb(241, 241, 243); border-radius: 100px; padding: 8px 14px; cursor: pointer; }
.tp-sheet{ background: rgb(255, 255, 255); border-radius: 28px 28px 0px 0px; padding: 12px 20px 20px; margin-top: 10px; box-shadow: rgba(20, 4, 12, 0.06) 0px -6px 30px; }
.tp-sheet .hm-grab{ margin-bottom: 16px; }
.tp-h{ display: block; }
.tp-h h2{ margin: 0px; font-size: 20px; font-weight: 600; letter-spacing: -0.5px; }
.tp-h span{ display: block; font-size: 13px; color: rgb(139, 138, 146); margin-top: 4px; }
.tp-tiles{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.tp-tile{ background: rgb(246, 246, 248); border-radius: 20px; padding: 14px 14px 13px; }
.tp-tile b{ font-size: 25px; font-weight: 700; letter-spacing: -0.8px; line-height: 1; font-variant-numeric: tabular-nums; }
.tp-tile b i{ font-style: normal; font-size: 14px; font-weight: 500; color: rgb(139, 138, 146); letter-spacing: 0px; }
.tp-tile span{ display: block; font-size: 13px; color: rgb(139, 138, 146); margin-top: 6px; }
.tp-card__h{ display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.tp-card__t{ font-size: 15px; font-weight: 600; letter-spacing: -0.2px; }
.tp-card__s{ font-size: 12px; color: rgb(139, 138, 146); margin-top: 3px; }
.tp-card__v{ font-size: 20px; font-weight: 700; letter-spacing: -0.5px; font-variant-numeric: tabular-nums; }
.tp-card__v i{ font-style: normal; font-size: 13px; font-weight: 500; color: rgb(139, 138, 146); }
.tp-chart{ height: 96px; margin-top: 12px; }
.tp-chart svg{ width: 100%; height: 100%; overflow: visible; }
.tp-axis{ display: flex; justify-content: space-between; font-size: 11px; color: rgb(163, 162, 170); margin-top: 8px; }
.tp-sub{ font-size: 16px; font-weight: 600; letter-spacing: -0.3px; margin-top: 18px; }
.tp-list{ background: rgb(246, 246, 248); border-radius: 20px; margin-top: 10px; overflow: hidden; }
.tp-row{ display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.tp-row + .tp-row,.tp-rev + .tp-rev{ border-top: 1px solid rgba(12, 14, 18, 0.06); }
.tp-row__b{ flex: 1 1 auto; min-width: 0px; }
.tp-row__b b{ display: block; font-size: 14.5px; font-weight: 600; letter-spacing: -0.2px; }
.tp-row__b small{ display: block; font-size: 12px; color: rgb(139, 138, 146); margin-top: 2px; }
.tp-spark{ width: 64px; height: 24px; flex: 0 0 auto; overflow: visible; }
.tp-rev{ padding: 12px 14px 14px; }
.tp-rev__n{ font-size: 13px; line-height: 1.45; color: rgb(63, 62, 70); margin-top: 8px; padding-left: 10px; border-left: 2px solid rgb(242, 185, 214); }
.xs-steps{ display: flex; gap: 6px; padding: 0px 18px 14px; }
.xs-steps i{ flex: 1 1 0px; height: 4px; border-radius: 100px; background: rgb(229, 229, 234); }
.xs-steps i.on{ background: rgb(17, 17, 17); }
.xs-shots{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.xs-shot{ position: relative; aspect-ratio: 3 / 4; border-radius: 16px; background: rgb(241, 241, 243); overflow: hidden; cursor: pointer; display: flex; align-items: flex-end; justify-content: center; }
.xs-shot::before{ content: ""; position: absolute; left: 50%; top: 18%; width: 30%; height: 58%; transform: translateX(-50%); border-radius: 40% 40% 30% 30%; background: rgb(227, 227, 231); }
.xs-shot span{ position: relative; font-size: 12px; color: rgb(142, 142, 147); padding-bottom: 9px; }
.xs-shot.done{ background: linear-gradient(160deg, rgb(233, 221, 212), rgb(217, 199, 188)); }
.xs-shot.done::before{ background: rgba(255, 255, 255, 0.45); }
.xs-shot.done::after{ content: ""; position: absolute; right: 8px; top: 8px; width: 20px; height: 20px; border-radius: 50%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center center / 12px no-repeat rgb(17, 17, 17); }
.xs-shot.done span{ color: rgb(107, 90, 82); }
.xs-cmp{ position: relative; aspect-ratio: 3 / 4; border-radius: 22px; overflow: hidden; background: rgb(233, 221, 212); user-select: none; }
.xs-cmp__a,.xs-cmp__b{ position: absolute; inset: 0px; }
.xs-cmp__a{ background: linear-gradient(160deg, rgb(234, 223, 214), rgb(220, 203, 192)); }
.xs-cmp__b{ background: linear-gradient(160deg, rgb(227, 214, 204), rgb(207, 188, 176)); clip-path: inset(0 0 0 var(--x,50%)); }
.xs-cmp__a::before,.xs-cmp__b::before{ content: ""; position: absolute; left: 50%; top: 14%; height: 66%; transform: translateX(-50%); border-radius: 44% 44% 30% 30%; background: rgba(255, 255, 255, 0.5); }
.xs-cmp__a::before{ width: 36%; }
.xs-cmp__b::before{ width: 31%; }
.xs-cmp__line{ position: absolute; top: 0px; bottom: 0px; left: var(--x,50%); width: 2px; background: rgb(255, 255, 255); transform: translateX(-1px); }
.xs-cmp__line::after{ content: "‹ ›"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 36px; height: 36px; border-radius: 50%; background: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.15) 0px 4px 14px; display: grid; place-items: center; font-size: 14px; font-weight: 700; color: rgb(17, 17, 17); letter-spacing: 2px; }
.xs-cmp__l{ position: absolute; top: 12px; font-size: 12px; font-weight: 600; color: rgb(255, 255, 255); background: rgba(0, 0, 0, 0.35); border-radius: 100px; padding: 4px 9px; }
.xs-cmp input{ position: absolute; inset: 0px; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0px; }
.xs-row--add .xs-b b{ color: rgb(17, 17, 17); font-weight: 500; }
.xs-row--add .xs-ic{ color: rgb(17, 17, 17); }
.xs-clr{ float: right; border: 0px; background: none; font-family: inherit; font-size: 13px; font-weight: 500; color: rgb(142, 142, 147); cursor: pointer; padding: 0px; }
.xs-reply{ display: flex; gap: 10px; align-items: flex-start; padding: 4px 18px 16px; }
.xs-reply img{ width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.xs-reply p{ margin: 0px; padding: 10px 13px; border-radius: 4px 18px 18px; background: rgb(243, 243, 245); font-size: 14.5px; line-height: 1.45; color: rgb(17, 17, 17); }
.xs-card .xs-reply:first-child{ padding-top: 16px; }
.xs-two{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.xs-two .xs-soft--w{ font-size: 14px; padding: 0px 10px; }
.xs-docv{ height: 230px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: rgb(255, 255, 255); }
.xs-docv__pg{ width: 120px; height: 160px; border-radius: 8px; background: rgb(250, 250, 250); box-shadow: rgba(0, 0, 0, 0.08) 0px 8px 24px, rgba(0, 0, 0, 0.04) 0px 0px 0px 1px; padding: 18px 14px; box-sizing: border-box; display: flex; flex-direction: column; gap: 9px; }
.xs-docv__pg i{ display: block; height: 5px; border-radius: 3px; background: rgb(229, 229, 234); }
.xs-docv__pg i.s{ width: 60%; }
.xs-docv > span{ font-size: 12.5px; color: rgb(142, 142, 147); }
.xs-p{ margin: 0px; font-size: 15.5px; line-height: 1.5; color: rgb(58, 58, 60); }
.xs-chips--row{ flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0px -22px; padding: 0px 22px; }
.xs-chips--row::-webkit-scrollbar{ display: none; }
.xs-chips--row .xs-chip{ flex: 0 0 auto; }
.xs-sr{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); }
.xs-seg3{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 3px; border-radius: 100px; background: rgb(239, 239, 242); }
.xs-seg3 button{ height: 34px; border: 0px; border-radius: 100px; background: none; font-family: inherit; font-size: 14.5px; font-weight: 500; color: rgb(58, 58, 60); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; }
.xs-seg3 button.on{ background: rgb(255, 255, 255); color: rgb(17, 17, 17); font-weight: 600; box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 8px; }
.xs-hero{ margin-top: 18px; }
.xs-hero b{ display: block; font-size: 52px; font-weight: 600; letter-spacing: -2px; line-height: 1; color: rgb(17, 17, 17); }
.xs-hero b small{ font-size: 22px; letter-spacing: -0.4px; color: rgb(142, 142, 147); font-weight: 500; }
.xs-hero span{ display: block; font-size: 14px; color: rgb(58, 58, 60); margin-top: 8px; }
.xs-hero em{ display: block; font-style: normal; font-size: 13px; color: rgb(142, 142, 147); margin-top: 3px; }
.xs-ch{ position: relative; margin: 14px -4px 0px; }
.xs-ch svg{ display: block; width: 100%; height: auto; overflow: visible; }
.xs-ch__g{ stroke: rgb(236, 236, 239); stroke-width: 1; }
.xs-ch__t{ font-size: 10.5px; fill: rgb(142, 142, 147); font-variant-numeric: tabular-nums; }
.xs-ch__l{ fill: none; stroke: rgb(28, 28, 30); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.xs-ch__a{ fill: rgb(28, 28, 30); opacity: 0.06; }
.xs-ch__dot{ fill: rgb(28, 28, 30); stroke: rgb(255, 255, 255); stroke-width: 2; }
.xs-ch__hit{ fill: transparent; cursor: pointer; }
.xs-ch__pt.on .xs-ch__dot{ r: 6; }
.xs-ch__end{ font-size: 13px; font-weight: 600; fill: rgb(17, 17, 17); }
.xs-ch__tip{ position: absolute; transform: translate(-50%, calc(-100% - 12px)); background: rgb(28, 28, 30); color: rgb(255, 255, 255); border-radius: 10px; padding: 6px 9px; font-size: 12px; line-height: 1.25; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.15s; }
.xs-ch__tip.on{ opacity: 1; }
.xs-ch__tip b{ display: block; font-weight: 600; }
.xs-ch__tip span{ color: rgba(255, 255, 255, 0.7); }
.xs-next{ display: flex; align-items: center; gap: 14px; padding: 16px 18px; }
.xs-next__ring{ --p: 50; width: 56px; height: 56px; border-radius: 50%; flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(closest-side,#fff 80%,transparent 81% 100%),conic-gradient(#1c1c1e calc(var(--p)*1%),#ececef 0); }
.xs-next__ring b{ font-size: 18px; font-weight: 600; line-height: 1; color: rgb(17, 17, 17); }
.xs-next__ring span{ font-size: 10px; color: rgb(142, 142, 147); margin-top: 1px; }
.xs-next .xs-b b{ font-weight: 600; }
.xs-film{ display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; margin: 0px -16px; padding: 0px 16px 2px; }
.xs-film::-webkit-scrollbar{ display: none; }
.xs-film__c{ flex: 0 0 116px; cursor: pointer; }
.xs-film__c b{ display: block; font-size: 14px; font-weight: 600; color: rgb(17, 17, 17); margin-top: 8px; }
.xs-film__c small{ display: block; font-size: 12px; color: rgb(142, 142, 147); margin-top: 1px; }
.xs-film__ph{ position: relative; aspect-ratio: 3 / 4; border-radius: 18px; overflow: hidden; background: linear-gradient(165deg, rgb(235, 224, 216), rgb(214, 195, 183)); display: flex; align-items: flex-end; justify-content: center; }
.xs-film__ph i{ position: absolute; right: 8px; top: 8px; font-style: normal; font-size: 11px; font-weight: 600; color: rgb(255, 255, 255); background: rgba(0, 0, 0, 0.28); border-radius: 100px; padding: 2px 7px; }
.xs-film__ph.is-none{ background: rgb(233, 233, 237); align-items: center; }
.xs-film__ph.is-none span{ font-size: 12px; color: rgb(142, 142, 147); }
.xs-fig{ display: block; }
.xs-fig circle,.xs-fig path{ fill: none; stroke: rgb(199, 199, 204); stroke-width: 1.4; }
.xs-fig__m{ stroke: rgb(28, 28, 30); stroke-width: 2.2; stroke-linecap: round; }
.xs-cam__sh{ width: 68px; height: 68px; border-radius: 50%; border: 4px solid rgba(255, 255, 255, 0.9); background: rgb(255, 255, 255); box-shadow: rgb(28, 28, 30) 0px 0px 0px 3px inset; cursor: pointer; }
.xs-cam__g{ width: 44px; height: 44px; border-radius: 50%; border: 0px; background: rgba(255, 255, 255, 0.18); color: rgb(255, 255, 255); font-family: inherit; font-size: 18px; font-weight: 600; display: grid; place-items: center; cursor: pointer; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.xs-cam__g svg{ width: 20px; height: 20px; }
.xs-gi{ padding: 16px 0px 12px; }
.xs-gi__top{ display: flex; align-items: center; gap: 12px; padding: 0px 18px; }
.xs-gi__top .xs-fig{ width: 30px; height: 70px; flex: 0 0 auto; }
.xs-gi__top .xs-b b{ font-weight: 600; }
.xs-gi__top .xs-clr{ float: none; display: block; margin-top: 4px; color: rgb(17, 17, 17); font-weight: 600; }
.xs-gi__v{ text-align: right; flex: 0 0 auto; }
.xs-gi__v b{ font-size: 34px; font-weight: 600; letter-spacing: -1px; color: rgb(17, 17, 17); }
.xs-gi__v span{ font-size: 15px; color: rgb(142, 142, 147); margin-left: 3px; }
.xs-gi__v em{ display: block; font-style: normal; font-size: 13px; color: rgb(142, 142, 147); }
.xs-rul{ position: relative; margin-top: 10px; height: 62px; }
.xs-rul__sc{ height: 62px; overflow-x: scroll; scrollbar-width: none; cursor: grab; mask-image: linear-gradient(90deg, transparent, rgb(0, 0, 0) 22%, rgb(0, 0, 0) 78%, transparent); }
.xs-rul__sc::-webkit-scrollbar{ display: none; }
.xs-rul__tr{ display: flex; align-items: flex-start; height: 62px; width: max-content; }
.xs-rul__tr i{ position: relative; flex: 0 0 10px; height: 14px; box-shadow: rgb(209, 209, 214) 1px 0px 0px inset; }
.xs-rul__tr i.m{ height: 20px; }
.xs-rul__tr i.M{ height: 28px; box-shadow: rgb(142, 142, 147) 1.5px 0px 0px inset; }
.xs-rul__tr i span{ position: absolute; top: 34px; left: 0px; transform: translateX(-45%); font-size: 11px; color: rgb(142, 142, 147); font-style: normal; font-variant-numeric: tabular-nums; }
.xs-rul__mk{ position: absolute; left: 50%; top: -4px; width: 2px; height: 40px; margin-left: -0.5px; background: rgb(28, 28, 30); border-radius: 2px; pointer-events: none; }
.xs-rul__pv{ position: absolute; top: -6px; width: 8px; height: 8px; margin-left: -3.5px; border-radius: 50%; background: rgb(174, 174, 178); pointer-events: none; }
.xs-cmpt{ display: grid; grid-template-columns: 1.1fr 1fr 1fr 1fr; gap: 6px; padding: 12px 18px; align-items: baseline; font-variant-numeric: tabular-nums; }
.xs-cmpt + .xs-cmpt{ box-shadow: rgb(236, 236, 239) 0px 1px 0px inset; }
.xs-cmpt span{ font-size: 14.5px; color: rgb(142, 142, 147); text-align: right; }
.xs-cmpt span.is-dark{ color: rgb(17, 17, 17); font-weight: 600; }
.xs-cmpt b{ font-size: 15.5px; font-weight: 500; color: rgb(17, 17, 17); }
.xs-cmpt:first-child span{ font-size: 12px; }
.xs-howfig{ display: flex; gap: 16px; align-items: center; }
.xs-howfig .xs-fig{ width: 52px; height: 120px; flex: 0 0 auto; }
.xs-cmp__a,.xs-cmp__b{ display: flex; align-items: flex-end; justify-content: center; }
.xs-cmp__a::before,.xs-cmp__b::before{ display: none; }
.xs-drop{ display: flex; flex-direction: column; align-items: center; text-align: center; padding: 24px 18px 18px; }
.xs-drop b{ font-size: 18px; font-weight: 600; letter-spacing: -0.4px; color: rgb(17, 17, 17); }
.xs-drop small{ font-size: 14px; line-height: 1.45; color: rgb(142, 142, 147); margin: 6px 0px 16px; max-width: 290px; }
.xs-drop .xs-two{ width: 100%; }
.xs-drop .xs-two .xs-soft--w{ white-space: nowrap; padding: 0px 8px; gap: 7px; }
.xs-opt{ color: rgb(174, 174, 178); font-size: 12.5px; margin-left: 6px; }
.xs-shot--add{ background: rgb(255, 255, 255); box-shadow: rgb(209, 209, 214) 0px 0px 0px 1.5px inset; align-items: center; }
.xs-shot--add::before{ display: none; }
.xs-shot--add span{ padding: 0px; color: rgb(17, 17, 17); font-weight: 600; font-size: 13px; }
.xs-shot--empty{ background: rgb(246, 246, 248); }
.xs-shot--empty::before{ display: none; }
.xs-x{ position: absolute; right: 6px; top: 6px; width: 24px; height: 24px; border-radius: 50%; border: 0px; background: rgba(0, 0, 0, 0.45); color: rgb(255, 255, 255); font-size: 16px; line-height: 1; cursor: pointer; z-index: 2; }
.xs-shot--del::after{ display: none; }
.xs-shot__img{ position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; }
.xs-shot--ph::before{ display: none; }
.xs-shot--ph.xs-shot--del .xs-shot__img{ object-position: 50% 30%; }
.xs-shot--ph span{ position: absolute; left: 0px; right: 0px; bottom: 0px; padding: 22px 0px 8px; text-align: center; font-weight: 500; background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.42)); color: rgb(255, 255, 255) !important; }
.xs-shot--add span{ display: flex; flex-direction: column; align-items: center; gap: 2px; }
.xs-shot--add span small{ font-size: 12px; font-weight: 400; color: rgb(142, 142, 147); }
.xs-shot__plus{ width: 32px; height: 32px; border-radius: 50%; background: rgb(242, 240, 242); color: rgb(61, 58, 64); font-style: normal; font-size: 20px; font-weight: 400; line-height: 31px; text-align: center; margin-bottom: 6px; }
.xs .xs-chips--row{ margin: 0px -16px; padding: 0px 16px; }
.ot-bar{ position: absolute; left: 0px; right: 0px; bottom: 0px; z-index: 23; padding: 14px 16px 26px; background: linear-gradient(rgba(247, 242, 245, 0), rgb(247, 242, 245) 26%); transform: translateY(110%); transition: transform .45s var(--spring,ease); }
.ot-bar__s{ display: flex; flex-direction: column; padding: 0px 4px 10px; }
.ot-bar__s b{ display: flex; justify-content: space-between; font-size: 15.5px; font-weight: 600; color: rgb(17, 17, 17); }
.ot-bar__s small{ font-size: 12.5px; color: rgb(142, 142, 147); margin-top: 1px; }
.ot-bar__btn{ display: block; width: 100%; height: 54px; border: 0px; border-radius: 100px; background: rgb(31, 10, 23); color: rgb(255, 255, 255); font-family: inherit; font-size: 16px; font-weight: 600; cursor: pointer; box-shadow: rgba(40, 8, 30, 0.26) 0px 14px 28px; }
.ot-bar p{ margin: 8px 0px 0px; text-align: center; font-size: 12px; color: rgb(142, 142, 147); }
.ot-bar p:empty{ display: none; }
.ot-bar{ background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: 28px 28px 0px 0px; box-shadow: rgba(40, 8, 30, 0.09) 0px -10px 34px; padding: 16px 16px 24px; }
.rf-pane[data-tab="progress"] .rf-scr{ padding-top: 54px; }
.pz-top{ padding: 14px 20px 4px; }
.pz-top h1{ margin: 0px; font-size: 32px; font-weight: 700; letter-spacing: -1px; color: rgb(16, 16, 20); }
.pz-top span{ display: block; font-size: 14px; color: rgb(139, 138, 146); margin-top: 2px; }
.pz{ padding: 6px 16px 8px; }
.pz-card{ background: rgb(255, 255, 255); border-radius: 24px; padding: 18px; margin-top: 12px; box-shadow: rgba(20, 4, 12, 0.05) 0px 8px 24px, rgba(12, 14, 18, 0.03) 0px 0px 0px 1px inset; }
.pz-k{ font-size: 14px; color: rgb(139, 138, 146); }
.pz-mut{ font-size: 13px; color: rgb(139, 138, 146); }
.pz-t{ font-size: 17px; font-weight: 600; letter-spacing: -0.35px; color: rgb(16, 16, 20); }
.pz-row{ display: flex; justify-content: space-between; align-items: baseline; }
.pz-g + .pz-g{ border-top: 1px solid rgba(12, 14, 18, 0.06); }
.pz-g__l b{ display: block; font-size: 15.5px; font-weight: 600; letter-spacing: -0.25px; color: rgb(16, 16, 20); }
.pz-g__l small{ display: block; font-size: 12.5px; color: rgb(139, 138, 146); margin-top: 1px; }
.pz-g__bar{ position: relative; height: 8px; border-radius: 100px; background: rgb(239, 239, 242); }
.pz-g__bar i{ position: absolute; left: 0px; top: 0px; bottom: 0px; border-radius: 100px; background: rgb(140, 198, 63); }
.pz-g__bar u{ position: absolute; top: -4px; width: 2px; height: 16px; margin-left: -1px; background: rgb(16, 16, 20); border-radius: 2px; }
.pz-g__v{ text-align: right; }
.pz-g__v b{ display: block; font-size: 19px; font-weight: 700; letter-spacing: -0.5px; color: rgb(16, 16, 20); font-variant-numeric: tabular-nums; }
.pz-g__v small{ display: block; font-size: 12px; color: rgb(139, 138, 146); }
.pz-note{ display: flex; gap: 10px; align-items: flex-start; margin-top: 6px; padding-top: 14px; border-top: 1px solid rgba(12, 14, 18, 0.06); }
.pz-note img{ width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.pz-note p{ margin: 0px; font-size: 14px; line-height: 1.45; color: rgb(58, 58, 60); }
.pz-leg{ display: flex; gap: 14px; flex-wrap: wrap; margin-top: 12px; font-size: 12px; color: rgb(139, 138, 146); }
.pz-leg i{ display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.pz-leg__f{ background: rgb(140, 198, 63); }
.pz-leg__m{ background: rgb(16, 16, 20); width: 2px !important; border-radius: 1px !important; }
.pz-leg i.g{ background: rgb(140, 198, 63); }
.pz-leg i.m{ background: rgb(242, 201, 76); }
.pz-leg i.b{ background: rgb(244, 163, 140); }
.pz-en__v{ display: flex; align-items: baseline; gap: 6px; margin-top: 10px; }
.pz-en__v b{ font-size: 40px; font-weight: 700; letter-spacing: -1.4px; color: rgb(16, 16, 20); line-height: 1; }
.pz-en__v span{ font-size: 15px; color: rgb(139, 138, 146); }
.pz-en__v em{ font-style: normal; margin-left: auto; font-size: 13px; font-weight: 600; color: rgb(79, 125, 23); }
.pz-en{ display: flex; gap: 6px; align-items: flex-end; height: 96px; margin-top: 14px; }
.pz-en__c{ flex: 1 1 0px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; }
.pz-en__c i{ display: block; border-radius: 6px 6px 2px 2px; background: rgb(217, 236, 195); min-height: 6px; }
.pz-en__c.now i{ background: rgb(140, 198, 63); }
.pz-en__c.gap i{ background: rgb(239, 239, 242); }
.pz-en__c span{ font-size: 11px; color: rgb(139, 138, 146); text-align: center; margin-top: 6px; }
.pz-p{ margin: 12px 0px 0px; font-size: 14px; line-height: 1.45; color: rgb(58, 58, 60); }
.pz-p b{ color: rgb(16, 16, 20); }
.pz-story{ display: flex; align-items: center; gap: 14px; margin-top: 12px; padding: 12px 16px 12px 12px; border-radius: 24px; background: rgb(255, 255, 255); color: rgb(17, 17, 17); cursor: pointer; box-shadow: rgba(20, 4, 12, 0.05) 0px 8px 24px, rgba(12, 14, 18, 0.03) 0px 0px 0px 1px inset; }
.pz-story__im{ width: 46px; height: 58px; flex: 0 0 auto; border-radius: 12px; object-fit: cover; object-position: 50% 20%; background: rgb(242, 240, 242); }
.pz-story .pz-story__ic{ margin: 0; display: grid; place-items: center; color: rgb(214, 74, 134); background: rgba(214, 74, 134, 0.1); }
.pz-story .pz-story__ic svg{ width: 22px; height: 22px; }
.pz-story div{ flex: 1 1 auto; min-width: 0px; }
.pz-story small{ display: block; font-size: 12.5px; font-weight: 500; color: rgb(142, 138, 141); }
.pz-story b{ display: block; font-size: 16px; font-weight: 600; letter-spacing: -0.3px; margin-top: 1px; }
.pz-story span{ display: block; font-size: 13px; color: rgb(110, 106, 109); margin-top: 2px; }
.pz-story i{ width: 18px; height: 18px; color: rgb(196, 193, 196); }
.pz-story i svg{ width: 18px; height: 18px; }
.pz-duo{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pz-duo .pz-card{ margin-top: 12px; }
.pz-ring{ display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.pz-ring svg{ width: 64px; height: 64px; transform: rotate(-90deg); flex: 0 0 auto; }
.pz-ring__t{ fill: none; stroke: rgb(239, 239, 242); stroke-width: 8; }
.pz-ring__v{ fill: none; stroke: rgb(140, 198, 63); stroke-width: 8; stroke-linecap: round; }
.pz-ring b{ display: block; font-size: 24px; font-weight: 700; letter-spacing: -0.6px; color: rgb(16, 16, 20); }
.pz-ring small{ display: block; font-size: 12px; color: rgb(139, 138, 146); }
.pz-w{ margin-top: 14px; }
.pz-w b{ font-size: 34px; font-weight: 700; letter-spacing: -1.2px; color: rgb(16, 16, 20); }
.pz-w span{ font-size: 15px; color: rgb(139, 138, 146); margin-left: 4px; }
.pz-dn{ font-size: 13px; font-weight: 600; color: rgb(79, 125, 23); margin-top: 6px; }
.pz-big{ font-size: 22px; font-weight: 700; letter-spacing: -0.6px; color: rgb(16, 16, 20); }
.pz-big small{ font-size: 13px; color: rgb(139, 138, 146); font-weight: 500; }
.pz-ch{ position: relative; margin-top: 14px; }
.pz-ch svg{ display: block; width: 100%; height: auto; overflow: visible; }
.pz-ch__g{ stroke: rgb(239, 239, 242); stroke-width: 1; }
.pz-ch__t{ font-size: 10.5px; fill: rgb(139, 138, 146); font-variant-numeric: tabular-nums; }
.pz-ch__l{ fill: none; stroke: rgb(106, 167, 42); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.pz-ch__a{ fill: rgb(140, 198, 63); opacity: 0.12; }
.pz-ch__dot{ fill: rgb(106, 167, 42); stroke: rgb(255, 255, 255); stroke-width: 2; }
.pz-ch__pt{ cursor: pointer; }
.pz-ch__pt.on .pz-ch__dot{ r: 5.5; }
.pz-ch__end{ font-size: 13px; font-weight: 700; fill: rgb(16, 16, 20); }
.pz-ch__tip{ position: absolute; transform: translate(-50%, calc(-100% - 12px)); background: rgb(16, 16, 20); color: rgb(255, 255, 255); border-radius: 10px; padding: 6px 9px; font-size: 12px; line-height: 1.25; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.15s; }
.pz-ch__tip.on{ opacity: 1; }
.pz-ch__tip b{ display: block; }
.pz-ch__tip span{ color: rgba(255, 255, 255, 0.7); }
.pz-sec{ font-size: 20px; font-weight: 700; letter-spacing: -0.5px; color: rgb(16, 16, 20); margin: 26px 4px 0px; }
.pz-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.pz-tile{ background: rgb(255, 255, 255); border-radius: 20px; padding: 16px; box-shadow: rgba(20, 4, 12, 0.05) 0px 8px 24px; }
.pz-tile b{ display: block; font-size: 26px; font-weight: 700; letter-spacing: -0.8px; color: rgb(16, 16, 20); }
.pz-tile b i{ font-style: normal; font-size: 14px; font-weight: 500; color: rgb(139, 138, 146); letter-spacing: 0px; }
.pz-tile span{ display: block; font-size: 13px; color: rgb(139, 138, 146); margin-top: 4px; }
.pz-d14{ display: grid; grid-template-columns: repeat(14, 1fr); gap: 4px; }
.pz-d14 i{ height: 34px; border-radius: 9px; }
.pz-d14 i.g{ background: rgb(140, 198, 63); }
.pz-d14 i.m{ background: rgb(242, 201, 76); }
.pz-d14 i.b{ background: rgb(244, 163, 140); }
.pz-d14__ax{ margin-top: 8px; font-size: 12px; color: rgb(139, 138, 146); }
.pz-rows{ padding: 4px 0px; }
.pz-rows .xs-row{ min-height: 66px; }
.rf-pane[data-tab="progress"] .tp-sheet{ margin-top: 22px; }
.xs-film__more{ cursor: pointer; }
.xs-film__more .xs-film__ph span{ font-size: 15px; font-weight: 600; color: rgb(17, 17, 17); }
.xs-fig .xs-fig__d{ fill: none; stroke-dasharray: none; opacity: 0.6; }
.xs-fig ellipse{ fill: none; stroke: rgb(199, 199, 204); stroke-width: 1.4; }
.xs-cam__tip{ position: absolute; top: 18px; left: 0px; right: 0px; display: flex; justify-content: center; }
.xs-cam__tip span{ padding: 8px 14px; border-radius: 100px; background: rgba(0, 0, 0, 0.42); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); font-size: 13.5px; font-weight: 600; color: rgb(255, 255, 255); transition: opacity 0.25s, transform 0.25s; }
.xs-cf{ position: absolute; inset: 0px; z-index: 6; background: rgb(0, 0, 0); color: rgb(255, 255, 255); display: flex; flex-direction: column; padding-top: 54px; overflow: hidden; user-select: none; }
.xs-cf__top{ display: flex; align-items: center; gap: 10px; height: 46px; padding: 0px 12px; flex: 0 0 auto; }
.xs-cf__ic{ width: 36px; height: 36px; flex: 0 0 auto; border-radius: 50%; border: 0px; padding: 0px; background: rgba(255, 255, 255, 0.14); color: rgb(255, 255, 255); display: grid; place-items: center; cursor: pointer; }
.xs-cf__ic svg{ width: 18px; height: 18px; }
.xs-cf__ic--ghost{ background: none; width: 64px; }
.xs-cf__t{ flex: 1 1 auto; text-align: center; line-height: 1.2; }
.xs-cf__t b{ display: block; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.xs-cf__t small{ font-size: 12px; color: rgba(255, 255, 255, 0.55); }
.xs-cf__tm{ flex: 0 0 auto; min-width: 64px; height: 32px; padding: 0px 11px; border-radius: 100px; border: 0px; background: rgba(255, 255, 255, 0.14); color: rgb(255, 255, 255); font-family: inherit; font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 5px; cursor: pointer; }
.xs-cf__tm svg{ width: 15px; height: 15px; }
.xs-cf__tm.on{ background: rgba(255, 255, 255, 0.92); color: rgb(17, 17, 17); }
.xs-cf__seg{ margin: 6px 12px 0px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 3px; border-radius: 100px; background: rgba(255, 255, 255, 0.12); flex: 0 0 auto; }
.xs-cf__seg button{ height: 32px; border: 0px; border-radius: 100px; background: none; color: rgba(255, 255, 255, 0.75); font-family: inherit; font-size: 14px; font-weight: 500; display: flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; transition: background 0.25s, color 0.25s; }
.xs-cf__seg button.on{ background: rgb(255, 255, 255); color: rgb(17, 17, 17); font-weight: 600; }
.xs-cf__seg .xs-okb{ width: 14px; height: 14px; border-radius: 50%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center center / 9px no-repeat rgb(255, 255, 255); }
.xs-cf__seg button.on .xs-okb{ background-color: rgb(17, 17, 17); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.xs-cf__vf{ position: relative; margin: 10px 8px 0px; aspect-ratio: 3 / 4; border-radius: 24px; overflow: hidden; background: rgb(43, 39, 35); flex: 0 0 auto; touch-action: none; }
.xs-cam__room{ position: absolute; inset: 0px; background: radial-gradient(55% 40% at 14% 28%, rgba(255, 232, 204, 0.16), rgba(255, 232, 204, 0) 70%), linear-gradient(rgb(75, 70, 64) 0%, rgb(67, 62, 56) 74%, rgb(48, 43, 39) 74.3%, rgb(56, 51, 46) 74.8%, rgb(42, 38, 34) 100%); box-shadow: rgba(0, 0, 0, 0.45) 0px 0px 90px inset; }
.xs-cf.is-front .xs-cam__room{ transform: scaleX(-1); }
.xs-cf__prev,.xs-cf__was{ position: absolute; inset: 0px; pointer-events: none; }
.xs-cf__pose{ position: absolute; left: 0px; right: 0px; top: 9%; height: 81%; display: flex; justify-content: center; pointer-events: none; }
.xs-cf__pose .xs-fig{ height: 100%; width: auto; }
.xs-cf__pose .xs-fig{ filter: drop-shadow(rgba(0, 0, 0, 0.35) 0px 0px 5px); }
.xs-cf__pose .xs-fig ellipse,.xs-cf__pose .xs-fig circle,.xs-cf__pose .xs-fig path{ fill: rgba(255, 255, 255, 0.07); stroke: rgb(255, 255, 255); stroke-width: 1.15; stroke-dasharray: 4.5, 3; stroke-linecap: round; }
.xs-cf__pose .xs-fig .xs-fig__d{ display: none; }
.xs-cf__vf .xs-phimg{ position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; }
.xs-cf__vf.is-review .xs-cam__room{ filter: brightness(1.55) sepia(0.18); }
.xs-cf__was{ opacity: 0; transition: opacity 0.16s; }
.xs-cf__shot{ transition: opacity 0.16s; }
.xs-cf__chip{ position: absolute; top: 8px; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 8px 14px; border-radius: 100px; background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); font-size: 13px; font-weight: 600; pointer-events: none; }
.xs-cf__chip .b{ display: none; }
.xs-cf__gd i{ position: absolute; left: 0px; right: 0px; height: 0px; border-top: 1.5px dashed rgba(255, 255, 255, 0.5); pointer-events: none; }
.xs-cf__gd i.t{ top: 9.9%; }
.xs-cf__gd i.b{ top: 86%; }
.xs-cf__gd i span{ position: absolute; left: 10px; top: -11px; font-size: 11px; font-weight: 600; color: rgb(255, 255, 255); background: rgba(0, 0, 0, 0.5); padding: 3px 8px; border-radius: 100px; }
.xs-cf__gd i.v{ inset: 9.9% auto 14% 50%; height: auto; border-top: 0px; border-left: 1px dashed rgba(255, 255, 255, 0.2); }
.xs-cf .xs-cam__tip{ top: 8px; }
.xs-cf .xs-cam__tip span{ background: rgba(0, 0, 0, 0.5); }
.xs-cf__op{ position: absolute; top: 8px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; height: 34px; padding: 0px 13px; border-radius: 100px; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.xs-cf__op input{ width: 104px; margin: 0px; accent-color: rgb(255, 255, 255); cursor: pointer; }
.xs-cf__op b{ min-width: 30px; text-align: right; font-weight: 600; }
.xs-cf__lvl{ position: absolute; right: 10px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 7px; pointer-events: none; }
.xs-cf__lvl i{ position: relative; width: 6px; height: 84px; border-radius: 6px; background: rgba(255, 255, 255, 0.2); }
.xs-cf__lvl i::before{ content: ""; position: absolute; left: -5px; right: -5px; top: 50%; height: 1.5px; margin-top: -1px; background: rgba(255, 255, 255, 0.75); border-radius: 2px; }
.xs-cf__lvl b{ position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0px 0px -6px; border-radius: 50%; background: rgb(163, 213, 70); box-shadow: rgba(163, 213, 70, 0.28) 0px 0px 0px 3px; animation: 3.2s ease-in-out 0s infinite normal none running xslvl2; }
@keyframes xslvl2 { 
  0%, 100% { transform: translateY(-2px); }
  50% { transform: translateY(2px); }
}
.xs-cf__lvl span{ font-size: 10.5px; font-weight: 600; color: rgb(207, 238, 143); }
.xs-cf__modes{ position: absolute; left: 0px; right: 0px; bottom: 12px; display: flex; justify-content: center; }
.xs-cf__mseg{ display: flex; gap: 2px; padding: 3px; border-radius: 100px; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.xs-cf__mseg button{ height: 30px; padding: 0px 13px; border: 0px; border-radius: 100px; background: none; color: rgba(255, 255, 255, 0.82); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.25s, color 0.25s; }
.xs-cf__mseg button.on{ background: rgba(255, 255, 255, 0.94); color: rgb(17, 17, 17); }
.xs-cf__mseg button.is-dis{ color: rgba(255, 255, 255, 0.35); }
.xs-cf__cd{ position: absolute; inset: 0px; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.xs-cf__cd b{ font-size: 112px; font-weight: 200; line-height: 1; color: rgba(255, 255, 255, 0.9); text-shadow: rgba(0, 0, 0, 0.35) 0px 4px 30px; font-variant-numeric: tabular-nums; }
.xs-cf__cd span{ margin-top: 8px; font-size: 14px; font-weight: 600; background: rgba(0, 0, 0, 0.45); padding: 7px 13px; border-radius: 100px; }
.xs-cf__cd.tick b{ animation: 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0s 1 normal none running xscd; }
@keyframes xscd { 
  0% { transform: scale(1.3); opacity: 0.35; }
  30% { transform: scale(1); opacity: 1; }
}
.xs-cf__bar{ display: flex; align-items: center; justify-content: space-between; padding: 16px 40px 0px; flex: 0 0 auto; }
.xs-cf .xs-cam__sh{ width: 72px; height: 72px; border: 0px; background: rgb(255, 255, 255); box-shadow: rgb(0, 0, 0) 0px 0px 0px 4px, rgba(255, 255, 255, 0.95) 0px 0px 0px 7px; transition: transform 0.15s; }
.xs-cf .xs-cam__sh:active{ transform: scale(0.92); }
.xs-cf .xs-cam__sh.is-cd{ background: transparent; position: relative; box-shadow: rgb(0, 0, 0) 0px 0px 0px 4px, rgba(255, 255, 255, 0.95) 0px 0px 0px 7px; }
.xs-cf .xs-cam__sh.is-cd::after{ content: ""; position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0px 0px -13px; border-radius: 7px; background: rgb(255, 69, 58); }
.xs-cf .xs-cam__g{ background: rgba(255, 255, 255, 0.14); }
.xs-cf__links{ display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 10px; flex: 0 0 auto; }
.xs-cf__links i{ width: 3px; height: 3px; border-radius: 50%; background: rgba(255, 255, 255, 0.35); }
.xs-cf__links button{ border: 0px; background: none; padding: 8px 2px; color: rgba(255, 255, 255, 0.72); font-family: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.xs-cf__rv{ display: grid; grid-template-columns: 1fr 1.35fr; gap: 10px; padding: 18px 16px 0px; flex: 0 0 auto; }
.xs-cf__rv button{ height: 52px; border-radius: 100px; border: 0px; font-family: inherit; font-size: 16px; font-weight: 600; cursor: pointer; }
.xs-cf__b2{ background: rgba(255, 255, 255, 0.14); color: rgb(255, 255, 255); }
.xs-cf__b1{ background: rgb(255, 255, 255); color: rgb(17, 17, 17); }
.xs-cf__n{ text-align: center; margin-top: 12px; font-size: 13px; color: rgba(255, 255, 255, 0.55); flex: 0 0 auto; }
.xs-ex__ph .xs-phimg,.xs-film__ph .xs-phimg,.xs-cmp .xs-phimg{ position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; }
@keyframes pzSk { 
  100% { background-position: -200% 0px; }
}
.xs-row--add .xs-b b,.xs-row--add .xs-ic{ color: rgb(17, 17, 17); }
.gxa-offrow{ display: flex; align-items: center; gap: 10px; margin: 0px 20px 12px; padding: 10px 14px; border-radius: 18px; background: rgb(28, 28, 30); color: rgb(255, 255, 255); font-size: 13.5px; line-height: 1.3; animation: 0.3s ease 0s 1 normal none running gxaOffIn; }
.gxa-offrow svg{ width: 18px; height: 18px; flex: 0 0 auto; }
.gxa-offrow b{ font-weight: 600; }
.gxa-offrow span{ color: rgba(255, 255, 255, 0.66); }
@keyframes gxaOffIn { 
  0% { opacity: 0; transform: translateY(-6px); }
}
.xs-bar2.gm-bar{ z-index: 23; padding-top: 30px; background: linear-gradient(rgba(243, 243, 245, 0), rgb(243, 243, 245) 26px); }
.gm-bar__s{ text-align: center; font-size: 12.5px; color: rgb(142, 142, 147); margin: 0px 0px 8px; }
.gm-bar__s:empty{ display: none; }
.gm-bar__h{ text-align: center; font-size: 12px; color: rgb(174, 174, 178); margin-top: 10px; }
.gm-bar__h:empty{ display: none; }
.gp-grow{ align-items: center; }
.gp-g--ok .pz-g__v small{ color: rgb(79, 125, 23); font-weight: 600; display: flex; align-items: center; justify-content: flex-end; gap: 3px; }
.gp-okk svg{ width: 12px; height: 12px; display: block; }
.gp-gnone__b{ display: flex; gap: 12px; align-items: flex-start; margin-top: 14px; }
.gp-gnone__ic{ width: 40px; height: 40px; border-radius: 50%; background: rgb(243, 243, 245); display: grid; place-items: center; flex: 0 0 auto; color: rgb(16, 16, 20); }
.gp-gnone__ic svg{ width: 19px; height: 19px; }
.gp-gnone__b b{ display: block; font-size: 16px; font-weight: 600; letter-spacing: -0.3px; color: rgb(16, 16, 20); }
.gp-gnone__b p{ margin: 3px 0px 0px; font-size: 14px; line-height: 1.45; color: rgb(107, 106, 114); }
.gp-pillbtn{ height: 36px; padding: 0px 16px; border: 0px; border-radius: 100px; background: rgb(241, 241, 243); color: rgb(17, 17, 17); font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; flex: 0 0 auto; }
.gp-gnone .gp-pillbtn{ margin: 14px 0px 0px 52px; }
.pz-en__v em.gp-em-down{ color: rgb(181, 71, 42); }
.pz-en__c.gp-down.now i{ background: rgb(244, 163, 140); }
.pz-en__c.gp-down i{ background: rgb(248, 220, 210); }
.pz-en__c.gp-ghost i{ background: none; border: 1.5px dashed rgb(227, 227, 232); box-sizing: border-box; }
.pz-dn.gp-mut{ color: rgb(139, 138, 146); font-weight: 500; }
.gp-foot{ font-size: 13px; color: rgb(139, 138, 146); margin-top: 10px; }
.pz-d14 i.gp-e{ background: none; border: 1.5px dashed rgb(227, 227, 232); box-sizing: border-box; }
.gp-tpe{ display: flex; flex-direction: column; align-items: center; text-align: center; background: rgb(246, 246, 248); border-radius: 20px; padding: 22px 18px 18px; margin-top: 14px; }
.gp-tpe__ic{ width: 48px; height: 48px; border-radius: 50%; background: rgb(255, 255, 255); display: grid; place-items: center; color: rgb(16, 16, 20); margin-bottom: 10px; }
.gp-tpe__ic svg{ width: 22px; height: 22px; }
.gp-tpe b{ font-size: 16px; font-weight: 600; letter-spacing: -0.3px; }
.gp-tpe small{ font-size: 13.5px; line-height: 1.45; color: rgb(139, 138, 146); margin: 4px 0px 14px; max-width: 270px; }
.gp-tpe .gp-pillbtn{ background: rgb(255, 255, 255); }
.gp-dst{ display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; letter-spacing: -0.05px; color: rgb(142, 138, 141); white-space: nowrap; }
.gp-dst i{ width: 7px; height: 7px; border-radius: 50%; background: var(--dot,#8e8a8d); flex: 0 0 auto; }
.gp-dst--ok,.gp-dst--attn{ color: rgb(74, 68, 73); }
.gp-dst--ok{ --dot: #7fb13a; }
.gp-dst--attn{ --dot: #f0a03c; }
.gp-rev > b{ display: block; font-size: 14.5px; font-weight: 600; letter-spacing: -0.2px; }
.gp-rev > .gp-dst{ margin-top: 4px; }
.gp-rev .tp-rev__n{ border-left-color: rgb(228, 225, 228); }
.tp-row__b small .gp-dst{ font-size: 12px; gap: 5px; }
.tp-row__b small .gp-dst i{ width: 6px; height: 6px; }
.gp-nospark{ width: 64px; height: 2px; border-radius: 2px; background: rgb(232, 230, 232); flex: 0 0 auto; }
.gp-sk{ border-radius: 20px; background: linear-gradient(90deg, rgb(239, 239, 242) 0%, rgb(247, 247, 249) 50%, rgb(239, 239, 242) 100%) 0% 0% / 200% 100%; animation: 1.2s linear 0s infinite normal none running pzSk; }
.gp-sk--tile{ height: 74px; }
.gp-sk--chart{ height: 160px; margin-top: 10px; }
.gp-sk--line{ height: 18px; border-radius: 9px; margin-top: 18px; width: 46%; }
.gp-sk--line.s{ width: 70%; margin-top: 10px; }
.gp-soon{ display: flex; flex-direction: column; align-items: center; text-align: center; padding: 22px 20px 20px; }
.gp-soon__ch{ width: 100%; margin-bottom: 12px; }
.gp-soon__ch svg{ width: 100%; height: auto; display: block; }
.gp-soon__l{ fill: none; stroke: rgb(227, 227, 232); stroke-width: 3; stroke-dasharray: 2, 7; stroke-linecap: round; }
.gp-soon__ax{ stroke: rgb(239, 239, 242); stroke-width: 1; }
.gp-soon b{ font-size: 19px; font-weight: 700; letter-spacing: -0.45px; color: rgb(16, 16, 20); }
.gp-soon p{ margin: 6px 0px 16px; font-size: 14.5px; line-height: 1.45; color: rgb(107, 106, 114); max-width: 290px; }
.btn.gp-cap{ width: 100%; height: 52px; border-radius: 100px; background: rgb(17, 17, 17); color: rgb(255, 255, 255); font-size: 16px; font-weight: 600; box-shadow: none; margin: 0px; }
.btn.gp-cap:disabled{ background: rgb(201, 201, 206); color: rgb(255, 255, 255); }
.gp-wk{ position: absolute; inset: 0px; z-index: 48; background: rgb(243, 243, 245); display: flex; flex-direction: column; padding: 54px 0px 0px; opacity: 0; pointer-events: none; transform: translateY(24px); transition: opacity .28s,transform .4s var(--spring,ease); }
.gp-wk.on{ opacity: 1; pointer-events: auto; transform: none; }
.gp-wk__top{ display: flex; align-items: center; justify-content: space-between; padding: 6px 16px 0px; height: 48px; }
.gp-wk__top > span{ font-size: 14px; font-weight: 600; color: rgb(58, 58, 60); }
.gp-wk__back{ position: static; width: 40px; height: 40px; background: rgb(255, 255, 255); border-radius: 50%; box-shadow: rgba(20, 16, 26, 0.06) 0px 4px 14px; }
.gp-wk__back.is-off{ visibility: hidden; }
.gp-wk__back svg{ width: 20px; height: 20px; }
.gp-wk__later{ border: 0px; background: none; font-family: inherit; font-size: 15px; font-weight: 500; color: rgb(142, 142, 147); cursor: pointer; width: 64px; text-align: right; }
.gp-wk__dots{ display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; padding: 10px 20px 0px; }
.gp-wk__dots i{ height: 4px; border-radius: 4px; background: rgb(222, 222, 227); }
.gp-wk__dots i.on{ background: rgb(17, 17, 17); }
.gp-wk__body{ flex: 1 1 auto; overflow: auto; padding: 22px 16px 20px; }
.gp-wk__card{ background: rgb(255, 255, 255); border-radius: 26px; padding: 22px 20px 20px; }
.gp-wk__k{ display: block; font-size: 12.5px; font-weight: 600; letter-spacing: 0.02em; color: rgb(142, 142, 147); }
.gp-wk__card h2{ margin: 8px 0px 0px; font-size: 26px; line-height: 1.15; font-weight: 700; letter-spacing: -0.8px; color: rgb(17, 17, 17); }
.gp-wk__scale{ display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 24px; }
.gp-wk__scale button{ height: 58px; border: 0px; border-radius: 18px; background: rgb(243, 243, 245); font-family: inherit; font-size: 20px; font-weight: 600; color: rgb(17, 17, 17); cursor: pointer; transition: transform 0.15s, background 0.15s; }
.gp-wk__scale button:active{ transform: scale(0.94); }
.gp-wk__ends{ display: flex; justify-content: space-between; margin-top: 9px; font-size: 12.5px; color: rgb(142, 142, 147); }
.gp-wk__hint{ margin: 14px 20px 0px; font-size: 13.5px; line-height: 1.45; color: rgb(142, 142, 147); text-align: center; }
.gp-wk__help{ margin: 8px 0px 0px; font-size: 14.5px; line-height: 1.45; color: rgb(107, 106, 114); }
.gp-wk__ta{ position: relative; margin-top: 16px; }
.gp-wk__ta textarea{ width: 100%; box-sizing: border-box; min-height: 128px; border: 0px; border-radius: 18px; background: rgb(243, 243, 245); padding: 14px 14px 28px; font-family: inherit; font-size: 15.5px; line-height: 1.45; color: rgb(17, 17, 17); resize: none; outline: none; }
.gp-wk__ta textarea::placeholder{ color: rgb(163, 162, 170); }
.gp-wk__ta span{ position: absolute; right: 14px; bottom: 10px; font-size: 12px; color: rgb(163, 162, 170); }
.gp-wk__foot{ padding: 10px 16px 30px; }
.gp-wk__err{ display: flex; gap: 8px; align-items: flex-start; margin: 0px 4px 12px; font-size: 14px; line-height: 1.4; color: rgb(192, 57, 43); }
.gp-wk__err svg{ width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px; }
.gp-wk__res{ flex: 1 1 auto; display: flex; align-items: center; padding: 0px 16px; }
.gp-wk__card--res{ width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 30px 22px 26px; }
.gp-wk__ok{ width: 60px; height: 60px; border-radius: 50%; background: rgb(17, 17, 17); color: rgb(255, 255, 255); display: grid; place-items: center; margin-bottom: 16px; }
.gp-wk__ok svg{ width: 28px; height: 28px; }
.gp-wk__card--res h2{ font-size: 28px; }
.gp-wk__score{ width: 100%; box-sizing: border-box; margin-top: 18px; background: rgb(243, 243, 245); border-radius: 20px; padding: 16px; }
.gp-wk__score b{ display: block; font-size: 40px; font-weight: 700; letter-spacing: -1.4px; line-height: 1; color: rgb(17, 17, 17); }
.gp-wk__score b small{ font-size: 15px; font-weight: 500; letter-spacing: 0px; color: rgb(142, 142, 147); margin-left: 5px; }
.gp-wk__score span{ display: block; margin-top: 6px; font-size: 14.5px; color: rgb(58, 58, 60); }
.gp-wk__lead{ margin: 12px 0px 0px; font-size: 16px; color: rgb(58, 58, 60); }
.gp-wk__copy{ margin: 16px 0px 0px; font-size: 14px; line-height: 1.45; color: rgb(142, 142, 147); max-width: 280px; }
.gp-wkb{ display: flex; align-items: center; gap: 12px; cursor: pointer; }
.gp-wkb__ic{ width: 44px; height: 44px; border-radius: 50%; background: rgb(17, 17, 17); color: rgb(255, 255, 255); display: grid; place-items: center; flex: 0 0 auto; }
.gp-wkb__ic svg{ width: 21px; height: 21px; }
.gp-wkb__b{ flex: 1 1 auto; min-width: 0px; }
.gp-wkb__b b{ display: block; font-size: 16px; font-weight: 600; letter-spacing: -0.3px; }
.gp-wkb__b small{ display: block; font-size: 12.5px; line-height: 1.35; color: rgb(139, 138, 146); margin-top: 2px; }
.gp-wkb .chev{ width: 18px; height: 18px; color: rgb(176, 175, 182); }
.xs-seg3.gp-off{ opacity: 0.45; pointer-events: none; }
.xs-hero b.gp-mnone{ font-size: 30px; letter-spacing: -1px; }
.gp-mgh{ display: block; width: 100%; height: auto; margin-top: 16px; }
.gp-mgh line{ stroke: rgb(239, 239, 242); stroke-width: 1; }
.gp-mgh__l{ fill: none; stroke: rgb(222, 222, 227); stroke-width: 2.2; stroke-dasharray: 3, 7; stroke-linecap: round; }
.gp-mgh__d{ fill: rgb(17, 17, 17); }
.xs-shot.gp-shot0::before,.xs-shot.gp-shot0::after{ display: none !important; }
.gp-mring{ width: 56px; height: 56px; border-radius: 50%; background: rgb(241, 241, 243); display: grid; place-items: center; flex: 0 0 auto; color: rgb(17, 17, 17); }
.gp-mring svg{ width: 24px; height: 24px; }
.xs-shot.gp-shot0{ background: none; border: 1.5px dashed rgb(220, 220, 225); box-sizing: border-box; cursor: default; }
.xs-shot.gp-shot0 span{ margin-bottom: 12px; font-size: 13px; color: rgb(142, 142, 147); }
.gp-frow .xs-ic{ color: rgb(142, 142, 147); }
.xs-sheet.gp-errsh .xs-sheet__t{ color: rgb(17, 17, 17); }
.gp-pv{ position: absolute; inset: 0px; z-index: 52; background: rgb(11, 11, 13); color: rgb(255, 255, 255); display: flex; flex-direction: column; padding-top: 54px; opacity: 0; pointer-events: none; transition: opacity 0.25s; }
.gp-pv.on{ opacity: 1; pointer-events: auto; }
.gp-pv__top{ display: flex; align-items: center; gap: 10px; padding: 6px 16px 12px; }
.gp-pv__x,.gp-pv__sp{ width: 40px; height: 40px; flex: 0 0 auto; }
.gp-pv__x{ border: 0px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: rgb(255, 255, 255); display: grid; place-items: center; cursor: pointer; }
.gp-pv__x svg{ width: 18px; height: 18px; }
.gp-pv__t{ flex: 1 1 auto; text-align: center; }
.gp-pv__t b{ display: block; font-size: 16px; font-weight: 600; letter-spacing: -0.2px; }
.gp-pv__t small{ display: block; font-size: 12.5px; color: rgba(255, 255, 255, 0.6); margin-top: 2px; }
.gp-pv__stage{ position: relative; flex: 1 1 auto; margin: 0px 12px; min-height: 0px; }
.gp-pv__img{ position: absolute; inset: 0px; border-radius: 26px; overflow: hidden; background: linear-gradient(rgb(233, 221, 211), rgb(216, 197, 183)); display: flex; align-items: flex-end; justify-content: center; }
.gp-pv__img.is-doc{ background: rgb(28, 28, 31); align-items: center; }
.gp-pv__doc{ width: 78%; aspect-ratio: 1 / 1.35; background: rgb(250, 250, 247); border-radius: 6px; box-shadow: rgba(0, 0, 0, 0.4) 0px 20px 50px; padding: 26px 22px; box-sizing: border-box; display: flex; flex-direction: column; gap: 11px; transform: rotate(-1.2deg); }
.gp-pv__doc em{ font-style: normal; font-size: 13px; font-weight: 700; color: rgb(51, 51, 51); margin-bottom: 6px; }
.gp-pv__doc i{ display: block; height: 6px; border-radius: 3px; background: rgb(225, 225, 230); }
.gp-pv__doc i.s{ width: 55%; }
.gp-pv__nav{ position: absolute; top: 50%; margin-top: -20px; width: 40px; height: 40px; border: 0px; border-radius: 50%; background: rgba(11, 11, 13, 0.45); color: rgb(255, 255, 255); display: grid; place-items: center; cursor: pointer; }
.gp-pv__nav svg{ width: 20px; height: 20px; }
.gp-pv__nav.l{ left: 10px; }
.gp-pv__nav.r{ right: 10px; }
.gp-pv__th{ display: flex; justify-content: center; gap: 10px; padding: 14px 16px 0px; }
.gp-pv__th button{ border: 0px; background: none; padding: 0px; color: rgba(255, 255, 255, 0.55); font-family: inherit; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.gp-pv__mini{ width: 52px; height: 68px; border-radius: 12px; overflow: hidden; background: linear-gradient(rgb(233, 221, 211), rgb(216, 197, 183)); display: flex; align-items: flex-end; justify-content: center; box-shadow: transparent 0px 0px 0px 2px; opacity: 0.6; }
.gp-pv__th button.on{ color: rgb(255, 255, 255); }
.gp-pv__th button.on .gp-pv__mini{ box-shadow: rgb(255, 255, 255) 0px 0px 0px 2px; opacity: 1; }
.gp-pv__th small{ font-size: 12px; }
.gp-pv__ph{ position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; }
.gp-pv__img .gp-pv__ph--gr{ object-fit: contain; background: rgb(20, 20, 22); }
.gp-pv__mini{ position: relative; }
.gp-pv__mini .gp-pv__ph--gr{ object-fit: cover; }
.gp-pv__foot{ padding: 14px 28px 34px; text-align: center; font-size: 13px; line-height: 1.45; color: rgba(255, 255, 255, 0.55); }
.gp-lst{ display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 16px; }
.gp-lst .xs-b{ flex: 1 1 auto; }
.gp-lst .xs-b b{ font-weight: 600; }
.gp-lst .xs-b small{ white-space: normal; overflow: visible; text-overflow: clip; }
.gp-lst .xs-b{ min-width: 0px; }
.gp-spin,.gp-okc,.gp-failc{ width: 36px; height: 36px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; }
.gp-spin{ border-width: 3px; border-style: solid; border-color: rgb(17, 17, 17) rgb(236, 236, 239) rgb(236, 236, 239); border-image: initial; box-sizing: border-box; animation: 0.9s linear 0s infinite normal none running gpSpin; }
.gp-okc{ background: rgb(17, 17, 17); color: rgb(255, 255, 255); }
.gp-okc svg{ width: 18px; height: 18px; }
.gp-failc{ background: rgb(242, 240, 242); color: rgb(61, 58, 64); }
.gp-failc svg{ width: 18px; height: 18px; }
@keyframes gpSpin { 
  100% { transform: rotate(360deg); }
}
.gt-toast{ position: absolute; left: 16px; right: 16px; top: 62px; z-index: 90; padding: 13px 16px; border-radius: 18px; background: rgba(16, 16, 20, 0.92); color: rgb(255, 255, 255); font-size: 13.5px; line-height: 1.4; text-align: center; opacity: 0; transform: translateY(-8px); transition: opacity 0.25s, transform 0.3s; pointer-events: none; }
.ot-bar__btn{ background: rgb(16, 16, 20); box-shadow: none; }
.gp-wk__ta textarea{ background: rgb(251, 251, 252); box-shadow: rgba(12, 14, 18, 0.07) 0px 0px 0px 1px inset; }
.gp-wk__ta textarea:focus{ box-shadow: rgb(255, 197, 220) 0px 0px 0px 1.5px inset; }

/* ---- src/styles/40-results.css ---- */
/* СГЕНЕРИРОВАНО design-preview/miniapp-v3-dev/tools/extract_css.js из прототипа nav-v2
   (состояния: ws7.js). Правила взяты в порядке каскада прототипа; не правьте
   руками — поправка поверх живёт в файлах стилей с бОльшим номером. */
.gl-res__t{ font-size: 22px; font-weight: 700; letter-spacing: -0.55px; margin-top: 4px; }
.gl-ph2{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px; }
.gl-ph2 figure{ margin: 0px; position: relative; border-radius: 20px; overflow: hidden; background: rgb(236, 236, 240); aspect-ratio: 3 / 4; }
.gl-ph2 figure{ background: linear-gradient(rgb(236, 235, 239), rgb(226, 224, 230)); }
.gl-ph2 img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.gl-ph2 figcaption{ position: absolute; left: 8px; bottom: 8px; background: rgba(17, 17, 17, 0.72); color: rgb(255, 255, 255); font-size: 12px; font-weight: 600; border-radius: 100px; padding: 4px 10px; }
.gl-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gl-grid div{ background: rgb(255, 255, 255); border-radius: 22px; padding: 16px; }
.gl-grid b{ display: block; font-size: 24px; font-weight: 700; letter-spacing: -0.5px; }
.gl-grid span{ display: block; font-size: 13px; color: rgb(142, 142, 147); margin-top: 2px; line-height: 1.35; }
.gl-quote{ padding: 18px; }
.gl-quote__h{ display: flex; gap: 12px; align-items: center; }
.gl-quote__h img{ width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.gl-quote__h b{ display: block; font-size: 15px; }
.gl-quote__h small{ display: block; font-size: 12.5px; color: rgb(142, 142, 147); }
.gl-quote p{ margin: 12px 0px 0px; font-size: 15px; line-height: 1.55; }
.gl-meet{ padding: 18px; }
.gl-meet__tz{ font-size: 12.5px; color: rgb(142, 142, 147); margin-top: 2px; }
.gl-meet__t{ font-size: 18px; font-weight: 600; letter-spacing: -0.4px; margin-top: 4px; }
.gl-meet__s{ font-size: 14px; color: rgb(110, 110, 115); margin-top: 3px; }
.gl-meet .gl-list{ padding: 8px 0px 0px; }
.gl-meet__div{ height: 0.5px; background: rgb(236, 236, 240); margin: 14px 0px 4px; }
.gl-meet__n{ font-size: 13px; color: rgb(142, 142, 147); line-height: 1.45; margin-top: 8px; }
.gl-meet__acts{ display: flex; gap: 8px; margin-top: 14px; }
.gl-meet__acts button{ flex: 1 1 0%; height: 44px; border: 0px; border-radius: 100px; font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; background: rgb(241, 241, 243); color: rgb(17, 17, 17); }
.gl-meet__acts button.d{ background: rgb(17, 17, 17); color: rgb(255, 255, 255); }

/* ---- src/styles/40-training-hub.css ---- */
/* СГЕНЕРИРОВАНО design-preview/miniapp-v3-dev/tools/extract_css.js из прототипа nav-v2
   (состояния: training.js). Правила взяты в порядке каскада прототипа; не правьте
   руками — поправка поверх живёт в файлах стилей с бОльшим номером. */
.trx{ --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; --safe-top: max(env(safe-area-inset-top, 0px), var(--rf-top-inset, 0px)); }
.trx *{ box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
.trx{ margin: 0px; }
.trx{ font-family: var(--font); background: radial-gradient(1200px 800px at 50% -10%, rgb(233, 234, 238) 0%, rgb(215, 216, 221) 60%, rgb(207, 208, 213) 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; }
.trx .dhead{ flex: 0 0 auto; display: flex; align-items: center; gap: 12px; padding: 8px 16px 12px; }
.trx .dhead__title{ flex: 1 1 auto; text-align: center; font-size: 17px; font-weight: 600; letter-spacing: -0.3px; }
.trx .dhead__btn{ width: 44px; height: 44px; flex: 0 0 auto; border-radius: 50%; border: 0px; cursor: pointer; background: rgba(12, 14, 18, 0.05); display: grid; place-items: center; color: var(--content-strong); transition: transform 0.12s, background 0.2s; }
.trx .dhead__btn:active{ transform: scale(0.92); }
.trx .dhead__btn svg{ width: 20px; height: 20px; }
.trx .lead{ font-size: 28px; font-weight: 600; letter-spacing: -0.6px; line-height: 1.12; margin: 4px 2px 8px; }
.trx{ padding: 0px; background: rgb(255, 247, 253); }
.trx [hidden]{ display: none !important; }
.trx #v-trainhub-detail{ padding-top: 2px !important; }
.trx #v-trainhub-detail{ width: 100%; max-width: 520px; margin: 0px auto; }
.trx #v-trainhub-detail{ display: flex; flex-direction: column; padding-top: 4px !important; }
.trx #v-trainhub-detail{ padding-top: 7px !important; }
.trx #v-trainhub-detail{ max-width: 540px; margin: 0px auto; padding-top: 0px !important; }
.trx .trh{ --s-neutral-bg: rgba(12,14,18,.05); --s-neutral-fg: #594f54; --s-neutral-dot: rgba(12,14,18,.26); --s-success-bg: #eaf4dd; --s-success-fg: #3f6410; --s-success-dot: #a3d546; --s-attn-bg: #fdf0d8; --s-attn-fg: #78500b; --s-attn-dot: #ff9f43; --s-danger-bg: #fdeceb; --s-danger-fg: #b23a33; --s-danger-dot: #c8362f; --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 28px; --trh-line: rgba(12,14,18,.06); --trh-meta: #594f54; --trh-sh: 0 8px 24px rgba(20,4,12,.06), inset 0 0 0 1px rgba(12,14,18,.03); margin: 0px -4px; padding-bottom: var(--s6); display: flex; flex-direction: column; gap: var(--s3); color: var(--content-strong); }
.trx .trh *{ box-sizing: border-box; }
.trx .trh :where(button){ font: inherit; color: inherit; border: 0px; background: transparent; padding: 0px; cursor: pointer; text-align: left; }
.trx .trh-t2{ font-size: 20px; font-weight: 600; letter-spacing: -0.5px; line-height: 1.15; }
.trx .trh-t3{ font-size: 16px; font-weight: 600; letter-spacing: -0.2px; line-height: 1.25; }
.trx .trh h2.trh-t3{ margin: 0px; }
.trx .trh-t4{ font-size: 14.5px; font-weight: 500; letter-spacing: -0.1px; line-height: 1.3; }
.trx .trh-t5{ font-size: 13px; font-weight: 400; line-height: 1.4; color: var(--trh-meta); }
.trx .trh-card{ background: var(--card); border-radius: var(--r-card); box-shadow: var(--trh-sh); }
.trx .trh-card--p{ padding: var(--s4); }
.trx .trh-sect{ display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin: var(--s2) var(--s1) calc(var(--s1) * -1); }
.trx .trh-sect__lk{ color: var(--trh-meta); font-size: 13px; font-weight: 500; min-height: 44px; }
.trx .trh-chip{ --bg: var(--s-neutral-bg); --fg: var(--s-neutral-fg); --dot: var(--s-neutral-dot); display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0px 10px; border-radius: var(--r-pill); background: var(--bg); color: var(--fg); font-size: 11.5px; font-weight: 500; white-space: nowrap; flex: 0 0 auto; }
.trx .trh-chip i{ width: 6px; height: 6px; border-radius: 50%; background: var(--dot); flex: 0 0 auto; }
.trx .trh-chip--success{ --bg: var(--s-success-bg); --fg: var(--s-success-fg); --dot: var(--s-success-dot); }
.trx .trh-chip--attn{ --bg: var(--s-attn-bg); --fg: var(--s-attn-fg); --dot: var(--s-attn-dot); }
.trx .trh-chip--danger{ --bg: var(--s-danger-bg); --fg: var(--s-danger-fg); --dot: var(--s-danger-dot); }
.trx .trh-chip--dark{ --bg: rgba(255,255,255,.12); --fg: #fff; box-shadow: rgba(255, 255, 255, 0.24) 0px 0px 0px 0.5px inset; }
.trx .trh-btn{ flex: 0 0 auto; min-height: 48px; padding: 12px 16px; border-radius: var(--r-pill); display: flex; align-items: center; justify-content: center; gap: var(--s2); font-family: var(--font); font-size: 15px; font-weight: 600; letter-spacing: -0.2px; line-height: 1.2; text-align: center; }
.trx .trh-cta > .trh-btn{ flex: 1 1 0%; }
.trx .trh-btn svg{ width: 16px; height: 16px; }
.trx .trh-btn--brand{ background: var(--brand-strong); color: rgb(255, 255, 255); box-shadow: rgba(20, 4, 12, 0.26) 0px 8px 20px; }
.trx .trh-btn--white{ background: rgb(255, 255, 255); color: var(--brand-strong); box-shadow: rgba(0, 0, 0, 0.26) 0px 8px 20px; }
.trx .trh-btn--soft{ background: rgba(12, 14, 18, 0.06); color: var(--content-strong); }
.trx .trh-cta{ display: flex; gap: var(--s2); }
.trx .trh-hero__aux{ display: flex; justify-content: center; margin-top: var(--s1); }
.trx .trh-hero__aux button{ min-height: 44px; padding: 8px 12px; color: rgba(255, 255, 255, 0.72); font-family: var(--font); font-size: 12.5px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.trx .trh :where(.trh-btn, .trh-tile, .trh-row, .trh-sect__lk, .trh-seg button, .trh-mark__ts, .trh-history-refresh, .trh-day, .trh-pw__ex, .trh-pw__bars button):focus-visible{ outline: rgb(200, 57, 122) solid 3px; outline-offset: 3px; }
.trx .trh :where(.trh-btn, .trh-tile, .trh-row, .trh-history-refresh):active{ transform: scale(0.985); filter: brightness(0.96); }
.trx .trh-wo{ position: relative; display: flex; align-items: center; gap: var(--s3); width: 100%; }
.trx .trh-wo__media{ flex: 0 0 auto; border-radius: var(--r-inset); overflow: hidden; background: var(--tile); display: grid; place-items: center; color: rgba(12, 14, 18, 0.55); }
.trx .trh-wo__b{ flex: 1 1 0%; min-width: 0px; }
.trx .trh-wo__title{ font-size: 14.5px; font-weight: 500; letter-spacing: -0.1px; line-height: 1.3; }
.trx .trh-wo__act{ flex: 0 0 auto; }
.trx .trh-wo--row{ padding: var(--s1) var(--s2) var(--s1) var(--s1); border-radius: var(--r-inset); background: rgba(153, 160, 174, 0.09); }
.trx .trh-wo--row .trh-wo__media{ width: 52px; height: 52px; }
.trx .trh-wo--row .trh-wo__media svg{ width: 23px; height: 23px; }
.trx .trh-wo--row .trh-wo__act{ width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--brand-strong); color: rgb(255, 255, 255); box-shadow: rgba(20, 4, 12, 0.26) 0px 8px 18px; }
.trx .trh-wo--row .trh-wo__act svg{ width: 17px; height: 17px; }
.trx .trh-wo--flat{ background: transparent; padding: var(--s3) 0; border-top: 1px solid var(--trh-line); border-radius: 0px; }
.trx .trh-wo--flat:first-of-type{ border-top: 0px; }
.trx .trh-wo--flat .trh-wo__act{ width: 38px; height: 38px; background: rgba(12, 14, 18, 0.06); color: var(--content-strong); box-shadow: none; }
.trx .trh-wo--hero{ flex-direction: column; align-items: stretch; gap: 0px; position: relative; overflow: hidden; border-radius: var(--r-card); padding: var(--s4) var(--s4) var(--s3); min-height: 376px; color: rgb(255, 255, 255); background: radial-gradient(120% 80% at 88% 2%, rgb(74, 19, 41) 0%, rgba(74, 19, 41, 0) 58%), linear-gradient(152deg, rgb(43, 8, 21) 0%, rgb(29, 2, 12) 52%, rgb(54, 15, 33) 100%); box-shadow: rgba(20, 4, 12, 0.3) 0px 12px 26px; }
.trx .trh-wo--hero .trh-wo__b{ position: relative; z-index: 1; flex: 0 0 auto; max-width: 196px; }
.trx .trh-wo--hero .trh-wo__title{ margin-top: var(--s3); font-size: 24px; font-weight: 600; letter-spacing: -0.7px; line-height: 1.1; }
.trx .trh-wo--hero .trh-wo__sub{ margin-top: 5px; font-size: 13px; color: rgba(255, 255, 255, 0.55); }
.trx .trh-wo--hero .trh-wo__list{ display: flex; flex-direction: column; gap: var(--s2); margin: var(--s3) 0 var(--s4); padding: 0px; list-style: none; }
.trx .trh-wo--hero .trh-wo__list li{ display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: rgba(255, 255, 255, 0.78); }
.trx .trh-wo--hero .trh-wo__list svg{ width: 16px; height: 16px; flex: 0 0 auto; opacity: 0.6; }
.trx .trh-wo__foot{ position: relative; z-index: 2; margin-top: auto; padding: var(--s3); border-radius: var(--r-inset); background: rgba(0, 0, 0, 0.26); box-shadow: rgba(255, 255, 255, 0.09) 0px 1px 0px inset, rgba(0, 0, 0, 0.35) 0px -1px 0px inset; }
.trx .trh-wo.is-done .trh-wo__media{ background: var(--s-success-bg); color: var(--s-success-fg); }
.trx .trh-wo.is-missed .trh-wo__media{ background: var(--s-attn-bg); color: var(--s-attn-fg); }
.trx .trh-wo.is-missed .trh-wo__act{ background: rgba(12, 14, 18, 0.06); color: var(--content-strong); box-shadow: none; }
.trx .trh-pg{ display: flex; align-items: baseline; justify-content: space-between; margin-top: var(--s4); }
.trx .trh-bar{ height: 8px; margin-top: 7px; border-radius: var(--r-pill); background: rgba(12, 14, 18, 0.08); overflow: hidden; }
.trx .trh-bar i{ display: block; height: 100%; border-radius: var(--r-pill); background: var(--brand-strong); }
.trx .trh-pw__ton{ display: flex; align-items: flex-end; gap: var(--s3); margin-top: var(--s3); }
.trx .trh-pw__tonv{ flex: 0 0 auto; }
.trx .trh-pw__tonv b{ font-size: 24px; font-weight: 600; letter-spacing: -0.7px; line-height: 1; }
.trx .trh-pw__tonv span{ display: block; margin-top: 3px; font-size: 11.5px; color: var(--trh-meta); }
.trx .trh-pw__ex{ display: flex; align-items: center; gap: var(--s3); padding: var(--s3) 0; border-top: 1px solid var(--trh-line); }
.trx .trh-pw__exb{ flex: 1 1 0%; min-width: 0px; }
.trx .trh-pw__exb b{ display: block; font-size: 14px; font-weight: 500; letter-spacing: -0.1px; }
.trx .trh-pw__exb span{ display: block; margin-top: 2px; font-size: 11.5px; color: var(--trh-meta); }
.trx .trh-pw__first{ flex: 0 0 auto; width: 92px; display: flex; justify-content: center; }
.trx .trh-pw__pr{ flex: 0 0 auto; text-align: right; min-width: 66px; }
.trx .trh-pw__pr b{ display: block; font-size: 14px; font-weight: 600; letter-spacing: -0.2px; }
.trx .trh-pw__pr span{ display: block; margin-top: 2px; font-size: 11px; color: var(--trh-meta); }
.trx .trh-days{ display: flex; gap: 3px; justify-content: space-between; margin-top: var(--s3); overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x; scrollbar-width: none; }
.trx .trh-days::-webkit-scrollbar{ display: none; }
.trx .trh-day{ flex: 1 0 44px; min-width: 44px; min-height: 56px; background: rgb(243, 241, 244); border-radius: var(--r-pill); padding: 2px; text-align: center; }
.trx .trh-day{ scroll-snap-align: start; }
.trx .trh-day .dow{ font-size: 10px; font-weight: 500; letter-spacing: -0.2px; line-height: 1.6; height: 20px; display: flex; align-items: flex-end; justify-content: center; }
.trx .trh-day .cell{ position: relative; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; }
.trx .trh-day .num{ font-size: 14px; line-height: 1; }
.trx .trh-day .dot{ position: absolute; left: 50%; bottom: 3px; transform: translateX(-50%); width: 5px; height: 5px; border-radius: 50%; background: transparent; }
.trx .trh-day.is-muted .dow,.trx .trh-day.is-muted .num{ color: var(--trh-meta); }
.trx .trh-day.is-done .dot{ background: var(--s-success-dot); }
.trx .trh-day.is-missed .dot{ background: var(--s-attn-dot); }
.trx .trh-day.is-rest .dot{ background: rgba(12, 14, 18, 0.12); }
.trx .trh-day.is-today{ background: var(--brand-strong); }
.trx .trh-day.is-today .dow{ color: var(--content-inverse); }
.trx .trh-day.is-today .trh-day__disc{ width: 34px; height: 34px; border-radius: 50%; background: rgb(255, 255, 255); display: grid; place-items: center; padding: 0px; margin: 0px; }
.trx .trh-day.is-today .num{ font-weight: 500; }
.trx .trh-day.is-sel{ box-shadow: inset 0 0 0 2px var(--brand-strong); }
.trx .trh-day.is-today.is-sel{ box-shadow: none; }
.trx .trh-daylink{ display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--trh-line); font-size: 13px; color: var(--trh-meta); min-height: 44px; }
.trx .trh-daylink b{ color: var(--content-strong); font-weight: 500; font-size: 14.5px; }
.trx .trh-daylink svg{ width: 16px; height: 16px; opacity: 0.4; }
.trx .trh-hint{ margin-top: var(--s3); font-size: 13px; line-height: 1.4; color: var(--trh-meta); }
.trx .trh-tiles{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: var(--s3); }
.trx .trh-tile{ position: relative; overflow: hidden; border-radius: var(--r-inset); min-height: 148px; display: flex; flex-direction: column; justify-content: flex-end; padding: 11px; text-align: left; background: linear-gradient(160deg, rgb(77, 38, 56), rgb(29, 2, 12)); }
.trx .trh-tile__media{ position: absolute; inset: 0px; }
.trx .trh-tile__media img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.trx .trh-tile::after{ content: ""; position: absolute; inset: 0px; background: linear-gradient(rgba(12, 4, 10, 0.3) 0%, rgba(12, 4, 10, 0.1) 34%, rgba(12, 4, 10, 0.62) 64%, rgba(12, 4, 10, 0.94) 100%); }
.trx .trh-tile__date{ position: relative; z-index: 2; align-self: flex-start; margin-bottom: auto; display: inline-flex; align-items: center; height: 26px; padding: 0px 10px; border-radius: var(--r-pill); font-size: 12px; font-weight: 600; color: rgb(255, 255, 255); background: rgba(12, 4, 10, 0.76); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); box-shadow: rgba(255, 255, 255, 0.24) 0px 1px 0px inset, rgba(255, 255, 255, 0.28) 0px 0px 0px 1px inset, rgba(12, 4, 10, 0.34) 0px 1px 6px; text-shadow: rgba(12, 4, 10, 0.72) 0px 1px 3px; }
.trx .trh-tile__b{ position: relative; z-index: 2; padding-right: 40px; color: rgb(255, 255, 255); text-shadow: rgba(12, 4, 10, 0.92) 0px 1px 4px; }
.trx .trh-tile__min{ display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: rgba(255, 255, 255, 0.85); }
.trx .trh-tile__min svg{ width: 13px; height: 13px; flex: 0 0 auto; }
.trx .trh-tile__t{ display: block; margin-top: 6px; font-size: 14.5px; font-weight: 600; letter-spacing: -0.3px; line-height: 1.16; }
.trx .trh-tile__go{ position: absolute; right: 11px; bottom: 11px; z-index: 3; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: rgb(255, 255, 255); color: var(--brand-strong); box-shadow: rgba(0, 0, 0, 0.22) 0px 4px 12px; }
.trx .trh-tile__go svg{ width: 14px; height: 14px; }
.trx .trh-list{ padding: var(--s1) 14px; }
.trx .trh-row{ display: flex; align-items: center; gap: var(--s3); width: 100%; padding: var(--s3) 0; border-top: 1px solid rgba(12, 14, 18, 0.05); min-height: 56px; }
.trx .trh-row:first-child{ border-top: 0px; }
.trx .trh-row__ic{ width: 40px; height: 40px; flex: 0 0 auto; border-radius: 12px; background: var(--tile); display: grid; place-items: center; color: rgba(12, 14, 18, 0.6); overflow: hidden; position: relative; }
.trx .trh-row__ic svg{ width: 20px; height: 20px; }
.trx .trh-row__ic img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.trx .trh-row__b{ flex: 1 1 0%; min-width: 0px; }
.trx .trh-row__b b{ display: block; font-size: 14.5px; font-weight: 500; letter-spacing: -0.1px; line-height: 1.25; }
.trx .trh-row__b p{ margin: 6px 0px 0px; font-size: 13px; line-height: 1.4; color: var(--trh-meta); }
.trx .trh-list .trh-row__b b{ display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }
.trx .trh-list .trh-row__b p{ display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.trx .trh-row__go{ flex: 0 0 auto; color: rgba(12, 14, 18, 0.3); display: grid; place-items: center; }
.trx .trh-row__go svg{ width: 20px; height: 20px; }
.trx .trh-cta{ flex-direction: column; }
.trx .trh-pw__ton{ gap: var(--s2); }
.trx .trh-list .trh-row{ display: grid; grid-template-columns: 40px minmax(0px, 1fr) auto; }
.trx .trh-list .trh-row > .trh-chip{ grid-area: 2 / 2 / auto / 4; justify-self: start; height: auto; min-height: 26px; padding-top: 5px; padding-bottom: 5px; white-space: normal; line-height: 1.2; }
@media (prefers-reduced-motion: reduce){
.trx .trh :where(.trh-btn, .trh-tile, .trh-row, .trh-history-refresh){ transition: none; }
.trx .trh :where(.trh-btn, .trh-tile, .trh-row, .trh-history-refresh):active{ transform: none; }
}
.trx .trh-row--todo{ background: var(--s-danger-bg); border-radius: var(--r-inset); border-top: 0px; margin: var(--s2) -6px; padding: var(--s3) 10px; }
.trx .trh-row--todo + .trh-row{ border-top: 0px; }
.trx .trh-more{ width: 100%; height: 44px; border-radius: var(--r-pill); background: rgba(12, 14, 18, 0.05); display: grid; place-items: center; font-size: 13.5px; font-weight: 500; margin-top: var(--s3); }
.trx{ --v5-act: #5aa0f2; --v5-act-bg: #e6f1fd; --v5-act-fg: #1f5f99; }
.trx .v5-hsum{ position: relative; z-index: 2; margin-bottom: var(--s3); }
.trx .v5-hsum__top{ display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13px; color: rgba(255, 255, 255, 0.62); }
.trx .v5-hsum__top b{ color: rgb(255, 255, 255); font-weight: 600; font-size: 14px; }
.trx .v5-hsum__bar{ display: flex; gap: 3px; height: 8px; margin-top: 10px; }
.trx .v5-hsum__bar i{ display: block; border-radius: 4px; min-width: 6px; }
.trx .v5-hsum i.p{ background: var(--positive); }
.trx .v5-hsum i.a{ background: var(--v5-act); }
.trx .v5-hsum i.a2{ background: rgb(159, 200, 247); }
.trx .v5-hsum__lg{ display: flex; gap: 14px; margin-top: 9px; font-size: 11.5px; color: rgba(255, 255, 255, 0.6); }
.trx .v5-hsum__lg i{ display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: 0.5px; }
.trx .trh-day .v5-adot{ position: absolute; left: 50%; bottom: 3px; width: 5px; height: 5px; border-radius: 50%; background: var(--v5-act); transform: translateX(-50%); }
.trx .trh-day.v5-a:not(.is-rest):not(.is-today) .dot{ transform: translateX(calc(-50% - 4px)); }
.trx .trh-day.v5-a:not(.is-rest):not(.is-today) .v5-adot{ transform: translateX(calc(-50% + 4px)); }
.trx .trh-wo--row.v5-act .trh-wo__media{ background: var(--v5-act-bg); color: var(--v5-act-fg); }
.trx .v5-quick{ display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.trx .v5-quick button{ display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0px 14px; border: 0px; border-radius: 100px; background: rgba(12, 14, 18, 0.05); font: 500 13.5px / 1 Geist, -apple-system, sans-serif; color: var(--content-strong); }
.trx .v5-quick button svg{ width: 16px; height: 16px; color: var(--v5-act-fg); }
.trx .v5-quick button.is-add{ background: var(--brand-strong); color: rgb(255, 255, 255); }
.trx .v5-quick button.is-add svg{ color: rgb(255, 255, 255); }
.trx .v5-quick button small{ color: var(--content-subtle); font-size: 12px; }
.trx .v5-bars{ display: flex; align-items: flex-end; justify-content: flex-end; gap: 8px; height: 78px; }
.trx .v5-bars i{ display: block; width: 100%; }
.trx .v5-bars i.a{ background: rgb(201, 224, 251); border-radius: 6px 6px 0px 0px; }
.trx .v5-bars i.p{ background: rgb(211, 233, 173); border-radius: 0px 0px 4px 4px; box-shadow: rgb(255, 255, 255) 0px -1.5px 0px; }
.trx .v5-bars i.a:last-child{ border-radius: 6px 6px 4px 4px; }
.trx .v5-bars__v{ position: absolute; top: 0px; left: -6px; right: -6px; text-align: center; font-size: 10px; font-weight: 600; color: var(--content-subtle); white-space: nowrap; }
.trx .v5-bars__x{ display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.trx .v5-bars__x span{ width: 30px; text-align: center; font-size: 10px; color: var(--content-subtle); }
.trx .v5-up{ color: var(--s-success-fg); font-weight: 600; }
.trx .trh-pw__pr .v5-was{ color: var(--content-subtle); font-weight: 500; margin-right: 3px; }
.trx .v5-finish{ display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 13px; color: var(--content-subtle); }
.trx .v5-finish b{ color: var(--content-strong); font-weight: 600; }
.trx .v5-coachline{ display: flex; gap: 12px; align-items: flex-start; margin-top: var(--s4); padding: 14px; border-radius: 16px; background: rgb(246, 246, 248); }
.trx .v5-coachline img{ width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; box-shadow: rgb(255, 255, 255) 0px 0px 0px 2px; }
.trx .v5-coachline b{ display: block; font-size: 14px; font-weight: 600; letter-spacing: -0.2px; line-height: 1.3; }
.trx .v5-coachline span{ display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.45; color: rgba(12, 14, 18, 0.6); }
.trx .v5-coachline .trh-btn{ height: 40px; font-size: 13.5px; }
.trx .trh-row__ic.v5-thumb{ position: relative; width: 52px; height: 52px; border-radius: 14px; overflow: hidden; background: rgb(233, 226, 230); }
.trx .trh-row__ic.v5-thumb img{ width: 100%; height: 100%; object-fit: cover; }
.trx .trh-row__ic.v5-thumb em{ position: absolute; inset: 0px; display: grid; place-items: center; background: rgba(20, 4, 12, 0.18); }
.trx .trh-row__ic.v5-thumb em svg{ width: 16px; height: 16px; color: rgb(255, 255, 255); filter: drop-shadow(rgba(0, 0, 0, 0.5) 0px 1px 3px); }
.trx .v5-banner{ position: relative; display: block; overflow: hidden; border-radius: var(--r-card); height: 196px; margin-top: var(--s3); color: rgb(255, 255, 255); background: rgb(43, 8, 21); box-shadow: rgba(20, 4, 12, 0.22) 0px 12px 26px; }
.trx .v5-banner img{ position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }
.trx .v5-banner::after{ content: ""; position: absolute; inset: 0px; background: linear-gradient(rgba(20, 4, 12, 0) 25%, rgba(20, 4, 12, 0.88) 100%); }
.trx .v5-banner__b{ position: absolute; left: 16px; right: 120px; bottom: 14px; z-index: 2; }
.trx .v5-banner__b small{ display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; padding: 5px 10px; border-radius: 100px; background: rgba(255, 255, 255, 0.16); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.trx .v5-banner__b small i{ width: 6px; height: 6px; border-radius: 50%; background: var(--positive); }
.trx .v5-banner__b b{ display: block; margin-top: 8px; font-size: 19px; font-weight: 600; letter-spacing: -0.5px; line-height: 1.15; }
.trx .v5-banner__b span{ display: block; margin-top: 4px; font-size: 12.5px; color: rgba(255, 255, 255, 0.72); }
.trx .v5-banner__go{ position: absolute; right: 14px; bottom: 14px; z-index: 3; height: 38px; padding: 0px 16px; border-radius: 100px; display: grid; place-items: center; background: rgb(255, 255, 255); color: var(--brand-strong); font-size: 13.5px; font-weight: 600; }
.trx .v5-offer{ position: relative; overflow: hidden; border-radius: var(--r-card); background: rgb(255, 255, 255); box-shadow: rgba(20, 4, 12, 0.06) 0px 8px 24px; }
.trx .v5-offer__img{ position: relative; height: 156px; }
.trx .v5-offer__img img{ width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
.trx .v5-offer__img::after{ content: ""; position: absolute; inset: 0px; background: linear-gradient(rgba(255, 255, 255, 0) 50%, rgb(255, 255, 255) 100%); }
.trx .v5-offer__b{ padding: 0 var(--s4) var(--s4); margin-top: -20px; position: relative; z-index: 2; }
.trx .v5-offer__who{ display: flex; align-items: center; gap: 10px; }
.trx .v5-offer__who img{ width: 42px; height: 42px; border-radius: 50%; object-fit: cover; box-shadow: rgb(255, 255, 255) 0px 0px 0px 3px; }
.trx .v5-offer__who span{ font-size: 12.5px; color: var(--content-subtle); }
.trx .v5-offer__who b{ display: block; font-size: 13.5px; color: var(--content-strong); font-weight: 600; }
.trx .v5-offer h3{ margin: 12px 0px 0px; font-size: 19px; font-weight: 600; letter-spacing: -0.5px; line-height: 1.2; }
.trx .v5-offer p{ margin: 6px 0px 0px; font-size: 13.5px; line-height: 1.5; color: rgba(12, 14, 18, 0.6); }
.trx .v5-offer .trh-cta{ margin-top: 14px; }
.trx .v5-day__h{ display: flex; justify-content: space-between; align-items: baseline; margin-top: var(--s4); padding: 0px 2px 2px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--content-subtle); }
.trx .v5-stats{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: var(--s3); }
.trx .v5-stats div{ padding: 12px 8px; border-radius: 14px; background: rgba(12, 14, 18, 0.04); text-align: center; }
.trx .v5-stats b{ display: block; font-size: 19px; font-weight: 600; letter-spacing: -0.5px; }
.trx .v5-stats span{ display: block; margin-top: 2px; font-size: 11px; color: var(--content-subtle); }
.trx .v5-seg{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: var(--s3); padding: 4px; border-radius: 100px; background: rgba(12, 14, 18, 0.05); }
.trx .v5-times{ font-style: normal; font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 100px; background: rgba(12, 14, 18, 0.06); color: rgba(12, 14, 18, 0.6); margin-left: 6px; vertical-align: 1px; }
.trx .v5-past{ display: flex; gap: 12px; align-items: flex-start; margin-top: var(--s3); padding: 14px; border-radius: 16px; background: rgba(12, 14, 18, 0.04); }
.trx .v5-past svg{ width: 20px; height: 20px; flex: 0 0 auto; color: rgba(12, 14, 18, 0.45); margin-top: 1px; }
.trx .v5-past b{ display: block; font-size: 14px; font-weight: 600; letter-spacing: -0.2px; }
.trx .v5-past span{ display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.5; color: rgba(12, 14, 18, 0.6); }
.trx .v5-sheet{ min-height: 760px; position: relative; z-index: 6; margin-top: -40px; margin-right: -20px; margin-left: -20px; padding: 10px 20px 26px; border-radius: 26px 26px 0px 0px; background: var(--neutral-bg); box-shadow: rgba(20, 4, 12, 0.28) 0px -14px 40px; margin-bottom: -40px !important; }
.trx .v5-grab{ width: 40px; height: 5px; border-radius: 3px; background: rgba(12, 14, 18, 0.14); margin: 0px auto 14px; }
.trx .v5-sheet h2{ margin: 0px; font-size: 22px; font-weight: 600; letter-spacing: -0.6px; }
.trx .v5-sheet .lead{ margin-top: 4px; font-size: 13px; color: var(--content-subtle); }
.trx .v5-lbl{ margin-top: 16px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--content-subtle); }
.trx .v5-sheet .v5-save{ width: 100%; margin-top: 18px; height: 54px; }
.trx .trh-list .trh-row:has(.v5-thumb){ grid-template-columns: 52px minmax(0px, 1fr) auto; }
.trx .v5-sub{ display: flex; justify-content: space-between; align-items: baseline; margin-top: var(--s4); padding-bottom: 2px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--content-subtle); }
.trx .v5-sub b{ font-weight: 600; letter-spacing: 0px; text-transform: none; font-size: 12.5px; color: var(--content-strong); }
.trx .v5-sub + div > .trh-wo--flat:first-child,.trx .v5-sub + .trh-wo--flat{ border-top: 0px; }
.trx .v5-hide{ display: flex; justify-content: flex-end; margin: -6px 0px 4px; }
.trx .v5-hide button{ min-height: 32px; padding: 4px 0px; border: 0px; background: none; font: 500 12.5px/1.2 var(--font,inherit); color: var(--trh-meta); text-decoration: underline; text-underline-offset: 3px; }
.trx .v5-qt{ margin-top: var(--s4); font-size: 13px; color: var(--trh-meta); }
.trx .v5-quick{ margin-top: 8px; }
.trx .trh-pw__pr.v5-pr b{ white-space: nowrap; }
.trx .trh-row__ic.v5-thumb.is-q{ display: grid; place-items: center; background: var(--tile); }
.trx .trh-row__ic.v5-thumb.is-q svg{ width: 22px; height: 22px; }
.trx .v5-sub + div > .trh-wo--flat:first-child{ border-top: 0px; }
.trx .trh-pw__pr .v5-was{ display: inline; margin: 0px; }
.trx .v5-daysel{ display: flex; justify-content: space-between; align-items: center; margin-top: var(--s3); padding: 10px 12px; border-radius: 14px; background: rgba(12, 14, 18, 0.04); font-size: 13.5px; }
.trx .v5-daysel button{ border: 0px; background: none; font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1; cursor: pointer; color: var(--brand-strong); text-decoration: underline; text-underline-offset: 3px; padding: 6px 0px; }
.trx .v5-empty{ padding: 14px 0px 6px; font-size: 13.5px; color: var(--trh-meta); }
.trx .v5-bars button{ position: relative; display: flex; flex-direction: column; justify-content: flex-end; width: 30px; height: 100%; padding: 16px 0px 0px; border: 0px; background: none; cursor: pointer; }
.trx .v5-bars button i.a{ background: rgb(201, 224, 251); border-radius: 6px 6px 0px 0px; }
.trx .v5-bars button i.p{ background: rgb(211, 233, 173); border-radius: 0px 0px 4px 4px; box-shadow: rgb(255, 255, 255) 0px -1.5px 0px; }
.trx .v5-bars button i.a:last-child{ border-radius: 6px 6px 4px 4px; }
.trx .v5-bars button.on i.a{ background: var(--v5-act); }
.trx .v5-bars button i{ display: block; width: 100%; transition: height 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
.trx .v5-bars button.on .v5-bars__v{ color: var(--content-strong); }
.trx .v5-seg button{ height: 34px; border: 0px; border-radius: 100px; background: none; font-family: inherit; font-size: 13px; color: rgba(12, 14, 18, 0.55); cursor: pointer; }
.trx .v5-seg button.on{ background: rgb(255, 255, 255); color: var(--content-strong); font-weight: 600; box-shadow: rgba(12, 14, 18, 0.08) 0px 2px 8px; }
.trx .v5-times__list{ display: grid; gap: 4px; margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: rgba(12, 14, 18, 0.04); font-size: 12.5px; color: var(--trh-meta); }
.trx .v5-times__list span:last-child{ color: var(--content-strong); }
.trx .v5-asked{ display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; font-size: 12.5px; line-height: 1.4; color: var(--s-success-fg); }
.trx .v5-asked svg{ width: 16px; height: 16px; flex: 0 0 auto; margin-top: 1px; }
.trx .v5-steps{ list-style: none; margin: 16px 0px 0px; padding: 0px; display: grid; gap: 0px; }
.trx .v5-steps li{ position: relative; padding: 0px 0px 16px 34px; }
.trx .v5-steps li::before{ content: ""; position: absolute; left: 10px; top: 22px; bottom: 0px; width: 2px; background: rgba(12, 14, 18, 0.08); }
.trx .v5-steps li:last-child{ padding-bottom: 0px; }
.trx .v5-steps li:last-child::before{ display: none; }
.trx .v5-steps i{ position: absolute; left: 0px; top: 0px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; box-shadow: rgba(12, 14, 18, 0.14) 0px 0px 0px 2px inset; background: rgb(255, 255, 255); }
.trx .v5-steps li.is-done i{ background: var(--positive); box-shadow: none; color: var(--brand-strong); }
.trx .v5-steps li.is-done i svg{ width: 13px; height: 13px; }
.trx .v5-steps li.is-now i{ box-shadow: inset 0 0 0 2px var(--s-attn-dot); }
.trx .v5-steps li.is-now i::after{ content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--s-attn-dot); animation: 1.6s ease-in-out 0s infinite normal none running trx-v5pulse; }
@keyframes trx-v5pulse { 
  50% { transform: scale(0.55); opacity: 0.5; }
}
.trx .v5-steps b{ display: block; font-size: 14px; font-weight: 600; letter-spacing: -0.1px; }
.trx .v5-steps span{ display: block; margin-top: 2px; font-size: 12.5px; color: var(--trh-meta); }
.trx .v5-sheet__h{ display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.trx .v5-x{ width: 36px; height: 36px; border: 0px; border-radius: 50%; background: rgba(12, 14, 18, 0.06); display: grid; place-items: center; flex: 0 0 auto; cursor: pointer; }
.trx .v5-x svg{ width: 16px; height: 16px; transform: rotate(45deg); }
.trx .v5-field{ display: block; margin-top: 12px; }
.trx .v5-field input,.trx .v5-field textarea{ width: 100%; box-sizing: border-box; border: 0px; border-radius: 14px; background: rgb(255, 255, 255); box-shadow: inset 0 0 0 1.5px var(--brand-strong); padding: 13px 14px; font-family: inherit; font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--content-strong); outline: none; resize: none; }
.trx .v5-attach{ display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(12, 14, 18, 0.04); font-size: 12.5px; line-height: 1.4; color: var(--trh-meta); }
.trx .v5-attach svg{ width: 16px; height: 16px; flex: 0 0 auto; margin-top: 1px; }
.trx .v5-save[disabled]{ opacity: 0.45; box-shadow: none; }
@keyframes trx-v5flash { 
  0% { box-shadow: rgba(90, 160, 242, 0) 0px 0px 0px 0px; background-color: rgba(90, 160, 242, 0.22); }
  100% { background-color: transparent; }
}
.trx .is-flash{ animation: 1.6s ease-out 0s 1 normal none running trx-v5flash; border-radius: 14px; }
.trx .v5-hsum__bar i.is-new{ animation: 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0s 1 normal none running trx-v5grow; }
@keyframes trx-v5grow { 
  0% { flex-grow: 0.0001; opacity: 0.2; }
}
.trx .trh-day .v5-tdots{ position: absolute; left: 50%; bottom: 0px; transform: translateX(-50%); display: flex; gap: 3px; }
.trx .trh-day .v5-tdots i{ width: 5px; height: 5px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--brand-strong); }
.trx .trh-day .v5-tdots i.p{ background: var(--s-success-dot); }
.trx .trh-day .v5-tdots i.a{ background: var(--v5-act); }
.trx .v5-hidden-row{ display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 0px; border-top: 1px solid var(--trh-line); font-size: 13px; color: var(--trh-meta); }
.trx .v5-hidden-row button,.trx .v5-link{ border: 0px; background: none; padding: 6px 0px; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--brand-strong); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.trx .v5-link{ margin-top: 12px; }
.trx .v5-past--ok svg{ color: var(--s-success-fg); }
.trx .v5-seg button{ text-align: center; }
.trx .v5-bars{ gap: 6px; }
.trx .v5-bars button{ width: 38px; }
.trx .v5-bars__x{ gap: 6px; }
.trx .v5-bars__x span{ width: 38px; }
.trx .v5-sheet .lead{ padding: 0px; margin-left: 0px; }
.trx .v5-savebar .v5-save{ width: 100%; height: 54px; margin-top: 18px; }
.trx .trh.v5-sheetroot{ display: block; margin: 0px; padding: 0px; gap: 0px; }
.trx .v5-qempty{ display: flex; gap: 12px; align-items: flex-start; margin-top: var(--s4); padding: 14px; border-radius: 16px; background: rgba(90, 160, 242, 0.07); }
.trx .v5-qempty svg{ width: 22px; height: 22px; flex: 0 0 auto; color: var(--v5-act-fg); margin-top: 1px; }
.trx .v5-qempty b{ display: block; font-size: 14px; font-weight: 600; letter-spacing: -0.1px; }
.trx .v5-qempty span{ display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.45; color: var(--trh-meta); }
.trx .trh-card > .v5-qempty:first-child{ margin-top: 0px; }
.trx .v5-hsum__bar.is-empty i{ flex: 1 1 0%; box-shadow: rgba(255, 255, 255, 0.22) 0px 0px 0px 1.5px inset; border-radius: 4px; background: transparent !important; }
.trx .v5-sheet .lead{ font-weight: 400; font-size: 13.5px; line-height: 1.45; color: var(--trh-meta); margin-top: 6px; }
.trx .trh .trh-wo__title,.trx .trh .v5-offer h3,.trx .v5-sheet h2,.trx .trh .trh-t2{ text-wrap: balance; }
.trx .trh p,.trx .trh .trh-wo__sub,.trx .trh .trh-t5,.trx .v5-qt,.trx .v5-offer p,.trx .v5-meta,.trx .trh-wo__list li span,.trx .v5-past span,.trx .v5-qempty span{ text-wrap: pretty; }
.trx .v5-head{ display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.trx .v5-lead{ margin: 8px 0px 0px; }
.trx .v5-daylink__r{ display: flex; align-items: center; gap: 6px; }
.trx .v5-hsum__bar{ gap: 3px; height: 6px; }
.trx .v5-hsum__bar i{ border-radius: 3px; }
.trx .v5-hsum i.a{ background: rgba(255, 255, 255, 0.7); }
.trx .v5-hsum i.a2{ background: rgba(255, 255, 255, 0.42); }
.trx .v5-hsum i.a3{ background: rgba(255, 255, 255, 0.22); }
.trx .v5-hsum__lg i.a{ background: rgba(255, 255, 255, 0.7); }
.trx .v5-hsum__lg i.a2{ background: rgba(255, 255, 255, 0.42); }
.trx .v5-hsum__lg i.a3{ background: rgba(255, 255, 255, 0.22); }
.trx .v5-hsum__lg{ flex-wrap: wrap; row-gap: 4px; }
.trx .trh-wo--flat .trh-wo__b{ display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0px; }
.trx .trh-wo--flat .trh-wo__title{ line-height: 1.25; }
.trx .v5-rowchip{ display: block; }
.trx .v5-meta{ font-size: 13px; line-height: 1.35; color: var(--trh-meta); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.trx .trh-wo--row .v5-go{ width: 28px; height: 44px; display: grid; place-items: center; flex: 0 0 auto; color: rgba(12, 14, 18, 0.3); }
.trx .trh-wo--row .v5-go svg{ width: 20px; height: 20px; }
.trx .v5-sub b:empty{ display: none; }
.trx .trh-day.is-today .trh-day__disc{ position: relative; }
.trx .trh-day .v5-tdots{ position: absolute; left: 50%; bottom: 4px; top: auto; transform: translateX(-50%); display: flex; gap: 3px; }
.trx .trh-day .v5-tdots i{ width: 4px; height: 4px; border-radius: 50%; box-shadow: none; }
.trx .v5-quick button.is-add{ background: rgb(255, 255, 255); color: var(--content-strong); box-shadow: rgba(12, 14, 18, 0.12) 0px 0px 0px 1px inset; }
.trx .v5-quick button.is-add svg{ color: var(--brand-strong); }
.trx .trh-pw__ton.v5-ton{ display: flex; align-items: flex-end; gap: 12px; }
.trx .v5-ton .trh-pw__tonv{ flex: 1 1 auto; min-width: 0px; }
.trx .v5-bars__wrap{ flex: 0 1 auto; min-width: 0px; }
.trx .v5-bars{ gap: 6px; }
.trx .v5-bars button,.trx .v5-bars__x span{ width: auto; flex: 0 1 32px; min-width: 24px; }
.trx .trh-pw__ex.v5-ex{ display: grid; grid-template-columns: minmax(0px, 1fr) 92px 96px; gap: 10px; align-items: center; }
.trx .v5-ex .trh-pw__first{ justify-content: flex-start; width: auto; }
.trx .v5-ex .trh-pw__pr{ min-width: 0px; text-align: right; }
.trx .trh-pw__pr .v5-was{ display: inline; font-size: 12px; font-weight: 500; color: var(--trh-meta); margin: 0px; }
.trx .trh-tile__min{ white-space: nowrap; }
.trx .v5-banner__b{ right: 72px; }
.trx .v5-banner__go{ width: 44px; height: 44px; padding: 0px; border-radius: 50%; display: grid; place-items: center; }
.trx .v5-banner__go svg{ width: 18px; height: 18px; }
.trx .v5-coachline{ display: block; background: rgb(246, 246, 248); padding: 14px; }
.trx .v5-coachline__who{ display: flex; gap: 12px; align-items: flex-start; }
.trx .v5-coachline__btn{ width: 100%; margin-top: 12px; height: 44px; }
.trx .v5-offer__who span{ color: var(--trh-meta); }
.trx .v5-offer__img::after{ background: linear-gradient(rgba(255, 255, 255, 0) 40%, rgb(255, 255, 255) 92%); }
.trx .v5-offer__img img{ object-position: 50% 28%; }
.trx .trh-list .v5-todo{ margin: 0px -8px; padding: 10px 8px; width: calc(100% + 16px); }
.trx .v5-lbl{ margin-top: 18px; }
.trx .v5-field input::placeholder{ color: rgba(12, 14, 18, 0.35); }
.trx .v5-attach--plan{ align-items: center; background: var(--s-attn-bg); color: var(--s-attn-fg); }
.trx .v5-attach--plan button{ flex: 0 0 auto; border: 0px; border-radius: 100px; padding: 8px 12px; background: rgb(255, 255, 255); font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--brand-strong); cursor: pointer; }
.trx .v5-savebar .trh-btn--soft.v5-save{ background: rgba(12, 14, 18, 0.06); color: var(--content-strong); box-shadow: none; }
.trx .v5-hide{ justify-content: flex-start; margin: -8px 0px 6px 64px; }
.trx .v5-hide button{ text-decoration: none; font-size: 12.5px; font-weight: 500; color: var(--trh-meta); min-height: 28px; }
.trx .v5-past svg{ width: 20px; height: 20px; stroke-width: 1.8; }
.trx .v5-hidden-row span{ min-width: 0px; }
.trx .v5-day__h{ padding: 0px 4px 2px; }
.trx .v5-dayh{ display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0px 2px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--content-subtle); border-top: 1px solid var(--trh-line); }
.trx .v5-dayh:first-child{ border-top: 0px; padding-top: 10px; }
.trx .v5-dayh span{ text-transform: none; letter-spacing: 0px; font-weight: 500; }
.trx .v5-dayh + .trh-wo--flat{ border-top: 0px; }
.trx .v5-stats span{ color: var(--trh-meta); }
.trx .trh-pw__ex.v5-ex{ grid-template-columns: minmax(0px, 1fr) 72px 92px; }
.trx .v5-sheet{ background: rgb(255, 255, 255); }
.trx .v5-x{ background: rgb(244, 240, 242); }
.trx .v5-field input,.trx .v5-field textarea{ background: rgb(255, 255, 255); }
.trx .v5-sheet .v5-attach{ background: rgb(246, 242, 244); }
.trx .v5-savebar .trh-btn--soft.v5-save{ background: rgb(244, 240, 242); }
.trx .v5-plist{ margin: 16px -20px 0px; border-top: 1px solid rgba(12, 14, 18, 0.07); }
.trx .v5-plist + .v5-savebar .v5-save{ margin-top: 20px; }
.trx .v5-plain{ margin: 0px -20px; padding: 0px 20px; background: rgb(255, 255, 255); border-top: 1px solid rgba(12, 14, 18, 0.07); border-bottom: 1px solid rgba(12, 14, 18, 0.07); }
.trx .v5-plain .v5-dayh{ margin: 0px -20px; padding: 12px 20px 8px; background: rgb(250, 246, 248); border-bottom: 1px solid rgba(12, 14, 18, 0.06); }
.trx .v5-plain .v5-dayh:not(:first-child){ border-top: 1px solid rgba(12, 14, 18, 0.06); }
.trx .v5-plain .trh-wo--row{ margin: 0px -20px; padding-left: 20px; padding-right: 20px; width: calc(100% + 40px); border-radius: 0px; }
.trx .v5-plain .trh-wo--row + .trh-wo--row{ border-top: 1px solid rgba(12, 14, 18, 0.07); }
.trx .v5-field--note{ margin-top: 12px; }
.trx .v5-field--note input{ box-shadow: none; background: rgb(246, 242, 244); font-weight: 500; }
.trx .v5-field--note input:focus{ background: rgb(255, 255, 255); box-shadow: inset 0 0 0 1.5px var(--brand-strong); }
.trx .v5-sheet.v5-add2{ min-height: 0px; background: rgb(255, 255, 255); }
.trx .v5-add2 .v5-sheet__h{ margin-bottom: 16px; }
.trx .v5-add2 .v5-sheet__h h2{ font-size: 26px; letter-spacing: -0.8px; }
.trx .v5-cards{ display: flex; gap: 10px; margin: 0px -20px; padding: 4px 20px 6px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x; scroll-padding: 0px 20px; }
.trx .v5-cards::-webkit-scrollbar{ display: none; }
.trx .v5-card{ position: relative; flex: 0 0 auto; width: 108px; height: 138px; padding: 0px; border: 0px; border-radius: 18px; overflow: hidden; background: rgb(239, 231, 234); cursor: pointer; scroll-snap-align: start; font-family: inherit; text-align: left; color: rgb(255, 255, 255); transition: transform 0.15s; }
.trx .v5-card:active{ transform: scale(0.97); }
.trx .v5-card img{ position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; }
.trx .v5-card::after{ content: ""; position: absolute; inset: 0px; background: linear-gradient(rgba(29, 2, 12, 0) 42%, rgba(29, 2, 12, 0.62) 100%); }
.trx .v5-card__b{ position: absolute; left: 10px; right: 8px; bottom: 9px; z-index: 2; display: flex; flex-direction: column; gap: 1px; }
.trx .v5-card__b b{ font-size: 14.5px; font-weight: 600; letter-spacing: -0.2px; line-height: 1.15; text-shadow: rgba(29, 2, 12, 0.35) 0px 1px 8px; }
.trx .v5-card__b small{ font-size: 11.5px; font-weight: 500; color: rgba(255, 255, 255, 0.82); }
.trx .v5-card.on{ box-shadow: 0 0 0 2.5px #fff,0 0 0 4.5px var(--brand-strong); }
.trx .v5-card.on::before{ content: ""; position: absolute; right: 8px; top: 8px; z-index: 3; width: 22px; height: 22px; border-radius: 50%; background: var(--positive) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d020c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center/13px no-repeat; }
.trx .v5-cards .v5-card:first-child.on{ margin-left: 2px; }
.trx .v5-card.is-own::after{ background: rgba(29, 2, 12, 0.18); }
.trx .v5-card__plus{ position: absolute; left: 50%; top: 40%; z-index: 2; transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); display: grid; place-items: center; color: var(--brand-strong); }
.trx .v5-card__plus svg{ width: 20px; height: 20px; }
.trx .v5-row{ display: flex; align-items: baseline; justify-content: space-between; margin-top: 22px; }
.trx .v5-row > span{ font-size: 15px; font-weight: 600; letter-spacing: -0.2px; color: var(--content-strong); }
.trx .v5-row__v{ display: flex; align-items: baseline; gap: 4px; cursor: text; }
.trx .v5-row__v input{ width: 3.2ch; border: 0px; background: none; padding: 0px; outline: none; text-align: right; font-family: inherit; font-size: 22px; font-weight: 600; letter-spacing: -0.6px; color: var(--content-strong); font-variant-numeric: tabular-nums; }
.trx .v5-row__v input:focus{ color: var(--brand-strong); }
.trx .v5-row__v em{ font-style: normal; font-size: 14px; font-weight: 500; color: var(--trh-meta); }
.trx .v5-row__v--time input{ width: 5ch; font-size: 16px; letter-spacing: -0.2px; text-align: left; }
.trx .v5-ruler{ position: relative; height: 58px; margin: 8px -20px 0px; overflow: hidden; mask-image: linear-gradient(90deg, transparent 0px, rgb(0, 0, 0) 22%, rgb(0, 0, 0) 78%, transparent 100%); }
.trx .v5-ruler.is-live{ overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; cursor: grab; }
.trx .v5-ruler.is-live::-webkit-scrollbar{ display: none; }
.trx .v5-ruler.is-live .v5-ruler__track{ transform: none !important; }
.trx .v5-ruler__track{ display: flex; align-items: flex-start; height: 100%; }
.trx .v5-ruler__track b{ flex: 0 0 auto; width: calc(50% - 6px); }
.trx .v5-ruler__track i{ position: relative; flex: 0 0 auto; width: 12px; height: 100%; scroll-snap-align: center; }
.trx .v5-ruler__track i::before{ content: ""; position: absolute; left: 5.5px; top: 6px; width: 1px; height: 12px; background: rgba(12, 14, 18, 0.2); }
.trx .v5-ruler__track i.maj::before{ top: 2px; height: 20px; width: 1.5px; left: 5.25px; background: rgba(12, 14, 18, 0.42); }
.trx .v5-ruler__track i.maj::after{ content: attr(data-l); position: absolute; left: 50%; top: 30px; transform: translateX(-50%); font-size: 11.5px; font-weight: 500; color: var(--trh-meta); font-variant-numeric: tabular-nums; }
.trx .v5-ruler__mark{ position: absolute; left: calc(50% - 1.5px); top: 0px; width: 3px; height: 26px; border-radius: 2px; background: var(--brand-strong); pointer-events: none; }
.trx .v5-days{ display: flex; gap: 6px; margin: 10px -20px 0px; padding: 0px 20px; overflow-x: auto; scrollbar-width: none; }
.trx .v5-days::-webkit-scrollbar{ display: none; }
.trx .v5-days button{ flex: 0 0 auto; height: 38px; padding: 0px 15px; border: 0px; border-radius: 100px; background: rgb(246, 242, 244); font-family: inherit; font-size: 14px; font-weight: 600; color: var(--content-strong); cursor: pointer; white-space: nowrap; }
.trx .v5-days button.on{ background: var(--brand-strong); color: rgb(255, 255, 255); }
.trx .v5-add2 .v5-field--note{ margin-top: 20px; }
.trx .v5-add2 .v5-field--note input{ box-shadow: none; background: rgb(246, 242, 244); font-weight: 500; font-size: 14.5px; padding: 14px 16px; }
.trx .v5-add2 .v5-field--note input:focus{ background: rgb(255, 255, 255); box-shadow: inset 0 0 0 1.5px var(--brand-strong); }
.trx .v5-add2 .v5-savebar .v5-save{ margin-top: 20px; height: 56px; font-size: 15.5px; }
.trx .v5-rulerw{ position: relative; margin: 8px -20px 0px; }
.trx .v5-rulerw .v5-ruler{ margin: 0px; }
.trx .v5-ruler__track i{ font-style: normal; }
.trx .trh-wo--hero.v5-hero--scene{ min-height: 0px; background: rgb(29, 2, 12); }
.trx .v5-scene{ position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.trx .trh-wo--hero.v5-hero--scene::before{ content: ""; position: absolute; inset: 0px; z-index: 1; background: linear-gradient(90deg, rgba(29, 2, 12, 0.92) 0%, rgba(29, 2, 12, 0.72) 42%, rgba(29, 2, 12, 0.08) 78%), linear-gradient(rgba(29, 2, 12, 0) 45%, rgba(29, 2, 12, 0.9) 80%, rgb(29, 2, 12) 100%); }
.trx .trh-wo--hero.v5-hero--scene > .trh-wo__b,.trx .trh-wo--hero.v5-hero--scene > .trh-wo__foot{ position: relative; z-index: 2; }
.trx .trh-wo--hero.v5-hero--scene .trh-wo__b{ max-width: 62%; padding-bottom: 40px; }
.trx .trh-wo--hero.v5-hero--scene::before{ background: linear-gradient(90deg, rgba(29, 2, 12, 0.9) 0%, rgba(29, 2, 12, 0.6) 36%, rgba(29, 2, 12, 0) 66%), linear-gradient(rgba(29, 2, 12, 0) 50%, rgba(29, 2, 12, 0.85) 80%, rgb(29, 2, 12) 100%); }
.trx .v5-scene{ width: 150%; left: auto; right: -8%; }
.trx .v5-scene{ width: 100%; left: 0px; right: auto; }
.trx .trh-wo--hero.v5-hero--scene::before{ background: linear-gradient(rgba(29, 2, 12, 0.25) 0%, rgba(29, 2, 12, 0) 16%, rgba(29, 2, 12, 0) 34%, rgba(29, 2, 12, 0.62) 56%, rgba(29, 2, 12, 0.93) 76%, rgb(29, 2, 12) 100%); }
.trx .trh-wo--hero.v5-hero--scene .trh-wo__b{ max-width: none; padding-bottom: 0px; padding-top: 0px; }
.trx .trh-wo--hero.v5-hero--scene .trh-wo__title{ margin-top: 190px; }
.trx .trh-wo--hero.v5-hero--scene .trh-chip{ position: absolute; top: 0px; left: 0px; }
.trx{ --v5-act: #5f5e66; --v5-act-bg: #f1f1f3; --v5-act-fg: #3a3a3c; --v5-surface: #f6f6f8; }
.trx .v5-bars button i.a{ background: rgb(220, 220, 224); }
.trx .v5-bars button i.p{ background: rgb(216, 236, 181); }
.trx .v5-bars button.on i.a{ background: var(--v5-act); }
.trx .v5-wsum{ margin-top: 14px; }
.trx .v5-wsum .v5-hsum{ margin: 0px; padding: 0px; background: none; color: var(--content-strong); }
.trx .v5-wsum .v5-hsum__top{ display: flex; align-items: baseline; justify-content: space-between; }
.trx .v5-wsum .v5-hsum__top span{ font-size: 13.5px; color: var(--trh-meta); }
.trx .v5-wsum .v5-hsum__top b{ font-size: 20px; font-weight: 600; letter-spacing: -0.5px; color: var(--content-strong); }
.trx .v5-wsum .v5-hsum__bar{ height: 8px; margin-top: 10px; gap: 3px; background: none; }
.trx .v5-wsum .v5-hsum__bar i{ border-radius: 4px; }
.trx .v5-wsum .v5-hsum__bar.is-empty i{ background: rgba(12, 14, 18, 0.06); }
.trx .v5-wsum .v5-hsum i.p,.trx .v5-wsum .v5-hsum__lg i.p{ background: var(--positive); }
.trx .v5-wsum .v5-hsum i.a,.trx .v5-wsum .v5-hsum__lg i.a{ background: var(--v5-act); }
.trx .v5-wsum .v5-hsum i.a2,.trx .v5-wsum .v5-hsum__lg i.a2{ background: rgb(169, 169, 176); }
.trx .v5-wsum .v5-hsum i.a3,.trx .v5-wsum .v5-hsum__lg i.a3{ background: rgb(220, 220, 224); }
.trx .v5-wsum .v5-hsum__lg{ margin-top: 8px; color: var(--trh-meta); font-size: 12.5px; }
.trx .v5-wsum + .trh-days{ margin-top: 16px; }
.trx .trh-wo--hero.v5-hero--scene .trh-wo__list{ margin-bottom: var(--s3); }
.trx .trh-wo--hero.v5-hero--scene .trh-wo__title{ margin-top: 220px; }
.trx .v5-head--prog{ align-items: flex-start; gap: 12px; }
.trx .v5-head--prog .trh-t2{ margin: 0px; }
.trx .trh-day.is-sel{ background: var(--v5-act-bg) !important; box-shadow: none !important; }
.trx .trh-day.is-sel::after{ content: ""; position: absolute; left: 30%; right: 30%; bottom: -6px; height: 3px; border-radius: 2px; background: var(--brand-strong); }
.trx .trh-day{ position: relative; }
.trx .v5-sheet h2{ font-size: 26px; font-weight: 600; letter-spacing: -0.8px; line-height: 1.15; }
.trx .v5-sheet__h{ align-items: flex-start; }
.trx .v5-sheet__h .v5-x{ margin-top: -1px; width: 36px; height: 36px; }
.trx .v5-sheet .lead{ margin-top: 6px; font-size: 14px; letter-spacing: 0px; }
.trx .v5-field input,.trx .v5-field textarea{ border-radius: 16px; background: var(--v5-surface) !important; box-shadow: none !important; }
.trx .v5-field input:focus,.trx .v5-field textarea:focus{ background: rgb(255, 255, 255) !important; box-shadow: inset 0 0 0 1.5px var(--brand-strong) !important; }
.trx .v5-lbl{ margin-top: 22px; font-size: 15px; font-weight: 600; letter-spacing: -0.1px; text-transform: none; color: var(--content-strong); }
.trx .v5-sheet .trh-btn,.trx .v5-savebar .trh-btn{ box-shadow: none !important; }
.trx .v5-savebar .trh-btn--soft.v5-save{ background: var(--v5-surface); }
.trx .v5-attach{ background: var(--v5-surface) !important; }
.trx .v5-link,.trx .v5-daysel button,.trx .trh-hero__aux button,.trx .v5-hide button,.trx .v5-hidden-row button{ font-weight: 600; text-decoration: none !important; color: var(--brand-strong) !important; }
.trx .trh-wo--hero .trh-hero__aux button{ color: rgba(255, 255, 255, 0.78) !important; }
.trx .v5-stats > div{ background: none !important; padding: 4px 0px !important; }
.trx .v5-stats > div + div{ border-left: 1px solid rgba(12, 14, 18, 0.08); }
.trx .v5-stats b{ font-size: 26px !important; letter-spacing: -0.8px; }
.trx .v5-stats span{ font-size: 12.5px !important; }
.trx .v5-plain .v5-dayh{ background: none !important; border: 0px !important; padding: 18px 20px 6px !important; }
.trx .v5-plain .v5-dayh b{ font-size: 13px; letter-spacing: 0.02em; }
.trx .v5-plain .trh-wo--row + .trh-wo--row{ border-top: 0px; }
.trx .v5-plain .trh-wo--row{ position: relative; }
.trx .v5-plain .trh-wo--row + .trh-wo--row::before{ content: ""; position: absolute; left: 84px; right: 0px; top: 0px; height: 1px; background: rgba(12, 14, 18, 0.07); }
.trx .v5-plist{ border-bottom: 1px solid rgba(12, 14, 18, 0.07); }
.trx .v5-card.on{ box-shadow: none; outline: 2.5px solid var(--brand-strong); outline-offset: 3px; }
.trx .v5-cards{ padding: 6px 20px 8px; scroll-padding: 0px 20px; }
.trx .v5-ruler__mark{ width: 4px; left: calc(50% - 2px); height: 32px; top: -3px; }
.trx .v5-ruler__track i.maj::after{ display: none; }
.trx .v5-ruler__track i.maj[data-l$="0"]::after{ display: block; }
.trx .v5-row__v--time{ padding: 6px 12px; border-radius: 100px; background: var(--v5-surface); }
.trx .v5-add2 .v5-row{ margin-top: 28px; }
.trx .v5-bars button.cur:not(.on) i.a{ background: rgb(169, 169, 176); }
.trx .v5-bars button.cur:not(.on) i.p{ background: rgb(191, 224, 127); }
.trx .trh-pw__pr span{ white-space: nowrap; }
.trx .trh-wo--hero.v5-hero--scene .trh-chip{ color: rgb(255, 255, 255); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); background: rgba(29, 2, 12, 0.55) !important; }
.trx .trh-wo--hero.v5-hero--scene::before{ background: linear-gradient(rgba(29, 2, 12, 0.35) 0%, rgba(29, 2, 12, 0) 18%, rgba(29, 2, 12, 0) 36%, rgba(29, 2, 12, 0.6) 56%, rgba(29, 2, 12, 0.93) 76%, rgb(29, 2, 12) 100%); }
.trx .v5-offer__ask{ display: block; margin: 14px auto 0px; padding: 6px 0px; border: 0px; background: none; font: 600 14.5px/1.2 var(--font,inherit); cursor: pointer; }
.trx .trh-day.is-sel{ background: rgb(255, 255, 255) !important; box-shadow: inset 0 0 0 1.5px var(--brand-strong) !important; }
.trx .trh-day.is-sel::after{ display: none; }
.trx .v5-days button.on{ background: rgb(29, 2, 12); color: rgb(255, 255, 255); box-shadow: none; }
.trx .v5-field input,.trx .v5-field textarea{ background: rgb(251, 251, 252) !important; box-shadow: rgba(12, 14, 18, 0.07) 0px 0px 0px 1px inset !important; }
.trx .v5-field input:focus,.trx .v5-field textarea:focus{ background: rgb(251, 251, 252) !important; box-shadow: rgb(255, 197, 220) 0px 0px 0px 1.5px inset !important; }
.trx .v5-field--note input,.trx .v5-add2 .v5-field--note input{ background: rgb(251, 251, 252); box-shadow: rgba(12, 14, 18, 0.07) 0px 0px 0px 1px inset; }
.trx .v5-field--note input:focus,.trx .v5-add2 .v5-field--note input:focus{ background: rgb(251, 251, 252); box-shadow: rgb(255, 197, 220) 0px 0px 0px 1.5px inset; }
.trx{ --v5-act: #3d3a40; --v5-act-bg: #f2f0f2; --v5-act-fg: #3d3a40; --v7-tile: #f2f0f2; --v7-ink2: #3d3a40; --v7-lbl: #8e8a8d; --v7-stat: #4a4449; --v7-sel-bg: #f6eef3; --v7-sel-ring: inset 0 0 0 1px rgba(160,80,120,.14); --v7-field: inset 0 0 0 1px rgba(12,14,18,.08); --v7-focus: inset 0 0 0 1.5px #ffc5dc; --v7-sub-bg: #f3f3f5; }
.trx .trh .trh-chip:not(.trh-chip--dark){ height: auto; padding: 0px; background: none; border-radius: 0px; box-shadow: none; gap: 7px; font-size: 13px; font-weight: 500; letter-spacing: -0.05px; color: var(--v7-stat); }
.trx .trh .trh-chip:not(.trh-chip--dark) i{ width: 7px; height: 7px; }
.trx .trh .trh-chip:not(.trh-chip--success):not(.trh-chip--attn):not(.trh-chip--danger):not(.trh-chip--dark){ color: var(--v7-lbl); }
.trx .trh .trh-chip:not(.trh-chip--success):not(.trh-chip--attn):not(.trh-chip--danger):not(.trh-chip--dark) i{ display: none; }
.trx .trh .trh-chip--attn{ --dot: #f0a03c; }
.trx .trh .trh-chip--dark{ font-size: 12px; }
.trx .trh .trh-chip--dark:not(.trh-chip--success):not(.trh-chip--attn):not(.trh-chip--danger) i{ display: none; }
.trx .trh .trh-wo--hero.v5-hero--scene .trh-wo__foot{ background: none; box-shadow: none; padding: 4px 0px 0px; border-radius: 0px; }
.trx .trh .trh-wo--hero.v5-hero--scene .trh-hero__aux{ margin-top: 6px; }
.trx .trh .trh-wo--hero .trh-btn--white{ box-shadow: none; }
.trx .trh .trh-wo--row .trh-wo__media{ width: 48px; height: 48px; border-radius: 14px; background: var(--v7-tile); color: var(--v7-ink2); }
.trx .trh .trh-wo--row .trh-wo__media svg{ width: 21px; height: 21px; }
.trx .trh .trh-wo--row.is-missed .trh-wo__media{ background: var(--v7-tile); color: var(--v7-ink2); }
.trx .trh .trh-wo--row.is-done .trh-wo__media{ background: rgb(238, 245, 228); color: rgb(79, 127, 28); }
.trx .trh .trh-wo--flat .trh-wo__title{ font-size: 15px; }
.trx .trh .trh-wo--flat .trh-wo__act{ width: 36px; height: 36px; background: rgb(255, 255, 255); box-shadow: rgba(12, 14, 18, 0.1) 0px 0px 0px 1px inset; color: var(--content-strong); }
.trx .trh .trh-wo--flat .trh-wo__act svg{ width: 14px; height: 14px; margin-left: 2px; }
.trx .trh .v5-rowchip{ margin-top: 1px; }
.trx .trh .trh-wo--flat .trh-wo__b{ gap: 3px; }
.trx .trh .v5-sub{ margin-top: 22px; padding-bottom: 4px; font-size: 13.5px; font-weight: 600; letter-spacing: -0.1px; text-transform: none; color: var(--v7-lbl); }
.trx .trh .v5-sub b{ font-size: 13px; font-weight: 500; color: var(--v7-lbl); }
.trx .trh .v5-qt{ margin-top: 22px; font-size: 13.5px; font-weight: 600; letter-spacing: -0.1px; color: var(--v7-lbl); }
.trx .trh .v5-wsum .v5-hsum__top span{ color: var(--v7-lbl); }
.trx .trh .v5-wsum .v5-hsum i.a2,.trx .trh .v5-wsum .v5-hsum__lg i.a2{ background: rgb(143, 137, 141); }
.trx .trh .v5-wsum .v5-hsum i.a3,.trx .trh .v5-wsum .v5-hsum__lg i.a3{ background: rgb(205, 200, 203); }
.trx .trh .v5-wsum .v5-hsum__lg i.m{ background: var(--s-attn-dot); }
.trx .trh .v5-wsum .v5-hsum__lg{ gap: 6px 16px; margin-top: 10px; color: var(--v7-stat); }
.trx .trh .v5-wsum .v5-hsum__bar{ height: 6px; }
.trx .trh .v5-wsum .v5-hsum.v5-hsum--empty .v5-hsum__top b{ font-size: 15px; font-weight: 500; letter-spacing: -0.1px; color: var(--v7-lbl); }
.trx .trh .v5-wsum .v5-hsum__bar i{ border-radius: 3px; }
.trx .trh .v5-wsum .v5-hsum__lg i{ width: 7px; height: 7px; }
.trx .trh .trh-day{ background: rgb(243, 243, 245); }
.trx .trh .trh-day.is-today{ background: var(--brand-strong); }
.trx .trh .trh-day.is-sel{ background: var(--v7-sel-bg) !important; box-shadow: var(--v7-sel-ring) !important; }
.trx .trh .trh-day.is-today.is-sel{ background: var(--brand-strong) !important; box-shadow: none !important; }
.trx .trh .v5-daysel{ margin-top: 14px; padding: 6px 0px 0px; background: none; border-radius: 0px; }
.trx .trh .v5-daysel b{ font-size: 15px; font-weight: 600; letter-spacing: -0.2px; }
.trx .trh .trh-days + .trh-wo--flat{ margin-top: 6px; }
.trx .trh .v5-daysel button{ color: var(--content-strong) !important; }
.trx .trh .v5-quick button{ background: var(--v7-tile); font-weight: 500; }
.trx .trh .v5-quick button svg{ color: var(--v7-ink2); }
.trx .trh .v5-quick button.is-add{ background: rgb(255, 255, 255); box-shadow: rgba(12, 14, 18, 0.1) 0px 0px 0px 1px inset; }
.trx .trh .v5-quick button.is-add svg{ color: var(--v7-ink2); }
.trx .trh .v5-qempty{ align-items: center; padding: 4px 0px; background: none; border-radius: 0px; }
.trx .trh .v5-qempty svg{ width: 40px; height: 40px; padding: 10px; box-sizing: border-box; border-radius: 12px; background: var(--v7-tile); color: var(--v7-ink2); }
.trx .trh .v5-head--prog{ flex-direction: column-reverse; align-items: flex-start; gap: 5px; }
.trx .trh .v5-head--prog .trh-chip{ font-size: 13px; }
.trx .trh .v5-coachline{ margin-top: 16px; padding: 14px 0px 0px; border-top: 1px solid var(--trh-line); border-radius: 0px; background: none; }
.trx .trh .v5-coachline img{ width: 40px; height: 40px; box-shadow: none; }
.trx .trh .v5-coachline b{ font-size: 14px; }
.trx .trh .v5-coachline span{ color: var(--trh-meta); }
.trx .trh .v5-coachline__btn{ font-weight: 600; background: var(--v7-tile) !important; color: var(--content-strong) !important; box-shadow: none !important; }
.trx .trh .v5-asked{ color: var(--v7-stat); }
.trx .trh .v5-asked svg{ color: rgb(95, 154, 31); }
.trx .trh .v5-bars button i.a{ background: rgb(228, 224, 227); }
.trx .trh .v5-bars button i.p{ background: rgb(220, 236, 195); }
.trx .trh .v5-bars button.cur:not(.on) i.a{ background: rgb(199, 193, 197); }
.trx .trh .v5-bars button.cur:not(.on) i.p{ background: rgb(195, 224, 138); }
.trx .trh .v5-bars button.on i.a{ background: var(--v5-act); }
.trx .trh .trh-tile__date{ height: auto; padding: 0px; background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; font-size: 12.5px; font-weight: 600; letter-spacing: -0.05px; text-shadow: rgba(12, 4, 10, 0.55) 0px 1px 6px; }
.trx .trh .trh-tile__go{ box-shadow: none; }
.trx .trh .v7-coach__who{ display: flex; align-items: center; gap: 14px; }
.trx .trh .v7-coach__av{ width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: 50% 18%; flex: 0 0 auto; }
.trx .trh .v7-coach__b{ min-width: 0px; flex: 1 1 0%; }
.trx .trh .v7-coach__b small{ display: block; font-size: 12.5px; font-weight: 500; color: var(--v7-lbl); }
.trx .trh .v7-coach__b b{ display: block; margin-top: 1px; font-size: 17px; font-weight: 600; letter-spacing: -0.3px; }
.trx .trh .v7-coach__b span{ display: block; margin-top: 2px; font-size: 13px; color: var(--trh-meta); }
.trx .trh .v7-coach__cta{ display: flex; gap: 8px; margin-top: 14px; }
.trx .trh .v7-coach__cta .trh-btn{ flex: 1 1 0%; min-height: 44px; height: 44px; font-size: 14px; font-weight: 600; background: var(--v7-tile); justify-content: center; gap: 6px; }
.trx .trh .trh-list .trh-row--todo,.trx .trh .trh-list .v5-todo{ background: none; margin: 0px; padding: var(--s3) 0; width: 100%; border-radius: 0px; border-top: 1px solid rgba(12, 14, 18, 0.05); }
.trx .trh .trh-list .trh-row--todo:first-child{ border-top: 0px; }
.trx .trh .trh-row__ic:not(.v5-thumb){ background: var(--v7-tile); color: var(--v7-ink2); }
.trx .trh .v5-steps li.is-now i{ box-shadow: inset 0 0 0 2px var(--v7-ink2); }
.trx .trh .v5-steps li.is-now i::after{ background: var(--v7-ink2); }
.trx.v7-sub{ background: var(--v7-sub-bg) !important; }
.trx.v7-sub .p-head{ background: rgba(243, 243, 245, 0.88) !important; }
.trx.v7-sub .dhead__btn{ background: rgb(255, 255, 255); }
.trx .trh .v5-hide button{ color: var(--v7-lbl) !important; font-weight: 500 !important; }
.trx .trh .v5-past{ margin-top: 14px; padding: 14px 0px 0px; border-radius: 0px; background: none; border-top: 1px solid var(--trh-line); }
.trx .trh .v5-past b{ font-size: 14px; }
.trx .trh .v5-past svg{ color: var(--v7-lbl); }
.trx .trh .v5-past--ok svg{ color: rgb(95, 154, 31); }
.trx .trh .v5-day__h{ margin-top: 22px; padding: 0px 4px 8px; font-size: 13.5px; font-weight: 600; letter-spacing: -0.1px; text-transform: none; color: var(--v7-lbl); }
.trx .trh .v5-plain{ margin: 0px; padding: 0px 16px 4px; background: rgb(255, 255, 255); border: 0px; border-radius: var(--r-card); box-shadow: var(--trh-sh); }
.trx .trh .v5-plain .v5-dayh{ text-transform: none; letter-spacing: -0.1px; color: var(--v7-lbl); margin: 0px !important; padding: 16px 0px 2px !important; border: 0px !important; background: none !important; }
.trx .trh .v5-plain .v5-dayh:not(:first-child){ margin-top: 6px !important; border-top: 1px solid var(--trh-line) !important; }
.trx .trh .v5-plain .v5-dayh b{ font-size: 13px; font-weight: 600; letter-spacing: 0px; }
.trx .trh .v5-plain .v5-dayh span{ font-size: 13px; color: var(--v7-lbl); }
.trx .trh .v5-plain .trh-wo--row{ margin: 0px; padding-left: 0px; padding-right: 0px; width: 100%; }
.trx .trh .v5-plain .trh-wo--row + .trh-wo--row::before{ left: 60px; }
.trx .trh .v5-times{ background: var(--v7-tile); color: var(--v7-stat); }
.trx .trh .v5-times__list{ background: var(--v7-tile); }
.trx .trh .v5-stats > div + div{ border-left-color: var(--trh-line); }
.trx .trh .gt-soft{ background: var(--v7-tile); color: var(--trh-meta); }
.trx .trh .gt-pz__bars i{ background: rgb(228, 224, 227); }
.trx .trh .gt-pz__bars i.on{ background: var(--v7-ink2); }
.trx .trh .gt-pz__bars i.z{ background: rgb(236, 235, 237); }
.trx .trh .gt-empty span{ background: var(--v7-tile); color: var(--v7-ink2); }
.trx .trh .gt-skel i{ background: linear-gradient(90deg, rgb(239, 237, 239), rgb(247, 246, 247), rgb(239, 237, 239)) 0% 0% / 200% 100%; }
.trx .trh .gt-who{ background: var(--v7-tile); }
.trx .trh .gt-new .was{ background: var(--v7-tile); }
.trx .trh .gt-chk{ border-top-color: var(--trh-line); }
.trx .trh .gt-savebar{ padding-bottom: 30px !important; }
.trx .p-wrap .v5-savebar{ padding-bottom: 30px; }
.trx .trh .v5-x{ background: var(--v7-tile); }
.trx .trh .v5-days button{ font-weight: 500; background: rgb(255, 255, 255) !important; box-shadow: var(--v7-field) !important; color: var(--v7-ink2) !important; }
.trx .trh .v5-days button.on{ font-weight: 600; background: var(--brand-strong) !important; box-shadow: none !important; color: rgb(255, 255, 255) !important; }
.trx .trh .v5-card.on{ outline: rgb(29, 2, 12) solid 2px; outline-offset: 3px; }
.trx .trh .v5-row__v--time{ background: var(--v7-tile); }
.trx .trh .v5-field input,.trx .trh .v5-field textarea{ background: rgb(255, 255, 255) !important; box-shadow: var(--v7-field) !important; }
.trx .trh .v5-field input:focus,.trx .trh .v5-field textarea:focus{ background: rgb(255, 255, 255) !important; box-shadow: var(--v7-focus) !important; }
.trx .trh .v5-row__v input:focus{ color: var(--content-strong); }
.trx .trh .v5-sheet .v5-attach:not(.v5-attach--plan){ padding: 0px 2px; margin-top: 12px; background: none !important; }
.trx .trh .v5-attach--plan{ color: var(--content-strong); background: var(--v7-tile) !important; }
.trx .trh .v5-attach--plan button{ background: rgb(255, 255, 255); color: var(--content-strong); }
.trx .trh .v5-savebar .trh-btn--soft.v5-save{ background: var(--v7-tile); }
.trx .trh .v5-save[disabled]{ opacity: 1; background: rgb(209, 209, 214) !important; color: rgb(255, 255, 255) !important; box-shadow: none !important; }
@keyframes trx-v5flash { 
  0% { background-color: rgba(12, 14, 18, 0.07); }
  100% { background-color: transparent; }
}
.trx .trh .trh-pw__ex.v5-ex{ grid-template-columns: minmax(0px, 1fr) auto auto; gap: 12px; }
.trx .trh .v5-ex .trh-pw__first{ width: auto; }
.trx .trh .v5-ex .trh-pw__first:empty{ display: none; }
.trx .trh .v5-ex:has(.trh-pw__first:empty){ grid-template-columns: minmax(0px, 1fr) auto; }
.trx .trh .v5-banner__b small{ padding: 0px; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; border-radius: 0px; font-size: 12.5px; font-weight: 500; color: rgba(255, 255, 255, 0.82); }
.trx .trh .v5-banner__b small i{ display: none; }
.trx .trh .v5-banner{ box-shadow: rgba(20, 4, 12, 0.1) 0px 8px 24px; }
.trx .trh .v5-banner__go{ box-shadow: none; }
.trx .trh .trh-list .trh-row{ row-gap: 6px; align-items: start; }
.trx .trh .trh-list .trh-row > .trh-row__ic,.trx .trh .trh-list .trh-row > .trh-row__go{ align-self: center; }
.trx .trh .trh-list .trh-row:has(> .trh-chip) > .trh-row__ic{ grid-row: 1 / 3; align-self: start; }
.trx .trh .trh-list .trh-row > .trh-chip{ min-height: 0px; padding: 0px; }
.trx .trh .v7-pdesc{ max-width: none; margin: 4px 0px 0px; font-size: 14px; line-height: 1.45; color: var(--trh-meta); }
.trx .trh .v7-coach__new{ display: flex; align-items: center; gap: 7px; margin-top: 12px; font-size: 13px; font-weight: 500; color: var(--v7-stat); }
.trx .trh .v7-coach__new i{ width: 7px; height: 7px; border-radius: 50%; background: rgb(255, 59, 48); flex: 0 0 auto; }
.trx .trh .v7-tnote{ margin: 12px 2px 0px; font-size: 13px; line-height: 1.45; color: var(--v7-lbl); }
.trx .trh .trh-wo--row .v7-rep{ color: rgba(12, 14, 18, 0.38); }
.trx .trh .trh-wo--row .v7-rep svg{ width: 18px; height: 18px; }
.trx{ position: relative; overflow: hidden; border-radius: 31px; font-family: Geist, -apple-system, sans-serif; display: block !important; width: 390px !important; height: 780px !important; min-height: 0px !important; padding: 0px !important; background: rgb(255, 255, 255) !important; }
.trx .p-screen{ padding: 0px 20px 96px; display: block !important; height: auto !important; position: static !important; }
.trx .p-head{ position: sticky; top: 0px; z-index: 5; background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); padding-top: 6px; }
.trx .p-over{ position: absolute; inset: 0px; z-index: 20; display: flex; flex-direction: column; justify-content: flex-end; }
.trx .p-over[hidden]{ display: none; }
.trx .p-scrim{ position: absolute; inset: 0px; background: rgba(29, 2, 12, 0.42); animation: 0.2s ease-out 0s 1 normal none running trx-pfade; }
.trx .p-wrap{ position: relative; max-height: 92%; overflow-y: auto; border-radius: 26px 26px 0px 0px; animation: 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) 0s 1 normal none running trx-pup; scrollbar-width: none; }
.trx .p-wrap::-webkit-scrollbar{ display: none; }
.trx .p-wrap .v5-sheet{ box-shadow: none; margin: 0px !important; min-height: 0px !important; padding-bottom: 0px !important; }
.trx .p-wrap .v5-savebar{ position: sticky; bottom: 0px; margin: 14px -20px 0px; padding: 12px 20px 18px; background: linear-gradient(rgba(255, 255, 255, 0), rgb(255, 255, 255) 30%); }
.trx .p-wrap .v5-save{ margin-top: 0px !important; }
.trx .p-toast{ position: absolute; left: 12px; right: 12px; bottom: 14px; z-index: 30; display: flex; align-items: center; gap: 10px; padding: 12px 10px 12px 14px; border-radius: 18px; background: rgb(29, 2, 12); color: rgb(255, 255, 255); font-size: 13.5px; line-height: 1.35; box-shadow: rgba(20, 4, 12, 0.38) 0px 14px 34px; overflow: hidden; animation: 0.25s cubic-bezier(0.2, 0.8, 0.2, 1) 0s 1 normal none running trx-pup; }
.trx .p-toast__bar{ position: absolute; left: 0px; bottom: 0px; height: 3px; width: 100%; background: rgb(163, 213, 70); transform-origin: left center; animation: auto linear 0s 1 normal forwards running trx-pbar; }
@keyframes trx-pbar { 
  100% { transform: scaleX(0); }
}
.trx .p-toast .p-undo{ display: flex; align-items: center; gap: 8px; padding: 9px 12px 9px 14px; background: rgb(255, 255, 255); color: rgb(29, 2, 12); font-weight: 600; }
.trx .p-toast .p-undo em{ font-style: normal; font-variant-numeric: tabular-nums; min-width: 2ch; text-align: right; color: rgba(29, 2, 12, 0.5); }
.trx .p-toast.is-info svg{ color: rgba(255, 255, 255, 0.72); }
.trx .p-toast[hidden]{ display: none; }
.trx .p-over:not([hidden]) ~ .p-toast{ bottom: auto; top: 14px; }
.trx .p-toast span{ flex: 1 1 0%; }
.trx .p-toast svg{ width: 18px; height: 18px; flex: 0 0 auto; color: rgb(163, 213, 70); }
.trx .p-toast button{ flex: 0 0 auto; border: 0px; border-radius: 100px; padding: 8px 12px; background: rgba(255, 255, 255, 0.14); color: rgb(255, 255, 255); font: 600 13px / 1 Geist, sans-serif; cursor: pointer; }
@keyframes trx-pup { 
  0% { transform: translateY(24px); opacity: 0; }
}
@keyframes trx-pfade { 
  0% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce){
.trx *{ animation: auto ease 0s 1 normal none running none !important; transition: none !important; }
}
.trx{ width: auto !important; height: auto !important; border-radius: 0px !important; background: transparent !important; }
.trx .p-screen{ padding-bottom: 118px; }
.trx .p-toast{ bottom: 122px; }
.trx .p-head{ background: rgba(255, 255, 255, 0.86); }
.trx .gt-savebar{ padding-bottom: 72px !important; }
.trx .gt-aux{ display: flex; gap: 18px; justify-content: center; }
.trx .gt-hprog{ margin-top: 14px; padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, 0.12); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.trx .gt-hprog div{ display: flex; justify-content: space-between; font-size: 13px; color: rgba(255, 255, 255, 0.78); }
.trx .gt-hprog b{ color: rgb(255, 255, 255); }
.trx .gt-hprog i{ display: block; height: 5px; border-radius: 5px; background: rgba(255, 255, 255, 0.22); margin-top: 8px; overflow: hidden; }
.trx .gt-hprog i b{ display: block; height: 100%; background: rgb(255, 255, 255); border-radius: 5px; }
.trx .gt-lock .gt-row span{ font-size: 13px; color: rgb(142, 138, 141); }
.trx .gt-lock .gt-hmiss{ margin-top: 14px; padding-top: 14px; box-shadow: rgba(12, 14, 18, 0.06) 0px 1px 0px inset; }
.trx .gt-lock .gt-hmiss > span{ background: rgb(242, 240, 242); color: rgb(61, 58, 64); }
.trx .gt-lock .gt-hmiss small{ display: block; font-size: 12.5px; color: rgb(142, 138, 141); }
.trx .gt-lock .gt-hmiss b{ display: block; font-size: 15px; font-weight: 600; color: rgb(29, 2, 12); margin-top: 1px; }
.trx .gt-lock .gt-hmiss p{ margin: 2px 0px 0px; font-size: 13px; color: rgba(29, 2, 12, 0.6); }
.trx .gt-card{ background: rgb(255, 255, 255); border-radius: var(--r-card,24px); padding: 18px 16px; box-shadow: rgba(29, 2, 12, 0.04) 0px 1px 0px; }
.trx .gt-h3{ font-size: 17px; font-weight: 600; letter-spacing: -0.3px; color: rgb(29, 2, 12); margin: 0px; }
.trx .gt-p{ font-size: 14px; line-height: 1.45; color: rgba(29, 2, 12, 0.62); margin: 6px 0px 0px; }
.trx .gt-days{ display: flex; gap: 6px; margin-top: 14px; }
.trx .gt-days span{ flex: 1 1 0%; height: 38px; border-radius: 100px; display: grid; place-items: center; font-size: 13px; font-weight: 600; background: rgb(243, 243, 245); color: rgba(29, 2, 12, 0.55); }
.trx .gt-days span.on{ background: rgb(29, 2, 12); color: rgb(255, 255, 255); }
.trx .gt-ok{ display: flex; gap: 8px; align-items: center; margin-top: 14px; font-size: 13px; color: rgba(29, 2, 12, 0.6); }
.trx .gt-ok svg{ width: 16px; height: 16px; color: rgb(106, 161, 42); flex: 0 0 auto; }
.trx .gt-row{ display: flex; justify-content: space-between; align-items: baseline; }
.trx .gt-row button{ border: 0px; background: none; font: 500 14px / 1 Geist, sans-serif; color: rgba(29, 2, 12, 0.55); cursor: pointer; }
.trx .gt-pick{ display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 14px; }
.trx .gt-pick button{ height: 62px; border: 0px; border-radius: 100px; background: rgb(243, 243, 245); color: rgb(29, 2, 12); font: 600 13px / 1 Geist, sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; cursor: pointer; }
.trx .gt-pick button i{ width: 22px; height: 22px; border-radius: 50%; border: 1.6px solid rgba(29, 2, 12, 0.25); display: grid; place-items: center; }
.trx .gt-pick button.on{ background: rgb(29, 2, 12); color: rgb(255, 255, 255); }
.trx .gt-pick button.on i{ background: rgb(29, 2, 12); border-color: rgb(29, 2, 12); color: rgb(255, 255, 255); }
.trx .gt-pick svg{ width: 13px; height: 13px; }
.trx .gt-any{ display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding: 13px 16px; border-radius: 18px; background: rgb(243, 243, 245); font-size: 15px; color: rgb(29, 2, 12); cursor: pointer; }
.trx .gt-any i{ width: 24px; height: 24px; border-radius: 50%; border: 1.6px solid rgba(29, 2, 12, 0.25); display: grid; place-items: center; }
.trx .gt-any.on{ background: rgb(246, 238, 243); box-shadow: rgba(160, 80, 120, 0.14) 0px 0px 0px 1px inset; }
.trx .gt-any.on i{ background: rgb(29, 2, 12); border-color: rgb(29, 2, 12); color: rgb(255, 255, 255); }
.trx .gt-any svg{ width: 14px; height: 14px; }
.trx .gt-skel i{ display: block; border-radius: 14px; background: linear-gradient(90deg, rgb(241, 241, 243), rgb(248, 248, 249), rgb(241, 241, 243)) 0% 0% / 200% 100%; animation: 1.2s linear 0s infinite normal none running trx-gtsk; }
@keyframes trx-gtsk { 
  100% { background-position: -200% 0px; }
}
.trx .gt-empty{ text-align: center; padding: 8px 6px 4px; }
.trx .gt-empty span{ width: 48px; height: 48px; border-radius: 16px; background: rgb(243, 243, 245); display: grid; place-items: center; margin: 0px auto 12px; color: rgb(29, 2, 12); }
.trx .gt-empty span svg{ width: 22px; height: 22px; }
.trx .gt-empty b{ display: block; font-size: 16px; font-weight: 600; color: rgb(29, 2, 12); letter-spacing: -0.2px; }
.trx .gt-empty p{ font-size: 13.5px; line-height: 1.45; color: rgba(29, 2, 12, 0.6); margin: 6px 0px 14px; }
.trx .gt-empty .trh-btn{ width: 100%; }
.trx .gt-pz{ display: flex; gap: 14px; align-items: flex-end; margin-top: 10px; }
.trx .gt-pz b{ font-size: 30px; font-weight: 600; letter-spacing: -1px; color: rgb(29, 2, 12); }
.trx .gt-pz small{ display: block; font-size: 12.5px; color: rgba(29, 2, 12, 0.55); }
.trx .gt-pz__bars{ flex: 1 1 0%; display: flex; align-items: flex-end; gap: 8px; height: 64px; justify-content: flex-end; }
.trx .gt-pz__bars i{ width: 26px; border-radius: 7px; background: rgb(220, 220, 224); }
.trx .gt-pz__bars i.on{ background: rgb(29, 2, 12); }
.trx .gt-pz__bars i.z{ background: rgb(230, 230, 234); height: 4px !important; }
.trx .gt-soft{ margin-top: 14px; padding: 12px 14px; border-radius: 16px; background: rgb(243, 243, 245); font-size: 13.5px; line-height: 1.45; color: rgba(29, 2, 12, 0.72); }
.trx .gt-new{ display: flex; align-items: center; justify-content: center; gap: 10px; margin: 6px 0px 16px; }
.trx .gt-new img{ width: 64px; height: 64px; border-radius: 50%; object-fit: cover; box-shadow: rgb(255, 255, 255) 0px 0px 0px 3px, rgba(29, 2, 12, 0.18) 0px 6px 18px; }
.trx .gt-new .was{ width: 44px; height: 44px; border-radius: 50%; background: rgb(241, 241, 243); display: grid; place-items: center; font-weight: 600; color: rgba(29, 2, 12, 0.45); }
.trx .gt-new svg{ width: 18px; height: 18px; color: rgba(29, 2, 12, 0.35); }
.trx .gt-who{ display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: 18px; background: rgb(243, 243, 245); margin-top: 12px; }
.trx .gt-who img{ width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.trx .gt-who b{ display: block; font-size: 16px; color: rgb(29, 2, 12); }
.trx .gt-who small{ display: block; font-size: 13px; color: rgba(29, 2, 12, 0.6); margin-top: 2px; }
.trx .gt-chk{ display: flex; gap: 10px; padding: 12px 2px; border-top: 1px solid rgb(236, 236, 239); font-size: 14px; line-height: 1.4; color: rgba(29, 2, 12, 0.62); }
.trx .gt-chk:first-of-type{ border-top: 0px; }
.trx .gt-chk svg{ width: 18px; height: 18px; color: rgb(106, 161, 42); flex: 0 0 auto; margin-top: 1px; }
.trx .gt-chk b{ color: rgb(29, 2, 12); font-weight: 600; }
.trx .gt-lead{ text-align: center; font-size: 14px; line-height: 1.45; color: rgba(29, 2, 12, 0.6); margin: 6px 8px 0px; }
.trx .gt-hmiss{ display: flex; gap: 12px; align-items: center; }
.trx .gt-hmiss > span{ width: 44px; height: 44px; border-radius: 14px; background: rgb(255, 243, 226); color: rgb(199, 119, 0); display: grid; place-items: center; flex: 0 0 auto; }
.trx .gt-hmiss > span svg{ width: 20px; height: 20px; }

/* ---- src/styles/40-training.css ---- */
/* СГЕНЕРИРОВАНО design-preview/miniapp-v3-dev/tools/extract_css.js из прототипа nav-v2
   (состояния: training.js). Правила взяты в порядке каскада прототипа; не правьте
   руками — поправка поверх живёт в файлах стилей с бОльшим номером. */
.sbi svg{ width: 34px; height: 12px; display: block; opacity: 0.9; }
.gt-l{ position: absolute; inset: 0px; z-index: 35; display: none; background: rgb(243, 243, 245); color: rgb(17, 17, 17); font-family: inherit; overflow: hidden; border-radius: inherit; }
.gt-l.on{ display: block; animation: 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) 0s 1 normal none running trg-gtin; }
@keyframes trg-gtin { 
  0% { transform: translateX(24px); opacity: 0.4; }
}
.gt-sb{ left: 0px; right: 0px; top: 0px; z-index: 6; height: 62px; display: flex; align-items: flex-end; justify-content: space-between; padding: 0px 28px 10px; font-size: 15px; font-weight: 600; letter-spacing: -0.3px; pointer-events: none; background: linear-gradient(rgb(243, 243, 245) 0px, rgb(243, 243, 245) 54px, rgba(243, 243, 245, 0) 62px); position: absolute !important; }
.gt-scr{ position: absolute; inset: 0px; overflow: hidden auto; padding-top: 54px; scrollbar-width: none; }
.gt-scr::-webkit-scrollbar{ display: none; }
.gt-foot{ position: absolute; left: 0px; right: 0px; bottom: 0px; z-index: 5; padding: 14px 16px 30px; background: linear-gradient(rgba(243, 243, 245, 0), rgb(243, 243, 245) 34%); }
.gt-foot__in{ display: flex; gap: 10px; }
.gt-foot__2 > .gt-btn{ flex: 1 1 0%; }
.gt-hi{ position: absolute; z-index: 7; bottom: 9px; left: 50%; transform: translateX(-50%); width: 134px; height: 5px; border-radius: 9px; background: rgba(0, 0, 0, 0.85); }
.gt-pad{ padding: 0px 16px; }
.gt-nav{ display: flex; align-items: center; gap: 10px; padding: 6px 16px 10px; }
.gt-nav__t{ flex: 1 1 0%; text-align: center; font-size: 15.5px; font-weight: 600; letter-spacing: -0.3px; line-height: 1.2; min-width: 0px; }
.gt-nav__t small{ display: block; font-size: 12.5px; font-weight: 400; color: rgb(142, 142, 147); margin-top: 2px; letter-spacing: 0px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gt-rb{ width: 42px; height: 42px; flex: 0 0 auto; border-radius: 50%; border: 0px; background: rgb(255, 255, 255); color: rgb(17, 17, 17); display: grid; place-items: center; cursor: pointer; box-shadow: rgba(0, 0, 0, 0.03) 0px 1px 0px; }
.gt-rb svg{ width: 20px; height: 20px; }
.gt-rb--none{ background: none; box-shadow: none; }
.gt-rb--s{ width: 30px; height: 30px; font-weight: 600; font-size: 14px; }
.gt-rb--glass{ background: rgba(255, 255, 255, 0.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.gt-btn{ flex: 1 1 auto; width: 100%; height: 54px; border: 0px; border-radius: 100px; background: rgb(16, 16, 20); color: rgb(255, 255, 255); font-family: inherit; font-size: 16px; font-weight: 600; letter-spacing: -0.3px; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; box-shadow: rgba(16, 16, 20, 0.2) 0px 12px 26px; }
.gt-btn svg{ width: 18px; height: 18px; }
.gt-btn[disabled]{ background: rgb(199, 199, 204); box-shadow: none; cursor: default; }
.gt-btn.is-wait[disabled]{ background: rgb(58, 58, 60); color: rgba(255, 255, 255, 0.75); }
.gt-card .gt-btn--soft{ background: rgb(243, 243, 245); }
.gt-btn--soft{ background: rgb(255, 255, 255); color: rgb(17, 17, 17); box-shadow: none; height: 50px; font-size: 15px; }
.gt-btn--white{ background: rgb(255, 255, 255); color: rgb(17, 17, 17); box-shadow: rgba(0, 0, 0, 0.06) 0px 6px 18px; }
.gt-btn--danger{ color: rgb(215, 55, 47); }
.gt-grp{ margin-top: 18px; }
.gt-h{ padding: 0px 18px 9px; font-size: 14.5px; font-weight: 600; letter-spacing: -0.15px; color: rgb(142, 142, 147); }
.gt-card{ background: rgb(255, 255, 255); border-radius: 26px; overflow: hidden; }
.gt-note{ padding: 9px 18px 0px; font-size: 13px; line-height: 1.45; color: rgb(142, 142, 147); }
.gt-note--c{ text-align: center; }
.gt-dot{ display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: rgb(58, 58, 60); white-space: nowrap; }
.gt-dot i{ width: 7px; height: 7px; border-radius: 50%; background: rgb(142, 142, 147); }
.gt-dot--ok i{ background: rgb(52, 199, 89); }
.gt-dot--attn i{ background: rgb(255, 159, 10); }
.gt-dot--wait i{ background: rgb(28, 28, 30); }
.gt-dot--mute{ color: rgb(142, 142, 147); }
.gt-dot--mute i{ background: rgb(199, 199, 204); }
.gt-empty{ text-align: center; padding: 26px 20px 20px; }
.gt-empty > span{ width: 52px; height: 52px; border-radius: 18px; background: rgb(243, 243, 245); display: grid; place-items: center; margin: 0px auto 12px; }
.gt-empty > span svg{ width: 24px; height: 24px; }
.gt-empty b{ display: block; font-size: 17px; font-weight: 600; letter-spacing: -0.3px; }
.gt-empty p{ font-size: 14px; line-height: 1.45; color: rgb(110, 110, 115); margin: 6px 0px 16px; }
.gt-skel i{ display: block; margin-top: 12px; border-radius: 22px; background: linear-gradient(90deg, rgb(233, 233, 237), rgb(246, 246, 248), rgb(233, 233, 237)) 0% 0% / 200% 100%; animation: 1.2s linear 0s infinite normal none running trg-gtsk; }
@keyframes trg-gtsk { 
  100% { background-position: -200% 0px; }
}
.gt-float{ position: absolute; left: 0px; right: 0px; top: 54px; z-index: 4; display: flex; justify-content: space-between; align-items: center; padding: 14px 28px 0px; pointer-events: none; }
.gt-float > *{ pointer-events: auto; }
.gc-cover__tag{ position: absolute; left: 14px; bottom: 14px; display: flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 100px; background: rgba(16, 16, 20, 0.62); color: rgb(255, 255, 255); font-size: 13px; font-weight: 600; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.gc-cover__tag svg{ width: 13px; height: 13px; }
.gc-t{ padding: 18px 4px 2px; }
.gc-t small{ font-size: 13px; color: rgb(142, 142, 147); }
.gc-t h1{ font-size: 28px; line-height: 1.1; font-weight: 600; letter-spacing: -0.9px; margin: 4px 0px 0px; }
.gc-t p{ font-size: 15px; line-height: 1.45; color: rgb(110, 110, 115); margin: 8px 0px 0px; }
.gc-stats{ display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 16px; background: rgb(255, 255, 255); border-radius: 26px; padding: 14px 4px; }
.gc-stats > div{ text-align: center; border-left: 1px solid rgb(236, 236, 239); }
.gc-stats > div:first-child{ border-left: 0px; }
.gc-stats span{ display: block; color: rgb(142, 142, 147); }
.gc-stats svg{ width: 18px; height: 18px; }
.gc-stats b{ display: block; font-size: 17px; font-weight: 600; letter-spacing: -0.3px; margin-top: 4px; }
.gc-stats small{ font-size: 12px; color: rgb(142, 142, 147); }
.gc-go{ margin-top: 14px; }
.gc-health{ display: flex; gap: 12px; padding: 16px 18px; }
.gc-health > span{ width: 34px; height: 34px; flex: 0 0 auto; border-radius: 12px; background: rgb(243, 243, 245); display: grid; place-items: center; }
.gc-health svg{ width: 18px; height: 18px; }
.gc-health b{ font-size: 15.5px; font-weight: 600; }
.gc-health p{ font-size: 13.5px; line-height: 1.45; color: rgb(110, 110, 115); margin: 4px 0px 0px; }
.gp-alert{ display: flex; gap: 12px; align-items: flex-start; margin: 12px 0px 4px; padding: 12px 14px; border-radius: 18px; background: rgb(246, 246, 248); }
.gp-alert > span{ flex: 0 0 auto; width: 30px; height: 30px; border-radius: 10px; background: rgb(255, 255, 255); color: rgb(215, 55, 47); display: grid; place-items: center; }
.gp-alert > span svg{ width: 17px; height: 17px; }
.gp-alert b{ display: block; font-size: 14.5px; font-weight: 600; color: rgb(17, 17, 17); }
.gp-alert small{ display: block; font-size: 13px; line-height: 1.4; color: rgb(110, 110, 115); margin-top: 2px; }
.gp-alert > div{ flex: 1 1 0%; }
.gp-alert > button{ align-self: center; border: 0px; border-radius: 100px; background: rgb(17, 17, 17); color: rgb(255, 255, 255); font-family: inherit; padding: 9px 13px; cursor: pointer; }
.gp-alert--info{ background: rgb(255, 255, 255); }
.gp-alert--info > span{ background: rgb(243, 243, 245); color: rgb(17, 17, 17); }
.gt-pad > .gp-alert--info{ margin-top: 12px; }
.gk{ margin-top: 12px; padding: 14px; border-radius: 20px; background: rgb(243, 243, 245); }
.gk--on{ background: rgb(17, 17, 17); color: rgb(255, 255, 255); }
.gk--ok{ background: rgb(238, 248, 240); }
.gk-h{ display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; font-weight: 600; color: rgb(142, 142, 147); }
.gk--on .gk-h{ color: rgba(255, 255, 255, 0.62); }
.gk-h span{ display: flex; align-items: center; gap: 6px; }
.gk-h svg{ width: 16px; height: 16px; }
.gk-h em{ font-style: normal; font-size: 11.5px; padding: 3px 8px; border-radius: 100px; background: rgb(255, 255, 255); color: rgb(58, 58, 60); }
.gk--on .gk-h em{ background: rgba(255, 255, 255, 0.14); color: rgb(255, 255, 255); }
.gk > b{ display: block; font-size: 17px; font-weight: 600; letter-spacing: -0.35px; margin-top: 8px; }
.gk p{ font-size: 13.5px; line-height: 1.42; margin: 4px 0px 0px; color: rgb(110, 110, 115); }
.gk--on p{ color: rgba(255, 255, 255, 0.7); }
.gk-tags{ display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0px 12px; }
.gk-tags i{ font-style: normal; font-size: 12px; padding: 5px 9px; border-radius: 100px; background: rgba(255, 255, 255, 0.12); }
.gk .gt-btn{ height: 48px; font-size: 15px; margin-top: 12px; box-shadow: none; }
.gk--on .gt-btn{ margin-top: 0px; }
.gk-row{ display: flex; gap: 12px; align-items: center; margin-top: 10px; }
.gk-row img{ width: 48px; height: 48px; border-radius: 14px; object-fit: cover; flex: 0 0 auto; }
.gk-row > div{ flex: 1 1 0%; }
.gk-row b{ display: block; font-size: 15px; font-weight: 600; }
.gk-row p{ margin-top: 2px; }
.gq-who{ display: flex; gap: 12px; align-items: center; padding: 14px 16px; }
.gq-who img{ width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.gq-who small{ display: block; font-size: 12.5px; color: rgb(142, 142, 147); }
.gq-who b{ display: block; font-size: 16.5px; font-weight: 600; letter-spacing: -0.3px; }
.gq-who em{ display: block; font-style: normal; font-size: 13px; color: rgb(142, 142, 147); margin-top: 1px; }
.gm-guide{ display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: 18px; background: rgb(246, 246, 248); }
.gm-guide > span{ width: 36px; height: 36px; border-radius: 12px; background: rgb(255, 255, 255); display: grid; place-items: center; }
.gm-guide svg{ width: 18px; height: 18px; }
.gm-guide b{ display: block; font-size: 15px; }
.gm-guide small{ display: block; font-size: 13px; color: rgb(142, 142, 147); }
.gs-hero{ display: flex; gap: 16px; align-items: center; background: rgb(255, 255, 255); border-radius: 26px; padding: 18px; }
.gs-ring{ position: relative; width: 92px; height: 92px; flex: 0 0 auto; }
.gs-ring svg{ width: 100%; height: 100%; transform: rotate(-90deg); }
.gs-ring circle{ fill: none; stroke-width: 6; }
.gs-ring .bg{ stroke: rgb(236, 236, 239); }
.gs-ring .fg{ stroke: rgb(17, 17, 17); stroke-linecap: round; }
.gs-ring b{ position: absolute; left: 0px; right: 0px; top: 27px; text-align: center; font-size: 22px; font-weight: 600; letter-spacing: -0.6px; }
.gs-ring small{ position: absolute; left: 0px; right: 0px; top: 53px; text-align: center; font-size: 11.5px; color: rgb(142, 142, 147); }
.gs-hero__b small{ font-size: 12px; font-weight: 600; color: rgb(142, 142, 147); text-transform: uppercase; letter-spacing: 0.05em; }
.gs-hero__b h1{ font-size: 21px; font-weight: 600; letter-spacing: -0.6px; line-height: 1.15; margin: 4px 0px 0px; }
.gs-hero__b p{ font-size: 13.5px; line-height: 1.42; color: rgb(110, 110, 115); margin: 5px 0px 0px; }
.gs-when{ display: flex; align-items: center; gap: 8px; padding: 12px 6px 0px; font-size: 13.5px; color: rgb(110, 110, 115); }
.gs-when svg{ width: 17px; height: 17px; flex: 0 0 auto; }
.gs-when b{ color: rgb(17, 17, 17); font-weight: 600; }
.gs-stats{ display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 12px; background: rgb(255, 255, 255); border-radius: 26px; overflow: hidden; }
.gs-stats div{ padding: 14px 12px; border-left: 1px solid rgb(236, 236, 239); border-top: 1px solid rgb(236, 236, 239); }
.gs-stats div:nth-child(3n+1){ border-left: 0px; }
.gs-stats div:nth-child(-n+3){ border-top: 0px; }
.gs-stats b{ display: block; font-size: 19px; font-weight: 600; letter-spacing: -0.5px; }
.gs-stats small{ display: block; font-size: 12px; color: rgb(142, 142, 147); margin-top: 1px; }
.gs-ex{ display: flex; gap: 12px; padding: 12px 16px 12px 12px; position: relative; }
.gs-ex + .gs-ex::before{ content: ""; position: absolute; left: 80px; right: 16px; top: 0px; height: 1px; background: rgb(236, 236, 239); }
.gs-ex img{ width: 56px; height: 56px; border-radius: 16px; object-fit: cover; flex: 0 0 auto; }
.gs-ex__b{ flex: 1 1 0%; min-width: 0px; }
.gs-ex__t{ display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.gs-ex__t b{ font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: -0.2px; }
.gs-ex__t .gt-dot{ font-size: 12px; margin-top: 2px; }
.gs-ex__b > span{ display: block; font-size: 13px; color: rgb(110, 110, 115); margin-top: 3px; }
.gs-ex__b > span b{ color: rgb(17, 17, 17); font-weight: 500; }
.gs-ex__b > small{ display: block; font-size: 12.5px; color: rgb(174, 174, 178); margin-top: 1px; }
.gs-ex__b > i{ display: block; height: 4px; border-radius: 4px; background: rgb(236, 236, 239); margin-top: 8px; overflow: hidden; }
.gs-ex__b > i b{ display: block; height: 100%; background: rgb(17, 17, 17); }
.gs-ctl{ display: flex; gap: 12px; align-items: center; padding: 14px 16px; }
.gs-ctl img{ width: 56px; height: 56px; border-radius: 16px; object-fit: cover; }
.gs-ctl b{ display: block; font-size: 15px; font-weight: 600; }
.gs-ctl span{ display: block; margin-top: 3px; }
.gs-ctl small{ display: block; font-size: 12.5px; color: rgb(142, 142, 147); margin-top: 3px; line-height: 1.35; }
.pc-cover{ position: relative; height: 300px; border-radius: 28px; overflow: hidden; background: rgb(241, 241, 243); }
.pc-cover img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-cover--soft{ height: 230px; display: grid; place-items: center; background: rgb(255, 255, 255); }
.pc-cover--soft span{ width: 112px; height: 112px; color: rgb(212, 207, 210); }
.pc-cover--soft svg{ width: 100%; height: 100%; }
.pc-loop{ position: absolute; right: 14px; bottom: 14px; display: flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 100px; background: rgba(255, 255, 255, 0.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 12px; font-weight: 600; color: rgb(58, 58, 60); }
.pc-loop svg{ width: 13px; height: 13px; }
.pc-fr{ display: flex; align-items: center; gap: 8px; }
.pc-fav{ width: 40px; height: 40px; }
.pc-fav svg{ width: 19px; height: 19px; }
.pc-tile{ width: 36px; height: 36px; flex: 0 0 auto; border-radius: 12px; background: rgb(243, 243, 245); color: rgb(61, 58, 64); display: grid; place-items: center; }
.pc-tile svg{ width: 19px; height: 19px; }
.gc-health > span.pc-tile{ width: 36px; height: 36px; background: rgb(243, 243, 245); color: rgb(61, 58, 64); }
.pc-row{ display: flex; align-items: center; gap: 14px; padding: 13px 16px 13px 18px; position: relative; cursor: pointer; }
.pc-row + .pc-row::before{ content: ""; position: absolute; left: 68px; right: 16px; top: 0px; height: 1px; background: rgb(236, 236, 239); }
.pc-row__b{ flex: 1 1 0%; min-width: 0px; }
.pc-row__b b{ display: block; font-size: 16px; font-weight: 500; letter-spacing: -0.2px; }
.pc-row__b small{ display: block; font-size: 13px; line-height: 1.35; color: rgb(142, 142, 147); margin-top: 2px; }
.pc-chev{ color: rgb(199, 199, 204); flex: 0 0 auto; }
.pc-chev svg{ width: 18px; height: 18px; display: block; }
.pc-av{ width: 36px; height: 36px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; flex: 0 0 auto; }
.pc-av--l{ width: 44px; height: 44px; }
.pc-inv{ display: flex; align-items: center; gap: 14px; padding: 11px 18px; position: relative; }
.pc-inv + .pc-inv::before{ content: ""; position: absolute; left: 68px; right: 18px; top: 0px; height: 1px; background: rgb(236, 236, 239); }
.pc-inv b{ font-size: 16px; font-weight: 400; }
.pc-sech{ display: flex; justify-content: space-between; align-items: baseline; }
.pc-sech span{ font-size: 13px; font-weight: 500; color: rgb(174, 174, 178); }
.pc-secnote{ margin: -2px 18px 10px; font-size: 13px; line-height: 1.45; color: rgb(142, 142, 147); }
.pc-ex{ display: flex; align-items: flex-start; gap: 12px; padding: 12px 10px 12px 12px; position: relative; cursor: pointer; }
.pc-ex + .pc-ex::before{ content: ""; position: absolute; left: 96px; right: 14px; top: 0px; height: 1px; background: rgb(236, 236, 239); }
.pc-ex__n{ width: 14px; flex: 0 0 auto; margin-top: 21px; font-size: 12px; font-weight: 600; color: rgb(199, 199, 204); text-align: center; font-variant-numeric: tabular-nums; }
.pc-ex img{ width: 58px; height: 58px; border-radius: 16px; object-fit: cover; flex: 0 0 auto; }
.pc-ex__b{ flex: 1 1 0%; min-width: 0px; padding-top: 2px; }
.pc-ex__b > b{ display: block; font-size: 15.5px; font-weight: 500; letter-spacing: -0.2px; line-height: 1.3; }
.pc-ex__b > small{ display: block; font-size: 13px; color: rgb(142, 142, 147); margin-top: 3px; font-variant-numeric: tabular-nums; }
.pc-ex__i{ flex: 0 0 auto; margin-top: 11px; width: 36px; height: 36px; border: 0px; background: none; color: rgb(174, 174, 178); display: grid; place-items: center; cursor: pointer; padding: 0px; }
.pc-ex__i svg{ width: 21px; height: 21px; }
.pc-tags{ display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 5px; }
.pc-tag{ display: inline-flex; align-items: center; gap: 5px; font-style: normal; font-size: 12.5px; font-weight: 500; color: rgb(110, 106, 109); }
.pc-tag svg{ width: 14px; height: 14px; color: rgb(142, 138, 141); }
.pc-exnote{ display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; padding: 9px 11px; border-radius: 12px; background: rgb(245, 244, 246); font-size: 12.5px; line-height: 1.4; color: rgb(61, 58, 64); }
.pc-exnote img{ margin-top: 1px; width: 18px !important; height: 18px !important; border-radius: 50% !important; }
.pc-stats4{ grid-template-columns: repeat(4, 1fr); }
.pc-stats4 b{ font-size: 16px; }
.pc-ch{ display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 12px; position: relative; }
.pc-ch + .pc-ch::before{ content: ""; position: absolute; left: 82px; right: 16px; top: 0px; height: 1px; background: rgb(236, 236, 239); }
.pc-ch img{ width: 58px; height: 44px; border-radius: 12px; object-fit: cover; flex: 0 0 auto; }
.pc-ch__b{ flex: 1 1 0%; min-width: 0px; }
.pc-ch__b b{ display: block; font-size: 15.5px; font-weight: 500; letter-spacing: -0.2px; }
.pc-ch__b small{ display: block; font-size: 13px; color: rgb(142, 142, 147); margin-top: 2px; font-variant-numeric: tabular-nums; }
.pc-ch em{ width: 32px; height: 32px; border-radius: 50%; background: rgb(255, 255, 255); box-shadow: rgba(12, 14, 18, 0.1) 0px 0px 0px 1px inset; color: rgb(61, 58, 64); display: grid; place-items: center; }
.pc-ch em svg{ width: 12px; height: 12px; margin-left: 2px; }
.pc-zr{ gap: 12px; min-height: 58px; }
.pc-zbar{ width: 96px; height: 6px; border-radius: 6px; background: rgb(236, 236, 239); overflow: hidden; flex: 0 0 auto; }
.pc-zbar i{ display: block; height: 100%; background: rgb(61, 58, 64); border-radius: 6px; }
.gt-l.is-px{ --ink: #0c0e12; --ink66: rgba(12,14,18,.62); --ink40: rgba(12,14,18,.4); --ink26: rgba(12,14,18,.24); --hair: rgba(12,14,18,.07); --soft: #f6f6f8; --pink: #1d020c; --goal: #f3f3f5; --pri: #2c0c17; background: rgb(255, 255, 255); color: var(--ink); }
.gt-l.is-px .gt-sb{ background: rgb(255, 255, 255); }
.gt-l.is-px.is-glow .gt-sb,.gt-l.is-px.is-info .gt-sb,.gt-l.is-px.is-soft .gt-sb{ background: none; }
.gt-l.is-px .gt-scr{ display: flex; flex-direction: column; padding-bottom: 96px; }
.gt-l.is-px .gt-scr > *{ flex-shrink: 0; }
.gt-l.is-px .gt-foot{ background: rgb(255, 255, 255); padding: 10px 20px 30px; }
.gt-l.is-px.is-glow .gt-foot,.gt-l.is-px.is-soft .gt-foot{ background: linear-gradient(rgba(255, 255, 255, 0), rgb(255, 255, 255) 30%); }
.gt-l.is-px.is-soft .gt-foot{ background: linear-gradient(rgba(248, 246, 247, 0), rgb(248, 246, 247) 30%); }
.px-go{ background: var(--pri) !important; box-shadow: rgba(44, 12, 23, 0.55) 0px 10px 24px -12px !important; font-size: 15px !important; font-weight: 500 !important; letter-spacing: 0px !important; height: 52px !important; }
.px-go[disabled]{ opacity: 0.38; background: var(--pri) !important; box-shadow: none !important; }
.px-go.is-wait[disabled]{ opacity: 0.7; }
.px-top{ display: flex; align-items: center; gap: 12px; padding: 8px 14px 0px; }
.px-ic{ width: 38px; height: 38px; flex: 0 0 auto; border-radius: 50%; border: 0px; background: transparent; color: var(--ink); display: grid; place-items: center; cursor: pointer; padding: 0px; }
.px-ic:active{ background: var(--soft); }
.px-ic svg{ width: 22px; height: 22px; }
.px-ttl{ flex: 1 1 0%; min-width: 0px; text-align: center; }
.px-ttl b{ display: block; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.px-ttl small{ display: block; font-size: 11.5px; color: var(--ink40); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.px-segs{ display: flex; gap: 5px; padding: 12px 20px 0px; }
.px-segs i{ flex: 1 1 0%; height: 3px; border-radius: 2px; background: rgb(236, 236, 239); overflow: hidden; }
.px-segs b{ display: block; height: 100%; background: rgb(42, 45, 52); border-radius: 2px; }
.px-segs i.now{ background: rgb(236, 236, 239); }
.px-segs i.now b{ background: var(--pink); }
.px-strip{ display: flex; align-items: center; justify-content: space-between; padding: 10px 20px 8px; font-size: 12.5px; font-weight: 500; color: var(--ink40); font-variant-numeric: tabular-nums; }
.px-clock{ display: inline-flex; align-items: center; gap: 5px; }
.px-clock svg{ width: 13px; height: 13px; }
.px-clock b,.px-prog b{ color: var(--ink66); font-weight: 600; }
.px-vol b{ color: var(--pink); font-weight: 600; }
.px-stage{ position: relative; min-height: 170px; margin: 0px; overflow: hidden; background: rgb(243, 243, 245); flex: 1 1 auto !important; }
.px-stage.is-short{ min-height: 150px; }
.px-stage img{ position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; display: block; }
.px-loop{ position: absolute; right: 14px; top: 12px; display: flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 100px; background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 11px; font-weight: 600; color: rgba(12, 14, 18, 0.55); }
.px-loop svg{ width: 12px; height: 12px; }
.px-info{ padding: 16px 20px 0px; }
.px-sec{ font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink40); }
.px-name{ font-size: 20px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; margin: 3px 0px 4px; }
.px-sub{ font-size: 13px; color: var(--ink40); }
.px-sub b{ color: var(--ink66); font-weight: 500; }
.px-last{ font-size: 12.5px; color: var(--ink40); margin-top: 4px; }
.px-note{ display: flex; gap: 9px; align-items: flex-start; margin-top: 10px; padding: 9px 12px; border-radius: 12px; background: var(--goal); font-size: 13px; line-height: 1.45; color: rgb(58, 58, 60); }
.px-note img{ width: 22px; height: 22px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; flex: 0 0 auto; margin-top: 1px; }
.px-note b{ font-weight: 600; }
.px-ss{ display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.px-ss span{ flex: 1 1 0%; display: flex; align-items: center; gap: 7px; padding: 8px 10px; border-radius: 12px; background: var(--soft); font-size: 12.5px; line-height: 1.25; color: var(--ink40); }
.px-ss span.on{ background: var(--goal); color: rgb(17, 17, 17); font-weight: 500; }
.px-ss span i{ width: 18px; height: 18px; flex: 0 0 auto; border-radius: 50%; background: rgb(255, 255, 255); font-style: normal; font-size: 11px; font-weight: 700; display: grid; place-items: center; color: var(--ink40); }
.px-ss span.on i{ background: var(--pink); color: rgb(255, 255, 255); }
.px-ss em{ color: var(--ink26); }
.px-ss em svg{ width: 14px; height: 14px; }
.px-setline{ display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; padding-top: 4px; border-top: 1px solid var(--hair); min-height: 44px; }
.px-setline > span{ font-size: 14px; font-weight: 600; display: flex; align-items: center; }
.px-side{ display: inline-block; margin-right: 8px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; font-style: normal; }
.px-side--l{ background: rgb(238, 243, 255); color: rgb(47, 85, 200); }
.px-dots{ display: flex; justify-content: flex-end; flex-wrap: wrap; max-width: 60%; }
.px-dot{ width: 30px; height: 36px; display: grid; place-items: center; cursor: pointer; }
.px-dot::before{ content: ""; width: 8px; height: 8px; border-radius: 50%; background: rgb(220, 220, 224); }
.px-dot.done::before{ background: var(--pink); }
.px-dot.cur::before{ background: rgb(255, 255, 255); box-shadow: 0 0 0 2px var(--pink); }
.px-dot.done.cur::before{ background: var(--pink); box-shadow: 0 0 0 2px #fff,0 0 0 4px var(--pink); }
.px-dot.l::before{ border-radius: 2.5px; }
.px-dot.pair{ width: 20px; }
.px-dot.r{ width: 22px; margin-right: 6px; }
.px-ctl{ padding: 4px 20px 0px; }
.px-ctl .gk{ margin-top: 6px; }
.px-pad{ padding: 0px 20px; }
.px-alert{ display: flex; gap: 11px; align-items: flex-start; margin: 10px 0px 2px; padding: 11px 13px; border-radius: 14px; background: rgb(255, 240, 239); }
.px-alert > span{ flex: 0 0 auto; width: 28px; height: 28px; border-radius: 9px; background: rgb(255, 255, 255); color: rgb(194, 74, 68); display: grid; place-items: center; }
.px-alert > span svg{ width: 16px; height: 16px; }
.px-alert b{ display: block; font-size: 14px; font-weight: 600; color: rgb(122, 47, 42); }
.px-alert small{ display: block; font-size: 12.5px; line-height: 1.4; color: rgb(154, 90, 85); margin-top: 2px; }
.px-rows{ padding: 0px 20px; }
.px-row{ display: flex; align-items: center; justify-content: space-between; padding: 12px 0px; border-bottom: 1px solid var(--hair); }
.px-row:first-child{ border-top: 1px solid var(--hair); }
.px-rl{ font-size: 14px; color: var(--ink66); font-weight: 500; }
.px-rl small{ display: block; margin-top: 2px; font-size: 11.5px; font-weight: 400; color: var(--ink40); }
.px-rc{ display: flex; align-items: center; gap: 16px; }
.px-rc button{ width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(12, 14, 18, 0.11); background: rgb(255, 255, 255); color: var(--ink66); display: grid; place-items: center; cursor: pointer; padding: 0px; }
.px-rc button svg{ width: 15px; height: 15px; }
.px-rv{ min-width: 70px; display: inline-flex; align-items: baseline; justify-content: center; gap: 3px; padding-bottom: 4px; border-bottom: 1.5px solid rgb(236, 236, 239); }
.px-rv b{ font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.px-rv i{ font-size: 12px; color: var(--ink26); font-style: normal; }
.px-timer{ padding: 10px 2px 8px; text-align: center; border-top: 1px solid var(--hair); }
.px-timer small{ font-size: 11px; font-weight: 600; letter-spacing: 0.07em; color: var(--ink40); text-transform: uppercase; }
.px-timer b{ display: block; font-size: 44px; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; margin: 2px 0px 12px; color: var(--ink); }
.px-timer b.run{ color: var(--pink); }
.px-tbar{ height: 4px; border-radius: 2px; background: rgb(236, 236, 239); overflow: hidden; }
.px-tbar i{ display: block; height: 100%; background: var(--pink); border-radius: 2px; }
.px-next{ text-align: center; font-size: 12px; font-weight: 500; color: var(--ink26); padding: 10px 20px 0px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.px-foot{ display: flex; align-items: center; gap: 10px; }
.px-nav{ width: 52px; height: 52px; flex: 0 0 auto; border-radius: 50%; border: 1px solid var(--hair); background: rgb(255, 255, 255); color: var(--ink66); display: grid; place-items: center; cursor: pointer; padding: 0px; }
.px-nav svg{ width: 20px; height: 20px; }
.px-nav[disabled]{ opacity: 0.28; }
.px-cd{ position: absolute; inset: 0px; z-index: 8; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: rgba(255, 255, 255, 0.88); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); text-align: center; padding: 0px 44px; }
.px-cd b{ font-size: 128px; font-weight: 600; letter-spacing: -0.04em; line-height: 1; color: var(--pri); font-variant-numeric: tabular-nums; animation: 0.6s cubic-bezier(0.2, 0.8, 0.3, 1) 0s 1 normal none running trg-pxpop; }
@keyframes trg-pxpop { 
  0% { transform: scale(1.25); opacity: 0.2; }
}
.px-cd small{ font-size: 14px; line-height: 1.45; color: var(--ink40); }
.px-cf{ position: absolute; inset: 0px; z-index: 9; display: flex; align-items: center; justify-content: center; padding: 28px; background: rgba(12, 8, 12, 0.34); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.px-cf__c{ width: 100%; max-width: 330px; background: rgb(255, 255, 255); border-radius: 22px; padding: 22px 20px 14px; text-align: center; box-shadow: rgba(20, 4, 12, 0.4) 0px 24px 60px -16px; animation: 0.26s cubic-bezier(0.3, 0.8, 0.3, 1) 0s 1 normal none running trg-pxin; }
@keyframes trg-pxin { 
  0% { transform: scale(0.94); opacity: 0; }
}
.px-cf__c > b{ display: block; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.px-cf__c p{ font-size: 13.5px; line-height: 1.45; color: var(--ink40); margin: 6px 0px 18px; }
.px-cf__c button{ display: block; width: 100%; border: 0px; border-radius: 14px; font-family: inherit; font-size: 15px; font-weight: 500; padding: 14px; cursor: pointer; }
.px-cf__stay{ background: var(--pri); color: rgb(255, 255, 255); }
.px-cf__exit{ background: transparent; color: var(--ink40); margin-top: 4px; }
.gt-l.is-glow{ background: rgb(255, 255, 255); }
.pr{ display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0px 26px 10px; text-align: center; flex: 1 1 auto !important; }
.pr-k{ font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink40); }
.pr-ring{ position: relative; width: 216px; height: 216px; margin: 24px 0px 26px; animation: 3.4s ease-in-out 0s infinite normal none running trg-prb; }
@keyframes trg-prb { 
  50% { transform: scale(1.018); }
}
.pr-ring svg{ width: 100%; height: 100%; transform: rotate(-90deg); }
.pr-ring circle{ fill: none; stroke-width: 4; }
.pr-ring .bg{ stroke: rgb(236, 236, 239); }
.pr-ring .fg{ stroke: var(--pink); stroke-linecap: round; }
.pr-ring b{ position: absolute; inset: 0px; display: grid; place-items: center; font-size: 56px; font-weight: 500; letter-spacing: -0.03em; color: var(--pri); font-variant-numeric: tabular-nums; }
.pr-ring small{ position: absolute; left: 0px; right: 0px; bottom: 58px; font-size: 12.5px; color: var(--ink40); }
.pr-nx{ font-size: 15px; line-height: 1.45; color: var(--ink66); font-weight: 500; max-width: 300px; }
.pr-nx b{ color: var(--ink); font-weight: 600; }
.pr-nx span{ display: block; margin-top: 4px; font-size: 13px; color: var(--ink40); font-weight: 400; }
.pr-acts{ display: flex; gap: 10px; margin-top: 30px; }
.pr-acts button{ border: 0px; border-radius: 14px; font-family: inherit; font-size: 14.5px; font-weight: 500; padding: 14px 26px; cursor: pointer; }
.pr-add{ background: rgb(255, 255, 255); color: var(--ink66); box-shadow: inset 0 0 0 1px var(--hair); }
.pr-skip{ background: var(--pri); color: rgb(255, 255, 255); }
.pr-tip{ font-size: 12.5px; line-height: 1.45; color: var(--ink40); margin: 22px 16px 0px; max-width: 290px; }
.pd-conf{ position: absolute; inset: 0px; overflow: hidden; pointer-events: none; z-index: 1; }
.pd-conf i{ position: absolute; top: -6%; width: 9px; height: 14px; border-radius: 2px; opacity: 0; animation: auto cubic-bezier(0.35, 0.15, 0.6, 1) 0s 1 normal forwards running trg-pdfall; }
@keyframes trg-pdfall { 
  0% { opacity: 0; transform: translateY(0px) rotate(0deg); }
  8% { opacity: 1; }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translateY(820px) rotate(540deg); }
}
.pd::before{ content: ""; position: absolute; z-index: -1; inset: 18% -10px; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.75) 60%, rgba(255, 255, 255, 0)); pointer-events: none; }
.pd{ position: relative; z-index: 2; isolation: isolate; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0px 24px 20px; flex: 1 1 auto !important; }
.pd-ring{ position: relative; width: 84px; height: 84px; border-radius: 50%; background: var(--pri); color: rgb(255, 255, 255); display: grid; place-items: center; box-shadow: rgba(12, 14, 18, 0.18) 0px 18px 40px; }
.pd-ring svg{ position: relative; width: 38px; height: 38px; }
.pd-ring svg path{ stroke-dasharray: 40; stroke-dashoffset: 40; animation: 0.5s cubic-bezier(0.6, 0.1, 0.3, 1) 0.15s 1 normal forwards running trg-pddraw; }
@keyframes trg-pddraw { 
  100% { stroke-dashoffset: 0; }
}
.pd-burst{ position: absolute; inset: -22px; border-radius: 50%; background: radial-gradient(circle, rgba(12, 14, 18, 0.08), rgba(12, 14, 18, 0) 70%); animation: 0.8s ease-out 0s 1 normal both running trg-pdburst; }
@keyframes trg-pdburst { 
  0% { transform: scale(0.2); opacity: 1; }
  100% { transform: scale(1); opacity: 0.85; }
}
.pd > small{ margin-top: 26px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(142, 142, 147); }
.pd h1{ font-size: 28px; line-height: 1.1; font-weight: 600; letter-spacing: -0.8px; margin: 8px 0px; max-width: 300px; }
.pd p{ font-size: 14.5px; line-height: 1.45; color: var(--ink66); margin: 0px; max-width: 310px; }
.pd-st{ display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; margin-top: 26px; background: rgb(255, 255, 255); border-radius: 20px; padding: 14px 0px; box-shadow: rgba(44, 12, 23, 0.14) 0px 10px 30px -12px, rgba(44, 12, 23, 0.05) 0px 0px 0px 1px inset; }
.pd-st div + div{ border-left: 1px solid var(--hair); }
.pd-st b{ display: block; font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.4px; }
.pd-st small{ font-size: 12px; color: var(--ink40); }
.pd-vol{ display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 16px; margin-top: 14px; font-size: 12.5px; color: var(--ink40); }
.pd-vol span{ display: inline-flex; align-items: center; gap: 5px; }
.pd-vol svg{ width: 14px; height: 14px; color: var(--pink); }
.pd-vol b{ color: var(--ink66); font-weight: 600; }
.pq-head{ display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 0px; }
.pq-head span{ font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink40); }
.pq-head button{ border: 0px; background: none; font-family: inherit; font-size: 14px; font-weight: 500; color: var(--ink40); cursor: pointer; padding: 6px 2px; }
.gt-l.is-soft{ background: rgb(248, 246, 247); }
.is-soft .pq-head span{ color: rgb(122, 93, 105); font-size: 13px; font-weight: 650; letter-spacing: 0px; text-transform: none; }
.pq-body{ padding: 18px 20px 20px; }
.pq-q{ font-size: 25px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.18; margin: 4px 0px 8px; }
.pq-q--l{ font-size: 29px; letter-spacing: -0.7px; line-height: 1.1; }
.pq-s{ font-size: 14.5px; line-height: 1.5; color: var(--ink40); margin: 0px 0px 20px; }
.po-list{ display: flex; flex-direction: column; gap: 9px; }
.po{ display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 0px; cursor: pointer; font-family: inherit; color: var(--ink); background: rgb(255, 255, 255); border-radius: 14px; padding: 12px 15px; min-height: 62px; box-shadow: rgba(20, 4, 12, 0.043) 0px 4px 12px, rgba(12, 14, 18, 0.04) 0px 0px 0px 1px inset; }
.po-e{ font-size: 27px; line-height: 1; flex: 0 0 auto; width: 32px; text-align: center; }
.po-b{ flex: 1 1 0%; min-width: 0px; }
.po-b b{ display: block; font-size: 15.5px; font-weight: 500; letter-spacing: -0.2px; line-height: 1.2; }
.po-b small{ display: block; font-size: 12.5px; color: rgba(12, 14, 18, 0.5); margin-top: 2px; }
.po-ck{ width: 24px; height: 24px; flex: 0 0 auto; border-radius: 50%; box-shadow: rgba(12, 14, 18, 0.14) 0px 0px 0px 1.5px inset; display: grid; place-items: center; color: rgb(255, 255, 255); }
.po-ck svg{ width: 14px; height: 14px; opacity: 0; }
.po.sel{ background: rgb(246, 238, 243); box-shadow: rgba(160, 80, 120, 0.14) 0px 0px 0px 1px inset; }
.po.sel .po-ck{ background: rgb(29, 2, 12); box-shadow: none; }
.po.sel .po-ck svg{ opacity: 1; }
.pq-ta{ display: block; width: 100%; box-sizing: border-box; margin-top: 12px; border: 0px; border-radius: 16px; background: rgb(255, 255, 255); padding: 14px 16px; font-family: inherit; font-size: 15.5px; line-height: 1.45; color: var(--ink); resize: none; outline: none; box-shadow: rgba(29, 2, 12, 0.09) 0px 0px 0px 1px inset; }
.pq-note{ display: flex; gap: 9px; align-items: flex-start; margin-top: 10px; padding: 10px 12px; border-radius: 13px; background: rgb(243, 243, 245); font-size: 12.5px; line-height: 1.42; color: rgb(110, 110, 115); }
.pq-note.danger{ background: rgb(255, 240, 239); color: rgb(154, 77, 72); }
.pq-foot{ font-size: 12.5px; color: var(--ink40); text-align: center; margin: 16px 0px 0px; }
.pq-ctx,.pq-card{ background: rgb(255, 255, 255); border-radius: 22px; box-shadow: rgba(36, 25, 30, 0.05) 0px 14px 34px, rgba(53, 17, 31, 0.06) 0px 0px 0px 1px inset; }
.pq-who{ display: flex; align-items: center; gap: 14px; padding: 11px 14px; }
.pq-who img{ width: 62px; height: 72px; border-radius: 16px; object-fit: cover; object-position: 50% 15%; flex: 0 0 auto; }
.pq-who small,.pq-cx small{ display: block; font-size: 12px; font-weight: 600; color: rgb(142, 142, 147); }
.pq-who b{ display: block; font-size: 17px; font-weight: 600; margin-top: 2px; }
.pq-who em{ display: block; font-style: normal; font-size: 12.5px; line-height: 1.35; color: rgb(129, 119, 124); margin-top: 3px; }
.pq-att{ margin: 0px 14px; padding: 12px 0px 14px; border-top: 1px solid rgba(53, 17, 31, 0.07); }
.pq-att small{ display: block; font-size: 11.5px; color: rgb(139, 129, 134); }
.pq-att b{ display: block; font-size: 14.5px; font-weight: 600; margin-top: 3px; }
.pq-att span{ display: block; font-size: 12.5px; color: rgb(141, 133, 137); margin-top: 2px; }
.pq-topics{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.pq-topics button{ min-height: 44px; padding: 0px 15px; border: 1px solid rgba(53, 17, 31, 0.1); border-radius: 15px; background: rgb(255, 255, 255); color: rgb(109, 96, 103); font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.pq-topics button.on{ border-color: rgb(53, 17, 31); background: rgb(53, 17, 31); color: rgb(255, 255, 255); }
.pq-foot2{ display: grid !important; grid-template-columns: 0.8fr 1.2fr; }
.pq-foot2 .gt-btn{ height: 52px; font-size: 15px; }
.pq-top{ display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; gap: 8px; padding: 6px 14px 10px; border-bottom: 1px solid rgba(53, 17, 31, 0.07); }
.pq-top > div{ text-align: center; }
.pq-top b{ display: block; font-size: 16px; font-weight: 600; }
.pq-top span{ display: block; font-size: 12px; color: var(--ink40); margin-top: 1px; }
.is-soft .pq-body > .pq-card + .pq-card{ margin-top: 10px; }
.pq-cx{ display: flex; gap: 12px; align-items: center; padding: 10px 12px; }
.pq-cx img{ width: 60px; height: 60px; border-radius: 14px; object-fit: cover; flex: 0 0 auto; }
.pq-cx b{ display: block; font-size: 15px; font-weight: 600; margin-top: 2px; line-height: 1.25; }
.pq-cx em{ display: block; font-style: normal; font-size: 12.5px; color: rgb(141, 133, 137); margin-top: 2px; }
.pq-lbl{ display: block; margin: 18px 2px 0px; font-size: 13px; font-weight: 600; color: rgba(35, 23, 29, 0.55); }
.pq-lbl + .pq-topics{ margin-top: 8px; }
.pq-lbl + .pq-ta{ margin-top: 8px; }
.gt-l.is-info .gt-scr{ padding-top: 0px; }
.pi-hero{ position: relative; height: 330px; background: rgb(243, 243, 245); overflow: hidden; }
.pi-hero img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.pi-hero .px-loop{ top: auto; bottom: 14px; }
.pi-x{ position: absolute; z-index: 7; top: 62px; right: 18px; width: 36px; height: 36px; border-radius: 50%; border: 0px; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: grid; place-items: center; cursor: pointer; color: var(--ink); padding: 0px; }
.pi-x svg{ width: 18px; height: 18px; }
.pi-body{ padding: 18px 22px 0px; }
.pi-tag{ display: block; font-size: 13px; font-weight: 500; color: rgb(142, 138, 141); }
.pi-body h1{ font-size: 22px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; margin: 8px 0px 4px; }
.pi-meta{ font-size: 13px; color: var(--ink40); margin-bottom: 14px; font-variant-numeric: tabular-nums; }
.pi-help{ display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 12px; border-radius: 18px; background: rgb(245, 244, 246); cursor: pointer; }
.pi-help img{ width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; flex: 0 0 auto; }
.pi-help > span{ flex: 1 1 0%; min-width: 0px; }
.pi-help small{ display: block; font-size: 12.5px; font-weight: 500; color: rgb(142, 138, 141); }
.pi-help b{ display: block; font-size: 15.5px; font-weight: 600; margin-top: 1px; }
.pi-help em{ display: block; font-style: normal; font-size: 12.5px; color: rgb(142, 138, 141); margin-top: 2px; }
.pi-sec{ margin-top: 24px; }
.pi-h{ font-size: 14.5px; font-weight: 600; letter-spacing: -0.15px; color: rgb(142, 138, 141); margin-bottom: 4px; }
.pi-step{ display: flex; gap: 14px; padding: 11px 0px; border-bottom: 1px solid var(--hair); }
.pi-step:last-child{ border-bottom: 0px; }
.pi-step i{ width: 24px; height: 24px; border-radius: 50%; background: var(--soft); font-size: 12px; font-weight: 600; font-style: normal; display: grid; place-items: center; flex: 0 0 auto; }
.pi-step p{ margin: 0px; font-size: 14.5px; line-height: 1.5; }
.pi-bl{ display: flex; gap: 11px; align-items: flex-start; padding: 7px 0px; font-size: 14.5px; line-height: 1.5; }
.pi-bl i{ width: 5px; height: 5px; border-radius: 50%; background: rgb(189, 184, 187); margin-top: 9px; flex: 0 0 auto; }
.pi-empty{ font-size: 14.5px; line-height: 1.5; color: var(--ink66); padding: 4px 0px 14px; }
.ps-stats > div{ padding-bottom: 12px !important; }
.ps-stats em{ display: block; font-style: normal; font-size: 11px; color: rgb(174, 174, 178); margin-top: 1px; }
.ps-feel{ display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 12px 16px 12px 12px; border-radius: 22px; background: rgb(255, 255, 255); }
.ps-feel > span{ width: 44px; height: 44px; flex: 0 0 auto; border-radius: 50%; background: rgb(243, 243, 245); display: grid; place-items: center; font-size: 22px; line-height: 1; }
.ps-feel > div{ flex: 1 1 0%; }
.ps-feel small{ display: block; font-size: 12px; color: rgb(142, 142, 147); }
.ps-feel b{ display: block; font-size: 16px; font-weight: 600; }
.ps-feel em{ font-style: normal; font-size: 12px; color: rgb(174, 174, 178); max-width: 120px; text-align: right; }
.ps-h{ display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ps-h em{ font-style: normal; font-size: 13px; font-weight: 500; color: rgb(142, 138, 141); }
.is-sum2 .gs-ex__b > i{ background: rgb(239, 237, 239) !important; height: 3px !important; }
.is-sum2 .gs-ex__b > i b{ background: rgb(170, 164, 168) !important; }
.gt-l.is-card:has(.pc-cover--soft) .gt-rb--glass{ background: rgb(243, 243, 245); }
.is-sum2 .gs-hero__b small{ text-transform: none; letter-spacing: -0.05px; font-size: 13px; font-weight: 500; color: rgb(142, 138, 141); }
.gt-l.is-q{ background: rgb(243, 243, 245); }
.gt-l.is-q .gt-sb{ background: rgb(243, 243, 245); }
.gt-l.is-q .gt-foot{ background: linear-gradient(rgba(243, 243, 245, 0), rgb(243, 243, 245) 30%) !important; }
.is-q .pq-top{ border-bottom: 0px; padding-bottom: 6px; }
.is-q .pq-body{ padding-top: 10px; }
.is-q .pq-card{ box-shadow: none; border-radius: 22px; }
.is-q .pq-who small,.is-q .pq-cx small{ font-weight: 500; color: rgb(142, 138, 141); }
.is-q .pq-who em,.is-q .pq-cx em{ color: rgb(142, 138, 141); }
.is-q .pq-who img{ width: 52px; height: 52px; border-radius: 50%; }
.is-q .pq-lbl{ margin: 20px 4px 0px; font-size: 14.5px; letter-spacing: -0.15px; color: rgb(142, 138, 141); }
.is-q .pq-topics button{ border: 0px; background: rgb(255, 255, 255); box-shadow: rgba(12, 14, 18, 0.08) 0px 0px 0px 1px inset; color: rgb(61, 58, 64); font-weight: 500; border-radius: 100px; min-height: 42px; }
.is-q .pq-topics button.on{ background: rgb(246, 238, 243); box-shadow: rgba(160, 80, 120, 0.14) 0px 0px 0px 1px inset; color: rgb(29, 2, 12); font-weight: 600; }
.is-q .pq-ta{ box-shadow: rgba(12, 14, 18, 0.08) 0px 0px 0px 1px inset; }
.is-q .pq-ta:focus{ box-shadow: rgb(255, 197, 220) 0px 0px 0px 1.5px inset; }
.is-q .pq-note{ background: none; padding: 8px 4px 0px; color: rgb(142, 138, 141); }
.is-q .pq-note.danger{ background: none; color: rgb(178, 58, 51); }
.is-q .px-go[disabled]{ opacity: 1; background: rgb(209, 209, 214) !important; }
.gt-l.is-tq{ background: rgb(243, 243, 245); }
.gt-l.is-tq .gt-grp{ margin-top: 24px; }
.gt-l.is-tq .gt-card + .gt-card{ margin-top: 12px; }
.tq-pad{ padding: 16px 18px; }
.gt-card.tq-pad{ padding: 16px 18px; }
.tq-lead{ padding: 18px 4px 0px; }
.tq-lead small{ display: block; font-size: 13.5px; color: rgb(142, 142, 147); margin-bottom: 4px; }
.tq-lead h1{ font-size: 28px; font-weight: 600; letter-spacing: -0.9px; line-height: 1.1; margin: 0px; color: rgb(17, 17, 17); }
.tq-lead p{ font-size: 15px; line-height: 1.47; color: rgb(110, 110, 115); margin: 8px 0px 0px; }
.tq-lead--s{ padding: 4px 4px 16px; }
.tq-lead--s h1{ font-size: 26px; letter-spacing: -0.8px; }
.gt-btn.tq-soft{ background: rgb(255, 255, 255); color: rgb(17, 17, 17); box-shadow: none; height: 54px; font-size: 16px; }
.tq-r{ position: relative; display: flex; align-items: flex-start; gap: 14px; width: 100%; padding: 14px 18px; border: 0px; background: none; text-align: left; font: inherit; color: rgb(17, 17, 17); box-sizing: border-box; }
button.tq-r{ cursor: pointer; }
.tq-r--c{ align-items: center; }
.tq-r + .tq-r::before{ content: ""; position: absolute; left: 18px; right: 18px; top: 0px; height: 1px; background: rgb(236, 236, 239); }
.tq-r + .tq-r:has(> .tq-r__ic)::before{ left: 54px; }
.tq-r + .tq-r:has(> .tq-r__img)::before{ left: 84px; }
.tq-r__ic{ width: 22px; height: 22px; flex: 0 0 auto; display: grid; place-items: center; color: rgb(28, 28, 30); margin-top: 1px; }
.tq-r__ic svg{ width: 22px; height: 22px; }
.tq-r__ic.is-ok{ color: rgb(52, 168, 83); }
.tq-r__ic.is-attn{ color: rgb(224, 134, 0); }
.tq-r__ic.is-redo{ color: rgb(215, 55, 47); }
.tq-r__img{ position: relative; width: 52px; height: 52px; flex: 0 0 auto; border-radius: 14px; overflow: hidden; background: rgb(243, 243, 245); }
.tq-r__img img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.tq-r__img em{ position: absolute; inset: 0px; display: grid; place-items: center; color: rgb(255, 255, 255); background: rgba(16, 16, 20, 0.16); }
.tq-r__img em svg{ width: 14px; height: 14px; }
.tq-r__b{ flex: 1 1 0%; min-width: 0px; }
.tq-r__b > small{ display: block; font-size: 13px; color: rgb(142, 142, 147); margin-bottom: 2px; }
.tq-r__b > b{ display: block; font-size: 16px; font-weight: 500; letter-spacing: -0.25px; line-height: 1.3; color: rgb(17, 17, 17); }
.tq-r__s{ display: block; font-size: 13.5px; line-height: 1.42; color: rgb(142, 142, 147); margin-top: 3px; }
.tq-r__v{ flex: 0 0 auto; font-style: normal; font-size: 15px; color: rgb(142, 142, 147); text-align: right; max-width: 55%; }
.tq-r__go{ flex: 0 0 auto; align-self: center; color: rgb(199, 199, 204); display: grid; }
.tq-r__go svg{ width: 16px; height: 16px; }
.tq-r--kv{ padding-top: 13px; padding-bottom: 13px; }
.tq-r--kv .tq-r__b > b{ font-size: 15.5px; font-weight: 400; color: rgb(58, 58, 60); }
.tq-r--kv .tq-r__v{ color: rgb(17, 17, 17); }
.tq-r--plain .tq-r__b > b{ font-size: 15px; font-weight: 400; line-height: 1.45; color: rgb(58, 58, 60); }
.tq-r--plain .tq-r__ic{ color: rgb(142, 142, 147); }
.tq-r--av .tq-r__img{ width: 40px; height: 40px; border-radius: 50%; }
.tq-r--av{ align-items: center; }
.tq-r + .tq-r--av::before{ left: 72px; }
.tq-r--att{ margin-top: 12px; padding: 12px 14px; border-radius: 18px; background: rgb(246, 246, 248); align-items: center; }
.tq-r--att .tq-r__b > b{ font-size: 15px; }
.tq-st{ display: inline-flex; align-items: center; gap: 7px; margin-top: 8px; font-size: 13.5px; font-weight: 500; color: rgb(58, 58, 60); white-space: nowrap; }
.tq-st i{ width: 7px; height: 7px; border-radius: 50%; background: rgb(199, 199, 204); flex: 0 0 auto; }
.tq-st--ok i{ background: rgb(52, 199, 89); }
.tq-st--attn i{ background: rgb(255, 159, 10); }
.tq-st--redo i{ background: rgb(215, 55, 47); }
.tq-st--wait i{ background: rgb(28, 28, 30); }
.tq-st--mute{ color: rgb(142, 142, 147); }
.tq-kv{ margin-top: 14px; border-top: 1px solid rgb(236, 236, 239); }
.tq-kv > div{ display: grid; grid-template-columns: 94px 1fr; gap: 12px; padding: 11px 0px 0px; }
.tq-kv span{ font-size: 14px; color: rgb(142, 142, 147); line-height: 1.4; }
.tq-kv b{ font-size: 15px; font-weight: 500; line-height: 1.4; color: rgb(17, 17, 17); }
.tq-bar{ height: 4px; border-radius: 4px; background: rgb(236, 236, 239); overflow: hidden; }
.tq-bar i{ display: block; height: 100%; border-radius: 4px; background: rgb(28, 28, 30); }
.tq-empty{ text-align: center; padding: 24px 20px; }
.tq-empty > span{ display: grid; place-items: center; color: rgb(142, 142, 147); }
.tq-empty svg{ width: 24px; height: 24px; }
.tq-empty b{ display: block; font-size: 16px; font-weight: 600; margin-top: 8px; }
.tq-empty p{ font-size: 14px; line-height: 1.45; color: rgb(142, 142, 147); margin: 4px 0px 0px; }
.tq-off{ margin-top: 6px; }
.tq-off .tq-r__ic{ color: rgb(142, 142, 147); }
.tq-photo{ margin-top: 8px; aspect-ratio: 4 / 3; border-radius: 26px; overflow: hidden; background: rgb(233, 231, 228); }
.tq-photo img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.tq-quota{ display: grid; grid-template-columns: 1fr 1fr; margin-top: 18px; }
.tq-quota > div{ padding: 16px 18px; }
.tq-quota > div + div{ border-left: 1px solid rgb(236, 236, 239); }
.tq-quota b{ display: block; font-size: 30px; font-weight: 600; letter-spacing: -1px; line-height: 1; color: rgb(17, 17, 17); font-variant-numeric: tabular-nums; }
.tq-quota span{ display: block; font-size: 15px; font-weight: 500; line-height: 1.3; letter-spacing: -0.2px; margin-top: 10px; }
.tq-quota small{ display: block; font-size: 13px; color: rgb(142, 142, 147); margin-top: 3px; line-height: 1.3; }
.tq-replay{ margin-top: 12px; }
.tq-steps{ padding: 6px 0px 4px; }
.tq-step{ position: relative; display: flex; gap: 14px; padding: 12px 18px; }
.tq-step > i{ position: relative; z-index: 1; width: 26px; height: 26px; flex: 0 0 auto; border-radius: 50%; background: rgb(243, 243, 245); font-style: normal; font-size: 13px; font-weight: 600; color: rgb(17, 17, 17); display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.tq-step:not(:last-child)::after{ content: ""; position: absolute; left: 30.5px; top: 40px; bottom: -12px; width: 1px; background: rgb(229, 229, 234); }
.tq-step b{ display: block; font-size: 16px; font-weight: 500; letter-spacing: -0.25px; line-height: 1.3; padding-top: 3px; }
.tq-step p{ font-size: 13.5px; line-height: 1.45; color: rgb(142, 142, 147); margin: 3px 0px 0px; }
.tq-steps + .tq-r::before{ content: ""; position: absolute; left: 18px; right: 18px; top: 0px; height: 1px; background: rgb(236, 236, 239); }
.tq-why{ margin: 0px 18px 16px; padding-top: 12px; border-top: 1px solid rgb(236, 236, 239); }
.tq-why small{ display: block; font-size: 13px; color: rgb(142, 142, 147); }
.tq-why p{ margin: 4px 0px 0px; font-size: 14px; line-height: 1.5; color: rgb(58, 58, 60); }
.tq-cov{ padding: 16px 18px 18px; }
.tq-cov__h{ display: flex; justify-content: space-between; align-items: baseline; font-size: 15px; color: rgb(58, 58, 60); }
.tq-cov__h b{ font-size: 15px; font-weight: 600; color: rgb(17, 17, 17); }
.tq-cov__g{ display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin: 12px 0px 14px; }
.tq-cov__g span{ position: relative; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; background: rgb(243, 243, 245); }
.tq-cov__g img{ width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1); opacity: 0.4; }
.tq-cov__g span.on img{ filter: none; opacity: 1; }
.tq-cov__g em{ position: absolute; right: 3px; bottom: 3px; width: 18px; height: 18px; border-radius: 50%; background: rgb(255, 255, 255); color: rgb(28, 28, 30); display: grid; place-items: center; }
.tq-cov__g em svg{ width: 11px; height: 11px; }
.gt-l.is-tqs{ background: rgb(255, 255, 255); color: rgb(17, 17, 17); }
.gt-l.is-tqs .gt-sb{ background: none; }
.gt-l.is-tqs .gt-scr{ padding-top: 0px; }
.gt-l.is-tqs .gt-foot{ background: linear-gradient(rgba(255, 255, 255, 0), rgb(255, 255, 255) 30%); }
.tqs{ min-height: 100%; display: flex; flex-direction: column; padding: 66px 0px 140px; }
.tqs-top{ display: flex; align-items: center; gap: 12px; padding: 0px 16px 0px 22px; }
.tqs-bars{ flex: 1 1 0%; display: flex; gap: 5px; }
.tqs-bars i{ flex: 1 1 0%; height: 3px; border-radius: 3px; background: rgba(16, 16, 20, 0.12); }
.tqs-bars i.on{ background: rgb(28, 28, 30); }
.tqs-cnt{ font-size: 13px; color: rgb(142, 142, 147); font-variant-numeric: tabular-nums; }
.tqs-skip{ border: 0px; background: none; font-family: inherit; font-size: 14.5px; font-weight: 500; color: rgb(142, 142, 147); padding: 6px; cursor: pointer; }
.tqs-vis{ position: relative; margin-top: 14px; height: 318px; }
.tqs-art{ position: relative; width: 100%; height: 100%; }
.tqs-art > img{ position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; mask-image: linear-gradient(transparent 0px, rgb(0, 0, 0) 16%, rgb(0, 0, 0) 76%, transparent 100%); }
.tqs-tag{ position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 100px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.tqs-tag--rec{ left: 18px; top: 36px; background: rgba(16, 16, 20, 0.66); color: rgb(255, 255, 255); }
.tqs-tag--rec i{ width: 7px; height: 7px; border-radius: 50%; background: rgb(255, 77, 94); animation: 1.6s ease-in-out 0s infinite normal none running trg-tqrec; }
@keyframes trg-tqrec { 
  50% { opacity: 0.35; }
}
.tqs-tag--dark{ left: 18px; top: 36px; background: rgba(16, 16, 20, 0.66); color: rgb(255, 255, 255); }
.tqs-tag--foot{ right: 16px; bottom: 40px; background: rgba(255, 255, 255, 0.9); color: rgb(17, 17, 17); }
.tqs-coach{ position: relative; width: 100%; height: 100%; }
.tqs-coach__v{ position: absolute; left: 14px; top: 30px; width: 58%; aspect-ratio: 4 / 3; border-radius: 22px; overflow: hidden; box-shadow: rgba(16, 16, 20, 0.35) 0px 16px 36px -18px; }
.tqs-coach__v img{ width: 100%; height: 100%; object-fit: cover; }
.tqs-coach__v span{ position: absolute; left: 10px; bottom: 10px; display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 100px; background: rgba(16, 16, 20, 0.62); color: rgb(255, 255, 255); font-size: 12px; font-weight: 500; }
.tqs-coach__v svg{ width: 14px; height: 14px; }
.tqs-coach__p{ position: absolute; right: 16px; top: 12px; width: 46%; height: 230px; border-radius: 26px; overflow: hidden; background: rgb(255, 255, 255); box-shadow: rgba(16, 16, 20, 0.4) 0px 20px 40px -20px; border: 4px solid rgb(255, 255, 255); }
.tqs-coach__p img{ width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.tqs-coach__id{ position: absolute; left: 44px; right: 22px; bottom: 12px; padding: 12px 16px; border-radius: 20px; background: rgba(255, 255, 255, 0.96); box-shadow: rgba(16, 16, 20, 0.3) 0px 12px 30px -14px; }
.tqs-coach__id small{ display: block; font-size: 12.5px; color: rgb(142, 142, 147); }
.tqs-coach__id b{ display: block; font-size: 18px; font-weight: 600; letter-spacing: -0.4px; margin-top: 1px; }
.tqs-coach__id em{ display: block; font-style: normal; font-size: 13px; color: rgb(110, 110, 115); margin-top: 1px; }
.tqs-art--fb > img{ mask-image: linear-gradient(transparent 0px, rgb(0, 0, 0) 12%, rgb(0, 0, 0) 62%, transparent 92%); }
.tqs-note{ position: absolute; left: 18px; right: 18px; bottom: 48px; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border-radius: 20px; background: rgb(255, 255, 255); box-shadow: rgba(16, 16, 20, 0.3) 0px 14px 32px -14px; }
.tqs-note img{ width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.tqs-note small{ display: block; font-size: 12.5px; color: rgb(142, 142, 147); }
.tqs-note b{ display: block; font-size: 14.5px; font-weight: 600; }
.tqs-dec{ position: absolute; right: 18px; bottom: 0px; display: flex; align-items: center; gap: 8px; padding: 9px 14px 9px 10px; border-radius: 18px; background: rgb(255, 255, 255); box-shadow: rgba(16, 16, 20, 0.26) 0px 12px 28px -12px; }
.tqs-dec span{ color: rgb(52, 168, 83); display: grid; }
.tqs-dec svg{ width: 18px; height: 18px; }
.tqs-dec b{ font-size: 14px; font-weight: 600; }
.tqs-copy{ padding: 18px 22px 0px; }
.tqs-copy > small{ font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgb(142, 142, 147); }
.tqs-copy h1{ font-size: 30px; font-weight: 600; letter-spacing: -1.1px; line-height: 1.06; margin: 8px 0px 0px; }
.tqs-copy p{ font-size: 15.5px; line-height: 1.47; color: rgb(91, 91, 96); margin: 10px 0px 0px; }
.tqs-rule{ display: flex; gap: 12px; align-items: center; margin-top: 18px; padding: 13px 14px; border-radius: 20px; background: rgb(255, 255, 255); box-shadow: rgb(236, 236, 239) 0px 0px 0px 1px inset; }
.tqs-rule > span{ width: 38px; height: 38px; border-radius: 13px; background: rgb(29, 2, 12); color: rgb(255, 255, 255); display: grid; place-items: center; flex: 0 0 auto; }
.tqs-rule > span.is-ok{ background: rgb(238, 247, 230); color: rgb(52, 168, 83); }
.tqs-rule svg{ width: 18px; height: 18px; }
.tqs-rule > div{ flex: 1 1 0%; }
.tqs-rule b{ display: block; font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.tqs-rule small{ display: block; font-size: 12.5px; color: rgb(142, 142, 147); margin-top: 2px; line-height: 1.35; }
.tqs-rule em{ font-style: normal; font-size: 13px; font-weight: 600; color: rgb(58, 58, 60); white-space: nowrap; }
.tqs-3{ display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 18px; border-radius: 20px; background: rgb(255, 255, 255); box-shadow: rgb(236, 236, 239) 0px 0px 0px 1px inset; }
.tqs-3 div{ padding: 12px 8px; text-align: center; }
.tqs-3 div + div{ border-left: 1px solid rgb(236, 236, 239); }
.tqs-3 small{ display: block; font-size: 12.5px; color: rgb(142, 142, 147); }
.tqs-3 b{ display: block; font-size: 15.5px; font-weight: 600; margin-top: 2px; }
.tqs-tl{ display: flex; align-items: center; gap: 8px; margin-top: 20px; }
.tqs-tl span{ display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 500; color: rgb(142, 142, 147); }
.tqs-tl span b{ width: 24px; height: 24px; border-radius: 50%; background: rgb(243, 243, 245); color: rgb(142, 142, 147); display: grid; place-items: center; font-size: 12px; font-weight: 600; }
.tqs-tl span.on{ color: rgb(17, 17, 17); }
.tqs-tl span.on b{ background: rgb(28, 28, 30); color: rgb(255, 255, 255); }
.tqs-tl i{ flex: 1 1 0%; height: 1px; background: rgb(229, 229, 234); }
.tqc-media{ padding: 8px; border-radius: 26px; background: rgb(255, 255, 255); }
.tq-vid{ position: relative; aspect-ratio: 16 / 10; border-radius: 20px; overflow: hidden; background: rgb(28, 28, 30); }
.tq-vid img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.tq-vid--still{ background: rgb(233, 231, 228); }
.tq-vid__play{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 52px; height: 52px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: rgb(17, 17, 17); display: grid; place-items: center; }
.tq-vid__play svg{ width: 19px; height: 19px; margin-left: 3px; }
.tq-vid__dur{ position: absolute; right: 12px; top: 12px; padding: 4px 9px; border-radius: 100px; background: rgba(16, 16, 20, 0.55); color: rgb(255, 255, 255); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tq-vid__bar{ position: absolute; left: 16px; right: 16px; bottom: 16px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.5); }
.tq-vid__bar b{ position: absolute; top: -4.5px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.25) 0px 1px 4px; }
.tq-vid__bar b.on{ background: rgb(28, 28, 30); box-shadow: rgb(255, 255, 255) 0px 0px 0px 2.5px; }
.tq-vid--rv{ margin-top: 12px; border-radius: 26px; }
.tqc-brief{ display: grid; grid-template-columns: repeat(3, 1fr); padding: 14px 4px 6px; text-align: center; }
.tqc-brief div + div{ border-left: 1px solid rgb(236, 236, 239); }
.tqc-brief b{ display: block; font-size: 15.5px; font-weight: 600; }
.tqc-brief small{ display: block; font-size: 12.5px; color: rgb(142, 142, 147); margin-top: 1px; }
.tqc-pick{ display: flex; gap: 8px; padding: 6px 0px 0px; }
.tqc-pick .gt-btn{ height: 48px; font-size: 15px; background: rgb(243, 243, 245); }
.tqc-ok{ padding: 10px 8px 4px; }
.tqc-ok .tq-st{ margin: 0px; font-size: 14px; }
.tqc-up{ padding: 12px 8px 6px; }
.tqc-up > div:first-child{ display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.tqc-up b{ font-size: 15px; font-weight: 600; }
.tqc-up span{ font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tqc-up small{ display: block; font-size: 13px; color: rgb(142, 142, 147); margin-top: 8px; }
.tqc-err{ margin-top: 12px; }
.tqc-err .tq-r__b > b{ font-weight: 600; }
.tqc-f{ padding: 16px 18px; }
.tqc-f + .tqc-f{ border-top: 1px solid rgb(236, 236, 239); }
.tqc-f__h{ display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.tqc-f__h b{ font-size: 16px; font-weight: 600; letter-spacing: -0.2px; }
.tqc-f__h em{ font-style: normal; font-size: 15px; font-weight: 500; color: rgb(58, 58, 60); }
.tqc-f__h small{ font-size: 13px; color: rgb(142, 142, 147); }
.tqc-rpe{ display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.tqc-rpe button{ height: 38px; border: 0px; border-radius: 11px; background: rgb(243, 243, 245); font-family: inherit; font-size: 14px; font-weight: 500; color: rgb(58, 58, 60); cursor: pointer; padding: 0px; font-variant-numeric: tabular-nums; }
.tqc-rpe button.on{ background: rgb(29, 2, 12); box-shadow: none; color: rgb(255, 255, 255); font-weight: 600; }
.tqc-rpe__l{ display: flex; justify-content: space-between; font-size: 12.5px; color: rgb(142, 142, 147); margin-top: 8px; }
.tqc-chips{ display: flex; flex-wrap: wrap; gap: 8px; }
.tqc-chips button{ height: 40px; padding: 0px 15px; border: 0px; border-radius: 100px; background: rgb(243, 243, 245); color: rgb(17, 17, 17); font-family: inherit; font-size: 14.5px; cursor: pointer; }
.tqc-chips button.on{ background: rgb(29, 2, 12); box-shadow: none; color: rgb(255, 255, 255); font-weight: 500; }
.tqc-lbl{ font-size: 13.5px; color: rgb(142, 142, 147); margin: 16px 0px 8px; }
.tq-in{ border-radius: 14px; background: rgb(255, 255, 255); box-shadow: rgb(229, 229, 234) 0px 0px 0px 1px inset; padding: 0px 14px; transition: box-shadow 0.15s; }
.tq-in:focus-within{ box-shadow: rgb(255, 197, 220) 0px 0px 0px 1.5px inset; }
.tq-in input,.tq-in textarea{ width: 100%; border: 0px; background: none; font-family: inherit; font-size: 15px; line-height: 1.4; color: rgb(17, 17, 17); padding: 13px 0px; outline: 0px; resize: none; display: block; }
.tqc-warn{ display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; font-size: 14px; line-height: 1.45; color: rgb(58, 58, 60); }
.tqc-warn svg{ width: 18px; height: 18px; color: rgb(215, 55, 47); flex: 0 0 auto; margin-top: 1px; }
.tq-v{ margin-top: 6px; padding: 18px; }
.tq-v__h{ display: flex; gap: 12px; align-items: center; }
.tq-v__ic{ width: 40px; height: 40px; flex: 0 0 auto; border-radius: 50%; background: rgb(243, 243, 245); display: grid; place-items: center; color: rgb(142, 142, 147); }
.tq-v__ic svg{ width: 20px; height: 20px; }
.tq-v--ok .tq-v__ic{ color: rgb(52, 168, 83); }
.tq-v--attn .tq-v__ic{ color: rgb(224, 134, 0); }
.tq-v--redo .tq-v__ic{ color: rgb(215, 55, 47); }
.tq-v--wait .tq-v__ic{ color: rgb(28, 28, 30); }
.tq-v__h small{ display: block; font-size: 13px; color: rgb(142, 142, 147); }
.tq-v__h b{ display: block; font-size: 20px; font-weight: 600; letter-spacing: -0.5px; line-height: 1.2; margin-top: 1px; }
.tq-v__p{ font-size: 15px; line-height: 1.47; color: rgb(58, 58, 60); margin: 12px 0px 0px; }
.tq-prog{ display: flex; align-items: center; gap: 6px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgb(236, 236, 239); }
.tq-prog span{ display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: rgb(174, 174, 178); white-space: nowrap; }
.tq-prog em{ flex: 1 1 0%; height: 1px; background: rgb(229, 229, 234); }
.tq-prog i{ width: 18px; height: 18px; border-radius: 50%; box-shadow: rgb(209, 209, 214) 0px 0px 0px 1.5px inset; display: grid; place-items: center; }
.tq-prog .done{ color: rgb(58, 58, 60); }
.tq-prog .done i{ background: rgb(28, 28, 30); box-shadow: none; color: rgb(255, 255, 255); }
.tq-prog .done i svg{ width: 11px; height: 11px; }
.tq-prog .now{ color: rgb(17, 17, 17); }
.tq-prog .now i{ box-shadow: rgb(28, 28, 30) 0px 0px 0px 5px inset; }
.tq-marks{ padding: 4px 0px; }
.tqm-g{ position: relative; padding: 12px 18px 14px; }
.tqm-g + .tqm-g::before{ content: ""; position: absolute; left: 18px; right: 18px; top: 0px; height: 1px; background: rgb(236, 236, 239); }
.tqm-g > small{ display: block; font-size: 13px; font-weight: 500; color: rgb(142, 142, 147); }
.tqm{ display: flex; gap: 12px; align-items: flex-start; margin-top: 10px; }
.tqm__ts{ flex: 0 0 auto; min-width: 50px; height: 30px; padding: 0px 9px; border: 0px; border-radius: 10px; background: rgb(243, 243, 245); color: rgb(17, 17, 17); font-family: inherit; font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; }
.tqm__ts.is-flat{ display: grid; place-items: center; color: rgb(174, 174, 178); cursor: default; }
.tqm b{ display: block; font-size: 16px; font-weight: 500; letter-spacing: -0.2px; padding-top: 4px; }
.tqm p{ font-size: 13.5px; line-height: 1.4; color: rgb(142, 142, 147); margin: 2px 0px 0px; }
.tqm__rep{ display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 13px; color: rgb(58, 58, 60); }
.tqm__rep svg{ width: 14px; height: 14px; color: rgb(142, 142, 147); }
.tqr-com{ padding: 16px 18px; }
.tqr-who{ display: flex; gap: 12px; align-items: center; }
.tqr-who img{ width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: 50% 18%; }
.tqr-who b{ display: block; font-size: 16px; font-weight: 600; }
.tqr-who small{ display: block; font-size: 13px; color: rgb(142, 142, 147); }
.tqr-msg{ font-size: 15.5px; line-height: 1.5; margin: 12px 0px 0px; color: rgb(17, 17, 17); }
.tqr-my{ font-size: 15.5px; line-height: 1.5; margin: 0px; }
.tqr-par{ display: grid; grid-template-columns: 1fr 1fr; }
.tqr-par div{ padding: 13px 18px; border-top: 1px solid rgb(236, 236, 239); }
.tqr-par div:nth-child(-n+2){ border-top: 0px; }
.tqr-par div:nth-child(2n){ border-left: 1px solid rgb(236, 236, 239); }
.tqr-par div:last-child:nth-child(2n+1){ grid-column: 1 / -1; }
.tqr-par small{ display: block; font-size: 13px; color: rgb(142, 142, 147); }
.tqr-par b{ display: block; font-size: 16px; font-weight: 500; margin-top: 2px; }
.tqr-tl > div{ position: relative; padding: 4px 0px 12px 24px; }
.tqr-tl > div:last-child{ padding-bottom: 0px; }
.tqr-tl > div::before{ content: ""; position: absolute; left: 5px; top: 18px; bottom: -4px; width: 1px; background: rgb(229, 229, 234); }
.tqr-tl > div:last-child::before{ display: none; }
.tqr-tl i{ position: absolute; left: 0px; top: 8px; width: 11px; height: 11px; border-radius: 50%; background: rgb(209, 209, 214); }
.tqr-tl .is-last i{ background: rgb(28, 28, 30); }
.tqr-tl .is-now i{ background: rgb(255, 255, 255); box-shadow: rgb(28, 28, 30) 0px 0px 0px 3px inset; }
.tqr-tl b{ display: block; font-size: 15px; font-weight: 500; }
.tqr-tl small{ display: block; font-size: 13px; color: rgb(142, 142, 147); margin-top: 1px; }
.tqh-cnt{ display: grid; grid-template-columns: repeat(3, 1fr); }
.tqh-cnt div{ padding: 14px 16px; }
.tqh-cnt div + div{ border-left: 1px solid rgb(236, 236, 239); }
.tqh-cnt b{ display: block; font-size: 24px; font-weight: 600; letter-spacing: -0.7px; }
.tqh-cnt span{ display: block; font-size: 13px; color: rgb(142, 142, 147); line-height: 1.3; margin-top: 2px; }
.tqh-seg{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-top: 16px; padding: 3px; border-radius: 100px; background: rgb(231, 231, 235); }
.tqh-seg button{ height: 36px; border: 0px; border-radius: 100px; background: none; font-family: inherit; font-size: 14.5px; font-weight: 500; color: rgb(58, 58, 60); cursor: pointer; }
.tqh-seg button.on{ background: rgb(255, 255, 255); color: rgb(17, 17, 17); font-weight: 600; box-shadow: rgba(0, 0, 0, 0.08) 0px 1px 4px; }
.tqh-day{ padding: 22px 18px 9px; font-size: 14.5px; font-weight: 600; letter-spacing: -0.15px; color: rgb(142, 142, 147); }
.tq-r--h .tq-r__s{ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tq-r--q .tq-r__ic{ color: rgb(142, 142, 147); }
.mm-svg{ display: block; overflow: visible; }
.mm-m{ stroke: rgb(201, 199, 205); stroke-width: 0.8; transform-box: fill-box; transform-origin: center center; }
.mm-m.on{ stroke: rgb(143, 14, 42); stroke-width: 0.9; filter: drop-shadow(rgba(168, 17, 46, 0.28) 0px 0px 4px); }
.mm-svg.play .mm-m.on{ animation: 0.62s cubic-bezier(0.2, 0.85, 0.25, 1.3) 0s 1 normal both running trg-mmpop; }
@keyframes trg-mmpop { 
  0% { opacity: 0.15; transform: scale(0.55); }
  55% { opacity: 1; transform: scale(1.1); }
  100% { transform: scale(1); }
}
.fz-figs{ display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 16px 18px 10px; border-radius: 24px; background: rgb(245, 245, 247); }
.fz-col{ display: flex; flex-direction: column; align-items: center; }
.fz-col .mm-svg{ width: 100%; height: 232px; }
.fz-figs--tall .fz-col .mm-svg{ height: 292px; }
.fz-col small{ margin-top: 8px; font-size: 12px; font-weight: 500; color: rgb(142, 142, 147); letter-spacing: -0.1px; }
.fz-sheet .xs-sheet__b > .fz-figs + *{ margin-top: 12px; }
.fz-names,.fz-all{ padding: 14px 4px 2px; }
.fz-names b,.fz-all b{ display: block; font-size: 17px; font-weight: 600; letter-spacing: -0.3px; color: rgb(12, 14, 18); }
.fz-names small,.fz-all small{ display: block; margin-top: 4px; font-size: 14px; line-height: 1.4; color: rgb(142, 142, 147); }
.fz-thumb{ width: 44px; height: 52px; flex: 0 0 auto; margin-left: -4px; border-radius: 14px; background: rgb(243, 243, 245); display: grid; place-items: center; overflow: hidden; }
.fz-thumb .mm-svg{ width: 44px; height: 52px; }
.fz-thumb .mm-m{ stroke-width: 1.6; }
.fz-thumb .mm-m.on{ filter: none; stroke-width: 1.6; }
.fz-row{ padding-top: 10px; padding-bottom: 10px; gap: 10px; }
.fz-sheet .pc-zr{ min-height: 54px; }
.po.sel{ background: rgb(246, 238, 243); box-shadow: rgba(160, 80, 120, 0.14) 0px 0px 0px 1px inset; }
.po.sel .po-ck{ background: rgb(29, 2, 12); box-shadow: none; color: rgb(255, 255, 255); }
.tqc-chips button.on:not(.is-pain){ background: rgb(29, 2, 12); color: rgb(255, 255, 255); box-shadow: none; }
.tqc-rpe button.on{ background: rgb(236, 236, 239); color: rgb(110, 110, 115); }
.pq-ta{ box-shadow: rgba(12, 14, 18, 0.07) 0px 0px 0px 1px inset; }
.pq-ta:focus{ box-shadow: rgb(255, 197, 220) 0px 0px 0px 1.5px inset; }

/* ---- src/styles/41-anketa.css ---- */
/* «Анкета» после старта — поправки поверх сгенерированного 40-anketa.css.
 * Свой класс правки (an-editing), а не общий xs-editing: его по маршруту
 * снимают «Встречи» и «Замеры», и кнопка правки анкеты осталась бы под таб-баром. */
.rf-app.an-editing .dock { transform: translateY(130px); opacity: 0; pointer-events: none; }
.rf-app.an-editing .xs-bar2.an-bar.on { padding-bottom: max(30px, calc(var(--rf-safe-bottom) + 12px)); }

/* обзор: кнопка «Дозаполнить» под заголовком карточки */
.an-scr .an-cta { margin-top: 14px; }

/* нет ответа */
.an-scr .xs-qa__a.is-empty { color: #aeaeb2; }

/* ошибка ответа: поле с красным контуром (как .xs-field.is-bad кита) */
.an-scr .xs-qa.is-bad .xs-field { box-shadow: inset 0 0 0 1.5px rgba(215, 55, 47, .5); }
.an-scr .xs-qa.is-bad .xs-chips { border-radius: 20px; box-shadow: 0 0 0 1.5px rgba(215, 55, 47, .35); }

/* «Изменить», пока идёт сохранение прошлой правки */
.an-scr .xs-nav .xs-act[disabled] { opacity: .4; cursor: default; }

/* ошибка сервера над правкой раздела */
.an-scr .xs--edit > .xs-grp:first-child .gm-err { margin: 0 4px; }

/* «Отменить» и «Не сохранилось» — над кнопкой правки, а не поверх неё */
.rf-app.an-editing .xs-undo { bottom: calc(104px + var(--rf-safe-bottom)); }

/* WS-3: ответ коуча без фото (у ответа — подпись «ответ коуча · Имя · дата»),
 * статус предложения цели под ответом и ожидание истории. */
.an-scr .an-reply { padding: 2px 18px 4px; }
.an-scr .xs-qa .an-reply { padding: 8px 0 2px; }
.an-scr .an-reply__by { padding: 0 18px 14px; font-size: 12.5px; color: #8e8e93; }
.an-scr .xs-qa .an-reply__by { padding: 4px 0 0; }
.an-scr .an-goal-st { margin-top: 4px; }
.an-scr .an-hist-wait { padding: 24px 18px; text-align: center; }
.an-scr .xs-pad--s + .xs-qa::before { display: none; }

/* ---- src/styles/41-diary.css ---- */
/* Поправки области «Дневник» поверх сгенерированного 40-diary.css.
 *
 * 1) Разница каркаса: в прототипе .body/.foot — прямые дети .nv-scr, в v3 между
 *    ними .xs-root; правила вида body[data-lay] … .foot до v3 не доезжают.
 * 2) Входные анимации прототипа (.is-in …{animation: … var(--ease) both}) экстрактор
 *    не переносит (шортхенд с var() в CSSOM пустой), а экран v3 перерисовывается
 *    целиком при каждом изменении данных (опрос «распознаётся» — раз в 3 с) —
 *    повтор анимации карточек выглядел бы как мигание. Показываем конечное состояние.
 * 3) Классы dy-* — то, чего в прототипе не было: честные состояния из прод-данных. */

/* ---------- каркас ---------- */
.dy-scr > .xs-root { display: flex; flex-direction: column; flex: 1 0 auto; }
.dy-scr .mk, .ad .mk { opacity: 1; transform: none; }
.dy-scr .mring__d { --p: var(--to, 0); }
.dy-scr .ring { --p: var(--to, 0); }
.pl4-scr .pl4-anim { opacity: 1; transform: none; }
.rf-pane.rf-t-food .foot {
  position: sticky; bottom: -22px; z-index: 6; margin-top: 4px; padding: 14px 18px 32px;
  background: linear-gradient(to top, var(--bg, #f7f7f8) 58%, rgba(247, 247, 248, 0));
}
.rf-pane.rf-t-food .foot[hidden] { display: none; }

/* ---------- дневник дня ---------- */
/* Раскладка «p» прототипа (по умолчанию): ссылка у заголовка «Приёмы» видна, подсказки нет. */
.rf-pane.rf-t-food .title__link { display: inline-flex; }
.dy-verdict .dg-fact2__k { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #a3a2aa; }
.dy-verdict .dg-fact2__t { font-size: 15px; font-weight: 600; letter-spacing: -.3px; margin-top: 3px; color: #101014; }
.dy-verdict .dg-fact2__s { font-size: 12.5px; color: #8b8a92; margin-top: 2px; line-height: 1.35; }
.dy-hint { font-size: 12.5px; line-height: 1.4; color: #8b8a92; padding: 2px 6px 0; }
.dy-av { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: #f1f1f3 center / cover no-repeat;
  display: grid; place-items: center; font-size: 11px; font-weight: 600; color: #6e6d75; }
.dy-empty { min-height: 60vh; }
/* Полка тарелок внизу дня (diary.js shelf) — .dg-shelf/.rv__shelf/.rv__pl прототипа из 40-diary.css. Обложка
 * рецепта без фото — градиент приёма и эмодзи «Тарелок» (.hp-rc-em, absolute) — плитке нужен свой контекст. */
.dg-shelf .rv__pl__ph, .dg-shelf .rv__pl__mos i { position: relative; }
/* Карточка — 122 px, как в прототипе: без min-width:0 строка nowrap распирала её до длины названия («Bang Bang
 * лосось из духовки» — 187 px). Названия рецептов длинные («Белковый овсяноблин с творожно-банановым кремом») —
 * две строки с многоточием вместо одной. */
.dg-shelf .rv__pl { min-width: 0; }
.dg-shelf .rv__pl b { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.dg-shelf .rv__pl--all small { white-space: normal; }
/* Знак системы вместо фото коуча: заключение дня (36 px, как было фото) и строка под приёмом (22 px). */
.dy-av--sys { background: #f1f1f3; color: #101014; }
.dy-av--sys svg { width: 54%; height: 54%; display: block; }
.gd-rev__a .dy-av--sys { width: 36px; height: 36px; }
.gd-cl .dy-av--sys { width: 22px; height: 22px; }

/* Заголовок дня — концепция А «Крупный день» (diary.js head()): «Сегодня» / «Вчера» / «14 сентября»,
 * подстрока — день недели и пояс или срок дозаписи с поясом; справа на прошлом дне — плитка-листок
 * сегодняшнего числа «чт 24 / вернуться», затем календарь. */
.dh { flex: 0 0 auto; display: flow-root; padding: 8px 18px 14px 22px; }
.dh__r { float: right; display: flex; align-items: flex-start; gap: 10px; margin-left: 10px; }
.dh__t { margin: 0; font-size: 32px; font-weight: 700; letter-spacing: -1.1px; line-height: 1.05; color: #101014; overflow-wrap: anywhere; }
.dh__s { font-size: 14px; line-height: 1.4; color: #6f6e77; margin-top: 6px; }
.dh__s b { font-weight: 500; color: #4a4950; }
/* Срок дозаписи / «только просмотр» — под листком во всю ширину (clear), с поясом. */
.dh__e { clear: right; display: flex; align-items: flex-start; gap: 5px; font-size: 14px; line-height: 1.4; color: #6f6e77; margin-top: 2px; }
.dh__e svg { width: 13px; height: 13px; flex: 0 0 auto; margin-top: 3px; }
.dh__cal { flex: 0 0 auto; width: 44px; height: 44px; background: #fff; box-shadow: inset 0 0 0 1px rgba(12, 14, 18, .08); }
.dh__cal svg { width: 20px; height: 20px; }
.dh-leaf { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0; border: 0; background: none; font: inherit; color: #101014; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.dh-leaf__c { width: 44px; height: 48px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1.5px #101014;
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.dh-leaf__c small { font-size: 9.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #6f6e77; }
.dh-leaf__c b { font-size: 18px; font-weight: 600; letter-spacing: -.4px; margin-top: 3px; font-variant-numeric: tabular-nums; }
.dh-leaf__l { font-size: 10.5px; line-height: 1.1; color: #6f6e77; }
.dh-leaf:active .dh-leaf__c { transform: scale(.96); }
/* Сегодняшний день в ленте недели обведён всегда — и когда открыт другой день. */
:where(.dy-scr) .wday.is-today:not(.is-active) { box-shadow: inset 0 0 0 1.5px #101014; }

/* ---------- сцена приёма ---------- */
.ad .pl4-hero__top { top: max(62px, calc(var(--rf-safe-top, 0px) + 12px)); }
/* Сервер прогресс распознавания не сообщает — кольцо крутится без процента. */
.ad .dy-prog .ad__prog__c { stroke-dasharray: 24 70; animation: spin 1.1s linear infinite; transform-origin: 18px 18px; }
.ad .dy-prog.gd-thin .ad__prog__c { stroke: #f3c53a; }
.ad__ta, .ad .dy-ta { width: 100%; border: 0; outline: 0; resize: none; background: transparent; font: inherit; color: inherit; line-height: 1.4; padding: 0; }
.ad .dy-ta::placeholder { color: rgba(255, 255, 255, .5); }
.ad__note--big { align-items: flex-start; }
.ad__note--big .dy-ta { min-height: 92px; }
.ad .dy-hint2 { margin-top: 10px; }
.ad .dy-note2 { margin: 12px 20px 0; }
.ad .dy-rppin { margin: 14px 20px 6px; }
.ad .dy-delrow { display: flex; justify-content: center; padding: 18px 0 6px; }
.ad .dy-del { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 100px; background: none; font: inherit; font-size: 15px; font-weight: 500; letter-spacing: -.15px; color: #8b8a92; cursor: pointer; transition: background .2s, color .2s; }
.ad .dy-del svg { width: 17px; height: 17px; }
.ad .dy-del:active { background: rgba(229, 72, 77, .08); color: #d1373d; }
.ad .ad__row--flat { cursor: default; }
.ad .dy-2nd { color: #101014; background: transparent; }
.ad__cta[hidden] { display: none; }
.ad__cta .dy-2nd { margin-top: 4px; height: 40px; color: #101014; background: transparent; }

/* Баланс к норме (balance_by_slot / insight.balance): пунктир — ×1. */
.dy-bal__tr { position: relative; display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.dy-bal__r { display: grid; grid-template-columns: 74px 1fr 38px; align-items: center; gap: 10px; font-size: 13px; color: #5f5e66; }
.dy-bal__r b { font-weight: 600; color: #101014; text-align: right; font-variant-numeric: tabular-nums; }
.dy-bal__t { position: relative; height: 8px; border-radius: 100px; background: #f1f1f3; overflow: hidden; }
.dy-bal__t i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 100px; }
.dy-bal__mk { position: absolute; top: -4px; bottom: -4px; left: calc(84px + (100% - 132px) * .4); border-left: 1.5px dashed rgba(16, 16, 20, .28); z-index: 1; pointer-events: none; }

/* ---------- вес ---------- */
.rf-pane.rf-t-weight .xs-bar2 { position: absolute; }
.rf-pane.rf-t-weight .rf-scr { padding-bottom: calc(120px + var(--rf-safe-bottom, 0px)); }

/* ---------- правила прототипа, не попавшие в извлечение (состояния, которых не было в шагах атласа) ---------- */
/* more_gap_diary.js / build_visual.py — дословно, кроме входных анимаций. */
.ad__ledger { display: flex; flex-direction: column; gap: 6px; min-height: 46px; }
.ad__tk { display: flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, .08); border-radius: 14px; padding: 9px 12px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); animation: dyRow .5s var(--ease) both; }
.ad__tk i { width: 24px; height: 24px; border-radius: 50%; background: rgba(163, 213, 70, .22); color: #cfe3a3; display: grid; place-items: center; flex: 0 0 auto; }
.ad__tk i svg { width: 11px; height: 11px; }
.ad__tk b { flex: 1 1 auto; min-width: 0; font-size: 13.5px; font-weight: 600; letter-spacing: -.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ad__tk small { font-size: 12px; color: rgba(255, 255, 255, .6); font-variant-numeric: tabular-nums; white-space: nowrap; }
@keyframes dyRow { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.dy-rpp .ad__tk small { display: none; }
.odo__s { display: inline-block; width: .25em; }
.gd-wait { display: flex; gap: 12px; align-items: center; }
.gd-wait b.t { display: block; font-size: 14.5px; font-weight: 600; letter-spacing: -.2px; }
.gd-wait small { display: block; font-size: 12.5px; color: #8b8a92; margin-top: 2px; }
.gd-wait__ic { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; background: #f3f2f5; display: grid; place-items: center; }
.gd-wait__ic i { display: flex; gap: 3px; }
.gd-wait__ic i b { width: 5px; height: 5px; border-radius: 50%; background: #101014; animation: gdDot 1.2s ease-in-out infinite; }
.gd-wait__ic i b:nth-child(2) { animation-delay: .15s; }
.gd-wait__ic i b:nth-child(3) { animation-delay: .3s; }
.gd-pre { display: flex; gap: 8px; align-items: flex-start; margin: 8px 20px 4px; font-size: 12.5px; line-height: 1.4; color: #8b8a92; }
.gd-pre i { flex: 0 0 auto; width: 14px; height: 14px; margin-top: 1px; color: #8b8a92; }
.gd-pre i svg { width: 14px; height: 14px; }
.ad__err { margin-top: 12px; background: rgba(255, 255, 255, .1); color: #fff; border-radius: 16px; padding: 12px 14px; font-size: 13px; line-height: 1.4; }
.ad__err b { display: block; font-weight: 600; margin-bottom: 2px; }
#adBody > .ad__err { margin: 16px 20px 0; background: #f6f5f8; color: #5f5e66; display: flex; gap: 10px; align-items: flex-start; }
#adBody > .ad__err b { color: #101014; }
#adBody > .ad__err .gd-erri { flex: 0 0 auto; width: 18px; height: 18px; color: #101014; }
#adBody > .ad__err .gd-erri svg { width: 18px; height: 18px; }
.dish--txt { background: #f3f2f5; display: grid; place-items: center; }
.dish--txt svg { width: 26px; height: 26px; color: #a3a2aa; }
.ds-ph--ic { background: #f3f2f5; color: #8b8a92; display: grid; place-items: center; }
.ds-ph--ic svg { width: 22px; height: 22px; }
.mr-ic { width: 40px; height: 40px; border-radius: 13px; flex: 0 0 auto; background: #f3f2f5; color: #2a2830; display: grid; place-items: center; }
.mr-ic svg { width: 19px; height: 19px; }
/* строки листов (.mr-li) — разметка строк Главной (.hm-mb), которую извлечение отсекло вместе с Главной */
.hm-mb { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.nv-li .hm-mb b { font-size: 14.5px; font-weight: 500; letter-spacing: -.2px; }
.nv-li .hm-mb small { font-size: 12px; color: #8b8a92; margin-top: 2px; }
.mr-li .hm-mb b { font-size: 15px; font-weight: 600; letter-spacing: -.2px; }
.mr-li .hm-mb small { font-size: 12px; color: #8b8a92; margin-top: 2px; }
.sh-list .mr-li .hm-mb b { font-size: 15.5px; }
.sh-list .mr-li .hm-mb small { font-size: 12.5px; line-height: 1.3; }
/* сцена приёма тёмная до самого верха: полоса под статус-баром — не цвет страницы, а затемнение фото */
.rf-app:has(.rf-pane.on.rf-t-meal) .rf-topfade { background: linear-gradient(180deg, rgba(12, 11, 16, .55), rgba(12, 11, 16, 0)); }
/* Встала шапка «‹ Завтрак · 08:40» — тёмная подложка под часами больше не нужна (как у «Мой план»). */
.rf-app:has(.rf-pane.on.rf-t-meal .pl4-bar.on) .rf-topfade { opacity: 0; }
/* листы, открытые прямо из вкладки (не из сцены приёма), — над таб-баром, как .nv-sheet--cal прототипа */
.rf-app:not(.rf-full) .nv-sheet--as, .rf-app:not(.rf-full) .nv-sheet--ds,
.rf-app:not(.rf-full) .nv-sheet--sl, .rf-app:not(.rf-full) .nv-sheet--nt { padding-bottom: 100px; }
/* поля блюда: в прототипе contenteditable-div, в v3 — настоящие input (клавиатура с цифрами, автозаполнение) */
input.ds-in { display: block; width: 100%; box-sizing: border-box; border: 0; font: inherit; font-size: 15px; color: #101014; -webkit-appearance: none; appearance: none; }
input.ds-in::placeholder { color: #b6b5bd; }
.nv-sheet--as .dy-asm { margin-left: 20px; margin-right: 20px; }
.ad .btn.ad__go.dy-off { background: rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .55); box-shadow: none; }
/* «Другое · выбрать время» — та же плитка, что варианты времени; системный выбор времени поверх, прозрачный */
.sl-times .dy-tpick { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 11px 14px; border-radius: 16px; background: rgb(246, 246, 248); cursor: pointer; box-shadow: rgba(12, 14, 18, .04) 0 0 0 1px inset; }
.sl-times .dy-tpick b { font-size: 17px; font-weight: 600; letter-spacing: -.4px; font-variant-numeric: tabular-nums; }
.sl-times .dy-tpick small { font-size: 11.5px; color: rgb(139, 138, 146); }
.sl-times .dy-tpick.on { background: rgb(16, 16, 20); color: #fff; }
.sl-times .dy-tpick.on small { color: rgba(255, 255, 255, .6); }
.sl-times .dy-tpick input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; cursor: pointer; }
.sl-l .dy-tz { font-weight: 500; color: #a3a2aa; }
.dy-rvic { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--ok-bg, #eef6e0); color: var(--ok, #5a8a1e); }
.dy-rvic.warn { background: var(--warn-bg, #fff4e0); color: var(--warn, #b07a14); }
.dy-rvic svg { width: 20px; height: 20px; }

/* буква коуча без фото — палитра аватаров приложения (91-avatar.css) */
.dy-av:not(.dy-av--sys) { background-image: var(--rf-av-bg); color: var(--rf-av-fg); }

/* ===== Вес и вода — тише, как в проде (v2 app.css:1482-1522) =====
 * Вес: число 52/600, «Ввести вручную» — ссылка, сохранить — тёмная кнопка пониже, без пружины. */
.pf-wt__big b { font-size: 52px; font-weight: 600; letter-spacing: -2px; }
.pf-wt__big span { font-size: 18px; font-weight: 500; }
.pf-wt__sub { font-size: 12.5px; }
.pf-wt__acts { gap: 4px; margin-top: 14px; }
.pf-wt__acts button { height: auto; padding: 8px 10px; background: none; font-size: 13px; font-weight: 500; color: #8b8a92; }
.pf-wt__acts button.red { color: #d7372f; }
.dy-wbar, .dy-wbar.on { transition: transform .3s var(--ease), visibility 0s; }
.dy-wbar:not(.on) { transition: transform .3s var(--ease), visibility 0s linear .3s; }
.dy-wbar .btn { height: 52px; font-size: 15.5px; }

/* Линейка веса — как в проде (v2 app.css:1485-1494): штрихи 2 px (13 / 28 px), цифры под
 * длинными, тонкий курсор с треугольником. Шаг 12 px на 0,1 кг (PX в diary-body.js и
 * pre-food.js). Тот же вид у «Веса» до старта (pre-food.js, [data-rl]). */
.pf-rl { height: 92px; margin: 14px -16px 0; mask-image: linear-gradient(90deg, transparent, #000 17%, #000 83%, transparent); }
.pf-rl__track { top: 28px; }
.pf-rl__track i { flex: 0 0 12px; width: 12px; height: 13px; }
.pf-rl__track i::before { left: 5px; width: 2px; border-radius: 2px; background: rgba(12, 14, 18, .16); }
.pf-rl__track i.M { height: 13px; }
.pf-rl__track i.L { height: 28px; }
.pf-rl__track i.L::before { background: rgba(12, 14, 18, .3); }
.pf-rl__track em { top: 36px; left: 6px; font-size: 12px; font-weight: 600; letter-spacing: -.2px; color: rgba(12, 14, 18, .4); }
.pf-rl__mk { top: 20px; width: 3px; height: 48px; margin-left: -1.5px; border-radius: 3px; background: #1d020c; box-shadow: none; pointer-events: none; }
.pf-rl__mk::after { content: ""; position: absolute; top: -6px; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #1d020c; }

/* Вода: один винный цвет, тонкое кольцо без серого диска, дуга растёт плавно. */
@property --p { syntax: "<number>"; inherits: false; initial-value: 0; }
.gd-w .pf-w__ring, .gd-w .pf-w__ring.gd-full { width: 184px; height: 184px; margin-top: 2px;
  background: conic-gradient(#1d020c calc(var(--p) * 1%), rgba(29, 2, 12, .07) 0);
  transition: --p .5s var(--ease); }
.gd-w .pf-w__ring > div { width: 172px; height: 172px; background: #fff; }
.gd-w .pf-w__ring b { font-size: 40px; font-weight: 600; letter-spacing: -1.2px; }
.gd-w .pf-w__ring small { font-size: 13px; }
.gd-w__last { margin-top: 12px; }
.gd-w__ok { display: block; margin-top: 12px; padding: 0; background: none; font-size: 12.5px; font-weight: 500; color: #1d020c; }
/* объём — словами: неактивные бледные, выбранный крупнее (как .aq-amt) */
.gd-w .pf-w__ch { display: flex; justify-content: center; align-items: baseline; gap: 22px; margin-top: 16px; }
.gd-w .pf-w__ch button, .xs-sheet .gd-w .pf-w__ch button:not(.on), .gd-w .pf-w__ch button.on { height: auto; padding: 6px 0; border-radius: 0; background: none; box-shadow: none; }
.gd-w .pf-w__ch button { font-size: 16px; font-weight: 500; color: rgba(12, 14, 18, .3); }
.gd-w .pf-w__ch button.on { font-size: 20px; font-weight: 600; letter-spacing: -.3px; color: #101014; }
/* отменить — плашка листа, добавить — винная таблетка */
.gd-w .pf-w__bt { justify-content: center; gap: 10px; margin-top: 14px; }
.gd-w .pf-w__bt .pf-w__undo { flex: 0 0 50px; height: 50px; border-radius: 50%; background: #f3f3f5; color: #5f5e66; display: grid; place-items: center; }
.gd-w .pf-w__undo svg { width: 19px; height: 19px; transform: scaleX(-1); }
.gd-w .pf-w__bt .pf-w__plus { flex: 0 0 auto; padding: 0 28px; border-radius: 100px; background: #1d020c; color: #fff; font-size: 15px; }
/* неделя — на плашке листа, бары тонкие винные */
.xs-sheet .gd-w .pf-w__wk { background: #f6f6f8; margin-top: 20px; }
.gd-w .pf-w__bars i { width: 8px; }
.gd-w .pf-w__bars u { background: rgba(29, 2, 12, .16); }
.gd-w .pf-w__bars i.on u { background: #1d020c; }
/* «История за месяц» — ссылка, не плашка */
.gd-w__hist { display: inline-flex; align-items: center; gap: 2px; margin: 6px auto 0; padding: 8px 10px; border: 0; border-radius: 0; background: none; font-family: inherit; font-size: 13px; font-weight: 500; color: #8b8a92; }
.gd-w__hist .chev svg { width: 14px; height: 14px; color: #c7c7cc; }
/* «Готово» — тихая текстовая кнопка: вода пишется сразу по тапу */
.xs-sheet.dy-water .xs-sheet__f { padding-top: 4px; }
.xs-sheet.dy-water .xs-sec { margin-top: 0; }

/* ---- src/styles/41-home.css ---- */
/* Главная и «Мой план»: поправки поверх сгенерированного 40-home-plan.css.
 * В прототипе ширины полос и кольца включались классом .is-in у прокрутки
 * (он же запускал анимацию входа). В v3 экран перерисовывается по данным —
 * вход проигрываем один раз (hp-in на время показа), а размеры задаём всегда. */
.hm-plan__bar i, .phero__bar i { width: var(--w); }
.ring { --p: var(--to, 0); }

/* прокрутка главной: белая шторка доходит до низа экрана, под таб-бар */
.rf-scr.hp-scr { padding-bottom: 0; }
.hp-scr .hm-body { padding-bottom: 0; }
.hp-scr .hm-sheet { padding-bottom: calc(118px + var(--rf-safe-bottom)); min-height: 60vh; }

/* свой аватар: фото из «Личных данных» или из Telegram */
.hm-av.hp-avph { background: #e4e4e8 !important; overflow: hidden; padding: 0; box-shadow: none; }
.hm-av.hp-avph img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
.hm-av, .hm-chat { cursor: pointer; }
.hm-meet__av:not(.gh-ph) { display: grid; place-items: center; color: #8b8a92; background: #f1f1f3; }
.hm-meet__av:not(.gh-ph) svg { width: 24px; height: 24px; }
.hm-meet .gh-chev { width: 16px; height: 16px; color: #b6b5bd; flex: 0 0 auto; display: grid; place-items: center; }
.hm-meet .gh-chev svg { width: 16px; height: 16px; }
.gh-inv .gh-chev { width: 16px; height: 16px; color: #b6b5bd; flex: 0 0 auto; }
.gh-inv .gh-chev svg { width: 16px; height: 16px; }
.hp-meet__hint { flex: 1 0 100%; margin-top: 10px; font-size: 12.5px; color: #8b8a92; line-height: 1.4; }

/* конфетти на вехах «Цели месяца»: слой над карточкой, живёт в панели,
   а не в перерисовываемой разметке (иначе первая же перерисовка его уносит) */
.hp-cf { position: absolute; z-index: 30; overflow: hidden; pointer-events: none; border-radius: 20px; }
.hp-cf i { position: absolute; top: -12px; width: 6px; height: 10px; border-radius: 1px; opacity: 0; animation-name: hpCf; animation-timing-function: linear; animation-fill-mode: forwards; }
@keyframes hpCf { 0% { transform: translateY(0) rotate(0); opacity: 0; } 10% { opacity: .95; } 100% { transform: translateY(240px) rotate(420deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hp-cf { display: none; } }

/* КБЖУ без калорий (РПП): только сколько приёмов записано */
.hp-kb--nk .hm-kb__nk { display: block; }
.hm-kb, .hm-mrow[role="button"], .hm-row[role="button"] { cursor: pointer; }
.hm-mrow .gh-hck { transition: background .2s, box-shadow .2s, color .2s; }
.hm-row.is-busy { opacity: .7; }
.hm-nb:disabled { opacity: .32; }

/* вход экрана: один раз при показе (класс ставит hp-in.js-логика в home.js) */
.hp-in .stack > * { animation: hpUp .5s var(--ease, cubic-bezier(.2, .8, .2, 1)) both; animation-delay: calc(var(--k, 0) * .07s); }
.hp-in .kbar i.on { animation: kbOn .3s ease both; animation-delay: calc(var(--i, 0) * .018s); }
.hp-in .pl4-anim { animation: hpUp .55s var(--ease, cubic-bezier(.2, .8, .2, 1)) both; animation-delay: calc(var(--k, 0) * .06s); }
.hp-in .pl4-hero__fg > * { animation: pl4in .7s var(--ease) both; }
.hp-in .pl4-hero__fg > :nth-child(2) { animation-delay: .08s; }
.hp-in .pl4-hero__fg > :nth-child(3) { animation-delay: .16s; }
.hp-in .pl4-hero__fg > :nth-child(4) { animation-delay: .24s; }
@keyframes hpUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hp-in .stack > *, .hp-in .pl4-anim, .hp-in .pl4-hero__fg > *, .hp-in .kbar i.on { animation: none; } }

/* ---------- «Мой план», неделя, библиотека ---------- */
/* блоки прототипа скрыты до анимации входа (.is-in) — у нас видны всегда */
.pl4-anim, .pl4-hero__fg > * { opacity: 1; transform: none; }
/* герой во весь экран: без статус-бара макета — от настоящего верхнего инсета */
.pl4-hero { height: calc(318px + var(--rf-safe-top)); }
.pl4-hero.gh-rbhero { height: calc(196px + var(--rf-safe-top)); }
.pl4-hero__top { top: calc(var(--rf-safe-top) + 8px); }
.pl4-hero__num { top: calc(var(--rf-safe-top) + 24px); }
.rf-app.hp-hero .rf-topfade { opacity: 0; }
.pl4-bar { height: calc(var(--rf-safe-top) + 56px); padding-bottom: 12px; }
.pl4-bar .rb { bottom: 8px; }
.pl4-gb { color: #fff; cursor: pointer; display: grid; place-items: center; }
.hp-foot { height: 28px; }
.pl4-hero .phero__chip { cursor: pointer; }
/* обложки материалов без стоковых фото: вид по типу материала */
.pl4-cov.hp-cov--gd { background: linear-gradient(150deg, #eeedf2 0%, #dddce3 100%); color: #3f3e46; }
.pl4-cov.hp-cov--gd .pl4-cov__t { color: rgba(16, 16, 20, .62); }
.hp-cov__ic { position: absolute; right: 14px; top: 12px; width: 30px; height: 30px; display: grid; place-items: center; opacity: .9; }
.hp-cov__ic svg { width: 26px; height: 26px; }
.pl4-cov--ck .hp-cov__ic { color: #fff; }
.pl4-mat[role="button"], .lb-card[role="button"], .pg-w[role="button"] { cursor: pointer; }
.hp-ph { display: grid; place-items: center; color: #8b8a92; background: #f1f1f3; }
.hp-ph svg { width: 24px; height: 24px; }
.hp-ph--52 { width: 52px; height: 52px; border-radius: 50%; flex: 0 0 auto; }
.gh-ank { margin-bottom: 12px; }
.pl4-body > .gh-ank:first-child { margin-top: 2px; }
/* поиск в библиотеке — настоящее поле ввода */
.lb-search { cursor: text; }
.lb-search input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: none; font: inherit; color: #101014; padding: 0; -webkit-appearance: none; appearance: none; }
.lb-search input::placeholder { color: #8b8a92; }
.lb-search input::-webkit-search-cancel-button { display: none; }
.lb-search .gh-x { border: 0; padding: 0; cursor: pointer; }
.lb-filters span { cursor: pointer; }
.nv-li { cursor: pointer; }

/* лист договорённости в ките: без заголовка ките — шапка своя, как у #agsheet */
.xs-sheet.hp-ag .xs-sheet__h, .xs-sheet.hp-agp .xs-sheet__h { display: none; }
.xs-sheet.hp-ag .xs-sheet__b, .xs-sheet.hp-agp .xs-sheet__b { padding-top: 6px; }
.xs-sheet.hp-ag .pl3-ag, .xs-sheet.hp-agp .pl3-ag { padding: 0; }
.hp-ag__intro { margin: 14px 0 0; font-size: 14.5px; line-height: 1.5; color: #3f3e46; }
.gh-ag__r[role="button"] { cursor: pointer; }
.gh-ag__r .chev { width: 16px; height: 16px; color: #b6b5bd; flex: 0 0 auto; }
.gh-ag__r .chev svg { width: 16px; height: 16px; }
.gh-ag__ph div { cursor: pointer; }
.gh-ag__ph div.on { background: var(--ok-bg, #eaf6d4); color: var(--ok, #5d7f1c); }
.gh-hb__d i { cursor: pointer; }
.gh-ag__tag:not(.ok) { color: #8b8a92; }

/* ---------- «Подборка для дома» и «Сытость» (экраны в языке «Ещё») ---------- */
.hp-inv { padding-bottom: 12px; }
.ghp-shop, .ghp-sh a { cursor: pointer; }
.hp-sat { display: flex; flex-direction: column; min-height: calc(100% - 64px); padding: 0 16px; }
.hp-sat .ghp-sat__sc { flex: 1 1 auto; overflow: visible; padding: 0 0 18px; }
.hp-sat .gm-err { margin-top: 14px; }
.hp-sat__foot { position: sticky; bottom: 0; margin: 0 -16px; padding: 10px 16px calc(12px + var(--rf-safe-bottom)); }
.ghp-btn:disabled, .ghp-lnk:disabled { opacity: .6; }
.ghp-btn .rf-btn-spin { margin-bottom: -3px; }
.ghp-opt { -webkit-tap-highlight-color: transparent; }

/* правки по ревью скриншотов */
.hm-meet__t { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; row-gap: 4px; }
.hm-meet__t .gh-tz { margin-left: 0; vertical-align: 0; }
.hm-kb.gh-kbnogoal .hm-kb__bar { display: none; }
.ct__k { white-space: nowrap; }
/* Полоски недели в «Договорённостях» дорисовываются, когда карта доезжает до экрана:
 * шортхенд transition с var() экстрактор потерял (пустые лонгхенды) — возвращаем. */
.ct__wk i { transition: transform .5s var(--ease); transition-delay: calc(var(--i, 0) * 55ms + .25s); }
/* лист без действия: «Понятно» — спокойная серая кнопка, как в макете */
.xs-sheet.hp-agp .xs-ok { background: #f1f1f3; color: #111; box-shadow: none; }

/* Строки дневника в шторке Главной — масштаб прода (v2 .mrow, app.css:691-704):
 * плитка 32, кнопки 28, «+» без контура — нейтральная светло-серая заливка (без розового).
 * Записанные вес и вода: значение справа (.gh-v) перед галочкой, подпись скрыта.
 * Скоуп — .hm-sheet: те же .hm-mrow живут в «Прогрессе» и отчёте тренировки. */
.hm-sheet .hm-mrow { gap: 12px; padding: 10px 0; }
.hm-sheet .hm-mic { width: 32px; height: 32px; border-radius: 10px; }
.hm-sheet .hm-mic svg { width: 18px; height: 18px; }
.hm-sheet .hm-mb b { font-size: 15px; }
.hm-sheet .hm-mb small { font-size: 12px; margin-top: 2px; }
.hm-sheet .hm-add, .hm-sheet .hm-done, .hm-sheet .gh-hck { width: 28px; height: 28px; }
.hm-sheet .hm-add { box-shadow: none; background: #f3f3f5; color: #101014; }
.hm-sheet .hm-add svg, .hm-sheet .hm-done svg, .hm-sheet .gh-hck svg { width: 13px; height: 13px; }
.hm-sheet .hm-mrow .gh-v { margin-right: 2px; }
/* галочка в момент записи — мягко, без пружины; задержка — пока Главная въезжает обратно */
.hm-done--new { animation: hmTick .26s var(--ease) .32s both; }
@keyframes hmTick { from { opacity: 0; transform: scale(.6); } }
@media (prefers-reduced-motion: reduce) { .hm-done--new { animation: none; } }

/* ---- src/styles/41-meal-page.css ---- */
/* Страница записанного приёма (20-screens/diary-meal.js, вид view/result) — текущая страница, доработанная по эталону
 * scan-one/c6 (кадр 09): «✓ Записано · 13:20» простым текстом, заголовок — приём; карточка КБЖУ с мини-кольцом ккал
 * (дуги блюд в тонах P1); полоса дня D1; фраза о приёме; строки блюд с дугой доли ккал и вырезом по рамке; свет C1 на
 * фото по тапу строки; «Готово» над мягким затуханием. Фон — нейтральный #f6f6f5, без розового (решение владельца:
 * розовый тон страниц остаётся во всём приложении, кроме карточки записи приёма).
 * Переход A («Кольцо» → страница, diary-scan-lab.js) — классы .scl-land / .scl-snap на панели и переменные --scl-*. */
/* Низ (владелец 10.10, «пустота под “Удалить приём” и под “Готово”», затем «нужно плотно»): «Готово» — в 8 точках над
 * полоской «домой» (--md-cta-b), страница кончается сразу после «Удалить приём»: над и под надписью по 20 (8 + 12 своего поля). Пустота была от двух нижних
 * отступов сразу — у прокрутки (118) и у .ad__body (104 из 40-diary.css). */
.rf-pane[data-tab="meal"] { background: #f6f6f5; }
.rf-pane[data-tab="meal"] { --md-cta-b: max(16px, calc(var(--rf-safe-bottom, 0px) - 13px)); }
.rf-scr.ad--view, .rf-scr.ad--result { background: #f6f6f5; }
/* специфичнее общего .rf-app .rf-pane.rf-pane--full .rf-scr (28 + инсет) — иначе «Удалить приём» уходит под «Готово» */
.rf-app .rf-pane.rf-t-meal > .rf-scr.ad--view, .rf-app .rf-pane.rf-t-meal > .rf-scr.ad--result { padding-bottom: calc(62px + var(--md-cta-b)); }
.rf-app .rf-pane.rf-t-meal:has(> .ad__cta .dy-2nd) > .rf-scr.ad { padding-bottom: calc(106px + var(--md-cta-b)); }
.rf-pane[data-tab="meal"] .ad .dy-delrow { padding: 0; }
.rf-pane[data-tab="meal"] .ad__sec:has(> .ad__cheat) { padding-bottom: 8px; }
.rf-pane[data-tab="meal"] .pl4-bar { background: rgba(246, 246, 245, .86); }
.ad--view .ad__body, .ad--result .ad__body { background: transparent; padding-top: 0; padding-bottom: 0; }

/* шапка: затемнение нейтральным графитом (без розового оттенка) и тёмные стеклянные кнопки 44 px — как в эталоне */
.ad--view .ad__vig, .ad--result .ad__vig { background: linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 24%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .34) 62%, rgba(0, 0, 0, .66)); }
.ad--view .ad__top .pl4-gb, .ad--result .ad__top .pl4-gb { width: 44px; height: 44px; background: rgba(18, 18, 20, .36); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
/* сцена занята (фото загружается и разбирается, кадр убирается): кнопки приглушены, тап объясняет, чего ждать (diary-meal.js held) */
.ad__top__r--wait .pl4-gb:not(.pv-done) { opacity: .5; }

/* шапка: «✓ Записано · 13:20» без плашки, заголовок 34 px */
.ad .md-badge { height: auto; padding: 0; gap: 7px; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  font-size: 14px; line-height: 18px; font-weight: 550; letter-spacing: 0; text-transform: none; text-shadow: 0 1px 8px rgba(0, 0, 0, .25); }
.ad .md-badge svg { flex: none; width: 14px; height: 14px; }
.md-badge .md-tz { opacity: .82; font-weight: 450; }
.ad--view .ad__brow, .ad--result .ad__brow { margin-bottom: 4px; }
.ad--view .ad__t, .ad--result .ad__t { font-size: 34px; line-height: 40px; letter-spacing: -.025em; text-shadow: 0 1px 14px rgba(0, 0, 0, .2); }

/* свет C1 на фото шапки: всё, кроме блюда, мягко гаснет; эллипс скользит между блюдами */
.ad .md-spots { position: absolute; left: 0; right: 0; top: calc((var(--ph-win, 420px) - var(--ph, 520px)) / 2); height: var(--ph, 520px); pointer-events: none; opacity: 0; transition: opacity .3s ease; }
.ad .md-spots.on { opacity: 1; }
.md-spots i { position: absolute; left: 0; top: 0; width: 3000px; height: 3000px; margin: -1500px 0 0 -1500px; transform-origin: 1500px 1500px; will-change: transform;
  transition: transform .38s cubic-bezier(.32, .72, 0, 1); }
.md-spD { background: radial-gradient(circle at 50% 50%, rgba(8, 8, 10, 0) 0, rgba(8, 8, 10, 0) 50px, rgba(8, 8, 10, .38) 100px); }
.md-spL { opacity: .9; background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .2) 0, rgba(255, 255, 255, .07) 45px, rgba(255, 255, 255, 0) 80px); }
.md-spots.md-nt, .md-spots.md-nt i { transition: none; }

/* карточка КБЖУ с мини-кольцом ккал */
.ad .md-kbc { position: relative; align-items: center; height: 84px; margin: -40px 16px 0; padding: 0 6px 0 76px; border-radius: 22px; background: #fff;
  box-shadow: none; }
.md-kbc .md-kring { position: absolute; left: 12px; top: 12px; overflow: visible; }
.md-ka { transition: opacity .3s ease; }
.ad .md-kbc > .k { flex: none; min-width: 64px; padding-right: 12px; align-items: flex-start; text-align: left; }
.ad .md-kbc > .k b { font-size: 30px; line-height: 32px; font-weight: 650; letter-spacing: -.03em; }
.ad .md-kbc small { margin-top: 3px; font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; color: #66656d; white-space: nowrap; }
.ad .md-kbc > .m { flex: 1; height: 44px; align-items: center; border-left: 1px solid rgba(20, 20, 24, .08); }
.ad .md-kbc > .m b { font-size: 19px; line-height: 22px; font-weight: 600; color: #141418; letter-spacing: -.02em; }

/* полоса дня D1 и фраза о приёме */
.md-day { margin: 16px 20px 0; }
/* полоса дня, вариант А макета 10.10 (раздел 2, .db): подписанные отрезки — этот приём чёрный, остальные серые,
   остаток заштрихован, перебор красный; подписи под полосой */
.md-db { margin: 20px 20px 0; }
.md-db__t { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13.5px; line-height: 18px; color: #77767d; }
.md-db__t span:last-child { white-space: nowrap; }
.md-db__t b { color: #101014; font-weight: 600; }
.md-db__t .md-db__over { color: #d0303a; }
.md-db__bar { display: flex; gap: 3px; height: 10px; margin-top: 8px; }
.md-db__bar i { display: block; min-width: 4px; border-radius: 5px; transform-origin: 0 50%; }
.md-db__bar .o { background: #c9c8ce; }
.md-db__bar .c { background: #101014; }
.md-db__bar .r { background: repeating-linear-gradient(-45deg, #e9e9ed 0 5px, #f5f5f7 5px 9px); box-shadow: inset 0 0 0 1px #e3e3e8; }
.md-db__bar .x { background: #e5484d; }
.md-db__lg { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; font-size: 12px; line-height: 16px; color: #8b8a91; }
.md-db__lg span { display: flex; flex-direction: column; min-width: 0; }
.md-db__lg b { color: #101014; font-size: 13px; line-height: 17px; font-weight: 600; }
.md-db__lg .end { text-align: right; align-items: flex-end; }
.md-dt { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 13px; line-height: 18px; color: #66656d; }
.md-dt span { white-space: nowrap; }
.md-dt b { color: #141418; font-weight: 600; }
.md-tr { position: relative; height: 6px; margin-top: 8px; border-radius: 3px; background: rgba(20, 20, 24, .07); overflow: hidden; }
.md-tr i { position: absolute; top: 0; bottom: 0; transform-origin: 0 50%; }
.md-pre { left: 0; background: rgba(20, 20, 24, .28); }
.md-ins { display: flex; align-items: center; gap: 8px; margin: 8px 20px 0; font-size: 14px; line-height: 18px; color: #66656d; }
.md-ins svg { flex: none; width: 14px; height: 14px; color: #66656d; }
.md-ins span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-day + .ad__sec, .md-ins + .ad__sec { padding-top: 22px; }

/* «На обед и ужин» после «Блюд» (макет 10.10, раздел 1, .next): три тарелки в долю приёма впереди и «Все тарелки до N ккал» */
.md-next { margin: 22px 16px 0; padding: 14px 0 14px 14px; border-radius: 22px; background: #fff; }
.md-next__hd { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-right: 14px; }
.md-next__hd b { font-size: 18px; line-height: 23px; font-weight: 700; letter-spacing: -.3px; color: #101014; }
.md-next__hd span { flex: none; font-size: 13px; color: #8b8a91; }
.md-next__sub { margin: 2px 0 10px; padding-right: 14px; font-size: 13px; line-height: 18px; color: #77767d; }
.md-next__rail { display: flex; gap: 10px; overflow-x: auto; padding-right: 14px; scrollbar-width: none; overscroll-behavior-x: contain; }
.md-next__rail::-webkit-scrollbar { display: none; }
.md-pl { flex: 0 0 132px; min-width: 0; cursor: pointer; }
.md-pl__ph { position: relative; display: grid; place-items: center; width: 132px; height: 104px; border-radius: 16px; background-size: cover; background-position: center; overflow: hidden; }
.md-pl b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin-top: 6px; font-size: 13.5px; line-height: 1.25; font-weight: 600; color: #101014; }
.md-pl small { display: block; margin-top: 1px; font-size: 12px; line-height: 16px; color: #8b8a91; }
.md-pl--all { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; height: 104px; padding: 0 10px; border-radius: 16px; background: #f5f5f7;
  font-size: 13.5px; line-height: 1.25; font-weight: 600; color: #101014; text-align: center; }
.md-next + .gd-in, .md-next + .ad__rows { margin-top: 22px; }

/* блюда: дуга доли ккал вокруг выреза по рамке, выбранная строка — мягкий фон */
.ad__sec--list .ad__sec__h b { font-size: 20px; font-weight: 700; letter-spacing: -.015em; }
.ad__sec--list .ad__sec__h .ad__sec__n { font-size: 13px; color: #66656d; }
.ad .md-it { position: relative; min-height: 72px; gap: 0; padding: 0 16px 0 88px; }
.ad .md-it + .ad__it::before, .ad .ad__it + .md-it::before { left: 88px; background: rgba(20, 20, 24, .08); }
.md-sel { position: absolute; inset: 2px 8px; border-radius: 16px; background: rgba(20, 20, 24, .05); opacity: 0; transition: opacity .3s ease; }
.md-it.md-on .md-sel { opacity: 1; }
.ad .md-th { position: absolute; left: 24px; top: 50%; width: 48px; height: 48px; margin-top: -24px; border-radius: 50%; background-repeat: no-repeat; box-shadow: none; }
.ad .md-th.ad__it__ph--ic { background: rgba(20, 20, 24, .06); }
.md-arc { position: absolute; left: 18px; top: 50%; width: 60px; height: 60px; margin-top: -30px; overflow: visible; }
.ad .md-it .ad__it__b { position: relative; padding: 12px 0; }
.ad .md-it .ad__it__b b { font-size: 16px; line-height: 21px; font-weight: 400; letter-spacing: -.01em; color: #141418; }
.ad .md-it .ad__it__b small { margin-top: 2px; font-size: 13px; line-height: 18px; color: #66656d; }
.ad .md-it .ad__it__k { position: relative; margin-left: 10px; font-size: 16px; font-weight: 600; color: #141418; }
.ad .md-it .ad__it__k small { margin-left: 3px; font-size: 13px; font-weight: 450; color: #66656d; }
.ad .md-it .chev { position: relative; width: 22px; display: flex; justify-content: flex-end; color: rgba(20, 20, 24, .45); }
.ad .md-add { min-height: 72px; padding: 0 16px 0 88px; gap: 0; }
.ad .md-add .ad__it__ph--add { position: absolute; left: 24px; top: 50%; width: 48px; height: 48px; margin: -24px 0 0; border-radius: 50%; background: rgba(20, 20, 24, .06); color: #141418; }
.ad .md-add .ad__it__b b { font-size: 16px; font-weight: 400; letter-spacing: -.01em; }
.ad .md-add .ad__it__b small { font-size: 13px; color: #66656d; }

/* «Готово» над мягким затуханием */
.rf-pane[data-tab="meal"] > .ad__cta { left: 0; right: 0; bottom: 0; padding: 10px 16px var(--md-cta-b);
  background: linear-gradient(rgba(246, 246, 245, 0), #f6f6f5 10px); pointer-events: none; }
.rf-pane[data-tab="meal"] > .ad__cta > * { pointer-events: auto; }
.rf-pane[data-tab="meal"] > .ad__cta .dh-cta__b { height: 54px; border-radius: 16px; background: #141418; color: #fff; font-size: 17px; font-weight: 600; letter-spacing: -.01em; box-shadow: none; }
.rf-pane[data-tab="meal"] > .ad__cta .dh-cta__b:disabled { background: #e9e9ec; color: #8b8a92; }

/* ---------- переход A: «Кольцо» садится в страницу (diary-scan-lab.js landStart / landVars) ---------- */
/* Страница уже нарисована под слоем: шапка прозрачна (фото и диафрагма — слой ниже), лист страницы поднимается,
   тексты шапки и строки проявляются от одного прогресса p (--scl-*). Кольцо карточки рисует слой — своё скрыто. */
.rf-pane.scl-land > .rf-scr { overflow: hidden; background: linear-gradient(to bottom, transparent calc(var(--scl-hh, 420px) + var(--scl-sy, 0px)), #f6f6f5 0) !important; }
.scl-land .ad__photo { background: transparent !important; }
.scl-land .ad__mesh, .scl-land .ad__img, .scl-land .ad__fill, .scl-land .md-spots { opacity: 0 !important; transition: none !important; }
.scl-land .ad__vig { opacity: var(--scl-p, 1); }
.scl-land .phero__grain { opacity: calc(.2 * var(--scl-p, 1)); }
.scl-land .ad__vig, .scl-land .phero__grain {
  -webkit-mask-image: radial-gradient(circle var(--scl-ir, 2000px) at var(--scl-ix, 50%) var(--scl-iy, 50%), #000 97.5%, transparent 100%);
  mask-image: radial-gradient(circle var(--scl-ir, 2000px) at var(--scl-ix, 50%) var(--scl-iy, 50%), #000 97.5%, transparent 100%); }
.scl-land .ad__fg { opacity: var(--scl-hq, 1); transform: translate3d(0, calc((1 - var(--scl-hq, 1)) * 10px), 0); transition: none; }
.scl-land .ad__top, .scl-land .pva-dots { opacity: var(--scl-tq, 1); }
.scl-land .ad__kbc, .scl-land #adBody { transform: translate3d(0, var(--scl-sy, 0px), 0); }
.scl-land .md-kring { opacity: 0; }
.scl-land .md-day { opacity: var(--scl-dq, 1); }
.scl-land .md-day .md-seg { transform: scaleX(0); }
.scl-land .md-ins { opacity: var(--scl-iq, 1); }
.scl-land .md-add { opacity: var(--scl-aq, 1); }
.scl-land .md-it[data-r="0"] { opacity: var(--scl-r0); transform: translate3d(0, var(--scl-ry0), 0); }
.scl-land .md-it[data-r="1"] { opacity: var(--scl-r1); transform: translate3d(0, var(--scl-ry1), 0); }
.scl-land .md-it[data-r="2"] { opacity: var(--scl-r2); transform: translate3d(0, var(--scl-ry2), 0); }
.scl-land .md-it[data-r="3"] { opacity: var(--scl-r3); transform: translate3d(0, var(--scl-ry3), 0); }
.scl-land .md-it[data-r="4"] { opacity: var(--scl-r4); transform: translate3d(0, var(--scl-ry4), 0); }
.scl-land .md-it[data-r="5"] { opacity: var(--scl-r5); transform: translate3d(0, var(--scl-ry5), 0); }
.scl-land .md-it[data-r="6"] { opacity: var(--scl-r6); transform: translate3d(0, var(--scl-ry6), 0); }
.scl-land .md-it[data-r="7"] { opacity: var(--scl-r7); transform: translate3d(0, var(--scl-ry7), 0); }
.scl-land .md-it[data-r="8"] { opacity: var(--scl-r8); transform: translate3d(0, var(--scl-ry8), 0); }
.scl-land .md-it[data-r="9"] { opacity: var(--scl-r9); transform: translate3d(0, var(--scl-ry9), 0); }
.rf-pane.scl-land > .ad__cta { transform: translate3d(0, var(--scl-cy, 0px), 0); }
/* миг передачи: слой убран — фото шапки и тексты встают сразу, без своих переходов (иначе вспышка тёмной подложки) */
.scl-snap .ad__img, .scl-snap .ad__fill, .scl-snap .ad__vig, .scl-snap .phero__grain, .scl-snap .ad__fg, .scl-snap .md-spots { transition: none !important; }

@media (max-width: 359px) {
  .md-dt { font-size: 12px; letter-spacing: -.01em; }
  .md-of { display: none; }
  .ad .md-it .ad__it__b small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (prefers-reduced-motion: reduce) {
  .md-spots, .md-spots i, .md-sel, .md-ka { transition: none; }
}

/* ---- src/styles/41-meal-scan.css ---- */
/* Сцена приёма: кадр в шапке и «прицел» сканера — поправки поверх сгенерированного 40-diary.css.
 *
 * 1) Кадр стоит на месте. В прототипе фото при съёмке «приземлялось» (adLand: масштаб 1,14 → 1 с размытием),
 *    в сканере медленно наезжало (adKen: 1 → 1,08 за 8 с), а шапка меняла высоту 840 → 420 при
 *    background-size: cover — масштаб кадра пересчитывался, и он то приближался, то скачком отъезжал.
 *    Ещё на iOS луч (mix-blend-mode: screen) поверх слоя с идущей анимацией масштаба рисовал под собой
 *    кадр другого масштаба — «два кадра» в одном снимке экрана. Теперь: слой кадра — один и тот же
 *    прямоугольник во всех режимах (высота --ph задаёт JS по пропорциям фото, диапазон 420…560 px),
 *    масштабирования нет, режимы наложения не используются.
 * 2) «Прицел»: чип с названием блюда, вспышка захвата, вспышка-«сканирование». Правила атласа,
 *    которые извлечение не перенесло (.ad__fly, .ad__shine.go), плюс «уменьшить движение». */

/* ---------- кадр неподвижен от съёмки до результата ---------- */
.ad { --ph-win: 420px; }
.ad .ad__zoom { will-change: auto; transition: none; }
.ad .ad__img {
  inset: calc((var(--ph-win) - var(--ph, 520px)) / 2) 0 auto 0;
  height: var(--ph, 520px);
  transition: opacity .45s var(--ease);
}
.ad .ad__img.on,
.ad--capture .ad__img.on,
.ad--scan .ad__img.on,
.ad--ask .ad__img.on { animation: none; }
.ad__beam, .ad__grid, .ad__shine { mix-blend-mode: normal; }
/* Кадр показан целиком (пропорции фото), а не растянут cover-ом на всю шапку 840 px, — под ним и вокруг
   него тот же кадр, размытый и притемнённый (вместо чёрной полосы между фото и нижней панелью).
   В результате (окно 420 px) слой кадра закрывает окно целиком, подложка не видна. */
.ad__fill {
  position: absolute; inset: -60px; background-size: cover; background-position: center center; opacity: 0;
  filter: blur(28px) brightness(.5) saturate(1.15); transition: opacity .45s var(--ease);
}
.ad__fill.on { opacity: 1; }
.ad--result .ad__fill, .ad--view .ad__fill { display: none; }

/* ---------- прицел ---------- */
/* Захват «по кадру целиком» — когда ни одно блюдо показанного кадра не пришло с рамкой (bbox от сервера):
   прицел встаёт по центру видоискателя (.ad__vf: 116 px сверху, 290 px снизу от шапки 840 px), а не на выдуманное место. */
.ad__tag--c { left: 50%; }   /* top задаёт JS (vfY() в diary-meal.js — центр .ad__vf ниже) */
/* Перерисовка экрана (опрос, смена данных) не должна повторять вспышку захвата: конечное состояние. */
.ad__tag--set .ad__ret { animation: none; transform: none; opacity: 1; }
.ad__tag--set .ad__ret::before, .ad__tag--set .ad__lead, .ad__tag--set .ad__lbl { animation: none; }
.ad__tag--set .ad__ret::before { display: none; }
.ad__tag--set .ad__lead { transform: scaleX(1); }
.ad__tag--set.ad__tag--b .ad__lead { transform: scaleY(1); }
.ad__tag--set .ad__lbl { opacity: 1; transform: none; }
.ad__tag--set.ad__tag--b .ad__lbl { transform: translate(-50%, 0); }
.ad__tag--set.ad__tag--l .ad__lbl { transform: none; }
/* Подпись слева от прицела, когда справа не помещается (правила атласа; извлечение их не захватило). */
.ad__tag--l .ad__lead { left: auto; right: 30px; transform-origin: 100% 50%; }
.ad__tag--l .ad__lbl { left: auto; right: 54px; transform: translateX(8px); }
/* Чип названия: вылетает из прицела в строку списка (JS: flyChip). */
.ad__fly {
  position: absolute; left: 0; top: 0; z-index: 9; pointer-events: none; max-width: 62%; height: 26px; padding: 0 10px;
  border-radius: 100px; background: #fff; color: #101014; font-size: 12px; font-weight: 600;
  display: flex; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .4);
}
/* «Считаю КБЖУ»: световая полоса по кадру — и сразу результат. */
.ad__shine.go { animation: adShine .7s ease-out both; }
@keyframes adShine { from { transform: translateX(-110%); opacity: 1; } to { transform: translateX(110%); opacity: 1; } }

/* ---------- уменьшить движение ---------- */
/* Ожидание без луча и частиц (сетка и рамки остаются), захват — сразу в конечном виде, без пролёта чипа. */
@media (prefers-reduced-motion: reduce) {
  .ad--scan .ad__beam, .ad--scan .ad__amb i, .ad__dust i, .ad__shine.go { animation: none; opacity: 0; }
  .ad--scan .ad__vf i { animation: none; }
  .ad__ret, .ad__lead, .ad__lbl { animation: none; }
  .ad__ret { transform: none; opacity: 1; }
  .ad__ret::before, .ad__ret::after { display: none; }
  .ad__lead { transform: scaleX(1); }
  .ad__tag--b .ad__lead { transform: scaleY(1); }
  .ad__lbl { opacity: 1; transform: none; }
  .ad__tag--b .ad__lbl { transform: translate(-50%, 0); }
  .ad__tk { animation: none; }
  .ad .ad__img { transition: none; }
}

/* ---------- видоискатель следует за кадром ---------- */
/* Рамки — по кадру, а не по фиксированному отступу от низа: нижние углы на 24 px выше нижнего края слоя кадра
   (слой: top = (--ph-win − --ph) / 2, высота --ph; шапка 840 px ⇒ bottom = 654 − --ph / 2). vfY() в diary-meal.js
   считает по той же формуле — правите здесь, правьте и там. */
.ad--capture .ad__vf, .ad--scan .ad__vf { bottom: calc(654px - var(--ph, 520px) / 2); }

/* ---------- нижняя панель сканера (макет design-preview/meal-capture, вариант Б) ---------- */
/* Отступ снизу — safe-area + 16 px (раньше 16 px: панель липла к home-индикатору). */
.ad__panel { bottom: calc(var(--rf-safe-bottom, 0px) + 16px); }
.ad__panel--scan { padding: 0; border-radius: 26px; overflow: hidden; }
.ad__panel--scan .sp-st { display: flex; align-items: center; gap: 14px; padding: 18px 20px; }
.ad__panel--scan .sp-tx { flex: 1 1 auto; min-width: 0; }
.ad__panel--scan .sp-tx b { display: block; font-size: 17px; font-weight: 600; letter-spacing: -.3px; line-height: 1.2; }
.ad__panel--scan .sp-tx small { display: block; font-size: 13px; color: rgba(255, 255, 255, .6); margin-top: 3px; }
.ad__panel--scan .sp-tx small:empty { display: none; }
.ad__panel--scan .sp-st.gd-thin #adProgT { color: rgb(255, 217, 168); }
.ad__panel--scan .sp-spin { width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto; border: 2.5px solid rgba(255, 255, 255, .25); border-top-color: #fff; animation: spin 1.1s linear infinite; }
.ad__panel--scan .sp-num { display: flex; align-items: baseline; flex: 0 0 auto; }
.ad__panel--scan .sp-num[hidden], .ad__panel--scan .ad__mac[hidden] { display: none; }
.ad__panel--scan .sp-num .odo { margin-left: 0; font-size: 30px; }
.ad__panel--scan .sp-num em { font-style: normal; font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, .6); margin-left: 5px; }
.ad__panel--scan .ad__mac { margin: -4px 20px 6px; }
.ad__panel--scan .ad__ledger { min-height: 0; gap: 0; padding: 0 20px; }
.ad__panel--scan .ad__ledger:empty { display: none; }
.ad__panel--scan .ad__tk { background: none; box-shadow: none; border-radius: 0; padding: 0; min-height: 44px; }
.ad__panel--scan .ad__tk + .ad__tk { border-top: 1px solid rgba(255, 255, 255, .08); }
.ad__panel--scan .ad__tk i { width: 20px; height: 20px; }
.ad__panel--scan .ad__tk b { font-size: 14.5px; }
.ad__panel--scan .ad__tk small { font-size: 13px; }
/* Главное действие — одно: «Не ждать» (белая, как «Распознать» до сканирования); «Ещё кадр» и «Описать» — ссылками. */
.ad__panel--scan .sp-go { display: flex; align-items: center; justify-content: center; gap: 10px; width: calc(100% - 32px); margin: 8px 16px 0; height: 54px; border: 0; border-radius: 100px;
  background: #fff; color: #101014; font-family: inherit; font-size: 15.5px; font-weight: 600; letter-spacing: -.2px; box-shadow: 0 16px 32px rgba(0, 0, 0, .35); cursor: pointer; }
.ad__panel--scan .sp-go.gd-busy { background: rgba(255, 255, 255, .2); color: #fff; box-shadow: none; cursor: default; }
.ad__panel--scan .sp-go .gd-spin { width: 18px; height: 18px; border-color: #fff rgba(255, 255, 255, .25) rgba(255, 255, 255, .25); }
.ad__panel--scan .sp-cap { text-align: center; font-size: 12.5px; color: rgba(255, 255, 255, .6); margin: 9px 16px 0; line-height: 1.3; }
/* «Не ждать · ИИ допишет сам» во время поиска — как в «Кольце» (макет 10.10, раздел 5, .sc .nw): тёмная #101014, 58 px,
   кольцо загрузки слева, мягкий блик раз в 3,2 с, подпись сверху. На тёмном стекле панели — тонкий светлый контур,
   иначе тёмная кнопка сливается с подложкой. */
.ad__panel--scan .sp-cap--nw { margin: 16px 16px 10px; }
.ad__panel--scan .sp-go.nw { position: relative; overflow: hidden; gap: 12px; height: 58px; margin-top: 0; background: #101014; color: #fff; font-size: 16.5px; letter-spacing: -.2px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 10px 26px -12px rgba(16, 16, 20, .6); }
.ad__panel--scan .sp-go.nw::before { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .22) 45%, rgba(255, 255, 255, .34) 50%, rgba(255, 255, 255, .22) 55%, transparent);
  animation: nwSweep 3.2s ease-in-out 1s infinite; }
@keyframes nwSweep { 0% { left: -40%; } 55%, 100% { left: 120%; } }
.ad__panel--scan .sp-go.nw small { font-size: 14px; font-weight: 500; opacity: .7; }
.ad__panel--scan .nw-sp { position: relative; flex: none; width: 22px; height: 22px; }
.ad__panel--scan .nw-sp svg { position: absolute; inset: 0; width: 22px; height: 22px; animation: spin 1.1s linear infinite; }
@media (prefers-reduced-motion: reduce) { .ad__panel--scan .sp-go.nw::before { animation: none; display: none; } }

/* «Свой ответ…» — последний вариант уточнения (макет 10.10, .sc .q .o.own / .of) в тёмной панели обычного сканера:
   та же форма (48 px, обводка 1,5 px, карандаш; поле с обводкой и круглой кнопкой отправки), цвета — для тёмного стекла. */
.ad__q .dy-qown { display: flex; align-items: center; gap: 8px; width: 100%; height: 48px; margin-top: 10px; padding: 0 14px; border: 0; border-radius: 14px; background: transparent;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .25); color: rgba(255, 255, 255, .78); font-family: inherit; font-size: 15.5px; text-align: left; cursor: pointer; }
.ad__q .dy-qown svg { flex: none; }
.ad__q .dy-qof { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 10px 8px 10px 14px; border-radius: 14px; box-shadow: inset 0 0 0 1.5px #fff; }
.ad__q .dy-qof__in { flex: 1 1 auto; min-width: 0; height: 22px; margin: 0; padding: 0; border: 0; outline: 0; resize: none; background: none; color: #fff; font-family: inherit; font-size: 16px; line-height: 22px; }
.ad__q .dy-qof__in::placeholder { color: rgba(255, 255, 255, .45); }
.ad__q .dy-qof__go { flex: none; width: 38px; height: 38px; border: 0; border-radius: 50%; background: #fff; color: #101014; display: grid; place-items: center; cursor: pointer; }
.ad__panel--scan .sp-lnk { display: flex; justify-content: center; gap: 26px; padding: 6px 16px 14px; }
.ad__panel--scan .sp-lnk button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 6px; border: 0; background: none; color: #fff; font-family: inherit; font-size: 14.5px; font-weight: 500; cursor: pointer; }
.ad__panel--scan .sp-lnk svg { width: 18px; height: 18px; color: rgba(255, 255, 255, .75); }
.ad__panel--scan .sp-go.gd-busy + .sp-cap { margin-bottom: 18px; }

/* ---------- «словами или из базы ›» под пустым приёмом ---------- */
/* Отдельная кнопка (мишень 44 px), выровнена по тексту строки: 16 (поля) + 62 (кружок) + 14 (зазор). */
.slot--empty .slot__lk { display: flex; align-items: center; gap: 2px; width: 100%; min-height: 44px; margin-top: -14px; padding: 0 16px 2px 92px; border: 0; background: none;
  font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: -.1px; color: var(--ink); text-align: left; cursor: pointer; }
.slot--empty .slot__lk .chev { width: 16px; height: 16px; color: rgb(182, 181, 189); }
.slot--empty .slot__lk .chev svg { width: 16px; height: 16px; }

/* ---------- лента кадров, листы, статус ---------- */
/* Крестик убрать кадр: значок 20 px, зона нажатия — 44 px. */
.ad__th__x::before { content: ""; position: absolute; inset: -12px; }
.dy-sh-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sp-k, .ad__panel--scan .sp-tx b .sp-k { font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, .6); letter-spacing: 0; }
/* «Не ждать» появляется сразу после «Распознать» (через 0,4 с — защита от двойного тапа), мягко, без скачка панели вниз —
   панель растёт вверх (она прижата к низу). */
.ad__panel--scan .sp-act--in .sp-go, .ad__panel--scan .sp-act--in .sp-cap { animation: spIn .42s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes spIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ad__panel--scan .sp-act--in .sp-go, .ad__panel--scan .sp-act--in .sp-cap { animation: none; } }

/* Время приёма с поясом профиля, когда телефон в другом поясе (diary-meal.js, tzTail). */
.ad__chip .ad__tz { font-size: 12px; font-weight: 500; opacity: .75; margin-left: 4px; }

/* ---------- фото приёма: лента в шапке и режим «Фото» на месте (diary-meal.js, phHero) ---------- */
/* Точки кадров — стекло шапки; в обычном виде — под заголовком, над карточкой КБЖУ. */
.pva-dots { position: absolute; left: 0; right: 0; bottom: 50px; z-index: 4; display: flex; justify-content: center; gap: 6px; }
.pva-dots i { position: relative; width: 6px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .45); transition: width .2s; cursor: pointer; }
.pva-dots i::before { content: ""; position: absolute; inset: -10px -4px; }
.pva-dots i.on { width: 18px; background: #fff; }
.ad .pl4-gb.pv-done { background: #fff; color: #101014; box-shadow: none; }
/* Режим «Фото»: заголовок и значок уходят, на их месте — компактная панель. Края — как у карточки КБЖУ
   (20 px), панель стоит на месте заголовка и не заходит в верхние две трети кадра. */
.pl4-hero.pva-on .ad__fg { opacity: 0; pointer-events: none; }
.pva-bar { position: absolute; left: 20px; right: 20px; bottom: 58px; z-index: 5; padding: 10px; border-radius: 22px;
  background: rgba(16, 16, 20, .44); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); color: #fff; }
.pva-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 22px; padding: 0 6px 8px; font-size: 13.5px; }
.pva-h b { font-weight: 600; letter-spacing: -.2px; }
.pva-h small { font-size: 12px; color: rgba(255, 255, 255, .62); text-align: right; }
.pva-h .pva-dots { position: static; gap: 5px; }
.pva-h .pva-dots i { width: 5px; height: 5px; }
.pva-h .pva-dots i.on { width: 14px; }
.pva-note { display: flex; gap: 8px; align-items: flex-start; padding: 2px 6px 10px; font-size: 12.5px; line-height: 1.35; color: rgba(255, 255, 255, .86); }
.pva-note svg { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 1px; color: rgba(255, 255, 255, .7); }
.pva-note--warn { color: rgb(255, 224, 176); }
.pva-note--warn svg { color: rgb(255, 196, 102); }
.pva-acts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pva-acts--2 { grid-template-columns: 1fr 1fr; }
.pva-b { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; height: 44px; padding: 0 8px; border: 0; border-radius: 14px; background: rgba(255, 255, 255, .14);
  color: #fff; font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: -.2px; white-space: nowrap; cursor: pointer; }
.pva-b span { overflow: hidden; text-overflow: ellipsis; }
.pva-b svg { flex: 0 0 auto; width: 16px; height: 16px; }
.pva-b:disabled { opacity: .38; cursor: default; }
.pva-b--red { background: #fff; color: rgb(215, 55, 47); }
.pva-b--on { background: #fff; color: #101014; }
/* Узкий экран (320 px): у трёх действий остаются только слова — значки не помещаются. */
@media (max-width: 359px) { .pva-b { font-size: 12.5px; padding: 0 4px; } .pva-acts:not(.pva-acts--2) .pva-b svg { display: none; } }

/* ---- src/styles/41-more-area.css ---- */
/* Область «Ещё» — поправки поверх сгенерированного 40-more-area.css:
 * правила прототипа, чьи состояния инструмент не поймал (пустые списки),
 * и то, чего в прототипе нет (состояния сервера). Префиксы — mt- встречи,
 * tp- профили, nt- уведомления, sb- подписка, hp- помощь, fb- обращения,
 * mrt- оценка встречи, ch- чат. */

/* пустой список календаря/окон — more.css прототипа (.mt-emp) */
.mt-emp { padding: 12px 6px 14px; font-size: 14px; color: #8e8e93; }

/* листание недель при переносе без постоянного времени (в прототипе неделя одна) */
.mt-wkn { display: inline-flex; gap: 6px; flex: 0 0 auto; }
.mt-wkn button { width: 30px; height: 30px; border: 0; border-radius: 50%; background: #fff; color: #111; display: grid; place-items: center; padding: 0; cursor: pointer; }
.mt-wkn button svg { width: 16px; height: 16px; }
.mt-wkn button.is-r svg { transform: rotate(180deg); }
.mt-wkn button:disabled { opacity: .35; cursor: default; }

/* профили коуча и тренера: шапка-фото с самого верха окна (в прототипе — под статус-баром макета) */
.rf-pane[data-tab="coach"] .rf-scr, .rf-pane[data-tab="trainer"] .rf-scr { padding-top: 0; background: var(--rf-page); }
.tp-back { top: calc(var(--rf-safe-top) + 10px); }
.rf-app.tp-on .rf-topfade { background: linear-gradient(180deg, var(--rf-page) 0%, var(--rf-page) 58%, rgba(var(--rf-page-rgb), 0) 100%); transition: opacity .2s; }
.rf-app.tp-top .rf-topfade { opacity: 0; }
.tp-id__st.on i { background: #34c759; }
.tp-win__st.on > i { background: #34c759; }
.tp-cal--e { background: #f2f2f1; color: #111; }
.tp-cal--e svg { width: 22px; height: 22px; }
.tp-next__b .is-main { background: #111; color: #fff; }

/* нижняя кнопка переноса/графика: спрятанная — не участвует в прокрутке оболочки
   (фокус поля в листе прокручивал .rf-app и показывал пустую кнопку) */
.xs-bar2 { visibility: hidden; transition: transform .4s var(--spring, ease), visibility 0s linear .4s; }
.xs-bar2.on { visibility: visible; transition: transform .4s var(--spring, ease), visibility 0s; }
.rf-app.xs-editing .xs-bar2.on { padding-bottom: max(30px, calc(var(--rf-safe-bottom) + 12px)); }

/* оценка встречи: слой на всё окно — отступы под настоящие инсеты вместо статус-бара макета */
.mrt-head { padding-top: calc(var(--rf-safe-top) + 14px); }
.mrt-foot { padding-bottom: max(26px, calc(var(--rf-safe-bottom) + 12px)); }
.rf-app.mrt-on .dock { opacity: 0; pointer-events: none; }
.rf-app.mrt-on .rf-topfade { opacity: 0; }
.mrt-mat[role="button"] { cursor: pointer; }
.mrt-go .rf-btn-spin { margin-right: 8px; }

/* ---------- переписка с тренером ---------- */
/* окно чата — на всю панель, свои инсеты и клавиатура (--ch-kb ставит chat.js по visualViewport) */

.rf-app.in-chat .rf-topfade { display: none; }

.gm-att__t video { width: 100%; height: 100%; object-fit: cover; display: block; }
.gm-under { margin: 2px 12px 8px auto; }
/* запись голоса — more.css прототипа (в состояниях инструмента не ловится: нужен микрофон) */

/* просмотр фото — more_gap_more.js прототипа */
.gm-vw { position: absolute; inset: 0; z-index: 300; background: #000; display: flex; flex-direction: column; color: #fff; animation: gmVw .2s ease-out; touch-action: pan-y; }
@keyframes gmVw { from { opacity: 0; } to { opacity: 1; } }
.gm-vw__top { display: flex; align-items: center; justify-content: space-between; padding: calc(var(--rf-safe-top) + 12px) 16px 10px; }
.gm-vw__top span { font-size: 15px; font-weight: 600; letter-spacing: -.2px; }
.gm-vw__top button { width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .16); color: #fff; display: grid; place-items: center; padding: 0; cursor: pointer; }
.gm-vw__top button svg { width: 16px; height: 16px; }
.gm-vw__img { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; }
.gm-vw__img img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.gm-vw__dots { display: flex; justify-content: center; gap: 6px; padding: 14px 0 0; }
.gm-vw__dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .35); }
.gm-vw__dots i.on { background: #fff; }
.gm-vw__cap { padding: 12px 20px max(40px, calc(var(--rf-safe-bottom) + 16px)); }
.gm-vw__cap b { display: block; font-size: 15px; font-weight: 500; line-height: 1.4; }
.gm-vw__cap small { display: block; margin-top: 3px; font-size: 12.5px; color: rgba(255, 255, 255, .6); }

/* видео и файл в своём (тёмном) пузыре */

.rf-app.in-chat .rf-toast, .rf-app.rf-full.in-chat .rf-toast { bottom: calc(132px + var(--rf-safe-bottom)); }
/* Пузырь загрузки: без подписи он сжимался до ширины превью и «Загрузка 45%» переносилась. */
.gm-up { min-width: 136px; }
.gm-up__c b { white-space: nowrap; }
.rf-app.in-chat .xs-undo, .rf-app.rf-full.in-chat .xs-undo { bottom: calc(128px + var(--rf-safe-bottom)); }

/* Аватар без фото — одна палитра на всё приложение (токены --rf-av-* в 91-avatar.css, решение
   владельца 29–30.09): профиль коуча/тренера/врача без фото (большая монограмма в герое) и
   «смена тренера» в чате. Раньше — бежевый герой и серый кружок с белой буквой. */
.tp-hero--mono { background: var(--rf-av-bg); }
.tp-hero--mono .tp-hero__mono { color: rgba(74, 26, 51, .12); }   /* водяной знак: тон буквы аватара, приглушённый */
.gm-ho__av i { background: var(--rf-av-bg); color: var(--rf-av-fg); }

/* ---- src/styles/41-prestart.css ---- */
/* Поправки этапа «до старта» поверх 40-prestart.css (сгенерирован из прототипа).
 * Логотип этапа — свой класс .pre-logo (у .rf-logo в 90-frame.css другая роль —
 * картинка на экране входа), поэтому правила прототипа .rf-logo повторены здесь. */
.pre-logo { display: flex; align-items: center; justify-content: center; line-height: 0; color: #2a2a2a; font-size: 0; letter-spacing: 0; }
.pre-logo svg { display: block; height: 22px; width: auto; flex: 0 0 auto; }
.pre-logo--light { color: #fff; }
.ow-hero .pre-logo { justify-content: flex-start; }
.ow-hero .pre-logo svg { height: 20px; }

/* Запасная тёмная серия «Вы записаны» (прод firstBookingSlides) и ошибка сохранения приёма:
 * в состояниях атласа их не открыть (нужен отказ GSAP / три обрыва подряд), поэтому правила
 * прототипа (more.css) перенесены сюда как есть. */
.sb-burst{position:relative;width:112px;height:112px;display:grid;place-items:center}
.sb-burst i{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(255,255,255,.3);animation:sbRing 2.4s ease-out infinite}
.sb-burst i:nth-child(2){animation-delay:.8s}
.sb-burst i:nth-child(3){animation-delay:1.6s}
.sb-burst span{width:84px;height:84px;border-radius:50%;background:#fff;color:#1d020c;display:grid;place-items:center;box-shadow:0 18px 50px rgba(0,0,0,.35)}
.sb-burst span svg{width:40px;height:40px}
.sb-meet{display:flex;align-items:center;gap:13px;width:100%;margin-top:34px;padding:14px;border-radius:22px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);text-align:left}
.sb-meet img{flex:0 0 56px;width:56px;height:56px;border-radius:18px;object-fit:cover}
.sb-meet small{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.sb-meet b{display:block;font-size:16px;margin-top:3px}
.sb-meet span{display:block;font-size:12.5px;color:rgba(255,255,255,.6);margin-top:2px}
.sb-two{width:100%;display:flex;flex-direction:column;align-items:stretch}
.sb-c{position:relative;display:flex;align-items:center;gap:12px;padding:14px 14px 14px 16px;border-radius:22px;text-align:left}
.sb-c em{position:absolute;left:-8px;top:-8px;width:24px;height:24px;border-radius:50%;font-style:normal;font-size:12px;font-weight:800;display:grid;place-items:center}
.sb-c img{flex:0 0 50px;width:50px;height:50px;border-radius:50%;object-fit:cover}
.sb-c small{display:block;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.sb-c b{display:block;font-size:17px;margin-top:2px}
.sb-c span{display:block;font-size:12.5px;margin-top:2px}
.sb-c--f{background:linear-gradient(135deg,#1b1b1e 0%,#2c2c30 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.sb-c--f em{background:#2a2a2e;color:#fff;box-shadow:0 0 0 2px #0e0b10}
.sb-c--f small{color:rgba(255,255,255,.6)}
.sb-c--f span{color:rgba(255,255,255,.6)}
.sb-c--p{background:#fff;color:#1d020c}
.sb-c--p em{background:#1d020c;color:#fff;box-shadow:0 0 0 2px #0e0b10}
.sb-c--p small{color:#8e8e93}
.sb-c--p span{color:rgba(29,2,12,.62)}
.sb-then{align-self:center;margin:10px 0;padding:5px 12px;border-radius:100px;background:rgba(255,255,255,.07);font-size:12.5px;color:rgba(255,255,255,.62)}
.sb-month{position:relative;width:100%;padding:22px 20px 18px;border-radius:26px;overflow:hidden;background:linear-gradient(145deg,#2b1c16 0%,#3d2618 100%);box-shadow:inset 0 0 0 1px rgba(255,210,150,.14);text-align:left}
.sb-month small{position:relative;display:block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#ffcf99}
.sb-month b{position:relative;display:block;font-size:30px;font-weight:700;letter-spacing:-.7px;margin-top:6px}
.sb-month>span{position:relative;display:block;font-size:13px;color:rgba(255,255,255,.66);margin-top:4px}
.li-bn .xs-b b,.pf-plan .xs-b b,.sb-meet .xs-b b,.sb-c--f .xs-b b,.ln-tr__b b{color:#fff}
.sb-c--p .xs-b b{color:#1d020c}
.li-bn .xs-b small,.sb-c .xs-b small,.sb-meet .xs-b small{white-space:normal;overflow:visible;margin-top:0}
.sb-c--f .xs-b small,.sb-meet .xs-b small{color:rgba(255,255,255,.6)}
.sb-c--p .xs-b small{color:#8e8e93}
.pfx__err{display:flex;gap:10px;margin-top:10px;padding:12px 14px;border-radius:18px;background:rgba(229,72,77,.16);box-shadow:inset 0 0 0 1px rgba(229,72,77,.3)}
.pfx__err svg{flex:0 0 18px;width:18px;height:18px;color:#ff8a8e;margin-top:1px}
.pfx__err b{display:block;font-size:14px}
.pfx__err small{display:block;font-size:12.5px;line-height:1.4;color:rgba(255,255,255,.7);margin-top:2px}

/* WS-3 «Ваши вопросы» к первой встрече: крестик удаления справа от вопроса */
.pre-qa-x { flex: 0 0 auto; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: #aeaeb2; }
.pre-qa-x svg { width: 14px; height: 14px; }

/* Сторис-движок (`.stx`: «Дневник до старта», запасная серия «Вы записаны»): верх — системная зона Telegram
   (--rf-safe-top: инсеты SDK или env), а не 56/70 px из рамки прототипа. В окне без фулскрина это был пустой
   блок над полосками, в фулскрине — «Пропустить» под кнопками «×» и «⋯» Telegram. */
.stx { --stx-top: calc(var(--rf-safe-top, 0px) + 12px); }
.stx__bars { top: var(--stx-top); }
.stx__x { top: calc(var(--stx-top) + 14px); }
.stx__s { padding-top: calc(var(--stx-top) + 56px); padding-bottom: calc(128px + var(--rf-safe-bottom, 0px)); }
.stx__tap { top: calc(var(--stx-top) + 40px); }
.stx__foot { padding-bottom: calc(34px + var(--rf-safe-bottom, 0px)); }
/* светлый вариант («Дневник до старта») — свои верхние отступы в 40-prestart.css (696–706) */
.stx--light .stx__s { padding-top: calc(var(--stx-top) + 40px); padding-bottom: calc(118px + var(--rf-safe-bottom, 0px)); }
.stx--light .stx__x { top: var(--stx-top); }
.stx--light .stx__tap { top: calc(var(--stx-top) + 34px); }

/* ---- src/styles/41-scan-lab.css ---- */
/* Сканер еды «Кольцо» — светлая сцена, палитра P1 «Монохром» (20-screens/diary-scan-lab.js; эталон scan-one/c6).
 * Слой живёт внутри панели приёма: .scl-u (сцена, тарелка, диафрагма) — под прокруткой страницы, .scl (кольцо и
 * интерфейс) — над ней; листы дневника («Приём и время», правка блюда) — выше панели, поверх слоя.
 * Анимирует JS (transform/opacity, кольцо — один canvas); здесь — раскладка и начальные состояния.
 * Цвета: сцена #f6f6f5, текст #141418 / #66656d, карточки белые. Розовый — только каретка и линейка в фокусе,
 * выбранный вариант ответа и галочка подсказки; красный — только «Отменить запись». */
/* страница приёма спрятана под слоем; на переходе A (.scl-land) она уже видна — её раскрывают переменные --scl-* (41-meal-page.css) */
.rf-pane.scl-ring:not(.scl-land) > :not(.scl):not(.scl-u) { visibility: hidden; }
.rf-pane.scl-ring { background: #f6f6f5; }
.scl-u, .scl {
  position: absolute; inset: 0; overflow: hidden;
  font-family: Geist, -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif; font-feature-settings: "tnum" 1;
  -webkit-font-smoothing: antialiased; color: #141418; transition: opacity .24s ease;
}
.scl-u { z-index: 0; pointer-events: none; }
.scl { z-index: 20; pointer-events: none; -webkit-user-select: none; user-select: none; }
.scl.scl-menu-on { pointer-events: auto; }
.scl--out { opacity: 0; }
/* сброс кнопок — без веса селектора (:where), чтобы классы слоя задавали шрифт, отступы и фон */
:where(.scl) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; -webkit-tap-highlight-color: transparent; }
.scl [hidden] { display: none !important; }
.scl button:focus-visible { outline: 2px solid #e0518f; outline-offset: 3px; border-radius: 12px; }

/* ---------- низ: сцена, тарелка, диафрагма, свет на блюде ---------- */
.scl-bg { position: absolute; inset: 0; background: #f6f6f5; }
.scl-pg { position: absolute; inset: 0; will-change: transform, opacity; }
.scl-ph { position: absolute; will-change: transform; }
.scl-ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.scl-halo { position: absolute; inset: 0; opacity: 0; }
.scl-dim { position: absolute; border-radius: 50%; background: #000; opacity: 0; visibility: hidden; }
.scl-ck { position: absolute; overflow: visible; }
.scl-ck path { opacity: 0; }
.scl-iris {
  position: absolute; width: 1600px; height: 1600px; will-change: transform; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(246, 246, 245, 0) 0, rgba(246, 246, 245, 0) 100px, rgba(246, 246, 245, .5) 101px, #f6f6f5 102.5px);
}

/* ---------- верх: кольцо и интерфейс ---------- */
.scl-cv { position: absolute; left: 0; top: 0; pointer-events: none; }
.scl-ui { position: absolute; inset: 0; }
.scl-ui > * { position: absolute; }
.scl-hd { left: 0; right: 0; height: 56px; display: flex; align-items: center; justify-content: center; opacity: 0; }
.scl-x, .scl-more { position: absolute; top: 6px; width: 44px; height: 44px; display: grid; place-items: center; }
.scl-x { left: 8px; }
.scl-more { right: 8px; }
.scl-x i, .scl-more i { width: 32px; height: 32px; border-radius: 50%; background: rgba(20, 20, 24, .06); display: grid; place-items: center; color: #141418; }
.scl-slot { height: 44px; padding: 0 10px; display: flex; align-items: center; gap: 6px; max-width: calc(100% - 112px); font-size: 15px; font-weight: 550; letter-spacing: -.005em; }
.scl-slot b { font-weight: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scl-slot svg { flex: none; }
.scl-tz { color: #66656d; font-weight: 450; }
.scl-spin { display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: sclSpin .8s linear infinite; }
@keyframes sclSpin { to { transform: rotate(360deg); } }

/* «Определяем блюда» */
.scl-st { left: 0; right: 0; text-align: center; opacity: 0; }
.scl-st .scl-a { font-size: 17px; line-height: 22px; font-weight: 550; letter-spacing: -.01em; }
.scl-st .scl-b { margin-top: 4px; height: 20px; font-size: 15px; line-height: 20px; color: #66656d; }
.scl-st .scl-c { margin: 16px auto 0; padding: 0 24px; max-width: 348px; font-size: 14px; line-height: 20px; color: #66656d; text-wrap: balance; }
.scl-st .scl-c:empty { display: none; }
.scl-st q { color: #38373e; quotes: "«" "»"; }

/* «Определил»: итог, Б/Ж/У, insight, строки состава (3 × 48) */
.scl-info { left: 16px; right: 16px; display: flex; flex-direction: column; }
.scl-tot { flex: none; height: 66px; overflow: hidden; text-align: center; opacity: 0; }
.scl-ni { display: inline-block; will-change: transform; }
.scl-n { font-size: 60px; line-height: 66px; font-weight: 300; letter-spacing: -.045em; }
.scl-un { margin-left: 6px; font-size: 17px; color: #66656d; }
.scl-mac { flex: none; height: 18px; margin-top: 2px; text-align: center; font-size: 14px; line-height: 18px; color: #66656d; word-spacing: .08em; opacity: 0; }
.scl-mac b { font-weight: 600; color: #141418; }
.scl-ins { flex: none; height: 18px; margin: 6px 8px 0; text-align: center; font-size: 14px; line-height: 18px; color: #141418; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; }
.scl-rows { flex: 1 1 auto; min-height: 0; margin-top: 12px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.scl-rows::-webkit-scrollbar { display: none; }
.scl-info.scl-noins .scl-ins { display: none; }
.scl-info.scl-norows .scl-rows { visibility: hidden; }
.scl-rows.scl-more-rows { -webkit-mask-image: linear-gradient(#000 calc(100% - 28px), transparent); mask-image: linear-gradient(#000 calc(100% - 28px), transparent); }
/* строка блюда «Разбора тарелки»: слева кадр блюда (серый кружок — место, пока кружок летит), имя и граммы в две строки */
.scl-rw { position: relative; display: block; width: 100%; height: 52px; overflow: hidden; border-radius: 14px; text-align: left; opacity: 0; transition: background-color .25s ease; }
.scl-rw + .scl-rw::before { content: ""; position: absolute; left: 52px; right: 4px; top: 0; height: 1px; background: rgba(20, 20, 24, .07); }
.scl-rw.on { background: #fff; }
.scl-rw.on::before, .scl-rw.on + .scl-rw::before { opacity: 0; }
.scl-dt { position: absolute; left: 4px; top: 7px; width: 38px; height: 38px; border-radius: 50%; background: #ebeae8; }
.scl-dt i { position: absolute; inset: 0; border-radius: 50%; background-repeat: no-repeat; box-shadow: 0 0 0 2px #fff, 0 1px 3px rgba(20, 16, 26, .16); opacity: 0; visibility: hidden; }
.scl-ri { position: absolute; top: 0; bottom: 0; left: 52px; right: 4px; display: flex; align-items: center; gap: 8px; will-change: transform, opacity; }
.scl-nm { flex: 1; min-width: 0; }
.scl-nm b { display: block; font-size: 15px; line-height: 19px; font-weight: 500; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scl-nm small { display: block; font-size: 12.5px; line-height: 16px; color: #77757d; }
.scl-nm small:empty { display: none; }
.scl-kc { flex: none; text-align: right; font-size: 15px; font-weight: 550; white-space: nowrap; }
.scl-kc small { margin-left: 3px; font-size: 13px; font-weight: 400; color: #66656d; }
/* «Нашли N блюд» — между ответом ИИ и первым блюдом в строке */
.scl-fd .scl-b { font-size: 14px; }
/* кольцо фокуса на блюде (как фокус камеры) и кружки, летящие из фото в строки */
.scl-fr { left: 0; top: 0; width: 62px; height: 62px; margin: -31px 0 0 -31px; border-radius: 50%; border: 2px solid #fff; box-sizing: border-box; pointer-events: none;
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .08), 0 0 16px rgba(255, 255, 255, .55), inset 0 0 10px rgba(255, 255, 255, .3); opacity: 0; visibility: hidden; will-change: transform, opacity; }
.scl-chips { inset: 0; pointer-events: none; }
.scl-chip { position: absolute; left: 0; top: 0; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background-repeat: no-repeat;
  box-shadow: 0 0 0 2px #fff, 0 12px 28px rgba(18, 14, 22, .26); opacity: 0; visibility: hidden; will-change: transform, opacity; }
.scl-chev { flex: none; width: 22px; display: flex; justify-content: flex-end; color: #141418; opacity: .45; }

/* «Записано» */
.scl-sv { left: 0; right: 0; text-align: center; opacity: 0; }
.scl-sv .scl-a { font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -.015em; }
.scl-sv .scl-b { margin-top: 6px; font-size: 15px; color: #66656d; }

/* ожидание: «Не ждать · ИИ допишет сам» → «Записать в дневник» → «Сохраняем…». Макет 10.10, раздел 5 (.sc .nw): тёмная
   кнопка 58 px на всю ширину, слева кольцо загрузки, мягкий блик раз в 3,2 с (без мигания; «уменьшить движение» — без
   блика), над ней «Запись не потеряется — ИИ сам допишет её в дневник». Тень — отдельным слоем (.scl-bsh): кнопку
   обрезает clip-path. */
.scl-wait { left: 16px; right: 16px; opacity: 0; }
.scl-wp { margin: 0 0 12px; text-align: center; font-size: 13.5px; line-height: 18px; color: #77767d; }
.scl-bsh { position: absolute; left: 0; right: 0; bottom: 0; height: 58px; border-radius: 100px; box-shadow: 0 10px 26px -12px rgba(16, 16, 20, .6); pointer-events: none; }
.scl-btn { position: relative; display: block; width: 100%; height: 58px; border-radius: 29px; overflow: hidden; clip-path: inset(0 round 29px); font-size: 16.5px; font-weight: 600; letter-spacing: -.2px; }
.scl-btn > i, .scl-wv > i { position: absolute; inset: 0; }
.scl-bg1 { background: #101014; border-radius: 29px; overflow: hidden; }
.scl-bg1::before { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .22) 45%, rgba(255, 255, 255, .34) 50%, rgba(255, 255, 255, .22) 55%, transparent);
  animation: sclSweep 3.2s ease-in-out 1s infinite; }
@keyframes sclSweep { 0% { left: -40%; } 55%, 100% { left: 120%; } }
.scl-bg2 { background: #141418; }
.scl-l1, .scl-l2, .scl-l3 { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.scl-l1 { gap: 12px; color: #fff; font-weight: 600; will-change: transform; }
.scl-l1 small { font-size: 14px; font-weight: 500; opacity: .7; }
.scl-nsp { position: relative; flex: none; width: 22px; height: 22px; }
.scl-nsp svg { position: absolute; inset: 0; width: 22px; height: 22px; animation: sclSpin 1.1s linear infinite; }
.scl-wv { position: absolute; inset: 0; display: block; will-change: transform; opacity: 0; }
.scl-l2, .scl-l3 { color: #fff; }
.scl-l3 { opacity: 0; }

/* ошибка записи — на месте кнопки */
.scl-err { left: 16px; right: 16px; opacity: 0; visibility: hidden; }
.scl-et { display: flex; gap: 10px; align-items: flex-start; margin: 0 4px 12px; font-size: 14px; line-height: 19px; color: #38373e; }
.scl-et svg { flex: none; margin-top: 2px; color: #141418; }
.scl-et b { font-weight: 600; color: #141418; }

/* общие кнопки слоя: главная 54 px, вторая — текстом 44 px (без «таблеток») */
.scl .scl-pri { display: flex; align-items: center; justify-content: center; width: 100%; height: 54px; border-radius: 16px; background: #141418; color: #fff; font-size: 17px; font-weight: 600; letter-spacing: -.01em; text-align: center; }
.scl .scl-sec { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; padding: 4px 8px; font-size: 15px; font-weight: 500; line-height: 19px; text-align: center; color: #141418; }
.scl-pri:disabled, .scl-sec:disabled { opacity: .7; }

/* вопросы ИИ — карточкой снизу (как лист «Что добавить к фото?»), результат над ней остаётся виден */
.scl-ask { left: 8px; right: 8px; max-height: calc(100% - 180px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; padding: 16px 16px 6px; border-radius: 32px; background: #fff;
  box-shadow: 0 0 0 .5px rgba(20, 20, 24, .07), 0 2px 6px rgba(20, 16, 26, .04), 0 18px 48px rgba(20, 16, 26, .12); opacity: 0; visibility: hidden; will-change: transform; }
.scl-ask::-webkit-scrollbar { display: none; }
.scl-askh { display: flex; align-items: center; gap: 10px; min-height: 30px; }
.scl-askh i { flex: none; width: 30px; height: 30px; border-radius: 50%; background-repeat: no-repeat; box-shadow: 0 0 0 1.5px #fff, 0 1px 3px rgba(20, 16, 26, .18); }
.scl-askk { font-size: 12.5px; line-height: 16px; color: #77757d; }
.scl-askt { margin: 8px 2px 12px; font-size: 18px; line-height: 23px; font-weight: 600; letter-spacing: -.015em; }
.scl-seg { display: grid; gap: 6px; }
.scl-ol { display: flex; flex-direction: column; gap: 6px; }
.scl .scl-qo { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 46px; padding: 6px 8px; border-radius: 14px; background: #f2f1f4; color: #141418;
  font-size: 14.5px; line-height: 19px; font-weight: 500; text-align: center; transition: background-color .18s ease, color .18s ease, transform .12s ease; }
.scl-ol .scl-qo { justify-content: flex-start; padding: 12px 14px; text-align: left; }
.scl .scl-qo:active { transform: scale(.97); }
.scl .scl-qo.on { background: #141418; color: #fff; }
.scl .scl-qs { display: block; width: 100%; min-height: 44px; margin-top: 4px; font-size: 14px; font-weight: 500; color: #55545b; text-align: center; }
/* «Свой ответ…» — последний вариант уточнения (макет 10.10, .sc .q .o.own): белая, серая обводка 1,5 px, карандаш, 48 px;
   тап — поле с чёрной обводкой и круглой чёрной кнопкой отправки (.sc .q .of) */
.scl .scl-qown { display: flex; align-items: center; gap: 8px; width: 100%; height: 48px; margin-top: 6px; padding: 0 14px; border-radius: 14px; background: #fff;
  box-shadow: inset 0 0 0 1.5px #e3e3e8; color: #55545b; font-size: 15.5px; text-align: left; }
.scl .scl-qown svg { flex: none; }
.scl .scl-qown[hidden], .scl-of[hidden] { display: none; }
.scl-of { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 10px 8px 10px 14px; border-radius: 14px; box-shadow: inset 0 0 0 1.5px #101014; }
.scl-of__in { flex: 1 1 auto; min-width: 0; height: 20px; margin: 0; padding: 0; border: 0; outline: 0; resize: none; background: none; font: inherit; font-size: 16px; line-height: 20px;
  color: #101014; -webkit-user-select: text; user-select: text; }
.scl-of__in::placeholder { color: #9a99a0; }
.scl .scl-of__go { flex: none; width: 38px; height: 38px; border-radius: 50%; background: #101014; display: grid; place-items: center; }

/* ---------- лист уточнения k2 «Тетрадь» ---------- */
.scl-ks {
  left: 8px; right: 8px; bottom: 8px; padding: 16px 18px 10px; border-radius: 32px; background: #fff; will-change: transform, opacity; opacity: 0;
  box-shadow: 0 0 0 .5px rgba(20, 20, 24, .07), 0 2px 6px rgba(20, 16, 26, .04), 0 18px 48px rgba(20, 16, 26, .10);
}
.scl-kbody { position: relative; }
.scl-kup { will-change: opacity, transform; }
.scl-kph { display: flex; align-items: center; height: 52px; transition: height .3s cubic-bezier(.32, .72, 0, 1), opacity .2s ease; }
.scl-stack { position: relative; flex: none; width: 58px; height: 52px; }
.scl-cd { position: absolute; left: 6px; top: 3px; width: 46px; height: 46px; border-radius: 10px; background: #eee center / cover no-repeat; will-change: transform, opacity;
  box-shadow: 0 0 0 2px #fff, 0 1px 2px rgba(20, 16, 26, .16), 0 5px 12px rgba(20, 16, 26, .10); }
.scl-cd0 { transform: rotate(3deg) translate(1px, 0); }
.scl-cd1 { transform: translate(-6px, 2px) rotate(-9deg); }
.scl-cd2 { transform: translate(5px, 2px) rotate(9deg); }
.scl-cdg { transform: rotate(-8deg) translate(-5px, 2px); background: #f2f2f3; box-shadow: 0 0 0 2px #fff, 0 1px 2px rgba(20, 16, 26, .10); }
.scl-cnt { display: flex; flex-direction: column; justify-content: center; flex: 1; min-width: 0; height: 44px; margin-left: 10px; text-align: left; }
.scl-cnt b { position: relative; display: block; height: 20px; font-size: 15px; line-height: 20px; font-weight: 560; letter-spacing: -.008em; }
.scl-cnt b span { position: absolute; left: 0; top: 0; white-space: nowrap; will-change: transform, opacity; }
.scl-cnt small { font-size: 13px; line-height: 17px; color: #66656d; }
.scl-add { display: flex; align-items: center; gap: 7px; flex: none; height: 44px; padding: 0 2px 0 10px; font-size: 15px; font-weight: 560; letter-spacing: -.008em; color: #141418; }
.scl-add svg { flex: none; }
/* строка «Что добавить к фото?»: линейка тетради, каретка мигает уже в покое; в фокусе линейка и каретка розовые */
.scl-note { position: relative; margin-top: 12px; height: 30px; overflow: hidden; transition: height .22s cubic-bezier(.32, .72, 0, 1), margin .3s cubic-bezier(.32, .72, 0, 1);
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 29px, rgba(20, 20, 24, .13) 29px, rgba(20, 20, 24, .13) 30px); }
.scl-rp { position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 28.5px, #e0518f 28.5px, #e0518f 30px); }
.scl-ta {
  position: relative; display: block; width: 100%; height: 30px; margin: 0; padding: 0; border: 0; border-radius: 0; outline: 0; resize: none; overflow: hidden;
  background: transparent; font: inherit; font-feature-settings: "cv11" 1; font-size: 21px; line-height: 30px; letter-spacing: -.014em; color: #141418;
  caret-color: #e0518f; -webkit-appearance: none; appearance: none; -webkit-user-select: text; user-select: text;
}
.scl-ta::placeholder { color: #75747b; opacity: 1; }
.scl-note.scl-empty:not(.scl-foc) .scl-ta { text-indent: 6px; }
.scl-caret { position: absolute; left: 1px; top: 2px; width: 2.5px; height: 26px; border-radius: 1.25px; background: #141418; opacity: 0; pointer-events: none; }
.scl-note.scl-empty:not(.scl-foc) .scl-caret { opacity: 1; animation: sclBlink 1.06s steps(1, end) infinite; }
.scl-caret.scl-still { animation: none !important; }
@keyframes sclBlink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
.scl-hint { margin: 7px 0 0; font-size: 13px; line-height: 18px; color: #66656d; max-height: 60px; overflow: hidden; transition: max-height .3s cubic-bezier(.32, .72, 0, 1), opacity .2s ease, margin .3s cubic-bezier(.32, .72, 0, 1); }
.scl-hres { color: #38373e; }
.scl-herr { display: flex; gap: 8px; align-items: flex-start; color: #38373e; }
.scl-herr svg { flex: none; margin-top: 1px; color: #141418; }
.scl-herr b { font-weight: 600; color: #141418; }
.scl-sugs { margin-top: 4px; max-height: 100px; overflow: hidden; transition: max-height .3s cubic-bezier(.32, .72, 0, 1), opacity .2s ease, margin .3s cubic-bezier(.32, .72, 0, 1); }
.scl .scl-sug { position: relative; display: flex; align-items: center; width: 100%; height: 44px; padding-left: 28px; font-size: 16px; letter-spacing: -.008em; color: #38373e; }
.scl-ic { position: absolute; left: 1px; top: 14px; width: 16px; height: 16px; }
.scl-ic svg { position: absolute; inset: 0; transition: transform .42s cubic-bezier(.32, .72, 0, 1), opacity .42s cubic-bezier(.32, .72, 0, 1); }
.scl-pl { opacity: .62; }
.scl-okk { opacity: 0; transform: rotate(-20deg) scale(.6); }
.scl-sug.on .scl-pl { opacity: 0; transform: rotate(90deg) scale(.6); }
.scl-sug.on .scl-okk { opacity: 1; transform: none; }
.scl-hl { position: absolute; left: -10px; right: -10px; top: 3px; bottom: 3px; border-radius: 12px; background: rgba(20, 20, 24, .05); opacity: 0; transition: opacity .3s ease; }
.scl-sug:active .scl-hl { opacity: 1; transition: none; }
.scl .scl-go { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 54px; margin-top: 10px; border-radius: 16px; background: #141418; color: #fff;
  font-size: 17px; font-weight: 600; letter-spacing: -.012em; text-align: center; transition: transform .16s ease; }
.scl-go:active { transform: scale(.985); }
.scl-go:disabled { opacity: .7; }
.scl .scl-later { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; min-height: 44px; padding: 4px 0 6px; text-align: center; }
.scl-later b { font-size: 15px; line-height: 20px; font-weight: 540; letter-spacing: -.006em; color: #141418; }
.scl-later small { font-size: 13px; line-height: 17px; color: #66656d; }
/* с клавиатурой лист встаёт на неё: нижние углы прямые, под краем — белая полоса (видна, пока клавиатура едет).
   Чтобы тарелка выше осталась читаемой, по очереди сворачиваются подсказка про порции (--nh), ряд фото (--np),
   дописки (--ns) — порядок и расчёт в capLayout(). «Внести сейчас» и пояснение остаются. */
.scl-ks { transition: border-radius .3s cubic-bezier(.32, .72, 0, 1); }
.scl-ks::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 48px; background: #fff; opacity: 0; transition: opacity .2s ease; pointer-events: none; }
.scl-ks--kb { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.scl-ks--kb::after { opacity: 1; }
.scl-ks--nh .scl-hint { max-height: 0; margin-top: 0; opacity: 0; }
.scl-ks--np .scl-kph { height: 0; opacity: 0; pointer-events: none; overflow: hidden; }
.scl-ks--np .scl-note { margin-top: 0; }
.scl-ks--ns .scl-sugs { max-height: 0; margin-top: 0; opacity: 0; }
/* управление фото: миниатюры с ×, «Добавить», «2 из 8», «Готово» */
.scl-man { position: absolute; left: -2px; right: -2px; top: 0; opacity: 0; visibility: hidden; will-change: transform, opacity; }
.scl-mh { display: flex; align-items: center; justify-content: space-between; height: 44px; margin-top: 4px; }
.scl-mh h2 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -.012em; }
.scl-mh h2 span { margin-left: 6px; font-weight: 450; color: #66656d; }
.scl .scl-dn { height: 44px; padding: 0 4px 0 12px; font-size: 17px; font-weight: 600; }
.scl-strip { display: flex; gap: 10px; margin-top: 10px; padding: 8px 2px 2px; overflow-x: auto; scrollbar-width: none; overscroll-behavior: contain; }
.scl-strip::-webkit-scrollbar { display: none; }
.scl-th { position: relative; flex: none; width: 80px; height: 80px; border-radius: 14px; background: #eee center / cover no-repeat; }
.scl .scl-rm { position: absolute; right: -10px; top: -10px; width: 44px; height: 44px; display: grid; place-items: center; }
.scl-rm i { width: 24px; height: 24px; border-radius: 50%; background: rgba(20, 20, 24, .58); display: grid; place-items: center; box-shadow: 0 0 0 1px rgba(255, 255, 255, .4); }
.scl .scl-mad { flex: none; width: 80px; height: 80px; border-radius: 14px; background: #f2f2f3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-size: 13px; color: #38373e; }
.scl-cp { margin: 12px 0 0; font-size: 14px; line-height: 19px; color: #66656d; }

/* ---------- меню «⋯» — Запись ---------- */
.scl-menu {
  right: 10px; width: 300px; max-width: calc(100% - 20px); border-radius: 16px; background: rgba(255, 255, 255, .97); overflow: hidden; opacity: 0; visibility: hidden;
  transform-origin: calc(100% - 22px) 0; will-change: transform, opacity;
  box-shadow: 0 0 0 .5px rgba(20, 20, 24, .08), 0 12px 40px rgba(20, 16, 26, .18), 0 2px 8px rgba(20, 16, 26, .06);
}
.scl-mt { padding: 12px 16px 6px; font-size: 13px; line-height: 17px; color: #66656d; font-weight: 500; }
.scl .scl-mi { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 58px; padding: 8px 16px; text-align: left; }
.scl-mi + .scl-mi::before { content: ""; position: absolute; left: 50px; right: 0; top: 0; height: 1px; background: rgba(20, 20, 24, .08); }
.scl .scl-mi.scl-red { margin-top: 8px; }
.scl-mi.scl-red::before { left: 0; right: 0; top: -8px; height: 8px; background: rgba(20, 20, 24, .05); }
.scl-mi svg { flex: none; }
.scl-mhl { position: absolute; inset: 0; background: rgba(20, 20, 24, .05); opacity: 0; transition: opacity .2s; }
.scl-mi:active .scl-mhl { opacity: 1; transition: none; }
.scl-mx { flex: 1; min-width: 0; }
.scl-mx b { display: block; font-size: 16px; line-height: 21px; font-weight: 500; letter-spacing: -.01em; }
.scl-mx small { display: block; margin-top: 1px; font-size: 13px; line-height: 17px; color: #66656d; }
.scl-mr { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.scl-mv { font-size: 14px; color: #66656d; white-space: nowrap; }
.scl-red b { color: #c8102e; }

/* ---------- узкий экран (320) ---------- */
@media (max-width: 359px) {
  .scl-ks { padding: 14px 16px 8px; }
  .scl .scl-add { font-size: 14px; gap: 5px; }
  .scl-cnt small { font-size: 12px; }
  .scl-note { height: 28px; background: repeating-linear-gradient(to bottom, transparent 0, transparent 27px, rgba(20, 20, 24, .13) 27px, rgba(20, 20, 24, .13) 28px); }
  .scl-rp { background: repeating-linear-gradient(to bottom, transparent 0, transparent 26.5px, #e0518f 26.5px, #e0518f 28px); }
  .scl-ta { height: 28px; font-size: 19px; line-height: 28px; }
  .scl-caret { height: 24px; }
  .scl .scl-sug { font-size: 15px; }
  .scl-th, .scl .scl-mad { width: 68px; height: 68px; }
  .scl-n { font-size: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .scl-u, .scl, .scl-ks, .scl-ks::after, .scl-kph, .scl-note, .scl-hint, .scl-sugs, .scl-ic svg, .scl-hl, .scl-rw, .scl-go, .scl-mhl { transition: none; }
  .scl-spin { animation: none; border-right-color: currentColor; opacity: .6; }
  .scl-bg1::before { animation: none; display: none; }
  .scl-note.scl-empty:not(.scl-foc) .scl-caret { animation: none; }
}

/* ---- src/styles/41-training-intro.css ---- */
/* Вводные сторис контроля техники (20-screens/train-45-intro.js) — поправки поверх
 * сгенерированных 40-training.css (`.tqs*` оттуда, руками не правим).
 *
 *   · сторис — слой на весь экран, отдельный от плеера: верх — системная зона Telegram
 *     (--rf-safe-top: инсеты SDK или env), а не «66px на глаз» (в окне без фулскрина
 *     это был пустой блок над полосками, в фулскрине — наезд под кнопки Telegram);
 *   · картинка не блокирует слайд: под ней нейтральная подложка, появляется плавно;
 *     не пришла — подложка остаётся (без сломанного значка);
 *   · коллаж «Ваш тренер»: нет фото тренера — буква имени на всю карточку (как в v2:
 *     `.gp-intro-coach-scene__photo`), а не крошечный кружок в белом прямоугольнике;
 *   · узкие окна (320 px): карточка имени не вылезает за коллаж. */
.gt-l.tr-intro { z-index: 38; }
/* слой въезжает справа и уходит переходом экранов (90-frame.css), а не вспышкой .gt-l.on:
   «назад» — вправо, к тренировке — под плеер влево (is-under, ниже плеера по z) */
.gt-l.tr-intro { display: block; visibility: hidden; transform: translateX(100%); animation: none; transition: transform var(--rf-push-t, .46s) var(--rf-push-e, ease), visibility 0s linear var(--rf-push-t, .46s); }
.gt-l.tr-intro.on { visibility: visible; transform: none; transition: transform var(--rf-push-t, .46s) var(--rf-push-e, ease), visibility 0s; }
.gt-l.tr-intro.is-under { z-index: 37; visibility: visible; transform: translateX(-24%); transition: transform var(--rf-push-t, .46s) var(--rf-push-e, ease), visibility 0s; }
.gt-l.tr-intro .tqs { padding: calc(var(--rf-safe-top, 0px) + 14px) 0 calc(112px + var(--rf-safe-bottom, 0px)); }
.gt-l.tr-intro .gt-foot { padding-bottom: calc(18px + var(--rf-safe-bottom, 0px)); }

.tqs-img { opacity: 0; transition: opacity .28s ease; }
.tqs-img.is-in { opacity: 1; }
.tqs-img.is-fail { visibility: hidden; }
/* подложка под картинкой: то же затухание по краям, что у самой картинки */
.tqs-art::before { content: ""; position: absolute; inset: 0; background: linear-gradient(165deg, #ecebee, #f6f5f7);
  -webkit-mask-image: linear-gradient(transparent 0, #000 16%, #000 76%, transparent 100%); mask-image: linear-gradient(transparent 0, #000 16%, #000 76%, transparent 100%); }
.tqs-art::before { transition: opacity .28s ease; }
.tqs-art.is-ready::before { opacity: 0; }
.tqs-coach__v { background: #e9e7ea; }
.tqs-coach__p { background: #efe9ec; }

/* портрет: фото — во всю карточку, нет фото — буква имени */
.tqs-coach__p > .tqs-img { position: absolute; inset: 0; }
/* монограмма тренера без фото — те же токены, что у RF.kit.avatar (91-avatar.css) */
.tqs-ini { display: grid; place-items: center; background: var(--rf-av-bg); color: var(--rf-av-fg); font-weight: 600; }
.tqs-coach__p > .tqs-ini { width: 100%; height: 100%; border-radius: 0; font-size: 76px; font-weight: 600; letter-spacing: -.02em; }

/* имя не должно ломать коллаж: длинное — в две строки, дальше многоточие */
.tqs-coach__id b { overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tqs-coach__id em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 340px) {
  .tqs-coach__v { left: 10px; width: 56%; }
  .tqs-coach__p { right: 10px; width: 47%; }
  .tqs-coach__id { left: 28px; right: 14px; padding: 10px 14px; }
  .tqs-coach__id b { font-size: 16.5px; }
  .tqs-top { padding: 0 8px 0 16px; }
  .tqs-copy { padding-left: 16px; padding-right: 16px; }
  .tqs-copy h1 { font-size: 27px; }
}
@media (prefers-reduced-motion: reduce) { .tqs-img { transition: none; } }

/* ---- src/styles/41-training.css ---- */
/* «Тренировки» — поправки поверх сгенерированных 40-training*.css (их руками
 * не правим). Здесь: что в прототипе давала рамка Shadow DOM / слой-экран
 * атласа (фон вкладки, слой листов, отступ под системной полосой), и
 * элементы, которых в прототипе не было (аватар-буква, ошибки в плеере). */

/* вкладка: белая, как остальные главные вкладки прототипа после «де-розовизации»
   27.09 (розовый — только выбор: #fff7fd прода здесь больше не фон); внутренние экраны — серые */
.rf-scr.trx-scr { background: var(--rf-tab); }
.trx { --neutral-bg: #fff; background: transparent; }
/* липкий заголовок «Тренировки» (.p-head sticky): overflow:hidden у корня хаба
   делал его прокручиваемым вместе с контентом — горизонталь и так режет .rf-scr */
.trx.trx-hub, .trx.trx-sub { overflow: visible; }
.rf-scr.trx-scr--sub { background: var(--rf-page); }
.trx.trx-hub, .trx.trx-sub { display: block !important; min-height: 100%; }
.trx .p-head { margin: calc(-6px - var(--rf-safe-top)) 0 0; padding-top: calc(var(--rf-safe-top) + 6px); }
/* липкая шапка прилипает к самому верху окна (не к отступу прокрутки): заголовок — под часами, подложка — под ними */
.trx .p-head { top: calc(-6px - var(--rf-safe-top)); }
.trx.trx-sub .p-head { background: rgba(var(--rf-page-rgb), .88) !important; }
/* Низ хаба и списков: место под меню уже держит сама прокрутка (.rf-scr — 96 px + safe-area,
   90-frame.css; у экранов без меню — 28 px + safe-area), как у остальных вкладок. Второй запас
   здесь (110 px + safe-area) и хвост .trh из прототипа (28 px) давали под последней карточкой
   пустоту ~220 px — «отступ почти в пол-экрана» (02.10.2026). Листы (.trh.v5-sheetroot) — не здесь. */
.trx .p-screen { padding-bottom: 0; }
.trx .p-screen > .trh { padding-bottom: 0; }

/* слой листов раздела (в прототипе — .p-over внутри тени) */
.trx.trx-layer { position: absolute !important; inset: 0; z-index: 70; pointer-events: none; overflow: visible; border-radius: 0 !important; background: none !important; width: auto !important; height: auto !important; }
.trx.trx-layer.on { pointer-events: auto; }
.trx.trx-layer .p-wrap { padding-bottom: 0; }
.trx.trx-layer .p-wrap .v5-savebar { padding-bottom: calc(18px + var(--rf-safe-bottom)); }
/* Лист раздела (RF.trSheet, train-00-base.js) — как шторки приложения: выезжает снизу
   transform-ом и так же уезжает (раньше «выпрыгивал» на 24 px с проявлением за 0,28 с, а
   закрывался мгновенно вместе с затемнением); затемнение — только opacity. */
.trx.trx-layer .p-scrim { animation: none; opacity: 0; transition: opacity var(--rf-push-t, .46s) var(--rf-push-e, ease); }
.trx.trx-layer.is-open .p-scrim { opacity: 1; }
.trx.trx-layer .p-wrap { animation: none; transform: translateY(calc(100% + 24px)); transition: transform var(--rf-push-t, .46s) var(--rf-push-e, ease); will-change: transform; }
.trx.trx-layer.is-open .p-wrap { transform: none; }

/* Слой-экраны раздела в роутере (RF.trLayer вешает .gt-l на панель): показ и уход — общим
   переходом панелей (90-frame.css). Правило прототипа .gt-l.on (display + вспышка trg-gtin:
   сдвиг 24 px и прозрачность 0,4) накладывалось на transform роутера — экран «проявлялся»
   поверх прежнего и в конце дёргался, а уходящий исчезал мгновенно (display: none без .on). */
.rf-pane.gt-l { display: block; }
.rf-pane.gt-l.on { animation: none; }
/* Слой с подвалом (.is-px) и без меню («Вопрос тренеру»): хвост прокрутки — под подвал, как у слоёв
   с меню. RF.trLayer теперь сохраняет rf-pane--full, а «экран без меню» в 90-frame.css даёт 28 px. */
.rf-app .rf-pane.rf-pane--full.gt-l.is-px .gt-scr { padding-bottom: 96px; }

/* аватар тренера без фото — общий компонент RF.kit.avatar (.rf-av, цвет — токены 91-avatar.css),
   размер задаёт вызов (U.avatar(c, cls, px)); класс tr-av0 — только для раскладки слота.
   Буква «съезжала в угол»: правило прототипа .trx .v5-coachline span {display:block; margin-top:4px;
   font-size:12.5px} ловит и аватар-span — возвращаем ему сетку по центру и собственный кегль */
.tr-av0 { flex: none; }
.trx .v5-coachline span.rf-av, .trx .v5-offer__who span.rf-av, .pi-help > span.rf-av {
  display: grid; flex: 0 0 auto; min-width: 0; margin: 0; font-size: calc(var(--av-s) * .4); line-height: 1; color: var(--av-fg, var(--rf-av-fg));
}

/* строка «Следующая неделя · N тренировок» без рамки сверху, когда она одна в карточке */
.trx .trh-daylink.v5-daylink--solo { margin: 0; padding: 0; border-top: 0; box-shadow: none; }

/* правила прода, которых нет в выгрузке (подсказка «зал» у дня, повтор ленты) */
.trx .trh-hint { margin-top: var(--s3, 12px); font-size: 13px; line-height: 1.4; color: var(--trh-meta, #8e8e93); }
.trx .trh-hint--ic { display: flex; align-items: flex-start; gap: 6px; }
.trx .trh-hint--ic svg { width: 14px; height: 14px; opacity: .55; flex: none; margin-top: 2px; }
.trx .trh-feedback-retry { min-height: 44px; width: 100%; display: grid; place-items: center; color: var(--s-danger-fg, #c0392b); font-size: 13px; font-weight: 500; background: none; border: 0; }

/* миниатюры упражнений: ролик получает файл, только когда виден */
.tr-thumb { position: relative; display: block; overflow: hidden; background: #f3f3f5; flex: 0 0 auto; }
.tr-thumb video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tr-thumb__ph { position: absolute; inset: 0; display: grid; place-items: center; color: #c7c7cc; }
.tr-thumb__ph svg { width: 44%; height: 44%; }
.pc-ex .pc-ex__m { width: 58px; height: 58px; border-radius: 16px; }
.gs-ex .gs-ex__m, .gs-ctl .gs-ctl__m { width: 56px; height: 56px; border-radius: 16px; object-fit: cover; }
.pq-cx .tr-pq-m { width: 60px; height: 60px; border-radius: 14px; object-fit: cover; }
.gs-ctl { cursor: pointer; }
.gs-ctl > div { min-width: 0; }

/* плеер: оверлей поверх всего раздела (видео и таймеры живут, пока он открыт) */
.gt-l.tr-player { z-index: 38; }
/* Плеер — слой поверх роутера: въезжает справа и уезжает тем же переходом, что экраны
   (90-frame.css), а не вспышкой .gt-l.on прототипа и не исчезновением в один кадр. */
.gt-l.tr-player { display: block; visibility: hidden; transform: translateX(100%); animation: none; transition: transform var(--rf-push-t, .46s) var(--rf-push-e, ease), visibility 0s linear var(--rf-push-t, .46s); }
.gt-l.tr-player.on { visibility: visible; transform: none; transition: transform var(--rf-push-t, .46s) var(--rf-push-e, ease), visibility 0s; }
.tr-player .gt-scr { padding-top: calc(var(--rf-safe-top, 0px) + 8px); }
/* смена вида внутри плеера (train-40-player.js setView): въезд, как у экранов; fill backwards — после
   анимации на прокрутке не остаётся transform (иначе сломались бы sticky и fixed внутри) */
@keyframes tp-swap-in { from { transform: translateX(18%); opacity: .25; } }
@keyframes tp-swap-back { from { transform: translateX(-14%); opacity: .25; } }
.tr-player .gt-scr.tp-swap { animation: tp-swap-in .38s var(--rf-push-e, ease) backwards; }
.tr-player .gt-scr.tp-swap--back { animation: tp-swap-back .38s var(--rf-push-e, ease) backwards; }
.tr-player.is-px .gt-scr { padding-bottom: calc(96px + var(--rf-safe-bottom, 0px)); }
.tr-player .gt-foot { padding-bottom: calc(18px + var(--rf-safe-bottom, 0px)); }
.tr-player .tp-main, .tr-player .tp-alt { display: flex; flex-direction: column; flex: 1 0 auto; min-height: 100%; }
.tr-player .tp-main[hidden], .tr-player .tp-alt[hidden] { display: none; }
.px-stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.px-stage.is-short { min-height: 140px; max-height: 190px; }
.tr-ph, .tr-ph-fail { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px; align-items: center; justify-content: center; color: #b9b5b8; text-align: center; padding: 16px; }
.tr-ph > svg, .tr-ph-fail > svg { width: 56px; height: 56px; }
.tr-ph-fail .gp-ph__t { font-size: 14px; color: #6e6e73; }
.tr-ph-fail .gp-ph__retry, .tr-demo-play { border: 0; border-radius: 999px; background: #fff; color: #1d020c; font: inherit; font-size: 14px; font-weight: 600; padding: 9px 16px; box-shadow: 0 6px 18px rgba(12, 14, 18, .12); cursor: pointer; }
.tr-demo-play { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 2; }
.px-alert--info { background: #f6f6f8; }
.px-rv input { width: 4.2ch; border: 0; background: none; font: inherit; font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.01em; color: inherit; text-align: center; padding: 0; outline: none; -webkit-appearance: none; appearance: none; border-radius: 0; }
button.px-dot { border: 0; background: none; padding: 0; font: inherit; color: inherit; -webkit-appearance: none; appearance: none; }
.px-rv input[aria-invalid="true"] { color: #d7372f; }
.px-go.is-wait, .gt-btn.is-wait { opacity: .75; }
.px-cd b.go { font-size: 96px; }
.tr-pi-ph { position: absolute; inset: 0; display: grid; place-items: center; color: #c7c7cc; }
.tr-pi-ph svg { width: 72px; height: 72px; }
.pi-hero video { width: 100%; height: 100%; object-fit: cover; display: block; }
.tr-missed-sheet .gm-guide { margin-bottom: 12px; }

/* плеер видео-тренировки */
.tvp { position: absolute; inset: 0; z-index: 39; background: #0c0e12; color: #fff; display: flex; flex-direction: column; overflow: hidden; }
/* въезжает и уезжает как экран (train-50-summary.js vClose) */
.tvp { animation: tvp-in var(--rf-push-t, .46s) var(--rf-push-e, ease) backwards; }
.tvp.tvp--out { animation: tvp-out var(--rf-push-t, .46s) var(--rf-push-e, ease) both; pointer-events: none; }
@keyframes tvp-in { from { transform: translateX(100%); } }
@keyframes tvp-out { to { transform: translateX(100%); } }
.tvp > video { position: absolute; inset: 0 0 auto; width: 100%; height: 56%; object-fit: contain; background: #000; }
.tvp-top { position: relative; z-index: 2; display: flex; align-items: center; gap: 12px; padding: calc(var(--rf-safe-top, 0px) + 10px) 14px 0; }
.tvp-x { width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .45); color: #fff; display: grid; place-items: center; flex: none; cursor: pointer; }
.tvp-x svg { width: 18px; height: 18px; }
.tvp-bar { flex: 1; display: flex; gap: 3px; }
.tvp-bar i { flex: 1; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .28); overflow: hidden; }
.tvp-bar i b { display: block; height: 100%; width: 0; background: #fff; }
.tvp-err { position: absolute; left: 16px; right: 16px; top: 22%; z-index: 3; background: rgba(12, 14, 18, .86); border-radius: 20px; padding: 18px; text-align: center; }
.tvp-err[hidden] { display: none; }
.tvp-err b { display: block; font-size: 16px; }
.tvp-err small { display: block; font-size: 13px; color: rgba(255, 255, 255, .7); margin: 4px 0 12px; }
.tvp-err button, .tvp-pill { border: 0; border-radius: 999px; background: rgba(255, 255, 255, .14); color: #fff; font: inherit; font-size: 14px; font-weight: 600; padding: 10px 18px; cursor: pointer; }
.tvp-panel { position: absolute; left: 0; right: 0; bottom: 0; top: 56%; z-index: 2; background: #fff; color: #111; border-radius: 28px 28px 0 0; padding: 18px 20px calc(18px + var(--rf-safe-bottom, 0px)); display: flex; flex-direction: column; min-height: 0; }
.tvp-now small { display: block; font-size: 13px; color: #8e8e93; }
.tvp-now b { display: block; font-size: 20px; font-weight: 600; letter-spacing: -.3px; margin-top: 2px; }
.tvp-tm { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.tvp-tm span b { display: block; font-size: 16px; font-variant-numeric: tabular-nums; }
.tvp-tm span small { font-size: 12px; color: #8e8e93; }
.tvp-tm strong { font-size: 40px; font-weight: 600; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.tvp-tm span:last-child { width: 48px; }
.tvp-ctl { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 10px; }
.tvp-ctl .tvp-pill { background: #f3f3f5; color: #111; }
.tvp-pp { width: 64px; height: 64px; border-radius: 50%; border: 0; background: #2c0c17; color: #fff; display: grid; place-items: center; cursor: pointer; }
.tvp-pp svg { width: 26px; height: 26px; }
.tvp-list { margin-top: 14px; overflow-y: auto; flex: 1; min-height: 0; }
.tvp-li { width: 100%; display: flex; justify-content: space-between; gap: 12px; padding: 12px 4px; border: 0; border-top: 1px solid #ececef; background: none; font: inherit; color: #111; text-align: left; cursor: pointer; }
.tvp-li.cur { background: #f6eef3; border-radius: 12px; }
.tvp-li span { font-size: 15px; }
.tvp-li small { font-size: 13px; color: #8e8e93; flex: none; }
.tvp.is-rest > video { opacity: .5; }
.tvp-cf, .tvp-done { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 28px; }
.tvp-cf { background: rgba(12, 8, 12, .5); }
.tvp-cf[hidden], .tvp-done[hidden] { display: none; }
.tvp-cf__c { width: 100%; max-width: 340px; background: #fff; color: #111; border-radius: 26px; padding: 22px 18px 14px; text-align: center; }
.tvp-cf__c b { display: block; font-size: 19px; font-weight: 600; }
.tvp-cf__c p { margin: 6px 0 16px; font-size: 14px; color: #6e6e73; }
.tvp-cf__c button { display: block; width: 100%; min-height: 48px; border: 0; border-radius: 16px; font: inherit; font-size: 15px; font-weight: 600; margin-top: 8px; cursor: pointer; }
.tvp-cf__stay { background: #2c0c17; color: #fff; }
.tvp-cf__go { background: #f3f3f5; color: #111; }
.tvp-done { background: #fff; color: #111; text-align: center; gap: 12px; }
.tvp-done h2 { margin: 8px 0 0; font-size: 24px; font-weight: 600; }
.tvp-done p { margin: 0 0 12px; font-size: 15px; color: #6e6e73; }
.tvp-done .gt-btn { width: 100%; max-width: 340px; }

/* контроль техники: миниатюры вместо <img> прототипа, справочник меток, вложения тренера */
.tq-r__img > .tq-av, .tq-r__img > .tr-av0, .tq-r__img > img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.tq-r__img > .tr-av0 { font-size: 18px; }
.tq-cov__g span > .tq-cov__m { width: 100%; height: 100%; object-fit: cover; }
.tq-mg { padding: 14px 16px; }
.tq-mg + .tq-mg { border-top: 1px solid #ececef; }
.tq-mg b { display: block; font-size: 15px; font-weight: 600; }
.tq-mg small { display: block; font-size: 13px; color: #8e8e93; margin-top: 1px; }
.tq-mg p { margin: 8px 0 0; font-size: 14px; line-height: 1.45; color: #3a3a3c; }
.tr-rv-vid video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.tr-rv-att { margin-top: 12px; border-radius: 16px; overflow: hidden; }
.tr-rv-att img { display: block; width: 100%; height: auto; }
.tq-vid.tr-rv-att { position: relative; aspect-ratio: 16 / 10; background: #000; }
.tq-vid.tr-rv-att video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.tq-vid__bar[hidden] { display: none; }

/* «У вас новый тренер» */
.tr-ho-av { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 4px 0 16px; }
.tr-ho-i { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; font-size: 22px; }
.tr-ho-i--old { width: 48px; height: 48px; opacity: .55; font-size: 18px; }
.tr-ho-i--s { width: 44px; height: 44px; font-size: 17px; }
.tr-ho-go { color: #aeaeb2; display: grid; }
.tr-ho-go svg { width: 20px; height: 20px; }
.tr-ho-who { gap: 12px; }
.tr-ho-keeps { margin-top: 14px; display: grid; gap: 10px; }
.tr-ho-keeps > div { display: flex; gap: 10px; align-items: flex-start; }
.tr-ho-keeps span { color: #1d020c; flex: none; margin-top: 1px; }
.tr-ho-keeps span svg { width: 18px; height: 18px; }
.tr-ho-keeps p { margin: 0; font-size: 14px; line-height: 1.4; color: #3a3a3c; }
.tr-ho-keeps p b { color: #111; font-weight: 600; }

/* слой-экраны как панели роутера: фон слоя важнее белого фона .rf-pane.rf-sub */
.rf-pane.rf-sub.gt-l { background: var(--rf-page); }
.rf-pane.rf-sub.gt-l.is-px, .rf-pane.rf-sub.gt-l.is-glow, .rf-pane.rf-sub.gt-l.is-tqs { background: rgb(255, 255, 255); }
.rf-pane.rf-sub.gt-l.is-soft { background: rgb(248, 246, 247); }
.rf-pane.rf-sub.gt-l.is-q, .rf-pane.rf-sub.gt-l.is-tq { background: var(--rf-page); }
/* съёмка: выбранный ролик — настоящий <video> на месте картинки прототипа */
.tqc-media .tq-vid > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #111; border-radius: inherit; }

/* баннеры фокус-зон (RF.trZone, серия Лианы): текста в кадре нет, фигура
 * справа — прижимаем её к правому краю, подписи слотов остаются слева
 * поверх их затемнения. Фон — цвет кадра, пока картинка грузится. */
.pc-cover.pc-cover--zone { height: 230px; background: #2a0a14; }
.pc-cover.pc-cover--zone img { object-position: 100% 50%; }
.trx .trh-tile__media.is-zone img { object-position: 100% 50%; }
.trx .trh .trh-wo--row .trh-wo__media.trh-wo__media--img { background: #2a0a14; }
.trx .trh-wo__media--img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* «Тренировки» до старта (pre-home.js): та же липкая шапка с заголовком, что у хаба */
.trx.pt-top { position: sticky; top: calc(-6px - var(--rf-safe-top)); z-index: 5; margin-top: calc(-6px - var(--rf-safe-top)); }
.trx.pt-top .p-head { position: static; margin: 0; }
.trx .dhead__sp { width: 44px; flex: 0 0 auto; }

/* своё движение (WS-5): правила прототипа training-hub-v5/proto/after.css, которых нет в выгрузке 40-training-hub.css */
.trx .v5-pl { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 68px; padding: 12px 20px; border: 0; background: #fff; text-align: left; font-family: inherit; color: var(--content-strong); cursor: pointer; position: relative; }
.trx .v5-pl + .v5-pl::before { content: ""; position: absolute; left: 74px; right: 0; top: 0; height: 1px; background: rgba(12, 14, 18, .07); }
.trx .v5-plist { border-bottom: 1px solid rgba(12, 14, 18, .07); }
.trx .v5-pl:active { background: #faf6f8; }
.trx .v5-pl[disabled] { opacity: .6; cursor: default; }
.trx .v5-pl__d { width: 40px; flex: none; display: flex; flex-direction: column; align-items: center; line-height: 1; }
.trx .v5-pl__d small { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--trh-meta); }
.trx .v5-pl__d b { margin-top: 5px; font-size: 22px; font-weight: 600; letter-spacing: -.6px; }
.trx .v5-pl.is-today .v5-pl__d small { color: var(--brand-strong); }
.trx .v5-pl__b { flex: 1; min-width: 0; }
.trx .v5-pl__b b { display: block; font-size: 16px; font-weight: 600; letter-spacing: -.2px; }
.trx .v5-pl__b span { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.35; color: var(--trh-meta); }
.trx .v5-pl__go { flex: none; display: grid; place-items: center; }
.trx .v5-pl__go svg { width: 18px; height: 18px; color: rgba(12, 14, 18, .28); }
.trx .v5-del { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 6px; padding: 12px; border: 0; background: none; font-family: inherit; font-size: 14px; font-weight: 600; color: #c2272d; cursor: pointer; }
.trx .v5-del svg { width: 17px; height: 17px; }
.trx .v5-sugg { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.trx .v5-sugg button { height: 32px; padding: 0 12px; border: 0; border-radius: 100px; background: #f6f2f4; font-family: inherit; font-size: 13px; font-weight: 500; color: var(--content-strong); cursor: pointer; }
/* дни вне окна записи сервера — видны в ленте 14 дней, но не выбираются */
.trx .v5-days button[disabled] { opacity: .38; cursor: default; }
/* «Попросили сегодня в 15:00…» / «есть ответ» + ссылка в чат */
.trx .v5-asked { flex-wrap: wrap; }
.trx .v5-asked > span { flex: 1; min-width: 0; }
.trx .v5-asked .v5-link { margin: 0 0 0 24px; padding: 2px 0; flex-basis: 100%; text-align: left; }
/* «Пропущенные»: кнопка «Начать …» прилипает над меню (P1 №19).
   sticky отсчитывает `bottom` от области прокрутки БЕЗ её padding (Chrome и WebKit — на iPhone
   в Telegram видно так же): у .rf-scr снизу 96 px + safe-bottom под меню, и кнопка «зависала» на
   этот отступ выше меню — посреди списка, с пустотой под собой (29.09.2026). Экрану с такой кнопкой
   padding у прокрутки снимаем (.trx-scr--cta), а место под меню отдаём хвосту контента: в конце списка
   кнопка встаёт на то же место, что и при прокрутке, и последнюю строку не перекрывает. */
.rf-scr.trx-scr--cta { padding-bottom: 0; }
.rf-scr.trx-scr--cta .trx .trh { padding-bottom: 0; }
.rf-scr.trx-scr--cta .trx .p-screen { padding-bottom: max(calc(var(--rf-dock-space, 0px) + 12px), calc(var(--rf-safe-bottom, 0px) + 16px)); }
.trx .trh-cta.v5-stickcta { position: sticky; bottom: max(calc(var(--rf-dock-space, 0px) + 12px), calc(var(--rf-safe-bottom, 0px) + 16px)); z-index: 3; margin-top: 14px; }
.trx .trh-cta.v5-stickcta .trh-btn { box-shadow: 0 8px 24px rgba(12, 14, 18, .18); }

/* карточка тренировки: строка упражнения открывает его карточку — справа шеврон (раньше тут был «i») */
.pc-ex .pc-ex__c { align-self: center; margin-left: 2px; }
/* «Закрыть» в карточке упражнения: липкая обёртка нулевой высоты держит крестик при прокрутке,
   а от верха он отступает не меньше, чем на зону кнопок Telegram в фулскрине (--rf-safe-top) —
   иначе под × и ⋯ Telegram он был недоступен, а единственным «выходом» оставалась вкладка «Тренировки» */
.pi-xw { position: sticky; top: 0; z-index: 7; height: 0; }
.pi-xw > .pi-x { top: max(62px, calc(var(--rf-safe-top, 0px) + 14px)); box-shadow: 0 1px 8px rgba(12, 14, 18, .16); }
.trx .v5-days + .v5-fhint { margin-top: 10px; }
/* «Удобные дни» сразу после сохранения: карточка с ответом коротко подсвечивается, пока уезжает
   лист (train-10-hub.js tr-dsave). Общая вспышка прототипа гасит фон до прозрачного и в конце
   щёлкает обратно в белый — у карточки тон уходит ровно в её белый. */
@keyframes gt-dayset-flash { from { background-color: rgba(90, 160, 242, .16); } to { background-color: #fff; } }
.trx .gt-dayset.is-flash { animation: gt-dayset-flash 1.4s ease-out backwards; border-radius: var(--r-card, 24px); }

/* «Инвентарь» карточки тренировки: фото позиции каталога (train-30-workout.js invRow) —
   плитка крупнее значка, чтобы вещь читалась; у строк со значком та же колонка */
.pc-inv .pc-tile { width: 48px; height: 48px; border-radius: 14px; }
.pc-inv .pc-tile svg { width: 22px; height: 22px; }
.pc-inv .pc-tile--ph { overflow: hidden; background: #ece7e2; }
.pc-inv .pc-tile--ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-inv + .pc-inv::before { left: 80px; }

/* Опрос раннего выхода, причина «Дискомфорт или боль» (train-40-player.js survey): у `.pq-warn`
   в прототипе правила не было — значок без размеров растягивался на всю ширину и закрывал текст
   и кнопку. Вид — как у предупреждения о боли на «Хотите что-то уточнить?» (`.pq-note.danger`). */
.pq-warn { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 11px 13px; border-radius: 14px; background: rgb(255, 240, 239); color: rgb(154, 77, 72); font-size: 13.5px; line-height: 1.45; }
.pq-warn > svg { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; color: rgb(194, 74, 68); }
.pq-warn + .px-alert, .pq-ta + .pq-warn { margin-top: 10px; }
/* Итог после сигнала о боли (train-50-summary.js): значок предупреждения красный, как на карточке
   тренировки под замком. */
.gp-alert--pain > span { color: rgb(194, 74, 68); }
/* Плеер: «Нагрузка не растёт, пока <тренер> не ответит» под «В прошлый раз» — пока сигнал о боли
   ждёт ответа тренера (train-40-player.js, решение 04.10.2026). Тон — как у предупреждения о боли
   (.pq-warn), контраст к белому ~6,6:1. */
.px-hold { font-size: 12.5px; line-height: 1.35; color: rgb(154, 77, 72); margin-top: 2px; }
.trx .v5-coachline span.v5-hold { color: rgb(154, 77, 72); }

/* Без программы: «Хочу программу» (атлас B-02, train-70-activity.js offerCard). Главная кнопка —
   тёмная #101014 (не винная --brand-strong и не розовая), вторичная — «Задать вопрос …» текстом
   по центру; плашка без тени (92-plates.css). «Отметить занятие» — в «Последних 7 днях». */
.trx .trh--offer > .v5-offer { margin-top: 8px; }
.trx .v5-offer .v5-offer__go { background: #101014; box-shadow: 0 8px 20px rgba(16, 16, 20, .22); }
.trx .v5-offer .v5-offer__ask { display: block; width: 100%; margin-top: 4px; padding: 12px 0 2px; text-align: center; text-decoration: none; color: #101014; font-size: 14px; }
.trx .v5-offer .v5-asked { margin-top: 10px; }
.trx .v5-own-add { margin-top: 14px; }
.trx .v5-own-add .trh-btn { flex: 1 1 0%; }

/* ---- src/styles/42-diary-menu.css ---- */
/* Меню клиента в дневнике (20-screens/diary-menu.js) — макет «Дневник и план v12». */

/* строка плана над целями */
.mn-bar { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 22px; background: #fff; box-shadow: 0 12px 28px rgba(20, 16, 26, .06); }
.mn-bar--coach { background: #fdf3f8; box-shadow: inset 0 0 0 1px rgba(232, 94, 160, .14); }
.mn-bar__av { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: linear-gradient(135deg, #ff7ab6, #a58bff); color: #fff; font-size: 15px; font-weight: 700; }
.mn-bar__av img { width: 100%; height: 100%; object-fit: cover; }
.mn-bar__av--ai { background: #f3f0ff; color: #6a4fd8; }
.mn-bar__av svg { width: 18px; height: 18px; }
.mn-bar__b { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mn-bar__b b { font-size: 15px; font-weight: 600; letter-spacing: -.25px; }
.mn-bar__b small { font-size: 12.5px; color: #8b8a92; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* цели дня: светлое — ещё по плану */
.kbar i.pl { background: color-mix(in srgb, var(--prot, #a3d546) 30%, #fff); }
.mring__d--pl { background: conic-gradient(var(--c, #a3d546) calc(var(--p) * 1%), color-mix(in srgb, var(--c, #a3d546) 32%, #fff) 0 calc((var(--p) + var(--pl, 0)) * 1%), #edeef1 0); }
.goals__kcal span { white-space: nowrap; }

/* неделя: день с планом — колечко */
:where(.dy-scr, .dy-sheet) .wday .dot--plan { background: transparent; box-shadow: inset 0 0 0 1.5px #b6b5bd; }

/* плановый приём: та же строка, что у пустого приёма; справа — камера (фото, как «+»), под строкой — действия */
.slot--plan .mn-row { cursor: default; padding-right: 14px; }
.mn-open { display: flex; align-items: center; gap: 14px; flex: 1 1 auto; min-width: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.slot--plan .dish.im { opacity: .94; }
.mn-cam { width: 40px; height: 40px; align-self: center; }
.mn-cam svg { width: 19px; height: 19px; }
.mn-pl { font-style: normal; font-size: 11.5px; font-weight: 600; color: #5f5e66; background: #efeff2; border-radius: 100px; padding: 2px 7px; margin-left: 6px; vertical-align: 2px; }
.mn-by { display: inline-flex; align-items: center; gap: 4px; margin-left: 5px; padding: 0 7px 0 2px; height: 19px; border-radius: 100px; background: #fdf0f6; color: #b8306f; font-style: normal; font-size: 10.5px; font-weight: 600; vertical-align: 2px; }
.mn-by i { display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: linear-gradient(135deg, #ff7ab6, #a58bff); color: #fff; font-style: normal; font-size: 8.5px; }
.mn-by--chg { padding: 0 7px; background: #fff1df; color: #b85f00; }
.mn-nm { color: #3f3e46; font-size: 12.5px; line-height: 1.3; }
.mn-acts { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 14px 92px; margin-top: -4px; }
.mn-acts button { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 12px; border: 0; border-radius: 100px; font: inherit; font-size: 12.5px; font-weight: 600; color: #101014; background: #fff; box-shadow: inset 0 0 0 1.5px #e3e3e8; cursor: pointer; white-space: nowrap; }
.mn-acts button svg { width: 14px; height: 14px; }
.mn-acts .mn-more { width: 32px; padding: 0; justify-content: center; color: #5f5e66; }
.mn-acts .mn-more svg { width: 17px; height: 17px; }
.mn-none .food__n { color: #3f3e46; }

/* под записанным приёмом: совпало / почти / не по плану */
.mn-note { display: flex; align-items: center; gap: 9px; margin: 0 16px; padding: 10px 0 12px; border-top: 1px solid rgba(16, 16, 20, .06); }
.mn-note > span { flex: 1 1 auto; min-width: 0; font-size: 12.5px; line-height: 1.35; color: #5f5e66; }
.mn-note > span b { font-weight: 600; color: #101014; }
.mn-note__ic { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: #e7f6ec; color: #1f8f4e; }
.mn-note__ic svg { width: 11px; height: 11px; }
.mn-note--off .mn-note__ic { background: #fff1df; color: #b85f00; }

/* шторки: «⋯» (убрать — красным) и «Чем заменить» */
.mr-ic.red { background: #fdeced; color: #d70015; }
.mn-sw__ph { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: #f3f2f5 center / cover no-repeat; }

/* строка плана без действий (коуч закрепил, будущий день) — не кнопка; «без баллов» на «Как в плане»;
   «словами или из базы» под строкой плана — как у пустого приёма */
div.mn-open { cursor: default; }
.mn-acts button small { font-size: 11.5px; font-weight: 500; color: #8a8991; }
.slot--plan .slot__lk { display: flex; align-items: center; gap: 2px; width: 100%; min-height: 44px; margin-top: -10px; padding: 0 16px 6px 92px; border: 0; background: none;
  font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: -.1px; color: var(--ink); text-align: left; cursor: pointer; }
.slot--plan .slot__lk .chev { width: 16px; height: 16px; color: rgb(182, 181, 189); }
.slot--plan .slot__lk .chev svg { width: 16px; height: 16px; }

/* карточка тарелки из плана (recipes.js, «ref~plan»): ингредиенты без правки — количество справа */
.dh-ing .dh-ing__v { flex: 0 0 auto; font-size: 13px; font-weight: 600; color: #5f5e66; white-space: nowrap; }

/* ---- src/styles/42-home-recipes.css ---- */
/* СГЕНЕРИРОВАНО design-preview/miniapp-v3-dev/tools/extract_css.js из прототипа nav-v2
   (состояния: home_recipes.js). Правила взяты в порядке каскада прототипа; не правьте
   руками — поправка поверх живёт в файлах стилей с бОльшим номером. */
@keyframes pl4in { 
  100% { opacity: 1; transform: none; }
}
.rp-home{ position: relative; overflow: hidden; isolation: isolate; border-radius: 26px; margin-top: 22px; color: rgb(255, 255, 255); background: radial-gradient(120% 110% at 100% 0%, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 55%), linear-gradient(150deg, rgb(38, 38, 42) 0%, rgb(20, 20, 22) 100%); box-shadow: rgba(12, 12, 14, 0.32) 0px 20px 44px; }
.rp-home .phero__grain{ opacity: 0.26; }
.rp-home__in{ position: relative; z-index: 2; padding: 18px 18px 16px; }
.rp-home__k{ font-size: 20px; font-weight: 600; letter-spacing: -0.5px; }
.rp-home__t{ font-size: 12.5px; color: rgba(255, 255, 255, 0.66); margin-top: 4px; }
.rp-chips{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.rp-chips span{ display: flex; align-items: center; gap: 6px; height: 36px; padding: 0px 14px; border-radius: 100px; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: rgba(255, 255, 255, 0.22) 0px 0px 0px 1px inset; font-size: 13.5px; font-weight: 600; color: rgba(255, 255, 255, 0.88); cursor: pointer; transition: background 0.2s, color 0.2s, transform 0.15s; }
.rp-chips span:active{ transform: scale(0.95); }
.rp-chips span.on{ background: rgb(255, 255, 255); color: rgb(16, 16, 20); box-shadow: none; }
.rp-chips span.on::before{ content: ""; width: 6px; height: 6px; border-radius: 50%; background: rgb(29, 2, 12); }
.rp-chips span.add{ background: transparent; box-shadow: rgba(255, 255, 255, 0.3) 0px 0px 0px 1.5px inset; color: rgba(255, 255, 255, 0.7); border-style: none; }
.rp-home__res{ display: flex; align-items: center; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.1); cursor: pointer; }
.rp-home__res b{ font-size: 17px; font-weight: 700; letter-spacing: -0.4px; color: rgb(255, 255, 255); }
.rp-home__res span{ flex: 1 1 auto; font-size: 13.5px; color: rgba(255, 255, 255, 0.7); }
.rp-fit--closed,.rp-favrow--empty,.rp-skel{ display: none; }
body.rp-closed .rp-fit--left{ display: none; }
body.rp-closed .rp-fit--closed{ display: block; }
.rp-fit__k--ok{ color: var(--ok); }
body.rp-nofav .rp-favrow--has{ display: none; }
body.rp-nofav .rp-favrow--empty{ display: flex; }
body.rp-nofav .rp-card__fav.on{ background: rgba(255, 255, 255, 0.75); color: rgb(63, 62, 70); }
body.rp-nofav .rp-card__fav.on svg{ fill: none; stroke: rgb(63, 62, 70); }
body.rp-loading .rp-grid,body.rp-loading .rp-more{ display: none; }
body.rp-loading .rp-skel{ display: grid; }
.rp-fav--empty{ width: 44px; height: 44px; border-radius: 14px; background: rgb(241, 241, 243); color: rgb(58, 58, 60); display: grid; place-items: center; flex: 0 0 auto; }
.rp-fav--empty svg{ width: 20px; height: 20px; }
.rp-skel{ grid-template-columns: 1fr 1fr; gap: 12px 10px; margin-top: 12px; }
.rp-skel__c{ background: rgb(255, 255, 255); border-radius: 22px; overflow: hidden; box-shadow: rgba(20, 4, 12, 0.05) 0px 10px 26px; }
.rp-skel__c i,.rp-skel__c b,.rp-skel__c s{ display: block; background: linear-gradient(90deg, rgb(239, 238, 242) 25%, rgb(248, 247, 250) 50%, rgb(239, 238, 242) 75%) 0% 0% / 200% 100%; animation: 1.4s linear 0s infinite normal none running skel; }
.rp-skel__c i{ height: 126px; }
.rp-skel__c b{ height: 12px; border-radius: 6px; margin: 12px 12px 0px; width: 80%; }
.rp-skel__c s{ height: 10px; border-radius: 5px; margin: 8px 12px 14px; width: 50%; }
@keyframes skel { 
  0% { background-position: 200% 0px; }
  100% { background-position: -200% 0px; }
}
.rp-more.end{ background: rgb(16, 16, 20); color: rgb(255, 255, 255); box-shadow: rgba(16, 16, 20, 0.22) 0px 12px 26px; }
.rp-more:active,.rp-cat:active{ transform: scale(0.98); }
.rp-cat{ transition: transform 0.15s; }
.pm-hero{ height: 448px; background: radial-gradient(120% 110% at 100% 0%, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 55%), linear-gradient(150deg, rgb(38, 38, 42) 0%, rgb(20, 20, 22) 100%); }
.pm-kick{ position: absolute; left: 24px; right: 24px; top: 106px; z-index: 2; text-align: center; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.62); }
.pm-plate2{ position: absolute; left: 50%; top: 128px; width: 224px; height: 224px; margin-left: -112px; z-index: 2; }
.pm-plate2 svg{ width: 100%; height: 100%; overflow: visible; display: block; }
.pm-rim{ fill: rgb(255, 255, 255); filter: drop-shadow(rgba(0, 0, 0, 0.5) 0px 26px 40px); }
.pm-w{ cursor: pointer; transition: transform .45s var(--spring),opacity .3s; }
.pm-w__in{ transform-origin: 120px 120px; }
.is-in .pm-w__in{ animation-duration: ; animation-timing-function: ; animation-iteration-count: ; animation-direction: ; animation-fill-mode: ; animation-play-state: ; animation-name: ; animation-timeline: ; animation-range-start: ; animation-range-end: ; animation-delay: calc(var(--i,0)*90ms + 120ms); }
.pm-w path{ stroke: rgb(255, 255, 255); stroke-width: 3; stroke-linejoin: round; transition: filter 0.3s; }
.pm-w[data-sec="prot"] path{ fill: rgb(188, 174, 240); }
.pm-w[data-sec="side"] path{ fill: rgb(255, 176, 32); }
.pm-w[data-sec="veg"] path{ fill: rgb(163, 213, 70); }
.pm-w text{ fill: rgb(42, 16, 32); font-family: inherit; font-weight: 800; font-size: 23px; text-anchor: middle; pointer-events: none; }
.pm-w text.pm-w__n{ font-size: 11px; font-weight: 600; opacity: 0.85; letter-spacing: 0.01em; }
.pm-plate2.has .pm-w:not(.on){ opacity: 0.72; }
.pm-w.on[data-sec="prot"]{ transform: translate(9px, -9px); }
.pm-w.on[data-sec="veg"]{ transform: translate(-12px, 0px); }
.pm-w.on path{ filter: drop-shadow(rgba(0, 0, 0, 0.35) 0px 10px 14px); }
.pm-tap{ fill: none; stroke: rgb(255, 255, 255); stroke-width: 2.5; opacity: 0; transform-origin: 62px 120px; animation: 1.7s ease-out 1.1s infinite normal none running pmTap; pointer-events: none; }
.pm-plate2.touched .pm-tap{ display: none; }
@keyframes pmTap { 
  0% { opacity: 0.95; transform: scale(0.5); }
  70% { opacity: 0; transform: scale(2); }
  100% { opacity: 0; transform: scale(2); }
}
.pm-fat{ position: absolute; right: -40px; bottom: -12px; border: 0px; background: transparent; padding: 0px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; color: rgba(255, 255, 255, 0.85); font-family: inherit; z-index: 3; }
.pm-fat svg{ width: 64px; height: 40px; overflow: visible; filter: drop-shadow(rgba(0, 0, 0, 0.45) 0px 8px 14px); transition: transform .35s var(--spring); }
.pm-fat__h{ stroke: rgb(255, 255, 255); stroke-width: 6; }
.pm-fat__b{ fill: rgb(255, 255, 255); }
.pm-fat__o{ fill: rgb(232, 185, 60); }
.pm-fat small{ font-size: 10.5px; font-weight: 600; white-space: nowrap; background: rgba(255, 255, 255, 0.12); box-shadow: rgba(255, 255, 255, 0.22) 0px 0px 0px 1px inset; border-radius: 100px; padding: 3px 8px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background 0.2s, color 0.2s; }
.pm-hint{ position: absolute; left: 0px; right: 0px; top: 358px; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, 0.78); transition: opacity 0.3s; }
.pm-hint i{ width: 8px; height: 8px; border-radius: 50%; background: rgb(255, 255, 255); box-shadow: rgba(255, 255, 255, 0.6) 0px 0px 0px 0px; animation: 1.7s ease-out 0s infinite normal none running pmDot; }
@keyframes pmDot { 
  0% { box-shadow: rgba(255, 255, 255, 0.6) 0px 0px 0px 0px; }
  70% { box-shadow: rgba(255, 255, 255, 0) 0px 0px 0px 9px; }
  100% { box-shadow: rgba(255, 255, 255, 0) 0px 0px 0px 9px; }
}
.pm-hint.off{ opacity: 0; }
.pm-seg{ position: absolute; left: 20px; right: 20px; top: 384px; z-index: 3; display: flex; gap: 6px; }
.pm-seg button{ flex: 1 1 0px; height: 46px; border: 0px; border-radius: 14px; background: rgba(255, 255, 255, 0.1); box-shadow: rgba(255, 255, 255, 0.2) 0px 0px 0px 1px inset; color: rgb(255, 255, 255); font-family: inherit; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background 0.2s, color 0.2s, transform 0.15s; }
.pm-seg button:active{ transform: scale(0.96); }
.pm-seg button b{ font-size: 14px; font-weight: 700; line-height: 1; }
.pm-seg button small{ font-size: 10.5px; opacity: 0.78; }
.pm-seg button.on{ background: rgb(255, 255, 255); color: rgb(16, 16, 20); }
.pm-seg button.on small{ opacity: 0.6; }
.pm-info{ background: rgb(255, 255, 255); border-radius: 24px; padding: 16px; box-shadow: rgba(20, 4, 12, 0.07) 0px 10px 28px, rgba(12, 14, 18, 0.03) 0px 0px 0px 1px inset; }
.pm-info__h{ display: flex; align-items: center; gap: 12px; }
.pm-info__h i{ width: 14px; height: 14px; border-radius: 50%; flex: 0 0 auto; box-shadow: rgba(0, 0, 0, 0.06) 0px 0px 0px 1px inset; }
.pm-info__h b{ display: block; font-size: 17px; font-weight: 600; letter-spacing: -0.4px; }
.pm-info__h small{ display: block; font-size: 12px; color: rgb(139, 138, 146); margin-top: 2px; }
.pm-info__r{ display: flex; gap: 12px; margin-top: 12px; font-size: 14px; line-height: 1.45; color: rgb(42, 40, 48); }
.pm-info__l{ flex: 0 0 64px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; color: rgb(163, 162, 170); padding-top: 3px; }
.pm-info__q{ display: flex; gap: 10px; align-items: flex-start; flex: 1 1 auto; min-width: 0px; }
.pm-info__q em{ display: block; font-style: normal; font-size: 12.5px; color: rgb(139, 138, 146); margin-top: 3px; }
.hd-tile{ display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; flex: 0 0 auto; color: var(--hc,#2a1020); }
.hd-tile svg{ width: 30px; height: 30px; display: block; fill: none; stroke: currentcolor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hd-tile--s{ width: 40px; height: 40px; border-radius: 12px; }
.hd-tile--s svg{ width: 22px; height: 22px; stroke-width: 1.9; }
.pm-hands{ background: rgb(255, 255, 255); border-radius: 22px; margin-top: 12px; box-shadow: rgba(20, 4, 12, 0.06) 0px 8px 24px, rgba(12, 14, 18, 0.03) 0px 0px 0px 1px inset; overflow: hidden; }
.pm-hands__i{ padding: 14px 16px; font-size: 13.5px; line-height: 1.45; color: rgb(95, 94, 102); border-bottom: 1px solid rgba(12, 14, 18, 0.06); }
.pm-hand{ display: flex; align-items: center; gap: 14px; padding: 12px 16px; cursor: pointer; transition: background 0.2s; }
.pm-hand + .pm-hand{ border-top: 1px solid rgba(12, 14, 18, 0.06); }
.pm-hand.on{ background: rgb(246, 246, 248); }
.pm-hand__b{ flex: 1 1 auto; min-width: 0px; }
.pm-hand b{ display: block; font-size: 14.5px; font-weight: 600; letter-spacing: -0.2px; }
.pm-hand small{ display: block; font-size: 12px; color: rgb(139, 138, 146); margin-top: 2px; line-height: 1.35; }
.pm-hand em{ display: block; font-style: normal; font-size: 12px; color: rgb(95, 94, 102); margin-top: 3px; }
.pm-ex{ background: rgb(255, 255, 255); border-radius: 22px; margin-top: 12px; box-shadow: rgba(20, 4, 12, 0.06) 0px 8px 24px, rgba(12, 14, 18, 0.03) 0px 0px 0px 1px inset; overflow: hidden; }
.pm-ex__row{ display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; }
.pm-ex__row + .pm-ex__row{ border-top: 1px solid rgba(12, 14, 18, 0.06); }
.pm-ex__ph{ width: 64px; height: 64px; border-radius: 16px; background-size: cover; background-position: center center; flex: 0 0 auto; }
.pm-ex__b{ flex: 1 1 auto; min-width: 0px; }
.pm-ex__b b{ display: block; font-size: 14px; font-weight: 600; letter-spacing: -0.2px; line-height: 1.25; }
.pm-ex__b small{ display: block; font-size: 11.5px; color: rgb(139, 138, 146); margin-top: 3px; }
.pm-ex__b em{ display: block; font-style: normal; font-size: 12.5px; font-weight: 600; margin-top: 4px; }
.pm-ex__b em.ok{ color: rgb(93, 127, 28); }
.pm-ex__b em.warn{ color: rgb(184, 101, 27); }
.pm-mini{ width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto; box-shadow: rgb(255, 255, 255) 0px 0px 0px 3px inset, rgba(12, 14, 18, 0.08) 0px 0px 0px 1px; }
.pm-why{ background: rgb(246, 246, 248); border-radius: 20px; padding: 14px 16px; margin-top: 14px; font-size: 13.5px; line-height: 1.45; }
.pm-why b{ display: block; font-weight: 600; margin-bottom: 3px; }
.pm-cta{ display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.bd-hero{ position: relative; overflow: hidden; isolation: isolate; border-radius: 26px; color: rgb(255, 255, 255); background: radial-gradient(120% 110% at 100% 0%, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 55%), linear-gradient(150deg, rgb(38, 38, 42) 0%, rgb(20, 20, 22) 100%); box-shadow: rgba(12, 12, 14, 0.32) 0px 20px 44px; }
.bd-hero .phero__grain{ opacity: 0.26; }
.bd-hero__in{ position: relative; z-index: 2; padding: 16px 18px 20px; display: flex; flex-direction: column; align-items: center; }
.bd-hero .bd-meals{ width: 100%; margin-top: 0px; background: rgba(255, 255, 255, 0.1); border-radius: 100px; padding: 3px; gap: 2px; }
.bd-hero .bd-meals span{ height: 34px; border-radius: 100px; background: transparent; box-shadow: none; color: rgba(255, 255, 255, 0.7); }
.bd-hero .bd-meals span.on{ background: rgb(255, 255, 255); color: rgb(16, 16, 20); }
.bd-hero .bd-plate{ width: 172px; height: 172px; margin: 26px 0px 8px; }
.bd-hero .bd-plate::before{ inset: -14px; background: rgba(255, 255, 255, 0.06); box-shadow: rgba(255, 255, 255, 0.14) 0px 0px 0px 1px inset; }
.bd-hero .bd-plate__disc{ background: rgba(255, 255, 255, 0.12); box-shadow: rgba(255, 255, 255, 0.22) 0px 0px 0px 3px inset, rgba(0, 0, 0, 0.35) 0px 18px 40px; }
.bd-hero .bd-plate.has .bd-plate__disc{ box-shadow: rgb(255, 255, 255) 0px 0px 0px 4px inset, rgba(0, 0, 0, 0.4) 0px 18px 40px; }
.bd-hero .bd-plate__tpl path{ stroke: rgba(255, 255, 255, 0.75); stroke-width: 1.2; }
.bd-hero .bd-plate__fat{ right: -6px; bottom: 2px; width: 30px; height: 30px; background: rgba(255, 255, 255, 0.14); box-shadow: rgba(255, 255, 255, 0.4) 0px 0px 0px 1.5px inset, rgba(0, 0, 0, 0.3) 0px 6px 12px; }
.bd-hero .bd-plate__fat.on{ background: rgb(232, 185, 60); box-shadow: rgb(255, 255, 255) 0px 0px 0px 3px, rgba(0, 0, 0, 0.3) 0px 6px 12px; }
.bd-plate__l{ position: absolute; font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.75); white-space: nowrap; text-shadow: rgba(0, 0, 0, 0.5) 0px 1px 6px; transition: opacity 0.3s; }
.bd-plate__l--veg{ left: 14px; top: 50%; transform: translateY(-50%); }
.bd-plate__l--prot{ right: 18px; top: 38px; }
.bd-plate__l--side{ right: 18px; bottom: 38px; }
.bd-plate.has .bd-plate__l{ color: rgb(42, 16, 32); text-shadow: none; font-weight: 700; }
.bd-hero .bd-sum{ width: 100%; text-align: center; }
.bd-hero .bd-sum__k{ font-size: 30px; letter-spacing: -1px; margin-top: 6px; }
.bd-hero .bd-sum__m{ color: rgba(255, 255, 255, 0.62); font-size: 12.5px; max-width: 280px; margin: 6px auto 0px; }
.bd-hero .bd-sum__v{ color: rgb(207, 227, 163); font-size: 13px; }
.bd-hero .bd-sum__v.warn{ color: rgb(255, 180, 162); }
.bd-hero .bd-bal{ background: rgb(255, 255, 255); color: rgb(16, 16, 20); box-shadow: rgba(0, 0, 0, 0.3) 0px 10px 24px; }
.bd-hero .bd-bal svg{ color: rgba(255, 255, 255, 0.7); }
.bd .bd-list{ margin-top: 14px; }
.bd{ padding-bottom: 110px; }
.bd-plate{ position: relative; width: 116px; height: 116px; flex: 0 0 auto; }
.bd-plate::before{ content: ""; position: absolute; inset: -8px; border-radius: 50%; background: rgb(246, 246, 248); box-shadow: rgba(12, 14, 18, 0.06) 0px 0px 0px 1px inset; }
.bd-plate__disc{ position: absolute; inset: 0px; border-radius: 50%; background: rgb(233, 233, 236); box-shadow: rgb(255, 255, 255) 0px 0px 0px 4px inset; transition: background 0.35s; }
.bd-plate.pulse .bd-plate__disc{ animation: bdPulse .7s var(--spring); }
@keyframes bdPulse { 
  0% { transform: scale(1); }
  40% { transform: scale(1.07); }
  100% { transform: scale(1); }
}
.bd-plate__tpl{ position: absolute; inset: 0px; width: 100%; height: 100%; pointer-events: none; }
.bd-plate__tpl path{ fill: none; stroke: rgba(16, 16, 20, 0.55); stroke-width: 1.4; stroke-dasharray: 3, 3.5; stroke-linecap: round; }
.bd-plate__fat{ position: absolute; right: -16px; bottom: -4px; width: 26px; height: 26px; border-radius: 50%; background: rgb(233, 233, 236); box-shadow: rgb(255, 255, 255) 0px 0px 0px 3px, rgba(20, 4, 12, 0.12) 0px 6px 12px; transition: background 0.3s; }
.bd-plate__fat.on{ background: rgb(232, 185, 60); }
.bd-sum{ flex: 1 1 auto; min-width: 0px; }
.bd-sum__k{ font-size: 22px; font-weight: 700; letter-spacing: -0.6px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.bd-sum__m{ font-size: 12.5px; color: rgb(139, 138, 146); margin-top: 4px; line-height: 1.35; }
.bd-sum__v{ font-size: 12.5px; font-weight: 600; margin-top: 8px; color: rgb(93, 127, 28); line-height: 1.35; }
.bd-sum__v.warn{ color: rgb(192, 57, 43); }
.bd-sum__v:empty{ display: none; }
.bd-bal{ display: none; align-items: center; gap: 6px; height: 34px; padding: 0px 13px 0px 10px; margin-top: 10px; border: 0px; border-radius: 100px; background: rgb(16, 16, 20); color: rgb(255, 255, 255); font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; box-shadow: rgba(16, 16, 20, 0.18) 0px 8px 18px; transition: transform 0.15s; }
.bd-bal.on{ display: inline-flex; }
.bd-bal:active{ transform: scale(0.96); }
.bd-bal svg{ width: 14px; height: 14px; }
.bd-meals{ display: flex; gap: 6px; margin-top: 12px; }
.bd-meals span{ flex: 1 1 0px; height: 36px; border-radius: 12px; background: rgb(255, 255, 255); box-shadow: rgba(12, 14, 18, 0.08) 0px 0px 0px 1px inset; font-size: 12.5px; font-weight: 600; color: rgb(95, 94, 102); display: grid; place-items: center; cursor: pointer; transition: background 0.2s, color 0.2s; }
.bd-meals span.on{ background: rgb(16, 16, 20); color: rgb(255, 255, 255); box-shadow: none; }
.bd-list{ margin-top: 12px; background: rgb(255, 255, 255); border-radius: 22px; box-shadow: rgba(20, 4, 12, 0.06) 0px 8px 24px, rgba(12, 14, 18, 0.03) 0px 0px 0px 1px inset; overflow: hidden; }
.bd-row{ display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 14px; transition: background 0.6s; }
.bd-row + .bd-row{ border-top: 1px solid rgba(12, 14, 18, 0.06); }
.bd-row.flash{ background: rgb(234, 246, 212); }
.bd-row__c{ width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.bd-row__b{ flex: 1 1 auto; min-width: 0px; }
.bd-row__b b{ display: block; font-size: 14px; font-weight: 600; letter-spacing: -0.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-row__b small{ display: block; font-size: 11.5px; color: rgb(139, 138, 146); margin-top: 2px; }
.bd-find{ display: flex; align-items: center; gap: 10px; height: 46px; margin-top: 14px; border-radius: 16px; background: rgb(255, 255, 255); box-shadow: rgba(20, 4, 12, 0.06) 0px 8px 24px, rgba(12, 14, 18, 0.04) 0px 0px 0px 1px inset; padding: 0px 14px; font-size: 14.5px; color: rgb(163, 162, 170); cursor: pointer; }
.bd-find svg{ width: 18px; height: 18px; color: rgb(163, 162, 170); }
.bd-groups{ margin-top: 10px; background: rgb(255, 255, 255); border-radius: 22px; box-shadow: rgba(20, 4, 12, 0.06) 0px 8px 24px, rgba(12, 14, 18, 0.03) 0px 0px 0px 1px inset; overflow: hidden; }
.bd-grp{ display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; transition: background 0.15s; }
.bd-grp:active{ background: rgb(250, 248, 251); }
.bd-grp + .bd-grp{ border-top: 1px solid rgba(12, 14, 18, 0.06); }
.bd-grp__b{ flex: 1 1 auto; min-width: 0px; }
.bd-grp__b b{ display: block; font-size: 15px; font-weight: 600; letter-spacing: -0.2px; }
.bd-grp__b b small{ font-size: 12px; font-weight: 500; color: rgb(139, 138, 146); }
.bd-grp__b > small{ display: block; font-size: 12px; color: rgb(139, 138, 146); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-grp__n{ display: none; min-width: 22px; height: 22px; padding: 0px 7px; border-radius: 100px; background: rgb(16, 16, 20); color: rgb(255, 255, 255); font-size: 11.5px; font-weight: 700; place-items: center; flex: 0 0 auto; }
.bd-grp__n.on{ display: grid; }
.bd-search{ display: block; width: 100%; height: 44px; margin-top: 12px; border: 0px; border-radius: 14px; background: rgb(246, 246, 248); box-shadow: rgba(12, 14, 18, 0.04) 0px 0px 0px 1px inset; padding: 0px 14px; font-family: inherit; font-size: 14.5px; color: rgb(16, 16, 20); outline: none; appearance: none; }
.bd-search::placeholder{ color: rgb(163, 162, 170); }
.bd-search:focus{ box-shadow: rgb(16, 16, 20) 0px 0px 0px 1.5px inset; }
.nv-sheet--bd{ padding-bottom: 26px; z-index: 27; }
.bd-sh__h{ display: flex; align-items: center; gap: 12px; }
.bd-sh__s{ font-size: 12.5px; color: rgb(139, 138, 146); margin-top: 2px; }
.bd-sh__list{ max-height: 360px; overflow-y: auto; margin-top: 10px; border-radius: 18px; background: rgb(246, 246, 248); scrollbar-width: none; }
.bd-sh__list::-webkit-scrollbar{ display: none; }
.bd-sh__row.on .bd-sh__add{ background: rgb(16, 16, 20); color: rgb(255, 255, 255); box-shadow: none; }
.bd-sh__row.on small{ color: rgb(93, 127, 28); }
.bd-sh__empty{ padding: 22px 14px; text-align: center; font-size: 13.5px; color: rgb(139, 138, 146); }
.rp-home__h{ display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.rp-home__cnt{ flex: 0 0 auto; min-width: 30px; height: 30px; padding: 0px 9px; border-radius: 100px; background: rgba(255, 255, 255, 0.12); box-shadow: rgba(255, 255, 255, 0.22) 0px 0px 0px 1px inset; font-size: 13px; font-weight: 700; display: grid; place-items: center; margin-top: 2px; }
.rp-home__foot{ display: flex; align-items: center; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.rp-home__res{ display: block; flex: 1 1 auto; min-width: 0px; cursor: default; margin: 0px; padding: 0px; border: 0px; }
.rp-home__res b{ display: block; font-size: 17px; font-weight: 700; letter-spacing: -0.4px; color: rgb(255, 255, 255); }
.rp-home__res span{ display: block; font-size: 12.5px; color: rgba(255, 255, 255, 0.7); margin-top: 2px; }
.rp-home__res small{ display: block; font-size: 11.5px; color: rgba(255, 255, 255, 0.6); margin-top: 3px; }
.rp-home__res small:empty{ display: none; }
.rp-home__go{ flex: 0 0 auto; height: 40px; padding: 0px 16px; border: 0px; border-radius: 100px; background: rgb(255, 255, 255); color: rgb(16, 16, 20); font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; box-shadow: rgba(0, 0, 0, 0.25) 0px 8px 18px; transition: background 0.2s, color 0.2s; }
.rp-home__go:disabled{ background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.4); box-shadow: none; cursor: default; }
.rp-home__clr{ display: block; margin-top: 10px; font-size: 12px; color: rgba(255, 255, 255, 0.5); cursor: pointer; text-align: right; }
.rp-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px 10px; margin-top: 12px; }
.rp-card{ background: rgb(255, 255, 255); border-radius: 22px; overflow: hidden; box-shadow: rgba(20, 4, 12, 0.07) 0px 10px 26px, rgba(12, 14, 18, 0.03) 0px 0px 0px 1px inset; cursor: pointer; transition: transform 0.15s; }
.rp-card:active{ transform: scale(0.97); }
.rp-card__ph{ position: relative; height: 126px; background-size: cover; background-position: center center; }
.rp-card__kcal{ position: absolute; left: 10px; bottom: 10px; height: 26px; padding: 0px 9px; border-radius: 100px; background: rgba(20, 4, 12, 0.42); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: rgba(255, 255, 255, 0.25) 0px 0px 0px 1px inset; color: rgb(255, 255, 255); font-size: 11.5px; font-weight: 600; display: flex; align-items: center; }
.rp-card__fav{ position: absolute; right: 8px; top: 8px; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, 0.75); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: grid; place-items: center; color: rgb(63, 62, 70); }
.rp-card__fav svg{ width: 15px; height: 15px; }
.rp-card__fav.on{ background: rgb(255, 255, 255); color: rgb(29, 2, 12); }
.rp-card__fav.on svg{ fill: rgb(29, 2, 12); stroke: rgb(29, 2, 12); }
.rp-card__b{ padding: 10px 12px 12px; }
.rp-card__b b{ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13.5px; font-weight: 600; letter-spacing: -0.2px; line-height: 1.25; min-height: 34px; }
.rp-card__b small{ display: block; font-size: 11.5px; color: rgb(139, 138, 146); margin-top: 4px; }
.rp-card__b em{ display: block; font-style: normal; font-size: 11px; color: rgb(163, 162, 170); margin-top: 3px; font-variant-numeric: tabular-nums; }
.rp-more{ display: block; width: 100%; height: 48px; margin-top: 12px; border: 0px; border-radius: 100px; background: rgb(255, 255, 255); box-shadow: rgba(20, 4, 12, 0.06) 0px 8px 24px, rgba(12, 14, 18, 0.06) 0px 0px 0px 1px inset; font-family: inherit; font-size: 14px; font-weight: 600; color: rgb(16, 16, 20); cursor: pointer; }
.dh-hero{ background-size: cover; background-position: center center; transition: background-image 0.2s; }
.dh-hero__sh{ position: absolute; inset: 0px; z-index: 1; background: linear-gradient(rgba(20, 4, 12, 0.25) 0%, rgba(20, 4, 12, 0) 30%, rgba(20, 4, 12, 0.15) 55%, rgba(20, 4, 12, 0.78) 100%); }
.dh-hero .pl4-hero__t{ font-size: 28px; max-width: 320px; }
.dh-chips{ display: flex; gap: 8px; margin-top: 14px; }
.dh-chips span{ height: 34px; padding: 0px 12px; border-radius: 100px; background: rgba(255, 255, 255, 0.14); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: rgba(255, 255, 255, 0.3) 0px 0px 0px 1px inset; font-size: 12px; display: flex; align-items: center; gap: 4px; color: rgba(255, 255, 255, 0.85); }
.dh-chips b{ font-size: 14px; font-weight: 700; color: rgb(255, 255, 255); }
.dh-fit{ background: rgb(255, 255, 255); border-radius: 24px; padding: 16px; box-shadow: rgba(20, 4, 12, 0.07) 0px 10px 28px, rgba(12, 14, 18, 0.03) 0px 0px 0px 1px inset; }
.dh-fit__h{ display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dh-fit__k{ font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(142, 142, 147); }
.dh-fit__t{ font-size: 19px; font-weight: 600; letter-spacing: -0.5px; margin-top: 3px; }
.dh-fit__ok{ width: 36px; height: 36px; border-radius: 50%; background: var(--ok-bg); color: var(--ok); display: grid; place-items: center; flex: 0 0 auto; }
.dh-fit__ok svg{ width: 18px; height: 18px; }
.dh-day{ position: relative; display: flex; gap: 2px; height: 12px; border-radius: 100px; background: rgb(236, 236, 239); overflow: hidden; margin-top: 14px; }
.dh-day i.m{ position: absolute; top: 0px; bottom: 0px; width: 2px; left: var(--x); margin-left: -1px; background: rgb(16, 16, 20); display: none; transition: none; }
.dh-day.over i.m{ display: block; }
.dh-day i{ display: block; height: 100%; width: 0px; transition: width .9s var(--ease) .3s; }
.dh-day i.e{ background: rgb(207, 227, 163); border-radius: 100px 0px 0px 100px; }
.dh-day i.d{ background: rgb(163, 213, 70); box-shadow: rgba(163, 213, 70, 0.6) 0px 0px 10px; }
.dh-day i.o{ background: rgb(29, 2, 12); box-shadow: none; }
.dh-fit--warn .dh-fit__ok{ background: rgb(241, 241, 243); color: rgb(58, 58, 60); }
.dh-fit--done .dh-fit__ok{ background: var(--ok); color: rgb(255, 255, 255); }
.dh-cta__b.done{ background: var(--ok); color: rgb(255, 255, 255); box-shadow: rgba(93, 127, 28, 0.3) 0px 16px 32px; }
.pl4-gb.on{ background: rgb(255, 255, 255); color: rgb(29, 2, 12); }
.pl4-gb.on svg{ fill: rgb(29, 2, 12); stroke: rgb(29, 2, 12); }
.dh-step2 button:disabled{ opacity: 0.35; cursor: default; }
.is-in .dh-day i{ width: var(--w); }
.dh-day__l{ display: flex; justify-content: space-between; font-size: 11px; color: rgb(139, 138, 146); margin-top: 6px; }
.dh-fit__s{ font-size: 13.5px; line-height: 1.45; color: rgb(42, 40, 48); margin-top: 12px; }
.dh-port{ display: flex; align-items: center; justify-content: space-between; gap: 12px; background: rgb(255, 255, 255); border-radius: 20px; padding: 12px 12px 12px 16px; margin-top: 12px; box-shadow: rgba(20, 4, 12, 0.06) 0px 8px 24px, rgba(12, 14, 18, 0.03) 0px 0px 0px 1px inset; }
.dh-port__t{ font-size: 15px; font-weight: 600; letter-spacing: -0.2px; }
.dh-port__s{ font-size: 12px; color: rgb(139, 138, 146); margin-top: 2px; }
.dh-step2{ display: flex; align-items: center; gap: 6px; background: rgb(246, 246, 248); border-radius: 100px; padding: 4px; }
.dh-step2 button{ width: 34px; height: 34px; border: 0px; border-radius: 50%; background: rgb(255, 255, 255); font-family: inherit; font-size: 18px; font-weight: 600; cursor: pointer; box-shadow: rgba(20, 4, 12, 0.08) 0px 2px 6px; }
.dh-step2 b{ min-width: 22px; text-align: center; font-size: 15px; font-weight: 700; }
.dh-ings{ background: rgb(255, 255, 255); border-radius: 20px; margin-top: 12px; box-shadow: rgba(20, 4, 12, 0.06) 0px 8px 24px, rgba(12, 14, 18, 0.03) 0px 0px 0px 1px inset; overflow: hidden; }
.dh-ing{ display: flex; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; }
.dh-ing + .dh-ing{ border-top: 1px solid rgba(12, 14, 18, 0.06); }
.dh-ing span{ flex: 1 1 auto; font-size: 14.5px; }
.dh-ing small{ font-size: 13px; color: rgb(139, 138, 146); }
.dh-steps{ margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.dh-step{ display: flex; gap: 12px; background: rgb(255, 255, 255); border-radius: 20px; padding: 14px 16px; box-shadow: rgba(20, 4, 12, 0.06) 0px 8px 24px, rgba(12, 14, 18, 0.03) 0px 0px 0px 1px inset; }
.dh-step b{ width: 28px; height: 28px; border-radius: 50%; background: rgb(16, 16, 20); color: rgb(255, 255, 255); font-size: 13px; font-weight: 700; display: grid; place-items: center; flex: 0 0 auto; }
.dh-step span{ display: block; font-size: 14.5px; line-height: 1.45; }
.dh-step small{ display: block; font-size: 12px; color: rgb(139, 138, 146); margin-top: 4px; }
.dh-note{ background: rgb(246, 246, 248); border-radius: 20px; padding: 14px 16px; margin-top: 14px; font-size: 13.5px; line-height: 1.45; }
.dh-note b{ display: block; font-weight: 600; margin-bottom: 3px; }
.dh-ing{ display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 16px; cursor: default; }
.dh-ing__b{ flex: 1 1 auto; min-width: 0px; }
.dh-ing__b span{ display: block; font-size: 14.5px; letter-spacing: -0.1px; }
.dh-ing__b small{ display: block; font-size: 11.5px; color: rgb(163, 162, 170); margin-top: 2px; }
.dh-step2--s{ padding: 3px; }
.dh-step2--s button{ width: 30px; height: 30px; font-size: 16px; }
.dh-step2--s b{ min-width: 52px; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.dh-ing__x{ height: 32px; padding: 0px 12px; border: 0px; border-radius: 100px; background: rgb(246, 246, 248); font-family: inherit; font-size: 12.5px; font-weight: 600; color: rgb(95, 94, 102); cursor: pointer; white-space: nowrap; }
.dh-ing__x b{ font-weight: 600; color: rgb(163, 162, 170); margin-left: 2px; }
.dh-add{ margin-top: 10px; }
.dh-add__b{ width: 100%; height: 44px; border: 0px; border-radius: 100px; background: rgb(255, 255, 255); box-shadow: rgba(20, 4, 12, 0.06) 0px 8px 24px, rgba(12, 14, 18, 0.06) 0px 0px 0px 1px inset; font-family: inherit; font-size: 13.5px; font-weight: 600; color: rgb(16, 16, 20); cursor: pointer; }
.dh-add__opts{ display: none; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.dh-add__opts span{ height: 34px; padding: 0px 13px; border-radius: 100px; background: rgb(255, 255, 255); box-shadow: rgba(12, 14, 18, 0.08) 0px 0px 0px 1px inset; font-size: 13px; font-weight: 600; display: grid; place-items: center; cursor: pointer; }
.rp-fit{ background: rgb(255, 255, 255); border-radius: 24px; padding: 16px 16px 14px; margin-top: 12px; box-shadow: rgba(20, 4, 12, 0.07) 0px 10px 28px, rgba(12, 14, 18, 0.03) 0px 0px 0px 1px inset; }
.rp-fit__k{ font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(142, 142, 147); }
.rp-fit__t{ font-size: 19px; font-weight: 600; letter-spacing: -0.5px; margin-top: 4px; }
.rp-fit__s{ font-size: 12.5px; color: rgb(139, 138, 146); margin-top: 3px; }
.rp-fit__row{ display: flex; gap: 10px; margin: 14px -16px 0px; padding: 0px 16px; overflow-x: auto; scrollbar-width: none; }
.rp-fit__row::-webkit-scrollbar{ display: none; }
.rp-dish{ flex: 0 0 118px; cursor: pointer; }
.rp-dish__ph{ display: block; width: 118px; height: 118px; border-radius: 20px; background-size: cover; background-position: center center; box-shadow: rgba(20, 4, 12, 0.14) 0px 10px 22px; }
.rp-dish b{ display: block; font-size: 12.5px; font-weight: 600; letter-spacing: -0.2px; line-height: 1.25; margin-top: 8px; }
.rp-dish small{ display: block; font-size: 11px; color: rgb(139, 138, 146); margin-top: 3px; }
.rp-cats{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.rp-cat{ position: relative; overflow: hidden; height: 112px; border-radius: 20px; background-size: cover; background-position: center center; color: rgb(255, 255, 255); display: flex; align-items: flex-end; padding: 12px 14px; cursor: pointer; box-shadow: rgba(20, 4, 12, 0.12) 0px 10px 24px; }
.rp-cat::after{ content: ""; position: absolute; inset: 0px; background: linear-gradient(rgba(12, 12, 14, 0) 35%, rgba(12, 12, 14, 0.72) 100%); }
.rp-cat span{ position: relative; z-index: 2; }
.rp-cat b{ display: block; font-size: 15px; font-weight: 600; letter-spacing: -0.2px; }
.rp-cat small{ display: block; font-size: 11px; color: rgba(255, 255, 255, 0.8); margin-top: 2px; }
.rp-col__cov{ background-size: cover; background-position: center center; }
.rp-col__cov::after{ content: ""; position: absolute; inset: 0px; background: linear-gradient(rgba(12, 12, 14, 0) 40%, rgba(12, 12, 14, 0.6) 100%); }
.rp-col__cov .pl4-cov__t{ z-index: 2; }
.rp-col__cov--method{ background: linear-gradient(150deg, rgb(44, 44, 48) 0%, rgb(28, 28, 31) 100%); }
.rp-plate{ position: absolute; left: 50%; top: 44%; width: 66px; height: 66px; margin: -33px 0px 0px -33px; border-radius: 50%; background: conic-gradient(rgb(163, 213, 70) 0deg, rgb(163, 213, 70) 50%, rgb(188, 174, 240) 50%, rgb(188, 174, 240) 75%, rgb(255, 176, 32) 75%, rgb(255, 176, 32) 100%); box-shadow: rgba(255, 255, 255, 0.14) 0px 0px 0px 4px; }
.rp-plate i{ display: none; }
.rp-fav{ display: flex; flex: 0 0 auto; padding-left: 12px; }
.rp-fav img{ width: 36px; height: 36px; border-radius: 50%; object-fit: cover; margin-left: -12px; box-shadow: rgb(255, 255, 255) 0px 0px 0px 2px; }
.rf-app.bd-open .nv-sheet--bd{ transform: none; }
.gd-rq{ display: flex; align-items: center; gap: 10px; }
.gd-rq input{ flex: 1 1 auto; min-width: 0px; border: 0px; outline: 0px; background: transparent; font-family: inherit; font-size: 15px; color: rgb(16, 16, 20); }
.gd-rq input::placeholder{ color: rgb(163, 162, 170); }
.gd-rq .gd-q__x{ flex: 0 0 auto; width: 22px; height: 22px; border: 0px; border-radius: 50%; background: rgb(228, 227, 232); color: rgb(110, 109, 117); display: none; place-items: center; padding: 0px; cursor: pointer; }
.gd-rq.has .gd-q__x{ display: grid; }
.gd-rres{ margin-top: 4px; }
.gd-rres .gd-qe{ background: rgb(255, 255, 255); border-radius: 26px; padding: 30px 22px 24px; box-shadow: rgba(20, 16, 26, 0.05) 0px 8px 24px; }
.gd-rres .gd-qe__ic{ width: 52px; height: 52px; margin: 0px auto 12px; border-radius: 50%; background: rgb(243, 242, 245); display: grid; place-items: center; color: rgb(16, 16, 20); }
.gd-rres .gd-qe__ic svg{ width: 22px; height: 22px; }
.gd-rres .gd-sug{ display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 14px; }
.gd-rres .gd-sug span{ padding: 7px 12px; border-radius: 100px; background: rgb(243, 242, 245); font-size: 13px; color: rgb(63, 62, 70); cursor: pointer; }
.pl4-gb[data-fav].on{ color: rgb(29, 2, 12); }
.pl4-gb[data-fav].on svg{ fill: currentcolor; }
.gd-tm{ display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; height: 30px; padding: 0px 12px 0px 5px; border: 0px; border-radius: 100px; background: rgb(243, 242, 245); font-family: inherit; font-size: 13px; font-weight: 600; color: rgb(16, 16, 20); cursor: pointer; font-variant-numeric: tabular-nums; }
.gd-tm u{ width: 22px; height: 22px; border-radius: 50%; background: rgb(16, 16, 20); color: rgb(255, 255, 255); display: grid; place-items: center; text-decoration: none; }
.gd-tm u svg{ width: 11px; height: 11px; }
.gd-tm.run{ background: rgb(16, 16, 20); color: rgb(255, 255, 255); padding-left: 4px; }
.gd-tm.run u{ background: none; width: 22px; height: 22px; position: relative; }
.gd-tm.run u::before{ content: ""; position: absolute; inset: 0px; border-radius: 50%; background: conic-gradient(#fff calc(var(--p,0)*1%),rgba(255,255,255,.22) 0); mask: radial-gradient(circle, transparent 7px, rgb(0, 0, 0) 7.5px); }
.gd-tm.run u svg{ position: relative; width: 9px; height: 9px; }
.gd-tm.pause{ background: rgb(255, 255, 255); box-shadow: rgb(16, 16, 20) 0px 0px 0px 1.5px inset; }
.gd-tm small{ font-weight: 500; color: rgb(139, 138, 146); font-size: 12px; }
.dh-step small.gd-hide{ display: none; }
.gd-task{ display: flex; gap: 12px; align-items: center; background: rgb(255, 255, 255); border-radius: 22px; padding: 14px 16px; margin: 0px 0px 12px; box-shadow: rgba(20, 16, 26, 0.05) 0px 8px 20px; }
.gd-task__ic{ flex: 0 0 auto; width: 40px; height: 40px; border-radius: 14px; background: rgb(243, 242, 245); display: grid; place-items: center; color: rgb(16, 16, 20); }
.gd-task__ic svg{ width: 20px; height: 20px; }
.gd-task b{ display: block; font-size: 14.5px; font-weight: 600; letter-spacing: -0.2px; }
.gd-task small{ display: block; font-size: 12px; color: rgb(139, 138, 146); margin-bottom: 2px; }
.gd-task__p{ display: flex; gap: 4px; margin-top: 8px; }
.gd-task__p i{ flex: 1 1 0px; height: 5px; border-radius: 4px; background: rgb(236, 235, 239); }
.gd-task__p i.on{ background: rgb(16, 16, 20); }
.gd-task__n{ flex: 0 0 auto; font-size: 13px; font-weight: 600; color: rgb(16, 16, 20); }
.gd-mine{ margin: 14px 0px 12px; }
.gd-mine__h{ display: flex; justify-content: space-between; align-items: baseline; padding: 0px 4px 8px; }
.gd-mine__h b{ font-size: 15px; font-weight: 600; letter-spacing: -0.3px; }
.gd-mine__h small{ font-size: 12px; color: rgb(139, 138, 146); }
.gd-mine__row{ display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; margin: 0px -16px; padding: 0px 16px; }
.gd-mine__c{ flex: 0 0 180px; background: rgb(255, 255, 255); border-radius: 22px; padding: 10px; display: flex; gap: 10px; align-items: center; cursor: pointer; box-shadow: rgba(20, 16, 26, 0.05) 0px 8px 20px; }
.gd-mine__c span{ flex: 0 0 auto; width: 48px; height: 48px; border-radius: 14px; background-size: cover; background-position: center center; }
.gd-mine__c b{ display: block; font-size: 13px; font-weight: 600; line-height: 1.25; letter-spacing: -0.1px; }
.gd-mine__c small{ display: block; font-size: 11.5px; color: rgb(139, 138, 146); margin-top: 2px; }
#bdCta:disabled{ pointer-events: none; }
.gd-bdph{ display: flex; align-items: center; gap: 12px; background: rgb(255, 255, 255); border-radius: 20px; padding: 10px 12px; margin: 0px 0px 10px; box-shadow: rgba(20, 16, 26, 0.06) 0px 8px 20px; }
.gd-bdph span{ flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px; background-size: cover; background-position: center center; }
.gd-bdph span.e{ background: rgb(243, 242, 245); display: grid; place-items: center; color: rgb(16, 16, 20); }
.gd-bdph span.e svg{ width: 20px; height: 20px; }
.gd-bdph div{ flex: 1 1 auto; min-width: 0px; }
.gd-bdph b{ display: block; font-size: 13.5px; font-weight: 600; }
.gd-bdph small{ display: block; font-size: 12px; color: rgb(139, 138, 146); margin-top: 1px; }
.gd-bdph button{ flex: 0 0 auto; height: 34px; padding: 0px 14px; border: 0px; border-radius: 100px; background: rgb(243, 242, 245); font-family: inherit; font-size: 13px; font-weight: 600; color: rgb(16, 16, 20); cursor: pointer; }
.dh-cta.gd-hasph{ display: flex; flex-direction: column; }
.gd-rcap{ margin: 4px 2px 0px; font-size: 12.5px; line-height: 1.4; color: rgb(139, 138, 146); }
.rp-cat.gd-on{ box-shadow: rgb(255, 255, 255) 0px 0px 0px 2px, rgb(16, 16, 20) 0px 0px 0px 3.5px; }
.gd-rflt{ display: flex; align-items: center; justify-content: space-between; margin: 10px 2px 0px; font-size: 13px; color: rgb(95, 94, 102); }
.gd-rflt a{ font-weight: 600; color: rgb(16, 16, 20); cursor: pointer; }
.gd-own{ display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 14px 16px; border-radius: 22px; background: rgb(255, 255, 255); box-shadow: rgba(20, 16, 26, 0.05) 0px 8px 20px; cursor: pointer; }
.gd-own__ic{ flex: 0 0 auto; width: 40px; height: 40px; border-radius: 14px; background: rgb(243, 242, 245); display: grid; place-items: center; color: rgb(16, 16, 20); }
.gd-own__ic svg{ width: 20px; height: 20px; }
.gd-own div{ flex: 1 1 auto; min-width: 0px; }
.gd-own small{ display: block; font-size: 12px; color: rgb(139, 138, 146); }
.gd-own b{ display: block; font-size: 14.5px; font-weight: 600; letter-spacing: -0.2px; margin-top: 1px; }
.gd-own span{ display: block; font-size: 12.5px; color: rgb(139, 138, 146); margin-top: 2px; line-height: 1.35; }
.gd-own .chev{ flex: 0 0 auto; width: 16px; height: 16px; color: rgb(199, 198, 204); }
.gd-own .chev svg{ width: 16px; height: 16px; }
.dh-note{ background: rgb(255, 255, 255); box-shadow: rgba(20, 16, 26, 0.05) 0px 8px 20px; }
.gd-care{ background: rgb(255, 255, 255); border-radius: 20px; margin-top: 10px; padding: 4px 16px; box-shadow: rgba(20, 16, 26, 0.05) 0px 8px 20px; }
.gd-care__r{ display: flex; gap: 12px; padding: 12px 0px; font-size: 13.5px; line-height: 1.45; color: rgb(63, 62, 70); }
.gd-care__r + .gd-care__r{ border-top: 1px solid rgba(16, 16, 20, 0.06); }
.gd-care__r b{ flex: 0 0 96px; font-weight: 600; color: rgb(16, 16, 20); }
.gd-swap{ display: flex; align-items: center; gap: 8px; padding: 11px 0px; font-size: 13.5px; color: rgb(63, 62, 70); }
.gd-swap + .gd-swap{ border-top: 1px solid rgba(16, 16, 20, 0.06); }
.gd-swap em{ font-style: normal; color: rgb(163, 162, 170); }
.gd-swap b{ font-weight: 600; color: rgb(16, 16, 20); }
.bd-sh__row.on .bd-sh__add{ background: rgb(29, 2, 12); }
.bd-meals span.on{ background: rgb(29, 2, 12); color: rgb(255, 255, 255); box-shadow: none; }
.gd-rq:focus-within,.bd-search:focus{ box-shadow: rgb(255, 197, 220) 0px 0px 0px 1.5px inset; }

/* ---- src/styles/42-home-train.css ---- */
/* Главная: тренировка дня (home-train.js, концепция А «Обложка дня»).
 * Баннер — цельная карточка во всю колонку (350 px = формат banner 350×196
 * серии Лианы): фото на всю карточку, фигура справа, слева винный градиент
 * под текст, одна белая кнопка. Выполнена — тихая белая строка «Дальше». */
.hm-tb {
  position: relative; display: block; height: 196px; border-radius: 24px; overflow: hidden; isolation: isolate;
  background: #3a0a18; color: #fff; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hm-tb__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%; z-index: -2; }
/* Винный градиент: текст слева читается на любом кадре (и на своей обложке коуча). */
.hm-tb::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(29, 2, 12, .82) 0%, rgba(29, 2, 12, .62) 38%, rgba(29, 2, 12, .18) 64%, rgba(29, 2, 12, 0) 82%),
    linear-gradient(0deg, rgba(29, 2, 12, .38) 0%, rgba(29, 2, 12, 0) 46%);
}
.hm-tb__b { position: absolute; left: 20px; right: 20px; top: 18px; bottom: 18px; display: flex; flex-direction: column; align-items: flex-start; }
.hm-tb__k { font-size: 13px; line-height: 1.25; color: rgba(255, 255, 255, .72); letter-spacing: -.1px; max-width: 230px; }
.hm-tb__t {
  font-size: 24px; font-weight: 600; letter-spacing: -.6px; line-height: 1.1; margin-top: 6px; max-width: 208px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-wrap: balance;
}
.hm-tb__m { font-size: 13.5px; line-height: 1.35; color: rgba(255, 255, 255, .78); margin-top: 6px; max-width: 236px; }
.hm-tb__f { margin-top: auto; display: flex; align-items: center; gap: 16px; }
.hm-tb__btn {
  height: 44px; padding: 0 20px 0 16px; border: 0; border-radius: 100px; background: #fff; color: #1d020c;
  display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 15px; font-weight: 600; letter-spacing: -.2px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .26); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.hm-tb__btn svg { width: 16px; height: 16px; flex: 0 0 auto; }
.hm-tb__btn:active { transform: scale(.97); }
.hm-tb__lnk {
  min-height: 44px; padding: 0; border: 0; background: none; font: inherit; font-size: 13.5px; font-weight: 500; color: rgba(255, 255, 255, .78);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, .34); cursor: pointer;
}
/* Пропущена: кадр приглушён — это долг, а не приглашение. */
.hm-tb--miss .hm-tb__img { filter: saturate(.45) brightness(.9); }

/* Выполнена / день отдыха: тихая строка «✓ Сегодня выполнено · N мин» (или «Сегодня без тренировки»)
 * + «<следующая> — завтра, пт 25 сентября». */
.hm-card.hm-tn { display: flex; align-items: center; gap: 14px; padding: 12px 14px 12px 12px; cursor: pointer; }
.hm-tn__img { width: 56px; height: 56px; border-radius: 16px; object-fit: cover; flex: 0 0 auto; background: #3a0a18; }
.hm-tn__b { flex: 1 1 auto; min-width: 0; }
.hm-tn__k { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 1.25; color: #6f6e77; }
.hm-tn__k svg { width: 15px; height: 15px; flex: 0 0 auto; color: #4d8f1d; }
.hm-tn__t { font-size: 15px; line-height: 1.3; color: #6f6e77; margin-top: 3px; letter-spacing: -.2px; }
.hm-tn__t b { font-weight: 600; color: #101014; }
.hm-tn--rest .hm-tn__k svg { color: #8a8992; }
.hm-tn .gh-chev { flex: 0 0 auto; }

/* ---- src/styles/42-pre-cards.css ---- */
/* СГЕНЕРИРОВАНО tools/gen_pre_story.py из nav-v2/src/more_cards.js — сторис «Вы записаны». */
.xc-ph *{box-sizing:border-box}
.xc-ph{--ink:#0b0b0c;--ink2:#1c1c1e;--mute:#8e8e93;--mute2:#6e6e73;--line:#ececef;--soft:#f4f4f6;--faint:#d1d1d6;--band:#ededf1;opacity:0;transition:opacity .35s ease}
.xc-ph.xc-in{opacity:1}
:where(.xc-ph) h2,:where(.xc-ph) p{font:inherit;margin:0}
.xc-launch .xc-cm .xc-d{visibility:hidden}
.xc-ph{position:absolute;inset:0;z-index:300;border-radius:inherit;font-family:"Geist",-apple-system,BlinkMacSystemFont,sans-serif;color:#111;-webkit-font-smoothing:antialiased;overflow:hidden;isolation:isolate;touch-action:pan-y;user-select:none;-webkit-user-select:none;
 background:#f3f3f5;}
.xc-spot{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(75% 36% at 50% 54%,rgba(255,255,255,.9),rgba(255,255,255,0) 72%)}
.xc-key{position:absolute;left:-40%;top:0;width:180%;height:640px;margin-top:-320px;z-index:0;pointer-events:none;background:radial-gradient(50% 50% at 50% 50%,rgba(255,255,255,.95),rgba(255,255,255,0) 70%)}
.xc-floor{position:absolute;left:10%;right:10%;top:0;height:64px;margin-top:-24px;z-index:1;pointer-events:none;background:radial-gradient(50% 50% at 50% 50%,rgba(20,20,40,.07),rgba(20,20,40,0) 72%)}
.xc-amb{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;background:radial-gradient(120% 55% at 50% 16%,#eae7e5 0%,rgba(243,243,245,0) 70%)}
.xc-bars{position:absolute;top:68px;left:22px;right:22px;display:flex;gap:4px;z-index:40;transition:opacity .3s}
.xc-bars i{flex:1;height:3px;border-radius:2px;background:#e2e2e7;overflow:hidden}
.xc-bars u{display:block;height:100%;width:100%;background:#111;transform-origin:left;transform:scaleX(0)}
.xc-skip{position:absolute;top:74px;right:12px;z-index:42;font:inherit;font-size:15px;color:var(--mute);background:none;border:0;padding:10px;transition:opacity .3s}
.xc-ph.xc-held .xc-bars,.xc-ph.xc-held .xc-skip{opacity:0}
.xc-tap{position:absolute;top:110px;bottom:120px;width:34%;z-index:5;border:0;background:none;padding:0;opacity:0}
.xc-tap--l{left:0}.xc-tap--r{right:0;width:66%}
.xc-cta{position:absolute;left:24px;right:24px;bottom:38px;height:56px;border-radius:999px;border:0;color:#fff;font:inherit;font-size:16.5px;font-weight:600;letter-spacing:-.015em;z-index:42;cursor:pointer;overflow:hidden;
 background:#111;box-shadow:0 14px 28px -12px rgba(16,16,20,.34);transition:scale .15s}
.xc-cta:active{scale:.97}.xc-cta span{display:block}
.xc-ph.xc-boot .xc-sc,.xc-ph.xc-boot .xc-cards,.xc-ph.xc-boot .xc-cta,.xc-ph.xc-boot .xc-rt{visibility:hidden}


.xc-sc{position:absolute;left:24px;right:24px;top:116px;visibility:hidden;z-index:6;pointer-events:none}
.xc-sc.xc-on{visibility:visible}
.xc-kk{font-size:14.5px;letter-spacing:-.01em;color:var(--mute);font-weight:600;margin:0 0 8px}
.xc-t{margin:0;font-size:30px;line-height:1.1;font-weight:600;letter-spacing:-.028em;text-wrap:balance;color:#111}
.xc-t em{font-style:normal;color:#8e8e93}
.xc-p{margin:12px 0 0;font-size:15.5px;line-height:1.47;color:var(--mute2);text-wrap:pretty;letter-spacing:-.005em}
.xc-p b{color:var(--ink2);font-weight:500}
.xc-s1 .xc-p2{margin-top:12px}
.xc-s4{top:478px}.xc-s4 .xc-p{font-size:15px;line-height:1.45;margin-top:10px}
.xc-s5 .xc-p{margin-top:10px;font-size:15px}
.xc-s5 .xc-step{position:absolute;top:546px;left:0;right:0;display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.4;color:var(--ink2)}
.xc-s5 .xc-step i{width:20px;height:20px;border-radius:50%;background:var(--ink2);color:#fff;font-style:normal;font-size:11px;font-weight:600;display:grid;place-items:center;flex:none;margin-top:1px}

.xc-rt{position:absolute;left:0;top:0;width:60px;height:700px;z-index:12;pointer-events:none}
.xc-rt__ln{position:absolute;left:53.25px;top:410px;height:166px;width:1.5px;background:linear-gradient(var(--faint),var(--faint));transform-origin:top}
.xc-rt__n{position:absolute;left:40px;width:28px;height:28px;margin-top:-14px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.xc-rt__n--1{top:410px;background:#111;color:#fff;box-shadow:0 0 0 4px #fff}
.xc-rt__n--2{top:576px;background:#111;color:#fff;box-shadow:0 0 0 4px #fff}
.xc-rt__lbl{position:absolute;left:72px;top:484px;font-size:13px;color:var(--mute2);white-space:nowrap}


.xc-cards{position:absolute;inset:0;z-index:10;perspective:1300px;pointer-events:none}
.xc-cd{position:absolute;left:0;top:0;width:342px;transform-origin:50% 0;--lift:0}
.xc-cd__tilt{position:absolute;inset:0;transform-style:preserve-3d}
.xc-cd__in{position:absolute;inset:0;transform-style:preserve-3d}
.xc-face{position:absolute;inset:0;border-radius:26px;overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden;background:#fff;
 box-shadow:inset 0 1px 0 rgba(255,255,255,1),inset 0 0 0 .5px rgba(0,0,0,.06),
  0 1px 2px rgba(0,0,0,.04),
  0 calc(12px + 16px*var(--lift)) calc(28px + 28px*var(--lift)) calc(-14px - 4px*var(--lift)) rgba(0,0,0,calc(.12 + .06*var(--lift))),
  0 28px 56px -32px rgba(0,0,0,.12)}
.xc-face--back{transform:rotateY(180deg)}
.xc-lay{position:absolute;inset:0}
.xc-glare{position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.75),rgba(255,255,255,0) 45%);mix-blend-mode:soft-light}
.xc-sheen{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.xc-sheen{z-index:5}
.xc-sheen::after{content:"";position:absolute;top:-30%;bottom:-30%;left:-50%;width:30%;transform:translateX(var(--sx,-120%)) skewX(-22deg);
 background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.85) 50%,rgba(255,255,255,0));mix-blend-mode:screen}
.xc-face:not(.xc-face--ink) .xc-sheen::after{mix-blend-mode:normal;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.9) 50%,rgba(255,255,255,0))}
.xc-sheen i{display:none}
.xc-lbl{font-size:13px;color:var(--mute);letter-spacing:-.003em}
.xc-num{font-variant-numeric:tabular-nums}
.xc-ava{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none;background:var(--soft);display:block;box-shadow:0 0 0 .5px rgba(0,0,0,.08)}
.xc-crop{overflow:hidden}.xc-crop img{width:100%;height:100%;object-fit:cover;object-position:50% 14%;transform:scale(2.1);transform-origin:50% 22%;display:block}
.xc-odo{display:inline-flex;line-height:1;height:1em;align-items:flex-start}
.xc-od{display:inline-block;height:1em;clip-path:inset(-.06em -.35em -.1em -.35em)}
.xc-od__s{display:flex;flex-direction:column;transform:translateY(calc(var(--d)*-1em))}
.xc-od__s i{font-style:normal;height:1em;line-height:1em;display:block;text-align:center}
.xc-odo .xc-sep{display:inline-block;height:1em;line-height:1em}


.xc-ca{padding:20px 22px 0}
.xc-ca .xc-who{display:flex;align-items:center;gap:12px}
.xc-ca .xc-who>div{flex:1}
.xc-ca .xc-who b{display:block;font-size:16px;font-weight:600;letter-spacing:-.012em;line-height:1.2}
.xc-ca .xc-who>div span{display:block;font-size:13px;color:var(--mute);line-height:1.25}
.xc-ca .xc-tm{display:flex;align-items:flex-end;gap:8px;margin:28px 0 0 -5px}
.xc-ca .xc-big{font-size:118px;font-weight:600;letter-spacing:-.058em;line-height:1;display:block;height:.9em}
.xc-ca .xc-tz{font-size:15px;font-weight:500;color:var(--mute);margin:0 0 8px;letter-spacing:.01em}
.xc-ca .xc-day{font-size:21px;font-weight:500;letter-spacing:-.018em;margin-top:14px}
.xc-perf{position:relative;height:0;margin:28px -22px 0}
.xc-perf i{position:absolute;left:20px;right:20px;top:-.5px;height:1px;background-image:linear-gradient(90deg,#dcdce1 55%,transparent 55%);background-size:7px 1px}
.xc-perf::before,.xc-perf::after{content:"";position:absolute;top:-10px;width:20px;height:20px;border-radius:50%;background:#f3f3f5;box-shadow:inset 0 1px 1px rgba(0,0,0,.06)}
.xc-perf::before{left:-10px}.xc-perf::after{right:-10px}
.xc-stub{display:flex;align-items:center;gap:9px;padding:17px 0 0;font-size:15px;font-weight:500;color:var(--ink2)}
.xc-stub svg{color:var(--mute2);flex:none}
.xc-ok{position:relative;width:28px;height:28px;border-radius:50%;background:var(--ink2);display:grid;place-items:center;flex:none}
.xc-ok path{stroke-dasharray:24;stroke-dashoffset:0}
.xc-ok__r{position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 1.5px var(--ink2);opacity:0}
.xc-stub span{color:var(--mute);font-weight:400}

.xc-cm{padding:17px 18px 0 60px}
.xc-cm .xc-top{display:flex;justify-content:space-between;align-items:baseline}
.xc-cm .xc-top .xc-d{font-size:13px;font-weight:500;color:var(--ink2)}
.xc-cm .xc-row{display:flex;align-items:center;gap:10px;margin-top:5px}
.xc-cm .xc-ava{width:40px;height:40px}
.xc-cm .xc-row>div{flex:1;min-width:0}
.xc-cm .xc-tt{font-size:22px;font-weight:600;letter-spacing:-.025em;line-height:1.12}
.xc-cm .xc-sb2{font-size:14px;color:var(--mute2);margin-top:4px;line-height:1.3;text-wrap:balance}
.xc-cmb.xc-peek,.xc-la.xc-peek{}

.xc-cb{padding:20px 22px 0}
.xc-cb .xc-st2{display:flex;align-items:baseline;gap:10px;margin:6px 0 16px}
.xc-cb .xc-big2{font-size:30px;font-weight:600;letter-spacing:-.03em;line-height:1}
.xc-cb .xc-st2 .xc-lbl{font-size:14px}
.xc-cal{display:grid;grid-template-columns:repeat(7,1fr);row-gap:4px;position:relative}
.xc-cal .xc-wd{font-size:11px;color:var(--mute);text-align:center;padding-bottom:2px}
.xc-cal .xc-c{position:relative;height:40px;display:grid;place-items:center;font-size:16px;font-weight:500;color:#c7c7cc;z-index:0}
.xc-cal .xc-c b{position:relative;z-index:2;font-weight:inherit}
.xc-cal .xc-bd1{position:absolute;inset:4px 0;background:var(--band);z-index:0}
.xc-cal .xc-rs .xc-bd1{border-radius:16px 0 0 16px;left:4px}.xc-cal .xc-re .xc-bd1{border-radius:0 16px 16px 0;right:4px}
.xc-cal .xc-off .xc-bd1{background:#efeff2}
.xc-cal .xc-off{color:#8e8e93}
.xc-cal .xc-now b::after{content:"";position:absolute;left:50%;top:50%;width:32px;height:32px;margin:-16px 0 0 -16px;border-radius:50%;box-shadow:inset 0 0 0 1.5px #c7c7cc}
.xc-cal .xc-now{color:var(--mute2)}
.xc-cal .xc-mo{color:#fff}
.xc-cal .xc-mo .xc-bd1{background:#111}
.xc-cal .xc-go b{font-weight:600}
.xc-cal .xc-go .xc-dot{position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:#fff;z-index:1}
.xc-cal .xc-go b{color:#111!important}
.xc-cal .xc-mk{min-height:20px;display:flex;justify-content:center;align-items:flex-start;font-size:11.5px;color:var(--mute);margin-top:-2px;white-space:nowrap}
.xc-cal .xc-mk img{width:16px;height:16px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1.5px #fff}
.xc-cal .xc-mk em{font-style:normal;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11.5px;font-weight:500;color:var(--ink2)}
.xc-cal .xc-tail .xc-bd1{right:-22px;border-radius:0;-webkit-mask-image:linear-gradient(90deg,#000 40%,transparent);mask-image:linear-gradient(90deg,#000 40%,transparent)}
.xc-lg{display:flex;gap:16px;margin-top:14px;align-items:center}
.xc-lg span{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--mute2)}
.xc-lg i{display:block;width:16px;height:8px;border-radius:4px}
.xc-lg .xc-l1 i{background:#efeff2}
.xc-lg .xc-l2 i{background:#111}
.xc-cb .xc-note{font-size:14px;color:var(--mute2);line-height:1.4;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.xc-cb .xc-note b{color:var(--ink2);font-weight:500}

.xc-lb__ph{position:relative;height:236px;overflow:hidden;background:#e4e3e6}
.xc-lb__ph>img{position:absolute;left:-8%;top:-4px;width:116%;height:560px;object-fit:cover;object-position:50% 0;transform-origin:40% 18%}
.xc-glass{position:absolute;left:14px;bottom:14px;z-index:2;display:flex;align-items:center;gap:8px;padding:6px 14px 6px 6px;border-radius:999px;
 background:rgba(255,255,255,.58);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.75),0 6px 16px -8px rgba(0,0,0,.25)}
.xc-glass img{width:28px;height:28px;border-radius:50%;object-fit:cover}
.xc-glass b{font-size:13px;font-weight:600;display:block;line-height:1.15}.xc-glass span{font-size:11.5px;color:#48484d;display:block;line-height:1.15}
.xc-lb__tx{padding:16px 20px 0}
.xc-lb .xc-when{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-size:16px;font-weight:600;letter-spacing:-.015em;white-space:nowrap}
.xc-lb .xc-when span{font-weight:500;color:var(--mute);font-size:15px}
.xc-lb .xc-zm{display:flex;align-items:center;gap:8px;font-size:14.5px;margin-top:9px;color:var(--mute2)}

.xc-face--ink{background:linear-gradient(160deg,#2b2b2e 0%,#151517 40%,#0c0c0d 100%);color:#fff;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 .5px rgba(255,255,255,.08),0 1px 2px rgba(0,0,0,.2),
  0 calc(14px + 18px*var(--lift)) calc(30px + 30px*var(--lift)) -12px rgba(0,0,0,.38),0 40px 70px -34px rgba(0,0,0,.45)}
.xc-face--ink .xc-sheen::after{background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.15),rgba(255,255,255,0))}
.xc-cp{padding:20px 22px 0}
.xc-cp .xc-lbl{color:rgba(255,255,255,.55)}
.xc-cp .xc-n1{display:flex;align-items:baseline;gap:10px;margin-top:8px}
.xc-cp .xc-nums b{display:block;font-weight:600;letter-spacing:-.045em;line-height:1;font-variation-settings:"wght" 600;height:1em}
.xc-cp .xc-n1 b{font-size:54px}
.xc-cp .xc-n1 .xc-lbl{font-size:15px}
.xc-cp .xc-n2{display:grid;grid-template-columns:1fr 1fr;margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.1)}
.xc-cp .xc-n2>div+div{border-left:1px solid rgba(255,255,255,.1);padding-left:16px}
.xc-cp .xc-n2 b{font-size:28px}
.xc-cp .xc-n2 .xc-lbl{display:block;margin-top:7px;line-height:1.3}
.xc-cp .xc-team{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.1)}
.xc-cp .xc-team .xc-ava{width:30px;height:30px;box-shadow:0 0 0 1px rgba(255,255,255,.15)}
.xc-cp .xc-tm{display:flex;align-items:center;gap:10px;font-size:14px}
.xc-cp .xc-tm div{display:flex;flex-direction:column;line-height:1.2}
.xc-cp .xc-tm span{color:rgba(255,255,255,.55);font-size:12.5px}
.pre-cv{position:fixed;inset:0;z-index:300;background:#f3f3f5;overflow:hidden}
.pre-cv .xc-ph{inset:auto;left:50%;top:0;width:390px;height:844px;transform-origin:50% 0;border-radius:0;overflow:visible}
.pre-cv .xc-key,.pre-cv .xc-amb{overflow:hidden}
/* в данных одно фото ведущей (host_photo_url, обычно аватар) — кадрируем его целиком, без «портретного» увеличения */
.pre-cv .xc-lb__ph>img{left:0;top:0;width:100%;height:100%;object-position:50% 28%}

/* ---- src/styles/43-recipes.css ---- */
/* «Тарелки», карточка тарелки, «Метод тарелки», конструктор: поправки поверх
 * сгенерированного 42-home-recipes.css. В прототипе варианты блоков включались
 * классами на body (rp-closed, rp-loading, rp-nofav) — у нас экран рисует
 * только нужный вариант, поэтому он виден всегда. */
.rp-fit--closed, .rp-fit--left { display: block; }
.rp-favrow--empty.hp-rc-show { display: flex; }
.rp-skel.hp-rc-show { display: grid; }
.rp-card, .rp-dish, .rp-cat, .rp-col, .rp-favrow[role="button"], .gd-own, .gd-mine__c, .bd-grp, .bd-find { cursor: pointer; }
.rp-card__fav { cursor: pointer; border: 0; }

/* обложка без фото: градиент приёма (с сервера) + эмодзи рецепта */
.hp-rc-em { position: absolute; inset: 0; display: grid; place-items: center; font-size: 46px; line-height: 1; pointer-events: none; }
.hp-rc-em--s { font-size: 40px; }
.hp-rc-em--xs { font-size: 17px; }
.rp-dish__ph { position: relative; }
.rp-fav i.hp-rc-fph { position: relative; display: block; width: 36px; height: 36px; border-radius: 50%; margin-left: -12px; box-shadow: 0 0 0 2px #fff; background-size: cover; background-position: center; overflow: hidden; }

/* поиск — настоящее поле */
.gd-rq input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: none; font: inherit; color: #101014; padding: 0; -webkit-appearance: none; appearance: none; }
.gd-rq input::placeholder { color: #8b8a92; }
.gd-rq input::-webkit-search-cancel-button { display: none; }
.gd-rq .gd-q__x { border: 0; cursor: pointer; }
.gd-rq:not(.has) .gd-q__x { display: none; }
.gd-sug span { cursor: pointer; }
.gd-rflt a { -webkit-tap-highlight-color: transparent; }
.hp-rc-err { margin-top: 12px; }
.hp-rc-err .gm-err { margin: 0; }
.hp-rc-wait { padding: 30px 4px; text-align: center; font-size: 14px; color: #8b8a92; }
.gd-own { margin-bottom: 24px; }

/* карточка тарелки */
.dh-hero.hp-dh-load { background: linear-gradient(150deg, #e9e8ee 0%, #dcdbe2 100%); }
.hp-dh-em { position: absolute; left: 0; right: 0; top: calc(var(--rf-safe-top) + 56px); z-index: 0; text-align: center; font-size: 120px; line-height: 1; opacity: .9; }
.hp-dh-fav.on { background: #fff; color: #1d020c; }
.hp-dh-fav svg { width: 18px; height: 18px; }
.hp-dh-amt { flex: 0 0 auto; max-width: 46%; text-align: right; font-size: 13.5px; font-weight: 600; color: #3f3e46; font-variant-numeric: tabular-nums; }
.dh-port .dh-step2 b { min-width: 34px; }
.gd-tm.hp-tm-done { background: var(--ok-bg, #eaf6d4); color: var(--ok, #5d7f1c); }
.gd-tm.hp-tm-done u { background: var(--ok, #5d7f1c); }

/* кнопка внизу — вне прокрутки, над нижним инсетом */
.hp-cta { bottom: calc(22px + var(--rf-safe-bottom)); }
.rf-pane[data-tab="build"] .dh-cta::before, .rf-pane[data-tab="dish"] .dh-cta::before { content: ""; position: absolute; inset: -28px -16px calc(-22px - var(--rf-safe-bottom)); z-index: -1; background: linear-gradient(rgba(255, 255, 255, 0), #f6f6f8 45%); pointer-events: none; }
.rf-pane[data-tab="build"] .rf-scr { padding-bottom: calc(120px + var(--rf-safe-bottom)); }
.dh-body { padding-bottom: calc(118px + var(--rf-safe-bottom)); }
.dh-cta__b.is-off { background: #e9e9ec; color: #a3a2aa; box-shadow: none; cursor: default; }
.dh-cta__b .rf-btn-spin { margin-bottom: -3px; margin-right: 8px; }

/* «Метод тарелки»: герой во весь экран — позиции от настоящего верхнего инсета */
.pm-hero { height: calc(394px + var(--rf-safe-top)); }
.pm-kick { top: calc(var(--rf-safe-top) + 52px); }
.pm-plate2 { top: calc(var(--rf-safe-top) + 74px); }
.pm-hint { top: calc(var(--rf-safe-top) + 304px); }
.pm-seg { top: calc(var(--rf-safe-top) + 330px); }
.pm-w, .pm-fat, .pm-seg button, .pm-hand { -webkit-tap-highlight-color: transparent; }
.hp-pm-body { padding-bottom: calc(28px + var(--rf-safe-bottom)); }

/* конструктор */
.gd-mine__c .hp-bd-mini { width: 44px; height: 44px; border-radius: 50%; }
.hp-bdph { margin: 12px 0 0; }
.hp-bdph .hp-bdph__img { background-color: #f1f1f3; }
.hp-bd-pre { margin-top: 14px; }
.xs-sheet.hp-bd .xs-sheet__h { display: none; }
.xs-sheet.hp-bd .xs-sheet__b { padding-top: 6px; }
.xs-sheet.hp-bd .bd-sh__list { max-height: min(360px, 46vh); }
.bd-sh__add { flex: 0 0 auto; }
.hp-bd-more { cursor: pointer; color: #101014; font-weight: 600; }
.hp-bd-retry { margin-top: 10px; height: 34px; padding: 0 14px; border: 0; border-radius: 100px; background: #fff; font: inherit; font-weight: 600; font-size: 13px; cursor: pointer; }
.hp-est { color: #a3a2aa; font-weight: 500; }
.bd-bal:disabled { opacity: .8; }
.bd-bal .rf-btn-spin { width: 13px; height: 13px; }
/* полосы «съедено / тарелка / сверх» — ширина всегда (в прототипе включалась .is-in) */
.dh-day i { width: var(--w); }
/* закреплённая шапка: длинное название тарелки — в одну строку с многоточием */
.pl4-bar b { max-width: calc(100% - 128px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dh-chips { flex-wrap: wrap; row-gap: 8px; }

/* ---- src/styles/44-plan-ws6.css ---- */
/* WS-6 «Мой план» и «Тарелки»: состояния, которых не было в перенесённых
 * экранах. Правила прототипа nav-v2 (build_visual.py: .dh-ing.off/.new,
 * .dh-ing__back, .dh-reset, .dh-add, .pn-* (лист «+ ещё»), .nv-tgb, .nv-art,
 * строки 230–248, 1286–1301, 1365–1379) — как есть, со своими корнями; своё
 * (hp-*, mt-*) — ниже. Розовый — только для выбора (правило владельца):
 * выбранные чипы тёмные, пометки «новый/было» — нейтральные. */

/* ---------- состав рецепта ---------- */
.dh-ing.off .dh-ing__b span { color: #a3a2aa; text-decoration: line-through; }
.dh-ing.new .dh-ing__b span::after { content: "добавлено"; margin-left: 8px; font-size: 10.5px; font-weight: 600; color: #3a3a3c; background: #f1f1f3; border-radius: 100px; padding: 2px 7px; vertical-align: 1px; }
.dh-ing__back { height: 32px; padding: 0 12px; border: 0; border-radius: 100px; background: #f6f6f8; font-family: inherit; font-size: 12.5px; font-weight: 600; color: #5f5e66; cursor: pointer; white-space: nowrap; }
.dh-reset { color: #111; font-weight: 600; cursor: pointer; }
.dh-ing .dh-step2--s { flex: 0 0 auto; }
.dh-add__b:active { transform: scale(0.98); }

/* ---------- «Что есть дома?» ---------- */
.rp-home__clr { width: max-content; margin-left: auto; }
.pn-search { margin-top: 4px; height: 44px; box-shadow: inset 0 0 0 1px rgba(12, 14, 18, .06); }
.pn-list { max-height: 330px; overflow-y: auto; margin-top: 10px; border-radius: 18px; background: #f6f6f8; scrollbar-width: none; }
.pn-list::-webkit-scrollbar { display: none; }
.pn-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; font-size: 15px; cursor: pointer; }
.pn-row + .pn-row { border-top: 1px solid rgba(12, 14, 18, .06); }
.pn-row small { color: #a3a2aa; font-size: 12.5px; margin-left: 6px; }
.pn-row i { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 7px; box-shadow: inset 0 0 0 1.5px #d6d5db; position: relative; background: #fff; }
.pn-row.on i { background: #101014; box-shadow: none; }
.pn-row.on i::after { content: ""; position: absolute; left: 8px; top: 4px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
/* «Другие продукты из тарелок» — подзаголовок списка после групп */
.pn-hd { padding: 14px 14px 6px; font-size: 12.5px; font-weight: 600; color: #8b8a92; }
.pn-row + .pn-hd { border-top: 1px solid rgba(12, 14, 18, .06); }

/* ---------- экран «Из того, что дома» (макет «Что есть дома?», ок владельца 09.10) ----------
 * Серый фон страницы — токен экрана (xs-scr); белые плашки без тени и контура (владелец 03.10),
 * выбранные чипы тёмные с галочкой, «всё есть» — var(--ok), как в «Тарелках». Поле — 16 px (iOS). */
.pnh { padding: 6px 16px 28px; }
.pnh-t { margin: 0; font-size: 27px; line-height: 1.12; letter-spacing: -.7px; font-weight: 700; color: var(--ink); text-wrap: balance; }
.pnh-l { margin: 6px 0 0; font-size: 15px; line-height: 1.4; color: #77767d; }
.pnh-q { display: flex; align-items: center; gap: 9px; height: 48px; margin-top: 16px; padding: 0 14px; border-radius: 14px; background: #fff; cursor: text; }
.pnh-q:focus-within { box-shadow: inset 0 0 0 1.5px rgba(16, 16, 20, .14); }
.pnh-q > svg { flex: 0 0 auto; width: 18px; height: 18px; color: #9a99a0; }
.pnh-q__in { flex: 1 1 auto; min-width: 0; height: 100%; border: 0; outline: 0; padding: 0; background: none; font: inherit; font-size: 16px; color: var(--ink); text-overflow: ellipsis; -webkit-appearance: none; appearance: none; }
.pnh-q__in::placeholder { color: #9a99a0; }
.pnh-q__in::-webkit-search-cancel-button { display: none; }
.pnh-q__x { flex: 0 0 auto; display: none; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: #e4e3e8; color: #6e6d75; cursor: pointer; }
.pnh-q.has .pnh-q__x { display: grid; }
.pnh-q__x svg { width: 11px; height: 11px; }
.pnh-sug, .pnh-nores { margin-top: 8px; border-radius: 16px; background: #fff; }
.pnh-sug { overflow: hidden; }
.pnh-sug__r { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; height: 48px; padding: 0 14px; border: 0; background: none; font: inherit; font-size: 15px; color: var(--ink); text-align: left; cursor: pointer; }
.pnh-sug__r + .pnh-sug__r { border-top: .5px solid rgba(16, 16, 20, .08); }
.pnh-sug__r:active { background: #f6f6f8; }
.pnh-sug__r span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pnh-sug__r small { flex: 0 0 auto; font-size: 12.5px; color: var(--mut); }
.pnh-sug__r.on small { color: var(--ink); font-weight: 600; }
.pnh-sug__more { padding: 11px 14px 12px; border-top: .5px solid rgba(16, 16, 20, .08); font-size: 12.5px; color: var(--mut); }
.pnh-nores { padding: 14px 16px; font-size: 14px; line-height: 1.4; color: var(--ink); }
.pnh-nores span { display: block; margin-top: 2px; font-size: 13px; color: var(--mut); }
.pnh-lbl { display: flex; align-items: center; justify-content: space-between; min-height: 18px; margin: 20px 2px 10px; font-size: 13px; font-weight: 600; color: var(--mut); }
.pnh-clr { border: 0; padding: 0 0 0 12px; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer; }
.pnh-clr[hidden] { display: none; }
.pnh-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pnh-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; height: 38px; padding: 0 14px; border: 0; border-radius: 100px; background: #fff; color: var(--ink); font: inherit; font-size: 14.5px; font-weight: 500; white-space: nowrap; cursor: pointer; transition: background-color .2s, color .2s, transform .15s; }
.pnh-chip span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pnh-chip:active { transform: scale(.97); }
.pnh-chip.on { background: #101014; color: #fff; }
.pnh-chip.on::before { content: ""; flex: 0 0 auto; width: 12px; height: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.2l2.6 2.6L10 3.4' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.pnh-chip--more { background: transparent; box-shadow: inset 0 0 0 1px rgba(16, 16, 20, .14); color: #55545b; }
.pnh-chip--sk { display: inline-block; padding: 0; cursor: default; background: linear-gradient(90deg, #e9e8ec 25%, #f6f5f8 50%, #e9e8ec 75%) 0 0 / 200% 100%; animation: skel 1.4s linear infinite; }
.pnh-chips > .hp-rc-err { flex: 1 1 100%; margin-top: 0; }
.pnh-stp { display: flex; align-items: flex-start; gap: 8px; margin: 14px 2px 0; font-size: 12.5px; line-height: 1.4; color: var(--mut); }
.pnh-stp > svg { flex: 0 0 auto; width: 14px; height: 14px; margin-top: 1px; color: #a3a2a8; }
.pnh-res { margin-top: 22px; }
.pnh-res > .hp-rc-err { margin-top: 0; }
.pnh-res.is-busy .pnh-list, .pnh-res.is-busy .pnh-empty { opacity: .45; pointer-events: none; transition: opacity .2s; }
.pnh-resh { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; margin: 0 2px 10px; }
.pnh-resh b { min-width: 0; font-size: 20px; font-weight: 700; letter-spacing: -.4px; color: var(--ink); }
.pnh-resh span { flex: 0 0 auto; font-size: 13px; color: var(--mut); }
.pnh-card { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 10px; border-radius: 18px; background: #fff; cursor: pointer; animation: pnhIn .35s cubic-bezier(.32, .72, 0, 1) backwards; animation-delay: calc(var(--i, 0) * 40ms); }
.pnh-card + .pnh-card { margin-top: 8px; }
.pnh-card:active { transform: scale(.985); }
.pnh-card__ph { position: relative; display: block; flex: 0 0 auto; width: 58px; height: 58px; border-radius: 13px; overflow: hidden; object-fit: cover; background: #f1f1f3 center / cover no-repeat; }
.pnh-card__ph .hp-rc-em { font-size: 26px; }
.pnh-card__b { flex: 1 1 auto; min-width: 0; }
.pnh-card__b b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 15px; font-weight: 600; letter-spacing: -.2px; line-height: 1.25; color: var(--ink); }
.pnh-card__b small { display: block; margin-top: 3px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12.5px; color: var(--mut); }
.pnh-card__b small.ok { color: var(--ok); font-weight: 500; }
.pnh-card__kc { flex: 0 0 auto; font-size: 13px; color: var(--mut); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pnh-empty { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: 18px; background: #fff; }
.pnh-empty__ill { flex: 0 0 auto; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; background: #f3f3f5; color: var(--ink); }
.pnh-empty__ill svg { width: 26px; height: 26px; }
.pnh-empty b { display: block; font-size: 15px; font-weight: 600; color: var(--mut); }   /* заглушка — серым, как в макете */
.pnh-empty b + span { display: block; margin-top: 1px; font-size: 13px; line-height: 1.35; color: var(--mut); }
.pnh-sk { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 10px; border-radius: 18px; background: #fff; }
.pnh-sk + .pnh-sk { margin-top: 8px; }
.pnh-sk > span { flex: 1 1 auto; }
.pnh-sk i, .pnh-sk b, .pnh-sk s { display: block; border-radius: 8px; background: linear-gradient(90deg, #efeef2 25%, #f8f7fa 50%, #efeef2 75%) 0 0 / 200% 100%; animation: skel 1.4s linear infinite; }
.pnh-sk i { flex: 0 0 auto; width: 58px; height: 58px; border-radius: 13px; }
.pnh-sk b { width: 70%; height: 14px; }
.pnh-sk s { width: 40%; height: 11px; margin-top: 8px; }
@media (max-width: 359px) { .pnh-resh b { font-size: 18px; } }
@keyframes pnhIn { from { opacity: 0; transform: translateY(6px); } }

/* ---------- «Мой план»: материалы и перемены ---------- */
.pl4-cov--pr em { left: auto; right: 10px; }   /* не поверх полосок «слайдов» */
.hp-shl { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.hp-shl small { font-size: 12.5px; font-weight: 500; letter-spacing: 0; color: #8b8a92; white-space: nowrap; }
.hp-chg { cursor: pointer; }
.hp-chg + .hp-chg { margin-top: 0; }
.hp-chg--q .ct__q { flex: 1 1 auto; min-width: 0; }
.hp-chgl { display: flex; flex-direction: column; gap: 10px; }
.hp-chgl__i { background: #f6f6f8; border-radius: 16px; padding: 12px 14px; font-size: 14px; line-height: 1.45; color: #2a2830; }
.hp-chgl__d { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #8b8a92; }
.hp-chgl__i ul { margin: 6px 0 0; padding-left: 18px; }
.hp-chgl__i li { margin: 2px 0; }
.hp-chgl__i p { margin: 8px 0 0; }
.hp-chgl__i p b { font-weight: 600; }

/* ---------- читалка материала (атлас home-plan-material) ---------- */
.rf-scr.mt-scr { background: #fff; }
.mt-scr .nv-tgb { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 10px; padding: calc(var(--rf-top-inset, 0px) + 6px) 14px 10px; border-bottom: 1px solid rgba(12, 14, 18, .08); background: #fff; }
.nv-tgb__x { border: 0; background: transparent; font-family: inherit; font-size: 15px; color: #2a7fd4; padding: 6px 2px; cursor: pointer; }
.nv-tgb__u { flex: 1 1 auto; min-width: 0; text-align: center; }
.nv-tgb__u b { display: block; font-size: 14px; font-weight: 600; letter-spacing: -.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nv-tgb__u small { display: block; font-size: 11.5px; color: #8b8a92; }
.nv-tgb__m { border: 0; background: transparent; font-family: inherit; font-size: 18px; color: #2a7fd4; padding: 0 4px; letter-spacing: 1px; cursor: pointer; }
.nv-art { background: #fff; padding: 20px 22px 30px; line-height: 1.55; font-size: 15px; }
.nv-art__k { font-size: 11px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: #a3a2aa; }
.nv-art h1 { font-size: 26px; font-weight: 600; letter-spacing: -.8px; line-height: 1.15; margin: 8px 0 16px; }
.nv-art__box { background: #f6f6f8; border-radius: 16px; padding: 14px 16px; margin-top: 16px; font-size: 14px; line-height: 1.45; }
.nv-art__box b { display: block; font-weight: 600; margin-bottom: 4px; }
.mt-pdf { display: flex; flex-direction: column; gap: 10px; margin: 0 -8px; }
.mt-page { position: relative; background: #f6f6f8; border-radius: 10px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(12, 14, 18, .06); }
.mt-page canvas { display: block; }
.mt-wait { display: flex; align-items: center; gap: 10px; padding: 26px 16px; border-radius: 14px; background: #f6f6f8; color: #8b8a92; font-size: 14px; }
.mt-img, .mt-media { display: block; width: 100%; border-radius: 16px; background: #f6f6f8; }
.mt-audio { display: block; width: 100%; margin-top: 4px; }
.mt-fail { padding: 18px 16px; border-radius: 16px; background: #f6f6f8; }
.mt-fail b { display: block; font-size: 15px; font-weight: 600; }
.mt-fail p { margin: 4px 0 12px; font-size: 13.5px; color: #5f5e66; }
.mt-fail .btn { width: 100%; }

/* ---- src/styles/45-access.css ---- */
/* Поправки поверх 40-access.css (сгенерирован, руками не правим).
 * Прототип рисует слой в «телефоне» со своим статус-баром 54 px — в
 * продукте окно = экран Telegram/браузера: отступы — от настоящих инсетов. */

/* логотип прода (RF.I.brand): 22 px в шапке, 34 px на заставке */
.gxa-logo { display: flex; align-items: center; justify-content: center; line-height: 0; font-size: 0; color: #2a2a2a; }
.gxa-logo svg { display: block; height: 22px; width: auto; flex: 0 0 auto; }
.gxa-word.gxa-logo svg { height: 34px; }

.gxa-scr { padding-top: max(28px, calc(var(--rf-safe-top) + 14px)); padding-bottom: max(28px, calc(var(--rf-safe-bottom) + 18px)); }
.gxa-scr.gxa-inst { padding-top: max(20px, calc(var(--rf-safe-top) + 8px)); }
.rf-app.gxa-on .rf-topfade { display: none; }

/* Экран загрузки из шаблона (до бандла) = заставка слоя: без «прыжка» на старте */
#rf-loading { gap: 0; background: var(--rf-page); }
#rf-loading .rf-logo { width: 177px; height: 34px; margin: 0; }
#rf-loading .rf-spin { position: relative; overflow: hidden; width: 132px; height: 4px; border: 0; border-radius: 100px; background: #e1e1e6; margin-top: 26px; animation: none; }
#rf-loading .rf-spin::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 42%; border-radius: 100px; background: #111; animation: gxaBar 1.1s ease-in-out infinite alternate; }
#rf-loading p { margin-top: 18px; font-size: 14px; }

/* код из письма: настоящее поле поверх шести ячеек (автоподстановка one-time-code iOS/Android) */
.gxa-code { position: relative; cursor: text; }
.gxa-code__in {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; outline: 0;
  background: transparent; color: transparent; caret-color: transparent; font-size: 16px; letter-spacing: 0;
  opacity: .01; -webkit-appearance: none; appearance: none;
}
.gxa-help b, .gxa-alt b, .gxa-link, .gxa-resend b[data-ga] { -webkit-tap-highlight-color: transparent; }
.gxa-resend b[data-ga] { cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
a.gxa-sec { text-decoration: none; }

/* лист 428, баннер установки и «Нет сети» — над настоящими инсетами и таб-баром */
.gxa-gs { bottom: max(8px, calc(var(--rf-safe-bottom) - 18px)); max-height: calc(100% - var(--rf-safe-top) - 24px); overflow-y: auto; padding-bottom: max(22px, calc(var(--rf-safe-bottom) - 4px)); }
.gxa-ban { bottom: calc(96px + var(--rf-safe-bottom)); }
.rf-app.rf-full .gxa-ban { bottom: calc(24px + var(--rf-safe-bottom)); }
.gxa-off { top: calc(var(--rf-safe-top) + 58px); }
.gxa-off { z-index: 41; }

/* Предпросмотр коуча: метка «Предпросмотр · не сохраняется» — в своей полосе
   над приложением (вместо «островка» телефона-макета), экраны сдвигаются под неё. */
.preview-banner { display: none !important; }
.rf-app.gxa-pvon { --rf-safe-top: calc(max(var(--rf-top-inset), env(safe-area-inset-top, 0px)) + 34px); }
.gxa-pv { top: calc(max(var(--rf-top-inset), env(safe-area-inset-top, 0px)) + 5px); }
.gxa-tip { top: calc(var(--rf-safe-top) + 6px); }
/* «Демо · не сохранено» (всплывашка preview.js) — в языке метки предпросмотра */
#rf-demo-notice {
  top: calc(max(var(--rf-top-inset), env(safe-area-inset-top, 0px)) + 42px) !important; border-radius: 22px !important;
  padding: 13px 16px !important; background: rgba(28, 28, 30, .94) !important; font: 600 14px/1.35 inherit !important;
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 16px 36px rgba(0, 0, 0, .2) !important;
}

/* Баннер установки — только над корнем вкладки. Пока открыт вложенный экран
   (.is-held, access.js) или слой другой области (замок/долг/срез/опрос — .gl,
   чат, сторис этапа до старта, листы дневника «<вид>-open», плеер тренировки),
   баннер не перекрывает его кнопки: прячется и возвращается, когда слой закрыт. */
.gxa-ban.on.is-held,
.rf-app.gl-on .gxa-ban.on,
.rf-app.in-chat .gxa-ban.on,
.rf-app.stx-on .gxa-ban.on,
.rf-app[class*="-open"] .gxa-ban.on,
.rf-app:has(> .gt-l.on) .gxa-ban.on { opacity: 0; pointer-events: none; transform: translateY(16px); }

/* ---- src/styles/45-life.css ---- */
/* Поправки поверх 40-life.css (сгенерирован, руками не правим): инсеты
 * вместо статус-бара макета (54 px) и то, чего в прототипе не было. */
.gl-in { padding-top: calc(var(--rf-safe-top) + 8px); }
.gl-nav { margin-top: calc(-1 * (var(--rf-safe-top) + 8px)); padding-top: calc(var(--rf-safe-top) + 14px); }
.gl-sbg { height: calc(var(--rf-safe-top) + 8px); margin-top: calc(-1 * (var(--rf-safe-top) + 8px)); }
.gl-foot { padding-bottom: max(24px, calc(var(--rf-safe-bottom) + 12px)); }
.rf-app.gl-on .rf-topfade { display: none; }
.rf-app.gl-on .dock { opacity: 0 !important; pointer-events: none !important; }
.rf-app.gl-on .rf-toast { bottom: calc(150px + var(--rf-safe-bottom)); }

/* тариф «для справки» (рублёвые тарифы: срок выбирается на странице продления) */
.gl-tr--info { padding-left: 16px; cursor: default; }
.gl-tr--info .gl-tr__rd { display: none; }
.gl-legal a { cursor: pointer; }
.gl-hb .gl-hb__go { white-space: nowrap; }

/* ---- src/styles/45-meet-hold.css ---- */
/* «Встречи» / «График встреч»: постоянное время держится не все недели (meetings.weekly_hold).
 * 1:1 с прототипом атласа (nav-v2/src/more_gap_meetweekly.js, состояния wk-hub / wk-plan)
 * и макетом design-preview/weekly-slot-conflict (29.09.2026). */
.gw { padding: 16px 16px 14px; }
.gw__k { display: flex; gap: 12px; align-items: flex-start; }
.gw__ic { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 12px; background: #f2f2f4; color: #111; display: grid; place-items: center; }
.gw__ic svg { width: 19px; height: 19px; }
.gw__k b { display: block; font-size: 16px; font-weight: 600; letter-spacing: -.3px; line-height: 1.25; color: #111; }
.gw__k small { display: block; margin-top: 4px; font-size: 14px; line-height: 1.45; color: #6e6e73; }
.gw__bar { display: flex; gap: 3px; margin-top: 16px; }
.gw__bar i { flex: 1 1 0; height: 8px; border-radius: 3px; background: #111; }
.gw__bar i.m { background: repeating-linear-gradient(135deg, #e5e5ea 0 3px, #f2f2f4 3px 6px); }
.gw__cap { display: flex; justify-content: space-between; margin-top: 7px; font-size: 12.5px; color: #8e8e93; font-variant-numeric: tabular-nums; }
.gw__cap b { color: #111; font-weight: 600; }
.gw .btn { margin-top: 14px; height: 52px; font-size: 15.5px; }
.gw__l { display: block; width: 100%; margin-top: 6px; height: 44px; border: 0; background: none; font-family: inherit; font-size: 15px; font-weight: 600; color: #111; cursor: pointer; }
.gw__none { margin-top: 12px; font-size: 14px; line-height: 1.45; color: #6e6e73; }

/* ---- src/styles/45-online.css ---- */
/* СГЕНЕРИРОВАНО design-preview/miniapp-v3-dev/tools/extract_css.js из прототипа nav-v2
   (состояния: online.js). Правила взяты в порядке каскада прототипа; не правьте
   руками — поправка поверх живёт в файлах стилей с бОльшим номером. */
.xs-row .xs-v s{ display: block; font-size: 12px; color: rgb(174, 174, 178); text-align: right; }
.rf-scr.xs-scr--hero{ padding: 0px; background: rgb(247, 242, 245); }
.ot-hero{ position: relative; height: 372px; overflow: hidden; color: rgb(255, 255, 255); }
.ot-hero img{ position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.ot-hero__sh{ position: absolute; inset: 0px; background: linear-gradient(rgba(20, 6, 14, 0.35) 0%, rgba(20, 6, 14, 0) 26%, rgba(20, 6, 14, 0) 42%, rgba(20, 6, 14, 0.72) 100%); }
.ot-back{ position: absolute; left: 16px; top: 58px; width: 44px; height: 44px; border-radius: 50%; border: 0px; display: grid; place-items: center; color: rgb(255, 255, 255); background: rgba(255, 255, 255, 0.18); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: rgba(255, 255, 255, 0.25) 0px 0px 0px 1px inset; cursor: pointer; }
.ot-back svg{ width: 20px; height: 20px; }
.ot-chip{ position: absolute; right: 16px; top: 66px; display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; padding: 7px 12px; border-radius: 100px; background: rgba(255, 255, 255, 0.18); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: rgba(255, 255, 255, 0.25) 0px 0px 0px 1px inset; }
.ot-chip i{ width: 7px; height: 7px; border-radius: 50%; background: rgb(255, 255, 255); box-shadow: rgba(255, 255, 255, 0.18) 0px 0px 0px 3px; }
.ot-hero__b{ position: absolute; left: 20px; right: 20px; bottom: 44px; }
.ot-hero__b small{ display: block; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.8); margin-bottom: 6px; }
.ot-hero__b b{ display: block; font-size: 31px; font-weight: 700; letter-spacing: -1px; line-height: 1.08; text-wrap: balance; }
.ot-hero__b span{ display: block; font-size: 14.5px; line-height: 1.45; color: rgba(255, 255, 255, 0.82); margin-top: 8px; max-width: 330px; }
.ot-sheet{ position: relative; margin-top: -26px; border-radius: 30px 30px 0px 0px; background: rgb(247, 242, 245); padding: 10px 16px 0px; }
.ot-grab{ display: block; width: 38px; height: 5px; border-radius: 100px; background: rgba(0, 0, 0, 0.14); margin: 0px auto 14px; }
.ot-card{ background: rgb(255, 255, 255); border-radius: 26px; padding: 18px; margin-top: 12px; box-shadow: rgba(60, 10, 40, 0.05) 0px 10px 30px; }
.ot-sec{ font-size: 19px; font-weight: 600; letter-spacing: -0.45px; color: rgb(17, 17, 17); margin: 30px 4px 2px; }
.ot-sec--row{ display: flex; justify-content: space-between; align-items: baseline; }
.ot-sec--row em{ font-style: normal; font-size: 13px; font-weight: 500; color: rgb(142, 142, 147); }
.ot-bk__who{ display: flex; align-items: center; gap: 9px; margin-top: 10px; font-size: 13.5px; color: rgba(255, 255, 255, 0.75); }
.ot-bk__who img{ width: 28px; height: 28px; border-radius: 50%; object-fit: cover; box-shadow: rgba(255, 255, 255, 0.25) 0px 0px 0px 2px; }
.ot-pk__h{ display: flex; justify-content: space-between; align-items: baseline; }
.ot-pk__h b{ font-size: 17px; font-weight: 600; letter-spacing: -0.35px; color: rgb(17, 17, 17); }
.ot-pk__h span{ font-size: 15px; color: rgb(142, 142, 147); }
.ot-pk__h em{ font-style: normal; font-size: 30px; font-weight: 700; letter-spacing: -1px; color: rgb(17, 17, 17); margin-right: 3px; }
.ot-leg{ display: flex; gap: 14px; flex-wrap: wrap; margin-top: 12px; font-size: 12.5px; color: rgb(110, 110, 115); }
.ot-leg i{ display: inline-block; width: 8px; height: 8px; border-radius: 3px; margin-right: 6px; }
.ot-leg i.f{ background: rgb(35, 35, 38); }
.ot-leg i.c{ box-shadow: rgb(29, 2, 12) 0px 0px 0px 1.5px inset; }
.ot-leg i.d{ background: rgb(226, 217, 223); }
.ot-dur{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.ot-dur div{ padding: 12px 14px; border-radius: 16px; background: rgb(247, 242, 245); }
.ot-dur small{ display: block; font-size: 12px; color: rgb(142, 142, 147); }
.ot-dur b{ display: block; font-size: 22px; font-weight: 700; letter-spacing: -0.5px; color: rgb(17, 17, 17); margin-top: 3px; }
.ot-exp{ margin-top: 14px; }
.ot-exp__bar{ height: 4px; border-radius: 100px; background: rgb(239, 233, 237); overflow: hidden; }
.ot-exp__bar i{ display: block; height: 100%; background: rgb(29, 2, 12); border-radius: inherit; }
.ot-exp p,.ot-p{ margin: 10px 0px 0px; font-size: 13.5px; line-height: 1.45; color: rgb(110, 110, 115); }
.ot-exp b,.ot-p b{ color: rgb(17, 17, 17); font-weight: 600; }
.ot-btn{ display: block; width: 100%; height: 52px; margin-top: 16px; border: 0px; border-radius: 100px; background: rgb(31, 10, 23); color: rgb(255, 255, 255); font-family: inherit; font-size: 16px; font-weight: 600; letter-spacing: -0.2px; cursor: pointer; box-shadow: rgba(40, 8, 30, 0.22) 0px 12px 24px; }
.ot-note{ margin: 9px 0px 0px; font-size: 12.5px; color: rgb(142, 142, 147); text-align: center; }
.ot-link{ display: block; margin: 12px auto 0px; border: 0px; background: none; font-family: inherit; font-size: 14.5px; font-weight: 600; color: rgb(17, 17, 17); cursor: pointer; }
.ot-mini{ border: 0px; background: rgb(241, 241, 243); color: rgb(17, 17, 17); font-family: inherit; font-size: 13px; font-weight: 600; border-radius: 100px; padding: 7px 12px; cursor: pointer; }
.ot-sch__h{ display: flex; justify-content: space-between; align-items: center; }
.ot-sch__h b{ font-size: 17px; font-weight: 600; letter-spacing: -0.35px; color: rgb(17, 17, 17); }
.ot-week{ display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-top: 14px; }
.ot-week div{ border-radius: 14px; padding: 8px 0px 7px; text-align: center; background: rgb(247, 242, 245); }
.ot-week span{ display: block; font-size: 11.5px; color: rgb(142, 142, 147); }
.ot-week b{ display: block; height: 15px; font-size: 11.5px; font-weight: 700; color: rgb(17, 17, 17); margin-top: 2px; }
.ot-week div.on{ background: rgb(31, 10, 23); }
.ot-week div.on span{ color: rgba(255, 255, 255, 0.6); }
.ot-week div.on b{ color: rgb(255, 255, 255); }
.ot-sch.is-paused .ot-week div.on{ background: rgb(199, 191, 196); }
.ot-mc{ margin-top: 14px; padding: 12px; border-radius: 18px; background: rgb(247, 242, 245); }
.ot-mc__h,.ot-mc__w{ display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; }
.ot-mc__h span{ font-size: 10.5px; color: rgb(174, 174, 178); padding-bottom: 4px; }
.ot-mc__w i{ font-style: normal; font-size: 12px; color: rgb(110, 110, 115); height: 26px; line-height: 26px; position: relative; font-variant-numeric: tabular-nums; }
.ot-mc__w i.b::after{ content: ""; position: absolute; left: 50%; bottom: 1px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: rgb(29, 2, 12); }
.ot-mc__w i.n{ color: rgb(255, 255, 255); font-weight: 700; }
.ot-mc__w i.n::before{ content: ""; position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0px 0px -13px; border-radius: 50%; background: rgb(31, 10, 23); z-index: -1; }
.ot-mc__w i.n{ z-index: 0; }
.ot-rt small{ font-size: 12.5px; color: rgb(142, 142, 147); }
.ot-rt > b{ display: block; font-size: 17px; font-weight: 600; color: rgb(17, 17, 17); margin-top: 2px; }
.ot-n5{ display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 14px; }
.ot-n5 button{ height: 50px; border-radius: 16px; border: 0px; background: rgb(247, 242, 245); font-family: inherit; font-size: 19px; font-weight: 600; color: rgb(17, 17, 17); cursor: pointer; }
.ot-n5 button:active{ background: rgb(31, 10, 23); color: rgb(255, 255, 255); }
.ot-tr{ display: flex; gap: 14px; align-items: stretch; padding: 12px; cursor: pointer; }
.ot-tr img{ width: 104px; height: 136px; border-radius: 18px; object-fit: cover; flex: 0 0 auto; }
.ot-tr b{ display: block; font-size: 20px; font-weight: 700; letter-spacing: -0.5px; color: rgb(17, 17, 17); margin-top: 8px; }
.ot-tr p{ margin: 5px 0px 0px; font-size: 13.5px; line-height: 1.4; color: rgb(110, 110, 115); }
.ot-how > b{ display: block; font-size: 17px; font-weight: 600; color: rgb(17, 17, 17); margin-bottom: 6px; }
.ot-how__r{ display: flex; gap: 12px; align-items: flex-start; padding: 9px 0px; }
.ot-how__r > span{ width: 34px; height: 34px; border-radius: 11px; background: rgb(241, 241, 243); color: rgb(58, 58, 60); display: grid; place-items: center; flex: 0 0 auto; }
.ot-how__r > span svg{ width: 17px; height: 17px; }
.ot-how__r b{ display: block; font-size: 15px; font-weight: 500; color: rgb(17, 17, 17); }
.ot-how__r small{ display: block; font-size: 13px; color: rgb(142, 142, 147); margin-top: 2px; }
.ot-num{ font-size: 14px; font-weight: 700; }
.ot-two{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.ot-seg{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 3px; margin-top: 10px; border-radius: 100px; background: rgb(242, 236, 240); }
.ot-seg button{ height: 36px; border: 0px; border-radius: 100px; background: none; font-family: inherit; font-size: 14px; font-weight: 500; color: rgb(58, 58, 60); cursor: pointer; }
.ot-seg button.on{ background: rgb(255, 255, 255); color: rgb(17, 17, 17); font-weight: 600; box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 8px; }
.ot-list{ padding: 4px 18px; }
.ot-li{ display: flex; align-items: center; gap: 12px; padding: 13px 0px; cursor: pointer; }
.ot-li + .ot-li{ border-top: 1px solid rgb(240, 234, 238); }
.ot-li div{ flex: 1 1 auto; min-width: 0px; }
.ot-li b{ display: block; font-size: 15.5px; font-weight: 500; color: rgb(17, 17, 17); }
.ot-li small{ display: block; font-size: 12.5px; color: rgb(142, 142, 147); margin-top: 2px; }
.ot-li > span{ flex: 0 0 auto; text-align: right; font-size: 16px; font-weight: 700; color: rgb(17, 17, 17); }
.ot-again b{ font-size: 17px; font-weight: 600; color: rgb(17, 17, 17); }
.ot-again p{ margin: 6px 0px 0px; font-size: 14px; color: rgb(110, 110, 115); }
.ot-bar.on{ transform: none; }
.ot-bar__s b em{ font-style: normal; font-size: 21px; font-weight: 700; letter-spacing: -0.5px; }
.ot-bar__btn[disabled]{ background: rgb(216, 209, 213); box-shadow: none; cursor: default; }
.ot-slp__sub{ font-size: 13.5px; color: rgb(142, 142, 147); text-align: center; margin: -2px 0px 12px; }
.ot-tz{ display: flex; align-items: center; gap: 9px; padding: 11px 14px; border-radius: 16px; background: rgb(255, 255, 255); font-size: 13px; color: rgb(58, 58, 60); }
.ot-tz svg{ width: 16px; height: 16px; flex: 0 0 auto; color: rgb(142, 142, 147); }
.ot-tz b{ color: rgb(17, 17, 17); }
.ot-days{ display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 14px -16px 0px; padding: 4px 16px; }
.ot-days::-webkit-scrollbar{ display: none; }
.ot-days button{ flex: 0 0 58px; height: 76px; border: 0px; border-radius: 18px; background: rgb(255, 255, 255); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; font-family: inherit; cursor: pointer; }
.ot-days span{ font-size: 12px; color: rgb(142, 142, 147); }
.ot-days b{ font-size: 21px; font-weight: 700; color: rgb(17, 17, 17); letter-spacing: -0.5px; }
.ot-days i{ font-style: normal; font-size: 12px; letter-spacing: 1px; color: rgb(29, 2, 12); height: 12px; line-height: 12px; }
.ot-days button.on{ background: rgb(31, 10, 23); box-shadow: rgba(40, 8, 30, 0.25) 0px 10px 22px; }
.ot-days button.on span{ color: rgba(255, 255, 255, 0.6); }
.ot-days button.on b{ color: rgb(255, 255, 255); }
.ot-days button.on i{ color: rgba(255, 255, 255, 0.7); }
.ot-days button.is-off{ opacity: 0.45; cursor: default; }
.ot-g{ margin-top: 22px; }
.ot-g > span{ display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: rgb(142, 142, 147); margin-left: 4px; }
.ot-g > span svg{ width: 15px; height: 15px; color: rgb(142, 142, 147); }
.ot-times{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.ot-times button{ height: 50px; border: 0px; border-radius: 16px; background: rgb(255, 255, 255); font-family: inherit; font-size: 16px; font-weight: 600; color: rgb(17, 17, 17); cursor: pointer; font-variant-numeric: tabular-nums; }
.ot-times button.on{ background: rgb(31, 10, 23); color: rgb(255, 255, 255); box-shadow: rgba(40, 8, 30, 0.25) 0px 10px 22px; }
.ot-times--s{ grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 0px; }
.ot-times--s button{ height: 40px; font-size: 14px; background: rgb(247, 242, 245); }
.ot-rules{ margin-top: 24px; padding: 16px; border-radius: 22px; background: rgb(255, 255, 255); }
.ot-rules b{ font-size: 15px; font-weight: 600; color: rgb(17, 17, 17); }
.ot-rules p{ margin: 6px 0px 0px; font-size: 13.5px; line-height: 1.5; color: rgb(110, 110, 115); }
@keyframes otpop { 
  0% { transform: scale(0.4); opacity: 0; }
  100% { transform: none; opacity: 1; }
}
.ot-done__c{ width: 100%; box-sizing: border-box; text-align: left; margin-top: 24px; padding: 6px 0px; }
.ot-done__c .ot-bk__who{ padding: 10px 18px 4px; margin: 0px; color: rgb(58, 58, 60); }
.ot-done__c .ot-bk__who b{ color: rgb(17, 17, 17); }
.ot-mode{ margin-top: 12px; padding: 16px; border-radius: 24px; background: rgb(255, 255, 255); cursor: pointer; box-shadow: transparent 0px 0px 0px 1.5px inset; transition: box-shadow 0.2s; }
.ot-mode.on{ box-shadow: rgb(31, 10, 23) 0px 0px 0px 2px inset, rgba(40, 8, 30, 0.08) 0px 12px 28px; }
.ot-mode__h{ display: flex; gap: 12px; align-items: flex-start; }
.ot-mode__h > span{ width: 40px; height: 40px; border-radius: 13px; background: rgb(241, 241, 243); color: rgb(58, 58, 60); display: grid; place-items: center; flex: 0 0 auto; }
.ot-mode__h > span svg{ width: 19px; height: 19px; }
.ot-mode.on .ot-mode__h > span{ background: rgb(31, 10, 23); color: rgb(255, 255, 255); }
.ot-mode__h div{ flex: 1 1 auto; }
.ot-mode__h b{ display: block; font-size: 16.5px; font-weight: 600; color: rgb(17, 17, 17); }
.ot-mode__h small{ display: block; font-size: 13px; color: rgb(142, 142, 147); margin-top: 2px; line-height: 1.35; }
.ot-mode__h i{ width: 22px; height: 22px; border-radius: 50%; box-shadow: rgb(209, 199, 205) 0px 0px 0px 1.5px inset; flex: 0 0 auto; }
.ot-mode.on .ot-mode__h i{ box-shadow: rgb(31, 10, 23) 0px 0px 0px 7px inset; }
.ot-mode p{ position: relative; margin: 10px 0px 0px; padding-left: 24px; font-size: 13.5px; line-height: 1.4; color: rgb(58, 58, 60); }
.ot-mode p::before{ content: ""; position: absolute; left: 2px; top: 3px; width: 14px; height: 14px; border-radius: 50%; }
.ot-mode p.ok::before{ background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f7d17' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center center / 9px no-repeat rgb(232, 244, 221); }
.ot-mode p.warn::before{ background: radial-gradient(circle, rgb(213, 138, 31) 0px, rgb(213, 138, 31) 2px, transparent 2.5px) rgb(253, 240, 222); box-shadow: rgb(253, 240, 222) 0px 0px 0px 4px inset; }
.ot-stp{ margin-top: 12px; }
.ot-stp__h{ display: flex; align-items: center; gap: 10px; }
.ot-stp__h i{ width: 24px; height: 24px; border-radius: 50%; background: rgb(31, 10, 23); color: rgb(255, 255, 255); font-style: normal; font-size: 12.5px; font-weight: 700; display: grid; place-items: center; }
.ot-stp__h b{ flex: 1 1 auto; font-size: 16px; font-weight: 600; color: rgb(17, 17, 17); }
.ot-stp__h span{ font-size: 12.5px; color: rgb(142, 142, 147); }
.ot-wd{ display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-top: 14px; }
.ot-wd button{ height: 46px; border: 0px; border-radius: 14px; background: rgb(247, 242, 245); font-family: inherit; font-size: 14px; font-weight: 600; color: rgb(17, 17, 17); cursor: pointer; }
.ot-wd button.on{ background: rgb(31, 10, 23); color: rgb(255, 255, 255); }
.ot-wd button[disabled]{ opacity: 0.35; cursor: default; }
.ot-dt{ display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 6px 10px; padding: 12px 0px; }
.ot-dt > b{ font-size: 15px; font-weight: 700; color: rgb(17, 17, 17); }
.ot-dt small{ grid-column: 2; font-size: 11.5px; color: rgb(142, 142, 147); }
.ot-ord{ padding: 6px 0px; }
.ot-ord__h{ display: flex; gap: 12px; align-items: center; padding: 12px 18px; }
.ot-ord__h img{ width: 52px; height: 52px; border-radius: 16px; object-fit: cover; }
.ot-ord__h b{ display: block; font-size: 17px; font-weight: 600; color: rgb(17, 17, 17); }
.ot-ord__h small{ display: block; font-size: 13px; color: rgb(142, 142, 147); }
.ot-ord__sum{ display: flex; justify-content: space-between; align-items: baseline; padding: 14px 18px 12px; margin-top: 4px; border-top: 1px solid rgb(240, 234, 238); }
.ot-ord__sum span{ font-size: 14px; color: rgb(110, 110, 115); }
.ot-ord__sum b{ font-size: 30px; font-weight: 700; letter-spacing: -1px; color: rgb(17, 17, 17); }
.ot-steps{ padding: 8px 18px; }
.ot-cx{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ot-cx div{ padding: 16px; border-radius: 18px; background: rgb(246, 246, 248); text-align: center; }
.ot-cx b{ display: block; font-size: 22px; font-weight: 700; color: rgb(17, 17, 17); letter-spacing: -0.5px; }
.ot-cx small{ display: block; font-size: 12.5px; color: rgb(142, 142, 147); margin-top: 3px; }
.ot-wait{ display: grid; place-items: center; padding: 20px 0px; }
.ot-wait i{ width: 44px; height: 44px; border-radius: 50%; border-width: 3px; border-style: solid; border-color: rgb(31, 10, 23) rgb(238, 238, 238) rgb(238, 238, 238); border-image: initial; animation: 0.9s linear 0s infinite normal none running otspin; }
@keyframes otspin { 
  100% { transform: rotate(360deg); }
}
.rf-scr.xs-scr--ot{ background: rgb(247, 242, 245); }
.ot-mc__w i.t{ box-shadow: rgb(29, 2, 12) 0px 0px 0px 1.5px inset; border-radius: 50%; width: 26px; margin: 0px auto; display: block; }
.ot-mc__w i.p{ color: rgb(199, 192, 196); }
.ot-sch__h > div b{ display: block; }
.ot-sch__h > div small{ display: block; font-size: 12.5px; color: rgb(142, 142, 147); margin-top: 2px; }
.ot-rt__p{ margin: 6px 0px 0px; font-size: 13.5px; line-height: 1.45; color: rgb(110, 110, 115); }
.ot-rt__w{ margin-top: 14px; padding-top: 12px; border-top: 1px solid rgb(240, 234, 238); }
.ot-rt__w b{ display: block; font-size: 15px; font-weight: 600; color: rgb(17, 17, 17); }
.ot-rt__w small{ display: block; font-size: 12.5px; color: rgb(142, 142, 147); margin-top: 1px; }
.ot-rt .ot-n5{ margin-top: 10px; }
.ot-n5__l{ display: flex; justify-content: space-between; margin-top: 6px; font-size: 11.5px; color: rgb(174, 174, 178); }
.ot-n5 button.on{ background: rgb(29, 2, 12); color: rgb(255, 255, 255); box-shadow: none; }
.ot-n5--sh{ margin: 4px 0px 14px; }
.ot-tr{ position: relative; }
.ot-tr > div{ flex: 1 1 auto; min-width: 0px; }
.ot-tr__chev{ align-self: center; color: rgb(199, 192, 196); flex: 0 0 auto; }
.ot-tr__chev svg{ width: 18px; height: 18px; display: block; }
.ot-foot{ margin: 9px 8px 0px; font-size: 12.5px; line-height: 1.45; color: rgb(142, 142, 147); }
.ot-how__r > span svg{ width: 17px; height: 17px; }
.ot-how__n{ margin-top: 8px; padding: 12px 14px; border-radius: 16px; background: rgb(247, 242, 245); font-size: 13px; line-height: 1.45; color: rgb(110, 110, 115); }
.ot-wh{ background: rgb(255, 255, 255); border-radius: 22px; overflow: hidden; box-shadow: rgba(60, 10, 40, 0.05) 0px 10px 30px; }
.ot-wh__ph{ height: 116px; overflow: hidden; }
.ot-wh__ph img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.ot-wh b{ display: block; font-size: 15.5px; font-weight: 600; color: rgb(17, 17, 17); padding: 12px 14px 0px; }
.ot-wh small{ display: block; font-size: 12.5px; line-height: 1.4; color: rgb(142, 142, 147); padding: 3px 14px 14px; }
.ot-need > b{ display: block; font-size: 15.5px; font-weight: 600; line-height: 1.35; color: rgb(17, 17, 17); }
.ot-seg--2{ grid-template-columns: 1fr 1fr; margin: 12px 0px 4px; }
.ot-need__r{ display: flex; gap: 10px; align-items: flex-start; padding: 8px 0px 0px; }
.ot-need__r i{ flex: 0 0 auto; color: rgb(58, 58, 60); margin-top: 1px; }
.ot-need__r i svg{ width: 16px; height: 16px; display: block; }
.ot-need__r span{ font-size: 13.5px; line-height: 1.45; color: rgb(110, 110, 115); }
.ot-need__r span b{ color: rgb(17, 17, 17); font-weight: 600; }
.ot-rh > b{ display: block; font-size: 16px; font-weight: 600; color: rgb(17, 17, 17); }
.ot-rh > p{ margin: 4px 0px 0px; font-size: 13px; line-height: 1.45; color: rgb(142, 142, 147); }
.ot-rh > p b{ color: rgb(58, 58, 60); font-weight: 600; }
.ot-pl{ padding: 6px; }
.ot-pr{ display: flex; gap: 12px; align-items: flex-start; padding: 14px 12px; border-radius: 20px; cursor: pointer; transition: background 0.2s, box-shadow 0.2s; }
.ot-pr + .ot-pr{ margin-top: 2px; }
.ot-pr.on{ background: rgb(246, 238, 243); box-shadow: rgba(160, 80, 120, 0.14) 0px 0px 0px 1px inset; }
.ot-pr__r{ flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; box-shadow: rgb(209, 199, 205) 0px 0px 0px 1.5px inset; margin-top: 1px; transition: box-shadow 0.2s; }
.ot-pr.on .ot-pr__r{ box-shadow: rgb(31, 10, 23) 0px 0px 0px 7px inset; }
.ot-pr__b{ flex: 1 1 auto; min-width: 0px; }
.ot-pr__b b{ display: block; font-size: 15.5px; font-weight: 600; color: rgb(17, 17, 17); }
.ot-pr__b small{ display: block; font-size: 12.5px; line-height: 1.4; color: rgb(142, 142, 147); margin-top: 3px; }
.ot-pr__b small em{ font-style: normal; font-weight: 600; color: rgb(58, 58, 60); }
.ot-pr__tag{ display: inline-block; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 100px; background: rgb(241, 241, 243); color: rgb(58, 58, 60); margin-bottom: 6px; }
.ot-pr__p{ flex: 0 0 auto; text-align: right; }
.ot-pr__p s{ display: block; font-size: 12px; color: rgb(174, 174, 178); }
.ot-pr__p b{ display: block; font-size: 17px; font-weight: 700; letter-spacing: -0.3px; color: rgb(17, 17, 17); }
.ot-pr__p small{ display: block; font-size: 11.5px; color: rgb(142, 142, 147); margin-top: 1px; }
.ot-pr__p em{ display: block; font-style: normal; font-size: 11.5px; font-weight: 600; color: rgb(58, 58, 60); margin-top: 2px; }
.ot-btn--l{ margin-top: 12px; }
.ot-li > svg{ flex: 0 0 auto; width: 16px; height: 16px; color: rgb(199, 192, 196); margin-left: -4px; }
.ot-know{ padding: 6px 18px; }
.ot-kn{ display: flex; gap: 12px; align-items: flex-start; padding: 12px 0px; }
.ot-kn + .ot-kn{ border-top: 1px solid rgb(240, 234, 238); }
.ot-kn > i{ flex: 0 0 auto; color: rgb(58, 58, 60); }
.ot-kn > i svg{ width: 20px; height: 20px; display: block; }
.ot-kn b{ display: block; font-size: 15px; font-weight: 500; line-height: 1.3; color: rgb(17, 17, 17); }
.ot-kn small{ display: block; font-size: 13px; line-height: 1.4; color: rgb(142, 142, 147); margin-top: 3px; }
.ot-tz > span b{ display: block; font-size: 14px; font-weight: 600; color: rgb(17, 17, 17); }
.ot-tz > span small{ display: block; font-size: 12.5px; line-height: 1.35; color: rgb(142, 142, 147); margin-top: 1px; }
.ot-days i{ font-size: 10.5px; letter-spacing: 0px; font-weight: 600; }
.ot-times button small{ display: block; font-size: 10.5px; font-weight: 500; color: rgb(142, 142, 147); margin-top: 1px; }
.ot-times button.on small{ color: rgba(255, 255, 255, 0.6); }
.ot-done__tz{ display: block; font-size: 12.5px; color: rgb(142, 142, 147); margin-top: 4px; }
.ot-cf__c{ display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 18px; background: rgb(247, 242, 245); }
.ot-cf__c img{ width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.ot-cf__c b{ display: block; font-size: 15.5px; font-weight: 600; color: rgb(17, 17, 17); }
.ot-cf__c small{ display: block; font-size: 12.5px; color: rgb(142, 142, 147); margin-top: 1px; }
.ot-cf__w{ font-size: 24px; font-weight: 700; letter-spacing: -0.6px; color: rgb(17, 17, 17); margin-top: 16px; line-height: 1.15; }
.ot-cf__tz{ font-size: 13px; color: rgb(142, 142, 147); margin: 4px 0px 6px; }
.ot-times--s{ grid-template-columns: repeat(4, 1fr); }
.ot-times--s button{ height: 50px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ot-times--s button b{ font-size: 14.5px; font-weight: 600; }
.ot-stp__n{ margin: 12px 0px 0px; font-size: 12.5px; line-height: 1.45; color: rgb(142, 142, 147); }
.ot-save{ font-style: normal; font-weight: 600; color: rgb(17, 17, 17); }
.ot-ord__u{ display: block; font-size: 12px; font-weight: 400; color: rgb(142, 142, 147); text-align: right; margin-top: 1px; }
.ot-steps--sh{ margin: 12px 0px 0px; box-shadow: none; background: rgb(247, 242, 245); padding: 6px 16px; }
.ot-num--ok{ background: rgb(31, 10, 23) !important; color: rgb(255, 255, 255) !important; }
.ot-num--ok svg{ width: 15px; height: 15px; }
.ot-sh-tz{ font-size: 12.5px; color: rgb(142, 142, 147); }
.ot-plus{ color: rgb(63, 143, 42); }
.ot-mode p b{ color: rgb(17, 17, 17); font-weight: 600; }
.ot-mode__h > span svg{ width: 20px; height: 20px; }
.ot-slp .ot-tz,.xs > .ot-tz{ margin-bottom: 2px; }
.gt-skel i{ display: block; margin-top: 12px; border-radius: 22px; background: linear-gradient(90deg, rgb(233, 233, 237), rgb(246, 246, 248), rgb(233, 233, 237)) 0% 0% / 200% 100%; animation: 1.2s linear 0s infinite normal none running gtsk; }
@keyframes gtsk { 
  100% { background-position: -200% 0px; }
}
.gt-toast.on{ opacity: 1; transform: none; }
.gt-otmsg{ text-align: center; padding: 24px 20px !important; }
.gt-otmsg > span{ width: 52px; height: 52px; border-radius: 18px; background: rgb(245, 238, 242); display: grid; place-items: center; margin: 0px auto 12px; color: rgb(29, 2, 12); }
.gt-otmsg > span svg{ width: 24px; height: 24px; }
.gt-otmsg b{ display: block; font-size: 17px; font-weight: 600; letter-spacing: -0.3px; }
.gt-otmsg p{ font-size: 14px; line-height: 1.45; color: rgb(110, 110, 115); margin: 6px 0px 14px; }
.gt-pend{ padding: 16px !important; }
.gt-pend__h{ display: flex; gap: 12px; }
.gt-pend__h > span{ width: 36px; height: 36px; border-radius: 12px; background: rgb(255, 243, 226); color: rgb(199, 119, 0); display: grid; place-items: center; flex: 0 0 auto; }
.gt-pend__h svg{ width: 18px; height: 18px; }
.gt-pend__h b{ display: block; font-size: 16px; font-weight: 600; }
.gt-pend__h small{ display: block; font-size: 13.5px; line-height: 1.4; color: rgb(110, 110, 115); margin-top: 2px; }
.gt-pend__b{ display: flex; gap: 10px; align-items: center; margin-top: 12px; }
.gt-pend__b .ot-btn{ flex: 1 1 0%; margin: 0px; }
.gt-pend__b .ot-link{ margin: 0px; }
.gt-allb{ display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; padding: 11px 12px; border-radius: 14px; background: rgb(245, 238, 242); font-size: 13.5px; line-height: 1.4; }
.gt-allb svg{ width: 16px; height: 16px; flex: 0 0 auto; margin-top: 1px; }
.gt-rt2{ display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgb(236, 236, 239); }
.gt-rt2 b{ display: block; font-size: 14.5px; }
.gt-rt2 small{ display: block; font-size: 12.5px; color: rgb(142, 142, 147); }
.gt-rt2 .ot-n5{ margin: 0px; flex: 0 0 auto; }
.gt-rt2 .ot-n5 button{ width: 30px; height: 30px; font-size: 13px; }
.gt-now{ font-style: normal; font-size: 11.5px; font-weight: 600; padding: 3px 8px; border-radius: 100px; background: rgb(241, 241, 243); color: rgb(58, 58, 60); vertical-align: 2px; }
.gt-n5{ display: flex; gap: 8px; }
.gt-n5 button{ flex: 1 1 0%; height: 52px; border-radius: 16px; border: 0px; background: rgb(243, 243, 245); font-family: inherit; cursor: pointer; }
.gt-n5 button.on{ background: rgb(29, 2, 12); color: rgb(255, 255, 255); box-shadow: none; }
.gt-red{ color: rgb(215, 55, 47); }
.rf-scr.xs-scr--hero,.rf-scr.xs-scr--ot{ background: rgb(243, 243, 245); }
.ot-sheet{ background: rgb(243, 243, 245); }
.ot-chip i{ display: none; }
.ot-chip{ gap: 0px; }
.ot-card{ box-shadow: none; border-radius: 26px; }
.ot-sec{ font-size: 14.5px; font-weight: 600; letter-spacing: -0.15px; color: rgb(142, 142, 147); margin: 26px 18px 9px; }
.ot-sec--row em{ font-size: 13px; font-weight: 400; color: rgb(174, 174, 178); }
.ot-sec + .ot-card,.ot-sec + .ot-two{ margin-top: 0px; }
.ot-p,.ot-exp p{ font-size: 13.5px; color: rgb(142, 142, 147); }
.ot-note{ color: rgb(142, 142, 147); }
.ot-btn{ background: rgb(16, 16, 20); box-shadow: none; height: 52px; font-size: 16px; }
.ot-link{ color: rgb(17, 17, 17); font-weight: 600; }
.ot-mini{ background: rgb(243, 243, 245); color: rgb(17, 17, 17); font-weight: 600; }
.ot-again .ot-btn,.ot-sch .ot-btn{ background: rgb(243, 243, 245); color: rgb(17, 17, 17); height: 48px; font-size: 15px; }
.oc-bk{ padding: 18px; }
.ot-sheet > .oc-bk:first-of-type{ margin-top: 4px; }
.oc-bk__top{ display: flex; justify-content: space-between; align-items: center; }
.oc-bk__in{ font-size: 13px; color: rgb(142, 142, 147); }
.oc-st{ display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 500; color: rgb(58, 58, 60); }
.oc-st i{ width: 7px; height: 7px; border-radius: 50%; background: rgb(199, 199, 204); }
.oc-st--ok i{ background: rgb(52, 199, 89); }
.oc-bk__d{ font-size: 24px; font-weight: 600; letter-spacing: -0.7px; line-height: 1.15; color: rgb(17, 17, 17); margin-top: 10px; }
.oc-bk__tz{ font-size: 13px; color: rgb(142, 142, 147); margin-top: 4px; }
.oc-bk__who{ display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 14px; color: rgb(58, 58, 60); }
.oc-bk__who img{ width: 30px; height: 30px; border-radius: 50%; object-fit: cover; object-position: 50% 18%; }
.oc-bk__btns{ display: flex; gap: 8px; align-items: center; margin-top: 16px; }
.oc-soft{ flex: 1 1 auto; height: 48px; padding: 0px 16px; white-space: nowrap; border: 0px; border-radius: 100px; background: rgb(243, 243, 245); color: rgb(17, 17, 17); font-family: inherit; font-size: 15px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; }
.oc-soft svg{ width: 18px; height: 18px; }
.oc-soft[disabled]{ color: rgb(142, 142, 147); font-weight: 500; font-size: 14px; cursor: default; }
.oc-txt{ flex: 0 0 auto; height: 48px; padding: 0px 14px; border: 0px; background: none; font-family: inherit; font-size: 15px; font-weight: 500; color: rgb(142, 142, 147); cursor: pointer; }
.oc-rm{ display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgb(236, 236, 239); color: rgb(28, 28, 30); }
.oc-rm > svg{ width: 20px; height: 20px; flex: 0 0 auto; margin-top: 1px; }
.oc-rm b{ display: block; font-size: 15px; font-weight: 500; color: rgb(17, 17, 17); }
.oc-rm small{ display: block; font-size: 13px; color: rgb(142, 142, 147); margin-top: 2px; }
.oc-rmc{ margin-top: 12px; padding: 14px 18px; width: 100%; box-sizing: border-box; text-align: left; }
.oc-rmc .oc-rm{ margin: 0px; padding: 0px; border: 0px; }
.oc-nudge > b{ display: block; font-size: 17px; font-weight: 600; letter-spacing: -0.3px; color: rgb(17, 17, 17); }
.oc-nudge > p{ margin: 6px 0px 0px; font-size: 14px; line-height: 1.45; color: rgb(110, 110, 115); }
.oc-qs{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.oc-qs button{ height: 64px; border: 0px; border-radius: 18px; background: rgb(243, 243, 245); font-family: inherit; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; cursor: pointer; }
.oc-qs small{ font-size: 12.5px; color: rgb(142, 142, 147); }
.oc-qs b{ font-size: 18px; font-weight: 600; letter-spacing: -0.4px; color: rgb(17, 17, 17); font-variant-numeric: tabular-nums; }
.oc-qs__all b{ font-size: 15.5px; letter-spacing: -0.2px; }
.oc-tz{ display: flex; align-items: center; gap: 8px; margin: 12px 2px 0px; font-size: 13px; color: rgb(142, 142, 147); }
.oc-tz svg{ width: 15px; height: 15px; flex: 0 0 auto; }
.oc-row{ display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 14px; padding: 14px 0px 0px; border-width: 1px 0px 0px; border-right-style: initial; border-bottom-style: initial; border-left-style: initial; border-right-color: initial; border-bottom-color: initial; border-left-color: initial; border-image: initial; border-top-style: solid; border-top-color: rgb(236, 236, 239); background: none; text-align: left; font-family: inherit; cursor: pointer; }
.oc-row > span{ flex: 1 1 0%; min-width: 0px; }
.oc-row b{ display: block; font-size: 15.5px; font-weight: 500; color: rgb(17, 17, 17); }
.oc-row small{ display: block; font-size: 13px; color: rgb(142, 142, 147); margin-top: 2px; }
.oc-row > i,.oc-next > i{ color: rgb(199, 199, 204); display: grid; }
.oc-row > i svg,.oc-next > i svg{ width: 16px; height: 16px; }
.ot-sch__h b{ font-size: 17px; }
.ot-week{ gap: 4px; }
.ot-week div{ background: none; padding: 8px 0px; }
.ot-week span{ color: rgb(199, 199, 204); font-size: 12px; }
.ot-week b{ color: rgb(17, 17, 17); }
.ot-week div.on{ background: rgb(243, 243, 245); }
.ot-week div.on span{ color: rgb(17, 17, 17); font-weight: 600; }
.ot-week div.on b{ color: rgb(17, 17, 17); }
.ot-sch.is-paused .ot-week div.on{ background: rgb(243, 243, 245); }
.ot-sch.is-paused .ot-week div.on span,.ot-sch.is-paused .ot-week div.on b{ color: rgb(174, 174, 178); }
.ot-mc{ background: rgb(246, 246, 248); }
.ot-mc__w i.b::after{ background: rgb(28, 28, 30); }
.ot-mc__w i.n::before{ background: rgb(28, 28, 30); }
.ot-mc__w i.t{ box-shadow: rgb(174, 174, 178) 0px 0px 0px 1.5px inset; }
.ot-pk__h b{ font-size: 17px; }
.ot-pk__h em{ font-size: 28px; font-weight: 600; }
.oc-bar{ display: flex; gap: 4px; margin-top: 14px; }
.oc-bar i{ flex: 1 1 0%; height: 8px; border-radius: 4px; background: rgb(28, 28, 30); }
.oc-bar i.c{ background: rgb(255, 255, 255); box-shadow: rgb(28, 28, 30) 0px 0px 0px 1.5px inset; }
.oc-bar i.d{ background: rgb(229, 229, 234); }
.ot-leg{ color: rgb(142, 142, 147); }
.ot-leg i.f{ background: rgb(28, 28, 30); }
.ot-leg i.c{ background: rgb(255, 255, 255); box-shadow: rgb(28, 28, 30) 0px 0px 0px 1.5px inset; }
.ot-leg i.d{ background: rgb(229, 229, 234); }
.ot-dur div{ background: rgb(246, 246, 248); }
.ot-dur b{ font-weight: 600; }
.ot-exp__bar{ background: rgb(236, 236, 239); }
.ot-exp__bar i{ background: rgb(28, 28, 30); }
.oc-next{ display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 14px; padding: 14px 0px 0px; border-width: 1px 0px 0px; border-right-style: initial; border-bottom-style: initial; border-left-style: initial; border-right-color: initial; border-bottom-color: initial; border-left-color: initial; border-image: initial; border-top-style: solid; border-top-color: rgb(236, 236, 239); background: none; text-align: left; font-family: inherit; font-size: 14.5px; color: rgb(17, 17, 17); cursor: pointer; }
.oc-next > svg{ width: 18px; height: 18px; flex: 0 0 auto; color: rgb(28, 28, 30); }
.oc-next > span{ flex: 1 1 0%; }
.ot-rt > b{ font-size: 17px; }
.ot-n5 button{ background: rgb(243, 243, 245); font-weight: 500; }
.ot-n5 button:active{ background: rgb(233, 233, 237); color: rgb(17, 17, 17); }
.ot-n5 button.on,.gt-n5 button.on{ background: rgb(29, 2, 12); box-shadow: none; color: rgb(255, 255, 255); font-weight: 600; }
.gt-rt2{ display: block; border-top-color: rgb(236, 236, 239); }
.gt-rt2 .ot-n5{ margin-top: 10px; }
.gt-rt2 .ot-n5 button{ width: auto; height: 42px; font-size: 15px; }
.ot-tr{ padding: 14px; align-items: center; }
.ot-tr img{ width: 84px; height: 108px; border-radius: 18px; object-position: 50% 18%; }
.ot-tr b{ font-size: 18px; font-weight: 600; margin-top: 2px; }
.ot-tr p{ font-size: 13.5px; }
.oc-lbl{ display: block; font-size: 12.5px; font-weight: 500; color: rgb(142, 142, 147); }
.oc-spec{ display: block; margin-top: 8px; font-size: 13px; color: rgb(58, 58, 60); }
.ot-how > b{ font-size: 17px; margin-bottom: 4px; }
.ot-how__r{ gap: 14px; }
.ot-how__r > span{ width: 22px; height: 22px; background: none; color: rgb(28, 28, 30); border-radius: 0px; }
.ot-how__r > span svg{ width: 21px; height: 21px; }
.ot-how__n{ background: none; padding: 12px 0px 2px; border-top: 1px solid rgb(236, 236, 239); border-radius: 0px; font-size: 13px; color: rgb(142, 142, 147); }
.ot-steps .ot-how__r > span{ width: 26px; height: 26px; border-radius: 50%; background: rgb(243, 243, 245); color: rgb(17, 17, 17); font-size: 13px; font-weight: 600; }
.ot-wh{ box-shadow: none; }
.ot-need > b{ font-size: 16px; }
.ot-need__r i{ color: rgb(28, 28, 30); }
.ot-need__r span{ color: rgb(110, 110, 115); }
.ot-seg{ background: rgb(238, 238, 240); }
.ot-pr.on{ background: rgb(246, 238, 243); box-shadow: rgba(160, 80, 120, 0.14) 0px 0px 0px 1px inset; }
.ot-pr.on .ot-pr__r{ box-shadow: rgb(29, 2, 12) 0px 0px 0px 7px inset; }
.ot-pr__tag{ background: none; padding: 0px; border-radius: 0px; font-size: 12.5px; font-weight: 600; color: rgb(142, 142, 147); margin-bottom: 2px; }
.ot-pr__p b{ font-weight: 600; }
.ot-pr__p em,.xs-v em.ot-save{ color: rgb(63, 143, 42); font-weight: 600; }
.ot-li > span{ font-weight: 600; }
.ot-li + .ot-li{ border-top-color: rgb(236, 236, 239); }
.ot-kn > i{ color: rgb(28, 28, 30); }
.ot-kn + .ot-kn{ border-top-color: rgb(236, 236, 239); }
.oc-trial{ padding: 18px; cursor: pointer; }
.oc-trial__t{ display: block; font-size: 20px; font-weight: 600; letter-spacing: -0.5px; line-height: 1.2; color: rgb(17, 17, 17); margin-top: 4px; }
.oc-trial > p{ margin: 6px 0px 0px; font-size: 14px; line-height: 1.45; color: rgb(110, 110, 115); }
.oc-trial__row{ display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.oc-trial__row b{ font-size: 26px; font-weight: 600; letter-spacing: -0.8px; color: rgb(17, 17, 17); }
.oc-trial__row s{ margin-left: 8px; font-size: 14px; color: rgb(174, 174, 178); }
.oc-trial__row .oc-soft{ flex: 0 0 auto; padding: 0px 24px; }
.oc-trial__s{ display: block; margin-top: 10px; font-size: 12.5px; color: rgb(142, 142, 147); }
.ot-tz svg{ color: rgb(142, 142, 147); }
.ot-days button.on,.ot-times button.on,.ot-wd button.on,.ot-times--s button.on{ background: rgb(246, 238, 243); box-shadow: rgba(160, 80, 120, 0.14) 0px 0px 0px 1px inset; color: rgb(29, 2, 12); }
.ot-days i{ color: rgb(142, 142, 147); }
.ot-days button.on span,.ot-days button.on i{ color: rgb(142, 142, 147); }
.ot-days button.on b{ color: rgb(29, 2, 12); }
.ot-times button.on small{ color: rgb(142, 142, 147); }
.ot-g > span svg{ color: rgb(174, 174, 178); }
.ot-mode{ box-shadow: none; }
.ot-mode.on{ background: rgb(246, 238, 243); box-shadow: rgba(160, 80, 120, 0.14) 0px 0px 0px 1px inset; }
.ot-mode__h > span,.ot-mode.on .ot-mode__h > span{ background: none; color: rgb(28, 28, 30); width: 24px; height: 24px; border-radius: 0px; }
.ot-mode.on .ot-mode__h i{ box-shadow: rgb(29, 2, 12) 0px 0px 0px 7px inset; }
.ot-stp__h i{ background: rgb(243, 243, 245); color: rgb(17, 17, 17); font-weight: 600; }
.ot-wd button,.ot-times--s button{ background: rgb(243, 243, 245); }
.ot-steps--sh{ background: rgb(246, 246, 248); }
.ot-cf__c{ background: rgb(246, 246, 248); }
.ot-cf__w{ font-weight: 600; }
.ot-bar__btn[disabled]{ background: rgb(229, 229, 234); color: rgb(142, 142, 147); }
.gt-otmsg > span{ background: rgb(243, 243, 245); color: rgb(28, 28, 30); }
.gt-pend__h > span{ background: rgb(243, 243, 245); }
.gt-allb{ background: rgb(246, 246, 248); }
.gt-now{ display: block; background: none; padding: 0px; border-radius: 0px; margin-top: 2px; font-size: 13px; font-weight: 500; color: rgb(29, 2, 12); }
.ot-pr.on,.ot-mode.on{ background: rgb(246, 238, 243); box-shadow: rgba(160, 80, 120, 0.14) 0px 0px 0px 1px inset; }
.ot-mode.on .ot-mode__h > span{ background: rgb(255, 255, 255); color: rgb(77, 71, 63); }
.ot-mode.on .ot-mode__h i,.ot-pr.on .ot-pr__r{ box-shadow: rgb(29, 2, 12) 0px 0px 0px 7px inset; }
.ot-n5 button.on,.gt-n5 button.on{ background: rgb(29, 2, 12); color: rgb(255, 255, 255); box-shadow: none; }
.ot-times button.on,.ot-wd button.on{ background: rgb(255, 197, 220); color: rgb(29, 2, 12); box-shadow: none; }
.ot-days button.on{ background: rgb(255, 197, 220); box-shadow: none; }
.ot-days button.on b{ color: rgb(29, 2, 12); }
.ot-days button.on span,.ot-days button.on i,.ot-times button.on small{ color: rgba(29, 2, 12, 0.6); }

/* ---- src/styles/45-payissue.css ---- */
/* «Оплата не прошла» и «Сменить карту» (20-screens/payissue.js).
 * Спокойно: без красного «!» и розовых меток — светлый круг с картой. */
.pi-hb--flat { cursor: default; padding: 14px 16px; align-items: flex-start; }
.pi-hb .pi-ic { background: rgb(241, 241, 243); color: rgb(17, 17, 17); }
.pi-hb .gl-hb__s { color: rgb(110, 110, 115); font-size: 13px; }
.pi-note { margin: 10px 4px 0; }
.pi-note--top { margin-top: 0; }
.pi-sheet .xs-sheet__s { color: rgb(110, 110, 115); }

/* ---- src/styles/46-progress-online.css ---- */
/* «Прогресс, замеры, анализы» и «Онлайн с тренером» — поправки поверх
 * сгенерированных 40-progress.css / 45-online.css: то, чего в прототипе нет
 * (живая камера, экраны вместо слоёв, инсеты Telegram вместо статус-бара
 * макета 54 px) или что прототип рисовал демо-картинкой. */

/* ---------- инсеты: у макета статус-бар 54 px, у нас — настоящие ---------- */
/* :not(.pre-layer) — до старта вкладку «Прогресс» рисует этап до старта
   (RF.screenOverride, прокрутка .pre-layer со своими отступами). */
.rf-pane[data-tab="progress"] .rf-scr:not(.pre-layer) { padding-top: calc(var(--rf-safe-top) + 6px); }
.xs-cf { padding-top: calc(var(--rf-safe-top) + 6px); padding-bottom: var(--rf-safe-bottom); }
.ot-back { top: calc(var(--rf-safe-top) + 6px); }
.ot-chip { top: calc(var(--rf-safe-top) + 14px); }
.ot-hero { height: calc(318px + var(--rf-safe-top)); }
.rf-app.ot-hero-on .rf-topfade { opacity: 0; }
.rf-topfade { transition: opacity .2s; }

/* ---------- «Прогресс» ---------- */
.pz-wkb { margin-top: 12px; }
.pz-wkb .gp-wkb { padding: 14px 16px; border-radius: 24px; background: #fff; box-shadow: none; }
.pz-c[role="button"] { cursor: pointer; }
.gxa-offrow { margin: 10px 16px 0; }
.pz-top + .gxa-offrow { margin-top: 10px; }

/* ---------- экраны-оверлеи (срез недели, просмотр фото): в прототипе — слои поверх телефона ---------- */
.rf-scr.rf-scr--wk, .rf-scr.rf-scr--pv { padding: 0; overflow: hidden; }
.rf-scr.rf-scr--wk { background: var(--rf-page); }
.rf-scr.rf-scr--pv { background: #0b0b0d; }
.gp-wk.rf-wk { position: absolute; inset: 0; padding-top: calc(var(--rf-safe-top) + 6px); padding-bottom: var(--rf-safe-bottom); opacity: 1; transform: none; pointer-events: auto; }
.gp-pv.rf-pv { position: absolute; inset: 0; padding-top: calc(var(--rf-safe-top) + 6px); padding-bottom: var(--rf-safe-bottom); opacity: 1; pointer-events: auto; }
.rf-app:has(.rf-pane.on .rf-pv) .rf-topfade, .rf-app:has(.rf-pane.on .rf-wk) .rf-topfade { opacity: 0; }
.gp-pv__img .gp-pv__ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gp-pv__img .gp-pv__ph--gr { object-fit: contain; background: #141416; }
.gp-pv__mini img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- камера замеров: живое видео вместо нарисованной комнаты ---------- */
.rf-cam { position: absolute; inset: 0; overflow: hidden; opacity: 0; transition: opacity .3s; background: #1b1917; }
.rf-cam.on { opacity: 1; }
.rf-cam video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rf-cam.is-mirror video { transform: scaleX(-1); }
.rf-cam__off { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px; text-align: center; background: rgba(27, 25, 23, .92); color: #fff; }
.rf-cam__off > span { width: 52px; height: 52px; border-radius: 50%; background: rgba(255, 255, 255, .12); display: grid; place-items: center; }
.rf-cam__off > span svg { width: 24px; height: 24px; }
.rf-cam__off b { font-size: 16px; font-weight: 600; letter-spacing: -.2px; }
.rf-cam__off small { font-size: 13.5px; line-height: 1.45; color: rgba(255, 255, 255, .7); max-width: 260px; }
.rf-cam__off .gp-pillbtn { margin-top: 8px; background: #fff; color: #111; }
.xs-cf__vf .xs-phimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.xs-cf__prev .xs-phimg, .xs-cf__was .xs-phimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.xs-cam__sh[disabled], .xs-cam__g[disabled] { opacity: .45; }
.rf-lvl.is-bad i b { background: #f0a03c; }
.rf-lvl[hidden] { display: none !important; }
.xs-bar2 { padding-bottom: max(30px, calc(var(--rf-safe-bottom) + 10px)); }
.xs-shot .xs-phimg, .xs-film__ph .xs-phimg { width: 100%; height: 100%; object-fit: cover; display: block; }
.xs-shot--add.is-busy span { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 13px; color: #8e8e93; }
.xs-shot--add.is-busy .gp-spin { width: 24px; height: 24px; border-width: 2.5px; }

/* ---------- «Анализы»: превью фото-бланка ---------- */
.xs-docv--img { padding: 10px; }
.xs-docv__im { display: block; width: 100%; max-height: 320px; object-fit: contain; border-radius: 16px; background: #f3f3f5; }

/* ---------- «Онлайн с тренером» ---------- */
.ot-pad { height: 200px; }
.ot-bar { padding-bottom: max(24px, calc(var(--rf-safe-bottom) + 8px)); }
/* подсказка и «Отменить» над панелью ot-bar — в 90-frame.css (с учётом таб-бара) */
.ot-pr.is-off, .ot-li.is-off { opacity: .5; cursor: default; }
.ot-days { overflow-x: auto; scrollbar-width: none; }
.ot-days::-webkit-scrollbar { display: none; }
.ot-times__empty { font-size: 13px; line-height: 1.4; color: #8e8e93; }
.oc-bk__who img, .ot-cf__c img, .ot-ord__h img, .ot-bk__who img { object-fit: cover; }
.ot-btn[disabled] { opacity: .6; }
/* длинная подпись «Ссылка появится ближе к началу» не должна выталкивать «Отменить» за карточку */
.oc-bk__btns .oc-soft { min-width: 0; }
.oc-bk__btns .oc-soft[disabled] { white-space: normal; line-height: 1.25; text-align: center; font-size: 13.5px; }

/* ---------- фото замеров: нейтральная плитка ----------
   Градиенты прототипа (.xs-film__ph, .xs-shot.done, .xs-cmp) изображали фото в
   макете. У настоящего фото это фон на время загрузки и на случай ошибки —
   там он выглядел пустым розовым кадром. Нейтральный серый, как у «нет фото». */
.xs-film__ph, .xs-shot.done.xs-shot--ph, .xs-cmp, .xs-cmp__a, .xs-cmp__b { background: #e9e9ed; }
.xs-phimg.is-broken { visibility: hidden; }

/* «Как прошла неделя?»: выбранная цифра шкалы — фирменный тёмный выбор
 * (more_select.css прототипа). Без него после «Назад» ответ не был виден. */
.gp-wk__scale button.on { background: #1d020c; color: #fff; box-shadow: none; }

/* ---- src/styles/46-progress-v4.css ---- */
/* «Прогресс» v4 — страница «Прогресс», блок на хабе тренировок и белые листы (макет opus-alt/progress/v4).
 * Префиксы: pg4-* — страница и листы, hb4-* — блок на хабе. Сетка 4/8: отступы кратны 4, поля 20,
 * строки 48–64. Текст ≥ 13 px и ≥ 4,5:1 (вторичный #5c5c62 — 6,7:1, третичный #6c6c72 — 5:1);
 * #8e8e94 и розовый — только метки (стрелки, кольцо «сегодня», точка под пальцем). Контуров и теней
 * у плашек нет (решение владельца 03.10). Движение — transform/opacity, кривая (.32,.72,0,1). */
.pg4, .hb4, .pg4-layer {
  --pg4-ink: #141418; --pg4-ink2: #5c5c62; --pg4-ink3: #6c6c72; --pg4-mark: #8e8e94;
  --pg4-dot: #c4c3ca; --pg4-grid: #efedf0; --pg4-band: #f4edf2; --pg4-fill: #f3f0f3; --pg4-track: #ebe8ec; --pg4-soft: #dedce2;
  --pg4-pink: #e0518f; --pg4-ease: cubic-bezier(.32, .72, 0, 1);
  font-family: Geist, -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
  color: var(--pg4-ink); -webkit-font-smoothing: antialiased;
}
:where(.pg4, .hb4, .pg4-layer) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; letter-spacing: inherit; -webkit-tap-highlight-color: transparent; }
.pg4 button:disabled, .pg4-layer button:disabled { cursor: default; }
.pg4 :focus-visible, .pg4-layer :focus-visible, .hb4:focus-visible { outline: 2px solid var(--pg4-pink); outline-offset: 2px; border-radius: 12px; }
.pg4 .num, .pg4-layer .num, .hb4 .num { font-variant-numeric: tabular-nums; }
.pg4-sr { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pg4-chev { display: inline-grid; place-items: center; width: 20px; height: 20px; color: var(--pg4-mark); flex: 0 0 auto; }
.pg4-chev svg { width: 18px; height: 18px; }

/* ---------- страница ---------- */
.rf-scr.pg4-scr { background: var(--rf-tab); }
.pg4 { padding-bottom: 24px; }
/* компактный заголовок: проявляется, когда большой ушёл под шапку (как в iOS) */
.pg4-bar {
  position: sticky; z-index: 6; top: calc(-6px - var(--rf-safe-top));
  height: calc(var(--rf-safe-top) + 6px + 44px); margin: calc(-6px - var(--rf-safe-top)) 0 -44px; padding-top: calc(var(--rf-safe-top) + 6px);
  display: flex; align-items: center; justify-content: center; pointer-events: none;
  background: linear-gradient(rgba(var(--rf-page-rgb), .97) 0%, rgba(var(--rf-page-rgb), .94) 72%, rgba(var(--rf-page-rgb), 0) 100%);
  opacity: 0; transition: opacity .25s var(--pg4-ease);
}
.pg4-bar.on { opacity: 1; }
.pg4-bar b { font-size: 17px; line-height: 24px; font-weight: 600; letter-spacing: -.35px; }
.pg4-lt { font-size: 34px; line-height: 40px; font-weight: 700; letter-spacing: -.9px; margin: 0; padding: 24px 20px 0; }
.pg4-rbtn { display: flex; align-items: center; gap: 12px; width: calc(100% - 40px); margin: 4px 20px 0; min-height: 44px; }
.pg4-rbtn .pg4-rib { flex: 1 1 auto; }
.pg4-rbtn .tx { flex: 0 0 auto; font-size: 15px; line-height: 20px; color: var(--pg4-ink2); letter-spacing: -.15px; white-space: nowrap; }
.pg4-rbtn .pg4-chev { margin-right: -4px; }
/* лента 16 недель Re:forma */
.pg4-rib { display: grid; grid-template-columns: repeat(var(--n, 16), 1fr); gap: 4px; align-items: center; padding-bottom: 8px; }
.pg4-rib i { position: relative; display: block; height: 4px; }
.pg4-rib i s { display: block; height: 100%; border-radius: 2px; background: #e7e4e9; overflow: hidden; text-decoration: none; }
.pg4-rib i b { display: block; height: 100%; background: var(--pg4-ink); }
.pg4-rib i.fz b { background: var(--pg4-dot); }
.pg4-rib i.cu::after { content: ""; position: absolute; left: 50%; top: 100%; width: 4px; height: 4px; margin: 4px 0 0 -2px; border-radius: 50%; background: var(--pg4-pink); }
.pg4-rib.lg i { height: 8px; }
.pg4-rib.lg i s { border-radius: 4px; }
.pg4-rib-ax { display: flex; justify-content: space-between; margin-top: 4px; font-size: 13px; line-height: 16px; color: var(--pg4-ink3); }
.pg4-rib-ax b { font-weight: 600; color: var(--pg4-ink); }
/* период */
.pg4-per { position: relative; display: flex; gap: 24px; margin: 4px 20px 0; height: 44px; align-items: center; }
.pg4-per button { position: relative; height: 44px; font-size: 15px; line-height: 20px; font-weight: 500; color: var(--pg4-ink2); letter-spacing: -.15px; white-space: nowrap; }
.pg4-per button.on { color: var(--pg4-ink); font-weight: 600; }
.pg4-per .u { position: absolute; left: 0; bottom: 4px; width: 24px; height: 2px; border-radius: 2px; background: var(--pg4-ink); transition: transform .45s var(--pg4-ease), width .45s var(--pg4-ease); }
/* вывод */
.pg4-hero { padding: 16px 20px 0; }
.pg4-hero.new { padding-top: 24px; }
.pg4-over { font-size: 13px; line-height: 20px; color: var(--pg4-ink2); letter-spacing: -.05px; position: relative; margin: 0; }
.pg4-head { font-size: 30px; line-height: 36px; font-weight: 650; letter-spacing: -.9px; margin: 4px 0 0; text-wrap: balance; position: relative; }
.pg4-hsub { font-size: 16px; line-height: 24px; color: var(--pg4-ink2); margin: 8px 0 0; letter-spacing: -.15px; text-wrap: pretty; position: relative; }
.pg4-hsub:empty { display: none; }
.pg4-nm { font-variant-numeric: tabular-nums; }
/* три отметки одной строкой: колонки равной ширины, между ними — волосяные разделители */
.pg4-marks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 16px -8px 0; }
.pg4-mk { position: relative; display: flex; flex-direction: column; justify-content: flex-start; align-self: stretch; min-width: 0; text-align: left; min-height: 48px; padding: 8px; border-radius: 16px; transition: background-color .3s var(--pg4-ease); }
.pg4-mk + .pg4-mk::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 1px; background: var(--pg4-grid); transition: opacity .3s var(--pg4-ease); }
.pg4-mk.on, .pg4-mk:active { background: var(--pg4-fill); }
.pg4-mk.on::before, .pg4-mk.on + .pg4-mk::before { opacity: 0; }
.pg4-mk em { display: block; font-style: normal; font-size: 13px; line-height: 16px; color: var(--pg4-ink3); }
.pg4-mk b { display: block; font-size: 20px; line-height: 24px; font-weight: 650; letter-spacing: -.4px; white-space: nowrap; margin-top: 4px; }
.pg4-mk small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; line-height: 16px; color: var(--pg4-ink3); margin-top: 4px; }
.pg4-cmp4 { margin-top: 24px; }
/* слова коуча — подпись к кадру */
.pg4-q { display: flex; gap: 12px; align-items: flex-start; margin: 16px 0 0; padding: 16px; border-radius: 20px; background: #fff; }
.pg4-q .pg4-qav { flex: 0 0 auto; }
.pg4-q blockquote { margin: 0; font-size: 15px; line-height: 20px; color: var(--pg4-ink); letter-spacing: -.15px; }
.pg4-q figcaption { display: block; font-size: 13px; line-height: 20px; color: var(--pg4-ink3); margin-top: 4px; }
/* фото: по умолчанию скрыты */
.pg4-ph { margin-top: 24px; }
.pg4-phrow { display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: 12px; row-gap: 8px; width: 100%; min-height: 72px; text-align: left; border-radius: 16px; }
.pg4-pht { display: flex; gap: 8px; }
.pg4-phtile { width: 56px; height: 72px; border-radius: 12px; background: var(--pg4-fill); display: grid; place-items: center; color: var(--pg4-ink2); }
.pg4-phtile svg { width: 20px; height: 20px; }
.pg4-phb { min-width: 0; }
.pg4-phb b { display: block; font-size: 16px; line-height: 24px; font-weight: 500; letter-spacing: -.25px; }
.pg4-phb small { display: block; font-size: 13px; line-height: 16px; color: var(--pg4-ink3); }
.pg4-phshow { display: inline-flex; align-items: center; height: 44px; padding: 0 16px; border-radius: 22px; background: var(--pg4-fill); font-size: 15px; line-height: 20px; font-weight: 600; letter-spacing: -.2px; white-space: nowrap; transition: transform .2s var(--pg4-ease); }
.pg4-phrow:active .pg4-phshow { transform: scale(.96); }
.pg4-phrow:disabled .pg4-phshow { display: none; }
.pg4-cmp { position: relative; aspect-ratio: 4/5; border-radius: 24px; overflow: hidden; background: #ece9e6; touch-action: pan-y; cursor: ew-resize; user-select: none; -webkit-user-select: none; }
.pg4-cmp > div { position: absolute; inset: 0; }
.pg4-cmp img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; pointer-events: none; -webkit-user-drag: none; }
.pg4-cmp .h { position: absolute; top: 0; bottom: 0; left: 0; width: 0; }
.pg4-cmp .h::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: #fff; }
.pg4-cmp .h i { position: absolute; top: 50%; left: -22px; width: 44px; height: 44px; margin-top: -22px; border-radius: 50%; background: #fff; }
.pg4-cmp .h i::before, .pg4-cmp .h i::after { content: ""; position: absolute; top: 18px; width: 8px; height: 8px; border: solid var(--pg4-ink); border-width: 0 0 1.75px 1.75px; }
.pg4-cmp .h i::before { left: 12px; transform: rotate(45deg); }
.pg4-cmp .h i::after { right: 12px; transform: rotate(-135deg); }
.pg4-cmpd { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: -.15px; }
.pg4-cmpd span:nth-child(2) { font-weight: 400; color: var(--pg4-ink3); }
.pg4-cmphide { display: block; margin: 4px auto 0; height: 44px; padding: 0 16px; font-size: 15px; line-height: 20px; font-weight: 600; color: var(--pg4-ink2); }
.pg4-due { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding: 12px 12px 12px 16px; border-radius: 16px; background: var(--pg4-fill); }
.pg4-due b { display: block; font-size: 15px; line-height: 20px; font-weight: 600; letter-spacing: -.2px; }
.pg4-due span { display: block; font-size: 13px; line-height: 16px; color: var(--pg4-ink2); margin-top: 4px; }
.pg4-empty, .pg4-err { margin-top: 16px; padding: 20px; border-radius: 20px; background: var(--pg4-fill); }
.pg4-err { margin: 24px 20px 0; }
.pg4-empty b, .pg4-err b { display: block; font-size: 17px; line-height: 24px; font-weight: 600; letter-spacing: -.3px; }
.pg4-empty p, .pg4-err p { font-size: 15px; line-height: 20px; color: var(--pg4-ink2); margin: 4px 0 0; }
.pg4-empty .pg4-btn, .pg4-err .pg4-btn { margin-top: 16px; }
.pg4-btn { flex: 0 0 auto; text-align: center; font-weight: 600; transition: transform .2s var(--pg4-ease); }
.pg4-btn:active { transform: scale(.97); }
.pg4 .pg4-btn.s, .pg4-layer .pg4-btn.s { height: 44px; padding: 0 20px; border-radius: 22px; background: var(--pg4-ink); color: #fff; font-size: 15px; line-height: 20px; letter-spacing: -.2px; }
.pg4-layer .pg4-btn.l { display: block; width: 100%; height: 52px; border-radius: 26px; background: var(--pg4-ink); color: #fff; font-size: 16px; line-height: 24px; letter-spacing: -.3px; }
.pg4-layer .pg4-btn.g { display: block; width: 100%; height: 48px; border-radius: 24px; background: var(--pg4-fill); color: var(--pg4-ink); font-size: 16px; line-height: 24px; letter-spacing: -.25px; }
/* секции и списки */
.pg4-sect { padding: 40px 20px 12px; }
.pg4-sect h2 { margin: 0; font-size: 22px; line-height: 28px; font-weight: 650; letter-spacing: -.5px; }
.pg4-card { background: #fff; border-radius: 24px; margin: 0 16px; padding: 4px 0; overflow: hidden; }
.pg4-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 8px 16px 8px 20px; position: relative; text-align: left; transition: background-color .2s var(--pg4-ease); }
.pg4-row + .pg4-row::before, .pg4-slots > .xs-row::before, .pg4-slots + .pg4-row::before { content: ""; position: absolute; left: 20px; right: 0; top: 0; height: 1px; background: var(--pg4-grid); }
.pg4-row .t { flex: 1 1 auto; min-width: 0; }
.pg4-row .t b { display: block; font-size: 17px; line-height: 24px; font-weight: 500; letter-spacing: -.3px; }
.pg4-row .t small { display: block; font-size: 14px; line-height: 20px; color: var(--pg4-ink2); letter-spacing: -.1px; }
.pg4-row .vis { flex: 0 0 auto; display: flex; align-items: center; }
.pg4-row.dim .t b { color: var(--pg4-ink2); }
button.pg4-row:active { background: rgba(20, 20, 24, .04); }
/* строки других областей (кит RF.kit.row) — в том же ритме, что и свои */
.pg4-slots > .xs-row { position: relative; min-height: 64px; padding: 8px 16px 8px 20px; margin: 0; background: none; border-radius: 0; box-shadow: none; }
.pg4-slots > .xs-row .xs-b b { font-size: 17px; line-height: 24px; font-weight: 500; letter-spacing: -.3px; }
.pg4-slots > .xs-row .xs-b small { font-size: 14px; line-height: 20px; color: var(--pg4-ink2); }
.pg4-story { margin: 16px 16px 0; }
.pg4-story .pz-story { margin: 0; box-shadow: none; border-radius: 20px; }
.pg4 .pz-wkb { margin: 12px 16px 0; }
.pg4 .gxa-offrow { margin: 8px 16px 0; }
/* точки тренировок: ● выполнена · — пропуск · ○ впереди · розовое кольцо — сегодня · | заморозка */
.pg4-dts { display: block; overflow: visible; }
.pg4-dts .k-dn { fill: var(--pg4-ink); }
.pg4-dts .k-ms { fill: var(--pg4-ink2); }
.pg4-dts .k-ms.k-fz { fill: var(--pg4-mark); }
.pg4-dts .k-pl { fill: none; stroke: var(--pg4-mark); stroke-width: 1.5; }
.pg4-dts .k-td { fill: none; stroke: var(--pg4-pink); stroke-width: 2; }
.pg4-dts line.k-fz { stroke: var(--pg4-mark); stroke-width: 1.5; stroke-linecap: round; }
.pg4-dd { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.pg4-dd.g { background: var(--pg4-ink); }
.pg4-dd.p { background: linear-gradient(90deg, var(--pg4-ink) 50%, transparent 50%); box-shadow: inset 0 0 0 1.5px var(--pg4-ink); }
.pg4-dd.b { box-shadow: inset 0 0 0 1.5px var(--pg4-mark); }
.pg4-dd.t { box-shadow: inset 0 0 0 2px var(--pg4-pink); }
.pg4-dd.z { width: 10px; height: 2px; border-radius: 1px; background: var(--pg4-mark); }
.pg4-dd7 { display: flex; gap: 4px; }
.pg4-wbm { display: flex; align-items: flex-end; gap: 4px; height: 24px; }
.pg4-wbm i { display: block; width: 6px; border-radius: 2px; background: var(--pg4-soft); }
.pg4-wbm i:last-child { background: var(--pg4-ink); }
/* каркас загрузки: та же раскладка, без вспышек */
.pg4-skel { padding: 20px 20px 0; }
.pg4-skel i, .pg4-skm i, .hb4-sk i { display: block; border-radius: 8px; background: linear-gradient(90deg, #f1edf0 0%, #f7f3f6 50%, #f1edf0 100%); background-size: 200% 100%; animation: pg4sk 1.4s ease-in-out infinite; }
.pg4-skm { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 24px; }
.pg4-skm i { height: 56px; border-radius: 12px; }
@keyframes pg4sk { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ---------- график «Тело меняется» ---------- */
.pg4-cw { position: relative; }
.pg4-csvg, .pg4-csel { position: absolute; left: 0; top: 0; }
.pg4-c { display: block; overflow: visible; }
.pg4-c .k-gr { stroke: var(--pg4-grid); stroke-width: 1; shape-rendering: crispEdges; }
.pg4-c .k-bd { fill: var(--pg4-band); }
.pg4-c .k-dt { fill: var(--pg4-dot); }
.pg4-c .k-gq { stroke: var(--pg4-dot); stroke-width: 1.5; stroke-dasharray: 1 5; stroke-linecap: round; }
.pg4-c .k-dt.k-nl { fill: var(--pg4-ink); stroke: var(--rf-page); stroke-width: 2; }
.pg4-c .k-gd { stroke: var(--pg4-grid); stroke-width: 1; shape-rendering: crispEdges; }
.pg4-c .k-ln { fill: none; stroke: var(--pg4-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pg4-c .k-en, .pg4-c .k-gp { fill: var(--pg4-ink); stroke: var(--rf-page); stroke-width: 2; }
.pg4-c .k-td { fill: var(--rf-page); stroke: var(--pg4-pink); stroke-width: 2; }
.pg4-c .k-tdl { font-size: 13px; fill: var(--pg4-ink2); }
.pg4-c .k-yt, .pg4-c .k-xt { font-size: 13px; fill: var(--pg4-ink3); font-variant-numeric: tabular-nums; }
.pg4-c .k-bl { font-size: 13px; fill: var(--pg4-ink2); }
.pg4-c .k-gl { font-size: 13px; fill: var(--pg4-ink2); font-variant-numeric: tabular-nums; }
.pg4-c .k-gl.k-last { fill: var(--pg4-ink); font-weight: 600; }
.pg4-c .k-sg { font-size: 13px; fill: var(--pg4-ink); font-weight: 600; }
.pg4-csel { opacity: 0; transition: opacity .15s; pointer-events: none; overflow: visible; }
.pg4-csel.on { opacity: 1; }
.pg4-csel .k-xh { stroke: rgba(20, 20, 24, .22); stroke-width: 1; shape-rendering: crispEdges; }
.pg4-csel .k-fc { fill: var(--pg4-pink); stroke: var(--rf-page); stroke-width: 2; }
.pg4-csel .k-fw { fill: var(--pg4-mark); }
.pg4-csel .k-fr { fill: none; stroke: var(--pg4-pink); stroke-width: 2; }
.pg4-lab { position: absolute; left: 0; right: 0; top: 0; height: 24px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; text-align: left; }
.pg4-lab .l { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; line-height: 24px; color: var(--pg4-ink3); }
.pg4-lab .l b { font-size: 15px; font-weight: 600; color: var(--pg4-ink); letter-spacing: -.2px; margin-right: 8px; }
.pg4-lab .r { flex: 0 0 auto; font-size: 13px; line-height: 24px; color: var(--pg4-ink2); white-space: nowrap; }
.pg4-lab .r b { font-size: 17px; font-weight: 600; color: var(--pg4-ink); letter-spacing: -.3px; }
.pg4-lab::after { content: ""; position: absolute; left: -8px; right: -8px; top: -10px; bottom: -10px; }
.pg4-lab:disabled .l b { color: var(--pg4-ink2); }
.pg4-note { position: absolute; left: 0; text-align: left; font-size: 13px; line-height: 20px; color: var(--pg4-ink2); pointer-events: none; }
.pg4-hit { position: absolute; left: 0; cursor: crosshair; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.pg4-cw:focus-visible { outline-offset: 8px; }
/* первый показ: линия дорисовывается 0,6 с, точки и подписи проявляются */
.pg4-c .k-in-ln, .pg4-c .k-in-lng { stroke-dasharray: 1; stroke-dashoffset: 1; animation: pg4draw .6s var(--pg4-ease) .05s forwards; }
.pg4-c .k-in-lng { animation-delay: .25s; }
.pg4-c .k-in-dots circle, .pg4-c .k-in-g circle.k-gp, .pg4-c .k-in-en { animation: pg4fade .45s var(--pg4-ease) both; }
.pg4-c .k-in-dots circle { animation-delay: .1s; }
.pg4-c .k-in-en { animation-delay: .5s; }
.pg4-c .k-in-g circle.k-gp { animation-delay: .4s; }
.pg4-c .k-in-bd { animation: pg4fade .5s var(--pg4-ease) .3s both; }
.pg4-c .k-in-ar { animation: pg4fade .6s var(--pg4-ease) .35s both; }
.pg4-c .k-in-tx { animation: pg4fade .4s var(--pg4-ease) .45s both; }
@keyframes pg4draw { to { stroke-dashoffset: 0; } }
@keyframes pg4fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- блок на хабе ---------- */
.trx .trh-card.hb4 { position: relative; padding: 20px 20px 4px; cursor: pointer; transition: transform .2s var(--pg4-ease); }
.trx .trh-card.hb4:active { transform: scale(.985); }
.hb4-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.hb4-h .pg4-chev { margin: 2px -4px 0 0; }
.hb4-k { display: block; font-size: 14px; line-height: 20px; color: var(--pg4-ink2); letter-spacing: -.1px; }
.hb4-t { display: block; font-size: 17px; line-height: 24px; font-weight: 600; letter-spacing: -.3px; }
.hb4-t.big { font-size: 28px; line-height: 32px; font-weight: 650; letter-spacing: -.8px; }
.hb4-s { display: block; font-size: 14px; line-height: 20px; color: var(--pg4-ink2); letter-spacing: -.1px; margin-top: 4px; }
.hb4-big { display: flex; align-items: baseline; gap: 8px; font-size: 17px; line-height: 24px; font-weight: 600; letter-spacing: -.3px; margin-top: 4px; }
.hb4-big .spr { display: inline-block; font-size: 34px; line-height: 40px; font-weight: 650; letter-spacing: -1px; transform-origin: 30% 70%; }
.hb4-rows { margin-top: 8px; }
.hb4-r { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 4px 0; position: relative; }
.hb4-r + .hb4-r::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--pg4-grid); }
.hb4-r .n { display: block; font-size: 16px; line-height: 24px; letter-spacing: -.25px; min-width: 0; }
.hb4-r .n small { display: block; font-size: 13px; line-height: 16px; color: var(--pg4-ink3); letter-spacing: 0; }
.hb4-r .v { flex: 0 0 auto; font-size: 16px; line-height: 24px; font-weight: 600; letter-spacing: -.2px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hb4-p { font-size: 15px; line-height: 20px; color: var(--pg4-ink2); letter-spacing: -.15px; margin: 12px 0 0; }
.hb4-next { display: flex; flex-direction: column; margin-top: 16px; padding: 12px 16px; border-radius: 16px; background: var(--pg4-fill); }
.hb4-next span { font-size: 13px; line-height: 16px; color: var(--pg4-ink2); }
.hb4-next b { font-size: 16px; line-height: 24px; font-weight: 600; letter-spacing: -.25px; margin-top: 4px; }
.hb4-f { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; margin-top: 4px; border-top: 1px solid var(--pg4-grid); font-size: 15px; line-height: 20px; font-weight: 400; color: var(--pg4-ink); letter-spacing: -.15px; }
.hb4-f span { font-weight: 400; }
.hb4-f .wk { font-size: 14px; line-height: 20px; color: var(--pg4-ink3); white-space: nowrap; }
.hb4-big-rib { margin-top: 16px; margin-bottom: 4px; }
.trx .trh-card.hb4-err { padding: 20px; cursor: default; }
.trx .trh-card.hb4-err:active { transform: none; }
.hb4-err .pg4-btn.s { display: block; height: 44px; margin-top: 16px; padding: 0 20px; border-radius: 22px; background: var(--pg4-ink); color: #fff; font-size: 15px; line-height: 20px; letter-spacing: -.2px; }
.trx .trh-card.hb4-sk { padding: 20px; }
.trx .trh-card.hb4-sk i { display: block; }

/* ---------- листы ---------- */
.pg4-layer { position: absolute; inset: 0; z-index: 60; pointer-events: none; --pg4-top: max(52px, calc(var(--rf-safe-top) + 8px)); }
.pg4-veil { position: absolute; inset: 0; background: rgba(14, 10, 16, .3); opacity: 0; transition: opacity .5s var(--pg4-ease); }
.pg4-layer.on .pg4-veil { opacity: 1; pointer-events: auto; }
.pg4-sheets { position: absolute; inset: 0; pointer-events: none; }
/* экран под листом уходит вглубь, как в iOS */
/* переход задаёт сам лист на время открытия/закрытия (progress-4-sheets.js, style.transition): общее правило
   здесь перебило бы переходы роутера (.rf-pane.leave / .rf-sub) */
.rf-app.pg4-up .rf-pane.on { transform: translateY(12px) scale(.94); border-radius: 24px; overflow: hidden; }
.pg4-sh { position: absolute; background: #fff; border-radius: 32px 32px 0 0; overflow: hidden; pointer-events: auto; contain: layout paint; outline: none; }
.pg4-layer .pg4-sh:focus, .pg4-layer .pg4-sh:focus-visible { outline: none; }
@media (max-height: 700px) { .pg4-layer { --pg4-top: max(32px, calc(var(--rf-safe-top) + 8px)); } }
.pg4-grab { position: absolute; top: 0; left: 50%; width: 120px; height: 24px; margin-left: -60px; z-index: 3; touch-action: none; }
.pg4-grab::before { content: ""; position: absolute; top: 8px; left: 42px; width: 36px; height: 4px; border-radius: 2px; background: #e3e1e6; }
.pg4-x { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; display: grid; place-items: center; z-index: 3; color: var(--pg4-ink); }
.pg4-x i { width: 32px; height: 32px; border-radius: 50%; background: #f1eff2; display: grid; place-items: center; }
.pg4-x svg { width: 12px; height: 12px; }
.pg4-ssc { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-bottom: calc(48px + var(--rf-safe-bottom)); }
.pg4-ssc::-webkit-scrollbar { display: none; }
.pg4-sh .shc { opacity: 0; }
.pg4-sp { padding: 20px 20px 0; }
.pg4-sp.hb4-same { padding-top: 20px; }
.pg4-sp.hb4-same .hb4-h > div { padding-right: 32px; }
.pg4-stitle { font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -.5px; padding-right: 44px; }
.pg4-sk { font-size: 14px; line-height: 20px; color: var(--pg4-ink2); margin: 4px 0 0; }
.pg4-ssec { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 32px 20px 8px; }
.pg4-ssec b { font-size: 17px; line-height: 24px; font-weight: 600; letter-spacing: -.3px; }
.pg4-ssec span { font-size: 13px; line-height: 16px; color: var(--pg4-ink3); text-align: right; }
.pg4-pad { padding: 0 20px; }
.pg4-cta { padding-top: 24px; }
.pg4-how { font-size: 14px; line-height: 20px; color: var(--pg4-ink3); padding: 12px 20px 0; margin: 0; letter-spacing: -.1px; }
.pg4-big { display: flex; align-items: baseline; gap: 8px; margin-top: 12px; }
.pg4-big b { font-size: 48px; line-height: 52px; font-weight: 650; letter-spacing: -1.6px; }
.pg4-big span { font-size: 20px; line-height: 24px; color: var(--pg4-ink2); letter-spacing: -.3px; }
.pg4-sub { font-size: 15px; line-height: 20px; color: var(--pg4-ink2); margin: 4px 0 0; letter-spacing: -.15px; min-height: 20px; }
.pg4-sub b { color: var(--pg4-ink); font-weight: 600; }
.pg4-wsch { padding: 12px 20px 0; }
.pg4-sp .pg4-per { margin: 4px 0 0; }
/* таблицы листов: числа — по правому краю, tabular-nums, одна точность */
.pg4-tr { display: grid; align-items: center; min-height: 48px; position: relative; font-size: 16px; line-height: 24px; letter-spacing: -.2px; column-gap: 4px; }
.pg4-tr + .pg4-tr::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--pg4-grid); }
.pg4-tr > *:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.pg4-tr b { font-weight: 600; }
.pg4-tr .mu { color: var(--pg4-ink3); font-weight: 400; }
.pg4-tr .ar { text-align: center; color: var(--pg4-mark); }
.pg4-tr.h { min-height: 32px; font-size: 13px; line-height: 16px; color: var(--pg4-ink3); }
.pg4-tr.tot b { font-weight: 650; }
.pg4-tr .n small { display: block; font-size: 13px; line-height: 16px; color: var(--pg4-ink3); }
.t-wt { grid-template-columns: 1fr 64px 56px; }
.t-gt { grid-template-columns: 1fr 64px 64px 64px; }
.t-ex { grid-template-columns: minmax(0, 1fr) 40px 20px 80px; padding: 4px 0; }
.t-wk { grid-template-columns: minmax(0, 1fr) 64px 56px; padding: 4px 0; }
.t-wk .pg4-dts { margin-left: auto; }
.t-q { grid-template-columns: 1fr 24px 20px 24px 56px; }
.t-gw { grid-template-columns: 1fr auto; }
.pg4-goal { margin: 0 20px; padding: 16px; border-radius: 20px; background: var(--pg4-fill); }
.pg4-goal .gt { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pg4-goal .gt b { font-size: 28px; line-height: 32px; font-weight: 650; letter-spacing: -.8px; }
.pg4-goal .gt span { font-size: 15px; line-height: 20px; color: var(--pg4-ink2); }
.pg4-meter { height: 4px; border-radius: 2px; background: #e3e0e5; margin-top: 12px; overflow: hidden; }
.pg4-meter i { display: block; height: 100%; background: var(--pg4-ink); border-radius: 2px; transform-origin: left; }
.pg4-goal p { font-size: 15px; line-height: 20px; margin: 12px 0 0; }
.pg4-goal p small { display: block; font-size: 13px; line-height: 20px; color: var(--pg4-ink3); }
.pg4-goal .pg4-goal-w { color: var(--pg4-ink2); }
.pg4-cal { margin: 16px 20px 0; }
.pg4-cal-c { font-size: 13px; line-height: 16px; color: var(--pg4-ink3); padding-bottom: 12px; margin: 0; }
.pg4-cal-h, .pg4-cal-g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.pg4-cal-h span { text-align: center; font-size: 13px; line-height: 16px; color: var(--pg4-ink3); padding-bottom: 8px; }
.pg4-cal-g > i { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: 52px; border-radius: 12px; background: var(--pg4-fill); font-style: normal; }
.pg4-cal-g > i.e { background: transparent; }
.pg4-cal-g > i span { font-size: 13px; line-height: 16px; color: var(--pg4-ink3); font-variant-numeric: tabular-nums; }
.pg4-cal-g > i.now span { color: var(--pg4-ink); font-weight: 600; }
.pg4-leg { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 16px 20px 0; font-size: 13px; line-height: 16px; color: var(--pg4-ink3); }
.pg4-leg span { display: flex; align-items: center; gap: 8px; }
.pg4-wkb { padding: 8px 20px 0; }
.pg4-wkb svg { display: block; overflow: visible; }
.pg4-wkb .k-wb { fill: var(--pg4-soft); }
.pg4-wkb .k-wb.k-on { fill: var(--pg4-ink); }
.pg4-wkb text { font-size: 13px; fill: var(--pg4-ink3); font-variant-numeric: tabular-nums; }
.pg4-wkb text.k-v { fill: var(--pg4-ink2); }
.pg4-wkb text.k-on { fill: var(--pg4-ink); font-weight: 600; }
/* ---------- 320 px ---------- */
@media (max-width: 359px) {
  .pg4-lt { padding-top: 20px; font-size: 30px; line-height: 36px; }
  .pg4-head { font-size: 26px; line-height: 32px; letter-spacing: -.7px; }
  .pg4-due { flex-direction: column; align-items: stretch; padding: 16px; }
  .pg4-due .pg4-btn { margin-top: 4px; }
  .pg4-phrow { grid-template-columns: auto 1fr; }
  .pg4-phshow { grid-column: 2; justify-self: start; height: 36px; margin-top: -4px; }
  .pg4-mk b { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .pg4 *, .pg4 *::before, .pg4 *::after, .hb4, .hb4 *, .pg4-layer *, .pg4-layer *::before {
    transition-duration: .01s !important; animation-duration: .01s !important; animation-delay: 0s !important;
  }
}

/* ---- src/styles/46-progress-v5.css ---- */
/* «Прогресс» v5 — в языке Главной, Дневника и Плана (владелец 05.10). Своих «новых» деталей нет:
 * карточки — hm-card / hm-goal (Главная), кольца — goals / mrings (Дневник), строки «+» — hm-row
 * («План на сегодня»), документы — xs-card (Ещё). Здесь только раскладка страницы и то, чего у этих
 * деталей не было: число веса крупно, три столбика замеров, тёмная карточка фото, подвал колец.
 * Плашки без контура и тени — 92-plates.css (владелец 03.10). */
.pg5 { padding-bottom: 28px; }
/* шапка — как в Дневнике: «Сегодня» крупно, дата серым, круглая белая кнопка справа */
.pg5-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 18px 0; }
.pg5-t { margin: 0; font-size: 34px; line-height: 40px; font-weight: 700; letter-spacing: -.9px; }
.pg5-sub { margin: 4px 0 0; font-size: 15px; line-height: 20px; color: var(--mut, #7d7c85); }
.pg5-cal { flex: 0 0 auto; width: 44px; height: 44px; margin-top: 2px; border-radius: 50%; background: #fff; display: grid; place-items: center; color: #101014; }
.pg5-cal svg { width: 20px; height: 20px; }
/* период — как дни недели в Дневнике: светлые плитки, выбранная — чёрная */
.pg5-per { display: flex; gap: 6px; margin: 16px 18px 0; }
.pg5-per button { flex: 1 1 0; min-width: 0; padding: 0; text-align: center; height: 40px; border-radius: 14px; background: rgba(255, 255, 255, .62); font-size: 14px; font-weight: 500; color: #3f3e46; letter-spacing: -.1px; transition: background .25s, color .25s; }
.pg5-per button.on { background: #101014; color: #fff; }
.pg5-col { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px 0; }
.pg5-card { margin: 0; }
/* обёртки секций, которые прячутся при смене периода, не ломают общий gap колонки */
#pg5-acth:not([hidden]), #pg5-strh:not([hidden]) { display: contents; }
.pg5-sh { display: flex; align-items: baseline; justify-content: space-between; margin: 14px 4px -2px; font-size: 18px; line-height: 24px; font-weight: 600; letter-spacing: -.3px; }
.pg5-sh button { font-size: 14px; font-weight: 500; color: #101014; }
/* заголовок карточки — «Цель месяца»: слева жирно, справа серым; тап — лист подробностей */
.pg5-h { width: 100%; text-align: left; align-items: center; }
.pg5-h span { display: inline-flex; align-items: center; gap: 2px; }
.pg5-h .pg4-chev { width: 16px; height: 16px; color: #b6b5bd; margin-right: -4px; }
.pg5-h .pg4-chev svg { width: 16px; height: 16px; }
/* «Вес»: число за период — зелёное, как «74,9 кг» на Главной, только крупнее: это главный факт страницы */
.pg5-wv { display: flex; align-items: baseline; gap: 8px; margin-top: 12px; }
.pg5-wv b { font-size: 34px; line-height: 38px; font-weight: 700; letter-spacing: -1px; color: #5c7a15; font-variant-numeric: tabular-nums; }
.pg5-wv.up b { color: #101014; }
.pg5-wv > span { font-size: 13px; color: #8b8a92; }
.pg5-wv.nw b { font-size: 22px; line-height: 28px; letter-spacing: -.4px; color: #101014; text-wrap: balance; }
.pg5-ws { margin: 8px 0 0; font-size: 13px; line-height: 1.45; color: #7d7c85; text-wrap: pretty; }
.pg5-chart { margin-top: 8px; }
.pg5-w .pg4-lab .l { color: #8b8a92; }
.pg5-w .pg4-lab .l b { font-size: 13px; font-weight: 500; color: #3f3e46; }
.pg5-w .pg4-c .k-ln { stroke: #5c7a15; stroke-width: 2.25; }
.pg5-w .pg4-c .k-en { fill: #5c7a15; stroke: #fff; }
.pg5-w .pg4-c .k-dt { fill: #c9c8cf; }
.pg5-w .pg4-c .k-dt.k-nl { stroke: #fff; }
.pg5-w .pg4-c .k-gr { stroke: rgba(12, 14, 18, .06); }
.pg5-w .pg4-c .k-bd { fill: rgba(12, 14, 18, .035); }
.pg5-ok { margin-top: 10px; }
.pg5-ok.am { color: var(--warn, #a9691f); }
.pg5-ok.nu { color: #5f5e66; }
/* строка «Плана на сегодня» внутри карточки: плитка, текст, круглый «+» */
.pg5-pr { margin-top: 12px; padding: 0; cursor: pointer; }
.pg5-pr .hm-media { width: 52px; height: 52px; border-radius: 14px; }
.pg5-pr .hm-media svg { width: 22px; height: 22px; }
.pg5-add { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #101014; color: #fff; }
.pg5-add svg { width: 16px; height: 16px; }
/* «Замеры»: три столбика */
.pg5-gcs { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.pg5-gc { display: flex; flex-direction: column; min-width: 0; }
.pg5-gc .l { font-size: 12.5px; color: #8b8a92; }
.pg5-gc b { margin-top: 2px; font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pg5-gc b small { font-size: 13px; font-weight: 500; color: #8b8a92; letter-spacing: 0; }
.pg5-sp { display: block; width: 100%; max-width: 84px; height: 26px; margin-top: 6px; }
.pg5-gc .s { margin-top: 4px; font-size: 12px; color: #8b8a92; font-variant-numeric: tabular-nums; }
/* «Было и стало» — тёмная карточка, как «Тренировка на сегодня» на Главной */
.pg5-ph { position: relative; display: flex; align-items: stretch; gap: 14px; padding: 18px 16px 16px 20px; border-radius: 26px; overflow: hidden; color: #fff;
  background: radial-gradient(120% 90% at 100% 0%, #7a1d3a 0%, rgba(122, 29, 58, 0) 60%), linear-gradient(160deg, #4a0d22 0%, #2a0711 100%); }
.pg5-phb { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.pg5-phb small { font-size: 13px; color: rgba(255, 255, 255, .72); }
.pg5-phb b { margin-top: 4px; font-size: 24px; line-height: 28px; font-weight: 700; letter-spacing: -.6px; }
.pg5-phb span { margin-top: 4px; font-size: 13.5px; color: rgba(255, 255, 255, .78); }
.pg5-show { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; height: 46px; padding: 0 22px 0 18px; border-radius: 100px; background: #fff; color: #101014; font-size: 15px; font-weight: 600; }
.pg5-show svg { width: 12px; height: 12px; }
.pg5-show:disabled { opacity: .5; }
.pg5-pht { flex: 0 0 auto; display: flex; gap: 6px; align-items: center; }
.pg5-pht i { width: 48px; height: 66px; border-radius: 14px; display: grid; place-items: center; background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.pg5-pht i svg { width: 20px; height: 20px; }
.pg5-phc { background: #fff; border-radius: 26px; padding: 12px 12px 4px; }
.pg5-phc .pg4-cmp { border-radius: 18px; }
.pg5-phc .pg4-cmpd { padding: 0 6px; }
/* «Что вы делаете» — кольца Дневника; кольцо — кнопка с листом подробностей */
.pg5-rings { gap: 2px; }
.pg5-rg { padding: 4px 0; border-radius: 16px; transition: background .15s; }
.pg5-rg:active { background: rgba(12, 14, 18, .04); }
/* --p без .is-in не задан → conic-gradient недействителен и кольцо на кадр теряет фон при смене периода */
.pg5-rg .mring__d { width: 60px; height: 60px; --p: 0; }
.is-in .pg5-rg .mring__d { --p: var(--to, 0); }
.pg5-rg .mring__d span { font-size: 15px; }
.pg5-rg .mring__l { font-size: 12px; margin-top: 2px; }
.pg5-rg .mring__t { font-size: 11px; text-align: center; line-height: 1.25; }
.pg5-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding-top: 12px; border-top: 1px solid rgba(16, 16, 20, .07); font-size: 13.5px; color: #7d7c85; text-align: left; }
.pg5-foot b { font-weight: 600; color: #101014; }
.pg5-foot .pg4-chev { width: 16px; height: 16px; color: #b6b5bd; flex: 0 0 auto; }
.pg5-foot .pg4-chev svg { width: 16px; height: 16px; }
.pg5-rerr { font-size: 13.5px; color: #7d7c85; text-align: center; }
.pg5-rerr button { font-weight: 600; color: #101014; }
/* «Сила» — строки приёмов Дневника */
.pg5-str { padding-top: 4px; padding-bottom: 4px; }
.pg5-ex { cursor: pointer; }
.pg5-ex .hm-mic { color: #5c7a15; background: rgba(163, 213, 70, .16); }
.pg5-exv { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; }
.pg5-exv b { font-size: 15.5px; font-weight: 600; letter-spacing: -.2px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pg5-exv em { font-style: normal; margin-top: 3px; font-size: 12.5px; font-weight: 600; color: #5c7a15; white-space: nowrap; }
.pg5-exv em.dn { color: #8b8a92; }
.pg5-docs .pg5-dim { cursor: default; }
.pg5-docs .pg5-dim b { color: #8b8a92; }
.pg5 .pg4-story { margin: 0; }
.pg5 .pz-wkb { margin: 14px 16px 0; }
/* «Итоги недели» (лист, макет 10.10 — раздел 8): тон страницы и карточки этой же страницы. Своего здесь —
 * только раскладка листа, строка недель со стрелками и плитка веса на месте кольца; карточки (hm-card),
 * кольца (mrings), строки (hm-mrow), ярлык разбора (rv__lbl) и тёмная карточка (hm-dark) — уже существующие. */
.pg4-sh--week { background: var(--rf-page); }
.pg4-sh--week .pg4-x i { background: #fff; }
.pgw-sw { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 16px 0; touch-action: pan-y; }
.pgw-nav { margin-top: 0; }
.pgw-nav:disabled { opacity: .35; cursor: default; }
.pgw-wk { flex: 1 1 auto; min-width: 0; text-align: center; }
.pgw-wk b { display: block; font-size: 17px; line-height: 22px; font-weight: 600; letter-spacing: -.3px; }
.pgw-wk small { display: block; margin-top: 2px; font-size: 13px; line-height: 18px; color: #7d7c85; font-variant-numeric: tabular-nums; }
.pgw-body { padding-top: 12px; touch-action: pan-y; }
.pgw-v .pg5-wv { margin-top: 0; }
.pgw-v .pg5-ws { font-size: 14.5px; color: #5f5e66; }
.pgw-vs { margin-top: 12px; padding: 0 11px; }
/* плитка веса — на месте кольца: число по линии среднего и линия взвешиваний недели */
.pgw-wc .pgw-wd { width: 100%; max-width: 84px; height: 60px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.pgw-wd b { font-size: 15px; font-weight: 600; letter-spacing: -.3px; font-variant-numeric: tabular-nums; }
.pgw-wd .pg5-sp { margin-top: 0; height: 22px; }
.pgw-tiles .pg5-rg:active { background: none; }
/* «Что получилось» — зелёные плитки, как «Сила»; «Что подтянуть» — янтарные, как предупреждение разбора */
.pgw-l .hm-goal__h { margin-bottom: 2px; }
.pgw-l .hm-mb small { line-height: 1.35; }
.pgw-g .hm-mic { color: #5c7a15; background: rgba(163, 213, 70, .16); }
.pgw-x .hm-mic { color: var(--warn, #a9691f); background: var(--warn-bg, #fbe9d6); }
.pgw-go { flex: 0 0 auto; display: grid; place-items: center; width: 16px; height: 16px; color: #b6b5bd; }
.pgw-go svg { width: 16px; height: 16px; }
.pgw-f { cursor: default; }
.pgw-f[role="button"] { cursor: pointer; }
.pgw-f .pgw-go { position: relative; z-index: 1; color: rgba(255, 255, 255, .6); }
/* «Все рекорды · N» — заголовок карточки; список раскрывается на месте, стрелка поворачивается */
.pgw-rec .pg5-h .pg4-chev { transition: transform .3s cubic-bezier(.32, .72, 0, 1); }
.pgw-rec.is-open .pg5-h .pg4-chev { transform: rotate(90deg); }
.pgw-recl { margin-top: 6px; }
/* каркас */
.pg5-skel { display: flex; flex-direction: column; gap: 12px; padding: 16px 16px 0; }
.pg5-skel i { display: block; border-radius: 26px; background: rgba(255, 255, 255, .7); animation: pg5sk 1.4s ease-in-out infinite; }
@keyframes pg5sk { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .pg5-skel i { animation: none; } }

/* ---- src/styles/46-results.css ---- */
/* WS-7 «Прогресс и итоги»: поправки поверх сгенерированного 40-results.css
 * (экран «Итоги программы») и разбор коуча у анализов. */
/* плиток «старт → сейчас» бывает меньше трёх — сетка по их числу */
.rs-big--1{ grid-template-columns: 1fr; }
.rs-big--2{ grid-template-columns: 1fr 1fr; }
.rs-none{ margin-top: 12px; font-size: 14px; line-height: 1.45; color: rgb(110, 110, 115); }
/* нечётное число плиток привычек — последняя во всю ширину */
.rs-grid--odd > div:last-child{ grid-column: 1 / -1; }
/* скелет, пока итоги считаются */
.rs-skel{ padding: 20px 18px; display: grid; gap: 12px; }
.rs-skel i{ display: block; height: 14px; border-radius: 8px; background: rgb(240, 240, 243); }
.rs-skel i:first-child{ width: 55%; }
.rs-skel i:nth-child(2){ height: 26px; width: 80%; }
/* буква вместо фото автора комментария / слов коуча */
.lb-av{ width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; background: rgb(236, 236, 240); color: rgb(17, 17, 17); font-size: 13px; font-weight: 600; }
.rs-av{ width: 40px; height: 40px; font-size: 16px; }
.lb-when{ padding: 0 18px 14px 58px; margin-top: -8px; font-size: 12.5px; color: rgb(142, 142, 147); }
.gl-ph2 figure{ cursor: pointer; }

/* ---- src/styles/47-cine.css ---- */
/* Кино-сторис «Добро пожаловать» (20-screens/cine.js, welcome.js) — CSS движка
   nav-v2/src/more_cine.js (v3.68) как есть; стили компонентов — в ассете cine-kit.js.
   Холст 392×841 — рамка телефона прототипа — вписывается в окно (fit() в cine.js):
   --cn-safe — высота статус-бара холста (уходит за верхний инсет), --cn-bot — нижний инсет. */
.cn-host{position:fixed;inset:0;z-index:300;background:var(--rf-page);overflow:hidden}
.cn{position:absolute;left:50%;top:0;width:392px;height:841px;transform-origin:50% 0;z-index:300;overflow:hidden;isolation:isolate;font-family:"Geist",-apple-system,BlinkMacSystemFont,sans-serif;color:#111;
 -webkit-font-smoothing:antialiased;background:var(--rf-page);--cn-safe:59px;--cn-bot:0px;opacity:0;transition:opacity .32s ease;user-select:none;-webkit-user-select:none;touch-action:pan-y}
.cn.on{opacity:1}
.cn *{box-sizing:border-box}
.cn__spot{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(80% 40% at 50% 58%,rgba(255,255,255,.95),rgba(255,255,255,0) 72%)}
.cn__stage{position:absolute;inset:0;z-index:1;perspective:1100px;perspective-origin:50% 52%}
.cn__sc{position:absolute;inset:0;transform-style:preserve-3d;display:none}
.cn__k{position:absolute;left:0;top:0;transform-origin:50% 50%;backface-visibility:hidden}
.cn__k>:first-child{box-shadow:0 26px 60px -26px rgba(34,24,40,.34),0 8px 20px -10px rgba(34,24,40,.14)}
.cn__scrim{position:absolute;left:0;right:0;bottom:0;height:calc(170px + var(--cn-bot));z-index:3;pointer-events:none;background:linear-gradient(to bottom,rgba(var(--rf-page-rgb), 0),var(--rf-page) 58%)}
.cn__h{position:absolute;left:24px;right:24px;top:calc(var(--cn-safe) + 57px);z-index:4;pointer-events:none}
.cn__t{margin:0;padding:0;font-size:30px;line-height:1.1;font-weight:600;letter-spacing:-.028em;text-wrap:balance;color:#111}
.cn__t .cn__e{font-style:normal;color:#8e8e93}
.cn__p{margin:12px 0 0;font-size:15.5px;line-height:1.47;color:#6e6e73;text-wrap:pretty;letter-spacing:-.005em}
.cn__m{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .02em .1em;margin:0 -.02em -.1em}
.cn__w{display:inline-block;will-change:auto}
.cn__bars{position:absolute;top:calc(var(--cn-safe) + 9px);left:22px;right:22px;display:flex;gap:4px;z-index:6}
.cn__bars i{flex:1;height:3px;border-radius:2px;background:#e2e2e7;overflow:hidden}
.cn__bars u{display:block;height:100%;background:#111;transform-origin:left;transform:scaleX(0)}
.cn__skip{position:absolute;top:calc(var(--cn-safe) + 14px);right:12px;z-index:7;font:inherit;font-size:15px;color:#8e8e93;background:none;border:0;padding:10px;cursor:pointer;transition:opacity .25s}
.cn__skip.off{opacity:0;pointer-events:none}
.cn__cta{position:absolute;left:24px;right:24px;bottom:calc(38px + var(--cn-bot));height:56px;border-radius:999px;border:0;z-index:7;cursor:pointer;background:#111;color:#fff;font:inherit;font-size:16.5px;font-weight:600;letter-spacing:-.015em;box-shadow:0 14px 28px -12px rgba(16,16,20,.34)}
.cn__cta:active{scale:.97}
.cn__tap{position:absolute;top:100px;bottom:calc(110px + var(--cn-bot));z-index:5;border:0;background:none;padding:0}
.cn__tap--l{left:0;width:30%}
.cn__tap--r{right:0;width:70%}
.cn__tc{position:absolute;left:0;top:0;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;z-index:8;pointer-events:none;background:rgba(16,16,20,.14);box-shadow:inset 0 0 0 2px rgba(16,16,20,.3);display:none}
.cn__rp{position:absolute;left:0;top:0;border-radius:50%;z-index:8;pointer-events:none;border:2px solid rgba(16,16,20,.35);display:none}
.cn__toast{position:absolute;left:24px;right:24px;bottom:calc(106px + var(--cn-bot));height:60px;border-radius:30px;background:#141416;color:#fff;align-items:center;gap:12px;padding:0 16px;z-index:9;box-shadow:0 18px 40px -16px rgba(0,0,0,.45);display:none}
.cn__toast i{width:36px;height:36px;border-radius:50%;background:#34c759;display:grid;place-items:center;flex:none}
.cn__toast svg{width:19px;height:19px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.cn__toast b{display:block;font-size:15px;font-weight:600;letter-spacing:-.01em}
.cn__toast small{display:block;font-size:12.5px;color:rgba(255,255,255,.6);margin-top:1px}
.cn-od{display:inline-block;height:1.2em;overflow:hidden;vertical-align:top;line-height:1.2em;font-style:normal;-webkit-mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent)}
.cn-od>i{display:block;font-style:normal}
.cn-od>i>u{display:block;height:1.2em;font-weight:inherit;text-decoration:none}
.cn-sp{display:inline-block;font-style:normal}
/* «Уменьшить движение»: готовые кадры, без плавного проявления */
.cn.cn--still{transition:none}
/* Пометка «Пример» над иллюстрацией (вес, разбор техники): у новой клиентки своих данных ещё нет */
.cn-ex{position:absolute;left:0;top:0;height:26px;padding:0 11px;border-radius:13px;background:#e6e6eb;color:#6e6e73;font-size:13px;font-weight:600;display:flex;align-items:center;z-index:4;white-space:nowrap}
/* Настоящая карточка «Договорённости» (plan.js) в кадре: без отступа сверху и без своих
   переходов/анимаций входа — кадр целиком считает движок (переход отставал бы от кадра) */
.cn .cn__k>.ct{margin:0;opacity:1;transform:none}
.cn .cn__k>.ct,.cn .cn__k>.ct *{transition:none!important;animation:none!important}
/* Сцена-выбор (scene.pick, 20-screens/meal-mode.js): тапы «дальше/назад» отключены, чтобы нажимались карточки; кнопка внизу приглушена, пока не выбрали */
.cn.is-pick .cn__tap{pointer-events:none}
.cn__cta[disabled]{background:#d8d8dd;color:#8e8e93;box-shadow:none;cursor:default}

/* ---- src/styles/47-diary-game.css ---- */
/* СГЕНЕРИРОВАНО design-preview/miniapp-v3-dev/tools/extract_css.js из прототипа nav-v2
   (состояния: diary_game.js). Правила взяты в порядке каскада прототипа; не правьте
   руками — поправка поверх живёт в файлах стилей с бОльшим номером. 
   Постобработка (PR «Дневник с баллами»): шортхенды animation с var() восстановлены из
   исходника прототипа (CSSOM их теряет), @keyframes — с префиксом dg-, экраны sub-dg-* → dg-*. */
:where(.dg-scr,.dg-sheet) .body{ flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0px; padding: 0px 18px; }
:where(.dg-scr,.dg-sheet) .stack{ display: flex; flex-direction: column; gap: 12px; }
.is-in .stack > *,.is-in .ob > *{ animation: dg-cardIn .6s var(--ease) both; animation-delay: calc(var(--k,0)*.07s); }
:where(.dg-scr,.dg-sheet) .foot{ flex: 0 0 auto; margin-top: auto; padding: 16px 18px 30px; }
.btn.cheat{ background: var(--cheat); box-shadow: rgba(155, 109, 214, 0.35) 0px 16px 32px; }
:where(.dg-scr,.dg-sheet) .btn2{ display: flex; gap: 10px; }
:where(.dg-scr,.dg-sheet) .btn2 .btn{ flex: 1 1 auto; }
:where(.dg-scr,.dg-sheet) .btn2 .btn.ghost{ flex: 0 0 132px; }
:where(.dg-scr,.dg-sheet) .title{ font-size: 14.5px; font-weight: 600; letter-spacing: -0.3px; padding: 6px 6px 0px; }
:where(.dg-scr,.dg-sheet) .title span{ color: rgb(163, 162, 170); font-weight: 500; }
:where(.dg-scr,.dg-sheet) .hint{ font-size: 11.5px; color: rgb(163, 162, 170); line-height: 1.5; padding: 2px 6px; }
:where(.dg-scr,.dg-sheet) .list{ background: rgb(255, 255, 255); border-radius: 30px; box-shadow: var(--card-sh); overflow: hidden; }
:where(.dg-scr,.dg-sheet) .li{ display: flex; align-items: center; gap: 14px; padding: 15px 20px; }
:where(.dg-scr,.dg-sheet) .li + .li{ border-top: 1px solid var(--line); }
.li__m{ font-size: 11.5px; color: rgb(150, 149, 157); margin-top: 4px; font-variant-numeric: tabular-nums; }
.li__k.flat{ color: rgb(163, 162, 170); }
.is-in .list .li{ animation: dg-rowIn .55s var(--ease) both; animation-delay: calc(.35s + var(--i,0)*.1s); }
@keyframes dg-kbOn { 
  0% { background: rgb(228, 228, 231); transform: scaleY(0.6); }
  100% { background: var(--prot); transform: scaleY(1); }
}
.ring.q0{ --arc: #c9c8ce; }
.score{ border-radius: 30px; padding: 18px 20px 16px; background: radial-gradient(88% 130% at 6% 0%, rgb(236, 236, 240) 0%, rgba(236, 236, 240, 0) 56%), radial-gradient(96% 140% at 100% 100%, rgb(210, 229, 178) 0%, rgba(210, 229, 178, 0) 58%), linear-gradient(140deg, rgb(247, 247, 248) 0%, rgb(244, 246, 240) 100%); box-shadow: var(--card-sh); }
.score__h{ display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.score__t{ font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(30, 24, 34, 0.42); }
.score__l{ font-size: 12px; color: rgb(95, 94, 102); margin-top: 6px; line-height: 1.4; max-width: 210px; }
.score__tg{ display: flex; align-items: center; justify-content: space-between; width: 100%; border: 0px; background: transparent; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--ink); padding: 12px 0px 0px; cursor: pointer; text-align: left; }
.score__tg .chev{ transition: transform .3s var(--ease); }
.score__tg .chev svg{ color: var(--ink) !important; }
.score__more{ display: grid; grid-template-rows: 0fr; overflow: hidden; transition: grid-template-rows .5s var(--ease); }
.score__more > div{ min-height: 0px; }
.score__more .score__l{ margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(16, 16, 20, 0.08); }
.score__w.q2{ color: rgb(154, 122, 0); }
.score__w.q1{ color: var(--warn); }
.score__q{ display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(16, 16, 20, 0.08); color: rgb(95, 94, 102); font-size: 11px; font-weight: 600; margin-left: 6px; vertical-align: -3px; letter-spacing: 0px; }
.sgrid{ display: grid; grid-template-columns: 1fr 40px 40px 40px 42px; gap: 7px 4px; align-items: center; margin-top: 14px; }
.sgrid__h,.sg{ display: contents; }
.sgrid__h span{ font-size: 10px; color: rgb(139, 138, 146); text-align: center; letter-spacing: 0.02em; padding-bottom: 2px; white-space: nowrap; }
.sgrid__h span:last-child{ text-align: right; }
.sg__n{ font-size: 13px; color: rgb(63, 62, 70); }
.sg.dim .sg__n{ color: rgb(163, 162, 170); }
.sg em{ font-style: normal; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; justify-self: end; display: inline-grid; place-items: center; min-width: 30px; height: 24px; border-radius: 100px; padding: 0px 8px; background: rgb(255, 255, 255); color: var(--ink); box-shadow: rgba(16, 16, 20, 0.06) 0px 0px 0px 1px inset; transform: scale(0.6); opacity: 0; }
.sg em.p3{ background: var(--ok-bg); color: var(--ok); box-shadow: none; }
.sg em.p2{ background: rgb(255, 241, 191); color: rgb(125, 98, 0); box-shadow: none; }
.sg em.p0{ background: rgb(241, 241, 243); color: rgb(182, 181, 189); box-shadow: none; }
.is-in .sg em{ animation: dg-mkIn .5s var(--spring) both; animation-delay: calc(.55s + var(--i,0)*.07s); }
.sg--day .sg__n{ grid-column: 1 / 4; }
.tk{ width: 24px; height: 24px; border-radius: 50%; margin: 0px auto; display: grid; place-items: center; transform: scale(0.4); opacity: 0; font-style: normal; }
.tk svg{ width: 12px; height: 12px; }
.tk.ok{ background: var(--ok-bg); color: var(--ok); }
.tk.no{ background: rgba(16, 16, 20, 0.06); color: rgb(182, 181, 189); }
.tk.warn{ background: var(--warn-bg); color: var(--warn); }
.tk.pend{ background: rgba(16, 16, 20, 0.06); color: rgb(182, 181, 189); font-size: 11px; font-weight: 600; }
.tk.wide{ grid-column: 2 / 5; width: auto; justify-self: center; border-radius: 100px; padding: 0px 10px; font-size: 10.5px; font-weight: 600; color: var(--cheat-ink); background: var(--cheat-bg); display: inline-flex; align-items: center; gap: 5px; }
.tk.wide svg{ width: 10px; height: 10px; }
.is-in .tk{ animation: dg-mkIn .5s var(--spring) both; animation-delay: calc(.25s + var(--i,0)*.07s); }
@keyframes dg-draw { 
  100% { stroke-dashoffset: 0; }
}
.is-in .tk.ok{ animation: dg-mkIn .5s var(--spring) both,dg-halo .7s ease-out both; animation-delay: calc(.25s + var(--i,0)*.07s),calc(.45s + var(--i,0)*.07s); }
@keyframes dg-halo { 
  0% { box-shadow: rgba(163, 213, 70, 0.6) 0px 0px 0px 0px; }
  100% { box-shadow: rgba(163, 213, 70, 0) 0px 0px 0px 10px; }
}
@keyframes dg-flame { 
  0%, 100% { transform: scale(1) rotate(-2deg); }
  50% { transform: scale(1.12) rotate(2deg); }
}
.mk.warn{ color: var(--warn); background: var(--warn-bg); }
.mk.cheat{ color: var(--cheat-ink); background: var(--cheat-bg); }
@keyframes dg-mkIn { 
  100% { transform: scale(1); opacity: 1; }
}
.pscore.cheat{ color: var(--cheat); }
:where(.dg-scr,.dg-sheet) .star{ position: absolute; right: -4px; top: -4px; width: 22px; height: 22px; border-radius: 50%; background: var(--cheat); color: rgb(255, 255, 255); display: grid; place-items: center; box-shadow: rgba(155, 109, 214, 0.4) 0px 4px 10px; }
:where(.dg-scr,.dg-sheet) .star svg{ width: 12px; height: 12px; }
@keyframes dg-emIn { 
  100% { opacity: 1; transform: none; }
}
.sheet__t{ font-size: 21px; font-weight: 600; letter-spacing: -0.7px; line-height: 1.2; }
.sheet__s{ font-size: 13px; color: var(--mut2); line-height: 1.5; margin-top: 8px; }
.sheet__row{ display: flex; align-items: center; gap: 14px; margin-top: 16px; padding: 14px 16px; border-radius: 22px; background: rgb(247, 246, 249); }
.sheet__row .dish{ width: 48px; height: 48px; font-size: 22px; }
:where(.dg-scr,.dg-sheet) .budget{ display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding: 14px 16px; border-radius: 22px; background: var(--cheat-bg); color: var(--cheat-ink); }
:where(.dg-scr,.dg-sheet) .budget b{ font-weight: 600; }
:where(.dg-scr,.dg-sheet) .budget small{ display: block; font-size: 11.5px; opacity: 0.75; margin-top: 3px; }
.budget__pips{ display: flex; gap: 5px; }
.budget__pips i{ width: 14px; height: 14px; border-radius: 50%; background: rgb(255, 255, 255); display: grid; place-items: center; color: var(--cheat); }
.budget__pips i svg{ width: 9px; height: 9px; }
.budget__pips i.used{ background: var(--cheat); color: rgb(255, 255, 255); }
:where(.dg-scr,.dg-sheet) .seg{ display: flex; background: rgb(241, 241, 243); border-radius: 100px; padding: 4px; margin-top: 18px; }
:where(.dg-scr,.dg-sheet) .seg button{ flex: 1 1 0px; height: 38px; border: 0px; border-radius: 100px; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--mut2); background: transparent; cursor: pointer; transition: 0.2s; }
:where(.dg-scr,.dg-sheet) .seg button.on{ background: rgb(255, 255, 255); color: var(--ink); box-shadow: rgba(20, 16, 26, 0.08) 0px 4px 12px; }
:where(.dg-scr,.dg-sheet) .stepper{ display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 22px; }
:where(.dg-scr,.dg-sheet) .stepper button{ width: 52px; height: 52px; border-radius: 50%; border: 0px; background: rgb(241, 241, 243); font-size: 26px; font-weight: 500; color: var(--ink); cursor: pointer; display: grid; place-items: center; transition: transform 0.12s, background 0.15s; }
:where(.dg-scr,.dg-sheet) .stepper button:active{ transform: scale(0.92); }
:where(.dg-scr,.dg-sheet) .stepper button:hover{ background: rgb(230, 230, 234); }
.stepper__n{ font-size: 64px; font-weight: 600; letter-spacing: -3px; line-height: 1; font-variant-numeric: tabular-nums; min-width: 74px; text-align: center; transition: transform 0.12s; }
.stepper__l{ text-align: center; font-size: 13.5px; color: var(--mut2); margin-top: 10px; }
.stepper__l b{ color: var(--ink); font-weight: 600; }
:where(.dg-scr,.dg-sheet) .ruleset{ display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
:where(.dg-scr,.dg-sheet) .ruleset div{ display: flex; gap: 10px; font-size: 12.5px; color: var(--mut2); line-height: 1.45; }
:where(.dg-scr,.dg-sheet) .ruleset i{ flex: 0 0 auto; width: 20px; height: 20px; border-radius: 7px; background: var(--cheat-bg); color: var(--cheat); display: grid; place-items: center; margin-top: 1px; }
:where(.dg-scr,.dg-sheet) .ruleset i svg{ width: 11px; height: 11px; }
.wsum{ display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 4px 6px 0px; }
.wsum__k{ font-size: 56px; font-weight: 600; letter-spacing: -2.8px; line-height: 0.9; font-variant-numeric: tabular-nums; }
.wsum__k small{ font-size: 15px; font-weight: 500; letter-spacing: 0px; color: rgb(163, 162, 170); margin-left: 8px; white-space: nowrap; }
.wsum__r{ text-align: right; padding-bottom: 6px; }
.wsum__d{ display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: rgb(47, 125, 50); white-space: nowrap; }
.wsum__d svg{ width: 12px; height: 12px; }
.wsum__s{ font-size: 11.5px; color: rgb(154, 153, 161); margin-top: 5px; line-height: 1.35; max-width: 170px; margin-left: auto; }
.wgrid{ background: rgb(255, 255, 255); border-radius: 30px; padding: 16px 18px 14px; box-shadow: var(--card-sh); }
.wgrid__h{ display: grid; grid-template-columns: 38px repeat(3, 1fr) 46px; gap: 8px; font-size: 10.5px; color: rgb(163, 162, 170); text-align: center; padding-bottom: 8px; }
.wgrid__h span:first-child{ text-align: left; }
.wgrid__h span:last-child{ text-align: right; }
.wrow{ display: grid; grid-template-columns: 38px repeat(3, 1fr) 46px; gap: 8px; align-items: center; padding: 4px 0px; }
.wd{ font-size: 12px; font-weight: 500; color: var(--mut2); }
.wrow.today .wd{ color: var(--ink); font-weight: 600; }
.wc{ position: relative; height: 34px; border-radius: 12px; background: var(--s0); opacity: 0; display: grid; place-items: center; transform: scale(0.85); filter: saturate(0); }
.wc.s3{ background: var(--s3); }
.wc.s2{ background: var(--s2); }
.wc.s1{ background: var(--s1); }
.wc.cheat{ background: var(--cheat); }
.wc.cheat svg{ width: 14px; height: 14px; color: rgb(255, 255, 255); }
.wc.pend{ background: transparent; box-shadow: rgb(228, 228, 231) 0px 0px 0px 1.5px inset; }
.wc.miss{ background: repeating-linear-gradient(135deg, rgb(241, 241, 243) 0px, rgb(241, 241, 243) 4px, rgb(230, 229, 234) 4px, rgb(230, 229, 234) 8px); }
.is-in .wc{ animation: dg-cellIn .6s var(--spring) both; animation-delay: calc(.2s + var(--i,0)*.045s); }
.is-in .wc.cheat svg{ animation: dg-spinIn .7s var(--spring) both; animation-delay: calc(.3s + var(--i,0)*.045s); }
.wk{ font-size: 13px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.wk small{ color: rgb(163, 162, 170); font-weight: 500; }
:where(.dg-scr,.dg-sheet) .legend{ display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 10.5px; color: rgb(139, 138, 146); }
:where(.dg-scr,.dg-sheet) .legend i{ display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: -1px; margin-right: 5px; }
:where(.dg-scr,.dg-sheet) .band{ display: flex; align-items: center; gap: 14px; background: rgb(255, 255, 255); border-radius: 26px; padding: 14px 16px; box-shadow: rgba(20, 16, 26, 0.05) 0px 10px 24px; }
:where(.dg-scr,.dg-sheet) .dark{ border-radius: 30px; padding: 22px; background: linear-gradient(150deg, rgb(23, 22, 27) 0%, rgb(37, 34, 44) 100%); color: rgb(255, 255, 255); box-shadow: rgba(20, 16, 26, 0.22) 0px 18px 40px; }
.dark__l{ font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); }
.dark__t{ display: flex; align-items: baseline; gap: 10px; margin-top: 8px; }
.dark__t b{ font-size: 34px; font-weight: 600; letter-spacing: -1.4px; font-variant-numeric: tabular-nums; }
.dark__t > span{ font-size: 13px; color: rgba(255, 255, 255, 0.55); }
.dark__row{ display: flex; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: 12px; color: rgba(255, 255, 255, 0.55); }
.dark__row b{ display: block; font-size: 16px; color: rgb(255, 255, 255); font-weight: 600; margin-top: 3px; font-variant-numeric: tabular-nums; }
.ladder{ display: flex; margin-top: 18px; position: relative; }
.ladder::before{ content: ""; position: absolute; left: 14px; right: 14px; top: 13px; height: 2px; background: rgba(255, 255, 255, 0.14); }
.lnode{ flex: 1 1 0px; position: relative; text-align: center; }
.lnode i{ position: relative; z-index: 1; display: block; width: 28px; height: 28px; margin: 0px auto; border-radius: 50%; background: rgb(44, 42, 51); box-shadow: rgba(255, 255, 255, 0.14) 0px 0px 0px 2px inset; }
.lnode.done i{ background: var(--prot); box-shadow: none; }
.lnode.done i::after{ content: ""; position: absolute; inset: 9px; border-radius: 50%; background: rgb(23, 22, 27); }
.lnode.now i{ background: rgb(255, 255, 255); box-shadow: rgba(255, 255, 255, 0.18) 0px 0px 0px 6px; }
.is-in .lnode.now i{ animation: 1.8s ease-in-out 0s infinite normal none running dg-pulse; }
@keyframes dg-pulse { 
  0%, 100% { box-shadow: rgba(255, 255, 255, 0.18) 0px 0px 0px 6px; }
  50% { box-shadow: rgba(255, 255, 255, 0.08) 0px 0px 0px 10px; }
}
.lnode span{ display: block; font-size: 10px; margin-top: 8px; color: rgba(255, 255, 255, 0.5); }
.lnode.now span{ color: rgb(255, 255, 255); font-weight: 600; }
.lnode.done span{ color: rgba(255, 255, 255, 0.75); }
:where(.dg-scr,.dg-sheet) .ul{ display: flex; align-items: center; gap: 12px; background: rgb(255, 255, 255); border-radius: 22px; padding: 12px 14px; box-shadow: rgba(20, 16, 26, 0.05) 0px 10px 24px; }
:where(.dg-scr,.dg-sheet) .unlock{ display: flex; flex-direction: column; gap: 8px; }
.ul__ic{ width: 34px; height: 34px; border-radius: 12px; flex: 0 0 auto; display: grid; place-items: center; background: rgb(241, 241, 243); color: var(--ink); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ul__ic.cheat{ background: var(--cheat-bg); color: var(--cheat); }
.ul__ic svg{ width: 16px; height: 16px; }
.ul__b{ flex: 1 1 auto; min-width: 0px; }
.ul__t{ font-size: 13.5px; font-weight: 600; letter-spacing: -0.2px; }
.ul__s{ font-size: 11.5px; color: var(--mut); margin-top: 2px; line-height: 1.4; }
.achv{ position: absolute; inset: 0px; z-index: 8; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 28px; background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); opacity: 0; transition: opacity 0.5s; }
.is-in .achv{ opacity: 1; }
.achv canvas{ position: absolute; inset: 0px; width: 100%; height: 100%; pointer-events: none; }
.achv__glow{ position: absolute; left: 50%; top: 50%; width: 420px; height: 420px; margin: -210px 0px 0px -210px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 210, 120, 0.55) 0%, rgba(255, 210, 120, 0) 60%); opacity: 0; }
.is-in .achv__glow{ animation: 2.6s ease-in-out 0.3s infinite normal none running dg-glow; }
@keyframes dg-glow { 
  0%, 100% { opacity: 0.35; transform: scale(0.9); }
  50% { opacity: 0.8; transform: scale(1.08); }
}
.achv__card{ position: relative; z-index: 1; width: 100%; background: rgb(255, 255, 255); border-radius: 34px; padding: 30px 24px 24px; text-align: center; box-shadow: rgba(20, 16, 26, 0.22) 0px 30px 70px; transform: scale(0.6) translateY(30px); opacity: 0; }
.is-in .achv__card{ animation: dg-achIn .8s var(--spring) both; animation-delay: 0.25s; }
@keyframes dg-achIn { 
  100% { transform: none; opacity: 1; }
}
.achv__badge{ position: relative; width: 112px; height: 112px; margin: 0px auto; border-radius: 50%; display: grid; place-items: center; font-size: 52px; overflow: hidden; background: radial-gradient(70% 70% at 35% 30%, rgb(255, 245, 214) 0%, rgb(255, 217, 138) 60%, rgb(242, 179, 74) 100%); box-shadow: rgba(242, 179, 74, 0.4) 0px 18px 40px, rgba(150, 90, 10, 0.18) 0px -6px 14px inset; }
.achv__badge::after{ content: ""; position: absolute; inset: 0px; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.85) 50%, transparent 65%); transform: translateX(-130%); }
.is-in .achv__badge{ animation: dg-badge 1.1s var(--spring) both; animation-delay: 0.45s; }
.is-in .achv__badge::after{ animation: 1.1s ease-out 1.3s 1 normal both running dg-shine; }
@keyframes dg-badge { 
  0% { transform: scale(0.2) rotate(-30deg); }
  60% { transform: scale(1.12) rotate(6deg); }
  100% { transform: scale(1) rotate(0deg); }
}
@keyframes dg-shine { 
  100% { transform: translateX(130%); }
}
.achv__l{ font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(163, 162, 170); margin-top: 22px; }
.achv__t{ font-size: 24px; font-weight: 600; letter-spacing: -0.9px; line-height: 1.15; margin-top: 8px; }
.achv__s{ font-size: 13px; color: var(--mut2); line-height: 1.5; margin-top: 10px; }
.achv__pts{ display: inline-flex; align-items: baseline; gap: 4px; margin-top: 18px; font-size: 30px; font-weight: 700; letter-spacing: -1.2px; color: var(--ok); opacity: 0; }
.achv__pts small{ font-size: 13px; font-weight: 500; color: var(--mut); letter-spacing: 0px; }
.is-in .achv__pts{ animation: dg-emIn .5s var(--ease) both; animation-delay: 1.15s; }
.achv .btn{ margin-top: 20px; height: 52px; font-size: 15px; }
:where(.dg-scr,.dg-sheet) .achlist{ display: flex; flex-direction: column; gap: 8px; }
:where(.dg-scr,.dg-sheet) .al{ display: flex; align-items: center; gap: 12px; background: rgb(255, 255, 255); border-radius: 22px; padding: 11px 14px; box-shadow: rgba(20, 16, 26, 0.05) 0px 10px 24px; }
.al__ic{ width: 40px; height: 40px; border-radius: 14px; flex: 0 0 auto; display: grid; place-items: center; font-size: 20px; background: linear-gradient(150deg, rgb(255, 245, 214), rgb(255, 217, 138)); }
:where(.dg-scr,.dg-sheet) .al.lock .al__ic{ background: rgb(241, 241, 243); filter: grayscale(1); opacity: 0.55; }
.al__b{ flex: 1 1 auto; min-width: 0px; }
.al__t{ font-size: 13.5px; font-weight: 600; letter-spacing: -0.2px; }
:where(.dg-scr,.dg-sheet) .al.lock .al__t{ color: rgb(163, 162, 170); }
.al__s{ font-size: 11.5px; color: var(--mut); margin-top: 2px; }
:where(.dg-scr,.dg-sheet) .al em{ font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--ok); white-space: nowrap; }
:where(.dg-scr,.dg-sheet) .al.lock em{ color: rgb(182, 181, 189); }
@keyframes dg-grow { 
  100% { transform: none; }
}
.im-p-omlet{ background-image: url("/static/miniapp-v3/assets/x-2da3dc3d.2da3dc3d.webp"); }
.im-p-salat2{ background-image: url("/static/miniapp-v3/assets/x-5fec1b18.5fec1b18.webp"); }
.im-p-losos3{ background-image: url("/static/miniapp-v3/assets/x-61515486.61515486.webp"); }
.im-p-salat2-wide{ background-image: url("/static/miniapp-v3/assets/x-7b9e952f.7b9e952f.webp"); }
.im-r-pizza-wide{ background-image: url("/static/miniapp-v3/assets/x-d9f3ac31.d9f3ac31.webp"); }
.ob{ flex: 1 1 auto; display: flex; flex-direction: column; padding: 6px 22px 0px; }
.ob__skip{ display: flex; justify-content: flex-end; font-size: 13px; color: rgb(163, 162, 170); padding: 0px 2px 10px; }
.ob__art{ position: relative; height: 300px; border-radius: 34px; overflow: hidden; display: grid; place-items: center; background: radial-gradient(88% 130% at 6% 0%, rgb(236, 236, 240) 0%, rgba(236, 236, 240, 0) 56%), radial-gradient(96% 140% at 100% 100%, rgb(210, 229, 178) 0%, rgba(210, 229, 178, 0) 58%), linear-gradient(140deg, rgb(247, 247, 248) 0%, rgb(244, 246, 240) 100%); box-shadow: var(--card-sh); }
.ob__t{ font-size: 24px; font-weight: 600; letter-spacing: -0.9px; line-height: 1.15; margin-top: 22px; text-align: center; }
.ob__s{ font-size: 14px; color: var(--mut2); line-height: 1.55; margin-top: 10px; text-align: center; padding: 0px 6px; }
.ob__dots{ display: flex; gap: 6px; justify-content: center; margin-top: 20px; }
.ob__dots i{ width: 6px; height: 6px; border-radius: 50%; background: rgb(228, 228, 231); }
.ob__dots i.on{ width: 18px; background: rgb(16, 16, 20); }
.ob-plate{ position: relative; width: 170px; height: 170px; border-radius: 50%; background-size: cover; background-position: center center; box-shadow: rgba(50, 70, 30, 0.22) 0px 22px 44px, rgba(20, 16, 26, 0.05) 0px 0px 0px 1px inset; transform: scale(0.6); opacity: 0; }
.is-in .ob-plate{ animation: dg-plateIn .8s var(--spring) both,dg-spinSlow 70s linear 1s infinite; animation-delay: 0.15s; }
@keyframes dg-plateIn { 
  100% { transform: none; opacity: 1; }
}
.ob-badge{ position: absolute; display: inline-flex; align-items: center; gap: 8px; background: rgb(255, 255, 255); border-radius: 100px; padding: 6px 14px 6px 6px; font-size: 13px; font-weight: 600; box-shadow: rgba(20, 16, 26, 0.14) 0px 12px 28px; transform: scale(0.4); opacity: 0; }
.ob-badge .ck{ width: 28px; height: 28px; border-radius: 50%; background: var(--ok-bg); color: var(--ok); display: grid; place-items: center; }
.ob-badge .ck svg{ width: 14px; height: 14px; }
.is-in .ob-badge{ animation: dg-dropIn .7s var(--spring) both,dg-floaty 4s ease-in-out infinite; animation-delay: calc(.7s + var(--i,0)*.45s); }
.is-in .ob-badge .ck svg path.dr{ animation-duration: 0.4s; animation-timing-function: ease-out; animation-iteration-count: 1; animation-direction: normal; animation-fill-mode: both; animation-play-state: running; animation-name: dg-draw; animation-timeline: auto; animation-range: normal; animation-delay: calc(.9s + var(--i,0)*.45s); }
.ob-pizza{ position: relative; width: 64px; height: 64px; margin: 14px auto 0px; border-radius: 50%; box-shadow: rgba(120, 70, 20, 0.2) 0px 10px 20px; }
.ob-pizza .star{ width: 26px; height: 26px; right: -6px; top: -6px; transform: scale(0); }
.is-in .ob-pizza .star{ animation: dg-starDrop .7s var(--spring) both 3.1s; animation-delay: 1.1s; }
.ob-pizza .star svg{ width: 14px; height: 14px; }
.ob-flame{ width: 64px; height: 64px; margin: 14px auto 0px; border-radius: 22px; background: rgb(255, 240, 224); color: rgb(255, 122, 26); display: grid; place-items: center; }
.ob-flame svg{ width: 34px; height: 34px; transform-origin: 50% 90%; }
.is-in .ob-flame svg{ animation: 1.6s ease-in-out 0s infinite normal none running dg-flame; }
.ob-days{ display: flex; gap: 4px; justify-content: center; margin-top: 12px; }
.ob-days i{ width: 20px; height: 20px; border-radius: 50%; background: rgb(241, 241, 243); display: grid; place-items: center; font-style: normal; font-size: 9px; font-weight: 600; color: rgb(163, 162, 170); transform: scale(0.5); opacity: 0; }
.ob-days i.on{ background: rgb(255, 122, 26); color: rgb(255, 255, 255); }
.ob-days i.frz{ background: rgb(227, 240, 255); color: rgb(46, 102, 194); box-shadow: rgb(90, 160, 242) 0px 0px 0px 1.5px inset; }
.is-in .ob-days i{ animation: dg-coinIn .55s var(--spring) both; animation-delay: calc(.8s + var(--i,0)*.22s); }
.ob-badge b{ font-weight: 700; color: var(--ok); margin-left: 2px; }
.ob-total{ position: absolute; right: 18px; bottom: 16px; background: rgb(16, 16, 20); color: rgb(255, 255, 255); border-radius: 100px; padding: 9px 15px; font-size: 14px; font-weight: 600; transform: scale(0.4); opacity: 0; font-variant-numeric: tabular-nums; }
.is-in .ob-total{ animation: dg-dropIn .7s var(--spring) both,dg-floaty 4s ease-in-out infinite; animation-delay: 2.2s; }
.ob-col{ display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; }
.ob-plates{ display: flex; gap: 16px; align-items: center; justify-content: center; }
.ob-pl{ position: relative; width: 64px; height: 64px; border-radius: 50%; background-size: cover; background-position: center center; box-shadow: rgba(30, 24, 40, 0.18) 0px 12px 24px; transform: translateY(18px); opacity: 0; }
.ob-pl b{ position: absolute; right: -7px; bottom: -7px; width: 26px; height: 26px; border-radius: 50%; background: rgb(255, 255, 255); color: var(--ink); display: grid; place-items: center; font-size: 12px; font-weight: 700; box-shadow: rgba(20, 16, 26, 0.15) 0px 4px 10px; }
.is-in .ob-pl{ animation: dg-flyIn .75s var(--spring) both; animation-delay: calc(.3s + var(--i,0)*.3s); }
.ob-plus1{ display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 12.5px; font-weight: 600; color: var(--ok); background: var(--ok-bg); border-radius: 100px; padding: 6px 12px; opacity: 0; transform: scale(0.6); }
.is-in .ob-plus1{ animation: dg-mkIn .5s var(--spring) both; animation-delay: 1.35s; }
.ob-arrow{ width: 2px; height: 16px; background: rgb(214, 213, 219); margin: 8px 0px; opacity: 0; }
.is-in .ob-arrow{ animation: 0.4s ease 1.6s 1 normal both running dg-emIn; }
.ob .ring{ transition-delay: 1.7s; }
.ob-cheat{ display: flex; align-items: center; gap: 22px; }
.ob-pizza{ position: relative; width: 120px; height: 120px; margin: 0px; border-radius: 50%; background-size: cover; background-position: center center; box-shadow: rgba(120, 70, 20, 0.25) 0px 18px 36px; }
.ob-pizza .star{ width: 34px; height: 34px; right: -4px; top: -4px; transform: scale(0); }
.ob-pizza .star svg{ width: 18px; height: 18px; }
.ob-why{ margin-top: 16px; font-size: 12.5px; color: var(--mut2); text-align: center; max-width: 290px; line-height: 1.45; opacity: 0; }
.is-in .ob-why{ animation: 0.5s ease 1.8s 1 normal both running dg-emIn; }
.ob-rank{ width: 100%; padding: 0px 22px; }
.ob-rank .dark{ padding: 18px 18px 16px; }
.ob-ach{ display: flex; gap: 8px; margin-top: 12px; justify-content: center; flex-wrap: wrap; }
.ob-ach span{ display: inline-flex; align-items: center; gap: 6px; background: rgb(255, 255, 255); border-radius: 100px; padding: 6px 12px 6px 8px; font-size: 12px; font-weight: 600; box-shadow: rgba(20, 16, 26, 0.08) 0px 8px 20px; transform: scale(0.5); opacity: 0; }
.is-in .ob-ach span{ animation: dg-chipIn .55s var(--spring) both,dg-floaty 4s ease-in-out infinite; animation-delay: calc(1.2s + var(--i,0)*.3s); }
.ob__art::before,.ob__art::after{ content: ""; position: absolute; z-index: 0; width: 240px; height: 240px; border-radius: 50%; filter: blur(36px); opacity: 0.8; pointer-events: none; }
.ob__art::before{ left: -70px; top: -50px; background: rgb(230, 230, 234); animation: 9s ease-in-out 0s infinite alternate none running dg-blobA; }
.ob__art::after{ right: -80px; bottom: -70px; background: rgb(203, 230, 168); animation: 11s ease-in-out 0s infinite alternate none running dg-blobB; }
@keyframes dg-blobA { 
  100% { transform: translate(34px, 24px) scale(1.15); }
}
@keyframes dg-blobB { 
  100% { transform: translate(-30px, -22px) scale(1.1); }
}
.ob-col,.ob-rank{ position: relative; z-index: 1; }
.ob-plate{ z-index: 1; }
.ob-badge,.ob-total,.ob-orbit{ z-index: 2; }
.ob-orbit{ position: absolute; left: 50%; top: 50%; width: 250px; height: 250px; margin: -125px 0px 0px -125px; border-radius: 50%; border: 1.5px dashed rgba(16, 16, 20, 0.12); z-index: 0; animation: 40s linear 0s infinite normal none running dg-spin; }
@keyframes dg-spin { 
  100% { transform: rotate(360deg); }
}
.ob-plate{ width: 186px; height: 186px; box-shadow: rgba(50, 40, 30, 0.28) 0px 26px 50px, rgba(255, 255, 255, 0.85) 0px 0px 0px 7px; }
.is-in .ob-plate{ animation: dg-plateIn .8s var(--spring) both,dg-spinSlow 70s linear 1s infinite; }
@keyframes dg-spinSlow { 
  100% { transform: rotate(360deg); }
}
@keyframes dg-dropIn { 
  0% { transform: translateY(-28px) scale(0.5); opacity: 0; }
  100% { transform: none; opacity: 1; }
}
.is-in .ob-badge{ animation: dg-dropIn .7s var(--spring) both,dg-floaty 4s ease-in-out infinite; animation-delay: calc(.7s + var(--i,0)*.45s),calc(1.5s + var(--i,0)*.45s); }
.is-in .ob-badge .ck{ animation-duration: 0.8s; animation-timing-function: ease-out; animation-iteration-count: 1; animation-direction: normal; animation-fill-mode: both; animation-play-state: running; animation-name: dg-halo; animation-timeline: auto; animation-range: normal; animation-delay: calc(.95s + var(--i,0)*.45s); }
.is-in .ob-total{ animation: dg-dropIn .7s var(--spring) both,dg-floaty 4s ease-in-out infinite; animation-delay: 2.3s, 3.2s; }
.is-in .ob-pl{ animation: dg-flyIn .75s var(--spring) both; animation-delay: calc(.3s + var(--i,0)*.55s); }
.ob-pl{ box-shadow: rgba(30, 24, 40, 0.2) 0px 14px 28px, rgba(255, 255, 255, 0.9) 0px 0px 0px 4px; }
.is-in .ob-plus1{ animation-delay: 2s; }
.is-in .ob-arrow{ animation-delay: 2.2s; }
.is-in .ring.steps{ animation: dg-ringSteps 3.4s var(--ease) both .5s; transition: none; }
.ring.steps::before,.ring.steps .ring__cap,.ring.cheatplay::before,.ring.cheatplay .ring__cap{ transition: none; }
@keyframes dg-ringSteps { 
  0%, 12% { --p: 0; --arc: #ffb020; }
  24%, 32% { --p: 30; --arc: #ffb020; }
  44%, 52% { --p: 60; --arc: #ffd75e; }
  64%, 72% { --p: 90; --arc: #a3d546; }
  84%, 100% { --p: 100; --arc: #a3d546; }
}
.is-in .ob-pizza{ animation: dg-pizzaIn .9s var(--spring) both .2s; }
@keyframes dg-pizzaIn { 
  0% { transform: translateX(-46px) rotate(-24deg) scale(0.6); opacity: 0; }
  100% { transform: none; opacity: 1; }
}
.ob-pizza{ box-shadow: rgba(120, 70, 20, 0.28) 0px 20px 40px, rgba(255, 255, 255, 0.85) 0px 0px 0px 6px; }
.is-in .ring.cheatplay{ animation: dg-cheatRing 4.4s var(--ease) both .4s,dg-ringShake .5s ease-in-out 1.9s; transition: none; }
@keyframes dg-cheatRing { 
  0%, 20% { --p: 90; --arc: #a3d546; }
  34%, 60% { --p: 60; --arc: #ffb020; }
  76%, 100% { --p: 90; --arc: #a3d546; }
}
@keyframes dg-ringShake { 
  0%, 100% { transform: none; }
  25% { transform: translateX(-4px); }
  50% { transform: translateX(4px); }
  75% { transform: translateX(-2px); }
}
.nums{ position: relative; display: block; width: 44px; height: 28px; }
.nums b{ position: absolute; inset: 0px; text-align: center; }
.is-in .cheatplay .n9{ animation: 4.4s ease 0.4s 1 normal both running dg-n9; }
.is-in .cheatplay .n6{ animation: 4.4s ease 0.4s 1 normal both running dg-n6; }
@keyframes dg-n9 { 
  0%, 22% { opacity: 1; }
  34%, 64% { opacity: 0; }
  76%, 100% { opacity: 1; }
}
@keyframes dg-n6 { 
  0%, 22% { opacity: 0; }
  34%, 64% { opacity: 1; }
  76%, 100% { opacity: 0; }
}
.is-in .ob-pizza .star{ animation: dg-starDrop .7s var(--spring) both 3.1s; }
@keyframes dg-starDrop { 
  0% { transform: translateY(-90px) scale(0); opacity: 0; }
  60% { transform: translateY(6px) scale(1.15); opacity: 1; }
  100% { transform: none; opacity: 1; }
}
.ob-note{ position: relative; z-index: 1; margin-top: 20px; display: inline-flex; align-items: center; gap: 8px; background: rgb(255, 255, 255); border-radius: 100px; padding: 9px 16px 9px 10px; font-size: 13px; font-weight: 600; box-shadow: rgba(20, 16, 26, 0.12) 0px 12px 28px; opacity: 0; transform: scale(0.6); }
.ob-note .ck{ width: 24px; height: 24px; border-radius: 50%; background: var(--ok-bg); color: var(--ok); display: grid; place-items: center; }
.ob-note .ck svg{ width: 12px; height: 12px; }
.is-in .ob-note{ animation: dg-dropIn .7s var(--spring) both 3.9s; }
.is-in .ob-note .ck svg path.dr{ animation: 0.4s ease-out 4.3s 1 normal both running dg-draw; }
.ob-flame{ position: relative; width: 76px; height: 76px; border-radius: 26px; box-shadow: rgba(255, 122, 26, 0.18) 0px 14px 30px; }
.ob-flame svg{ width: 40px; height: 40px; }
.ob-days{ position: relative; }
.ob-days::before{ content: ""; position: absolute; left: 16px; right: 16px; top: 50%; height: 2px; margin-top: -1px; background: rgb(255, 210, 179); transform: scaleX(0); transform-origin: 0px 50%; z-index: 0; }
.is-in .ob-days::before{ animation: dg-grow 1.2s var(--ease) both .6s; }
.ob-days i{ position: relative; z-index: 1; overflow: hidden; }
.is-in .ob-days i{ animation: dg-coinIn .55s var(--spring) both; animation-delay: calc(.8s + var(--i,0)*.22s); }
.ob-days i.frz::after{ content: ""; position: absolute; inset: 0px; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.9) 50%, transparent 65%); transform: translateX(-130%); }
.is-in .ob-days i.frz::after{ animation: 1.2s ease-out 2.4s 1 normal both running dg-shine; }
.ob .lnode i{ transform: scale(0.6); opacity: 0.5; }
.is-in .ob .lnode i{ animation: dg-nodeIn .5s var(--spring) both; animation-delay: calc(.3s + var(--i,0)*.28s); }
@keyframes dg-nodeIn { 
  100% { transform: none; opacity: 1; }
}
.is-in .ob .lnode.now i{ animation: dg-nodeIn .5s var(--spring) both .6s,dg-pulse 1.8s ease-in-out 1.2s infinite; }
.ladder .light{ position: absolute; top: 8px; left: calc(10% - 6px); width: 12px; height: 12px; border-radius: 50%; background: rgb(255, 255, 255); box-shadow: rgba(255, 255, 255, 0.5) 0px 0px 18px 7px; opacity: 0; z-index: 2; }
.is-in .ladder .light{ animation: dg-travel 1.1s var(--ease) both .35s; }
@keyframes dg-travel { 
  0% { left: calc(10% - 6px); opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { left: calc(30% - 6px); opacity: 0; }
}
.is-in .ob .dark__t b{ animation: dg-nameIn .8s var(--spring) both .9s; }
@keyframes dg-nameIn { 
  0% { transform: scale(0.7); opacity: 0; letter-spacing: 0.25em; }
  100% { transform: none; opacity: 1; letter-spacing: -1.4px; }
}
.is-in .ob-ach span{ animation: dg-chipIn .55s var(--spring) both,dg-floaty 4s ease-in-out infinite; animation-delay: calc(1.4s + var(--i,0)*.3s),calc(2.2s + var(--i,0)*.3s); }
@media (prefers-reduced-motion: reduce){
.mk,.tk,.wc,.achv__card,.achv__pts,.ob-plate,.ob-badge,.ob-days i,.ob-pizza .star,.ob-pl,.ob-note,.ob-total,.ob-ach span,:where(.dg-scr,.dg-sheet) .stack > *,.ob > *{ opacity: 1; transform: none; filter: none; }
}
@keyframes dg-pl4in { 
  100% { opacity: 1; transform: none; }
}
.ptl{ position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 0px 2px; cursor: pointer; }
.ptl__l{ display: flex; align-items: baseline; gap: 5px; white-space: nowrap; min-width: 0px; }
.ptl__n{ display: inline-block; font-size: 13.5px; font-weight: 600; letter-spacing: -0.2px; color: var(--ink); font-variant-numeric: tabular-nums; }
.ptl.pop .ptl__n{ animation: dg-ptlPop .7s var(--spring); }
@keyframes dg-ptlPop { 
  35% { transform: scale(1.22); }
}
.ptl__w{ font-size: 13px; font-weight: 500; color: rgb(139, 138, 146); }
.ptl__r{ display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.ptl__k{ font-size: 12.5px; color: rgb(139, 138, 146); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ptl__k b{ color: var(--ink); font-weight: 600; }
.ptl__k.set{ color: rgb(79, 125, 23); font-weight: 600; animation: dg-popIn .35s var(--spring) both; }
.rf-scr.rku-scr{ padding: 0px; overflow: hidden; }
.rku{ --fg: #fff; --fg2: rgba(255,255,255,.62); --fg3: rgba(255,255,255,.5); --line: rgba(255,255,255,.1); --flash: #fff; --flash-a: .85; --grain: .07; position: absolute; inset: 0px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 64px 26px 30px; text-align: center; overflow: hidden; color: var(--fg); background: radial-gradient(120% 70% at 50% -10%, rgb(43, 40, 52) 0%, rgb(23, 22, 27) 55%, rgb(16, 16, 20) 100%); }
.rku canvas{ position: absolute; inset: 0px; width: 100%; height: 100%; pointer-events: none; z-index: 3; }
.rku__grain{ position: absolute; inset: -20%; z-index: 1; pointer-events: none; opacity: var(--grain); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 160px 160px; animation: 0.6s steps(3) 0s infinite normal none running dg-grain; }
@keyframes dg-grain { 
  0% { transform: translate(0px, 0px); }
  33% { transform: translate(-4%, 3%); }
  66% { transform: translate(3%, -4%); }
  100% { transform: translate(0px, 0px); }
}
.rku__flash{ position: absolute; inset: 0px; z-index: 4; background: var(--flash); opacity: 0; pointer-events: none; }
.is-in .rku__flash{ animation: 0.55s ease-out 1.25s 1 normal both running dg-upFlash; }
@keyframes dg-upFlash { 
  0% { opacity: 0; }
  10% { opacity: var(--flash-a); }
  100% { opacity: 0; }
}
.rku__glow{ position: absolute; left: 50%; top: 38%; width: 560px; height: 560px; margin: -280px 0px 0px -280px; border-radius: 50%; background: radial-gradient(circle, rgba(163, 213, 70, 0.45) 0%, rgba(163, 213, 70, 0) 60%); opacity: 0; filter: blur(8px); pointer-events: none; }
.is-in .rku__glow{ animation: dg-upGlowPre 1.2s ease-in-out both .3s,dg-upGlow .8s var(--ease) both 1.3s,dg-glow 3.2s ease-in-out 2.4s infinite; }
@keyframes dg-upGlowPre { 
  0% { opacity: 0; }
  100% { opacity: 0.18; }
}
@keyframes dg-upGlow { 
  100% { opacity: 0.85; }
}
.rku__l{ position: relative; z-index: 2; font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg3); opacity: 0; }
.is-in .rku__l{ animation: dg-pl4in .6s var(--ease) both .25s; }
.rku__em{ position: relative; z-index: 2; width: 112px; height: 112px; margin-top: 22px; border-radius: 50%; display: grid; place-items: center; color: rgb(16, 16, 20); overflow: hidden; background: radial-gradient(70% 70% at 35% 30%, rgb(233, 245, 201) 0%, rgb(163, 213, 70) 62%, rgb(127, 179, 42) 100%); box-shadow: rgba(163, 213, 70, 0.42) 0px 18px 44px, rgba(60, 90, 10, 0.18) 0px -6px 14px inset; opacity: 0; }
.rku__em svg{ width: 52px; height: 52px; display: block; }
.rku__em::after{ content: ""; position: absolute; inset: 0px; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.85) 50%, transparent 65%); transform: translateX(-130%); }
.is-in .rku__em{ animation: dg-badge 1s var(--spring) both 1.3s,dg-upShow .01s linear both 1.3s; }
.is-in .rku__em::after{ animation: 1s ease-out 2.1s 1 normal both running dg-shine; }
@keyframes dg-upShow { 
  100% { opacity: 1; }
}
.rku__t{ position: relative; z-index: 2; font-size: 60px; font-weight: 700; letter-spacing: -2.4px; line-height: 1; margin-top: 18px; opacity: 0; }
.is-in .rku__t{ animation: dg-upName .85s var(--spring) both 1.35s; }
@keyframes dg-upName { 
  0% { opacity: 0; transform: scale(1.6); letter-spacing: 0.2em; filter: blur(8px); }
  55% { opacity: 1; transform: scale(0.97); letter-spacing: -2.4px; filter: none; }
  100% { opacity: 1; transform: none; letter-spacing: -2.4px; filter: none; }
}
.rku__s{ position: relative; z-index: 2; font-size: 14px; color: var(--fg2); margin-top: 12px; opacity: 0; font-variant-numeric: tabular-nums; }
.rku__s b{ color: var(--fg); font-weight: 600; }
.is-in .rku__s{ animation: dg-pl4in .6s var(--ease) both 1.9s; }
.rku .ladder{ position: relative; width: 100%; margin: 0px; }
.rku .lnode span{ font-size: 10px; letter-spacing: -0.1px; }
.rku .lnode i{ transform: scale(0.6); opacity: 0.5; }
.is-in .rku .lnode i{ animation: dg-nodeIn .5s var(--spring) both; animation-delay: calc(.2s + var(--i,0)*.1s); }
.is-in .rku .lnode.now i{ animation: dg-nodeIn .55s var(--spring) both 1.3s,dg-pulse 1.8s ease-in-out 1.9s infinite; }
.rku__light{ position: absolute; top: 8px; left: var(--from); width: 12px; height: 12px; border-radius: 50%; background: rgb(255, 255, 255); box-shadow: rgba(255, 255, 255, 0.5) 0px 0px 18px 7px; opacity: 0; z-index: 2; }
.is-in .rku__light{ animation: 1.05s cubic-bezier(0.4, 0, 0.2, 1) 0.35s 1 normal both running dg-upTravel; }
@keyframes dg-upTravel { 
  0% { left: var(--from); opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { left: var(--to); opacity: 0; }
}
.rku__row{ position: relative; z-index: 2; display: flex; justify-content: space-between; gap: 12px; width: 100%; margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 12px; color: var(--fg3); text-align: left; opacity: 0; }
.rku__row b{ display: block; font-size: 16px; color: var(--fg); font-weight: 600; margin-top: 3px; font-variant-numeric: tabular-nums; }
.is-in .rku__row{ animation: dg-pl4in .6s var(--ease) both 2.15s; }
.rku__btns{ position: relative; z-index: 2; display: flex; flex-direction: column; gap: 10px; width: 100%; margin-top: auto; padding-top: 22px; opacity: 0; }
.is-in .rku__btns{ animation: dg-pl4in .6s var(--ease) both 2.35s; }
.rku .btn{ margin: 0px; height: 54px; font-size: 15px; background: rgb(255, 255, 255); color: rgb(16, 16, 20); box-shadow: none; }
.rku .btn.ghost{ background: rgba(255, 255, 255, 0.12); color: rgb(255, 255, 255); }
.rf-scr.stv-scr{ padding: 0px; overflow: hidden; }
.stv{ --fg: #fff; --fg2: rgba(255,255,255,.62); --fg3: rgba(255,255,255,.5); position: absolute; inset: 0px; display: flex; flex-direction: column; color: var(--fg); background: rgb(23, 22, 27); }
.stv .nav{ padding-top: 54px; flex: 0 0 auto; }
.stv .nav__t{ color: var(--fg); }
.stv .rb{ color: var(--fg); }
.stv .rb--back{ background: rgba(255, 255, 255, 0.1); }
.stv__body{ flex: 1 1 auto; min-height: 0px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 6px 24px; }
.story{ position: relative; width: 250px; height: 444px; border-radius: 26px; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 26px 20px; color: rgb(255, 255, 255); background: radial-gradient(110% 60% at 50% 0%, rgb(51, 48, 61) 0%, rgb(23, 22, 27) 50%, rgb(14, 13, 17) 100%); box-shadow: rgba(20, 16, 26, 0.45) 0px 30px 70px; transform: scale(0.9) translateY(20px); opacity: 0; }
.is-in .story{ animation: dg-achIn .7s var(--spring) both .15s; }
.story .rku__grain{ opacity: 0.08; }
.story__glow{ position: absolute; left: 50%; top: 44%; width: 360px; height: 360px; margin: -180px 0px 0px -180px; border-radius: 50%; background: radial-gradient(circle, rgba(163, 213, 70, 0.5) 0%, rgba(163, 213, 70, 0) 60%); filter: blur(8px); }
.story__wm{ position: absolute; top: 22px; left: 0px; right: 0px; font-size: 11px; font-weight: 700; letter-spacing: 0.22em; }
.story__em{ position: relative; width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; color: rgb(16, 16, 20); background: radial-gradient(70% 70% at 35% 30%, rgb(233, 245, 201) 0%, rgb(163, 213, 70) 62%, rgb(127, 179, 42) 100%); box-shadow: rgba(163, 213, 70, 0.45) 0px 16px 36px; }
.story__em svg{ width: 46px; height: 46px; display: block; }
.story__l{ position: relative; font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.55; margin-top: 22px; }
.story__t{ position: relative; font-size: 46px; font-weight: 700; letter-spacing: -1.8px; line-height: 1; margin-top: 8px; }
.story__s{ position: relative; font-size: 12.5px; opacity: 0.7; margin-top: 10px; }
.story__dots{ position: relative; display: flex; gap: 8px; margin-top: 22px; }
.story__dots i{ width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); }
.story__dots i.done{ background: rgb(163, 213, 70); }
.story__dots i.now{ background: rgb(255, 255, 255); box-shadow: rgba(255, 255, 255, 0.18) 0px 0px 0px 4px; }
.story__f{ position: absolute; bottom: 20px; left: 0px; right: 0px; font-size: 10.5px; opacity: 0.5; }
.stv__hint{ font-size: 12px; color: var(--fg3); text-align: center; max-width: 260px; line-height: 1.4; }
.stv .foot{ flex: 0 0 auto; padding-bottom: 34px; }
.stv .btn2{ margin-top: 0px; }
.stv .btn{ height: 54px; font-size: 15px; background: rgb(255, 255, 255); color: rgb(16, 16, 20); box-shadow: none; }
.stv .btn.ghost{ background: rgba(255, 255, 255, 0.12); color: rgb(255, 255, 255); }
.rk{ background: rgb(255, 255, 255); border-radius: 26px; padding: 20px 20px 18px; box-shadow: rgba(20, 16, 26, 0.06) 0px 12px 30px; }
.rk__k{ font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(139, 138, 146); }
.rk__t{ font-size: 34px; font-weight: 700; letter-spacing: -1.2px; margin-top: 6px; line-height: 1; }
.rk__s{ font-size: 13.5px; color: rgb(95, 94, 102); margin-top: 8px; }
.rk__lad{ margin-top: 24px; position: relative; padding-bottom: 2px; }
.rk__line{ position: absolute; left: 14px; right: 14px; top: 13px; height: 3px; border-radius: 2px; background: rgb(236, 236, 239); }
.rk__line i{ display: block; height: 100%; width: var(--w); background: rgb(163, 213, 70); border-radius: 2px; transition: width 1s var(--ease); }
.rk__nodes{ position: relative; display: flex; justify-content: space-between; }
.rk__n{ width: 28px; position: relative; text-align: center; }
.rk__n i{ display: block; width: 28px; height: 28px; border-radius: 50%; background: rgb(255, 255, 255); box-shadow: rgb(236, 236, 239) 0px 0px 0px 3px inset; }
.rk__n.done i{ background: rgb(163, 213, 70); box-shadow: none; }
.rk__n.now i{ background: rgb(16, 16, 20); box-shadow: rgba(16, 16, 20, 0.08) 0px 0px 0px 6px; }
.rk__n b,.rk__n small{ display: block; position: relative; left: 50%; transform: translateX(-50%); width: max-content; }
.rk__n b{ font-size: 11px; font-weight: 600; margin-top: 9px; color: rgb(139, 138, 146); }
.rk__n.now b{ color: rgb(16, 16, 20); }
.rk__n small{ font-size: 10px; color: rgb(182, 181, 189); margin-top: 2px; }
.rk__note{ font-size: 13.5px; line-height: 1.45; color: rgb(95, 94, 102); padding: 2px 6px; }
.rk__note b{ color: rgb(16, 16, 20); font-weight: 600; }
.rk-card{ gap: 0px; }
.rk-h{ display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rk-h b{ display: block; font-size: 15px; font-weight: 600; letter-spacing: -0.3px; }
.rk-h small{ display: block; font-size: 12px; color: rgb(139, 138, 146); margin-top: 2px; }
.rk-h > span{ font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: rgb(79, 125, 23); }
.rk-list{ margin-top: 6px; }
.rk-row{ display: flex; align-items: center; gap: 12px; padding: 11px 0px; border-top: 1px solid rgba(16, 16, 20, 0.06); }
.rk-list .rk-row:first-child{ border-top: 0px; }
.rk-row > div{ flex: 1 1 auto; min-width: 0px; }
.rk-row b{ display: block; font-size: 13.5px; font-weight: 600; letter-spacing: -0.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-row small{ display: block; font-size: 11.5px; color: rgb(139, 138, 146); margin-top: 2px; }
.rk-row em{ font-style: normal; font-size: 15px; font-weight: 600; letter-spacing: -0.3px; font-variant-numeric: tabular-nums; color: rgb(79, 125, 23); flex: 0 0 auto; }
.rk-row__e{ font-size: 20px; width: 30px; text-align: center; flex: 0 0 auto; }
.rk-more{ font-size: 12.5px; color: rgb(139, 138, 146); padding: 10px 0px 2px; }
.ad__cheat{ background: var(--cheat-bg); color: var(--cheat-ink); box-shadow: none; }
.ad__cheat svg{ width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; color: var(--cheat); }
@keyframes dg-popIn { 
  0% { opacity: 0; transform: translateY(4px); }
  100% { opacity: 1; transform: none; }
}
.score--c{ padding: 18px 20px 6px; }
.score--c .score__h{ align-items: center; gap: 16px; }
.score--c .score__l2{ flex: 1 1 auto; min-width: 0px; }
.score--c .score__big{ margin-top: 4px; }
.score--c .score__w{ margin: 0px; font-size: 20px; font-weight: 700; letter-spacing: -0.5px; text-transform: none; line-height: 1.15; }
.score--c .score__sub{ margin-top: 5px; font-size: 13px; line-height: 1.4; color: rgb(95, 94, 102); }
.score--c .score__rows{ margin-top: 14px; border-top: 1px solid rgba(16, 16, 20, 0.08); }
.score--c .score__act,.score--c .score__tg,.score--c .score__rules{ display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 12px 0px; font-size: 13.5px; font-weight: 600; color: var(--ink); cursor: pointer; border: 0px; background: transparent; font-family: inherit; text-align: left; }
.score--c .score__act + .score__tg{ border-top: 1px solid rgba(16, 16, 20, 0.06); }
.score--c .score__act .chev svg,.score--c .score__rules .chev svg{ color: var(--ink) !important; }
.score--c .score__rules{ margin-top: 10px; border-top: 1px solid rgba(16, 16, 20, 0.08); padding-bottom: 8px; }
.score--c .score__more > div{ padding-bottom: 0px; }
.score--c .score__more .score__l{ border-top: 0px; padding-top: 0px; margin-top: 4px; max-width: none; }
.score--c .ring{ --r: 36px; --t: 7px; width: 72px; height: 72px; flex: 0 0 auto; }
.score--c .ring b{ font-size: 22px; }
.score--c .ring span{ font-size: 9.5px; margin-top: 3px; }
@keyframes dg-spin { 
  100% { transform: rotate(360deg); }
}

@keyframes dg-cardIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes dg-cellIn{0%{opacity:.35;transform:scale(.85);filter:saturate(0)}55%{transform:scale(1.06);filter:saturate(1.2)}100%{opacity:1;transform:none;filter:none}}
@keyframes dg-chipIn{from{transform:scale(.5) rotate(-8deg);opacity:0}to{transform:none;opacity:1}}
@keyframes dg-coinIn{from{transform:rotateY(90deg) scale(.6);opacity:0}to{transform:none;opacity:1}}
@keyframes dg-floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes dg-flyIn{from{transform:translate(var(--dx,0),44px) rotate(-14deg) scale(.5);opacity:0}to{transform:none;opacity:1}}
@keyframes dg-rowIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
@keyframes dg-spinIn{from{transform:rotate(-180deg) scale(0)}to{transform:none}}

/* ---- src/styles/47-stories.css ---- */
/* ==========================================================================
   «Истории Re:forma» (20-screens/stories.js) — КОПИЯ miniapp-v2/stories.css
   без правок: паритет с v2 (экраны утверждены макетом design-preview/client-stories-v3,
   v2-файл сверяет tests/test_stories_css_matches_the_approved_mock.py, эту копию —
   tests/test_miniapp_v3_welcome_stories.py). Поменяли v2 — скопируйте заново.
   Всё под префиксом `cst-` и с токенами на корне оверлея `.cst` — с v3 не пересекается.
   Отличия v3 — только в самом конце файла (как оверлей встаёт в #rf-app).
   ========================================================================== */
.cst.cst-on { display: block; animation: cstRootIn .32s var(--ease-out) both; }
@keyframes cstRootIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.cst {
  position: absolute; inset: 0; z-index: 79; display: none; overflow: hidden;
  font-family: var(--font); color: var(--ink); background: var(--bg);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  --font: "Geist", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --bg: #fff7fd;
  --ink: #0c0e12;
  --ink70: rgba(12, 14, 18, .7);
  --ink50: rgba(12, 14, 18, .5);
  --ink36: rgba(12, 14, 18, .36);
  --ink22: rgba(12, 14, 18, .22);
  --ink10: rgba(12, 14, 18, .1);
  --ink06: rgba(12, 14, 18, .06);
  --brand: #1d020c;
  --wine-1: #1a0711;
  --wine-2: #3a1628;
  --wine-3: #5a2a48;
  --pink: #e0518f;
  --pinkd: #a3286a;
  --pinkl: #f6a8cd;
  --lilac: #d9c2ef;
  --peach: #ffd6c2;
  --white: #fff;
  --r-sheet: 32px;
  --r-card: 20px;
  --r-inset: 16px;
  --r-pill: 100px;
  --ease-out: cubic-bezier(.32, .72, 0, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
}
:where(.cst) button { font-family: inherit; }
:where(.cst) button:focus-visible, :where(.cst) [tabindex]:focus-visible, :where(.cst) input:focus-visible, :where(.cst) textarea:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; border-radius: 8px; }
:where(.cst) svg { display: block; }
.cst-scr { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--bg); color: var(--ink); will-change: transform, opacity; }
.cst-scr--dark { background: var(--wine-1); color: #fff; }
.cst-scr.cst-in-fwd { animation: cstScrInFwd .46s var(--ease-out) both; }
.cst-scr.cst-in-back { animation: cstScrInBack .46s var(--ease-out) both; }
.cst-scr.cst-out-fwd { animation: cstScrOutFwd .46s var(--ease-out) both; pointer-events: none; }
.cst-scr.cst-out-back { animation: cstScrOutBack .46s var(--ease-out) both; pointer-events: none; }
@keyframes cstScrInFwd { from { transform: translateX(46px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes cstScrOutFwd { from { transform: none; opacity: 1; } to { transform: translateX(-24px) scale(.985); opacity: 0; } }
@keyframes cstScrInBack { from { transform: translateX(-30px) scale(.985); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes cstScrOutBack { from { transform: none; opacity: 1; } to { transform: translateX(52px); opacity: 0; } }
.cst-rise { animation: cstRise .7s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 70ms + 120ms); }
@keyframes cstRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.cst-pop { animation: cstPop .55s var(--ease-spring) both; animation-delay: calc(var(--i, 0) * 70ms + 120ms); }
@keyframes cstPop { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
.cst-top { flex: 0 0 auto; padding: calc(var(--safe-top) + 10px) 20px 0; position: relative; z-index: 3; }
.cst-top__bar { position: relative; display: flex; align-items: center; min-height: 40px; }
.cst-top__k { position: absolute; left: 50%; transform: translateX(-50%); font-size: 13px; font-weight: 500; letter-spacing: -.1px; color: var(--ink36); white-space: nowrap; }
.cst-scr--dark .cst-top__k { color: rgba(255, 255, 255, .5); }
.cst-icb { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 50%; border: 0; cursor: pointer; background: rgba(12, 14, 18, .05); display: grid; place-items: center; color: var(--ink); transition: transform .14s var(--ease-out), background .18s; }
.cst-icb:hover { background: rgba(12, 14, 18, .09); }
.cst-icb:active { transform: scale(.9); }
.cst-icb svg { width: 20px; height: 20px; }
.cst-icb--end { margin-left: auto; }
.cst-scr--dark .cst-icb { background: rgba(255, 255, 255, .1); color: #fff; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.cst-scr--dark .cst-icb:hover { background: rgba(255, 255, 255, .18); }
.cst-steps { display: flex; gap: 6px; margin-top: 16px; }
.cst-steps i { flex: 1 1 0; height: 3px; border-radius: 100px; background: var(--ink10); overflow: hidden; position: relative; }
.cst-steps i::after { content: ""; position: absolute; inset: 0; background: var(--brand); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease-out); }
.cst-steps i.cst-on::after { transform: scaleX(1); }
.cst-steps i.cst-half::after { transform: scaleX(.5); }
.cst-scr--dark .cst-steps i { background: rgba(255, 255, 255, .16); }
.cst-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 18px 22px 28px; scrollbar-width: none; position: relative; z-index: 2; }
.cst-body::-webkit-scrollbar { display: none; }
.cst-foot { flex: 0 0 auto; padding: 12px 20px calc(16px + env(safe-area-inset-bottom, 0px)); position: relative; z-index: 3; background: linear-gradient(to top, var(--bg) 70%, rgba(255, 247, 253, 0)); }
.cst-scr--white .cst-foot { background: linear-gradient(to top, #fff 70%, rgba(255, 255, 255, 0)); }
.cst-scr--dark .cst-foot { background: linear-gradient(to top, var(--wine-1) 62%, rgba(26, 7, 17, 0)); }
.cst-h1 { font-size: 30px; font-weight: 700; letter-spacing: -1px; line-height: 1.08; margin: 18px 0 0; text-wrap: balance; }
.cst-h1:focus { outline: none; }
.cst-lede { font-size: 15px; line-height: 1.5; color: var(--ink50); margin: 10px 0 0; max-width: 34ch; }
.cst-scr--dark .cst-lede { color: rgba(255, 255, 255, .66); }
.cst-kicker { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--pinkd); }
.cst-scr--dark .cst-kicker { color: var(--pinkl); }
.cst-cta { width: 100%; height: 56px; border: 0; border-radius: 100px; cursor: pointer; background: var(--brand); color: #fff; font-family: var(--font); font-size: 16.5px; font-weight: 600; letter-spacing: -.3px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; position: relative; overflow: hidden; transition: transform .16s var(--ease-out), opacity .2s, box-shadow .2s; box-shadow: 0 12px 28px rgba(29, 2, 12, .22); }
.cst-cta::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .16) 50%, transparent 70%); transform: translateX(-120%); transition: transform .8s var(--ease-out); }
.cst-cta:hover::after { transform: translateX(120%); }
.cst-cta:active { transform: scale(.97); }
.cst-cta:disabled { opacity: .26; pointer-events: none; box-shadow: none; }
.cst-cta svg { width: 18px; height: 18px; }
.cst-cta--light { background: #fff; color: var(--brand); box-shadow: 0 16px 40px rgba(0, 0, 0, .35); }
.cst-cta--pink { background: linear-gradient(135deg, #e0518f, #b8306f); box-shadow: 0 14px 34px rgba(224, 81, 143, .38); }
.cst-ghost { width: 100%; min-height: 46px; border: 0; background: transparent; cursor: pointer; font-family: var(--font); font-size: 15px; font-weight: 500; color: var(--ink50); padding: 12px; margin-top: 2px; border-radius: 100px; transition: transform .14s var(--ease-out), background .18s; }
.cst-ghost:hover { background: var(--ink06); }
.cst-ghost:active { transform: scale(.97); }
.cst-scr--dark .cst-ghost { color: rgba(255, 255, 255, .62); }
.cst-scr--dark .cst-ghost:hover { background: rgba(255, 255, 255, .08); }
.cst-second { width: 100%; min-height: 54px; border: 0; cursor: pointer; border-radius: 100px; margin-top: 10px; background: #f3e7ee; color: var(--brand); font-family: var(--font); font-size: 15.5px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 9px; transition: transform .16s var(--ease-out), background .18s; }
.cst-second:hover { background: #eedde8; }
.cst-second:active { transform: scale(.97); }
.cst-second svg { width: 18px; height: 18px; }
.cst-scr--dark .cst-second { background: rgba(255, 255, 255, .12); color: #fff; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.cst-link { border: 0; background: transparent; cursor: pointer; font-family: var(--font); font-size: 14px; font-weight: 600; color: var(--pinkd); padding: 12px 0; min-height: 44px; text-align: left; display: inline-flex; align-items: center; gap: 6px; }
.cst-link svg { width: 15px; height: 15px; }
.cst-foot .cst-hint { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; color: var(--ink36); margin: 12px 0 0; }
.cst-foot .cst-hint svg { width: 13px; height: 13px; }
.cst-scr--dark .cst-foot .cst-hint { color: rgba(255, 255, 255, .45); }
.cst-cine { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.cst-cine__blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .9; will-change: transform; }
.cst-cine__blob--a { width: 420px; height: 420px; left: -120px; top: -80px; background: radial-gradient(circle, rgba(224, 81, 143, .55), rgba(224, 81, 143, 0) 70%); animation: cstDrift1 22s ease-in-out infinite alternate; }
.cst-cine__blob--b { width: 380px; height: 380px; right: -140px; top: 220px; background: radial-gradient(circle, rgba(217, 194, 239, .38), rgba(217, 194, 239, 0) 70%); animation: cstDrift2 26s ease-in-out infinite alternate; }
.cst-cine__blob--c { width: 460px; height: 460px; left: 40px; bottom: -220px; background: radial-gradient(circle, rgba(163, 40, 106, .55), rgba(163, 40, 106, 0) 70%); animation: cstDrift3 30s ease-in-out infinite alternate; }
@keyframes cstDrift1 { to { transform: translate(90px, 60px) scale(1.15); } }
@keyframes cstDrift2 { to { transform: translate(-70px, 80px) scale(1.1); } }
@keyframes cstDrift3 { to { transform: translate(-60px, -70px) scale(1.2); } }
.cst-cine__grain { position: absolute; inset: 0; opacity: .32; mix-blend-mode: overlay; background-size: 160px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.cst-cine__vignette { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 30%, transparent 40%, rgba(10, 2, 6, .55) 100%); }
.cst-cine canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.cst-tk-scene { perspective: 1100px; display: grid; place-items: center; padding: 8px 0 4px; }
.cst-tk-float { animation: cstFloat 6s ease-in-out infinite; }
@keyframes cstFloat { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-9px) rotate(1deg); } }
.cst-tk { --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%; position: relative; width: min(336px, 100%); height: 190px; border-radius: 22px; transform: rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d; transition: transform .18s ease-out; display: flex; overflow: hidden; background:
    radial-gradient(120% 120% at var(--mx) var(--my), rgba(255, 255, 255, .5), transparent 55%),
    linear-gradient(135deg, #fffafd 0%, #fbeaf3 55%, #f3dceb 100%); box-shadow:
    0 30px 60px rgba(0, 0, 0, .45), 0 10px 22px rgba(0, 0, 0, .25),
    inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -1px 0 rgba(163, 40, 106, .12); color: var(--brand); }
.cst-tk.cst-pop { animation: cstTkIn .9s var(--ease-spring) both; }
@keyframes cstTkIn { from { opacity: 0; transform: translateY(30px) rotateX(18deg) scale(.9); } to { opacity: 1; transform: none; } }
.cst-tk__sheen { position: absolute; inset: -40%; pointer-events: none; mix-blend-mode: overlay; opacity: .9; background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .7) 42%, rgba(246, 168, 205, .75) 47%, rgba(217, 194, 239, .8) 52%, rgba(255, 214, 194, .7) 57%, transparent 68%); transform: translate(calc((var(--mx) - 50%) * .6), calc((var(--my) - 50%) * .6)) rotate(0deg); transition: transform .18s ease-out; }
.cst-tk__grain { position: absolute; inset: 0; opacity: .22; mix-blend-mode: multiply; background-size: 120px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); pointer-events: none; }
.cst-tk__stub { position: relative; flex: 0 0 92px; padding: 16px 12px 14px 18px; display: flex; flex-direction: column; justify-content: space-between; border-right: 2px dashed rgba(163, 40, 106, .28); }
.cst-tk__stub::before, .cst-tk__stub::after { content: ""; position: absolute; right: -11px; width: 20px; height: 20px; border-radius: 50%; background: var(--tk-hole, #1a0711); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .35); }
.cst-tk__stub::before { top: -10px; }
.cst-tk__stub::after { bottom: -10px; }
.cst-tk__brand { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--pinkd); writing-mode: vertical-rl; transform: rotate(180deg); }
.cst-tk__serial { font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em; color: rgba(29, 2, 12, .45); writing-mode: vertical-rl; transform: rotate(180deg); }
.cst-tk__body { position: relative; flex: 1 1 auto; padding: 16px 20px 14px 22px; display: flex; flex-direction: column; justify-content: flex-end; }
.cst-tk__num { font-size: 92px; font-weight: 800; letter-spacing: -6px; line-height: .82; font-feature-settings: "tnum"; color: var(--brand); text-shadow: 0 1px 0 rgba(255, 255, 255, .8), 0 -1px 0 rgba(163, 40, 106, .25); display: flex; align-items: baseline; gap: 6px; }
.cst-tk__num small { font-size: 22px; font-weight: 700; letter-spacing: -.5px; color: var(--pinkd); }
.cst-tk__t { font-size: 15.5px; font-weight: 600; letter-spacing: -.3px; margin-top: 8px; }
.cst-tk__s { font-size: 11.5px; color: rgba(29, 2, 12, .55); margin-top: 2px; }
.cst-tk__stamp { position: absolute; right: 16px; top: 14px; padding: 6px 10px; border-radius: 8px; border: 2px solid var(--pinkd); color: var(--pinkd); font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; transform: rotate(-12deg); opacity: 0; animation: cstStamp .6s var(--ease-spring) .6s both; }
@keyframes cstStamp { 0% { opacity: 0; transform: rotate(-12deg) scale(1.8); } 60% { opacity: 1; transform: rotate(-12deg) scale(.94); } 100% { opacity: 1; transform: rotate(-12deg) scale(1); } }
.cst-tk__stamp--wait { border-style: dashed; color: rgba(29, 2, 12, .5); border-color: rgba(29, 2, 12, .3); }
.cst-tk__ico { position: absolute; right: 16px; top: 16px; width: 34px; height: 34px; border-radius: 10px; background: rgba(163, 40, 106, .1); display: grid; place-items: center; color: var(--pinkd); }
.cst-tk__ico svg { width: 18px; height: 18px; }
.cst-scr:not(.cst-scr--dark) .cst-tk { box-shadow: 0 22px 44px rgba(20, 4, 12, .18), 0 4px 10px rgba(20, 4, 12, .08), inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 0 0 1px rgba(163, 40, 106, .08); }
.cst-tk--status { height: 206px; }
.cst-tk--status .cst-tk__body { padding-top: 46px; }
.cst-tk--status .cst-tk__num { font-size: 66px; letter-spacing: -4px; }
.cst-tk--status .cst-tk__stamp { top: 12px; right: 14px; }
.cst-tk-scene:has(.cst-tk--sm) { justify-items: stretch; }
.cst-tk--sm { width: 100%; height: 138px; border-radius: 20px; }
.cst-tk--sm .cst-tk__num { font-size: 58px; letter-spacing: -3.5px; }
.cst-tk--sm .cst-tk__t { font-size: 14px; margin-top: 6px; }
.cst-tk--sm .cst-tk__s { font-size: 11px; }
.cst-tk--sm .cst-tk__ico { width: 30px; height: 30px; right: 14px; top: 14px; }
.cst-tk--sm .cst-tk__ico svg { width: 16px; height: 16px; }
.cst-tk--sm .cst-tk__stub { flex-basis: 74px; }
.cst-tk--sm .cst-tk__body { padding: 12px 16px 12px 18px; }
.cst-tk__months { display: flex; gap: 5px; margin-top: 12px; align-items: center; }
.cst-tk__months i { flex: 1 1 0; height: 5px; border-radius: 100px; background: rgba(163, 40, 106, .16); overflow: hidden; position: relative; }
.cst-tk__months i::after { content: ""; position: absolute; inset: 0; background: var(--pinkd); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease-out); }
.cst-tk__months i.cst-on::after { transform: scaleX(1); }
.cst-tk__months i.cst-bonus { flex: 0 0 22px; background: rgba(224, 81, 143, .22); }
.cst-tk__months i.cst-bonus::after { background: var(--pink); }
.cst-tk__months span { font-family: var(--mono); font-size: 10px; color: rgba(29, 2, 12, .5); white-space: nowrap; margin-left: 4px; }
.cst-h1--hero { font-size: 36px; letter-spacing: -1.3px; line-height: 1.04; margin-top: 26px; }
.cst-h1--hero .cst-w { display: inline-block; opacity: 0; transform: translateY(14px); animation: cstWord .7s var(--ease-out) forwards; animation-delay: calc(var(--i) * 70ms + 380ms); }
@keyframes cstWord { to { opacity: 1; transform: none; } }
.cst-h1--hero em { font-style: normal; color: var(--pinkl); }
.cst-glass-row { display: flex; gap: 8px; margin-top: 22px; flex-wrap: wrap; }
.cst-glass { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px 10px 10px; border-radius: 100px; background: rgba(255, 255, 255, .1); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), inset 0 1px 0 rgba(255, 255, 255, .25); font-size: 13px; font-weight: 500; color: #fff; letter-spacing: -.1px; }
.cst-glass i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .16); color: var(--pinkl); }
.cst-glass i svg { width: 14px; height: 14px; }
.cst-glass b { font-weight: 400; color: rgba(255, 255, 255, .55); margin-left: -2px; }
.cst-terms { margin-top: 16px; border-radius: 18px; overflow: hidden; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.cst-scr:not(.cst-scr--dark) .cst-terms { background: #fff; box-shadow: 0 8px 24px rgba(20, 4, 12, .06), inset 0 0 0 1px rgba(12, 14, 18, .04); }
.cst-terms__h { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; border: 0; background: transparent; cursor: pointer; padding: 14px 16px; font-family: var(--font); font-size: 14px; font-weight: 600; color: inherit; text-align: left; }
.cst-terms__h svg { width: 18px; height: 18px; transition: transform .3s var(--ease-out); opacity: .6; }
.cst-terms.cst-open .cst-terms__h svg { transform: rotate(180deg); }
.cst-terms__b { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease-out); }
.cst-terms.cst-open .cst-terms__b { grid-template-rows: 1fr; }
.cst-terms__b > div { overflow: hidden; }
.cst-terms__row { display: flex; gap: 12px; padding: 11px 16px; font-size: 13px; line-height: 1.45; color: rgba(255, 255, 255, .72); }
.cst-scr:not(.cst-scr--dark) .cst-terms__row { color: var(--ink70); }
.cst-terms__row:last-child { padding-bottom: 16px; }
.cst-terms__row svg { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 1px; color: var(--pinkl); }
.cst-scr:not(.cst-scr--dark) .cst-terms__row svg { color: var(--pink); }
.cst-terms__row b { color: inherit; font-weight: 600; }
.cst-scr:not(.cst-scr--dark) .cst-terms__row b { color: var(--ink); }
.cst-cover-scene { perspective: 1000px; margin-top: 18px; }
.cst-cover { --rx: 0deg; --ry: 0deg; position: relative; border-radius: 22px; overflow: hidden; background: #fff; box-shadow: 0 24px 50px rgba(20, 4, 12, .16), 0 2px 6px rgba(20, 4, 12, .06), inset 0 0 0 1px rgba(12, 14, 18, .04); transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .2s ease-out; transform-style: preserve-3d; }
@keyframes cstFadeIn { from { opacity: 0; } to { opacity: 1; } }
.cst-cover__shine { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .5) 50%, transparent 65%); transform: translateX(-130%); }
.cst-cover.cst-shine .cst-cover__shine { animation: cstShine 1.1s var(--ease-out) both; }
@keyframes cstShine { to { transform: translateX(130%); } }
.cst-cv { border-radius: 26px; color: #fff; isolation: isolate; overflow: hidden; background:
    radial-gradient(120% 110% at 90% -10%, rgba(246, 168, 205, .28), transparent 55%),
    radial-gradient(90% 80% at 0% 110%, rgba(150, 78, 158, .32), transparent 60%),
    linear-gradient(150deg, #1c0812 0%, #3a1628 55%, #4a2040 100%); box-shadow: 0 30px 60px rgba(20, 4, 12, .28), 0 2px 6px rgba(20, 4, 12, .1), inset 0 1px 0 rgba(255, 255, 255, .08); }
.cst-cv__grain { position: absolute; inset: 0; z-index: 0; opacity: .34; mix-blend-mode: overlay; pointer-events: none; background-size: 140px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.cst-cv__mast { position: relative; z-index: 1; display: flex; align-items: baseline; justify-content: space-between; padding: 18px 20px 14px; }
.cst-cv__brand { font-size: 20px; font-weight: 500; letter-spacing: -.3px; color: #fff; }
.cst-cv__no { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .45); }
.cst-cv__media { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 12px; }
.cst-cv__slot { position: relative; aspect-ratio: 9 / 16; border-radius: 16px; overflow: hidden; border: 0; cursor: pointer; padding: 16px 14px 14px; text-align: left; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; font-family: var(--font); color: #fff; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), inset 0 1px 0 rgba(255, 255, 255, .12); transition: background .2s, transform .18s var(--ease-out), box-shadow .2s; }
.cst-cv__slot:hover { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), inset 0 1px 0 rgba(255, 255, 255, .16); }
.cst-cv__slot:active { transform: scale(.975); }
.cst-cv__slot:disabled { cursor: default; }
.cst-cv__slot > svg { position: absolute; left: 14px; top: 14px; width: 22px; height: 22px; color: var(--pinkl); stroke-width: 1.4; }
.cst-cv__slot b { font-size: 15px; font-weight: 600; letter-spacing: -.3px; }
.cst-cv__slot span { font-size: 11.5px; line-height: 1.35; color: rgba(255, 255, 255, .5); }
.cst-cv__al { position: absolute; inset: 0; transform-origin: center; }
.cst-cv__al .cst-fig { position: absolute; inset: 0; width: 100%; height: 100%; }
.cst-cv__slot--full { padding: 0; background: #2a1020; }
.cst-cv__slot--full .cst-fig { position: absolute; inset: 0; width: 100%; height: 100%; animation: cstFadeIn .6s ease both; }
.cst-cv__slot--full .cst-blur-head { left: 33%; top: 5%; width: 34%; height: 24%; }
.cst-cv__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .9); display: grid; place-items: center; color: var(--brand); box-shadow: 0 10px 26px rgba(20, 4, 12, .3); animation: cstPop .5s var(--ease-spring) both; }
.cst-cv__play svg { width: 17px; height: 17px; margin-left: 2px; }
.cst-cv__slot--full .cst-cv__play { color: var(--brand); }
.cst-cv__slot--full .cst-cv__meta { color: #fff; font-size: 10.5px; }
.cst-cv__meta { position: absolute; right: 8px; bottom: 8px; padding: 4px 8px; border-radius: 100px; background: rgba(12, 14, 18, .55); color: #fff; font-family: var(--mono); font-size: 10.5px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.cst-cv__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: rgba(255, 255, 255, .1); }
.cst-cv__half { position: relative; overflow: hidden; }
.cst-cv__half .cst-fig { position: absolute; inset: 0; width: 100%; height: 100%; }
.cst-cv__half i { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); padding: 3px 7px; border-radius: 100px; background: rgba(12, 14, 18, .55); color: #fff; font-family: var(--mono); font-style: normal; font-size: 9.5px; white-space: nowrap; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.cst-cv__half .cst-blur-head { left: 30%; top: 5%; width: 40%; height: 24%; }
.cst-cv__by { position: relative; z-index: 1; display: flex; align-items: baseline; gap: 8px; padding: 14px 20px 18px; }
.cst-cv__nm { font-size: 15px; font-weight: 600; letter-spacing: -.2px; }
.cst-cv__dt { font-size: 11.5px; color: rgba(255, 255, 255, .5); }
.cst-terms--sheet { margin-top: 12px; background: #fbf5f9; box-shadow: none; }
.cst-terms--sheet .cst-terms__h { display: none; }
.cst-terms--sheet .cst-terms__row { color: var(--ink70); }
.cst-terms--sheet .cst-terms__row svg { color: var(--pink); }
.cst-terms--sheet .cst-terms__row b { color: var(--ink); }
.cst-hcards { display: flex; flex-direction: column; gap: 12px; margin-top: 22px; }
.cst-hcard { display: block; width: 100%; text-align: left; border: 0; cursor: pointer; padding: 0; border-radius: 24px; overflow: hidden; background: #fff; font-family: var(--font); color: var(--ink); box-shadow: 0 12px 34px rgba(20, 4, 12, .06), inset 0 0 0 1px rgba(12, 14, 18, .035); transition: transform .2s var(--ease-out), box-shadow .2s; }
.cst-hcard:hover { box-shadow: 0 20px 44px rgba(20, 4, 12, .09), inset 0 0 0 1px rgba(12, 14, 18, .05); }
.cst-hcard:active { transform: scale(.985); }
.cst-hcard--rec { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 212px; padding: 26px 20px; text-align: center; }
.cst-rec-ring { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 12px; box-shadow: inset 0 0 0 2px rgba(12, 14, 18, .1); position: relative; }
.cst-rec-ring::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(12, 14, 18, .05); animation: cstRingBreath 3s ease-in-out infinite; }
@keyframes cstRingBreath { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.06); opacity: .4; } }
.cst-rec-core { width: 56px; height: 56px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; box-shadow: 0 10px 24px rgba(29, 2, 12, .28); transition: transform .2s var(--ease-spring); }
.cst-hcard--rec:hover .cst-rec-core { transform: scale(1.05); }
.cst-rec-core svg { width: 24px; height: 24px; }
.cst-rec-ring--soft::after { display: none; }
.cst-rec-core--soft { background: #f1eaee; color: var(--brand); box-shadow: none; }
.cst-hcard--rec .cst-hcard__t { font-size: 18px; font-weight: 600; letter-spacing: -.4px; }
.cst-hcard--rec .cst-hcard__m { font-size: 13px; color: var(--ink50); }
.cst-hcard__frame { position: relative; display: block; height: 350px; background: linear-gradient(180deg, #f3ece8, #e8dcd6); overflow: hidden; }
.cst-hcard__frame > .cst-fig { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.cst-hcard__frame--pair { display: grid; grid-template-columns: 1fr 1fr; }
.cst-hcard__half { position: relative; overflow: hidden; }
.cst-hcard__half .cst-fig { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.cst-hcard__half .cst-cv__al { position: absolute; inset: 0; }
.cst-hcard__half i { position: absolute; left: 12px; bottom: 12px; padding: 5px 10px; border-radius: 100px; background: rgba(255, 255, 255, .9); font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--ink); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.cst-hcard__half:last-of-type i { left: auto; right: 12px; }
.cst-hcard__line { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: #fff; transform: translateX(-1px); box-shadow: 0 0 14px rgba(0, 0, 0, .18); }
.cst-hcard__frame .cst-blur-head { left: 37%; top: 1%; width: 26%; height: 18%; }
.cst-hcard__half .cst-blur-head { left: 35%; top: 1%; width: 30%; height: 18%; }
.cst-hcard__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 54px; height: 54px; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--brand); display: grid; place-items: center; box-shadow: 0 12px 28px rgba(20, 4, 12, .22); animation: cstPop .5s var(--ease-spring) both; }
.cst-hcard__play svg { width: 21px; height: 21px; margin-left: 2px; }
.cst-hcard__tag { position: absolute; right: 12px; bottom: 12px; padding: 5px 9px; border-radius: 100px; background: rgba(12, 14, 18, .55); color: #fff; font-family: var(--mono); font-size: 11px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.cst-hcard__row { display: flex; align-items: center; gap: 14px; padding: 14px 18px 16px 20px; }
.cst-hcard__b { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cst-hcard__t { font-size: 17px; font-weight: 600; letter-spacing: -.3px; }
.cst-hcard__m { font-size: 13px; line-height: 1.4; color: var(--ink50); }
.cst-hcard__act { flex: 0 0 auto; font-size: 14px; font-weight: 600; color: var(--brand); padding: 8px 14px; border-radius: 100px; background: #f1eaee; }
.cst-linkline { border: 0; background: transparent; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.cst-pf { position: absolute; inset: 0; overflow: hidden; background: #e6dfda; }
.cst-pf__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.cst-hcard--vrow { display: flex; align-items: center; gap: 16px; padding: 14px 18px 14px 14px; }
.cst-hcard__thumb { position: relative; flex: 0 0 auto; width: 104px; height: 185px; border-radius: 14px; overflow: hidden; background: #e6dfda; }
.cst-hcard__play--sm { width: 38px; height: 38px; }
.cst-hcard__play--sm svg { width: 15px; height: 15px; }
.cst-hcard--vrow .cst-hcard__b { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cst-ba__layer .cst-pf { position: absolute; }
.cst-pair-sum { display: flex; align-items: center; gap: 14px; margin-top: 16px; padding: 14px 18px; background: #fff; border-radius: 18px; box-shadow: 0 8px 22px rgba(20, 4, 12, .05), inset 0 0 0 1px rgba(12, 14, 18, .04); }
.cst-pair-sum__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cst-pair-sum__col span { font-size: 11px; font-weight: 500; letter-spacing: .02em; color: var(--ink36); text-transform: uppercase; }
.cst-pair-sum__col b { font-size: 17px; font-weight: 600; letter-spacing: -.3px; }
.cst-pair-sum__col small { font-size: 12px; color: var(--ink50); }
.cst-pair-sum__arrow { flex: 0 0 auto; color: var(--ink22); }
.cst-pair-sum__arrow svg { width: 20px; height: 20px; }
.cst-strip__note { display: block; margin: 12px 4px 0; font-size: 12.5px; line-height: 1.45; color: var(--ink50); }
.cst-strip__note svg { width: 13px; height: 13px; display: inline-block; vertical-align: -2px; margin-right: 5px; color: var(--ink36); }
.cst-strip__note .cst-linkline { color: var(--ink); }
.cst-gap { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.cst-gap__ph { position: relative; aspect-ratio: 9 / 16; border-radius: 20px; overflow: hidden; background: #e9e4df; }
.cst-gap__ph .cst-fig { position: absolute; inset: 0; width: 100%; height: 100%; }
.cst-gap__ph i { position: absolute; left: 10px; bottom: 10px; padding: 5px 10px; border-radius: 100px; background: rgba(255, 255, 255, .9); font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--ink); }
.cst-gap__empty { aspect-ratio: 9 / 16; border-radius: 20px; border: 0; cursor: pointer; padding: 18px 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; font-family: var(--font); color: var(--ink); background: #fff; box-shadow: inset 0 0 0 1px rgba(12, 14, 18, .06); transition: transform .16s var(--ease-out); }
.cst-gap__empty:active { transform: scale(.97); }
.cst-gap__empty svg { width: 24px; height: 24px; color: var(--brand); margin-bottom: 6px; }
.cst-gap__empty b { font-size: 14.5px; font-weight: 600; letter-spacing: -.2px; }
.cst-gap__empty span { font-size: 12px; line-height: 1.35; color: var(--ink50); }
.cst-gap__empty--now { background: var(--brand); color: #fff; box-shadow: 0 12px 28px rgba(29, 2, 12, .22); }
.cst-gap__empty--now svg { color: #fff; }
.cst-gap__empty--now span { color: rgba(255, 255, 255, .62); }
.cst-view-note { display: flex; gap: 8px; align-items: flex-start; margin: 12px 4px 0; font-size: 12.5px; line-height: 1.4; color: var(--ink50); }
.cst-view-note svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 1px; color: var(--ink36); }
.cst-task { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; border: 0; cursor: pointer; padding: 14px 14px 14px 14px; border-radius: 20px; background: #fff; min-height: 82px; position: relative; overflow: hidden; box-shadow: 0 8px 24px rgba(20, 4, 12, .06), inset 0 0 0 1px rgba(12, 14, 18, .035); transition: transform .16s var(--ease-out), box-shadow .2s; }
.cst-task:hover { box-shadow: 0 14px 32px rgba(20, 4, 12, .1), inset 0 0 0 1px rgba(12, 14, 18, .05); }
.cst-task:active { transform: scale(.985); }
.cst-task__ic { width: 52px; height: 52px; flex: 0 0 auto; border-radius: 16px; display: grid; place-items: center; background: #f6eef3; color: var(--pinkd); position: relative; }
.cst-task__ic svg { width: 24px; height: 24px; }
.cst-task__ic .cst-ck { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 16px; background: var(--brand); color: #fff; transform: scale(0); }
.cst-task.cst-done .cst-task__ic .cst-ck { animation: cstCkIn .5s var(--ease-spring) both; }
@keyframes cstCkIn { to { transform: scale(1); } }
.cst-task__b { flex: 1 1 auto; min-width: 0; }
.cst-task__n { display: block; font-size: 15.5px; font-weight: 600; letter-spacing: -.3px; line-height: 1.2; }
.cst-task__m { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.35; color: var(--ink36); }
.cst-task.cst-done .cst-task__m { color: var(--pinkd); }
.cst-task__time { flex: 0 0 auto; font-family: var(--mono); font-size: 10.5px; color: var(--ink36); padding: 5px 8px; border-radius: 8px; background: var(--ink06); }
.cst-task.cst-done .cst-task__time { color: var(--pinkd); background: #f6eef3; }
.cst-task__chev { flex: 0 0 auto; color: var(--ink22); }
.cst-task__chev svg { width: 20px; height: 20px; }
.cst-stack { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.cst-note-card { display: flex; gap: 11px; align-items: flex-start; font-size: 13px; color: var(--ink70); line-height: 1.45; margin-top: 12px; background: #fff; border-radius: var(--r-inset); padding: 13px 14px; box-shadow: inset 0 0 0 1px rgba(12, 14, 18, .05); }
.cst-note-card svg { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 1px; color: var(--pink); }
.cst-note-card b { color: var(--ink); font-weight: 600; }
.cst-note-card--warn { background: #fff3f6; box-shadow: inset 0 0 0 1px rgba(200, 55, 95, .16); }
.cst-note-card--warn svg { color: #c33a5c; }
.cst-scr--dark .cst-note-card { background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .78); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.cst-scr--dark .cst-note-card b { color: #fff; }
.cst-cam { position: relative; margin-top: 16px; border-radius: 28px; overflow: hidden; aspect-ratio: 3 / 4; background: #0e0509; box-shadow: 0 30px 60px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .08); }
.cst-cam__bg { position: absolute; inset: 0; background: radial-gradient(80% 60% at 50% 40%, #3a1628, #14060d 80%); }
.cst-cam__bg::after { content: ""; position: absolute; inset: 0; background-size: 160px; opacity: .35; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.cst-cam video, .cst-cam .cst-fig { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cst-cam__guide { position: absolute; left: 50%; top: 13%; transform: translateX(-50%); width: 50%; height: 58%; pointer-events: none; }
.cst-cam__guide path { fill: none; stroke: rgba(246, 168, 205, .7); stroke-width: 1.5; stroke-dasharray: 6 6; animation: cstDash 3s linear infinite, cstPulse 2.6s ease-in-out infinite; }
@keyframes cstDash { to { stroke-dashoffset: -48; } }
@keyframes cstPulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.cst-cam__corner { position: absolute; width: 26px; height: 26px; border: 2px solid rgba(255, 255, 255, .7); }
.cst-cam__corner.cst-tl { left: 16px; top: 16px; border-right: 0; border-bottom: 0; border-radius: 8px 0 0 0; }
.cst-cam__corner.cst-tr { right: 16px; top: 16px; border-left: 0; border-bottom: 0; border-radius: 0 8px 0 0; }
.cst-cam__corner.cst-bl { left: 16px; bottom: 16px; border-right: 0; border-top: 0; border-radius: 0 0 0 8px; }
.cst-cam__corner.cst-br { right: 16px; bottom: 16px; border-left: 0; border-top: 0; border-radius: 0 0 8px 0; }
.cst-cam.cst-rec .cst-cam__corner { border-color: var(--pink); }
.cst-cam__hud { position: absolute; left: 0; right: 0; top: 0; padding: 20px 50px 0; display: flex; align-items: center; justify-content: space-between; color: #fff; font-family: var(--mono); font-size: 12.5px; letter-spacing: .04em; }
.cst-cam__rec { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 100px; background: rgba(0, 0, 0, .35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.cst-cam__rec i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .4); }
.cst-cam.cst-rec .cst-cam__rec i { background: #ff3b5c; box-shadow: 0 0 10px #ff3b5c; animation: cstBlink 1s steps(2) infinite; }
@keyframes cstBlink { 50% { opacity: .25; } }
.cst-cam__tip { position: absolute; left: 50%; bottom: 72px; transform: translateX(-50%); text-align: center; color: rgba(255, 255, 255, .85); font-size: 13px; font-weight: 500; line-height: 1.35; width: 78%; }
.cst-cam__tip small { display: block; font-size: 11px; color: rgba(255, 255, 255, .5); margin-top: 3px; }
.cst-cam__wave { position: absolute; left: 20px; right: 20px; bottom: 20px; height: 34px; display: flex; align-items: center; justify-content: center; gap: 3px; }
.cst-cam__wave i { width: 3px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .5); transition: height .12s ease; }
.cst-cam.cst-rec .cst-cam__wave i { background: var(--pinkl); }
.cst-cam__count { position: absolute; inset: 0; display: grid; place-items: center; font-size: 140px; font-weight: 800; letter-spacing: -6px; color: #fff; text-shadow: 0 10px 40px rgba(0, 0, 0, .5); pointer-events: none; }
.cst-cam__count span { animation: cstCountIn .95s var(--ease-out) both; }
@keyframes cstCountIn { 0% { opacity: 0; transform: scale(1.6); } 30% { opacity: 1; transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: scale(.9); } }
.cst-cam__prompt { position: absolute; left: 16px; right: 16px; bottom: 66px; padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, .12); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); color: #fff; animation: cstPromptIn .5s var(--ease-out) both; }
@keyframes cstPromptIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.cst-cam__prompt b { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; color: var(--pinkl); margin-bottom: 4px; }
.cst-cam__prompt span { font-size: 15px; font-weight: 500; line-height: 1.3; letter-spacing: -.2px; }
.cst-cam__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 66px; height: 66px; border-radius: 50%; border: 0; cursor: pointer; background: rgba(255, 255, 255, .9); color: var(--brand); display: grid; place-items: center; box-shadow: 0 14px 34px rgba(0, 0, 0, .4); animation: cstPop .5s var(--ease-spring) both; }
.cst-cam__play svg { width: 26px; height: 26px; margin-left: 3px; }
.cst-cam__dur { position: absolute; left: 16px; bottom: 16px; padding: 6px 10px; border-radius: 100px; background: rgba(0, 0, 0, .45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; font-family: var(--mono); font-size: 11.5px; }
.cst-rec-row { display: flex; align-items: center; justify-content: center; gap: 28px; margin-top: 22px; }
.cst-rec-btn { width: 78px; height: 78px; border-radius: 50%; border: 0; cursor: pointer; background: transparent; position: relative; display: grid; place-items: center; }
.cst-rec-btn::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 4px solid rgba(255, 255, 255, .85); transition: transform .3s var(--ease-out); }
.cst-rec-btn i { width: 60px; height: 60px; border-radius: 50%; background: #ff3b5c; transition: all .3s var(--ease-out); box-shadow: 0 0 0 0 rgba(255, 59, 92, .5); }
.cst-rec-btn:active i { transform: scale(.9); }
.cst-rec-btn.cst-on i { width: 30px; height: 30px; border-radius: 8px; animation: cstRecPulse 1.4s ease-in-out infinite; }
@keyframes cstRecPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 59, 92, .5); } 50% { box-shadow: 0 0 0 14px rgba(255, 59, 92, 0); } }
.cst-rec-side { width: 50px; height: 50px; border-radius: 50%; border: 0; cursor: pointer; background: rgba(255, 255, 255, .12); color: #fff; display: grid; place-items: center; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform .14s var(--ease-out); position: relative; }
.cst-rec-side:active { transform: scale(.9); }
.cst-rec-side svg { width: 20px; height: 20px; }
.cst-rec-side small { position: absolute; top: 100%; margin-top: 6px; font-size: 10.5px; color: rgba(255, 255, 255, .55); white-space: nowrap; left: 50%; transform: translateX(-50%); }
.cst-brief { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 18px; }
.cst-brief div { padding: 12px 12px; border-radius: 14px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.cst-brief svg { width: 18px; height: 18px; color: var(--pinkl); margin-bottom: 8px; }
.cst-brief b { display: block; font-size: 12.5px; font-weight: 600; line-height: 1.2; color: #fff; }
.cst-brief span { display: block; font-size: 11px; line-height: 1.3; color: rgba(255, 255, 255, .5); margin-top: 2px; }
.cst-ba { position: relative; margin-top: 18px; border-radius: 24px; overflow: hidden; aspect-ratio: 9 / 16; background: #f0e6ed; box-shadow: 0 24px 50px rgba(20, 4, 12, .14), inset 0 0 0 1px rgba(12, 14, 18, .05); touch-action: none; user-select: none; -webkit-user-select: none; }
.cst-ba__layer { position: absolute; inset: 0; }
.cst-ba__layer .cst-fig { width: 100%; height: 100%; object-fit: cover; }
.cst-ba__layer--after { clip-path: inset(0 0 0 var(--x, 50%)); }
.cst-ba__al { position: absolute; inset: 0; transform-origin: center; will-change: transform; }
.cst-ba__al .cst-fig { width: 100%; height: 100%; object-fit: cover; }
.cst-sheet__acts { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.cst-sheet__acts .cst-second { margin: 0; }
.cst-ba__bar { position: absolute; top: 0; bottom: 0; left: var(--x, 50%); width: 2px; background: #fff; transform: translateX(-1px); box-shadow: 0 0 0 1px rgba(20, 4, 12, .1), 0 0 24px rgba(0, 0, 0, .25); }
.cst-ba__handle { position: absolute; top: 50%; left: var(--x, 50%); transform: translate(-50%, -50%); width: 48px; height: 48px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 10px 26px rgba(20, 4, 12, .26); color: var(--brand); cursor: ew-resize; }
.cst-ba__handle svg { width: 22px; height: 22px; }
.cst-ba.cst-drag .cst-ba__handle { transform: translate(-50%, -50%) scale(1.08); }
.cst-ba__lbl { position: absolute; top: 12px; padding: 6px 11px; border-radius: 100px; background: rgba(255, 255, 255, .92); font-size: 11.5px; font-weight: 600; color: var(--brand); box-shadow: 0 2px 10px rgba(20, 4, 12, .12); display: inline-flex; gap: 6px; align-items: baseline; transition: opacity .2s; }
.cst-ba__lbl small { font-family: var(--mono); font-size: 10px; color: var(--ink50); font-weight: 400; }
.cst-ba__lbl--a { left: 12px; }
.cst-ba__lbl--b { right: 12px; }
.cst-ba__hint { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); padding: 6px 11px; border-radius: 100px; background: rgba(12, 14, 18, .55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; font-size: 11px; white-space: nowrap; animation: cstHintFade 4s ease forwards; pointer-events: none; }
@keyframes cstHintFade { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
.cst-ba__empty { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: var(--ink50); padding: 20px; }
.cst-ba__empty b { display: block; color: var(--ink); font-size: 15px; margin-bottom: 4px; }
.cst-ba__empty svg { width: 28px; height: 28px; margin: 0 auto 8px; color: var(--pinkd); }
.cst-seg { display: flex; position: relative; background: #ece5ea; border-radius: 14px; padding: 4px; margin-top: 18px; }
.cst-seg__ind { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 3); border-radius: 11px; background: #fff; box-shadow: 0 3px 10px rgba(20, 4, 12, .12); transition: transform .35s var(--ease-spring); }
.cst-seg button { position: relative; z-index: 1; flex: 1 1 0; min-height: 40px; border: 0; cursor: pointer; background: transparent; font-family: var(--font); font-size: 14px; font-weight: 500; color: var(--ink50); border-radius: 11px; transition: color .2s; }
.cst-seg button.cst-on { color: var(--ink); font-weight: 600; }
.cst-toggle { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: var(--r-inset); padding: 13px 14px; box-shadow: inset 0 0 0 1px rgba(12, 14, 18, .05); margin-top: 14px; cursor: pointer; user-select: none; }
.cst-toggle__b { flex: 1 1 auto; min-width: 0; }
.cst-toggle__b b { display: block; font-size: 14px; font-weight: 600; letter-spacing: -.2px; }
.cst-toggle__b span { display: block; font-size: 12.5px; line-height: 1.35; color: var(--ink36); margin-top: 2px; }
.cst-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.cst-sw { flex: 0 0 auto; width: 50px; height: 30px; border-radius: 100px; background: rgba(12, 14, 18, .14); position: relative; transition: background .25s ease; }
.cst-sw::after { content: ""; position: absolute; left: 3px; top: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); transition: transform .3s var(--ease-spring); }
.cst-toggle input:checked + .cst-sw { background: var(--brand); }
.cst-toggle input:checked + .cst-sw::after { transform: translateX(20px); }
.cst-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.cst-field { width: 100%; margin-top: 10px; border: 0; background: #fff; border-radius: 14px; padding: 14px 16px; font-family: var(--font); font-size: 16px; color: var(--ink); outline: none; box-shadow: inset 0 0 0 1px rgba(12, 14, 18, .1); }
.cst-field:focus { box-shadow: inset 0 0 0 1.5px var(--brand); }
.cst-chip { min-height: 40px; padding: 0 14px; border: 0; cursor: pointer; border-radius: 100px; background: #fff; box-shadow: inset 0 0 0 1px rgba(12, 14, 18, .08); font-family: var(--font); font-size: 13.5px; font-weight: 500; color: var(--ink70); transition: all .18s var(--ease-out); }
.cst-chip:hover { background: #f6eef3; }
.cst-chip:active { transform: scale(.95); }
.cst-chip.cst-on { background: var(--brand); color: #fff; box-shadow: none; }
.cst-lbl { display: block; font-size: 13px; font-weight: 600; letter-spacing: -.1px; margin: 22px 0 10px; }
.cst-lbl span { font-weight: 400; color: var(--ink36); margin-left: 6px; }
.cst-check { display: flex; align-items: flex-start; gap: 13px; width: 100%; text-align: left; border: 0; cursor: pointer; background: #fff; border-radius: 18px; padding: 15px 16px; margin-top: 10px; font-family: var(--font); box-shadow: 0 8px 24px rgba(20, 4, 12, .06), inset 0 0 0 1px rgba(12, 14, 18, .05); transition: background .2s, box-shadow .2s, transform .14s var(--ease-out); }
.cst-check:active { transform: scale(.985); }
.cst-check.cst-on { background: #fdf3f8; box-shadow: 0 8px 24px rgba(224, 81, 143, .12), inset 0 0 0 1.5px rgba(224, 81, 143, .5); }
.cst-check__ck { width: 26px; height: 26px; flex: 0 0 auto; border-radius: 8px; box-shadow: inset 0 0 0 1.5px rgba(12, 14, 18, .18); display: grid; place-items: center; color: #fff; margin-top: 1px; transition: all .25s var(--ease-spring); }
.cst-check__ck svg { width: 15px; height: 15px; opacity: 0; transform: scale(.4); transition: all .25s var(--ease-spring); }
.cst-check.cst-on .cst-check__ck { background: var(--pink); box-shadow: none; transform: scale(1.06); }
.cst-check.cst-on .cst-check__ck svg { opacity: 1; transform: none; }
.cst-check__t { font-size: 14.5px; font-weight: 600; letter-spacing: -.2px; line-height: 1.3; display: block; }
.cst-check__d { display: block; font-size: 12.5px; color: var(--ink50); line-height: 1.4; margin-top: 3px; font-weight: 400; }
.cst-send-scene { display: grid; place-items: center; flex: 1 1 auto; text-align: center; padding: 20px; position: relative; }
.cst-ring-big { position: relative; width: 132px; height: 132px; margin: 0 auto; }
.cst-ring-big svg { width: 132px; height: 132px; transform: rotate(-90deg); }
.cst-ring-big circle { fill: none; stroke-width: 7; stroke-linecap: round; }
.cst-ring-big .cst-bg { stroke: rgba(255, 255, 255, .14); }
.cst-ring-big .cst-fg { stroke: var(--pinkl); stroke-dasharray: 377; stroke-dashoffset: 377; transition: stroke-dashoffset .3s linear; filter: drop-shadow(0 0 10px rgba(246, 168, 205, .7)); }
.cst-ring-big span { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--mono); font-size: 26px; font-weight: 600; letter-spacing: -1px; color: #fff; }
.cst-send-title { font-size: 26px; font-weight: 700; letter-spacing: -.8px; margin: 26px 0 0; }
.cst-send-sub { font-size: 14px; color: rgba(255, 255, 255, .6); margin: 8px auto 0; max-width: 28ch; line-height: 1.45; }
.cst-send-items { display: flex; gap: 8px; justify-content: center; margin-top: 22px; flex-wrap: wrap; }
.cst-send-items span { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 100px; background: rgba(255, 255, 255, .1); font-size: 12.5px; color: rgba(255, 255, 255, .75); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.cst-send-items svg { width: 13px; height: 13px; color: var(--pinkl); }
.cst-timeline { margin-top: 20px; background: #fff; border-radius: 20px; padding: 6px 18px; box-shadow: 0 8px 24px rgba(20, 4, 12, .06), inset 0 0 0 1px rgba(12, 14, 18, .035); }
.cst-tstep { display: grid; grid-template-columns: 28px 1fr; column-gap: 14px; align-items: start; padding: 14px 0; position: relative; }
.cst-tstep + .cst-tstep::before { content: ""; position: absolute; left: 13px; top: -16px; height: 30px; width: 2px; background: var(--ink10); }
.cst-tstep.cst-done + .cst-tstep::before { background: var(--brand); }
.cst-tstep__ic { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 2px var(--ink10); color: #fff; background: #fff; position: relative; z-index: 1; margin-top: 1px; }
.cst-tstep__ic svg { width: 15px; height: 15px; stroke-width: 2.6; }
.cst-tstep.cst-done .cst-tstep__ic { background: var(--brand); box-shadow: none; }
.cst-tstep.cst-now .cst-tstep__ic { box-shadow: inset 0 0 0 2px var(--brand); }
.cst-tstep__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--brand); animation: cstPulse 1.6s ease-in-out infinite; }
.cst-tstep__b { display: flex; flex-direction: column; gap: 2px; padding-top: 4px; }
.cst-tstep__b b { font-size: 14.5px; font-weight: 600; letter-spacing: -.2px; line-height: 1.25; }
.cst-tstep__b span { font-size: 12.5px; line-height: 1.4; color: var(--ink50); }
.cst-tstep.cst-next .cst-tstep__b b, .cst-tstep.cst-next .cst-tstep__b span { color: var(--ink36); }
.cst-tstep .cst-tstep__ic { color: #fff; }
.cst-confetti { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.cst-toast { position: absolute; left: 50%; bottom: auto; top: calc(var(--safe-top) + 58px); transform: translate(-50%, 16px); z-index: 60; background: #fff; color: var(--brand); font-size: 13.5px; font-weight: 500; padding: 13px 20px; border-radius: 100px; opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .35s var(--ease-spring); max-width: 80vw; text-align: center; box-shadow: 0 16px 40px rgba(0, 0, 0, .35); }
.cst-toast.cst-show { opacity: 1; transform: translate(-50%, 0); }
.cst-fig { display: block; object-fit: cover; object-position: top center; background: linear-gradient(180deg, #f3ece8, #e8dcd6); }
.cst-scrim { position: absolute; inset: 0; z-index: 30; display: flex; align-items: flex-end; background: rgba(20, 4, 12, .45); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: cstFadeIn .2s ease; }
.cst-scrim[hidden] { display: none; }
.cst-sheet { width: 100%; max-height: 82%; display: flex; flex-direction: column; background: #fff; border-radius: var(--r-sheet) var(--r-sheet) 0 0; padding: 12px 20px 36px; color: var(--ink); box-shadow: 0 -18px 50px rgba(20, 4, 12, .22); animation: cstSheetUp .38s var(--ease-out); }
@keyframes cstSheetUp { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.cst-sheet__grip { width: 40px; height: 4px; border-radius: 3px; background: var(--ink22); margin: 0 auto 16px; flex: 0 0 auto; }
.cst-sheet h2 { font-size: 20px; font-weight: 700; letter-spacing: -.5px; margin: 0; }
.cst-sheet p { font-size: 13.5px; line-height: 1.5; color: var(--ink50); margin: 10px 0 0; }
.cst-sheet p b { color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  :where(.cst) *, :where(.cst) *::before, :where(.cst) *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .cst-h1--hero .cst-w { opacity: 1; transform: none; }
}

/* ==========================================================================
   Дополнения к макету: живая камера и загрузка.
   ========================================================================== */
/* Превью фронталки зеркалим, как привыкли в любой камере; запись идёт
   без зеркала — так человек выглядит на видео для других. */
.cst-cam__live { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); background: #0e0509; }
.cst-cam.cst-live .cst-cam__bg { opacity: 0; transition: opacity .4s ease; }
.cst-cam.cst-live .cst-cam__guide path { stroke: rgba(255, 255, 255, .5); }
.cst-cam__review { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #0e0509; }
.cst-cam__tip b { display: block; font-weight: 600; }
.cst-cam__prompt small { display: block; margin-top: 6px; font-size: 11px; color: rgba(255, 255, 255, .55); }
/* Камеры нет (старый вебвью, запрет доступа) — честно говорим и даём два
   рабочих пути вместо пустого чёрного квадрата. */
.cst-cam__off { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px; text-align: center; color: rgba(255, 255, 255, .78); font-size: 13px; line-height: 1.45; }
.cst-cam__off svg { width: 30px; height: 30px; color: var(--pinkl); margin-bottom: 4px; }
.cst-cam__off b { font-size: 16px; color: #fff; font-weight: 600; letter-spacing: -.2px; }
.cst-rec-btn:disabled { opacity: .35; pointer-events: none; }
/* Три вопроса — всегда на виду: и в шторке «Подсказки», и там, где камеры нет. */
.cst-qs { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.cst-qs__i { display: flex; gap: 12px; align-items: baseline; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); font-size: 14px; line-height: 1.35; color: #fff; }
.cst-qs__i b { font-family: var(--mono); font-size: 11px; color: var(--pinkl); flex: 0 0 auto; }
.cst-sheet .cst-qs__i { background: #fbf5f9; box-shadow: none; color: var(--ink); }
.cst-sheet .cst-qs__i b { color: var(--pinkd); }
/* Прогресс загрузки прямо в кнопке: заливка слева направо. */
.cst-cta.cst-busy { pointer-events: none; background-image: linear-gradient(90deg, rgba(255, 255, 255, .22) var(--p, 0%), transparent var(--p, 0%)); }
.cst-cta--light.cst-busy { background-image: linear-gradient(90deg, rgba(29, 2, 12, .12) var(--p, 0%), transparent var(--p, 0%)); }
/* Своё фото грузится — кадр под вуалью со спиннером. */
.cst-veil { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; background: rgba(255, 247, 253, .66); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.cst-veil i { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(29, 2, 12, .15); border-top-color: var(--brand); animation: cstSpin .8s linear infinite; }
@keyframes cstSpin { to { transform: rotate(360deg); } }
/* Настоящий кадр видео вместо иллюстрации — в карточке и на обложке. */
.cst-hcard__thumb video, .cst-cv__slot--full video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #2a1020; }
.cst-strip__note .cst-linkline + .cst-linkline { margin-left: 4px; }
.cst-brief div.cst-warn svg { color: #ff8fa8; }
/* Перерисовка на месте (смена ракурса, своё фото): без анимаций входа —
   иначе экран заново «въезжал» и казалось, что страница прыгает. */
.cst-still .cst-rise, .cst-still .cst-pop { animation: none; }
.cst-still .cst-tk.cst-pop { animation: none; }
.cst-still .cst-h1--hero .cst-w { animation: none; opacity: 1; transform: none; }
/* Вопрос-суфлёр — кнопка: нажал, и появился следующий. */
button.cst-cam__prompt { border: 0; text-align: left; font-family: var(--font); cursor: pointer; }
/* «Скрыть лицо»: пока детектор ищет лицо — кадр размыт; не нашёл — размыт и дальше. */
.cst-pf.cst-pf--wait .cst-pf__img, .cst-pf.cst-pf--blur .cst-pf__img { filter: blur(22px) saturate(.7); transform: scale(1.12); }

/* Плашка «Установите Re:forma» (app.css: fixed у body, z-index 70) лежит ВЫШЕ
   всего #device: у него isolation: isolate, и z-index оверлея (79) работает
   только внутри. На стенде она закрыла «Начать» на первом экране истории —
   пока история открыта, плашки нет (после закрытия она возвращается). */
body.cst-open .install-banner { visibility: hidden; pointer-events: none; }

/* ---- v3: оверлей над всем приложением (таб-бар, листы), а не внутри рамки #device v2 ---- */
#rf-app > .cst { position: fixed; z-index: 310; }
/* v2 брала --safe-top с корня рамки #device; в v3 такой переменной нет, и `padding: calc(var(--safe-top) + 10px) …`
   у .cst-top отбрасывался целиком — верх экрана прилипал к системной полосе (в фулскрине Telegram — под кнопки
   «×» и «⋯»). Берём системную зону оболочки (инсеты SDK или env, 00-tokens.css). */
#rf-app > .cst { --safe-top: var(--rf-safe-top, 0px); }
/* Низ — то же: в фулскрине Telegram env(safe-area-inset-bottom) = 0, а «Домой»-полоса iPhone есть. */
.cst-foot { padding-bottom: calc(16px + var(--rf-safe-bottom, 0px)); }
/* ---- v3: кнопка «play» по центру без transform: cstPop заканчивается на transform: none и стирал
   translate(-50%, -50%) — круг съезжал вбок. То же у обложек «Историй». */
.cst-cam__play, .cst-cv__play, .cst-hcard__play { left: 0; right: 0; top: 0; bottom: 0; margin: auto; transform: none; }

/* ==========================================================================
   v3: «Истории» v2 — макет владельца 10.10.2026 (белый экран, тёмная кнопка, без розового).
   Экраны: камера видео-рассказа, «Посмотрите запись», «Фото до и после», «Свежее фото»,
   «Так увидят историю». Классы `csv-` — только здесь; шапка и шаги — те же `cst-top`/`cst-steps`.
   ========================================================================== */
.cst-scr--w { background: #fff; color: #101014; --ink: #101014; --brand: #101014; }
.cst-scr--w .cst-top { padding-top: calc(var(--safe-top) + 6px); padding-left: 14px; padding-right: 14px; }
.cst-scr--w .cst-icb { width: 38px; height: 38px; background: #f1f1f4; color: #101014; box-shadow: none; }
.cst-scr--w .cst-top__k { color: #8b8a91; font-size: 15px; font-weight: 500; letter-spacing: -.2px; text-transform: none; font-family: var(--font); outline: none; }
.cst-scr--w .cst-steps { margin: 6px 6px 0; }
.cst-scr--w .cst-steps i { background: #e3e3e8; }
.cst-scr--w .cst-steps i::after { background: #101014; }
.cst-scr--w .cst-foot { background: linear-gradient(rgba(255, 255, 255, 0), #fff 22px); padding-left: 16px; padding-right: 16px; }
.cst-scr--w .cst-cta { background: #101014; color: #fff; height: 56px; border-radius: 100px; font-size: 16.5px; font-weight: 600; letter-spacing: -.2px; box-shadow: none; }
.cst-scr--w .cst-cta:disabled { opacity: .35; }
.cst-scr--w .cst-ghost { color: #55545b; }
.cst-scr--w .cst-body.csv-body { padding: 16px 16px 24px; }
.csv-h1 { font-size: 25px; line-height: 1.12; letter-spacing: -.6px; font-weight: 700; margin: 2px 4px 0; outline: none; text-wrap: balance; }
.csv-lede { font-size: 14.5px; line-height: 1.4; color: #77767d; margin: 5px 4px 0; }
.csv-bh { display: flex; justify-content: space-between; align-items: baseline; margin: 20px 4px 8px; font-size: 13px; font-weight: 600; color: #8b8a91; font-variant-numeric: tabular-nums; }
.csv-bh b { color: #101014; font-size: 15px; letter-spacing: -.2px; }

/* ---- камера и просмотр: кадр во всю свободную высоту, под ним кнопка и тихая строка ---- */
.csv-cam { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 10px 12px 0; }
.csv-vf { position: relative; flex: 1 1 auto; min-height: 220px; border-radius: 30px; overflow: hidden; background: linear-gradient(180deg, #ebe4dd, #d9cfc6); isolation: isolate; }
.csv-live, .csv-rev, .csv-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* превью фронталки — зеркалом, как в любой камере; запись и снимок идут без зеркала */
.csv-live { transform: scaleX(-1); opacity: 0; transition: opacity .35s ease; }
.csv-live--back { transform: none; }
.csv-vf--live .csv-live { opacity: 1; }
.csv-rev, .csv-still { background: #e8e2dc; }
.csv-vf--review .csv-rev { object-fit: contain; }
.csv-vf--flash::after { content: ""; position: absolute; inset: 0; background: #fff; animation: csvFlash .45s ease-out both; pointer-events: none; z-index: 6; }
@keyframes csvFlash { from { opacity: .9; } to { opacity: 0; } }
/* время и подсказка — единственное, что лежит поверх кадра */
.csv-pill { position: absolute; top: 14px; z-index: 4; height: 32px; border-radius: 100px; padding: 0 12px; display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: #101014; background: rgba(255, 255, 255, .72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); font-variant-numeric: tabular-nums; border: 0; font-family: var(--font); }
.csv-pill--l { left: 14px; }
.csv-pill--r { right: 14px; color: #55545b; font-weight: 500; }
.csv-pill i { width: 8px; height: 8px; border-radius: 50%; background: #c2c1c7; }
.csv-rec .csv-pill i { background: #ff3b30; animation: cstBlink 1.2s ease-in-out infinite; }
.csv-pill--btn { cursor: pointer; }
.csv-tip { position: absolute; left: 0; right: 0; bottom: 18px; margin: 0 auto; width: fit-content; max-width: 88%; z-index: 4; background: rgba(255, 255, 255, .78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: 18px; padding: 10px 16px; text-align: center; color: #101014; transition: opacity .3s; text-wrap: balance; }
.csv-tip b { display: block; font-size: 15px; font-weight: 600; letter-spacing: -.2px; }
.csv-tip small { display: block; font-size: 12.5px; color: #6f6d76; margin-top: 1px; }
.csv-rec .csv-tip { opacity: 0; }
/* кольцо: тонкие белые риски; позицию и размер задаёт faceWatch одним transform (без раскладки) */
.csv-ring { position: absolute; left: 0; top: 0; width: 234px; height: 300px; transform-origin: 0 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .45s ease; will-change: transform; }
.csv-ring svg { width: 100%; height: 100%; overflow: visible; display: block; }
.csv-ring line { stroke: #fff; stroke-width: 2.2; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: .45; transition: opacity .3s ease; filter: drop-shadow(0 0 1px rgba(0, 0, 0, .18)); }
.csv-ring line.on { opacity: 1; }
.csv-ring--on { opacity: 1; }
.csv-ring--gone, .csv-rec .csv-ring { opacity: 0; }
/* ищем лицо: по кольцу бежит светлая волна, как в настройке Face ID */
.csv-ring--seek line { animation: csvSeek 1.6s linear infinite; animation-delay: calc(var(--i) * 25ms); }
@keyframes csvSeek { 0%, 62%, 100% { opacity: .35; } 8% { opacity: 1; } }
/* вопрос лежит в кадре внизу, на стекле; стрелка — следующий */
.csv-q { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 4; display: flex; gap: 12px; align-items: center; text-align: left; border: 0; cursor: pointer; font-family: var(--font); color: #101014; background: rgba(255, 255, 255, .8); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-radius: 22px; padding: 13px 14px 14px 16px; }
.csv-q[hidden] { display: none; }
.csv-q--in { animation: csvQIn .35s var(--ease-out) both; }
@keyframes csvQIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.csv-q__k { flex: 1; min-width: 0; }
.csv-q small { display: block; font-size: 12px; font-weight: 600; color: #8b8a91; letter-spacing: .02em; text-transform: uppercase; }
.csv-q b { display: block; font-size: 17px; line-height: 1.25; letter-spacing: -.3px; margin-top: 2px; font-weight: 600; }
.csv-q__nx { width: 38px; height: 38px; border-radius: 50%; background: #101014; color: #fff; display: grid; place-items: center; flex: 0 0 auto; }
.csv-q__nx svg { width: 18px; height: 18px; }
.csv-q--last .csv-q__nx { display: none; }
.csv-count span { color: #fff; text-shadow: 0 8px 30px rgba(0, 0, 0, .35); }
/* кнопка записи: тёмная дуга до минуты; во время записи — квадрат */
.csv-ctrl { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 14px 22px 0; }
.csv-side { width: 64px; display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 12px; color: #77767d; border: 0; background: none; cursor: pointer; font-family: var(--font); padding: 0; }
.csv-side i { width: 48px; height: 48px; border-radius: 50%; background: #f1f1f4; color: #101014; display: grid; place-items: center; transition: transform .14s var(--ease-out); }
.csv-side:active i { transform: scale(.92); }
.csv-side svg { width: 20px; height: 20px; }
.csv-rec .csv-side { opacity: .35; pointer-events: none; }
.csv-rb { width: 84px; height: 84px; position: relative; display: grid; place-items: center; border: 0; background: none; cursor: pointer; padding: 0; }
.csv-rb svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.csv-rb__tr { fill: none; stroke: #e6e6ea; stroke-width: 4; }
.csv-rb__pr { fill: none; stroke: #101014; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset .25s linear; }
.csv-rb b { width: 64px; height: 64px; border-radius: 50%; background: #ff3b30; transition: all .3s var(--ease-out); }
.csv-rb--on b { width: 30px; height: 30px; border-radius: 9px; }
.csv-rb--photo b { background: #fff; box-shadow: inset 0 0 0 2px #101014; }
.csv-rb:disabled { opacity: .35; cursor: default; }
.csv-rb:active b { transform: scale(.94); }
/* проверки — одна тихая строка под кнопкой: точка и слово, без цветных плашек */
.csv-stat { flex: 0 0 auto; min-height: 34px; padding: 8px 8px 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; color: #8b8a91; text-align: center; }
.csv-st { display: inline-flex; align-items: center; gap: 5px; }
.csv-st i { width: 6px; height: 6px; border-radius: 50%; background: #c7c7cc; flex: 0 0 auto; }
.csv-st:not([class*="csv-st--"]) i { display: none; }
.csv-st--ok i { background: #34c759; }
.csv-st--wait i { background: #c7c7cc; }
.csv-st--warn { color: #6f5a2a; }
.csv-st--warn i { background: #f0b429; }
.csv-scr-pad { padding-bottom: calc(14px + var(--rf-safe-bottom, 0px)); }
.cst-scr--w[data-screen="video"] .csv-cam, .cst-scr--w[data-screen="snap"] .csv-cam:last-child { padding-bottom: calc(14px + var(--rf-safe-bottom, 0px)); }
.csv-play { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; z-index: 4; width: 64px; height: 64px; border-radius: 50%; border: 0; cursor: pointer; background: rgba(255, 255, 255, .3); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .6); color: #fff; display: grid; place-items: center; }
.csv-play svg { width: 24px; height: 24px; margin-left: 3px; fill: #fff; }
.csv-play[hidden] { display: none; }
/* камеры нет — честно говорим и даём запасные пути */
.csv-vf--off { display: grid; place-items: center; }
.csv-off { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px; text-align: center; color: #55545b; font-size: 13.5px; line-height: 1.45; }
.csv-off svg { width: 30px; height: 30px; color: #101014; margin-bottom: 4px; }
.csv-off b { font-size: 16px; color: #101014; font-weight: 600; letter-spacing: -.2px; }
.csv-fallback { flex: 0 0 auto; padding: 14px 4px 0; display: grid; gap: 8px; }
.cst-scr--w .cst-second { background: #f1f1f4; color: #101014; box-shadow: none; }
.csv-qlist { flex: 0 0 auto; padding: 10px 4px 0; }
.csv-qlist .cst-lbl { color: #8b8a91; }
.csv-foot { flex: 0 0 auto; }
.csv-veil { background: rgba(255, 255, 255, .6); }

/* ---- пара «до/после»: два снимка целиком рядом (3:4, ничего не обрезано) ---- */
.csv-pair { border-radius: 24px; overflow: hidden; background: #fff; }
.csv-pair__two { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; border-radius: 24px; overflow: hidden; }
.csv-body > .csv-pair { margin-top: 16px; }
.csv-pic { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: #efece9; border: 0; padding: 0; font-family: var(--font); }
.csv-pic__fit { position: absolute; inset: 0; }
.csv-pic__im { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.csv-tag { position: absolute; left: 10px; bottom: 10px; z-index: 6; font-size: 12px; font-weight: 600; color: #101014; background: rgba(255, 255, 255, .85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 100px; padding: 4px 10px; }
.csv-tag small { font-weight: 500; color: #77767d; margin-left: 4px; font-size: 12px; }
.csv-pic--empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 14px; text-align: center; cursor: pointer; color: #55545b; font-size: 12px; line-height: 1.35; background: #f5f5f7; }
.csv-pic--empty svg { width: 24px; height: 24px; color: #101014; }
.csv-pic--empty b { font-size: 13.5px; color: #101014; }
.csv-cap { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 12px 16px 14px; background: #fff; border: 1px solid #efeff2; border-top: 0; border-radius: 0 0 24px 24px; }
.csv-cap b { font-size: 17px; letter-spacing: -.3px; }
.csv-cap span { font-size: 13px; color: #77767d; }
.csv-prev .csv-pair { border-radius: 24px 24px 0 0; }
.csv-prev .csv-pair__two { border-radius: 24px 24px 0 0; }
/* мазок: ручка поверх снимка (тянут пальцем); при черновике — мел и размытие кладёт сам экран */
.csv-fc { position: absolute; transform: translate(-50%, -50%) rotate(var(--r, 0deg)); z-index: 5; aspect-ratio: 1000 / 860; touch-action: none; cursor: grab; -webkit-user-select: none; user-select: none; }
.csv-fc[hidden] { display: none; }
.csv-fc__bl, .csv-fc__st { opacity: 0; }
.csv-fc__bl { position: absolute; left: 6%; right: 6%; top: -6%; bottom: -10%; border-radius: 50%; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); -webkit-mask: radial-gradient(closest-side, #000 72%, transparent); mask: radial-gradient(closest-side, #000 72%, transparent); }
.csv-fc__st { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.csv-pic--draft .csv-fc__bl, .csv-pic--draft .csv-fc__st { opacity: 1; }
.csv-fc--drag { cursor: grabbing; }
.csv-fc--hint { animation: csvNudge 1.1s var(--ease-out) 1; }
@keyframes csvNudge { 0%, 100% { transform: translate(-50%, -50%) rotate(var(--r, 0deg)); } 35% { transform: translate(-44%, -50%) rotate(var(--r, 0deg)); } 70% { transform: translate(-55%, -50%) rotate(var(--r, 0deg)); } }

/* ---- настройки: подпись, лицо на фото, «свежее фото» ---- */
.csv-grp { margin-top: 18px; background: #f5f5f7; border-radius: 18px; overflow: hidden; }
.csv-row { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 16px; width: 100%; text-align: left; border: 0; background: none; cursor: pointer; font-family: var(--font); color: #101014; }
.csv-row + .csv-row, .csv-row + .csv-nt { border-top: .5px solid rgba(16, 16, 20, .08); }
.csv-row__k { flex: 1; min-width: 0; }
.csv-row__k b { display: block; font-size: 15.5px; font-weight: 600; letter-spacing: -.2px; }
.csv-row__k small { display: block; font-size: 12.5px; color: #8b8a91; margin-top: 1px; }
.csv-row__v { font-size: 15px; color: #77767d; display: flex; align-items: center; gap: 4px; }
.csv-row__v svg { width: 16px; height: 16px; color: #b7b6bc; }
.csv-sw { width: 51px; height: 31px; border-radius: 100px; background: #e3e3e8; position: relative; transition: background .25s; flex: 0 0 auto; }
.csv-sw::after { content: ""; position: absolute; left: 2px; top: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .15); transition: transform .25s var(--ease-out); }
.csv-sw--on { background: #101014; }
.csv-sw--on::after { transform: translateX(20px); }
.csv-nt { display: flex; gap: 6px; align-items: flex-start; margin: 0; padding: 10px 16px 14px; font-size: 12.5px; line-height: 1.35; color: #8b8a91; }
.csv-nt[hidden] { display: none; }
.csv-nt svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 1px; }
.csv-legal { font-size: 12px; line-height: 1.45; color: #8b8a91; margin: 0 4px 12px; text-wrap: pretty; }
.csv-link { border: 0; background: none; padding: 0; font: inherit; color: #101014; text-decoration: underline; text-decoration-color: rgba(16, 16, 20, .3); text-underline-offset: 2px; cursor: pointer; }
.csv-why { margin: 8px 0 0; text-align: center; font-size: 12.5px; color: #8b8a91; }
.csv-why[hidden] { display: none; }

/* ---- видео на превью: во всю ширину, в своём формате (по умолчанию 9:16), ничего не обрезано ---- */
.csv-vc { position: relative; width: 100%; aspect-ratio: 9 / 16; border-radius: 24px; overflow: hidden; background: linear-gradient(180deg, #efe9e3 0%, #e2d9d1 55%, #d6ccc3 100%); }
.csv-vc__v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.csv-vc__bars { position: absolute; left: 12px; right: 12px; top: 11px; display: flex; gap: 4px; z-index: 4; }
.csv-vc__bars i { flex: 1; height: 2.5px; border-radius: 2px; background: rgba(255, 255, 255, .5); overflow: hidden; position: relative; }
.csv-vc__bars b { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #fff; }
.csv-vc__mast { position: absolute; left: 14px; top: 22px; z-index: 4; color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .02em; text-shadow: 0 1px 6px rgba(0, 0, 0, .25); }
.csv-vc__play { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: 64px; height: 64px; border-radius: 50%; border: 0; cursor: pointer; background: rgba(255, 255, 255, .3); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .6); display: grid; place-items: center; z-index: 3; color: #fff; transition: opacity .3s; }
.csv-vc__play svg { width: 24px; height: 24px; margin-left: 3px; fill: #fff; }
.csv-vc--pl .csv-vc__play { opacity: 0; pointer-events: none; }
.csv-vc__dur { position: absolute; right: 12px; bottom: 16px; z-index: 4; font-size: 12px; font-weight: 600; color: #fff; background: rgba(0, 0, 0, .3); border-radius: 100px; padding: 4px 9px; font-variant-numeric: tabular-nums; }
.csv-vc__by { position: absolute; left: 0; right: 0; bottom: 0; padding: 60px 70px 15px 16px; background: linear-gradient(transparent, rgba(16, 8, 12, .55)); color: #fff; z-index: 3; pointer-events: none; }
.csv-vc__by b { display: block; font-size: 20px; font-weight: 700; letter-spacing: -.4px; }
.csv-vc__by span { font-size: 12.5px; opacity: .9; }

/* ---- листы: подпись и «Свежее фото» ---- */
.csv-opt { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 62px; padding: 8px 14px; border-radius: 16px; text-align: left; border: 0; background: none; cursor: pointer; font-family: var(--font); color: #101014; }
.csv-opt + .csv-opt { margin-top: 4px; }
.csv-opt--on { background: #f3f3f6; }
.csv-opt:disabled { opacity: .5; cursor: default; }
.csv-opt__k { flex: 1; min-width: 0; }
.csv-opt__k b { display: block; font-size: 16px; font-weight: 600; }
.csv-opt__k small { font-size: 12.5px; color: #8b8a91; }
.csv-opt > svg { width: 18px; height: 18px; color: #b7b6bc; flex: 0 0 auto; }
.csv-opt__rd { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1.6px #c9c8ce; display: grid; place-items: center; flex: 0 0 auto; }
.csv-opt--on .csv-opt__rd { background: #101014; box-shadow: none; }
.csv-opt--on .csv-opt__rd::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff; }
.csv-opt__ic { width: 44px; height: 44px; border-radius: 12px; background: #f1f1f4; display: grid; place-items: center; flex: 0 0 auto; }
.csv-opt__ic svg { width: 22px; height: 22px; }
.csv-opt__ph { width: 44px; height: 58px; border-radius: 10px; overflow: hidden; background: #efece9; flex: 0 0 auto; }
.csv-opt__ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (prefers-reduced-motion: reduce) { .csv-ring--seek line { animation: none; opacity: .5; } .csv-ring { transition: none; } .csv-fc--hint { animation: none; } }
/* фокус: без розового; заголовок получает фокус программно (для чтения с экрана) — рамка ему не нужна */
.cst-scr--w [data-cst-title]:focus-visible, .cst-scr--w .cst-top__k:focus-visible { outline: none; }
.cst-scr--w button:focus-visible, .cst-sheet button:focus-visible { outline-color: #101014; }
/* листы «Историй» — в том же стиле: тёмная кнопка, серая вторая, без розового */
.cst-sheet .cst-cta { background: #101014; box-shadow: none; }
.cst-sheet .cst-second { background: #f1f1f4; color: #101014; }
/* три вопроса — в листе и там, где камеры нет: на белом, без розового */
.cst-sheet .cst-qs__i, .csv-qlist .cst-qs__i { background: #f5f5f7; box-shadow: none; color: #101014; }
.cst-sheet .cst-qs__i b, .csv-qlist .cst-qs__i b { color: #8b8a91; }
.csv-still { object-fit: contain; }
/* мазок «по догадке» (лицо на снимке не нашли): подтвердить «Лицо закрыто» или потянуть мазок */
.csv-guess { display: flex; flex-direction: column; gap: 8px; padding: 10px 16px 14px; border-top: .5px solid rgba(16, 16, 20, .08); font-size: 12.5px; line-height: 1.35; color: #6f5a2a; }
.csv-guess[hidden] { display: none; }
.csv-guess .cst-second { margin-top: 0; min-height: 44px; background: #fff; }

/* ---- src/styles/47-team.css ---- */
/* WS-4 «Команда, связь и календарь»: блоки, которых нет в прототипе как отдельных
   состояний (или которые прототип рисовал тостом). Токены и ритм — как у соседних
   карточек tp-* / ot-* / xs-*; розовый не используем (он только для выбора). */

/* профиль health-коуча: график связи текстом (как записан в профиле) */
.tp-graph{ display: flex; gap: 12px; align-items: flex-start; padding: 14px 0 4px; border-top: 1px solid rgb(239, 239, 239); margin-top: 12px; }
.tp-graph > svg{ flex: 0 0 auto; width: 20px; height: 20px; color: rgb(29, 2, 12); margin-top: 1px; }
.tp-graph b{ display: block; font-size: 15px; font-weight: 600; letter-spacing: -0.2px; color: rgb(17, 17, 17); line-height: 1.35; overflow-wrap: anywhere; }
.tp-graph small{ display: block; font-size: 12.5px; line-height: 1.35; color: rgb(142, 142, 147); margin-top: 3px; }

/* «Встречи»: строка «Добавить в календарь» в листе встречи */
.mt-cal-add{ margin-top: 12px; }

/* «Сообщить, когда появятся окна»: подписка оформлена */
.gt-otmsg .ot-alert{ display: flex; gap: 12px; align-items: flex-start; text-align: left; padding: 14px 16px; border-radius: 18px; background: rgb(247, 247, 248); margin-top: 4px; }
.gt-otmsg .ot-alert > i{ flex: 0 0 auto; width: 34px; height: 34px; border-radius: 12px; background: rgb(255, 255, 255); display: grid; place-items: center; color: rgb(29, 2, 12); }
.gt-otmsg .ot-alert > i svg{ width: 18px; height: 18px; }
.gt-otmsg .ot-alert b{ display: block; font-size: 15px; font-weight: 600; letter-spacing: -0.2px; color: rgb(17, 17, 17); }
.gt-otmsg .ot-alert small{ display: block; font-size: 13px; line-height: 1.4; color: rgb(110, 110, 115); margin-top: 2px; }
.gt-otmsg .ot-alert__x{ display: inline-block; margin-top: 12px; padding: 8px 14px; border: 0; background: none; font-family: inherit; font-size: 14px; font-weight: 600; color: rgb(110, 110, 115); cursor: pointer; }
.gt-otmsg .ot-alert__x[disabled], .gt-otmsg .ot-btn[disabled]{ opacity: .55; cursor: default; }

/* история «Встреч»: «Показать ещё» ждёт сервер */
.xs-more.is-busy{ opacity: .6; pointer-events: none; }

/* поиск по переписке */
.cs-f{ gap: 10px; }
.cs-f > svg{ flex: 0 0 auto; width: 19px; height: 19px; color: rgb(142, 142, 147); }
.cs-f input::-webkit-search-cancel-button{ -webkit-appearance: none; appearance: none; }
.cs-hint{ display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 40px 28px 0; text-align: center; color: rgb(142, 142, 147); }
.cs-hint > svg{ width: 30px; height: 30px; }
.cs-hint p{ margin: 0; font-size: 15px; line-height: 1.45; max-width: 290px; }
.cs-hint--none{ padding-top: 28px; }
.cs-busy{ display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 48px 0 0; font-size: 14px; color: rgb(142, 142, 147); }
.cs-retry{ display: block; margin: 14px auto 0; }
.cs-list{ padding: 0; overflow: hidden; }
.cs-r{ display: block; padding: 13px 16px 14px; border-top: 1px solid rgb(239, 239, 239); cursor: pointer; }
.cs-r:first-child{ border-top: 0; }
.cs-r:active{ background: rgb(247, 247, 248); }
.cs-r__h{ display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cs-r__h b{ font-size: 14px; font-weight: 600; color: rgb(17, 17, 17); letter-spacing: -0.1px; }
.cs-r__h span{ flex: 0 0 auto; font-size: 12.5px; color: rgb(142, 142, 147); font-variant-numeric: tabular-nums; }
.cs-r p{ margin: 4px 0 0; font-size: 15px; line-height: 1.4; color: rgb(60, 60, 67); overflow-wrap: anywhere; }
.cs-r mark{ background: rgba(17, 17, 17, 0.08); color: rgb(17, 17, 17); font-weight: 600; border-radius: 4px; padding: 0 2px; }

/* чат: найденное сообщение коротко подсвечено после перехода из поиска */
.ch-row.ch-hit > div{ box-shadow: 0 0 0 2px rgba(29, 2, 12, 0.35); transition: box-shadow .3s; }

/* ---- src/styles/47-tech-demo.css ---- */
/* «Разбор техники тренером» (20-screens/tech-demo.js) на языке разбора «Техника и разборы» v4 «Кадр»:
 * кадр видео с плеером, отметка на колене (точка, линии, подпись), карточка тренера СВЕРХУ кадра,
 * под кадром — вердикт. Размер сцены задаёт хост (кино — обёртка сцены, сторис — .tqs-tdm).
 * Всё, что движется, двигает JS (transform/opacity по времени сцены): переходов здесь нет, кроме
 * короткого проявления ролика/постера. Розовый — только точка, пунктир голени, засечка на шкале
 * и точка подписи. Тень — только у подписи на кадре (как в v4). */
.tdm, .tdm * { box-sizing: border-box; }
.tdm { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; color: #141418;
  transform-origin: 50% 50%; opacity: 0; -webkit-user-select: none; user-select: none; pointer-events: none; }
/* кадр видео */
.tdm-f { position: relative; flex: 1; min-height: 0; border-radius: 24px; overflow: hidden; isolation: isolate; background: #17171b; color: #fff; }
/* слой кадра — в пикселях ролика (720×1080), масштаб и сдвиг ставит JS; размер дублирует tech-demo.js (VW×VH) */
.tdm-z { position: absolute; left: 0; top: 0; width: 720px; height: 1080px; transform-origin: 0 0; }
.tdm-z > video, .tdm-z > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .18s ease; }
.tdm.is-v .tdm-v, .tdm.is-po .tdm-po { opacity: 1; }
/* отметка: координаты — экранные (JS), толщина линий не зависит от наезда */
.tdm-svg { position: absolute; left: 0; top: 0; overflow: visible; }
.tdm-svg line { fill: none; stroke-linecap: round; opacity: 0; }
.tdm-thigh, .tdm-plumb { stroke: #fff; stroke-width: 2.2px; }
.tdm-shin { stroke: #e0518f; stroke-width: 3.4px; stroke-dasharray: 7 6; }
.tdm-dot { fill: #e0518f; opacity: 0; }
.tdm-lab { position: absolute; left: 0; top: 0; z-index: 2; height: 28px; padding: 0 11px 0 9px; border-radius: 14px; background: #fff; color: #141418;
  display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; letter-spacing: -.012em; white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .12); opacity: 0; }
.tdm-lab i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #e0518f; }
/* карточка тренера — сверху кадра: отметка на ногах, стопу и голень не закрывает */
.tdm-note { position: absolute; left: 8px; right: 8px; top: 8px; z-index: 3; display: flex; align-items: flex-start; gap: 9px; padding: 10px 12px 11px 10px;
  border-radius: 18px; background: #fff; color: #141418; opacity: 0; }
.tdm-note > div { flex: 1; min-width: 0; }
.tdm-note small { display: block; font-size: 12.5px; line-height: 15px; font-weight: 500; color: #6f6f75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tdm-note p { margin: 2px 0 0; font-size: 14.5px; line-height: 19px; font-weight: 560; letter-spacing: -.014em; color: #141418; }
.tdm-w { white-space: nowrap; }
.tdm-note p i { font-style: normal; opacity: 0; }
.tdm-av { --av-s: 28px; flex: none; width: 28px; height: 28px; margin-top: 1px; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  background: var(--rf-av-bg); color: var(--rf-av-fg); font-size: 12px; font-weight: 600; }
.tdm-av > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
/* плеер — как в разборе: ▶/❚❚, шкала с засечкой отметки, время, ⤢ (картинка: сцена не нажимается) */
.tdm-bar { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 4; height: 44px; border-radius: 22px; background: rgba(18, 18, 22, .56);
  display: flex; align-items: center; gap: 4px; padding: 0 6px 0 6px; }
.tdm-pp { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; background: #fff; color: #141418; display: grid; place-items: center; }
.tdm-pp svg { grid-area: 1 / 1; width: 14px; height: 14px; fill: currentColor; }
.tdm-i-pl, .tdm.is-pz .tdm-i-pa { display: none; }
.tdm.is-pz .tdm-i-pl { display: block; }
/* ролик ещё грузится (сеть медленная): на месте значка — кольцо загрузки */
.tdm.is-ld .tdm-pp svg { visibility: hidden; }
.tdm.is-ld .tdm-pp::after { content: ""; position: absolute; inset: 8px; border-radius: 50%; border: 2px solid rgba(20, 20, 24, .18); border-top-color: #141418; animation: tdmSpin .8s linear infinite; }
@keyframes tdmSpin { to { transform: rotate(360deg); } }
.tdm-tr { position: relative; flex: 1; height: 3px; margin: 0 8px; border-radius: 2px; background: rgba(255, 255, 255, .3); }
.tdm-fi { position: absolute; inset: 0; border-radius: inherit; background: #fff; transform-origin: 0 50%; transform: scaleX(0); }
.tdm-th { position: absolute; left: 0; top: 50%; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; border-radius: 50%; background: #fff; }
.tdm-tk { position: absolute; top: 50%; width: 4px; height: 13px; margin: -6.5px 0 0 -2px; border-radius: 2px; background: #e0518f; }
.tdm-t { flex: none; min-width: 30px; font-style: normal; font-size: 12.5px; font-weight: 560; text-align: right; font-variant-numeric: tabular-nums; color: #fff; }
.tdm-xp { flex: none; width: 30px; height: 30px; display: grid; place-items: center; }
.tdm-xp svg { width: 18px; height: 18px; color: #fff; }
/* вердикт под кадром; «Пример» — честная пометка: слова тренера в сцене не её */
.tdm-vd { flex: none; height: 44px; display: flex; align-items: flex-end; gap: 8px; padding: 0 4px 1px; }
.tdm-ok { display: flex; align-items: center; gap: 7px; font-size: 19px; line-height: 24px; font-weight: 640; letter-spacing: -.025em; color: #141418; white-space: nowrap; opacity: 0; }
.tdm-ok svg { flex: none; width: 22px; height: 22px; color: #2f9e5f; }
.tdm-ex { margin-left: auto; font-size: 13px; line-height: 24px; font-weight: 500; color: #6f6f75; white-space: nowrap; }

/* вводные сторис (train-45-intro.js, слайд «После разбора»): сцена по центру картинки слайда;
   на высоком экране картинке слайда больше места — наезд на колено и карточка тренера сверху помещаются */
.tqs-tdm { position: relative; height: 100%; display: flex; justify-content: center; }
.tqs-tdm > .tdm { width: min(300px, calc(100% - 44px)); }
@media (min-height: 760px) { .gt-l.tr-intro .tqs[data-slide="feedback"] .tqs-vis { height: 356px; } }
@media (min-height: 830px) { .gt-l.tr-intro .tqs[data-slide="feedback"] .tqs-vis { height: 380px; } }

@media (prefers-reduced-motion: reduce) {
  .tdm-z > video, .tdm-z > img { transition: none; }
  .tdm.is-ld .tdm-pp::after { animation: none; }
}

/* ---- src/styles/47-tech-review-font.css ---- */
/* Generated by scripts/port_review_player.py. Макет: training-video-review/build.py.
 * Same local WOFF2; scoped alias preserves approved 620/640 weights. */
@font-face {
  font-family: 'GeistTechniqueReview';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/static/fonts/geist/gyByhwUxId8gMEwYGFWfOw.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'GeistTechniqueReview';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/static/fonts/geist/gyByhwUxId8gMEwcGFU.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'GeistTechniqueReview';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/static/fonts/geist/gyByhwUxId8gMEwYGFWfOw.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'GeistTechniqueReview';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/static/fonts/geist/gyByhwUxId8gMEwcGFU.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'GeistTechniqueReview';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/static/fonts/geist/gyByhwUxId8gMEwYGFWfOw.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'GeistTechniqueReview';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/static/fonts/geist/gyByhwUxId8gMEwcGFU.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'GeistTechniqueReview';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/static/fonts/geist/gyByhwUxId8gMEwYGFWfOw.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'GeistTechniqueReview';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/static/fonts/geist/gyByhwUxId8gMEwcGFU.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
.tqv, .tqk, .tqx { font-family: GeistTechniqueReview, Geist, -apple-system, system-ui, 'SF Pro Text', sans-serif; }
/* Same compositor bridge as .tqk (47-tech-v4.css), preserving text after sheet motion. */
.trx-layer:has(#trAskText) .trh { font-family: GeistTechniqueReview, Geist, -apple-system, system-ui, 'SF Pro Text', sans-serif; transform: translateZ(0); }

/* ---- src/styles/47-tech-v4.css ---- */
/* «Техника и разборы» v4 «Кадр» (03.10.2026): лента, разбор подхода на видео, «Было → стало»,
 * полный экран, лист отправки видео. Утверждённый макет — /tmp/claude-0/opus-alt/technique/v4
 * (kit4.css + v4.css), перенесён 1:1 по размерам, цветам и кривым.
 *   Монохром #141418 / #5c5c62 / #6f6f75, розовый #e0518f — только точка, линии, засечки на шкале
 *   и «новое»; #a82a61 — секунда отметки на светлом розовом (5,5:1).
 *   Движение — transform/opacity; страницы и листы — (.32,.72,0,1); наезд камеры — (.45,0,.2,1) 1,0 с.
 *   Тень — одна: у ярлыка на кадре (0 4px 14px rgba(0,0,0,.12)); у плашек — нет.
 * Префиксы: tqv-* — экраны, tqk-* — сцена (RF.tq.Stage), tqx-* — лист. */
.rf-app { --tqk-ease: cubic-bezier(.32, .72, 0, 1); --tqk-cam: cubic-bezier(.45, 0, .2, 1); }
.tqv, .tqk, .tqx, .tqv-hubcard, .tqv-full {
  --tq-ink: #141418; --tq-ink2: #5c5c62; --tq-ink3: #6f6f75; --tq-ink4: #a3a3a9;
  --tq-hair: rgba(20, 20, 24, .085); --tq-fill: rgba(20, 20, 24, .045); --tq-fill2: rgba(20, 20, 24, .075);
  --tq-pink: #e0518f; --tq-pink-rgb: 224, 81, 143; --tq-pink-ink: #a82a61; --tq-ok: #2f9e5f;
}
.rf-scr.tqv-scr { background: var(--rf-page); padding-top: var(--rf-safe-top); }
.tqv { position: relative; color: var(--tq-ink); font-size: 16px; line-height: 1.4; letter-spacing: -.01em; -webkit-font-smoothing: antialiased; }
:where(.tqv) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; -webkit-tap-highlight-color: transparent; }
.tqv-nw { white-space: nowrap; }
[hidden].tqk__err, .tqv [hidden], .tqx [hidden] { display: none !important; }

/* навбар: сплошной, тон в тон; линия — только при прокрутке; у ленты заголовок проявляется прокруткой */
.tqv-nav { position: sticky; top: var(--rf-safe-top); z-index: 20; height: 52px; display: grid; grid-template-columns: 52px 1fr 52px; align-items: center; padding: 0 2px; background: var(--rf-page); }
.tqv-nav::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--tq-hair); opacity: 0; transition: opacity .2s; }
.tqv-nav.sc::after { opacity: 1; }
.tqv-nav__b { width: 44px; height: 44px; margin-left: 6px; border-radius: 50%; display: grid !important; place-items: center; color: var(--tq-ink); }
.tqv-nav__b svg { width: 24px; height: 24px; }
.tqv-nav__b:active { background: var(--tq-fill); }
.tqv-nav__t { text-align: center; min-width: 0; }
.tqv-nav__t b { display: block; font-size: 16px; line-height: 20px; font-weight: 600; letter-spacing: -.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tqv-nav__t small { display: block; font-size: 13px; line-height: 17px; color: var(--tq-ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tqv-nav.auto .tqv-nav__t { opacity: 0; transform: translateY(4px); transition: opacity .2s, transform .3s var(--tqk-ease); }
.tqv-nav.auto.sc .tqv-nav__t { opacity: 1; transform: none; }

/* типографика */
.tqv-h1 { font-size: 31px; line-height: 36px; font-weight: 640; letter-spacing: -.032em; margin: 0; }
.tqv-h2 { font-size: 24px; line-height: 30px; font-weight: 620; letter-spacing: -.026em; margin: 0; color: var(--tq-ink); }
.tqv-sub { font-size: 15.5px; line-height: 21px; color: var(--tq-ink2); letter-spacing: -.008em; margin: 6px 0 0; }
.tqv-lbl { padding: 0 16px; margin: 28px 0 4px; font-size: 13px; line-height: 17px; font-weight: 600; color: var(--tq-ink3); letter-spacing: .01em; }
.tqv-sec { font-size: 20px; line-height: 26px; font-weight: 620; letter-spacing: -.024em; margin: 30px 0 6px; }
.tqv-note { font-size: 13.5px; line-height: 18px; color: var(--tq-ink3); margin: 8px 0 0; text-align: center; }

/* кнопки */
.tqv-btn { display: flex !important; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 56px; border-radius: 18px; background: var(--tq-ink) !important; color: #fff !important; font-size: 16.5px !important; font-weight: 600; letter-spacing: -.016em; text-align: center !important; transition: transform .18s cubic-bezier(.2, .8, .2, 1), opacity .2s; }
.tqv-btn:active { transform: scale(.98); }
.tqv-btn svg { width: 20px; height: 20px; flex: 0 0 auto; }
.tqv-btn.fill { background: var(--tq-fill2) !important; color: var(--tq-ink) !important; }
.tqv-btn[disabled] { opacity: .42; pointer-events: none; }
.tqv-tbtn { display: inline-flex !important; align-items: center; gap: 8px; min-height: 44px; padding: 0 2px; font-size: 16px; font-weight: 600; color: var(--tq-ink); }
.tqv-tbtn svg { width: 20px; height: 20px; }

/* глифы статуса — без «таблеток» */
.tqv-gl { display: inline-grid; place-items: center; width: 18px; height: 18px; flex: 0 0 auto; margin-right: 6px; }
.tqv-gl svg { width: 18px; height: 18px; }
.tqv-gl.ok { color: var(--tq-ok); } .tqv-gl.redo, .tqv-gl.fix { color: var(--tq-ink); } .tqv-gl.wait, .tqv-gl.done { color: var(--tq-ink3); }
.tqv-new { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--tq-pink); flex: 0 0 auto; margin-top: 6px; }
.tqv-av { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; background: #eee; }

/* миниатюра: кадр видео клиентки с точкой тренера или значок камеры */
.tqv-th { position: relative; width: 56px; height: 72px; border-radius: 14px; overflow: hidden; flex: 0 0 auto; background: #e9e7ea; display: block; }
.tqv-th video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.tqv-th__ov { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.tqv-th.picto { background: rgba(20, 20, 24, .05); display: grid; place-items: center; color: var(--tq-ink2); }
.tqv-th.picto svg { width: 26px; height: 26px; }

/* строки ленты */
.tqv-list { padding: 0 16px; }
.tqv-row { position: relative; display: flex !important; align-items: flex-start; gap: 14px; width: 100%; padding: 12px 0 !important; text-align: left; color: var(--tq-ink); font: inherit; background: none; border: 0; cursor: pointer; }
.tqv-row + .tqv-row::before { content: ""; position: absolute; top: 0; left: 70px; right: 0; height: 1px; background: var(--tq-hair); }
.tqv-row:active { opacity: .6; }
.tqv-row.is-static { cursor: default; }
.tqv-row.is-static:active { opacity: 1; }
.tqv-row__b { flex: 1; min-width: 0; padding-top: 1px; display: block; }
.tqv-row__t { display: block; font-size: 17px; line-height: 22px; font-weight: 600; letter-spacing: -.016em; }
.tqv-row__s { display: flex; align-items: center; font-size: 15px; line-height: 20px; color: var(--tq-ink); margin-top: 4px; }
.tqv-row__x { display: block; font-size: 14.5px; line-height: 19px; color: var(--tq-ink3); margin-top: 2px; }
/* вход с «Тренировок»: одна карточка из двух строк */
.trh-card.tqv-hubcard { padding: 0 14px !important; border-radius: 22px; background: #fff; }

/* лента */
.tqv-head { padding: 4px 16px 0; }
.tqv-sum { margin: 10px 0 0; font-size: 19px; line-height: 26px; font-weight: 560; letter-spacing: -.02em; }
.tqv-sumn { display: flex; align-items: flex-start; gap: 6px; margin-top: 8px; font-size: 14px; line-height: 18px; color: var(--tq-ink3); }
.tqv-sumn svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 1px; }
.tqv-hero { position: relative; display: block !important; width: calc(100% - 32px); margin: 2px 16px 0; height: clamp(210px, calc(var(--rf-vh, 100vh) - 560px), 300px); border-radius: 24px; overflow: hidden; background: #222 !important; text-align: left; padding: 0 !important; }
.tqv-hero .tqk { position: absolute; inset: 0; border-radius: 0; }
.tqv-hero__g { position: absolute; left: 0; right: 0; bottom: 0; height: 62%; z-index: 8; background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .45)); pointer-events: none; }
.tqv-hero__t { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 9; color: #fff; pointer-events: none; }
.tqv-hero__t b { display: block; font-size: 18px; line-height: 23px; font-weight: 620; letter-spacing: -.018em; }
.tqv-hero__t span { display: block; font-size: 14.5px; line-height: 19px; margin-top: 3px; color: rgba(255, 255, 255, .92); }
.tqv-links { padding: 0 16px; }
.tqv-link-row { position: relative; display: flex !important; align-items: center; gap: 14px; width: 100%; min-height: 56px; padding: 12px 0 !important; text-align: left; }
.tqv-link-row + .tqv-link-row::before { content: ""; position: absolute; top: 0; left: 44px; right: 0; height: 1px; background: var(--tq-hair); }
.tqv-link-row:active { opacity: .6; }
.tqv-link-row .ric { width: 30px; height: 30px; display: grid; place-items: center; color: var(--tq-ink); flex: 0 0 auto; }
.tqv-link-row .ric svg { width: 24px; height: 24px; }
.tqv-link-row .b { flex: 1; min-width: 0; }
.tqv-link-row b { display: block; font-size: 17px; line-height: 22px; font-weight: 580; letter-spacing: -.016em; }
.tqv-link-row small { display: block; font-size: 15px; line-height: 20px; color: var(--tq-ink3); margin-top: 3px; }
.tqv-link-row > svg { width: 18px; height: 18px; color: var(--tq-ink4); flex: 0 0 auto; }
.tqv-morebtn { padding: 16px 16px 0; }
.tqv-skel { padding: 14px 16px 0; display: flex; flex-direction: column; gap: 12px; }
.tqv-skel i { display: block; height: 20px; border-radius: 14px; background: rgba(20, 20, 24, .06); }
.tqv-skel i.v { height: clamp(240px, calc(var(--rf-vh, 100vh) - 380px), 448px); border-radius: 26px; }
.tqv-err { margin: 20px 16px 0; text-align: center; padding: 22px 8px; }
.tqv-err svg { width: 32px; height: 32px; color: var(--tq-ink3); }
.tqv-err b { display: block; font-size: 17px; margin-top: 8px; }
.tqv-err p { font-size: 15px; color: var(--tq-ink2); margin: 6px 0 16px; }

/* пусто: своя схема вместо стока */
.tqv-empty { padding: 0 16px 40px; }
.tqv-diag { margin-top: 14px; border-radius: 22px; background: rgba(20, 20, 24, .035); padding: 14px 10px 10px; }
.tqv-diag svg { display: block; width: 100%; height: auto; }
.tqv-empty .tqv-h2 { margin-top: 20px; }
.tqv-empty .tqv-sub { margin: 8px 0 0; }
.tqv-rules { margin-top: 12px; }
.tqv-rule { display: flex; gap: 12px; align-items: center; min-height: 48px; padding: 6px 0; }
.tqv-rule + .tqv-rule { border-top: 1px solid var(--tq-hair); }
.tqv-rule i { width: 34px; height: 34px; border-radius: 11px; background: var(--tq-fill2); display: grid; place-items: center; flex: 0 0 auto; color: var(--tq-ink); }
.tqv-rule i svg { width: 21px; height: 21px; }
.tqv-rule span { font-size: 15.5px; line-height: 21px; color: var(--tq-ink); }
.tqv-next { display: flex; gap: 12px; align-items: center; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--tq-hair); }
.tqv-next > svg { width: 24px; height: 24px; flex: 0 0 auto; }
.tqv-next b { display: block; font-size: 16px; font-weight: 600; }
.tqv-next span span { display: block; font-size: 14.5px; color: var(--tq-ink3); margin-top: 1px; }

/* разбор: видео — clamp(240, высота − 380, 448); на 600 pt карточка тренера уходит под видео */
.tqv-st { margin: 2px 16px 0; height: clamp(240px, calc(var(--rf-vh, 100vh) - 380px), 448px); }
.tqv-st.short { height: 150px; }
.tqv-slot { margin: 0 16px; display: grid; grid-template-rows: 1fr; transition: grid-template-rows .32s var(--tqk-ease); }
.tqv-slot > .in { overflow: hidden; min-height: 0; }
.tqv-slot.closed { grid-template-rows: 0fr; }
.tqv-slot .tqk__card { position: relative; left: auto; right: auto; top: auto !important; bottom: auto !important; margin-top: 10px; background: #fff; max-height: none; }
.tqv-slot .tqk__card p { -webkit-line-clamp: 3; }
.tqv-cap { padding: 16px 20px 0; min-height: 118px; }
.tqv-k { font-size: 14px; line-height: 18px; color: var(--tq-ink3); font-weight: 520; }
.tqv-k .tcp { color: var(--tq-pink-ink); font-weight: 620; font-variant-numeric: tabular-nums; }
.tqv-t { font-size: 27px; line-height: 33px; font-weight: 640; letter-spacing: -.03em; margin: 4px 0 0; }
.tqv-long { margin: 8px 0 0; font-size: 16px; line-height: 23px; color: var(--tq-ink); }
.tqv-vh { display: flex; align-items: flex-start; gap: 8px; font-size: 26px; line-height: 32px; font-weight: 640; letter-spacing: -.03em; margin: 0; }
.tqv-vh .tqv-gl { width: 26px; height: 26px; margin: 3px 0 0; }
.tqv-vh .tqv-gl svg { width: 26px; height: 26px; }
.tqv-vh--k { margin-top: 4px; }
.tqv-vp { margin: 6px 0 0; font-size: 16px; line-height: 22px; color: var(--tq-ink2); letter-spacing: -.01em; }
.tqv-act { margin-top: 16px; }
.tqv-rv { opacity: 0; transform: translateY(8px); }
.tqv-rv.in { opacity: 1; transform: none; transition: opacity .25s var(--tqk-ease), transform .25s var(--tqk-ease); }
.tqv-more { padding: 0 20px 40px; }
.tqv-more.rv { opacity: 0; transform: translateY(8px); }
.tqv-more.rv.in { opacity: 1; transform: none; transition: opacity .25s var(--tqk-ease), transform .25s var(--tqk-ease); }
.tqv-more .tqv-sec:first-child { margin-top: 26px; }
.tqk-sw { will-change: auto; }
/* «Что исправить»: название и секунда; заметка — карточкой на кадре, длинная — в строке */
.tqv-mk { display: flex !important; gap: 14px; align-items: flex-start; width: 100%; padding: 12px 0 !important; text-align: left; min-height: 56px; }
.tqv-mk + .tqv-mk { border-top: 1px solid var(--tq-hair) !important; }
.tqv-tc { display: inline-flex; align-items: center; justify-content: center; min-width: 54px; height: 32px; margin-top: -5px; padding: 0 10px; border-radius: 11px; background: var(--tq-fill2); color: var(--tq-ink); font-size: 14.5px; font-weight: 600; font-variant-numeric: tabular-nums; flex: 0 0 auto; transition: background .2s, color .2s; }
.tqv-tc.on { background: rgba(var(--tq-pink-rgb), .13); color: var(--tq-pink-ink); }
.tqv-tc.flat { background: transparent; color: var(--tq-ink3); font-weight: 520; padding: 0; justify-content: flex-start; }
.tqv-tcx { width: 54px; height: 32px; margin-top: -5px; flex: 0 0 auto; display: grid; place-items: center; color: var(--tq-ink3); }
.tqv-tcx svg { width: 20px; height: 20px; }
.tqv-mk__b { flex: 1; min-width: 0; display: block; }
.tqv-mk__b b { display: block; font-size: 17px; line-height: 22px; font-weight: 600; color: var(--tq-ink); letter-spacing: -.016em; }
.tqv-mk__b .gr { display: block; font-size: 14px; line-height: 19px; color: var(--tq-ink3); margin-top: 1px; }
.tqv-mk__b .rp { display: flex; align-items: center; gap: 5px; font-size: 13.5px; line-height: 18px; color: var(--tq-ink3); margin-top: 4px; }
.tqv-mk__b .rp svg { width: 15px; height: 15px; }
.tqv-mk__b .nt { display: block; font-size: 15.5px; line-height: 22px; color: var(--tq-ink); margin-top: 6px; }
.tqv-who { display: flex; gap: 12px; align-items: center; }
.tqv-who b { display: block; font-size: 16px; line-height: 20px; font-weight: 600; letter-spacing: -.014em; }
.tqv-who small { display: block; font-size: 13.5px; line-height: 18px; color: var(--tq-ink3); margin-top: 1px; }
.tqv-who .tr-av0 { width: 40px; height: 40px; }
.tqv-msg { font-size: 17px; line-height: 25px; letter-spacing: -.014em; margin: 12px 0 0; white-space: pre-line; }
.tqv-msg + .tqk-voice { margin-top: 10px; }
.tqv-quote { margin: 4px 0 0; font-size: 16.5px; line-height: 24px; padding-left: 14px; border-left: 2px solid var(--tq-hair); white-space: pre-line; }
.tqv-set { margin: 2px 0 0; font-size: 17px; line-height: 24px; font-weight: 540; letter-spacing: -.014em; }
.tqv-why { margin: 4px 0 0; font-size: 14.5px; line-height: 19px; color: var(--tq-ink3); }
.tqv-off { margin-top: 14px; }
.tqv-ask { margin-top: 14px; }
.tqv-voicebig { margin-top: 12px; padding: 6px 14px 6px 6px; border-radius: 30px; background: var(--tq-fill); }
.tqv-att { margin-top: 12px; border-radius: 18px; overflow: hidden; background: #000; }
.tqv-att video, .tqv-att img { display: block; width: 100%; max-height: 360px; object-fit: contain; }
.tqv-link { margin-top: 10px; font-weight: 600; text-decoration: underline; }
.tqv-qs { display: flex; flex-direction: column; }
.tqv-q { display: flex !important; align-items: center; gap: 12px; min-height: 56px; padding: 10px 0 !important; text-align: left; }
.tqv-q + .tqv-q { border-top: 1px solid var(--tq-hair) !important; }
.tqv-q > svg { width: 22px; height: 22px; flex: 0 0 auto; }
.tqv-q > svg:last-child { width: 18px; height: 18px; color: var(--tq-ink4); }
.tqv-q span { flex: 1; min-width: 0; }
.tqv-q b { display: block; font-size: 16px; line-height: 21px; font-weight: 580; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tqv-q small { display: block; font-size: 14px; color: var(--tq-ink3); }

/* было → стало: один кадр и переключатель дат */
.tqv-cmp { position: relative; margin: 2px 16px 0; height: clamp(240px, calc(var(--rf-vh, 100vh) - 380px), 448px); border-radius: 26px; overflow: hidden; background: #17171b; }
.tqv-cmp > .tqk { position: absolute; inset: 0; border-radius: 0; }
.tqv-cmp > .hid { visibility: hidden; pointer-events: none; }
.tqv-seg { position: absolute; left: 50%; top: 12px; z-index: 12; display: flex; padding: 3px; border-radius: 15px; background: rgba(18, 18, 22, .45); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transform: translateX(-50%); }
.tqv-seg b { position: absolute; left: 3px; top: 3px; bottom: 3px; width: calc(50% - 3px); border-radius: 12px; background: #fff; transition: transform .42s var(--tqk-ease); }
.tqv-seg.r b { transform: translateX(100%); }
.tqv-seg button { position: relative; z-index: 1; height: 44px; min-width: 118px; padding: 0 12px !important; border-radius: 12px; color: #fff !important; font-size: 14.5px; font-weight: 600; text-align: center !important; white-space: nowrap; transition: color .3s; }
.tqv-seg button.on { color: var(--tq-ink) !important; }
.tqv-cmpgo { padding: 16px 20px 0; }
.tqv-cmpp .tqv-list { padding: 0; }

/* морф из ленты: экран под ним не уезжает, фон проявляется, остальное — после посадки */
.rf-pane.tqv-morph, .rf-pane.tqv-morph .rf-scr { background: transparent !important; }
.rf-pane.tqv-morph::before { content: ""; position: absolute; inset: 0; background: var(--rf-page); opacity: 0; transition: opacity .3s var(--tqk-ease); }
.rf-pane.tqv-morph.go::before { opacity: 1; }
.tqv-review.m-in .tqv-nav, .tqv-review.m-in .tqv-cap, .tqv-review.m-in .tqv-slot, .tqv-review.m-in .tqv-more { opacity: 0; transition: none; }
.tqv-review .tqv-nav, .tqv-review .tqv-cap, .tqv-review .tqv-slot, .tqv-review .tqv-more { transition: opacity .25s var(--tqk-ease); }
.rf-pane.leave.rf-under.tqv-keep { transform: none !important; transition: none !important; }

/* ========== Сцена: видео-карточка с разбором ========== */
.tqk { position: relative; overflow: hidden; background: #17171b; border-radius: 26px; isolation: isolate; transform: translateZ(0); -webkit-user-select: none; user-select: none; color: var(--tq-ink); }
.tqk__cam { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-origin: 0 0; will-change: transform; }
.tqk__v, .tqk__fz { position: absolute; left: 0; top: 0; display: block; pointer-events: none; object-fit: cover; }
.tqk__v { opacity: 0; transition: opacity .2s; }
.tqk--ready .tqk__v { opacity: 1; }
.tqk__fz { opacity: 0; }
.tqk__ov { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.tqk__tap { position: absolute; inset: 0; z-index: 4; cursor: pointer; }
/* метка: точка → линия → подпись */
.tqk-dot { transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform .34s cubic-bezier(.3, 1.4, .5, 1); }
.tqk-on .tqk-dot { transform: scale(1); }
.tqk-ln { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); transition: stroke-dashoffset .5s var(--tqk-ease) .12s; }
.tqk-on .tqk-ln { stroke-dashoffset: 0; }
.tqk-dash { opacity: 0; transition: opacity .35s .3s; }
.tqk-on .tqk-dash { opacity: 1; }
.tqk-off .tqk-dot, .tqk-off .tqk-ln, .tqk-off .tqk-dash { transition: opacity .15s linear !important; opacity: 0 !important; }
/* подпись — в экранных координатах, кегль не зависит от зума */
.tqk__lab { position: absolute; left: 0; top: 0; z-index: 5; white-space: nowrap; display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px 0 10px; border-radius: 15px; background: #fff; color: var(--tq-ink); font-size: 14px; font-weight: 600; letter-spacing: -.012em; box-shadow: 0 4px 14px rgba(0, 0, 0, .12); opacity: 0; transition: opacity .15s linear; pointer-events: none; }
.tqk__lab i { width: 7px; height: 7px; border-radius: 50%; background: var(--tq-pink); flex: 0 0 auto; }
.tqk__lab.on { opacity: 1; transition: opacity .3s .34s; }
.tqk__lab.fixed.on { transition: opacity .3s; }
/* карточка тренера на кадре: ≤ 2 строк, ≤ 88 px, без тени */
.tqk__card { position: absolute; left: 8px; right: 8px; z-index: 6; display: flex; gap: 9px; align-items: flex-start; padding: 11px 12px 12px 10px; border-radius: 18px; background: #fff; opacity: 0; transform: translateY(10px); transition: opacity .15s linear, transform .15s linear; pointer-events: none; max-height: 88px; overflow: hidden; }
.tqk__card.top { transform: translateY(-10px); }
.tqk__card.on { opacity: 1; transform: none; transition: opacity .3s var(--tqk-ease), transform .5s var(--tqk-ease); }
.tqk__card .tqk__av, .tqk__card .tr-av0 { width: 28px !important; height: 28px !important; border-radius: 50%; object-fit: cover; margin-top: 1px; flex: 0 0 auto; font-size: 12px; }
.tqk__cb { flex: 1; min-width: 0; }
.tqk__card small { display: block; font-size: 13px; line-height: 16px; color: var(--tq-ink3); font-weight: 500; }
.tqk__card p { margin: 2px 0 0; font-size: 15.5px; line-height: 20px; font-weight: 560; letter-spacing: -.014em; color: var(--tq-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tqk__card p .w { white-space: nowrap; }
.tqk__card p .c { opacity: 0; }
.tqk__card p .c.v { opacity: 1; }
/* плеер — тёмное стекло 48 px */
.tqk__bar { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 7; height: 48px; border-radius: 24px; display: flex; align-items: center; gap: 6px; padding: 0 4px; background: rgba(18, 18, 22, .5); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); color: #fff; transition: opacity .2s; }
.tqk__pp, .tqk__xp { position: relative; width: 44px; height: 44px; border-radius: 50%; display: grid !important; place-items: center; flex: 0 0 auto; background: none; border: 0; padding: 0; cursor: pointer; }
.tqk__pp i { width: 36px; height: 36px; border-radius: 50%; background: #fff; color: var(--tq-ink); display: grid; place-items: center; }
.tqk__pp svg { width: 15px; height: 15px; }
.tqk__xp svg { width: 20px; height: 20px; color: #fff; }
.tqk__trk { position: relative; flex: 1; height: 44px; cursor: pointer; margin: 0 6px; }
.tqk__trk::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 2px; background: rgba(255, 255, 255, .3); }
.tqk__fill { position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 2px; background: #fff; transform-origin: 0 50%; transform: scaleX(0); }
.tqk__knob { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fff; left: 0; }
.tqk__tick { position: absolute; top: 50%; width: 4px; height: 14px; margin: -7px 0 0 -2px; border-radius: 2px; background: var(--tq-pink); border: 0; padding: 0; cursor: pointer; }
.tqk__tick::before { content: ""; position: absolute; left: -20px; right: -20px; top: -15px; bottom: -15px; }
.tqk__tick[hidden] { display: none; }
.tqk__time { font-size: 13.5px; font-weight: 560; min-width: 32px; text-align: right; font-variant-numeric: tabular-nums; }
/* нет видео / видео не загрузилось */
.tqk.tqk--none { background: #efecef; display: grid; place-items: center; }
.tqk__none, .tqk__err { text-align: center; padding: 0 28px; color: var(--tq-ink2); }
.tqk__none svg, .tqk__err svg { width: 34px; height: 34px; color: var(--tq-ink3); margin: 0 auto 10px; display: block; }
.tqk__none b, .tqk__err b { display: block; font-size: 17px; line-height: 22px; color: var(--tq-ink); font-weight: 600; }
.tqk__none span, .tqk__err span { display: block; font-size: 15px; line-height: 20px; margin-top: 4px; }
.tqk__err { position: absolute; inset: 0; z-index: 3; display: grid; place-content: center; background: #efecef; }
/* голосовое */
.tqk-voice { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; }
.tqk-voice__pp { width: 44px; height: 44px; border-radius: 50%; background: var(--tq-ink, #141418) !important; color: #fff !important; display: grid !important; place-items: center; flex: 0 0 auto; }
.tqk-voice__pp svg { width: 17px; height: 17px; }
.tqk-voice__w { flex: 1; height: 30px; display: flex; align-items: center; gap: 2.5px; }
.tqk-voice__w i { flex: 1; border-radius: 2px; background: rgba(20, 20, 24, .2); min-height: 3px; }
.tqk-voice__w i.p { background: var(--tq-pink, #e0518f); }
.tqk-voice__t { font-size: 14px; color: var(--tq-ink3, #6f6f75); font-weight: 520; min-width: 36px; text-align: right; font-variant-numeric: tabular-nums; }

/* полноэкранный просмотр: поверх меню и листов, крестик ниже кнопок Telegram */
.tqv-full { position: absolute; inset: 0; z-index: 300; }
.tqv-full__bg { position: absolute; inset: 0; background: #0d0d10; opacity: 0; transition: opacity .35s var(--tqk-ease); }
.tqv-full__st { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 0 !important; }
.tqv-full__st .tqk__bar { left: 12px; right: 12px; bottom: calc(22px + var(--rf-safe-bottom)); }
.tqv-full__st .tqk__card.top { top: calc(64px + var(--rf-safe-top)) !important; }
.tqv-full__x { position: absolute; left: 12px; top: calc(12px + var(--rf-safe-top)); z-index: 20; width: 44px; height: 44px; border-radius: 50%; background: rgba(18, 18, 22, .45); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); display: grid; place-items: center; color: #fff; border: 0; padding: 0; opacity: 0; transition: opacity .2s; cursor: pointer; }
.tqv-full__x svg { width: 20px; height: 20px; }
.tqv-full__x.on { opacity: 1; }

/* ========== лист снизу: FLIP по высоте, «удлинитель» снизу, чтобы при сдвиге не открывался зазор ========== */
.tqx-bd { position: absolute; inset: 0; z-index: 200; background: rgba(12, 12, 16, .34); opacity: 0; transition: opacity .42s var(--tqk-ease); }
.tqx-bd.on { opacity: 1; }
.tqx { position: absolute; left: 0; right: 0; bottom: 0; z-index: 201; background: #fff; border-radius: 30px 30px 0 0; transform: translateY(105%); transition: transform .5s var(--tqk-ease); max-height: calc(100% - 40px - var(--rf-safe-top)); display: flex; flex-direction: column; color: var(--tq-ink); font-size: 16px; line-height: 1.4; letter-spacing: -.01em; }
.tqx::after { content: ""; position: absolute; left: 0; right: 0; top: calc(100% - 1px); height: 600px; background: #fff; }
.tqx.on { transform: none; }
:where(.tqx) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; }
.tqx__grab { width: 36px; height: 5px; border-radius: 3px; background: rgba(20, 20, 24, .16); margin: 8px auto 0; flex: 0 0 auto; }
.tqx__scr { overflow-y: auto; scrollbar-width: none; padding: 0 0 calc(26px + var(--rf-safe-bottom)); position: relative; overscroll-behavior: contain; }
.tqx__scr::-webkit-scrollbar { display: none; }
.tqx__x { position: absolute; right: 10px; top: 10px; width: 44px; height: 44px; border-radius: 50%; display: grid !important; place-items: center; color: var(--tq-ink2); z-index: 3; }
.tqx__x svg { width: 22px; height: 22px; }
.tqx__in { transition: opacity .25s var(--tqk-ease), transform .25s var(--tqk-ease); }
.tqx__in.out { opacity: 0; transform: translateY(-4px); transition: opacity .15s linear, transform .15s linear; }
.tqx__in.pre { opacity: 0; transform: translateY(8px); transition: none; }
.tqx-sh { padding: 18px 16px 0; }
.tqx-sh .tqv-h2 { padding-right: 44px; }
.tqx-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.tqx-tiles button { height: 112px; border-radius: 22px; background: var(--tq-fill2); display: flex; flex-direction: column; justify-content: space-between; padding: 16px; text-align: left; color: var(--tq-ink); }
.tqx-tiles button.pri { background: var(--tq-ink); color: #fff; }
.tqx-tiles svg { width: 28px; height: 28px; }
.tqx-tiles b { font-size: 16.5px; font-weight: 600; letter-spacing: -.015em; }
.tqx-err { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; font-size: 15px; line-height: 20px; color: var(--tq-ink); }
.tqx-err svg { width: 20px; height: 20px; flex: 0 0 auto; }
.tqx-err b { display: block; }
.tqx-sh .tqv-diag { margin-top: 14px; }
.tqx-sh .tqv-rules { margin-top: 6px; }
.tqx-fnote { font-size: 13.5px; line-height: 18px; color: var(--tq-ink3); margin: 12px 0 0; }
.tqx-pv { margin-top: 14px; height: clamp(170px, calc(var(--rf-vh, 100vh) - 560px), 300px); }
.tqx-pv--up { height: clamp(150px, calc(var(--rf-vh, 100vh) - 620px), 240px); }
.tqx-auto { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 15px; line-height: 20px; color: var(--tq-ink2); }
.tqx-auto svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--tq-ink); }
.tqx-auto b { color: var(--tq-ink); font-weight: 600; }
.tqx-f { margin-top: 20px; }
.tqx-f > .l { display: flex; justify-content: space-between; align-items: baseline; font-size: 15.5px; font-weight: 600; margin-bottom: 10px; }
.tqx-f > .l em { font-style: normal; color: var(--tq-ink3); font-weight: 520; font-size: 14.5px; }
.tqx-l2 { display: block; font-size: 15.5px; font-weight: 600; margin-bottom: 8px; }
.tqx-g5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.tqx-g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tqx-opt { height: 48px; border-radius: 14px; background: var(--tq-fill) !important; font-size: 16px; font-weight: 560; color: var(--tq-ink) !important; text-align: center !important; display: grid !important; place-items: center; padding: 0 8px !important; line-height: 19px; transition: background .2s, color .2s; }
.tqx-g2 .tqx-opt { font-size: 15px; }
.tqx-opt.on { background: var(--tq-ink) !important; color: #fff !important; }
.tqx-fld { display: block; box-sizing: border-box; width: 100%; min-height: 48px; border: 0; border-radius: 14px; background: var(--tq-fill); padding: 13px 14px; font: inherit; font-size: 16px; line-height: 22px; color: var(--tq-ink); outline: none; resize: none; -webkit-appearance: none; }
.tqx-fld:focus { background: var(--tq-fill2); }
.tqx-fld::placeholder { color: #8a8a90; }
.tqx-reveal { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--tqk-ease); }
.tqx-reveal > div { overflow: hidden; min-height: 0; opacity: 0; transform: translateY(-4px); transition: opacity .2s, transform .3s var(--tqk-ease); }
.tqx-reveal.on { grid-template-rows: 1fr; }
.tqx-reveal.on > div { opacity: 1; transform: none; padding-top: 10px; transition: opacity .25s .08s, transform .3s var(--tqk-ease); }
.tqx-warn { display: flex; gap: 10px; align-items: flex-start; margin-top: 10px; font-size: 15px; line-height: 20px; color: var(--tq-ink); }
.tqx-warn svg { width: 20px; height: 20px; flex: 0 0 auto; }
.tqx-cta { margin-top: 22px; }
.tqx-c { display: flex; justify-content: center; margin-top: 6px; }
/* полоса загрузки — под видео, не на шкале */
.tqx-bar { height: 4px; border-radius: 2px; background: var(--tq-fill2, rgba(20, 20, 24, .075)); overflow: hidden; margin-top: 12px; }
.tqx-bar i { display: block; height: 100%; width: 100%; background: var(--tq-ink, #141418); border-radius: 2px; transform-origin: 0 50%; transform: scaleX(0); }
.tqx-bar.err i { background: var(--tq-ink3); }
.gk .gk-bar { margin: 10px 0 8px; }
.tqx-upl { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; min-height: 44px; }
.tqx-upl span { font-size: 15px; color: var(--tq-ink2); font-variant-numeric: tabular-nums; }
.tqx-upl .tqv-tbtn { font-size: 15.5px; }
.tqx-done { text-align: center; padding: 26px 20px 4px; }
.tqx-done .big { width: 64px; height: 64px; border-radius: 50%; background: var(--tq-ink); color: #fff; display: grid; place-items: center; margin: 0 auto 16px; transform: scale(.6); opacity: 0; transition: transform .5s cubic-bezier(.3, 1.4, .5, 1), opacity .2s; }
.tqx-done .big.on { transform: none; opacity: 1; }
.tqx-done .big svg { width: 30px; height: 30px; }
.tqx-done .tqv-sub { margin: 8px auto 0; max-width: 300px; }
.tqx .tqv-btn, .tqx .tqv-tbtn { font-family: inherit; }

@media (prefers-reduced-motion: reduce) {
  .tqv *, .tqk *, .tqx, .tqx *, .tqx-bd, .tqv-full * { animation-duration: .01s !important; transition-duration: .01s !important; transition-delay: 0s !important; }
}

/* Recording skip: the brief asks for a red safety warning (native danger token). */
.tqx--skip .tqx-warn { color: var(--s-danger-fg, rgb(215, 55, 47)); }

/* ---- src/styles/47-train-move.css ---- */
/* «Тренировки»: перенос отдельной тренировки (20-screens/train-12-reschedule.js). Префикс trm-.
 * Язык раздела v3: капсулы — как у «Удобных дней» (.gt-pick), строки и плашки — тона --v7-*,
 * статусы — --s-*. Вид v3 ждёт «ок» владельца (утверждён только v2: design-preview/workout-reschedule).
 * Карточка тренировки (.gt-pad) живёт вне .trx — у её правил запасные цвета в var(). */

/* ---------- старое место в полосе недели: тихое кольцо вместо точки ---------- */
.trx .trh .trh-day.is-moved .dot { width: 6px; height: 6px; background: transparent; box-shadow: inset 0 0 0 1.4px rgba(12, 14, 18, .38); }
.trx .trh .trh-day.is-today .v5-tdots i.trm-ring { background: transparent; box-shadow: inset 0 0 0 1.2px rgba(12, 14, 18, .45); }
/* строка старого места: приглушённая, значок «перенесено» в контуре */
.trx .trh .trh-wo--row.trm-gone .trh-wo__media { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(12, 14, 18, .1); color: var(--trh-meta); }
.trx .trh .trh-wo--row.trm-gone .trh-wo__title { color: var(--trh-meta); font-weight: 500; }

/* ---------- одна строка действий под занятием ----------
 * :is(.trx, .gt-pad) — вес (0,2,0): сброс раздела «.trx .trh :where(button)» (font: inherit, padding 0,
 * background transparent) иначе перебивал шрифт и фон кнопок; .gt-pad — карточка тренировки. */
:is(.trx, .gt-pad) .trm-acts { display: flex; align-items: center; gap: 16px; margin: 2px 0 0; }
:is(.trx, .gt-pad) .trm-acts--solo { justify-content: flex-start; }
:is(.trx, .gt-pad) .trm-act { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 2px; border: 0; background: none; font-family: inherit; font-size: 14.5px; font-weight: 600; line-height: 1.2; letter-spacing: -.15px; color: var(--content-strong, #0c0e12); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
:is(.trx, .gt-pad) .trm-act svg { width: 18px; height: 18px; flex: none; color: var(--v7-ink2, #3d3a40); }
:is(.trx, .gt-pad) .trm-act--back { margin-left: auto; }
:is(.trx, .gt-pad) .trm-acts--solo .trm-act--back { margin-left: 0; }
:is(.trx, .gt-pad) .trm-act[disabled] { opacity: .5; cursor: default; }
:is(.trx, .gt-pad) .trm-act:active { opacity: .6; }
/* под строкой-списком (пропуск недели) — с отступом под заголовок, как «Не буду догонять» */
.trx .trh .trm-acts.trm-in-row { margin: -6px 0 4px 64px; }
.trx .trh .trm-limit.trm-in-row { margin-left: 64px; }

/* предел переносов: спокойная плашка и существующий чат тренера */
:is(.trx, .gt-pad) .trm-limit { display: flex; align-items: flex-start; gap: 10px; margin: 6px 0 4px; padding: 14px 14px 14px 12px; border-radius: 18px; background: var(--v7-tile, #f2f0f2); }
:is(.trx, .gt-pad) .trm-limit > svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--v7-ink2, #3d3a40); }
:is(.trx, .gt-pad) .trm-limit p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--v7-stat, #4a4449); }
:is(.trx, .gt-pad) .trm-limit__btn { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; margin-top: 10px; padding: 0 16px 0 14px; border: 0; border-radius: 100px; background: #fff; font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1; color: var(--content-strong, #0c0e12); cursor: pointer; box-shadow: 0 1px 2px rgba(12, 14, 18, .06); }
:is(.trx, .gt-pad) .trm-limit__btn svg { width: 17px; height: 17px; color: var(--v7-ink2, #3d3a40); }

/* карточка тренировки следующей недели: под «Поехали» */
.gt-pad .trm-card { margin: 2px 2px 12px; }
.gt-pad .trm-card .trm-acts { justify-content: center; gap: 24px; }
.gt-pad .trm-card .trm-act--back { margin-left: 0; }

/* пропуск в тёмном герое: три тихие ссылки — переносятся на вторую строку без зазора 18 px между строками */
.trx .trh-hero__aux { flex-wrap: wrap; row-gap: 0; }
/* «Пропущенные»: два тихих действия рядом */
.trx .v5-hide.trm-hide { gap: 18px; }

/* ---------- шторка ---------- */
.trx .trm-sheet .lead { margin-top: 8px; }
.trx .trm-lbl { margin-top: 20px; font-size: 13.5px; font-weight: 600; letter-spacing: -.1px; color: var(--v7-lbl, #8e8a8d); }
.trx .trm-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.trx .trm-day { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0; height: 88px; padding: 0; border: 0; border-radius: 100px;
  background: rgb(243, 243, 245); color: var(--brand-strong, #1d020c); font-family: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color .18s ease, box-shadow .18s ease; }
.trx .trm-day__dow { font-size: 12.5px; font-weight: 500; line-height: 1; color: var(--v7-stat, #4a4449); }
.trx .trm-day__num { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 17px; font-weight: 600; letter-spacing: -.3px; line-height: 1; font-variant-numeric: tabular-nums; }
.trx .trm-day__pip { height: 14px; display: flex; align-items: center; justify-content: center; color: var(--v7-lbl, #8e8a8d); }
.trx .trm-day__pip svg { width: 14px; height: 14px; }
.trx .trm-day__pip em { font-style: normal; font-size: 10.5px; font-weight: 600; letter-spacing: -.1px; line-height: 1; }
/* выбранный — как «сегодня» в полосе недели: тёмная капсула, белый круг с числом */
.trx .trm-day.on { background: var(--brand-strong, #1d020c); box-shadow: 0 8px 18px rgba(20, 4, 12, .22); }
.trx .trm-day.on .trm-day__dow { color: rgba(255, 255, 255, .78); }
.trx .trm-day.on .trm-day__num { background: #fff; color: var(--brand-strong, #1d020c); }
.trx .trm-day.on .trm-day__pip { color: rgba(255, 255, 255, .72); }
/* «сейчас здесь» и закрытые дни: приглушены, но нажимаются — нажатие объясняет причину */
.trx .trm-day.is-here, .trx .trm-day.is-off { background: rgb(248, 247, 249); cursor: default; }
.trx .trm-day.is-here .trm-day__dow, .trx .trm-day.is-here .trm-day__num,
.trx .trm-day.is-off .trm-day__dow, .trx .trm-day.is-off .trm-day__num { opacity: .4; }
.trx .trm-day.is-tap { box-shadow: inset 0 0 0 1.5px rgba(12, 14, 18, .24); }
.trx .trm-day.is-skel { cursor: default; background: linear-gradient(90deg, rgb(239, 237, 239), rgb(247, 246, 247), rgb(239, 237, 239)) 0% 0% / 200% 100%; animation: trm-skel 1.2s linear infinite; }
@keyframes trm-skel { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: no-preference) {
  .trx .trm-day.on .trm-day__num { animation: trm-pop .32s cubic-bezier(.3, 1.35, .5, 1); }
}
@media (prefers-reduced-motion: reduce) { .trx .trm-day.is-skel { animation: none; } }
@keyframes trm-pop { 0% { transform: scale(.78); } 100% { transform: scale(1); } }
.trx .trm-loading { margin: 14px 0 0; font-size: 13.5px; color: var(--v7-lbl, #8e8a8d); text-align: center; }

/* строка о выбранном дне: что в нём уже есть и что будет */
.trx .trm-note { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; padding: 13px 14px; border-radius: 18px; background: rgb(243, 243, 245); }
.trx .trm-note > svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--v7-ink2, #3d3a40); }
.trx .trm-note b { display: block; font-size: 14.5px; font-weight: 600; letter-spacing: -.15px; line-height: 1.3; color: var(--content-strong); }
.trx .trm-note span { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.42; color: var(--v7-stat, #4a4449); }
.trx .trm-note.is-ok > svg { color: var(--s-success-fg, #3f6410); }
.trx .trm-note.is-attn { background: var(--s-attn-bg, #fdf0d8); }
.trx .trm-note.is-attn > svg, .trx .trm-note.is-attn b, .trx .trm-note.is-attn span { color: var(--s-attn-fg, #78500b); }
.trx .trm-note__lk { display: inline-flex; align-items: center; gap: 2px; min-height: 40px; margin-top: 2px; padding: 0; border: 0; background: none; font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1; color: var(--content-strong); cursor: pointer; }
.trx .trm-note__lk svg { width: 14px; height: 14px; opacity: .5; }

/* нет связи / отказ сервера: строка над кнопкой, выбор и строка о дне остаются */
.trx .trm-net { display: flex; align-items: flex-start; gap: 9px; margin-top: 14px; font-size: 13.5px; line-height: 1.42; color: var(--v7-stat, #4a4449); }
.trx .trm-net svg { width: 17px; height: 17px; flex: none; margin-top: 1px; color: var(--v7-ink2, #3d3a40); }
.trx .trm-net b { font-weight: 600; color: var(--content-strong); }
.trx .trm-net--err svg { color: var(--s-danger-fg, #b23a33); }
.trx .trm-load-err { display: flex; align-items: flex-start; gap: 10px; margin-top: 18px; padding: 14px; border-radius: 18px; background: rgb(243, 243, 245); }
.trx .trm-load-err > svg { width: 20px; height: 20px; flex: none; color: var(--v7-ink2, #3d3a40); }
.trx .trm-load-err b { display: block; font-size: 14.5px; font-weight: 600; }
.trx .trm-load-err span { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.42; color: var(--v7-stat, #4a4449); }

.trx .trm-bar .v5-save { margin-top: 0 !important; }
/* «Переносим…» — запрос в пути: кнопка остаётся тёмной (это не «нельзя», а «идёт»), но не нажимается */
.trx .trh .v5-save.trm-busy[disabled] { background: var(--brand-strong) !important; color: #fff !important; opacity: .62; }
.trx .trm-bar .v5-save svg { width: 18px; height: 18px; }
.trx .trm-foot { margin: 10px 0 0; text-align: center; font-size: 12.5px; line-height: 1.4; color: var(--v7-lbl, #8e8a8d); }
.trx .trm-bar .trm-sec { margin-top: 10px !important; background: var(--v7-tile, #f2f0f2) !important; color: var(--content-strong) !important; }

/* тренер обновил программу: та же деталь «пусто/ошибка» раздела, по центру */
.trx .trm-sheet--conf .v5-sheet__h { justify-content: flex-end; }
.trx .trm-conf { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 8px 8px; }
.trx .trm-conf__ic { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: var(--v7-tile, #f2f0f2); color: var(--v7-ink2, #3d3a40); }
.trx .trm-conf__ic svg { width: 24px; height: 24px; }
.trx .trm-conf b { margin-top: 14px; font-size: 19px; font-weight: 600; letter-spacing: -.35px; line-height: 1.25; text-wrap: balance; }
.trx .trm-conf p { margin: 8px 0 0; font-size: 14px; line-height: 1.45; color: var(--v7-stat, #4a4449); text-wrap: pretty; }

/* ---- src/styles/47-train-report.css ---- */
/* Отчёт тренеру и реакция тренера (train-50-summary.js, train-51-report.js; владелец 04–05.10).
 * Детали — Главной и Дневника: hm-card, полоса kbar (как калории), строки hm-mrow (как приёмы),
 * зелёная галочка hm-done. Плашки без контура и тени (92-plates.css). */
.rp { display: flex; flex-direction: column; gap: 12px; }
.rp > .gp-alert { margin: 0; }
.rp-card { padding: 16px 16px 14px; border-radius: 26px; }
.rp-who { display: flex; align-items: center; gap: 10px; }
.rp-who__im, .rp-who .tr-av0 { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.rp-who span { display: flex; flex-direction: column; min-width: 0; }
.rp-who small { font-size: 12.5px; color: #8b8a92; }
.rp-who b { font-size: 15.5px; font-weight: 600; letter-spacing: -.2px; }
.rp-t { margin: 16px 0 0; font-size: 24px; line-height: 28px; font-weight: 700; letter-spacing: -.6px; text-wrap: balance; }
.rp-when { margin: 4px 0 0; font-size: 13px; color: #8b8a92; }
/* «16 из 21 подхода» + полоса — как «980 из 1 650 ккал» в Дневнике */
.rp-sets { display: flex; align-items: baseline; gap: 6px; margin-top: 16px; }
.rp-sets b { font-size: 28px; line-height: 32px; font-weight: 700; letter-spacing: -.8px; font-variant-numeric: tabular-nums; }
.rp-sets span { font-size: 14px; color: #7d7c85; }
.rp-bar { margin-top: 10px; height: 14px; gap: 3px; }
.rp-bar i { border-radius: 3px; background: #e9e9ec; }
.rp-bar i.on { background: #a3d546; }
.rp-facts { margin: 10px 0 0; font-size: 13px; line-height: 1.4; color: #7d7c85; font-variant-numeric: tabular-nums; }
.rp-sh { display: flex; align-items: baseline; justify-content: space-between; margin: 8px 4px -4px; font-size: 18px; line-height: 24px; font-weight: 600; letter-spacing: -.3px; }
.rp-sh span { font-size: 13px; font-weight: 500; color: #8b8a92; }
.rp-list { padding: 2px 16px; border-radius: 26px; }
.rp-ex__m { width: 44px; height: 44px; border-radius: 12px; overflow: hidden; flex: 0 0 auto; }
.rp-ex .hm-mb b { font-size: 15px; line-height: 1.3; white-space: normal; }
.rp-ex .chev { width: 16px; height: 16px; color: #c7c6cc; flex: 0 0 auto; }
.rp-ok { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: var(--ok, #5d7f1c); background: var(--ok-bg, #eaf6d4); flex: 0 0 auto; }
.rp-ok svg { width: 14px; height: 14px; }
.rp-x { flex: 0 0 auto; font-size: 12.5px; font-weight: 500; color: #8b8a92; white-space: nowrap; }
.rp-emo { font-size: 22px; }
.rp-del { align-self: center; border: 0; background: none; height: 44px; padding: 0 16px; font-size: 14px; font-weight: 500; color: #d7372f; }
.rp-foot { display: flex; flex-direction: column; gap: 8px; }
.rp-auto { margin: 0; text-align: center; font-size: 12.5px; color: #7d7c85; font-variant-numeric: tabular-nums; }
/* статус отчёта: фото тренера со значком на краю, как «Ближайшая встреча» */
.rp-st { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 26px; }
.rp-st__b { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.rp-st__b b { font-size: 15.5px; font-weight: 600; letter-spacing: -.2px; }
.rp-st__b small { margin-top: 3px; font-size: 12.5px; line-height: 1.35; color: #8b8a92; }
.rp-st__go { align-self: flex-start; margin-top: 10px; height: 36px; padding: 0 16px; border-radius: 100px; background: #101014; color: #fff; font-size: 14px; font-weight: 600; }
.rp-av { position: relative; flex: 0 0 auto; width: 44px; height: 44px; }
.rp-av__im, .rp-av .tr-av0 { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.rp-av i { position: absolute; right: -3px; bottom: -3px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: #e9e9ec; color: #5f5e66; box-shadow: 0 0 0 2.5px #fff; }
.rp-av.is-seen i { background: #a3d546; color: #fff; }
.rp-av i svg { width: 11px; height: 11px; }
/* знак реакции: круг цвета реакции, значок, фото тренера на краю */
.rp-stamp { position: relative; flex: 0 0 auto; width: var(--s); height: var(--s); border-radius: 50%; background: var(--bg); color: var(--c); display: grid; place-items: center; }
.rp-stamp > i { display: grid; place-items: center; width: 46%; height: 46%; }
.rp-stamp > i svg { width: 100%; height: 100%; stroke-width: 2.2; }
.rp-stamp__av, .rp-stamp .tr-av0 { position: absolute; right: -8%; bottom: -8%; width: 44%; height: 44%; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2.5px #fff; }
.rp-st--react { padding: 16px; gap: 16px; }
.rp-st--react .rp-st__b b { font-size: 20px; line-height: 24px; letter-spacing: -.4px; }
.rp-conf { position: fixed; z-index: 9000; width: 8px; height: 8px; border-radius: 2px; pointer-events: none; }
/* хаб: строка знака на тёмной карточке «Сегодня — готово» */
.trh-wo__list li.is-stamp { align-items: center; }
.trh-wo__list li.is-stamp .rp-stamp { --s: 30px !important; }
.trh-wo__list li.is-stamp .rp-stamp__av, .trh-wo__list li.is-stamp .rp-stamp .tr-av0 { box-shadow: 0 0 0 2px #3a0d1b; }
.trh-wo__list li.is-stamp b { font-weight: 600; color: #fff; }
/* подвал отчёта: строка «уйдёт сам в …» над кнопкой — на сплошном фоне страницы, не поверх списка */
.rf-pane.gt-l.is-rp > .gt-foot { background: linear-gradient(rgba(var(--rf-page-rgb), 0), var(--rf-page) 22px); padding-top: 22px; }
/* реакция — яркая карточка цвета реакции (владелец 05.10: «поярче, прикольнее»); знак — белый
 * «стикер» с наклоном, фото тренера на краю. Тени нет — плашки без тени (92-plates.css). */
.rp-st--react { background: var(--g); color: #fff; padding: 18px 18px 18px 16px; gap: 16px; overflow: hidden; position: relative; }
.rp-st--react::after { content: ""; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; border-radius: 50%; background: rgba(255, 255, 255, .14); pointer-events: none; }
.rp-sticker { flex: 0 0 auto; transform: rotate(-8deg); display: block; }
.rp-st--react .rp-stamp { --bg: #fff; background: #fff; }
.rp-st--react .rp-stamp > i { width: 50%; height: 50%; }
.rp-st--react .rp-stamp__av, .rp-st--react .rp-stamp .tr-av0 { box-shadow: 0 0 0 3px #fff; }
.rp-st--react .rp-st__b { position: relative; z-index: 1; }
.rp-st--react .rp-st__b small { margin: 0 0 2px; font-size: 12.5px; color: rgba(255, 255, 255, .86); }
.rp-st--react .rp-st__b b { font-size: 23px; line-height: 27px; letter-spacing: -.5px; color: #fff; text-wrap: balance; }
.rp-st--react .rp-st__b em { font-style: normal; margin-top: 3px; font-size: 12.5px; color: rgba(255, 255, 255, .8); font-variant-numeric: tabular-nums; }
.rp-st--react .rp-st__go { background: #fff; color: #101014; }
/* хаб: знак на тёмной карточке «Сегодня — готово» — крупнее и светлым кругом */
.trh-wo__list li.is-stamp .rp-stamp { --s: 36px !important; --bg: #fff !important; background: #fff; }

/* ---- src/styles/47-train-week.css ---- */
/* «Тренировки»: неделя и блок «Прогресс» (владелец 05.10).
 * · Сегодня в ленте дней — не чёрная плашка (её читали как выбранный фильтр при списке всей недели):
 *   кольцо вокруг числа. Чёрная — только выбранный тапом день, как в Дневнике.
 * · Тренировки впереди — широкий баннер на всю строку (кадр фокус-зоны, формат banner, как на Главной).
 * · «Прогресс» после тренировки — как «Сила» на «Прогрессе»: плитка, рекорд — зелёным с кубком. */
.trx .trh .trh-day.is-today, .trx .trh .trh-day.is-today.is-sel { background: rgb(243, 243, 245) !important; }
.trx .trh .trh-day.is-today .dow { color: #101014; font-weight: 600; }
.trx .trh .trh-day.is-today .trh-day__disc { background: #fff; box-shadow: inset 0 0 0 2px #101014; }
.trx .trh .trh-day.is-today .num { color: #101014; font-weight: 600; }
.trx .trh .trh-day.is-today.is-sel { box-shadow: var(--v7-sel-ring) !important; }
/* баннер тренировки впереди */
.trh-bnrow { position: relative; display: flex; align-items: flex-end; width: 100%; height: 104px; margin: 8px 0 0; padding: 0; border: 0; border-radius: 20px; overflow: hidden; background: #2a0711; color: #fff; text-align: left; cursor: pointer; isolation: isolate; }
.trh-bnrow img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 100% 40%; z-index: -2; }
.trh-bnrow::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(20, 4, 10, .78) 0%, rgba(20, 4, 10, .45) 55%, rgba(20, 4, 10, 0) 100%); }
.trh-bnrow__b { display: flex; flex-direction: column; padding: 14px 64px 14px 16px; min-width: 0; }
.trx .trh .trh-bnrow__b small, .trh-bnrow__b small { font-size: 12.5px; color: rgba(255, 255, 255, .78) !important; }
.trx .trh .trh-bnrow__b b, .trh-bnrow__b b { margin-top: 2px; font-size: 18px; line-height: 22px; font-weight: 650; letter-spacing: -.35px; color: #fff !important; }
.trx .trh .trh-bnrow__b span, .trh-bnrow__b span { margin-top: 2px; font-size: 13px; color: rgba(255, 255, 255, .8) !important; }
.trh-bnrow__go { position: absolute; right: 14px; bottom: 14px; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: #101014; display: grid; place-items: center; }
.trh-bnrow__go svg { width: 14px; height: 14px; }
.trh-bnrow:active { transform: scale(.985); }
.trh-bnrow.is-today { box-shadow: inset 0 0 0 2px #a3d546; }
/* «Прогресс» после тренировки */
.hb5-big { color: #5c7a15; align-items: center; }
.hb5-big .spr { color: #5c7a15; }
.hb5-cup { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: #eaf6d4; color: #5c7a15; flex: 0 0 auto; }
.hb5-cup svg { width: 20px; height: 20px; }
.hb4-r.hb5 { gap: 12px; justify-content: flex-start; }
.hb4-r.hb5 .n { flex: 1 1 auto; }
.hb5-ic { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(153, 160, 174, .12); color: #5f5e66; }
.hb5-ic svg { width: 18px; height: 18px; }
.hb4-r.hb5 .v { display: flex; flex-direction: column; align-items: flex-end; }
.hb4-r.hb5 .v b { font-weight: 600; }
.hb4-r.hb5 .v em { font-style: normal; font-size: 12.5px; line-height: 16px; font-weight: 600; color: #8b8a92; }
.hb4-r.hb5 .v em.up { color: #5c7a15; }
.hb4-r.hb5.is-rec { margin: 2px -10px; padding: 6px 10px; border-radius: 16px; background: #f1f9e3; }
.hb4-r.hb5.is-rec::before, .hb4-r.hb5.is-rec + .hb4-r::before { display: none; }
.hb4-r.hb5.is-rec .hb5-ic { background: #a3d546; color: #fff; }
.hb4-r.hb5.is-rec .n small { color: #5c7a15; font-weight: 500; }
.hb4-r.hb5.is-rec .v b { color: #3e5a0a; }
/* «Когда»: время — строкой с системным колесом */
.v5-trow { position: relative; display: flex; align-items: center; gap: 8px; margin-top: 12px; min-height: 52px; padding: 0 14px 0 16px; border-radius: 16px; background: rgb(243, 241, 244); cursor: pointer; }
.v5-trow span { flex: 1 1 auto; font-size: 15px; color: #3f3e46; }
.v5-trow b { font-size: 17px; font-weight: 600; letter-spacing: -.2px; font-variant-numeric: tabular-nums; }
.v5-trow svg { width: 16px; height: 16px; color: #b6b5bd; }
.v5-trow input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; padding: 0; margin: 0; cursor: pointer; font-size: 16px; }

/* ---- src/styles/48-diary-game.css ---- */
/* Поправки «Дневника с баллами» поверх сгенерированного 47-diary-game.css.
 *
 * 1) Правила прототипа, которые экстрактор не видит (элемент появляется на миг
 *    или его id в v3 другой): строка баллов .goals__rows, летящая точка .pts__fly,
 *    #upLad → .rku__lad, ленивые листы «<вид>-open».
 * 2) Каркас v3: между .rf-scr и .body — .xs-root; входные анимации (.is-in)
 *    экран включает сам на показе (mount), как sub_pane(cls="is-in") прототипа.
 * 3) Классы dg-* — то, чего в прототипе не было: ожидание сводки, ошибка,
 *    строки-ссылки листа баллов, тарелка 0 из 3 и будущие дни в «Неделе целиком». */

/* ---------- каркас экранов dg-* ---------- */
.dg-scr > .xs-root { display: flex; flex-direction: column; flex: 1 0 auto; min-height: 100%; }
.dg-scr .ring { --p: var(--to, 0); }
.rf-pane[data-tab^="dg-"] .foot { position: sticky; bottom: 0; z-index: 6; margin-top: auto; padding: 14px 18px calc(18px + var(--rf-bottom-inset, 0px)); background: linear-gradient(to top, var(--bg, #f7f7f8) 58%, rgba(247, 247, 248, 0)); }
/* итоги недели/месяца без меню (00-core/16-cta.js, .rf-pane--stick: запас прокрутки снят) — над «домашней полоской» и в браузере, не только в Telegram */
.rf-pane.rf-pane--stick:not(.rf-pane--full) .rf-scr.dg-scr .foot { padding-bottom: calc(18px + var(--rf-safe-bottom, 0px)); }
.rf-pane.rf-t-dg-story .foot { background: none; }
.rf-pane.rf-t-dg-ob .rf-scr { background: var(--rf-page); }
.rf-pane.rf-t-dg-ob .ob { padding-top: calc(10px + var(--rf-top-inset, 0px)); }
.rf-pane.rf-t-dg-ob .foot { background: linear-gradient(to top, var(--rf-page) 58%, rgba(var(--rf-page-rgb), 0)); }
.dg-ob .ob__skip { cursor: pointer; }
.rf-pane.rf-t-dg-up .rf-scr, .rf-pane.rf-t-dg-story .rf-scr { background: #17161b; }
.rf-app:has(.rf-pane.on.rf-t-dg-up) .rf-topfade, .rf-app:has(.rf-pane.on.rf-t-dg-story) .rf-topfade { opacity: 0; }

/* ---------- строка баллов под КБЖУ (прототип: .goals__rows, body[data-lay=p]) ---------- */
.dy-scr .goals__rows { display: block; margin-top: 8px; }
.ptl__k.up { color: var(--ink); }
.ptl__k.up b { color: #4f7d17; }
.pts__fly { position: absolute; left: 0; top: 0; width: 10px; height: 10px; border-radius: 50%; background: #101014; z-index: 5; pointer-events: none; transform: translate(var(--x0), var(--y0)); animation: dg-flyTo .62s cubic-bezier(.3, .6, .2, 1) forwards; }
@keyframes dg-flyTo { 60% { opacity: 1; } to { transform: translate(var(--x1), var(--y1)) scale(.55); opacity: .9; } }
.slot .pscore small:only-child { margin: 0; }

/* Экраны-списки (баллы, неделя, достижения, итоги) перерисовываются, когда
   приходит сводка: входная анимация (.is-in) повторялась бы миганием — как в
   41-diary.css, показываем конечное состояние. Анимации — у экранов-моментов. */
.dg-sum .tk, .dg-sum .sg em, .dg-week .wc, .dg-week .wc.cheat svg, .dg-total .li, .dg-total .lnode i { opacity: 1; transform: none; filter: none; }
.wsum__d.neg { color: #8b8a92; }

/* ---------- лист «Баллы за день» ---------- */
.dg-sum .score__more { grid-template-rows: 1fr; }
.dg-sum .score__more .score__l { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(16, 16, 20, .08); }
.rk-row.dg-more { cursor: pointer; align-items: center; }
.rk-row.dg-more > div { flex: 1 1 auto; }
.rk-row.dg-more .chev, .rk-card .rk-row .chev { flex: 0 0 auto; width: 16px; height: 16px; color: #b6b5bd; display: grid; place-items: center; }
.rk-row.dg-more .chev svg { width: 16px; height: 16px; }
.dg-wait { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 22px 18px; text-align: center; }
.dg-wait b { font-size: 15px; font-weight: 600; letter-spacing: -.2px; }
.dg-wait small { font-size: 13px; line-height: 1.4; color: #8b8a92; }
.dg-wait .btn { height: 44px; padding: 0 22px; font-size: 14px; }

/* ---------- «Новый ранг» и сторис ---------- */
.rku__lad { position: relative; z-index: 2; width: 100%; margin-top: 34px; }
.stv .nav { padding-top: calc(10px + var(--rf-top-inset, 0px)); }
/* «Поделиться» тёмная: «назад» шапки внутренних экранов — стеклянная, как в прототипе (.stv .rb--back), иначе белый круг с белым шевроном. */
.stv .xs-back { background: rgba(255, 255, 255, .1) !important; box-shadow: none; color: var(--fg); }

/* ---------- «Неделя целиком» ---------- */
.wc.s0 { background: var(--s0); }
.wc.fut { background: transparent; box-shadow: inset 0 0 0 1.5px #efeff2; opacity: .6; }
.dg-week .wc, .dg-week .wc.cheat svg { opacity: 1; transform: none; }

/* ---------- листы: читмил, норма читмилов, правила ---------- */
.rf-app.dgspend-open .nv-sheet--dgspend, .rf-app.dgbudget-open .nv-sheet--dgbudget, .rf-app.dgrules-open .nv-sheet--dgrules { transform: none; }
.rf-app:not(.rf-full) .nv-sheet--dgspend, .rf-app:not(.rf-full) .nv-sheet--dgbudget, .rf-app:not(.rf-full) .nv-sheet--dgrules { padding-bottom: 100px; }
.dg-sheet .sheet__s { margin-top: 8px; }
.dg-sheet .btn2 { margin-top: 18px; }
.dg-sheet .btn[disabled] { opacity: .45; box-shadow: none; }
.dg-sheet .stepper button { font-family: inherit; }
.nv-sheet--dgrules { max-height: 88%; overflow-y: auto; }

/* ---------- сцена приёма: «Списать на читмил» ---------- */
.ad .ad__cheat { width: 100%; }
.ad .ad__cheat.ghost { background: #fff; color: var(--cheat-ink); box-shadow: inset 0 0 0 1px rgba(155, 109, 214, .28); }

@media (prefers-reduced-motion: reduce) {
  .pts__fly { animation: none; opacity: 0; }
}

/* ---------- «Приём записан. Баллы за тарелку — только с фото» (dg-nudge) ----------
 * Подсказка под приёмом, только что записанным без фото: строка внутри карточки
 * приёма (как строка коуча .gd-cl), мягкий вход, тёмная кнопка-действие, ×. */
.dg-nudge { display: grid; grid-template-columns: 34px minmax(0, 1fr) 26px; column-gap: 10px; align-items: start; margin: 0 12px 12px; padding: 12px 8px 12px 12px; border-radius: 18px; background: #f6f6f8; animation: dg-nudgeIn .42s cubic-bezier(.2, .8, .2, 1) both; }
.dg-nudge__ic { grid-column: 1; grid-row: 1 / span 2; width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; background: #fff; color: #1d020c; box-shadow: 0 2px 8px rgba(20, 16, 26, .06); }
.dg-nudge__ic svg { width: 18px; height: 18px; }
.dg-nudge__b { grid-column: 2; grid-row: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-top: 1px; }
.dg-nudge__b b { font-size: 13.5px; font-weight: 600; color: #17161b; line-height: 1.25; }
.dg-nudge__b small { font-size: 12.5px; color: #6f6e76; line-height: 1.3; }
.dg-nudge__go { grid-column: 2; grid-row: 2; justify-self: start; margin-top: 10px; height: 32px; padding: 0 14px; border: 0; border-radius: 999px; background: #1d020c; color: #fff; font-family: inherit; font-size: 12.5px; font-weight: 600; line-height: 1; cursor: pointer; white-space: nowrap; }
.dg-nudge__go:active { transform: scale(.97); }
.dg-nudge__x { grid-column: 3; grid-row: 1; width: 26px; height: 26px; margin-top: -2px; border: 0; padding: 0; background: transparent; color: #a3a2aa; display: grid; place-items: center; cursor: pointer; }
.dg-nudge__x svg { width: 14px; height: 14px; }
@keyframes dg-nudgeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .dg-nudge { animation: none; } }

/* ---------- «Серия под угрозой» (атлас B-01, diary-game.js riskCard / riskHome) ----------
   Карточка дневника — белая плашка как .goals (без тени и контура), огонёк серии в мягком
   оранжевом квадрате, одна тёмная кнопка #101014 «Снять ужин» (dy-add). Главная — строка
   плашек home.top (.gl-hb из 40-life.css) с тем же огоньком вместо чёрного кружка. */
.dg-risk { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; align-items: start; background: #fff; border-radius: 26px; padding: 16px 18px 18px 16px; box-shadow: none; }
.dg-risk__ic, .dg-hrisk__ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: #fff1e6; color: #ff6f1a; }
.dg-risk__ic svg, .gl-hb__ic.dg-hrisk__ic svg { width: 22px; height: 22px; }
.dg-risk__b { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.dg-risk__k { font-size: 12px; font-weight: 600; letter-spacing: -0.1px; color: #8b8a92; }
.dg-risk.is-risk .dg-risk__k { color: #b4501a; }
.dg-risk__t { margin-top: 2px; font-size: 16.5px; font-weight: 600; letter-spacing: -0.4px; line-height: 1.25; color: #101014; text-wrap: balance; }
.dg-risk__s { margin: 4px 0 0; font-size: 13px; line-height: 1.4; color: #6f6e76; text-wrap: pretty; }
.dg-risk__go { margin-top: 12px; height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: #101014; color: #fff; font-family: inherit; font-size: 14px; font-weight: 600; letter-spacing: -0.2px; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.dg-risk__go svg { width: 17px; height: 17px; }
.dg-risk__go:active { transform: scale(.97); }
.gl-hb__ic.dg-hrisk__ic { border-radius: 14px; background: #fff1e6; color: #ff6f1a; }

/* ---- src/styles/48-equip.css ---- */
/* «Оборудование дома» (20-screens/equip.js) — рукописный файл, язык «Ещё»:
 * белые плашки xs-card без обводок и теней, отметки — тёмные круги (#101014),
 * а не розовая подсветка строки кита (.xs-row--radio.on из прототипа);
 * веса — чипы xs-chip; нижняя кнопка — .xs-bar2.eq-bar (таб-бар прячет
 * 00-core/16-cta.js). Без :has() — см. agent-traps «селекторы, перезапускающие
 * стили ВСЕГО приложения». */
.rf-t-equip .eq-scr { padding-bottom: 104px; }

/* шапка состояния */
.rf-t-equip .eq-head .xs-status { display: flex; align-items: flex-start; gap: 10px; padding: 14px 18px; font-size: 14px; line-height: 1.4; color: #6e6e73; }
.rf-t-equip .eq-head .xs-status .xs-dot { width: 6px; height: 6px; margin-top: 7px; flex: 0 0 auto; }
.rf-t-equip .eq-head .xs-status b { font-weight: 600; color: #101014; }
.rf-t-equip .eq-head .xs-dot--wait { background: #101014; }
.rf-t-equip .eq-head .xs-dot--ok { background: #34c759; }

/* позиции: отметка — круг справа, без розовой строки */
.rf-t-equip .eq-row.xs-row--radio.on { background: none; }
.rf-t-equip .eq-row .xs-ck { opacity: 1; width: 24px; height: 24px; border-radius: 50%; background: #ececf0; color: transparent; transition: background .15s, color .15s; }
.rf-t-equip .eq-row.on .xs-ck { background: #101014; color: #fff; }
.rf-t-equip .eq-row .xs-ck svg { width: 14px; height: 14px; stroke-width: 2.6px; }
.rf-t-equip .eq-row .xs-b small { color: #3a3a3c; }
.rf-t-equip .eq-row .xs-b small .eq-miss { color: #b25e00; }
.rf-t-equip .eq-row.eq-off { opacity: .45; }

/* веса под отмеченной позицией */
.rf-t-equip .eq-kg { padding: 0 18px 16px; }
.rf-t-equip .eq-kg small { display: block; font-size: 13px; color: #8e8e93; margin: 0 0 10px; }
.rf-t-equip .eq-kg .xs-chip { min-width: 48px; height: 36px; padding: 0 12px; font-size: 14.5px; box-shadow: none; }
.rf-t-equip .eq-kg .xs-chip:not(.on) { background: #f1f1f3; color: #101014; }
.rf-t-equip .eq-kg .xs-chip.on { background: #101014; color: #fff; }
/* строка после шкалы весов — с разделителем, как соседние строки */
.rf-t-equip .eq-kg + .xs-row::before { content: ""; position: absolute; left: 18px; right: 18px; top: 0; height: 1px; background: #ececef; }

/* комментарий тренеру: поле — серая плашка внутри белой карточки, без обводки */
.rf-t-equip .eq-note { padding: 12px 14px; }
.rf-t-equip .eq-note .xs-field { background: #f3f3f5; box-shadow: none; }
.rf-t-equip .eq-note .xs-field:focus-within { background: #ececf0; box-shadow: none; }
.rf-t-equip .eq-note textarea { font-size: 16px; min-height: 64px; }
.rf-t-equip .eq-cnt { margin: 6px 4px 0; font-size: 12.5px; color: #8e8e93; text-align: right; }
.rf-t-equip .eq-cnt:empty { display: none; }

/* нижняя панель: подпись «Отмечено N из 8» над кнопкой */
.xs-bar2.eq-bar { z-index: 23; padding-top: 28px; background: linear-gradient(180deg, rgba(var(--rf-page-rgb, 243, 243, 245), 0), var(--rf-page, #f3f3f5) 26px); }
.xs-bar2.eq-bar .eq-bar__s { text-align: center; font-size: 12.5px; color: #8e8e93; margin: 0 0 8px; }
.xs-bar2.eq-bar .eq-bar__s:empty { display: none; }
.xs-bar2.eq-bar .btn { background: #101014; color: #fff; box-shadow: none; }
.xs-bar2.eq-bar .btn[disabled] { background: #e5e5ea; color: #8e8e93; }

/* ---- src/styles/48-training-checkin.css ---- */
/* «Тренировки» → вопрос Re:forma над хабом: пропуски и «как продолжаем» (train-15-checkin.js).
 * Язык v3, без своих цветов вне палитры раздела: карточка — .gt-card (как «Удобные дни»),
 * полоса недель — капсулы .gt-days, варианты — плитки --v7-tile с выбором --v7-sel-*,
 * причины — капсулы как дни в листе «Что было?» (.v5-days), поле — .v5-field, кнопка — .v5-save.
 * Показ — только при training_checkin.v3 === true (флаг сервера), экран ждёт «ок» владельца. */
/* Надпись над вопросом длинная («Блок заканчивается в воскресенье»):
   чип стоит по центру, надпись — мельче и плотнее, чтобы на 390 px уместиться в строку. */
.trx .tck-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.trx .tck-eye { font-size: 11.5px; font-weight: 600; letter-spacing: .05em; line-height: 1.35; text-transform: uppercase; color: var(--v7-lbl, #8e8a8d); }
.trx .tck-weeks { display: flex; gap: 6px; margin: 0 0 14px; }
.trx .tck-weeks span { flex: 1 1 0; position: relative; height: 38px; border-radius: 100px; background: rgb(243, 243, 245); overflow: hidden; display: grid; place-items: center; }
.trx .tck-weeks i { position: absolute; inset: 0 auto 0 0; background: rgb(29, 2, 12); border-radius: 100px; }
.trx .tck-weeks b { position: relative; font-size: 13px; font-weight: 600; color: rgb(255, 255, 255); }
.trx .tck-weeks .is-low b { color: rgba(29, 2, 12, .55); }
.trx .tck-weeks .is-now i { opacity: .9; }
.trx .tck-t { font-size: 20px; letter-spacing: -.5px; line-height: 1.2; }
.trx .tck-cta { margin-top: 16px; }
.trx .tck-cta .trh-btn { flex: 1 1 0; }
/* Итог ответа: заголовок и «Изменить» — строкой .gt-row, капсулы ответа, «у тренера» — .gt-ok. */
.trx .tck-card--done .gt-row { gap: 12px; align-items: center; }
.trx .tck-card--done .gt-row button { flex: none; padding: 12px 0 12px 8px; margin: -12px 0; }
.trx .tck-done { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.trx .tck-done span { min-height: 32px; padding: 0 13px; border-radius: 100px; background: var(--v7-tile, #f2f0f2); display: inline-flex; align-items: center; font-size: 13px; font-weight: 500; color: rgb(29, 2, 12); }
/* Ответ своими словами в Telegram — строка статуса (концепция А «Строка статуса», владелец 09.10.2026):
   одна строка ~60 px — что произошло и что дальше; её текст — только в листе «Ваш ответ тренеру».
   Тренер ответил — та же строка с точкой непрочитанного, первой строкой ответа и временем. Тот же итог в v2. */
.trx .gt-card.tck-row { padding: 0; }
.trx .tck-row__b { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 12px 12px 12px 14px; border: 0; border-radius: inherit; background: none; font-family: inherit; text-align: left; color: var(--content-strong); cursor: pointer; }
.trx .tck-row__av { position: relative; flex: none; display: block; width: 36px; height: 36px; }
.trx .tck-row__av.is-new::after { content: ""; position: absolute; right: -1px; top: -1px; width: 11px; height: 11px; border-radius: 50%; background: #ff4f6d; box-shadow: 0 0 0 2px var(--card); }
.trx .tck-row__ic { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--tile); color: var(--brand-strong); }
.trx .tck-row__ic svg { width: 18px; height: 18px; stroke-width: 1.9; }
.trx .tck-row__ic--ok { background: rgba(106, 161, 42, .12); color: rgb(106, 161, 42); }
.trx .tck-row__t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.trx .tck-row__t b { font-size: 15px; line-height: 20px; font-weight: 600; letter-spacing: -.005em; color: var(--content-strong); }
.trx .tck-row__t small { font-size: 13px; line-height: 18px; color: var(--content-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trx .tck-row__t small.is-msg { color: rgba(12, 14, 18, .72); }
.trx .tck-row__time { flex: none; align-self: flex-start; margin-top: 2px; font-size: 12px; color: var(--content-subtle); }
.trx .tck-row__go { flex: none; width: 18px; height: 18px; color: rgba(12, 14, 18, .32); }
.trx .tck-row__go svg { display: block; width: 18px; height: 18px; stroke-width: 2.2; }
/* Лист «Ваш ответ тренеру» — единственное место, где виден её текст. */
.trx .tck-words__msg { margin: 14px 0 18px; padding: 12px 14px; border-radius: 16px; background: var(--tile); font-size: 15px; line-height: 21px; color: var(--content-strong); white-space: pre-wrap; overflow-wrap: anywhere; }
.trx .tck-words__go { width: 100%; min-height: 50px; }
.trx .tck-words__go + .tck-words__go { margin-top: 8px; }
.trx .tck-words__note { margin: 10px 0 0; text-align: center; font-size: 13px; line-height: 18px; color: var(--content-subtle); }
/* Лист: варианты строками, у каждой — что будет дальше. */
.trx .tck-opts { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.trx .tck-opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 64px; padding: 12px 16px; border: 0; border-radius: 18px; background: var(--v7-tile, #f2f0f2); font-family: inherit; text-align: left; color: rgb(29, 2, 12); cursor: pointer; }
.trx .tck-opt.on { background: var(--v7-sel-bg, #f6eef3); box-shadow: var(--v7-sel-ring, inset 0 0 0 1px rgba(160, 80, 120, .14)); }
.trx .tck-opts.is-busy .tck-opt:not(.on) { opacity: .5; }
.trx .tck-opt__b { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.trx .tck-opt__b b { font-size: 15.5px; font-weight: 600; letter-spacing: -.2px; }
.trx .tck-opt__b small { font-size: 13px; line-height: 1.35; color: rgba(29, 2, 12, .55); }
.trx .tck-opt i { flex: none; width: 18px; height: 18px; color: rgba(29, 2, 12, .3); }
.trx .tck-opt i svg { width: 18px; height: 18px; }
/* Второй шаг: причины — капсулы (одна у «Что мешает?», несколько у «Что поменять?»). */
.trx .tck-reasons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.trx .tck-reasons button { min-height: 40px; padding: 0 15px; border: 0; border-radius: 100px; background: var(--v7-tile, #f2f0f2); font-family: inherit; font-size: 14px; font-weight: 600; color: rgb(29, 2, 12); cursor: pointer; }
.trx .tck-reasons button.on { background: rgb(29, 2, 12); color: rgb(255, 255, 255); }
.trx .tck-sheet .tck-lbl { margin-top: 20px; }

/* ---- src/styles/49-billing.css ---- */
/* «Подписка»: лист «Продлить» (оплата внутри приложения) и заявка на заморозку.
 * Текст согласия на автосписание — юридический: показываем целиком, без
 * обрезки строки (у .xs-b small в листе — многоточие через 2 строки). */
.xs-row.rn-cons .xs-b small{ display: block; white-space: normal; overflow: visible; text-overflow: clip; -webkit-line-clamp: unset; line-clamp: unset; max-height: none; line-height: 1.4; }

/* ---- src/styles/50-meal-mode.css ---- */
/* Выбор «Сразу» / «Сначала уточню» и знакомство с ним (20-screens/meal-mode.js, diary-sheets.js «nt»).
   Перенесено из макета design-preview/meal-ai-mode (mock.css) 1:1; цвета — токены приложения. */
/* ---------- А. шторка «Описание для ИИ» ---------- */
.nv-sheet.nv-sheet--nt{padding:12px 20px calc(30px + var(--rf-safe-bottom))}
.nv-sheet--nt .nv-sheet__bar{margin-bottom:16px}
.nt-sub{margin-top:6px;font-size:14px;line-height:1.45;letter-spacing:-.1px;color:#8e8e93}
.nt-fld{position:relative;display:block;margin-top:16px;padding:14px 16px;border-radius:18px;background:#fbfbfc;box-shadow:inset 0 0 0 1px rgba(12,14,18,.07);transition:box-shadow .15s}
.nt-fld:focus-within{box-shadow:inset 0 0 0 1.5px #ffc5dc}
.nt-fld.is-bad{box-shadow:inset 0 0 0 1.5px rgba(215,55,47,.5)}
.is-busy .nt-fld{opacity:.55}
.nt-ta{display:block;width:100%;min-height:92px;padding:0;border:0;outline:0;resize:none;background:transparent;font:inherit;font-size:16px;line-height:1.45;letter-spacing:-.2px;color:#111}
.nt-ta::placeholder{color:#aeaeb2}
.nt-meta{display:flex;justify-content:flex-end;gap:14px;margin:9px 4px 0;font-size:12.5px;line-height:1.35;color:#8e8e93}
.nt-cnt{flex:0 0 auto;font-variant-numeric:tabular-nums}
.nt-ex{margin:16px 0 0}
.nt-exh{padding:0 4px 9px;font-size:13px;font-weight:600;letter-spacing:-.1px;color:#8e8e93}
.nt-chips{display:flex;flex-wrap:wrap;gap:8px}
.nt-chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px 0 11px;border:0;border-radius:14px;background:#f1f1f3;color:#111;font-size:14.5px;letter-spacing:-.2px;white-space:nowrap;cursor:pointer}
.nt-chip svg{width:14px;height:14px;stroke-width:2.3px;color:#6e6e73}
.nt-chip.is-used{background:#f6f6f8;color:#aeaeb2;cursor:default}
.nt-chip.is-used svg{color:#aeaeb2}
.nv-sheet--nt .gd-dserr{margin-top:16px}
.nv-sheet--nt .btn{margin-top:22px}
.nv-sheet--nt .btn[disabled]{background:#e5e5ea;color:#8e8e93;box-shadow:none;cursor:default}
.nv-sheet--nt .btn.is-busy,.nv-sheet--nt .btn.is-busy[disabled]{background:#101014;color:#fff;box-shadow:0 14px 28px -12px rgba(16,16,20,.34);opacity:.92;pointer-events:none}
.nt-skip{display:block;width:100%;height:48px;margin-top:4px;border:0;background:none;font-size:15.5px;font-weight:600;letter-spacing:-.2px;color:#111;cursor:pointer}
.nt-skip[disabled]{color:#c7c7cc;cursor:default}

/* ---------- «Распознавание»: значение строки в меню приёма — обычный серый текст со стрелкой ---------- */
.mr-v{flex:0 0 auto;font-size:15px;letter-spacing:-.2px;color:#8e8e93;white-space:nowrap}
.sh-list .mr-li .chev{margin-left:-6px}
/* ---------- Б. выбор режима (в листе xs-sheet) ---------- */
.md-list{display:flex;flex-direction:column;gap:12px}
.md{position:relative;display:block;width:100%;padding:0 0 18px;border:0;border-radius:24px;background:#f6f6f8;box-shadow:inset 0 0 0 1.5px transparent;text-align:left;font:inherit;color:#101014;cursor:pointer;overflow:hidden;transition:background .2s,box-shadow .2s}
.md.on{background:#f6eef3;box-shadow:inset 0 0 0 1.5px #1d020c}
.md-ill{position:relative;height:112px;margin:10px 10px 0;border-radius:16px;background:#fff;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(12,14,18,.04)}
.md-tx{padding:14px 20px 0}
.md-tx b{display:block;padding-right:34px;font-size:17px;font-weight:600;letter-spacing:-.35px}
.md-tx small{display:block;margin-top:4px;font-size:14px;line-height:1.42;letter-spacing:-.1px;color:#8e8e93}
.md-tx small em{font-style:normal;color:#3f3e46}
.md-ck{position:absolute;right:20px;top:126px;width:26px;height:26px;border-radius:50%;box-shadow:inset 0 0 0 2px #d1d1d6;color:transparent;display:grid;place-items:center}
.md-ck svg{width:14px;height:14px;stroke-width:2.6px}
.md.on .md-ck{background:#1d020c;box-shadow:none;color:#fff}
.md-foot{margin:14px 4px 0;font-size:13px;line-height:1.45;color:#8e8e93}
.md-foot b{color:#3f3e46;font-weight:600}
.xs-sheet.is-mode .xs-sheet__f{padding-top:6px}

/* ---------- мини-анимации режимов ---------- */
.mi{position:absolute;inset:0;--loop:5s}
.mi *{box-sizing:border-box}
.mi-ph{position:absolute;left:18px;top:14px;width:70px;height:84px;border-radius:13px;background:url("/static/miniapp-v3/assets/dish-bowl.347d622d.webp") 42% 50%/cover;box-shadow:0 8px 18px -8px rgba(34,24,40,.45);overflow:hidden}
.mi-ph::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.mi-fl{position:absolute;inset:0;background:#fff;opacity:0}
.mi-beam{position:absolute;left:0;right:0;top:-24px;height:24px;background:linear-gradient(rgba(255,255,255,0),rgba(255,255,255,.55),rgba(255,255,255,0));opacity:0}
.mi-dot{position:absolute;width:9px;height:9px;border-radius:50%;background:#fff;box-shadow:0 0 0 2.5px rgba(17,17,17,.5);opacity:0}
.mi-res{position:absolute;display:flex;align-items:center;gap:9px;height:58px;padding:0 14px 0 9px;border-radius:18px;background:#fff;box-shadow:0 10px 24px -10px rgba(34,24,40,.35),inset 0 0 0 1px rgba(12,14,18,.05);opacity:0}
.mi-res i{flex:0 0 auto;width:40px;height:40px;border-radius:50%;background:url("/static/miniapp-v3/assets/dish-bowl.347d622d.webp") 42% 50%/cover;box-shadow:0 0 0 1px rgba(20,16,26,.06)}
.mi-res b{display:block;font-size:12.5px;font-weight:600;letter-spacing:-.2px}
.mi-res small{display:block;margin-top:1px;font-size:12px;color:#8b8a92;font-variant-numeric:tabular-nums;white-space:nowrap}
.mi-res small em{font-style:normal;color:#101014;font-weight:700}
.mi-arrow{position:absolute;top:50%;width:26px;height:26px;margin-top:-13px;color:#c7c7cc;opacity:0}
.mi-arrow svg{width:26px;height:26px}
/* «Сразу»: 4.6 с */
.mi--now{--loop:4.6s}
.mi--now .mi-ph{animation:miIn var(--loop) infinite both}
.mi--now .mi-fl{animation:miFlash var(--loop) infinite both}
.mi--now .mi-beam{animation:miBeam var(--loop) infinite both}
.mi--now .mi-arrow{left:100px;animation:miArrow var(--loop) infinite both}
.mi--now .mi-res{left:132px;top:27px;width:160px;animation:miRes var(--loop) infinite both}
/* «Сначала уточню»: 7 с */
.mi--ask{--loop:7s}
.mi--ask .mi-ph{animation:miIn var(--loop) infinite both}
.mi--ask .mi-beam{animation:miBeam2 var(--loop) infinite both}
.mi--ask .mi-panel{position:absolute;left:100px;top:9px;width:196px;padding:8px;border-radius:16px;background:#1b1a20;animation:miPanel var(--loop) infinite both}
.mi-th{display:flex;gap:5px;height:24px}
.mi-th span{width:24px;height:24px;border-radius:7px;background:center/cover no-repeat}
.mi-th span:nth-child(1){background-image:url("/static/miniapp-v3/assets/dish-bowl.347d622d.webp");box-shadow:0 0 0 1.5px #fff}
.mi-th span:nth-child(2){background-image:url("/static/miniapp-v3/assets/pre-guide-losos.8e5f312b.webp");animation:miPop2 var(--loop) infinite both}
.mi-th span:nth-child(3){background-image:url("/static/miniapp-v3/assets/pre-guide-pan.e7a8569d.webp");animation:miPop3 var(--loop) infinite both}
.mi-fld{position:relative;height:26px;margin-top:6px;padding:0 8px;border-radius:9px;background:rgba(255,255,255,.14);display:flex;flex-direction:column;justify-content:center;gap:3px}
.mi-fld i{display:block;height:3.5px;border-radius:3px;background:rgba(255,255,255,.78);width:0;animation:miType var(--loop) infinite both}
.mi-fld i + i{animation-name:miType2;width:0}
.mi-go{position:relative;height:22px;margin-top:6px;border-radius:11px;background:#fff;color:#101014;font-size:10.5px;font-weight:700;letter-spacing:-.1px;display:grid;place-items:center;animation:miGo var(--loop) infinite both}
.mi-tap{position:absolute;right:56px;top:66px;width:22px;height:22px;margin:-11px;border-radius:50%;border:2px solid rgba(16,16,20,.4);opacity:0;animation:miTap var(--loop) infinite both}
.mi--ask .mi-res{left:104px;top:26px;width:170px;animation:miRes2 var(--loop) infinite both}
@keyframes miIn{0%{opacity:0;transform:scale(.9)}6%,88%{opacity:1;transform:none}96%,100%{opacity:0;transform:scale(.97)}}
@keyframes miFlash{0%,10%{opacity:0}12%{opacity:.9}24%,100%{opacity:0}}
@keyframes miBeam{0%,17%{opacity:0;top:-24px}18%{opacity:1;top:-24px}36%{opacity:1;top:84px}37%,100%{opacity:0;top:84px}}
@keyframes miArrow{0%,34%{opacity:0;transform:translateX(-6px)}42%,84%{opacity:1;transform:none}92%,100%{opacity:0}}
@keyframes miRes{0%,36%{opacity:0;transform:translateX(26px) scale(.96)}46%,84%{opacity:1;transform:none}92%,100%{opacity:0;transform:translateX(0)}}
@keyframes miPanel{0%,8%{opacity:0;transform:translateX(22px)}16%,64%{opacity:1;transform:none}70%,100%{opacity:0;transform:translateX(0)}}
@keyframes miPop2{0%,14%{transform:scale(0);opacity:0}20%{transform:scale(1.15);opacity:1}24%,100%{transform:scale(1);opacity:1}}
@keyframes miPop3{0%,22%{transform:scale(0);opacity:0}28%{transform:scale(1.15);opacity:1}32%,100%{transform:scale(1);opacity:1}}
@keyframes miType{0%,32%{width:0}46%,100%{width:88%}}
@keyframes miType2{0%,46%{width:0}56%,100%{width:52%}}
@keyframes miGo{0%,58%{transform:none}61%{transform:scale(.94)}65%,100%{transform:none}}
@keyframes miTap{0%,58%{opacity:0;transform:scale(.6)}60%{opacity:1;transform:scale(1)}68%,100%{opacity:0;transform:scale(1.9)}}
@keyframes miBeam2{0%,63%{opacity:0;top:-24px}64%{opacity:1;top:-24px}74%{opacity:1;top:84px}75%,100%{opacity:0;top:84px}}
@keyframes miRes2{0%,72%{opacity:0;transform:translateX(18px) scale(.96)}80%,90%{opacity:1;transform:none}97%,100%{opacity:0}}

/* кадр 1: две дороги */
.fk{display:flex;flex-direction:column;padding:16px 16px 18px;border-radius:26px;background:#fff;color:#101014;font-family:Geist,-apple-system,BlinkMacSystemFont,sans-serif;box-shadow:0 26px 60px -26px rgba(34,24,40,.34),0 8px 20px -10px rgba(34,24,40,.14)}
.fk__ic{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:#f3f3f5}
.fk b{margin-top:12px;font-size:17px;font-weight:600;letter-spacing:-.35px}
.fk p{margin:4px 0 14px;font-size:13px;line-height:1.38;color:#8e8e93}
.fk__st{margin:auto 0 0;padding:14px 0 0;list-style:none;border-top:1px solid #efeff2;display:flex;flex-direction:column;gap:9px}
.fk__st li{display:flex;align-items:center;gap:9px;font-size:13.5px;line-height:1.2;letter-spacing:-.1px}
.fk__st li i{flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#101014;color:#fff}
.fk__st li[data-o="1"] i{background:#fff;color:#8e8e93;box-shadow:inset 0 0 0 1.5px #d1d1d6}
.fk__st small{display:block;margin-top:1px;font-size:11.5px;color:#8e8e93}
/* кадр 4: выбор */
.pk-c{display:flex;align-items:center;gap:14px;min-height:96px;padding:16px;border:0;border-radius:24px;background:#fff;color:#101014;text-align:left;font:inherit;cursor:pointer;box-shadow:0 12px 28px -14px rgba(34,24,40,.28),inset 0 0 0 1.5px transparent;transition:background .2s,box-shadow .2s}
.pk-c.on{background:#f6eef3;box-shadow:0 12px 28px -14px rgba(34,24,40,.28),inset 0 0 0 1.5px #1d020c}
.pk-c__ic{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:15px;background:#f3f3f5}
.pk-c.on .pk-c__ic{background:#fff}
.pk-c__tx{flex:1 1 auto;min-width:0}
.pk-c__tx b{display:block;font-size:17px;font-weight:600;letter-spacing:-.35px}
.pk-c__tx small{display:block;margin-top:3px;font-size:13.5px;line-height:1.38;color:#8e8e93}
.pk-c__tx em{display:block;margin-top:5px;font-style:normal;font-size:12.5px;color:#5f5e66}
.pk-c .md-ck{position:static;flex:none}
.pk-c.on .md-ck{background:#1d020c;box-shadow:none;color:#fff}
.pk-note{text-align:center;font-size:13px;line-height:1.45;color:#8e8e93}
.pk-note b{font-weight:600;color:#3f3e46}
.nt-chip__i{display:inline-grid;place-items:center;width:14px;height:14px}

/* шторка «Описание для ИИ»: выше окна — прокрутка внутри; с клавиатурой — ниже отступы */
.nv-sheet--nt{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.nv-sheet--nt::-webkit-scrollbar{display:none}
.nv-sheet.nv-sheet--nt.is-kb{padding-bottom:14px}
/* шторка выбора: выше обычной, чтобы последняя строка не пряталась под кнопкой */
.xs-sheet.is-mode{max-height:92%}
.xs-sheet.is-mode .xs-sheet__b{padding-bottom:18px}

/* Тихая карточка знакомства в дневнике: строка ведёт в кино, крестик — скрыть (мишень 44 px). */
.mm-card .mm-card__x { flex: 0 0 auto; width: 44px; height: 44px; margin: -10px -12px -10px 0; border: 0; background: none; color: rgb(163, 162, 170); display: grid; place-items: center; cursor: pointer; }
.mm-card .mm-card__x svg { width: 16px; height: 16px; }

/* ---- src/styles/50-pay.css ---- */
/* Платежи и подписка (макет «pay-redesign», решения владельца).
 * Кирпичи — 20-screens/pay-kit.js (RF.payKit): ключ—значение, уведомление,
 * карточка «условия + согласие», выбор из вариантов, клубная карта, «пластики».
 * Сетка платёжных экранов: поля страницы 16, отступ карточки 18, ряд ≥ 56,
 * промежуток между блоками 20, разделитель 1px (inset 18), кнопки 54 в три ступени.
 * Вторичный текст согласия, условий автосписаний и сносок — rgb(110,110,115): контраст ≥ 4,5:1
 * на белом, сером листе и выбранном розовом (решение владельца); значения токенов не меняем.
 * Розовый (rgb 246 238 243 + сливовый rgb 29 2 12) — только у выбранного варианта и галочки. */

/* ---------- страница «Подписка»: ритм 20 ---------- */
.pk-page .xs-grp { margin-top: 20px; }
.pk-page .xs-grp:first-child { margin-top: 12px; }
.pk-page .xs-subx { margin-top: 6px; }


/* ---------- ключ — значение ---------- */
.pk-kv { min-height: 56px; }
.pk-kv .xs-b { flex: 0 0 auto; }
.pk-kv .xs-b b { font-size: 15px; font-weight: 400; letter-spacing: -0.2px; color: rgb(142, 142, 147); }
.pk-kv .xs-v { flex: 1 1 auto; max-width: none; min-width: 0; display: flex; flex-direction: column; align-items: flex-end; text-align: right; white-space: normal; overflow: visible; text-overflow: clip;
  font-size: 15.5px; font-weight: 500; line-height: 1.3; color: rgb(17, 17, 17); }
.pk-kv .xs-v small { display: block; font-size: 13px; font-weight: 400; color: rgb(142, 142, 147); margin-top: 1px; }
.pk-kv .chev { margin-left: 0; }

  background: linear-gradient(rgb(250, 250, 251), rgb(235, 235, 239)); box-shadow: rgba(0, 0, 0, 0.08) 0 0 0 1px inset; font-size: 11px; font-weight: 800; letter-spacing: 0.5px; line-height: 1; }

/* ---------- уведомление: значок, заголовок, текст, кнопки внутри ---------- */
.pk-nt { padding: 18px; }
.pk-nt__h { display: flex; align-items: flex-start; gap: 14px; }
.pk-nt__ic { width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; background: rgb(241, 241, 243); color: rgb(17, 17, 17); }
.pk-nt__ic.is-dark { background: rgb(17, 17, 17); color: rgb(255, 255, 255); }
.pk-nt__ic svg { width: 20px; height: 20px; }
.pk-nt__b { flex: 1 1 auto; min-width: 0; display: block; }
.pk-nt__t, .pk-nt__b--md b { display: block; font-size: 16.5px; font-weight: 600; letter-spacing: -0.3px; line-height: 1.25; color: rgb(17, 17, 17); }
.pk-nt__s { display: block; font-size: 14px; line-height: 1.45; color: rgb(110, 110, 115); margin-top: 4px; }
.pk-nt__b--md { font-size: 14px; line-height: 1.45; color: rgb(110, 110, 115); }
.pk-nt__b--md b { margin-bottom: 4px; }
.pk-nt__a { display: grid; gap: 8px; margin-top: 18px; }
.pk-nt__f { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgb(236, 236, 239); font-size: 12.5px; line-height: 1.5; color: rgb(110, 110, 115); }
.pk-nt__f b { color: rgb(17, 17, 17); font-weight: 600; }
.pk-nt > .pk-nt__h .chev { align-self: center; margin-right: -4px; }
.pk-nt[data-xa] { cursor: pointer; }

/* ---------- кнопки: три ступени ---------- */
.pk-b { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 54px; padding: 0 16px; border: 0; border-radius: 100px; cursor: pointer;
  background: rgb(17, 17, 17); color: rgb(255, 255, 255); font-family: inherit; font-size: 16px; font-weight: 600; letter-spacing: -0.3px; transition: transform 0.15s; }
.pk-b:active { transform: scale(0.985); }
.pk-b--ghost { height: 44px; background: none; color: rgb(17, 17, 17); font-size: 15.5px; }
.pk-b[disabled] { opacity: 0.55; cursor: default; }

/* ---------- лист: блоки, метки, сноски ---------- */
.pi-sheet .xs-sheet__b, .pk-frzv .xs-sheet__b { padding-top: 14px; padding-bottom: 16px; }
.pk-lbl { margin: 20px 4px 8px; font-size: 13px; font-weight: 600; letter-spacing: -0.1px; color: rgb(142, 142, 147); }
.xs-sheet__b > .pk-lbl:first-child { margin-top: 0; }
.pk-blk { margin-top: 16px; }
.xs-sheet__b > .pk-blk:first-child { margin-top: 0; }
.pk-sb { background: rgb(246, 246, 248); border-radius: 20px; overflow: hidden; }
.xs-sheet .pk-sb .xs-row { min-height: 48px; padding: 9px 16px; }
.xs-sheet .pk-sb .xs-row + .xs-row::before { left: 16px; right: 16px; }
.pk-sbn { padding: 10px 4px 0; font-size: 13px; line-height: 1.45; color: rgb(110, 110, 115); }
.pk-sbn--top { padding-top: 14px; }
.pk-lnk { color: rgb(17, 17, 17); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; cursor: pointer; }

/* низ листа: серая кнопка говорит, что сделать («Сначала отметьте согласие»), и остаётся нажимаемой */
.xs-sheet__f .btn.is-off { background: rgb(229, 229, 234); color: rgb(99, 99, 102); cursor: default; box-shadow: none; }
.xs-sheet__f .btn.is-off:active { transform: none; }
.xs-sheet__f .btn { height: 54px; }
.xs-sheet__f { padding-bottom: max(22px, calc(var(--rf-safe-bottom) + 14px)); }



/* ---------- согласие: галочка (вид строки — .pv-cons ниже) ---------- */
.pk-cons__cb { width: 26px; height: 26px; margin-top: 1px; border-radius: 8px; flex: 0 0 auto; display: grid; place-items: center; color: rgb(255, 255, 255); background: rgb(255, 255, 255); box-shadow: rgb(199, 199, 204) 0 0 0 2px inset; }
.pk-cons__cb svg { width: 17px; height: 17px; stroke-width: 3px; opacity: 0; }
.pk-cons__t { display: block; font-size: 16px; font-weight: 500; letter-spacing: -0.25px; line-height: 1.3; }
.pk-opt:focus-visible { box-shadow: rgb(255, 197, 220) 0 0 0 2px inset; }
.pk-cons__e { display: flex; align-items: center; gap: 6px; margin: 8px 4px 0; font-size: 13.5px; font-weight: 500; color: rgb(58, 58, 60); }
.pk-cons__e svg { width: 15px; height: 15px; }

/* ---------- выбор из вариантов ---------- */
.pk-opt { display: flex; align-items: flex-start; gap: 14px; padding: 13px 16px; min-height: 64px; border-radius: 20px; background: rgb(246, 246, 248); cursor: pointer; outline: none; }
.pk-opt + .pk-opt { margin-top: 8px; }
.pk-opt__rd { width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; background: rgb(255, 255, 255); box-shadow: rgb(199, 199, 204) 0 0 0 2px inset; }
.pk-opt__rd::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: rgb(255, 255, 255); transform: scale(0); transition: transform 0.15s; }
.pk-opt__b { flex: 1 1 auto; min-width: 0; display: block; }
.pk-opt__t { display: block; font-size: 16px; font-weight: 500; letter-spacing: -0.25px; line-height: 1.3; }
.pk-opt__s { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.4; color: rgb(142, 142, 147); }
.pk-opt__p { flex: 0 0 auto; font-size: 16px; font-weight: 500; letter-spacing: -0.25px; line-height: 1.3; font-variant-numeric: tabular-nums; }
.pk-opt.on { background: rgb(246, 238, 243); box-shadow: rgb(29, 2, 12) 0 0 0 1.5px inset; }
.pk-opt.on .pk-opt__rd { background: rgb(29, 2, 12); box-shadow: none; }
.pk-opt.on .pk-opt__rd::after { transform: scale(1); }
.pk-opt.on .pk-opt__t, .pk-opt.on .pk-opt__p { font-weight: 600; }
.pk-opt + .pk-blk { margin-top: 16px; }

/* ---------- «Заморозить»: плитки, сегмент ---------- */
.xs-sheet .pk-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.xs-sheet .pk-tiles .xs-chip { height: 62px; padding: 0; border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: rgb(246, 246, 248); color: rgb(17, 17, 17); font-size: 16px; }
.xs-sheet .pk-tiles .xs-chip small { font-size: 12.5px; color: rgb(142, 142, 147); }
.xs-sheet .pk-tiles .xs-chip b { font-size: 16px; font-weight: 500; letter-spacing: -0.25px; }
.xs-sheet .pk-tiles .xs-chip.on { background: rgb(246, 238, 243); color: rgb(17, 17, 17); box-shadow: rgb(29, 2, 12) 0 0 0 1.5px inset; }
.xs-sheet .pk-tiles .xs-chip.on b { font-weight: 600; }
.xs-sheet .pk-tiles--two { grid-template-columns: repeat(2, 1fr); }
.xs-sheet .pk-tiles--two .xs-chip { height: 50px; flex-direction: row; padding: 0 8px; font-size: 14.5px; letter-spacing: -0.25px; }
.xs-sheet .pk-tiles .xs-chip.pk-more { grid-column: 1 / -1; height: 40px; flex-direction: row; justify-content: flex-start; padding: 0 4px; background: none; font-size: 14.5px; font-weight: 600; box-shadow: none; }
.xs-sheet .pk-seg { display: flex; flex-wrap: nowrap; gap: 6px; padding: 4px; border-radius: 18px; background: rgb(241, 241, 243); }
.xs-sheet .pk-seg .xs-chip { flex: 1 1 0; height: 44px; padding: 0; border-radius: 14px; background: none; color: rgb(17, 17, 17); font-size: 15.5px; }
.xs-sheet .pk-seg .xs-chip.on { background: rgb(246, 238, 243); color: rgb(17, 17, 17); box-shadow: rgb(29, 2, 12) 0 0 0 1.5px inset; font-weight: 600; }
.pk-frzv .xs-ok--red { background: rgb(241, 241, 243) !important; color: rgb(215, 55, 47); height: 50px; font-size: 15.5px; }

/* ---------- Главная: баннер долга ---------- */
.pi-hb.hm-card { padding: 18px; align-items: center; }
.pi-hb .gl-hb__t { font-size: 16.5px; letter-spacing: -0.3px; }
.pi-hb .gl-hb__s { font-size: 14px; line-height: 1.45; margin-top: 4px; }

/* ---------- экраны итога (слой .gl): один вид «ключ — значение» ---------- */
.gl-facts { margin: 0 18px; padding: 2px 0; border-top: 1px solid rgb(236, 236, 239); }
.gl-fact { padding: 13px 0; font-size: 15px; align-items: baseline; }
.gl-fact + .gl-fact { border-top: 1px solid rgb(236, 236, 239); }
.gl-fact span { color: rgb(142, 142, 147); }
.gl-fact b { font-weight: 500; font-size: 15.5px; }
.gl-rc .gl-facts { border-top: 0; }
.gl-foot .gl-btn { height: 54px; }
.gl-fact b small { display: block; margin-top: 1px; font-size: 13px; font-weight: 400; color: rgb(142, 142, 147); }

/* ================= «Клубная карта» (макет pay/b.html) =================
 * Подписка — тёмная сливовая карта (rgb 31 10 23 → rgb 29 2 12), розовые — только точки
 * логотипа; банковские карты — «пластики»; согласие — строка-галочка под чертой в карточке условий. */

/* клубная карта */
.pk-mc { position: relative; border-radius: 26px; padding: 20px 20px 18px; color: rgb(255, 255, 255); overflow: hidden;
  background: linear-gradient(155deg, rgb(31, 10, 23) 0%, rgb(29, 2, 12) 60%); }
.pk-mc__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.pk-mc__logo { display: block; flex: 0 0 auto; height: 17px; color: rgb(255, 255, 255); }
.pk-mc__logo svg { display: block; height: 17px; width: auto; }
.pk-mc__plan { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, 0.7); }
.pk-mc__k { margin-top: 28px; font-size: 13px; color: rgba(255, 255, 255, 0.66); }
.pk-mc__v { margin-top: 4px; font-size: 34px; font-weight: 600; letter-spacing: -1.1px; line-height: 1.08; overflow-wrap: anywhere; }
.pk-mc__wk { display: flex; gap: 4px; margin-top: 20px; }
.pk-mc__wk i { flex: 1 1 0; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.16); }
.pk-mc__wk i.d { background: rgb(255, 255, 255); }
.pk-mc__wk i.now { background: rgba(255, 255, 255, 0.5); }
.pk-mc__f { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; font-size: 13px; line-height: 1.3; color: rgba(255, 255, 255, 0.7); }
.pk-mc__f > span:first-child { min-width: 0; }
.pk-mc__st { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; color: rgb(255, 255, 255); font-weight: 500; }
.pk-mc__st i { width: 7px; height: 7px; border-radius: 50%; background: rgb(255, 255, 255); }
.pk-mc__st i.e { background: rgb(255, 107, 97); }
.pk-mc.is-dim .pk-mc__v { color: rgba(255, 255, 255, 0.8); }
@media (max-width: 359px) { .pk-mc { padding: 18px 16px 16px; } .pk-mc__v { font-size: 30px; } }

/* «пластик» банковской карты (метка системы монохромная) */
.pk-pl { position: relative; display: block; flex: 0 0 auto; width: 52px; height: 34px; border-radius: 7px; box-sizing: border-box;
  background: linear-gradient(145deg, rgb(251, 251, 252), rgb(233, 233, 238)); box-shadow: rgba(0, 0, 0, 0.08) 0 0 0 1px inset, rgba(0, 0, 0, 0.06) 0 2px 6px; }
.pk-pl b { position: absolute; left: 6px; top: 5px; font-size: 7.5px; font-weight: 800; letter-spacing: 0.4px; line-height: 1; color: rgb(28, 28, 30); }
.pk-pl i { position: absolute; right: 6px; bottom: 5px; font-style: normal; font-size: 8.5px; font-weight: 600; line-height: 1; color: rgb(58, 58, 60); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pk-pl--visa b { font-style: italic; font-size: 8.5px; }
.pk-pl b svg { display: block; width: 16px; height: 10px; color: rgb(28, 28, 30); }
.pk-pl--l { width: 132px; height: 86px; border-radius: 14px; }
.pk-pl--l b { left: 13px; top: 12px; font-size: 12px; }
.pk-pl--l.pk-pl--visa b { font-size: 13px; }
.pk-pl--l b svg { width: 26px; height: 16px; }
.pk-pl--l i { right: 13px; bottom: 11px; font-size: 13.5px; }
.pk-pl--l::after { content: ""; position: absolute; left: 13px; top: 38px; width: 22px; height: 16px; border-radius: 4px; background: linear-gradient(135deg, rgb(217, 217, 222), rgb(199, 199, 204)); }
.pk-pl--new { background: rgb(255, 255, 255); box-shadow: none; display: grid; place-items: center; }
.pk-pl--new::before { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1.5px dashed rgb(183, 183, 190); }
.pk-pl--new::after { display: none; }
.pk-pl--new > span { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: rgb(241, 241, 243); color: rgb(17, 17, 17); }
.pk-pl--new > span svg { width: 11px; height: 11px; }
.pk-pl--l.pk-pl--new > span { width: 30px; height: 30px; }
.pk-pl--l.pk-pl--new > span svg { width: 16px; height: 16px; }

/* поручение на автоплатёж */
.pk-man { margin-top: 14px; border-radius: 22px; background: rgb(255, 255, 255); box-shadow: rgb(229, 229, 234) 0 0 0 1.5px inset; overflow: hidden; }
.pk-man__h { padding: 13px 16px 3px; font-size: 13px; font-weight: 600; color: rgb(110, 110, 115); }
.pk-man__r { display: grid; grid-template-columns: minmax(84px, 36%) 1fr; gap: 10px; padding: 7px 16px; font-size: 14.5px; line-height: 1.35; }
.pk-man__r span { color: rgb(110, 110, 115); min-width: 0; overflow-wrap: anywhere; }
.pk-man__r > b { font-weight: 500; color: rgb(17, 17, 17); font-variant-numeric: tabular-nums; min-width: 0; overflow-wrap: anywhere; }
.pk-man__r small { display: block; margin-top: 1px; font-size: 13px; font-weight: 400; color: rgb(110, 110, 115); }
.pk-man > .pk-man__r:last-child { padding-bottom: 14px; }
.xs-sheet .pk-man { background: rgb(255, 255, 255); }

/* строка-пояснение и сноска о поясе */
.pk-line { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 0 2px; font-size: 13px; line-height: 1.45; color: rgb(110, 110, 115); }
.pk-line > svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 1px; color: rgb(110, 110, 115); }
.pk-line b { color: rgb(17, 17, 17); font-weight: 600; }
.pk-tz { margin-top: 12px; font-size: 12.5px; line-height: 1.4; color: rgb(110, 110, 115); text-align: center; }
.xs-sheet__f .pk-tz { margin-top: 10px; }

/* тарифы — плитки; сетка чуть шире тела листа, чтобы «дальше 8 500 ₽» помещалось строкой */
.pk-pts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0 -6px; }
.pk-pts--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pk-pts--1 { grid-template-columns: 1fr; }
.pk-pt { min-width: 0; border-radius: 20px; padding: 14px 8px 13px 10px; background: rgb(255, 255, 255); box-shadow: rgb(229, 229, 234) 0 0 0 1.5px inset; display: flex; flex-direction: column; cursor: pointer; outline: none; }
.pk-pt__m { display: block; font-size: 13.5px; line-height: 1.25; color: rgb(110, 110, 115); }
.pk-pt__m i { display: block; font-style: normal; font-size: 30px; font-weight: 600; letter-spacing: -1px; color: rgb(17, 17, 17); line-height: 1; margin-bottom: 3px; }
.pk-pt__m em { font-style: normal; }
.pk-pt__p { margin-top: 12px; font-size: 16px; font-weight: 600; letter-spacing: -0.4px; line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pk-pt__c { margin-top: 3px; font-size: 11px; line-height: 1.3; color: rgb(110, 110, 115); overflow-wrap: anywhere; }
.pk-pt:focus-visible { box-shadow: rgb(255, 197, 220) 0 0 0 2px inset; }
.pk-pt.on { background: rgb(246, 238, 243); box-shadow: rgb(29, 2, 12) 0 0 0 1.5px inset; }
.pk-pts--2 .pk-pt, .pk-pts--1 .pk-pt { padding-left: 14px; padding-right: 14px; }
.pk-pts--2 .pk-pt__c, .pk-pts--1 .pk-pt__c { font-size: 12px; }
/* уже 375 px три плитки не вмещают «дальше 8 500 ₽» — тарифы строками */
@media (max-width: 374px) {
  .pk-pts { grid-template-columns: 1fr; gap: 8px; margin: 0; }
  .pk-pt { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 12px; padding: 12px 14px; }
  .pk-pt__m { display: flex; align-items: baseline; gap: 6px; grid-row: 1 / span 2; }
  .pk-pt__m i { display: inline; font-size: 24px; margin: 0; }
  .pk-pt__p { margin: 0; text-align: right; }
  .pk-pt__c { margin: 1px 0 0; grid-column: 2; text-align: right; font-size: 12px; }
}

/* «Подписка»: автоплатёж под клубной картой */
.pk-ap { display: flex; align-items: center; gap: 14px; margin-top: 12px; padding: 14px 14px 14px 16px; min-height: 64px; box-sizing: border-box; background: rgb(255, 255, 255); border-radius: 22px; }
.pk-ap[data-xa] { cursor: pointer; }
.pk-ap__b { flex: 1 1 auto; min-width: 0; }
.pk-ap__b b { display: block; font-size: 16px; font-weight: 600; letter-spacing: -0.3px; line-height: 1.3; font-variant-numeric: tabular-nums; }
.pk-ap__b small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.35; color: rgb(110, 110, 115); }
.pk-ap .chev { flex: 0 0 auto; margin: 0 -2px 0 0; }
.pk-note { text-align: left; padding: 10px 6px 0; font-size: 13px; line-height: 1.45; color: rgb(110, 110, 115); }
.pk-x { display: flex; align-items: flex-start; gap: 12px; margin-top: 12px; padding: 14px 16px; background: rgb(255, 255, 255); border-radius: 22px; font-size: 14px; line-height: 1.4; color: rgb(110, 110, 115); }
.pk-x .xs-ic, .pk-x .xs-ic svg { width: 20px; height: 20px; flex: 0 0 auto; color: rgb(17, 17, 17); }
.pk-x b { color: rgb(17, 17, 17); font-weight: 600; }

/* «Подписка»: плитки действий */
.pk-g4 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
.pk-t4 { position: relative; min-width: 0; min-height: 96px; box-sizing: border-box; background: rgb(255, 255, 255); border-radius: 22px; padding: 14px 16px; display: flex; flex-direction: column; cursor: pointer; }
.pk-t4__top { display: flex; justify-content: space-between; align-items: center; }
.pk-t4__top svg { width: 21px; height: 21px; }
.pk-t4__top em { font-style: normal; font-size: 15px; font-weight: 500; }
.pk-t4 b { margin-top: auto; padding-top: 10px; font-size: 15.5px; font-weight: 600; letter-spacing: -0.3px; line-height: 1.25; }
.pk-t4 small { margin-top: 2px; font-size: 12.5px; line-height: 1.35; color: rgb(110, 110, 115); }
.pk-foot { text-align: center; padding: 16px 0 4px; }
.pk-foot .pk-tz { margin-top: 0; }
.pk-foot button { display: block; margin-left: auto; margin-right: auto; border: 0; background: none; min-height: 40px; margin-top: 4px; padding: 0 8px; font-family: inherit; font-size: 14px; font-weight: 500; color: rgb(72, 72, 74); cursor: pointer; }

.pk-go { margin-top: 14px; }
.pk-go.is-off { background: rgb(229, 229, 234); color: rgb(99, 99, 102); cursor: default; box-shadow: none; }
.pk-go.is-off:active { transform: none; }

/* итог оплаты: «пластик» у способа оплаты */
.gl-fact b > span { color: rgb(17, 17, 17); }
.gl-fact b > .pk-pl { display: inline-block; vertical-align: middle; margin: -4px 10px -4px 0; }
.gl .pk-mc { margin: 0; }
/* юридическая строка «Продлить» под поручением */
.pk-legal { text-align: center; padding-left: 8px; padding-right: 8px; }
@media (max-width: 359px) {
  .pk-man__r { grid-template-columns: 74px minmax(0, 1fr); gap: 8px; padding: 7px 14px; font-size: 14px; }
  .pk-man__h { padding-left: 14px; padding-right: 14px; }
}
/* нечётная последняя плитка — во всю ширину строкой */
.pk-t4:last-child:nth-child(odd) { grid-column: 1 / -1; min-height: 64px; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-content: center; }
.pk-t4:last-child:nth-child(odd) .pk-t4__top { grid-row: 1 / span 2; align-self: center; }
.pk-t4:last-child:nth-child(odd) b { margin: 0; padding: 0; }

/* ================= Долг, смена карты, «Оплата не прошла» — вариант B «Карта» =================
 * Сумма долга — в клубной карте; способ — переключателем; под ним ОДНА карточка (.pv-pay):
 * секции с тонкими чертами на всю ширину — что будет с картой, условия автоплатежа, согласие.
 * Без цветных полос, без цветных рамок вокруг карточки: края ровные, внутри — только черты. */
.pv-debt .pk-go { margin-top: 16px; }
.pv-dl { margin-top: 12px; padding: 0 6px; font-size: 13.5px; line-height: 1.45; color: rgb(72, 72, 74); text-wrap: balance; }
.pv-seg { display: flex; gap: 4px; padding: 4px; border-radius: 16px; background: rgb(233, 233, 237); margin-top: 14px; }
.xs-sheet .pv-seg { background: rgb(241, 241, 243); margin-top: 18px; }
.pv-seg__b { flex: 1 1 0; height: 40px; border: 0; border-radius: 12px; background: none; font-family: inherit; font-size: 15px; font-weight: 500; color: rgb(72, 72, 74); cursor: pointer; white-space: nowrap; }
.pv-seg__b.on { background: rgb(255, 255, 255); color: rgb(17, 17, 17); font-weight: 600; box-shadow: rgba(0, 0, 0, 0.08) 0 1px 3px, rgba(0, 0, 0, 0.04) 0 0 0 0.5px; }
.pv-seg__b:focus-visible { outline: 2px solid rgb(255, 197, 220); outline-offset: -2px; }
/* одна карточка: секции, черты на всю ширину */
.pv-pay { margin-top: 10px; background: rgb(255, 255, 255); border-radius: 22px; overflow: hidden; }
.xs-sheet .pv-pay { margin-top: 12px; box-shadow: rgb(229, 229, 234) 0 0 0 1px inset; }
.pv-sec { padding: 14px 16px; }
.pv-sec + .pv-sec { border-top: 1px solid rgb(236, 236, 239); }
.pv-pv { display: flex; align-items: center; gap: 14px; }
.pv-pv__b { min-width: 0; }
.pv-pv__b b { display: block; font-size: 16px; font-weight: 600; letter-spacing: -0.3px; line-height: 1.25; }
.pv-pv__b small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.35; color: rgb(110, 110, 115); }
.pv-h { margin-bottom: 6px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.1px; color: rgb(110, 110, 115); }
.pv-l { font-size: 13.5px; line-height: 1.4; color: rgb(110, 110, 115); }
.pv-l--main { margin-bottom: 2px; font-size: 15px; color: rgb(17, 17, 17); }
.pv-l b { font-weight: 600; font-variant-numeric: tabular-nums; }
.pv-o { margin-top: 6px; font-size: 13.5px; line-height: 1.4; }
.pv-o .pk-lnk { font-weight: 500; }
/* крупная сумма, сноски, ссылки */
.pv-hero { margin-top: 4px; }
.pv-hero b { display: block; font-size: 44px; font-weight: 600; letter-spacing: -1.6px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.pv-hero span { display: block; margin-top: 6px; font-size: 14px; line-height: 1.4; color: rgb(110, 110, 115); text-wrap: balance; }
.pv-hero em { display: block; margin-top: 2px; font-style: normal; font-size: 14px; font-weight: 600; color: rgb(17, 17, 17); }
.pv-hero i { font-style: normal; }
.pv-hero--c { margin: 14px 0 16px; text-align: center; }
.pv-nw { display: block; white-space: nowrap; }
.pv-hero .pv-sep { display: none; }
.pv-fn { margin-top: 12px; padding: 0 4px; font-size: 13px; line-height: 1.45; color: rgb(110, 110, 115); text-wrap: balance; }
.pv-fn:empty { display: none; }
.pv-fn--c { text-align: center; }
.pv-links { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 8px; }
.pv-links button { border: 0; background: none; min-height: 44px; padding: 0 4px; font-family: inherit; font-size: 14.5px; font-weight: 600; color: rgb(17, 17, 17); cursor: pointer; white-space: nowrap; }
.pv-links i { width: 3px; height: 3px; border-radius: 50%; background: rgb(199, 199, 204); }
/* стопка карт в листе смены карты */
.pv-stack { position: relative; height: 104px; margin: 2px auto 0; width: 220px; }
.pv-stack__old { position: absolute; left: 6px; top: 12px; transform: rotate(-7deg); opacity: 0.55; }
.pv-stack__new { position: absolute; right: 6px; top: 6px; transform: rotate(4deg); background: rgb(255, 255, 255); border-radius: 14px; box-shadow: rgba(0, 0, 0, 0.08) 0 8px 22px; }
.pv-stack--one { width: 132px; }
.pv-stack--one .pv-stack__old { left: 0; transform: none; opacity: 1; }
.pv-sheet .xs-sheet__b { padding-top: 10px; padding-bottom: 16px; }

/* ---------- согласие: строка-галочка под чертой внутри карточки (решение владельца) ---------- */
.pv-cons.pk-cons { display: flex; align-items: center; gap: 12px; min-height: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; cursor: pointer; outline: none; }
.pv-cons.pk-cons.on, .pv-cons.pk-cons.err { background: none; box-shadow: none; }
.pv-cons .pk-cons__t { flex: 1 1 auto; min-width: 0; font-size: 15px; font-weight: 500; letter-spacing: -0.2px; line-height: 1.3; text-wrap: balance; }
.pv-cons .pk-cons__cb { width: 24px; height: 24px; margin: 0; border-radius: 7px; transition: background 0.15s, box-shadow 0.15s; }
.pv-cons.pk-cons.on .pk-cons__cb { background: rgb(29, 2, 12); box-shadow: none; }
.pv-cons.pk-cons.on .pk-cons__cb svg { opacity: 1; }
/* ошибка: тёмная граница галочки + строка со значком, без красного */
.pv-cons.pk-cons.err .pk-cons__cb { box-shadow: rgb(17, 17, 17) 0 0 0 2px inset; }
@keyframes pk-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
.pv-sec--cons { padding-top: 14px; padding-bottom: 14px; }
.pv-cons.pk-cons:focus-visible .pk-cons__cb { box-shadow: rgb(255, 197, 220) 0 0 0 3px; }
.pv-cons + .pk-cons__e { display: flex; align-items: center; gap: 6px; margin: 8px 0 0 36px; font-size: 13.5px; font-weight: 500; color: rgb(58, 58, 60); }
.pv-cons + .pk-cons__e svg { width: 15px; height: 15px; color: rgb(58, 58, 60); }
.pk-shake .pk-cons__cb { animation: pk-shake 0.4s ease; }
@media (prefers-reduced-motion: reduce) { .pk-shake .pk-cons__cb { animation: none; } }

@media (max-width: 359px) {
  .pv-hero b { font-size: 36px; }
  .pv-seg__b { font-size: 14px; }
  .pv-sec { padding: 12px 14px; }
  .pv-links { gap: 8px; }
  .pv-links button { font-size: 13.5px; }
  .pv-cons .pk-cons__t { font-size: 14.5px; }
}
/* в ошибке фокус (на галочку его переводит тап по кнопке) — та же тёмная граница, не розовое кольцо */
.pv-cons.pk-cons.err:focus-visible .pk-cons__cb { box-shadow: rgb(17, 17, 17) 0 0 0 2px inset; }

/* ---- src/styles/51-reviews.css ---- */
/* «Разборы» — журнал разборов (макет design reviews/A-journal + сетка «месяц по дням» из B).
 * Классы rj-* — свои, чтобы не задеть дневник. Розовый — только точки знака «re:»
 * (#FFC5DC из логотипа) и фокус поля вопроса. Ярлык-капсула (rv__lbl) оставлен
 * решением владельца. */

/* ---------- знак системы «re:» ---------- */
.rem { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: #101014; color: #fff !important; flex: 0 0 auto; }
.rem svg { width: 21px; height: auto; display: block; margin-left: 1px; }
.rem--s { width: 24px; height: 24px; border-radius: 7px; }
.rem--s svg { width: 17px; }
.rem--l { width: 40px; height: 40px; border-radius: 12px; }
.rem--l svg { width: 28px; }
.gd-cl .rem { flex: 0 0 24px; width: 24px; min-width: 24px; margin: -1px 0; }
.gd-cw__row { align-items: center; }
.rj-rowmark { background: none !important; }

/* ---------- общее ---------- */
.rj-card { background: #fff; border-radius: 26px; }
.rj-ic { display: inline-grid; place-items: center; flex: 0 0 auto; }
.rj-ic svg { width: 100%; height: 100%; }
.rj-k { font-size: 13px; color: var(--mut); letter-spacing: -.05px; font-weight: 400; }
.rj-new { width: 8px; height: 8px; border-radius: 50%; background: var(--ink); flex: 0 0 auto; }
.rj-lbl--s { height: 22px; font-size: 11.5px; padding: 0 8px 0 7px; gap: 4px; margin-top: 0; }
.rj-lbl--s svg { width: 11px; height: 11px; }
.rj-scr .nav__t { text-align: center; flex: 1; min-width: 0; }
.rj-scr .nav__t b { display: block; font-size: 17px; font-weight: 600; letter-spacing: -.4px; }
.rj-scr .nav__t small { display: block; font-size: 12px; color: var(--mut); margin-top: 1px; font-weight: 400; letter-spacing: 0; }
.rj-body { padding: 4px 16px 32px; display: flex; flex-direction: column; gap: 12px; }
.rj-stack { display: flex; flex-direction: column; gap: 12px; }

/* ---------- карточка на дне ---------- */
.rj-rc { padding: 18px 18px 0; overflow: hidden; }
.rj-rc__h { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.rj-rc__h > div { flex: 1; min-width: 0; }
.rj-rc__h b { display: block; font-size: 16px; font-weight: 600; letter-spacing: -.3px; }
.rj-rc__h small { display: block; font-size: 12.5px; color: var(--mut); margin-top: 1px; }
.rj-rc__h .rj-new { align-self: flex-start; margin-top: 6px; }
.rj-rc__l { margin-top: 14px; }
.rj-rc__p { font-size: 17px; line-height: 1.4; letter-spacing: -.25px; margin-top: 10px; }
.rj-rc__n { font-size: 15px; line-height: 1.42; letter-spacing: -.15px; color: #3a3a3c; margin-top: 6px; }
/* итог дня метками в карточке разбора (и в «Итог сегодня» дневника, когда разбора нет) */
.rj-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.rj-tag { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px 0 8px; border-radius: 9px; background: #f4f4f6; font-size: 12.5px; font-weight: 500; letter-spacing: -.1px; color: #3a3a3c; white-space: nowrap; }
.rj-tag svg { width: 13px; height: 13px; flex: 0 0 auto; }
.rj-tag--ok svg { color: var(--ok); }
.rj-tag--warn svg { color: var(--warn); }
.dy-verdict .rj-tags { margin-top: 8px; }
.rj-tags--lead { margin-top: 14px; align-items: center; }
.rj-tags--lead .rv__lbl { margin-top: 0; height: 26px; }
.rj-step { display: flex; gap: 12px; margin-top: 14px; padding: 13px 14px; border-radius: 18px; background: #f6f6f8; }
.rj-step .rj-ic { width: 22px; height: 22px; color: var(--ink); margin-top: 1px; }
.rj-step b { display: block; font-size: 12.5px; font-weight: 600; color: var(--mut); letter-spacing: .1px; }
.rj-step p { font-size: 15.5px; line-height: 1.35; letter-spacing: -.2px; margin: 2px 0 0; font-weight: 500; }
.rj-step small { display: block; font-size: 13px; color: var(--mut); margin-top: 4px; line-height: 1.35; }
.rj-rc__f { display: flex; margin: 12px -18px 0; border-top: 1px solid rgba(16, 16, 20, .06); }
.rj-rc__f button { flex: 1; height: 50px; border: 0; background: none; font: inherit; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 15px; font-weight: 600; letter-spacing: -.2px; color: var(--ink); cursor: pointer; }
.rj-rc__f button + button { border-left: 1px solid rgba(16, 16, 20, .06); }
.rj-rc__f svg { width: 18px; height: 18px; }
.rj-rc__f .chev { color: #c7c6cc; }

/* ---------- «Последние 7 дней» ---------- */
.rj-wk { padding: 16px 18px 6px; }
.rj-wk__h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.rj-wk__h b { font-size: 17px; font-weight: 600; letter-spacing: -.4px; }
.rj-twin { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 14px; }
.rj-twin .rj-k { margin-bottom: 8px; }
.rj-twin .rj-k b { color: var(--ink); font-weight: 600; }
.rj-fr { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid rgba(16, 16, 20, .06); font-size: 14.5px; line-height: 1.38; letter-spacing: -.15px; }
.rj-twin + .rj-fr, .rj-wk__h + .rj-fr { margin-top: 14px; }
.rj-fr .rj-ic { width: 20px; height: 20px; color: var(--mut2); margin-top: 1px; }
.rj-fr em { font-style: normal; color: var(--mut); display: block; font-size: 12.5px; margin-bottom: 1px; }

/* столбики к норме: пунктир — норма, «нет данных» — короткая серая полоска */
.rj-spark { display: flex; align-items: flex-end; gap: 5px; height: 46px; position: relative; margin-top: 12px; }
.rj-twin .rj-spark { margin-top: 0; }
.rj-spark::after { content: ""; position: absolute; left: 0; right: 0; bottom: var(--norm); border-top: 1px dashed #a3a2aa; }
.rj-spark i { flex: 1; border-radius: 4px 4px 2px 2px; background: #e6e5ea; position: relative; }
.rj-spark i.on { background: var(--c); }
.rj-spark i.no { height: 3px !important; border-radius: 2px; }
.rj-sparkx { display: flex; gap: 5px; margin-top: 5px; }
.rj-sparkx span { flex: 1; text-align: center; font-size: 10.5px; color: var(--mut); }
.rj-sparkx span.t { color: var(--ink); font-weight: 600; }

/* ---------- месяц по дням ---------- */
.rj-hm { padding: 14px 16px 14px; }
.rj-hm__h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rj-hm__h b { font-size: 17px; font-weight: 600; letter-spacing: -.4px; flex: 1; text-align: center; }
.rj-hm__nav { width: 36px; height: 36px; border-radius: 50%; border: 0; background: #f1f1f3; color: var(--ink); display: grid; place-items: center; cursor: pointer; flex: 0 0 auto; }
.rj-hm__nav svg { width: 16px; height: 16px; }
.rj-hm__nav--r svg { transform: scaleX(-1); }
.rj-hm__nav--off { visibility: hidden; }
.rj-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 12px; }
.rj-grid .dw { font-size: 11px; color: var(--mut); text-align: center; padding-bottom: 2px; }
.rj-grid i { height: 34px; border-radius: 10px; display: grid; place-items: center; font-style: normal; font-size: 12.5px; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.rj-grid i[data-xa] { cursor: pointer; }
.rj-grid i.e { background: #c5e58f; }
.rj-grid i.g { background: var(--ok-bg); }
.rj-grid i.w { background: var(--warn-bg); }
.rj-grid i.l { background: #f1f1f3; }
.rj-grid i.n { box-shadow: inset 0 0 0 1px #e6e5ea; color: var(--mut); }
.rj-grid i.f { color: #c7c7cc; }
.rj-grid i.x { visibility: hidden; }
.rj-grid i.t { box-shadow: inset 0 0 0 1.5px var(--ink); }
.rj-leg { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 12px; font-size: 12px; color: var(--mut); }
.rj-leg span { display: inline-flex; align-items: center; gap: 5px; }
.rj-leg span::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--c); box-shadow: var(--s, none); }
.rj-note { font-size: 12px; color: var(--mut); margin-top: 8px; line-height: 1.4; }

/* ---------- журнал ---------- */
.rj-seg { display: flex; background: #efeef1; border-radius: 12px; padding: 3px; margin: 6px 0 0; }
.rj-seg button { flex: 1; height: 34px; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 500; color: var(--mut2); border-radius: 10px; cursor: pointer; }
.rj-seg button.on { background: #fff; color: var(--ink); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.rj-jd { padding: 6px 6px 0; font-size: 13px; color: var(--mut); }
.rj-jd b { color: var(--ink); font-weight: 600; }
.rj-je { padding: 14px 16px 14px 18px; display: flex; gap: 12px; align-items: center; cursor: pointer; }
.rj-je__b { flex: 1; min-width: 0; }
.rj-je__t { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.rj-je__t b { font-size: 15px; font-weight: 600; letter-spacing: -.2px; }
.rj-je__l { margin-top: 6px; display: flex; align-items: center; gap: 7px; }
.rj-je p { font-size: 15px; line-height: 1.38; letter-spacing: -.15px; margin: 8px 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rj-je__m { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12.5px; color: var(--mut); }
.rj-th { display: flex; }
.rj-th i { width: 24px; height: 24px; border-radius: 50%; background: #f1f1f3 center / cover; box-shadow: 0 0 0 2px #fff; }
.rj-th i + i { margin-left: -6px; }
.rj-je--m { align-items: flex-start; }
.rj-je--m > .chev { align-self: center; }
.rj-ml__ph { width: 44px; height: 44px; border-radius: 50%; background: #f1f1f3 center / cover; flex: 0 0 auto; display: grid; place-items: center; color: var(--mut); font-style: normal; }
.rj-ml__ph svg { width: 20px; height: 20px; }
.rj-more { height: 46px; border: 0; border-radius: 100px; background: #f1f1f3; font: inherit; font-size: 15px; font-weight: 600; color: var(--ink); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; }
.rj-tz { font-size: 12px; color: var(--mut); text-align: center; padding-top: 4px; }
.rj-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 28px 20px; }
.rj-empty b { font-size: 16px; font-weight: 600; margin-top: 8px; }
.rj-empty small { font-size: 13.5px; color: var(--mut); line-height: 1.4; }
.rj-retry { margin-top: 14px; height: 50px; }
/* загрузка журнала и разбора — RF.wait (00-core/19-wait.js): форма экрана, мягкий шиммер */
.rj-sk { display: flex; flex-direction: column; gap: 12px; }
.rj-sk__card { display: flex; flex-direction: column; gap: 14px; padding: 18px 18px 20px; }
.rj-sk__row { display: flex; align-items: center; gap: 12px; }
.rj-sk__row .rf-sk--lines { flex: 1 1 0; min-width: 0; }
.rj-sk--one { gap: 16px; padding: 6px 6px 0; }
.rj-sk--one .rj-sk__card { margin: 4px -6px 0; }
.rj-sk__t .rf-sk__l { height: 20px; border-radius: 8px; }
.rj-sk__bars { gap: 14px; }

/* ---------- детальный разбор ---------- */
.rj-dt { padding-bottom: 40px; }
.rj-dt__h { padding: 4px 6px 2px; }
.rj-sig { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--mut); }
.rj-sig b { color: var(--ink); font-weight: 600; }
.rj-dt__l { margin-top: 14px; }
.rj-dt__p { font-size: 21px; line-height: 1.3; letter-spacing: -.5px; font-weight: 600; margin-top: 12px; }
.rj-dt__p--m { font-size: 18px; letter-spacing: -.35px; }
.rj-dt__n { font-size: 15.5px; line-height: 1.42; color: #3a3a3c; margin-top: 8px; letter-spacing: -.15px; }
.rj-mph { height: 220px; border-radius: 26px; background: #f1f1f3 center / cover; }
.rj-sec { padding: 16px 18px; }
.rj-sec__k { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--mut); }
.rj-sec__k .rj-ic { width: 17px; height: 17px; }
.rj-sec__t { font-size: 16.5px; font-weight: 600; letter-spacing: -.35px; margin-top: 6px; line-height: 1.3; }
.rj-sec__s { font-size: 13.5px; color: var(--mut); margin-top: 4px; line-height: 1.4; }
.rj-sec__s--ink { color: var(--ink); font-size: 14.5px; }
.rj-sec--step { background: var(--ink); color: #fff; }
.rj-sec--step .rj-sec__k { color: rgba(255, 255, 255, .6); }
.rj-sec--step .rj-sec__s { color: rgba(255, 255, 255, .62); }
.rj-prev { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 13.5px; color: rgba(255, 255, 255, .8); line-height: 1.38; }
.rj-prev svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 2px; }
.rj-prev--done svg { color: var(--prot); }
.rj-bars { margin-top: 12px; }
.rj-bars .r { display: grid; grid-template-columns: 78px 1fr 88px; align-items: center; gap: 10px; height: 27px; font-size: 14px; }
.rj-bars .r em { font-style: normal; text-align: right; color: var(--mut2); font-variant-numeric: tabular-nums; font-size: 13px; }
.rj-bars .r em b { color: var(--ink); font-weight: 600; }
.rj-bars .t { position: relative; height: 8px; border-radius: 8px; background: #f1f1f3; }
.rj-bars .t i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 8px; }
.rj-bars .t::after { content: ""; position: absolute; left: 66.6%; top: -5px; bottom: -5px; border-left: 1px dashed #a3a2aa; }
.rj-gl { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.rj-gl__t { flex: 1; height: 6px; border-radius: 6px; background: #f1f1f3; position: relative; }
.rj-gl__t i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; background: var(--ink); }
.rj-gl span { font-size: 12.5px; color: var(--mut); }
.rj-why { font-size: 14.5px; line-height: 1.4; margin-top: 8px; }
.rj-why em { display: block; font-style: normal; font-size: 12.5px; color: var(--mut); margin-bottom: 1px; }
.rj-lnk { display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; border: 0; background: none; padding: 0; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; }
.rj-sec--meals .rj-ml, .rj-ml { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.rj-ml + .rj-ml { border-top: 1px solid rgba(16, 16, 20, .06); }
.rj-ml[data-xa] { cursor: pointer; }
.rj-ml > div { flex: 1; min-width: 0; }
.rj-ml b { display: block; font-size: 15px; font-weight: 600; letter-spacing: -.2px; }
.rj-ml small { display: block; font-size: 12.5px; color: var(--mut); margin-top: 1px; }
.rj-all { height: 50px; border: 0; background: none; font: inherit; font-size: 15px; font-weight: 600; color: var(--ink); display: flex; align-items: center; justify-content: center; gap: 4px; cursor: pointer; }
/* «Спросить про этот разбор» — разбор дня и разбор приёма (один renderDetail). 19.10.2026, владелец:
 * кнопка висела над нижним меню и «ехала по странице в воздухе». Экран вложенный (со «назад»), а у
 * крупной нижней кнопки меню нет — общий механизм .rf-cta (00-core/16-cta.js, селектор .rj-sticky в
 * PANE_STICK): меню уезжает, запас прокрутки под него снимается, кнопка прилипает к низу над
 * «домашней полоской». Подложка — фон вложенного экрана (var(--bg) у .rf-sub), без прозрачного градиента
 * поверх текста. margin-top: auto — на коротком разборе (приём без «Почему так») кнопка стоит у низа
 * экрана, а не сразу под текстом посреди страницы: .xs-root экрана — колонка во всю высоту. */
.rj-sticky { position: sticky; bottom: 0; margin-top: -96px; padding: 26px 16px 24px; background: linear-gradient(rgba(255, 255, 255, 0), var(--rf-tab, #fff) 34%); z-index: 5; }
/* только экран разбора (.rj-scr): «Варианты» замены (.ma-dock, diary-analysis.js) держат прежнее правило выше */
.rj-scr .rj-sticky { margin-top: auto; padding: 12px 16px max(16px, calc(var(--rf-safe-bottom, 0px) + 8px)); background: var(--bg, #fff); box-shadow: 0 -1px 0 rgba(16, 16, 20, .06); }
.rj-askbtn { display: flex; align-items: center; justify-content: center; gap: 8px; height: 54px; }
.rj-askbtn svg { width: 19px; height: 19px; }

/* ---------- шторка «Вопрос по разбору» (кит-лист .xs-sheet + rj-asksh) ---------- */
.rj-asksh .xs-sheet__b { display: flex; flex-direction: column; min-height: 52vh; }
.rj-ctx { margin: 2px 4px 0; padding: 2px 0 2px 12px; border-left: 3px solid #e6e5ea; font-size: 13px; color: var(--mut); line-height: 1.4; }
.rj-ctx b { color: var(--ink); font-weight: 600; }
.rj-feed { flex: 1; padding: 14px 0 0; display: flex; flex-direction: column; gap: 10px; }
.rj-sys { display: flex; gap: 8px; align-items: flex-end; }
.rj-bub { max-width: 86%; padding: 10px 13px 9px; border-radius: 22px 22px 22px 8px; background: #f2f2f4; color: #111; font-size: 15px; line-height: 1.4; letter-spacing: -.15px; white-space: pre-line; }
.rj-bub small { display: block; font-size: 11.5px; color: var(--mut); margin-top: 5px; }
.rj-bub--me { margin-left: auto; border-radius: 22px 22px 8px 22px; background: #1c1c1e; color: #fff; }
.rj-bub--me small { color: rgba(255, 255, 255, .55); text-align: right; }
.rj-bub--wait { color: var(--mut); display: flex; align-items: center; gap: 8px; }
.rj-src { font-size: 11.5px; color: var(--mut); margin: -4px 0 0 32px; }
.rj-askerr { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; color: var(--warn); line-height: 1.4; }
.rj-askerr svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 1px; }
.rj-sug { margin-top: 4px; }
.rj-sug .rj-k { padding: 0 2px 6px; }
.rj-sug button { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 2px; border: 0; border-top: 1px solid rgba(16, 16, 20, .06); background: none; font: inherit; font-size: 15px; letter-spacing: -.15px; color: var(--ink); text-align: left; cursor: pointer; }
.rj-sug button span { flex: 1; }
.rj-sug button svg { flex: 0 0 16px; width: 16px; height: 16px; color: var(--mut); }
.rj-askf { padding: 12px 0 6px; }
.rj-comp { display: flex; align-items: center; gap: 8px; height: 48px; border-radius: 24px; background: #f2f2f4; padding: 0 5px 0 16px; }
.rj-comp:focus-within { background: #fff; box-shadow: 0 0 0 2px #ffc5dc, 0 6px 18px rgba(20, 16, 26, .06); }
.rj-comp input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 16px; color: var(--ink); outline: none; }
.rj-comp button { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--ink); color: #fff; display: grid; place-items: center; cursor: pointer; flex: 0 0 auto; }
.rj-comp button[disabled] { background: #e4e4e8; cursor: default; }
.rj-comp button svg { width: 18px; height: 18px; }
.rj-left { font-size: 12px; color: var(--mut); padding: 8px 6px 0; }
.rj-safe { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; color: var(--mut); line-height: 1.4; padding: 8px 6px 0; }
.rj-safe svg { width: 14px; height: 14px; flex: 0 0 auto; margin-top: 1px; }
.rj-safe button { border: 0; background: none; padding: 0; font: inherit; color: var(--ink); font-weight: 600; white-space: nowrap; cursor: pointer; }

/* ---- src/styles/52-chat.css ---- */
/* Чат с тренером — вариант A «Пузыри» (макет /opus-alt/chat/v1, утверждён владельцем 03.10.2026).
 * Значения — из a.css/core.css макета, классы с префиксом cb- (общие имена макета .b/.g/.tx в
 * одном бандле легли бы на чужие экраны). Белый экран: пузырям нужен контраст — серые входящие,
 * графитовые мои; шапка и низ того же белого с матовым размытием. Розовый — только фокус: курсор,
 * непрослушанное, совпадения поиска, подсветка найденного.
 * Анимации — WAAPI в chat.js (transform/opacity; исключения: высота капсулы поля при росте,
 * grid-rows расшифровки, clip-path волны голосового и кадра при перелёте — маленькие элементы). */
.rf-scr.cb-scr { padding: 0; overflow: hidden; background: #fff; }
.rf-app.in-chat .rf-topfade { display: none; }

.cb {
  --page: #ffffff; --page-rgb: 255, 255, 255; --ink: #141418; --ink2: #55555b; --meta: #69696f;
  --in: #f1f1f4; --soft: #f1f1f4; --float: #ffffff; --hair: rgba(20, 20, 24, .1);
  --pink: #e0518f; --red: #e5484d; --red-tx: #c62a31; --green: #2fb35a; --bar: rgba(255, 255, 255, .97);
  --ease: cubic-bezier(.32,.72,0,1); --spring: cubic-bezier(.34,1.36,.5,1);
  --hd-h: calc(var(--rf-safe-top) + 52px); --bot-pad: max(8px, var(--rf-safe-bottom));
  position: absolute; left: 0; right: 0; top: 0; height: 100%;
  overflow: hidden; background: var(--page); color: var(--ink); container-type: inline-size;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.cb button { font-family: inherit; -webkit-tap-highlight-color: transparent; }
/* Клавиатура и высота нижней панели меняют ТОЛЬКО свойства конкретных узлов (bottom у панели
   и слоёв, padding-bottom ленты — их ставит chat.js, applyInsets): наследуемая custom property
   на .cb/#rf-app перезапускала стили всей ленты (13 000+ узлов, сотни мс на слабом телефоне).
   Высота окна чата при клавиатуре НЕ меняется: лента не обрезается снизу посреди движения. */
.cb.kb-on .cb-bot { padding-bottom: 8px; }
.cb.kb-on .cb-sl-in { bottom: 64px; }

/* ---------- лента ---------- */
.cb-feed { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; overflow-anchor: none; scrollbar-width: none;
  padding: calc(var(--hd-h) + 4px) 0 calc(var(--bot-h, 64px) + 8px); touch-action: pan-y; }
.cb-feed::-webkit-scrollbar { display: none; }
/* Свой слой у содержимого ленты постоянно: сдвиги при отправке/ответе (transform) идут на
   композиторе без пересоздания слоя и перерисовки всех сообщений. */
.cb-in { min-height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 8px; will-change: transform; }
.cb.is-empty .cb-in { justify-content: safe center; }
.cb-end { height: 2px; flex: 0 0 auto; }
/* Длинная лента: блок вне экрана не раскладывается и не рисуется. Его размер — замеренный,
   пока блок был нарисован (chat.js: cvMark), поэтому скрытый блок занимает ровно своё место
   и лента не прыгает даже без scroll anchoring (в Safari его нет). */
.cb-in > .cv { content-visibility: auto; }
/* начало переписки: карточка тренера по центру свободного места над короткой перепиской */
.cb-intro { flex: 1 0 auto; display: flex; align-items: center; justify-content: center; padding: 18px 24px 10px; min-height: 0; }
.cb-intro-c { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0; max-width: 300px; padding: 18px 20px 16px; border: 0; border-radius: 26px; background: var(--soft); color: var(--ink); font: inherit; cursor: pointer; }
.cb-intro-av { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; display: block; margin-bottom: 12px; }
.cb-intro-av.cb-mono { font-size: 26px; background: #e4e4e9; }
.cb-intro-c b { font-size: 18px; font-weight: 650; letter-spacing: -0.4px; line-height: 23px; }
.cb-intro-c small { margin-top: 3px; font-size: 14px; line-height: 19px; color: var(--meta); text-wrap: balance; }
.cb-intro-sla { display: block; margin-top: 10px; font-size: 13.5px; line-height: 18px; color: var(--ink2); text-wrap: balance; }
.cb-intro-sla svg { display: inline-block; width: 15px; height: 15px; margin-right: 5px; vertical-align: -3px; }
.cb-older { display: flex; align-items: center; justify-content: center; gap: 10px; height: 44px; font-size: 14px; color: var(--meta); }
.cb-older-gap { height: 44px; }   /* место под «Загружаем предыдущие…»: появление спиннера не сдвигает ленту */
.cb-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: cbSpin .8s linear infinite; opacity: .7; }
.cb-spin.sm { width: 12px; height: 12px; border-width: 1.6px; display: inline-block; vertical-align: -1px; margin-right: 6px; }
@keyframes cbSpin { to { transform: rotate(360deg); } }
.cb mark { background: rgba(224, 81, 143, .22); color: inherit; border-radius: 3px; padding: 0 1px; }
.cb-b-me mark { background: rgba(224, 81, 143, .55); color: #fff; }

/* шапка: ‹ — имя и статус — аватар (тап — профиль и поиск) */
.cb-hd { position: absolute; top: 0; left: 0; right: 0; z-index: 20; padding-top: var(--rf-safe-top); height: var(--hd-h); background: var(--bar); -webkit-backdrop-filter: blur(22px) saturate(1.8); backdrop-filter: blur(22px) saturate(1.8); }
.cb-hd::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; background: linear-gradient(rgba(var(--page-rgb), .9), rgba(var(--page-rgb), 0)); pointer-events: none; }
.cb-hd-in { position: relative; height: 52px; display: flex; align-items: center; padding: 0 12px; }
.cb-hb { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--soft); color: var(--ink); display: grid; place-items: center; cursor: pointer; flex: 0 0 auto; z-index: 1; padding: 0; }
.cb-hb svg { width: 22px; height: 22px; margin-left: -1px; }
.cb-who { position: absolute; left: 76px; right: 76px; top: 0; bottom: 0; border: 0; background: none; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--ink); cursor: pointer; }
.cb-who b { font-size: 17px; font-weight: 600; letter-spacing: -0.4px; line-height: 21px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-who small { font-size: 13px; line-height: 17px; color: var(--meta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.cb-hav { margin-left: auto; width: 44px; height: 44px; padding: 2px; border: 0; background: none; position: relative; cursor: pointer; z-index: 1; }
.cb-hav img, .cb-hav .cb-mono { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; display: block; }
.cb-hav .cb-mono { font-size: 16px; }
.cb-hav .cb-dot { position: absolute; right: 2px; bottom: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 2.5px var(--page); }
.cb-tdots { display: inline-flex; gap: 3px; margin-left: 3px; vertical-align: middle; }
.cb-tdots i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; animation: cbTd 1.2s infinite ease-in-out; }
.cb-tdots i:nth-child(2) { animation-delay: .16s; } .cb-tdots i:nth-child(3) { animation-delay: .32s; }
@keyframes cbTd { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-2px); } }
.cb-hd-s { gap: 10px; padding: 0 8px 0 12px; }
.cb-sq { flex: 1; min-width: 0; height: 40px; border-radius: 20px; background: var(--soft); display: flex; align-items: center; gap: 8px; padding: 0 12px; color: var(--meta); }
.cb-sq svg { width: 18px; height: 18px; flex: 0 0 auto; }
.cb-sq input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font: inherit; font-size: 16.5px; color: var(--ink); caret-color: var(--pink); -webkit-user-select: text; user-select: text; }
.cb-sq input::-webkit-search-cancel-button { display: none; }
.cb-hd-txt { flex: 0 0 auto; border: 0; background: none; font-size: 16.5px; font-weight: 500; color: var(--ink); padding: 0 6px; height: 44px; cursor: pointer; }

/* меню у аватара */
.cb-wm-bg { position: absolute; inset: 0; }
.cb-wm { position: absolute; right: 12px; top: calc(var(--hd-h) - 2px); width: 236px; border-radius: 16px; background: var(--float); overflow: hidden; transform-origin: 90% 0; box-shadow: 0 10px 40px rgba(20, 20, 24, .16); }
.cb-wm button { width: 100%; height: 48px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; border: 0; background: none; font-size: 16px; color: var(--ink); cursor: pointer; }
.cb-wm button + button { box-shadow: inset 0 .5px 0 var(--hair); }
.cb-wm svg { width: 20px; height: 20px; }

/* дни, плавающая дата, «Непрочитанные» */
.cb-day { display: flex; justify-content: center; margin: 20px 0 10px; }
.cb-day span { font-size: 13px; font-weight: 600; color: var(--meta); letter-spacing: -0.05px; }
/* Соседство блоков ленты — классами из chat.js, не комбинаторами «+»/«~»: такой комбинатор
   помечает .cb-in, и любая вставка не в конец (догрузка истории, смена статуса) перезапускает
   стили всей ленты по общему «universal sibling» набору приложения (div + div и т.п.). */
.cb-day.cb-day-top { margin-top: 6px; }
.cb-fdate { position: absolute; left: 50%; top: calc(var(--hd-h) + 8px); z-index: 19; transform: translate(-50%, -6px); padding: 5px 12px; border-radius: 14px; background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(16px) saturate(1.6); backdrop-filter: blur(16px) saturate(1.6); font-size: 13px; font-weight: 600; color: var(--ink2); opacity: 0; pointer-events: none; transition: opacity .2s, transform .35s var(--ease); white-space: nowrap; }
.cb-fdate.is-on { opacity: 1; transform: translate(-50%, 0); }
.cb-unr { display: flex; align-items: center; gap: 12px; margin: 14px 6px 6px; font-size: 13px; font-weight: 600; color: var(--ink2); }
.cb-unr::before, .cb-unr::after { content: ""; flex: 1; height: 1px; background: rgba(224, 81, 143, .3); }

/* группы и пузыри */
/* Группа шире своего содержимого на 8 px по бокам и 2 px сверху (поля ленты и отступ — те же):
   у блока ленты content-visibility, он обрезает всё за своей рамкой — хвост пузыря (−5 px)
   и реакция (−12 px над пузырём) должны помещаться внутри. */
.cb-g { display: flex; align-items: flex-end; gap: 6px; margin: 8px -8px 0; padding: 2px 8px 0; }
.cb-g.gjp { margin-top: 0; }
.cb-g.cb-g-ad { margin-top: -2px; }
.cb-g-me { justify-content: flex-end; padding-left: 60px; }
.cb-g-co { padding-right: 38px; }
.cb-g-av { width: 32px; flex: 0 0 32px; align-self: flex-end; min-height: 1px; }
.cb-g-av img, .cb-mono { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; display: block; }
.cb-mono { display: grid; place-items: center; background: #e4e4e9; color: #4a4a50; font-size: 14px; font-weight: 600; font-style: normal; }
.cb-mono-ic svg { width: 58%; height: 58%; }
.cb-g-col { display: flex; flex-direction: column; gap: 2px; min-width: 0; align-items: flex-start; }
.cb-g-me .cb-g-col { align-items: flex-end; }
.cb-g-nm { font-size: 13px; font-weight: 600; color: var(--meta); margin: 0 0 3px 12px; }
.cb-g.past .cb-b { background: #f4f4f6; color: #3a3a40; }

.cb-b { position: relative; max-width: 100%; padding: 7px 12px 8px; border-radius: 18px; background: var(--in); color: var(--ink); font-size: 16.5px; line-height: 22px; letter-spacing: -0.2px; overflow-wrap: anywhere; transition: transform .25s var(--ease); touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.cb-b-me { background: var(--ink); color: #fff; }
.cb-g-co .cb-b.jp { border-top-left-radius: 6px; } .cb-g-co .cb-b.jn { border-bottom-left-radius: 6px; } .cb-g-co .cb-b.last { border-bottom-left-radius: 5px; }
.cb-g-me .cb-b.jp { border-top-right-radius: 6px; } .cb-g-me .cb-b.jn { border-bottom-right-radius: 6px; } .cb-g-me .cb-b.last { border-bottom-right-radius: 5px; }
.cb-tail { position: absolute; bottom: 0; width: 11px; height: 18px; color: var(--in); pointer-events: none; }
.cb-g-co .cb-tail { left: -5px; transform: scaleX(-1); }
.cb-g-me .cb-tail { right: -5px; color: var(--ink); }
.cb-g.past .cb-tail { color: #f4f4f6; }
.cb-tx { margin: 0; white-space: normal; }
.cb-tx .ln, .cb-tx .li { display: block; white-space: pre-wrap; }
.cb-tx .li { position: relative; padding-left: 19px; }
.cb-tx .li::before { content: "—"; position: absolute; left: 0; opacity: .5; }
.cb-tx .gap { display: block; height: 9px; }
.cb-sp { display: inline-block; height: 1px; vertical-align: baseline; }
.cb-tm { position: absolute; right: 12px; bottom: 6px; display: inline-flex; align-items: center; gap: 2px; font-size: 13px; line-height: 16px; color: var(--meta); font-variant-numeric: tabular-nums; letter-spacing: -0.2px; white-space: nowrap; }
.cb-b-me .cb-tm { color: rgba(255, 255, 255, .64); }
.cb-tk { display: inline-flex; width: 17px; height: 12px; }
.cb-tk svg { width: 17px; height: 12px; }
.cb-tk-q svg { width: 13px; height: 13px; }
.cb-b.hit::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--pink); opacity: 0; animation: cbHit 1.8s var(--ease); pointer-events: none; }
@keyframes cbHit { 0% { opacity: 0; } 15% { opacity: .22; } 70% { opacity: .14; } 100% { opacity: 0; } }
.cb-b.rp-ready::before { content: ""; position: absolute; left: -42px; top: 50%; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%; background: var(--soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141418' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.6 6.2 4.4 11.1l5.2 4.9'/%3E%3Cpath d='M4.8 11.1h8.6a6.2 6.2 0 0 1 6.2 6.2v.6'/%3E%3C/svg%3E") center / 18px no-repeat; }
.cb .selmode, .cb .selmode * { -webkit-user-select: text !important; user-select: text !important; }
.cb ::selection { background: rgba(224, 81, 143, .28); }

/* цитата */
.cb-q { position: relative; display: block; margin: 1px -4px 5px; padding: 5px 10px 6px 11px; border-radius: 10px; background: rgba(20, 20, 24, .06); box-shadow: inset 2.5px 0 0 var(--ink); cursor: pointer; min-width: 0; }
.cb-q::after { content: ""; position: absolute; inset: -12px 0; }
.cb-b-me .cb-q { background: rgba(255, 255, 255, .12); box-shadow: inset 2.5px 0 0 #fff; }
.cb-q b { display: block; font-size: 14px; font-weight: 600; line-height: 18px; }
.cb-q span { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; line-height: 19px; opacity: .78; }
/* сигнал о боли */
.cb-b-sf .cb-sf { display: flex; align-items: center; gap: 6px; margin: 1px 0 3px; color: #ff9a9e; font-size: 14px; }
.cb-b-sf .cb-sf svg { width: 16px; height: 16px; }
.cb-b-sf .cb-sf b { font-weight: 600; color: #fff; }
/* реакция */
.cb-rx { position: absolute; top: -12px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 16px; line-height: 1; background: var(--ink); box-shadow: 0 0 0 2.5px var(--page); }
.cb-g-co .cb-rx { right: -14px; }
.cb-g-me .cb-rx { left: -14px; background: var(--in); }
.cb-b.cb-b-rx { margin-top: 10px; }
/* альбом: ячейки рассчитаны заранее (размер не прыгает, пока грузятся фото) */
.cb-b-md { padding: 3px; max-width: 100%; }
.cb-b-md .cb-mz { position: relative; border-radius: 15px; overflow: hidden; max-width: 100%; background: #ececf0; }
.cb-mz-t { position: absolute; padding: 0; border: 0; overflow: hidden; background: #e6e6ea; cursor: zoom-in; }
.cb-mz-t img, .cb-mz-t video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cb-mz-t.np { background: #26262b; }
.cb-mz-pl { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: rgba(20, 20, 24, .4); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; display: grid; place-items: center; }
.cb-mz-pl svg { width: 17px; height: 17px; margin-left: 2px; }
.cb-mz-t em { position: absolute; left: 8px; top: 8px; padding: 1px 7px; border-radius: 9px; background: rgba(0, 0, 0, .45); color: #fff; font-style: normal; font-size: 13px; }
.cb-b-md .cb-tx { padding: 5px 9px 3px; }
.cb-tm-ov { right: 9px !important; bottom: 9px !important; padding: 1px 7px; border-radius: 10px; background: rgba(0, 0, 0, .42); color: #fff !important; }
.cb-mz-up { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: rgba(20, 20, 24, .42); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; display: grid; place-items: center; cursor: pointer; }
.cb-mz-up svg:first-child { position: absolute; inset: 3px; width: 40px; height: 40px; transform: rotate(-90deg); }
.cb-mz-up circle { fill: none; stroke: rgba(255, 255, 255, .28); stroke-width: 2.5; }
.cb-mz-up circle.p { stroke: #fff; stroke-dasharray: 107; stroke-linecap: round; transition: stroke-dashoffset .3s linear; }
.cb-mz-up > svg:last-child { width: 16px; height: 16px; }
/* загрузили — ждём сервер: кольцо крутится без доли */
.cb-mz-up.is-spin svg:first-child, .cb-fi-up.is-spin svg:first-child { animation: cbSpinR 1s linear infinite; }
.cb-mz-up.is-spin circle.p, .cb-fi-up.is-spin circle.p { stroke-dashoffset: 72 !important; transition: none; }
@keyframes cbSpinR { from { transform: rotate(-90deg); } to { transform: rotate(270deg); } }
/* голосовое */
.cb-b-vo { width: 278px; max-width: 100%; padding: 9px 10px 9px 9px; }
.cb-vo { display: flex; align-items: flex-start; gap: 10px; }
.cb-vo-p { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--ink); color: #fff; display: grid; place-items: center; flex: 0 0 auto; cursor: pointer; padding: 0; }
.cb-vo-p svg { width: 18px; height: 18px; margin-left: 2px; }
.is-play .cb-vo-p svg { margin-left: 0; }
.cb-b-me .cb-vo-p { background: #fff; color: var(--ink); }
.cb-vo-c { flex: 1; min-width: 0; padding-top: 3px; }
.cb-vo-w { position: relative; height: 24px; }
.cb-vo-b { position: absolute; inset: 0; display: flex; align-items: center; gap: 2px; }
.cb-vo-b i { flex: 1 1 0; min-width: 2px; max-width: 3px; border-radius: 2px; background: currentColor; opacity: .26; }
.cb-vo-f { clip-path: inset(0 100% 0 0); }
.cb-vo-f i { opacity: 1; }
.cb-vo-m { display: flex; align-items: center; gap: 6px; height: 18px; margin-top: 3px; font-size: 13px; color: var(--meta); font-variant-numeric: tabular-nums; }
.cb-b-me .cb-vo-m { color: rgba(255, 255, 255, .64); }
.cb-vo-nl { width: 6px; height: 6px; border-radius: 50%; background: var(--pink); }
.cb-vo-s { position: relative; display: none; height: 20px; padding: 0 6px; border: 0; border-radius: 7px; background: rgba(20, 20, 24, .08); color: var(--ink); font-size: 13px; font-weight: 600; cursor: pointer; }
.cb-vo-s::after { content: ""; position: absolute; inset: -12px -8px; }
.cb-b-me .cb-vo-s { background: rgba(255, 255, 255, .16); color: #fff; }
.is-play .cb-vo-s { display: inline-block; }
.cb-vo-t { position: relative; width: 30px; height: 30px; margin-top: 1px; border: 0; border-radius: 10px; background: rgba(20, 20, 24, .07); color: var(--ink); display: grid; place-items: center; flex: 0 0 auto; cursor: pointer; transition: background .25s, color .25s; padding: 0; }
.cb-vo-t::after { content: ""; position: absolute; inset: -7px; }
.cb-vo-t svg { width: 17px; height: 17px; }
.cb-vo-t.is-on { background: var(--ink); color: #fff; }
.cb-b-me .cb-vo-t { background: rgba(255, 255, 255, .14); color: #fff; }
.cb-vo-tx { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); }
.cb-vo-tx > div { overflow: hidden; min-height: 0; }
.cb-vo-tx.is-on { grid-template-rows: 1fr; }
.cb-vo-tx p { margin: 9px 2px 3px 3px; font-size: 16px; line-height: 21px; }
.cb-b-vo .cb-tm { right: 11px; bottom: 7px; }
.cb-b-vo.txo .cb-tm { position: static; display: flex; justify-content: flex-end; margin-top: 2px; }
/* файл */
.cb-fi { display: flex; align-items: center; gap: 10px; padding: 3px 0 5px; min-width: 220px; max-width: 100%; cursor: pointer; }
.cb-fi-ic { position: relative; width: 42px; height: 48px; display: grid; place-items: center; color: inherit; flex: 0 0 auto; }
.cb-fi-ic svg { width: 42px; height: 48px; stroke-width: 1.3; }
.cb-fi-ic em { position: absolute; bottom: 9px; font-style: normal; font-size: 9px; font-weight: 700; letter-spacing: .04em; }
.cb-fi-up { width: 44px; height: 44px; margin: 2px 0; border-radius: 50%; background: rgba(20, 20, 24, .08); cursor: pointer; }
.cb-b-me .cb-fi-up { background: rgba(255, 255, 255, .14); }
.cb-fi-up svg:first-child { position: absolute; inset: 2px; width: 40px; height: 40px; transform: rotate(-90deg); stroke-width: 0; }
.cb-fi-up circle { fill: none; stroke: currentColor; stroke-opacity: .25; stroke-width: 2.5; }
.cb-fi-up circle.p { stroke-opacity: 1; stroke-dasharray: 107; stroke-linecap: round; transition: stroke-dashoffset .3s linear; }
.cb-fi-up > svg:last-child { width: 16px; height: 16px; stroke-width: 2; }
.cb-fi-b { min-width: 0; }
.cb-fi-b b { display: block; font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-fi-b small { font-size: 13px; color: var(--meta); }
.cb-b-me .cb-fi-b small { color: rgba(255, 255, 255, .64); }
.cb-b-fi .cb-tm { position: static; display: flex; justify-content: flex-end; margin: -4px 0 -2px; }
/* разбор техники: одно видео (кадра-постера в API нет — ровная тёмная плитка) */
.cb-b-ck { width: 268px; max-width: 100%; padding: 3px; cursor: pointer; }
.cb-ck-v { position: relative; height: 150px; border-radius: 15px; overflow: hidden; background: #26262b; }
.cb-ck-pl { position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; background: rgba(20, 20, 24, .38); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; display: grid; place-items: center; }
.cb-ck-pl svg { width: 20px; height: 20px; margin-left: 3px; }
.cb-ck-b { position: relative; padding: 9px 9px 7px; }
.cb-ck-b small { display: block; font-size: 13px; font-weight: 500; color: var(--meta); }
.cb-ck-b b { display: block; font-size: 17px; font-weight: 600; letter-spacing: -0.3px; margin-top: 1px; }
.cb-ck-st { display: flex; align-items: center; gap: 5px; margin-top: 3px; font-size: 14.5px; color: var(--ink2); }
.cb-ck-st svg { width: 17px; height: 17px; flex: 0 0 auto; }
.cb-ck-st em { font-style: normal; }
.cb-ck-b .cb-tx { margin-top: 7px; }
.cb-ck-b .cb-tm { right: 9px; bottom: 7px; }
.cb-v-repeat_requested { color: var(--ink) !important; font-weight: 600; }
/* разбор техники: пачка подходов одним сообщением */
.cb-b-bt { width: 300px; max-width: 100%; padding: 11px 0 26px; }
.cb-bt-h { display: flex; align-items: center; gap: 10px; padding: 0 12px 8px; }
.cb-bt-ic { width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; flex: 0 0 auto; }
.cb-bt-ic svg { width: 19px; height: 19px; }
.cb-bt-h b { display: block; font-size: 16px; font-weight: 600; letter-spacing: -0.2px; line-height: 20px; }
.cb-bt-h small { display: block; font-size: 13px; color: var(--meta); line-height: 17px; }
.cb-bt-r { position: relative; display: flex; align-items: center; gap: 11px; width: 100%; min-height: 64px; padding: 6px 10px 6px 12px; border: 0; background: none; text-align: left; color: inherit; cursor: pointer; font: inherit; }
.cb-bt-r + .cb-bt-r::before { content: ""; position: absolute; left: 63px; right: 0; top: 0; height: 1px; background: var(--hair); }
.cb-bt-r:active { background: rgba(20, 20, 24, .04); }
.cb-bt-th { position: relative; width: 40px; height: 52px; border-radius: 9px; overflow: hidden; flex: 0 0 auto; background: #2a2a2e; }
.cb-bt-th i { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; }
.cb-bt-th i svg { width: 15px; height: 15px; margin-left: 2px; }
.cb-bt-tx { flex: 1; min-width: 0; }
.cb-bt-tx b { display: block; font-size: 15.5px; font-weight: 600; letter-spacing: -0.2px; line-height: 20px; }
.cb-bt-tx small { display: flex; align-items: center; gap: 4px; margin-top: 2px; font-size: 14px; color: var(--ink2); line-height: 18px; }
.cb-bt-tx small svg { width: 16px; height: 16px; flex: 0 0 auto; }
.cb-bt-r > svg { width: 18px; height: 18px; color: #9a9aa0; flex: 0 0 auto; }
.cb-b-bt .cb-tm { right: 12px; bottom: 7px; }
/* печатает */
.cb-b.typing { padding: 13px 15px; }
.cb-b.typing .cb-tdots { margin: 0; gap: 5px; color: #8e8e94; }
.cb-b.typing .cb-tdots i { width: 8px; height: 8px; }
/* служебные строки: смена тренера, часы, сигнал, вопрос закрыт */
.cb-ho { display: flex; flex-direction: column; align-items: center; text-align: center; margin: 22px 30px 12px; gap: 3px; }
.cb-ho-av { display: flex; margin-bottom: 8px; }
.cb-ho-av > * { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.cb-ho-av > :where(.cb-ho-2) { margin-left: -9px; box-shadow: 0 0 0 2.5px var(--page); }
.cb-ho b { font-size: 15px; font-weight: 600; letter-spacing: -0.2px; }
.cb-ho small { font-size: 13px; line-height: 18px; color: var(--meta); }
.cb-nt { display: flex; flex-direction: column; align-items: center; text-align: center; margin: 16px 34px 6px; gap: 2px; font-size: 13px; line-height: 18px; color: var(--meta); }
.cb-nt-ic { width: 18px; height: 18px; display: grid; place-items: center; color: var(--meta); }
.cb-nt-ic svg { width: 16px; height: 16px; }
.cb-nt-1 { flex-direction: row; justify-content: center; gap: 6px; }
/* вопрос ждёт ответа (как в проде: notice_title · notice_body сервера) */
.cb-nt-w { margin-left: 30px; margin-right: 30px; text-wrap: balance; }
.cb-nt-w .cb-nt-t { display: inline-flex; align-items: center; gap: 5px; color: var(--ink2); font-weight: 500; }
.cb-nt-sf { font-size: 15px; line-height: 21px; color: var(--ink2); margin-left: 24px; margin-right: 24px; text-wrap: balance; }
.cb-under { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 0 14px; margin: 4px 2px 2px; font-size: 13px; line-height: 18px; color: var(--red-tx); text-align: right; }
.cb-under span { flex-basis: 100%; }
.cb-under button { position: relative; border: 0; background: none; padding: 6px 0; font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; }
.cb-under button::after { content: ""; position: absolute; inset: -7px; }
.cb-under-m { color: var(--meta); }
/* «Если болит сильно — отметить как сигнал» под сообщением о боли */
.cb-pl { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; border: 0; background: none; font: inherit; font-size: 14.5px; font-weight: 600; letter-spacing: -0.25px; color: var(--red-tx); cursor: pointer; text-align: left; }
.cb-pl i { width: 20px; height: 20px; display: grid; color: var(--red); flex: 0 0 auto; }
.cb-pl svg { width: 20px; height: 20px; }
.cb-g-me .cb-pl { align-self: flex-end; margin: 2px 2px 0 -52px; max-width: calc(100% + 52px); }
/* нет сети: «!» снаружи пузыря */
.cb-bw { display: flex; align-items: flex-end; gap: 8px; max-width: 100%; }
.cb-bw > .cb-b { min-width: 0; }
.cb-fx { position: relative; width: 28px; height: 28px; margin-bottom: 4px; padding: 0; border: 0; background: none; color: var(--red); display: grid; place-items: center; flex: 0 0 auto; cursor: pointer; }
.cb-fx svg { width: 22px; height: 22px; }
.cb-fx::after { content: ""; position: absolute; inset: -8px; }
/* пусто, ошибка, скелет */
.cb-emp { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 36px 40px; }
.cb-emp-av { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; margin-bottom: 16px; }
.cb-emp-av.cb-mono { font-size: 34px; }
.cb-emp b { font-size: 22px; font-weight: 650; letter-spacing: -0.5px; }
.cb-emp small { font-size: 15px; color: var(--meta); margin-top: 3px; }
.cb-emp p { margin: 14px 0 0; font-size: 16px; line-height: 23px; color: var(--ink2); max-width: 300px; text-wrap: balance; }
.cb-emp-sla { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 14px; color: var(--meta); }
.cb-emp-sla svg { width: 16px; height: 16px; }
.cb-emp button { margin-top: 18px; height: 44px; padding: 0 22px; border: 0; border-radius: 22px; background: var(--ink); color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; }
.cb-sk { display: flex; align-items: flex-end; gap: 6px; margin-top: 10px; }
.cb-sk.me { justify-content: flex-end; }
.cb-sk i { width: 32px; height: 32px; border-radius: 50%; background: #f1f1f4; flex: 0 0 auto; }
.cb-sk u { display: block; width: var(--w); height: var(--h); border-radius: 18px; background: #f1f1f4; animation: cbSk 1.4s ease-in-out infinite; }
.cb-sk.me u { background: #e9e9ed; }
@keyframes cbSk { 50% { opacity: .55; } }
/* «↓» со счётчиком новых */
.cb-down { position: absolute; right: 12px; bottom: calc(var(--bot-h, 64px) + 12px); z-index: 18; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(241, 241, 244, .96); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); color: var(--ink); display: grid; place-items: center; opacity: 0; transform: scale(.6); transition: opacity .25s, transform .4s var(--spring); pointer-events: none; cursor: pointer; padding: 0; }
.cb-down > svg { width: 22px; height: 22px; }
.cb-down.is-on { opacity: 1; transform: none; pointer-events: auto; }
.cb-down .cb-dn-c { position: absolute; right: -6px; top: -8px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: #c93676; color: #fff; font-size: 13px; font-weight: 600; line-height: 22px; text-align: center; font-variant-numeric: tabular-nums; }

/* ---------- низ ---------- */
.cb-bot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 22; padding: 6px 0 var(--bot-pad); background: var(--bar); -webkit-backdrop-filter: blur(22px) saturate(1.8); backdrop-filter: blur(22px) saturate(1.8); }
.cb-cmp { display: flex; flex-direction: column; justify-content: flex-end; }
.cb-cmp.morph, .cb-fld.morph { overflow: hidden; }
.cb-cr { display: flex; align-items: flex-end; gap: 4px; padding: 0 6px; }
.cb-ib { width: 44px; height: 44px; border: 0; background: none; color: var(--ink); display: grid; place-items: center; flex: 0 0 auto; cursor: pointer; border-radius: 50%; padding: 0; }
.cb-ib svg { width: 26px; height: 26px; }
.cb-fld { flex: 1; min-width: 0; min-height: 40px; margin: 2px 0; border-radius: 20px; background: var(--soft); display: flex; align-items: flex-end; padding: 0 14px; }
.cb-ta { position: relative; flex: 1; min-width: 0; }
.cb-ta .cb-ph { position: absolute; left: 0; right: 0; top: 9px; pointer-events: none; color: var(--meta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 16.5px; line-height: 22px; letter-spacing: -0.2px; }
.cb-ta.has-t .cb-ph, .cb-bot.ph-wait .cb-ph { opacity: 0; }
#cbIn { display: block; width: 100%; height: 40px; border: 0; outline: none; resize: none; background: none; font: inherit; font-size: 16.5px; line-height: 22px; letter-spacing: -0.2px; color: var(--ink); padding: 9px 0; margin: 0; caret-color: var(--pink); -webkit-user-select: text; user-select: text; overflow-y: auto; scrollbar-width: none; }
#cbIn::-webkit-scrollbar { display: none; }
#cbIn.scrl { -webkit-mask-image: linear-gradient(transparent, #000 12px); mask-image: linear-gradient(transparent, #000 12px); }
.cb-snd { position: relative; width: 44px; height: 44px; border: 0; background: none; color: var(--ink); flex: 0 0 auto; cursor: pointer; touch-action: none; padding: 0; }
.cb-snd i { position: absolute; inset: 0; display: grid; place-items: center; transition: transform .4s var(--spring), opacity .2s; }
.cb-snd .mic svg { width: 26px; height: 26px; }
.cb-snd .arr { opacity: 0; transform: scale(.4); }
.cb-snd .arr span { width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; }
.cb-snd .arr svg { width: 19px; height: 19px; }
.cb-snd.is-on .mic { opacity: 0; transform: scale(.4); }
.cb-snd.is-on .arr { opacity: 1; transform: none; }
.cb-rp { display: flex; align-items: center; gap: 10px; padding: 2px 10px 8px 16px; }
.cb-rp-ic { width: 22px; color: var(--ink); flex: 0 0 auto; display: grid; }
.cb-rp-ic svg { width: 22px; height: 22px; }
.cb-rp-b { flex: 1; min-width: 0; padding-left: 10px; box-shadow: inset 2.5px 0 0 var(--ink); }
.cb-rp-b b { display: block; font-size: 14px; font-weight: 600; line-height: 18px; }
.cb-rp-b span { display: block; font-size: 14px; line-height: 19px; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-rp-x { position: relative; width: 30px; height: 30px; border-radius: 50%; border: 0; background: var(--soft); color: var(--ink2); display: grid; place-items: center; cursor: pointer; flex: 0 0 auto; padding: 0; }
.cb-rp-x::after { content: ""; position: absolute; inset: -7px; }
.cb-rp-x svg { width: 15px; height: 15px; }
/* подсказка «Отправить как сигнал о боли» (слова о боли в поле) */
.cb-arow { display: flex; align-items: center; gap: 10px; width: 100%; height: 44px; margin: -4px 0 4px; padding: 0 16px; border: 0; background: none; font: inherit; font-size: 15.5px; font-weight: 600; letter-spacing: -0.2px; color: var(--ink); text-align: left; cursor: pointer; }
.cb-arow > i { width: 22px; height: 22px; display: grid; flex: 0 0 auto; color: var(--red); }
.cb-arow > i svg { width: 22px; height: 22px; }
.cb-arow > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-arow > svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--ink2); }
/* превью перед отправкой: фото и видео в своей пропорции, документ — карточкой, «+» — ещё */
.cb-pv { padding: 4px 0 10px; }
.cb-pv-row { display: flex; align-items: center; gap: 8px; padding: 0 12px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.cb-pv-row::-webkit-scrollbar { display: none; }
.cb-pv-t { position: relative; height: 96px; flex: 0 0 auto; border-radius: 16px; overflow: hidden; background: var(--soft); transition: width .25s var(--ease); }
.cb-pv-m { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.cb-pv-m img, .cb-pv-m video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cb-pv-pl { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: rgba(20, 20, 24, .45); color: #fff; display: grid; place-items: center; }
.cb-pv-pl svg { width: 14px; height: 14px; margin-left: 2px; }
.cb-pv-m em { position: absolute; left: 6px; bottom: 6px; padding: 1px 6px; border-radius: 8px; background: rgba(0, 0, 0, .45); color: #fff; font-style: normal; font-size: 12.5px; line-height: 17px; }
.cb-pv-x { position: absolute; right: 5px; top: 5px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(20, 20, 24, .62); color: #fff; display: grid; place-items: center; cursor: pointer; padding: 0; }
.cb-pv-x::after { content: ""; position: absolute; inset: -10px; }
.cb-pv-x svg { width: 12px; height: 12px; }
.cb-pv-f { position: relative; display: flex; align-items: center; gap: 10px; width: 210px; height: 96px; flex: 0 0 auto; padding: 0 34px 0 12px; border-radius: 16px; background: var(--soft); }
.cb-pv-f .cb-pv-x { background: rgba(20, 20, 24, .14); color: var(--ink); }
.cb-pv-fi { width: 40px; height: 40px; border-radius: 12px; background: #fff; color: var(--ink); display: grid; place-items: center; flex: 0 0 auto; }
.cb-pv-fi svg { width: 24px; height: 24px; }
.cb-pv-fb { min-width: 0; }
.cb-pv-fb b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14.5px; font-weight: 600; line-height: 19px; overflow-wrap: anywhere; }
.cb-pv-fb small { display: block; margin-top: 2px; font-size: 13px; color: var(--meta); }
.cb-pv-add { position: relative; width: 72px; height: 96px; flex: 0 0 auto; border-radius: 16px; background: var(--soft); color: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; cursor: pointer; overflow: hidden; }
.cb-pv-add svg { width: 24px; height: 24px; }
.cb-pv-add small { font-size: 12.5px; color: var(--meta); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cb-pv-add.is-full { background: none; width: auto; padding: 0 4px; cursor: default; }
/* настоящее поле выбора файла во всю плитку (не display:none — iOS его не откроет) */
.cb-fin { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer; font-size: 16px; z-index: 1; }
.cb-fin::-webkit-file-upload-button { cursor: pointer; }
.cb-stt { display: flex; gap: 8px; padding: 2px 12px 10px; overflow-x: auto; scrollbar-width: none; }
.cb-stt::-webkit-scrollbar { display: none; }
.cb-stt button { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 11px 14px; border: 0; border-radius: 18px; background: var(--soft); text-align: left; cursor: pointer; color: var(--ink); font: inherit; }
.cb-stt b { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; letter-spacing: -0.2px; }
.cb-stt b i { width: 16px; height: 16px; display: grid; color: var(--red); }
.cb-stt b i svg { width: 16px; height: 16px; }
.cb-stt span { font-size: 14px; color: var(--ink2); }
.cb-qk { display: flex; gap: 8px; padding: 0 12px 10px; }
.cb-qk button { height: 44px; padding: 0 18px; border: 0; border-radius: 22px; background: var(--soft); color: var(--ink); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
/* вопрос закрыт (как в проде): вместо поля — строка-кнопка «Задать новый вопрос» */
.cb-cl { display: flex; align-items: center; gap: 12px; width: calc(100% - 16px); min-height: 56px; margin: 0 8px; padding: 6px 8px; border: 0; border-radius: 18px; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color .15s; }
.cb-cl:active { background: var(--soft); }
.cb-cl .cb-ro-ic svg { width: 20px; height: 20px; }
.cb-cl-t { flex: 1; min-width: 0; }
.cb-cl-t b { display: block; font-size: 15px; font-weight: 600; }
.cb-cl-t small { display: block; font-size: 13px; line-height: 17px; color: var(--meta); margin-top: 1px; }
.cb-cl-go { width: 20px; height: 20px; flex: 0 0 auto; color: var(--meta); display: grid; place-items: center; }
.cb-cl-go svg { width: 16px; height: 16px; }
.cb-ro { display: flex; align-items: center; gap: 12px; padding: 6px 16px 4px; }
.cb-ro-ic { width: 40px; height: 40px; border-radius: 50%; background: var(--soft); display: grid; place-items: center; flex: 0 0 auto; }
.cb-ro-ic svg { width: 20px; height: 20px; }
.cb-ro div { flex: 1; min-width: 0; }
.cb-ro b { display: block; font-size: 15px; font-weight: 600; }
.cb-ro small { display: block; font-size: 13px; line-height: 17px; color: var(--meta); margin-top: 1px; }
.cb-ro button { height: 44px; padding: 0 16px; border: 0; border-radius: 22px; background: var(--ink); color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; flex: 0 0 auto; }
/* запись голосового: держите — «‹ Влево — отмена» и замок; после фиксации — корзина и ✓ */
.cb-rec { position: relative; height: 48px; display: flex; align-items: center; gap: 9px; padding: 0 74px 0 20px; }
.cb-rec-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--red); animation: cbBlink 1.1s infinite; flex: 0 0 auto; }
@keyframes cbBlink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.cb-rec-t { font-size: 16.5px; font-weight: 500; font-variant-numeric: tabular-nums; min-width: 58px; }
.cb-rec-sl { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 2px; font-size: 15px; color: var(--meta); animation: cbNudge 1.6s infinite var(--ease); white-space: nowrap; }
.cb-rec-sl svg { width: 16px; height: 16px; }
@keyframes cbNudge { 0%, 100% { transform: none; } 50% { transform: translateX(-6px); } }
.cb-rec-big { position: absolute; right: -10px; bottom: -18px; width: 90px; height: 90px; border-radius: 50%; display: grid; place-items: center; color: #fff; pointer-events: none; }
.cb-rec-big::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--ink); }
.cb-rec-big svg { position: relative; width: 30px; height: 30px; }
.cb-rec-ring { position: absolute; inset: -12px; border-radius: 50%; background: rgba(20, 20, 24, .08); transition: transform .12s linear; }
.cb-rec-lock { position: absolute; right: 15px; bottom: 86px; width: 44px; height: 78px; border-radius: 22px; background: var(--float); box-shadow: 0 0 0 .5px var(--hair), 0 6px 20px rgba(20, 20, 24, .08); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--ink); animation: cbLockup 1.6s infinite var(--ease); }
.cb-rec-lock svg { width: 20px; height: 20px; }
.cb-rec-lock svg + svg { width: 16px; height: 16px; color: var(--meta); }
@keyframes cbLockup { 0%, 100% { transform: none; } 50% { transform: translateY(-5px); } }
.cb-rec-lk { padding: 0 6px; gap: 8px; }
.cb-rec-lk .cb-rec-dot { margin-left: 4px; }
.cb-rec-lv { flex: 1; height: 26px; display: flex; align-items: center; gap: 2px; justify-content: flex-end; overflow: hidden; }
.cb-rec-lv i { width: 3px; flex: 0 0 3px; border-radius: 2px; background: var(--ink); opacity: .55; }
.cb-rec-ok { position: relative; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--ink); color: #fff; display: grid; place-items: center; cursor: pointer; flex: 0 0 auto; margin: 0 2px; padding: 0; }
.cb-rec-ok::after { content: ""; position: absolute; inset: -4px; }
.cb-rec-ok svg { width: 20px; height: 20px; }
.cb-fld-vo { padding: 4px 8px 4px 4px; align-items: center; }
.cb-fld-vo .cb-vo { align-items: center; gap: 8px; width: 100%; }
.cb-fld-vo .cb-vo-p { width: 32px; height: 32px; }
.cb-fld-vo .cb-vo-p svg { width: 14px; height: 14px; }
.cb-fld-vo .cb-vo-c { display: flex; align-items: center; gap: 8px; padding: 0; }
.cb-fld-vo .cb-vo-w { flex: 1; height: 22px; }
.cb-fld-vo .cb-vo-m { margin: 0; }
.cb-fld-vo .cb-vo-t { display: none; }
/* поиск: низ */
.cb-sn { display: flex; align-items: center; gap: 4px; height: 50px; padding: 0 8px 0 12px; }
.cb-sn > span { flex: 1; text-align: center; font-size: 15px; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.cb-sn-l { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 12px 0 8px; border: 0; border-radius: 22px; background: var(--soft); font-size: 15px; font-weight: 500; color: var(--ink); cursor: pointer; }
.cb-sn-l svg { width: 18px; height: 18px; }
.cb-sn-b { width: 44px; height: 44px; border-radius: 50%; border: 0; background: none; color: var(--ink); display: grid; place-items: center; cursor: pointer; padding: 0; }
.cb-sn-b svg { width: 24px; height: 24px; }
.cb-sn button:disabled { opacity: .3; cursor: default; }

/* ---------- слои ---------- */
.cb-ov { position: absolute; inset: 0; z-index: 50; pointer-events: none; }
.cb-ov > .cb-lay { position: absolute; inset: 0; pointer-events: auto; }
/* просмотр фото и видео */
.cb-vw-bg { position: absolute; inset: 0; background: #000; }
.cb-vw-top { position: absolute; left: 0; right: 0; top: var(--rf-safe-top); height: 56px; display: flex; align-items: center; gap: 10px; padding: 0 14px; color: #fff; z-index: 2; }
.cb-vw-x { width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .14); color: #fff; display: grid; place-items: center; cursor: pointer; padding: 0; flex: 0 0 auto; }
.cb-vw-x svg { width: 20px; height: 20px; }
.cb-vw-h { flex: 1; min-width: 0; text-align: center; }
.cb-vw-h b { display: block; font-size: 16px; font-weight: 600; }
.cb-vw-h small { display: block; font-size: 13px; color: rgba(255, 255, 255, .72); margin-top: 2px; }
.cb-vw-n { width: 44px; text-align: right; font-size: 14px; color: rgba(255, 255, 255, .72); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.cb-vw-img { position: absolute; left: 0; right: 0; top: calc(var(--rf-safe-top) + 64px); bottom: calc(var(--rf-safe-bottom) + 116px); display: grid; place-items: center; touch-action: none; }
.cb-vw-img img, .cb-vw-img video { max-width: 100%; max-height: 100%; display: block; object-fit: contain; }
.cb-vw-cap { position: absolute; left: 20px; right: 20px; bottom: calc(var(--rf-safe-bottom) + 40px); color: #fff; max-height: 66px; overflow: hidden; }
.cb-vw-cap p { margin: 0; font-size: 16px; line-height: 1.4; }
.cb-vw-dots { position: absolute; left: 0; right: 0; bottom: calc(var(--rf-safe-bottom) + 14px); display: flex; justify-content: center; gap: 6px; }
.cb-vw-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .35); transition: background .2s; }
.cb-vw-dots i.is-on { background: #fff; }
/* меню сообщения */
.cb-mn-bg { position: absolute; inset: 0; background: rgba(20, 20, 24, .14); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); }
.cb-mn-b { position: absolute; }
.cb-mn-b > * { margin: 0 !important; }
.cb-mn-rx { position: absolute; display: flex; gap: 0; padding: 4px; border-radius: 26px; background: var(--float); }
.cb-mn-rx button { width: 40px; height: 44px; border: 0; border-radius: 22px; background: none; font-size: 24px; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0; }
@container (max-width: 359px) { .cb-mn-rx button:nth-child(8) { display: none; } }
.cb-mn-rx button.is-on { background: var(--soft); }
.cb-mn-l { position: absolute; width: 230px; border-radius: 16px; background: var(--float); overflow: hidden; transform-origin: 30% 0; }
.cb-mn.me .cb-mn-l { transform-origin: 70% 0; }
.cb-mn-l button { width: 100%; height: 48px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; border: 0; background: none; font-size: 16px; color: var(--ink); cursor: pointer; }
.cb-mn-l button + button { box-shadow: inset 0 .5px 0 var(--hair); }
.cb-mn-l button svg { width: 21px; height: 21px; }
.cb-mn-l button.red { color: var(--red-tx); }
.cb-mn:not(.me) .cb-mn-b .cb-tail { left: -5px; right: auto; transform: scaleX(-1); color: var(--in); }
.cb-mn.me .cb-mn-b .cb-tail { right: -5px; left: auto; color: var(--ink); }
.cb-mn:not(.me) .cb-mn-b .cb-b.jp { border-top-left-radius: 6px; } .cb-mn:not(.me) .cb-mn-b .cb-b.jn { border-bottom-left-radius: 6px; } .cb-mn:not(.me) .cb-mn-b .cb-b.last { border-bottom-left-radius: 5px; }
.cb-mn.me .cb-mn-b .cb-b.jp { border-top-right-radius: 6px; } .cb-mn.me .cb-mn-b .cb-b.jn { border-bottom-right-radius: 6px; } .cb-mn.me .cb-mn-b .cb-b.last { border-bottom-right-radius: 5px; }
.cb-mn:not(.me) .cb-mn-b .cb-rx { right: -14px; } .cb-mn.me .cb-mn-b .cb-rx { left: -14px; background: var(--in); }
/* действия (как alert iOS): не отправлено, удалить у себя */
.cb-cf-bg { position: absolute; inset: 0; background: rgba(20, 20, 24, .3); }
.cb-cf-in { position: absolute; left: 8px; right: 8px; bottom: max(8px, var(--rf-safe-bottom)); padding: 22px 16px 12px; border-radius: 30px; background: #fff; text-align: center; }
.cb-cf-in b { display: block; font-size: 18px; font-weight: 650; letter-spacing: -0.3px; }
.cb-cf-in p { margin: 8px 12px 18px; font-size: 15px; line-height: 1.4; color: #5c5c62; }
.cb-cf-in button { display: block; width: 100%; height: 54px; border: 0; border-radius: 27px; background: #f1f1f4; color: #141418; font-size: 16px; font-weight: 600; cursor: pointer; margin-top: 8px; }
.cb-cf-in .cb-cf-red { color: #c62a31; }
.cb-cf-in .cb-cf-no { background: none; font-weight: 500; }
/* нижний лист: «+» и сигнал о боли */
.cb-sh-bg { position: absolute; inset: 0; background: rgba(20, 20, 24, .28); }
.cb-sh-p { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 16px calc(var(--rf-safe-bottom) + 8px); border-radius: 30px 30px 0 0; background: var(--float); max-height: calc(100% - 48px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; touch-action: pan-y; }
.cb-sh-p::-webkit-scrollbar { display: none; }
.cb.kb-on .cb-sh-p { padding-bottom: 12px; }
.cb-sh-grab { width: 38px; height: 5px; border-radius: 3px; background: #d6d6dc; margin: 0 auto 16px; }
.cb-sh-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.cb-sh-tile { position: relative; min-height: 104px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 8px; padding: 14px 12px 12px; border: 0; border-radius: 22px; background: var(--soft); text-align: left; color: var(--ink); cursor: pointer; font: inherit; overflow: hidden; transition: transform .12s ease-out; }
.cb-sh-tile:active { transform: scale(.98); }
.cb-sh-tile svg { width: 28px; height: 28px; }
.cb-sh-tile b { display: block; font-size: 16px; font-weight: 600; letter-spacing: -0.2px; }
.cb-sh-tile small { display: block; margin-top: 1px; font-size: 13px; line-height: 17px; color: var(--meta); }
.cb-sh-note { margin: 12px 4px 4px; font-size: 13px; line-height: 18px; color: var(--meta); text-align: center; text-wrap: balance; }
.cb-sh-sf { display: flex; align-items: center; gap: 13px; width: 100%; margin-top: 0; padding: 14px 12px 14px 14px; border: 0; border-radius: 22px; background: #fbeff0; text-align: left; color: var(--ink); cursor: pointer; font: inherit; }
.cb-sh-sfi { width: 42px; height: 42px; border-radius: 50%; background: var(--red); color: #fff; display: grid; place-items: center; flex: 0 0 auto; }
.cb-sh-sfi svg { width: 21px; height: 21px; }
.cb-sh-sft { flex: 1; min-width: 0; }
.cb-sh-sft b { display: block; font-size: 16px; font-weight: 600; }
.cb-sh-sft small { display: block; margin-top: 2px; font-size: 13.5px; line-height: 18px; color: #6a4a4e; }
.cb-sh-sf > svg { width: 18px; height: 18px; color: #a07a7e; flex: 0 0 auto; }
.cb-pf { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 4px 4px 0; }
.cb-pf-ic { width: 52px; height: 52px; border-radius: 50%; background: var(--red); color: #fff; display: grid; place-items: center; }
.cb-pf-ic svg { width: 26px; height: 26px; }
.cb-pf-t { margin-top: 12px; font-size: 22px; font-weight: 650; letter-spacing: -0.5px; }
.cb-pf p { margin: 8px 6px 16px; font-size: 15px; line-height: 21px; color: var(--ink2); }
.cb-pf textarea { width: 100%; min-height: 96px; padding: 13px 15px; border: 0; border-radius: 18px; background: var(--soft); font: inherit; font-size: 16.5px; line-height: 22px; color: var(--ink); resize: none; outline: none; caret-color: var(--pink); text-align: left; -webkit-user-select: text; user-select: text; }
.cb-pf textarea::placeholder { color: var(--meta); }
.cb-pf .cb-pf-safe { margin: 14px 4px 0; font-size: 15px; line-height: 21px; color: var(--ink); font-weight: 500; text-wrap: balance; }
.cb-pf-go { width: 100%; height: 54px; margin-top: 12px; border: 0; border-radius: 27px; background: var(--ink); color: #fff; font-size: 16.5px; font-weight: 600; cursor: pointer; }
.cb-pf-no { width: 100%; height: 48px; margin-top: 4px; border: 0; background: none; color: var(--ink); font-size: 16px; font-weight: 500; cursor: pointer; }
/* список найденного */
.cb-sl { top: var(--hd-h) !important; }
.cb-sl-in { position: absolute; left: 0; right: 0; top: 0; bottom: calc(50px + var(--bot-pad) + 6px); background: var(--page); overflow-y: auto; padding: 4px 0 12px; }
.cb-sl-h { padding: 12px 20px 6px; font-size: 13px; font-weight: 600; color: var(--meta); }
.cb-sl-r { width: 100%; display: flex; gap: 12px; padding: 10px 20px; border: 0; background: none; text-align: left; color: var(--ink); cursor: pointer; font: inherit; }
.cb-sl-r.is-on { background: rgba(224, 81, 143, .06); }
.cb-sl-r img, .cb-sl-me { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.cb-sl-me { background: var(--ink); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 600; font-style: normal; }
.cb-sl-me.cb-sl-p { background: #e4e4e9; color: #4a4a50; }
.cb-sl-t { flex: 1; min-width: 0; }
.cb-sl-top { display: flex; justify-content: space-between; gap: 8px; }
.cb-sl-top b { font-size: 15px; font-weight: 600; } .cb-sl-top small { font-size: 13px; color: var(--meta); white-space: nowrap; }
.cb-sl-x { display: block; margin-top: 2px; font-size: 15px; line-height: 20px; color: var(--ink2); }
.cb-sl-more { display: block; margin: 8px auto 0; height: 44px; padding: 0 18px; border: 0; border-radius: 22px; background: var(--soft); font-size: 15px; font-weight: 600; color: var(--ink); cursor: pointer; }
.cb-sl-hint { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 48px 40px; text-align: center; color: var(--meta); }
.cb-sl-hint svg { width: 28px; height: 28px; }
.cb-sl-hint p { margin: 0; font-size: 15px; line-height: 21px; }

/* отклик нажатия — сразу (без задержки тапа: touch-action manipulation на html) */
.cb button { transition: transform .12s ease-out; }
.cb button:active { transform: scale(.98); }
.cb .cb-snd, .cb .cb-snd:active { transform: none; }
.cb-snd i { transition: transform .4s var(--spring), opacity .2s; }
/* тосты и «Отменить» над полем */
/* Отступ тоста над полем ввода: свойство не наследуется (@property), его явно берут только
   тост и плашка «Отменить» — прямые дети #rf-app; смена высоты поля не трогает стили приложения. */
@property --cb-toast { syntax: "<length>"; inherits: false; initial-value: 72px; }
.rf-app.in-chat > .rf-toast, .rf-app.in-chat > .xs-undo { --cb-toast: inherit; }
.rf-app.in-chat .rf-toast, .rf-app.rf-full.in-chat .rf-toast { bottom: calc(var(--cb-toast, 72px) + 12px); }
.rf-app.in-chat .xs-undo, .rf-app.rf-full.in-chat .xs-undo { bottom: calc(var(--cb-toast, 72px) + 8px); }

/* 320 pt (iPhone SE / mini с крупным текстом) */
@container (max-width: 359px) {
  .cb-emp-av { width: 64px; height: 64px; margin-bottom: 12px; }
  .cb-emp b { font-size: 21px; }
  .cb-emp p { font-size: 16px; line-height: 23px; margin-top: 10px; }
  .cb-pf-ic { width: 40px; height: 40px; } .cb-pf-ic svg { width: 22px; height: 22px; }
  .cb-pf-t { margin-top: 8px; font-size: 20px; }
  .cb-pf p { margin: 6px 2px 12px; }
  .cb-pf textarea { min-height: 72px; }
  .cb-rec { padding-right: 84px; gap: 7px; padding-left: 16px; }
  .cb-rec .cb-rec-t { min-width: 52px; }
  .cb-rec-sl { font-size: 14px; }
  .cb-rec-sl svg { display: none; }
  .cb-arow { font-size: 15px; padding: 0 12px; gap: 8px; }
  .cb-arow > svg { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cb *, .cb *::before, .cb *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
}
/* знак сигнала на красной подложке — белый крест (круг значка прозрачный, иначе белый диск) */
.cb-sh-sfi svg circle, .cb-pf-ic svg circle { fill: none; }
/* в чате «Нет сети» говорит шапка («Ожидание сети…», как в Telegram) — общая плашка приложения не нужна */
.rf-app.in-chat .gxa-off { display: none !important; }
.cb-hav .cb-mono { display: grid; }

/* ---- src/styles/53-meal-analysis.css ---- */
/* Разбор приёма — утверждённый макет v8 (20-screens/diary-analysis.js). Язык — как у «Тарелок» и страницы
 * приёма: белые плашки без контура, ряды фото-плиток, стеклянные подписи на фото, тёмная плашка для «особого»
 * (как «Что есть дома?»). Оценка тарелки — тёплые звёзды (.ma-pl--stars, вариант А). Фото варианта ещё нет —
 * эмодзи на мягком фоне (.ma-emo). */

/* ---------- оценка тарелки ---------- */
.ma-pl { display: inline-flex; align-items: center; gap: 3px; vertical-align: middle; flex: 0 0 auto; }
.ma-pl svg { display: block; flex: 0 0 auto; }
.ma-pl--stars .on path, .ma-mark .on path, .ma-gain svg.on path, .ma-osh__g svg.on path { fill: #f6b40e; filter: drop-shadow(0 1px 1.5px rgba(176, 112, 0, .28)); }
.ma-pl--stars .off path, .ma-mark .off path { fill: #e6e6eb; }
.ma-pl--in > *, .ma-mark > svg.on { animation: maIn .6s cubic-bezier(.3, 1.4, .5, 1) both; }
.ma-pl--in > :nth-child(2) { animation-delay: .08s; }
.ma-pl--in > :nth-child(3) { animation-delay: .16s; }
.ma-mark > * { animation-delay: calc(var(--i) * .1s + .12s); }
@keyframes maIn { from { opacity: 0; transform: scale(.4); } }

/* что даёт замена */
.ma-gain { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: #3c3b42; letter-spacing: -.1px; white-space: nowrap; }
.ma-loss { font-size: 12px; font-weight: 500; color: #b25a00; white-space: nowrap; }
/* В плитке (128 px) и карточке «+ звезда за овощи и баланс» в строку не помещается — переносом, а не поверх
   соседней плитки (10.10: две звезды за замену дают замены «блюдо целиком»). */
.ma-tile .ma-gain, .ma-tile .ma-loss, .ma-card .ma-gain, .ma-card .ma-loss { white-space: normal; }
.ma-tile .ma-gain, .ma-card .ma-gain { align-items: flex-start; }
.ma-tile .ma-gain > svg, .ma-card .ma-gain > svg { flex: 0 0 auto; margin-top: 1.5px; }

/* ---------- страница приёма: компактный разбор ---------- */
.ma-sum { padding: 18px 20px 2px; }
.ma-sum__top { display: block; width: 100%; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.ma-sum__h { display: flex; align-items: center; justify-content: space-between; }
.ma-sum__k { font-size: 17px; font-weight: 600; letter-spacing: -.35px; }
.ma-sum__t { display: block; margin-top: 10px; font-size: 25px; font-weight: 700; letter-spacing: -.7px; line-height: 1.12; }
.ma-sum__s { display: block; margin-top: 5px; font-size: 14.5px; line-height: 1.35; color: #6b6a72; }
.ma-best { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 16px; padding: 10px 14px 10px 10px; border: 0; border-radius: 20px; background: #f4f4f6; font: inherit; color: inherit; text-align: left; cursor: pointer; transition: transform .15s; }
.ma-best:active { transform: scale(.985); }
.ma-best__ph { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 15px; background: #e9e9ee center / cover no-repeat; }
.ma-best__b { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.ma-best__b small { font-size: 12px; font-weight: 500; color: #8b8a92; }
.ma-best__b b { font-size: 15px; font-weight: 600; letter-spacing: -.2px; line-height: 1.25; }
.ma-best__fx { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ma-sum__rows { margin: 6px -20px 0; }
.ma-askrow span { color: #101014; font-weight: 500; }
.ma-askrow__ic { display: grid; width: 20px; height: 20px; color: #101014; }
.ma-askrow__ic svg { width: 20px; height: 20px; }
.ma-sum--sk { padding-bottom: 18px; }
/* мини-кольцо ккал у записанного приёма убрано (владелец 09.10: «недокольцо, не понимаю, о чём оно») */
.ad .md-kbc.ma-nr { padding-left: 16px; }
.ad .md-kbc.ma-nr .md-kring { display: none; }

/* ---------- экран «Разбор» ---------- */
.ma { padding: 2px 16px 112px; }
.ma-hero { margin-top: 8px; padding: 16px 18px 20px; border-radius: 26px; background: #fff; }
.ma-hero--sk { padding-bottom: 26px; }
.ma-hero__m { display: flex; align-items: center; gap: 11px; min-width: 0; }
.ma-hero__m > span { min-width: 0; }
.ma-hero__ph { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 13px; background: #eee center / cover no-repeat; }
.ma-hero__m b { display: block; font-size: 14px; font-weight: 600; letter-spacing: -.15px; }
.ma-hero__m small { display: block; margin-top: 1px; font-size: 12.5px; color: #8b8a92; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ma-hero__t { margin: 18px 0 0; font-size: 31px; font-weight: 700; letter-spacing: -1px; line-height: 1.06; text-wrap: balance; }
.ma-hero__l { margin-top: 12px; }
.ma-hero__l p { margin: 0; font-size: 15px; line-height: 1.45; color: #3c3b42; }
.ma-hero__l p + p { margin-top: 7px; }
.ma-marks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(12, 14, 18, .06); }
.ma-mark { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.ma-marks--bars .ma-mark { gap: 10px; padding-top: 6px; }
.ma-mark b { font-size: 14px; font-weight: 600; letter-spacing: -.2px; }
.ma-mark small { margin-top: -6px; font-size: 12.5px; color: #8b8a92; font-variant-numeric: tabular-nums; }
.ma-mark:not(.on) b { color: #6b6a72; }
.ma-hero__h { margin: 16px 6px 0; font-size: 13.5px; line-height: 1.42; color: #6b6a72; text-align: center; text-wrap: balance; }
.ma-sh { margin-top: 26px; justify-content: flex-start; }
.ma-sh span { font-size: 13px; font-weight: 500; letter-spacing: 0; color: #8b8a92; margin-left: auto; }

/* «Идеальная тарелка из этого приёма» — тёмная плашка, как «Что есть дома?» */
.ma-combo { position: relative; overflow: hidden; isolation: isolate; margin-top: 12px; border-radius: 26px; color: #fff;
  background: radial-gradient(120% 110% at 100% 0%, rgba(255, 255, 255, .08) 0%, rgba(255, 255, 255, 0) 55%), linear-gradient(150deg, #26262a 0%, #141418 100%); }
.ma-combo .phero__grain { opacity: .26; }
.ma-combo__in { position: relative; z-index: 2; padding: 18px 18px 16px; }
.ma-combo__k { font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.ma-combo__t { margin-top: 6px; font-size: 19px; font-weight: 600; letter-spacing: -.45px; line-height: 1.25; text-wrap: balance; }
.ma-combo__f { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.ma-combo__f span { flex: 1 1 auto; font-size: 13.5px; color: rgba(255, 255, 255, .72); font-variant-numeric: tabular-nums; }
.ma-combo__f button { height: 40px; padding: 0 18px; border: 0; border-radius: 100px; background: #fff; color: #101014; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }

/* части тарелки: ряд вариантов */
.ma-grp { margin-top: 12px; padding: 16px 16px 14px; border-radius: 26px; background: #fff; }
.ma-grp__h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ma-grp__t { margin-top: 4px; font-size: 17px; font-weight: 600; letter-spacing: -.4px; }
.ma-all { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 1px; height: 30px; padding: 0 6px 0 12px; border: 0; border-radius: 100px; background: #f2f2f5; font: inherit; font-size: 13px; font-weight: 600; color: #101014; cursor: pointer; }
.ma-all svg { width: 15px; height: 15px; color: #a3a2aa; }
.ma-row { margin-top: 14px; padding-bottom: 2px; }
.ma-tile { flex: 0 0 128px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; cursor: pointer; }
.ma-tile__ph { position: relative; display: block; width: 128px; height: 128px; margin-bottom: 4px; border-radius: 20px; background: #ececf0 center / cover no-repeat; transition: box-shadow .2s, transform .15s; }
.ma-tile:active .ma-tile__ph { transform: scale(.97); }
.ma-tile.on .ma-tile__ph, .ma-card.on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #101014; }
.ma-kc { position: absolute; left: 8px; bottom: 8px; display: flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 100px; background: rgba(20, 4, 12, .42); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); color: #fff; font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ma-ck { position: absolute; right: 7px; top: 7px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, .8); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: rgba(16, 16, 20, .28); cursor: pointer; transition: background .2s, color .2s, transform .2s; }
.ma-ck::before { content: ""; position: absolute; inset: -8px; }
.ma-ck svg { width: 15px; height: 15px; }
.ma-tile.on .ma-ck, .ma-card.on .ma-ck { background: #101014; color: #fff; transform: scale(1.06); }
.ma-tile > b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; font-weight: 600; letter-spacing: -.2px; line-height: 1.25; }
.ma-tile__k, .ma-you { font-size: 11.5px; color: #8b8a92; white-space: nowrap; }
.ma-tile--all .ma-tile__ph { display: grid; place-items: center; background: #f2f2f5; }
.ma-tile--all .ma-tile__ph span { font-size: 24px; font-weight: 600; letter-spacing: -.5px; color: #101014; }

/* без замен, остаток дня, откуда калории, баланс */
.ma-hab .xs-v { color: #101014; font-size: 14px; font-weight: 600; }
.ma-hab .xs-b b { font-weight: 600; }
.ma .xs-grp { margin-top: 26px; }
.ma-rest { margin-top: 26px; padding-bottom: 0; }
.ma-rest .rp-fit__s { line-height: 1.4; }
.ma-rest__all.ad__row { margin: 14px -16px 0; padding: 14px 16px; border-top: 1px solid rgba(12, 14, 18, .06); color: #101014; font-weight: 600; }
.ma-src, .ma-bal { padding: 14px 18px 16px; }
.ma-src__bar { display: flex; gap: 2px; height: 8px; margin: 2px 0 10px; border-radius: 4px; overflow: hidden; }
.ma-src__r { display: flex; align-items: center; gap: 10px; min-height: 34px; font-size: 14.5px; }
.ma-src__r i { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; }
.ma-src__r span { flex: 1 1 auto; min-width: 0; }
.ma-src__r b { font-weight: 600; font-variant-numeric: tabular-nums; }
.ma-src__r em { width: 44px; font-style: normal; font-size: 13px; color: #8b8a92; text-align: right; font-variant-numeric: tabular-nums; }
.ma-note { margin: 10px 0 0; font-size: 13px; line-height: 1.42; color: #6b6a72; }
.ma-bal.dy-bal { margin: 0; }
.ma-foot { margin: 22px 18px 0; font-size: 12px; line-height: 1.42; color: #a3a2aa; text-align: center; text-wrap: balance; }

/* низ экрана: «Ваш вариант» и «Спросить про этот приём» (кнопка «Разборов») */
.ma-dock { display: flex; flex-direction: column; gap: 10px; background: linear-gradient(rgba(var(--rf-page-rgb), 0), rgba(var(--rf-page-rgb), .97) 34%); }
.ma-var { display: flex; align-items: center; gap: 12px; padding: 10px 8px 10px 16px; border-radius: 22px; background: #fff; box-shadow: 0 12px 30px -16px rgba(16, 16, 20, .35); animation: maUp .4s cubic-bezier(.32, .72, 0, 1) both; }
.ma-var > span { flex: 1 1 auto; min-width: 0; }
.ma-var b { display: block; font-size: 14.5px; font-weight: 600; letter-spacing: -.2px; font-variant-numeric: tabular-nums; }
.ma-var small { display: block; margin-top: 1px; font-size: 12px; color: #6b6a72; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ma-var button { flex: 0 0 auto; height: 36px; padding: 0 14px; border: 0; border-radius: 100px; background: #101014; color: #fff; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
@keyframes maUp { from { opacity: 0; transform: translateY(14px); } }

/* ---------- экран «Все варианты» ---------- */
.ma-swnote { margin: 6px 4px 12px; font-size: 13px; line-height: 1.42; color: #6b6a72; }
.ma-chips { display: flex; gap: 6px; margin: 12px -16px 0; padding: 0 16px; overflow-x: auto; scrollbar-width: none; }
.ma-chips::-webkit-scrollbar { display: none; }
.ma-chips span { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 100px; background: #fff; font-size: 13.5px; font-weight: 600; color: #36353b; cursor: pointer; transition: background .2s, color .2s; }
.ma-chips span i { font-style: normal; font-weight: 500; color: #a3a2aa; font-variant-numeric: tabular-nums; }
.ma-chips span.on { background: #101014; color: #fff; }
.ma-chips span.on i { color: rgba(255, 255, 255, .55); }
.ma-card { position: relative; transition: box-shadow .2s, transform .15s; }
.ma-card .ma-ck { top: 8px; right: 8px; width: 30px; height: 30px; }
.ma-card__g { display: block; margin-top: 6px !important; }

/* ---------- карточка варианта ---------- */
.ma-osh__ph { display: block; height: 196px; border-radius: 24px; background: #eee center / cover no-repeat; }
.ma-osh__eff { margin-top: 16px; }
.ma-osh__eff small { display: block; font-size: 12.5px; font-weight: 500; color: #8b8a92; }
.ma-osh__eff b { display: block; margin-top: 2px; font-size: 21px; font-weight: 700; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.ma-osh__g { display: flex; align-items: center; gap: 7px; margin-top: 8px; font-size: 14px; font-weight: 600; color: #6b6a72; }
.ma-osh__g.up { color: #101014; }
.ma-osh__g.down { color: #b25a00; }
.ma-osh__fx { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 14px; padding: 12px 0; border-radius: 20px; background: #f4f4f6; }
.ma-osh__fx div { text-align: center; }
.ma-osh__fx div + div { box-shadow: inset 1px 0 0 rgba(12, 14, 18, .07); }
.ma-osh__fx b { display: block; font-size: 16.5px; font-weight: 600; letter-spacing: -.3px; font-variant-numeric: tabular-nums; }
.ma-osh__fx small { font-size: 11.5px; color: #8b8a92; }
.ma-osh__why { margin: 16px 0 0; font-size: 15px; line-height: 1.45; color: #3c3b42; }
.ma-osh__por { margin: 10px 0 6px; font-size: 12.5px; color: #8b8a92; font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .ma-pl--in > *, .ma-mark > *, .ma-var { animation: none; }
}

/* ======================================================================================
 * v6 (владелец 09.10, вечер): разбор — РАЗГОВОР, как ChatGPT / Grok. Превью на странице приёма —
 * короткий комментарий словами + поле «Спросить» сразу; экран разбора — ответ Re:forma текстом,
 * внутри карусели замен; вопросы — переписка прямо под разбором, поле ввода закреплено внизу.
 * ====================================================================================== */
.ma-who { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: #6b6a72; letter-spacing: -.1px; }
.ma-who .rj-mark, .ma-who svg { width: 20px; height: 20px; flex: 0 0 auto; }
.ma-sum__c { display: block; margin-top: 10px; font-size: 16.5px; line-height: 1.45; letter-spacing: -.2px; color: #101014; text-wrap: pretty; }
.ma-sum__more { display: inline-flex; align-items: center; gap: 2px; margin-top: 8px; font-size: 14px; font-weight: 600; color: #101014; }
.ma-sum__more svg { width: 15px; height: 15px; color: #a3a2aa; }
.ma-ask { margin-top: 16px; }
.ma-in { display: flex; align-items: center; gap: 10px; width: 100%; height: 50px; padding: 0 6px 0 16px; border: 0; border-radius: 100px; background: #f2f2f5; font: inherit; font-size: 16px; color: #8b8a92; text-align: left; cursor: text; }
.ma-in span { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ma-in__sp { display: grid; place-items: center; color: #a3a2aa; }
.ma-in__sp svg { width: 15px; height: 15px; }
.ma-in__go { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #101014; color: #fff; flex: 0 0 auto; }
.ma-in__go svg { width: 18px; height: 18px; }
.ma-qs { display: flex; gap: 8px; }
.ma-qs button { flex: 0 0 auto; padding: 9px 14px; border: 0; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px rgba(16, 16, 20, .1); font: inherit; font-size: 14px; line-height: 1.3; color: #36353b; text-align: left; cursor: pointer; }
.ma-qs--row { margin: 10px -20px 6px; padding: 0 20px 2px; overflow-x: auto; scrollbar-width: none; }
.ma-qs--row::-webkit-scrollbar { display: none; }
.ma-qs--row button { white-space: nowrap; }

.rf-scr.mc-scr { background: #fff; }
.mc { padding: 4px 20px 24px; }
/* шапка разбора (макет 10.10, раздел 4, .ahd): фото 56, звёзды 22 точки у правого края и «2 из 3» под ними; длинная
   подпись переносится, а не сдвигает звёзды. Тап по звёздам — шпаргалка «За что звёзды». */
.mc-meal { display: flex; align-items: center; gap: 12px; padding: 6px 0 18px; border-bottom: 1px solid rgba(12, 14, 18, .06); }
.mc-meal > span { flex: 1 1 0; min-width: 0; }
.mc-meal__ph { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 16px; background: #eee center / cover no-repeat; }
.mc-meal b { display: block; font-size: 16.5px; line-height: 1.3; font-weight: 600; letter-spacing: -.3px; }
.mc-meal small { display: block; margin-top: 1px; font-size: 13px; line-height: 1.35; color: #8b8a91; overflow-wrap: anywhere; }
.mc-meal__st { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; margin-left: auto; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; }
.mc-meal__st .ma-pl { gap: 4px; }
.mc-meal__st em { font-style: normal; font-size: 12px; line-height: 15px; color: #8b8a91; }
.mc-cheat { display: flex; flex-direction: column; gap: 4px; margin: 12px 0 0; padding: 12px 14px; border-radius: 16px; background: #f5f5f7; font-size: 14px; line-height: 1.5; color: #101014; }
.mc-cheat[hidden] { display: none; }
.mc-cheat b { font-size: 13px; font-weight: 600; color: #77767d; }
.mc-cheat span { display: flex; align-items: center; gap: 8px; }
.mc-cheat .on path { fill: #f6b40e; }
.mc-cheat .off path { fill: #d9d9de; }
.mc-a { margin-top: 22px; }
.mc-a p { margin: 10px 0 0; font-size: 16.5px; line-height: 1.55; letter-spacing: -.2px; color: #1c1c21; text-wrap: pretty; }
.mc-a > small { display: block; margin-top: 8px; font-size: 12.5px; color: #8b8a92; }
.mc-h { margin: 12px 0 0; font-size: 27px; font-weight: 700; line-height: 1.12; letter-spacing: -.8px; text-wrap: balance; }
.mc-h3 { margin: 30px 0 0; font-size: 19px; font-weight: 700; letter-spacing: -.4px; }
.mc-marks { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 16px; padding: 12px 14px; border-radius: 18px; background: #f6f6f8; }
.mc-marks > span { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.mc-marks b { font-weight: 600; }
.mc-marks small { color: #8b8a92; font-size: 13px; }
.mc-marks > span:not(.on) b { color: #6b6a72; }
.mc-lead { margin-top: 18px !important; }
.mc-lead b { font-weight: 650; }
.mc-row { margin: 12px -20px 0; padding: 0 20px 4px; }
.mc .ma-tile--all .ma-tile__ph span, .mc .rp-dish.ma-tile--all .ma-tile__ph span { display: grid; place-items: center; }
.mc .ma-tile--all .ma-tile__ph svg { width: 26px; height: 26px; color: #101014; }
.mc .rp-dish.ma-tile--all .rp-dish__ph { display: grid; place-items: center; background: #f2f2f5; box-shadow: none; }
.mc .ma-combo { margin-top: 14px; }
.mc-dt { margin-top: 14px; padding: 14px 16px; border-radius: 18px; background: #f6f6f8; }
.mc-dt > b { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 600; }
.mc-dt > small { display: block; margin-top: 6px; font-size: 12px; color: #8b8a92; }
.mc-dt .dy-bal { margin: 0; padding: 0; background: none; }
.mc-hab { display: flex; align-items: flex-start; gap: 12px; padding: 8px 0; }
.mc-hab + .mc-hab { border-top: 1px solid rgba(12, 14, 18, .06); }
.mc-hab span { flex: 1 1 auto; }
.mc-hab span b { display: block; font-size: 14.5px; font-weight: 600; }
.mc-hab span small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.4; color: #6b6a72; }
.mc-hab em { font-style: normal; font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.mc .ma-ask { margin-top: 30px; padding-top: 22px; border-top: 1px solid rgba(12, 14, 18, .07); }
.mc-dock { position: sticky; bottom: 0; z-index: 6; display: flex; flex-direction: column; gap: 8px; padding: 14px 12px calc(10px + var(--rf-safe-bottom)); background: linear-gradient(rgba(255, 255, 255, 0), #fff 30%); }
.mc-dock .ma-var { margin: 0 2px; }
@media (prefers-reduced-motion: reduce) { .ma-ch__q, .ma-ch__a { animation: none; } }

/* ---------- шторка «Спросить про этот приём» — во весь рост, как макет v3 ---------- */
/* Во весь рост — от края до края, как полноэкранные листы iOS и чат ChatGPT/Grok (плавающая карточка с отступами —
   только для коротких листов). */
.xs-sheet.ma-asksh { top: calc(var(--rf-safe-top) + 44px); left: 0; right: 0; bottom: 0; max-height: none; border-radius: 28px 28px 0 0; }
.ma-asksh .xs-sheet__h { padding-bottom: 8px; }
.ma-asksh .xs-sheet__b { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.ma-asksh .xs-sheet__f { display: none; }
.ma-ch__feed { flex: 1 1 auto; display: flex; flex-direction: column; gap: 10px; padding: 8px 16px 16px; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; }
.ma-ch__feed::-webkit-scrollbar { display: none; }
.ma-ch__q { align-self: flex-end; max-width: 82%; padding: 11px 15px; border-radius: 22px 22px 8px 22px; background: #101014; color: #fff; font-size: 16px; line-height: 1.4; letter-spacing: -.15px; animation: maUp .35s cubic-bezier(.32, .72, 0, 1) both; }
.ma-ch__a { align-self: flex-start; max-width: 88%; padding: 10px 15px 12px; border-radius: 22px 22px 22px 8px; background: #f2f2f5; color: #101014; font-size: 16px; line-height: 1.45; letter-spacing: -.15px; animation: maUp .4s cubic-bezier(.32, .72, 0, 1) both; }
.ma-ch__a small { display: flex; align-items: center; gap: 5px; margin-bottom: 4px; font-size: 12px; font-weight: 600; color: #8b8a92; }
.ma-ch__a small svg { width: 12px; height: 12px; color: #a3a2aa; }
.ma-ch__a--err { color: #b4232a; }
.ma-ch__ctx { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 20px; background: #f6f6f8; }
.ma-ch__ctx i { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 14px; background: #e9e9ee center / cover; }
.ma-ch__ctx span { min-width: 0; }
.ma-ch__ctx b { display: block; font-size: 15px; font-weight: 600; }
.ma-ch__ctx small { display: -webkit-box; margin-top: 2px; font-size: 13px; line-height: 1.38; color: #6b6a72; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ma-ch__hint { margin: 10px 4px 0; font-size: 15px; line-height: 1.45; color: #8b8a92; }
.ma-ch__sug { display: flex; flex-direction: column; margin-top: 4px; }
.ma-ch__sug button { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 4px; border: 0; border-bottom: 1px solid rgba(16, 16, 20, .06); background: none; font: inherit; font-size: 16px; letter-spacing: -.2px; color: #101014; text-align: left; cursor: pointer; }
.ma-ch__sug button:last-child { border-bottom: 0; }
.ma-ch__sug button > i { display: grid; place-items: center; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: #f2f2f5; color: #8b8a92; }
.ma-ch__sug button > i svg { width: 13px; height: 13px; }
.ma-ch__sug button span { flex: 1 1 auto; }
.ma-ch__sug button > svg { flex: 0 0 auto; width: 16px; height: 16px; color: #c4c3ca; }
.ma-ch__ft { flex: 0 0 auto; padding: 10px 14px calc(10px + var(--rf-safe-bottom)); background: #fff; }
.ma-qs--sh { margin: 0 -14px 10px; padding: 0 14px 2px; }
.ma-ch__cmp { display: flex; align-items: center; gap: 8px; height: 50px; margin: 0; padding: 0 5px 0 18px; border-radius: 100px; background: #f2f2f5; transition: background .2s, box-shadow .2s; }
.ma-ch__cmp:focus-within { background: #fff; box-shadow: 0 0 0 1.5px rgba(16, 16, 20, .14), 0 10px 26px -12px rgba(16, 16, 20, .3); }
.ma-ch__cmp input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 16px; color: #101014; }
.ma-ch__cmp input::placeholder { color: #8b8a92; }
.ma-ch__cmp button { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: #101014; color: #fff; cursor: pointer; flex: 0 0 auto; }
.ma-ch__cmp button[disabled] { background: #e4e4e8; }
.ma-ch__cmp button svg { width: 18px; height: 18px; }
.ma-ch__note { margin-top: 8px; font-size: 11.5px; line-height: 1.35; color: #a3a2aa; text-align: center; }
.mc-marks svg.on path { fill: #f6b40e; filter: drop-shadow(0 1px 1.5px rgba(176, 112, 0, .28)); }
.mc-marks svg.off path { fill: #dcdce1; }

/* ---------- фото варианта ещё не готово: эмодзи на мягком фоне (фото генерируется один раз на название) ---------- */
.ma-tile__ph:not([style]), .ma-best__ph:not([style]), .ma-ph:not([style]) { display: grid; place-items: center; background: linear-gradient(160deg, #f6f1ec, #efe9f1); }
.ma-tile__ph .ma-emo, .ma-best__ph .ma-emo, .ma-ph .ma-emo { font-style: normal; font-size: 44px; line-height: 1; filter: saturate(.9); }
.ma-best__ph .ma-emo { font-size: 28px; }
.ma-osh__ph .ma-emo { font-size: 72px; }
.rp-dish__ph .ma-emo { font-size: 40px; }
.rp-card__ph.ma-ph .ma-emo { font-size: 48px; }
.ma-osh__ph.ma-ph:not([style]), .rp-card__ph.ma-ph:not([style]), .rp-dish__ph.ma-ph:not([style]) { display: grid; place-items: center; }
.ma-tile--all .ma-tile__ph:not([style]) { background: #f2f2f5; }

/* ---------- ИИ-часть ещё пишется: заглушки на месте лучшей замены и рядов вариантов ---------- */
.ma-best--sk { cursor: default; }
.ma-best--sk .ma-best__ph { background: #ececf0; }
.ma-best--sk .ma-best__b small { color: #8b8a92; }
.ma-pend { color: #8b8a92 !important; }
.ma-row--sk .ma-tile { pointer-events: none; }
.ma-row--sk .ma-tile__ph { width: 128px; height: 128px; margin-top: 0; border-radius: 20px; }

/* ---------- «Еда v6–v8» (ок владельца 11.10): карточка «Разбор», ИИ-кнопка «Как сделать легче», шторка-чат, «Все замены» ---------- */
/* Разбор — белая карточка, нажимается целиком; справа в шапке — маленькая светлая стрелка */
.ma-sum { padding: 6px 16px 2px; }
.ma-sum .ma-sum__top { position: relative; padding: 16px 18px 18px; border-radius: 24px; background: #fff; box-shadow: 0 1px 2px rgba(16, 16, 20, .04), 0 10px 28px rgba(16, 16, 20, .05); transition: transform .2s; }
.ma-sum .ma-sum__top:active { transform: scale(.99); }
.ma-sum__h .ma-pl { margin-right: 0; }
.ma-chev { display: grid; place-items: center; margin-left: auto; margin-right: -4px; color: #c2c1c8; }
.ma-chev svg { width: 18px; height: 18px; stroke-width: 2.2; }
.ma-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ma-sum .ma-sum__c { margin-top: 10px; font-size: 16.5px; line-height: 1.42; letter-spacing: -.2px; color: #1b1a20; }
.ma-sum .ma-ask { margin: 14px 4px 0; padding-top: 0; border-top: 0; }
/* ИИ-кнопка: переливающийся контур, мягкое свечение, искра, экономия в капсуле */
@property --ma-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes maSpin { to { --ma-a: 360deg; } }
.ma-lt { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; height: 54px; margin-top: 14px; padding: 0 8px 0 16px; border: 1.5px solid transparent; border-radius: 28px;
  background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from var(--ma-a, 0deg), #ff7ab6, #a58bff, #6fc3ff, #ffbe7a, #ff7ab6) border-box;
  box-shadow: 0 6px 20px rgba(110, 90, 255, .16), -10px 4px 22px rgba(255, 111, 174, .12); font: inherit; color: #101014; text-align: left; cursor: pointer; animation: maSpin 5s linear infinite; transition: transform .2s; }
.ma-lt:active { transform: scale(.985); }
.ma-lt__sp { display: grid; place-items: center; flex: 0 0 auto; }
.ma-lt b { flex: 1 1 auto; font-size: 16px; font-weight: 600; letter-spacing: -.3px; }
.ma-lt__k { flex: 0 0 auto; display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 18px; background: #f1eeff; color: #4b3bff; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* шторка-чат во весь рост */
.xs-sheet.ma-ltsh { top: calc(var(--rf-safe-top) + 44px); left: 0; right: 0; bottom: 0; max-height: none; border-radius: 28px 28px 0 0; }
.ma-ltsh .xs-sheet__h { padding-bottom: 6px; }
.ma-ltsh .xs-sheet__b { position: relative; display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.ma-ltsh .xs-sheet__f { display: none; }
.ma-lt-feed { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 10px 20px 24px; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(transparent 0, #000 14px, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(transparent 0, #000 14px, #000 calc(100% - 24px), transparent); }
.ma-lt-feed::-webkit-scrollbar { display: none; }
.ma-lt-none { margin: 20px 0; font-size: 16px; color: #6b6a72; }
.ma-lt-me { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.ma-lt-me__ph { display: block; width: 92px; height: 92px; border-radius: 20px; background: #eee center / cover no-repeat; }
.ma-lt-q { max-width: 78%; padding: 10px 15px; border-radius: 20px 20px 6px 20px; background: #f1f1f4; font-size: 16px; line-height: 1.35; }
.ma-lt-a { display: flex; gap: 10px; margin-top: 18px; }
.ma-lt-a__sp { flex: 0 0 auto; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #f6f3fb; }
.ma-lt-a p { margin: 3px 0 0; font-size: 17px; line-height: 1.42; letter-spacing: -.25px; text-wrap: pretty; }
.ma-tc-rail { display: flex; gap: 10px; margin: 16px -20px 0; padding: 4px 20px 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 20px; scrollbar-width: none; }
.ma-tc-rail::-webkit-scrollbar { display: none; }
.ma-tc { flex: 0 0 252px; scroll-snap-align: start; display: flex; flex-direction: column; border-radius: 24px; background: #fff; overflow: hidden; box-shadow: 0 0 0 1px rgba(16, 16, 20, .06), 0 8px 22px rgba(16, 16, 20, .07); }
.ma-tc__ph { position: relative; display: grid; place-items: center; height: 128px; background: #f3f2f6 center / cover no-repeat; }
.ma-tc__ph .ma-emo { font-size: 54px; }
.ma-tc__b { flex: 1 1 auto; display: flex; flex-direction: column; padding: 13px 16px 14px; }
.ma-tc__of { font-size: 12.5px; color: #8b8a92; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ma-tc__k { display: flex; align-items: baseline; gap: 4px; margin-top: 2px; font-size: 32px; font-weight: 700; letter-spacing: -1.2px; line-height: 1.05; font-variant-numeric: tabular-nums;
  background: linear-gradient(100deg, #101014 40%, #6a4fd8 120%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ma-tc__k small { font-size: 14px; font-weight: 600; letter-spacing: -.1px; color: #8b8a92; -webkit-text-fill-color: #8b8a92; }
.ma-tc__t { display: block; margin-top: 7px; font-size: 16px; font-weight: 600; line-height: 1.28; letter-spacing: -.3px; text-wrap: balance; }
.ma-tc__m { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ma-tc__m span { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 12px; background: #f3f3f6; font-size: 12.5px; font-weight: 500; color: #4a4950; font-variant-numeric: tabular-nums; }
.ma-tc__or { position: relative; display: flex; align-items: center; gap: 9px; margin-top: auto; padding-top: 12px; }
.ma-tc__b > .ma-tc__m + .ma-tc__or, .ma-tc__b > .ma-tc__t + .ma-tc__or { margin-top: 14px; }
.ma-tc__or::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgba(16, 16, 20, .07); }
.ma-tc__th { flex: 0 0 auto; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #f3f2f6 center / cover no-repeat; }
.ma-tc__th .ma-emo { font-size: 16px; }
.ma-tc__or span { flex: 1 1 auto; min-width: 0; font-size: 13.5px; line-height: 1.3; color: #6b6a72; }
.ma-tc__or b { flex: 0 0 auto; font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ma-tc__all { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 38px; margin-top: 10px; padding: 0 10px 0 13px; border: 0; border-radius: 12px; background: #f4f3f7; font: inherit; font-size: 13.5px; font-weight: 600; color: #36353b; cursor: pointer; }
.ma-tc__b > .ma-tc__m + .ma-tc__all, .ma-tc__b > .ma-tc__t + .ma-tc__all { margin-top: auto; }
.ma-tc__all svg { width: 15px; height: 15px; color: #a3a2aa; }
/* «Это же блюдо, но легче» — совет по составу (карточка блюда): что поменять, почему, эффект */
.ma-tc--in .ma-tc__ph { height: 112px; }
.ma-tc__ch { display: block; margin-top: 6px; font-size: 13.5px; line-height: 1.32; color: #36353b; font-variant-numeric: tabular-nums; }
.ma-tc__why { display: block; margin-top: 6px; font-size: 13.5px; line-height: 1.38; color: #8b8a92; text-wrap: pretty; }
.ma-tc__st { display: flex; align-items: center; gap: 5px; margin-top: 10px; font-size: 13px; font-weight: 600; color: #a06800; }
.ma-tc__st svg { width: 15px; height: 15px; fill: #ffb400; }
.ma-tc--in .ma-tc__or { margin-top: 12px; }
.ma-lt-h { margin: 22px 0 0; font-size: 15px; font-weight: 600; letter-spacing: -.2px; color: #36353b; }
.ma-tc-rail--sk { pointer-events: none; }
/* 19.10: карточка-совет, пока пишется, — белая карточка той же формы с болванками внутри (RF.wait), а не серый блок */
.ma-tc--sk { display: flex; flex-direction: column; }
.ma-tc-sk__b { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px 18px; }
.ma-tc-sk__b .rf-sk--lines { gap: 8px; }
/* «Похожее, но легче»: плитки других блюд того же приёма и формата; нажатие раскрывает состав */
.ma-lt-sub { margin: 4px 0 0; font-size: 13.5px; line-height: 1.38; color: #8b8a92; }
.ma-sim-rail { display: flex; gap: 10px; margin: 12px -20px 0; padding: 4px 20px 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 20px; scrollbar-width: none; align-items: flex-start; }
.ma-sim-rail::-webkit-scrollbar { display: none; }
.ma-sim { flex: 0 0 172px; scroll-snap-align: start; display: flex; flex-direction: column; padding: 0; border: 0; border-radius: 20px; background: #fff; overflow: hidden; text-align: left; font: inherit; color: inherit; cursor: pointer;
  box-shadow: 0 0 0 1px rgba(16, 16, 20, .06), 0 6px 18px rgba(16, 16, 20, .06); }
.ma-sim__ph { display: grid; place-items: center; height: 112px; background: #f3f2f6 center / cover no-repeat; }
.ma-sim__ph .ma-emo { font-size: 44px; }
.ma-sim__b { display: flex; flex-direction: column; padding: 10px 12px 12px; }
.ma-sim__t { font-size: 14.5px; font-weight: 600; line-height: 1.28; letter-spacing: -.2px; }
.ma-sim__k { margin-top: 6px; font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ma-sim__k em { margin-left: 4px; font-style: normal; font-weight: 500; color: #4b3bff; }
.ma-sim__m { margin-top: 2px; font-size: 12.5px; color: #8b8a92; font-variant-numeric: tabular-nums; }
.ma-sim__in { display: none; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(16, 16, 20, .07); font-size: 12.5px; line-height: 1.45; color: #4a4950; }
.ma-sim.on .ma-sim__in { display: block; }
.ma-ltsh .ma-sim { animation: maUp .5s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.7s + var(--i) * .07s); }
.ma-ltsh .ma-lt-feed--still .ma-sim { animation: none; }
/* итог: «было → станет» калориями и звёздами тарелки */
.ma-ls { margin-top: 8px; padding: 16px 18px 15px; border-radius: 22px; background: #f6f5f9; }
.ma-ls__h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ma-ls__h span { font-size: 14px; color: #6b6a72; }
.ma-ls__h b { font-size: 26px; font-weight: 700; letter-spacing: -.9px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ma-ls__h s { margin-right: 4px; font-size: 17px; font-weight: 500; letter-spacing: -.3px; color: #a3a2aa; }
.ma-ls__h small { font-size: 14px; font-weight: 500; letter-spacing: 0; color: #8b8a92; }
.ma-ls__bar { position: relative; height: 8px; margin-top: 12px; border-radius: 4px; background: repeating-linear-gradient(-45deg, #e6e4ec 0 4px, #efedf3 4px 8px); overflow: hidden; }
.ma-ls__bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: linear-gradient(90deg, #ff8fc1, #b49bff 60%, #7fc8ff); }
.ma-ls__f { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; font-size: 13.5px; color: #6b6a72; font-variant-numeric: tabular-nums; }
.ma-ls__st { display: inline-flex; align-items: center; gap: 6px; }
.ma-ls__st > i { font-style: normal; color: #a3a2aa; }
.ma-ls__st .ma-pl { gap: 1px; }
.ma-pl--was { opacity: .55; }
.ma-ls__t { margin: 8px 0 0; font-size: 13px; line-height: 1.4; color: #6b6a72; }
.ma-ls__t.up b { color: #a06800; font-weight: 600; }
.ma-lt-next { display: flex; gap: 8px; margin: 18px -20px 0; padding: 0 20px 4px; overflow-x: auto; scrollbar-width: none; }
.ma-lt-next::-webkit-scrollbar { display: none; }
.ma-lt-next button { flex: 0 0 auto; padding: 10px 15px; border: 0; border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 1px rgba(16, 16, 20, .1); font: inherit; font-size: 14.5px; color: #36353b; white-space: nowrap; cursor: pointer; }
.ma-lt-in { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; height: 52px; margin: 2px 16px calc(var(--rf-safe-bottom, 0px) + 18px); padding: 0 6px 0 18px; border: 0; border-radius: 26px; background: #f2f2f5; font: inherit; font-size: 16px; color: #8b8a92; text-align: left; cursor: pointer; }
.ma-lt-in span { flex: 1 1 auto; }
.ma-lt-in i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #101014; color: #fff; }
.ma-lt-in i svg { width: 18px; height: 18px; }
@keyframes maUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.ma-ltsh .ma-lt-me { animation: maUp .4s .15s cubic-bezier(.2, .8, .2, 1) both; }
.ma-ltsh .ma-lt-a { animation: maUp .45s .4s cubic-bezier(.2, .8, .2, 1) both; }
.ma-ltsh .ma-tc { animation: maUp .5s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.6s + var(--i) * .09s); }
.ma-ltsh .ma-ls, .ma-ltsh .ma-lt-next { animation: maUp .45s .95s cubic-bezier(.2, .8, .2, 1) both; }
/* перерисовка ленты новыми данными при открытой шторке — без повторного «въезда» */
.ma-ltsh .ma-lt-feed--still .ma-lt-me, .ma-ltsh .ma-lt-feed--still .ma-lt-a, .ma-ltsh .ma-lt-feed--still .ma-tc,
.ma-ltsh .ma-lt-feed--still .ma-ls, .ma-ltsh .ma-lt-feed--still .ma-lt-next { animation: none; }
/* «Все замены» — экран в той же шторке */
.ma-alt { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; background: #fff; transform: translateX(102%); transition: transform .4s cubic-bezier(.2, .85, .25, 1); visibility: hidden; }
.ma-alt.on { transform: none; visibility: visible; }
.ma-alt__hd { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 16px 6px 12px; }
.ma-alt__hd b { font-size: 17px; font-weight: 600; letter-spacing: -.3px; text-align: center; }
.ma-alt__hd span, .ma-alt__bk { flex: 0 0 auto; width: 34px; height: 34px; }
.ma-alt__bk { display: grid; place-items: center; border: 0; border-radius: 50%; background: #f1f1f3; color: #101014; cursor: pointer; }
.ma-alt__bk svg { width: 18px; height: 18px; }
.ma-alt__sc { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 8px 20px calc(var(--rf-safe-bottom, 0px) + 30px); scrollbar-width: none; }
.ma-alt__sc::-webkit-scrollbar { display: none; }
.ma-alt__was { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: 18px; background: #f6f5f8; }
.ma-alt__was > i { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px; background: #eee center / cover no-repeat; }
.ma-alt__was span { display: flex; flex-direction: column; min-width: 0; }
.ma-alt__was small { font-size: 12px; color: #8b8a92; }
.ma-alt__was b { font-size: 15.5px; font-weight: 600; letter-spacing: -.2px; }
.ma-alt__was em { font-style: normal; font-size: 13px; color: #6b6a72; font-variant-numeric: tabular-nums; }
.ma-alt__seg { display: flex; gap: 6px; margin: 16px -20px 0; padding: 0 20px; overflow-x: auto; scrollbar-width: none; }
.ma-alt__seg::-webkit-scrollbar { display: none; }
.ma-alt__seg button { flex: 0 0 auto; height: 34px; padding: 0 14px; border: 0; border-radius: 17px; background: #f1f1f4; font: inherit; font-size: 14px; font-weight: 500; color: #36353b; cursor: pointer; }
.ma-alt__seg button.on { background: #101014; color: #fff; }
.ma-alt__best { margin-top: 14px; border-radius: 24px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px rgba(16, 16, 20, .06), 0 10px 26px rgba(16, 16, 20, .07); }
.ma-alt__ph { display: grid; place-items: center; height: 150px; background: #f3f2f6 center / cover no-repeat; }
.ma-alt__ph .ma-emo { font-size: 64px; }
.ma-alt__bb { padding: 14px 16px 16px; }
.ma-alt__bb > b { display: block; margin-top: 8px; font-size: 18px; font-weight: 650; letter-spacing: -.35px; line-height: 1.25; }
.ma-alt__bb > p { margin: 3px 0 0; font-size: 14px; line-height: 1.4; color: #6b6a72; }
.ma-alt__bb .ma-gain { margin-top: 10px; }
.ma-alt__tag { display: inline-flex; align-items: center; gap: 5px; margin-bottom: 6px; font-size: 12.5px; font-weight: 600; color: #5b45e0; }
.ma-alt__keep { display: flex; align-items: center; gap: 7px; height: 40px; margin-top: 14px; padding: 0 15px; border: 0; border-radius: 20px; background: #101014; color: #fff; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.ma-alt__keep svg { width: 16px; height: 16px; }
.ma-alt__keep.on { background: #f1eeff; color: #4b3bff; }
.ma-alt__h { margin: 24px 2px 4px; font-size: 15px; font-weight: 600; }
.ma-alt__r { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid rgba(16, 16, 20, .06); cursor: pointer; }
.ma-alt__r:last-child { border-bottom: 0; }
.ma-alt__th { flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: #f3f2f6 center / cover no-repeat; }
.ma-alt__th .ma-emo { font-size: 22px; }
.ma-alt__r > span { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ma-alt__r b { font-size: 15.5px; font-weight: 600; letter-spacing: -.2px; line-height: 1.25; }
.ma-alt__r small { font-size: 13px; color: #6b6a72; font-variant-numeric: tabular-nums; }
.ma-alt__r em { flex: 0 0 auto; display: flex; align-items: baseline; gap: 3px; font-style: normal; font-size: 17px; font-weight: 700; letter-spacing: -.4px; font-variant-numeric: tabular-nums; }
.ma-alt__r em small { font-size: 12.5px; font-weight: 500; letter-spacing: 0; }
.ma-alt__all { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 46px; margin-top: 10px; padding: 0 12px 0 14px; border: 0; border-radius: 14px; background: #f4f3f7; font: inherit; font-size: 14.5px; font-weight: 600; color: #36353b; cursor: pointer; }
.ma-alt__all svg { width: 16px; height: 16px; color: #a3a2aa; }
.ma-alt__note { margin: 18px 2px 0; font-size: 12.5px; line-height: 1.45; color: #8b8a92; }
@media (prefers-reduced-motion: reduce) {
  .ma-lt { animation: none; }
  .ma-ltsh .ma-lt-me, .ma-ltsh .ma-lt-a, .ma-ltsh .ma-tc, .ma-ltsh .ma-ls, .ma-ltsh .ma-lt-next { animation: none; }
  .ma-alt { transition: none; }
}
.ma-sum .ma-sum__h { justify-content: flex-start; gap: 8px; }
.ma-ltsh.ma-alt-on .xs-sheet__h { display: none; }
.ma-alt__hd { padding-top: 14px; }
/* 19.10: приём без единой звезды — три пустые звезды, рядом «0 из 3» и ниже за что звёзды; норма приёма
 * в граммах рядом с «×». */
.ma-pl0 { flex: 0 0 auto; font-size: 13px; font-weight: 600; line-height: 18px; color: #8b8a91; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ma-sum .ma-sum__z { display: block; margin-top: 8px; font-size: 13.5px; line-height: 1.4; color: #8b8a91; text-wrap: pretty; }
.ma-norm { margin: -2px 0 10px; font-size: 13.5px; line-height: 1.4; color: #5f5e66; font-variant-numeric: tabular-nums; }
.ma-norm b { font-weight: 600; color: #101014; }
.ma-bal .dy-bal__r > span { display: flex; flex-direction: column; line-height: 1.25; }
.ma-bal .dy-bal__r > span small { font-size: 11.5px; color: #8b8a91; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* 19.10: состояния ожидания разбора приёма — общий компонент RF.wait (00-core/19-wait.js, styles/21-wait.css) */
.ma-sum--sk { padding-bottom: 2px; }
.ma-sum--sk .ma-sum__skl { margin-top: 14px; gap: 11px; }
.ma-sum--sk .ma-sum__skl .rf-sk__l { height: 13px; }
.ma-ansk .mc-meal { border-bottom-color: rgba(12, 14, 18, .06); }
.ma-ansk__ph { flex: 0 0 56px; }
.ma-ansk__hd { flex: 1 1 0; min-width: 0; }
.ma-ansk .mc-a--main > .rf-wait { margin-top: 20px; }
.ma-ansk__t { margin-top: 16px; }
.ma-ansk .mc-a--main > .rf-sk--lines { margin-top: 16px; }
.ma-ansk__mk { margin-top: 20px; }
.ma-ansk__row { margin-top: 14px; }
.ma-sk-text { margin-top: 12px; }
.ma-sk-text .rf-sk--lines { margin-top: 14px; }
.ma-lt-a.ma-lt-wait { margin-top: 20px; }
.ma-lt-wait .rf-wait { font-size: 15.5px; color: #55545b; align-items: flex-start; }
.ma-lt-wait .rf-wait .rem { margin-top: -2px; }
.ma-lt-simsk { margin-top: 18px; }
.ma-lt-simsk .rf-sk--tiles { margin-top: 14px; }
.ma-ch__a--wait { padding: 12px 15px; }
.ma-ch__a--wait .rf-wait { font-size: 14.5px; }

/* ---- src/styles/54-rest-day.css ---- */
/* «Под остаток дня» (20-screens/rest-day.js) — макет «Еда v7–v8», ок владельца 11.10.
 * Остаток с кольцами, «Обед · Ужин», «Дома · Ресторан · Готовое», чипы, главная тарелка большой картой, полки. */
.rdy-scr { background: #f3f3f5; }
.rdy { padding: 0 0 calc(var(--rf-safe-bottom, 0px) + 40px); }
/* остаток дня */
.rdy-bd { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 6px 16px 0; padding: 16px 16px 14px 18px; border-radius: 24px; background: #fff; box-shadow: 0 1px 2px rgba(16, 16, 20, .04), 0 8px 24px rgba(16, 16, 20, .04); }
.rdy-bd__l { display: flex; flex-direction: column; min-width: 0; }
.rdy-bd__l small { font-size: 12.5px; color: #8b8a92; }
.rdy-bd__l b { display: flex; align-items: baseline; gap: 4px; font-size: 34px; font-weight: 700; letter-spacing: -1.3px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.rdy-bd__l b span { font-size: 15px; font-weight: 500; letter-spacing: 0; color: #8b8a92; }
.rdy-bd__l em { font-style: normal; font-size: 12.5px; color: #a3a2aa; }
.rdy-bd__r { display: flex; gap: 6px; }
.rdy-g { display: flex; flex-direction: column; align-items: center; width: 56px; }
.rdy-g b { margin-top: 3px; font-size: 12px; font-weight: 650; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rdy-g b.over { color: #b5651d; }
.rdy-g small { font-size: 11px; color: #8b8a92; }
/* приём и режим */
.rdy-hd { padding: 20px 20px 0; }
.rdy-tabs { display: flex; gap: 18px; }
.rdy-tabs button { padding: 0; border: 0; background: none; font: inherit; font-size: 30px; font-weight: 700; letter-spacing: -1px; line-height: 1.15; color: #c3c2c9; cursor: pointer; }
.rdy-tabs button.on { color: #101014; }
.rdy-sub { margin: 4px 0 0; font-size: 15px; color: #6b6a72; font-variant-numeric: tabular-nums; }
.rdy-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; height: 38px; margin: 18px 16px 0; padding: 3px; border-radius: 13px; background: #e7e7ec; }
.rdy-seg button { border: 0; border-radius: 10px; background: none; font: inherit; font-size: 14.5px; font-weight: 600; color: #4a4950; cursor: pointer; }
.rdy-seg button.on { background: #fff; color: #101014; box-shadow: 0 1px 2px rgba(16, 16, 20, .08), 0 3px 8px rgba(16, 16, 20, .06); }
.rdy-chips { display: flex; gap: 8px; margin-top: 12px; padding: 0 16px 2px; overflow-x: auto; scrollbar-width: none; }
.rdy-chips:empty { display: none; }
.rdy-chips::-webkit-scrollbar { display: none; }
.rdy-chips button { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px; border: 0; border-radius: 17px; background: #fff; box-shadow: inset 0 0 0 1px rgba(16, 16, 20, .08); font: inherit; font-size: 13.5px; font-weight: 500; color: #36353b; cursor: pointer; white-space: nowrap; }
.rdy-chips button.on { background: #101014; color: #fff; box-shadow: none; }
.rdy-chips button svg { width: 15px; height: 15px; }
.rdy-chips button em { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #f0eff4; color: #36353b; font-style: normal; font-size: 11px; font-weight: 600; }
.rdy-chips button.on em { background: rgba(255, 255, 255, .2); color: #fff; }
.rdy-pn { display: flex; align-items: center; gap: 8px; margin: 10px 16px 0; padding: 10px 14px; border-radius: 14px; background: #fff; font-size: 13.5px; color: #36353b; cursor: pointer; }
.rdy-pn svg { flex: 0 0 auto; width: 16px; height: 16px; color: #6b6a72; }
.rdy-pn span { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rdy-pn b { flex: 0 0 auto; font-weight: 600; color: #5b45e0; }
/* главная тарелка */
.rdy-hero { position: relative; isolation: isolate; height: 372px; margin: 14px 16px 0; border-radius: 28px; overflow: hidden; color: #fff; cursor: pointer; box-shadow: 0 14px 34px rgba(16, 16, 20, .14); transition: transform .25s; }
.rdy-hero:active { transform: scale(.985); }
.rdy-hero__ph { position: absolute; inset: 0; z-index: -1; display: grid; place-items: center; background: #e9e8ee center / cover no-repeat; }
.rdy-hero__ph .rdy-emo { font-size: 96px; }
.rdy-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, .18) 0%, rgba(0, 0, 0, 0) 26%, rgba(0, 0, 0, 0) 48%, rgba(0, 0, 0, .7) 100%); }
.rdy-hero__tag { position: absolute; left: 14px; top: 14px; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px 0 10px; border-radius: 15px; background: rgba(255, 255, 255, .82); -webkit-backdrop-filter: blur(16px) saturate(1.6); backdrop-filter: blur(16px) saturate(1.6); color: #101014; font-size: 13px; font-weight: 600; }
.rdy-hero__tag svg { width: 14px; height: 14px; color: #7b4dff; }
.rdy-hero__ov { position: absolute; left: 20px; right: 20px; bottom: 20px; }
.rdy-hero__ov b { display: block; font-size: 24px; font-weight: 700; letter-spacing: -.6px; line-height: 1.1; text-wrap: balance; }
.rdy-hero__ov span { display: block; margin-top: 10px; font-size: 14.5px; color: rgba(255, 255, 255, .86); font-variant-numeric: tabular-nums; }
.rdy-why { margin: 12px 22px 0; font-size: 14.5px; line-height: 1.4; color: #6b6a72; }
/* «Сбалансируйте» под главной тарелкой слабее ★★★: чем дополнить и итог вместе (combo с сервера) */
.rdy-cb { display: flex; align-items: center; gap: 12px; margin: 12px 16px 0; padding: 12px 14px; border-radius: 18px; background: #eef7ef; cursor: pointer; }
.rdy-cb__ic { flex: 0 0 auto; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: #fff; font-style: normal; font-size: 20px; line-height: 1; }
.rdy-cb > span { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rdy-cb > span b { font-size: 14px; font-weight: 600; line-height: 1.3; color: #101014; }
.rdy-cb > span small { font-size: 12.5px; line-height: 1.35; color: #4f6b53; font-variant-numeric: tabular-nums; }
/* полки */
.rdy-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 28px 20px 0; }
.rdy-h b { font-size: 21px; font-weight: 700; letter-spacing: -.5px; }
.rdy-h a { flex: 0 0 auto; font-size: 15px; font-weight: 500; color: #8b8a92; cursor: pointer; }
.rdy-rail { display: flex; gap: 12px; margin-top: 12px; padding: 0 20px 8px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 20px; scrollbar-width: none; }
.rdy-rail::-webkit-scrollbar { display: none; }
.rdy-c { flex: 0 0 150px; scroll-snap-align: start; cursor: pointer; }
.rdy-c__ph { position: relative; display: grid; place-items: center; height: 150px; border-radius: 22px; background: #e9e8ee center / cover no-repeat; overflow: hidden; }
.rdy-c__ph .rdy-emo { font-size: 54px; }
.rdy-c__tag { position: absolute; left: 8px; top: 8px; height: 22px; padding: 0 8px; border-radius: 11px; background: rgba(255, 255, 255, .92); font-size: 11.5px; font-weight: 600; line-height: 22px; color: #9a5b00; }
.rdy-c > b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 9px; font-size: 14.5px; font-weight: 600; line-height: 1.25; letter-spacing: -.2px; }
.rdy-c > span { display: block; margin-top: 3px; font-size: 13.5px; color: #8b8a92; font-variant-numeric: tabular-nums; }
.rdy-emo { font-style: normal; line-height: 1; }
.rdy-note { margin: 18px 22px 0; font-size: 12.5px; line-height: 1.45; color: #8b8a92; }
.rdy-empty { margin: 18px 16px 0; padding: 22px 20px; border-radius: 22px; background: #fff; text-align: center; }
.rdy-empty b { display: block; font-size: 16px; font-weight: 600; }
.rdy-empty p { margin: 6px 0 0; font-size: 14px; color: #6b6a72; }
.rdy-empty button { height: 38px; margin-top: 12px; padding: 0 16px; border: 0; border-radius: 19px; background: #101014; color: #fff; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.rdy-sk { display: flex; flex-direction: column; gap: 12px; margin: 14px 16px 0; }
.rdy-sk .rf-sk { --sk-a: #e6e5eb; --sk-b: #f3f2f6; }   /* фон экрана серый — болванки на тон темнее */
.rdy-sk__h { margin-top: 12px; }
.rdy-sk__h .rf-sk__l { height: 16px; }
.rdy-sk .rf-sk--tiles { margin-right: -16px; }
/* шторка товара или блюда */
.rdy-sh__ph { display: grid; place-items: center; height: 180px; margin: 4px 0 0; border-radius: 22px; background: #f3f2f6 center / cover no-repeat; }
.rdy-sh__ph .rdy-emo { font-size: 72px; }
.rdy-k { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin-top: 16px; }
.rdy-k b { font-size: 36px; font-weight: 700; letter-spacing: -1.3px; line-height: 1; font-variant-numeric: tabular-nums; }
.rdy-k span { font-size: 14.5px; color: #6b6a72; }
.rdy-m { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.rdy-m span { display: inline-flex; align-items: center; height: 28px; padding: 0 11px; border-radius: 14px; background: #f3f3f6; font-size: 13.5px; font-weight: 500; color: #36353b; font-variant-numeric: tabular-nums; }
.rdy-tips { margin-top: 16px; padding: 14px 16px; border-radius: 18px; background: #f6f6f8; }
.rdy-tips small { display: block; font-size: 13px; font-weight: 500; color: #8b8a92; }
.rdy-tips p { margin: 6px 0 0; font-size: 15.5px; line-height: 1.4; color: #101014; }
.rdy-sh__n { margin: 14px 2px 0; font-size: 12.5px; line-height: 1.45; color: #8b8a92; }
/* баннер на странице приёма */
.rdy-bn { padding-top: 6px; padding-bottom: 6px; }
.rdy-bn__b { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 14px 12px 12px; border: 0; border-radius: 22px; background: #f4f4f6; font: inherit; color: inherit; text-align: left; cursor: pointer; transition: transform .2s; }
.rdy-bn__b:active { transform: scale(.985); }
.rdy-bn__st { position: relative; flex: 0 0 auto; display: flex; width: 78px; height: 56px; }
.rdy-bn__st:empty { display: none; }
.rdy-bn__st i { position: absolute; top: 0; width: 56px; height: 56px; border-radius: 16px; background: #e9e9ee center / cover no-repeat; box-shadow: 0 0 0 2px #f4f4f6; }
.rdy-bn__st i:nth-child(1) { left: 0; z-index: 3; }
.rdy-bn__st i:nth-child(2) { left: 12px; z-index: 2; transform: scale(.92); }
.rdy-bn__st i:nth-child(3) { left: 22px; z-index: 1; transform: scale(.84); }
.rdy-bn__b2 { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rdy-bn__b2 small { font-size: 12.5px; color: #8b8a92; font-variant-numeric: tabular-nums; }
.rdy-bn__b2 b { font-size: 16px; font-weight: 600; letter-spacing: -.25px; }
.rdy-bn__b2 > span { font-size: 13px; color: #6b6a72; }
.rdy-bn__go { display: grid; place-items: center; color: #b4b3ba; }
.rdy-bn__go svg { width: 17px; height: 17px; }

/* ---- src/styles/54-rest-prefs.css ---- */
/* «Где и как вы едите» — лист настроек ⚙ на «Под остаток дня» (макеты «Остаток дня v3» 10.10 и
 * «Дневник и план v12» 11.10: .rd-sec / .rd-row / .rd-mini / .rd-stores / .rd-chips). */
.rdy-gear svg { width: 20px; height: 20px; }
.rdp { margin-top: -6px; }
.rdp-sec { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(16, 16, 20, .08); }
.rdp-sec:first-child { margin-top: 2px; }
.xs-sheet.rdp-sh .xs-sheet__s { color: #101014; font-size: 15px; line-height: 1.4; }
.rdp-sec > b { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: #101014; margin: 0 2px 10px; }
.rdp-sec > b i { width: 26px; height: 26px; border-radius: 8px; background: #f1f1f3; display: grid; place-items: center; font-style: normal; font-size: 13px; }
.rdp-sec > b i svg { width: 15px; height: 15px; }
.rdp-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 0; }
.rdp-row > span { font-size: 14.5px; color: #101014; }
.rdp-mini { display: flex; background: #f1f1f3; border-radius: 100px; padding: 3px; }
.rdp-mini button { border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 600; color: #6b6a72; padding: 6px 10px; border-radius: 100px; cursor: pointer; }
.rdp-mini button.on { background: #fff; color: #101014; box-shadow: rgba(20, 16, 26, .08) 0 3px 8px; }
.rdp-stores { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rdp-stores button { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 34px 10px 10px; border: 0; border-radius: 16px; background: #f3f3f5; font: inherit; text-align: left; cursor: pointer; position: relative; color: #101014; }
.rdp-stores button b { font-size: 14px; font-weight: 600; }
.rdp-stores button > .ck { position: absolute; right: 10px; top: 50%; margin-top: -10px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: transparent; box-shadow: inset 0 0 0 1.5px #d4d4da; }
.rdp-stores button > .ck svg { width: 12px; height: 12px; }
.rdp-stores button.on { background: #fff; box-shadow: rgba(20, 16, 26, .08) 0 4px 12px; }
.rdp-stores button.on > .ck { background: #101014; color: #fff; box-shadow: none; }
.rdp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rdp-chips span, .rdp-chips button { height: 34px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; border: 0; border-radius: 100px; background: #f1f1f3; font: inherit; font-size: 13.5px; font-weight: 600; color: #36353b; cursor: pointer; }
.rdp-chips .on { background: #101014; color: #fff; }
.rdp-chips .fx { cursor: default; }
.rdp-chips .add { background: none; box-shadow: inset 0 0 0 1.5px #e3e3e8; color: #8b8a92; }
.rdp-in { display: flex; gap: 8px; margin-top: 10px; }
.rdp-in input { flex: 1 1 auto; min-width: 0; height: 40px; padding: 0 14px; border: 0; border-radius: 12px; background: #f1f1f3; font: inherit; font-size: 16px; color: #101014; }
.rdp-in button { flex: 0 0 auto; height: 40px; padding: 0 14px; border: 0; border-radius: 12px; background: #101014; color: #fff; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.rdp-note { margin: 8px 2px 0; font-size: 12.5px; line-height: 1.4; color: #8b8a92; }

/* тост «Запомнили: обед в будни — в ресторане · Изменить» (RF.toast с действием) */
.rf-toast.has-act { display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; pointer-events: auto; }
.rf-toast.has-act:not(.on) { pointer-events: none; }
.rf-toast__a { flex: 0 0 auto; border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: #c9f27b; white-space: nowrap; cursor: pointer; }

/* ---- src/styles/55-ai-plan.css ---- */
/* ИИ-план клиента — экраны ИИ-плана v10 и входы в дневнике v12 (макет «Дневник и план v12», владелец 11.10–15.10).
 * Правила перенесены из макета (phone.html) один в один; классы шторки сужены `.ap-sh` (общие имена прототипа
 * — .pb, .wg, .dm, .co — иначе легли бы на чужие экраны). Карточки входа в дневнике — .pf-ai («Соберу меню…»,
 * «Сегодня без плана») и .pf-mini (строка внизу дня). Код — 20-screens/diary-aiplan.js. */
@property --ap-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes apRot { to { --ap-a: 360deg; } }
@keyframes apUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes apSpin { to { transform: rotate(360deg); } }
@keyframes apIn { from { opacity: 0; transform: scale(.6); } }
@keyframes apSk { to { background-position: -200% 0; } }

/* шторка во весь рост, как «Спросить про этот приём»: лента прокручивается, низ — кнопка и поле */
.xs-sheet.ap-sh { top: calc(var(--rf-safe-top) + 40px); left: 0; right: 0; bottom: 0; max-height: none; border-radius: 28px 28px 0 0; }
.ap-sh .xs-sheet__h { padding-bottom: 6px; }
.ap-sh .xs-sheet__t { font-size: 17px; font-weight: 600; letter-spacing: -.3px; }
.ap-sh .xs-sheet__b { position: relative; display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.ap-sh .xs-sheet__f { display: none; }

.ap-sh .ai-x { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: #f1f1f3; color: #101014; cursor: pointer; }
.ap-sh .ai-feed { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 10px 20px 24px; scrollbar-width: none; }
.ap-sh .ai-feed::-webkit-scrollbar { display: none; }
.ap-sh .ai-me { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.ap-sh .ai-q { max-width: 78%; padding: 10px 15px; border-radius: 20px 20px 6px 20px; background: #f1f1f4; font-size: 16px; line-height: 1.35; color: #101014; }
.ap-sh .ai-a { display: flex; gap: 10px; margin-top: 18px; }
.ap-sh .ai-a__sp { flex: 0 0 auto; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #f6f3fb; }
.ap-sh .ai-a p { margin: 3px 0 0; font-size: 17px; line-height: 1.42; letter-spacing: -.25px; color: #101014; text-wrap: pretty; }
.ap-sh .ai-sum { margin-top: 8px; padding: 16px 18px 15px; border-radius: 22px; background: #f6f5f9; }
.ap-sh .ai-next { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 18px; }
.ap-sh .ai-next button { padding: 10px 15px; border: 0; border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 1px rgba(16, 16, 20, .1); font: inherit; font-size: 14.5px; color: #36353b; cursor: pointer; }
.ap-sh .ai-input { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; height: 52px; margin: 0 16px 26px; padding: 0 6px 0 18px; border-radius: 26px; background: #f2f2f5; font-size: 16px; color: #8b8a92; }
.ap-sh .ai-input span { flex: 1 1 auto; }
.ap-sh .ai-input i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #101014; color: #fff; }
.ap-sh .ai-me { animation: apUp .4s .15s cubic-bezier(.2, .8, .2, 1) both; }
.ap-sh .ai-a { animation: apUp .45s .4s cubic-bezier(.2, .8, .2, 1) both; }
.ap-sh .ai-sum, .ap-sh .ai-next { animation: apUp .45s .95s cubic-bezier(.2, .8, .2, 1) both; }
.ap-sh .ai-feed { -webkit-mask-image: linear-gradient(#000 calc(100% - 26px), transparent); mask-image: linear-gradient(#000 calc(100% - 26px), transparent); }
.ap-sh .ai-input { margin-top: 2px; }
.ap-sh .ai-feed { -webkit-mask-image: linear-gradient(transparent 0, #000 16px, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(transparent 0, #000 16px, #000 calc(100% - 26px), transparent); }
.ap-sh .ai-next { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; margin: 18px -20px 0; padding: 0 20px 4px; scrollbar-width: none; }
.ap-sh .ai-next::-webkit-scrollbar { display: none; }
.ap-sh .ai-next button { flex: 0 0 auto; white-space: nowrap; }
.ap-sh .pn-c { display: flex; flex-wrap: wrap; gap: 7px; }
.ap-sh .pn-c span { display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 13px; border-radius: 17px; background: #f3f3f6; font-size: 14px; color: #36353b; cursor: pointer; }
.ap-sh .pn-c span.on { background: #101014; color: #fff; }
.ap-sh .al-seg { display: flex; gap: 2px; margin: 12px 16px 0; padding: 3px; border-radius: 14px; background: #e6e6ea; }
.ap-sh .al-seg button { flex: 1 1 0; height: 34px; border: 0; border-radius: 11px; background: transparent; font: inherit; font-size: 13.5px; font-weight: 600; color: #6b6a72; cursor: pointer; }
.ap-sh .al-seg button.on { background: #fff; color: #101014; box-shadow: 0 1px 3px rgba(16, 16, 20, .1); }
.pf-ai { position: relative; isolation: isolate; padding: 18px 18px 18px; border-radius: 26px; overflow: hidden; color: #fff; background: #141019; }
.pf-ai__bg { position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 90% at 0% 0%, rgba(255, 92, 160, .5), transparent 55%), radial-gradient(90% 80% at 100% 100%, rgba(110, 120, 255, .55), transparent 60%), radial-gradient(70% 60% at 85% 10%, rgba(255, 170, 80, .35), transparent 60%); }
.pf-ai__ph { position: absolute; right: 16px; top: 16px; width: 92px; height: 44px; }
.pf-ai__ph i { position: absolute; top: 0; width: 44px; height: 44px; border-radius: 50%; background: #333 center / cover no-repeat; box-shadow: 0 0 0 2.5px #1d1824; }
.pf-ai__ph i:nth-child(1) { right: 48px; } .pf-ai__ph i:nth-child(2) { right: 24px; } .pf-ai__ph i:nth-child(3) { right: 0; }
.pf-ai__k { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px 0 8px; border-radius: 12px; background: rgba(255, 255, 255, .14); font-size: 12px; font-weight: 600; }
.pf-ai > b { display: block; margin-top: 14px; font-size: 22px; font-weight: 700; line-height: 1.18; letter-spacing: -.6px; text-wrap: balance; }
.pf-ai > p { margin: 6px 0 0; font-size: 14px; line-height: 1.42; color: rgba(255, 255, 255, .78); }
.pf-ai__a { display: flex; gap: 8px; margin-top: 16px; }
.pf-ai__a button { display: inline-flex; align-items: center; height: 42px; padding: 0 18px; border: 0; border-radius: 21px; background: #fff; color: #101014; font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; }
.pf-ai__a button.g { background: rgba(255, 255, 255, .14); color: #fff; }
.ap-sh .pbf { padding-bottom: 20px; }
.ap-sh .ai-a p b { font-weight: 650; }
.ap-sh .pb { margin-top: 16px; padding: 4px 4px 4px; border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px rgba(16, 16, 20, .06), 0 8px 22px rgba(16, 16, 20, .06); }
.ap-sh .pb__h { display: flex; align-items: baseline; justify-content: space-between; padding: 12px 14px 6px; }
.ap-sh .pb__h b { font-size: 16px; font-weight: 700; letter-spacing: -.3px; }
.ap-sh .pb__h small { font-size: 12.5px; color: #a3a2aa; }
.ap-sh .pb__r { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px 10px 10px; border: 0; border-radius: 18px; background: transparent; font: inherit; text-align: left; color: #101014; cursor: pointer; }
.ap-sh .pb__r + .pb__r, .ap-sh .pb-x + .pb__r { box-shadow: 0 -1px 0 rgba(16, 16, 20, .05); border-radius: 0 0 18px 18px; }
.ap-sh .pb__r.on { background: #f6f5f9; border-radius: 18px 18px 0 0; box-shadow: none; }
.ap-sh .pb__ic { flex: 0 0 auto; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: #f4f3f7; color: #36353b; font-style: normal; }
.ap-sh .pb__rub { font-size: 18px; font-weight: 700; }
.ap-sh .pb__r > span { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ap-sh .pb__r small { font-size: 12px; color: #8b8a92; }
.ap-sh .pb__r b { font-size: 14.5px; font-weight: 600; line-height: 1.3; letter-spacing: -.2px; }
.ap-sh .pb__r > svg { flex: 0 0 auto; width: 16px; height: 16px; color: #c2c1c8; }
.ap-sh .pb-x { margin: 0 0 4px; padding: 6px 16px 16px; border-radius: 0 0 18px 18px; background: #f6f5f9; }
.ap-sh .pb-x__v { display: flex; align-items: baseline; gap: 8px; }
.ap-sh .pb-x__v b { font-size: 34px; font-weight: 700; letter-spacing: -1.3px; font-variant-numeric: tabular-nums; background: linear-gradient(100deg, #101014 40%, #6a4fd8 120%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ap-sh .pb-x__v small { font-size: 13.5px; color: #6b6a72; }
.ap-sh .pb-n { margin: 12px 0 0; font-size: 12.5px; line-height: 1.45; color: #8b8a92; }
.ap-sh .pb-hint { margin: 18px 2px 0; font-size: 14px; color: #6b6a72; }
.ap-sh .pb-next { margin-top: 10px !important; }
.ap-sh .pb-foot { flex: 0 0 auto; padding: 8px 16px 0; background: #fff; }
.ap-sh .pb-foot .ai-input { margin: 10px 0 26px; }
.ap-sh .pb-go { position: relative; display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; height: 56px; border: 0; border-radius: 28px; background: #101014; color: #fff; font: inherit; font-size: 16.5px; font-weight: 600; letter-spacing: -.2px; cursor: pointer; box-shadow: 0 10px 26px rgba(110, 90, 255, .28), -8px 4px 20px rgba(255, 111, 174, .2); }
.ap-sh .pb-go i { display: grid; place-items: center; }
.ap-sh .pb-spin svg { animation: apSpin 2.4s linear infinite; }
.ap-sh .pg__st { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ap-sh .pg__st li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.38; color: #a3a2aa; }
.ap-sh .pg__st li.ok { color: #36353b; }
.ap-sh .pg__st li.on { color: #101014; font-weight: 600; }
.ap-sh .pg__st li > svg, .ap-sh .pg__st li > i { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; }
.ap-sh .pg__st li.ok > svg { padding: 3px; border-radius: 50%; background: #101014; color: #fff; }
.ap-sh .pg__sp { border-radius: 50%; border: 2px solid #e3e1ea; border-top-color: #7b4dff; animation: apSpin .9s linear infinite; }
.ap-sh .pg__o { border-radius: 50%; border: 1.5px dashed #d0cfd6; }
.ap-sh .pb-sum { margin-top: 6px !important; }
.ap-sh .pb-sum__g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.ap-sh .pb-sum__g span { display: flex; flex-direction: column; }
.ap-sh .pb-sum__g b { font-size: 17px; font-weight: 700; letter-spacing: -.4px; font-variant-numeric: tabular-nums; }
.ap-sh .pb-sum__g small { font-size: 12px; color: #8b8a92; }
.ap-sh .pb-did { margin-top: 14px; padding: 4px 2px 0; }
.ap-sh .pb-did > b { display: block; font-size: 15px; font-weight: 700; letter-spacing: -.2px; }
.ap-sh .pb-did__r { display: flex; gap: 10px; margin-top: 10px; font-size: 14px; line-height: 1.4; color: #6b6a72; }
.ap-sh .pb-did__r i { flex: 0 0 auto; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 9px; background: #f4f3f7; color: #5a4ea8; }
.ap-sh .pb-did__r b { font-weight: 600; color: #101014; }
.ap-sh .pb-act { display: flex; gap: 8px; margin-top: 18px; }
.ap-sh .pb-act button { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 48px; border: 0; border-radius: 24px; background: #fff; box-shadow: inset 0 0 0 1px rgba(16, 16, 20, .12); font: inherit; font-size: 14.5px; font-weight: 600; color: #101014; cursor: pointer; white-space: nowrap; }
.ap-sh .pb-act button.k { background: #101014; color: #fff; box-shadow: none; }
.ap-sh .pb-me2 { margin-top: 22px; }
.ap-sh .df { margin-top: 14px; padding: 6px 16px 16px; border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px rgba(16, 16, 20, .06), 0 8px 22px rgba(16, 16, 20, .07); }
.ap-sh .df { animation: apUp .5s .3s cubic-bezier(.2, .8, .2, 1) both; }
.ap-sh .df__r { padding: 12px 0; border-bottom: 1px solid rgba(16, 16, 20, .06); }
.ap-sh .df__r > small { font-size: 12px; font-weight: 600; color: #8b8a92; text-transform: uppercase; letter-spacing: .04em; }
.ap-sh .df__x { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 13.5px; color: #a3a2aa; }
.ap-sh .df__x i { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; background: #eee center / cover no-repeat; filter: grayscale(1); opacity: .6; }
.ap-sh .df__y { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.ap-sh .df__y i { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 13px; background: #eee center / cover no-repeat; }
.ap-sh .df__y span { display: flex; flex-direction: column; min-width: 0; }
.ap-sh .df__y b { font-size: 14.5px; font-weight: 600; letter-spacing: -.2px; }
.ap-sh .df__y small { font-size: 12.5px; color: #6b6a72; }
.ap-sh .df__t { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px 0 2px; }
.ap-sh .df__t span { display: flex; flex-direction: column; font-size: 11.5px; color: #8b8a92; }
.ap-sh .df__t b { margin-top: 2px; font-size: 13.5px; font-weight: 600; color: #101014; font-variant-numeric: tabular-nums; }
.ap-sh .df__a { display: flex; gap: 8px; margin-top: 12px; }
.ap-sh .df__a button { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 44px; border: 0; border-radius: 22px; background: #101014; color: #fff; font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; }
.ap-sh .df__a button.g { background: #f3f3f6; color: #101014; }
.ap-sh .src { display: inline-flex; align-items: center; gap: 4px; height: 18px; margin-left: 6px; padding: 0 7px; border-radius: 9px; font-style: normal; font-size: 10.5px; font-weight: 600; letter-spacing: 0; vertical-align: 1px; white-space: nowrap; }
.ap-sh .src--c { background: #ffe9f2; color: #b8306f; }
.ap-sh .src--a { background: #e8f0fc; color: #2f5fa8; }
.ap-sh .src--d { background: #e8f5e3; color: #3a7a26; }
.ap-sh .src--y { background: #f0f0f3; color: #6b6a72; }
.ap-sh .src--t { background: #fff1de; color: #a3600b; }
.ap-sh .src--p { background: #e4f4f1; color: #1f7a6a; }
.ap-sh .src__av { display: inline-grid; place-items: center; width: 13px; height: 13px; margin-left: -4px; border-radius: 50%; background: linear-gradient(135deg, #ff7ab6, #a58bff); color: #fff; font-style: normal; font-size: 8px; font-weight: 700; }
.ap-sh .pr10 { align-items: flex-start; }
.ap-sh .pr10 > .pb__ic { margin-top: 2px; }
.ap-sh .pr10 > svg { margin-top: 12px; }
.ap-sh .pr10 small { display: flex; align-items: center; flex-wrap: wrap; row-gap: 3px; }
.ap-sh .pr10__s { padding: 14px 14px 4px; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #a3a2aa; }
.ap-sh .pr10__s + .pb__r { box-shadow: none; }
.ap-sh .pr10.on { margin-top: 2px; }
.ap-sh .wdots { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; }
.ap-sh .wdots > span { display: flex; gap: 3px; }
.ap-sh .wdots i { width: 14px; height: 6px; border-radius: 3px; }
.ap-sh .wt--home { background: #e9e8ee; color: #4a4950; }
.ap-sh .wt--prep { background: #e4f4f1; color: #1f7a6a; }
.ap-sh .wt--ready { background: #e8f0fc; color: #2f5fa8; }
.ap-sh .wt--rest { background: #f1ecff; color: #5b45e0; }
.ap-sh .wt--guest { background: #ffe9f2; color: #b8306f; }
.ap-sh .wt--skip { background: #fff; color: #a3a2aa; box-shadow: inset 0 0 0 1px #e3e2e8; }
.ap-sh .wt--train { background: #fff1de; color: #a3600b; }
.ap-sh .wdots i.wt--home { background: #d9d8df; } .wdots i.wt--prep { background: #7cc9b9; } .wdots i.wt--ready { background: #8fb3ea; } .wdots i.wt--rest { background: #b7a6ff; } .wdots i.wt--guest { background: #ff9cc5; }
.ap-sh .co { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; }
.ap-sh .co__av { flex: 0 0 auto; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, #ff7ab6, #a58bff); color: #fff; font-style: normal; font-size: 16px; font-weight: 700; }
.ap-sh .co > span { flex: 1 1 auto; display: flex; flex-direction: column; }
.ap-sh .co b { font-size: 15px; font-weight: 600; }
.ap-sh .co small { font-size: 12px; color: #8b8a92; }
.ap-sh .co button { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 0; border-radius: 17px; background: #fff; box-shadow: inset 0 0 0 1px rgba(16, 16, 20, .12); font: inherit; font-size: 13px; font-weight: 600; color: #101014; cursor: pointer; }
.ap-sh .ed-r { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid rgba(16, 16, 20, .06); font-size: 14px; }
.ap-sh .ed-r > span { flex: 0 0 104px; color: #6b6a72; }
.ap-sh .ed-r > b { flex: 1 1 auto; font-weight: 600; display: flex; flex-direction: column; }
.ap-sh .ed-r > b small { font-size: 12px; font-weight: 400; color: #8b8a92; }
.ap-sh .ed-r > svg { flex: 0 0 auto; color: #c2c1c8; }
.ap-sh .ed-sw { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 12px 14px; border-radius: 16px; background: #fff; cursor: pointer; }
.ap-sh .ed-sw > span { flex: 1 1 auto; display: flex; flex-direction: column; }
.ap-sh .ed-sw b { font-size: 14.5px; font-weight: 600; }
.ap-sh .ed-sw small { font-size: 12.5px; color: #8b8a92; }
.ap-sh .ed-sw > i { flex: 0 0 auto; position: relative; width: 44px; height: 26px; border-radius: 13px; background: #dcdbe2; transition: background .2s; }
.ap-sh .ed-sw > i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .2s; }
.ap-sh .ed-sw.on > i { background: #101014; }
.ap-sh .ed-sw.on > i::after { transform: translateX(18px); }
.ap-sh .ed-pre { display: flex; gap: 6px; flex-wrap: wrap; }
.ap-sh .ed-pre button { height: 32px; padding: 0 12px; border: 0; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px rgba(16, 16, 20, .1); font: inherit; font-size: 13px; font-weight: 600; color: #36353b; cursor: pointer; }
.ap-sh .ed-pre button.on { background: #101014; color: #fff; box-shadow: none; }
.ap-sh .ed-lg { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 10px; font-size: 12px; color: #6b6a72; }
.ap-sh .ed-lg span { display: inline-flex; align-items: center; gap: 5px; }
.ap-sh .ed-lg i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; }
.ap-sh .ed-q { margin-top: 12px; }
.ap-sh .ed-q:first-child { margin-top: 2px; }
.ap-sh .ed-q > small { display: block; margin-bottom: 7px; font-size: 12.5px; font-weight: 600; color: #6b6a72; }
.ap-sh .ed-q .al-seg { margin: 0; background: #e8e7ee; }
.ap-sh .ed-q .pn-c span { background: #fff; box-shadow: inset 0 0 0 1px rgba(16, 16, 20, .08); }
.ap-sh .ed-q .pn-c span.on { background: #101014; color: #fff; box-shadow: none; }
.ap-sh .ed-q .pn-c span.no { background: #fdecea; color: #b3321f; box-shadow: none; font-weight: 600; }
.ap-sh .ed-q .pn-c span.add { background: transparent; box-shadow: inset 0 0 0 1.5px dashed #d0cfd6; border: 1.5px dashed #d0cfd6; box-shadow: none; color: #6b6a72; }
.ap-sh .ed-q .pn-c span svg { width: 11px; height: 11px; opacity: .6; }
.ap-sh .ed-h { margin: 6px 0 0; font-size: 12.5px; line-height: 1.4; color: #8b8a92; }
.ap-sh .ed-st { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 12px 14px; border-radius: 16px; background: #fff; }
.ap-sh .ed-st > span { flex: 1 1 auto; display: flex; flex-direction: column; }
.ap-sh .ed-st b { font-size: 14.5px; font-weight: 600; }
.ap-sh .ed-st small { font-size: 12px; color: #8b8a92; }
.ap-sh .ed-st__c { display: flex; align-items: center; gap: 10px; }
.ap-sh .ed-st__c button { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: #f3f3f6; color: #101014; cursor: pointer; }
.ap-sh .ed-st__c b { font-size: 17px; min-width: 12px; text-align: center; }
.ap-sh .ed-fav { display: flex; gap: 10px; }
.ap-sh .ed-fav > span { display: flex; flex-direction: column; align-items: center; width: 76px; text-align: center; }
.ap-sh .ed-fav i { position: relative; width: 56px; height: 56px; border-radius: 50%; background: #eee center / cover no-repeat; }
.ap-sh .ed-fav i b { position: absolute; right: -2px; bottom: -2px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #e0245e; color: #fff; box-shadow: 0 0 0 2px #f6f5f9; }
.ap-sh .ed-fav i b svg { fill: currentColor; }
.ap-sh .ed-fav > span > b { margin-top: 6px; font-size: 12.5px; font-weight: 600; line-height: 1.2; }
.ap-sh .ed-fav small { font-size: 11px; color: #8b8a92; }
.ap-sh .ed-var { position: relative; height: 6px; margin: 10px 4px 0; border-radius: 3px; background: #e3e1ea; }
.ap-sh .ed-var i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(11px + (100% - 22px) * var(--f, 0)); border-radius: 3px; background: linear-gradient(90deg, #ff8fc1, #b49bff); pointer-events: none; }
.ap-sh .ed-var__l { display: flex; justify-content: space-between; margin-top: 12px; font-size: 12px; color: #8b8a92; }
.ap-sh .ed-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.ap-sh .ed-days span { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 0; border-radius: 12px; background: #fff; color: #a3a2aa; }
.ap-sh .ed-days span b { font-size: 12px; color: #36353b; }
.ap-sh .ed-days span small { font-size: 10.5px; }
.ap-sh .ed-days span.on { background: #fff1de; color: #a3600b; }
.ap-sh .ed-days span.on small { font-weight: 600; }
.ap-sh .ed-pan { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ap-sh .ed-pan span { display: flex; flex-direction: column; padding: 9px 12px; border-radius: 13px; background: #fff; }
.ap-sh .ed-pan b { font-size: 14px; font-weight: 600; }
.ap-sh .ed-pan small { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: #8b8a92; }
.ap-sh .ed-pan span.hot small { color: #b35a00; font-weight: 600; }
.ap-sh .wg { margin-top: 10px; }
.ap-sh .wg__r { display: grid; grid-template-columns: 50px repeat(7, 1fr); gap: 4px; align-items: center; margin-top: 4px; }
.ap-sh .wg__hd b { position: relative; display: flex; flex-direction: column; align-items: center; font-size: 11.5px; font-weight: 600; color: #36353b; line-height: 1.15; cursor: pointer; }
.ap-sh .wg__hd b small { font-size: 10.5px; font-weight: 500; color: #a3a2aa; }
.ap-sh .wg__hd b em { position: absolute; top: 1px; right: 3px; width: 6px; height: 6px; border-radius: 50%; background: #f0a030; }
.ap-sh .wg__hd b em svg { display: none; }
.ap-sh .wk10__lg i.wt--train { background: #fff1de; }
.ap-sh .wg__m { font-size: 11px; font-weight: 500; color: #8b8a92; }
.ap-sh .wg__x { position: relative; display: block; cursor: pointer; }
.ap-sh .wg__c { display: grid; place-items: center; width: 100%; aspect-ratio: 1 / 1; max-width: 100%; border-radius: 11px; background: #eee center / cover no-repeat; font-style: normal; }
.ap-sh .wg--e .wg__c { cursor: pointer; transition: transform .15s; }
.ap-sh .wg--e .wg__c:active { transform: scale(.9); }
.ap-sh .wg__c--g { background: repeating-linear-gradient(-45deg, #fff0f6 0 5px, #ffe2ee 5px 10px); color: #b8306f; }
.ap-sh .wg__c--t svg { stroke-width: 1.6; }
.ap-sh .wg__c--sk { background: linear-gradient(90deg, #ecebf1 0%, #f7f6fa 50%, #ecebf1 100%); background-size: 200% 100%; animation: apSk 1.3s ease-in-out infinite; }
.ap-sh .wg--b .wg__x .wg__c:not(.wg__c--sk) { animation: apIn .4s both; animation-delay: calc(var(--o) * .05s); }
.ap-sh .wg__b { position: absolute; right: -3px; bottom: -3px; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: #fff; color: #36353b; box-shadow: 0 1px 3px rgba(16, 16, 20, .2); text-decoration: none; }
.ap-sh .wg__f { margin-top: 8px; }
.ap-sh .wg__f span { font-size: 11px; color: #a3a2aa; }
.ap-sh .wg__f b { font-size: 11px; font-weight: 600; color: #36353b; text-align: center; font-variant-numeric: tabular-nums; letter-spacing: -.2px; }
.ap-sh .wg__f--r { margin-top: 2px; }
.ap-sh .wg__f--r b { font-weight: 500; color: #8b8a92; }
.ap-sh .wk10 { margin: 14px -6px 0; padding: 14px 12px 12px; border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px rgba(16, 16, 20, .06), 0 8px 22px rgba(16, 16, 20, .07); }
.ap-sh .wk10 { animation: apUp .5s .3s cubic-bezier(.2, .8, .2, 1) both; }
.ap-sh .wk10__h { display: flex; align-items: baseline; justify-content: space-between; padding: 0 2px; }
.ap-sh .wk10__h b { font-size: 16px; font-weight: 700; letter-spacing: -.3px; }
.ap-sh .wk10__h small { font-size: 12px; color: #a3a2aa; }
.ap-sh .wk10__lg { margin-top: 12px; padding: 10px 2px 0; border-top: 1px solid rgba(16, 16, 20, .06); }
.ap-sh .wk10__lg i { width: 18px; height: 18px; border-radius: 50%; }
.ap-sh .wk10__more { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 40px; margin-top: 12px; padding: 0 12px 0 14px; border: 0; border-radius: 12px; background: #fff; font: inherit; font-size: 14px; font-weight: 600; color: #101014; cursor: pointer; }
.ap-sh .wk10__more svg { width: 16px; height: 16px; color: #a3a2aa; }
.ap-sh .pb-sum .pb-sum__g { margin-top: 0; }
.ap-sh .dv__hd { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.ap-sh .dv__hd .ai-x svg { width: 16px; height: 16px; }
.ap-sh .dv__hd > span { display: flex; flex-direction: column; }
.ap-sh .dv__hd b { font-size: 18px; font-weight: 700; letter-spacing: -.4px; }
.ap-sh .dv__hd small { font-size: 13px; color: #6b6a72; }
.ap-sh .dm { margin-top: 12px; padding: 12px; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px rgba(16, 16, 20, .06), 0 6px 18px rgba(16, 16, 20, .05); }
.ap-sh .dm.lk { box-shadow: 0 0 0 1.5px #101014; }
.ap-sh .dm__top { display: flex; gap: 12px; }
.ap-sh .dm__ph { flex: 0 0 auto; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 16px; background: #eee center / cover no-repeat; font-style: normal; }
.ap-sh .dm__ph.dm__ph--g { background: repeating-linear-gradient(-45deg, #fff0f6 0 5px, #ffe2ee 5px 10px); color: #b8306f; }
.ap-sh .dm__b { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ap-sh .dm__b small { font-size: 12px; color: #8b8a92; }
.ap-sh .dm__b b { margin-top: 1px; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: -.2px; }
.ap-sh .dm__b > span { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-top: 3px; font-size: 12.5px; color: #6b6a72; font-variant-numeric: tabular-nums; }
.ap-sh .dm__b em { margin-top: 3px; font-style: normal; font-size: 12px; font-weight: 500; color: #1f7a6a; }
.ap-sh .dm__lk { flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: #f3f3f6; color: #8b8a92; cursor: pointer; }
.ap-sh .dm.lk .dm__lk { background: #101014; color: #fff; }
.ap-sh .dm__lkn { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; font-size: 12.5px; color: #36353b; }
.ap-sh .dm__alt { display: flex; gap: 6px; margin: 10px -12px 0; padding: 0 12px 2px; overflow-x: auto; scrollbar-width: none; }
.ap-sh .dm__alt::-webkit-scrollbar { display: none; }
.ap-sh .dm__alt button { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 12px 0 6px; border: 0; border-radius: 14px; background: #f6f6f8; font: inherit; text-align: left; cursor: pointer; }
.ap-sh .dm__alt i { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; background: #eee center / cover no-repeat; }
.ap-sh .dm__alt span { display: flex; flex-direction: column; }
.ap-sh .dm__alt b { font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.ap-sh .dm__alt small { font-size: 11px; color: #8b8a92; white-space: nowrap; }
.ap-sh .pb-tip { display: flex; gap: 8px; margin: 12px 2px 0; font-size: 13.5px; line-height: 1.4; color: #4a4950; }
.ap-sh .pb-tip svg { flex: 0 0 auto; margin-top: 2px; color: #2f7a3f; }
.ap-sh .df__y--n > i { display: grid; place-items: center; background: #f3f3f6 !important; color: #a3a2aa; }
.ap-sh .pb-act .k svg { flex: 0 0 auto; }
.ap-sh .pbf:has(.pb-me2) { padding-bottom: 150px; }
.ap-sh .pb-act { flex-direction: column; gap: 8px; }
.ap-sh .pb-act button { flex: 0 0 auto; height: 50px; padding: 0 22px; border-radius: 25px; font-size: 15px; }
.ap-sh .pb-act--row { flex-direction: row; }
.ap-sh .pb-act--row button { flex: 1 1 0; padding: 0 18px; }
.pf-ai--s > b { font-size: 19px; margin-top: 12px; }
.pf-mini { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 14px 14px 14px; border: 1.5px solid transparent; border-radius: 22px; background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from var(--ap-a), #ff7ab6, #a58bff, #6fc3ff, #ffbe7a, #ff7ab6) border-box; animation: apRot 6s linear infinite; font: inherit; text-align: left; color: #101014; cursor: pointer; }
.pf-mini__ic { flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #f6f3fb; }
.pf-mini > span { flex: 1 1 auto; display: flex; flex-direction: column; }
.pf-mini b { font-size: 15.5px; font-weight: 650; letter-spacing: -.2px; }
.pf-mini small { font-size: 12.5px; color: #8b8a92; }
.pf-mini > svg { width: 17px; height: 17px; color: #c2c1c8; }
.ap-sh .df__t > span { display: flex; flex-direction: column; }
.ap-sh .w12-cf .df__a button svg { width: 15px; height: 15px; }
.ap-sh .ad10__h { display: flex; align-items: center; gap: 8px; }
.ap-sh .ad10__h b { font-size: 16px; font-weight: 700; line-height: 1.25; letter-spacing: -.3px; }
.ap-sh .w12-cf { margin: 12px 0 6px; padding: 14px; border-radius: 20px; background: #f6f6f8; }
.ap-sh .w12-cf .ad10__h { display: flex; align-items: center; gap: 8px; }
.ap-sh .w12-cf .ad10__h b { font-size: 15px; }
.ap-sh .w12-cf p { margin: 8px 0 12px; font-size: 13.5px; line-height: 1.45; color: #3a3940; }

/* ---------- то, чего нет в макете буквально: поля ввода, загрузка, ошибки (собрано из соседних элементов макета) ---------- */
.ap-sh .ai-feed { padding-bottom: 24px; }
.ap-sh .ai-input { margin: 10px 0 calc(16px + var(--rf-safe-bottom, 0px)); padding: 0 6px 0 18px; }
.ap-sh .ai-input input { flex: 1 1 auto; min-width: 0; height: 40px; border: 0; outline: 0; background: none; font: inherit; font-size: 16px; color: #101014; }
.ap-sh .ai-input input::placeholder { color: #8b8a92; }
.ap-sh .ai-input button { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: #101014; color: #fff; cursor: pointer; flex: 0 0 auto; }
.ap-sh .ai-input button[disabled] { background: #d0cfd6; }
.ap-sh .pb-foot:empty { display: none; }
.ap-sh .pb-go[disabled] { opacity: .5; }
.ap-sh .pb__r > svg.ap-chev { flex: 0 0 auto; width: 16px; height: 16px; color: #c2c1c8; }
.ap-sh .ed-q .pn-c input { width: 150px; height: 34px; padding: 0 13px; border: 1.5px dashed #d0cfd6; border-radius: 17px; background: #fff; font: inherit; font-size: 16px; color: #101014; outline: 0; }
.ap-sh .ed-q .pn-c span button { display: grid; place-items: center; width: 18px; height: 18px; margin-right: -6px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.ap-sh .ed-days span { border: 0; font: inherit; cursor: default; }
.ap-sh .ed-days button { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 0; border: 0; border-radius: 12px; background: #fff; font: inherit; color: #a3a2aa; cursor: pointer; }
.ap-sh .ed-days button b { font-size: 12px; color: #36353b; }
.ap-sh .ed-days button small { font-size: 10.5px; }
.ap-sh .ed-days button.on { background: #101014; color: #fff; }
.ap-sh .ed-days button.on b { color: #fff; }
/* Ползунки «Разнообразие» и «Бюджет»: кружок — родной у <input type=range> (едет за пальцем без JS и без
   перерисовки), полоса заливки — свойство --f, его на ходу ставит slide() в diary-aiplan.js. */
.ap-sh .ed-var input { position: absolute; left: 0; right: 0; top: -14px; width: 100%; height: 34px; margin: 0; padding: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; touch-action: pan-y; }
.ap-sh .ed-var input::-webkit-slider-runnable-track { height: 34px; background: transparent; border: 0; }
.ap-sh .ed-var input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; margin-top: 6px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(16, 16, 20, .25), 0 0 0 1px rgba(16, 16, 20, .06); }
.ap-sh .ed-var input::-moz-range-track { height: 34px; background: transparent; border: 0; }
.ap-sh .ed-var input::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(16, 16, 20, .25), 0 0 0 1px rgba(16, 16, 20, .06); }
.ap-sh .ed-var input:focus-visible { outline: 0; }
.ap-sh .ed-var input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px rgba(123, 77, 255, .35), 0 2px 8px rgba(16, 16, 20, .25); }
.ap-sh .ap-bud-sl { margin-top: 18px; }
/* Бюджет не задан: вопрос и явная кнопка вместо пустого ползунка с прочерком */
.ap-sh .ap-bud0 { padding-top: 10px; }
.ap-sh .ap-bud0__q { margin: 0; font-size: 14px; line-height: 1.42; color: #36353b; }
.ap-sh .ap-bud0__go { display: inline-flex; align-items: center; gap: 8px; height: 42px; margin-top: 12px; padding: 0 18px; border: 0; border-radius: 21px; background: #101014; color: #fff; font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; }
.ap-sh .ap-bud0__go .pb__rub { font-size: 15px; }
.ap-sh .ap-bud-cta { margin-top: 4px; font-size: 13px; font-style: normal; font-weight: 600; color: #6a4fd8; }
.ap-sh .ed-link { display: inline-flex; align-items: center; gap: 6px; height: 34px; margin-top: 10px; padding: 0 12px; border: 0; border-radius: 17px; background: #fff; box-shadow: inset 0 0 0 1px rgba(16, 16, 20, .12); font: inherit; font-size: 13px; font-weight: 600; color: #101014; cursor: pointer; }
.ap-sh .wg__c--k { background: #f3f3f6; color: #3d8a1f; }
.ap-sh .wg__c--n { background: #fff; box-shadow: inset 0 0 0 1px #e3e2e8; }
.ap-sh .dm__mk { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; font-style: normal; font-size: 11px; font-weight: 600; color: #b8306f; }
.ap-sh .dm__mk--chg { color: #6b6a72; }
.ap-sh .dm__alt button { max-width: 232px; }
.ap-sh .dm__alt span { min-width: 0; }
.ap-sh .dm__alt b { display: block; overflow: hidden; text-overflow: ellipsis; }
.ap-sh .dm--done { opacity: .6; box-shadow: none; background: #f6f6f8; }
.ap-sh .dm__alt--sk button { width: 150px; background: linear-gradient(90deg, #ecebf1 0%, #f7f6fa 50%, #ecebf1 100%); background-size: 200% 100%; animation: apSk 1.3s ease-in-out infinite; }
.ap-sh .ap-err { margin-top: 14px; padding: 14px 16px; border-radius: 18px; background: #fdecea; font-size: 14px; line-height: 1.4; color: #b3321f; }
.ap-sh .ap-err button { display: block; margin-top: 8px; padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: #101014; cursor: pointer; }
.ap-sh .ap-wait { display: grid; place-items: center; min-height: 240px; }
.ap-sh .ap-wait i { width: 26px; height: 26px; border-radius: 50%; border: 2.5px solid #e3e1ea; border-top-color: #7b4dff; animation: apSpin .9s linear infinite; }
.ap-sh .pb-act button[disabled] { opacity: .55; }
.ap-sh .pb-act .rf-btn-spin { margin-right: 2px; }

/* дневник: вход «Соберу меню» и «Сегодня без плана» — по краям стопки дня */
.pf-ai, .pf-mini { margin: 0; }
.pf-ai__a { flex-wrap: wrap; }
.pf-ai__a button { white-space: nowrap; }

/* узкий телефон (320 px): ккал под неделей и кнопки карточки не налезают друг на друга */
@media (max-width: 359px) {
  .ap-sh .wg__r { grid-template-columns: 44px repeat(7, 1fr); gap: 3px; }
  .ap-sh .wg__f b { font-size: 9.5px; letter-spacing: -.4px; }
  .ap-sh .wg__m { font-size: 10px; }
  .pf-ai__a button { padding: 0 14px; font-size: 14px; }
}
.pf-ai__a button:focus-visible, .pf-mini:focus-visible { outline: 2px solid #e0518f; outline-offset: 2px; }


/* ---------- PR B: «Неделя в цифрах» (графики — по одной мере на ось), «Готовка впрок», комментарий коуча (макет v10) ---------- */
.ap-sh { --ch-k: #2b2a31; --ch-bar: #101014; --ch-p: #8cc43a; --ch-r: #9a95ad; --ch-ln: #8b8a92; --ch-g: #c9c2e8; --ch-g-bg: #f3f1fb; }
.ap-sh .cm10 { display: flex; gap: 10px; margin-top: 10px; padding: 14px; border-radius: 22px; background: #fff7fb; box-shadow: inset 0 0 0 1px #ffd6e7; }
.ap-sh .cm10 .co__av { width: 32px; height: 32px; font-size: 14px; }
.ap-sh .cm10__b { flex: 1 1 auto; min-width: 0; }
.ap-sh .cm10__b > small { font-size: 12px; color: #8b8a92; }
.ap-sh .cm10__b > small b { color: #b8306f; font-weight: 600; }
.ap-sh .cm10__b p { margin: 4px 0 0; font-size: 14.5px; line-height: 1.42; color: #101014; }
.ap-sh .cm10__d { display: flex; flex-direction: column; gap: 3px; margin-top: 10px; padding: 10px 12px; border-radius: 14px; background: #fff; font-size: 13px; }
.ap-sh .cm10__d s { color: #a3a2aa; }
.ap-sh .cm10__d b { font-weight: 600; }
.ap-sh .cm10 .df__a button { height: 40px; }
.ap-sh .chc { position: relative; margin-top: 14px; padding: 14px 12px 10px; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px rgba(16, 16, 20, .06); }
.ap-sh .chc__h { display: flex; align-items: baseline; justify-content: space-between; padding: 0 4px 4px; }
.ap-sh .chc__h b { font-size: 15px; font-weight: 700; letter-spacing: -.2px; }
.ap-sh .chc__h small { font-size: 12px; color: #a3a2aa; }
.ap-sh .ch { display: block; width: 100%; height: auto; max-width: 100%; overflow: visible; }
.ap-sh .ch__bar { fill: var(--ch-bar); }
.ap-sh .chc--k .ch__bar { fill: var(--ch-k); }
.ap-sh .chc--p .ch__bar { fill: var(--ch-p); }
.ap-sh .chc--r .ch__bar { fill: var(--ch-r); }
.ap-sh .ch__g { cursor: pointer; }
.ap-sh .ch__g.on .ch__bar { opacity: .75; }
.ap-sh .ch__base { stroke: #e3e2e8; stroke-width: 1; }
.ap-sh .ch__ln { stroke: var(--ch-ln); stroke-width: 1.5; stroke-dasharray: 4 4; }
.ap-sh .ch__lnl { font-size: 10.5px; fill: #6b6a72; text-anchor: end; font-family: inherit; }
.ap-sh .ch__x { font-size: 11px; fill: #8b8a92; text-anchor: middle; font-family: inherit; }
.ap-sh .chc__n { margin: 6px 4px 0; font-size: 12.5px; line-height: 1.4; color: #6b6a72; }
.ap-sh .chc__tip { position: absolute; z-index: 3; padding: 6px 10px; border-radius: 10px; background: #101014; color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s; pointer-events: none; }
.ap-sh .chc__tip.on { opacity: 1; transform: none; }
.ap-sh .ck10__r { display: flex; gap: 10px; margin-top: 10px; }
.ap-sh .ck10__r > i { flex: 0 0 auto; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #e6f6dc; color: #3d8a1f; }
.ap-sh .ck10__r.w > i { background: #fff1de; color: #a3600b; }
.ap-sh .ck10__r > span { display: flex; flex-direction: column; }
.ap-sh .ck10__r b { font-size: 14px; font-weight: 600; }
.ap-sh .ck10__r small { font-size: 12.5px; color: #6b6a72; }
.ap-sh .pp { margin-top: 12px; padding: 14px 14px 12px; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px rgba(16, 16, 20, .06); }
.ap-sh .pp__h { display: flex; flex-direction: column; }
.ap-sh .pp__k { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: #5b45e0; }
.ap-sh .pp__h > b { margin-top: 4px; font-size: 18px; font-weight: 700; letter-spacing: -.4px; }
.ap-sh .pp__h > small { font-size: 13px; color: #6b6a72; }
.ap-sh .gt { margin-top: 12px; }
.ap-sh .gt__r { display: grid; grid-template-columns: 56px 1fr; align-items: center; margin-top: 6px; }
.ap-sh .gt__r > span { font-size: 12px; color: #8b8a92; }
.ap-sh .gt__t { position: relative; height: 40px; border-radius: 10px; background: linear-gradient(90deg, transparent calc(33.33% - .5px), rgba(16, 16, 20, .06) calc(33.33% - .5px) calc(33.33% + .5px), transparent calc(33.33% + .5px) calc(66.66% - .5px), rgba(16, 16, 20, .06) calc(66.66% - .5px) calc(66.66% + .5px), transparent calc(66.66% + .5px)), #f6f6f8; }
.ap-sh .gt__b { position: absolute; top: 3px; bottom: 3px; display: flex; flex-direction: column; justify-content: center; padding: 0 7px; border-radius: 8px; overflow: hidden; font-style: normal; }
.ap-sh .gt__b b { font-size: 11.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-sh .gt__b small { font-size: 10.5px; opacity: .75; }
.ap-sh .gt__b--o { background: #ffe1c2; color: #8a4b00; }
.ap-sh .gt__b--s { background: #dcebff; color: #1f4f9a; }
.ap-sh .gt__b--t { background: #e4f4e0; color: #2f6a22; }
.ap-sh .gt__ax { display: grid; grid-template-columns: 56px 1fr; margin-top: 4px; }
.ap-sh .gt__ax > div { position: relative; height: 14px; }
.ap-sh .gt__ax em { position: absolute; top: 0; transform: translateX(-50%); font-style: normal; font-size: 10.5px; color: #a3a2aa; }
.ap-sh .gt__ax em:first-child { transform: none; }
.ap-sh .gt__ax em:last-child { transform: translateX(-100%); }
.ap-sh .pp__n { display: flex; align-items: flex-start; gap: 7px; margin: 12px 0 0; padding-top: 10px; border-top: 1px solid rgba(16, 16, 20, .06); font-size: 13px; line-height: 1.4; color: #36353b; }
.ap-sh .pp__n svg { flex: 0 0 auto; margin-top: 2px; color: #5aa0f2; }
.ap-sh .ord__h { padding: 18px 4px 4px; }
.ap-sh .chc__h small { display: inline-flex; align-items: center; gap: 6px; }
.ap-sh .chc__ln { display: inline-block; width: 16px; height: 0; border-top: 1.5px dashed var(--ch-ln); }
.ap-sh .cm10--top { margin-top: 0; }
.ap-sh .ch__g:focus-visible { outline: 2px solid #e0518f; outline-offset: 2px; }
.ap-sh .ap-ing .pb-did__r i { color: #6b6a72; }
.ap-sh .ap-ing .ap-have { color: #8b8a92; }
.ap-sh .ap-ing .ap-have i { background: #e6f6dc; color: #3d8a1f; }
.ap-sh .ap-ing .ap-have b { color: #6b6a72; font-weight: 500; text-decoration: line-through; text-decoration-color: rgba(16, 16, 20, .25); }
.ap-sh .wk10__more + .pb-sum__g, .ap-sh .pb-sum .wk10__more { margin-top: 12px; }

/* появление — только при смене экрана (ap-anim-v) или ответе на правку (ap-anim-e, блоки ветки правки) */
.ap-sh .ai-feed:not(.ap-anim-v) :is(.ai-me, .ai-a, .ai-sum, .ai-next, .wk10, .df) { animation: none; }
.ap-sh .ai-feed.ap-anim-e .ap-thread :is(.ai-me, .ai-a, .df, .ai-next) { animation: apUp .45s .1s cubic-bezier(.2, .8, .2, 1) both; }
@media (prefers-reduced-motion: reduce) {
  .ap-sh .ai-me, .ap-sh .ai-a, .ap-sh .ai-sum, .ap-sh .ai-next, .ap-sh .wk10, .ap-sh .df, .ap-sh .pg__sp, .ap-sh .pb-spin svg,
  .ap-sh .wg__c--sk, .ap-sh .wg--b .wg__x .wg__c, .ap-sh .dm__alt--sk button, .ap-sh .ap-wait i, .pf-mini,
  .ap-sh .ai-feed .ap-thread :is(.ai-me, .ai-a, .df, .ai-next) { animation: none !important; }
}

/* ---- src/styles/55-rest-catalog.css ---- */
/* «Под остаток дня», макет «Еда v9» (ок владельца 11.10): логотипы магазинов, цены на полках, «Смотреть все» и экран
 * сеткой по два (20-screens/rest-cat.js, rest-day.js, rest-see-all.js). Дополняет 54-rest-day.css, раньше него не грузится. */

/* логотипы магазинов — логотипы src/assets/logo-*.png (ок владельца) */
.rdy-lg { display: inline-block; flex: 0 0 auto; width: 22px; height: 22px; border-radius: 7px; background: #eee center / cover no-repeat; vertical-align: -6px; box-shadow: 0 0 0 1px rgba(16, 16, 20, .06); }
.rdy-lg--m { width: 30px; height: 30px; border-radius: 9px; }
.rdy-lg--s { width: 16px; height: 16px; border-radius: 5px; vertical-align: -3px; }
.rdy-lg--lavka { background-image: url(/static/miniapp-v3/assets/logo-lavka.c2a7d0e1.png); }
.rdy-lg--vkusvill { background-image: url(/static/miniapp-v3/assets/logo-vkusvill.c11b3338.png); }
.rdy-lg--samokat { background-image: url(/static/miniapp-v3/assets/logo-samokat.be85c7a2.png); }
.rdy-lg--azbuka { background-image: url(/static/miniapp-v3/assets/logo-azbuka.d52ca179.png); }
.rdy-chips .rdy-lg { box-shadow: none; }

/* шапка полки магазина: логотип · название · «Открыть ›» */
.rdy-h { align-items: center; }
.rdy-h__s { display: inline-flex; align-items: center; gap: 10px; }

/* карточка полки: название — ровно две строки по высоте, цена прижата к низу (цены в ряду на одной линии) */
.rdy-c { display: flex; flex-direction: column; }
.rdy-c > b { min-height: 2.5em; }
.rdy-c > span.rdy-c__pr { margin-top: auto; padding-top: 4px; font-size: 15px; font-weight: 700; letter-spacing: -.3px; color: #101014; }
.rdy-c__lg { position: absolute; left: 8px; bottom: 8px; width: 24px; height: 24px; border-radius: 8px; box-shadow: 0 0 0 2px #fff; }

/* «Смотреть все» — последняя карточка полки */
.rdy-all__ph { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; height: 150px; padding: 4px; border-radius: 22px; background: #fff; box-shadow: inset 0 0 0 1px rgba(16, 16, 20, .06); }
.rdy-all__ph > i { display: grid; place-items: center; border-radius: 16px; background: #eee center / cover no-repeat; opacity: .9; }
.rdy-all__ph > i:nth-child(n+3) { opacity: .55; }
.rdy-all__t { background: #efedf6 !important; }
.rdy-all__t em { font-style: normal; font-size: 28px; line-height: 1; }
.rdy-all__go { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: #101014; color: #fff; box-shadow: 0 0 0 4px #fff, 0 8px 20px rgba(16, 16, 20, .25); }
.rdy-all__go svg { width: 19px; height: 19px; stroke-width: 2.4; }
.rdy-all > b { margin-top: 9px; }

/* главная карточка: логотип, цена, «+» в план */
.rdy-hero__lg { position: absolute; right: 14px; top: 14px; width: 34px; height: 34px; border-radius: 10px; box-shadow: 0 0 0 2px rgba(255, 255, 255, .9); }
.rdy-hero__ov span { display: flex; align-items: center; flex-wrap: wrap; row-gap: 6px; margin-right: 56px; }
.rdy-hero--on .rdy-hero__ov span { margin-right: 112px; }
.rdy-hero__pr { display: inline-flex; align-items: center; height: 26px; margin-right: 8px; padding: 0 9px; border-radius: 9px; background: #fff; color: #101014; font-style: normal; font-size: 15px; font-weight: 700; letter-spacing: -.3px; }
.rdy-add { position: absolute; right: 16px; bottom: 15px; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: #101014; cursor: pointer; }
.rdy-add svg { width: 18px; height: 18px; }
.rdy-add--on { display: inline-flex; align-items: center; gap: 5px; width: auto; height: 36px; padding: 0 13px 0 10px; border-radius: 18px; bottom: 16px; font: inherit; font-size: 13.5px; font-weight: 600; }

/* «Смотреть все» — экран */
.alx { padding-bottom: calc(var(--rf-safe-bottom, 0px) + 40px); }
.al-sub { min-height: 1.4em; margin: 2px 20px 0; font-size: 14px; color: #6b6a72; font-variant-numeric: tabular-nums; }
.al-q { display: flex; align-items: center; gap: 8px; height: 44px; margin: 14px 16px 0; padding: 0 14px; border-radius: 14px; background: #fff; color: #a3a2aa; box-shadow: 0 1px 2px rgba(16, 16, 20, .04); }
.al-q svg { flex: 0 0 auto; width: 17px; height: 17px; }
/* 16 px — иначе iPhone приближает страницу при фокусе */
.al-q__in { flex: 1 1 auto; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 16px; color: #101014; -webkit-appearance: none; appearance: none; }
.al-q__in::placeholder { color: #a3a2aa; }
.al-seg { display: flex; gap: 2px; margin: 12px 16px 0; padding: 3px; border-radius: 14px; background: #e6e6ea; }
.al-seg button { flex: 1 1 0; height: 34px; border: 0; border-radius: 11px; background: transparent; font: inherit; font-size: 13.5px; font-weight: 600; color: #6b6a72; cursor: pointer; }
.al-seg button.on { background: #fff; color: #101014; box-shadow: 0 1px 3px rgba(16, 16, 20, .1); }
.al-chips { margin-top: 10px; }
.al-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 12px; align-items: stretch; margin: 16px 16px 0; }
.al-c { display: flex; flex-direction: column; min-width: 0; cursor: pointer; }
.al-c__ph { position: relative; display: block; aspect-ratio: 1 / 1; max-width: 100%; border-radius: 22px; background: #ddd center / cover no-repeat; overflow: hidden; }
.al-c__ph--t { display: grid; place-items: center; background: #efedf6; }
.al-c__emo { font-style: normal; font-size: 58px; line-height: 1; }
.al-c__lg { position: absolute; left: 9px; bottom: 9px; width: 24px; height: 24px; border-radius: 8px; box-shadow: 0 0 0 2px #fff; }
.al-c__st { position: absolute; left: 8px; top: 8px; display: inline-flex; align-items: center; height: 24px; padding: 0 7px; border-radius: 12px; background: rgba(255, 255, 255, .92); }
.al-c__st .ma-pl { gap: 1px; }
.al-c > b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em; margin-top: 9px; font-size: 14.5px; font-weight: 600; line-height: 1.25; letter-spacing: -.2px; }
.al-c__m { display: block; margin-top: 3px; font-size: 12.5px; color: #8b8a92; font-variant-numeric: tabular-nums; }
/* слабая тарелка — чем дополнить: «+ Салат капустный · ★★ вместе 520 ккал» */
.al-c__cb { display: flex; flex-direction: column; gap: 1px; margin-top: 5px; padding: 6px 8px; border-radius: 10px; background: #eef7ef; min-width: 0; }
.al-c__cb b { font-size: 12px; font-weight: 600; color: #2f5a35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.al-c__cb small { display: flex; align-items: center; gap: 4px; font-size: 11.5px; color: #4f6b53; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* цена прижата к низу карточки: в ряду все цены на одной линии, как бы ни переносилось название */
.al-c__p { display: flex; align-items: baseline; gap: 6px; margin-top: auto; padding-top: 5px; min-width: 0; }
.al-c__p b { font-size: 16px; font-weight: 700; letter-spacing: -.4px; white-space: nowrap; }
.al-c__p small { min-width: 0; font-size: 11.5px; color: #a3a2aa; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.al-note { margin: 22px 20px 0; font-size: 12.5px; line-height: 1.45; color: #8b8a92; }
.al-empty { margin-top: 24px; }
@keyframes alSk { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.al-grid--sk i { display: block; aspect-ratio: 1 / 1.34; border-radius: 22px; background: linear-gradient(90deg, #e9e8ee 0%, #f3f2f6 50%, #e9e8ee 100%) 0 0 / 200% 100%; animation: alSk 1.4s linear infinite; }
/* узкий телефон (320 px): подпись «₽ за 10 г белка» — под ценой, у всех карточек сразу (а не обрезанная у части) */
@media (max-width: 359px) {
  .al-c__p { flex-direction: column; align-items: flex-start; gap: 1px; }
  .al-c__p small { min-height: 1.3em; max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .al-grid--sk i { animation: none; } }

/* ---- src/styles/55-rest-menu.css ---- */
/* «Ресторан» → меню по фото (20-screens/rest-menu.js) — макет «Еда v7–v9», ок владельца.
 * В «Под остаток дня»: карточка «Вы в ресторане?», полка «Мои рестораны» с «Добавить ресторан».
 * Экран меню: тёмный фон, фото меню с «пробегающей линией», подсветка строк ①②③, шторка «что взять»,
 * карточка «Сохранить «…» в мои рестораны?». Классы макета (.scan, .mnx, .mn) — с приставками rdy-/rdm-:
 * общие имена в бандле перетирают чужие экраны (docs/agent-traps.md). */

/* ---------- «Вы в ресторане?» ---------- */
.rdy-scan { position: relative; isolation: isolate; display: flex; gap: 12px; margin: 14px 16px 0; padding: 18px 16px 18px 18px; border-radius: 26px; overflow: hidden; color: #fff; background: #141019; }
.rdy-scan__bg { position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 90% at 0% 0%, rgba(255, 92, 160, .45), transparent 55%), radial-gradient(90% 80% at 100% 100%, rgba(110, 120, 255, .5), transparent 60%), radial-gradient(70% 60% at 85% 10%, rgba(255, 170, 80, .35), transparent 60%); }
.rdy-scan__b { flex: 1 1 auto; min-width: 0; }
.rdy-scan__k { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px 0 8px; border-radius: 12px; background: rgba(255, 255, 255, .14); font-size: 12px; font-weight: 600; }
.rdy-scan__k svg { width: 14px; height: 14px; color: #c9b8ff; }
.rdy-scan b { display: block; margin-top: 10px; font-size: 22px; font-weight: 700; letter-spacing: -.6px; }
.rdy-scan p { margin: 6px 0 0; font-size: 14px; line-height: 1.4; color: rgba(255, 255, 255, .78); }
.rdy-scan__a { display: flex; gap: 8px; margin-top: 14px; }
.rdy-scan__a button { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 13px; border: 0; border-radius: 20px; background: #fff; color: #101014; font: inherit; font-size: 13.5px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: transform .2s; }
.rdy-scan__a button:active { transform: scale(.96); }
.rdy-scan__a button svg { width: 17px; height: 17px; }
.rdy-scan__a button.g { background: rgba(255, 255, 255, .14); color: #fff; }
.rdy-scan__a button.g svg { width: 16px; height: 16px; }
.rdy-scan__m { flex: 0 0 auto; align-self: center; display: flex; flex-direction: column; gap: 6px; width: 54px; padding: 10px 8px; border-radius: 10px; background: #f6efe3; transform: rotate(4deg); box-shadow: 0 10px 24px rgba(0, 0, 0, .35); }
.rdy-scan__m i { display: block; height: 4px; border-radius: 2px; background: #cfc3ad; }
.rdy-scan__m i.h { background: linear-gradient(90deg, #ff6fae, #8f7bff); box-shadow: 0 0 0 3px rgba(143, 123, 255, .25); }
.rdy-scan__m i:nth-child(3n) { width: 70%; }

/* ---------- «Мои рестораны» ---------- */
.rdy-h > span { font-size: 15px; color: #a3a2aa; font-variant-numeric: tabular-nums; }
.rdy-c__heart { position: absolute; right: 8px; top: 8px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, .92); color: #e0245e; }
.rdy-c__heart svg { width: 13px; height: 13px; fill: currentColor; }
.rdy-c__ph--pg { background-position: center top; }
.rdy-c--r > span.ok { color: #2f7a3f; font-weight: 500; }
.rdy-c--r > span.no { color: #a3a2aa; }
.rdy-all .rdy-all__ph { position: relative; display: grid; place-items: center; height: 150px; border-radius: 22px; background: #f4f3f7; box-shadow: inset 0 0 0 1.5px rgba(16, 16, 20, .1); }
.rdy-all__plus { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #fff; color: #101014; box-shadow: 0 4px 14px rgba(16, 16, 20, .08); }
.rdy-all__plus svg { width: 24px; height: 24px; }

/* ---------- экран меню ---------- */
.rdm-scr { background: #0d0c10; }
/* специфичнее общего .rf-app .rf-pane.rf-pane--full .rf-scr (28 + инсет): низ — белая шторка до края, отступ под жестом у неё самой */
.rf-app .rf-pane.rf-t-rest-menu > .rf-scr.rdm-scr { padding: 0; }
.rf-scr.rdm-scr > .xs-root { display: flex; flex-direction: column; min-height: 100%; }
.rdm { position: relative; flex: 1 0 auto; display: flex; flex-direction: column; min-height: 100%; background: radial-gradient(90% 60% at 50% 30%, #2a2530, #0d0c10); color: #fff; }
.rdm__top { position: absolute; left: 0; right: 0; top: 0; z-index: 6; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: calc(var(--rf-safe-top, 0px) + 12px) 16px 12px; pointer-events: none; }
.rdm__top > * { pointer-events: auto; }
.rdm__top .pl4-gb { width: 40px; height: 40px; background: rgba(255, 255, 255, .16); }
.rdm__sp { width: 40px; flex: 0 0 auto; }
.rdm__st { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 13px; border-radius: 16px; background: rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); color: #fff; font-size: 13px; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rdm__st i { width: 7px; height: 7px; border-radius: 50%; background: #7dffb0; box-shadow: 0 0 8px #7dffb0; }
.rdm__st.is-scan i { background: #c9b8ff; box-shadow: 0 0 8px #a48bff; animation: rdmPulse 1.2s ease-in-out infinite; }
@keyframes rdmPulse { 50% { opacity: .35; } }
/* окно фото: высоту и сдвиг страницы к подсвеченным строкам ставит mount (rest-menu.js fit) */
.rdm-ph { position: relative; flex: 0 0 auto; height: 420px; overflow: hidden; padding-top: calc(var(--rf-safe-top, 0px) + 64px); }
.rdm-pg { position: relative; margin: 0 24px; will-change: transform; }
.rdm-pg > img { display: block; width: 100%; height: 100%; border-radius: 6px; object-fit: cover; background: #f1e8d6; box-shadow: 0 30px 60px rgba(0, 0, 0, .55); -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.rdm-pg--pre { aspect-ratio: 3 / 4; }
.rdm-pg--pre > img { position: absolute; inset: 0; }
.rdm-veil { position: absolute; inset: 0; border-radius: 6px; background: rgba(13, 12, 16, .5); pointer-events: none; }
.rdm-hl { position: absolute; border-radius: 7px; background-repeat: no-repeat; box-shadow: 0 0 0 2px #a48bff, 0 0 18px rgba(164, 139, 255, .55); }
.rdm-hl::before { content: attr(data-n); position: absolute; left: -22px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; background: linear-gradient(135deg, #ff5fa8, #7b5cff); color: #fff; font: 600 11px/18px Geist, system-ui, sans-serif; text-align: center; }
.rdm-beam { position: absolute; left: 14px; right: 14px; top: 0; z-index: 3; height: 70px; opacity: 0; background: linear-gradient(180deg, transparent, rgba(164, 139, 255, .35) 70%, rgba(255, 255, 255, .9) 96%, transparent); pointer-events: none; }
@keyframes rdmBeam { 0% { opacity: 1; transform: translateY(-60px); } 92% { opacity: 1; } 100% { opacity: 0; transform: translateY(var(--ph-h, 460px)); } }
.rdm--scan .rdm-beam { animation: rdmBeam 1.6s cubic-bezier(.45, .05, .4, 1) .2s infinite; }
.rdm--a .rdm-beam { animation: rdmBeam 1.3s cubic-bezier(.45, .05, .4, 1) .2s both; }
.rdm--a .rdm-veil { animation: rdmDim .5s 1.3s both; }
@keyframes rdmDim { from { opacity: 0; } }
.rdm--a .rdm-hl { animation: rdmHl .5s both; animation-delay: calc(1.25s + var(--d) * .15s); }
@keyframes rdmHl { from { opacity: 0; box-shadow: 0 0 0 0 transparent; } }
.rdm--a .rdm-sh { animation: rdmSh .55s 1.9s cubic-bezier(.2, .85, .25, 1) both; }
@keyframes rdmSh { from { transform: translateY(105%); } }
.rdm--a .rdm-ask { animation: rdmUp .5s 2.9s cubic-bezier(.2, .8, .2, 1) both; }
.rdm--a .rdm-ask.on { animation: none; }
@keyframes rdmUp { from { opacity: 0; transform: translateY(10px); } }
/* бумага меню — пока PDF читается или фото не показалось */
.rdm-paper { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 12px; padding: 34px 26px; border-radius: 6px; background: linear-gradient(170deg, #faf5ea, #f1e8d6); box-shadow: 0 30px 60px rgba(0, 0, 0, .55), inset 0 0 40px rgba(160, 130, 80, .12); }
.rdm-paper i { display: block; height: 7px; border-radius: 4px; background: #d9ccb4; }
.rdm-paper i:nth-child(3n) { width: 72%; }
.rdm-paper i:nth-child(3n+2) { width: 86%; }
.rdm-paper i.s { width: 38%; height: 6px; margin-top: 8px; background: #c4b393; }
/* страницы меню */
.rdm-pp { position: absolute; right: 18px; bottom: 40px; z-index: 4; display: flex; gap: 6px; }
.rdm-pp button { position: relative; display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); color: #fff; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.rdm-pp button.on { background: #fff; color: #101014; }
.rdm-pp button i { position: absolute; right: 2px; top: 2px; width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, #ff5fa8, #7b5cff); }
.rdm-cap { margin: 18px 32px 0; padding-bottom: calc(var(--rf-safe-bottom, 0px) + 24px); font-size: 14px; line-height: 1.45; text-align: center; color: rgba(255, 255, 255, .72); }
/* шторка «что взять» */
.rdm-sh { position: relative; z-index: 5; flex: 1 0 auto; margin-top: -28px; padding: 8px 16px calc(var(--rf-safe-bottom, 0px) + 28px); border-radius: 28px 28px 0 0; background: #fff; color: #101014; box-shadow: 0 -10px 40px rgba(0, 0, 0, .35); }
.rdm-sh__gr { display: block; width: 36px; height: 5px; margin: 0 auto 8px; border-radius: 3px; background: #dcdce1; }
.rdm-hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 0 6px 4px; }
.rdm-hd > span { display: flex; flex-direction: column; min-width: 0; }
.rdm-hd b { font-size: 19px; font-weight: 700; letter-spacing: -.4px; text-wrap: balance; }
.rdm-hd small { font-size: 13.5px; color: #6b6a72; font-variant-numeric: tabular-nums; }
.rdm-hd__ed { display: grid; place-items: center; flex: 0 0 auto; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #f3f3f6; color: #36353b; cursor: pointer; transition: transform .2s; }
.rdm-hd__ed:active { transform: scale(.92); }
.rdm-hd__ed svg { width: 17px; height: 17px; }
.rdm-in { display: inline-flex; align-items: center; gap: 3px; height: 22px; margin-left: 6px; padding: 0 8px; border-radius: 11px; background: #ffe9f0; color: #e0245e; font-style: normal; font-size: 12px; font-weight: 600; letter-spacing: 0; vertical-align: 2px; white-space: nowrap; }
.rdm-in svg { width: 11px; height: 11px; fill: currentColor; }
.rdm-r { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-top: 1px solid rgba(16, 16, 20, .06); cursor: pointer; }
.rdm-r > i { flex: 0 0 auto; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, #ff5fa8, #7b5cff); color: #fff; font-style: normal; font-size: 13px; font-weight: 600; }
.rdm-r > span { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rdm-r b { font-size: 15.5px; font-weight: 600; letter-spacing: -.2px; }
.rdm-r small { font-size: 13px; color: #6b6a72; font-variant-numeric: tabular-nums; }
.rdm-r em { display: inline-flex; align-items: center; gap: 4px; font-style: normal; font-size: 13px; color: #5b45e0; }
.rdm-r em svg { flex: 0 0 auto; width: 12px; height: 12px; }
.rdm-r > svg { flex: 0 0 auto; width: 16px; height: 16px; color: #c2c1c8; }
.rdm-r .rdm-p { font-size: 13px; font-weight: 700; color: #101014; letter-spacing: 0; }
.rdm-more { margin: 8px 4px 0; font-size: 12.5px; line-height: 1.4; color: #8b8a92; }
/* «Сохранить «…» в мои рестораны?» */
.rdm-ask { margin-top: 14px; padding: 16px; border-radius: 22px; border: 1.5px solid transparent; background: linear-gradient(135deg, #fff6fa, #f6f3ff) padding-box, linear-gradient(135deg, #ffb3d4, #c9b8ff 55%, #a9dcff) border-box; box-shadow: 0 10px 28px rgba(150, 90, 255, .12); }
.rdm-ask__top { display: flex; gap: 14px; }
.rdm-ask__ic { position: relative; flex: 0 0 auto; width: 46px; height: 54px; }
.rdm-ask__pp { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; gap: 5px; width: 40px; height: 50px; padding: 9px 7px; border-radius: 7px; background: #f6efe3; transform: rotate(-5deg); box-shadow: 0 6px 14px rgba(16, 16, 20, .14); }
.rdm-ask__pp i { display: block; height: 3px; border-radius: 2px; background: #cfc3ad; }
.rdm-ask__pp i.h { background: linear-gradient(90deg, #ff6fae, #8f7bff); }
.rdm-ask__ic > b { position: absolute; right: -2px; bottom: -2px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #e0245e; color: #fff; box-shadow: 0 0 0 2.5px #fff; }
.rdm-ask__ic > b svg { width: 13px; height: 13px; fill: currentColor; }
.rdm-ask__b { min-width: 0; }
.rdm-ask__b b { display: block; font-size: 16.5px; font-weight: 700; line-height: 1.25; letter-spacing: -.35px; text-wrap: balance; }
.rdm-ask__b p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.4; color: #6b6a72; }
.rdm-ask__a { display: flex; gap: 8px; margin-top: 14px; }
.rdm-ask__a button { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 46px; padding: 0 16px; border: 0; border-radius: 23px; background: #101014; color: #fff; font: inherit; font-size: 15px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: transform .2s; }
.rdm-ask__a button:active { transform: scale(.97); }
.rdm-ask__a button svg { width: 16px; height: 16px; fill: #ff5c93; stroke: #ff5c93; }
.rdm-ask__a button.g { background: #fff; color: #101014; box-shadow: inset 0 0 0 1px rgba(16, 16, 20, .12); }
.rdm-ask__a button.g svg { fill: none; stroke: currentColor; }
.rdm-ask.on { display: flex; align-items: center; gap: 12px; background: #fff6fa; border: 0; box-shadow: none; }
.rdm-ask__ok { flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #e0245e; color: #fff; }
.rdm-ask__ok svg { width: 18px; height: 18px; fill: currentColor; }
.rdm-ask.on .rdm-ask__b { flex: 1 1 auto; }
.rdm-ask.on .rdm-ask__b b { font-size: 15px; }
.rdm-ask.on .rdm-ask__b p { font-size: 12.5px; }
.rdm-ask__u { flex: 0 0 auto; min-height: 44px; padding: 0 4px; border: 0; background: none; font: inherit; font-size: 13.5px; font-weight: 600; color: #8b8a92; cursor: pointer; }
/* не распознали, нет связи, нет ключа */
.rdm-err { display: flex; flex-direction: column; align-items: center; padding: 10px 8px 0; text-align: center; }
.rdm-err__ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #f3f2f7; color: #5b45e0; }
.rdm-err__ic svg { width: 24px; height: 24px; }
.rdm-err b { margin-top: 12px; font-size: 19px; font-weight: 700; letter-spacing: -.4px; text-wrap: balance; }
.rdm-err p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.45; color: #6b6a72; text-wrap: pretty; }
.rdm-err__a { margin-top: 18px; }
.rdm-err__a button svg { fill: none; stroke: currentColor; width: 17px; height: 17px; }
@keyframes rdmSk { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.rdm-skl { display: flex; flex-direction: column; gap: 10px; padding: 6px 0 4px; }
.rdm-skl i { display: block; height: 58px; border-radius: 16px; background: linear-gradient(90deg, #efeef3 0%, #f7f6fa 50%, #efeef3 100%) 0 0 / 200% 100%; animation: rdmSk 1.4s linear infinite; }
.rdm-skl i:first-child { width: 62%; height: 44px; }
/* шторка блюда из меню */
.rdm-k2 { display: grid; grid-template-columns: 1fr 1fr; margin-top: 16px; }
.rdm-k2 > div:only-child { grid-column: 1 / -1; }
.rdm-k2 > div + div { padding-left: 16px; border-left: 1px solid rgba(16, 16, 20, .08); }
.rdm-k2 b { display: block; font-size: 32px; font-weight: 700; letter-spacing: -1.2px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.rdm-k2 span { display: block; margin-top: 4px; font-size: 13.5px; color: #6b6a72; }
.rdm-desc { margin: 14px 2px 0; font-size: 15.5px; line-height: 1.45; color: #101014; }
.rdm-desc i { font-style: normal; color: #8b8a92; }
.rdm-say { margin-top: 16px; padding: 14px 16px; border-radius: 18px; background: #f6f6f8; }
.rdm-say small { display: block; font-size: 13px; font-weight: 500; color: #8b8a92; }
.rdm-say p { margin: 6px 0 0; font-size: 17px; line-height: 1.35; color: #101014; }
.rdm-say button { display: inline-flex; align-items: center; gap: 6px; height: 36px; margin-top: 10px; padding: 0 14px; border: 0; border-radius: 18px; background: #fff; color: #101014; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(16, 16, 20, .1); }
.rdm-say button svg { width: 15px; height: 15px; }
.rdm-usual { margin: 14px 2px 0; font-size: 14px; line-height: 1.4; color: #36353b; }
@media (prefers-reduced-motion: reduce) {
  .rdm--scan .rdm-beam, .rdm--a .rdm-beam { animation: none; opacity: 0; }
  .rdm--a .rdm-veil, .rdm--a .rdm-hl, .rdm--a .rdm-sh, .rdm--a .rdm-ask, .rdm__st.is-scan i, .rdm-skl i { animation: none; }
}
/* под стеклянной шапкой — затемнение: страница, сдвинутая к подсветке, уходит под неё мягко */
.rdm-ph::before { content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: 2; height: calc(var(--rf-safe-top, 0px) + 76px); background: linear-gradient(180deg, rgba(13, 12, 16, .9), rgba(13, 12, 16, 0)); pointer-events: none; }

/* ---- src/styles/55-shopping.css ---- */
/* «Дома и покупки» — макет «Еда v8–v9» (ок владельца): «Покупки» (20-screens/shopping.js), «Что есть дома» в
 * карточке тарелки (recipes.js, «Дома есть всё, кроме лаваша») и строка состояния синхронизации списка дома.
 * Правила макета — как есть (phone.html: .sh-*, .pn-dh, .pn-no/.pn-ok, .lg); своё (.sh-note, .sh-sk, .sh-ea, .sh-clr,
 * .pnh-sync, .pn-dh--ask/--ok/--soft) собрано из ближайших элементов того же макета: плашка .pn-line, кнопки .sh-g__a,
 * серая подложка .cm-seg. */

/* логотипы магазинов (утверждены владельцем); класс не «.lg»: так названа лента в «Прогрессе» (.pg4-rib.lg) */
.shl { display: inline-block; flex: 0 0 auto; width: 22px; height: 22px; border-radius: 7px; background: #eee center / cover no-repeat; vertical-align: -6px; box-shadow: 0 0 0 1px rgba(16, 16, 20, .06); }
.shl--m { width: 30px; height: 30px; border-radius: 9px; }
.shl--lavka { background-image: url("/static/miniapp-v3/assets/logo-lavka.c2a7d0e1.png"); } .shl--vkusvill { background-image: url("/static/miniapp-v3/assets/logo-vkusvill.c11b3338.png"); }
.shl--samokat { background-image: url("/static/miniapp-v3/assets/logo-samokat.be85c7a2.png"); } .shl--azbuka { background-image: url("/static/miniapp-v3/assets/logo-azbuka.d52ca179.png"); }

/* ---------- «Покупки» ---------- */
.sh { padding-bottom: calc(var(--rf-safe-bottom, 0px) + 40px); }
.sh-top { margin: 6px 16px 0; padding: 16px 18px 14px; border-radius: 26px; background: #fff; }   /* плашки — без тени (владелец 03.10, 92-plates.css) */
.sh-top > small { font-size: 13px; color: #8b8a92; }
.sh-top__k { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 2px; }
.sh-top__k b { font-size: 36px; font-weight: 700; letter-spacing: -1.4px; font-variant-numeric: tabular-nums; }
.sh-top__k span { font-size: 14px; color: #6b6a72; text-align: right; }
.sh-home { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 12px 12px 12px 14px; border-radius: 16px; background: #f1f8ee; font-size: 13.5px; line-height: 1.38; color: #36533b; cursor: pointer; }
.sh-home > svg:first-child { flex: 0 0 auto; width: 17px; height: 17px; color: #2f7a3f; }
.sh-home span { flex: 1 1 auto; min-width: 0; }
.sh-home b { font-weight: 600; color: #1f5a2a; }
.sh-home > svg:last-child { flex: 0 0 auto; width: 16px; height: 16px; color: #8fb596; }
.sh-seg { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; height: 38px; margin: 18px 16px 0; padding: 3px; border-radius: 13px; background: #e7e7ec; }
.sh-seg button { border: 0; border-radius: 10px; background: none; font: inherit; font-size: 14.5px; font-weight: 600; letter-spacing: -.1px; color: #4a4950; cursor: pointer; }
.sh-seg button.on { background: #fff; color: #101014; box-shadow: 0 1px 2px rgba(16, 16, 20, .08), 0 3px 8px rgba(16, 16, 20, .06); }
.sh-g { margin: 14px 16px 0; padding: 6px 16px 14px; border-radius: 24px; background: #fff; }
.sh-g__h { display: flex; align-items: center; gap: 12px; padding: 10px 0 8px; }
.sh-g__h > span { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.sh-g__h b { font-size: 16px; font-weight: 700; letter-spacing: -.3px; }
.sh-g__h small { font-size: 12.5px; color: #8b8a92; }
.sh-g__h > em { font-style: normal; font-size: 17px; font-weight: 700; letter-spacing: -.4px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sh-g__ic { display: grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; background: #f3f3f6; color: #36353b; }
.sh-g__ic svg { width: 18px; height: 18px; }
.sh-r { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid rgba(16, 16, 20, .06); cursor: pointer; }
.sh-ck { flex: 0 0 auto; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #c9c8cf; color: transparent; }
.sh-ck svg { width: 13px; height: 13px; }
.sh-r.on .sh-ck { background: #101014; box-shadow: none; color: #fff; }
.sh-r > span { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.sh-r > span b { font-size: 15px; font-weight: 500; letter-spacing: -.2px; }
.sh-r.on > span b { color: #a3a2aa; text-decoration: line-through; }
.sh-r > span small { font-size: 12.5px; color: #8b8a92; }
.sh-r > em { flex: 0 0 auto; font-style: normal; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sh-r.on > em { color: #a3a2aa; }
.sh-g__a { display: flex; gap: 8px; margin-top: 8px; }
.sh-g__a button { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border: 0; border-radius: 19px; background: #101014; color: #fff; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.sh-g__a button.g { background: #f3f3f6; color: #101014; }
.sh-g__a button.g > svg { width: 15px; height: 15px; }
/* «Очистить купленное» — той же формы, что кнопки групп, по центру под списком */
.sh-clr { display: flex; justify-content: center; margin: 16px 16px 0; }
.sh-clr button { display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 18px; border: 0; border-radius: 21px; background: #fff; color: #101014; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.sh-clr button svg { width: 15px; height: 15px; color: #2f7a3f; }
.sh .al-note { margin: 22px 20px 0; font-size: 12.5px; line-height: 1.45; color: #8b8a92; }
/* состояния: без сети и отметки в пути — плашка в духе .pn-line */
.sh-note { display: flex; align-items: center; gap: 8px; margin: 6px 16px 0; padding: 10px 14px; border-radius: 14px; background: #fff; font-size: 13.5px; line-height: 1.35; color: #36353b; }
.sh-note > svg { flex: 0 0 auto; width: 16px; height: 16px; color: #6b6a72; }
.sh-note.is-off { background: #fff1e0; color: #7a4600; }
.sh-note.is-off > svg { color: #a35a00; }
.sh-note__sp { flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #d6d5db; border-top-color: #101014; animation: shSpin .8s linear infinite; }
@keyframes shSpin { to { transform: rotate(360deg); } }
/* пусто: две кнопки под карточкой */
.sh-ea { display: flex; gap: 8px; margin: 14px 16px 0; }
.sh-ea button { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 46px; border: 0; border-radius: 23px; font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; }
.sh-ea button svg { width: 16px; height: 16px; }
.sh-ea__k { background: #101014; color: #fff; }
.sh-ea__g { background: #fff; color: #101014; box-shadow: inset 0 0 0 1px rgba(16, 16, 20, .1); }
/* загрузка */
.sh-sk { padding: 6px 16px 0; }
.sh-sk i { display: block; border-radius: 24px; background: linear-gradient(90deg, #e9e9ee 0%, #f3f3f6 50%, #e9e9ee 100%); background-size: 200% 100%; animation: shSk 1.3s ease-in-out infinite; }
.sh-sk__top { height: 132px; border-radius: 26px; } .sh-sk__seg { height: 38px; margin-top: 18px; border-radius: 13px; } .sh-sk__g { height: 230px; margin-top: 14px; }
@keyframes shSk { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .sh-sk i, .sh-note__sp { animation: none; } }

/* ссылка «Покупки ›» у заголовка «Приёмы» в дневнике (план из рецептов) */
.title__link--ic b { display: inline-flex; align-items: center; gap: 6px; }
.title__link--ic b svg { width: 16px; height: 16px; margin-right: 4px; }

/* ---------- «Что есть дома» в карточке тарелки ---------- */
.pn-dh { display: flex; gap: 12px; margin: 18px 0 4px; padding: 14px 16px; border-radius: 20px; background: #f6f5f9; }
.pn-dh__ic { flex: 0 0 auto; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: #fff; color: #36353b; }
.pn-dh__ic svg { width: 20px; height: 20px; }
.pn-dh > div { min-width: 0; }
.pn-dh b { display: block; font-size: 15.5px; font-weight: 600; letter-spacing: -.2px; }
.pn-dh p { margin: 3px 0 0; font-size: 13.5px; line-height: 1.4; color: #6b6a72; }
.pn-dh__a { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pn-dh__a button { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px; border: 0; border-radius: 17px; background: #101014; color: #fff; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.pn-dh__a button svg { width: 15px; height: 15px; }
.pn-dh__a button.g { background: #fff; color: #101014; box-shadow: inset 0 0 0 1px rgba(16, 16, 20, .1); }
.pn-dh__a button.ok { background: #f1f8ee; color: #1f5a2a; }
.pn-dh__a button[disabled] { opacity: .6; cursor: default; }
.pn-dh--ok { align-items: center; background: #f1f8ee; }
.pn-dh--ok .pn-dh__ic { color: #2f7a3f; }
.pn-dh--soft { align-items: center; }
.pn-dh--soft .pn-dh__a { margin-top: 8px; }
.pn-no, .pn-ok { display: inline-flex; align-items: center; gap: 3px; margin-left: 8px; font-style: normal; font-size: 12px; font-weight: 600; vertical-align: 1px; }
.pn-no { height: 20px; padding: 0 7px; border-radius: 10px; background: #fff1e0; color: #a35a00; }
.pn-ok { color: #2f7a3f; font-weight: 500; }
.pn-ok svg { width: 11px; height: 11px; }

/* ---------- «Что есть дома»: сохранение списка ---------- */
.pnh-sync { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; padding: 9px 12px; border-radius: 12px; background: #f2f2f5; font-size: 13px; line-height: 1.35; color: #5f5e66; }
.pnh-sync span { flex: 1 1 auto; min-width: 0; }
.pnh-sync__sp { flex: 0 0 auto; width: 13px; height: 13px; border-radius: 50%; border: 2px solid #d6d5db; border-top-color: #101014; animation: shSpin .8s linear infinite; }
.pnh-sync.is-off { background: #fff1e0; color: #7a4600; }
.pnh-sync.is-err { background: #fdecec; color: #8a2d2d; }
.pnh-sync button { flex: 0 0 auto; height: 28px; padding: 0 11px; border: 0; border-radius: 14px; background: #fff; color: #101014; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.pnh-syncw:empty { display: none; }

/* ---- src/styles/56-ai-chat.css ---- */
/* ИИ-чат с памятью (20-screens/ai-chat.js) — шторка ap-sh макета v12: лента, поле, «Запомнить?»
 * (карточка w12-cf), «Написать коучу», портрет недели. Остальное — из 55-ai-plan.css. */
.ap-sh .ac-feed { padding-bottom: 28px; }
.ap-sh .ac-feed .ai-me + .ai-me, .ap-sh .ac-feed .ai-a + .ai-me, .ap-sh .ac-feed .pb-tip + .ai-me,
.ap-sh .ac-feed .ac-coach + .ai-me, .ap-sh .ac-feed .ai-next + .ai-me { margin-top: 18px; }
.ap-sh .ac-feed .ai-a p { white-space: pre-line; }
.ap-sh .ac-feed .ai-q { white-space: pre-line; overflow-wrap: anywhere; }
/* появление — только у новой реплики, перерисовка ленты старые не «проявляет» (ловушка 10.10) */
.ap-sh .ai-feed.ac-feed .ac-new { animation: apUp .4s .05s cubic-bezier(.2, .8, .2, 1) both; }
.ap-sh .ac-feed .ac-next { margin-top: 14px; }
.ap-sh .ac-coach { margin: 12px 0 0 38px; }
.ap-sh .ac-coach button { flex: 0 0 auto; height: 40px; padding: 0 16px; }
.ap-sh .ac-coach svg { width: 15px; height: 15px; }
.ap-sh .ac-note { margin-left: 38px; }
.ap-sh .ac-rem { margin: 18px 0 4px; }
.ap-sh .ac-rem .df__a button svg { width: 15px; height: 15px; }
.ap-sh .ac-pt { margin-top: 6px; }
.ap-sh .ac-pt__l { margin: 4px 0 6px 38px; padding: 12px 14px 12px; border-radius: 20px; background: #f6f5f9; }
.ap-sh .ac-pt__l .pb-did__r:first-child { margin-top: 0; }
.ap-sh .ac-pt__l .pb-did__r i { background: #fff; }
.ap-sh .ac-pt__n { display: block; margin-top: 10px; font-size: 12px; color: #a3a2aa; }
.ap-sh .ac-seed p { color: #3a3940; }
.ap-sh .ac-ask input[readonly] { color: #a3a2aa; }
/* подсказка заранее — сверху сегодняшнего дня (строка ИИ-плана pf-mini, но с текстом и двумя кнопками) */
.pf-mini.ac-hint { align-items: flex-start; cursor: default; }
.ac-hint > span { gap: 2px; }
.ac-hint small { font-size: 12px; color: #8b8a92; }
.ac-hint b { font-size: 15px; font-weight: 600; line-height: 1.38; letter-spacing: -.2px; color: #101014; text-wrap: pretty; }
.ac-hint__a { display: flex; gap: 8px; margin-top: 10px; }
.ac-hint__a button { display: inline-flex; align-items: center; height: 36px; padding: 0 15px; border: 0; border-radius: 18px; background: #101014; color: #fff; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.ac-hint__a button.g { background: #f3f3f6; color: #101014; }
@media (prefers-reduced-motion: reduce) { .ap-sh .ai-feed.ac-feed .ac-new { animation: none; } }
/* карточки рецептов каталога под ответом ИИ — плитки rp-dish «Под остаток дня», ряд под текстом ответа */
.ap-sh .ac-feed .ac-rc { margin: 12px -20px 0; padding: 0 20px 4px 58px; scroll-padding-left: 58px; }
.ap-sh .ac-feed .ac-rc .rp-dish { flex-basis: 112px; }
.ap-sh .ac-feed .ac-rc .rp-dish__ph { width: 112px; height: 112px; border-radius: 18px; box-shadow: rgba(20, 4, 12, .1) 0 8px 18px; }
.ap-sh .ac-feed .ac-rc .rp-dish b { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* ответ пишется (RF.wait, 19.10): подпись «Думаю» с бегущими точками и две строки будущего ответа */
.ap-sh .ac-wait .ac-wait__b { flex: 1 1 0; min-width: 0; padding-top: 1px; }
.ap-sh .ac-wait .rf-wait { font-size: 17px; color: #55545b; }
.ap-sh .ac-wait .rf-sk--lines { margin-top: 10px; max-width: 300px; }

/* ---- src/styles/56-rest-item.css ---- */
/* Карточка товара или блюда из «Под остаток дня» — макет «Еда v9» (20-screens/rest-item.js). Фото, две главные цифры,
 * из чего калории, описание и метки, «Разбор Re:forma» с добавками, «Влезает в приём», состав и таблица, кнопки внизу.
 * Герой, шапка и нижняя панель — те же .pl4-hero / .dh-hero / .dh-cta, что у карточки тарелки («Тарелки»). */
.ri-scr { background: #fff; }
/* 470 px в макете при шапке 62 px: фото + место под часы и кнопку «Назад» (.pl4-hero__top) */
.ri-hero { height: calc(408px + max(62px, calc(var(--rf-safe-top, 0px) + 12px))); }
.ri-hero--t { background: linear-gradient(150deg, #e9e8ee 0%, #dcdbe2 100%); }
.rf-t-rest-item .dh-cta::before { content: ""; position: absolute; inset: -28px -16px calc(-22px - var(--rf-safe-bottom)); z-index: -1; background: linear-gradient(rgba(255, 255, 255, 0), #fff 45%); pointer-events: none; }
.rf-t-rest-item .dh-body { padding-bottom: calc(118px + var(--rf-safe-bottom, 0px)); }
.rf-t-rest-item .it { padding-top: 22px; }

/* две главные цифры */
.rf-t-rest-item .it-key { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.rf-t-rest-item .it-key > div { display: flex; flex-direction: column; min-width: 0; }
.rf-t-rest-item .it-key > div + div { padding-left: 18px; border-left: 1px solid rgba(16, 16, 20, .08); }
.rf-t-rest-item .it-key b { font-size: 34px; font-weight: 700; letter-spacing: -1.3px; line-height: 1.05; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rf-t-rest-item .it-key small { margin-top: 4px; font-size: 13.5px; line-height: 1.3; color: #6b6a72; }
.rf-t-rest-item .it-nw { white-space: nowrap; }
/* из чего калории */
.rf-t-rest-item .it-mac { margin-top: 18px; padding: 14px 16px 12px; border-radius: 20px; background: #f6f6f8; }
.rf-t-rest-item .it-mac__bar { display: flex; gap: 3px; height: 10px; }
.rf-t-rest-item .it-mac__bar i { border-radius: 5px; min-width: 4px; }
.rf-t-rest-item .it-mac i.p { background: #a3d546; }
.rf-t-rest-item .it-mac i.f { background: #ffb020; }
.rf-t-rest-item .it-mac i.c { background: #5aa0f2; }
.rf-t-rest-item .it-mac i.k { background: #34c08a; }
.rf-t-rest-item .it-mac__l { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin-top: 12px; }
.rf-t-rest-item .it-mac__l span { display: flex; align-items: center; gap: 7px; font-size: 13.5px; color: #6b6a72; }
.rf-t-rest-item .it-mac__l span i { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; }
.rf-t-rest-item .it-mac__l b { margin-left: auto; font-weight: 600; color: #101014; font-variant-numeric: tabular-nums; }
.rf-t-rest-item .it-mac__n { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid rgba(16, 16, 20, .07); font-size: 12.5px; color: #8b8a92; }
.rf-t-rest-item .it-desc { margin: 18px 0 0; font-size: 16px; line-height: 1.5; letter-spacing: -.15px; color: #36353b; text-wrap: pretty; }
.rf-t-rest-item .it-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.rf-t-rest-item .it-tags span { height: 28px; padding: 0 11px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px rgba(16, 16, 20, .1); font-size: 13px; font-weight: 500; line-height: 28px; color: #36353b; }
.rf-t-rest-item .ci-card { margin-top: 18px; padding: 16px 18px; border-radius: 22px; background: #f6f6f8; }
.rf-t-rest-item .ci-card small { display: block; font-size: 13px; font-weight: 500; color: #8b8a92; }
.rf-t-rest-item .ci-card > p { margin: 6px 0 0; font-size: 17px; line-height: 1.38; letter-spacing: -.3px; color: #101014; text-wrap: pretty; }

/* «Разбор Re:forma» */
.rf-t-rest-item .it-rf { position: relative; margin: 22px -4px 0; padding: 18px 18px 16px; border-radius: 26px; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #ffb3d4, #c9b8ff 50%, #a9dcff) border-box; border: 1.5px solid transparent; box-shadow: 0 10px 30px rgba(110, 90, 255, .08); }
.rf-t-rest-item .it-rf__h { display: flex; align-items: center; justify-content: space-between; }
.rf-t-rest-item .it-rf__k { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; letter-spacing: -.1px; background: linear-gradient(90deg, #e0337f, #6a4fd8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rf-t-rest-item .it-rf__k svg { width: 14px; height: 14px; color: #7b4dff; }
.rf-t-rest-item .it-rf__t { margin: 10px 0 0; font-size: 21px; font-weight: 700; line-height: 1.22; letter-spacing: -.6px; color: #101014; text-wrap: balance; }
.rf-t-rest-item .it-pts { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.rf-t-rest-item .it-pts li { display: flex; gap: 10px; font-size: 14.5px; line-height: 1.4; color: #4a4950; }
.rf-t-rest-item .it-pts li > i { flex: 0 0 auto; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; }
.rf-t-rest-item .it-pts li > i svg { width: 12px; height: 12px; }
.rf-t-rest-item .it-pts li.ok > i { background: #e6f6dc; color: #3d8a1f; }
.rf-t-rest-item .it-pts li.no > i { background: #fdecea; color: #c0412f; }
.rf-t-rest-item .it-pts li.inf > i { background: #f1eeff; color: #6a4fd8; }
.rf-t-rest-item .it-pts li b { font-weight: 600; color: #101014; }
/* «Чем дополнить до ★★★» */
.rf-t-rest-item .it-plus { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(16, 16, 20, .07); }
.rf-t-rest-item .it-plus__h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.rf-t-rest-item .it-plus__h b { font-size: 15.5px; font-weight: 700; letter-spacing: -.3px; }
.rf-t-rest-item .it-pr { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 8px; border-radius: 18px; background: #f6f6f8; cursor: pointer; transition: background .2s, box-shadow .2s; }
.rf-t-rest-item .it-pr.on { background: #fff; box-shadow: inset 0 0 0 1.5px #101014; }
.rf-t-rest-item .it-pr__ph { position: relative; flex: 0 0 auto; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 13px; background: #eee center / cover no-repeat; }
.rf-t-rest-item .it-pr__ph--t { background: #e6f4e8; }
.rf-t-rest-item .it-pr__ph em { font-style: normal; font-size: 24px; line-height: 1; }
.rf-t-rest-item .it-pr__lg { position: absolute; right: -6px; bottom: -6px; width: 20px; height: 20px; border-radius: 7px; box-shadow: 0 0 0 2px #f6f6f8; }
.rf-t-rest-item .it-pr.on .it-pr__lg { box-shadow: 0 0 0 2px #fff; }
.rf-t-rest-item .it-pr > span { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.rf-t-rest-item .it-pr > span b { font-size: 14.5px; font-weight: 600; letter-spacing: -.2px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rf-t-rest-item .it-pr > span small { font-size: 12.5px; color: #8b8a92; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rf-t-rest-item .it-pr > em { flex: 0 0 auto; font-style: normal; font-size: 14.5px; font-weight: 700; letter-spacing: -.2px; white-space: nowrap; }
.rf-t-rest-item .it-pr__b { flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #fff; color: #101014; box-shadow: inset 0 0 0 1px rgba(16, 16, 20, .12); }
.rf-t-rest-item .it-pr__b svg { width: 16px; height: 16px; }
.rf-t-rest-item .it-pr.on .it-pr__b { background: #101014; color: #fff; box-shadow: none; }
.rf-t-rest-item .it-plus__f { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 12px; font-size: 13.5px; color: #6b6a72; }
.rf-t-rest-item .it-plus__f b { color: #101014; font-weight: 700; }
.rf-t-rest-item .it-plus__m { flex: 1 0 100%; font-size: 12.5px; color: #8b8a92; font-variant-numeric: tabular-nums; }
.rf-t-rest-item .it-plus__e { margin-top: 10px; font-size: 13.5px; color: #6b6a72; }
.rf-t-rest-item .it-plus__e a { color: #5b45e0; font-weight: 600; cursor: pointer; }
@keyframes riSk { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.rf-t-rest-item .it-plus__sk i { display: block; height: 64px; margin-top: 10px; border-radius: 18px; background: linear-gradient(90deg, #f0eff4 0%, #f8f8fa 50%, #f0eff4 100%) 0 0 / 200% 100%; animation: riSk 1.4s linear infinite; }

.rf-t-rest-item .dh-fit { margin-top: 18px; }
.rf-t-rest-item .dh-fit .rng { margin-top: 14px; }
/* разброс калорий блюда кафе: бывает от … до …, типичная и потолок приёма */
.rng { position: relative; height: 6px; margin-top: 9px; border-radius: 3px; background: #efeff2; }
.rng i { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: linear-gradient(90deg, #cfe9a6, #f6c97a); }
.rng u { position: absolute; top: -4px; width: 2px; height: 14px; border-radius: 1px; background: #101014; }
.rng em { position: absolute; top: -4px; width: 2px; height: 14px; background: #101014; }
.rng-l { position: relative; height: 16px; margin-top: 5px; }
.rng-l span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; font-size: 11px; color: #8b8a92; font-variant-numeric: tabular-nums; }
.rng-l span.k { color: #101014; font-weight: 600; }
.rng-l span.c { color: #101014; }
.rng-l span:last-child:not(.c):not(.k) { transform: translateX(-90%); }

/* состав и пищевая ценность */
.rf-t-rest-item .it-tbl { margin-top: 18px; padding: 16px 18px; border-radius: 22px; background: #f6f6f8; }
.rf-t-rest-item .it-tbl__h b { font-size: 15.5px; font-weight: 700; letter-spacing: -.3px; }
.rf-t-rest-item .it-sost { margin: 8px 0 0; font-size: 14px; line-height: 1.45; color: #4a4950; }
.rf-t-rest-item .it-tbl__g { display: grid; grid-template-columns: 1fr auto auto; gap: 8px 22px; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(16, 16, 20, .07); font-size: 14px; font-variant-numeric: tabular-nums; }
.rf-t-rest-item .it-tbl__g small { font-size: 12px; color: #8b8a92; text-align: right; }
.rf-t-rest-item .it-tbl__g span { color: #6b6a72; }
.rf-t-rest-item .it-tbl__g b { font-weight: 600; text-align: right; }
.rf-t-rest-item .it-keep { display: flex; align-items: center; gap: 6px; margin: 12px 0 0; font-size: 13px; color: #8b8a92; }
.rf-t-rest-item .it-keep svg { flex: 0 0 auto; width: 14px; height: 14px; }
.rf-t-rest-item .ci-note--s { margin: 12px 4px 0; font-size: 12.5px; line-height: 1.45; color: #8b8a92; }

/* кнопки внизу: «В план · 19:30» и «289 ₽» (открыть в магазине) */
.rf-t-rest-item .it-cta { display: flex; gap: 8px; }
.rf-t-rest-item .it-cta .btn { flex: 1 1 auto; width: auto; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 56px; }
.rf-t-rest-item .it-cta .btn svg { width: 17px; height: 17px; }
.rf-t-rest-item .it-cta .btn.on { background: #fff; color: #101014; box-shadow: inset 0 0 0 1.5px #101014; }
.rf-t-rest-item .it-buy { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; height: 56px; padding: 0 16px 0 14px; border: 0; border-radius: 28px; background: #fff; box-shadow: inset 0 0 0 1.5px rgba(16, 16, 20, .12), 0 6px 20px rgba(16, 16, 20, .08); font: inherit; font-size: 16px; font-weight: 700; color: #101014; white-space: nowrap; cursor: pointer; }
.rf-t-rest-item .it-buy > svg { width: 15px; height: 15px; color: #8b8a92; }
.rf-t-rest-item .it-buy .rdy-lg { box-shadow: none; width: 24px; height: 24px; border-radius: 8px; vertical-align: 0; }
@media (prefers-reduced-motion: reduce) { .rf-t-rest-item .it-plus__sk i { animation: none; } }

/* ---- src/styles/57-sheet-day-week.css ---- */
/* Макет «Дневник и разбор: правки 10.10» — раздел 3 (шторка блюда: карандаш и подсказки из базы)
 * и раздел 6 (разбор дня на «Сегодня»: крестик, полоска-таймер, строка после сворачивания).
 * Размеры, цвета и тексты — из CSS макета (.dsh …, .dy .rv/.slim …), в языке листа блюда v3. */

/* ---------- шторка блюда: название с карандашом ---------- */
.ds-nm { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ds-nm .nv-sheet__t { flex: 0 1 auto; min-width: 0; }
/* размеры шапки, КБЖУ и порции — как в макете (.dsh .nm b 21px, .kb5 b 22px / small 11px, .por b 44px) */
.ds-h__b .ds-nm .nv-sheet__t { font-size: 21px; line-height: 1.2; letter-spacing: -.4px; }
.ds-kb { padding: 12px 4px; border-radius: 18px; margin-top: 16px; }
.ds-kb b, .ds-kb > .k b { font-size: 22px; letter-spacing: -.3px; }
.ds-kb small { font-size: 11px; font-weight: 400; letter-spacing: .04em; }
.ds-port__v b { font-size: 44px; }
.ds-pen { width: 30px; height: 30px; border-radius: 50%; background: #f1f1f4; display: grid; place-items: center; flex: 0 0 auto; border: 0; padding: 0; color: #101014; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ds-pen svg { width: 14px; height: 14px; }
.ds-ni { display: flex; align-items: center; gap: 2px; height: 48px; border-radius: 14px; background: #f3f3f6; box-shadow: inset 0 0 0 1.5px #101014; padding: 0 12px; }
.ds-ni__in { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 18px; font-weight: 600; letter-spacing: -.2px; color: #101014; padding: 0; -webkit-appearance: none; appearance: none; caret-color: #101014; }
.ds-ni__x { margin-left: auto; width: 22px; height: 22px; border-radius: 50%; background: #c7c7cc; display: grid; place-items: center; border: 0; padding: 0; flex: 0 0 auto; cursor: pointer; }
.ds-h__b .ds-ni + .ds-src { margin-top: 5px; }
.ds-base { color: #1f8a4c; font-weight: 600; }

/* подсказки из базы — поверх листа, под шапкой (top ставит код) */
.ds-sug { position: absolute; left: 20px; right: 20px; background: #fff; border-radius: 18px; box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .28), 0 0 0 .5px rgba(0, 0, 0, .06); z-index: 5; overflow: hidden; }
.ds-sug__h { font-size: 12px; font-weight: 600; color: #8b8a91; padding: 10px 14px 4px; letter-spacing: .02em; text-transform: uppercase; }
.ds-sug button { display: flex; width: 100%; align-items: center; gap: 10px; padding: 10px 14px; text-align: left; border: 0; background: none; font: inherit; color: #101014; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ds-sug button + button { border-top: .5px solid #f0f0f3; }
.ds-sug button:active { background: #f6f6f8; }
.ds-sug .k { flex: 1; min-width: 0; }
.ds-sug b { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; }
.ds-sug b u { text-decoration: none; background: #fff2a8; border-radius: 3px; }
.ds-sug small { display: block; font-size: 12px; color: #8b8a91; margin-top: 1px; }
.ds-sug .kc { font-size: 13px; color: #77767d; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ds-sug .own b { font-weight: 500; }

/* выбрали из базы: цифры на секунду зеленеют, под ними — «взяли из базы» */
.nv-sheet--ds .ds-kb b { transition: color .3s; }
.nv-sheet--ds.is-pick .ds-kb b { color: #1f8a4c; }
.ds-note { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 13px; color: #1f8a4c; }
.ds-note svg { flex: 0 0 auto; }

/* ---------- разбор дня на «Сегодня»: крестик, таймер, свёрнутая строка ---------- */
.rj-rc--live { position: relative; }
.rj-rc--live .rj-rc__h { padding-right: 34px; }
.rj-rc__x { position: absolute; right: 12px; top: 12px; width: 32px; height: 32px; border-radius: 50%; background: #f1f1f4; display: grid; place-items: center; border: 0; padding: 0; cursor: pointer; z-index: 2; -webkit-tap-highlight-color: transparent; }
.rj-rc__x svg { width: 11px; height: 11px; }
.rj-rc__tm { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: #101014; transform-origin: left; animation: rjTm 120s linear forwards; animation-play-state: paused; pointer-events: none; }
.rj-rc__tm.is-run { animation-play-state: running; }
@keyframes rjTm { to { transform: scaleX(0); } }
.rj-slim { display: flex; align-items: center; gap: 10px; height: 58px; padding: 0 14px; border-radius: 18px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.rj-slim .rem { width: 30px; height: 30px; border-radius: 9px; }
.rj-slim__t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rj-slim__t b { font-size: 15px; font-weight: 600; letter-spacing: -.2px; }
.rj-slim__t small { color: #8b8a91; font-size: 13px; margin-left: 4px; }
.rj-slim .chev { margin-left: auto; color: #b7b6bc; display: grid; place-items: center; flex: 0 0 auto; }
.rj-slim .chev svg { width: 16px; height: 16px; }

/* ---- src/styles/90-frame.css ---- */
/* Рамка приложения: прототип нарисован в «телефоне» 392×840 со своим
 * статус-баром и скруглением 52 px. В продукте окно — весь экран Telegram /
 * браузера: здесь это переопределяется. Файл идёт ПОСЛЕДНИМ, чтобы побеждать
 * правила прототипа из 20-proto-kit.css (и тех, что area-агенты добавят). */

html, body { height: 100%; }
body { margin: 0; padding: 0; background: var(--rf-page); overflow: hidden; overscroll-behavior: none; }
/* масштаб всегда 1:1: двойной тап не увеличивает (щипок и ctrl+колесо — 13-nozoom.js);
   свои touch-action (none / pan-y) у линеек и листов пересекаются с этим и работают */
html, body { touch-action: manipulation; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

.rf-app {
  position: fixed; left: 0; right: 0; top: 0;
  width: auto; height: var(--rf-vh, 100%); min-height: 0;
  margin: 0 auto; max-width: 560px;
  border-radius: 0; box-shadow: none; overflow: hidden;
  display: block; background: var(--rf-page);
}
.rf-panes { position: absolute; inset: 0; }

/* переходы: панель уходит (в прототипе .leave жил в CSS_NV, но в состояниях его не поймать) */
.rf-pane.leave { opacity: 0; transform: scale(.985); }
.rf-pane.rf-sub.leave { transform: translateX(100%); opacity: 1; }
/* Переходы экранов как в iOS (08-router.js show): вперёд — новый въезжает справа поверх,
   прежний сдвигается влево под ним (rf-in / rf-under); назад — верхний уезжает вправо, прежний
   возвращается слева (rf-out / rf-ret → rf-back). Обе панели непрозрачны всё время перехода:
   растворение вложенного экрана давало «двойной кадр», а уходящая вправо старая панель — щель
   с пустым фоном. Только transform — композитор, без перерисовки; will-change — лишь на время
   перехода (слой на каждую из десятка панелей съел бы память вкладки iPhone). Скрытая панель
   не рисуется вовсе (visibility), и её возврат «на место» не виден под текущей. */
.rf-app { --rf-push-t: .46s; --rf-push-e: cubic-bezier(.32, .72, 0, 1); }
.rf-pane:not(.on):not(.leave) { visibility: hidden; }
.rf-pane.rf-sub { transition: transform var(--rf-push-t) var(--rf-push-e); }
.rf-pane.rf-in, .rf-pane.rf-back, .rf-pane.rf-under, .rf-pane.rf-out { transition: transform var(--rf-push-t) var(--rf-push-e), opacity 0s; will-change: transform; }
.rf-pane.rf-in, .rf-pane.rf-out { z-index: 7; }
.rf-pane.rf-under { z-index: 4; }
.rf-pane.leave.rf-under { opacity: 1; transform: translateX(-24%); }
.rf-pane.leave.rf-out { opacity: 1; transform: translateX(100%); }
.rf-pane.rf-ret { visibility: visible; opacity: 1 !important; transform: translateX(-24%) !important; transition: none !important; }
/* Переход в экран без меню и обратно (карточка упражнения ↔ «Вопрос тренеру»): меню (z 30) уезжало
   вниз ПОВЕРХ въезжающего экрана и 0,3 с висело на его нижних кнопках. На время перехода меню —
   между панелями: новый экран въезжает поверх него, при возврате уходящий открывает его, как в iOS. */
.rf-app.rf-full:has(.rf-pane.rf-in.rf-pane--full) .dock,
.rf-app:not(.rf-full):has(.rf-pane.rf-out.rf-pane--full) .dock { z-index: 6; }
/* то же у экрана с крупной кнопкой внизу (00-core/16-cta.js): меню уходит под въезжающий экран
   и выходит из-под уходящего, а не висит поверх его кнопки */
.rf-app.rf-cta:has(.rf-pane.rf-in.rf-pane--cta) .dock,
.rf-app:not(.rf-cta):has(.rf-pane.rf-out.rf-pane--cta) .dock { z-index: 6; }
/* сцена приёма по завершении («Готово», запись в фоне, отмена, удаление) уезжает вниз — под ней уже дневник или
   Главная (08-router.js .rf-drop; без «уменьшить движение» класс не ставится). Едет поверх таб-бара (.dock, z 30):
   он уже на месте под страницей, как у листа iOS, а не выскакивает поверх неё */
.rf-pane.rf-sub.leave.rf-drop { z-index: 31; transform: translate3d(0, calc(100% + 40px), 0); opacity: 1; transition: transform .42s cubic-bezier(.4, 0, .9, .6) .15s; }

/* Главная → «Мой план»: слепок баннера недели раскрывается в героя плана (08-router.js morph) */
.rf-morph { position: absolute; z-index: 8; border-radius: 22px; pointer-events: none; overflow: hidden; transition: left .55s var(--ease), top .55s var(--ease), width .55s var(--ease), height .55s var(--ease), border-radius .55s var(--ease), opacity .32s ease; }
.rf-morph.go { left: 0 !important; top: 0 !important; width: 100% !important; height: calc(318px + var(--rf-safe-top)) !important; border-radius: 0 !important; }
.rf-morph.fade { opacity: 0; }
.rf-pane.rf-instant, .rf-pane.rf-sub.rf-instant { transition: none; transform: none; }

/* прокрутка: вместо 54 px статус-бара макета — настоящие инсеты. Снизу —
   место под РАЗВЁРНУТЫЙ таб-бар (64 px + отступ), даже когда он сжат при
   прокрутке: последний пункт всегда можно докрутить над меню. */
.rf-scr {
  padding-top: calc(var(--rf-safe-top) + 6px);
  padding-bottom: calc(96px + var(--rf-safe-bottom));
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.rf-app .rf-pane.rf-pane--full .rf-scr { padding-bottom: calc(28px + var(--rf-safe-bottom)); }

/* полоса под системным статус-баром / кнопками Telegram в фулскрине:
   контент уезжает под неё, как под .sb::before макета */
.rf-topfade {
  position: absolute; left: 0; right: 0; top: 0; z-index: 20; pointer-events: none;
  height: calc(var(--rf-safe-top) + 8px);
  background: linear-gradient(180deg, var(--rf-page) 0%, var(--rf-page) 70%, rgba(var(--rf-page-rgb), 0) 100%);
}
/* её цвет — цвет экрана под ней (14-chrome.js, как more_brand.js прототипа); у фото,
   многоцветного градиента и тёмного героя атрибута нет — полоса прозрачная, экран рисует
   себя под часами сам (раньше оставался розовый по умолчанию — розовый кусок над тёмной
   картинкой упражнения). Точечные правила экранов сильнее (:where не добавляет веса): затемнение
   над фото приёма, растушёвка над фото в профиле коуча при прокрутке. */
.rf-app[data-sbbg] .rf-topfade { background: linear-gradient(180deg, var(--rf-sbbg) 0%, var(--rf-sbbg) 70%, var(--rf-sbbg0) 100%) !important; }
:where(.rf-app:not([data-sbbg])) .rf-topfade { background: none; }

/* «пробы» цвета краёв для iOS 26 (14-chrome.js): полосу под часами и низ WebKit красит фоном
   фиксированного блока у края экрана, theme-color не читает. Проба выше всех слоёв, касаний не
   ловит и невидима: фон обрезан до пустой области содержимого (вся высота — отступ), а WebKit
   берёт цвет из стиля. Выше 10 px — тоньше он блок не считает. */
.rf-tint {
  position: fixed; left: 0; right: 0; z-index: 2147483000; pointer-events: none;
  height: 12px; padding-top: 12px; box-sizing: border-box; background-clip: content-box;
}
.rf-tint--top { top: 0; }
.rf-tint--bottom { bottom: 0; }

/* главные вкладки — фон --rf-tab (сегодня белый: прототип — белый «телефон», белые карточки
   с тенью); --rf-page (сегодня серый #f3f3f5) — «Ещё» и внутренние xs-страницы (.rf-scr.xs-scr).
   Оба тона — токены 00-tokens.css: оттуда их же читают подложка под часами, шапка Telegram
   и <meta theme-color> (14-chrome.js), поэтому смена тона — одна правка токена. */
.rf-pane[data-tab="more"] .rf-scr, .rf-scr.xs-scr { background: var(--rf-page); }
.rf-pane:not(.rf-sub) { background: var(--rf-tab); }
.rf-pane[data-tab="progress"] > .rf-scr.xs-scr { background: var(--rf-tab); }

/* в Telegram «Назад» — кнопка в капсуле Telegram (01-tg.js ставит html.tg-back),
   «‹» страницы с тем же действием прячем: иначе два «Назад» рядом. В браузере — на месте */
html.tg-back .rf-pane :is(.xs-back, .pl4-gb, .gt-rb, .ot-back, .tp-back, .dhead__btn, .cb-hb, .gp-wk__back, .pfx__rb, .px-ic)[data-xa="back"] { visibility: hidden; pointer-events: none; }

/* таб-бар над «домашней полоской» iPhone; в Telegram-фулскрине env() = 0 — берём инсеты SDK.
   Сжатый (.mini, 12-dock.js) — ниже на 4 px, как в прототипе (22 → 18). */
.dock { bottom: max(14px, calc(var(--rf-safe-bottom) - 12px)); }
/* уход и возврат меню — одним движением в обе стороны: базовое правило прототипа
   (20-proto-kit.css, .dock в CSS_NV) анимировало только bottom, и меню, уехав плавно,
   возвращалось рывком (экран с кнопкой → экран без неё, выход из fullscreen) */
.dock { transition: bottom .5s var(--spring), transform .35s var(--ease), opacity .25s; }
.dock.mini { bottom: calc(max(14px, calc(var(--rf-safe-bottom) - 12px)) - 4px); }
.dock[hidden] { display: none; }
/* трекер запущен: вкладки открылись — красная точка до первого захода (15-tabnew.js, .pre-new-* прототипа) */
.rf-app.rf-new-train .tab[data-tab="train"]::after, .rf-app.rf-new-progress .tab[data-tab="progress"]::after { content: ""; position: absolute; top: 6px; right: calc(50% - 16px); width: 8px; height: 8px; border-radius: 50%; background: #ff3b30; box-shadow: 0 0 0 2px #fff; }

/* таб-бар: когда его нет. Экран без меню — только метка fullscreen в
   RF.screen (роутер ставит .rf-full); остальное — слои и режимы поверх
   экрана: онбординг до старта, правка с панелью «Сохранить», чат, замок
   доступа, оценка встречи (сами правила скрытия — в перенесённом CSS
   прототипа: .rf-app.rf-full .dock в 20-proto-kit.css и т. д.) и крупная кнопка внизу
   экрана (.rf-cta, 00-core/16-cta.js). --rf-dock-space — сколько места снизу занимает
   развёрнутое меню (0, когда его нет): по нему нижние панели действий
   экранов встают НАД меню. */
.rf-app { --rf-dock-on: calc(64px + max(14px, calc(var(--rf-safe-bottom) - 12px))); --rf-dock-space: var(--rf-dock-on); }
.rf-app.rf-full, .rf-app.pre-ob, .rf-app.xs-editing, .rf-app.in-chat, .rf-app.gl-on, .rf-app.mrt-on, .rf-app.an-editing, .rf-app.rf-cta { --rf-dock-space: 0px; }
/* Крупная кнопка внизу экрана — меню нет (владелец 06.10.2026: «когда внизу размещаем крупную
   кнопку, нижнее меню не должно отображаться… так не делают»). Один механизм на все экраны:
   00-core/16-cta.js находит на текущем экране нижнюю кнопку действия и ставит .rf-cta, меню
   уезжает тем же движением, что у fullscreen (.dock: transition в 20-proto-kit.css), а
   --rf-dock-space = 0 опускает панель кнопки к низу экрана (отступ — «домашняя полоска»). */
.rf-app.rf-cta .dock { transform: translateY(130px); opacity: 0; pointer-events: none; }
/* липкая кнопка внутри прокрутки (.rf-pane--stick): запас прокрутки под меню ей не нужен —
   sticky считает bottom от области без padding, и кнопка висела бы на 96 px выше низа; «домашнюю
   полоску» кнопка держит своим отступом (--rf-safe-bottom). Экраны fullscreen — как были */
.rf-app .rf-pane.rf-pane--stick:not(.rf-pane--full) > .rf-scr { padding-bottom: 0; }
/* лист «Дневника» с кнопкой: запаса под меню (108 px прототипа) нет — меню под ним скрыто */
.rf-app .nv-sheet.dy-sheet:has(.btn) { padding-bottom: max(20px, calc(var(--rf-safe-bottom) + 8px)); }
/* нижняя панель действий экрана (xs-bar2, ot-bar, подвал слоя тренировки
   gt-foot, кнопка рецепта/сборки тарелки hp-cta) при видимом меню: кнопка над
   меню, фон панели уходит под стекло; прокрутке — столько же места в конце */
.rf-app .xs-bar2, .rf-app .ot-bar, .rf-app .rf-pane > .gt-foot { padding-bottom: max(30px, calc(var(--rf-safe-bottom) + 10px), calc(var(--rf-dock-space) + 12px)); }
.rf-app .rf-pane > .hp-cta { bottom: max(calc(22px + var(--rf-safe-bottom)), calc(var(--rf-dock-space) + 12px)); }
.rf-app:has(.xs-bar2.on, .ot-bar.on) .rf-pane.on .rf-scr > .xs-root::after,
.rf-app .rf-pane.on:has(> .gt-foot.gt-foot--on, > .hp-cta) .rf-scr > .xs-root::after { content: ""; display: block; flex: none; height: max(0px, calc(var(--rf-dock-space) - 18px)); }
/* Переход между экраном с меню и экраном без него (карточка упражнения → «Вопрос тренеру»):
   .rf-full у приложения меняется в первом кадре, и уходящая панель (.leave) сразу получала
   ЧУЖОЙ отступ под меню — её нижняя кнопка прыгала вниз под ещё видимое меню (или вверх).
   Уходящая панель держит свой отступ до конца перехода, вместе с хвостом прокрутки. */
.rf-app.rf-full .rf-pane.leave:not(.rf-pane--full):not(.rf-pane--cta) { --rf-dock-space: var(--rf-dock-on); }
.rf-app:not(.rf-full) .rf-pane.leave.rf-pane--full { --rf-dock-space: 0px; }
/* то же для экрана с крупной кнопкой внизу (.rf-pane--cta, 16-cta.js): уходящая панель держит свой отступ */
.rf-app.rf-cta .rf-pane.leave:not(.rf-pane--cta):not(.rf-pane--full) { --rf-dock-space: var(--rf-dock-on); }
.rf-app:not(.rf-cta) .rf-pane.leave.rf-pane--cta { --rf-dock-space: 0px; }
.rf-app .rf-pane.leave:has(> .gt-foot.gt-foot--on, > .hp-cta) .rf-scr > .xs-root::after { content: ""; display: block; flex: none; height: max(0px, calc(var(--rf-dock-space) - 18px)); }

.rf-toast { bottom: calc(110px + var(--rf-safe-bottom)); z-index: 80; }
.rf-app.rf-full .rf-toast { bottom: calc(28px + var(--rf-safe-bottom)); }
.rf-toast.is-err { background: rgba(143, 29, 51, .94); }
.xs-undo { bottom: calc(116px + var(--rf-safe-bottom)); }
.rf-app.rf-full .xs-undo { bottom: calc(24px + var(--rf-safe-bottom)); }
/* подсказка и «Отменить» — над нижней панелью действий, а она теперь над меню */
.rf-app:has(.xs-bar2.on) .rf-toast { bottom: max(calc(110px + var(--rf-safe-bottom)), calc(var(--rf-dock-space) + 84px)); }
.rf-app:has(.xs-bar2.on) .xs-undo { bottom: max(calc(116px + var(--rf-safe-bottom)), calc(var(--rf-dock-space) + 90px)); }
.rf-app.ot-bar-on .rf-toast, .rf-app.ot-bar-on .xs-undo { bottom: max(calc(176px + var(--rf-safe-bottom)), calc(var(--rf-dock-space) + 162px)); }

/* лист: над «домашней полоской», не выше верхнего инсета */
.xs-sheet { bottom: max(8px, calc(var(--rf-safe-bottom) - 18px)); max-height: calc(100% - var(--rf-safe-top) - 24px); }
/* Шторка кита — та же кривая и длительность, что у переходов экранов и листов «Тренировок»:
   прототипная «пружина» (--spring, перелёт 1.5) на iPhone читалась как рывок в конце. Закрытая
   уезжает целиком: translateY(110%) от листа, поднятого над домашней полоской, оставлял его
   верхний край белой полоской под таб-баром. */
.xs-sheet { transform: translateY(calc(100% + 40px)); transition: transform var(--rf-push-t) var(--rf-push-e); }
.rf-app.xs-sh .xs-sheet { transform: none; }
.xs-veil { transition: opacity var(--rf-push-t) var(--rf-push-e); }
.xs-sheet__f { padding-bottom: max(22px, calc(var(--rf-safe-bottom) - 4px)); }
.xs-sheet.is-busy .xs-sheet__x { opacity: .4; }
.rf-btn-spin {
  display: inline-block; width: 16px; height: 16px; margin: 0 8px -3px 0; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: rfSpin .8s linear infinite;
}
.xs-sec .rf-btn-spin { border-color: rgba(17, 17, 17, .2); border-top-color: #111; }
@keyframes rfSpin { to { transform: rotate(360deg); } }
.xs-undo.is-err .xs-undo__r .fg { opacity: 0; }
.xs-undo.is-err button { visibility: hidden; }

/* превью CRM: плашка поверх (preview.js вставляет её в body) */
.preview-banner {
  position: fixed; left: 50%; transform: translateX(-50%); top: calc(var(--rf-safe-top) + 6px); z-index: 60;
  max-width: calc(100% - 32px); padding: 8px 14px; border-radius: 14px;
  background: #eaf0fa; color: #263b5c; text-align: center; font-size: 12px; line-height: 1.35;
  box-shadow: 0 6px 18px rgba(20, 4, 12, .08);
}
.preview-banner strong, .preview-banner span { display: block; }

/* экраны состояний: загрузка, вход, Telegram, доступ, связь */
.rf-state {
  position: absolute; inset: 0; z-index: 90; display: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: calc(var(--rf-safe-top) + 24px) 28px calc(var(--rf-safe-bottom) + 24px);
  background: var(--rf-page); text-align: center;
}
.rf-state.on { display: flex; }
.rf-state p { margin: 0; font-size: 14.5px; line-height: 1.45; color: #8e8e93; }
.rf-spin { width: 28px; height: 28px; border-radius: 50%; border: 2.5px solid #e5e5ea; border-top-color: #111; animation: rfSpin .8s linear infinite; }
.rf-msg { width: 100%; max-width: 340px; display: flex; flex-direction: column; align-items: center; }
.rf-msg__ic { width: 60px; height: 60px; border-radius: 50%; background: #fff; display: grid; place-items: center; color: #111; margin-bottom: 16px; }
.rf-msg__ic svg { width: 26px; height: 26px; }
.rf-msg h2 { margin: 0 0 8px; font-size: 21px; font-weight: 600; letter-spacing: -.45px; color: #111; }
.rf-msg p { margin: 0 0 22px; }
.rf-msg .btn { box-shadow: none; }
.rf-msg__sec { margin-top: 8px; height: 44px; border: 0; background: none; font-family: inherit; font-size: 15.5px; font-weight: 600; color: #111; cursor: pointer; }

/* широкий экран (CRM-превью, браузер на компьютере): колонка телефона по центру */
@media (min-width: 600px) {
  body { background: #e4e4e8; }
  .rf-app { box-shadow: 0 0 0 1px rgba(12, 14, 18, .06), 0 24px 60px rgba(20, 4, 12, .12); }
}

/* логотип на экране загрузки — картинка файлом из src/assets (сборка даёт имя с хэшем) */
.rf-logo { width: 116px; height: 23px; margin-bottom: 18px; background: url("/static/miniapp-v3/assets/reforma-logo.620b55ea.svg") center / contain no-repeat; }

/* поля ввода — не мельче 16 px: иначе iOS (Safari, Telegram) увеличивает
   страницу при фокусе и не возвращает масштаб. Правила прототипа ставили
   14–15.5 px; здесь — те же селекторы, 16 px (сторож — test_miniapp_v3_shell.py:
   последнее значение font-size у селектора поля в собранном CSS ≥ 16 px). */
input, textarea, select { font-size: 16px; }
.ad__note__in, .nt-ta, .ds-in, input.ds-in, .mrt-ta, .pq-ta, .bd-search,
.gd-q input, .gd-rq input, .gl-ta textarea, .pf-acf input, .pfx__note textarea, .gp-wk__ta textarea,
.tq-in input, .tq-in textarea, .lb-search input, .ad__ta, .ad .dy-ta,
.trx .v5-field input, .trx .v5-field textarea, .trx .v5-add2 .v5-field--note input { font-size: 16px; }

/* ---- src/styles/91-avatar.css ---- */
/* Аватар-инициал: токены и единый компонент RF.kit.avatar (00-core/08-avatar.js).
 * ЦВЕТ АВАТАРОВ — ТОЛЬКО ЗДЕСЬ. Решение владельца 29–30.09 (макет
 * design-preview/shell-bg-avatars, вариант А, как согласовано 27.09, коммит 1ec9bfbc):
 * розово-сиреневый градиент #f6c8de → #caa0e0, буква #4a1a33 — одна палитра на всех
 * (клиент, тренер, коуч, врач); с фото — фото. Это исключение из «розовый — только выбор».
 *   --rf-av-bg / --rf-av-fg — подложка и буква «по умолчанию» (старые заглушки .xs-av,
 *                             .hm-av, .tm-avs i читают их же);
 *   --rf-av-tN-*            — тон N компонента .rf-av (стабильный от имени), сегодня = по умолчанию;
 *   --rf-av-role-*          — при желании фиксированный цвет роли (coach / trainer / doctor). */
:root {
  --rf-av-bg: linear-gradient(150deg, #f6c8de, #caa0e0);
  --rf-av-fg: #4a1a33;
  --rf-av-t0-bg: var(--rf-av-bg); --rf-av-t0-fg: var(--rf-av-fg);
  --rf-av-t1-bg: var(--rf-av-bg); --rf-av-t1-fg: var(--rf-av-fg);
  --rf-av-t2-bg: var(--rf-av-bg); --rf-av-t2-fg: var(--rf-av-fg);
  --rf-av-t3-bg: var(--rf-av-bg); --rf-av-t3-fg: var(--rf-av-fg);
  --rf-av-t4-bg: var(--rf-av-bg); --rf-av-t4-fg: var(--rf-av-fg);
  --rf-av-t5-bg: var(--rf-av-bg); --rf-av-t5-fg: var(--rf-av-fg);
}

/* компонент */
.rf-av {
  --av-s: 44px;
  position: relative; flex: 0 0 auto; display: grid; place-items: center; overflow: hidden;
  width: var(--av-s); height: var(--av-s); border-radius: 50%;
  font-size: calc(var(--av-s) * .4); font-weight: 600; letter-spacing: -.02em; line-height: 1;
  background: var(--av-bg, var(--rf-av-bg)); color: var(--av-fg, var(--rf-av-fg));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
}
.rf-av--xs { --av-s: 26px; } .rf-av--s { --av-s: 34px; } .rf-av--m { --av-s: 44px; } .rf-av--l { --av-s: 56px; } .rf-av--xl { --av-s: 92px; }
.rf-av--sq { border-radius: 30%; }
.rf-av[data-tone="0"] { --av-bg: var(--rf-av-t0-bg); --av-fg: var(--rf-av-t0-fg); }
.rf-av[data-tone="1"] { --av-bg: var(--rf-av-t1-bg); --av-fg: var(--rf-av-t1-fg); }
.rf-av[data-tone="2"] { --av-bg: var(--rf-av-t2-bg); --av-fg: var(--rf-av-t2-fg); }
.rf-av[data-tone="3"] { --av-bg: var(--rf-av-t3-bg); --av-fg: var(--rf-av-t3-fg); }
.rf-av[data-tone="4"] { --av-bg: var(--rf-av-t4-bg); --av-fg: var(--rf-av-t4-fg); }
.rf-av[data-tone="5"] { --av-bg: var(--rf-av-t5-bg); --av-fg: var(--rf-av-t5-fg); }
.rf-av--img { background: #e5e5ea; box-shadow: none; }
.rf-av--img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* старые серые заглушки-инициалы (перенесённый CSS прототипа) — на те же токены; те же селекторы
   и !important, что у правил-оригиналов (20-proto-kit, 40-home-plan, 40-more-area) */
.xs-av:not(.xs-av--ph):not(.xs-av--img), .tm-avs i { background: var(--rf-av-bg) !important; color: var(--rf-av-fg) !important; }
.hm-av:not(.gh-avph):not(.hp-avph) { background: var(--rf-av-bg) !important; color: var(--rf-av-fg) !important; }

/* ---- src/styles/92-plates.css ---- */
/* Плашки на странице — без контура, тени и ореола. Владелец 03.10: «на “Ещё” и в тренировках появился
 * какой-то контур/тень у плашек, это нужно убрать!», затем: «тени у плашек на Главной, в Дневнике и
 * Прогрессе — убрать везде, как в “Ещё” и “Тренировках”». Рамку-тень --rf-card-edge (30.09) сняли
 * целиком; здесь гасятся тени, волосяные контуры и цветные ореолы плашек из стилей прототипа. Файлы
 * 20-/40-/42-/45-/47-diary-game СГЕНЕРИРОВАНЫ и руками не правятся — перекрываем теми же селекторами
 * (файл позже, специфичность та же); рукописные стили (41-/42-home-train/46-/47-/50-/51-) правлены на месте.
 *
 * НЕ плашки — их тени несут функцию и остаются: шторки над затемнением (.xs-sheet и т.п.), плавающий
 * таб-бар и нижняя панель действий (.ot-bar), плавающие кнопки «назад» и шапки над прокруткой, кнопки и
 * стекло поверх фото/видео (читаемость), всплывающие тосты/подсказки/баннер установки, «бегунок»
 * сегментного переключателя, кольца выбора (.on/.sel), фокус и рамки полей ввода, разделители строк
 * внутри карточки, ободки аватаров, тени CTA-кнопок, предметные иллюстрации (тарелка, страница
 * документа, банковская карта, тур-иллюстрации онбординга). Сторож — test_one_page_tone_everywhere_and_
 * plates_without_edge в tests/test_miniapp_v3_shell.py: новую плашку прототипа гасить здесь же. */

/* общая тень карточки прототипа (.list, .score, .wgrid, .dg-shelf) */
:root { --card-sh: none; }

/* «Ещё»: плашка «Идеи и замечания» (20-proto-kit.css) */
.fb-ban { box-shadow: none; }

/* «Тренировки» (40-training-hub.css): белые плашки хаба и истории — тень + волосяной контур
   (--trh-sh), тёмная карточка «Сегодня» и баннер фокус-зоны — ореол тени на розовом фоне */
.trx .trh { --trh-sh: none; }
.trx .trh-wo--hero { box-shadow: none; }
.trx .v5-banner, .trx .trh .v5-banner { box-shadow: none; }
/* предложение «Хочу программу» без программы (v5-offer, атлас B-02) */
.trx .v5-offer { box-shadow: none; }
/* карточка тренировки и её подэкраны: нижний волосяной край плашки */
.trx .gt-card { box-shadow: none; }
/* вступление к тренировкам (40-training.css): контурные карточки и карточка тренера */
.tqs-3 { box-shadow: none; }
.tqs-rule { box-shadow: none; }
.tqs-coach__id { box-shadow: none; }
.tqs-coach__p { box-shadow: none; }
.tqs-coach__v { box-shadow: none; }

/* Главная (40-home-plan.css): карточки цели/встречи/баннеров, лист «План на сегодня» и его
   плашки, тёмные и цветные карточки (замеры, анкета, план недели) — тень и ореол цвета */
.hm-card { box-shadow: none; }
.hm-sheet { box-shadow: none; }
.hm-kb { box-shadow: none; }
.hm-plan { box-shadow: none; }
.hm-dark { box-shadow: none; }
/* круглая кнопка чата в шапке Главной — в потоке страницы, не плавает: вместо ореола тонкий ободок,
   как у кнопок листа «План на сегодня» (.hm-nb) и «Тренировок» */
.hm-chat { box-shadow: rgba(12, 14, 18, 0.08) 0px 0px 0px 1px inset; }

/* «Мой план», материалы, неделя, библиотека (40-home-plan.css) */
.pl4-coach { box-shadow: none; }
.pg-w { box-shadow: none; }
.pg-w.now { box-shadow: none; }
.ct { box-shadow: none; }
.rc { box-shadow: none; }
.gh-pl-card { box-shadow: none; }
.pl4-cov { box-shadow: none; }
.gh-lbsoon { box-shadow: none; }
.nv-list { box-shadow: none; }
.gh-ag__rows { box-shadow: none; }
.dark { box-shadow: none; }

/* Дневник (40-diary.css): итоги дня, приёмы и их фото, вердикт прошлого дня, полоса, скелетоны */
.goals { box-shadow: none; }
.slot { box-shadow: none; }
.dish { box-shadow: none; }
.band { box-shadow: none; }
.dg-fact2 { box-shadow: none; }
.gd-sk__c { box-shadow: none; }
.gd-err { box-shadow: none; }
/* поле поиска на странице — без тени-ореола, рамка поля остаётся */
.lb-search { box-shadow: rgba(12, 14, 18, 0.04) 0px 0px 0px 1px inset; }
/* страница приёма: карточка калорий под фото */
.ad__kbc { box-shadow: none; }

/* Тарелки, блюдо, «Собрать тарелку», методика (42-home-recipes.css) */
.rp-card { box-shadow: none; }
.rp-cat { box-shadow: none; }
.rp-fit { box-shadow: none; }
.rp-home { box-shadow: none; }
.rp-skel__c { box-shadow: none; }
.rp-dish__ph { box-shadow: none; }
.rp-more { box-shadow: none; }
.gd-own { box-shadow: none; }
.gd-rres .gd-qe { box-shadow: none; }
.gd-mine__c { box-shadow: none; }
.gd-task { box-shadow: none; }
.gd-bdph { box-shadow: none; }
.gd-care { box-shadow: none; }
.dh-fit { box-shadow: none; }
.dh-ings { box-shadow: none; }
.dh-note { box-shadow: none; }
.dh-port { box-shadow: none; }
.dh-step { box-shadow: none; }
.dh-add__b { box-shadow: none; }
.bd-find { box-shadow: none; }
.bd-groups { box-shadow: none; }
.bd-hero { box-shadow: none; }
.bd-list { box-shadow: none; }
.pm-hands { box-shadow: none; }
.pm-info { box-shadow: none; }

/* Игра дневника (47-diary-game.css): ранг, ачивки, открытия, итоги месяца */
.rk { box-shadow: none; }
:where(.dg-scr,.dg-sheet) .band { box-shadow: none; }
:where(.dg-scr,.dg-sheet) .dark { box-shadow: none; }
:where(.dg-scr,.dg-sheet) .ul { box-shadow: none; }
:where(.dg-scr,.dg-sheet) .al { box-shadow: none; }

/* Прогресс (40-progress.css): карточки целей, плитки показателей, «История», тренировочная динамика */
.pz-card { box-shadow: none; }
.pz-tile { box-shadow: none; }
.pz-story { box-shadow: none; }
.tp-sheet { box-shadow: none; }

/* внутренние экраны: оценка встречи (40-more-area.css), срез-опрос (40-life.css),
   «Мягкие» белые кнопки-плашки (20-proto-kit.css, 40-anketa.css) */
.mrt-ctx { box-shadow: none; }
.gl:has(.gl-sv) .xs-card { box-shadow: none; }
.xs-soft { box-shadow: none; }
:where(.an-scr,.an-sheet) .xs-soft { box-shadow: none; }

/* «Истории» (47-stories.css — дословная копия miniapp-v2/stories.css, её сверяет
   test_stories_css_is_the_v2_copy, поэтому гасим здесь): карточки хаба, задания, таймлайн,
   итог пары, «до/после», заметки, переключатель, условия на светлом экране; выбранный пункт —
   без розового ореола, кольцо выбора остаётся. Обложка и «билет» — предметы (3D/перфорация). */
.cst-hcard, .cst-hcard:hover { box-shadow: none; }
.cst-task, .cst-task:hover { box-shadow: none; }
.cst-timeline { box-shadow: none; }
.cst-pair-sum { box-shadow: none; }
.cst-ba { box-shadow: none; }
.cst-note-card { box-shadow: none; }
.cst-note-card--warn { box-shadow: none; }
.cst-toggle { box-shadow: none; }
.cst-scr:not(.cst-scr--dark) .cst-terms { box-shadow: none; }
.cst-check.cst-on { box-shadow: inset 0 0 0 1.5px rgba(224, 81, 143, .5); }

/* до старта (40-prestart.css): хаб онбординга, плитки профиля, карточка цели, списки, контекст опроса */
.ob2-hubl { box-shadow: none; }
.pf-tile { box-shadow: none; }
.pf-all { box-shadow: none; }
.pf-goal { box-shadow: none; }
.li2--light { box-shadow: none; }
.rf-pane[data-tab="pre-survey"] .sv-ctx { box-shadow: none; }

/* ---- src/styles/93-page-tone.css ---- */
/* Один тон фона на всё приложение (решение владельца 29–30.09, токен --rf-page в 00-tokens.css).
 * Стили 20-/40-/42-/45-* СГЕНЕРИРОВАНЫ из прототипа (extract_css.js, gen_pre_story.py) и руками
 * не правятся — поэтому фон их страниц, слоёв, липких шапок и подвалов (растушёвок «в фон»)
 * переведён здесь, поверх, ТЕМИ ЖЕ селекторами: специфичность та же, файл позже — правило
 * побеждает, а повторная выгрузка прототипа его не сотрёт. Элементы НА карточках (чипы, плитки
 * значков, поля) остаются серыми — они лежат на белом, а не на странице.
 * Новый экран-слой с фоном страницы — пишите var(--rf-page) / rgba(var(--rf-page-rgb), a) сразу. */
/* 40-diary.css */
.pl4-bar { background: rgba(var(--rf-page-rgb), 0.82); }
.xs-bar2 { background: linear-gradient(rgba(var(--rf-page-rgb), 0), var(--rf-page) 30%); }
.pre-layer { background: var(--rf-page); }
/* 40-home-plan.css */
.ghp-foot { background: linear-gradient(rgba(var(--rf-page-rgb), 0), var(--rf-page) 18px); }
/* 40-life.css */
.gl { background: var(--rf-page); }
.gl-nav { background: linear-gradient(var(--rf-page) 86%, rgba(var(--rf-page-rgb), 0)); }
.gl-sbg { background: linear-gradient(var(--rf-page) 75%, rgba(var(--rf-page-rgb), 0)); }
.gl-foot { background: linear-gradient(rgba(var(--rf-page-rgb), 0), var(--rf-page) 22px); }
.gl-foot:has(.gl-sum2) { background: linear-gradient(rgba(var(--rf-page-rgb), 0), var(--rf-page) 20px); }
/* 40-more-area.css */
.mrt { background: var(--rf-page); }
.mrt-foot { background: linear-gradient(rgba(var(--rf-page-rgb), 0), var(--rf-page) 18%); }
.tp { background: var(--rf-page); }
.tp-hero__sh { background: linear-gradient(rgba(var(--rf-page-rgb), 0.55) 0%, rgba(var(--rf-page-rgb), 0) 16%), linear-gradient(rgba(var(--rf-page-rgb), 0) 54%, rgba(var(--rf-page-rgb), 0.62) 72%, rgba(var(--rf-page-rgb), 0.94) 86%, var(--rf-page) 96%); }
.tp-hero--mono .tp-hero__sh { background: linear-gradient(rgba(var(--rf-page-rgb), 0) 46%, rgba(var(--rf-page-rgb), 0.6) 70%, var(--rf-page) 96%); }
.tp-id__av img { box-shadow: var(--rf-page) 0px 0px 0px 3px, rgba(40, 34, 28, 0.14) 0px 10px 24px; }
.tp-id__av i { box-shadow: var(--rf-page) 0px 0px 0px 2.5px; }
/* 40-prestart.css */
.ob2 { background: var(--rf-page); }
.ob2-foot { background: linear-gradient(rgba(var(--rf-page-rgb), 0), var(--rf-page) 30%); }
.pre-bar.gpa-solid { background: linear-gradient(rgba(var(--rf-page-rgb), 0) 0px, var(--rf-page) 14px); }
.rf-pane[data-tab="pre-survey"] .rf-scr { background: var(--rf-page); }
/* 40-progress.css */
.xs-bar2.gm-bar { background: linear-gradient(rgba(var(--rf-page-rgb), 0), var(--rf-page) 26px); }
.gp-wk { background: var(--rf-page); }
/* 40-training-hub.css */
.trx { --v7-sub-bg: var(--rf-page); }
.trx.v7-sub .p-head { background: rgba(var(--rf-page-rgb), 0.88) !important; }
.trx .p-head { background: rgba(var(--rf-page-rgb), 0.86); }
/* 40-training.css */
.gt-l { background: var(--rf-page); }
.gt-sb { background: linear-gradient(var(--rf-page) 0px, var(--rf-page) 54px, rgba(var(--rf-page-rgb), 0) 62px); }
.gt-foot { background: linear-gradient(rgba(var(--rf-page-rgb), 0), var(--rf-page) 34%); }
.gt-l.is-q { background: var(--rf-page); }
.gt-l.is-q .gt-sb { background: var(--rf-page); }
.gt-l.is-q .gt-foot { background: linear-gradient(rgba(var(--rf-page-rgb), 0), var(--rf-page) 30%) !important; }
.gt-l.is-tq { background: var(--rf-page); }
/* 40-access.css */
.gxa { background: var(--rf-page); }
/* 42-pre-cards.css */
.xc-amb { background: radial-gradient(120% 55% at 50% 16%,#eae7e5 0%,rgba(var(--rf-page-rgb), 0) 70%); }
.pre-cv { background: var(--rf-page); }
/* 45-online.css */
.rf-scr.xs-scr--hero, .rf-scr.xs-scr--ot { background: var(--rf-page); }
/* 47-cine.css (кино «Добро пожаловать»: полотно сцен) и 42-pre-cards.css (карточки историй «до старта») */
.cn { background: var(--rf-page); }
.xc-ph { background: var(--rf-page); }