:root { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: #24323b; background: #f3f7fa; font-synthesis: none; --ink: #24323b; --muted: #83929a; --line: #e9eef1; --blue: #167d9a; --blue-dark: #126780; --mint: #dff4eb; --panel: #fff; --protein: #418bd0; --carbs: #e5ae4b; --fat: #6cbaa2; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; padding-bottom: 88px; }
button, input, select { font: inherit; }
button { color: inherit; cursor: pointer; }
.topbar { height: 66px; padding: 0 max(1.1rem, calc((100vw - 1040px)/2)); display: flex; align-items: center; justify-content: space-between; background: #fff; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; font: 800 1.13rem Manrope, sans-serif; letter-spacing: -.05em; }
.brand-mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; color: #fff; background: var(--blue); font-size: 1.13rem; }
.top-note { color: var(--muted); font-size: .86rem; }
#cloud-account { display: flex; align-items: center; gap: 9px; max-width: 48%; margin-left: auto; color: var(--muted); font-size: .72rem; }
#cloud-account span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#cloud-account button { flex: 0 0 auto; padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; color: var(--blue); background: #fff; font-size: .7rem; }
#cloud-notice { position: fixed; z-index: 20; right: 12px; bottom: 88px; max-width: min(420px, calc(100vw - 24px)); padding: 11px 14px; border-radius: 11px; color: #fff; background: #354b55; box-shadow: 0 7px 22px #10242d30; font-size: .8rem; }
#auth-gate { position: fixed; z-index: 30; inset: 0; display: grid; place-items: center; padding: 18px; overflow-y: auto; background: #f3f7fa; }
.auth-card { width: min(100%, 410px); padding: 28px; border: 1px solid var(--line); border-radius: 20px; background: #fff; box-shadow: 0 16px 55px #23475412; }
.auth-logo { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 17px; border-radius: 14px; color: #fff; background: var(--blue); font: 800 1.5rem Manrope, sans-serif; }
.auth-card h1 { margin-bottom: 6px; font-size: 1.8rem; }
.auth-description { margin: 0 0 21px; color: var(--muted); font-size: .88rem; line-height: 1.5; }
.auth-card form { display: grid; gap: 13px; }
.auth-card label { display: grid; gap: 6px; color: #516068; font-size: .78rem; font-weight: 700; }
.auth-card input { width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid #dfe7ea; border-radius: 11px; outline: 0; background: #fbfcfd; color: var(--ink); }
.auth-card input:focus { border-color: #79b9c5; box-shadow: 0 0 0 3px #3b9cac1a; }
.auth-status { min-height: 20px; margin: 10px 0 3px; color: #a34e38; font-size: .78rem; line-height: 1.4; }
.auth-mode { display: block; margin: 5px auto 15px; border: 0; color: var(--blue); background: transparent; font-size: .81rem; font-weight: 700; }
.backup-tools { display: grid; gap: 8px; margin: 17px 0; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: #f8fafb; }
.backup-tools button, .backup-tools label { display: grid; gap: 7px; width: 100%; padding: 8px 9px; border: 0; border-radius: 8px; color: #61717a; background: #fff; text-align: left; font-size: .72rem; font-weight: 600; }
.backup-tools button { cursor: pointer; }
.backup-tools input { min-height: auto; padding: 0; border: 0; background: transparent; font-size: .69rem; }
.auth-safe-note { margin: 0; color: #97a3a8; text-align: center; font-size: .7rem; }
.page { width: min(100% - 32px, 880px); margin: 0 auto; padding: 27px 0 40px; }
.welcome { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin: 5px 0 21px; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: Manrope, 'DM Sans', sans-serif; letter-spacing: -.035em; }
h1 { margin: 0 0 5px; font-size: clamp(1.65rem, 5vw, 2.12rem); }
.welcome .muted { margin: 0; color: var(--muted); font-size: .93rem; }
.eyebrow { margin: 0 0 5px; color: var(--blue); font-size: .68rem; font-weight: 700; letter-spacing: .1em; }
.day-picker { display: flex; align-items: center; gap: 5px; padding: 5px; border: 1px solid var(--line); border-radius: 12px; background: white; box-shadow: 0 4px 15px #2c61700b; }
.day-picker input { min-width: 125px; max-width: 145px; border: 0; outline: 0; color: var(--ink); font-weight: 600; background: transparent; }
.icon-button, .text-button { border: 0; background: transparent; }
.day-picker .icon-button { width: 31px; height: 31px; border-radius: 9px; color: var(--blue); font-size: 1.5rem; line-height: 1; }
.day-picker .icon-button:hover { background: #eff7f8; }
.text-button { padding: .4rem .55rem; color: var(--blue); font-size: .76rem; font-weight: 700; }
.summary-card { padding: 22px 24px; border-radius: 20px; color: #fff; background: linear-gradient(118deg, #126c83, #178aa0 66%, #41a698); box-shadow: 0 12px 30px #1b81921b; }
.summary-heading { display: flex; align-items: start; justify-content: space-between; }
.summary-heading .eyebrow { color: #bce5e6; }
.summary-heading h2 { margin: 0; font-size: 1.13rem; }
.sun-icon { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid #ffffff3a; border-radius: 12px; background: #ffffff13; font-size: 1.2rem; }
.calorie-total { display: flex; align-items: baseline; gap: 8px; margin: 13px 0 15px; }
.calorie-total strong { font: 800 clamp(2.6rem, 10vw, 3.3rem) Manrope, sans-serif; letter-spacing: -.07em; line-height: 1; }
.calorie-total span { color: #c8e8e9; font-weight: 600; }
.macro-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px 0; border-top: 1px solid #ffffff35; padding-top: 13px; }
.macro-summary > span { position: relative; display: grid; grid-template-columns: 10px minmax(0, 1fr); column-gap: 7px; align-items: center; min-width: 0; padding: 0 9px; border-left: 1px solid #ffffff29; }
.macro-summary > span:nth-child(odd) { padding-left: 0; border-left: 0; }
.macro-summary b { font-size: .92rem; }
.macro-summary small { grid-column: 2; margin-top: 2px; color: #d0ebeb; font-size: .69rem; }
.macro-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
.protein-dot { background: var(--protein); }.carbs-dot { background: var(--carbs); }.fat-dot { background: var(--fat); }
.macro-summary .macro-dot { grid-row: span 2; background: #c0e9de; }
.macro-summary .produce-dot { background: #a7dc83; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 25px 0 12px; }
.section-heading h2 { margin: 0; font-size: 1.2rem; }
.meal-grid { display: grid; grid-template-columns: 1fr; gap: 11px; }
.meal-card, .panel { border: 1px solid var(--line); border-radius: 17px; background: var(--panel); box-shadow: 0 4px 16px #27465308; }
.meal-card { padding: 14px 16px 12px; }
.meal-card-heading { display: flex; align-items: center; gap: 11px; }
.meal-icon { display: grid; place-items: center; flex: 0 0 42px; height: 42px; border-radius: 14px; background: #f0f7f6; font-size: 1.28rem; }
.meal-heading-copy { flex: 1; display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.meal-heading-copy h3 { margin: 0; font-size: 1rem; }
.meal-heading-copy > strong { font-size: .92rem; white-space: nowrap; }
.meal-heading-copy > strong small { color: var(--muted); font-size: .72rem; font-weight: 500; }
.add-food-button { flex: 0 0 34px; width: 34px; height: 34px; border: 0; border-radius: 12px; color: #fff; background: var(--blue); font-size: 1.3rem; line-height: 1; box-shadow: 0 4px 10px #167d9a2c; }
.add-food-button:hover, .primary-button:hover { background: var(--blue-dark); }
.meal-mini-macros { display: flex; gap: 13px; margin: 8px 0 0 53px; color: #85939a; font-size: .72rem; }
.empty-meal { margin: 9px 0 1px 53px; color: #a4afb3; font-size: .77rem; }
.meal-items { list-style: none; margin: 10px 0 0 53px; padding: 0; }
.meal-items li { display: flex; align-items: center; gap: 9px; border-top: 1px solid #f0f2f3; padding: 9px 0 2px; }
.food-family-icon { font-size: 1rem; }
.item-copy { display: grid; flex: 1; min-width: 0; gap: 2px; }
.item-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .82rem; }
.item-copy small { color: var(--muted); font-size: .7rem; }
.item-calories { color: #607078; font-size: .76rem; white-space: nowrap; }
.remove-button { display: grid; place-items: center; flex: 0 0 27px; width: 27px; height: 27px; border: 0; border-radius: 9px; color: #97a5ab; background: transparent; font-size: 1.13rem; }
.remove-button:hover { color: #ad4b4b; background: #fff0ef; }
.panel { margin: 14px 0; padding: 19px; }
.form-panel { border-top: 3px solid #8fd4c0; }
.panel-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; color: var(--blue); background: #eaf6f4; font-size: 1.4rem; }
.food-form { display: grid; gap: 15px; }
.food-form > label, .portion-field > label:not(.radio-choice) { display: grid; gap: 7px; color: #516068; font-size: .81rem; font-weight: 600; }
.food-form input:not([type=radio]), .food-form select, .quantity-form input, .month-panel input { width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid #dfe7ea; border-radius: 11px; outline: 0; background: #fbfcfd; color: var(--ink); }
.food-form input:focus, .food-form select:focus, .quantity-form input:focus, .month-panel input:focus { border-color: #79b9c5; box-shadow: 0 0 0 3px #3b9cac1a; }
.portion-field { display: grid; gap: 9px; margin: 0; padding: 13px; border: 1px solid var(--line); border-radius: 13px; }
.portion-field legend { padding: 0 5px; color: #516068; font-size: .81rem; font-weight: 700; }
.radio-choice { display: flex; align-items: start; gap: 10px; padding: 10px; border-radius: 10px; background: #f8fafb; }
.radio-choice input { margin: 3px 0 0; accent-color: var(--blue); }
.radio-choice span { display: grid; gap: 3px; }
.radio-choice strong { font-size: .82rem; }
.radio-choice small, .nutrition-fields label > small { color: var(--muted); font-size: .72rem; }
.hidden { display: none !important; }
.nutrition-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.nutrition-fields label { display: grid; gap: 3px; color: #516068; font-size: .78rem; font-weight: 600; }
.nutrition-fields label input { margin-top: 4px; }
.primary-button { width: 100%; min-height: 46px; border: 0; border-radius: 12px; color: white; background: var(--blue); font-size: .88rem; font-weight: 700; box-shadow: 0 5px 12px #167d9a22; }
.count-pill { display: inline-grid; place-items: center; min-width: 27px; height: 25px; padding: 0 8px; border-radius: 99px; color: var(--blue); background: #eaf5f5; font-size: .76rem; font-weight: 700; }
.food-family-group { margin-top: 17px; }
.food-family-group h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 7px; font-size: .91rem; }
.food-family-group h3 small { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: #809097; background: #f0f3f4; font: 500 .67rem 'DM Sans', sans-serif; }
.food-row { display: flex; align-items: center; gap: 8px; padding: 12px 2px; border-top: 1px solid #f0f2f3; }
.food-row-copy { display: grid; flex: 1; gap: 3px; min-width: 0; }
.food-row-copy strong { font-size: .85rem; }
.food-row-copy small { color: var(--muted); font-size: .71rem; }
.storage-note { margin: 18px 0 0; color: #95a1a5; font-size: .71rem; }
.empty-state { margin: 12px 0 2px; padding: 17px; border-radius: 12px; color: var(--muted); background: #f7f9fa; text-align: center; font-size: .84rem; }
.bottom-nav { position: fixed; z-index: 5; right: 0; bottom: 0; left: 0; display: flex; justify-content: center; gap: clamp(18px, 11vw, 80px); padding: 9px 12px max(9px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: #fffffff2; backdrop-filter: blur(12px); }
.nav-item { display: grid; justify-items: center; gap: 3px; min-width: 76px; color: #8b989e; text-decoration: none; }
.nav-item span { display: grid; place-items: center; width: 31px; height: 25px; border-radius: 10px; font-size: 1.25rem; line-height: 1; }
.nav-item small { font-size: .68rem; font-weight: 600; }
.nav-item.active { color: var(--blue); }
.nav-item.active span { background: #e5f3f3; }
.sheet { position: fixed; inset: auto 0 0; width: min(100%, 620px); max-width: 100%; max-height: min(82vh, 760px); margin: 0 auto; padding: 10px 19px max(22px, env(safe-area-inset-bottom)); overflow-y: auto; border: 0; border-radius: 23px 23px 0 0; color: var(--ink); background: #fff; box-shadow: 0 -10px 45px #1c394a2b; }
.sheet::backdrop { background: #18374670; backdrop-filter: blur(2px); }
.sheet-handle { width: 38px; height: 4px; margin: 0 auto 17px; border-radius: 4px; background: #dbe3e6; }
.sheet-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.sheet-title h2 { margin: 0; font-size: 1.23rem; }
.sheet-title .icon-button { width: 33px; height: 33px; border-radius: 11px; color: #718189; background: #f0f4f5; font-size: 1.2rem; }
.picker-intro { color: var(--muted); font-size: .85rem; }
.family-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.family-choice { display: grid; justify-items: start; gap: 6px; min-height: 105px; padding: 13px; border: 1px solid var(--line); border-radius: 15px; background: #fbfcfc; text-align: left; }
.family-choice:hover { border-color: #9ccbd0; background: #f3f9f8; }
.family-choice > span { font-size: 1.45rem; }
.family-choice strong { font-size: .8rem; }
.family-choice small { color: var(--muted); font-size: .68rem; }
.back-link { margin: 0 0 12px; padding: 5px 0; border: 0; color: var(--blue); background: transparent; font-size: .83rem; font-weight: 700; }
.picker-family-title { display: flex; align-items: center; gap: 9px; margin: 0 0 9px; }
.picker-family-title span { font-size: 1.4rem; }
.picker-family-title h3, .selected-food h3 { margin: 0; font-size: 1.04rem; }
.food-choice-list { border-top: 1px solid var(--line); }
.food-choice-list > button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 13px 2px; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; }
.food-choice-list > button > span:first-child { display: grid; flex: 1; gap: 4px; }
.food-choice-list strong { font-size: .86rem; }
.food-choice-list small { color: var(--muted); font-size: .7rem; font-weight: 400; }
.food-choice-list > button > span:nth-child(2) { color: #53646c; font-size: .75rem; white-space: nowrap; }
.food-choice-list > button > b { color: #a2afb4; font-size: 1.1rem; }
.selected-food { display: flex; align-items: center; gap: 12px; margin: 15px 0 20px; }
.family-symbol { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: #eff7f5; font-size: 1.35rem; }
.selected-food > div { display: grid; gap: 5px; }
.selected-food small { color: var(--muted); font-size: .71rem; }
.quantity-form { display: grid; gap: 10px; }
.quantity-form > label { color: #526169; font-size: .81rem; font-weight: 700; }
.amount-entry { display: flex; align-items: center; gap: 8px; }
.amount-entry button { flex: 0 0 39px; width: 39px; height: 39px; border: 0; border-radius: 11px; color: var(--blue); background: #eaf5f4; font-size: 1.1rem; }
.amount-entry input { width: 92px; min-height: 40px; text-align: center; font-weight: 700; }
.amount-entry > span { color: var(--muted); font-size: .75rem; }
.quantity-form .primary-button { margin-top: 6px; }
.month-panel { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.month-panel label { font-size: .83rem; font-weight: 700; }
.month-panel input { width: auto; min-height: 40px; }
.stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.stat-card { display: flex; align-items: center; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 15px; background: #fff; }
.stat-icon { display: grid; place-items: center; flex: 0 0 35px; width: 35px; height: 35px; border-radius: 12px; color: var(--blue); background: #e9f5f3; }
.stat-card div { display: grid; gap: 3px; min-width: 0; }
.stat-card small { color: var(--muted); font-size: .68rem; white-space: nowrap; }
.stat-card strong { font: 700 .98rem Manrope, sans-serif; white-space: nowrap; }
.chart-panel { overflow: hidden; }
.chart-panel .section-heading { margin-top: 0; }
.chart-wrap { width: 100%; min-height: 170px; overflow-x: auto; }
.chart-wrap svg { display: block; width: 100%; min-width: 360px; height: auto; }
.chart-gridline { stroke: #e8eef0; stroke-width: 1; }.chart-label { fill: #95a2a7; font: 10px 'DM Sans', sans-serif; }.chart-bar { fill: #56b8a0; }.chart-bar:hover { fill: #268c82; }
.protein-bar-low { fill: #df5e5e; }.protein-bar-target { fill: #4cad7e; }.produce-bar { fill: #8dbf55; }
.chart-legend { display: flex; align-items: center; gap: 7px; margin: 8px 0 0; color: var(--muted); font-size: .72rem; }.legend-dot { width: 8px; height: 8px; border-radius: 50%; background: #56b8a0; }.protein-low-dot { background: #df5e5e; }.protein-target-dot { background: #4cad7e; }.chart-legend .produce-dot { display: inline-block; background: #8dbf55; }
.macro-chart { display: flex; align-items: center; justify-content: center; gap: clamp(18px, 8vw, 52px); padding: 7px 0 2px; }
.macro-donut { display: grid; place-items: center; flex: 0 0 148px; width: 148px; height: 148px; border-radius: 50%; background: conic-gradient(var(--protein) 0 var(--p-stop), var(--carbs) var(--p-stop) var(--c-stop), var(--fat) var(--c-stop) 100%); position: relative; }
.macro-donut::before { content: ''; position: absolute; inset: 13px; border-radius: 50%; background: #fff; }
.macro-donut > div { z-index: 1; display: grid; justify-items: center; gap: 2px; }.macro-donut strong { font: 800 1.18rem Manrope, sans-serif; }.macro-donut small { color: var(--muted); font-size: .6rem; }
.macro-legend { display: grid; gap: 13px; }.macro-legend > div { display: flex; align-items: center; gap: 9px; }.macro-legend > div > span { display: grid; gap: 2px; }.macro-legend strong { font-size: .77rem; }.macro-legend small { color: var(--muted); font-size: .68rem; }
@media (min-width: 680px) {
  body { padding-bottom: 78px; }
  .page { padding-top: 38px; }
  .meal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .meal-card { padding: 16px; }
  .summary-card { padding: 26px 30px; }
  .macro-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .macro-summary > span { border-left: 1px solid #ffffff29; }
  .macro-summary > span:first-child { padding-left: 0; border-left: 0; }
  .macro-summary > span:nth-child(odd) { padding-left: 9px; border-left: 1px solid #ffffff29; }
  .macro-summary > span:nth-child(3) { padding-left: 9px; }
  .food-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .food-form > .portion-field, .food-form > .nutrition-fields, .food-form > .primary-button { grid-column: 1 / -1; }
  .nutrition-fields { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .family-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bottom-nav { gap: 64px; }
}
@media (max-width: 540px) {
  .top-note { font-size: .75rem; }
  #cloud-account { max-width: 58%; }
  #cloud-account span { display: none; }
  #cloud-account button { font-size: .68rem; }
  .page { width: min(100% - 24px, 880px); padding-top: 21px; }
  .welcome { align-items: flex-start; flex-direction: column; }
  .day-picker { align-self: stretch; justify-content: center; width: max-content; max-width: 100%; }
  .summary-card { padding: 18px; border-radius: 17px; }
  .panel { padding: 16px; }
}
@media (max-width: 370px) {
  .day-picker { gap: 1px; }
  .day-picker input { min-width: 112px; width: 122px; }
  .text-button { padding-inline: .35rem; }
  .stat-card { padding: 11px 9px; gap: 7px; }
  .stat-icon { flex-basis: 30px; width: 30px; height: 30px; }
  .macro-chart { gap: 15px; }.macro-donut { flex-basis: 128px; width: 128px; height: 128px; }
}