/* Apple-inspired glass treatment: reserve translucency for floating navigation and controls. */
:root{--glass-line:rgba(255,255,255,.82);--glass-fill:rgba(255,255,255,.68);--glass-shadow:0 12px 32px rgba(37,77,117,.14),0 2px 7px rgba(33,65,96,.07);--lift-shadow:0 12px 28px rgba(36,69,103,.11),0 3px 8px rgba(36,69,103,.06)}
body{background:radial-gradient(ellipse at 8% 4%,rgba(202,224,255,.75),transparent 38%),radial-gradient(ellipse at 92% 18%,rgba(229,218,255,.62),transparent 36%),linear-gradient(145deg,#f8fbff 0%,#f2f7fd 52%,#f9f8ff 100%)}
.app-head{position:relative;padding:11px 0 15px}.app-head .head-actions{gap:10px}.app-head .head-actions>button{background:rgba(255,255,255,.78);border-color:rgba(255,255,255,.95);box-shadow:0 3px 10px rgba(38,75,113,.08),inset 0 1px 0 #fff}.app-head .head-actions>button:hover{background:rgba(255,255,255,.96);box-shadow:0 6px 16px rgba(38,75,113,.13),inset 0 1px 0 #fff;transform:translateY(-1px)}
.environment{padding:7px 11px;width:fit-content;max-width:100%;line-height:1.45;background:rgba(255,255,255,.64);border:1px solid rgba(255,255,255,.85);box-shadow:0 4px 14px rgba(38,75,113,.05),inset 0 1px 0 #fff;border-radius:15px}
.tabs{background:rgba(239,246,255,.66);border:1px solid var(--glass-line);border-radius:23px;padding:7px;box-shadow:var(--glass-shadow),inset 0 1px 0 rgba(255,255,255,.96);backdrop-filter:blur(22px) saturate(155%);-webkit-backdrop-filter:blur(22px) saturate(155%);transition:box-shadow .22s ease,background-color .22s ease}
.tabs button{position:relative;border-color:transparent;border-radius:17px;color:#425c75;transition:transform .18s ease,background-color .2s ease,box-shadow .2s ease,color .2s ease}.tabs button:hover{background:rgba(255,255,255,.62);box-shadow:0 3px 9px rgba(34,71,109,.08)}.tabs button:active{transform:scale(.97)}.tabs button[aria-current=page]{background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(231,241,255,.93));color:#175c9b;border:1px solid rgba(255,255,255,.98);box-shadow:0 4px 11px rgba(38,91,146,.14),inset 0 1px 0 #fff}
.meal,.recipe-tile,.week-day{background:#fff;border-color:rgba(219,231,244,.96);box-shadow:var(--lift-shadow),inset 0 1px 0 #fff;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}.meal{border-radius:24px}.recipe-tile{border-radius:24px;overflow:hidden}.week-day{border-radius:23px}.meal.eaten{border-left-color:#66a987;background:linear-gradient(130deg,#fff 0%,#fbfffc 100%)}
.insight-card,.shopping-list,.shopping-summary,.shopping-controls,.metric{background:#fff;border-color:#dce7f1;box-shadow:0 5px 17px rgba(43,72,101,.055),inset 0 1px 0 #fff}.nutrition-hero{box-shadow:0 12px 30px rgba(72,115,170,.13),inset 0 1px 0 rgba(255,255,255,.78)}.macro-card{background:#fff;border-color:#e1eaf3;box-shadow:0 3px 10px rgba(42,73,102,.055)}
button{transition:background .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease,color .18s ease}button:active{transform:translateY(1px) scale(.985)}button.primary{box-shadow:0 5px 13px rgba(33,112,190,.2),inset 0 1px 0 rgba(255,255,255,.16)}
.shopping-item{border:1px solid #e0e9f1;border-radius:16px;background:#fff;box-shadow:0 3px 9px rgba(40,72,104,.045),inset 0 1px 0 #fff}.shopping-item:has(input:checked){border-color:#a8d2b6;background:#f3faf5;box-shadow:0 3px 11px rgba(50,121,77,.09),inset 0 1px 0 #fff}.shopping-completion{margin:9px 0 0;padding:9px 12px;border:1px solid #a8d2b6;border-radius:12px;background:#eff8f1;color:#245e3c;font-weight:650}.shopping-progress.is-complete{animation:shopping-complete .45s ease-out}
.preference-switch{box-shadow:0 3px 9px rgba(36,72,108,.07),inset 0 1px 0 #fff}.preference-switch:hover{box-shadow:0 5px 14px rgba(36,72,108,.13),inset 0 1px 0 #fff}
@keyframes shopping-complete{0%{transform:translateY(3px);box-shadow:0 0 0 0 rgba(78,151,99,.3)}55%{transform:translateY(-1px);box-shadow:0 0 0 7px rgba(78,151,99,.09)}100%{transform:translateY(0);box-shadow:none}}
@media(hover:hover){.meal:hover,.recipe-tile:hover,.week-day:hover{transform:translateY(-3px);border-color:#c8dced;box-shadow:0 17px 34px rgba(36,69,103,.14),inset 0 1px 0 #fff}}
@media(max-width:680px){body{padding-bottom:calc(100px + env(safe-area-inset-bottom))}.shell{padding-left:15px;padding-right:15px}.app-head{padding-top:5px}.tabs{left:50%;right:auto;bottom:calc(10px + env(safe-area-inset-bottom));top:auto;width:calc(100% - 24px);max-width:620px;padding:7px 7px calc(7px + env(safe-area-inset-bottom));border:1px solid rgba(255,255,255,.94);border-radius:23px;background:rgba(246,250,255,.78);box-shadow:0 12px 32px rgba(24,55,86,.22),0 3px 8px rgba(24,55,86,.1),inset 0 1px 0 #fff;backdrop-filter:blur(24px) saturate(165%);-webkit-backdrop-filter:blur(24px) saturate(165%);transform:translateX(-50%)}.tabs button{flex:1;min-width:0;min-height:54px;padding:6px 2px;border-radius:17px;gap:4px;font-size:clamp(10px,3vw,12px);line-height:1.15}.tabs svg{width:20px;height:20px}.tabs button[aria-current=page]{background:linear-gradient(145deg,#fff,#e7f2ff);color:#155d9e;border-color:#fff;box-shadow:0 3px 10px rgba(35,92,147,.16),inset 0 1px 0 #fff}.tabs button:hover{background:rgba(255,255,255,.8)}.meal,.recipe-tile,.week-day{box-shadow:0 8px 20px rgba(36,69,103,.085),inset 0 1px 0 #fff}.shopping-item{min-height:60px;border-radius:15px}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.tabs,.app-head .head-actions>button,.environment{background:#f7faff}}
@media(prefers-reduced-transparency:reduce){.tabs,.app-head .head-actions>button,.environment{background:rgba(247,250,255,.97);backdrop-filter:none;-webkit-backdrop-filter:none}}
@media(prefers-reduced-motion:reduce){:root:not([data-motion-enabled="true"]) .tabs,:root:not([data-motion-enabled="true"]) .tabs button,:root:not([data-motion-enabled="true"]) button,:root:not([data-motion-enabled="true"]) .meal,:root:not([data-motion-enabled="true"]) .recipe-tile,:root:not([data-motion-enabled="true"]) .week-day,:root:not([data-motion-enabled="true"]) .shopping-progress.is-complete{transition:none!important;animation:none!important}:root:not([data-motion-enabled="true"]) .meal:hover,:root:not([data-motion-enabled="true"]) .recipe-tile:hover,:root:not([data-motion-enabled="true"]) .week-day:hover{transform:none}}
:root:not([data-motion-enabled="true"]) .tabs,:root:not([data-motion-enabled="true"]) .tabs button,:root:not([data-motion-enabled="true"]) button,:root:not([data-motion-enabled="true"]) .meal,:root:not([data-motion-enabled="true"]) .recipe-tile,:root:not([data-motion-enabled="true"]) .week-day,:root:not([data-motion-enabled="true"]) .shopping-progress.is-complete{transition:none!important;animation:none!important}
@media(forced-colors:active){.tabs,.app-head .head-actions>button,.meal,.recipe-tile,.week-day,.shopping-item{border:1px solid CanvasText;box-shadow:none}.tabs button[aria-current=page]{outline:2px solid Highlight}}
@media(max-width:360px){.shell{padding-left:12px;padding-right:12px}.tabs{width:calc(100% - 16px);bottom:calc(7px + env(safe-area-inset-bottom));padding-left:4px;padding-right:4px}.tabs button{font-size:10px}.tabs svg{width:18px;height:18px}}
@media print{.tabs{display:none!important}.shopping-completion{border-color:#888;background:#fff;color:#000}}

:root:not([data-motion-enabled="true"]) button:active,:root:not([data-motion-enabled="true"]) .app-head .head-actions>button:hover,:root:not([data-motion-enabled="true"]) .meal:hover,:root:not([data-motion-enabled="true"]) .recipe-tile:hover,:root:not([data-motion-enabled="true"]) .week-day:hover{transform:none}