:root{
  --bg:#f4f5f7;--surface:#fff;--surface-2:#f0f1f4;--ink:#1c1d21;--muted:#5d6169;--line:#e7e8ec;--edge:#8a8e96;
  --brand:#c9361a;--on-brand:#fff;--brand-ink:#a82c12;--brand-soft:#fde8e1;--brand-grad:linear-gradient(135deg,#c9361a,#a82c12);
  --green:#157a45;--on-green:#fff;--green-soft:#e3f4ea;--green-ink:#11643a;
  --st-open-bg:#e3f4ea;--st-open-ink:#11643a;--st-out-bg:#fdf3cf;--st-out-ink:#5a4300;--st-no-bg:#fde8e8;--st-no-ink:#7f1d1d;
  --shadow:0 1px 2px rgb(20 20 30/.05),0 6px 20px rgb(20 20 30/.07);--shadow-lg:0 12px 32px rgb(20 20 30/.22);
  --ease:cubic-bezier(.2,.8,.2,1);--spring:cubic-bezier(.2,1.4,.35,1);--focus:#2563eb;color-scheme:light}
[data-mode="dark"]{
  --bg:#0f1012;--surface:#1a1b1f;--surface-2:#24262b;--ink:#f2f2f4;--muted:#a3a7ae;--line:#2b2d33;--edge:#6d7179;
  --brand:#ff6a4d;--on-brand:#1a0703;--brand-ink:#ff8a72;--brand-soft:#3a1710;--brand-grad:linear-gradient(135deg,#ff7a55,#ff5a45);
  --green:#3fbf7f;--on-green:#04130b;--green-soft:#11291c;--green-ink:#6fd39e;
  --st-open-bg:#11291c;--st-open-ink:#86efac;--st-out-bg:#2a2207;--st-out-ink:#fde68a;--st-no-bg:#2c0e0e;--st-no-ink:#fca5a5;
  --shadow:0 1px 2px rgb(0 0 0/.5);--shadow-lg:0 12px 32px rgb(0 0 0/.7);color-scheme:dark}
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%}
body{font-family:'Plus Jakarta Sans','Mukta',system-ui,-apple-system,'Segoe UI',sans-serif;background:#d9d9dd;color:#1c1d21;line-height:1.45;-webkit-font-smoothing:antialiased}
[data-mode="dark"] body{background:#050506;color:#f2f2f4}
button,input,textarea{font:inherit;color:inherit}
img{display:block;max-width:100%}
:where(a,button,input,textarea,[tabindex]):focus-visible{outline:3px solid var(--focus);outline-offset:2px}
[hidden]{display:none !important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
[lang="hi"]{font-family:'Mukta',system-ui,sans-serif}

/* ---------- motion ---------- */
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes popIn{0%{opacity:0;transform:scale(.4)}70%{opacity:1;transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.28)}100%{transform:scale(1)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes steamRise{0%{opacity:0;transform:translateY(6px) scaleY(.5)}25%{opacity:.95}70%{opacity:.55}100%{opacity:0;transform:translateY(-30px) scaleY(1.25) skewX(8deg)}}
@keyframes twinkle{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1.15)}}
@keyframes sunrise{0%,100%{transform:translateY(2px)}50%{transform:translateY(-2px)}}
@keyframes rays{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes lid{0%,82%,100%{transform:rotate(0)}86%{transform:rotate(-7deg) translateY(-2px)}92%{transform:rotate(5deg)}}
@keyframes wheel{to{transform:rotate(360deg)}}
@keyframes speed{0%{opacity:0;transform:translateX(6px)}50%{opacity:1}100%{opacity:0;transform:translateX(-10px)}}
@keyframes swing{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(10deg)}}
@keyframes drift{0%{transform:translateX(-40px)}100%{transform:translateX(420px)}}
@keyframes burst{0%{opacity:1;transform:translate(0,0) scale(.6) rotate(0)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1) rotate(var(--r))}}
@keyframes toastIn{from{transform:translate(-50%,20px);opacity:0}to{transform:translate(-50%,0);opacity:1}}
@keyframes flicker{0%,100%{transform:scale(1,1) skewX(0)}25%{transform:scale(.92,1.08) skewX(-4deg)}50%{transform:scale(1.05,.95) skewX(3deg)}75%{transform:scale(.96,1.06) skewX(-2deg)}}
@keyframes glow{0%,100%{opacity:.14}50%{opacity:.3}}
@keyframes melt{0%,100%{transform:translateY(0)}50%{transform:translateY(1px)}}
@keyframes tagIn{from{opacity:0;transform:translateY(10px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
@keyframes sceneIn{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:none}}
@keyframes pinBounce{0%,100%{transform:translateY(0)}30%{transform:translateY(-4px)}50%{transform:translateY(0)}65%{transform:translateY(-2px)}}
@keyframes ringIn{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes ctlIn{0%{transform:translate(-50%,6px) scale(.7);opacity:0}100%{transform:translate(-50%,0) scale(1);opacity:1}}
@keyframes tick{0%{transform:translateY(-60%);opacity:0}100%{transform:none;opacity:1}}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}
.anim-steam path{animation:steamRise 2.4s ease-out infinite;transform-box:fill-box;transform-origin:center bottom}
.anim-steam path:nth-child(2){animation-delay:.8s}.anim-steam path:nth-child(3){animation-delay:1.6s}
.anim-spin{animation:spin 14s linear infinite;transform-box:fill-box;transform-origin:center}
.anim-rays{animation:rays 2.4s ease-in-out infinite}
.anim-rise{animation:sunrise 3s ease-in-out infinite;transform-box:fill-box}
.anim-twinkle{animation:twinkle 2.2s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.anim-lid{animation:lid 3.2s ease-in-out infinite;transform-box:fill-box;transform-origin:20% 100%}
.anim-wheel{animation:wheel .8s linear infinite;transform-box:fill-box;transform-origin:center}
.anim-speed line{animation:speed 1s linear infinite}
.anim-speed line:nth-child(2){animation-delay:.33s}.anim-speed line:nth-child(3){animation-delay:.66s}
.anim-swing{animation:swing 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 0}
.anim-bob{animation:bob 1.8s ease-in-out infinite}

/* ---------- page frame ---------- */
.stage{display:flex;justify-content:center;min-height:100vh}
@media (min-width:461px){.stage{padding:24px 0}.app{min-height:calc(100vh - 48px)}}
.app{position:relative;width:100%;max-width:440px;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;border-radius:34px;overflow:clip;background:var(--bg);color:var(--ink);box-shadow:0 24px 60px rgb(0 0 0/.28)}
@media (max-width:460px){.stage{padding:0}.app{border-radius:0;max-width:none;min-height:100vh;min-height:100dvh;box-shadow:none}}
.views{flex:1;padding:12px 14px 18px}
.reveal{animation:rise .6s var(--ease) both;animation-delay:calc(var(--i,0) * 70ms)}
.ready .reveal{animation:none}
.press{transition:transform .18s var(--spring)}
.press:active{transform:scale(.94)}

/* ---------- header ---------- */
.hdr{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.loc{flex:1;min-width:0;display:flex;align-items:center;gap:8px;min-height:48px;padding:0;border:0;background:none;color:var(--ink);text-align:left;cursor:pointer}
.loc .pin{flex:none;width:30px;height:30px;color:var(--brand);animation:pinBounce 2.6s var(--ease) infinite}
.loc b{display:flex;align-items:center;gap:4px;font-weight:800;font-size:1.02rem;line-height:1.15}
.loc b svg{width:16px;height:16px}
.loc small{display:block;color:var(--muted);font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.loc span{min-width:0}
.icon-btn{flex:none;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow)}
.icon-btn svg{width:22px;height:22px}
[data-mode="dark"] .icon-btn .i-moon,:root:not([data-mode="dark"]) .icon-btn .i-sun{display:none}
.icon-btn.speaking{background:var(--brand);color:var(--on-brand);border-color:var(--brand)}
.icon-btn.speaking .wave{animation:rays .6s ease-in-out infinite}

/* ---------- hero: real photo + soft steam ---------- */
:root{--steam1:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 200'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='1' x2='0' y2='0'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='.25' stop-color='%23fff' stop-opacity='.95'/%3E%3Cstop offset='.7' stop-color='%23fff' stop-opacity='.45'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cfilter id='f' x='0' y='0' width='120' height='200' filterUnits='userSpaceOnUse'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.03 .016' numOctaves='3' seed='3'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='34'/%3E%3CfeGaussianBlur stdDeviation='4'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M60 194C44 160 76 130 60 100S44 44 62 8' stroke='url(%23g)' stroke-width='14' fill='none' stroke-linecap='round' filter='url(%23f)'/%3E%3C/svg%3E");--steam2:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 200'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='1' x2='0' y2='0'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='.25' stop-color='%23fff' stop-opacity='.95'/%3E%3Cstop offset='.7' stop-color='%23fff' stop-opacity='.45'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cfilter id='f' x='0' y='0' width='120' height='200' filterUnits='userSpaceOnUse'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.03 .016' numOctaves='3' seed='8'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='34'/%3E%3CfeGaussianBlur stdDeviation='4'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M60 194C74 160 46 130 60 100S74 44 62 8' stroke='url(%23g)' stroke-width='14' fill='none' stroke-linecap='round' filter='url(%23f)'/%3E%3C/svg%3E");--steam3:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 200'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='1' x2='0' y2='0'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='.25' stop-color='%23fff' stop-opacity='.95'/%3E%3Cstop offset='.7' stop-color='%23fff' stop-opacity='.45'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cfilter id='f' x='0' y='0' width='120' height='200' filterUnits='userSpaceOnUse'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.03 .016' numOctaves='3' seed='15'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='34'/%3E%3CfeGaussianBlur stdDeviation='4'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M60 194C50 160 70 130 60 100S50 44 62 8' stroke='url(%23g)' stroke-width='14' fill='none' stroke-linecap='round' filter='url(%23f)'/%3E%3C/svg%3E")}
@keyframes wisp{0%{opacity:0;transform:translateY(16px) scale(.5,.4)}30%{opacity:var(--wo,.4)}70%{opacity:calc(var(--wo,.4) * .5)}100%{opacity:0;transform:translate(6px,-22px) scale(1,1.1)}}
@keyframes kenburns{0%{transform:scale(1.02) translate(0,0)}100%{transform:scale(1.1) translate(-1.5%,-1%)}}
@keyframes plateBob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-4px) rotate(2deg)}}
.wisp{position:absolute;width:60px;height:104px;margin:-98px 0 0 -30px;pointer-events:none;z-index:2;--wo:.4}
.wisp i{position:absolute;inset:0;background:var(--steam1) center bottom/contain no-repeat;opacity:0;transform-origin:50% 100%;animation:wisp 5.2s ease-out infinite;animation-duration:calc(5.2s - var(--p,0) * 2s)}
.wisp i:nth-child(2){background-image:var(--steam2);animation-delay:2.6s}
.wisp i:nth-child(3){background-image:var(--steam3);animation-delay:2.5s}
.wisp.sm{width:50px;height:84px;margin:-76px 0 0 -25px}
.on-light .wisp i{filter:drop-shadow(0 0 2px rgb(70 45 20/.2))}
.hero{position:relative;overflow:hidden;border-radius:26px;color:#fff;box-shadow:var(--shadow);--p:0}
.hero .photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:kenburns 18s ease-in-out infinite alternate}
.hero-top{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 12px 0}
.brandchip{display:inline-flex;align-items:center;gap:8px;padding:4px 12px 4px 4px;border-radius:999px;background:rgb(255 255 255/.92);color:#1b1a16;font-weight:800;font-size:.82rem;line-height:1.1;box-shadow:0 2px 8px rgb(0 0 0/.15)}
.brandchip i{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--brand-grad);color:#fff;font-style:normal;font-weight:800}
.brandchip small{display:block;font-weight:500;font-size:.7rem;color:#4a4a44}
.stpill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 4px;border-radius:999px;background:var(--st-bg);color:var(--st-ink);font-weight:800;font-size:.78rem;line-height:1.1;box-shadow:0 2px 8px rgb(0 0 0/.15)}
.stpill svg{width:30px;height:26px}
[data-status="open"]{--st-bg:var(--st-open-bg);--st-ink:var(--st-open-ink)}
[data-status="out"]{--st-bg:var(--st-out-bg);--st-ink:var(--st-out-ink)}
[data-status="closed"]{--st-bg:var(--st-no-bg);--st-ink:var(--st-no-ink)}
.tagline{position:relative;z-index:3;animation:tagIn .9s var(--ease) both}
.tg-en{font-weight:800;font-size:1.6rem;line-height:1.05;letter-spacing:-.025em}
.tg-hi{font-size:.95rem;margin-top:6px;font-weight:500}
/* A · Banner: the photo fills the card, text on a dark scrim */
.hero.hv-a{min-height:360px}
.hero.hv-a::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgb(12 8 4/.84) 0%,rgb(12 8 4/.74) 44%,rgb(12 8 4/0) 68%,rgb(12 8 4/0) 84%,rgb(12 8 4/.35) 100%)}
.hv-a .tagline{padding:14px 16px 0;text-shadow:0 1px 10px rgb(0 0 0/.45)}
.hv-a .tg-en span{color:#ffc58f}
.hv-a .wisp{z-index:2}
/* B · Window: text on a warm panel, the photo below; steam escapes out of the photo */
.hero.hv-b{background:var(--hb-bg);color:var(--hb-ink)}
.hv-b[data-meal="breakfast"]{--hb-bg:linear-gradient(180deg,#fde9cf,#fbf3e8);--hb-ink:#2a1c0c;--hb-accent:#9a2e0b}
.hv-b[data-meal="lunch"]{--hb-bg:linear-gradient(180deg,#fde4d6,#fbf1ea);--hb-ink:#2a160c;--hb-accent:#9a2e0b}
.hv-b[data-meal="dinner"]{--hb-bg:linear-gradient(180deg,#1b1f3a,#2a2547);--hb-ink:#fff;--hb-accent:#ffc58f}
[data-mode="dark"] .hv-b:not([data-meal="dinner"]){--hb-bg:linear-gradient(180deg,#2a1d12,#1d1712);--hb-ink:#fff;--hb-accent:#ffc58f}
.hv-b .tagline{padding:14px 16px 4px}
.hv-b .tg-en span{color:var(--hb-accent)}
.hv-b .frame{position:relative;margin:30px 10px 10px;aspect-ratio:2/1;border-radius:20px}
.hv-b .frame .clip{position:absolute;inset:0;border-radius:20px;overflow:hidden;box-shadow:0 10px 24px rgb(40 20 0/.28)}
.hv-b .frame .photo{position:absolute}
/* C · Plate: a round photo plate that floats over the card edge */
.hero.hv-c{min-height:330px;background:var(--hb-bg);color:var(--hb-ink)}
.hv-c[data-meal="breakfast"]{--hb-bg:radial-gradient(120% 90% at 100% 100%,#f7c58a,#fdebd3 60%);--hb-ink:#2a1c0c;--hb-accent:#9a2e0b}
.hv-c[data-meal="lunch"]{--hb-bg:radial-gradient(120% 90% at 100% 100%,#f4b48f,#fde6d8 60%);--hb-ink:#2a160c;--hb-accent:#9a2e0b}
.hv-c[data-meal="dinner"]{--hb-bg:radial-gradient(120% 90% at 100% 100%,#4a3a6e,#171a33 62%);--hb-ink:#fff;--hb-accent:#ffc58f}
[data-mode="dark"] .hv-c:not([data-meal="dinner"]){--hb-bg:radial-gradient(120% 90% at 100% 100%,#5a3418,#1d1712 62%);--hb-ink:#fff;--hb-accent:#ffc58f}
.hv-c .tagline{padding:16px 16px 0;max-width:60%}
.hv-c .tg-en{font-size:1.3rem}
.hv-c .tg-en span{color:var(--hb-accent)}
.hv-c .plate{position:absolute;right:-54px;bottom:-54px;width:236px;height:236px;z-index:2;animation:plateBob 6s ease-in-out infinite}
.hv-c .plate .clip{position:absolute;inset:0;border-radius:50%;overflow:hidden;box-shadow:0 18px 40px rgb(30 10 0/.45),0 0 0 7px rgb(255 255 255/.9),0 0 0 8px rgb(0 0 0/.08)}
.hv-c .plate .photo{position:absolute}
.hv-c .plate .wisp{z-index:3}
.hv-c .badge-free{position:relative;z-index:3;display:inline-flex;align-items:center;gap:6px;margin:14px 16px 16px;padding:6px 12px;border-radius:999px;background:rgb(255 255 255/.9);color:#11643a;font-weight:800;font-size:.8rem}
.hv-c .badge-free svg{width:16px;height:16px}
[data-fresh="0"] .tagline,[data-fresh="0"] .mc-ring,[data-fresh="0"] .count i{animation:none}
.d-img .wisp{left:50%;top:22px}

/* ---------- meal circles ---------- */
.sh2{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin:18px 2px 10px;font-weight:800;font-size:1.08rem;letter-spacing:-.01em}
.sh2 span{font-weight:500;color:var(--muted);font-size:.85rem}
.meals{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:8px}
.mc{display:grid;justify-items:center;gap:4px;padding:0;border:0;background:none;color:var(--ink);cursor:pointer;font-weight:700;font-size:.88rem;line-height:1.1}
.mc .circ{position:relative;width:78px;height:78px;border-radius:50%;display:grid;place-items:center;background:var(--surface);box-shadow:var(--shadow);transition:transform .35s var(--spring)}
.mc .circ svg{width:50px;height:42px}
.mc .mc-ring{position:absolute;inset:-5px;border-radius:50%;border:3px solid var(--brand);animation:ringIn .45s var(--spring) both}
.mc small{font-weight:500;font-size:.72rem;color:var(--muted)}
.mc[aria-pressed="true"]{font-weight:800}
.mc[aria-pressed="true"] .circ{transform:scale(1.04)}
.mc[aria-pressed="true"] small{color:var(--brand-ink);font-weight:700}
.mc:disabled{cursor:not-allowed;opacity:.5}
.mc:disabled .circ{filter:grayscale(1)}

/* ---------- restaurant-style info card ---------- */
.info{margin-top:16px;padding:14px;border-radius:22px;background:var(--surface);box-shadow:var(--shadow)}
.info-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.info h2{font-weight:800;font-size:1.35rem;letter-spacing:-.02em;line-height:1.15}
.info h2 small{display:block;font-weight:500;font-size:.88rem;color:var(--muted);letter-spacing:0}
.badge-time{flex:none;display:grid;justify-items:center;padding:6px 10px;border-radius:12px;background:var(--green);color:var(--on-green);font-weight:800;font-size:.85rem;line-height:1.1;box-shadow:0 4px 12px rgb(21 122 69/.25)}
.badge-time small{font-weight:600;font-size:.68rem;opacity:.95}
.badge-time.off{background:var(--surface-2);color:var(--muted);box-shadow:none}
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-top:8px;color:var(--muted);font-weight:600;font-size:.85rem}
.meta b{color:var(--ink);font-weight:800}
.meta i{width:4px;height:4px;border-radius:50%;background:var(--edge)}
.meta .free{color:var(--green-ink);font-weight:800}
.divider{height:0;border-top:1.5px dashed var(--line);margin:12px 0}
.plates{display:flex;align-items:center;justify-content:space-between;gap:10px}
.plates p{font-weight:800}
.plates p small{display:block;font-weight:500;font-size:.8rem;color:var(--muted)}
.platevis{display:inline-flex;align-items:flex-end;height:18px;margin-left:6px;vertical-align:middle}
.platevis span{width:28px;height:10px;margin-left:-12px;border-radius:50%;background:radial-gradient(ellipse at 50% 35%,#fff 0 40%,#d5dde0 42% 60%,#9aa7ad 62%);box-shadow:0 2px 3px rgb(0 0 0/.18);animation:popIn .45s var(--spring) both}
.platevis span:first-child{margin-left:0}
.platevis em{font-style:normal;font-weight:800;margin-left:4px;color:var(--muted);font-size:.8rem}

/* ---------- steppers ---------- */
.qtybtn{flex:none;display:inline-flex;align-items:center;height:44px;border-radius:12px;border:1.5px solid var(--line);background:var(--surface);color:var(--brand-ink);box-shadow:var(--shadow);overflow:hidden}
.qtybtn button{width:44px;height:100%;border:0;background:none;color:var(--brand-ink);font-size:1.35rem;font-weight:800;cursor:pointer;line-height:1}
.qtybtn button:disabled{color:var(--edge);cursor:not-allowed}
.qtybtn output{min-width:26px;text-align:center;font-weight:800;font-size:1.05rem;color:var(--ink);font-variant-numeric:tabular-nums}
.qtybtn output.bump{animation:bump .35s var(--spring)}

/* ---------- plate list ---------- */
.sw{display:inline-flex;align-items:center;gap:8px;min-height:44px;border:0;background:none;color:var(--ink);font-weight:700;font-size:.88rem;cursor:pointer;padding:0}
.switch{position:relative;width:46px;height:28px;border-radius:999px;background:var(--edge);transition:background-color .25s}
.switch i{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgb(0 0 0/.3);transition:transform .35s var(--spring)}
[aria-checked="true"] .switch{background:var(--brand)}
[aria-checked="true"] .switch i{transform:translateX(18px)}
.dishes{list-style:none;padding:0;border-radius:22px;background:var(--surface);box-shadow:var(--shadow)}
.dish{display:grid;grid-template-columns:minmax(0,1fr) 124px;gap:14px;padding:16px 14px 22px;border-top:1px dashed var(--line);transition:background-color .3s}
.dish:first-child{border-top:0}
.dish.changed{background:linear-gradient(90deg,var(--brand-soft),transparent 80%)}
.dish:first-child.changed{border-radius:22px 22px 0 0}
.tag{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:6px;font-weight:800;font-size:.68rem;letter-spacing:.04em;text-transform:uppercase;background:var(--surface-2);color:var(--muted)}
.tag.special{background:linear-gradient(90deg,#fff2c2,#ffe08a);color:#6b4200}
.tag svg{width:12px;height:12px}
.dish h3{font-weight:800;font-size:1.05rem;line-height:1.2;margin-top:6px;overflow-wrap:break-word}
.dish .hi{color:var(--muted);font-size:.9rem}
.usual{margin-top:6px;font-size:.82rem;color:var(--muted);font-weight:600}
.usual b{color:var(--brand-ink);font-weight:800}
.count{display:flex;flex-wrap:wrap;gap:3px;align-items:center;margin-top:8px}
.count i{display:block;width:14px;height:14px;border-radius:50%;animation:popIn .4s var(--spring) both;animation-delay:calc(var(--k) * 45ms)}
.count i.roti{background:radial-gradient(circle at 40% 35%,#f0d29b,#c9924e);box-shadow:inset 0 0 0 1px rgb(120 70 20/.35)}
.count i.rice{background:radial-gradient(circle at 40% 35%,#fff,#e2d8c2);box-shadow:inset 0 0 0 1px rgb(120 110 90/.4)}
.count i.curry{background:radial-gradient(circle at 40% 35%,#d8642f,#8e3418);box-shadow:inset 0 0 0 1px rgb(80 20 10/.4)}
.count i.others{background:radial-gradient(circle at 40% 35%,#9fd27a,#4f8a2c);box-shadow:inset 0 0 0 1px rgb(30 60 10/.4)}
.count i.special{background:radial-gradient(circle at 40% 35%,#ffe08a,#d39b14);box-shadow:inset 0 0 0 1px rgb(110 70 0/.4)}
.count .none{font-size:.78rem;font-weight:700;color:var(--muted)}
.d-img{position:relative;width:124px;height:110px;align-self:start}
.d-img .ph{width:124px;height:110px;border-radius:18px;overflow:hidden;background:var(--surface-2);box-shadow:0 4px 12px rgb(0 0 0/.1)}
.d-img .ph img{width:100%;height:100%;object-fit:cover}
.dish.zero .d-img .ph img{filter:grayscale(1);opacity:.4}
.d-ctl{position:absolute;left:50%;bottom:-16px;transform:translateX(-50%);animation:ctlIn .4s var(--spring) both}
.d-ctl .qtybtn{height:44px}
.d-ctl .qtybtn button{width:44px}
.d-ctl .qtybtn output{min-width:22px}
.d-fixed{display:inline-grid;place-items:center;min-width:76px;height:36px;padding:0 12px;border-radius:12px;background:var(--surface);border:1.5px solid var(--line);box-shadow:var(--shadow);font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.dish.changed .d-fixed{color:var(--brand-ink);border-color:var(--brand)}
.fine{text-align:center;color:var(--muted);font-size:.8rem;margin:12px 0 4px}
.resetbtn{border:0;background:none;color:var(--brand-ink);font-weight:800;cursor:pointer;min-height:44px;padding:0 4px;font-size:.88rem}

/* ---------- dock: book button + tab bar ---------- */
.dock{position:sticky;bottom:0;z-index:5;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:linear-gradient(to top,var(--bg) 70%,transparent)}
.bnav{position:relative;display:grid;grid-template-columns:1fr 1fr;padding:6px;border-radius:24px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}
.bnav-ind{position:absolute;top:6px;bottom:6px;left:6px;width:calc((100% - 12px) / 2);border-radius:18px;background:var(--brand-soft);transform:translateX(calc(var(--idx,0) * 100%));transition:transform .5s var(--spring)}
.bnav button{position:relative;z-index:1;min-height:54px;border:0;background:none;color:var(--muted);display:flex;align-items:center;justify-content:center;gap:8px;font-weight:700;cursor:pointer;line-height:1.1}
.bnav button svg{width:24px;height:24px}
.bnav button small{font-weight:500;font-size:.78rem}
.bnav button[aria-current="page"]{color:var(--brand-ink);font-weight:800}
.bnav button[aria-current="page"] svg{animation:bump .45s var(--spring)}
.burst{position:absolute;left:30px;top:50%;pointer-events:none;z-index:30}
.burst i{position:absolute;width:11px;height:11px;border-radius:3px;animation:burst 1s var(--ease) forwards}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:60;background:#16171a;color:#fff;padding:12px 18px;border-radius:16px;font-weight:700;max-width:calc(100vw - 32px);box-shadow:0 12px 30px rgb(0 0 0/.35);animation:toastIn .35s var(--spring)}
[data-mode="dark"] .toast{background:#f3f4f6;color:#16171a}

/* ---------- checkout (Order tab) ---------- */
.co-title{display:flex;align-items:center;gap:10px;margin:4px 2px 14px}
.co-title h2{font-weight:800;font-size:1.4rem;letter-spacing:-.02em;line-height:1.15}
.co-title h2 small{display:block;font-weight:500;font-size:.85rem;color:var(--muted);letter-spacing:0}
.co-title .mi{width:52px;height:52px;border-radius:16px;background:var(--surface);box-shadow:var(--shadow);display:grid;place-items:center}
.co-title .mi svg{width:38px;height:32px}
.card{background:var(--surface);border-radius:22px;padding:14px;margin-bottom:12px;box-shadow:var(--shadow)}
.card fieldset{border:0;padding:0;margin:0;min-width:0}
.clabel{display:block;font-weight:800;font-size:.95rem;margin-bottom:10px;padding:0}
.clabel span{font-weight:500;color:var(--muted)}
.pick{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:8px}
.pick label{position:relative;display:block}
.pick input{position:absolute;inset:0;opacity:0;margin:0;width:100%;height:100%;cursor:pointer}
.pick input:disabled{cursor:not-allowed}
.pick span{display:grid;justify-items:center;gap:2px;min-height:84px;padding:8px 4px;border-radius:18px;border:2px solid var(--line);background:var(--surface);text-align:center;font-weight:700;color:var(--muted);line-height:1.1;font-size:.85rem;transition:all .3s}
.pick span svg{width:42px;height:34px}
.pick small{font-size:.72rem;font-weight:500}
.pick input:checked+span{border-color:var(--brand);background:var(--brand-soft);color:var(--ink);font-weight:800}
.pick input:disabled+span{opacity:.45}
.pick input:focus-visible+span{outline:3px solid var(--focus);outline-offset:2px}
.field{display:block;font-weight:700;font-size:.92rem}
.field+.field,.err+.field{margin-top:12px}
.field span{font-weight:500;color:var(--muted)}
.field input,.field textarea{display:block;width:100%;margin-top:6px;min-height:52px;padding:12px 14px;border-radius:14px;border:1.5px solid var(--edge);background:var(--surface);color:var(--ink);font-weight:500;resize:vertical}
.field input:focus,.field textarea:focus{border-color:var(--ink);box-shadow:0 0 0 4px var(--brand-soft);outline:none}
.err{color:var(--st-no-ink);font-weight:700;font-size:.9rem;margin-top:8px}
.saved{font-size:.8rem;color:var(--muted);margin-top:8px}
.bill p{display:flex;justify-content:space-between;gap:12px;padding:5px 0;color:var(--muted);font-weight:600;font-size:.92rem}
.bill p b{color:var(--ink);font-weight:700}
.bill .free{color:var(--green-ink);font-weight:800}
.bill .tot{color:var(--ink);font-weight:800;font-size:1.15rem;border-top:1.5px dashed var(--line);margin-top:6px;padding-top:10px}
.note{border-radius:16px;padding:12px 14px;font-weight:700;font-size:.92rem;margin-bottom:12px;background:var(--st-bg);color:var(--st-ink)}

/* =====================================================================
   AUDIT REFINEMENTS (Spectrum + HIG) — overrides the rules above
   ===================================================================== */
:root{
  /* type ramp: HIG text style ↔ Spectrum token (A3) */
  --t-large:1.75rem;   /* 28 · HIG Title 1 · Spectrum heading L */
  --t-title2:1.375rem; /* 22 · HIG Title 2 · Spectrum heading M */
  --t-title3:1.25rem;  /* 20 · HIG Title 3 · Spectrum title XL */
  --t-head:1.0625rem;  /* 17 · HIG Headline / Body */
  --t-call:1rem;       /* 16 · HIG Callout · Spectrum body M */
  --t-sub:.9375rem;    /* 15 · HIG Subheadline */
  --t-foot:.8125rem;   /* 13 · HIG Footnote · smallest Hindi size */
  --t-cap:.75rem;      /* 12 · HIG Caption 1 · Spectrum body XS · smallest text */
  /* spacing: Spectrum 4/8 scale (S4) */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;
  --r-card:24px;--r-inner:16px;--r-ctl:12px;
  --st-no-bg:#eceef1;--st-no-ink:#3d4148;   /* closed = neutral, not "negative" red (S2) */
  --err:#b42318;
}
[data-mode="dark"]{--st-no-bg:#2a2d33;--st-no-ink:#d7dade;--err:#ff8b80}
body{line-height:1.5}
[lang="hi"]{line-height:1.55}

/* A1 · essential action = one plain button (no custom gesture) */
.bookbtn{display:flex;align-items:center;gap:var(--s3);width:100%;min-height:60px;margin-bottom:var(--s2);padding:var(--s2) var(--s4) var(--s2) var(--s2);border:0;border-radius:var(--s4);background:var(--brand);color:var(--on-brand);text-align:left;cursor:pointer;box-shadow:0 8px 20px rgb(201 54 26/.28);transition:transform .15s var(--ease),filter .15s}
[data-mode="dark"] .bookbtn{box-shadow:0 8px 20px rgb(0 0 0/.5)}
.bookbtn:active{transform:scale(.98);filter:brightness(.95)}
.bookbtn .bi{flex:none;width:44px;height:44px;border-radius:var(--s3);display:grid;place-items:center;background:rgb(255 255 255/.18)}
.bookbtn .bi svg{width:1.5em;height:1.5em}
.bookbtn .bl{flex:1;min-width:0;display:grid;line-height:1.25}
.bookbtn .bl b{font-size:var(--t-head);font-weight:800}
.bookbtn .bl small{font-size:var(--t-foot);font-weight:500;opacity:.95}
.bookbtn .amt{flex:none;font-size:var(--t-title3);font-weight:800;font-variant-numeric:tabular-nums}
.bookbtn:disabled{background:var(--surface-2);color:var(--ink);box-shadow:none;cursor:not-allowed}
.bookbtn:disabled .bi{background:var(--line)}

/* H3 · tab bar: icon above a one-word label, tint for the selected tab, material background */
.bnav{padding:var(--s1);border-radius:var(--r-card);background:color-mix(in srgb,var(--surface) 82%,transparent);-webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6)}
.bnav-ind{display:none}
.bnav button{flex-direction:column;gap:2px;min-height:56px;font-size:var(--t-cap);font-weight:600;line-height:1.2}
.bnav button svg{width:1.6em;height:1.6em;font-size:var(--t-call)}
.bnav button small{font-size:var(--t-foot);font-weight:500}
.bnav button[aria-current="page"]{color:var(--brand-ink);font-weight:800}

/* S1 · one high-attention element per view: only the Book button is filled brand */
.badge-time{background:var(--green-soft);color:var(--green-ink);box-shadow:none;font-size:var(--t-sub);border-radius:var(--s3);padding:var(--s2) var(--s3)}
.badge-time small{font-size:var(--t-cap)}
.mc .mc-ring{border-color:var(--ink);border-width:2.5px}
.mc[aria-pressed="true"] small{color:var(--ink)}
[aria-checked="true"] .switch{background:var(--ink)}
[aria-checked="true"] .switch i{background:var(--surface)}
.pick input:checked+span{border-color:var(--ink);background:var(--surface-2)}

/* S7 · static white components on photos; status = icon + text + colour (A6) */
.hv-a .stpill,.hv-a .brandchip{background:rgb(255 255 255/.94);color:#1b1a16}
.hv-a .stpill[data-status="open"] svg{color:#157a45}
.hv-a .stpill[data-status="out"] svg{color:#8a5a00}
.hv-a .stpill[data-status="closed"] svg{color:#3d4148}
.brandchip i{flex:none}

/* A2 + A3 · type sizes: nothing below 12 px; Hindi never below 13 px */
.tg-en{font-size:var(--t-large);line-height:1.15}
.hv-c .tg-en{font-size:1.5625rem}
.tg-hi{font-size:var(--t-call);line-height:1.5}
.loc b{font-size:var(--t-head)}
.loc small{font-size:var(--t-foot)}
.brandchip{font-size:var(--t-foot);line-height:1.2;padding:var(--s1) var(--s3) var(--s1) var(--s1)}
.brandchip small,.stpill small{font-size:var(--t-foot) !important}
.stpill{font-size:var(--t-foot);line-height:1.2}
.sh2{font-size:var(--t-title3);margin:var(--s5) var(--s1) var(--s3)}
.sh2 span{font-size:var(--t-sub)}
.mc{font-size:var(--t-sub);line-height:1.25}
.mc small{font-size:var(--t-foot)}
.info h2{font-size:var(--t-title2);line-height:1.25}
.info h2 small{font-size:var(--t-sub);line-height:1.45}
.meta{font-size:var(--t-sub);gap:var(--s1) var(--s2)}
.plates p{font-size:var(--t-head)}
.plates p small{font-size:var(--t-foot)}
.platevis em{font-size:var(--t-foot)}
/* S3 · sentence case, no all-caps tags */
.tag{text-transform:none;letter-spacing:0;font-size:var(--t-cap);font-weight:700;padding:2px var(--s2)}
.dish h3{font-size:var(--t-head);line-height:1.3}
.dish .hi{font-size:var(--t-sub)}
.usual{font-size:var(--t-foot)}
.count .none{font-size:var(--t-foot)}
.d-fixed{font-size:var(--t-call)}
.fine,.saved{font-size:var(--t-foot)}
.co-title h2{font-size:var(--t-title2);line-height:1.25}
.co-title h2 small{font-size:var(--t-sub)}
.clabel{font-size:var(--t-head)}
.pick span{font-size:var(--t-sub)}
.pick small{font-size:var(--t-foot)}
.field{font-size:var(--t-sub)}
.field input,.field textarea{font-size:var(--t-head)}   /* ≥16 px also stops iPhone auto-zoom */
.bill p{font-size:var(--t-sub)}
.bill .tot{font-size:var(--t-title3)}
.note{font-size:var(--t-sub);font-weight:600}
.err{display:flex;gap:var(--s2);align-items:flex-start;color:var(--err);font-size:var(--t-sub)}
.err svg{flex:none;width:20px;height:20px;margin-top:2px}
.toast{font-size:var(--t-sub)}

/* S4 · spacing on the 4/8 scale; H5 · concentric corners */
.views{padding:var(--s3) var(--s4) var(--s4)}
.hdr{margin-bottom:var(--s4);gap:var(--s2)}
.hero{border-radius:var(--r-card)}
.hero-top{padding:var(--s3) var(--s3) 0}
.hv-a .tagline,.hv-b .tagline{padding:var(--s4) var(--s4) 0}
.hv-b .frame{margin:var(--s6) var(--s2) var(--s2)}
.hv-b .frame .clip{border-radius:var(--r-inner)}
.info,.dishes,.card{border-radius:var(--r-card)}
.info,.card{padding:var(--s4)}
.info{margin-top:var(--s4)}
.meals{gap:var(--s2)}
.dish{gap:var(--s4);padding:var(--s4) var(--s4) var(--s5)}
.d-img .ph{border-radius:var(--r-inner)}
.divider{margin:var(--s3) 0}
.dock{padding:var(--s2) var(--s3) calc(var(--s2) + env(safe-area-inset-bottom))}
.card{margin-bottom:var(--s3)}
.co-title{margin:var(--s1) var(--s1) var(--s4);gap:var(--s3)}

/* A4 · no decorative loops: icons stay still; only the subtle steam moves (Reduce Motion stops it) */
.loc .pin,.hero .photo,.anim-steam path,.anim-spin,.anim-rays,.anim-rise,.anim-twinkle,.anim-lid,.anim-wheel,.anim-speed line,.anim-swing,.anim-bob,.hv-c .plate{animation:none !important}
.hero .photo{transform:none}
.reveal{animation-duration:.35s}


/* =====================================================================
   PRODUCTION ADDITIONS
   ===================================================================== */
/* steam setting from the control panel: brief = 20 s then fade; off = none */
.steam-done .wisp{opacity:0;transition:opacity 2.5s ease}
.steam-done .wisp i{animation-play-state:paused}
/* loading + error + maintenance screens */
.screen{flex:1;display:grid;place-content:center;justify-items:center;gap:var(--s3);padding:var(--s6) var(--s5);text-align:center}
.screen .mono{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;background:var(--brand);color:var(--on-brand);font-weight:800;font-size:2rem}
.screen h1{font-size:var(--t-title2);line-height:1.25}
.screen p{color:var(--muted);font-size:var(--t-call);max-width:30ch}
.screen .btn{min-height:48px;padding:0 var(--s5);border-radius:var(--r-ctl);border:0;background:var(--brand);color:var(--on-brand);font-weight:800;font-size:var(--t-call);cursor:pointer;display:inline-flex;align-items:center;gap:var(--s2);text-decoration:none}
.screen .btn svg{width:22px;height:22px}
.skeleton{flex:1;padding:var(--s4)}
.skeleton i{display:block;border-radius:var(--r-card);background:linear-gradient(90deg,var(--surface-2),var(--surface),var(--surface-2));background-size:200% 100%;animation:skel 1.4s ease-in-out infinite;margin-bottom:var(--s4)}
@keyframes skel{0%{background-position:100% 0}100%{background-position:-100% 0}}
.offline{margin:0 0 var(--s3);padding:var(--s2) var(--s3);border-radius:var(--r-ctl);background:var(--st-out-bg);color:var(--st-out-ink);font-size:var(--t-foot);font-weight:600}
.foot{text-align:center;color:var(--muted);font-size:var(--t-foot);margin:var(--s2) 0 var(--s4)}