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/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 {