Distingui visivamente la gerarchia dei layer

wwwroot/css/app.css

@@ -266,16 +266,25 @@ input[type="checkbox"] {
 .layer-manager-group,
 .layer-manager-block,
 .layer-manager-object {
-    border: 1px solid #dce3e6;
+    border: 1px solid var(--layer-group-border, #dce3e6);
     border-radius: 6px;
-    background: #fff;
+    background: var(--layer-group-surface, #fff);
+}
+
+.layer-manager-group > summary,
+.layer-manager-block > summary {
+    background: var(--layer-group-parent, #f6f8f9);
+}
+
+.layer-manager-object > summary {
+    background: var(--layer-group-surface, #fff);
 }
 
 .layer-manager-group > summary,
 .layer-manager-block > summary,
 .layer-manager-object > summary {
     display: grid;
-    grid-template-columns: 28px minmax(0, 1fr) 24px;
+    grid-template-columns: 28px minmax(0, 1fr) 50px;
     grid-template-areas:
         "handle title count"
         ". visibility moves"
@@ -359,7 +368,7 @@ input[type="checkbox"] {
 .layer-move-buttons {
     grid-area: moves;
     display: inline-grid;
-    grid-template-columns: 24px;
+    grid-template-columns: 24px 24px;
     gap: 2px;
 }
 
@@ -384,8 +393,24 @@ input[type="checkbox"] {
     grid-area: title;
     min-width: 0;
     overflow-wrap: anywhere;
+    color: var(--layer-group-accent, var(--ink));
     font-size: 12px;
-    font-weight: 700;
+}
+
+.layer-manager-group > summary > .layer-manager-title {
+    font-size: 13px;
+    font-weight: 800;
+}
+
+.layer-manager-block > summary > .layer-manager-title {
+    font-size: 12px;
+    font-weight: 800;
+}
+
+.layer-manager-object > summary > .layer-manager-title {
+    font-size: 11px;
+    font-style: italic;
+    font-weight: 400;
 }
 
 .layer-manager-count {
@@ -396,7 +421,46 @@ input[type="checkbox"] {
 }
 
 .layer-manager-children {
-    padding: 0 4px 5px 6px;
+    margin-left: 4px;
+    padding: 4px 3px 5px 6px;
+    border-left: 2px solid var(--layer-group-border, #dce3e6);
+}
+
+.layer-manager-block > .layer-manager-children {
+    margin-left: 5px;
+    padding-left: 5px;
+}
+
+.layer-manager-object {
+    margin-left: 3px;
+    border-radius: 4px;
+}
+
+.layer-manager-object > summary {
+    grid-template-columns: 24px minmax(0, 1fr) 46px;
+    gap: 4px;
+    padding: 3px 4px;
+}
+
+.layer-manager-object > summary > .layer-drag-handle {
+    width: 24px;
+    height: 24px;
+    font-size: 15px;
+}
+
+.layer-manager-object > summary > .layer-move-buttons {
+    grid-template-columns: 22px 22px;
+}
+
+.layer-manager-object > summary > .layer-move-buttons button {
+    width: 22px;
+    height: 24px;
+}
+
+.layer-manager-object > summary .layer-rename-button,
+.layer-manager-object > summary .layer-remove-button {
+    min-height: 24px;
+    font-size: 9px;
 }
 
 .layer-manager-details {