/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800;900&family=Fraunces:ital,opsz,wght@0,9..144,600;0,9..144,700;0,9..144,900;1,9..144,700&display=swap');

/* ── Reset & Variables ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --primary:        #27B467;
  --primary-d:      #17924F;
  --primary-light:  #82DEAD;
  --primary-pale:   #D6F5E5;
  --accent:         #0D7A40;
  --bg:             #F3FAF6;
  --surface:        rgba(255,255,255,0.90);
  --surface-solid:  #FFFFFF;
  --surface2:       #EBF7F1;
  --glass:          rgba(255,255,255,0.72);
  --glass-heavy:    rgba(255,255,255,0.97);
  --text:           #0D1E15;
  --text2:          #527068;
  --text3:          #95B0A8;
  --border:         rgba(39,180,103,0.14);
  --border-solid:   #E0EBE6;
  --nav-h:          76px;
  --radius:         22px;
  --radius-lg:      30px;
  --radius-xl:      40px;
  --shadow-sm:      0 2px 12px rgba(0,0,0,.04);
  --shadow:         0 8px 32px rgba(39,180,103,.10), 0 2px 8px rgba(0,0,0,.04);
  --shadow-lg:      0 24px 64px rgba(39,180,103,.18), 0 4px 16px rgba(0,0,0,.06);
  --shadow-card:    0 4px 22px rgba(13,30,21,.06), 0 1px 4px rgba(13,30,21,.03);
  --font-body:      'Nunito', system-ui, sans-serif;
  --font-display:   'Fraunces', Georgia, serif;
}

html {
  height: 100%;
  overflow-x: hidden;
  /* Prevent Android browser from auto-scaling text and breaking layouts */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html, body {
  height: 100%;
  min-height: 100%;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Global interactive element resets for Android ── */
button, a, input, select, textarea, [role="button"], [tabindex] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* ── Liquid Orb Background ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 12% -6%,  rgba(130,222,173,.52) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 92% 8%,   rgba(182,246,212,.44) 0%, transparent 52%),
    radial-gradient(ellipse 65% 55% at 88% 96%,  rgba(74,210,128,.24) 0%, transparent 55%),
    radial-gradient(ellipse 50% 45% at -5% 80%,  rgba(39,180,103,.18) 0%, transparent 50%),
    radial-gradient(ellipse 55% 40% at 48% 52%,  rgba(243,250,246,.96) 0%, transparent 66%);
  pointer-events: none;
  z-index: 0;
  animation: liquidShift 22s ease-in-out infinite alternate;
}

@keyframes liquidShift {
  0%   { opacity: 1; transform: scale(1); }
  50%  { opacity: .80; transform: scale(1.018); }
  100% { opacity: .92; transform: scale(1); }
}

/* ── App Shell ── */
#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  margin: 0 auto;
  position: relative;
  background: transparent;
  overflow: hidden;
  z-index: 1;
}

@media (max-width: 500px) {
  #app { max-width: 100%; margin: 0; }
}

/* ── Utility ── */
.js-hidden { display: none; }
.nav-btn--fab .nav-label { color: transparent; font-size: 1px; }

/* Restock suggestion thumbnails */
.restock-item:nth-child(1) .shop-thumb { background-image: url('https://loremflickr.com/160/160/olive,oil,bottle?lock=601'); }
.restock-item:nth-child(2) .shop-thumb { background-image: url('https://loremflickr.com/160/160/eggs,carton?lock=602'); }
.restock-item:nth-child(3) .shop-thumb { background-image: url('https://loremflickr.com/160/160/milk,carton?lock=603'); }
.restock-item:nth-child(4) .shop-thumb { background-image: url('https://loremflickr.com/160/160/bread,loaf?lock=604'); }

/* Chat recipe cook button */
.chat-cook-btn { margin-top: 8px; width: 100%; font-size: 13px; }

/* Hide auth during first-time onboarding to prevent flash */
html[data-ob-pending] #auth-screen { display: none !important; }

/* ── Screens ── */
.screen {
  display: none;
  flex: 1;
  min-height: 0;
  overflow-y: scroll;
  overflow-x: hidden;
  padding-bottom: calc(var(--nav-h) + 56px);
  contain: layout style;
}
.screen::-webkit-scrollbar { display: none; }
.screen.active {
  display: flex;
  flex-direction: column;
  animation: screenIn .30s cubic-bezier(.25,.46,.45,.94);
  will-change: scroll-position;
}

@keyframes screenIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════
   AUTH SCREEN
═══════════════════════════════════════ */
#auth-screen {
  background: linear-gradient(158deg, #053E2A 0%, #0D7A40 40%, #27B467 72%, #F3FAF6 100%);
  padding-bottom: 0;
  overflow: hidden;
  position: relative;
}

#auth-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 8% 12%, rgba(130,222,173,.38) 0%, transparent 55%),
    radial-gradient(ellipse 55% 45% at 95% 6%,  rgba(182,246,212,.30) 0%, transparent 52%),
    radial-gradient(circle 120px at 80% 85%, rgba(39,180,103,.18) 0%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

.auth-hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 54px 24px 26px;
  text-align: center;
  gap: 6px;
  position: relative;
  z-index: 1;
}

.auth-logo-wrap {
  width: 100px;
  height: 100px;
  background: rgba(255,255,255,.17);
  border-radius: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  border: 1.5px solid rgba(255,255,255,.32);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  box-shadow: 0 12px 44px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.3);
}

.auth-title {
  font-family: var(--font-display);
  font-size: 50px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -2.5px;
  line-height: 1;
  text-shadow: 0 2px 22px rgba(0,0,0,.16);
}

.auth-subtitle {
  font-size: 16px;
  color: rgba(255,255,255,.76);
  margin-top: 8px;
  font-weight: 500;
}

.auth-card {
  background: var(--glass-heavy);
  border-radius: 44px 44px 0 0;
  padding: 36px 26px 52px;
  box-shadow: 0 -14px 60px rgba(0,0,0,.12);
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
  border-top: 1.5px solid rgba(255,255,255,.92);
  position: relative;
  z-index: 1;
}

.auth-tabs {
  display: flex;
  background: var(--surface2);
  border-radius: 18px;
  padding: 5px;
  margin-bottom: 28px;
  gap: 4px;
}

.auth-tab {
  flex: 1;
  padding: 13px;
  border: none;
  background: transparent;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 800;
  font-family: var(--font-body);
  color: var(--text2);
  cursor: pointer;
  transition: all .22s cubic-bezier(.25,.46,.45,.94);
  letter-spacing: .1px;
}

.auth-tab.active {
  background: #fff;
  color: var(--primary);
  box-shadow: 0 3px 14px rgba(0,0,0,.09);
}

.auth-form { display: none; }
.auth-form.active { display: block; }

.form-group { margin-bottom: 16px; }

.form-label {
  display: block;
  font-size: 11px;
  font-weight: 900;
  color: var(--text2);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.form-input {
  width: 100%;
  padding: 16px 20px;
  border: 2px solid var(--border);
  border-radius: 16px;
  font-size: 16px;
  font-family: var(--font-body);
  font-weight: 600;
  background: var(--surface);
  color: var(--text);
  outline: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
  -webkit-appearance: none;
}

.form-input:focus {
  border-color: var(--primary);
  background: #fff;
  box-shadow: 0 0 0 5px rgba(39,180,103,.10);
}

.form-input::placeholder { color: var(--text3); font-weight: 500; }

.btn-primary {
  width: 100%;
  padding: 18px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  color: #fff;
  border: none;
  border-radius: 18px;
  font-size: 16px;
  font-weight: 900;
  font-family: var(--font-body);
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
  margin-top: 8px;
  letter-spacing: .2px;
  box-shadow: 0 6px 24px rgba(39,180,103,.34), inset 0 1px 0 rgba(255,255,255,.25);
  position: relative;
  overflow: hidden;
}

.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,.14) 0%, transparent 60%);
  pointer-events: none;
}

.btn-primary:active {
  transform: scale(.97);
  box-shadow: 0 3px 10px rgba(39,180,103,.2);
}

.btn-guest {
  background: var(--surface2);
  color: var(--text2);
  box-shadow: none;
  border: 2px solid var(--border-solid);
}
.btn-guest::after { display: none; }
.btn-guest:active { transform: scale(.97); box-shadow: none; }

.btn-danger {
  background: #0F172A;
  box-shadow: 0 4px 16px rgba(15,23,42,.3);
}

.mt-8  { margin-top: 8px; }
.mt-16 { margin-top: 16px; }

/* ═══════════════════════════════════════
   TOP BAR
═══════════════════════════════════════ */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 52px 22px 18px;
  background: rgba(243,250,246,.88);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
}

.topbar-title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.5px;
}

.topbar-actions { display: flex; gap: 8px; }

.topbar-action {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
  box-shadow: var(--shadow-sm);
}
.topbar-action:active { background: var(--primary-pale); transform: scale(.92); }

/* ═══════════════════════════════════════
   FLOATING BOTTOM NAV
═══════════════════════════════════════ */
.bottom-nav {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: none;
  height: var(--nav-h);
  background: rgba(255,255,255,0.94);
  -webkit-backdrop-filter: blur(32px) saturate(220%);
  backdrop-filter: blur(32px) saturate(220%);
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 8px;
  z-index: 100;
  box-shadow:
    0 6px 40px rgba(13,30,21,.09),
    0 1px 8px rgba(13,30,21,.05),
    0 0 0 1.5px rgba(255,255,255,.88),
    inset 0 1px 0 rgba(255,255,255,.9);
  border: 1px solid rgba(255,255,255,.72);
  will-change: transform;
}

.bottom-nav.nav-off { display: none; }

.nav-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
  padding: 10px 4px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 22px;
  transition: background .18s;
  position: relative;
}

.nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  transition: background .2s, transform .2s;
}

.nav-label {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text3);
  letter-spacing: .2px;
  transition: color .2s;
}

.nav-btn svg { stroke: var(--text3); transition: stroke .2s; }
.nav-btn.active .nav-icon { background: var(--primary-pale); transform: scale(1.06); }
.nav-btn.active svg { stroke: var(--primary); }
.nav-btn.active .nav-label { color: var(--primary); font-weight: 900; }
.nav-btn.active .nav-icon { filter: drop-shadow(0 0 4px rgba(39,180,103,.42)); }

.nav-active-dot {
  display: none;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--primary);
  margin-top: -4px;
}
.nav-btn.active .nav-active-dot { display: block; }

/* ═══════════════════════════════════════
   SECTION & CARDS
═══════════════════════════════════════ */
.section {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.section--no-top    { padding-top: 0; }
.section--no-bottom { padding-bottom: 0; }

.card {
  background: var(--glass-heavy);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow-card);
  border: 1.5px solid rgba(255,255,255,.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  animation: cardReveal .38s cubic-bezier(.25,.46,.45,.94) both;
}

.card-title {
  font-size: 12.5px;
  font-weight: 900;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 14px;
}

.card-title--section {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  text-transform: none;
  letter-spacing: -.3px;
  margin-bottom: 4px;
  margin-left: 2px;
}

/* ═══════════════════════════════════════
   GREETING BANNER
═══════════════════════════════════════ */
.greeting-banner {
  background: linear-gradient(150deg, #053E2A 0%, #0D7A40 52%, #27B467 100%);
  padding: 58px 22px 36px;
  position: relative;
  overflow: hidden;
}

/* bottom curve */
.greeting-banner::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 28px;
  background: var(--bg);
  border-radius: 28px 28px 0 0;
}

/* decorative glow orb */
.greeting-banner::before {
  content: '';
  position: absolute;
  width: 260px; height: 260px;
  right: -70px; top: -80px;
  background: radial-gradient(circle, rgba(130,222,173,.32) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  z-index: 0;
}

.greeting-banner > *, .nutrition-hero > *, .profile-header > * { position: relative; z-index: 1; }

.greeting-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 999px;
  color: rgba(255,255,255,.9);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .4px;
  margin-bottom: 10px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  width: fit-content;
}

.greeting-small {
  font-size: 15px;
  color: rgba(255,255,255,.72);
  font-weight: 500;
  margin-bottom: 3px;
}

.greeting-name {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -1.5px;
  line-height: 1.1;
  margin-bottom: 14px;
  text-shadow: 0 2px 18px rgba(0,0,0,.14);
}

.greeting-chips { display: flex; gap: 8px; flex-wrap: wrap; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 13px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px;
  color: rgba(255,255,255,.9);
  font-size: 12.5px;
  font-weight: 700;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* ═══════════════════════════════════════
   CALENDAR STRIP
═══════════════════════════════════════ */
.cal-strip {
  display: flex;
  overflow-x: auto;
  gap: 8px;
  padding: 18px 18px 8px;
  scroll-snap-type: x mandatory;
}
.cal-strip::-webkit-scrollbar { display: none; }

.cal-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 52px;
  flex-shrink: 0;
  padding: 11px 6px;
  border-radius: 18px;
  cursor: pointer;
  gap: 5px;
  scroll-snap-align: center;
  transition: all .2s cubic-bezier(.34,1.56,.64,1);
  border: 1.5px solid transparent;
}

.cal-day-name { font-size: 10.5px; font-weight: 900; color: var(--text3); text-transform: uppercase; letter-spacing: .6px; }
.cal-day-num  { font-size: 18px; font-weight: 900; color: var(--text2); line-height: 1; }

.cal-day:hover { background: var(--surface2); transform: translateY(-2px); }
.cal-day.active {
  background: var(--primary);
  box-shadow: 0 5px 18px rgba(39,180,103,.38);
}
.cal-day.active .cal-day-name,
.cal-day.active .cal-day-num { color: #fff; }

/* ═══════════════════════════════════════
   CALORIE RING CARD
═══════════════════════════════════════ */
.cal-card-inner {
  display: flex;
  align-items: center;
  gap: 20px;
}

.cal-ring-wrap { position: relative; flex-shrink: 0; }
.cal-ring-svg { transform: rotate(-90deg); }

.cal-ring-bg {
  fill: none;
  stroke: var(--surface2);
  stroke-width: 9;
}

.cal-ring-fill {
  fill: none;
  stroke: url(#ringGrad);
  stroke-width: 9;
  stroke-linecap: round;
  stroke-dasharray: 220;
  stroke-dashoffset: 110;
  transition: stroke-dashoffset 1s cubic-bezier(.34,1.56,.64,1);
  filter: drop-shadow(0 0 7px rgba(39,180,103,.4));
}

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

.cal-ring-val {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}

.cal-ring-unit {
  font-size: 9.5px;
  font-weight: 900;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .6px;
  margin-top: 2px;
}

.cal-info { flex: 1; min-width: 0; }

.cal-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: var(--text2);
  font-weight: 600;
  margin-bottom: 8px;
  gap: 8px;
}

.cal-row--goal { font-size: 12px; color: var(--text3); margin-top: 6px; margin-bottom: 0; }

.cal-remaining { font-weight: 900; color: var(--primary); }

.progress-bar {
  height: 8px;
  background: var(--surface2);
  border-radius: 999px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(to right, var(--primary), var(--primary-light));
  border-radius: 999px;
  width: 50%;
  transition: width 1s cubic-bezier(.34,1.56,.64,1);
  box-shadow: 0 0 10px rgba(39,180,103,.45);
}

.progress-bar--budget { height: 10px; margin: 10px 0 8px; }
.progress-fill--budget {
  background: linear-gradient(to right, #27B467, #82DEAD);
  width: 61%;
  box-shadow: none;
}

/* ═══════════════════════════════════════
   MACROS
═══════════════════════════════════════ */
.macro-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

.macro-item {
  background: var(--surface2);
  border-radius: 18px;
  padding: 14px 10px;
  text-align: center;
  border: 1.5px solid transparent;
  transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s, border-color .2s;
  position: relative;
  overflow: hidden;
}

.macro-item::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3.5px;
  border-radius: 3px 3px 0 0;
}

.macro-item--protein::before { background: linear-gradient(to right, #3B82F6, #93C5FD); }
.macro-item--carbs::before   { background: linear-gradient(to right, #F59E0B, #FCD34D); }
.macro-item--fats::before    { background: linear-gradient(to right, #EF4444, #FCA5A5); }

.macro-val {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
}

.macro-lbl {
  font-size: 10.5px;
  font-weight: 900;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .8px;
  margin-top: 4px;
}

.macro-item:hover {
  transform: translateY(-5px) scale(1.03);
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
  border-color: var(--border);
}

/* ═══════════════════════════════════════
   BUDGET WIDGET
═══════════════════════════════════════ */
.budget-widget-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
}

.budget-amount {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  color: var(--text);
}

.budget-label { font-size: 14px; color: var(--text2); font-weight: 500; }
.budget-goal  { font-size: 13px; color: var(--text3); font-weight: 600; }

.budget-widget-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.budget-widget-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  background: var(--surface2);
  color: var(--text2);
}
.budget-widget-chip--ok { background: var(--primary-pale); color: var(--primary-d); }

.budget-widget-link {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--primary);
  font-size: 13px;
  font-weight: 900;
  font-family: var(--font-body);
  cursor: pointer;
  padding: 4px 0;
}

/* ═══════════════════════════════════════
   RECIPE CARDS
═══════════════════════════════════════ */
.recipe-list-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 2px 4px 8px;
}
.recipe-list-scroll::-webkit-scrollbar { display: none; }

.recipe-card {
  background: var(--glass-heavy);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  border: 1.5px solid rgba(255,255,255,.92);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s;
  flex-shrink: 0;
  width: 200px;
}

.recipe-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

.recipe-img {
  width: 100%;
  height: 120px;
  background: linear-gradient(135deg, var(--primary-pale), var(--surface2));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 42px;
  position: relative;
  overflow: hidden;
}

.recipe-body { padding: 12px; }

.recipe-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 5px;
  line-height: 1.3;
}

.recipe-meta { display: flex; gap: 8px; align-items: center; }

.recipe-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  background: var(--primary-pale);
  color: var(--primary-d);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}

.recipe-time { font-size: 11.5px; color: var(--text3); font-weight: 600; }

.recipe-card--full { width: 100%; flex-direction: row; display: flex; }
.recipe-card--full .recipe-img { width: 90px; height: 90px; flex-shrink: 0; border-radius: 14px; font-size: 32px; }
.recipe-card--full .recipe-body { flex: 1; padding: 10px 12px; }

/* ═══════════════════════════════════════
   INGREDIENT TAGS
═══════════════════════════════════════ */
.ingredient-input-row { display: flex; gap: 8px; align-items: center; }

.btn-icon {
  width: 48px; height: 48px;
  border-radius: 14px;
  background: var(--primary);
  color: #fff;
  border: none;
  font-size: 22px;
  font-weight: 900;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform .15s, box-shadow .15s;
  box-shadow: 0 4px 18px rgba(39,180,103,.32);
}
.btn-icon:active { transform: scale(.9); }
.btn-icon--camera { background: var(--surface2); color: var(--text2); box-shadow: none; border: 1.5px solid var(--border); }

.tag-list { display: flex; flex-wrap: wrap; gap: 7px; }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  background: var(--primary-pale);
  border: 1.5px solid rgba(39,180,103,.22);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: var(--primary-d);
  animation: tagPop .2s cubic-bezier(.34,1.56,.64,1);
}

@keyframes tagPop {
  from { transform: scale(.7); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}

.tag-remove {
  cursor: pointer;
  opacity: .6;
  font-size: 16px;
  line-height: 1;
  transition: opacity .15s, transform .15s;
  border: none;
  background: none;
  color: var(--primary-d);
  padding: 0;
}
.tag-remove:hover { opacity: 1; transform: scale(1.2); }

/* ═══════════════════════════════════════
   GENERATE BUTTON
═══════════════════════════════════════ */
.generate-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 18px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  color: #fff;
  border: none;
  border-radius: 20px;
  font-size: 16px;
  font-weight: 900;
  font-family: var(--font-body);
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
  box-shadow: 0 6px 28px rgba(39,180,103,.30);
  position: relative;
  overflow: hidden;
  letter-spacing: .2px;
}

.generate-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,.16) 0%, transparent 60%);
  pointer-events: none;
}

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

.generate-btn--outline {
  background: transparent;
  color: var(--primary);
  border: 2px dashed rgba(39,180,103,.4);
  box-shadow: none;
  font-size: 14px;
}
.generate-btn--outline::after { display: none; }

/* ═══════════════════════════════════════
   FILTER CHIPS
═══════════════════════════════════════ */
.filter-scroll {
  display: flex;
  overflow-x: auto;
  gap: 8px;
  padding: 4px 18px 12px;
  scroll-snap-type: x mandatory;
}
.filter-scroll::-webkit-scrollbar { display: none; }

.filter-chip {
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 800;
  font-family: var(--font-body);
  color: var(--text2);
  background: var(--surface);
  border: 1.5px solid var(--border);
  cursor: pointer;
  white-space: nowrap;
  scroll-snap-align: start;
  transition: all .2s;
  box-shadow: var(--shadow-sm);
}

.filter-chip.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  box-shadow: 0 4px 16px rgba(39,180,103,.30);
}
.filter-chip:active { transform: scale(.95); }

/* ═══════════════════════════════════════
   SELECT GROUP
═══════════════════════════════════════ */
.select-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}

/* ═══════════════════════════════════════
   KITCHEN TABS
═══════════════════════════════════════ */
.kit-tabs {
  display: flex;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0 18px;
  gap: 4px;
}

.kit-tab {
  padding: 14px 16px;
  border: none;
  background: transparent;
  font-size: 14px;
  font-weight: 800;
  font-family: var(--font-body);
  color: var(--text3);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: all .2s;
}

