:root {
  --bg-base: #F5F8FC;
  --bg-blob-1: #DCEEFF;
  --bg-blob-2: #EDE7FB;
  --bg-blob-3: #E3F6EE;

  --glass-bg: rgba(255, 255, 255, .38);
  --glass-bg-strong: rgba(255, 255, 255, .55);
  --glass-border: rgba(255, 255, 255, .8);
  --glass-shadow: 0 10px 40px rgba(31, 41, 55, .10);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, .85), inset 0 0 0 1px rgba(255, 255, 255, .18);

  --text-primary: #1C1E21;
  --text-secondary: #6B7280;
  --text-tertiary: #9CA3AF;

  --c-kcal: #60A5FA;
  --c-kcal-2: #BFE3FF;
  --c-protein: #A78BFA;
  --c-protein-2: #DCD0FB;
  --c-fat: #34D399;
  --c-fat-2: #BBF7D6;
  --c-carbs: #F4C152;
  --c-carbs-2: #FDE9B8;
  --c-weight: #93C5FD;
  --c-waist: #F472B6;
  --c-hips: #A78BFA;
  --c-chest: #34D399;
  --c-neck: #FBBF24;
  --c-water: #38BDF8;
  --c-water-2: #BAE6FD;

  --pet-fire-1: #FFD58A;
  --pet-fire-2: #FF9A52;
  --pet-fire-3: #FF6F3C;
  --pet-fire-4: #FFD23C;

  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease: cubic-bezier(.25, .1, .25, 1);

  --radius-lg: 28px;
  --radius-md: 20px;
  --radius-sm: 14px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
input, textarea, select { caret-color: var(--text-primary); }

html, body { margin: 0; padding: 0; }

body {
  font-family: -apple-system, "SF Pro Display", "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
  background: var(--bg-base);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
}

#app {
  position: relative;
  min-height: 100vh;
  max-width: 480px;
  margin: 0 auto;
  overflow-x: hidden;
}

/* ---------- background blobs ---------- */

.bg-blobs {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .8;
}

.blob-1 { width: 320px; height: 320px; background: var(--bg-blob-1); top: -90px; left: -70px; }
.blob-2 { width: 300px; height: 300px; background: var(--bg-blob-2); top: 240px; right: -120px; }
.blob-3 { width: 280px; height: 280px; background: var(--bg-blob-3); bottom: 60px; left: -100px; }

/* ---------- glass system ---------- */

.glass {
  position: relative;
  background: var(--glass-bg);
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), var(--glass-highlight);
  overflow: hidden;
}

.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255, 255, 255, .35) 0%, rgba(255, 255, 255, 0) 50%);
  pointer-events: none;
}

.card {
  border-radius: var(--radius-lg);
  padding: 20px;
  margin: 0 16px 16px;
  animation: cardIn .6s var(--spring) both;
}

.card:nth-of-type(1) { animation-delay: .02s; }
.card:nth-of-type(2) { animation-delay: .08s; }
.card:nth-of-type(3) { animation-delay: .14s; }
.card:nth-of-type(4) { animation-delay: .2s; }
.card:nth-of-type(5) { animation-delay: .26s; }

@keyframes cardIn {
  from { opacity: 0; transform: translateY(16px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- layout / screens ---------- */

#screens { padding-top: 20px; padding-bottom: 116px; }

.screen { display: none; }
.screen.active { display: block; }

.screen-header { padding: 8px 20px 18px; animation: cardIn .6s var(--spring) both; }

.screen-back-btn {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 4px 8px 4px 2px; margin-bottom: 2px;
  border: none; background: transparent; cursor: pointer;
  color: var(--c-kcal-2); font-family: inherit;
  font-size: 14px; font-weight: 600; border-radius: 8px;
}
.screen-back-btn:active { opacity: .7; }

.eyebrow {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  text-transform: capitalize;
}

.screen-header h1 {
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.streak-badge-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.streak-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--c-carbs-2), var(--c-carbs));
  font-size: 13px;
  font-weight: 700;
  color: #8A5A12;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
}

.streak-flame { font-size: 14px; }

.streak-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: var(--glass-bg-strong);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: var(--glass-shadow), var(--glass-highlight);
  color: var(--c-kcal);
  cursor: pointer;
  transition: transform .25s var(--spring), opacity .25s var(--ease);
}

.streak-share-btn svg { width: 14px; height: 14px; }
.streak-share-btn:active { transform: scale(.9); }
.streak-share-btn:disabled { opacity: .5; cursor: default; }

/* ---------- loading / empty / error ---------- */

.loading, .empty-state, .error-state {
  margin: 0 16px 16px;
  padding: 36px 20px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.5;
  border-radius: var(--radius-lg);
}

.empty-state, .error-state {
  background: var(--glass-bg);
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), var(--glass-highlight);
}

/* ---------- home: hero ring card ---------- */

.hero-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  padding: 32px 22px;
}

.ring-wrap { position: relative; width: 180px; height: 180px; }

.ring { width: 100%; height: 100%; transform: rotate(-90deg); }

.ring-track {
  fill: none;
  stroke: rgba(99, 115, 140, .10);
  stroke-width: 12;
}

.ring-progress {
  fill: none;
  stroke-width: 12;
  stroke-linecap: round;
  transition: stroke-dashoffset 1.1s var(--spring);
}

.ring-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.ring-value {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}

.ring-label {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 6px;
}

.macro-bars {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.macro-bar-head {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  margin-bottom: 7px;
  color: var(--text-secondary);
}

.macro-name { color: var(--text-primary); font-weight: 600; }

.macro-track {
  height: 10px;
  border-radius: 999px;
  background: rgba(99, 115, 140, .10);
  overflow: hidden;
}

.macro-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  transition: width 1s var(--spring);
  will-change: width;
  position: relative;
}

.macro-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0));
}

.macro-protein { background: linear-gradient(90deg, var(--c-protein-2), var(--c-protein)); }
.macro-fat { background: linear-gradient(90deg, var(--c-fat-2), var(--c-fat)); }
.macro-carbs { background: linear-gradient(90deg, var(--c-carbs-2), var(--c-carbs)); }

/* ---------- tip / insight cards ---------- */

.tip-card, .insight-card, .comment-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.tip-card p, .insight-card p, .comment-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-primary);
}

.comment-card p { color: var(--text-secondary); }

.tip-icon, .insight-icon, .comment-icon {
  font-size: 18px;
  flex-shrink: 0;
  line-height: 1.6;
  background: linear-gradient(135deg, var(--c-protein), var(--c-kcal));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.tip-loading { color: var(--text-secondary); font-size: 14px; }

/* ---------- previous day summary ---------- */

.prev-day-card { display: block; }

.prev-day-card .summary-kcal { margin-bottom: 16px; }

.prev-day-comment {
  margin: 16px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(99, 115, 140, .10);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* ---------- CTA button ---------- */

.cta-button {
  display: block;
  width: calc(100% - 32px);
  margin: 8px 16px 24px;
  padding: 17px;
  border: none;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--c-kcal-2), var(--c-protein-2));
  color: #1C1E21;
  font-size: 16px;
  font-weight: 600;
  font-family: inherit;
  box-shadow: 0 10px 28px rgba(96, 165, 250, .25), inset 0 1px 0 rgba(255, 255, 255, .7);
  transition: transform .25s var(--spring), box-shadow .25s var(--spring);
  cursor: pointer;
}

.cta-button:active { transform: scale(.97); }

.cta-button:disabled { opacity: .6; cursor: default; }

/* ---------- diary ---------- */

.day-block { margin-bottom: 6px; }

.day-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 4px 20px 12px;
}

.day-head h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.day-kcal { font-size: 13px; color: var(--text-secondary); font-weight: 500; }

.food-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: visible;
}

.food-item-swipe:not(:last-child) .food-item {
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(99, 115, 140, .10);
}

.food-item-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.food-name { font-weight: 600; font-size: 15px; line-height: 1.4; }

.estimate-badge {
  font-size: 12px;
  color: var(--text-tertiary);
  flex-shrink: 0;
}

.food-macros { display: flex; gap: 8px; flex-wrap: wrap; }

.macro-pill {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 600;
}

.macro-pill.macro-kcal { background: rgba(96, 165, 250, .14); color: #2563EB; }
.macro-pill.macro-protein { background: rgba(167, 139, 250, .14); color: #7C3AED; }
.macro-pill.macro-fat { background: rgba(52, 211, 153, .16); color: #059669; }
.macro-pill.macro-carbs { background: rgba(244, 193, 82, .18); color: #B45309; }

.comment-card { margin-top: -4px; }

/* ---------- analytics ---------- */

.chart-card { padding: 18px 16px 16px; }

.chart-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
  padding: 0 4px;
}

.chart-head h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.chart-value { display: flex; align-items: baseline; gap: 8px; }

.chart-current { font-size: 18px; font-weight: 700; }

.chart-delta { font-size: 13px; font-weight: 600; }

.chart-delta.up { color: #059669; }
.chart-delta.down { color: var(--text-secondary); }

.chart-svg {
  width: 100%;
  height: 100px;
  display: block;
  margin-top: 6px;
  animation: chartIn 1s var(--spring) both;
}

@keyframes chartIn {
  from { opacity: 0; transform: scaleY(.85); transform-origin: bottom; }
  to { opacity: 1; transform: scaleY(1); }
}

.chart-line {
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chart-line-weight { stroke: var(--c-weight); }
.chart-line-kcal { stroke: var(--c-kcal); }
.chart-line-protein { stroke: var(--c-protein); }
.chart-line-fat { stroke: var(--c-fat); }
.chart-line-carbs { stroke: var(--c-carbs); }
.chart-line-waist { stroke: var(--c-waist); }
.chart-line-hips  { stroke: var(--c-hips); }
.chart-line-chest { stroke: var(--c-chest); }
.chart-line-neck  { stroke: var(--c-neck); }

.target-line {
  stroke: rgba(107, 114, 128, .28);
  stroke-width: 1;
  stroke-dasharray: 4 4;
}

.empty-hint { margin: 8px 4px 0; font-size: 13px; color: var(--text-tertiary); }

/* ---------- AI assistant ---------- */

.about-card h3 {
  margin: 0 0 14px;
  font-size: 16px;
  font-weight: 700;
}

.about-card ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.about-card li {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary);
  padding-left: 18px;
  position: relative;
}

.about-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-kcal), var(--c-protein));
}

/* ---------- особенности питания ---------- */

.preferences-card { padding: 18px 16px; }

.preferences-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.preferences-head h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.card-edit-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, .55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
  font-size: 14px;
  cursor: pointer;
  transition: transform .25s var(--spring);
  flex-shrink: 0;
}

.card-edit-btn:active { transform: scale(.92); }

.preferences-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-primary);
}

.empty-hint-inline { color: var(--text-tertiary); }

/* ---------- goal mode card ---------- */

.goal-mode-card { padding: 18px 16px; }

.goal-mode-label {
  margin: 0 0 2px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.goal-mode-kcal {
  margin: 0;
  font-size: 13px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.goal-mode-custom-badge {
  font-size: 11px;
  font-weight: 600;
  background: rgba(139,92,246,.15);
  color: #7C3AED;
  border-radius: 6px;
  padding: 1px 6px;
}

/* mode selector sheet */

.goal-mode-options { display: flex; flex-direction: column; gap: 8px; margin: 16px 0 4px; }

.goal-mode-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 1px 3px rgba(0,0,0,.06);
  cursor: pointer;
  transition: background .18s, box-shadow .18s;
  border: 2px solid transparent;
}

.goal-mode-option.selected {
  background: rgba(139,92,246,.12);
  border-color: #8B5CF6;
  box-shadow: 0 0 0 2px rgba(139,92,246,.2);
}

.goal-mode-opt-emoji { font-size: 22px; line-height: 1; flex-shrink: 0; }

.goal-mode-opt-text { display: flex; flex-direction: column; gap: 1px; flex: 1; }

.goal-mode-opt-name { font-size: 15px; font-weight: 600; color: var(--text-primary); }

.goal-mode-opt-hint { font-size: 12px; color: var(--text-secondary); }

.goal-mode-opt-check {
  font-size: 16px;
  color: #8B5CF6;
  font-weight: 700;
  opacity: 0;
  transition: opacity .15s;
}

.goal-mode-option.selected .goal-mode-opt-check { opacity: 1; }

/* ---------- AI chat ---------- */

.chat-card { padding: 16px 16px 18px; }

.chat-messages {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 360px;
  overflow-y: auto;
  margin-bottom: 14px;
  padding-right: 2px;
}

.chat-empty {
  margin: 4px 2px 14px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.chat-bubble {
  max-width: 84%;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  animation: cardIn .4s var(--spring) both;
}

.chat-bubble-user {
  align-self: flex-end;
  background: linear-gradient(135deg, var(--c-kcal-2), var(--c-protein-2));
  color: #1C1E21;
  border-bottom-right-radius: 6px;
}

.chat-bubble-assistant {
  align-self: flex-start;
  background: rgba(99, 115, 140, .08);
  color: var(--text-primary);
  border-bottom-left-radius: 6px;
}

.chat-typing {
  color: var(--text-tertiary);
  animation: chatTypingBlink 1.2s ease-in-out infinite;
}

@keyframes chatTypingBlink {
  0%, 100% { opacity: .4; }
  50% { opacity: 1; }
}

.chat-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.chat-quick-btn {
  padding: 8px 14px;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, .7);
  color: var(--c-kcal);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .25s var(--spring), opacity .25s var(--ease);
}

.chat-quick-btn:active { transform: scale(.96); }
.chat-quick-btn:disabled { opacity: .5; cursor: default; }

.chat-limit-banner {
  align-self: center;
  text-align: center;
  font-size: 13px;
  color: var(--text-secondary);
  background: rgba(99, 115, 140, .08);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  line-height: 1.5;
}

/* ---------- premium / paywall ---------- */

.pro-badge {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, #FDF6E3, #F3E3C3);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  color: #92702A;
  margin-bottom: 14px;
}

.soon-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(99, 115, 140, .12);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

.b2b-teaser-card h3 {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 700;
}

.b2b-teaser-card p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.paywall-hero, .pro-active-card {
  text-align: center;
  padding: 34px 22px;
}

.paywall-hero h2, .pro-active-card h2 {
  margin: 4px 0 8px;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.paywall-sub, .pro-active-card p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.6;
}

.feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.feature-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  font-weight: 500;
}

