feat(ui): improve sidebar layering, visual hierarchy, and graph depth [issue #23]

src/NexusReader.UI.Shared/Components/Molecules/IntelligenceToolbar.razor

@@ -38,7 +38,7 @@
         <button class="toolbar-item" title="Global Settings">
             <NexusIcon Name="settings" Size="20" />
         </button>
-        <button class="toolbar-item logout-item" @onclick="HandleLogout" title="Logout">
+        <button class="toolbar-item logout-item" @onclick="HandleLogout" title="Exit">
             <NexusIcon Name="log-out" Size="20" />
         </button>
     </div>

src/NexusReader.UI.Shared/Components/Molecules/IntelligenceToolbar.razor.css

@@ -75,3 +75,22 @@
     color: #ff4d4d;
     background: rgba(255, 77, 77, 0.1);
 }
+
+.toolbar-item.logout-item {
+    margin-top: 1rem;
+    border-top: 1px solid rgba(255, 255, 255, 0.08);
+    padding-top: 1.5rem;
+    height: auto;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    border-radius: 0;
+    color: #444;
+}
+
+.toolbar-item.logout-item:hover {
+    color: #ff4d4d;
+    background: none;
+    filter: drop-shadow(0 0 8px rgba(255, 77, 77, 0.4));
+}
+

src/NexusReader.UI.Shared/Components/Organisms/KnowledgeGraph.razor.css

@@ -12,28 +12,33 @@
 
 .graph-controls {
     position: absolute;
-    bottom: 1rem;
+    bottom: 1.5rem;
     right: 1.5rem;
     display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
+    flex-direction: row;
+    gap: 0.25rem;
+    background: rgba(20, 20, 20, 0.4);
+    backdrop-filter: blur(12px);
+    padding: 0.35rem;
+    border-radius: 8px;
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
     z-index: 10;
 }
 
 .zoom-btn {
-    width: 28px;
-    height: 28px;
-    background: rgba(18, 18, 18, 0.8);
-    backdrop-filter: blur(4px);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    border-radius: 4px;
-    color: #888;
-    font-size: 1rem;
+    width: 32px;
+    height: 32px;
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    border-radius: 6px;
+    color: #aaa;
+    font-size: 1.1rem;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
-    transition: all 0.2s ease;
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .zoom-btn:hover {

src/NexusReader.UI.Shared/Layout/MainLayout.razor.css

@@ -33,7 +33,7 @@ main {
     height: 100%;
     background: #0d0d0d;
     box-shadow: -10px 0 30px rgba(0, 0, 0, 0.3);
-    border-left: 1px solid rgba(255, 255, 255, 0.05);
+    border-left: 1px solid rgba(255, 255, 255, 0.1);
     overflow: hidden;
     z-index: 10;
 }

src/NexusReader.UI.Shared/wwwroot/js/knowledgeGraph.js

@@ -21,7 +21,8 @@ export function mount(containerId, data, dotNetHelper) {
     svgElement = d3.select(container).append("svg")
         .attr("viewBox", [0, 0, width, height])
         .attr("width", "100%")
-        .attr("height", "100%");
+        .attr("height", "100%")
+        .style("background", "radial-gradient(circle, #1a1a1a 0%, #121212 100%)");
 
     // Radial gradient for Nebula effect
     const defs = svgElement.append("defs");