.kit-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.kit-panel.hidden { display: none; }

/* ═══════════════════════════════════════
   INVENTORY ITEMS
═══════════════════════════════════════ */
.inv-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.inv-item:last-child { border-bottom: none; padding-bottom: 0; }

.inv-icon {
  width: 44px; height: 44px;
  background: var(--surface2);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.inv-info { flex: 1; }
.inv-name { font-size: 14.5px; font-weight: 700; color: var(--text); }
.inv-qty  { font-size: 12.5px; color: var(--text2); margin-top: 2px; font-weight: 500; }

.expiry-badge {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 800;
  background: var(--surface2);
  color: var(--text3);
}
.expiry-badge--warn { background: #FFF7ED; color: #D97706; }
.expiry-badge--low  { background: #FFF1F2; color: #E11D48; }

.expiry-alert {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: #FFF7ED;
  border: 1px solid #FDE68A;
  border-radius: 16px;
  font-size: 13.5px;
  font-weight: 700;
  color: #92400E;
}

/* ═══════════════════════════════════════
   SHOPPING LIST
═══════════════════════════════════════ */
.shop-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.shop-item:last-child { border-bottom: none; }

.shop-check {
  width: 24px; height: 24px;
  border-radius: 8px;
  border: 2px solid var(--border-solid);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .2s, border-color .2s;
}
.shop-check.checked { background: var(--primary); border-color: var(--primary); }
.shop-check.checked::after { content: '✓'; color: #fff; font-size: 13px; font-weight: 900; }

.shop-name { flex: 1; font-size: 14.5px; font-weight: 600; color: var(--text); }
.shop-qty  { font-size: 13px; font-weight: 700; color: var(--text3); }

/* ═══════════════════════════════════════
   COOKING MODE
═══════════════════════════════════════ */
.cooking-step {
  background: var(--surface2);
  border-radius: 18px;
  padding: 18px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  transition: background .2s;
}

.cooking-step.active-step {
  background: var(--primary-pale);
  border: 1.5px solid rgba(39,180,103,.26);
}

.step-num {
  width: 32px; height: 32px;
  background: var(--primary);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 900;
  color: #fff;
  flex-shrink: 0;
}

.step-text { font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.55; }

/* ═══════════════════════════════════════
   TIMER
═══════════════════════════════════════ */
.timer-circle {
  width: 140px; height: 140px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--surface2) 0%, var(--primary-pale) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 700;
  color: var(--text);
  position: relative;
  box-shadow: 0 4px 28px rgba(39,180,103,.18), inset 0 2px 8px rgba(255,255,255,.8);
}

.timer-circle::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2.5px solid transparent;
  border-top-color: rgba(39,180,103,.50);
  border-right-color: rgba(130,222,173,.28);
  animation: timerRing 3s linear infinite;
  pointer-events: none;
}

@keyframes timerRing { to { transform: rotate(360deg); } }

.timer-label {
  font-size: 11.5px;
  font-weight: 900;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .8px;
  text-align: center;
  margin-bottom: 16px;
}

.timer-btns { display: flex; gap: 10px; }

.timer-btn {
  flex: 1;
  padding: 14px;
  border-radius: 16px;
  border: none;
  font-size: 15px;
  font-weight: 900;
  font-family: var(--font-body);
  cursor: pointer;
  transition: transform .15s;
}
.timer-btn:active { transform: scale(.95); }
.timer-btn--start { background: var(--primary); color: #fff; box-shadow: 0 4px 18px rgba(39,180,103,.32); }
.timer-btn--reset { background: var(--surface2); color: var(--text2); }

/* ═══════════════════════════════════════
   NUTRITION HERO
═══════════════════════════════════════ */
.nutrition-hero {
  background: linear-gradient(150deg, #053E2A 0%, #27B467 100%);
  padding: 56px 22px 34px;
  position: relative;
  overflow: hidden;
}

.nutrition-hero::before {
  content: '';
  position: absolute;
  width: 280px; height: 280px;
  right: -80px; bottom: -100px;
  background: radial-gradient(circle, rgba(130,222,173,.30) 0%, transparent 70%);
  pointer-events: none;
}

.nutrition-hero::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 28px;
  background: var(--bg);
  border-radius: 28px 28px 0 0;
}

.nut-hero-title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 20px;
  letter-spacing: -.5px;
  position: relative;
  z-index: 1;
}

.nut-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  position: relative;
  z-index: 1;
}

.nut-stat {
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.26);
  border-radius: 18px;
  padding: 14px 10px;
  text-align: center;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: transform .2s;
}
.nut-stat:active { transform: scale(.95); }

.nut-stat-val {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}

.nut-stat-lbl {
  font-size: 9.5px;
  font-weight: 900;
  color: rgba(255,255,255,.72);
  text-transform: uppercase;
  letter-spacing: .8px;
  margin-top: 4px;
}

/* ═══════════════════════════════════════
   MEAL LOG
═══════════════════════════════════════ */
.meal-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.meal-item:last-child { border-bottom: none; }

.meal-icon {
  width: 44px; height: 44px;
  background: var(--primary-pale);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

.meal-info { flex: 1; }
.meal-name { font-size: 14.5px; font-weight: 700; color: var(--text); }
.meal-type { font-size: 12px; color: var(--text3); margin-top: 2px; font-weight: 600; text-transform: capitalize; }
.meal-cal  { font-size: 14px; font-weight: 900; color: var(--primary); }

/* ═══════════════════════════════════════
   WEEKLY CHART
═══════════════════════════════════════ */
.week-chart {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  height: 80px;
  margin-bottom: 8px;
}

.week-bar-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  height: 100%;
  justify-content: flex-end;
}

.week-bar {
  width: 100%;
  background: linear-gradient(to top, var(--primary), var(--primary-light));
  border-radius: 8px 8px 4px 4px;
  transition: height .55s cubic-bezier(.34,1.56,.64,1);
  box-shadow: 0 0 8px rgba(39,180,103,.22);
}

.week-bar--today {
  background: linear-gradient(to top, #0D7A40, #27B467);
  box-shadow: 0 0 16px rgba(39,180,103,.48);
}

.week-bar--low { background: linear-gradient(to top, #FCA5A5, #FEE2E2); box-shadow: none; }

.week-bar--h45  { height: 45%; }
.week-bar--h50  { height: 50%; }
.week-bar--h68  { height: 68%; }
.week-bar--h75  { height: 75%; }
.week-bar--h88  { height: 88%; }
.week-bar--h92  { height: 92%; }
.week-bar--h100 { height: 100%; }

.week-day { font-size: 11px; font-weight: 800; color: var(--text3); text-transform: uppercase; letter-spacing: .5px; }
.week-day--today { color: var(--primary); }

.week-goal-line { font-size: 12px; color: var(--text3); text-align: center; font-weight: 600; margin-top: 8px; }

/* ═══════════════════════════════════════
   DIVIDER & SUMMARY
═══════════════════════════════════════ */
.divider { height: 1px; background: var(--border); }
.divider--spaced { margin: 16px 0; }

.summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  font-size: 14px;
  border-bottom: 1px solid var(--border);
}
.summary-row:last-child { border-bottom: none; }
.summary-label { color: var(--text2); font-weight: 600; }
.summary-val   { font-weight: 800; color: var(--text); }
.summary-val--primary { color: var(--primary); }
.summary-val--green   { color: var(--primary); }

/* ═══════════════════════════════════════
   PROFILE HEADER
═══════════════════════════════════════ */
.profile-header {
  background: linear-gradient(150deg, #053E2A 0%, #27B467 100%);
  padding: 58px 22px 38px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.profile-header::before {
  content: '';
  position: absolute;
  width: 300px; height: 300px;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(130,222,173,.22) 0%, transparent 70%);
  pointer-events: none;
}

.profile-header::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 28px;
  background: var(--bg);
  border-radius: 28px 28px 0 0;
}

.avatar {
  width: 88px; height: 88px;
  background: rgba(255,255,255,.22);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  border: 3px solid rgba(255,255,255,.42);
  box-shadow: 0 8px 32px rgba(0,0,0,.16);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  position: relative;
  z-index: 1;
  overflow: hidden;
  border: none;
}

.profile-avatar-button {
  cursor: pointer;
  padding: 0;
  appearance: none;
  position: relative;
}

.avatar-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.avatar-fallback-icon {
  display: grid;
  place-items: center;
}

.avatar-upload-chip {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 50%;
  background: rgba(17,17,17,.82);
  color: #fff;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.22);
}

.profile-name {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.5px;
  position: relative;
  z-index: 1;
}

.profile-email { font-size: 13.5px; color: rgba(255,255,255,.7); margin-top: 4px; font-weight: 500; position: relative; z-index: 1; }
.profile-email a { color: inherit; text-decoration: none; }

/* ═══════════════════════════════════════
   SETTINGS LIST
═══════════════════════════════════════ */
.setting-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .15s;
  border-radius: 4px;
}
.setting-item:last-child { border-bottom: none; }

.setting-icon {
  width: 40px; height: 40px;
  background: var(--primary-pale);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.setting-icon--danger { background: #FFF1F2; }

.setting-info { flex: 1; }
.setting-label { font-size: 14.5px; font-weight: 700; color: var(--text); }
.setting-label--danger { color: #E11D48; }
.setting-value { font-size: 12.5px; color: var(--text3); margin-top: 2px; font-weight: 500; }
.setting-arrow { font-size: 20px; color: var(--text3); font-weight: 300; }
.setting-arrow--danger { color: #E11D48; }
.setting-item--danger .setting-label { color: #E11D48; }

/* ═══════════════════════════════════════
   MODALS
═══════════════════════════════════════ */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(13,30,21,.44);
  z-index: 200;
  align-items: flex-end;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.modal-overlay.open { display: flex; animation: overlayIn .25s ease; }

@keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }

.modal-sheet {
  background: var(--glass-heavy);
  border-radius: 36px 36px 0 0;
  padding: 12px 24px 48px;
  width: 100%;
  max-height: 88dvh;
  overflow-y: auto;
  -webkit-backdrop-filter: blur(32px);
  backdrop-filter: blur(32px);
  animation: sheetIn .3s cubic-bezier(.25,.46,.45,.94);
  border-top: 1.5px solid rgba(255,255,255,.92);
  box-shadow: 0 -8px 60px rgba(0,0,0,.14);
}
.modal-sheet::-webkit-scrollbar { display: none; }

@keyframes sheetIn {
  from { transform: translateY(60px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.modal-handle { width: 40px; height: 5px; border-radius: 3px; background: var(--border-solid); margin: 0 auto 20px; }

.modal-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 24px;
  letter-spacing: -.4px;
}

.meal-type-row { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }

.meal-type-btn {
  padding: 9px 16px;
  border-radius: 999px;
  border: 2px solid var(--border);
  background: var(--surface2);
  font-size: 13.5px;
  font-weight: 800;
  font-family: var(--font-body);
  color: var(--text2);
  cursor: pointer;
  transition: all .2s;
}
.meal-type-btn.selected { background: var(--primary); color: #fff; border-color: var(--primary); box-shadow: 0 4px 14px rgba(39,180,103,.30); }

.form-textarea { resize: vertical; min-height: 88px; font-family: var(--font-body); line-height: 1.5; }

/* ═══════════════════════════════════════
   CHAT OVERLAY
═══════════════════════════════════════ */
.chat-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  z-index: 300;
  transform: translateY(100%);
  transition: transform .38s cubic-bezier(.25,.46,.45,.94);
  max-width: none;
  left: 50%;
  translate: -50% 0;
}
.chat-overlay.open { transform: translateY(0); }

.chat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 56px 22px 16px;
  background: linear-gradient(135deg, #053E2A, #27B467);
  flex-shrink: 0;
}

.chat-header-avatar {
  width: 48px; height: 48px;
  background: rgba(255,255,255,.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255,255,255,.32);
}

.chat-header-info { flex: 1; }
.chat-header-title { font-size: 17px; font-weight: 900; color: #fff; }
.chat-header-sub { font-size: 12.5px; color: rgba(255,255,255,.74); font-weight: 500; }

.chat-close-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.2);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
}
.chat-close-btn:active { background: rgba(255,255,255,.36); }

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.chat-messages::-webkit-scrollbar { display: none; }

.chat-bubble {
  max-width: 82%;
  padding: 12px 16px;
  border-radius: 22px;
  font-size: 14.5px;
  line-height: 1.52;
  font-weight: 500;
}

.chat-bubble--ai {
  background: var(--glass-heavy);
  color: var(--text);
  border-radius: 4px 22px 22px 22px;
  align-self: flex-start;
  border: 1.5px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.chat-bubble--user {
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: #fff;
  border-radius: 22px 22px 4px 22px;
  align-self: flex-end;
  box-shadow: 0 4px 18px rgba(39,180,103,.32);
}

.chat-bubble--loading {
  background: var(--surface);
  border: 1.5px solid var(--border);
  color: var(--text3);
  border-radius: 4px 22px 22px 22px;
  align-self: flex-start;
}

.chat-suggestions {
  display: flex;
  overflow-x: auto;
  gap: 8px;
  padding: 8px 18px 10px;
  flex-shrink: 0;
}
.chat-suggestions::-webkit-scrollbar { display: none; }

.chat-sugg-chip {
  display: inline-flex;
  align-items: center;
  padding: 9px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-body);
  background: var(--surface2);
  border: 1.5px solid var(--border);
  color: var(--text2);
  cursor: pointer;
  white-space: nowrap;
  transition: all .2s;
  flex-shrink: 0;
}
.chat-sugg-chip:active { background: var(--primary-pale); color: var(--primary-d); border-color: rgba(39,180,103,.3); }

.chat-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px 32px;
  border-top: 1px solid var(--border);
  background: rgba(255,255,255,.96);
  flex-shrink: 0;
}

.chat-input {
  flex: 1;
  padding: 12px 18px;
  border-radius: 999px;
  border: 2px solid var(--border);
  font-size: 15px;
  font-family: var(--font-body);
  font-weight: 500;
  background: var(--surface2);
  outline: none;
  transition: border-color .2s, background .2s;
}
.chat-input:focus { border-color: var(--primary); background: #fff; }

.chat-send-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--primary);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 18px rgba(39,180,103,.38);
  transition: transform .15s;
}
.chat-send-btn:active { transform: scale(.9); }

.chat-mic-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--surface2);
  color: var(--text2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all .2s;
  position: relative;
  overflow: visible;
}
.chat-mic-btn.listening { background: var(--primary-pale); color: var(--primary); border-color: rgba(39,180,103,.3); }

.voice-animated-btn::before,
.voice-animated-btn::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  border: 1.5px solid rgba(151, 211, 55, .36);
  opacity: 0;
  transform: scale(.88);
  pointer-events: none;
}

.voice-animated-btn.listening::before,
.voice-animated-btn.listening::after {
  opacity: 1;
  animation: voiceWave 1.6s ease-out infinite;
}

.voice-animated-btn.listening::after {
  animation-delay: .55s;
}

.voice-animated-btn[data-recording-label]:not([data-recording-label=""]).listening {
  padding-right: 68px;
}

.voice-animated-btn[data-recording-label]:not([data-recording-label=""]).listening {
  box-shadow: 0 10px 24px rgba(151, 211, 55, .22);
}

.voice-animated-btn[data-recording-label]:not([data-recording-label=""]).listening::after {
  content: attr(data-recording-label);
  inset: auto auto -28px 50%;
  transform: translateX(-50%);
  min-width: max-content;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(151, 211, 55, .26);
  background: rgba(255,255,255,.96);
  color: #315116;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  animation: none;
  opacity: 1;
}

@keyframes voiceWave {
  0% {
    opacity: .55;
    transform: scale(.92);
  }
  100% {
    opacity: 0;
    transform: scale(1.34);
  }
}

/* ═══════════════════════════════════════
   CHAT FAB
═══════════════════════════════════════ */
.chat-fab {
  position: fixed;
  bottom: calc(var(--nav-h) + 34px);
  right: 18px;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 28px rgba(39,180,103,.44);
  z-index: 99;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1);
  animation: fabIn .5s cubic-bezier(.34,1.56,.64,1) .2s both;
}
.chat-fab.nav-off { display: none; }
.chat-fab:active { transform: scale(.9); }

@keyframes fabIn {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* ═══════════════════════════════════════
   CAMERA OVERLAY
═══════════════════════════════════════ */
.camera-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 400;
  flex-direction: column;
  max-width: none;
  left: 50%;
  translate: -50% 0;
}
.camera-overlay.open { display: flex; }

.camera-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 56px 22px 16px;
  background: rgba(0,0,0,.5);
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 2;
}

.camera-title { font-size: 18px; font-weight: 800; color: #fff; font-family: var(--font-body); }
.camera-close { width: 36px; height: 36px; border-radius: 50%; border: none; background: rgba(255,255,255,.2); color: #fff; font-size: 16px; cursor: pointer; }

.camera-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.camera-frame { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 2; }

.camera-frame-box { width: 280px; height: 280px; position: relative; display: flex; align-items: center; justify-content: center; }

.camera-frame-corner { position: absolute; width: 28px; height: 28px; border-color: #fff; border-style: solid; }
.camera-frame-corner--tl { top: 0; left: 0;    border-width: 3px 0 0 3px; border-radius: 6px 0 0 0; }
.camera-frame-corner--tr { top: 0; right: 0;   border-width: 3px 3px 0 0; border-radius: 0 6px 0 0; }
.camera-frame-corner--bl { bottom: 0; left: 0;  border-width: 0 0 3px 3px; border-radius: 0 0 0 6px; }
.camera-frame-corner--br { bottom: 0; right: 0; border-width: 0 3px 3px 0; border-radius: 0 0 6px 0; }

.camera-scan-line {
  position: absolute;
  left: 10%; right: 10%;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--primary), transparent);
  box-shadow: 0 0 10px var(--primary);
  animation: scanLine 2.2s ease-in-out infinite;
}

@keyframes scanLine {
  0%   { top: 10%; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { top: 90%; opacity: 0; }
}

.camera-hint { position: absolute; bottom: -36px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.85); font-size: 13px; font-weight: 600; white-space: nowrap; font-family: var(--font-body); }

.camera-bottom { position: absolute; bottom: 48px; left: 0; right: 0; display: flex; align-items: center; justify-content: center; z-index: 2; }

.camera-capture-btn {
  width: 72px; height: 72px;
  border-radius: 50%;
  border: 4px solid rgba(255,255,255,.6);
  background: rgba(255,255,255,.25);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .15s;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.camera-capture-btn:active { transform: scale(.9); }
.camera-capture-inner { width: 52px; height: 52px; border-radius: 50%; background: #fff; }

.camera-processing {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  z-index: 3;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.camera-processing.visible { display: flex; }

/* Captured image shown blurred behind the analyzing indicator */
.camera-processing-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(14px);
  transform: scale(1.06); /* hide blur edges */
  opacity: 0.9;
}

/* Dark gradient scrim over the blurred image so text stays readable */
.camera-processing-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.30) 0%,
    rgba(0,0,0,.60) 50%,
    rgba(0,0,0,.50) 100%
  );
}

/* Centred content on top of blurred image */
.camera-processing-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.camera-processing-icon { animation: spin 1.2s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.camera-processing-text {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  font-family: var(--font-body);
  letter-spacing: .3px;
  text-shadow: 0 2px 8px rgba(0,0,0,.5);
}

/* Animated dots handled by JS to avoid non-compositable content animation */

.camera-canvas { display: none; }

/* ── Dedicated scan/analyze overlay ─────────────────────────────────── */
#scan-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
}
#scan-overlay.active { display: flex; }
#scan-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(18px);
  transform: scale(1.08);
}
#scan-scrim {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.58);
}
#scan-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
#scan-icon { animation: spin 1.2s linear infinite; }
#scan-text {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  font-family: var(--font-body);
  letter-spacing: 0.3px;
  text-shadow: 0 2px 10px rgba(0,0,0,.6);
}

/* ═══════════════════════════════════════
   TOAST
═══════════════════════════════════════ */
.toast {
  position: fixed;
  bottom: calc(var(--nav-h) + 40px);
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(13,30,21,.94);
  color: #fff;
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font-body);
  z-index: 500;
  opacity: 0;
  transition: opacity .25s, transform .25s;
  max-width: 320px;
  text-align: center;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  white-space: nowrap;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ═══════════════════════════════════════
   RECIPE DETAIL OVERLAY
═══════════════════════════════════════ */
.recipe-detail-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 200;
  display: none;
  flex-direction: column;
  max-width: none;
  left: 50%;
  translate: -50% 0;
  overflow-y: auto;
}
.recipe-detail-overlay::-webkit-scrollbar { display: none; }
.recipe-detail-overlay.open { display: flex; animation: screenIn .3s ease; }

.recipe-detail-hero {
  font-size: 96px;
  text-align: center;
  padding: 80px 24px 32px;
  background: linear-gradient(135deg, var(--primary-pale) 0%, var(--surface2) 100%);
  position: relative;
}

.recipe-detail-back {
  position: absolute;
  top: 56px; left: 18px;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--surface);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 20px;
  box-shadow: var(--shadow-sm);
}

.recipe-detail-content { padding: 22px 20px 32px; flex: 1; }

.recipe-detail-title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.5px;
  margin-bottom: 8px;
}

.recipe-detail-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }

.recipe-detail-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: var(--surface2);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text2);
}

.recipe-section-title {
  font-size: 11px;
  font-weight: 900;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 20px 0 10px;
}

