/**
 * TeslaHost Auth — Frontend Styles v3
 * ISOLATION BUILD: All rules scoped to #tha-root to prevent
 * theme/plugin CSS contamination via maximum specificity.
 *
 * Soft UI · Apple HIG · Stripe-quality design
 * Developed by Sebastian Franco
 */

/* ═══ Animations ═══ */
@keyframes thaFadeIn{from{opacity:0}to{opacity:1}}
@keyframes thaScaleIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
@keyframes thaSlideDown{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:translateY(0)}}
@keyframes thaSlideUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes thaSpin{to{transform:rotate(360deg)}}
@keyframes thaShake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}

/* ═══════════════════════════════════════════════════════
   RESET — Nuclear isolation: undo everything themes inject
   ═══════════════════════════════════════════════════════ */
#tha-root,
#tha-root *,
#tha-root *::before,
#tha-root *::after {
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
    border-radius: 0 !important;
    float: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    min-height: 0 !important;
    max-width: none !important;
    text-align: left !important;
    vertical-align: baseline !important;
    list-style: none !important;
    opacity: 1 !important;
    filter: none !important;
}

/* ═══ Base / Wrapper ═══ */
#tha-root .tha-auth-wrapper {
    min-height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    padding: 40px 20px !important;
    font-family: var(--tha-font-family, Inter, -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif) !important;
    font-size: var(--tha-font-size-base, 16px) !important;
    line-height: 1.5 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    color: var(--tha-text, #0f172a) !important;
    text-align: center !important;
    width: 100% !important;
}

/* ═══ Theme Backgrounds (mapped by PHP inline CSS) ═══ */
#tha-root .tha-theme-dark,
#tha-root .tha-theme-light {
    background: var(--tha-page-bg) !important;
    background-image: var(--tha-page-bg-image, none) !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    position: relative !important;
}
/* Background overlay for images/video */
#tha-root .tha-auth-wrapper::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: var(--tha-bg-overlay, transparent) !important;
    z-index: 0 !important;
    pointer-events: none !important;
}
#tha-root .tha-auth-wrapper > * {
    position: relative !important;
    z-index: 1 !important;
}

/* ═══ Logo ═══ */
#tha-root .tha-auth-logo {
    text-align: center !important;
    margin-bottom: 32px !important;
}
#tha-root .tha-auth-logo img {
    max-width: var(--tha-logo-width, 180px) !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
}

/* ═══ Card ═══ */
#tha-root .tha-auth-card {
    position: relative !important;
    width: 100% !important;
    max-width: var(--tha-form-max-width, 430px) !important;
    background: var(--tha-form-bg, #fff) !important;
    border-radius: var(--tha-form-radius, 24px) !important;
    padding: 44px 40px !important;
    box-shadow: var(--tha-form-shadow, 0 4px 6px rgba(0,0,0,.03), 0 20px 50px rgba(0,0,0,.08)) !important;
    animation: thaScaleIn .35s cubic-bezier(.34,1.56,.64,1) !important;
    text-align: left !important;
}
#tha-root .tha-card-wide {
    max-width: 450px !important;
}

/* ═══ Header ═══ */
#tha-root .tha-auth-title {
    text-align: center !important;
    font-size: 24px !important;
    font-weight: var(--tha-font-heading-weight, 700) !important;
    font-family: var(--tha-font-heading, inherit) !important;
    color: var(--tha-text, #0f172a) !important;
    margin: 0 0 8px !important;
    letter-spacing: -.025em !important;
    line-height: 1.3 !important;
}
#tha-root .tha-auth-subtitle {
    text-align: center !important;
    font-size: 14px !important;
    font-family: var(--tha-font-heading, inherit) !important;
    color: var(--tha-text-light, #64748b) !important;
    margin: 0 0 30px !important;
    line-height: 1.5 !important;
}

/* ═══ Form ═══ */
#tha-root .tha-auth-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
}

/* ═══ Fields ═══ */
#tha-root .tha-field-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
}
#tha-root .tha-field-row {
    display: flex !important;
    gap: 12px !important;
}
#tha-root .tha-field-row .tha-field-group {
    flex: 1 !important;
}
#tha-root .tha-field-label {
    font-size: 13px !important;
    font-weight: var(--tha-font-labels-weight, 600) !important;
    font-family: var(--tha-font-labels, inherit) !important;
    color: var(--tha-text, #0f172a) !important;
    letter-spacing: -.01em !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    line-height: 1.4 !important;
}
#tha-root .tha-field-optional {
    font-size: 11px !important;
    color: #94a3b8 !important;
    font-weight: 400 !important;
}
#tha-root .tha-field-label-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}
#tha-root .tha-field-link {
    font-size: 12px !important;
    color: var(--tha-accent, #6366f1) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    transition: opacity .15s !important;
}
#tha-root .tha-field-link:hover {
    opacity: .8 !important;
}

