Separate UX diagnostics from curation

src/RolemasterDb.App/wwwroot/app.css

@@ -1068,6 +1068,40 @@ textarea {
     text-align: right;
 }
 
+.diagnostics-page {
+    display: grid;
+    gap: 1rem;
+}
+
+.diagnostics-page-header {
+    display: flex;
+    align-items: start;
+    justify-content: space-between;
+    gap: 1rem;
+}
+
+.diagnostics-selector-grid {
+    display: grid;
+    gap: 0.85rem;
+    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+}
+
+.diagnostics-selection-summary {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.45rem;
+    padding: 0.85rem 1rem;
+    border-radius: 16px;
+    background: rgba(247, 239, 225, 0.65);
+    border: 1px solid rgba(127, 96, 55, 0.12);
+    color: #5d4429;
+}
+
+.critical-diagnostics-body {
+    display: grid;
+    gap: 0.85rem;
+}
+
 .critical-editor-inline-button {
     border: none;
     background: transparent;
@@ -1138,4 +1172,10 @@ textarea {
         justify-items: start;
         text-align: left;
     }
+
+    .diagnostics-page-header,
+    .diagnostics-selection-summary {
+        flex-direction: column;
+        align-items: stretch;
+    }
 }