#food-rhythm .macro__fill { position:relative; height:100%; border-radius:inherit; transition:width .6s cubic-bezier(.16,1,.3,1); }
#food-rhythm .macro__fill::after { content:""; position:absolute; right:0; top:50%; width:7px; height:7px; border-radius:50%; background:inherit; transform:translate(50%,-50%); }
#food-rhythm .macro--protein .macro__fill { background:var(--fr-leaf); }
#food-rhythm .macro--fat .macro__fill { background:var(--fr-body); }
#food-rhythm .macro--carbs .macro__fill { background:var(--fr-face); }
#food-rhythm .fr-diary-metrics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:12px; }
#food-rhythm .fr-diary-extra { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); align-items:center; column-gap:8px; min-width:0; min-height:118px; padding:14px 14px 12px; border:1px solid #e5ebe3; border-radius:22px; background:white; box-shadow:0 8px 22px #16342b0a; }
#food-rhythm .fr-extra-body { display:flex; flex-direction:column; justify-content:center; min-width:0; height:100%; }
#food-rhythm .fr-extra-title { display:block; color:#526b60; font-size:14px; line-height:18px; font-weight:700; letter-spacing:-.02em; white-space:nowrap; }
#food-rhythm .fr-extra-icon { width:38px; height:38px; display:grid; place-items:center; justify-self:center; border-radius:50%; background:#ecf6ef; color:#22a06b; }
#food-rhythm .fr-extra-icon .fr-ui-icon { width:23px; height:23px; }
#food-rhythm .fr-extra-steps .fr-ui-icon { width:28px; height:28px; }
#food-rhythm .fr-extra-water .fr-extra-icon { background:color-mix(in srgb,var(--fr-body) 32%,white); color:var(--fr-face); }
#food-rhythm .fr-extra-sleep .fr-extra-icon { background:color-mix(in srgb,var(--fr-face) 10%,white); color:var(--fr-face); }
#food-rhythm .fr-extra-sport .fr-extra-icon { background:color-mix(in srgb,var(--fr-tongue) 18%,white); color:var(--fr-tongue); }
#food-rhythm .fr-diary-extra strong { display:block; margin-top:4px; color:#16342b; font-size:17px; line-height:19px; font-weight:800; letter-spacing:-.02em; white-space:nowrap; }
#food-rhythm .fr-diary-extra small { display:block; min-height:12px; margin-top:3px; color:#8a9590; font-size:10px; line-height:12px; font-weight:500; }
#food-rhythm .fr-diary-extra .fr-meter { display:block; width:100%; height:4px; margin-top:10px; background:#edf1ec; }
#food-rhythm .fr-diary-extra .fr-meter span { width:0; }
#food-rhythm .fr-extra-steps .fr-meter span { background:var(--fr-leaf); }
#food-rhythm .fr-extra-water .fr-meter span { background:var(--fr-face); }
#food-rhythm .fr-extra-sleep .fr-meter span { background:var(--fr-body); }
#food-rhythm .fr-extra-sport .fr-meter span { background:var(--fr-tongue); }
#food-rhythm .fr-add-overlay { position:fixed; z-index:19; inset:0; pointer-events:none; }
#food-rhythm .fr-add-backdrop { position:absolute; inset:0; width:100%; border:0; background:#0c1c1561; opacity:0; visibility:hidden; transition:opacity .32s,visibility .32s; }
#food-rhythm .fr-add-open .fr-add-backdrop { opacity:1; visibility:visible; pointer-events:auto; }
#food-rhythm .fr-add-panel { position:absolute; left:50%; bottom:calc(max(12px,env(safe-area-inset-bottom)) + 72px); width:0; height:0; }
#food-rhythm .fr-add-source { position:absolute; left:0; bottom:0; width:78px; margin-left:-39px; display:grid; justify-items:center; gap:7px; padding:0; border:0; background:transparent; color:white; font-size:11px; font-weight:700; opacity:0; transform:translate(0,30px) scale(.3); pointer-events:none; transition:transform .52s cubic-bezier(.16,1.45,.3,1),opacity .25s; }
#food-rhythm .fr-add-source-photo { --fr-x:-92px; --fr-y:-38px; }
#food-rhythm .fr-add-source-barcode { --fr-x:0px; --fr-y:-91px; }
#food-rhythm .fr-add-source-manual { --fr-x:92px; --fr-y:-38px; }
#food-rhythm .fr-add-open .fr-add-source { opacity:1; transform:translate(var(--fr-x),var(--fr-y)) scale(1); pointer-events:auto; }
#food-rhythm .fr-add-open .fr-add-source-photo { transition-delay:.03s; }