/* v2-ownface.css — "Your own face" cast card + selfie popup (unified popup system) */
.mdC.ofC .ofEmpty{display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:6px;aspect-ratio:3/4;margin:8px;border:1.5px dashed rgba(229,168,46,.45);border-radius:8px;background:rgba(229,168,46,.04);color:var(--tp,#F5F4F0);text-align:center;padding:10px}
.mdC.ofC .ofEmpty b{font-size:15px;font-weight:600}.mdC.ofC .ofEmpty small{font-size:12.5px;color:var(--ts,#B8B2A7)}
.mdC.ofC:hover .ofEmpty{border-color:var(--gold,#E5A82E);background:rgba(229,168,46,.08)}
.ofIc{display:grid;place-items:center;width:48px;height:48px;border-radius:8px;background:rgba(229,168,46,.12);color:var(--gold,#E5A82E)}
.mdC.ofC .ph2{position:relative}.mdC.ofC .ph2 img{object-fit:cover}
.ofEd{position:absolute;right:8px;bottom:8px;padding:5px 10px;border-radius:8px;background:rgba(18,17,15,.82);border:1px solid rgba(245,244,240,.2);color:#F5F4F0;font:600 12px Inter,sans-serif;cursor:pointer}.ofEd:hover{border-color:var(--gold);color:var(--gold)}
#ofOv{z-index:120}
html body .mCard.ofWin{position:relative;width:min(900px,calc(100vw - 48px));max-height:90vh;overflow-y:auto;padding:36px 32px 24px;border-radius:8px}
.ofBody{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px}
.ofSrc{display:flex;flex-direction:column;gap:14px;min-width:0}
.ofQr{display:flex;gap:18px;align-items:center}.ofQr .pfQrBox{flex:0 0 auto;width:200px}
.ofSt{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:14px;color:var(--ts,#B8B2A7)}.ofSt li{display:flex;gap:10px;align-items:center}.ofSt i{font-style:normal;flex:0 0 24px;height:24px;border-radius:8px;display:grid;place-items:center;background:rgba(229,168,46,.12);color:var(--gold);font-weight:700;font-size:12px}
.ofQrW{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 14px;border-radius:8px;background:#151411;border:1px solid rgba(245,244,240,.1);font-size:14px}
.ofQrW .dot{width:8px;height:8px;border-radius:50%;background:var(--gold);animation:ofBl 1s ease-in-out infinite}.ofQrW.connected .dot,.ofQrW.ok .dot{background:#5CB878;animation:none}.ofQrW.sending .dot{animation-duration:.4s}
@keyframes ofBl{50%{opacity:.3}}
.ofSm{align-self:flex-start;background:none;border:0;padding:0;min-height:44px;color:var(--tp,#F5F4F0);font:600 14px Inter,sans-serif;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.ofPick{display:flex;flex-direction:column;gap:6px}
.ofBig{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:220px;border-radius:8px;border:1.5px dashed rgba(229,168,46,.5);background:rgba(229,168,46,.05);color:var(--tp,#F5F4F0);font:inherit;cursor:pointer}.ofBig b{font-size:17px}.ofBig small{font-size:13px;color:var(--ts,#B8B2A7)}
.ofPrev{aspect-ratio:3/4;max-height:360px;border-radius:8px;overflow:hidden;background:#151411;border:1px solid rgba(245,244,240,.12)}.ofPrev img{width:100%;height:100%;object-fit:cover;display:block}
.ofAgain{display:flex;gap:10px;flex-wrap:wrap}.ofAgain .backb{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;min-height:44px}.ofAgain svg{width:18px;height:18px}
.ofSide{display:flex;flex-direction:column;gap:10px;min-width:0}
.ofL{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ts,#B8B2A7);margin-top:4px}
.ofTips{margin:0;padding:0 0 0 18px;display:flex;flex-direction:column;gap:4px;font-size:14px;color:var(--ts,#B8B2A7)}
.ofOk{display:flex;gap:10px;align-items:flex-start;margin-top:8px;padding:12px 14px;border-radius:8px;border:1px solid rgba(245,244,240,.14);background:#1d1b18;font-size:14px;line-height:1.45;cursor:pointer}.ofOk input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--gold,#E5A82E);flex:0 0 auto}
.ofPriv{margin:0;font-size:12.5px;color:var(--ts,#B8B2A7)}
.ofFoot{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-top:22px;padding-top:18px;border-top:1px solid rgba(245,244,240,.1)}
.ofWarn{margin-right:auto;font-size:13px;color:#e8a24a}.ofDel{margin-right:auto;background:none;border:0;color:var(--ts,#B8B2A7);font:500 14px Inter,sans-serif;text-decoration:underline;cursor:pointer;min-height:44px}.ofDel:not([hidden])+.ofWarn{margin-right:0}
.ofFoot .cta{width:auto;margin:0;padding:12px 26px}.ofFoot .cta:disabled{opacity:.45;cursor:not-allowed}.ofFoot .backb{padding:12px 20px}
@media (max-width:760px){
html body #ofOv{align-items:stretch;padding:0}
html body .mCard.ofWin{width:100vw;height:100%;max-height:none;border-radius:0;padding:20px var(--mob-g,16px) 0}
.ofBody{grid-template-columns:1fr;gap:18px}.ofPrev{max-height:300px;align-self:center;width:72%}
.ofFoot{position:sticky;bottom:0;margin:16px calc(-1 * var(--mob-g,16px)) 0;padding:12px var(--mob-g,16px) calc(12px + env(safe-area-inset-bottom,0px));background:#1b1a17;flex-wrap:wrap}.ofFoot .cta{flex:1}
}

/* QR + steps: steps sit in a proper panel under the code (not floating beside it) */
#ofOv .ofQr{display:grid!important;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:stretch}
#ofOv .ofQr .pfQrBox{grid-row:span 1}
#ofOv .ofSt{list-style:none;margin:0;padding:14px 16px;display:flex;flex-direction:column;justify-content:center;gap:14px;border:1px solid rgba(245,244,240,.1);border-radius:8px;background:rgba(245,244,240,.03);counter-reset:none}
#ofOv .ofSt li{display:flex;align-items:flex-start;gap:10px;margin:0;padding:0;border:0!important;font-size:14px;line-height:1.35;color:var(--tp,#F5F4F0)}
#ofOv .ofSt li::before{display:none!important}
#ofOv .ofSt li i{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:rgba(229,168,46,.14);color:#E5A82E;font:700 12px Inter,sans-serif;font-style:normal}
@media (max-width:760px){#ofOv .ofQr{grid-template-columns:1fr}}
/* sex symbols on the Female / Male buttons */
#ofOv .ofG button{display:inline-flex;align-items:center;gap:8px}
#ofOv .ofSx{font-size:16px;line-height:1;color:#E5A82E}
#ofOv .ofG button.on .ofSx{color:inherit}

/* stack: QR card (240 square) on top, steps as a 3-up row under it — neither cramped (left column ~386px) */
#ofOv .ofQr{grid-template-columns:1fr!important;justify-items:center;gap:12px}
#ofOv .ofQr .pfQrBox{width:240px;max-width:100%}
#ofOv .ofSt{width:100%;box-sizing:border-box;flex-direction:row;justify-content:space-between;gap:10px;padding:12px}
#ofOv .ofSt li{flex:1 1 0;min-width:0;flex-direction:column;align-items:center;text-align:center;gap:6px;font-size:13px}