/* =========================
   Calorie PWA Clean CSS v15
   ========================= */

:root {
  --bg: #f6f8f7;
  --card: #ffffff;
  --text: #222222;
  --muted: #666666;
  --primary: #1f7a4d;
  --primary-soft: #e8f7ee;
  --warning: #e6a700;
  --danger-soft: #f3eeee;
  --border: #e1e7e3;
  --shadow: 0 3px 14px rgba(0,0,0,0.08);
}

html[data-theme="dark"] {
  --bg: #111715;
  --card: #1b2420;
  --text: #f2f5f3;
  --muted: #a9b5af;
  --primary: #42c27a;
  --primary-soft: #24382d;
  --warning: #f2bb2c;
  --danger-soft: #3a2525;
  --border: #304039;
  --shadow: 0 3px 16px rgba(0,0,0,0.3);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  font-family: Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  padding-bottom: 76px;
}

a {
  color: var(--primary);
}

.app-header {
  background: var(--primary);
  color: #ffffff;
  padding: 16px;
  font-size: 20px;
  font-weight: bold;
  position: sticky;
  top: 0;
  z-index: 10;
}

.page {
  padding: 16px;
}

.card,
.auth-card,
.mini-card {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 18px;
  box-shadow: var(--shadow);
  margin-bottom: 14px;
}

.auth-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 18px;
}

.auth-card {
  width: 100%;
  max-width: 420px;
}

label {
  display: block;
  color: var(--text);
  font-weight: bold;
  margin-top: 10px;
}

input,
select,
textarea {
  width: 100%;
  padding: 13px;
  margin-top: 6px;
  margin-bottom: 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
  font-size: 16px;
  background: var(--card);
  color: var(--text);
}

textarea {
  min-height: 90px;
}

button,
.button-link {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  display: block;
  padding: 14px;
  border-radius: 12px;
  font-size: 16px;
  cursor: pointer;
}

button:active,
.button-link:active {
  transform: scale(0.985);
}

.button-primary,
.button-link.button-primary {
  background: var(--primary);
  color: #ffffff;
  border-color: var(--primary);
}

.button-secondary {
  background: var(--primary-soft);
  color: var(--text);
}

.logout-button {
  background: #5b6d7a;
  color: #ffffff;
  border-color: #5b6d7a;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.stat {
  font-size: 28px;
  font-weight: bold;
  color: var(--text);
}

.label {
  color: var(--muted);
  font-size: 13px;
}

.success {
  background: var(--primary-soft);
  border-left: 5px solid var(--primary);
}

.warning {
  background: #fff4d6;
  border-left: 5px solid var(--warning);
  color: #222222;
}

html[data-theme="dark"] .warning {
  background: #3b3218;
  color: var(--text);
}

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

.progress-fill {
  height: 100%;
  width: 0;
  background: var(--primary);
  border-radius: 999px;
  transition: width 0.7s ease, background 0.3s ease;
}

/* Bottom nav */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 66px;
  background: var(--card);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--border);
  z-index: 20;
}

.bottom-nav a {
  display: grid;
  place-items: center;
  gap: 2px;
  text-align: center;
  text-decoration: none;
  color: var(--text);
  font-size: 11px;
  padding-top: 7px;
}

.nav-icon {
  font-size: 20px;
  line-height: 20px;
}

/* Dashboard */
.dashboard-page button.card,
.dashboard-black-card,
.dashboard-card-button,
.stat-gradient-card {
  width: 100%;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  text-align: left;
  box-shadow: var(--shadow);
}

.dashboard-page button.card *,
.dashboard-black-card *,
.dashboard-card-button *,
.stat-gradient-card * {
  color: var(--text);
}

.dashboard-page .label,
.dashboard-black-card .label,
.dashboard-card-button .label,
.stat-gradient-card .label {
  color: var(--muted);
}

.stat-gradient-card {
  background: linear-gradient(145deg, var(--card), var(--primary-soft));
}

.dashboard-full-card,
.dashboard-wide-button {
  width: 100%;
}

.dashboard-shortcuts .shortcut-icon {
  font-size: 34px;
  margin-top: 8px;
}

.dashboard-ring-card {
  display: grid;
  grid-template-columns: 118px 1fr;
  gap: 14px;
  align-items: center;
}

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

.calorie-ring {
  width: 112px;
  height: 112px;
  transform: rotate(-90deg);
}

.ring-bg {
  fill: none;
  stroke: var(--border);
  stroke-width: 10;
}

.ring-progress {
  fill: none;
  stroke: var(--primary);
  stroke-width: 10;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.8s ease, stroke 0.4s ease;
}

.ring-center {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  pointer-events: none;
}

.ring-center strong {
  display: block;
  font-size: 24px;
  color: var(--text);
}

.ring-center span {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-top: -24px;
}

/* More page true card buttons */
.more-button-list {
  display: grid;
  gap: 12px;
}

.more-action-card {
  width: 100%;
  min-height: 76px;
  display: grid;
  grid-template-columns: 52px 1fr 20px;
  align-items: center;
  gap: 12px;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 14px;
  margin: 0;
  text-align: left;
  box-shadow: var(--shadow);
  cursor: pointer;
  font: inherit;
}

.more-action-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  background: var(--primary-soft);
  border-radius: 16px;
  font-size: 26px;
}

.more-action-content strong {
  display: block;
  color: var(--text);
  font-size: 16px;
  line-height: 1.2;
}

.more-action-content small {
  display: block;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.25;
  margin-top: 4px;
  font-weight: normal;
}

.more-action-arrow {
  color: var(--muted);
  font-size: 28px;
  line-height: 1;
}

.logout-card .more-action-icon {
  background: var(--danger-soft);
}

/* Day pages */
.day-control-card {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: 10px;
  align-items: center;
}

.day-control-card button {
  margin: 0;
  padding: 10px;
}

.day-title {
  text-align: center;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  text-align: center;
}

.summary-grid strong {
  display: block;
  font-size: 15px;
  color: var(--text);
}

.summary-grid span {
  font-size: 11px;
  color: var(--muted);
}

.meal-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.meal-total {
  color: var(--primary);
  font-weight: bold;
  margin: 8px 0;
}

.consumption-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--border);
  padding: 10px 0;
}

.swipe-page {
  touch-action: pan-y;
}

/* Vertical bar graph */
.vertical-chart {
  height: 220px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 4px 0;
  border-bottom: 1px solid var(--border);
}

.vbar-item {
  flex: 1;
  height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  text-align: center;
  min-width: 0;
}

.vbar-value {
  font-size: 11px;
  font-weight: bold;
  color: var(--text);
  height: 20px;
  line-height: 20px;
}

.vbar-track {
  width: 100%;
  height: 140px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: transparent;
}

.vbar-fill {
  width: 70%;
  max-width: 34px;
  min-height: 6px;
  background: var(--primary);
  border-radius: 8px 8px 0 0;
  transition: height 0.25s ease;
}

.active-vbar .vbar-fill {
  background: var(--warning);
}

.vbar-label {
  margin-top: 8px;
  height: 28px;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}

/* Social */
.social-card {
  padding: 12px;
}

.social-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.social-icon {
  width: 38px;
  height: 38px;
  min-width: 38px;
  display: grid;
  place-items: center;
  background: var(--primary-soft);
  border-radius: 12px;
  font-size: 20px;
}

.social-row p {
  margin: 4px 0;
}

/* Achievements */
.achievement-card.locked {
  opacity: 0.55;
}

.achievement-card.earned {
  border-left: 6px solid var(--warning);
}

/* Toasts */
.toast-wrap {
  position: fixed;
  top: 14px;
  left: 14px;
  right: 14px;
  z-index: 9999;
}

.toast {
  background: #222;
  color: #fff;
  padding: 14px 16px;
  border-radius: 14px;
  margin-bottom: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}

.toast.success {
  background: var(--primary);
}

.toast.warning {
  background: var(--warning);
  color: #222;
}

/* Fireworks */
.fireworks-wrap {
  position: fixed;
  inset: 0;
  z-index: 99999;
  pointer-events: none;
  overflow: hidden;
}

