#mrlogin-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: var(--background); display: none; justify-content: center; align-items: center; z-index: 30000; opacity: 0; transition: opacity 0.35s ease; } #mrlogin-overlay.mrlogin-open { opacity: 1; } .mrlogin-box { background: transparent; color: var(--light-text); padding: 8px; max-width: 460px; width: 96%; transform: translateY(24px) scale(0.97); transition: transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1); } #mrlogin-overlay.mrlogin-open .mrlogin-box { transform: translateY(0) scale(1); } .mrlogin-hidden { display: none; } #mrlogin-form { padding: 4px; overflow-x: hidden; } #mrlogin-divform h3 { font-size: 1.05rem; font-weight: 600; color: var(--light-text); margin: 12px 0 18px; opacity: 0.85; line-height: 1.5; text-align: center; } #mrlogin-divform img { max-width: 200px; width: 100%; max-height: 160px; object-fit: cover; border-radius: var(--radius-sm); margin: 8px auto 16px; display: block; opacity: 0.9; } #mrlogin-divform a { color: var(--branding); } .btn-form-login { background: var(--g-branding); color: var(--light-text); font-weight: 600; border: none; padding: 11px; border-radius: var(--radius-sm); cursor: pointer; transition: opacity 0.2s; } .btn-form-login:hover { opacity: 0.88; } .btn-form-login:disabled { opacity: 0.5; cursor: not-allowed; } #mrlogin-register { margin-top: 6px; } .mrlogin-register-note { text-align: center; margin-bottom: 14px; } .mrlogin-register-note p { font-size: 13px; color: var(--light-text); opacity: 0.6; margin: 0; line-height: 1.5; } #mrlogin-goback { color: var(--light-text); opacity: 0.6; font-size: 13px; text-decoration: none; transition: opacity 0.2s; } #mrlogin-goback:hover { opacity: 1; color: var(--branding); } .loginspin { animation: loadSpin 0.7s linear infinite; margin:0px 5px; } #close-button { background: var(--danger); color: var(--light-text); border: none; border-radius: var(--radius-sm); padding: 6px 12px; font-size: 14px; font-weight: 600; cursor: pointer; transition: opacity 0.2s; } #close-button:hover { opacity: 0.85; } #mrlogin-overlay.mrlogin-closing { opacity: 0; transition: opacity 0.3s ease; } #mrlogin-overlay.mrlogin-closing .mrlogin-box { transform: translateY(20px) scale(0.97); transition: transform 0.3s ease; }