:root {
  --bg: #EEF5F7;
  --surface: #FFFFFF;
  --text: #123149;
  --muted: #5F7284;
  --line: #DCEBF0;
  --green: #2D9A4A;
  --green-soft: rgba(45, 154, 74, 0.12);
  --amber: #D9A400;
  --amber-soft: rgba(217, 164, 0, 0.15);
  --red: #DA5B47;
  --red-soft: rgba(218, 91, 71, 0.12);
  --teal: #00A7C4;
  --ink: #16353B;
  --frame: #173B42;
  --shadow: 0 18px 48px rgba(18, 49, 73, 0.08);
  --radius: 24px;
  --poshana-teal: #0c9dae;
  --poshana-teal-deep: #077784;
  --poshana-green: #16a34a;
  --poshana-yellow: #ffe104;
  --poshana-mist: #eefbfd;
  --poshana-ink: #15343a;
}

.premium-dashboard-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 26px;
  border-radius: 32px;
  background:
    radial-gradient(circle at top right, rgba(0, 167, 196, 0.18), transparent 36%),
    linear-gradient(135deg, #FFFFFF 0%, #F0FBFD 100%);
  border: 1px solid rgba(0, 167, 196, 0.16);
  box-shadow: 0 20px 54px rgba(18, 49, 73, 0.08);
}

.premium-dashboard-hero h1 {
  margin-top: 4px;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1;
}

.premium-score-block {
  display: grid;
  place-items: center;
  gap: 10px;
  min-width: 140px;
  padding: 18px;
  border-radius: 28px;
  background: #FFFFFF;
  box-shadow: inset 0 0 0 1px #E4EFF3;
}

.premium-score-block strong {
  font-size: 3.4rem;
  line-height: 1;
  color: var(--text);
}

.premium-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 18px;
}

.premium-card {
  display: grid;
  gap: 14px;
  padding: 22px;
  border-radius: 26px;
  background: #FFFFFF;
  border: 1px solid #E3EEF2;
  box-shadow: 0 14px 38px rgba(18, 49, 73, 0.06);
}

.premium-action-card {
  background: linear-gradient(180deg, #FFFFFF, #F7FFFD);
}

.premium-marker-list {
  display: grid;
  gap: 10px;
}

.premium-marker-list div,
.premium-nutrition-grid div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  background: #F7FBFC;
  border: 1px solid #E4EFF3;
}

