:root{--login-bg:#f0f2f5;--login-card-bg:#ffffff;--login-text:#1c1e21;--login-secondary-text:#606770;--login-primary-button-bg:#1877f2;--login-primary-button-text:#ffffff;--login-border-color:#dddfe2;--login-error-bg:#fbe3e4;--login-error-text:#a94442;--login-info-bg:#e7f3ff;--login-info-text:#1877f2}.dark{--login-bg:#18191a;--login-card-bg:#242526;--login-text:#e4e6eb;--login-secondary-text:#b0b3b8;--login-primary-button-bg:#2d88ff;--login-border-color:#393a3b;--login-error-bg:#4a2c2c;--login-error-text:#ffb3b1;--login-info-bg:#263951;--login-info-text:#2d88ff}.login-container{display:flex;align-items:center;justify-content:center;min-height:100vh;background-color:var(--login-bg);font-family:Arial,Helvetica,sans-serif}.login-box{background-color:var(--login-card-bg);border-radius:8px;box-shadow:0 2px 4px rgba(0,0,0,.1),0 8px 16px rgba(0,0,0,.1);padding:2rem;width:100%;max-width:400px;text-align:center}.login-header{margin-bottom:1.5rem}.login-header .logo{color:var(--login-primary-button-bg);width:48px;height:48px;margin-bottom:.5rem}.login-header h1{font-size:1.75rem;font-weight:700;color:var(--login-text);margin:0}.login-header p{color:var(--login-secondary-text);font-size:1rem}.form-container{display:flex;flex-direction:column;gap:1rem}.form-container input,.otp-container input,.phone-auth-container input{padding:12px 15px;border-radius:6px;border:1px solid var(--login-border-color);background-color:var(--login-card-bg);color:var(--login-text);font-size:1rem;width:100%;box-sizing:border-box}.form-container input:focus,.otp-container input:focus,.phone-auth-container input:focus{outline:none;border-color:var(--login-primary-button-bg);box-shadow:0 0 0 2px rgba(24,119,242,.2)}.password-container{position:relative;display:flex;align-items:center}.password-container input{padding-right:40px}.password-toggle{position:absolute;right:10px;background:none;border:none;cursor:pointer;color:var(--login-secondary-text)}.password-toggle svg{width:18px;height:18px}.google-button,.phone-button,.submit-button{padding:12px;border-radius:6px;border:none;font-size:1.1rem;font-weight:600;cursor:pointer;transition:background-color .2s}.submit-button{background-color:var(--login-primary-button-bg);color:var(--login-primary-button-text)}.submit-button:hover{background-color:#166fe5}.or-divider{display:flex;align-items:center;text-align:center;color:var(--login-secondary-text);margin:1rem 0;font-size:.8rem}.or-divider hr{flex:1;border:none;border-top:1px solid var(--login-border-color)}.or-divider span{padding:0 10px}.phone-auth-container{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem}.phone-button{background-color:#333;color:white}.phone-button:hover{background-color:#444}.google-button{background-color:#ffffff;color:#333;border:1px solid var(--login-border-color);display:flex;align-items:center;justify-content:center;gap:10px}.google-button:hover{background-color:#f5f5f5}.google-button svg{width:20px;height:20px}.toggle-auth{margin-top:1.5rem;font-size:.9rem;color:var(--login-secondary-text)}.link-button{background:none;border:none;color:var(--login-primary-button-bg);font-weight:600;cursor:pointer;padding:0}.link-button:hover{text-decoration:underline}.error-message{background-color:var(--login-error-bg);color:var(--login-error-text)}.error-message,.info-message{padding:10px;border-radius:6px;margin-bottom:1rem;font-size:.9rem}.info-message{background-color:var(--login-info-bg);color:var(--login-info-text)}.loading-container{display:flex;justify-content:center;align-items:center;height:100vh;background-color:var(--login-bg)}.loader{border:4px solid #f3f3f3;border-top:4px solid var(--login-primary-button-bg);border-radius:50%;width:40px;height:40px;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.otp-container{display:flex;flex-direction:column;gap:1rem}.otp-container p{color:var(--login-secondary-text)}.otp-container input{text-align:center;font-size:1.5rem;letter-spacing:.5em}#recaptcha-container{margin:1rem 0}.creator-link{margin-top:2rem;font-size:.8rem;color:var(--login-secondary-text)}.creator-link a{color:var(--login-primary-button-bg);text-decoration:none;font-weight:600}.creator-link a:hover{text-decoration:underline}