.feature-check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-fat-2), var(--c-fat));
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}

.price-card { text-align: center; }

.price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding: 0 4px;
}

.price-label { color: var(--text-secondary); font-size: 14px; }

.price-value { font-size: 22px; font-weight: 700; }

.price-hint {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-tertiary);
  text-align: center;
}

.pro-until {
  margin: 14px 0 0;
  font-size: 14px;
  color: var(--text-secondary);
}

.pro-until b { color: var(--text-primary); }

.renewal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 8px 20px 28px;
  padding-top: 14px;
  border-top: 1px solid rgba(99, 115, 140, .12);
  opacity: .8;
}

.renewal-footer-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.renewal-footer-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-tertiary);
}

.renewal-footer-hint {
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-tertiary);
}

.switch-sm {
  width: 36px;
  height: 22px;
}

.switch-sm::before {
  width: 18px;
  height: 18px;
}

.switch-sm.on::before { transform: translateX(14px); }

.switch {
  position: relative;
  flex-shrink: 0;
  width: 51px;
  height: 31px;
  border-radius: 999px;
  border: none;
  padding: 0;
  background: rgba(120, 120, 128, .16);
  cursor: pointer;
  transition: background .25s var(--ease);
}

.switch::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
  transition: transform .25s var(--spring);
}

.switch.on {
  background: linear-gradient(135deg, var(--c-fat-2), var(--c-fat));
}

.switch.on::before { transform: translateX(20px); }

.switch:disabled { opacity: .45; cursor: default; }

/* ---------- referral ---------- */

.referral-card h2 {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.referral-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.bonus-days-banner {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--c-fat-2), var(--c-fat));
  color: #064E3B;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}

.referral-stats {
  display: flex;
  gap: 12px;
  margin-top: 18px;
}

.referral-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 8px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .5);
}

.referral-stat-value {
  font-size: 22px;
  font-weight: 700;
}

.referral-stat-label {
  font-size: 12px;
  color: var(--text-tertiary);
}

.referral-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}

.referral-actions .cta-button {
  width: 100%;
  margin: 0;
}

/* ---------- докупка дополнительных дней Pro ---------- */
.extra-days-card h2 {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.extra-days-hint {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.extra-days-options {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

.extra-days-option {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 8px;
  border: none;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .5);
  font-family: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: transform .15s var(--ease), background .15s var(--ease);
}

.extra-days-option:active { transform: scale(.97); background: rgba(255, 255, 255, .8); }
.extra-days-option:disabled { opacity: .6; }

.extra-days-amount { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.extra-days-price { font-size: 13px; color: var(--text-tertiary); }

/* ---------- бесплатные дни Pro (валюта: шеринг/реферал/стрики) ---------- */
.bonus-days-card h2 {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.bonus-days-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.bonus-days-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.bonus-days-list-icon {
  flex-shrink: 0;
  font-size: 20px;
  line-height: 1.4;
}

.bonus-days-list strong { color: var(--text-primary); }

.bonus-days-progress { margin-top: 18px; }

.bonus-days-progress-bar {
  height: 10px;
  border-radius: 999px;
  background: rgba(99, 115, 140, .10);
  overflow: hidden;
}

.bonus-days-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--c-fat-2), var(--c-fat));
  transition: width 1s var(--spring);
  will-change: width;
}

.bonus-days-progress-label {
  margin: 8px 0 0;
  font-size: 12.5px;
  color: var(--text-tertiary);
  text-align: center;
}

/* ---------- баланс дней Pro (копилка + подписка) ---------- */
.balance-card h2 {
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.balance-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-top: 1px solid rgba(99, 115, 140, .10);
  font-size: 14px;
}

.balance-row:first-of-type { border-top: none; padding-top: 0; }

.balance-row-label { color: var(--text-secondary); }

.balance-row-value { font-weight: 700; color: var(--text-primary); }

.wallet-hint, .wallet-decay-hint {
  margin: 12px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-tertiary);
}

.wallet-decay-hint {
  color: #92702A;
  font-weight: 600;
}

.balance-card .cta-button { margin-top: 16px; }

/* ---------- ставка на цель месяца ---------- */
.goal-bet-card h2 {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.goal-bet-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.goal-bet-hint {
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--text-tertiary) !important;
}

.goal-bet-form {
  display: flex;
  gap: 12px;
  margin: 16px 0;
}

.goal-bet-field {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12.5px;
  color: var(--text-tertiary);
}

.goal-bet-field select {
  padding: 12px;
  border: none;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .5);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  -webkit-appearance: none;
  appearance: none;
}

.cta-button-secondary {
  display: block;
  width: 100%;
  padding: 17px;
  border: none;
  border-radius: var(--radius-md);
  background: rgba(120, 120, 128, .12);
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 600;
  font-family: inherit;
  transition: transform .25s var(--spring);
  cursor: pointer;
}

.cta-button-secondary:active { transform: scale(.97); }

/* ---------- inputs (вес / еда) ---------- */

.input-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.input-card-head h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  flex: 1;
}

.fav-btn {
  background: rgba(255,255,255,.15);
  border: 1.5px solid rgba(255,255,255,.35);
  border-radius: 20px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(0,0,0,.12);
  transition: background .15s, transform .1s;
}
.fav-btn:active { background: rgba(255,255,255,.28); transform: scale(.95); }

.fav-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 65vh;
  overflow-y: auto;
}
.fav-product-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: rgba(255,255,255,.06);
  border-radius: 12px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background .15s;
}
.fav-product-row:active { background: rgba(255,255,255,.12); }
.fav-product-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
.fav-product-meta {
  font-size: 12px;
  color: var(--text-secondary);
}
.fav-product-desc {
  font-size: 11px;
  color: var(--text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fav-verified {
  color: #10B981;
  font-weight: 700;
  margin-left: 6px;
  font-size: 13px;
}
.fav-add-btn {
  background: rgba(255,255,255,.6);
  border: 1px solid rgba(99, 115, 140, .14);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, transform .1s;
}
.fav-add-btn:active { background: rgba(255,255,255,.9); transform: scale(.95); }

/* ---------- переключатель «на 100 г / на порцию» ---------- */

.seg-toggle {
  display: flex;
  gap: 6px;
}
.seg-toggle button {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  padding: 9px 8px;
  border: 1px solid rgba(99, 115, 140, .14);
  border-radius: 12px;
  background: rgba(255, 255, 255, .5);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.seg-toggle button.active {
  background: linear-gradient(135deg, var(--c-kcal-2), var(--c-kcal));
  border-color: transparent;
  color: #fff;
}

/* ---------- уточняющий вопрос ИИ ---------- */

.clarify-card { padding: 14px 16px; }
.clarify-head {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.clarify-icon { font-size: 16px; line-height: 1.3; }
.clarify-question {
  flex: 1;
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
}
.clarify-close {
  background: none;
  border: none;
  color: var(--text-tertiary);
  font-size: 14px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1.3;
}
.clarify-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.clarify-chip {
  -webkit-appearance: none;
  appearance: none;
  padding: 8px 14px;
  border: 1px solid rgba(99, 115, 140, .14);
  border-radius: 999px;
  background: rgba(255, 255, 255, .6);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  transition: background .2s var(--ease), transform .1s;
}
.clarify-chip:active { background: rgba(255,255,255,.9); transform: scale(.96); }
.clarify-skip {
  display: block;
  background: none;
  border: none;
  margin-top: 10px;
  padding: 2px 0;
  font-family: inherit;
  font-size: 12px;
  color: var(--text-tertiary);
  text-decoration: underline;
  cursor: pointer;
}
.memory-badge { color: #B45309; }

.input-row {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}

.text-input {
  flex: 1;
  min-width: 0;
  padding: 13px 16px;
  border: 1px solid rgba(99, 115, 140, .14);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .6);
  font-family: inherit;
  font-size: 15px;
  color: var(--text-primary);
  caret-color: var(--text-primary);
  outline: none;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}

.text-input:focus {
  border-color: var(--c-kcal);
  box-shadow: 0 0 0 3px rgba(96, 165, 250, .15);
}

.food-textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  resize: none;
  overflow-y: hidden;
  min-height: 120px;
  max-height: 320px;
  line-height: 1.55;
  white-space: pre-wrap;
}

.input-card {
  overflow: visible;
}

.food-send-btn {
  display: block;
  width: 100%;
  margin-top: 12px;
}

.icon-button {
  flex-shrink: 0;
  padding: 13px 18px;
  border: none;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--c-kcal-2), var(--c-protein-2));
  color: #1C1E21;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .25s var(--spring), opacity .25s var(--ease);
}

.icon-button:active { transform: scale(.96); }
.icon-button:disabled { opacity: .6; cursor: default; }

.input-feedback {
  margin: 10px 2px 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
  min-height: 1px;
}

.input-feedback:empty { display: none; }

.input-feedback-error { color: #DC6B6B; }

/* ---------- трекер воды ---------- */

.water-ring-row {
  display: flex;
  justify-content: center;
  margin-bottom: 18px;
}

.water-ring-wrap {
  width: 120px;
  height: 120px;
}

.water-ring-wrap .ring-value {
  font-size: 24px;
}

.water-ring-wrap .ring-label {
  font-size: 11px;
  margin-top: 2px;
}

.water-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin-bottom: 12px;
  padding-bottom: 2px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.water-chips::-webkit-scrollbar { display: none; }

.water-chip {
  flex-shrink: 0;
  -webkit-appearance: none;
  appearance: none;
  padding: 8px 16px;
  border: 1px solid rgba(99, 115, 140, .14);
  border-radius: 999px;
  background: rgba(255, 255, 255, .6);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}

.water-chip.active {
  background: linear-gradient(135deg, var(--c-water-2), var(--c-water));
  border-color: transparent;
  color: #fff;
}

.water-sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.water-size-btn {
  flex: 1 1 calc(33.333% - 6px);
  -webkit-appearance: none;
  appearance: none;
  padding: 12px 8px;
  border: 1px solid rgba(99, 115, 140, .14);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .6);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  cursor: pointer;
  transition: transform .2s var(--spring), opacity .2s var(--ease);
}

.water-size-btn:active { transform: scale(.95); }
.water-size-btn:disabled { opacity: .6; cursor: default; }

.input-feedback a { color: #2563EB; font-weight: 600; }

/* ---------- завершение дня ---------- */

.secondary-button {
  display: block;
  width: calc(100% - 32px);
  margin: 0 16px 16px;
  padding: 15px;
  border: 1px solid rgba(99, 115, 140, .16);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, .4);
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: transform .25s var(--spring), opacity .25s var(--ease);
}

.secondary-button:active { transform: scale(.97); }
.secondary-button:disabled { opacity: .6; cursor: default; }

.summary-kcal {
  margin: 0;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.summary-kcal span {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
}

.paywall-hint p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.paywall-hint a { color: #2563EB; font-weight: 600; }

/* ---------- tab bar ---------- */

.tabbar {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  max-width: 448px;
  margin: 0 auto;
  border-radius: 26px;
  display: flex;
  justify-content: space-around;
  padding: 10px 6px;
  z-index: 10;
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}

/* Когда открыта системная клавиатура — убираем таб-бар, чтобы он не
   перекрывал поле ввода и саму клавиатуру. */
body.keyboard-open .tabbar {
  transform: translateY(140%);
  opacity: 0;
  pointer-events: none;
}

.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: var(--text-tertiary);
  font-size: 10.5px;
  font-weight: 600;
  font-family: inherit;
  padding: 7px 6px;
  border-radius: 18px;
  transition: color .3s var(--ease), background .3s var(--ease), transform .3s var(--spring);
  cursor: pointer;
}

.tab svg {
  width: 23px;
  height: 23px;
  transition: transform .3s var(--spring);
}

.tab.active {
  color: #2563EB;
  background: rgba(96, 165, 250, .14);
  transform: translateY(-2px);
}

.tab.active svg { transform: scale(1.08); }

/* ---------- редактирование целей КБЖУ ---------- */

.hero-card { position: relative; }

.hero-edit-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, .55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
  font-size: 16px;
  cursor: pointer;
  transition: transform .25s var(--spring);
}

.hero-edit-btn:active { transform: scale(.92); }

/* ---------- нижняя шторка (sheet) ---------- */

.sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(15, 23, 42, .32);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s var(--ease);
}

