:root {
  --bg: #f6f5f8;
  --surface: #fff;
  --ink: #23222a;
  --muted: #8d8b98;
  --line: #eae8ee;
  --accent: #8877bc;
  --accent-light: #ece8f7;
  --shadow: 0 12px 35px #4941580d;
}

body { background: #eeecf1; color: var(--ink); }
.app { justify-content: center; }
.sidebar { display: none; }
.main {
  width: min(430px, 100%);
  max-width: 430px;
  min-height: 100dvh;
  padding: max(9px, env(safe-area-inset-top)) 18px calc(108px + env(safe-area-inset-bottom));
  margin: 0 auto;
  background: linear-gradient(175deg, #f1ecfa 0, #faf9fb 235px, #f8f7f9 650px);
  box-shadow: 0 0 50px #28202c13;
}

/* The dates sit at the top and are placed on one circular arc while swiping. */
.date-section { margin: 0 -18px 9px; overflow: hidden; }
.date-strip {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 5px;
  height: 104px;
  padding: 9px max(20px, calc((100vw - 430px) / 2 + 20px)) 18px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
}
.date-strip::-webkit-scrollbar { display: none; }
.date-day, .date-day.selected {
  flex: 0 0 54px;
  width: 54px;
  height: 54px;
  border: 0;
  border-radius: 50%;
  padding: 7px 2px 6px;
  color: #8d8796;
  background: transparent;
  transform: translateY(var(--date-arc, 0px)) !important;
  scroll-snap-align: center;
  transition: transform .15s ease, background .2s ease, color .2s ease;
  text-align: center;
  display: grid;
  align-content: center;
  gap: 2px;
}
.date-day span { font-size: 10px; font-weight: 600; }
.date-day strong { font-size: 17px; line-height: 1; color: inherit; font-weight: 700; }
.date-day.selected { color: #fff; background: #8a7ab6; box-shadow: 0 6px 16px #8877bc3d; }
.date-day.selected strong { color: #fff; }

.dash-greeting { text-align: center; font-size: 20px; letter-spacing: -.045em; font-weight: 750; margin: 0 0 16px; }
.calorie-feature {
  min-height: 238px;
  padding: 26px 26px 21px;
  border: 1px solid #e5deef;
  border-radius: 34px;
  text-align: center;
  color: #32283e;
  background: radial-gradient(circle at 14% 4%, #faf1ff 0, transparent 42%),
              radial-gradient(circle at 92% 95%, #f8d8d0 0, transparent 50%),
              linear-gradient(145deg, #e6dcf6 0, #f1e9f8 58%, #f8e7e5 100%);
  box-shadow: 0 16px 34px #7c5b9e18;
}
.feature-eyebrow, .diary-kicker { font-size: 10px; font-weight: 800; letter-spacing: .16em; color: #7c6c95; }
.feature-number { font-size: clamp(67px, 20vw, 87px); line-height: 1.05; letter-spacing: -.09em; font-weight: 790; margin: 8px auto 0; font-variant-numeric: tabular-nums; }
.feature-number small { display: inline-block; margin-left: 10px; font-size: 16px; letter-spacing: -.02em; font-weight: 650; }
.feature-goal { color: #85768e; font-size: 12px; margin-top: 2px; }
.feature-progress { height: 6px; border-radius: 20px; background: #ffffffa9; margin: 21px auto 12px; max-width: 270px; overflow: hidden; }
.feature-progress i { display: block; height: 100%; background: #8e79b7; border-radius: 20px; }
.feature-remaining { display: inline-flex; gap: 5px; align-items: baseline; color: #786b84; font-size: 12px; }
.feature-remaining strong { color: #3a3046; font-size: 16px; }
.dash-section-title { font-weight: 750; font-size: 18px; letter-spacing: -.045em; margin: 24px 2px 11px; }
.dash-macros { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.dash-macro { border-radius: 23px; min-height: 93px; padding: 17px 10px 13px; text-align: center; box-shadow: 0 4px 19px #3631420b; }
.dash-macro.violet { background: #ece7f8; }
.dash-macro.peach { background: #faeee9; }
.dash-macro.mint { background: #e8f2ef; }
.dash-macro span { display: block; color: #75717f; font-size: 10px; margin-bottom: 8px; }
.dash-macro strong { font-size: 23px; letter-spacing: -.06em; }
.dash-macro strong small { margin-left: 3px; color: #8c8894; font-size: 11px; letter-spacing: 0; }
.mini-track { height: 3px; border-radius: 8px; background: #fff9; overflow: hidden; margin: 11px 9px 0; }
.mini-track i { display: block; height: 100%; border-radius: 8px; background: #8d7bb5; }
.dash-macro.peach .mini-track i { background: #df9d8e; }
.dash-macro.mint .mini-track i { background: #8dafaa; }
.dash-tiles { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.dash-tile { min-height: 145px; border: 0; border-radius: 28px; padding: 18px 17px; text-align: left; display: flex; flex-direction: column; align-items: stretch; box-shadow: 0 8px 25px #42364e0b; color: #332f3a; }
.dash-tile-lilac { background: linear-gradient(145deg,#eee7fb,#dfd5f5); }
.dash-tile-coral { background: linear-gradient(145deg,#faeae6,#f6d9ce); }
.dash-tile-mint { background: linear-gradient(145deg,#e8f3ef,#d9ebe5); }
.dash-tile-neutral { background: linear-gradient(145deg,#f5f4f6,#eae8ef); }
.dash-tile .tile-line { display: flex; justify-content: space-between; align-items: center; font-size: 11px; font-weight: 700; color: #706a78; }
.dash-tile .tile-line svg { width: 19px; height: 19px; stroke: #726b7b; }
.dash-tile strong { font-size: 24px; line-height: 1.07; letter-spacing: -.065em; margin: auto 0 8px; overflow-wrap: anywhere; }
.dash-tile strong small { font-size: 12px; letter-spacing: 0; }
.dash-tile>span:last-child { font-size: 10px; color: #77717e; }
.dash-tile>span:last-child b { float: right; font-size: 14px; }
.dash-tile .weight-curve.compact { width: 100%; height: 43px; margin: 0 0 4px; }
.dash-tile .weight-curve.compact path[stroke="#719e98"] { stroke: #748f91; }

/* Food diary: clear meal cards and a real product detail sheet. */
.diary-heading { display: flex; align-items: center; justify-content: space-between; margin: 7px 2px 18px; }
.diary-heading h1 { margin: 4px 0 0; font-size: 35px; letter-spacing: -.07em; line-height: 1; }
.diary-scan { width: 43px; height: 43px; border: 0; border-radius: 50%; background: #8b79b5; color: white; font-size: 29px; font-weight: 300; box-shadow: 0 8px 18px #77669e44; }
.diary-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.diary-summary>div { min-height: 124px; border-radius: 27px; text-align: center; display: grid; align-content: center; background: linear-gradient(155deg,#e7dcf8,#f5effb); }
.diary-summary>div:nth-child(2) { background: linear-gradient(155deg,#f6e5e0,#faefea); }
.diary-summary span { font-size: 11px; color: #776c80; }
.diary-summary strong { font-size: 41px; letter-spacing: -.08em; line-height: 1.13; }
.diary-summary small { color: #8b8191; font-size: 10px; }
.diary-macro-line { display: flex; justify-content: space-around; gap: 8px; padding: 13px 8px; margin: 8px 0 22px; border-radius: 16px; background: #fff; color: #918a96; font-size: 11px; }
.diary-macro-line strong { color: #3a3541; }
.meal-list { display: grid; gap: 10px; }
.meal-card { border-radius: 25px; padding: 16px; box-shadow: 0 6px 23px #45404e0b; }
.meal-tone-0 { background: #eee9f8; }
.meal-tone-1 { background: #f8eae4; }
.meal-tone-2 { background: #e9f2ef; }
.meal-tone-3 { background: #f2eff3; }
.meal-card-head { display: flex; align-items: center; gap: 11px; }
.meal-mark { width: 44px; height: 44px; flex: none; border-radius: 15px; background: #fff9; display: grid; place-items: center; color: #79699a; font-size: 20px; }
.meal-tone-1 .meal-mark { color: #ca8b74; }
.meal-tone-2 .meal-mark { color: #6c9991; }
.meal-card-title { flex: 1; min-width: 0; }
.meal-card-title h2 { margin: 0 0 3px; font-size: 16px; letter-spacing: -.04em; }
.meal-card-title small { color: #88808d; font-size: 11px; }
.meal-plus { width: 32px; height: 32px; flex: none; border: 0; border-radius: 50%; background: #fff; color: #534867; font-size: 22px; line-height: 1; }
.meal-entries { margin-top: 12px; padding-top: 10px; border-top: 1px solid #fff9; display: grid; gap: 4px; }
.meal-entry { display: flex; align-items: center; gap: 6px; padding: 8px 2px; font-size: 11px; }
.meal-entry>div { flex: 1; min-width: 0; }
.meal-entry strong { display: block; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meal-entry small { display: block; color: #8d8590; margin-top: 3px; font-size: 10px; }
.meal-entry>span { flex: none; font-weight: 700; }
.meal-entry .delete { width: 24px; height: 24px; margin-left: 1px; background: #fff9; color: #837a87; }
.food-cta { width: 100%; margin: 15px 0; border: 0; border-radius: 19px; padding: 16px; background: #8b79b5; color: white; display: flex; align-items: center; gap: 10px; text-align: left; font-weight: 700; font-size: 12px; }
.food-cta svg { width: 20px; height: 20px; }
.food-cta span { margin-left: auto; font-size: 16px; }
.diary-more { border-radius: 20px; background: #fff; margin-bottom: 22px; overflow: hidden; }
.diary-more summary { padding: 16px; cursor: pointer; font-size: 12px; font-weight: 700; }
.diary-more-inner { padding: 0 17px 17px; font-size: 12px; line-height: 1.5; }
.diary-more-inner h3 { margin: 22px 0 2px; font-size: 15px; }
.diary-more-inner p { color: var(--muted); }
.diary-goal { display: flex; align-items: center; gap: 8px; }
.diary-goal input { width: 85px; padding: 9px; border: 1px solid var(--line); border-radius: 9px; }
.diary-goal .button { margin-left: auto; }

.modal-backdrop { z-index: 50; padding: 0; align-items: end; background: #25202b88; }
.food-finder { width: min(430px,100%); height: min(93dvh,820px); max-height: 93dvh; border-radius: 31px 31px 0 0; padding: 25px 20px calc(20px + env(safe-area-inset-bottom)); box-shadow: 0 -20px 60px #20162733; }
.finder-header { display: flex; justify-content: space-between; align-items: start; margin-bottom: 21px; }
.finder-header small { font-size: 9px; letter-spacing: .17em; color: #8e7eae; font-weight: 800; }
.finder-header h2 { margin: 3px 0 0; font-size: 29px; letter-spacing: -.065em; }
.finder-close { border: 0; border-radius: 50%; width: 35px; height: 35px; background: #f0edf4; color: #514b59; font-size: 25px; }
.finder-tabs { display: flex; padding: 4px; gap: 2px; border-radius: 16px; background: #f3f1f5; margin-bottom: 19px; }
.finder-tabs button { flex: 1; border: 0; border-radius: 13px; background: transparent; padding: 10px 2px; color: #88818e; font-size: 11px; font-weight: 700; }
.finder-tabs button.active { color: #41374b; background: #fff; box-shadow: 0 3px 12px #30273714; }
.finder-search { display: flex; align-items: center; gap: 10px; border: 1px solid #e9e6ec; border-radius: 17px; padding: 0 13px; height: 48px; background: #faf9fb; }
.finder-search svg { width: 18px; height: 18px; color: #958ba1; }
.finder-search input { border: 0; background: transparent; outline: 0; flex: 1; min-width: 0; font-size: 14px; }
.finder-caption { font-size: 9px; letter-spacing: .14em; font-weight: 800; color: #aaa0ad; margin: 20px 3px 9px; }
.finder-result { width: 100%; display: flex; align-items: center; gap: 12px; border: 0; border-bottom: 1px solid #f1eef3; background: #fff; text-align: left; padding: 10px 2px; }
.result-glyph { width: 40px; height: 40px; border-radius: 14px; background: #eee8f7; color: #8a76ab; display: grid; place-items: center; font-weight: 750; }
.finder-result:nth-child(3n+2) .result-glyph { background: #f9e9e5; color: #c38d7a; }
.finder-result:nth-child(3n+3) .result-glyph { background: #e9f2ef; color: #7ea69c; }
.finder-result>span:nth-child(2) { flex: 1; }
.finder-result strong { display: block; color: var(--ink); font-size: 13px; }
.finder-result small { display: block; color: var(--muted); font-size: 10px; margin-top: 3px; }
.result-arrow { color: #9c91aa; }
.finder-empty { padding: 20px 10px; color: #817a88; font-size: 12px; line-height: 1.5; }
.finder-back { border: 0; background: transparent; color: #8271a6; font-weight: 700; font-size: 12px; padding: 0 0 18px; }
.product-panel { border-radius: 23px; background: linear-gradient(160deg,#f5f0fb,#fbf7f5); padding: 17px; }
.product-top { display: flex; gap: 15px; align-items: center; }
.product-top img,.product-placeholder { width: 76px; height: 76px; flex: none; border-radius: 16px; object-fit: contain; background: #fff; }
.product-placeholder { display: grid; place-items: center; color: #8e7db1; }
.product-placeholder svg { width: 29px; height: 29px; }
.product-top small { color: #8f8399; font-size: 10px; }
.product-top h3 { font-size: 16px; letter-spacing: -.04em; margin: 4px 0; }
.product-code { font-size: 10px; color: #978e9b; }
.product-kcal { display: flex; align-items: baseline; gap: 8px; justify-content: center; margin-top: 20px; }
.product-kcal strong { font-size: 54px; letter-spacing: -.09em; }
.product-kcal span { font-size: 11px; color: #81798b; }
.product-macros { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; }
.product-macros span { padding: 11px 4px; border-radius: 13px; background: #fff9; text-align: center; color: #8c8393; font-size: 9px; }
.product-macros b { display: block; color: #3b3543; margin-top: 5px; font-size: 12px; }
.product-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 21px; }
.product-form label,.manual-food label { font-size: 11px; font-weight: 700; color: #69616f; }
.product-form input,.product-form select,.manual-food input,.manual-food select,.scan-area input { width: 100%; height: 43px; margin-top: 7px; padding: 0 12px; border: 1px solid #e6e0e9; border-radius: 12px; background: #fff; color: #302a37; outline: none; }
.amount-input { position: relative; }
.amount-input span { position: absolute; right: 12px; bottom: 12px; font-size: 12px; color: #92899a; }
.product-form .button { grid-column: 1/-1; margin-top: 9px; }
.product-source { display: block; margin-top: 17px; color: #8673a6; font-size: 10px; text-decoration: none; text-align: center; }
.manual-food { display: grid; gap: 13px; }
.manual-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.manual-food .button { margin-top: 3px; }
.intro-v2 { width: min(400px,calc(100% - 28px)); border-radius: 29px; text-align: center; padding: 32px 25px 25px; margin: auto; }
.intro-v2-mark { width: 60px; height: 60px; margin: 0 auto 24px; border-radius: 20px; display: grid; place-items: center; background: linear-gradient(145deg,#e7dafa,#f5e7e2); color: #7f6baa; font-size: 30px; font-weight: 800; letter-spacing: -.08em; }
.intro-v2 h2 { font-size: 26px; letter-spacing: -.06em; margin: 0; }
.intro-v2 p { color: #807786; font-size: 13px; line-height: 1.5; margin: 11px 0 23px; }
.intro-v2 .button { margin: 0; height: 47px; }
.scan-area { text-align: center; }
#barcodeReader { width: 100%; min-height: 0; overflow: hidden; border-radius: 18px; }
#barcodeReader video { border-radius: 18px; }
.scan-status { color: #7d7286; font-size: 12px; margin: 8px 0 14px; }
.scan-camera { width: 100%; border: 0; border-radius: 18px; background: #eae3f7; color: #584976; padding: 17px; font-size: 14px; font-weight: 750; }
.scan-area p { color: #958b9a; font-size: 11px; line-height: 1.5; }
.scan-area form { display: flex; align-items: end; gap: 7px; margin-top: 15px; }
.scan-area form input { margin: 0; }
.scan-area form .button { height: 43px; margin: 0; }

/* Labeled line icons stay legible on a phone; no emojis in the navigation. */
.mobile-nav {
  display: flex;
  position: fixed;
  z-index: 20;
  left: 50%; right: auto; bottom: 10px;
  transform: translateX(-50%);
  width: min(412px, calc(100% - 20px));
  height: 68px;
  padding: 6px 7px calc(6px + env(safe-area-inset-bottom));
  border: 1px solid #e9e5ec;
  border-radius: 24px;
  background: #fffffff2;
  backdrop-filter: blur(20px);
  box-shadow: 0 10px 35px #3930421f;
  justify-content: space-around;
  align-items: center;
}
.mobile-nav .nav-item,.mobile-nav .nav-item[data-page=dashboard] {
  width: 20%; min-width: 0; height: 55px; margin: 0; padding: 5px 0;
  display: grid; place-content: center; justify-items: center; gap: 3px;
  border: 0; border-radius: 14px; color: #95909d; background: transparent;
  box-shadow: none; font-size: 10px; font-weight: 600;
}
.mobile-nav .nav-item.active,.mobile-nav .nav-item[data-page=dashboard].active { background: #f0ebf8; color: #7f6bae; }
.mobile-nav .nav-icon,.mobile-nav .nav-item[data-page=dashboard] .nav-icon { width: 22px; height: 22px; display: grid; place-items: center; }
.mobile-nav .nav-icon svg,.mobile-nav .nav-item[data-page=dashboard] .nav-icon svg { width: 20px; height: 20px; }
.mobile-nav .nav-label { display: block; line-height: 1; }
.button.accent { background: #8b79b5; }

@media (max-width: 700px) {
  .main { width: 100%; max-width: 430px; padding: max(9px, env(safe-area-inset-top)) 18px calc(108px + env(safe-area-inset-bottom)); }
  .date-section { margin: 0 -18px 9px; }
  .date-strip { height: 104px; gap: 5px; padding: 9px 20px 18px; }
  .date-day { width: 54px; }
}
@media (min-width: 701px) {
  .main { border-radius: 38px; margin: 14px auto; min-height: calc(100dvh - 28px); }
}
@media (max-width: 360px) {
  .main { padding-left: 13px; padding-right: 13px; }
  .date-section { margin-left: -13px; margin-right: -13px; }
  .dash-tile { padding: 16px 13px; }
  .feature-number { font-size: 65px; }
}

/* One quiet violet tone throughout the phone experience. */
:root { --accent: #8171a8; --accent-light: #eeeaf6; }
.main { background: linear-gradient(180deg,#f1eef7 0,#faf9fb 275px,#faf9fb 100%); }
.date-strip { -webkit-mask-image: linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); mask-image: linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); }
.date-day.selected { background: #8171a8; box-shadow: 0 6px 16px #8171a82b; }
.calorie-feature { border-color: #e7e1f1; background: linear-gradient(150deg,#e9e4f4 0,#f2eef8 64%,#f8f6fa 100%); box-shadow: 0 12px 28px #67548310; }
.feature-progress i { background: #8171a8; }
.dash-macro.violet,.dash-macro.peach,.dash-macro.mint { background: #fff; border: 1px solid #efebf4; box-shadow: 0 5px 17px #665b7510; }
.dash-macro .mini-track i,.dash-macro.peach .mini-track i,.dash-macro.mint .mini-track i { background: #9d90ba; }
.dash-tile-lilac { background: linear-gradient(145deg,#eae5f4,#f0ecf7); }
.dash-tile-coral,.dash-tile-mint,.dash-tile-neutral { background: linear-gradient(145deg,#f5f2f9,#fdfcfe); border: 1px solid #eeeaf4; }
.diary-scan,.food-cta,.button.accent { background: #8171a8; }
.diary-summary>div,.diary-summary>div:nth-child(2) { background: linear-gradient(155deg,#eae5f4,#f7f5fa); border: 1px solid #ebe6f3; }
.meal-tone-0,.meal-tone-1,.meal-tone-2,.meal-tone-3 { background: #fff; border: 1px solid #eeeaf4; }
.meal-mark,.meal-tone-1 .meal-mark,.meal-tone-2 .meal-mark { background: #f0ecf7; color: #8171a8; }
.meal-card-head { color: #322b3d; }
.meal-entries { border-top-color: #f0ecf4; }
.product-panel { background: linear-gradient(150deg,#f2eef8,#faf9fc); }
.finder-result:nth-child(3n+2) .result-glyph,.finder-result:nth-child(3n+3) .result-glyph { background: #eeeaf6; color: #8877ac; }
.mobile-nav .nav-item.active,.mobile-nav .nav-item[data-page=dashboard].active { background: #f0ecf7; color: #7968a5; }

/* A scanned product can be logged by 100 g, one package serving, or exact grams. */
.portion-block { grid-column: 1/-1; }
.portion-heading { font-size: 11px; font-weight: 750; color: #706578; margin-bottom: 8px; }
.portion-options { display: flex; flex-wrap: wrap; gap: 6px; }
.portion-options button { flex: 1 1 30%; min-height: 40px; padding: 7px 8px; border: 1px solid #e5deef; border-radius: 12px; background: #fff; color: #6f647c; font-size: 10px; line-height: 1.2; font-weight: 700; }
.portion-options button.active { background: #8171a8; color: #fff; border-color: #8171a8; }
.portion-quantity,.portion-meal { min-width: 0; }
.portion-preview { grid-column: 1/-1; display: grid; justify-items: center; gap: 3px; border-radius: 15px; background: #fff; padding: 12px; color: #81778b; font-size: 11px; text-align: center; }
.portion-preview strong { font-size: 23px; line-height: 1.15; letter-spacing: -.05em; color: #342d3d; }
.portion-preview small { font-size: 10px; color: #8e8496; }
.portion-custom { margin-top: 15px; border-top: 1px solid #e8e2ef; padding-top: 13px; }
.portion-custom summary { cursor: pointer; color: #8171a8; font-weight: 700; font-size: 11px; }
.portion-custom form { display: grid; gap: 10px; margin-top: 13px; }
.portion-custom label { display: grid; gap: 3px; color: #706578; font-size: 11px; font-weight: 700; }
.portion-custom input { width: 100%; height: 40px; border: 1px solid #e6e0ee; border-radius: 11px; background: #fff; color: #332b3c; padding: 0 11px; }
.portion-custom .button { margin: 0; }