/* Login, logout and auth modal */

.login-btn, .register-btn {
    border: 0;
    border-radius: 13px;
    font-weight: 700;
    padding: 12px 18px;
}

.login-btn {
    background: transparent;
    color: #e5e7eb;
}

.register-btn {
    background: var(--gold);
    color: #111827;
}

.login-btn:hover {
    color: #fff;
}

.register-btn:hover {
    background: #ffb31a;
}

.auth-modal.hidden,
#authModal.hidden {
    display: none !important;
}

.auth-modal:not(.hidden),
#authModal:not(.hidden) {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1000000 !important;
    display: grid !important;
    place-items: center !important;
    padding: 22px !important;
    background: rgba(3, 7, 18, .72) !important;
}

.auth-backdrop {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(3, 7, 18, .78) !important;
    backdrop-filter: blur(8px) !important;
}

.auth-panel {
    position: relative !important;
    z-index: 2 !important;
    width: min(470px, calc(100vw - 30px)) !important;
    max-width: 470px !important;
    max-height: none !important;
    overflow: hidden !important;
    background: #111827 !important;
    color: #ffffff !important;
    border: 1px solid #334155 !important;
    border-radius: 24px !important;
    padding: 34px !important;
    box-shadow: 0 35px 100px rgba(0,0,0,.55) !important;
}

.auth-close {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 999px !important;
    border: 0 !important;
    background: #f5a400 !important;
    color: #111827 !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
}

.auth-logo-mini {
    width: 170px !important;
    height: auto !important;
    margin: 0 auto 22px !important;
    background: transparent !important;
    border-radius: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}

.auth-logo-mini img {
    width: 170px !important;
    max-height: 70px !important;
    object-fit: contain !important;
    display: block !important;
}

.auth-panel h2 {
    margin: 0 !important;
    text-align: center !important;
    font-size: 31px !important;
    letter-spacing: -.03em !important;
    color: #ffffff !important;
}

.auth-panel p#authSub {
    margin: 8px 0 24px !important;
    text-align: center !important;
    color: #a8b3c7 !important;
}

.auth-field {
    display: block !important;
    margin-bottom: 14px !important;
}

