Enhance toggle fields styling and layout

Updated the "Query Insights Source" toggle components for better UI consistency and accessibility. Added new styles for toggle switches and improved layout alignment to ensure a cohesive design throughout the page.

frontend/src/pages/TargetsPage.jsx

@@ -200,7 +200,7 @@ export function TargetsPage() {
                 If you see "rejected SSL upgrade", switch to <code>disable</code>.
               </small>
             </div>
-            <div className="field">
+            <div className="field field-full toggle-field">
               <label>Query Insights Source</label>
               <label className="toggle-check">
                 <input
@@ -208,11 +208,14 @@ export function TargetsPage() {
                   checked={!!form.use_pg_stat_statements}
                   onChange={(e) => setForm({ ...form, use_pg_stat_statements: e.target.checked })}
                 />
-                <span>Use pg_stat_statements for this target</span>
+                <span className="toggle-ui" aria-hidden="true" />
+                <span className="toggle-copy">
+                  <strong>Use pg_stat_statements for this target</strong>
+                  <small>Disable this if the extension is unavailable on the target.</small>
+                </span>
               </label>
-              <small>Disable this if the extension is unavailable on the target.</small>
             </div>
-            <div className="field submit-field">
+            <div className="field submit-field field-full">
               <div className="form-actions">
                 <button type="button" className="secondary-btn" onClick={testConnection} disabled={testState.loading}>
                   {testState.loading ? "Testing..." : "Test connection"}
@@ -263,7 +266,7 @@ export function TargetsPage() {
                 <option value="require">require</option>
               </select>
             </div>
-            <div className="field">
+            <div className="field field-full toggle-field">
               <label>Query Insights Source</label>
               <label className="toggle-check">
                 <input
@@ -271,10 +274,14 @@ export function TargetsPage() {
                   checked={!!editForm.use_pg_stat_statements}
                   onChange={(e) => setEditForm({ ...editForm, use_pg_stat_statements: e.target.checked })}
                 />
-                <span>Use pg_stat_statements for this target</span>
+                <span className="toggle-ui" aria-hidden="true" />
+                <span className="toggle-copy">
+                  <strong>Use pg_stat_statements for this target</strong>
+                  <small>Disable this if the extension is unavailable on the target.</small>
+                </span>
               </label>
             </div>
-            <div className="field submit-field">
+            <div className="field submit-field field-full">
               <div className="form-actions">
                 <button type="button" className="secondary-btn" onClick={cancelEdit}>Cancel</button>
                 <button className="primary-btn" disabled={saveState.loading}>{saveState.loading ? "Saving..." : "Save changes"}</button>

frontend/src/styles.css

@@ -250,18 +250,75 @@ button {
 }
 
 .toggle-check {
-  display: inline-flex;
+  display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 12px;
   font-size: 14px;
   color: #d7e6fb;
   cursor: pointer;
+  border: 1px solid #2e5d95;
+  border-radius: 12px;
+  padding: 10px 12px;
+  background: linear-gradient(180deg, #102a50, #0d2344);
 }
 
 .toggle-check input[type="checkbox"] {
+  position: absolute;
+  opacity: 0;
+  width: 1px;
+  height: 1px;
+  pointer-events: none;
+}
+
+.toggle-ui {
+  position: relative;
+  width: 40px;
+  height: 22px;
+  border-radius: 999px;
+  border: 1px solid #3f6ea9;
+  background: #0c1f3f;
+  transition: background 0.2s ease, border-color 0.2s ease;
+}
+
+.toggle-ui::after {
+  content: "";
+  position: absolute;
+  top: 2px;
+  left: 2px;
   width: 16px;
   height: 16px;
-  accent-color: #27bbf3;
+  border-radius: 999px;
+  background: #b8d2ef;
+  transition: transform 0.2s ease, background 0.2s ease;
+}
+
+.toggle-check input[type="checkbox"]:checked + .toggle-ui {
+  background: linear-gradient(180deg, #1a67a8, #145386);
+  border-color: #53c7f4;
+}
+
+.toggle-check input[type="checkbox"]:checked + .toggle-ui::after {
+  transform: translateX(18px);
+  background: #ecf8ff;
+}
+
+.toggle-copy {
+  display: grid;
+  gap: 2px;
+}
+
+.toggle-copy strong {
+  font-size: 14px;
+  font-weight: 650;
+}
+
+.toggle-copy small {
+  color: #93acd0;
+  font-size: 12px;
+}
+
+.toggle-field {
+  margin-top: 2px;
 }
 
 .tips p {
@@ -670,12 +727,18 @@ button {
 
 .submit-field {
   align-self: end;
+  margin-top: 2px;
 }
 
 .form-actions {
   display: flex;
   justify-content: flex-end;
   gap: 8px;
+  width: 100%;
+}
+
+.field-full {
+  grid-column: 1 / -1;
 }
 
 .secondary-btn {