.sheet-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 480px;
  margin: 0 auto;
  background: var(--glass-bg-strong);
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), var(--glass-highlight);
  border-radius: 28px 28px 0 0;
  padding: 12px 20px calc(20px + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%);
  transition: transform .35s var(--spring);
}

.sheet-overlay.active .sheet { transform: translateY(0); }

.sheet-handle {
  width: 36px;
  height: 4px;
  border-radius: 999px;
  background: rgba(99, 115, 140, .25);
  margin: 4px auto 18px;
}

.sheet h2 {
  margin: 0 0 16px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.sheet-field { margin-bottom: 14px; }

.sheet-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.sheet-field input,
.sheet-field textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid rgba(99, 115, 140, .14);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .6);
  font-size: 15px;
  font-family: inherit;
  color: var(--text-primary);
}

.sheet-field textarea {
  resize: vertical;
  line-height: 1.5;
}

.sheet-field input:focus,
.sheet-field textarea:focus {
  border-color: var(--c-kcal);
  box-shadow: 0 0 0 3px rgba(96, 165, 250, .15);
  outline: none;
}

.sheet-hint {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.sheet-row { display: flex; gap: 10px; }
.sheet-row .sheet-field { flex: 1; }

.sheet-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
}

.sheet-feedback {
  margin: -4px 0 10px;
  font-size: 13px;
  color: var(--text-secondary);
  min-height: 1px;
}

.sheet-feedback:empty { display: none; }
.sheet-feedback.input-feedback-error { color: #DC6B6B; }

/* ---------- меню выбора способа шеринга ---------- */

.share-menu {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.share-menu-item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid rgba(99, 115, 140, .12);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .5);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: transform .15s var(--ease), background .15s var(--ease);
}

.share-menu-item:active {
  transform: scale(.98);
  background: rgba(255, 255, 255, .8);
}

.share-menu-icon {
  font-size: 24px;
  line-height: 1;
  flex-shrink: 0;
}

.share-menu-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.share-menu-text strong {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.share-menu-text small {
  font-size: 12.5px;
  color: var(--text-secondary);
}

/* ---------- свайп по записям дневника ---------- */

.food-item-swipe {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  margin: 0 -16px;
}

.food-item-swipe .food-item {
  position: relative;
  z-index: 1;
  background: var(--bg-base);
  padding: 10px 16px;
  transition: transform .3s var(--spring);
  touch-action: pan-y;
}

.food-item-swipe.swiped .food-item {
  transform: translateX(-128px);
}

.food-item-actions {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  display: flex;
}

.food-action-btn {
  width: 64px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #fff;
  cursor: pointer;
}

.food-action-edit { background: linear-gradient(135deg, var(--c-protein-2), var(--c-protein)); }
.food-action-delete { background: linear-gradient(135deg, #FCA5A5, #F87171); }

/* ---------- подсказка: свайп для редактирования/удаления ---------- */

@keyframes swipePeek {
  0%, 100% { transform: translateX(0); }
  30%, 50% { transform: translateX(-88px); }
}

.food-item-swipe .food-item.peek-hint {
  animation: swipePeek 1s var(--ease) 2;
}

/* ---------- шеринг: кнопка в заголовке ---------- */

.screen-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.share-pill-btn {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  gap: 6px;
  padding: 10px 16px;
  border: none;
  border-radius: 999px;
  margin-top: 2px;
  background: var(--glass-bg-strong);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: var(--glass-shadow), var(--glass-highlight);
  color: var(--c-kcal);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .25s var(--spring), opacity .25s var(--ease);
}

.share-pill-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.share-pill-btn:active { transform: scale(.95); }
.share-pill-btn:disabled { opacity: .5; cursor: default; }

/* ---------- достижения ---------- */

.achievements-card { padding: 18px 16px; }

.achievements-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
  padding: 0 4px;
}

.achievements-head h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.achievements-count {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}

.achievements-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.badge-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 18px 12px 14px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, .45);
  border: 1px solid rgba(255, 255, 255, .6);
  transition: transform .25s var(--spring);
}

.badge-tile.locked { opacity: .55; }

.badge-icon {
  width: 64px;
  height: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 3px solid var(--text-tertiary);
  color: var(--text-tertiary);
  margin-bottom: 4px;
}

.badge-tile.earned .badge-icon-streak { border-color: var(--c-kcal); color: var(--c-kcal); }
.badge-tile.earned .badge-icon-deficit { border-color: var(--c-fat); color: var(--c-fat); }
.badge-tile.earned .badge-icon-weight { border-color: var(--c-protein); color: var(--c-protein); }

.badge-icon-value { font-size: 20px; font-weight: 800; line-height: 1; }
.badge-icon-unit { font-size: 10px; font-weight: 600; margin-top: 2px; color: var(--text-secondary); }

.badge-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}

.badge-desc {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-secondary);
}

.badge-progress-track {
  width: 100%;
  height: 6px;
  margin-top: 4px;
  border-radius: 999px;
  background: rgba(99, 115, 140, .12);
  overflow: hidden;
}

.badge-progress-fill {
  height: 100%;
  border-radius: 999px;
}

.badge-progress-streak { background: linear-gradient(90deg, var(--c-kcal-2), var(--c-kcal)); }
.badge-progress-deficit { background: linear-gradient(90deg, var(--c-fat-2), var(--c-fat)); }
.badge-progress-weight { background: linear-gradient(90deg, var(--c-protein-2), var(--c-protein)); }

.badge-progress-label {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
}

.badge-share-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  padding: 6px 12px;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, .7);
  color: var(--c-kcal);
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .25s var(--spring), opacity .25s var(--ease);
}

.badge-share-pill svg { width: 12px; height: 12px; flex-shrink: 0; }
.badge-share-pill:active { transform: scale(.94); }
.badge-share-pill:disabled { opacity: .5; cursor: default; }

/* ---------- предиктивный прогноз ---------- */

.forecast-card { padding: 18px 16px; }

.forecast-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.forecast-head h3 {
  flex: 1;
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.forecast-rate {
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  background: rgba(255,255,255,0.07);
  white-space: nowrap;
}

.forecast-rate-loss { color: var(--c-fat); }
.forecast-rate-gain { color: var(--c-kcal); }

.forecast-goal-text {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.forecast-goal-text strong { color: var(--text-primary); font-weight: 700; }

.forecast-no-target {
  margin: 0;
  font-size: 13px;
  color: var(--text-secondary);
}

.forecast-slider-wrap { margin-top: 0; }

.forecast-slider-label {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--text-secondary);
}

.forecast-slider {
  width: 100%;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255,255,255,0.14);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
  display: block;
  margin-bottom: 10px;
}

.forecast-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--c-kcal);
  cursor: pointer;
  box-shadow: 0 0 8px rgba(96,165,250,0.45);
}

.forecast-slider-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.forecast-slider-val { color: var(--text-secondary); }

.forecast-slider-result {
  font-weight: 600;
  color: var(--c-fat);
  opacity: 0;
  transition: opacity 0.2s;
  text-align: right;
}

.forecast-slider-result.visible { opacity: 1; }

/* ---------- "я vs я месяц назад" ---------- */

.comparison-share-card { padding: 18px 16px; }

.comparison-share-desc {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* ---------- челлендж недели ---------- */

.challenge-card { padding: 18px 16px; }

.challenge-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}

.challenge-head h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.challenge-status {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}

.challenge-card.completed .challenge-status { color: var(--c-fat); }

.challenge-title {
  margin: 4px 0 2px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

.challenge-desc {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.challenge-progress-track {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: rgba(99, 115, 140, .12);
  overflow: hidden;
}

.challenge-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--c-carbs-2), var(--c-carbs));
  transition: width .6s var(--spring);
  will-change: width;
}

.challenge-card.completed .challenge-progress-fill {
  background: linear-gradient(90deg, var(--c-fat-2), var(--c-fat));
}

/* ---------- celebration sheet: новое достижение ---------- */

.celebration {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 8px 8px 4px;
}

.celebration-eyebrow {
  margin: 0 0 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.celebration-icon {
  width: 96px;
  height: 96px;
  margin-bottom: 18px;
}

.celebration-icon .badge-icon-value { font-size: 30px; }
.celebration-icon .badge-icon-unit { font-size: 13px; }

.celebration-title {
  margin: 0 0 8px;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.celebration-desc {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* ============================================================
   ПИТОМЕЦ
   ============================================================ */

.pet-stage-card {
  text-align: center;
  padding: 28px 20px 24px;
}

.pet-illustration-wrap {
  position: relative;
  width: 220px;
  height: 220px;
  margin: 0 auto;
  cursor: pointer;
}

.pet-illustration-wrap.pet-pat {
  animation: pet-pat-bounce .5s ease;
}

@keyframes pet-pat-bounce {
  0% { transform: scale(1); }
  30% { transform: scale(0.92, 1.08); }
  55% { transform: scale(1.06, 0.94); }
  80% { transform: scale(0.98, 1.02); }
  100% { transform: scale(1); }
}

.pet-thought-bubble {
  position: absolute;
  top: 4px;
  left: 50%;
  z-index: 2;
  max-width: 200px;
  width: max-content;
  padding: 10px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 8px 24px rgba(31, 41, 55, .14);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-primary);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -8px) scale(.92);
  transition: opacity .25s var(--ease), transform .25s var(--spring);
}

.pet-thought-bubble.show {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

.pet-thought-bubble::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  width: 12px;
  height: 12px;
  background: inherit;
  transform: translateX(-50%) rotate(45deg);
  border-radius: 0 0 3px 0;
}

.pet-art {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* ---------- растровый спрайт питомца (Ideogram) ---------- */

/* Задаём сцене СВОЮ высоту через aspect-ratio (родитель — div со
   scale-трансформом без своей высоты). Иначе .pet-art height:100% и
   .pet-sprite height:88% берут процент от неопределённой высоты: в Chrome
   их «спасает» intrinsic-соотношение картинки после загрузки, но в строгих
   движках (Telegram WebView) высота остаётся 0 — питомец «прозрачный». */
.pet-sprite-scene {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
}

.pet-sprite {
  position: relative;
  z-index: 1;
  display: block;
  width: 88%;
  height: 88%;
  aspect-ratio: 1 / 1;   /* картинка квадратная — держим размер без опоры на % высоты */
  margin: 6% auto 0;
  object-fit: contain;
  filter: drop-shadow(0 14px 22px rgba(255, 138, 76, .28));
  user-select: none;
  -webkit-user-drag: none;
}

.pet-anim-bob { animation: pet-bob 4s ease-in-out infinite; }
.pet-anim-shake { animation: pet-shake 3.2s ease-in-out infinite; }

.pet-sprite-sad {
  filter: saturate(.55) brightness(.97) drop-shadow(0 14px 22px rgba(31, 41, 55, .18));
}

.pet-sprite-aura {
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 213, 138, .55) 0%, rgba(255, 213, 138, 0) 70%);
  animation: pet-glow-pulse 3s ease-in-out infinite;
}

.pet-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

.pet-overlay-night { z-index: 0; }

.pet-scene-night .pet-sprite {
  animation: pet-sleep-breathe 4s ease-in-out infinite;
  filter: brightness(.68) saturate(.8) drop-shadow(0 10px 18px rgba(0, 0, 0, .35));
  transform-origin: center bottom;
}

.pet-mood-drop {
  stroke: #7FA6E8;
  stroke-width: 2.4;
  stroke-linecap: round;
  animation: pet-mood-rain 1.6s ease-in infinite;
}
.pet-mood-drop-2 { animation-delay: .5s; }
.pet-mood-drop-3 { animation-delay: 1s; }