.recipe-step-item { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.recipe-step-item:last-child { border-bottom: none; }

.recipe-step-num {
  width: 26px; height: 26px;
  background: var(--primary);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 900;
  color: #fff;
  flex-shrink: 0;
  margin-top: 1px;
}

.recipe-step-text { font-size: 14px; color: var(--text2); line-height: 1.55; font-weight: 500; }

/* ═══════════════════════════════════════
   RECIPE CARD ACTIONS
═══════════════════════════════════════ */
.recipe-save-btn {
  position: absolute;
  top: 10px; right: 10px;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.92);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform .2s;
  z-index: 2;
  box-shadow: var(--shadow-sm);
}
.recipe-save-btn:active { transform: scale(.85); }
.recipe-save-btn.saved svg { fill: var(--primary); stroke: var(--primary); }

.rating-row { display: flex; align-items: center; gap: 5px; margin: 4px 0; }
.stars { display: flex; gap: 1px; }
.star {
  font-size: 14px;
  cursor: pointer;
  color: var(--border-solid);
  transition: color .1s;
  -webkit-user-select: none;
  user-select: none;
  line-height: 1;
}
.star.filled { color: #F59E0B; }
.rating-val   { font-size: 12px; font-weight: 700; color: var(--text2); }
.rating-count { font-size: 11px; color: var(--text3); }

.recipe-actions { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }

.recipe-share-btn {
  padding: 8px 12px;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  background: var(--surface2);
  color: var(--text2);
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-body);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all .15s;
}
.recipe-share-btn:active { border-color: var(--primary); color: var(--primary); background: var(--primary-pale); }

.community-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--primary-pale);
  color: var(--primary-d);
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 4px;
}

.recipe-author { font-size: 12px; color: var(--text3); margin-bottom: 2px; font-weight: 500; }

/* recipe-results grid — full-width cards in the recipes screen */
#recipe-results {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 16px 18px;
}
#recipe-results .recipe-card { width: 100%; }
#recipe-results .empty-state { grid-column: 1 / -1; }

/* recipe card body classes (JS-generated) */
.recipe-name   { font-size: 13px; font-weight: 800; color: var(--text); line-height: 1.3; margin-bottom: 4px; }
.recipe-meta-item { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--text3); font-weight: 600; }
.recipe-tags   { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 5px; }
.recipe-tag    { background: var(--primary-pale); color: var(--primary-d); border-radius: 999px; padding: 2px 8px; font-size: 10px; font-weight: 800; }
.recipe-img-badge {
  position: absolute; bottom: 8px; right: 8px;
  background: rgba(13,30,21,.55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: #fff; border-radius: 999px;
  padding: 3px 8px; font-size: 10px; font-weight: 700;
}

/* btn-filled — used in recipe Cook Now button */
.btn-filled {
  flex: 1;
  padding: 9px 12px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 800;
  font-family: var(--font-body);
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  box-shadow: 0 4px 14px rgba(39,180,103,.28);
}
.btn-filled:active { transform: scale(.96); }

/* empty state */
.empty-state { padding: 48px 20px; text-align: center; }
.empty-title  { font-size: 17px; font-weight: 800; color: var(--text2); margin-bottom: 6px; }
.empty-sub    { font-size: 14px; color: var(--text3); font-weight: 500; }

/* ── Recent recipe list cards (home screen) ── */
.recent-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--glass-heavy);
  transition: background .15s;
  cursor: pointer;
}
.recent-card:last-child { border-bottom: none; }
.recent-card:active { background: var(--surface2); }

.recent-icon {
  width: 52px;
  height: 52px;
  border-radius: 18px;
  background: var(--primary-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  flex-shrink: 0;
}

.recent-info { flex: 1; min-width: 0; }
.recent-name { font-size: 15px; font-weight: 800; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recent-meta { font-size: 12px; color: var(--text3); font-weight: 600; margin-top: 3px; }

.recent-cook-btn {
  flex-shrink: 0;
  padding: 8px 16px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 800;
  font-family: var(--font-body);
  cursor: pointer;
  transition: transform .15s;
  box-shadow: 0 3px 12px rgba(39,180,103,.3);
}
.recent-cook-btn:active { transform: scale(.93); }

/* ═══════════════════════════════════════
   COOKING INGREDIENTS PANEL
═══════════════════════════════════════ */
.cooking-ing-title { font-size: 11px; font-weight: 900; color: var(--text2); text-transform: uppercase; letter-spacing: .8px; margin-bottom: 10px; }
.cooking-ing-list { display: flex; flex-direction: column; gap: 0; }
.cooking-ing-item { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; padding: 8px 0; border-bottom: 1px solid var(--border); color: var(--text2); }
.cooking-ing-item:last-child { border-bottom: none; }
.cooking-ing-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); flex-shrink: 0; }

/* ═══════════════════════════════════════
   FUTURISTIC / ANIMATION SYSTEM
═══════════════════════════════════════ */

.text-gradient {
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 50%, var(--primary-light) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% auto;
  animation: gradientShift 4.5s ease infinite;
}

@keyframes gradientShift {
  0%   { background-position: 0% center; }
  50%  { background-position: 100% center; }
  100% { background-position: 0% center; }
}

.float-icon {
  display: inline-block;
  animation: floatBounce 3.5s ease-in-out infinite;
}

@keyframes floatBounce {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%       { transform: translateY(-9px) rotate(2deg); }
}

.typewriter-text {
  display: inline-block;
  white-space: nowrap;
  transform-origin: left center;
  will-change: transform;
  animation: typeIn .7s steps(22, end) .3s both;
}

@keyframes typeIn {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}

.shimmer-card { position: relative; overflow: hidden; }

.shimmer-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 45%; height: 100%;
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.13) 50%, rgba(255,255,255,0) 100%);
  will-change: transform;
  animation: shimmerPass 5.5s ease infinite;
  pointer-events: none;
}

@keyframes shimmerPass {
  0%   { transform: translateX(-200%); }
  65%  { transform: translateX(300%); }
  100% { transform: translateX(300%); }
}

.neon-card {
  border: 1.5px solid var(--border);
  animation: neonPulse 3.5s ease-in-out infinite;
}

@keyframes neonPulse {
  0%, 100% { box-shadow: var(--shadow-card); }
  50%       { box-shadow: var(--shadow-card), 0 0 22px 3px rgba(39,180,103,.16); }
}

.live-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--primary);
  margin-right: 6px;
  vertical-align: middle;
  animation: livePulse 2.2s ease-out infinite;
}

@keyframes livePulse {
  0%   { box-shadow: 0 0 0 0 rgba(39,180,103,.7); }
  70%  { box-shadow: 0 0 0 8px rgba(39,180,103,0); }
  100% { box-shadow: 0 0 0 0 rgba(39,180,103,0); }
}

.stat-pop { animation: statPop .55s cubic-bezier(.34,1.56,.64,1) both; }

