:root {
  --pipeline-text: #0f172a;
  --pipeline-muted: #64748b;
}

.is-hidden {
  display: none !important;
}

.detail-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  container-type: inline-size;
}

.section-title {
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--pipeline-muted);
}

.section-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.settings-title-row {
  margin-bottom: 10px;
}

.settings-subtitle {
  margin-bottom: 13px;
}

.page-tab-container {
  background: #eee;
  padding: 8px 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  margin-bottom: 0;
  border-radius: 8px 8px 0 0;
}

.page-tab {
  background: #bbb;
  color: #fff;
  border: none;
  padding: 8px 14px;
  font-size: 13px;
  cursor: pointer;
  border-radius: 6px;
  min-width: 74px;
  transition: all 0.2s ease;
}

.page-tab:hover {
  background: #218838;
}

.page-tab.active {
  background: #235d39;
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.2);
}

.page-tab-line {
  height: 2px;
  background: #333;
  margin-top: -1px;
  border-radius: 0 0 4px 4px;
}

.dark .page-tab-container,
body.dark .page-tab-container {
  background: #374151;
}

.dark .page-tab,
body.dark .page-tab {
  background: #4b5563;
  color: #e5e7eb;
}

.dark .page-tab:hover,
body.dark .page-tab:hover {
  background: #16a34a;
}

.dark .page-tab.active,
body.dark .page-tab.active {
  background: #3b82f6;
}

.dark .page-tab-line,
body.dark .page-tab-line {
  background: #4b5563;
}