.token-color-circle {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  margin-right: 4px;
  border: 1px solid rgba(0,0,0,0.2);
  vertical-align: middle;
}

.circle-white { background: #ffffff; border-color: #ddd; }
.circle-red   { background: #e53935; }
.circle-blue  { background: #1e88e5; }
.circle-black { background: #424242; }
.circle-green { background: #43a047; }
.circle-gray  { background: #9e9e9e; } /* colorless -> gray */
.circle-invalid { background: #ff9800; }

/* small helper for preview area */
.token-colors-preview { margin-top: 0.5rem; }