.hero { margin-bottom: 14px; }
.hero__title { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.hero__sub { margin-top: 4px; font-size: 13px; color: var(--text-3); }
.hero__search {
  display: flex; align-items: center; gap: 8px; margin-top: 14px;
  padding: 10px 14px; border-radius: 999px;
  background: var(--card); box-shadow: var(--shadow);
  font-size: 14px; color: var(--text-3);
}
.hero__search img { opacity: .5; }

/* ── 平台筛选 ───────────────────────────────────────── */
/* 横向可滚，窄屏放不下四个平台时不换行、不压缩 */
.pftabs {
  display: flex; gap: 8px; margin-bottom: 14px;
  overflow-x: auto; scrollbar-width: none;
}
.pftabs::-webkit-scrollbar { display: none; }
.pftab {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 15px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--line);
  font-size: 13.5px; color: var(--text-2); white-space: nowrap;
}
.pftab img { border-radius: 3px; }
.pftab.is-active {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  border-color: transparent; color: #fff; font-weight: 500;
  box-shadow: 0 4px 12px -4px rgba(102, 126, 234, .7);
}

.toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.toolbar__link {
  margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
  font-size: 14px; color: var(--brand);
}
.toolbar__link img { opacity: .9; }

/* 当前榜的数据日期与口径，一行说清「看的是哪天、什么榜」 */
.modebar { margin-bottom: 12px; font-size: 12.5px; color: var(--text-3); }
.modebar__date { font-family: var(--mono); color: var(--text-2); }

.datebar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; overflow-x: auto; }
.datebar__label { flex: none; font-size: 13px; color: var(--text-3); }
.datebar .chips { flex-wrap: nowrap; }
.datebar .chip { flex: none; font-family: var(--mono); }

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

  /* 宽屏把标题与搜索并排，筛选与类型切换并排：
     竖着排会让每行右边空掉一大片，页面看着像没写完 */
  .hero--split { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
  .hero--split .hero__search { flex: none; width: 320px; margin-top: 0; }
  .filters { display: flex; align-items: center; gap: 16px; }
  .filters .pftabs { flex: 1; min-width: 0; margin-bottom: 14px; }
  .filters .toolbar { flex: none; margin-bottom: 14px; }
}