.page { min-height: 100vh; background: var(--bg-grad); }

.hint {
  padding: 16rpx 36rpx 0;
  font-size: 24rpx;
  color: var(--gold);
}

.filterbar { padding: 16rpx 32rpx 4rpx; }
.filterbar__scroll { white-space: nowrap; }

.searchbar { padding: 12rpx 32rpx; }
.searchbar__box {
  display: flex; align-items: center;
  background: var(--surface); border: 1rpx solid var(--line);
  border-radius: 999rpx; padding: 20rpx 28rpx;
}
.searchbar__input { flex: 1; color: var(--text); font-size: 28rpx; }
.ph { color: var(--text-3); }

.grid { display: flex; flex-wrap: wrap; gap: 18rpx; }
.grid__item { width: calc((100% - 18rpx) / 2); }

.empty { color: var(--text-3); font-size: 26rpx; text-align: center; padding: 80rpx 0; }

.empty-box { display: flex; flex-direction: column; align-items: center; padding: 100rpx 40rpx; }
.empty-box__emoji {
  width: 160rpx; height: 160rpx; border-radius: 36rpx;
  background: var(--surface-2); display: flex; align-items: center; justify-content: center;
}
.empty-box__t { font-size: 30rpx; color: var(--text-2); margin-top: 36rpx; text-align: center; }
.empty-box__btn {
  margin-top: 44rpx; padding: 24rpx 88rpx; border-radius: 999rpx;
  background: var(--gold); color: var(--accent-on); font-weight: 700; font-size: 30rpx;
}