.spark {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ffd700;
  animation: fireworkSpark 1.4s ease-out forwards;
}

.spark:nth-child(3n) { background: var(--primary); }
.spark:nth-child(4n) { background: var(--warning); }
.spark:nth-child(5n) { background: #ff6b6b; }

@keyframes fireworkSpark {
  0% { transform: translate(0,0) scale(0.5); opacity: 1; }
  70% { transform: translate(var(--x),var(--y)) scale(1.3); opacity: 1; }
  100% { transform: translate(var(--x),var(--y)) scale(0); opacity: 0; }
}

/* Checkbox */
.checkbox-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: normal;
}

.checkbox-row input[type="checkbox"] {
  width: auto;
  margin: 0;
}

/* Mobile / desktop */
@media (min-width: 768px) {
  .page {
    max-width: 820px;
    margin: auto;
  }
}

@media (max-width: 420px) {
  .dashboard-ring-card {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .summary-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}


/* v16 remove calorie ring / restore notification bar */
.dashboard-ring-card,
.calorie-ring-wrap,
.calorie-ring,
.ring-bg,
.ring-progress,
.ring-center {
  display: none !important;
}

.notification-bar {
  display: block !important;
  background: var(--primary-soft) !important;
  border-left: 5px solid var(--primary) !important;
}

.notification-bar strong,
.notification-bar p {
  color: var(--text) !important;
}


/* v17 install/update UI */
.install-dashboard-card {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--primary-soft);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  border-radius: 18px;
  margin-bottom: 14px;
  text-align: left;
}

.install-dashboard-card span {
  font-size: 24px;
}

.install-dashboard-card strong {
  color: var(--text);
}

.update-card {
  border-left: 5px solid var(--warning);
}

.update-card p {
  margin-top: 6px;
}


/* v18 nutrition bar thresholds are set in dashboard.js */
.progress-fill {
  transition: width 0.7s ease, background-color 0.35s ease, background 0.35s ease;
}


/* v19 recipe builder */
.recipe-live-summary {
  border-left: 5px solid var(--primary);
}

.recipe-summary-grid {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 420px) {
  .recipe-summary-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* v20 meal-to-recipe and recipe search polish */
#recipeFoodResults .mini-card,
#foodResults .mini-card {
  border-left: 4px solid var(--primary);
}

.recipe-live-summary {
  margin-top: 12px;
}


/* v23 elaborate rewards / achievements */
.achievement-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin-bottom: 14px;
}

.achievement-tabs button {
  min-width: max-content;
  border-radius: 999px;
  background: var(--card);
}

.achievement-grid {
  display: grid;
  gap: 14px;
}

.reward-card {
  display: grid;
  grid-template-columns: 68px 1fr;
  gap: 14px;
  align-items: center;
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 8px solid var(--muted);
  border-radius: 18px;
  padding: 14px;
  box-shadow: var(--shadow);
}

.reward-card.locked {
  opacity: 0.58;
  background: #eeeeee;
  filter: grayscale(0.7);
}

html[data-theme="dark"] .reward-card.locked {
  background: #242b28;
}

.reward-card.earned {
  opacity: 1;
  filter: none;
}

.reward-icon {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  background: var(--primary-soft);
  border-radius: 18px;
  position: relative;
  font-size: 30px;
}

.lock-icon {
  position: absolute;
  right: -5px;
  bottom: -5px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 17px;
  padding: 2px;
}

.reward-topline {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  font-weight: bold;
  color: var(--muted);
}

.reward-body h3 {
  margin: 4px 0 4px;
  color: var(--text);
}

.reward-body p {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 13px;
}

.reward-progress-text,
.reward-status {
  font-size: 12px;
  color: var(--muted);
  margin-top: 5px;
}

.reward-summary-card {
  border-left: 6px solid var(--primary);
}

