/* Styles for the parts that exist only in the real app: sign-in, the barcode scanner, native safe areas. */
body{margin:0;min-height:100dvh;padding-top:env(safe-area-inset-top,0px)}
#auth{position:fixed;inset:0;z-index:70;background:var(--bg);overflow:auto;padding:calc(40px + env(safe-area-inset-top,0px)) 24px 40px}
.authin{max-width:420px;margin:0 auto;display:flex;flex-direction:column;gap:22px}
.authin form,#shopPickWrap{display:flex;flex-direction:column;gap:14px}
.authin h1{font-size:28px}
.authin .pillbtn{width:100%}
#scanOverlay{position:fixed;inset:0;z-index:80;background:#000;display:flex;flex-direction:column;color:#fff}
#scanOverlay video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#scanOverlay .scanFrame{position:absolute;left:8%;right:8%;top:30%;height:26%;border-radius:18px;box-shadow:0 0 0 100vmax rgba(0,0,0,.45);outline:2px solid rgba(255,255,255,.85)}
#scanOverlay .scanTop{position:relative;display:flex;align-items:center;gap:12px;padding:calc(14px + env(safe-area-inset-top,0px)) 16px 0}
#scanOverlay .scanTop span{font-weight:700;font-size:17px}
#scanOverlay .scanBottom{position:absolute;left:0;right:0;bottom:0;padding:16px 16px calc(24px + env(safe-area-inset-bottom,0px));text-align:center;display:flex;flex-direction:column;gap:12px}
#scanOverlay .scanBottom p{margin:0;font-weight:500;color:#fff}
#scanOverlay .pillbtn{background:rgba(255,255,255,.14);color:#fff}
#auth input[type=email],#auth input[type=password]{font:inherit;font-size:17px;letter-spacing:0;color:var(--fg);background:var(--row);border:1px solid var(--line);border-radius:12px;padding:10px 12px;min-height:48px;width:100%}
#auth input[type=text]{background:var(--row);border-color:transparent}
.authin label.f{flex:0 0 auto}