.pf-checkin-preview { width:100%; }
.pf-checkin-preview [hidden] { display:none !important; }
.pf-checkin-screen { position:relative; overflow:hidden; aspect-ratio:16/9; border-radius:12px; container-type:inline-size; }
.pf-checkin-screen img { display:block; width:100%; height:100%; object-fit:contain; }
.pf-checkin-pin { position:absolute; left:7%; top:34%; width:29%; display:flex; justify-content:center; gap:5%; padding:3% 0; border-radius:10px; background:rgba(8,9,11,.9); }
.pf-checkin-pin span { width:19%; text-align:center; font-size:clamp(14px,5cqw,38px); font-weight:800; line-height:1.2; color:rgba(255,255,255,.22); }
.pf-checkin-pin span[data-filled="true"] { color:#f9dfa0; }
.pf-checkin-tap { position:absolute; width:9%; aspect-ratio:1; border:3px solid #ffe39a; border-radius:50%; transform:translate(-50%,-50%); background:rgba(237,192,68,.13); box-shadow:0 0 0 4px rgba(255,227,154,.15); }
.pf-checkin-balance { position:absolute; left:30%; top:40%; width:40%; height:19%; border:2px solid #ffe39a; border-radius:8px; box-shadow:0 0 0 4px rgba(255,227,154,.15); }
.pf-checkin-guide,.pf-checkin-note { margin:10px 14px 0; text-align:center; font-size:.75rem; line-height:1.5; }
.pf-checkin-guide { color:#f3dda1; }
.pf-checkin-note { color:#b9c4d4; }
.pf-checkin-controls { display:flex; align-items:center; gap:6px; margin:10px 14px 0; }
.pf-checkin-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); flex:1; gap:4px; }
.pf-checkin-controls button { min-height:44px; border:1px solid #435064; border-radius:7px; background:#151b24; color:#dbe3ef; font:inherit; font-size:.7rem; line-height:1.3; word-break:keep-all; cursor:pointer; padding:6px 5px; }
.pf-checkin-steps button[aria-pressed="true"] { border-color:#e3c869; background:#282519; color:#ffe59b; }
.pf-checkin-steps button span { font-weight:800; }
.pf-checkin-controls .pf-checkin-toggle { width:44px; flex-shrink:0; font-size:1rem; }
.pf-checkin-controls button:focus-visible { outline:3px solid #ffe59b; outline-offset:3px; }
@media (max-width:480px) { .pf-checkin-controls { gap:4px; } .pf-checkin-controls button { font-size:.65rem; } }