@keyframes pet-mood-rain {
  0% { opacity: 0; transform: translateY(-4px); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translateY(8px); }
}

.pet-accessory-chips {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 3;
  display: flex;
  gap: 4px;
  font-size: 17px;
  filter: drop-shadow(0 2px 4px rgba(31, 41, 55, .25));
}

.pet-evo-thumb {
  width: 38px;
  height: 38px;
  object-fit: contain;
  flex-shrink: 0;
}

.pet-evo-locked .pet-evo-thumb { filter: grayscale(1) opacity(.4); }

.pet-shadow { fill: rgba(31, 41, 55, .08); }
.pet-ground { fill: rgba(31, 41, 55, .06); }
.pet-nest { fill: #E8D9C5; opacity: .6; }

.pet-egg-body {
  stroke: rgba(255, 255, 255, .85);
  stroke-width: 2;
  filter: drop-shadow(0 14px 22px rgba(96, 165, 250, .22));
}
.pet-egg-highlight { fill: rgba(255, 255, 255, .7); }
.pet-egg-speckle { fill: var(--c-kcal-2); }

.pet-crack-line {
  fill: none;
  stroke: #C99A6E;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pet-crack-glow {
  fill: none;
  stroke: var(--pet-fire-1);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: blur(3px);
  opacity: .8;
  animation: pet-glow-pulse 2.2s ease-in-out infinite;
}

.pet-shell {
  fill: #F3E6D6;
  stroke: rgba(255, 255, 255, .6);
  stroke-width: 1.5;
}

.pet-body { filter: drop-shadow(0 14px 22px rgba(255, 154, 82, .22)); }
.pet-wing { opacity: .92; }
.pet-feather { opacity: .95; }
.pet-tuft { fill: var(--pet-fire-2); }
.pet-beak { fill: #FFB23E; }
.pet-feet { fill: none; stroke: #E0A24A; stroke-width: 2.5; stroke-linecap: round; }

.pet-eye { fill: #FFFFFF; }
.pet-pupil {
  fill: #2A2D33;
  transform-box: fill-box;
  transform-origin: center;
  animation: pet-blink 5.5s ease-in-out infinite;
}
.pet-lid { fill: none; stroke: #2A2D33; stroke-width: 2.2; stroke-linecap: round; }
.pet-mouth { fill: none; stroke: #2A2D33; stroke-width: 2.2; stroke-linecap: round; }

.pet-aura { animation: pet-glow-pulse 3s ease-in-out infinite; }
.pet-aura-strong { animation: pet-glow-pulse 2.2s ease-in-out infinite; }

.pet-spark {
  fill: var(--pet-fire-4);
  filter: drop-shadow(0 0 4px var(--pet-fire-2));
  opacity: 0;
  animation: pet-spark-float 3.2s ease-in-out infinite;
  animation-delay: var(--spark-delay, 0s);
}

.pet-art-egg,
.pet-art-hatchling,
.pet-art-chick,
.pet-art-fledgling,
.pet-art-young-bird,
.pet-art-radiant,
.pet-art-phoenix,
.pet-art-legendary {
  animation: pet-bob 4s ease-in-out infinite;
}
.pet-art-spark { animation: pet-bob 5s ease-in-out infinite; }

.pet-art-crack { animation: pet-shake 3.2s ease-in-out infinite; }

@keyframes pet-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes pet-shake {
  0%, 90%, 100% { transform: rotate(0); }
  92% { transform: rotate(-2deg); }
  94% { transform: rotate(2deg); }
  96% { transform: rotate(-1.5deg); }
  98% { transform: rotate(1.5deg); }
}

@keyframes pet-glow-pulse {
  0%, 100% { opacity: .55; }
  50% { opacity: 1; }
}

@keyframes pet-spark-float {
  0%, 100% { opacity: 0; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-16px); }
}

@keyframes pet-blink {
  0%, 92%, 100% { transform: scaleY(1); }
  96% { transform: scaleY(.1); }
}

.pet-stage-title {
  margin: 14px 0 2px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.pet-stage-subtitle {
  margin: 0;
  color: var(--text-secondary);
  font-size: 14px;
}

.pet-mood-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 14px auto 0;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .5);
  font-size: 13px;
  color: var(--text-secondary);
  max-width: 100%;
  text-align: left;
}

.pet-progress-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-size: 13px;
  margin-bottom: 8px;
  color: var(--text-secondary);
}

.pet-progress-head span:first-child {
  color: var(--text-primary);
  font-weight: 600;
}

.pet-progress-track {
  height: 10px;
  border-radius: 999px;
  background: rgba(99, 115, 140, .10);
  overflow: hidden;
}

.pet-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--pet-fire-1), var(--pet-fire-2));
  transition: width 1s var(--spring);
  will-change: width;
}

.pet-stage-dots {
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
}

.pet-stage-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(99, 115, 140, .18);
  transition: background .3s var(--ease);
}

.pet-stage-dot.done { background: var(--pet-fire-2); }

.pet-stage-dot.current {
  background: var(--pet-fire-4);
  box-shadow: 0 0 0 4px rgba(255, 210, 60, .25);
}

/* pet rules list (used in NutriWorld "how to catch" section) */
.pet-rules-list {
  list-style: none;
  margin: 10px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.pet-rules-list li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 14px; color: var(--text-secondary); line-height: 1.4;
}
.pet-rule-icon { font-size: 18px; line-height: 1.4; }

/* XP badge used everywhere */
.pet-xp-badge {
  display: inline-flex; align-items: center; flex-shrink: 0;
  font-size: 11px; font-weight: 800;
  padding: 3px 8px; border-radius: 8px; white-space: nowrap;
  background: rgba(74,222,128,.15); color: #16A34A;
  letter-spacing: .02em;
}
.pet-xp-badge.pet-xp-neg { background: rgba(239,68,68,.12); color: #DC2626; }
.pet-xp-badge.pet-xp-streak { background: rgba(251,191,36,.15); color: #D97706; }

/* ── How the phoenix grows card redesign ── */
.pet-rules-card { padding: 16px; }
.pet-rules-header {
  display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px;
}
.pet-rules-title-icon { font-size: 28px; line-height: 1; flex-shrink: 0; margin-top: 2px; }
.pet-rules-title { margin: 0 0 3px; font-size: 15px; font-weight: 700; }
.pet-rules-subtitle { margin: 0; font-size: 12px; color: var(--text-tertiary); }
.pet-rules-group { display: flex; flex-direction: column; gap: 10px; }
.pet-rules-group-label {
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-tertiary); margin-bottom: 2px;
}
.pet-rule-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.pet-rule-item-left {
  display: flex; align-items: flex-start; gap: 10px; flex: 1; min-width: 0;
}
.pet-rule-item-icon { font-size: 18px; line-height: 1.5; flex-shrink: 0; }
.pet-rule-item-text { font-size: 13px; font-weight: 500; color: var(--text-primary); line-height: 1.4; }
.pet-rule-item-sub { display: block; font-size: 11px; color: var(--text-tertiary); font-weight: 400; }
.pet-rules-divider { height: 1px; background: rgba(99,115,140,.12); margin: 14px 0; }

.pet-celebration-art {
  width: 160px;
  height: 160px;
  margin: 0 auto;
}

/* ---------- ночной режим питомца ---------- */

.pet-night-backdrop {
  fill: url(#pet-night);
}

.pet-night-moon {
  fill: #FFF6D8;
  filter: drop-shadow(0 0 8px rgba(255, 246, 216, .65));
}

.pet-night-star {
  fill: #FFFFFF;
  opacity: .25;
  animation: pet-star-twinkle 2.6s ease-in-out infinite;
  animation-delay: var(--star-delay, 0s);
}

@keyframes pet-star-twinkle {
  0%, 100% { opacity: .25; }
  50% { opacity: 1; }
}

.pet-sleep-lid {
  fill: none;
  stroke: #2A2D33;
  stroke-width: 2.2;
  stroke-linecap: round;
}

.pet-zzz {
  font-size: 15px;
  font-weight: 800;
  fill: #C7D6FF;
  opacity: 0;
  animation: pet-zzz-float 2.6s ease-in-out infinite;
}

.pet-zzz-2 { font-size: 12px; animation-delay: .35s; }
.pet-zzz-3 { font-size: 9px; animation-delay: .7s; }

@keyframes pet-zzz-float {
  0% { opacity: 0; transform: translateY(6px); }
  35% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-12px); }
}

.pet-illustration-wrap.pet-night .pet-art,
.pet-illustration-wrap.pet-night .pet-art-crack {
  animation: pet-sleep-breathe 4s ease-in-out infinite;
}

@keyframes pet-sleep-breathe {
  0%, 100% { transform: rotate(-3deg) translateY(0); }
  50% { transform: rotate(-3deg) translateY(-3px); }
}

/* ---------- аксессуары питомца за ачивки ---------- */

.pet-accessory-bandana-cloth { fill: #FF6F6F; }
.pet-accessory-bandana-knot { fill: #E25555; }

.pet-accessory-sunglasses-lens,
.pet-accessory-sunglasses-bridge {
  fill: #2A2D33;
}

.pet-accessory-medal-ribbon {
  fill: none;
  stroke: #60A5FA;
  stroke-width: 4;
  stroke-linejoin: round;
}

.pet-accessory-medal-disc {
  fill: var(--pet-fire-4);
  stroke: var(--pet-fire-2);
  stroke-width: 1.5;
}

.pet-accessory-medal-star { fill: #FFFFFF; }

/* ---------- "питомец скучает" — баннер на главном экране ---------- */

.pet-lonely-banner {
  display: flex;
  align-items: center;
  gap: 14px;
}

.pet-lonely-emoji {
  font-size: 30px;
  line-height: 1;
  flex-shrink: 0;
  animation: pet-lonely-sway 2.6s ease-in-out infinite;
}

.pet-lonely-text strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 2px;
}

.pet-lonely-text p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
}

@keyframes pet-lonely-sway {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-8deg); }
}

/* ============================================================
   ОНБОРДИНГ — визард регистрации нового пользователя
   ============================================================ */

#onboarding-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--bg-base);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#onboarding-overlay[hidden] { display: none; }

.ob-container {
  max-width: 480px;
  width: 100%;
  margin: 0 auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ---------- шапка: прогресс-бар + кнопка «Назад» ---------- */

.ob-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: env(safe-area-inset-top, 14px) 16px 4px;
}

.ob-back-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
  cursor: pointer;
  color: var(--text-secondary);
  transition: transform .2s var(--spring), opacity .2s var(--ease);
}

.ob-back-icon-btn:active { transform: scale(.9); }
.ob-back-icon-btn svg { width: 18px; height: 18px; display: block; }

.ob-progress-track {
  flex: 1;
  height: 5px;
  border-radius: 999px;
  background: rgba(99, 115, 140, .12);
  overflow: hidden;
}

.ob-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--c-kcal), var(--c-protein));
  transition: width .45s var(--spring);
  will-change: width;
}

.ob-step-counter {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-tertiary);
  min-width: 32px;
  text-align: right;
}

/* ---------- область шагов ---------- */

.ob-steps-viewport {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.ob-steps-track {
  display: flex;
  height: 100%;
  transition: transform .4s cubic-bezier(.34, 1.2, .64, 1);
}

.ob-step {
  flex: 0 0 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---------- шаг 1: Добро пожаловать + пол ---------- */

.ob-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 32px 24px 24px;
}

.ob-welcome-emoji {
  font-size: 64px;
  line-height: 1;
  margin-bottom: 22px;
  animation: ob-pop .55s var(--spring) both;
}

@keyframes ob-pop {
  from { transform: scale(.3) rotate(-10deg); opacity: 0; }
  to   { transform: scale(1) rotate(0);       opacity: 1; }
}

.ob-title {
  margin: 0 0 10px;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--text-primary);
  animation: cardIn .5s var(--spring) .1s both;
}

.ob-subtitle {
  margin: 0 0 36px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-secondary);
  animation: cardIn .5s var(--spring) .16s both;
}

.ob-field-label {
  width: 100%;
  text-align: left;
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.ob-gender-group {
  display: flex;
  gap: 12px;
  width: 100%;
  animation: cardIn .5s var(--spring) .22s both;
}

.ob-gender-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 22px 12px;
  border: 2px solid rgba(99, 115, 140, .14);
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: var(--glass-shadow), var(--glass-highlight);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease),
              color .2s var(--ease), transform .2s var(--spring);
}

.ob-gender-btn:active { transform: scale(.97); }

.ob-gender-icon {
  font-size: 34px;
  line-height: 1;
}

.ob-gender-btn.selected {
  border-color: var(--c-kcal);
  background: rgba(96, 165, 250, .12);
  color: var(--text-primary);
}

