feat(ui): validate API form and improve error UX

web/static/css/style.css

@@ -108,10 +108,92 @@ main {
     border: 1px solid #e0e0e0;
     border-radius: 8px;
     padding: 2rem;
-    text-align: center;
     color: #555;
 }
 
+#api-connect-form h3 {
+    margin-bottom: 1rem;
+    color: #2c3e50;
+}
+
+.api-form-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+    gap: 0.75rem 1rem;
+}
+
+.api-form-field {
+    display: flex;
+    flex-direction: column;
+    gap: 0.35rem;
+    font-size: 0.875rem;
+    color: #2c3e50;
+}
+
+.api-form-field input,
+.api-form-field select {
+    border: 1px solid #d0d7de;
+    border-radius: 4px;
+    padding: 0.5rem 0.6rem;
+    font-size: 0.9rem;
+}
+
+.api-form-field.has-error input,
+.api-form-field.has-error select {
+    border-color: #dc3545;
+}
+
+.field-error {
+    min-height: 1rem;
+    color: #dc3545;
+    font-size: 0.75rem;
+}
+
+.form-errors {
+    margin-bottom: 1rem;
+    border: 1px solid #f0b9bf;
+    background: #fff4f5;
+    color: #8e1f2b;
+    border-radius: 6px;
+    padding: 0.75rem 0.9rem;
+    font-size: 0.85rem;
+}
+
+.form-errors ul {
+    margin: 0.4rem 0 0;
+    padding-left: 1.1rem;
+}
+
+.api-form-actions {
+    margin-top: 0.9rem;
+}
+
+#api-connect-btn {
+    background: #3498db;
+    color: white;
+    border: none;
+    padding: 0.6rem 1.2rem;
+    border-radius: 4px;
+    cursor: pointer;
+}
+
+#api-connect-btn:hover {
+    background: #2980b9;
+}
+
+.api-connect-status {
+    margin-top: 0.75rem;
+    font-size: 0.85rem;
+}
+
+.api-connect-status.success {
+    color: #1f8f4c;
+}
+
+.api-connect-status.error {
+    color: #dc3545;
+}
+
 #upload-status {
     margin-top: 1rem;
     text-align: center;