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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* перетаскивание записей между приёмами */
.item[data-drag] { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.item.dragging { opacity: .35; }
.drag-ghost { position: fixed; z-index: 80; margin: 0; padding: 10px 14px; border-top: 0; background: #fff; border-radius: 18px; box-shadow: 0 14px 34px rgba(0,0,0,.18); transform: scale(1.03); pointer-events: none; }
.meal { transition: box-shadow .15s, background .15s; }
.meal.drop { box-shadow: 0 0 0 2px var(--brand) inset; background: var(--brand-soft); }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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