@keyframes statPop {
  from { transform: scale(.5); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}

.card { animation: cardReveal .38s cubic-bezier(.25,.46,.45,.94) both; }

@keyframes cardReveal {
  from { transform: translateY(16px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.section .card:nth-child(1) { animation-delay: .05s; }
.section .card:nth-child(2) { animation-delay: .11s; }
.section .card:nth-child(3) { animation-delay: .17s; }
.section .card:nth-child(4) { animation-delay: .23s; }

/* =========================================================
   2026 UI REFRESH OVERRIDES
   Softer nutrition-app direction inspired by the references,
   but not copied from them.
========================================================= */

:root {
  --primary: #9ad93a;
  --primary-d: #5b8f12;
  --primary-light: #d8f19b;
  --primary-pale: #f1f8df;
  --accent: #ff9f43;
  --bg: #f5f4ef;
  --surface: rgba(255,255,255,.82);
  --surface-solid: #ffffff;
  --surface2: #fbfaf6;
  --glass: rgba(255,255,255,.72);
  --glass-heavy: rgba(255,255,255,.9);
  --text: #171717;
  --text2: #55524a;
  --text3: #9b968c;
  --border: rgba(23,23,23,.08);
  --border-solid: #ece7dc;
  --shadow-sm: 0 10px 24px rgba(25,25,25,.06);
  --shadow: 0 20px 50px rgba(30,30,30,.08);
  --shadow-lg: 0 32px 70px rgba(30,30,30,.12);
  --shadow-card: 0 14px 34px rgba(30,30,30,.06);
  --nav-h: 82px;
  --radius: 26px;
  --radius-lg: 34px;
  --radius-xl: 42px;
}

html, body {
  background:
    radial-gradient(circle at top left, rgba(207,234,156,.58), transparent 28%),
    radial-gradient(circle at top right, rgba(255,209,179,.32), transparent 24%),
    linear-gradient(180deg, #efeee8 0%, #f8f7f2 52%, #f4f3ee 100%);
}

body::before {
  background:
    radial-gradient(circle at 12% 9%, rgba(170, 222, 94, .20), transparent 24%),
    radial-gradient(circle at 85% 12%, rgba(255, 174, 122, .18), transparent 18%),
    radial-gradient(circle at 50% 100%, rgba(210, 225, 182, .25), transparent 30%);
  animation: none;
}

#app {
  width: 100%;
  height: calc(100vh - 24px);
  height: min(100dvh - 24px, 932px);
  margin: 12px auto;
  background:
    linear-gradient(180deg, rgba(255,255,255,.72) 0%, rgba(250,248,242,.96) 28%, rgba(247,246,240,1) 100%);
  border-radius: 38px;
  border: 1px solid rgba(255,255,255,.72);
  box-shadow:
    0 28px 90px rgba(20,20,20,.14),
    inset 0 1px 0 rgba(255,255,255,.85);
}

.screen {
  padding-bottom: calc(var(--nav-h) + 56px);
}
.screen::-webkit-scrollbar { display: none; }

.screen.active {
  gap: 14px;
}

#auth-screen {
  background:
    radial-gradient(circle at 14% 18%, rgba(178,224,93,.26), transparent 24%),
    radial-gradient(circle at 86% 16%, rgba(255,189,139,.18), transparent 20%),
    linear-gradient(180deg, #fbfaf6 0%, #f2f4ea 100%);
}

#auth-screen::before {
  background:
    radial-gradient(circle at 20% 16%, rgba(180, 223, 107, .18), transparent 22%),
    radial-gradient(circle at 82% 22%, rgba(255, 196, 154, .16), transparent 20%),
    linear-gradient(180deg, transparent 0%, rgba(255,255,255,.32) 100%);
}

.auth-hero {
  align-items: flex-start;
  justify-content: flex-end;
  min-height: 40%;
  padding: 56px 26px 18px;
  text-align: left;
  gap: 10px;
}

.auth-logo-wrap {
  width: 72px;
  height: 72px;
  margin-bottom: 6px;
  background: linear-gradient(145deg, #b8dd67 0%, #8dca2a 100%);
  border-radius: 24px;
  border: none;
  box-shadow: 0 18px 30px rgba(125, 175, 46, .24);
}

.auth-title {
  color: var(--text);
  font-size: 46px;
  line-height: .94;
  letter-spacing: -1.8px;
  max-width: 280px;
  text-shadow: none;
}

.auth-subtitle {
  color: var(--text2);
  font-size: 15px;
  max-width: 220px;
  margin-top: 0;
}

.auth-card {
  background: rgba(255,255,255,.68);
  border-radius: 34px 34px 0 0;
  padding: 24px 22px 34px;
  border-top: 1px solid rgba(255,255,255,.86);
  box-shadow: 0 -24px 40px rgba(30,30,30,.08);
}

.auth-tabs {
  background: #f3f0e9;
  padding: 6px;
  border-radius: 18px;
  border: 1px solid rgba(23,23,23,.05);
}

.auth-tab.active {
  background: #fff;
  color: var(--text);
  box-shadow: 0 8px 18px rgba(20,20,20,.07);
}

.form-label {
  color: #7c776d;
}

.form-input,
.chat-input,
.select-group .form-input,
select.form-input {
  border: 1px solid rgba(23,23,23,.08);
  background: rgba(255,255,255,.74);
  border-radius: 18px;
  color: var(--text);
  min-height: 56px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}

.form-input:focus,
.chat-input:focus,
select.form-input:focus {
  border-color: rgba(154,217,58,.62);
  box-shadow: 0 0 0 4px rgba(154,217,58,.12);
}

.btn-primary,
.generate-btn,
.btn-filled,
.recent-cook-btn,
.timer-btn--start,
.chat-send-btn {
  background: linear-gradient(135deg, #a7dc49 0%, #88c52b 100%);
  color: #17210d;
  border-radius: 18px;
  box-shadow: 0 14px 22px rgba(142, 189, 53, .28);
}

.btn-primary,
.generate-btn {
  min-height: 56px;
}

.btn-danger {
  background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
  color: #fff;
  box-shadow: 0 14px 24px rgba(17,24,39,.24);
}

.btn-guest,
.generate-btn--outline,
.recipe-share-btn,
.timer-btn--reset {
  background: rgba(255,255,255,.72);
  color: var(--text);
  border: 1px solid rgba(23,23,23,.08);
  box-shadow: none;
}

.auth-link-btn {
  width: 100%;
  margin-top: 12px;
  background: transparent;
  border: none;
  color: #4f7b17;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.auth-link-btn--secondary {
  color: #6b675f;
}

.auth-form-note {
  color: #6f6a62;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 14px;
}

.home-topbar,
.topbar {
  padding: 24px 20px 0;
  background: transparent;
  border-bottom: none;
  position: relative;
  top: auto;
  z-index: 2;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.home-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.home-greeting-small,
.nutrition-hero-date {
  color: var(--text3);
  font-size: 13px;
  font-weight: 700;
}

.home-greeting-name {
  font-family: var(--font-body);
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -1px;
}

.home-icon-btn,
.topbar-action,
.recipe-detail-back,
.chat-close-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(23,23,23,.06);
  box-shadow: var(--shadow-sm);
}

.topbar-title,
.nut-hero-title,
.profile-name,
.card-title--section {
  font-family: var(--font-body);
  font-weight: 900;
  letter-spacing: -1px;
}

.topbar-title {
  font-size: 28px;
}

.progress-card,
.nutrition-hero,
.profile-header,
.greeting-banner {
  margin: 0 18px;
  border-radius: 30px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.8);
  box-shadow: var(--shadow-card);
}

.progress-card {
  background: linear-gradient(140deg, #cfe98a 0%, #b7dd5e 100%);
  padding: 18px;
}

.progress-card-title {
  font-family: var(--font-body);
  font-size: 34px;
  line-height: .96;
  letter-spacing: -1.4px;
  color: #1f2a10;
}

.progress-card-tag {
  background: rgba(255,255,255,.52);
  color: #42511d;
  border: none;
}

.progress-ring-wrap {
  background: rgba(255,255,255,.62);
  border-radius: 50%;
  padding: 8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}

.stat-grid {
  padding: 0 18px;
  gap: 12px;
}

.stat-mini,
.meal-row-card,
.cal-strip-wrap,
.card,
.recipe-card,
.setting-item,
.meal-item,
.inv-item,
.shop-item,
.cooking-step,
.budget-widget,
.summary-row {
  background: rgba(255,255,255,.68);
  border: 1px solid rgba(23,23,23,.06);
  box-shadow: var(--shadow-card);
}

.stat-mini {
  border-radius: 24px;
  padding: 18px;
}

.stat-mini-label,
.meal-type,
.meal-row-cal,
.recent-meta,
.summary-label,
.setting-value,
.inv-qty,
.shop-qty {
  color: var(--text3);
}

.stat-mini-val {
  font-size: 34px;
  letter-spacing: -1px;
}

.cal-strip-wrap {
  margin: 0 18px;
  padding: 18px;
  border-radius: 26px;
}

.cal-strip-header {
  margin-bottom: 14px;
}

.cal-strip-month {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -1px;
}

.cal-strip-nav button {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(23,23,23,.06);
}

.cal-day {
  min-width: 48px;
  padding: 12px 0;
  border-radius: 18px;
  background: rgba(247,247,243,.9);
}

.cal-day.active,
.cal-day--today {
  background: #d1eb8b;
  color: #1f2a10;
}

.home-meals-section {
  padding: 0 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.meal-section-title {
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -1px;
  margin: 10px 2px 2px;
}

.meal-row-card {
  border-radius: 24px;
  padding: 14px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
}

.meal-row-title {
  font-size: 16px;
  font-weight: 800;
}

.meal-row-img {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: linear-gradient(135deg, #faf8f2 0%, #ece8dc 100%);
  display: grid;
  place-items: center;
  font-size: 28px;
}

.meal-row-add,
.btn-icon,
.shop-check,
.nav-fab-circle {
  display: grid;
  place-items: center;
}

.meal-row-add {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(23,23,23,.06);
  font-size: 22px;
  color: var(--text);
}

.section {
  padding: 0 18px;
  gap: 14px;
}

.section + .section {
  margin-top: 2px;
}

.card {
  padding: 18px;
  border-radius: 28px;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.card-title {
  color: var(--text3);
  font-size: 11px;
}

.ingredient-input-row,
.select-group,
.timer-btns,
.topbar-actions {
  gap: 10px;
}

.btn-icon {
  width: 56px;
  min-width: 56px;
  height: 56px;
  border-radius: 18px;
  border: 1px solid rgba(23,23,23,.08);
  background: rgba(255,255,255,.74);
  color: var(--text);
}

.filter-scroll {
  padding: 8px 18px 2px;
}

.filter-chip,
.chat-sugg-chip,
.meal-type-btn,
.recipe-detail-badge,
.recipe-tag,
.budget-widget-chip,
.expiry-badge {
  background: #f6f5ef;
  border: 1px solid rgba(23,23,23,.06);
  color: var(--text2);
}

.filter-chip.active,
.meal-type-btn.selected {
  background: #d6ef97;
  color: #24310f;
  border-color: transparent;
  box-shadow: none;
}

#recipe-results {
  grid-template-columns: 1fr;
  gap: 14px;
  padding: 6px 18px 0;
}

.recipe-card {
  border-radius: 28px;
  overflow: hidden;
}

.recipe-img,
.recipe-detail-hero {
  background: linear-gradient(135deg, #eef4dc 0%, #f7f4ea 100%);
}

.recipe-name,
.recent-name,
.setting-label,
.summary-val {
  color: var(--text);
}

.kit-tabs {
  margin: 0 18px;
  padding: 6px;
  background: rgba(255,255,255,.68);
  border: 1px solid rgba(23,23,23,.06);
  border-radius: 20px;
}

.kit-tab {
  flex: 1;
  border-radius: 14px;
  padding: 13px 14px;
  border-bottom: none;
}

.kit-tab.active {
  background: #d8ef9e;
  color: #24310f;
}

.nutrition-hero,
.profile-header,
.greeting-banner {
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.32), transparent 22%),
    linear-gradient(145deg, #cde687 0%, #b4db5a 100%);
  padding: 22px 20px;
}

.nut-hero-title,
.profile-name {
  color: #1f2a10;
  margin-bottom: 8px;
}

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

.nut-stat {
  background: rgba(255,255,255,.56);
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 22px;
  padding: 16px 12px;
}

.nut-stat-val {
  color: var(--text);
  font-family: var(--font-body);
  font-size: 26px;
  font-weight: 900;
}

.nut-stat-lbl {
  color: #52612c;
}

.week-chart {
  height: 110px;
}

.week-bar {
  border-radius: 999px;
  background: linear-gradient(to top, #87c429, #c8e77e);
}

.week-bar--today {
  background: linear-gradient(to top, #5d8f12, #a6d63f);
}

.profile-email {
  color: rgba(31, 42, 16, .76);
}

.avatar {
  background: rgba(255,255,255,.44);
  border-color: rgba(255,255,255,.72);
  box-shadow: 0 14px 30px rgba(80, 110, 20, .16);
}

.setting-item,
.meal-item,
.inv-item,
.shop-item {
  border-radius: 20px;
  padding: 14px 16px;
  border-bottom: none;
}

.setting-item + .setting-item,
.meal-item + .meal-item,
.inv-item + .inv-item,
.shop-item + .shop-item,
.summary-row + .summary-row {
  margin-top: 10px;
}

.setting-icon,
.meal-icon,
.inv-icon {
  background: linear-gradient(135deg, #eef6dd 0%, #d7eea5 100%);
}

.summary-row {
  border-radius: 18px;
  padding: 12px 14px;
  border-bottom: none;
}

.bottom-nav {
  bottom: max(12px, env(safe-area-inset-bottom));
  width: calc(100% - 28px);
  max-width: none;
  height: var(--nav-h);
  padding: 0 10px;
  background: rgba(255,255,255,.76);
  border: 1px solid rgba(23,23,23,.06);
  box-shadow: 0 18px 40px rgba(30,30,30,.12);
}

.nav-btn {
  gap: 5px;
}

.nav-icon {
  width: 36px;
  height: 36px;
}

.nav-btn.active .nav-icon {
  background: #edf6d5;
  filter: none;
}

.nav-label {
  font-size: 11px;
}

.nav-fab-circle {
  width: 58px;
  height: 58px;
  border-radius: 20px;
  background: linear-gradient(135deg, #9ed941 0%, #84c223 100%);
  box-shadow: 0 16px 30px rgba(136, 191, 33, .36);
  transform: translateY(-10px);
}

.nav-btn--fab .nav-label {
  display: none;
}

.chat-fab {
  bottom: calc(var(--nav-h) + 28px + env(safe-area-inset-bottom));
  right: 18px;
  width: 56px;
  height: 56px;
  background: #171717;
  color: #fff;
  box-shadow: 0 16px 32px rgba(23,23,23,.22);
}

.modal-overlay,
.chat-overlay,
.camera-overlay,
.recipe-detail-overlay {
  background: rgba(15,15,15,.36);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.chat-overlay,
.camera-overlay,
.recipe-detail-overlay {
  width: 100%;
  max-width: none;
  margin: 12px auto;
  inset: 12px auto 12px 50%;
  border-radius: 34px;
  border: 1px solid rgba(255,255,255,.55);
  overflow: hidden;
}

.chat-header {
  background: linear-gradient(145deg, #d4eb90 0%, #b6dc61 100%);
  padding: 22px 18px 14px;
}

.chat-header-title,
.chat-header-sub {
  color: #1f2a10;
}

.chat-messages,
.chat-input-row {
  background: #f7f6f0;
}

.chat-bubble--ai {
  background: rgba(255,255,255,.82);
}

.chat-bubble--user {
  background: #171717;
  color: #fff;
  box-shadow: none;
}

.modal-sheet {
  background: #faf9f4;
  border-radius: 30px 30px 0 0;
  padding-bottom: 40px;
}

.recipe-detail-content {
  background: #faf9f4;
  padding-bottom: 120px;
}

.toast {
  bottom: calc(var(--nav-h) + 98px);
  background: rgba(23,23,23,.92);
}

@media (max-width: 520px) {
  #app {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    margin: 0;
    border-radius: 0;
    border: none;
    box-shadow: none;
  }

  .chat-overlay,
  .camera-overlay,
  .recipe-detail-overlay {
    width: 100%;
    max-width: none;
    margin: 0;
    inset: 0;
    border-radius: 0;
    border: none;
  }

  .chat-fab {
    right: 18px;
  }
}

.chip:nth-child(1) { animation: chipSlide .45s cubic-bezier(.25,.46,.45,.94) .18s both; }
.chip:nth-child(2) { animation: chipSlide .45s cubic-bezier(.25,.46,.45,.94) .28s both; }

@keyframes chipSlide {
  from { transform: translateX(-12px); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}

/* ═══════════════════════════════════════
   SUBSTITUTE, QUICK ACTIONS, MISC
═══════════════════════════════════════ */
.sub-result {
  background: var(--primary-pale);
  border: 1.5px solid rgba(39,180,103,.26);
  border-radius: 18px;
  padding: 18px;
  margin-top: 12px;
}

.sub-result-title {
  font-size: 11px;
  font-weight: 900;
  color: var(--primary-d);
  text-transform: uppercase;
  letter-spacing: .8px;
  margin-bottom: 10px;
}

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

.quick-btn {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 18px;
  padding: 16px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 700;
  font-family: var(--font-body);
  color: var(--text2);
  box-shadow: var(--shadow-sm);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}

.quick-btn:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 20px rgba(39,180,103,.14);
  transform: translateY(-2px);
}

.quick-icon {
  width: 36px; height: 36px;
  background: var(--primary-pale);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Final cascade guard for the 2026 refresh */

#app {
  width: 100%;
  height: calc(100vh - 24px);
  height: min(100dvh - 24px, 932px);
  margin: 12px auto;
  background: linear-gradient(180deg, rgba(255,255,255,.72) 0%, rgba(250,248,242,.96) 28%, rgba(247,246,240,1) 100%);
  border-radius: 38px;
  border: 1px solid rgba(255,255,255,.72);
  box-shadow: 0 28px 90px rgba(20,20,20,.14), inset 0 1px 0 rgba(255,255,255,.85);
}

.screen { padding-bottom: calc(var(--nav-h) + 56px); }

#auth-screen {
  background:
    radial-gradient(circle at 14% 18%, rgba(178,224,93,.26), transparent 24%),
    radial-gradient(circle at 86% 16%, rgba(255,189,139,.18), transparent 20%),
    linear-gradient(180deg, #fbfaf6 0%, #f2f4ea 100%);
}

.auth-hero {
  align-items: flex-start;
  justify-content: flex-end;
  text-align: left;
  min-height: 40%;
  padding: 56px 26px 18px;
}

.auth-title,
.topbar-title,
.progress-card-title,
.meal-section-title,
.nut-hero-title,
.profile-name,
.home-greeting-name {
  font-family: var(--font-body);
  font-weight: 900;
  letter-spacing: -1px;
}

.progress-card,
.nutrition-hero,
.profile-header,
.greeting-banner,
.cal-strip-wrap,
.card,
.stat-mini,
.meal-row-card,
.recipe-card,
.setting-item,
.meal-item,
.inv-item,
.shop-item {
  border-radius: 26px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(23,23,23,.06);
  box-shadow: var(--shadow-card);
}

.progress-card,
.nutrition-hero,
.profile-header,
.greeting-banner {
  margin: 0 18px;
}

.progress-card,
.nutrition-hero,
.profile-header,
.greeting-banner {
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.32), transparent 22%),
    linear-gradient(145deg, #cde687 0%, #b4db5a 100%);
}

.topbar,
.home-topbar {
  padding: 24px 20px 0;
  background: transparent;
  border-bottom: none;
  position: relative;
  top: auto;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.section { padding: 0 18px; }
.home-meals-section, .stat-grid, .filter-scroll { padding-left: 18px; padding-right: 18px; }

#recipe-results {
  grid-template-columns: 1fr;
  gap: 14px;
  padding: 6px 18px 0;
}

.kit-tabs {
  margin: 0 18px;
  padding: 6px;
  background: rgba(255,255,255,.68);
  border: 1px solid rgba(23,23,23,.06);
  border-radius: 20px;
}

.bottom-nav {
  bottom: max(12px, env(safe-area-inset-bottom));
  width: calc(100% - 28px);
  max-width: none;
  height: var(--nav-h);
  padding: 0 10px;
  background: rgba(255,255,255,.76);
  border: 1px solid rgba(23,23,23,.06);
  box-shadow: 0 18px 40px rgba(30,30,30,.12);
}

.nav-fab-circle {
  width: 58px;
  height: 58px;
  border-radius: 20px;
  background: linear-gradient(135deg, #9ed941 0%, #84c223 100%);
  box-shadow: 0 16px 30px rgba(136, 191, 33, .36);
  transform: translateY(-10px);
}

.chat-fab {
  bottom: calc(var(--nav-h) + 28px + env(safe-area-inset-bottom));
  right: 18px;
  width: 56px;
  height: 56px;
  background: #171717;
  color: #fff;
  box-shadow: 0 16px 32px rgba(23,23,23,.22);
}

.modal-overlay,
.chat-overlay,
.camera-overlay,
.recipe-detail-overlay {
  background: rgba(15,15,15,.36);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.chat-overlay,
.camera-overlay,
.recipe-detail-overlay {
  width: 100%;
  max-width: none;
  margin: 12px auto;
  inset: 12px auto 12px 50%;
  border-radius: 34px;
  border: 1px solid rgba(255,255,255,.55);
  overflow: hidden;
}

.toast {
  bottom: calc(var(--nav-h) + 98px);
  background: rgba(23,23,23,.92);
}

@media (max-width: 520px) {
  #app {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    margin: 0;
    border-radius: 0;
    border: none;
    box-shadow: none;
  }

  .chat-overlay,
  .camera-overlay,
  .recipe-detail-overlay {
    width: 100%;
    max-width: none;
    margin: 0;
    inset: 0;
    border-radius: 0;
    border: none;
  }

  .chat-fab { right: 18px; }
}

/* Tab consistency pass */

.home-user-block {
  display: flex;
  align-items: center;
  gap: 12px;
}

.home-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, #121212 0%, #3b3b3b 100%);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 16px;
  font-weight: 900;
  box-shadow: 0 10px 20px rgba(18,18,18,.18);
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}

.home-avatar .avatar-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#home-avatar-fallback {
  position: relative;
  z-index: 1;
}

.home-topbar-icons {
  display: flex;
  gap: 10px;
}

.home-greet-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.topbar-title {
  max-width: 65%;
  line-height: 1;
}

#recipes-screen .topbar-title,
#kitchen-screen .topbar-title,
#profile-screen .topbar-title {
  font-size: 30px;
}

#recipes-screen .card:first-child {
  padding: 20px;
}

.ingredient-input-row {
  display: grid;
  grid-template-columns: 1fr 56px 56px;
}

.tag-list {
  min-height: 26px;
}

.chip,
.tag {
  background: #eef4df;
  color: #435123;
  border: 1px solid rgba(67,81,35,.08);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 800;
}

.filter-scroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
}
.filter-scroll::-webkit-scrollbar { display: none; }

.filter-chip {
  border-radius: 999px;
  padding: 10px 14px;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 800;
}

.generate-btn--outline {
  background: rgba(255,255,255,.74);
}

.recipe-card,
.recipe-card--full {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 0;
  overflow: hidden;
}

.recipe-card--full .recipe-img,
.recipe-img {
  width: 112px;
  height: 100%;
  min-height: 132px;
  border-radius: 0;
  font-size: 42px;
  background: linear-gradient(145deg, #edf4dd 0%, #f6f4ea 100%);
}

.recipe-card--full .recipe-body,
.recipe-body {
  padding: 14px 14px 12px;
}

.recipe-actions {
  gap: 8px;
}

.btn-filled,
.recipe-share-btn {
  min-height: 40px;
}

.kit-panel {
  padding-top: 4px;
}

.expiry-alert,
.expiry-alert--blue {
  border-radius: 22px;
  padding: 16px 18px;
  background: linear-gradient(135deg, #f1f6e2 0%, #fcfbf5 100%);
  border: 1px solid rgba(23,23,23,.06);
  color: var(--text2);
  box-shadow: var(--shadow-card);
}

.expiry-alert--blue {
  background: linear-gradient(135deg, #eef4df 0%, #f8f7f2 100%);
}

.restock-item,
.grocery-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid rgba(23,23,23,.06);
}

.restock-item:last-child,
.grocery-item:last-child {
  border-bottom: none;
}

.restock-btn {
  border: none;
  background: #d8ef9e;
  color: #24310f;
  border-radius: 999px;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 900;
  min-width: 68px;
}

.grocery-item {
  grid-template-columns: 20px 1fr auto;
}

.grocery-check {
  width: 18px;
  height: 18px;
  accent-color: #97d337;
}

.grocery-name {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
}

.grocery-price {
  font-size: 13px;
  font-weight: 800;
  color: var(--text3);
}

.budget-list-row {
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 18px;
  border-radius: 22px;
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(23,23,23,.06);
  box-shadow: var(--shadow-card);
}

.budget-list-label,
.budget-goal,
.budget-label {
  color: var(--text3);
}

.budget-list-val,
.budget-amount,
.budget-spent {
  color: var(--text);
  font-weight: 900;
}

.budget-widget {
  padding: 2px;
  background: transparent;
  box-shadow: none;
  border: none;
}

.progress-bar--budget {
  height: 12px;
  background: #ece9dd;
  border-radius: 999px;
  overflow: hidden;
}

.progress-fill--budget {
  height: 100%;
  background: linear-gradient(90deg, #9ad93a 0%, #d6ee95 100%);
  border-radius: inherit;
}

.empty-state {
  border-radius: 26px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(23,23,23,.06);
  box-shadow: var(--shadow-card);
}

.empty-state--cooking {
  padding: 28px 20px;
}

.empty-icon {
  width: 86px;
  height: 86px;
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
  border-radius: 26px;
  background: linear-gradient(145deg, #f0f5e1 0%, #e0efb6 100%);
}

.card-title--recent {
  margin-top: 12px;
}

.session-rating {
  padding: 8px 10px;
  border-radius: 999px;
  background: #f7f4e8;
  color: var(--text2);
  font-size: 12px;
  font-weight: 900;
}

.meal-type-grid,
.macro-input-grid {
  display: grid;
  gap: 10px;
}

.meal-type-grid {
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: 18px;
}

.macro-input-grid {
  grid-template-columns: repeat(2, 1fr);
}

.meal-type-btn {
  min-height: 48px;
  justify-content: center;
  gap: 8px;
}

.generate-btn--scan {
  margin-top: 8px;
}

#nutrition-screen .section {
  gap: 16px;
}

#nutrition-screen .card:first-child,
#nutrition-screen .card:nth-child(2),
#nutrition-screen .card:nth-child(3) {
  padding: 20px;
}

.week-chart {
  align-items: end;
}

.week-bar-wrap {
  gap: 8px;
}

.week-day {
  font-size: 12px;
}

#profile-screen .card {
  padding: 16px;
}

.setting-arrow,
.setting-arrow--danger {
  align-self: center;
}

#profile-screen .setting-item {
  grid-template-columns: auto 1fr auto;
  display: grid;
}

.chat-fab {
  display: none;
}

@media (max-width: 520px) {
  .ingredient-input-row,
  .macro-input-grid,
  .meal-type-grid {
    grid-template-columns: 1fr 1fr;
  }

  .ingredient-input-row {
    grid-template-columns: 1fr 52px 52px;
  }

  .recipe-card,
  .recipe-card--full {
    grid-template-columns: 94px 1fr;
  }

  .recipe-card--full .recipe-img,
  .recipe-img {
    width: 94px;
    min-height: 124px;
    font-size: 36px;
  }
}

/* Real imagery + lucid liquid finish */

body::after {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 20% 14%, rgba(255,255,255,.48), transparent 18%),
    radial-gradient(circle at 82% 28%, rgba(255,255,255,.24), transparent 16%),
    radial-gradient(circle at 50% 82%, rgba(190,227,120,.14), transparent 26%);
  pointer-events: none;
  z-index: 0;
}

#app::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.22) 0%, transparent 18%),
    radial-gradient(circle at top right, rgba(255,255,255,.28), transparent 20%);
  pointer-events: none;
  z-index: 0;
}

.auth-card,
.card,
.cal-strip-wrap,
.progress-card,
.stat-mini,
.meal-row-card,
.nutrition-hero,
.profile-header,
.bottom-nav,
.modal-sheet,
.chat-input-row,
.chat-bubble--ai,
.chat-recipe-card,
.expiry-alert,
.setting-item,
.summary-row,
.budget-list-row {
  -webkit-backdrop-filter: blur(22px) saturate(135%);
  backdrop-filter: blur(22px) saturate(135%);
}

.card-title,
.setting-value,
.summary-label,
.meal-row-cal,
.recent-meta,
.recipe-meta-item,
.chat-recipe-meta,
.profile-email,
.budget-goal,
.budget-label,
.budget-list-label,
.inv-qty,
.grocery-price,
.meal-type {
  color: #6d685e;
}

.stat-mini-label,
.setting-label,
.meal-row-title,
.recipe-name,
.chat-recipe-name,
.profile-spotlight-name,
.active-recipe-name,
.topbar-title,
.meal-section-title,
.cal-strip-month,
.profile-name {
  color: #151515;
}

.progress-card-title,
.nut-hero-title {
  color: #18210d;
}

.progress-card-tag,
.profile-tier-badge,
.budget-widget-chip--ok,
.filter-chip.active,
.meal-type-btn.selected {
  color: #32440f;
}

.recipe-img,
.chat-recipe-icon,
.recent-icon,
.active-recipe-icon,
.meal-row-photo {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.recipe-img,
.recent-icon,
.chat-recipe-icon,
.active-recipe-icon {
  position: relative;
  overflow: hidden;
}

.recipe-img::after,
.recent-icon::after,
.chat-recipe-icon::after,
.active-recipe-icon::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(0,0,0,.12) 100%);
}

.recipe-img-badge,
.recipe-save-btn {
  position: relative;
  z-index: 1;
}

.recent-icon {
  background-color: #eef2e3;
  background-size: cover;
}

.chat-recipe-card {
  padding: 12px;
  border-radius: 22px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(23,23,23,.06);
  box-shadow: var(--shadow-card);
}

.chat-recipe-row {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 12px;
  align-items: center;
}

.chat-recipe-icon {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  background-color: #eef3e0;
}

.active-recipe-icon {
  width: 74px;
  height: 74px;
  border-radius: 22px;
  background-color: #edf3de;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
}

.meal-row-img {
  width: 52px;
  height: 52px;
  border-radius: 18px;
  overflow: hidden;
  background: #eef3e0;
}

.meal-row-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.stat-mini-icon svg,
.setting-icon svg,
.home-icon-btn svg,
.topbar-action svg,
.nav-icon svg {
  stroke: currentColor;
}

.stat-mini-icon--orange {
  color: #dd8a33;
}

.stat-mini-icon--blue {
  color: #3a9dd9;
}

.setting-icon {
  color: #5b8f12;
}

.setting-icon--danger {
  color: #b91c1c;
}

.profile-spotlight-card {
  padding: 20px;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.32), transparent 24%),
    linear-gradient(145deg, rgba(238,246,219,.94) 0%, rgba(255,255,255,.78) 100%);
  display: grid;
  gap: 16px;
}

.profile-spotlight-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 14px;
  margin-bottom: 0;
}

.profile-spotlight-copy {
  min-width: 0;
  display: grid;
  gap: 6px;
  padding-right: 8px;
}

.profile-spotlight-card .card-title {
  margin: 0;
  max-width: none;
  line-height: 1.2;
  white-space: nowrap;
}

.profile-spotlight-name {
  font-size: 24px;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -1px;
  color: #151515;
  max-width: 12ch;
}

.profile-spotlight-sub {
  max-width: 30ch;
  color: #4e5a3b;
  font-size: 13px;
  line-height: 1.45;
}

.profile-tier-badge {
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(154,217,58,.22);
  border: 1px solid rgba(91,143,18,.08);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
  justify-self: end;
  align-self: start;
  flex-shrink: 0;
}

.profile-metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.profile-metric {
  padding: 14px 10px;
  border-radius: 18px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(23,23,23,.06);
  text-align: center;
}

@media (max-width: 768px) {
  .profile-spotlight-top {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .profile-tier-badge {
    justify-self: start;
  }

  .profile-spotlight-copy {
    padding-right: 0;
  }

  .profile-spotlight-name,
  .profile-spotlight-sub {
    max-width: none;
  }
}

.profile-metric-value {
  font-size: 24px;
  font-weight: 900;
  color: #151515;
}

.profile-metric-label {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 800;
  color: #7a756a;
}

.nav-btn:last-child .nav-label {
  color: #3d3b36;
}

.nav-btn.active .nav-label {
  color: #24310f;
}

.recipe-card,
.recipe-card--full,
.chat-recipe-card,
.recent-card {
  overflow: hidden;
}

.recipe-body,
.chat-recipe-info,
.recent-info {
  position: relative;
  z-index: 1;
}

.recipe-save-btn {
  background: rgba(255,255,255,.82);
}

@media (max-width: 520px) {
  .profile-metrics-grid {
    grid-template-columns: 1fr;
  }
}

/* Goal-aware home + cooking updates */

.stat-mini {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.42), transparent 28%),
    linear-gradient(145deg, rgba(255,255,255,.82) 0%, rgba(247,246,241,.96) 100%);
  animation: statCardBreath 5.8s ease-in-out infinite;
}

.stat-mini-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.stat-mini-heading {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-mini-progress {
  position: relative;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
}

.mini-progress-svg {
  transform: rotate(-90deg);
}

.mini-progress-bg,
.mini-progress-fill {
  fill: none;
  stroke-width: 5;
}

.mini-progress-bg {
  stroke: rgba(23,23,23,.08);
}

.mini-progress-fill {
  stroke-linecap: round;
  transition: stroke-dashoffset .35s ease;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.1));
}

.mini-progress-fill--steps {
  stroke: #e49840;
}

.mini-progress-fill--water {
  stroke: #53a6db;
}

.stat-mini-icon {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.stat-mini-goal {
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #726d62;
  font-weight: 800;
  max-width: 22ch;
}

.stat-mini-label {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: #96907f;
}

.stat-mini-title {
  font-size: 20px;
  line-height: 1;
  letter-spacing: -.8px;
  font-weight: 900;
  color: #171717;
}

.stat-mini-val {
  margin-top: 12px;
  font-size: 38px;
  font-weight: 900;
  letter-spacing: -1.7px;
  line-height: .95;
  color: #171717;
}

.stat-mini-unit {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 800;
  color: #8b867b;
}

.steps-icon-print--left {
  animation: stepsPulse 1.2s ease-in-out infinite;
}

.steps-icon-print--right {
  animation: stepsPulse 1.2s ease-in-out infinite .24s;
}

.water-icon-drop {
  transform-origin: center bottom;
  animation: waterFloat 1.9s ease-in-out infinite;
}

.stat-mini--steps::after,
.stat-mini--water::after {
  content: '';
  position: absolute;
  inset: auto -28px -34px auto;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  opacity: .18;
  pointer-events: none;
}

.stat-mini--steps::after {
  background: radial-gradient(circle, rgba(228,152,64,.28) 0%, transparent 70%);
}

.stat-mini--water::after {
  background: radial-gradient(circle, rgba(83,166,219,.28) 0%, transparent 70%);
}

@keyframes statCardBreath {
  0%, 100% { transform: translateY(0) scale(1); box-shadow: var(--shadow-card); }
  50% { transform: translateY(-3px) scale(1.012); box-shadow: 0 20px 40px rgba(28,28,28,.08); }
}

@keyframes stepsPulse {
  0%, 100% { opacity: .48; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-1px); }
}

@keyframes waterFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-1.5px) scale(1.06); }
}