/* ═══ Input ═══ */
#tha-root .tha-input-wrap {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}
#tha-root .tha-field-input {
    width: 100% !important;
    padding: 14px 16px !important;
    background: var(--tha-input-bg, #f8fafc) !important;
    border: 1.5px solid var(--tha-input-border, #e2e8f0) !important;
    border-radius: var(--tha-input-radius, 14px) !important;
    font-size: 14px !important;
    color: var(--tha-input-text, #0f172a) !important;
    font-family: inherit !important;
    outline: none !important;
    transition: all .2s ease !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    height: auto !important;
    line-height: 1.4 !important;
    box-shadow: none !important;
}
#tha-root .tha-field-input::placeholder {
    color: #94a3b8 !important;
}
#tha-root .tha-field-input:focus {
    border-color: var(--tha-input-focus, #6366f1) !important;
    box-shadow: var(--tha-shadow-input-focus) !important;
    outline: none !important;
}
#tha-root .tha-field-input.tha-has-error {
    border-color: var(--tha-error, #ef4444) !important;
    box-shadow: 0 0 0 4px rgba(239,68,68,.05) !important;
    animation: thaShake .4s ease !important;
}
#tha-root .tha-input-icon {
    position: absolute !important;
    left: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #94a3b8 !important;
    display: flex !important;
    pointer-events: none !important;
    z-index: 1 !important;
    transition: color .2s !important;
}
#tha-root .tha-input-icon svg {
    width: 17px !important;
    height: 17px !important;
    stroke-width: 1.8 !important;
}
#tha-root .tha-has-icon {
    padding-left: 46px !important;
}
#tha-root .tha-input-wrap:focus-within .tha-input-icon {
    color: var(--tha-input-focus, #6366f1) !important;
}

/* ═══ Autofill Override — prevent white flash ═══ */
#tha-root input:-webkit-autofill,
#tha-root input:-webkit-autofill:hover,
#tha-root input:-webkit-autofill:focus,
#tha-root input:-webkit-autofill:active,
#tha-root select:-webkit-autofill,
#tha-popup-root input:-webkit-autofill,
#tha-popup-root input:-webkit-autofill:hover,
#tha-popup-root input:-webkit-autofill:focus,
#tha-popup-root input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--tha-input-bg, #1e293b) inset !important;
    -webkit-text-fill-color: var(--tha-input-text, var(--tha-text, #e2e8f0)) !important;
    box-shadow: 0 0 0 1000px var(--tha-input-bg, #1e293b) inset !important;
    background-color: var(--tha-input-bg, #1e293b) !important;
    border-color: var(--tha-input-border, rgba(255,255,255,.08)) !important;
    transition: background-color 5000s ease-in-out 0s !important;
    caret-color: var(--tha-input-text, var(--tha-text, #e2e8f0)) !important;
}

/* Password toggle */
#tha-root .tha-password-toggle {
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    color: #94a3b8 !important;
    padding: 0 !important;
    display: flex !important;
    z-index: 1 !important;
    transition: color .15s !important;
}
#tha-root .tha-password-toggle:hover {
    color: var(--tha-text, #0f172a) !important;
}
#tha-root .tha-password-toggle svg {
    width: 17px !important;
    height: 17px !important;
    stroke-width: 1.8 !important;
}
#tha-root .tha-has-toggle {
    padding-right: 46px !important;
}

/* ═══ Select dropdown (for phone prefix, etc.) ═══ */
#tha-root select.tha-field-input {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 12px !important;
    padding-right: 36px !important;
    background-color: var(--tha-input-bg, #f8fafc) !important;
}

/* ═══ Password Strength ═══ */
#tha-root .tha-pw-strength {
    display: none !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin-top: 4px !important;
}
#tha-root .tha-pw-strength.tha-visible {
    display: flex !important;
}
#tha-root .tha-pw-bar-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}
#tha-root .tha-pw-bar-track {
    flex: 1 !important;
    height: 3px !important;
    background: #e2e8f0 !important;
    border-radius: 4px !important;
    overflow: hidden !important;
}
#tha-root .tha-pw-bar-fill {
    height: 100% !important;
    width: 0;
    border-radius: 4px !important;
    transition: all .4s ease !important;
    background: transparent;
}
#tha-root .tha-pw-bar-label {
    font-size: 11px !important;
    font-weight: 700 !important;
    min-width: 44px !important;
    text-align: right !important;
}
#tha-root .tha-pw-reqs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px 14px !important;
}
#tha-root .tha-pw-req {
    font-size: 11.5px !important;
    color: #94a3b8 !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    transition: color .2s !important;
}
#tha-root .tha-pw-req.tha-met {
    color: var(--tha-success, #10b981) !important;
}
#tha-root .tha-pw-req-dot {
    width: 13px !important;
    height: 13px !important;
    border-radius: 50% !important;
    border: 1.5px solid #d1d5db !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
    background: transparent !important;
}
#tha-root .tha-pw-req.tha-met .tha-pw-req-dot {
    display: none !important;
}
#tha-root .tha-pw-req-check {
    display: none !important;
}
#tha-root .tha-pw-req.tha-met .tha-pw-req-check {
    display: inline-flex !important;
}
#tha-root .tha-pw-req-check svg {
    width: 13px !important;
    height: 13px !important;
    stroke-width: 2.5 !important;
}

