Refactor controls UI, styles; bump deps

Consolidate and refactor component styling and markup: remove component-specific SCSS for Conway's Game of Life and Pathfinding and drop their styleUrls, rename per-component .controls blocks to .controls-panel in pathfinding and sorting templates, and move the outer container class onto the mat-card. Add global styles in src/styles.scss for .controls-panel, grid/form sizing, container max-width, and sorting visualization (bar states and transitions). Also update package-lock.json with minor/patch dependency bumps for Angular CLI/devkit/schematics/@schematics/angular, @modelcontextprotocol/sdk and several transitive packages.

src/styles.scss

@@ -110,6 +110,12 @@ a {
   transition:
     box-shadow 200ms ease,
     transform 200ms ease;
+
+  &.container {
+    width: 100%;
+    max-width: 1200px;
+    padding: 20px;
+  }
 }
 
 .mat-mdc-card::before {
@@ -239,10 +245,21 @@ a {
 
 .controls-panel {
   display: flex;
-  gap: 10px;
-  margin-bottom: 20px;
+  gap: 1rem;
+  margin-bottom: 1rem;
   align-items: center;
   flex-wrap: wrap;
+  margin-top: 10px;
+  font-size: 0.9em;
+
+  mat-button-toggle-group {
+    border-radius: 4px;
+    overflow: hidden;
+  }
+
+  mat-form-field {
+    width: 200px;
+  }
 }
 
 .grid-size {
@@ -250,6 +267,10 @@ a {
   gap: 0.75rem;
   align-items: center;
   flex-wrap: wrap;
+
+  .grid-field {
+    width: 150px;
+  }
 }
 
 canvas {
@@ -288,3 +309,34 @@ canvas {
   flex-direction: column;
   margin-bottom: 1rem;
 }
+
+/* Sorting Visualization */
+.sorting-visualization-area {
+  display: flex;
+  align-items: flex-end;
+  height: 300px; /* Max height for bars */
+  border-bottom: 1px solid #ccc;
+  margin-bottom: 20px;
+  gap: 1px;
+  background-color: #f0f0f0;
+
+  .sorting-bar {
+    flex-grow: 1;
+    background-color: #424242; /* Default unsorted color */
+    transition: height 0.05s ease-in-out, background-color 0.05s ease-in-out;
+    width: 10px; /* Default width, flex-grow will adjust */
+    min-width: 1px; /* Ensure bars are always visible */
+
+    &.unsorted {
+      background-color: #424242;
+    }
+
+    &.comparing {
+      background-color: #ffeb3b; /* Yellow for comparing */
+    }
+
+    &.sorted {
+      background-color: #4caf50; /* Green for sorted */
+    }
+  }
+}