/* 控制栏整体容器：浅蓝色背景 + 居中对齐 */
.controlbar-container {
  padding: 10px;
  color: #333;
  background-color: #e6f2ff; /* 浅蓝色背景 */
  text-align: center; /* 子元素整体居中 */
}

/* 主标题样式 */
.controlbar-title {
  font-size: 16px;
  margin-top: 0;
  margin-bottom: 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid #b3d1ff; /* 浅蓝色边框 */
  color: #0066cc; /* 标题文字加深 */
}

/* 每个区块容器 */
.controlbar-section {
  margin-bottom: 15px;
  padding: 8px;
  background-color: #f0f7ff; /* 区块浅蓝背景（比容器略浅） */
  border-radius: 4px; /* 轻微圆角 */
}

/* 区块标题样式 */
.controlbar-section-title {
  font-size: 14px;
  margin-top: 0;
  margin-bottom: 8px;
  color: #0052aa; /* 区块标题颜色 */
  font-weight: 600;
}

/* 文本元素：居中显示 */
.controlbar-item {
  margin: 5px 0;
  padding: 5px 0;
  margin-left: auto; /* 水平居中 */
  margin-right: auto;
  max-width: 90%; /* 限制最大宽度，避免过宽 */
}

/* 链接元素：居中显示 + 样式优化 */
.controlbar-link {
  display: block;
  color: #0066cc; /* 链接蓝色 */
  text-decoration: none;
  padding: 5px 0;
  margin: 5px auto; /* 水平居中 */
  max-width: 90%;
  transition: color 0.2s; /* hover 效果过渡 */
}
.controlbar-link:hover {
  color: #004080; /*  hover 时加深 */
  text-decoration: underline;
}

/* 按钮元素：居中显示 + 样式优化 */
.controlbar-button {
  width: 90%; /* 按钮宽度略小于容器 */
  margin: 5px auto; /* 水平居中 + 上下间距 */
  padding: 6px 0;
  background-color: #cce5ff; /* 按钮浅蓝色背景 */
  border: 1px solid #99ccff; /* 按钮边框 */
  color: #0052aa; /* 按钮文字颜色 */
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.2s;
}
.controlbar-button:hover {
  background-color: #b3d1ff; /* hover 时加深背景 */
  border-color: #7fb3ff;
}