/* level borders / shaded backgrounds */
.level-copper { border-left-color: #b87333; }
.level-bronze { border-left-color: #cd7f32; }
.level-silver { border-left-color: #aeb4b8; }
.level-gold { border-left-color: #d4af37; }
.level-platinum { border-left-color: #7fc7c7; }
.level-titanium { border-left-color: #5b6d7a; }

.level-copper.earned .reward-icon { background: #f4dfcf; }
.level-bronze.earned .reward-icon { background: #f0d5bd; }
.level-silver.earned .reward-icon { background: #e6e9eb; }
.level-gold.earned .reward-icon { background: #f7edc1; }
.level-platinum.earned .reward-icon { background: #d7f4f4; }
.level-titanium.earned .reward-icon { background: #dce2e6; }

@media (min-width: 768px) {
  .achievement-grid {
    grid-template-columns: 1fr 1fr;
  }
}


/* v24 feed scroll + friend feed buttons */
.scroll-feed {
  max-height: 360px;
  overflow-y: auto;
  padding-right: 4px;
}

.full-feed-scroll {
  max-height: calc(100vh - 180px);
}

.social-feed-button {
  width: 100%;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
  text-align: left;
  margin-bottom: 12px;
  padding: 12px;
}

.social-feed-button * {
  color: inherit;
}

/* v24 reward glow and unlock polish */
.reward-card.earned {
  animation: rewardUnlockPop 0.45s ease;
}

.level-copper.earned { box-shadow: 0 0 12px rgba(184, 115, 51, 0.35); }
.level-bronze.earned { box-shadow: 0 0 12px rgba(205, 127, 50, 0.40); }
.level-silver.earned { box-shadow: 0 0 14px rgba(174, 180, 184, 0.55); }
.level-gold.earned { box-shadow: 0 0 16px rgba(212, 175, 55, 0.65); }
.level-platinum.earned { box-shadow: 0 0 18px rgba(127, 199, 199, 0.70); }
.level-titanium.earned { box-shadow: 0 0 20px rgba(91, 109, 122, 0.75); }

@keyframes rewardUnlockPop {
  0% { transform: scale(0.96); opacity: 0.8; }
  60% { transform: scale(1.025); opacity: 1; }
  100% { transform: scale(1); }
}


/* v25 nutrition enrichment */
#enrichmentStatus {
  margin-top: 12px;
  border-left: 5px solid var(--primary);
}


/* v27 reminders, feed, app badge/install polish */
.install-dashboard-card {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--primary-soft);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  border-radius: 18px;
  margin-bottom: 14px;
  text-align: left;
}

.install-dashboard-card span {
  font-size: 24px;
}

.install-dashboard-card strong {
  color: var(--text);
}

.scroll-feed {
  max-height: 360px;
  overflow-y: auto;
  padding-right: 4px;
}

.full-feed-scroll {
  max-height: calc(100vh - 180px);
}

.social-feed-button {
  width: 100%;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
  text-align: left;
  margin-bottom: 12px;
  padding: 12px;
}


/* v28 resting calories */
#restingCaloriesBurned {
  color: var(--primary);
}


/* v29 clickable nutrient rows */
.nutrient-row-button {
  width: 100%;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--text);
  text-align: left;
  padding: 10px 0 5px;
  margin: 0;
  min-height: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nutrient-row-button span {
  color: var(--muted);
  font-weight: bold;
}

.nutrient-row-button:after {
  content: "›";
  color: var(--muted);
  margin-left: 8px;
}

.nutrient-detail-card .progress-bar {
  margin-top: 10px;
}


/* v30 total calories burned detail */
#totalCaloriesBurned {
  color: var(--primary);
}

#restingBar {
  background: var(--warning);
}


/* v31 dashboard cleanup */
.nutrition-bottom-space {
  margin-bottom: 28px !important;
}

.nutrition-bottom-space .progress-bar:last-child {
  margin-bottom: 12px;
}


/* v32 suggestions and meal planner */
.suggestion-card {
  border-left: 6px solid var(--primary);
}

.suggestion-type {
  text-transform: uppercase;
  font-size: 11px;
  color: var(--muted);
  background: var(--primary-soft);
  border-radius: 999px;
  padding: 4px 8px;
}


/* v33 dashboard spacing and polish */
.nutrition-button-card,
.nutrition-bottom-space {
  padding-bottom: 26px !important;
  margin-bottom: 0 !important;
}

.nutrition-button-card .progress-bar,
.nutrition-bottom-space .progress-bar {
  margin-bottom: 14px;
}

.nutrition-button-card .progress-bar:last-of-type,
.nutrition-bottom-space .progress-bar:last-of-type {
  margin-bottom: 24px !important;
}

.dashboard-soft-divider {
  height: 20px;
  margin: 0 0 2px 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.06),
    rgba(0,0,0,0.025),
    rgba(0,0,0,0)
  );
  border-radius: 0 0 18px 18px;
  pointer-events: none;
}

html[data-theme="dark"] .dashboard-soft-divider {
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.08),
    rgba(255,255,255,0.035),
    rgba(255,255,255,0)
  );
}

.dashboard-actions-spacing {
  margin-top: 18px !important;
  margin-bottom: 14px !important;
}

.dashboard-float-button {
  min-height: 84px;
  display: grid !important;
  place-items: center;
  border-radius: 20px !important;
  box-shadow: 0 7px 18px rgba(31,122,77,0.22) !important;
  transform: translateY(0);
  transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}

.dashboard-float-button:active {
  transform: translateY(2px) scale(0.99);
  box-shadow: 0 3px 10px rgba(31,122,77,0.18) !important;
}

.progress-fill {
  animation: nutritionBarLoad 0.65s ease both;
  transform-origin: left center;
}

@keyframes nutritionBarLoad {
  0% {
    transform: scaleX(0);
    opacity: 0.75;
  }
  100% {
    transform: scaleX(1);
    opacity: 1;
  }
}

/* Extra breathing room before lower dashboard cards */
.dashboard-shortcuts {
  margin-top: 12px;
}


/* v34 profile avatars, feed identity, reward borders */
.feed-avatar {
  width: 52px;
  height: 52px;
  min-width: 52px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: var(--primary-soft);
  font-size: 28px;
  overflow: hidden;
  border: 3px solid #b87333;
  box-shadow: 0 0 8px rgba(0,0,0,0.12);
}

.feed-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-tier-copper { border-color: #b87333; }
.avatar-tier-bronze { border-color: #cd7f32; box-shadow: 0 0 10px rgba(205,127,50,0.35); }
.avatar-tier-silver { border-color: #aeb4b8; box-shadow: 0 0 12px rgba(174,180,184,0.45); }
.avatar-tier-gold { border-color: #d4af37; box-shadow: 0 0 14px rgba(212,175,55,0.6); }
.avatar-tier-platinum { border-color: #7fc7c7; box-shadow: 0 0 16px rgba(127,199,199,0.65); }
.avatar-tier-titanium { border-color: #5b6d7a; box-shadow: 0 0 18px rgba(91,109,122,0.75); }

/* v34 dashboard spacing and polish */
.nutrition-button-card,
.nutrition-bottom-space {
  padding-bottom: 26px !important;
  margin-bottom: 0 !important;
}

.nutrition-button-card .progress-bar,
.nutrition-bottom-space .progress-bar {
  margin-bottom: 14px;
}

.nutrition-button-card .progress-bar:last-of-type,
.nutrition-bottom-space .progress-bar:last-of-type {
  margin-bottom: 24px !important;
}

.dashboard-soft-divider {
  height: 20px;
  margin: 0 0 2px 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.06), rgba(0,0,0,0.025), rgba(0,0,0,0));
  border-radius: 0 0 18px 18px;
  pointer-events: none;
}

.dashboard-actions-spacing {
  margin-top: 18px !important;
  margin-bottom: 14px !important;
}

.dashboard-float-button {
  min-height: 84px;
  display: grid !important;
  place-items: center;
  border-radius: 20px !important;
  box-shadow: 0 7px 18px rgba(31,122,77,0.22) !important;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.dashboard-float-button:active {
  transform: translateY(2px) scale(0.99);
  box-shadow: 0 3px 10px rgba(31,122,77,0.18) !important;
}

.progress-fill {
  animation: nutritionBarLoad 0.65s ease both;
  transform-origin: left center;
}

@keyframes nutritionBarLoad {
  0% { transform: scaleX(0); opacity: 0.75; }
  100% { transform: scaleX(1); opacity: 1; }
}


/* v35 metric / imperial profile controls */
.metric-fields,
.imperial-fields {
  margin-top: 10px;
}

html[data-unit-system="metric"] .imperial-fields {
  display: none;
}

html[data-unit-system="imperial"] .metric-fields {
  display: none;
}


/* v36 meal-planner specific suggestions */
.meal-suggestion-grid button {
  min-height: 58px;
}


/* v37 edit meal planner */
.mini-card details {
  margin-top: 10px;
}

.mini-card summary {
  cursor: pointer;
  font-weight: bold;
  color: var(--primary);
}


/* v38 meal planner suggestion links fixed */
.meal-suggestion-grid .button-link {
  min-height: 58px;
  display: grid;
  place-items: center;
}


/* v40 profile photo preview and unit system polish */
.current-profile-preview {
  display: grid;
  gap: 6px;
  justify-items: start;
  margin: 10px 0 14px;
}

.current-profile-preview img {
  width: 86px;
  height: 86px;
  object-fit: cover;
  border-radius: 22px;
  border: 3px solid var(--primary);
  box-shadow: var(--shadow);
}

html[data-unit-system="metric"] .imperial-fields {
  display: none;
}

html[data-unit-system="imperial"] .metric-fields {
  display: none;
}


/* v41 recipe books and premade recipes */
.recipe-book-card {
  border-left: 6px solid var(--primary);
}

.suggestion-type {
  text-transform: uppercase;
}


/* v42 recipe details */
.recipe-macro-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
}

.recipe-macro-grid span {
  background: var(--primary-soft);
  border-radius: 12px;
  padding: 10px;
  font-weight: bold;
  text-align: center;
}

.recipe-pdf-frame {
  width: 100%;
  min-height: 70vh;
  border: 1px solid var(--border);
  border-radius: 16px;
}


/* v43 streamline add pages and notification cards */
.streamlined-page .card {
  margin-bottom: 14px;
}

.streamlined-page label {
  margin-top: 10px;
}

.streamlined-page input,
.streamlined-page select,
.streamlined-page textarea {
  min-height: 48px;
}

.notification-card {
  border-left: 6px solid var(--primary);
}

.friend-request-card {
  background: var(--primary-soft);
}

.friend-request-card .grid-2 {
  margin-top: 10px;
}


/* v44 complete unit switching */
.metric-fields,
.imperial-fields {
  margin-top: 12px;
}

html[data-unit-system="metric"] .imperial-fields {
  display: none !important;
}

html[data-unit-system="imperial"] .metric-fields {
  display: none !important;
}

.unit-chip {
  display: inline-block;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--text);
  font-size: 12px;
  font-weight: bold;
}


/* v45 profile unit fix and burn estimate */
.unit-preference-card {
  border-left: 6px solid var(--primary);
}

.unit-fields-card {
  margin-top: 14px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--card-muted, rgba(0,0,0,0.025));
}

.unit-fields-card h4 {
  margin: 0 0 8px;
}

html[data-unit-system="metric"] .imperial-fields {
  display: none !important;
}

html[data-unit-system="imperial"] .metric-fields {
  display: none !important;
}

#estimatedWeightLoss {
  color: var(--primary);
}


/* v46 clean profile page */
.clean-profile-page {
  padding-bottom: 96px;
}

.clean-profile-page .card {
  margin-bottom: 16px;
}

.clean-profile-page hr {
  margin: 22px 0;
  border: 0;
  border-top: 1px solid var(--border);
}

.unit-preference-card {
  border-left: 6px solid var(--primary);
}

.unit-fields-card {
  margin-top: 14px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(0,0,0,0.025);
}

html[data-unit-system="metric"] .imperial-fields {
  display: none !important;
}

html[data-unit-system="imperial"] .metric-fields {
  display: none !important;
}


/* v47 social feed likes/comments + mobile safe bottom padding */
body {
  padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px));
}

.page {
  padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px));
}

.bottom-nav,
.footer-nav {
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
}

