fix login error display: use dedicated error div with show/hide

- Rename message-container to login-error for clarity
- Add CSS to hide error by default, show when populated
- Update showMessage() to control visibility
- Update clear on input to hide error div
- Remove completed Task 16 from tasks.md

src/server/web/templates/login.html

@@ -146,6 +146,11 @@
             border: 1px solid var(--color-error);
             font-size: 0.9rem;
             text-align: center;
+            display: block;
+        }
+        
+        #login-error {
+            display: none;
         }
         
         .success-message {
@@ -242,7 +247,7 @@
                     </div>
                 </div>
                 
-                <div id="message-container"></div>
+                <div id="login-error" class="message-container"></div>
                 
                 <button type="submit" class="login-button" id="login-submit-btn">
                     <i class="fas fa-sign-in-alt"></i>
@@ -348,11 +353,13 @@
         });
         
         function showMessage(message, type) {
-            messageContainer.innerHTML = `
+            const errorDiv = document.getElementById('login-error');
+            errorDiv.innerHTML = `
                 <div class="${type}-message">
                     ${message}
                 </div>
             `;
+            errorDiv.style.display = 'block';
         }
         
         function setLoading(loading) {
@@ -371,7 +378,9 @@
         
         // Clear message on input
         passwordInput.addEventListener('input', () => {
-            messageContainer.innerHTML = '';
+            const errorDiv = document.getElementById('login-error');
+            errorDiv.innerHTML = '';
+            errorDiv.style.display = 'none';
         });
         
         // Enter key on password toggle