/* ==========================================================================
   Log in / sign up (v15): poster on the left, calm and clean form on the right.
   Charcoal surfaces, one gold accent for the main action.
   ========================================================================== */
.pxa-auth-card {
  grid-template-columns: 400px minmax(0, 1fr); width: min(920px, 100%); height: min(790px, calc(100dvh - 32px)); max-height: none;
  border-radius: 20px; background: #111215; border: 1px solid rgba(255, 255, 255, .06); box-shadow: 0 40px 120px -30px rgba(0, 0, 0, .9);
}
.pxa-auth-card .pxa-auth-art { display: block; padding: 0; background: #0b0b0d; overflow: hidden; }
.pxa-auth-card .pxa-auth-art::after { content: ''; position: absolute; inset: 0; right: -1px; width: auto; height: auto; top: 0; border: 0; border-radius: 0; box-shadow: none;
  background: linear-gradient(90deg, transparent 82%, rgba(17, 18, 21, .55) 100%); pointer-events: none; }
.pxa-auth-poster { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }

.pxa-auth-card .pxa-auth-main { display: flex; flex-direction: column; padding: 36px 40px 28px; background: #111215; font-family: var(--pa-font); }
.pxa-auth-card .pxa-x { top: 18px; right: 18px; width: 34px; height: 34px; border-radius: 10px; background: transparent; border-color: rgba(255, 255, 255, .08); }
.pxa-auth-card .pxa-x:hover { background: rgba(255, 255, 255, .05); }
.pxa-auth-card .pxa-auth-tabs { align-self: flex-start; margin-bottom: 28px; padding: 3px; gap: 2px; border-radius: 10px; background: #18191d; border: 1px solid rgba(255, 255, 255, .06); }
.pxa-auth-card .pxa-auth-tabs button { min-width: 96px; height: 34px; border-radius: 8px; font-size: 13.5px; font-weight: 600; color: #9a9ca4; }
.pxa-auth-card .pxa-auth-tabs button:hover { color: #e8e9ec; }
.pxa-auth-card .pxa-auth-tabs button.is-active { background: #2a2b31; color: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
.pxa-auth-card .pxa-auth-title { font-family: var(--pa-font); font-size: 24px; font-weight: 700; letter-spacing: -.015em; color: #f4f4f6; margin-bottom: 6px; }
.pxa-auth-card .pxa-auth-sub { font-size: 14px; color: #8b8e97; margin-bottom: 24px; }
.pxa-auth-card .pxa-form { gap: 16px; }
.pxa-auth-card .pxa-field > span { font-size: 12.5px; font-weight: 500; color: #b7b9c0; }
.pxa-auth-card .pxa-input, .pxa-auth-card .pxa-field select, .pxa-auth-card .pxa-code {
  height: 46px; border-radius: 10px; background: #16171b; border: 1px solid #26282e; box-shadow: none;
}
.pxa-auth-card .pxa-input:hover, .pxa-auth-card .pxa-field select:hover { border-color: #33363d; }
.pxa-auth-card .pxa-input:focus-within, .pxa-auth-card .pxa-field select:focus, .pxa-auth-card .pxa-code:focus { border-color: #6f727b; box-shadow: 0 0 0 3px rgba(255, 255, 255, .06); }
.pxa-auth-card .pxa-input input { font-size: 14.5px; }
.pxa-auth-card .pxa-input > .px-ic-svg { color: #6f727b; }
.pxa-auth-card .pxa-hint { color: #6f727b; }
.pxa-auth-card .pxa-strength i { background: #24262b; }
.pxa-auth-card .pxa-check { font-size: 12.5px; color: #9a9ca4; }
.pxa-auth-card .pxa-check input { accent-color: #d6a54f; }
.pxa-auth-card .pxa-check a, .pxa-auth-card .pxa-link { color: #d6a54f; text-decoration: none; }
.pxa-auth-card .pxa-check a:hover, .pxa-auth-card .pxa-link:hover { text-decoration: underline; }
.pxa-auth-card .pxa-btn-gold { height: 48px; border-radius: 10px; background: #d6a54f; color: #16120a; font-size: 14.5px; font-weight: 700; box-shadow: none; filter: none; }
.pxa-auth-card .pxa-btn-gold:hover:not(:disabled) { background: #e0b263; filter: none; }
.pxa-auth-card .pxa-or { margin: 22px 0 16px; color: #6f727b; }
.pxa-auth-card .pxa-or::before, .pxa-auth-card .pxa-or::after { background: #23252a; }
.pxa-auth-card .pxa-btn-google { height: 46px; border-radius: 10px; }
.pxa-auth-card .pxa-auth-secure { margin-top: auto; padding-top: 18px; color: #5f626a; }
.pxa-auth-card .pxa-2fa-badge { background: rgba(214, 165, 79, .1); color: #d6a54f; }
.pxa-auth-card .pxa-form-error.is-confirm { background: rgba(214, 165, 79, .08); border-color: rgba(214, 165, 79, .25); }
.pxa-auth-card .pxa-input input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #16171b inset; box-shadow: 0 0 0 1000px #16171b inset; }

@media (max-width: 980px) and (min-width: 901px) {
  .pxa-auth-card { grid-template-columns: 340px minmax(0, 1fr); }
  .pxa-auth-card .pxa-auth-main { padding: 32px 28px 24px; }
}
/* phones: full-screen form with a slim strip of the poster on top */
@media (max-width: 900px) {
  .pxa-auth-card { grid-template-columns: 1fr; grid-template-rows: auto 1fr; height: 100dvh; border-radius: 0; border: 0; }
  .pxa-auth-card .pxa-auth-art { display: block; height: 170px; }
  .pxa-auth-poster { object-position: 50% 36%; }
  .pxa-auth-card .pxa-auth-art::after { background: linear-gradient(180deg, transparent 55%, #111215 100%); }
  .pxa-auth-card .pxa-auth-main { padding: 20px 20px calc(28px + env(safe-area-inset-bottom, 0px)); background: #111215; }
  .pxa-auth-card .pxa-auth-main::before { display: none; }
  .pxa-auth-card .pxa-x { position: fixed; top: calc(12px + env(safe-area-inset-top, 0px)); right: 12px; background: rgba(17, 18, 21, .7); z-index: 3; }
  .pxa-auth-card .pxa-auth-tabs { align-self: stretch; margin-bottom: 20px; }
}