/* =====================================================================
   Стиль «Игровой»: сочные цвета, толстые обводки, объёмные кнопки,
   стрики, XP и задания дня.
   ===================================================================== */

:root {
  color-scheme: light;
  --bg: #FFFFFF;
  --card: #FFFFFF;
  --card-2: #F7F7F7;
  --line: #E5E5E5;
  --track: #E5E5E5;
  --text: #3C3C3C;
  --text-2: #4B4B4B;
  --text-3: #777777;

  --green: #58CC02;  --green-d: #58A700;  --green-l: #D7FFB8;
  --blue: #1CB0F6;   --blue-d: #1899D6;   --blue-l: #DDF4FF;   --blue-b: #84D8FF;
  --orange: #FF9600; --orange-d: #CD7900; --orange-l: #FFF0D9;
  --red: #FF4B4B;    --red-d: #EA2B2B;    --red-l: #FFDFE0;
  --yellow: #FFC800; --yellow-d: #E5A400; --yellow-l: #FFF5CC;
  --purple: #CE82FF; --purple-d: #A568CC; --purple-l: #F4E6FF;

  /* КБЖУ: цвет, подложка, цвет подписи */
  --kcal: #FF9600;    --kcal-track: #FFF0D9;    --kcal-label: #CD7900;
  --protein: #CE82FF; --protein-track: #F4E6FF; --protein-label: #9A4FD0;
  --fat: #FFC800;     --fat-track: #FFF5CC;     --fat-label: #B58400;
  --carbs: #1CB0F6;   --carbs-track: #DDF4FF;   --carbs-label: #1480B8;

  --over: #FF4B4B;
  --good: #58CC02;
  --accent: #1CB0F6;
  --primary: #58CC02;
  --primary-d: #58A700;
  --primary-ink: #FFFFFF;
  --thumb: #FFFFFF;
  --radius: 16px;
  --radius-s: 14px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #131F24;
  --card: #131F24;
  --card-2: #202F36;
  --line: #37464F;
  --track: #37464F;
  --text: #F1F7FB;
  --text-2: #DCE6EC;
  --text-3: #8FA5B0;
  --green-l: #1F3A12;  --blue-l: #10334A;  --blue-b: #1899D6;
  --orange-l: #3B2A10; --red-l: #40191C;   --yellow-l: #3A3110; --purple-l: #33224A;
  --kcal-track: #3B2A10;    --kcal-label: #FFB547;
  --protein-track: #33224A; --protein-label: #DDA8FF;
  --fat-track: #3A3110;     --fat-label: #FFD84D;
  --carbs-track: #10334A;   --carbs-label: #6FD0FF;
  --thumb: #37464F;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body {
  font: 700 15px/1.4 Nunito, "Varela Round", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
  min-height: 100vh;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
svg { display: block; }
b, strong { font-weight: 800; }

#app { max-width: 560px; margin: 0 auto; padding: 0 16px calc(100px + var(--safe-b)); }

/* ---------- загрузка ---------- */
.boot { display: grid; place-items: center; height: 70vh; }
.boot-ring { width: 46px; height: 46px; border-radius: 50%; border: 6px solid var(--track); border-top-color: var(--green); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- анимации ---------- */
.screen { animation: screen-in .3s cubic-bezier(.2, .8, .2, 1); padding-top: 10px; }
@keyframes screen-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.stagger > * { animation: rise .45s cubic-bezier(.3, 1.3, .5, 1) both; }
.stagger > *:nth-child(2) { animation-delay: .04s; }
.stagger > *:nth-child(3) { animation-delay: .08s; }
.stagger > *:nth-child(4) { animation-delay: .12s; }
.stagger > *:nth-child(5) { animation-delay: .16s; }
.stagger > *:nth-child(n+6) { animation-delay: .2s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes pop { from { transform: scale(.3); opacity: 0; } }
@keyframes bounce { 0%, 100% { transform: none; } 40% { transform: translateY(-6px) scale(1.06); } 70% { transform: translateY(1px); } }
@keyframes wobble { 25% { transform: rotate(-12deg) scale(1.15); } 50% { transform: rotate(10deg); } 75% { transform: rotate(-5deg); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes pulse { 50% { transform: scale(1.08); } }

/* ---------- игровая панель сверху ---------- */
.gamebar {
  position: sticky; top: 0; z-index: 15; margin: 0 -16px 6px; padding: 8px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: var(--bg); border-bottom: 2px solid var(--line);
}
.gstat { display: inline-flex; align-items: center; gap: 5px; font-size: 16px; font-weight: 800; padding: 6px 8px; border-radius: 12px; font-variant-numeric: tabular-nums; }
.gstat:active { background: var(--card-2); }
.gstat .gi { font-size: 21px; line-height: 1; }
.gstat.streak { color: var(--orange); }
.gstat.streak.cold { color: var(--text-3); }
.gstat.streak.cold .gi { filter: grayscale(1); opacity: .6; }
.gstat.xp { color: var(--blue); }
.gstat.level { color: var(--purple); }
.gstat.bump .gi { animation: bounce .6s ease; }

.xp-float {
  position: fixed; left: 50%; top: 40%; z-index: 80; transform: translate(-50%, 0); pointer-events: none;
  font-size: 30px; font-weight: 900; color: var(--yellow); -webkit-text-stroke: 1.5px var(--yellow-d);
  text-shadow: 0 3px 0 var(--yellow-d); animation: xp-float 1.3s cubic-bezier(.2, .8, .2, 1) forwards;
}
@keyframes xp-float { 0% { opacity: 0; transform: translate(-50%, 20px) scale(.6); } 20% { opacity: 1; transform: translate(-50%, 0) scale(1.15); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -70px) scale(1); } }

/* ---------- заголовки ---------- */
.header { display: flex; align-items: center; justify-content: space-between; margin: 8px 2px 14px; min-height: 40px; gap: 10px; }
.header h1 { font-size: 28px; line-height: 1.1; margin: 0; font-weight: 900; letter-spacing: -.01em; }
.header .sub { color: var(--text-3); font-size: 14px; margin-top: 2px; font-weight: 700; }
.header .eyebrow { color: var(--text-3); font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 2px; }
.section-title { font-size: 20px; font-weight: 900; margin: 22px 2px 10px; display: flex; justify-content: space-between; align-items: baseline; }
.section-title button { font-size: 14px; font-weight: 800; color: var(--blue); text-transform: uppercase; letter-spacing: .04em; }

.icon-btn {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: var(--card); border: 2px solid var(--line); border-bottom-width: 4px; transition: transform .1s;
}
.icon-btn:active { transform: translateY(2px); border-bottom-width: 2px; }
.icon-btn svg { width: 20px; height: 20px; stroke: var(--text-3); fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn[disabled] { opacity: .35; }

/* ---------- карточки ---------- */
.card { background: var(--card); border: 2px solid var(--line); border-radius: var(--radius); padding: 16px; margin-bottom: 12px; }
.card h3 { margin: 0 0 10px; font-size: 18px; font-weight: 900; color: var(--text); }
.muted { color: var(--text-3); }
.row { display: flex; align-items: center; gap: 10px; }
.row.between { justify-content: space-between; }
.grow { flex: 1; min-width: 0; }
.hidden, [hidden] { display: none !important; }

/* ---------- кнопки: объёмные, «нажимаются» ---------- */
.btn {
  --b: var(--primary); --bd: var(--primary-d); --ink: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 0 18px; border-radius: var(--radius-s);
  background: var(--b); color: var(--ink); box-shadow: 0 4px 0 var(--bd);
  font-weight: 900; font-size: 15px; text-transform: uppercase; letter-spacing: .05em;
  transition: transform .08s, box-shadow .08s, filter .15s; margin-bottom: 4px;
}
.btn:active { transform: translateY(4px); box-shadow: 0 0 0 var(--bd); }
.btn[disabled] { --b: var(--line); --bd: var(--line); --ink: var(--text-3); pointer-events: none; }
.btn.block { width: 100%; }
.btn.big { min-height: 54px; font-size: 16px; }
.btn.hero { --b: var(--green); --bd: var(--green-d); }
.btn.accent { --b: var(--blue); --bd: var(--blue-d); }
.btn.purple { --b: var(--purple); --bd: var(--purple-d); }
.btn.orange { --b: var(--orange); --bd: var(--orange-d); }
.btn.ghost { --b: var(--card); --bd: var(--line); --ink: var(--blue); border: 2px solid var(--line); }
.btn.danger { --b: var(--red); --bd: var(--red-d); }
.link-btn { display: block; margin: 18px auto 0; color: var(--blue); font-size: 14px; font-weight: 800; text-align: center; line-height: 1.4; }
.link-btn b { color: var(--red); }

/* ---------- чипы, сегменты ---------- */
.chips { display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 8px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; height: 38px; padding: 0 14px; border-radius: 12px; background: var(--card);
  border: 2px solid var(--line); border-bottom-width: 4px; font-size: 14px; font-weight: 800; white-space: nowrap; color: var(--text-2);
  transition: transform .08s;
}
.chip:active { transform: translateY(2px); border-bottom-width: 2px; }
.chip.active { background: var(--blue-l); border-color: var(--blue-b); color: var(--blue); }
.chips.wrap { flex-wrap: wrap; margin: 0 0 10px; padding: 0; }
.chips.wrap .chip { height: 34px; font-size: 13px; }

.segmented { display: flex; background: var(--card-2); border: 2px solid var(--line); border-radius: 14px; padding: 3px; margin-bottom: 14px; position: relative; }
.segmented button { flex: 1; height: 38px; border-radius: 10px; font-size: 14px; font-weight: 800; color: var(--text-3); position: relative; z-index: 1; transition: color .2s; }
.segmented button.active { color: var(--blue); }
.segmented .thumb { position: absolute; top: 3px; bottom: 3px; border-radius: 10px; background: var(--card); border: 2px solid var(--blue-b); transition: left .3s cubic-bezier(.3, 1.3, .5, 1), width .3s; }

/* ---------- поля ---------- */
.input, .textarea {
  width: 100%; border: 2px solid var(--line); background: var(--card-2); border-radius: var(--radius-s);
  padding: 12px 14px; outline: none; transition: border-color .2s, background .2s; font-weight: 700;
}
.input::placeholder, .textarea::placeholder { color: var(--text-3); opacity: .8; }
.input:focus, .textarea:focus { border-color: var(--blue-b); background: var(--card); }
.textarea { resize: none; min-height: 50px; max-height: 160px; }
label.field { display: block; margin-bottom: 12px; }
label.field span { display: block; font-size: 13px; color: var(--text-3); margin: 0 0 6px 2px; font-weight: 800; }
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------- списки ---------- */
.list-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 2px solid var(--line); }
.list-item:last-child { border-bottom: 0; }
.list-item .title { font-weight: 800; }
.list-item .meta { font-size: 13px; color: var(--text-3); font-weight: 700; }
.list-item .value { font-weight: 800; font-variant-numeric: tabular-nums; }
.list-item.tap { cursor: pointer; }
.list-item.tap:active { opacity: .6; }
.chevron { width: 18px; height: 18px; stroke: var(--line); fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.empty { text-align: center; padding: 22px 10px; color: var(--text-3); }
.empty .emoji { font-size: 40px; margin-bottom: 6px; }
.tag { display: inline-block; font-size: 13px; font-weight: 800; background: var(--card-2); border: 2px solid var(--line); border-radius: 10px; padding: 3px 9px; margin: 0 6px 6px 0; }
.badge { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; padding: 2px 7px; border-radius: 8px; vertical-align: 2px; }
.badge.ai { background: var(--purple-l); color: var(--purple-d); }
.badge.swap { background: var(--blue-l); color: var(--blue-d); }
.swap { font-size: 12px; color: var(--text-3); font-weight: 700; }

/* ---------- таббар ---------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; justify-content: space-around; gap: 4px;
  padding: 6px 8px calc(6px + var(--safe-b));
  background: var(--bg); border-top: 2px solid var(--line);
}
.tabbar button {
  flex: 1; max-width: 96px; display: flex; flex-direction: column; align-items: center; gap: 1px;
  color: var(--text-3); font-size: 11px; font-weight: 800; padding: 5px 0 4px; border-radius: 14px; border: 2px solid transparent;
  transition: background .15s;
}
.tabbar .ti { font-size: 25px; line-height: 1.1; transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); filter: grayscale(.9); opacity: .75; }
.tabbar button.active { background: var(--blue-l); border-color: var(--blue-b); color: var(--blue); }
.tabbar button.active .ti { transform: scale(1.12); filter: none; opacity: 1; }

/* ---------- прогресс-бары ---------- */
.pbar { position: relative; height: 18px; border-radius: 9px; background: var(--track); overflow: hidden; }
.pbar > i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 9px; background: var(--c, var(--green)); transition: width 1s cubic-bezier(.3, 1.2, .5, 1); }
.pbar > i::after { content: ""; position: absolute; left: 8px; right: 8px; top: 4px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .35); }
.pbar.thin { height: 12px; }
.pbar.thin > i::after { top: 3px; height: 3px; left: 6px; right: 6px; }
.pbar.over > i { background: var(--red); }

/* ---------- «Сегодня»: главная карточка ---------- */
.kcal-hero { padding: 16px 16px 14px; }
.kcal-hero .top { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; margin-bottom: 10px; }
.kcal-hero .label { font-size: 13px; color: var(--text-3); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.kcal-hero .big { font-size: 38px; font-weight: 900; line-height: 1.05; font-variant-numeric: tabular-nums; color: var(--kcal); }
.kcal-hero .big.over { color: var(--red); }
.kcal-hero .big small { font-size: 16px; color: var(--text-3); font-weight: 800; }
.kcal-hero .eaten { text-align: right; font-size: 13px; color: var(--text-3); font-weight: 800; }
.kcal-hero .eaten b { display: block; font-size: 18px; color: var(--text); }
.macro-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.macro-mini .name { font-size: 13px; font-weight: 900; margin-bottom: 5px; }
.macro-mini .v { font-size: 13px; font-weight: 800; color: var(--text-3); margin-top: 4px; font-variant-numeric: tabular-nums; }
.macro-mini .v b { color: var(--text); }

.warn-card { background: var(--yellow-l); border: 2px solid var(--yellow); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 12px; font-size: 14px; line-height: 1.45; }
.warn-card .btn { margin-top: 10px; min-height: 40px; font-size: 13px; }

/* ---------- задания дня ---------- */
.quests .qhead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.quests .qhead h3 { margin: 0; }
.quests .qhead .muted { font-size: 13px; font-weight: 800; }
.quest { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 2px solid var(--line); }
.quest:last-child { border-bottom: 0; padding-bottom: 2px; }
.qicon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 24px; flex: none; }
.quest .qt { font-weight: 800; font-size: 15px; margin-bottom: 6px; line-height: 1.2; }
.quest .qp { display: flex; align-items: center; gap: 8px; }
.quest .qp .pbar { flex: 1; }
.quest .qn { font-size: 12px; font-weight: 900; color: var(--text-3); min-width: 44px; text-align: right; font-variant-numeric: tabular-nums; }
.xp-chip { flex: none; font-size: 12px; font-weight: 900; color: var(--yellow-d); background: var(--yellow-l); border-radius: 10px; padding: 4px 8px; }
.quest.done .qt { color: var(--green-d); }
.quest.done .xp-chip { color: #fff; background: var(--green); }
.quest.done .qicon { animation: bounce .7s ease; }

/* ---------- неделя стрика ---------- */
.week-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; text-align: center; }
.wday .d { font-size: 12px; font-weight: 900; color: var(--text-3); margin-bottom: 4px; text-transform: uppercase; }
.wday .c { width: 36px; height: 36px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; background: var(--card-2); border: 2px solid var(--line); font-size: 17px; }
.wday.on .c { background: var(--orange); border-color: var(--orange-d); animation: pop .4s cubic-bezier(.3, 1.6, .5, 1) both; }
.wday.today .d { color: var(--orange); }
.wday.today:not(.on) .c { border-style: dashed; border-color: var(--orange); }

.level-card { display: flex; align-items: center; gap: 14px; }
.level-badge {
  width: 64px; height: 64px; flex: none; border-radius: 18px; display: grid; place-items: center; color: #fff; font-size: 28px; font-weight: 900;
  background: var(--purple); box-shadow: 0 4px 0 var(--purple-d); position: relative;
}
.level-badge small { position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); font-size: 10px; background: var(--card); color: var(--purple-d); border: 2px solid var(--purple); border-radius: 8px; padding: 0 5px; white-space: nowrap; }
.level-card .t { font-size: 18px; font-weight: 900; }
.level-card .s { font-size: 13px; color: var(--text-3); font-weight: 800; margin-top: 6px; }
.big-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.big-stats .stat { text-align: center; }
.big-stats .gi { font-size: 26px; }

/* ---------- ввод еды ---------- */
.composer { display: flex; align-items: flex-end; gap: 8px; }
.composer .textarea { flex: 1; }
.composer .icon-btn { width: 50px; height: 50px; flex: none; }
.composer .send { background: var(--green); border-color: var(--green-d); }
.composer .send svg { stroke: #fff; }
.composer .mic.recording { background: var(--red); border-color: var(--red-d); animation: pulse 1s ease-in-out infinite; }
.composer .mic.recording svg { stroke: #fff; }
.photo-preview { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.photo-preview img { width: 56px; height: 56px; object-fit: cover; border-radius: 12px; border: 2px solid var(--line); }
.hint { font-size: 12px; color: var(--text-3); margin: 8px 2px 0; font-weight: 700; }

.quick-row { display: flex; gap: 10px; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 8px; scrollbar-width: none; }
.quick-row::-webkit-scrollbar { display: none; }
.quick-tile {
  flex: none; width: 112px; min-height: 104px; border-radius: 16px; background: var(--card);
  border: 2px solid var(--line); border-bottom-width: 5px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 10px 8px; text-align: center;
  transition: transform .08s;
}
.quick-tile:active { transform: translateY(3px); border-bottom-width: 2px; }
.quick-tile .plus { width: 34px; height: 34px; border-radius: 10px; background: var(--green); color: #fff; display: grid; place-items: center; font-size: 22px; font-weight: 900; line-height: 1; }
.quick-tile .plus svg { width: 18px; height: 18px; stroke: #fff; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.quick-tile .t { font-size: 13px; font-weight: 900; line-height: 1.2; max-width: 100%; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.quick-tile .d { font-size: 11px; color: var(--text-3); font-weight: 800; }
.quick-tile.added { animation: bounce .5s ease; border-color: var(--green); }

.meal-head { font-size: 13px; font-weight: 900; color: var(--text-3); margin: 14px 0 0; display: flex; justify-content: space-between; text-transform: uppercase; letter-spacing: .05em; }
.meal-head:first-child { margin-top: 6px; }
.food-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 2px solid var(--line); cursor: pointer; }
.food-row:last-child { border-bottom: 0; }
.food-row:active { opacity: .6; }
.food-row .ico { width: 42px; height: 42px; border-radius: 12px; flex: none; display: grid; place-items: center; font-size: 22px; }
.food-row .title { font-weight: 800; font-size: 15px; }
.food-row .kc { font-weight: 900; font-size: 15px; font-variant-numeric: tabular-nums; color: var(--kcal-label); }
.food-macros { font-size: 12px; color: var(--text-3); font-weight: 700; font-variant-numeric: tabular-nums; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; vertical-align: 1px; }

/* ---------- нижние панели ---------- */
.sheet-backdrop { position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, .45); animation: fade-in .2s ease both; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; max-height: 90vh; overflow-y: auto;
  background: var(--bg); border-radius: 22px 22px 0 0; border-top: 2px solid var(--line);
  padding: 10px 16px calc(20px + var(--safe-b));
  animation: sheet-up .35s cubic-bezier(.2, 1.1, .3, 1) both; max-width: 600px; margin: 0 auto;
}
.sheet.closing { animation: sheet-down .22s ease-in both; }
.sheet-backdrop.closing { animation: fade-out .22s ease-in both; }
.sheet .grabber { width: 42px; height: 5px; border-radius: 3px; background: var(--line); margin: 0 auto 14px; }
.sheet h2 { margin: 0 0 14px; font-size: 22px; font-weight: 900; }
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes sheet-down { to { transform: translateY(100%); } }

.parsed-item { display: grid; grid-template-columns: 1fr 88px 30px; gap: 8px; align-items: center; padding: 10px 0; border-bottom: 2px solid var(--line); }
.parsed-item:last-child { border-bottom: 0; }
.parsed-item .title { font-weight: 800; }
.parsed-item .input { padding: 8px 10px; text-align: right; }
.parsed-item .x { color: var(--text-3); font-size: 18px; font-weight: 900; }
.summary-line { display: flex; justify-content: space-between; gap: 8px; font-weight: 900; padding-top: 12px; font-variant-numeric: tabular-nums; flex-wrap: wrap; }
.note { font-size: 14px; color: var(--text-2); background: var(--card-2); border: 2px solid var(--line); border-radius: 14px; padding: 11px 13px; margin-bottom: 12px; line-height: 1.45; font-weight: 700; }
.ai-text { font-size: 15px; line-height: 1.5; white-space: pre-wrap; font-weight: 600; }
.shimmer { height: 16px; border-radius: 8px; margin: 10px 0; background: linear-gradient(90deg, var(--track) 25%, var(--card-2) 50%, var(--track) 75%); background-size: 200% 100%; animation: shimmer 1.2s infinite; }
.shimmer:nth-child(2) { width: 85%; } .shimmer:nth-child(3) { width: 70%; } .shimmer:nth-child(4) { width: 90%; }
@keyframes shimmer { to { background-position: -200% 0; } }

.results { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.result { display: flex; justify-content: space-between; gap: 10px; text-align: left; background: var(--card); border: 2px solid var(--line); border-radius: 12px; padding: 10px 12px; font-size: 14px; font-weight: 800; }
.result:active { background: var(--blue-l); }
.unit-input { position: relative; display: block; }
.unit-input .input { padding-right: 30px; text-align: right; }
.unit-input em { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-style: normal; color: var(--text-3); font-size: 13px; }

/* ---------- рецепты ---------- */
.recipe-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 2px solid var(--line); cursor: pointer; }
.recipe-row:last-child { border-bottom: 0; }
.recipe-row:active { opacity: .6; }
.recipe-row .ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 24px; flex: none; }
.recipe-row .title { font-weight: 800; line-height: 1.25; }
.rtags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.rtags span { font-size: 11px; font-weight: 800; padding: 1px 7px; border-radius: 7px; background: var(--card-2); color: var(--text-3); }
.rtags span.p { background: var(--protein-track); color: var(--protein-label); }
.recipe-text { font-size: 14px; line-height: 1.55; font-weight: 600; }
.recipe-text p { margin: 0 0 10px; } .recipe-text ol, .recipe-text ul { margin: 0 0 10px; padding-left: 20px; }
.recipe-text li { margin-bottom: 4px; }

/* ---------- плитки-статистика ---------- */
.stats-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.stat { background: var(--card); border: 2px solid var(--line); border-radius: 16px; padding: 12px; min-width: 0; }
.stat .label { font-size: 12px; color: var(--text-3); font-weight: 800; }
.stat .val { font-size: 21px; font-weight: 900; margin-top: 2px; font-variant-numeric: tabular-nums; }
.stat .val small { font-size: 12px; font-weight: 800; color: var(--text-3); }
.avg-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.avg-grid .stat { padding: 10px 6px; text-align: center; }
.avg-grid .val { font-size: 18px; }

/* ---------- тренировка ---------- */
.heatmap { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 1fr); gap: 4px; }
.heatmap i { display: block; aspect-ratio: 1; border-radius: 5px; background: var(--track); }
.heatmap i.on { background: var(--green); animation: pop .4s cubic-bezier(.3, 1.6, .5, 1) both; }
.heatmap i.today { outline: 2px solid var(--orange); outline-offset: -2px; }

.search { position: relative; margin-bottom: 12px; }
.search .input { padding-left: 42px; background: var(--card); }
.search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 19px; height: 19px; stroke: var(--text-3); fill: none; stroke-width: 2.6; stroke-linecap: round; }
.big-search { margin-bottom: 14px; }
.big-search .input { height: 52px; font-size: 16px; padding-right: 44px; -webkit-appearance: none; appearance: none; }
.big-search .input::-webkit-search-cancel-button { display: none; }
.big-search .clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%; color: var(--text-3); font-size: 15px; font-weight: 900; }
.big-search .clear:active { background: var(--card-2); }
mark { background: var(--yellow-l); color: inherit; border-radius: 4px; padding: 0 1px; }
#search-results { animation: fade-in .2s ease; }

.plan-card, .menu-row {
  width: 100%; display: flex; align-items: center; gap: 14px; text-align: left; background: var(--card);
  border: 2px solid var(--line); border-bottom-width: 5px; border-radius: var(--radius); padding: 14px 16px; margin-bottom: 12px; transition: transform .08s;
}
.plan-card:active, .menu-row:active { transform: translateY(3px); border-bottom-width: 2px; }
.plan-card .emoji, .menu-row .emoji { width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; font-size: 28px; flex: none; background: var(--green-l); }
.menu-row .emoji { background: var(--yellow-l); }
.plan-card b, .menu-row b { font-size: 16px; font-weight: 900; }
.plan-card .muted, .menu-row .muted { font-size: 13px; font-weight: 700; }
.plan-card.blocked .emoji { background: var(--red-l); }

.history-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-bottom: 12px; }
.history-card .stat .sets { font-size: 14px; font-weight: 800; margin-top: 4px; line-height: 1.35; font-variant-numeric: tabular-nums; }
.history-card .stat.wide { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; background: var(--yellow-l); border-color: var(--yellow); }
.trophy { font-size: 30px; }

