/* Keep wheel, touch and keyboard scrolling; only hide the scrollbar chrome. */
:where(dialog,[role="dialog"],[aria-modal="true"]),
:where(dialog,[role="dialog"],[aria-modal="true"]) *{scrollbar-width:none!important;-ms-overflow-style:none;scrollbar-gutter:auto}
:where(dialog,[role="dialog"],[aria-modal="true"])::-webkit-scrollbar,
:where(dialog,[role="dialog"],[aria-modal="true"]) *::-webkit-scrollbar{display:none!important;width:0;height:0}

html:has(dialog[open]){overflow:hidden}
dialog.qr-auth-dialog{box-sizing:border-box;width:min(420px,calc(100% - 32px));max-height:calc(100dvh - 32px);margin:auto;padding:26px;overflow:auto;overscroll-behavior:contain;border:1px solid #e0e6e1;border-radius:24px;background:#fff;color:#203027;font:14px/1.65 system-ui,sans-serif;box-shadow:0 24px 80px #13241926}
dialog.qr-auth-dialog::backdrop{background:#10182866;animation:qr-dialog-backdrop 180ms ease-out}
.qr-auth-dialog header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0}
.qr-auth-dialog .qr-dialog-eyebrow{margin:0 0 6px;font-size:11px;font-weight:650;letter-spacing:.06em;color:#62764c}
.qr-auth-dialog h2{margin:0;font-size:22px;line-height:1.35;font-weight:650;text-wrap:balance}
.qr-auth-dialog [data-qr-close]{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;min-height:44px;padding:0;border:0;border-radius:12px;background:#f2f5f2;color:#667369;font:26px/1 system-ui;cursor:pointer}
.qr-auth-dialog [data-qr-description]{margin:14px 0 22px;color:#647167;font-size:13px;line-height:1.75}
.qr-auth-dialog [data-qr-body]{text-align:center}
.qr-auth-dialog .auth-qr-frame{margin-inline:auto}
.qr-auth-dialog [data-qr-retry]{min-height:44px;margin-top:16px;padding:10px 18px;border:1px solid #d8e2d5;border-radius:12px;background:#f1f6ee;color:#315a37;font:600 14px system-ui;cursor:pointer}
.qr-auth-dialog button:focus-visible{outline:3px solid #327344;outline-offset:3px}
.qr-auth-dialog [hidden]{display:none!important}
@keyframes qr-dialog-backdrop{from{background:#10182800}to{background:#10182866}}
@media(max-width:380px){dialog.qr-auth-dialog{padding:20px}.qr-auth-dialog h2{font-size:20px}}
@media(prefers-reduced-motion:reduce){dialog.qr-auth-dialog::backdrop{animation:none}}

.auth-qr-frame{position:relative;display:grid;place-items:center;width:240px;height:240px;max-width:100%;margin:auto;border-radius:16px;background:#fff;border:1px solid #e3e8e4;overflow:hidden}
.creator-qr-content .auth-qr-frame img,.auth-qr-frame img{display:block;width:240px;height:auto;max-width:100%;padding:0;border-radius:0;box-shadow:none;image-rendering:pixelated}
.auth-qr-frame [data-qr-overlay]{position:absolute;inset:0;display:grid;place-items:center;color:#284d36;background:#f4f8f3;font-size:42px;font-weight:600;pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity 180ms ease-out,transform 180ms ease-out}
[data-state="loading"] [data-qr-overlay],[data-state="success"] [data-qr-overlay],[data-state="expired"] [data-qr-overlay],[data-state="cancelled"] [data-qr-overlay],[data-state="error"] [data-qr-overlay]{opacity:1;transform:translateY(0)}
.auth-qr-frame [data-qr-overlay][hidden],.auth-qr-frame [hidden],.phone-auth-dialog [hidden]{display:none!important}
[data-state="loading"] .auth-qr-frame [data-qr-symbol]{width:28px;height:28px;border:3px solid #d4e2d4;border-top-color:#397649;border-radius:50%;animation:auth-qr-spin 850ms linear infinite}
.auth-qr-status{display:grid;gap:5px;text-align:center;margin:14px auto 0;line-height:1.5;min-height:52px}
.auth-qr-status strong{color:#26372d;font-size:15px;transition:color 160ms ease-out}.auth-qr-status small{color:#5a6a60!important;font-size:12px!important;font-weight:400!important}
[data-state="scanned"] .auth-qr-status strong,[data-state="success"] .auth-qr-status strong{color:#30623f}[data-state="error"] .auth-qr-status strong{color:#9b3333}
[data-qr-retry]{min-height:44px;margin:10px auto 0;padding:10px 18px;border:1px solid #d0ddd1;border-radius:12px;background:#edf5e8;color:#234c2f;font:600 14px system-ui;cursor:pointer}

@keyframes auth-qr-spin{to{transform:rotate(360deg)}}
@media(max-width:380px){.qr-auth-dialog .auth-qr-frame{width:224px;height:224px}}
@media(prefers-reduced-motion:reduce){.qr-auth-dialog [data-qr-symbol]{animation:none!important}.qr-auth-dialog [data-qr-overlay],.qr-auth-dialog .auth-qr-status strong{transition:none;transform:none}}