Styling improvements

frontend/src/styles/components/_sidebar.scss

@@ -19,7 +19,7 @@
     text-decoration: none;
     display: block;
     padding: 8px 12px;
-    border-radius: $border-radius;
+    border-radius: var(--border-radius);
     transition: background 0.2s ease-in-out;
     &:hover { background: rgba(255,255,255,0.1); }
   }
@@ -29,7 +29,7 @@
   .submenu {
     margin-left: 8px;
     background: rgba(255,255,255,0.05);
-    border-radius: $border-radius;
+    border-radius: var(--border-radius);
     padding: 6px;
     li { padding: 4px 0; }
   }
@@ -49,6 +49,7 @@
     width: 100%;
     cursor: pointer;
     text-align: left;
+    margin-top: var(--spacing-sm);
   }
 
   .sidebar-header {
@@ -56,7 +57,7 @@
     align-items: center;
     justify-content: space-between;
     width: 100%;
-    margin-bottom: $spacing-md;
+    margin-bottom: var(--spacing-md);
 
     .home {
       flex-grow: 1;
@@ -72,7 +73,7 @@
       display: none;
       background: transparent;
       border: none;
-      color: #fff;
+      color: var(--sidebar-font);
       cursor: pointer;
       padding: 8px;
       border-radius: 50%;
@@ -88,7 +89,7 @@
       svg {
         width: 20px;
         height: 20px;
-        stroke: #fff;
+        stroke: var(--sidebar-font);
       }
 
       @media (max-width: 768px) {
@@ -116,7 +117,7 @@
     position: fixed;
     top: 1rem;
     left: 1rem;
-    z-index: 998;
+    z-index: 999;
     width: 48px;
     height: 48px;
     border-radius: 50%;
@@ -141,6 +142,11 @@
       transform: translateY(-1px);
       box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
       background-color: var(--color-bg);
+      color: var(--color-container);
+      
+      svg {
+        stroke: var(--color-container);
+      }
     }
     
     &:active {
@@ -172,4 +178,4 @@
       pointer-events: auto;
     }
   }
-}
+}