.social-post-card {
  margin-bottom: 14px;
}

.social-post-main p {
  margin: 5px 0;
}

.social-actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}

.social-action-btn {
  flex: 1;
  background: var(--primary-soft);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 14px;
  min-height: 44px;
  font-weight: bold;
}

.social-action-btn.liked {
  background: var(--primary);
  color: #fff;
}

.comment-panel {
  margin-top: 12px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}

.comment-row {
  background: rgba(0,0,0,0.035);
  border-radius: 14px;
  padding: 10px;
  margin-bottom: 8px;
}

.comment-row p {
  margin: 4px 0;
}

.comment-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin-top: 10px;
}

.comment-form input {
  min-height: 46px;
}


/* v48 reactions, comment alignment, dashboard counts */
.reaction-row,
.comment-reactions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.reaction-btn,
.comment-reaction-btn {
  min-width: 42px;
  min-height: 38px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--primary-soft);
  box-shadow: none;
}

.reaction-btn.selected,
.comment-reaction-btn.selected {
  background: var(--primary);
  color: #fff;
}

.reaction-summary,
.comment-reaction-summary {
  margin-top: 10px;
  font-size: 13px;
  color: var(--muted);
  font-weight: bold;
}

.comment-row {
  max-width: 86%;
  clear: both;
}

.comment-other {
  margin-right: auto;
  text-align: left;
  border-top-left-radius: 6px;
}

.comment-me {
  margin-left: auto;
  text-align: right;
  background: var(--primary-soft);
  border-top-right-radius: 6px;
}

.dashboard-feed-counts {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 7px;
  align-items: center;
}

.mini-like-btn {
  min-height: 30px;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: none;
  font-size: 13px;
  font-weight: bold;
}

.mini-like-btn.liked {
  background: var(--primary);
  color: #fff;
}

.social-feed-button {
  cursor: pointer;
}


/* v49 dashboard social hover reactions/comments */
.dashboard-social-card {
  display: block;
  position: relative;
  overflow: visible;
}

.dashboard-feed-main {
  width: 100%;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--text);
  text-align: left;
  padding: 0;
}

.dashboard-feed-actions {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}

.dashboard-reaction-wrap,
.dashboard-comment-wrap {
  position: relative;
  flex: 1;
}

.dashboard-react-btn,
.dashboard-comment-btn {
  width: 100%;
  min-height: 42px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--primary-soft);
  color: var(--text);
  box-shadow: none;
  font-weight: bold;
  display: flex;
  justify-content: center;
  gap: 7px;
  align-items: center;
}

.dashboard-react-btn.active {
  background: var(--primary);
  color: #fff;
}

.dashboard-reaction-picker {
  position: absolute;
  left: 50%;
  bottom: 48px;
  transform: translateX(-50%) translateY(8px);
  display: flex;
  gap: 6px;
  padding: 8px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease;
  z-index: 50;
}

.dashboard-reaction-picker.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.dashboard-reaction-picker button {
  min-width: 38px;
  min-height: 38px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-size: 22px;
  padding: 0;
}

.dashboard-reaction-picker button:hover,
.dashboard-reaction-picker button:active {
  transform: scale(1.18);
  background: var(--primary-soft);
}

.dashboard-comment-preview {
  position: absolute;
  right: 0;
  bottom: 48px;
  width: min(280px, 78vw);
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  border-radius: 16px;
  padding: 10px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.16s ease, transform 0.16s ease;
  z-index: 50;
}

.dashboard-comment-preview.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.preview-comment {
  border-bottom: 1px solid var(--border);
  padding: 6px 0;
}

.preview-comment:last-child {
  border-bottom: 0;
}

.preview-comment p {
  margin: 3px 0 0;
  font-size: 13px;
}

.dashboard-comment-panel {
  margin-top: 10px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}


/* v50 compact facebook-style social feed */
.compact-social-post {
  overflow: visible;
  padding-bottom: 12px;
}

.social-post-main-button {
  width: 100%;
  background: transparent;
  color: var(--text);
  border: 0;
  box-shadow: none;
  padding: 0;
  text-align: left;
}

.reaction-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin: 8px 0 0 62px;
  min-height: 24px;
}

.reaction-chip {
  display: inline-flex;
  gap: 3px;
  align-items: center;
  background: rgba(0,0,0,0.045);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 13px;
  font-weight: 700;
}

.social-compact-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  border-top: 1px solid var(--border);
  padding-top: 8px;
}

.reaction-picker-wrap,
.social-comment-wrap {
  position: relative;
  flex: 1;
}

.compact-react-btn,
.compact-comment-btn {
  width: 100%;
  min-height: 38px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  box-shadow: none;
  font-weight: 800;
  display: flex;
  gap: 6px;
  justify-content: center;
  align-items: center;
}

.compact-react-btn.active {
  background: var(--primary-soft);
  color: var(--primary);
}

.reaction-picker-bar {
  position: absolute;
  left: 50%;
  bottom: 44px;
  transform: translateX(-50%) translateY(8px);
  display: flex;
  gap: 5px;
  padding: 7px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease;
  z-index: 80;
}

.reaction-picker-bar.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.reaction-picker-bar button {
  width: 36px;
  height: 36px;
  min-height: 36px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-size: 21px;
  padding: 0;
}

.reaction-picker-bar button:hover,
.reaction-picker-bar button:active {
  transform: scale(1.18);
  background: var(--primary-soft);
}



.social-comment-panel {
  margin-top: 10px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}

.comment-row {
  display: flex;
  margin: 8px 0;
}

.comment-row.mine {
  justify-content: flex-end;
}

.comment-row.theirs {
  justify-content: flex-start;
}

.comment-bubble {
  max-width: 82%;
  border-radius: 16px;
  padding: 9px 11px;
  background: rgba(0,0,0,0.045);
}

.comment-row.mine .comment-bubble {
  background: var(--primary-soft);
  text-align: right;
}

.comment-row.theirs .comment-bubble {
  text-align: left;
}

.comment-bubble p {
  margin: 3px 0;
}

.comment-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin-top: 10px;
}

.comment-form input {
  min-height: 44px;
}

.feed-summary-muted {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

@media (max-width: 420px) {
  .reaction-breakdown {
    margin-left: 0;
  }
}


/* v51 comments simplified, replies, double-tap reaction */
.comment-row.reply {
  margin-left: 34px;
  font-size: 0.95em;
}

.comment-row.reply.mine {
  margin-left: 0;
  margin-right: 34px;
}

.reply-link {
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--primary);
  min-height: auto;
  padding: 4px 0 0;
  font-size: 12px;
  font-weight: 800;
}

.double-tap-burst {
  position: absolute;
  left: 50%;
  top: 38%;
  transform: translate(-50%, -50%);
  font-size: 54px;
  animation: doubleTapBurst 0.7s ease forwards;
  pointer-events: none;
  z-index: 100;
}

@keyframes doubleTapBurst {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  35% { opacity: 1; transform: translate(-50%, -50%) scale(1.18); }
  100% { opacity: 0; transform: translate(-50%, -64%) scale(1); }
}


/* v52 suggestions/planner/pdf cleanup */
.button-danger {
  background: #b42318 !important;
  color: #fff !important;
  border: 0;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  display: block;
  padding: 14px;
  border-radius: 12px;
}

.planner-item-card {
  border-left: 5px solid var(--primary);
}

.planner-edit-details {
  margin-top: 12px;
}

.planner-edit-details summary {
  cursor: pointer;
  font-weight: 800;
  color: var(--primary);
  padding: 8px 0;
}

.app-pdf-frame {
  width: 100%;
  min-height: calc(100vh - 220px);
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
}

.recipe-book-viewer-page {
  padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px));
}


/* v53 recipe cards and iOS PDF viewer */
.recipe-list-card {
  border-left: 5px solid var(--primary);
}

.recipe-macro-grid.compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.recipe-macro-grid.compact span {
  padding: 8px 6px;
  font-size: 12px;
}

.recipe-card-ingredients {
  margin: 12px 0;
  background: rgba(0,0,0,0.025);
  border-radius: 14px;
  padding: 10px;
}