.home-meal-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.meal-feature-card {
  border: none;
  width: 100%;
  background:
    linear-gradient(135deg, rgba(255,255,255,.7) 0%, rgba(248,247,242,.95) 100%);
  border-radius: 28px;
  padding: 16px;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 10px;
  align-items: center;
  text-align: left;
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(23,23,23,.06);
  cursor: pointer;
}

.meal-feature-card--primary {
  background: linear-gradient(135deg, #7ea717 0%, #92be21 100%);
}

.meal-feature-card--primary .meal-feature-eyebrow,
.meal-feature-card--primary .meal-feature-name,
.meal-feature-card--primary .meal-feature-macros {
  color: #fff;
}

.meal-feature-copy {
  min-width: 0;
}

.meal-feature-eyebrow {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: #6c685d;
  margin-bottom: 8px;
}

.meal-feature-name {
  font-size: 26px;
  line-height: .98;
  letter-spacing: -1px;
  font-weight: 900;
  color: #171717;
}

.meal-feature-macros {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 700;
  color: #6d685e;
}

.meal-feature-visual {
  display: flex;
  justify-content: flex-end;
}

.meal-feature-photo {
  width: 122px;
  height: 122px;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 18px 34px rgba(0,0,0,.14);
  border: 4px solid rgba(255,255,255,.42);
}

.activity-card {
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.3), transparent 24%),
    linear-gradient(135deg, rgba(246,248,239,.88) 0%, rgba(255,255,255,.8) 100%);
}

.activity-card-title {
  font-size: 24px;
  line-height: 1.05;
  letter-spacing: -1px;
  font-weight: 900;
  color: #171717;
}

.activity-card-copy {
  margin-top: 10px;
  color: #6c685d;
  font-size: 14px;
  line-height: 1.55;
  font-weight: 700;
}

.activity-chip-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.activity-chip {
  padding: 8px 12px;
  border-radius: 999px;
  background: #eef5dd;
  color: #40531c;
  font-size: 12px;
  font-weight: 900;
}

.active-recipe-photo {
  width: 100%;
  height: 210px;
  border-radius: 24px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin-bottom: 14px;
  position: relative;
  overflow: hidden;
}

.active-recipe-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(0,0,0,.16) 100%);
}

.active-recipe-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.active-recipe-name {
  font-size: 22px;
  font-weight: 900;
}

.active-recipe-meta {
  color: #6d685e;
  font-size: 13px;
  font-weight: 700;
}

.chat-fab {
  display: flex;
  align-items: center;
  justify-content: center;
  bottom: calc(var(--nav-h) + 24px + env(safe-area-inset-bottom));
  right: calc(50% - 186px);
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: linear-gradient(135deg, #171717 0%, #3b3b3b 100%);
  color: #fff;
  box-shadow: 0 18px 34px rgba(0,0,0,.22);
}

.chat-fab svg {
  stroke: currentColor;
}

@media (max-width: 520px) {
  .meal-feature-card {
    grid-template-columns: 1fr;
  }

  .meal-feature-visual {
    justify-content: center;
  }

  .chat-fab {
    right: 18px;
  }
}

/* Home spotlight + spacing refinements */

.progress-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
}

.progress-card-left {
  min-width: 0;
}

.progress-card-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  min-height: 34px;
  border-radius: 999px;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .3px;
  width: max-content;
  max-width: 100%;
  align-self: flex-start;
}

.community-spotlight-section {
  padding: 2px 18px 4px;
}

.community-spotlight-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.community-spotlight-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.community-spotlight-label {
  font-size: 11px;
  font-weight: 900;
  color: #95907f;
  text-transform: uppercase;
  letter-spacing: .8px;
}

.community-spotlight-title {
  margin-top: 4px;
  font-size: 24px;
  line-height: 1;
  letter-spacing: -1px;
  font-weight: 900;
  color: #171717;
}

.community-spotlight-link {
  border: none;
  background: transparent;
  color: #5b8f12;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
}

/* Hide shell until its track has children — prevents blank card flash */
.community-spotlight-shell:not(:has(.community-spotlight-card)) {
  display: none;
}

.community-spotlight-shell {
  overflow: hidden;
  border-radius: 30px;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.42), transparent 24%),
    linear-gradient(145deg, rgba(255,255,255,.78) 0%, rgba(247,246,241,.96) 100%);
  border: 1px solid rgba(23,23,23,.06);
  box-shadow: var(--shadow-card);
  padding: 16px 0 14px;
}

.community-spotlight-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: auto;
  cursor: grab;
  touch-action: pan-x;
}

.community-spotlight-viewport::-webkit-scrollbar {
  display: none;
}

.community-spotlight-viewport:active {
  cursor: grabbing;
}

.community-spotlight-track {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  width: max-content;
  padding: 0 16px;
}

.community-spotlight-card {
  width: 104px;
  border: none;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  color: #171717;
  text-align: center;
  flex-shrink: 0;
}

.community-spotlight-photo {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  display: block;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 3px solid rgba(255,255,255,.75);
  box-shadow: 0 14px 24px rgba(0,0,0,.12);
}

.community-spotlight-name {
  font-size: 12px;
  line-height: 1.3;
  font-weight: 900;
  color: #2a2926;
}

#recipes-screen .filter-scroll {
  position: sticky;
  top: 78px;
  z-index: 5;
  padding-top: 10px;
  padding-bottom: 10px;
  background: linear-gradient(180deg, rgba(247,246,240,.96) 0%, rgba(247,246,240,.88) 70%, rgba(247,246,240,0) 100%);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.generate-btn--outline {
  min-height: 54px;
  margin-top: 6px;
}

#recipes-screen .section.section--no-top.section--no-bottom {
  padding-top: 8px;
}

#recipe-results {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  padding-top: 12px;
}

@media (max-width: 520px) {
  .community-spotlight-card {
    width: 92px;
  }

  .community-spotlight-photo {
    width: 76px;
    height: 76px;
  }

  .community-spotlight-title {
    font-size: 21px;
  }
}

/* Kitchen scan + shopping thumbnails */

.restock-item {
  grid-template-columns: 52px 1fr auto;
}

.grocery-item {
  grid-template-columns: 20px 40px 1fr auto;
  column-gap: 10px;
}

.inv-item {
  grid-template-columns: 44px 1fr auto;
}

.shop-thumb {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid rgba(255,255,255,.72);
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
  flex-shrink: 0;
}

.shop-thumb--small {
  width: 36px;
  height: 36px;
  border-radius: 12px;
}

.shop-thumb--inventory {
  width: 44px;
  height: 44px;
}

/* Final fixes for spotlight motion, weekly card layout, and static recipe filters */

.progress-card {
  grid-template-columns: minmax(0, 1fr) 96px;
  align-items: center;
  overflow: visible;
}

.progress-card-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.progress-card-tag {
  flex-shrink: 0;
  width: auto;
  max-width: none;
  overflow: visible;
}

.progress-card-title {
  max-width: 220px;
}

.progress-ring-wrap {
  justify-self: end;
  margin-right: 2px;
}

.community-spotlight-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  touch-action: pan-x;
  cursor: grab;
}

.community-spotlight-viewport::-webkit-scrollbar {
  display: none;
}

.community-spotlight-viewport.is-dragging {
  cursor: grabbing;
}

.community-spotlight-track {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  width: max-content;
  padding: 0 16px;
  will-change: transform;
  animation: spotlightSlide 26s linear infinite;
}

.community-spotlight-viewport.is-paused .community-spotlight-track,
.community-spotlight-viewport.is-dragging .community-spotlight-track {
  animation-play-state: paused;
}

#recipes-screen .filter-scroll {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  overflow: visible;
  padding-top: 10px;
  padding-bottom: 10px;
}

#recipes-screen .filter-chip {
  width: 100%;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  text-align: center;
  white-space: normal;
  line-height: 1.15;
}

@media (max-width: 520px) {
  .progress-card {
    grid-template-columns: minmax(0, 1fr) 88px;
  }

  .progress-card-title {
    max-width: 180px;
  }

  #recipes-screen .filter-scroll {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Final alignment and slideshow motion tweaks */

.progress-ring-wrap {
  position: relative;
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
}

.progress-ring-svg {
  width: 92px;
  height: 92px;
}

.progress-ring-label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-top: 1px;
  z-index: 1;
  width: 56px;
  height: 56px;
  margin: auto;
  border-radius: 50%;
  background: rgba(255,255,255,.82);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 6px 14px rgba(0,0,0,.08);
}

.progress-ring-num {
  font-size: 24px;
  line-height: 1;
  font-weight: 900;
  color: #111111;
}

.progress-ring-unit {
  margin-top: 2px;
  font-size: 11px;
  line-height: 1;
  font-weight: 800;
  color: #40511c;
}

.community-spotlight-track {
  gap: 18px;
}

.community-spotlight-card {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  animation: spotlightCardShowcase 4.8s ease-in-out infinite;
  transform-origin: center center;
}

.community-spotlight-card:nth-child(2n) {
  animation-delay: .6s;
}

.community-spotlight-card:nth-child(3n) {
  animation-delay: 1.2s;
}

.community-spotlight-card:nth-child(4n) {
  animation-delay: 1.8s;
}

.community-spotlight-card:nth-child(5n) {
  animation-delay: 2.4s;
}

.community-spotlight-card:nth-child(6n) {
  animation-delay: 3s;
}

@keyframes spotlightCardShowcase {
  0%, 100% {
    transform: scale(.96);
    opacity: .82;
  }
  45% {
    transform: scale(1);
    opacity: 1;
  }
  60% {
    transform: scale(1.06);
    opacity: 1;
  }
}

@keyframes spotlightSlide {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-50% - 9px)); }
}

@media (max-width: 520px) {
  .progress-ring-wrap,
  .progress-ring-svg {
    width: 86px;
    height: 86px;
  }

  .progress-ring-num {
    font-size: 22px;
  }

  .progress-ring-label {
    width: 52px;
    height: 52px;
  }
}

/* Nutrition hero alignment fix */

.nutrition-hero {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 20px 22px;
  overflow: visible;
}

.nutrition-hero-title {
  max-width: 220px;
  font-family: var(--font-body);
  font-size: 31px;
  line-height: .96;
  letter-spacing: -1.2px;
  font-weight: 900;
  color: #18210d;
}

.nutrition-hero-date {
  margin-top: -2px;
  color: #5e6931;
  font-size: 13px;
  font-weight: 800;
}

.nut-stats {
  margin-top: 2px;
  gap: 12px;
}

.nut-stat {
  min-height: 90px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 22px;
}

.nut-stat-val {
  font-size: 28px;
  line-height: .95;
  color: #141414;
}

.nut-stat-lbl {
  margin-top: 6px;
  color: #59662e;
  font-size: 10.5px;
  letter-spacing: .7px;
}

@media (max-width: 520px) {
  .nutrition-hero-title {
    max-width: 190px;
    font-size: 28px;
  }

  .nut-stat {
    min-height: 84px;
  }
}

/* Final polish for home progress cards + cooking controls */

.stat-mini {
  padding: 18px 18px 16px;
}

.stat-mini--steps {
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.4), transparent 26%),
    linear-gradient(145deg, rgba(255,244,233,.95) 0%, rgba(255,250,245,.92) 100%);
}

.stat-mini--water {
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.42), transparent 26%),
    linear-gradient(145deg, rgba(233,247,255,.95) 0%, rgba(246,251,255,.92) 100%);
}

.stat-mini-progress {
  width: 74px;
  height: 74px;
  margin-top: -2px;
}

.mini-progress-svg {
  width: 74px;
  height: 74px;
}

.mini-progress-bg,
.mini-progress-fill {
  stroke-width: 4.5;
}

.stat-mini-icon {
  width: 74px;
  height: 74px;
  inset: 0;
}

.stat-mini-icon svg {
  width: 24px;
  height: 24px;
}

.stat-mini-title {
  font-size: 21px;
}

.stat-mini-val {
  margin-top: 14px;
  font-size: 40px;
}

.stat-mini-unit {
  font-size: 13.5px;
}

.stat-mini-goal {
  margin-top: 9px;
  font-size: 12.5px;
}

.voice-btn,
.btn-outline {
  min-height: 46px;
  padding: 0 16px;
  border-radius: 16px;
  border: 1px solid rgba(23,23,23,.08);
  background: rgba(255,255,255,.78);
  color: #1c1c1c;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 900;
  font-family: var(--font-body);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.voice-btn:hover,
.btn-outline:hover {
  background: rgba(255,255,255,.92);
  box-shadow: 0 12px 24px rgba(28,28,28,.08);
}

.voice-btn:active,
.btn-outline:active {
  transform: scale(.97);
}

.voice-btn {
  margin-top: 14px;
  align-self: flex-start;
}

.step-nav {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

.step-nav .btn-outline,
.step-nav .btn-filled {
  flex: 1;
}

.shopping-ai-card,
.shopping-share-card,
.grocery-list-card {
  border-radius: 28px;
}

.shopping-ai-card,
.shopping-share-card {
  padding: 18px;
  margin-top: 10px;
}

.shopping-ai-head,
.shopping-share-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.shopping-ai-title,
.shopping-share-title {
  font-size: 16px;
  font-weight: 900;
  color: var(--text);
}

.shopping-ai-copy,
.shopping-share-copy,
.grocery-meta,
.share-user-role {
  color: var(--text3);
}

.shopping-ai-copy,
.shopping-share-copy {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.5;
}

.shopping-ai-input-row {
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
}

.shopping-ai-input {
  min-height: 46px;
}

.shopping-voice-btn {
  margin-top: 0;
}

.shopping-voice-btn.listening {
  background: rgba(151, 211, 55, .18);
  border-color: rgba(151, 211, 55, .42);
  color: #315116;
}

.shopping-voice-btn.voice-animated-btn[data-recording-label]:not([data-recording-label=""]).listening {
  padding-right: 16px;
}

.chat-mic-btn.voice-animated-btn[data-recording-label]:not([data-recording-label=""]).listening {
  padding-right: 0;
}

.shopping-voice-btn.voice-animated-btn[data-recording-label]:not([data-recording-label=""]).listening::after {
  inset: auto 10px -14px auto;
  transform: none;
}

.shopping-share-users {
  margin-top: 14px;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.shopping-share-users::-webkit-scrollbar {
  display: none;
}

.share-user-chip {
  min-width: 138px;
  padding: 10px 12px;
  border-radius: 20px;
  border: 1px solid rgba(23,23,23,.08);
  background: rgba(255,255,255,.72);
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.share-user-chip.active {
  background: linear-gradient(135deg, rgba(216,239,158,.92) 0%, rgba(248,250,239,.96) 100%);
  border-color: rgba(151, 211, 55, .5);
}

.share-user-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #d8ef9e 0%, #eef6d9 100%);
  color: #24310f;
  font-size: 14px;
  font-weight: 900;
}

.share-user-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.share-user-name {
  font-size: 13px;
  font-weight: 900;
  color: var(--text);
}

.share-user-role {
  font-size: 12px;
  font-weight: 700;
}

.grocery-list-card {
  margin-top: 10px;
  padding: 6px 18px;
}

.grocery-item {
  grid-template-columns: 20px 44px minmax(0, 1fr) auto;
  column-gap: 12px;
}

.grocery-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.grocery-name,
.grocery-meta,
.grocery-source,
.grocery-price {
  display: block;
}

.grocery-meta {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}

.grocery-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  text-align: right;
}

.grocery-source {
  padding: 5px 9px;
  border-radius: 999px;
  background: #eef4df;
  color: #466318;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.grocery-item.done .grocery-name,
.grocery-item.done .grocery-meta,
.grocery-item.done .grocery-price {
  opacity: .55;
  text-decoration: line-through;
}

@media (max-width: 768px) {
  .shopping-ai-input-row {
    grid-template-columns: 1fr;
  }

  .shopping-ai-head,
  .shopping-share-top {
    flex-direction: column;
  }

  .share-user-chip {
    min-width: 126px;
  }
}

/* Final profile header sizing fix */
.profile-header {
  padding: 64px 22px 46px;
  display: grid;
  justify-items: center;
  align-content: start;
  row-gap: 8px;
  min-height: 248px;
}

.profile-avatar-button {
  width: 104px;
  height: 104px;
  margin: 0 auto 6px;
  flex-shrink: 0;
}

.profile-header .avatar-upload-chip {
  right: 6px;
  bottom: 6px;
  transform: none;
  box-shadow: 0 10px 24px rgba(17,17,17,.18);
}

.profile-header .profile-name {
  margin-top: 2px;
  max-width: 18ch;
  line-height: 1.08;
}

.profile-header .profile-email {
  margin-top: 0;
  max-width: 26ch;
  line-height: 1.45;
}

.meal-photo-preview {
  margin-top: 14px;
  width: 100%;
  height: 144px;
  border-radius: 24px;
  border: 1px solid rgba(23, 23, 23, 0.08);
  background: linear-gradient(135deg, rgba(241, 245, 232, 0.96) 0%, rgba(225, 233, 213, 0.92) 100%);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.82);
}

.form-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 18px;
}

.meal-item--interactive {
  width: 100%;
  text-align: left;
  cursor: pointer;
  border: none;
  font: inherit;
  color: inherit;
}

.meal-item--interactive:active {
  transform: scale(0.992);
}

#log-modal,
#meal-detail-modal {
  position: fixed;
  display: flex;
  flex-direction: column;
  inset: 12px auto 12px 50%;
  width: 100%;
  max-width: none;
  margin: 0;
  background: #f8f7f2;
  border-radius: 34px;
  border: 1px solid rgba(255,255,255,.55);
  overflow: hidden;
  z-index: 320;
  transform: translate(-50%, 100%);
  transition: transform .38s cubic-bezier(.25,.46,.45,.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  pointer-events: none;
}

#log-modal.open,
#meal-detail-modal.open {
  transform: translate(-50%, 0);
  pointer-events: auto;
}

#log-modal .modal-sheet,
#meal-detail-modal .modal-sheet {
  width: 100%;
  height: 100%;
  max-height: none;
  border-radius: 0;
  border: none;
  box-shadow: none;
  margin: 0;
  overflow-y: auto;
}

#log-modal .modal-handle,
#meal-detail-modal .modal-handle {
  display: none;
}

.log-modal-sheet,
.meal-detail-sheet {
  padding: 0 14px 110px;
  background: linear-gradient(180deg, #f2f2eb 0%, #f8f7f2 100%);
}

.log-modal-sheet {
  padding: 0 16px 44px;
  background: linear-gradient(180deg, rgba(250,249,244,0.98) 0%, rgba(246,245,239,1) 100%);
}

.overlay-screen-topbar {
  position: sticky;
  top: 0;
  z-index: 4;
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: 10px;
  padding: 18px 0 16px;
  background: linear-gradient(180deg, rgba(248,247,242,.98) 0%, rgba(248,247,242,.88) 80%, rgba(248,247,242,0) 100%);
}

.overlay-screen-back,
.overlay-screen-spacer {
  width: 44px;
  height: 44px;
}

.overlay-screen-back {
  border: 1px solid rgba(23,23,23,.06);
  border-radius: 50%;
  background: rgba(255,255,255,.74);
  color: #171717;
  display: grid;
  place-items: center;
}

.overlay-screen-title {
  text-align: center;
  font-size: 17px;
  font-weight: 800;
  color: #171717;
}

.meal-detail-topbar {
  position: sticky;
  top: 0;
  z-index: 4;
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: 10px;
  margin: 0 -14px 14px;
  padding: 18px 14px 14px;
  background: linear-gradient(180deg, rgba(242,242,235,.98) 0%, rgba(242,242,235,.9) 82%, rgba(242,242,235,0) 100%);
}

.meal-detail-topbar-title {
  text-align: center;
  font-size: 17px;
  font-weight: 800;
  color: #171717;
}

.meal-detail-icon-btn {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255,255,255,0.72);
  border-radius: 50%;
  background: rgba(22,22,22,0.46);
  color: #ffffff;
  display: grid;
  place-items: center;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.18);
}

.meal-detail-icon-btn svg {
  stroke: currentColor;
}

.meal-detail-icon-btn:active {
  transform: scale(0.96);
}

.meal-detail-hero {
  position: relative;
}

.meal-detail-image {
  height: 270px;
  border-radius: 30px 30px 0 0;
  background: linear-gradient(135deg, #d9decb 0%, #eef2e3 100%);
  background-size: cover;
  background-position: center;
  box-shadow: 0 24px 50px rgba(21, 21, 21, 0.12);
}

.meal-detail-surface {
  margin-top: -18px;
  padding: 18px 14px 8px;
  border-radius: 28px 28px 0 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.46) 0%, rgba(255,255,255,0.82) 100%);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,0.92);
}

.meal-detail-name {
  font-size: 19px;
  font-weight: 800;
  text-align: center;
  color: rgba(255,255,255,0.98);
  margin: -66px auto 20px;
  max-width: 18ch;
  text-shadow: 0 10px 24px rgba(0,0,0,0.28);
}

.meal-detail-cal-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 118px;
  align-items: center;
  gap: 14px;
  padding: 20px;
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(236,240,224,0.86) 0%, rgba(255,255,255,0.72) 100%);
  border: 1px solid rgba(255,255,255,0.94);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.92);
}

.meal-detail-kicker {
  font-size: 14px;
  color: #66675f;
  font-weight: 700;
}

.meal-detail-calories {
  margin-top: 10px;
  font-size: 22px;
  color: #151515;
}

.meal-detail-calories span {
  font-size: 48px;
  line-height: .92;
  font-weight: 900;
  letter-spacing: -1.8px;
}

.meal-detail-calories small {
  font-size: 18px;
  font-weight: 700;
  color: #5f6258;
}