/* Компактный выбор пола на объединённом шаге «пол + тело» */
.ob-gender-compact { margin-bottom: 22px; }
.ob-gender-compact .ob-gender-btn {
  flex-direction: row;
  justify-content: center;
  gap: 8px;
  padding: 13px 12px;
  border-radius: var(--radius-sm);
  font-size: 14px;
}
.ob-gender-compact .ob-gender-icon { font-size: 20px; }

/* ---------- шаги 2-4: тело формы ---------- */

.ob-step-body {
  padding: 22px 20px 20px;
}

.ob-step-title {
  margin: 0 0 6px;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.015em;
}

.ob-step-sub {
  margin: 0 0 28px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-secondary);
}

/* ---------- слайдер ---------- */

.ob-slider-group { margin-bottom: 26px; }

.ob-slider-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
}

.ob-slider-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.ob-slider-value {
  font-size: 17px;
  font-weight: 800;
  background: linear-gradient(135deg, var(--c-kcal), var(--c-protein));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ob-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  outline: none;
  cursor: pointer;
  background: linear-gradient(
    to right,
    var(--c-kcal) var(--ob-pct, 50%),
    rgba(99, 115, 140, .14) var(--ob-pct, 50%)
  );
  transition: background .1s linear;
}

.ob-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  border: 2.5px solid var(--c-kcal);
  box-shadow: 0 2px 10px rgba(96, 165, 250, .3);
  cursor: pointer;
  transition: transform .15s var(--spring);
}

.ob-slider::-webkit-slider-thumb:active { transform: scale(1.25); }

.ob-slider::-moz-range-thumb {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  border: 2.5px solid var(--c-kcal);
  box-shadow: 0 2px 10px rgba(96, 165, 250, .3);
  cursor: pointer;
}

/* ---------- карточки уровня активности ---------- */

.ob-section-label {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.ob-activity-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 28px;
}

.ob-activity-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 2px solid rgba(99, 115, 140, .12);
  border-radius: var(--radius-md);
  background: var(--glass-bg);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .2s var(--ease), background .2s var(--ease),
              transform .15s var(--spring);
  width: 100%;
}

.ob-activity-card:active { transform: scale(.98); }

.ob-activity-card.selected {
  border-color: var(--c-kcal);
  background: rgba(96, 165, 250, .10);
}

.ob-activity-icon { font-size: 22px; line-height: 1; flex-shrink: 0; width: 28px; text-align: center; }

.ob-activity-text strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.ob-activity-text span {
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.4;
}

/* ---------- чипы типа тренировок ---------- */

.ob-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.ob-chip {
  padding: 10px 16px;
  border: 2px solid rgba(99, 115, 140, .12);
  border-radius: 999px;
  background: rgba(255, 255, 255, .5);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease),
              color .2s var(--ease), transform .15s var(--spring);
  -webkit-appearance: none;
  appearance: none;
}

.ob-chip:active { transform: scale(.96); }

.ob-chip.selected {
  border-color: var(--c-kcal);
  background: rgba(96, 165, 250, .12);
  color: var(--text-primary);
}

/* ---------- карточки режима цели ---------- */

.ob-mode-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ob-mode-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 16px;
  border: 2px solid rgba(99, 115, 140, .12);
  border-radius: var(--radius-md);
  background: var(--glass-bg);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .2s var(--ease), background .2s var(--ease),
              transform .15s var(--spring);
  width: 100%;
}

.ob-mode-card:active { transform: scale(.98); }

.ob-mode-card.selected {
  border-color: var(--c-kcal);
  background: rgba(96, 165, 250, .10);
}

.ob-mode-icon { font-size: 24px; line-height: 1; flex-shrink: 0; width: 32px; text-align: center; }

.ob-mode-text { flex: 1; min-width: 0; }

.ob-mode-text strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.ob-mode-text span {
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.ob-mode-radio {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid rgba(99, 115, 140, .22);
  background: transparent;
  transition: border-color .2s var(--ease), background .2s var(--ease);
  position: relative;
}

.ob-mode-card.selected .ob-mode-radio {
  border-color: var(--c-kcal);
  background: var(--c-kcal);
}

.ob-mode-card.selected .ob-mode-radio::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: #fff;
}

/* ---------- шаг 5: результаты ---------- */

.ob-results-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 24px 16px;
}

.ob-results-emoji {
  font-size: 56px;
  line-height: 1;
  margin-bottom: 16px;
  animation: ob-pop .55s var(--spring) both;
}

.ob-results-title {
  margin: 0 0 4px;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.015em;
  text-align: center;
}

.ob-results-sub {
  margin: 0 0 28px;
  font-size: 14px;
  color: var(--text-secondary);
  text-align: center;
}

.ob-kcal-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 28px;
}

.ob-kcal-num {
  font-size: 64px;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  background: linear-gradient(135deg, var(--c-kcal), var(--c-protein));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: cardIn .6s var(--spring) .15s both;
}

.ob-kcal-unit {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-top: 4px;
}

.ob-macro-bars {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 28px;
  animation: cardIn .6s var(--spring) .25s both;
}

.ob-macro-row { display: flex; flex-direction: column; gap: 6px; }

.ob-macro-head {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--text-secondary);
}

.ob-macro-name { font-weight: 600; color: var(--text-primary); }

.ob-macro-track {
  height: 8px;
  border-radius: 999px;
  background: rgba(99, 115, 140, .10);
  overflow: hidden;
}

.ob-macro-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  transition: width 1s var(--spring);
}

.ob-fill-protein { background: linear-gradient(90deg, var(--c-protein-2), var(--c-protein)); }
.ob-fill-fat     { background: linear-gradient(90deg, var(--c-fat-2), var(--c-fat)); }
.ob-fill-carbs   { background: linear-gradient(90deg, var(--c-carbs-2), var(--c-carbs)); }

.ob-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 60px 20px;
  color: var(--text-secondary);
  font-size: 14px;
}

.ob-loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(99, 115, 140, .15);
  border-top-color: var(--c-kcal);
  border-radius: 50%;
  animation: ob-spin 1s linear infinite;
}

@keyframes ob-spin {
  to { transform: rotate(360deg); }
}

.ob-mode-badge {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--c-kcal-2), var(--c-protein-2));
  font-size: 12.5px;
  font-weight: 700;
  color: #1C3A6B;
  margin-bottom: 22px;
}

/* ---------- подвал с кнопками ---------- */

.ob-footer {
  flex-shrink: 0;
  padding: 10px 16px calc(env(safe-area-inset-bottom, 10px) + 10px);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ob-next-btn {
  display: block;
  width: 100%;
  padding: 17px;
  border: none;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--c-kcal-2), var(--c-protein-2));
  color: #1C1E21;
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  box-shadow: 0 10px 28px rgba(96, 165, 250, .25), inset 0 1px 0 rgba(255, 255, 255, .75);
  transition: transform .25s var(--spring), box-shadow .25s var(--spring), opacity .25s var(--ease);
  cursor: pointer;
}

.ob-next-btn:active { transform: scale(.97); box-shadow: 0 4px 12px rgba(96, 165, 250, .2); }
.ob-next-btn:disabled { opacity: .45; cursor: default; transform: none; }

.ob-skip-btn {
  background: none;
  border: none;
  padding: 12px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-tertiary);
  cursor: pointer;
  text-align: center;
  transition: opacity .2s var(--ease);
}

/* ---------- шаг 5: первая запись еды ---------- */

.ob-food-box {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}

.ob-food-input {
  width: 100%;
  min-height: 92px;
  padding: 14px 16px;
  border: 1.5px solid var(--glass-border);
  border-radius: var(--radius-md);
  background: var(--glass-bg-strong);
  box-shadow: var(--glass-highlight);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-primary);
  resize: none;
  outline: none;
}

.ob-food-input:focus { border-color: var(--c-kcal); }

.ob-food-feedback {
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: var(--glass-bg);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.ob-food-result {
  width: 100%;
  padding: 16px;
  border-radius: var(--radius-md);
  background: var(--glass-bg-strong);
  box-shadow: var(--glass-highlight);
  text-align: left;
}

.ob-food-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 7px 0;
  font-size: 14.5px;
}

.ob-food-item b { white-space: nowrap; }

.ob-food-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--glass-border);
  font-size: 15px;
  font-weight: 700;
}

.ob-food-left {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.ob-skip-btn:active { opacity: .6; }

/* ============================================================
   ДЕРЕВО ЭВОЛЮЦИИ ПИТОМЦА
   ============================================================ */

.pet-evo-card { padding: 16px; }

.pet-evo-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.pet-evo-header h3 { font-size: 15px; font-weight: 700; margin: 0; }

.pet-evo-days {
  font-size: 11px;
  font-weight: 600;
  color: var(--c-kcal);
  background: rgba(255, 107, 53, .10);
  border-radius: 20px;
  padding: 3px 8px;
}

.pet-evo-list { display: flex; flex-direction: column; gap: 0; }

.pet-evo-connector {
  width: 2px;
  height: 10px;
  background: var(--glass-border);
  margin-left: 19px;
}

.pet-evo-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 10px;
  transition: background .2s;
}
.pet-evo-done { opacity: .55; }
.pet-evo-current {
  background: rgba(255, 255, 255, .45);
  box-shadow: 0 2px 8px rgba(99, 102, 241, .10);
}
.pet-evo-locked { opacity: .35; }

.pet-evo-emoji { font-size: 22px; width: 32px; text-align: center; flex-shrink: 0; }

.pet-evo-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.pet-evo-name { font-size: 13px; font-weight: 600; }
.pet-evo-xp { font-size: 11px; color: var(--text-tertiary); }

.pet-evo-check {
  font-size: 14px;
  font-weight: 700;
  color: #22c55e;
  flex-shrink: 0;
}
.pet-evo-here { color: var(--c-kcal); }

/* ============================================================
   БОЛЬНОЙ ПИТОМЕЦ
   ============================================================ */

.pet-sick .pet-art { filter: saturate(.4) brightness(.95); }

.pet-sick-overlay {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 28px;
  line-height: 1;
  animation: pet-sick-pulse 2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes pet-sick-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .7; transform: scale(.88); }
}

.pet-illustration-wrap { position: relative; }

/* ============================================================
   ТОС КОММЕНТАРИЙ ПИТОМЦА К ЕДЕ
   ============================================================ */

.pet-food-toast {
  position: fixed;
  left: 50%;
  bottom: calc(72px + env(safe-area-inset-bottom));
  transform: translateX(-50%) translateY(20px);
  background: rgba(30, 30, 40, .88);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 24px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  z-index: 500;
  backdrop-filter: blur(12px);
  transition: opacity .25s ease, transform .25s ease;
}
.pet-food-toast-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ============================================================
   ПРЕМИУМ — угловая кнопка на главной
   ============================================================ */

.home-header-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

.premium-corner-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  cursor: pointer;
  transition: transform .18s var(--spring), background .2s;
  flex-shrink: 0;
  white-space: nowrap;
}

.premium-corner-btn:active { transform: scale(.93); }

.premium-corner-avatar { font-size: 15px; line-height: 1; }

.premium-corner-label {
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

.premium-corner-pro {
  border-color: rgba(251,191,36,.4);
  background: rgba(251,191,36,.1);
}

.premium-corner-pro .premium-corner-label { color: #92400E; }

/* ============================================================
   ПИТОМЕЦ — суб-вкладки
   ============================================================ */

.pet-subtabs {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  margin: 0 16px 16px;
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  padding: 4px;
}

.pet-subtab {
  border: none;
  background: transparent;
  border-radius: 10px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 8px 4px;
  cursor: pointer;
  transition: background .2s, color .2s, transform .15s var(--spring);
  white-space: nowrap;
}

.pet-subtab.active {
  background: rgba(255, 255, 255, .8);
  color: var(--text-primary);
  box-shadow: 0 2px 8px rgba(0,0,0,.10);
}
.pet-subtab:active:not(.active) { transform: scale(.95); }

/* ============================================================
   ПИТОМЕЦ — кнопка кормёжки
   ============================================================ */

.pet-feed-btn {
  width: 100%;
  margin-top: 14px;
  padding: 13px 16px;
  background: linear-gradient(135deg, #F59E0B, #D97706);
  color: #fff;
  border: none;
  border-radius: 14px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .2s var(--spring), box-shadow .2s;
  box-shadow: 0 6px 18px rgba(245, 158, 11, .35);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  position: relative;
}
.pet-feed-btn:active { transform: scale(.97); box-shadow: 0 2px 8px rgba(245,158,11,.2); }
.pet-feed-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.pet-feed-locked {
  background: linear-gradient(135deg, #9CA3AF, #6B7280);
  box-shadow: 0 6px 18px rgba(107,114,128,.2);
}

.pet-feed-hint {
  position: absolute;
  bottom: -20px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-tertiary);
}

.pet-feed-done {
  width: 100%;
  margin-top: 14px;
  padding: 12px 16px;
  background: rgba(34, 197, 94, .12);
  color: #16a34a;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  border: 1px solid rgba(34, 197, 94, .25);
}

/* ============================================================
   НУТРИМИР — SPRITE
   ============================================================ */

.nm-sprite-wrap {
  display: inline-block;
  position: relative;
  image-rendering: pixelated;
}

.nm-shimmer::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 12px;
  background: radial-gradient(ellipse at 50% 40%, rgba(251,191,36,.35) 0%, transparent 70%);
  pointer-events: none;
  animation: nm-shimmer-pulse 2s ease-in-out infinite;
}

@keyframes nm-shimmer-pulse {
  0%, 100% { opacity: .6; }
  50% { opacity: 1; transform: scale(1.04); }
}

.nm-shiny .nm-shiny-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  font-size: 14px;
  line-height: 1;
}

/* ============================================================
   НУТРИМИР — шаги + инкубатор
   ============================================================ */

.nm-steps-card { padding: 16px; }

.nm-steps-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
}

