style: establish visually distinct hierarchies for main categories, tool items, and tree sub-links

static/theme.css

@@ -148,22 +148,47 @@ body {
 
 /* --- Sub nav (children of a nav item) --- */
 .nav-sub {
-    padding-left: 1.5rem;
-    border-left: 2px solid var(--color-border-light);
-    margin-left: 1.2rem;
-    margin-bottom: 0.2rem;
+    padding-left: 1rem;
+    border-left: 1.5px dashed var(--color-border-input);
+    margin-left: 1.5rem;
+    margin-bottom: 0.4rem;
+    margin-top: 0.2rem;
 }
 
 .nav-link-sub {
-    font-size: 0.82rem;
-    padding: 0.45rem 0.75rem;
+    font-size: 0.78rem;
+    padding: 0.4rem 0.65rem;
     color: var(--color-text-muted);
+    font-weight: 500;
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    border-radius: var(--radius-sm);
+}
+
+.nav-link-sub::before {
+    content: "•";
+    color: var(--color-text-disabled);
+    font-size: 0.8rem;
+    margin-right: 2px;
+    transition: color 0.15s;
+}
+
+.nav-link-sub:hover {
+    color: var(--color-text-heading);
+    background: var(--color-bg-input);
+}
+
+.nav-link-sub:hover::before,
+.nav-link-sub.active::before {
+    color: var(--color-primary);
 }
 
 .nav-link-sub.active {
     background: var(--color-nav-active-bg);
     color: var(--color-nav-active-txt);
-    font-weight: var(--font-weight-semi);
+    font-weight: 600;
 }
 
 /* --- Collapsible nav item --- */
@@ -182,30 +207,32 @@ body {
 }
 
 .nav-section-header {
-    font-size: var(--font-size-xs);
+    font-size: 0.68rem;
     text-transform: uppercase;
-    color: var(--color-label-muted);
-    font-weight: var(--font-weight-semi);
+    color: var(--color-text-heading);
+    font-weight: 800;
     letter-spacing: 0.08em;
-    padding: var(--spacing-sm) 0.9rem;
+    padding: 8px 12px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     cursor: pointer;
     border-radius: var(--radius-sm);
-    transition: background 0.15s, color 0.15s;
-    margin-top: var(--spacing-md);
-    margin-bottom: 0.2rem;
+    background: var(--color-bg-input);
+    border-left: 3px solid var(--color-primary);
+    transition: all 0.15s ease;
+    margin-top: 1.2rem;
+    margin-bottom: 0.4rem;
 }
 
 .nav-section-header:hover {
-    background: var(--color-bg-input);
-    color: var(--color-text-heading);
+    background: var(--color-border-input);
+    color: #000;
 }
 
 .nav-section-header .nav-chevron {
-    font-size: 0.65rem;
-    color: var(--color-text-disabled);
+    font-size: 0.62rem;
+    color: var(--color-text-muted);
     transition: transform 0.2s ease;
 }
 
@@ -500,3 +527,8 @@ body {
 .select2-results__options::-webkit-scrollbar-thumb:hover {
     background-color: #94a3b8;
 }
+
+/* Sidebar sub-group collapsible spacing */
+.nav-sub-group.collapse.show {
+    margin-bottom: 0.8rem;
+}