/* 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;
}

.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-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-confirm-row {
    display: none !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;
}