.nm-steps-val {
  font-size: 22px;
  font-weight: 800;
  color: var(--c-kcal);
}

.nm-steps-hint {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-bottom: 12px;
}

.nm-steps-input-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.nm-steps-input {
  flex: 1;
  padding: 10px 14px;
  background: rgba(255,255,255,.55);
  border: 1.5px solid var(--glass-border);
  border-radius: 12px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  outline: none;
  transition: border-color .2s;
}
.nm-steps-input:focus { border-color: var(--c-kcal); }

.nm-steps-save-btn {
  padding: 10px 16px;
  background: var(--c-kcal);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .2s var(--spring);
  white-space: nowrap;
}
.nm-steps-save-btn:active { transform: scale(.95); }

.nm-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.nm-section-head h3 { margin: 0; font-size: 15px; font-weight: 700; }
.nm-section-sub {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}

.nm-eggs-card { padding: 16px; }

.nm-egg-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--glass-border);
}
.nm-egg-card:last-child { border-bottom: none; }

.nm-egg-icon {
  font-size: 28px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--egg-color, #CD7F32) 15%, transparent);
  flex-shrink: 0;
}

.nm-egg-info { flex: 1; min-width: 0; }
.nm-egg-name { font-size: 13px; font-weight: 700; margin-bottom: 3px; }
.nm-egg-steps { font-size: 11px; color: var(--text-tertiary); margin-bottom: 6px; }

.nm-egg-track {
  height: 5px;
  background: var(--glass-border);
  border-radius: 6px;
  overflow: hidden;
}
.nm-egg-fill {
  height: 100%;
  background: linear-gradient(90deg, #F59E0B, #FBBF24);
  border-radius: 6px;
  transition: width .6s var(--spring);
  width: 0;
}

.nm-egg-ready {
  background: rgba(34, 197, 94, .08);
  border-radius: 12px;
  border: 1px solid rgba(34, 197, 94, .25);
  animation: nm-egg-pulse 2s ease-in-out infinite;
}

@keyframes nm-egg-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,.0); }
  50% { box-shadow: 0 0 0 6px rgba(34,197,94,.12); }
}

.nm-egg-ready .nm-egg-fill { background: linear-gradient(90deg, #22C55E, #4ADE80); }

.nm-egg-ready-text {
  color: #16A34A;
  font-weight: 700;
}

/* Яйцо трескается (50–99% прогресса) */
.nm-egg-cracking {
  background: rgba(251, 191, 36, .08);
  border-radius: 12px;
  border: 1px solid rgba(251, 191, 36, .3);
}
.nm-egg-cracking .nm-egg-fill { background: linear-gradient(90deg, #F59E0B, #FBBF24); }
.nm-egg-cracking-text {
  color: #D97706;
  font-weight: 700;
}
@keyframes nm-egg-crack-shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-2px) rotate(-1deg); }
  40%       { transform: translateX(2px) rotate(1deg); }
  60%       { transform: translateX(-1px); }
  80%       { transform: translateX(1px); }
}
.nm-egg-cracking .nm-egg-icon {
  animation: nm-egg-crack-shake 4s ease-in-out infinite;
}

.nm-recent-card { padding: 16px; }

.nm-recent-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.nm-recent-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.nm-recent-name {
  font-size: 10px;
  font-weight: 700;
  max-width: 52px;
  text-align: center;
  line-height: 1.2;
}

.nm-how-card { padding: 16px; }
.nm-how-card h3 { margin: 0 0 12px; font-size: 15px; font-weight: 700; }

.nm-empty {
  text-align: center;
  color: var(--text-tertiary);
  font-size: 13px;
  padding: 16px 0;
}

/* ============================================================
   НУТРИМИР — НУТРИДЕКС
   ============================================================ */

/* ── НутриДекс: прогресс-карточка ── */
.nm-dex-progress-card {
  padding: 16px;
}

.nm-dex-stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.nm-dex-stat {
  display: flex;
  align-items: baseline;
  gap: 2px;
}

.nm-dex-caught {
  font-size: 32px;
  font-weight: 800;
  color: var(--c-kcal);
  line-height: 1;
}

.nm-dex-total {
  font-size: 15px;
  color: var(--text-secondary);
  font-weight: 500;
}

.nm-dex-label {
  font-size: 13px;
  color: var(--text-tertiary);
  font-weight: 400;
}

.nm-dex-candy-total {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-secondary);
  background: rgba(0,0,0,.06);
  border-radius: 12px;
  padding: 5px 10px;
}

.nm-dex-pct-bar {
  height: 7px;
  background: var(--glass-border);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 6px;
}
.nm-dex-pct-fill {
  height: 100%;
  background: linear-gradient(90deg, #6366F1, #A78BFA);
  border-radius: 8px;
  width: 0;
  transition: width .7s var(--spring);
}

.nm-dex-pct-label {
  font-size: 11px;
  color: var(--text-tertiary);
  text-align: right;
}

/* ── Семейство ── */
.nm-family-section {
  padding: 14px 16px 16px;
}

.nm-family-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--fam-color, var(--text-primary));
}

.nm-family-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--fam-color, #666);
  flex-shrink: 0;
}

.nm-family-label { flex: 1; }

.nm-family-candy {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  background: rgba(0,0,0,.06);
  border-radius: 10px;
  padding: 3px 8px;
}

.nm-family-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-tertiary);
  min-width: 28px;
  text-align: right;
}

.nm-family-complete { color: #16A34A; }

.nm-family-bar {
  height: 4px;
  background: rgba(0,0,0,.08);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 12px;
}

.nm-family-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width .5s var(--spring);
  will-change: width;
  opacity: .75;
}

/* ── Карточки существ ── */
.nm-dex-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  overflow: visible;
}

.nm-dex-card {
  background: var(--glass-bg);
  backdrop-filter: blur(8px);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  padding: 12px 8px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: transform .18s var(--spring), box-shadow .18s;
  position: relative;
  overflow: hidden;
}
.nm-dex-card:active { transform: scale(.95); box-shadow: 0 2px 8px rgba(0,0,0,.1); }

.nm-dex-art { line-height: 0; }

.nm-dex-unknown { opacity: .38; filter: grayscale(.4); }

.nm-dex-shiny { border-color: rgba(250, 204, 21, .5); background: rgba(250,204,21,.06); }

.nm-dex-evolvable {
  border-color: rgba(251, 191, 36, .8);
  box-shadow: 0 0 0 2px rgba(251, 191, 36, .25);
}

.nm-dex-evolve-pip {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #FBBF24;
  box-shadow: 0 0 0 2px rgba(251,191,36,.3);
}

.nm-dex-shiny-badge {
  position: absolute;
  top: 5px;
  left: 7px;
  font-size: 12px;
  line-height: 1;
}

.nm-dex-shadow {
  border-radius: 10px;
  background: rgba(0,0,0,.18);
  filter: blur(2px);
}

.nm-dex-name {
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  line-height: 1.2;
  color: var(--text-primary);
}

.nm-dex-rarity {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
  opacity: .75;
}

.nm-dex-candy-cost {
  font-size: 10px;
  color: var(--text-tertiary);
  background: rgba(0,0,0,.06);
  border-radius: 8px;
  padding: 2px 6px;
}

.nm-dex-candy-cost.enough {
  color: #D97706;
  background: rgba(251,191,36,.15);
  font-weight: 700;
}

