Implemented navigation shelf with nav draweer button

ShopAdmin/wwwroot/app.css

@@ -1,10 +1,21 @@
 /* --- 1. Variables & Global Reset --- */
 :root {
-    --bar-bg: #001219;
-    --text-white: #ffffff;
+    /* --- BRAND CORES --- */
     --brand-blue: #0096c7;
-    --hover-blue: #00b4d8;
+    --hover-blue: #4dabff;
+    /* --- NEW CANVAS BALANCE --- */
+    /* Lighter, slate-tinted midnight for the main workspace body */
+    --body-bg: #0b1519;
+    /* Deep obsidian for the fixed navigation anchors */
+    --bar-bg: #03090b;
+    /* The NavShelf background: sits right between the bar and body */
+    --shelf-bg: #070e10;
+    /* --- TYPOGRAPHY & LINES --- */
+    --text-white: #f8f9fa;
+    /* Soft cyan-gray tone for secondary text and structural borders */
     --payoff-color: #90e0ef;
+    --border-low-opacity: rgba(144, 224, 239, 0.08);
+    --border-mid-opacity: rgba(144, 224, 239, 0.18);
     --header-height: 92px;
 }
 
@@ -31,7 +42,7 @@ html, body {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 0 4rem;
+    padding: 0 4rem 0 1rem;
     z-index: 1000;
     border-bottom: 1px solid rgba(144, 224, 239, 0.15);
 }
@@ -93,6 +104,8 @@ html, body {
     padding-top: var(--header-height);
     box-sizing: border-box;
     background-color: var(--bar-bg);
+    position: relative;
+    transition: padding-right 0.35s cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 main {
@@ -100,6 +113,7 @@ main {
     display: flex;
     flex-direction: column;
     width: 100%;
+    background-color: var(--body-bg) !important;
 }
 
 /* --- Responsive Logic --- */