*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;font-size:14px}
img{max-width:100%}

/* Layout: one red phone-width column; tabs гость / касса; install guide as full-screen sheet; state simulated in-page */
:root{
  --red:#ee3124; --red-deep:#a30a11; --ink:#1a0506; --white:#ffffff; --cream:#ffe9e6; --muted:#7a4a47; --ok:#1db954; --sun:#fff3c4;
  --display:"Rubik Mono One","Arial Black",Impact,sans-serif;
  --body:"Rubik",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
}
html,body{background:var(--red);color:var(--white)}
body{font-family:var(--body);padding-inline:16px;padding-block:16px 40px}
.wrap{max-width:440px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
.tabs{display:flex;gap:6px;background:var(--red-deep);padding:5px;border-radius:999px}
.tabs button{flex:1;border:0;border-radius:999px;padding:10px;font:700 13px var(--body);letter-spacing:.08em;text-transform:uppercase;background:transparent;color:var(--cream);cursor:pointer}
.tabs button[aria-selected="true"]{background:var(--white);color:var(--red)}
button:focus-visible,input:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.logo{font-family:var(--display);font-size:clamp(44px,14vw,64px);line-height:.88;letter-spacing:-.02em;text-transform:uppercase;margin:6px 0 0;text-wrap:balance}
.logo span{display:block;color:var(--ink)}
.brand{display:flex;flex-direction:column;gap:8px;min-width:0;text-align:center}
.logo1{margin:4px 0 0;line-height:0}
.logo1 svg{width:100%;height:auto;display:block}
.logo1 text{font-family:"Archivo","Arial Black",Impact,sans-serif;font-weight:900;font-stretch:125%;font-size:118px;fill:var(--white)}
#admin .logo1{font-family:"Archivo","Arial Black",Impact,sans-serif;font-weight:900;font-stretch:125%;font-size:clamp(26px,9vw,40px);line-height:1;text-align:center}
#admin .logo1 span{color:var(--white)}
.addr{font-size:11px;font-weight:500;letter-spacing:.04em;color:var(--cream);line-height:1.4}
.tag{font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:12px;color:var(--cream)}
.card{background:var(--white);color:var(--ink);border-radius:22px;padding:20px;display:flex;flex-direction:column;gap:14px;box-shadow:0 10px 0 var(--red-deep)}
.count{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.count b{font-family:var(--display);font-size:40px;color:var(--red);font-variant-numeric:tabular-nums}
.count small{font-weight:500;font-size:14px}
.slots{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.slot{aspect-ratio:1;border-radius:50%;border:3px dashed #e8b4b0;display:grid;place-items:center;font:900 15px var(--body);color:#d9a09b;max-width:100%}
.slot.on{border:3px solid var(--red);background:var(--red);color:var(--white)}
.slot.free{border:3px solid var(--ink);color:var(--ink);font-size:10px;text-transform:uppercase}
.slot.free.ready{background:var(--ink);color:var(--white);animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.08)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}
.code{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--cream);border-radius:14px;padding:12px 14px}
.code span{font-size:12px;text-transform:uppercase;letter-spacing:.1em;font-weight:700;color:var(--red-deep)}
.code b{font-family:var(--display);font-size:20px;letter-spacing:.06em}
.btn{border:0;border-radius:14px;padding:15px;font:900 15px var(--body);text-transform:uppercase;letter-spacing:.06em;cursor:pointer;width:100%}
.btn.red{background:var(--red);color:var(--white)}
.btn.ink{background:var(--ink);color:var(--white)}
.btn.ghost{background:transparent;color:var(--white);border:2px solid var(--white)}
.note{font-size:13px;line-height:1.45;color:var(--cream);max-width:60ch;margin:0}
.hint{font-size:13px;color:var(--muted);line-height:1.4}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--white);padding:12px 18px;border-radius:999px;font-weight:700;font-size:14px;max-width:calc(100% - 32px);z-index:30;text-align:center}