.meal-detail-ring {
  position: relative;
  width: 110px;
  height: 110px;
}

.meal-detail-ring svg {
  overflow: visible;
}

.meal-detail-ring-bg,
.meal-detail-ring-segment {
  fill: none;
  stroke-linecap: round;
  stroke-width: 8;
}

.meal-detail-ring-bg {
  stroke: rgba(255,255,255,0.92);
}

.meal-detail-ring-segment--protein {
  stroke: #4b8ef7;
}

.meal-detail-ring-segment--fat {
  stroke: #ff973c;
}

.meal-detail-ring-segment--carbs {
  stroke: #7acb28;
}

.meal-detail-ring-center {
  position: absolute;
  inset: 22px;
  border-radius: 50%;
  background: rgba(255,255,255,0.75);
  display: grid;
  place-items: center;
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.95);
}

.meal-detail-ring-center-num {
  font-size: 22px;
  font-weight: 900;
  color: #1b1b1b;
  line-height: 1;
}

.meal-detail-ring-center-copy {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: #66675f;
}

.meal-detail-macros {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.meal-detail-macro-card {
  padding: 14px 12px;
  border-radius: 22px;
  text-align: center;
  background: linear-gradient(135deg, rgba(240,244,231,0.88) 0%, rgba(255,255,255,0.74) 100%);
  border: 1px solid rgba(255,255,255,0.94);
}

.meal-detail-macro-progress {
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -1px;
}

.meal-detail-macro-progress--protein {
  color: #4b8ef7;
}

.meal-detail-macro-progress--fat {
  color: #ff973c;
}

.meal-detail-macro-progress--carbs {
  color: #7acb28;
}

.meal-detail-macro-grams {
  margin-top: 4px;
  font-size: 13px;
  font-weight: 700;
  color: #75766f;
}

.meal-detail-macro-label {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 800;
  color: #1b1b1b;
}

.meal-detail-insights-card,
.meal-detail-analysis-card {
  margin-top: 16px;
}

.meal-detail-insight-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.meal-detail-insight {
  padding: 14px;
  border-radius: 18px;
  background: rgba(255,255,255,0.66);
  border: 1px solid rgba(23,23,23,0.06);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.meal-detail-insight-label {
  font-size: 11px;
  letter-spacing: .5px;
  text-transform: uppercase;
  font-weight: 800;
  color: #77786f;
}

.meal-detail-insight-value {
  font-size: 16px;
  font-weight: 800;
  color: #171717;
}

.meal-detail-analysis-copy {
  font-size: 14px;
  line-height: 1.65;
  color: #46473f;
}

.notification-btn {
  position: relative;
}

.notification-badge {
  position: absolute;
  top: -4px;
  right: -2px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: #171717;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 18px rgba(23,23,23,.18);
}

.notifications-overlay {
  background: linear-gradient(180deg, #f8f7f2 0%, #f1f3e8 100%);
}

.notifications-header {
  background: linear-gradient(145deg, #d4eb90 0%, #b6dc61 100%);
}

.notifications-header-avatar {
  background: rgba(30,30,30,.16);
}

.notifications-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
}

.notifications-body::-webkit-scrollbar {
  display: none;
}

.notification-card {
  width: 100%;
  text-align: left;
  border: 1px solid rgba(23,23,23,.06);
  background: rgba(255,255,255,.74);
  border-radius: 24px;
  padding: 16px;
  box-shadow: var(--shadow-card);
}

.notification-card + .notification-card {
  margin-top: 12px;
}

.notification-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.notification-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .6px;
  text-transform: uppercase;
}

.notification-pill--success {
  background: #e4f7cd;
  color: #44670f;
}

.notification-pill--attention {
  background: #ffe2d3;
  color: #9a4d18;
}

.notification-pill--reminder {
  background: #e4ecff;
  color: #3456a5;
}

.notification-pill--info {
  background: #ecebe4;
  color: #55534c;
}

.notification-time {
  font-size: 11px;
  color: #7a776e;
  font-weight: 700;
}

.notification-title {
  font-size: 17px;
  font-weight: 900;
  color: #171717;
  letter-spacing: -.4px;
}

.notification-copy {
  margin-top: 8px;
  color: #66645d;
  font-size: 14px;
  line-height: 1.55;
}

.notification-action {
  margin-top: 12px;
  color: #1f4f1b;
  font-size: 13px;
  font-weight: 800;
}

.notification-empty {
  margin-top: 8px;
}

@media (max-width: 520px) {
  #log-modal,
  #meal-detail-modal {
    width: 100%;
    max-width: none;
    left: 0;
    inset: 0;
    border-radius: 0;
    border: none;
    transform: translateY(100%);
  }

  .log-modal-sheet,
  .meal-detail-sheet {
    width: 100%;
    margin: 0;
    padding: 14px 12px 104px;
  }

  .log-modal-sheet {
    padding: 14px 14px 40px;
  }

  #log-modal.open,
  #meal-detail-modal.open {
    transform: translateY(0);
    pointer-events: auto;
  }

  .meal-detail-image {
    height: 248px;
  }

  .meal-detail-cal-card {
    grid-template-columns: minmax(0, 1fr) 108px;
    padding: 18px;
  }

  .meal-detail-calories span {
    font-size: 42px;
  }
}

/* Auth hero redesign with centered brand and animated meal slideshow */

#auth-screen {
  position: relative;
  justify-content: center;
  gap: 0;
  background: linear-gradient(180deg, #f7f6f0 0%, #eef2e4 100%);
}

.auth-meal-slideshow {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.auth-meal-track {
  position: absolute;
  left: 0;
  width: max-content;
  display: flex;
  flex-direction: row;
  gap: 18px;
  opacity: 1;
  padding: 0 22px;
}

.auth-meal-track--left {
  top: 8%;
  animation: authMealSlideRightLoop 34s linear infinite;
  animation-play-state: paused;
}

.auth-meal-track--right {
  top: 46%;
  animation: authMealSlideLeftLoop 36s linear infinite;
  animation-play-state: paused;
}

#auth-screen.active .auth-meal-track--left,
#auth-screen.active .auth-meal-track--right {
  animation-play-state: running;
}

.auth-meal-shot {
  width: 196px;
  height: 248px;
  border-radius: 38px;
  background-size: cover;
  background-position: center;
  box-shadow: 0 24px 54px rgba(18, 18, 18, 0.16);
  border: 1px solid rgba(255,255,255,0.7);
  filter: saturate(1.06) contrast(1.02);
}

/* Left track — 6 images repeated */
.auth-meal-track--left .auth-meal-shot:nth-child(6n+1) { background-image: url('https://images.unsplash.com/photo-1540189549336-e6e99c3679fe?auto=format&fit=crop&w=900&q=80'); }
.auth-meal-track--left .auth-meal-shot:nth-child(6n+2) { background-image: url('https://images.unsplash.com/photo-1512621776951-a57141f2eefd?auto=format&fit=crop&w=900&q=80'); }
.auth-meal-track--left .auth-meal-shot:nth-child(6n+3) { background-image: url('https://images.unsplash.com/photo-1504674900247-0877df9cc836?auto=format&fit=crop&w=900&q=80'); }
.auth-meal-track--left .auth-meal-shot:nth-child(6n+4) { background-image: url('https://images.unsplash.com/photo-1512058564366-18510be2db19?auto=format&fit=crop&w=900&q=80'); }
.auth-meal-track--left .auth-meal-shot:nth-child(6n+5) { background-image: url('https://images.unsplash.com/photo-1490645935967-10de6ba17061?auto=format&fit=crop&w=900&q=80'); }
.auth-meal-track--left .auth-meal-shot:nth-child(6n+6) { background-image: url('https://images.unsplash.com/photo-1511690743698-d9d85f2fbf38?auto=format&fit=crop&w=900&q=80'); }

/* Right track — 6 images repeated */
.auth-meal-track--right .auth-meal-shot:nth-child(6n+1) { background-image: url('https://images.unsplash.com/photo-1547592180-85f173990554?auto=format&fit=crop&w=900&q=80'); }
.auth-meal-track--right .auth-meal-shot:nth-child(6n+2) { background-image: url('https://images.unsplash.com/photo-1546069901-ba9599a7e63c?auto=format&fit=crop&w=900&q=80'); }
.auth-meal-track--right .auth-meal-shot:nth-child(6n+3) { background-image: url('https://images.unsplash.com/photo-1502741338009-cac2772e18bc?auto=format&fit=crop&w=900&q=80'); }
.auth-meal-track--right .auth-meal-shot:nth-child(6n+4) { background-image: url('https://images.unsplash.com/photo-1467003909585-2f8a72700288?auto=format&fit=crop&w=900&q=80'); }
.auth-meal-track--right .auth-meal-shot:nth-child(6n+5) { background-image: url('https://images.unsplash.com/photo-1473093295043-cdd812d0e601?auto=format&fit=crop&w=900&q=80'); }
.auth-meal-track--right .auth-meal-shot:nth-child(6n+6) { background-image: url('https://images.unsplash.com/photo-1515003197210-e0cd71810b5f?auto=format&fit=crop&w=900&q=80'); }

.auth-meal-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(247,246,240,0.02) 0%, rgba(247,246,240,0.14) 16%, rgba(247,246,240,0.38) 42%, rgba(247,246,240,0.76) 100%),
    radial-gradient(circle at center, rgba(255,255,255,0.02) 0%, rgba(247,246,240,0.18) 40%, rgba(247,246,240,0.62) 100%);
}

.auth-hero {
  position: relative;
  z-index: 1;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 108px 28px 28px;
  gap: 10px;
}

.auth-logo-wrap {
  width: 82px;
  height: 82px;
  margin-bottom: 6px;
  background: linear-gradient(145deg, #b9dd67 0%, #8cc92d 100%);
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,0.82);
  box-shadow: 0 18px 32px rgba(125, 175, 46, .24);
}

.auth-logo-wrap svg {
  stroke: #ffffff;
}

.auth-title {
  max-width: none;
  font-size: 50px;
  line-height: .92;
  color: #171717;
  text-align: center;
  text-shadow: none;
}

.auth-subtitle {
  max-width: 260px;
  margin: 0 auto;
  color: #55584e;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
}

.auth-card {
  position: relative;
  z-index: 1;
  margin-top: auto;
  background: rgba(255,255,255,.78);
  border-radius: 36px 36px 0 0;
  padding: 24px 22px 34px;
  border-top: 1px solid rgba(255,255,255,.9);
  box-shadow: 0 -24px 48px rgba(20,20,20,.08);
}

