.star-rating {
  display: flex;
  gap: 5px;
}

.star {
  position: relative;
  width: 24px;
  height: 24px;
  cursor: pointer;
}

.star svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 空心星星 */
.star .outline {
  fill: none;
  stroke: #ccc;
  stroke-width: 1;
}

/* 填充星星 */
.star .fill {
  fill: #f90;
  clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
}

/* 完整星星 */
.star.full .fill {
  clip-path: none;
}

/* 空心星星 */
.star.empty .fill {
  display: none;
}

/* 悬停效果 */
.star:hover .fill {
  fill: #ffcc00;
}