:root {
  --ink: #17231f;
  --muted: #6d7b75;
  --paper: #f4f6f1;
  --card: #ffffff;
  --line: #dfe6df;
  --green: #205d47;
  --green-dark: #133e30;
  --mint: #d7eadf;
  --lime: #c9e86b;
  --protein: #2b7a5d;
  --carbs: #d98541;
  --fat: #8765b3;
  --danger: #b74c46;
  --shadow: 0 16px 44px rgba(22, 44, 35, .09);
  --radius: 24px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--paper); }
button, input, select { font: inherit; }
button { color: inherit; }
svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.app-shell { min-height: 100dvh; max-width: 920px; margin: 0 auto; padding: 0 22px 118px; }
.topbar { height: 76px; display: flex; align-items: center; justify-content: space-between; }.topbar-actions { display: flex; gap: 8px; }.profile-button { overflow: hidden; }.profile-button span, .profile-button img { width: 100%; height: 100%; display: grid; place-items: center; }.profile-button img { object-fit: cover; }
.brand { display: flex; align-items: center; gap: 10px; border: 0; background: none; font-weight: 800; font-size: 19px; cursor: pointer; }
.brand-mark { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 12px; color: #fff; background: var(--green); box-shadow: 0 8px 16px rgba(32,93,71,.2); }
.icon-button { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; border: 1px solid var(--line); background: var(--card); cursor: pointer; }
.icon-button svg { width: 20px; }
.icon-button.subtle { border: 0; background: transparent; font-size: 30px; color: var(--muted); }
.view { display: none; animation: rise .25s ease; }
.view.active { display: block; }
@keyframes rise { from { opacity: 0; transform: translateY(5px); } }
.date-row { display: flex; justify-content: center; align-items: center; gap: 12px; margin: 4px 0 22px; }
.date-picker-button { min-width: 160px; background: transparent; border: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; }
.date-picker-button strong { font-size: 18px; }.date-picker-button span { font-size: 12px; color: var(--muted); text-transform: capitalize; }
.hero-card { color: white; background: linear-gradient(145deg, #173f31 0%, #205d47 68%, #327258 100%); border-radius: 30px; padding: 26px 30px; display: flex; align-items: center; gap: 28px; box-shadow: 0 24px 48px rgba(25,76,57,.2); overflow: hidden; position: relative; }
.hero-card::after { content: ""; position: absolute; width: 180px; height: 180px; border: 36px solid rgba(255,255,255,.04); border-radius: 50%; right: -80px; bottom: -100px; }
.calorie-ring { --progress: 0deg; flex: 0 0 auto; width: 138px; height: 138px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--lime) var(--progress), rgba(255,255,255,.14) 0); position: relative; }
.calorie-ring::after { content: ""; position: absolute; width: 106px; height: 106px; border-radius: 50%; background: #1c513e; }
.ring-center { z-index: 1; text-align: center; }.ring-center strong { display: block; font-size: 28px; letter-spacing: -.04em; }.ring-center span { font-size: 11px; color: #d4e4dc; }
.eyebrow { display: block; color: var(--green); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 5px; }
.hero-copy .eyebrow { color: var(--lime); }.hero-copy h1 { margin: 0; font-size: clamp(23px,4vw,34px); letter-spacing: -.04em; }.hero-copy p { margin: 8px 0 0; color: #d6e5de; font-size: 14px; }
.hero-copy { flex: 1; }.hero-exercise { min-width: 150px; display: flex; align-items: center; gap: 11px; padding-left: 25px; border-left: 1px solid rgba(255,255,255,.18); z-index: 1; }.hero-exercise-icon { display: grid; place-items: center; width: 39px; height: 39px; border-radius: 13px; color: #183d30; background: var(--lime); }.hero-exercise div > span, .hero-exercise small { display: block; color: #c7d9d1; font-size: 10px; }.hero-exercise strong { display: block; margin: 2px 0 0; font-size: 17px; }
.macro-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin: 16px 0 32px; }
.macro-card { background: var(--card); padding: 16px; border: 1px solid var(--line); border-radius: 18px; }.macro-card span { color: var(--muted); font-size: 12px; }.macro-card strong { display: block; margin-top: 4px; font-size: 14px; }.macro-card div { height: 5px; margin-top: 12px; border-radius: 99px; background: #ecf0ec; overflow: hidden; }.macro-card i { display: block; width: 0; height: 100%; border-radius: inherit; transition: width .4s ease; }.protein i { background: var(--protein); }.carbs i { background: var(--carbs); }.fat i { background: var(--fat); }
.water-card { display: grid; grid-template-columns: minmax(210px,1fr) minmax(120px,1fr) auto; align-items: center; gap: 20px; margin: -16px 0 32px; padding: 16px 18px; border: 1px solid #d4e2ec; border-radius: 19px; background: #fafdff; }.water-copy { display: flex; align-items: center; gap: 12px; }.water-icon { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 auto; border-radius: 14px; background: #dceef9; }.water-copy .eyebrow { color: #34739a; margin-bottom: 2px; }.water-copy h2 { margin: 0; font-size: 16px; }.water-copy p { margin: 2px 0 0; color: var(--muted); font-size: 11px; }.water-progress { height: 7px; overflow: hidden; border-radius: 99px; background: #e3edf3; }.water-progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: #4a9aca; transition: width .3s ease; }.water-actions { display: flex; gap: 6px; }.water-actions button { height: 36px; padding: 0 12px; border: 0; border-radius: 11px; color: #245f82; background: #dceef9; font-weight: 800; cursor: pointer; }.water-actions button:first-child { width: 36px; padding: 0; color: var(--muted); background: #edf2f4; }
.water-actions button:disabled { opacity: .4; cursor: default; }
.section-heading, .page-heading, .chart-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; }.section-heading { margin: 0 2px 14px; }.section-heading h2, .page-heading h1, .chart-heading h2 { margin: 0; letter-spacing: -.035em; }.section-heading h2 { font-size: 22px; }.page-heading { margin: 14px 0 24px; }.page-heading h1 { font-size: 34px; }.page-intro { color: var(--muted); font-size: 14px; margin: -13px 0 20px; max-width: 580px; }
.meal-list { display: grid; gap: 11px; }.meal-card { background: var(--card); border: 1px solid var(--line); border-radius: 19px; overflow: hidden; }.meal-header { display: flex; align-items: center; justify-content: space-between; padding: 17px 17px 13px; }.meal-title { display: flex; align-items: center; gap: 11px; }.meal-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: var(--mint); font-size: 17px; }.meal-title h3 { margin: 0; font-size: 15px; }.meal-title span { color: var(--muted); font-size: 12px; }.add-entry { border: 0; color: var(--green); background: var(--mint); border-radius: 11px; padding: 8px 11px; font-weight: 750; cursor: pointer; }.entry-list { border-top: 1px solid var(--line); }.food-entry { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 12px 17px; }.food-entry + .food-entry { border-top: 1px solid #edf0ed; }.food-entry strong { display: block; font-size: 13px; }.food-entry strong.recipe-food-name::before { content: ''; display: inline-block; width: 7px; height: 7px; margin: 0 7px 1px 0; border-radius: 50%; background: var(--carbs); }.food-entry span { color: var(--muted); font-size: 11px; }.food-entry b { font-size: 13px; }.delete-entry { width: 30px; height: 30px; border: 0; background: transparent; color: #9aaaa2; cursor: pointer; font-size: 18px; }.empty-meal { padding: 0 17px 14px; color: #91a098; font-size: 12px; }
.exercise-card { border-color: #d8e3ee; background: #fbfdff; }.exercise-card .meal-icon { background: #e3edf7; }.exercise-card .add-entry { color: #315f85; background: #e3edf7; }.exercise-kcal { color: #315f85; }
.primary-button, .secondary-button, .scan-button { border: 0; border-radius: 13px; padding: 12px 17px; font-weight: 750; cursor: pointer; }.primary-button { color: white; background: var(--green); box-shadow: 0 9px 18px rgba(32,93,71,.16); }.primary-button.compact { padding: 10px 15px; }.secondary-button { background: #edf1ed; color: var(--ink); }.scan-button { display: flex; align-items: center; gap: 6px; color: var(--green); background: var(--mint); padding: 10px 12px; align-self: end; margin-bottom: 1px; }.scan-button svg { width: 18px; }
.search-box { height: 51px; display: flex; align-items: center; gap: 10px; padding: 0 16px; background: white; border: 1px solid var(--line); border-radius: 16px; margin-bottom: 16px; }.search-box svg { width: 20px; color: var(--muted); }.search-box input { width: 100%; border: 0; outline: 0; background: transparent; }.food-library { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }.food-item { background: white; border: 1px solid var(--line); border-radius: 18px; padding: 17px; display: flex; justify-content: space-between; gap: 15px; }.food-item h3 { margin: 0 0 4px; font-size: 15px; }.food-item p { margin: 0; color: var(--muted); font-size: 12px; }.food-item .nutrition { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; font-size: 10px; color: var(--muted); }.nutrition b, .food-entry span b, .entry-preview b { color: var(--ink); font-weight: 800; }.food-actions { display: flex; flex-direction: column; gap: 6px; }.mini-button { width: 32px; height: 32px; border: 0; border-radius: 10px; background: #eff3ef; color: var(--green); cursor: pointer; }.empty-state { text-align: center; padding: 80px 10px; }.empty-state h2 { margin-bottom: 5px; }.empty-state p { color: var(--muted); margin: 0 0 20px; }.empty-icon { display: block; font-size: 48px; color: var(--green); }.hidden { display: none !important; }
.library-toolbar { min-height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 2px 12px; color: var(--muted); font-size: 12px; }.view-switch { display: flex; gap: 3px; padding: 3px; border-radius: 11px; background: #e7ece8; }.view-switch button { border: 0; border-radius: 8px; padding: 6px 9px; background: transparent; color: var(--muted); font-size: 11px; font-weight: 750; cursor: pointer; }.view-switch button.active { background: white; color: var(--green-dark); box-shadow: 0 2px 7px rgba(22,44,35,.09); }.food-library.library-list-mode { grid-template-columns: 1fr; gap: 7px; }.library-list-mode .food-item { min-height: 64px; align-items: center; padding: 10px 12px 10px 15px; border-radius: 13px; }.library-list-mode .food-item > div:first-child { min-width: 0; flex: 1; display: grid; grid-template-columns: minmax(150px,1.4fr) minmax(150px,1fr) auto; align-items: center; gap: 14px; }.library-list-mode .food-item h3 { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.library-list-mode .food-item p { white-space: nowrap; }.library-list-mode .food-item .nutrition { margin: 0; white-space: nowrap; }.library-list-mode .recipe-components { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.library-list-mode .food-actions { flex-direction: row; }
.weight-summary-card { display: grid; grid-template-columns: repeat(3,1fr); background: var(--green-dark); color: white; padding: 23px; border-radius: 23px; margin-bottom: 14px; }.weight-summary-card div + div { border-left: 1px solid rgba(255,255,255,.15); padding-left: 22px; }.weight-summary-card span { display: block; color: #bcd1c7; font-size: 12px; }.weight-summary-card strong { display: block; margin-top: 5px; font-size: 22px; }.chart-card { background: white; border: 1px solid var(--line); border-radius: 23px; padding: 22px; }.chart-heading { align-items: center; }.chart-heading h2 { font-size: 21px; }.chart-legend { color: var(--muted); font-size: 12px; }.chart-legend i { display: inline-block; width: 8px; height: 8px; background: var(--green); border-radius: 50%; margin-right: 6px; }.weight-chart { height: 260px; margin-top: 18px; }.weight-chart svg { width: 100%; height: 100%; overflow: visible; }.weight-history { display: grid; gap: 8px; margin-top: 14px; }.weight-row { display: flex; align-items: center; justify-content: space-between; background: white; border: 1px solid var(--line); border-radius: 14px; padding: 13px 16px; }.weight-row span { color: var(--muted); font-size: 13px; }.weight-row strong { font-size: 15px; }.weight-row button { border: 0; background: none; color: var(--danger); cursor: pointer; margin-left: 8px; }
.calendar-page-heading { align-items: center; }.calendar-navigation { display: flex; align-items: center; gap: 11px; }.calendar-navigation button { width: 35px; height: 35px; border: 1px solid var(--line); border-radius: 11px; background: white; color: var(--green); font-size: 22px; cursor: pointer; }.calendar-navigation strong { min-width: 130px; text-align: center; text-transform: capitalize; }.calendar-legend { display: flex; flex-wrap: wrap; gap: 15px; margin: -10px 2px 13px; color: var(--muted); font-size: 11px; }.calendar-legend span { display: flex; align-items: center; gap: 5px; }.calendar-legend i { width: 8px; height: 8px; border-radius: 50%; }.legend-kcal { background: var(--green); }.legend-water { background: #4a9aca; }.legend-weight { background: var(--fat); }.legend-exercise { background: var(--carbs); }.calendar-card { padding: 14px; border: 1px solid var(--line); border-radius: 23px; background: white; box-shadow: var(--shadow); }.calendar-weekdays, .calendar-grid { display: grid; grid-template-columns: repeat(7,1fr); }.calendar-weekdays span { padding: 8px; color: var(--muted); font-size: 11px; font-weight: 750; text-align: center; }.calendar-grid { overflow: visible; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }.calendar-day { position: relative; min-width: 0; min-height: 102px; padding: 8px; border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: white; text-align: left; cursor: pointer; }.calendar-day.outside { color: #aab4ae; background: #f7f8f6; }.calendar-day.today .day-number { display: grid; place-items: center; width: 24px; height: 24px; margin: -3px 0 2px -3px; border-radius: 50%; color: white; background: var(--green); }.day-number { display: block; margin-bottom: 7px; font-weight: 800; }.day-mini { display: grid; gap: 3px; }.day-mini span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); font-size: 9px; }.day-mini b { color: var(--ink); }.calendar-popover { position: absolute; z-index: 30; left: 50%; bottom: calc(100% - 4px); width: 240px; padding: 14px; border-radius: 16px; color: var(--ink); background: white; box-shadow: 0 18px 42px rgba(17,35,29,.22); border: 1px solid var(--line); opacity: 0; visibility: hidden; transform: translate(-50%,8px); transition: .16s ease; pointer-events: none; }.calendar-day:hover .calendar-popover, .calendar-day:focus .calendar-popover { opacity: 1; visibility: visible; transform: translate(-50%,0); }.calendar-day:nth-child(7n+1) .calendar-popover, .calendar-day:nth-child(7n+2) .calendar-popover { left: -3px; transform: translate(0,8px); }.calendar-day:nth-child(7n+1):hover .calendar-popover, .calendar-day:nth-child(7n+1):focus .calendar-popover, .calendar-day:nth-child(7n+2):hover .calendar-popover, .calendar-day:nth-child(7n+2):focus .calendar-popover { transform: translate(0,0); }.calendar-day:nth-child(7n), .calendar-day:nth-child(7n-1) { }.calendar-day:nth-child(7n) .calendar-popover, .calendar-day:nth-child(7n-1) .calendar-popover { left: auto; right: -3px; transform: translate(0,8px); }.calendar-day:nth-child(7n):hover .calendar-popover, .calendar-day:nth-child(7n):focus .calendar-popover, .calendar-day:nth-child(7n-1):hover .calendar-popover, .calendar-day:nth-child(7n-1):focus .calendar-popover { transform: translate(0,0); }.calendar-popover strong { display: block; margin-bottom: 9px; font-size: 13px; text-transform: capitalize; }.popover-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }.popover-grid span { padding: 7px; border-radius: 9px; background: #f2f5f2; color: var(--muted); font-size: 10px; }.popover-grid b { display: block; margin-top: 2px; color: var(--ink); font-size: 13px; }.popover-grid .popover-macros { grid-column: 1 / -1; }.popover-grid .popover-macro-values { display: block; padding: 0; background: transparent; color: var(--ink); font-size: 11px; line-height: 1.6; }.popover-grid .popover-macro-values b { display: inline; margin: 0; font-size: inherit; }
.stats-heading { align-items: center; }.stats-actions { display: flex; align-items: center; gap: 10px; }.calendar-navigation button:disabled { opacity: .35; cursor: default; }.stats-legend { display: flex; flex-wrap: wrap; gap: 16px; margin: -8px 2px 14px; color: var(--muted); font-size: 11px; }.stats-legend span { display: flex; align-items: center; gap: 6px; }.stats-legend i { width: 20px; height: 3px; border-radius: 99px; }.stats-kcal { background: var(--green); }.stats-exercise { background: var(--carbs); }.stats-water { background: #4a9aca; }.stats-weight { background: var(--fat); }.stats-card { padding: 18px; overflow-x: auto; border: 1px solid var(--line); border-radius: 23px; background: white; box-shadow: var(--shadow); }.stats-chart { min-width: 720px; height: 430px; }.stats-chart svg { width: 100%; height: 100%; overflow: visible; }.stats-chart text { font-family: inherit; font-weight: 400; }.stats-empty { height: 100%; display: grid; place-items: center; color: var(--muted); }.export-presets { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }.export-presets button { padding: 10px; border: 1px solid var(--line); border-radius: 11px; color: var(--green); background: white; font-weight: 750; cursor: pointer; }.export-presets button.active { color: white; border-color: var(--green); background: var(--green); }
.bottom-nav { position: fixed; z-index: 20; left: 50%; bottom: max(15px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(calc(100% - 28px), 800px); padding: 7px; display: grid; grid-template-columns: repeat(7,1fr); background: rgba(19, 36, 30, .94); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.1); border-radius: 22px; box-shadow: 0 18px 42px rgba(19,36,30,.3); }.bottom-nav button { border: 0; border-radius: 16px; background: transparent; color: #aebdb6; padding: 9px 3px; display: flex; align-items: center; justify-content: center; gap: 3px; cursor: pointer; }.bottom-nav button.active { background: white; color: var(--green-dark); }.bottom-nav svg { width: 18px; height: 18px; }.bottom-nav span { font-size: 9px; font-weight: 750; }
.app-dialog { width: min(580px, calc(100% - 26px)); max-height: calc(100dvh - 30px); overflow: auto; border: 0; border-radius: 25px; padding: 24px; box-shadow: var(--shadow); }.app-dialog::backdrop { background: rgba(12, 24, 19, .55); backdrop-filter: blur(3px); }.small-dialog { width: min(430px, calc(100% - 26px)); }.dialog-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 20px; }.dialog-header h2 { margin: 0; letter-spacing: -.03em; }.dialog-header .icon-button { border: 0; background: #edf1ed; font-size: 22px; }.dialog-description { margin: -8px 0 20px; color: var(--muted); font-size: 13px; }.app-dialog label { display: block; color: var(--ink); font-size: 12px; font-weight: 700; }.app-dialog input, .app-dialog select { width: 100%; height: 46px; margin-top: 7px; border: 1px solid var(--line); border-radius: 12px; background: white; padding: 0 12px; outline: none; }.app-dialog input:focus, .app-dialog select:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(32,93,71,.1); }.app-dialog small { display: block; margin: 4px 0 0 2px; color: var(--muted); font-weight: 400; }.form-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 13px; margin-top: 15px; }.form-grid.two { grid-template-columns: repeat(2,1fr); }.entry-quantity-grid { align-items: start; }.barcode-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin-top: 15px; }.dialog-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 23px; }.dialog-actions .danger-button { margin-right: auto; }.danger-button { border: 0; border-radius: 13px; padding: 0 17px; color: var(--danger); background: #f5e9e7; font-weight: 750; cursor: pointer; }#foodForm .dialog-actions { flex-wrap: wrap; }.entry-preview { min-height: 54px; display: grid; place-items: center; margin-top: 16px; padding: 8px; border-radius: 13px; background: #f0f5f1; color: var(--muted); font-size: 13px; }.nutrition-preview { width: 100%; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 6px; }.preview-stat { min-width: 0; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 9px 5px; border: 1px solid #dfe7e1; border-radius: 10px; background: white; white-space: nowrap; }.preview-stat b { color: var(--ink); font-size: 11px; }.preview-stat strong { color: var(--muted); font-size: 11px; font-weight: 500; }.profile-photo-row { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }.profile-photo-row img { width: 82px; height: 82px; object-fit: cover; border-radius: 24px; background: #edf1ed; }.profile-photo-row img.empty { visibility: hidden; }.profile-photo-picker { display: grid!important; place-items: center; height: 42px; padding: 0 15px; cursor: pointer; }.profile-photo-picker input { display: none; }.profile-derived { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }.profile-derived span { padding: 12px; border-radius: 12px; color: var(--muted); background: #f0f5f1; font-size: 11px; }.profile-derived strong { display: block; margin-top: 3px; color: var(--ink); font-size: 17px; }.profile-note { margin: 14px 0 0; }.camera-frame { aspect-ratio: 4/3; position: relative; overflow: hidden; background: #111; border-radius: 18px; }.camera-frame video { width: 100%; height: 100%; object-fit: cover; }.scan-target { position: absolute; inset: 28% 10%; border: 2px solid var(--lime); border-radius: 12px; box-shadow: 0 0 0 999px rgba(0,0,0,.22); }.scanner-dialog p { color: var(--muted); font-size: 13px; text-align: center; }.photo-upload { display: block; text-align: center; margin-bottom: 8px; }.photo-upload input { display: none; }.scanner-dialog > .secondary-button { width: 100%; }.toast { position: fixed; z-index: 99; left: 50%; bottom: 104px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; color: white; background: #13241e; padding: 11px 16px; border-radius: 12px; font-size: 13px; box-shadow: var(--shadow); transition: .25s ease; }.toast.show { opacity: 1; transform: translate(-50%, 0); }.spaced-label { margin-top: 14px; }.ingredient-heading { display: flex; align-items: center; justify-content: space-between; margin: 20px 0 10px; font-size: 13px; }.add-ingredient-button { border: 0; background: transparent; color: var(--green); font-weight: 750; cursor: pointer; }.ingredient-rows { display: grid; gap: 9px; }.ingredient-row { display: grid; grid-template-columns: 1fr 105px 34px; gap: 8px; align-items: center; }.ingredient-row select, .ingredient-row input { margin: 0; }.ingredient-row button { width: 34px; height: 34px; border: 0; border-radius: 10px; background: #f5e9e7; color: var(--danger); cursor: pointer; }.recipe-components { margin-top: 8px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.profile-button svg { width: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }.profile-derived span { transition: background .2s,color .2s; }.profile-derived .bmi-normal { color: #174c38; background: #cfeada; }.profile-derived .bmi-grade-1 { color: #5e4b00; background: #f4e49a; }.profile-derived .bmi-grade-2 { color: #703b0c; background: #f5bf83; }.profile-derived .bmi-grade-3 { color: #742b28; background: #efaaa6; }.profile-derived .bmi-normal strong, .profile-derived .bmi-grade-1 strong, .profile-derived .bmi-grade-2 strong, .profile-derived .bmi-grade-3 strong { color: inherit; }.bmi-scale { margin-top: 15px; overflow-x: auto; padding-top: 9px; }.bmi-scale-inner { min-width: 500px; }.bmi-track, .bmi-range-labels { display: grid; grid-template-columns: 6.5fr 5fr 5fr 5fr 5fr; }.bmi-track { position: relative; height: 9px; overflow: visible; border-radius: 99px; }.bmi-segment:first-child { border-radius: 99px 0 0 99px; }.bmi-segment:last-of-type { border-radius: 0 99px 99px 0; }.bmi-segment.normal { background: #70bd8e; }.bmi-segment.gap { background: #dce2de; }.bmi-segment.grade-1 { background: #e5ca55; }.bmi-segment.grade-2 { background: #e89949; }.bmi-segment.grade-3 { background: #d85d57; }.bmi-marker { position: absolute; top: 50%; width: 15px; height: 15px; border: 3px solid white; border-radius: 50%; background: var(--ink); box-shadow: 0 1px 5px rgba(0,0,0,.28); transform: translate(-50%,-50%); }.bmi-range-labels { margin-top: 7px; }.bmi-range-labels span { padding-right: 5px; color: var(--muted); font-size: 9px; line-height: 1.35; }.bmi-range-labels b { display: block; color: var(--ink); font-size: 9px; }.bmi-range-labels .gap { color: #97a29c; }
.entry-mode-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-bottom: 18px; border-radius: 14px; background: #edf1ed; }.entry-mode-switch button { height: 38px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font-weight: 750; cursor: pointer; }.entry-mode-switch button.active { color: white; background: var(--green); box-shadow: 0 5px 12px rgba(32,93,71,.18); }.field-help { margin: 7px 2px 0; color: var(--muted); font-size: 11px; }
.visually-hidden { position: absolute!important; width: 1px!important; height: 1px!important; padding: 0!important; margin: -1px!important; overflow: hidden!important; clip: rect(0,0,0,0)!important; white-space: nowrap!important; border: 0!important; }
@media (max-width: 640px) {
  .app-shell { padding-inline: 14px; }.topbar { height: 66px; }.hero-card { padding: 21px; gap: 17px; flex-wrap: wrap; }.calorie-ring { width: 114px; height: 114px; }.calorie-ring::after { width: 88px; height: 88px; }.ring-center strong { font-size: 23px; }.hero-copy p { display: none; }.hero-exercise { min-width: 100%; padding: 12px 0 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.18); }.hero-exercise div { display: flex; align-items: baseline; gap: 5px; }.hero-exercise strong { font-size: 15px; }.macro-grid { gap: 7px; }.macro-card { padding: 12px 9px; }.macro-card strong { font-size: 11px; }.food-library { grid-template-columns: 1fr; }.form-grid { grid-template-columns: repeat(2,1fr); }.weight-chart { height: 210px; }.weight-summary-card { padding: 18px 14px; }.weight-summary-card div + div { padding-left: 12px; }.weight-summary-card strong { font-size: 17px; }.bottom-nav { bottom: max(9px, env(safe-area-inset-bottom)); }.bottom-nav button { gap: 4px; }.bottom-nav span { font-size: 10px; }.library-list-mode .food-item > div:first-child { display: block; }.library-list-mode .food-item p { white-space: normal; }.library-list-mode .food-item .nutrition { margin-top: 5px; }.library-list-mode .recipe-components { margin-top: 4px; }
}
@media (max-width: 640px) { .water-card { grid-template-columns: 1fr auto; gap: 12px; margin-top: -17px; }.water-progress { grid-column: 1/-1; grid-row: 2; }.water-copy p { display: none; } }
@media (max-width: 640px) { .bottom-nav span { display: none; }.bottom-nav svg { width: 20px; height: 20px; }.calendar-page-heading, .stats-heading { display: block; }.stats-actions { align-items: stretch; flex-direction: column; margin-top: 14px; }.calendar-navigation { margin-top: 14px; justify-content: space-between; }.stats-actions .calendar-navigation { margin-top: 0; }.calendar-card { padding: 6px; border-radius: 16px; }.calendar-weekdays span { padding: 7px 2px; font-size: 9px; }.calendar-day { min-height: 75px; padding: 5px 3px; }.day-number { margin-bottom: 4px; font-size: 11px; }.day-mini span { font-size: 7px; }.calendar-popover { position: fixed; left: 14px!important; right: 14px!important; bottom: 88px; width: auto; transform: translate(0,8px)!important; }.calendar-day:hover .calendar-popover, .calendar-day:focus .calendar-popover { transform: translate(0,0)!important; } }
@media (max-width: 390px) { .hero-card { flex-direction: column; text-align: center; }.macro-grid { grid-template-columns: 1fr; }.macro-card { display: grid; grid-template-columns: 1fr auto; }.macro-card div { grid-column: 1/-1; }.form-grid, .form-grid.two { grid-template-columns: 1fr 1fr; } }