/* Light colour roles and glass variants; the dark theme is defined after the component styles. */
:root {
  --bg: #F4F7FB;
  --card: #FFFFFF;
  --text: #14213D;
  --text-2: #5B6B84;
  --divider: #E1E8F2;
  --action: #14213D;
  --action-ink: #14213D;
  --on-action: #FFFFFF;
  --action-soft: #EAF0F8;
  --progress: #FF8A3D;
  --track: #E6ECF5;
  --breakfast: #FFF4C2;
  --lunch: #D7EBFF;
  --dinner: #FFDDE6;
  --snack: #E9EEF6;
  --breakfast-ink: #5B6B84;
  --lunch-ink: #5B6B84;
  --dinner-ink: #5B6B84;
  --snack-ink: #5B6B84;
  --protein: #E5484D;
  --carbs: #2F9E8F;
  --fat: #7C5CFC;
  --fiber: #5B6B84;
  --unrec-bg: #FFE8D1;
  --unrec-text: #8F3B00;
  --ok-bg: #D9F3EA;
  --ok-text: #11654F;
  --muted-bg: #E9EEF6;
  --muted-text: #5B6B84;
  --assumed-bg: #FFF4C2;
  --assumed-text: #6B5200;
  --danger: #B42318;
  --shadow: 20, 33, 61;
  --radius-card: 24px;
  --radius-md: 16px;
  /* One family everywhere; weights 400 (body), 600 (labels, buttons), 700 (headings, numbers). */
  --font-head: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: var(--font-head);
  --t-display: 700 24px/30px var(--font-head);
  --t-title: 700 18px/24px var(--font-head);
  --t-section: 700 17px/22px var(--font-head);
  --t-strong: 600 15px/20px var(--font-head);
  --t-label: 600 13px/18px var(--font-head);
  --t-caption: 600 12px/16px var(--font-head);
  --t-eyebrow: 700 11px/14px var(--font-head);
  /* Glass layer: translucent surfaces over a soft pearl backdrop ("Mutiara"). See the "Glass UI" block at the end. */
  --page: #F3F4F7;
  --glass: rgba(255, 255, 255, .6);
  --glass-strong: rgba(255, 255, 255, .82);
  --glass-edge: rgba(255, 255, 255, .78);
  --glass-blur: blur(22px) saturate(170%);
  --glass-shadow: 0 10px 30px rgba(20, 33, 61, .07);
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
html { scroll-padding-top: calc(80px + env(safe-area-inset-top)); scroll-padding-bottom: calc(220px + env(safe-area-inset-bottom)); }
body { font: 400 15px/1.45 var(--font-body); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
:focus-visible { outline: 3px solid var(--progress); outline-offset: 2px; }
.icon { flex: none; display: block; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.app { max-width: 430px; margin: 0 auto; min-height: 100vh; position: relative; padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
.loading { padding: 120px 24px; text-align: center; color: var(--text-2); }

/* Header */
.header { position: sticky; top: 0; z-index: 20; background: rgba(244, 247, 251, .9); backdrop-filter: blur(16px); padding: calc(env(safe-area-inset-top) + 8px) 16px 8px; display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; }
.header h1 { margin: 0; text-align: center; font: 600 17px/22px var(--font-head); }
.icon-btn { width: 44px; height: 44px; border: 0; border-radius: 999px; background: transparent; display: grid; place-items: center; }
.icon-btn:active { background: var(--track); }
.avatar { width: 36px; height: 36px; margin: 4px; border-radius: 999px; background: var(--action); color: var(--on-action); display: grid; place-items: center; }

.main { padding: 4px 16px 24px; display: flex; flex-direction: column; gap: 16px; }

/* Segmented control */
.segmented { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; padding: 4px; background: var(--track); border-radius: 999px; }
.segmented button { min-width: 0; min-height: 44px; padding: 8px 6px; border: 0; border-radius: 999px; background: transparent; font: 600 13px/16px var(--font-head); color: var(--text-2); display: inline-flex; gap: 6px; align-items: center; justify-content: center; }
.add-modes button { white-space: nowrap; }
.segmented button[aria-pressed="true"], .segmented button[aria-selected="true"] { background: var(--card); color: var(--text); box-shadow: 0 1px 6px rgba(var(--shadow), .08); }

/* Typography */
.eyebrow { font: 600 13px/16px var(--font-head); color: var(--text-2); text-transform: uppercase; letter-spacing: .04em; }
.title-lg { font: 700 28px/34px var(--font-head); margin: 2px 0 0; }
.metric { font: 700 34px/40px var(--font-head); letter-spacing: -.01em; }
.metric small { font: 600 15px/20px var(--font-head); color: var(--text-2); margin-left: 4px; }
.muted { color: var(--text-2); }
.small { font-size: 13px; line-height: 18px; }
.section-title { display: flex; justify-content: space-between; align-items: baseline; font: 600 17px/22px var(--font-head); margin: 4px 4px -4px; }
.section-title span { font: 600 13px/16px var(--font-head); color: var(--text-2); }

/* Cards */
.card { background: var(--card); border: 0; border-radius: var(--radius-card); padding: 20px; box-shadow: 0 4px 20px rgba(var(--shadow), .05); }
.card.tight { padding: 16px; border-radius: 22px; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.between > :first-child { min-width: 0; }
.divider { height: 1px; background: var(--divider); border: 0; margin: 4px 0; }

/* Badges: icon + text, never colour alone */
.badge { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 3px 10px; border-radius: 999px; font: 600 12px/16px var(--font-head); overflow-wrap: anywhere; }
.badge .icon { width: 14px; height: 14px; }
.badge.ok { background: var(--ok-bg); color: var(--ok-text); }
.badge.unrec { background: var(--unrec-bg); color: var(--unrec-text); }
.badge.assumed { background: var(--assumed-bg); color: var(--assumed-text); }
.badge.muted { background: var(--muted-bg); color: var(--muted-text); }
.badge.source { background: var(--bg); color: var(--text-2); }
.badge.logged, .badge.siang { background: var(--lunch); color: var(--text); }
.badge.sarapan { background: var(--breakfast); color: var(--text); }
.badge.malam { background: var(--dinner); color: var(--text); }
.badge.camilan { background: var(--snack); color: var(--text); }

/* Date strip */
.calendar { display: flex; flex-direction: column; gap: 12px; }
.calendar-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.calendar-head h2 { min-width: 0; margin: 0; font: 700 22px/30px var(--font-head); letter-spacing: -.02em; }
.calendar-trigger { background: var(--card); box-shadow: inset 0 0 0 1px var(--divider); border-radius: 15px; flex: none; }
.strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.day-cell { min-width: 0; min-height: 78px; border: 0; border-radius: 999px; background: transparent; padding: 10px 0 8px; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.day-cell .wd { font: 600 12px/16px var(--font-head); color: var(--text-2); }
.day-cell .dn { position: relative; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font: 700 16px/22px var(--font-head); }
/* Reflect the date ring so it fills counterclockwise from the top. */
.day-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: scaleX(-1) rotate(-90deg); fill: none; stroke-width: 3; }
.day-ring-track { stroke: var(--track); }
.day-ring-arc { stroke: var(--progress); stroke-linecap: round; }
.day-cell.future { color: var(--text-2); }
.day-cell.today .dn { box-shadow: inset 0 0 0 1.5px var(--divider); }
.day-cell[aria-pressed="true"] { background: var(--action); color: var(--on-action); box-shadow: 0 5px 12px rgba(var(--shadow), .14); }
.day-cell[aria-pressed="true"] .dn { box-shadow: none; }
.day-cell[aria-pressed="true"] .wd, .day-cell[aria-pressed="true"] .day-mark { color: var(--on-action); }
.day-cell[aria-pressed="true"] .day-ring-track { stroke: rgba(255, 255, 255, .25); }
.day-mark { height: 8px; display: grid; place-items: center; color: var(--text-2); }
.day-mark i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.day-status { display: flex; justify-content: center; }
.calendar-month { margin: 0; font: 700 17px/24px var(--font-head); }
body:has(.calendar-sheet) { overflow: hidden; }
.month-weekdays, .month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; text-align: center; }
.month-weekdays { color: var(--text-2); font: 600 12px/20px var(--font-head); }
.month-day { min-width: 0; min-height: 44px; padding: 6px 0; border: 0; border-radius: 14px; background: transparent; font-weight: 600; }
.month-day.outside { color: var(--text-2); font-weight: 400; }
.month-day[aria-current="date"] { box-shadow: inset 0 0 0 1.5px var(--divider); }
.month-day[aria-pressed="true"] { background: var(--action); color: var(--on-action); box-shadow: none; }
.calendar-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 10px; border-top: 1px solid var(--divider); }

/* Summary + ring */
.target-summary { text-align: center; }
.target-summary h3 { margin: 0; }
.target-orbit { position: relative; width: 100%; max-width: 300px; aspect-ratio: 260 / 184; margin: 12px auto 0; }
.target-orbit svg { display: block; width: 100%; height: 100%; }
.target-track, .target-arc { fill: none; stroke-width: 14; stroke-linecap: round; }
.target-track { stroke: var(--track); }
.target-arc { stroke: url(#energy-gradient); }
.target-knob { fill: #FFFFFF; stroke: var(--progress); stroke-width: 3; filter: drop-shadow(0 2px 4px rgba(20, 33, 61, .18)); }
.target-value { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; padding-top: 8px; }
.target-gap { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; font: 600 12px/16px var(--font-head); color: var(--text-2); }
.target-value strong { max-width: 140px; overflow-wrap: anywhere; font: 700 40px/46px var(--font-head); letter-spacing: -.04em; }
.target-value > span { color: var(--text-2); font: 600 11px/14px var(--font-head); text-transform: uppercase; letter-spacing: .06em; }
.target-caption { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-bottom: 18px; }
.target-caption > strong { font: 700 15px/20px var(--font-head); }
.target-caption > span { font-size: 12px; color: var(--text-2); }
.target-caption .btn { min-height: 32px; text-decoration: underline; }
.nutrient-orbits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.nutrient-orbit { --nutrient-color: var(--protein); display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 0; }
.nutrient-orbit.carbs { --nutrient-color: var(--carbs); }
.nutrient-orbit.fat { --nutrient-color: var(--fat); }
.nutrient-orbit-value { width: 64px; min-height: 64px; padding: 6px 2px; border: 2px solid var(--nutrient-color); background: var(--card); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.nutrient-orbit-value strong { max-width: 100%; overflow-wrap: anywhere; font: 700 17px/20px var(--font-head); }
.nutrient-orbit-value > span { font-size: 10px; line-height: 12px; color: var(--text-2); }
.nutrient-orbit-name { font: 700 11px/14px var(--font-head); text-transform: uppercase; letter-spacing: .06em; }
.summary-fiber { display: flex; justify-content: space-between; margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--divider); font-size: 12px; }
.summary-fiber > span { display: flex; gap: 6px; align-items: center; color: var(--text-2); }
.unknown-nutrients { margin: 10px 0 0; text-align: left; }
.macros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.macro { min-width: 0; overflow-wrap: anywhere; background: var(--bg); border-radius: 14px; padding: 8px 10px; }
.macro .k { display: flex; align-items: center; gap: 5px; font: 600 11px/14px var(--font-head); color: var(--text-2); }
.macro .v { font: 700 15px/20px var(--font-head); margin-top: 2px; }
.dot { width: 8px; height: 8px; border-radius: 99px; flex: none; }

/* Notices */
.notice { display: flex; gap: 10px; align-items: flex-start; border-radius: var(--radius-md); padding: 12px 14px; font-size: 13px; line-height: 18px; }
.notice.unrec { background: var(--unrec-bg); color: var(--unrec-text); }
.notice.assumed { background: var(--assumed-bg); color: var(--assumed-text); }
.notice.ok { background: var(--ok-bg); color: var(--ok-text); }
.notice.info { background: var(--muted-bg); color: var(--text-2); }
.notice .icon { margin-top: 1px; }
.notice > div { min-width: 0; overflow-wrap: anywhere; }
.notice strong { font-weight: 600; }

/* Meal cards */
.meal { border-radius: var(--radius-card); padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.meal.sarapan { background: var(--breakfast); }
.meal.siang { background: var(--lunch); }
.meal.malam { background: var(--dinner); }
.meal.camilan, .meal.lainnya { background: var(--snack); }
.meal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.meal-head h3 { margin: 0; font: 600 17px/22px var(--font-head); }
.meal-icon { width: 40px; height: 40px; border-radius: 999px; background: rgba(255, 255, 255, .75); display: grid; place-items: center; }
.pill-chip { background: var(--card); border-radius: 999px; padding: 4px 12px; font: 600 13px/18px var(--font-head); }
.entry { background: var(--card); border-radius: var(--radius-md); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.food-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: start; }
.food-row > div { min-width: 0; }
.food-row + .food-row { border-top: 1px solid var(--divider); padding-top: 10px; }
.tile { width: 44px; height: 44px; border-radius: 14px; background: var(--action-soft); color: var(--text-2); display: grid; place-items: center; }
.tile.unrec { background: var(--unrec-bg); color: var(--unrec-text); }
.food-name { font: 600 15px/20px var(--font-head); overflow-wrap: anywhere; }
.food-kcal { font: 700 15px/20px var(--font-head); white-space: nowrap; text-align: right; }
.macro-line { display: flex; flex-wrap: wrap; gap: 4px 10px; font: 600 12px/16px var(--font-head); margin-top: 3px; }
.badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.entry-actions { display: flex; gap: 6px; justify-content: flex-end; }
.empty-slot { background: rgba(255, 255, 255, .8); border-radius: var(--radius-md); padding: 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* Buttons */
.btn { min-width: 0; max-width: 100%; min-height: 44px; flex-shrink: 0; border: 0; border-radius: 999px; padding: 12px 18px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 600 15px/20px var(--font-head); overflow-wrap: anywhere; }
.btn.primary { background: var(--action); color: var(--on-action); min-height: 56px; width: 100%; box-shadow: 0 8px 20px rgba(var(--shadow), .18); }
.btn.primary:disabled { background: var(--track); color: var(--muted-text); box-shadow: none; }
.btn.secondary { background: var(--card); color: var(--text); box-shadow: 0 1px 6px rgba(var(--shadow), .08); }
.btn.outline { background: transparent; box-shadow: inset 0 0 0 1.5px var(--divider); width: 100%; }
.btn.text { background: transparent; padding: 0 10px; color: var(--text-2); font-size: 13px; min-height: 40px; }
.btn.danger { color: var(--danger); }
.btn.small { min-height: 40px; font-size: 13px; padding: 0 14px; }
.btn.wide { width: 100%; }
.bottom-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--bg) 70%, rgba(244, 247, 251, 0)); }
.bottom-bar > div { max-width: 398px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; }
.reason { text-align: center; font-size: 13px; line-height: 18px; color: var(--text-2); }

/* Forms */
.input-step { display: flex; align-items: center; gap: 8px; margin: 4px 0 0; font: 600 17px/24px var(--font-head); }
.input-step > span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--track); color: var(--text-2); font-size: 12px; }
.selected-food { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 16px; background: var(--track); border-radius: 18px; }
.basket-title { margin: 0; font: 600 15px/20px var(--font-head); }
.basket-row { display: grid; grid-template-columns: minmax(0, 1fr) 44px 44px; align-items: center; gap: 2px; padding: 10px 0; }
.basket-row + .basket-row { border-top: 1px solid var(--divider); }
.basket-row > div { min-width: 0; overflow-wrap: anywhere; }
.add-main .input-step > span { background: var(--action); color: var(--on-action); }
.add-main .add-modes button[aria-selected="true"] { background: var(--action); color: var(--on-action); }
.add-main .selected-food { display: block; background: var(--action-soft); border: 1px solid #D8E2F0; }
.selected-food-main { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.selected-food-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 14px; background: var(--card); color: var(--action); }
.selected-food-kicker { display: block; margin-bottom: 3px; color: var(--text-2); font-size: 11px; line-height: 14px; }
.selected-food-main .btn { padding: 0 4px; gap: 4px; font-size: 12px; color: var(--text); }
.portion-entry { border: 1.5px solid var(--divider); }
.needs-amount #search-qty { border-color: #9BAEC8; }
.needs-amount #search-qty[aria-invalid="true"] { border-color: var(--danger); }
.amount-help { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 14px; background: var(--bg); color: var(--text-2); font-size: 13px; line-height: 18px; }
.amount-help strong { color: var(--text); }
.amount-help strong, .amount-help span { display: block; }
.amount-help span { margin-top: 3px; }
.btn.quantity-prompt { width: 100%; min-height: 56px; background: var(--action); color: var(--on-action); box-shadow: 0 8px 20px rgba(var(--shadow), .14); }
.app:has(.add-main) .bottom-bar .btn.outline { background: var(--card); color: var(--text); box-shadow: inset 0 0 0 1.5px #B4C0D2; }
.food-basket [role="status"] { padding: 4px 8px; background: var(--bg); border-radius: 999px; white-space: nowrap; }
.food-basket .basket-row + .basket-row { border-color: rgba(var(--shadow), .1); }
.portion-estimate { padding-top: 12px; border-top: 1px solid var(--divider); }
.portion-estimate > div:first-child { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.portion-estimate strong { font: 700 20px/28px var(--font-head); }
.portion-estimate strong > span { font-size: 12px; font-weight: 600; }
.portion-estimate .macro-line { margin-top: 6px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > span { font: 600 13px/16px var(--font-head); color: var(--text-2); }
.input, .select, .textarea { width: 100%; min-width: 0; max-width: 100%; min-height: 48px; border: 1.5px solid var(--divider); border-radius: 14px; background: var(--card); padding: 10px 14px; font-size: 16px; }
.select { -webkit-appearance: none; appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235B6B84' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; }
/* Safari's native date field must shrink with its grid cell. Keep the native picker. */
.input[type="date"] { display: block; -webkit-appearance: none; appearance: none; text-align: left; }
.input[type="date"]::-webkit-date-and-time-value { min-height: 24px; text-align: left; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--action-ink); outline: none; }
.textarea { min-height: 150px; resize: vertical; font-size: 17px; line-height: 24px; }
.amount-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.portion-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.check { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: var(--radius-md); background: var(--card); box-shadow: 0 1px 6px rgba(var(--shadow), .06); }
.check input { width: 22px; height: 22px; margin: 0; accent-color: var(--action-ink); flex: none; }
.error { color: var(--danger); font-size: 13px; line-height: 18px; }
.hint { font-size: 13px; line-height: 18px; color: var(--text-2); }

/* Review item */
.item { background: var(--card); border-radius: 22px; padding: 16px; display: flex; flex-direction: column; gap: 10px; position: relative; overflow: hidden; box-shadow: 0 2px 10px rgba(var(--shadow), .04); }
.item-head { align-items: flex-start; flex-wrap: wrap; }
.item-head > :first-child { flex: 1 1 150px; }
.review-toolbar { flex-wrap: wrap; }
.item.unresolved::before { content: ''; position: absolute; inset: 0 0 auto; height: 4px; background: var(--progress); }
.from { font-size: 13px; color: var(--text-2); overflow-wrap: anywhere; }
.source-detail { background: var(--bg); border-radius: 14px; padding: 10px 12px; font-size: 12.5px; line-height: 18px; color: var(--text-2); display: grid; gap: 2px; }
.source-detail b { color: var(--text); font-weight: 600; }

/* Sheet and dialog */
.backdrop { position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, .35); display: flex; align-items: flex-end; justify-content: center; }
.sheet { width: 100%; max-width: 430px; max-height: 92vh; overflow: auto; background: var(--card); border-radius: 28px 28px 0 0; padding: 8px 16px calc(20px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 14px; }
.sheet { max-height: 92dvh; overscroll-behavior: contain; }
/* Scroll tall forms instead of shrinking their fields and buttons. */
.sheet > * { flex-shrink: 0; }
.grabber { width: 36px; height: 5px; border-radius: 99px; background: var(--track); margin: 4px auto 0; }
.sheet-head { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; }
.sheet-head h2 { margin: 0; text-align: center; font: 600 17px/22px var(--font-head); }
.option { width: 100%; text-align: left; border: 0; border-radius: 18px; padding: 12px 14px; background: var(--card); box-shadow: inset 0 0 0 1.5px var(--divider); display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; }
.option > span { min-width: 0; overflow-wrap: anywhere; }
.option[aria-checked="true"] { background: var(--action-soft); box-shadow: inset 0 0 0 2px var(--action-ink); }
.radio { width: 22px; height: 22px; border-radius: 99px; background: var(--track); display: grid; place-items: center; margin-top: 1px; }
.option[aria-checked="true"] .radio { background: var(--action); color: var(--on-action); }
.dialog-wrap { align-items: center; padding: 16px; }
.dialog { width: 100%; max-width: 380px; max-height: calc(100dvh - 32px); overflow: auto; overscroll-behavior: contain; background: var(--card); border-radius: 24px; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.dialog > * { flex-shrink: 0; }
.dialog h2 { margin: 0; font: 700 19px/24px var(--font-head); }
.dialog ul { margin: 0; padding-left: 20px; }
.dialog-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }

/* Week */
.week-row { width: 100%; border: 0; background: var(--card); border-radius: 18px; padding: 12px 14px; display: grid; grid-template-columns: 52px 1fr auto; gap: 10px; align-items: center; text-align: left; }
.week-row.future { opacity: .6; }
.week-day { font: 600 13px/16px var(--font-head); }
.week-day span { display: block; color: var(--text-2); font-weight: 600; font-size: 11px; }
.bar { height: 8px; border-radius: 99px; background: var(--track); overflow: hidden; margin-top: 6px; }
.bar > i { display: block; height: 100%; background: var(--progress); border-radius: 99px; }
.stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.stat { min-width: 0; overflow-wrap: anywhere; background: var(--bg); border-radius: 16px; padding: 12px; }
.stat .k { font: 600 12px/16px var(--font-head); color: var(--text-2); }
.stat .v { font: 700 17px/22px var(--font-head); margin-top: 4px; }
.stat .n { font-size: 12px; line-height: 16px; color: var(--text-2); margin-top: 2px; }

/* Weight chart */
.chart { width: 100%; height: auto; display: block; }
.chart text { font: 600 10px var(--font-head); fill: var(--text-2); }
.list-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; }
.list-row > :first-child { min-width: 0; overflow-wrap: anywhere; }
.list-row > :last-child { flex-shrink: 0; }
.list-row > b { white-space: nowrap; }
.list-row .badge { max-width: 100%; white-space: normal; }
.list-row + .list-row { border-top: 1px solid var(--divider); }

@media (max-width: 400px) {
  .date-fields { grid-template-columns: minmax(0, 1fr); }
  .macros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 360px) {
  .add-modes .icon { display: none; }
}

/* Centered with left/right instead of left:50%, which capped the toast at half the screen and wrapped short messages. */
.toast { pointer-events: none; position: fixed; left: 16px; right: 16px; bottom: calc(92px + env(safe-area-inset-bottom)); z-index: 50; width: fit-content; max-width: 398px; margin: 0 auto; background: var(--action); color: var(--on-action); padding: 12px 18px; border-radius: 16px; font: 600 14px/18px var(--font-head); text-align: center; box-shadow: 0 8px 24px rgba(var(--shadow), .25); animation: toast-in .22s ease-out; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

/* Quick amounts */
.quick-amounts { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { min-height: 36px; padding: 6px 14px; border: 0; border-radius: 999px; background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--divider); font: 600 13px/18px var(--font-head); color: var(--text); }
.chip[aria-pressed="true"] { background: var(--action); color: var(--on-action); box-shadow: none; }

/* Add: when the food was eaten */
.add-context { gap: 14px; }
.meal-picker { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.meal-picker button { min-width: 0; min-height: 60px; padding: 8px 2px; border: 0; border-radius: 16px; background: var(--bg); color: var(--text-2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font: 600 12px/16px var(--font-head); }
.meal-picker button[aria-checked="true"] { background: var(--card); color: var(--text); box-shadow: inset 0 0 0 1.5px var(--action); }

/* Entry actions sheet */
.entry-actions { align-items: center; }
.entry-more { width: 40px; height: 40px; color: var(--text-2); }
.action-list { display: flex; flex-direction: column; gap: 8px; }
.action-row { width: 100%; min-height: 60px; border: 0; border-radius: 18px; padding: 10px 14px; background: var(--bg); display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: center; text-align: left; }
.action-icon { width: 36px; height: 36px; border-radius: 12px; background: var(--card); display: grid; place-items: center; }
.action-row.danger .food-name, .action-row.danger .action-icon { color: var(--danger); }

/* Touch feedback */
.btn:not(:disabled):active, .chip:active, .meal-picker button:active, .action-row:active, .day-cell:active { transform: scale(.97); }
.btn, .chip, .meal-picker button, .action-row, .day-cell { transition: transform .12s ease, background-color .15s ease; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Meal colours restored; keep the newer layout and interaction controls. */
.meal .meal-icon { border-radius: 14px; }
.meal.sarapan .meal-icon, .meal.siang .meal-icon, .meal.malam .meal-icon, .meal.camilan .meal-icon { background: var(--card); }
.meal.sarapan .meal-icon, .meal-picker button[data-meal="sarapan"] .icon { color: var(--breakfast-ink); }
.meal.siang .meal-icon, .meal-picker button[data-meal="siang"] .icon { color: var(--lunch-ink); }
.meal.malam .meal-icon, .meal-picker button[data-meal="malam"] .icon { color: var(--dinner-ink); }
.meal.camilan .meal-icon, .meal-picker button[data-meal="camilan"] .icon { color: var(--snack-ink); }
.meal .tile { background: var(--bg); }

.toast { background: var(--text); color: #FFFFFF; }

/* ---- Glass UI (24 Oct 2026) ------------------------------------------------
   Frosted, translucent surfaces over a soft gradient backdrop, after the user's glass reference.
   Colour roles above are unchanged; this block only changes surfaces, edges and heading type. */
:root {
  --card: var(--glass);
  /* Inner fills (stats, macro boxes, chips, meal picker, source details) sit on white glass, so they use a faint
     tint instead of more white; white-on-white made their edges vanish. */
  --bg: rgba(20, 33, 61, .045);
  --track: rgba(20, 33, 61, .08);
  --divider: rgba(20, 33, 61, .09);
  --action-soft: rgba(255, 255, 255, .66);
}
/* Body stays transparent so the fixed backdrop below (z-index -1) is not painted over. */
html { background: var(--page); }
body { background: transparent; }
/* Fixed so the colour stays put while glass slides over it. */
body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(42% 26% at 8% 6%, #D3DDF2 0, rgba(211, 221, 242, 0) 100%),
    radial-gradient(38% 24% at 96% 24%, #E3D8F2 0, rgba(227, 216, 242, 0) 100%),
    radial-gradient(46% 28% at 12% 58%, #F1E1D6 0, rgba(241, 225, 214, 0) 100%),
    radial-gradient(40% 26% at 92% 78%, #D5E9E5 0, rgba(213, 233, 229, 0) 100%),
    radial-gradient(50% 30% at 50% 102%, #E1DDF1 0, rgba(225, 221, 241, 0) 100%),
    var(--page); }

/* Outer surfaces carry the blur; nested rows stay translucent without a second blur. */
.card, .item, .week-row, .meal, .check, .segmented, .calendar-trigger, .btn.secondary,
.header, .sheet, .dialog, .toast {
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
.card, .item, .week-row, .meal, .check { box-shadow: inset 0 0 0 1px var(--glass-edge), var(--glass-shadow); }
.segmented { background: rgba(255, 255, 255, .42); box-shadow: inset 0 0 0 1px var(--glass-edge); }
.segmented button[aria-pressed="true"], .segmented button[aria-selected="true"] { background: rgba(255, 255, 255, .9); }
.calendar-trigger, .btn.secondary { box-shadow: inset 0 0 0 1px var(--glass-edge), 0 4px 14px rgba(20, 33, 61, .08); }
.header { background: rgba(243, 244, 247, .82); }
.bottom-bar { background: linear-gradient(to top, rgba(243, 244, 247, .9) 55%, rgba(243, 244, 247, 0)); }
.btn.primary:not(:disabled), .btn.quantity-prompt { box-shadow: 0 10px 26px rgba(20, 33, 61, .28), inset 0 1px 0 rgba(255, 255, 255, .18); }

/* Meal groups: tinted glass in each meal's colour. */
.meal.sarapan { background: color-mix(in srgb, var(--breakfast) 72%, transparent); }
.meal.siang { background: color-mix(in srgb, var(--lunch) 72%, transparent); }
.meal.malam { background: color-mix(in srgb, var(--dinner) 72%, transparent); }
.meal.camilan, .meal.lainnya { background: color-mix(in srgb, var(--snack) 72%, transparent); }
.entry, .empty-slot { background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8); }

/* Fields, options and sheets: more opaque for legibility while typing or choosing. */
/* Fields keep a visible edge: a white border on white glass made empty fields disappear. */
.input, .select, .textarea { background: rgba(255, 255, 255, .74); border-color: rgba(20, 33, 61, .14); box-shadow: 0 2px 10px rgba(20, 33, 61, .06); }
.option, .action-row { background: rgba(255, 255, 255, .6); }
.option, .btn.secondary { border: 1px solid rgba(20, 33, 61, .1); }
.option { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .9); }
.sheet, .dialog { background: var(--glass-strong); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 -10px 40px rgba(20, 33, 61, .14); }
.backdrop { background: rgba(20, 33, 61, .22); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.toast { background: rgba(20, 33, 61, .82); color: #FFFFFF; }
.add-main .selected-food { background: rgba(255, 255, 255, .55); border-color: var(--glass-edge); }
.portion-entry { border-color: var(--glass-edge); }
.app:has(.add-main) .bottom-bar .btn.outline { background: var(--glass-strong); box-shadow: inset 0 0 0 1.5px var(--glass-edge); }
.btn.outline { box-shadow: inset 0 0 0 1.5px rgba(20, 33, 61, .14); }
.notice.info { background: rgba(255, 255, 255, .55); }

/* Type scale: every heading, label and caption uses one of the --t-* roles defined in :root. */
.calendar-head h2, .title-lg, .week-range { font: var(--t-display); letter-spacing: -.02em; }
.header h1, .sheet-head h2, .dialog h2 { font: var(--t-title); letter-spacing: -.01em; }
.section-title, .meal-head h3, .input-step, .calendar-month { font: var(--t-section); letter-spacing: -.01em; }
.food-name, .basket-title, .btn, .target-caption > strong { font-family: var(--font-head); }
.food-name, .basket-title, .target-caption > strong { font: var(--t-strong); }
.segmented button, .field > span, .chip, .pill-chip, .week-day, .section-title span, .toast { font: var(--t-label); }
.badge, .macro-line, .day-cell .wd, .target-gap, .meal-picker button, .stat .k, .month-weekdays, .chart text { font: var(--t-caption); }
.eyebrow, .target-value > span, .nutrient-orbit-name, .macro .k { font: var(--t-eyebrow); text-transform: uppercase; letter-spacing: .07em; }
.btn.text, .btn.small { font-size: 13px; }
.portion-estimate strong > span { font-weight: 600; }

/* Liquid-glass finish, kept moderate: thinner glass, a light sheen from the top-left, a bright top edge
   and a soft inner rim, so cards read as glass over the pearl backdrop without heavy refraction effects. */
:root {
  --glass: rgba(255, 255, 255, .42);
  --glass-blur: blur(26px) saturate(185%);
  --glass-sheen: linear-gradient(150deg, rgba(255, 255, 255, .62) 0%, rgba(255, 255, 255, .22) 45%, rgba(255, 255, 255, .34) 100%);
  --glass-rim: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 0 0 1px rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(255, 255, 255, .25);
}
.card, .item, .week-row, .check { background: var(--glass-sheen); box-shadow: var(--glass-rim), 0 10px 30px rgba(20, 33, 61, .08), 0 1px 2px rgba(20, 33, 61, .04); }
.meal { box-shadow: var(--glass-rim), 0 10px 30px rgba(20, 33, 61, .08); }
.meal.sarapan { background: linear-gradient(150deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 55%), color-mix(in srgb, var(--breakfast) 60%, transparent); }
.meal.siang { background: linear-gradient(150deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 55%), color-mix(in srgb, var(--lunch) 60%, transparent); }
.meal.malam { background: linear-gradient(150deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 55%), color-mix(in srgb, var(--dinner) 60%, transparent); }
.meal.camilan, .meal.lainnya { background: linear-gradient(150deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 55%), color-mix(in srgb, var(--snack) 60%, transparent); }
.entry, .empty-slot { background: rgba(255, 255, 255, .58); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 0 0 1px rgba(255, 255, 255, .45); }
.segmented { background: rgba(255, 255, 255, .3); box-shadow: var(--glass-rim); }
.segmented button[aria-pressed="true"], .segmented button[aria-selected="true"] { background: rgba(255, 255, 255, .78); box-shadow: inset 0 1px 0 #FFFFFF, 0 2px 10px rgba(20, 33, 61, .08); }
.calendar-trigger, .btn.secondary { background: var(--glass-sheen); box-shadow: var(--glass-rim), 0 4px 14px rgba(20, 33, 61, .07); }
/* Mostly opaque: a thinner header let scrolled cards show through as coloured smudges behind the title. */
.header { background: rgba(243, 244, 247, .8); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .6); }
.sheet, .dialog { background: linear-gradient(160deg, rgba(255, 255, 255, .86), rgba(255, 255, 255, .7)); box-shadow: var(--glass-rim), 0 -10px 40px rgba(20, 33, 61, .14); }
.input, .select, .textarea { background: rgba(255, 255, 255, .62); box-shadow: inset 0 1px 0 #FFFFFF, 0 2px 10px rgba(20, 33, 61, .05); }
/* The navy action and selected date keep a faint glass highlight so they belong to the same material. */
.btn.primary:not(:disabled), .btn.quantity-prompt, .day-cell[aria-pressed="true"] { background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 55%), var(--action); }
.btn.primary:not(:disabled), .btn.quantity-prompt { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 10px 26px rgba(20, 33, 61, .26); }

/* ---- Liquid glass variant (preview: ?glass=liquid) ---------------------------------------------
   Closer to Apple's Liquid Glass: clearer material with little frosting, a bright specular rim that is
   strongest top-left, an inner glow at the edges, and floating capsule controls. Content stays readable:
   rows with text keep a light white wash, and sheets/fields stay mostly opaque. */
:root[data-glass="liquid"] {
  --glass: rgba(255, 255, 255, .2);
  --glass-blur: blur(12px) saturate(210%) brightness(1.04);
  --glass-sheen: radial-gradient(120% 80% at 0% 0%, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .12) 38%, rgba(255, 255, 255, .06) 62%, rgba(255, 255, 255, .22) 100%);
  --glass-rim: inset 1.5px 1.5px 0 rgba(255, 255, 255, .95), inset -1px -1px 0 rgba(255, 255, 255, .45), inset 0 0 0 1px rgba(255, 255, 255, .35), inset 0 0 22px rgba(255, 255, 255, .28);
}
[data-glass="liquid"] body::before {
  background:
    radial-gradient(42% 26% at 8% 6%, #C5D3F2 0, rgba(197, 211, 242, 0) 100%),
    radial-gradient(38% 24% at 96% 24%, #DCCDF2 0, rgba(220, 205, 242, 0) 100%),
    radial-gradient(46% 28% at 12% 58%, #F2D8C8 0, rgba(242, 216, 200, 0) 100%),
    radial-gradient(40% 26% at 92% 78%, #C8E6E0 0, rgba(200, 230, 224, 0) 100%),
    radial-gradient(50% 30% at 50% 102%, #D8D2F1 0, rgba(216, 210, 241, 0) 100%),
    var(--page);
}
[data-glass="liquid"] .card, [data-glass="liquid"] .item, [data-glass="liquid"] .week-row, [data-glass="liquid"] .check { box-shadow: var(--glass-rim), 0 12px 34px rgba(20, 33, 61, .10); }
[data-glass="liquid"] .meal { box-shadow: var(--glass-rim), 0 12px 34px rgba(20, 33, 61, .10); }
[data-glass="liquid"] .meal.sarapan { background: var(--glass-sheen), color-mix(in srgb, var(--breakfast) 60%, transparent); }
[data-glass="liquid"] .meal.siang { background: var(--glass-sheen), color-mix(in srgb, var(--lunch) 60%, transparent); }
[data-glass="liquid"] .meal.malam { background: var(--glass-sheen), color-mix(in srgb, var(--dinner) 60%, transparent); }
[data-glass="liquid"] .meal.camilan, [data-glass="liquid"] .meal.lainnya { background: var(--glass-sheen), color-mix(in srgb, var(--snack) 60%, transparent); }
[data-glass="liquid"] .entry, [data-glass="liquid"] .empty-slot { background: rgba(255, 255, 255, .5); box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .9), inset 0 0 0 1px rgba(255, 255, 255, .4); }
/* Floating capsules, as Liquid Glass tab bars and controls. */
[data-glass="liquid"] .segmented, [data-glass="liquid"] .calendar-trigger, [data-glass="liquid"] .btn.secondary {
  background: var(--glass-sheen); box-shadow: var(--glass-rim), 0 8px 24px rgba(20, 33, 61, .10);
}
[data-glass="liquid"] .segmented button[aria-pressed="true"], [data-glass="liquid"] .segmented button[aria-selected="true"] {
  background: radial-gradient(120% 90% at 30% 0%, rgba(255, 255, 255, .95), rgba(255, 255, 255, .6)); box-shadow: inset 1px 1px 0 #FFFFFF, inset 0 0 0 1px rgba(255, 255, 255, .6), 0 4px 14px rgba(20, 33, 61, .12);
}
[data-glass="liquid"] .header { background: rgba(243, 244, 247, .72); box-shadow: none; }
/* The main action is tinted glass: navy you can faintly see through, with the same specular rim. */
[data-glass="liquid"] .btn.primary:not(:disabled), [data-glass="liquid"] .btn.quantity-prompt, [data-glass="liquid"] .day-cell[aria-pressed="true"] {
  background: radial-gradient(120% 90% at 20% 0%, rgba(255, 255, 255, .26), rgba(255, 255, 255, 0) 55%), rgba(20, 33, 61, .84);
  -webkit-backdrop-filter: blur(12px) saturate(180%); backdrop-filter: blur(12px) saturate(180%);
  box-shadow: inset 1.5px 1.5px 0 rgba(255, 255, 255, .35), inset 0 0 0 1px rgba(255, 255, 255, .14), 0 12px 30px rgba(20, 33, 61, .28);
}
[data-glass="liquid"] .bottom-bar { background: linear-gradient(to top, rgba(243, 244, 247, .55), rgba(243, 244, 247, 0)); }
[data-glass="liquid"] .sheet, [data-glass="liquid"] .dialog { background: linear-gradient(160deg, rgba(255, 255, 255, .8), rgba(255, 255, 255, .62)); box-shadow: inset 1.5px 1.5px 0 #FFFFFF, inset 0 0 0 1px rgba(255, 255, 255, .5), 0 -10px 40px rgba(20, 33, 61, .16); }

/* ---- Semi-liquid variant (preview: ?glass=semi) ------------------------------------------------
   Between frosted and liquid, after the user's "notes" and "menu" references: thick, soft glass with a
   rounded bevel (bright top-left edge, faint shade bottom-right), moderate frosting, a cool blue-grey backdrop,
   and pastel meal tiles that stay clearly coloured. */
:root[data-glass="semi"] {
  --bg: rgba(46, 104, 224, .07);
  --page: #EDF2FA;
  --action: #2E68E0;
  --action-ink: #2E68E0;
  --action-soft: rgba(46, 104, 224, .10);
  --shadow: 46, 104, 224;
  /* Plain (uncoloured) boxes are white liquid glass at about 60%; the sheen adds a brighter top-left corner. */
  --glass: rgba(255, 255, 255, .6);
  --glass-blur: blur(16px) saturate(180%) brightness(1.03);
  --glass-sheen: radial-gradient(120% 85% at 0% 0%, rgba(255, 255, 255, .3) 0%, rgba(255, 255, 255, 0) 45%), rgba(255, 255, 255, .6);
  --glass-rim: inset 1px 1px 0 rgba(255, 255, 255, .95), inset -1px -1px 1px rgba(20, 33, 61, .04), inset 0 0 0 .5px rgba(255, 255, 255, .45), inset 0 0 14px rgba(255, 255, 255, .22);
  --glass-drop: 0 10px 26px rgba(46, 104, 224, .10), 0 1px 3px rgba(20, 33, 61, .05);
  --radius-card: 28px;
}
/* Soft blue backdrop after the user's blue-gradient references: a near-white field with a light periwinkle
   glow rising from the bottom and a faint sky wash at the top right. Light blues only, no deep navy. */
[data-glass="semi"] body::before {
  background:
    radial-gradient(90% 55% at 50% 112%, rgba(110, 152, 238, .55) 0, rgba(150, 184, 246, .35) 38%, rgba(190, 212, 250, .15) 62%, rgba(190, 212, 250, 0) 80%),
    radial-gradient(55% 34% at 100% 12%, rgba(176, 204, 250, .55) 0, rgba(176, 204, 250, 0) 100%),
    radial-gradient(50% 30% at 0% 40%, rgba(200, 218, 250, .5) 0, rgba(200, 218, 250, 0) 100%),
    linear-gradient(180deg, #F3F6FB, #E7EEF9);
}
[data-glass="semi"] .card, [data-glass="semi"] .item, [data-glass="semi"] .week-row, [data-glass="semi"] .check, [data-glass="semi"] .meal { box-shadow: var(--glass-rim), var(--glass-drop); }
[data-glass="semi"] .meal.sarapan { background: radial-gradient(120% 85% at 0% 0%, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 50%), color-mix(in srgb, var(--breakfast) 86%, transparent); }
[data-glass="semi"] .meal.siang { background: radial-gradient(120% 85% at 0% 0%, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 50%), color-mix(in srgb, var(--lunch) 86%, transparent); }
[data-glass="semi"] .meal.malam { background: radial-gradient(120% 85% at 0% 0%, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 50%), color-mix(in srgb, var(--dinner) 86%, transparent); }
[data-glass="semi"] .meal.camilan, [data-glass="semi"] .meal.lainnya { background: radial-gradient(120% 85% at 0% 0%, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 50%), color-mix(in srgb, var(--snack) 86%, transparent); }
[data-glass="semi"] .entry, [data-glass="semi"] .empty-slot { background: rgba(255, 255, 255, .6); box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .85); }
[data-glass="semi"] .segmented, [data-glass="semi"] .calendar-trigger, [data-glass="semi"] .btn.secondary { background: var(--glass-sheen); box-shadow: var(--glass-rim), 0 8px 20px rgba(20, 33, 61, .10); }
[data-glass="semi"] .segmented button[aria-pressed="true"], [data-glass="semi"] .segmented button[aria-selected="true"] { background: linear-gradient(180deg, #FFFFFF, rgba(255, 255, 255, .8)); box-shadow: 0 2px 8px rgba(20, 33, 61, .10); }
[data-glass="semi"] .header { background: rgba(243, 246, 251, .82); box-shadow: none; }
/* The add-mode tabs keep a filled selection in every variant; the white segmented styles must not hide their white label. */
:root .add-main .add-modes button[aria-selected="true"], [data-glass] .add-main .add-modes button[aria-selected="true"] { background: radial-gradient(120% 90% at 20% 0%, rgba(255, 255, 255, .24), rgba(255, 255, 255, 0) 55%), var(--action); color: var(--on-action); box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .4), 0 4px 12px rgba(46, 104, 224, .25); }
[data-glass="semi"] .btn.primary:not(:disabled), [data-glass="semi"] .btn.quantity-prompt, [data-glass="semi"] .day-cell[aria-pressed="true"] {
  background: radial-gradient(120% 90% at 20% 0%, rgba(255, 255, 255, .24), rgba(255, 255, 255, 0) 55%), rgba(46, 104, 224, .92);
  -webkit-backdrop-filter: blur(14px) saturate(170%); backdrop-filter: blur(14px) saturate(170%);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .4), inset 0 0 0 .5px rgba(255, 255, 255, .18), 0 10px 24px rgba(46, 104, 224, .28);
}
[data-glass="semi"] .bottom-bar { background: linear-gradient(to top, rgba(206, 222, 248, .7), rgba(206, 222, 248, 0)); }
[data-glass="semi"] .sheet, [data-glass="semi"] .dialog { background: linear-gradient(160deg, rgba(255, 255, 255, .86), rgba(244, 247, 251, .74)); box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .9), inset 0 0 0 1px rgba(255, 255, 255, .5), 0 -10px 40px rgba(20, 33, 61, .16); }
[data-glass="semi"] .input, [data-glass="semi"] .select, [data-glass="semi"] .textarea { background: rgba(255, 255, 255, .7); border-color: rgba(46, 104, 224, .2); box-shadow: inset 0 1px 1px rgba(20, 33, 61, .04); }

/* Only the base page background is plain (user: no yellow, purple, green or gradients behind everything).
   Cards, meal colours and the liquid-glass sheen and rims above stay as they were. */
:root[data-glass="semi"] { --page: #EEF2F8; }
[data-glass="semi"] body::before { background: var(--page); }

/* Without backdrop blur, or when the user asks for less transparency, fall back to near-solid surfaces. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root, :root[data-glass="liquid"], :root[data-glass="semi"] { --card: rgba(255, 255, 255, .94); --glass: rgba(255, 255, 255, .94); --glass-sheen: rgba(255, 255, 255, .94); --glass-strong: #FFFFFF; }
}
@media (prefers-reduced-transparency: reduce) {
  :root, :root[data-glass="liquid"], :root[data-glass="semi"] { --card: #FFFFFF; --glass: #FFFFFF; --glass-sheen: #FFFFFF; --glass-strong: #FFFFFF; --bg: #F3F4F7; }
  :root .meal.sarapan.sarapan { background: var(--breakfast); } :root .meal.siang.siang { background: var(--lunch); }
  :root .meal.malam.malam { background: var(--dinner); } :root .meal.camilan.camilan, :root .meal.lainnya.lainnya { background: var(--snack); }
}

/* Entries but no target: the gauge has no denominator, so it stays empty on purpose. Dim it and say why,
   instead of leaving a full-strength empty gauge that reads as broken. */
.target-orbit.no-target svg { opacity: .45; }
.target-why { max-width: 260px; font-size: 12px; line-height: 16px; color: var(--text-2); }
.target-caption .btn.secondary.small { margin-top: 6px; min-height: 36px; text-decoration: none; }

/* Macro tiles, after the user's reference: a small glass tile per macro with a coloured ring around the grams.
   Rings are full circles in the macro colour (identity only); there are no macro targets to show progress against. */
.nutrient-orbits { gap: 10px; }
.nutrient-orbit { padding: 14px 6px 12px; border-radius: 20px; background: var(--bg); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7); gap: 8px; }
.nutrient-orbit-value { width: 60px; min-height: 60px; border-width: 4px; background: var(--card); box-shadow: 0 2px 8px rgba(20, 33, 61, .06); }
.nutrient-orbit-name { font: var(--t-caption); text-transform: none; letter-spacing: 0; color: var(--text-2); }

/* Dial gauge and macro tiles, after the user's second reference: thin arc with outer ticks, centred total,
   and macro tiles with an icon header above an open ring. */
.target-track, .target-arc { stroke-width: 8; }
.target-tick { stroke: rgba(20, 33, 61, .18); stroke-width: 2; stroke-linecap: round; }
.target-tick.on { stroke: var(--progress); }
.target-knob { r: 6.5; }
.target-value { padding-top: 22px; gap: 0; }
.target-value strong { font: 700 42px/46px var(--font-head); letter-spacing: -.03em; }
.target-value > span { font: 600 12px/15px var(--font-head); text-transform: none; letter-spacing: 0; color: var(--text-2); }
.target-value > span:nth-of-type(1) { margin-top: 2px; }
.nutrient-orbit { align-items: stretch; padding: 10px 10px 12px; gap: 6px; }
.nutrient-head { display: flex; align-items: center; gap: 5px; color: var(--nutrient-color); }
.nutrient-head .nutrient-orbit-name { font: 600 12px/16px var(--font-head); color: var(--text); }
.nutrient-ring { position: relative; width: 66px; height: 66px; margin: 0 auto; }
.nutrient-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.nutrient-arc { fill: none; stroke: var(--nutrient-color); stroke-width: 5; stroke-linecap: round; }
.nutrient-ring .nutrient-orbit-value { position: absolute; inset: 0; width: auto; min-height: 0; border: 0; background: none; box-shadow: none; padding: 0; }
.nutrient-ring .nutrient-orbit-value strong { font: 700 16px/18px var(--font-head); }

/* ---- Liquid glass: segmented controls and confirmation dialog -------------------------------------
   Scoped to these two components only (cards, meal groups, charts and the page stay as they are).
   Light, clear glass: modest blur, a thin bright top edge, a soft sheen and a shallow shadow. The active
   segment is an opaque white thumb with action-coloured, bolder text, so the choice reads by shape, colour
   and contrast rather than by transparency. The dialog panel is near-solid for reading. Selectors start with
   :root so they win over the variant blocks above without !important. */
:root {
  --lg-edge: rgba(255, 255, 255, .72);
  --lg-blur: blur(12px) saturate(160%);
}
:root .segmented {
  /* .82 to .72 white: the lightest that keeps inactive labels above 4.5:1 even over a near-black, busy image. */
  background: linear-gradient(180deg, rgba(255, 255, 255, .82), rgba(255, 255, 255, .72));
  -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur);
  border: 1px solid var(--lg-edge);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -1px 0 rgba(20, 33, 61, .04), 0 4px 14px rgba(20, 33, 61, .06);
}
:root .segmented button { color: #3F4B60; transition: background-color .18s ease, color .18s ease, box-shadow .18s ease, transform .12s ease; }
:root .segmented button:hover { color: var(--text); }
:root .segmented button[aria-pressed="true"], :root .segmented button[aria-selected="true"] {
  background: linear-gradient(180deg, #FFFFFF, rgba(255, 255, 255, .97));
  color: var(--action); font-weight: 700;
  box-shadow: inset 0 1px 0 #FFFFFF, 0 0 0 .5px rgba(20, 33, 61, .10), 0 2px 8px rgba(20, 33, 61, .12);
}
/* The add-mode tabs keep their filled action colour; only a thin glass highlight is added. */
:root .add-main .add-modes button[aria-selected="true"], [data-glass] .add-main .add-modes button[aria-selected="true"] {
  background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, 0) 60%), var(--action);
  color: var(--on-action);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 3px 10px rgba(var(--shadow), .22);
}
:root .segmented button:focus-visible { outline: 2px solid var(--action-ink, var(--action)); outline-offset: 2px; position: relative; z-index: 1; }

/* Confirmation dialog: a near-solid panel so the message reads easily, glass only at the edge. */
:root .dialog-wrap { background: rgba(20, 33, 61, .26); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
:root .dialog {
  background: linear-gradient(180deg, rgba(255, 255, 255, .97), rgba(250, 251, 253, .93));
  -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid var(--lg-edge);
  box-shadow: inset 0 1px 0 #FFFFFF, 0 18px 44px rgba(20, 33, 61, .16), 0 2px 6px rgba(20, 33, 61, .06);
}
/* Buttons share a row while their labels fit on one line; longer labels wrap the row, primary on top. */
:root .dialog-actions { justify-content: stretch; flex-wrap: wrap-reverse; gap: 10px; margin-top: 4px; }
:root .dialog-actions .btn { flex: 1 1 auto; min-height: 46px; min-width: 112px; padding: 0 18px; font-size: 15px; white-space: nowrap; border: 0; text-decoration: none; }
:root .dialog-actions [data-action="dialog-cancel"] {
  background: rgba(20, 33, 61, .06); color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 0 0 1px rgba(20, 33, 61, .08);
}
:root .dialog-actions [data-action="dialog-confirm"] {
  background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, 0) 60%), var(--action);
  color: var(--on-action);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 4px 12px rgba(var(--shadow), .22);
}
:root .dialog-actions [data-action="dialog-confirm"].danger {
  background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 60%), var(--danger);
  color: #FFFFFF; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 4px 12px rgba(196, 41, 28, .22);
}
:root .dialog-actions .btn:focus-visible { outline: 2px solid var(--action-ink, var(--action)); outline-offset: 3px; }

/* Fallbacks: without backdrop blur, or when less transparency is requested, both become solid. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root .segmented { background: #EEF1F6; }
  :root .dialog { background: #FFFFFF; }
  :root .dialog-wrap { background: rgba(20, 33, 61, .4); }
}
@media (prefers-reduced-transparency: reduce) {
  :root .segmented { background: #EEF1F6; -webkit-backdrop-filter: none; backdrop-filter: none; }
  :root .dialog { background: #FFFFFF; -webkit-backdrop-filter: none; backdrop-filter: none; }
  :root .dialog-wrap { background: rgba(20, 33, 61, .4); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Keep white labels readable at the brightest point of the blue glass highlight. */
:root[data-glass="semi"][data-theme="light"] :is(.btn.primary:not(:disabled), .btn.quantity-prompt, .day-cell[aria-pressed="true"]) {
  background: linear-gradient(180deg, rgba(255, 255, 255, .04), transparent 60%), var(--action);
}

/* Dark glass uses the same hierarchy, with brighter text and muted meal colours. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0E1520;
  --bg: #172231;
  --card: #1A2636;
  --text: #EDF2FA;
  --text-2: #A9B7CB;
  --divider: #344052;
  --action: #2B60C7;
  --action-ink: #91B9FF;
  --on-action: #FFFFFF;
  --action-soft: #233B60;
  --track: #2C3B50;
  --protein: #FF858B;
  --carbs: #5AD1BB;
  --fat: #B59CFF;
  --fiber: #A9B7CB;
  --breakfast: #3A3324;
  --lunch: #23384F;
  --dinner: #432C3B;
  --snack: #293747;
  --breakfast-ink: #D7BB7A;
  --lunch-ink: #9CBFE8;
  --dinner-ink: #D2B4E4;
  --snack-ink: #C4B6A5;
  --unrec-bg: #432E20;
  --unrec-text: #FFC294;
  --ok-bg: #173C33;
  --ok-text: #81DDC2;
  --muted-bg: #243144;
  --muted-text: #A9B7CB;
  --assumed-bg: #3E371E;
  --assumed-text: #EBD289;
  --danger: #FF9292;
  --shadow: 0, 0, 0;
  --glass: rgba(25, 38, 56, .88);
  --glass-strong: rgba(25, 38, 56, .97);
  --glass-edge: rgba(180, 205, 242, .18);
  --glass-blur: blur(16px) saturate(130%);
  --glass-sheen: linear-gradient(180deg, rgba(44, 60, 82, .88), rgba(24, 36, 53, .92));
  --glass-rim: inset 0 1px 0 rgba(220, 235, 255, .14), inset 0 0 0 1px rgba(180, 205, 242, .14);
  --glass-drop: 0 10px 26px rgba(0, 0, 0, .22);
  --lg-edge: rgba(180, 205, 242, .22);
}
:root[data-theme="dark"] body::before { background: var(--page); }
:root[data-theme="dark"] .header { background: rgba(14, 21, 32, .92); box-shadow: inset 0 -1px 0 var(--glass-edge); }
:root[data-theme="dark"] :is(.card, .item, .week-row, .check) { background: var(--glass-sheen); box-shadow: var(--glass-rim), var(--glass-drop); }
:root[data-theme="dark"] .meal { box-shadow: var(--glass-rim), var(--glass-drop); }
:root[data-theme="dark"] .meal.sarapan { background: var(--breakfast); }
:root[data-theme="dark"] .meal.siang { background: var(--lunch); }
:root[data-theme="dark"] .meal.malam { background: var(--dinner); }
:root[data-theme="dark"] :is(.meal.camilan, .meal.lainnya) { background: var(--snack); }
:root[data-theme="dark"] :is(.entry, .empty-slot) { background: rgba(13, 21, 33, .48); box-shadow: inset 0 0 0 1px rgba(180, 205, 242, .08); }
:root[data-theme="dark"] :is(.meal-icon, .nutrient-orbit) { box-shadow: var(--glass-rim); }
:root[data-theme="dark"] :is(.meal .meal-icon, .selected-food-icon, .action-icon) { background: var(--bg); }
:root[data-theme="dark"] :is(.calendar-trigger, .btn.secondary) { background: var(--glass-sheen); box-shadow: var(--glass-rim), 0 4px 14px rgba(0, 0, 0, .14); }
:root[data-theme="dark"] :is(.btn.primary:not(:disabled), .btn.quantity-prompt, .day-cell[aria-pressed="true"]) { background: linear-gradient(180deg, rgba(255, 255, 255, .1), transparent 60%), var(--action); box-shadow: var(--glass-rim), 0 6px 18px rgba(0, 0, 0, .2); }
:root[data-theme="dark"] .btn.outline { box-shadow: inset 0 0 0 1.5px var(--divider); }
:root[data-theme="dark"] .bottom-bar { background: linear-gradient(to top, rgba(14, 21, 32, .96) 50%, rgba(14, 21, 32, 0)); }
:root[data-theme="dark"] .bottom-bar .btn.outline { background: var(--glass-strong); box-shadow: inset 0 0 0 1.5px var(--divider); }
:root[data-theme="dark"] :is(.sheet, .dialog) { background: linear-gradient(180deg, rgba(29, 42, 60, .98), rgba(24, 35, 51, .97)); box-shadow: var(--glass-rim), 0 18px 44px rgba(0, 0, 0, .4); }
:root[data-theme="dark"] :is(.backdrop, .dialog-wrap) { background: rgba(0, 0, 0, .58); }
:root[data-theme="dark"] :is(.input, .select, .textarea) { background-color: rgba(13, 22, 35, .72); border-color: #536278; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .14); }
:root[data-theme="dark"] .select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A9B7CB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; }
:root[data-theme="dark"] :is(.input, .textarea)::placeholder { color: #9CACC1; opacity: 1; }
:root[data-theme="dark"] :is(.input, .select, .textarea):focus { border-color: var(--action-ink); }
:root[data-theme="dark"] .input[aria-invalid="true"] { border-color: var(--danger); }
:root[data-theme="dark"] .needs-amount #search-qty { border-color: #71849E; }
:root[data-theme="dark"] .needs-amount #search-qty[aria-invalid="true"] { border-color: var(--danger); }
:root[data-theme="dark"] :is(.option, .action-row) { background: rgba(19, 31, 47, .82); border-color: var(--divider); box-shadow: inset 0 0 0 1px var(--glass-edge); }
:root[data-theme="dark"] .option[aria-checked="true"] { background: var(--action-soft); box-shadow: inset 0 0 0 2px var(--action-ink); }
:root[data-theme="dark"] .add-main .selected-food { background: rgba(25, 38, 56, .9); border-color: var(--divider); }
:root[data-theme="dark"] .selected-food-icon { color: var(--action-ink); }
:root[data-theme="dark"] :is(.portion-entry, .food-basket .basket-row + .basket-row) { border-color: var(--divider); }
:root[data-theme="dark"] .notice.info { background: var(--muted-bg); }
:root[data-theme="dark"] .target-tick { stroke: #6B7D94; }
:root[data-theme="dark"] .target-tick.on { stroke: var(--progress); }
:root[data-theme="dark"] .toast { background: #D9E7FC; color: #14213D; }
:root[data-theme="dark"] .segmented { background: linear-gradient(180deg, rgba(40, 55, 76, .94), rgba(25, 37, 55, .9)); border-color: var(--lg-edge); box-shadow: var(--glass-rim), 0 4px 14px rgba(0, 0, 0, .16); }
:root[data-theme="dark"] .segmented button { color: #C7D3E5; }
:root[data-theme="dark"] .segmented :is(button[aria-pressed="true"], button[aria-selected="true"]) { background: #344B6B; color: #EDF3FF; box-shadow: var(--glass-rim), 0 2px 8px rgba(0, 0, 0, .18); }
:root[data-theme="dark"] .add-main .add-modes button[aria-selected="true"] { background: var(--action); color: var(--on-action); }
:root[data-theme="dark"] .dialog-actions [data-action="dialog-cancel"] { background: #2B3B52; color: var(--text); box-shadow: var(--glass-rim); }
:root[data-theme="dark"] .dialog-actions [data-action="dialog-confirm"].danger { background: #B83A44; color: #FFFFFF; box-shadow: var(--glass-rim), 0 4px 12px rgba(0, 0, 0, .18); }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root[data-theme="dark"] { --glass-sheen: #1A2636; --glass-blur: none; }
  :root[data-theme="dark"] :is(.segmented, .sheet, .dialog) { background: #1A2636; }
}
@media (prefers-reduced-transparency: reduce) {
  :root[data-theme="dark"] { --glass-sheen: #1A2636; --glass-blur: none; }
  :root[data-theme="dark"] :is(.segmented, .sheet, .dialog) { background: #1A2636; -webkit-backdrop-filter: none; backdrop-filter: none; }
  :root[data-theme="dark"] :is(.backdrop, .dialog-wrap) { background: rgba(0, 0, 0, .65); -webkit-backdrop-filter: none; backdrop-filter: none; }
}