/* ========= SIDEBAR - PERFECT DESKTOP & MOBILE ========= */
    .sidebar {
      position: fixed;
      top: 0;
      left: 0;
      height: 100vh;
      width: 280px;
      background: rgba(255, 255, 255, 0.98);
      backdrop-filter: blur(12px);
      box-shadow: 4px 0 25px -8px rgba(0, 0, 0, 0.1);
      z-index: 1000;
      transform: translateX(-100%);
      transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1);
      overflow-y: auto;
      border-right: 1px solid rgba(16, 185, 129, 0.15);
    }
    
    .sidebar.open { transform: translateX(0); }
    
    /* Desktop view - sidebar always visible, main content with top margin 20px */
    @media (min-width: 1024px) {
      .sidebar { 
        transform: translateX(0) !important; 
        position: fixed; 
        top: 0; 
        left: 0;
        height: 100vh;
        box-shadow: none; 
        background: #ffffff; 
      }
      .sidebar-overlay, .mobile-menu-btn, .mobile-bottom-nav { display: none; }
      
      /* Desktop main wrapper with top margin 20px */
      .desktop-main-wrapper {
        margin-left: 280px !important;
        width: calc(100% - 280px) !important;
        padding-top: 20px !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
      }
      main {
        margin-left: 0 !important;
        padding-top: 0 !important;
      }
    }
    
    /* Mobile overlay */
    .sidebar-overlay {
      position: fixed; top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px);
      z-index: 999; opacity: 0; visibility: hidden; transition: all 0.3s ease;
    }
    .sidebar-overlay.active { opacity: 1; visibility: visible; }
    
    /* Navigation items style */
    .nav-link {
      transition: all 0.25s ease; border-radius: 12px; position: relative;
      cursor: pointer;
    }
    .nav-link:hover {
      background: linear-gradient(95deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.02) 100%);
      transform: translateX(5px);
    }
    .nav-active {
      background: linear-gradient(95deg, rgba(16, 185, 129, 0.12) 0%, rgba(16, 185, 129, 0.04) 100%);
      color: #059669;
      border-left: 3px solid #10b981;
    }
    
    /* Mobile Bottom Navigation */
    .mobile-bottom-nav {
      display: none;
      position: fixed;
      bottom: 0; left: 0; right: 0;
      background: rgba(255,255,255,0.96);
      backdrop-filter: blur(20px);
      border-top: 1px solid rgba(16,185,129,0.2);
      padding: 10px 20px;
      justify-content: space-around;
      z-index: 200;
      box-shadow: 0 -4px 20px rgba(0,0,0,0.05);
    }
    @media (max-width: 1023px) {
      .mobile-bottom-nav { display: flex; }
      main { padding-bottom: 85px !important; margin-left: 0 !important; width: 100% !important; }
    }
    
    .bottom-nav-item {
      display: flex; flex-direction: column; align-items: center; gap: 4px;
      font-size: 11px; font-weight: 600; color: #94a3b8;
      transition: all 0.2s; cursor: pointer;
    }
    .bottom-nav-item.active { color: #10b981; transform: translateY(-2px); }
    .bottom-nav-item i { font-size: 22px; }