:root{--bg:#fff8ef;--card:#fff;--ink:#3b1a0c;--mut:#8a6f5e;--acc:#ff7a00;--acc2:#ff3d00;--yel:#ffc107;--ok:#2f9e44;--line:#f1dfcc;--warn:#f59f00;--brown:#3b1a0c;--sh:0 6px 22px rgba(120,50,0,.10);--grad:linear-gradient(135deg,#ffb300,#ff7a00 55%,#ff3d00);--rate:#f59f00;--rate-ink:#2b1700}
@media(prefers-color-scheme:dark){:root{--bg:#1c110b;--card:#2a1a11;--ink:#fff1e3;--mut:#c4a48e;--line:#4a2e1e;--sh:0 6px 22px rgba(0,0,0,.4)}}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--ink);overflow-x:hidden;word-wrap:break-word;overflow-wrap:anywhere}
img{max-width:100%;height:auto}
body::before{content:"";position:fixed;inset:0 0 auto;height:260px;background:radial-gradient(600px 220px at 85% -40px,rgba(255,122,0,.22),transparent),radial-gradient(500px 200px at 0 -60px,rgba(255,193,7,.25),transparent);pointer-events:none;z-index:-1}
.wrap{width:100%;max-width:720px;margin:0 auto;padding:16px;padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
@media(min-width:768px){.wrap{max-width:960px;padding:24px}}
@media(min-width:1100px){.wrap{max-width:1080px}}
.wrap.narrow{max-width:560px}
h1,h2,h3{margin:.3em 0;letter-spacing:-.01em}.mut{color:var(--mut)}.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.grow{flex:1;min-width:0}
.top{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh);margin-bottom:12px}.top img{height:42px;width:auto}.top h2{margin:0;font-size:18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px;margin:10px 0;box-shadow:var(--sh);animation:up .35s both}
@keyframes up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
input,select,textarea{font:inherit;font-size:16px;padding:11px 12px;border:1.5px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);max-width:100%;transition:.15s}input:focus,select:focus,textarea:focus{outline:0;border-color:var(--acc);box-shadow:0 0 0 3px rgba(255,122,0,.18)}
button,.btn{font:inherit;font-weight:700;padding:10px 16px;border:0;border-radius:10px;background:var(--grad);color:#fff;cursor:pointer;text-decoration:none;display:inline-block;box-shadow:0 4px 12px rgba(255,90,0,.28);transition:.15s;min-height:40px}button:active,.btn:active{transform:scale(.96)}
button:focus-visible,.btn:focus-visible,a:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
button.sec,.btn.sec{background:transparent;color:var(--ink);border:1.5px solid var(--line);box-shadow:none}button.ok{background:linear-gradient(135deg,#51cf66,#2f9e44);box-shadow:none}button.warn{background:linear-gradient(135deg,#ffd43b,#f59f00);color:#3b1a0c;box-shadow:none}button.sm,.btn.sm{padding:6px 10px;font-size:14px;min-height:34px}button:disabled{opacity:.5}
.tabs{display:flex;gap:6px;margin:10px 0;flex-wrap:wrap}.tabs button{background:var(--card);color:var(--ink);border:1.5px solid var(--line);box-shadow:none}.tabs button.on{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 4px 12px rgba(255,90,0,.28)}
.badge{padding:3px 10px;border-radius:99px;font-size:13px;font-weight:600;background:var(--line);color:var(--ink);white-space:nowrap}.badge.new{background:#ffe3d3;color:#c2410c}.badge.preparing{background:#fff1c9;color:#946200}.badge.served{background:#d3f0da;color:#1e6b2e}.badge.cancelled{background:#ffe0e0;color:#c92a2a}
.tno{font-size:30px;font-weight:900;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hidden{display:none!important}.err{color:#e03131}
/* menu items */
.item{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--line)}.item:last-child{border:0}.item.off{opacity:.45}
.item .info{flex:1;min-width:0}
.item .side{flex:none;width:112px;display:flex;flex-direction:column;align-items:center;gap:6px}
.thumb{width:100px;height:100px;border-radius:12px;object-fit:cover;flex:none;background:var(--line)}
.dot{width:14px;height:14px;border:2px solid var(--ok);display:inline-block;border-radius:3px;position:relative;flex:none;vertical-align:middle}.dot::after{content:"";position:absolute;inset:2px;background:var(--ok);border-radius:50%}.dot.nv{border-color:#c92a2a}.dot.nv::after{background:#c92a2a}
.items{display:block}
@media(min-width:768px){.items{display:grid;grid-template-columns:1fr 1fr;column-gap:28px}.items .item:nth-last-child(2):nth-child(odd){border-bottom:0}}
/* highlighted rating */
.rev{display:flex;gap:8px;align-items:flex-start;margin-top:6px;padding:7px 10px;border-radius:10px;background:rgba(245,159,0,.16);border-left:4px solid var(--rate);font-size:13px;line-height:1.35}
.rate{flex:none;display:inline-flex;align-items:center;gap:3px;padding:2px 9px;border-radius:99px;background:var(--rate);color:var(--rate-ink);font-weight:800;font-size:13px;box-shadow:0 2px 6px rgba(245,159,0,.45)}
.rev .rt{min-width:0}
.chips{display:flex;gap:8px;overflow-x:auto;padding:8px 0;position:sticky;top:0;background:var(--bg);z-index:5;scrollbar-width:none;-webkit-overflow-scrolling:touch}.chips::-webkit-scrollbar{display:none}.chips a{flex:none;padding:7px 14px;border-radius:99px;background:var(--card);border:1.5px solid var(--line);color:var(--ink);text-decoration:none;font-weight:600;font-size:14px}
/* QR cards */
.qrgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
@media(max-width:520px){.qrgrid{grid-template-columns:1fr;max-width:340px;margin:0 auto}}
.qrc{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;border:2px dashed var(--acc);border-radius:16px;padding:16px 12px;background:#fff;color:#3b1a0c;overflow:hidden;min-width:0}
.qrc img.lg{height:44px;width:auto;max-width:70%;object-fit:contain;display:block;margin:0 auto}
.qrc .nm{font-weight:700;line-height:1.2}
.qrc .q{display:flex;justify-content:center;align-items:center;width:176px;height:176px;max-width:100%;padding:8px;background:#fff;border-radius:8px}
.qrc .q canvas,.qrc .q img{display:block;width:100%!important;height:100%!important;max-width:100%}
.qrc .q img+canvas,.qrc .q canvas+img{display:none}
.qrc .tb{font-size:22px;font-weight:800;line-height:1}.qrc .tg{font-size:13px}
.cartbar{position:fixed;left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));max-width:640px;margin:0 auto;background:var(--brown);color:#fff;border-radius:16px;padding:12px 16px;display:flex;justify-content:space-between;align-items:center;gap:10px;box-shadow:0 10px 30px rgba(0,0,0,.35);z-index:9}.cartbar .mut{color:#ffcf99}
.qty{display:flex;align-items:center;gap:6px}.qty button{padding:4px 12px;min-height:34px}
/* GST variant rows */
.var{display:flex;align-items:center;justify-content:space-between;gap:6px;width:100%}
.var .lb{font-size:11px;font-weight:700;color:var(--mut);line-height:1.1;text-align:left}
.var .lb.g{color:#c2410c}
.var button{padding:4px 10px;font-size:13px;min-height:32px}
.var .qty button{padding:2px 9px}
.modal{position:fixed;inset:0;background:rgba(30,10,0,.55);z-index:40;overflow:auto;padding:12px;backdrop-filter:blur(3px)}.modal .card{max-width:520px;margin:20px auto}
/* hero / centred logo */
.hero{text-align:center;padding:26px 0 8px}.hero img{width:min(78%,420px);animation:pop .7s both}@keyframes pop{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}
.brand{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:14px 0 10px}
.brand img{width:min(58vw,240px);max-height:34vh;object-fit:contain;animation:pop .6s both}
.brand h1{font-size:clamp(22px,5vw,32px);margin:4px 0 0}
.brand .tag{font-size:13px}
/* order sheet */
#sheet{position:fixed;inset:0;background:var(--bg);overflow:auto;z-index:30;-webkit-overflow-scrolling:touch}
#sheet .wrap{padding-bottom:140px}
.bill{display:flex;justify-content:space-between;gap:10px;padding:4px 0}.bill.tot{border-top:2px solid var(--line);margin-top:6px;padding-top:8px;font-size:19px;font-weight:800}
.big{font-size:56px;font-weight:900;font-variant-numeric:tabular-nums;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;text-align:center}
.steps{display:flex;justify-content:space-between;margin:14px 0;gap:6px}.steps div{flex:1;text-align:center;font-size:13px;color:var(--mut)}.steps i{display:block;height:6px;border-radius:9px;background:var(--line);margin-bottom:6px}.steps .on{color:var(--ink);font-weight:700}.steps .on i{background:var(--grad)}
/* live timer box */
.timer{position:relative;overflow:hidden;border-radius:20px;border:3px solid var(--acc);background:var(--card);padding:18px 12px 20px;margin:14px 0;text-align:center;animation:tpulse 1.6s ease-in-out infinite}
@keyframes tpulse{0%,100%{box-shadow:0 0 0 0 rgba(255,122,0,.45)}50%{box-shadow:0 0 0 12px rgba(255,122,0,0)}}
.timer .tfill{position:absolute;left:0;top:0;bottom:0;width:100%;background:linear-gradient(90deg,rgba(255,179,0,.28),rgba(255,61,0,.22));transform-origin:left;transition:transform 1s linear;z-index:0}
.timer .tfill::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(-100%);animation:shine 2.2s infinite}
@keyframes shine{to{transform:translateX(100%)}}
.timer>*:not(.tfill){position:relative;z-index:1}
.timer .tl{display:flex;align-items:center;justify-content:center;gap:8px;font-weight:800;font-size:15px}
.live{width:12px;height:12px;border-radius:50%;background:#e03131;animation:blink 1s infinite}@keyframes blink{50%{opacity:.2;transform:scale(.7)}}
.timer .big{font-size:clamp(56px,18vw,88px);line-height:1.05;margin:6px 0 0;animation:tick 1s steps(1) infinite}
@keyframes tick{50%{transform:scale(1.03)}}
.timer .ts{font-weight:700;font-size:13px;color:var(--mut)}
.pbar{height:10px;border-radius:99px;background:var(--line);margin:12px 6px 0;overflow:hidden;position:relative;z-index:1}.pbar i{display:block;height:100%;width:0;background:var(--grad);border-radius:99px;transition:width 1s linear}
/* floating restaurant contact */
.contactbar{position:fixed;left:max(10px,env(safe-area-inset-left));right:max(10px,env(safe-area-inset-right));bottom:max(10px,env(safe-area-inset-bottom));max-width:640px;margin:0 auto;z-index:50;display:flex;align-items:center;gap:10px;background:var(--brown);color:#fff;border-radius:18px;padding:10px 10px 10px 16px;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.contactbar .ci{flex:1;min-width:0;font-size:13px;line-height:1.3}.contactbar .ci b{display:block;font-size:15px}
.contactbar .ci span{display:block;color:#ffd9b3}
.contactbar a.call{flex:none;display:flex;align-items:center;gap:6px;background:linear-gradient(135deg,#51cf66,#2f9e44);color:#fff;text-decoration:none;font-weight:800;padding:12px 16px;border-radius:14px;animation:ringc 2s infinite}
@keyframes ringc{0%,100%{box-shadow:0 0 0 0 rgba(81,207,102,.6)}50%{box-shadow:0 0 0 9px rgba(81,207,102,0)}}
.alert{padding:12px;border-radius:12px;background:#fff3bf;color:#5c3d00;font-weight:600;margin:8px 0}.ring{animation:rg 1s infinite}@keyframes rg{50%{box-shadow:0 0 0 6px rgba(255,61,0,.3)}}
/* restaurant panel order grid */
.cols{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}.cols .card{margin:0}
.callbtn{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(135deg,#51cf66,#2f9e44);color:#fff;text-decoration:none;font-weight:700;padding:6px 12px;border-radius:10px;font-size:14px}
@media(max-width:380px){.item .side{width:96px}.thumb{width:84px;height:84px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
@media print{body{background:#fff}body::before{display:none}.noprint{display:none!important}.qrgrid{grid-template-columns:repeat(3,1fr);max-width:none}.qrc{break-inside:avoid;border:1px solid #999}}