[hidden] { display: none !important; }
.auth-gate { max-width: 460px; margin: 8vh auto; padding: 28px; border: 1px solid #b9c9bf; border-radius: 14px; background: #fff; color: #26324a; }
.auth-gate h1 { font-size: 23px; }
.auth-gate h2 { font-size: 20px; }
.auth-gate form, .auth-gate label { display: grid; gap: 8px; }
.auth-gate form { gap: 18px; }
.auth-gate input, .auth-accounts input { padding: 12px; border: 1px solid #b9c9bf; border-radius: 6px; font: inherit; min-width: 0; }
.auth-gate button, .auth-account button, .auth-accounts button { border: 1px solid #83b994; background: #edf6ef; border-radius: 6px; padding: 10px 14px; font: inherit; cursor: pointer; }
.auth-gate button { background: #277b42; color: white; }
.auth-account { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0; }
.auth-account p { flex-basis: 100%; }
.auth-account-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 12px 0; border-bottom: 1px solid #d6ded8; }
.auth-accounts { margin-top: 20px; }
.auth-accounts p { overflow-wrap: anywhere; }
.auth-accounts [aria-live] { margin: 12px 0; }
@media (max-width: 600px) { .auth-gate { margin: 5vh 16px; padding: 20px; } }

.auth-account-content { overflow-y: auto; }
.auth-account-content > * { flex-shrink: 0; }

.pc-login-qr { display: block; width: min(280px, 100%); height: auto; margin: 12px auto; }
.auth-gate:has(.pc-login-display) { max-width: 722px; }
.pc-login-display { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 9fr); align-items: center; gap: 24px; max-width: 664px; margin: 0 auto; }
.pc-login-mascot { min-width: 0; margin: 0; text-align: center; }
.pc-login-mascot img { display: block; width: 100%; height: auto; }
.pc-login-mascot figcaption { margin-top: 6px; color: #667085; font-size: 11px; line-height: 1.5; }

.pc-registration { margin-top: 20px; padding: 14px; border: 1px solid #b9c9bf; border-radius: 8px; font-size: 16px; overflow-wrap: anywhere; }
.pc-registration summary { cursor: pointer; }
.pc-registration form, .pc-registration label { display: grid; gap: 8px; margin-top: 12px; }
.pc-registration input, .pc-registration select { width: 100%; box-sizing: border-box; padding: 10px; font: inherit; border: 1px solid #b9c9bf; border-radius: 6px; }
.pc-registration button { padding: 10px 14px; margin-top: 8px; font: inherit; color: #fff; background: #277b42; border: 0; border-radius: 6px; cursor: pointer; }
.pc-registration button:disabled { opacity: .6; cursor: wait; }
.pc-registration-item { padding: 8px 0; border-bottom: 1px solid #d9e3dc; }