.premium-marker-list span,
.premium-nutrition-grid span {
  color: var(--muted);
  font-weight: 800;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.premium-marker-list strong,
.premium-nutrition-grid strong {
  color: var(--text);
}

.premium-nutrition-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.food-map-mini-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.food-map-mini-row span {
  padding: 10px 13px;
  border-radius: 999px;
  font-weight: 800;
}

.mini-green {
  background: rgba(45, 154, 74, 0.12);
  color: #047857;
}

.mini-amber {
  background: rgba(217, 164, 0, 0.14);
  color: #9a6b00;
}

.mini-red {
  background: rgba(218, 91, 71, 0.12);
  color: #b91c1c;
}

.dashboard-trust-line {
  margin-top: 18px;
  text-align: center;
  font-size: 0.9rem;
  color: var(--muted);
}

@media (max-width: 780px) {
  .premium-dashboard-hero {
    display: grid;
  }

  .premium-score-block {
    justify-self: stretch;
  }

  .premium-dashboard-grid {
    grid-template-columns: 1fr;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: "Manrope", sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100dvh;
}

button, input { font: inherit; }
button { cursor: pointer; border: 0; }

.app-shell {
  width: 100%;
  min-height: 100dvh;
  margin: 0;
  background:
    radial-gradient(circle at top, rgba(0, 167, 196, 0.12), transparent 32%),
    linear-gradient(180deg, #F5FAFB 0%, var(--bg) 46%, #F8FCFD 100%);
  position: relative;
  padding: 0 0 132px;
}

.status-bar {
  display: flex;
  justify-content: space-between;
  padding: 14px 20px 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}

.screen {
  display: none;
}

.screen.is-active {
  display: block;
}

.screen-content {
  padding: 20px 20px calc(132px + env(safe-area-inset-bottom));
  display: grid;
  gap: 28px;
  overflow-x: clip;
  width: min(100%, 1100px);
  margin: 0 auto;
}

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

.screen-header.compact {
  margin-top: 6px;
}

.screen-kicker, .label, .block-label {
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal);
}

h1, h2, h3, p {
  margin: 0;
}

h1, h2, h3 {
  font-family: "Fraunces", serif;
  letter-spacing: -0.02em;
}

h1 { font-size: 30px; line-height: 1.08; }
h2 { font-size: 21px; line-height: 1.18; font-weight: 700; letter-spacing: -0.3px; }
h3 { font-size: 18px; line-height: 1.3; }
p { color: var(--muted); line-height: 1.65; }

.card {
  border-radius: 26px;
  padding: 18px;
  background: linear-gradient(180deg, #ffffff, #f8fbfc);
  box-shadow: 0 8px 30px rgba(0,0,0,0.06);
  border: 1px solid rgba(220, 235, 240, 0.92);
  animation: fadeUp 0.4s ease;
}

.profile-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
}

.profile-membership-card,
.profile-section-card {
  display: grid;
  gap: 12px;
  border-radius: 24px;
  padding: 16px;
  background: linear-gradient(180deg, #fff, #f5fdff);
  border: 1px solid #deedf2;
  box-shadow: 0 14px 28px rgba(18, 49, 73, 0.06);
}

.membership-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.membership-meta-grid div {
  display: grid;
  gap: 4px;
  padding: 12px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid #e4eff3;
}

.membership-meta-grid span {
  color: var(--muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 800;
}

.membership-progress-track {
  width: 100%;
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  background: #e5f5f8;
}

.membership-progress-fill {
  display: block;
  height: 100%;
  width: 25%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--poshana-teal), var(--poshana-green));
  transition: width 320ms ease;
}

.helper {
  color: #6b7c85;
  font-size: 0.9rem;
}

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

.dashboard-frame {
  background: linear-gradient(180deg, #23474D, var(--frame));
  padding: 18px;
  border-radius: 34px;
  box-shadow: 0 28px 60px rgba(12, 31, 38, 0.18);
  width: 100%;
}

.dashboard-board-head,
.progress-board-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 10px 10px 18px;
  color: #fff;
}

.dashboard-board-head h1,
.progress-board-head h1 {
  max-width: 320px;
  color: #163149;
  font-size: 2.1rem;
  line-height: 1.08;
}

.dashboard-frame > *,
.progress-frame > * {
  position: relative;
}

.dashboard-board-head,
.dashboard-board-grid,
.dashboard-stats-strip,
.progress-board-head,
.progress-board-grid,
.progress-detail-card {
  background: linear-gradient(180deg, #FDFEFE 0%, #F3F9FB 100%);
}

.dashboard-board-head,
.progress-board-head {
  border-radius: 28px 28px 0 0;
  margin-bottom: 0;
}

.dashboard-board-grid,
.progress-board-grid {
  padding: 0 12px 12px;
}

.dashboard-stats-strip,
.progress-detail-card {
  border-radius: 0 0 28px 28px;
  padding: 0 12px 14px;
}

.dashboard-board-grid {
  display: grid;
  grid-template-columns: 1.1fr 1.2fr;
  gap: 16px;
}

.dashboard-score-panel {
  background: #FFFFFF;
  border-radius: 28px;
  padding: 18px 14px;
  display: grid;
  gap: 18px;
  justify-items: center;
  min-height: 100%;
}

.branded-avatar {
  width: 58px;
  height: 58px;
  background: rgba(255,255,255,0.82);
}

.branded-avatar img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.dashboard-kicker {
  margin-bottom: 10px;
}

.score-ring {
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: conic-gradient(var(--green) 0deg, var(--green) var(--ring-angle, 260deg), #DDEEE5 var(--ring-angle, 260deg), #DDEEE5 360deg);
  display: grid;
  place-items: center;
}

.score-ring-inner {
  width: 126px;
  height: 126px;
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 18px;
}

.score-ring .score {
  font-size: 3.3rem;
  line-height: 1;
  font-weight: 800;
  color: #163149;
}

.score-ring-label {
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 800;
  color: #4A6677;
}

.dashboard-pill-stack {
  display: grid;
  gap: 10px;
}

.dashboard-pill-stack .status-pill {
  justify-self: center;
}

.dashboard-right-column,
.progress-side-stack {
  display: grid;
  gap: 16px;
}

.dashboard-summary-card,
.dashboard-response-card,
.progress-side-card,
.progress-trend-card {
  border-radius: 26px;
  background: #fff;
}

.dashboard-track-state,
.progress-logic-pill {
  padding: 0.48rem 0.85rem;
  border-radius: 999px;
  background: rgba(0, 167, 196, 0.1);
  color: var(--teal);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
}

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

.metric-chip,
.stat-tile {
  background: #ECF8FB;
  border-radius: 18px;
  padding: 14px 12px;
  display: grid;
  gap: 8px;
}

.metric-chip span,
.stat-tile span {
  font-size: 12px;
  color: #5E7386;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.metric-chip strong,
.stat-tile strong {
  font-size: 1.05rem;
  color: #163149;
}

.response-marker-list {
  display: grid;
  gap: 14px;
}

.response-marker-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 16px 14px;
  border-radius: 18px;
  background: #F9FCFD;
  border: 1px solid #E6F0F3;
}

.response-marker-row strong {
  color: #163149;
}

.dashboard-stats-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.progress-frame {
  padding-bottom: 18px;
}

.progress-board-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 16px;
}

.progress-trend-card {
  padding: 18px;
}

.progress-line-list {
  display: grid;
  gap: 18px;
  margin-top: 18px;
}

.progress-line-row {
  display: grid;
  gap: 8px;
}

.progress-line-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-weight: 700;
}

.progress-line-track {
  height: 10px;
  border-radius: 999px;
  background: #E6EBEF;
  overflow: hidden;
}

.progress-line-fill {
  height: 100%;
  border-radius: inherit;
  width: 0;
}

.progress-line-fill.is-green { background: var(--green); }
.progress-line-fill.is-amber { background: var(--amber); }
.progress-line-fill.is-red { background: var(--red); }

.progress-side-card {
  min-height: 132px;
}

.progress-side-card p {
  color: #536D80;
  line-height: 1.7;
}

.progress-summary-copy {
  margin-top: 18px;
}

.progress-detail-card {
  display: grid;
  gap: 14px;
}

.score-card {
  text-align: center;
  display: grid;
  gap: 10px;
  padding: 32px 20px;
}

.score-card .score {
  font-size: 72px;
  line-height: 1;
  font-weight: 800;
  color: var(--text);
}

.status-pill,
.score-badge {
  display: inline-flex;
  align-items: flex-start;
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.score-red {
  background: rgba(220, 38, 38, 0.12);
  color: #b91c1c;
  border: 1px solid rgba(220, 38, 38, 0.2);
}

.score-amber {
  background: rgba(217, 119, 6, 0.12);
  color: #b45309;
  border: 1px solid rgba(217, 119, 6, 0.2);
}

.score-green {
  background: rgba(5, 150, 105, 0.12);
  color: #047857;
  border: 1px solid rgba(5, 150, 105, 0.2);
}

.score-scale-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.insight-card {
  display: grid;
  gap: 14px;
  background: linear-gradient(180deg, #FFFFFF, #FCFCFA);
}

.score-breakdown-card {
  display: grid;
  gap: 16px;
  background: linear-gradient(180deg, #FFFFFF, #F8FCFD);
}

.food-map-card {
  display: grid;
  gap: 18px;
}

.guidance-card {
  display: grid;
  gap: 14px;
}

.food-map-body {
  display: grid;
  gap: 18px;
}

.food-map-group {
  border-radius: 22px;
  padding: 16px;
  border: 1px solid #E4EFF3;
  background: #F8FCFD;
}

.food-map-group-head {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
}

.food-map-group-head h3 {
  font-size: 1.05rem;
}

.food-map-list {
  display: grid;
  gap: 10px;
}

.food-map-item {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  border-radius: 16px;
  background: #FFFFFF;
  border: 1px solid #E8F0F3;
}

.food-map-item div {
  display: grid;
  gap: 5px;
}

.food-map-item strong {
  color: var(--text);
}

.food-map-item span {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.food-map-item em {
  font-style: normal;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--muted);
  white-space: nowrap;
}

.food-map-green {
  background: rgba(45, 154, 74, 0.08);
  border-color: rgba(45, 154, 74, 0.18);
}

.food-map-amber {
  background: rgba(217, 164, 0, 0.1);
  border-color: rgba(217, 164, 0, 0.22);
}

.food-map-red {
  background: rgba(218, 91, 71, 0.08);
  border-color: rgba(218, 91, 71, 0.18);
}

.food-map-empty {
  display: grid;
  gap: 14px;
}

.food-map-guidance-list {
  display: grid;
  gap: 10px;
}

.food-map-guidance-card {
  display: grid;
  gap: 6px;
  padding: 14px;
  border-radius: 16px;
  background: #FFFFFF;
  border: 1px solid #E8F0F3;
}

.food-map-guidance-card strong {
  color: var(--text);
}

.food-map-guidance-card span {
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

.improve-estimate-row {
  margin-top: 10px;
}

.smart-insight-card {
  display: grid;
  gap: 10px;
  padding: 16px;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid #E6EEF2;
  box-shadow: 0 8px 24px rgba(18, 49, 73, 0.05);
}

.smart-insight-card h3 {
  font-size: 1.05rem;
}

.smart-insight-card p {
  color: var(--muted);
  line-height: 1.55;
}

.smart-insight-action {
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(0, 167, 196, 0.08);
  color: var(--teal);
  font-weight: 800;
}

.insight-hero-card {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  padding: 24px;
  border-radius: 28px;
  background: linear-gradient(135deg, #ffffff 0%, #effbfd 100%);
  border: 1px solid rgba(0, 167, 196, 0.16);
  box-shadow: 0 18px 44px rgba(18, 49, 73, 0.08);
}

.insight-hero-card h1 {
  margin-top: 4px;
  font-size: 2rem;
}

.insight-status-pill {
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(217, 164, 0, 0.13);
  color: #9a6b00;
  font-weight: 800;
  white-space: nowrap;
}

.insight-simple-grid {
  display: grid;
  gap: 16px;
}

.insight-simple-card {
  display: grid;
  gap: 12px;
  padding: 20px;
  border-radius: 24px;
  background: #ffffff;
  border: 1px solid #E3EEF2;
  box-shadow: 0 12px 34px rgba(18, 49, 73, 0.06);
}

.insight-bullet-list {
  display: grid;
  gap: 10px;
}

.insight-bullet {
  padding: 13px 14px;
  border-radius: 16px;
  background: #F7FBFC;
  border: 1px solid #E4EFF3;
  color: var(--text);
  font-weight: 700;
  line-height: 1.45;
}

.next-step-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.next-step-chip {
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(0, 167, 196, 0.1);
  color: var(--teal);
  font-weight: 800;
}

.demo-choice-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.demo-estimate-grid {
  display: grid;
  gap: 10px;
}

.demo-estimate-grid div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  border-radius: 14px;
  background: #F7FBFC;
  border: 1px solid #E4EFF3;
}

.food-map-teaser-card {
  background: linear-gradient(180deg, #FFFFFF, #F7FFFD);
}

@media (max-width: 720px) {
  .insight-hero-card {
    display: grid;
  }

  .insight-status-pill {
    justify-self: start;
  }
}

.score-breakdown-list {
  display: grid;
  gap: 12px;
}

.score-breakdown-item {
  display: grid;
  grid-template-columns: 12px 1fr;
  gap: 12px;
  align-items: start;
  padding: 12px 14px;
  border-radius: 18px;
  background: #F8FCFD;
  border: 1px solid #E4EFF3;
}

.score-breakdown-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-top: 5px;
}

.score-breakdown-dot.score-green {
  background: var(--green);
}

.score-breakdown-dot.score-amber {
  background: var(--amber);
}

.score-breakdown-dot.score-red {
  background: var(--red);
}

.score-breakdown-copy {
  display: grid;
  gap: 6px;
}

.score-breakdown-copy strong {
  color: var(--text);
  font-size: 0.98rem;
}

.score-breakdown-copy span {
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

.clinical-score-strip,
.meal-clinical-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: 18px;
  background: linear-gradient(180deg, #FFF8EE, #FFFCF6);
  border: 1px solid #F1E2C8;
}

.clinical-grade-chip {
  min-width: 46px;
  height: 46px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  font-weight: 800;
  color: #8A5A11;
  background: linear-gradient(180deg, #FFE7B7, #F6CC82);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}

.clinical-score-copy {
  display: grid;
  gap: 6px;
}

.clinical-score-copy strong {
  color: var(--text);
  font-size: 0.98rem;
}

.clinical-score-copy span {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

#dashboardCheckinCard {
  background: linear-gradient(180deg, #F7FFFD, #FFFFFF);
  border: 1px solid rgba(15, 139, 141, 0.14);
}

.welcome-card,
.auth-card {
  display: grid;
  gap: 16px;
}

.onboarding-hero,
.onboarding-step-card,
.onboarding-note-card {
  display: grid;
  gap: 12px;
}

.install-note-card {
  background: linear-gradient(180deg, #ffffff, #f6fbff 55%, #f8fdf8);
}

.install-status-copy {
  flex: 1;
  min-width: 180px;
}

.onboarding-hero {
  background: linear-gradient(160deg, #FFFFFF, #F3FBF9 55%, #EFF6EF);
}

.onboarding-steps {
  display: grid;
  gap: 14px;
}

.focus-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.focus-choice {
  padding: 14px 12px;
  border-radius: 18px;
  background: #F8FCFD;
  border: 1px solid #E4EFF3;
  color: var(--text);
  font-weight: 800;
}

.focus-choice.is-selected {
  background: rgba(0, 167, 196, 0.12);
  border-color: var(--teal);
  color: var(--teal);
}

.onboarding-step-card {
  grid-template-columns: auto 1fr;
  align-items: start;
}

.onboarding-step-number {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--green-soft);
  color: var(--green);
  font-weight: 800;
}

.welcome-card {
  background: linear-gradient(180deg, #FFFFFF, #FBFCF8);
}

.welcome-logo {
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: 18px;
  background: #F6F7F2;
  padding: 8px;
}

.welcome-points {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.welcome-points span {
  background: #F6F7F2;
  border-radius: 999px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.quick-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.primary-btn, .secondary-btn, .ghost-btn {
  border-radius: 14px;
  padding: 15px 16px;
  font-weight: 800;
}

.primary-btn {
  background: linear-gradient(180deg, #16A3A5, var(--green));
  color: #fff;
}

.secondary-btn {
  background: #F1F1F1;
  color: var(--text);
}

.google-btn {
  border-radius: 14px;
  padding: 14px 16px;
  font-weight: 800;
  background: #fff;
  color: var(--text);
  border: 1px solid #D8E7EC;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 12px;
  box-shadow: 0 10px 22px rgba(18, 49, 73, 0.05);
}

.google-mark {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #4285F4, #34A853 60%, #FBBC05 80%, #EA4335);
  color: #fff;
  font-weight: 900;
}

.auth-divider {
  position: relative;
  text-align: center;
}

.auth-divider::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: #E2EDF1;
}

.auth-divider span {
  position: relative;
  display: inline-block;
  padding: 0 12px;
  background: #fff;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.auth-helper-row {
  display: flex;
  justify-content: flex-end;
  margin-top: -4px;
}

.auth-inline-link {
  font-size: 14px;
  font-weight: 700;
}

.ghost-btn, .ghost-link {
  background: transparent;
  color: var(--green);
  padding: 0;
  font-weight: 700;
}

.avatar-chip {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--shadow);
  font-weight: 800;
  color: var(--green);
}

.section-stack, .meal-list, .insight-list {
  display: grid;
  gap: 16px;
}

.section-head-row,
.section-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
}

.meal-summary-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.compact-action-btn {
  padding: 10px 14px;
  min-width: 0;
  white-space: nowrap;
}

.sticky-meal-action {
  position: sticky;
  bottom: 96px;
  z-index: 20;
}

.sticky-meal-action-btn {
  width: 100%;
  box-shadow: 0 14px 24px rgba(15, 139, 141, 0.18);
}

.section-head-row.compact {
  align-items: center;
}

.meal-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.meal-item-meta {
  display: grid;
  gap: 6px;
}

.meal-item-macros {
  font-size: 13px;
  color: var(--muted);
}

.meal-item-clinical {
  font-size: 13px;
  color: #7a5a23;
  line-height: 1.5;
}

.field-stack, .chip-block, .question-block {
  display: grid;
  gap: 10px;
}

.voice-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
}

.quick-add-btn {
  min-height: 56px;
  white-space: nowrap;
}

.search-input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px 16px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.voice-input-btn {
  min-height: 56px;
  padding: 0 16px;
  border-radius: 16px;
  border: 1px solid rgba(15, 139, 141, 0.18);
  background: rgba(15, 139, 141, 0.08);
  color: var(--brand);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.mic-btn {
  border-radius: 50px;
  padding: 10px 14px;
  margin: 6px;
  transition: all 0.2s ease;
}

.mic-btn:active {
  transform: scale(0.9);
}

.voice-input-btn:hover,
.voice-input-btn:focus-visible {
  background: rgba(15, 139, 141, 0.14);
  border-color: rgba(15, 139, 141, 0.32);
  outline: none;
}

.voice-input-btn.is-listening {
  background: #0f8b8d;
  border-color: #0f8b8d;
  color: #ffffff;
}

.voice-input-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.voice-status-copy {
  margin-top: -2px;
}

.search-input:focus {
  outline: none;
  border-color: rgba(15, 139, 141, 0.4);
  box-shadow: 0 0 0 4px rgba(15, 139, 141, 0.08);
}

.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.serving-card {
  background: #ffffff;
  border: 1px solid #ece7df;
  border-radius: 22px;
  padding: 22px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
  display: grid;
  gap: 12px;
}

.serving-label {
  font-size: 14px;
  font-weight: 700;
  color: #374151;
}

.serving-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: flex-start;
}

.serving-breakdown-list {
  display: grid;
  gap: 12px;
}

.serving-breakdown-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 240px);
  gap: 12px;
  align-items: center;
  padding: 14px;
  border-radius: 16px;
  background: #fcfbf8;
  border: 1px solid #ece7df;
}

.serving-breakdown-copy {
  display: grid;
  gap: 4px;
}

.serving-breakdown-copy strong {
  color: var(--text);
  font-size: 15px;
}

.serving-breakdown-copy span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.serving-breakdown-item select {
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid #ddd6cb;
  background: #fff;
  font-size: 14px;
  outline: none;
}

.serving-row select {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid #ddd6cb;
  background: #fcfbf8;
  font-size: 14px;
  outline: none;
}

.stepper {
  display: inline-grid;
  grid-template-columns: 44px minmax(48px, auto) 44px;
  align-items: flex-start;
  gap: 8px;
}

.stepper button {
  height: 44px;
  border-radius: 14px;
  background: #F1F6F7;
  color: var(--text);
  font-size: 1.3rem;
  font-weight: 800;
  box-shadow: var(--shadow);
}

.stepper span {
  min-width: 48px;
  text-align: center;
  font-size: 1rem;
  font-weight: 800;
  color: var(--text);
}

.serving-note {
  margin: 0;
  font-size: 14px;
  color: #4b5563;
}

.serving-control {
  display: grid;
  grid-template-columns: 52px 1fr 52px;
  gap: 10px;
  align-items: flex-start;
}

.serving-stepper {
  height: 52px;
  border-radius: 16px;
  background: #F1F6F7;
  color: var(--text);
  font-size: 1.6rem;
  font-weight: 800;
  box-shadow: var(--shadow);
}

.serving-input {
  width: 100%;
  height: 52px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow);
  text-align: center;
  font-size: 1rem;
  font-weight: 800;
  color: var(--text);
}

.serving-input:focus {
  outline: none;
  border-color: rgba(15, 139, 141, 0.4);
  box-shadow: 0 0 0 4px rgba(15, 139, 141, 0.08);
}

.chip {
  background: #F1F1F1;
  color: var(--text);
  border-radius: 999px;
  padding: 11px 14px;
  font-weight: 700;
}

.chip.is-selected {
  background: var(--green);
  color: #fff;
}

.meal-card, .behavior-card, .profile-card {
  display: grid;
  gap: 16px;
}

.behavior-card {
  background: linear-gradient(180deg, #FFFFFF, #FCFCF8);
}

.meal-card-top, .profile-row, .metric-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.macro-grid,
.macro-grid-strong {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.macro-grid-strong {
  margin-top: 0.75rem;
}

.macro-grid span,
.macro-grid-strong div {
  background: rgba(255,255,255,0.58);
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 16px;
  padding: 0.85rem;
  font-weight: 700;
  color: var(--text);
}

.macro-grid-strong span {
  display: block;
  font-size: 0.78rem;
  color: #64748b;
  margin-bottom: 0.2rem;
}

.macro-grid-strong strong {
  font-size: 1rem;
  color: #0f172a;
}

.calc-box {
  border-radius: 16px;
  background: #F6F7F2;
  padding: 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}

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

.action-row.single {
  grid-template-columns: 1fr;
}

.meal-summary-card,
.macro-preview {
  gap: 0.9rem;
}

.helper-copy,
.behavior-copy,
.support-copy {
  font-size: 14px;
}

.helper-copy {
  line-height: 1.6;
}

.insight-log-card {
  background: #ffffff;
  border: 1px solid #ece7df;
  border-radius: 22px;
  padding: 22px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
  margin-top: 20px;
}

.insight-log-card h3 {
  font-size: 18px;
  line-height: 1.3;
  margin-bottom: 14px;
  color: #1f2937;
}

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

.insight-log-card label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  color: #374151;
  font-weight: 600;
}

.insight-log-card select {
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid #ddd6cb;
  background: #fcfbf8;
  font-size: 14px;
  outline: none;
}

.behavior-copy {
  color: var(--text);
  font-weight: 700;
}

.support-copy {
  margin-top: 0.75rem;
  font-size: 0.84rem;
  line-height: 1.45;
  color: #64748b;
}

.score-ring-amber {
  box-shadow: inset 0 0 0 10px rgba(217, 119, 6, 0.14);
}

.insight-list .card {
  display: grid;
  gap: 12px;
}

.insight-action {
  padding: 12px 14px;
  border-radius: 14px;
  background: #F6F7F2;
  color: var(--text);
  font-weight: 700;
}

.insights-wrap,
.insight-list {
  display: grid;
  gap: 14px;
  margin-top: 20px;
}

.insight-card {
  background: #fffdf8;
  border: 1px solid #ece5d8;
  border-radius: 20px;
  padding: 18px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.04);
}

.insight-card .top-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.insight-card h4 {
  margin: 0;
  font-size: 16px;
  color: #1f2937;
}

.insight-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: #f5efe2;
  color: #7c5c1b;
}

.insight-card p {
  margin: 8px 0;
  color: #4b5563;
  line-height: 1.5;
  font-size: 14px;
}

.insight-reco,
.insight-meta {
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #f9f6ef;
  color: #374151;
  font-size: 14px;
  font-weight: 600;
}

.insight-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.insight-card.caution {
  border-color: #f3d2c7;
  background: #fffaf8;
}

.insight-card.coach {
  border-color: #d9ead8;
  background: #fbfef9;
}

.insight-card.neutral {
  border-color: #e5e7eb;
  background: #ffffff;
}

.pattern-summary {
  margin-bottom: 20px;
}

.pattern-chip {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  padding: 12px;
  border-radius: 14px;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
}

.top-issues {
  margin-bottom: 20px;
}

.issue-item {
  background: #ffffff;
  border: 1px solid #ece7df;
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 8px;
  font-size: 14px;
  color: #374151;
  font-weight: 600;
}

.bar-chart {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: end;
  gap: 12px;
  height: 160px;
  margin-top: 12px;
}

.history-page {
  display: grid;
  gap: 20px;
}

.history-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 22px;
  border-radius: 28px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F5FBFC 100%);
  border: 1px solid #DDEBF0;
  box-shadow: var(--shadow);
}

.history-eyebrow,
.panel-kicker {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal);
}

.history-title {
  margin-bottom: 8px;
}

.history-subtitle {
  max-width: 580px;
}

.history-export-btn {
  border-radius: 16px;
  padding: 14px 18px;
  background: #FFFFFF;
  color: var(--text);
  border: 1px solid #DCEBF0;
  box-shadow: var(--shadow);
  font-weight: 800;
  white-space: nowrap;
}

.history-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.history-tab {
  border-radius: 999px;
  padding: 11px 16px;
  background: #F1F6F7;
  color: var(--muted);
  font-weight: 800;
}

.history-tab.is-active {
  background: var(--green);
  color: #fff;
}

.history-overview-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.history-overview-card {
  background: #FFFFFF;
  border: 1px solid #DCEBF0;
  border-radius: 22px;
  padding: 18px;
  box-shadow: var(--shadow);
  display: grid;
  gap: 8px;
}

.history-overview-card span {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.history-overview-card strong {
  font-size: 1.6rem;
  color: var(--text);
}

.history-overview-card p {
  font-size: 13px;
}

.history-main-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.history-panel {
  background: #FFFFFF;
  border: 1px solid #DCEBF0;
  border-radius: 24px;
  padding: 22px;
  box-shadow: var(--shadow);
  display: grid;
  gap: 16px;
}

.history-log-panel {
  gap: 18px;
}

.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.trend-chart-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(58px, 1fr));
  gap: 12px;
  align-items: end;
  min-height: 210px;
}

.trend-column {
  display: grid;
  gap: 10px;
  justify-items: center;
}

.trend-column-bar {
  width: 100%;
  min-height: 42px;
  height: var(--bar, 42px);
  border-radius: 18px 18px 12px 12px;
  background: linear-gradient(180deg, rgba(45, 154, 74, 0.22), rgba(0, 167, 196, 0.45));
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 10px;
}

.trend-column-bar.is-amber {
  background: linear-gradient(180deg, rgba(217, 164, 0, 0.25), rgba(217, 164, 0, 0.55));
}

.trend-column-bar.is-red {
  background: linear-gradient(180deg, rgba(218, 91, 71, 0.25), rgba(218, 91, 71, 0.58));
}

.trend-column-score {
  font-size: 13px;
  font-weight: 800;
  color: #163149;
}

.trend-column-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}

.pattern-summary-list,
.trigger-list,
.best-pattern-list,
.history-meal-list {
  display: grid;
  gap: 12px;
}

.history-pattern-item,
.history-trigger-item,
.history-best-item {
  border-radius: 18px;
  padding: 14px 16px;
  background: #F9FCFD;
  border: 1px solid #E4EFF3;
  display: grid;
  gap: 6px;
}

.history-pattern-item strong,
.history-trigger-item strong,
.history-best-item strong {
  color: var(--text);
}

.history-pattern-meta,
.history-trigger-meta,
.history-best-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12px;
  color: var(--muted);
  font-weight: 700;
}

.history-meal-card {
  border-radius: 20px;
  border: 1px solid #E4EFF3;
  background: #FFFFFF;
  padding: 16px;
  display: grid;
  gap: 10px;
}

.history-meal-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.history-meal-meta {
  display: grid;
  gap: 6px;
}

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

.history-mini-chip {
  padding: 7px 10px;
  border-radius: 999px;
  background: #F3F8FA;
  color: #4F6675;
  font-size: 12px;
  font-weight: 700;
}

.history-empty-state {
  padding: 28px 18px;
  border-radius: 22px;
  border: 1px dashed #D9E7EC;
  background: #FCFEFE;
  text-align: center;
}

.history-empty-icon {
  font-size: 24px;
  color: var(--teal);
  margin-bottom: 8px;
}

.trend-number {
  margin-top: 12px;
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
}

.score-inline-row {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: flex-start;
  gap: 16px;
}

.score-mini {
  font-size: 48px;
  margin: 0;
}

.stat-card {
  display: grid;
  gap: 14px;
}

.metric-row span {
  color: var(--muted);
}

.mini-logo {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  object-fit: cover;
}

.highlight-card {
  border: 2px solid rgba(46, 125, 50, 0.16);
}

.pricing-notes {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  color: var(--muted);
  font-size: 14px;
}

.bottom-nav {
  position: fixed;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1100px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  padding: 12px 16px 18px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 12px 32px rgba(18, 49, 73, 0.14);
  backdrop-filter: blur(12px);
  z-index: 30;
}

.global-disclaimer {
  text-align: center;
  font-size: 0.8rem;
  color: var(--muted);
  padding: 10px 16px 24px;
}

.nav-link {
  background: transparent;
  color: var(--muted);
  padding: 9px 4px 8px;
  border-radius: 16px;
  font-size: 11px;
  font-weight: 800;
  display: grid;
  justify-items: center;
  gap: 6px;
}

.nav-link.is-active {
  background: rgba(12, 157, 174, 0.12);
  color: var(--poshana-teal-deep);
}

.nav-icon {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-link span {
  line-height: 1;
}

.app-toast {
  position: fixed;
  left: 50%;
  bottom: 86px;
  transform: translateX(-50%) translateY(12px);
  width: calc(100% - 32px);
  max-width: 560px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(28, 28, 28, 0.94);
  color: #fff;
  text-align: center;
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
}

.app-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (min-width: 431px) {
  body {
    padding: 0;
  }

  .app-shell {
    min-height: 100dvh;
  }

  .bottom-nav {
    bottom: 20px;
    border-radius: 24px;
  }
}

@media (max-width: 430px) {
  .grid-2 {
    grid-template-columns: 1fr;
  }

  .app-shell {
    padding-bottom: 148px;
  }

  .screen-content {
    padding: 16px 14px calc(140px + env(safe-area-inset-bottom));
    gap: 20px;
    width: 100%;
  }

  .dashboard-frame,
  .progress-frame {
    padding: 12px;
    border-radius: 28px;
  }

  .dashboard-board-head,
  .progress-board-head {
    padding: 16px 14px 14px;
  }

  .dashboard-board-head h1,
  .progress-board-head h1 {
    max-width: none;
    font-size: 1.55rem;
    line-height: 1.08;
  }

  .dashboard-board-grid,
  .progress-board-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 0 8px 10px;
  }

  .dashboard-stats-strip,
  .history-overview-grid,
  .dashboard-macro-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .history-hero,
  .panel-head {
    flex-direction: column;
    align-items: stretch;
  }

  .history-main-grid {
    grid-template-columns: 1fr;
  }

  .trend-chart-wrap {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .dashboard-stats-strip,
  .progress-detail-card {
    padding: 0 8px 10px;
    gap: 10px;
  }

  .dashboard-score-panel,
  .dashboard-summary-card,
  .dashboard-response-card,
  .progress-trend-card,
  .progress-side-card {
    border-radius: 22px;
  }

  .score-ring {
    width: 154px;
    height: 154px;
  }

  .score-ring-inner {
    width: 114px;
    height: 114px;
  }

  .score-ring .score {
    font-size: 3rem;
  }

  .quick-actions,
  .action-row {
    grid-template-columns: 1fr;
  }

  .section-head-row,
  .section-row {
    align-items: flex-start;
  }

  .bottom-nav {
    left: 14px;
    right: 14px;
    bottom: 10px;
    transform: none;
    width: auto;
    max-width: none;
    padding: 10px 10px calc(12px + env(safe-area-inset-bottom));
    border: 1px solid var(--line);
    border-radius: 22px;
    box-shadow: 0 18px 34px rgba(18, 49, 73, 0.12);
  }

  .nav-link {
    padding: 8px 2px 6px;
    gap: 5px;
    font-size: 10px;
  }

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

.insight-log-card {
  display: grid;
  gap: 16px;
  padding: 18px;
  border-radius: 24px;
  background: linear-gradient(180deg, #fff, #f6fcfd);
  border: 1px solid #deedf2;
  box-shadow: 0 12px 28px rgba(18, 49, 73, 0.06);
}

.insight-log-card h3 {
  font-size: 1.05rem;
  color: var(--poshana-ink);
}

.insight-log-card .grid-2 label {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid #e4eff3;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.insight-log-card .grid-2 label:focus-within {
  transform: translateY(-1px);
  border-color: rgba(12, 157, 174, 0.4);
  box-shadow: 0 8px 16px rgba(12, 157, 174, 0.1);
}

.chip {
  transition: transform 120ms ease, background-color 120ms ease, border-color 120ms ease;
}

.chip:active,
.primary-btn:active,
.secondary-btn:active {
  transform: scale(0.98);
}

.chip.is-selected {
  animation: chipPulse 180ms ease;
}

@keyframes chipPulse {
  0% { transform: scale(0.96); }
  100% { transform: scale(1); }
}

/* History page visual upgrade */
.history-page {
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px 18px 90px;
  background:
    radial-gradient(circle at top left, rgba(255, 244, 230, 0.9), transparent 28%),
    linear-gradient(180deg, #fcfaf6 0%, #f7f4ee 100%);
  min-height: 100vh;
}

.history-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  margin-bottom: 22px;
}

.history-eyebrow {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9a7b42;
  font-weight: 700;
  margin-bottom: 8px;
}

.history-title {
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.05;
  color: #1f2937;
  margin: 0 0 10px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.history-subtitle {
  max-width: 680px;
  color: #5b6472;
  font-size: 15px;
  line-height: 1.65;
  margin: 0;
}

.history-export-btn {
  border: 0;
  border-radius: 999px;
  padding: 12px 18px;
  background: #1f2937;
  color: white;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 10px 24px rgba(31, 41, 55, 0.15);
  white-space: nowrap;
}

.history-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 22px;
}

.history-tab {
  border: 1px solid #e7dfd2;
  background: rgba(255,255,255,0.7);
  color: #5f6672;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  transition: 0.2s ease;
}

.history-tab.active,
.history-tab.is-active {
  background: #fff3df;
  color: #8a5a11;
  border-color: #f2d29d;
}

.history-overview-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.overview-card {
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(10px);
  border: 1px solid #ece6da;
  border-radius: 24px;
  padding: 18px;
  box-shadow: 0 12px 30px rgba(40, 33, 20, 0.06);
}

.overview-label {
  font-size: 12px;
  color: #8b6b3d;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  margin-bottom: 10px;
}

.overview-value {
  font-size: 28px;
  font-weight: 800;
  color: #1f2937;
  letter-spacing: -0.03em;
  margin-bottom: 4px;
}

.overview-note {
  font-size: 13px;
  color: #66707d;
  line-height: 1.5;
}

.history-main-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.history-panel {
  background: rgba(255,255,255,0.84);
  backdrop-filter: blur(12px);
  border: 1px solid #ebe4d8;
  border-radius: 28px;
  padding: 22px;
  box-shadow: 0 16px 34px rgba(31, 24, 11, 0.05);
}

.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.panel-kicker {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #9e7f4d;
  font-weight: 700;
  margin: 0 0 6px;
}

.panel-head h3 {
  margin: 0;
  color: #1f2937;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.trend-chart-wrap {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  min-height: 220px;
  padding-top: 18px;
}

.trend-bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.trend-bar-track {
  width: 100%;
  max-width: 54px;
  height: 170px;
  border-radius: 999px;
  background: linear-gradient(180deg, #f8f2e8 0%, #efe7da 100%);
  position: relative;
  overflow: hidden;
}

.trend-bar-fill {
  position: absolute;
  bottom: 0;
  width: 100%;
  border-radius: 999px;
  background: linear-gradient(180deg, #f3c978 0%, #d88a3e 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
}

.trend-score {
  font-size: 13px;
  font-weight: 800;
  color: #704c12;
}

.trend-label {
  font-size: 12px;
  color: #707987;
  font-weight: 700;
}

.pattern-summary-list,
.trigger-list,
.best-pattern-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pattern-item,
.trigger-item,
.best-pattern-item {
  border: 1px solid #efe7dc;
  background: #fffdfa;
  border-radius: 18px;
  padding: 14px;
}

.pattern-top,
.trigger-top,
.best-pattern-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.pattern-title,
.trigger-title,
.best-pattern-title {
  font-size: 15px;
  font-weight: 700;
  color: #1f2937;
}

.pattern-badge,
.trigger-badge,
.best-pattern-badge {
  display: inline-flex;
  align-items: flex-start;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.pattern-badge {
  background: #f8efe1;
  color: #8a5b17;
}

.trigger-badge {
  background: #fff0ec;
  color: #b84b33;
}

.best-pattern-badge {
  background: #ecf8ef;
  color: #2e7a47;
}

.pattern-text,
.trigger-text,
.best-pattern-text {
  font-size: 14px;
  line-height: 1.6;
  color: #5d6674;
}

.history-log-panel {
  margin-top: 2px;
}

.history-meal-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.history-meal-card {
  border: 1px solid #ece5d9;
  background: linear-gradient(180deg, #fffdfa 0%, #fffaf4 100%);
  border-radius: 22px;
  padding: 16px;
}

.meal-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 14px;
}

.meal-card-left h4 {
  margin: 0 0 6px;
  font-size: 17px;
  color: #1f2937;
}

.meal-card-meta {
  font-size: 13px;
  color: #7a8390;
  line-height: 1.5;
}

.meal-score-pill {
  min-width: 70px;
  text-align: center;
  border-radius: 999px;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 800;
}

.meal-score-pill.good {
  background: #ecf8ef;
  color: #2f7a47;
}

.meal-score-pill.mid {
  background: #fff5df;
  color: #a06510;
}

.meal-score-pill.low {
  background: #fff0ec;
  color: #b84b33;
}

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

.food-chip {
  padding: 8px 10px;
  border-radius: 999px;
  background: #f6efe3;
  color: #73511e;
  font-size: 12px;
  font-weight: 700;
}

.meal-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.metric-mini {
  background: rgba(255,255,255,0.72);
  border: 1px solid #f0e8dc;
  border-radius: 16px;
  padding: 10px;
}

.metric-mini-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #9a8260;
  font-weight: 800;
  margin-bottom: 6px;
}

.metric-mini-value {
  font-size: 16px;
  font-weight: 800;
  color: #1f2937;
}

.score-card-copy p {
  margin: 0 0 10px;
}

.score-reason-list {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
  color: #5c6470;
  line-height: 1.55;
}

.meal-score-summary-row {
  display: grid;
  grid-template-columns: 110px 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}

.meal-score-summary-card {
  background: rgba(255,255,255,0.72);
  border: 1px solid #f0e8dc;
  border-radius: 16px;
  padding: 12px;
}

.meal-score-summary-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #9a8260;
  font-weight: 800;
  margin-bottom: 6px;
}

.meal-score-summary-value {
  font-size: 20px;
  font-weight: 800;
  color: #1f2937;
}

.meal-score-summary-text {
  font-size: 13px;
  line-height: 1.55;
  color: #5d6674;
}

.meal-pattern-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pattern-chip-soft {
  border-radius: 999px;
  padding: 7px 10px;
  background: #faf4e8;
  color: #8a6330;
  font-size: 12px;
  font-weight: 700;
}

.history-empty-state {
  text-align: center;
  padding: 46px 20px 26px;
  color: #66707d;
}

.history-empty-icon {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  margin: 0 auto 14px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: #fff2dd;
  color: #b47b27;
  font-size: 26px;
  font-weight: 800;
}

.history-empty-state h4 {
  margin: 0 0 8px;
  color: #1f2937;
  font-size: 20px;
}

.history-empty-state p {
  margin: 0 auto;
  max-width: 420px;
  line-height: 1.6;
  font-size: 14px;
}

@media (max-width: 980px) {
  .history-overview-grid,
  .meal-metrics-grid,
  .history-main-grid {
    grid-template-columns: 1fr 1fr;
  }

  .history-hero {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 720px) {
  .history-overview-grid,
  .meal-metrics-grid,
  .history-main-grid {
    grid-template-columns: 1fr;
  }

  .voice-input-row {
    grid-template-columns: 1fr;
  }

  .serving-breakdown-item {
    grid-template-columns: 1fr;
  }

  .voice-input-btn {
    width: 100%;
  }

  .meal-score-summary-row {
    grid-template-columns: 1fr;
  }

  .meal-card-top {
    flex-direction: column;
    align-items: flex-start;
  }

  .trend-chart-wrap {
    min-height: 180px;
    gap: 8px;
  }

  .trend-bar-track {
    max-width: 42px;
    height: 138px;
  }

  .history-page {
    padding: 20px 14px 80px;
  }

  .history-panel,
  .overview-card {
    border-radius: 22px;
  }
}

/* =========================================================
   POSHANALIFE PREMIUM PWA UI OVERRIDE - visible polish pass
   ========================================================= */
:root{--pl-teal:#0c9dae;--pl-teal-deep:#077784;--pl-green:#16a34a;--pl-yellow:#ffe104;--pl-mist:#eefbfd;--pl-ink:#15343a;--pl-card:#fff;--pl-line:rgba(12,157,174,.16);--pl-shadow:0 22px 55px rgba(21,52,58,.10);--pl-shadow-soft:0 14px 32px rgba(21,52,58,.07);--pl-radius:28px}
html{scroll-behavior:smooth}body{background:radial-gradient(circle at 50% -10%,rgba(12,157,174,.22),transparent 38%),linear-gradient(180deg,#f8feff 0%,#eefbfd 46%,#f8fcf9 100%)!important;color:var(--pl-ink)}.app-shell{background:transparent!important;padding-bottom:150px!important}.status-bar{max-width:1100px;margin:0 auto;opacity:.75}.screen-content{width:min(100% - 28px,1080px)!important;padding:22px 0 calc(164px + env(safe-area-inset-bottom))!important;gap:22px!important}.screen-header.compact{padding:18px 20px 4px;border-radius:0 0 30px 30px}.screen-kicker,.label,.block-label,.history-eyebrow,.panel-kicker{color:var(--pl-teal)!important;letter-spacing:.1em!important;font-weight:900!important}h1{font-size:clamp(2rem,4vw,3.8rem)!important;line-height:.98!important;color:#0c2530!important}h2{color:#0c2530!important}p{color:#58727a}.card,.serving-card,.insight-log-card,.history-panel,.history-hero,.premium-card,.profile-membership-card,.profile-section-card{background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(250,254,254,.94))!important;border:1px solid rgba(12,157,174,.14)!important;border-radius:var(--pl-radius)!important;box-shadow:var(--pl-shadow-soft)!important;backdrop-filter:blur(10px)}.card,.serving-card,.insight-log-card,.profile-section-card,.profile-membership-card{transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}.card:hover,.serving-card:hover,.profile-section-card:hover,.profile-membership-card:hover{transform:translateY(-1px)}
.primary-btn,.quick-add-btn{min-height:56px;border-radius:18px!important;background:linear-gradient(135deg,var(--pl-teal),var(--pl-green))!important;color:#fff!important;box-shadow:0 15px 30px rgba(12,157,174,.23)!important;font-weight:900!important;letter-spacing:-.01em;transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}.primary-btn:hover,.quick-add-btn:hover{filter:saturate(1.08);box-shadow:0 18px 34px rgba(12,157,174,.28)!important}.primary-btn:active,.quick-add-btn:active,.chip:active,.nav-link:active{transform:scale(.96)}.secondary-btn,.voice-input-btn,.compact-action-btn{min-height:52px;border-radius:18px!important;background:#fff!important;color:var(--pl-ink)!important;border:1px solid rgba(12,157,174,.18)!important;box-shadow:0 10px 22px rgba(21,52,58,.06)!important;font-weight:900!important}
#screen-log-meal .screen-header::after{content:"1 View estimate  •  2 Edit portions  •  3 Save meal";display:inline-flex;align-items:center;padding:10px 14px;border-radius:999px;background:rgba(12,157,174,.10);color:var(--pl-teal-deep);font-size:.82rem;font-weight:900;margin-top:10px}#screen-log-meal .field-stack:first-of-type{padding:22px;border-radius:32px;background:linear-gradient(145deg,#fff 0%,#edfbfd 100%);border:1px solid rgba(12,157,174,.16);box-shadow:var(--pl-shadow)}.voice-input-row{grid-template-columns:minmax(0,1fr) auto auto!important;gap:12px!important}.search-input,select,input{min-height:56px;border-radius:18px!important;border:1px solid rgba(21,52,58,.12)!important;box-shadow:none!important;background:#fff!important;color:#0c2530!important}.search-input:focus,select:focus,input:focus{outline:0!important;border-color:rgba(12,157,174,.5)!important;box-shadow:0 0 0 5px rgba(12,157,174,.10)!important}.improve-estimate-row,.pill-row{gap:10px!important}.chip{border-radius:999px!important;padding:12px 16px!important;background:rgba(255,255,255,.82)!important;color:#123149!important;border:1px solid rgba(12,157,174,.12)!important;box-shadow:0 8px 20px rgba(21,52,58,.05)!important;transition:transform .18s ease,background .18s ease,color .18s ease,box-shadow .18s ease}.chip:hover{transform:translateY(-1px)}.chip.is-selected{background:linear-gradient(135deg,var(--pl-teal),var(--pl-green))!important;color:#fff!important;border-color:transparent!important;box-shadow:0 12px 26px rgba(22,163,74,.22)!important}.chip-block{padding:18px;border-radius:26px;background:rgba(255,255,255,.55);border:1px solid rgba(12,157,174,.10)}
.meal-summary-card{position:relative;overflow:hidden;padding:24px!important;background:radial-gradient(circle at right top,rgba(255,225,4,.20),transparent 32%),linear-gradient(145deg,#fff,#f3fffb)!important;border:1px solid rgba(22,163,74,.20)!important;box-shadow:0 24px 60px rgba(21,52,58,.12)!important;animation:plFadeUp .35s ease both}.meal-summary-card::before{content:"VIEW MEAL";display:inline-flex;width:max-content;margin-bottom:10px;padding:8px 12px;border-radius:999px;background:rgba(255,225,4,.22);color:#836b00;font-size:.72rem;font-weight:900;letter-spacing:.1em}.meal-summary-actions{align-items:center!important}.meal-clinical-row{background:#fff!important;border:1px solid rgba(12,157,174,.14)!important;border-radius:22px!important}.clinical-grade-chip{background:linear-gradient(135deg,var(--pl-teal),var(--pl-green))!important;color:#fff!important;border-radius:18px!important}.macro-grid-strong{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))}.macro-grid-strong div{background:#fff!important;border:1px solid rgba(12,157,174,.12)!important;border-radius:22px!important;box-shadow:0 10px 22px rgba(21,52,58,.05)}.calc-box{background:rgba(238,251,253,.75)!important;border:1px solid rgba(12,157,174,.12);border-radius:22px!important}.serving-card{padding:24px!important;animation:plFadeUp .35s ease both}.serving-card::before{content:"EDIT PORTION";color:var(--pl-teal);font-size:.72rem;font-weight:900;letter-spacing:.1em}.stepper button{background:rgba(12,157,174,.10)!important;color:var(--pl-teal-deep)!important;box-shadow:none!important}.is-collapsed{display:none!important}
.insight-log-card,.behavior-card{padding:24px!important;background:linear-gradient(180deg,#fff,#f8fffd)!important}.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px!important}.insight-log-card label{padding:16px!important;border-radius:22px!important;background:#fff!important;border:1px solid rgba(12,157,174,.13)!important;box-shadow:0 10px 24px rgba(21,52,58,.05)}.question-block{padding:16px;border-radius:24px;background:rgba(255,255,255,.65);border:1px solid rgba(12,157,174,.10)}
.profile-card{padding:0!important;overflow:hidden;background:transparent!important;border:0!important;box-shadow:none!important}.profile-hero{padding:24px;border-radius:32px;background:radial-gradient(circle at right top,rgba(255,225,4,.22),transparent 30%),linear-gradient(135deg,#fff,#eefdff)!important;border:1px solid rgba(12,157,174,.16);box-shadow:var(--pl-shadow);align-items:center!important}.profile-row{align-items:center!important}.mini-logo,.welcome-logo{width:64px!important;height:64px!important;border-radius:22px!important;background:#fff!important;box-shadow:0 12px 24px rgba(21,52,58,.08)}.profile-membership-card{padding:24px!important;background:radial-gradient(circle at 100% 0%,rgba(22,163,74,.16),transparent 34%),linear-gradient(180deg,#fff,#f6fffb)!important}.membership-meta-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}.membership-meta-grid div{border-radius:20px!important;background:#fff!important;border:1px solid rgba(12,157,174,.12)!important}.membership-progress-track{height:14px!important;background:#e4f7f3!important;border-radius:999px;overflow:hidden}.membership-progress-fill{background:linear-gradient(90deg,var(--pl-teal),var(--pl-green),var(--pl-yellow))!important;animation:plGrow .8s ease both}.profile-section-card{padding:22px!important}.highlight-card{background:radial-gradient(circle at right top,rgba(255,225,4,.24),transparent 32%),linear-gradient(145deg,#fff,#f6fffb)!important;border:1px solid rgba(22,163,74,.18)!important}.pricing-notes{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}.pricing-notes span{padding:8px 10px;border-radius:999px;background:rgba(12,157,174,.08);color:var(--pl-teal-deep);font-weight:800;font-size:.82rem}
.premium-dashboard-hero,.dashboard-frame,.progress-frame{border-radius:34px!important;box-shadow:var(--pl-shadow)!important}.premium-dashboard-grid{gap:16px!important}.premium-card,.premium-action-card{border-radius:28px!important}.bottom-nav{position:fixed!important;left:50%!important;transform:translateX(-50%);bottom:calc(18px + env(safe-area-inset-bottom))!important;width:min(92vw,860px)!important;display:grid;grid-template-columns:repeat(5,1fr);gap:8px;padding:10px!important;border-radius:28px!important;background:rgba(255,255,255,.88)!important;border:1px solid rgba(12,157,174,.16)!important;box-shadow:0 22px 56px rgba(21,52,58,.18)!important;backdrop-filter:blur(18px);z-index:1000}.nav-link{min-height:58px;border-radius:20px!important;background:transparent!important;color:#55707a!important;font-weight:900!important;transition:background .18s ease,color .18s ease,transform .18s ease}.nav-link.is-active{background:linear-gradient(135deg,rgba(12,157,174,.13),rgba(22,163,74,.13))!important;color:var(--pl-green)!important}.nav-icon{fill:none;stroke:currentColor;stroke-width:2.1}.global-disclaimer{position:fixed;left:50%;bottom:calc(98px + env(safe-area-inset-bottom));transform:translateX(-50%);width:min(90vw,700px);text-align:center;font-size:.78rem;color:#6a8088;z-index:999;pointer-events:none}.app-toast{border-radius:18px!important;background:#0c2530!important;color:#fff!important;box-shadow:0 18px 38px rgba(12,37,48,.22)!important}@keyframes plFadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes plGrow{from{width:0}}
@media(max-width:760px){.screen-content{width:min(100% - 18px,1080px)!important}.voice-input-row{grid-template-columns:1fr!important}.macro-grid-strong,.membership-meta-grid,.grid-2,.premium-dashboard-grid{grid-template-columns:1fr!important}.profile-hero,.section-row,.history-hero{display:grid!important}.bottom-nav{width:calc(100vw - 18px)!important;bottom:calc(10px + env(safe-area-inset-bottom))!important}.nav-link span{font-size:.68rem}.global-disclaimer{display:none}h1{font-size:2.15rem!important}}

/* Phase 2 conversion cards */
.feedback-card,
.nudge-card,
.upgrade-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid #e1edf2;
  background: #f8fcfd;
}

.feedback-card.good {
  background: rgba(22, 163, 74, 0.08);
  border-color: rgba(22, 163, 74, 0.2);
}

.feedback-card.warning {
  background: rgba(217, 164, 0, 0.12);
  border-color: rgba(217, 164, 0, 0.24);
}

.food-map-preview.locked {
  position: relative;
  display: grid;
  gap: 10px;
}

.food-map-preview .food-item {
  display: grid;
  gap: 4px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid #deecf1;
  background: #fff;
}

.food-map-preview .food-item.green { background: rgba(45, 154, 74, 0.09); }
.food-map-preview .food-item.amber { background: rgba(217, 164, 0, 0.11); }
.food-map-preview .food-item.red { background: rgba(218, 91, 71, 0.1); }

.unlock-overlay {
  margin-top: 4px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(12, 157, 174, 0.12);
  color: #066b75;
  font-weight: 800;
  text-align: center;
}

.program-card,
.conversion-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid #e1edf2;
  background: #f7fcfd;
}

.conversion-card {
  font-weight: 700;
  color: #16424b;
  background: rgba(12, 157, 174, 0.08);
  border-color: rgba(12, 157, 174, 0.22);
}

/* ======================================================
   POSHANA.LIFE FINAL POLISH PASS — APP STORE UI LAYER
   Safe override layer: visual + usability only.
   ====================================================== */
:root {
  --pl-teal: #0c9dae;
  --pl-teal-deep: #077784;
  --pl-green: #16a34a;
  --pl-yellow: #ffe104;
  --pl-mist: #eefbfd;
  --pl-ink: #15343a;
  --pl-muted: #607982;
  --pl-line: rgba(12, 157, 174, 0.16);
  --pl-card: rgba(255,255,255,0.86);
  --pl-glass: rgba(255,255,255,0.72);
  --pl-shadow: 0 22px 60px rgba(21, 52, 58, 0.12);
  --pl-shadow-soft: 0 12px 34px rgba(21, 52, 58, 0.08);
  --pl-radius-xl: 30px;
  --pl-radius-lg: 22px;
}

html {
  min-height: 100%;
  background: #eefbfd;
}

body {
  min-height: 100dvh;
  color: var(--pl-ink);
  background:
    radial-gradient(circle at 10% -10%, rgba(255, 225, 4, 0.18), transparent 26%),
    radial-gradient(circle at 96% 2%, rgba(12, 157, 174, 0.22), transparent 34%),
    linear-gradient(180deg, #fbfeff 0%, #eefbfd 42%, #f8fffb 100%) !important;
  -webkit-font-smoothing: antialiased;
}

.app-shell {
  background: transparent !important;
  padding-bottom: calc(112px + env(safe-area-inset-bottom));
}

.status-bar {
  position: sticky;
  top: 0;
  z-index: 25;
  backdrop-filter: blur(18px);
  background: rgba(248, 254, 255, 0.72);
  border-bottom: 1px solid rgba(12,157,174,0.08);
  color: rgba(21,52,58,.68);
}

.screen-content {
  width: min(100%, 980px) !important;
  padding: 18px 16px calc(150px + env(safe-area-inset-bottom)) !important;
  gap: 18px !important;
}

.screen.is-active .screen-content > * {
  animation: plFadeUp .42s cubic-bezier(.2,.8,.2,1) both;
}

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

h1, h2, h3 {
  color: var(--pl-ink);
}

h1 {
  font-size: clamp(2rem, 6vw, 3.6rem) !important;
  letter-spacing: -0.05em !important;
}

p {
  color: var(--pl-muted);
}

.screen-kicker,
.label,
.block-label,
.history-eyebrow,
.panel-kicker {
  color: var(--pl-teal-deep) !important;
  letter-spacing: .12em !important;
  font-size: 11px !important;
}

.card,
.premium-card,
.history-panel,
.profile-card,
.serving-card,
.insight-log-card,
.highlight-card,
.auth-card,
.welcome-card {
  border: 1px solid rgba(12,157,174,.13) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(248,253,254,.88)) !important;
  border-radius: var(--pl-radius-xl) !important;
  box-shadow: var(--pl-shadow-soft) !important;
  overflow: hidden;
}

.card:hover,
.premium-card:hover,
.history-panel:hover {
  transform: translateY(-2px);
  box-shadow: var(--pl-shadow) !important;
}

.primary-btn,
.secondary-btn,
.google-btn,
.voice-input-btn,
.history-export-btn,
.focus-choice,
.history-tab,
.chip {
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease !important;
}

.primary-btn {
  border-radius: 18px !important;
  background:
    linear-gradient(135deg, var(--pl-teal-deep), var(--pl-teal) 54%, var(--pl-green)) !important;
  color: #fff !important;
  box-shadow: 0 14px 28px rgba(12, 157, 174, .22) !important;
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.primary-btn:hover,
.secondary-btn:hover,
.google-btn:hover,
.focus-choice:hover,
.chip:hover {
  transform: translateY(-1px);
}

.primary-btn:active,
.secondary-btn:active,
.chip:active,
.nav-link:active {
  transform: scale(.97) !important;
}

.secondary-btn,
.google-btn,
.voice-input-btn {
  border-radius: 18px !important;
  background: rgba(255,255,255,.92) !important;
  color: var(--pl-teal-deep) !important;
  border: 1px solid rgba(12,157,174,.18) !important;
  box-shadow: 0 10px 24px rgba(21,52,58,.06) !important;
}

.search-input,
select,
.serving-row select,
.serving-breakdown-item select,
.serving-input {
  border-radius: 19px !important;
  border: 1px solid rgba(12,157,174,.17) !important;
  background: rgba(255,255,255,.96) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 12px 24px rgba(21,52,58,.05) !important;
  min-height: 54px;
}

.search-input:focus,
select:focus,
.serving-input:focus {
  border-color: rgba(12,157,174,.45) !important;
  box-shadow: 0 0 0 5px rgba(12,157,174,.1), 0 14px 28px rgba(21,52,58,.07) !important;
}

.chip,
.focus-choice,
.history-tab {
  border: 1px solid rgba(12,157,174,.14) !important;
  background: rgba(255,255,255,.82) !important;
  color: var(--pl-ink) !important;
  box-shadow: 0 8px 18px rgba(21,52,58,.05);
}

.chip.is-selected,
.focus-choice.is-selected,
.history-tab.is-active {
  background:
    linear-gradient(135deg, rgba(12,157,174,.98), rgba(22,163,74,.92)) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 12px 26px rgba(12,157,174,.22) !important;
}

/* Dashboard: clearer hierarchy and emotional wow */
.premium-dashboard-hero {
  position: relative;
  border-radius: 34px !important;
  padding: 28px !important;
  background:
    radial-gradient(circle at 84% 0%, rgba(255,225,4,.26), transparent 32%),
    radial-gradient(circle at 0% 100%, rgba(22,163,74,.12), transparent 42%),
    linear-gradient(135deg, #ffffff 0%, #effbfd 100%) !important;
  border: 1px solid rgba(12,157,174,.16) !important;
  box-shadow: var(--pl-shadow) !important;
}

.premium-dashboard-hero::after {
  content: "";
  position: absolute;
  inset: auto 22px 18px 22px;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--pl-teal), var(--pl-green), var(--pl-yellow));
  opacity: .8;
}

.premium-dashboard-hero h1 {
  max-width: 620px;
}

.premium-score-block {
  border-radius: 30px !important;
  background: rgba(255,255,255,.9) !important;
  border: 1px solid rgba(12,157,174,.12) !important;
  box-shadow: 0 20px 44px rgba(21,52,58,.1), inset 0 1px 0 rgba(255,255,255,.8) !important;
}

.premium-score-block strong {
  font-family: "Manrope", sans-serif;
  font-weight: 900;
  font-size: clamp(3.2rem, 10vw, 5rem) !important;
  background: linear-gradient(135deg, var(--pl-teal-deep), var(--pl-green));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}

.premium-dashboard-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.premium-dashboard-grid > .premium-card {
  grid-column: span 6;
  min-height: 154px;
}

.premium-dashboard-grid > .premium-card.is-empty {
  display: none !important;
}

.premium-dashboard-grid > .premium-action-card,
.premium-dashboard-grid > .premium-food-map-preview,
#upgradePrompt,
#programSuggestion {
  grid-column: span 12;
}

.premium-marker-list div,
.premium-nutrition-grid div,
.membership-meta-grid div {
  border-radius: 20px !important;
  background: rgba(238,251,253,.7) !important;
  border: 1px solid rgba(12,157,174,.1) !important;
}

.nudge-card,
.conversion-card,
.feedback-card,
.program-card,
.upgrade-card {
  border-radius: 24px;
  padding: 18px;
  background: linear-gradient(135deg, rgba(238,251,253,.9), rgba(255,255,255,.95));
  border: 1px solid rgba(12,157,174,.12);
}

.upgrade-card {
  background:
    radial-gradient(circle at 100% 0%, rgba(255,225,4,.28), transparent 34%),
    linear-gradient(135deg, #073f47, #0c9dae) !important;
  color: #fff;
}

.upgrade-card h3,
.upgrade-card p { color: #fff !important; }
.upgrade-card .primary-btn,
.upgrade-card button { background: #fff !important; color: var(--pl-teal-deep) !important; }

/* Log meal: guided product flow */
#screen-log-meal .screen-header {
  padding: 22px;
  border-radius: 32px;
  background:
    radial-gradient(circle at 90% 10%, rgba(255,225,4,.28), transparent 30%),
    linear-gradient(135deg, #fff, #effbfd);
  border: 1px solid rgba(12,157,174,.14);
  box-shadow: var(--pl-shadow-soft);
}

#screen-log-meal .screen-header h1::after {
  content: "View → Edit → Save";
  display: block;
  width: max-content;
  max-width: 100%;
  margin-top: 12px;
  padding: 8px 12px;
  border-radius: 999px;
  font-family: "Manrope", sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .03em;
  color: var(--pl-teal-deep);
  background: rgba(12,157,174,.1);
}

#screen-log-meal .field-stack:first-of-type {
  position: relative;
  padding: 20px;
  border-radius: 30px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(12,157,174,.14);
  box-shadow: var(--pl-shadow-soft);
}

#screen-log-meal .voice-input-row {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.quick-add-btn {
  min-width: 132px;
  border-radius: 999px !important;
}

.improve-estimate-row {
  padding: 14px;
  border-radius: 26px;
  background: rgba(255,255,255,.65);
  border: 1px dashed rgba(12,157,174,.2);
}

.chip-block {
  padding: 18px;
  border-radius: 28px;
  background: rgba(255,255,255,.74);
  border: 1px solid rgba(12,157,174,.12);
  box-shadow: 0 12px 30px rgba(21,52,58,.05);
}

.meal-summary-card {
  position: relative;
  background:
    radial-gradient(circle at 100% 0%, rgba(255,225,4,.2), transparent 26%),
    linear-gradient(180deg, #fff, #f5fffd) !important;
}

.meal-summary-card::before {
  content: "Estimate ready";
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  color: #047857;
  background: rgba(22,163,74,.12);
  border: 1px solid rgba(22,163,74,.18);
}

.meal-summary-actions { padding-right: 110px; }

.macro-grid-strong {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0,1fr));
}

.macro-grid-strong div {
  min-height: 78px;
  background: linear-gradient(180deg, #fff, #f4fbfc) !important;
  border: 1px solid rgba(12,157,174,.12) !important;
  box-shadow: 0 10px 22px rgba(21,52,58,.05);
}

.clinical-grade-chip {
  background: linear-gradient(135deg, var(--pl-yellow), #fff3a1) !important;
  color: var(--pl-ink) !important;
}

.is-collapsed {
  display: none !important;
}

/* Response form: make old selects feel like flashcards */
.insight-log-card {
  display: grid;
  gap: 18px;
}

.insight-log-card h3 {
  margin: 0 !important;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(12,157,174,.08);
  color: var(--pl-ink) !important;
}

.grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.insight-log-card label {
  padding: 14px !important;
  border-radius: 22px !important;
  background: rgba(255,255,255,.82) !important;
  border: 1px solid rgba(12,157,174,.13) !important;
  box-shadow: 0 10px 24px rgba(21,52,58,.05);
}

/* Profile: membership becomes visible and premium */
.profile-card {
  background:
    radial-gradient(circle at 100% 0%, rgba(255,225,4,.18), transparent 28%),
    linear-gradient(180deg, #fff, #f5fdff) !important;
}

.profile-hero {
  padding: 18px;
  border-radius: 26px;
  background: linear-gradient(135deg, #073f47, #0c9dae);
  color: #fff;
}

.profile-hero h3,
.profile-hero p,
.profile-hero .helper-copy { color: #fff !important; }

.profile-membership-card {
  border-radius: 28px !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(255,225,4,.2), transparent 30%),
    linear-gradient(180deg, #ffffff, #f1fffb) !important;
}

.membership-progress-track {
  height: 14px !important;
  padding: 3px;
  background: rgba(12,157,174,.1) !important;
}

.membership-progress-fill {
  background: linear-gradient(90deg, var(--pl-teal), var(--pl-green), var(--pl-yellow)) !important;
  box-shadow: 0 8px 16px rgba(12,157,174,.22);
}

.highlight-card {
  background:
    radial-gradient(circle at 100% 0%, rgba(255,225,4,.26), transparent 34%),
    linear-gradient(135deg, #ffffff, #effbfd) !important;
}

/* History + Insights readability */
.history-hero,
.insight-hero-card,
.dashboard-frame,
.progress-frame {
  border-radius: 32px !important;
  box-shadow: var(--pl-shadow-soft) !important;
}

.history-tabs,
.food-filter-row {
  padding: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.74);
  border: 1px solid rgba(12,157,174,.12);
  overflow-x: auto;
}

/* App-like bottom nav */
.bottom-nav {
  position: fixed !important;
  left: max(12px, env(safe-area-inset-left)) !important;
  right: max(12px, env(safe-area-inset-right)) !important;
  bottom: max(12px, env(safe-area-inset-bottom)) !important;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding: 10px !important;
  border-radius: 28px !important;
  background: rgba(255,255,255,.9) !important;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(12,157,174,.16) !important;
  box-shadow: 0 20px 50px rgba(21,52,58,.18) !important;
  z-index: 80;
  overflow: hidden;
}

.nav-link {
  min-width: 0;
  border-radius: 20px !important;
  padding: 10px 6px !important;
  color: rgba(21,52,58,.62) !important;
  background: transparent !important;
  transition: .2s ease !important;
}

.nav-link.is-active {
  background: linear-gradient(135deg, rgba(12,157,174,.14), rgba(22,163,74,.14)) !important;
  color: var(--pl-teal-deep) !important;
  transform: translateY(-2px);
}

.nav-icon {
  width: 22px !important;
  height: 22px !important;
  fill: currentColor !important;
}

.global-disclaimer {
  bottom: calc(92px + env(safe-area-inset-bottom)) !important;
  color: rgba(21,52,58,.56) !important;
}

.app-toast {
  border-radius: 999px !important;
  background: rgba(7, 63, 71, .94) !important;
  color: #fff !important;
  box-shadow: 0 18px 40px rgba(21,52,58,.28) !important;
}

@media (max-width: 780px) {
  .premium-dashboard-grid,
  .premium-dashboard-grid > .premium-card,
  .premium-dashboard-grid > .premium-action-card,
  .premium-dashboard-grid > .premium-food-map-preview,
  #upgradePrompt,
  #programSuggestion {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-column: 1 / -1 !important;
  }

  #screen-log-meal .voice-input-row {
    grid-template-columns: 1fr;
  }

  .voice-input-btn,
  .quick-add-btn {
    width: 100%;
  }

  .macro-grid-strong,
  .membership-meta-grid,
  .grid-2,
  .premium-nutrition-grid,
  .dashboard-macro-grid,
  .quick-actions,
  .action-row {
    grid-template-columns: 1fr !important;
  }

  .meal-summary-card::before {
    position: static;
    width: max-content;
    margin-bottom: 10px;
  }

  .meal-summary-actions { padding-right: 0; justify-content: flex-start; }

  .bottom-nav span {
    font-size: 10px;
  }

  .screen-content {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

@media (min-width: 980px) {
  .bottom-nav {
    left: 50% !important;
    right: auto !important;
    width: min(680px, calc(100vw - 32px));
    transform: translateX(-50%);
  }
}

.streak-card,
.progress-card {
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(12, 157, 174, 0.1);
  color: #13414a;
  font-weight: 800;
}

.chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.chip.good { background: rgba(22, 163, 74, 0.12); }
.chip.ok { background: rgba(217, 164, 0, 0.14); }
.chip.bad { background: rgba(218, 91, 71, 0.12); }

.retention-card,
.quick-check-card,
.nudge-card {
  border-radius: 28px;
  padding: 20px;
  background: linear-gradient(135deg, #ffffff, #eefbfd);
  border: 1px solid rgba(12, 157, 174, 0.16);
  box-shadow: 0 18px 40px rgba(21, 52, 58, 0.08);
}

.retention-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-weight: 800;
  color: #15343a;
}

.retention-bar {
  height: 12px;
  margin: 14px 0;
  background: #dff4f7;
  border-radius: 999px;
  overflow: hidden;
}

.retention-bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #0c9dae, #16a34a);
  transition: width 0.4s ease;
}

.streak-pill {
  display: inline-flex;
  padding: 12px 16px;
  border-radius: 999px;
  background: #fff7cc;
  color: #15343a;
  font-weight: 900;
  box-shadow: 0 10px 22px rgba(21, 52, 58, 0.08);
}

.quick-check-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 14px;
}

.quick-check-row button {
  border: 0;
  border-radius: 18px;
  padding: 14px 10px;
  background: #ffffff;
  border: 1px solid #d9eef2;
  font-weight: 900;
  color: #15343a;
}

.quick-check-row button:active {
  transform: scale(0.96);
}

.nudge-card {
  font-weight: 800;
  color: #077784;
}

.food-card {
  display: grid;
  gap: 4px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid #deecf1;
  background: #fff;
  margin-top: 8px;
}

.food-card.green { background: rgba(45, 154, 74, 0.10); }
.food-card.amber { background: rgba(217, 164, 0, 0.12); }
.food-card.red { background: rgba(218, 91, 71, 0.10); }

.insight-card {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid #deecf1;
  background: #fff;
}

.insight-card small {
  color: #4f6870;
  font-weight: 700;
}

.diet-direction-card,
.diet-preview-card,
.program-upsell-card {
  display: grid;
  gap: 14px;
  border-radius: 28px;
  padding: 22px;
  background: linear-gradient(135deg, #ffffff, #eefbfd);
  border: 1px solid rgba(12, 157, 174, 0.16);
  box-shadow: 0 18px 40px rgba(21, 52, 58, 0.08);
}

.diet-preview-list {
  display: grid;
  gap: 10px;
}

.diet-preview-list div {
  padding: 14px;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid #d9eef2;
  color: #15343a;
  font-weight: 800;
  line-height: 1.45;
}

.program-upsell-card {
  background:
    radial-gradient(circle at top right, rgba(255, 225, 4, 0.28), transparent 35%),
    linear-gradient(135deg, #ffffff, #eefbfd);
}

/* ========================================
   FINAL LAYOUT OVERRIDE (DO NOT MOVE)
   Keeps app full-width responsive and prevents narrow mockup collapse
======================================== */

html,
body {
  width: 100%;
  max-width: 100%;
  margin: 0;
  overflow-x: hidden;
}

.app-shell {
  width: 100% !important;
  max-width: none !important;
  margin: 0 auto !important;
  padding-bottom: calc(120px + env(safe-area-inset-bottom)) !important;
}

.screen,
.screen.is-active {
  width: 100% !important;
  max-width: none !important;
}

.screen-content {
  box-sizing: border-box !important;
  width: min(100vw - 24px, 1080px) !important;
  max-width: 1080px !important;
  margin: 0 auto !important;
  padding: 18px 12px calc(144px + env(safe-area-inset-bottom)) !important;
}

@media (max-width: 900px) {
  .screen-content {
    width: calc(100vw - 14px) !important;
    max-width: none !important;
    padding: 14px 7px calc(136px + env(safe-area-inset-bottom)) !important;
  }
}

.bottom-nav {
  left: 12px !important;
  right: 12px !important;
  width: auto !important;
  max-width: none !important;
  transform: none !important;
}

@media (min-width: 980px) {
  .bottom-nav {
    left: 50% !important;
    right: auto !important;
    width: min(760px, calc(100vw - 32px)) !important;
    transform: translateX(-50%) !important;
  }
}

/* Final UX stability overrides */
.global-disclaimer {
  position: static !important;
  transform: none !important;
  width: min(100%, 860px) !important;
  margin: 10px auto 120px !important;
  padding: 0 8px !important;
  text-align: center !important;
  pointer-events: none !important;
}

#screen-profile .question-block {
  transition: opacity 0.2s ease;
}

[data-history-section].is-hidden {
  display: none !important;
}

.day-log-card {
  display: grid;
  gap: 12px;
}

.day-log-list {
  display: grid;
  gap: 8px;
}

.day-log-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid #d9eaf0;
  background: #ffffff;
}

.day-log-item div {
  display: grid;
  gap: 2px;
}

.day-log-item strong {
  color: var(--text);
}

.day-log-item span {
  color: var(--muted);
  font-size: 0.86rem;
}

.day-log-item em {
  font-style: normal;
  color: var(--muted);
  font-weight: 800;
  white-space: nowrap;
}

.day-log-item.day-log-summary {
  background: linear-gradient(135deg, #f8fdff, #eefbfd);
  border-color: #cfe8ef;
}

.day-log-item.day-log-summary strong {
  color: #0b6f7b;
}


/* ========================================
   MOBILE CHROME HOTFIX (NETLIFY)
   Prevents desktop-width shrink rendering on phones
======================================== */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body,
.app-shell,
.screen,
.screen-content,
.card,
.premium-card,
.profile-membership-card,
.profile-section-card,
.serving-card,
.insight-log-card {
  min-width: 0;
}

img,
svg,
canvas,
video {
  max-width: 100%;
  height: auto;
}

@media (max-width: 480px) {
  .screen-content {
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 10px calc(136px + env(safe-area-inset-bottom)) !important;
  }

  .card,
  .premium-card,
  .profile-membership-card,
  .profile-section-card,
  .serving-card,
  .insight-log-card {
    padding: 14px !important;
    border-radius: 18px !important;
  }

  .bottom-nav {
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
  }

  .nav-link {
    min-width: 0 !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  .nav-link span {
    font-size: 0.64rem !important;
    letter-spacing: 0;
  }

}