.nutrition-page { display: none; max-width: 760px; margin: 0 auto; }
[data-view="nutrition"] .nutrition-page { display: grid; gap: 18px; }
[data-view="nutrition"] .stats-grid,
[data-view="nutrition"] .dashboard-grid,
[data-view="nutrition"] .page-heading { display: none; }
.calorie-teaser { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 22px; background: #fff8f2; }
.calorie-teaser p { margin-top: 7px; color: #71786b; font-size: 12px; }
:not([data-view="overview"]) > body .calorie-teaser { display: none; }
.n-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.n-heading p { color: #727c6b; font-size: 13px; margin-top: 4px; }
.n-heading h1 { font-size: 29px; }
.n-eyebrow { font-size: 9px; letter-spacing: 2px; color: #9b7a64; }
.n-datebar { display: flex; align-items: center; justify-content: center; gap: 12px; }
.n-datebar input { border: 0; color: #374036; background: transparent; font-weight: 600; min-height: 44px; min-width: 0; width: 146px; }
.n-datebar .icon-button { font-size: 27px; width: 42px; height: 44px; }
.n-budget { background: #fff7ef; border-color: #f1dfce; position: relative; }
.n-budget > p:first-of-type { font-size: 15px; margin-top: 10px; color: #735440; }
.n-status { display: inline-block; border-radius: 20px; padding: 5px 10px; font-size: 11px; color: #75634d; background: #f5eadb; }
.n-big { font-size: 54px; font-weight: 600; letter-spacing: -2px; color: #8c5039; line-height: 1.5; }
.n-big small { margin-left: 8px; font-size: 13px; letter-spacing: 0; font-weight: 400; }
.n-budget progress { width: 100%; height: 7px; appearance: none; border: 0; background: #eddfd2; border-radius: 8px; overflow: hidden; }
.n-budget progress::-webkit-progress-bar { background: #eddfd2; }
.n-budget progress::-webkit-progress-value { background: #e6a276; border-radius: 8px; }
.n-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 23px 0; }
.n-metrics span { display: block; color: #7f6a58; font-size: 11px; margin-bottom: 7px; }
.n-metrics strong { font-size: 23px; font-weight: 550; }
.n-gap { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 15px; border-top: 1px solid #ecdfd2; font-size: 12px; }
.n-gap strong { font-size: 19px; white-space: nowrap; }
.n-gap small { font-size: 10px; font-weight: 400; }
.n-caption { font-size: 12px; line-height: 1.85; color: #727c6b; margin: 9px 0; }
.n-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.n-row > .n-caption { font-size: 10px; }
.n-notice { padding: 14px 16px; color: #795637; background: #fff1de; border: 1px solid #efdfc5; font-size: 12px; line-height: 1.85; border-radius: 12px; }
.n-notice .text-link { display: block; margin-top: 7px; }
.n-form { display: grid; gap: 15px; margin-top: 17px; }
.n-form label { display: grid; gap: 8px; font-size: 12px; line-height: 1.7; color: #56624f; min-width: 0; }
.n-form input:not([type="checkbox"]), .n-form select { width: 100%; min-width: 0; height: 46px; border: 1px solid #dfe3da; border-radius: 8px; background: #fff; color: #374036; padding: 8px 10px; font-size: 15px; }
.n-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.n-form .n-caption { margin: 0; }
.n-form .n-checkbox { display: flex; align-items: flex-start; }
.n-checkbox input { margin-top: 4px; flex-shrink: 0; width: 17px; height: 17px; accent-color: #ce7b59; }
.n-help { margin-top: 15px; padding-top: 13px; border-top: 1px solid #eceee7; font-size: 12px; line-height: 1.9; color: #69735f; }
.n-help summary { cursor: pointer; color: #47563f; min-height: 30px; }
.n-help p { margin: 9px 0; }
.n-help ol { padding-left: 21px; }
.n-heart { color: #648367; font-size: 35px; margin: 16px 0 7px; }
.n-heart small { font-size: 12px; margin-left: 10px; }
.n-empty { text-align: center; color: #76816d; line-height: 2.2; padding: 27px 0; }
.n-empty span { font-size: 12px; color: #899180; }
.n-meal { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 17px 0; border-bottom: 1px solid #eeeee8; }
.n-meal > div:first-child { min-width: 0; }
.n-meal strong { display: block; font-size: 14px; overflow-wrap: anywhere; }
.n-meal span { display: block; font-size: 11px; color: #6d7865; margin-top: 6px; overflow-wrap: anywhere; }
.n-meal b { font-size: 17px; white-space: nowrap; font-weight: 550; }
.n-meal small { font-size: 10px; font-weight: 400; }
.n-meal-actions { display: flex; gap: 4px; }
.n-meal-actions button { font-size: 11px; color: #857361; min-width: 40px; min-height: 40px; padding: 5px; }
.n-full { width: 100%; margin-top: 18px; }
.nutrition-page .secondary-button, #nutrition-dialog .secondary-button { min-height: 44px; }
.nutrition-page .text-link, #nutrition-dialog .text-link { min-height: 40px; text-align: left; }
#nutrition-dialog { width: min(520px, calc(100vw - 24px)); max-height: calc(100dvh - 36px); overflow-y: auto; padding: 23px; }
#nutrition-dialog .dialog-heading { position: sticky; top: -23px; background: white; z-index: 1; padding-block: 10px; }
#nutrition-dialog .dialog-heading .icon-button { font-size: 24px; width: 44px; height: 44px; }
.calendar-record-action { display: flex; gap: 10px; flex-wrap: wrap; }
.android-app .nutrition-page .card { padding: 20px; }
.android-app .calorie-teaser { padding: 16px; }
.android-app .n-heading h1 { font-size: 26px; }
@media (max-width: 400px) {
  .n-heading h1 { font-size: 25px; }
  .n-datebar { gap: 4px; }
  .n-big { font-size: 46px; }
  .n-metrics strong { font-size: 21px; }
  .n-metrics span { font-size: 10px; }
  .n-gap { flex-wrap: wrap; }
  .n-form-grid { gap: 8px; }
  #nutrition-dialog { padding: 18px; }
  #nutrition-dialog .dialog-heading { top: -18px; }
}