/* Round 10: Liquid Glass, variant B (full glass). Classic skin ONLY; every other skin is untouched.
   Frosted: the header pill, the floating capsule tab bar (with + inside), sheets, every card and the summary panel, and the add-food controls.
   Cards get a slightly darker tint than the mockup so text stays readable over the bright teal/pink glow. Solid fallbacks: no backdrop-filter support or prefers-reduced-transparency. */
body[data-skin=classic][data-mode=dark]{background:
 radial-gradient(60% 40% at 15% 10%,color-mix(in srgb,var(--ac) 22%,transparent),transparent 70%),
 radial-gradient(55% 40% at 90% 30%,#06b6d433,transparent 70%),
 radial-gradient(70% 45% at 30% 85%,#f43f5e26,transparent 70%),
 radial-gradient(50% 35% at 85% 90%,#7c3aed2e,transparent 70%),var(--bg);background-attachment:fixed}
body[data-skin=classic][data-mode=light]{background:
 radial-gradient(60% 40% at 15% 10%,color-mix(in srgb,var(--ac) 16%,transparent),transparent 70%),
 radial-gradient(55% 40% at 90% 30%,#06b6d41f,transparent 70%),radial-gradient(70% 45% at 30% 85%,#f43f5e17,transparent 70%),var(--bg);background-attachment:fixed}
body[data-skin=classic]{--glassCard:rgba(16,18,26,.42);--glassCtl:rgba(255,255,255,.07);--glassBg:rgba(255,255,255,.07);--glassTab:rgba(22,24,32,.55);--glassSheet:rgba(24,26,34,.72);--glassLine:rgba(255,255,255,.13);--glassHi:rgba(255,255,255,.25)}
body[data-skin=classic][data-mode=light]{--glassCard:rgba(255,255,255,.6);--glassCtl:rgba(255,255,255,.6);--glassBg:rgba(255,255,255,.55);--glassTab:rgba(255,255,255,.62);--glassSheet:rgba(255,255,255,.8);--glassLine:rgba(16,24,40,.1);--glassHi:rgba(255,255,255,.9)}
/* header pill */
body[data-skin=classic] .top{margin:0 -6px;padding:8px 12px;border-radius:22px;background:var(--glassBg);
 -webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);
 border:1px solid var(--glassLine);box-shadow:inset 0 1px 0 var(--glassHi),0 8px 30px rgba(0,0,0,.3)}
/* floating capsule tab bar, + sits inside it */
body[data-skin=classic] .tabs{left:16px;right:16px;bottom:calc(10px + env(safe-area-inset-bottom));padding:6px 10px;border-radius:999px;margin:0 auto;max-width:420px;
 background:var(--glassTab);-webkit-backdrop-filter:blur(26px) saturate(190%);backdrop-filter:blur(26px) saturate(190%);
 border:1px solid var(--glassLine);box-shadow:inset 0 1px 0 var(--glassHi),inset 0 -1px 0 rgba(255,255,255,.05),0 12px 40px rgba(0,0,0,.45)}
body[data-skin=classic] .tabs .logTab span{margin-top:0;width:48px;height:48px;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 4px 18px var(--glow)}
/* sheets */
body[data-skin=classic] .sheetBg{background:rgba(0,0,0,.3);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
body[data-skin=classic] .sheetBody{left:8px;right:8px;bottom:8px;border-radius:32px;padding-bottom:calc(20px + env(safe-area-inset-bottom) * .5);background:var(--glassSheet);
 -webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);
 border:1px solid var(--glassLine);box-shadow:inset 0 1px 0 var(--glassHi),0 -10px 50px rgba(0,0,0,.45)}
/* cards + summary panel (14px blur keeps scrolling smooth) */
body[data-skin=classic] :is(.card,.hero){border-radius:24px;background:var(--glassCard);
 -webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);border:1px solid var(--glassLine);
 box-shadow:inset 0 1px 0 var(--glassHi),inset 1px 0 0 rgba(255,255,255,.05),0 6px 24px rgba(0,0,0,.28)}
body[data-skin=classic] .hero{padding:16px}
body[data-skin=classic] .view{padding-bottom:30px}
/* add-food: chips, segmented control, Say it / Snap it, text field, quick picks, photo box */
body[data-skin=classic] :is(.chips button,.seg,.bigIn,.textWrap textarea,.pkg input,.photoBox,.palSlot){background:var(--glassCtl);
 -webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);border:1px solid var(--glassLine);box-shadow:inset 0 1px 0 var(--glassHi)}
body[data-skin=classic] .seg button.on{background:rgba(255,255,255,.1)}
body[data-skin=classic][data-mode=light] .seg button.on{background:rgba(255,255,255,.9)}
body[data-skin=classic] .chips button.on{background:var(--ac);color:var(--on-ac);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 4px 16px var(--glow)}
body[data-skin=classic] .textWrap textarea:focus{border-color:var(--ac)}
body[data-skin=classic] .palSlot.got{background:color-mix(in srgb,var(--ac) 18%,transparent)}
/* pal hint: plain text, never a box (fixes the mockup overlap) */
body[data-skin=classic] .palNote{background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;flex:1 1 120px;max-width:none;min-width:0}
/* Fallbacks: solid chrome */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 body[data-skin=classic] .top{background:var(--card)}
 body[data-skin=classic] .tabs{background:var(--card2)}
 body[data-skin=classic] .sheetBody{background:var(--card)}
 body[data-skin=classic] :is(.card,.hero){background:var(--card)}
 body[data-skin=classic] :is(.chips button,.seg,.bigIn,textarea,.pkg input,.photoBox,.palSlot){background:var(--card2)}}
@media (prefers-reduced-transparency:reduce){
 body[data-skin=classic][data-mode]{background:var(--bg)}
 body[data-skin=classic] :is(.top,.tabs,.sheetBody,.sheetBg,.card,.hero,.chips button,.seg,.bigIn,textarea,.pkg input,.photoBox,.palSlot){-webkit-backdrop-filter:none;backdrop-filter:none}
 body[data-skin=classic] .top{background:var(--card)}
 body[data-skin=classic] .tabs{background:var(--card2)}
 body[data-skin=classic] .sheetBody{background:var(--card)}
 body[data-skin=classic] :is(.card,.hero){background:var(--card)}
 body[data-skin=classic] :is(.chips button,.seg,.bigIn,textarea,.pkg input,.photoBox,.palSlot){background:var(--card2)}}
/* drill-down in glass B (Classic) */
body[data-skin=classic] .ddMeal,body[data-skin=classic] .ddChips button:not(.on),body[data-skin=classic] .ddMeals button:not(.on),body[data-skin=classic] .ddX,body[data-skin=classic] .ddB{background:var(--glassCtl,rgba(255,255,255,.08));border-color:var(--glassLine,rgba(255,255,255,.14))}