/* big install banner */
.install{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;background:var(--sun);color:var(--ink);border:0;border-radius:22px;padding:18px;text-align:left;cursor:pointer;box-shadow:0 8px 0 var(--red-deep);font-family:var(--body)}
.install .phone{width:68px;height:115px;display:block}
.install .glow{transform-origin:32px 53.5px;animation:ring 1.6s ease-out infinite}
@keyframes ring{0%{transform:scale(.8);opacity:1}100%{transform:scale(1.5);opacity:0}}
.install{cursor:default}
.install .go{border:0;cursor:pointer;font-family:var(--body);width:100%}
.or{grid-column:1/-1;display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted);font-weight:500;margin-block:-8px}
.or::before,.or::after{content:"";flex:1;height:1px;background:#e3c9a0}
.wallets{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:-6px}
.wal{display:flex;align-items:center;gap:10px;background:#000;color:#fff;border:0;border-radius:14px;padding:12px;cursor:pointer;min-height:64px;text-align:left;font-family:var(--body)}
.wal.gw{background:transparent;padding:0;justify-content:center;min-height:0}
.wal.gw img{width:100%;height:auto;display:block}
.wallets{align-items:center}
.wi{width:40px;height:40px;flex:none}
.wt{display:flex;flex-direction:column;min-width:0;line-height:1.1}
.wt small{font-size:11px;font-weight:500;opacity:.8}
.wt b{font-size:clamp(14px,4vw,17px);font-weight:900;white-space:nowrap}
.slots{container-type:inline-size}
.slot{--s:calc((100cqw - 32px)/5)}
.bx{--w:calc(var(--s)*0.4);--h:calc(var(--s)*0.09);--c:#f6dedb;--c2:#eccac6;--c3:#e2b6b1;--e:#cf9a94;width:var(--w);height:var(--w);position:relative;transform-style:preserve-3d;transform:translateY(calc(var(--s)*0.07)) rotateX(56deg) rotateZ(38deg)}
.slot.on .bx{--c:#ffffff;--c2:#ecebea;--c3:#d6d3d2;--e:#1a0506}
.bx i{position:absolute;display:block;box-sizing:border-box;border:1.5px solid var(--e);transform-style:preserve-3d}
.bx .b{inset:0;background:var(--c2)}
.bx .wf{left:0;top:100%;width:100%;height:var(--h);background:var(--c2);transform-origin:50% 0;transform:rotateX(90deg)}
.bx .wb{left:0;bottom:100%;width:100%;height:var(--h);background:var(--c3);transform-origin:50% 100%;transform:rotateX(-90deg)}
.bx .wl{right:100%;top:0;height:100%;width:var(--h);background:var(--c3);transform-origin:100% 50%;transform:rotateY(90deg)}
.bx .wr{left:100%;top:0;height:100%;width:var(--h);background:var(--c3);transform-origin:0 50%;transform:rotateY(-90deg)}
.bx .pz{inset:9%;border:0;border-radius:50%;transform:translateZ(calc(var(--s)*0.015));opacity:0;background:radial-gradient(circle at 30% 34%,#c0261c 0 9%,transparent 10%),radial-gradient(circle at 66% 30%,#c0261c 0 9%,transparent 10%),radial-gradient(circle at 50% 58%,#c0261c 0 9%,transparent 10%),radial-gradient(circle at 28% 68%,#c0261c 0 8%,transparent 9%),radial-gradient(circle at 72% 66%,#c0261c 0 8%,transparent 9%),radial-gradient(circle,#ffd23f 0 60%,#e0962e 61% 100%)}
.bx .lid{inset:0;background:var(--c);transform-origin:50% 0;transform:translateZ(var(--h)) rotateX(0deg)}
.bx .lid::after{content:"";position:absolute;inset:27%;border-radius:50%;background:var(--e);opacity:.35}
.slot.on .bx .lid::after{background:#ee3124;opacity:1}
.slot.on .bx .lid{transform:translateZ(var(--h)) rotateX(104deg)}
.slot.on .bx .pz{opacity:1}
.slot.just .bx .lid{animation:lid .8s cubic-bezier(.3,1.5,.5,1) both;animation-delay:var(--d,0s)}
.slot.just .bx .pz{animation:pz .3s ease-out both;animation-delay:calc(var(--d,0s) + .25s)}
.slot.just{animation:pop .5s ease-out both;animation-delay:var(--d,0s)}
@keyframes lid{0%{transform:translateZ(var(--h)) rotateX(0deg)}100%{transform:translateZ(var(--h)) rotateX(104deg)}}
@keyframes pz{0%{opacity:0}100%{opacity:1}}
@keyframes pop{0%{transform:scale(.85)}60%{transform:scale(1.08)}100%{transform:scale(1)}}
.cnt{font:900 18px var(--display);color:var(--red);font-variant-numeric:tabular-nums;min-width:52px;text-align:center}
.acts{align-items:center}
.acts button.minus{background:var(--white);color:var(--ink);border:2px solid var(--ink);padding:8px 13px}
.install b{display:block;font-size:21px;line-height:1.15;font-weight:900}
.install small{display:block;font-size:15px;margin-top:4px;color:var(--muted)}
.install .go{grid-column:1/-1;background:var(--ink);color:var(--white);border-radius:12px;padding:14px;text-align:center;font-weight:900;font-size:17px;letter-spacing:.04em}

/* install sheet */
.sheet{position:fixed;inset:0;background:var(--white);color:var(--ink);z-index:20;overflow-y:auto;padding-inline:16px;padding-block:calc(16px + env(safe-area-inset-top,0px)) calc(24px + env(safe-area-inset-bottom,0px))}
.sheet .in{max-width:440px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
.sheet h2{font:900 28px/1.15 var(--body);margin:0;color:var(--ink);text-transform:none;letter-spacing:0;text-wrap:balance}
.sheet p{font-size:19px;line-height:1.45;margin:0}
.os{display:flex;gap:8px}
.os button{flex:1;border:3px solid var(--ink);background:var(--white);color:var(--ink);border-radius:14px;padding:14px 8px;font:900 18px var(--body);cursor:pointer}
.os button[aria-pressed="true"]{background:var(--ink);color:var(--white)}
.step{display:grid;grid-template-columns:56px 1fr;gap:14px;align-items:start;background:var(--cream);border-radius:18px;padding:16px}
.step .n{width:56px;height:56px;border-radius:50%;background:var(--red);color:var(--white);display:grid;place-items:center;font:900 28px var(--display)}
.step div{min-width:0}
.step b{display:block;font-size:20px;line-height:1.3}
.step span{display:block;font-size:17px;line-height:1.4;color:var(--muted);margin-top:6px}
.pic{display:inline-flex;align-items:center;justify-content:center;gap:8px;margin-top:10px;background:var(--white);border:2px solid #e8b4b0;border-radius:12px;padding:10px 14px;font:700 17px var(--body);color:#0a64d6}
.pic svg{width:30px;height:30px;flex:none}
.close{background:var(--ink);color:var(--white);border:0;border-radius:14px;padding:18px;font:900 19px var(--body);cursor:pointer;width:100%}

/* admin */
.live{display:flex;flex-direction:column;gap:8px}
.row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;background:var(--cream);border-radius:14px;padding:12px}
.row.new{background:var(--sun);outline:3px solid var(--ok)}
.row div{min-width:0}
.row b{display:block;font-size:15px}
.row small{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
.src{display:inline-block;font:900 10px var(--body);letter-spacing:.08em;padding:2px 6px;border-radius:6px;background:var(--ink);color:var(--white);margin-right:6px;vertical-align:1px}
.acts{display:flex;gap:6px}
.acts button{border:0;border-radius:10px;padding:10px 12px;font:900 14px var(--body);cursor:pointer;background:var(--red);color:var(--white);white-space:nowrap}
.acts button.give{background:var(--ink)}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--ok);margin-right:6px;vertical-align:middle;animation:pulse 1.2s infinite}
.search{width:100%;border:2px solid #e8b4b0;border-radius:12px;padding:12px;font:500 15px var(--body);background:var(--white);color:var(--ink)}
.h{font:900 13px var(--body);letter-spacing:.14em;text-transform:uppercase;margin:0;color:var(--red)}
.empty{font-size:13px;color:var(--muted)}
.sim{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}
.sim button{border:2px solid var(--white);background:transparent;color:var(--white);border-radius:12px;padding:10px 6px;font:700 12px var(--body);cursor:pointer;line-height:1.25}
.sim-l{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--cream);font-weight:700}
.home-note{font-size:12px;color:var(--muted);border-top:1px dashed #e8b4b0;padding-top:10px}

.me{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.me input{width:100%;min-width:0;border:2px solid #e8b4b0;border-radius:12px;padding:12px;font:500 16px var(--body);background:var(--white);color:var(--ink)}
.me button{grid-column:1/-1}
.tapped{background:var(--ok);color:var(--white);border-radius:16px;padding:14px 16px;font-weight:900;font-size:17px;text-align:center}
.login{display:flex;flex-direction:column;gap:10px}
.loc{width:100%;border:2px solid var(--white);background:transparent;color:var(--white);border-radius:12px;padding:12px;font:700 15px var(--body)}
.loc option{color:var(--ink)}
.gwb{background:none;border:0;padding:0;cursor:pointer;align-self:center;width:min(100%,260px)}
.gwb img{width:100%;height:auto;display:block}
.wal.off{opacity:.45}
.install.installed>.phone,.install.installed>span,.install.installed>.go,.install.installed>.or{display:none}