/* TALKCHAT_R20A40R14R2_LOGIN_REGISTER_GLASS_PARITY
   One consolidated auth visual layer:
   - first nickname login
   - guest gender selection
   - registration
   all share the same outer glass recipe.
   Auth JS / submit / validation are untouched.
*/

/* Shared outer glass recipe. */
.login-card.tc-login-reference,
.login-card:has(#authForm .gender-options),
.login-main.register-mode .login-card.register{
  background:rgba(18,22,29,.36)!important;
  -webkit-backdrop-filter:blur(.45px) saturate(101%)!important;
  backdrop-filter:blur(.45px) saturate(101%)!important;
  border:1px solid rgba(255,255,255,.16)!important;
  border-radius:16px!important;
  box-shadow:0 14px 36px rgba(0,0,0,.20)!important;
}

/* Guest gender step stays visually aligned with the first login step. */
.login-card:has(#authForm .gender-options) .nick-heading{
  color:#fff!important;
}

.login-card:has(#authForm .gender-options) .gender-options label{
  background:rgba(17,21,27,.30)!important;
  border-color:rgba(255,255,255,.16)!important;
  color:rgba(255,255,255,.94)!important;
  transition:background .16s ease,border-color .16s ease;
}

.login-card:has(#authForm .gender-options) .gender-options label:has(input:checked){
  background:rgba(24,119,242,.18)!important;
  border-color:rgba(39,133,255,.72)!important;
}

.login-card:has(#authForm .gender-options) .gender-options input{
  accent-color:#1877f2!important;
}

/* Root-cause repair for register:
   old mobile rule turns registration into a full-screen opaque panel.
   Restore the same centered card layout used by the login flow. */
.login-main.register-mode{
  min-height:100dvh!important;
  height:auto!important;
  justify-content:center!important;
  align-items:center!important;
  padding:38px 16px!important;
}

.login-main.register-mode .login-card.register{
  width:100%!important;
  max-width:440px!important;
  min-height:0!important;
  padding:28px 26px!important;
}

/* Registration fields use the same glass input language. */
.login-main.register-mode .login-card.register .input,
.login-main.register-mode .login-card.register .tc-auto-voice-row{
  background:rgba(17,21,27,.30)!important;
  border-color:rgba(255,255,255,.16)!important;
  color:#fff!important;
}

.login-main.register-mode .login-card.register .input:focus{
  background:rgba(17,21,27,.36)!important;
  border-color:#1877f2!important;
}

.login-main.register-mode .login-card.register .field,
.login-main.register-mode .login-card.register .check{
  color:rgba(255,255,255,.78)!important;
}

.login-main.register-mode .login-card.register .note{
  color:rgba(255,255,255,.68)!important;
}

@media (max-width:600px){
  .login-main.register-mode{
    padding:24px 14px calc(24px + env(safe-area-inset-bottom))!important;
  }

  .login-main.register-mode .login-card.register{
    max-width:380px!important;
    padding:24px 20px!important;
  }
}