/* ═══ Login Tabs ═══ */
#tha-root .tha-login-tabs {
    display: flex !important;
    background: var(--tha-nav-bg) !important;
    border-radius: 12px !important;
    padding: 3.5px !important;
    gap: 3px !important;
}
#tha-root .tha-login-tab {
    flex: 1 !important;
    padding: 10px 14px !important;
    border-radius: 9px !important;
    border: none !important;
    background: transparent !important;
    color: var(--tha-nav-text) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    font-family: inherit !important;
    transition: all .2s !important;
    text-align: center !important;
    line-height: 1.4 !important;
}
#tha-root .tha-login-tab.tha-active {
    background: var(--tha-nav-active-bg, #fff) !important;
    color: var(--tha-nav-active-text, #0f172a) !important;
    font-weight: 600 !important;
    box-shadow: var(--tha-shadow-sm, 0 1px 4px rgba(0,0,0,.06)) !important;
}

/* ═══ Social ═══ */
#tha-root .tha-social-btn {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    padding: 13px 16px !important;
    background: var(--tha-social-bg, #f8fafc) !important;
    border: 1.5px solid var(--tha-social-border, #e2e8f0) !important;
    border-radius: var(--tha-input-radius, 14px) !important;
    cursor: pointer !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--tha-text, #0f172a) !important;
    font-family: inherit !important;
    transition: all .2s cubic-bezier(.16,1,.3,1) !important;
    text-decoration: none !important;
    line-height: 1.4 !important;
}
#tha-root .tha-social-btn:hover {
    border-color: var(--tha-input-focus, #6366f1) !important;
    background: var(--tha-social-hover, #f1f5f9) !important;
    box-shadow: var(--tha-shadow-sm, 0 2px 8px rgba(0,0,0,.06)) !important;
    transform: translateY(-1px) !important;
}
#tha-root .tha-social-btn svg {
    width: 17px !important;
    height: 17px !important;
    flex-shrink: 0 !important;
}
#tha-root .tha-social-btn span {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: inherit !important;
    opacity: 1 !important;
}

/* ═══ Social Section (below submit button) ═══ */
#tha-root .tha-auth-divider {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    margin-top: 40px !important;
    margin-bottom: 16px !important;
    padding-top: 0 !important;
}
#tha-root .tha-auth-divider::before,
#tha-root .tha-auth-divider::after {
    content: '' !important;
    flex: 1 !important;
    height: 1px !important;
    background: var(--tha-input-border) !important;
}
#tha-root .tha-auth-divider span {
    font-size: 11.5px !important;
    color: var(--tha-text-muted, #94a3b8) !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
}
/* ═══ Social Row ═══ */
#tha-root .tha-social-row {
    margin-top: 18px !important;
    display: flex !important;
    gap: 10px !important;
}

/* ═══ Soft UI Checkboxes ═══ */
#tha-root .tha-consent-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
}
#tha-root .tha-checkbox-label {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    cursor: pointer !important;
    font-size: 13px !important;
    color: var(--tha-text-light, #94a3b8) !important;
    line-height: 1.5 !important;
    -webkit-user-select: none !important;
    user-select: none !important;
}
#tha-root .tha-checkbox-label input[type=checkbox] {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
}
#tha-root .tha-checkbox-label .tha-check-box {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    margin-top: 1px !important;
    flex-shrink: 0 !important;
    border-radius: 7px !important;
    border: 2px solid var(--tha-input-border) !important;
    background: var(--tha-input-bg) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all .2s cubic-bezier(.4,0,.2,1) !important;
}
#tha-root .tha-checkbox-label .tha-check-box svg {
    width: 12px !important;
    height: 12px !important;
    stroke: #fff !important;
    stroke-width: 3 !important;
    opacity: 0 !important;
    transform: scale(.5) !important;
    transition: all .2s cubic-bezier(.4,0,.2,1) !important;
}
#tha-root .tha-checkbox-label input[type=checkbox]:checked + .tha-check-box {
    background: var(--tha-accent, #6366f1) !important;
    border-color: var(--tha-accent, #6366f1) !important;
    box-shadow: 0 0 0 3px rgba(99,102,241,.15), 0 2px 6px rgba(99,102,241,.2) !important;
}
#tha-root .tha-checkbox-label input[type=checkbox]:checked + .tha-check-box svg {
    opacity: 1 !important;
    transform: scale(1) !important;
}
#tha-root .tha-checkbox-label:hover .tha-check-box {
    border-color: var(--tha-accent, #6366f1) !important;
    background: rgba(99,102,241,.06) !important;
}
#tha-root .tha-checkbox-label input[type=checkbox]:checked + .tha-check-box:hover {
    background: var(--tha-accent-hover, #4f46e5) !important;
}
#tha-root .tha-checkbox-label a {
    color: var(--tha-accent, #6366f1) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}
#tha-root .tha-checkbox-label a:hover {
    text-decoration: underline !important;
}
#tha-root .tha-remember-me {
    margin: -4px 0 4px !important;
}

/* ═══ Phone Prefix Selector ═══ */
#tha-root .tha-phone-wrap {
    position: relative !important;
}
#tha-root .tha-phone-prefix {
    position: absolute !important;
    left: 1px !important;
    top: 1px !important;
    bottom: 1px !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 0 12px !important;
    background: var(--tha-input-bg) !important;
    border: none !important;
    border-right: 1px solid var(--tha-input-border) !important;
    border-radius: var(--tha-input-radius, 14px) 0 0 var(--tha-input-radius, 14px) !important;
    cursor: pointer !important;
    font-size: 14px !important;
    color: var(--tha-text) !important;
    transition: background .15s !important;
    z-index: 2 !important;
}
#tha-root .tha-phone-prefix:hover {
    background: var(--tha-nav-hover-bg) !important;
}
#tha-root .tha-prefix-flag {
    font-size: 18px !important;
    line-height: 1 !important;
}
#tha-root .tha-prefix-code {
    font-weight: 600 !important;
    font-size: 13px !important;
    min-width: 28px !important;
}
#tha-root .tha-phone-prefix svg {
    opacity: .5 !important;
}
#tha-root .tha-has-prefix {
    padding-left: 100px !important;
}
#tha-root .tha-phone-dropdown {
    position: absolute !important;
    top: calc(100% + 6px) !important;
    left: 0 !important;
    right: 0 !important;
    background: var(--tha-form-bg) !important;
    border: 1px solid var(--tha-input-border) !important;
    border-radius: 14px !important;
    box-shadow: 0 12px 40px rgba(0,0,0,.25) !important;
    z-index: 100 !important;
    max-height: 280px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    backdrop-filter: blur(20px) !important;
}
#tha-root .tha-phone-dropdown.tha-hidden {
    display: none !important;
}
#tha-root .tha-phone-search {
    width: 100% !important;
    padding: 12px 14px !important;
    border: none !important;
    border-bottom: 1px solid var(--tha-input-border) !important;
    background: transparent !important;
    color: var(--tha-text) !important;
    font-size: 13px !important;
    outline: none !important;
}
#tha-root .tha-phone-search::placeholder {
    color: var(--tha-text-muted) !important;
}
#tha-root .tha-phone-list {
    overflow-y: auto !important;
    max-height: 230px !important;
    scrollbar-width: thin !important;
}
#tha-root .tha-phone-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 14px !important;
    cursor: pointer !important;
    font-size: 13px !important;
    color: var(--tha-text) !important;
    transition: background .12s !important;
}
#tha-root .tha-phone-item:hover,
#tha-root .tha-phone-item.tha-selected {
    background: rgba(99,102,241,.15) !important;
}
#tha-root .tha-phone-item-flag {
    font-size: 18px !important;
}
#tha-root .tha-phone-item-name {
    flex: 1 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
