style: Implementation of Premium 2026 scrollbar and Z-Index supremacy

frontend/app/page.tsx

@@ -171,7 +171,7 @@ export default function HomePage() {
 
       <div className="flex flex-col md:flex-row min-h-screen gap-8 p-6 md:p-10">
         {/* Sidebar Container */}
-        <div className={`${isMobileMenuOpen ? "fixed inset-0 z-[60] flex" : "hidden"} md:block md:w-[84px] md:shrink-0 md:sticky md:top-8 md:h-[calc(100vh-4rem)] transition-all duration-500`}>
+        <div className={`${isMobileMenuOpen ? "fixed inset-0 z-[100] flex" : "hidden"} md:block md:w-[84px] md:shrink-0 md:sticky md:top-8 md:h-[calc(100vh-4rem)] transition-all duration-500 z-[100]`}>
           {isMobileMenuOpen && (
             <div className="absolute inset-0 bg-black/80 backdrop-blur-sm md:hidden" onClick={() => setIsMobileMenuOpen(false)} />
           )}

frontend/globals.css

@@ -63,30 +63,37 @@
   }
 }
 
-/* Custom scrollbar */
+/* Custom scrollbar Premium 2026 */
 .custom-scrollbar::-webkit-scrollbar {
-  width: 4px;
+  width: 2px;
   height: 0px;
 }
 .custom-scrollbar::-webkit-scrollbar-track {
   background: transparent;
 }
 .custom-scrollbar::-webkit-scrollbar-thumb {
-  background: rgba(168, 85, 247, 0.2);
-  border-radius: 10px;
+  background: linear-gradient(to bottom, transparent, #a855f7, transparent);
+  border-radius: 20px;
+  box-shadow: 0 0 10px rgba(168, 85, 247, 0.5);
 }
 .custom-scrollbar::-webkit-scrollbar-thumb:hover {
-  background: rgba(168, 85, 247, 0.4);
+  background: #a855f7;
+  width: 4px;
 }
 
+/* Global scrollbar refinement */
 ::-webkit-scrollbar {
-  width: 6px;
+  width: 4px;
 }
 ::-webkit-scrollbar-track {
-  @apply bg-transparent;
+  background: transparent;
 }
 ::-webkit-scrollbar-thumb {
-  @apply bg-white/5 rounded-full hover:bg-white/10 transition-colors;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 10px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(168, 85, 247, 0.2);
 }
 
 ::selection {