/* Login occupies the existing invitation card; room content returns after authentication. */
html[data-account-pending] .pairing-invite > :not(.pairing-host):not(.account-gate) { visibility: hidden; }
html[data-account-pending] .host-topbar > :not(.host-topbar-logo):not(.host-topbar-spacer) { visibility: hidden; }
html[data-party-pending] .host-topbar > :not(.host-topbar-logo):not(.host-topbar-spacer) { visibility: hidden; }
html[data-shared-party] .pairing-invite > .pairing-code[hidden] { display: none !important; }
html[data-shared-party] #join-qr { object-fit: contain; }
@media (max-height: 800px) and (min-width: 721px) {
  html[data-shared-party] .pairing-connect { padding-block: 52px 18px; overflow-y: auto; }
  html[data-shared-party] .pairing-invite { padding-top: 60px; padding-bottom: 18px; }
  html[data-shared-party] .pairing-copy h1 { font-size: clamp(32px, 3vw, 46px); }
  html[data-shared-party] .pairing-copy p { font-size: 12px; line-height: 1.5; }
  html[data-shared-party] .pairing-qr { width: clamp(160px, 23vh, 184px); }
  html[data-shared-party] .pairing-code { margin-block: 12px 10px; padding-block: 7px; }
  html[data-shared-party] .paired-slots { gap: 7px; margin-top: 12px; }
  html[data-shared-party] .paired-slot { width: 40px; height: 40px; }
}
@media (max-height: 600px) { html[data-shared-party] .pairing-connect { align-items: flex-start; } }
.pairing-invite > [hidden], .account-gate [hidden] { display: none !important; }
.account-gate { display: flex; flex-direction: column; align-items: center; width: 100%; text-align: center; }
.account-code-frame { aspect-ratio: 1; }
.account-code { object-fit: contain; }
.account-placeholder { color: #6b4a3a; font-size: 14px; line-height: 1.6; }
.account-progress { justify-content: center; line-height: 1.6; }
.account-status { max-width: 300px; }
.account-retry { display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; padding: 6px 12px; border: 1px solid rgba(107,74,58,.18); border-radius: 9px; background: #fff3e3; color: #6b4a3a; font-family: inherit; font-size: 12px; font-weight: 700; line-height: 1.4; cursor: pointer; }
.account-retry:hover { background: #e4f4ef; border-color: #48b8bd; }
.account-retry:focus-visible { outline: 3px solid #48b8bd; outline-offset: 3px; }
.account-retry:disabled { opacity: .5; cursor: wait; }
.account-hint { margin-top: 10px; color: #6b4a3a; font-size: 11px; line-height: 1.5; }
.host-account { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; }
.host-account-label { cursor: default; white-space: nowrap; }
.host-account-label:hover { background: #202227; border-color: rgba(255,255,255,.13); }
.host-account-logout i { color: #ffb26b; }
.host-account-logout:disabled { opacity: .5; cursor: wait; }
body[data-phase="library"] .host-account-label i { color: #287c80; }
body[data-phase="library"] .host-account-logout i { color: #956039; }
@media (max-width: 720px) { .host-account { gap: 6px; } .host-account-label { width: 40px; padding: 0; } }
@media (max-height: 760px) and (min-width: 721px) {
  .pairing-connect:has(.account-gate) { padding-block: 48px 18px; }
  .pairing-invite:has(.account-gate) { padding-top: 54px; padding-bottom: 18px; }
  .account-gate .pairing-copy h1 { font-size: clamp(32px, 3vw, 48px); }
  .account-gate .pairing-qr { width: clamp(154px, 26vh, 200px); }
  .account-gate .pairing-code { margin-top: 12px; }
}
@media (max-height: 600px) { .pairing-connect:has(.account-gate) { overflow-y: auto; align-items: flex-start; } }
/* Tab-shaped progress follows authentication; it is not a shortcut around login. */
.pairing-steps { display: inline-flex; align-items: stretch; gap: 4px; margin: 0; padding: 4px; list-style: none; border: 1px solid rgba(107,74,58,.14); border-radius: 13px; background: #f3ede4; }
.pairing-step-tab { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 12px; border-radius: 9px; color: #806f62; font-size: 12px; font-weight: 750; line-height: 1.2; white-space: nowrap; }
.pairing-step-number { display: grid; place-items: center; min-width: 20px; height: 20px; border-radius: 6px; background: rgba(107,74,58,.07); font: 800 11px/1 Consolas, monospace; }
.pairing-step-tab.is-current { color: #143e41; background: #7ed6d6; box-shadow: 0 2px 5px rgba(39,127,131,.14); }
.pairing-step-tab.is-current .pairing-step-number { background: rgba(255,255,255,.48); }
.pairing-step-tab.is-complete { color: #287c80; }
.pairing-step-tab.is-complete .pairing-step-number { background: #e0eee5; }
.pairing-step-number i { font-size: 13px; }
@media (max-width: 380px) { .pairing-step-tab { padding-inline: 9px; gap: 5px; font-size: 11px; } }

.account-one-scan { display:none; }
html[data-native-controller] .account-two-scan { display:none; }
html[data-native-controller] .account-one-scan { display:inline; }