Polish change detection density

frontend/src/styles/app.css

@@ -1465,6 +1465,71 @@ button.entity-card {
   margin: 0;
 }
 
+.change-detection-shell {
+  display: grid;
+  gap: 0.75rem;
+}
+
+.change-detection-heading {
+  margin-bottom: 0;
+}
+
+.change-detection-input-surface,
+.change-detection-result-surface,
+.change-detection-warning-surface {
+  min-width: 0;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  padding: 0.72rem;
+  background: #ffffff;
+}
+
+.change-detection-input-surface {
+  background: linear-gradient(180deg, #ffffff, #f7fbf8);
+}
+
+.change-detection-state-stack {
+  display: grid;
+  gap: 0.55rem;
+}
+
+.change-detection-shell .form-grid {
+  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
+  gap: 0.62rem;
+  margin: 0;
+}
+
+.change-detection-shell .form-grid label {
+  min-width: 0;
+}
+
+.change-detection-shell .form-grid input,
+.change-detection-shell .form-grid select {
+  width: 100%;
+  min-width: 0;
+}
+
+.change-detection-shell .summary-grid {
+  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
+  gap: 0.55rem;
+  margin: 0;
+}
+
+.change-detection-warning-surface {
+  border-color: rgba(180, 83, 9, 0.24);
+  background: rgba(180, 83, 9, 0.08);
+}
+
+.change-detection-warning-surface strong {
+  display: block;
+  color: #92400e;
+  font-size: 0.88rem;
+}
+
+.change-detection-warning-surface .compact-list {
+  margin-top: 0.45rem;
+}
+
 .quality-results-shell .quality-summary-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
@@ -2798,12 +2863,16 @@ button.entity-card {
   .quality-summary-surface,
   .quality-evidence-surface,
   .quality-control-surface,
-  .quality-history-surface {
+  .quality-history-surface,
+  .change-detection-input-surface,
+  .change-detection-result-surface,
+  .change-detection-warning-surface {
     padding: 0.58rem;
   }
 
   .quality-results-shell .quality-summary-grid,
-  .quality-results-shell .quality-history-controls {
+  .quality-results-shell .quality-history-controls,
+  .change-detection-shell .form-grid {
     grid-template-columns: repeat(auto-fit, minmax(8.25rem, 1fr));
     gap: 0.5rem;
   }
@@ -2811,7 +2880,8 @@ button.entity-card {
   .quality-results-shell .quality-handoff-grid,
   .quality-results-shell .quality-score-row,
   .quality-results-shell .quality-metric-grid,
-  .quality-results-shell .metric-list {
+  .quality-results-shell .metric-list,
+  .change-detection-shell .summary-grid {
     grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
     gap: 0.5rem;
   }