@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&display=swap');
/* Queuey styles (one shared file for every page). Theme colours live in these CSS variables: change them here, not per rule. */
:root{--pink:#ffafcc;--pink2:#ffc8dd;--lav:#cdb4db;--blue:#a2d2ff;--blue2:#bde0fe;--mint:#b9fbc0;--yellow:#fff3b0;--ink:#4a3366;--soft:#8b7aa0;--bg:#fff7fb;--r:22px}
/* Base: [hidden] always wins (JS toggles the hidden attribute everywhere), soft pastel background, Fredoka font. */
*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;font-family:Fredoka,ui-rounded,system-ui,sans-serif;color:var(--ink);background:var(--bg);background-image:radial-gradient(circle at 10% 10%,#ffe5f0 0,transparent 30%),radial-gradient(circle at 90% 20%,#e3f2ff 0,transparent 30%),radial-gradient(circle at 50% 100%,#f1e8ff 0,transparent 40%);min-height:100vh}
a{color:#9b5de5}.wrap{max-width:980px;margin:0 auto;padding:16px}.narrow{max-width:460px}
nav{display:flex;align-items:center;gap:10px;padding:12px 16px;max-width:980px;margin:0 auto}nav .brand{display:flex;align-items:center;gap:8px;font-weight:700;font-size:1.5rem;text-decoration:none;color:var(--ink)}nav .brand img{width:40px;animation:bob 3s ease-in-out infinite}nav .sp{flex:1}nav a.l{text-decoration:none;color:var(--ink);font-weight:500;padding:6px 10px;border-radius:99px}nav a.l:hover{background:#fff}
/* Cards: the white rounded boxes used on every page. */
.card{background:#fff;border-radius:var(--r);padding:20px;box-shadow:0 8px 0 #f3dcea,0 12px 30px rgba(155,93,229,.08);margin-bottom:16px;animation:pop .4s cubic-bezier(.3,1.6,.6,1) both}
h1,h2,h3{margin:.2em 0 .4em;line-height:1.15}h1{font-size:2.2rem}
/* Buttons: chunky pastel buttons with a 'pressed' shadow. Variants: .blue .mint .ghost .sm .big */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:99px;padding:12px 20px;font:600 1rem Fredoka,sans-serif;cursor:pointer;background:var(--pink);color:var(--ink);box-shadow:0 4px 0 #e98bb0;transition:transform .12s,box-shadow .12s;text-decoration:none}
.btn:hover{transform:translateY(-2px)}.btn:active{transform:translateY(2px);box-shadow:0 1px 0 #e98bb0}.btn.blue{background:var(--blue);box-shadow:0 4px 0 #7fb5ea}.btn.mint{background:var(--mint);box-shadow:0 4px 0 #8fd998}.btn.lav{background:var(--lav);box-shadow:0 4px 0 #ad8fc2}.btn.ghost{background:#fff;box-shadow:0 4px 0 #eadcf2}.btn.yellow{background:var(--yellow);box-shadow:0 4px 0 #e6d77f}.btn.sm{padding:7px 12px;font-size:.88rem}.btn.big{padding:16px 28px;font-size:1.15rem}.btn:disabled{opacity:.5}
input,textarea,select{width:100%;padding:12px 14px;border-radius:16px;border:2px solid #f0e2f5;font:inherit;color:var(--ink);background:#fffafd;margin:4px 0 12px;outline:none;transition:border .2s}input:focus,textarea:focus,select:focus{border-color:var(--lav)}label{font-weight:500;font-size:.92rem}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}.muted{color:var(--soft)}.center{text-align:center}
.pill{display:inline-block;padding:3px 10px;border-radius:99px;font-size:.8rem;font-weight:600;background:var(--blue2)}.pill.open{background:var(--mint)}.pill.paused{background:var(--yellow)}.pill.closed{background:#eee}
.stat{background:linear-gradient(135deg,#fff,#fff6fb);border-radius:18px;padding:14px;text-align:center}.stat b{display:block;font-size:2rem}
.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:12px 20px;border-radius:99px;z-index:99;animation:pop .3s both}
.err{color:#d6336c;min-height:1.2em}
/* Mascot + big position number on the wait page. Shared keyframes (bob, pop, wiggle, pulse) are defined below. */
.mascot{width:110px;animation:bob 3s ease-in-out infinite}.mascot.party{animation:wiggle .5s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-8px) rotate(-3deg)}}@keyframes pop{from{opacity:0;transform:scale(.85) translateY(10px)}}@keyframes wiggle{25%{transform:rotate(-12deg) scale(1.1)}75%{transform:rotate(12deg) scale(1.1)}}@keyframes pulse{50%{transform:scale(1.06)}}
.bignum{font-size:5rem;font-weight:700;line-height:1;background:linear-gradient(135deg,#ff8fab,#9b5de5);-webkit-background-clip:text;color:transparent;animation:pulse 2s infinite}
/* Ticket rows in the staff console. */
.tix{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:16px;background:#fffafd;margin-bottom:8px;border:2px dashed #f3dcea}.tix .n{font-weight:700;background:var(--pink2);border-radius:12px;padding:4px 10px}.tix .nm{flex:1}
.promo{border-radius:20px;padding:16px;min-height:120px;transition:opacity .4s}.promo.offer{background:linear-gradient(135deg,#fff3b0,#ffc8dd)}.promo.fact{background:linear-gradient(135deg,#bde0fe,#cdb4db)}.promo.announcement{background:linear-gradient(135deg,#b9fbc0,#bde0fe)}
/* Analytics bar charts (plain divs, height set inline by JS). */
.bars{display:flex;align-items:flex-end;gap:3px;height:160px}.bars div{flex:1;background:linear-gradient(var(--pink),var(--lav));border-radius:8px 8px 3px 3px;min-height:3px;position:relative;animation:grow .8s both}.bars div:hover{filter:brightness(.9)}@keyframes grow{from{transform:scaleY(0);transform-origin:bottom}}
.xl{display:flex;gap:3px;font-size:.62rem;color:var(--soft)}.xl span{flex:1;text-align:center}
table{width:100%;border-collapse:collapse}td,th{padding:8px;text-align:left;border-bottom:1px solid #f6eaf2}
/* Homepage hero: two columns on desktop (copy + animated phone), stacked on mobile. */
.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:20px;align-items:center;padding:30px 0}@media(max-width:700px){.hero{grid-template-columns:1fr;text-align:center}h1{font-size:1.8rem}}
.phone{background:#fff;border-radius:36px;padding:18px;box-shadow:0 10px 0 #f3dcea;max-width:300px;margin:auto;border:6px solid var(--ink)}
.confetti{position:fixed;top:-20px;font-size:1.6rem;animation:fall 3s linear forwards;z-index:50;pointer-events:none}@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}
.banner{background:var(--yellow);border-radius:16px;padding:10px 14px;margin-bottom:10px;animation:pop .4s both}
/* ---- v1.1: forms, console, homepage, wait scene ---- */
.req{color:#d6336c}label.check{display:flex;align-items:center;gap:8px;margin:2px 0 12px;font-weight:500}label.check input{width:auto;margin:0;accent-color:#ff8fab;transform:scale(1.2)}
.telwrap{display:flex;gap:6px}.telwrap .cc{width:78px;flex:none;text-align:center}.telwrap input[name=phone]{flex:1}
/* Console extras: party-size filter states (.fit highlighted, .dim faded), chips, WhatsApp message menu. */
.tix{flex-wrap:wrap}.tix.dim{opacity:.38}.tix.fit{border-color:#8fd998;background:#f3fff4;border-style:solid}.tix .meta{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.chip{display:inline-block;padding:2px 8px;border-radius:99px;font-size:.75rem;background:#f6eefa;color:var(--ink)}.chip.party{background:var(--blue2);font-weight:600}.chip.staff{background:var(--yellow)}.chip.warn{background:#ffe3e3}.chip.f{background:#fff0f6}
.acts{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
details.msgs{position:relative}details.msgs summary{list-style:none;cursor:pointer}details.msgs summary::-webkit-details-marker{display:none}
details.msgs .menu{position:absolute;right:0;top:calc(100% + 6px);z-index:20;background:#fff;border-radius:16px;box-shadow:0 10px 30px rgba(74,51,102,.18);padding:10px;width:290px;text-align:left}
details.msgs .menu .mr{display:flex;align-items:center;gap:6px;padding:6px 4px;border-bottom:1px dashed #f3dcea}details.msgs .menu .mr:last-child{border:0}details.msgs .menu .mr span{flex:1;font-size:.88rem}
.filterbar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;background:#f7fbff;border-radius:16px;padding:8px 10px;margin-bottom:10px}.filterbar input{width:64px;margin:0;padding:6px 8px}
/* Queue settings: custom field definition rows. */
.fdef{display:grid;grid-template-columns:1.4fr 1fr auto auto;gap:6px;align-items:center;background:#fffafd;border:2px dashed #f3dcea;border-radius:16px;padding:8px;margin-bottom:8px}.fdef input,.fdef select{margin:0}.fdef .opts{grid-column:1/-1}
@media(max-width:520px){.fdef{grid-template-columns:1fr 1fr}}
.note{background:#fff8e1;border-radius:14px;padding:8px 12px;font-size:.88rem}
/* homepage */
.tagline{font-size:1.25rem;font-weight:600;color:#ff8fab;margin:.2em 0 .6em}
section.sec{padding:26px 0 6px}section.sec>h2{text-align:center;font-size:1.8rem}section.sec>p.lead{text-align:center;max-width:640px;margin:0 auto 18px}
/* animated workflow: frames are switched by /workflow.js (adds .on to the active frame + step) */
/* The phone body. aspect-ratio keeps a real-phone 9:19.5 shape at any width; :before is the notch, :after the home bar. */
.wf{--d:15s;display:grid;gap:16px;justify-items:center}
.wf .stage{position:relative;width:min(230px,64vw);aspect-ratio:9/19.5;background:#fff;border:7px solid var(--ink);border-radius:46px;box-shadow:0 10px 0 #f3dcea,inset 0 0 0 3px #f6eefa;overflow:hidden}
.wf .stage:before{content:'';position:absolute;top:0;left:50%;width:44%;height:24px;border-radius:0 0 16px 16px;background:var(--ink);transform:translateX(-50%);z-index:3}
.wf .stage:after{content:'';position:absolute;bottom:8px;left:50%;width:36%;height:5px;border-radius:9px;background:#e3d6ec;transform:translateX(-50%);z-index:3}
/* Each step is a stacked layer; only the one with .on is visible. .out slides the previous step off to the left. */
/* No JS (or JS failed): the first frame is shown statically. */
.wf .fr{position:absolute;inset:0;padding:40px 16px 22px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;opacity:0;visibility:hidden;transform:translateX(24px);transition:opacity .45s ease,transform .45s ease,visibility 0s .45s}
.wf .fr.on{opacity:1;visibility:visible;transform:none;transition:opacity .45s ease,transform .45s ease,visibility 0s}.wf .fr.out{transform:translateX(-24px)}
.wf.js ol.steps li{cursor:pointer}.wf:not(.js) .fr.f1{opacity:1;visibility:visible;transform:none}
.wf .cap{font-weight:600}.wf .sm{font-size:.82rem;color:var(--soft)}
/* Little looping details inside individual frames (QR scan line, button tap, wait bar, message drop, mascot buzz). */
/* workflow.js restarts these each time their frame becomes visible. */
.wf .qr{position:relative;width:130px;height:130px}.wf .scanline{position:absolute;left:-6px;right:-6px;height:4px;border-radius:4px;background:#ff8fab;box-shadow:0 0 12px #ff8fab;animation:scan 1.4s ease-in-out infinite alternate}@keyframes scan{from{top:4px}to{top:122px}}
.wf .mini{width:100%;text-align:left}.wf .mini div{background:#fffafd;border:2px solid #f0e2f5;border-radius:12px;padding:7px 10px;margin:5px 0;font-size:.85rem}
.wf .tap{animation:tap 1s ease-in-out infinite}@keyframes tap{50%{transform:scale(.94);box-shadow:0 1px 0 #e98bb0}}
.wf .num{font-size:3.4rem;font-weight:700;line-height:1;background:linear-gradient(135deg,#ff8fab,#9b5de5);-webkit-background-clip:text;color:transparent}
.wf .bar{width:80%;height:10px;border-radius:9px;background:#f3e8f8;overflow:hidden}.wf .bar i{display:block;height:100%;width:30%;border-radius:9px;background:linear-gradient(90deg,var(--blue),var(--pink));animation:fill 3s ease-out infinite}@keyframes fill{to{width:72%}}
.wf .bubble{background:#dcf8c6;border-radius:16px 16px 16px 4px;padding:10px 12px;text-align:left;font-size:.85rem;box-shadow:0 4px 14px rgba(0,0,0,.08);animation:drop 3s ease-out infinite}@keyframes drop{0%{transform:translateY(-40px);opacity:0}15%,100%{transform:none;opacity:1}}
.wf .buzz{animation:buzz 3s infinite}@keyframes buzz{20%,24%,28%{transform:rotate(-8deg)}22%,26%,30%{transform:rotate(8deg)}32%{transform:none}}
.wf .counter{display:flex;align-items:flex-end;gap:6px}.wf .counter img{width:62px}.wf .counter img.c2{width:52px;animation:bob 2s ease-in-out infinite}.wf .desk{width:150px;height:14px;background:var(--lav);border-radius:8px}
.wf ol.steps{list-style:none;padding:0;margin:0;display:flex;gap:6px;flex-wrap:wrap;justify-content:center;max-width:520px}
.wf ol.steps li{display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:99px;background:#fff;font-size:.85rem;font-weight:500;box-shadow:0 3px 0 #f3dcea;transition:background .3s,transform .3s}.wf ol.steps li.on{background:var(--pink2);transform:translateY(-3px)}
.wf ol.steps li b{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#f6eefa;font-size:.75rem}
/* calm wait scene */
/* Wait page calm scene (SVG): breathing mascot, drifting clouds, twinkling stars, friends ahead in line. */
.scene{width:100%;max-width:380px;display:block;margin:0 auto 6px}
.scene .breathe{transform-box:fill-box;transform-origin:50% 100%;animation:breathe 5.5s ease-in-out infinite}@keyframes breathe{50%{transform:scale(1.035,1.05)}}
.scene .cloud{animation:drift 18s ease-in-out infinite alternate}.scene .cloud.c2{animation-duration:24s;animation-direction:alternate-reverse}@keyframes drift{to{transform:translateX(26px)}}
.scene .star{animation:twinkle 4s ease-in-out infinite}.scene .star:nth-of-type(2n){animation-delay:1.5s}.scene .star:nth-of-type(3n){animation-delay:2.6s}@keyframes twinkle{50%{opacity:.25}}
.scene .steam{animation:steam 4s ease-in-out infinite;opacity:0}.scene .steam.s2{animation-delay:2s}@keyframes steam{0%{opacity:0;transform:translateY(4px)}40%{opacity:.8}100%{opacity:0;transform:translateY(-14px)}}
.scene .friend{animation:sway 6s ease-in-out infinite;transform-box:fill-box;transform-origin:bottom center}.scene .friend.f2{animation-delay:-2s}.scene .friend.f3{animation-delay:-4s}@keyframes sway{50%{transform:translateY(-3px) rotate(-2deg)}}
.bignum.calm{animation:none;font-size:4rem}.calmcopy{color:var(--soft);font-size:1.02rem;min-height:2.6em;transition:opacity .8s}
/* accessibility: respect reduced motion everywhere */
/* Users who ask for less motion: all CSS animations/transitions off. The homepage steps still advance (instant swaps */
/* every 4.5s from workflow.js), so nobody gets stuck on a single frame. */
@media (prefers-reduced-motion: reduce){
  *,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .wf .fr.out{transform:none}.wf .bar i{width:60%}.scene .steam{opacity:.6}
  .confetti{display:none}
}
.wrap.wide{max-width:1220px}nav.wide{max-width:1220px}
/* Console layout: waiting list on the left, now serving / tools on the right; single column under 860px. */
.cgrid{display:grid;gap:16px;grid-template-columns:minmax(0,1.55fr) minmax(320px,1fr);align-items:start}@media(max-width:860px){.cgrid{grid-template-columns:1fr}}
.cgrid .tix .nm{min-width:200px}.cgrid .tix .acts{margin-left:auto}
.lochead{margin:18px 0 10px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}.lochead small{font-weight:400;font-size:.85rem}
.pill.loc{background:var(--pink2)}
/* homepage content sections: two-column cards, tick lists, setup + closing call to action */
.grid.two{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
ul.ticks{list-style:none;padding:0;margin:.4em 0 0}ul.ticks li{position:relative;padding:5px 0 5px 26px;line-height:1.4}ul.ticks li:before{content:'🌸';position:absolute;left:0;top:5px;font-size:.9rem}
.setup{background:linear-gradient(135deg,#fff,#f3fbff)}.closing .card{background:linear-gradient(135deg,#fff0f6,#f3e8ff);padding:30px 20px}
.wf ol.steps li{max-width:240px;text-align:left}
.wfh{margin:0;font-size:1.1rem}