refactor: improve ui of login page (#6809)

#### What type of PR is this?

/area core
/kind improvement
/milestone 2.20.x

#### What this PR does / why we need it:

优化登录页面的 UI。

<img width="1910" alt="image" src="https://github.com/user-attachments/assets/736b1f72-e7c1-4c19-a0d9-dc935c738931">


#### Does this PR introduce a user-facing change?

```release-note
None
```

application/src/main/resources/static/styles/main.css

@@ -2,7 +2,6 @@
 .gateway-page {
     width: 100%;
     height: 100vh;
-    background-color: #f5f5f5;
     overflow: auto;
 }
 
@@ -44,6 +43,7 @@
     margin: 0 auto;
     max-width: 28em;
     padding: 5% 1em;
+    line-height: 1.5;
     font-family:
         ui-sans-serif,
         system-ui,
@@ -64,6 +64,7 @@
 /* Form */
 .halo-form-wrapper {
     border-radius: var(--rounded-lg);
+    border: 1px solid #dfe6ecb3;
     background: #fff;
     padding: 1.5em;
 }
@@ -79,11 +80,11 @@
 .halo-form .form-item {
     display: flex;
     flex-direction: column;
-    margin-bottom: 1.3em;
+    margin-bottom: 1.5em;
     width: 100%;
 }
 
-.halo-form .form-item:last-child {
+.halo-form .form-item:last-of-type {
     margin-bottom: 0;
 }
 
@@ -91,7 +92,7 @@
     gap: var(--spacing-lg);
     display: flex;
     align-items: flex-start;
-    margin-bottom: 1.3em;
+    margin-bottom: 1.5em;
 }
 
 .halo-form .form-item-group .form-item {
@@ -160,13 +161,13 @@
 
 .halo-form .form-item label {
     color: var(--color-text);
-    margin-bottom: 0.625em;
+    margin-bottom: 0.75rem;
     font-size: var(--text-base);
     font-weight: 500;
 }
 
 .halo-form .form-item .form-label-group {
-    margin-bottom: 0.625em;
+    margin-bottom: 0.75em;
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -305,7 +306,7 @@
 .pill-items li a {
     gap: var(--spacing-sm);
     font-size: var(--text-sm);
-    padding: 0.7em 1em;
+    padding: 0.6em 0.9em;
     display: flex;
     align-items: center;
     color: #1f2937;