/* Keep the active field and action reachable above mobile keyboards and system bars. */
.tpn-auth-overlay { position: fixed; inset: var(--tpn-auth-top, 0px) 0 auto; height: var(--tpn-auth-height, 100dvh); box-sizing: border-box; z-index: 10000; background: #07162485; display: flex; align-items: center; justify-content: center; padding: 20px; overflow-y: auto; }
.tpn-auth-panel { width: 100%; max-width: 440px; max-height: calc(var(--tpn-auth-height, 100dvh) - 40px); overflow-y: auto; box-sizing: border-box; background: #fff; color: #13212c; padding: 28px; border-radius: 8px; box-shadow: 0 16px 64px #0003; font: 16px/1.5 system-ui, sans-serif; letter-spacing: 0; }
.tpn-auth-panel * { box-sizing: border-box; }
.tpn-auth-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.tpn-auth-close { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #dce0e4; border-radius: 6px; background: white; cursor: pointer; }
.tpn-auth-panel h2 { font-size: 26px; line-height: 1.25; margin: 0 0 10px; }
.tpn-auth-description { color: #52616d; margin: 0 0 24px; overflow-wrap: anywhere; }
.tpn-auth-field { display: grid; gap: 8px; font-weight: 600; margin-bottom: 18px; }
.tpn-auth-field input { min-width: 0; width: 100%; height: 54px; font: 17px system-ui, sans-serif; padding: 12px; border: 1px solid #aab4bf; border-radius: 6px; background: #fff; color: #13212c; }
.tpn-auth-field input:focus { outline: 3px solid #d6000026; border-color: #d60000; }
.tpn-auth-field input::placeholder { color: #71808b; font-size: 15px; }
.tpn-auth-field .tpn-auth-code { font-size: 24px; }
.tpn-auth-primary { width: 100%; min-height: 52px; border: 0; border-radius: 6px; background: #d60000; color: #fff; font: 650 17px system-ui, sans-serif; cursor: pointer; padding: 12px 18px; }
.tpn-auth-panel button:disabled { opacity: .55; cursor: default; }
.tpn-auth-link { border: 0; background: none; color: #ba0000; min-height: 44px; padding: 8px; cursor: pointer; font: 600 14px system-ui, sans-serif; }
.tpn-auth-actions { display: flex; justify-content: space-between; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.tpn-auth-footer { display: flex; flex-direction: column; align-items: center; border-top: 1px solid #e5e8eb; margin-top: 24px; padding-top: 12px; }
.tpn-auth-disclosure { font-size: 12px; color: #64727d; line-height: 1.5; margin: 0 0 18px; }
.tpn-auth-error { background: #fff0f1; border-left: 3px solid #c72437; color: #a11c2d; padding: 12px; border-radius: 4px; font-size: 14px; overflow-wrap: anywhere; }
.tpn-auth-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; margin: 0 0 20px; }
.tpn-auth-consent input { width: 20px; height: 20px; flex-shrink: 0; accent-color: #d60000; margin-top: 3px; }
.tpn-auth-consent a { color: #ba0000; }
.tpn-auth-progress { min-height: 52px; background: #f2f4f7; padding: 15px; border-radius: 6px; color: #52616d; }
.tpn-auth-signout { align-self: stretch; min-height: 48px; border: 1px solid #d6dce2; background: #fff; color: #b00000; border-radius: 6px; padding: 12px 20px; margin: 12px 0; font: 600 16px system-ui, sans-serif; cursor: pointer; }
@media (max-width: 520px) {
  .tpn-auth-overlay { padding: 12px; align-items: center; }
  .tpn-auth-panel { padding: 22px; max-height: calc(var(--tpn-auth-height, 100dvh) - 24px); padding-bottom: max(22px, env(safe-area-inset-bottom)); }
}
@media (max-height: 550px) { .tpn-auth-overlay { align-items: flex-start; } .tpn-auth-top { margin-bottom: 12px; } }