Gemini, trying to make this "done".

app/web/static/style.css

@@ -9,11 +9,11 @@
     --nord6: #ECEFF4; /* Brightest text */
     --nord7: #8FBCBB; /* Teal accent */
     --nord8: #88C0D0; /* Cyan accent */
-    --nord9: #81A1C1; /* Blue accent (unavailable) */
+    --nord9: #81A1C1; /* Blue accent */
     --nord10: #5E81AC; /* Darker blue */
-    --nord11: #BF616A; /* Red (critical/high latency) */
-    --nord12: #D08770; /* Orange (warning/medium latency) */
-    --nord13: #A3BE8C; /* Green (healthy/low latency) */
+    --nord11: #BF616A; /* Red (critical/error) */
+    --nord12: #D08770; /* Orange (warning) */
+    --nord13: #A3BE8C; /* Green (info) */
     --nord14: #B48EAD; /* Purple */
     --nord15: #D08770; /* Coral */
 }
@@ -74,7 +74,7 @@ code {
 
 .connection-grid {
     display: grid;
-    grid-template-columns: minmax(15%, 1fr) repeat(4, minmax(15%, 1fr));
+    /* grid-template-columns will be set dynamically by JavaScript */
     gap: 8px;
 }
 
@@ -89,7 +89,7 @@ code {
     text-align: center;
     font-size: clamp(0.8rem, 1.5vw, 0.9rem);
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.1s ease;
+    transition: background-color 0.3s ease, border-color 0.3s ease, transform: 0.1s ease;
     cursor: pointer;
     position: relative;
     overflow: hidden;
@@ -129,43 +129,43 @@ code {
 
 /* Health Status Colors */
 .node-healthy {
-    background-color: rgba(163, 190, 140, 0.2); /* --nord13 */
+    background-color: rgba(163, 190, 140, 0.2);
     border-color: var(--nord13);
 }
 
 .node-warning {
-    background-color: rgba(208, 135, 112, 0.2); /* --nord12 */
+    background-color: rgba(208, 135, 112, 0.2);
     border-color: var(--nord12);
 }
 
 .node-critical {
-    background-color: rgba(191, 97, 106, 0.2); /* --nord11 */
+    background-color: rgba(191, 62, 106, 0.2);
     border-color: var(--nord11);
 }
 
 .node-unknown {
-    background-color: rgba(129, 161, 193, 0.2); /* --nord9 */
+    background-color: rgba(129, 161, 193, 0.2);
     border-color: var(--nord9);
 }
 
 /* Latency Colors */
 .latency-low {
-    background-color: rgba(163, 190, 140, 0.2); /* --nord13, green for <=200ms */
+    background-color: rgba(163, 190, 140, 0.2);
     border-color: var(--nord13);
 }
 
 .latency-medium {
-    background-color: rgba(208, 135, 112, 0.2); /* --nord12, orange for <=1000ms */
+    background-color: rgba(208, 135, 112, 0.2);
     border-color: var(--nord12);
 }
 
 .latency-high {
-    background-color: rgba(191, 97, 106, 0.2); /* --nord11, red for >1000ms */
+    background-color: rgba(191, 625, 106, 0.2);
     border-color: var(--nord11);
 }
 
 .latency-unavailable {
-    background-color: rgba(129, 161, 193, 0.2); /* --nord9, blue for N/A */
+    background-color: rgba(129, 161, 193, 0.2);
     border-color: var(--nord9);
 }
 
@@ -181,7 +181,7 @@ code {
     padding: 10px;
     position: absolute;
     z-index: 1;
-    bottom: 100%;
+    bottom: 20px;
     left: 50%;
     margin-left: clamp(-90px, -10vw, -110px);
     transition: opacity 0.3s;
@@ -257,6 +257,10 @@ code {
     color: var(--nord11); /* Red */
 }
 
+.log-level-debug { /* Added for potential debug logs */
+    color: var(--nord9); /* Blue */
+}
+
 .json-toggle {
     color: var(--nord8);
     cursor: pointer;
@@ -267,9 +271,64 @@ code {
     background-color: var(--nord1);
     padding: 8px;
     border-radius: 4px;
-    font-family: "Courier New", Courier, monospace;
+    font-family: "Courier New", monospace;
     font-size: 0.8rem;
     color: var(--nord5);
     margin-top: 5px;
     white-space: pre-wrap;
 }
+
+/* Filter Container Styles */
+.filter-container {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-top: 10px;
+    flex-wrap: wrap;
+}
+
+.filter-container label {
+    color: var(--nord5);
+    font-size: 0.9rem;
+    margin-right: 5px;
+}
+
+.filter-container input[type="radio"] {
+    margin-right: 5px;
+}
+
+.filter-container input[type="datetime-local"], .filter-container button {
+    background-color: var(--nord2);
+    color: var(--nord5);
+    border: 1px solid var(--nord3);
+    border-radius: 4px;
+    padding: 5px 10px;
+    font-size: 0.9rem;
+}
+
+.filter-container input[type="datetime-local"]:focus, .filter-container button:focus {
+    outline: none;
+    border-color: var(--nord8);
+}
+
+.filter-container button {
+    background-color: var(--nord10);
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+.filter-container button:hover {
+    background-color: var(--nord8);
+}
+
+.filter-container fieldset {
+    color: var(--nord5);
+    border: 1px solid var(--nord3);
+    border-radius: 4px;
+    padding: 5px 10px;
+}
+
+.filter-container legend {
+    color: var(--nord6);
+    font-size: 0.9rem;
+}