.tip-card { display: flex; gap: 12px; align-items: center; background: var(--blue-l); border: 2px solid var(--blue-b); border-radius: 16px; padding: 12px 14px; margin-bottom: 12px; }
.tip-card > span { font-size: 26px; }
.tip-card .muted { font-size: 13px; font-weight: 700; }
.plan-line { font-size: 14px; color: var(--text-2); margin: -2px 4px 12px; line-height: 1.45; font-weight: 700; }

.stepper-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-bottom: 14px; }
.stepper { background: var(--card-2); border: 2px solid var(--line); border-radius: 16px; padding: 10px; text-align: center; }
.stepper .label { font-size: 12px; color: var(--text-3); margin-bottom: 4px; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; }
.stepper .ctrl { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.stepper { padding: 10px 6px; }
.stepper .ctrl { gap: 2px; }
.stepper button { width: 38px; height: 38px; flex: none; border-radius: 12px; background: var(--card); border: 2px solid var(--line); border-bottom-width: 4px; font-size: 24px; font-weight: 900; color: var(--blue); line-height: 1; }
.stepper button:active { transform: translateY(2px); border-bottom-width: 2px; }
.stepper input { width: 100%; min-width: 0; text-align: center; border: 0; background: none; font-size: 24px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; outline: none; padding: 0; caret-color: var(--blue); }
@media (max-width: 370px) { .stepper button { width: 34px; height: 34px; font-size: 22px; } .stepper-wrap { gap: 8px; } }

.set-list .list-item { animation: rise .35s cubic-bezier(.3, 1.3, .5, 1) both; }
.set-num { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--green-l); color: var(--green-d); font-size: 14px; font-weight: 900; flex: none; }
.set-num.pr { background: var(--yellow); color: #fff; box-shadow: 0 3px 0 var(--yellow-d); }
.del { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; color: var(--text-3); font-size: 16px; font-weight: 900; }
.del:active { background: var(--card-2); }
.pr-banner {
  background: var(--yellow); color: #fff; border-radius: var(--radius); box-shadow: 0 5px 0 var(--yellow-d);
  padding: 14px 16px; margin-bottom: 16px; display: flex; align-items: center; gap: 12px; font-weight: 900; font-size: 17px;
  animation: pr-in .6s cubic-bezier(.3, 1.6, .5, 1) both; text-shadow: 0 1px 0 rgba(0, 0, 0, .12);
}
.pr-banner .trophy { animation: wobble 1s ease .3s; }
@keyframes pr-in { from { transform: scale(.7); opacity: 0; } }

.rest-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.rest-row > span { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.rest-row svg { stroke: currentColor; fill: none; stroke-width: 2.4; }
.rest-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.rest-chips .chip { height: 34px; padding: 0 10px; font-size: 13px; }
.rest-big { text-align: center; font-size: 44px; font-weight: 900; margin: 4px 0 12px; font-variant-numeric: tabular-nums; }
.howto summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; }
.howto summary::-webkit-details-marker { display: none; }
.howto summary::after { content: "▾"; color: var(--text-2); font-weight: 900; transition: transform .2s; }
.howto:not([open]) summary::after { transform: rotate(-90deg); }
.howto summary h3 { margin: 0; }
.howto ol { margin: 10px 0 0; padding-left: 22px; }
.howto li { margin: 6px 0; line-height: 1.4; font-weight: 700; color: var(--text-2); }

.rest-timer {
  position: fixed; left: 12px; right: 12px; bottom: calc(80px + var(--safe-b)); z-index: 30; max-width: 536px; margin: 0 auto;
  display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 18px;
  background: var(--blue); color: #fff; box-shadow: 0 5px 0 var(--blue-d);
  animation: rt-in .35s cubic-bezier(.3, 1.4, .5, 1) both;
}
.rest-timer .rt-ring { width: 46px; height: 46px; transform: rotate(-90deg); flex: none; }
.rest-timer circle { fill: none; stroke-width: 5; }
.rest-timer .track { stroke: rgba(255, 255, 255, .3); }
.rest-timer .bar { stroke: #fff; stroke-linecap: round; transition: stroke-dashoffset .25s linear; }
.rest-timer .rt-label { font-size: 12px; opacity: .85; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.rest-timer .rt-time { font-size: 26px; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1.1; }
.rest-timer .chip { height: 34px; padding: 0 10px; background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .35); color: #fff; }
.rest-timer.done { background: var(--green); box-shadow: 0 5px 0 var(--green-d); animation: ring-shake .5s ease 3; }
@keyframes rt-in { from { opacity: 0; transform: translateY(20px) scale(.95); } }
@keyframes ring-shake { 25% { transform: rotate(-2deg); } 75% { transform: rotate(2deg); } }

/* ---------- план ---------- */
.day-card { padding: 0; overflow: hidden; }
.day-card .dh { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--green); color: #fff; font-weight: 900; font-size: 17px; }
.day-card .dh .n { width: 30px; height: 30px; border-radius: 10px; background: rgba(255, 255, 255, .25); display: grid; place-items: center; font-size: 15px; }
.day-card:nth-of-type(3n+2) .dh { background: var(--blue); }
.day-card:nth-of-type(3n) .dh { background: var(--purple); }
.day-card .items { padding: 0 16px; }
.personal-card { background: var(--purple-l); border-color: var(--purple); }
.personal-card h3 { color: var(--purple-d); }
.personal-card ul { margin: 6px 0 0; padding-left: 20px; }
.personal-card li { margin-bottom: 4px; }
.adapt-card { border-color: var(--purple); border-style: dashed; }
.adapt-card .row { align-items: flex-start; }
.adapt-card .emoji { font-size: 32px; }

/* ---------- онбординг ---------- */
.onb { min-height: calc(100vh - 40px); display: flex; flex-direction: column; }
.onb-top { display: flex; align-items: center; gap: 12px; margin: 6px 0 22px; }
.onb-progress { flex: 1; height: 18px; background: var(--track); border-radius: 9px; overflow: hidden; position: relative; }
.onb-progress i { display: block; height: 100%; background: var(--green); border-radius: 9px; transition: width .5s cubic-bezier(.3, 1.3, .5, 1); position: relative; }
.onb-progress i::after { content: ""; position: absolute; left: 8px; right: 8px; top: 4px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .35); }
.onb h1 { font-size: 28px; margin: 0 0 6px; line-height: 1.15; font-weight: 900; }
.onb p.lead { color: var(--text-3); margin: 0 0 22px; font-size: 16px; }
.onb-body { flex: 1; }
.onb-footer { padding: 16px 0 8px; }
.options { display: grid; gap: 10px; }
.options.two { grid-template-columns: 1fr 1fr; }
.option {
  text-align: left; background: var(--card); border-radius: 16px; padding: 14px 16px;
  border: 2px solid var(--line); border-bottom-width: 5px; transition: transform .08s; display: flex; align-items: center; gap: 14px;
}
.option:active { transform: translateY(3px); border-bottom-width: 2px; }
.option.selected { background: var(--blue-l); border-color: var(--blue-b); color: var(--blue-d); }
.option .emoji { font-size: 30px; line-height: 1; }
.option .t { font-weight: 800; }
.option .d { font-size: 13px; color: var(--text-3); margin-top: 2px; }
.option.center { flex-direction: column; text-align: center; padding: 24px 12px; }
.option.center .emoji { font-size: 50px; }
.options.compact { gap: 8px; }
.options.compact .option { padding: 11px 14px; }
.options.compact .emoji { font-size: 22px; }
.seg-days { display: flex; gap: 8px; }
.seg-days .chip { flex: 1; height: 50px; font-size: 18px; font-weight: 900; }
.welcome-emoji { font-size: 84px; margin: 20px 0 10px; animation: wobble 1.2s ease .3s; display: inline-block; }
.body-inputs { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.body-inputs label { display: flex; align-items: center; gap: 12px; background: var(--card); border: 2px solid var(--line); border-radius: 16px; padding: 10px 18px; }
.body-inputs label:focus-within { border-color: var(--blue-b); background: var(--blue-l); }
.body-inputs span { width: 80px; color: var(--text-3); font-weight: 800; }
.body-inputs input { flex: 1; width: 0; min-width: 0; border: 0; background: none; outline: none; font-size: 32px; font-weight: 900; text-align: right; font-variant-numeric: tabular-nums; }
.body-inputs em { font-style: normal; color: var(--text-3); width: 30px; }
.goal-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; text-align: left; }
.goal-tile { border-radius: 16px; padding: 14px; color: #fff; box-shadow: 0 4px 0 var(--d); background: var(--c); }
.goal-tile .l { font-size: 13px; font-weight: 800; opacity: .9; }
.goal-tile .v { font-size: 26px; font-weight: 900; font-variant-numeric: tabular-nums; }
.goal-tile .v small { font-size: 14px; }

.check { display: flex; gap: 12px; align-items: flex-start; padding: 11px 0; border-bottom: 2px solid var(--line); cursor: pointer; font-weight: 700; }
.check:last-child { border-bottom: 0; }
.check input { width: 22px; height: 22px; accent-color: var(--green); flex: none; margin: 0; }

/* ---------- прогресс ---------- */
.chart-box { position: relative; height: 220px; }
.chart-box.tall { height: 260px; }
.legend { display: flex; gap: 14px; font-size: 12px; color: var(--text-2); margin-top: 10px; flex-wrap: wrap; font-weight: 800; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.delta { font-weight: 900; font-size: 13px; padding: 3px 8px; border-radius: 8px; background: var(--card-2); }
.delta.down { color: var(--green-d); background: var(--green-l); } .delta.up { color: var(--orange-d); background: var(--orange-l); }
.session-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 2px solid var(--line); font-size: 14px; gap: 10px; }
.session-row:last-child { border-bottom: 0; }
.session-row .sets { color: var(--text-2); text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- профиль, уведомления ---------- */
.hero-card { display: flex; align-items: center; gap: 16px; }
.avatar { width: 64px; height: 64px; border-radius: 50%; background: var(--blue-l); border: 3px solid var(--blue-b); display: grid; place-items: center; font-size: 30px; flex: none; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.reminder .emoji { width: 46px; height: 46px; border-radius: 14px; background: var(--card-2); display: grid; place-items: center; font-size: 24px; flex: none; }
.reminder .muted { font-size: 13px; font-weight: 700; }
.reminder.off .rem-time { opacity: .4; pointer-events: none; }
.rem-time { margin-top: 12px; justify-content: space-between; }
.input.time { width: auto; min-width: 120px; padding: 8px 12px; text-align: center; font-weight: 900; font-variant-numeric: tabular-nums; }
.switch { position: relative; width: 54px; height: 32px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch span { position: absolute; inset: 0; border-radius: 16px; background: var(--track); transition: background .2s; cursor: pointer; }
.switch span::after { content: ""; position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 0 rgba(0, 0, 0, .15); transition: transform .25s cubic-bezier(.3, 1.4, .5, 1); }
.switch input:checked + span { background: var(--green); }
.switch input:checked + span::after { transform: translateX(22px); }

/* ---------- тост и конфетти ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(96px + var(--safe-b)); transform: translateX(-50%); z-index: 60;
  background: var(--text); color: var(--bg); padding: 12px 18px; border-radius: 14px; font-weight: 800; font-size: 14px;
  max-width: calc(100% - 32px); text-align: center; animation: toast-in .35s cubic-bezier(.3, 1.4, .5, 1) both;
}
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 16px) scale(.95); } }
#confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 70; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- вода ---------- */
.water-card .wv { font-size: 14px; color: var(--text-3); font-weight: 800; font-variant-numeric: tabular-nums; }
.water-card .wv b { color: var(--blue); font-size: 17px; }
.glasses { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.glass { height: 40px; border-radius: 6px 6px 10px 10px; border: 2px solid var(--line); background: var(--card-2); position: relative; overflow: hidden; transition: transform .1s; }
.glass:active { transform: scale(.9); }
.glass i { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: var(--blue); transition: height .35s cubic-bezier(.3, 1.3, .5, 1); }
.glass.full { border-color: var(--blue-b); }
.glass.full i { height: 100%; }

/* ---------- повтор еды ---------- */
.repeat-btn { font-size: 11px; font-weight: 900; color: var(--blue); text-transform: uppercase; letter-spacing: .04em; margin-right: 10px; }
.quick-tile.repeat { border-color: var(--blue-b); background: var(--blue-l); }

/* ---------- достижения ---------- */
.ach-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ach { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px 8px; border-radius: 14px; border: 2px solid var(--line); background: var(--card-2); text-align: center; min-width: 0; }
.ach .ai { font-size: 28px; line-height: 1.1; filter: grayscale(1); opacity: .45; }
.ach .at { font-size: 12px; font-weight: 800; line-height: 1.2; color: var(--text-3); }
.ach .ap { width: 100%; }
.ach.on { background: var(--yellow-l); border-color: var(--yellow); border-bottom-width: 4px; }
.ach.on .ai { filter: none; opacity: 1; }
.ach.on .at { color: var(--text); }
.ach-big { font-size: 80px; line-height: 1.1; animation: wobble 1s ease .2s; display: inline-block; }

/* ---------- тренировка по шагам ---------- */
.session-bar { position: sticky; top: 0; z-index: 15; margin: 0 -16px 4px; padding: 10px 16px 12px; background: var(--bg); border-bottom: 2px solid var(--line); }
.session-bar b { color: var(--orange); }
.session-bar .muted { font-weight: 800; font-size: 13px; }
.sdots { display: flex; gap: 5px; margin-top: 8px; }
.sdot { flex: 1; height: 10px; border-radius: 5px; background: var(--track); }
.sdot.done { background: var(--green); }
.sdot.cur { background: var(--orange); box-shadow: 0 2px 0 var(--orange-d); }
.session-card { background: var(--orange-l); border-color: var(--orange); }
.session-card .emoji { font-size: 32px; }
.session-card .muted { font-size: 13px; font-weight: 700; }
.body-inputs input::placeholder { color: var(--text-3); opacity: .5; font-size: 16px; font-weight: 700; }

/* ---------- избранное и свои рецепты ---------- */
.heart { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 20px; transition: transform .15s; }
.heart:active { transform: scale(.85); }
.heart.on { animation: bounce .5s ease; }
.quick-tile.fav { border-color: var(--red); background: var(--red-l); }
.quick-tile .plus { font-size: 18px; }
.screen.quiet, .screen.quiet .stagger > * { animation: none; }

/* ---------- приглашения ---------- */
.invite-card {
  width: 100%; display: flex; align-items: center; gap: 14px; text-align: left; color: #fff; margin-bottom: 12px;
  padding: 14px 16px; border-radius: var(--radius); background: linear-gradient(135deg, var(--purple), var(--blue));
  box-shadow: 0 5px 0 var(--purple-d); transition: transform .08s, box-shadow .08s;
}
.invite-card:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--purple-d); }
.invite-card .gift { font-size: 38px; line-height: 1; }
/* подарок спокойно покачивается раз в несколько секунд, а не дёргается */
.invite-card b { font-size: 17px; font-weight: 900; }
.invite-card .it { font-size: 13px; font-weight: 700; opacity: .92; margin-top: 2px; }
.invite-card .go { width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, .22); display: grid; place-items: center; font-weight: 900; flex: none; }
.invite-hero { text-align: center; margin-bottom: 14px; }
.steps { display: grid; gap: 8px; margin-bottom: 16px; }
.steps div { display: flex; align-items: center; gap: 12px; font-weight: 800; font-size: 14px; padding: 10px 12px; border: 2px solid var(--line); border-radius: 14px; }
.steps span { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--green); color: #fff; font-weight: 900; }
.link-box { width: 100%; display: flex; align-items: center; gap: 10px; margin: 8px 0 12px; padding: 12px 14px; border-radius: 14px; border: 2px dashed var(--blue-b); background: var(--blue-l); text-align: left; font-size: 13px; font-weight: 800; color: var(--text-2); }
.link-box .grow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-box b { color: var(--blue); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; flex: none; }
.friend-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 2px solid var(--line); }
.friend-row:last-child { border-bottom: 0; }
.friend-row .fav { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--purple-l); color: var(--purple-d); font-weight: 900; font-size: 17px; }
.friend-row .muted { font-size: 12px; font-weight: 700; }
.xp-chip.on { color: #fff; background: var(--green); }

/* ---------- админка ---------- */
.admin-row { border-color: var(--purple); }
.admin-row .emoji { background: var(--purple-l); }
.adm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.adm-tile { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; }
.adm-tile .gi { grid-row: span 2; font-size: 28px; }
.adm-tile .val { margin: 0; font-size: 24px; }
.adm-tile .label span { font-weight: 700; opacity: .8; }
.adm-user { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 2px solid var(--line); cursor: pointer; }
.adm-user:last-child { border-bottom: 0; }
.adm-user:active { opacity: .6; }
.adm-user .title { font-weight: 800; }
.adm-user.banned .title { color: var(--red); text-decoration: line-through; }
.fav { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--purple-l); color: var(--purple-d); font-weight: 900; font-size: 17px; }
.fav.big { width: 56px; height: 56px; font-size: 24px; }

/* ---------- активность ---------- */
.act-card .head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.act-card .bonus { font-size: 13px; font-weight: 900; color: #fff; background: var(--green); border-radius: 10px; padding: 4px 9px; white-space: nowrap; }
.act-card .bonus.zero { color: var(--text-3); background: var(--card-2); }
.act-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 2px solid var(--line); }
.act-row:last-of-type { border-bottom: 0; }
.act-row .ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 22px; background: var(--green-l); flex: none; }
.act-row .t { font-weight: 800; }
.act-row .m { font-size: 12px; color: var(--text-3); font-weight: 700; }
.kind-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.kind-grid .option { padding: 10px 12px; gap: 10px; }
.kind-grid .option .emoji { font-size: 22px; }
.kind-grid .option .t { font-size: 14px; }
.estimate { text-align: center; font-weight: 800; margin: 4px 0 14px; color: var(--text-2); }
.estimate b { color: var(--green-d); }
.goal-extra { display: block; font-size: 11px; color: var(--green-d); font-weight: 900; margin-top: 2px; }
.big-input { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin: 18px 0 10px; }
.big-input input { width: 190px; min-width: 0; text-align: center; font-size: 48px; font-weight: 900; border: 0; border-bottom: 4px solid var(--green); background: none; outline: none; padding: 0 0 4px; font-variant-numeric: tabular-nums; color: var(--text); }
.big-input input::placeholder { color: var(--text-3); opacity: .35; }
.big-input span { font-size: 18px; color: var(--text-3); font-weight: 800; }

/* ---------- иллюстрации упражнений ---------- */
/* толщины — в единицах рисунка (поле 112×112); у маленьких иконок линии толще, чтобы читались */
.exfig { display: block; overflow: hidden; }
.exfig [class^="fig-"] { stroke: var(--fig); stroke-linecap: round; fill: none; }
.exfig .fig-torso { stroke-width: 8.5; }
.exfig .fig-limb, .exfig .fig-far { stroke-width: 5.5; }
.exfig .fig-far { opacity: .35; }
.exfig .fig-head { fill: var(--fig); stroke: none; }
.exfig .prop-floor { stroke: var(--line); stroke-width: 3; stroke-linecap: round; }
.exfig .prop-mat { stroke: var(--fig-accent-l); stroke-width: 4; stroke-linecap: round; }
.exfig .prop-bench, .exfig .prop-platform { stroke: var(--fig-prop); stroke-width: 4.5; stroke-linecap: round; }
.exfig .prop-leg, .exfig .prop-tower, .exfig .prop-rack { stroke: var(--fig-prop); stroke-width: 2.5; stroke-linecap: round; }
.exfig .prop-rack { stroke-width: 3.5; }
.exfig .prop-tower { opacity: .6; }
.exfig .prop-bar { stroke: var(--fig-steel); stroke-width: 2.5; stroke-linecap: round; }
.exfig .prop-weight, .exfig .prop-plate { fill: var(--blue); stroke: none; }
.exfig .prop-weight { rx: 1.5; }
.exfig .prop-hub { fill: var(--card); stroke: none; }
.exfig .prop-cable { stroke: var(--blue); stroke-width: 1.6; stroke-dasharray: 3 2; }
.exfig .prop-pulley { fill: var(--card); stroke: var(--blue); stroke-width: 1.6; }
.exfig .prop-band { stroke: var(--orange); stroke-width: 2.5; stroke-linecap: round; }
.exfig .prop-pad { fill: var(--orange); stroke: none; }
.exfig .prop-box { fill: var(--fig-prop); stroke: none; rx: 2; }
.exfig.sm .fig-torso { stroke-width: 12; }
.exfig.sm .fig-limb, .exfig.sm .fig-far { stroke-width: 8; }
.exfig.sm .prop-bench, .exfig.sm .prop-platform { stroke-width: 6.5; }
.exfig.sm .prop-leg, .exfig.sm .prop-tower, .exfig.sm .prop-rack, .exfig.sm .prop-bar, .exfig.sm .prop-band { stroke-width: 4; }
.exfig.sm .prop-cable, .exfig.sm .prop-pulley { stroke-width: 2.5; }
.exfig.sm .prop-floor, .exfig.sm .prop-mat { stroke-width: 5; }
:root { --fig: #4B4B4B; --fig-prop: #CFCFCF; --fig-steel: #8A8A8A; --fig-accent-l: #D7FFB8; }
:root[data-theme="dark"] { --fig: #DCE6EC; --fig-prop: #4E606B; --fig-steel: #9FB0BA; --fig-accent-l: #3A6B22; }
.ex-thumb { width: 48px; height: 48px; flex: none; border-radius: 14px; display: grid; place-items: center; overflow: hidden; }
.ex-thumb.sm { width: 42px; height: 42px; border-radius: 12px; }
.ex-hero { border-radius: var(--radius); display: grid; place-items: center; padding: 8px 0; margin-bottom: 12px; border: 2px solid var(--line); }
.tintbg-legs { background: var(--green-l); } .tintbg-back { background: var(--blue-l); } .tintbg-chest { background: var(--orange-l); }
.tintbg-shoulders { background: var(--purple-l); } .tintbg-arms { background: var(--yellow-l); } .tintbg-core { background: var(--red-l); }

/* ---------- рейтинг ---------- */
.podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-items: end; margin: 8px 0 14px; }
.pod { text-align: center; position: relative; }
.pod .crown { font-size: 26px; line-height: 1; margin-bottom: 2px; }
.pod .pa { width: 56px; height: 56px; margin: 0 auto 6px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; font-weight: 900; color: #fff; background: var(--c); box-shadow: 0 4px 0 var(--cd); }
.pod.p1 .pa { width: 68px; height: 68px; font-size: 28px; }
.pod .pn { font-weight: 900; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pod .pv { font-weight: 900; font-size: 18px; color: var(--cd); margin-bottom: 6px; }
.pod .pv small, .rank-row .rv small, .my-place .rv small { font-size: 11px; color: var(--text-3); }
.pod .pb { border-radius: 14px 14px 0 0; background: var(--c); color: #fff; font-weight: 900; font-size: 26px; display: grid; place-items: center; box-shadow: inset 0 -5px 0 var(--cd); }
.pod.p1 { --c: var(--yellow); --cd: var(--yellow-d); } .pod.p1 .pb { height: 96px; }
.pod.p2 { --c: #B8C4CC; --cd: #8E9BA3; } .pod.p2 .pb { height: 70px; }
.pod.p3 { --c: #E8A36B; --cd: #C27B42; } .pod.p3 .pb { height: 52px; }
.pod.empty { opacity: .35; }
.pod.me .pn { color: var(--blue); }
.rank-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 2px solid var(--line); }
.rank-row:last-child { border-bottom: 0; }
.rank-row .rp { width: 24px; font-weight: 900; color: var(--text-3); text-align: center; }
.rank-row .muted { font-size: 12px; font-weight: 700; }
.rank-row.me b { color: var(--blue); }
.rank-row .rv, .my-place .rv { font-size: 17px; font-weight: 900; white-space: nowrap; }
.my-place { display: flex; align-items: center; gap: 12px; padding: 14px 16px; margin-bottom: 12px; border-radius: var(--radius); background: var(--blue-l); border: 2px solid var(--blue-b); }
.my-place .muted { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.my-place b { font-size: 18px; }
.tabbar button { max-width: 84px; font-size: 10.5px; }

/* ---------- фото рецептов ---------- */
.rphoto { width: 46px; height: 46px; border-radius: 14px; object-fit: cover; flex: none; background: var(--card-2); }
.recipe-photo { display: block; width: calc(100% + 32px); margin: -10px -16px 14px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 22px 22px 0 0; background: var(--card-2); }
.photo-pick { width: 84px; height: 84px; flex: none; border-radius: 16px; border: 2px dashed var(--line); display: grid; place-items: center; align-content: center; gap: 2px; cursor: pointer; background: var(--card-2) center / cover no-repeat; }
.photo-pick span { font-size: 26px; }
.photo-pick em { font-style: normal; font-size: 11px; font-weight: 800; color: var(--text-3); }
.photo-pick.has { border-style: solid; border-color: var(--green); }
.photo-pick.has span, .photo-pick.has em { display: none; }

/* ---------- заморозка стрика ---------- */
.fz-badge { font-size: 12px; margin-left: 3px; }
.wday.frozen .c { background: var(--blue-l); border-color: var(--blue-b); }
.freeze-card .fz-slots { display: flex; gap: 6px; flex: none; }
.fz-slot { width: 38px; height: 38px; border-radius: 12px; border: 2px dashed var(--line); display: grid; place-items: center; font-size: 22px; }
.fz-slot.on { border: 2px solid var(--blue-b); background: var(--blue-l); animation: pop .4s cubic-bezier(.3, 1.6, .5, 1) both; }
.freeze-card .muted { font-size: 13px; font-weight: 700; margin: 2px 0 12px; }

/* ---------- забеги ---------- */
.race-card .race-ic { font-size: 30px; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--orange-l, var(--card-2)); flex: none; }
.race-card .race-t { font-size: 17px; font-weight: 900; }
.race-card.ended { opacity: .85; }
.race-days { display: flex; align-items: center; gap: 10px; margin: 4px 0 6px; }
.race-days .pbar { flex: 1; }
.race-days span { font-size: 12px; font-weight: 800; color: var(--text-3); flex: none; }
.race-m { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.race-m .grow .pbar { margin-top: 6px; }
.race-m.me b { color: var(--blue); }
.race-v { font-weight: 900; font-variant-numeric: tabular-nums; }
.race-v small { color: var(--text-3); font-weight: 800; }
.race-win { margin-top: 10px; padding: 10px 12px; border-radius: 14px; background: var(--yellow-l); color: var(--yellow-d); font-weight: 900; text-align: center; }
.race-empty { text-align: center; padding: 20px 16px; }
.race-kinds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.race-kind { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border-radius: 14px; border: 2px solid var(--line); border-bottom-width: 4px; background: var(--card); font-size: 12px; }
.race-kind span { font-size: 24px; line-height: 1; }
.race-kind.active { border-color: var(--blue-b); background: var(--blue-l); color: var(--blue); }
.race-preview { text-align: center; font-size: 15px; font-weight: 700; line-height: 1.45; }
.label-sm { font-size: 12px; color: var(--text-3); margin: 0 2px 6px; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; }

/* ---------- рекламные ссылки ---------- */
.camp-more summary { font-size: 13px; font-weight: 800; color: var(--blue); margin-top: 10px; cursor: pointer; }
.camp-big { font-size: 13px; font-weight: 700; color: var(--text-2); margin-top: 2px; }

.goal-pill { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 5px 10px; border-radius: 12px; background: var(--card-2); border: 2px solid var(--line); font-size: 14px; font-weight: 800; color: var(--text-2); text-align: left; }
.goal-pill b { font-size: 12px; }
.goal-pill:active { transform: translateY(1px); }

/* ---------- опрос ---------- */
.sv-q { padding: 10px 0; border-bottom: 2px solid var(--line); }
.sv-q:last-child { border-bottom: 0; }
.sv-opt { margin-top: 8px; font-size: 14px; font-weight: 700; }
.sv-opt .pbar { margin-top: 4px; }
.sv-text { margin-top: 6px; padding: 8px 10px; border-radius: 10px; background: var(--card-2); font-size: 14px; font-weight: 600; }

/* ---------- аналитика в админке ---------- */
.ins-grid { display: grid; gap: 10px; margin-bottom: 12px; }
.ins-tile { display: grid; grid-template-columns: 44px auto 1fr; column-gap: 12px; align-items: center; text-align: left; padding: 12px 14px; }
.ins-tile .gi { font-size: 30px; text-align: center; }
.ins-tile .val { margin: 0; font-size: 26px; min-width: 64px; }
.ins-tile .label { text-transform: none; letter-spacing: 0; font-size: 14px; line-height: 1.3; }
.ins-tile .label span { font-weight: 700; opacity: .75; }
.sv-details summary { cursor: pointer; list-style: none; }
.sv-details summary::-webkit-details-marker { display: none; }
.sv-details summary::after { content: " ▾"; color: var(--text-3); }
.seg-bar { display: flex; height: 18px; border-radius: 10px; overflow: hidden; gap: 2px; margin: 4px 0 10px; background: var(--card-2); }
.seg-bar i { display: block; min-width: 4px; }
.seg-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 14px; font-weight: 700; }
.seg-row > i { width: 12px; height: 12px; border-radius: 4px; flex: none; }
.seg-row small { min-width: 28px; text-align: right; }
.dau { display: flex; align-items: flex-end; gap: 2px; height: 80px; }
.dau-col { flex: 1; height: 100%; display: flex; align-items: flex-end; }
.dau-col i { display: block; width: 100%; border-radius: 3px 3px 0 0; background: var(--green); }

/* ---------- «Чем добрать» ---------- */
.fill-card .x-btn { width: 30px; height: 30px; border-radius: 10px; color: var(--text-3); font-weight: 900; }
.fill-gap { margin-top: 12px; }
.fill-need { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; color: var(--text-2); margin-bottom: 8px; }
.fill-need i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.fill-row { display: grid; gap: 8px; }
.fill-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 14px; border: 2px solid var(--line); border-bottom-width: 4px; background: var(--card); text-align: left; }
.fill-item:active { transform: translateY(2px); border-bottom-width: 2px; }
.fill-item .fe { font-size: 24px; line-height: 1; }
.fill-item b { display: block; font-size: 15px; font-weight: 800; }
.fill-item small { font-size: 12px; font-weight: 700; color: var(--text-3); }
.fill-item .plus { width: 30px; height: 30px; border-radius: 10px; background: var(--green); color: #fff; display: grid; place-items: center; font-weight: 900; font-size: 18px; flex: none; }
.fill-item.added { border-color: var(--green); background: var(--green-l); }
.fill-item.added .plus { background: var(--green-d); }