Improved mobile login button - replaced emoji with icon & better styling

- **Replaced person emoji**: 👤 → <User> icon for cleaner appearance
- **Matching button styling**: Blue button → Gray button matching logout button
- **Consistent design**: Both login/logout buttons now have same gray theme
- **Professional appearance**: Clean icon instead of emoji for mobile UI

Mobile authentication button now looks polished and theme-consistent!

frontend/src/App.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { Routes, Route, useNavigate, useParams, useLocation } from 'react-router-dom';
-import { Book, ChevronRight, Moon, Sun, LogOut, Search } from 'lucide-react';
+import { Book, ChevronRight, Moon, Sun, LogOut, Search, User } from 'lucide-react';
 import BookSelector from './components/BookSelector';
 import ChapterSelector from './components/ChapterSelector';
 import BibleReader from './components/BibleReader';
@@ -452,10 +452,10 @@ function App() {
                   ) : (
                     <button
                       onClick={handleLogin}
-                      className="text-sm px-3 py-1 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors"
+                      className="text-sm px-3 py-1 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
                     >
                       <span className="hidden sm:inline">Login</span>
-                      <span className="sm:hidden">👤</span>
+                      <User className="sm:hidden h-4 w-4" />
                     </button>
                   )}
                 </div>