@keyframes authMealSlideRightLoop {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

@keyframes authMealSlideLeftLoop {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (max-width: 520px) {
  .auth-meal-track {
    gap: 14px;
    padding: 0 14px;
  }

  .auth-meal-shot {
    width: 168px;
    height: 216px;
    border-radius: 30px;
  }

  .auth-hero {
    padding: 88px 22px 20px;
  }

  .auth-title {
    font-size: 44px;
  }
}

/* Home date lock + dynamic greeting polish */

.cal-strip-wrap {
  overflow: visible;
  padding: 18px;
  min-height: 156px;
}

.cal-strip {
  overflow-x: auto;
  gap: 8px;
  padding: 6px 0 0;
  scroll-snap-type: x mandatory;
  align-items: stretch;
}

.cal-strip-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.cal-day {
  min-width: 56px;
  width: auto;
  min-height: 82px;
  padding: 12px 8px;
  cursor: default;
  scroll-snap-align: center;
  transition: none;
  justify-content: center;
}

.cal-day:hover {
  background: rgba(247,247,243,.9);
  transform: none;
}

.cal-day--locked {
  pointer-events: none;
}

.cal-day__name,
.cal-day-name {
  font-size: 10.5px;
  font-weight: 900;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .6px;
}

.cal-day__num,
.cal-day-num {
  font-size: 18px;
  font-weight: 900;
  color: var(--text2);
  line-height: 1;
}

.cal-day__meta {
  font-size: 9px;
  font-weight: 800;
  color: #63702d;
  letter-spacing: .45px;
  text-transform: uppercase;
}

.cal-day--today {
  box-shadow: 0 10px 22px rgba(169, 205, 88, 0.24);
}
.setting-arrow--muted {
  color: rgba(84, 84, 84, 0.45);
  font-size: 20px;
}

/* ═══════════════════════════════════════
   WEBVIEW / APK  –  MOBILE & TABLET FIXES
   (These rules come last so they always win)
═══════════════════════════════════════ */

/* GPU-accelerate the chat slide animation to reduce jank */
.chat-overlay {
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* ── Smooth touch scrolling on all screen panels ── */
.screen {
  touch-action: pan-y;
  overscroll-behavior-y: contain;
}

/* ── Phone  (≤ 520 px) ── */
@media (max-width: 520px) {
  /* Full-width app shell — fill entire screen, no floating card gaps */
  #app {
    max-width: 100% !important;
    width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
  }
  /* Remove leftover bottom gap from floating-card design */
  .screen {
    padding-bottom: calc(var(--nav-h) + 20px) !important;
  }

  /* Reduce auth-card excessive bottom padding so no empty white space */
  .auth-card {
    padding-bottom: max(24px, env(safe-area-inset-bottom, 24px)) !important;
  }

  /* Hide home-meals-section wrapper when meal grid is empty */
  .home-meals-section:not(:has(> .home-meal-grid > *)):not(:has(> .card > *:not(:empty))) {
    display: none;
  }

  /* ── Meal feature cards: keep image on the right, NOT stacked below ── */
  .meal-feature-card {
    grid-template-columns: 1fr 100px !important;
    gap: 8px !important;
  }

  .meal-feature-visual {
    justify-content: flex-end !important;
  }

  .meal-feature-photo {
    width: 92px !important;
    height: 92px !important;
  }

  .meal-feature-name {
    font-size: 18px !important;
    letter-spacing: -0.5px !important;
  }

  /* ── Profile stats: keep all 3 in a single row ── */
  .profile-metrics-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  .profile-metric-value {
    font-size: 18px !important;
  }

  .profile-metric-label {
    font-size: 10px !important;
  }

  /* Remove heavy blur — main cause of lag on Android WebView */
  .chat-overlay,
  .camera-overlay,
  .recipe-detail-overlay,
  .modal-overlay {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .chat-overlay {
    background: var(--bg) !important;
  }

  /* Full-screen overlay: reset ALL centering so translate doesn't push it off-screen */
  .chat-overlay,
  .camera-overlay,
  .recipe-detail-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    translate: none !important;
    inset: 0 !important;
  }

  /* FAB: always visible, never off the right edge */
  .chat-fab {
    right: 18px !important;
    bottom: calc(var(--nav-h) + 16px + env(safe-area-inset-bottom)) !important;
  }
}

/* ── Tablet  (521 px – 900 px) ── */
@media (min-width: 521px) and (max-width: 900px) {
  #app {
    max-width: 560px;
    margin: 0 auto;
  }

  /* Remove blur on tablet too for smoother performance */
  .chat-overlay,
  .camera-overlay,
  .recipe-detail-overlay,
  .modal-overlay {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .chat-overlay,
  .camera-overlay,
  .recipe-detail-overlay {
    max-width: 560px;
    width: min(100%, 560px);
    inset: 0 auto 0 50% !important;
    translate: -50% 0 !important;
    border-radius: 0;
    left: 50% !important;
  }

  /* FAB stays inside the 560px app column */
  .chat-fab {
    right: max(18px, calc(50% - 262px)) !important;
  }

}

/* ═══════════════════════════════════════════
   ONBOARDING SURVEY
═══════════════════════════════════════════ */
#onboarding-overlay {
  position: fixed;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100vh;
  min-height: 100dvh;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: var(--font-body);
  /* never let any layout rule shrink or shift this overlay */
  transform: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  --ob-content-width: 620px;
  --ob-gutter: clamp(20px, 5vw, 32px);
  --ob-shell-width: min(calc(100% - (var(--ob-gutter) * 2)), var(--ob-content-width));
}
.ob-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 45% at 15% 0%,  rgba(39,180,103,.50) 0%, transparent 55%),
    radial-gradient(ellipse 55% 35% at 85% 5%,  rgba(130,222,173,.30) 0%, transparent 52%),
    #0D1E15;
  pointer-events: none;
}
.ob-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: var(--ob-shell-width);
  max-width: calc(100% - (var(--ob-gutter) * 2));
  margin: 0 auto;
  padding: calc(24px + env(safe-area-inset-top)) 0 0;
  position: relative;
  z-index: 1;
}
.ob-step-label {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,.50);
  letter-spacing: .4px;
}
.ob-skip-btn {
  background: none;
  border: none;
  color: rgba(255,255,255,.40);
  font-size: 13px;
  font-family: var(--font-body);
  cursor: pointer;
  padding: 4px 0;
}
.ob-progress-track {
  flex-shrink: 0;
  height: 4px;
  background: rgba(255,255,255,.12);
  width: var(--ob-shell-width);
  max-width: calc(100% - (var(--ob-gutter) * 2));
  margin: 14px auto 0;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.ob-progress-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 10px;
  transition: width .4s cubic-bezier(.4,0,.2,1);
}
.ob-hidden { display: none; }
.ob-progress-fill--initial { width: 10%; }
.ob-steps-wrapper {
  flex: 1;
  position: relative;
  overflow: hidden;
}
.ob-step {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* safe center: vertically centers short content; falls back to flex-start on overflow so scrolling still works */
  justify-content: safe center;
  box-sizing: border-box;
  padding: 28px var(--ob-gutter) 24px;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: translateX(100%);
  opacity: 0;
  pointer-events: none;
  transition: transform .38s cubic-bezier(.25,.46,.45,.94), opacity .28s ease;
  will-change: transform;
}
.ob-step > * {
  width: var(--ob-shell-width);
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.ob-step::-webkit-scrollbar { display: none; }
.ob-step.active {
  transform: translateX(0);
  opacity: 1;
  pointer-events: all;
}
.ob-step-emoji { font-size: 46px; margin-bottom: 14px; text-align: center; }
.ob-step-title {
  font-size: 26px;
  font-weight: 900;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 8px;
  font-family: var(--font-display);
  text-align: center;
}
.ob-step-sub {
  font-size: 14px;
  color: rgba(255,255,255,.60);
  margin-bottom: 24px;
  line-height: 1.5;
  text-align: center;
}
.ob-input {
  width: 100%;
  background: rgba(255,255,255,.10);
  border: 1.5px solid rgba(39,180,103,.40);
  border-radius: 14px;
  padding: 14px 18px;
  font-size: 17px;
  font-family: var(--font-body);
  font-weight: 600;
  color: #fff;
  outline: none;
  transition: border-color .2s;
  -webkit-appearance: none;
}
.ob-input::placeholder { color: rgba(255,255,255,.30); }
.ob-input:focus { border-color: var(--primary); background: rgba(39,180,103,.15); }

/* ── Welcome step ── */
.ob-welcome-badge {
  width: 90px; height: 90px;
  border-radius: 28px;
  background: var(--primary);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 18px;
  box-shadow: 0 10px 32px rgba(39,180,103,.50);
}
.ob-welcome-brand {
  font-size: 40px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -1.5px;
  text-align: center;
  font-family: var(--font-display);
  margin-bottom: 12px;
}
.ob-welcome-tagline {
  font-size: 14px;
  color: rgba(255,255,255,.58);
  text-align: center;
  line-height: 1.6;
  margin-bottom: 28px;
}
.ob-welcome-features {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ob-welcome-feat {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255,255,255,.08);
  border: 1.5px solid rgba(255,255,255,.12);
  border-radius: 16px;
  padding: 14px 16px;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .1s;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}
.ob-welcome-feat.selected {
  background: rgba(39,180,103,.28);
  border-color: #9ad93a;
  box-shadow: 0 0 0 2px rgba(154,217,58,.25);
}
.ob-welcome-feat.selected .ob-welcome-feat-icon {
  background: rgba(154,217,58,.25);
  border-color: rgba(154,217,58,.5);
}
.ob-welcome-feat:active { transform: scale(.97); }
.ob-welcome-feat-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ob-welcome-feat-icon svg {
  width: 22px;
  height: 22px;
  stroke: #fff;
  stroke-width: 1.9;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ob-welcome-feat-title { font-size: 14px; font-weight: 800; color: #fff; margin-bottom: 2px; }
.ob-welcome-feat-sub   { font-size: 12px; color: rgba(255,255,255,.50); line-height: 1.4; }

/* ── Drum picker ── */
.ob-drum-row  { display: flex; gap: 10px; height: 220px; }
.ob-drum-col  { flex: 1; display: flex; flex-direction: column; align-items: center; }
.ob-drum-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: rgba(255,255,255,.38);
  margin-bottom: 8px;
  text-transform: uppercase;
}
.ob-drum-scroll {
  flex: 1;
  width: 100%;
  overflow-y: scroll;
  -ms-overflow-style: none;
  touch-action: none;
  overscroll-behavior: contain;
}
.ob-drum-scroll::-webkit-scrollbar { display: none; }
.ob-drum-item {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 700;
  color: rgba(255,255,255,.28);
  transition: color .14s, font-size .14s;
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
}
.ob-drum-item.selected { color: #fff; font-size: 21px; }
.ob-drum-highlight {
  pointer-events: none;
  position: absolute;
  top: 50%;
  left: 6px; right: 6px;
  height: 44px;
  transform: translateY(-50%);
  background: rgba(39,180,103,.18);
  border: 1.5px solid rgba(39,180,103,.48);
  border-radius: 10px;
}

/* ── DOB select picker ── */
.ob-dob-selects {
  display: flex;
  gap: 12px;
  margin-top: 32px;
  width: 100%;
}
.ob-dob-sel-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.ob-dob-sel-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: rgba(255,255,255,.38);
  text-transform: uppercase;
}
.ob-dob-sel {
  width: 100%;
  min-height: 68px;
  padding: 16px 12px;
  background: rgba(255,255,255,.12);
  border: 1.5px solid rgba(255,255,255,.22);
  border-radius: 18px;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  font-family: var(--font-body);
  text-align: center;
  -webkit-appearance: none;
  appearance: none;
  cursor: text;
  outline: none;
  transition: border-color .18s, background .18s;
  caret-color: var(--primary);
}
.ob-dob-sel:focus,
.ob-dob-sel:active {
  border-color: rgba(154,217,58,.75);
  background: rgba(154,217,58,.14);
}
.ob-dob-sel::placeholder { color: rgba(255,255,255,.34); }

@media (min-width: 700px) {
  /* padding handled by max() formula in .ob-step base rule — no override needed */

  .ob-welcome-features,
  .ob-dob-selects,
  .ob-goal-cards,
  .ob-chips,
  .ob-social-list,
  .ob-ruler-wrap {
    width: min(100%, 720px);
    margin-left: auto;
    margin-right: auto;
  }

  .ob-nav {
    width: min(calc(100% - 80px), var(--ob-content-width));
    max-width: calc(100% - 80px);
  }
}

/* ── Ruler ── */
.ob-ruler-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.ob-ruler-wrap--spaced { margin-top: 12px; }
.ob-center-text { text-align: center; }
.ob-ruler-shell { position: relative; width: 100%; }
.ob-ruler-shell--top-gap { margin-top: 16px; }
.ob-budget-prefix { font-size: 28px; color: rgba(255,255,255,.55); font-weight: 700; }
.ob-ruler-value { font-size: 52px; font-weight: 900; color: #fff; line-height: 1; }
.ob-ruler-unit  { font-size: 17px; color: rgba(255,255,255,.50); font-weight: 600; margin-left: 3px; }
.ob-ruler-hint  { font-size: 12px; color: rgba(255,255,255,.35); text-align: center; margin-top: 4px; }
.ob-ruler-unit-toggle { display: flex; gap: 8px; }
.ob-ruler-unit-btn {
  background: rgba(255,255,255,.10);
  border: 1.5px solid rgba(255,255,255,.20);
  border-radius: 20px;
  padding: 5px 16px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,.50);
  cursor: pointer;
  font-family: var(--font-body);
  transition: all .18s;
}
.ob-ruler-unit-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.ob-ruler-viewport {
  width: 100%;
  overflow-x: scroll;
  -ms-overflow-style: none;
  scroll-snap-type: x mandatory;
  position: relative;
  cursor: grab;
}
.ob-ruler-viewport::-webkit-scrollbar { display: none; }
.ob-ruler-track { display: flex; align-items: flex-end; height: 68px; padding: 0 50%; }
.ob-ruler-tick {
  flex-shrink: 0;
  width: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  scroll-snap-align: center;
}
.ob-ruler-tick-line { background: rgba(255,255,255,.25); width: 1.5px; border-radius: 2px; height: 24px; }
.ob-ruler-tick.major .ob-ruler-tick-line { height: 42px; background: rgba(255,255,255,.55); width: 2px; }
.ob-ruler-tick-num { font-size: 9px; color: rgba(255,255,255,.38); margin-top: 4px; }
.ob-ruler-pointer {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 2px; height: 68px;
  background: var(--primary);
  border-radius: 2px;
  pointer-events: none;
  z-index: 2;
}
.ob-ruler-pointer::before {
  content: '';
  position: absolute;
  top: -4px; left: 50%;
  transform: translateX(-50%);
  width: 10px; height: 10px;
  background: var(--primary);
  border-radius: 50%;
}

/* ── Chips ── */
.ob-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.ob-chip {
  background: rgba(255,255,255,.10);
  border: 1.5px solid rgba(255,255,255,.20);
  border-radius: 50px;
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 700;
  color: rgba(255,255,255,.70);
  cursor: pointer;
  font-family: var(--font-body);
  transition: all .16s;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.ob-chip.selected { background: var(--primary); border-color: var(--primary); color: #fff; }

/* ── Goal / activity cards ── */
.ob-goal-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ob-goal-card {
  background: rgba(255,255,255,.08);
  border: 2px solid rgba(255,255,255,.14);
  border-radius: 18px;
  padding: 18px 12px;
  cursor: pointer;
  font-family: var(--font-body);
  transition: all .16s;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.ob-goal-card.selected { background: rgba(39,180,103,.30); border-color: var(--primary); box-shadow: 0 0 0 3px rgba(39,180,103,.25); }
.ob-goal-card-icon  { font-size: 28px; }
.ob-goal-card-title { font-size: 13px; font-weight: 800; color: #fff; line-height: 1.2; }
.ob-goal-card-sub   { font-size: 11px; color: rgba(255,255,255,.50); line-height: 1.3; }

/* ── Social list ── */
.ob-social-list { display: flex; flex-direction: column; gap: 10px; }
.ob-social-item {
  display: flex; align-items: center; gap: 14px;
  background: rgba(255,255,255,.08);
  border: 2px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 13px 16px;
  cursor: pointer;
  font-family: var(--font-body);
  transition: all .16s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.ob-social-item.selected { background: rgba(39,180,103,.20); border-color: var(--primary); }
.ob-social-icon { font-size: 22px; flex-shrink: 0; }
.ob-social-name { font-size: 15px; font-weight: 700; color: #fff; }
.ob-social-check {
  margin-left: auto;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.25);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: all .16s;
}
.ob-social-item.selected .ob-social-check { background: var(--primary); border-color: var(--primary); }
.ob-social-check-tick { color: #fff; font-size: 12px; display: none; font-weight: 800; }
.ob-social-item.selected .ob-social-check-tick { display: block; }

/* ── Nav bar ── */
.ob-nav {
  flex-shrink: 0;
  display: flex; gap: 12px;
  padding: 12px max(24px, calc(50% - 300px)) calc(16px + env(safe-area-inset-bottom));
  position: relative; z-index: 2;
  background: linear-gradient(to top, rgba(13,30,21,.95) 60%, transparent);
}
.ob-back-btn {
  width: 52px; height: 52px;
  border-radius: 16px;
  background: rgba(255,255,255,.10);
  border: none;
  color: rgba(255,255,255,.70);
  font-size: 20px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-family: var(--font-body);
  flex-shrink: 0;
  transition: opacity .2s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.ob-back-btn:disabled {
  opacity: 0;
  pointer-events: none;
  width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden;
  flex: 0 0 0 !important;
}
.ob-next-btn {
  flex: 1; height: 52px;
  border-radius: 16px;
  background: var(--primary);
  border: none; color: #fff;
  font-size: 16px; font-weight: 800;
  font-family: var(--font-body);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 6px 24px rgba(39,180,103,.45);
  transition: transform .12s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.ob-next-btn-label,
.ob-next-btn-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ob-next-btn-arrow {
  width: 16px;
  font-size: 16px;
  line-height: 1;
}
.ob-next-btn:disabled {
  background: rgba(130, 222, 173, .34);
  color: rgba(255,255,255,.72);
  box-shadow: none;
  cursor: not-allowed;
}
.ob-next-btn:disabled .ob-next-btn-arrow {
  opacity: .6;
}
.ob-next-btn:active { transform: scale(.97); }

/* ── Celebration ── */
@media (max-width: 700px) {
  #onboarding-overlay {
    --ob-content-width: 100%;
    --ob-gutter: 18px;
  }

  .ob-step {
    justify-content: center;
    padding-top: 24px;
    padding-bottom: 20px;
  }

  .ob-goal-cards {
    grid-template-columns: 1fr;
  }

  .ob-dob-selects {
    gap: 10px;
  }
}

@media (max-width: 420px) {
  .ob-welcome-brand {
    font-size: 34px;
  }

  .ob-step-title {
    font-size: 24px;
  }

  .ob-ruler-value {
    font-size: 44px;
  }

  .ob-next-btn,
  .ob-back-btn {
    height: 50px;
  }
}

.ob-celebration {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(13,30,21,.92);
  z-index: 10; gap: 14px;
  opacity: 0; pointer-events: none;
  transition: opacity .3s;
}
.ob-celebration.visible { opacity: 1; pointer-events: all; }
.ob-celeb-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.ob-confetti-piece { position: absolute; top: -20px; animation: confettiFall linear forwards; }
.ob-celeb-avatar {
  font-size: 84px;
  animation: celebBounce .6s cubic-bezier(.36,1.56,.64,1) both;
}
.ob-celeb-title { font-size: 26px; font-weight: 900; color: #fff; text-align: center; font-family: var(--font-display); }
.ob-celeb-sub   { font-size: 15px; color: rgba(255,255,255,.60); text-align: center; max-width: 260px; line-height: 1.5; }
@keyframes celebBounce {
  0%  { transform: scale(0) rotate(-15deg); }
  60% { transform: scale(1.15) rotate(8deg); }
  100%{ transform: scale(1) rotate(0); }
}
@keyframes confettiFall { to { transform: translateY(110vh) rotate(720deg); opacity: 0; } }

/* ═══════════════════════════════════════════
   PROFILE EDIT MODAL
═══════════════════════════════════════════ */
#profile-edit-modal {
  position: fixed; inset: 0;
  z-index: 1500;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(0,0,0,.50);
  opacity: 0; pointer-events: none;
  transition: opacity .25s;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
#profile-edit-modal.open { opacity: 1; pointer-events: all; }
.pem-card {
  background: var(--surface-solid);
  border-radius: 28px 28px 0 0;
  width: 100%; max-width: none;
  padding: 20px 24px 36px;
  transform: translateY(100%);
  transition: transform .30s cubic-bezier(.4,0,.2,1);
  max-height: 85vh;
  overflow-y: auto;
}
#profile-edit-modal.open .pem-card { transform: translateY(0); }
.pem-handle { width: 40px; height: 4px; background: var(--border-solid); border-radius: 4px; margin: 0 auto 20px; }
.pem-title    { font-size: 20px; font-weight: 900; color: var(--text); margin-bottom: 4px; }
.pem-subtitle { font-size: 14px; color: var(--text2); margin-bottom: 22px; line-height: 1.4; }
.pem-field-group { display: flex; flex-direction: column; gap: 16px; margin-bottom: 24px; }
.pem-field { display: flex; flex-direction: column; gap: 6px; }
.pem-field-label { font-size: 13px; font-weight: 700; color: var(--text2); letter-spacing: .3px; }
.pem-input {
  width: 100%;
  background: var(--bg);
  border: 1.5px solid var(--border-solid);
  border-radius: 14px;
  padding: 12px 16px;
  font-size: 15px;
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--text);
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  -webkit-appearance: none; appearance: none;
}
.pem-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(39,180,103,.12); }
.pem-select {
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2327B467' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
  cursor: pointer;
}
.pem-goal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.pem-goal-card {
  min-height: 68px;
  padding: 14px 12px;
  border-radius: 16px;
  border: 1.5px solid var(--border-solid);
  background: var(--surface2);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  transition: border-color .18s, background .18s, transform .12s, box-shadow .18s;
}
.pem-goal-card:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(39,180,103,.12);
}
.pem-goal-card:active {
  transform: scale(.98);
}
.pem-goal-card.selected {
  background: rgba(39,180,103,.16);
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(39,180,103,.10);
}
.pem-goal-label {
  line-height: 1.25;
}
.pem-chips-wrap { display: flex; flex-wrap: wrap; gap: 8px; }
.pem-chip {
  background: var(--surface2);
  border: 1.5px solid var(--border-solid);
  border-radius: 50px;
  padding: 7px 14px;
  font-size: 13px; font-weight: 700;
  color: var(--text2);
  cursor: pointer;
  font-family: var(--font-body);
  transition: all .15s;
  -webkit-user-select: none;
  user-select: none;
}
.pem-chip.selected { background: var(--primary); border-color: var(--primary); color: #fff; }
.pem-input:-webkit-autofill,
.pem-input:-webkit-autofill:hover,
.pem-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 1000px var(--bg) inset;
  transition: background-color 9999s ease-out 0s;
}
.pem-actions { display: flex; gap: 10px; }
.pem-cancel-btn {
  flex: 1; height: 50px;
  border-radius: 16px;
  background: var(--surface2); border: none;
  color: var(--text2); font-size: 15px; font-weight: 700;
  font-family: var(--font-body); cursor: pointer;
}
.pem-save-btn {
  flex: 2; height: 50px;
  border-radius: 16px;
  background: var(--primary); border: none;
  color: #fff; font-size: 15px; font-weight: 800;
  font-family: var(--font-body); cursor: pointer;
  box-shadow: 0 4px 16px rgba(39,180,103,.35);
}
.pem-toggle-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pem-toggle-card {
  width: 100%;
  border: 1.5px solid var(--border-solid);
  border-radius: 18px;
  background: var(--surface2);
  color: var(--text);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  text-align: left;
  cursor: pointer;
}
.pem-toggle-card.active {
  border-color: var(--primary);
  background: rgba(39,180,103,.10);
  box-shadow: 0 0 0 3px rgba(39,180,103,.08);
}
.pem-toggle-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pem-toggle-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
}
.pem-toggle-sub {
  font-size: 12px;
  line-height: 1.4;
  color: var(--text2);
}
.pem-toggle-switch {
  width: 52px;
  height: 30px;
  border-radius: 999px;
  background: rgba(15, 23, 42, .12);
  position: relative;
  flex-shrink: 0;
  transition: background .18s ease;
}
.pem-toggle-thumb {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 10px rgba(15, 23, 42, .18);
  transition: transform .18s ease;
}
.pem-toggle-card.active .pem-toggle-switch {
  background: var(--primary);
}
.pem-toggle-card.active .pem-toggle-thumb {
  transform: translateX(22px);
}
@media (max-width: 520px) {
  #profile-edit-modal {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: rgba(0,0,0,.65);
  }
  .pem-card { max-width: 100%; border-radius: 24px 24px 0 0; }
}

/* Responsive device-fit overrides */
:root {
  --device-shell-width: min(100vw, 430px);
  --device-shell-margin: 0px;
  --device-shell-radius: 0px;
  --device-nav-width: calc(100vw - 28px);
}

@media (min-width: 521px) and (max-width: 900px) {
  :root {
    --device-shell-width: min(calc(100vw - 48px), 760px);
    --device-shell-margin: 20px;
    --device-shell-radius: 32px;
    --device-nav-width: min(calc(var(--device-shell-width) - 40px), 620px);
  }
}

@media (min-width: 901px) {
  :root {
    --device-shell-width: min(calc(100vw - 96px), 1120px);
    --device-shell-margin: 24px;
    --device-shell-radius: 34px;
    --device-nav-width: min(calc(var(--device-shell-width) - 56px), 760px);
  }
}

#app {
  width: var(--device-shell-width) !important;
  max-width: none !important;
  margin: var(--device-shell-margin) auto !important;
  border-radius: var(--device-shell-radius) !important;
}

@media (max-width: 900px) {
  #app {
    width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
  }
  /* Remove green body orb bleed-through on phones & tablets */
  body::before { display: none; }
  body, html { background: #fff !important; }
}

@media (min-width: 901px) {
  #app {
    height: calc(100vh - (var(--device-shell-margin) * 2)) !important;
    height: calc(100dvh - (var(--device-shell-margin) * 2)) !important;
  }

}

.bottom-nav {
  width: var(--device-nav-width) !important;
  max-width: none !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: calc(var(--device-shell-margin) + 18px) !important;
}

.chat-fab {
  right: calc(50% - (var(--device-nav-width) / 2) + 14px) !important;
  bottom: calc(var(--device-shell-margin) + 124px + env(safe-area-inset-bottom)) !important;
}

.chat-overlay,
.camera-overlay,
.recipe-detail-overlay,
#log-modal,
#meal-detail-modal {
  width: var(--device-shell-width) !important;
  max-width: none !important;
  left: 50% !important;
  inset: var(--device-shell-margin) auto var(--device-shell-margin) 50% !important;
  translate: -50% 0 !important;
  border-radius: var(--device-shell-radius) !important;
}

@media (max-width: 900px) {
  .chat-overlay,
  .camera-overlay,
  .recipe-detail-overlay,
  #log-modal,
  #meal-detail-modal {
    width: 100% !important;
    inset: 0 !important;
    left: 0 !important;
    translate: none !important;
    border-radius: 0 !important;
  }
}

#profile-edit-modal .pem-card {
  max-width: min(560px, calc(var(--device-shell-width) - 32px));
}

.camera-file-input {
  display: none;
}

.cal-strip-nav {
  display: none !important;
}

.review-action-row {
  display: flex;
  gap: 12px;
}

.review-action-btn {
  min-height: 52px;
  border-radius: 16px;
  border: none;
  font-size: 15px;
  font-weight: 800;
  font-family: var(--font-body);
  cursor: pointer;
}

.review-action-btn--soft {
  flex: 1.1;
  background: #eef4e1;
  color: #2f4c15;
  border: 1.5px solid rgba(154, 217, 58, .24);
}

.review-action-btn--primary {
  flex: 1;
  background: var(--primary);
  color: #fff;
  box-shadow: 0 8px 22px rgba(39,180,103,.24);
}

.review-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.review-panel-sub {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text3);
}

.review-panel-sub--modal {
  margin-bottom: 14px;
}

.review-panel-link {
  border: none;
  background: transparent;
  color: var(--primary);
  font-size: 13px;
  font-weight: 800;
  font-family: var(--font-body);
  cursor: pointer;
  white-space: nowrap;
}

.review-panel-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.review-panel-list--modal {
  gap: 14px;
}

.review-panel-item {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 14px 16px;
}

.review-panel-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.review-panel-author {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
}

.review-panel-date {
  font-size: 11px;
  color: var(--text3);
  margin-top: 2px;
}

.review-panel-stars {
  font-size: 12px;
  letter-spacing: 1px;
  color: #f59e0b;
  white-space: nowrap;
}

.review-panel-note {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text2);
}

.recipe-reviews-sheet {
  max-height: 86vh;
}

.cal-strip-wrap {
  overflow: hidden;
}

.cal-strip-header {
  justify-content: flex-start;
}

.cal-strip {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  overflow: visible;
  padding: 6px 0 0;
}

.cal-day {
  min-width: 0;
  width: 100%;
  padding: 12px 4px;
}

#chat-overlay,
#camera-overlay {
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  inset: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: 0 !important;
  translate: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

#meal-detail-modal {
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  inset: 0 !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  margin: 0 !important;
  translate: none !important;
  transform: translateY(100%) !important;
  border-radius: 0 !important;
  z-index: 5050 !important;
}

#meal-detail-modal.open {
  transform: translateY(0) !important;
}

#chat-overlay {
  z-index: 5000 !important;
  background: var(--bg) !important;
}

#camera-overlay {
  z-index: 5100 !important;
}

#chat-overlay .chat-header {
  padding-top: calc(52px + env(safe-area-inset-top)) !important;
}

#chat-overlay .chat-suggestions {
  background: var(--bg);
}

#chat-overlay .chat-input-row {
  padding-bottom: calc(14px + env(safe-area-inset-bottom)) !important;
  background: rgba(255,255,255,.98) !important;
}

.chat-fab {
  bottom: calc(var(--device-shell-margin) + 138px + env(safe-area-inset-bottom)) !important;
}

@media (min-width: 901px) {
  .cal-strip {
    gap: 10px;
  }
  .cal-day {
    padding: 14px 6px;
  }
  .camera-frame-box {
    width: min(420px, 54vw);
    height: min(420px, 54vw);
  }
}

@media (min-width: 700px) {
  .auth-card {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }

  .screen {
    padding-left: clamp(18px, 3vw, 34px);
    padding-right: clamp(18px, 3vw, 34px);
  }
}

/* Progress Hub */
.progress-overview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.progress-overview-card {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  padding: 18px 18px 16px;
  min-height: 170px;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.42), transparent 34%),
    linear-gradient(160deg, rgba(195, 234, 120, .22), rgba(255,255,255,.95));
  border: 1px solid rgba(154, 186, 61, .16);
}

.progress-overview-card--streak {
  background:
    radial-gradient(circle at top right, rgba(255,232,188,.58), transparent 34%),
    linear-gradient(160deg, rgba(255, 245, 224, .96), rgba(255,255,255,.98));
}

.progress-overview-label {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text3);
}

.progress-overview-value {
  margin-top: 10px;
  font-size: clamp(24px, 4vw, 34px);
  font-weight: 900;
  color: var(--text);
}

.progress-overview-sub {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text2);
}

.progress-overview-meter {
  margin-top: 18px;
  height: 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, .08);
  overflow: hidden;
}

.progress-overview-meter-fill {
  width: 24%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #9ad43d, #c6ed78);
  box-shadow: 0 8px 18px rgba(150, 198, 53, .28);
}

.progress-overview-flame {
  width: 48px;
  height: 48px;
  margin-top: 12px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  color: #d9871b;
  background: rgba(255, 198, 108, .18);
}

.progress-streak-dots {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin-top: 16px;
}

.progress-streak-dot {
  height: 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, .08);
}

.progress-streak-dot.is-active {
  background: linear-gradient(90deg, #9ad43d, #d4f18f);
  box-shadow: 0 6px 12px rgba(154, 212, 61, .24);
}

.progress-card-shell {
  padding-bottom: 20px;
}

.progress-filter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.progress-range-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px;
  border-radius: 999px;
  background: rgba(15, 23, 42, .05);
}

