#modal:has(.qr-dialog){width:440px;max-width:calc(100vw - 24px);max-height:92dvh;border-radius:14px}
#modal:has(.qr-dialog) .modal-head{padding:16px 20px}
#modal:has(.qr-dialog) .modal-head h2{font-size:14px}
#modal:has(.qr-dialog) #modal-body{padding:0}
.qr-box.qr-dialog{padding:23px 24px 0;text-align:center}
.qr-dialog>h3{font-size:17px;line-height:1.6;color:var(--text);font-weight:600;margin:0}
.qr-dialog>.qr-description{font-size:12px;line-height:1.8;margin-top:5px;color:var(--muted)}
.qr-dialog>img{display:block;object-fit:contain;width:220px;height:220px;max-width:100%;padding:12px;margin:20px auto 15px;border:1px solid var(--border);border-radius:12px;background:#fff;box-shadow:0 3px 10px #17335a04}
.qr-dialog>img[hidden]{display:none!important}
.qr-dialog>.qr-state{display:flex;justify-content:center;align-items:center;gap:7px;width:fit-content;max-width:100%;min-height:29px;padding:5px 10px;margin:0 auto;background:var(--blue-soft);border-radius:7px;font-size:11px;line-height:1.7;color:var(--blue)}
.qr-dialog .qr-state .service-dot{margin:0;width:6px;height:6px}
.qr-dialog>.qr-note{font-size:10px;line-height:1.8;color:var(--muted);margin:9px auto 19px;max-width:310px}
.qr-dialog .qr-actions{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:10px;margin:0 -24px;padding:15px 20px;border-top:1px solid var(--border);background:var(--surface-soft);border-radius:0 0 13px 13px}
.qr-dialog .qr-actions button{width:100%;min-width:0;min-height:38px;font-size:12px;padding:9px 12px;gap:6px;margin:0;border-radius:8px}
.qr-dialog .qr-actions .icon{width:14px;height:14px}
.qr-dialog .qr-actions #qr-back>.icon{transform:rotate(180deg)}
.qr-dialog .qr-actions .secondary{background:var(--surface);color:var(--text)}
.qr-dialog .qr-method-label{text-align:left;max-width:none;margin:0 0 20px;font-size:11px}
.qr-dialog .qr-method-label .select-trigger{margin-top:6px;min-height:36px;padding:8px 11px;font-size:12px;border-radius:8px}
.qr-dialog .qr-code-placeholder{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:13px;width:220px;height:220px;max-width:100%;margin:20px auto 15px;border:1px dashed var(--border);border-radius:12px;background:var(--surface-soft);color:var(--muted);font-size:12px}
.qr-dialog .qr-code-placeholder[hidden]{display:none!important}
.qr-code-placeholder>.icon{width:54px;height:54px;opacity:.55}
.qr-dialog[data-qr-phase=expired]>.qr-state,.qr-dialog[data-qr-phase=refused]>.qr-state{color:var(--muted);background:var(--surface-soft)}
.qr-dialog[data-qr-phase=expired] .qr-state .service-dot,.qr-dialog[data-qr-phase=refused] .qr-state .service-dot{background:var(--muted)}
.qr-dialog[data-qr-phase=error]>.qr-state{color:var(--red);background:var(--red-soft)}
.qr-dialog[data-qr-phase=error] .qr-state .service-dot{background:var(--red)}
.qr-loading-content{padding:24px 0 38px}
.qr-loading-symbol,.qr-error-symbol{display:grid;place-items:center;width:58px;height:58px;margin:0 auto 18px;border-radius:17px;background:var(--blue-soft);color:var(--blue)}
.qr-loading-spinner{width:26px;height:26px;border:2px solid color-mix(in srgb,var(--blue) 18%,transparent);border-top-color:var(--blue);border-radius:50%;animation:qr-dialog-spin .85s linear infinite}
.qr-dialog .qr-loading-content h3{font-size:16px;margin-bottom:7px}
.qr-dialog .qr-loading-content p{font-size:12px;color:var(--muted)}
.qr-dialog .qr-loading-actions{grid-template-columns:1fr}
.qr-dialog .qr-loading-actions button{max-width:180px;justify-self:center}
.qr-dialog.qr-error{padding-top:26px}
.qr-error-symbol{color:var(--red);background:var(--red-soft);margin-bottom:14px}
.qr-error-symbol .icon{width:28px;height:28px}
.qr-dialog>.qr-error-message{font-size:12px;line-height:1.9;color:var(--muted);overflow-wrap:anywhere;margin:10px auto 25px;max-width:330px}
.qr-dialog:has(.dy-sms-verification)>.qr-note{display:none}
.qr-dialog:has(.dy-sms-verification)>.qr-code-placeholder{display:none!important}
.qr-dialog:has(.dy-sms-verification)>.qr-state{display:none}
.qr-dialog:has(.dy-sms-verification)>h3{font-size:16px;margin-top:0}
.qr-dialog .dy-sms-verification{margin:17px auto 18px;padding:0}
.qr-dialog .dy-sms-lock{width:46px;height:46px;margin-bottom:13px}
.qr-dialog .dy-sms-lock .icon{width:23px;height:23px}
.qr-dialog .dy-sms-verification h3{font-size:17px;margin-bottom:8px}
.qr-dialog .dy-sms-verification>p{font-size:12px;margin-bottom:14px}
.qr-dialog .dy-sms-actions{gap:9px}
.qr-dialog .dy-sms-actions button{border-radius:8px;font-size:12px;min-height:38px;padding:9px 12px}
.qr-dialog #dy-sms-countdown{margin:10px 0 14px}
.qr-dialog .dy-login-progress{max-width:none;margin:0;padding:24px 0 32px}
.qr-dialog .dy-login-symbol{width:60px;height:60px;border-radius:18px;margin-bottom:18px}
.qr-dialog .dy-login-progress h3{font-size:18px;margin-bottom:8px}
.qr-dialog .dy-login-progress p{font-size:12px}
.qr-dialog .dy-login-track{margin-top:20px}
@keyframes qr-dialog-spin{to{transform:rotate(360deg)}}
@media(max-width:480px){#modal:has(.qr-dialog) .modal-head{padding:14px 16px}.qr-box.qr-dialog{padding:20px 18px 0}.qr-dialog>img,.qr-dialog .qr-code-placeholder{width:208px;height:208px;margin-top:17px}.qr-dialog .qr-actions{margin:0 -18px;padding:13px 16px;gap:9px}.qr-dialog .qr-actions button{font-size:11px;min-height:38px}.qr-dialog>.qr-note{margin-bottom:17px}.qr-dialog>h3{font-size:16px}}
@media(prefers-reduced-motion:reduce){.qr-loading-spinner{animation:none}}