.recipe-card-ingredients summary {
  cursor: pointer;
  font-weight: 800;
  color: var(--primary);
}

.app-pdf-frame {
  width: 100%;
  min-height: calc(100vh - 220px);
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
}


/* v54 iPhone PDF + suggestions nutrition/ingredients */
.ios-pdf-helper {
  border-left: 5px solid var(--primary);
}

.suggestion-nutrition-grid {
  margin-top: 10px;
  margin-bottom: 8px;
}

.suggestion-ingredients {
  margin-top: 8px;
}

@media (max-width: 480px) {
  .recipe-macro-grid.compact,
  .suggestion-nutrition-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* v55 restaurant meal builder */
.sticky-restaurant-total {
  position: sticky;
  top: 12px;
  z-index: 10;
  border-left: 6px solid var(--primary);
}

.restaurant-total-stat {
  font-size: 28px;
  font-weight: 900;
  color: var(--primary);
  margin: 8px 0 10px;
}

.restaurant-option-card {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 12px;
  margin-bottom: 10px;
  background: rgba(0,0,0,0.025);
}

.restaurant-option-label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  margin: 0;
}

.restaurant-option-label input[type="checkbox"] {
  width: 22px;
  height: 22px;
}

.restaurant-option-label small {
  display: block;
  color: var(--muted);
  margin-top: 3px;
}

.restaurant-option-nutrition {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}

.restaurant-qty-row {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}

/* v57 trends */
.dashboard-click-card { cursor: pointer; }
.dashboard-click-card canvas, #trendsMainChart { width: 100%; display: block; }
.trend-comparison-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.trend-card { border: 1px solid var(--border); border-radius: 16px; padding: 12px; background: rgba(0,0,0,0.025); }
.trend-card strong, .trend-card span, .trend-card small { display: block; }
.trend-card span { font-size: 22px; font-weight: 900; margin: 4px 0; }
.trend-card small.up { color: #b42318; font-weight: 800; }
.trend-card small.down { color: var(--primary); font-weight: 800; }
.trend-card small.neutral { color: var(--muted); font-weight: 800; }
@media (max-width: 420px) { .trend-comparison-grid { grid-template-columns: 1fr; } }

/* v58 top notifications + meal serving + friend summary */
#topNoticeStack{position:fixed;top:calc(12px + env(safe-area-inset-top,0px));left:12px;right:12px;z-index:99999;pointer-events:none}.top-notice{margin:0 auto 8px;max-width:680px;padding:12px 14px;border-radius:14px;background:#1f2937;color:#fff;font-weight:800;box-shadow:0 8px 24px rgba(0,0,0,.2);opacity:0;transform:translateY(-16px);transition:opacity .22s ease,transform .22s ease}.top-notice.show{opacity:1;transform:translateY(0)}.top-notice-success{background:#1f7a4d}.top-notice-warning{background:#b42318}.top-notice-info{background:#1f2937}.inline-check{display:flex;align-items:center;gap:10px;font-weight:800;margin:12px 0}.inline-check input{width:22px;height:22px}.social-profile-action{margin:8px 0}.compact-view-friend-btn{width:100%;min-height:34px;border-radius:999px;border:1px solid var(--border);background:rgba(0,0,0,.025);color:var(--primary);box-shadow:none;font-weight:900}


/* v59 remember me */
.remember-me-row,
.checkbox-row.remember-me-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: center;
  margin: 12px 0;
  font-weight: 800;
}

.remember-me-row input[type="checkbox"] {
  width: 22px;
  height: 22px;
}


/* v61 manual meal calories */
#manualMealCaloriesCard {
  border-left: 6px solid #f59e0b;
}

/* v62 save meal/recipe modal */
#saveAsRecipePromptCard,
#manualMealCaloriesCard {
  display: none !important;
}

.meal-recipe-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.45);
  align-items: center;
  justify-content: center;
  padding: 14px;
}

.meal-recipe-modal {
  width: min(720px, 100%);
  max-height: 92vh;
  overflow: auto;
  background: var(--card, #fff);
  color: var(--text, #111);
  border-radius: 22px;
  padding: 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.35);
}

.modal-x-btn {
  width: 38px;
  height: 38px;
  min-height: 38px;
  border-radius: 50%;
  padding: 0;
  font-size: 22px;
  line-height: 1;
  background: rgba(0,0,0,0.06);
  color: var(--text, #111);
  border: 0;
}

.manual-calorie-details {
  margin-top: 12px;
  background: rgba(0,0,0,0.035);
  border-radius: 16px;
  padding: 12px;
}

.manual-calorie-details summary {
  cursor: pointer;
  font-weight: 900;
  color: var(--primary);
}

.modal-action-grid {
  margin-top: 14px;
}


/* v63 save meal/recipe modal cleanup */
#saveAsRecipePromptCard,
#manualMealCaloriesCard {
  display: none !important;
}

.meal-recipe-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.45);
  align-items: center;
  justify-content: center;
  padding: 14px;
}

.meal-recipe-modal {
  width: min(720px, 100%);
  max-height: 92vh;
  overflow: auto;
  background: var(--card, #fff);
  color: var(--text, #111);
  border-radius: 22px;
  padding: 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.35);
}

.modal-x-btn {
  width: 38px;
  height: 38px;
  min-height: 38px;
  border-radius: 50%;
  padding: 0;
  font-size: 22px;
  line-height: 1;
  background: rgba(0,0,0,0.06);
  color: var(--text, #111);
  border: 0;
}

.manual-calorie-details {
  margin-top: 12px;
  background: rgba(0,0,0,0.035);
  border-radius: 16px;
  padding: 12px;
}

.manual-calorie-details summary {
  cursor: pointer;
  font-weight: 900;
  color: var(--primary);
}

.modal-action-grid {
  margin-top: 14px;
}


/* v64 remove old inline meal yield card */
#mealYieldCard {
  display: none !important;
}


/* v67 force-hide obsolete inline meal yield UI */
#mealYieldCard,
#saveAsRecipePromptCard,
#manualMealCaloriesCard,
#saveMealYieldButton {
  display: none !important;
}


/* v68 cleanup and compact trend graphs */
.trend-small-card canvas,
#trendsMainChart {
  max-height: 160px;
}

.food-edit-card details summary {
  cursor: pointer;
  font-weight: 900;
  color: var(--primary);
  padding: 8px 0;
}


/* v69 real vs expected weight loss */
#weightLossChart {
  width: 100%;
  display: block;
  max-height: 180px;
}


/* v71 exercise history cleanup */
.exercise-summary-grid,
.exercise-breakdown-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.summary-pill,
.exercise-breakdown-grid span {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 8px;
  text-align: center;
  background: rgba(0,0,0,0.025);
}

.summary-pill strong,
.exercise-breakdown-grid strong {
  display: block;
  font-size: 20px;
  font-weight: 900;
}

.summary-pill span,
.exercise-breakdown-grid small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.exercise-history-card {
  border-left: 6px solid var(--primary);
}

