fix: Login system - CSS specificity fix and debug logging

static/css/styles.css

@@ -375,6 +375,10 @@ textarea {
     z-index: 10000;
 }
 
+.login-overlay.hidden {
+    display: none !important;
+}
+
 .login-box {
     background: var(--bg-card);
     border-radius: 20px;

static/js/main.js

@@ -28,15 +28,21 @@ function showLogin() {
 
 function handleLogin(e) {
     e.preventDefault();
-    const username = document.getElementById('loginUsername').value;
+    const username = document.getElementById('loginUsername').value.trim();
     const password = document.getElementById('loginPassword').value;
     const errorEl = document.getElementById('loginError');
 
+    // Debug logging
+    console.log('Login attempt:', { username, passwordLength: password.length });
+    console.log('Expected:', { username: AUTH_CONFIG.username, password: AUTH_CONFIG.password });
+
     if (username === AUTH_CONFIG.username && password === AUTH_CONFIG.password) {
+        console.log('Login SUCCESS!');
         localStorage.setItem(AUTH_CONFIG.storageKey, "true");
         errorEl.classList.add('hidden');
         showApp();
     } else {
+        console.log('Login FAILED - credentials mismatch');
         errorEl.textContent = "❌ Incorrect username or password";
         errorEl.classList.remove('hidden');
     }