.td-concept-node {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 130px;
  min-height: 44px;
  padding: 8px 10px;
  border: 1.5px solid var(--td-graph-node-border, #d0d5e0);
  border-radius: var(--td-graph-border-radius, 8px);
  background-color: var(--td-graph-node-bg, #ffffff);
  box-shadow: var(--td-graph-node-shadow, 0 2px 6px rgba(21, 26, 36, 0.08));
  color: var(--td-graph-node-text, #151a24);
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  line-height: 1.4;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
  cursor: pointer;
  transition:
    border-color 150ms ease,
    background-color 150ms ease,
    box-shadow 150ms ease,
    color 150ms ease;

  &:hover {
    border-color: var(--td-graph-node-hover-border, #2f3443);
    box-shadow: var(--td-graph-node-hover-shadow, 0 6px 18px rgba(21, 26, 36, 0.14));
  }

  &--active {
    background-color: var(--td-graph-node-active-bg, #ed5c17);
    color: var(--td-graph-node-active-text, #ffffff);
    font-weight: 600;
    border-color: var(--td-graph-node-active-bg, #ed5c17);
    box-shadow: var(--td-graph-node-active-shadow, 0 4px 14px rgba(237, 92, 23, 0.35));
    cursor: default;

    .react-flow__handle {
      background-color: rgba(255, 255, 255, 0.6);
      border-color: rgba(255, 255, 255, 0.4);
    }
  }

  .react-flow__handle {
    width: 8px;
    height: 8px;
    border: 2px solid transparent;
    border-radius: 50%;
    background-color: transparent;
    opacity: 0;
    pointer-events: none;
    transition: background-color 150ms ease;
  }
}

.td-concept-node__label {
  display: block;
  width: 100%;
  text-align: center;
}