/* Phones at the Table: app shell, opening flow and table screens */
:root{--cream:#f8eedc;--red:#ef4a2c;--blue:#1d7fd6;--green:#1f9d58;--yellow:#f5c12e;--black:#141414}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--cream);overflow:hidden;font:15px/1.45 "DM Sans","Helvetica Neue",Helvetica,Arial,sans-serif;color:var(--black);overscroll-behavior:none}
body.desk{background:#2a2622;display:flex;align-items:center;justify-content:center}
#phoneWrap{position:relative;overflow:hidden;margin:0 auto}
body.desk #phoneWrap{border-radius:28px;box-shadow:0 0 0 6px #111,0 18px 50px rgba(0,0,0,.45)}
#stage{position:absolute;left:0;top:0;width:430px;height:932px;transform-origin:0 0;overflow:hidden;background:var(--cream);user-select:none;-webkit-user-select:none}
.layer{position:absolute;inset:0;overflow:hidden}
.layer[hidden]{display:none}
#chrome{position:absolute;inset:0;pointer-events:none;z-index:40}
#chrome > *{pointer-events:auto}
img{display:block}
input,textarea{-webkit-user-select:text;user-select:text}
.abs{position:absolute}
.toast{position:absolute;left:50%;top:96px;transform:translateX(-50%);background:#111;color:#fff;padding:10px 16px;border-radius:24px;font:500 14px/1.3 "DM Sans",sans-serif;z-index:60;white-space:nowrap;max-width:400px;overflow:hidden;text-overflow:ellipsis;opacity:0;transition:opacity .25s;pointer-events:none}
.toast.on{opacity:1}
.netpill{position:absolute;left:50%;top:10px;transform:translateX(-50%);background:#e8a400;color:#111;font:700 13px/1 "DM Sans",sans-serif;padding:7px 12px;border-radius:20px;z-index:61}

/* opening flow */
.topbar{position:absolute;left:0;right:0;top:0;height:84px;display:flex;align-items:center;justify-content:center;z-index:5}
.topbar h1{margin:0;font:400 30px/1 "Archivo Black","Arial Black",sans-serif;letter-spacing:-.01em;padding-top:18px;white-space:nowrap}
.topbar .back,.topbar .more{position:absolute;top:30px;width:44px;height:44px;border:0;background:none;cursor:pointer;display:grid;place-items:center;color:var(--black)}
.topbar .back{left:12px}.topbar .more{right:12px}
.pill{position:absolute;left:45px;width:340px;height:74px;border-radius:40px;border:0;font:700 27px/1 "DM Sans",sans-serif;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:14px;transition:transform .15s,opacity .2s}
.pill:active{transform:scale(.97)}
.pill.red{background:var(--red)}.pill.blue{background:var(--blue)}.pill.black{background:var(--black)}
.pill.outline{background:transparent;color:var(--black);border:3px solid var(--black)}
.pill:disabled{opacity:.35;cursor:default;transform:none}
.big{font:400 66px/.95 Anton,Impact,"Arial Narrow",sans-serif;margin:0;white-space:nowrap;transform-origin:left top}
.title{font:400 40px/1.05 "Archivo Black","Arial Black",sans-serif;text-align:center;margin:0;letter-spacing:-.01em}
.lede{font-size:22px;line-height:1.3;text-align:center;margin:0}
.codebox{position:absolute;left:58px;width:314px;height:92px;border:2px solid #8d8474;border-radius:16px;display:flex;align-items:center;justify-content:center;gap:26px;font:400 62px/1 "Archivo Black","Arial Black",sans-serif;background:rgba(255,255,255,.25)}
.boxes{position:absolute;left:30px;right:30px;display:flex;gap:10px}
.boxes input{width:0;flex:1;height:100px;border:2px solid #8d8474;border-radius:14px;background:rgba(255,255,255,.35);font:400 52px/1 "Archivo Black","Arial Black",sans-serif;text-align:center;color:var(--black);outline:none;text-transform:uppercase;padding:0}
.boxes input:focus{border-color:var(--blue);background:#fff}
.field{position:absolute;left:30px;right:30px}
.field label{display:block;font-size:22px;margin:0 0 8px 6px}
.field input{width:100%;height:68px;border:2px solid #8d8474;border-radius:16px;background:rgba(255,255,255,.35);font:500 28px/1 "DM Sans",sans-serif;padding:0 22px;outline:none;color:var(--black)}
.field input:focus{border-color:var(--blue);background:#fff}
.err{position:absolute;left:30px;right:30px;color:var(--red);font-weight:700;font-size:15px;text-align:center}
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.chips span{background:#fff;border:2px solid var(--black);border-radius:30px;padding:6px 14px 5px;font-weight:700;font-size:17px;animation:pop .4s cubic-bezier(.2,1.5,.4,1) both}
.chips span i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:7px;vertical-align:1px}
.chips span.off{opacity:.45}
.gcard{position:absolute;left:20px;width:390px;cursor:pointer;transition:transform .15s,opacity .2s;filter:drop-shadow(0 4px 0 rgba(0,0,0,.08))}
.gcard:active{transform:scale(.98)}
.gcard .badge{position:absolute;right:14px;top:12px;background:#111;color:#fff;font:700 13px/1 "DM Sans",sans-serif;padding:6px 10px;border-radius:20px}
.qrwrap{position:absolute;left:0;right:0;display:flex;justify-content:center}
.qr{background:#fff;padding:10px;border-radius:10px}
.qr svg{display:block}
.dots i{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--black);margin:0 4px;animation:bounce 1.2s infinite}
.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}
.step{position:absolute;left:34px;right:34px;display:flex;gap:16px;align-items:flex-start}
.step b{flex:none;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font:400 28px/1 "Archivo Black",sans-serif;color:#fff}
.step div{font-size:18px;line-height:1.35}
.step div strong{display:block;font:400 22px/1.1 "Archivo Black",sans-serif;margin-bottom:4px}

/* table menu button + sheet */
.menubtn{position:absolute;right:10px;top:10px;width:46px;height:46px;border-radius:50%;border:2px solid #111;background:rgba(255,255,255,.9);display:grid;place-items:center;cursor:pointer;z-index:45;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.sheet{position:absolute;inset:0;background:rgba(0,0,0,.5);z-index:50;display:flex;align-items:flex-end}
.sheet .in{width:100%;background:var(--cream);border-radius:24px 24px 0 0;padding:22px 24px 30px;animation:rise .3s cubic-bezier(.2,.9,.3,1) both;max-height:860px;overflow:auto}
.sheet h3{margin:0 0 4px;font:400 26px/1.1 "Archivo Black",sans-serif}
.sheet .code{font:400 54px/1 "Archivo Black",sans-serif;letter-spacing:.18em;margin:6px 0 12px}
.sheet ul{list-style:none;margin:10px 0 18px;padding:0;display:grid;gap:6px}
.sheet li{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:700;background:#fff;border-radius:12px;padding:10px 12px}
.sheet li i{width:12px;height:12px;border-radius:50%}
.sheet li em{font-style:normal;font-weight:500;color:#776d5e;font-size:14px}
.sheet li button{margin-left:auto;border:0;background:none;color:var(--red);font:700 14px "DM Sans",sans-serif;cursor:pointer}
.sheet .row{display:grid;gap:10px}
.sheet .btn{height:58px;border-radius:30px;border:0;font:700 20px "DM Sans",sans-serif;cursor:pointer;color:#fff;background:var(--black)}
.sheet .btn.red{background:var(--red)}.sheet .btn.ghost{background:transparent;color:var(--black);border:2px solid var(--black)}

/* motion */
@keyframes pop{0%{transform:scale(0);opacity:0}70%{transform:scale(1.08);opacity:1}100%{transform:scale(1)}}
@keyframes rise{from{transform:translateY(50px);opacity:0}to{transform:none;opacity:1}}
@keyframes drop{0%{transform:translateY(-60px) rotate(-4deg);opacity:0}70%{transform:translateY(6px) rotate(1deg);opacity:1}100%{transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes inL{from{transform:translateX(-460px)}to{transform:none}}
@keyframes inR{from{transform:translateX(460px)}to{transform:none}}
@keyframes bounce{0%,80%,100%{transform:translateY(0)}40%{transform:translateY(-10px)}}
@keyframes blobs{from{transform:scale(1.15);opacity:0}to{transform:none;opacity:1}}
.a-pop{animation:pop .5s cubic-bezier(.2,1.4,.4,1) both}
.a-rise{animation:rise .5s cubic-bezier(.2,.9,.3,1) both}
.a-drop{animation:drop .6s cubic-bezier(.2,1.2,.4,1) both}
.a-fade{animation:fade .5s both}
.a-inL{animation:inL .55s cubic-bezier(.2,.9,.3,1) both}
.a-inR{animation:inR .55s cubic-bezier(.2,.9,.3,1) both}
.a-blobs{animation:blobs .9s ease-out both}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01s!important}}