/* Recommended Apps */
.recommended-app { 
  display: flex; 
  align-items: center; 
  padding: 8px 0; 
  border-bottom: 1px solid #eee; 
  cursor: pointer; 
  text-decoration: none; 
  color: #333; 
}
.recommended-app:hover { 
  color: var(--accent); 
}
.recommended-app-icon { 
  width: 40px; 
  height: 40px; 
  border-radius: 8px; 
  margin-right: 12px; 
  flex-shrink: 0; 
}
.recommended-app-info { 
  display: flex; 
  flex-direction: column; 
  font-size: 13px; 
}
.recommended-app-name { 
  font-weight: 500; 
  margin-bottom: 2px; 
}
.recommended-app-category, .recommended-app-version { 
  font-size: 12px; 
  color: #555; 
}

/* Recommended Shimmer Styles */
.shimmer-recommended {
  display: flex;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}

.recommended-app.shimmer-recommended .recommended-app-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  margin-right: 12px;
  flex-shrink: 0;
  background: linear-gradient(
    90deg,
    #e5e7eb 25%,
    #f1f5f9 50%,
    #e5e7eb 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite linear;
}

.recommended-app.shimmer-recommended .recommended-app-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 4px;
}

.recommended-app.shimmer-recommended .shimmer-line {
  height: 10px;
  background: linear-gradient(
    90deg,
    #e5e7eb 25%,
    #f1f5f9 50%,
    #e5e7eb 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite linear;
  border-radius: 4px;
}

.recommended-app.shimmer-recommended .shimmer-line:nth-child(1) {
  width: 70%;
  height: 12px;
}

.recommended-app.shimmer-recommended .shimmer-line:nth-child(2) {
  width: 50%;
  height: 10px;
}

.recommended-app.shimmer-recommended .shimmer-line:nth-child(3) {
  width: 30%;
  height: 8px;
}

/* Shimmer animation - add if not already in your CSS */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}