/* 
 * 线路测速页面专用样式表
 * 此文件定义了线路测速页面特有的样式和布局
 */

/* 居中布局辅助类 */
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 测速页面主容器样式 */
.speed-test-container {
  max-width: 28rem;
  width: 100%;
  padding: 1.5rem;
}

/* 测速页面标题区域样式 */
.speed-test-header {
  text-align: center;
  margin-bottom: 2rem;
}

.speed-test-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.speed-test-subtitle {
  color: var(--gray-400);
}

/* 端点列表样式 */
.endpoints {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* 端点卡片样式 - 可修改背景颜色和圆角 */
.endpoint-card {
  background-color: var(--gray-900);
  border-radius: 0.5rem;
  padding: 1rem;
}

/* 端点卡片头部样式 */
.endpoint-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.endpoint-info {
  display: flex;
  align-items: center;
}

.endpoint-info i {
  margin-right: 0.5rem;
}

.endpoint-status {
  display: flex;
  align-items: center;
}

.endpoint-time {
  margin-left: 0.5rem;
}

/* 进度条容器样式 - 可修改背景颜色和圆角 */
.progress-container {
  height: 0.5rem;
  background-color: var(--gray-800);
  border-radius: 9999px;
  overflow: hidden;
}

/* 进度条样式 - 可修改背景颜色和过渡效果 */
.progress-bar {
  height: 100%;
  background-color: var(--blue-600);
  border-radius: 9999px;
  transition: width 0.3s ease;
}

/* 文本颜色类 */
.text-green {
  color: var(--green-400);
}

.text-red {
  color: var(--red-400);
}

/* 结果消息样式 */
.result-message {
  margin-top: 2rem;
  text-align: center;
  display: none;
}

.result-message.success {
  color: var(--green-400);
  display: block;
}

.result-message.error {
  color: var(--red-400);
  display: block;
}