Something went wrong. Try again.
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384.pairing-dialog { width: min(520px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: var(--space-xl); overflow: auto; color: var(--color-text); background: var(--color-surface-raised); border: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-raised);}
.pairing-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-lg); margin-bottom: var(--space-xl);}
.pairing-header h2 { margin-bottom: 0;}
.pairing-close { min-width: 44px; flex-shrink: 0;}
.pairing-content { display: grid; justify-items: center;}
.pairing-instruction { margin-bottom: var(--space-xl); text-align: center;}
.pairing-qr-frame { max-width: 100%; line-height: 0; background: #ffffff; border: 1px solid var(--color-border);}
.pairing-qr-frame canvas { display: block; max-width: min(100%, 336px); height: auto; image-rendering: pixelated;}
.pairing-countdown,.pairing-state { min-height: 1.5em; margin: var(--space-lg) 0 0; text-align: center;}
.pairing-countdown { color: var(--color-text-muted); font-variant-numeric: tabular-nums;}
.pairing-actions { display: flex; justify-content: center; margin-top: var(--space-xl);}
@media (max-width: 480px) { .pairing-dialog { width: calc(100% - 16px); max-height: calc(100dvh - 16px); padding: var(--space-lg); }
.pairing-header, .pairing-instruction { margin-bottom: var(--space-lg); }}