/* Fooppers Recipes — app styles. Loaded INSIDE a shadow root: theme CSS cannot reach these elements. */

:host{
  all:initial;display:block;
  --g1:#A3D13C; --g2:#5DA531; --g3:#2F7D2A; --gt:#3F8A26; --gtint:#EEF6E2;
  --r1:#F0493E; --r2:#C62828; --r3:#8E1616; --rt:#B71C1C; --rtint:#FCEBE8;
  --ink:#16201A; --ink2:#3E4842; --mute:#7D877F; --line:#E7EBE4; --bg:#F4F6F1; --card:#fff;
  --head:"Poppins","Hind Siliguri",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --script:"Hind Siliguri","Noto Sans Bengali",system-ui,sans-serif;
  --sh1:0 1px 2px rgba(16,32,16,.05),0 14px 34px -22px rgba(20,48,20,.35);
  --sh2:0 24px 48px -24px rgba(20,48,20,.45);
  font-family:var(--head);font-size:15px;line-height:1.55;color:var(--ink);background:var(--bg);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:left;
}
*,*::before,*::after{box-sizing:border-box}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;margin:0;padding:0;cursor:pointer;text-transform:none;letter-spacing:inherit;-webkit-tap-highlight-color:transparent;-webkit-appearance:none;appearance:none}
input{font:inherit;margin:0}
h1,h2,h3,p,ul,ol{margin:0;padding:0}
ul,ol{list-style:none}
svg{display:block}
:focus-visible{outline:2.5px solid var(--gt);outline-offset:3px;border-radius:10px}
.script{font-family:var(--script)}

.th-green{--c1:var(--g1);--c2:var(--g2);--c3:var(--g3);--ct:var(--gt);--tint:var(--gtint)}
.th-red{--c1:var(--r1);--c2:var(--r2);--c3:var(--r3);--ct:var(--rt);--tint:var(--rtint)}
.grad{background:linear-gradient(150deg,var(--c1) 0%,var(--c2) 48%,var(--c3) 100%)}

.app{min-height:70vh;padding-bottom:110px;opacity:0;transition:opacity .25s}
.app.ready{opacity:1}
.wrap{max-width:1080px;margin:0 auto;padding:0 16px}

/* ===== Illustrated dish ===== */
.dish{display:block;position:relative;border-radius:50%;filter:drop-shadow(0 16px 22px rgba(20,40,15,.32))}
.dish svg{width:100%;height:100%}
.dish img{position:absolute;inset:7%;width:86%;height:86%;border-radius:50%;object-fit:cover}

