/* Loyalty app pages: member, staff, admin, nfc */
.page{padding-top:18px;padding-bottom:60px} .wrap.page{max-width:520px}
.hero-m{text-align:center;padding:10px 0 4px} .hero-m .mark{width:84px;height:84px;margin:0 auto 4px;color:var(--ink)} .hero-m .mark svg{width:100%;height:100%}
.hero-m h1{font-size:30px;margin:0;line-height:1} .hero-m .sub{font-family:var(--hand);font-size:22px;color:var(--ink-2)}
.member-card{padding:22px 20px 20px;margin-top:14px;position:relative;overflow:hidden}
.member-card:before{content:"";position:absolute;inset:0;background:radial-gradient(70% 60% at 100% 0%,rgba(227,162,90,.18),transparent 60%);pointer-events:none}
.member-card>*{position:relative}
.member-card .who{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:16px}
.member-card .who h2{font-size:24px;margin:0;line-height:1.1} .member-card .who .since{font-family:var(--hand);font-size:17px;color:var(--ink-2)}
.member-card .who .mark{width:40px;height:40px;color:var(--ink-3)}
.progress{font-family:var(--hand);font-size:22px;text-align:center;margin:16px 0 6px;color:var(--ink-2)} .progress b{font-family:var(--head);font-weight:400;color:var(--honey);font-size:20px}
.ready{margin-top:14px;padding:16px;border-radius:14px;background:linear-gradient(135deg,#F7E6CF,#F1D4AF);text-align:center;border:1.5px solid var(--honey)}
.ready h3{margin:0 0 4px;font-size:22px;color:var(--honey)} .ready p{margin:0;color:var(--ink-2);font-size:14px}
.waiting{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;background:var(--paper-2);border:1px dashed var(--line-2);margin-top:14px}
.waiting .dot{width:12px;height:12px;border-radius:50%;background:var(--honey);animation:blink 1.1s ease-in-out infinite} @keyframes blink{50%{opacity:.25;transform:scale(.7)}}
.waiting b{font-family:var(--head);font-weight:400;display:block} .waiting span{font-size:13px;color:var(--ink-3)}
.waiting button{margin-left:auto;background:none;border:0;text-decoration:underline;color:var(--ink-3);font-size:13px}
.hist{margin-top:22px} .hist h3{font-size:20px;margin:0 0 6px;display:flex;justify-content:space-between;align-items:baseline} .hist h3 small{font-family:var(--hand);font-size:16px;color:var(--ink-2)}
.hist ul{list-style:none;margin:0;padding:0} .hist li{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:9px 0;border-bottom:1px dashed var(--line);font-size:14px;min-width:0} .hist li .d{min-width:0;overflow-wrap:anywhere}
.hist li .d{font-family:var(--head);font-size:15px} .hist li .t{color:var(--ink-3);font-size:13px;white-space:nowrap;flex:0 0 auto}
.hist li.free .d{color:var(--honey)} .hist li.free .d:after{content:" · free";font-family:var(--hand);font-size:15px}
.ann{margin-top:18px;display:flex;flex-direction:column;gap:10px}
.ann .a{padding:14px 16px;border-radius:14px;background:var(--card);border:1px solid var(--line);display:flex;gap:12px;align-items:flex-start}
.ann .a .ic{width:34px;height:34px;flex:0 0 auto;border-radius:50%;background:var(--paper-2);display:grid;place-items:center;color:var(--honey)} .ann .a .ic svg{width:18px;height:18px}
.ann .a b{font-family:var(--head);font-weight:400;display:block} .ann .a p{margin:2px 0 0;font-size:14px;color:var(--ink-2)}
.qrbox{display:flex;gap:16px;align-items:center;margin-top:18px;padding:14px 16px;border-radius:14px;background:var(--card);border:1px solid var(--line)}
.qrbox canvas{width:92px;height:92px;image-rendering:pixelated;border-radius:8px;border:1px solid var(--line)} .qrbox b{font-family:var(--head);font-weight:400;display:block} .qrbox p{margin:2px 0 0;font-size:13px;color:var(--ink-2)}
.join{padding:22px 20px;margin-top:14px} .join h2{font-size:24px;margin:0 0 4px} .join p{margin:0 0 16px;color:var(--ink-2);font-size:14px}
.perks{list-style:none;padding:0;margin:0 0 18px;display:grid;gap:8px} .perks li{display:flex;gap:10px;align-items:center;font-size:14px} .perks li i{width:26px;height:26px;border-radius:50%;background:var(--paper-2);display:grid;place-items:center;color:var(--honey);font-style:normal;flex:0 0 auto} .perks li i svg{width:14px;height:14px}
.tapnote{text-align:center;margin-top:18px;font-family:var(--hand);font-size:19px;color:var(--ink-2)}
.link-row{display:flex;justify-content:center;gap:16px;margin-top:26px;font-family:var(--head);font-size:12px;letter-spacing:.06em} .link-row a{color:var(--ink-3)}
/* staff */
.staff{display:grid;grid-template-columns:1.1fr 1fr;gap:20px;align-items:start} @media (max-width:860px){.staff{grid-template-columns:1fr}}
.panel{padding:18px} .panel h2{font-size:22px;margin:0 0 10px;display:flex;align-items:center;justify-content:space-between} .panel h2 .n{font-family:var(--head);font-size:13px;background:var(--honey);color:#fff;border-radius:999px;padding:3px 10px}
.req{display:grid;grid-template-columns:1fr auto;gap:8px 12px;padding:14px;border-radius:14px;background:var(--paper);border:1.5px solid var(--line-2);margin-bottom:10px;animation:slidein .35s cubic-bezier(.2,1,.3,1)}
@keyframes slidein{from{opacity:0;transform:translateY(-10px)}}
.req.new{border-color:var(--honey);box-shadow:0 0 0 4px rgba(200,121,46,.15)}
.req .nm{font-family:var(--head);font-size:19px;line-height:1.1} .req .meta{font-size:13px;color:var(--ink-3)} .req .src{font-family:var(--head);font-size:11px;letter-spacing:.08em;border:1px solid var(--line-2);border-radius:6px;padding:2px 6px;color:var(--ink-2)}
.req .mini{display:flex;gap:4px;grid-column:1/3} .req .mini i{width:14px;height:14px;border-radius:50%;border:1px solid var(--line-2);display:block} .req .mini i.on{background:var(--ink);border-color:var(--ink)} .req .mini i.free{border-color:var(--honey)} .req .mini i.free.on{background:var(--honey)}
.req .acts{grid-column:1/3;display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:4px}
.drinksel{display:flex;gap:6px;flex-wrap:wrap;grid-column:1/3}
.drinksel button{border:1.5px solid var(--line-2);background:var(--card);border-radius:999px;padding:7px 12px;font-family:var(--head);font-size:13px;min-height:36px}
.drinksel button.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.quiet{text-align:center;padding:30px 10px;font-family:var(--hand);font-size:22px;color:var(--ink-3)}
.lookup{display:flex;gap:8px} .lookup input{flex:1;border:1.5px solid var(--line-2);border-radius:12px;padding:12px 14px;font-size:20px;font-family:var(--head);background:var(--card);outline:none;min-width:0;letter-spacing:.1em} .lookup input:focus{border-color:var(--ink)}
.numpad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px} .numpad button{border:1.5px solid var(--line-2);background:var(--card);border-radius:12px;font-family:var(--head);font-size:22px;min-height:56px} .numpad button:active{background:var(--paper-2)}
.res{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.res .m{display:grid;grid-template-columns:1fr auto;gap:4px 10px;padding:12px 14px;border-radius:12px;background:var(--paper);border:1px solid var(--line);cursor:pointer} .res .m:hover{border-color:var(--ink)}
.res .m .nm{font-family:var(--head);font-size:17px} .res .m .meta{font-size:13px;color:var(--ink-3)} .res .m.sel{border-color:var(--ink);background:var(--card)}
.gate{max-width:380px;margin:60px auto;text-align:center;padding:28px 24px} .gate h1{font-size:26px;margin:8px 0 4px} .gate p{color:var(--ink-2);font-size:14px;margin:0 0 16px}
.gate input{width:100%;text-align:center;font-family:var(--head);font-size:30px;letter-spacing:.4em;border:1.5px solid var(--line-2);border-radius:12px;padding:10px;background:var(--card);outline:none} .gate input:focus{border-color:var(--ink)}
.today{display:flex;gap:16px;font-family:var(--head);font-size:13px;color:var(--ink-3)} .today b{font-weight:400;color:var(--ink);font-size:16px}
/* admin */
.grid2{display:grid;grid-template-columns:1.4fr 1fr;gap:16px;margin-top:16px} @media (max-width:860px){.grid2{grid-template-columns:1fr}}
.chart{padding:18px} .chart h3{font-size:18px;margin:0 0 10px;display:flex;justify-content:space-between;align-items:baseline} .chart h3 small{font-family:var(--hand);font-size:15px;color:var(--ink-2);font-weight:400}
.bars{display:flex;align-items:flex-end;gap:6px;height:150px;border-bottom:1px solid var(--line-2);padding-bottom:0}
.bars .b{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:4px;position:relative}
.bars .b i{display:block;width:100%;max-width:34px;background:var(--honey);border-radius:6px 6px 0 0;transition:height .6s cubic-bezier(.2,1,.3,1);min-height:2px;position:relative}
.bars .b:nth-last-child(1) i{background:var(--ink)} .bars .b i:after{content:attr(data-n);position:absolute;top:-18px;left:50%;transform:translateX(-50%);font-family:var(--head);font-size:11px;color:var(--ink-2)}
.bars .b span{font-family:var(--head);font-size:10px;color:var(--ink-3);letter-spacing:.04em}
.hbars{display:flex;flex-direction:column;gap:8px} .hbars .r{display:grid;grid-template-columns:130px 1fr 36px;align-items:center;gap:10px;font-size:13px} .hbars .r b{font-family:var(--head);font-weight:400;text-align:right} .hbars .r i{display:block;height:12px;border-radius:6px;background:linear-gradient(90deg,var(--honey),var(--honey-2));transition:width .6s}
.toolrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:16px 0 8px} .toolrow input,.toolrow select{border:1.5px solid var(--line-2);border-radius:999px;padding:9px 14px;background:var(--card);outline:none;font-size:16px} .toolrow input{flex:1;min-width:160px}
.tabs{display:flex;gap:6px;margin-top:18px;border-bottom:1px solid var(--line-2)} .tabs button{border:0;background:none;padding:10px 14px;font-family:var(--head);font-size:15px;color:var(--ink-3);border-bottom:2px solid transparent;margin-bottom:-1px} .tabs button.on{color:var(--ink);border-color:var(--ink)}
.tabpane{display:none} .tabpane.on{display:block}
.annf{display:grid;gap:10px;padding:18px} .annf textarea{border:1.5px solid var(--line-2);border-radius:12px;padding:12px;background:var(--card);min-height:90px;outline:none;resize:vertical}
.annlist{display:flex;flex-direction:column;gap:8px;margin-top:12px} .annlist .a{display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:12px 14px;border-radius:12px;background:var(--card);border:1px solid var(--line)} .annlist .a b{font-family:var(--head);font-weight:400} .annlist .a p{margin:0;font-size:13px;color:var(--ink-2)} .annlist .a.off{opacity:.55}
.phone-prev{margin:0 auto;width:250px;border:10px solid var(--ink);border-radius:36px;padding:28px 10px 14px;background:#f7f4ee;position:relative} .phone-prev:before{content:"";position:absolute;top:10px;left:50%;transform:translateX(-50%);width:80px;height:8px;border-radius:4px;background:var(--ink)}
.phone-prev .time{font-family:var(--head);font-size:40px;text-align:center;line-height:1;margin-top:6px} .phone-prev .date{text-align:center;font-size:12px;color:var(--ink-3);margin-bottom:16px}
.phone-prev .notif{background:rgba(255,255,255,.9);border-radius:14px;padding:10px 12px;display:flex;gap:10px;box-shadow:0 4px 14px rgba(0,0,0,.08)} .phone-prev .notif .ic{width:30px;height:30px;border-radius:8px;background:var(--ink);color:var(--paper);display:grid;place-items:center;flex:0 0 auto} .phone-prev .notif .ic svg{width:18px;height:18px} .phone-prev .notif b{font-size:12px;display:block;font-family:var(--body);font-weight:600} .phone-prev .notif p{margin:0;font-size:11px;color:var(--ink-2);line-height:1.3}
.nfcbox{padding:22px;text-align:center} .nfcbox canvas{width:220px;height:220px;image-rendering:pixelated;border:1px solid var(--line);border-radius:12px;background:#fff} .nfcbox code{font-family:var(--head);font-size:13px;background:var(--paper-2);padding:3px 8px;border-radius:6px;word-break:break-all}
.steps{text-align:left;margin:16px auto 0;max-width:420px;padding-left:20px;font-size:14px;color:var(--ink-2)} .steps li{margin-bottom:6px}
.puck{width:150px;height:150px;border-radius:50%;margin:0 auto 14px;background:radial-gradient(circle at 35% 30%,#fff,#efe8db 60%,#d9cfbb);box-shadow:0 14px 30px rgba(40,30,10,.18),inset 0 -6px 14px rgba(0,0,0,.06);display:grid;place-items:center;color:var(--ink);position:relative} .puck svg{width:70px;height:70px} .puck:after{content:"tap here";position:absolute;bottom:18px;font-family:var(--hand);font-size:16px;color:var(--ink-2)}
.ring{position:absolute;inset:-10px;border-radius:50%;border:2px solid var(--honey);opacity:0;animation:ring 2.4s ease-out infinite} @keyframes ring{0%{transform:scale(.8);opacity:.7}100%{transform:scale(1.35);opacity:0}}
/* ── mesa orders on the counter tablet ── */
.panel.orders h2 .n{background:var(--blue);color:#fff}
.ordc{border:1.5px solid var(--line-2);border-radius:var(--r);padding:14px 16px;margin-bottom:12px;background:rgba(255,255,255,.5)}
.ordc.new{border-color:var(--blue);box-shadow:0 0 0 3px rgba(227,162,90,.18)}
.ordc.making{background:rgba(227,162,90,.08)}
.ordc__top{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:9px}
.ordc__ref{font-family:var(--head);font-size:20px;letter-spacing:.04em}
.ordc__when{font-family:var(--head);font-size:12px;color:var(--ink-3)}
.ordc__tot{margin-left:auto;font-family:var(--head);font-size:18px}
.ordc__items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.ordc__items li{font-size:15px;line-height:1.35}
.ordc__items b{font-family:var(--head);font-weight:400;color:var(--blue);margin-right:4px}
.ordc__items .v{color:var(--ink-2);font-size:13.5px}
.ordc__items .x{color:var(--ink-3);font-size:13px}
.ordc__note{margin-top:9px;font-family:var(--hand);font-size:17px;color:var(--berry)}
.ordc .acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}