* {
  font-family: Sans-Serif;
}

h1 {
  font-size: 1.5em;
}

h2 {
  font-size: 1.25em;
}

.page-container {
  display: grid;
  grid-template-columns: 1.25% 98.75%;
  width: 100%;
}

.progress-bar-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 12.5%;
  height: 100vh;
  overflow-y: auto;
  background-color: #f5f5f5;
  /* 可选：为 progress bar 添加背景色 */
}

.main-content {
  padding-left: 12.5%;
  width: 87.5%;
}

.step-progress {
  position: static;
  width: 100%;
  padding: var(--spacing-5);
  box-sizing: border-box;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-container {
    grid-template-columns: 1fr;
  }

  .progress-bar-container {
    position: static;
    width: 100%;
    height: auto;
  }

  .main-content {
    padding-left: var(--spacing-0);
    width: 100%;
  }
}

.syntaxhighlighter {
  background-color: #1e1e1e !important;
  /* 深色背景 */
  border-radius: 5px;
  padding: var(--spacing-2);
}

.syntaxhighlighter .line.alt1,
.syntaxhighlighter .line.alt2 {
  background-color: #1e1e1e !important;
  /* 确保所有行背景一致 */
}

.chart-controls-container select {
  border-radius: 0;
  padding: var(--spacing-1) 10px;
  height: auto;
  border: 1px solid #ccc;
  font-size: 14px;
  color: #333;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath fill='%23333' d='M0 2l4 4 4-4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
  width: auto;
  min-width: 120px;
}

.chart-controls-container select:hover {
  border-color: #999;
}

/* 如果需要特别强调这些样式，可以添加 !important */
.chart-controls-container select {
  border-radius: 0 !important;
  /* 其他属性也可以根据需要添加 !important */
}