@charset "UTF-8";

#best-post {
  border: 1px solid var(--borderColor);
  border-radius: var(--radius);
  background: var(--colorwhite);
  padding: 1.5rem 0.5rem;
  box-shadow: var(--shadow);
}

.best-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom: 1.5rem;
  padding: 0 1rem;
}

.best-title {
  font-size:20px;
  font-weight:700;
  line-height: 1.2;
}

.best-title span {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  letter-spacing: 2px;
  color: #28c987;
  font-weight: 500;
}

.best-tabs {
  display:flex;
  gap:5px;
}

.best-tabs button {
  height:30px;
  padding:0 12px;
  border:1px solid #e5e5e5;
  background:#fff;
  border-radius:20px;
  font-size:12px;
  color:#777;
  cursor:pointer;
  transition:.2s;
}

.best-tabs button:hover {
  color:#019589;
  border-color:#019589;
}

.best-tabs button.beston {
  background: var(--bg-in-color-Hover);
  border-color: var(--bg-in-color-Hover);
  color:#fff;
}

.best-item a {
  display:flex;
  align-items:center;
  text-decoration:none;
  gap:8px;
  padding: 0.64rem 1rem;
  transition: .2s;
  border-radius: var(--radius);
  min-height: 36px;
}

.best-item a:hover {
  background: #f5faf7;
  transform: translateX(3px);
}

.best-rank {
  font-weight:700;
  color:#999;
  text-align:center;
}

.best-item:nth-child(2) .best-rank {
  color:#019589;
}

.best-item:nth-child(3) .best-rank {
  color:#555;
}

.best-subject {
  flex:1;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-weight:500;
}

.best-meta {
  flex-shrink:0;
  font-size:12px;
  color:#888;
}

.best-empty {
  padding:35px 0;
  text-align:center;
  font-size:14px;
  color:#999;
}

@media(max-width:768px){
  .best-header {
    flex-wrap:wrap;
    gap:12px;
  }

  .best-title {
    font-size:16px;
  }

  .best-tabs button {
    height:28px;
    padding:0 10px;
  }

  .best-item a {
    gap:8px;
    padding: 0.2rem 1rem;
    min-height: 28px;
  }

  .best-rank {
    width:28px;
    font-size:13px;
  }

  .best-subject {
    font-size:13px;
  }
}