Improve login form layout and accessibility

- Move remember checkboxes inline with inputs for better space utilization
- Implement proper tab order: server → username → password → checkboxes
- Increase form width from 400px to 500px to accommodate horizontal layout
- Make checkbox labels more concise ("Remember" instead of full text)
- Enhance checkbox styling with vertical label placement and larger size
- Reduce form label bottom margin for tighter spacing
- Ensure consistent input widths across all form fields

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

frontend/styles.css

@@ -452,7 +452,7 @@ body {
     border-radius: var(--border-radius-medium);
     box-shadow: 0 4px 6px rgba(0,0,0,0.1);
     width: 100%;
-    max-width: 400px;
+    max-width: 500px;
 }
 
 .login-form h2, .register-form h2 {
@@ -492,24 +492,42 @@ body {
     cursor: not-allowed;
 }
 
-.remember-checkbox {
+.input-with-checkbox {
     display: flex;
     align-items: center;
-    gap: 0.375rem;
-    margin-top: 0.375rem;
+    gap: 1rem;
+}
+
+.input-with-checkbox input[type="text"],
+.input-with-checkbox input[type="password"] {
+    flex: 1;
+    min-width: 0;
+}
+
+.form-group input {
+    width: 100%;
+}
+
+.remember-checkbox {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.1rem;
     opacity: 0.7;
+    white-space: nowrap;
+    min-width: 80px;
 }
 
 .remember-checkbox input[type="checkbox"] {
     width: auto;
     margin: 0;
     cursor: pointer;
-    transform: scale(0.85);
+    transform: scale(1.1);
 }
 
 .remember-checkbox label {
     margin: 0;
-    font-size: 0.75rem;
+    font-size: 0.55rem;
     color: #888;
     cursor: pointer;
     user-select: none;
@@ -1826,7 +1844,7 @@ body {
 
 .form-group label {
     display: block;
-    margin-bottom: 0.75rem;
+    margin-bottom: 0.4rem;
     color: #374151;
     font-weight: 600;
     font-size: 0.95rem;