/* ===== LIST: hero ===== */
.hero{position:relative;color:#fff;border-radius:0 0 36px 36px;overflow:hidden;isolation:isolate}
.hero::before,.hero::after{content:"";position:absolute;border-radius:50%;background:#fff;z-index:-1}
.hero::before{width:340px;height:340px;right:-120px;top:-150px;opacity:.10}
.hero::after{width:220px;height:220px;left:-90px;bottom:-110px;opacity:.07}
.hero-in{position:relative;max-width:1080px;margin:0 auto;padding:26px 20px 26px;min-height:380px}
.kick{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 13px 0 10px;border-radius:999px;background:rgba(255,255,255,.18);backdrop-filter:blur(6px);font-size:12.5px;font-weight:600}
.kick i{width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.3)}
.hero h1{position:relative;z-index:3;font-size:clamp(48px,13.5vw,96px);line-height:.92;font-weight:800;text-transform:uppercase;letter-spacing:-.015em;margin:16px 0 12px;text-shadow:0 6px 24px rgba(0,40,0,.18)}
.hero-p{font-size:14.5px;line-height:1.5;color:rgba(255,255,255,.92);max-width:17ch}
.cluster{position:absolute;right:-42px;top:22px;width:250px;height:280px;pointer-events:none}
.cluster a{position:absolute;pointer-events:auto;transition:transform .3s cubic-bezier(.3,1.4,.5,1)}
.cluster a:active{transform:scale(.94)}
.cluster a:nth-child(1){width:178px;height:178px;left:0;top:58px;z-index:2}
.cluster a:nth-child(2){width:104px;height:104px;right:8px;top:-4px}
.cluster a:nth-child(3){width:118px;height:118px;right:-6px;top:196px}
.badge{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:50%;background:#fff;color:var(--rt);text-align:center;z-index:3;
  box-shadow:0 0 0 6px rgba(255,255,255,.35),0 14px 26px -10px rgba(0,0,0,.35);transform:rotate(-9deg)}
.hero .badge{position:relative;margin-top:20px;width:88px;height:88px}
.badge b{font-size:24px;line-height:1;font-weight:800}
.badge small{font-size:12px;line-height:1.2;font-weight:700}
.search{position:relative;display:block;margin-top:26px;z-index:4}
.search input{display:block;width:100%;height:58px;border:0;border-radius:18px;background:#fff;color:var(--ink);padding:0 18px 0 52px;font-size:15px;font-weight:500;outline:none;box-shadow:var(--sh2);-webkit-appearance:none;appearance:none}
.search input::placeholder{color:#A1AAA3;font-weight:400}
.search input::-webkit-search-cancel-button{-webkit-appearance:none}
.search svg{position:absolute;left:18px;top:50%;width:22px;height:22px;transform:translateY(-50%);stroke:var(--gt)}
@media(min-width:760px){
  .hero-in{padding:44px 32px 36px;min-height:440px}
  .hero-p{max-width:30ch;font-size:16px}
  .cluster{right:20px;top:24px;width:420px;height:380px}
  .cluster a:nth-child(1){width:260px;height:260px;left:20px;top:70px}
  .cluster a:nth-child(2){width:150px;height:150px;right:20px;top:0}
  .cluster a:nth-child(3){width:160px;height:160px;right:0;top:220px}
  .hero .badge{width:100px;height:100px}
  .search{max-width:520px}
}

/* ===== LIST: filters ===== */
.chips{display:flex;gap:9px;overflow-x:auto;margin:20px -16px 0;padding:2px 16px 6px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px 0 14px;border-radius:999px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line),0 1px 2px rgba(0,0,0,.03);font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap;transition:transform .15s}
.chip i{width:10px;height:10px;border-radius:50%;background:linear-gradient(150deg,var(--c1),var(--c3))}
.chip:active{transform:scale(.96)}
.chip.on{color:#fff;background:linear-gradient(150deg,var(--c1),var(--c2) 55%,var(--c3));box-shadow:0 10px 20px -12px var(--c3)}
.chip.on i{background:#fff}
.tabs{display:flex;gap:22px;overflow-x:auto;margin:8px -16px 0;padding:0 18px;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:0 0 auto;position:relative;padding:10px 0;font-size:13.5px;font-weight:500;color:var(--mute);white-space:nowrap}
.tab.on{color:var(--ink);font-weight:700}
.tab.on::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--g1),var(--g3))}

/* ===== LIST: menu cards ===== */
.menu{display:grid;grid-template-columns:1fr;gap:16px;margin-top:10px}
@media(min-width:860px){.menu{grid-template-columns:1fr 1fr;align-items:start}}
.card{background:var(--card);border-radius:26px;box-shadow:var(--sh1)}
.sec{padding:20px 16px 6px}
.sec-h{display:flex;align-items:center;gap:10px;padding:0 2px 6px}
.sec-h i{width:12px;height:12px;border-radius:50%;background:linear-gradient(150deg,var(--c1),var(--c3));box-shadow:0 0 0 4px var(--tint)}
.sec-h h2{font-size:18px;line-height:1;font-weight:800;text-transform:uppercase;letter-spacing:.03em}
.sec-h span{margin-left:auto;font-size:12px;font-weight:600;color:var(--mute);background:var(--bg);padding:5px 10px;border-radius:999px}
.row a{display:flex;align-items:center;gap:14px;padding:14px 2px}
.row + .row a{border-top:1px solid var(--line)}
.row .dish{flex:0 0 66px;height:66px;filter:drop-shadow(0 6px 10px rgba(20,40,15,.22))}
.row-t{flex:1;min-width:0}
.lead{display:flex;align-items:baseline;gap:7px}
.lead b{font-size:15.5px;line-height:1.28;font-weight:700;color:var(--ct)}
.lead i{flex:1;min-width:12px;height:0;border-bottom:2px dotted #CBD2CC;transform:translateY(-4px)}
.lead em{font-style:normal;font-size:14px;font-weight:700;color:var(--ink);white-space:nowrap}
.row p{margin-top:3px;font-size:12.5px;line-height:1.45;color:var(--mute);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.meta{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:11.5px;font-weight:600;color:var(--ink2);min-width:0}
.meta .script{font-weight:500;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.heat{display:inline-flex;gap:2px;flex:0 0 auto}
.heat i{width:5px;height:10px;border-radius:50%/60% 60% 40% 40%;background:#DDE2DC;transform:rotate(20deg)}
.heat i.on{background:var(--r1)}

.empty{padding:36px 20px;text-align:center}
.empty h3{font-size:18px;font-weight:700;margin-bottom:6px}
.empty p{color:var(--mute);margin-bottom:16px}
.pillbtn{display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 22px;border-radius:999px;color:#fff;font-weight:700;font-size:14px;background:linear-gradient(150deg,var(--g1),var(--g2) 55%,var(--g3))}

/* Order CTA — flyer's "DELIVERY" corner */
.order{display:flex;align-items:center;gap:16px;margin-top:22px;padding:22px 20px 22px 26px;border-radius:64px 26px 26px 26px;color:#fff;box-shadow:var(--sh2);position:relative;overflow:hidden;isolation:isolate}
.order::after{content:"";position:absolute;right:-50px;top:-60px;width:180px;height:180px;border-radius:50%;background:#fff;opacity:.1;z-index:-1}
.order-t{flex:1}
.order b{display:block;font-size:21px;line-height:1.1;font-weight:800;text-transform:uppercase;letter-spacing:.02em}
.order span{display:block;margin-top:5px;font-size:13px;opacity:.92}
.order em{flex:0 0 auto;display:grid;place-items:center;width:50px;height:50px;border-radius:50%;background:#fff;font-style:normal}
.order em svg{width:22px;height:22px;stroke:var(--ct)}

/* ===== DETAIL ===== */
.dhero{position:relative;color:#fff;border-radius:0 0 40px 40px;padding:14px 16px 128px;isolation:isolate}
.dhero-bg{position:absolute;inset:0;border-radius:inherit;overflow:hidden;z-index:-1}
.dhero-bg::before,.dhero-bg::after{content:"";position:absolute;border-radius:50%;background:#fff}
.dhero-bg::before{width:300px;height:300px;right:-110px;top:-130px;opacity:.1}
.dhero-bg::after{width:200px;height:200px;left:-80px;bottom:-60px;opacity:.07}
.bar{display:flex;align-items:center;justify-content:space-between;max-width:760px;margin:0 auto}
.glass{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:44px;min-width:44px;padding:0 14px;border-radius:999px;background:rgba(255,255,255,.2);backdrop-filter:blur(8px);color:#fff;font-size:13.5px;font-weight:600}
.glass svg{width:20px;height:20px}
.glass.icon{padding:0}
.dhero-c{text-align:center;padding-top:14px}
.dhero .kick{margin:0 auto}
.dhero-local{display:block;margin-top:12px;font-family:var(--script);font-size:26px;line-height:1.25;font-weight:600;opacity:.95}
.dhero .dish{position:absolute;left:50%;bottom:-104px;width:236px;height:236px;margin-left:-118px;z-index:2}
.dhero .badge{left:calc(50% + 66px);bottom:-92px;width:80px;height:80px;color:var(--ct)}
.dhero .badge small{color:var(--ct)}

.dmain{max-width:760px;margin:0 auto;padding:118px 16px 0}
.dtitle{text-align:center}
.dtitle h1{font-size:clamp(27px,7.4vw,40px);line-height:1.12;font-weight:800;letter-spacing:-.01em}
.dtitle p{margin:10px auto 0;font-size:15px;line-height:1.6;color:var(--ink2);max-width:38ch}
.stats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:22px;padding:16px 6px}
.stat{text-align:center;position:relative}
.stat + .stat::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:1px;background:var(--line)}
.stat b{display:flex;justify-content:center;align-items:center;gap:4px;min-height:24px;font-size:16px;line-height:1.2;font-weight:700}
.stat > span{display:block;margin-top:2px;font-size:11px;font-weight:500;color:var(--mute)}
.stat .heat{transform:scale(1.25)}
.cookbtn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:60px;margin-top:16px;border-radius:20px;color:#fff;font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;box-shadow:0 18px 30px -18px var(--c3);transition:transform .15s}
.cookbtn svg{width:22px;height:22px}
.cookbtn:active{transform:scale(.98)}

.panel{margin-top:16px;padding:20px 18px 12px}
.panel-h{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.panel-h i{width:12px;height:12px;border-radius:50%;background:linear-gradient(150deg,var(--c1),var(--c3));box-shadow:0 0 0 4px var(--tint);flex:0 0 auto}
.panel-h h2{font-size:17px;line-height:1;font-weight:800;text-transform:uppercase;letter-spacing:.03em}
.panel-h span{margin-left:auto;font-size:12px;color:var(--mute)}
.serv{margin-left:auto;display:flex;align-items:center;gap:2px;padding:4px;border-radius:999px;background:var(--tint)}
.serv button{width:34px;height:34px;border-radius:50%;background:#fff;color:var(--ct);font-size:19px;font-weight:600;line-height:1;display:grid;place-items:center;box-shadow:0 2px 6px -2px rgba(0,0,0,.15)}
.serv button:active{transform:scale(.92)}
.serv span{min-width:76px;text-align:center;font-size:12.5px;font-weight:700;color:var(--ct)}
.serv span.bump{animation:bump .3s}
@keyframes bump{50%{transform:scale(1.15)}}

.ing li{display:flex;align-items:center;gap:12px;padding:12px 0;cursor:pointer}
.ing li + li{border-top:1px solid var(--line)}
.ing .tick{flex:0 0 22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 2px #CDD4CE;display:grid;place-items:center;transition:background .15s}
.ing .lead{flex:1;min-width:0}
.ing .lead b{font-size:14.5px;font-weight:600;color:var(--ink)}
.ing .lead em{color:var(--ct);font-size:14px}
.ing li.done .tick{background:var(--ct);box-shadow:none}
.ing li.done .tick::after{content:"";width:5px;height:10px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg) translate(-1px,-1px)}
.ing li.done b,.ing li.done em{color:#B4BBB5;text-decoration:line-through}
.reset{margin:4px 0 6px;font-size:12.5px;font-weight:500;color:var(--mute);text-decoration:underline;text-underline-offset:3px}

.steps li{position:relative;padding:14px 0 16px 50px;cursor:pointer}
.steps li + li{border-top:1px solid var(--line)}
.step-n{position:absolute;left:0;top:13px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:14px;font-weight:700;background:linear-gradient(150deg,var(--c1),var(--c3));box-shadow:0 6px 12px -6px var(--c3)}
.step-t{display:block;font-size:15px;line-height:1.62;color:var(--ink)}
.steps li.done .step-n{background:var(--line);color:var(--mute);box-shadow:none}
.steps li.done .step-t{color:#ACB3AD}
.tbtn{display:inline-flex;align-items:center;gap:7px;margin-top:10px;height:34px;padding:0 14px;border-radius:999px;background:var(--tint);color:var(--ct);font-size:12.5px;font-weight:700}
.tbtn svg{width:15px;height:15px;stroke:currentColor}
.tbtn.run{background:var(--ct);color:#fff}

.tip{margin-top:16px;padding:20px 20px 20px 22px;border-radius:26px 26px 26px 6px;background:var(--tint);position:relative;overflow:hidden}
.tip::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:linear-gradient(180deg,var(--c1),var(--c3))}
.tip h3{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--ct);margin-bottom:6px}
.tip p{font-size:14.5px;line-height:1.6;color:var(--ink)}
.more{margin-top:16px}
.more .sec-h h2{font-size:16px}

/* ===== Timer pill / toast / cook mode (fixed layer) ===== */
.pill{position:fixed;right:14px;bottom:calc(92px + env(safe-area-inset-bottom));z-index:2147483000;display:flex;align-items:center;gap:10px;height:54px;padding:0 7px 0 18px;border-radius:999px;color:#fff;font-family:var(--head);
  background:linear-gradient(150deg,var(--g1),var(--g2) 55%,var(--g3));box-shadow:0 16px 30px -12px rgba(30,70,20,.6);animation:pop .35s cubic-bezier(.3,1.5,.5,1)}
.pill b{font-size:21px;font-weight:800;font-variant-numeric:tabular-nums;min-width:58px}
.pill small{font-size:12px;opacity:.92;max-width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pill button{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.22);color:#fff;font-size:19px}
.pill.done{background:linear-gradient(150deg,var(--r1),var(--r2) 55%,var(--r3));animation:ring .6s ease-in-out infinite alternate}
.toast{position:fixed;left:50%;top:calc(16px + env(safe-area-inset-top));transform:translateX(-50%);z-index:2147483001;background:var(--ink);color:#fff;padding:12px 20px;border-radius:999px;font:600 14px/1.2 var(--head);box-shadow:0 12px 26px -12px rgba(0,0,0,.5);animation:pop .3s both;white-space:nowrap}

.cook{position:fixed;inset:0;z-index:2147482999;background:#fff;color:var(--ink);font-family:var(--head);display:flex;flex-direction:column;overflow:hidden;animation:fade .25s both}
.cook-bg{position:absolute;left:-15%;top:-170px;width:130%;height:350px;border-radius:0 0 50% 50%;z-index:0}
.cook-top,.cook-dots,.cook-body,.cook-nav,.cook-note{position:relative;z-index:1}
.cook-top{display:flex;align-items:center;gap:12px;padding:calc(16px + env(safe-area-inset-top)) 18px 0;color:#fff}
.cook-top b{flex:1;font-size:15px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cook-dots{display:flex;gap:5px;padding:16px 18px 0}
.cook-dots i{flex:1;height:5px;border-radius:5px;background:rgba(255,255,255,.35)}
.cook-dots i.on{background:#fff}
.cook-body{flex:1;overflow-y:auto;display:flex;flex-direction:column;justify-content:center;padding:80px 26px 20px;max-width:720px;width:100%;margin:0 auto}
.cook-n{width:68px;height:68px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:28px;font-weight:800;margin-bottom:20px;box-shadow:0 14px 24px -12px var(--c3)}
.cook-s{font-size:clamp(21px,5.8vw,30px);line-height:1.48;font-weight:500;animation:stepin .35s both}
.cook-body .tbtn{align-self:flex-start;margin-top:22px;height:48px;padding:0 20px;font-size:15px}
.cook-nav{display:flex;gap:10px;padding:0 18px calc(18px + env(safe-area-inset-bottom));max-width:720px;width:100%;margin:0 auto}
.cook-nav button{flex:1;height:60px;border-radius:20px;font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.cook-prev{background:var(--bg);color:var(--ink)}
.cook-next{color:#fff;box-shadow:0 14px 24px -14px var(--c3)}
.cook-note{text-align:center;font-size:12px;color:var(--mute);padding:0 0 8px}
.cook .pill{bottom:calc(100px + env(safe-area-inset-bottom))}

@keyframes ring{to{transform:translateY(-4px)}}
@keyframes fade{from{opacity:0}}
@keyframes stepin{from{opacity:0;transform:translateX(14px)}}
@keyframes rise{from{opacity:0;transform:translateY(18px) scale(.92)}}
.intro .cluster a{animation:rise .7s cubic-bezier(.2,.9,.3,1.2) both}
.intro .cluster a:nth-child(1){animation-delay:.1s}
.intro .cluster a:nth-child(2){animation-delay:.22s}
.intro .cluster a:nth-child(3){animation-delay:.34s}
.dish-in{animation:rise .55s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes pop{from{transform:translateX(var(--tx,0)) scale(.6);opacity:0}}
.toast{--tx:-50%}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ===== Standalone app mode ===== */
:host(.fr-inapp) .app{padding-bottom:calc(40px + env(safe-area-inset-bottom))}
:host(.fr-inapp) .pill{bottom:calc(20px + env(safe-area-inset-bottom))}
.appbar{position:sticky;top:0;z-index:50;height:calc(60px + env(safe-area-inset-top));margin-bottom:calc(-60px - env(safe-area-inset-top));padding-top:env(safe-area-inset-top);color:#fff;transition:background .25s,box-shadow .25s,color .25s}
.ab-in{display:flex;align-items:center;gap:8px;height:60px;max-width:1080px;margin:0 auto;padding:0 12px}
.ab-sp{flex:1}
.ab-logo{display:inline-flex;align-items:center;height:44px;padding:0 4px;color:#fff;transition:color .25s}
.mark{display:block;height:32px;aspect-ratio:480/110;background:currentColor;-webkit-mask:var(--mark) left center/contain no-repeat;mask:var(--mark) left center/contain no-repeat;filter:drop-shadow(0 2px 6px rgba(0,40,0,.25))}
.appbar.solid .ab-logo{color:#E3262C}
.appbar.solid .mark{filter:none}
.ab-btn{position:relative;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.2);backdrop-filter:blur(8px);color:inherit;flex:0 0 auto;transition:background .2s,transform .15s}
.ab-btn:active{transform:scale(.92)}
.ab-btn svg{width:21px;height:21px}
.ab-btn sup{position:absolute;top:-3px;right:-3px;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:#fff;color:var(--rt);font-size:11px;font-weight:800;line-height:19px;text-align:center;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.ab-title{flex:0 1 auto;min-width:0;margin-left:4px;font-size:15.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s}
.ab-title + .ab-sp{flex:1 1 0}
.appbar.solid{background:rgba(255,255,255,.9);backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);color:var(--ink);box-shadow:0 1px 0 rgba(0,0,0,.06),0 8px 24px -16px rgba(0,0,0,.3)}
.appbar.solid .ab-btn{background:var(--bg)}
.appbar.solid .ab-btn sup{background:var(--r2);color:#fff}
.appbar.solid .ab-title{opacity:1;transform:none}
.heart.on svg{fill:currentColor}
.ab-btn.heart.on{color:#fff;background:var(--r1)}
.appbar.solid .ab-btn.heart.on{color:#fff;background:var(--r1)}
.glass.heart.on{background:#fff;color:var(--r1)}
.bar > span{display:flex;gap:8px}
:host(.fr-inapp) .hero-in{padding-top:calc(78px + env(safe-area-inset-top))}
:host(.fr-inapp) .dhero{padding-top:calc(64px + env(safe-area-inset-top))}
.chip.saved svg{width:16px;height:16px;color:var(--r1)}
.chip.saved.on svg{color:#fff;fill:#fff}
:host(.fr-inapp) .toast{top:auto;bottom:calc(24px + env(safe-area-inset-bottom))}
:host(.fr-inapp) .cook ~ .toast,:host(.fr-inapp) .layer:has(.cook) .toast{bottom:calc(96px + env(safe-area-inset-bottom))}