.nm-sheet-creature {
  text-align: center;
  padding: 8px 0 16px;
}
.nm-sheet-creature h3 { margin: 10px 0 4px; font-size: 20px; }
.nm-sheet-family { font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.nm-sheet-candy { font-size: 14px; color: var(--text-secondary); }

/* ============================================================
   НУТРИМИР — ENCOUNTER OVERLAY
   ============================================================ */

.nm-encounter-overlay {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(0,0,0,0);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .35s ease;
  pointer-events: none;
}

.nm-encounter-visible {
  background: rgba(0,0,0,.55);
  pointer-events: auto;
}

.nm-encounter-box {
  width: min(320px, 88vw);
  border-radius: 28px;
  padding: 24px 20px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  transform: scale(.7) translateY(40px);
  opacity: 0;
  transition: transform .35s var(--spring), opacity .3s ease;
}

.nm-encounter-visible .nm-encounter-box {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.nm-encounter-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  opacity: .8;
  margin-bottom: 12px;
}

.nm-encounter-art {
  margin-bottom: 14px;
}

@keyframes nm-encounter-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.nm-encounter-bounce {
  animation: nm-encounter-bounce 1.4s ease-in-out infinite;
}

.nm-encounter-name {
  font-size: 22px;
  font-weight: 800;
  text-align: center;
  margin-bottom: 4px;
}

.nm-catch-btn {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #6366F1, #818CF8);
  color: #fff;
  border: none;
  border-radius: 16px;
  font-family: inherit;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: .5px;
  cursor: pointer;
  transition: transform .2s var(--spring), box-shadow .2s;
  box-shadow: 0 8px 24px rgba(99,102,241,.4);
  margin-bottom: 10px;
}
.nm-catch-btn:active { transform: scale(.96); box-shadow: 0 3px 10px rgba(99,102,241,.25); }

.nm-flee-btn {
  background: none;
  border: none;
  font-family: inherit;
  font-size: 13px;
  color: var(--text-tertiary);
  cursor: pointer;
  padding: 6px;
  transition: opacity .2s;
}
.nm-flee-btn:active { opacity: .5; }

.nm-encounter-shiny-banner {
  background: linear-gradient(135deg, #FBBF24, #F59E0B);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 2px;
  padding: 5px 16px;
  border-radius: 8px;
  text-align: center;
  margin-bottom: 12px;
  text-shadow: 0 1px 4px rgba(120,53,15,.4);
  animation: nm-shimmer-pulse 1.5s ease-in-out infinite;
}

.nm-encounter-quality {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-tertiary);
  margin-bottom: 20px;
}
.nm-quality-great { color: #D97706; }
.nm-quality-good  { color: #16A34A; }

/* ============================================================
   PAYWALL POPUP — окно оформления подписки при исчерпании дня
   ============================================================ */

.pw-overlay {
  position: fixed;
  inset: 0;
  z-index: 950;
  background: rgba(20, 24, 40, 0);
  backdrop-filter: blur(0px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  transition: background .35s ease, backdrop-filter .35s ease;
  pointer-events: none;
}

.pw-overlay.pw-visible {
  background: rgba(20, 24, 40, .5);
  backdrop-filter: blur(6px);
  pointer-events: auto;
}

.pw-box {
  position: relative;
  width: min(360px, 92vw);
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 30px;
  padding: 30px 24px 22px;
  text-align: center;
  background: var(--glass-bg-strong);
  transform: scale(.82) translateY(30px);
  opacity: 0;
  transition: transform .4s var(--spring), opacity .3s ease;
}

.pw-visible .pw-box {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.pw-glow {
  position: absolute;
  top: -60px;
  left: 50%;
  width: 220px;
  height: 220px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(167,139,250,.45), rgba(96,165,250,.15) 55%, transparent 72%);
  pointer-events: none;
  z-index: 0;
}

.pw-box > * { position: relative; z-index: 1; }

.pw-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(120, 130, 150, .12);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background .2s, transform .2s;
  z-index: 2;
}
.pw-close:active { transform: scale(.9); background: rgba(120, 130, 150, .22); }

.pw-box .pro-badge {
  background: linear-gradient(135deg, #A78BFA, #60A5FA);
  color: #fff;
  box-shadow: 0 6px 18px rgba(129,140,248,.4);
}

.pw-title {
  margin: 6px 0 8px;
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.pw-sub {
  margin: 0 auto 20px;
  max-width: 300px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.pw-features {
  text-align: left;
  gap: 13px;
  margin: 0 0 20px;
  padding: 18px 18px;
  border-radius: 20px;
  background: rgba(255,255,255,.42);
}

.pw-features li { font-size: 14px; }

.pw-price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  margin-bottom: 16px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(167,139,250,.14), rgba(96,165,250,.14));
  border: 1px solid rgba(167,139,250,.25);
}

.pw-price-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
}

.pw-price-value {
  font-size: 19px;
  font-weight: 800;
  color: var(--text-primary);
}

.pw-cta {
  width: 100%;
  padding: 16px;
  border: none;
  border-radius: 18px;
  background: linear-gradient(135deg, #7C6BF0, #60A5FA);
  color: #fff;
  font-family: inherit;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: .3px;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(99,102,241,.4);
  transition: transform .2s var(--spring), box-shadow .2s;
}
.pw-cta:active { transform: scale(.97); box-shadow: 0 4px 12px rgba(99,102,241,.3); }
.pw-cta:disabled { opacity: .7; }

.pw-later {
  width: 100%;
  margin-top: 10px;
  padding: 8px;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: opacity .2s;
}
.pw-later:active { opacity: .5; }

/* Личная статистика в пейволе («пейвол по ценности») */
.pw-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
  margin: 4px 0 14px;
}
.pw-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 6px;
  border-radius: 14px;
  background: rgba(96, 165, 250, .1);
}
.pw-stat b {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -.01em;
}
.pw-stat span {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
}

/* Попап-крючок после онбординга: «а сколько ты реально ешь?» */
.nh-emoji {
  font-size: 46px;
  line-height: 1;
  margin-bottom: 10px;
  animation: ob-pop .55s var(--spring) both;
}
.nh-hint {
  width: 100%;
  margin: 6px 0 18px;
  padding: 13px 14px;
  border-radius: 14px;
  background: rgba(96, 165, 250, .12);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--text-primary);
}

/* ============================================================
   НУТРИМИР — ХЭТЧ CELEBRATION
   ============================================================ */

.nm-hatch-egg {
  font-size: 64px;
  text-align: center;
  margin: 8px 0;
  filter: drop-shadow(0 0 12px var(--egg-color, #FFD700));
  animation: nm-hatch-spin 0.6s ease-out;
}

@keyframes nm-hatch-spin {
  0% { transform: rotate(-15deg) scale(.6); opacity: 0; }
  60% { transform: rotate(8deg) scale(1.1); }
  100% { transform: rotate(0) scale(1); opacity: 1; }
}

/* ============================================================
   DUO — ПАРНЫЙ РЕЖИМ
   ============================================================ */

/* Переменные Duo */
:root {
  --duo-a: #8B5CF6;
  --duo-b: #EC4899;
  --duo-grad: linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%);
  --duo-glass: rgba(139,92,246,.08);
}

/* ── Tab icon accent ── */
.tab-duo.active { color: var(--duo-a); }
.tab-duo.active svg { stroke: var(--duo-a); }

/* ── Header ── */
.duo-header {
  background: linear-gradient(135deg, rgba(139,92,246,.12) 0%, rgba(236,72,153,.08) 100%);
}
.duo-header-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px 4px;
}
.duo-emoji { font-size: 28px; line-height: 1; flex-shrink: 0; }
.duo-title { font-size: 18px; font-weight: 800; margin: 0; line-height: 1.2; }
.duo-subtitle { font-size: 13px; color: var(--text-secondary); margin: 2px 0 0; }
.duo-streak-tag {
  font-size: 12px; font-weight: 600; color: var(--duo-a);
  margin: 2px 0 0; line-height: 1;
}
.duo-settings-btn {
  margin-left: auto; background: none; border: none;
  font-size: 20px; cursor: pointer; padding: 4px; flex-shrink: 0;
}

/* ── Sub-tabs ── */
.duo-subtabs {
  display: flex;
  gap: 0;
  padding: 0 16px;
  margin-bottom: 12px;
  overflow-x: auto;
  scrollbar-width: none;
}
.duo-subtabs::-webkit-scrollbar { display: none; }
.duo-subtab {
  border: none; background: none;
  font-size: 13px; font-weight: 600;
  color: var(--text-tertiary);
  padding: 8px 12px;
  white-space: nowrap;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.duo-subtab.active {
  color: var(--duo-a);
  border-bottom-color: var(--duo-a);
}

.duo-content { padding: 4px 0 120px; }

/* ── Card title ── */
.duo-card-title {
  font-size: 14px; font-weight: 700; margin: 0 0 12px;
  color: var(--text-primary);
}

/* ── Onboarding ── */
.duo-logo { font-size: 48px; text-align: center; margin-bottom: 4px; }
.duo-onboard-cards { padding: 8px 0 0; }
.duo-feature-card {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px;
  font-size: 13px; line-height: 1.4;
}
.duo-feat-icon { font-size: 22px; flex-shrink: 0; }
.duo-onboard-actions { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.duo-join-row { display: flex; gap: 8px; }
.duo-join-input {
  flex: 1; padding: 11px 14px; border-radius: 12px;
  border: 1.5px solid var(--glass-border);
  background: var(--glass-bg); font-size: 14px; color: var(--text-primary);
  font-family: inherit;
}
.duo-join-btn {
  padding: 11px 16px; border-radius: 12px; border: none;
  background: var(--duo-grad); color: #fff;
  font-weight: 700; font-size: 14px; cursor: pointer;
  white-space: nowrap;
}

/* ── Today: two columns ── */
.duo-today-card { padding: 14px; }
.duo-two-cols {
  display: grid; grid-template-columns: 1fr 2px 1fr; gap: 12px;
  align-items: start;
}
.duo-divider { background: var(--glass-border); border-radius: 2px; align-self: stretch; }
.duo-day-col { display: flex; flex-direction: column; gap: 5px; }
.duo-day-me { }
.duo-day-partner { }
.duo-day-head {
  display: flex; justify-content: space-between; align-items: center;
}
.duo-day-label { font-size: 12px; font-weight: 700; color: var(--text-secondary); }
.duo-day-status-icon { font-size: 16px; }
.duo-day-kcal {
  font-size: 24px; font-weight: 800; color: var(--text-primary); line-height: 1;
}
.duo-day-tgt { font-size: 12px; font-weight: 400; color: var(--text-tertiary); }
.duo-day-bar {
  height: 6px; background: var(--glass-border); border-radius: 4px; overflow: hidden;
}
.duo-day-fill {
  height: 100%; border-radius: 4px; width: 0; transition: width .6s var(--spring);
}
.duo-macro-row {
  display: flex; gap: 6px; font-size: 11px; color: var(--text-tertiary);
}
.duo-day-items { font-size: 11px; color: var(--text-tertiary); }

/* ── Prognosis ── */
.duo-prognosis-card { padding: 12px 14px; }
.duo-prognosis-text { font-size: 13px; color: var(--text-secondary); }

/* ── Reactions ── */
.duo-react-card { padding: 14px; }
.duo-reactions-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 10px;
}
.duo-react-btn {
  font-size: 22px; padding: 10px; border-radius: 14px; border: none;
  background: var(--glass-bg); cursor: pointer;
  transition: transform .15s var(--spring), background .15s;
}
.duo-react-btn:active, .duo-react-btn.duo-react-sent {
  background: rgba(139,92,246,.15); transform: scale(1.15);
}
.duo-react-recent {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px;
}
.duo-react-pill {
  background: rgba(139,92,246,.1); color: var(--duo-a);
  border-radius: 20px; padding: 3px 10px; font-size: 12px; font-weight: 600;
}

/* ── Streak card ── */
.duo-streak-card { padding: 14px; }
.duo-streak-nums { display: flex; align-items: center; gap: 16px; }
.duo-streak-big { display: flex; flex-direction: column; align-items: center; flex: 1; }
.duo-streak-val {
  font-size: 48px; font-weight: 900;
  background: var(--duo-grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  line-height: 1;
}
.duo-streak-lbl { font-size: 11px; color: var(--text-tertiary); margin-top: 2px; }
.duo-streak-sm {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 20px; font-weight: 800; color: var(--text-secondary);
}
.duo-streak-sm span:last-child { font-size: 10px; font-weight: 500; color: var(--text-tertiary); }

/* ── Duel ── */
.duo-duel-active-card { padding: 16px; }
.duo-duel-badge {
  display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .5px;
  padding: 3px 10px; border-radius: 20px; margin-bottom: 8px;
}
.duo-duel-badge.live { background: rgba(236,72,153,.15); color: var(--duo-b); }
.duo-duel-badge.finished { background: rgba(107,114,128,.1); color: var(--text-tertiary); }
.duo-duel-metric { font-size: 12px; color: var(--text-tertiary); margin-bottom: 6px; }
.duo-duel-stake {
  font-size: 12px; color: var(--text-secondary); margin-bottom: 10px;
  background: rgba(251,191,36,.1); border-radius: 8px; padding: 4px 10px;
}
.duo-duel-scores {
  display: flex; align-items: center; justify-content: center;
  gap: 16px; margin: 12px 0;
}
.duo-duel-player {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.duo-duel-player.leading .duo-duel-score { color: var(--duo-a); }
.duo-duel-name { font-size: 12px; color: var(--text-secondary); }
.duo-duel-score { font-size: 40px; font-weight: 900; line-height: 1; }
.duo-duel-vs { font-size: 14px; font-weight: 800; color: var(--text-tertiary); }
.duo-duel-progress-wrap {
  display: flex; height: 8px; border-radius: 8px; overflow: hidden; margin-bottom: 12px;
}
.duo-duel-prog-a {
  height: 100%; background: var(--duo-a); width: 0; transition: width .6s var(--spring);
}
.duo-duel-prog-b {
  height: 100%; background: var(--duo-b); width: 0; transition: width .6s var(--spring);
}

.duo-new-duel-card { padding: 16px; }
.duo-duel-form { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.duo-form-label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-tertiary); }
.duo-form-label select, .duo-form-label .duo-input {
  padding: 10px 12px; border-radius: 12px; border: 1.5px solid var(--glass-border);
  background: var(--glass-bg); font-size: 14px; color: var(--text-primary); font-family: inherit;
}
.duo-input {
  padding: 10px 12px; border-radius: 12px; border: 1.5px solid var(--glass-border);
  background: var(--glass-bg); font-size: 14px; color: var(--text-primary); font-family: inherit;
  width: 100%; box-sizing: border-box;
}

.duo-duel-hist-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--glass-border);
  font-size: 13px;
}
.duo-duel-hist-row:last-child { border-bottom: none; }
.duo-duel-hist-icon { font-size: 18px; }
.duo-duel-hist-date { flex: 1; color: var(--text-secondary); font-size: 12px; }
.duo-duel-hist-score { font-weight: 700; }

.duo-season-card { padding: 14px; }
.duo-season-scores {
  display: flex; align-items: center; justify-content: center;
  gap: 16px; margin: 10px 0;
}
.duo-season-col { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.duo-season-col.leading .duo-season-val { color: var(--duo-a); }
.duo-season-val { font-size: 36px; font-weight: 900; line-height: 1; }
.duo-season-lbl { font-size: 11px; color: var(--text-tertiary); }
.duo-season-div { font-size: 20px; font-weight: 700; color: var(--text-tertiary); }
.duo-season-hint { font-size: 11px; color: var(--text-tertiary); text-align: center; margin: 0; }

/* ── Stats ── */
.duo-week-chart {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
  margin-bottom: 6px;
}
.duo-week-col {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  border-radius: 8px; padding: 6px 2px;
}
.duo-week-col.duo-week-sync { background: rgba(139,92,246,.08); }
.duo-week-icon { font-size: 14px; line-height: 1.3; }
.duo-week-day { font-size: 9px; color: var(--text-tertiary); font-weight: 600; }
.duo-week-legend {
  display: flex; justify-content: space-between;
  font-size: 10px; color: var(--text-tertiary); padding: 0 2px; margin-bottom: 2px;
}

.duo-who-wins {
  display: flex; align-items: center; justify-content: center; gap: 12px;
}
.duo-wins-col { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 1; }
.duo-wins-col.top .duo-wins-num { color: var(--duo-a); }
.duo-wins-num { font-size: 36px; font-weight: 900; line-height: 1; }
.duo-wins-lbl { font-size: 11px; color: var(--text-tertiary); text-align: center; }
.duo-wins-sync { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 1; }
.duo-wins-sync-num {
  background: var(--duo-grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}

.duo-alltime-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0; border-bottom: 1px solid var(--glass-border);
  font-size: 13px;
}
.duo-alltime-row:last-child { border-bottom: none; }

.duo-ai-card { padding: 14px; }
.duo-ai-text {
  font-size: 13px; color: var(--text-secondary); line-height: 1.5;
  margin-bottom: 10px; min-height: 40px;
}
.duo-ai-btn {
  padding: 9px 18px; border-radius: 20px; border: none;
  background: var(--duo-grad); color: #fff; font-weight: 700; font-size: 13px;
  cursor: pointer; transition: opacity .15s;
}
.duo-ai-btn:disabled { opacity: .5; }

/* ── Pet Duo ── */
.duo-pet-card { padding: 20px 14px; text-align: center; }
.duo-pet-emoji { font-size: 64px; line-height: 1; margin-bottom: 8px; }
.duo-pet-stage { font-size: 20px; font-weight: 800; margin-bottom: 4px; }
.duo-pet-subtitle { font-size: 13px; color: var(--text-secondary); margin-bottom: 8px; }
.duo-pet-xp {
  font-size: 14px; font-weight: 700; color: var(--duo-a); margin-bottom: 10px;
}
.duo-pet-track { margin: 0 auto 10px; max-width: 260px; }
.duo-pet-next { font-size: 12px; color: var(--text-tertiary); margin: 4px 0 0; }
.duo-pet-rules { padding: 14px; }

/* ── History / Achievements ── */
.duo-ach-list { display: flex; flex-direction: column; gap: 8px; }
.duo-ach-card {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 12px;
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  transition: opacity .2s;
}
.duo-ach-card.locked { opacity: .4; filter: grayscale(.6); }
.duo-ach-card.unlocked { border-color: rgba(139,92,246,.3); background: rgba(139,92,246,.06); }
.duo-ach-icon { font-size: 24px; flex-shrink: 0; }
.duo-ach-body { flex: 1; }
.duo-ach-title { font-size: 13px; font-weight: 700; }
.duo-ach-desc { font-size: 11px; color: var(--text-tertiary); margin-top: 1px; }
.duo-ach-check { color: var(--duo-a); font-size: 18px; font-weight: 900; }

.duo-events-list { display: flex; flex-direction: column; gap: 0; }
.duo-event-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--glass-border);
}
.duo-event-row:last-child { border-bottom: none; }
.duo-event-icon { font-size: 18px; flex-shrink: 0; }
.duo-event-body { display: flex; flex-direction: column; gap: 1px; }
.duo-event-desc { font-size: 13px; color: var(--text-primary); }
.duo-event-date { font-size: 11px; color: var(--text-tertiary); }

