body {
  font-family: Arial, sans-serif;
  max-width: 80%;
  width: 80%;
  margin: 0 auto;
  padding: 20px;
  padding-top: 100px; /* 为固定的搜索框和状态消息留出空间 */
}

#resultsContainer {
  padding-bottom: 30px; /* 减少为底部浮动分页容器留出的空间 */
}

/* 分页样式 */
.pagination-container {
  display: flex;
  gap: 15px;
  align-items: center;
  flex-wrap: wrap;
  position: fixed;
  bottom: 10px; /* 调整分页容器距离底部的距离 */
  left: 50%;
  transform: translateX(-50%);
  background: white;
  padding: 8px 15px; /* 减少内边距 */
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  min-width: 400px;
  justify-content: center;
}

.page-control {
  display: flex;
  gap: 8px;
  align-items: center;
}

#pagination {
  display: flex;
  gap: 5px;
  margin-bottom: 10px;
}

.page-btn {
  padding: 5px 12px;
  border: 1px solid #ddd;
  background: #f8f9fa;
  cursor: pointer;
  border-radius: 4px;
}

.page-btn:hover {
  background: #e9ecef;
}

.page-control {
  display: flex;
  align-items: center;
  gap: 8px;
}

#page-input {
  padding: 4px 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  text-align: center;
}

#page-input:invalid {
  border-color: #ff4444;
  background: #fff0f0;
}

.search-container {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  max-width: 600px;
  background: white;
  padding: 8px 12px;
  border-radius: 6px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

#searchInput {
  flex: 1;
  padding: 8px;
  font-size: 16px;
}

button {
  padding: 8px 16px;
  background: #007bff;
  color: white;
  border: none;
  cursor: pointer;
}

/* 搜索框居中样式 */
.search-container.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  max-width: 600px;
}

.result-item {
  margin-bottom: 15px;
  padding: 10px;
  border-bottom: 1px solid #eee;
}

.result-item h3 {
  margin-top: 0; /* 移除h3的顶部边距 */
  margin-bottom: 5px; /* 保持底部边距较小 */
}

.result-item p {
  margin-top: 5px; /* 保持顶部边距较小 */
  margin-bottom: 0; /* 移除p的底部边距 */
  line-height: 1.4; /* 调整行高 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.result-item .url {
  color: green; /* 将URL字体颜色设置为绿色 */
  cursor: pointer; /* 鼠标悬停时显示手型 */
  user-select: all; /* 允许全选 */
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
  display: block; /* 显示为块级元素 */
}

.result-item .url:hover {
  text-decoration: underline; /* 鼠标悬停时添加下划线 */
}

.highlight {
  color: #ff0000;
  font-weight: bold;
}

.pagination {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
}

#statusMessage {
  text-align: center;
  padding: 6px;
  margin: 10px 0;
  border-radius: 3px;
  position: fixed;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  max-width: 600px;
  z-index: 999;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  font-size: 14px;
}

#statusMessage.loading {
  color: #004085;
  background-color: #cce5ff;
  border: 1px solid #b8daff;
}

#statusMessage.error {
  color: #721c24;
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
}

#statusMessage.success {
  color: #155724;
  background-color: #d4edda;
  border: 1px solid #c3e6cb;
}