#tha-root .tha-phone-item-code {
    font-weight: 600 !important;
    opacity: .7 !important;
    font-size: 12px !important;
}
/* ═══ Phone Dropdown — Popup Root (duplicate selectors) ═══ */
#tha-popup-root .tha-phone-dropdown { position:absolute!important;top:calc(100% + 6px)!important;left:0!important;right:0!important;background:var(--tha-form-bg)!important;border:1px solid var(--tha-input-border)!important;border-radius:14px!important;box-shadow:0 12px 40px rgba(0,0,0,.25)!important;z-index:9999!important;max-height:280px!important;overflow:hidden!important;display:flex!important;flex-direction:column!important;backdrop-filter:blur(20px)!important }
#tha-popup-root .tha-phone-dropdown.tha-hidden { display:none!important }
#tha-popup-root .tha-phone-search { width:100%!important;padding:12px 14px!important;border:none!important;border-bottom:1px solid var(--tha-input-border)!important;background:transparent!important;color:var(--tha-text)!important;font-size:13px!important;outline:none!important }
#tha-popup-root .tha-phone-search::placeholder { color:var(--tha-text-muted)!important }
#tha-popup-root .tha-phone-list { overflow-y:auto!important;max-height:230px!important;scrollbar-width:thin!important }
#tha-popup-root .tha-phone-item { display:flex!important;align-items:center!important;gap:10px!important;padding:10px 14px!important;cursor:pointer!important;font-size:13px!important;color:var(--tha-text)!important;transition:background .12s!important }
#tha-popup-root .tha-phone-item:hover,
#tha-popup-root .tha-phone-item.tha-selected { background:rgba(99,102,241,.15)!important }
#tha-popup-root .tha-phone-item-flag { font-size:18px!important }
#tha-popup-root .tha-phone-item-name { flex:1!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important }
#tha-popup-root .tha-phone-item-code { font-weight:600!important;opacity:.7!important;font-size:12px!important }
#tha-popup-root .tha-phone-wrap { position:relative!important }
#tha-popup-root .tha-phone-prefix { display:flex!important;align-items:center!important;gap:4px!important;padding:0 12px!important;border-right:1px solid var(--tha-input-border)!important;cursor:pointer!important;background:transparent!important;border-top:none!important;border-bottom:none!important;border-left:none!important;color:var(--tha-text)!important;font-size:13px!important;font-weight:500!important }

/* ═══ Submit Button ═══ */
#tha-root .tha-btn-submit {
    width: 100% !important;
    padding: 15px 24px !important;
    background: var(--tha-btn-gradient, linear-gradient(135deg, var(--tha-accent, #6366f1), var(--tha-accent-hover, #4f46e5))) !important;
    color: var(--tha-btn-text, #fff) !important;
    border: none !important;
    border-radius: var(--tha-btn-radius, 14px) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    font-family: var(--tha-font-btn, inherit) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    transition: all .2s !important;
    letter-spacing: .01em !important;
    box-shadow: var(--tha-shadow-btn) !important;
    margin-top: 4px !important;
    position: relative !important;
    overflow: hidden !important;
    line-height: 1.4 !important;
    text-align: center !important;
}
#tha-root .tha-btn-submit:hover {
    box-shadow: var(--tha-shadow-btn-hover) !important;
    transform: translateY(-1px) !important;
}
#tha-root .tha-btn-submit:active {
    transform: translateY(0) !important;
}
#tha-root .tha-btn-submit:disabled {
    background: #94a3b8 !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
    transform: none !important;
}
#tha-root .tha-btn-submit svg {
    width: 16px !important;
    height: 16px !important;
}
#tha-root .tha-btn-loader {
    display: none !important;
    width: 17px !important;
    height: 17px !important;
    border: 2px solid rgba(255,255,255,.3) !important;
    border-top-color: #fff !important;
    border-radius: 50% !important;
    animation: thaSpin .8s linear infinite !important;
}
#tha-root .tha-btn-submit.tha-loading .tha-btn-text {
    opacity: 0 !important;
    position: absolute !important;
}
#tha-root .tha-btn-submit.tha-loading .tha-btn-icon {
    display: none !important;
}