/* ── Coach ── */
.duo-coach-card { padding: 14px; }
.duo-coach-desc { font-size: 13px; color: var(--text-secondary); margin-bottom: 8px; }
.duo-coach-input {
  width: 100%; box-sizing: border-box;
  padding: 10px 12px; border-radius: 12px; border: 1.5px solid var(--glass-border);
  background: var(--glass-bg); font-size: 14px; color: var(--text-primary);
  font-family: inherit; resize: vertical; min-height: 72px;
}
.duo-coach-comment-row {
  padding: 8px 0; border-bottom: 1px solid var(--glass-border);
}
.duo-coach-comment-row:last-child { border-bottom: none; }
.duo-coach-comment-date { font-size: 11px; color: var(--text-tertiary); margin-bottom: 2px; }
.duo-coach-comment-text { font-size: 13px; color: var(--text-primary); line-height: 1.4; }

/* ── Settings sheet ── */
.duo-settings-sheet { padding: 4px 0 8px; }
.duo-settings-together {
  font-size: 11px; color: var(--text-tertiary); text-align: center;
  margin: 8px 0 4px;
}
.duo-danger-btn {
  width: 100%; padding: 12px; border-radius: 14px;
  background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.25);
  color: #EF4444; font-size: 14px; font-weight: 700; cursor: pointer;
  margin-top: 4px; transition: background .15s;
}
.duo-danger-btn:active { background: rgba(239,68,68,.2); }

/* ── #5 Pause indicator ───────────────────────────────────── */
.duo-day-paused { opacity: .5; }
.duo-day-paused-text { font-size: 13px; color: var(--text-tertiary); margin-top: 8px; }

/* ── #8 Activity timestamp ────────────────────────────────── */
.duo-day-ago { font-size: 10px; color: var(--text-tertiary); margin-top: 4px; }

/* ── #10 Partner food list ────────────────────────────────── */
.duo-food-list { margin-top: 8px; border-top: 1px solid var(--border); padding-top: 6px; }
.duo-food-row { display: flex; justify-content: space-between; align-items: center;
  padding: 3px 0; }
.duo-food-name { font-size: 11px; color: var(--text-secondary); flex: 1; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.duo-food-kcal { font-size: 11px; color: var(--text-tertiary); margin-left: 6px; flex-shrink: 0; }
.duo-food-more { font-size: 10px; color: var(--text-tertiary); margin-top: 2px; }

/* ── #14 Confetti ─────────────────────────────────────────── */
.duo-confetti-layer {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 9999; overflow: hidden;
}
.duo-confetti-piece {
  position: absolute; top: -10px;
  animation: duo-confetti-fall linear forwards;
}
@keyframes duo-confetti-fall {
  0%   { transform: translateY(0) rotate(0deg);   opacity: 1; }
  100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}

/* ── #16 Quick phrases ────────────────────────────────────── */
.duo-quick-phrase-btn {
  width: 100%; padding: 9px 14px; border-radius: 12px;
  background: rgba(139,92,246,.12); border: 1px solid rgba(139,92,246,.25);
  color: var(--duo-a); font-size: 13px; font-weight: 600; cursor: pointer;
  margin-top: 8px; transition: background .15s;
}
.duo-quick-phrase-btn:active { background: rgba(139,92,246,.22); }
.duo-phrases-sheet { padding: 8px 0 12px; }
.duo-phrases-list { display: flex; flex-direction: column; gap: 6px; padding: 8px 0; }
.duo-phrase-item {
  padding: 10px 14px; border-radius: 12px; text-align: left;
  background: var(--glass-bg); border: 1px solid var(--border);
  color: var(--text-primary); font-size: 13px; cursor: pointer;
  transition: background .15s;
}
.duo-phrase-item:active { background: rgba(139,92,246,.1); }

/* ── #17 Secret duel ──────────────────────────────────────── */
.duo-secret-duel-btn {
  width: 100%; padding: 10px 14px; border-radius: 12px; margin-top: 8px;
  background: rgba(234,179,8,.1); border: 1px solid rgba(234,179,8,.3);
  color: #EAB308; font-size: 13px; font-weight: 700; cursor: pointer;
  transition: background .15s;
}
.duo-secret-duel-btn:active { background: rgba(234,179,8,.2); }

/* ── #22 H2H record ───────────────────────────────────────── */
.duo-alltime-sub { font-size: 11px; color: var(--text-tertiary); margin: 8px 0 4px; }
.duo-h2h-row { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 4px; }
.duo-h2h-col { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.duo-h2h-num { font-size: 22px; font-weight: 800; color: var(--text-primary); }
.duo-h2h-lbl { font-size: 11px; color: var(--text-tertiary); }
.duo-h2h-col.h2h-leading .duo-h2h-num { color: var(--duo-a); }
.duo-h2h-draws { display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 0 8px; }
.duo-h2h-draw-lbl { font-size: 10px; color: var(--text-tertiary); }

/* ── #34 Weight progress ──────────────────────────────────── */
.duo-weight-card { padding: 14px; text-align: center; }
.duo-weight-total { font-size: 36px; font-weight: 900;
  background: var(--duo-grad); -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; background-clip: text; margin: 6px 0; }
.duo-weight-split { display: flex; justify-content: center; gap: 16px;
  font-size: 12px; color: var(--text-secondary); }

/* ── #35 Heatmap ──────────────────────────────────────────── */
.duo-heatmap-card { padding: 14px; }
.duo-heatmap-loading { font-size: 13px; color: var(--text-tertiary); }
.duo-heatmap-grid {
  display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 8px;
}
.duo-hm-cell {
  width: 10px; height: 10px; border-radius: 2px;
  transition: transform .15s;
}
.duo-hm-cell:hover { transform: scale(1.4); }
.duo-heatmap-legend {
  display: flex; align-items: center; gap: 6px;
  font-size: 10px; color: var(--text-tertiary); flex-wrap: wrap;
}
.duo-hm-swatch {
  display: inline-block; width: 10px; height: 10px;
  border-radius: 2px; border: 1px solid var(--border);
}

/* ── Invite code sheet ── */
.duo-invite-sheet { padding: 8px 0 20px; }
.duo-invite-code-box { text-align: center; padding: 12px 20px 16px; }
.duo-invite-qr {
  display: flex; justify-content: center; margin-bottom: 14px;
}
.duo-invite-qr canvas, .duo-invite-qr img {
  border-radius: 14px;
  box-shadow: 0 4px 20px rgba(139,92,246,.25);
}
.duo-invite-code {
  font-size: 34px; font-weight: 900; letter-spacing: 8px;
  color: var(--duo-a); margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
}
.duo-invite-hint { font-size: 12px; color: var(--text-tertiary); }
.duo-invite-actions {
  display: flex; gap: 10px; padding: 0 16px;
}
.duo-invite-copy-btn {
  flex: 1; padding: 12px 8px; border-radius: 14px;
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  color: var(--text-primary); font-size: 14px; font-weight: 600;
  cursor: pointer; backdrop-filter: blur(12px);
}
.duo-invite-share-btn {
  flex: 1; padding: 12px 8px; border-radius: 14px;
  background: var(--duo-a); color: #fff;
  font-size: 14px; font-weight: 700; border: none; cursor: pointer;
}

/* ── Duel active banner ── */
.duo-duel-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  margin: -4px -2px 12px;
  background: linear-gradient(135deg, rgba(236,72,153,.18), rgba(139,92,246,.18));
  border: 1px solid rgba(236,72,153,.35);
  border-radius: 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  transition: background .15s;
}
.duo-duel-banner:hover { background: linear-gradient(135deg, rgba(236,72,153,.28), rgba(139,92,246,.28)); }
.duo-duel-banner-arr { color: var(--duo-b); font-size: 16px; margin-left: auto; }

/* ── Support tab hint ── */
.duo-support-hint {
  font-size: 12px;
  color: var(--text-tertiary);
  margin: -4px 0 12px;
  line-height: 1.4;
}


/* ── Замеры тела ── */
.bm-card { }

.bm-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.bm-tile {
  background: var(--bg-card-inner, rgba(255,255,255,.06));
  border-radius: 14px;
  padding: 12px;
  cursor: pointer;
  transition: background .15s;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bm-tile:active { background: rgba(255,255,255,.12); }

.bm-tile-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-secondary);
}

.bm-tile-value {
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  color: var(--text-primary);
}
.bm-tile-value.bm-empty {
  font-size: 16px;
  color: var(--text-tertiary);
}

.bm-tile-delta {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
}
.bm-tile-delta.down { color: #34D399; }
.bm-tile-delta.up   { color: #F87171; }

.bm-tile-svg {
  width: 100%;
  height: 36px;
  margin-top: 4px;
  overflow: visible;
}

.bm-sheet-types {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}
.bm-sheet-type-btn {
  padding: 10px 6px;
  border-radius: 12px;
  border: 2px solid transparent;
  background: var(--bg-card-inner, rgba(255,255,255,.06));
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  text-align: center;
}
.bm-sheet-type-btn.selected {
  border-color: var(--c-kcal);
  color: var(--text-primary);
  background: rgba(255,255,255,.1);
}

/* ── Bottom-sheet (замеры тела, review-sheet) ── */
.bottom-sheet {
  position: fixed;
  inset: 0;
  z-index: 500;
  pointer-events: none;
}
.bottom-sheet.open { pointer-events: auto; }

.bottom-sheet-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15,23,42,.38);
  opacity: 0;
  transition: opacity .25s var(--ease);
}
.bottom-sheet.open .bottom-sheet-overlay { opacity: 1; }

.bottom-sheet-panel {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  max-width: 480px;
  margin: 0 auto;
  background: var(--glass-bg-strong, rgba(30,40,60,.92));
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), var(--glass-highlight);
  border-radius: 28px 28px 0 0;
  padding: 12px 20px calc(24px + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%);
  transition: transform .35s var(--spring);
}
.bottom-sheet.open .bottom-sheet-panel { transform: translateY(0); }

.bottom-sheet-drag {
  width: 36px; height: 4px;
  border-radius: 999px;
  background: rgba(99,115,140,.25);
  margin: 4px auto 18px;
}

/* ── Food multi-item review ── */
.food-review-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 4px;
  max-height: 240px;
  overflow-y: auto;
}
.food-review-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255,255,255,.06);
  border-radius: 10px;
  padding: 10px 12px;
  gap: 8px;
}
.food-review-name {
  font-size: 13px; font-weight: 500; color: var(--text-primary);
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.food-review-kcal {
  font-size: 12px; font-weight: 600; color: var(--text-secondary); white-space: nowrap;
}