.auth-field span {
    display: block !important;
    margin-bottom: 7px !important;
    color: #dbeafe !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}

.auth-field input {
    width: 100% !important;
    height: 52px !important;
    box-sizing: border-box !important;
    border-radius: 14px !important;
    border: 1px solid #334155 !important;
    background: #202b3f !important;
    color: #ffffff !important;
    padding: 0 15px !important;
    outline: none !important;
}

.auth-field input:focus {
    border-color: #f5a400 !important;
    box-shadow: 0 0 0 4px rgba(245, 164, 0, .15) !important;
}

.auth-submit,
.google-auth {
    width: 100% !important;
    height: 54px !important;
    border-radius: 15px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
}

.auth-submit {
    border: 0 !important;
    background: #f5a400 !important;
    color: #111827 !important;
    margin-top: 4px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
}

.auth-submit.is-loading {
    cursor: wait !important;
    opacity: .92 !important;
}

.auth-submit:disabled {
    pointer-events: none !important;
}

.auth-submit-spinner {
    width: 18px !important;
    height: 18px !important;
    border-radius: 999px !important;
    border: 2px solid rgba(17, 24, 39, .28) !important;
    border-top-color: #111827 !important;
    animation: auth-submit-spin .7s linear infinite !important;
    flex: 0 0 auto !important;
}

@keyframes auth-submit-spin {
    to { transform: rotate(360deg); }
}

.auth-switch {
    margin: 18px 0 0 !important;
    text-align: center !important;
    color: #a8b3c7 !important;
}

.auth-switch button {
    border: 0 !important;
    background: transparent !important;
    color: #f5a400 !important;
    font-weight: 800 !important;
    cursor: pointer !important;
}

.auth-forgot {
    display: block !important;
    width: 100% !important;
    margin: 12px 0 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #f5a400 !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    text-align: center !important;
}

.auth-message.hidden {
    display: none !important;
}

.auth-message {
    margin-bottom: 14px !important;
    padding: 12px 14px !important;
    border-radius: 13px !important;
    background: rgba(34, 197, 94, .12) !important;
    color: #86efac !important;
    border: 1px solid rgba(34, 197, 94, .25) !important;
    font-size: 14px !important;
}

.auth-message.error {
    background: rgba(239, 68, 68, .12) !important;
    color: #fecaca !important;
    border-color: rgba(239, 68, 68, .25) !important;
}

.login-btn.logged-in {
    background: #0f172a !important;
    border: 1px solid #334155 !important;
    color: #ffffff !important;
    max-width: 180px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.register-btn.logout-mode,
.mobile-register-btn.logout-mode {
    background: #7f1d1d !important;
    color: #ffffff !important;
    border: 1px solid #991b1b !important;
}

.register-btn.logout-mode:hover,
.mobile-register-btn.logout-mode:hover {
    background: #991b1b !important;
}

.auth-switch,
.google-auth {
    display: none !important;
}

.auth-name-row,
.auth-email-row,
.auth-phone-row,
.auth-age-row,
.auth-confirm-row {
    display: none !important;
}

.auth-modal .auth-switch {
    display: block !important;
}

.auth-modal.register-mode .auth-name-row,
.auth-modal.register-mode .auth-email-row,
.auth-modal.register-mode .auth-phone-row,
.auth-modal.register-mode .auth-age-row,
.auth-modal.register-mode .auth-confirm-row {
    display: block !important;
}

.welcome-onboarding-modal,
.guided-tour-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1000002 !important;
    display: grid !important;
    place-items: center !important;
    padding: 20px !important;
    background: rgba(3, 7, 18, .66) !important;
    backdrop-filter: blur(8px) !important;
}

.welcome-onboarding-backdrop {
    position: absolute !important;
    inset: 0 !important;
}

.welcome-onboarding-panel,
.guided-tour-panel {
    position: relative !important;
    z-index: 2 !important;
    width: min(620px, calc(100vw - 28px)) !important;
    border-radius: 24px !important;
    border: 1px solid rgba(148, 163, 184, .35) !important;
    background: #111827 !important;
    color: #fff !important;
    padding: 30px !important;
    box-shadow: 0 35px 100px rgba(0, 0, 0, .48) !important;
}

.welcome-onboarding-panel h2,
.guided-tour-panel h2 {
    margin: 0 0 14px !important;
    color: #fff !important;
    font-size: 28px !important;
}

.welcome-onboarding-body,
.guided-tour-panel p {
    color: #dbeafe !important;
    line-height: 1.7 !important;
    font-size: 15px !important;
}

.welcome-onboarding-check {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 20px 0 !important;
    color: #e5e7eb !important;
    font-weight: 700 !important;
}

.guided-tour-kicker {
    color: #f5a400 !important;
    text-transform: uppercase !important;
    letter-spacing: .12em !important;
    font-weight: 900 !important;
    font-size: 12px !important;
    margin-bottom: 10px !important;
}

.guided-tour-actions {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    margin-top: 22px !important;
}

.guided-tour-actions button {
    height: 44px !important;
    border-radius: 13px !important;
    border: 1px solid #334155 !important;
    padding: 0 18px !important;
    font-weight: 900 !important;
    cursor: pointer !important;
}

#guidedTourSkip {
    background: #f8fafc !important;
    color: #111827 !important;
}

#guidedTourNext {
    background: #f5a400 !important;
    color: #111827 !important;
    border-color: #f5a400 !important;
}

html[data-theme="light"] .welcome-onboarding-panel,
html[data-theme="light"] .guided-tour-panel {
    background: #ffffff !important;
    color: #0f172a !important;
    border-color: #d7e0eb !important;
}

html[data-theme="light"] .welcome-onboarding-panel h2,
html[data-theme="light"] .guided-tour-panel h2 {
    color: #0f172a !important;
}

html[data-theme="light"] .welcome-onboarding-body,
html[data-theme="light"] .guided-tour-panel p,
html[data-theme="light"] .welcome-onboarding-check {
    color: #475569 !important;
}

.login-btn.logged-in {
    background: transparent !important;
    border: 1px solid transparent !important;
    color: #ffffff !important;
    font-weight: 900 !important;
    max-width: 175px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.register-btn.logout-mode,
.mobile-register-btn.logout-mode {
    background: #7f1d1d !important;
    color: #ffffff !important;
    border: 1px solid #991b1b !important;
}

.register-btn.logout-mode:hover,
.mobile-register-btn.logout-mode:hover {
    background: #991b1b !important;
}

.mobile-login-btn.logged-in {
    background: transparent !important;
    border: 1px solid #475569 !important;
    color: #ffffff !important;
    font-weight: 900 !important;
}