/* ===== Settings — Backend 탭 =====
   각 role을 1행 카드로. api-keys/llm-model 탭의 토큰 차용.
*/

.backend-row-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.backend-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 8px 12px;
}

.backend-row-role {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  font-family: "SF Mono", "Fira Code", monospace;
  min-width: 180px;
}

.backend-row-select {
  font-size: 12px;
  padding: 4px 8px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  min-width: 150px;
}

.backend-row-select:focus {
  outline: none;
  border-color: var(--accent);
}

.backend-row-model-input {
  font-size: 12px;
  font-family: "SF Mono", "Fira Code", monospace;
  padding: 4px 8px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  min-width: 130px;
}

.backend-row-model-input:focus {
  outline: none;
  border-color: var(--accent);
}

.backend-row-spacer {
  flex: 1;
}

/* 적용값 뱃지 */
.backend-badge {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  font-family: "SF Mono", "Fira Code", monospace;
}

.backend-badge--local {
  background: var(--bg-secondary);
  color: var(--text-secondary);
}

.backend-badge--pi {
  background: rgba(76, 175, 80, 0.12);
  color: #2e7d32;
}

.backend-badge--claude {
  background: rgba(255, 152, 0, 0.14);
  color: #ef6c00;
}

.backend-badge--codex {
  background: rgba(99, 102, 241, 0.14);
  color: #4f46e5;
}