.hero { margin-bottom: 14px; }
.hero__title { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.hero__sub { margin-top: 4px; font-size: 13px; line-height: 1.7; color: var(--text-3); }

/* ── 四张榜切换 ─────────────────────────────────────── */
/* 四个等宽格，当前项底部一道品牌色横线，与小程序的主榜切换一致 */
.btabs {
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin-bottom: 14px; background: var(--card);
  border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden;
}
.btab {
  position: relative; padding: 12px 4px; text-align: center;
  font-size: 14px; color: var(--text-2);
}
.btab.is-active { color: var(--brand); font-weight: 600; }
.btab.is-active::after {
  content: ''; position: absolute; left: 50%; bottom: 0;
  width: 26px; height: 3px; margin-left: -13px; border-radius: 2px 2px 0 0;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
}

.toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.toolbar .segment { margin-left: auto; }

.modebar { margin-bottom: 12px; font-size: 12.5px; color: var(--text-3); }
.modebar__date { font-family: var(--mono); color: var(--text-2); }

@media (max-width: 420px) {
  .btab { padding: 11px 2px; font-size: 13px; }
  .toolbar { flex-wrap: wrap; gap: 10px; }
  .toolbar .segment { margin-left: 0; }
}

@media (min-width: 768px) {
  .hero__title { font-size: 26px; }
}