/* Colour tones: each theme sets the accent, gradients and menu colours. Surfaces are derived from the accent. */
:root{
 --acc:#1f8f5a;--brand:#0b5a35;--brand2:#12804d;
 --grad:linear-gradient(135deg,#064529 0%,#12804d 62%,#2aa66a 100%);
 --nav:linear-gradient(185deg,#04301c 0%,#064529 55%,#0d5c37 100%);
 --glow1:#ffd9a8;--glow2:#7fd1a8;--glow3:#c98a2b;
 --bg1:color-mix(in srgb,var(--acc) 7%,#fff8ee);--bg2:color-mix(in srgb,var(--acc) 12%,#f4f7f4);
 --card:#ffffffd9;--solid:#fff;--ink:#1f2a22;--mute:#6f7d73;--line:color-mix(in srgb,var(--acc) 14%,#ece8de);
 --teal:#14b8a6;--blue:#a8691a;--violet:var(--acc);
 --brand-ink:#fff;--good:#12945f;--bad:#d93a4a;--warn:#c27c0e;
 --free:#d3f5e3;--occ:#ffd9d9;--res:#fff0c2;--shadow:0 10px 30px -14px color-mix(in srgb,var(--brand) 55%,transparent)}
:root[data-theme="sunset"]{--acc:#e0407a;--brand:#b0204f;--brand2:#e0407a;--grad:linear-gradient(135deg,#ff8a3d 0%,#ff4d6d 55%,#d6308f 100%);--nav:linear-gradient(185deg,#3a0f2e 0%,#5e1a45 55%,#8a2a55 100%);--glow1:#ffb88a;--glow2:#ffa6c9;--glow3:#ff8a3d}
:root[data-theme="ocean"]{--acc:#1478c8;--brand:#0b4f8a;--brand2:#1478c8;--grad:linear-gradient(135deg,#0b4f8a 0%,#1478c8 60%,#25b5d6 100%);--nav:linear-gradient(185deg,#05213d 0%,#0b3d6b 55%,#0d5a8f 100%);--glow1:#a8dcff;--glow2:#9be8e0;--glow3:#25b5d6}
:root[data-theme="royal"]{--acc:#6a3df0;--brand:#3b1d8a;--brand2:#6a3df0;--grad:linear-gradient(135deg,#3b1d8a 0%,#6a3df0 60%,#a46bff 100%);--nav:linear-gradient(185deg,#150a3d 0%,#2c1670 55%,#4a2399 100%);--glow1:#d6c4ff;--glow2:#ffc4ec;--glow3:#a46bff}
:root[data-theme="rose"]{--acc:#d81b60;--brand:#a0134a;--brand2:#d81b60;--grad:linear-gradient(135deg,#c2185b 0%,#ec407a 60%,#ff8fab 100%);--nav:linear-gradient(185deg,#3f0a24 0%,#74163f 55%,#a02256 100%);--glow1:#ffc2d4;--glow2:#ffd9a8;--glow3:#ff8fab}
:root[data-theme="mocha"]{--acc:#9a6a35;--brand:#4e2a14;--brand2:#8b5a2b;--grad:linear-gradient(135deg,#4e2a14 0%,#8b5a2b 60%,#c98a2b 100%);--nav:linear-gradient(185deg,#24140b 0%,#4a2c18 55%,#6b4222 100%);--glow1:#f1d3a8;--glow2:#e8c9a0;--glow3:#c98a2b}
:root[data-theme="sunny"]{--acc:#f08a0a;--brand:#c25e00;--brand2:#f08a0a;--grad:linear-gradient(135deg,#f59e0b 0%,#f97316 55%,#ef4444 100%);--nav:linear-gradient(185deg,#40210a 0%,#6e3a0c 55%,#9a5410 100%);--glow1:#ffe19a;--glow2:#ffb38a;--glow3:#f59e0b}
:root[data-theme="slate"]{--acc:#3b82f6;--brand:#1f2937;--brand2:#3b82f6;--grad:linear-gradient(135deg,#1f2937 0%,#374151 55%,#3b82f6 140%);--nav:linear-gradient(185deg,#0b1220 0%,#161f33 55%,#222d46 100%);--glow1:#c9dcff;--glow2:#d5d9e0;--glow3:#3b82f6}
/* dark mode: forced with data-mode="dark", or automatic from the device unless data-mode="light" */
:root[data-mode="dark"]{--bg1:color-mix(in srgb,var(--acc) 10%,#0b0c10);--bg2:color-mix(in srgb,var(--acc) 6%,#07080a);--card:color-mix(in srgb,color-mix(in srgb,var(--acc) 14%,#14161b) 85%,transparent);--solid:color-mix(in srgb,var(--acc) 16%,#171a1f);--ink:#f1f5f2;--mute:#a7b3ab;--line:color-mix(in srgb,var(--acc) 24%,#262a30);--good:#5fe0a4;--bad:#ff8c97;--warn:#f5c364;--free:#12372a;--occ:#4a2127;--res:#4a3a12;--shadow:0 10px 30px -14px rgba(0,0,0,.7)}
@media(prefers-color-scheme:dark){:root:not([data-mode="light"]):not([data-mode="dark"]){--bg1:color-mix(in srgb,var(--acc) 10%,#0b0c10);--bg2:color-mix(in srgb,var(--acc) 6%,#07080a);--card:color-mix(in srgb,color-mix(in srgb,var(--acc) 14%,#14161b) 85%,transparent);--solid:color-mix(in srgb,var(--acc) 16%,#171a1f);--ink:#f1f5f2;--mute:#a7b3ab;--line:color-mix(in srgb,var(--acc) 24%,#262a30);--good:#5fe0a4;--bad:#ff8c97;--warn:#f5c364;--free:#12372a;--occ:#4a2127;--res:#4a3a12;--shadow:0 10px 30px -14px rgba(0,0,0,.7)}}
*{box-sizing:border-box}
body{margin:0;color:var(--ink);font:15px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;background:radial-gradient(circle at 12% 8%,color-mix(in srgb,var(--glow1) 33%,transparent),transparent 40%),radial-gradient(circle at 88% 90%,color-mix(in srgb,var(--glow2) 33%,transparent),transparent 45%),linear-gradient(135deg,var(--bg1),var(--bg2)) fixed;min-height:100vh}
h1,h2,h3{margin:0}h2{font-size:1.55rem;letter-spacing:-.015em;margin-bottom:.2rem}h3{font-size:1rem;margin-bottom:.4rem}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:1px solid var(--line);background:var(--solid);padding:.5rem .95rem;border-radius:11px;transition:transform .08s,box-shadow .15s}
button:hover{box-shadow:var(--shadow)}button:active{transform:translateY(1px)}
button.primary{background:var(--grad);color:#fff;border:0;font-weight:650;box-shadow:0 8px 18px -8px var(--brand2)}
button.danger{color:var(--bad)}button.sm{padding:.2rem .6rem;font-size:.85rem;border-radius:9px}
button[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none}
input,select,textarea{width:100%;padding:.55rem .75rem;border:1px solid var(--line);border-radius:11px;background:var(--solid)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--violet);outline-offset:0;border-color:transparent}
label{display:block;font-size:.78rem;font-weight:650;color:var(--mute);margin:.8rem 0 .25rem}
.small{font-size:.8rem}.link{color:var(--violet);cursor:pointer;font-size:.9rem;font-weight:600}
.shell{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
nav{background:var(--nav);color:#e9f6ee;padding:1.1rem .8rem;display:flex;flex-direction:column;gap:.2rem;position:sticky;top:0;height:100vh;overflow-y:auto}
nav .brand{font-weight:800;font-size:1.25rem;padding:.2rem .7rem 1rem;color:#fff}
nav .brand small{display:block;font-weight:500;color:#b7d9c3;font-size:.75rem;text-transform:capitalize}
nav a{display:flex;align-items:center;gap:.6rem;padding:.55rem .8rem;border-radius:12px;color:#d5ecdd;text-decoration:none;cursor:pointer;transition:background .15s}
nav a .ic{width:1.4rem;text-align:center}
nav a:hover{background:#ffffff1c}
nav a.on{background:var(--grad);color:#fff;font-weight:650;box-shadow:0 10px 20px -10px #000}
nav .sp{flex:1;min-height:12px}nav .who{font-size:.8rem;color:#b7d9c3;padding:.4rem .8rem}
main{padding:1.6rem 1.8rem;max-width:none;width:100%}
.bar{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin:.5rem 0 1.1rem}
.bar .grow{flex:1}.bar input[type=month],.bar input[type=date]{width:auto}
.hero{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;background:var(--grad);color:#fff;border-radius:22px;padding:1.4rem 1.6rem;margin-bottom:1rem;box-shadow:0 18px 40px -18px var(--brand);position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-40px;top:-60px;width:220px;height:220px;border-radius:50%;background:#ffffff26}
.hero h2{margin:0;font-size:1.6rem}.hero p{margin:.2rem 0 0;opacity:.92}
.hero-btn{background:#fff;color:var(--brand);border:0;font-weight:700;padding:.7rem 1.2rem;border-radius:14px;position:relative;z-index:1}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.9rem;margin-bottom:1.1rem}
.card{background:var(--card);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:18px;padding:1rem 1.1rem;box-shadow:var(--shadow);position:relative;overflow:hidden}
.card .ico{position:absolute;right:12px;top:10px;font-size:1.5rem;width:2.4rem;height:2.4rem;display:grid;place-items:center;border-radius:12px;background:color-mix(in srgb,var(--acc) 12%,transparent)}
.card.c-good .ico{background:#12945f1f}.card.c-bad .ico{background:#d93a4a1f}
.card .k{color:var(--mute);font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.card .v{font-size:1.65rem;font-weight:800;margin-top:.3rem}
.card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:linear-gradient(180deg,var(--violet),var(--blue))}
.card.c-good::before{background:linear-gradient(180deg,#12c47a,#7be3b4)}.card.c-bad::before{background:linear-gradient(180deg,#ff4d6d,#ff9a6b)}
.good{color:var(--good)}.bad{color:var(--bad)}.warn{color:var(--warn)}.mute{color:var(--mute)}
.panel{background:var(--card);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:18px;padding:1rem 1.1rem;margin-bottom:1.1rem;overflow-x:auto;box-shadow:var(--shadow)}
.phead{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.two{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;margin-bottom:1.1rem}.two .panel{margin-bottom:0}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:.6rem .6rem;border-bottom:1px solid var(--line);white-space:nowrap}
th{font-size:.72rem;color:var(--mute);font-weight:700;text-transform:uppercase;letter-spacing:.05em}
td.num,th.num{text-align:right}td.act{text-align:right}td.act button{margin-left:.25rem}
tbody tr:hover{background:color-mix(in srgb,var(--acc) 6%,transparent)}tr:last-child td{border-bottom:0}
.empty{color:var(--mute);padding:.9rem 0}
.badge{display:inline-block;padding:.08rem .6rem;border-radius:99px;font-size:.74rem;font-weight:650;background:var(--line);color:var(--mute)}
.badge.low{background:#ffd9d9;color:#b3202f}.badge.warnb{background:#fff0c2;color:#8a5a00}
.barrow{display:flex;align-items:center;gap:.6rem;margin:.45rem 0;font-size:.9rem}
.barrow .n{width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.barrow .b{flex:1;background:var(--line);border-radius:8px;height:12px}.barrow .b i{display:block;height:100%;background:var(--grad);border-radius:8px}
.barrow .t{width:90px;text-align:right;font-weight:650}
dialog{border:1px solid var(--line);border-radius:22px;background:var(--solid);color:var(--ink);width:min(460px,94vw);padding:1.3rem 1.4rem;box-shadow:0 30px 80px -20px rgba(5,50,30,.55)}
dialog.wide{width:min(680px,95vw)}
dialog::backdrop{background:rgba(5,30,18,.55);backdrop-filter:blur(4px)}
.btns{display:flex;gap:.5rem;justify-content:flex-end;margin-top:1.1rem}.btns.wrap{flex-wrap:wrap}.btns.spread{justify-content:space-between;align-items:center}
.err{color:var(--bad);font-size:.85rem;margin-top:.6rem;min-height:1em}
#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--grad);color:#fff;padding:.6rem 1.2rem;border-radius:99px;opacity:0;transition:opacity .2s;pointer-events:none;box-shadow:var(--shadow);z-index:99}
#toast.show{opacity:1}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}.fld.wide{grid-column:1/-1}.hint{font-size:.75rem;color:var(--mute);margin-top:.25rem}
.rows{display:flex;flex-direction:column;gap:.4rem}.rowline,.rowhead{display:flex;gap:.4rem}.rowhead{font-size:.72rem;font-weight:700;color:var(--mute);text-transform:uppercase;letter-spacing:.04em;margin-bottom:.3rem}
.rowhead span{padding-left:.2rem}.rowline>*{min-width:0}
.note{background:color-mix(in srgb,var(--acc) 8%,transparent);border:1px solid var(--line);border-radius:14px;padding:.8rem 1rem;margin-top:1rem;font-size:.9rem}
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:16px;background:radial-gradient(circle at 15% 20%,var(--glow3) 0,transparent 45%),radial-gradient(circle at 85% 80%,var(--brand2) 0,transparent 50%),var(--nav)}
.login{width:100%;max-width:380px}
.login .card{padding:2rem 1.8rem;background:var(--solid);border-radius:24px;box-shadow:0 30px 80px -20px rgba(0,0,0,.6)}
.login .card::before{display:none}.login h1{font-size:2.1rem;font-weight:850;margin:.2rem 0;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
/* tables */
.floor{position:relative;width:900px;height:520px;background-color:var(--solid);border:2px dashed var(--line);border-radius:20px;background-image:radial-gradient(var(--line) 1.2px,transparent 1.2px);background-size:20px 20px;box-shadow:var(--shadow)}
.floor.edit{border-color:var(--violet)}
.tbl{position:absolute;width:92px;height:76px;border-radius:18px;border:2px solid #0000001a;display:flex;flex-direction:column;align-items:center;justify-content:center;user-select:none;touch-action:none;cursor:pointer;box-shadow:0 8px 16px -8px rgba(0,0,0,.4);text-align:center;font-size:.8rem}
.floor.edit .tbl{cursor:grab}.tbl b{font-size:1rem}.tbl small{color:var(--mute)}
.tbl.free{background:linear-gradient(135deg,var(--free),#a8ecc6)}.tbl.occupied{background:linear-gradient(135deg,var(--occ),#ffb3b3)}.tbl.reserved{background:linear-gradient(135deg,var(--res),#ffd97a)}
.legend span{margin-right:1rem;font-size:.85rem}.legend i{display:inline-block;width:14px;height:14px;border-radius:4px;margin-right:.3rem;vertical-align:-2px;box-shadow:none;border:1px solid #0002}
.scroll{overflow:auto}
/* billing */
.pos{display:grid;grid-template-columns:1fr 370px;gap:1rem;align-items:start}
.chips,.openrow{display:flex;gap:.4rem;flex-wrap:wrap;margin:.7rem 0}.openrow{align-items:center}
.chip{border-radius:99px;padding:.3rem .9rem;font-size:.88rem}.chip.on{background:var(--grad);color:#fff;border:0}
.menugrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:.6rem}
.tile{display:flex;flex-direction:column;align-items:flex-start;gap:.2rem;text-align:left;padding:.8rem .9rem;border-radius:16px;min-height:78px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow)}
.tile span{color:var(--violet);font-weight:700}.tile:hover{border-color:var(--violet)}
.cart{position:sticky;top:12px;margin:0}
.cart select,.cart input{margin-top:.3rem}
.lines{margin-top:.6rem;max-height:38vh;overflow:auto}
.line{display:grid;grid-template-columns:1fr auto 70px;gap:.5rem;align-items:center;padding:.45rem 0;border-bottom:1px solid var(--line)}
.qty{display:flex;align-items:center;gap:.4rem}.lt{text-align:right;font-weight:650}
.tot>div{display:flex;justify-content:space-between;align-items:center;padding:.25rem 0}.tot input{width:90px;text-align:right;margin:0}
.tot .grand{font-size:1.3rem;font-weight:800;border-top:2px dashed var(--line);margin-top:.3rem;padding-top:.5rem}
.tot .grand span:last-child{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.cart .btns button{flex:1;padding:.7rem}
.billhead{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.bigtotal{font-size:1.7rem;font-weight:850;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.qrbox{display:flex;gap:1rem;align-items:center;margin:1rem 0;padding:.9rem;border-radius:16px;background:color-mix(in srgb,var(--acc) 7%,transparent);border:1px solid var(--line)}
.qr{width:140px;min-width:140px;background:#fff;padding:10px;border-radius:12px}.qr svg{display:block;width:100%;height:auto}
.urltxt{margin-top:.4rem;font-size:.72rem;word-break:break-all;color:var(--mute)}
/* wizard */
.wiz-wrap{min-height:100vh;display:grid;place-items:center;padding:20px 14px;background:radial-gradient(circle at 10% 10%,color-mix(in srgb,var(--glow3) 33%,transparent),transparent 40%),radial-gradient(circle at 90% 90%,color-mix(in srgb,var(--acc) 33%,transparent),transparent 45%)}
.wiz{width:100%;max-width:780px;background:var(--card);backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:26px;padding:1.6rem 1.8rem;box-shadow:0 30px 70px -30px rgba(10,70,40,.55)}
.wizhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}
.wizlogo{font-weight:850;font-size:1.1rem;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.steps{display:flex;gap:.4rem;margin-bottom:1.3rem;overflow-x:auto}
.step{display:flex;align-items:center;gap:.4rem;font-size:.8rem;color:var(--mute);white-space:nowrap;flex:1;min-width:0}
.step i{font-style:normal;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--line);font-weight:700;flex:none}
.step.on{color:var(--ink);font-weight:700}.step.on i{background:var(--grad);color:#fff}.step.done i{background:var(--teal);color:#fff}
.choice{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-top:1rem}
.bigopt{display:flex;flex-direction:column;align-items:flex-start;gap:.2rem;padding:1.1rem;border-radius:18px;text-align:left;border:2px solid var(--line)}
.bigopt span{color:var(--mute);font-size:.85rem}.bigopt.on{border-color:var(--violet);background:color-mix(in srgb,var(--acc) 8%,transparent)}
@media(max-width:900px){.pos{grid-template-columns:1fr}.cart{position:static}}
@media(max-width:760px){
 .shell{grid-template-columns:1fr}
 nav{position:static;height:auto;flex-direction:row;flex-wrap:wrap;padding:.6rem}
 nav .brand,nav .sp,nav .who{display:none}nav a{padding:.4rem .6rem;font-size:.85rem}
 main{padding:1rem 16px}.two,.grid2,.choice{grid-template-columns:1fr}
 .rowline{flex-wrap:wrap}.rowline>*{flex:1 1 120px!important}.rowhead{display:none}
 .qrbox{flex-direction:column;text-align:center}.step span{display:none}
}
/* seating */
.guestrow{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin:.5rem 0;padding:.5rem .7rem;border-radius:12px;background:color-mix(in srgb,var(--acc) 7%,transparent)}
.seatrow{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem 0;border-bottom:1px solid var(--line)}
.qty.big{gap:.7rem}.qty.big button{width:2.4rem;height:2.4rem;padding:0;font-size:1.3rem;border-radius:12px}.qty.big b{min-width:1.8rem;text-align:center;font-size:1.3rem}
.tbl .dots{display:flex;gap:2px;flex-wrap:wrap;justify-content:center;margin-top:3px;max-width:70px}
.tbl .dots i{width:7px;height:7px;border-radius:50%;background:#0003}.tbl .dots i.on{background:#d93a4a}
/* Chaipeedika brand */
.login .card{background:#fff;color:#1f2a22}.login .card .mute,.login .card label{color:#6f7d73}.login .card input{background:#fff;color:#1f2a22;border-color:#e4ecdf}
.login .logo{display:block;width:100%;max-width:300px;margin:0 auto .6rem}
.navlogo{background:#fff;border-radius:14px;padding:.5rem .7rem;margin:.4rem .3rem .6rem}.navlogo img{display:block;width:100%}
button.hero-btn{color:var(--brand)}
/* ---------- playful motion ---------- */
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes pop{0%{opacity:0;transform:scale(.9)}70%{transform:scale(1.03)}100%{opacity:1;transform:scale(1)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes wiggle{0%,100%{transform:rotate(0)}20%{transform:rotate(-14deg)}40%{transform:rotate(12deg)}60%{transform:rotate(-8deg)}80%{transform:rotate(6deg)}}
@keyframes glow{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.55)}50%{box-shadow:0 0 0 10px rgba(255,255,255,0)}}
@keyframes softpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
@keyframes fall{0%{transform:translateY(-10vh) rotate(0);opacity:1}100%{transform:translateY(105vh) rotate(540deg);opacity:0}}
@keyframes bgmove{0%{background-position:0% 0%}100%{background-position:100% 100%}}
main>*{animation:fadeUp .45s both}
main>*:nth-child(2){animation-delay:.06s}main>*:nth-child(3){animation-delay:.12s}main>*:nth-child(4){animation-delay:.18s}main>*:nth-child(5){animation-delay:.24s}main>*:nth-child(n+6){animation-delay:.3s}
.cards .card{animation:pop .5s both}.cards .card:nth-child(2){animation-delay:.07s}.cards .card:nth-child(3){animation-delay:.14s}.cards .card:nth-child(4){animation-delay:.21s}.cards .card:nth-child(5){animation-delay:.28s}
.card,.tile,.chip,nav a,button{transition:transform .18s cubic-bezier(.2,1.3,.4,1),box-shadow .18s,background .18s}
.card:hover{transform:translateY(-4px)}
.card .ico{transition:transform .3s}.card:hover .ico{animation:wiggle .6s}
.tile:hover{transform:translateY(-4px) scale(1.03)}.tile:active,button:active{transform:scale(.95)}
.chip:hover{transform:translateY(-2px)}
nav a:hover{transform:translateX(4px)}nav a:hover .ic{animation:wiggle .6s}nav a.on .ic{animation:float 2.4s ease-in-out infinite}
.wave{display:inline-block;transform-origin:70% 70%;animation:wiggle 2s ease-in-out infinite}
.hero::after{animation:float 6s ease-in-out infinite}.hero-btn{animation:glow 2.6s infinite}.hero-btn:hover{transform:scale(1.06) rotate(-1deg)}
button.primary:hover{transform:translateY(-2px)}
dialog[open]{animation:pop .32s both}dialog[open]::backdrop{animation:fadeUp .25s both}
#toast{transform:translate(-50%,24px);transition:opacity .2s,transform .4s cubic-bezier(.2,1.5,.4,1)}#toast.show{transform:translate(-50%,0)}
.floor:not(.edit) .tbl:hover{transform:translateY(-4px) scale(1.05)}.tbl{transition:transform .18s cubic-bezier(.2,1.3,.4,1)}
.tbl.occupied{animation:softpulse 3.2s ease-in-out infinite}.badge.low{animation:softpulse 2s ease-in-out infinite}
.login .card{animation:pop .6s both}.login .logo{animation:float 4s ease-in-out infinite}
.login-wrap{background-size:140% 140%;animation:bgmove 16s ease-in-out infinite alternate}
.wizbody{animation:fadeUp .4s both}.step.on i{animation:pop .45s both}
.empty::before{content:"🫖";display:inline-block;margin-right:.45rem;animation:float 2.6s ease-in-out infinite}
.barrow .b i{transform-origin:left;animation:grow .8s both}@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:200}.confetti span{position:absolute;top:0;animation:fall linear forwards}
/* outlets add-on */
.outletsel{margin:.2rem .3rem .6rem;width:calc(100% - .6rem);background:#ffffff1f;color:#fff;border:1px solid #ffffff33;border-radius:12px;padding:.5rem .6rem}.outletsel option{color:#1f2a22}
.upsell{display:flex;gap:1.2rem;align-items:center;padding:1.4rem 1.6rem;border-radius:22px;background:var(--grad);color:#fff;margin-bottom:1.1rem;box-shadow:0 18px 40px -18px var(--brand)}
.upsell h3{font-size:1.25rem}.upsell p{margin:.3rem 0 .6rem;opacity:.92}.upsell ul{list-style:none;padding:0;margin:0;display:grid;gap:.3rem}
.upsell-ico{font-size:3.4rem;animation:float 3s ease-in-out infinite}
.idbox{display:flex;gap:.6rem;align-items:center;margin:.6rem 0}.idbox code{font-size:1.2rem;font-weight:800;letter-spacing:.08em;padding:.4rem .9rem;border-radius:12px;background:color-mix(in srgb,var(--acc) 12%,transparent)}
@media(max-width:760px){.upsell{flex-direction:column;text-align:center}}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
/* ---------- layout column, weather chip, festivals ---------- */
.maincol{min-width:0}
.wx{display:flex;align-items:center;gap:.6rem;margin:.2rem .3rem .4rem;padding:.55rem .7rem;border-radius:14px;background:#ffffff1a;color:#fff}
.wx:empty{display:none}.wx b{font-size:1.05rem}.wx small{display:block;color:#ffffffb8;font-size:.72rem;line-height:1.2}
.wxi{font-size:1.7rem;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes drift{0%,100%{transform:translateX(-4px)}50%{transform:translateX(5px)}}@keyframes patter{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
.sun{animation:spin 18s linear infinite}.cloud{animation:drift 5s ease-in-out infinite}.rain{animation:patter .9s ease-in-out infinite}.moon{animation:float 4s ease-in-out infinite}
.wxcard{display:flex;gap:1rem;align-items:center}.wxbig{font-size:3.4rem;line-height:1}.wxtemp{font-size:2rem;font-weight:800}
.wxtip{margin-top:.5rem;padding:.5rem .7rem;border-radius:12px;background:color-mix(in srgb,var(--acc) 12%,transparent);font-size:.88rem}
.hrow{display:flex;align-items:center;gap:.7rem;padding:.4rem 0;border-bottom:1px solid var(--line)}.hrow:last-child{border-bottom:0}.hrow>div{flex:1}.hico{font-size:1.6rem}
.festbar{display:flex;align-items:center;gap:.9rem;margin:.9rem 1.8rem 0;padding:.7rem 1rem;border-radius:18px;background:var(--grad);color:#fff;box-shadow:var(--shadow);animation:pop .5s both}
.festico{font-size:2rem;animation:wiggle 2.2s ease-in-out infinite}.festtxt{flex:1}.festtxt small{display:block;opacity:.92}
.festbar .sm{background:#ffffff26;color:#fff;border-color:#ffffff40}
.fxlayer{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:50}
.fxlayer span{position:absolute;opacity:0}
@keyframes drop{0%{transform:translateY(-8vh) rotate(0);opacity:0}10%{opacity:.85}100%{transform:translateY(104vh) rotate(300deg);opacity:0}}
@keyframes rise{0%{transform:translateY(104vh) rotate(0);opacity:0}10%{opacity:.85}100%{transform:translateY(-10vh) rotate(-20deg);opacity:0}}
.fxlayer .down{top:0;animation:drop linear infinite}.fxlayer .up{top:0;animation:rise linear infinite}
/* ---------- look & preferences ---------- */
.themes{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}
.themebtn{display:flex;flex-direction:column;align-items:center;gap:.35rem;padding:.55rem .3rem;font-size:.78rem;border-radius:14px}
.themebtn i{display:block;width:38px;height:38px;border-radius:50%;box-shadow:0 6px 14px -6px rgba(0,0,0,.4)}
.themebtn.on{border-color:var(--acc);box-shadow:0 0 0 2px var(--acc) inset;font-weight:700}
.seg{display:inline-flex;gap:.3rem;padding:.25rem;border-radius:14px;background:var(--line)}.seg button{border:0;background:transparent;padding:.35rem .8rem}.seg button.on{background:var(--solid);box-shadow:var(--shadow);font-weight:700}
.chk{display:inline-flex;align-items:center;gap:.4rem;margin:.2rem .8rem .2rem 0;font-size:.9rem;font-weight:500;color:var(--ink)}.chk input{width:auto}
.waterpop{position:fixed;right:18px;bottom:18px;z-index:120;display:flex;gap:.8rem;align-items:center;max-width:320px;padding:.9rem 1.1rem;border-radius:20px;background:linear-gradient(135deg,#0ea5e9,#22d3ee);color:#fff;box-shadow:0 18px 40px -14px #0369a1;animation:pop .5s both}
.waterpop .drop{font-size:2.2rem;animation:float 1.8s ease-in-out infinite}.waterpop .sm{border-color:#ffffff55}.waterpop .sm:not(.primary){background:#ffffff26;color:#fff}.waterpop .primary{background:#fff;color:#0369a1}
/* ---------- sales insights ---------- */
.seg+.grow{flex:1}.small-v{font-size:1.15rem!important;margin-top:.5rem!important}
.tips{display:grid;gap:.5rem}.tip{display:flex;gap:.7rem;align-items:flex-start;padding:.6rem .8rem;border-radius:14px;background:color-mix(in srgb,var(--acc) 8%,transparent)}.tip>span{font-size:1.4rem}
.bars{display:flex;align-items:flex-end;gap:4px;height:190px}.bars.wide{gap:10px}
.bcol{flex:1;display:flex;flex-direction:column;align-items:center;gap:.3rem;height:100%;min-width:0}
.bwrap{flex:1;width:100%;display:flex;align-items:flex-end}.cbar{width:100%;border-radius:8px 8px 3px 3px;background:color-mix(in srgb,var(--acc) 45%,var(--solid));transform-origin:bottom;animation:growY .7s both}
.cbar.hot{background:var(--grad);box-shadow:0 0 14px -2px var(--acc)}
@keyframes growY{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.bcol span{font-size:.7rem;color:var(--mute)}
/* ---------- prayer corner ---------- */
.shrine{position:relative;border-radius:28px;padding:1.4rem 1rem 1.6rem;overflow:hidden;min-height:64vh;text-align:center;color:#fff3dc;box-shadow:var(--shadow)}
.mood-warm{background:linear-gradient(180deg,#2e1406,#6d3410 55%,#a4571a)}.mood-saffron{background:linear-gradient(180deg,#7a2800,#d8661a 65%,#ffb347)}
.mood-night{background:radial-gradient(#ffffff55 1px,transparent 1px) 0 0/38px 38px,radial-gradient(#ffffff33 1px,transparent 1px) 19px 19px/38px 38px,linear-gradient(180deg,#070b24,#1b1f4d 60%,#3a2f6b)}
.mood-white{background:linear-gradient(180deg,#fffaf0,#f4e3c4);color:#5a3a12}
.garland{display:flex;justify-content:center;gap:1px;font-size:1.5rem;margin-bottom:.4rem;overflow:hidden;white-space:nowrap}.garland span{display:inline-block;animation:sway 3s ease-in-out infinite;transform-origin:top}
@keyframes sway{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
.shrine-title{font:italic 700 clamp(1.4rem,4vw,2.2rem) Georgia,'Times New Roman',serif;color:#ffe08a;text-shadow:0 2px 14px rgba(255,170,50,.6);margin:.3rem 0 .8rem}.mood-white .shrine-title{color:#a05a00;text-shadow:none}
.frame{display:inline-block;padding:14px;border-radius:220px 220px 22px 22px;transition:box-shadow .6s;position:relative}
.frame img,.frame .noimg{display:block;width:min(280px,68vw);height:min(360px,86vw);object-fit:cover;border-radius:200px 200px 12px 12px;background:#00000040}
.noimg{display:grid!important;place-items:center;font-size:1.1rem;color:#ffe9b5;padding:1rem;text-align:center}
.f-gold{background:linear-gradient(135deg,#fff1b8,#d4a017 35%,#8a5a00 60%,#f5d76e);box-shadow:0 12px 40px -8px rgba(0,0,0,.6)}
.f-wood{background:linear-gradient(135deg,#8b5a2b,#4a2a12 50%,#7a4b24);box-shadow:0 12px 40px -8px rgba(0,0,0,.6)}
.f-floral{background:linear-gradient(135deg,#ffd1dc,#ff8fab 50%,#ffd1dc);box-shadow:0 12px 40px -8px rgba(0,0,0,.5)}.f-floral::before,.f-floral::after{content:"🌺🌼🌸";position:absolute;left:50%;transform:translateX(-50%);font-size:1.3rem;letter-spacing:6px;white-space:nowrap}.f-floral::before{top:-6px}.f-floral::after{bottom:-8px}
.f-plain{background:#ffffff24;border:2px solid #ffffff55}
.shrine.lit .frame{box-shadow:0 0 70px 10px rgba(255,190,80,.55),0 12px 40px -8px rgba(0,0,0,.6)}
.shrine-note{margin:.8rem auto 0;max-width:34rem;opacity:.95;font-size:1.02rem}
.lamps{display:flex;justify-content:center;gap:2.2rem;flex-wrap:wrap;margin:1.4rem 0 .6rem}
.lamp{position:relative;width:96px;height:132px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;cursor:pointer;user-select:none}
.lamp small{position:absolute;bottom:-20px;font-size:.75rem;opacity:.85;white-space:nowrap}
.lamp .flame{position:absolute;width:20px;height:36px;border-radius:50% 50% 50% 50%/62% 62% 38% 38%;background:radial-gradient(ellipse at 50% 80%,#fff8c9 0,#ffd24a 32%,#ff8a1f 68%,#ff5a00 100%);opacity:0;transform:scale(.2);transform-origin:50% 100%;transition:opacity .5s,transform .5s;filter:blur(.5px);left:calc(50% - 10px)}
.lamp.lit .flame{opacity:1;transform:scale(1);animation:flicker 1.1s ease-in-out infinite}
.lamp.lit::before{content:"";position:absolute;left:-24px;right:-24px;top:-30px;bottom:10px;background:radial-gradient(circle at 50% 45%,rgba(255,190,80,.5),transparent 62%);animation:glowpulse 2.6s ease-in-out infinite;pointer-events:none}
@keyframes flicker{0%,100%{transform:scale(1,1) rotate(-1deg)}25%{transform:scale(.93,1.07) rotate(1.6deg)}50%{transform:scale(1.05,.95) rotate(-1.6deg)}75%{transform:scale(.96,1.04) rotate(1deg)}}
@keyframes glowpulse{0%,100%{opacity:.75}50%{opacity:1}}
.deepam .bowl{width:86px;height:32px;border-radius:0 0 60px 60px/0 0 42px 42px;background:linear-gradient(180deg,#f9dc7a,#c48a1b 65%,#8a5a0e);box-shadow:inset 0 4px 6px rgba(255,255,255,.45),0 6px 10px rgba(0,0,0,.4);position:relative}
.deepam .bowl::before{content:"";position:absolute;left:calc(50% - 3px);top:-4px;width:6px;height:6px;border-radius:50%;background:#3a2200;box-shadow:0 0 6px 2px rgba(255,170,40,.5)}
.deepam .base{width:34px;height:12px;background:linear-gradient(#b87a14,#6e4308);border-radius:0 0 10px 10px}
.deepam .flame{bottom:50px}
.candle .wax{width:34px;height:74px;border-radius:6px 6px 4px 4px;background:linear-gradient(90deg,#f3e3c2,#fff8e8 45%,#e4cfa4);box-shadow:0 6px 10px rgba(0,0,0,.35)}
.candle .wick{width:3px;height:10px;background:#2a1a0a;border-radius:2px}.candle .flame{bottom:82px}
.incense .holder{width:60px;height:12px;border-radius:0 0 30px 30px;background:linear-gradient(#d9a441,#7a4d0a);box-shadow:0 5px 8px rgba(0,0,0,.4)}
.incense .stick{width:4px;height:92px;background:linear-gradient(#8a5a2b,#5a3a18);transform:rotate(7deg);transform-origin:bottom;border-radius:2px;position:absolute;bottom:10px}
.incense .ember{position:absolute;bottom:98px;left:calc(50% + 7px);width:7px;height:7px;border-radius:50%;background:#444}.incense.lit .ember{background:#ff6a00;box-shadow:0 0 10px 4px rgba(255,100,0,.7)}
.incense .smoke{position:absolute;bottom:106px;left:calc(50% + 6px);width:20px;height:80px;opacity:0;transition:opacity .6s}.incense.lit .smoke{opacity:1}
.smoke i{position:absolute;bottom:0;left:6px;width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.5);filter:blur(4px);animation:smoke 3.6s ease-in infinite}.smoke i:nth-child(2){animation-delay:1.2s}.smoke i:nth-child(3){animation-delay:2.4s}
@keyframes smoke{0%{transform:translate(0,0) scale(.6);opacity:.7}100%{transform:translate(14px,-90px) scale(2.2);opacity:0}}
.lightbtn{background:linear-gradient(135deg,#ffd76a,#ff9a2e);color:#4a2400;border:0;font-weight:800;padding:.7rem 1.6rem;border-radius:99px;box-shadow:0 10px 24px -8px #ff9a2e;margin-top:1.4rem}
.mood-white .lightbtn{box-shadow:0 10px 24px -8px #d98a00}
.motes span{position:absolute;bottom:0;font-size:1rem;opacity:0;animation:rise 9s linear infinite;pointer-events:none}
@media(max-width:760px){.festbar{margin:.8rem 16px 0}.wxcard{flex-direction:column;text-align:center}.themes{grid-template-columns:repeat(2,1fr)}}
main.noanim>*{animation:none!important}

/* ---------- wide dashboard, prayer strip, garden ---------- */
.dashgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:1.2rem;align-items:start}
@media(min-width:1280px){.dashgrid.has-side{grid-template-columns:minmax(0,1fr) 370px}.dashside{position:sticky;top:12px}}
.dashmain{min-width:0}
.praystrip{display:flex;align-items:center;gap:.9rem;padding:.7rem 1rem;margin-bottom:1rem;border-radius:18px;background:linear-gradient(135deg,#ffedc2,#ffd1a0);color:#5a3200;box-shadow:var(--shadow)}
.praystrip.lit{background:linear-gradient(135deg,#fff3cf,#ffe3a6)}
.praystrip>div{flex:1}.praystrip small{display:block;opacity:.85}.pico{font-size:1.9rem;animation:flicker 1.4s ease-in-out infinite;display:inline-block}
.praystrip .sm{border-color:#5a320033;background:#ffffffaa;color:#5a3200}.praystrip .primary{background:var(--grad);color:#fff;border:0}
.garden{border-radius:24px;background:var(--card);backdrop-filter:blur(8px);border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden;margin-bottom:1rem}
.ghead{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.9rem 1rem .5rem}
.garden h4{margin:.9rem 1rem .4rem;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--mute)}
.gscene{position:relative;aspect-ratio:6/5;overflow:hidden}
.sky-day{background:linear-gradient(180deg,#9bd7ff,#e6f6ff 70%)}.sky-cloud{background:linear-gradient(180deg,#b8cbdb,#e4edf3 70%)}.sky-rain{background:linear-gradient(180deg,#7d93a8,#bccad6 70%)}.sky-night{background:linear-gradient(180deg,#0a1030,#2a2f66 75%)}
.treewrap,.tree{position:absolute;inset:0;width:100%;height:100%}.tree{display:block}
.canopy{transform-origin:150px 205px;animation:sway2 6s ease-in-out infinite}@keyframes sway2{0%,100%{transform:rotate(-1.2deg)}50%{transform:rotate(1.2deg)}}
.blos{animation:twinkle 3s ease-in-out infinite}@keyframes twinkle{0%,100%{opacity:1}50%{opacity:.45}}
.halo{transform-origin:150px 120px;animation:spin 30s linear infinite}
.gsun{position:absolute;top:8%;right:9%;font-size:2.4rem}
.stars{position:absolute;inset:0;background:radial-gradient(#fff 1px,transparent 1px) 0 0/34px 34px,radial-gradient(#ffffffaa 1px,transparent 1px) 17px 17px/34px 34px;opacity:.7}
.rain{position:absolute;inset:0;pointer-events:none}.rain i{position:absolute;top:-10%;width:2px;height:16px;background:#cfe6ff;opacity:.8;border-radius:2px;animation:drip .9s linear infinite}@keyframes drip{to{transform:translateY(120vh)}}
.gfly{position:absolute;font-size:1.4rem}.b1{animation:flutter 9s ease-in-out infinite}.b2{animation:flutter 7s ease-in-out infinite reverse;font-size:1.1rem}
@keyframes flutter{0%{left:8%;top:40%}25%{left:35%;top:22%}50%{left:70%;top:38%}75%{left:45%;top:50%}100%{left:8%;top:40%}}
.gfest{position:absolute;left:6%;bottom:12%;font-size:1.9rem;animation:float 3s ease-in-out infinite}
.gstage{position:absolute;left:10px;bottom:8px;padding:.15rem .6rem;border-radius:99px;background:#0000004d;color:#fff;font-size:.75rem;backdrop-filter:blur(4px)}
.gprog{padding:.8rem 1rem 0}.gbar{height:10px;border-radius:8px;background:var(--line);overflow:hidden}.gbar i{display:block;height:100%;border-radius:8px;background:var(--grad);transform-origin:left;animation:grow 1s both}.gmsg{margin-top:.4rem;font-size:.88rem}
.gchips{display:flex;flex-wrap:wrap;gap:.4rem;padding:.7rem 1rem 0}.gchips span{padding:.2rem .65rem;border-radius:99px;background:color-mix(in srgb,var(--acc) 12%,transparent);font-size:.78rem}
.bed{display:flex;flex-wrap:wrap;gap:3px;padding:0 1rem}.fl{width:22px;height:22px;display:grid;place-items:center;border-radius:50%;font-size:1rem;background:color-mix(in srgb,var(--acc) 8%,transparent);animation:pop .5s both}
.fl.on{background:transparent;animation:pop .5s both,float 3.2s ease-in-out infinite}.fl.future{opacity:.35;background:transparent;border:1px dashed var(--line)}.fl.now{outline:2px solid var(--acc)}
.orchard{display:flex;align-items:flex-end;justify-content:space-between;gap:.3rem;padding:0 1rem 1rem;min-height:92px}
.otree{display:flex;flex-direction:column;align-items:center;flex:1;text-align:center}.otr{line-height:1;transition:font-size .6s;animation:sway2 5s ease-in-out infinite;transform-origin:bottom}.otree small{font-size:.68rem}
.otree.best .otr{filter:drop-shadow(0 0 8px #ffd54a)}.otree.cur small:first-of-type{font-weight:800;color:var(--acc)}

/* ---------- full-screen prayer welcome after login ---------- */
.gate{position:fixed;inset:0;z-index:300;overflow:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.2rem 1rem;text-align:center;animation:fadeIn .6s both}
.gate.out{opacity:0;transition:opacity .4s}.gate .shrine{background:none;box-shadow:none;min-height:0;overflow:visible;width:100%;max-width:720px}
.gate .frame img,.gate .frame .noimg{width:min(300px,64vw);height:min(400px,52vh)}
.gate.mood-white{color:#5a3a12}.gatego{margin-top:.4rem;padding-bottom:1rem}
.ghostbtn{background:#ffffff22;color:inherit;border:1px solid #ffffff55;border-radius:99px;padding:.55rem 1.4rem}
body.gated{overflow:hidden}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.gate{justify-content:flex-start}.gate>*{flex:none;width:100%}.gate>.shrine{margin-top:auto}.gate>.gatego{margin-bottom:auto}
.gate .lamps{margin:1rem 0 1.6rem}
.gate{padding-bottom:120px}.gate .frame img,.gate .frame .noimg{height:min(400px,40vh);width:min(300px,56vw)}
.gate>.gatego{position:fixed;left:0;right:0;bottom:0;margin:0;padding:1.2rem 0 1rem;background:linear-gradient(transparent,rgba(0,0,0,.4));z-index:2}
.gate.mood-white>.gatego{background:linear-gradient(transparent,rgba(255,236,200,.9))}
.gate{padding-bottom:170px}

/* ---------- Tricksy, the order assistant ---------- */
.tricksy{position:fixed;bottom:0;z-index:90;width:128px;cursor:pointer;user-select:none}
.tricksy.side-right{right:16px}.tricksy.side-left{left:258px}
/* Tricksy never blocks what is under him: only the little order badge and the open tray can be clicked. */
.tricksy{pointer-events:none}.tricksy img{display:block;width:100%;height:auto;filter:drop-shadow(0 8px 10px rgba(0,0,0,.28));transform-origin:50% 100%;pointer-events:none}.tricksy .tbubble{pointer-events:none}.tricksy .tbadge,.tricksy .ttray{pointer-events:auto;cursor:pointer}
.pose-happy img,.pose-rain img{animation:breathe 4s ease-in-out infinite}
.pose-chef img{animation:workbob 1.3s ease-in-out infinite}
.pose-paid img{animation:hop .5s ease-in-out 3}
.pose-late{width:150px}.pose-late img{animation:alarm .7s ease-in-out infinite}
.pose-late::before{content:"";position:absolute;inset:-20px -10px 0;background:radial-gradient(ellipse at 50% 70%,rgba(255,60,60,.35),transparent 65%);animation:glowpulse 1s ease-in-out infinite;pointer-events:none;border-radius:50%}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}
@keyframes workbob{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-5px) rotate(1.2deg)}}
@keyframes hop{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
@keyframes alarm{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg) translateY(-3px)}}
.tbubble{position:absolute;bottom:100%;right:10px;margin-bottom:-8px;min-width:150px;max-width:260px;padding:.5rem .8rem;border-radius:16px 16px 4px 16px;background:var(--solid);color:var(--ink);border:2px solid var(--acc);box-shadow:var(--shadow);font-size:.82rem;font-weight:600;animation:pop .4s both}
.side-left .tbubble{right:auto;left:10px;border-radius:16px 16px 16px 4px}
.pose-late .tbubble{border-color:#e53935;color:#b71c1c;background:#fff1f0}
.tbadge{position:absolute;top:6px;right:6px;min-width:24px;height:24px;border-radius:99px;background:var(--grad);color:#fff;font-weight:800;font-size:.8rem;display:grid;place-items:center;box-shadow:0 4px 10px rgba(0,0,0,.3)}
.tbadge.late{background:#e53935;animation:softpulse .8s ease-in-out infinite}
.ttray{position:absolute;bottom:100%;right:0;width:min(330px,86vw);max-height:60vh;overflow:auto;margin-bottom:6px;padding:.8rem;border-radius:18px;background:var(--solid);color:var(--ink);border:1px solid var(--line);box-shadow:0 20px 50px -14px rgba(0,0,0,.5);cursor:default;animation:pop .3s both}
.side-left .ttray{right:auto;left:0}
.trow{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.5rem 0;border-bottom:1px solid var(--line)}.trow:last-child{border-bottom:0}.trow.late b{color:#e53935}
.has-tricksy .waterpop{bottom:230px}
.timerrow{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap;margin:.5rem 0}.timerrow>span:first-child{font-size:.85rem;font-weight:600}
.ptotal{display:flex;justify-content:flex-end;gap:1.4rem;padding:.7rem .5rem 0;border-top:2px solid var(--line);margin-top:.3rem;font-size:.92rem}
@media(max-width:760px){.tricksy{width:96px}.tricksy.side-left{left:8px}.tricksy.side-right{right:8px}}

/* =====================================================================
   Chaipeedika Pro look: calm surfaces, clear hierarchy, touch-friendly.
   This layer sits on top of the base rules above (themes still set the accent colours).
   ===================================================================== */
:root{
 --page:color-mix(in srgb,var(--acc) 3%,#f4f5f3);
 --solid:#fff;--card:#fff;--ink:#15201a;--mute:#66726a;
 --line:#e4e8e3;--line2:#eef1ed;
 --r:14px;--r2:10px;
 --shadow:0 1px 2px rgba(16,32,22,.05),0 6px 18px -10px rgba(16,32,22,.14);
 --shadow2:0 12px 32px -12px rgba(16,32,22,.28);
 --accsoft:color-mix(in srgb,var(--acc) 10%,#fff);
 --navbg:color-mix(in srgb,var(--brand) 86%,#04130b);
 --tab:64px;--bar:56px;
 --safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px);
}
:root[data-mode="dark"]{--page:#0c0f0d;--solid:#161a17;--card:#161a17;--ink:#e9efe9;--mute:#98a59c;--line:#262c28;--line2:#1e2420;--accsoft:color-mix(in srgb,var(--acc) 18%,#161a17);--navbg:#0a0d0b}
@media(prefers-color-scheme:dark){:root:not([data-mode="light"]):not([data-mode="dark"]){--page:#0c0f0d;--solid:#161a17;--card:#161a17;--ink:#e9efe9;--mute:#98a59c;--line:#262c28;--line2:#1e2420;--accsoft:color-mix(in srgb,var(--acc) 18%,#161a17);--navbg:#0a0d0b}}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--page)!important;font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Inter","Noto Sans","Noto Sans Malayalam","Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overscroll-behavior-y:none;font-variant-numeric:tabular-nums}
button,a,input,select,textarea{touch-action:manipulation}
:focus-visible{outline:3px solid color-mix(in srgb,var(--acc) 45%,transparent);outline-offset:2px;border-radius:8px}
/* calm the old playful motion: no bouncing UI, only gentle fades */
main>*,.cards .card,.wave,.hero::after,.hero-btn,.upsell-ico,.fl.on,.tbl.occupied,.badge.low,.login .logo,.login-wrap,.festico,.step.on i,.waterpop .drop,nav a.on .ic{animation:none!important}
main>*{animation:softin .28s ease both!important}
@keyframes softin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.card:hover,.tile:hover,.chip:hover,nav a:hover,.hero-btn:hover,button.primary:hover,.floor:not(.edit) .tbl:hover{transform:none}
nav a:hover .ic,.card:hover .ico{animation:none}
.empty::before{content:none}
.empty{padding:1.4rem 0;text-align:center;color:var(--mute)}

/* ---- sidebar ---- */
.shell{grid-template-columns:252px minmax(0,1fr)}
nav{background:var(--navbg);padding:14px 12px 12px;gap:2px;border-right:0;scrollbar-width:thin;scrollbar-color:#ffffff33 transparent}
nav .brand{display:flex;align-items:center;gap:.7rem;padding:.35rem .5rem 1rem;color:#fff;font-size:1rem;font-weight:700}
nav .bmark{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(135deg,var(--brand2),var(--acc));color:#fff;font-weight:800;font-size:1.05rem;flex:none}
nav .bname{min-width:0}nav .bname b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.98rem}
nav .brand small{color:#ffffff99;font-size:.72rem;font-weight:500;text-transform:capitalize}
.navlist{display:flex;flex-direction:column;gap:2px}
.navsec{font-size:.68rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#ffffff7a;padding:.85rem .65rem .3rem}
nav a{display:flex;align-items:center;gap:.7rem;padding:0 .7rem;height:40px;border-radius:10px;color:#ffffffd6;font-size:.92rem;font-weight:500;position:relative}
nav a .ic{display:grid;place-items:center;width:20px;height:20px;flex:none;opacity:.9}
nav a .ic svg,.tab .ic svg,.iconbtn .ic svg,.cartfab .ic svg,.card .ico svg{width:100%;height:100%;display:block}
nav a:hover{background:#ffffff14;transform:none}
nav a.on{background:#ffffff1f;color:#fff;font-weight:650;box-shadow:none}
nav a.on::before{content:"";position:absolute;left:-12px;top:9px;bottom:9px;width:4px;border-radius:0 4px 4px 0;background:var(--acc);filter:brightness(1.35)}
nav .sp{flex:1;min-height:10px}
nav .who{display:flex;align-items:center;gap:.65rem;padding:.7rem .5rem;border-top:1px solid #ffffff1f;margin-top:.4rem;color:#fff}
nav .who b{display:block;font-size:.88rem}nav .who small{color:#ffffff8c;text-transform:capitalize}
.avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#ffffff26;color:#fff;font-weight:700;font-size:.9rem;flex:none}
.navfoot{display:flex;flex-direction:column;gap:1px}
.navfoot a{height:34px;font-size:.84rem;color:#ffffffb3}
.navfoot a .ic{width:17px;height:17px}
nav .wx{margin:.2rem 0 .3rem;background:#ffffff12;border-radius:12px}
.outletsel{margin:0 0 .6rem;width:100%;height:38px;background:#ffffff14;border:1px solid #ffffff26;color:#fff;border-radius:10px;padding:0 .6rem}
.appbar,.tabbar,.scrim,.cartfab{display:none}

/* ---- page ---- */
main{padding:28px 32px 40px;max-width:1320px;margin:0 auto}
main>h2,.maincol h2{font-size:1.55rem;font-weight:750;letter-spacing:-.02em;margin:0 0 1rem}
.bar{margin:0 0 1rem;gap:.6rem}
.festbar{margin:20px 32px 0;border-radius:var(--r);background:var(--brand);box-shadow:var(--shadow);padding:.65rem 1rem}
.hero{background:var(--brand);border-radius:var(--r);padding:1.25rem 1.5rem;box-shadow:var(--shadow);overflow:hidden}
.hero::after{display:none}
.hero h2{font-size:1.4rem;font-weight:700}
.hero-btn{background:#fff;color:var(--brand);border-radius:11px;padding:.65rem 1.1rem;font-weight:700;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.hero-btn:hover{box-shadow:0 4px 14px rgba(0,0,0,.2)}
.cards{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:16px}
.card{background:var(--solid);backdrop-filter:none;border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;box-shadow:var(--shadow)}
.card::before{display:none}
.card .ico{position:static;float:right;width:38px;height:38px;border-radius:11px;padding:9px;background:var(--accsoft);color:var(--acc);display:grid;place-items:center;font-size:0}
.card.c-good .ico{background:#e4f6ec;color:#0f9158}.card.c-bad .ico{background:#fdeaec;color:#d23a49}
.card .ico .ic{width:100%;height:100%;display:block}
.card .k{font-size:.74rem;color:var(--mute);text-transform:uppercase;letter-spacing:.06em;font-weight:650}
.card .v{font-size:1.6rem;font-weight:750;margin-top:.35rem;letter-spacing:-.02em}
.panel{background:var(--solid);backdrop-filter:none;border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;box-shadow:var(--shadow);margin-bottom:16px}
.panel h3,.garden h3{font-size:1rem;font-weight:700;margin:0 0 .75rem}
.two{gap:16px;margin-bottom:16px}

/* ---- buttons & forms ---- */
button{min-height:40px;padding:0 1rem;border-radius:var(--r2);border:1px solid var(--line);background:var(--solid);color:var(--ink);font-weight:550;box-shadow:none;transition:background .15s,border-color .15s,box-shadow .15s,transform .08s}
button:hover{background:var(--accsoft);border-color:color-mix(in srgb,var(--acc) 30%,var(--line));box-shadow:none}
button:active{transform:scale(.98)}
button.primary{background:var(--brand2);border:1px solid var(--brand2);color:#fff;font-weight:650;box-shadow:0 1px 2px rgba(0,0,0,.12)}
button.primary:hover{background:var(--brand);border-color:var(--brand)}
button.sm{min-height:32px;padding:0 .7rem;font-size:.84rem;border-radius:8px}
button.danger{color:var(--bad)}button.danger:hover{background:#fdeaec;border-color:#f6c5ca}
button[disabled]{opacity:.5}
input,select,textarea{min-height:42px;padding:.5rem .8rem;border:1px solid var(--line);border-radius:var(--r2);background:var(--solid);color:var(--ink);transition:border-color .15s,box-shadow .15s}
textarea{min-height:76px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 22%,transparent)}
label{font-size:.78rem;font-weight:650;color:var(--mute);margin:.9rem 0 .3rem}
.link{color:var(--acc);font-weight:600}
.seg{border-radius:11px;background:var(--line2);border:1px solid var(--line)}.seg button{min-height:32px;border:0;border-radius:8px}.seg button.on{box-shadow:var(--shadow)}

/* ---- tables ---- */
table{font-size:.92rem}
th{font-size:.7rem;padding:.7rem .75rem;background:color-mix(in srgb,var(--acc) 4%,var(--solid));border-bottom:1px solid var(--line);position:sticky;top:0}
td{padding:.75rem .75rem;border-bottom:1px solid var(--line2)}
tbody tr:hover{background:color-mix(in srgb,var(--acc) 4%,transparent)}
td.act{white-space:nowrap}td.act button{margin-left:.35rem}
.badge{padding:.12rem .6rem;font-size:.72rem}
.panel{overflow-x:auto}
.barrow .b{height:10px}.barrow .b i{background:var(--acc);border-radius:8px}

/* ---- billing ---- */
.pos{grid-template-columns:minmax(0,1fr) 380px;gap:16px}
.chips{display:flex;gap:.4rem;overflow-x:auto;flex-wrap:nowrap;padding:.15rem 0 .5rem;margin:.5rem 0;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;min-height:36px;padding:0 1rem;border-radius:99px;background:var(--solid);border:1px solid var(--line);font-size:.88rem;font-weight:550}
.chip.on{background:var(--brand2);border-color:var(--brand2);color:#fff}
.openrow{flex-wrap:wrap}
.menugrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.tile{min-height:84px;border-radius:12px;padding:.8rem .9rem;background:var(--solid);border:1px solid var(--line);box-shadow:none;justify-content:space-between;font-weight:500}
.tile b{font-weight:650;line-height:1.25;font-size:.94rem}
.tile span{color:var(--acc);font-weight:700}
.tile:hover{border-color:var(--acc);background:var(--accsoft)}
.tile:active{transform:scale(.97)}
.cart{top:16px}
.cart .btns{margin-top:.9rem}.cart .btns button{min-height:46px}
.line{padding:.6rem 0}
.qty button{width:34px;height:34px;min-height:34px;padding:0;border-radius:9px;font-size:1.1rem}
.tot .grand{font-size:1.25rem;border-top:1px dashed var(--line)}.tot .grand span:last-child{background:none;color:var(--ink)}
.bigtotal{background:none;color:var(--ink);font-weight:800}
.guestrow,.note,.qrbox,.tip,.wxtip{border-radius:12px;background:var(--accsoft);border:1px solid var(--line)}

/* ---- dialogs & toast ---- */
dialog{border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow2);padding:22px 22px 20px;width:min(480px,94vw)}
dialog::backdrop{background:rgba(8,20,14,.5);backdrop-filter:blur(2px)}
dialog[open]{animation:softin .2s ease both}
dialog h3{font-size:1.15rem;font-weight:700;margin-bottom:.4rem}
.btns{margin-top:1.2rem}
#toast{background:#16201a;color:#fff;border-radius:12px;padding:.7rem 1.1rem;box-shadow:var(--shadow2);font-weight:550;bottom:calc(24px + var(--safe-b))}

/* ---- login ---- */
.login-wrap{background:linear-gradient(160deg,var(--navbg),color-mix(in srgb,var(--brand) 70%,#000))!important;animation:none!important}
.login .card{border-radius:20px;padding:2rem 1.8rem;box-shadow:var(--shadow2)}
.login .card{animation:softin .4s both!important}
.login h1{background:none;color:var(--ink)}
.login button.primary{min-height:46px;font-size:1rem}
.login label{font-size:.8rem}

/* ---- wizard ---- */
.wiz{border-radius:20px;box-shadow:var(--shadow2);background:var(--solid);backdrop-filter:none}
.wiz-wrap{background:var(--page)}
.step.on i{background:var(--brand2)}.step.done i{background:var(--acc)}
.bigopt{border-radius:var(--r)}

/* ---- table map ---- */
.floor{border-radius:var(--r);border:1px solid var(--line);background-color:var(--solid);box-shadow:none}
.tbl{border-radius:14px;border:1px solid #0000001a;box-shadow:0 2px 6px rgba(0,0,0,.12)}
.tbl.free{background:#d9f4e5}.tbl.occupied{background:#fdd9dc}.tbl.reserved{background:#fff0c4}
.legend i{border-radius:4px}

/* ---- misc polish ---- */
.garden,.praystrip{border-radius:var(--r);box-shadow:var(--shadow)}
.garden{background:var(--solid);backdrop-filter:none}
.dashgrid{gap:16px}
.waterpop{border-radius:var(--r)}
.upsell{background:var(--brand);border-radius:var(--r);box-shadow:var(--shadow)}
.themebtn{border-radius:12px}
.tricksy{z-index:60}

/* ---- tablets & phones: drawer menu, bottom tabs, sheet dialogs, card tables ---- */
@media(max-width:900px){
 .shell{display:block}
 .appbar{display:flex;align-items:center;gap:.5rem;position:sticky;top:0;z-index:40;height:calc(var(--bar) + var(--safe-t));padding:var(--safe-t) 10px 0;background:color-mix(in srgb,var(--solid) 92%,transparent);backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid var(--line)}
 .iconbtn{width:44px;height:44px;min-height:44px;padding:0;border:0;background:transparent;display:grid;place-items:center;color:var(--ink);border-radius:12px}
 .iconbtn .ic{width:24px;height:24px;display:block}
 .apptitle{flex:1;min-width:0;line-height:1.2}.apptitle b{display:block;font-size:1.02rem;font-weight:700}.apptitle small{display:block;color:var(--mute);font-size:.74rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .appbar .avatar{background:var(--accsoft);color:var(--acc);cursor:pointer}
 nav{position:fixed;left:0;top:0;bottom:0;width:min(84vw,310px);height:auto;z-index:120;transform:translateX(-102%);transition:transform .28s cubic-bezier(.3,.8,.3,1);box-shadow:var(--shadow2);padding-top:calc(14px + var(--safe-t));padding-bottom:calc(12px + var(--safe-b));overscroll-behavior:contain}
 nav a{height:46px}
 body.navopen nav{transform:none}
 .scrim{display:block;position:fixed;inset:0;z-index:110;background:rgba(8,20,14,.5);opacity:0;pointer-events:none;transition:opacity .25s}
 body.navopen .scrim{opacity:1;pointer-events:auto}
 body.navopen{overflow:hidden}
 nav .wx{display:flex}
 main{padding:16px 14px calc(var(--tab) + 28px + var(--safe-b))}
 main>h2,.maincol h2{font-size:1.3rem;margin-bottom:.8rem}
 .festbar{margin:12px 14px 0}
 .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;height:calc(var(--tab) + var(--safe-b));padding:4px 6px var(--safe-b);background:color-mix(in srgb,var(--solid) 94%,transparent);backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);border-top:1px solid var(--line)}
 .tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--mute);font-size:.68rem;font-weight:600;border-radius:12px;cursor:pointer;-webkit-user-select:none;user-select:none;min-width:0;transition:color .15s,background .15s}
 .tab span:last-child{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .tab .ic{width:24px;height:24px;display:block}
 .tab.on{color:var(--acc)}.tab.on .ic{background:var(--accsoft);border-radius:14px;padding:0 14px;width:56px;height:30px;display:grid;place-items:center}.tab.on .ic svg{width:22px;height:22px}
 .tab:active{background:var(--line2)}
 /* inputs at 16px so phones never zoom the page */
 input,select,textarea{font-size:16px;min-height:46px}
 button{min-height:44px}button.sm{min-height:36px;font-size:.88rem}
 .hero{padding:1.1rem 1.15rem}.hero h2{font-size:1.25rem}
 .cards{grid-template-columns:1fr 1fr;gap:10px}.card{padding:14px}.card .v{font-size:1.25rem}.card .ico{width:32px;height:32px;padding:7px}
 .panel{padding:14px;border-radius:var(--r)}
 .two,.grid2,.choice,.pos{grid-template-columns:1fr}
 .bar{gap:.5rem}.bar input[type=month],.bar input[type=date]{flex:1 1 140px}
 .menugrid{grid-template-columns:repeat(2,1fr);gap:8px}.tile{min-height:78px}
 .cart{position:static}
 .cartfab{position:fixed;left:12px;right:12px;bottom:calc(var(--tab) + 10px + var(--safe-b));z-index:55;display:none;align-items:center;gap:.6rem;height:54px;padding:0 1rem;border-radius:16px;background:var(--brand2);color:#fff;border:0;box-shadow:var(--shadow2);font-size:.95rem}
 .cartfab.has:not(.away){display:flex;animation:softin .2s both}
 .cartfab .ic{width:22px;height:22px;display:block}.cartfab b{margin-left:auto}.cartfab em{font-style:normal;opacity:.85;font-size:.85rem;margin-left:.4rem}
 /* tables become readable cards */
 .panel table,.panel thead,.panel tbody,.panel tr,.panel td{display:block}
 .panel thead{display:none}
 .panel tbody tr{padding:.6rem 0;border-bottom:1px solid var(--line)}.panel tbody tr:last-child{border-bottom:0}
 .panel td,.panel td.num,.panel td.act{display:flex;justify-content:space-between;align-items:center;gap:1rem;text-align:right;white-space:normal;padding:.28rem 0;border:0}
 .panel td::before{content:attr(data-label);color:var(--mute);font-size:.74rem;font-weight:650;text-transform:uppercase;letter-spacing:.04em;text-align:left;flex:none}
 .panel td:not([data-label])::before{content:none}
 .panel td.act{justify-content:flex-end;padding-top:.5rem}
 .panel td.act::before{content:none}
 /* dialogs slide up like a sheet */
 dialog,dialog.wide{width:100%;max-width:none;margin:auto 0 0;border-radius:20px 20px 0 0;max-height:92dvh;padding:18px 18px calc(18px + var(--safe-b));border-bottom:0}
 dialog[open]{animation:sheet .28s cubic-bezier(.2,.8,.2,1) both}
 @keyframes sheet{from{transform:translateY(100%)}to{transform:none}}
 dialog::before{content:"";display:block;width:40px;height:4px;border-radius:4px;background:var(--line);margin:-6px auto 12px}
 .btns{position:sticky;bottom:-18px;background:var(--solid);padding:.8rem 0 0}.btns button{flex:1}
 #toast{bottom:calc(var(--tab) + 18px + var(--safe-b));max-width:92vw}
 /* table map: tidy grid of cards instead of a scrolling floor plan */
 .scroll{overflow:visible}
 .floor{position:static;width:auto;height:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;padding:12px;background-image:none;border-style:solid}
 .floor .tbl{position:static;width:auto;height:auto;min-height:92px;transform:none!important}
 .tricksy{bottom:calc(var(--tab) + 6px + var(--safe-b));width:84px}
 .waterpop{bottom:calc(var(--tab) + 14px + var(--safe-b));right:12px}
 .has-tricksy .waterpop{bottom:calc(var(--tab) + 120px)}
 .festbar{flex-wrap:wrap}
 .wiz{padding:1.2rem 1.1rem;border-radius:18px}
 .login-wrap{padding:14px}
}
@media(max-width:380px){.cards{grid-template-columns:1fr}.menugrid{grid-template-columns:1fr 1fr}}
@media(hover:none){button:hover,.tile:hover,.chip:hover{background:var(--solid);border-color:var(--line)}button.primary:hover{background:var(--brand2);border-color:var(--brand2)}.chip.on:hover{background:var(--brand2)}.tile:hover{background:var(--solid)}}
/* grid children may shrink, so wide content (chip rows, tables) scrolls inside its own box instead of stretching the page */
.pos>*,.two>*,.dashgrid>*,.maincol,.dashmain,.panel,.cart{min-width:0}
.pos{grid-template-columns:minmax(0,1fr) 380px}
@media(max-width:900px){.pos{grid-template-columns:minmax(0,1fr)}body{overflow-x:clip}}
@media(max-width:900px){
 nav{flex-direction:column;flex-wrap:nowrap;overflow-y:auto}
 nav .brand,nav .who{display:flex}nav .sp{display:block}
 nav a{padding:0 .7rem;font-size:.95rem}
 nav .wx{display:flex;flex:none;height:auto}
 .navlist{flex:none}
}
@media(max-width:900px){
 .panel td.act{flex-wrap:wrap;justify-content:flex-start;gap:.4rem}.panel td.act button{margin:0}
 .tricksy:not(.pose-late) .tbubble{display:none}
 .tricksy .tbadge{top:2px;right:2px}
}
@media(max-width:900px){
 .has-tricksy .cartfab{right:98px}.has-tricksy .cartfab em{display:none}
 .cartfab{z-index:70}
 .tricksy{width:76px}.pose-late{width:84px}
 .tbubble{font-size:.74rem;max-width:200px}
}

/* ---- gestures ---- */
.swipeable{touch-action:pan-y;position:relative;will-change:transform;user-select:none;-webkit-user-select:none}
.swipeable.swiping{transition:none;z-index:2}
.swipeable.armed[data-dir="left"]{background:#fdeaec;box-shadow:inset -6px 0 0 #d93a4a}
.swipeable.armed[data-dir="right"]{background:#e4f6ec;box-shadow:inset 6px 0 0 #12945f}
.tile,.tbl,.tbadge{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.ptr{position:fixed;left:50%;top:calc(var(--bar) + var(--safe-t));transform:translate(-50%,0);z-index:90;padding:.35rem .9rem;border-radius:99px;background:var(--solid);color:var(--mute);border:1px solid var(--line);box-shadow:var(--shadow2);font-size:.78rem;font-weight:600;pointer-events:none;transition:opacity .2s}
.qmenu{position:fixed;z-index:400;min-width:190px;padding:6px;border-radius:14px;background:var(--solid);border:1px solid var(--line);box-shadow:var(--shadow2);display:flex;flex-direction:column;gap:2px;animation:softin .15s both}
.qmenu .qtitle{padding:.35rem .7rem .25rem;font-size:.72rem;font-weight:700;color:var(--mute);text-transform:uppercase;letter-spacing:.06em}
.qmenu button{justify-content:flex-start;text-align:left;border:0;background:transparent;min-height:44px;padding:0 .8rem;border-radius:10px;width:100%;font-size:.95rem}
.qmenu button:hover,.qmenu button:active{background:var(--accsoft)}
.qmenu button.danger{color:var(--bad)}

/* ---- Tricksy: discard / hide ---- */
.tbubble{padding-right:2rem;pointer-events:auto;touch-action:pan-y}
.tclose{position:absolute;top:2px;right:2px;width:28px;height:28px;min-height:28px;padding:0;border:0;border-radius:50%;background:transparent;color:inherit;opacity:.7;font-size:.9rem;line-height:1;pointer-events:auto}
.tclose:hover{background:#0000000f;opacity:1}
.thide{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap;margin:.4rem 0 .2rem;padding-bottom:.5rem;border-bottom:1px solid var(--line)}
.trow .sm{flex:none;margin-left:.3rem}
.tback{position:fixed;right:14px;bottom:14px;z-index:60;width:44px;height:44px;min-height:44px;padding:0;border-radius:50%;font-size:1.3rem;background:var(--solid);border:1px solid var(--line);box-shadow:var(--shadow2);display:grid;place-items:center}
@media(max-width:900px){.tback{bottom:calc(var(--tab) + 14px + var(--safe-b));right:12px}.has-tricksy .tback{display:none}}

html,body{touch-action:pan-y pinch-zoom}
.tricksy.pose-late .tbubble{pointer-events:auto}.tricksy .tclose{pointer-events:auto}
.tbubble.swipeable{position:absolute}

/* ---- GST ---- */
.gstnote{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;padding:.8rem 1rem;margin-bottom:1rem;border-radius:var(--r);background:var(--accsoft);border:1px solid color-mix(in srgb,var(--acc) 30%,var(--line))}
.gstnote>div{flex:1;min-width:180px}.gstnote small{display:block;color:var(--mute)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
details summary{cursor:pointer}

/* ---- demo logins on the sign-in page ---- */
.login{max-width:420px}
.demobox{margin-top:14px;padding:16px 16px 14px;border-radius:20px;background:#fff;color:#1f2a22;box-shadow:0 30px 80px -20px rgba(0,0,0,.5)}
.demohead{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;margin-bottom:.6rem}
.demorow{padding:.55rem 0;border-top:1px solid #e9eee8}
.demogo{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:1px;height:auto;min-height:46px;padding:.55rem .9rem;text-align:left}
.demogo small{opacity:.85;font-weight:500}
.democred{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;margin-top:.4rem}
.democred code{font-size:.78rem;padding:.15rem .5rem;border-radius:8px;background:#eef3ea;color:#1f2a22;word-break:break-all}
.demoall{margin-top:.6rem;width:100%}
@media(min-width:900px){
 .login:has(.demobox:not([style*="none"])){max-width:900px;display:flex;gap:18px;align-items:flex-start;justify-content:center}
 .login:has(.demobox:not([style*="none"])) .card{flex:1 1 380px;max-width:400px;margin:0}
 .login:has(.demobox:not([style*="none"])) .demobox{flex:1 1 400px;max-width:440px;margin-top:0}
}
.democred button.sm{min-height:28px;padding:0 .55rem}

.demochip{display:inline-flex;gap:.4rem;align-items:center;border:0;background:transparent;padding:0;min-height:0;box-shadow:none;cursor:pointer}
.demochip:hover{background:transparent}.demochip code{cursor:pointer}.demochip:hover code{background:#d9ecd9}