/* 
  自定义组件样式
  这些是为了替代之前在HTML中直接使用的、冗长的Tailwind @apply 指令。
  通过将它们提取到单独的文件中，我们保持了HTML的整洁，并实现了更好的代码组织。
*/

.parameter-card {
  background-color: var(--theme-card);
  border-radius: 0.5rem; /* rounded-lg */
  border-width: 1px;
  border-color: var(--theme-border); /* 主题边框 */
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); /* shadow-sm */
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.parameter-card:hover {
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); /* shadow-md */
}

.parameter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom-width: 1px;
  border-color: var(--theme-border);
  background-color: var(--theme-muted);
  color: var(--theme-foreground);
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}

.parameter-body {
  padding: 1rem;
}

.slider-container {
  position: relative;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.slider-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.slider-value {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem; /* text-xs */
  font-weight: 500; /* font-medium */
  background-color: #e0e7ff; /* bg-blue-100 */
  color: #3730a3; /* text-blue-800 */
  border-radius: 9999px; /* rounded-full */
}

/* 之前JS依赖这个active类来切换状态 */
.tool-btn.active {
  background-color: #e0e7ff; /* bg-blue-100 */
  color: #4338ca; /* text-blue-700 */
}