/* ═══ OTP ═══ */
#tha-root .tha-otp-step {
    animation: thaSlideUp .3s ease !important;
}
#tha-root .tha-otp-step.tha-active-step {
    display: block !important;
}
#tha-root .tha-otp-inputs {
    display: flex !important;
    gap: 9px !important;
    justify-content: center !important;
    margin: 20px 0 !important;
}
#tha-root .tha-otp-digit {
    width: 50px !important;
    height: 60px !important;
    text-align: center !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    border: 2px solid var(--tha-input-border, #e2e8f0) !important;
    border-radius: 16px !important;
    background: var(--tha-input-bg, #f8fafc) !important;
    color: var(--tha-input-text, #0f172a) !important;
    outline: none !important;
    font-family: inherit !important;
    transition: all .2s !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    line-height: 1 !important;
    caret-color: var(--tha-accent, #6366f1) !important;
}
#tha-root .tha-otp-digit:focus {
    border-color: var(--tha-accent, #6366f1) !important;
    box-shadow: 0 0 0 4px rgba(99,102,241,.12) !important;
}
#tha-root .tha-otp-digit.tha-filled {
    border-color: var(--tha-accent, #6366f1) !important;
    background: var(--tha-input-bg, rgba(99,102,241,.03)) !important;
    color: var(--tha-input-text, #0f172a) !important;
}
#tha-root .tha-otp-actions {
    text-align: center !important;
    margin-top: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
}
#tha-root .tha-otp-actions span {
    font-size: 13px !important;
    color: var(--tha-text-muted, #94a3b8) !important;
}
#tha-root .tha-resend-otp {
    background: none !important;
    border: none !important;
    color: var(--tha-accent, #6366f1) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    font-family: inherit !important;
    padding: 0 !important;
}
#tha-root .tha-resend-otp:disabled {
    color: #94a3b8 !important;
    cursor: not-allowed !important;
}

/* ═══ Toast (outside #tha-root — uses fixed positioning) ═══ */
.tha-toast {
    position: fixed !important;
    top: 28px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 10100 !important;
    background: var(--tha-toast-bg, #fff) !important;
    border-radius: var(--tha-toast-radius, 20px) !important;
    padding: 16px 20px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    box-shadow: var(--tha-toast-shadow, 0 8px 32px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.06)) !important;
    animation: thaSlideDown .4s cubic-bezier(.34,1.56,.64,1) !important;
    max-width: 92% !important;
    width: 420px !important;
    font-family: var(--tha-font-family, Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif) !important;
    box-sizing: border-box !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    margin: 0 !important;
    border: none !important;
    float: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    text-align: left !important;
    line-height: normal !important;
}
.tha-toast-error {
    background: var(--tha-toast-error-bg, #fef2f2) !important;
    border: 1.5px solid var(--tha-toast-error-border, rgba(239,68,68,.15)) !important;
}
.tha-toast-success {
    background: var(--tha-toast-success-bg, #f0fdf4) !important;
    border: 1.5px solid var(--tha-toast-success-border, rgba(16,185,129,.15)) !important;
}
.tha-toast-icon {
    flex-shrink: 0 !important;
    display: flex !important;
    width: 22px !important;
    height: 22px !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.tha-toast-icon svg {
    width: 22px !important;
    height: 22px !important;
}
.tha-toast-error .tha-toast-icon { color: var(--tha-toast-error-icon, #ef4444) !important; }
.tha-toast-success .tha-toast-icon { color: var(--tha-toast-success-icon, #10b981) !important; }
.tha-toast-msg {
    font-size: 13.5px !important;
    font-weight: 500 !important;
    flex: 1 !important;
    line-height: 1.45 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    text-transform: none !important;
}
.tha-toast-error .tha-toast-msg { color: var(--tha-toast-error-text, #991b1b) !important; }
.tha-toast-success .tha-toast-msg { color: var(--tha-toast-success-text, #065f46) !important; }
.tha-toast-close {
    background: var(--tha-toast-close-bg, rgba(0,0,0,.06)) !important;
    border: none !important;
    cursor: pointer !important;
    color: var(--tha-toast-close-color, #94a3b8) !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    max-width: 28px !important;
    max-height: 28px !important;
    flex-shrink: 0 !important;
    transition: all .2s !important;
    outline: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-size: 0 !important;
    line-height: 1 !important;
    float: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}
.tha-toast-close:hover {
    background: rgba(0,0,0,.12) !important;
    color: var(--tha-text-light, #475569) !important;
}
.tha-toast-close:focus { outline: none !important; box-shadow: none !important; }
.tha-toast-close svg {
    width: 14px !important;
    height: 14px !important;
    display: block !important;
}

/* ═══ Toast Dark Mode ═══ */
.tha-toast-dark.tha-toast-error {
    background: var(--tha-toast-error-bg, rgba(153,27,27,.92)) !important;
    border-color: var(--tha-toast-error-border, rgba(252,165,165,.2)) !important;
}
.tha-toast-dark.tha-toast-error .tha-toast-msg { color: var(--tha-toast-error-text, #fee2e2) !important; }
.tha-toast-dark.tha-toast-error .tha-toast-icon { color: var(--tha-toast-error-icon, #fca5a5) !important; }
.tha-toast-dark.tha-toast-success {
    background: var(--tha-toast-success-bg, rgba(6,78,59,.92)) !important;
    border-color: var(--tha-toast-success-border, rgba(110,231,183,.2)) !important;
}
.tha-toast-dark.tha-toast-success .tha-toast-msg { color: var(--tha-toast-success-text, #d1fae5) !important; }
.tha-toast-dark.tha-toast-success .tha-toast-icon { color: var(--tha-toast-success-icon, #6ee7b7) !important; }
.tha-toast-dark .tha-toast-close {
    background: var(--tha-toast-close-bg, rgba(255,255,255,.1)) !important;
    color: var(--tha-toast-close-color, rgba(255,255,255,.5)) !important;
}
.tha-toast-dark .tha-toast-close:hover {
    background: rgba(255,255,255,.2) !important;
    color: #fff !important;
}

/* ═══ Process Popup (outside #tha-root — fixed overlay) ═══ */
.tha-process-overlay {
    position: fixed;
    inset: 0;
    z-index: 10200;
    background: var(--tha-process-overlay-bg, var(--tha-popup-overlay, rgba(0,3,63,.6)));
    backdrop-filter: blur(var(--tha-process-overlay-blur, 24px)) saturate(1.2);
    -webkit-backdrop-filter: blur(var(--tha-process-overlay-blur, 24px)) saturate(1.2);
    display: none;
    align-items: center;
    justify-content: center;
    animation: thaFadeIn .3s ease;
    font-family: var(--tha-font-family, Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
}
.tha-process-overlay.tha-visible { display: flex; }
.tha-process-box {
    background: var(--tha-process-box-bg, var(--tha-form-bg, rgba(255,255,255,0.95)));
    backdrop-filter: blur(40px);
    border: 1px solid var(--tha-process-box-border, var(--tha-input-border, rgba(0,0,0,0.04)));
    border-radius: var(--tha-form-radius, 24px);
    padding: 44px 40px;
    max-width: 400px;
    width: 90%;
    text-align: center;
    box-shadow: var(--tha-form-shadow, 0 32px 64px rgba(0,0,0,.12));
    animation: thaScaleIn .4s cubic-bezier(.34,1.56,.64,1);
}

/* Soft UI Spinner */
.tha-process-spinner {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    position: relative;
    margin: 0 auto 20px;
}
.tha-process-spinner::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid color-mix(in srgb, var(--tha-process-spinner, var(--tha-accent, #6366f1)) 12%, transparent);
}
.tha-process-spinner::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: var(--tha-process-spinner, var(--tha-accent, #6366f1));
    border-right-color: var(--tha-process-spinner, var(--tha-accent, #6366f1));
    animation: thaSpin .7s cubic-bezier(.4,.15,.6,.85) infinite;
}

/* Pulse ring behind spinner */
.tha-process-spinner-pulse {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    position: relative;
    margin: 0 auto 20px;
}
.tha-process-spinner-pulse::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: var(--tha-process-spinner, var(--tha-accent, #6366f1));
    opacity: 0.08;
    animation: thaPulseRing 1.5s ease-in-out infinite;
}
.tha-process-spinner-pulse .tha-process-spinner {
    width: 100%;
    height: 100%;
    margin: 0;
}
@keyframes thaPulseRing {
    0%, 100% { transform: scale(0.95); opacity: 0.08; }
    50% { transform: scale(1.15); opacity: 0.02; }
}

/* Success icon */
.tha-process-success-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--tha-process-success, #10b981) 10%, transparent), color-mix(in srgb, var(--tha-process-success, #10b981) 5%, transparent));
    border: 1px solid color-mix(in srgb, var(--tha-process-success, #10b981) 15%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    animation: thaScaleIn .4s cubic-bezier(.34,1.56,.64,1);
}
.tha-process-success-icon svg { width: 28px; height: 28px; color: var(--tha-process-success, #10b981); stroke-width: 2.5; }
.tha-process-title { font-size: 17px; font-weight: var(--tha-font-heading-weight, 700); font-family: var(--tha-font-heading, inherit); color: var(--tha-process-title, var(--tha-text, #0f172a)); margin: 0; letter-spacing: -0.01em; }
.tha-process-subtitle { font-size: 13px; color: var(--tha-process-subtitle, var(--tha-text-muted, #94a3b8)); margin: 8px 0 0; }

/* Button inline spinner */
@keyframes thaBtnSpin {
    to { transform: rotate(360deg); }
}
#tha-root .tha-btn-submit.tha-loading {
    pointer-events: none !important;
    opacity: 0.85 !important;
}
#tha-root .tha-btn-submit.tha-loading .tha-btn-loader {
    display: inline-block !important;
    width: 18px !important;
    height: 18px !important;
    border: 2.5px solid rgba(255,255,255,.3) !important;
    border-top-color: #fff !important;
    border-radius: 50% !important;
    animation: thaBtnSpin .6s linear infinite !important;
}

/* ═══ Theme Toggle ═══ */
#tha-root .tha-theme-toggle {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    border: 1px solid var(--tha-input-border) !important;
    background: var(--tha-social-bg) !important;
    color: var(--tha-text-muted) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    transition: all .25s cubic-bezier(.16,1,.3,1) !important;
    z-index: 10 !important;
}
#tha-root .tha-theme-toggle:hover {
    background: var(--tha-social-hover) !important;
    color: var(--tha-text) !important;
    transform: scale(1.08) !important;
}
/* In dark mode: show sun, hide moon */
.tha-theme-dark .tha-theme-toggle .tha-icon-sun { display: block !important; }
.tha-theme-dark .tha-theme-toggle .tha-icon-moon { display: none !important; }
/* In light mode: show moon, hide sun */
.tha-theme-light .tha-theme-toggle .tha-icon-sun { display: none !important; }
.tha-theme-light .tha-theme-toggle .tha-icon-moon { display: block !important; }

/* ═══ Footer / Nav / Credits ═══ */
#tha-root .tha-auth-footer {
    text-align: center !important;
    font-size: 13px !important;
    color: var(--tha-text-light, #64748b) !important;
    margin-top: 28px !important;
}
#tha-root .tha-auth-footer a {
    color: var(--tha-accent, #6366f1) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}
#tha-root .tha-form-nav {
    display: flex !important;
    gap: 4px !important;
    border-radius: 14px !important;
    padding: 4px !important;
    margin: 32px auto 0 !important;
    backdrop-filter: blur(8px) !important;
    background: var(--tha-nav-bg) !important;
    width: fit-content !important;
    align-self: center !important;
}
#tha-root .tha-form-nav a {
    padding: 9px 20px !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    transition: all .25s cubic-bezier(.16,1,.3,1) !important;
    color: var(--tha-nav-text) !important;
    background: transparent !important;
}
#tha-root .tha-form-nav a:hover:not(.tha-nav-active) {
    color: var(--tha-nav-text-hover) !important;
    background: var(--tha-nav-hover-bg) !important;
}
#tha-root .tha-form-nav a.tha-nav-active {
    background: var(--tha-nav-active-bg) !important;
    color: var(--tha-nav-active-text) !important;
    box-shadow: var(--tha-shadow-sm) !important;
}
#tha-root .tha-credits {
    margin-top: 18px !important;
    font-size: 11px !important;
    text-align: center !important;
}
#tha-root .tha-credits { color: var(--tha-credits, rgba(255,255,255,.25)) !important; }
#tha-root .tha-phone-hint {
    font-size: 12px !important;
    color: #94a3b8 !important;
    margin-top: -6px !important;
    line-height: 1.4 !important;
}
#tha-root .tha-hidden { display: none !important; }
#tha-root .tha-step { display: none !important; }
#tha-root .tha-step.tha-active-step:not(.tha-hidden) {
    display: block !important;
    animation: thaSlideUp .3s ease !important;
}
#tha-root .tha-auth-notice {
    text-align: center !important;
    padding: 40px !important;
    font-size: 15px !important;
    color: #64748b !important;
}
#tha-root .tha-auth-notice a {
    color: var(--tha-accent, #6366f1) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}
#tha-root .tha-form-only .tha-auth-logo,
#tha-root .tha-form-only .tha-form-nav,
#tha-root .tha-form-only .tha-credits { display: none !important; }
#tha-root .tha-form-only {
    min-height: auto !important;
    padding: 0 !important;
    background: none !important;
}
#tha-root .tha-form-only .tha-auth-card {
    box-shadow: none !important;
}

/* ═══ Field Validation Error ═══ */
#tha-root .tha-field-error .tha-input-wrap {
    border-color: var(--tha-error, #ef4444) !important;
    box-shadow: 0 0 0 3px rgba(239,68,68,.1) !important;
}
#tha-root .tha-field-error .tha-field-label {
    color: var(--tha-error, #ef4444) !important;
}
#tha-root .tha-consent-item.tha-field-error {
    background: rgba(239,68,68,.04) !important;
    border-radius: 10px !important;
    padding: 6px 8px !important;
    margin: -6px -8px !important;
}

/* ═══ Register Step Spacing ═══ */
#tha-root .tha-reg-step {
    display: none !important;
    flex-direction: column !important;
    gap: 18px !important;
}
#tha-root .tha-reg-step.tha-step-visible {
    display: flex !important;
    animation: thaStepIn .35s cubic-bezier(.16,1,.3,1) !important;
}
@keyframes thaStepIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ═══ Multi-step Stepper — Stripe/Binance Style ═══ */
#tha-root .tha-step-progress {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    margin-bottom: 24px !important;
    padding: 0 !important;
    position: relative !important;
}
#tha-root .tha-step-dot {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    position: relative !important;
    z-index: 2 !important;
    flex-shrink: 0 !important;
}
/* Circle — tiny elegant dot */
#tha-root .tha-step-num {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    border: 2px solid var(--tha-input-border, rgba(255,255,255,.12)) !important;
    background: var(--tha-form-bg, transparent) !important;
    color: var(--tha-text-muted, #64748b) !important;
    transition: all .5s cubic-bezier(.34,1.56,.64,1) !important;
    position: relative !important;
    z-index: 2 !important;
}
/* Active — gradient fill + glow */
#tha-root .tha-step-dot.tha-step-active .tha-step-num {
    border-color: transparent !important;
    background: var(--tha-btn-gradient, linear-gradient(135deg, var(--tha-primary, #125ef9), var(--tha-accent, #6366f1))) !important;
    color: #fff !important;
    box-shadow: 0 0 0 3px var(--tha-form-bg, #0f172a), 0 0 0 5px var(--tha-accent, #6366f1), 0 4px 16px rgba(99,102,241,.25) !important;
    transform: scale(1.05) !important;
}
/* Done — success check */
#tha-root .tha-step-dot.tha-step-done .tha-step-num {
    border-color: var(--tha-success, #10b981) !important;
    background: var(--tha-success, #10b981) !important;
    color: transparent !important;
    box-shadow: 0 2px 8px rgba(16,185,129,.2) !important;
    transform: scale(1) !important;
}
#tha-root .tha-step-dot.tha-step-done .tha-step-num::after {
    content: '' !important;
    display: block !important;
    width: 8px !important;
    height: 5px !important;
    border-left: 2px solid #fff !important;
    border-bottom: 2px solid #fff !important;
    transform: rotate(-45deg) translateY(-1px) !important;
}
/* Labels — subtle */
#tha-root .tha-step-label {
    font-size: 10px !important;
    font-weight: 500 !important;
    color: var(--tha-text-muted, #64748b) !important;
    text-align: center !important;
    max-width: 72px !important;
    line-height: 1.2 !important;
    transition: color .3s ease !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
#tha-root .tha-step-dot.tha-step-active .tha-step-label {
    color: var(--tha-text, #e2e8f0) !important;
    font-weight: 600 !important;
}
#tha-root .tha-step-dot.tha-step-done .tha-step-label {
    color: var(--tha-success, #10b981) !important;
}
/* Connecting track — gradient fill animation */
#tha-root .tha-step-line {
    flex: 1 !important;
    height: 3px !important;
    background: var(--tha-input-border, rgba(255,255,255,.08)) !important;
    margin: 0 -1px !important;
    margin-bottom: 20px !important;
    border-radius: 3px !important;
    position: relative !important;
    overflow: hidden !important;
    min-width: 16px !important;
    z-index: 1 !important;
}
#tha-root .tha-step-line::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: 3px !important;
    background: var(--tha-success, #10b981) !important;
    transform: scaleX(0) !important;
    transform-origin: left !important;
    transition: transform .5s cubic-bezier(.16,1,.3,1) !important;
}
#tha-root .tha-step-line.tha-line-done::after {
    transform: scaleX(1) !important;
}
#tha-root .tha-step-line.tha-line-active::after {
    transform: scaleX(.5) !important;
    background: var(--tha-btn-gradient, linear-gradient(90deg, var(--tha-primary, #125ef9), var(--tha-accent, #6366f1))) !important;
}
/* Hide labels mode */
#tha-root .tha-step-progress[data-show="numbers"] .tha-step-label { display: none !important; }
#tha-root .tha-step-progress[data-show="numbers"] .tha-step-line { margin-bottom: 0 !important; }
/* Hide numbers mode */
#tha-root .tha-step-progress[data-show="labels"] .tha-step-num { width: 10px !important; height: 10px !important; font-size: 0 !important; border-width: 0 !important; }
#tha-root .tha-step-progress[data-show="labels"] .tha-step-dot.tha-step-active .tha-step-num { box-shadow: 0 0 0 2px var(--tha-form-bg, #0f172a), 0 0 0 4px var(--tha-accent, #6366f1) !important; }
/* Bar only mode */
#tha-root .tha-step-progress[data-show="bar"] .tha-step-dot { display: none !important; }
#tha-root .tha-step-progress[data-show="bar"] { margin-bottom: 20px !important; }
#tha-root .tha-step-progress[data-show="bar"] .tha-step-line { height: 5px !important; margin-bottom: 0 !important; border-radius: 5px !important; }

/* ═══ Step Navigation Buttons ═══ */
#tha-root .tha-step-nav {
    display: flex !important;
    flex-direction: column-reverse !important;
    gap: 10px !important;
    margin-top: 8px !important;
}
#tha-root .tha-btn-step-back,
#tha-root .tha-btn-secondary-form {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 10px 20px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    font-family: var(--tha-font-btn, var(--tha-font-family)) !important;
    letter-spacing: 0 !important;
    word-spacing: 0 !important;
    text-transform: none !important;
    border: none !important;
    background: transparent !important;
    color: var(--tha-text-muted, #64748b) !important;
    cursor: pointer !important;
    transition: all .25s ease !important;
    text-align: center !important;
    white-space: nowrap !important;
    width: fit-content !important;
    margin: 0 auto !important;
    flex: none !important;
}
#tha-root .tha-btn-step-back:hover,
#tha-root .tha-btn-secondary-form:hover {
    color: var(--tha-text, #e2e8f0) !important;
    background: var(--tha-input-bg, rgba(255,255,255,.05)) !important;
}
#tha-root .tha-step-nav .tha-btn-submit {
    flex: none !important;
    width: 100% !important;
}

/* ═══ Responsive ═══ */
@media (max-width: 640px) {
    #tha-root .tha-auth-wrapper { padding: 24px 16px !important; }
    #tha-root .tha-auth-card { padding: 32px 24px !important; border-radius: 20px !important; }
    #tha-root .tha-field-row { flex-direction: column !important; gap: 18px !important; }
    #tha-root .tha-otp-digit { width: 44px !important; height: 52px !important; font-size: 20px !important; border-radius: 12px !important; }
    #tha-root .tha-otp-inputs { gap: 7px !important; }
    #tha-root .tha-social-row { flex-direction: column !important; }
    #tha-root .tha-auth-title { font-size: 22px !important; }
    #tha-root .tha-step-label { display: none !important; }
    #tha-root .tha-step-line { margin-bottom: 0 !important; }
    #tha-root .tha-step-num { width: 30px !important; height: 30px !important; font-size: 11px !important; }
    #tha-root .tha-step-nav { flex-direction: column-reverse !important; }
    .tha-toast { width: calc(100% - 32px); }
}
@media (max-width: 400px) {
    #tha-root .tha-auth-card { padding: 28px 20px !important; border-radius: 18px !important; }
    #tha-root .tha-otp-digit { width: 40px !important; height: 48px !important; font-size: 18px !important; border-radius: 10px !important; }
    #tha-root .tha-otp-inputs { gap: 5px !important; }
    #tha-root .tha-btn-submit { padding: 14px 20px !important; font-size: 14px !important; }
}
@supports (padding: max(0px)) {
    #tha-root .tha-auth-wrapper {
        padding-top: max(40px, env(safe-area-inset-top)) !important;
        padding-bottom: max(40px, env(safe-area-inset-bottom)) !important;
        padding-left: max(20px, env(safe-area-inset-left)) !important;
        padding-right: max(20px, env(safe-area-inset-right)) !important;
    }
}
#tha-popup-root .tha-phone-wrap { position:relative!important; z-index:10!important }