:where([class^="ri-"])::before { content: "\f3c2"; }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* 固定导航栏 */
header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50; /* 确保导航栏在其他内容之上 */
    background-color: rgba(252, 252, 253, 0.9);  /* 半透明背景 */
    transition: background-color 0.3s ease, backdrop-filter 0.3s ease;
}
header.scrolled {
    background-color: rgba(252, 252, 253, 0.685);  /* 滚动后的半透明背景 */
    backdrop-filter: blur(10px);  /* 添加磨砂效果 */
}

/* 为页面主体添加顶部填充，避免内容被导航栏遮挡 */
body {
    padding-top: 64px; /* 导航栏高度为 64px */
}
/* 固定高度的滚动容器 */
.scroll-container {
    max-height: 300px; /* 固定高度 */
    height: auto;
    overflow-y: auto; /* 超出部分滚动 */
    }
    /* 激活状态的样式 */
    .active {
    background-color: rgba(16, 185, 129, 0.1); /* 浅绿色背景 */
    color: #10b981; /* 主题颜色文字 */
    font-weight: bold; /* 加粗字体 */
    }

/* 如果你没有使用 Tailwind CSS，可以使用以下自定义 CSS */
@media (max-width: 640px) {
    .flex-col.sm\:flex-row {
      flex-direction: column;
    }
  
    .sm\:space-y-0 > * + * {
      margin-top: 0.25rem;
    }
  
    .sm\:space-x-4 > * + * {
      margin-left: 0;
    }
  }
  
  @media (min-width: 640px) {
    .flex-col.sm\:flex-row {
      flex-direction: row;
    }
  
    .sm\:space-y-0 > * + * {
      margin-top: 0;
    }
  
    .sm\:space-x-4 > * + * {
      margin-left: 1rem;
    }
  }