:root{--qr-pink:#ff0057;--qr-soft:#fff0f5;--qr-ink:#171717;--qr-line:#f0e7eb}.syoper-qr{margin:0;background:#faf8fa;color:var(--qr-ink);font-family:inherit}.syoper-qr *{box-sizing:border-box}.syoper-qr .account-shell,.syoper-qr main{max-width:480px;width:100%;margin:0 auto;padding:0;background:#fff;min-height:100dvh}.syoper-qr .app-tabs,.syoper-qr>nav{display:none!important}.qr-app{padding:env(safe-area-inset-top) 20px max(22px,env(safe-area-inset-bottom));min-height:100dvh;overflow:hidden}.qr-header{height:64px;display:flex;align-items:center;justify-content:space-between;gap:10px}.qr-header h1{font-size:18px;letter-spacing:.01em;margin:0;font-weight:850}.qr-header a,.qr-icon-button{display:grid;place-items:center;width:44px;height:44px;border:0;background:transparent;color:inherit;border-radius:50%;padding:10px;text-decoration:none}.qr-app svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.qr-app button,.qr-app a{touch-action:manipulation;-webkit-tap-highlight-color:transparent}.qr-app button{font-family:inherit;cursor:pointer}.qr-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:4px;background:#f3f3f5;border-radius:15px;margin:0 0 18px}.qr-tabs button{border:0;border-radius:11px;min-height:43px;background:transparent;font-size:14px;font-weight:750;color:#60616a}.qr-tabs button[aria-selected=true]{color:#fff;background:var(--qr-pink);box-shadow:0 3px 8px #ff005719}.qr-person{text-align:center;margin:20px 0 16px}.qr-avatar{width:86px;height:86px;margin:0 auto 10px;border:3px solid #ffadc9;padding:3px;border-radius:50%;display:grid;place-items:center;background:#fff;overflow:hidden}.qr-avatar img,.qr-default-avatar{width:100%;height:100%;border-radius:50%;object-fit:cover}.qr-default-avatar{display:grid;place-items:center;background:var(--qr-pink);color:#fff}.qr-default-avatar svg{width:44px;height:44px;fill:currentColor;stroke:none}.qr-person h2{font-size:21px;margin:0 0 5px;overflow-wrap:anywhere;font-weight:850}.qr-muted,.qr-person p{color:#7c7c83;font-size:13px;margin:0;line-height:1.5}.qr-code-card{margin:0 auto;background:#fff;border:1px solid #f7e5ec;border-radius:24px;padding:14px;width:284px;max-width:100%;box-shadow:0 5px 28px #b52e5b12}.qr-code-card canvas{display:block;width:254px;height:auto;max-width:100%;aspect-ratio:1;image-rendering:pixelated}.qr-caption{text-align:center;font-size:12px;color:#777680;margin:12px 0 18px}.qr-primary,.qr-secondary{display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;border-radius:15px;padding:13px 16px;font-size:15px;font-weight:750;text-decoration:none;line-height:1.25}.qr-primary{color:#fff!important;background:var(--qr-pink);border:1px solid var(--qr-pink);width:100%}.qr-secondary{background:#fff;color:#202026;border:1px solid #f2d4df;width:100%}.qr-primary:disabled,.qr-secondary:disabled{opacity:.5;cursor:default}.qr-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0 16px}.qr-actions button{min-width:0;min-height:77px;padding:12px 8px;flex-direction:column;gap:5px;font-size:13px}.qr-action-title{display:flex;align-items:center;justify-content:center;gap:8px}.qr-action-title svg{color:var(--qr-pink);width:21px;height:21px}.qr-actions small{font-size:10px;line-height:1.3;font-weight:400;color:#74737b;max-width:100%;overflow-wrap:anywhere}.qr-info{display:flex;align-items:center;gap:12px;background:var(--qr-soft);border:1px solid #ffe4ee;border-radius:16px;padding:14px;font-size:12px;line-height:1.6;color:#62616b}.qr-info svg{color:var(--qr-pink);flex-shrink:0}.qr-status{position:fixed;bottom:max(18px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:100;background:#202025;color:#fff;border-radius:14px;padding:12px 18px;max-width:calc(100vw - 32px);width:max-content;font-size:13px;text-align:center;box-shadow:0 5px 25px #0002}.qr-status:empty{display:none}.qr-menu{border:1px solid #f0e7eb;border-radius:20px;padding:20px;width:calc(100% - 36px);max-width:390px;color:#171717}.qr-menu::backdrop{background:#0006}.qr-menu h2{font-size:18px;margin:0 0 14px}.qr-menu .qr-secondary{margin:8px 0}.qr-camera-mode{background:#111;color:#fff}.syoper-qr:has(.qr-camera-mode){background:#111}.syoper-qr main:has(.qr-camera-mode){background:#111}.qr-camera-mode .qr-tabs{background:#ffffff22}.qr-camera-mode .qr-tabs button{color:#eee}.qr-camera-mode .qr-tabs button[aria-selected=true]{color:#fff}.qr-camera{position:relative;min-height:calc(100dvh - 160px - env(safe-area-inset-top) - env(safe-area-inset-bottom));border-radius:22px;background:#141417;overflow:hidden;display:flex;align-items:center;flex-direction:column;justify-content:space-between;padding:28px 12px 22px}.qr-camera video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.qr-camera-shade{position:absolute;inset:0;background:linear-gradient(#0008,transparent 30%,transparent 60%,#000b);pointer-events:none}.qr-camera-copy{position:relative;text-align:center;z-index:1;min-height:65px}.qr-camera-copy h2{font-size:18px;margin:0 0 7px}.qr-camera-copy p{font-size:13px;line-height:1.6;margin:0;max-width:310px;color:#e0dce0}.qr-frame{position:relative;z-index:1;pointer-events:none;width:min(100%,290px);aspect-ratio:1;margin:20px 0 32px}.qr-corner{position:absolute;width:42px;height:42px;border:4px solid var(--qr-pink);filter:drop-shadow(0 0 4px #ff0057aa)}.qr-corner:nth-child(1){top:0;left:0;border-right:0;border-bottom:0;border-radius:22px 0 0}.qr-corner:nth-child(2){top:0;right:0;border-left:0;border-bottom:0;border-radius:0 22px 0 0}.qr-corner:nth-child(3){bottom:0;left:0;border-right:0;border-top:0;border-radius:0 0 0 22px}.qr-corner:nth-child(4){bottom:0;right:0;border-left:0;border-top:0;border-radius:0 0 22px}.qr-scan-line{position:absolute;left:6px;right:6px;top:50%;height:2px;background:#ff98bd;box-shadow:0 0 10px 4px #ff00578f;opacity:.25}.qr-frame[data-running=true] .qr-scan-line{opacity:1;animation:qr-scan 2.8s ease-in-out infinite alternate}.qr-camera-actions{position:relative;z-index:2;display:flex;justify-content:space-evenly;align-items:center;gap:20px;width:100%}.qr-camera-actions button{min-width:66px;min-height:76px;color:white;background:transparent;border:0;display:flex;align-items:center;flex-direction:column;gap:8px;font-size:12px;padding:0}.qr-camera-actions button>span:first-child{display:grid;place-items:center;width:52px;height:52px;border:1px solid #ffffff66;border-radius:50%;background:#ffffff12}.qr-camera-actions button.qr-restart>span:first-child{width:70px;height:70px;background:var(--qr-pink);outline:2px solid white;outline-offset:4px;border:0}.qr-camera-actions button[aria-pressed=true]>span:first-child{background:var(--qr-pink)}.qr-camera-actions button.qr-restart>span:first-child{transition:transform .12s ease}.qr-camera-actions button.qr-restart:active>span:first-child{transform:scale(.93)}.qr-camera-actions button:disabled{opacity:.5;cursor:progress}.qr-gallery-intro{display:flex;align-items:center;gap:14px;background:var(--qr-soft);padding:18px 14px;border-radius:18px;margin-bottom:16px}.qr-gallery-intro svg{color:var(--qr-pink);width:34px;height:34px;flex-shrink:0}.qr-gallery-intro h2{font-size:15px;margin:0 0 6px}.qr-gallery-intro p{font-size:12px;line-height:1.6;color:#777680;margin:0}.qr-gallery-preview{position:relative;min-height:260px;aspect-ratio:1;background:#f2f0f3;border:1px solid #eee5e9;display:grid;place-items:center;border-radius:20px;margin-bottom:14px;overflow:hidden}.qr-gallery-preview img{display:block;max-width:100%;max-height:380px;object-fit:contain}.qr-gallery-preview .qr-icon-button{position:absolute;right:8px;top:8px;background:#2229;color:#fff}.qr-gallery-preview>p{padding:24px;text-align:center;font-size:13px;color:#777680}.qr-gallery-status{min-height:24px;text-align:center;font-size:13px;margin:8px 0;color:#9d234d}.qr-gallery .qr-secondary{margin-top:10px}.qr-gallery .qr-info{margin-top:16px}.qr-app :is(button,a):focus-visible{outline:3px solid #3977eb;outline-offset:3px}.qr-app [hidden]{display:none!important}.qr-guest{text-align:center;padding:48px 8px}.qr-guest h2{font-size:21px}.qr-guest p{font-size:14px;color:#777;line-height:1.6}.qr-guest .qr-primary{margin-top:20px}@keyframes qr-scan{from{top:12px}to{top:calc(100% - 14px)}}@media(prefers-reduced-motion:reduce){.qr-frame[data-running=true] .qr-scan-line{animation:none;top:50%}.qr-camera-actions button.qr-restart>span:first-child{transition:none}}@media(max-width:350px){.qr-app{padding-inline:14px}.qr-person{margin-top:14px}.qr-avatar{width:70px;height:70px}.qr-person h2{font-size:19px}.qr-code-card{width:264px;padding:10px}.qr-frame{max-width:240px}.qr-camera{padding-inline:8px}.qr-camera-actions{gap:10px}}@media(min-width:600px){.syoper-qr main{border-inline:1px solid #f1e6eb}.qr-app{padding-inline:26px}.qr-camera{min-height:620px}}