@media (max-width: 440px) {
  .exercise-summary-grid,
  .exercise-breakdown-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* v73 add meal and trends styles */
.meal-highlight-btn,
.restaurant-builder-btn,
.quick-add-btn,
.food-db-btn,
.save-consumption-btn {
  border: 0;
  color: #fff !important;
  font-weight: 800;
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
}
.quick-add-btn { background: #0f766e !important; }
.food-db-btn { background: #7c3aed !important; }
.save-consumption-btn { background: #d97706 !important; }
.restaurant-builder-btn { background: #2563eb !important; }
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:9999;display:grid;place-items:center;padding:16px}
.modal-card{background:#fff;border-radius:18px;padding:18px;max-width:520px;width:100%;max-height:85vh;overflow:auto;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.modal-close{background:#5b6d7a!important}
.trend-metric-card{border-left:5px solid #2563eb}

/* v74 trends integration */
.trend-metric-card {
  border-left: 5px solid #2563eb;
}

/* v75 direct log view */
.meal-items-list {
  margin-top: 10px;
  border-top: 1px solid #e5e7eb;
  padding-top: 8px;
}
.meal-item-row {
  padding: 8px 0;
  border-bottom: 1px solid #edf0f2;
}
.meal-item-row:last-child {
  border-bottom: 0;
}

/* v76 infinite daily logs */
.daily-consumption-page {
  padding-bottom: 90px;
}
.day-nav-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: 8px;
  align-items: center;
}
.day-nav-btn {
  background: #2563eb;
  color: #fff;
  font-weight: 800;
}
.current-day-label {
  text-align: center;
}
.daily-log-scroller {
  display: grid;
  gap: 16px;
}
.day-log-card {
  scroll-margin-top: 90px;
}
.daily-log-summary {
  border-left: 5px solid #d7dde2;
  padding-left: 10px;
}
.high-day-log {
  border-left: 6px solid #e6a700;
  background: #fff8e1;
  border-radius: 14px;
  padding: 10px;
}
.very-high-day-log {
  border-left: 6px solid #d93025;
  background: #fff0ef;
  border-radius: 14px;
  padding: 10px;
}
.meal-card {
  border-left: 5px solid #d7dde2;
}
.high-meal {
  border-left: 5px solid #e6a700 !important;
  background: #fff8e1 !important;
}
.very-high-meal {
  border-left: 5px solid #d93025 !important;
  background: #fff0ef !important;
}
.meal-calorie-line {
  font-size: 22px;
  font-weight: 800;
  margin: 8px 0;
}
.button-danger {
  background: #b3261e !important;
  color: #fff !important;
}
.meal-items-list {
  margin-top: 10px;
  border-top: 1px solid #e5e7eb;
  padding-top: 8px;
}
.meal-item-row {
  padding: 8px 0;
  border-bottom: 1px solid #edf0f2;
}
.meal-item-row:last-child {
  border-bottom: 0;
}
@media(max-width:480px) {
  .day-nav-row {
    grid-template-columns: 1fr;
  }
}

/* v77 single day swipe logs */
.single-day-header {
  text-align: center;
  position: sticky;
  top: 56px;
  z-index: 5;
}
.single-day-header h3 {
  margin: 0 0 4px 0;
}
.single-day-log {
  transition: transform .16s ease, opacity .16s ease;
  will-change: transform, opacity;
}
.single-day-log.fade-loading {
  opacity: .65;
}
.single-day-log.slide-out-left {
  transform: translateX(-18px);
  opacity: .45;
}
.single-day-log.slide-out-right {
  transform: translateX(18px);
  opacity: .45;
}
.single-day-log.slide-in-left,
.single-day-log.slide-in-right {
  transform: translateX(0);
  opacity: 1;
}
.daily-log-scroller,
.day-nav-row,
.day-nav-btn {
  display: initial;
}
.single-day-log-page .day-nav-row,
.single-day-log-page .day-nav-btn,
.single-day-log-page .daily-log-scroller {
  display: none !important;
}

/* v79 friend summary today consumption */
.friend-today-meal {
  border-left: 5px solid #2563eb;
}
.friend-consumption-item {
  padding: 8px 0;
  border-bottom: 1px solid #edf0f2;
}
.friend-consumption-item:last-child {
  border-bottom: 0;
}
.friend-summary-feed-item {
  border-left: 5px solid #1f7a4d;
}

/* v80 exercise login css */
.exercise-log-card{border-left:5px solid #0f766e}
.button-danger{background:#b3261e!important;color:#fff!important}

/* v81 more buttons exercise inline */
.more-button-list {
  display: grid;
  gap: 12px;
}
.more-action-card {
  width: 100%;
  display: grid;
  grid-template-columns: 42px 1fr 20px;
  align-items: center;
  gap: 12px;
  text-align: left;
  background: #fff;
  color: #222;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
.more-action-icon {
  font-size: 26px;
}
.more-action-content strong,
.more-action-content small {
  display: block;
}
.more-action-content small {
  color: #666;
  font-weight: normal;
  margin-top: 2px;
}
.more-action-arrow {
  font-size: 28px;
  color: #888;
}
.danger-card {
  border-left: 5px solid #b3261e;
}
.exercise-inline-editor {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e5e7eb;
}
.exercise-history-card {
  border-left: 5px solid #0f766e;
}
.button-danger {
  background: #b3261e !important;
  color: #fff !important;
}

/* v82 exercise swipe trends */
.single-day-exercise-page .single-day-header {
  text-align: center;
  position: sticky;
  top: 56px;
  z-index: 5;
}
.single-day-exercise-page .single-day-header h3 {
  margin: 0 0 4px 0;
}
.single-day-log {
  transition: transform .16s ease, opacity .16s ease;
  will-change: transform, opacity;
}
.single-day-log.fade-loading {
  opacity: .65;
}
.single-day-log.slide-out-left {
  transform: translateX(-18px);
  opacity: .45;
}
.single-day-log.slide-out-right {
  transform: translateX(18px);
  opacity: .45;
}
.single-day-log.slide-in-left,
.single-day-log.slide-in-right {
  transform: translateX(0);
  opacity: 1;
}
.exercise-history-card {
  border-left: 5px solid #0f766e;
}
.exercise-inline-editor {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e5e7eb;
}
.trend-metric-card {
  border-left: 5px solid #2563eb;
}

/* v83 nav and swipe date pages */
.add-action-card {
  border-left: 5px solid #d97706;
}
[data-swipe-date-page]::before {
  content: "Swipe left/right to change date";
  display: block;
  text-align: center;
  color: #666;
  font-size: 12px;
  margin: 0 0 8px 0;
}

/* v84 animations priorities */
.date-swipe-overlay{position:fixed;inset:0;z-index:99999;display:grid;place-items:center;background:rgba(15,23,42,.20);pointer-events:none;animation:dateOverlayFade .65s ease forwards}
.date-swipe-card{background:#fff;color:#111827;border-radius:22px;padding:22px 28px;min-width:210px;text-align:center;box-shadow:0 18px 45px rgba(0,0,0,.28);animation:dateCardPop .45s ease forwards}
.date-swipe-arrow{font-size:44px;line-height:1;color:#2563eb}
.date-swipe-card strong,.date-swipe-card span{display:block}
.date-swipe-card strong{font-size:20px;margin-top:6px}
.date-swipe-card span{color:#666;margin-top:4px}
.page-swipe-left{animation:pageSwipeLeft .28s ease forwards}
.page-swipe-right{animation:pageSwipeRight .28s ease forwards}
@keyframes dateOverlayFade{0%{opacity:0}18%{opacity:1}100%{opacity:0}}
@keyframes dateCardPop{0%{transform:scale(.88) translateY(12px);opacity:0}40%{transform:scale(1.03);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes pageSwipeLeft{0%{transform:translateX(0);opacity:1}100%{transform:translateX(-28px);opacity:.45}}
@keyframes pageSwipeRight{0%{transform:translateX(0);opacity:1}100%{transform:translateX(28px);opacity:.45}}
.priority-note{border-radius:14px;padding:10px 12px;margin-top:10px;background:#f8fafc;border-left:5px solid #94a3b8}
.priority-note p{margin:4px 0 0 0}
.priority-high{background:#fff0ef;border-left-color:#d93025}
.priority-medium{background:#fff8e1;border-left-color:#e6a700}
.priority-low{background:#eff6ff;border-left-color:#2563eb}
.priority-quote{background:#e8f7ee;border-left-color:#1f7a4d}
.trend-details-food summary{cursor:pointer;padding:8px 0}
.mini-note{display:block;padding:12px;color:#666;font-size:13px}

/* v85 recipe/food search source shading and recipe display */
.search-result-card {
  position: relative;
  border-left: 5px solid #cbd5e1;
}
.search-own {
  background: #e0f2fe !important;
  border-left-color: #0284c7 !important;
}
.search-friend {
  background: #dcfce7 !important;
  border-left-color: #16a34a !important;
}
.search-public {
  background: #f8fafc !important;
  border-left-color: #94a3b8 !important;
}
.source-pill {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.75);
  margin-bottom: 5px;
}
.selected-recipe-card {
  border-left: 5px solid #7c3aed;
}
.recipe-title-pill {
  display: inline-block;
  margin: 6px 0;
  padding: 4px 9px;
  border-radius: 999px;
  background: #ede9fe;
  color: #4c1d95;
  font-size: 12px;
  font-weight: 800;
}
.recipe-consumption-box {
  margin-top: 8px;
  padding: 10px;
  border-radius: 12px;
  background: #f5f3ff;
  border: 1px solid #ddd6fe;
}
.recipe-ingredient-row {
  padding: 7px 0;
  border-bottom: 1px solid #e9d5ff;
}
.recipe-ingredient-row:last-child {
  border-bottom: 0;
}

/* v86 recipe source shading and recipe calories fix */
.search-result-card {
  position: relative;
  border-left: 5px solid #cbd5e1;
}
.search-own {
  background: #e0f2fe !important;
  border-left-color: #0284c7 !important;
}
.search-friend {
  background: #dcfce7 !important;
  border-left-color: #16a34a !important;
}
.search-public {
  background: #f8fafc !important;
  border-left-color: #94a3b8 !important;
}
.source-pill {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.75);
  margin-bottom: 5px;
}
.selected-recipe-card {
  border-left: 5px solid #7c3aed;
}
.recipe-title-pill {
  display: inline-block;
  margin: 6px 0;
  padding: 4px 9px;
  border-radius: 999px;
  background: #ede9fe;
  color: #4c1d95;
  font-size: 12px;
  font-weight: 800;
}
.recipe-consumption-box {
  margin-top: 8px;
  padding: 10px;
  border-radius: 12px;
  background: #f5f3ff;
  border: 1px solid #ddd6fe;
}
.recipe-ingredient-row {
  padding: 7px 0;
  border-bottom: 1px solid #e9d5ff;
}
.recipe-ingredient-row:last-child {
  border-bottom: 0;
}

/* v92 clean upgraded feed */
.dashboard-feed-card .section-title-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}
.small-button {
  padding: 6px 10px;
  font-size: 13px;
}
.upgraded-feed-list {
  display:grid;
  gap:10px;
}
.upgraded-feed-card {
  display:grid;
  grid-template-columns:42px 1fr;
  gap:10px;
  padding:12px;
  border-radius:16px;
  background:#fff;
  border:1px solid #e5e7eb;
  box-shadow:0 2px 10px rgba(0,0,0,.05);
  cursor:pointer;
}
.compact-feed-card {
  padding:10px;
}
.feed-avatar {
  width:38px;
  height:38px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#ecfdf5;
  font-size:22px;
}
.feed-topline {
  display:flex;
  justify-content:space-between;
  gap:8px;
  align-items:center;
}
.feed-date {
  font-size:11px;
  color:#6b7280;
}
.feed-title {
  font-weight:800;
  margin-top:2px;
}
.feed-content p {
  margin:4px 0;
  color:#4b5563;
}
.feed-chip-row {
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-top:6px;
}
.feed-chip {
  display:inline-block;
  padding:3px 8px;
  border-radius:999px;
  background:#f1f5f9;
  font-size:12px;
  font-weight:700;
}
.exercise-estimate-box {
  border-left:5px solid #0f766e;
  background:#ecfdf5;
}

/* v94 exercise swipe, friend summary, graph fit */
.single-day-log {
  transition: transform .16s ease, opacity .16s ease;
  will-change: transform, opacity;
}
.single-day-log.fade-loading {
  opacity: .65;
}
.single-day-log.slide-out-left {
  transform: translateX(-18px);
  opacity: .45;
}
.single-day-log.slide-out-right {
  transform: translateX(18px);
  opacity: .45;
}
.single-day-log.slide-in-left,
.single-day-log.slide-in-right {
  transform: translateX(0);
  opacity: 1;
}
.date-swipe-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  background: rgba(15,23,42,.20);
  pointer-events: none;
  animation: dateOverlayFade .65s ease forwards;
}
.date-swipe-card {
  background: #fff;
  color: #111827;
  border-radius: 22px;
  padding: 22px 28px;
  min-width: 210px;
  text-align: center;
  box-shadow: 0 18px 45px rgba(0,0,0,.28);
  animation: dateCardPop .45s ease forwards;
}
.date-swipe-arrow {
  font-size: 44px;
  line-height: 1;
  color: #2563eb;
}
.date-swipe-card strong,
.date-swipe-card span {
  display: block;
}
.date-swipe-card strong {
  font-size: 20px;
  margin-top: 6px;
}
.date-swipe-card span {
  color: #666;
  margin-top: 4px;
}
.page-swipe-left {
  animation: pageSwipeLeft .28s ease forwards;
}
.page-swipe-right {
  animation: pageSwipeRight .28s ease forwards;
}
@keyframes dateOverlayFade {
  0% { opacity: 0; }
  18% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes dateCardPop {
  0% { transform: scale(.88) translateY(12px); opacity: 0; }
  40% { transform: scale(1.03); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes pageSwipeLeft {
  0% { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(-28px); opacity: .45; }
}
@keyframes pageSwipeRight {
  0% { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(28px); opacity: .45; }
}
.exercise-breakdown-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
  gap: 8px;
  margin: 10px 0;
}
.exercise-breakdown-grid span {
  background: #f8fafc;
  border-radius: 12px;
  padding: 8px;
  text-align: center;
}
.exercise-breakdown-grid strong,
.exercise-breakdown-grid small {
  display: block;
}
.friend-exercise-summary {
  border-left: 5px solid #0f766e;
  background: #ecfdf5;
}
.friend-exercise-item {
  border-left: 5px solid #2563eb;
}
.card canvas,
#friendSummaryChart {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: 170px !important;
  box-sizing: border-box;
}

/* v94 friend summary exercise history loading */
.friend-exercise-summary {
  border-left: 5px solid #0f766e;
  background: #ecfdf5;
}
.friend-exercise-item {
  border-left: 5px solid #2563eb;
}
.friend-summary-feed-item {
  border-left: 5px solid #1f7a4d;
}

/* v96 friend summary v87 logic plus exercise */
.friend-exercise-summary {
  border-left: 5px solid #0f766e;
  background: #ecfdf5;
}
.friend-exercise-item {
  border-left: 5px solid #2563eb;
}

/* v97 recipe serving details */
.recipe-serving-info {
  margin: 8px 0;
  padding: 8px 10px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
}
.selected-recipe-card .recipe-serving-info {
  background: #eef2ff;
  border-color: #c7d2fe;
}

/* v99 unified date swipe */
.date-swipe-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  background: rgba(15,23,42,.18);
  pointer-events: none;
  animation: dateOverlayFade .7s ease forwards;
}
.date-swipe-card {
  min-width: 210px;
  padding: 22px 28px;
  border-radius: 22px;
  background: #fff;
  color: #111827;
  text-align: center;
  box-shadow: 0 18px 45px rgba(0,0,0,.28);
  animation: dateCardPop .45s ease forwards;
}
.date-swipe-arrow {
  font-size: 44px;
  line-height: 1;
}
.date-swipe-card strong,
.date-swipe-card span {
  display: block;
}
.date-swipe-card span {
  margin-top: 4px;
  color: #64748b;
}
.page-swipe-left {
  animation: pageSwipeLeft .28s ease forwards;
}
.page-swipe-right {
  animation: pageSwipeRight .28s ease forwards;
}
@keyframes dateOverlayFade {
  0% { opacity: 0; }
  18% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes dateCardPop {
  0% { transform: scale(.88) translateY(12px); opacity: 0; }
  40% { transform: scale(1.03); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes pageSwipeLeft {
  0% { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(-28px); opacity: .45; }
}
@keyframes pageSwipeRight {
  0% { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(28px); opacity: .45; }
}
.swipe-only-date-card {
  text-align: center;
}
.date-fallback-btn {
  display: none !important;
}

/* v101 meal type buttons and fixes */
.meal-type-buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 8px;
  margin: 8px 0 14px;
}
.meal-type-btn {
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  border-radius: 14px;
  padding: 12px 10px;
  font-weight: 800;
}
.meal-type-btn.active {
  background: #1f7a4d;
  color: #fff;
  border-color: #1f7a4d;
  box-shadow: 0 4px 14px rgba(31,122,77,.25);
}
#recipePageSearch {
  width: 100%;
}

/* v102 calories burned swipe-only, recipe search top, next badge notice */
.swipe-only-date-card {
  justify-content: center;
  text-align: center;
}
.swipe-only-date-card .day-title {
  width: 100%;
}
.date-fallback-btn,
#prevDayBtn,
#nextDayBtn {
  display: none !important;
}
.recipe-search-top-card {
  position: sticky;
  top: 0;
  z-index: 5;
}
.next-badge-notice {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 10px;
  align-items: center;
  border-left: 5px solid #7c3aed;
  background: #f5f3ff;
}
.next-badge-icon {
  font-size: 28px;
  text-align: center;
}
.next-badge-notice p {
  margin: 4px 0 8px;
}

/* v103 swipe fix: vertical scroll stays normal, horizontal swipe changes date */
[data-unified-date-swipe] {
  touch-action: pan-y;
  overscroll-behavior-x: contain;
}
.page-swipe-left,
.page-swipe-right {
  pointer-events: auto !important;
}
@keyframes pageSwipeLeft {
  0% { transform: translateX(0); opacity: 1; }
  60% { transform: translateX(-20px); opacity: .82; }
  100% { transform: translateX(0); opacity: 1; }
}
@keyframes pageSwipeRight {
  0% { transform: translateX(0); opacity: 1; }
  60% { transform: translateX(20px); opacity: .82; }
  100% { transform: translateX(0); opacity: 1; }
}
.swipe-only-date-card {
  justify-content: center;
  text-align: center;
}
.swipe-only-date-card .day-title {
  width: 100%;
}
#prevDayBtn,
#nextDayBtn,
.date-fallback-btn {
  display: none !important;
}
.date-swipe-overlay {
  pointer-events: none;
}

/* V103 FIX V3 EXTRA */
.unit-toggle{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.active-unit{background:#0f5132!important}
.table-wrap{overflow-x:auto}
.history-table{width:100%;border-collapse:collapse;font-size:14px}
.history-table th,.history-table td{border-bottom:1px solid #ddd;padding:10px 8px;text-align:left}
.history-table th{background:#f1f5f3}

/* V103 MINIMAL FIX V2 CSS */
.unit-toggle{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.unit-toggle input[type="radio"]{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.unit-option{
  display:block;
  width:100%;
  padding:13px;
  border-radius:12px;
  border:1px solid #ccc;
  text-align:center;
  font-weight:bold;
  background:#1f7a4d;
  color:#fff;
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select:none;
}
.active-unit{
  background:#0f5132!important;
  box-shadow:0 0 0 3px rgba(31,122,77,.2);
}
.table-wrap{overflow-x:auto}
.history-table{width:100%;border-collapse:collapse;font-size:14px}
.history-table th,.history-table td{border-bottom:1px solid #ddd;padding:10px 8px;text-align:left}
.history-table th{background:#f1f5f3}

/* V103 CACHE PROGRESS FIX CSS */
.unit-toggle{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.unit-toggle input[type="radio"]{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.unit-option{
  display:block;
  width:100%;
  padding:13px;
  border-radius:12px;
  border:1px solid #ccc;
  text-align:center;
  font-weight:bold;
  background:#1f7a4d;
  color:#fff;
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select:none;
}
.active-unit{
  background:#0f5132!important;
  box-shadow:0 0 0 3px rgba(31,122,77,.2);
}
#weightChart,#waistChart,#chestChart{
  min-height:220px!important;
  height:220px!important;
}
.table-wrap{overflow-x:auto}
.history-table{width:100%;border-collapse:collapse;font-size:14px}
.history-table th,.history-table td{border-bottom:1px solid #ddd;padding:10px 8px;text-align:left}
.history-table th{background:#f1f5f3}

/* CSV SAFE IMPORT CSS */
.csv-paste-box{min-height:150px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;font-size:13px;white-space:pre}
.csv-import-card{border-left:5px solid #1f7a4d}
.duplicate-food-box{margin-top:12px}
.duplicate-table{width:100%;border-collapse:collapse;font-size:13px}
.duplicate-table th,.duplicate-table td{border-bottom:1px solid #ddd;padding:6px;text-align:left}
.button-secondary{background:#5b6d7a!important}

/* CSV ADD MEAL IMPORT CSS */
.csv-paste-box{min-height:130px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;font-size:13px;white-space:pre}
.csv-import-card{border-left:5px solid #1f7a4d}
.duplicate-table{width:100%;border-collapse:collapse;font-size:13px}
.duplicate-table th,.duplicate-table td{border-bottom:1px solid #ddd;padding:6px;text-align:left}
.button-secondary{background:#5b6d7a!important}

/* BULK FOOD IMPORT FINAL CSS */
.bulk-csv-paste-box{min-height:260px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;font-size:13px;white-space:pre}
.csv-format-box{min-height:90px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;font-size:12px;white-space:pre}
.csv-paste-box{min-height:140px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;font-size:13px;white-space:pre}
.duplicate-table{width:100%;border-collapse:collapse;font-size:13px}
.duplicate-table th,.duplicate-table td{border-bottom:1px solid #ddd;padding:6px;text-align:left}
.button-secondary{background:#5b6d7a!important}
.csv-help-details summary{font-weight:bold;padding:10px 0}

/* BULK IMPORT RESULT FIX CSS */
#runBulkFoodImportBtn:disabled{opacity:.6;cursor:not-allowed}
.import-summary-good{background:#e9f8ef;border-left:4px solid #1f7a4d}
.import-summary-warning{background:#fff7e6;border-left:4px solid #b7791f}

/* CATEGORY IMPORT FIX CSS */
.warning-text{color:#8a4b00;font-weight:600}

/* SERVING CONVERSION CSS */
.serving-conversion-grid{display:grid;grid-template-columns:1fr 120px;gap:8px;align-items:center}
.recipe-serving-info{background:#f6faf7;border-radius:12px;padding:10px;margin:8px 0}

/* SMART NAME DUPLICATE CSS */
.warning-text{color:#8a4b00;font-weight:600}.duplicate-table{width:100%;border-collapse:collapse;font-size:13px}.duplicate-table th,.duplicate-table td{border-bottom:1px solid #ddd;padding:6px;text-align:left}

/* EXERCISE IMPORT FIX CSS */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:9999;align-items:center;justify-content:center;padding:16px}
.modal-card{background:#fff;border-radius:18px;padding:18px;max-width:540px;width:100%;max-height:88vh;overflow:auto}
.modal-close{float:right;width:auto;padding:8px 12px}

/* RECIPE ONETIME FIX CSS */
.one-time-food-box{border-left:5px solid #3967d7}
.one-time-food-box h3{margin-top:0}

/* FRIEND COPY MEAL CSS */
.copy-friend-meal-btn{width:100%;margin:8px 0;padding:10px 12px;border-radius:12px;border:0;background:#1f7a4d;color:#fff;font-weight:700}
.social-copy-meal-action{padding:0 8px}

/* FRIEND SUMMARY COPY FEED STATS CSS */
.copy-friend-meal-btn{width:100%;margin-top:10px;padding:10px 12px;border-radius:12px;border:0;background:#1f7a4d;color:#fff;font-weight:700}
.feed-stat-chip{display:inline-block;margin-top:6px;padding:5px 9px;border-radius:999px;background:#eef7f1;color:#1f7a4d;font-size:12px;font-weight:700}

/* DASHBOARD RICH FEED OWN MEAL FIX CSS */
.feed-stat-chip{display:inline-block;margin-top:6px;padding:5px 9px;border-radius:999px;background:#eef7f1;color:#1f7a4d;font-size:12px;font-weight:700}
.feed-detail-line{margin-top:5px;font-size:12px;color:#4a5568;line-height:1.35}
.copy-friend-meal-btn{width:100%;margin-top:10px;padding:10px 12px;border-radius:12px;border:0;background:#1f7a4d;color:#fff;font-weight:700}