.progress-range-btn {
  border: 0;
  background: transparent;
  color: var(--text2);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  padding: 10px 14px;
  border-radius: 999px;
}

.progress-range-btn.active {
  color: #13330f;
  background: linear-gradient(135deg, #bfe65d, #d9f79d);
  box-shadow: 0 10px 18px rgba(165, 214, 67, .22);
}

.progress-chart-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.progress-chart-value {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 900;
  line-height: 1;
  color: var(--text);
}

.progress-chart-sub {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text2);
}

.progress-chart-pill {
  white-space: nowrap;
  align-self: center;
  border-radius: 999px;
  padding: 10px 14px;
  background: rgba(194, 234, 118, .22);
  color: #5b8f12;
  font-size: 12px;
  font-weight: 900;
}

.progress-chart-wrap {
  position: relative;
  height: 240px;
  margin-bottom: 10px;
}

.progress-chart-grid,
.progress-chart {
  position: absolute;
  inset: 0;
}

.progress-chart-grid {
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  pointer-events: none;
}

.progress-chart-grid span {
  border-top: 1px dashed rgba(15, 23, 42, .12);
}

.progress-chart {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 10px;
  align-items: end;
  padding-top: 12px;
}

.progress-chart-col {
  height: 100%;
  display: flex;
  align-items: flex-end;
}

.progress-chart-bar {
  width: 100%;
  min-height: 12px;
  border-radius: 18px 18px 8px 8px;
  background: linear-gradient(180deg, #d8f58f, #8fc42d);
  box-shadow: 0 12px 20px rgba(154, 212, 61, .22);
}

.progress-chart-bar--peak {
  background: linear-gradient(180deg, #89ce4b, #497d18);
}

.progress-chart-labels {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 10px;
  margin-top: 10px;
}

.progress-chart-labels span {
  text-align: center;
  font-size: 12px;
  font-weight: 800;
  color: var(--text3);
}

.progress-goal-line {
  margin-top: 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text2);
  text-align: center;
}

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

.progress-insight-card {
  border-radius: 22px;
  padding: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,250,242,.98));
  border: 1px solid rgba(15, 23, 42, .06);
}

.progress-insight-label {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text3);
}

.progress-insight-value {
  margin-top: 10px;
  font-size: clamp(22px, 4vw, 30px);
  font-weight: 900;
  color: var(--text);
}

.progress-insight-sub {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text2);
}

@media (max-width: 640px) {
  .progress-overview-grid,
  .progress-insight-grid {
    grid-template-columns: 1fr;
  }

  .progress-filter-row,
  .progress-chart-head {
    flex-direction: column;
    align-items: stretch;
  }

  .progress-range-switch {
    width: 100%;
    justify-content: space-between;
  }

  .progress-range-btn {
    flex: 1;
    text-align: center;
    padding-left: 10px;
    padding-right: 10px;
  }

  .progress-chart {
    gap: 8px;
  }

  .progress-chart-labels {
    gap: 8px;
  }
}

.card[hidden] {
  display: none !important;
}

/* ─── Rewards Screen ─────────────────────────────────────────── */
.rewards-hero {
  position: relative;
  background: linear-gradient(145deg, #1a6b3c 0%, #0d4a28 50%, #27B467 100%);
  padding: 20px 20px 28px;
  overflow: hidden;
}
.rewards-hero-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
}
.rewards-tier-badge-wrap {
  text-align: center;
  position: relative;
  z-index: 1;
  margin-bottom: 16px;
}
.rewards-tier-icon {
  font-size: 48px;
  display: block;
  margin-bottom: 8px;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.3));
}
.rewards-tier-name {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.3px;
}
.rewards-tier-sub {
  font-size: 13px;
  color: rgba(255,255,255,.7);
  margin-top: 2px;
}
.rewards-xp-section {
  position: relative;
  z-index: 1;
  margin-bottom: 20px;
}
.rewards-xp-bar-wrap {
  background: rgba(255,255,255,.15);
  border-radius: 20px;
  height: 10px;
  overflow: hidden;
  margin-bottom: 6px;
}
.rewards-xp-bar {
  height: 100%;
  border-radius: 20px;
  background: rgba(255,255,255,.2);
}
.rewards-xp-fill {
  height: 100%;
  border-radius: 20px;
  background: linear-gradient(90deg, #82DEAD, #fff);
  transition: width .8s cubic-bezier(.34,1.56,.64,1);
}
.rewards-xp-label {
  font-size: 12px;
  color: rgba(255,255,255,.7);
  text-align: right;
}
.rewards-hero-stats {
  display: flex;
  gap: 0;
  position: relative;
  z-index: 1;
  background: rgba(255,255,255,.1);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
}
.rewards-hero-stat {
  flex: 1;
  text-align: center;
  padding: 12px 8px;
  border-right: 1px solid rgba(255,255,255,.1);
}
.rewards-hero-stat:last-child { border-right: none; }
.rewards-hero-stat-val {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
}
.rewards-hero-stat-lbl {
  font-size: 11px;
  color: rgba(255,255,255,.65);
  margin-top: 1px;
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* Section headers */
.rewards-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.rewards-section-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--text);
}
.rewards-section-reset, .rewards-section-count {
  font-size: 12px;
  color: var(--text3);
}

/* Daily Challenges */
.challenge-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.challenge-item:last-child { border-bottom: none; }
.challenge-item.done .challenge-name { text-decoration: line-through; color: var(--text3); }
.challenge-icon { font-size: 24px; width: 36px; text-align: center; flex-shrink: 0; }
.challenge-info { flex: 1; }
.challenge-name { font-size: 15px; font-weight: 700; color: var(--text); }
.challenge-desc { font-size: 12px; color: var(--text2); margin-top: 2px; }
.challenge-xp { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.challenge-check { font-size: 16px; color: var(--primary); font-weight: 800; }
.challenge-xp-val { font-size: 12px; font-weight: 700; color: var(--primary); }

/* Achievement Badges */
.achievements-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 4px;
}
.achievement-badge {
  background: var(--surface);
  border-radius: 16px;
  padding: 12px 6px;
  text-align: center;
  position: relative;
  border: 1.5px solid var(--border);
  box-shadow: var(--shadow-card);
  transition: transform .15s;
}
.achievement-badge.unlocked {
  border-color: var(--primary);
  background: linear-gradient(135deg, rgba(39,180,103,.06) 0%, rgba(39,180,103,.02) 100%);
}
.achievement-badge.locked { opacity: .5; }
.achievement-icon { font-size: 26px; display: block; margin-bottom: 4px; }
.achievement-name { font-size: 10px; font-weight: 700; color: var(--text); line-height: 1.2; }
.achievement-xp { font-size: 10px; color: var(--primary); font-weight: 700; margin-top: 2px; }
.achievement-done-ring {
  position: absolute;
  inset: -2px;
  border-radius: 18px;
  border: 2.5px solid var(--primary);
  pointer-events: none;
  animation: neonPulse 2s ease-in-out infinite;
}

/* Tier Progression */
.tier-progression-card { padding: 0; }
.tier-list { }
.tier-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  transition: background .15s;
}
.tier-item:last-child { border-bottom: none; }
.tier-item.current { background: linear-gradient(90deg, rgba(39,180,103,.08) 0%, transparent 100%); }
.tier-item.done { opacity: .55; }
.tier-item-icon { font-size: 24px; width: 32px; text-align: center; }
.tier-item-info { flex: 1; }
.tier-item-name { font-size: 15px; font-weight: 700; color: var(--text); }
.tier-item-range { font-size: 12px; color: var(--text2); }
.tier-done { color: var(--primary); font-size: 16px; font-weight: 800; }
.tier-current-dot {
  width: 10px; height: 10px;
  background: var(--primary);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(39,180,103,.25);
  animation: neonPulse 1.5s ease-in-out infinite;
}

/* Leaderboard */
.leaderboard-card { padding: 0; }
.leaderboard-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.leaderboard-item:last-child { border-bottom: none; }
.leaderboard-item--me {
  background: linear-gradient(90deg, rgba(39,180,103,.08) 0%, transparent 100%);
  border-left: 3px solid var(--primary);
}
.leaderboard-rank { font-size: 18px; width: 36px; text-align: center; flex-shrink: 0; }
.leaderboard-avatar {
  width: 38px; height: 38px;
  background: var(--primary-pale);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 800;
  color: var(--primary-d);
  flex-shrink: 0;
}
.leaderboard-info { flex: 1; }
.leaderboard-name { font-size: 15px; font-weight: 700; color: var(--text); }
.leaderboard-xp { font-size: 12px; color: var(--text2); }
.leaderboard-tier { font-size: 20px; }

/* Profile Body Stats Card */
.profile-body-card { }
.profile-body-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.profile-scan-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font-body);
}
.profile-body-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.profile-body-stat {
  background: var(--surface2);
  border-radius: 14px;
  padding: 12px 6px;
  text-align: center;
  cursor: pointer;
  transition: transform .15s;
  border: 1.5px solid var(--border);
}
.profile-body-stat:active { transform: scale(.96); }
.profile-body-stat-val {
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.1;
}
.profile-body-stat-lbl {
  font-size: 10px;
  color: var(--text2);
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.profile-body-actions {
  display: flex;
  gap: 8px;
}
.profile-body-action-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: var(--surface2);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 10px 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text2);
  cursor: pointer;
  font-family: var(--font-body);
  transition: background .15s, color .15s;
}
.profile-body-action-btn:active { background: var(--primary-pale); color: var(--primary); }

/* ─── Progress Tab: Macro Breakdown ────────────────────────── */
.macro-breakdown-grid { display: flex; flex-direction: column; gap: 14px; }
.macro-breakdown-item { }
.macro-breakdown-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.macro-breakdown-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .3px;
}
.macro-breakdown-label--protein { color: #3B82F6; }
.macro-breakdown-label--carbs   { color: #F59E0B; }
.macro-breakdown-label--fats    { color: #EF4444; }
.macro-breakdown-val { font-size: 14px; font-weight: 800; color: var(--text); }
.macro-breakdown-bar-bg {
  height: 8px;
  background: var(--surface2);
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 4px;
}
.macro-breakdown-bar {
  height: 100%;
  border-radius: 20px;
  transition: width .7s cubic-bezier(.22,1,.36,1);
}
.macro-breakdown-bar--protein { background: linear-gradient(90deg, #60A5FA, #3B82F6); }
.macro-breakdown-bar--carbs   { background: linear-gradient(90deg, #FCD34D, #F59E0B); }
.macro-breakdown-bar--fats    { background: linear-gradient(90deg, #FCA5A5, #EF4444); }
.macro-breakdown-target { font-size: 11px; color: var(--text3); }
.macro-scan-row { display: flex; gap: 8px; margin-top: 4px; }

/* ─── Progress Tab: Hydration & Steps ──────────────────────── */
.hydration-steps-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.hydration-steps-block {
  background: var(--surface2);
  border-radius: 18px;
  padding: 14px 12px;
  text-align: center;
  border: 1.5px solid var(--border);
}
.hydration-steps-icon { font-size: 28px; margin-bottom: 6px; }
.hydration-steps-val {
  font-size: 24px;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
}
.hydration-steps-of {
  font-size: 11px;
  color: var(--text2);
  margin: 2px 0 8px;
}
.hydration-steps-bar-bg {
  height: 6px;
  background: rgba(0,0,0,.07);
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 10px;
}
.hydration-steps-bar {
  height: 100%;
  border-radius: 20px;
  transition: width .6s cubic-bezier(.22,1,.36,1);
}
.hydration-steps-bar--water { background: linear-gradient(90deg, #7DD3FC, #3B82F6); }
.hydration-steps-bar--steps { background: linear-gradient(90deg, #6EE7B7, #27B467); }
.hydration-steps-btns {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.hydration-btn {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: var(--surface);
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}
.hydration-btn--add { background: var(--primary); border-color: var(--primary); color: #fff; }
.hydration-steps-label { font-size: 10px; color: var(--text3); flex: 1; text-align: center; }

/* ─── Home Quick-Action Row ─────────────────────────────────── */
.home-quick-actions {
  display: flex;
  gap: 8px;
  padding: 0 16px 16px;
}
.home-quick-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 12px 6px;
  cursor: pointer;
  font-family: var(--font-body);
  transition: background .15s, transform .15s;
  box-shadow: var(--shadow-card);
}
.home-quick-btn:active { transform: scale(.94); background: var(--primary-pale); }
.home-quick-icon {
  width: 36px; height: 36px;
  background: var(--primary-pale);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: var(--primary);
}
.home-quick-lbl {
  font-size: 10px;
  font-weight: 700;
  color: var(--text2);
  text-align: center;
  line-height: 1.2;
}

/* ─── Rewards: Kitchen Shortcut Card ───────────────────────── */
.kitchen-shortcut-card { }
.kitchen-shortcut-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 14px;
}
.kitchen-shortcut-sub { font-size: 13px; color: var(--text2); margin-top: 3px; }
.kitchen-shortcut-icon { font-size: 36px; }
.kitchen-shortcut-btns {
  display: flex;
  gap: 8px;
}
.kitchen-shortcut-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: var(--surface2);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 12px 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text2);
  cursor: pointer;
  font-family: var(--font-body);
  transition: background .15s, color .15s, transform .15s;
}
.kitchen-shortcut-btn:active {
  background: var(--primary-pale);
  color: var(--primary);
  transform: scale(.95);
}

/* ═══════════════════════════════════════
   KITCHEN2 SCREEN
═══════════════════════════════════════ */
#kitchen2-screen .topbar { padding: 16px 18px 0; }
.kitchen2-ai-card { padding: 20px; }
.kitchen2-textarea { resize: vertical; min-height: 60px; }
.kitchen2-ai-result { margin-top: 16px; }
.kitchen2-ai-loading { text-align: center; padding: 20px; color: var(--text2); font-style: italic; }
.kitchen2-ai-recipe-card { background: var(--surface2); border-radius: 16px; padding: 16px; }
.kitchen2-ai-recipe-title { font-size: 18px; font-weight: 800; color: var(--text); margin-bottom: 4px; }
.kitchen2-ai-recipe-meta { font-size: 13px; color: var(--text2); margin-bottom: 12px; }
.kitchen2-ai-recipe-section { font-size: 13px; font-weight: 700; color: var(--primary-d); margin: 8px 0 4px; }
.kitchen2-ai-ing-list, .kitchen2-ai-steps-list { padding-left: 18px; font-size: 13px; color: var(--text2); }
.kitchen2-ai-ing-list li, .kitchen2-ai-steps-list li { margin-bottom: 4px; }

.k2-recipe-card {
  display: flex;
  gap: 12px;
  padding: 14px;
  margin-bottom: 12px;
  align-items: flex-start;
}
.k2-recipe-img {
  width: 72px; height: 72px;
  border-radius: 12px;
  background: var(--surface2);
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
}
.k2-recipe-img--icon { background: var(--primary-pale); }
.k2-recipe-body { flex: 1; min-width: 0; }
.k2-recipe-name { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.k2-recipe-meta { display: flex; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--text2); margin-bottom: 8px; }
.k2-recipe-stars { color: #F59E0B; }
.k2-recipe-actions { display: flex; gap: 8px; }
.k2-share-btn, .k2-cook-btn {
  padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 700; cursor: pointer;
  border: none; transition: opacity .15s;
}
.k2-share-btn { background: var(--surface2); color: var(--text2); }
.k2-cook-btn { background: var(--primary); color: white; }
.k2-share-btn:active, .k2-cook-btn:active { opacity: .75; }

/* ═══════════════════════════════════════
   FAB POPUP MENU
═══════════════════════════════════════ */
.fab-menu {
  position: fixed;
  bottom: calc(var(--nav-h) + 12px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--glass-heavy);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 200;
  min-width: 200px;
  border: 1px solid var(--border);
}
.fab-menu.hidden { display: none; }
.fab-menu-item {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: 12px;
  background: transparent; border: none; cursor: pointer;
  font-size: 14px; font-weight: 600; color: var(--text);
  font-family: var(--font-body);
  text-align: left; transition: background .15s;
}
.fab-menu-item:hover, .fab-menu-item:active { background: var(--surface2); }
.fab-menu-item svg { color: var(--primary); flex-shrink: 0; }

/* ═══════════════════════════════════════
   SHOPPING QUICK ACTION BUTTONS
═══════════════════════════════════════ */
.shopping-action-btns-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.shopping-action-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: 14px;
  background: var(--surface2); border: 1.5px solid var(--border);
  color: var(--text); font-size: 12px; font-weight: 700;
  cursor: pointer; font-family: var(--font-body);
  transition: background .15s, color .15s;
}
.shopping-action-btn svg { color: var(--primary); flex-shrink: 0; }
.shopping-action-btn:active { background: var(--primary-pale); color: var(--primary-d); }

/* ═══════════════════════════════════════
   ACTIVE SESSION CARD (COOKING)
═══════════════════════════════════════ */
.active-session-card {
  background: linear-gradient(135deg, var(--primary), var(--primary-d));
  color: white;
  padding: 16px 20px;
  margin-bottom: 8px;
}
.active-session-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px;
}
.active-session-label { font-size: 12px; font-weight: 700; opacity: .8; text-transform: uppercase; letter-spacing: .5px; }
.active-session-status {
  background: rgba(255,255,255,.2); padding: 4px 10px; border-radius: 20px;
  font-size: 11px; font-weight: 700;
}
.active-session-recipe { font-size: 18px; font-weight: 800; margin-bottom: 2px; }
.active-session-step { font-size: 13px; opacity: .8; }

/* ═══════════════════════════════════════
   CIRCULAR TIMER (COOKING)
═══════════════════════════════════════ */
.timer-circle-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 8px;
}
.timer-svg { display: block; transform: rotate(-90deg); }
.timer-svg-bg { fill: none; stroke: var(--surface2); stroke-width: 8; }
.timer-svg-fill {
  fill: none;
  stroke: var(--primary);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 326.7;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s linear;
}
.timer-circle-wrap .timer-circle {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px; font-weight: 800;
  color: var(--text);
  background: none;
  border: none;
  line-height: 1;
  text-align: center;
}
.timer-custom-row {
  display: flex; gap: 8px; align-items: center;
  margin: 8px 0;
}
.timer-custom-input {
  flex: 1;
  min-width: 0;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
}

/* ═══════════════════════════════════════
   PROFILE — REWARDS SECTION
═══════════════════════════════════════ */
.profile-rewards-section { padding: 0 18px 24px; }
.profile-rewards-hero {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-d) 100%);
  border-radius: var(--radius);
  padding: 20px;
  color: white;
  margin-bottom: 20px;
  text-align: center;
}
.profile-rewards-tier-icon { font-size: 32px; margin-bottom: 4px; }
.profile-rewards-tier-name { font-size: 20px; font-weight: 800; }
.profile-rewards-tier-sub { font-size: 13px; opacity: .8; margin-bottom: 12px; }

/* ═══════════════════════════════════════
   PROFILE — PERSONAL INFO CARD
═══════════════════════════════════════ */
.profile-personal-info-card { padding: 20px; }
.profile-pi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.profile-pi-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.profile-pi-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 12px;
  background: var(--surface2); border: 1.5px solid var(--border);
  font-size: 12px; font-weight: 700; color: var(--text);
  cursor: pointer; font-family: var(--font-body);
  transition: background .15s;
}
.profile-pi-btn:active { background: var(--primary-pale); }
.profile-pi-btn svg { color: var(--primary); }

/* ═══════════════════════════════════════
   PROFILE — BUDGET TRACKER
═══════════════════════════════════════ */
.profile-budget-card { padding: 20px; }
.profile-budget-row { display: flex; gap: 8px; align-items: flex-end; }

/* ═══════════════════════════════════════
   CANVAS CHART CARD (NUTRITION)
═══════════════════════════════════════ */
.progress-canvas-card { padding: 18px; }
.canvas-chart-legend {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-top: 10px; font-size: 12px; color: var(--text2);
}
.chart-legend-item { display: flex; align-items: center; gap: 5px; }
.chart-legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

/* ═══════════════════════════════════════
   PROGRESS — MEAL LOG LIST
═══════════════════════════════════════ */
.progress-meal-log-card { padding: 18px; }
.progress-meal-log-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .1s;
  border-radius: 8px;
}
.progress-meal-log-item:last-child { border-bottom: none; }
.progress-meal-log-item:active { background: var(--surface2); }

/* ═══════════════════════════════════════
   CALENDAR STRIP — horizontal scroll on mobile
═══════════════════════════════════════ */
.cal-strip {
  flex-wrap: nowrap;
  overflow-x: auto;
  /* -webkit-overflow-scrolling: touch is deprecated on iOS 13+; momentum scroll is now default */
}
.cal-day { flex-shrink: 0; min-width: 56px; }

/* ═══════════════════════════════════════
   COMMUNITY SPOTLIGHT — clickable cards
═══════════════════════════════════════ */
.recipes-slide-track .community-spotlight-card {
  cursor: pointer;
}
.recipes-slide-track .community-spotlight-card:active {
  opacity: .85;
  transform: scale(.97);
}

/* ═══════════════════════════════════════
   ACTIVITY SUGGESTION CARD
═══════════════════════════════════════ */
.activity-chip--burn {
  background: rgba(39,180,103,.12);
  color: var(--primary-d);
}

/* ═══════════════════════════════════════
   PROGRESS BUDGET CARD
═══════════════════════════════════════ */
.progress-budget-card { padding: 18px; }