Add distribution power summaries

src/app/globals.css

@@ -116,6 +116,39 @@ body {
   font-weight: 600;
 }
 
+.distribution-power-summary {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(12rem, 1fr));
+  gap: 0.5rem;
+  padding: 0.55rem;
+  border: 1px solid #cbd5e1;
+  border-radius: 5px;
+  background: #f8fafc;
+}
+
+.distribution-power-summary > div {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+}
+
+.distribution-power-summary span {
+  color: #475569;
+  font-size: 0.74rem;
+  line-height: 1.2;
+}
+
+.distribution-power-summary strong {
+  color: #172033;
+  font-size: 0.95rem;
+}
+
+@media (max-width: 900px) {
+  .distribution-power-summary {
+    grid-template-columns: 1fr;
+  }
+}
+
 .column-settings-menu {
   position: absolute;
   z-index: 9;
@@ -695,6 +728,18 @@ body {
   outline-offset: -2px;
 }
 
+.tree-grid .section-title {
+  display: flex;
+  align-items: baseline;
+  gap: 0.75rem;
+}
+
+.tree-grid .section-title span {
+  color: #475569;
+  font-size: 0.78rem;
+  font-weight: 500;
+}
+
 .tree-grid .cell-invalid {
   outline: 2px solid #c2410c;
   outline-offset: -2px;