.download-container {max-width: 1000px;margin: 100px auto 50px;padding: 0 20px;}
.Hakupainike{
    text-align: center;
}
.search-title{
    margin: auto;
    padding-bottom: 20px;
    width: max-content;
    background: linear-gradient(90deg, var(--color-background) 11%, var(--color-background-inverse) 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}
.Hakupainike form{
    max-width: 600px;
    min-width: 150px;
    white-space: nowrap;
    margin: 30px auto 50px;
    background: var(--color-background-inverse);
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid transparent;
    transition: all 0.2s;
}
.Hakupainike form:hover,
.Hakupainike form:focus-within {
    border: 1px solid var(--color-accent);
}
.Hakupainike input{
    border: 1px solid #252529;
    font-size: 18px;
    border-radius: 10px 0 0 10px;
    background-color: var(--color-background-inverse);
    height: 46px;
    flex: 1 0 0;
    padding-left: 12px;
    min-width: 0;
}

.Hakupainike button{
    background-color: var(--color-background-alt);
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 0 10px 10px 0;
    margin-left: -2px;
    cursor: pointer;
}
.Hakupainike button i{
  font-size: 24px;
}
.search-info{
    margin: 30px 0;
    color: var(--color-text-muted);
}
#search-collapse{
    display: none;
    border-bottom: 1px solid #333;
    padding-bottom: 20px;
}
.search_list{}
.download-container .layui-collapse {
  margin: 50px 0;
  border: none;
}
.download-container .layui-colla-item {
  border: none;
  margin-bottom: 20px;
  position: relative;
  width: 100%;
}
.download-container .layui-colla-title {
  background-color: transparent;
  margin-bottom: 10px;
  width: fit-content;
  color: var(--color-text);
}
.download-container .layui-colla-title span {
  color: var(--color-text-muted);
}
.download-container .layui-colla-title > i {
  font-size: 20px;
  left: 0;
  font-weight: 700;
  margin-top: -11px;
}
.download-container .layui-colla-content {
  max-height: 700px;
  overflow-y: auto;
  overflow-x: hidden;
  border: none;
  padding: 10px 0;
  /* 通用滚动条轨道样式 */
  width: 100%;
  /* position: relative; */
  scrollbar-color: #e99d33e1 #222; /* Firefox: 滑块色 轨道色 */
  scrollbar-width: thin; /* Firefox: 可选auto/thin/none */
}
/* Webkit专属样式 */
.download-container .layui-colla-content::-webkit-scrollbar {
  width: 15px; /* 垂直滚动条宽度 */
  height: 8px; /* 水平滚动条高度 */
  background-color: #222; /* 轨道背景 */
  border-radius: 10px;
}
.download-container .layui-colla-content::-webkit-scrollbar-thumb {
  background-color: #e99d33e1; /* 滑块颜色 */
  border-radius: 20px; /* 圆角 */
  border: 2px solid transparent; /* 透明边框避免边缘锯齿 */
  background-clip: content-box; /* 背景裁剪 */
}
.download-container .layui-colla-content::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-accent); /* 悬停效果 */
}
.download-container .layui-colla-content::-webkit-scrollbar-track {
  background-color: #222; /* 轨道颜色 */
  border-radius: 20px; /* 轨道圆角 */
}
.download-container .layui-colla-content.layui-show {
}
.download-items {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 25px 13px;
  padding-right: 20px;
}
.download-item {
  background-color: var(--color-background-alt);
  border: 1px solid #333;
  border-radius: 5px;
  padding: 20px 10px;
  transition: all 0.2s;
  /* min-height: 190px; */
}
.download-item:hover img{
  transform: scale(1.05) translateY(-5px);
}
.model-img {
  width: 75%;
  margin: auto;
}
.model-img img {
  width: 100%;
  transition: all 0.2s;
}
.model-name {
  text-align: center;
  margin-top: 20px;
}
/* .mask {
  position: absolute;
  bottom: -2px;
  width: 100%;
  overflow: hidden;
  height: 50px;
  pointer-events: none;
  background: linear-gradient(0deg,rgb(0 0 0 / 50%) 25%, rgb(0 0 0 / 30%) 60%, rgba(0, 0, 0, 0) 100%);
} */


@media (max-width: 1120px) {
  .download-items{
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 1024px) {
  .download-items{
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 768px) {
  .download-items{
    grid-template-columns: repeat(2, 1fr);
  }
}